@charset "utf-8";
/* CSS Document */


/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 640px)
{
	body {-webkit-text-size-adjust: none;}
	
	body {
		clear: both; 
		margin: 0 auto; 
		width:100%;
		font-size: 90%;
		background:#f0f0f0;
	}
.body{background:#febf06 url(../images/res-150-360.jpg) repeat-x !important; float:left;}
	.topflagrgtbox{clear:both; float:left; width:auto; padding:0px !important}
	.flag2, .tag{/*clear:both;*/}
	.mapbox{float:right;}
	.toprgtbox{float:left; clear:both; width:97% !important}
	.bodycontainer, .bodycontainer1{width:93%;}
	
	img{max-width:100%;}
	.logo{float:left; padding-top:6px; background:none !important; width:98%; }
	.box {
	width:100%;
	height:143px;
	background:#FFF; width:97%

}
.contentarea img {max-width:100%;}
.bannerlftbox, .servicesbox, .booksrgtbox, .hotjobsbox, .editorsspot, .advertise, .footerbox1, .leftcontentbox   {width:100%; margin-bottom:4%}
.servicesbox{ margin-left:0px; margin-right:0px;}
/*h1.blacktitle{font-size:1.4em}*/
	
	.imgleft {margin-left:15px;}
	.searchbox{width:100%;}
	.serchborder{width:81%}
	.boxfirst, .boxlast {width:100%; margin-bottom:4%;  border-bottom:1px dotted #bdb9be; border-right:0 none !important}
	.footerbox2, .footerbox3{width:50%; float:left; }
	.footerbox4{text-align:right; clear:both; float:right; width:100%; margin-top:2%}
	
	.secleftbox{width:100%; float:left; clear:both;  margin-bottom:2%}
.secrightbox{width:100%; float:left; clear:both;}
.seccontentbox{width:100%; float:left;  margin-right:5px; clear:both; margin-bottom:2%}
	
	.menubg {height:auto !important; background:none;}
	.responsiveMenuTheme1 > li > a {
    display: block;
    padding: 7px 20px 5px 15px !important;
}

.responsiveMenuTheme1 li li li a.parent{padding:4px  31px!important;  background:#f1f1f1 !important}
.responsiveMenuTheme1 li li ul li a{padding:4px  31px!important; background:#ffd250 !important}
	.responsiveMenuTheme1 li li > a{padding: 7px 20px 5px 31px !important; background:#f1f1f1 !important; border-bottom:1px solid #cbcbcb !important}.responsiveMenuTheme1 span.opener{background-image:url(../images/down-bg.png) !important;background-repeat:no-repeat;background-position:11px center;width:37px;text-indent: 100px;overflow: hidden;display:block !important;/*padding: 15px 0;*/vertical-align: middle;position: absolute;right: 0; top:0 !important;}
.responsiveMenuTheme1 > li > a{background:#fff !important; border-bottom:1px solid #cbcbcb; margin-right:0px !important; color:#121212 !important}

.responsiveMenuTheme1 > li{margin-top:0px !important;}

.responsiveMenuTheme1 a:hover, .responsiveMenuTheme1 li.active > a, .responsiveMenuTheme1 li > span.separator:hover{ border-top-left-radius:0px !important; border-top-right-radius:0px !important; color:#00468c !important}

.responsiveMenuTheme1 a:hover, .responsiveMenuTheme1 li.active > a, .responsiveMenuTheme1 li > span.separator:hover{color:#00468c !important}
.whitebgbox{width:95%;}
h1.blacktitle{font-size:1.5em !important; padding: 6px 7px;}
.editorsspot, .advertise {margin-left:0px !important}
.contact{width:100%;}
.toggleMenu{width:90.5% !important}
.toggleMenu{color:#fff !important}
#jform_contact_message{width:93% !important}

}
/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 980px )  {
	body { width: 768px;	margin: 0 auto;  }body {-webkit-text-size-adjust: none;}
	.logo {width:auto;}

	.box {

	height:83px;
	background:#FFF; width:727px

}
.bannerlftbox{width:495px;}
img{max-width:100% !important}
.secrightbox{width:98.6% !important;}
.bodycontainer1, .bodycontainer{width:98%;}
.toprgtbox{width:60% !important}
.servicesbox{margin-right:0px !important; margin-left:4px !important; width:242px !important; min-height: 384px;}
.servicepad{padding:0px !important
}
h1.maintitle{font-size:18px !important; }
.imgleft{margin-left:3px !important}
	.booksrgtbox{margin-top:4%; width:27%}
	.hotjobsbox {clear:both; height:164px; margin-top:2px;}
	.bookdisp{padding-top:15px;}
	.searchbox{margin-top:0%; margin-bottom:2%;}
	.ipadbox{float:left; margin-top:4%; margin-left:5px;}
	.submitanarticle{float:left; clear:none !important;  margin-top:4%; margin-left:4px; width:39%;}
	.headingtoafrica{clear:both; margin-left:0%;}
	.advertise{width:37%;}
	.boxfirst, .boxlast{width:47%; margin-bottom:3%;}
	.bottomlinksbox{width:94%;}
	.secleftbox{width:30%; float:left; clear:both;  margin-bottom:2%}
.secrightbox{width:25%; float:left; }
.seccontentbox{width:68%; float:left;  margin-right:5px; margin-bottom:2%}
	.menubg{background:none !important; height:auto !important}
	.toggleMenu{margin-top:1% !important; width:93% !important}
	.footerbox2, .footerbox3, .footerbox4{width:20% !important}
	.responsiveMenuTheme1 > li > a {
    display: block;
    padding: 7px 20px 5px 15px !important;
}

.responsiveMenuTheme1 li li li a.parent{padding:4px  31px!important;  background:#f1f1f1 !important}
.responsiveMenuTheme1 li li ul li a{padding:4px  31px!important; background:#ffd250 !important}
	.responsiveMenuTheme1 li li > a{padding: 7px 20px 5px 31px !important; background:#f1f1f1 !important; border-bottom:1px solid #cbcbcb !important}.responsiveMenuTheme1 span.opener{background-image:url(../images/down-bg.png) !important;background-repeat:no-repeat;background-position:11px center;width:37px;text-indent: 100px;overflow: hidden;display:block !important;/*padding: 15px 0;*/vertical-align: middle;position: absolute;right: 0; top:0 !important;}
.responsiveMenuTheme1 > li > a{background:#fff !important; border-bottom:1px solid #cbcbcb; margin-right:0px !important; color:#121212 !important}

.responsiveMenuTheme1 > li{margin-top:0px !important;}

.responsiveMenuTheme1 a:hover, .responsiveMenuTheme1 li.active > a, .responsiveMenuTheme1 li > span.separator:hover{ border-top-left-radius:0px !important; border-top-right-radius:0px !important; color:#00468c !important}

.responsiveMenuTheme1 a:hover, .responsiveMenuTheme1 li.active > a, .responsiveMenuTheme1 li > span.separator:hover{color:#00468c !important}
	}
	@media only screen and ( min-width:150px) and (max-width: 640px)  and (orientation:portrait) {
		
		.imgleft {margin-left:18px;}
		.box { height:160px !important;}
		.headingtoafrica{float:none !important; clear:both !important; margin-left:auto !important; margin-right:auto !important}
		.submitanarticle, .linkspartner{margin-bottom:15px !important;}
		.linkspartner{margin-left:25px;}
		.toggleMenu{width:87% !important}
				.bottomlinksbox{width:95% !important}
				.flag1, .flag2{width:50% !important}
				.submitanarticle{width:100% !important}
				.bottomlinksbox.effect2:before, .effect2:after{top:60% !important}
	}
	
	
	
	@media only screen and ( min-width:500px) and ( max-width: 640px )  and (orientation:landscape) {
		.servicepad{width:60% !important; margin-left:auto !important; margin-right:auto !important}
		.serchborder{width:77% !important}
		.hotjobsbox{width:48%; margin-left:2%; margin-top:23px !important;}
		.submitanarticle{width:58% !important; margin-right:10px}
		.headingtoafrica{margin-right:0px !important; margin-left:0px !important }
		.contact {width:47% !important}
		.leftcontentbox{width:50% !important; margin-right:2% !important}
		.editorsspot {margin-right:15px !important; width: 47% !important;}
		.whitebgbox{width:45% !important; margin-top:0px !important}
		.advertise{height:250px !important;}
		
	}
	
	@media only screen and ( min-width:500px) and ( max-width: 640px )  and (orientation:landscape), only screen and (-webkit-min-device-pixel-ratio: 2)
	{
		
		.advertise{height:230px !important;}
		
		}
	
	@media only screen and ( min-width:150px) and ( max-width: 499px )  and (orientation:landscape) {.servicepad{width:65% !important; margin-left:auto !important; margin-right:auto !important}
	.hotjobsbox{width:48%; margin-left:2%; margin-top:23px !important;}
	.submitanarticle{width:71% !important; margin-left:auto !important; margin-right:auto !important; float:none !important}
	.headingtoafrica{margin-right:15px !important; margin-left:0px !important }
	
			.leftcontentbox{width:50% !important; margin-right:2% !important}
		.whitebgbox{width:44% !important; margin-top:0px !important}
	}
	
	@media only screen and ( min-width:360px) and ( max-width: 640px )  and (orientation:landscape) {
		.box {width:98%}
		.booksrgtbox{width:50%;}
		.searchbox{float:left; width:48%; margin-left:2%; margin-top:0px;}

		
		
		.boxfirst, .boxlast {width:47%; margin-bottom:4%;  border-bottom:1px dotted #bdb9be; border-right:0 none !important
		}
		.editorsspot, .advertise{width:49%; float:left}
	}
	
	
		@media only screen and ( min-width:320px) and ( max-width: 480px )  and (orientation:landscape) {.serchborder{float:left; width:72% !important} .hotjobsbox{width:48%; margin-left:2%;}.advertise{width:100%; float:left} .editorsspot{ width:50%; }.readmore{margin-top:4%;}}
		
		
		
		
		@media only screen and ( min-width: 768px) and ( max-width: 1024px ) and (orientation:portrait){
		
		
		#thank{padding-left:64px;}
		#close{margin-left: 224px;left:9px;}
#reconnect{position: relative;right:121px;}

.notelabel{ width: 131%; margin-left: -41px;}
		
		
		
		
		}
		
		
		@media only screen and ( min-width: 768px) and ( max-width: 1024px ) and (orientation:landscape){
		
		#thank{padding-left:64px;}
		#close{margin-left: 261px;}
#reconnect{position: relative;right:92px;}

.notelabel{ width: 131%; margin-left: -41px;}
		
		
		
		
	
		
		}
		
		
		
		@media only screen and ( min-width:150px) and ( max-width: 670px )  and (orientation:portrait)
		{
		#thank{padding-left:64px;}
		#close{margin-left: 224px;}
#reconnect{position: relative;right:121px;}

.notelabel{ width: 131%; margin-left: -41px;}

}
		
		
		
		@media only screen and ( min-width: 150px) and ( max-width: 670px ) and (orientation:landscape){
		
		
		
		#thank{padding-left:64px;}
		#close{margin-left: 233px;}
#reconnect{position: relative;right:121px;}

.notelabel{ width: 131%; margin-left: -41px;}
		
		
		}