/*
STYLE SHEET FOR AMBERSAIL
Created by Kirsty Burgoine
www.ambersail.com
ToC
	1.  defaults
	2.  structure
	3.  links and navigation
	4.  fonts
	5.  images
	6.  hacks
Notes
*/

/* ------- 1. defaults ------- */

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background: url(../site-images/body-background.jpg) repeat-x bottom left #fff;
	font-size: 80%;
	text-align: center;
}

/* ------- 2. structure ------- */

#wrapper {
	margin: 20px auto;
	height: 100%;
	width: 978px;
	min-height: 600px;
	height:expression(document.body.clientHeight < 800? "800px": "auto" );
	overflow: hidden;
	
}



#masthead {  /* Top area of the website */
}

	#logo {
	margin-left: 25px;
	}
	
	
	#navContainer { /* top navigation */
	background: url(../site-images/nav-background.jpg) repeat-x top center;
	width: 978px;
	height: 50px;
	}
	
	#navigation {
	margin: 15px 30px 0 0;
	float: right;
	}
	
	#strap-line {
	width: 340px;
	float: right;
	}
	
	#home-focus-area { /* larger area on homepage only */
	margin-top: 0px;
	width: 978px;
	height: 300px;
	overflow: hidden;
	background: url(../site-images/focus-background.jpg) repeat-x top center;
	}
	
	#home-focus-area #focus-content {
	position: absolute;
	z-index: 100;
	width: 464px;
	float: right;
	height: 415px;
	margin-left: 500px;
	padding-top: 15px;
	}
	
	#home-focus-area #images {
	position: relative;
	z-index: 0;
	width: 978px;
	height: 283px;
	top: 0;
	}
	
	#focus-area { /* smaller focus area on all other pages */
	margin-top: 0px;
	width: 978px;
	height: 210px;
	overflow: hidden;
	background: url(../site-images/focus-inner-bg.jpg) repeat-x top center;
	}
	
	#focus-area #focus-content {
	position: absolute;
	z-index: 100;
	width: 590px;
	float: right;
	height: 200px;
	margin-left: 25px;
	padding-top: 15px;
	}
	
	#focus-area #images {
	position: relative;
	z-index: 0;
	height: 210px;
	top: 0;
	left: 640px;
	}
	
	#second-nav {
	width: 340px;
	background: url(../site-images/secon-nav-bg.jpg) repeat-x;
	height: 46px;
	float: right;
	margin-top: -5px;
	}
	
	/*  ends masthead elements */
	

#content {  /*  Main central content box  */
background-color: #fff;
margin: 0 auto;
width: 978px;
height: 100%;
min-height: 400px;
height:expression(document.body.clientHeight < 400? "400px": "auto" );
}

	.column { /* text columns in #content on home page */
	width: 450px;
	float: left;
	margin: 25px 0 10px 25px;
	}
	
	.wide-column { /* text columns in #content on rest of site */
	width: 590px;
	float: left;
	margin: 25px 0 10px 25px;
	}
	
	.narrow-column { /* text columns in #content on rest of site */
	width: 315px;
	float: left;
	margin: 25px 0 10px 25px;
	}
	
	.features-box-home {
	width: 450px;
	min-height: 150px;
	height:expression(document.body.clientHeight < 150? "150px": "auto" );
	background: url(../site-images/features-box.jpg) repeat-x top center #f3f8fe;
	margin-bottom: 25px;
	padding-bottom: 10px;
	}
	
	.features-box {
	width: 315px;
	min-height: 30px;
	height:expression(document.body.clientHeight < 30? "30px": "auto" );
	background: url(../site-images/features-box.jpg) repeat-x top center #ddeffd;
	margin-bottom: 25px;
	padding-bottom: 10px;
	}
	
	.features-box-white {
	width: 315px;
	min-height: 30px;
	height:expression(document.body.clientHeight < 30? "30px": "auto" );
	margin-bottom: 25px;
	padding-bottom: 10px;
	}
	
	/*  ends content elements */

#footer {
width: 978px;
height: 59px;
background: url(../site-images/footer-background.jpg) repeat-x;
}

#credits {
width: 978px;
height: 25px;
margin-top: 10px;
}

.seperator {
	clear: both;
	height: 0;
}

/* ------- 3. links and navigation ------- */

a {
	font-family: Arial, Helvetica, sans-serif;
	color: #106bad;
	text-decoration: none;
}

a:visited {
}

a:hover {
text-decoration: underline;
color: #ff9900;
}

a:active {
}

#content a {
font-family: Georgia, "Times New Roman", Times, serif;
}

#navigation ul {
margin: 0;
padding: 0;
}

#navigation ul li {
list-style-type: none;
display: inline;
}

#navigation ul li a {
float: left;
padding: 0px 29px;
border-right: solid 1px #106bad;
text-align: center;
font-weight: 600;
}

#navigation ul li a.last {
border: none;
padding-right: 0;
}

#home-focus-area #focus-content h2 a, #focus-area #focus-content h2 a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

#content h4 a {
color: #333333;
}


a.more { /* more info links in focus area */
float: right;
font-size: 16px;
padding: 10px 0 0 0;
font-weight: bold;
}

a.read { /* more info links in in Industry news on home page */
float: right;
font-size: 12px;
padding: 0 0 10px 0;
font-weight: bold;
}


