@charset "utf-8";
/*
	=========================================================================================================
	CSS FOR www.centralbank.org.sz Updated by Onswaziline in June 2018. Contcat info@onswaziline.com for more details.
	==========================================================================================================
*/



/*
	==========================
	GENERAL WEB PAGE SETTINGS
	==========================
*/

	body{ padding:0; margin:0; font-size:14px; color:#333; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   background:#F1ECE2; }
	
	h1{ font-size:1.8em; color:#D4B26A; font-weight:normal; text-transform:uppercase;  text-shadow:1px 1px #999;}
	h2{ font-size:1.5em; color:#142B65; font-weight:normal; }
	h3{ font-size:1.3em; color:#142B65; font-weight:normal; }
	
	img a{ border:none;}
	
	a, a:visited{  color:#A66939; } 
	a:hover,  a.selected{color:#142B65; text-decoration:none;}
		 
	.clearfix{ clear:both;}

/*
	========================
	THE WHOLE PAGE CONTAINER
	========================
*/
	#Container{ width:100%; margin:0 auto;}
	.Container{ width:90%; margin:0 auto; background:#FFF;
	box-shadow: 4px 0 2px -2px #BBB , -4px 0 2px -2px #BBB; 
	 -moz-box-shadow: 4px 0 2px -2px #BBB, -4px 0 2px -2px #BBB; 
	-webkit-box-shadow: 4px 0 2px -2px #BBB, -4px 0 2px -2px #BBB;}
	

	/* BOXES */
	.zero{ width:5%; float:left;}
	.one{ width:10%; float:left;}
	.fifteen{ width:15%; float:left;}
	.two{ width:21%; float:left;}
	.twenty{ width:20%; float:left;}
	.twentyfive{ width:25%; float:left;}
	.thirty{ width:30%; float:left;}
	.forty{ width:40%; float:left;}
	.forty5{ width:45%; float:left;}
	.fifty{ width:50%; float:left;}
	.fiftyfive{ width:55%; float:left;}
	.six{ width:60%; float:left;}
	.sixty{ width:65%; float:left;}
	.seven{ width:70%; float:left;}
	.eight{ width:80%; float:left;}
	.nine{ width:90%; float:left;}	

/*
	==============================================
	TOP SECTION WITH LOGO AND BUILDING BACKGROUND
	==============================================
*/	

	#Top{ width:100%; padding:0;background:url(../bcg/building.png) no-repeat right, url(../bcg/top.png) repeat-y; }  
	.Top{ width:90%; padding:20px; margin:0 auto;}  	
	
		/*THE LOGO */
		.Logo{ width:25%; float:left; margin-right:20px;}
			.Logo img{ width:100%; }

				
		/* SOCIAL MEDIA LINKS */
		.TheSocialSpace{ width:40%; float:right; margin:60px 100px 0 auto;}
			.socialmedia{ width:30px; float:right; margin:0 10px 0 0; } 
				.socialmedia img{ width:100%; }	
			
/*
	==========================================================
	SECTION WITH LATEST RELEASE, SEARCH AND SOCIAL MEDIA LINKS
	===========================================================
*/	

	#UpdateStrip{ width:100%; padding:2px 0;background:#D4B26A; margin:0 auto; }  
	.UpdateStrip{ width:96%; padding:0 20px; margin:0 auto;} 
 	
		/*RELEASE AREA */
		.ReleaseArea{ width:40%; float:left; margin:0 20px 0 auto;}

		.ReleaseAreaL{ width:30%; float:left; color:#020C51; padding: 0; text-align:left; margin-top:10px; font-weight:bold;}	
		.ReleaseAreaR{ width:60%; float:left; padding:10px 20px 10px 0; font-size:0.9em;}
			.ReleaseAreaR a,.ReleaseAreaR  a:visited{  color:#020C51; } 
			.ReleaseAreaR a:hover,  .ReleaseAreaR a.selected{color:#A66939; text-decoration:none;}

		/*SEARCH AREA */
		.SearchBoxArea{ width:40%; float:right; margin:-8px 20px 0 auto;}
			.SearchBox{ width:90%; margin-top:-20px;}/*The Search bar*/	


	
		/* LINKS */	
		.OtherLinks{ width:10%; float:right; margin:10px 0 0 10px;padding:5px; font-weight:bold; text-align:center; } 
			.OtherLinks a, .OtherLinks a:visited{color:#142B65;text-decoration:none;   } 
			.OtherLinks a:hover,  .OtherLinks a.selected{ color:#A66939;}
		
 
	@media(max-width:1215px) 
		{ 
			.OtherLinks{ width:10%; float:right; margin:10px 0 0 10px; font-size:1em; padding:5px; font-weight:bold; text-align:center; } 

		}
 
	@media(max-width:992px) 
		{ 
			.OtherLinks{ width:10%; float:right; margin:0 0 0 10px; font-size:1em; padding:5px; font-weight:bold; text-align:center; } 

		}

 
	@media(max-width:791px) 
		{ 
			.socialmedia{ width:25px; float:right; margin:10px 10px 0 0; } 
		}
 
	@media(max-width:791px) 
		{ 
			.OtherLinks{ width:90%; float:right; margin:0 0 0 10px; font-size:1em; padding:5px; font-weight:bold; text-align:right; } 
		}

/*
	==========================================================
	DROPDOWNS-MASTER RESNSIVE MENU
	===========================================================
*/				
	#MainMenu{ width:100%; margin:1px auto; background: #020C51;}
	#Menu{ width:100%; margin:0 auto; padding:0;}
	#Menu:before, #Menu:after {  content: "";  display: block;}
	#Menu:after { clear: both; }
	#Menu li {  float:left;  position: relative;  list-style: none;}
	#Menu a {  float:left;  padding:10px 8px;  text-decoration: none;  text-transform: uppercase; color:#FFF;}
	#Menu a:hover { background:#D4B26A; color:#000;}
	#Menu ul {  margin: 20px 0px 0px 0px;  opacity: 0;  visibility: hidden;  position: absolute;top: 35px; background:#D4B26A;   left: 0px;  z-index: 10;}
	#Menu li:hover > ul {  opacity: 1; visibility: visible;  margin: 0px;}
	#Menu ul ul {  top: 0px;  left: 160px;  margin: 0px 0px 0px 5px;}
	#Menu ul li a { margin-left:-40px; padding:10px; border-bottom:1px solid #DCDCB8;}
	#Menu ul a {  padding: 10px;  width:180px; background:#D4B26A; z-index:100;  display: block;  white-space: nowrap;   float: none;  text-transform: none; color:#000; font-weight:normal;  }
	#Menu ul a:hover { background:#020C51;color: #FFF;}
	#Menu ul li:first-child > a:after {  content: '';  position: absolute;  left: 10px;  top: -6px;  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-bottom: 6px solid #D4B26A;}
	#Menu ul ul li:first-child > a:after {  left: -55px;  top: 50%;  margin-top: -6px;  border-top: 6px solid transparent;  border-right: 6px solid #020C51;  border-bottom: 6px solid transparent;}
	#Menu-trigger { /* hide initially */display: none;  font-weight:normal; }

	/* HIGHLIGHTS THE CURRENT SECTION */
	.CurrentPage{ background: #D4B26A; }
	
/*
	====================
	THE HOMEPAGE SLIDER
	====================
*/
						
	#HomeSlider{ width:100%; margin:2px auto 5px auto;} 
	  
	  .SliderContainer{position: relative; margin: 0 auto; top: 0px; left: 0px; width:1000px; height:300px; overflow: hidden; visibility: hidden;}      
		.TheSlides{cursor: default; position: relative; top: 0px; left: 0px; width: 1000px; height: 300px; overflow: hidden;}
			.Caption1{position: absolute; top: 20px; left: 40px; padding:20px; width:40%;color:#333;}
				.Caption1 h2{ font-size:2em;;}
				.Caption1 p{ font-size:1.2em; text-align:justify;}
			.Caption2{position: absolute; bottom: 40px; left: 40px;  width:40%; }
				.ReadMore a, .ReadMore a:link{color:#020C51; font-weight:bold; text-decoration:none;padding:10px 20px;}
					.ReadMore a:hover, .ReadMore a:active{ background:#D4B26A; color:#020C51; }		
				/* jssor slider bullet navigator skin 05 css */
			/*
			.jssorb05 div           (normal)
			.jssorb05 div:hover     (normal mouseover)
			.jssorb05 .av           (active)
			.jssorb05 .av:hover     (active mouseover)
			.jssorb05 .dn           (mousedown)
			*/
			.jssorb05 {            position: absolute;        }
			.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {            position: absolute;            /* size of bullet elment */            width: 16px;
				height: 16px;            background: url('../slider/b05.png') no-repeat;            overflow: hidden;            cursor: pointer;        }
			.jssorb05 div { background-position: -7px -7px; }
			.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
			.jssorb05 .av { background-position: -67px -7px; }
			.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

			/* jssor slider arrow navigator skin 22 css */
			/*
			.jssora22l                  (normal)
			.jssora22r                  (normal)
			.jssora22l:hover            (normal mouseover)
			.jssora22r:hover            (normal mouseover)
			.jssora22l.jssora22ldn      (mousedown)
			.jssora22r.jssora22rdn      (mousedown)
			*/
			.jssora22l, .jssora22r {            display: block;            position: absolute;            /* size of arrow element */            width: 40px;
				height: 58px;            cursor: pointer;            background: url('../slider/a22.png') center center no-repeat;             overflow: hidden;        }
			.jssora22l { background-position: -10px -31px; }
			.jssora22r { background-position: -70px -31px; }
			.jssora22l:hover { background-position: -130px -31px; }
			.jssora22r:hover { background-position: -190px -31px; }
			.jssora22l.jssora22ldn { background-position: -250px -31px; }
			.jssora22r.jssora22rdn { background-position: -310px -31px; }


/*
	========================
	THE HOMEPAGE INTRO AREA
	========================
*/

	#IntroTextArea{ width:100%; margin:10px auto;background:#FFF;}
	.IntroTextArea{ width:90%; padding:0 20px; margin:0 auto;} 
		
	.TheTabs{padding:20px; background:#FFF; font-size:0.8em; width:65%; float:left;} /*The Area with Tabbed menu*/
		#tabs	{	margin: 0;	overflow: hidden;	padding: 0;	zoom: 1;	position:relative;	top:2px;	z-index: 1;} /*Classified Menu*/
			#tabs li {	display: block;	list-style: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	margin: 0;	margin-right: 5px;	padding: 0;	float: left;}
				#tabs li a {display: block;	padding: 10px 15px; border-bottom: none; text-decoration: none; color:#222; border:1px solid #E6DFC4; font-weight:bold;}
					.tab-section { background:#E6DFC4; padding: 20px; min-height:335px;}
					.tab-section h3 { padding-bottom:10px; border-bottom:solid 1px #999; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
						.tab-section p a:hover { color:#000;}
						#tabs li a.current {	background:#E6DFC4 ;	color: #222;}	
						
		.TheBox1{margin-right:20px;}
		.TheBox2{margin:40px 20px 0 20px;text-align:center; }
		.TheBox{ text-align:center; margin-right:20px;}
		.TheBox img, .TheBox1 img, .TheBox2 img{ width:100%;}
		
		
		.IntroTextAreaBox2 {width:28%; float:left;}	
			.IntroTextAreaBox2 img { width:100%;}	
			.IntroTextAreaBox2 li { list-style:url(../graphics/list.png); margin:5px 0;}	

/*
	========================
	THE RATES AREA
	========================
*/
	
	#RatesArea{ width:100%; margin:0 auto;background:#E6DFC4; padding:0 0 10px 0; border-top:1px solid #D4B26A;}
	.RatesArea{ width:90%; margin:0 auto; padding:0;}

	.RatesBox{ padding:20px; width:28%; float:left;}
		.RatesBoxItem{ padding:10px 0; display: block; border-bottom:1px solid #FFF; width:100%;}	
			.RatesBoxItemL{ float:left; width:40%;padding-right:20px}
			.RatesBoxItemM{ float:left; width:30%;padding-right:20px}
			.RatesBoxItemR{ float:left; width:5%;}

/*
	========================
	THE CURRENCY AREA
	========================
*/
	#CurrencyArea{ width:90%; margin:10px auto; background:#FFF;}
	#CurrencyArea h2{ border-bottom:1px solid #DDD; padding-bottom:5px; text-transform:uppercase; text-align:center;}		


/* VIDEOS*/
.p-video-box video, .p-video-box iframe { width:100%; height: 300px; margin:20px auto; text-align:center; }


/*
	========================
	THE MAIN TEXT AREA
	========================
*/
	#TextArea{ width:100%; margin:0 auto;background:#FFF;}
	.TextArea{ width:90%; margin:0 auto;  min-height:400px; padding:10px;}

		/*SUB MENU OF LEFT OF PAGE */
		.SubMenu { background: #ECEBDD; padding:20px 0 0 0; margin:0 20px 0 0; border-right:1px solid #D4B26A;}
		
			.TheSubMenu { padding:0 20px 20px 20px;}
				.TheSubMenu li{ list-style:none; margin:10px 0 10px -40px;}
					.TheSubMenu li a, .TheSubMenu li a:visited{  color:#142B65;text-decoration:none; } 
						.TheSubMenu li a:hover,  .TheSubMenu li a.selected{color:#A66939; text-decoration:underline; }

			.linkimage{ margin-bottom:15px; width:100%;}
				.linkimage img{width:100%;}

				
		/*CONTENT AREA OF RIGHT OF PAGE */
		.TheContent{ padding:20px; text-align:justify;}
			.TheContent h1,	.TheContent h2,	.TheContent h3 { text-align:left;} 
				.TheContent li{ list-style:url(../graphics/list.png); margin-left:-20px; padding:5px 0;} 	
				

		/*FINTECHSUB MENU OF LEFT OF PAGE */
		.FintechSubMenu { background: #ECEBDD; padding:0; margin:0; border-right:1px solid #D4B26A;}
				
		/*FINTECH CONTENT AREA OF RIGHT OF PAGE */
		.TheFintechContent{ padding:20px; text-align:justify;}
		
			.TheFintechContent a, .TheFintechContent a:link{color:#F58634;}
				.TheFintechContent a:hover, .TheFintechContent a:active{ color:#30313E;}

			.TheFintechContent h1,.TheFintechContent h2 { text-align:left; color:#30313E;} 
			.TheFintechContent h3 { text-align:left; color:#F58634;} 
				.TheFintechContent li{ list-style: url(../2018cbefintechchallenge/list.png); margin-left:-20px; padding:5px 0;} 	
				.TheFintechContent td{ text-align:left;} 	
		
		/* MAIN PAGE POINTERS */
		.SubSection{ float:left; width:26%;  padding:20px 10px; background:#CCAA55;  margin:30px 10px; text-align:center;-moz-box-shadow: -3px 8px 6px -6px #333;-webkit-box-shadow: -3px 8px 6px -6px #333;box-shadow: -3px 8px 6px -6px #333; min-height:60px;}
			.SubSection a, .SubSection a:link{color:#444466; text-decoration:none;  padding:5px; }
				.SubSection a:hover, .SubSection a:active{ color:#FFF; text-shadow: 1px 1px 1px #777;}
				
		.SubSection1, .SubSection2{ float:left; width:26%;  padding:20px 10px; background:#CCAA55;  margin:30px 10px; text-align:center;-moz-box-shadow: -3px 8px 6px -6px #333;-webkit-box-shadow: -3px 8px 6px -6px #333;box-shadow: -3px 8px 6px -6px #333; min-height:30px;}
			.SubSection1 a, .SubSection1 a:link, .SubSection2 a, .SubSection2 a:link{color:#444466; text-decoration:none;  padding:5px; }
				.SubSection1 a:hover, .SubSection1 a:active, .SubSection2 a:hover, .SubSection2 a:active{ color:#FFF; text-shadow: 1px 1px 1px #777;}
				
		/* THE EXCO AND BOARD PROFILES */
		.ProfileBox{ float:left; margin:20px 10px; text-align:center; width:20%; min-height:300px; }
			.ProfileBox em{ font-style:italic; color: #A48731;}
				.ProfileBox img{ margin:0 auto; width:100%;}
				
		/* THE EXCO AND BOARD PROFILES */
		.ProfileBox1{ float:left; margin:5px 10px 80px 10px; text-align:center; width:20%; min-height:300px; }
			.ProfileBox1 em{ font-style:italic; color: #A48731;}
				.ProfileBox1 img{ margin:0 auto; width:100%;}


		/* THE BOXES FOR PUBLISHED ITEMS */
		.pbox{ float:left; margin:10px 20px 100px 0 !important; text-align:center; width:20%; min-height:300px;}
		.pbox img{ width:100%;  -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000;	        box-shadow: 0 8px 6px -6px #000; margin:10px 0; }


		/* COINS PAGE */
		.Coins{ float:left; width:28%; margin:20px; -moz-box-shadow: -3px 8px 6px -6px #333;-webkit-box-shadow: -3px 8px 6px -6px #333;box-shadow: -3px 8px 6px -6px #333;}
			.Coins img{width:100%;}
			
		/* BANK NOTES PAGE */
		.Notes{ float:left; width:46%; margin:20px 10px;}
			.Notes img{width:100%;}


		/* THE BOXES FOR PUBLISHED ITEMS WITH COVER PICTURE */
		.pbox{ float:left; margin:20px 10px; text-align:center; width:20%; height:280px;}
			.pbox img{ width:100%;  -webkit-box-shadow: 0 8px 6px -6px #020C51;	   -moz-box-shadow: 0 8px 6px -6px #020C51;	        box-shadow: 0 8px 6px -6px #020C51; margin:10px 0; }		

		
		/* THE BOXES FOR PUBLISHED ITEMS WITH COVER PICTURE */
		.pboxAlt{margin:5px 0; width:100%; background: url(../graphics/downloadpdf.png) no-repeat left 0; padding:8px 0 10px 50px;}

/*FAQS*/
.faqs h4 { color: #5a5a5a; margin-bottom: 0.5em; margin-top: 0.8em; font-weight: bold; } 
.faqs span { margin-left: 2em; color: #5a5a5a; }

/* CONTACT FORM */
#contactform {width:90%; overflow:auto; margin:0 auto; }
.field { display: block; margin:10px 0;}
label { display: block; text-align:left; width:100%;; padding:5px 0; font-weight:bold; color:#444466; }
.input{ padding: 5px;    border: 1px solid #444466;    width:100%;   }
.button, .button a{background:#CCAA55; color:#444466;text-decoration:none; padding:10px 30px; font-size:1.5em; border:none;}
.button:hover,	.button a:hover{ background:#444466; color:#CCAA55;   }
								
.error{ 
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.successful{ 
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
/*.error p, .successful p { width:100%;}*/
/*
	========================
	THE FOOTER AREA
	========================
*/
	#FooterArea{ width:100%; margin:10px auto 0 auto; padding:10px 0; background:#020C51; border-top:2px solid #D4B26A	; color:#D4B26A	;}
		#FooterArea a, #FooterArea a:link{ color:#DDD; text-decoration:none;}
			#FooterArea a:hover, #FooterArea a:active{color: #D4B26A;}
				#FooterArea ul li{ margin-left:-20px;}
		.f-box1{ width:20%; float:left; padding: 0 20px;}
			.f-box1 img{ width:60%; margin:0 auto;}
		.f-box2{padding:0 10px; float:left; width:13%; text-transform:uppercase;}
			.f-box2 li{ margin:10px 0; list-style:url(../graphics/list2.png);}
		.f-box3{ width:25%; padding:10px 5px 0 10px; float:left;}	
	
		/* THE CONTACT DETAILS */
		.physical{ background:url(../graphics/physical.png) no-repeat; padding:6px 5px 6px 40px; margin-bottom:5px;}
		.telephone{ background:url(../graphics/telephone.png) no-repeat; padding:6px 6px 5px 40px; margin-bottom:5px;}
		.fax{ background:url(../graphics/fax.png) no-repeat; padding:6px 5px 6px 40px; margin-bottom:5px;}
		.email{ background:url(../graphics/email.png) no-repeat; padding:6px 5px 6px 40px; margin-bottom:5px;}
		.postal{ background:url(../graphics/postal.png) no-repeat; padding:6px 5px 6px 40px; margin-bottom:5px;}

		.sitemap{ background:url(../graphics/sitemap.png) no-repeat; padding:6px 5px 6px 40px; margin-bottom:5px;}	

	
/*
	========================
	THE ADMINISTRATOR AREA
	========================
*/

	/* THE BOXES FOR ADMIN SECTION IMAGES */
	.admin-box{ float:left; margin:20px 10px; text-align:center; width:100px;}
		.admin-box img{ width:100%; margin:10px 0; border:none; }


/*
		=======================================
		=======================================
			RESPONSIVENESS OF HORIZONTAL MENU
		=======================================
		=======================================
*/
		


	@media(max-width:1342px) 
		{ 
		
			.ReleaseArea{ width:100%;  margin:0 auto;}
			.SearchBoxArea{ width:60%; float:left; margin:0 20px 0 auto;}

			/*=====================================
				RESPONSIVENESS OF HORIZONTAL MENU
			======================================*/
		

			#Menu-wrap { position: relative; }
			#Menu-wrap* { box-sizing: border-box; }
			#Menu-trigger {  display: block; width:80%; margin:0 auto;  height: 40px;  line-height: 40px;  cursor: pointer;  padding: 5px 0px 0px 40px;  color: #FFF; background: url(../graphics/menu.png) no-repeat left, #020C51; }
			#Menu {  margin: 0px;  padding: 10px 20px;  position: absolute;  top:45px; width:90%; margin:0 auto;  z-index: 10;  display: none;  box-shadow: none; background:#020C51;}
			#Menu:after {  content: '';  position: absolute;  left: 25px;  top: -8px;}
			#Menu ul {  position: static;  visibility: visible;  opacity: 1;  margin: 0px;  background: none;  box-shadow: none;}
			#Menu ul ul {  margin: 0px 0px 0px 20px;  box-shadow: none;}
			#Menu ul ul li:first-child > a:after {  border-top: 0px;  border-bottom: 0;}
			#Menu li {  position: static;  display: block;  float: none;  border: 0px;  margin: 5px;  box-shadow: none;  background: none !important;}
			#Menu ul li {  margin-left:0;  box-shadow: none;}
			#Menu a {  display: block;  float: none;  padding:5px 0;  color: #FFF; border-bottom:1px solid #D4B26A;}
			#Menu a:hover {color:#FFF; background:none;  }
			#Menu ul a {  padding:10px 0;  width: auto; background:none;  color: #D4B26A;}
			#Menu ul a:hover { background:none; color:#FFC; }
			#Menu ul li a { margin-left:-40px; padding:10px; border-bottom:1px solid #FFA;}
		
			#Menu ul li:first-child > a:after {  content: '';  position: absolute;  left:120px;  top: -4px;  border-left: 6px solid transparent;  border-right: 6px solid transparent;  border-bottom: 6px solid #020C51;}

		}
			
 
	@media(max-width:1050px) 
		{ 
			.LogoName{ width:80%;  font-family:Arial, Helvetica, sans-serif; font-weight: bold; float:left; margin-right:20px; color:#D4B26A; font-size:2em; text-transform:uppercase;     text-shadow:1px 1px #333;}	

		} 

		
 
	@media(max-width:950px) 
		{ 
				
			.RatesBox{ padding:20px; width:40%; float:left;}
			
			.SubSection2{ display:block; width:90%;  padding:10px; background:#CCAA55;  margin:10px auto; text-align:center;-moz-box-shadow: -3px 8px 6px -6px #333;-webkit-box-shadow: -3px 8px 6px -6px #333;box-shadow: -3px 8px 6px -6px #333; min-height:20px;}
				
		/* THE EXCO AND BOARD PROFILES */
		.ProfileBox{ float:left; margin:20px 10px; text-align:center; width:25%; }
		.ProfileBox1{ float:left; margin:20px 10px; text-align:center; width:25%; }

		} 

	@media(max-width:770px) 
		{ 
			.TheTabs{ margin:10px auto; background:#FFF; font-size:0.8em; width:90%; display:block;} /*The Area with Tabbed menu*/
			.IntroTextAreaBox2 {text-align:center; background:#ECECE1; margin-bottom:10px; width:100%; display:block;}	

			.f-box1{ width:70%; display:block; padding: 20px; margin:0 auto;}
				.f-box1 img, .f-box2{ display:none;}

		}
		
 
	@media(max-width:710px) 
		{ 
			.LogoName{ width:80%;  font-family:Arial, Helvetica, sans-serif; font-weight: bold; float:left; margin-right:20px; color:#D4B26A; font-size:1.5em; text-transform:uppercase;     text-shadow:1px 1px #333;}
				
			.RatesBox{ padding:20px; width:90%; margin:0 auto;}
		
			.SubMenu { display:none;}
			.TheContent{ padding:20px; width:90%; margin:0 auto; text-align:justify;}
			
			.SubSection, .SubSection1{ display:block; width:90%;  padding:10px; background:#CCAA55;  margin:10px auto; text-align:center;-moz-box-shadow: -3px 8px 6px -6px #333;-webkit-box-shadow: -3px 8px 6px -6px #333;box-shadow: -3px 8px 6px -6px #333; min-height:20px;}

		} 
 
	@media(max-width:590px) 
		{ 
			.LogoName{ width:80%;  font-family:Arial, Helvetica, sans-serif; font-weight: bold; float:left; margin-right:20px; color:#D4B26A; font-size:1.2em; text-transform:uppercase;     text-shadow:1px 1px #333;}	
			
			.SearchBoxArea{ width:100%;  margin:0 20px 0 auto;}
				
		/* THE EXCO AND BOARD PROFILES */
		.ProfileBox{ float:left; margin:20px 10px; text-align:center; width:40%; }
		.ProfileBox1{ float:left; margin:20px 10px; text-align:center; width:40%;}

		}