/* TODO: DRY up CSS using SaaS*/

/* Clearfix ( http://www.webtoolkit.info/css-clearfix.html ) */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


/* Basic tags */

body {
  background-color: #f5f3f2;
  font:             normal normal normal 11px/13px Verdana, Arial, sans-serif;
}

a:hover {
  color:            #ec142d;
}

h1 {
  font:             normal normal normal 36px/0.8em Arial, sans-serif; /* line-height is almost certainly going to be an issue for IE */
  padding-top:      22px;
  width:            420px; /* matches width of text column */
}

strong {
  font-weight: bold;
}

/* Header area */
#header-container {
  height:           130px;
  background-color: #fff;
  margin-bottom:    20px;
}

#header {
  height:           130px;
  margin:           0 auto;
  width:            960px;
  position:         relative;
}

#logo {
  display:          block;
  position:         absolute;
  top:              20px;
  left:             0;
}

#header_donate {
  display:          block;
  position:         absolute;
  top:              20px;
  right:            0;
}

ul#primary_global_nav {
  height:           30px;
  position:         absolute;
  bottom:           0;
  left:             0;
  overflow:         hidden;
}

ul#primary_global_nav li {
  display:          inline; /* IE6 fix */
  float:            left;
  margin-right:     20px;
}

ul#primary_global_nav li a {
  color:            black;
  display:          block;
  font:             normal normal bold 18px/22px Arial, sans-serif; /* TODO: check line height and positioning in IE */
  text-decoration:  none;
  padding:          3px 10px 15px 10px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

}

ul#primary_global_nav li a:hover,
ul#primary_global_nav li.active a {
  background-color: #f5f3f2;
}

ul#secondary_global_nav {
  position:         absolute;
  bottom:           8px;
  right:            0;
}

ul#secondary_global_nav li {
  display:          inline; /* IE6 fix */
  float:            left;
  margin-left:      15px;
}

ul#secondary_global_nav li a {
  color:            #000;
  text-decoration:  none;
}

ul#secondary_global_nav li a:hover {
  color:                #ec142d;
  text-decoration:      underline;
}

/* Main navigation and content area */
#nav_and_content {
  margin:               0 auto;
  width:                960px;
  background-color:     #fff;
  -moz-box-shadow:      0px 2px 4px #ABAAA9;
  -webkit-box-shadow:   0px 2px 4px #ABAAA9 ;
}

#home {
  margin:               0 auto;
  width:                960px;
}

/* Side navigation bar */


/* TODO: exact vertical spacing of sidebar elements needs cleaning up */
#side_nav {
  display:              inline; /* IE6 fix */
  width:                230px;
  float:                left;
  margin-right:         20px;
  padding-top:          17px;
  padding-bottom:       5px;
}

#side_nav li {
  padding-left:         20px;
  padding-bottom:       10px;
}

#side_nav li a {
  color:                rgb(77,77,77);
  font:                 normal normal normal 16px/17px Arial, sans-serif;
  display:              block;
  text-decoration:      none;
}

#side_nav li.active {
  background: #fff url(/i/nav/current_section_arrow.gif) no-repeat scroll 2px 2px;
}

#side_nav li li.active {
  background-position: 1px 1px;
}

#side_nav li.active a {
  color:                rgb(255,99,25);
}

#side_nav li.active li a {
  color:                rgb(77,77,77);
}
#side_nav li a:hover,
#side_nav li.active a:hover {
  color:                #ec142d;
}

#side_nav li ul {
  padding-top:          10px;
}

#side_nav li li a {
  color:                rgb(26,26,26);
  font:                 normal normal normal 11px/15px Verdana, Arial, sans-serif;
  display:              block;
}

/* Content area */

#content {
  display:              inline; /* IE6 fix */
  margin:               10px 0 30px 0;
  float:                left;
  width:                700px;
}

#content_header {
  position:             relative;
  background-color:     gray;
  padding-bottom:       25px;
  margin-bottom:        21px;
  background:           transparent url(/i/dotted_dividers/thick_black.gif) repeat-x scroll 0 100%;
}

