/* ########## CBE Schools South Africa Master CSS ########## */
/* ########## Alek Lisefski ########## */


/* ########## Universal Text / Heading / Link Styles ########## */

html, body { 
font: normal 12px verdana ; 
color: #211301 ; 
line-height: 18px ; 
background-color: #211301 ; 
padding: 0px; 
margin: 0px;
}

p { 
font: normal 12px verdana ; 
margin: 0px 0px 18px 0px ; 
color: #211301 ; 
line-height: 20px ; 
text-align: left ;
}


p.quote { 
font: italic 12px verdana ; 
line-height: 20px ;
color: #5c3001 ;  
}

p.small { 
font: normal 10px verdana ; 
margin: 10px 2px 18px 2px ; 
color: #5c3001 ; 
line-height: 16px ; 
}

p.small a, p.small a:visited, p.small a:hover, p.small em { 
font: normal 10px verdana ; 
}

.ruleabove { 
padding-top: 20px;
border-top: 2px solid #edd4a7;
clear: left;
}

a.bold, a.bold:visited, a.bold:hover {
font-weight: bold;
}

.educationPrinciples em, .newsArticles em {
	float: left;
	font: bold 11px verdana;
	color:#e16102;
	background: #fff;
	padding: 2px 3px;
	margin: 0px 0px 0px 0px;
}

.educationPrinciples em.old {
	color: #f7a43a;
}

.educationPrinciples strong {
	clear: left;
}

.newsArticles em {
float: none;
	font: bold 11px verdana;
	color: #f7a43a;
	background: #fff;
	padding: 2px 3px;
	margin: 0px 0px 0px 5px;
}



#tagline p { 
font: normal 11px verdana ; 
margin: 0px ; 
padding-top: 9px; 
}

#tagline span { 
font-weight: bold;
margin-right: 40px;
}



/* Headings */
h1 { 
font: italic 32px georgia ; 
color: #000 ; 
letter-spacing: -1px;
margin: 0px 0px 18px 0px ;
}

h1 a, h1 a:visited{ 
font: italic 32px georgia ; 
letter-spacing: -1px;
color: #000;
}

h1 a:hover { 
font: italic 32px georgia ; 
color: #e16102 ; 
text-decoration: none ;
border-bottom: 1px solid #e16102;
}

h2 { 
font: normal 19px georgia ;
color: #e16102 ;   
letter-spacing: -1px;
margin: 0px 0px 20px 0px ;
padding: 12px 15px 14px 15px;
background: #fffbf3 url(media/contentBox-bg.gif) repeat-x bottom ;
border-bottom: 2px solid #edd4a7;
border-top: 1px solid #edd4a7;
line-height: 26px;
}

h2 a, h2 a:visited { 
font: normal 19px georgia ; 
letter-spacing: -1px;
line-height: 26px;
color: #e16102 ;
border-bottom: 1px solid #e16102;
}

h2 a:hover { 
font: normal 19px georgia ; 
letter-spacing: -1px;
line-height: 26px;
color: #5c3001 ; 
text-decoration: none ; 
border-bottom: 1px solid #c7b69f;
}

h3 { 
font: normal 19px georgia ;
color: #e16102 ;   
letter-spacing: -1px;
margin: 0px 0px 20px 0px ;
line-height: 26px;
}

h3 a, h3 a:visited { 
font: normal 19px georgia ; 
letter-spacing: -1px;
line-height: 26px;
color: #e16102 ;
border-bottom: 1px solid #e16102;
}

h3 a:hover { 
font: normal 19px georgia ; 
letter-spacing: -1px;
line-height: 26px;
color: #5c3001 ; 
text-decoration: none ; 
border-bottom: 1px solid #c7b69f;
}

h4 {
	font: bold 13px verdana;
	color: #000;
	margin: 0px 0px 18px 0px;
	line-height: 20px ; 
}


/* Link Styles */

