/*
Title: JFCS - Samost Jewish Family and Children's Service of Southern New Jersey
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: July 30, 2009
*/

/* ---[ 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, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ol, ul {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal}
a {text-decoration: none}

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

#header, #top-navigation, #photos, #main {display: block; width: 760px; clear: both}
#header {height: 117px}

/* ---[ top navigation rollover buttons ]--------------------- */
#top-navigation {height: 30px; margin: 10px 0}
#top-navigation ul {height: 30px; list-style: none}
#top-navigation li {float: left; /*width: 152px*/ /* needed or else IE and Opera will go nuts */}

#top-navigation a.home, #top-navigation a.about-us, #top-navigation a.contact-us, #top-navigation a.calendar, #top-navigation a.get-involved {float: left; background: url(../images/shell/top-navigation.png) no-repeat; display: block; width: 152px; height: 30px; text-indent: -999999px}
#top-navigation a.home {background-position: 0 0}
#top-navigation a.home:hover {background-position: 0 -30px}
#top-navigation a.about-us {background-position: -152px 0}
#top-navigation a.about-us:hover {background-position: -152px -30px}
#top-navigation a.contact-us {background-position: -304px 0}
#top-navigation a.contact-us:hover {background-position: -304px -30px}
#top-navigation a.calendar {background-position: -456px 0}
#top-navigation a.calendar:hover {background-position: -456px -30px}
#top-navigation a.get-involved {background-position: -608px 0}
#top-navigation a.get-involved:hover {background-position: -608px -30px}

#photos {height: 116px; background: url(../images/shell/photos.jpg) no-repeat; margin-top: 10px}

#main {margin-top: 10px}
#left-side {width: 152px; float: left; margin-right: 10px}
#right-side {width: 598px; float: left}
#full-page {width: 750px; float: left}

	/* ---[ side navigation ]--------------------- */
	
	#side-navigation-top, #side-navigation-bottom {width: 152px; height: 10px; line-height: 0; font-size: 0}
	#side-navigation-top {background: transparent url(../images/shell/side-navigation-top.png) no-repeat}
	#side-navigation-bottom {background: transparent url(../images/shell/side-navigation-bottom.png) no-repeat}
	#side-navigation {background: #fff url(../images/shell/side-navigation-background.gif) repeat-y; width: 132px; padding: 0 10px; font: bold 10px/1em Verdana, Arial, Helvetica, sans-serif}
	#side-navigation a:hover {color: #ab0534; background: #f9f5e9}
	#side-navigation .last {border: 0}

	/* ---[ side navigation - slide out navigation based on Son of Suckerfish ]--------------------- */
	#nav, #nav ul {list-style: none; float: left; width: 132px}
	#nav li {position: relative; float: left; line-height: 1.15em; margin-bottom : -1px; width: 132px}
	#nav li ul {position: absolute; left: -999em; margin-left: 132px; margin-top: -27px}
	#nav li ul ul {left: -999em}
	#nav li a {/* main buttons */ width: 122px; w\idth: 122px; display: block; color: #005696; background-color: #fff; border-bottom: 2px solid #f9f5e9; padding: 7px 5px}
	#nav li li a {/* sub buttons */ border: 1px solid #f9f5e9}
	#nav li a:hover {color: #ab0534; background: #f9f5e9 url(../images/shell/rollover-background.png) repeat-x}
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em}
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto}

	/* ---[ news and events scrolling area ]--------------------- */
	#news-and-events-top {background: transparent url(../images/shell/news-and-events-top.png) no-repeat; width: 152px; height: 32px}
	#news-and-events {margin: 10px 0}
	#news-and-events-bottom {background: transparent url(../images/shell/news-and-events-bottom.png) no-repeat; width: 152px; height: 10px}

	#scrolling-area {background: #fff url(../images/shell/news-and-events-background.gif) repeat-y; font-size: 10px; line-height: 13px; width: 132px; height: 182px; overflow: hidden; padding: 0 10px}
	#scrolling-area .event {border-bottom: 1px dotted #ab0534; padding: 8px 0}
	#scrolling-area .line1 {color: #ab0534; display: block; padding-bottom: 1px}
	#scrolling-area a {color: #000; display: block; padding-top: 3px}
	#scrolling-area a:hover {color: #000; text-decoration: none; background: #f9f5e9}

