body {
	margin: 0;
	padding: 0;
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size: 70%;
	background-repeat: repeat-x;
}
h1 {
margin: 0;
padding: 30px;
font-size: 150%;
color: #FF0000;
text-indent: -9000px;
}
h2 {
	padding: 2px;
	font-size: 110%;
	color: #000000;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 20px;
	text-decoration: none;
}


/* header */


#header {
	background-color: #444034;
	height: 130px;
	width: 100%;
	background-image: url(images/headerBckg.jpg);
	background-repeat: repeat-x;
}
#header .logo {
	background-image: url(images/header_logo.gif);
	background-repeat: no-repeat;
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-position: 0px 60px;
	height: 130px;
}


/* Login */

#page_container {
	margin-right: auto;
	top: -32px;
	margin-top: 10px;
	margin-bottom: 0px;
	position: absolute;
	width: 960px;
}
hr#header_stripe {
	top: -7px;
	border: none;
	color: #191919;
	margin: 0px;
	padding: 0px;
	height: 25px;
}
.panel_button {
	margin-left: 127px;
	margin-right: 0px;
	position: relative;
	top: 1px;
	width: 173px;
	height: 54px;
	z-index: 20;
	-moz-opacity:0.70;
	-khtml-opacity: 0.70;
	opacity: 0.70;
	cursor: pointer;
	background-image: url(images/panel_button.png);
	margin-top: 0px;
	margin-bottom: 0px;
}
.panel_button img {
	position: relative;
	top: 10px;
	border: none;
	margin-left: 10px;
	float: left;
	margin-top: 17px;
	margin-right: 5px;
	height: 18px;
	width: 18px;
}
.panel_button a:link, .panel_button a:visited {
	text-decoration: none;
	color: #545454;
	font-size: 17px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	width: 130px;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: left;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.panel_button a:hover {
	color: #999999;
}
#toppanel {
	width: 300px;
	left: 660px;
	z-index: 25;
	text-align: center;
	position: absolute;
}
#panel {
	width: 300px;
	top: 1px;
	height: 0px;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
	overflow: hidden;
	text-align: left;
	position: relative;
}
#panel_contents {
	background: black;
	height: 100%;
	width: 300px;
	position: absolute;
	z-index: -1;
}
#content {
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	position: relative;
	top: 90px;
	text-align: left;
	color: #545454;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-bottom: 30px;
}
.border {
	border: 5px solid #1d1d1d;
}
img.border {
	float: left;
	margin-right: 15px;
	margin-bottom: 8px;
}
img.border_pic {
	border: 15px #1d1d1d solid;
	position: absolute;
	top: 110px;
	float: left;
	margin-left: 150px;
	width: 100px;
	height: 150px;
	z-index: 30;
}
div#login {
	width: 220px;
	height: 90px;
	position: absolute;
	right: 30px;
	top: 30px;
	text-align: left;
	padding-left: 10px;
	font-size: 12px;
	background-color: #444034;
}
div#login p {
	color: #CCCCCC;
	font-family: "Century Gothic", Georgia, "Times New Roman", Times, serif;
	line-height: 16px;
	padding-top: 5px;
}
#login a:link, #login a:visited {
	color: #00CC00;
	text-decoration: none;
}
#login a:hover {
	color: #00FF00;
}
div#login input#password {
	position: relative;
	right: -4px;
}
div#login input#login_btn {
	border: 1px #899690 solid;
	cursor: pointer;
	position: relative;
	top: 5px;
	left: 86px;
}



/* main nav */


#headernavbar {
	float: right;
	margin-top: 80px;
}
#headernavbar li {
	list-style:none;
	display:inline;
	float: left;
	margin-left: 12px;
}
.home a:link, .home a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: 0px bottom;
}
.about a:link, .about a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -102px bottom;
}
.services a:link, .services a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -204px bottom;
}
.environment a:link, .environment a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -306px bottom;
}
.products a:link, .products a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -408px bottom;
}
.literature a:link, .literature a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -510px bottom;
}
.contact a:link, .contact a:visited {
	color: #CCCCCC;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 90px;
	text-align: right;
	background-image: url(images/NavBckg.gif);
	background-repeat: no-repeat;
	background-position: -612px bottom;
}
.home a:hover, .home a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.about a:hover, .about a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.services a:hover, .services a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.environment a:hover, .environment a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.products a:hover, .products a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.literature a:hover, .literature a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}
.contact a:hover, .contact a.selected {
	color: #FFFFFF;
	background-position: -714px bottom;
}






/* and then these h3 statements */

h3 {
	text-transform: capitalize;
	display: inline;
	font-size: 15px;
	margin: 10px 5px 0 5px;
	padding: 2px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}

.default h3 {
	background-color: #FF3300;
	background-image: url(images/h3_bckg.jpg);
	background-repeat: repeat-x;
}
.careers h3 {
	background-color: #FF3300;
	background-image: url(images/h3_bckg.jpg);
	background-repeat: repeat-x;
	text-decoration: none;
}
.one_man h3 {
	font-size: 110%;
	color: #000000;
	text-decoration: none;
}

