/*
WNW Design Ltd.
StarterSite Template #1
XHTML/CSS Compliant
Last Edited 5th May 2005
*/


/* wildcard, meaning "every child" attribute. Sets this attribute for everything on the page. You can also add other style properties to this which need to appear sitewide */

* {
text-decoration : none;
}


/* main body attribute - sets font specifications. fonts should be specified as a percentage so that it is both cross-browser compatible and can be resized */ 

body {
margin : 0px;
font-family : Arial, Helvetica, sans-serif;
font-size : 80%;
text-align:center;
background-color : #121c6D;
}

#wrapper {
margin: 0px 0px;
text-align:center;
}


/* logo on left controlled by background-image property, if wider than 90 pixels, adjust the padding-left accordingly to get the h1 in the right position */

#logo {
width : 750px;
margin: 0px auto;
background-color : #121c6D;
min-height : 90px;
padding : 10px 10px 10px 10px;
padding-left : 0px;
overflow : auto;
background-image : url(images/devon-awnings-logo.gif);
background-position : 10px 10px;
background-repeat : no-repeat;
border-bottom : 2px solid #ffffff;
*min-height: 100px;
}


/* if logo is above 90 pixels tall, adjust the padding-top and padding-bottom properties accordingly to vertically align the h1 tag to the center */

#logo h1 {
color : #ffffff;
margin : 0px;
padding-top : 10px;
padding-bottom : 10px;
}


/* container for main body, the background color on the left is specified by a repeating background image, this is so that when the content expands, the color on the right expands aswell. background image is 150 pixels wide and 1 pixel high */

#container {
width : 760px;
margin: 0px auto;
height : auto;
background-position : 0% 0%;
background-repeat : repeat-y;
overflow:auto;
background-color: #ffffff;
}


/* navigation area, adjust background-color property accordingly */

#nav {
width : 760px;
height : 1%;
background-color : #8D9AB5;
border-bottom : 2px solid #ffffff;
}

html>body #nav {
height:auto;
overflow:auto;
}


/* this property is set around the links in order to format them properly */

#navlinks {
width : 100%;
}


/* navigation link, adjust background-color properties accordingly to match layout */

#navlinks a {
float: left;
width : 120px;
color : #ffffff;
font-weight : bold;
background-color : #8D9AB5;
}

#navlinks a:hover {
color : #000000;
background-color : #dddddd;
}

	#textlinks a {
	float: left;
	width : 25px;
	color : #ffffff;
	font-weight : bold;
	background-color : #8D9AB5;
	padding: 5px 3px 5px 3px;
	}
	
	#textlinks a:hover {
	color : #000000;
	background-color : #dddddd;
	padding: 5px 3px 5px 3px;
	}


/* this span adds the padding onto the link in the navigation. adjust padding accordingly to where you want the text to appear */

#navlinks span {
display : block;
padding-top : 5px;
padding-left : 10px;
padding-right : 5px;
padding-bottom : 5px;
}

/* address bar, only change if needing bigger text size. size is adjusted as a percentage in accordance to the body font size */

#address {
width : 150px;
font-size : 85%;
font-weight : bold;
color : #ffffff;
border-right : 2px solid #ffffff;
border-bottom : 2px solid #ffffff;
background-color : #8D9AB5;
}

#address p {
padding : 5px;
margin : 0px;
}

#address a {
color : #ffffff;
}

#address a:hover {
color : #000000;
background-color : #dddddd;
}

/* this div controls the top h1 tag with the page title on it */

#pagetitle {
background-color : #dddddd;
}

#pagetitle h1 {
font-size : 150%;
color : #1F3767;
margin : 0px;
padding: 15px 25px 15px 25px;
text-align : left;
}


/* this is the main content division, the right area is floating, and can be removed in the template - if done, remove the margin-right property on the #contentleft division */

#content {
text-align : left;
margin-top : 25px;
margin-bottom : 25px;
margin-left : 20px;
margin-right : 20px;
overflow:visible;
}


/* fixer for FireFox - doesn't read the float property as IE does */

html>body #content {
margin-left : 20px;
}


/* contentsep - this is in place for Internet Explorer, so that the content is always at least 350 pixels tall, which will mean that the spiderlinks appear at the bottom of the page. if you want to remove this simply delete from the template */

#contentsep {
float : left;
width : 1px;
height : 350px;
}

#contentsep2 {
display : block;
width : 400px;
height : 1px;
}

#content table {
font-size : 100%;
}

#form td {
font-size : 100%;
padding : 5px;
margin : 0px;
border : 1px solid #8D9AB5; 
}

#content textarea, #content input {
width : 198px;
margin : 0px;
}

/* content text properties, sizes and colours defined */

#content h1 {
font-size : 150%;
margin : 0px;
padding : 5px;
padding-bottom : 12px;
color : #8D9AB5;
}

#content p {
margin : 0px;
padding : 5px;
text-align : justify;
}

	.blue {
	background:#8D9AB5;
	color:#FFFFFF;
	padding:20px;
	width:370px;
	}

#content strong {
margin : 0px;
text-align : justify;
font-size: 1.2em;
}

#content a {
color : #8D9AB5;
}

#content a:hover {
color : #ffffff;
background-color : #8D9AB5;
}

.image {
float: right;
margin: 10px 20px 10px 20px;
}


/* spiderlinks - set background-color and color properties accordingly */

#spiders {
background-color : #8D9AB5;
font-size : 85%;
text-align : center;
font-weight : bold;
color : #ffffff;
border-top : 2px solid #ffffff;
border-bottom : 2px solid #ffffff;
margin: 0px auto;
}

#spiders {
margin : 0px;
padding : 5px;
}

#spiders a {
color : #ffffff;
}

#spiders a:hover {
color : #ffffff;
background-color : #1F3767;
}

/* spiderlinks - set background-color and color properties accordingly */

#skeleton {
display : none;
}

#aboutpoints {
margin : 0px;
padding : 5px;
text-align : center;
}

#aboutimage {
margin: 0px 10px 0px 10px;
display: inline;
}

/* Highlighted box - set background-color and border color accordingly */

.highlightbox {
background-color: #8D9AB5;
padding: 5px;
border:#1F3767 solid 1px;
}

.highlightbox2 {
background:#8D9AB5;
color:#FFFFFF;
padding:20px;
}