/* Reset styles */

* {margin:0; padding:0; text-decoration:none; border:none; font-weight:normal; font-style:normal;}

/* Page setup */

body {background-color:#3B3B3B; color:white; font-size:12pt; padding:10px 0 0 30px; font-family:Arial, Helvetica, Verdana, sans-serif;}
#wrapper {width:700px; text-align:left; color:white; position:relative; top:0; left:0;}

/* Header */

h1 {font-size:1.75em; font-family:broadway,broadway BT,sans-serif; color:#909898; width:5em; line-height:0.8em;}
h1 span {position:absolute; right:0; top:0; display:block; width:8.5em; font-size:0.3em; text-align:right; color:#D5D5D0; line-height:1.8em; font-weight:bold; font-family:Arial, Helvetica, Verdana, sans-serif;}

/*~~~~~Pages with main header hidden */
body.nomain #maincontent {margin-top:7.2em;}
body.nomain h2 {position:absolute; left:-10000px;} /* As .offscreen */

/* Skip Links */

#skiplinks {position:absolute; left:-10000px;}
#skiplinks a:active, #skiplinks a:focus, #skiplinks a:active, #skiplinks a:hover {margin-left:10000px; margin-top:10px; font-size:0.8em; background-color:#097765; color:white; display:block; text-decoration:none; border:none;}

/* Navigation */

ul.navigation {list-style:none; font-family:Arial Narrow, Arial, Hevetica, Verdana, sans-serif; font-size:0.8em; margin-top:3em; margin-left:0;}
ul.navigation li {display:block; width:138px; float:left; text-align:center; border-right:1px solid #3B3B3B; border-left:1px solid #3B3B3B; padding:0;}
ul.navigation a {display:block; color:white; background-color:#669999;  padding:0 0 2px 0; width:100%}
ul.navigation a:hover, ul.navigation a:active, ul.navigation a:focus {background-color:#097765; text-decoration:none;}
/*~~~~~Current page indication */
body.home .navhome a {color:#FFCC26;}
body.who .navwho a {color:#FFCC26;}
body.sust .navsust a {color:#FFCC26;}
body.proj .navproj a {color:#FFCC26;}
body.links .navlinks a {color:#FFCC26;}

/* Page Content */

#maincontent {font-size:0.8em; line-height:1.5em; position:relative;}

/*~~~~~Headings */

h2 {margin:3.33em 0 1.66em 0; font-size:1.8em; color:#FFCC26; font-family:Arial Narrow, Hevetica, Arial, Verdana, sans-serif; text-align:center;}
h3 {font-size:1.25em; margin-bottom:1.2em; color:#FFCC26;}
h3.alt {color:red;}

/*~~~~~Split Page */
.split1 {width:250px; float:left;}
.split2 {margin-left:270px; padding-left:2.5em;}
.split1, .split2 {text-align:justify; font-size:1em;}

/*~~~~General Content */
p {margin-bottom:1.5em;}

/*~~~~Page Bottom */
#pageend {clear:both; border-bottom:1px solid white; padding-bottom:1em; text-align:right; font-size:1em;}

/*~~~~Photograph etc */
.picture {text-align:center; height:24em;}
.picture p {font-size:0.9em; text-align:center; width:250px; margin-left:auto; margin-right:auto; line-height:1.11em;}
.picture img {margin-left:auto; margin-right:auto;}

/* Company Info */

#companyinfo {margin-top:6em; text-align:center; font-size:0.7em; clear:both;}
#companyinfo a {color:white;}

/* Address listing */

dl.address {position:relative;}
dl.address dt {font-weight:bold; color:#DD3300;}
dl.address dd {margin-bottom:0.5em;}
dl.address a {color:white;}
dl.address iframe {position:absolute; top:3px; right:0;}

/* General */

a {color:#DD3300;}
a:hover, a:active, a:focus {color:#FFCC26;}
.hide {display:none !important;}
.offscreen  {position:absolute; left:-10000px;}
ul, ol {margin-bottom:1.5em; margin-left:1.25em;}
li {padding-left:1em;}
em {font-style:italic;}
strong {font-weight:bold;}
i {font-style:italic;}
b {font-weight:bold;}
blockquote {margin:0 auto 3em auto; background-color:#097765; padding:1.5em 10px; width:75%;}
blockquote p {margin-bottom:1.5em;}
q {font-style:italic;}
cite {font-style:italic;}
dfn {font-style:italic;}
h4 {font-size:1em; color:#669999; font-style:italic;}
del {text-decoration:line-through;}

/* Print rules 
============ */

@media print { 
/* A4 is 210mm wide. We allow 33mm margin each side to be safe, and center horizontally
This whole thing would be simpler if we could just do #wrapper {width:100%}
and then use 50% on split1 and split2 but that seems to totally confuse IE's
print layout :-( */
body {padding:0; background-color:white; color:black;}
/* Also drop the wrapper to give a slightly larger space at the top of the page */
#wrapper {width:164mm; color:black; background-color:white; margin:0; margin-top:1.5em; margin-left:3em;}
#maincontent {margin-top:3em;}
body.nomain #maincontent {margin-top:0;}
body.nomain h2 {position:static; display:block; margin-bottom:0.83em; margin-top:0.83em;}
/*.split1 {width:66mm;} */
.split2 {margin-left:261px;}
/* Change the main logo to look better when printed */
h1, h1 span {color:#669999;}
/* Anchors don't make sense, so change them back to black */
a {color:black;}
#companyinfo a {color:black;}
/* Hide page elements which don't make sense when printed */
.navigation {display:none;}
#pageend  {display:none;}
/*~~~~~And adjust a few positions to take account of above */
#pageend {border:none; padding-bottom:0;}
/*Stick the company info to the page bottom. NB If things are >1 A4 sheet long this is going to go horribly wrong!! */
#companyinfo {position:fixed; bottom:0; left:0; border-top:1px solid black; margin-top:1em; width:100%;}
/* General changes */
.printhide {display:none !important;}
}