/* CSS Document */

body{
	behavior: url("css/csshover.htc");
	margin: 0px;
	padding: 0px;
	font: 11px verdana;
	background: url(../gfx/bgRepeat.gif) repeat-x;
	color: #343434;
	line-height: 16px;
}

h1{	font: bold 28px arial; color: #fcb626; }
h2{	font: bold 24px verdana; color: #525252; }
h3{	font: bold 22px arial; color: #525252; }
h3 a{ font: bold 22px arial; color: #525252; }
h4{	font: bold 18px verdana; color: #525252; }
h5{	font: bold 16px verdana; color: #525252; }
h6{	font: bold 14px verdana; color: #525252; }

/* MAKES ALL BROWSERS HANDLE HEADINGS AND PARAGRAPHS THE SAME, USE AT YOUR DISCRETION */
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 6px 0; }

.clear{	clear: both; }
.left{ float: left; }
.right{ float: right; }
.red{ color: red; }
.font10{ font-size: 10px; }

img{ border: none; }

form, fieldset, legend{ margin: 0; padding: 0; }
fieldset{ border: none; }
legend{ display: none; }
.nobg{ border: none; background: none; width: 20px; }

hr{ border: none; height: 3px; background: #fcb626; }

a{
	color: #ce8c02;
	text-decoration: none;
	outline-style: none;
}
a:hover{
	text-decoration: underline;
}

/* CSS TRANSPARENCY, THIS INVALIDATES THE STYLESHEET, USE AT YOUR DISCRETION */
/*a:hover img{ opacity: 0.8; filter: alpha(opacity=80); -moz-opacity:0.8; }*/

/* input[type=""] DOES NOT WORK IN IE6 */
input[type="checkbox"], input[type="radio"]{ border: none; width: auto; background: none; }

input, textarea, select{
	background: white;
	border: solid 1px #797979;	
}

input.submit{
	width: 101px;
	background: white;
	height: 42px;
	border: none;
}

#box{
	width: 960px;
	margin: 0 auto;
}

#header{
	height: 229px;
	padding-top: 20px;
	width: 960px;
	clear: both;
	color: #b8b7b7;
}

#header form{ float: right; }
#header input{ height: 29px; border: #b8b7b7 3px solid; font: bold 24px arial; color: #b8b7b7; padding: 2px; }
#header select{ height: 39px; width: 289px; border: #b8b7b7 3px solid; font: bold 24px arial; color: #b8b7b7; padding: 2px; }
#header .submit{ width: 98px; height: 39px; border: none; background: none; }


/* START OF NAVIGATION */
#nav{
	list-style: none;
	margin: 17px 0 0 20px;
	padding: 0;
	position: relative;
}
#nav li{ 
	list-style: none; 
	float: left;
	position: relative;
	display: block;
}
#nav li a{
	display: block;
	background-position: top center;
	height: 45px;
}
#nav li a:hover, #nav #navon a{
	display: block;
	background-position: bottom center;
}


/* DROPDOWN MENU */
#nav li ul{ 
	display: none; 
	position: absolute;
	background: #343434;
	margin: 0;
	padding: 0;
	border-bottom: #fcb626 2px solid;
	border-right: #fcb626 2px solid;
	border-left: #fcb626 2px solid;
	left: 0;
}
#nav li ul li{ 
	display: block;
	float: none;
	text-align: left;
	margin: 0; 
	padding: 1px 10px;
}
#nav li ul li a{ 
	height: 20px; 
	color: #e0e0e0;
}

#nav li:hover a{ background-position: bottom center; }
#nav li:hover ul{ display: block; }

#nav li #teachersSubnav{ width: 110px; margin-left: 1px; }
#nav li #schoolsSubnav{ width: 105px; margin-left: 1px; }
#nav li #resourcesSubnav{ width: 110px; margin-left: 1px; }

/* END OF DROPDOWN MENU */


#navHome{ background: url(../gfx/nav/navHome.gif) no-repeat; width:95px; }
#navJobs{ background: url(../gfx/nav/navJobs.gif) no-repeat; width:64px; }
#navTeachers{ background: url(../gfx/nav/navTeachers.gif) no-repeat; width:117px; }
#navSchools{ background: url(../gfx/nav/navSchools.gif) no-repeat; width:112px; }
#navResources{ background: url(../gfx/nav/navResources.gif) no-repeat; width:117px; }
#navNews{ background: url(../gfx/nav/navNews.gif) no-repeat; width:80px; }
#navContact{ background: url(../gfx/nav/navContact.gif) no-repeat; width:106px; }

#navEmails{ background: url(../gfx/nav/navEmail.gif) no-repeat; width:95px; }
#navLogout{ background: url(../gfx/nav/navLogout.gif) no-repeat; width:95px; }


/* END OF NAVIGATION */


