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

Basics have been updated as of 02-12-2009. Customize away.

*/

a[href^="http://"]:not([href*="http://www.chessmasterconnections.org"]) {
    background: top left no-repeat url("../cssimages/external-icon.png"); 
    padding-left: 21px;
}
a[href$=".pdf"] { background: top left no-repeat url("../cssimages/pdf-icon.png") transparent; padding-left: 16px; }
#twitter a[href^="http://"]:not([href*="http://www.chessmasterconnections.org"]) {
    background: none; 
    padding-left: 0;
}

/* ! /// Image Floats /// */
span.photoright, span.photoleft, span.photoreg { 
	color: #666; 
	font: italic 12px/14px LucidaGrande, "Lucida Grande", Helvetica, Arial, sans-serif;
	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 { 
	min-width: 120px; 
	max-width: 240px; 
	padding-bottom: 5px; 
}
span.photoreg img {
	min-width: 120px; 
	max-width: 540px; 
	padding-bottom: 5px; 
}


/* ! /// 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; 
	max-width: 220px; 
	max-height: 200px; 
	border: 1px solid #ccc;
	padding: 2px; 
	text-align: center; 
	font: normal 9px/12px LucidaGrande, "Lucida Grande", Helvetica, Arial, sans-serif;
}
.gallery_reg { 
	margin: 0 0 10px 0; 
	max-width: 480px; 
	max-height: 380px; 
}
	* html .gallery_right, * html .gallery_left { width: 220px; }
	* html .gallery_reg { width: 480px; }
a.thumb_photo, a.thumb_photo img { 
	display: block; 
	max-width: 220px; 
	max-height: 180px; 
}
	.gallery_reg a.thumb_photo, .gallery_reg a.thumb_photo img { max-width: 480px; max-height: 360px; }
a.thumb_photo img { padding-bottom: 3px; }
	* html a.thumb_photo, * html a.thumb_photo img { width: 220px; }
	* html .gallery_reg a.thumb_photo, * html .gallery_reg a.thumb_photo img { width: 480px; }


/* ! /// Carousel Styles using jqueryCarouselLite /// */
.carouselwrap_left, .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; 
	font: normal 12px/18px Arial, Helvetica, sans-serif; 
}
.carouselwrap_left .carousel, .carouselwrap_right .carousel { width: 240px; height: 180px; }
.carouselwrap_left .carousel ul, .carouselwrap_right .carousel {  
	overflow: hidden;
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
	height: 180px; 
}
.carouselwrap_left .carousel li, .carouselwrap_right .carousel li, .carouselwrap_reg .carousel li { background-color: #222; }
.carouselwrap_left .carousel li img, .carouselwrap_right .carousel li img { max-width: 240px; overflow: hidden; }

.carousel a.previous, .carousel a.next {
	font: bold 12px/16px Arial, Helvetica, sans-serif; 
	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; }
.carousel a.previous { float: left; }
.carousel a.next { float: right; }
.carouselwrap_reg, .carouselwrap_left, .carouselwrap_right { font-size: 10px; }

.carouselwrap_reg, .carouselwrap_reg .carousel, .carouselwrap_reg .carousel ul, .carouselwrap_reg .carousel li { width: 480px; height: 320px; }
.carouselwrap_reg .carousel li { text-align:  center; }
.carouselwrap_reg .carousel li img { max-width: 480px; max-height: 320px; overflow: hidden; }

/* For the Homepage carousel */
body#home .carouselwrap_reg .carousel, body#home .carouselwrap_reg .carousel ul, body#home .carouselwrap_reg .carousel li { width: 500px; height: 330px; }
body#home .carouselwrap_reg .carousel li img { width: 500px; overflow: hidden; }
body#home .carouselwrap_reg span { display: none; }
body#home .carouselwrap_reg .carouselwrap_reg, body#home .carouselwrap_right, body#home .carouselwrap_left { padding: 0 0 15px 0; }

body#home #announcement .carousel { float: left; }
	body#home #announcement .carousel, body#home #announcement .carousel ul, body#home #announcement .carousel li { 
		width: 620px; 
		height: 60px; 
		background-color: transparent; 
	}
	body#home #announcement #announcebuttons { float: left; width: 92px; padding: 44px 8px 0 0; text-align: center; }
	body#home #announcement #announcebuttons a.vertprev, body#home #announcement #announcebuttons a.vertnext {
		color: #056; 
		text-transform: uppercase; 
		font: normal 10px/12px LucidaGrande, "Lucida Grande", Helvetica, Arial, sans-serif;
		letter-spacing: 1px;  
	}
	body#home #announcement #announcebuttons a.vertprev:hover, body#home #announcement #announcebuttons a.vertnext:hover { color: #fff; }
	body#home #announcement #announcebuttons a.vertprev { margin: 0 10px 0 0; }