.one_man h2 {
	font-size: 110%;
	color: #000000;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 20px;
	text-decoration: none;
	padding-top: 20px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
}

.interviews h3 {
font-size: 110%;
background: #D7D493;
}
.profiles h3 {
	color: #FF3300;
	font-size: 10px;
}

/* main wrapper that holds it all centrally */

#wrapper {
	width:960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0;
}


/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
	float:left;
	width:640px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */



/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */



#secondaryContent{
	float:left;
	width:320px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0px;
	background-image: url(images/secondbckg.gif);
	background-repeat: no-repeat;
	margin-top: 7px;
}
#bluebox {
	height: 100px;
	padding-left: 40px;
}
#bluebox a:link, #bluebox a:visited {
	background-image: url(images/bluebox.jpg);
	background-repeat: no-repeat;
	display: block;
	height: 80px;
	width: 260px;
	background-position: 0px 15px;
	color: #666666;
	text-decoration: underline;
}
#bluebox a:hover {
	background-image: url(images/blueboxOver.jpg);
	height: 80px;
	width: 260px;
	background-repeat: no-repeat;
	display: block;
	background-position: 0px 15px;
	color: #999999;
}
#kastel {
	height: 100px;
	padding-left: 40px;
}
#kastel a:link, #kastel a:visited {
	background-image: url(images/kastel.jpg);
	background-repeat: no-repeat;
	display: block;
	height: 80px;
	width: 260px;
	background-position: 0px 15px;
	color: #666666;
	text-decoration: underline;
}
#kastel a:hover {
	background-image: url(images/kastelOver.jpg);
	height: 80px;
	width: 260px;
	background-repeat: no-repeat;
	display: block;
	background-position: 0px 15px;
	color: #999999;
}
.unity {
	height: 115px;
	width: 280px;
	margin-left: 20px;
}
.unity img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.unity a:link, .unity a:visited {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#sideContent{
	float:left;
	width:180px;
	margin-top: 20;
	background-image: url(images/sidenav.gif);
	background-repeat: no-repeat;
	background-position: 0px 20px;
}
#sideContent ul {
	padding: 0px;
	list-style-type: none;
	width: 150px;
	margin-top: 35px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 15px;
	background-image: none;
}
#sideContent li {
}
#sideContent a:link, #sideContent a:visited {
	background-image: url(images/sideHeader.gif);
	background-repeat: no-repeat;
	display: block;
	height: 22px;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 10px;
}
#sideContent a:hover {
	color: #660000;
	background-image: url(images/sideHeader_over.gif);
	background-repeat: no-repeat;
}
#sideContent .sideEnd {
	background-image: url(images/sidenavBottom.gif);
	height: 30px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}
#sideContent .sideBubble {
	background-image: url(images/greenPallet.gif);
	height: 131px;
	width: 180px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: center;
}
#sideContent .sideBubble img {
}
#sideContent .sideBubble p {
	color: #666666;
	line-height: 17px;
	padding-right: 15px;
	padding-left: 15px;
	padding-top: 25px;
	width: 120px;
	display: block;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: center;
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide {
width:160px;
margin: 5px 0 0 10px;
padding: 10px 0 5px 0;
background: #FFF;
}
.cbSide p {
margin: 0;
padding: 0 5px 2px 5px;
font-size: 90%;
color: #666;
}
.banner {
	margin-top: 15px;
	width: 640px;
	height: 130px;
	background-image: url(images/Banner2.jpg);
	background-repeat: no-repeat;
	background-position: -10px;
}
.flash {
	background-color: #FFFFFF;
	height: 250px;
	width: 100%;
	margin-top: 22px;
}
#primaryContent .flash img {
}

#environmentflash {
	margin-left: 5px;
	width: 264px;
	background-image: url(images/woods.jpg);
	background-repeat: no-repeat;
	height: 66px;
	border-top-width: 3px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
	padding: 0px;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#sideNav {
	background-color: #999999;
	height: 400px;
	width: 180px;
	float: left;
}

/* Styling of the boxes if there is no JavaScript support */

.cbb {
	line-height: 160%;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 20px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	width: 280px;
}
.cbb2 {
	line-height: 160%;
	margin-left: 20px;
	padding-top: 5px;
	padding-right: 0;
	padding-left: 0;
	float: left;
	height: 140px;
	width: 125px;
	background-image: url(images/cbb2.jpg);
	background-repeat: no-repeat;
	margin-top: 20px;
	padding-bottom: 0px;
}
.cbb2 p {
	color: #FFFFFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
	width: 125px;
	line-height: 15px;
	display: block;
}
.cbb2 img {
	width: 100px;
	height: 60px;
	padding: 0px;
	margin-top: 15px;
	margin-left: 12px;
	margin-bottom: 10px;
	border: 1px dashed #999999;
}
.cbb2 a:link, .cbb2 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
.cbb2 a:hover {
	color: #660000;
}
.cbb a {
	color: #999999;
	background-image: none;
	text-align: left;
	text-decoration: underline;
}
.cbb a:hover {
	color: #666666;
}

