/*
Title: Har Zion Temple
Style: General stylesheet
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: December 22, 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 {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; padding: 6px; border-top: 1px solid #ccc}


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


/* ---[ structure ]--------------------- */
html, body {background: #a258a0 url(images/shell/background.png) repeat-x top center; height: 100%; min-width: 760px; text-align: center; font-size: 0}
#center-on-page {width: auto; text-align: center}

#container {margin: 0 auto; width: 760px; background: #e0bad0 url(images/shell/har-zion-logo.png) no-repeat}


/* ---[ left side ]--------------------- */
#left {width: 180px; display: block; float: left}
	#logo-link, #email-link {width: 180px; display: block}
	#logo-link {height: 334px; margin-bottom: 20px}
	#email-link {height: 100px}


/* ---[ right side ]--------------------- */
#right {width: 580px; display: block; float: right; background: #fff; height: auto !important; min-height: 655px; height: 655px}

	#header {margin: 80px 0 10px 0; display: block; height: 95px; overflow: hidden}
	#events1, #events2  {float: left; display: block; height: 85px; width: 140px; padding: 10px 10px 0 125px; font: normal 11px/1.25em Arial, Helvetica, sans-serif; text-align: left}
	#events1 {margin: 0 10px}

	/* ---[ top-navigation ]--------------------- */

	#top-navigation {width: 580px}
		#top-navigation ul {list-style: none}
		#top-navigation li {float: left; /*width: 580px*/}

		#top-navigation a.calendar, #top-navigation a.monthly-bulletin, #top-navigation a.make-a-donation, #top-navigation a.become-a-member, #top-navigation a.contact-us, #top-navigation a.service-times {float: left; background: url(images/shell/top-navigation.png) no-repeat; display: block; height: 27px; text-indent: -999999px}
		
		#top-navigation a.calendar {background-position: 0 0; width: 76px; padding-right: 4px}
		#top-navigation a.calendar:hover {background-position: 0 -26px}

		#top-navigation a.monthly-bulletin {background-position: -80px 0; width: 106px; padding-right: 3px}
		#top-navigation a.monthly-bulletin:hover {background-position: -80px -26px}

		#top-navigation a.make-a-donation {background-position: -189px 0; width: 108px; padding-right: 3px}
		#top-navigation a.make-a-donation:hover {background-position: -189px -26px}

		#top-navigation a.become-a-member {background-position: -300px 0; width: 116px; padding-right: 4px}
		#top-navigation a.become-a-member:hover {background-position: -300px -26px}

		#top-navigation a.contact-us {background-position: -420px 0; width: 75px; padding-right: 3px}
		#top-navigation a.contact-us:hover {background-position: -420px -26px}

		#top-navigation a.service-times {background-position: -498px 0; width: 82px}
		#top-navigation a.service-times:hover {background-position: -498px -26px}


	/* ---[ middle-navigation ]--------------------- */

	#middle-navigation {float: left; width: 580px}
		#middle-navigation ul {list-style: none}
		#middle-navigation li {float: left; /*width: 580px*/}

		#middle-navigation a.come-pray, #middle-navigation a.come-learn, #middle-navigation a.come-connect, #middle-navigation a.come-celebrate, #middle-navigation a.come-home {float: left; background: url(images/shell/middle-navigation.png) no-repeat; display: block; height: 28px; text-indent: -999999px}
		
		#middle-navigation a.come-pray {background-position: 0 0; width: 111px}
		#middle-navigation a.come-pray:hover {background-position: 0 -28px}

		#middle-navigation a.come-learn {background-position: -111px 0; width: 103px}
		#middle-navigation a.come-learn:hover {background-position:  -111px -28px}

		#middle-navigation a.come-connect {background-position: -214px 0; width: 121px}
		#middle-navigation a.come-connect:hover {background-position: -214px -28px}

		#middle-navigation a.come-celebrate {background-position: -335px 0; width: 129px}
		#middle-navigation a.come-celebrate:hover {background-position: -335px -28px}

		#middle-navigation a.come-home {background-position: -464px 0; width: 116px}
		#middle-navigation a.come-home:hover {background-position: -464px -28px}


	/* ---[ top navigation dropdowndowns - based on "Son of Suckerfish" ]--------------------- */

		/* all list items */
		#drops, #drops ul {padding: 0; margin: 0; clear: both; float: left; list-style: none; font: bold 13px/1.15em Arial, Helvetica, sans-serif}
		#drops a {display: block; width: 170px}
		#drops li {float: left; /*width: 182px*/ /* width needed for Opera browser */}

		/* second-level lists */
		#drops li ul {position: absolute; left: -999em}

		#drops ul.drop {background: #ffcb66; color: #000; width: 182px; clear: both; float: left; margin-top: 28px}

		#drops ul.drop li {width: 182px; clear: both; border-top: 0}
		#drops ul.drop a {color: #a258a0; font-size: 11px; padding: 8px 6px; text-decoration: none; clear: both; float: left; border-bottom: 1px solid #fff}
		#drops ul.drop a:hover {background: #ffdea0; color: #009ad9}

		/* third-and-above-level lists */
		#drops li:hover ul ul, #drops li:hover ul ul ul, #drops li:hover ul ul ul ul, #drops li.sfhover ul ul, #drops li.sfhover ul ul ul, #drops li.sfhover ul ul ul ul {margin-top: 0; position: absolute; width: inherit; left: -999em}

		#drops li:hover ul, #drops li li:hover ul, #drops li li li:hover ul, #drops li li li li:hover ul, #drops li.sfhover ul, #drops li li.sfhover ul, #drops li li li.sfhover ul, #drops li li li li.sfhover ul {left: 182px; /*width: 182px;*/}

		/* lists nested under hovered list items */
		#drops li:hover ul, #drops li.sfhover ul {left: auto}

		/* IE fix for sticky rollovers */
		#drops li:hover, #drops li.hover {position: static}


	/* ---[ content-area ]--------------------- */
	#content {width: 580px; text-align: left; float: right; font: normal 12px/1.45em Arial, Helvetica, sans-serif}

	#page-images, #content-area {float: left; text-align: left; margin: 20px 0 10px 0; display: block; width: 180px}

	#content-area {width: 550px; margin: 15px 10px 10px 15px}

		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}
		.center {text-align: center}
		.none {padding: 0; border: 0 !Important}

		p {padding: .5em 0}

		#content ul {padding: .35em 0 .35em 1em; line-height: 1.45em; list-style-type: none; text-align: left}
		#content li {padding: .15em 0 .35em 1em; background: transparent url(images/icons/circle.gif) 0 7px no-repeat}

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

		.hr {width: auto; height: 1px; font-size: 1px; display: block; border-top: 1px dotted #ccc; margin: 10px 0}

		.pdf {background: #fff url(images/icons/pdf.gif) no-repeat top left; padding: 2px 0 2px 2em; margin: .35em 0}

		.border, .box {border: 2px solid #f1dfcb}
		.box {padding: 6px}
		.photoL {float: left; margin: 3px 8px 0 0}
		.photoR {float: right; margin: 3px 0 0 10px}
		.cursor {cursor: pointer}
		.normal {font: normal 12px/1.45em Arial, Helvetica, sans-serif}


		/* ---[ font colors ]--------------------- */
		.black {color: #000 !Important}
		.white {color: #fff !Important}
		.grey {color: #919191 !Important}
		.blue {color: #009ad9 !Important}
		.purple {color: #a258a0 !Important}
		.cream {color: #f1dfcb !Important}


		/* ---[ headings ]--------------------- */
		h1 {font: normal 26px/1.15em Times, Times New Roman, Garamond, serif; color: #a258a0; padding: 0; text-align: left}
		h2 {font: bold 16px/1.25em Arial, Helvetica, sans-serif; color: #919191; padding: .15em 0; text-align: left}
		h3 {font: bold 16px/1.25em Arial, Helvetica, sans-serif; color: #009ad9; padding: .15em 0; text-align: left}
		.reverse-blue {background: #9dd7f0; color: #fff; padding: .35em}
		.reverse-purple {background: #a258a0; color: #fff; padding: .35em}
		h4 {font: bold 13px/1.25em Arial, Helvetica, sans-serif; color: #009ad9; padding: .35em 0; text-align: left}
		h5 {font: normal 15px/1em Arial, Helvetica, sans-serif; color: #fff; height: 20px; padding: 7px 0 2px 33px; text-align: left; margin-top: 4px}
	

	/* ---[ news ]--------------------- */

	.news-heading {clear: both; background: #009ad9 url(images/shell/news-headline-background.png) repeat-y; font: bold 15px/1.25em Arial, Helvetica, sans-serif; color: #fff; width: 745px; padding: .35em 0 .35em 15px; text-transform: uppercase; text-align: left}
	
	.news-story {padding: 10px 20px; width: 720px; background: #fff; font: normal 12px/1.45em Arial, Helvetica, sans-serif; text-align: left; margin-bottom: -10px}
	.news-photo {float: left; margin-right: 20px}


	/* ---[ footer ]--------------------- */
	#footer {clear: both; background: #fff; color: #009ad9; clear: both; font: normal 11px/1.35em Arial, Helvetica, sans-serif; margin: 10px 0; text-align: left; padding: 4px 0 144px 10px; border-top: 10px solid #fff2d9}