/*
* Author: 		Trevor Morris
* Contact:		trevor@creation.uk.com
* Version:		0.1
* Created:		11/10/2005
* Last Updated:	11/10/2005
*
* CONTENTS
* -------------------
*
* =1 HTML
* =1a General Formatting
* =1b Headers
*
* =2 ACCESSIBILITY
* =2a Hiding Elements
* =2b Image Replacement
*
* =3 CONTAINERS
* =3a Branding
* =3b Content
* =3c Footer
*
* =4 NAVIGATION
* =4a General
* =4b Links
* =4c Active States
* =4d Main Navigation
* =4e Sub Navigation
*
* =5 OTHER
* =6 FORMS
*

/* =1a HTML - General Formatting
-------------------------------------------------------------------------------------------------- */
* {margin: 0; padding: 0;}
body {
position: relative;
font: normal normal 68%/1.5em Arial, Helvetica, sans-serif;
background: #fff; padding: 15px 0 0 0; color: #000;}
p, ul, ol, dl {margin: 1em 0; line-height: 150%;}
ul {list-style: none;}
form, fieldset, a img, abbr, acronym {border: 0;}
abbr, acronym {cursor: help;}
a:hover {text-decoration: none;}
#content .active a {color: #666; text-decoration: none; background-color: inherit;}
hr {clear: both;}
#container {position: relative;}


/* =1b HTML - Headers
-------------------------------------------------------------------------------------------------- */
h3,
#content-tagline {font-size: 20px; font-weight: normal;}
h3 {display: inline; padding: 0 16px 0 0; background-color: inherit;
color: #007cca; background: url(images/ellipsis.gif) no-repeat 100% 80%;}
h4 {margin: 1em 0; font-size: 1.5em; font-weight: normal;}



/* =2a ACCESSIBILITY - Hiding Elements
-------------------------------------------------------------------------------------------------- */
.access, 
#skiplinks,
#content h2, #navigation h2,
legend, caption {position: absolute; left: -9999px; font-size: 0; height: 0; overflow: hidden;}

/* =2b ACCESSIBILITY - Image Replacement (Phark)
-------------------------------------------------------------------------------------------------- */
#branding h1 a, #content-send-a-plan a,
.more a span, .meta dt {display: block; text-indent: -9999px; font-size: 0; height: 0; overflow: hidden; text-decoration: none;}



/* =3a CONTAINERS - Branding
-------------------------------------------------------------------------------------------------- */
#branding {height: 72px; color: #000; background: #fff url(images/header-repeat.gif) repeat-x 0 50%;}
#branding h1 {margin: 0 0 0 50px;}
#branding h1 a {display: block; height: 72px; width: 220px;
background: url(images/header-logo.gif) no-repeat 0 1px;}

#branding h2#branding-tagline {position: absolute; top: 0; right: 50px; /*width: 293px; height: 50px;*/
color: #d6dde1; background-color: inherit; font-weight: normal; font-size: 1.9em; letter-spacing: 1px; line-height: 20px;
/*background: url(images/header-tagline.gif) no-repeat 0 50%;*/}

/* =3b CONTAINERS - Content
-------------------------------------------------------------------------------------------------- */
#content {position: relative; padding: 5.5em 2em 0 290px; min-height: 250px; margin-bottom: 50px; width: 460px;}
#content p.introduction {font-size: 1.22em;}
#content:after {content: "."; display:inline-block; display: block; height: 0; clear: both; visibility: hidden;}

.columnone,
.columntwo {float: left; width: 45%;}
.columntwo {padding-left: 20px;}

/* =3c CONTAINERS - Footer
-------------------------------------------------------------------------------------------------- */
#footer {position: relative; clear: both; background: url(images/footer-repeat.gif) repeat-x 0 0; height: 65px; padding: 10px 50px;}
#footer p#footer-copyright {color: #ccc;}



/* =4a NAVIGATION - General
-------------------------------------------------------------------------------------------------- */
#navigation {}

