body {

margin: 0;

padding: 0;

font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif;

}

p {
line-height: 200%;
}

h1 {

margin: 0;

padding: 30px;

font-size: 150%;

color: #FF0000;

text-indent: -9000px;

}
h2 {

margin: 10px 0 10px 0;

padding: 2px;

font-size: 230%;

color: #909090;

background: none;

}

h3 {

text-transform: uppercase;

display: inline;

font-size: 90%;

margin: 10px 5px 0 5px;

padding: 2px;

}

/* main wrapper that holds it all centrally */

#wrapper {

width:800px;

margin:0 auto;

background-color: #fff;

padding: 0 10px 10px 10px;

}

/* default masthead holding the banner and mainNav */

#header {

width: 800px;

height: 165px;
margin: 15px 0 30px 0;
background:url(img/header.gif);

}

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

#primaryContent {

float:left;

width:800px;

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:430px;
margin: 0 0 20px 155px;
}

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

#twoColLayout #primaryContent {

width:600px;

float:left;

margin: 0 0 20px 195px;

}

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

#twoColLayout #secondaryContent {

display: none;

}

#secondaryContent{
float:left;
width: 200px;
margin: 0 0 20px 15px;
}
#sideContent{
float:left;
width:140px;
margin: 0 0 20px -800px;
}
/* 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:555px;

float:left;

margin: 0 0 20px 195px;

}

#footer{

	clear:both;

width: 750px;

height: 85px;

background: transparent url(footer.gif);

padding: 0px;

}

#footer p {

margin: 10px 10px 0 0;

padding: 50px 4px 4px 0;
color: #787878;
font-weight: bold;

}



#footer a:link, #footer a:visited {

color: #8fadd0;

}

#footer a:hover {

color: #0956ae;

background: #;

}
/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */



img {

float: left;

margin: 0px 0 10px 0px;

border: 0;

}



/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */



.default img {

border: 0;

}



/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */



.mainImage {

display: block;

float: none;

margin-top: 4px;

border: none;

}
/* horizontal main menu navigation - based on a method from Richard Rutter */



 #mainNav

{

margin: 45px 0 0 100px;

padding: 0;

width: 800px;

height: 50px;

font-weight: bold;

font-size: 200%;

}



#mainNav ul

{

list-style: none;

margin: 0;

padding: 0;

border: none;

}



#mainNav li

{

display: block;

margin: 0;

padding: 0;

float: left;

width: auto;

}



#mainNav a

{

color: #030e3c;

display: inline;

width: auto;

text-decoration: none;

background: none;

margin: 0;

padding: 10px 10px;

border-right: 1px solid #030e3c;

}



#mainNav a:hover, #mainNav a:active { color: #0956ae; }



#mainNav a.active:link, #mainNav a.active:visited

{

position: relative;

z-index: 102;

background: none;

color: #fff;

font-weight: bold;

}



/* Highlighting the current page */



body.home #mainNav a#home, body.links #mainNav a#links,  body.news #mainNav a#news, body.about #mainNav a#about, body.contact #mainNav a#contact { 

  color: #fff;

text-decoration: underline;

}

body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact { 

  color: #030e3c;

}
#linkList {

	color: #8fadd0;
	size: 150%;
	line-height: 100%;
	}
#linkList a {color: #8fadd0; text-decoration: none;}

	#linkList a:visited {color: #5c75c5;}

	#linkList a:hover {color: #bc857e; text-decoration: underline;}


#linkalot h4 {color: #5c75c5; font-size: 140%;}

#linkalot a {color: #8fadd0; font-size: 140%; text-decoration: none;}

	#linkalot a:visited {color: #5c75c5;}

	#linkalot a:hover {color: #bc857e; text-decoration: underline;}
	
	/* Begin lselect styles */

	#linkList #lselect {

		font-style: italic;

		}

#linkList #lselect h3 {

			background: url(img/fa.jpg) no-repeat left top;

			margin: 0px 0px 0px 0px;

			width: 200px; height: 68px;

			} 

#linkList #lselect h3 span {

				display: none;

				}
#linkList #lselect a {display: block; font-style: normal; font-weight: bold;}

.sideNav {

width:140px;

margin: 5px 0 0 10px;

padding: 10px 0 5px 0;

background: #FFF;

}

.sideNav h2 {

margin: 0;

padding: 0 5px 10px 5px;

font-size: 160%;

color: #909090;

}
.sideNav ul {

			list-style-type: none;

			margin: 0px 0px 0px 0px; padding: 0px;

			}
.sideNav ul li {

				padding: 5px 0px 5px 0px;

				}

	

.sideNav a {display: block; font-style: normal; color:#909090; font-size:120%; font-weight: bold; text-decoration: none;}
.sideNav a:visited {color: #5c75c5;}
.sideNav a:hover {color: #bc857e; text-decoration: underline;}

.thumbnails img{

margin: 10px 10px 10px 10px;
border: 1px solid #787878;

}