/* BASE */

* { margin: 0; padding: 0; }
body { color: #010302; }
body { font-family: Arial, sans-serif; line-height: 1.6em; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; }/* Font sizing hack for consistency */
* html body { font-size: x-small; /* for IE5 Win */ f\ont-size: x-small; /* for other IE versions */ }
html>body { font-size: small; /* be nice to opera */ }
body { font-size: 100.01%; }

img { border: 0; }
p { margin: 1em 0; }
a { color: inherit; text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4 { font-family: Verdana, Arial, sans-serif; font-size: 100.01%; }
h1 { font-weight: normal; text-transform: uppercase; margin-bottom: 0.4em; font-size: 420%; font-weight: normal; margin-top: 7px; /* correction */ }
h2 { font-weight: bold; text-transform: uppercase; width: 100%; }
h3 { font-weight: normal; border-bottom: 1px solid; margin-bottom: 0.5em; font-size: 125%; text-decoration: none; }
h4 { font-weight: bold; margin-bottom: 0; }


strong, strong * { font-weight: bold; }

table { border-spacing: 0; border-collapse: collapse; width: 100%; margin: 1.2em 0; }
td { vertical-align: top; text-align: left; }

ol { margin: 0 20px; }
ul { margin: 0; }
li { padding-left: 0; margin: 0.4em 0; }

/* BASE EXTENSIONS */

input.custom, select.custom, textarea.custom, button.custom { width: auto !important; }
input, textarea { background: #EBE5E0; padding: 0.2em; line-height: 1.4em; border: 1px solid; }

td.right, th.right { text-align: right !important; }
td.center, th.center { text-align: center !important; }
td.no-data { text-align: center !important; font-style: italic; }
td.no-data * { font-style: italic; }

ul.main { margin: 1.4em 0; }

td.split { width: 50%; }

p.intro { font-weight: bold; }
p.first, h1.first, h2.first, h3.first, h4.first, h5.first, h6.first { margin-top: 0; }
p.last { margin-bottom: 0; }

p.minibold { font-size: 90%; font-weight: bold; }
.quote { font-style: italic; }

.message { margin-left: -20px; padding-bottom: 50px; font-weight: bold; background: url(../images/utility/mailgone.png) no-repeat top left; padding-left: 110px; min-height: 80px; }

/* GENERAL */

a.block { display: block; }
.custom { width: auto; }
.item { position: relative; }
.small { font-size: 86%; }
.surround { _height: 1px; } /* this height is only seen by IE */
.surround:after { content: '.'; clear: both; height: 0; display: block; visibility: hidden; }

/* test this in windows before applying
.surround { display: inline-block; } */

/* Hides from IE-mac \*/
* html .surround { height: 1%; }
/* End hide from IE-mac */


/* STRUCTURE */

#container { margin-left: 0; margin-top: 0; min-height: 500px; position: relative; font-size: 95%; width: 770px; }
#page { position: relative; margin-left: 200px; }
#header, #content, #footer, #breadcrumbs { padding: 0.4em 45px; }
#content { position: relative; }
#footer, #breadcrumbs { height: 1.8em; margin: 0; }
#header, #content { background-color: #EBE6E8; }
#header h1 { display: block; padding-top: 0.2em; }
	
#footer ul { list-style-type: none; height: 2em; margin-top: 0; }
#footer li { display: inline; margin-right: 1em; }
#footer a { text-decoration: none; font-weight: normal; }
#footer a:hover { text-decoration: underline; }

/* breadcrumb trail */
html>body #breadcrumbs { height: 1.8em; } /* set height for Opera only */
#breadcrumbs h2 { line-height: 1.8em; }
#breadcrumbs h2 a { text-decoration: none; } 
#breadcrumbs h2 a:hover { text-decoration: underline; }
#breadcrumbs h4 { text-align: right; }

/* icon image for each section */
#icon { position: absolute; left: 20px; top: 20px; width: 160px; height: 160px; }

/* navigation */
#main-nav { position: absolute; left: 0; top: 200px; width: 200px; font-size: 80%; }
#main-nav ul { text-transform: uppercase; list-style: none; margin: 0; }
#main-nav li { background: none; padding: 0; margin: 0; margin-right: 20px; }
#main-nav li a { font-weight: bold; display: block; padding: 0.5em 0 0.5em 1.6em; height: 2em; text-decoration: none; }
#main-nav li.selgroup li a { height: 2em; border: none; text-decoration: none; padding-bottom: 0.5em; }
#main-nav li.selgroup a, #main-nav li.selgroup li a { text-decoration: none; }
#main-nav li.selgroup li a { font-weight: normal; }
#main-nav li li a:hover { text-decoration: none; }

/* selected menu group */
#main-nav li.selgroup, #main-nav li.selgroup ul li  { margin-right: 0; }
#main-nav a.selected, #main-nav a:hover { background: #EBE5E0; color: #010302; }

/* page content */

/* links in content */
#content a { color: #010302; text-decoration: underline; }
#content a:hover { text-decoration: underline; } 
#content a.tlink { color: #010302; text-decoration: none; }
#content a.tlink:hover { text-decoration: none; }
#content a h3 { color: #010302; text-decoration: none; }
#content a.tlink h3 { color: #010302; border-bottom: 1px solid; _width: 100%; }

#content a.arrowed { display: inline; clear: both; font-weight: bold; text-decoration: underline; /* background: url(../images/utility/right-arrow-hollow.gif) no-repeat top right; padding-right: 14px; padding-top: 0; padding-bottom: 7px; */ }
#content a.arrowed:hover { text-decoration: underline; /* background: url(../images/utility/right-arrow.gif) no-repeat top right; */ }
#content a.pagetop { font-size: 9px; color: #939996; text-decoration: none; position: absolute; right: 0; top: 0; text-align: right; padding-right: 30px; background: url(/images/utility/up-arrow.gif) no-repeat bottom right; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 120px; }
#content a.pagetop:hover { color: #010302; text-decoration: none; }

/* lists in content */ 
#content ul { list-style-type: none; margin-left: 0; }
#content ul li { position: relative; background: url(../images/utility/right-arrow.gif) no-repeat 0 8px; padding: 3px 0 5px 20px; }
#content ul.plain li { background: transparent; position: relative; padding: 0; }

/* page intro */
#content #introduction { font-weight: bold; margin-bottom: 1em; }

/* floats */
#content .split-l { float: left; width: 150px; }
#content .split-r { float: right; width: 380px; height: 1%; /* IE hack */}

/* glossary links */
#content a.glossary { text-decoration: none; }
#content a.glossary:hover { text-decoration: underline; }
#content #glossary_links { display: none; border-top: 1px solid; margin-top: 2em; }
#content #glossary_links p { font-size: 90%; color: #999; }
#content #glossary_links a { color: #999; }

/* CUSTOM STYLES */

/* ABOUT */

.about #contract img { margin: 3px; }

/* PORTFOLIO */

.portfolio .text { margin: 0 10px 0 160px; width: auto; }
/* rules for IE to set width */
.portfolio .text, .portfolio a.url { _width: 290px; }
#portfolio .text, #portfolio a.url { _width: 270px; }
/* end of rules for IE */
.portfolio .text p { line-height: 1.4em; margin-top: 0; margin-bottom: 0.1em; }
.portfolio .text a { font-weight: normal; text-decoration: underline; }
.portfolio .features { font-size: 88%; text-style: italic; display: none; }
/* icons list on portfolio pages */
.portfolio .item { margin: 0.7em 0; }
.portfolio a.image, .portfolio .icon { width: 150px; height: 100px; }
.portfolio .icon { float: left; }
.portfolio h4.asbg { margin-top: 1em; }

#portfolio .item { width: 450px; margin: 0; }

/* SERVICES */

/* glossary */
#glossary dt { margin-top: 1em; }
#glossary dd p { margin: 0.5em 0; }

/* CONTACT */
#address p { font-weight: bold; }
#address p label { font-weight: normal; width: 200px; margin-right: 20px; display: block; }

form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  margin: 0;
  padding: 0;
}

form fieldset {
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
  border: none;
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 120px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
	font-weight: bold;
}

form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
	text-decoration:underline;    /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
                                    /* pseudo-class on legend elements, but do support it on label elements */
                                    /* we instead underline first letter on each label element and accesskey */
                                    /* each input. doing only legends would  lessens cognitive load */
                                   /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
	padding: 0.4em;
}

form .fieldinput {
	border: none;
	width: 300px;
}

textarea { overflow: auto; }

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

/* ICON IMAGE FOR EACH SECTION */
body.home #icon { background: url(../images/background/icon/home.jpg) no-repeat; }
body.about #icon { background: url(../images/background/icon/about.jpg) no-repeat; }
body.services #icon { background: url(../images/background/icon/services.jpg) no-repeat; }
body.portfolio #icon { background: url(../images/background/icon/portfolio.jpg) no-repeat; }
body.contact #icon { background: url(../images/background/icon/contact.jpg) no-repeat; }

/* NATURAL COLOURS */
/* colours in general - used by logo */

/* colour coded menu */

#main-nav a { color: #010302; }
#main-nav a.selected, #main-nav a:hover, #page { background: #EBE5E0; color: #010302; } /* selected menu group */

body.home, #main-nav li#home ul, #main-nav li#home { background-color: #999793; }
body.home #page { background: #999793; }
body.home .asbg, body.home #content, body.home #footer a { color: #010302; }
body.home { background-color: #010302; }

body.services { background-color: #2C4108; }
#main-nav li#services ul, #main-nav li#services, body.services #breadcrumbs, body.services #footer { background-color: #9FA48A; }
body.services #page { background: #9FA48A; }
body.services .asbg, body.services #footer a, body.services #breadcrumbs { color: #2C4108; }

body.portfolio, body.portfolio .bg { background-color: #203958; }
#main-nav li#portfolio ul, #main-nav li#portfolio, body.portfolio #breadcrumbs, body.portfolio #footer { background-color: #9AA1A6; }
body.portfolio #page { background: #9AA1A6; }
body.portfolio .light { color: #9AA1A6; }
body.portfolio .asbg, body.portfolio #footer a, body.portfolio #breadcrumbs { color: #203958; }

body.contact, #main-nav li#contact { background-color: #CA2501; }
#main-nav ul.contact, #main-nav li#contact, body.contact .fieldinput, body.contact #breadcrumbs, body.contact #footer  { background-color: #DB8671; }
body.contact #page { background: #DB8671; }
body.contact .asbg, body.contact #footer a, body.contact .message, body.contact label, body.contact input.button, body.contact #breadcrumbs { color: #CA2501; }

body.about, #main-nav li#about { background-color: #794F41; }
#main-nav ul.about, #main-nav li#about, body.about #breadcrumbs, body.about #footer { background-color: #B29B91; }
body.about #page { background: #B29B91; }
body.about .asbg, body.about #footer a, body.about #breadcrumbs { color: #794F41; }