/* *********************************************  Sitewide Attributes - craigchevrier.com 2007  ********************************************* */

/* *********************************************  NOTES  ********************************************* 

A. I attempted to comment everything for you to understand. In most cases, many of the attributes are layout specific and won't require you to change.
If there there are any circumstances where there are significant layout changes, just let me know and I will probably be able to make the changes
pretty quickly.

B. Be aware that I did not use width & height attributes for images. xhtml strict prohibits use of the height and width, but can be specified if necessary in the stylesheet. 
What this means to you is that if you upload an image that is bigger than the space its in, it will break the page. 
For the three images in the header the dimensions are 126x127 px. Also if you put inline images in the content are be aware of sizing.

Markup Key:
1. <!-- /id=text -->
	- This means that it is the closing tag for a div or p. Used to make things easier for you to find the beginning and end to lengthy tags

2. The code below is php markup for navigational purposes. This is a slick way to set the navigation include to keep the 'on' state of the page in that category. 
So what this means to you is to put this code in the header of all you pages before the 'html' tag to give it an id. No matter how many sidenav pages you create
as long as this code is in the top of the page, top level navigation will stay on.
ie:
	<?php
		$thisPage="bio";
	?>


****************************************************************************************** */

body {
  	margin:0 auto 50px auto; /* the 'auto' allows the page to scale properly left to right, or centers */
	background:#79848F;
	font-size:11px;
	font-family:helvetica;
	color:#333;
}

/* These settings need to 'zeroed' out to get rid of the default round bullet for the <ul> and royal blue outline that browsers put on images that are linked if you
don't set 'border:0; */ 

ul { list-style:none; } 
img { border:0; }
/* All common styles that are located at the top level b/c they are used on all pages*/
.clear { clear:both; }
.spacer { height:20px; }
.half_spacer { height:10px; }
.qtr_spacer { height:5px; }
#container { margin:30px auto 0 auto; width:770px; } /* controls entire page area */

/* Navigation */
#nav { /* sets bg image & width */
	margin:0;
	padding:0;
	background:url('/_common/img/nav_bg.jpg') no-repeat 0 0;
	width:486px;
	height:67px;
	border:1px solid #666;
}
#nav ul { margin:0; padding:0; }
#nav ul li { float:left; position:relative; left:20px; top:40px; }


/* *********************************************  Header  ********************************************* 

This particular section took quite some time to get to work in all the browsers correctly, so making a backup before changing would be a good idea. 

****************************************************************************************** */

#header { position:relative; left:3px; width:768px; background:#31416B; }
#column { 
	background:#31416B;
	width:486px;
	height:292px;
	float:left;
}
#main { 
	margin:0;
	padding:0;
	position:relative;
	left:0;
	width:486px;
	height:186px;
	background:url('/_common/img/main_bg.jpg') repeat-x 0 0;
	border-left:1px solid #666;
	border-right:1px solid #666;
}
#bottom { 
	position:relative;
	left:1px;
	top:0;
	background:url('/_common/img/bottom_bar.jpg') no-repeat 0 0;
	height:24px;
	border-top:1px solid #666;
}
#email { float:right; padding:0 21px 7px 0; font-weight:bold; }
#logo { float:right; }

/* three images that are beneath the navigation */
#main img { margin:0 20px 0 0; position:relative; left:33px; top:28px; border:1px solid #fff; }


/* *********************************************  Content  ********************************************* */

#content { margin:0 auto; padding:20px 23px 50px 23px; background:url('/_common/img/content_bg.jpg') repeat-y; }
#text { margin:0; padding:0; float:right; width:503px; }
#text h1 { 
	margin:10px 0 0 0;
	padding:0 0 0 15px;
	height:31px;
	font-size:16px;
	color:#F1F1F1;
	background:url('/_common/img/titlebar_bg.gif') no-repeat bottom left;
}
#text #padding { margin:20px 0 0 0; padding:26px 18px 30px 18px; background:#f1f1f1; }
#text #padding p { line-height:14px; }
#text #padding h2 { /* This is the inline heading for sub titles in the content */
	font-size:13px;
	font-weight:bold;
}


/* *********************************************  Side Nav  ********************************************* */

#sidenav { padding:0; float:left; width:189px; }
#sidenav h1 { margin:0; padding:10px 0 7px 33px; font-size:16px; color:#F1F1F1; background:url('/_common/img/icon_logo.jpg') no-repeat 0 3px; }
#sidenav p { margin:0; padding:0; position:relative; top:-2px; height:7px; background:url('/_common/img/sidenav_bar.gif') no-repeat 0 0; } /* blue bar underneath section title */
#sidenav ul { margin:22px 0 0 0; padding:0; position:relative; left:3px; top:0; width:180px; }
#sidenav li { margin:0; padding:0 0 10px 0; }


/* *********************************************  Footer  ********************************************* */

#footer { padding:100px 0 0 11px; width:773px; background:url('/_common/img/footer.jpg') no-repeat 0 0; }
#footer p { margin:0; padding:0; font-size:11px; color:#ccc; }
#footer p.address { margin:0 0 50px 0; line-height:16px; }
#footer ul { margin:0 0 30px 0; padding:0; height:30px; background:url('/_common/img/footer_nav_bg.gif') no-repeat 17px 20px; }
#footer ul li { margin:0 17px 0 0; display:inline; font-size:11px; color:#ccc;  }

#rss_feed {
	position:relative;
	left:-95px;
	top:-11px;
	float:right;
	color:#ccc;
}
#rss_feed img { position:relative; top:7px; }
#rss_feed a { padding:0 0 0 10px; }

/* *********************************************  Link  ********************************************* */

a:link, a:visited { text-decoration:none; }
a:active, a:hover { text-decoration:underline; }

#email a:link, a:visited, a:active, a:hover { color:#f1f1f1; font-size:11px; }  /* header email link */

/* dark grey more links for first two callouts */
a.more_dk:link, a.more_dk:visited, a.more_dk:active, a.more_dk:hover { padding:0 0 0 12px; color:#333; text-decoration:none; font-weight:bold; font-size:11px; width:40px; }
a.more_dk:active, a.more_dk:hover { background:url('/_common/img/more_arrow_dk.gif') no-repeat 0 3px; }

/* light grey more links for blog callout */
a.more_lite:link, a.more_lite:visited a.more_lite:active, a.more_lite:hover { padding:0 0 0 12px; color:#939393; text-decoration:none; font-weight:bold; font-size:11px; width:40px; }
a.more_lite:active, a.more_lite:hover { background:url('/_common/img/more_arrow_lite.gif') no-repeat 0 3px; }

/* orange rollover for side nav */
a.orange:link, a.orange:visited a.orange:active, a.orange:hover { padding:0 0 0 15px; color:#f1f1f1; text-decoration:none; font-weight:bold; font-size:12px; }
a.orange:active, a.orange:hover { color:#FF9F1E; }


a.credit:link, a.credit:visited, a.credit:active, a.credit:hover { color:#9AA4AB; font-size:11px; } /* link for rculver.com */

a.footerlink:link, a.footerlink:visited { color:#cccccc; text-decoration:none; font-weight:bold; }
a.footerlink:active, a.footerlink:hover { color:#ACACAC; text-decoration:none; font-weight:bold; }