/* 

STYLE SHEET FOR NORTH AINLEY HALLIWELL WEB SITE
Created by David Prince
www.fishnet.co.uk

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms
	
Notes

*/


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

html, body { /* remove default browser padding and margins for consistency */
	margin: 0;
	padding: 0;
}

body { /* forces scrollbar */
	height: 101%;
}

.clearall { /* forces clearing element */
	clear: both;
	height: 1px;
}



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

body {
	background: url(../gfx/pagebg.jpg) repeat-x;
	text-align: center;
	margin: 10px 0px;
	padding: 0px;
	text-decoration:none !important;
}

#wrapper {
	text-align: left;
	width: 900px;
	background: url(../gfx/bgWrapper.png) repeat;
	border: 1px solid #e3eaee;
	padding: 0px;
	margin-right: auto;
	margin-left: auto;
}

#corporate {
	padding: 5px 5px 4px 5px;
}

#corporate address, #corporate div.addy {
	font: bold normal 10px/18px Verdana, Arial, Helvetica, sans-serif;
	float: right;
	color: #003a6a;
}
.addy {
	padding-right: 10px;
}


#logo {
	float: left;
}

#navigation {
	width: 200px;
	float: left;
}

#main {
	margin: 10px 10px 10px 210px;
	background: url(../gfx/accreditations.jpg) no-repeat right bottom;
}
#masthead {
	width: 670px;
	margin-bottom: 10px;
}


#content {
	width: 450px;
	float: left;
}

#sidebar {
	float: right;
	width: 210px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

#footer {
	background: url(../gfx/bgFooter.jpg) no-repeat center;

}

.feature {
	margin-bottom: 10px;
}

.casestudypic {
	float: right;
	margin-bottom: 10px;
	margin-top: 10px;
}
.casestudy h2 {
	margin-bottom: 5px;
}

.casestudyul {
	margin-left: 0px;
	float: left;
}
.casestudy {
	border-bottom: 1px solid #487C46;
	margin-top: 10px;
	padding-bottom: 0px;
}

.fleet {
	border-bottom: 1px solid #487C46;
	margin-top: 10px;
	padding-bottom: 10px;
}


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



#navigation ul {
	display: block;
	margin: 20px 0px 0px 10px;
	padding: 0px;
}

#navigation li {
	list-style: url(none) none;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #bfceda;

}

#navigation li a:link, #navigation li a:visited {
	font: 9pt/33px Arial, Helvetica, sans-serif;
	color: #487c46;
	text-decoration: none;
	background: url(/gfx/bgInactiveLink.gif) no-repeat 0px center;
	padding-left: 15px;
	display: block;

}

#navigation li a:hover, #navigation li a.active, .active {
	font: bold 9pt/33px Arial, Helvetica, sans-serif;
	color: #487c46;
	text-decoration: none;
	background: url(/gfx/bgActiveLink.gif) no-repeat 0px center !important;
	padding-left: 15px;
	display: block;
}

#content a:link, #content a:visited, #content a:active, #sidebar a:link, #sidebar a:visited, #sidebar a:active { 
	color:#487c46 !important;
}

#content a:hover, #sidebar a:hover { 
	color:#213820 !important;
}


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

#main h1 {
	color: #487c46;
	text-decoration: none;
	text-transform: uppercase;
	font: bold normal 24px "Arial Black", Arial, Helvetica, sans-serif;
	margin: 0px;
}

#main p, #main li, #main address {
	font: 9pt/16px Arial, Helvetica, sans-serif;
	color: #666;

}

#footer p, #footer a:link, #footer a:visited, #footer a:hover, #footer a:visited  {
	font: 10pt/23px Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;

}

.feature h2 {
	font: 13px/22px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background: url(../gfx/bgSidebarH2.jpg) repeat-x;
	text-align: center;
	margin: 0px;
	
}

.feature p {
	margin: 0px;
	padding-left: 60px;
	background: #ebf0ec url(../gfx/iconRenewable.jpg) no-repeat 5px 5px;
	height: 50px;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 10px !important;
}

.question {
	font-weight: bold !important;
}

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




/*  --------- 6. tables  ------- */




/*  --------- 6. forms  ------- */
.fleet img {
	width: 150px;
	float: right;
	margin-right: 15px;
}

.fleet ul {
	margin-left: 180px;
	margin-right: 25px;
}

#content h2 {

	color: #487c46;
	text-decoration: none;
	text-transform: uppercase;
	font: bold normal 16px Arial, Helvetica, sans-serif;
	margin: 0px;
}
#content h3 {


	color: #487c46;
	text-decoration: none;
	text-transform: capitalize;
	font: bold normal 14px Arial, Helvetica, sans-serif;
	margin: 0px;
}

/* --------- 7. JS Scroller ------------ */
#masthead {
   width: 672px; /* important to be same as image width */
   height: 216px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#masthead ul {
	margin: 0 !important;
	padding: 0 !important;
}

#masthead a:link, #masthead a:visited, #masthead a:hover, #masthead a:active {
	color: #fff !important;
}

#mastheadContent {
   width: 672px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.mastheadImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   margin-top: 10px;
}

.mastheadImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 274px;
   background-color: #000;
   filter: alpha(opacity=80); /* here you can set the opacity of box with text */
   -moz-opacity: 0.8; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.8; /* here you can set the opacity of box with text */
   opacity: 0.8; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}