
/* COMMON ELEMENTS
==============================================================*/
body { background: #f8f9fd; }

div#content {
	position: relative;
	left: 50%;
	width: 990px;
	margin-left: -490px;
}	
	
h1 {
	clear: both;
	font: 140%/150% tahoma, sans serif;
	color: #1c394b;
	background: #e5e8ea;
	background: #e0e7eb url(/images/bg_header.jpg);
	height: 36px;
	padding: 6px 22px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	margin-bottom: 22px;
	}
	
h1 img { vertical-align: middle; }
	
body#index h1 { width: 936px; }

h1 a.page_top {
	font-size: 75%;
	position: absolute;
	right: 20px;
}

h1 a.page_top:hover { color: #688797; }

p {
	font: 90%/160% verdana;
	color: #294a5e;
	margin: -10px 0 40px;	
}

div#image_load_container { display: none; }


/* HEADER 
==============================================================*/
div#info {
	font: 75%/150% verdana;
	text-align: center;
	color: #294a5e;	
	background: #f8f9fd url(/images/bg_info.jpg);
	padding: 7px 0 0 0;
	height: 25px;
}
	
div#info span { color: #717293; }
	
div#info a {
	color: #1c394b;
	padding: 3px 5px;
	}

div#info a:hover {
	background: #132a40;
	border-bottom: solid 1px #567;	
}

	/* HEADER */
div#header {
	background: #f8f9fd url(/images/main_background.jpg) repeat-x;
	}

div#header_inner {
	background: url(/images/header.jpg) no-repeat;
	position: relative;
	left: 50%;
	width: 980px;
	height: 180px;
	margin-left: -490px;
}

	/* ===== navigation ============== */
	ul#nav {
		position: absolute;
		left: 434px;
		top: 63px;
		height: 49px;
	}		
		   ul#nav li { display: inline;}  /* [ use for horizontal navigation ] */
	
	ul#nav li a {
		display: block;
		overflow: hidden;
		float: left; /* [ use for horizontal navigation ] */
		height: 0px;
		padding-top: 49px;
		margin-right: 0px;
	}
	
	ul#nav li a { background: url(/images/nav_buttons.jpg) no-repeat }
	 
	ul#nav li a#link1        { width: 66px; }
	ul#nav li a#link2        { background-position: -66px  0px; width: 89px; }
	ul#nav li a#link3        { background-position: -155px 0px; width: 96px; }
	ul#nav li a#link4        { background-position: -251px 0px; width: 94px; }
	ul#nav li a#link5        { background-position: -345px 0px; width: 102px; }
	ul#nav li a#link6        { background-position: -447px 0px; width: 87px; }
	
	ul#nav li a#link1:hover  { background-position: 0px  -49px; width: 66px; }
	ul#nav li a#link2:hover  { background-position: -66px  -49px; width: 89px; }
	ul#nav li a#link3:hover  { background-position: -155px -49px; width: 96px; }
	ul#nav li a#link4:hover  { background-position: -251px -49px; width: 94px; }
	ul#nav li a#link5:hover  { background-position: -345px -49px; width: 102px; }
	ul#nav li a#link6:hover  { background-position: -447px -49px; width: 87px; }
	
	ul#nav li a#link1-active { background-position: 0px  0px; width: 66px; }
	ul#nav li a#link2-active { background-position: -66px  -49px; width: 89px; }
	ul#nav li a#link3-active { background-position: -155px -49px; width: 96px; }
	ul#nav li a#link4-active { background-position: -251px -49px; width: 94px; }
	ul#nav li a#link5-active { background-position: -345px -49px; width: 102px; }
	ul#nav li a#link6-active { background-position: -447px -49px; width: 87px; }

	/* ============================================= */
	

/* GALLERY/SLIDESHOW 
==============================================================*/
div#slide_container {
	position: relative;
	left: 50%;
	height: 365px;
	width: 990px;
	margin-top: -10px;
	margin-left: -500px;
	}

div#slide_container img { /* two stacked images */
	position: absolute;
	left: 0;
	top: 0;
}

div#gallery_nav {
	background: #354552 url(/images/gallery/gallery_nav.jpg) no-repeat;
	position: relative;
	left: 50%;
	text-align: center;
	vertical-align: middle;
	width: 988px;
	height: 56px;
	padding-top: 11px;
	margin: 15px 0 16px -494px;
}

span#gallery_thumbs img {
	width: 70px;
	height: 42px;
	border: solid 2px #789;
}

span#gallery_thumbs a img,
span#gallery_thumbs a.clickable img { /* this class is for the javascript */
	opacity: .8;
	filter: alpha(opacity=80); /* IE */
	border: solid 2px #aabbcc;
	}
span#gallery_thumbs a img:hover,
span#gallery_thumbs a.clickable_fade img:hover,
span#gallery_thumbs a.selected img {
	opacity: 1;
	filter: alpha(opacity=100); /* IE */
	border-color: #ccddee;
	}
		
	
/* SIGNS BY TYPE
==============================================================*/
div#signs_by_type {
position: relative;
	width: 990px;
	height: 100px;
	left: 50%;
	margin-left: -495px;
	margin-bottom: 38px;
}

span.type {
	display: block;
	float: left;
	width: 163px;
	height: 170px;
	margin-bottom: 0px;
}

span.type a {
	display: block;
	color: #f1f1f2;
	width: 163px;
	height: 170px;
	background: #031a30;
	background: #04213c;
	padding-top: 3px;
	border: solid 1px #031a30;
}

