/*/////////	

					DarkLines
					
			  a CSS Style Production
			
			  	   presented by
				
				  LANSUN + SCOTT
				  
				  hand coded by
				   
	 Jonathan Fricke (jonathan@lansunscott.com)
				 
				 Enjoy the show!

 /////////*/



/*/////////	Let the rules begin! /////////*/

#wrapper {
	background-color: #333333;
	background-image: url(img/bkgd_wrapper.gif);
	background-repeat: repeat-y;
	background-position: center;
	width: 955px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	
}
#thePage {
	padding: 20px;
}
body {
	background-image: url(img/bkgd_body.gif);
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	color:#CCCCCC;
}
h1{
	margin:0;
	padding:0;
}

h3{
	color: #E6C86F;
	font-weight:normal;
	border-bottom:1px dotted #E6C86F;
	padding:5px;
	margin-bottom: 15px;

}

h4{
	font-weight:normal;
	color: #FFD801;
	font-family:Tahoma, Helvetica, Arial, Verdana;
	margin-bottom:0px;
	padding:0;
}

h5{
	font-weight:normal;
	
	color: #E7DABC;  /*#FFD801;*/
	font-size:90%;
	font-family:Tahoma, Helvetica, Arial, Verdana;
	margin-bottom:0px;
	padding:0;
}


dl{
	margin:20px 25px;

}

dt{
	
}

dd{
	margin:5px 0 20px 0;
	border-bottom:1px dotted #333333;
	font-size:90%;
	font-family:Tahoma, Helvetica, Arial, Verdana;
	}



hr{
	height:1px;
	border-bottom:1px dotted #4a7189;
}
/*	COMPONENT DIVS /////////////////////////////////////*/

		/*/////////	MASTHEAD /////////*/
#masthead{
	margin:0;
	padding:0;
}
#masthead h1{
	float:left;
	/*border:1px solid #FF0000;*/
	width:250px;
	height:50px;
	background-image: url(img/logo.gif);
	background-repeat: no-repeat;
	background-position: center center;
	margin:0;
	padding:0;
	
}

#masthead span{
	display:none;
}

a#home{
	display:block;
	width:250px;
	height:50px;
}

a#home:hover{
	border:1px dotted #FFF;
}


		/*/////////	UTILS /////////*/
#util{
	font:60% Verdana, Arial, Helvetica, sans-serif;
	text-align:right;
	color:#FFFFFF;
}		
		
#util a{
	color:#FFFFFF;
	text-decoration:none;
	/*border-left:1px dotted #738ea1;*/
	padding:10px;
}
#util a:hover{
	color:#ffe476;
	/*background-color:#2F4B5F;*/
	border-bottom:1px dotted
}
	/*/////////	MENU /////////*/

#menu{
	margin:15px 0;
}

#menu ul{
	margin:0;
	padding:0;
	height:50px;
	/*border-bottom:1px dotted #4a7189;*/
}

#menu li{
	display:inline;
}

#menu li a{
	display:block;
	height:50px;
	float:left;
	width:110px;
}
#menu li a span{
	display:none;
}

				#menu_services a:link, #menu_services a:visited{background: url(img/menu_services_up.gif) no-repeat left top;}
				#menu_services a:hover{background: url(img/menu_services_over.gif) no-repeat left top;}

				#menu_portfolio a:link, #menu_portfolio a:visited{background: url(img/menu_portfolio_up.gif) no-repeat left top;}
				#menu_portfolio a:hover{background: url(img/menu_portfolio_over.gif) no-repeat left top;}

				#menu_company a:link, #menu_company a:visited{background: url(img/menu_company_up.gif) no-repeat left top;}
				#menu_company a:hover{background: url(img/menu_company_over.gif) no-repeat left top;}
				
				#menu_resources a:link, #menu_resources a:visited{background: url(img/menu_resources_up.gif) no-repeat left top;}
				#menu_resources a:hover{background: url(img/menu_resources_over.gif) no-repeat left top;}
				
				#menu_playground a:link, #menu_playground a:visited{background: url(img/menu_playground_up.gif) no-repeat left top;}
				#menu_playground a:hover{background: url(img/menu_playground_over.gif) no-repeat left top;}
			
				#menu_blog a:link, #menu_blog a:visited{background: url(img/menu_blog_up.gif) no-repeat left top;}
				#menu_blog a:hover{background: url(img/menu_blog_over.gif) no-repeat left top;}
	
		/*/////////	BANNER /////////*/

