body {
color: black;
background: white;
font-family: Verdana;
font-size: 62.5%;
margin: 0;
}
h1 {
font-size: 1.5em;
margin: 0;
padding: 0.1em 0.6em 0em 0em;
}
h2 {
font-size: 1.3em;
margin: 0;
padding: 0.8em 0.8em 0em 0.8em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}

#container {
color: black;
width: 78em; /* Equivalent of 780px when on medium (16px) text. */
margin: 1em auto;
text-align: justify;
}

#header {
font-size: 1.4em;
border-bottom: 1px solid black;
}
#header h1 {
float: right;
}
#menu {
margin: auto;
padding: 0;
background-color: white;
border-left: 1px solid black;
height: 2.58em; /* This needs to be 0.08em higher so that the menu items align properly with the page top border, across all browsers. */
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
padding: 0;
height: 2.5em;
line-height: 2.5em; /* Necessary to make the list height the same as the item anchor height. */
list-style: none;
position: absolute; /* We give the list an absolute position and set the menu height in order to allow the active items to extend over the bottom of the menu. This is necessary to give the proper appearance of active tabs in IE, because otherwise the active item border will be inside the menu. */
border-top: 1px solid black;
}
#menu li {
display: inline;
}
#menu li a {
float: left; /* Necessary to prevent gaps in between the items. */
padding: 0em 0.7em 0em 0.7em;
text-decoration: none;
white-space: nowrap;
color: #333333;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: white url('tab.gif') bottom repeat-x;
}
#menu li.active a {
background: white;
color: black;
border-bottom: 1px solid white;
}
#menu li a:hover {
background: white url('tab2.gif') top repeat-x;
}

body#page-2 div#content p {
  width: 21.9em; /* Width for IE6 */
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}
body#page-2 div#content > p {
  width: 22em; /* Width for browsers other than IE6 */
}
body#page-2 p.sitedetails {
  float: none;
  width: 100%;
}

#page {
font-size: 1.4em;
margin: 0;
padding: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
background: white;
}
#content {
padding: 0em 1em 0em 1em;
text-align: justify;
border: 1px solid white; /* White border necessary to prevent h2 disappearing in IE. */
}
#content p {
margin-top: 1em; /* IE and Firefox etc set different defautl p margin. */
}
#content a {
color: black;
}
#content a:hover {
}
#content div.childscontainer, #content div.thumbscontainer {
margin-top: 1em;
}
#content div.childscontainer li a img {
height: 8em;
}
#content div.childscontainer li p {
margin: 0;
padding-left: 0.5em;
}
ul.thumbs li { /* Override maxigallery default styling so can get 6 images in a row */
margin:	4px 4px 0 4px !important;
}
#content div.thumbscontainer {
width: 100%; /* Prevent text squeezing in next to thumbs */
margin-bottom: 1em;
}
/*
#content.left p {
width: 21.5em;
float: left;
margin-bottom: 1em;
}
#content.left img {
float: right;
margin-bottom: 1em;
border: 1px solid black;
}
#content.right div.thumbscontainer {
margin-right: 0.5em;
}
*/
#footer {
font-size: 0.9em;
color: #999999;
padding-left: 0.5em;
}
#footer p {
margin-top: 0.8em; /* IE and Firefox etc set different defautl p margin. */
}
#footer a {
color: #999999;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}

.skip {
display: none;
}
.seperator {
height: 1px;
clear: both;
margin: 0;
padding: 0;
}