@charset "UTF-8";

* {
	margin: 0px;
	padding: 0px;
	}

li {
	margin-left: 2em;
	}

body {
	background-color: white;
	}

body,td,th {
	font-size: 1em;
	font-family: "Arial", sans-serif;
	}
	
.clear {
	clear: both;
	}

p {
	padding-bottom: 1em;
	}

a {
	color: #033b01;
	font-weight: bold;
	}

a:hover {
	text-decoration: none;
	}

a img {
	border: none;
	}

h1 {
	font-size: 14px;
	color: #033b01;
	text-align: center;
	}

h2, h3, h4, h5 {
	font-family: "Cambria", "Garamond", "Georgia", serif;
	}
	
h2 {
	margin-bottom: 10px;
	font-size: 24px;
	}
	
h3 {
	margin: 10px 0px;
	font-size: 18px;
	}
	
.center {
	text-align: center;
	}
	
.nowrap {
	white-space: nowrap;
	}

.past {
	text-decoration: line-through;
	}

.notice {
	border-top: 3px solid red;
	border-bottom: 3px solid red;
	background-color: pink;
	padding: 1em;
	clear: both;
	}
	
/******************* wrapper *************************/

#wrapper {
	margin: 0px auto;
	width: 990px;
	background-color: white;
	}
	
#wrapper .leftShadowed {
	background: url("../img/wrapper-shadow-left.gif") top left repeat-y;
	padding-left: 20px;
	}
	
#wrapper .rightShadowed {
	background: url("../img/wrapper-shadow-right.gif") top right repeat-y;
	padding-right: 20px;
	}

/********************** columns ************************/

.leftColumn, .rightColumn {
	width: 207px;
	float: left;
	}

.leftColumn .content, .rightColumn .content {
	margin: 0px 20px;
	}
	
.middleColumn {
	width: 506px;
	margin: 0px 15px;
	float: left;
	}
	
.subpageColumn {
	width: 713px;
	}
	
/********************** top stripe ************************/

#topStripe {
	padding-top: 20px;
	}
	
	#topStripe .leftColumn .content a {
		display: block;
		width: 100%;
		
		vertical-align: top;
		height: 170px;
		background: url("../img/top-logo-wch.gif") top center no-repeat;
		}
	
	#topStripe .middleColumn {
		padding-top: 131px;
		height: 39px;
		background: url("../img/top-motif.gif") top center no-repeat;
		position: relative;
		text-align: center;
		}
		
		#topStripe .middleColumn a {
			width: 68px;
			height: 97px;
			text-decoration: none;
			display: inline-block;
			position: absolute;
			top: 13px;
			left: 50%;
			}
			
			#topStripe .middleColumn a.yipman {
				margin-left: -219px;
				background: url('../img/top-motif-yipman.gif') no-repeat top left;
				}
			
			#topStripe .middleColumn a.lokyiu {
				margin-left: -98px;
				background: url('../img/top-motif-lokyiu.gif') no-repeat top left;
				}
			
			#topStripe .middleColumn a.blech {
				margin-left: 25px;
				background: url('../img/top-motif-blech.gif') no-repeat top left;
				}
			
			#topStripe .middleColumn a.sifu {
				margin-left: 149px;
				background: url('../img/top-motif-sifu.gif') no-repeat top left;
				}

	#topStripe .rightColumn .content a {
		display: block;
		width: 100%;
		
		vertical-align: top;
		height: 85px;
		background: url("../img/top-logo-ely.gif") center 10px no-repeat;
		padding-top: 85px;
		
		text-align: center;
		font-size: 10px;
		text-decoration: none;
		}

	#topStripe .rightColumn .content a span {
		text-transform: uppercase;
		}
		
	#topStripe .rightColumn .content a:hover {
		text-decoration: underline;
		}
	
/************************ green lines ***********************/

.smallGreenLine {
	border-bottom: 1px solid #81c56e;
	}
	
/********************** main content *************************/

#mainContent {
	overflow: hidden;
	}
	
#mainContent .leftColumn, #mainContent .rightColumn {
	background-color: #f1fed7;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	}
	
