/* CSS for screen projection */

body
{
	text-align: center; 	/* this is to allow centering of divs - see note at bottom*/
	min-width: 780px;  		/* this is to allow centering of divs - see note at bottom */
	background-color: #E9F3FF;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ----------------------- Containers ---------------------- */
#background
{
	margin: 0 auto;  	/* this is to allow centering of divs - see note at bottom*/
	text-align: left;  	/* this is to allow centering of divs - see note at bottom*/
	width: 790px;
	background: #ffffff url('images/backgroundBorders2.jpg') center repeat-y;
}

#header
{
	position:relative;
	left: 4px;
	width: 790px;
	height: 129px;
	margin: 0 auto;  
	text-align: left;  
	z-index: 200;
}

#mainContent
{
	margin: 0 auto;  
	text-align: left;  
	width: 736px;
}

#footerNavigation
{
	text-align:center;
}

#footerContainer
{
	clear: both;
	margin: 0 auto;   
	text-align: left;  
	position: relative;
	left: -1px;
	width:790px;
	/* the position of the google search bar causes a gap at the top of the footer,
		because it is shifted down using CSS - so we need to close this gap on the footer*/
	margin-top: -22px; 
}

#googleSearch
{
	margin-right: 40px; 
	float: right; 
	position:relative; 
	top: 81px;
}

/* ----------------------- Images ---------------------- */

#titleImage
{
	position:relative; 
	float: left;
	left:-1px; 
	z-index: 0;
}

#sideImage
{
	position: relative; 
	float:right;
	height:300px; 
	width:250px;
	background-color: #F2F9FF;
	z-index: 100;
	margin-top: 70px;
	margin-left: 10px;
}

.caseStudyImage
 {
 	margin: 50px;
 }
 
 #enquiryButton
 {
	margin-left: 80px;
	margin-top: 25px;
	margin-bottom: 25px;
 }


/* ----------------------- Accessibility ---------------------- */

/* skip IDs are for allowing disabled users using screenreaders / keyboard controls
to skip repetitive content, e.g. the navigation menu. 
see http://www.webaim.org/techniques/css/invisiblecontent/ */

#skip a, #skip a:hover, #skip a:visited
{
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}
 
#skip a:active
{
	position:static;
	width:auto;
	height:auto;
} 

/* Screen-reader class is to allow extra visually-hidden structural headings to 
exist on pages. These are necessary to replace the information normally provided 
by images or visual layout, which are inaccessible to the visually-impaired. 
They will not be seen visually, but will be picked up by screen-readers.*/
.screenReader
{
	display:none;
}

/* ----------------------- HTML elements ---------------------- */

p
{
	clear: left;
	font-size: 0.8em;
	text-align: left;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-top: 0;
	margin-bottom: 0;
}

h1
{
	clear: left;
	font-size: 1.2em;
	text-align: left;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
}

h2
{
	clear: left;
	font-size: 1em;
	text-align: left;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
}

h3
{
	clear: left;
	font-size: 1em;
	text-align: left;
	font-style:italic;
	padding-left: 35px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
}

ul, ol
{
	font-weight:bold;
	font-size: 0.8em;
	text-align: left;
	padding-left: 50px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
}

A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}

caption
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	padding: 10px;
}

/* ----------------------- Lists ---------------------- */

.nestedList
{
	clear: left;
	font-size: 0.9em;
	font-weight:bold;
	text-align: left;
	padding-left: 30px;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
}

li
{
	line-height:150%;
}

dl
{
	clear: left;
	font-size: 0.9em;
	text-align: left;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-top: 0;
	margin-bottom: 0;
}

dt
{
	font-weight: bold;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}

dt.subDefList
{
	font-weight: bold;
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 0px;
}


 /* ----------------------- Forms ---------------------- */
 
 #loginForm
 {
	 font-family:Verdana, Arial, Helvetica, sans-serif;
	 clear: left;
	 position: relative;
	 margin-left: 60px;
	 top: 30px;
 }
 
 
 
 #enquiryForm
 {
 	font-family:Georgia, "Times New Roman", Times, serif;
	margin-top: 50px;
	padding-bottom: 50px;
 }
 
 #enquiryForm tr
 {
	margin-bottom: 100px;
 }
 
 
 /* ----------------------- News page ---------------------- */
 
 .newsItem
 {
	 clear: left;
	 padding: 20px;
	 width: 400px;
 }
 
 .newsItem h1
 {
 	background-color: #9AADBE;
	color: black;
	font-size: 120%;
	padding-bottom: 10px;
 }
 
 .newsItem h2{
	font-size: 100%;
 }
 
 /* ----------------------- Miscellaneous ---------------------- */
 
.indent{
	margin-left: 1px;
}



/*  STRATEGY USED TO CENTER DIVS

To centre divs, the width is set, the text is aligned to center, and the margin set to 
auto on the right and left hand sides. 
Unfortunately this doesn't work in IE, becasue IE misinterprets text-align: center. 
Applying this to the body centres the div in IE. 
However it also centres the body text in all the other browsers as well. 
To get round this you need to use text-align: left; on the div that you're centering.
This gets IE up to scratch. 
In Mozilla, if you reduce the size of the browser window, half of your centred div hangs 
off the left of the page. To prevent this, set a min-width on the body tag.
*/