/*  STYLE SHEET FOR LEFT TO RIGHT
	VERSION: 1.1 
	CREATED: DECEMBER 2008
	REVISED: 07.15.09
	
	0. CONTENT WRAPPER
	1. MASTEHEAD 
	2. MAIN CONTENT
		2.1. LEFT NAVIGATION 
		2.2. MAIN CONTENT
			2.2.1 Center Column Content
				2.2.1.A: Main Content: Standard
				2.2.1.B: Main Content: Video Player
				2.2.1.C: Main Content: Magic Tabs
				2.2.1.D: Main Content: Slideshow (see "Slideshow.css")
				2.2.1.E: Main Content: Main Headline Story(General)
			2.2.2. Special Features--Sliding Panels
			2.2.3. More News: two columns 
		 2.3. SIDE CONTENT
	3. FOOTER
	4. IMAGES
	5. BUTTONS
	*/

/*** PRINT ONLY ***/
.printOnly {
	display: none;
}
	
#printLogo {
	position: absolute;
	left: -1000px;
	padding-bottom: 0px;
}

/* Placeholder for clearing floating elements */
div.clearDiv {
	clear: both;
}

div.clear10px {
	height: 10px;
	clear: both;
}

/*=============  0. CONTENT WRAPPER ============= */
#contentWrapper { /* content wrapper */
	margin: 0 auto;
	width: 900px;
	text-align: left;
	position: relative;
}
/*=============  1. MASTEHEAD ============= */
#mastheadContainer { /*masthead container */
	width: 900px;
        position: relative;
}

/* Containers within the top masthead */
#mastheadTop {
	height: 74px;
	text-align: center;
	color: white;
	padding-left: 5px;
	margin: 0;
       position: relative;
}

#english #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-english.jpg) right no-repeat;
}

#training-ltr #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-english.jpg) right no-repeat;
}

#training-rtl #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-urdu.jpg) right no-repeat;
}

#russian #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-russian.jpg) right no-repeat;
}

#urdu #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-urdu.jpg) right no-repeat;
}

#spanish #mastheadTop {/*added 5/4/09 */
	background: url(bg-topheader900-spanish.jpg) right no-repeat;
}

#learnEng #mastheadTop {
	background: url(bg-topheader900-spEnglish.jpg) right no-repeat;
}

#chinese #mastheadTop {
	background: url(bg-topheader900-chinese.jpg) right no-repeat;
}

#somali #mastheadTop {
	background: url(bg-topheader900-somali.jpg) right no-repeat;
}

#editorials #mastheadTop {
	background: url(bg-topheader900-editorials.jpg) right no-repeat;
}

#policy #mastheadTop {
	background: url(bg-topheader900-editorials.jpg) right no-repeat;
}

#zimbabwe #mastheadTop {
	background: url(bg-topheader900-zimbabwe.jpg) right no-repeat;
}

#shona #mastheadTop {
	background: url(bg-topheader900-shona.jpg) right no-repeat;
}

#ndebele #mastheadTop {
	background: url(bg-topheader900-ndebele.jpg) right no-repeat;
}

#learningenglish #mastheadTop {
	background: url(bg-topheader900-spEnglish.jpg) right no-repeat;
}

#vietnamese #mastheadTop {
	background: url(bg-topheader900-vietnamese.jpg) right no-repeat;
}

#indonesian #mastheadTop {
	background: url(bg-topheader900-indonesian.jpg) right no-repeat;
}

#albanian #mastheadTop {
	background: url(bg-topheader900-albanian.jpg) right no-repeat;
}

#bosnian #mastheadTop {
	background: url(bg-topheader900-bosnian.jpg) right no-repeat;
}
 
#croatian #mastheadTop {
	background: url(bg-topheader900-croatian.jpg) right no-repeat;
}

#macedonian #mastheadTop {
	background: url(bg-topheader900-macedonian.jpg) right no-repeat;
}

#ukrainian #mastheadTop {
	background: url(bg-topheader900-ukrainian.jpg) right no-repeat;
}

#serbian #mastheadTop {
	background: url(bg-topheader900-serbian.jpg) right no-repeat;
}

#greek #mastheadTop {
	background: url(bg-topheader900-greek.jpg) right no-repeat;
}

#azerbaijani #mastheadTop {
	background: url(bg-topheader900-azerbaijani.jpg) right no-repeat;
}

