/**************************************************************
=CSS reset adapted from Eric Meyer 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
**************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

input, textarea, select 
{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */
:focus 
{
outline: 0;
}

ol, ul 
{
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table 
{
border-collapse: separate;
border-spacing: 0;
}

caption, th, td 
{
text-align: left;
font-weight: normal;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after 
{
content: "";
}

blockquote, q 
{
quotes: "" "";
}

hr 
{
display: none;
}

img 
{
display: block;
}




/********************
=Core setup 
********************/

html, 
body 
{
background-color: #e9eff4;
height: 100%;
}

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, Candara, sans-serif;
font-size: 62.5%; /* Sets everything to 10px assuming defaults */
line-height: 1.385;
color: #333;
}

.wrapper 
{
min-height: 100%;
position: relative;
}

#top, 
#telephone, 
#main, 
#nav-info
{
font-size: 100.01%; /* Fix Firefox rounding errors */
}

a 
{
text-decoration: none;
color: #0082d9;
}

a:hover 
{
color: #006;
}


/********************
=Layout (core) 
********************/

#top
{
background: #003;
} 

.skip 
{
position: absolute;
left: -200em;
}

.wrapper-nav 
{
max-width: 100em;
margin: auto;
}

.clear 
{
clear: left;
}




/********************
=brand 
********************/

#brand 
{
float: right;
width: 23%;
text-indent: -200em;
background: transparent url("/img/brand-bg.gif") 0 11px no-repeat;
height: 84px;
}

#brand a 
{
display: block;
width: 168px;
height: 84px;
}



/********************
=nav-main 
********************/

#nav-main 
{
margin-left: 2%; 
width: 71%;
padding-top: 44px;
}

#nav-main li 
{
float: left;
margin-right: 1.6em;
position: relative;
}

#nav-main em 
{
font-size: 160%;
font-weight: bold;
}

#nav-main strong, 
#nav-main a 
{
display: block;
}

#nav-main strong 
{
cursor: default;
}

#nav-main a:hover strong 
{
cursor: pointer;
}

#nav-main em strong, 
#nav-main em a 
{
line-height: 1;
color: white;
border-top: 0.375em solid #003;
padding: 0.375em 0 0.69em;
}

#nav-main em a strong, 
#nav-main em a:hover strong
{
border-top: 0;
padding: 0;
}

#nav-main em a:hover, 
#nav-main li:hover em a 
{
border-top: 0.375em solid white;
}

#nav-main em strong, 
#nav-main em a.current
{
border-top: 0.375em solid #909599;
}


/* sub-menus */

#nav-main ul 
{
position: absolute;
top: 3.9em;
left: -200em;
border-bottom: 1px solid #919fab;
}

#nav-main ul li 
{
float: none;
margin-right: 0;
font-size: 130%;
}

#nav-main li:hover ul 
{
position: absolute;
left: 0;
}

#nav-main ul li a, 
#nav-main li:hover li a 
{
border-top: 1px solid #e9eff4;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-left: 1px solid #dee2e6;
}

#nav-main ul li a, 
#nav-main ul li strong
{
padding: 4px 6px;
color: #0082d9;
background: #e9eff4;
width: 19em;
}

#nav-main ul li a:hover 
{
color: #003;
background: #d9e2eb;
border-top: 1px solid #919fab;
border-bottom: 1px solid white;
}

#nav-main ul li strong
{
color: #7f8f9e;
}



/********************
=tel 
********************/

#telephone 
{
border-top: 1px solid white;
background: #728ba3 url("/img/tel-bg.gif") repeat-x;
}

#telephone .tel 
{
display: block;
max-width: 100em;
margin: auto;
line-height: 1;
padding: 7px 0 8px;
color: white;
}

#telephone .type 
{
display: inline-block;
margin-left: 77%;
}

#telephone .type, 
#telephone .value 
{
font-size: 120%;
}



#main 
{
max-width: 100em;
margin: auto;
overflow: hidden;
background: white;
padding-bottom: 19em;
}

#nav-sub, 
#content, 
#content-sub, 
#contact-data
{
float: left;
margin-left: 4%;
margin-top: 20px;
font-size: 130%;
}

#nav-sub, 
#contact-data
{
margin-left: 2%;
width: 21%;
}

#content 
{
width: 35.385em; 
min-height: 530px;
}

#content-sub 
{
width: 21%;
}

.news #content-sub 
{
margin-left: 2%;
}



/********************
=header 
********************/

#header 
{
padding-bottom: 18px;
font-size: 130%;
}

#header h1 
{
padding: 20px 2% 0;
width: 46%;
}

#header p
{
padding: 0 2%;
width: 46%;
}

.home #header 
{
height: 206px;
background: url("/img/home-header.jpg") 50% 0 no-repeat;
}

.projects #header 
{
background: url("/img/projects-header.jpg") 50% 100% no-repeat;
}

.services #header 
{
background: #015970 url("/img/services-header.jpg") 50% 0 no-repeat;
}

.error404 #header 
{
height: 206px; 
background: url("/img/404-header.jpg") 50% 0 no-repeat;
}

.services #header h1, 
.services #header p, 
.news #header h1 
{
color: white;
}

.about #header 
{
background: url("/img/about-header.jpg") 50% 0 no-repeat;
height: 128px;
}

.news #header
{
background: url("/img/news-header.jpg") 50% 0 no-repeat;
height: 128px;
}



/********************
=section 
********************/

#section 
{
padding-top: 24px;
font-size: 130%;
min-height: 530px;
}

.news #section
{
width: 75%;
float: left;
}

#section ul 
{
background: url("/img/section-ul-bg.gif") 50% 0 repeat-y;
width: 100%;
overflow: hidden;
}

.news #section ul 
{
background: url("/img/section-ul-bg.gif") 100% 0 repeat-y;
}

#section li 
{
float: left;
margin-left: 2%;
width: 21%;
padding: 0 2% 30px 0;
min-height: 18em;
}

.projects #section li 
{
min-height: 26.3em;
}

.news #section li 
{
margin-left: 20px;
padding-right: 20px;
width: 28%;
min-height: 22.1em;
}

#section p 
{
margin-top: 0.462em;
}

#section h2 .location 
{
display: block;
font-size: 86.67%;
}

#section li a img 
{
display: block;
border-top: 6px solid #0082d9;
margin-bottom: 0.462em;
width: 210px;
height: 114px;
}

#section li a:hover img 
{
border-top: 6px solid #006;
}

.news #section li h2 a
{
display: block;
border-top: 6px solid #0082d9;
padding-top: 0.462em;
}

.news #section li h2 a:hover
{
border-top: 6px solid #006;
}

/* About team */

#team-wrapper 
{
width: 100%;
background: #dae2e8 url("/img/team-wrapper-bg.gif") 0 100% repeat-x;
}

#team 
{
width: 145px;
height: 58px;
}



/********************
=Typography 
********************/

#main strong 
{
font-weight: bold;
}

#header p, 
#content p 
{
margin-top: 0.923em;
}

.uc /* CAPS */
{
text-transform: uppercase;
}

.sc /* Small caps */ 
{
font-size: 85%;
}

#header p, 
.large 
{
font-size: 115.38%;
}

span.date 
{
display: block;
color: #919fab;
font-size: 92.31%;
line-height: 1.5;
margin-top: 0.25em;
}

#content ul 
{
list-style: square;
}

#content ol 
{
list-style: decimal;
}

#content li 
{
margin-top: 0.462em;
}

#content ul li 
{
margin-left: 1.75em;
list-style-image: url("/img/content-ul-li-square.gif");
}

#content ol li 
{
margin-left: 2.5em;
}

/* Image alignment */

.img-left 
{
float: left;
margin-right: 10px;
}

.img-right 
{
float: right;
margin-left: 10px;
}

/* Blockquotes */

blockquote
{
background: #e9eff4 url("/img/info-bg.gif") 0 100% repeat-x;
padding: 0 10px 0.75em;
margin-top: 1em;
border: 1px solid #dee2e6;
}

/* Microformatting */

#contact-data dt 
{
padding-left: 34px;
background: url("/img/hcard-add.gif") 0 1px no-repeat;
}

#contact-data:hover dt 
{
background: url("/img/hcard-add.gif") 0 -49px no-repeat;
}

.org 
{
font-weight: bold;
}

#contact-data dd
{
margin-top: 0.692em;
}

#contact-data dd.adr 
{
margin-top: 0;
}

#contact-data .adr 
{
width: 100%;
overflow: hidden;
}

#contact-data .street-address-2, 
#contact-data .fax
{
display: block;
}

#contact-data .delimiter 
{
display: none;
}

#contact-data #street-address-3, 
#contact-data #postal-code 
{
display: inline;
}

#contact-data .tel .type 
{
display: inline-block;
width: 1.75em;
}


/* =Headings */

#main h2, 
#main h3, 
#main h4, 
#contact-data dt, 
#content .go-parent 
{
font-weight: bold;
color: #919fab;
}

#main h1, 
#content h3, 
#content h4, 
#section h1, 
#section h3, 
#section h4 
{
color: #006;
}

#main h1 
{
font-size: 192.31%;
line-height: 1.2
}

#main h1 .location 
{
display: block;
font-size: 60%;
line-height: 1.2;
font-weight: bold;
margin-top: 0.33em;
}

#content h2, 
#content .h2
{
margin-top: 1em;
border-top: 1px solid #dee2e6;
padding-top: 0.67em;
font-size: 138.46%;
line-height: 1.33;
}


#section h2, 
#content h3, 
#section h3, 
#content .h3, 
#section .h3, 
#nav-sub h2, 
#contact-data dt, 
#content-sub h2, 
#content .go-parent
{
font-size: 115.38%;
line-height: 1.4;
}

#content h3, 
#section h3, 
#content .h3, 
#section .h3 
{
margin-top: 1em;
}


/* go-to arrows */

#content .go-to li 
{
list-style: none;
list-style-image: none;
margin-left: 0;
}

#content .go-to a
{
display: block;
padding-left: 27px;
background: url("/img/go-to.gif") no-repeat;
}

#content .go-to a:hover
{
background: url("/img/go-to.gif") 0 -100px no-repeat;
}

#nav-sub .go-to, 
#content-sub .go-to
{
background: url("/img/go-to.gif") 100% 2px no-repeat;
}

#nav-sub .go-to:hover, 
#content-sub .go-to:hover 
{
background: url("/img/go-to.gif") 100% -98px no-repeat;
}

/* go-up arrows */

#nav-sub .go-up a, 
#content-sub .go-up a
{
background: url("/img/go-up.gif") 100% 0 no-repeat;
}

#nav-sub .go-up a:hover, 
#content-sub .go-up a:hover 
{
background: url("/img/go-up.gif") 100% -100px no-repeat;
}

/* go-parent arrows */

#nav-sub .go-parent a, 
#content .go-parent a, 
#content-sub .go-parent a 
{
background: url("/img/go-parent.gif") 100% 0 no-repeat;
}

#nav-sub .go-parent a:hover, 
#content .go-parent a:hover, 
#content-sub .go-parent a:hover 
{
background: url("/img/go-parent.gif") 100% -100px no-repeat;
}

/* go item in content */

#content .go li
{
margin: 0 0 0.4em;
list-style: none;
padding-bottom: 4px;
border-bottom: 1px solid #dee2e6;
}


/* =info (for project case studies and news stories) */

#info 
{
background: #e9eff4 url("/img/info-bg.gif") 0 100% repeat-x;
padding: 0 10px 0.75em;
color: #7f8f9e;
font-size: 92.31%;
margin-top: 1em;
border: 1px solid #dee2e6;
}

#info dl 
{
padding-top: 0.5em;
}

#info dt, 
#info dd 
{
display: inline;
}

#info dt 
{
font-weight: bold;
}


/********************
=nav-sub     (left)
=content-sub (right)
********************/

/* menu headings */

#nav-sub h2, 
#content-sub h2 
{
display: inline;
}

#nav-sub h2 a, 
#content .go-parent a, 
#content-sub h2 a 
{
display: inline-block;
padding-right: 22px;
border-top: 0;
padding-top: 0;
color: #919fab;
}

#nav-sub h2 a:hover, 
#content .go-parent a:hover, 
#content-sub h2 a:hover 
{
background-color: transparent;
color: #006;
}

.about #content-sub h2 
{
padding: 4px 3px;
display: block;
}

/* menu lists */

#nav-sub ul, 
#nav-sub ol, 
#content-sub ul, 
#content-sub ol 
{
border-bottom: 1px solid #dee2e6;
margin-bottom: 30px;
}

.news #content-sub ol 
{
border-bottom: 0;
}

/* menu list item links */

#nav-sub a, 
#content-sub a, 
#nav-sub strong, 
#content-sub strong, 
.home #content-sub .more a
{
display: block;
border-top: 1px solid #dee2e6;
padding: 4px 3px;
}

#nav-sub a:hover, 
#content-sub a:hover 
{
background: #e9eff4;
}

/* current items */

#nav-sub strong, 
#content-sub strong 
{
color: #919fab;
cursor: default;
padding-left: 22px;
background: white url("/img/current-arrow.gif") 3px 7px no-repeat;
}

/* project locations */

#nav-sub a .location, 
#content-sub a .location 
{
color: #919fab;
}

#nav-sub strong .location, 
#content-sub .location 
{
font-weight: normal;
}

/* home page 'More' links */

#nav-sub .more, 
#content-sub .more 
{
font-size: 92.31%;
}

/* lead projects on home page */

.home #content-sub li a img 
{
border-top: 6px solid #0082d9;
width: 210px;
height: 114px;
}

.home #content-sub li a:hover img
{
border-top: 6px solid #006;
}

.home #content-sub ul a 
{
border-bottom: 1px solid white;
padding: 0;
margin-bottom: 0.692em;
}

.home #content-sub ul a:hover 
{
border-bottom: 1px solid #dee2e6;
}

.home #content-sub ul a em 
{
display: block;
padding: 4px 3px;
}

.home #content-sub ul .more a 
{
border-bottom: 0;
margin-bottom: 0;
}

.home #content-sub ul .more a:hover 
{
border-top: 1px solid #dee2e6;
border-bottom: 0;
}



/********************
=nav-info (footer) 
********************/

#nav-info 
{
position: absolute;
bottom: 0;
width: 100%;
background: #003 url("/img/nav-info-bg.gif") repeat-x;
line-height: 1;
}

#nav-info .wrapper-nav
{
padding-top: 31px; 
height: 8em;
}

#site, 
#citation 
{
margin-left: 2%;
width: 96%;
}

/* =site */

#site li 
{
float: left; 
font-size: 130%;
margin-right: 0.9em;
}

#site a 
{
display: block;
color: white;
border-top: 6px solid #003;
padding: 6px 0 9px;
}

#site a:hover 
{
border-top: 6px solid white;
}

#site .home
{
padding-left: 32px;
background: url("/img/nav-info-mp-square.gif") 0 0.62em no-repeat;
}

#site #sitemap
{
padding-left: 1em;
background: url("/img/sitemap-bg.gif") 0 55% no-repeat;
}

#site #go-top 
{
position: absolute;
left: 50%;
top: -11px;
padding: 0;
text-indent: -200em;
}

#site #go-top a
{
display: block;
background: url("/img/go-top.gif") no-repeat;
margin-left: -14px;
width: 28px;
height: 28px;
border-top: 0;
padding: 0;
}

#site #go-top a:hover 
{
background: url("/img/go-top.gif") 0 -32px no-repeat;
}

/* current section */

#site .current a 
{
border-top: 6px solid #909599;
}


/* =citation */

#citation 
{
clear: left;
padding-top: 0.75em;
}

#citation li
{
margin-right: 1em;
font-size: 120%;
float: left;
}

#citation li, 
#citation a 
{
color: #909599;
}

#copyright 
{
padding-left: 32px;
}

#watershed, 
#guests 
{
padding-left: 1em;
border-left: 1px solid #909599;
}

#citation #watershed a:hover 
{
color: white;
}



/***** =Forms *****/

legend span {
display: block;
}

form#contact 
{
width: 35em;
margin-top: 1em;
border-top: 1px solid #dee2e6;
padding-top: 0.67em;
}

form#contact span 
{
position: absolute;
left: -200em;
}

#content form#contact ol
{
list-style: none;
}

#content form#contact li 
{
margin-left: 0;
}

input, 
textarea, 
select, 
button {
font-size: 10pt;
color: #333;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

input.text, 
textarea 
{
padding: 0.25em 0.33em 0.25em;
background: #e9eff4;
}

input.text:focus, 
textarea:focus 
{
border: 2px solid #0082d9;
background-color: white;
}

button, 
input.button, 
input.submit 
{
font-weight: bold;
color: #0082d9;
text-transform: uppercase;
margin-top: 3px;
}

button:hover, 
input.submit:hover 
{
color: #003e80;
cursor: pointer;
}

label 
{
display: block;
margin-top: 0.3em;
}

#contact label, 
#contact input.submit 
{
margin-top: 0.67em;
}

optgroup 
{
background-color: #e9eff4;
}

option 
{
background-color: white;
}

li.required {
font-weight: bold;
}

li.optional 
{
color: #919fab;
}

em.required 
{
color: #919fab;
}

em.required, 
.required input, 
.required textarea 
{
font-style: normal;
font-weight: normal;
}

#content .error 
{
margin-top: 0;
margin-bottom: 0.923em;
}

.error, 
.invalid 
{
color: #f00;
}

form .full, 
form textarea
{
width: 98%;
}

form .half 
{
width: 49%;
}

input.text, 
select, 
textarea 
{
display: block;
}

form p span 
{
display: block;
font-weight: normal;
}

#contact span 
{
font-weight: normal;
display: block;
color: #808080;
}

#contact label strong 
{
color: #f00;
display: block;
}

p#confirmation 
{
background-color: #e9eff4;
padding: 6px 10px;
}

/* Google map */

#map 
{
margin-top: 0.923em;
width: 458px;
height: 458px;
border: 1px solid #dee2e6;
}

/* Brochure */

#brochure 
{
position: relative;
}

#nav-sub .download, 
#nav-sub .download:hover 
{
padding-left: 66px; 
height: 85px;
background-image: url("/img/mpl-brochure-thumb60.jpg");
background-position: 0 50%;
background-repeat: no-repeat;
}

#sysreq
{
display: block;
position: absolute;
top: 4em;
left: 66px;
font-size: 84.62%;
color: #919fab;
}

#nav-sub #sysreq a 
{
padding: 0;
border-top: 0;
color: #66a3cc;
}

#nav-sub #sysreq a:hover 
{
background: none;
color: #006;
}