body {
	/* background-color: #ccffff; */
	background: url("images/gradient-ccffff.jpg") repeat-x;
	 
	}

	

/* common styling */
.cssfly 
	{font-family: verdana, arial, sans-serif; 
	width:150px; height:150px; 
	position:relative; margin:0; 
	font-size:12px; 
	/* margin:50px 0; */
	}
.cssfly ul li a, .menu ul li a:visited 
	{display:block; text-decoration:none; 
	color:#000000; width:150px; height:25px; 
	text-align:center; border:1px solid #fff; 
	border-width:1px 1px 1px 1px; 
	background: #33cccc; color:#000000;
 	line-height:25px; font-size:12px;}
.cssfly ul 
	{padding:0; margin:0;list-style-type: none; }
.cssfly ul li 
	{float:left; margin-right:1px; position:relative;}
.cssfly ul li ul 
	{display: none;}
 
/* specific to non IE browsers */
.cssfly ul li:hover a 
	{color:#fff; background:#3366cc;}
.cssfly ul li:hover ul 
	{display:block; position:absolute; 
	top:0; left:150px; width:150px;}
.cssfly ul li:hover ul li a.hide 
	{background:#ccc; color:#000;}
.cssfly ul li:hover ul li:hover a.hide 
	{width:150px;}
.cssfly ul li:hover ul li ul 
	{display: none;}
.cssfly ul li:hover ul li a 
	{display:block; background:#ccc; color:#000; 
	width:150px;}
.cssfly ul li:hover ul li a:hover 
	{background:#1DA237; color:#000;}
.cssfly ul li:hover ul li:hover ul 
	{display:block; position:absolute; 
	left:151px; top:0; color:#000;}
.cssfly ul li:hover ul li:hover ul li a 
	{display:block; width:200px; 
	background:#dfc184; color:#000;}
.cssfly ul li:hover ul li:hover ul li a:hover 
	{background:#bd8d5e; color:#fff;}




	#container
	{
	width: 90%;
	margin: 10px auto;
	background: url("images/gradient-99cccc.jpg") repeat-x;
	color: #333;
	border: 1px solid gray;
	line-height: 130%;

	}

	#top
	{
	padding: 3em;
	background-color: #99ccff;
	border-bottom: 1px solid gray;
	text-align: center;
	background: url("images/Header_background_100_high.jpg") repeat-x;
	background-position: 10px 10px;
	}

	#top h1
	{
	padding: 0;
	margin: 0;
	
	}

	#navigation
	{
	float: left;
	width: 160px;
	margin: 0;
	padding: 1em;

	}

	#content
	{
	margin-left: 200px;
	border-left: 1px solid gray;
	padding: 1em;

	}

	/* Definitions for breadcrumb lists */
	#breadcrumbs
	{
	display:inline;
  	border:3px double #666;
	margin: 10px;
	padding:10px;
  	background:#ccffff;
	}


	#breadcrumbs, #breadcrumbs li
	{
 	margin:0;
  	padding:1px;
  	list-style-type:none;
  	float:left;
	}


	.insertbox
	{
	float: right;
	width: 250px;
	margin: 10px 0 10px 10px;
	background-color: #FFFFFF;
	padding: 10px;
	border: 1px solid #666;
	font-weight:bold;
	}

	.required
	{
	color: red;
	}

	#footer
	{
	clear: both;
	margin: 0;
	padding: .5em;
	color: #333;
	background-color: #99ccff;
	border-top: 1px solid gray;
	font-size:10px;

	}

	#navigation p { margin: 0 0 1em 0; }
	#content h2 { margin: 0 0 .5em 0; }

	#imap {
  	display:block;
  	width:400px;
  	height:760px; 
  	background: url("images/church-original-400x600.jpg") no-repeat;
  	position:relative;
  	}

	/* set up the definition list <dt><a> to hold the background image for the hover state */
	#imap a#title 
	{
  	display:block;
  	width:400px;
  	height:0; 
  	padding-top:600px; 
  	overflow:hidden; 
  	position:absolute; 
  	left:0; 
  	top:0; 
  	background:transparent url("images/church-original-400x600-hover.jpg") no-repeat 400px 600px; 
  	cursor:default;
  	}
	/* the hack for IE pre IE6 */
	* html #imap a#title {
 	 height:600px;
  	 he\ight:0;
  	}

	/* the <dt><a> hover style to move the background image to position 0 0 */
	#imap a#title:hover 
	{
  	background-position: 0 0; 
  	z-index:10;
  	}

	/* place the <dd>s in the correct absolute position */
	#imap dd {position:absolute; padding:0; margin:0;}
	#imap #pic-choir        {left:40px; top:300px; z-index:20;}
	#imap #pic-musicgroup   {left:250px; top:310px; z-index:20;}
	#imap #pic-bellringers  {left:50px; top:420px; z-index:20;}
	#imap #pic-toddlergroup	{left:200px; top:410px; z-index:20;}

	/* style the <dd><a> links physical size and the background image for the hover */
	#imap a#choir, #imap a#musicgroup, #imap a#bellringers, #imap a#toddlergroup 
	{
 	 display:block; 
  	 width:85px; 
  	 height:85px; 
  	 background:transparent url("images/hover-85x85.gif") -100px -100px no-repeat; 
  	 text-decoration:none; 
  	 z-index:20;
  	}

	/* style the span text so that it is not initially displayed */
	#imap a span, #imap a:visited span   
	{   
  	 display:none; 
  	}  

	/* move the link background image to position 0 0 when hovered */
	#imap a#choir:hover, #imap a#musicgroup:hover, #imap a#bellringers:hover, #imap a#toddlergroup:hover {
 	 background-position:0 0;
  	}

	/* define the common styling for the span text */
	#imap a:hover span 
	{
  	position:absolute;  
  	width:250px; 
  	display:block; 
  	font-family:arial; 
  	font-size:12px; 
  	background:#fff; 
  	color:#000; 
  	border:1px solid #000; 
  	padding:5px;
  	}
	/* the hack for IE pre IE6 */
	* html #imap a:hover span 
	{
  	width:400px; w\idth:388px;
  	}

	/* ********************************************************************** */
	/* move the span text to a common position at the BOTTOM of the image map */
	/* ALSO code for #imap a:hover span should have width: 388px;             */
	/* ********************************************************************** */
	/* #imap a#choir:hover span  */
	/* { */
  	/* left:-40px;  */
  	/* top:306px; */
  	/* } */

	/* #imap a#musicgroup:hover span  */
	/* { */
  	/* left:-250px;  */
	/* top:296px; */
  	/* } */

	/* #imap a#bellringers:hover span  */
	/* { */
  	/* left:-50px;  */
  	/* top:186px; */
  	/* } */

	/* #imap a#toddlergroup:hover span  */
	/* { */
  	/* left:-200px;  */
  	/* top:196px; */
  	/* } */
	/* *End of code required for text to be at BOTTOM of image map ********** */
	/* ********************************************************************** */
	

	/* ********************************************************************** */
	/* move the span text to a common position at the RIGHT of the image map */
	/* ALSO code for #imap a:hover span should have width: 40%;             */
	/* ********************************************************************** */
	#imap a#choir:hover span 
	{
  	left:366px; 
  	top:-300px;
  	}

	#imap a#musicgroup:hover span 
	{
  	left:156px; 
	top:-310px;
  	}

	#imap a#bellringers:hover span 
	{
  	left:356px; 
  	top:-420px;
  	}

	#imap a#toddlergroup:hover span 
	{
  	left:206px; 
  	top:-410px;
  	}

	#imap a span:first-line {font-weight:bold; font-style:italic;}