/* Main Body of document style 
**
** This ensures the content is placed in the middle of the page and is centred, also gives the nice dotty border
** round the edge.
*/
body {	
	margin:5px 0px; 
	padding:0px;
	text-align:center;
}

.mainbody {
	position:absolute;
	left:50%;
	width:780px;
	margin-top:0px;
	margin-left:-380px;
	border:1px dashed #333;
	background-color:#eee;
	padding: 10px;
}

.mainbody .content p {
	font-family: "Verdana";
	font-size: 13px;
	text-align: justify;
	text-decoration: none;
	margin: 13px;
}

.content {
	font-family: "Verdana";
	font-size: 13px;
	text-align: left;
	vertical-align: text-top;
	float: left;
	width: 100%;
	margin-top: 5px;
	height:650px;	
}

/* This is here to force IE to stop putting in extra margin space */
p {
	margin-top:0px;
}
	
/* The main header element, with the pictures / logo in to be repeated on each page. 
**
** I have made each of the images a background of the div for 2 reasons:
** - It loads the images on the page in the order that they are on the page
** - make it easier to style them and position them, simply insert a div tag!
*/	
.headerlogo{
	width:196px;
	height:86px;
	float: left;
	background-image: url(../images/header_r1_c1.gif);
	border: 1px solid white;
	border-bottom: 10px solid #DE162C;	
	border-right : none;
	border-top: none;
}

.headerpic1{
	width:65px;
	height:86px;
	float: right;
	background-image: url(../images/churchcross.gif);
	border: 1px solid white;
	border-left:none;
	border-bottom: 10px solid #9933CC;
	border-top: none;
}

.headerpic2{
	width:316px;
	height:86px;
	float: right;
	background-image: url(../images/churchpan.jpg);
	border: 1px solid white;
	border-left:none;
	border-bottom: 10px solid #33FF66;
	border-top: none;
}

.headerpic3{
	width:61px;
	height:86px;
	float: right;
	background-image: url(../images/people.jpg);
	border: 1px solid white;
	border-left:none;
	border-bottom: 10px solid #0099CC;
	border-top: none;
}

.headerpic4{
	width:61px;
	height:86px;
	float: right;
	background-image: url(../images/Ghana_Banner_sm.gif);
	border: 1px solid white;
	border-left:none;
	border-bottom: 10px solid #FF9933;	
	border-top: none;
        border-right: none;
}

.headertitle {
	width:780px;
	height:95px;
	float: left;
	clear: right;
	background-color: #DE162C;
}

.headerbanner {
	width:780px;
	height:104px;
	float: left;
	background-image: url(../images/visionheader.JPG);
	background-color: #DE162C;
}


.headernav h1 {
	font-family:"Verdana";
	font-size:20px;
	color: white;
	margin-top: 10px;
	margin-right: 5px;
	font-variant: normal;
}

.headernav h2 {
	font-family:"Verdana";
	font-size:18px;
	color: white;
	margin-top: 10px;
	margin-right: 5px;
	font-style: normal;
}

/* Style for the main menu 
** 
** Using a simple List element and then styling it so that it displays horizontally.
*/
.headernav {
	position: relative;
	float: left;
	width: 780px;
	clear: left;
	background-color: #DE162C;
	border-top:2px;
	border-top:solid;
	border-top-color:white;
	text-align: right;
}

.headernav ul {
	padding: 0;
	margin: 0;
}

.headernav li {
	display: inline;
	float:right;
	list-style-type: none;
}

.headernav a {
	letter-spacing: 1px;
	font-family: "Verdana", Verdana, Arial, sans-serif; 
	font-size: 14px;
	font-weight:bold;
	display:block;
	margin-left:10px;
	color: white;
	width:80px;
	text-align:center;
	padding: 0.2em 0.2em;
}

.headernav a:hover {
	background-color: #CC0000;	
}

/*vertical menu */

.menu {
	height: 650px;
	width: 140px;
	background-color: #DE162C;
	z-index:1;
	float:left;
margin-right: 30px;
}

.menu ul {
	padding: 0;
	margin: 0;
}

.menu li {
	list-style-type: none;
	display:block;
	padding-top:10px;
}

.menu li.item a {
	letter-spacing: 1px;
	font-family: "Verdana", Verdana, Arial, sans-serif; 
	font-size: 14px;
	font-weight:bold;
	display:block;
	margin-left:0px;
	color: white;
	width:120px;
	text-align:left;
}

.menu li.subitem a {
	letter-spacing: 1px;
	font-family: "Verdana", Verdana, Arial, sans-serif; 
	font-size: 12px;
	font-weight:normal;
	display:block;
	margin-left:20px;
	color: white;
	width:120px;
	text-align:left;
}


