@charset "UTF-8";
/********************************************************************
*
*Purpose : Main style sheet, containing colour, layout, typography
*
*Author : Ed Stivala, N3W Media
*
*Client : Keep Education / Bonfire Design
*
*This style sheet is based upon the Dreamweaver TwoColLayout 
*
* File Organisation :
*	GENERIC, RESET & UTILITY
*	COLOUR & TYPOGRAPHY
*		Home page specific typography
*	PAGE LAYOUTS - BLOCK LEVEL
*	PAGE LAYOUTS - Minor Elements
*		HOME PAGE
*		ABOUT PAGE 
*		NEWS ARTICLES PAGE 
*		VACANCY REGISTRATION PAGE
*		CANDIDATE REGISTRATION PAGE
*		ENQUIRY FORM PAGE
*		VACANCY SEARCH PAGE
*		LOCATE LIST PAGE
*		SITE MAP PAGE
*
********************************************************************/


/************************************
*
*	GENERIC, RESET & UTILITY
*
************************************/
* {
	margin:0;
	padding:0;
	}

.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.imageList {
	display:block;
	margin-bottom:10px;
	}

/************************************
*
*	COLOUR & TYPOGRAPHY
*
************************************/

body  {
	font: 100% Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	/* background-image:url(../images/outer_background.jpg); */ /* 8.9.8 removed blue gradient background to show client what it would look like */
	/* background-repeat:repeat-x; */ 
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
/* The Home page has a very specific layout for its content to fit into the background */

h1 {
	font-size:24px;	/* Using px font sizing to make sure the min-height for th footer menu renders better*/
	font-weight:bold;
	color:#FCAF1A;
	margin-top:20px;
	margin-bottom:10px;
	}
h3 {
	font-size:14px;
	color:#FCAF1A;
	margin-bottom:10px;
	}
p {
	font-size:12px;     /*  Using px font sizing to make sure the min-height for th footer menu renders better */
	line-height:140%;
	}
ul {
	margin: 5px 0 0 20px;
	}
li {
	padding:0 0 5px 0;
	}
ol {
	list-style:inside decimal;
	margin: 5px 0 0 20px;
	}
br {
	line-height:100%;
	}
label {
	font-size:12px;
	color:#666666;
	margin:10px 0 3px 0;
	}
select {
	width:250px;
	}
input {
	width:245px;
	}
.dark {
	font-weight:bold;
	}
.hotImage {
	border:none;
	}
.top_line {
	line-height:100%;		/* this class is used to bring the first para of text into alignment with the top of a div */
	}
/************************************
*
*	PAGE LAYOUTS - BLOCK LEVEL
*
************************************/

#container { 
	width: 800px;  
	background: #FFFFFF; 
	margin: auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0 0 0 0;
	border: none;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#header {
	width:760px; 
	height:20px;
	background-image:url(../images/topnav_background.jpg);
	background-repeat:repeat-x;
	text-align: right;
	color:#FFFFFF;
	font-weight:bold;
	font-size:10px;
	/* margin: 0 0 15px 0; */
	margin: auto;
	
	/* padding: 0 10px 0 20px;  this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 

#mainBody {        /* this inner container is used to centralise the real page content within the the white container */
	width:764px;
	margin:auto;
	margin-top:10px;
	}

#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 145px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
}

#rightCol {
	margin-left:145px;
	}

#mainContent {
	width:595px;
	min-height:406px;	
	height: auto !important;
	height: 406px;
	margin:0 0 0 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding:0 0 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 


/* HOME PAGE : we use a background that Javascript then animates              */
/* version 2 of the home page deprecates the #homeContent ID and the Javascript animation  */

#homeContent {
	width:615px; 
	height:493px;
	background-image:url(../images/background1.jpg);
	margin:0 0 60px 145px;
	}

#tickerTape {
	margin: 30px 0 10px 0;
	}
	
#schoolButton {
	margin: 0 0 0 7px;
	}
	