.content-top, .content-bottom {display: block; width: 598px; height: 10px; clear: both; line-height: 0; font-size: 0}
.content-top {background: transparent url(../images/shell/content-top.png) no-repeat}
.content {background: #fff url(../images/shell/content-background.gif) repeat-y; width: 558px; padding: 4px 20px; text-align: left}
.content-bottom {background: transparent url(../images/shell/content-bottom.png) no-repeat}

.full-content-top, .full-content-bottom {display: block; width: 750px; height: 10px; clear: both; line-height: 0; font-size: 0}
.full-content-top {background: transparent url(../images/shell/full-content-top.png) no-repeat}
.full-content {background: url(../images/shell/full-content-background.png) repeat-y; width: 750px; padding: 4px 20px; text-align: left}
.full-content-bottom {background: transparent url(../images/shell/full-content-bottom.png) no-repeat}

	/* ---[ content styles ]--------------------- */
	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; display: block}
	.center {text-align: center}
	.none {padding: 0; border: 0 !Important}

	#content a {color: #ab0534}
	#content a:hover {color: #ab0534; text-decoration: underline}
	#content p {padding: .35em 0; line-height: 1.5em}
	#content p.t {padding: .25em 0; line-height: .95em}
	#content .pdf {background: #fff url(../images/icons/pdf.png) no-repeat top left; padding: 1px 0 1px 21px; margin: .35em 0}
	#content .arrow {background: #fff url(../images/icons/arrow.gif) no-repeat 0 10px; padding-left: 16px}
	#content .hr {border-bottom: 1px dotted #000; margin: 10px 0;height:1px;padding:0;}
	#content .photoL {float: left; margin: 3px 8px 0 0}
	#content .photoR {float: right; margin: 3px 0 0 10px}
	#content .photoCaptionL {float: left; margin: 1em 8px 0 0; font-size: 75%; text-align: center}
	#content .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}

	#content ul {padding: .35em 0 .35em 1em; line-height: 1.35em; list-style-type: none; text-align: left}
	#content li {padding: .35em 0 .35em 1.15em; background: transparent url(../images/icons/square.gif) 0 .8em no-repeat}
	#content li .arrow {padding: .35em 0 .35em 1em; background: transparent url(../images/icons/arrow.gif) 0 .8em no-repeat}

	.column1, .column2 {width: 270px; 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}

	h1 {font: normal 26px/1em Arial, Helvetica, sans-serif; color: #ab0534; padding: 0 0 .15em 0}
	h2 {font: normal 20px/1.25em Arial, Helvetica, sans-serif; color: #005696; padding: .35em 0}
	h3 {font: normal 18px/1.25em Arial, Helvetica, sans-serif; color: #005696; padding: .35em 0}
	h4 {font: bold 15px/1.25em Arial, Helvetica, sans-serif; color: #ab0534; padding: .35em 0}

	/* ---[ font colors ]--------------------- */
	.black {color: #000 !Important}
	.white {color: #fff !Important}
	.grey {color: #666 !Important}
	.blue {color: #005696 !Important}
	.red {color: #ab0534 !Important}
	.tan {color: #f9f5e9 !Important}

#contact-information {background: transparent url(../images/shell/contact-information.png) no-repeat; display: block; width: 513px; height: 55px; clear: both; margin: 10px 0; text-align: left; padding: 40px 0 0 85px; line-height: 20px}
/*
.contact-information {float: left; margin: 10px 0}
.contact-information-top {background: transparent url(../images/shell/footer-top.png) no-repeat; display: block; width: 294px; height: 10px; clear: both; line-height: 0; font-size: 0}
.contact-information-background {background: #fff url(../images/shell/footer-background.gif) repeat-y; display: block; width: 254px; text-align: left; padding: 0 20px; line-height: 20px}
.contact-information-bottom {background: transparent url(../images/shell/footer-bottom.png) no-repeat; display: block; width: 294px; height: 10px; clear: both}
*/

#copyright {font-size: 10px; color: #005696}
#sitemap-button, #staff-button, #policies {font-size: 10px; color: #005696; margin-top: 10px}



.podcast {width: 95%; float: left; border: 1px solid #ab0534; margin-top: 10px}

/* ---[ STORE PRODUCT LIST ]--------------------- */
.store{width:555px;float:left;border: 1px solid #ab0534;}
.store-image{float:left;display:block;margin:2px;}
.store-image img {max-width:160px;}
.store-product {float:left;width:355px;margin:2px 2px 2px 5px;text-align:left;}
.store-product h3 {margin:0;text-align:left;}
.price-right {float:right;font-weight:bold;}
.build-product {float:left;text-align:left;}

/* ---[ contact form ]--------------------- */
form {margin: 0; padding: 0; font-size: 100%; width: auto}
form fieldset {clear: both; font-size: 100%; border-color: #f1ab00; border-width: 1px 0 0 0; border-style: solid none none none; padding: 10px; margin: 0}
form fieldset legend {font-size: 125%; font-weight: bold; color: #f1ab00; margin: 0; padding: 0 5px}
label {font-size: 100%}
label u {font-style: normal; text-decoration: underline}
input, select, textarea {font-family: Tahoma, Arial, sans-serif; font-size: 100%; color: #000}
textarea {overflow: auto}
form div {clear: left; display: block; width: 500px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}
form div fieldset {clear: none; margin: 0 0 0 350px; padding: 0 5px 5px 5px; width: 350px}
form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
form div.required fieldset legend {font-weight: bold}
form div label {display: block; float: left; width: 140px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}
form div.optional label, label.optional {font-weight: normal}
form div.required label, label.required {font-weight: bold}
form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 170px; height: 1%; padding: 0; margin: 0 0 5px 170px; text-align: left}
form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
form div img {border: 1px solid #000}
p.error {background-color: #f00; background-image: url(images/icons/error.gif); background-repeat: no-repeat; background-position: 3px 3px; color: #fff; padding: 3px 3px 5px 27px; border: 1px solid #000; margin: auto 100px}
form div.error {background-color: #ffffe1; background-image: url(images/icons/required_bg.gif); background-repeat: no-repeat; background-position: top left; color: #f1ab00; border: 1px solid #f00}
form div.error p.error {background-image: url(images/icons/error.gif); background-position: top left; background-color: transparent; border-style: none; font-size: 88%; font-weight: bold; margin: 0 0 0 118px; width: 200px; color: #f00}
form div input, form div select, form div textarea {width: 300px; padding: 1px 3px; margin: 0; border: 1px solid #f1ab00}
form div input.inputFile {width: 311px}
form div select.selectOne {width: 311px; padding: 1px 3px}
form div select.selectMultiple {width: 311px}
form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #cccccc; color: #000; width: auto; padding: 0 6px; margin: 0}
form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: 88%; height: 1%}
form fieldset legend {line-height: 150%}
form input, form select, form textarea {background-color: #fff}
/* form textarea.expanding {overflow: auto; overflow-x: auto; overflow-y: visible} */
div.optional label:before {content: ''}
div.required label:before {content: ''}
form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
form div.wide label {float: none; display: block}
form div label.wide {width: 348px}
form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
form div.notes p, form div small {line-height: 125%}
form div.wide small {margin: 0 0 5px 0}

/* ---[ calendar ]--------------------- */
 
#calendar {width: 550px; font-size: 10px; padding: .35em 0; margin: 0 auto}
.grid {}
.cal_top {background: #fff; padding: 10px 0; font: normal 24px/1em Arial, Helvetica, sans-serif; text-align: center}
th.days_of_week {border: 1px solid #fff; width: 74px; background: #005696 url(../images/shell/days_of_week.png) repeat-x; padding: 1px 0 1px 3px; color: #fff; font: normal 19px/1em Arial, Helvetica, sans-serif}
td.today {border: 1px solid #fff; background: #f3f3f3; width: 77px; height: 100px}
.day_of_month {background: #f9f5e9; padding: 3px}
.day_of_month a {color: #ab0534}
.day_of_month a:hover {text-decoration: none}
.detail_of_day {}
.event-listing{background:#ccc;}
table.event-tickets{padding:3px;margin:5px;float:right;clear:both;border: 1px dashed #ab0534;}
	table.event-tickets td,table.event-tickets th {padding:3px;}
	.color-box{float:left;height:15px;margin:5px;padding:5px;}
	#color-chart{width:100%;text-align:center;float:left;}

/*--------------[DHTML WINDOW Settings] ---------------*/
.dhtmlwindow{position: absolute;border: 2px solid #ab0534;visibility: hidden;background-color: #ab0534;}
.drag-handle{padding: 1px;text-indent: 3px; font: bold 14px Arial; background-color: #ab0534; color: #fff; overflow: hidden; width: auto;}
.drag-handle .drag-controls{position: absolute;right: 1px;top: 2px}
.drag-contentarea{border-top: 1px solid #ab0534;background-color: #fff;color: #000;height: 150px;padding: .35em;overflow: auto;line-height: 1.5em}
.drag-contentarea a:hover{color:#ab0534;}
.drag-statusarea{border-top: 1px solid #ab0534;background-color: #ab0534;height: 13px;}
.drag-resizearea{float: right;width: 13px;height: 13px; font-size: 0;}

/*--------------[Shopping Cart Settings] ---------------*/
table.shopping-cart{width:100%;margin-top:25px;padding:0;}
	table.shopping-cart th{font-weight:bold;text-align:center;padding:0;margin:0;}
	table.shopping-cart td{padding-left:5px;padding-top:5px;text-align:center;}
	table.shopping-cart td.desc{text-align:left;}
	table.shopping-cart td.remove a{font-weight:bold;text-align:center;color:#ab0534;}
	table.shopping-cart tr.color td{background:#E1E5E0;}
	table.shopping-cart tr.break_level{height:5px;}
	table.shopping-cart td.break_down{border-bottom: 1px solid #ab0534;height:5px;}
table.tribute-c{width:100%}
	table.tribute-c th{font-weight:bold;text-align:left;height:25px;line-height:25px}
#jfcssnj-cart {float:right;font-weight:normal;text-align:center;color:#fff;margin:10px 5px 0;line-height:15px;height:15px;}
#jfcssnj-cart img {vertical-align:middle;}
#jfcssnj-cart a {text-decoration:none;color:#ab0534;}
#jfcssnj-cart a:hover {text-decoration:none;color:#F071B3;}
.req{color:#ab0534;}
.card-class {padding:0 10px; margin: 1em; display: block; border: 1px dashed #ab0534}
table.ccard{padding:0;}
	table.ccard td{text-align:left;vertical-align:top;padding:5px 5px 0 5px}
	table.ccard td input, table.ccard td submit, table.ccard td button {width:150px;border:1px solid #666}
	table.ccard td img {border:1px solid #ab0534}
	table.ccard tr.color td{background:#ab0534;color:#fff;}
	table.ccard td select {width:auto;border:1px solid #666}
	table.ccard td textarea {width:300px;border:1px solid #666}
#card-process {display:none;padding:0 10px; margin: 1em; border: 1px dashed #ab0534;height:250px;}

/* ---[ gift cards styles ]--------------------- */
.gift-cards{padding: 10px; margin: 1em; display: block; border: 1px dashed #ab0534;}
	.gift-cards img{float: left; vertical-align:text-top;padding:0 10px 0 0;}