.menu a:hover {
	background-color: #CC0000;	
}


/*
** The rest of the images are also held in div's, again for the same reasons above.
*/
.ghanabanerimg {
	float: right;
	height: 300px;
	width: 200px;
	background-image: url(../images/Ghana_Banner_sm_lg.gif);
	margin-left: 15px;
}

.acttabletennisimg {
	float: right;
	background-image: url(../images/tabletennis.jpg);
	width: 240px;
	height: 180px;
	margin-left: 15px;
}

.mainchurchimg {
	height: 300px;
	width: 350px;
	border: 5px solid;
	background-image: url(../images/after.jpg);
	border-color: #EEEEEE;
	float: left;
}

.mainlocationimg {
	clear: left;
	float: left;
	width: 340px;
	height: 330px;
	background-image: url(../images/map.jpg);
	padding-right: 0px;
	margin-right: 20px;
}

.mainbandimg {
	float: left;
	width: 350px;
	height: 210px;
	background-image: url(../images/singinggroup.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
}

.mainflyerimg {
	float: left;
	width: 400px;
	height: 207px;
	background-image: url(../images/flyer.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 80px;
}


.organimg {
	float: left;
	width: 256px;
	height: 192px;
	background-image: url(../images/organ.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.before1img {
	float: left;
	width: 256px;
	height: 193px;
	background-image: url(../images/before1.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.before2img {
	float: right;
	width: 256px;
	height: 193px;
	background-image: url(../images/before2.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 30px;
	margin-bottom:20px;
}

.mapimg {
	float: left;
	width: 270px;
	height: 360px;
	background-image: url(../images/map.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.anniversaryimg {
	float: left;
	width: 104px;
	height: 86px;
	background-image: url(../images/anniversary.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.plaqueimg {
	float: left;
	width: 303px;
	height: 271px;
	background-image: url(../images/plaque.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.wfimg {
	float: left;
	width: 400px;
	height: 300px;
	background-image: url(../images/WF.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.carpentersimg {
	float: left;
	width: 454px;
	height: 300px;
	background-image: url(../images/Carpenters.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.climbingimg {
	float: right;
	width: 300px;
	height: 225px;
	background-image: url(../images/climbingwall.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.artworkimg {
	float: left;
	width: 300px;
	height: 225px;
	background-image: url(../images/Artwork.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.rainbowimg {
	float: left;
	width: 169px;
	height: 225px;
	background-image: url(../images/rainbow.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.bibleimg {
	float: left;
	width: 553px;
	height: 414px;
	background-image: url(../images/Ghanabiblestudy.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.tt1img {
	float: left;
	width: 200px;
	height: 187px;
	background-image: url(../images/tabletennis1.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 200px;
	margin-bottom:10px;
}

.tt2img {
	float: left;
	width: 256px;
	height: 192px;
	background-image: url(../images/tabletennis2.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:10px;
}
.tt3img {
	float: right;
	width: 256px;
	height: 192px;
	background-image: url(../images/tabletennis3.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:10px;
}

.tt4img {
	float: left;
	width: 300px;
	height: 200px;
	background-image: url(../images/tabletennis4.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:10px;
}

.coffeeimg {
	float: right;
	width: 300px;
	height: 225px;
	background-image: url(../images/Coffee.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}

.castlegate1img {
	float: left;
	width: 310px;
	height: 208px;
	background-image: url(../images/castlegate1.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:10px;
}

.castlegate2img {
	float: right;
	width: 207px;
	height: 309px;
	background-image: url(../images/castlegate2.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:10px;
}

.andrewimg {
	float: left;
	width: 177px;
	height: 200px;
	background-image: url(../images/Andrew.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}
.kenimg {
	float: left;
	width: 138px;
	height: 200px;
	background-image: url(../images/Ken.jpg);
	padding-right: 0px;
	margin-right: 20px;
        margin-left: 20px;
	margin-bottom:20px;
}




/* Hold the news content in a standard, expanding div, along with the header style for the 
** news and an image also if it is required...
*/
.mainbody .content .news {
	float: left;
	width: 100%;
	border: 1px dashed #000000;
}
.mainbody .content .news h3 {
	font-family: "Franklin Gothic Medium";
	font-size: 14px;
	font-weight: bold;
	margin: 1px;
	padding-left: 10px;
}
.mainbody .content .news span#date {
	font-family: "Franklin Gothic Medium";
	font-size: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}
.mainbody .content .news p {
	margin: 10px;
}
.mainbody .content .news img#withnews {
	float: right;
	margin: 10px;
}