#mainContent .leftColumn .transitionTop, #mainContent .rightColumn .transitionTop {
	min-height: 141px;
	background: url("../img/green-column-transitiontop.gif") top left repeat-x;
	}

#mainContent .leftColumn .transitionTop .shadow {
	background: url("../img/green-column-left-shadow.gif") top right repeat-y;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	height: 100%;
	}

#mainContent .rightColumn .transitionTop .shadow {
	background: url("../img/green-column-right-shadow.gif") top left repeat-y;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	height: 100%;
	}

#mainContent .leftColumn .transitionTop .shadow .cornerTop {
	float: right;
	background: url("../img/green-column-transition-topleft-corner.gif") top right no-repeat;
	width: 21px;
	height: 122px;
	}

#mainContent .rightColumn .transitionTop .shadow .cornerTop {
	float: left;
	background: url("../img/green-column-transition-topright-corner.gif") top left no-repeat;
	width: 21px;
	height: 122px;
	}

/********************* main menu **********************/

#mainMenu {
	border-top: 1px solid #81c56e;
	margin: 0px 20px;
	}
	
#mainMenu a {
	text-decoration: none;
	}

#mainMenu a:hover, #mainMenu li.active li a:hover {
	color: #0ccb05;
	text-decoration: underline;
	}

#mainMenu li {
	text-transform: uppercase;
	border-bottom: 1px solid #81c56e;
	list-style-type: none;
	padding: 5px 0px;
	
	font-size: 14px;
	margin: 0px;
	}

#mainMenu li.active a {
	color: #0ccb05;
	}
	
#mainMenu li.active li a {
	color: black;
	}
	
#mainMenu li ul {
	margin-top: 5px;
	}
	
#mainMenu li li {
	text-transform: none;
	border: none;
	padding: 0px 0px 3px 10px;
	
	font-size: 11px;
	line-height: 15px;
	}

/************************ news *************************/

#news {
	margin: 0px 20px;
	border-top: 1px solid #81c56e;
	overflow: hidden;
	font-size: 11px;
	}

#newsHeading, #news .item {
	border-bottom: 1px solid #81c56e;
	}
	
#newsHeading {
	padding: 5px 0px;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	}

#newsHeading a {
	text-decoration: none;
	}
	
#news .item {
	padding-top: 10px;
	}

#news .heading {
	font-weight: bold;
	padding-bottom: 1em;
	}

#news .archiveLink {
	padding-top: 10px;
	text-align: center;
	}
	
/******************* main content ***********************/

#content {
	border-top: 2px solid #81c56e;
	padding-top: 10px;
	}

#content p, #content td, #content th {
	font-size: 14px;
	line-height: 20px;
	
	text-align: justify;
	}
	
#content td.center {
	text-align: center;
	}
	
#content .floatright {
	float: right;
	margin: 5px 0px 5px 10px;
	}
	
#content .floatleft {
	float: left;
	margin: 5px 10px 5px 0px;
	}

#content .image {
	width: 162px;
	text-align: center;
	border: 1px solid #cccccc;
	}
	
#content .image img {
	margin: 5px;
	}

#content .image p {
	font-size: 9px;
	text-align: center;
	padding: 0px;
	line-height: 1.5em;
	margin-bottom: 5px;
	}

#content #hpGallery {
	width: 100%;
	border-collapse: separate;
	}

#content #hpGallery .image {
	vertical-align: top;
	padding: 5px;
	}

#content #hpGallery .image img {
	margin: 0px;
	}
	
#content .hpblock {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #81c56e;
	}
	
#content table {
	margin: 0px auto 20px;
	border-collapse: collapse;
	}

#content table th, #content table td {
	margin: 0px;
	padding: 2px 10px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	}

#content table.plain {
	margin: 0px 0px 20px;
	}
	
#content table.plain th, #content table.plain td {
	border: 0px;
	}
	
#content table.full {
	}
	
#content table th {
	background-color: #b1ce97;
	}
	
/******************* hp schedules *************************/

#schedule {
	width: 100%;
	margin: 0px;
	border-collapse: separate;
	}
	
