/* CSS Document */

/*applies to all text unless specified otherwise*/
#banner {
margin-bottom: 0px;
margin-top: 5px;
color: #31afaf;
/*color: #fa774e;*/
}

body {
background: #000000;
color: #FFFFFF;
font: medium verdana, helvetica, sans-serif;
}

/*Email */
p span.displaynone { display:none; }


/* right VERTICAL SUB MENU BORDER */
#border {
border-right: 2px dotted #666;
}

/* to override IE7? */
/* Below is the link colour used after 12 Dec 09. */
a:link {color: #fc7c7c; }
a:visited {color: #fc7c7c; } 
a:hover {color: #fc7c7c; }
a:active {color: #fc7c7c; }

/* Below is the link colour used until 12 Dec 09 */
/* a:link {color: #fc6c6c; }
a:visited {color: #ece7e7; } 
a:hover{color: #fc6c6c;}
a:active {color: #fc6c6c;} */


h1 {
font-size: large;
}

h2 {
font-size: medium;
}

/*MAIN MENU
<style type="text/css">

/*Credits: Dynamic Drive CSS Library 
URL: http://www.dynamicdrive.com/style/ 
Menu modified to suit web interface by M.Holland*/

#modernbricksmenu{
font-size: medium;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: normal medium verdana, helvetica, sans-serif;
margin:0;
margin-left: 0px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
/*text-transform:uppercase;*/
}

#modernbricksmenu a{
float: left;
display: block;
color: #cfd9dc;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding-top: 0px;
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #454545; /*Default menu color*/
border: 1px solid #454545;
/*border-bottom: 1px solid #454545; */
}

/*Hover addition from MH */
#modernbricksmenu a:visited{
text-decoration: none;
background-color: #454545; /*Menu visited bgcolor */
color: #cfd9dc;
/*color: white; */
border: 1px solid #000;

/*background-color: #938598; /*Menu hover bgcolor 
color: white;
border: 2px dotted #999; */

}

#modernbricksmenu a:hover{
background-color: #FFF; /*Menu hover bgcolor*/
color: black;
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #FFF; /*Brown color theme*/ 
border-color: #000; /*Brown color theme*/
color: black;
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 2px;
line-height: 2px;
background: #fff; /*Brown color theme for the bold line*/ 
}
</style>


/*VERTICAL SUB MENU
<style type="text/css">

Credits: Dynamic Drive CSS Library 
URL: http://www.dynamicdrive.com/style/ 
Menu modified to suit web interface by M.Holland*/

.wireframemenu{
/* border: 1px solid #C0C0C0; */
background-color: #454545;
/* border-bottom-width: 0; */
width: 90px;
padding: 0px;
display: block;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 90px;
}

.wireframemenu ul{
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: normal 12px verdana, helvetica, sans-serif;
text-align: center;
padding: 6px 5px 8px 5px;
margin-bottom: 2px;
display: block;
width: 90px; /*Define width for IE6's sake*/
color: #FFF;
text-decoration: none;
background-color: #454545;
border: 2px solid #454545;
/*  border-bottom: 1px solid #FFF;
 
 */
}

.wireframemenu a:visited{
color: #CCC;
border: 2px solid #333;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: 90px;
}

.wireframemenu a:hover{
background-color: #FFF;
color: black;
text-decoration: none;
}

.wireframemenu #current a{ /*currently selected tab*/
background-color: #FFF; /*Brown color theme*/ 
border-color: #000; /*Brown color theme*/
color: black; 
}

/*IMAGE BUTTONS SUB NAV */
#textbox {
font-size: small;
margin-left: 100px;
color: #FFF;
background-color: #000;
}

#textboxtitle {
font-size: small;
font-weight: bold;
color: #e8daea;
margin-left: 100px;
}

/*Old 
#textbox {
color: #000;
background-color: #FFF;
margin-left: 100px;
margin-left: 0px;
height: auto;
display: block;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
} */

#textboxweb {
color: #FFF;
background-color: #333;
margin-bottom: 20px;
margin-left: 78px;
height: auto;
display: block;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
}

/* IE6 rule 
/* html #navbar{ /*IE only rule. Original menu width minus all left/right paddings */
/* width: 110px;
} */

/* use this css code when you also use the alphabet block images + text for the index(es) sub menu. A modified version (see below created in 12 Dec 09 to deal with usability issues i.e. its been simplified) */

