@charset "utf-8";



/*

	=========================================================================================================

	CSS FOR Eswatini Railways Website developed by Onswaziline in May 2017. 

	Contcat info@onswaziline.com for more details.

	

	COLOR CODES FROM LOGO

	

	DARK BLUE	#001E64

	RED			#C00

	GOLD		#D1C887

	WHITE		#FFF

	==========================================================================================================

*/





/*

	====================

	GOOGLE WEBFONTS USED

	====================

*/	
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');




body{ background: url(../bcg/main.png) repeat; font-family: 'Open Sans', sans-serif; color:#222; font-size:14px; padding:0; margin:0;}



.Clear{ clear:both;}

img{ border:0;}



a, a:visited{  color:#001E64; text-decoration:none; }

a:hover,  a.selected{color:#C00; text-decoration: underline;}



h1{font-family: 'Roboto Condensed', sans-serif; font-size:2em; color:#001E64; text-transform:uppercase; text-align:left;}

	h2{font-family: 'Roboto Condensed', sans-serif; font-size:1.7em; color:#C00; text-align:left; font-weight:400;}

		h3{font-family: 'Roboto Condensed', sans-serif; font-size:1.5em; color: #CDC747; text-align:left;}

			h4{font-family: 'Roboto Condensed', sans-serif; font-size:1.3em;color:#D00; text-align:left;}

#Container{ width:100%; margin:0 auto;}



#TopMenu{width:80%; margin:0 auto; background:#FFF; padding:0;}

	.TopMenuCorner {width: 0;height: 0; float:right;	border-top:30px solid #001E64;border-left: 10px solid transparent;}

	.TopMenu{ float: right; width:50%;padding:6px 20px 6px 0;  background:#001E64;text-align:right; font-size:0.9em; border-bottom:1px solid #FFF; font-family: 'Roboto Condensed', sans-serif;}

		.TopMenu ul{ padding:0; margin:-5px auto 0 auto;}

		.TopMenu ul li{display: inline;}

		.TopMenu ul li a,.TopMenu ul li a:visited{color:#D1C887; padding:10px; text-decoration: none; }

		.TopMenu ul li a:hover, .TopMenu ul li a.selected{ color:#FFF; text-decoration:none;}

	

#TopArea{ padding:0;width:80%; margin:0 auto; background:#FFF;}

	.Logo{ float:left; margin:-30px 20px 0 0; width:30%;}

		.Logo img{width:100%;}



	.TopSearch{color:#003300; margin:0 20px 0 auto;  width:40%; float:right; text-align: right;}	

		/* search box ADAPTED FROM https://www.formget.com/css-search-box/ */

		

		.button_box2 {margin:0 auto;}

		/*-------------------------------------*/

		.cf:before, .cf:after{content:"";display:table;}

		.cf:after{clear:both;}

		.cf{zoom:1;}

		/*-------------------------------------*/

		

		.form-wrapper-2 {width:100%; padding:0;}

		.form-wrapper-2 input {width:70%; padding: 10px 5px;float: left; border:1px solid #EEE;}

		.form-wrapper-2 input:focus {outline: 0;background: #fff;}

		.form-wrapper-2 input::-webkit-input-placeholder {color: #999;font-weight: normal;font-style: italic;}

		.form-wrapper-2 input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}

		.form-wrapper-2 input:-ms-input-placeholder {color: #999;font-weight: normal;font-style: italic;}

		.form-wrapper-2 button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;padding: 10px 5px; width:25%; color:#001E64;text-transform: uppercase;background: #D1C887; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}

		.form-wrapper-2 button:hover{background:#C00; color:#FFF;}

		.form-wrapper-2 button:active,.form-wrapper-2 button:focus{background:#C00; border:none;}

		.form-wrapper-2 button:before {content: '';position: absolute;border-width: 8px 8px 8px 0;border-style: solid solid solid none; border-color: transparent #D1C887 transparent;top: 12px;left: -6px;}

		.form-wrapper-2 button:hover:before{border-right-color:#C00;}

		.form-wrapper-2 button:focus:before{border-right-color:#C00;}

		.form-wrapper-2 button::-moz-focus-inner {border: 0;padding: 0;}

		

			

/*==============MAIN MENU======================*/

#MenuArea{width:80%; margin:0 auto; padding:0; background:#001E64;font-family: 'Roboto Condensed', sans-serif; border-top:2px solid #D1C887;  border-bottom:2px solid #FFF; }

		.Menu { width:96%; margin:0 auto;}

		.Menu ul { list-style: none; margin: 0;padding: 0; float: left; }

		.Menu a, .Menu h2 {display: block; text-align:center; color:#D1C887; text-decoration: none;padding:10px 25px; }

		.Menu a:hover { background:#C00; color:#FFF;}

		.Menu li {position: relative;}

		.Menu ul ul { position: absolute; z-index: 500;}

		.Menu ul li ul { background:#C00; margin-top:-1px; padding:5px 0 0 0;}

		.Menu ul li ul li a {padding:10px;color:#FFF;border-bottom:1px solid #D1C887; text-align:left; width:170px; }

		.Menu ul li ul li a:hover { background:none; color:#D1C887; }

		div.Menu ul ul,div.Menu ul li:hover ul ul,div.Menu ul ul li:hover ul ul{display: none;}

		div.Menu ul li:hover ul, div.Menu ul ul li:hover ul, div.Menu ul ul ul li:hover ul {display: block;}	

		

/*SLIDER*/



#SliderArea{width:80%; margin:0 auto;  padding:0;border-bottom:2px solid #D1C887;}

.skdslider{ width:100%; height:600px; position: relative; display: block; overflow:hidden; z-index:1;}

	.skdslider:after {    content: '';    padding-top: 50%;     display: block;}

		.skdslider ul.slides{ margin:0 auto; padding:0; list-style-type:none;}

.skdslider ul.slides li{   display: none;}

.skdslider ul.slides li img{    width:100%;	border:0;}

.skdslider ul.slide-navs {    bottom: 40px;    right: 10%;    position: absolute;	list-style-type: none;    margin: 0;    padding: 0;}

.skdslider ul.slide-navs li {    float: left;	background: url("../homeslider/slide-bg.png") no-repeat scroll 0 0 transparent;	height:20px;	width:20px;	margin-right:4px;	cursor:pointer;}

.skdslider ul.slide-navs li.current-slide {  background: url("../homeslider/slide-bg-active.png") no-repeat scroll 0 0 transparent;}

.skdslider .slide-desc {    background: url("../homeslider/slide_desc.png") repeat scroll 0 0 transparent;    left: 0;    padding:0 15px;    position: absolute;    bottom:25%;    max-width: 95%;	display:inline-block;}

.skdslider .slide-desc > h2 {    color: #FFF;    font-size:1.1em;    margin-bottom: 10px;    margin-top: 10px;    }

/*Some Responsive CSS */

@media screen and (max-width:1000px) {	
.skdslider{height:400px;}
}

@media screen and (max-width:767px) {

	.skdslider .slide-desc > h2 {		font-size: 20px;		margin-bottom: 5px;		margin-top: 5px;	}

	.skdslider .slide-desc > p {		font-size: 14px;		line-height: 15px;		margin-top: 5px;	}

	.skdslider .slide-desc > p a.more {		font-size:14px;	}

	}

.tender{	
	width: 30%;
}

@media screen and (max-width:650px) {	
.tender{width: 100%;}
}				

@media screen and (max-width:650px) {	
.skdslider{height:300px;}
}
/*SLIDER*/		


#TenderArea{width:80%; margin:0 auto;  padding:0; background:#F2F4EA; text-align:center;}
.TenderArea{ width:90%; margin:0 auto;  padding:0;}

#HomeTextArea{ width:80%; margin: 0 auto; padding:20px 0 ; background:#FFF; border-bottom:1px solid #D1C887;}

	.IntroLeft{ width:40%; float:left; margin:0 20px; text-align:justify;}
	.IntroLeft img{ border:0; width:100%; }
	
	.IntroRight{ width:40%; float:right; margin:0 20px 0 0; padding:20px;}

	.IntroRight iframe { width:100%; margin:15px 0; border:0;    -moz-box-shadow:   0 5px 5px -5px #333, 0 -5px 5px -5px #333;   -webkit-box-shadow:  0 5px 5px -5px #333, 0 -5px 5px -5px #333;    box-shadow:  0 5px 5px -5px #333, 0 -5px 5px -5px #333;}


#HomeTextArea2{ width:80%; margin:20px auto; padding:20px 0 ; background:#FFF;}

	#HomeTextArea2 a:hover{ color:#C00;}

	.NewsBox{ width:65%; margin:0 20px; float:left; background: #F2F2E1; padding:10px;}

		.NewsBox h3{ margin:-10px 5px 0 -10px;background:url(../bcg/blue.png) repeat-x; padding:5px 10px; width:100%; color:#D1C887;}

		.NewsBoxs{clear: both; width:90%; margin:0 20px; float:left; background: #fff; padding:10px;}

		.NewsBoxs h3{ margin:-10px 5px 0 -10px; padding:5px 10px; width:100%; color:#D1C887;}

	.NewsItem{ width:100%; padding:5px 0; border-bottom:1px solid #D1C887;}		

		

	.Box{ width:30%; margin-right:30px; float:left; background:#D1C887; padding:0;}

		.Box h3{ margin:0;background:url(../bcg/blue.png) repeat-x; padding:5px 10px; color:#D1C887;}

		.Box img{ width:100%;}

	.QLBox{ width:20%; float:left; padding:0 10px; margin-top:-10px;}
		.QLBox span {display:block; margin:20px 0;}
				.QLBox span img{width:100%;}	
	.QLBox span a i{ font-size:4em; margin:0 20px; display:inline; }


	





#TextArea{ width:80%; margin:0 auto; padding:0; background: url(../bcg/pagemain.jpg); min-height:300px; text-align:justify;}

.TextArea{ width:90%; margin:0 auto; padding:20px 40px; }

	#TextArea h1{ border-bottom:1px solid #EEE;}



	.Values{ color:#D00; font-weight:bold; font-size:1.2em;}

		

	/*******THE EXCO AND BOARD PROFILES******/	
	.profile-box{ float:left; margin:20px; text-align:center; width:20%; height:350px; font-size:1em; color:#555;}	
	.profile-box1{margin:20px auto; text-align:center; width:20%; height:350px; font-size:1em; color:#555;}		
	.profile-box h4, .profile-box1 h4 { font-weight:500; color:#C00;text-align:center;}			
	.profile-box img, .profile-box1 img { margin:0 auto;  width:100%;-webkit-box-shadow: 0 8px 6px -6px #001E64;
	   -moz-box-shadow: 0 8px 6px -6px #001E64;
	        box-shadow: 0 8px 6px -6px #001E64;}
	
	/******* NEWS ******/	.news-box{margin:20px auto; width:100%;}	.news-boxLeft{ float:left; margin-right:20px; width:15%;}			.news-boxLeft img { margin:0 auto; border:2px solid #D1C887; width:100%;}	.news-boxRight{ float:right; width:80%;}	


	/*******NOTICES, TENDERS AND MAGAZINE BOXES******/	

	.prbox{ float:left; margin:20px; text-align:center; width:300px;}

		.prbox img{ width:100%;border:2px solid #D1C887;}


	.Sectionbutton {  margin:10px 20px; display:inline-block;  border:none;}
	
	.Sectionbutton a{ padding:10px 20px; background:#D1C887; color:#001E64;  font-size:1.2em ;	 text-align: center; }

	.Sectionbutton a:hover{   color: #FFF;    background:#001E64;}
	
	
.ContactBox{ float:left; width:30%; margin-right:35px; text-align:left;}			



/*=======================FORMS==========================*/

	#GenericForm {width:96%; margin: 0 auto; background: #FFF; padding:20px; border:4px solid #D1C887;}

	.field {    display: block; margin:15px 20px; float:left; width:45%;}

	label {    display: block;color:#001E64;text-align:left; font-weight:bold; }

	.input{   padding: 5px; border: 1px solid #D1C887; width:90%; color: #0066CC;    }

	.button,	.button a{  margin:60px 10px 10px 10px; padding:10px 20px; color: #FFF;     text-align: center;    /* Background gradient */    background:#001E64; border:none;font-size:1.2em ;	}

	.button:hover,	.button a:hover{  background:#D1C887; color:#001E64; }



	

	.error{ color:#FFF;  width:250px; padding: 10px; background: #F00 ; margin:0 10px; display:block; text-align:left;}

		.error p, .successful p { width:100%;}

				.successful{ color:#000; float:left;  width:80%; padding: 10px; background: #9C0; margin:50px 20px; display:block; text-align:left;}



/****==================GALLERY PAGES========================***/

.gallery-cover{ width:260px; margin:10px 30px 10px 10px; float:left; font-weight:bold; font-size:0.9em; color:#39F; text-align:center; min-height:350px;}

	.gallery-cover img{ width:95%; border:10px solid #D1C887;}

			.gallery-cover  p a, .gallery-cover  p a:link{ padding:10px; background:#D1C887; color:#001E64; text-decoration:none; font-weight:bold; display:block; margin-top:-20px; width:95%;}				

				.gallery-cover  p a:hover, .gallery-cover  p a:active{ background: #001E64; color:#D1C887;}

				

#FooterArea{ width:80%; margin: 0 auto; padding:20px 0; background: #001E64; color:#D1C887; border-bottom:3px solid #D1C887; border-top:1px solid #D00; font-size:0.9em;}

	#FooterArea a, #FooterArea a:link { text-decoration:none; color:#FFF;}	

		#FooterArea a:active, #FooterArea a:hover { text-decoration:underline; color:#D1C887;}

			.FLogo img{width:100%; }

		.FText{ float:left; width:22%; margin:-25px 20px 0 20px;}

		.fbox{ float:left; width:16%; padding:8px 5px; margin:30px 15px 0 0;}

			h3{ font-size:1.2em;}

			.fbox ul{line-height:1.1em;list-style:none;margin: 0;padding: 0;}

				.fbox ul li{  padding:0; margin:0;}

					.fbox ul li a{ display: block;padding: 4px 0; text-decoration:none; }

					

#FooterArea2{ width:80%; margin: 0 auto; padding:0; }



		.FooterMenu{ float: left; width:50%;padding:6px 0 6px 20px;background:url(../bcg/Tmenu.png) repeat-x;border-top:1px solid #D1C887; font-size:0.9em;}

		.FooterMenu a:active, .FooterMenu a:hover {  text-decoration:underline; color:#C00;}

		

		.FooterMenuCorner {width: 0;height: 0; float:left;	border-top:30px solid #D1C887;border-right: 10px solid transparent;}		

		.FooterText{ float:right; width:30%;padding:6px 20px;font-size:0.8em;}





/***=============ADMIN SECTION ==============================**/

.AdminButtons a, .AdminButtons a:link  {padding:10px; width:200px; display:block; margin:20px;background:#C00; color:#FFF;  font-weight:bold; text-align:center; float:left;}

.AdminButtons a:hover, .AdminButtons a:active{background:#001E64;}



	.field2 {    display: block; margin:15px 0; width:90%;}

	.input2{   padding: 5px;  border: 1px solid #333;    width:100%; }


@media only screen and (max-width:1000px) {
	.NewsBox, .QLBox{clear:both; width:100%; float:none; margin:20px auto; text-align:justify;}
	.NewsBoxs, .QLBox{clear:both; width:90%; float:none; margin:20px auto; text-align:justify;}
		.QLBox span {display:inline; margin:0 20px ;}
				.QLBox span img{width:200px;}	
	.QLBox span a i{ font-size:4em; margin:0 20px; display:inline; }
	
	
}

@media only screen and (max-width: 800px) {
	.IntroLeft, .IntroRight{clear:both; width:90%; float:none; margin:20px auto; text-align:justify;}
}