/********************************************************************************************** International Nitrogen Initiative Steve Johnson / ontality.net /s4parke@gmail.com September 2010 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Header 2.3 Navigation 2.4 Content 2.4.1 Home page 2.4.2 Interior pages 2.5 Sidebar 2.6 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section {display:block;} nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select {vertical-align:middle;} /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, nav ul:after, #home-map:after, #home-promo-link ul:after, #home-news-events ol:after, #partners ul:after, #stream:after, #copyright:after, .tools:after, .content-inside:after, .what-new-report-why:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } /* Hides from IE-mac \*/ .clearfix { display: block; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; background: #b6e5f2 url(/_ui/images/bg-body.png) repeat-x center top; color: #333 } table { font-size:inherit; font:100%; } select, input, textarea { font:99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } body, select, input, textarea {color:#333;} h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } html { -webkit-font-smoothing: antialiased; } a:hover, a:active { outline: none; } a, a:active, a:visited {color:#607890;} a:hover { color:#036; text-decoration: underline !important } ul {margin-left:30px;} ol { margin-left:30px; list-style-type: decimal; } small {font-size:85%;} strong, th { font-weight: bold; } td, td img {vertical-align:top;} sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } label, input[type=button], input[type=submit], button { cursor: pointer; } a:link { -webkit-tap-highlight-color: #FF5E99; } html { overflow-y: scroll; } button { width: auto; overflow: visible; } .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } .hidden { display:none; visibility:hidden; } .visuallyhidden, ol#accessibility-nav { position:absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } .invisible { visibility: hidden; } #nav-global, #nav-secondary, .content-inside h2, .what-new-report-why .regular-box h3, #reports h3, #footer footer h3, #home-news-events h3, #partners h3,.content-inside hgroup h3,#secondary h4, #home-promo-link h3, #home-news-events h4 { font-weight: normal; font-style: normal; line-height:normal; font-family: 'TradeGothicLTCondEighteenRegu', sans-serif; font-size-adjust: 0.52; } #home-map h2, #home-map h3 { font-family: 'TradeGothicLTRegular', sans-serif; margin-bottom: 18px;} #home-promo-link h3, #home-news-events h4 { font-family: 'TradeGothicLTRegular', sans-serif; } .ltBlueBgBd { background-color: #e2ebfb; border: 3px solid #91baff; } .dkBlueBgBd { background-color: rgba(74,125,159,0.9); border: 3px solid #4891c2; } .white25BgBd { background-color: rgba(255,255,255,0.25); -pie-background: rgba(255,255,255,0.25); } .rad4 { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .rad8 { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .hiPad { padding: 20px !important; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ .wrap, #footer footer { width: 960px; position: relative; margin: 0 auto; text-align: left; font-size: 1em; } /* 2.2 Header -----------------------------------------------------------------------------------------------*/ #header { height: 194px } #header h1 a { display: block; width: 621px; height: 168px; background: url(/_ui/images/logo.png) no-repeat; position: relative; left: -15px; top: 8px } /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ #nav-global { position: relative; top: -34px; left: 117px } #nav-global ul li, #nav-secondary li { display: inline-block; font-size: 21px; text-transform: uppercase } #nav-global a, #nav-secondary a { display: block; float: left; height: 60px; padding-left: 9px; color: #333; text-decoration: none; background: url(/_ui/images/sprite.png) no-repeat -600px -600px; margin-right: 15px } #nav-global a strong, #nav-secondary a strong { display: block; height: 40px; padding: 20px 15px 0 6px; font-weight: normal; cursor: pointer } #nav-global a strong {background: url(/_ui/images/sprite.png) no-repeat -600px -600px; } #nav-secondary a strong {background: url(/_ui/images/sprite.png) no-repeat -600px -600px; } #nav-global a:hover{} #nav-global .active a { background-position: left -217px; color: #fff; text-decoration: none !important } #nav-global a:hover strong {} #nav-global .active a strong { background-position: right -87px } #nav-secondary a { height: 70px; color: #fff } #nav-secondary a strong { height: 45px; padding-top: 25px } #nav-secondary ul { height: 70px; margin: -5px 0 -15px 0; padding: 0 } #nav-secondary { position: relative; z-index: 10 } #nav-secondary li a:hover strong {} #nav-secondary .active a strong { background-position: right -147px !important; font-weight: normal } #nav-secondary a:hover {} #nav-secondary .active a { background-position: left -277px; text-decoration: none !Important } /* 2.4 Content -----------------------------------------------------------------------------------------------*/ #content { padding: 10px; background: #fff url(/_ui/images/bg-content.png) repeat-x; margin-top: 15px } #content .content-inside { background: #fff; padding: 27px; font-size: 14px; } /* 2.4.1 Home page -----------------------------------------------------------------------------------------------*/ .home #content { margin-top: 30px; background: none; padding: 0 } #home-map { height: 300px; margin-bottom: 20px; padding: 40px 0 20px } #home-map .map { width: 620px; float: right; margin-right: 10px } #home-map .teaser { float: left; width: 290px; } #home-map .teaser h2 { color: #fff; font-weight: normal; font-size: 24px;} #home-map .teaser h3 { color: #fff; font-weight: normal; font-size: 20px; padding:20px 20px 5px;} #home-map .teaser h3 { background: url(/_ui/images/img-more-arrow-white.png) no-repeat center right;} #home-map .teaser img { margin-left: -2px } #home-map .map-desc {display: none; padding: 20px 20px 15px; font-size: 17px; text-transform: none; width: 250px; color: #fff; line-height: 19px; } #home-map .map-desc p { padding-bottom: 10px} #home-map .map-desc .latin { color: #bdeaa4 } #home-map .map-desc a, a:link, a:visited { color: #a5d8fe } #home-promo-link { height: 157px; margin-bottom: 20px } #zhome-promo-link { height: 157px; margin-bottom: 20px; margin-right: 123px; } #home-promo-link li { width: 257px; height: 94px; list-style: none; float: left; margin-right: 40px; padding: 25px 15px 0 15px; position: relative; } #zhome-promo-link li { width: 257px; height: 94px; list-style: none; float: left; margin-right: 80px; padding: 25px 15px 0 15px; position: relative; } #home-promo-link ul { list-style-type: none; margin: 0; padding: 15px 0 0 } #home-promo-link li.last, #home-promo-link li:last-child {margin-right: 0;} #home-promo-link img { float: left; margin-right: 10px } #home-promo-link h3 { float: left; font-weight: normal; color: #333; width: 160px; font-size: 17px } #home-promo-link h3 span { color: #2371a3 } #home-promo-link a.go { width: 40px; height: 35px; background: url(/_ui/images/sprite.png) no-repeat -208px 0; position: absolute; right: 15px; bottom: 15px } #home-news-events, #home-news-events h3, #partners h3 { color: #333; font-size: 21px; font-weight: normal; margin-bottom: 20px } #home-news-events ol, #partners ul { margin: 0; padding: 0; list-style-type: none } .home #home-news-events ol { padding-left: 35px } #home-news-events li { background: url(/_ui/images/sprite.png) no-repeat -540px -458px; padding-bottom: 22px; padding-left: 70px; font-size: 21px; padding-top: 16px } #home-news-events li h4 a { color: #0070c4; text-decoration: none } #home-news-events li h4 { font-weight: normal } #partners { width: 920px; margin: 0 auto; margin-bottom: 50px } #partners { padding-bottom: 60px } #partners li { display: inline-block; margin: 0 15px } #partners .last { margin: 0 } #partners li a { background: url(/_ui/images/sprite.png) no-repeat; display: block; height: 68px;} #partners .packard a { width: 174px; background-position: -427px -933px;} #partners .igbp a {width: 193px; background-position: -409px -1066px;} #partners .scope a {width: 133px; background-position: -467px -1213px;} #partners .unep a {width: 60px; background-position: -536px -1360px;} #partners .columbia a {width: 215px; background-position: -385px -1518px;} /* 2.4.2 Interior pages -----------------------------------------------------------------------------------------------*/ .content-inside h2 { font-size: 36px; font-weight: normal; color: #0054a6; background: url(/_ui/images/bg-dots.png) no-repeat center bottom; padding-bottom: 15px; margin-bottom: 25px; line-height: normal } .tools { margin: 0; margin-left: -20px; float: right; margin-right: 2px } .tools li { display: block; float: left; width: 16px; height: 20px; margin-left: 20px } .tools li a { background: url(/_ui/images/sprite.png) no-repeat; display: block; height: 20px } .tools .email a { background-position: left top } .tools .twitter a { background-position: -72px top } .tools .print a { background-position: -36px top } .tools .fb a { background-position: -108px top } .tools .like a { background-position: -141px top; width: 47px } .tools .like { width: 47px } .content-inside hgroup { display: block; padding-bottom: 25px } .content-inside hgroup h3 { font-size: 30px; color: #333; font-weight: normal; padding: 0; background: none; line-height: normal } #primary-detail p { padding-bottom: 20px; font-size: 14px; line-height: 20px } #primary-detail p a { color: #333 } #primary-detail .date { text-transform: uppercase; color: #acacac; padding-bottom: 40px } #primary-detail .date strong, #primary-detail .date time { color: #707070; font-weight: normal } #primary { clear: both; width: 550px; float: left } .news-list { margin: 0; padding: 0; list-style-type: none } .news-list li { margin-bottom: 25px; background: url(/_ui/images/sprite.png) no-repeat -553px -469px } .news-list li.news { background-position: -570px -805px !important } .news-list article { border-bottom: 1px dotted #ceb6bc; width: 485px; margin-left: 50px; padding-bottom: 25px } .news-list article p { font-size: 1.1em; line-height: 1.4em; margin-top: 15px } .news-list article p.date { margin: 0; color: #8d8d8d; text-transform: uppercase; font-size: 12px } .news-list article h3 { font-size: 20px; padding-top: 3px; } .what-new-report-why { clear: both; padding-top: 20px; margin-bottom: 50px } .what-new-report-why section { float: left; width: 257px; margin-right: 35px } .what-new-report-why .regular-box h3, #reports h3 { font-size: 24px; font-weight: normal; color: #333; background: #fdfcea; padding: 8px 10px; line-height: normal; margin-bottom: 20px } #reports { width: 286px; margin-left: 10px; margin-top: -32px } #reports h3 { background: none; padding: 0; color: #636363 } #reports li { padding-bottom: 10px; padding-left: 20px; background: url(/_ui/images/sprite.png) no-repeat -31px -279px } #reports li a { color: #132eb7 } #reports .blue-box-inside { height: 200px } #why-global-n { margin: 0; float: right } #why-global-n img { float: right; padding-top: 10px; margin-left: 10px } #why-global-n p a { color: #132eb7; font-weight: bold } #why-global-n p { line-height: 25px } #whats-new ul, #reports ul { margin: 0; padding: 0; list-style-type: none } #whats-new li { padding-bottom: 15px; padding-left: 25px; background: url(/_ui/images/sprite.png) no-repeat -584px -350px } #framework h2 { color: #333; font-size: 30px } #framework figure { float: left; margin-right: 50px } #framework h3 { color: #025d99; font-size: 22px; margin-bottom: 30px } #framework ul { margin: 0; padding: 0; list-style-type: none } #framework li { padding-bottom: 15px } #framework h4 a { font-size: 16px; text-decoration: none; color: #333 } .bodytext {} .bodytext h2 { color: #333; font-size: 30px } .bodytext figure { float: left; margin-right: 50px } .bodytext h3 { color: #025d99; font-size: 22px; font-weight:normal; margin-top: 24px; margin-bottom: 15x; } .bodytext ul { margin: 0; padding: 0; list-style-type: none } .bodytext li { padding-bottom: 15px } .bodytext h4 a { font-size: 16px; text-decoration: none; color: #333 } /* 2.5 Sidebar -----------------------------------------------------------------------------------------------*/ #secondary { width: 286px; float: right } .blue-box, .green-box { width: 230px; padding: 4px 25px 20px 25px; margin-top: 20px; padding-top:16px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px } .blue-box { background: #f3f6fc; border: 3px solid #e3edfd } .green-box { background: #eefdf1; border: 3px solid #d4fede } #secondary ul, #secondary ol { margin: 0; padding: 0; list-style-type: none } #secondary h4 { font-size: 30px; font-weight: normal; color: #707070; margin-bottom: 10px } #timeline h4 a { color: #2f9502; text-decoration: none } #timeline li { background: url(/_ui/images/sprite.png) no-repeat left -347px; padding-left: 15px; padding-bottom: 15px; font-size: 13px; line-height: 18px } #timeline li .date { color: #b7b7b7; padding-top: 3px } #timeline li a { color: #707070 } #subscribe li { background: url(/_ui/images/sprite.png) no-repeat -32px -220px; padding-left: 20px; padding-bottom: 15px; font-size: 18px } #subscribe li a { color: #2e3192; text-decoration: none } /* 2.6 Footer -----------------------------------------------------------------------------------------------*/ #footer { margin-top: 33px; background: #25190f url(/_ui/images/bg-footer.png) repeat-x center top } #footer footer { padding-top: 40px } #stream { height: 300px; margin-bottom: 15px } #stream div { float: left; width: 250px; padding-left: 55px } #stream h3 { color: #fff; font-size: 18px; text-transform: uppercase; margin-bottom: 15px; font-weight: normal; padding-left: 32px; background: url(/_ui/images/sprite.png) no-repeat; padding-bottom: 5px } #stream ol { margin: 0; padding: 0; list-style-type: none } #stream li { padding-bottom: 15px; color: #f8ffb0; font-size: 14px } #stream h4 { font-weight: normal } #stream h4 a, #stream .recent-tweets li a { color: #273f04; text-decoration: none } #stream .ini-news h3 { background-position: left -60px } #stream .recent-tweets h3 { background-position: -322px -34px; padding-left: 40px } #stream .recent-tweets li { color: #273f04 } #stream .recent-tweets li .date { color: #f8ffb0 } #stream .recent-tweets li a { text-decoration: underline } #stream .ini-news li { background: url(/_ui/images/sprite.png) no-repeat -593px -221px; padding-left: 18px } #stream .parter-news h3 { background-position: -328px top } #copyright { padding-bottom: 40px } .members-login, #copyright p { float: left; width: 40%; color: #c9b6a6; font-size: 12px } #copyright p { float: right; text-align: right } #copyright a { color: #c9b6a6; text-decoration: none } .members-login { list-style-type: none; margin: 0; padding: 0} .members-login li { display: inline-block; margin-right: 15px; padding-left: 25px; zbackground: url(/_ui/images/sprite.png) no-repeat } .members-login li.members { background-position: -256px 0 } .members-login li.admin { background-position: -256px -20px } #home-map #places { position: absolute; left: 300px; height: 317px; width: 660px; -webkit-transition: opacity .5s ease; } .mapMark { position: absolute; width: 20px; height: 20px; cursor: pointer; opacity: 1; -webkit-transition: opacity .5s ease; z-index: 100; } .touch .mapMark { -webkit-transform: scale(1.5); } .mapMarkShape { /* Inner shape */ position: absolute; top: 5px; left: 5px; width: 23px; height: 29px; background: url(/_ui/images/img-map-point.png) no-repeat } .mapMarkGlow { /* Outer glow */ position: absolute; top: 9px; left: -9px; width: 40px; height: 40px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 6px solid #fff; border: 0px\9; /* IE8 and below */ *border: 0px; /* IE7 and below */ opacity: 0; -webkit-animation-name: 'blip'; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes 'blip' { 0% { -webkit-transform: scale(.1); opacity: 0; } 1% { -webkit-transform: scale(.1); opacity: .6; } 60% { -webkit-transform: scale(1); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 0; } } .northAmerica .mapMarkGlow { -webkit-animation-delay: .5s; } .latinAmerica .mapMarkGlow { -webkit-animation-delay: .9s; } .southAsia .mapMarkGlow { -webkit-animation-delay: .3s; }