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

body {
	margin: 0px;
	padding: 0px;
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color:#333333;
	background-color:#000000;
}
img {border:none;}


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

div#top {
	background:url(images/shadow_top.jpg) bottom repeat-x #000000;
	height:110px;
}
div#middle { 
	background:#FFFFFF;
}
div#middle div.wrapper { /* div#middle div.wrapper#home etc. */
	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:1px;
	height:1px;
	clear:both;
}

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

div#header {
	margin-right:auto;
	margin-left:auto;
	padding-top:33px;
	width:755px;
}
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:#CCCCCC 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 #333; 
}
div#header div#menu ul li {
	display:inline;
	float:left;
}
div#header div#menu ul li a {

	display:block; text-decoration: none; color:#ccc; 
	width:80px;
	height:20px; 
	padding:6px 0 0 0 ; 
	text-align:center;
	border-left:1px solid #333;
	b order-right:1px solid #333; 
	font-family:arial;
	font-size:11px;

}
div#header div#menu ul li a:hover {display:block; 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:10px;
	color:#999999;
	padding:11px 20px 10px 20px;
	margin:12px 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#middle div.wrapper {
	padding:2px 0 10px 0;
	height:400px;
}

div#middle div.wrapper div.column_1 {
	float:left;
	width:140px;
	margin-right:14px;
}
div#middle div.wrapper 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#bottom div.wrapper#home {

}
div#bottom div.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:120px;
}
div#bottom div.wrapper#home div.three_column#third {border:none;}
div#bottom div.wrapper#home div.three_column img {
	display:block;
	margin:0 0 8px 0;
}
div#bottom div.wrapper#home div.three_column h3 {
	margin:0 0 8px 0; 
	font-family: Tahoma, "Lucida Grande", Verdana, sans-serif;
	font-size:16px;
	font-weight: 200;
	letter-spacing:-.2px;
}

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

/* You could imagine how this would go... */

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

/*******
Textdisplay
********/

/* This sets up the columnular paragraph layout */
div.textdisplay p { 
	display:block;
	float:left;
	width: 30%;
}

/*******
Table styles
********/

.tablewrap {
	clear:both;
	margin:0 auto;
}

.tablewrap .feature {
	width:200px;
	background:#ccc;
}

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

/* And this one... */

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


/******
Swapping setup
*******/
div#home  {  
	display:block;
}

div#contactus  {  
	display:none;
}

div#about  {  
	display:none;
}