a, a:visited { 
display: inline ; 
font: normal 12px verdana ; 
color: #5c3001 ; 
text-decoration: none ; 
margin: 0px 0px 0px 0px ;
line-height: 18px;
border-bottom: 1px solid #c7b69f;
}

a:hover { 
color: #e16102 ; 
text-decoration: none ;
border-bottom: 1px solid #e16102;
}

a.image, a.image:visited, a.image:hover, a.image img {
	border: 0px;
}


/* ########## Structural Elements ########## */

#top { 
position:relative ; 
width: 100% ; 
height: 115px ; 
z-index:0 ; 
text-align: center ; 
background: #f16802 url(media/bg-topRepeat.gif) repeat-x ; 
clear: both ;
}

#top .container { 
position:relative ; 
width: 940px ; 
margin: auto ; 
z-index:0 ; 
text-align: left ;
background: url(media/bg-top.jpg) repeat-y ; 
height: 115px;
overflow: visible;
}

#tagline { 
position:relative ; 
width: 100% ; 
height: 31px ; 
z-index:0 ; 
text-align: center ; 
background: #f7ae43 url(media/bg-tagline.gif) repeat-x ; 
clear: both ;
}

#banner { 
position:relative ; 
width: 100% ; 
height: 213px ; 
z-index:0 ; 
text-align: center ; 
background: #211301 ;
clear: both ;
overflow: hidden;
}

#banner .container { 
height: 213px ; 
}


#banner .container .name {
font: normal 11px verdana;
color: #938a80;
line-height: 18px;
float: right;
text-align: right;
padding: 170px 275px 0px 0px;
}

#banner .container .name a, #banner .container .name a:visited {
font: normal 11px verdana;
border-bottom: 1px solid #534535;
color: #fff;
}

#banner .container .name a:hover { 
color: #e16102 ; 
text-decoration: none ;
border-bottom: 1px solid #e16102;
}

#banner.taddy .container { 
background: url(media/banner-taddy.jpg) no-repeat;
}

#banner.govender .container { 
background: url(media/banner-govender.jpg) no-repeat;
}

#banner.pepsi .container { 
background: url(media/banner-pepsi.jpg) no-repeat;
}

#banner.nadine .container { 
background: url(media/banner-nadine.jpg) no-repeat;
}

#banner.thami .container { 
background: url(media/banner-thami.jpg) no-repeat;
}

#banner.simmons .container { 
background: url(media/banner-simmons.jpg) no-repeat;
}

#banner.lynch .container { 
background: url(media/banner-lynch.jpg) no-repeat;
}

#banner.graham .container { 
background: url(media/banner-graham.jpg) no-repeat;
}

#banner.images .container { 
background: url(media/banner-images.jpg) no-repeat;
}

#banner.student .container { 
background: url(media/banner-student.jpg) no-repeat;
}



#navBar { 
position:relative ; 
width: 100% ; 
height: 33px ; 
z-index:0 ; 
text-align: center ; 
background: #211301 ; 
clear: both ;
overflow: hidden;
}


#middle { 
position:relative ; 
width: 100% ; 
z-index:0 ; 
text-align: center ; 
background: #fef6e2 ; 
clear: both ;
background: #fef6e2 url(media/bg-middle.gif) repeat-x ;
}


#bottom { 
position:relative ; 
width: 100% ; 
height: 120px ;
z-index:0 ; 
text-align: center ; 
background: #211301 ; 
clear: both ;
}

.container { 
position:relative ; 
width: 940px ; 
margin: auto ; 
z-index:0 ; 
text-align: left ;
}

#bottom .container { 
background: url(media/bg-bottom.gif) repeat-y ; 
height: 120px;
}

#navBar .container { 
height: 33px;
background: url(media/navBar-bg.gif) no-repeat;
}


/* ########## Unique Elements (id) ########## */

#ezemvelo {
	float: left;
	width: 350px;
	height: 175px;
	background: url(media/feature-ezemvelo.jpg) no-repeat;
	border-top: 4px solid #faa501;
}