#turkish #mastheadTop {
	background: url(bg-topheader900-turkish.jpg) right no-repeat;
}

#kurdi #mastheadTop {
	background: url(bg-topheader900-kurdi.jpg) right no-repeat;
}

#khmer-english #mastheadTop {
	background: url(bg-topheader900-khmerEng.jpg) right no-repeat;
}

#tibetan-english #mastheadTop {
	background: url(bg-topheader900-tibetanEng.jpg) right no-repeat;
}

#thai #mastheadTop {
	background: url(bg-topheader900-thai.jpg) right no-repeat;
}

#hausa #mastheadTop {
	background: url(bg-topheader900-hausa.jpg) right no-repeat;
}

#french #mastheadTop {
	background: url(bg-topheader900-french.jpg) right no-repeat;
}

#swahili #mastheadTop {
	background: url(bg-topheader900-swahili.jpg) right no-repeat;
}

#portuguese #mastheadTop {
	background: url(bg-topheader900-portuguese.jpg) right no-repeat;
}

#centralafrica #mastheadTop {
	background: url(bg-topheader900-centalAfrica.jpg) right no-repeat;
}

#uzbek #mastheadTop {
	background: url(bg-topheader900-uzbek.jpg) right no-repeat;
}

#oromoo #mastheadTop {
	background: url(bg-topheader900-horn.jpg) right no-repeat;
}

#creole #mastheadTop {
	background: url(bg-topheader900-creole.jpg) right no-repeat;
}

#mastheadTopLeft { /*Logo*/
	left:5px;
position:absolute;
top:6px;
width:220px;
}

#mastheadTopCenter { /*ID and tagline*/
	text-align: left;
	width: 400px;
	padding: 0px 0 0 0;
        position: absolute;
	left: 225px;
}

#mastheadTopRight { /*global nav and search*/
	text-align: right;
	width: 462px;
	padding: 6PX 9px 0 0;
        position: absolute;
	right: 0;
}

#mastheadBottom { /* Bottom of the header*/
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	height: 20px;
	padding: 4px 0 6px 0;
        position: relative;
}

/* Main Navigation */
#mainNav{ 
	background: #7FA3BD url(bg-masthead.gif) 0 0 no-repeat;
	height: 29px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	position: relative;
}

#secondNav{ 
	background-color: #fff;
	height: 29px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	position: relative;
}

#mainNav.editorial{ 
	background: #72A341 url(bg-masthead-editorial.gif) 0 0 no-repeat;
}

#mainNav.misc{ 
	background: #CEA946 url(bg-masthead-misc.gif) 0 0 no-repeat;
}

/*=============  2. MAIN CONTENT ============= */
#mainContentContainer {
	padding: 0 0;
	background: #fff;
	padding: 3px 10px 10px 10px;
	border: 1px solid #ccc;
	border-top: none;
	margin-top: 0;
}

#mainContentContainer.editorial {
	background: #fff url(bg-globe.jpg) 0 100% repeat-x;
}

/***  2.1. LEFT NAVIGATION  ***/
#sideNavCell { 
	width: 125px;/*130px*/
	float: left;
	margin-top: 21px;
}








8html #sideNavCell { 
	width: 120px;/*130px*/
	float: left;
	margin-top: 21px;
}

/*** 2.2. MAIN CONTENT  ***/
#mainContentCell { 
	margin-top: 0;
	padding: 0px;
	width: 745px;
	float: right;
        position: relative;
}
/* 2.2.1 Center Column Content  */
#mainContent{
	width: 484px; /*total width:490=(484+5+1) */
	float: left;
	padding-right: 5px;
	margin-top: 10px;
	border-right: 0px dotted #ccc;
}

#mainContent.oneCol {
	width: 740px;
}

#mainContent.video { 
	width: 620px;
}

.standard, .slideShow, .video, .magicTab {
	margin-bottom: 15px;
}
/*2.2.1.A: Main Content: Standard*/
.standard .topStory{/*top story box*/
	width: 230px;  /*total width: 240px (230+5+4+1) */
	float: left;
	background-color: #fff;
	padding: 0 5px 5px 4px;
	border-right: 1px dotted #ccc;
	position:relative;
}

.standard .moreTopNews {/*top story-article list*/
	width: 230px;/*total width 240px (230+5+5)*/
	float: right;
	padding: 0 5px 5px 5px;
}

