/*
Title: Betty and Milton Katz JCC of Cherry Hill, NJ
Style: General stylesheet
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: July 16, 2010
*/

/* ---[ css reset ]--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .rss_box {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1.55em; /* 12x1.55=18.6px */ font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1; color: #000}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal; padding: 6px; font-size: 12px}
em, .em {font-style: italic}
strong, .strong {font-weight: bold}
.big {font-size: 110%}
.small {font-size: 75%}
.l {float: left}
.r {float: right}
.clear {clear: both; font-size: 0; line-height: 0}
.center {text-align: center}
.none {padding: 0; border: 0 !Important}


/* ---[ link styles ]--------------------- */
a {color: #666; text-decoration: none}
a:link {color: #666}
a:visited {color: #666}
a:hover {text-decoration: underline}


/* ---[ structure ]--------------------- */
html, body {background: #f2f7fa url(images/shell/background.png) repeat-x; height: 100%; min-width: 760px; text-align: center; color: #666; font: normal 0.82em/1em Arial, Helvetica, sans-serif}
#center-on-page {width: auto; text-align: center}
#container {margin: 0 auto; width: 760px; overflow: hidden}

#header {height: 100px; width: 760px; display: block; margin-bottom: 15px}
	#logo, #photos {float: left}
	#logo {margin-right: 6px}

#main-area {text-align: left; width: 790px; padding: 0 0 20px 0}

/* ---[ left side ]--------------------- */
#left-side {float: left; width: 190px; display: block; margin-right: 10px}

	#register-online, #explore-the-jcc, #hours-and-schedules, #publications, #facility-rental, #jcc-links, #social-networks {color: #000; margin-top: 10px; font-size: 0 /* font-size removes extra space between divs in IE */}
	#left-side ul {padding: 0; margin: 0; list-style-type: none}
	#left-side li {padding: 0; margin: 0; padding: .15em 0}
	#left-side a:link {color: #000}
	#left-side .middle {padding: 6px 10px; width: 170px; font: normal 12px/1.25em Arial, Helvetica, sans-serif}
	
	#register-online .middle {background: transparent url(images/shell/register-online-background.gif) repeat-y}
	#register-online li {background: url(images/icons/bullet-blue.gif) 0 8px no-repeat; padding-left: 15px}

	#explore-the-jcc .middle {background: transparent url(images/shell/explore-the-jcc-background.gif) repeat-y}
	#explore-the-jcc li {background: url(images/icons/bullet-teal.gif) 0 8px no-repeat; padding-left: 15px}

	#hours-and-schedules .middle {background: transparent url(images/shell/hours-and-schedules-background.gif) repeat-y}
	#hours-and-schedules li {background: url(images/icons/bullet-green.gif) 0 8px no-repeat; padding-left: 15px}

	#publications .middle {background: transparent url(images/shell/publications-background.gif) repeat-y}
	#publications li {background: url(images/icons/bullet-yellow.gif) 0 8px no-repeat; padding-left: 15px}

	#facility-rental .middle {background: transparent url(images/shell/facility-rental-background.gif) repeat-y}
	#facility-rental li {background: url(images/icons/bullet-orange.gif) 0 8px no-repeat; padding-left: 15px}

	#jcc-links .middle {background: transparent url(images/shell/jcc-links-background.gif) repeat-y}
	#jcc-links li {background: url(images/icons/bullet-pink.gif) 0 8px no-repeat; padding-left: 15px}

	#hours-and-schedules-nav-toggle, #publications-nav-toggle, #facility-rental-nav-toggle, #jcc-links-nav-toggle {cursor: pointer}

	#social-networks {margin-bottom: 20px}

	.clear-nav {clear: both; margin-top: -10px /* fixes margin height issue in IE */}


/* ---[ right side ]--------------------- */
#right-side {width: 562px; float: left; font-size: 0 /* font-size removes extra space between divs in IE */}

	#top-navigation {width: 560px; height: 30px}

		.top-navigation {width: 560px; height: 30px; background: url(images/shell/top-navigation.png) no-repeat; position: absolute}
		.top-navigation li {display: inline}
		.top-navigation li a:link, .top-navigation li a:visited {position: absolute; top: 0; height: 30px; text-indent: -9000px; overflow: hidden}

		.top-navigation .home a:link, .top-navigation .home a:visited {left: 0px; width: 71px}
		.top-navigation .home a:hover, .top-navigation .home a:focus {background: url(images/shell/top-navigation.png) no-repeat 0px -30px}
		.top-navigation .home a:active {background: url(images/shell/top-navigation.png) no-repeat 0px -60px}

		.top-navigation .support a:link, .top-navigation .support a:visited {left: 71px; width: 75px}
		.top-navigation .support a:hover, .top-navigation .support a:focus {background: url(images/shell/top-navigation.png) no-repeat -71px -30px}
		.top-navigation .support a:active {background: url(images/shell/top-navigation.png) no-repeat -71px -60px}

		.top-navigation .contact-us a:link, .top-navigation .contact-us a:visited {left: 146px; width: 94px}
		.top-navigation .contact-us a:hover, .top-navigation .contact-us a:focus {background: url(images/shell/top-navigation.png) no-repeat -146px -30px}
		.top-navigation .contact-us a:active {background: url(images/shell/top-navigation.png) no-repeat -146px -60px}

		.top-navigation .membership a:link, .top-navigation .membership a:visited {left: 240px; width: 100px}
		.top-navigation .membership a:hover, .top-navigation .membership a:focus {background: url(images/shell/top-navigation.png) no-repeat -240px -30px}
		.top-navigation .membership a:active {background: url(images/shell/top-navigation.png) no-repeat -240px -60px}

		.top-navigation .my-account a:link, .top-navigation .my-account a:visited {left: 340px; width: 100px}
		.top-navigation .my-account a:hover, .top-navigation .my-account a:focus {background: url(images/shell/top-navigation.png) no-repeat -340px -30px}
		.top-navigation .my-account a:active {background: url(images/shell/top-navigation.png) no-repeat -340px -60px}

		.top-navigation .shopping-cart a:link, .top-navigation .shopping-cart a:visited {left: 440px; width: 120px}
		.top-navigation .shopping-cart a:hover, .top-navigation .shopping-cart a:focus {background: url(images/shell/top-navigation.png) no-repeat -440px -30px}
		.top-navigation .shopping-cart a:active {background: url(images/shell/top-navigation.png) no-repeat -440px -60px}


	/* ---[ search bar ]--------------------- */
	#search-bar {width: 560px; height: 30px; margin-top: 10px; padding: 0; background: #f2f7fa url(images/shell/search-bar.png) no-repeat}
		#search-bar .interest {margin: 8px 6px 0 89px; height: 14px; width: 226px; background: #fff; border: 0; font-size: 11px; float: left}
		#search-bar .age {margin: 7px 6px 0 19px; height: 14px; width: 84px; background: #fff; border: 0; font-size: 11px; float: left}
		#search-bar .keyword {margin: 7px 6px 0 21px; height: 14px; width: 57px; background: #fff; border: 0; font-size: 11px; float: left}
		#search-bar .search-button {width: 42px; height: 30px; border: 0; cursor: pointer; float: left}


	/* ---[ small news area ]--------------------- */
	#small-news {width: 560px; margin-top: 10px}
		#small-news1, #small-news2 {height: 153px; width: 255px; padding: 10px; background: #f2f7fa url(images/homepage/small-news/small-news-background.png) no-repeat; float: left}
		#small-news1 {margin-right: 10px}
		#small-news2 {overflow: hidden; font: normal 12px/1em Arial, Helvetica, sans-serif}
		

	/* ---[ constant contact sign up ]--------------------- */
	#enewsletter {width: 560px; height: 30px; margin-top: 10px; padding: 0; background: #f2f7fa url(images/shell/enewsletter.png) no-repeat}
		#enewsletter .form {margin: 7px 6px 0 327px; height: 14px; width: 181px; border: 0; background: #fff; font-size: 11px; float: left}
		#enewsletter .submit-button {margin: 0; height: 30px; width: 44px; border: 0; cursor: pointer; float: left}


	/* ---[ content ]--------------------- */
	#content {margin-top: 10px;}
	#content-middle {background: transparent url(images/shell/content-background.png) repeat-y; padding: 0 10px; font: normal 12px/1em Arial, Helvetica, sans-serif}


	/* ---[ what's hot ]--------------------- */
	#whats-hot1, #whats-hot2, #whats-hot3, #whats-hot4 {float: left; margin-top: 10px; height: 112px; width: 112px; padding: 10px}
	#whats-hot .black {background: #f2f7fa url(images/whats-hot/whats-hot-black.png) no-repeat}
	#whats-hot .blue {background: #f2f7fa url(images/whats-hot/whats-hot-blue.png) no-repeat}
	#whats-hot .green {background: #f2f7fa url(images/whats-hot/whats-hot-green.png) no-repeat}
	#whats-hot .grey {background: #f2f7fa url(images/whats-hot/whats-hot-grey.png) no-repeat}
	#whats-hot .orange {background: #f2f7fa url(images/whats-hot/whats-hot-orange.png) no-repeat}
	#whats-hot .pink {background: #f2f7fa url(images/whats-hot/whats-hot-pink.png) no-repeat}
	#whats-hot .purple {background: #f2f7fa url(images/whats-hot/whats-hot-purple.png) no-repeat}
	#whats-hot .teal {background: #f2f7fa url(images/whats-hot/whats-hot-teal.png) no-repeat}
	#whats-hot .yellow {background: #f2f7fa url(images/whats-hot/whats-hot-yellow.png) no-repeat}
	#whats-hot1, #whats-hot2, #whats-hot3 {margin-right: 10px}


	/* ---[ sponsors ]--------------------- */
	#big-sponsor {margin-top: 10px; height: 71px; width: 560px; padding: 10px; background: #f2f7fa url(images/sponsors/big-sponsor-background.png) no-repeat}
	#small-sponsors {margin-top: 10px}
		#small-sponsor1, #small-sponsor2, #small-sponsor3, #small-sponsor4, #small-sponsor5, #small-sponsor6 {float: left; height: 71px; width: 255px; padding: 10px; background: #f2f7fa url(images/sponsors/small-sponsor-background.png) no-repeat}
		#small-sponsor1, #small-sponsor3, #small-sponsor5 {margin: 0 10px 0 0}
		#small-sponsor3, #small-sponsor4, #small-sponsor5, #small-sponsor6 {margin-top: 10px}


	/* ---[ calendar ]--------------------- */
	.calendar-label {background: #069; color: #fff; border: 1px solid #fff; padding: 2px 6px; font-weight: 800; font-size: 14px}
	.calendar-day {color: #fff; border: 1px solid #fff; letter-spacing: 1px; text-align: center; font-weight: 800; font-size: 11px; width: 20%}
	.calendar-time {border: 2px solid #fff; background: #f3f3f3; text-align: center; font-size: 11px}

/* ---[ content styles ]--------------------- */
#content-middle {text-align: left}
	#content-middle a {color: #e50278}
	#content-middle a:hover {color: #e50278; text-decoration: underline}
	#content-middle ul {padding: .35em 0 .35em 1em; line-height: 1.35em; list-style-type: none; text-align: left; font-size: 13px}
	#content-middle li {padding: .35em 0 .35em 1.15em; background: url(images/icons/bullet-green.gif) 0 .9em no-repeat}

	p {padding: .35em 0; line-height: 1.5em; font-size: 13px}
	.pdf {background: #fff url(images/icons/pdf.gif) no-repeat top left; padding: 2px 0 2px 2em; margin: .35em 0 .35em .15em}
	.arrow {background: #fff url(images/icons/arrows.gif) no-repeat 0 .35em; padding-left: 1em}
	.arrows {background: #fff url(images/icons/arrows.gif) no-repeat 0 .8em; padding-left: 1em}
	.arrow-left {background: #fff url(images/icons/arrows-left.gif) no-repeat left .35em; padding-left: 1em}
	.arrow-right {background: #fff url(images/icons/arrows.gif) no-repeat right .35em; padding-right: 1em}

	.hr {border-bottom: 2px dotted #9c0; margin: 10px 0; line-height: 1.5em; padding: 0}
	.hr-grey {border-bottom: 2px dotted #ccc; margin: 10px 0; line-height: 1.5em; padding: 0}
	.photoL {float: left; margin: 3px 10px 0 0}
	.photoR {float: right; margin: 3px 0 0 10px}
	.photoCaptionL {float: left; margin: 1em 8px 0 0; font-size: 75%; text-align: center}
	.photoCaptionR {float: right; margin: 1em 0 0 8px; font-size: 75%; text-align: center}

	.border {border: 1px solid #ccc}
	.dotted-border {border: 2px dotted #ccc}
	.dotted-box {border: 2px dotted #ccc; padding: 10px; background: #f9f9f9; margin: 10px 0}

	.column1, .column2 {width: 250px; display: block; float: left; margin-right: 10px}
	.column2 {margin-right: 0}

	.column-one, .column-two, .column-three {width: 180px; display: block; float: left; margin: 0 9px 9px 0; text-align: center}
	.column-three {margin-right: 0}

	/* ---[ colored boxes ]--------------------- */
	.blue-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/blue-box-heading.png) repeat; width: 520px; padding: 6px 10px}
	.blue-box-top, .blue-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/blue-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0}
	.blue-box-top {margin-top: .35em; margin-bottom: -20px}
	.blue-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/blue-box-middle.png) repeat-y}
	.blue-box-bottom {background: url(images/shell/boxes/blue-box-bottom.png) no-repeat; margin-bottom: .35em}

	.green-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/green-box-heading.png) repeat; width: 520px; padding: 6px 10px}
	.green-box-top, .green-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/green-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0}
	.green-box-top {margin-top: .35em; margin-bottom: -20px}
	.green-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/green-box-middle.png) repeat-y}
	.green-box-bottom {background: url(images/shell/boxes/green-box-bottom.png) no-repeat; margin-bottom: .35em}
	
	.orange-box-heading {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #fff; display: block; background: url(images/shell/boxes/orange-box-heading.png) repeat; width: 520px; padding: 6px 10px}
	.orange-box-top, .orange-box-bottom {display: block; height: 30px; width: 540px; background: url(images/shell/boxes/orange-box-top.png) no-repeat; clear: both; font-size: 0; line-height: 0; padding: 0; margin: 0}
	.orange-box-top {margin-top: .35em; margin-bottom: -20px}
	.orange-box-middle {padding: 0 10px; display: block; width: 520px; background: #fff url(images/shell/boxes/orange-box-middle.png) repeat-y}
	.orange-box-bottom {background: url(images/shell/boxes/orange-box-bottom.png) no-repeat; margin-bottom: .35em}

#subnav {margin: 10px 0}
	#subnav select {font-size: 12px; background: #f3f3f3; width: 100%; border: 1px solid #069}
	#subnav option {margin: 5px; padding: 1px}


/* ---[ colors ]--------------------- */
.black {color: #000 !Important}
.blue {color: #069 !Important}
.green {color: #9c0 !Important}
.grey {color: #666 !Important}
.orange {color: #f90 !Important}
.pink {color: #e50278 !Important}
.purple {color: #609 !Important}
.teal {color: #066 !Important}
.white {color: #fff !Important}
.yellow {color: #cc0 !Important}


/* ---[ headings ]--------------------- */
h1 {font: normal 26px/1em Arial, Helvetica, sans-serif; color: #069; padding: 0; text-align: left}
h2 {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #e50278; padding: .15em 0; text-align: left}
h3 {font: normal 18px/1.25em Arial, Helvetica, sans-serif; color: #069; padding: .15em 0; text-align: left}
h4 {font: bold 14px/1.25em Arial, Helvetica, sans-serif; color: #666; padding: .35em 0; text-align: left}


/* ---[ search result links and rollovers ]--------------------- */
#class-links ul {list-style-type: none; margin: .35em 0 0 -10px; width: 530px} 
#class-links li {border-top: 2px dotted #9c0; padding: 5px 0}

#class-links li a {display: block; text-decoration: none; padding: 6px 6px 6px 58px}

#class-links a em {font: normal 18px/1em Arial, Helvetica, sans-serif; color: #9c0; padding: .15em 0; display: block}
#class-links a span {font: normal 13px/1.25em Arial, Helvetica, sans-serif; display: block; color: #666}

#class-links .normal {background: url(images/icons/class-circle.png) no-repeat 10px 13px}
#class-links .normal a:hover {background: #ffc url(images/icons/class-circle2.png) no-repeat 10px 8px; text-decoration: none}

#class-links .featured {background: url(images/icons/class-star.png) no-repeat 10px 13px}
#class-links .featured a:hover {background: #ffc url(images/icons/class-star2.png) no-repeat 10px 8px; text-decoration: none}

#results-navigation {margin: 0 0 10px 0; font-size: 13px; border-top: 2px dotted #9c0; padding-top: 10px}
	#results-per-page {font-weight: bold; color: #069; text-align: left}
	#results-per-page a {margin-right: 3px}
	#page-navigation {font-weight: bold; color: #e50278; text-align: right}

	#results-found {text-align: center}


/* ---[ lenny krayzelburg swim academy mini-site ]--------------------- */
#lksa-nav {height: 30px; margin-bottom: 20px}

.lksa_home,.lksa_about,.lksa_lessons,.lksa_questions {display: block; height: 30px; text-indent: -99999px; float: left}

.lksa_home {width: 154px; background: url(images/lksa/nav_home.png) no-repeat}
.lksa_home:hover {background: url(images/lksa/nav_home2.png) no-repeat}

.lksa_about {width: 144px; background: url(images/lksa/nav_about.png) no-repeat}
.lksa_about:hover {background: url(images/lksa/nav_about2.png) no-repeat}

.lksa_lessons {width: 184px; background: url(images/lksa/nav_lessons.png) no-repeat}
.lksa_lessons:hover {background: url(images/lksa/nav_lessons2.png) no-repeat}

.lksa_questions {width: 58px; background: url(images/lksa/nav_questions.png) no-repeat}
.lksa_questions:hover {background: url(images/lksa/nav_questions2.png) no-repeat}


/* ---[ class/department pages ]--------------------- */
#program-description {border-top: 2px dotted #9c0; border-bottom: 2px dotted #9c0; margin: 10px 0; padding: 10px 0; display: block}
#program-details {clear: both; font-size: 13px}
	#program-details .column1, #program-details .column2 {width: 235px; display: block; float: left; margin: .35em 10px 1em 0}
	#program-details .column2 {width: 265px; margin-right: 0}
	#program-related-items {clear: both}

#program-buttons {border-top: 2px dotted #9c0; margin-top: 15px; padding: 15px 0 5px 0; display: block}


/* ---[ footer ]--------------------- */
#footer {border-top: 1px solid #9c0; border-bottom: 1px solid #9c0; padding: 10px 0; background: #fff; font-weight: bold; clear: both}
	#footer-navigation li {display: inline}
	#footer-navigation a {color: #9c0; text-decoration: none; padding: 0 6px}
	#footer-navigation a:hover {color: #f15d22}
	#contact-information {margin-top: 1em}