body {
	background: no-repeat center top url("/images/backgrounds/default.jpg") #8abc06;
    font-family:  Helvetica, Arial, sans-serif;
    font-size: 13px; line-height: 1.8em; 
	margin:0; padding:0;
}

h1, h2, h3, h4 { color: #222; margin: 0.5em 0 0.5em 0.25em;  font-weight: lighter;
	font-family: Arial, Helvetica, sans-serif; letter-spacing: -1px; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 1em 0.5em; border: none; text-align: justify; }

address { margin: 1em 3em; font-size: 110%; }

h1 { font-size: 200%; }
h2 { font-size: 175%; }
h3 { font-size: 150%; }

img { border: 0; }

ul { padding-left: 2em; }
dd { padding: 0 0 2em 1em; }
dt { font-weight: bold; font-size: larger; }

#branding img, #branding div, #invasives.front_panel img { behavior: url("/iepngfix.htc"); }

#branding  { width: 990px; height: 120px; position: relative;}
#container { width: 990px; clear: both;}
	
#container, #branding { margin: 0 auto; }

#photostrip { 
	width: 600px; height: 90px;
    position: absolute;
	top: 10px; right: 0px;
	margin: 0; padding: 0;
    background: url("/images/photostrips/languard.png") no-repeat top left; 
}

#logo { margin: 0; width: 378px; height: 90px; position: relative; top: 10px; border: 0;}

#navigation { clear: both; font-size: 16px; width: 100%; }

#primary { font-size:   18px; list-style: none; display: block; width: 100%; min-width: 400px; padding: 0; margin: 0; }
#primary li { list-style: none; display: block;	float: left; margin-right: 0.5em; padding: 7px 10px; background-color: #666; border: 1px solid #999; }


#secondary { clear: both; background-color: #8abc06; margin: 0; padding: 6px 0px; width: 100%; height: 24px;	list-style: none; display: block; }
#secondary li { list-style: none; float: left; margin: 0; border-right: thin solid #ddd; padding: 0 7px; }
#secondary li.last { border-right: none;  }

#navigation a, #navigation a:visited    { color: #ddd; }
#navigation a:hover                     { color: #fff; }

#content { clear: both; float: left; position: relative; width: 782px; color: #444; background: #fff; padding: 4px;	margin: 0;}

#sidebar { float: right; margin: 0; padding: 0; width: 200px; line-height: normal; background: #fff; }

.sidebox { margin: 4px 4px 4px 0; background: #eed; 
           position: relative; /* fix IE6 BUG - http://www.positioniseverything.net/explorer/doubled-margin.html */ 
}

#sidebar h1, #sidebar h2, #sidebar h3 { text-transform: uppercase; color: #666; font-weight: bold; }
#sidebar h2 { font-size: 11px; margin: 3px 0 3px 3px; }

#about { border: solid 1px #aaa; }
#about h2 a, #about h2 a:visited { color: #666;}

#languard_meta { clear: both; }
#languard_meta ul { font-size: 13px; list-style: none; margin: 0; padding: 0;}
#languard_meta li { margin: 3px 0; background: #eed; padding: 6px; border: solid 1px #aaa;}
#languard_meta a, #languard_meta a:visited { color: #444; }

#credentials     { border: solid 1px #aaa; position: relative; overflow: hidden; width: 194px; }
#credentials h2  { margin: 8px;}
#credentials a { margin: 4px 0 0 8px; display: block; position: relative; float: left; /* width: 131px; height: 89px; */}
#credentials p { clear: both; padding-top: 8px;}
#credentials p a, #credentials p a:visited { color: #444; display: inline; float: none; margin-left: 0;}

#copyright   { border: solid 1px #aaa; clear: both;}
#copyright h2 { margin: 5px; }

#about p, #copyright p { font-size: 10px; font-style: italic; color: #666; padding: 1px 0px; margin: 3px; text-align: left; }

#footer { 
	width: 782px;
	float: left;
	background: #646464 url("/images/languard-logo-mono.gif") no-repeat left;
	border: solid 4px #fff;	border-top: none;
	color: #ddd;
    font-size: 90%;
}

#footer p { padding: 0.5em; text-align:right; }
#footer a { color: #eee; }

