/*******************************************************
TITLE: © 2008 Pharma Design. All rights reserved.
DATE: Jan 2008
AUTHOR: Mercx Design - http://www.mercx.co.uk
*******************************************************/

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	font: 100.01%/130% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
	color: #1576A0;
	background: #fff url(../graphics/imgBd.jpg) repeat-x;
	height: 100%; 		/* Adds the vertical scrollbar in Firefox. No more content jumping. */
	min-height: 101%;	/* Adds the vertical scrollbar in Firefox. No more content jumping. */
	}


/* Styles
----------------------------------------------- */

p {
	font: 0.8em/160% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
	color: #1B82AE;
	margin: 0px;
	padding: 11px 0 14px 0px;
	}
	
	p a:link, p a:visited {
		color: #12A3DD;
		text-decoration: none;
		background: url(../graphics/navUline.gif) repeat-x bottom;
		}
		
	p a:hover, p a:active {
		color: #E80000;
		background-color: #FFF4E0;
		}
		
acronym, abbr {
	border-bottom: 1px dashed #CCC;
	}

acronym, abbr,  {
	font-size: 0.8em;
	letter-spacing: .07em;
	}

acronym, abbr {
	cursor: help;
	}
	
h1 {
	font: 1.80em/100% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
	color: #9CB589;
	font-weight: normal;
	letter-spacing: -1px;
	margin: 0px;
	padding: 0px;
	}
	
h2 {
	font: 1.10em/150% "Century Gothic", helvetica, verdana, arial, sans-serif;
	color: #3FBAE4;
	font-weight: normal;
	margin: 40px 0 0 0;
	padding: 0 0 18px 0px;
	background: url(../graphics/h2Uline.gif) repeat-x bottom;
	}
	
h2.subplain {
	background: none;
	margin: 10px 0 0 0;
	padding: 0px;
	}
	
.clearit {
	display: block;
	clear: both;
	}
	
.divider {
	padding: 0 5px 0 8px;
	}
	
.warningTitle {
	font: 0.75em, helvetica, verdana, arial, sans-serif;
	font-weight: bold;
	color: #F00;
	padding: 2px;
	}
	
.warning {
	font: 0.65em, helvetica, verdana, arial, sans-serif;
	font-weight: bold;
	color: #F00;
	padding: 2px;
	}


/* Layout divs
----------------------------------------------- */

#wrapper {
	float: left;
	width: 851px;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	}

#mainLeft {
	float: left;
	width: 851px;
	background-color: #fff;
	background-image: url(../graphics/pgEffect.jpg) no-repeat;	/* preload the hover graphic */
	background-position: -1000px -1000px;						/* preload the hover graphic */
	}
	
#mainRight {
	width: 99px;
	margin: 0;
	padding: 0;
	float: left;
	height: 1100px;
	background: url(../graphics/imgSide.jpg) no-repeat;
	}
	
#mainBanner {
	z-index: 0;
	position: relative;
	width: 851px;
	height: 386px;
	background: url(../graphics/imgMainBanner.jpg) no-repeat;
	}
	
#contentMain {
	float: right;
	width: 621px;
	}
	
#contentText {
	width: 556px;
	padding: 6px 45px 0 20px;
	margin: 0px;
	}
	
#contentLeft {
	float: left;
	width: 230px;
	}
	
#secondNav {
	margin: 0px;
	padding: 0px;
	}
	
#footer {
	background: url(../graphics/footer.jpg) no-repeat;
	height: 51px;
	width: 621px;
	margin: 20px 0 30px 0;
	}
	
#mastFull {
	background: url(../graphics/mastFull.jpg) no-repeat;
	height: 66px;
	width: 556px;
	margin: 2px 0 20px 0;
	padding: 0px;
	}
	
#mastAssist {
	background: url(../graphics/mastAssist.jpg) no-repeat;
	height: 66px;
	width: 556px;
	margin: 2px 0 20px 0;
	padding: 0px;
	}
	
#mastImg { margin: 10px 0 30px 0; padding: 0px; }


	
/* Nav Lists & divs
----------------------------------------------- */
	
#navMain {
	position: absolute;
	top: 117px;
	left: 26px;
	height: 140px;
	width: 164px;
	font-size: 0.75em;
	color: #fff;
	margin: 0px;
	padding: 35px 0 0 0;
	}
	
	#navMain li {
		list-style-type: none;
		padding: 0px;
		margin: 3px 0 0 8px;
		background: transparent url(../graphics/navBullet.gif) left center no-repeat;
		text-indent: 17px;
		}
		
	#navMain li a {
		color: #fff;
		text-decoration: none;
		background: url(../graphics/navUline.gif) repeat-x bottom;
		}
		
	#navMain li a:hover {
		color: #1576A0;
		text-decoration: none;
		}
		
