﻿/* GENERAL LAYOUT */

body
{
  color:#54504d;
	font-size:9pt;
	font-family:Trebuchet MS, Arial, Verdana;
}

#InnerContentContainer
{
  width:955px;
  text-align:left;
  background-color:#ffffff;
  margin: auto;
}

p
{
  font-family:Trebuchet MS, Arial, Verdana;
  font-size:9pt;
}

h2
{
  font-size:13pt;
  color:#FF6600;
}

h3
{
  color:#ff6600;
	font-size:11pt;
	font-family:Trebuchet MS, Arial, Verdana;
	font-weight:bold;
}

h4
{
  font-family:Trebuchet MS, Arial, Verdana;
  color:#ff6600;
  font-weight:bold;
  font-size:11pt;
  margin:0px;
  padding:0px;
}

#HPContentPanel 
{
  padding:0px 3px 0px 3px;
}

#CHSPLogo
{
  margin-bottom:5px;
  padding-top:0px;
}

/* CHILD SELECT BOX */

.childTextInfo
{
  display:block;
  height:110px;  
}

#digimarc1
{
  font-size:7pt; 
}

#SponsorAChildContainer
{
  width:624px; 
  padding:6px;
  float:right;
  height:276px;
  margin-bottom:0px;
}

#ChildDetailsBox
{
  text-align:center; width:150px;
}

.ChildImage
{
  border:0px;
}

.arrowPaddingBlock
{
  padding:2px;
}

#ChildSelectBoxContainer
{
  width:400px; float:left;
  margin:0px 0px 0px 5px;
}

#OtherCountryMessageBox
{
  width:400px; float:left;
  margin:0px 0px 0px 5px;
}

#OtherCountryMessageBox p
{
  margin-top:5px;
  color:#ffffff;
}

#ChildSelectorBox
{
  float:right; width:230px;
  margin-right:5px;
}

#ctl00_MainContentHolder_ChildContainer
{
  margin-top:6px;
}

#ctl00_MainContentHolder_SearchDescription
{
  margin-bottom:0px;
}

#ctl00_MainContentHolder_SponsorBtn
{
  color: #FFFFFF; text-decoration: none;
}

#ChildSelectionContinueBlock
{
  float:right; margin-top:10px;
}

.ChildContainerWrapper
{
  font-size:10pt;
  color:#ffffff;
}

.ChildCounterWrapper
{
  color:#ffffff;
  text-align:center;
}

#ChildPhotoContainer
{
  width:150px;
  height:200px;
  margin-bottom:5px;
  float:left;
}

.AnnouncementContainer
{
  width:370px; 
  background: #f5f3f2; 
  padding:8px; 
  margin:8px 0px 0px 5px;
}

#ctl00_MainContentHolder_SponsorBtn
{
  background: url(/childsponsorship/campaign/abtesting/img/sponsor_button.png) no-repeat 0px 0px;
	width:225px;
	height:37px;
	margin:auto;
	font-family:Arial;
	font-size:14pt;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
	color:#000000;
	padding-top:33px;
	margin-left:-2px;
  display:block;
  text-decoration:none;
}

#ctl00_MainContentHolder_SponsorBtn:hover
{
  background: url(/childsponsorship/campaign/abtesting/img/sponsor_button.png) no-repeat 0px -70px;
}

#SponsorButton a
{
  color:#000000;
  text-decoration:none;
}

#ctl00_MainContentHolder_uxContinue
{
  margin-left:5px;
}

/* REFINE BOX */

#RefineContainer
{
  width:211px;
  float:right;
}

#RefineBox
{
  background: url(/childsponsorship/campaign/abtesting/img/refine_bg_long_digital.png) no-repeat right top; 
  width:189px;
  padding:7px 11px 1px 11px;
  margin:0px;
  color:#ffffff;
}

#ctl00_MainContentHolder_SearchDescription
{
  color:#ff6600;
}

#RefineBox h4
{
  color:#ffffff;
}

#RefineBoxEnd
{
  background: url(/childsponsorship/campaign/abtesting/img/refine_bg_bottom_digital.png) no-repeat left bottom; 
  width:211px;
  height:10px;
}

.SearchRefineButton
{
  background: #c1b098 url(/childsponsorship/img/button_refineSearch.gif) repeat-x left top; 
	background-repeat: repeat-x;
	padding: 2px 8px 2px 8px;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Arial;
	font-size:9pt;
	width:79px;
	cursor:pointer;
	float:right;
	border:1px solid #493d31;
	margin:8px 1px 0px 0px;
}

.SearchRefineButton:hover
{
  background: #c1b098 url(/childsponsorship/img/button_refineSearch_hover.gif) repeat-x left top; 
}

.RefineFieldCountry
{
  font-size:11px;
  padding:1px 0px 1px 0px;
  width:97px;
}

