:root { overflow-y:scroll }

body{
	 text-align: center;
	 background-color:#efefef;
	 margin-top:10px;
}

a {
	outline: none;
}

#container{
	margin: 0 auto;
	width:975px; 
}

#banner{
	background:url(../img/banner.jpg) no-repeat;
	width:967px;
	height:127px;
	display:block;
	margin:0 auto;
}

.nav_left{
	background:url(../img/nav_left.png) no-repeat #efefef;
	width:52px;
	height:30px;
	display:block;
	float:left;
}

.nav_right{
	background:url(../img/nav_right.png) no-repeat #efefef;
	width:52px;
	height:30px;
	display:block;
	float:right;
}

.aln_right{ 
	float: right;
}

#header_top {
	height:4px;
	width:100%;
}

#header{
	background:url(../img/nav_bg.png) repeat-x;
	height:30px;
	width:967px;
	margin-left:4px;
}

	#header #nav{
		margin:0px;
		padding:0px;
	}
	
	#header #nav li:first-child{ 
		margin-left:30px;
	}
	
	#header #nav li	{
		float:left;
		height:30px;
		width:103px;
		list-style:none;
		padding:0px; padding-top:0px;
		margin:0px;
		margin-left:10px;
	}

	#header #nav li.selected, #header #nav li:hover	{
		background: url(../img/nav_over.png);
		padding:0px;
		cursor:pointer;
	}
	
	#header #nav li a	{
		text-decoration:none;
		display:block;
		padding:10px;
		text-align:center;
	}
	
#generic_box{
	border:solid 1px #dadfe2; border-right:0px; border-left:0px;
	background-image: url(../img/social_net.png); background-repeat:repeat-x;
	padding:2px 4px;
	display:block;
	width:350px;
	color:#6f7d85; font-size:11px;
	text-shadow:#fff 1px 1px 0px;
	background-color:#889fad;
	}
	#generic_box ul	{
		color: #b0c2cd; padding:10px 4px 0px 0px;;
	}
		#generic_box ul li span		{
			color:#fff;
			text-shadow: #6b8697 1px 1px 0px;
		}
		
.mobile_header{ color:#929292; font-size:11px; width:100px; height:20px;}
		
#phone_photos {	display:block;}
	#phone_photos li{list-style:none; float:left; padding:0px; position:relative; left:-30px;}
				
#wireframe_box {
	border:solid 1px #dadfe2; border-right:0px; border-left:0px;
	background-image: url(../img/social_net.png); background-repeat:repeat-x;
	padding:2px 4px;
	display:block;
	width:350px;
	height:300px;
	color:#6f7d85; font-size:11px;
	text-shadow: #fff 1px 1px 0px;
	background-color:#889fad;
	}
		
	#wireframes{
		width:350px;
		padding:0px; 
		margin:10px 0px 0px 0px;
		}	
		
		#wireframes li	{
		list-style:none;
		float:left;margin:0px;
		width:116px;
		height:116px;
		padding:0px;
		padding-left:24px; padding-top:10px;
		}
		
		
		#wireframes li a {
			display:block;
			border:1px solid #afc6d3;
			width:116px;
		}
		
		#wireframes li a:hover	{
			border:1px solid #fff;
		}
		

#network_box {
	border:1px solid #ccc; width:210px; margin:0px 0px 20px 20px;
	background-image: url(../img/social_net.png); background-repeat:repeat-x;
	padding:2px 4px;
	display:block;
	height:180px;
	color:#6f7d85; font-size:11px;
	text-shadow: #fff 1px 1px 0px;
	background-color:#889fad;
	}

#networks{
	width:190px;
	padding:0px; 
	margin:0 auto;
	height:180px; display:block;
}

	#networks li	{
		list-style:none;
		float:left;
		width:116px;
		height:33px;
		padding:4px;
	}
	
	#networks li:first-child {
			padding-top:20px;
		}
	
	#networks li a	{
		display:block;
		border:1px solid #afc6d3;
		width:116px;
	}
	
	#networks li a:hover	{
		border:1px solid #fff;
	}
	
