
/*** GENERAL STYLES ***/

body {background: #fff; text-align: center; margin: 0; padding: 0;}
body, th, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: arial, helvetica, sans-serif; font-size: 13px; color: #666;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 16px;}
form, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

img, table, fieldset {border: 0;}
ul, ul li {list-style: none; margin: 0; padding: 0;}
p {margin: 0 0 1.5em 0;}
a {color: #000;}
a:hover {color: #000;}

.hide {display: none;}
.alert {color: #c00;}
.small {font-size: 10px;}

.floatleft {float: left;}
.floatright {float: right;}
.imgleft {float: left; margin: 0 30px 20px 0;}
.imgright {float: right; margin: 0 0 20px 30px;}
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}

.spacer {float: none; clear: both; height: 1px; overflow: hidden;}
.hr {float: none; clear: both; height: 1px; overflow: hidden; background: #ccc; margin: 2em 0;}
.clear {float: none; clear: both;}
.nomargin {margin: 0;}

.half {width: 48%;}
.third {width: 33%;}
.twothird {width: 60%;}
.quarter {width: 25%;}
.threequarter {width: 70%;}

.ir {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
a .ir {cursor: pointer;}


/*** STRUCTURAL STYLES ***/

.ribbon {width: 100%;}
.ribbon, .ribbon * {color: #fff !important;}
.ribbonbtn {position: absolute; right: 3px; top: 3px;}
.container {position: relative; width: 990px; margin: 0 auto; text-align: left;}

#top {height: 120px;}
#top .ribbon {height: 35px; position: absolute; left: 0; top: 40px;}
#top h1 {position: absolute; left: 0; top: -30px; height: 30px;}
#logo {position: absolute; left: 0; top: 0; background: url(images/logo.png) 0 40px no-repeat;}

#nav {position: absolute; left: 300px; top: 40px; height: 35px; line-height: 35px;}
#nav li {float: left; font-size: 16px;}
#nav a {display: block; width: 10px; white-space: nowrap; padding: 0 10px; color: #fff; text-decoration: none;}
	html>body #nav a {width: auto;}

#eyebrow {position: absolute; right: 0; top: 0; line-height: 30px; font-size: 11px;}
#eyebrow li {float: left; padding-right: 15px;}
#eyebrow img {vertical-align: baseline;}
#eyebrow a {display: block; white-space: nowrap; width: 10px; height: 30px; overflow: hidden; text-decoration: none; text-transform: uppercase; color: #999; letter-spacing: 1px;}
	html>body #eyebrow a {width: auto;}
#eyebrow a:hover {text-decoration: underline;}
#eyebrow .last {width: 114px; background: url(images/idd-eyebrow.gif) 0 7px no-repeat; line-height: 200px;}

#herotop, #herobottom {height: 12px; overflow: hidden;}
#herotop {background: url(images/herotop.gif) center top no-repeat;}
#herobottom {background: url(images/herobottom.gif) center top no-repeat; margin-bottom: 25px;}
#heroribbon {background: url(images/heroribbon.png) center top repeat-y;}

#hero {margin: 0 10px; border: solid #ddd; border-width: 0 1px; padding: 0 5px; background: #fff; overflow: hidden;}
#hero .ribbon h1 {font-size: 25px; line-height: 60px; padding: 0 0 0 20px;}
#hero .ribbon p.floatright {width: 520px; margin: 0; padding: 15px;}
#hero .ribbon h2 {font-size: 25px; line-height: 30px; padding: 5px 20px; border-bottom: 5px solid #fff;}
.herocontent {padding: 20px; line-height: 18px;}
#hero h3 {font-size: 16px; margin-bottom: 1em; font-weight: normal; line-height: 20px;}

#modules .container {width: 970px; padding: 0 10px 30px; overflow: hidden;}
.column225 {width: 225px;}
.column280 {width: 280px;}
.column325 {width: 325px;}
.column425 {width: 425px;}
.column475 {width: 475px;}
.column525 {width: 525px;}
.column625 {width: 625px;}

.module {position: relative; padding-bottom: 4px; background: url(images/module.gif) right bottom no-repeat; zoom: 1; margin-bottom: 16px;}
.moduleribbon {position: absolute; left: -11px; top: 0; width: 10px; height: 10px; background-image: url(images/moduleribbon.png); overflow: hidden;}
.module h3.ribbon {font-size: 16px; line-height: 21px; padding: 5px 10px; width: auto; margin-left: -10px;}
.modulemain {position: relative; border: solid #ddd; border-width: 0 1px 1px; padding: 15px; zoom: 1;}
.moduleshadow {position: absolute; left: 0; bottom: 0; width: 50px; height: 4px; background: url(images/module.gif); overflow: hidden;}

.module h4 {margin-bottom: .5em;}
.herocontent ul, .module ul {margin-bottom: 1.5em;}
.herocontent ul li, .module ul li {position: relative; padding-left: 20px; background: 0 3px no-repeat; margin-bottom: 8px;}
.herocontent ul ul, .module ul ul {margin: .5em 0 1.2em 10px;}
.herocontent ul ul li, .module ul ul li {padding-left: 10px; background: url(images/bullet.gif) 0 6px no-repeat !important; margin-bottom: 4px;}

#footer {position: relative; height: 45px; padding-bottom: 20px;}
#footer .container {height: 45px; background: url(images/footercontainer.png) right 10px no-repeat;}
#footer .ribbon {height: 25px; position: absolute; left: 0; top: 10px;}
#copyright {position: absolute; right: 6px; top: 0; background: url(images/copyright.gif); width: 206px; height: 45px; line-height: 45px; text-align: center; font-size: 11px;}


/*** COLOR SCHEME STYLES ***/

.ribbon {background-color: #999;}
.color1text {color: #999;}
#nav .active, .moduleribbon {background-color: #ccc;}
#heroribbon {background-color: #666;}
.color2text {color: #999;}
.herocontent ul li, .module ul li {background-image: url(images/bullet1.gif);}

body.scheme1 .ribbon {background-color: #95519e;}
body.scheme1 .color1text {color: #95519e;}
body.scheme1 #nav .active, body.scheme1 .moduleribbon {background-color: #bf97c5;}
body.scheme1 #heroribbon {background-color: #e71a49;}
body.scheme1 .color2text {color: #e71a49;}
body.scheme1 .herocontent ul li, body.scheme1 .module ul li {background-image: url(images/bullet1.gif);}

body.scheme2 .ribbon {background-color: #339dd9;}
body.scheme2 .color1text {color: #339dd9;}
body.scheme2 #nav .active, body.scheme2 .moduleribbon {background-color: #85c4e8;}
body.scheme2 #heroribbon {background-color: #be2036;}
body.scheme2 .color2text {color: #be2036;}
body.scheme2 .herocontent ul li, body.scheme2 .module ul li {background-image: url(images/bullet2.gif);}

body.scheme3 .ribbon {background-color: #00b1ac;}
body.scheme3 .color1text {color: #00b1ac;}
body.scheme3 #nav .active, body.scheme3 .moduleribbon {background-color: #66d0cd;}
body.scheme3 #heroribbon {background-color: #faa21b;}
body.scheme3 .color2text {color: #faa21b;}
body.scheme3 .herocontent ul li, body.scheme3 .module ul li {background-image: url(images/bullet3.gif);}

body.scheme4 .ribbon {background-color: #009a3d;}
body.scheme4 .color1text {color: #009a3d;}
body.scheme4 #nav .active, body.scheme4 .moduleribbon {background-color: #66c28b;}
body.scheme4 #heroribbon {background-color: #d11c60;}
body.scheme4 .color2text {color: #d11c60;}
body.scheme4 .herocontent ul li, body.scheme4 .module ul li {background-image: url(images/bullet4.gif);}

body.scheme5 .ribbon {background-color: #77b800;}
body.scheme5 .color1text {color: #77b800;}
body.scheme5 #nav .active, body.scheme5 .moduleribbon {background-color: #add466;}
body.scheme5 #heroribbon {background-color: #f37121;}
body.scheme5 .color2text {color: #f37121;}
body.scheme5 .herocontent ul li, body.scheme5 .module ul li {background-image: url(images/bullet5.gif);}


/*** CONTENT STYLES ***/

.researchitem {float: left; margin: 0 12px 0 0; border: 1px solid #ddd; width: 180px;}
.last {margin-right: 0;}
.researchitem img {display: block; width: 100%; height: 150px;}
.researchnumber {display: block; text-align: center; font-size: 48px; line-height: 58px;}
.researchnumber .smaller {font-size: 30px;}
.researchlabel {display: block; background: #85c4e8; color: #fff; text-align: center; line-height: 25px;}

.dmatotal {border: 1px solid #ddd; padding: 30px; text-align: center; margin-top: 10px;}

table {width: 100%;}
thead td {border-bottom: 1px solid #ddd;}
td {padding: 2px 10px;}

#contact-mail-page div.form-item {clear: both; padding-top: 3px;}
#contact-mail-page label {float: left; width: 160px; padding-right: 10px; text-align: right;}
#contact-mail-page .form-text {width: 450px;}
#contact-mail-page .form-textarea {width: 450px; height: 100px;}
#contact-mail-page #edit-copy-wrapper label {padding-left: 170px; width: auto; text-align: left; float: none;}
#contact-mail-page #edit-submit {margin: 10px 0 0 170px;}