/*-------------------------------------------
	TITLE: Browns Graphic Solutions
	CREATED: 8/10/2007

--
	LAYOUT
	- HEADER
	- HEADER MENU
	- CONTENT
	- FOOTER
	
	MISCELLANEOUS
	- CLEAR FIX
--

-------------------------------------------*/
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center;
 background-image:url(../images/body_bg.jpg);
 background-position: top center;
 background-repeat:repeat-x;
 background-color: #5b5b5b;
} 
 
#pagewidth{ 
 width:823px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
} 

a {color:#e4e4c8; text-decoration: underline; outline: none;}
a:hover {color:#ffffc8; border-bottom: 1px solid #ffffc8;}
:focus {-moz-outline-style: none;}
a img {	border: 0px;}

/*-------------------------------------------
	- HEADER
-------------------------------------------*/
#header{
 position:relative; 
 height:109px;  
 width:100%;
}

#header h1 {
	margin: 0px;
}

#header h1 a {
	background-image:url(../images/logo.png);
	width: 262px;
	height: 70px;
	position: absolute;
	top: 27px;
	left: 25px;
	margin: 0px;
	text-indent: -9999px;
}

/*-------------------------------------------
	- HEADER MENU
-------------------------------------------*/
#header ul {list-style-type:none; position: absolute; margin: 0px; padding: 0px; top: 0px; left: 494px;}
#header li {height: 109px; float: left;}
#header a {display:block; height: 109px; text-indent: -9999px; border-bottom: none;}

	/*- offstate -*/

#header li.list1 {background:transparent url(../images/home_btn.png); background-repeat:no-repeat; width: 55px;}
#header li.list2 {background:transparent url(../images/about_us_btn.png); background-repeat:no-repeat; width:  79px;}
#header li.list3 {background:transparent url(../images/services_btn.png); background-repeat:no-repeat; width:  75px;}
#header li.list4 {background:transparent url(../images/contact_us_btn.png); background-repeat:no-repeat; width:  91px;}

#header li.list1_2 {background:transparent url(../images/home_btn.png); background-repeat:no-repeat; width: 55px; background-position:0px -109px; z-index:50;}
#header li.list2_2 {background:transparent url(../images/about_us_btn.png); background-repeat:no-repeat; width:  79px; background-position:0px -109px; z-index:50;}
#header li.list3_2 {background:transparent url(../images/services_btn.png); background-repeat:no-repeat; width:  75px; background-position:0px -109px; z-index:50;}
#header li.list4_2 {background:transparent url(../images/contact_us_btn.png); background-repeat:no-repeat; width:  91px; background-position:0px -109px; z-index:50;}

	/*- hovering items -*/

#header a#item1 {background:transparent url(../images/home_btn.png) no-repeat;}
#header a#item2 {background:transparent url(../images/about_us_btn.png) no-repeat;}
#header a#item3 {background:transparent url(../images/services_btn.png) no-repeat;}
#header a#item4 {background:transparent url(../images/contact_us_btn.png) no-repeat;}

#header a#item1:hover {background-position:0px -109px; z-index:50;}
#header a#item2:hover {background-position:0px -109px; z-index:50;}
#header a#item3:hover {background-position:0px -109px; z-index:50;}
#header a#item4:hover {background-position:0px -109px; z-index:50;}

/*-------------------------------------------
	- LEFT COLUMN
-------------------------------------------*/
#leftcol{
 width:286px; 
 float:left; 
 position:relative; 
 background-image: url(../images/left_col_bg.jpg);
 background-position: 0px 52px;
 background-repeat: no-repeat;
 height: 514px;
 margin-top: 19px;
  }

#leftcol h2 {
 width: 286px;
 height: 52px;
 background-image:url(../images/sign_types.jpg);
 margin: 0px;
 text-indent: -9999px;
}
 
/*-------------------------------------------
	- LEFT COLUMN MENU
-------------------------------------------*/ 
#leftcol ul {list-style-type:none; position: absolute; margin: 0px; padding: 0px; top: 52px; left: 27px;}
#leftcol li {width: 259px; background-repeat:no-repeat; }
#leftcol a {display:block; width: 259px; text-indent: -9999px; border: none; height: 48px;}

	/*- offstate -*/

#leftcol li.list1 {background:transparent url(../images/banners_large_signs_btn.png); height: 49px;}
#leftcol li.list2 {background:transparent url(../images/yard_signs_btn.png); height: 48px;}
#leftcol li.list3 {background:transparent url(../images/displays_btn.png); height: 48px;}
#leftcol li.list4 {background:transparent url(../images/ribbons_btn.png); height: 48px;}
#leftcol li.list5 {background:transparent url(../images/specials.png); height: 48px;}
#leftcol li.list6 {background:transparent url(../images/labels_btn.png); height: 48px;}
#leftcol li.list7 {background:transparent url(../images/exhibits_btn.png); height: 49px;}


	/*- hovering items -*/