/*2.2.1.B: Main Content: Video Player*/
.video .topStory{/*top story imagebox*/
	width: 300px;  /*total width: 305px (300+5) */
	float: left;
	background-color: #fff;
	padding: 0 5px 5px 0;
	position:relative;
	border-right: 1px dotted #ccc;
}

.video .moreTopNews{/*top story-article list*/
	width: 165px;/*total width 175px (165+5+5) */
	float: right;
	padding: 0 5px 5px 5px;
	
}

/*2.2.1.C: Main Content: Magic Tabs*/
.magicTab .topStory{/*top story image box*/
	width: 230px;  /*total width: 241px (230+5+5+1) */
	float: left;
	padding: 0 5px 5px 5px;
	border-right: 1px dotted #ccc;
	position:relative;
}

.magicTab .moreTopNews{/*top story-article list*/
	width: 220px;
	float: right;
	padding: 0 0 5px 5px;
}

/*2.2.1.E: Main Content: Main Headline Story*/

.mainHead .topStory{/*top story image box*/
	width: 230px;  /*total width: 235px */
	float: right;
	background-color: #fff;
	padding: 0 0 5px 5px;
	position:relative;
}

.mainHead .moreTopNews {/*top story-article list*/
	width: 240px;/*total width 245px (240+5)*/
	float: left;
	padding: 0 5px 5px 0;
}

.mainHead .moreTopNews.oneCol {/*top story-headline with teaser */
	width: 480px; 
	float: none;
	background-color: #fff;
	padding: 0 0 5px 0;
}

/*2.2.2 Special Features--Sliding Panels */
.SlidingPanels {
	width: 480px; 
}

.SlidingPanelsContent{
	width: 480px; 
}

#features .SlidingPanels {
	float: left;
	margin-top: 0;
	padding-top: 0;
	position: relative;
}

.featuresBox {
	border: 1px solid #ccc;
	margin: 5px 0 20px 5px;
	padding: 5px 0; 
	background-color:#e5e5e5;
	width: 473px;
	position: relative; 
}

#features .SlidingPanelsContentGroup {
	float: left;
	width: 10000px;
	margin-top: 0;
	padding-top: 0;
}
#features .SlidingPanelsContent {
	float: left;
	margin-top: 0;
	padding-top: 0;
}

.SlidingPanels {
	padding:0;
	width: 100%; 
	border: none; 
	position: relative; 
}

.SlidingPanelsContentGroup {
	padding: 0; 
	margin: 0; 
	width: 100%; 
	border: none; 
	position: relative; 
}

.SlidingPanelsContent {
	padding: 0; 
	margin: 0; 
	overflow: hidden; 
	width: 475px; 
	border: none;
}

.SlidingPanelsAnimating * {
	overflow: hidden !important;
}

/*2.2.3. More News: two columns */
.moreNewsBox {
	margin: 5px 0 20px 0;
	background-color:#fff;
}

.moreNewsBoxList {
	width: 480px;
	float: left;
	margin: 5px 10px 20px 0;
}

.moreNewsBoxList.twoCol {
	float: left;
	width: 310px;
	margin: 0 0 20px 0;
	padding-right: 5px;
	background-color:#fff;
	border-right: 1px dotted #ccc;
}

.leftCol {
	float: left;
	width: 235px; /*total width 240=(235+5)*/
	padding-right: 5px;
}

.rightCol{
	float: right;
	width: 235px; /*total width 240=(235+5)*/
	padding-left: 5px;
}

.listBox { /*More News--bulleted list */
	margin-bottom: 15px;
	padding: 5px 3px 0 2px;
}

.listBoxTeaser { /*More News--with teasers and pix */
	border: 1px solid #ddd;
	background: url(bg-listBoxTeaser.jpg) repeat-x top;
	padding: 8px;
	margin: 0 0 10px 0;
	width: 222px;
	position: relative;
}

.listBoxTeaser.oneCol, .listBoxTeaser2.oneCol { /*More News--with teasers and pix */
	background: none;
	width:auto;
	border: none;
	border-top: 1px dotted #ccc;
	clear: both;
	padding: 8px 0;
	margin-bottom: 3px;
	position: relative;
}

