﻿
@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #577184;
    margin: 0;
    padding: 0;
    color: #1b1b1b;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #0099ff;
    text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #2880bb;
}
a:hover, a:active, a:focus { 
    color: #0099ff;
    text-decoration: underline;
}
#container {
    background-color: #577184;
}
#container_content {
    width: 958px;
    background: #fff url(/csr/images/container_bkgd.gif) repeat-x 0px 25px;
    margin: 0 auto; 
    border: 1px solid #bbb7b6;
}
#container_content_bkgd_wrap {
    zoom:1; /*haslayout*/  
}
#header {
    background-color: #577184;
}
#header #header_content {
    width: 960px;
    margin: 0 auto;
    position: relative;
    height: 96px;
}
#header .logo {
margin: 0;
width: 960px;
height: 96px;
background: transparent url(/csr/images/Better-Business-for-Children-UNICEF.JPG) 0 0 no-repeat;
}
#header .csrlogo {
width: 480px;
height: 96px;
display: inline-block;
text-indent: -9999px;
}
#header .uniceflogo {
width: 480px;
height: 96px;
display: inline-block;
text-indent: -9999px;
}
#header_content .language { 
    position: absolute;
    top: 0px;
    right: 10px;
    font: 11px/16px Arial, Helvetica, Verdana, sans-serif;
    color: #d1222a;
}
#header_content .language a, #header_content .language a:visited {
    color: #4b6271;    
}
/* Layout */
#nav_top {
    width: 958px;
    background-color: #fff;
    border-bottom: 1px solid #bbb7b6;
}
#nav_left {
    padding-top: 25px;
    float: left;
    width: 190px;
    padding-bottom: 10px;
}
#content {
    padding-top: 25px;
    width: 570px;
    float: left;
    padding-right: 10px;
}
#sidebar {
    padding-top: 85px;
    float: left;
    width: 188px;
}
#sidebar .sidebar_item {
    padding: 10px;
    margin: 10px;
    background-color: #eff2f4;
}
#social ul {
    list-style: none;
}
#social li {
    display: block;
    padding: 0;
    padding-left: 20px;
    margin: 5px 0;
    height: 14px;
}
#social li#sharethis {
    padding: 0;
}
#social #sharethis img {
    position: relative;
    top: 2px;
    margin-right: 8px;
}
#social #emailart {
    background: transparent url(/csr/images/icon_emailarticle.gif) 0 0 no-repeat;
}
#social #printerfriendly {
    background: transparent url(/csr/images/icon_printerfriendly.gif) 0 0 no-repeat;
}
/* ~~ This grouped selector gives the lists in the #content area space ~~ */
#content ul, #content ol { 
    padding: 0 0 0 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* nav */
ul.nav, ul.nav ul { list-style: none; }
ul.nav li { font: bold 13px/16px Arial, Helvetica, sans-serif; }
ul.nav li ul li { font: normal 12px/16px Arial, Helvetica, sans-serif; }
ul.nav a, ul.nav a:visited { display: block; text-decoration: none; }
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { text-decoration: underline; }
/* nav-top */
#nav_top ul.nav { width: 960px; }
#nav_top ul.nav li { float: left; line-height: 25px; font-size: 11px; border-right: 1px solid #d6d3d2; }
#nav_top ul.nav a, #nav_top ul.nav a:visited { 
    color: #577184;
}
#nav_top ul.nav, #nav_top ul.nav a:active, #nav_top ul.nav a:focus, #nav_top ul.nav a.selected { 
    background-color: #edebea;
    color: #0099ff;
    text-decoration: none;
    border-right: 1px solid #bbb7b6;
}
#nav_top ul.nav a .tabbg {
background-color: #edf0f2;
padding-left: 12px;
padding-right: 12px;
}
#nav_top ul.nav a.selected .tabbg {
background-color: #edebea;
border-bottom: 1px solid #edebea;
border-left: 1px solid #bbb7b6;
margin-left: -1px;
margin-bottom: -1px;
}
#nav_top ul.nav li.search {
border-right: 0;
text-align: right;
color: #577184;
}
#nav_top ul.nav li.search .tabbg {
background-color: transparent;
text-align: right;
}

/* nav-left */
#nav_left ul.nav { }
#nav_left ul.nav, #nav_left ul.nav ul { list-style: none; }
#nav_left ul.nav { margin-left: 10px; }
#nav_left ul.nav ul { margin-left: 13px; }
#nav_left ul.nav ul a, ul.nav ul a:visited { width: 137px; }
#nav_left ul.nav a, #nav_left ul.nav a:visited {  
    padding: 5px;
    width: 150px;  /*ie6*/
/*    background: #C6D580;*/
    color: #594f4b;
}
#nav_left ul.nav a:hover, #nav_left ul.nav a:active, #nav_left ul.nav a:focus { color: #0099ff; }
#nav_left ul.nav li ul a, #nav_left ul.nav li ul a:visited { padding-top: 3px; padding-bottom: 3px; background: none; }
#nav_left ul.nav a.selected, #nav_left ul.nav li ul a.selected { color: #fff; background-color: #577184; } 
#nav_left ul.nav li ul li ul li a, #nav_left ul.nav li ul li ul li a.selected {
width: 137px;
}


