/***************************
*     CSS expressions      *
***************************/

a[class ="delicious"] {
   padding-left: 20px;
   background: transparent url(../images/icon_delicious.gif) no-repeat center left;
}
a[class ="digg"] {
   padding-left: 22px;
   background: transparent url(../images/icon_digg.gif) no-repeat center left;
}
a[class ="reddit"] {
   padding-left: 23px;
   background: transparent url(../images/icon_reddit.gif) no-repeat center left;
}
a[class ="myweb"] {
   padding-left: 27px;
   background: transparent url(../images/icon_myweb.gif) no-repeat center left;
}
a[id ="rss"] {
   padding-left: 43px;
   background: transparent url(../images/icon_rss.gif) no-repeat center left;
}
a[class ="rss"] {
   padding-left: 43px;
   background: transparent url(../images/icon_rss.gif) no-repeat center left;
   font-size: 0.8em;
}

/***************************
*         HACKS            *
***************************/

 /* rules read only by IE/Win and IE/Mac */
* html .anyClassOrIDNamesHere

/***************************
*      REDEFINED TAGS      *
***************************/

/* All styles which use a color should also specify a background-color to ensure valid CSS */
/* Always use percentages or EM units for line-heights so that browser text sizes will increase gracefully */
/* For accessibility purposes, please use hexidecimal codes for all colours, not colour names such as white */

/* Validate your CSS here: http://jigsaw.w3.org/css-validator  */

HTML, BODY
{
	min-height: 100%; /* Use 100% height here so % heights work for IE */
	margin-bottom: 0.01em; /* Use this to force a vertical scroll bar, even if not required, so no jump when it is required */
}

BODY
{
	/* Define the font for the page */
	font: normal normal normal small/130% arial;
	/* 1. font-style - italic/normal/oblique */ /* I can't see any difference between italic and oblique! */
	/* 2. font-variant - normal/small-caps */
	/* 3. font-weight - bold/normal */
	/* 4. font-size/line-height - xx-large/x-large/large/medium/small/x-samll/xx-small and a pixel value, percentage or EM value */
	/* 5. font-family - choose a system font */
	/*background-color: #F0F0F0;*/
	background-image: url(../images/bg.gif);
	background-repeat:repeat;
	background-position:50px;
	color: #000000;	
	margin: 0px; /* Amend if necessary */
	padding: 0px; /* Amend if necessary */
}


BODY#popup
{
	/* Define the font for the page */
	font: normal normal normal small/130% arial;
	/* 1. font-style - italic/normal/oblique */ /* I can't see any difference between italic and oblique! */
	/* 2. font-variant - normal/small-caps */
	/* 3. font-weight - bold/normal */
	/* 4. font-size/line-height - xx-large/x-large/large/medium/small/x-samll/xx-small and a pixel value, percentage or EM value */
	/* 5. font-family - choose a system font */
	background-color: #F0F0F0;
	background-image: url(../images/headerPopup.gif);
	background-position: top;
	background-repeat: no-repeat;
	color: #000000;	
	margin: 0px; /* Amend if necessary */
	padding: 133px 10px 0px 10px; /* Amend if necessary */
}