span.type a:hover {
	background: #293e52;
	}
	
span.type a img {
	width: 152px;
	height: 102px;
	border: solid 2px #001020;
	border: solid 2px #293e52;
	margin: 3px;
	}

span.desc {
	display: block;
	padding: 5px 7px;
	font: bold 80%/140% arial, sans serif;
}

div#spacer1 { 
	clear: both;
	height: 22px;
}

span.type a.inactive:hover {
	background: #031a30;
}
	

/* ADDITIONAL SIGNS & SERVICES
==============================================================*/

div#additional, div#services {
	float: left;
	width: 485px;
	margin-top: 10px;
}

div#services {
	margin-left: 10px;
}

div#additional h1, div#services h1 {
	width: 441px;
}

ul.additional_services, ul.additional_customers {
	font: bold 100%/120% tahoma, sans serif;
	color: #182f3d;
	margin-top: -10px;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

ul.additional_customers { margin-bottom: 60px; }

ul.additional_services li, ul.additional_customers li {
	background: url(/images/bullet.png) no-repeat left center;
	padding: 2px 25px;
	margin-left: 20px;
}	


/* PORTFOLIO/OUR WORK
==============================================================*/
div#timer {
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	background: #000;
	opacity: 0.3;
	filter: alpha(opacity = 30);
	width: 100%;
	height: 100%;
}

div#timer_text {
	position: fixed;
	z-index: 101;
	left: 50%;
	top: 50%;
	font: 140%/150% tahoma, sans serif;
	text-align: center;
	color: #fff;
	background: #000;
	opacity: 0.8;
	filter: alpha(opacity = 80);
	width: 400px;
	height: 110px;
	padding: 40px;
	border: solid 4px #555;
	margin: -114px 0 0 -241px;
}

div#timer_text span {
	display: block;
	font-size: 75%;
	color: #888;
}
	/*
	div#progress_bar {
		background: #88f;
		border: solid 1px #fff;
		width: 300px;
		height: 20px;
		margin: 20px 0 0 0;
	}
	*/

div#portfolio {
	clear: both;
	padding: 8px;
	}

div.port_image {
	float: left;
	width: 563px;
	height: 360px;
	background: url(/portfolio/port_image_bg.png);
	margin-right: 7px;
	margin-bottom: 30px;
}

div.port_image img {
	width: 551px;
	height: 347px;
	border: solid 2px #7f8998;
	}

div.port_thumbs {
	float: left;
	width: 417px;
	height: 350px;
	margin-bottom: 30px;
}

div.port_thumbs img {
	width: 129px;
	height: 80px;
}

div.port_thumbs a{
	display: block;
	float: left;
	width: 139px;
	height: 89px;
	background: url(/portfolio/port_thumb_bg.png)
}
	
	/* FOR JAVASCRIPT */
div.port_thumbs a img,
div.port_thumbs a.clickable img {border: solid 2px #7f8998;} /* this class is for the javascript */
div.port_thumbs a img:hover,
div.port_thumbs a.clickable img:hover,
div.port_thumbs a.selected img {border-color: #cfe1ea;}



/* CLIENTS
==============================================================*/
/* ul#additional_customers -- see above */

p#clients_copy {
	text-align: center;
	padding: 10px 0 0;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}

p#client_logos {
	background:#e8ecf2 url(/images/bg_header.jpg);
	padding: 20px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}

p#client_logos img { width: 233px; height: 129px; }



/* CONTACT
==============================================================*/
div#contact_left {
	float: left;
	font: 95%/150% verdana, sans serif;
	color: #273d54;
	width: 296px;
	height: 600px;
	padding-top: 0px;
	padding-left: 128px;
	}
	
div#contact_left h1 {
	width: 218px;
}

div#contact_right {
	float: left;
	width: 423px;
	height: 600px;	
	padding-top: 0px;
	margin-bottom: 20px;
	}
	
div#contact_right h1 {
	width: 340px;
}



/* LOCATION
==============================================================*/

/* see 'contact' above */

body#location div#contact_left {
	padding-top: 8px;
	}

body#location div#content {
	height: 850px;
}

p.view img {
	border: solid 2px #3d6283;
}

p.view {
	font-size: 85%;
}

div#map_canvas {
	font: 85%/120% verdana, sans serif;
	background: #354a5d;
	width: 552px;
	height: 689px;
	border: solid 2px #3d6283;
	margin-bottom: 60px;
}

div#map_canvas a {
	color: #228;
	text-decoration: underline;
}


/* FOOTER
==============================================================*/
div#footer {
	clear: both;
	font: 85%/150% verdana;
	text-align: center;
	color: #a1a4a7;
	background: #031a30 url(/images/bg_footer.jpg);
	padding: 0px 0 30px;
	}
	
div#border {
	clear: both;
	background: url(/images/bg_border.jpg);
	height: 14px;
	margin-bottom: 20px;
}
	
div#footer div { padding: 2px 0; }
	
div#footer span { color: #515273; }
	
div#footer a {
	color: #ddf4ff;
	padding: 3px 5px;
	}

div#footer a:hover {
	background: #132a40;
	border-bottom: solid 1px #567;	
}

div#footer div.extra a { color: #ff5544 ;}

	/* STICKY FOOTER */
	
html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 135px;
	padding-bottom: 115px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -164px;
	margin-top: -144px; /* negative value of footer height [PLUS 29!] */
	height: 135px;
	height: 115px;
	clear:both;} 

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}