#invincibleSA {
	float: left;
	width: 348px;
	height: 175px;
	background: url(media/feature-invincibleSA.jpg) no-repeat;
	border-top: 4px solid #faa501;
	margin-right: 5px;
}

.feature {
	margin-bottom: 20px;
}

.feature .link {
margin: 0px 0px 0px 15px;
}

.feature .link a, .feature .link a:visited {
	font: bold 11px verdana;
	padding: 7px 10px;
	background: #fbb301 url(media/sideBox-link-bg.gif) repeat-x ;
	border: 0;
	color: #000;
	line-height: 25px;
}

.feature .link a:hover {
	border: 0;
	color: #fff;
}

/* Footer */

div.copyright {
	float: left;
	font: normal 11px verdana;
	color: #fff;
	line-height: 18px;
	padding: 10px 30px 0px 15px;
}

div.legal {
	float: left;
	font: normal 11px verdana;
	line-height: 18px;
	color: #938a80;
	padding: 10px 0px 0px 0px;
	width: 750px;
}

#bottomLinks {
	display: block;
	border-bottom: 4px solid #301c04;
	padding: 15px 0px 10px 5px;
}

#bottomLinks a, #bottomLinks a:visited {
font: normal 11px verdana;
padding: 6px 9px;
color: #f0c254;
margin-right: 14px;
border: 0;
background: transparent;
border-bottom: 1px solid #211301;
border-right: 1px solid #211301;
}

#bottomLinks a:hover {
font: normal 11px verdana;
color: #fff;
border: 0;
background: #462501;
border-bottom: 1px solid #5c3001;
border-right: 1px solid #5c3001;
}

/* logo */

#logoCBE { 
position: absolute ; 
top: 30px ; 
left: 0px ; 
height: 82px ;
width: 206px;
margin: 0px 0px 0px 0px ;
}

#logoSA { 
position: absolute ; 
top: 55px ; 
left: 245px ; 
height: 51px ;
width: 261px;
margin: 0px 0px 0px 0px ;
background: url(media/logo-SA.gif) no-repeat;
}

#topLinks { 
position: absolute ; 
top: 42px ; 
right: 0px ; 
height: 59px ;
width: 392px;
margin: 0px 0px 0px 0px ;
background: url(media/bg-topLinks.jpg) no-repeat;
}

#topLinks div {
	display: inline;
	float: left;
}


#topLinks ul {
margin: 7px 4px 0px 14px ; 
padding: 0px 0px 0px 0px ; 
letter-spacing: 0px ; 
list-style-type: none ;
}

#topLinks li { 
border: 0;
background: url(media/bullet-arrow.gif) no-repeat 0px 10px ; 
margin: 0;
padding: 0px 0px 0px 10px ;
font: normal 11px verdana ; 
line-height: 22px ;
color: #fff;
}

#topLinks li a, #topLinks li a:visited { 
font: bold 11px verdana ; 
border: 0;
color: #fff;
}

#topLinks li a:hover { 
font: bold 11px verdana ; 
border-bottom: 1px solid #f3ab55;
color: #fede93;
}


/* Layout Columns */



#sideBar {
float: left;
width: 203px;
margin: 25px 30px 0px 0px;
overflow: hidden;
}

#mainColumn {
float: left;
width: 706px;
margin: 15px 0px 0px 0px;
overflow: hidden;
}

#breadCrumbs {
float: left;
background: #faeccf;
font: normal 11px verdana;	
padding: 7px 10px 8px 10px;
margin-top: 24px;
}

#breadCrumbs a, #breadCrumbs a:visited , #breadCrumbs a:hover{
font: normal 11px verdana;	
}


.clear {
	clear: both;
	height: 30px;
}


/* ########## Styles (class) ########## */


/* content Boxes */

.contentBox, .darkBox {
	margin: 0px 0px 20px 0px;
}


