/*Defining the main body layout - 
white background, main font verdana in dark blue, no margin*/
BODY {background-color : #ffFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #00008B;
	margin: 0px; 
	}

/*this is the church logo box*/
.logo {
	position: absolute;
	top: 2px;
	left: 40px;
	background: #ffFFFF;
	border: 0px;
	}

/*this is the main header area*/
.head {
 	position: absolute;
	top: 33px;
	left: 120px;
	background: transparent;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-size: 18pt;
	color: #483D8B;
	font-weight: bold;
	} 

/*this is a shadow effect for the heading and needs to be put in the html document before the actual heading with the same wording and it also needs exactly the same properties as the head coding except for the positioning and colour*/
.shadow {
	position: absolute;
	top: 35px;
	left: 122px;
	background: transparent;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-size: 18pt;
	color: #cccccc;
	font-weight: bold;
	z-index: -1;
	}
	

/* this is the header area for the home page */
.headhome {
 	position: absolute;
	top: 22px;
	left: 40px;
	background: transparent;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-size: 24pt;
	color: #483D8B;
	font-weight: bold;
	} 

/*this is a shadow effect for the heading on the homepage and needs to be put in the html document before the actual heading with the same wording and it also needs exactly the same properties as the head coding except for the positioning and colour*/
.shadowhome {
	position: absolute;
	top: 25 px;
	left: 43 px;
	background: transparent;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-size: 24pt;
	color: #cccccc;
	font-weight: bold;
	z-index: -1;
	}
	
/*this is a box to put adverts into*/
.advert {
	position: absolute;
	top: 5px;
	height: 50px;
	right: 2%;
	width: 19.6%;
	background: #FFcccc; /*red*/
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12pt;
	font-color: #483D8B;
	padding: 2px;
	}

/*The navigation on the top, positioned absolutely*/
.navigation {
	position: absolute;
	top: 62px;
	left: 0px;
	width: 98%;
	height: 48px;
	background-color: #e0ffff;
	border-top: 8px solid #483D8B;
	margin-top: 2px;	
	font-family: arial, Helvetica, Verdana, sans-serif;
	}                  

/*this is the main content area*/
.content {
	background: #ffFfFf;
	color: #00008B;
	position: absolute;
	top: 115px;
	width:98%;
	font-family : Verdana, Arial, Helvetica, sans-serif;
    border: 0.1px solid #FFFFFF; 
   /*to ensure that NN4.xx renders the background-color of the content area*/
    }

/*this ensures correct table details for the middle column, the main content area*/
.middle {
	background: #ffFfFf;
	color: #00008B;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	padding: 5px;
	}

/*this is formatting for the subheading area on the left*/
.subhead {
	background: #ffFfFf;
	color: #00008B;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-weight: bold;
	font-size: 14pt;
	text-align: right;
	padding: 5px;
	}

/*this is formatting for the area on the left for the links to other sites page*/
.leftlink {
	background: #ffFfFf;
	color: #00008B;
	font-family : Arial, Helvetica, Verdana, sans-serif;
	font-size: 14pt;
	text-align: right;
	padding: 5px;
	}

/*this is the side area on the right in contrasting colour to the main area*/
.side {
	background: #f5f5f5;
	color: #8b0000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	text-align: left;
	padding: 5px;
	}

/*this is for small sidebar text*/
.sidesmall { 
	background: #f5f5f5;
	color: #8b0000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
	text-align: left;
	padding: 5px;
	}

/*font-family is already defined, here I only set the font-size*/
P, OL, UL, DL {font-size: 12pt;}
/*and here I prevent shrinking text*/
P OL, P UL, P DL, OL UL {font-size: 13pt;}

h1, h2, h3	{font-family: arial, Helvetica, verdana, sans-serif;}

/*this is for small text*/
.smallprint {
	padding: 5px;
	font-size: 11px; 
	background: transparent;}

/*this can set a large margin at the bottom for the contents on the home page*/
.conmargin {margin-bottom: 7pt;
		margin-top: 0pt;}

/*Standard links throughout document*/
A:link {color: #6666ff; text-decoration: none; font: bold arial, verdana;}
A:visited {color: #808080; text-decoration: none; font: bold arial, verdana;}
A:hover {color: #0000ff; text-decoration: none; font: bold arial, verdana;}
A:active {color: #ff0000; text-decoration: none; font: bold arial, verdana;}

/*Home page Contents links - brighter blue for unread, grey for visited, bright blue for hover and red for active*/
A.contents:link {color: #6666ff; text-decoration: none; font: bold 12pt/12pt arial, verdana;}
A.contents:visited {color: #808080; text-decoration: none; font: bold 12pt/12pt arial, verdana;}
A.contents:hover {color: #0000ff; text-decoration: none; font: bold 12pt/12pt arial, verdana;}
A.contents:active {color: #ff0000; text-decoration: none; font: bold 12pt/12pt arial, verdana;}

/*Sidebar links - red for the link, and bright red for hover and active*/
A.sidebar:link {color: #8b0000; text-decoration: underline; background: transparent;}
A.sidebar:visited {color: #8b0000; text-decoration: underline; background: transparent;}
A.sidebar:hover {color: #ff0000; text-decoration: underline; background: transparent;}
A.sidebar:active {color: #ff0000; text-decoration: none; background: transparent;}

/*Navigation bar links - blue for the links, grey for visited, bright blue for hover and red for active*/
A.nav:link {color: #483D8B; text-decoration: none; background: transparent; font: bold 11px arial, verdana;}
A.nav:visited {color: #999999; text-decoration: none; background: transparent; font: bold 11px arial, verdana;}
A.nav:hover {color: #0000ff; text-decoration: none; background: transparent; font: bold 11px arial, verdana;}
A.nav:active {color: #8b0000; text-decoration: none; background: transparent; font: bold 11px arial, verdana;}