/* CSS Document */

/* Colour scheme from http://www.hypergurl.com/colormatch.php?color=071127 */

body
{
margin: 0;padding: 0;
font:80% Verdana, Helvetica, sans-serif;
line-height:1.6em;
color:#333;
}


#threeColLayout {
background: url("/images/background_dark.jpg");
}

#twoColLayout {
background: url("/images/background_dark.jpg");
}

#oneColLayout {
background: url("/images/background_dark.jpg");
}

/* default links */



#primaryContent a, a:visited {

text-decoration: none;
border-bottom: 1px dotted #0D234C;
color: #0D234C;
}
#primaryContent a:hover {
text-decoration: none;
border-bottom: 1px solid #0D234C;
color: #0D234C;
}
/* headers here */

h1 {
margin: 0;
padding: 30px;
font-size: 150%;
color: #FF0000;
text-indent: -9000px;
}

h2 {
margin: 0 10px 0 10px;
padding: 0;
font: 190% Georgia, Serif;
color: #144566;
}


h3 {
margin: 32px 10px 0 10px;
padding: 0;
font: 170% Georgia, Serif;
color: #144567;
}

h4 {
margin: 16px 10px 0 10px;
padding: 0;
font: 140% Georgia, Serif;
color: #4C5D67;
}
h5 {
margin: 8px 10px 0 10px;
padding: 0;
font: 100% Georgia, Serif;
color: #4C5D67;
}

p {
margin: 0px 10px 12px 10px;

}

ul {
margin: 5px 10px 10px 30px;
}
li {

list-style: square;
}

acronym {
font-weight: bold;
border-bottom: 1px dotted #0D234C;
cursor: help;
}
/* main wrapper to coontain everything in the centre*/

#secondaryContent h2 {
margin: 30px 10px 0px -5px;
padding: 0;
font: 150% Georgia, Serif;
color: #144566;
}

#secondaryContent h5 {
margin: 8px 10px 0px 0px;
padding: 0 0 10px 0;

color: #4C5D67;
border-bottom: 1px dotted #0D234C;
}

#secondaryContent a, a:visited {
text-decoration: none;
border-bottom: none;
color: #0D234C;
}
#secondaryContent a:hover {
text-decoration: none;
border-bottom: none;
background-color: #CCCCCC;
color: #0D234C;
}

#wrapper {
width:780px;
margin:0 auto;
background:  url("/images/two_col_back.gif") repeat-y left top;
border-right: solid #071127 0px;
border-bottom: solid #071127 0px;
border-left: solid #071127 0px;
padding: 0;
}

#mainNavBar {
width:780px;
margin:0;

padding: 0;
float: left;
border-top: solid 1px #071127;
border-bottom: solid 1px #071127;
background: url(images/main_nav_back.jpg) 65%;
}

 #mainNav
{

margin: 0 0px;
padding: 0;
font-weight: bold;
font-size: 100%;

}

#mainNav ul
{
margin:0;
padding:0;
list-style: none;

}

#mainNav li
{float: left;
background: url(images/main_nav_back.jpg) 65%;
margin: 0 0px;
border-right: solid 1px #071127;
list-style: none;
}

#mainNav a
{
display: block;
padding: 0 1.3em;
line-height:2.5em;
text-decoration: none;
color: #fff;
float: left;
}

#mainNav a:hover
{
color: #ccc;
background: url(images/main_nav_back_over.jpg);
}

/* default masthead holding the banner and mainNav */

#header {
width: 780px;
height: 173px;
background:  url("/images/banner4.jpg");

}


/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:780px;
display:inline;
margin: 0 0 20px 0;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
float:left;
width:390px;
margin: 0 0 20px 195px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
width:585px;
float:left;
margin: 0 0 20px 0px;

padding: 15px 0 0 0;
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent {


}

#twoColLayout #sideContent {
display: none;

}

#secondaryContent{
float:left;
width:180px;
margin: 0 0 20px 0px;
padding: 20px 0 0 15px;

}

#sideContent{
float:left;
width:180px;
margin: 0 0 20px -780px;


}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent{
width:585px;
float:left;
margin: 0 0 20px 195px;
}

/* Footer */

#footer{
	clear:both;
width: 780px;
height: 40px;
background: url("/images/footer_back.jpg");
padding: 15px 0 0 0;
}
#footer p {

font-weight: bold;
}



#separator {
margin: 0 10px 28px 10px;
border-top: dotted 1px #4C5D67;

}

/* Highlighting external links */
/* NOTE - FOR SOME REASON THIS DOESN'T WORK PROPERLY:
a[href^="http:"] { 
  background: url("/images/external.gif") no-repeat right top;
  padding-right: 10px; 
} 
*/

.webthumb {
padding: 5px;
}

.webthumb_services {
padding: 5px;
float: right;
border: 0;
}

form {
margin: 0 0 0 15px;
}

/*FORM*/
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
} 
input
{
color: #333; 
background: #F5F4FD;
border: 1px solid #0D234C;
}

.submit input
{
color: #fff;
background:  #4C5D67;
border: 2px outset #d7b9c9;
} 
fieldset
{
border: 1px solid #0D234C;
width: 30em
}

legend
{
color: #fff;
background-color: #144566;
border: 1px solid #0D234C;
padding: 2px 6px
} 

textarea {
color: #333; 
background: #F5F4FD;
border: 1px solid #0D234C;
}

.alert {
color: #FF0000;
}

div.jd_image {
  float: right;
  
  border: dotted 1px  #4C5D67;
  margin: 0.5em;
  padding: 0.5em;
}
div.jd_image p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  margin: 5px;
}

#validation {
text-align: center;
}

#skype img{
float: left;
margin:0 5px 0 0;
}

img.alignright {
float: right;
border: 0;
}

#meebome {
float: right;	
margin: 0 10px;
}