/*
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 top left #dceefc;
	font-size: 80%;
	text-align: center;
}

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

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



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

	#logo {
	}
	
	
	#navContainer { /* top navigation */
	float: right;
	background: url(../site-images/nav-background.jpg) no-repeat top center;
	width: 540px;
	height: 69px;
	}
	
	#navigation {
	width: 500px;
	margin: 15px auto 0 auto;
	}
	
	#strap-line {
	width: 100%;
	padding-top: 5px;
	}
	
	#home-focus-area { /* larger area on homepage only */
	margin-top: 20px;
	width: 978px;
	height: 283px;
	overflow: hidden;
	}
	
	#home-focus-area #focus-content {
	position: absolute;
	z-index: 100;
	width: 455px;
	float: right;
	height: 283px;
	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: 200px;
	overflow: hidden;
	}
	
	#focus-area #focus-content {
	position: absolute;
	z-index: 100;
	width: 370px;
	float: right;
	height: 200px;
	margin-left: 585px;
	padding-top: 15px;
	}
	
	#focus-area #images {
	position: relative;
	z-index: 0;
	width: 978px;
	height: 200px;
	top: 0;
	}
	
	#second-nav {
	width: 100%;
	background: url(../site-images/secon-nav-bg.jpg) repeat-x;
	height: 46px;
	}
	
	/*  ends masthead elements */
	

#content {  /*  Main central content box  */
background-color: #fff;
margin: 25px auto;
width: 978px;
height: 100%;
}

	.column { /* text columns in #content on home page */
	width: 450px;
	float: left;
	margin: 0 0 10px 25px;
	}
	
	.wide-column { /* text columns in #content on rest of site */
	width: 515px;
	float: left;
	margin: 0 0 10px 25px;
	}
	
	.narrow-column { /* text columns in #content on rest of site */
	width: 365px;
	float: left;
	margin: 0 0 10px 45px;
	}
	
	#features-box {
	width: 365px;
	min-height: 313px;
	background: url(../site-images/features-box.jpg) repeat-x bottom center #f3f8fe;
	margin-bottom: 25px;
	}
	
	/*  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;
width: 120px;
border-right: solid 1px #106bad;
text-align: center;
font-weight: 600;
}

#navigation ul li a.last {
border: none;
}



#home-focus-area #focus-content h2 a, #focus-area #focus-content h2 a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}

a.more { /* more info links in focus area */
float: right;
}


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

}

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

#second-nav ul li a {
float: left;
padding: 0 25px;
border-right: solid 1px #106bad;
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;
}

#content h1 {
padding: 20px 0 10px 25px;
font-size: 18px;

}

h2 {
}

#home-focus-area #focus-content h2, #focus-area #focus-content h2 {
padding-top: 10px;
}

#focus-area #focus-content h2 {
padding-bottom: 10px; 
}

h3 {
}

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


h4{
}

p {
color: #333;
}

#strap-line p { /* main strap line in masthead */
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 24px;
text-align: justify;
}

#focus-area #focus-content p { /* text within focus area */

}

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

#features-box 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;
}

.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 20px 45px;
padding: 0;
}

ul.downloads li {
background: url(../site-images/download-icon.jpg) 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: 14px;
font-weight: 600;
}

ul {
color: #333;
}

ol {
}

hr {
}

label {
float: left;
font-size: 14px;
}

.required {
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;
}


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

a img {
	border: 0;
}


#focus-area #images img {

}

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

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

#wrapper {
text-align: left;
}