#ctaRegister{ 
	background: url(../gfx/ctaRegister.gif) no-repeat; 
	width: 936px; 
	height: 49px;
	padding: 10px; 
	text-align: right; 
	margin: 5px 0;
}

#mainArea{ width: 960px; overflow: hidden; padding-top: 5px; }

#leftcol{ float: left; width: 636px; }

#quickSearch a{ color: #343434; }

#latestNews .left{ width: 47%; }
#latestNews .right{ width: 50%; }
#latestNews ul{ list-style: none; margin: 0; padding: 0; }
#latestNews ul li{ 
	list-style: none; 
	background: url(../gfx/listBg.gif) top repeat-x; 
	padding:8px;
}
#latestNews strong{ color: #fcb626; }
#latestNews a{ color: #343434; }

#rightcol{ float: right; width: 311px; }

#latestJobs .jobTitle{ font: bold 16px arial; color: #343434; }
#latestJobs .jobDetails{ font: 11px verdana; color: #b8b7b7; }


.vacancy{ margin-bottom: 15px; }
.vacancy p, .vacancy form{ padding-left: 20px; padding-right: 20px; }
.vacancy .salary{ font: bold 18px arial; }
.vacancy .jobtitle{ float: left; font: bold 22px arial; }
.vacancy .location{ float: right; font: bold 18px arial; }

