body {
background-color: #FFFFFF; 
color: #666699; 
font-family: sans-serif;
padding: 0;
margin: 0;
}

/*
<<<<<<<<<<<<HEADER>>>>>>>>>>>>>>>
*/

/* header container*/
#header {
width: 100%;
height: 100px;
background: #333399;
padding: 0;
margin: 0;
position: absolute;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
}


#menuHeader {
margin-top: 76px;
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

*html #menuHeader {
margin-top: 78px;
mar\gin-top: 78px;
}

#menuHeader li {
display: inline;
list-style-type: none;
}

#menuHeader a { 
padding: 3px 10px; 
width: 10%;
font-size: 75%;
text-align: center;
height: 17px;
text-decoration: none;
float: right;
color: #FFFFFF;
border: 1px solid #FFFFFF;
}

*html #menuHeader a {
border-bottom: none;
}

#menuHeader a:hover {
background-color: #6666CC;
color: #FFFFFF;
}
/*
<<<<<<<<<<<<MENU - LEFT HAND COLUMN>>>>>>>>>>>>>>>
*/

/* container  */
#menu_left {
position: absolute;
width: 200px;
font-size: 70%;
top: 102px;
left: 2px;
border: 1px solid #CCCCFF;
background-color: #FFFFFF;
padding: 2px;
z-index: 2;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
width: 177px;
}

/* ID for UL holding major menu */
#navList {
padding-left: 0;
margin: 0 1px 1px 0;
width: 97.5%;
}

*html #navList {
width: 100%;
wi\dth: 100%;
}

#navList li {
list-style: none;
margin: 0;
}

#navList a { 
display: block;
padding: 2px 2px 2px 3px;
width: 100%;
text-decoration: none;
background-color: #9999FF;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

#navList a:hover {
background-color: #6666CC;
}

/* ID for UL holding named anchors */
#subNavList {
padding-left: 0;
margin: 0 1px 1px 0;
width: 99%;
font-size: 85%;
}

*html #subNavList {
width: 100%;
}

#subNavList li {
list-style: none;
margin: 0;
}

#subNavList a { 
display: block;
padding: 1px;
width: 100%;
text-decoration: none;
background: #CCCCFF;
color: #333399;
text-align: right;
border-bottom: 1px solid #FFFFFF;
}

#subNavList a:hover {
background-color: #9999FF;
color: #333399;
}

/*
<<<<<<<<<<<<CONTENT - CENTRE COLUMN>>>>>>>>>>>>>>>
*/


/* content - centre column  */
#content {
position: absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
width: auto;
min-width: 120px;
right: 216px;
margin: 102px 0 20px 187px;
border: 1px solid #CCCCFF;
background-color: #FFFFFF;
padding:10px;
font-size: 80%;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

*html #content {
left: 181px;
le\ft: 181px;
margin: 102px 0 20px 0;
mar\gin: 102px 0 20px 0;
}
/*
<<<<<<<<<<<<PHOTOGRAPHS - Right Hand Column>>>>>>>>>>>>>>>
*/

/*photographs - right hand column  */
#photos {
position:absolute;
width: 210px;
top: 102px;
right: 2px;
border: 1px solid #CCCCFF;
background-color: #FFFFFF;
font-size: 75%;
padding: 0 0 2px 0;
z-index: 1;
text-align: center;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
width: 210px;
}

#photos p {
font-size: 80%;
}

#photos h2 {
background-color: #666699;
color: #FFFFFF;
border: none;
margin: 2px;
font-variant: small-caps;
}

#photos h3 {
border: 0.1pt solid #CCCCCC;
margin: 4 2 2 2px;
}

#photos h4 {
margin: 2px;
}

#photos img {
margin: 0;
border: none;
}

#photos a img {
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}

#photos a:hover img {
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

/*
<<<<<<<<<<<<FOOTER>>>>>>>>>>>>>>>
*/

/*Footer container - bottom row - holds info and disclaimer*/
#footer {
margin: 0;
padding: 0;
clear: both;
width: 100%;
color: #999999;
font-size: 70%;
margin-top: 20px;
border-top: 1px solid #CCCCFF;
}

#footer div.insidefooter {
width: 35%;
float: left;
margin-left: 10%;
}

*html #footer div.insidefooter {
margin-left: 10%;
ma\rgin-left: 10%;
}

#footer a { 
text-decoration: none;
color: #FFDDAA;
border-bottom-style: dotted;
border-width: 1pt;
}

#footer a:hover {
color: #FF9933;
}

/*
<<<<<<<<<<<<SITEWIDE>>>>>>>>>>>>>>>
*/

#content a { 
text-decoration: none;
color: #6633CC;
border-bottom-style: dotted;
border-width: 1pt;
}

#content a:hover{
color: #FF9933;
border-bottom-style: dotted;
border-width: 1pt;
}

h1 {
font-variant: small-caps;
font-size: 100%;
border-bottom: solid;
border-width: 0.1pt;
border-color: #9999FF;
margin-top: 0.25em;
}

h2 { 
font-size: 90%;
margin-bottom: 0.25em;
border-bottom: solid;
border-top: solid;
border-right: solid;
border-width: 0.1pt;
border-color: #CCCCFF;
clear: both;
}

h3 {
font-variant: small-caps;
font-size: 100%;
}

h4 {
font-size: 90%;
margin-bottom: 0.25em;
}

p {
margin-top: 0.25em;
margin-bottom: 0.5em;
}

ul, ol, li {
margin-top: 0.25em;
}

/* styles the rollover for image links in the photograph containe r(right hand side column */
img.rollover {
filter: alpha (opacity=100);
-moz-opacity: 1;
cursor: hand;
}

/* for the current class for highlight.js */
#navList li a.current {
background-color: #9999CC;
}

#navList li a.current:hover {
cursor: default;
}

#menuHeader li a.current {
background-color: #6666CC;
}

#menuHeader li a.current:hover {
cursor: default;
}

p.anchor {
float: right;
font-size: 70%;
}