/*
  CSS design by Baron Bratby 
  baron@immortaleye.co.uk
  www.immortaleye.co.uk
  Created 27th March 2010

This first section creates the default styling for popular tags. This is the way they will be styled unless this style is over ridden by a class or ID with different styling. Changes here will effect the styling of these tags throughout the entire site, except where there is a more specific rule applied. To change a tag or item on just one page, or a few pages, use a suitable Class /ID if available or create a new one and apply that.
*/
/*Sets default font and colours, sets width of site and centres in browser*/
body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	background-color:#0366ab;
	padding:0;
	margin:0;
	color:#CCC;
	font-size:1.0em;
	width:960px;
	margin-right:auto;
	margin-left:auto;
	padding-top: 30px;
  }
h1 {
	padding-top: 0px;
	text-align: center;
	font-size:1.8em;
}
h2 {
	font-size:1.4em;
}

h2 a:hover {
	font-variant: small-caps;
	color: #F00;
}
h2 a {
	font-variant: small-caps;
	font-size:1.5em;
	color: #ff9966;
}
h4{
	color:#0CF;
	padding-top: 0px;
	font-size:1.2em;
}

table{
	  border-collapse:collapse;
	  width:80%;
  }
td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	border:solid #FFF 2px;
	padding:5px;
	margin:0px;
}

th {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	border:solid #FFF 2px;
	padding:5px;
	margin:0px;
}
/*Default styilng for Unordered lists. Changes to this will be site wide unless there is a more specific rule in play*/
ul{
	list-style-type:square;
}
ul a{
	text-decoration:none;
	color:#CCC;
	font-weight: bold;
}
ul a:hover{
	text-decoration:none;
	color:#FFF;
	font-weight: bold;
}
caption{
	color:#BCCEFA;
	font-weight:bold;
	padding-bottom:15px;
}
/*Style the form to provide a neat layout*/	
form div{
	clear:left;
	margin:0;
	padding:0;
	padding-top:0.8em;
}
form div label {
	float:left;
	width:20%;
	font: bold 0.9em Verdana, Geneva, sans-serif;
	color:#CCC;
}
/*Stye the blockquote tag used when quoting someone*/
blockquote{
	color:#BCCEFA;
	font-style:italic;
}
/*Default clour and styling for hyperlink anchor tag 'a' may be over rules by a more specific class */
a
{
	color:#FC6
}
/*Remove the coloured border added to hyperlinked images by default*/
img{
	border:none;
	padding-top:0px;
	padding-right:10px;
	padding-left:10px;
	
}

/*This section contains stying rules for ID's An ID can only be used once on any page*/
/*These are the main 'boxes' that divide the page into sections '*/
#header {
	display:block;
	background-color:#FFF;
	height:157px;
}
/*Container for content of page itself*/
#content {
	padding-top:50px;
	border:none;
}
/*
A footer div is inluded on all pages in case there is a future need to place footer content here. This ID can be sued to proved sepearate
styling from the main content
*/
#footer{
	width:100%;
}
#logo {/*This positions the sites main logo*/
	float:left;
}
#contact{/*This positions the image with contact detals*/
	float:right;
}
/*
This is the holder for the navbar. Note that a seperate style sheet in the Spry folder actually controls the style of the navigation menue
*/
#navbar{
	clear:both;
	background-color: #EEE;
}
/*Used to position ther vertical side navigation where pages use it. To style the actual navigation bar use styl sheed in Spry folder*/
#sidenav{
	float:right;
}
/*This ID is used to prevent product content clashing with the side navigation when used on pages where a table is not used to do this*/
#prodcont{
	width:80%;
}
	
/*This section contains rules for classes. A class may be used on any tage simply by adding class="class name" inside the tag*/

/*This class provides styling to the'box' on the main pages */
.mainbox{
	width:100%;
	height:450px;
	margin-right:auto;
	margin-left:auto;
	border: none;
}
/*This provides a deeper box where more room for text is required */
.bigmainbox{
	width:100%;
	height:780px;
	margin-right:auto;
	margin-left:auto;
	border:none;
}
/*This is the container styling for content in the left half of the main boxes*/
.leftcont{
	float:left;
	width:50%;
	vertical-align: middle;
	padding-top: 30px;
}
/*This is the container styling for content in the right half of the main box*/
.rightcont{
	float:right;
	width:50%;
	padding-top:30px;
}
.swopout{
	width:370px;
	height:250px;
}
/*Use the highlight classes to highlight a particular section or piece of text in a different colour and style from the main site. REMEMBER Changing the styling here will change ALL content that is using that particular 'highlight'*/
/*Note the colour has not been used in the name as this is bad practice. For example it would be confusing in the future if say you decided to change a class called 'greenhighlight' so it made the text purple! When using Dreamweaver to apply a class you will see a preview of what it looks lilke in the selection box */
.highlight{
	color: #55fcff;
}
.highlight2{
	color:#F00;
	font-weight:bold;
	font-size:1.2em;
}
.highlight3{
	color:#0F0;
	font-weight:bold;
	font-size:1.2em;
}
.highlight4{
	color:#FF0;
	font-weight:bold;
	font-size:1.2em;
}
.highlight4{
	color:#FF8000;
	font-weight:bold;
	font-size:1.2em;
}
.highlight5{
	color:#BCCEFA;
	font-weight:bold;
	font-size:1.2em;
	font-style:italic;
}
.highlight6 {
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
}

.highlight7 {
	font-size: 1.2em;
	font-weight: bold;
	color: #FF0;
}
/*
The text variations are similar the highlight but without being in bold and using slighly more muted colours 
They pick up some highlight styles used by customer in previous site and allow re-use in the new one if needed
*/
/*textvar1 picks up on colour used in lighting page*/
.textvar1{
	color:#F9F;
	font-size:.8em;
}
.textvar2{
	color:#FF9;
	font-size:1.2em;
}


/*This class will simply centre a paragraph or similar tags content */	
.centre {
	text-align: center;
}
/*Used to move an image or other element out of the normal 'flow' and to the left.*/
.floatleft{
	float:left;
}
/* Add this class to the table in order to stop borders showing and give a little extra space*/
.hidetable td{
	border:none;
	padding:10px;
}
/*Class for a small table only half the width of site*/
.smalltable{
	width:50%;
	margin:20px;
	font-weight:bold;
	border: none;
}
.smalltable tr td{
	border:none;
}
/*Class for a large 2 column  table split evenly*/
.largetable{
	border:none;
	width:100%;
	text-align:center;
}
.largetable td{
	border:none;
	width:50%;
	text-align:left;
}
.colwidth66{
	width:66%;
}
.colwith33{
	width:33%;
}
	

.textvar3 {
	color: #FFF;
}

.indent {
	left: auto;
	right: auto;
	text-align: left;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}

#enter a{
	background-color: #F00;
	color: #FF0;
	font-style: normal;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	border: 4px groove #FFF;
}
#enter a:hover{
	background-color: #0F0;
	color: #F00;
	font-style: normal;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	border: 4px groove #FFF;
}