#banner img {
  display:              block; /* was necessary to fix extra 2px of bottom padding appearing in Safari + Firefox */
  width:                700px;
  height:               190px;
}

/* Body text area */
/* Note: These styles need to be kept in sync with editor.css so that TinyMCE's editor styling matches the site.
         The one exception is the styling of pullquotes, which needs to have negative margin removed.
         Note also that the '#body_text' scope needs to be removed */

#body_text {
  width:                420px;
  word-spacing:         1px;
}

#body_text a {
  font-weight:          bold;
  color:                rgb(255, 99, 25);
}

#body_text strong,
#body_text b {
  font-weight: bold;
}

#body_text p, #body_text ul, #body_text li, #body_text h3 {
  color:                rgb(22,22,22); /* darker than rgb(38,38,38) of visual as Cufon AA makes the text lighter */
  font:                 normal normal normal 16px/20px Arial, sans-serif;
  padding-bottom:       10px;
}

#body_text li {
  list-style-type: disc;
}
#body_text ul {
padding-left: 15px;
}

#body_text h2 {
  color:                rgb(236,20,45); /* darker than rgb(38,38,38) of visual as Cufon AA makes the text lighter */
  font:                 normal normal bold 16px/20px Arial, sans-serif;
  padding-bottom:       10px;
  margin-top:           20px;
}

#body_text h3 {
  padding-top:          10px;
  font-weight:          bold;
  padding-bottom:       5px;
}

#body_text p.pullquote {
  line-height:          1em;
  display:              inline; /* IE6 fix */
  float:                right;
  width:                220px;
  margin-right:         -280px;
  font-size:            18px;
  color:                rgb(255,99,25);
}

#body_text p.pullquote em,
#body_text p.pullquote i {
  display:              block;
  font:                 normal normal normal 11px/14px Verdana, Arial, sans-serif;
  color:                rgb(77,77,77);
  width:                160px;
  padding-top:          5px;
}

#body_text p span.quote {
  word-spacing: normal;
  color:                rgb(255,99,25);
}

#body_text img.img_left,
#body_text img.align_left {
  float: left;
  margin: 0 10px 10px 0;
}

#body_text img.img_right,
#body_text img.align_right {
  display: inline;
  float: right;
  margin: 0 0 10px 10px;
}

/* TODO: styles for:

    BLOCKQUOTE
    H4
    
*/

/*Add This.com toolbox */

.addthis_toolbox {
  display:              inline; /* IE6 fix */
  width:                220px;
  float:                right;
  padding-bottom:       18px;
  background:           transparent url(/i/dotted_dividers/addthis_box.gif) repeat-x scroll bottom right;
}

.addthis_toolbox li {
  padding-bottom:       5px;
  color:                rgb(77,77,77);
}

.addthis_toolbox a {
  margin-right:         5px;
}


/* Footer */

#footer {
  position:             relative;
  height:               100px;
  margin:               0 auto;
  width:                960px;
}

#footer ul {
  display:              inline; /* IE6 fix */
  float:                right;
}

#footer li {
  display:              inline; /* IE6 fix */
  float:                left;
}

ul#footer_global_nav {
  padding-top:          28px;
}

ul#footer_global_nav li {
  padding-left:         15px;
}

ul#footer_global_nav li a {
  color:                #000;
  text-decoration:      none;
}

ul#footer_global_nav li a:hover {
  color:                #ec142d;
  text-decoration:      underline;
}

/* Footer social links */

ul#footer_social_links {
  padding-top:          25px;
  padding-left:         15px;
}

ul#footer_social_links li {
  margin-left:          17px;
}

ul#footer_social_links a {
  display:              block;
  height:               18px;
  text-indent:          -10000em;
  background-position:  center left;
  background-repeat:    no-repeat;
}

#twitter_footer_link {
  width:                67px;
  background-image:     url(/i/footer/twitter-grey.gif);
}
#youtube_footer_link {
  width:                46px;
  background-image:     url(/i/footer/youtube-grey.gif);
}
#facebook_footer_link {
  width:                65px;
  background-image:     url(/i/footer/facebook-grey.gif);
}