.contentBox .content {
	display: block;
	padding: 18px 20px 1px 20px;
	background: #fff url(media/contentBox-bg.gif) repeat-x bottom ;
	border-top: 2px solid #edd4a7;
}

.darkBox .content {
	display: block;
	padding: 18px 20px 1px 20px;
	background: #311901 url(media/darkBox-bg.gif) repeat-x;
}

.darkBox .content p {
color: #fff;
}

.darkBox .content a, .darkBox .content a:visited {
color: #faba1c;
border-color: #835a0c;
}

.darkBox .content a:hover { 
color: #e16102 ; 
text-decoration: none ;
border-bottom: 1px solid #e16102;
}

.darkBox .content h3 {
color: #faba1c;
}

.videoBox {
	float: left;
	margin: 0px 20px 10px 0px;
}

/* Subnav */

.subnavBox {
	margin-bottom: 20px;
}

.subnavBox a, .subnavBox a:visited {
display: block;
padding: 13px 15px;
font: normal 11px verdana;
line-height: 14px;
border-bottom: 1px solid #edd4a7;
}

.subnavBox a:hover, .subnavBox a.current, .subnavBox a.current:visited, .subnavBox a.current:hover {
background: #f7ae43 url(media/subnav-bg.gif) repeat-x ; 
color: #000;
border-bottom: 1px solid #f7aa3f;
}

.subnavBox a.current, .subnavBox a.current:visited, .subnavBox a.current:hover {
background: #f7ae43 url(media/subnav-bg.gif) repeat-x ; 
color: #000;
border-bottom: 1px solid #f7aa3f;
}

.subnavBox h1, .sideBox h1 {
font: bold 12px verdana ; 
letter-spacing: 0px;
color: #fff ; 
padding: 9px 15px 9px 15px;
background: transparent url(media/boxTitle-bg.gif) no-repeat;
margin: 0;
line-height: 16px;
}

.subnavBox .content {
	display: block;
	padding: 10px;
	background: #f9edd2;
}




.sideBox {
	display: block;
	margin-bottom: 20px;
	border-bottom: 4px solid #fbb301;
}

.sideBox .heading {
	display: block;
	height: 39px;
}

.sideBox .content {
	display: block;
	padding: 14px 15px 1px 15px;
	background: #f2d4a4 url(media/sideBox-bg.gif) repeat-x ;
}

.sideBox .content, .sideBox p {
	font: normal 11px verdana;
	line-height: 18px;
}

.sideBox .content a, .sideBox .content a:visited, .sideBox .content a:hover {
	font: bold 11px verdana;
	line-height: 18px;
	border: 0px;
}

.sideBox .link {
	display: block;
}

.sideBox .link a, .sideBox .link a:visited {
	font: bold 11px verdana;
	padding: 7px 10px;
	background: #fbb301 url(media/sideBox-link-bg.gif) repeat-x ;
	border: 0;
	color: #000;
	line-height: 25px;
}

.sideBox .link a:hover {
	border: 0;
	color: #fff;
	line-height: 25px;
	padding: 7px 10px;
}

.button {
	height: 40px;
	margin: 0px 0px 0px 0px;
	padding-bottom: 20px;
}

.floatLeft {
	float: left;
	margin: 0px 20px 10px 0px;
}

.floatRight, .logo {
	float: right;
	margin: 0px 0px 10px 20px;
}

.logo {
	border: 2px solid #fff;
}

.commentImage {
	border: 2px solid #fff;
}

.partnerImage {
	border: 2px solid #fff;
	margin-bottom: 20px;
}

.button a, .button a:visited, .button a:hover, .button img {
	border: 0;
}

form {
	margin: 0;
}

.formField {
background: #f4ddb3 url(media/formField-bg.gif) no-repeat top left;
font: normal 11px verdana;
padding: 3px 5px 3px 5px;
margin: 0px 0px 5px 0px;
border: 0px;
}

