body {
margin: 0;
padding: 0;
color: #AAAAAA;
background: #000000;
font: 10pt arial, sans-serif;
}

h1{
font: 36pt "Firenze SF", "arial narrow", arial, sans-serif;
color: #DDDDDD;
margin: 5px 0;
padding: 5px 0;
display: block;
width: 100%;
border-bottom: #555555 2px solid;
text-align: center;
}

h3{
font: 14pt arial, sans-serif;
color: #DDDDDD;
text-align: center;
margin: 10px 0;
padding: 0;
}
h4{
font: 12pt/18pt arial, sans-serif;
font-weight: bold;
padding: 4px 0 0 0;
margin: 40px 0 10px 0;
border-top: #555555 1px solid;
width: 100%;
clear: both;
color: #DDDDDD;
}
p {
margin: 5px 0 15px 0;
padding: 0;
}

p, td {
font: 10pt/16pt arial, sans-serif;
text-align: left;
}
p.centertext {
text-align: center
}
p a, td a, h4 a {
text-decoration: none;
color: #AAAAAA;
margin: 0;
padding: 0 0 2px 0;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-bottom: #AAAAAA 1px solid;
}
p a:hover, td a:hover, h4 a:hover {
color: #000000;
border: #FFFFFF 1px solid;
background-color: #BBBBBB;
}

p span.highlight, td span.highlight, tr span.highlight td, tr.highlight td, li span.highlight {
color: #BBBBBB;
font: 12pt "Comic Sans MS", arial, sans-serif;
}

/*..............ROUND EVERYTHING.............*/

div#roundeverything {
position: relative;
top: 12px;
margin-left: 10px;
margin-right: auto;
width: 97%;
z-index: 1;
}
/*should have been margin-right: 10px; and no width setting, but when no border set either IE did strange things*/

/*..........UNDER EVERYTHING.........*/


div#leftunder {
position: absolute;
left: -5px;
top: 0;
width: 235px;
height: 7078px;
overflow: hidden;
z-index: 0;
border-right: #555555 1px solid;
border-bottom: #555555 1px solid;
background: url(images/frontpage_stripe_1l.jpg) repeat-y;
}

div#rightunder {
position: absolute;
right: -5px;
top: 0;
width: 235px;
height: 7078px;
overflow: hidden;
z-index: 0;
border-left: #555555 1px solid;
border-bottom: #555555 1px solid;
background: url(images/frontpage_stripe_1r.jpg) repeat-y;
}



/*................LEFT STUFF..............*/

/* navigation bar is absolute positioning because only way I could get ie and moz to display the same - whole load of little differences - mainly this way gets out of defining any widths except the inner one - all the rest of the multiple borders done with padding and margins and with absolute they shrink-wrap around the inner bit.*/

div#left {
position: absolute;
left: 0px;
top: 0px;
text-align: center;
border: #BBBBBB 1px solid;
background: #000000;
}
ul#mainnav {
list-style: none;
margin: 0;
padding: 0;      
}
ul#mainnav li {
display: block;
background-color: transparent;
border: #555555 1px solid;
margin: 2px;
padding: 2px;  
text-align: center;
}
ul#mainnav li#current-next {
background-color: #BBBBBB;
border: #FFFFFF 1px solid;
}
ul#mainnav li a {
text-decoration: none;
display: block;
width: 100px;
padding: 4px 0px;
font: 12pt "arial narrow", arial, sans-serif;
color: #BBBBBB;
border: #999999 1px solid;
text-align: center;
margin: 0;
background-color: #000000;
}
ul#mainnav li#current-top a {
color: #000000;
background-color: #BBBBBB;
}
ul#mainnav li#current-next a {
border: #FFFFFF 1px solid;
color: #FFFFFF;
}
ul#mainnav li a:hover {
color: #000000;
border: #FFFFFF 1px solid;
background-color: #BBBBBB;
}
ul#mainnav li#current-next a:hover {
color: #000000;
}
div#belowleft {
position: absolute;
top: 450px;
left: 0;
width: 55px;
display: block;
background-color: #000000;
border: #555555 1px solid;
margin: 2px;
padding: 2px;  
text-align: center;
color: #AAAAAA;
}
div#belowleft a {
border: none;
background: transparent;
color: #AAAAAA;
}


/*................CENTER STUFF..............*/

div#main {
width: 48%;
margin-left: auto;
margin-right: auto;
}
div#innermain {
width: 75%;
margin-left: auto;
margin-right: auto;
}




/*......for any hyperlinked images in centre strip of index page...*/

div#innermain a.imagelink {
border: #555555 1px solid;
display: block;
height: 88px;
width: 88px;
margin: auto;
overflow: hidden;
float: left;
clear: both;
margin: 5px 5px 0 0;
}
/* hyperlink displaying as a block thing is down to having trouble getting both IE and Moz to display the same way with the same style rules with respect to the border round the image and getting it to change with a:hover*/

div#innermain a.imagelink:hover {
border: #FFFFFF 1px solid;
}
div#innermain a.imagelink img {
border: none;
padding: 0;
margin: 0;
}


div#last {
width: 100%;
border-bottom: #555555 1px solid;
margin-bottom: 30px;
padding-bottom: 30px;
text-align: center;
}
div#last p {
clear: both;
text-align: center;
}
div#last img {
border: #1BD5FF 1px solid;
}

/*..............RIGHT STUFF.............*/

div#right {
position: absolute;
right: 0px;
top: 0px;
text-align: center;
background-color: transparent;
}
ul#rightnav {
list-style: none;
margin: 0;
padding: 0;      
}
ul#rightnav li {
display: block;
background-color: transparent;
margin: 2px -2px 2px 0;
padding: 2px;  
text-align: center;
}
ul#rightnav li a {
text-decoration: none;
display: block;
width: 125px;
padding: 1px 4px 2px 4px;
font: 12pt "arial narrow", arial, sans-serif;
color: #DDDDDD;
border: #999999 1px solid;
text-align: center;
margin: 0;
background-color: #000000;
}
ul#rightnav li.red a {
background-color: #660033;
border: #00FF00 1px solid;
color: #00FF00;
}
ul#rightnav li a span.small_text {
font: 10pt "arial narrow", arial, sans-serif;
color: #777777;
}
ul#rightnav li a:hover {
color: #000000;
border: #FFFFFF 1px solid;
background-color: #BBBBBB;
}