/************************************************************************

	GLOBAL CSS
	==========

	Provides all global styles for the site which more specific sections 
	can be built on using the layered css technique

	Author:		Tom Harman
				Nick Watson
				Tom Fletcher
				[www.optixsolutions.co.uk]

	Listing Order:
	==============

	Universal
	Forms
	General Structure / Layout
	Navigation Elements
	Header Elements
	Body Elements
	Footer Elements
	Messages

************************************************************************/

/***********************************************************************
	UNIVERSAL STYLES
************************************************************************/

body {
	font-size: .7em;
	background-image:  url('../i/layout/background.jpg');
	background-position: top center;
	background-color: #5084D7;
	background-repeat: no-repeat;
}

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#content ul {
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
}

/***********************************************************************
	FORMS
************************************************************************/

fieldset, legend {
	border: none;
}

legend {
	background: transparent;
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
	padding: 0 .5em;
}

label {
	float: left;
	padding: 0 1em 0 0;
	text-align: right;
}

form fieldset div {
	clear: both;
	display: block;
	margin-bottom: .5em;
	padding: 0;
}

div.submit {
	clear: both;
	text-align: center;
	width: 320px;
	margin-top: 10px;
}
div.submit input#submit{
	margin-top: 10px;
	float: left;
}

div.multi input {
	border: 0;
	width: 320px;
}
 
/*form 									{ width: 100%; }*/

label		 							{ float: left;	height: 22px; width: 45%; }

fieldset div input,
fieldset div select,
fieldset div textarea  			{ width: 45%; }

fieldset div input.small,
fieldset div select.small,
fieldset div textarea.small 	{ width: 25%; }

div.req label, div.req p		{ font-weight: bold; }

div.multi label 					{ height: 22px; }

div.req label:before, 
div.req p:before {
	content: "* ";
}

input:focus, textarea:focus {
	background: #fafafa;
	color: #000;
}

fieldset div input, 
fieldset div select, 
fieldset div textarea  {
	border: 1px solid #aaa;
	color: #333;
	font-weight: normal;
	padding: 1px;
}

div.submit input {
	background: #777;
	border: 1px solid #333;
	color: #fff;
	font-weight: bold;
/*	padding: 1px .7em;*/
/*	width: auto;*/
}

form#apply fieldset {
	margin-left: -50px;
}

form#apply fieldset div.submit {
	margin-left: 48px;
}

/***********************************************************************
	GENERAL STRUCTURE/LAYOUT
************************************************************************/

div.container {
margin: 0 auto;
/*background-color: Aqua;*/
width: 768px;
}
div.header{
	width: 768px;
	background-image: url(../i/layout/header-badge.jpg);
	background-repeat: no-repeat;
	background-position: right;
	height: 157px;
}

div.header div#header-logo {
	float: right;
	margin-right: 18px;
}
* html div.header div#header-logo {
	margin-right: 9px;
}

