/*
United Biochemicals
Last Edited: 07-21-06 - tag - Conbrio Design

-- contents -----------------------------
- Body
- Consistant Styles
- Header Styles
  - Logos
  - Navigation
  - Banners Under Navigation - Main Page
  - Banners Under Navigation - Sub Pages
- Index Page Styles
- Sub Page Positioning Styles
- Sun Navigation
- Sub Page Content Styles
	- Main Content Styles
	- Specific Content Styles
	- Form Styles
- Footer 
-----------------------------------------
*/


/* body styles ----------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
body {
	background: #003D4F url(../images/shared/bg_subpage.gif) top repeat-x;
	color: #FFFFFF;
	margin: 0; padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	text-align: center;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: x-small;} .ack {/*ie hack*/}

body#main {background: #003D4F url(../images/shared/bg_page.gif) top repeat-x;}

/* consistant styles ----------------------------------------------------- */
/* ----------------------------------------------------------------------- */
p {margin:0 0 .85em 0; padding: 0;}
form, img, h1, h2, h3, h4, ul, ol, dl, li, dt, dd {margin:0; padding:0;}

#wrapper {
	position: relative;
	background: #ffffff;
	width: 770px;
	text-align: left;
	margin: 0 auto;}

.clear {clear: both;}
	
.hide,
#skip,
#printlogo {display: none;}

/* for screen readers */
abbr {
	border:0;
	text-decoration: none;
	speak: spell-out;	}

/* header styles --------------------------------------------------------- */
/* ----------------------------------------------------------------------- */

/* logos ----------------------------------------------------------------- */
#mainlogo {
	position: absolute;
	top: 180px;
	left: 15px;
	width: 166px;
	padding-top: 62px;
	overflow: hidden;
	background: url(../images/shared/logo_site.gif) no-repeat;
	height: 0px !important; 
	height /**/:62px; /* IE5/Win */}

#sublogo {
	position: absolute;	
	top: 30px;
	left: 15px;
	width: 166px;
	padding-top: 62px;
	overflow: hidden;
	background: url(../images/shared/logo_site.gif) no-repeat;
	height: 0px !important; 
	height /**/:62px; /* IE5/Win */}

/* navigation  ----------------------------------------------------------- */

#nav ul {
	float: left;
	width: 100%;
	background: #006683;
	padding: 75px 0 0 0;
	list-style-type: none;
	margin:0;
	height: 95px;
	overflow: hidden; /*ie does some crazy stuff without this */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 20px;} .ack {/*ie hack*/}
	
	#nav li {
	display: inline;
	padding: 0;
	float: left;}
	
	#nav a {
		float: left;
		display:block;
		width: 117px;
		padding-top: 20px;
		overflow: hidden;
		height: 0px !important; 
		height /**/:20px; /* for IE5/Win only */}
	
	#nav a:hover,
	#nav a.on {background-position: 0 -20px;}
	
	#nav_abo a {background: url(../images/nav/about.gif) no-repeat;}
	#nav_pro a {background: url(../images/nav/products.gif) no-repeat;}
	#nav_ser a {background: url(../images/nav/services.gif) no-repeat;}
	#nav_con a {background: url(../images/nav/contact.gif) no-repeat;}
	#nav_hom a {background: url(../images/nav/home.gif) no-repeat;}
	#nav_hom {border-left: 185px solid #006683;}
	
	/* specific nav styles on the front page */
	#main #nav_abo {border-left: 302px solid #006683;}  
	#main #nav ul {
		padding: 225px 0 0 0;
		height: 245px;
		background: url(../images/banners/main.jpg) top left no-repeat;		
		voice-family: "\"}\"";
		voice-family:inherit;
		height: 20px;} .ack {/*ie hack*/}
		
	/* specific nav styles for sub pages */
	#aboutus #nav ul,
	#products #nav ul,
	#services #nav ul,
	#contacts #nav ul {background: url(../images/pics/top/ran.php) top left no-repeat;}
	
/* banners under navigation  --------------------------------------------- */
#banner {
	clear:left;
	background: #89BAC8 url(../images/shared/blue_front.gif) bottom left no-repeat;}
#banner p {margin:0; padding:0;}
#banner a {
		display: block;
		background: url(../images/shared/f_quote2.gif) 0 29px no-repeat;
		width: 507px;
		height: 58px;
		margin-left: 17px;
		font-size: 1px;
		color: #89BAC8;}

/* banners on subpages rendered as h1's ---------------------------------- */
#subbanner {
	clear:left;
	background: #89BAC8 url(../images/shared/blue_sub.gif) bottom left no-repeat;	}
#subbanner h1 {
	margin-left: 185px;
	width: 128px;
	height: 58px;
	font-size: 1px;
	color: #89BAC8;}	
	
	#ban_ab {background: url(../images/banners/aboutus.gif) top left no-repeat;}
	#ban_pr {background: url(../images/banners/products.gif) top left no-repeat;}
	#ban_se {background: url(../images/banners/services.gif) top left no-repeat;}
	#ban_co {background: url(../images/banners/contact.gif) top left no-repeat;}
	