.listBoxTeaser.oneCol.noBorder, .listBoxTeaser2.oneCol.noBorder { /*More News--with teasers and pix: first item on the list--mainly for 3rd level pages */
	border-top: none;
	padding-top: 3px;
	position: relative;
}

.noBttmBorder{/*special reports category header*/
	border-bottom: none;
}

.buttonsBox {
	margin: 0 5px 0 85px;
}

.boxout { /* boxout for topics and features in the main body area*/
	float:right;
	padding: 0 0 0 5px;
	margin: 0;
}

.boxout.news, .boxout.article { /* boxout for topics and features in the main body area*/
	background: url(bg-listBoxTeaser-long.jpg) repeat-x top;
	padding-top: 5px;
	margin-bottom: 10px;
	width: 155px;
	margin-left: 5px;
}

.boxout.article {
	padding: 5px 0 5px 10px;
}

.boxout.photo, .boxout.photo160px, .boxout.photo230px, .boxout.photo300px {
	padding: 5px 10px 5px 0;
	float:left;
}

.boxout.photo {
	padding: 5px 10px 5px 0;
	float:left;
}

.boxout.photo160px {
	width: 150px;
	padding-right: 15px;
}

.boxout.photo160px.right {/* FOR right aligned photos*/
	width: 150px;
	padding: 0 0 0 15px;
	float: right;
}

.boxout.photo230px {
	width: 230px;
}

.boxout.photo230px.right { /*for right aligned photos*/
	width: 230px;
	padding: 0 0 0 15px;
	float: right;
}

.boxout.photo300px {
	width: 300px;
	margin-top: -5px;
}

.photo480px {
	width: 480px;
	float:none;
	margin-bottom: 10px;
}

.banner { /*Programs banner images*/
	margin: 0 0 10px 0;
}


/*=============  2.3. SIDE CONTENT ============= */
#sideContent {
	width: 240px;
	float: right;
	margin-top: 10px;
}

.promoFeature, .spEvent {
	margin: 5px 0 15px 0;
	position:relative;
}

.spEvent {
	border: 1px solid #ccc;
	border-top: none;
	background-color: #e5e5e5; /*#e5e5e5; fffee6*/
	padding: 0 4px 10px 4px;
	margin-top: 0;
}

.promoGraphics {
	margin: 5px 0 15px 0;
	padding: 5px;
	border: 1px #ddd solid;
}

.promoGraphics.last {
	margin-bottom: 25px;
}


.colorBg {
	background: #FFFEE6;
	border: 1px #ddd solid;
	padding: 10px 5px 0 5px;
}

.imgBg{
	margin: 5px 0 15px 0;
	padding: 5px;
	border: 1px #ddd solid;
	background: url(bg-listBoxTeaser.jpg) repeat-x top;
}

.imgBg img{
	float: right;
	margin-left: 8px;
}

/* Poll */
.calloutPoll {
	margin: 5px 0 15px 0;
	border: 1px solid #ddd;
	padding: 10px;
	background: url(bg-listBoxTeaser.jpg) repeat-x top;
}

.calloutPoll img {
	padding-right: 5px;
}

.calloutPoll-center {
	/*border: 1px solid #ccc;*/
	width: 600px;
	padding: 0 5px 8px 8px; /*padding: 10px;*/
	margin-top: 0;
	/*font: "Verdana", Arial, Helvetica, sans-serif;*/
}

.calloutPoll-center img {
	padding-right: 5px;
}

/*=============  3. FOOTER ============= */
#mainFooter {
	padding: 10px 0px;
	margin: 10px 0 ;
	background-color: #333;
	font-size: 1em;
	line-height: 1.4em;
}

#mainFooter ul li {
    /*border-right: 1px solid #333;*/
	background: url(bg-shortGrayLine.gif) right 3px no-repeat; 
    display: inline;
    padding: 0 6px 0 2px;
}
 
.footerLogoSm {
	width: 110px;
	float: left;
	padding-left: 10px;
}	

.footerLinks {
	color:#FFFFFF;
float:left;
font-size:13px;
width:770px;}

/*=============  4. IMAGES ============= */
.promoFeature img {
	float: right;
	margin: 3px 0 5px 8px;
	border: 1px solid #ddd;
}

.spEvent img {
	margin:4px 0;
	float: none;
	border: none;
}

.promoGraphics img {
	float: right;
	margin: 0 0 0 8px;
	border: 1px solid #ddd;
}