/* CSS Magic to customise the appearance of each primary navigation section, uses <BODY ID="<name>" on each page*/

body.home #n_home, body.invasives #n_invasives, body.sportsturf  #n_sportsturf, body.urban #n_urban, body.industrial  #n_industrial, body.highways  #n_highways { /* border-bottom: none; padding: 10px 7px; */ font-weight: bold; }

body.home #n_home a, body.invasives #n_invasives a, body.sportsturf  #n_sportsturf a, body.urban #n_urban a, body.industrial  #n_industrial a, body.highways #primary #n_highways a { color: #444;}

#primary #n_home { background-color: #8abc06; }

body.home #primary #n_home, body.home #secondary { background-color: #8abc06; }
body.home #primary #n_home { border-color: #8abc06; }
body.home #content h1, body.home #content h2, body.home #content h3{ color: #2a8a2a; }
body.home #sectionNavigation h2 { }

body.sportsturf { background-image: url("/images/backgrounds/sportsturf.jpg"); background-color: #60af20; }
body.sportsturf #photostrip { background-image: url("/images/photostrips/sportsturf.png"); }
body.sportsturf #primary #n_sportsturf { background-color: #60af20; border-color: #60af20; }
body.sportsturf #secondary { background-color: #60af20; }
#primary #n_sportsturf { background: #60af20;  }
body.sportsturf #content h1, body.sportsturf #content h2, body.sportsturf #content h3{ color: #009835; }

body.urban { background-image: url("/images/backgrounds/urban.jpg"); background-color:  #907eb9; }
body.urban #photostrip { background-image: url("/images/photostrips/urban.png"); }
body.urban #primary #n_urban, body.urban #secondary  { background-color: #907eb9; }
body.urban #primary #n_urban { border-color: #907eb9; }
#primary #n_urban { background: #907eb9;}
body.urban #content h1, body.urban #content h2, body.urban #content h3 { color: #634b9b; }

body.industrial { background-image: url("/images/backgrounds/industrial.jpg"); background-color:  #f18f16; }
body.industrial #photostrip { background-image: url("/images/photostrips/industrial.png"); }
body.industrial #primary #n_industrial { background-color: #f18f16; }
body.industrial #primary #n_industrial { border-color: #f18f16; }
body.industrial #n_industrial, body.industrial #secondary { background-color: #f18f16; }
#primary #n_industrial { background-color: #f18f16; }
body.industrial #content h1, body.industrial #content h2, body.industrial #content h3 { color: #e84008; }

body.highways { background-image: url("/images/backgrounds/highways.jpg"); background-color:  #fff15e; }
body.highways #photostrip { background-image: url(/images/photostrips/highways.png); }
body.highways #primary #n_highways, body.highways #secondary { background-color: #FDCB00;}
body.highways #primary #n_highways { border-color: #FDCB00;}
#primary #n_highways { background-color: #FDCB00; }
#primary #n_highways a { color: #777; } /* better contrast for text on a light background */
body.highways #content h1, body.highways #content h2, body.highways #content h3 { color: #FDCB00;}
body.highways #navigation #secondary li a { color: #777;  }
body.highways #navigation #secondary li { border-color: #777; }
body.highways #navigation #secondary li a:hover  { color: #333; }

body.invasives { background-image: url("/images/backgrounds/invasives.jpg"); background-color:  #0092d7; }
body.invasives #photostrip { background-image: url("/images/photostrips/invasives.png"); }
body.invasives #primary #n_invasives, body.invasives #secondary { background-color: #0092d7;}
body.invasives #primary #n_invasives { border-color: #0092d7;}
#primary #n_invasives { background-color: #0092d7; }
body.invasives #content h1, body.invasives #content h2, body.invasives #content h3 { color: #00469b; }

.photogallery { display: inline; float: left; position: relative; margin: 0 0 1em 0; padding: 0; width: 100%;}
.photogallery li { list-style: none; padding: 4px; float: left; }
.photogallery p { font-size: 10px; font-weight: bold; padding: 0; margin: 0; }
.photogallery img { background: white; border: 1px gray solid; padding: 5px; }

body.invasives .photogallery img { width: 100px; height: 75px; padding: 2px; margin: 0px;}
body.invasives .photogallery li { padding: 0px 2px; margin: 0px;}
body.invasives .photogallery p { }

#languard_map { margin: 4px 0 4px 12px; border: 0; float: right; }

.photo     { float: right; margin: 0 1em; }
.photo ul, .photo li { list-style: none; margin: 0 0 1em 0; padding: 0; }
.photo img { background: white; border: 1px #aaa solid; padding: 4px; }

.caption { font-weight: bold; text-align: center; }

.two-column   { clear: both; margin: 0 auto; }
.left-column  { float: left; width: 50%; border-right: solid thin #666;}
.right-column { float: right; width: 49%; }

#messageForm { clear: left; margin: 1em; padding: 0; }

#messageForm label { float: left; width: 10em; padding-right: 1em; display: inline; font-weight: bold; font-size: 0.9em; text-align: right; }

#messageForm input.txt { color: #00008B; background-color: #e9f2ce; border: 1px inset #00008B; }
#messageForm input.btn { color: #00008B; background-color: #e9f2ce; border: 1px outset #00008B; padding: 4px; margin-right: 2em;}

#messageForm fieldset { border-color: #8abc06; border: none; margin: 0; padding: 0; } 
#messageForm legend { font-weight: bold; font-size: 130%; color: #8abc06; }
#messageForm  div.element {  display: inline; float: left;  margin: 5px 0 0 10px;  padding: 0; }
#messageForm #contact_info, #contact_address { float: left; width: 49%; margin: 0 4px; }
#messageForm #contact_query { clear: left; margin: 4px; }
#messageForm #contact_topic { clear: left; margin: 4px; }
#messageForm #contact_topic label { float: left;  width: 10em; padding-right: 1em; }
#messageForm #contact_topic #brochure_label { float: left;  width: 16em; }
#messageForm label.chkbx { width: auto; padding-right: 1em; }
#messageForm .element label { float: none; padding-left: 1em;}
#messageForm #message { width: 80%; height: 8em; clear: both;}
#messageForm #contact_query #message_label { font-weight: normal; font-style: italic; width: 100%; display: block; text-align: left; }

#messageForm fieldset ol { margin: 0; padding: 0; list-style: none;  }
#messageForm fieldset li { display: block; margin: 1em 0; clear: both; }
#messageForm li.reqnote { font-size: 80%; margin: 5px 0 0 10px; }
#messageForm span.error, form span.required {color: red; }
#messageForm div.error { border: 1px solid red; padding: 5px; }
#messageForm span.error { clear: left; width: 20em; }
#messageForm div.error input { margin: 1em 0 0 9em; }

.logos_and_captions { list-style: none; padding: 0; margin: 4px; display: block;}
.logos_and_captions li { border-top: 1px dotted gray; padding: 8px 2px; margin: 4px; width: 46%; float: left; min-height: 225px; display: block}
.logos_and_captions li ul { margin: 1em 0 1em 0; }
.logos_and_captions li ul li { border: none; width: 100%; margin: 0; padding: 0; min-height: 0; display: list-item; }
.logos_and_captions li img { padding: 4px; border: 0; }
.logos_and_captions li p { margin-bottom: 0px; padding: 0;}

.clearboth { clear: both; }
.phonenumber { display: inline; margin: 0; padding: 0; position: relative; font-size: 120%; font-family: fixed, sans-serif; }
.required_field { color: #c00; font-size: 175%; font-weight: bold; }

.latin { font-size: smaller; font-style: italic; }
.vm    { font-style: italic; } 

/* Some CSS Selector magic to style the First paragraph in a section, 
 * the alternate is to allow for the inclusion of a div that may be used to 
 * style a photo gallery.  
 * Doesn't work in IE5,6 but works in IE7, FF and Opera.
 */
#content h1 + p, #content h1 + div + p { font-size: 120%; color: #555; font-style: oblique; text-align: left;}

/* 
 * Simple CSS ImageMap effect c/o http://csshowto.com/effects/css-image-maps-with-pop-up-tool-tips/ 
 *
 * Used on the Invasive Weeds Main Page.
 */

#invWeedsMap { position: relative; margin: 0 auto; padding: 0; width: 760px; height: 200px;
	background: url("/invasive-weed-management/images/invasive-weeds.jpg") top left no-repeat #fff;
	}
	
#invWeedsMap ul { margin: 0; padding: 0; list-style: none; }

#invWeedsMap li { margin: 0; padding: 0; }
#invWeedsMap li a { position: absolute; display: block; background: url("/images/blank.gif"); text-decoration: none; }
#invWeedsMap li a span { display: none; }
#invWeedsMap li a:hover span  { 
	display: block; 
	position: relative; 
	width: 150px; 
	top: 140px; right: 20px;
	padding: 0px;
	background-color: #cee6f2;
	border: 1px solid #00469b; 
	color: #000;
	font-weight: bold;
	text-align: center;
	text-decoration: none; 
	filter: alpha(opacity=80);
	opacity: 0.8; 
}

/* CSS ImageMap layout - position the DIVs over the relevant part of the photo */

#invWeedsMap a.japaneseknotweed { top: 10px; left:  15px; width: 105px; height: 175px; }
#invWeedsMap a.gianthogweed     { top: 10px; left: 120px; width: 105px; height: 175px; }
#invWeedsMap a.himalyanbalsam   { top: 10px; left: 225px; width: 105px; height: 175px; }
#invWeedsMap a.horsetail        { top: 10px; left: 335px; width: 100px;	height: 175px; }
#invWeedsMap a.commonragwort    { top: 10px; left: 435px; width: 100px; height: 175px; }
#invWeedsMap a.rhododendron     { top: 10px; left: 535px; width: 100px; height: 175px; }
#invWeedsMap a.buddleia         { top: 10px; left: 635px; width: 100px; height: 175px; }

/* 
 *  FrontPage Magazine Style Layout using Left floated DIVS styled using .front_panel
 */

#body.home #container { position: relative; }
/* #urban.front_panel, #sportsturf.front_panel  { left: 0; }
#highways.front_panel, #industrial.front_panel  { left: 200px; } */

.front_panel { width: 386px; height: 190px; float: left; border: solid 1px;	margin: 0px; padding: 0px;
	display: inline; /* fix IE6 BUG - http://www.positioniseverything.net/explorer/doubled-margin.html */
}

.front_panel h2 { font-size: 150%; margin: 0px; padding: 3px 8px; display: block; width: 370px}
.front_panel h2 a { color: #ddd;  }
.front_panel h2 a:hover, .front_panel:hover h2 a { color: #fff; }
.front_panel p { line-height: 1.5em; margin: 5px; padding: 1px; text-align: left;}

.front_panel ul { margin: 3px auto; clear: right; list-style: none; font-size: 12px; padding: 0px;
				  width: 382px; border-top: 1px dotted #666; }
.front_panel li { display: inline; margin: 0px 0px 0px 2px; padding: 0px; white-space: nowrap;}
.front_panel li a { color: #444; }

.fp_photo { float: right; background: #fff; border: 1px solid #aaa; padding: 4px; margin: 3px; 
            line-height: 0; /* Firefox needs this to prevent the hyperlink's box expanding?? */ }
.fp_photo img { width: 100px; height: 75px; border: 0; padding: 0px; margin: 0px;}

#urban.front_panel         { border-color: #907eb9; background-color: #dacef2; }
#urban.front_panel  h2     { background-color: #907eb9; }

#highways.front_panel      { border-color: #FDCB00;  background-color: #F2EBCE;  margin: 0 0 4px 4px; }
#highways.front_panel h2   { background-color: #FDCB00; }
#highways.front_panel h2 a { color: #777; }
#highways.front_panel h2 a:hover, #highways.front_panel:hover h2 a { color: #aaa; }

#invasives.front_panel     { width: 778px; height: 170px; border-color: #0092d7; background-color: #cee6f2; margin-bottom: 4px; }
#invasives.front_panel h2  { background-color: #0092d7; width: 762px; text-align: center;}
#invasives.front_panel img { width: 380px; height: 100px; margin: 0px; border: 0;}
#invasives.front_panel ul  { width: 740px; margin-left: 15px;}

#sportsturf.front_panel    { border-color: #60af20;  background-color: #cef2db; }
#sportsturf.front_panel h2 { background-color:  #60af20; }

#industrial.front_panel    { border-color: #f18f16; background-color: #f2e2ce; margin-left: 4px; }
#industrial.front_panel h2 { background-color: #f18f16; }