/* End poverty */

#end_poverty_together {
  float:                left;
  display:              inline; /* IE6 fix */
  text-indent:          -10000em;
  background:           transparent url(/i/footer/end_poverty_together.gif) no-repeat scroll top left;
  height:               19px;
  width:                210px;
  margin-top:           24px;
}


/* Home */
#home img {
  display: block;
  float: left;
}

#home #home_intro_block {
  float:                left;
  display:              inline; /* IE6 fix */
  width:                240px;
  margin:               30px 40px 0 10px;
  padding-top:          19px;
  background:           transparent url(/i/dotted_dividers/thick_black.gif) repeat-x scroll 0 0;
}

#home #home_intro_block #home_intro_block-text {
  background:           transparent url(/i/dotted_dividers/thick_black.gif) repeat-x scroll bottom left;
  padding-bottom:       20px;
}

#home #home_intro_block #home_intro_block-text p {
  font: normal normal normal 23px/18px Arial, sans-serif;
}

a#home_link_on_fb {
  display:              block;
  padding-top:          17px;
}

#home #main_banner {
  -moz-box-shadow:      0px 2px 4px #ABAAA9;
  -webkit-box-shadow:   0px 2px 4px #ABAAA9 ; 
}

#home #home_row_3 {
  background:           transparent url(/i/dotted_dividers/thick_black.gif) repeat-x scroll 0 0;
  padding-top:          3px;
  margin:               0 10px;
}

#home #home_row_3 h2 {
  height:               42px;
  background:           transparent url(/i/dotted_dividers/1px_969696.gif) repeat-x scroll bottom left;  
}

#home #home_row_3 h2 a {
  color:                #000;
  font:                 normal normal bold 20px/24px Arial, sans-serif;
  text-decoration:      none;
  float:                left;
  display:              inline;
  margin-top:           7px;
  padding-right:        17px;
  background:           transparent url(/i/link_arrows/large_black.gif) no-repeat scroll 100% 60%;
}

#home #home_row_3 h2 a:hover {
  color:                #ec142d;
  background-image:     url(/i/link_arrows/large_red.gif);
}

#home #home_row_3 #home_stay_up_to_date {
  float:                left;
  display:              inline;
  width:                240px;
  margin:               0 40px 0 0;
}
/* */

#home_what_we_and_you_do div {
  margin-left:          20px;
  padding-bottom:       10px;
  width:                220px;
  float:                left;
  display:              inline; /* IE 6 fix */
  font-size:            12px;
  line-height:          16px;
}
#home_what_we_and_you_do h3 {
  font-size:            15px;
  line-height:          18px;
  padding-bottom:       8px;
  padding-top:          8px;
  clear: both;
}

#home_what_we_and_you_do h3 a.red {
  color:                #ec1e28;
}

#home_what_we_and_you_do h3 a.orange {
  color:                #ff6700;
}

#home_what_we_and_you_do div#home_ending_poverty {
  margin-left:          10px;
}

#home_what_we_and_you_do a {
  color:                #0199d1;
  text-decoration:      none;
}

#home_what_we_and_you_do a:hover {
  text-decoration:      underline;
}

/* */
#home #stay_up_to_date_social_links {
  padding-top:          13px;
  padding-bottom:       12px;
  background:           transparent url(/i/dotted_dividers/1px_969696.gif) repeat-x scroll bottom left;  
}
#home #stay_up_to_date_social_links img {
  display:              inline;
  float:                none;
}

#home #stay_up_to_date_social_links li {
  margin-right:         10px;
  display:              inline;
}

#home #home_row_3 #home_where_we_work {
  float:                left;
  display:              inline;
  width:                660px;
}

#home_where_we_work_links {
  display:              inline;
  float:                left;
  width:                180px;
  padding-top:          20px;
}

#home_where_we_work_links h3 {
  font-weight:          bold;
  padding:              10px 0 5px 0;
}

#home_where_we_work_links li {
  padding-bottom:       8px;
}

#home_where_we_work_links a {
  color:                rgb(0,153,204);
  text-decoration:      none; 
}

