/*** TEXT CLASSES ***/
BODY
{
  background-color: #0097DC;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 90%;
  margin: 0 8px 8px;
}
DIV {
  margin: 0;
  padding: 0;
}
/* Headings */
H1, H2, H3, H4, H5, H6 {
  color: #114A9F;
}
H1 {
 font-size: 130%;
}
H2 {
  font-size: 120%;
}
H3 {
  font-size: 110%;
}
#dialog {
  font-size: 90%;
}
/* Text overrides */
STRONG {
  font-weight: bold;
}
EM {
  font-style: italic;
}
/* Default Horizontal Rule */
HR {
  color: #FFF;
  border: 0px;
  border-top: 1px solid black;
}
DIV.box {
  margin-bottom: 1em;
  padding: 5px 10px;
}
DIV.bodycontent {
  margin-bottom: 1em;
}
DIV.leftcol {
  float:left;
  width: 350px;
  clear: both;
}
.cleared {
  clear: both;
}
/* Black */
LI.black,
HR.black {
  color:#000;
}
DIV.black {
  background-color: black;
  color: #FFF:
}
/* Pink */
LI.pink {
  color: #EC008C;
}
DIV.pink {
  background-color: #EC008C;
  color: #FFF;
}
HR.pink {
  border-top: 1px solid #EC008C;
}
DIV.pink H1,
DIV.pink H2 {
  color: #FFF;
}
DIV.pink A:link, DIV.pink A:active, DIV.pink A:visited, DIV.pink A:hover {
  color: #FFF;
} 
/* Purple */
LI.purple {
  color: #862990;
}
DIV.purple {
  background-color: #862990;
  color: #FFF;
}
HR.purple {
  border-top: 1px solid #862990;
}
/* Dark Blue */
LI.darkblue {
  color: #114A9F;
}
DIV.darkblue {
  background-color: #114A9F;
  color: #FFF;
}
HR.darkblue {
  border-top: 1px solid #114A9F;
}
/* Light Blue */
LI.lightblue {
  color: #0097DC;
}
DIV.lightblue {
  background-color: #0097DC;
  color: #FFF;
}
HR.lightblue {
  border-top: 1px solid #0097DC;
}
DIV.lightblue H1, 
DIV.lightblue H2 {
  color: #FFF;
}
/* Turquoise */
LI.turquoise {
  color: #00A99A;
}
DIV.turquoise {
  background-color: color: #00A99A;
  color: #000;
}
HR.turquoise {
  border-top: 1px solid #00A99A;
}
/* Green */
LI.green {
  color: #48B749;
}
DIV.green {
  background-color: #48B749;
  color: #000;
}
HR.green {
  border-top: 1px solid #48B749;
}
DIV.green H1,
DIV.green H2 {
  color: #000;
}
/* Yellow */
LI.yellow {
  color: #FFDD00;
}
DIV.yellow {
  background-color: #FFDD00;
  color: #000;
}
HR.yellow {
  border-top: 1px solid #FFDD00;
}
/* Red */
LI.red {
  color: #ED1C24;
}
DIV.red {
  background-color: #ED1C24;
  color: #FFF;
}
HR.red {
  border-top: 1px solid #ED1C24;
}
/* Anchors */
A IMG {
  border: 0;
}
A:link, A:active, A:visited, A:hover {
  text-decoration: none;
  color: #114A9F;
}
A:hover {
  text-decoration: underline;
}
A.black:link, A.black:active, A.black:visited, A.black:hover {
  color: #000;
} 

/* Right Boxes */
DIV.rightbox {
  padding: 5px 10px;
  margin-bottom: 1em;
}




/* Container / positional elements */
DIV#container {
  background-color: #FFF;
  width: 750px;
  padding: 25px;
  margin: auto;
  margin-top: 1em;
  border: 1px solid #114A9F;
}
DIV.logo {
  width: 250px;
  margin: auto;
}
DIV.loading {
  margin: auto;
  margin-top: 50px;
  text-align: center;
}
DIV#interactivemap {
  width: 750px;
  height: 625px;
  position: relative;
  margin: auto;
}
/* Colour list */
UL {
  margin: 1em;
  padding: 0;
}
LI {
  margin-top: 0.2em;
}

UL.colourlist {
  text-align: left;
}
UL.colourlist LI {
  padding: 0.25em;
}
UL.landinglist {
  text-align: justify;
  margin: 0;
  list-style-type: none;
}
UL.landinglist LI {
  display: inline;
  font-weight: bold;
  font-size: 150%;
  padding: 0;
  margin: 0;
}
UL.landingbox LI{
  margin: 1em;
}


/* Landing page colour list positions */

UL.colourlist .level0 {
  font-size: 180%;
}
UL.colourlist .level1 {
  font-size: 170%;
}
UL.colourlist .level2 {
  font-size: 180%;
}
UL.colourlist .level3 {
  font-size: 220%;
}
UL.colourlist .level4 {
  font-size: 190%;
}
UL.colourlist .level5 {
  font-size: 210%;
}
/* Interactive Map */
A.pin {
  height: 20px;
  width: 20px;
  position: absolute; 
}
A.redpoint:link, A.redpoint:visited, A.redpoint:active, A.redpoint:hover {
  background-image:url('../images/pin-red.gif');
}
A.redpoint:hover {
  background-image:url('../images/pin-red-hover.gif');
}
A.yellowpoint:link, A.yellowpoint:visited, A.yellowpoint:active, A.yellowpoint:hover {
  background-image:url('../images/pin-yellow.gif');
}
A.yellowpoint:hover {
  background-image:url('../images/pin-yellow-hover.gif');
}
A.greenpoint:link, A.greenpoint:visited, A.greenpoint:active, A.greenpoint:hover {
  background-image:url('../images/pin-green.gif');
}
A.greenpoint:hover {
  background-image:url('../images/pin-green-hover.gif');
}
/* Form */
.forminput {
  width: 600px;
}