#contactBanner {
	z-index: 1;
	position: absolute;
	top: 20px;
	left: 40px;
	width: 600px;
	font: 0.73em "Century Gothic", "Trebuchet MS", helvetica, verdana, arial, sans-serif;
	color: #1B82AE;
	margin: 0px;
	padding: 0px;
	}
		#contactBanner li { display: inline; padding: 0 30px 0 0; margin: 10px 0 0 0; }		
		#contactBanner li a { color: #12A3DD; text-decoration: none; background: url(../graphics/navUline.gif) repeat-x bottom; }		
		#contactBanner li a:hover { color: #E80000; background-color: #FFF4E0; }
		
#footerText {
	margin: 0px;
	padding: 0 0 0 60px;
	font: 0.60em helvetica, arial, verdana, sans-serif;
	color: #98A3A3;
	}
		#footerText ul { padding: 0px; margin: 0px; }
		#footerText li { display: inline; padding: 0 75px 0 0; margin: 0px; }
		#footerText li a { color: #12A3DD; text-decoration: none; background: url(../graphics/navUline.gif) repeat-x bottom; }
		#footerText li a:hover { color: #E80000; background-color: #FFF4E0; }
	
#footerNav {
	margin: 0 0 0 0px;
	padding: 60px 0 0 20px;
	font: 0.70em helvetica, arial, verdana, sans-serif;
	color: #1576A0;
	}
		#footerNav ul { padding: 0px; margin: 0px; }		
		#footerNav li { display: inline; padding: 20px 0 0 0; margin: 0px; }		
		#footerNav li a { color: #12A3DD; text-decoration: none; background: url(../graphics/navUline.gif) repeat-x bottom; }
		#footerNav li a:hover { color: #E80000; background-color: #FFF4E0; }


#prodnav {
	float: left;
	width: 556px;
	height: auto;
	margin: 15px 0 15px 0;
	padding: 0px;
	}

		#prodnav ul {
			list-style: none;
			margin: 0px;
			padding: 0px;
			}
		
		#prodnav ul li {
			padding: 0px;
			margin: 12px 0 0 0 !important; margin-bottom: -4px; /* IE produces a minor difference which is apparent on the hover */
			}
			
		#prodnav ul li a {
			width: 556px;
			background-color: #F4F8F9;
			display: block;
			font: 1.20em, "Trebuchet MS", helvetica, verdana, arial, sans-serif;
			color: #1576A0;
			font-weight: normal;
			text-align: left;
			text-decoration: none;
			padding: 12px 0 12px 0;
			}
		
		#prodnav ul li a:hover, #prodnav ul li a:focus {
			background-color: #E8F3F6;
			text-decoration: none;
			}
			
			#prodnav li a img {
				padding: 0px;
				margin: 0 10px 0 30px;
				border: 0px;
				}
				
/*			#prodnav li a b {
				color: #959595;
				position: absolute;
				padding: 0;
				margin: 0 0 0 15px;
				cursor: hand;
				font-weight: normal;
				}*/
				
			.prodnavFull {
				padding: 0px;
				margin: -68px 0 43px 300px !important; margin-bottom: 0px;
				cursor: hand;
				font: 1.05em, "Trebuchet MS", helvetica, verdana, arial, sans-serif;
				color: #FF9019;
				font-weight: normal;
				background: none;
				}
				
			.prodnavAssist {
				padding: 0px;
				margin: -68px 0 43px 300px !important; margin-bottom: 3px;
				cursor: hand;
				font-weight: normal;
				font: 1.05em, "Trebuchet MS", helvetica, verdana, arial, sans-serif;
				color: #C358D6;
				background: none;
				}

/* second sub navigation */		
#second {
	font: 0.85em/150% "Century Gothic", helvetica, verdana, arial, sans-serif;
	line-height: 2.20em;
	margin: 0px;
	padding: 10px 0 30px 0;
	}
	
	#second li {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		}
		
	#second li a {
		color: #12A3DD;
		text-decoration: none;
		background: url(../graphics/navUline.gif) repeat-x bottom;
		}
		
	#second a:hover {
		color: #E80000;
		background-color: #FFF4E0;
		text-decoration: none;
		}
	
