/* reset CSS defaults to be the same across all browsers
   adapted from http://snipplr.com/view.php?codeview&id=778
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
q:before,q:after{content:'';} /* Cater to IE. Grrrr */

* {
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
}

body {
	background: #ffffff url(../images/caktus-bg-pale.png) no-repeat scroll left top;
}

/* -- HEADER -- */

/* So that elements will wrap correctly, the general approach taken with padding
   is that padding-top is set to X (currently 0.5em) and padding-bottom is 0.
 */

#title {
	width: 100%;
	padding: 0;
	margin: 0;

	/*background-color: #b03b28;*/
	background: transparent url(../images/header-red.png) repeat;
}

#title a {
	padding: 0;

	color: white;
	font-weight: bold;
	text-decoration: none;
}

#title #logo {
	float: left;
	padding: 0.5em 0 0 10%;
}

#title #logo img {
	border: none;
}

#title #utils {
	float: right;
	padding: 0.5em 0.5em 0 0.5em;

	color: #fff;
	font-size: 9pt;
	text-align: right;
	white-space: nowrap;
}

/*
Use something like this if we include a search box at some point
#title #utils input {
	top: 0;
	height: 1.5em;
	border: none;
	padding: 1px;
	margin-bottom: 5px;
}
*/

#title #utils #contact {
	padding: 5px 15px 3px 30px;

	background: transparent url(../images/letter.png) no-repeat 5px center;
}

#title #utils #contact:hover {
	text-decoration: underline;
}

/* -- NAVIGATION -- */

#navigation {
	padding: 0.5em 0 0 0;
	clear: both; /* make sure the navigation sits below both #logo and #utils */

	white-space: nowrap; /* keep all the tabs in a line */

	/*background-color: #b03b28;*/
	background: transparent url(../images/header-red.png) repeat;
}

/* begin css tabs */

#navigation ul {
	margin: 0 10% 0 0;
	padding: 5px 0 5px 0; /* THIRD number must change with respect to padding-top (X) below */

	list-style-type: none;
	
	font-weight: bold;
	font-size: 10pt;

	text-align: right;
}

#navigation ul li.selected {
	display: inline;
	position: relative;

	/* move down 1px to cover border-top of #sub-navigation */
	top: 1px;
	padding: 5px 6px 5px 6px; /* FIRST number must change with respect to padding-top (X) above */
	margin: 0 2px 0 2px;

	border: 1px solid #bbb; /* be sure to set corresponding border below */
	border-bottom: none;

	background: #5d81a8;
	color: #fff;
}

#navigation ul li.background {
	display: inline;
	position: relative;

	 /* move down 2px, but decrease padding-bottom so as not to cover border-top of #sub-navigation */
	top: 2px;
	padding: 5px 6px 3px 6px; /* FIRST number must change with respect to padding-top (X) above */
	margin: 0 2px 0 2px;

	border: 1px solid #bbb; /* be sure to set corresponding border above */
	border-bottom: none;

	background: #963223;
	color: #fff;
}

#navigation ul li.background:hover {
	top: 1px; 
	padding: 5px 6px 4px 6px; /* FIRST number must change with respect to padding-top (X) above */

	background: #b03b28;
}

#navigation ul li a {
	color: #eee;
	text-decoration: none;
}

/* end css tabs */

#sub-navigation {
	min-height: 0.3em;

	border-top: 1px solid #ddd;
	background-color: #5d81a8;
	white-space: nowrap;
}

#sub-navigation ul {
	padding: 5px 5px 5px 5px;
	margin: 0 2em 0 2em;

	font-size: 8pt;
	text-align: right;
	list-style-type: none;
}

#sub-navigation ul li {
	display: inline;

	padding: 0 5px 0 8px;
	border-left: 1px dotted #fff;

	color: #fff;
}

/* last-child doesn't seem to be supported in IE 5 or Opera, ah well */
#sub-navigation ul li:first-child {
	border-left: none;
}

#sub-navigation ul li.selected {
	/* other stuff here? */
}

#sub-navigation ul li a {
	padding: 1px 3px 1px 3px;
	color: #fff;
	text-decoration: none;
}

#sub-navigation ul li a:hover {
	text-decoration: underline;
}

/* -- CONTENT -- */
/* content layout */
#content #left-column {
	float:left;

	width:   6em;
	margin:   0;
	padding:  1em;
}

#content #right-column {
	float:      right;
	text-align: center;

	width:   6em;
	margin:   0;
	padding:  1em;
}

/* in the HTML, #center-column /must/ appear after #left-column and #right-column */
#content #center-column {
	margin:0 8em; /* = right/left column width/2 + right/left padding*2 */

	padding: 0 1em;
	min-width: 25em;
}

#splash {
	width: 100%;
	height: 250px;
	background: #ffffff url(../images/idea_on_a_napkin.jpg) no-repeat scroll center bottom;
}

#content #left-panel {
	float: left;
	margin: 0;
	padding:0;
	width: 50%;
}

#content #inner-left-panel {
	padding-right: 1.5em;
}

#content #right-panel {
	float: right;
	margin:0;
	padding:0;
	width:50%;
}

