/*
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 : Verdana;
font-size : 80%;
}


/* 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 : auto;
background-color : #FFFFFF;
min-height : 110px;
padding : 10px 10px 10px 10px;
padding-left : 125px;
overflow : auto;
background-image : url(images/annex-logo.gif);
background-position : 10px 10px;
background-repeat : no-repeat;
border-bottom : 2px solid #ffffff;
}


/* 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;
font-size : 215%;
margin : 0px;
padding-top : 30px;
padding-bottom : 30px;
}


/* 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 : 100%;
height : auto;
background-image : url(images/back.gif);
background-position : 0% 0%;
background-repeat : repeat-y;
overflow : auto;
}


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

#left {
float : left;
width : 245px;
height : auto;
background-color : #CC3300;
}


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

#leftlinks {
width : auto;
}


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

#leftlinks a {
display : block;
width : 245px;
color : #ffffff;
font-weight : bold;
background-color : #CC3300;
border-right : 2px solid #ffffff;
border-bottom : 2px solid #ffffff;
}

#leftlinks a:hover {
color : #000000;
background-color : #cccccc;
}


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

#leftlinks 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 : 245px;
font-size : 85%;
font-weight : bold;
color : #ffffff;
border-right : 2px solid #ffffff;
border-bottom : 2px solid #ffffff;
}

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

#address a {
color : #ffffff;
}

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

/* this is the entire right content area, no need to edit this, unless you need to add a background-color property */

#right {
width : auto;
height : auto;
text-align : center;
overflow : auto;
}


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

#pagetitle {
background-color : #dddddd;
border-left : 2px solid #ffffff;
}

#pagetitle h1 {
font-size : 150%;
color : #000000;
margin : 0px;
padding-right : 25px;
padding-top : 15px;
padding-bottom : 15px;
text-align : right;
}


/* 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 : 250px;
margin-right : 100px;
width: auto;
min-width : 400px;
}


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

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


/* 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;
}

#contentleft {
display : table-cell;
width : auto;
vertical-align : top;
}

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

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

#contentleft textarea, #contentleft 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 : #CC3300;
}

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

#content a {
color : #CC3300;
}

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

#content img {
float: right;
margin: 0px 0px 10px 20px;
}


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

#spiders {
background-color : #CC3300;
font-size : 85%;
text-align : center;
font-weight : bold;
color : #ffffff;
}

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

#spiders a {
color : #ffffff;
}

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

/* 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;
}