/* =4b NAVIGATION - Links
-------------------------------------------------------------------------------------------------- */
#navigation a, #navigation a:hover, #footer p#footer-copyright {background-color: inherit;}
#navigation a {text-decoration: none; color: #aaa;}
#navigation a:hover {color: #666;}

#content a[href^='http://'],
#content a[rel~='external'],
#content .external {background: url(images/icon-external-link.gif) no-repeat 100% 50%; padding-right: 10px;}

#content a.download {padding-left: 15px; background: url(images/icon-download.png) no-repeat 0 60%;}
#content a.revert {padding-left: 17px; background: url(images/icon-revert.png) no-repeat 0 60%;}

/* =4c NAVIGATION - Active States
-------------------------------------------------------------------------------------------------- */
.homepage #homepage a,
.home #home a,
.gallery #gallery a,
.about #about a,
.building-matters #building-matters a,
.news #news a,
.downloads #downloads a,
.links #links a,
.company #company a,
.services #services a,
.people #people a,
.clients #clients a,
.instruction #instruction a,
.proposal #proposal a,
.contact #contact a,
.achieving #achieving a,
.sustaining #sustaining a,
.inspiring #inspiring a,
.conserving #conserving a,
.commercially #commercially a,
.exploring #exploring a,
.latest #latest-news a,
.archives #archive-news a,
.residential #residential a,
.commercial #commercial a,
.education #education a,
.health-care #health-care a,
.industrial #industrial a,
.leisure #leisure a,
.retail #retail a,
a:link, a:visited, a:hover, a:active,
form dl label {color: #007cca; background-color: inherit;}

/* =4d NAVIGATION - Main Navigation
-------------------------------------------------------------------------------------------------- */
#navigation-main {position: absolute; top: 85px; left: 55px; width: 213px; padding-bottom: 10px;
background: url(images/navigation-container.gif) no-repeat 0 100%;}
#navigation-main ul {padding: 15px; margin: 0;
background: url(images/navigation-container.gif) no-repeat 0 0;}
#navigation-main ul li a {display: block; padding: 0 0 0 20px; width: 150px;
background: url(images/icon-menu-squares.gif) no-repeat 0 50%; font-size: 14px; line-height: 22px;}

#navigation-main ul li a:hover {background-position: -200px 50%;}

.homepage #homepage a, .homepage #homepage a:hover,
.home #home a, .home #home a:hover,
.gallery #gallery a, .gallery #gallery a:hover,
.about #about a, .about #about a:hover,
.building-matters #building-matters a, .building-matters #building-matters a:hover,
.news #news a, .news #news a:hover,
.links #links a, .links #links a:hover,
.downloads #downloads a, .downloads #downloads a:hover,
.help #help a, .help #help a:hover {background-position: -400px 50%;}

/* =4e NAVIGATION - Sub Navigation
-------------------------------------------------------------------------------------------------- */
#navigation-section {position: absolute; top: 80px; left: 290px;}
#navigation-section ul li {display: inline; border-right: 1px solid #007cca; margin-left: 8px; padding-right: 10px;}
#navigation-section ul li a {font-size: 12px;}
#navigation-section ul li.firstlistitem {margin: 0;}
#navigation-section ul li.lastlistitem {border: 0;}



/* =5 OTHER
-------------------------------------------------------------------------------------------------- */
#content-latest-news h3,
#content-latest-news dl.meta dd,
#content-latest-news strong.more a {color: #6f2b90; background-color: inherit;}

.error p,
.error ul {margin-bottom: 3em;}

#content-latest-news,
#content-thumbnails {position: absolute; top: 22em; left: 55px; width: 200px;}

.sitemap #content ul li {margin: 0 0 1em; font-size: 1.1em;}
.sitemap #content ul ul {margin: 0 1em;}
.sitemap #content ul ul li {margin: 0; font-size: 0.9em; list-style-type: disc;}
.sitemap #content ul ul ul li {font-size: 1em;}
#footer-sitemap {position: absolute; top: 1em; left: 290px;}

#content-tagline {margin: 0;}

.company #content:after,
#content div:after,
#content form fieldset dl.radio-buttons:after,
form .form-information:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}