/* paragraph styles for any main boxes */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}
.cbbButton {
}
#button {
	background-image: url(images/bluebox.jpg);
	background-repeat: no-repeat;
	height: 180px;
}
#button img {
	margin: 0px;
	padding: 0px;
}

.cbb3 {
	line-height: 160%;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 28px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	width: 280px;
}
.cbb3 p {
	width: 270px;
}
.cbb3 a {
	color: #666666;
	text-decoration: underline;
	font-weight: bold;
}
.cbb3 a:hover {
	color: #999999;
}
.cbb3 img {
	margin: 0px;
	padding: 0px;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
	}

/* Rules for the top corners and border */
.bt {
	background:url(box.gif) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:27px;
	background-image: url(images/box.png);
	background-repeat: no-repeat;
	background-position: 100% 0;
	}
.bt div {
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(box.gif) no-repeat 0 0;
	background-image: url(images/box.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(box.gif) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	background-image: url(images/box.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(box.gif) no-repeat 0 100%;
	background-image: url(images/box.png);
	background-repeat: no-repeat;
	background-position: 0 100%;
	}

/* Insert the left border */
.i1 {
	padding: 0 0 0 12px;
	background:url(borders.gif) repeat-y 0 0;
	background-image: url(images/borders.png);
	background-repeat: repeat-y;
	background-position: 0 0;
	}
/* Insert the right border */
.i2 {
	padding: 0 12px 0 0;
	background:url(borders.gif) repeat-y 100% 0;
	background-image: url(images/borders.png);
	background-repeat: repeat-y;
	background-position: 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#FFF;
border: 1px solid #FFF;
	border-width:1px 0;
	padding:0 5px;
	}
/* CSS for the box ends here */

/* date and posted control the small text info in article blurbs */

.date {
font-size: 85%;
font-weight: bold;
color: #666;
}

.posted {
display: block;
margin: -5px 0 0 50px;
padding: 0 0 10px 0;
font-weight: bold;
color: #666;
}

.postedUnderline {
	display: block;
	font-weight: bold;
	color: #666;
	border-bottom: 1px solid #999;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 50px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	padding-top: 10px;
}
.href {
	display: block;
	font-weight: bold;
	color: #666;
	text-decoration:none;
	
}
.href:hover {
	text-decoration:underline;
}


address {
margin-left: 50px;
}

fieldset {
	width: 220px;
	border: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	display: block;
	margin-top: 0px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
}
.greyline {
	width: 240px;
	height: 2px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-left: 20px;
}
.inputField {
	margin-left: 10px;
	height: 15px;
	padding: 0px;
	margin-top: 0px;
	display: block;
	float: left;
}
.submit {
	display: inline;
	margin-left: 15px;
}

.default fieldset {
width: auto;
border: 0;
margin: 10px 0 10px 50px;
padding: 0;
}

/* footer */

#footer{
	clear:both;
	height: 90px;
	padding: 0px;
	background-color: #444034;
}
#footer p {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	color: #8E886A;
	padding-top: 30px;
	font-size: 9px;
}

#footer a:link, #footer a:visited {
	color: #FFFFFF;
	text-decoration: underline;
}
#footer a:hover {
	color: #CCCCCC;
}
/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */

img {
	float: left;
	margin: 0px 0 2px 5px;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img {
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
	display: block;
	float: none;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
	margin: 20px 40px 0 0;
	float:left;
	line-height:0;
	background-image: url(images/shadow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
 
.img-wrapper img {
	float:none;
	margin:0;
	background:#fff;
	padding:4px;
	position:relative;
	left:-5px;
	top:-5px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}

/* CSS for the ticked off links. Note, I am not ordering things in the LVHA way, as I prefer the visited tick to work above the arrow once visited. */

.cbSide ul {
list-style-type: none;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0;
padding: 3px;
}

.cbSide li a:link {
color:#333;
line-height:150%;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: #FFF url(ticks.gif);
}

.cbSide li a:active {
color:#333;
line-height:150%;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: #FFF url(ticks.gif);
}

.cbSide li a:hover {
color:#990000;
line-height:150%;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: #FFF url(ticks.gif) 0px -20px;
text-decoration:none;
}

.cbSide li a:visited {
color: #999;
text-decoration:none;
line-height:150%;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
background: #FFF url(ticks.gif);
background-position: 0 -40px;
}

/* horizontal main menu navigation - based on a method from Richard Rutter */

 #mainNav
{
	padding: 0;
	width: 500px;
	height: 35px;
	font-weight: bold;
	font-size: 90%;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#mainNav li
{
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: 100px;
}

#mainNav a
{
color: #D7D493;
display: inline;
width: auto;
text-decoration: none;
background: #000;
margin: 0;
padding: 10px 10px;
border-right: 1px solid #FFF;
}

#mainNav a:hover, #mainNav a:active { background: #D7D493;color: #000; }

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}