@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* Reduces 16px browser default to 10px, so now 1em is 10px, 1.2em is 12px etc */
	background-image:url(../images/background_test_blue.jpg);
	background-repeat:repeat;
	background-position:top left;
	margin: 0;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. Text is then set to the left aligned in #container selector */
	color: #000000;
}

p, h1, h2, h3, h4, h5, h5, ul {
	margin: 0;
	padding: 0;
}

#container p {
margin: 9px 0px;
font-size: 1.1em; /* 11pt */
}

h1 {
	color: #000066;
	font-size:1.8em;
	margin-bottom: 20px;
	padding-top:20px;
	/*margin-top:20px;*/ /* Used padding instead. IE and Firefox seemed to disagree about how big the margin was when I used margin */
}

h2 {
	color: #000066;
	font-size:1.5em;
	margin-bottom: 15px;
}

h3 {
	color: #000066;
	font-size:1.2em;
	margin-bottom: 10px;
	margin-top:20px;
}

#paperbox .doc .v-chrome-bd a:link { text-decoration: none; color: #0066CC; }
#paperbox .doc .v-chrome-bd a:visited { text-decoration: none; color: #0066CC; }
#paperbox .doc .v-chrome-bd a:hover { text-decoration: underline;	color: #003366; }
#paperbox .doc .v-chrome-bd a:active { text-decoration: underline;	color: #0066CC; }

/*#paperbox .readmore a:link, #paperbox .readmore a:visited { text-decoration: none; color: #006699; }*/
/*#paperbox .readmore a:hover, #paperbox .readmore a:active { text-decoration: underline;	color: #0066CC; }*/

#container .readmore {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:1.4em;
	font-weight:bold;
	/*color:#006699;*/
}

#container { 
	width: 100%;  /* this will create a container 100% of the browser width */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border-bottom: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
}

/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
	float: left; 
	width: 325px; /* since this element is floated, a width must be given */
	/*width: 100%; */
}

#sidebar1 h3, #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

/* Tips for main-content:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#main-content {
	margin-top:30px;
	border-top: 7px double #000066;
	border-bottom: 7px double #000066;
} 


/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}

.leftimage {float: left;}
.rightimage {float: right;}
	
.icon {
	margin: 3px 15px 7px 0px;
	border: 3px outset #CC99CC;
}

#top-icon {margin-top:25px;}
	
#paperbox {
/*float: right;*/
/*	min-height:331px;*/ /* note, take padding top and bottom into account when calculating height compared to paper_side image */
	min-width:300px;
	/*width: 100%;*/
	margin: 0;
	margin-left:330px; /* stops this div overflowing beneath the sidebar */
	padding: 0px; /* Was 15px for Lea2.htm */
	line-height: 150%;
	position:relative;
	right:15px;
/*	position:absolute;*/
/*	right:15px;*/
/*	top:190px;*/
	z-index:103; /* The div.transbox_contents has a z-index defined as 101 , and we need to be infront of that here */
}

#column-left {
float: left;
width: 40%;
}

#column-right {
margin: 0 0 0 42%;
border-left: 2px dashed #000066;
padding-left: 20px;
}

ul {
	color: #0066CC;
	font-size:1.1em; /* 11pt */
	/*line-height:100%;*/
}

#sidebar1 ul {
list-style:none;
}

#sidebar1 ul li {
/*margin: 12px 0px 12px 30px;
padding: 8px 0px 8px 45px;*/
margin: 0 0 0 30px;  /*moves list items to right */
padding: 14px 0px; /* gives top/bottom padding to list items */
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
letter-spacing:1px;
}

#sidebar1 ul li a:link, #sidebar1 ul li a:visited {
color: #FFFFFF;
text-decoration: none;
border-top: 1px solid #FFFFFF;
padding: 4px 5px 4px 5px; /* padding around sidebar text - keeps borders away from text */
}

#sidebar1 ul li a:hover, #sidebar1 ul li a:active {
color:#E1F2FF;
background-image:url(../images/sidenav_background.png);
background-repeat:no-repeat;
background-position:bottom left;
/*margin-left: 14px;*/ /* how much the sidebar text moves right when hovered over */
border-bottom: 3px double #FFFFFF;
font-weight:bold;
}

#sidebar1 ul li #currentpage {
	color:#E1F2FF;
  border-bottom:3px double #FFFFFF;
	font-weight:bold;
}

