@charset "UTF-8";
/* CSS Document */

/* Any instance of " *html body #examplediv " are hacks for Internet Explorer 6 ---*/

/*-----------GLOBAL LAYOUT STYLING-----------*/

body {
font-family:Arial, Helvetica, sans-serif; /*changes font for whole site*/
font-size:62.5%; /*DO NOT TOUCH*/
margin:0px;/*DO NOT TOUCH*/
padding:0px;/*DO NOT TOUCH*/
text-align:center;/*centres container div on page*/
background-color:#6699cc;
}

#container {
width:800px;/*Width of the central area*/
margin:0px auto;/*centres container on page*/
text-align:center; /*re-aligns text*/
padding:0px;/*IE will add padding to width, adjust width to suit*/
}

/*----------Nav-------------------------*/

#nav {
background:url(../layoutimages/nav.jpg) repeat-x;
height:35px;
margin:4px 2px;
padding:3px 0px;
text-align:right;
}

ul #navlist {margin:5px 0px; padding:0px; text-align:right;}
#navlist li {list-style:none;display:inline; padding:0.5em 0px;}
#navlist li a { color:#FFFFFF; text-decoration:none; padding:0px 10px; margin:0px;}
#navlist li a:hover {color:#CCCCCC; text-decoration:underline;}

/*-------Header Styles---------------*/

#header {
width:800px; /*width should be same as graphic image*/
height:107px; /*height should be the same as graphic image*/
margin:0px; /*Aligns header graphic*/
padding:0px;
background:url(../layoutimages/header.jpg) no-repeat;
}

#header span { display:none;}

#header a img { border:none;}


/*----Content Wrapper, main body goes inside here----*/

#contentwrapper {
width:784px; /*wrapper width*/
margin:0px 5px 0px 8px; /*Displaces content area from div above below and container walls*/
padding:0px;
font-size:1.2em;
background-color:#FFFFFF; /*background color, can also be a repeated image*/
}

/*-------------------header teag styling----------------------*/

h1 {
height:25px; /*height of the tag, should be same as icon size*/
font-size:19px; 
margin:0px;
padding:5px 0px 3px 5px; /*padding allowing for the icon image*/
color:#FF0000; /*font colour*/
border-bottom:1px solid #f2f2f2;
}

h2 {
font-size:18px;
margin:0px;
padding:5px;
text-align:left;
color:#0033CC;
}



/*-------------------everything below will style the left bars for all layouts
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------*/

/*-----Side Bar ---------*/

#sidebar {
float:left;
width:190px; /*this will effect your #main right margin size*/
padding:10px 0px; /*pads content inside div*/
margin:0px 5px 0px 15px;
background:#e5ecf9 url(../layoutimages/sidebtm.jpg) no-repeat bottom ;
color:#333333; /*text color*/
}

#sidebar p {
text-align:left; /*text positioning*/
font-size:90%; /* percentage scales based on size declared in #contentwrapper*/
margin:0px 10px;
}

#sidebar a {color:#FF0000; text-decoration:underline;}
#sidebar a:hover {color:#3366cc;text-decoration:none;}

/*sidebar navigation list*/

#sidebar dl {
margin:5px 0px;
padding:10px 0px;
}

#sidebar dt {
text-align:left; /*Text align center*/
font-size:100%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#0033cc; 
margin:0px;
padding:5px 10px;
}

#sidebar dd {width:190px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
border-bottom:1px solid #fff; /*styles separator*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

#sidebar dd a {color:#FF0000; display:block; padding:10px 5px; text-decoration:none; border-left:5px solid #e5ecf9; }

#sidebar dd a:hover { color:#0033CC; background-color:#FFF; border-left:5px solid #0033cc;}

/*-----Left ---------*/

#leftbar {
float:left;
width:150px; /*this will effect your #main right margin size*/
padding:10px; /*pads content inside div*/
background-color:#f2f2f2;
color:#333333; /*text color*/
}

#leftbar p {
text-align:left; /*text positioning*/
font-size:90%; /* percentage scales based on size declared in #contentwrapper*/
}

#leftbar a {color:#FF6699; text-decoration:underline;}
#leftbar a:hover {color:#666666;text-decoration:none;}

/*sidebar navigation list*/

#leftbar dl {
margin:5px 0px;
padding:10px 0px;
}

#leftbar dt {
text-align:left; /*Text align center*/
font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; 
margin:0px;
padding:5px 10px;
}

#leftbar dd {width:140px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
border-bottom:1px solid #fff; /*styles separator*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

#leftbar dd a {colour:#333; display:block; padding:10px; }

#leftbar dd a:hover { color:#FFFFFF; background-color:#99CCFF;}


/*-----Right Bar ---------*/

#rightbar {
float:right;
width:90px; /*this will effect your #main right margin size*/
padding:10px; /*pads content inside div*/
background-color:#f2f2f2;
color:#333333; /*text color*/
}

#rightbar p {
text-align:left; /*text positioning*/
font-size:90%; /* percentage scales based on size declared in #contentwrapper*/
}

