/*
      Created by Rupert Jefferies of Web Guru Africa
	  Web: www.webguruafrica.com
	  E-Mail: rupert@webguruafrica.com
	  June 2012
*/

* {margin: 0px; padding: 0px;}

body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #333;
 background-color:#eaf3fb;
 background-image:url(../images/bg-background.png); background-position:top left; background-repeat:repeat;
}

a { outline: none; }

/*----------------- WRAPPER -----------------*/

#wrapper { 
 margin: 0 auto;
 width: 960px;
 -moz-box-shadow: 0px 0px 20px #b7b7b7; -webkit-box-shadow: 0px 0px 20px #b7b7b7; box-shadow: 0px 0px 20px #b7b7b7;
}

/*----------------- HEADER -----------------*/

#header {
 width: 960px;
 color: #333;
 height: 100px;
 margin: 0px 0px 0px 0px;
 background: #fff;
}

#header ul { float: right; margin: 10px 25px; padding: 7px; list-style-type:none; }
#header li { margin: 5px; color:#333; }
#header a {color:#3399ff; font-size:14px; text-decoration:none; }
#header a:hover {text-decoration:underline;}

/*----------------- NAVIGATION -----------------*/

#navigation {
 width: 960px;
 color: #333;
 padding: 0px;
 height: 50px;
 margin: 0px 0px 0px 0px;
 background: #fff;
}

#topnav {
	position: absolute;
	margin: 0px 0px 0px 22px;
	padding: 0;
	background-color: #3399ff;
	width: 913px;
	background-image:url(../images/bg-topnav.gif); background-position:bottom left; background-repeat:repeat-x;
	 }

#topnav li {
	float: left;
	list-style: none; }

#topnav li a {
	display: block;
	padding: 15px 15px;
	text-decoration: none;
	color: #fff;
	text-shadow: 1px 1px 1px #1a73cb;
}

#topnav li a:hover {
	color: #fff;
	background-color: #2385e6;
	background-image:url(../images/bg-topnav-hover.gif); background-position:bottom left; background-repeat:repeat-x; }
	
#topnav li ul { display: none; }
	
#topnav li:hover ul, #topnav li.hover ul {
	position: absolute;
	display: inline;
	margin: 0;
	color: #FFF;
	padding: 0;
	z-index: 100;
	width: 570px;
	background-image:url(../images/bg-topnav-sub.gif); background-position:bottom left; background-repeat:repeat-x; }
	
#topnav li:hover li, #topnav li.hover li { float: left; }
	
#topnav li:hover li a, #topnav li.hover li a { color: #a4cffb; background-image:url(../images/bg-topnav-sub.gif); background-position:bottom left; background-repeat:repeat-x; }
	
#topnav li li a:hover { color: #fff; }

/*----------------- CONTENT -----------------*/

#content { 
 width: 960px;
 color: #333;
 background: #fff;
 margin: 0px 0px 0px 0px;
 padding: 10px 0px 30px 0px;
 background-image:url(../images/bg-content.gif); background-position:bottom center; background-repeat:no-repeat;
}

#content h1 { color:#3399ff; font-size:30px; padding: 10px 20px; border-bottom: 1px dashed #CCC; }
#content h2 { color:#3399ff; font-size:24px; padding: 10px 20px; }
#content h3 { color:#3399ff; font-size:18px; padding: 10px 20px; }
#content h4 { color:#3399ff; font-size:16px; padding: 10px 20px; }
#content p {  font-size:14px; padding: 10px 20px; line-height: 175%; }
#content ul { font-size:14px; margin: 10px 40px;}
#content li { font-size:14px; margin: 10px 10px 10px 10px;}
#content a {color:#3399ff; font-size:14px; text-decoration:none; }
#content a:hover {text-decoration:underline;}

#content ul.downloads li { 
 list-style:none;
 background-image: url(../images/icons/subscribe.png); background-position: left center; background-repeat:no-repeat; 
 padding: 10px 0px 10px 60px;
 }

#content a.button { 
 padding: 15px 15px 15px 50px; 
 background-color: #3399ff; 
 background-image: url(../images/icons/subscribe.png); background-position: 4% center; background-repeat:no-repeat;
 border: 1px solid #2385e6;
 color:#fff; 
 font-size:14px; 
 text-decoration:none; 
 text-shadow: 1px 1px 1px #1a73cb; }