/* Transparent div boxes */
div.transbox {
	 /* Any properties you'd want the box to have. Would probably be position, dimensions etc though I would have a div outside this to control the dimensions. */
	 position: relative;
/*	 width: 100%;*/
/*	 border: 1px solid #000000;*/	 
}
div.transbox_contents {
	 background-color:transparent;
	 height: 100%;
	 position: relative;
	 width: 100%;
	 z-index: 101;
}
div.transbox_background {
	 height: 100%;
	 background-color:#06003C;
	 -ms-filter: "alpha(opacity=40)"; /* IE8 opacity */
	 filter:alpha(opacity=40); 	/* IE's opacity*/
	 opacity: 0.4; 	/* Firefox 2+ / CSS3 opacity */
	 left: 0px;	
	 position: absolute;
	 top: 0px;
	 width: 100%;
	 z-index: 99;
}

#header {
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:left;
	background: transparent url(../images/yinyang.png) no-repeat;
	background-position:30px;
	padding: 35px 0px 35px 160px;	
}

#header #text-header {
	font-size:2.9em;
	font-weight:bold;
	letter-spacing:4px;
	word-spacing:7px;
}

#header #text-header-strapline {
	font-size:1.5em;
	font-weight:bold;
	font-style:italic;
	letter-spacing:1px;
	word-spacing:1px;
}

#column-left p.casestudy {
	font-weight: bold;
	margin: 0 2px 0 10px;
	color: #000066;
}

#column-left p.casestudy .casestudy-answer {
	font-weight: normal;
	color: #000;
}

.text-balance {
font-family:Arial, Helvetica, sans-serif;
letter-spacing:2px;
font-weight:bold;
}

#navlist {
	padding: 5px 0;
}

div.thermographic-scan {
	float:left;
	width:270px;
	text-align:center;
	margin:5px;
}

div.paperssay {
	float:left;
	width:31%;
	text-align:center;
	margin:5px;
}

div.paperssay p {
	font-weight:bold;
	font-style:italic;
}

#footer { 
	height: 1%;
	padding-bottom: 10px;
	margin: 0;
	color: #FFFFFF;
	text-align:center;
}

#footer #footer-navlist ul { 
	color: #FFFFFF;
	margin-left:20px;
}

#footer #footer-navlist li {
 display: inline;
}

#footer #footer-navlist li a {
padding: 2px 5px 3px 1px; /* Pads the list items out. 3px top, 6 right, 4 bottom, 6 left padding */
border-right: solid #000 1px;
border-color: #fff;
}

#footer #footer-navlist li#footer-navlist-last a {border-right: none;}

#footer #footer-navlist a:link, a:visited {
text-decoration:none;
color:#FFFFFF;
}

#footer #footer-navlist a:hover, a:active {
text-decoration:underline;
color:#E1F2FF;
}

#nautilusweb {
	float: right;
	width:100%;
	text-align:right;
	color:#000;
	font-size:0.9em;
	margin-bottom:10px;
}

#nautilusweb #siteby {margin:4px 10px 0 0;}

#nautilusweb #siteby a:link, #nautilusweb #siteby a:visited {color:#000066;text-decoration:none;}
#nautilusweb #siteby a:hover {color:#0033CC;text-decoration:underline;}


#contactform-container {
	background-color:#FFFFE6;
	padding:0 15px 5px 15px;
	border:1px outset #AAAAAA;
}

#form .form-label {
float:left;
width: 130px;
padding-bottom:3px;
}

#form .form-field {
}

#form .form-button {
margin-top:15px;
margin-left:130px;
}

.linkbox {margin:25px;}
.linkbox p {margin:0 !important; padding-left:45px;}

/* CSS to hide my hidden text field to prevent SPAM */
#form #bait {visibility:hidden; display:none;}


/* Start of ImgCycle Maldives image cycle box */
div.imgcycle-holder {
	float:right;
	/*width: 470px;*/
	margin: 8px;
}
/* jQuery Art Promo box cycle CSS  (rotates & randomises images). See: http://jquery.malsup.com/cycle/   */
div.imgcycle { 
	/*width: ;*/ 
	/*height: ;*/
	/*margin: auto;*/
	background-color:#fff; /* matching background colour to bg colour of images being displayed overcomes fade glitch with IE */
}

/* end of ImgCycle Maldives image cycle */