#latest_vacancy {  /* create a container to show the latest job vacancy added to the system */
	background:url(../images/latest_vacancy_back.jpg);
	width:175px; 
	height:115px; 
	}
	.hp_position { /* position and style the JOB POSITION */
		position:relative;
		top:25px;
		left:10px;
		color:#0069B1;
		font-size:12px;
		font-weight:bold;
		}
	.hp_location { /* position and style the JOB SCHOOL & LOCATION */
		position:relative;
		top:25px;
		left:10px;
		color:#000000;
		font-weight:bold;
		font-size:10px;
		}
	.hp_copy { /* position, style & truncate the JOB COPY */
		position:relative;
		top:25px;
		left:10px;
		line-height:140%;
		font-size:9px;
		width:160px;
		font-weight:normal;
		color:#000000;
		}
	.hp_calltoaction_vacancy {
		position:relative;
		top:30px;
		left:-10px;
		font-size:9px;
		font-style:italic;
		font-weight:bold;
		text-align:right;
		}
		.hp_calltoaction_vacancy a {
			color:#000000;
			text-decoration:none;
			}

#register_candidate_button {
	float:left; 
	background:url(../images/teach_button1.jpg); 
	width:200px; 
	height:115px; 
	text-decoration:none; 
	color:#FFFFFF;
	}
	
#register_candidate_text {
	position:relative; 
	top:26px;
	left:10px; 
	font-size:10px; 
	line-height:140%;
	}
	
#register_vacancy_button {
	float:left; 
	margin: 0 0 24px 9px; 
	display:block; 
	background:url(../images/schools_button1.jpg); 
	width:200px; 
	height:115px; 
	text-decoration:none; 
	color:#FFFFFF;
	}
	
#register_vacancy_text {
	position:relative; 
	top:26px; 
	left:10px; 
	font-size:10px; 
	line-height:140%;
	}
	
#bbc_news_feed {
	margin-top:24px;
	background:url(../images/news_feed_back.jpg);
	width:175px;
	height:187px;
	font-size:9px;
	}
	#bbc_list_block {
		position:relative;
		top:60px;
		left:20px;
		width:130px; 
		margin:0;
		padding:0;
		list-style:none;
	}
	.bbc_list_item {
		line-height:100%;
		margin:0 0 10px 0;
		padding:0;
	}
	.bbc_link {
		color:#000000;
		text-decoration:none;
		font-weight:bold;
	}

/************************************
*
*	PAGE LAYOUTS - Minor Elements
*
************************************/

/******************************** HOME PAGE ********************************************/
.homepage_title { /* introduced for version 2 of the home page feb09*/
	color:#0069B1;
	font-size:22px;
	}
.homepage_copy { /* introduced for version 2 of the home page feb09*/
	margin: 0 0 10px 0;
	}
	
#homeContent h1 {	
	font-size:26px;
	font-weight:bold;
	color:#FCAF1A;
	padding: 140px 0 0 110px;
	margin:0 0 0 0;
	line-height:100%;
}
#homeContent h2 {
	font-size:18px;
	color:#FCAF1A;
	padding:3px 0 8px 110px;
	margin:0 0 0 0;
}
#homeContent p {
	font-size:11px;
	color:#333333;
	line-height:120%;
	padding:0 0 8px 110px;
	margin:0 0 0 0;
}
.sidebarImage {
	margin:2px 0 2px 0;
	}   
.sidebarREClogo {
	margin:10px 0 0 0;
	}
#sidebar_contact_button { /* introduced for version 2 of the home page feb09*/
	margin-bottom:75px;
	}
/******************************** ABOUT PAGE ********************************************/

.aboutcopy {
	display:block;
	margin-right:230px;
	}

/******************************** INTERNATIONAL PAGE ***********************************/

.internationalcopy {
	display:block;
	margin-right:230px;
	}

/********************************* NEWS ARTICLES PAGE ***********************************/
#newsList {
	margin-bottom:15px;
	}