#content #content-send-a-plan,
#content #content-send-a-plan a {height: 57px;}
#content #content-send-a-plan {width: 10.5em; padding: 0 0 0 20px;}
#content #content-send-a-plan a {position: relative; margin-top: -40px; float: right; width: 67px; z-index: 5;
background-image: url(images/send-a-plan.gif);}


/* =5 FORMS
-------------------------------------------------------------------------------------------------- */
#login-form {position: absolute; top: 65px; left: 60px; width: 180px; border: 1px solid #ccc; background-color: #f5f5f5; color: #000; padding: 5px 10px 10px;}
#login-form input {width: 165px;}
form fieldset {position: relative;}
form fieldset legend {height: 1em;}

form {clear: both; margin: 1em 0 2em;}
form dl label,
form dl a,
em.error, .error em {font-size: 1.1em;}
form dl dd {margin-bottom: 10px;}
form dl input,
form dl textarea,
form dl select {width: 300px; padding: 2px 5px; border: 1px solid #aaa; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; background-color: #fff !important;}
form dl input:focus,
form dl textarea:focus,
form dl select:focus {border-color: #666; background-color: #fff;}
form dl select {width: 312px; padding: 0;}
form dl select option {padding: 2px 5px 0;}
form dl label {font-weight: normal;}

form dl textarea {width: 97%; height: 200px}
form dl textarea.larger {height: 350px;}

form .error {font-weight: normal;}
form .error, form .error a, #content form .form-information ul li.error a, .note em {color: #c00; background-color: inherit;}
form dl em.error {margin-left: 10px;}

input.apply-changes,
input.logout,
input.login,
input.add,
input.delete,
input.proposal,
input.instruction {display: block; clear: left; border: 0; height: 26px; text-indent: -9999px; font-size: 0; overflow: hidden; background: no-repeat 0 0;}

input.apply-changes:hover, input.apply-changes:focus,
input.logout:hover, input.logout:focus,
input.add:hover, input.add:focus,
input.delete:hover, input.delete:focus,
input.proposal:hover, input.proposal:focus,
input.instruction:hover, input.instruction:focus,
#login-form input.login:hover, #login-form input.login:focus {background-position: 0 -26px; cursor: pointer;}

input.apply-changes	{background-image: url(images/buttons/apply-changes.gif); width: 152px;}
input.logout {background-image: url(images/buttons/logout.gif); width: 102px;}
input.add {background-image: url(images/buttons/add.gif); width: 95px;}
input.delete {background-image: url(images/buttons/delete.gif); width: 110px;}
input.proposal {background-image: url(images/buttons/proposal.gif); width: 167px;}
input.instruction {background-image: url(images/buttons/instruction.gif); width: 186px;}
#login-form input.login {display: block; background-image: url(images/buttons/login.gif); width: 95px; margin: 0 auto;}

#content p.login {position: absolute; top: 10px; left: 60px; padding: 5px 50px 5px 10px; min-width: 360px;
background: #e2f9e3 url(images/icon-admin.gif) no-repeat 100% 0; border: 1px solid #696; color: #696; text-align: center; font-size: 1.1em;}

#content p.invalid {background-color: #c00; background-position: 100% -30px; border: 1px solid #900; color: #fff;}
#content p.logout {background-color: #cfe8f9; background-position: 100% -61px; border: 1px solid #007cca; color: #007cca;}
#content p.warning {background-color: #f93; background-position: 100% -91px; border: 1px solid #f63; color: #fff;}

form fieldset dl.radio-buttons dt,
form fieldset dl.radio-buttons dd {float: left;}
form fieldset dl.radio-buttons dt {width: 20px; line-height: 200%; vertical-align: middle;}
form fieldset dl.radio-buttons dd {margin-left: 5px; width: 75px;}
form fieldset dl.radio-buttons input {width: auto; border: 0;}

body.downloads #content dl {
	margin-top: -1em;
}
body.downloads #content dl dt {
	margin-top: 1.5em;
	font-size: 1.2em;
}
body.downloads #content dl dd {
	margin: -1em 0 -0.5em;
}