.pagination { font: bold 17px arial; text-align: right; padding: 10px 0; }
.pagination .pageno{ background: #fdb728; color: #FFFFFF; padding: 2px 4px; }
.pagination .pagecurrent{ background: #000000; color: #FFFFFF; padding: 2px 4px; }

#footerBg{ width: 100%; background: #000000 url(../gfx/footerBgRepeat.gif) repeat-x; clear: both; }

#footer{
	width: 920px;
	margin: 0 auto;
	overflow: hidden;
	padding: 60px 30px;
	position: relative;
	color: #FFFFFF;
}
#footer a{ color: #FFFFFF; }

#buttonTop{ position: absolute; top: 0; right: 30px; }

#footer ul{ float: left; list-style: none; margin-left: 50px; padding: 0; }
#footer ul li{ border-bottom: #fdb627 1px solid; padding: 10px 0; }
#footer ul li a{ color: #FFFFFF; font: bold 12px verdana; }

#footer .sublink{ font: 11px verdana; }

#contact{ float: right; width: 256px; }
#contactTop{ background: url(../gfx/contactTop.gif) no-repeat; height: 14px; width: 256px; }
#contactBottom{ background: url(../gfx/contactBottom.gif) bottom center no-repeat; width: 226px; padding: 15px; position: relative;}
#contact #cvtips{ position: absolute; bottom: -45px; right: -20px; }

#footerEmail{ font: 28px arial; text-align: center; clear: both; padding-top: 20px; position:relative; }
.qm{position:absolute; left:0px; top:-15px;}
.qm2{position:absolute; left:0px; top:-143px;}

#footerEmail a{ font: italic 30px arial; }

#footerLinks{ text-align: center; }

#footer input, #footer textarea, #footer select{ border: #fdb627 3px solid; color: #b8b7b7; padding: 2px; vertical-align: middle; font: 11px verdana; width: 90%; }
#footer .nobg{ border: none; background: none; width: 20px; }
#footer .submit{ width: 101px; height: 42px; }









#latestJobs .content{ width: 285px; padding: 6px 10px; }
#latestNews .content{ width: 590px; }

/* ROUNDED WHITE BOXES */
.roundedBox {
	border-top: 3px solid #cdcdcd;
	border-bottom: 3px solid #cdcdcd;
	background: #FFF;
	width: 100%;
	margin: 5px 0;
}

.roundedBox:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.roundedBox .content {
	padding: 6px 20px 6px;
	clear: both;
	position: relative;
	border-right: 3px solid #cdcdcd;
	border-left: 3px solid #cdcdcd;
	overflow: hidden;
}

.roundedBox .tl, .roundedBox .tr, .roundedBox .bl, .roundedBox .br {
	width: 10px; /* Size of corner */
	height: 10px; /* Size of corner */
	display: block;
	position: relative;
	overflow: hidden;
}

.roundedBox .tl {
	background: url(../gfx/boxCorners.gif) 0 0;
	float: left;
	margin-top: -3px;
	margin-left: 0px;
}     

.roundedBox .tr {
	background: url(../gfx/boxCorners.gif) 10px 0;
	float: right;
	margin-top: -3px;
	margin-right: 0px;
}     

.roundedBox .bl {
	background: url(../gfx/boxCorners.gif) 0 10px;
	float: left;
	margin-bottom: -3px;
	margin-left:0px;
}     

.roundedBox .br {
	background: url(../gfx/boxCorners.gif) 10px 10px;
	float: right;
	margin-bottom: -3px;
	margin-right: 0px;
} 
/* END OF ROUNDED BOXES */


/* ROUNDED GREY BOXES */
.roundedBoxGrey {
	border-top: 3px solid #cdcdcd;
	border-bottom: 3px solid #cdcdcd;
	background: #e5e5e5;
	width: 100%;
	margin: 5px 0;
}

.roundedBoxGrey:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.roundedBoxGrey .content {
	padding: 6px 20px 6px;
	clear: both;
	position: relative;
	border-right: 3px solid #cdcdcd;
	border-left: 3px solid #cdcdcd;
	overflow: hidden;
}

.roundedBoxGrey .tl, .roundedBoxGrey .tr, .roundedBoxGrey .bl, .roundedBoxGrey .br {
	width: 10px; /* Size of corner */
	height: 10px; /* Size of corner */
	display: block;
	position: relative;
	overflow: hidden;
}

.roundedBoxGrey .tl {
	background: url(../gfx/boxCornersGrey.gif) 0 0;
	float: left;
	margin-top: -3px;
	margin-left: 0px;
}     

.roundedBoxGrey .tr {
	background: url(../gfx/boxCornersGrey.gif) 10px 0;
	float: right;
	margin-top: -3px;
	margin-right: 0px;
}     

.roundedBoxGrey .bl {
	background: url(../gfx/boxCornersGrey.gif) 0 10px;
	float: left;
	margin-bottom: -3px;
	margin-left:0px;
}     

.roundedBoxGrey .br {
	background: url(../gfx/boxCornersGrey.gif) 10px 10px;
	float: right;
	margin-bottom: -3px;
	margin-right: 0px;
} 
/* END OF ROUNDED BOXES */


/* ROUNDED Black BOXES */
.roundedBoxBlack {
	background: #2c2d2d;
	width: 100%;
	margin: 5px 0;
	border: none;
	color: #FFFFFF;
	clear: both;
	font: 18px arial;
}

.roundedBoxBlack:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.roundedBoxBlack .content {
	padding: 6px 20px 6px;
	clear: both;
	position: relative;
	overflow: hidden;
	border: none;
}

.roundedBoxBlack .tl, .roundedBoxBlack .tr, .roundedBoxBlack .bl, .roundedBoxBlack .br {
	width: 10px; /* Size of corner */
	height: 10px; /* Size of corner */
	display: block;
	position: relative;
	overflow: hidden;
}

.roundedBoxBlack .tl {
	background: url(../gfx/boxCornersBlack.gif) 0 0;
	float: left;
	margin-top: 0px;
	margin-left: 0px;
}     

.roundedBoxBlack .tr {
	background: url(../gfx/boxCornersBlack.gif) 10px 0;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
}     

.roundedBoxBlack .bl {
	background: url(../gfx/boxCornersBlack.gif) 0 10px;
	float: left;
	margin-bottom: 0px;
	margin-left:0px;
}     

.roundedBoxBlack .br {
	background: url(../gfx/boxCornersBlack.gif) 10px 10px;
	float: right;
	margin-bottom: 0px;
	margin-right: 0px;
} 
/* END OF ROUNDED BOXES */


/* ROUNDED Orange BOXES */
.roundedBoxOrange {
	background: #fdb728;
	width: 100%;
	margin: 5px 0;
	border: none;
	clear: both;
	color: #FFFFFF;
}

.roundedBoxOrange:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.roundedBoxOrange .content {
	padding: 5px 10px;
	clear: both;
	position: relative;
	overflow: hidden;
	border: none;
	width: 590px;
}

.roundedBoxOrange .tl, .roundedBoxOrange .tr, .roundedBoxOrange .bl, .roundedBoxOrange .br {
	width: 10px; /* Size of corner */
	height: 10px; /* Size of corner */
	display: block;
	position: relative;
	overflow: hidden;
}

.roundedBoxOrange .tl {
	background: url(../gfx/boxCornersOrange.gif) 0 0;
	float: left;
	margin-top: 0;
	margin-left: 0px;
}     

.roundedBoxOrange .tr {
	background: url(../gfx/boxCornersOrange.gif) 10px 0;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
}     

.roundedBoxOrange .bl {
	background: url(../gfx/boxCornersOrange.gif) 0 10px;
	float: left;
	margin-bottom: 0px;
	margin-left:0px;
}     

.roundedBoxOrange .br {
	background: url(../gfx/boxCornersOrange.gif) 10px 10px;
	float: right;
	margin-bottom: 0px;
	margin-right: 0px;
} 
/* END OF ROUNDED BOXES */

/* CONTACT FORM */

.formBox{
	clear: both;
	width: 250px;
}

.formBox p{
	clear: both;
}

.formBox input{
	padding: 5px;
	width: 250px;
}

.formBox select{
	padding: 5px;
	width: 262px;
}

.formBox textarea{
	padding: 5px;
	width: 250px;
}

.formBox input.submitRecruitment{
	border: none; 
	margin: 5px -10px 0px 0px; 
	float: right;
	width: 115px;
}