/* the methods on this page are largely the hard work (freely given) of many people from the css-discuss list [http://www.css-discuss.org], including (but not limited to) Big John, Holly Bergevin, Douglas Livingstone, Scott Sauyet, Victor Caston, Mike Papageorge, and me, Alex Robinson [css-stuff@alex.cloudband.com] */

/* ====================================================================
GENERAL STYLING
-------------------------------------------------------------------- */
/* border:nones are for NN4 */
html { 
min-width: 1000px;
margin: 0px; 
padding: 0px; 
behavior: url(include/csshover.htc);  /*  WinIE behavior call */
}

body {
margin: 20px;
padding: 0px;
color: #000;
background: #f0f2f7;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
}

a:link {
color: #8a644a;
background: transparent;
text-decoration: none;
}

a:visited {
color: #02609a;
background: transparent;
text-decoration: none;
}

a:hover {
color: #b9a292;
background: transparent;
text-decoration: none;
}

p {
margin: 0;
padding: 0 0 .5em 0; 
}

img {
border: 0;
}

table {
width: 100%;
}

th {
vertical-align: bottom;
}

td {
vertical-align: top;
}

.super {
font-size: .8em;
vertical-align: super;
}

.bold {
font-weight: bold;
}

.clear {
clear: both;
}

.top {
margin: 0;
padding: 0 0 1.0em 0; 
font-size: .7em;
}

p.clear-left {
clear: left;
font-size: 1em;
}

p.clear-right {
clear: right;
font-size: .75em;
}

/* IE-Win hack to keep list background images from disappearing */
ul, ul.bullets, ol, dl {
position: relative;  
}

/* Opera hack: to keep the list item prior to the li.current from inheriting the font-weight of bold. */
html > body ul, html > body ol, html > body dl {
position: inherit; 
}


/* ====================================================================
WRAPPERS
-------------------------------------------------------------------- */

div { 
margin: 0px; 
padding: 0px; 
}

.divclear { 
clear: both;
} /* CSS HACK: only for NN4, so now use Caio hack to cleanse palette */

/*/*/ .divclear { display: none; } /* */

/* box-wrap is only needed if you want to set a background color for the columns, put a border round the content block or fix the content width */

.box-wrap {
color: #000;
background: #fff;
border-top: 1px solid #808080; /*** Sets the external top side border. ***/
border-right: 2px outset #808080; /*** Sets the external right side border. ***/
border-bottom: 2px outset #808080; /*** Sets the external bottom border. ***/
border-left: 1px solid #808080; /*** Sets the external left side border. ***/
}

.box-inner-wrap {
border: 0;
margin: 10px;
padding: 0;
}

.box-inner-wrap  ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-inner-wrap ul li {
margin: 0;
padding: 0 0 1.0em 0;
font: 1em/1.25em verdana, helvetica, arial, sans-serif;
}

.box-inner-wrap ul.indent {
margin: 0 0 0 20px;
padding: 0;
}

.box-inner-wrap ul.indent li {
margin: 0;
padding: 0;
}


/* ====================================================================
CRUMBTRAIL
-------------------------------------------------------------------- */

.box-crumbtrail {
color: #000;
background: #fff;
margin: 0;
padding: 0 0 5px 0;
}

/* ====================================================================
SEARCH

-------------------------------------------------------------------- */

div.box-crumbtrail .search {
position: absolute;
top: 15px;
right: 0;
width: 215px;
margin: 0;
padding: 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Prevents the right margin of the input box from overlapping the gray background. */
* html div.box-crumbtrail .search {
right: 20px;
}

/* hack for Opera only; will need to update when this convention is adopted by other browsers. */
@media all and (min-width: 0px) {
div.box-crumbtrail .search {
top: 15px;
right: 10px;
}
}

div.box-crumbtrail .search input {
color: #000;
background: #fff;
border: 1px dashed #c0c2c5;
margin: 0;
padding: .125em;
width: 150px;
height: 1.5em;
font: .80em/1.0em verdana, helvetica, arial, sans-serif;
text-transform: none;
}


/* ====================================================================
HEADER (Navigation and Title)
-------------------------------------------------------------------- */

#nav {
color: #000;
background: #acc2c5;
margin: 0;
padding: 0;
height: 125px;
white-space: nowrap;						/* ??????????????? W3C CSS Validator: This property applies to block-level elements> ?????????? */
}

