body {font-family:  verdana, arial, sans-serif; font-size:0.8em; behavior:url(csshover.htc);background-color:#CCC; }

* {margin:0; padding:0;}

/* Enclosing div to centralise pages */
#all{
	position: relative;
	width:800px; 
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
	border:0px solid;
}
/* main content area */ 
h1{font-family: verdana,arial, sans-serif;font-size:2.0em ;font-weight: normal; color:#B41E28}
h2{font-family: "comic sans ms";font-size:2.0em;color:#4A4}
h3{font-size:1.2em; font-weight: normal; margin: 15px 0 5px 0}
h4{font-size:1.2em; font-weight: normal; margin: 5px 0 5px 0px; color:#00f;}
h5 {width:400px; margin:30px 0 30px 100px; 
		font-family:verdana,arial, sans-serif;font-size:1.3em;font-weight:normal; color:#B41E28; text-align:center; 
		padding:10px 0.0em 10px 0px; border:2px solid #B41E28; ;background-color: #EEE;clear:left;}
h6 {width:400px; margin:30px 0 0px 0px; 
		font-size: 1.2em; font-weight: normal ; color:#B41E28; text-align:left; 
		}
.h7 {width:300px; margin:0px 0 30px 10px; 
		font-family: verdana,arial, sans-serif;font-size:1.4em ;font-weight:normal; color:#B41E28; text-align:center; 
		padding:10px 0.0em 10px 0px; border:0px solid #333; ;background-color: #CCC;clear:left;}

#contentarea {
	width:800px;
	background-color:#fff;
	background-image:url(images/faux_columns.gif);
	background-repeat: repeat-y;
	; 
}
.info{
margin: 10px 10px 10px 100px;font-size: 1.2em;}  
div#header {width:650px; margin-left:150px;  
		 text-align:center; 
		 border-top:0px solid #069; border-bottom:0px solid #069;background-color: #CCC;height:80px;}

div#nav { position:relative; left:0px; top:105px; width:120px;
				padding:20px 0px 20px 30px; margin:0px 0 0 0px; 
				background-color: #CCC; height:100%; float:left;border:0px;}
div#nav ul {margin-top:0; margin-bottom:0.8em;}
div#nav li {margin-bottom:0.7em; font-weight:bold; font-size:0.75em; list-style-type:none}			


div#content {position:relative; margin:0px 0px 0 0px; padding:10px 10px 10px 10px ;width:625px; float:left;}
div#content p {font-size:1.2em; margin:10px;}	
div#content ul {margin: 20px 0 0px 50px ; list-style-type:none;}
div#content li {font-size:1.2em;margin: 10px 0 0 1.25em}
div#content ol {margin: 20px 0 0px 50px ; list-style-type:none;}
div#content ol li {font-size:1.0em;font-weight: bold ;margin: 10px 0 0 1.25em}
div#feedback{position:relative; border:5px solid #4A4; padding:10px 10px 10px 100px ;width:200px;margin:30px 0px 30px 200px;
}
/* index page stuff */
.centclm{position:relative; width:290px; top:20px; left:0px; float:left; 
		margin:0px 10px 0 20px; padding:1em  .5em; border:2px solid #B41E28;background-color: #DDD;
}
.centclmwide{position:relative; width:600px; top:20px; left:0px; float:left;text-align:center; 
		margin:0px 30px 10px 0px; padding:1em  .5em; border:2px solid #B41E28;background-color: #DDD;
}
.centclmwide ul {margin: 20px 0 0px 50px ; list-style-type:none;color:#000; }
.centclmwide li {font-size:1.2em;color:#000; margin: 10px 0 0 1.25em;}

.centclmwidered{color: white;text-align:center; font-size: 1.2em; position:relative; width:600px; top:20px; left:0px; float:left; 
		margin:0px 10px 10px 0px; padding:1em  .5em; border:5px solid #B41E28;background-color: #6A6;
}
.rightclm{position:relative; width:240px; top:20px; left:0px;float:left;  
		margin:0px 10px 10px 30px; padding:1em  .5em; border:2px solid #B41E28;text-align:center;background-color: #DDD;
}
.rightclmplus{position:relative; width:285px; top:20px; left:0px;float:left;  
		margin:0px 10px 10px 0px; padding:1em  .5em; border:2px solid #B41E28;text-align:center;background-color: #DDD;
}
.rightclmplusgld{position:relative; width:275px; top:20px; left:0px;float:left;  
		margin:0px 10px 10px 0px; padding:1em  .5em; border:5px solid #FFCC33;text-align:center;background-color: #DDD;
}
.centclm h3 {color:#B41E28;}
.rightclm h3 {color:#4A4;}
/* Weekly Newsletter Stuff */
div#centcolumn {position:relative; width:290px; top:20px; left:0px; float:left; 
		margin:0px 10px 0 20px; padding:1em  .5em; border:2px solid #B41E28; }
div#centcolumn p {font-size:.75em;}

div#rightcolumn {position:relative; width:280px; top:20px; left:0px;float:left;  
		margin:0px 0px 0 10px; padding:1em  .5em; border:2px solid #B41E28;}
div#rightcolumn p {font-size:.75em;}

/* Image Stuff*/
div#header_image_l{ margin-top:0px; padding-top:0px;position:absolute;left:0px; top:0px;}
div#header_image{ margin-top:20px; padding-top:12px;position:absolute;left:0px; top:0px;}
div#methodist_img{ margin-top:10px; padding-top:12px;position:absolute;left:500px; top:40px;}
.leftimg{
margin: 0px 10px 10px 0px;
float: left;	/* Align L */
}
.rightimg{
margin: 0px 0px 10px 10px;
float:right;	/* Align R */
}
.centimg{ 
display: block;
margin-left: auto; 
margin-right: auto;
}
.leftimg_bor{
margin: 0px 10px 10px 5px;
float: left;	/* Align L */
}
/* Navigation Buttons */
div.button {width:120px; height:24px; top:0px; left: 0px; border: 1px #000 solid;}
a.roll  {width:120px; 
			height:20px; 
			padding-top:4px;
			display:block; 
			font-family: verdana, sans-serif;
			font-weight:bold;
			font-size:10pt;
			text-align:center;
			text-decoration:none;
			background:  url("images/four_state_roll_bg_3.gif") 0px 0px no-repeat #CCC;
			 /*NOTE: backgroud shorthand is equivilant of:	
			background-image: url("images_pres/four_state_roll_bg.gif"); 
			background-position: 0px 0px; 
			background-repeat: no-repeat; 
			background-color: #000; */
			}
			div.button a.roll:link {background-position: 0px 0px; color: white; text-decoration:none;}
			div.button a.roll:visited {background-position: 0px -25px; color: white;}
			div.button a.roll:hover {background-position: 0px -50px; color:#069;}
			div.button a.roll:active {background-position: 0px -75px; color:white;}

/* Back navigation button */	
.backnav {
width:150px; height:20px; margin-top:20px; margin-left: 50px;text-align:center; border: 2px #000 solid;
}			
/* PHOTO ALBUM STUFF starts */
#albumlist {
			list-style-type: none;			
			}
ul#albumlist li {
			 float:left;
			 margin: 0px 0px 10px -10px;
			 padding:10px;						 
			}
ul#albumlist li img {
			 display: block;
			 margin: 0px 70px 10px 0px;
			 border: 0px solid #333300;			
			}
/* events stuff start */
.leftbox {
margin: 0px 10px 10px 20px;
float: left;	/* Align L */
background-color: #51CC51;
text-align: center;
font-weight: bold;
width: 250px;
height:420px;
}
.rightbox {
margin: 0px 0px 10px 20px;
float:right;	/* Align R */
background-color: #FFCC00;
text-align: center;
font-weight: bold;
width: 300px;
height:420px;
}
.centbox {
display: block;
margin-left: auto; 
margin-right: auto;
text-align: center;
font-weight: bold;
clear:left;
}

/* events stuff end */

.clearfloats {clear:both;}
					
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */ 
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

/*POP UP STUFF*/
a.screen, a.screen:visited {
color:#c00; 
position:relative; 
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:450px; /* give it a width */
height:0; /* no height to solve an Opera bug that 
             makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:-150px; /* position:the image */
top:-150px;
}
a.screen:hover {
text-decoration:none; 
border:0; /* needed for this to work in IE */ 
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:401px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:500; 
}
a.screen:hover b img {
border:0; /* remove the link border */
}
/* END OF POP UP STUFF */