#content a.button:hover {text-decoration:underline; }

#content img.herosub { margin: 0px 11px; padding: 5px 11px; }

#hero {
 float: left;
 width: 650px;
 height: 450px;
 margin: 0px 0px 0px 22px;
 padding: 0px;
 background-color: #ebf3fb;
}

#hero img { margin: 0px; padding:0px;}
#slider1 li { margin: 0px; padding: 0px; } 

#heroboxes {
 float: right;
 width: 264px;
 height: 150px;
 margin: 0px 24px 0px 0px;
 padding: 0px;
 background-color:#ebf3fb;
 position: relative;
}

#heroboxes h2 { color:#3399ff; font-size:20px; margin: 5px 100px 0px 10px; padding: 10px 10px 0px 10px; }
#heroboxes p {  font-size:12px; margin: 5px 100px 0px 10px; padding: 0px 10px; }

#heroboxes span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }

#heroboxes.workshops { background-image:url(../images/clin-ed-heroboxes-workshops-off.jpg); background-position:center center; }
#heroboxes.workshops:hover { background-image:url(../images/clin-ed-heroboxes-workshops.jpg); background-position:center center; }

#heroboxes.shortprog { background-image:url(../images/clin-ed-heroboxes-shortprog-off.jpg); background-position:center center; }
#heroboxes.shortprog:hover { background-image:url(../images/clin-ed-heroboxes-shortprog.jpg); background-position:center center; }

#heroboxes.abudhabi { background-image:url(../images/clin-ed-heroboxes-abudhabi-off.jpg); background-position:center center; }
#heroboxes.abudhabi:hover { background-image:url(../images/clin-ed-heroboxes-abudhabi.jpg); background-position:center center; }

#trainingboxes {
 float: left;
 width: 264px;
 height: 300px;
 padding: 0px;
 background-color:#ebf3fb;
 position: relative;
}

#trainingboxes h2 { color:#3399ff; font-size: 20px; margin: 10px 10px 0px 10px; }
#trainingboxes p {  font-size:14px; margin: 0px 10px 10px 10px;  }

#trainingboxes span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }

#trainingboxes.workshops { margin: 15px 20px 0px 35px; border: 1px solid #fff; }
#trainingboxes.workshops:hover { background-image:url(../images/but-read.gif); background-position:bottom right; background-repeat:no-repeat; }

#trainingboxes.shortprog {  margin: 15px 20px 0px 20px; border: 1px solid #fff; }
#trainingboxes.shortprog:hover { background-image:url(../images/but-read.gif); background-position:bottom right; background-repeat:no-repeat; }

#trainingboxes.abudhabi {  margin: 15px 35px 0px 20px;border: 1px solid #fff; }
#trainingboxes.abudhabi:hover { background-image:url(../images/but-read.gif); background-position:bottom right; background-repeat:no-repeat; }
 
/*----------------- DOWNLOAD FORM -----------------*/

#registerdownload {
 float: right;
 width: 200px;
 margin: 25px 25px 0px 0px;
 border: 1px dashed #CCC;
}


/*----------------- FOOTER -----------------*/

#footer { 
 width: 940px;
 height: 140px;
 color: #333;
 background: #ebebeb;
 margin: 0px 0px 0px 0px;
 padding: 35px 10px 20px 10px;
 border-top: 1px solid #ccc;
 background-image:url(../images/bg-footer.jpg); background-position:bottom right; background-repeat:no-repeat;
}

#footer ul { float:left; font-size:14px; margin: 0px; padding: 0px 30px; list-style-type:none; border-right: 1px dashed #999; }
#footer li { font-size:14px; margin: 20px 0px;}

#footer a {color:#333; font-size:14px; text-decoration:none; }
#footer a:hover { color:#3399ff; text-decoration:none;}

/*----------------- WGA -----------------*/

#wga { 
 width: 960px;
 height: 50px;
 margin: 0px auto;
}

#wga ul { float:right; font-size:14px; margin: 0px; padding: 0px 40px; list-style-type:none; }
#wga li { font-size:14px; margin: 20px 0px;}

#wga a {color:#333; font-size:14px; text-decoration:none; }
#wga a:hover { color:#3399ff; text-decoration:none;}