/* RESET */
*{ margin: 0; padding: 0;}
a img, iframe{ border: 0; }
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
h1, h2, h3, h4, h5, h6{ color: white; font-size: 100%; font-weight: normal; }
ul, ol, dl, li, dt, dd{ list-style: none; }
form, fieldset{ border: 0; }	
input, textarea, select, button { font-size: 100%; font-family: "Trebuchet MS", Arial, sans-serif; }
select{ margin: inherit; }
table{ border-collapse: collapse; border: 0; }
td, th, caption{ font-size: 100%; font-weight: normal; text-align: left; }

/* LAYOUT */
body{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 12px; line-height: 1.5em; color: #8ca6ce; background: #1D2022 url(bg_body.gif) repeat-x;  }
.wrap{ width: 960px; margin: 0 auto; }
#Head, #Nav, #Content, #Footer{ float: left; width: 100%; }

#Head{ height: 180px; padding: 6px 0 0 0; border-bottom: 1px solid #373D41; }
	#Head h1{ display: block; margin: 0 auto; width: 410px; height: 180px; background: url(logo.gif) no-repeat; }
	#Head h1 b{ display: block; width: 410px; height: 180px; text-indent:-5000px;}
#Nav{ background: url(bg_nav.gif) repeat-x bottom; }
	#Nav ul{ }
	#Nav li{ float: left; padding: 0; margin:0 35px 0 0; }
	#Nav a{ display: block; padding: 2px 0; text-decoration: none; border-bottom:1px solid #383E42;}
	#Nav a:hover{ border-bottom: 1px solid #A2B1CC; color: #c3cbdf;}
	#Nav a.active{ color:white; border-bottom: 1px solid #fff; }
	
#Content{ background: #16191A url(bg_content.gif) repeat-x; }
#Footer{ height: 90px; padding: 15px 0 0 0; background: url(bg_footer.jpg) no-repeat top center; font-size:11px;}

/* CONTENT */
a{ color: #A2B1CC; }
p{ margin: 0 0 20px 0; }
h2{ font-size: 15px; margin:0 0 10px 0;}
h3{ font-size: 13px; margin:0 0 5px 0;}
.clear{ font-size: 1px; height: 1px; clear: both; line-height: 1px; }
.left{ float: left; }
.right{	float:right;}
.center{ margin: 0 auto; }
.tl{ text-align: left; }
.tr{ text-align: right; }
.tc{ text-align: center; }
.tj{ text-align: justify; }
.small{ font-size: 11px; }
.halfscreen{ width: 470px; }
.hidden{ display: none; }
.vivid{ color: white; }

.block{ float: left; width: 100%; border-bottom: 1px solid #373D41; }
.spacer{ width: 100%; height: 9px; line-height:1px; font-size:1px; background: #111314 url(bg_content.gif) repeat-x; }
.content{ display:none;}
	.content .wrap{ min-height: 270px; padding: 50px 0 50px 0; }
	* html .content .wrap{ height: 270px; }
	.content a:hover{ color: white; }
.visible{ display: block; }
	
/* home */	
#home .wrap{ padding-top: 60px; }
.services li{ background: url(bullet_arrow.gif) no-repeat left; padding:0 0 0 15px; }
.thumb{ width: 270px; }
	.thumb img{ border: 1px solid #434648; }	
	.thumb a{ text-decoration: none; }
	.thumb a:hover img{ border: 1px solid #696d70; }

/* testimonials */
#testimonials .wrap{ padding-bottom: 20px; }
.testimonial{ float: left; width: 470px; background: url(bg_testimonial.gif) no-repeat bottom; padding: 0 0 30px 0; margin: 0 0 5px 0; }
	.testimonial div{ float: left; width: 446px; padding: 16px 12px 0 12px; background:url(bg_testimonial.gif) no-repeat;}
		
/* services */
.box{ float: left; width: 198px; min-height:220px; padding:83px 16px 0  16px; margin: 0 13px 50px 0; background:url(bg_box.jpg) no-repeat;}		
* html .box{ height:220px; }
	.box p{ text-align: justify; margin:0 0 10px 0;}
div.text{ min-height: 300px; _height: 300px; }
#S_design{ background:url(bg_box_design.jpg) no-repeat;}		
#S_interface{ background:url(bg_box_interface.jpg) no-repeat;}		
#S_code{ background:url(bg_box_code.jpg) no-repeat;}		
#S_complete{ background: url(bg_box_complete.jpg) no-repeat; margin: 0; }		

/* price quote, forms */
div.input{ float: left; width: 100%; vertical-align: middle; margin: 0 0 15px 0; position: relative; }
input.text{ width: 372px; border: 1px solid #3C4145; height: 19px;  background: #0a0b0c; color: #8ca6ce;  padding: 3px 0 0 3px;  }
label{ float: left; width: 90px; color: #ccc; }
textarea{ width: 462px; border: 1px solid #3C4145; height: 184px; padding: 3px; margin: 10px 0 10px 0; line-height: 22px; background: #0a0b0c; color: #8ca6ce; overflow: auto; }
#about textarea{ width: 371px; float: right; height:94px;}

/* buttons */
a.btn{ display: block; width: 160px; height: 40px; padding: 4px 0 0 0; color: #c4d1e3; text-decoration: none; background: url(btn_dark.gif) no-repeat; text-align: center; }
a.btn:hover{ background-position: 0 -44px; color: white; }