#banner{
	clear:both;
	height:250px;
	margin-bottom:20px;
}			

#bannerTitle{
	float:left;
	width:240px;
	/*background-image: url(img/section_header_common.gif);*/
	background-repeat: repeat-x;
	background-position: left bottom;
	height: 250px;
	text-align:right;
}

.banner_services{
	background-image: url(img/section_header_services.gif);
}

.banner_portfolio{
	background-image: url(img/section_header_portfolio.gif);
}

.banner_resources{
	background-image: url(img/section_header_resources.gif);
}

.banner_company{
	background-image: url(img/section_header_company.gif);
}

.banner_playground{
	background-image: url(img/section_header_common.gif);
}

.banner_contact{
	background-image: url(img/section_header_contact.gif);
}
.banner_home{
	background-image: url(img/section_header_home.gif);
}

#bannerTitle img{
	margin-top:200px;
	margin-right:20px;
}

#bannerPic{
	float:right;
}
		/*/////////	CONTENT /////////*/
#content{
	clear:both;
}
		/*/////////	SUBNAV /////////*/
#subnav{
	width:240px;
	text-align:right;
	font:75% Verdana, Arial, Helvetica, sans-serif;
	float:left;
}

#subnav ul{
	margin:0;
	padding:0;
	list-style:none;
	border-top:1px dotted #4a7189;
}

#subnav li{
	border-bottom:1px dotted #4a7189;
}
#subnav li a{
	display:block;
	height:25px;
	padding:10px 20px 0px 0;
}

#subnav a:link, #subnav a:visited{
	color:#FFFFFF;
	text-decoration:none;
}

		#subnav .sub_services a:hover{
			background-color:#fcf3ae;
			color:#9a5b11;
		}
		
		#subnav .sub_portfolio a:hover{
			background-color:#d7aeac;
			color:#611714;
		}
		#subnav .sub_company a:hover{
			background-color:#e7d5bf;
			color:#2b0c39;
		}		
		
		#subnav .sub_resources a:hover{
			background-color:#c2de9c;
			color:#538339;
		}
		#subnav .sub_playground a:hover{
			background-color:#eff9f1;
			color:#611714;
		}


/*/////////	PAGE /////////*/
#page{
	margin-left:260px;
	font:100% Myriad Pro, Georgia, "Times New Roman", Times, serif;
	line-height:22px;

}

#page h2{
	 font:170% Georgia, "Times New Roman", Times, serif;
	 font-weight:normal;

}	

#page p{

}

#page a:link, #page a:visited{
	color: #FFD801;
	
}

#page a:hover{
	color:#9AF17C;
	text-decoration:none;
}



/*/////////	PAGE SPECIFIC /////////*/
.service{

	height:220px;
}

.service img, .tool img{
	margin:5px;
	float:left;
}

.tool {
	height:250px;
}

.tool p, .service p{
	margin-left:200px;
}

.tool h4{
	margin-top:5px;
	margin-bottom:2px;
	font-weight:normal;
}

#clientlist li{
	height:25px;
}


/*/////////	FORM /////////*/
label{
	display:block;
	width:100px;
	float:left;
}

input, textarea{
	margin-bottom:10px;
	background-color:#CCCCCC;
	font:110% Verdana, Arial, Helvetica, sans-serif;
	width:250px;
}

#submit{
	margin-left:100px;
}
.req{
	color:#990000;
}


#footer{
	clear:left;
	background-color: #333333;
	background-image: url(img/bkgd_wrapper.gif);
	background-repeat: repeat-y;
	background-position: center;
	font:60% Verdana, Arial, Helvetica, sans-serif;
	border-top:1px dotted #4a7189;
	padding:4px;
	padding-top:0;
	margin:0 10px;
}
#footer ul{
	padding:0;
	margin:0;
}

#footer li{
	list-style-type:none;
	float:left;
	width:75px;
	margin:10px;
	padding:0;
}

#footer a{
	color:#E6E193;
}

#footer a:hover{
	text-decoration:none;
}

.pdesc {
	margin: 0px 10px 10px 300px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #333333;
	padding-bottom: 5px;
	width: 225px;
	border-top: 1px solid #333333;
	padding-top: 5px;
}
.pitem{
	margin: 0 0 0 50px;
	float: left;
}
#creds{
	margin-top:15px;
}
#creds img{
	margin:10px;
}