.message {padding:5px; text-align:center; background-color:#f2f2f2; border:1px solid #ccc; margin:0px 10px;}

.address { font-size:120%; color:#3399FF;}

#rightbar a {color:#FF6699; text-decoration:underline;}
#rightbar a:hover {color:#666666;text-decoration:none;}

/*sidebar navigation list*/

#rightbar dl {
margin:5px 0px;
padding:10px 0px;
}

#rightbar dt {
text-align:left; /*Text align center*/
font-size:120%; /*Percentage scales based on size declared in #contentwrapper*/
font-weight:bold; /*this makes the font bold*/
color:#333333; 
margin:0px;
padding:5px 10px;
}

#rightbar dd {width:80px; /*width of side bar minus margins and padding*/
font-size:90%; /*font size for links or text*/
border-bottom:1px solid #fff; /*styles separator*/
padding:0px; 
margin:0px;
text-align:left; /*aligns the page text*/
}

#rightbar dd a {colour:#333; display:block; padding:10px; }

#rightbar dd a:hover { color:#FFFFFF; background-color:#99CCFF;}


/*-------------------everything below will style the main content area stuff for all layouts
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------*/

/*------------THIS IS FOR A TWO COLUMN LAYOUT--------------*/

/*-----------Main Content Aread-----------------------*/

#main {
margin:0px 20px 0px 220px; /* the left padding includes the width of the sidebar plus extra length for a spacer gap*/
text-align:left;
} 

/**html #main {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#main p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#main a img {border:1px solid #fff;}
#main a:hover img {border:1px solid #ff0000;}

#main a {color:#0066CC;text-decoration:underline;}
#main a:hover {color:#666666;text-decoration:none;}
#main ul {margin:3px 0px;padding:0px 10px; list-style:none; /* Styles list icons*/}

#main li {
margin:3px;
padding:0px 5px;
}

#main ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}


/*--------------THIS IS FOR A A SINGLE COLUMN LAYOUT---------------*/


#single {
margin:0px 10px; /* this gives text padding away from the container*/
text-align:left;
} 

/**html #single {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#single p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#single a img {border:1px solid #fff;}
#single a:hover img {border:1px solid #0099FF;}

#single a {color:#0066CC;text-decoration:underline;}
#single a:hover {color:#666666;text-decoration:none;}
#single ul {margin:3px 0px;padding:0px 10px; list-style:circle; /* Styles list icons*/}

#single li {
margin:3px 0px;
padding:0px;
}

#single ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}

/*--------------THIS IS FOR A A THREE COLUMN LAYOUT---------------*/


#middle {
margin:0px 120px 0px 180px; /* the left padding includes the width of the sidebar plus extra length for a spacer gap*/
text-align:left;
} 

/**html #middle {margin: 0px 20px 0px 0px;} hack for internet explorer handling width's*/

#middle p {line-height:1.3em;text-align:justify; /*makes text touch both sides of div, like a magazine styling*/}

#middle a img {border:1px solid #fff;}
#middle a:hover img {border:1px solid #0099FF;}

#middle a {color:#0066CC;text-decoration:underline;}
#middle a:hover {color:#666666;text-decoration:none;}
#middle ul {margin:3px 0px;padding:0px 10px; list-style:circle; /* Styles list icons*/}

#middle li {
margin:3px 0px;
padding:0px;
}

#middle ol {
list-style-type:decimal; /* Styles list icons*/
margin:3px 0px;
padding:0px 10px 0px 15px;
}


/*----------------Image Styling----------------*/

.left {
float:left; /*The important bit, floats image left*/
background-color:#D5DDFF;
border:1px solid #ccc;
padding:4px;
margin:0px 10px 5px 0px;
}

.right {
float:right; /*The important bit, floats image left*/
background-color:#D5DDFF;
border:1px solid #ccc;
padding:4px;
margin:0px 0px 5px 10px;
}


/*------------------------------Enquiry Form
-------------------------------------------------------------------------*/
/*contactform2*/

#EnqSender, #EnqCompany, #EnqReferSite, #EnqEmailSender, #EnqSubject, #EnqProjectNature, #EnqProjectOther, #EnqBuildStatus, #EnqBuildOther, #EnqProjectTime {width:350px;}
#contactform {margin:0px 20px; padding:10px 0px;}
#contactform p{font-size:1.2em; color:#000; margin:3px 10px;padding:5px;}
#contactform legend{font-size:1.4em; font-weight:bold; color:#333;}
#contactform fieldset {border:1px solid #f2f2f2;padding:5px 10px;}



/*---------------Footer------------------------------*/

#footer {
clear:both; /*Clear floats*/
text-align:center; /* aligns footer text*/
height:40px; /*footer height*/
font-size:90%; /*scales up footer font size*/
margin:-15px 5px 0px 8px;
padding:0px;
width:784px;
background:url(../layoutimages/footer.jpg) no-repeat;
}

#footer p {padding:15px 0px; color:#666;}
#footer a {color:#666; text-decoration:underline;}
#footer a:hover {color:#0099CC; text-decoration:none;}