/*#navbar {
text-align: center;
color: #FFF;
background-color: #000;
height: auto;
width: 86px;
padding-left: 50px;
}

#navbar a:link
{
font-size: 12px;
text-decoration: underline;
text-decoration: none;
color: #FFF;
background-color: #000;
height: auto;
width: 86px;
padding-bottom: 3px; 
}


#navbar a:visited
{
font-size: 12px;
text-decoration: none; 
color: #FFF;
background-color: #000;
height: auto;
width: 86px;
background-color: #000;
padding-bottom: 3px;
}

#navbar a:hover, #navbar a:active
{
font-size: 12px;
text-decoration: none;
color: #454545;
height: auto;
width: 86px;
background-color: #FFF;
padding-bottom: 3px; 
} */

/* Replaces css code for home page sub menus that was used until 12 Dec 09 (and which included images with letters of the alphabet in them). This code deals with usability issues i.e. its been simplified */

#navbar {
font-size: 12px;
text-align: center;
text-decoration: none;
color: #cfd9dc;
background-color: #000;
height: auto;
width: 86px;
padding-left: 50px;
}

#navbar a:link
{
font-size: 12px;
color: #cfd9dc;
border:2px solid #333333;
background-color: #454545;
height: auto;
width: 86px;
padding-left: 2px; 
padding-right: 2px;
padding-top: 4px;
padding-bottom: 4px;
}


#navbar a:visited
{
font-size: 12px;
text-decoration: none;
color: #cfd9dc;
border:2px solid #333333;
background-color: #454545;
height: auto;
width: 86px;
padding-left: 2px; 
padding-right: 2px;
padding-top: 4px;
padding-bottom: 4px;
}

#navbar a:hover, #navbar a:active
{
font-size: 12px;
text-decoration: none;
color: #454545;
height: auto;
width: 86px;
background-color: #FFF;
padding-left: 2px; 
padding-right: 2px;
padding-top: 4px;
padding-bottom: 4px;
}



/* popup */

#popup {
text-align: center;
color: #FFF;
height: 115px;
width: 164px;
}

#popup a:link
{
font-size: 10px;
text-decoration: none;
height: 115px;
width: 159px;
padding-bottom: 3px;
display: block;
}


#popup a:visited
{
font-size: 10px;
text-decoration: none;
color: #9C979D;
background-color: #000;
padding-bottom: 3px;
height: 115px;
width: 159px;
display: block;
}

#popup a:hover, #popup a:active
{
font-size: 10px;
text-decoration: none;
color: #454545;
background-color: #FFF;
padding-bottom: 3px;
height: 115px;
width: 159px;
display: block;
}


h3 {
font-weight: normal;
font-size: small;
margin: 0px;
margin-left: 100px;
} 

h4 {
font-weight: normal;
font-size: 0.65em;
margin-left: 100px;
margin-top: 5px;
margin-bottom: 0px;
}

h5 {
font-weight: normal;
font-size:  10px;
margin-top: 35px;
color: #999;
}

h6 {
font-weight: normal;
font-size: 0.65em;
margin-left: 100px;
margin-top: 5px;
margin-bottom: 0px;
}

p {
font-size: small;
}

#footer {
font-size: xx-small;
}

#comps {
font-weight: bold;
}

/* Image border properties for all images in the paragraph area i.e. in the main text, where you want the image on the LEFT, and text to wrap around the image on the RIGHT. In the html image tag add the text - class="picleft" */
.picleft {
border: 2px solid #454545;
margin-bottom: 20px;
margin-left: 100px;
}

.picvertical {
border: 2px solid #454545;
margin-bottom: 20px;
margin-left: 100px;
margin-right: 0px;
}

.picsmall {
border: 2px solid #454545;
margin-top: 0px;
}

/* Image border properties for all images in the paragraph area i.e. in the main text, where you want the image on the RIGHT, and text to wrap around the image on the LEFT. In the html image tag add the text - class="picright" */
.picright {
border: 2px solid #454545;
margin-left: 558px;
}

/* Image border properties for all images in the paragraph area i.e. in the main text, where you want the image in the CENTRE, and text to shift BELOW the image. In the html image tag add the text - class="piccentre" */
.piccentre {
border: 3px solid #CCCCCC;
margin: 5 px;
margin: 10px 10px 10px 0px;
}

/* All below - didn't work in IE6! :-P */

/*#navbar {
text-align: center;
color: #FFF;
height: 100%;
width: 86px;
padding-left: 50px;
}

#navbarindex {
text-align: left;
color: #FFF;
height: 100%;
width: 86px;
padding-left: 50px;
}

#navbar a:link
{
font-size: 12px;
text-decoration: none;
color: #FFF;
height: 100%;
width: 86px;
padding-bottom: 3px;

}


#navbar a:visited
{
font-size: 12px;
text-decoration: none;
color: #cfd9dc;
background-color: #000;
padding-bottom: 3px;
}

#navbar a:hover, #navbar a:active
{
font-size: 12px;
text-decoration: none;
color: #454545;
background-color: #FFF;
padding-bottom: 3px;
height: 100%;
width: 86px;
} */