/* index page styles ----------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#frontmain {
	position: relative;
	color: #003D4F;
	background: #ffffff url(../images/shared/bg_grid.gif);
	padding: 35px 0 20px 0;
	font-size: 110%;
	min-height: 275px;
	height: auto;}
	/* this here is for IE to make it keep our min-height */
	/*\*/
	* html #frontmain {height: 275px;}	
	
	
	#frontcontent {margin: 0 255px 0 216px;}
	#frontcontent p {
		background-color: #ffffff;
		margin: 0;
		padding: 10px 7px;
		line-height: 1.4em;}
	
	/* front right: featured product copy */
	#frontright {
	position: absolute;
	top:35px; right:15px;
	width: 201px;}
	
		#frontfeaturedtitle {
		background: url(../images/shared/f_featured.gif) bottom left no-repeat;
		width: 201px;
		height: 25px;
		font-size: 1px;
		color: #EDF5F7;}
		
		#frontright dl {list-style: none;}
		#frontright img {margin-top: 15px; }
		#featuredname {
			color: #CC0000;
			text-transform: uppercase;
			font-weight: bold;
			margin: .75em 0 0 0;	}
		#frontright dd {margin: .75em 0 0 0;}	
	
	/* front left: news and event and job openings copy */
	#frontleft {
	position: absolute;
	top:35px;
	left:15px;
	width: 161px;
	height: 407px;
}
	
		#frontnewstitle {
		background: url(../images/shared/f_news.gif) bottom left no-repeat;
		width: 158px;
		height: 16px;
		font-size: 1px;
		color: #FFFFFF;}
		
		#frontnews {
			margin: 10px 0;
			list-style-type: none;}
			
			#frontnews li {
				margin-bottom: 1em;
				padding-top: 8px;
				background: url(../images/shared/line_dot.gif) top left repeat-x;}
			#date	{
	color: #999999;
	font-size: 85%;
	}		
			#frontnews a	{
	color: #CC0000;
	font-weight: bold;
	text-decoration: none;
	voice-family: "\"}\"";
	voice-family:inherit;
	padding-left: 15px;} .ack {/*ie hack*/}
	
#frontnews a:hover,
#frontnews a.on {
	color: #CC0000;
	text-decoration:underline;
	voice-family: "\"}\"";
	voice-family:inherit;} .ack {/*ie hack*/}		
			
		#frontjobstitle {
		/*background: url(../images/shared/f_jobs.gif) top left no-repeat;*/
		width: 149px;
		height: 36px;
		font-size: 1px;
		color: #FFFFFF;}
		
		#frontjobs {
			margin: 0px;
			list-style-type:none;}
			
		#frontjobs li {
			margin: 10px 0px;}			
			
		#frontjobs a	{
		color: #CC0000;
		font-weight: bold;
		text-decoration: none;
		voice-family: "\"}\"";
		voice-family:inherit;
		padding-left: 0px;} .ack {/*ie hack*/}
			

/* sub page position styles ---------------------------------------------- */
/* ----------------------------------------------------------------------- */		
#subwrapper {
	width: 750px;
	float: left;
	color: #003D4F;
	background: #ffffff;
	font-size: 110%;}

#subnav {
	float: left;
	width: 182px;}

#subcontent {
	float: right;
	width: 550px;
	margin-top: 30px;}
	
#content {
	float: left;
	width: 550px;}
	
	#subwrapper .pic {width: 329px;}

#right {
	float: right;
	width: 211px;}

/* sub navigation  -------------------------------------------------------- */
#subnav ul{
	list-style-type: none;
	width: 166px;
	border: 1px solid #C6E2EA;
	border-top: 0;
	padding: 25px 10px;
	margin-left: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 144px;} .ack {/*ie hack*/}
	
#subnav li {margin-bottom: .75em;}
	
#subnav a {
	padding: 0;
	margin:0;
	color: #666666;
	text-decoration: none;
	voice-family: "\"}\"";
	voice-family:inherit;
	padding-left: 15px;} .ack {/*ie hack*/}
	
#subnav a:hover,
#subnav a.on {
	color: #CC0000;
	voice-family: "\"}\"";
	voice-family:inherit;
	background: url(../images/shared/bul_red.gif) 0 50% no-repeat;} .ack {/*ie hack*/}
		
/* sub page content styles ----------------------------------------------- */
/* ----------------------------------------------------------------------- */	
#subwrapper {
	color: #003D4F;
	background: #ffffff;}

#subcontent {
	font-size: 110%;
	line-height: 1.3em;}
	

#subwrapper h2 {
	font-size: 150%;
	color: #CC0000;
	text-transform: uppercase;}
	
