html { font-family: "Average Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; color:#111111; line-height: 21px; }
.body { background: #eff1f0; /* background:#FFFFFF; */ }
a { color: #1e366b; }
/*
Main width-controller for your content. think ".container"
class as a holder for ".row" classes for a basic layout.
Default centered with margin 0 auto; style.
============================================================ CONTAINER ====
*/
.body-container { max-width: 980px; margin:0 auto; }
.ie6 .body-container, .ie7 .body-container, .ie8 .body-container { width: 980px; }
#banner, #logo { position:relative; }
.search-controls { position:absolute; top:60px; right:10px; z-index:1; width:305px; height:50px; }
.search-controls input { border:1px solid #FFFFFF; box-shadow: none; outline:none; padding:0 0 0 5px; height:26px; width:200px; color:#777777; border-radius:2px 0 0 2px; float:left; margin:0; }
.search-controls a.search { background:#399b61; height:26px; border:1px solid #399b61; border-left:none; width:95px; color:#FFFFFF; text-align:center; border-radius:0 2px 2px 0; display:block; float:left; margin:0; }
.search-controls a.search div { padding-top:5px; }
.search-controls a.search:hover { background:#399b61; }
.search-controls a.advanced { font-size:14px; color:#399b61; float:right; margin:14px 2px 0 0; }
.search-controls a.advanced:hover { color:#399b61; }
#logo { display:none; padding-top:10px; margin-left:18px; }
#logo .image { width:479px; height:89px; background:url('../img/main-logo.jpg?v=2.0') no-repeat; display: block; text-decoration: none; }
.btn-language { position:absolute; font-weight: bold; right:14px; top:26px; }
.btn-language:hover { color:#399B61; }
#top { }
#top ul { list-style:none; padding-bottom:4px; }
#top ul li { display:inline; padding-right:10px; }
#top ul li a { color:#888888; font-size:11px; font-family: "Average Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
#top ul li a.selected { color:#399b61; }
#top ul li a:hover { color:#399b61; }
.outer-container { background:#ffffff; border-bottom:1px solid #A7AAA7; } /* #b9bab9 */
.outer-container.space-top { border-top:10px solid #e7e7e7; }
.inner-contain { margin:0 20px; }
.nav-contain { padding:10px 0;}
#about { color:#333333; font-size: 19px; line-height:24px; font-family: 'Droid Sans', sans-serif; margin:20px 0; }
#about a { color:#399b61; text-decoration:none; }
#about a:hover { color:#666666; }
.latest-contain { padding:15px 10px 0 10px; }
.box .head { width:100%; background:#e3dede; }
.box .head .text { padding:8px 9px; font-size:18px; color:#FFFFFF; }
.box.items { }
.box.items .head .text { background:#1e366b; width:92px; }
.box.items ul { list-style: none; }
.box.items ul li { margin-top: 11px; height:100px; overflow:hidden; }
.box.items ul li a .pic { float:left; width:40%; padding-right:8px; }
.box.items ul li a .pic img { border-left: 4px solid #1e366b; }
.box.items ul li a .text { float:left; width:55%; }
.box.items ul li a .text .title { font-size:16px; color:#333333; }
.box.items ul li a .text .info { margin-top:5px; }
.box.items ul li a .text .info .date { font-size:14px; color:#5c5a5a; margin-bottom:3px; }
.box.items ul li a .text .info a { font-size:14px; color:#1e366b; }
.box.items ul li a:hover .pic img {
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
}
.box.items ul li a:hover .text .title { color:#999999; }
.box.items ul li a:hover .text .info .date { color:#999999; }
.box.items.pub .head .text { background:#399b61; width:92px; }
.box.items.news .head .text { width:73px; }
.box.items.events .head .text { width:52px; }
.box.items.pub ul li .pic img { border-left: 4px solid #399b61; }
.box.items.pub ul li .text .info a { color:#399b61; }
.box.items.pub ul li .text .info a:hover { color:#5c5a5a; }
.box.new ul li.no-pic .pic { float:left; width:10%; padding-right:4px; }
.box.new ul li.no-pic .text { float:left; width:86%; }
.social-contain { padding:15px 10px 0 10px; }
.related-contain { padding:15px; }
.box.twitter { }
.box.twitter .head .text { background:#1e366b; width:80px; }
.box.twitter .twitter-contain { clear:both; }
.box.twitter .twitter-contain .icon { float:left; width: 15%; margin:40px 0 0 10px; background:url(/img/tweet.png) no-repeat left center; height:33px; }
.box.twitter .twitter-contain .feed { float:left; width:75%; color:#4f4d4d; font-size:16px; margin:14px 10px; }
.box.twitter .twitter-contain .feed a { color:#1e366b; }
.box.twitter .twitter-contain .feed a:hover { color:#969292; }
.box.twitter .twitter-contain .feed span { color:#969292; }
.box.donor { }
.box.donor .head .text { background:#1E366B; width:170px; }
.box.donor .container { margin:20px 0; }
.box.connect { }
.box.connect .head .text { background:#399b61; width:162px; }
.box.connect .items { margin:10px 0; }
.box.connect .items a { font-size:12px; color:#333333; padding-left:33px; padding:8px 10px 8px 34px; margin:0 0 0 5px; display:block; width:53px; height: 22px; float:left; }
.box.connect .items a.facebook { background:url('../img/icons/ico-facebook.png') no-repeat; }
.box.connect .items a.twitter { background:url('../img/icons/ico-twitter.png') no-repeat; }
.box.connect .items a.tube { background:url('../img/icons/ico-youtube.png') no-repeat; }
.box.connect .items a.linkedin { background:url('../img/icons/ico-linkedin.png') no-repeat; }
.box.connect .items a.rss { background:url('../img/icons/ico-rss.png') no-repeat; }
.box.connect .items a.phone { background:url('../img/icons/ico-contact.png') no-repeat; }
.box.connect .items a:hover { color:#777777; }
.box.subscribe { }
.box.subscribe .head .text { background:#1e366b; width:157px; }
.box.subscribe a { font-size:15px; color:#333333; padding:6px 4px 6px 34px; margin:5px 5px 0 5px; display:block; height: 22px; }
.box.subscribe a.email { background:url('../img/icons/ico-email.png') no-repeat; margin-top:10px; }
.box.subscribe a.pub { background:url('../img/icons/ico-pub.png') no-repeat; }
.box.subscribe a:hover { color:#777777; }
.footer-container { background:#1e366b; }
.footer-container.space-top { margin-top:20px; padding: 20px 15px; color:#FFFFFF; }
.footer-container .top-links { margin-bottom:10px; }
.footer-container .cols { margin:0 5px; }
.footer-container .cols .head { font-size:15px; padding:4px 0; border-bottom:1px solid #FFFFFF; }
.footer-container .cols ul.items { list-style:none; margin-top:10px; }
.footer-container .cols ul.items li { margin:5px 0; }
.footer-container .cols ul.items li a { color:#FFFFFF; font-size:13px; }
.footer-container .cols ul.items li a:hover { color:#CCCCCC; }
.footer-container .footer-title { font-size:15px; margin:0 auto; text-align:center; }
.footer-container .footer-title.bottom { padding-top:7px; }
.footer-container .footer-title a { color:#FFFFFF; font-size:15px; }
.footer-container .footer-title a:hover { color:#777777; }
.footer-container ul.sites { list-style:none; margin:10px auto; width:80%; text-align:center; }
.footer-container ul.sites li { display:inline-block; margin-top:2px; }
.footer-container ul.sites li a { font-size:14px; color:#CCCCCC; }
.footer-container ul.sites li a:hover { color:#777777; }
.footer-container ul.sites.second li a { color:#FFFFFF; }
.content a { color:#3D9E4D; }
.content a:hover { color:#333333; }
.message { padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border:1px solid #EAD6B2; background:#F4EFD2; color:#AA803B; }
.message.error { border:1px solid #EED3D7; background: #F2DEDE; color:#B94A48; }
.message.good { border:1px solid #D6E9C6; background: #DFF0D8; color:#468847; }
.message.space { margin:30px 10px 10px 10px; }
.tweet { float:left width:auto; cursor: pointer; padding:4px 7px; text-transform: uppercase; background:#E3DEDE; color:#252424; }
.tweet.left { float:left; }
.tweet.right { float:right; }
.tweet.inline { float:none; display: inline-block; }
.tweet:hover { background: #1E366B; color:#FFFFFF; }
/*
Main grouping blocks. You can dump "n*100%"" width content to a
single ".row". (with the little help of .skip-float and manual
.user-float classes)
================================================================== ROW ====
*/
.row { width: 100%; }
*+html .row { margin:10px 0; }
/*
A basic transitions for immediate childs of ".row" classes. I added
transitions assuming your html layout keeps "col_*"" elements right
after ".row" classes. (col_*'s are immediate childs of .row's)
Delete this block to get rid of transitions.
(transitions are incompatible with some browsers.
("some browsers" usually refers to internet explorer :)
====================================================== ROW TRANSITIONS ====
*/
.row > * {
-webkit-transition : all 400ms ease-out;
-moz-transition : all 400ms ease-out;
-o-transition : all 400ms ease-out;
-ms-transition : all 400ms ease-out;
transition : all 400ms ease-out;
}
/*
Auto clearfix for all rows. Borrowed from HTML5BOILERPLATE.
====================================================== ROW TRANSITIONS ====
*/
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; }
/*
Column (col_*) and complement (col_*c) classes.
.col_0 class is not a must but i added it to
keep things organized. You can use it for
marginless 100% widths.
================================================ COLUMNS & COMPLEMENTS ====
*/
/* columns & complements (autogenerated styles) */
.col_0 {
width: 100%;
margin-bottom: 10px;
display: block;
}
.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c,
.col_5, .col_5c,
.col_6, .col_6c,
.col_7, .col_7c,
.col_8, .col_8c,
.col_9, .col_9c,
.col_10, .col_10c,
.col_11, .col_11c,
.col_12, .col_12c,
.col_13, .col_13c,
.col_14, .col_14c,
.col_15, .col_15c,
.col_16, .col_16c {
margin-left : 0.5%;
margin-right : 0.5%;
margin-bottom : 10px;
float : left;
display : block;
}
/* columns (autogenerated styles) */
.col_1 { width: 99%; }
.col_2 { width: 49%; }
.col_3 { width: 32.3333333333%; }
.col_4 { width: 24%; }
.col_5 { width: 19%; }
.col_6 { width: 15.6666666667%; }
.col_7 { width: 13.2857142857%; }
.col_8 { width: 11.5%; }
.col_9 { width: 10.1111111111%; }
.col_10 { width: 9%; }
.col_11 { width: 8.0909090909%; }
.col_12 { width: 7.33333333333%; }
.col_13 { width: 6.6923076923%; }
.col_14 { width: 6.14285714286%; }
.col_15 { width: 5.66666666666%; }
.col_16 { width: 5.25%; }
/* IE7 fixed for 980px */
*+html .col_13 { width: 6.6%; }
*+html .col_12 { width: 7.2%; }
*+html .col_9 { width: 1em; }
*+html .col_8 { width: 11.4%; }
*+html .col_3 { width: 32.2%; }
/* complements (autogenerated styles) */
.col_3c { width: 65.6666666667%; }
.col_4c { width: 74%; }
.col_5c { width: 79%; }
.col_6c { width: 82.3333333333%; }
.col_7c { width: 84.7142857143%; }
.col_8c { width: 86.5%; }
.col_9c { width: 87.8888888889%; }
.col_10c { width: 89%; }
.col_11c { width: 89.9090909091%; }
.col_12c { width: 90.6666666667%; }
.col_13c { width: 91.3076923077%; }
.col_14c { width: 91.8571428571%; }
.col_15c { width: 92.3333333333%; }
.col_16c { width: 92.75%; }
/*
100% width auto control for "img", "object" and
"embed" controls.
============================================ IMAGE FULL WIDTH CONTROLS ====
*/
img, object, embed { max-width: 100%; }
img { height: auto; }
figure img { max-width: 100%; }
/*
Use ".skip-float" class to start from brand new lines.
Clears left of current 100% group for new 100%
lines in same ".row" group.
@see webpage for details
=============================================== FLOATING PROBLEM FIXER ====
*/
.skip-float { clear: left; }
/*
CSS hack for responsive videos.
@see http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
@see http://webdesignerwall.com/tutorials/css-elastic-videos
========================================================= VIDEO HOLDER ====
*/
.video-holder {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display: block;
}
.video-holder iframe, .video-holder object, .video-holder embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}