/* -----------------------------------------------------------------------------
---------------------  AdvancedLED Stylesheet v1 20061016  ---------------------
----------------------------------------------------------------------------- */



/* ------------------------------------------------------------ HTML Elements */

p, h1, h2, h3, h4, h5, ul, li, dl, dd, dt {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: 100;
	
}

p a, li a, #definitionhelp a, #callout a, .callout a, dl a {
	color: #f39;
	text-decoration: none;
	font-weight: 900;
	}

p a:hover, li a:hover, #definitionhelp a:hover {
background-color: #f39;
color: white;
}

body {
	background-color: #333;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: black;
	font-size: 90%;
}

h1 {
	display: block;
	width: 100%;
	height: 70px;
		background-position: center 13px;
		background-repeat: no-repeat;
		/* Background image defined in the individual PHP files */

}



	h1 a {
		background-position: center 13px;
		background-repeat: no-repeat;
		/* Background image is defined in the PHP files */
		display: block;
		width: 800px;
		height: 80px;
		text-indent: -9000px;
		margin: auto;
	}
	
	h1 img {
		display: none;
	}

h2 {margin-bottom: 15px;}

h3 {
font-weight: 900;
}

a img {
	border: none;
}


/* ------------------------------------------------------------------- Hacks! */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	background-color: green;
}

.fix-guillotine {
clear: both; 
display: none !important; 
display: inline; 
font-size: 1px;
}

/* ------------------------------------------------------------------ Wrapper */

#pagewrapper {
	width: 800px;
	margin: auto;
}

/* ------------------------------------------------------------------- Navbar */

#navigation {
	padding: 20px 0 0 0;
}

	#products #navigation {
	}
	
		#products-nav  {
			display: none;
		}
		
			#products #products-nav, #product-info #products-nav { 
			display: inline;
			}
			
			#product-info #products-nav {
			padding-bottom: 10px;
			}

	.nav {
		list-style-type: none;
		clear: both;
	}
	
		.nav li {
			float: left;
			padding: 0 5px;
			border-right: 1px solid white;
			color: white;
		}
	
		#mainnav li {
			border-right: 1px solid #ccc;
		}
		
		#products-nav li {
			border-right: 1px solid #3fe;
		}
	
	#mainnav {
		margin-bottom: 5px;
	}
	
		.nav .last {
			border-right: none !important;
		}

	

/* ------------------------------------------------------------------ Content */


/* All pages */

#content {
	clear: both;
	margin-top: 20px;
	background: url(../images/box.png) top left no-repeat #fff;
	padding: 10px 10px 0 10px;
	width: 780px;
	
	
}

	#content .companyname {
		font-weight: bold;
		color: #f39;
	}
	
	#content #picture {
	float: right;
	padding: 20px;
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	margin: 0 0 20px 20px;

}

#callout, .callout {
padding: 20px 20px 20px 55px; 
border: 1px solid #ccc; 
background: url(../images/info.png) left center no-repeat #f1f1f1;
margin: 20px 0; 
text-align: left;
}


/* Homepage */

#homepage #content {
}

	#homepage #content #picture {
		position: inherit !important;
		margin: 10px 10px 0 10px !important;
		top: 0px !important;
		
		/* Internet Explorer gets the placement of the picture wrong. Somehow the bottom margin of the last paragraph is added to the containing box, meaning the gap around the picture is too big at the bottom. This fixes that */
		margin: 0 10px 0 10px;
		position: relative;
		top: 10px;
	}

	#homepage #content h2 {
		margin: 20px 10px 20px 10px;
	}

	#homepage #content h3 {
		margin: 0 10px;
		font-weight: 900;
		margin-top: 1em;
	}

	#homepage #content p {
		margin: 0 390px 1em 10px; /* If a different width picture is used on the front page, change the 2nd value to the width of the pic + 10px */
	}

/* Product listing */

#products #content {
	padding-top: 30px;
}

#products #content h2 {
margin-bottom: 0;
}

#products .grouping {
	width: 335px;
	margin: 0 25px 1em 25px !important;
	float: left;
	display: inline; /* Stops IE double margin bug */
}

	#products .pair {
		clear: both;
	}


	#products .grouping h2 {
		font-weight: 900;
		font-size: 150%;
	}
	
	#products .grouping ul {
	margin-top: 1em;
	}
	
	#products .grouping ul li {
		list-style-position: outside;
		margin-left: 20px;
		list-style-image: url(../images/list-bullet.png);
	}
	
	
/* Product info */