#right {margin: 0 0 10px 15px;}
	
	#right img {
		display: block;
		padding-bottom: 29px;
		background: url(../images/pics/bottom.gif) bottom left no-repeat;}
	
	#right address {
		font-style: normal;
		margin-bottom: 1em;
		font-size: 110%;}
		
/* main content styles for all the subpages ------------------------------ */
#content {
	border-top: 10px solid #006683;
	padding-top: 20px;
	margin-top: 5px;}

#content p {
	margin-bottom: 1.7em;}
	
	#content h3 {
	font-size: 120%;
	color: #006491;
	border-bottom: 1px solid #89BAC9;
	padding-bottom: 3px;
	text-transform: uppercase;
	margin: 1.8em 0 5px 0;
	clear: both;}
	
	#content h4	 {
		font-size: 110%;
		color: #006491;
		text-transform: uppercase;
		margin: 0 0 10px 0;
		clear: both;}
	
		#content h6	 {
		font-weight: bold;
		font-size: 110%;
		color: #333333;
		margin: 0 0 10px 0;
		clear: both;}
		
	/* h5 is the same as h4, but without the clearing.  This is for some specific pages */
	#content h5	 {
		font-size: 110%;
		color: #006491;
		text-transform: uppercase;
		margin: 0 0 10px 0;}
	
	#content a {
		color: #CC0000;
		font-weight: bold;
		text-decoration: none;}
	#content a:hover {
		text-decoration: underline;}
	
	#content ul {
		margin: 15px 0 15px 20px;}	
	
	#content ol {
		margin: 15px 0 15px 30px;}	
	
	#content ol li {
		font-size: 95%;
		margin-bottom: 5px;}
	
	#sitemap ul {
		margin: 15px 0 15px 20px;}	
	
	#sitemap ol {
		margin: 2px 0 2px 30px;}	
	
	#sitemap ol li {
		font-size: 95%;
		margin-bottom: 2px;}

		
		/* specific styles in the content */
		#qualityquote dt {
			font-size: 110%;
			color: #006491;
			font-weight: bold;
			text-transform: uppercase;}
		
		#qualityquote dd {
			margin: 10px 25px 15px 25px;
			border-top: 1px solid #006683;
			border-bottom: 1px solid #006683;
			background: #C6E2EA url(../images/shared/bq_bot.gif) bottom right no-repeat;
			font-size: 115%;
			color: #003D4F;
			line-height: 1.2em;}
			
			#qualityquote p {
			padding: 23px 0 0 50px;
			margin: 0 40px 25px 0;
			background: url(../images/shared/bq_top.gif) 10px 5px no-repeat;}
			
			#employaddress {
			margin: 10px 25px 15px 25px;
			padding: 15px 0;
			border-top: 1px solid #006683;
			border-bottom: 1px solid #006683;
			background: #C6E2EA;
			font-size: 120%;
			color: #003D4F;
			line-height: 1.5em;
			font-style: normal;
			text-align: center;}
			
			.productlist {
				margin: 15px 25px 35px 25px;
				list-style-type: none;}
				
			.productlist li {
				display: block;
				width: 45%;
				float: left;
				padding: 3px;}
				
			.prodlist {	padding-top: 20px;}
			
			#directory {
				font-size: 120%;}
				
				#directory dt {
					font-weight: bold;
					margin-bottom: 5px;}
					
				#directory dd {
					margin: 0 0 15px 25px;
					font-size: 85%;}
					
#jobdesc {
	border: 0px;
	margin: 5px 0px 5px 15px;
}

#jobdesc td {
	padding: 0px 5px;
}
#jobdesc td.contact {
	padding: 0px 5px;
	vertical-align:top;
}

/* Google Map----------------------------------------------------------------------- */
#map {
	border: 2px solid #DBDBDB;
	width: 300px;
	height: 300px;}

			
/* form styles ----------------------------------------------------------- */

#form {
	width: 95%; 
	margin: 15px auto 0 auto;
	clear: right;}
	
#form input, 
#form select {
	padding: 2px; 
	margin: 3px 0 0 0;
	border: 1px solid #CCCCCC;}

#form p {
	float: left;	
	width: 240px;}
	
#form p.wide {
	width: 100%;}
	
#form strong {color: #CC0000}

#form .button {
	margin-right: 10px;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 2px solid #666666;
	border-bottom: 2px solid #666666;
	background-color: #FFFFFF;
	padding: 3px;}
	
/* footer styles --------------------------------------------------------- */
/* ----------------------------------------------------------------------- */
#footer {
	/*clear: both;
	background: #ffffff url(../images/shared/bg_footer_main.gif) top right no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;	
	color: #89BAC8;
	padding: 60px 0 15px 200px;}*/
	
	#footer p {margin: .2em;}
	
	#footer a {
		color: #89BAC8;
		text-decoration: none;}
	#footer a:hover {text-decoration: underline;}
		
	#footer a.conbrio {color: #CC0000;}