H1{ margin: 0px; padding: 0px; font-family: Georgia; color: #CB2229; font-size: 1.3em; margin: 0px; padding: 0px; margin-bottom:14px;}
H1#search{ margin: 0px; padding: 0px; font-family: Georgia; color: #CB2229; font-size: 1.3em; margin-bottom: 10px; }
H2{ margin: 0px; padding: 0px; font-family: Georgia; color: #CB2229; font-size: 1.3em; margin-bottom: 16px; line-height:1.5em}
H2.redBG{ margin: 0px; padding: 0px; font-family: Georgia; color: #ffffff; font-size: 1.3em; margin-bottom: 10px; }
H2.date{ margin: 0px; padding: 0px; font-family: arial; color: #000000; font-size: 1em; font-weight: normal; margin-bottom: 0; }
H3{ margin: 0px; padding: 0px; font-size: 1em; margin-bottom: 16px; }
H3.googleMap{ margin: 0px; padding: 0px; font-family: Georgia; color: #CB2229; font-size: 1.3em; margin-bottom: 10px; }
H4{ margin: 0px; padding: 0px; }
H4.redBG{ margin: 0px; padding: 0px; font-family: Georgia; color: #ffffff; font-size: 1.3em; margin-bottom: 10px; }
	.googleMapsRow H4{ margin: 0px; padding: 0px; font-size: 0.9em; font-weight: normal; color: #000000; }
	.googleMapsRow H4 SPAN{ color: #CB2229; display: block; }
H5{ margin: 0px; padding: 0px; }
	#boxWhite H5{ margin: 0px; padding: 0px; font-family: Georgia; color: #CB2229; font-size: 1.3em; margin-bottom: 14px; }
H6{ margin: 0px; padding: 0px; line-height: 130%; color:#000000; font-weight:bold; margin-bottom:14px;font-size: 1em; }

P{ margin: 0px; padding: 0px; line-height: 130%; color:#666666; font-family: Arial, Helvetica, sans-serif } /* Sets the overall font properties for the P tag. Can be over-ridden */
	BODY#popup P{ margin-bottom: 15px; }
	#contentLeftInner P{ margin-bottom: 15px; }
	.tags P{ font-size: 0.9em; margin: 0px; }
	#boxRed P{ width: 280px; margin-left: 20px; }
	#boxWhite P{ width: 280px; }
	#boxWhite .boxWhiteRow .column2 P{ width: 180px; }
	
	#footer P#marginRightAnchors{ font-size: 0.9em; }
	P.statement{  font-family: Georgia; color: #666666; font-size: 1em; margin-top: 20px; text-align: center; }
	.texthead {margin: 0px; padding: 0px; line-height: 130%; color:#000000; font-weight:bold;font-size: 1em;}
	.textsubhead {margin: 0px; padding: 0px; line-height: 130%; color:#000000; font-weight:normal;font-size: 1em;}


UL{ margin: 15px; padding: 0; } /* Unordered list */
	UL LI SPAN{ color: #666666; }
OL{} /* Ordered list */
LI{ color: Red; } /* List item */
LI.choirs { color: Black; } /* List item */
	
#videoHolder
{
	text-align:center;
	font-size: x-small;
	}		

HR{}
	.hr HR{ display: none; }

BR{} /* Set the line-height of line-breaks if anything other than default is required. Use percentages or EM units */

A{ margin: 0px; padding: 0px; text-decoration: none; color: #CB2229; } /* Sets the overall font properties for the A tag. Can be over-ridden */

A:LINK{}
A:VISITED{}
A:HOVER{color: #ff9900;}
A:FOCUS{}
A:ACTIVE{}

A#left{ float: left; }
A#right{ float: right; }

	#header A#home{ position: absolute; top: 158px; left: 94px; }
	#header A#events{ position: absolute; top: 135px; left: 158px; }
	#header A#getInvolved{ position: absolute; top: 113px; left: 229px; }
	#header A#news{ position: absolute; top: 103px; left: 359px; }
	#headerEvents A#home{ position: absolute; top: 158px; left: 94px; }
	#headerEvents A#events{ position: absolute; top: 135px; left: 158px; }
	#headerEvents A#getInvolved{ position: absolute; top: 113px; left: 229px; }
	#headerEvents A#news{ position: absolute; top: 103px; left: 359px; }

	#footer A{ margin-left: 20px; }
	#footer P#marginRightAnchors A{ margin-right: 20px; margin-left: 0; }

IMG{ margin: 0px; padding: 0px; border: 0px; } /* Sets the overall font properties for the IMG tag. Can be over-ridden */
IMG#anim{ position: absolute; top: 62px; left: 626px; }
	.imgShadow IMG{ display: block; position: relative; background-color: #ffffff; /*border: 1px solid #a9a9a9;*/ margin: -6px 6px 6px -6px; /*padding: 4px;*/ }
	.boxWhiteRow .imgShadow IMG{ display: block; position: relative; background-color: #ffffff; /*border: 1px solid #a9a9a9;*/ margin: -6px 6px 6px -6px; /*padding: 4px;*/ }


ACRONYM{ cursor: help; border-bottom: 1px dashed #ff0000; } /* Use this around abbreviations and acronyms */

FORM{ margin: 0px; padding: 0px; }
INPUT{} 
INPUT.field{ width: 100px; border: 0; } /* Use this to style your form fields */
INPUT.fieldRegister{width: 250px; border: 0; border: solid 1px #CB2229; } /* Use this to style your form fields */
 INPUT.fieldRegisterArea{  height: 100px; width: 250px; border: 0; border: solid 1px #CB2229; } /* Use this to style your form fields */


INPUT.checkbox{} /* Use this to style check boxes */
INPUT.radioButton{} /* Use this to style radio buttons */
INPUT.submit{ width: 59px; height: 22px; float: left; border: 0; margin-top: 15px; cursor: hand; } /* Use this to style the SUBMIT button */
INPUT.submitRed{ width: 58px; height: 22px; float: left; border: 0; margin-top: 16px; cursor: hand; } /* Use this to style the SUBMIT button */SELECT{ width: 145px; } /* Use this to style SELECT menus */
LABEL{ color: #ffffff; } /* Use this to affect the formatting of form LABELS */
LABEL.red{ color: #CB2229; } /* Use this to affect the formatting of form LABELS */

/***************************
*         CLASSES          *
***************************/

.quoteCaption{ font-family: font-family: Arial, Helvetica, sans-serif; font-style:italic; color: #666666; font-size: 0.7em; margin-bottom: 16px; }

.footerText{ text-align: center; font-size: 0.7em; padding-bottom:10px;}

.eventTable{ padding-right: 5px; text-align:left; vertical-align:top;}

.hr{ border-top: 1px dashed #D7D7D7; height: 1px; overflow: hidden; margin: 14px 0 14px 0; clear: both; }

/* Image drop shadows */

.imgShadow
{
  float:left;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
  margin: 10px 16px 6px 10px !important;
  margin: 10px 10px 3px 5px;
  display: block;
}
	.boxWhiteRow .imgShadow
	{
	background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
	background: url(../images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 6px 10px !important;
	margin: 10px 0 3px 5px;
	display: block;
	}

#boxRed .column{ width: 110px; float: left; }
#contentGoogleMapInner .column{ width: 157px; float: left; }
#contentLeft .column{ width: 153px; float: left; }
#contentLeft .columnRegister{ width: 250px; float: left; }

.boxWhiteRow{ margin-bottom: 20px; }
	#boxWhite .boxWhiteRow .column1{ width: 90px; float: left; }
	#boxWhite .boxWhiteRow .column2{ width: 180px; float: left; }

.bl {background: url(../images/cornerFooterBottomLeft.gif) 0 100% no-repeat}
.br {background: url(../images/cornerFooterBottomRight.gif) 100% 100% no-repeat}
.tl {background: url(../images/cornerFooterTopLeft.gif) 0 0 no-repeat}
.tr {background: url(../images/cornerFooterTopRight.gif) 100% 0 no-repeat; padding: 14px; }

.googleMapsRow{ margin-bottom: 16px; }
	.googleMapsRow .column1{ width: 90px; height: 56px; float: left; }
	.googleMapsRow .column2{ width: 220px; float: left; }

/***************************
*          IDS             *
***************************/

#wrapper
{
	position:absolute;
	left:50%;
	width:770px;
	margin-left:-385px; /* This value should be -half the width */
	overflow:hidden;
}
#canvas
{           
	margin: 0px;
	padding: 0px;
	width: 770px;
	min-height: 500px; /* Only works in some browsers - an alternative is specified in the IE stylesheet */
	background: #ffffff;
}

#header{ width: 770px; height: 243px; background-image: url(../images/header01.gif) }
#headerEvents{ width: 770px; height: 243px; background-image: url(../images/headerEvents.gif) }
#hiddenNav{ display: none; }
#content{ width: 770px; }
#contentLeft{ width: 440px; float: left; background-color: transparent; background-image: url(../images/tileBoxesLeft.gif); background-repeat: repeat-y; }
#contentLeftInner{ width: 365px; padding: 0 37px 7px 38px; }
#contentRight{ width: 330px; float: right; }
#boxRed{ width: 310px; background-color: #CB2229; background-image: url(../images/cornerFolded.gif); background-repeat: no-repeat; background-position: top right; }
#boxRedRow{ width: 280px; margin-left: 15px; }
#boxWhite{ width: 300px; background-color: #ffffff; background-image: url(../images/tileBoxesRight.gif); background-repeat: repeat-y; padding: 0 15px 0 15px; }
#boxWhiteInner{ width: 280px; }
#contentGoogleMap{ width: 743px; margin-left: 21px; background-image: url(../images/tileBoxesWide.gif); background-repeat: repeat-y; }
#contentGoogleMapInner{ padding: 0 17px 0 17px; width: 694px; }
#googleMapColumnLeft{ float: left; width: 346px; }
#googleMapColumnRight{ float: left; width: 330px; }
#footer{ margin: 10px 0 10px 0; padding: 0 21px 10px 21px; overflow: hidden; }
#footerInner{ background-color: #CB2229; text-align: center; overflow: hidden; }

/***************************
*       SPACERS etc.       *
***************************/

.hide{ display: none; } /* Use this to hide something in the page */
.hidden{ visibility: hidden; } /* Use this to hide something but still reserve the space in the page */

.floatLeft{ float:left; }
.floatRight{ float:right; }

.clearFloat{ clear:both; height:1px; overflow:hidden; line-height:1%; font-size:0px; margin-bottom:-1px; }

/* Horizontal spacers */
.hSpacer1{ background: transparent;height:1px; width:1px; float:left; overflow:hidden;}
.hSpacer2{ background: transparent;height:2px; width:2px; float:left; overflow:hidden;}
.hSpacer3{ background: transparent;height:3px; width:3px; float:left; overflow:hidden;}
.hSpacer4{ background: transparent;height:4px; width:4px; float:left; overflow:hidden;}
.hSpacer5{ background: transparent;height:5px; width:5px; float:left; overflow:hidden;}
.hSpacer6{ background: transparent;height:6px; width:6px; float:left; overflow:hidden;}
.hSpacer7{ background: transparent;height:7px; width:7px; float:left; overflow:hidden;}
.hSpacer8{ background: transparent;height:8px; width:8px; float:left; overflow:hidden;}
.hSpacer9{ background: transparent;height:9px; width:9px; float:left; overflow:hidden;}
.hSpacer10{ background: transparent;height:10px; width:10px; float:left; overflow:hidden;}
.hSpacer11{ background: transparent;height:10px; width:11px; float:left; overflow:hidden;}
.hSpacer12{ background: transparent;height:10px; width:12px; float:left; overflow:hidden;}
.hSpacer13{ background: transparent;height:10px; width:13px; float:left; overflow:hidden;}
.hSpacer14{ background: transparent;height:10px; width:14px; float:left; overflow:hidden;}
.hSpacer15{ background: transparent;height:10px; width:15px; float:left; overflow:hidden;}
.hSpacer16{ background: transparent;height:10px; width:16px; float:left; overflow:hidden;}
.hSpacer17{ background: transparent;height:10px; width:17px; float:left; overflow:hidden;}
.hSpacer18{ background: transparent;height:10px; width:18px; float:left; overflow:hidden;}
.hSpacer19{ background: transparent;height:10px; width:19px; float:left; overflow:hidden;}
.hSpacer20{ background: transparent;height:10px; width:20px; float:left; overflow:hidden;}
.hSpacer21{ background: transparent;height:10px; width:21px; float:left; overflow:hidden;}
.hSpacer22{ background: transparent;height:10px; width:22px; float:left; overflow:hidden;}
.hSpacer23{ background: transparent;height:10px; width:23px; float:left; overflow:hidden;}
.hSpacer24{ background: transparent;height:10px; width:24px; float:left; overflow:hidden;}
.hSpacer25{ background: transparent;height:10px; width:25px; float:left; overflow:hidden;}
.hSpacer26{ background: transparent;height:10px; width:26px; float:left; overflow:hidden;}
.hSpacer27{ background: transparent;height:10px; width:27px; float:left; overflow:hidden;}
.hSpacer28{ background: transparent;height:10px; width:28px; float:left; overflow:hidden;}
.hSpacer29{ background: transparent;height:10px; width:29px; float:left; overflow:hidden;}
.hSpacer30{ background: transparent;height:10px; width:30px; float:left; overflow:hidden;}
.hSpacer31{ background: transparent;height:10px; width:31px; float:left; overflow:hidden;}
.hSpacer32{ background: transparent;height:10px; width:32px; float:left; overflow:hidden;}
.hSpacer33{ background: transparent;height:10px; width:33px; float:left; overflow:hidden;}
.hSpacer34{ background: transparent;height:10px; width:34px; float:left; overflow:hidden;}
.hSpacer35{ background: transparent;height:10px; width:35px; float:left; overflow:hidden;}
.hSpacer36{ background: transparent;height:10px; width:36px; float:left; overflow:hidden;}
.hSpacer37{ background: transparent;height:10px; width:37px; float:left; overflow:hidden;}
.hSpacer38{ background: transparent;height:10px; width:38px; float:left; overflow:hidden;}
.hSpacer39{ background: transparent;height:10px; width:39px; float:left; overflow:hidden;}
.hSpacer40{ background: transparent;height:10px; width:40px; float:left; overflow:hidden;}
.hSpacer41{ background: transparent;height:10px; width:41px; float:left; overflow:hidden;}
.hSpacer42{ background: transparent;height:10px; width:42px; float:left; overflow:hidden;}
.hSpacer43{ background: transparent;height:10px; width:43px; float:left; overflow:hidden;}
.hSpacer44{ background: transparent;height:10px; width:44px; float:left; overflow:hidden;}
.hSpacer45{ background: transparent;height:10px; width:45px; float:left; overflow:hidden;}
.hSpacer46{ background: transparent;height:10px; width:46px; float:left; overflow:hidden;}
.hSpacer47{ background: transparent;height:10px; width:47px; float:left; overflow:hidden;}
.hSpacer48{ background: transparent;height:10px; width:48px; float:left; overflow:hidden;}
.hSpacer49{ background: transparent;height:10px; width:49px; float:left; overflow:hidden;}
.hSpacer50{ background: transparent;height:10px; width:50px; float:left; overflow:hidden;}

/* Vertical spacers */
.vSpacer1{ background: transparent;height:1px; width:10px; clear:both; overflow:hidden;}
.vSpacer2{ background: transparent;height:2px; width:10px; clear:both; overflow:hidden;}
.vSpacer3{ background: transparent;height:3px; width:10px; clear:both; overflow:hidden;}
.vSpacer4{ background: transparent;height:4px; width:10px; clear:both; overflow:hidden;}
.vSpacer5{ background: transparent;height:5px; width:10px; clear:both; overflow:hidden;}
.vSpacer6{ background: transparent;height:6px; width:10px; clear:both; overflow:hidden;}
.vSpacer7{ background: transparent;height:7px; width:10px; clear:both; overflow:hidden;}
.vSpacer8{ background: transparent;height:8px; width:10px; clear:both; overflow:hidden;}
.vSpacer9{ background: transparent;height:9px; width:10px; clear:both; overflow:hidden;}
.vSpacer10{ background: transparent;height:10px; width:10px; clear:both; overflow:hidden;}
.vSpacer11{ background: transparent;height:11px; width:10px; clear:both; overflow:hidden;}
.vSpacer12{ background: transparent;height:12px; width:10px; clear:both; overflow:hidden;}
.vSpacer13{ background: transparent;height:13px; width:10px; clear:both; overflow:hidden;}
.vSpacer14{ background: transparent;height:14px; width:10px; clear:both; overflow:hidden;}
.vSpacer15{ background: transparent;height:15px; width:10px; clear:both; overflow:hidden;}
.vSpacer16{ background: transparent;height:16px; width:10px; clear:both; overflow:hidden;}
.vSpacer17{ background: transparent;height:17px; width:10px; clear:both; overflow:hidden;}
.vSpacer18{ background: transparent;height:18px; width:10px; clear:both; overflow:hidden;}
.vSpacer19{ background: transparent;height:19px; width:10px; clear:both; overflow:hidden;}
.vSpacer20{ background: transparent;height:20px; width:10px; clear:both; overflow:hidden;}
.vSpacer21{ background: transparent;height:21px; width:10px; clear:both; overflow:hidden;}
.vSpacer22{ background: transparent;height:22px; width:10px; clear:both; overflow:hidden;}
.vSpacer23{ background: transparent;height:23px; width:10px; clear:both; overflow:hidden;}
.vSpacer24{ background: transparent;height:24px; width:10px; clear:both; overflow:hidden;}
.vSpacer25{ background: transparent;height:25px; width:10px; clear:both; overflow:hidden;}
.vSpacer26{ background: transparent;height:26px; width:10px; clear:both; overflow:hidden;}
.vSpacer27{ background: transparent;height:27px; width:10px; clear:both; overflow:hidden;}
.vSpacer28{ background: transparent;height:28px; width:10px; clear:both; overflow:hidden;}
.vSpacer29{ background: transparent;height:29px; width:10px; clear:both; overflow:hidden;}
.vSpacer30{ background: transparent;height:30px; width:10px; clear:both; overflow:hidden;}
.vSpacer31{ background: transparent;height:31px; width:10px; clear:both; overflow:hidden;}
.vSpacer32{ background: transparent;height:32px; width:10px; clear:both; overflow:hidden;}
.vSpacer33{ background: transparent;height:33px; width:10px; clear:both; overflow:hidden;}
.vSpacer34{ background: transparent;height:34px; width:10px; clear:both; overflow:hidden;}
.vSpacer35{ background: transparent;height:35px; width:10px; clear:both; overflow:hidden;}
.vSpacer36{ background: transparent;height:36px; width:10px; clear:both; overflow:hidden;}
.vSpacer37{ background: transparent;height:37px; width:10px; clear:both; overflow:hidden;}
.vSpacer38{ background: transparent;height:38px; width:10px; clear:both; overflow:hidden;}
.vSpacer39{ background: transparent;height:39px; width:10px; clear:both; overflow:hidden;}
.vSpacer40{ background: transparent;height:40px; width:10px; clear:both; overflow:hidden;}
.vSpacer41{ background: transparent;height:41px; width:10px; clear:both; overflow:hidden;}
.vSpacer42{ background: transparent;height:42px; width:10px; clear:both; overflow:hidden;}
.vSpacer43{ background: transparent;height:43px; width:10px; clear:both; overflow:hidden;}
.vSpacer44{ background: transparent;height:44px; width:10px; clear:both; overflow:hidden;}
.vSpacer45{ background: transparent;height:45px; width:10px; clear:both; overflow:hidden;}
.vSpacer46{ background: transparent;height:46px; width:10px; clear:both; overflow:hidden;}
.vSpacer47{ background: transparent;height:47px; width:10px; clear:both; overflow:hidden;}
.vSpacer48{ background: transparent;height:48px; width:10px; clear:both; overflow:hidden;}
.vSpacer49{ background: transparent;height:49px; width:10px; clear:both; overflow:hidden;}
.vSpacer50{ background: transparent;height:50px; width:10px; clear:both; overflow:hidden;}