/* Styles for the Calendar, Image replacement and the Galleries 
Every installation of the HCd backend needs these to function properly. 

Basics have been updated 03-11-2009. Customize away... 

*/

/* ! ---- Image Floats ---- */
span.photoright, span.photoleft, span.photoreg { 
	color: #666; 
	font-size: .84em;
	text-align: right;
}
span.photoright { float: right; margin: 0 -10px 0 8px; }
span.photoleft { float: left; margin: 0 8px 0 -10px; }
span.photoright img, span.photoleft img, span.photoreg { padding-bottom: 6px; }
span.photoright img, span.photoleft img { min-width: 120px; max-width: 240px; }
	* html span.photoright img, * html span.photoleft img { 
		width: expression( this.scrollWidth < 120 ? "120px" : "inherit" );
		width: expression( this.scrollWidth > 240 ? "240px" : "inherit" ); 
	}
span.photoreg img { max-width: 520px; }
	* html span.photoreg img { width: expression( this.scrollWidth > 520 ? "520px" : "inherit" ); }


.product {  }
.product a.product_thumb { padding-right: 8px; }
.product form {  }
	.product table { background-color: #ece5d9; }
	#text .product td { padding: 6px; }
	#text .product h3 { color: #fff; background-color: #597; padding: 5px 8px; }
	
	/* ! Custom for Steere House */
	#product_22 h3 {
		/* The Donate product */
		height: 28px; 
		background: top left no-repeat url("../cssimages/donateproduct_header.png") #597; 
		text-indent: -9999em; 
	}

/* ! ---- Gallery Styles using Lightbox ---- */
a.gallery_photo, .gallery_photo { display: none; }
.gallery_reg { float: none; } 
.gallery_right { float: right; margin: 0 0 5px 8px; }
.gallery_left { float: left; margin: 0 8px 5px 0; } 

.gallery_reg, .gallery_right, .gallery_left { 
	display: inline-block; 
	border: 1px solid #ccc;
	padding: 2px; 
	text-align: center; 
	font: normal .75em LucidaGrande, "Lucida Grande", Helvetica, Arial, sans-serif;
}
.gallery_reg { margin: 0 0 10px 0; }
a.thumb_photo, a.thumb_photo img { 
	display: block; 
	width: 220px; 
}
	.gallery_reg a.thumb_photo, .gallery_reg a.thumb_photo img { max-width: 438px; }
		* html a.thumb_photo, * html a.thumb_photo img { width: expression( this.scrollWidth > 220 ? "220px" : "inherit" ); }
		* html .gallery_reg a.thumb_photo, * html .gallery_reg a.thumb_photo img { width: expression( this.scrollWidth > 438 ? "438px" : "inherit" ); }
a.thumb_photo img { padding-bottom: 0; margin-bottom: 3px; }


/* ! ---- Carousel Styles using jqueryCarouselLite ---- */
div.carouselwrap_left, div.carouselwrap_right { 
	/* Set the width of the container here, as well as in the UL itself (helps it all render better). Without a width, the Carousel will fill the entire container. */
	width: 240px; 
	height: 180px; 
	float: right; 
	margin: 0 0 10px 10px; 
}
.carousel { width: 240px; height: 180px; }
.carousel ul {  
	overflow: hidden;
	list-style-type: none; 
	padding: 0; 
	margin: 0;  
}
.carousel ul { height: 180px; }
.carousel li { background-color: #222; }
.carousel li img { width: 240px; overflow: hidden; }

.carousel a.previous, .carousel a.next {
	font-weight: 900; 
	background-color: #eee; 
	color: #000; 
	text-decoration: none;
	padding: 4px 6px 0 6px; 
	height: 18px; 
	margin: 0 0 -22px 0; 
	position: relative; 
	top: -22px;
	overflow: visible;
	z-index: 100; 
	opacity: .8; 
}
	.carousel a.previous:hover, .carousel a.next:hover { opacity: 1; color: #c00; }
	* html .carousel a.previous, * html .carousel a.next { filter:alpha(opacity=80); }
	* html .carousel a.previous:hover, * html .carousel a.next:hover { filter:alpha(opacity=100); }
.carousel a.previous { float: left; }
.carousel a.next { float: right; }

div.carouselwrap_reg { width: 600px; height: 480px; }
div.carouselwrap_reg .carousel, div.carouselwrap_reg .carousel ul { width: 600px; height: 480px; } /* allow for the height of the caption */
div.carouselwrap_reg .carousel li, div.carouselwrap_reg .carousel img { width: 600px; overflow: hidden; }

	/* Homepage carousel */
	#homepage_gallery, #homepage_gallery .carousel, #homepage_gallery .carousel ul { width: 600px; height: 420px; }
	#homepage_gallery .carousel li, #homepage_gallery .carousel img  { width: 600px; height: 420px; overflow: hidden; }


/* ///- - - Calendar styles - - -/// */
table.calendarTable {
	width: 100%;  
	border: none; 
	border-collapse: collapse; 
}
	table.calendarTable th { }
		table.calendarTable th a {
			color: #a01; 
			border: none;
			font-size: 12px; 
			font-weight: bolder; 
		}
		table.calendarTable th a:hover { color: #222; }
		table.calendarTable th h3 { text-align: center; }
	table.calendarTable td {
		width: 14%; 
		padding: 2px 3px 4px 3px; 
		border-width: 0 1px 1px 1px; 
		border-style: solid; 
		border-color: #666 #999 #999 #ccc; 
	}
		table.calendarTable td.calendarHeader {
			background-color: #ddd; 
			color: #222; 
			font-size: 1em; 
			letter-spacing: 1px; 
			font-family: LucidaGrande, "Lucida Grande", LucidaSans, "Lucida Sans", LucidaSansUnicode, "Lucida Sans Unicode", Arial, sans-serif;
			text-transform: uppercase; 
		}
		table.calendarTable td.calendar {
			font-weight: bold; 
			font-family: LucidaGrande, "Lucida Grande", LucidaSans, "Lucida Sans", LucidaSansUnicode, "Lucida Sans Unicode", Arial, sans-serif;
		}
		table.calendarTable td.calendarToday {
			background-color: #ffc; 
			color: #a01; 
		}
	table.calendarTable td a { 
		display: block; 
		font-weight: normal; 
		border-bottom: 1px dotted #a01; 
	}
.event_details {
	border-bottom: 1px solid #597; 
	padding: 0 0 12px 0;
	margin: 0 0 22px 0; 
}
	
/* ! Dummy Proof users of Tiny-MCE */
pre { white-space: normal; }
address { font-style: italic; }
code { font-family: Courier, "Courier New", CourierNew, monospace; }