#home_where_we_work_links a:hover {
  color:                #ec142d;
  text-decoration:      underline;
}

#home_where_we_work_map {
  padding-top:          20px;
  display:              inline;
  float:                right;
}

/*
*/
#home #news_items li {
  background:           transparent url(/i/dotted_dividers/1px_969696.gif) repeat-x scroll bottom left;  
  padding-top:          16px;
  padding-bottom:       16px;
  float:                left;
  width:                240px;
  display:              inline;
}

#home #news_items li a {
  text-decoration:      none;
  font:                 normal normal normal 12px/14px Verdana, Arial, sans-serif;
}

#home #news_items li strong,
#home #news_items li b {
  color:                rgb(77,77,77);
  font-weight:          normal;
  font-size:            11px;
  display:              inline;
  float:                left;
  width:                80px;
  padding-right:        20px;
}

#home #news_items li span {
  color:                rgb(0,153,204);
  display:              inline;
  float:                left;
  width:                140px;
}

#home #news_items li a:hover,
#home #news_items li a:hover strong,
#home #news_items li a:hover span {
  color:                #ec142d;
  text-decoration:      underline;
}


/*
  Read more
*/

#read_more {
  clear:                both;
  background:           transparent url(/i/dotted_dividers/1px_969696.gif) repeat-x scroll top left;  
  padding-top:          10px;
}

#read_more li {
  display:              inline;
  float:                left;
  width:                160px;
  margin-right:         20px;
}

#read_more li img {
  display:              block;
  margin-bottom:        8px;
}

#read_more li a {
  font:                 normal normal normal 15px/15px Arial, sans-serif;
  color:                rgb(255,99,25);
  text-decoration:      none;
}

#read_more li a:hover {
  color:                #ec142d;
}

/*

*/

#form {
  width: 700px;
  margin: 0 auto;
  padding: 20px 0;
  font-size: 12px;
  line-height: 15px;
}

#form h1 {
  width: auto;
  padding-bottom: 25px;
  background:           transparent url(/i/dotted_dividers/thick_black.gif) repeat-x scroll 0 100%;
  margin-bottom: 20px;
}

#form p {
clear: both;
}

#form fieldset {
  padding-bottom: 30px;
  clear: both;
}

#form span.label {
  display: block;
  clear: both;
}

#form label {
  display: block;
  padding-bottom: 10px;
  float: left;
}

#form h2 {
 font: normal normal bold 20px/22px Arial, sans-serif; 
 padding: 20px 0 10px;
 clear: both;
}
#form h2.divider {
  background:           transparent url(/i/dotted_dividers/1px_969696.gif) repeat-x scroll 0 20px;
  padding-top:  40px;
}

#form input {
  border: 1px solid #aaadb2;
  border-left-color: #e3e3ec;
  border-right-color: #dbdfe5;
  border-bottom-color: #e3e9f0;
  padding: 3px 5px 4px 5px;
}

#form span.note {
  font-size: 10px;
  color:  rgb(100,100,100);
}

#form input.submit {
  border: none;
  padding: 0;
}

#form input.euro {
  width: 50px;
  background: transparent url(/i/forms/euro.gif) no-repeat scroll 3px 50%;
  padding-left: 13px;
}

#form .explanatory p {
  padding-bottom: 10px;
  clear: none;
}

#form p.error {
  font-weight: bold;
  padding-bottom: 15px;
  color: #e5002b;
}

#form .fieldWithErrors input {
  border: 1px solid #e5002b;
}

.test {
  color:red;
}

#sign_up_now {
  display:      block;
  position:     absolute;
  top:          22px;
  right:        0;
  text-indent:  -1000em;
  width:        194px;
  height:       30px;
  background:   transparent url(/i/calls_to_action/sponsor-a-child-now.gif) no-repeat scroll top right;
}

/*

*/

#footer_reg_info {
  clear: both;
  padding: 40px 0 15px;
  font: normal normal normal 10px/13px Arial, sans-serif;
  color:  rgb(147,146,145);
  text-align: center;
}