.RefineFieldGender
{
  font-size:11px;
  padding:1px 0px 1px 0px;
  width:86px;
}

.RefineField
{
    font-size:11px;
    padding:1px 0px 1px 0px;
}

.RefineFieldAge
{
  font-size:11px;
  padding:1px 0px 1px 0px;
  margin-left:0px;
}

.RefineFieldDay
{
    font-size:11px;
    padding:1px 0px 1px 0px;
    width:48px;
}

.RefineFieldMonth
{
    font-size:11px;
    padding:1px 0px 1px 0px;
    margin-left:0px;
    width:48px;
}

/* SELECTED CHILD BOX */

#SelectedChildContainer
{
  width:552px; 
  border:1px solid #ff6600; 
  padding:6px; 
  background-color:#fafafa; 
  margin-top:15px;
}

#SelectedChildInnerContainer
{
  background: #ffffff; 
  padding:6px;
  height: 100%;
}  


#CampaignBanner
{
  width:312px;
  height:288px; 
  margin-bottom:1px;
  float:left;
}

#CampaignTitle
{
  width:365px;
  height:267px; 
}

#CampaignVideo
{
  width:365px;
  height:206px; 
}

#player {
	
	/* container dimensions */
	margin-top:20px;
	margin-left:100px;
	display:block;
	width:462px;
  height:370px; 
	
	/* make play button centerered horizontally */ 
	text-align:center;
	color:#fff;
	float:left;
}

#CampaignMessage
{
  width:600px;
  height:247px;
  float:right;
  margin-top:0px;
  padding-right:20px;
 
}

#CampaignMessage p
{
    color:#ffffff;
    line-height:15px;
}

#SelectedChildContainer
{
  width:934px;
  margin-top:0px;
  margin-bottom:15px;
}

#InfoContainer
{
  width: 949px;
  padding-top:15px;

}

#InfoContainer ul li
{
  color:#000000;

}

/* INFO BOX */

#box1
{
  width:338px;
  height:350px;
  background-color:#fafafa;
  margin-right:17px;
  float:left;
  padding:14px;
}

#box2
{
  width:246px;
  height:350px;
  background-color:#fafafa;
  margin-right:17px;
  float:left;
  padding:14px;
}

#box3
{
  width:245px;
  height:350px;
  background-color:#fafafa;
  float:left;
  padding:14px;
}


/* CAMPAIGN CONTENT */

#CampaignTopArea
{
  width:949px;
  height:538px;
  background: url(/childsponsorship/campaign/abtesting/img/campaign_bg.jpg) no-repeat left top; 
}

#titleChangeAChild
{
  width:143px;
  height:20px;
  background: url(/childsponsorship/campaign/abtesting/img/campaign_copy.png) no-repeat 0px 0px; 
  margin-top:85px;
}


#titleAndYou
{
  width:143px;
  height:20px;
  background: url(/childsponsorship/campaign/abtesting/img/campaign_copy.png) no-repeat 0px -20px; 
}


/* Lightbox info */

#TB_window
{
	margin-top:0% !important;
	background: none;
}

#TB_title 
{
	background: none;
	height: 0;
}

#TB_overlay
{
	top: 0;
}

#TB_closeAjaxWindow
{
	position:absolute;
	right: 20px;
	top: 15px;
	*top: 0;
}

#TB_closeAjaxWindow a
{
  font-size:9pt;
}

#TB_closeWindow a:link, #TB_window a:link, 
#TB_closeWindow a:visited, #TB_window a:visited
{
	text-decoration: none;
}

#TB_window a:hover
{
	text-decoration: underline;
}

#TB_closeWindow a, #TB_window a, #TB_window a:link, #TB_window a:visited
{
	font-weight: bold;
	font-size: 10pt;
	color: #ff6600;
}

#MakeADifferenceContainer .bgTop, #SponsorStoriesContainer .bgTop
{
	background: url(/childsponsorship/campaign/LifeBetter/img/lightbox_edge_photo.png) no-repeat 0px 0px; 
	width: 944px;
	height: 8px;
}

#MakeADifferenceContainer .bgBottom, #SponsorStoriesContainer .bgBottom
{
	background: url(/childsponsorship/campaign/LifeBetter/img/lightbox_edge_photo.png) no-repeat 0px -9px; 
	width: 944px;
	height: 8px;
}

#MakeADifferenceContainer .content, #SponsorStoriesContainer .content
{
  background: #ffffff url() no-repeat right bottom; 
	height: 500px;
	width: 894px;
	padding:  10px 0px 0px 50px;
}

.MakeADifferenceCTA
{
  display:block;
  background: url(/childsponsorship/campaign/LifeBetter/img/moneyworks_cta.gif) no-repeat 0px 0px; 
  width:238px;
  height:93px;
  margin-top:20px;
}

#TB_ajaxContent
{
  height:700px !important;
}