#main {
	background: url(../img/main_shadow.png) repeat-x #fff;
	display:block;
	text-align:left;
	width:967px;
	margin:0 auto;
	
	/*padding:10px 77px;*/
}

#main_content {
	padding:20px 77px;
	border:1px solid #ccc; border-top:0px; border-bottom:0px;
}

hr {
	background: url(../img/title_border.png) repeat-x;
	height:3px;
	border:0px;
	padding:0px; margin:0px;
}

#box_right{ float:right; width:230px; margin-right:14px;}
.contact_box{ border:1px solid #ccc; width:220px; margin:0px 0px 20px 20px;}
.inside_contact_box{ border:1px solid #fff;width:210px; background-color:#F0F0F0; padding:4px;}
.inside_contact_box p{ padding:4px 4px 0px 4px;}
/*.inside_contact_box span{vertical-align:top; top:3px; position:relative;}*/
.box_head{	padding-left:19px;}

.two_col_row	{display:block; height:26px;}
.col_one		{float:left; display:block;}
.col_two		{vertical-align:middle; display:block; height:23px; padding-top:3px;}

.field_email			{font-size:15px; width:193px; height:20px; font-family:Arial, Helvetica, sans-serif; border:1px solid; border-color:#ccc #e9e9e9 #e9e9e9 #ccc; padding:5px 4px 3px 4px; color:#377111;}
.field_message			{font-size:15px; width:193px; height:100px; font-family:Arial, Helvetica, sans-serif; border:1px solid; border-color:#ccc #e9e9e9 #e9e9e9 #ccc; padding:5px 4px 3px 4px; color:#377111;}
.contact_field_email	{font-size:15px; width:300px; height:20px; font-family:Arial, Helvetica, sans-serif; border:1px solid; border-color:#ccc #e9e9e9 #e9e9e9 #ccc; padding:5px 4px 3px 4px; color:#377111;}
.contact_field_message	{font-size:15px; width:300px; height:100px; font-family:Arial, Helvetica, sans-serif; border:1px solid; border-color:#ccc #e9e9e9 #e9e9e9 #ccc; padding:5px 4px 3px 4px; color:#377111;}

.field_email:focus, .field_message:focus, .contact_field_email:focus, .contact_field_message:focus 
{color:#377111;background-color:#eaffe6;}


/*Form Buttons*/
.btn_send		{ background:url(../img/btn_send.png) no-repeat center; border:0px; width:200px; height:29px; cursor:pointer;}
.btn_send:hover	{ background:url(../img/btn_send_over.png) no-repeat center;}

.contact_btn_send		{ background:url(../img/btn_send.png) no-repeat left; border:0px; width:137px; height:29px; cursor:pointer;}
.contact_btn_send:hover	{ background:url(../img/btn_send_over.png) no-repeat center;}
/*Form Buttons End*/

form { margin:0px; padding:0px; display:inline;}


em { font-size:15px;}

.error 		{font-color:#804800; margin-bottom:8px; padding:5px; border:1px solid #f7cb00; font-weight:bold; font-size:11px; background-color:#ead5ba;}
.success	{font-color:#2c6d00; margin-bottom:8px; padding:5px; border:1px solid #0bea00; font-weight:bold; font-size:11px; background-color:#baeac1;}

.sub {
	font-family: arial, helvetica, sans-serif;
	text-decoration: none; font-size:12px;
	color: #005a99;
	cursor:pointer; 
	text-shadow: #fff 0px 1px 0px;
}

.sub:link {
	text-decoration: none;
	color: #005a99;
}

.sub:visited {
	color: #005a99;
}

.sub:hover {
	text-decoration: none;
	color: #56b4f3;
}

ul.formats{ 
		background:url(../img/sub_bar.png) no-repeat;
		margin:0px;
		height:35px;
		}
ul.formats li {
		float:left;
		height:30px;
		width:103px;
		list-style:none;
		padding:0px; padding-top:0px;
		margin:0px;	/*background:url(../img/nav_bg.png) repeat-x;*/
		margin-left:6px;
		position:relative; top:3px;
		
		text-shadow: #fff 1px 1px 0px;
		}

ul.formats li a{
	 font-family: Arial, Helvetica, sans-serif;
	 text-transform:uppercase;
	 font-size:11px;
	 text-decoration:none;
	 color:#000;
	 position:relative; top:-2px;
		display:block;
		padding:10px;
		text-align:center;
}



ul.formats li.selected, ul.formats li:hover
	{
		background: url(../img/nav_over.png);
		padding:0px;
		cursor:pointer;
		text-shadow: #ccc 1px 1px 0px;
	}
	


.quick_contact{background-color:#ccc; font-weight:bold; border-bottom:#fff 1px solid; padding:4px; margin-bottom:10px;text-shadow: #fff 0px 1px 0px;}
small{ font-size:11px; display:block; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px; color:#3e3e3e;}


.bullets{ list-style-image:url(../img/bullet.gif);}

.certs li { background: url(../img/cert.png) no-repeat; width:221px; height:168px; list-style:none; float:left; padding:0px; padding-top:10px; 
			margin:10px 20px 0px 0px; text-shadow: #fff 0px 1px 0px;}
	.certs li p{ position:relative; left:40px;}
	.certTitle { font-size:11px; }
	.certClass { font-size:12px; font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; width:150px; color:#9f2900;}
	.certSchool{ font-size:10px; text-align:center; width:160px; color:#302615;}

.clear{clear:both;}

/*Process*/
#process
{
	border:1px solid #c9c9c9;
	background-color:#f6f6f6;
	overflow:hidden;
}

#process_title{
color:#dcdcdc; 
font-family:Georgia, "Times New Roman", Times, serif; /* font-family:Arial, Helvetica, sans-serif;  */
text-transform:uppercase;
letter-spacing:1.5px;
font-size:10px; padding:3px;
background: url(../img/process_title_bg.png) repeat-x;
text-align:center;
text-shadow: #515151 0px 1px 0px;
}

#process ul{margin:0px; padding:0px;}

	#process li:first-child
	{
	margin:14px 7px 14px 14px; 
	}
	
	#process li
	{
		text-align:center;
		list-style:none;
		float:left;
		margin:14px 7px;
		background:url(../img/process_bg.png) #e1e1e1;
		border:1px solid #fff;
		width:300px; /*240*/
		height:201px;
		color:#424242;
	}
	
	#process li .process_ico1 { padding-top:10px; }
	#process li .process_ico2 {	padding-top:22px; }
	#process li .process_ico3 {	padding-top:35px; }

	#process li div
	{
		height:80px;
		/*background-color:#333;
		display:table-cell; 
		vertical-align:middle;*/
		width:300px;

	}

	#process li small	{
		font-size:11px;
		font-weight:bold;
		display:block;
		text-shadow: #fff 0px 1px 0px;
		margin:10px 15px;
	}
	
	#process ul li img {  vertical-align:middle;}
	
.portfolio {
	overflow:hidden;
	padding-top:50px; /*5px*/
}

.portfolio ul { padding:0px; margin:5px 0px 0px 0px;}

.portfolio li {
	border:1px solid #e3e3e3;
	padding:1px;
	display:block;
	width:180px;
	height: 104px;
	float:left;
	margin: 0px 22px 22px 0px; /*26*/
	background-color:#fff;position:relative;
}

.portfolio li .item_title {
	background-color:#363636;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	width:180px;
	height:16px;
	position:absolute;
	top:106px;
}

h2.title {color:#666666; display:inline; font-weight:normal; font-size:24px; font-family:'LeagueGothicRegular';
/* font-family:Georgia, "Times New Roman", Times, serif;*/
/* font-family:Arial, Helvetica, sans-serif, "Times New Roman", Times, serif;*/
}

@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('/fonts/League_Gothic-webfont.eot');
	src: local('☺'), url('/fonts/League_Gothic-webfont.woff') format('woff'), url('/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
	font-weight: normal;
	font-style: normal;
}



h4.title {color:#337a04; font-weight:normal; font-size:18px;
 font-family:Georgia, "Times New Roman", Times, serif;
 border-bottom:1px #ccc dotted; width:100%;
/* font-family:Arial, Helvetica, sans-serif, "Times New Roman", Times, serif;*/
}

.panel_icons
{
	text-align:center; /* float:right; margin:8px 26px 0px 0px;*/
}

.pnl_cnt{font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal;color:#909090; font-size:11px; margin-right:10px; vertical-align:top;}

/*hover box's*/
.boxgrid a{ color:#C8DCE5;font:10px Arial, sans-serif;  }
h3{ 
	color:#fff; font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	display:inline;
	text-shadow:#272727 1px 1px 0px;
	}

.boxgrid{
	width: 180px;  /*325 260*/
	height: 104px; 
	float:left;
	overflow: hidden;
	position: relative; 
}
	.boxgrid img{
		position: absolute;
		top: 0px;
		left: 0px;
		border: 0px;
	}

.boxcaption{
	float: left;
	position: absolute;
	background: #414141;
	height: 82px;
	width: 100%;
	text-align:center;
	opacity: .9;
	padding:4px;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
 	}
 .caption .boxcaption {
 	top: 82px; /*220*/
 	left: 0px; color:#313131; font-size:10px;
 }
 

 
 .boxcaption a{
	font-size:10px; text-transform:uppercase; color:#37cbf9; text-decoration:none;
 	}
	
 .boxcaption a:hover{
	font-size:10px; text-transform:uppercase; color:#5fac2c; text-decoration:none;
	}
 

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 880px;
	height:120px;

	/* custom decorations */
	border:1px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}


/* position and dimensions of the navigator */ 
.navi { 
    margin-left:328px; 
    width:200px; 
    height:20px; 
} 
 
 
/* items inside navigator */ 
.navi a { 
    width:8px; 
    height:8px; 
    float:left; 
    margin:3px; 
    background:url(../img/navigator.png) 0 0 no-repeat; 
    display:block; 
    font-size:1px; 
} 
 
/* mouseover state */ 
.navi a:hover { 
    background-position:0 -8px;       
} 
 
/* active state (current page state) */ 
.navi a.active { 
    background-position:0 -16px;      
}


/*Footer*/
#footer{
	background: url(../img/footer_top.png) top repeat-x #ababab;
	padding-top:20px;
	vertical-align:bottom;
	overflow:hidden;
	width:967px;
	height:100px;
}

.footer_left{ float: left; padding-left:30px; padding-top:10px; font-size:11px; color:#FFFFFF;}


#footer a {
    color: #fcfcfc;
    text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
}

#footer a:hover {
    color: #84d6ff;
}

#footer a.selected {
    color: #84d6ff;
}

#footer a:focus {
    outline: none;
}

ul.footer_navigation li{
	list-style:none;
	float:left;
	margin:0px;
	padding-right:10px;
	margin-right:10px;
}

.logo_footer{ padding-right:20px;}

.view_all{ display:block; height:50px;}


#bar_nav{position:absolute;	top:225px; z-index:2; width:805px; }


ul.top-nav{
	list-style:none;
	background: url(../img/title_border.png) repeat-x bottom;
	padding:5px 0px 10px 0px; margin:0px;
}

ul.top-nav li{
	 display:inline;
	 padding:0px 10px; margin:0px;
	 border:#dadfe2 solid 1px; border-top:0px; border-bottom:0px; border-left:0px;
}

ul.top-nav li:first-child{
	 display:inline;
	 padding:0px 10px 0px 0px; margin:0px;
	 /*border:#dadfe2 solid 1px; border-top:0px; border-bottom:0px; border-left:0px;*/
}


ul.top-nav li a{
	 font-family: Arial, Helvetica, sans-serif;
	 text-transform:uppercase;
	 font-size:10px;
	 text-decoration:none;
	 color:#3399ca; /*000*/
}

ul.top-nav li a:hover{
	 color:#5fac2c; /*3399ca*/
}