#content #inner-right-panel {
	padding-left: 1.5em;
	border-left: 1px solid #ddd;
}

#content #cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0;
	padding:0;
	background:transparent;
}

/* -- content style -- */
#content ul {
	margin: 0.5em 1em;
	list-style-type: square;
	list-style-position: outside;
	font-size: 10pt;
	line-height: 1.5em;
}

#content li {
	margin: 0.5em 0;
}

#content a {
	text-decoration: underline;
	font-weight: bold;
	color: #b03b28;
	padding: 1px;
}

#content a:hover {
	text-decoration: underline;
	color: #fff;
	background-color: #b03b28;
}

#content h1,h2,h3 {
	padding: 1em 0 0.1em 0;
	color: #666;
}

#content h1,h2 {
	border-bottom: 1px solid #aaa;
}

/* TODO figure out the right way to handle clear: both; in two key cases:
   1) the first <hN/> on a page should not have clear: both; set, otherwise it
      will appear below any content in #left-column and #right-column
   2) lists like the portfolio and team members need to have clear: both; set 
      on the <hN/> tag so that new items appear below the previous one.  Hm, as
      I write this I wonder if these cases should just be made into HTML lists?
   
   Right now if you start with <h2> at the top of the page, you'll get some extra
   white space that you probably don't want.
 */
#content h3 { font-size:110%; }
#content h2 { font-size:120%; clear: both;}
#content h1 { font-size:140%; }

#content {
	font-size: 10pt;
}

#content p {
	
	line-height: 1.3em;
	padding-top: 0.5em;
}

#content .fineprint {
	font-size: 65%;
	line-height: 2ex;
}

#content strong {
	font-weight: bold;
}

#content em {
	font-style: italic;
}

#content img {
	border: 1px solid #aaa;
}

#content .img-left {
	float: left;
	margin: 0 10px 10px 0;
}

#content .img-right {
	float: right;
	margin: 0 0 10px 10px;
}

#content div.footnote {
	margin: 2em 0 0 0;
	border-top: 1px solid black;
	background: #ddd;
	font-size: smaller;
}

#content div.footnote > p {
	padding-top: 1ex;
	font-size: smaller;
}

/* not to be confused with ".footnote a" */
#content a.footnote {
	text-decoration: none;
	vertical-align: super;
	font-size: 6pt;
	line-height: 1ex;
}

#content div.footnote a.footnote {
	vertical-align: middle;
}

#content a.sharpnav {
/* display: none; would deactivate the connection: brute-force hide it */
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

#contact-form .errorlist li {
	font-weight: bold;
	color: #b03b28;
	list-style-type: square;
	font-size: 10pt;
	
}

#contact-form th {
	font-weight: bold;
	font-size: 10pt;
	text-align: right;
}

#contact-form th,td {
	padding: 0.2em;
}

#contact-form .button {
	font-weight: bold;
}

/* -- FOOTER -- */

html, body {
	height: 100%;
}

#page-wrapper {
	position: relative;
	min-height: 100%;
}

* html #page-wrapper {
	height: 100%;
}

#content {
	clear: both;
	padding-bottom: 9em; /* = #footer:margin-top * -1 + N */
}

#footer {
	position: relative;
	margin-top: -7em; /* = padding*2 + height */

	height: 5em;
	min-height: 5em;
	max-height: 5em;

	padding: 1em;

	background: #ddd;
	text-align: center;
}

#footer {
	background: transparent url(../images/gray-trans-bg.png) repeat;
	color: #fff;

	font-size: small;
	text-align: center;
}

#footer a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

#footer a:hover {
	text-decoration: underline;
}

#copyright {
	position: relative;
	z-index: 2;
	margin-top: 1em;
	font-size: 9pt;
}

/* -- footer navigation -- */

ul#footer-nav {
	text-align: center;
	font: bold 9pt verdana, arial, sans-serif;
	list-style-type: none;
	white-space: nowrap;
}

ul#footer-nav li {
	display: inline;
	padding: 0 5px 0 8px;
	border-left: 1px dotted #fff;
}

/* last-child doesn't seem to be supported in IE 5 or Opera, ah well */
ul#footer-nav li:first-child {
	border-left: none;
}

ul#footer-nav li.selected {
	/* other stuff here? */
	color: #fff;
}

ul#footer-nav li.separator {
	font-weight: normal;
}

ul#footer-nav li a {
	color: #fff;
	text-decoration: underline;
	padding: 3px 4px;
}

ul#footer-nav li a:hover {
	color: #666;
	background-color: white;
}

/* give user hint that text has more info (via mouseover) */
span.hint {
	border-bottom: 1px dotted black;
}

.small {
	color: #aaa;
	font-size: 9pt;
}

table.spacing td {
	padding: 0.5em;
}

table.spacing th {
	padding: 0.5em;
	text-align: right;
	vertical-align: top;
	font-weight: bold;
}

table.spacing .submit {
	padding-top: 1.2em;
	text-align: right;
}

table.spacing ul.errorlist {
	font-weight: bold;
	color: #c00;
}