/* ! /// Product styles /// */
.product { 
	border: 1px solid #ccc; 
	padding: 5px; 
	margin: 0 10px 10px 0; 
	background: top right repeat-y url("../cssimages/product_back.png") #fff; 
}
.product h3 { }
.product table { width: 100%; }
.product table td a.thumb_photo { padding: 0 10px 0 0; }
.product table td form { }
.product table td form input[name= "submit"] { }


/* ! /// Calendar styles /// */
table#minicalendarTable, table.calendarTable {
	width: 100%;  
	border: none; 
}
table#minicalendarTable { border-left: 1px solid #ddd;  }
	table#minicalendarTable th, table.calendarTable th {  }
		table.calendarTable th a {
			font-size: 12px; 
			color: #278; 
			text-decoration: none; 
			font-weight: bolder; 
		}
		table.calendarTable th a:hover { color: #000; }
		table#minicalendarTable th, table.calendarTable th h3 {
			font-size: 12px; 
			letter-spacing: 1px; 
			text-transform: uppercase; 
			text-align: center; 
			background-color: transparent; 
		}
			table#minicalendarTable th a { 
				font-size: 9px; 
			}
		table.calendarTable th h3 {
			font-size: 14px;
			color: #000; 
			background-color: transparent; 
		}
	table.calendarTable td {
		width: 14%; 
		padding: 2px 4px; 
		margin: 0 10px 0 0; 
	}
	table#minicalendarTable td { 
		width: 14%; 
		color: #666; 
		text-align: center; 
		padding: 1px 0; 
	}
	table#minicalendarTable td, table.calendarTable td {
		border-right: 1px solid #ddd; 
		border-bottom: 1px solid #aaa; 
	}
		table.calendarTable td.calendarHeader {
			border-top: 1px solid #ccc;
			background-color: #ddd; 
			color: #000; 
			font-size: 10px; 
			letter-spacing: 1px; 
			text-transform: uppercase; 
		}
		table#minicalendarTable td.calendarHeader {
			color: #278; 
			font-size: 10px; 
			font-weight: bold; 
			text-transform: uppercase; 
			padding: 0 0 1px 0; 
		}
		table.calendarTable td.calendar {
			font-weight: bold; 
		}
		table#minicalendarTable td.calendarToday {
			border: 1px solid #489; 
			background-color: #489; 
			color: #fff;   
		}
		table.calendarTable td.calendarToday {
			background-color: #fd6; /* lighter light orange */
		}
	table.calendarTable td a {
		display: block; 
		padding: 2px 3px; 
		margin: 0 0 3px 0; 
		font-weight: normal; 
		background-color: #eee; 
		color: #278;
		border-bottom: 1px solid #278; 
	}
		table.calendarTable td a:hover { background-color: #fff; color: #333; }
	table#minicalendarTable td a {
		background-color: #fb3; /* light orange */
		font-weight: bold; 
		color: #222; 
		padding: 2px 5px 1px 5px; 
	}
	table#minicalendarTable td a:hover {
		background-color: #222; 
		color: #fb3; 
	}
	
	table.calendarTable td a.tournament_event { background-color: #489; color: #fff; }
	table.calendarTable td a.tournament_event:hover { background-color: #000; color: #489; }
	
/* ! Dummy Proof users of Tiny-MCE */
pre { white-space: normal; }
address { font-style: italic; }
code { font-family: Courier, "Courier New", CourierNew, monospace; }