.newscopy {
	margin-right:230px;
	}
	
/********************************* VACANCY REGISTRATION PAGE ****************************/
#registerVacancy label {
	display:block;
	}
#registerVacancy .button {
	display:block;
	margin-top:10px;
	height:22px;
	width:69px;
	}

/********************************* ENQUIRY FORM PAGE ****************************/
#enquiryForm label {
	display:block;
	}
#enquiryForm .button {
	display:block;
	margin-top:10px;
	height:22px;
	width:69px;
	}
#contactDetails {
	float:right;
	width:220px;
	}
.contactDetails {
	line-height:110%;
	margin-bottom:25px;
	}
.contactDetails .title {
	font-weight:bold;
	display:block;
	}
.contactDetails a {
	text-decoration:none;
	color:#005C98;
	}

/********************************* CANDIDATE REGISTRATION PAGE ****************************/
#registerCandidate label {
	display:block;
	}
#registerCandidate .button {
	display:block;
	margin-top:10px;
	height:22px;
	width:69px;
	}
	
/********************************** VACANCY SEARCH PAGE *********************************/
#vacancySearch {
	float:right;
	width:219px;
	}
#vacancySearch label {
	display:block;
	margin:10px 0 5px 0;
	}
#vacancySearch .selectBox {
	width:200px;
	}
#vacancySearch .button {
	display:block;
	margin: 10px 0 0 0;
	height:22px;
	width:69px;
	}	
#vacancySearch p {
	margin:0;
	padding:0;
	color:#FCAF1A;
	}
#vacancyList {
	background:#DFE5F3;
	margin-right:230px;
	margin-bottom:10px;
	padding:7px 7px 7px 7px;
	}
#vacancyList .position {
	color:#0069AA;
	font-weight:bold;
	line-height:100%;
	}
#vacancyList .location {
	color:#000;
	font-weight:bold;
	margin-top:0px;
	margin-bottom:5px;
	line-height:140%;
	}
#vacancyList .calltoaction {
	color:#000000;
	text-align:right;
	font-style:italic;
	font-weight:bold;
	margin-top:5px;
	}
.calltoaction a {
	color:#000000;
	text-decoration:none;
	}

/************************************** LOCATE PAGES ********************************/
.lettercold {
	font-size:14px;
	color:#ccc;
	}
.letterhot {
	font-size:14px;
	color:#333;
	}
.detailLink {
	font-size:10px;
	color:#FCAF1A;
	}
#alphabetList {
	margin:0 0 0 10px;
	}
#schoolList {
	font-size:12px;
	margin:15px 0 0 0;
	}
#schoolList ul {
	margin:0;
	}
#schoolList li {
	list-style:none;
	margin-bottom:8px;
	}
#schoolList a {
	text-decoration:none;
	color:#666666;
	}
#area_map {
	margin-top:10px;
	}
#area_list {
	width:200px;
	font-size:12px;
 	margin: 0 0 0 0;
	}
#area_list ul {
	margin:0;
	padding:7px 0 0 0;
	}
#area_list li {
	list-style:none;
	margin: 0px 0 0 1px;
	}
#area_list a {
	text-decoration:none;
	color:#666666;
	}
#area_list a:hover {
	color:#FCAF1A;
	}

/************************************** SITE MAP PAGE ********************************/
.sitemap dl {}
.sitemap dl,p {}
.sitemap .map a { }
.sitemap dl { padding-bottom: 1em; }
.sitemap dl dl { xfont-size: 1.0em; }
.sitemap dt {font-weight: bold; }
.sitemap dl dl dt {font-weight: normal; }
.sitemap .sub {  xfont-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; }

.sitemap dd {  background-image: url(../images/line.gif); background-repeat: no-repeat; padding-left: 23px;margin-left:15px;}
.sitemap dd.bottom {  background-image: url(../images/line2.gif); background-repeat: no-repeat; padding-left: 23px;}