/* ~~ The footer styles ~~ */
#footer {
    font: 11px/16px Arial, Helvetica, Verdana, sans-serif;
    color: #fff;
    background-color: #577184;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    padding-bottom: 10px;
}
#footer_content {
    width: 960px;
    margin: 0 auto;
    padding: 10px 0;
}
#footer_content ul {
list-style: none;
}
#footer_content li {
float: left;
font-size: 10px;
padding: 0 7px;
border-right: 1px solid #fff;
line-height: 10px;
}
#footer_content li.last {
border-right: 0;
}
#footer_content li a {
color: #fff;
text-decoration: none;
}
#footer_content li a:hover {
text-decoration: underline;
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.image { 
float: left;
width: 280px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 20px;
}
.copyright {
text-align: right;
font-size: 10px;
color: #666;
}
.caption {
font-size: 10px;
}




/* content styles */
#content { font-size: 11px; }

#content h1 { font: 24px/24px Arial, Helvetica, Verdana, sans-serif; color: #594f4b; margin-bottom: 20px; } 
#content h2 { font: 18px/18px Arial, Helvetica, Verdana, sans-serif; color: #594f4b; margin-bottom: 18px; } 
#content h3 { font: bold 16px/16px Arial, Helvetica, Verdana, sans-serif; color: #1b1b1b; margin-bottom: 12px; } 
#content h4 { font: 16px/16px Arial, Helvetica, Verdana, sans-serif; color: #1b1b1b; margin-bottom: 12px; } 
#content h5 { font: bold 12px/12px Verdana, Arial, sans-serif; color: #1b1b1b; margin-bottom: 5px; } 
#content h6 { font: 12px/12px Verdana, Arial, sans-serif; color: #1b1b1b; margin-bottom: 5px; } 
#content p, #content ul, #content ol { margin-bottom: 12px; }
#breadcrumbs { margin-bottom: 18px; }

/*inline image*/
.imagewithcaption { float: left; width: 280px; margin-right: 20px; margin-bottom: 10px; }
.imagewithcaption .imageinline img { border: 1px solid #594f4b; }
.imagewithcaption .imagecredit { color: #9a9a9a; font: 10px/14px Verdana, Arial, Helvetica, sans-serif; text-align: right; }
.imagewithcaption .imagecaption { color: #594f4b; font: 10px/14px Verdana, Arial, Helvetica, sans-serif; padding-bottom: 7px; } 
#sidebar { font: 11px/14px  Verdana, Arial, Helvetica, sans-serif; color: #594f4b; }
#sidebar h4 { font: bold 13px/16px  Arial, Helvetica, Verdana, sans-serif; color: #000; margin-bottom: 10px; }
 
/*list page*/
#content ul.list { list-style-type: none; margin-left: 0; padding-left: 0; }
#content ul.list li.listitem { margin-bottom: 15px; overflow:auto; }
#content ul.list li.listitem .listitem_thumb { width: 120px; float: left; margin-right: 10px; }
#content ul.list li.listitem .listitem_thumb IMG { border: 1px solid #594f4b; }
#content ul.list li.listitem .listitem_text { overflow:auto; }
#content ul.list li.listitem .listitem_text P { margin-bottom: 0; }











/*home page*/
body#home #container_content_bkgd_wrap { background: none; }
body#home #content { width: 100%; }
body#home #content_home_row1 { overflow: auto; }    
body#home #content_home_row2 { /*height: 328px;*/ margin-bottom: 20px; background: #ffffff url(images/container_bkgd.gif) repeat-x 0px 0px; overflow: auto; }    
/*slideshow*/
body#home #content ul, #content ol { margin: 0; padding: 0; }
body#home .content_home_left { width: 620px; float: left; }
body#home .content_home_left .feature { margin-left: 10px; padding-left: 24px; padding-top: 15px; background-color: #577184; }
body#home .content_home_right { width: /*326px;*/ 290px; float: right; margin-right: 10px; }
body#home .content_home_right h2, body#home .content_home_right p { width:240px; margin-left: auto; margin-right: auto; }
body#home .content_home_right h2 { /*color: #000;*/ color:#577184; font-size: 13px; line-height: 18px; font-weight: bold; }
body#home .content_home_right img { float: left; margin-right: 5px; }
body#home .content_home_right p { color: #594f4b; }
body#home #content_home_row1 .content_home_right {
/*height: 347px;*/
padding-top: 10px; /*padding-top: 17px;*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#edf0f1), to(#eff2f4));
background: -webkit-linear-gradient(top, #edf0f1, #eff2f4);
background: -moz-linear-gradient(top, #edf0f1, #eff2f4);
background: -ms-linear-gradient(top, #edf0f1, #eff2f4);
}
body#home #content_home_row1 .content_home_right a { color: #0099ff; }
body#home #content_home_row2 .content_home_right { }
body#home #content_home_row2 h2 { font-weight: bold; margin-top: 26px; }
/*tabs*/
body#home #tabs { width: 610px; margin-left: 10px; margin-top: 20px; }
body#home .content_home_left .ui-tabs-panel h3 { color: #577184; }
body#home .content_home_left .ui-tabs-panel h4 { color: #594f4b; font-weight:bold; font-size: 14px; margin-bottom:3px; }
body#home #csr-collab-form {
    background-color: #577184;
    margin-left:25px;
    padding: 6px;
    width: 190px;
    border: 1px solid #c6c2c1;
    color: #FFFFFF;"
}
body#home #csr-collab-form h3 { font-family: Verdana, Tahoma, sans-serif; font-size: 12px; color: #ffffff; }
body#home #csr-collab-form th {
}
body#home #csr-collab-form input#csr-collab-userid,
body#home #csr-collab-form input#csr-collab-password {
    font-size: 10px;
}

 