#active a:link, #active a:visited, #active a:hover {
	font: 1em/150% "Century Gothic", helvetica, verdana, arial, sans-serif;
	text-decoration: none;
	background-color: #F1F1F1;
	color: #9CB589;
	padding: 1px;
	}
	
#bulletsFull ul {
	margin: 10px 0 10px 20px;
	padding: 0px;
	}	
		#bulletsFull li {
			font: 0.8em/220% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
			color: #1B82AE;
			margin: 0px;
			padding: 0px;
			background: transparent url(../graphics/bulletFull.gif) left center no-repeat;
			list-style-type: none;
			text-indent: 20px;
			}

#bulletsAssist ul {
	margin: 10px 0 10px 20px;
	padding: 0px;
	}	
		#bulletsAssist li {
			font: 0.8em/220% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
			color: #1B82AE;
			margin: 0px;
			padding: 0px;
			background: transparent url(../graphics/bulletAssist.gif) left center no-repeat;
			list-style-type: none;
			text-indent: 20px;
			}
			
#bulletsMain ul {
	margin: 10px 0 10px 20px;
	padding: 0px;
	}	
		#bulletsMain li {
			font: 0.8em/220% "Trebuchet MS", helvetica, verdana, arial, sans-serif;
			color: #1B82AE;
			margin: 0px;
			padding: 0px;
			background: transparent url(../graphics/bulletMain.gif) left center no-repeat;
			list-style-type: none;
			text-indent: 20px;
			}
			
		#bulletsMain li a {
			text-decoration: none;
			color: #12A3DD;
			text-decoration: none;
			background: url(../graphics/navUline.gif) repeat-x bottom;
			}
			
		#bulletsMain a:hover {
			color: #E80000;
			background-color: #FFF4E0;
			text-decoration: none;
			}


/* sIFR
----------------------------------------------- */

/* These are standard sIFR styles... do not modify */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	}

.sIFR-replaced {
	visibility: visible !important;
	}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
	}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter 
spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since 
the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing 
issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	font-size: 52px !important;
	font-size: 46px;
	letter-spacing: -9px;
	}


/* CSS side box
----------------------------------------------- */

/* set the image to use and establish the lower-right position */ 
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 { 
	background: transparent url(../graphics/sidebox.gif) no-repeat bottom right;
	z-index: 3;
	position:relative;
	}

.cssbox { 
	width: 215px !important; /* intended total box width - padding-right(next) */ 
	width: 215px; /* IE Win = width - padding */ 
	padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ 
	margin: -20px 0 20px 0; /* use to position the box */ 
	} 
	
/* set the top-right image */ 
.cssbox_head { 
	background-position: top right; margin-right: -15px; /* pull the right image over on top of border */ 
	padding-right: 40px; /* right-image-gap + right-inside padding */
	} 

/* set the top-left image */ 
.cssbox_head h2 { 
	background-position: top left; 
	margin: 0; /* reset main site styles*/ 
	border: 0; /* ditto */ 
	padding: 30px 0 15px 35px; /* padding-left = image gap + interior padding ... no padding-right */
	height: auto !important; height: 1%; /* IE Holly Hack */ 
	font: 1em/150% "Century Gothic", helvetica, verdana, arial, sans-serif;
	color: #3FBAE4;
	background: url(../graphics/callBack.gif) top right no-repeat;
	}
	
/* set the lower-left corner image */ 
.cssbox_body { 
	background-position: bottom left; 
	margin-right: 25px; /* interior-padding right */ 
	padding: 5px 0 40px 35px; /* mirror .cssbox_head right/left */
	} 


/* Contact Form
----------------------------------------------- */

#contactForm {	
	margin: 25px 0 0 0;
	padding: 0px;
	}

input {
	background-color: #F3F4F8;
	border: #B4BEC8 1px solid;
	width: 147px;
	font-family: helvetica, arial, verdana, sans-serif;
	color: #3FBAE4;
	font-size: 10px;
	padding: 3px;
	margin: 0 0 3px 0;
	}
	
label {
	display: none;
	}

textarea {
	background-color: #F3F4F8;
	border: #B4BEC8 1px solid;
	width: 147px;
	height: 76px;
	font-family: helvetica, arial, verdana, sans-serif;
	color: #3FBAE4;
	font-size: 10px;
	padding: 3px;
	margin: 0 0 3px 0;
	}

#send {
	width: 108px;
	height: 32px;
	margin: 0px;
	}
	
input.send-btn {
	background: url(../graphics/btnSend.jpg) no-repeat;
	border-style: none;
	width: 108px;
	height: 32px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	}