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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent;}


*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html {height: 100%;}
body {background-image: url('../images/bg-wave.jpg'); background-repeat: repeat; height: 100%; font-family: "Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}
/*body.not-front {margin-top: -26px;}*/
#top {background-image: url('../images/bg-top.jpg'); background-repeat: repeat; height: 155px; width: 100%;}
#wrapper {/*margin-top: -26px; position: relative;*/}
#sidebar {float: right; background-color: #666; color: #fff;}

#header {width: 1000px; background: url('../images/header-full-bg.png') repeat-x; height: 155px; margin: auto;}
#headerElements {height: 130px;}
#topNav {width: 1000px; height: 25px; text-align: left;  position: absolute; top: 134px; left: 50%; margin-left: -500px; z-index: 200;}
#topNav form {float: right; margin: -4px 10px 0 0; height: 25px;}
.container-inline {height: 25px; margin: 0; padding: 0;}
#logo {padding-top: 20px; padding-left: 7px; float: left; position: relative;}
#headerTools {padding: 5px; margin-top: 40px; float: right; margin-right: 10px; position: relative;}

#search-block-form input.form-submit {cursor: pointer; text-indent: -9999px; border: none; background: url('../images/search_button.png') no-repeat; vertical-align: top;}
.form-submit {margin-top: 2px; margin-left: -5px; /*width: 21px; height: 21px;*/}

/*#content {box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; -webkit-box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; width: 970px; min-height: 850px; background-color: #fff; padding: 15px; overflow: auto;}*/
#content {box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; -webkit-box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; width: 1000px; background-color: #fff; overflow: hidden; margin: auto; position: relative;}
#indexContent {box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; -webkit-box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; width: 1000px; background-color: #fff; overflow: auto; padding: 20px; margin: auto;}
#yahara {padding: 15px; background-color: #00f; width: 100%;}


#footer {box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; -webkit-box-shadow: -3px 0 5px -1px #999, 3px 0 5px -1px #999; width: 1000px; background-color: #333; padding: 50px 20px 20px 20px; margin: auto; color: #C8C5BB; font-size: 12px; overflow:auto;}
#footer p {margin-bottom: 20px;}
#footer a {color: #F7F5E8; text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#footer #col1 {width: 280px; float: left; margin-left: 50px; font-size: 14px;}
#footer #col2 {width: 110px; float: left;}
#footer #col3 {width: 50px; float: left; text-align: center; margin-top: 5px;}
#footer #col4 {width: 270px; padding-left: 70px; float: left;}
#footer #col5 {width: 180px; float: left; text-align: center; margin-top: 10px;}
#footer #copyright {text-align: center; width: 100%; clear: both;}

.slider-wrapper {width: 600px; height: 506px; float: left;}
.indexResearch {width: 309px; float: left;}
#indexLeft {width: 620px; float: left;}
#indexRight {width: 338px; float: left;}
.indexWatershed {width: 338px; background-color: #333; color: #F7F5E8; height: 805px; line-height: 20px;}
.indexWatershed p {font-size: 13px; padding: 0 20px; margin-bottom: 20px;}
.sideBoxText {font-size: 13px; padding: 20px;}
.sideBox {width: 338px; background-color: #DEDCD6;}
.sideBox h1 {padding: 10px 0 0 25px; border-bottom: 1px solid #000; with: 100%; font-size: 18px; text-transform: uppercase; font-weight: normal;}
.sideBox iframe {margin: auto;}
.sideBox a, #newsContent a {color: #B70101; text-decoration: none;}
.sideBox a:hover, #newsContent a:hover {text-decoration: underline;}

.videoBox {width: 300px; background-color: #DEDCD6; margin: auto; margin-top: 20px;}
.videoBox h1 {padding: 10px 0 0 25px; border-bottom: 1px solid #000; with: 100%; font-size: 18px; text-transform: uppercase; font-weight: normal;}
.videoBox iframe {margin: auto;}
.videoBox a, #newsContent a {color: #B70101; text-decoration: none;}
.videoBox a:hover, #newsContent a:hover {text-decoration: underline;}


#pageLeft {width: 340px; float: left; margin-top: 20px; border-top: 70px solid #6e6a5b;}
#pageRight {width: 660px; float: left; margin-top: 20px; border-top: 70px solid #6e6a5b; padding: 0 40px 0 20px; font-size: 13px;}
#pageLeft h6 {margin: auto; width: 300px; background-color: #7296AF; color: #fff; height: 100%; font-weight: normal; font-size: 26px; line-height: 70px; text-align: center; margin-top: -70px; text-transform: uppercase;}
#pageRight h6 {margin-top: -70px; text-transform: lowercase;height: 100%; color: #fff; font-weight: normal; font-size: 26px; line-height: 70px; margin-top: -70px; text-transform: lowercase; margin-bottom: 20px;}
#pageRight p, #pageRight ul, #pageRight ol {margin-bottom: 20px;}
#pageRight ul li, #pageRight ol li {margin-left: 40px;}
#pageRight li {margin-bottom: 10px;}
#pageRight a {color: #b70101; text-decoration: none;}
#pageRight a:hover {text-decoration: underline;}
#pageRight h2, #pageRight h1 {font-size: 20px; margin-bottom: 20px;}


.bioPhoto {width: 150px; float: left; margin-right: 20px;}
.bioDetails {width: 430px; float: left;}
.ra {color: #600;}

.person {width: 185px; background-color: #dedcd6; text-align: center; float: left; margin-right: 15px; margin-bottom: 20px; height: 340px; padding: 9px; font-size: 13px; line-height: 22px;}



#pageLeft ul.menu {width: 300px; margin-left: 12px;}
#pageLeft ul.menu li {width: 300px; list-style: none; margin-bottom: 5px;}
#pageLeft ul.menu li a {text-decoration: none; background-color: #6E6A5B; color: #F7F5E8; text-align: center; width: 300px; display: block; line-height: 30px; text-transform: lowercase;}
#pageLeft ul.menu li a:hover {background-color: #600;}

.newsBanner {width: 100%; background-color: #6E6A5B; font-weight: normal; font-size: 26px; height: 71px; text-transform: uppercase; margin-top: 20px;}
.newsHead {margin: 0; width: 300px; background-color: #7296AF; color: #fff; font-weight: normal; font-size: 26px; line-height: 70px; margin-top: -90px; text-transform: uppercase;}


#newsContent {width: 1000px; margin-top: 20px; border-top: 70px solid #6e6a5b; padding: 20px; font-size: 13px; padding-left: 45px; padding-right: 50px;}
#pageContent {width: 1000px; margin-top: 20px; padding: 20px; font-size: 13px;}

#newsContent ul {margin-left: 30px;}

#newsContent p, #pageContent p {margin-bottom: 20px;}
#newsContent h1, #pageContent h1 {font-size: 36px; font-weight: normal; margin-bottom: 20px;}
#newsContent h6 {margin: 0; width: 300px; background-color: #7296AF; color: #fff; height: 100%; font-weight: normal; font-size: 26px; line-height: 70px; text-align: center; margin-top: -90px; margin-left: -25px; text-transform: uppercase;}
#newsDate {font-size: 12px; color: #600;}
#newsHeadline {font-size: 36px; color: #333;}
#newsContent h3 {color: #600; text-transform: uppercase; font-size: 14px;}

.mainHead {width: 300px; float: left; padding: 20px;}
.mainHead h1 {line-height: 34px;}
.mainPhoto {width: 600px; float: left;}
.readmore {font-size: 10px;}
#newsIndexLeft {width: 280px; float: left; padding: 20px 20px 0 0; margin-top: -23px; font-size: 12px; }
#newsIndexLeft h2 {font-size: 18px; text-align: center; margin-bottom: 20px;}
#newsIndexRight {width: 615px; float: left; border-left: 1px solid #000;  margin-top: -23px; padding: 20px 0 0 20px; font-size: 13px;}
.newsTitle {font-size: 14px; font-weight: bold;}
.newsPhoto {width: 150px; float: left; margin-right: 20px; margin-bottom: 20px;}
.newsDetails {width: 420px; float: left; margin-bottom: 20px;}

.back {font-size: 10px;}

#a {width: 71px; height: 71px; background: url('../images/A.png') 0 0 no-repeat; float: left; margin-right: 2px; margin-bottom: 20px; margin-top: 5px;}
#i {width: 71px; height: 71px; background: url('../images/I.png') 0 0 no-repeat; float: left; margin-right: 2px; margin-bottom: 20px; margin-top: 5px;}
#c {width: 71px; height: 71px; background: url('../images/C.png') 0 0 no-repeat; float: left; margin-right: 2px; margin-bottom: 20px; margin-top: 5px;}
#n {width: 71px; height: 71px; background: url('../images/N.png') 0 0 no-repeat; float: left; margin-bottom: 20px; margin-top: 5px;}
#a:hover, #i:hover, #c:hover, #n:hover {background-position: 0 -71px;}
#a a, #i a, #c a, #n a {display: block; width: 100%; height: 100%;}

#readBar {width: 235px; background-color: #FF1D25; text-align: center; float: left; margin: 20px 10px 20px 15px;}
#landBar {width: 235px; background-color: #8CC63F; text-align: center; float: left; margin: 20px 10px 20px 0;}
#waterBar {width: 235px; background-color: #0071BC; text-align: center; float: left; margin: 20px 10px 20px 0;}
#climateBar {width: 235px; background-color: #FF931E; text-align: center; float: left;  margin: 20px 10px 20px 0;}

#readBar a, #landBar a, #waterBar a, #climateBar a {display: block; width: 100%; height: 100%; color: #000; text-decoration: none;}
#readBar:hover, #landBar:hover, #waterBar:hover, #climateBar:hover {background-color: #fff;}



#experts {width: 300px; margin: auto; background-color: #DEDCD6; margin-top: 20px; overflow: auto;}
#experts h5 {border-bottom: 1px solid #000; width: 100%; font-size: 20px; padding: 15px 0 10px 30px;}
.expertPhoto {width: 120px; margin: 20px; float: left;}
.expertText {width: 120px; float: left; margin-top: 20px; font-size: 12px; margin-bottom: 20px;}
.expertText a {color: #b70101; text-decoration: none;}
.expertText a:hover {text-decoration: underline;}

.explore {width: 310px; text-align: center; color: #fff; background-color: #7296AF; margin-left: -20px; font-size: 14px;}




/* menu */
/*reset */
ul.nice-menu,
ul.nice-menu a,
ul.nice-menu ul,
ul.nice-menu li,
ul.nice-menu-down,
ul.nice-menu-down ul,
ul.nice-menu-down li,
ul.nice-menu li.menuparent,
ul.nice-menu li.menuparent a,
ul.nice-menu li.menuparent a:hover,
ul.nice-menu li.menuparent:hover,
ul.nice-menu li.menuparent:hover a{
border: 0;
padding:0;
margin: 0;
background-color: transparent;
background-image: none;
}


ul.nice-menu {clear: both; float: left; margin-top: -4px; text-transform: uppercase;}
ul.nice-menu li {padding: 0; margin: 0; height: 25px;}

/*ul.nice-menu li {display: block;}*/
ul.nice-menu li a:hover {color: #000;}
ul.nice-menu li:hover, ul.nice-menu li.menuparent:hover {background-color: #C8C5BB;}
ul.nice-menu li:hover >a, ul.nice-menu li.menuparent:hover > a {color: #000;}
ul.nice-menu li.menuparent ul {background-color: #DEDCD6; padding: 20px 20px 20px 0; border-bottom: 5px solid #b70101; width: 260px;}
ul.nice-menu li.menuparent ul li {margin-bottom: 10px; border-bottom: 1px solid #000; width: 230px; height: 40px;}

ul.nice-menu li.menuparent ul a {color: #6E6A5B; text-transform: lowercase; width: 230px;}
ul.nice-menu a {text-decoration: none; color: #fff; display: block; width: 100%; height: 100%;}
ul.nice-menu li, ul.nice-menu li:hover, ul.nice-menu li.menuparent, ul.nice-menu li.menuparent:hover {color:#fff; padding: 1px 20px; font-size: 14px;}

ul.nice-menu li.menuparent ul li a:hover {color: #B70101;}
ul.nice-menu li.menuparent ul li:hover {background-color: #DEDCD6;}
ul.nice-menu li.menuparent ul li {margin-left: 20px; padding: 5px; text-indent: 0;}

#yaharaHead {font-size: 30px; color: #fff; text-transform: uppercase; text-align: left; margin-left: 20px; margin-top: 20px;}
#yaharaHead a {color: #fff; text-decoration: none;}
#yaharaHead a:hover {text-decoration: underline;}

#lightboxFrame {margin-top: 20px;}
#frameContainer, #bottomNavClose {background-color: #CACCBD;}



.yahara {background-color: #01202D; overflow: hidden;}
.yahara h1, .yahara h2 {text-align: center; /*color: #7296AF;*/ color: #fff;}
.yahara h1 {font-size: 28px; font-weight: normal;}

#yaharaIndexLeft, #scenarioLeft {width: 200px; float: left; padding: 30px;}
#yaharaIndexLeft p, #yaharaLeft p, #scenarioLeft p {text-align: center;}
#yaharaIndexLeft ul.menu, #yaharaLeft ul.menu, #scenarioLeft ul.menu {/*color: #0071BC;*/ color: #fff; margin-left: 20px; text-transform: uppercase; font-size: 14px;}
#scenarioLeft ul.menu {margin-left: 100px; width: 97px;}

#yaharaIndexLeft ul.menu a, #yaharaLeft ul.menu a, #scenarioLeft ul.menu a {color: #FF931E; text-decoration: none;}
#yaharaIndexLeft ul.menu a:hover, #yaharaLeft ul.menu a:hover, #scenarioLeft ul.menu a:hover {text-decoration: underline;}
#yaharaIndexLeft ul.menu li, #yaharaLeft ul.menu li, #scenarioLeft ul.menu li {margin-bottom: 10px;}

#yaharaIndexRight {width: 755px; float: left; margin-bottom: 20px;}

#yaharaLeft, #scenarioLeft {width: 200px; float: left; padding: 20px;}
#yaharaRight, #scenarioRight {width: 700px; float: left; padding: 20px; /*color: #7296AF;*/ color: #fff; font-size: 14px;}
#yaharaRight p, #scenarioRight p, #scenarioRightInside p {margin-bottom: 30px;}
#yaharaRight a, #scenarioRight a, #scenarioRightInside a {color: #FF931E; text-decoration: none;}
#yaharaRight a:hover, #scenarioRight a:hover, #scenarioRightInside a:hover {text-decoration: underline;}
#yaharaRight h2, #scenarioRight h2, #scenarioRightInside h2 {text-align: left; font-size: 18px; margin-bottom: 25px; color: #7296AF;}
#yaharaRight ul, #scenarioRight ul, #scenarioRightInside ul {margin-left: 30px;}
#scenarioLeft {width: 330px;}
#scenarioRight {width: 640px;}
#scenarioRightInside {width: 658px; float: left; margin: 20px 0; background-color: #013654; /*color: #7296AF;*/ color: #fff; padding: 20px; font-size: 14px; margin-left: 12px;}
.topImg {margin-left: -20px;}
#scenarioRight h3 {font-size: 18px; font-weight: bold; margin-bottom: 30px; background-color: #7296AF; width: 100%; padding: 5px;}

.yaharaVideoBox {width: 290px; background-color: #013655; margin: auto; margin-top: 70px;}
.yaharaVideoBox a {color: #FF931E; text-decoration: none;}
.yaharaVideoBox a:hover {text-decoration: underline;}

#connected {width: 755px; height: 240px; overflow: hidden; background: url('../images/yahara-connected.jpg') 0 0 no-repeat; margin-bottom: 20px;}
#abandonment {width: 755px; height: 240px; overflow: hidden; background: url('../images/yahara-abandonment.jpg') 0 0 no-repeat; margin-bottom: 20px;}
#accelerated {width: 755px; height: 240px; overflow: hidden; background: url('../images/yahara-accelerated.jpg') 0 0 no-repeat; margin-bottom: 20px;}
#nested {width: 755px; height: 240px; overflow: hidden; background: url('../images/yahara-nested.jpg') 0 0 no-repeat; margin-bottom: 20px;}

#connected a, #abandonment a, #accelerated a, #nested a {display: block; width: 100%; height: 100%;}
#connected:hover, #abandonment:hover, #accelerated:hover, #nested:hover {background-position: 0 -240px;}


#biblio-header {margin: 20px;}
#biblio-header a, .biblio-category-section a, .biblio-title, #biblio-node a, a.username  {color: #B70101; text-decoration: none;}
#biblio-header a:hover, .biblio-category-section a:hover, .biblio-title:hover, .-biblio-node a:hover, a.username:hover {text-decoration: underline;}
.biblio-title {font-weight: bold; text-decoration: none;}
.node-biblio {margin: 20px;}
#biblio-node table tr td {padding: 5px;}
#biblio-node tr.even {background-color: #fff;}
.meta .submitted {margin-bottom; 10px;}
#biblio-node {margin-top: 10px;}

.biblio-category-section {margin: 20px;}

/*************************************************************/
/*added 2015-10-01 for infographics*/
#bg {position: relative; background-image: url('../images/1.png'); background-repeat: no-repeat; width: 600px; height: 1800px;}
*[id^='o-'] {position: absolute; width: 120px; height: 120px; background-position: 0 0;}
*[id^='b-'] {position: absolute; width: 120px; height: 120px; background-position: 0 0;}
                                
*[id^='b-'] a, *[id^='o-'] a  {display: block; width: 100%; height: 100%;}
                                
#o-1:hover, #o-2:hover, #o-3:hover, #o-4:hover, #o-5:hover, #o-6:hover, #b-1:hover, #b-2:hover, #b-3:hover, #b-4:hover, #b-5:hover, #b-6:hover {background-position: 0 -120px;}
#b-1 {background: url('../images/icons_blue01.png') no-repeat; top: 412px; left: -14px;}
#b-2 {background: url('../images/icons_blue02.png') no-repeat; top: 555px; left: 10px;}
#b-3 {background: url('../images/icons_blue03.png') no-repeat; top: 676px; left: 50px;}
#b-4 {background: url('../images/icons_blue04.png') no-repeat; top: 775px; left: 95px;}
#b-5 {background: url('../images/icons_blue05.png') no-repeat; top: 867px; left: 1px;}
#b-6 {background: url('../images/icons_blue06.png') no-repeat; top: 968px; left: 104px;}
#o-1 {background: url('../images/icons_orange01.png') no-repeat; top: 268px; left: 487px;}
#o-2 {background: url('../images/icons_orange02.png') no-repeat; top: 415px; left: 488px;}
#o-3 {background: url('../images/icons_orange03.png') no-repeat; top: 550px; left: 463px;}
#o-4 {background: url('../images/icons_orange04.png') no-repeat; top: 678px; left: 432px;}
#o-5 {background: url('../images/icons_orange05.png') no-repeat; top: 818px; left: 471px;}
#o-6 {background: url('../images/icons_orange06.png') no-repeat; top: 944px; left: 379px;}



/**********************************************************************************************************************************************************************************/
/* chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {

ul.nice-menu li {height: 25px;}
ul.nice-menu {margin-top: 0; height:25px;}
ul.nice-menu li, ul.nice-menu li.menuparent {padding-top: 4px;}
ul.nice-menu li:hover, ul.nice-menu li.menuparent:hover {padding-top: 4px;}
#topNav {width: 1000px; height: 25px; text-align: left;  position: absolute; top: 130px; left: 50%; margin-left: -500px;}
.form-text, .form-submit {margin-top: 5px;}
.form-submit {margin-left: -6px;}
#top {position: relative;}
}