@charset "UTF-8";
/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, b, a{  margin:0; padding:0; font-weight:normal; text-decoration:none;} 
table { border-collapse:collapse; border-spacing:0; }
fieldset,img, abbr, acronym{  border:0;} 
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } 
ol, ul { list-style:none; } 
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } 
q:before,q:after { content:''; } 
/*---------- END RESET ----------*/


html{
	font-size:100%;
	height:100%;
}

body{
	line-height:1.125em;
	font-family:Arial, Helvetica, sans-serif;
	height:100%;
	text-align:center;
	position:relative;
}
body{background:#000; color:#fff;}

.wrapper{
	width:940px;
	text-align:left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px;
}


/*COMMON ELEMENTS
-------------------------------------------------------- */
h1{ font-size:1em;}
h2{	font-size:.875em;}
h3{	font-size:.75em;}
h4{	font-size:.625em;}
h5{	font-size:.625em;}
h6{	font-size:.625em;}

p{ font-size:.875em; margin-bottom:.875em;}
p em{ text-transform:uppercase; }

div{position:relative}

em {font-weight:bold; color:#999;}

a{color:#fff;}
a:hover{color:#666;}

.imageRight{ float:right; margin-left:20px;}
.imageLeft{float:left; margin-right:20px;}


/*	HEADER
_____________________________________________________________________________
-----------------------------------------------------------------------------*/
#header{width:940px; height:250px; background:url(../img/header_bg.jpg) no-repeat; position:relative;margin-bottom:50px;}

#main_nav{ font-size:1.125em; position:relative;}
#main_nav ul a{ color:#FFF; position:relative; padding-top:16px;}
#main_nav ul a:hover{ color:#4fcaca;}
#main_nav li.home{ position:absolute; top:220px; left:0;}
#main_nav li.about{ position:absolute; top:220px; left:650px;}
#main_nav li.projects{ position:absolute; top:220px; right:650px;}
#main_nav li.contact{ position:absolute; top:220px; right:0px;}

.home_page #main_nav li.home a,
.about_page #main_nav li.about a,
.projects_page #main_nav li.projects a,
.contact_page #main_nav li.contact a { color:#4fcaca; background:url(../img/link_triangle.png) no-repeat center 0px; }

/*	FOOTER
_____________________________________________________________________________
-----------------------------------------------------------------------------*/
#footer{background:url(../img/footer_bg.jpg); width:940px; height:60px; margin:0 auto;}
#footer_nav{ font-size:.75em; position:relative;}
#footer_nav ul a{ color:#666; position:relative;}
#footer_nav ul a:hover{ color:#fff;}
#footer_nav li.about{ position:absolute; top:25px; right:650px;}
#footer_nav li.contact{ position:absolute; top:25px; right:545px;}
#footer_nav li.related{ position:absolute; top:25px; left:540px;}
#footer_nav li.site_map{ position:absolute; top:25px; left:650px;}

#footer {
	height: 60px; /* .push must be the same height as .footer */
}
.push{clear:both; height:100px;}


/*	GRID SYSTEM
_____________________________________________________________________________
-----------------------------------------------------------------------------*/	
.holder{
	float:left;
	margin-right:1.25em;
	position:relative;
}

/* USE ON THE LAST HOLDER IN A ROW */
.end{
	margin-left:0 !important;
	margin-right:0 !important;
}


/*MAIN GRID WIDTHS
(ems set by this formula: targetWidth / 16 = emWidth )
-------------------------------------------------------- */
.forty{width:2.5em;}
.oneHun{width:6.25em;}
.oneSixty{width:10em;}
.twoTwenty{width:13.75em;}
.twoEighty{width:17.5em;}
.threeForty{width:21.25em;}
.fourHun{width:25em;}
.fourSixty{width:28.75em;}
.fiveTwenty{width:32.5em;}
.fiveEighty{width:36.25em;}
.sixForty{width:40em;}
.sevenHun{width:43.75em;}
.sevenSixty{width:50em;}
.sevenSixty{width:em;}
.eightHun{width:47.5em;}
.eightTwenty{width:47.5em;}
.eightEighty{width:51.25em;}
.nineHun{width:56.25em;}
.nineForty{width:58.75em;}

/* WIDTH PERCENTS */
.w100{width:100%;}
.w90{width:90%;}
.w75{width:75%;}
.w50{width:49.9%;}
.w33{width:33%;}
.w25{width:25%;}
.w10{width:10%;}

.h100{height:100px;}

.mHeight_400{min-height:400px;}

/*	BOX STYLES
_____________________________________________________________________________
-----------------------------------------------------------------------------*/


*[class|="box"]{position:relative;}
.box-style_1{border:#666 solid 2px; min-height:400px; background:#111; padding:10px;}
.box-style_2{border:#666 solid 2px; background:#111; padding:30px; text-align:center;}
.box-style_sideBar{border:#666 solid 2px; min-height:400px; background:#111;}
.box-style_main{border:#666 solid 2px; min-height:400px; background:#111;}
.box-style_video{border:#666 solid 2px; min-height:400px; background:#000; width:940px; height:460px; text-align:center;}

.header, .body{position:relative; padding-bottom:20px;}
*[class|="section"]{ padding-bottom:50px;}

#main_content .section .header{padding:0; border-bottom:#666 dotted 1px; margin-bottom:10px;}
	#main_content .section .header h2{font-size:1.125em;}
	#main_content .section .header h3{font-size:.875em; color:#999;}
	
	
/*	SIDE BAR
_____________________________________________________________________________
-----------------------------------------------------------------------------*/

#side_bar{ position:relative;}
#side_bar .header{ padding:10px; text-transform:uppercase; font-size:1.125em;}
#side_bar .body{}
	#side_bar .body ul{}
		#side_bar .body ul li{margin: 0;}
			#side_bar .body ul li a{ padding:5px 10px; display:block; color:#666; border-bottom:#111 solid 2px; border-top:#111 solid 2px;}
			#side_bar .body ul li a:hover, #side_bar .body ul li a.active{color:#fff; background:#343434; border-bottom:#666 solid 2px; border-top:#666 solid 2px;}
		
		
/*	MAIN CONTENT
_____________________________________________________________________________
-----------------------------------------------------------------------------*/
#main_content{}
#main_content .header { padding:10px; border-bottom:#666 solid 2px;}
#main_content .header h1{ font-size:1.5em;}
#main_content .body { padding:10px; }

/*	FORMS
_____________________________________________________________________________
-----------------------------------------------------------------------------*/

fieldset h2{font-size:1.5em; border-bottom:#666 solid 2px; margin-bottom:20px;}
label{display:block; text-transform:uppercase; font-size:.75em; font-weight:bold;}
label.error{color:#69C; font-size:.625em;}
input[type="text"], textarea{width:370px; border:#666 solid 2px; background:#CCC; padding:1px; font-size:1em;}
textarea{height:100px; font-family:Arial, Helvetica, sans-serif;}


form ol li {margin-bottom:10px;}

.submit_btn{text-align:center;}
input[type="submit"]{ background:#CCC; border:#666 solid 2px; color:#333; padding:2px 20px; font-size:1em;}
input[type="submit"]:hover{ border:#fff solid 2px;}

/*	CORNERS
_____________________________________________________________________________
-----------------------------------------------------------------------------*/
.tl { width:5px; height: 5px; background:  url(../img/corners.png) ; position: absolute; top: -2px; left: -2px; }
.tr { width: 5px; height: 5px; background: url(../img/corners.png) right top; position: absolute; top: -2px; right: -2px; }
.bl { width: 5px; height: 5px; background: url(../img/corners.png) bottom left; position: absolute; bottom: -2px; left: -2px; }
.br { width: 5px; height: 5px; background: url(../img/corners.png) bottom right; position: absolute; bottom: -2px; right: -2px; }


/*	TOOLS
_____________________________________________________________________________
-----------------------------------------------------------------------------*/
.clearfix:after, *[class|="section"]:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix, *[class|="section"] {display: inline-block;height: 1%;}

.floatLeft{float:left;}
.floatRight{float:right;}
.clear{clear:both;}

.center_content{margin:0 auto;}