#nav h1 {
margin: 0;
padding: 0 0 5px 160px;
color: #000;
background: transparent;
font-size: 1.0em;
text-transform: uppercase;
letter-spacing: 0.15em;
border: 1px dashed #fff;
border-width: 0 0 1px 0;
}

#nav h1 span {
display: hidden;
}

#nav img {
margin: 0;
padding: 30px 0 0 20px;
}

#nav .logo {
float: left;
width: 151px;
height: 125px;
margin: 0;
padding: 0;
border: 1px dashed #fff;
border-width: 0 1px 1px 0;
}

#nav .logo img {
margin: 0;
padding: 4px 0 0 29px;
border: 0;
}

/* ====================================================================
FOOTER
-------------------------------------------------------------------- */

.box-footer {
clear: both;
margin: 0;
padding: 0.5em;
border-top: 1px dashed #c0c2c5;
font: .8em/1.5em verdana, helvetica, arial, sans-serif;
color: #000;
background: #fff;
}

.box-footer ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

.box-footer ul li {
margin: 0;
padding: 0;
line-height: 1.25em;
display: inline;
}

/* ====================================================================
COLUMNS LAYOUT
-------------------------------------------------------------------- */

/* Container for left anvigation and main content */

.main-wrap {
float: left;
width: 100%;
margin: 0;
padding: 0;
}

/* ====================================================================
MAIN CONTENT
-------------------------------------------------------------------- */

.main {
float: right;
width: 83%;
margin: 0;
padding: 5px 0 30px 0;
}

