/* Date: September 20, 2009
 * By: Andrew Pregent
 */

/***
 * Remove default features of browser such as auto padding of text. It would lead to
 * unpredictable results, varying from browser to browser, much safer to leave as 0.
 */
* {
	text-align: left;
	padding: 0;
	margin: 0;
	font-family: Georgia;
}
/*
 * This makes the browser always display the vertical scroll bar. This is so that 
 * pages with scrollbars don't appear 'shifted' as opposed to those which don't,
 * since the space is claimed either way.
 */
html {
	overflow-y: scroll;
}

/***
 * The header is the top bar to contain the logo and graphics to make the site
 * distinctive. This should be the first thing the user sees.
 */
#header {
	height: 100px;
	width: 100%;
	background: #aef url(imgs/header.png) no-repeat  bottom center;
}

/***
 * The navigational bar, which is the top panel under the header containing tabs,
 * divides the site clearly into logical sections.
 */
#navCradle {
	width: 100%;
	background: url(imgs/nav-back.png) repeat-x rgb(154,182,24);
	text-align: center;
}
#navCradle #navigation {
	width: 800px;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1px;				/* needed for a strange 1-px shift in Safari */
	padding-top: 15px;
	background: url(imgs/nav.png) top center no-repeat;
}
#navCradle #navigation ul {
	list-style: none;
	padding-left: 100px;
}
#navCradle #navigation ul li {
	float: left;
	margin-left: 5px;
}
#navCradle #navigation a {
	display: block;
	float: left;					/* IE-5 only -> \*/ float: none; /**/
	padding-left: 10px;
	color: #000;
	background: #abc837 url(imgs/nav-left-tab.png) top left no-repeat;
	text-decoration: none;
}
#navCradle #navigation a:hover {
	cursor: hand;					/* make the focused tab act like a link */
	border-bottom-style: none;
}
#navCradle #navigation a:hover,
#navCradle #navigation #cur {
	background: #fff url(imgs/nav-left-cur-tab.png) top left no-repeat;
}
#navCradle #navigation a:hover span {
	background: #fff url(imgs/nav-right-cur-tab.png) top right no-repeat;
}
#navCradle #navigation #cur span {
	background: #fff url(imgs/nav-right-cur-tab.png) top right no-repeat;
	line-height: 30px;
	margin-top: 0;
}
#navCradle #navigation span {
	display: block;
	margin-top: 5px;
	padding-right: 10px;
	letter-spacing: -1px;
	line-height: 25px;
	font-family: Georgia;
	font-weight: bold;
	background: rgb(154,182,24) url(imgs/nav-right-tab.png) top right no-repeat;
}

/***
 * Sidebar for extra navigational purposes such as useful links or to decide
 * between different excerpts.
 */
#side {
	float: left;
	margin-top: 30px;
	padding-left: 10px;
	padding-top: 15px;
	padding-right: 20px;
	border-right: solid 2px;
}
#side h2 {
	padding-bottom: 15px;
	font-size: small;
	list-style: none;
	text-align: right;
	line-height: 22px;
}
#side ul,
#side ol {
	padding-bottom: 15px;
	list-style: none;
}
#side li {
	text-align: right;
	line-height: 22px;
}
#side .heading {
	padding-bottom: 5px;
	font-weight: bold;
}
#side li a {
	font-weight: normal;
	text-decoration: none;
	color: #000;
}

/***
 * This is where all the main content for each page will go.
 */
#content {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	text-align: left;
}
#content #main {
	width: 100%;
}
#content #main .name {
	width: 100%;
	margin-top: -15px;				/* eat up some of the headings space */
	margin-bottom: 20px;			/* supply space at the bottom to make up for it */
	font-family: Helvetica;
	font-size: small;
	letter-spacing: 1px;
	text-transform: uppercase;
}
#content #main img {
	float: right;
	padding: 10px;
}
#content #main p {
	padding: 10px;
	padding-left: 50px;
	padding-right: 50px;
	font-size: 98%;
	line-height: 1.25em;
	word-spacing: 1px;
	text-indent: 25px;
}
#content #main form textarea {
	width: 100%;					/* overwrite rows and cols values */
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	margin-right: 50px;
	font-size: 98%;
	word-spacing: 1px;
	text-indent: 25px;
	background-color: #ffffff;
}
#content #main form {
	margin-top:	10px;
	margin-left: 25px;
}
#content #main form a {
	font-weight: normal;
	font-size: 98%;
	line-height: 1.25em;
	word-spacing: 1px;
}
#content #main form a:hover {
	border: none;
}
/*
 * Lists in content should be indented by the same amount as the first line
 * of the paragraphs.
 */
#content #main ul,
#content #main ol {
	padding-left: 55px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
/*
 * Heading heirarchy starts at h2 on this site, don't ask why =)
 */
#content #main h2 {
	margin-top: 20px;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 5px;
	width: 100%;
	font-family: Helvetica;
	font-size: medium;
	letter-spacing: 1px;
	text-transform: uppercase;
}
/*
 * Links are bold, so they will be obviously separated from normal text.
 */
#content #main a {
	font-weight: bold;
	text-decoration: none;
	color: #000;
}
/*
 * Lists are stylized to fit the theme.
 */
#content #main li {
	list-style: url(imgs/bullet.png);
}
/*
 * When the cursor hovers over a link, highlight it.
 */
#content #main a:hover {
	border-bottom: solid #000 1px;
	cursor: hand;
}

/***
 * Comments are put under each post, hidden by default to avoid clutter and
 * made visible by javascripts. 
 */
#content #main .comments {
	width: 90%;
	padding-right: 10px;
	padding-top: 35px;
	padding-left: 50px;
	padding-bottom: 30px;
	text-align: right;
	font-size: small;
	color: #555;
	background: #fff url(imgs/comments.png) 45px 0 no-repeat;
}
#content #main .comments a {
	margin-right: 10px;
	padding-right: 10px;
	color: #555;
	font-weight: normal;
	border-right: solid 1px #555;
}
#content #main .comments a:hover {
	color: #000;
	border-bottom: none;
}
/*
 * The 'cradle' which holds the comments.. should be padded at the bottom as
 * to keep things from being smushed. Also, by default comments are hidden, 
 * and a script toggles this off and on in the comment header bar.
 */
#content #main .comments ul {
	display: none;						/* hide by default */
}
/*
 * Put the comments flush with the comment header.
 */
#content #main .comments ul li {
	padding-top: 10px;
	margin-left: -50px;
}
#content #main .comments ul, #content #main .comments ul li {
	list-style: none;
	list-style-type: none;				/* for IE-6 */
}
/*
 * Reduced padding on paragraphs in comments to keep it contained looking.
 */
#content #main .comments p {
	padding: 5px;
}
#content #main .comments ul li .panel {
	height: 150px;
	margin-left: -10px;
}
#content #main .comments ul li textarea {
	width: 100%;						/* overwrite rows and cols values */
	float: left;
	margin-top: 5px;
	margin-bottom: 2px;
	margin-left: 0;
	margin-right: 0;
	padding: 5px;
	text-indent: 0;
	border: 1px #aaa solid;
}
#content #main .comments ul li input {
	float: left;
	margin: 0;
	padding: 5px;
	text-indent: 0;
	border: 1px #aaa solid;
}
#content #main .comments ul li a {
	float: right;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
	border: none;
}

/***
 * Footer at bottom for fine print (copyright, disclaimer, etc).
 */
#content #main #footer {
	clear: both;
	margin-top: 20px;
}