#leftcol a#left1 {background:transparent url(../images/banners_large_signs_btn.png) no-repeat;}
#leftcol a#left2 {background:transparent url(../images/yard_signs_btn.png) no-repeat;}
#leftcol a#left3 {background:transparent url(../images/displays_btn.png) no-repeat;}
#leftcol a#left4 {background:transparent url(../images/ribbons_btn.png) no-repeat;}
#leftcol a#left5 {background:transparent url(../images/specials.png) no-repeat;}
#leftcol a#left6 {background:transparent url(../images/labels_btn.png) no-repeat;}
#leftcol a#left7 {background:transparent url(../images/exhibits_btn.png) no-repeat;}

#leftcol a#left1:hover {background-position:0px -49px; z-index:50;}
#leftcol a#left2:hover {background-position:0px -48px; z-index:50;}
#leftcol a#left3:hover {background-position:0px -48px; z-index:50;}
#leftcol a#left4:hover {background-position:0px -48px; z-index:50;}
#leftcol a#left5:hover {background-position:0px -48px; z-index:50;}
#leftcol a#left6:hover {background-position:0px -48px; z-index:50;}
#leftcol a#left7:hover {background-position:0px -49px; z-index:50;}

 /*-------------------------------------------
	- MAIN COLUMN
-------------------------------------------*/
 
#maincol{
 margin-top: 19px;
 float: right; 
 display:inline; 
 position: relative; 
 width:537px; 
 background-image: url(../images/main_col_bg.jpg);
 background-position: 0px 51px;
 background-repeat: no-repeat;
 }

#maincol p {
	color: #c3c3c3;
	font-size: .75em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	padding: 0px 42px 0px 42px;
}

#maincol h3 {
	font-size: 1em;
	margin: 20px 0px -12px 0px;
	padding: 0px 42px 0px 42px;
	color: #ffffc8;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
#photo1 {
	background-image:url(../images/home_photo_02.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}
 
#photo2 {
	background-image:url(../images/about_us_photo2.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#photo3 {
	background-image:url(../images/photo_3.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#photo4 {
	background-image:url(../images/photo_4.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#banners {
	background-image:url(../images/banners3.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#yardsigns {
	background-image:url(../images/yardsigns.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#displays {
	background-image:url(../images/displays2.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#stationary {
	background-image:url(../images/stationary.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#vehicle {
	background-image:url(../images/vehicle2.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#labels {
	background-image:url(../images/labels.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#magnets {
	background-image:url(../images/magnets.jpg);
	width: 485px;
	height: 226px;
	margin: 0px 0px 0px 23px;
}

#photo1 ul {
	margin: 0px;
	text-indent: -9999px;
	list-style: none;
}

#top {
	background-image:url(../images/top_bg.jpg);
	background-repeat: no-repeat;
	height: 51px;
}

#top h2 {
	background-repeat: no-repeat;
	height: 33px;
	width: 400px;
	margin: 0px;
	text-indent: -9999px;
	position: absolute;
	left: 23px;
	top: 18px;
}

.welcome {
	background-image: url(../images/h2_welcome.jpg);
}

.aboutus {
	background-image: url(../images/h2_about_us.jpg);
}

.services {
	background-image: url(../images/h2_services.jpg);
}

.contactus {
	background-image: url(../images/h2_contact_us.jpg);
}

.bannerslargesigns {
	background-image: url(../images/h2_banners_large_signs.jpg);
}

.yardsigns {
	background-image: url(../images/h2_yard_signs.jpg);
}

.displays {
	background-image: url(../images/h2_displays.jpg);
}

.stationaryprinting {
	background-image: url(../images/h2_stationary_printing.jpg);
}

.vehiclegraphics {
	background-image: url(../images/h2_vehicle_graphics.jpg);
}

.labels {
	background-image: url(../images/h2_labels.jpg);
}

.magnets {
	background-image: url(../images/h2_magnets.jpg);
}

.exhibits {
	background-image: url(../images/h2_exhibits.jpg);
}

 /*-------------------------------------------
	- FOOTER
-------------------------------------------*/
 
#footer{
 height:150px; 
 clear:both;
 background-image:url(../images/footer_bg.jpg);
 background-repeat:no-repeat;
 background-position: 286px 0px;
 } 

#footer p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 50px;
	padding-left: 310px;
	padding-right: 40px;
	text-align: center;
	color: #999999;
	margin: 0px;
}

#footer a {color:#999999;text-decoration: none;}
#footer a:hover {color:#ffffc8; border-bottom: 1px solid #ffffc8;}

 
 /* *** Float containers fix: *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}