/* CSS Document ©2007 Patrick Mullen, All rights reserved.*/

body,p,ul,dl,ol{
	margin:0;
	padding:0;
}
body {
	font-size:70%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color:#333333;
	background-color:#fff;
	width:100%;
	height:100%;
}
img {border:none;}


/*************
Main Structure
**************/

div#top {
	background:url(/images/shadow_top.jpg) bottom repeat-x #000000;
	height:104px;
}
div#middle { 
	background:#FFFFFF;
}
div#middle div.wrapper {
	margin-right:auto;
	margin-left:auto;
	width:755px;
}
div#bottom {
	background:url(/images/shadow_bottom.jpg) top repeat-x #000000;
	padding:30px 0 0 0;
	color:#CCCCCC;
}
div#bottom div.wrapper {
	margin-right:auto;
	margin-left:auto;
	width:755px;
}
div.clear_div {
	font-size:0px;
	height:0px;
	overflow:hidden;
	clear:both;
}

/***********
Header Style
************/

div#header {
	padding-top:30px;
}
div.outer_wrapper#home div#header {
	margin-right:auto;
	margin-left:auto;
	width:755px;
}
div.outer_wrapper#demo div#header {
	margin: 0 23px;
}
div#header div#logo {
	float:left;
}
div#header div#menu {
	background:url(/images/stripe.jpg) top repeat-x;
	height:33px;
}
div#header div#menu ul { /* The nav /images use capitalized Arial size:11 color:#ccc kerning:-5 (which is like the 
							letter-spacing attribute in CSS); in case you need to make new ones */
	padding:0;
	margin:0;
	float:right;
	border-right:1px solid #3a3a3a;
}
div#header div#menu ul li {
	/*display:inline;*/
	margin-top:0px;
	list-style:none;
	float:left;
	background-image:url(/images/nav-bg.png);
	width:80px;
	height:26px;
}
div#header div#menu ul li a {
	width:80px;
	height:0px;
	overflow:hidden;
	padding-top:24px;
	display:block;
	/*border-bottom:2px solid #000;*/
}
div#header div#menu ul li#home_link{background-position:0px 0px;}
div#header div#menu ul li#about_us_link{background-position:-80px 0px;}
div#header div#menu ul li#blog_link{background-position:-160px 0px;}
div#header div#menu ul li#contact_link{background-position:-240px 0px;}
div#header div#menu ul li a:hover {display:block;}
div#header div#menu ul li a:hover {border-bottom:2px solid #333d44;}


/***********
Footer Style
************/

div#footer{
	background:url(/images/footer_bg.jpg) no-repeat;
	font-family: Tahoma, "Lucida Grande", Verdana, sans-serif;
	font-size:1em;
	color:#999999;
	padding:11px 20px 34px 20px;
	margin:24px 0 0px 0;
}
div#footer div#contact {
	margin-top:4px;
	color:#666666;
}
div#footer div#contact a {
	color:#333d44;
	text-decoration:none;
}
div#footer div#contact a:hover {text-decoration:underline;}


/****************
Home - Chart Demo
*****************/

div.outer_wrapper#home div#column_1 {
	float:left;
	width:140px;
	margin-right:14px;
}
div.outer_wrapper#home div#column_2 {
	padding:4px 0 4px 0;
	
	/* You may want to comment out the following float:right and pixel-width, right now the content and
	   menus are totally isolated. Without the float:right, text or /images in column 2 would flow around
	   the menus, and it wouldnt even really be a column anymore. If you uncomment the text after the
	   picture in the html document and play around with it you'll see what I mean. */
	
	float:right;
	width:600px;
}
ul.graph_options { /* The title /images use Tahoma size:16 color:#333333 kerning:-5 (which is like the 
					  letter-spacing attribute in CSS); in case you need to make new ones */
	margin:0 0 14px 0;
	padding:0;
	border-top:1px solid #CCCCCC;
}
ul.graph_options li {
	list-style:none;
	width:140px;
}
ul.graph_options li a {
	border-bottom:1px solid #CCCCCC;
	padding:2px 7px 2px 7px;
	display:block;
	width:126px;
	color:#333333;
	text-decoration:none;
}
ul.graph_options li a:hover {
	background:#333333;
	color:#FFFFFF;
}


/*************************
Home - Product Description
**************************/

div.outer_wrapper#home div.three_column {
	width:220px; /* actual width = width + left padding + right padding */
	float:left;
	padding:0 15px 0 15px;
	border-right:1px solid #333333;
	height:200px;
}
div.outer_wrapper#home div.three_column#third {border:none;}
div.outer_wrapper#home div.three_column img {
	display:block;
	margin:0 0 8px 0;
}
div.outer_wrapper#home div.three_column h3 {
	font-family: Georgia;
	font-size:1.6em;
	letter-spacing:-.05em;
	margin:2px 0 10px 0;
}


/*******
About Us
********/

div#middle div.wrapper#about_us {
	padding:2px 0 10px 0;
}
div#middle div.wrapper#about_us div#column_1 {
	float:left;
	width:140px;
}
div#middle div.wrapper#about_us div#column_2 {
	float:right;
	width:600px;
}


/******
Contact
*******/

/* And this one... */

div#middle div.wrapper#contact {
	padding:30px 80px 30px 80px;
	/* Basically a big centered thing with some contact */
}