/* Hide from IE-mac. Only IE-win sees this. The Holly Hack. Keeps left margin from moving 150px to the left. */
* html .main {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.main h1, .main h2 {
margin: 0;
padding: 0 0 .05em 0;
color: #5D8851;
background: transparent;
}

.main h1 {
font-size: 1.5em;
font-weight: lighter;
text-transform: uppercase;
line-height: 1.5em;
}

.main h1.small {
font-size: 1.25em;
text-transform: none;
}

.main h2 {
padding-top: .75em;
font-size: 1.25em;
line-height: 1.25em;
}

.main h3 {
margin: 0;
padding: .5em 0 0 0;
font-size: 1.15em;
}

.main h4 {
margin: 0;
padding: .5em 0 0 0;
font-size: 1.0em;
}

.main h2 a:link, .main h2 a:visited, .main h2 a:hover, 
.main h3 a:link, .main h3 a:visited, .main h3 a:hover {
margin: 0;
padding: 0;
}

.main a:link,
.main h2 a:link, 
.main h3 a:link {
color: #8a644a;
background: transparent;
border-bottom: 1px dashed #8a644a;
}

.main a:visited,
.main h2 a:visited, 
.main h3 a:visited {
color: #02609a;
background: transparent;
border-bottom: 1px dashed #02609a;
}

.main a:hover,
.main h2 a:hover, 
.main h3 a:hover {
color: #b9a292;
background: transparent;
border-bottom: 1px dashed #b9a292;
}

span.small {
font-size: .7em;
}

/* IE-Win hack to keep list background images from disappearing */
.main ul, .main ol, .main dl {
position: relative;  
}

.main ul, .main ul.bullets {
margin: 5px 0 10px 30px;
padding: 0 0 0 0;
}

.main ul.bullets li {
list-style: url(../images/ehs-bullet.gif) outside;
margin: 0 0 .5em 0;
padding: 0;
line-height: 1.5em;
}

.main ul.bullets li ul.bullets li {
list-style: url(../images/ehs-dash.gif) outside;
margin: 0 0 .5em 0;
padding: 0;
line-height: 1.5em;
}

.main ul.bullets li ul.bullets li ul.bullets li {
list-style: url(../images/ehs-dot.gif) outside;
margin: 0 0 .5em 0;
padding: 0;
line-height: 1.5em;
}

.main ul li {
list-style: none;
margin: 0;
padding: 0;
line-height: 1.5em;
}

.main dl {
margin: 10px 0;
padding: 0;
}

.main dt {
margin: 0;
padding: 0;
font-weight: bold;
}

.main dd {
margin: 0;
padding: 0 0 .5em 1em;
}

.main .bold {
font-weight: bold;
}

.main img {
margin: 0;
padding: 10px 0;
}

/* ====================================================================
													Table formatting
-------------------------------------------------------------------- */

.main table {
margin: 10px 0;
padding: 0;
}

.main table a:link {
color: #8a644a;
background: transparent;
border-bottom: 0px;
}

.main table a:visited {
color: #02609a;
background: transparent;
border-bottom: 0px;
}

.main table a:hover {
color: #b9a292;
background: transparent;
border-bottom: 0px;
}

.main table.w-75 {
width: 75%;
}

.main table.w-50 {
width: 50%;
}

.background {
color: #000;
background: #fff5d2;
}

.spacer {
color: #fff5d2;
background: transparent;
}

.main table td {
margin: 0;
padding: .25em;
}

.main td.w-50, .main th.w-50 {
width: 50%;
}

.main td.w-33, .main th.w-33 {
width: 33%;
}

.main td.w-25, .main th.w-25 {
width: 25%;
}

.main td.w-20, .main th.w-20 {
width: 20%;
}

.main td.w-15, .main th.w-15 {
width: 15%;
}

.main td.w-10, .main th.w-10 {
width: 10%;
}

.main td.w-7, .main th.w-7 {
width: 7%;
}

.main td h3 {
margin: 0;
padding: 0 0 .05em 0;
}

.main table caption {
margin: 0;
padding: 0;
text-align: left;
font-weight: bold;
}

.main .left {
text-align: left;
}

.main .right {
text-align: right;
}

.main .center {
text-align: center;
}

.main .right-border {
border-right: 1px dashed #5D8851;
}

.main .top-border th, .main .top-border td {
border-top: 1px dashed #5D8851;
}

.main .bottom-border {
border-bottom: 1px dashed #5D8851;
}

.main .bottom-border th, .main .bottom-border td {
border-bottom: 1px dashed #5D8851;
}

.main-content, .left-nav-content {
margin: 0;
padding: 0 10px 0 10px;
color: #000;
background: #fff;
}

.main table.criteria ul, .main table.criteria ol {
margin: 0 0 0 15px;
padding: 0;
}

.main table.criteria .subtitle {
color: #5d8851;
background: transparent;
font-weight: bold;
}


/* CSS HACK:  position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */ 

/*/*/
.box-wrap, .main-wrap, .main, .left-nav, .left-nav ul, h2 { 
p\osition: relative; 
}
/* */


/* ====================================================================
LEFT NAVIGATION
-------------------------------------------------------------------- */

.left-nav {
float: left;
width: 150px;
margin: 10px 0;
padding: 0;
color: #000;
background: #fff;
vertical-align: top;
}

.left-nav ul {
margin: 0 0 0 -10px;
padding: 0;
width: 150px;
font: .95em/1.15em verdana, helvetica, arial, sans-serif;
text-transform: uppercase;
text-align: center;
border: 1px dashed #c0c2c5;
}

.left-nav ul li {
position: relative;
list-style: none;
line-height: 1.1em;
margin: 0;
padding: .5em 1.5em;
border-bottom: 1px dashed #c0c2c5;
}

.left-nav li > ul{
top: auto;
left: auto;
}

.left-nav li a, .left-nav ul.level2 li a {
display: block;
margin: 0 0 0 -20px;
padding: 5px 0 5px 4px;
text-decoration: none; 
width: 100%;
voice-family: "\"}\"";
voice-family: inherit;
width: 150px;
}

.left-nav>ul a, .left-nav>ul ul a {
width: auto;
}

.left-nav ul ul {
position: absolute;
top: -1px;
left: 160px;
display: none;
}

.left-nav ul.level1 li.submenu:hover ul.level2 {
display: block;
color: #555;
background: #fff;
}

.left-nav ul li ul.level2 li, .left-nav ul li.current ul.level2 li {
background: #fff;
}

.left-nav ul li a:link {
color: #555;
background: transparent;
}

.left-nav ul li a:visited {
color: #555;
background: transparent;
}

.left-nav ul li a:hover {
color: #5D8851;
background: transparent url(../images/ehs-nav-arrow-fly.gif) no-repeat 1% 50%;
}

.left-nav ul li.current {
list-style: none;
margin: 0;
padding: .5em 1.5em;
color: #555;
background: transparent url(../images/ehs-nav-arrow-fly.gif) no-repeat 1% 50%;
}

.left-nav ul li.current a:link {
color: #5D8851;
background: transparent;
}

.left-nav ul li.current a:visited {
color: #5D8851;
background: transparent;
}

.left-nav ul li.current a:hover {
color: #555;
background: transparent;
}

.left-nav ul li.current ul.level2 li a:hover {
color: #555;
background: transparent url(../images/ehs-nav-arrow-fly.gif) no-repeat 1% 50%;
}

.left-nav .last {
border-bottom: 0 dashed #c0c2c5;
}