@charset "utf-8";
/* CSS Document */

* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color:#FFFFFF; 
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}

a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}

h1, h2, h3, h4, h5 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 1.4em;
font-variant:normal;
padding-top:33px;
color:#3A8799;
}
h2 {
font-size: 1.4em;
font-variant:normal;
padding-top:35px;
color:#3A8799;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #fff;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height. we need to hack the height ***/
}

/* FOR ERROR MESSAGES */
.error{
color:#FF0000;
font-weight:bold;
}
/**************************
HEADER
**************************/
#header {
background: #5C3B14;
padding:0px;
margin:0px;
height:50px;
padding-top:0px;
}
/* TOP MENU TEXT*/
#header p{
color:#FFFFFF;
padding:0px;
margin:0px;
padding-top:10px;
}
#header img {
padding:0px;
margin:0px;
border:0px;
}
/* LOGO PLACEMENT*/
#headerlogo{
float:left;
margin:0px;
margin-top:-6px;


}
/* SEARCH PLACEMENT*/
#headersearch{
float:right;
margin:0px;
padding:0px;
width:200px;
background-color:#5C3B14;
padding-top:18px; /*THE WHOLE SEARCH BAR*/
/*margin-top:-5px;*/
}
#headersearch form{
margin:0px;
padding:0px;
}
#headersearch label{
margin:0px;
padding:0px;
color:#FFFFFF;
}
#headersearch img{
float:left;
padding-top:3px;
padding-right:10px;
margin:0px;
}
#headersearch input{
margin-bottom:0px;
margin:0px;
padding:0px;
height:18px;
width:110px;
}


/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: 30px; /*** add some space for our top menu ***/
padding-left: 165px;  
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you change this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: left;
width: 530px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this  ***/
}
.contentWrap {
padding: 5px;
padding-left:40px;
padding-right:20px;
}
.contentWrap p {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}

.contentWrap input {
border: 1px solid #CCCCCC;
margin-left:4px;
}
/**************************
RIGHT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#right {
float: right;
width: 220px;
/*background: #fcc; */
min-height: 250px;
padding: 5px;
}
* html #right {
position: relative; /*** IE needs this  ***/
height: 250px;
}
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
#right h3{
padding-top:5px;
padding-left:15px;
color:#482D10;
font-size:1.2em;
}

#right form input{
border: 1px solid #CCCCCC;
margin-left:4px;
}
#right form a{
color:#74bcc9;
}
/*************************
MENU COLUMN
**************************/
#menu {
margin: -30px 0 0 -760px; /*** Move the right column so it takes the positon as a top menu ***/
margin-left:-625px; /*MAKE SOME SPACE FROM THE LEFT FOR THE MENU*/
float: left; 
width: 615px;
background: #FF3300;