table#schedule th, table#schedule td {
	border-top: 0px;
	border-bottom: 0px;
	padding: 0px;
	}

#schedule td {
	width: 20%;
	background-color: #f1fed7;
	border: 2px solid white;
	vertical-align: top;
	}

#schedule p {
	text-align: center;
	line-height: normal;
	}

#schedule p.time {
	padding-top: 0.5em;
	font-size: 14px;
	font-weight: bold;
	}

#schedule p.place, #schedule p.kids {
	font-size: 11px;
	}

#schedule p.place em {
	color: #033b01;
	font-size: 14px;
	font-weight: bold;
	font-style: normal;
	}
	
/**************** menu sub items ******************/

#content .menuSubItems {
	list-style-type: none;
	}

#content .menuSubItems li {
	margin: 0px;
	margin-bottom: 10px;
	}

#content .menuSubItems img, #content .menuSubItems .photoSpacer {
	display: -moz-inline-box;
	display: inline-block;
	width: 100px;
	
	padding: 5px;
	margin-right: 10px;
	border: 1px solid white;
	
	vertical-align: top;
	}
	
#content .menuSubItems img {
	border: 1px solid #cccccc;
	}
	
/************** location breadcrumbs *****************/

#content .locationBreadcrumbs {
	font-size: 11px;
	list-style-type: none;
	}

#content .locationBreadcrumbs li {
	margin-left: 0px;
	margin-bottom: 10px;
	float: left;
	}

/************************** footer ******************************/

#bottomStripe {
	margin-left: -20px;
	margin-right: -20px;
	
	height: 35px;
	background: url('../img/footer-transition.gif') top left repeat-x;
	
	position: absolute;
	width: 990px;
	}

#bottomStripe .leftShadow, #bottomStripe .rightShadow, #bottomStripe .rightCorner {
	width: 227px;
	height: 35px;
	}

#bottomStripe .leftShadow {
	float: left;
	background: url('../img/footer-left-shadow.gif') top left no-repeat;
	}

#bottomStripe .rightShadow, #bottomStripe .rightCorner {
	float: right;
	}

#bottomStripe .rightShadow {
	background: url('../img/footer-right-shadow.gif') top left no-repeat;
	}

#bottomStripe .rightCorner {
	background: url('../img/footer-right-corner.gif') top left no-repeat;
	}

#bottomStripe p {
	background-color: white;
	
	text-align: center;
	font-size: 10px;
	color: #666666;
	
	padding-top: 35px;
	}	

#footer {
	width: 100%;
	text-align: center;
	font-size: 10px;
	color: #666666;
	
	margin-top: 35px;
	}
	
/**************************** background popup ******************************/

#popup {
	display: none;
	position: absolute;
	
	text-align: center;
	
	height: 100%;
	width: 100%;
	
	top: 0;
	left: 0;
	}

#popup .grey {
	position: fixed;
	width: 100%;
	height: 100%;
	
	left: 0;
	top: 0;
	
	opacity: 0.9;
	background-color: #000000;
	}
	
#popup table {
	height: 100%;
	width: 100%;
	
	position: fixed;
	top: 0;
	left: 0;
	}

#popup table #popupContent {
	text-align: center;
	vertical-align: middle;
	}
	
#popup table #popupContent .previous, #popup table #popupContent .next {
	display: -moz-inline-box;
	display: inline-block;
	
	width: 50px;
	height: 50px;
	
	position: relative;
	top: 25px;
	}

#popup table #popupContent .previous a, #popup table #popupContent .next a {
	display: -moz-inline-box;
	display: inline-block;
	
	width: 50px;
	height: 50px;
	}
	
#popup table #popupContent .previous a {
	background: url('../img/image-left.png') bottom left no-repeat;
	}

#popup table #popupContent .next a {
	background: url('../img/image-right.png') bottom left no-repeat;
	}

#popup table #popupContent .image {
	width: 660px;
	height: 100%;
	display: inline-block;
	}
	
#popup table #popupContent img {
	border: 10px solid white;
	vertical-align: middle;
	}