#selectorContainer
{
  height:300px;
  width:850px;  
  margin-top:60px;
}

.menuBlock
{
	text-align: left;
	width:245px;
	height: 150px;
	float:left;
}

.menuBlock h2
{
  padding-left:10px;  
  margin-bottom:5px;
}

.menuBlock ul
{
	margin:0px;
	padding:0px;
}

.menuBlock li
{
	list-style: none;
	background: url(/childsponsorship/campaign/LifeBetter/img/a_bg.png) no-repeat 0px 1px; 
	margin-left:7px;
	width:230px;
	height:54px;
}

.menuBlock li:hover, .menuBlock .selected
{
	background: url(/childsponsorship/campaign/LifeBetter/img/a_bg.png) no-repeat 0px -52px; 
}

.section
{
  width:540px;
  height:200px;
  float:left;
  margin:0px 0px 0px 50px;
}

.section h2
{
  font-size:24pt;
  margin-bottom:0px;
  margin-top:15px;
  color:#ff6600
}

/* CAMPAIGN RELATED LIGHTBOXES */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Trebuchet MS, Arial;
	color: #333333;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	position:relative;
}

#TB_captionCopy 
{
    width:200px;
    position:absolute;
    left:15px;
}

#TB_secondLine {
	font: 10px Trebuchet MS, Arial;
	color:#666666;
	font-size:2em;
	text-align:center;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	position:absolute;
	top:0;
    right:0;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:7001;
	left: 0px;
	height:100%;
	width:100%;
	top: 0;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6  */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window 
{
  margin-top:0% !important;
	background: none;
	position: fixed;
	z-index: 8002;
	color:#000000;
	display:none;
	/*border: 4px solid #525252;*/
	text-align:left;
	top:10%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;

	position:absolute;
	right: 20px;
	top: 15px;
	*top: 0;
}

#TB_closeAjaxWindow a
{
  font-size:9pt;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background: none;
	height: 0;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.5em;
	height:700px !important;
}

#TB_ajaxContent.TB_modal{
	padding:15px;
}

#TB_ajaxContent p{
	padding:10px 0px 5px 0px;
	font-size:10pt;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

/* THICK BOX OVERRIDE */

#TB_closeWindow a:link, #TB_window a:link, 
#TB_closeWindow a:visited, #TB_window a:visited
{
	text-decoration: none;
}

#TB_window a:hover
{
	text-decoration: underline;
}

#TB_closeWindow a, #TB_window a, #TB_window a:link, #TB_window a:visited
{
	font-weight: bold;
	font-size: 10pt;
	color: #ff6600;
}

/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
  
.jqmWindow 
{
  display: none;    
  position: fixed;
  top: 15%;
  left: 45%;
  
  margin-left: -200px;
  width: 500px;
  
  background-color:#ffffff;  
  
  border: solid 0px #886d55;
  padding: 15px;
}

.jqmWindow h4
{
  color:#ff6600;
  font-weight:bold;
  font-size:11pt;
  margin-top:0px;
  margin-bottom:5px;
  padding:0px;
}

.jqmWindow p
{
  color:#000000;
  font-size:9pt;
}


.jqmOverlay {background-color:#000000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}



/*
 * Color, Border, and Button Rules
 */
.contentslider {
  padding:0px; /* This acts as a border for the content slider */
  background:transparent; /* This is the color of said border */
}
.cs_wrapper, .cs_article {
  background:transparent; /* Background color for the entries */
}
.cs_leftBtn, .cs_rightBtn {
  width:42px; /* Should be as wide as the button graphic being used */
  background:transparent; /* This will probably match the contentslider bg color */
}

/*
 ******************************************************************************
 * These styles may be affected by the plugin, so avoid changing them if 
 * it's not absolutely necessary.
 ******************************************************************************
 */
.contentslider {
  position:relative;
  display:block;
  width:840px;
  height:325px;
  margin-top:20px;
  overflow:hidden;
}
.cs_wrapper {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:900px;
  height:400px;
  margin:0 auto;
  padding:0;
}

.StoriesBox
{
  width:720px;
  height:325px;
  margin-left:51px;
}

.StoriesBox p
{
  font-size:11pt !important;
  line-height:normal !important;
}

.SponsorName
{
  font-size:10pt !important;
  font-weight:bold;
  font-style:italic;
}

.sponsorPhoto
{
  float:left;
  margin-right:30px;
  margin-bottom:50px;
}

.cs_leftBtn, .cs_rightBtn {
  position:absolute;
  top:0;
  height:325px;
  padding:0px 0;
  z-index:10000;
}
.cs_leftBtn 
{
  left:0;
  outline:0;
}
.cs_rightBtn 
{
  right:0;
  outline:0;
}
.cs_leftBtn img, .cs_rightBtn img {
  border:0;
  position:relative;
  top:115px !important;
  margin:0;
}