#product-info #content {
	padding: 20px;
	width: 760px;

}



	#product-info h2, #product-info h3 {
		font-size: 150%;
		font-weight: 900;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	#product-info h3 { 
		clear: both;
		padding-top: 20px;
		margin-bottom: 20px;
	 }
	
	#product-info p {
		margin-bottom: 1em;
	}
	
	#product-info dt {
		font-weight: 900;
	}
	
	#product-info #product-brief {
		width: 750px;
		margin-top: 20px;
	}	
	
		#product-info #product-brief p {
		padding-left: 290px;
		}
	
		#product-brief-pic {
			float: left;
			width: 250px;
			padding-right: 20px;
			margin-right: 20px;
			border-right: 1px solid black;
		}
			
			#product-brief-pic img {
				float: right;
			}

	#product-info #features ul {
		float: left;
		width: 760px;
		margin: 0;
		padding: 0;
	}
	 
	#product-info #features li {
	
		/* Warning, here be dragons */
	
		float: left;
		width: 370px !important;		/* Compliant browsers get the right values */
		margin: 0 0 0 10px !important;
		padding: 0 0 0 0px !important; 
		background: none !important; 
		list-style-position: outside;
		list-style-image: url(../images/list-bullet.png);
		
		/* Internet Explorer 6 (7?) won't display list bullets in a floated list item. Let's bodge it! */
		
		background: url(../images/list-bullet.png) no-repeat left 0.5em #fff;
		padding-left: 15px;
		width: 365px;
		float: left;
		margin-left: 0;
	
	} 
	
	

	#prodcut-info #features li .left {
	clear: both;
	}
	
	
	#product-info #features {
	}	
	
	#product-info #options {
		border-right: 1px solid black;
		width: 380px;
		margin-right: 10px;
		float: left;
	}
	
	#product-brief-pic2 {
		clear: both;
		padding-top: 20px;
	}
	
		#product-brief-pic2 img {
			margin: auto;
			display: block;
			margin: 0 auto;
			}
	
	#product-info dl {
	}
	
		#product-info dt {
		}
	
		#product-info #options dd, #product-info #options li {
		background: url(../images/list-bullet.png) no-repeat left 0.5em #fff;
		padding-left: 15px;
		list-style-type: none;
		}
		
		#product-info dl .last { margin-bottom: 20px; }
	
	#product-info #closing p { font-weight: 900; }


	
	
	
/* Article Page */	

#article #content {
	padding: 20px;
	width: 760px;
}

	#article h2 {
	font-size: 150%;
	}
	
	#article p {
	margin-bottom: 1em;
	}
	
		#article #content li {
		/* Warning, here be dragons */
		
		/* Compliant browsers get the right values */
		margin: 0 0 0 10px !important;
		padding: 0 0 0 0px !important; 
		background: none !important; 
		list-style-position: outside;
		list-style-image: url(../images/list-bullet.png);
		
		/* Internet Explorer 6 (7?) won't display list bullets in a floated list item. Let's bodge it! */
		
		background: url(../images/list-bullet.png) no-repeat left 0.5em;
		padding-left: 15px;
		float: left;
		margin-left: 0;
		}
		
		#article dt {font-weight: 900;}
		
		#benefits article dd {margin-bottom: 1em;}
		
		#article dd {
		background: url(../images/list-bullet.png) no-repeat left 0.5em #fff;
		padding-left: 15px;
		margin-bottom: 20px;
		}


	#objectives-container {
	width: 390px; 
	float: right; 
	background-color: #f1f1f1; 
	border: 1px solid #ccc; 
	margin: 0 0 20px 20px; 
	padding: 20px;
	}

.credits {font-size: 75%; color: #666;}

.casestudypic, .newspic {
padding: 20px; 
background-color: #f1f1f1; 
margin: 0 0 0px 20px; 
border: 1px solid #ccc; 
float: right;
}

.contactpic{
padding: 20px; 
background-color: #f1f1f1; 
margin: 0 0 0px 0px; 
border: 1px solid #ccc; 
float: right;
}

#news img {
float: right;
margin: 0 0 10px 20px;
}

#news dt, #news dd {
clear: both;
}


/* -------------- Contacts */

#contactform label{
clear: both;
width: 100px;
float: left;
margin-right: 1em;
}

#contactform input {
margin-bottom: 10px;
width: 600px;
}

#contactform #contact-comments textarea {
width: 600px;
height: 200px;
}

/* ------------------------------------------------------------------- Footer */

#footer {
	color: #ccc;
	background-image: url(../images/box.png);
	background-repeat: no-repeat;
	background-position: 0 -4980px;
	background-color: #333;
	padding: 50px 20px 0 20px;
}

	#footer  p {
		width: 32.5%;
		float: left;
	}
	
		#footer .left {}
		#footer .middle { text-align: center;}
		#footer .right { text-align: right;}
		
	
		/* -eSterling CSS*/
		
		a.nav-top,a.nav-top:active,a.nav-top:visited{
		
		}
		a.nav-top:hover{
		border-bottom: 2px solid #FF3399;		
		}
		#navigation{
	color: #FFFFFF;			
		}