body { color: #5f6062; background: #bfbfc0; font-family: Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1;}

#wrapper, #header, #content, #project-nav { position: absolute;} 
#wrapper { top: 40px; left: 0; text-align: center;}
#wrapper { /* hide ie5mac \*/ width: 100%; top: 50%; margin-top: -300px; /* end hide */ }
#page { background: #fff; width: 800px; height: 600px; margin: 0 auto; position: relative; text-align: left;}

#header { width: 772px; top: 14px; left: 14px; padding-top: 6px; border-top: 1px solid #ddd;}
#content { top: 104px; left: 14px;}
.text { float: left; width: 280px; margin-right: 0.75em;}
img { display: block;}

li { color: #bfbfc0; display: inline; font-family: "Times New Roman", serif; line-height: 1.333em;}
li ul { position: absolute; width: 34.5em; line-height: 1.333em; left: 0;}
.workshop li ul { width: 20em;}
.projects li#projects li a, .workshop li#workshop li a { color: #bfbfc0;}
li a, li span { color: #bfbfc0; font-family: Helvetica, Arial, sans-serif;}
li a:hover, .projects li#projects li a:hover, .workshop li#workshop li a:hover { color: #5f6062;}

.shoreham { margin-right: 4em;}

#project-nav { width: 15em; top: 6px; right: 0;}
#images span { margin-right: 0.6em;}

#header, p, h2, h3 { font-size: 0.75em; line-height: 1.333em; font-weight: bold;}
a { color: #bfbfc0; text-decoration: none;}
p, h2 { margin-bottom: 0.67em;}

/* about & contact colour schemes */
.about #page, .contact #page { background-color: #d2232a;}
.about, .about li, .about li a, .contact, .contact li, .contact li a, .contact a { color: #fff;}
.about #header, .contact #header { border-color: #fff;}

/* active link styles */
.projects li#projects a, .workshop li#workshop a, 
.description li#description a, .image li#images span, .image li#images a,
.projects li#projects li.active a, .workshop li#workshop li.active a { color: #5f6062;}

.about a:hover, .contact a:hover, .about li#about a, .contact li#contact a { color: #fff; text-decoration: underline;}