table.crm {
	font-size: 9pt;
}

.block_color {
/*	background-color: #FFF5F5;*/
/*	border: 1px solid #dddddd;*/
	padding: 0.5em;
}

table#interactions tbody tr th {
	width: 20%;
}

table.crm td, table.crm th {
	padding: 0.2em;
	vertical-align: top;
}

table.crm th {
	font-weight: bold;
}

div#crm_content {
	padding: 1em;
}


input.calendar,
select.calendar {
	width: 99px;
}

button.calendar {
	background: url(../images/calendar/calendar-icon.gif);
	border: 0;
	cursor: pointer;
	height: 20px;
	margin-right: 6px;
	width: 20px;
	vertical-align: middle;
}
button.calendar:hover,
button.calendar.active {
	background-position: 0 20px;
}

table#hours {
	width: 100%;
}
table#hours th.user {
	width: 20%;
}

table#projects {
	width: 100%;
}
table#projects th.id {
	width: 10%;
}

table#projects th.summary {
	width: 60%;
}

table#projects th.padding {
	width: 5%;
}

table#projects th.last-modified {
	width: 25%;
}

table#exchanges {
	width: 100%;
}

div.calendar {
	background: url(../images/calendar/calendar.png);
	height: 195px;
	padding: 0 6px;
	text-align: center;
	width: 147px;
}	
	div.calendar * {
		margin: 0;
		padding: 0;
	}	
	div.calendar div {
		background: none !important;
		cursor: move;
		height: 185px;
		overflow: hidden;
		padding-top: 10px;
		position: relative;
		width: 147px;
	}	
	
	div.calendar caption {
		color: #333;
		font: normal 12px/16px Arial, Helvetica, sans-serif;
		padding-top: 6px;
		text-align: center;
		width: 100%;
	}
	div.calendar caption a {
		cursor: pointer;
		display: block;
		height: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -100px;
		top: 17px;
		width: 11px;
	}
	div.calendar caption a.prev {
		background-image: url(../images/calendar/calendar-prev.gif);
		left: 0;
	}
	div.calendar caption a.next {
		background-image: url(../images/calendar/calendar-next.gif);
		right: 0;
	}
	div.calendar caption a:hover {
		background-position: 0 12px;
	}
	div.calendar caption span {
		height: 25px;
		position: relative;
		text-align: center;
	}
	div.calendar caption span.month {
		padding-right: 8px;
		color: #0597DB;
	}
	div.calendar caption span.month:after {
		content: ',';
	}

	div.calendar table {
		background: #FFF;
		border: 0;
		border-collapse: collapse;
		border-spacing: 0;
		cursor: default;
		margin: 0 auto;
		overflow: hidden;
		width: 147px;
	}
	div.calendar td,
	div.calendar th {
		border: 0;
		color: #0597DB;
		font: normal 12px Arial, Helvetica, sans-serif;
		height: 21px;
		text-align: center;
		width: 21px;
	}
	div.calendar td {
		background: url(../images/calendar/calendar-td.gif);
		color: #FFF;
		font-size: 11px;
	}
	div.calendar td.invalid {
		color: #999;
	}
	div.calendar td.valid {
		background: url(../images/calendar/calendar-valid.gif);
		color: #0597DB;
		cursor: pointer;
	}
	div.calendar td.hilite {
		background: url(../images/calendar/calendar-hilite.gif);
	}
	div.calendar td.inactive {
		background: url(../images/calendar/calendar-td.gif) 0 100%;
		color: #FFF;
	}
	div.calendar td.active,
	div.calendar td.hover {
		background: url(../images/calendar/calendar-valid.gif) 0 100%;
		color: #FFF;
		cursor: pointer;
	}
	
ul#exchange_type {
	list-style-type: none;
}

ul#exchange_type li {
	padding: 0;
	margin: 0;
	display: inline;
}

ul#ledger-date-fieldlist {
	list-style-type: none;
}

ul#ledger-date-fieldlist li {
	display: inline;
}

ul#ledger-date-fieldlist li label {
	font-weight: bold;
}

table#accounts {
	width: 70%;
}

table#accounts th {
	font-weight: bold;
}

table#transactions {
	width: 70%;
}

table#transactions th {
	font-weight: bold;
}

/* account ledger style */

TH.ledger {
	font-weight: bold;
	padding: 0.2em;
	border-bottom: 1px solid gray;
	margin: 0.3em;
	text-align: center;
}

TH.ledger.account-name {
	padding-top: 2em;
	font-size: 120%;
	text-align: left;
	color: #777;
	border-bottom: 1px dashed gray;
}

TH.ledger.memo {
	text-align: left;
}

TH.ledger.date {
	width: 7em;
}

TH.ledger.business {
	width: 15em;
}

TD.ledger.number.total {
	width: 6em;
}

TD.ledger {
	padding: 0.2em;
	margin: 0.3em;
	border-right: 1px dotted gray;
	border-bottom: 1px dotted gray;
	text-align: left;
}

TD.ledger.number {
	text-align: right;
}

TD.ledger:first-child {
	border-left: 1px dotted gray;
}
	