.bold {
	font-weight: bold;
}

/* Lists */
ul { 
margin: 0px 120px 18px 20px ; 
padding: 0px 0px 0px 0px ; 
letter-spacing: 0px ; 
list-style-type: none ;
}

.contentBox ul, .darkBox ul { 
margin: 0px 0px 18px 0px ; 
padding: 0px 0px 0px 0px ; 
letter-spacing: 0px ; 
list-style-type: none ;
}

.contentBox li, li li { 
background: transparent url(media/bullet-arrow.gif) no-repeat 0px 6px ;
margin: 0px 0px 0px 0px;
padding: 0px 10px 10px 13px;
font: normal 12px verdana ; 
color: #5c3001;
line-height: 18px ;
border: 0px;;
}

.darkBox li { 
background: url(media/bullet-arrow.gif) no-repeat 0px 6px ;
margin: 0px 0px 0px 0px;
padding: 0px 10px 10px 13px;
font: normal 12px verdana ; 
color: #fff;
line-height: 18px ;
border: 0px;;
}

li { 
background: #fffbf3 url(media/bullet-arrow.gif) no-repeat 10px 16px ;
margin: 0px 0px 6px 0px;
padding: 10px 10px 10px 23px;
font: normal 12px verdana ; 
color: #5c3001;
line-height: 18px ;
border: 0px;
border-bottom: 1px solid #edd4a7;
}

.subnavBox .content ul {
	margin: 0;
}

.subnavBox .content li { 
background: #fffbf3 url(media/contentBox-bg.gif) repeat-x bottom;
margin: 0;
padding: 0;
font: normal 11px verdana ; 
line-height: 14px ;
border-bottom: 1px solid #fffbf3;
}


/* Top navigation rollovers */

#navBar ul { 
margin: 0px 0px 0px 0px ; 
padding: 0px 0px 0px 0px ; 
letter-spacing: 0px ; 
list-style-type: none ;
}

#navBar ul li { 
font: bold 11px verdana ; 
color: #fff ; 
text-decoration: none ; 
margin: 0px 0px 0px 0px ;
padding: 0px 0px 0px 0px;
border-bottom: 0px;
display: inline;
float: left;
height: 33px;
}

#navBar ul li a, #navBar ul li a:visited {
display: block; 
font: bold 11px verdana ; 
color: #fff ; 
text-decoration: none ; 
border-right: 1px solid #f27520;
border-left: 1px solid #f7ab40;
margin: 0px ;
padding: 0px 16px 0px 16px;
line-height: 33px;
background: #000 url(media/navBar-bg.gif) no-repeat -10px 0px;
}

#navBar ul li a:hover {
color: #fff ; 
text-decoration: none ;
border-right: 1px solid #512a01;
border-left: 1px solid #6e3901;
background-position: -10px -33px;
}

#navBar ul li.firstItem a, #navBar ul li.firstItem a:visited {
background-position: left 0px;
border-left: 0;
}

#navBar ul li.firstItem a:hover {
color: #fff ; 
text-decoration: none ;
border-right: 1px solid #512a01;
background-position: left -33px;
border-left: 0;
}

#navBar ul li.lastItem a, #navBar ul li.lastItem a:visited, #navBar ul li.lastItem a:hover {
border-right: 0;
}

#navBar ul li a.current, #navBar ul li a.current:visited, #navBar ul li a.current:hover {
color: #211301;
background-position: -10px -66px;
border-right: 1px solid #f27520;
border-left: 1px solid #f7ab40;
}

#navBar ul li.firstItem a.current, #navBar ul li.firstItem a.current:visited, #navBar ul li.firstItem a.current:hover {
color: #211301;
background-position: left -66px;
border-right: 1px solid #f27520;
border-left: 0;
}

/* Tables */

table {
	width: 706px;
}

td, th {
	padding: 8px 10px;
}

td {
	background: #fefaee;
}

tr.highlight td {
background: #fff;
}