padding: 5px;
height: 20px;
}
* html #menu {
position: relative;  /*** IE needs this  ***/
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
padding-left:5px;
padding-right: 15px;
}
#menu a {
color:#FFFFFF;
}
/**************************
FOOTER
**************************/
#footer {
width: 730px;
margin: 0 auto;
text-align: left;
background-color: #482D12;
padding-left:30px;
padding-top:8px;
padding-bottom:8px;
font-size:.8em;
height:16px;
}
#footer img{
padding:0px;
margin:0px;
margin-top:-5px;
margin-left:4px;
margin-right:8px;
}
#footer p{
color:#FFFFFF;
padding:0px;
margin:0px;
}
#footer a{
color:#FFFFFF;
}
#footer a:visited{
color:#FFFFFF;
}
#footerleft{
float:left;
}
#footerright{
float:right;
}
#footerselextion{
float:left;
}
#footerselextion a{
color:#68B1BA;
}
#footerselextion a:visited{
color:#68B1BA;
}

	#navsurround{
		position: relative;
		height: 10px;
		top: 0px;
		width: 500px;
		padding-left:20px;
		background-color:#5C3B14;
		
	}
	#nav {
		
		
		
		background-color:#5C3B14;
		margin:0px;
		padding:0px;
		padding-top:15px;
				
	}

	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav p{ /* FOR THE FREE TEXT IN THE SUBMENU*/
	margin: 0px;
	padding:0px;
	margin-top:1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	}
	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right:0px;
		padding:0px;
		background-color:#3A8799;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
		position: absolute;
		top: 50px; /* VALUE FOR IE MOZ FIX*/
		left: 133px;
		padding-top: 9px;
		background: #3A8799; /*MAY NOT BE NEEDED*/
		height: 20px; /* SOLVES IE NAV BAR OVER LOGIN ISSUE */
		width: 617px;
		padding-left: 10px;
		padding-right:0px;
	}

	#nav li.on ul {
	
		background: #3A8799; /*ON ACTIVE*/
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #3A8799;
	}

	#nav li a {
	
		color: #224d6f;
		
		display: block;
		width: 72px;
		padding: 0;
	}

	#nav li.on a {
		color: #5C3B14;
	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #5C3B14;
		width: auto;
		margin:0px;
		height:20px; /* HEIGHT OF SECOND NAV BAR MOZ FIX*/
		padding:0px;
		padding-right: 26px; /*Spacing between submenu */

	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #3A8799;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #5C3B14; /*HOVER OVER TEXT COLOUR*/
	}

	/*do the image replacement*/

	#nav li span {
		position: absolute;
		left: -9384px;
	}

	#aboutus a, #vacancies a, #candidates a, #recruiters a, #contactus a {
		display: block;
		position: relative;
		height: 35px;
		background: url(../images/menu/menusmap2.gif) no-repeat; /*contains all hover states*/
	}

/*first, put the initial states in place*/

#aboutus a {
	background-position: 0 0;
	margin:0px;
	padding:0px;
}

#vacancies a {
	background-position: -81px 0;
	margin-left:0px;
	padding:0px;
	border:0px;
}

#candidates a {
	background-position: -162px 0;
}

#recruiters a {
	background-position: -243px 0;
}

#contactus a {
	background-position: -324px 0;
}

/*active area - the code could be based on a body class*/

  #aboutus.on a {
 	background-position: 0 -37px;
 } /*add selectors for the other li's and background-positions*/
 
  #candidates.on a {
 	background-position: -162px -37px;
 } /*add selectors for the other li's and background-positions*/
 
  #vacancies.on a {
 	background-position: -81px -37px;
 } /*add selectors for the other li's and background-positions*/
 
  #recruiters.on a {
 	background-position: -243px -37px;
 } /*add selectors for the other li's and background-positions*/
 
  #contactus.on a {
 	background-position: -324px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#aboutus a:hover, #aboutus:hover a, #aboutus.over a {
	background-position: 0 -73px;
}

#vacancies a:hover, #vacancies:hover a, #vacancies.over a {
	background-position: -81px -73px;
}

#candidates a:hover, #candidates:hover a, #candidates.over a {
	background-position: -162px -73px;
}

#recruiters a:hover, #recruiters:hover a, #recruiters.over a {
	background-position: -243px -73px;
}

#contactus a:hover, #contactus:hover a, #contactus.over a {
	background-position: -324px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #3A8799;
	color: #fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}		

#nav li.on ul a {
	background: #3A8799;
}

#vacanciesright{
padding:0px;
margin:0px;
color:#408B9E;
}
#vacanciesright a{
color:#408B9E;
}
	
#vacanciesright .vacanciesrighttext{
padding:0px;
margin:0px;
padding-left:10px;
}

#vacanciesrecruiter{
padding:0px;
margin:0px;
}

#vacanciesrecruiter h1{
padding:5px;
margin:5px;
color:#408B9E;
}
#vacanciesrecruiter a{
color:#408B9E;
}
	
#vacanciesrecruiter .recruitersrighttext{
padding:0px;
margin:0px;
padding-left:10px;
}


/* FORM STYLING FOR VACANCIES*/
#frmSearch .drp{
margin:4px;
width:230px;
border: 1px solid;
}
#frmSearch .input{
border: 1px solid;
width:180px;
margin:4px;
padding:2px;
}
#frmJobRef .input{
border: 1px solid;
width:180px;
padding:2px;
}