#second-nav ul {
margin: 15px 25px 0 0;
padding: 0;
float: right;

}

#second-nav ul li {
list-style-type: none;
display: inline;
}

#second-nav ul li a {
float: left;
padding: 0 25px;
border-right: solid 1px #333;
color: #333;
text-align: center;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
}

#second-nav ul li a.last {
border: none;
padding-right: 0;
}


#footer a {
color: #fff;
font-family: Georgia, "Times New Roman", Times, serif;
}



/* -------4. fonts ------- */

h1, h2, h3, h4, p, ul {
font-family: Georgia, "Times New Roman", Times, serif;
}



h1 {
color: #106bad;
}

#strap-line h1 { /* main strap line in masthead */
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 22px;
line-height: 35px;
text-align: justify;
float: right;
color: #333333;
margin-right: 30px;
}

h2 {
}

#home-focus-area #focus-content h2, #focus-area #focus-content h2 {
padding: 10px 0 10px 0;
font-size: 18px;
}

#focus-area #focus-content h2 {
padding-bottom: 10px; 
color: #106BAD;
font-family: Arial, Helvetica, sans-serif;
}

#content h2 {
padding: 0px 0 10px 0px;
font-size: 18px;
color: #106bad;
}

h3 {
}

#content h3 {
color: #106bad;
padding: 10px 0;
font-size: 14px;
}

#content .features-box h3, #content .features-box-home h3 {
color: #106bad;
padding: 20px 25px 10px 25px;
}


#content h4{
font-size: 14px;
padding: 0 0 5px 0;
}

p {
color: #333;
}

#home-focus-area #focus-content p { /* text within focus area */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
padding-bottom: 10px;
font-weight: bold;
text-align: justify;
padding: 10px 0;
}

#focus-area #focus-content p { /* text within focus area */
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
padding-bottom: 10px;
font-weight: bold;
text-align: justify;
padding: 10px 0;
}

#home-focus-area #focus-content p.blue, #focus-area #focus-content p.blue { /* text within focus area */
color: #106bad;
}

#content p {
font-size: 13px;
line-height: 22px;
text-align: justify;
padding-bottom: 10px;
}

#content .features-box p, #content .features-box-home p {
font-size: 13px;
line-height: 20px;
text-align: justify;
padding-bottom: 10px;
margin: 0 25px;
}

#footer p {
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 26px;
}

#credits p {
color: #106bad;
font-size: 11px;
}

p.left { /* seperate details in footer and credits */
float: left;
padding: 17px 0 0 25px;
}

p.right {
float: right;
padding: 17px 25px 0 0;
}

.blue {
color: #106bad;
}

.wide-column ul { 
margin: 0 25px;
padding: 0;
}

.wide-column ul li { 
list-style-type: none;
background: url(../site-images/bullet-point.jpg) no-repeat left 5px;
padding-left: 20px;
line-height: 20px;
font-size: 14px;
padding-bottom: 15px;
}

.features-box ul { 
margin: 0 25px;
padding: 0;
}

.features-box ul li { 
list-style-type: none;
background: url(../site-images/bullet-point.jpg) no-repeat left 5px;
padding-left: 20px;
line-height: 20px;
font-size: 14px;
padding-bottom: 15px;
}

ul.downloads {
margin: 0 0 0px 25px;
padding: 0;
}

ul.downloads li {
background: url(../site-images/download-icon.png) no-repeat left center;
padding: 25px 0 25px 65px;
list-style-type: none;

}

ul.downloads li a {
font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;
font-weight: 600;
}

ul {
color: #333;
}

ol {
}

hr {
}

form.enquiry {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
margin: 0 0 25px 0;

}

label {
float: left;
font-size: 14px;
font-weight: bold;
color: #333;
}

label.error {
float: right;
font-size: 12px;
font-weight: bold;
color: #ff9900;
}

.needed {
color: #ff9900;
vertical-align: text-top;
}

.notice {
color: #106bad;
}

.textfield {
float: right;
border: solid 1px #ccc;
width: 375px;
padding: 3px;
height: 15px;
margin-bottom: 10px;
}

.textarea {
float: right;
border: solid 1px #ccc;
width: 375px;
padding: 3px;
margin-bottom: 10px;
height: 100px;
}

.textfield:hover {
border: solid 1px #106bad;
}

.textarea:hover {
border: solid 1px #106bad;
}

.textfield_error {
float: right;
border: solid 1px #ff9900;
width: 375px;
padding: 3px;
height: 15px;
margin-bottom: 10px;
}

.textarea_error {
float: right;
border: solid 1px #ff9900;
width: 375px;
padding: 3px;
margin-bottom: 10px;
height: 100px;
}


/* ------- 5. images ------- */

a img {
	border: 0;
}


.features-box img, .features-box-home img {
float: left;
margin: 0 15px 0 25px;
border: solid 1px #106bad;
}

img.client {
float: left;
margin: 0 15px 0 0;
border: solid 1px #106bad;
}

/* -------6. hacks ------- */

body {/*IE 5 centring bug fix */
text-align: center;
}

#wrapper {
text-align: left;
}

* html .wide-column { /* text columns in #content on rest of site */
	width: 590px;
	float: left;
	margin: 25px 0 10px 10px;
	}
	
* html #logo {
width: 200px;
margin: 0px 0 0 25px;
}