div.top-nav{
	width: 768px;
	height: 46px;
	background-image: url(../i/layout/body-top.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
}
div.nav-tabs{	
/*	background-image: url(../i/layout/tab-link.jpg);
	background-position: bottom;
	background-repeat: repeat-x;*/
	height: 20px; 
}
div.body-top{
}
div.main{
	background-image: url(../i/layout/body-repeater.jpg);
	background-repeat: repeat-y;
	float: left;
	padding: 0px;
	margin: 0px;	
}
div.content{
	background-image: url(../i/layout/body-bottom.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 768px;
	clear: both;
	float: left;
	margin: 0px;
	padding: 0px;
}

div.footer{
	clear: both;
	background-image: url(../i/layout/footer-footer.jpg);
	background-repeat: no-repeat;
	height: 113px;
}


/***********************************************************************
	HEADER ELEMENTS
************************************************************************/

/***********************************************************************
	BODY ELEMENTS
************************************************************************/
div.nav{
background-image: url(../i/layout/nav-header.jpg);
background-repeat: no-repeat;
background-position: top center;
width: 185px;
/*height: 350px;*/
float: left;
display: inline;
}
div.text{

width: 537px;
float: right;
display: inline;
padding: 20px;
}
div.text form fieldset div{
	width: 320px;
/*	background-color: Aqua;*/
	margin:0px;
	padding:0px;
	color: #ffffff;
}
div.text h1{
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #693B85;
}

div.text span.first-letter{
font-size: 1.5em;
}

div.text h2{
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	width: 340px;
	margin-top: 10px;
	float: left;
	color: #693B85;
}
div.text h5{
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #693B85;
	text-align: center;
	width: 340px;
	float: left;
	margin-top:20px;
}
div.text p{
	margin-top: 10px;
	text-align: justify;
	float: left;
	display: inline;
	clear: none;
	width: 340px;
}
div.text p.end{
	margin-top: 10px;
/*	margin-bottom: 60px;*/
	padding-bottom: 60px;
	text-align: justify;
	float: left;
	display: inline;
	clear: none;
	width: 340px;
}
div.text div.images{
	float: right;
	width: 181px;
	display: inline;
	clear: none;
	padding-top: 13px;
}
div.text div.images img{
	margin-bottom: 40px;
}

div.textexpanded p{
	margin-top: 10px;
	text-align: justify;
	float: left;
	display: inline;
	clear: none;
	width: 520px;
}
div.textexpanded p.end{
	margin-top: 10px;
/*	margin-bottom: 60px;*/
	padding-bottom: 60px;
	text-align: justify;
	float: left;
	display: inline;
	clear: none;
	width: 340px;
}
div.contact-holder{
	width: 320px;
}


/*div.contact-form{
	width: 320px;
	background-color: Fuchsia;
	float: left;
	display: inline;
}
*/
* html div.main div.content div.text form{

width: 320px;
}



div.main div.content div.text form{
/*background-color: Aqua;*/
width: 325px;
/*height: 400px;*/
float: left;
/*display: inline;*/
margin-top: 30px;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../i/layout/form-back.jpg);
background-repeat: no-repeat;
background-position: bottom right;	
/*background-color: Fuchsia;*/
border: 1px solid #000000;
}
div.text form input{
background-color: #B8C9E3;
color: #000000;

}
div.main div.content div.text form{
/*padding-left: 10px;*/
}

div.text form textarea{
background-color: #B8C9E3;
overflow: auto;

}
div.req{
	width: 320px;
	padding:0px;
	margin:0px;
}
* html div.req{
	width: 300px;
}
div.text ul.error{
	width: 340px;
	float: left;
}
p.firstp{
	color: #693B85;
	font-weight: bold;
}
span.purple {
	color: #693B85;
}
p.quote{
	/*color: #693B85;*/
	font-weight: bold;
}

/***********************************************************************
	NAVIGATION
************************************************************************/
div.nav img.tel{
	margin: 0 auto;
	margin-top: 20px;
}
div.nav img.career{
	margin: 0 auto;
	margin-top: 8px;
}

div.nav ul{
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	margin-left: 55px;
	margin-top: 45px;
}
div.nav ul li{
	margin-bottom: 5px;
}
div.nav ul li a{
	background-image: url(../i/layout/bullet-off.jpg);
	background-position: 0 2px;
	background-repeat: no-repeat;
	padding-left: 15px;
	color: #693B85;
}
div.nav ul li a:hover{
	background-image: url(../i/layout/bullet-on.jpg);
	background-position: 0 2px;
	background-repeat: no-repeat;
	padding-left: 15px;
	color: #3266BA;
}



div.nav-tabs ul{
	margin-top: 0px;
	margin-right: 22px;
	float: right;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
}
div.nav-tabs ul li{
	float: left;

	
}
div.nav-tabs ul li a{
	floaT: left;
	height: 21px;
	width: 98px;

	background-image: url(../i/layout/tab-link.jpg);
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 10px;
	color: #ffffff;

}
div.nav-tabs ul li a:hover{
	floaT: left;
	height: 21px;
	width: 98px;

	background-image: url(../i/layout/tab-link-hover.jpg);
	background-repeat: no-repeat;
	padding-top: 10px;
	color: #693B85;
}

div.csci{
	width: 185px;
	height: 150px; 
	background-image: url(../i/layout/csci.gif);
	background-position: 50% 30px;
	background-repeat: no-repeat;
	margin-top: 10px;
}
div.csci a{
	width: 185px;
	height: 100px; 
	float: left;
	text-indent: -999em;
}
div.csci p{
/*	width: 185px;
	height: 100px; */
/*	float: left;
	text-indent: -999em;*/
	text-align: center;
}



div.text div.job-vacancy{
	background-color: #BCDFCB;
	background-image: url(../i/layout/icon.jpg);
	background-position: right;
	background-repeat: no-repeat;
	border: 1px dashed #739D85;
/*	height: 20px;
	width: 20px;*/
	float: left;
	margin-top: 5px;
	padding: 8px;
	width: 300px;
}
div.text div.job-vacancy p{
padding:0px;
margin:0px;
width: 300px;
}
p.dlink img {
	float: left;
	margin-right: 10px;
}
p.dlink a {
	color: #4F004F;
}
p.dlink {
	margin-bottom: 20px;
}
/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/
div.footer-nav{
/*height: 15px;*/
padding-top: 4px;
float: left;
margin-top: 10px;
}
div.footer-nav p{
	width: 768px;
	text-align: center;
}
div.footer-nav a{	
}
div.footer-nav a:hover{
color: #ffffff;	
}
/***********************************************************************
	MESSAGES
************************************************************************/

.error, .notice, .message { 
	color: #b22;
	font-weight: bold;
}

.error ol li {
	font-weight: normal;
	list-style-type: lower-roman;
	list-style-position: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: 1em;
}