.listBox img {
	float: left;
	margin: 5px 8px 5px 0;
	border:1px solid #ddd;
}

.listBoxTeaser img {
	float: right;
	margin: 5px 0 5px 5px;
	border:1px solid #ddd;
}

img.sideAlign {
	float: left;
	margin: 5px 10px 20px 0;
	border: 0px solid #ddd;
}

img.media, img.mediaHeadline {
	float: none;
	margin: 3px 0 0 0;
	border: none;
}

img.mediaHeadline {
	margin: 6px 0 0 1px;
}

img.watermarkSpEvent {
	position: absolute;
	top: 30px;
	left: 90px;
	border: none;
} 
   
img.watermarkSide {
	position: absolute;
	top: 27px;
	left: 170px;
	border: none;
} 

img.watermarkTopImage {
	position: absolute;
	top: 92px;
	left: 120px;
	border: none;
} 

img.watermarkBreakNews { /*added new 3/11/09 */
	position: absolute;
	top: 113px;
	left: 120px;
	border: none;
}

img.watermarkBody {
	position: absolute;
	top: 33px;
	left: 407px;
	border: none;
} 
img.watermarkBody2 {/* for feature rich content where the column width is narrower that "watermarkBody"*/
	position: absolute;
	top: 33px;
	left: 238px;
	border: none;
} 

img.watermarkBody3, img.watermarkBody4 {/* for feature box */
	position: absolute;
	top: 52px;
	left: 168px;
	border: none;
}  

img.watermarkBody4 {/* for feature box without title */
	top: 35px;
}  

img.watermarkBody5 {/* for when there is no side content*/
	position: absolute;
	top: 33px;
	left: 668px;
	border: none;
} 

img.watermarkBody6 { /* for when the conten items use li (see Chinese VOAOnline page*/
	position: absolute;
	top: 63px;
	left:365px;
	border: none;
} 

img.watermarkSpecialFeature {/* for special features box */
	position: absolute;
	top: 30px;
	left: 60px;
	border: none;
}


img.watermarkArticle {/* for article video */
	position: absolute;
	top: 458px;
	left: 263px;
	border: none;
}

/*----------5.Buttons----------- */

.goButton {
	margin: -2px 0 0 0 ;
}

/* search button*/
a.searchButton {
	background: url(button-search.gif) top left no-repeat;
	float:left;
	margin-right:10px;
	height:28px;
	text-decoration:none;
}

a.searchButton span {
	padding-left:25px;
	}
	
a.searchButton:hover {
	background: url(button-search-off.gif) 0 0 no-repeat;
	text-decoration: none;
	}

/*  Special Features slide show buttons */
a.nextButton {
	background: url(button-arrow-right.gif) 3px 0 no-repeat;
	position: absolute; /*was: relative */
	top: 40px; /*was: -110px */
	left: 465px;
	padding: 10px;
}

a.nextButton span {
}
	
a.nextButton:hover {
	background: url(button-arrow-right-over.gif) 3px 0 no-repeat;
	text-decoration: none;
}

/* Previous button */
a.previousButton {
	background: url(button-arrow-left.gif) 3px 0 no-repeat;
	position: absolute;/*was: relative */
	top: 40px; /*was: -110px */
	left: -12px; /*was: -38px */
	padding: 10px;
}

a.previousButton:hover {
	background: url(button-arrow-left-over.gif) 3px 0 no-repeat;
	text-decoration: none;
}
	
 /*GENERIC BUTTONS */
.button {
	background: url(bg-button-on.jpg) top left no-repeat;
	margin: 10px 5px 7px 3px;
	color: #555;
	font: bold 1em Arial, Helvetica, sans-serif;
	padding: 2px;
	border: 1px solid #aaa;
}

.button:hover {
	background:#339933 url(bg-button-over.jpg) top left no-repeat;
	color: #fff;
}

a.button { /*VIDEO-AUDIO SECTION BUTTONS */
	background: url(bg-button-on.jpg) top left no-repeat;
	float:left;
	width:110px; height:20px;
	overflow:hidden;
	text-decoration:none;
	color: #fff;
	margin-top: 3px;
	padding: 2px 0 0 0;
}

a.button span {
	padding-left:20px;
}
	
a.button:hover {
	background:url(bg-button-hover.jpg) top left no-repeat;
	color: #fff;
}