body {
margin: 0;
padding: 0;
color: #F4BEFF;
background: #603B67;
font: 10pt arial, sans-serif;
}

h1{
font: 24pt "Times New Roman", serif;
color: #F4BEFF;
margin: 5px 0;
padding: 5px 0;
display: block;
width: 100%;
border-bottom: #F5287D 2px solid;
text-align: center;
}

h3{
font: 16pt "Times New Roman", serif;
color: #FFFFFF;
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: #BF76CE 1px solid;
width: 100%;
clear: both;
color: #FFFFFF;
}

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, h3 a, li a, td a {
text-decoration: none;
color: #FFFFFF;
margin: 0;
padding-bottom:  2px;
border-top: #603B67 1px solid;
border-left: #603B67 1px solid;
border-right: #603B67 1px solid;
border-bottom: #F5287D 1px solid;
}
p a:hover, h3 a:hover, li a:hover, td a:hover {
border: #F5287D 1px solid;
}
p span.highlight, p.highlight, td span.highlight {
color: #F5287D;
font: 10pt/16pt arial, sans-serif;
font-weight: bold;
}

/*..............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: 3000px;
overflow: hidden;
z-index: 0;
border-right: #BF76CE 1px solid;
border-bottom: #BF76CE 1px solid;
background: url(images/frontpage_stripe_1l.jpg) repeat-y;
}

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



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

div#left {
position: absolute;
left: 0px;
top: 0px;
text-align: center;
}
ul#mainnav {
list-style: none;
margin: 0;
padding: 0;      
}
ul#mainnav li {
display: block;
margin: 0px;
padding: 0px;  
width: 125px;
height: 40px;
text-align: center;
}
ul#mainnav li a {
text-decoration: none;
border: none;
display: block;
width: 125px;
height: 40px;
padding: 7px 0px;
font: 12pt "arial narrow", arial, sans-serif;
color: #BF76CE;
text-align: center;
margin: auto;
background: url(images/background_mainmenu.jpg) no-repeat;
}
ul#mainnav li#current-top a {
text-decoration: none;
border: none;
color: #000000;
background: url(images/background_mainmenu_inv.jpg) no-repeat;
}
ul#mainnav li#current-next a {
text-decoration: none;
border: none;
color: #000000;
background: url(images/background_mainmenu_inv.jpg) no-repeat;
}
ul#mainnav li a:hover {
text-decoration: none;
border: none;
color: #FFFFFF;
background: url(images/background_mainmenu_inv.jpg) no-repeat;
}
ul#mainnav li#current-next a:hover {
text-decoration: none;
border: none;
color: #FFFFFF;
}

/*... set of rules below make the edge of the hyperlinked image light up  on mouseover - and seem over-complex but the only way I've found to make IE and Moz both do the right thing at once - same used for gal images..*/

div#belowleft {
position: absolute;
top: 400px;
left: 0;
width: 100px;
}
div#belowleft a {
border: none;
background: transparent;
}
div#belowleft a img {
border: none;
}


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

div#main {
width: 48%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
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: #BF76CE 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: #F5287D 1px solid;
}
div#innermain a.imagelink img {
border: none;
padding: 0;
margin: 0;
}


div#last {
width: 100%;
border-bottom: #BF76CE 1px solid;
margin-bottom: 30px;
padding-bottom: 30px;
text-align: center;
}
div#last p {
clear: both;
text-align: center;
}
div#last img {
border: #BF76CE 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: #F4BEFF;
border: #2C1730 1px solid;
text-align: center;
margin: 0;
background-color: #603B67;
}
ul#rightnav li a span.small_text {
font: 10pt "arial narrow", arial, sans-serif;
color: #BF76CE;
}
ul#rightnav li a:hover {
border: #F5287D 1px solid;
}

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


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

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