/* *********************************************  Homepage - craigchevrier.com 2007  ********************************************* */

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

I attempted to comment everything for you to understand. In most cases, may 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.

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

body {
  	margin:0 auto 50px auto;
	background:#79848F;
	font-size:11px;
	font-family:helvetica;
	color:#000;
}
ul { list-style:none; }
img { border:0; }
.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:485px;
	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 { 
	width:485px;
	height:292px;
	float:left;
	border-right:1px solid #666;
}
#main { 
	margin:0;
	padding:0;
	width:485px;
	height:255px;
	position:relative;
	background:#31416B;
	border-left:1px solid #666;
	border-right:1px solid #666;
}
#bottom { 
	position:relative;
	top:-3px;
	background: url('/_common/img/bottom_bar.jpg') no-repeat 0 0;
	height:22px;
	border-top:1px solid #666;
}

#email { float:right; padding:0 21px 7px 0; font-weight:bold; }
#logo { float:right; }


/* *********************************************  Callouts & Blog  ********************************************* */

h1 { font-size:13px; color:#F1F1F1; font-weight:bold; height:22px; width:200px; background:url('/home/img/h1_bg.gif') no-repeat 0 15px; }
#content { padding:20px 12px 50px 12px; background:url('/_common/img/content_bg.jpg') repeat-y; }
.callout { position:relative; left:20px; float:left; width:201px; margin:0 33px 0 0; }
.callout strong { font-size:12px; }
.callout p span { float:right; }
.callout p.left, p.middle { font-size:11px; color:#333; padding:8px; border:1px solid #607FD1; background:#F1F1F1; padding:8px; }

/* Blog */
h2 { 
	font-size:13px; 
	color:#F1F1F1; 
	font-weight:bold; 
	height:22px;
	width:240px;
	background:url('/home/img/blog_h1.gif') no-repeat 0 15px;
}
.callout #blog { 
	font-size:11px;
	color:#f1f1f1;
	padding:8px;
	width:239px;
	padding:0 0 10px 0;
}
.callout #blog ul { 
	margin:20px 0 0 0;
	padding:0;
	position:relative;
	left:10px;
	width:200px;
}
.callout #blog ul li { 
	font-size:11px;
	line-height:14px;
	color:#f1f1f1;
}
.callout #blog ul li strong { margin:0 10px 0 0; }
.callout #blog ul li span { float:right; }
.callout #blog ul li.break { clear:both; 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; }

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; }