/* filename:	tbs3.css (formerly: tbs.css, tbs2.css)
 * desc:	Temple Beth Shalom website stylesheet
 * version:	almost strictly heavy CSS1, tho maybe some CSS2 snuck by me...
 * author:	Jo Valentine-Cooper
 * maintainer:	same
 * email:	pref order: webmaster@tbsohio.org, jvc@tbsohio.org, jvc@nwcs.com
 * ChangeLog:
 *	27 May 2003: first created (as tbs.css)
 *	11 Jun 2003: lots of changes to accommodate board, etc.
 *	 2 Jul 2003: added styling for email forms
 *	 8 Jul 2003: specified fonts. Pretty!
 *	10 Jul 2003: poked a bit more at the styling for the Board page
 *	11 Jul 2003: mutated into tbs2.css
 *	 3 Sep 2003: ...let's just say I got everything to work and leave it
 *		     at that.
 *	19 Oct 2003: added a style for the copyright notice appearing on the
 *		     Rabbi's sermons. Finally, this is about to go live...
 *		     Later: some more tweaking to try to finally stomp that
 *		     bloody persistent Trustees page bug in MSIE. Also added
 *		     much commenting, cleaned out a lot of cruft.
 *	22 Oct 2003: some small style additions for the directions page.
 *	 3 Mar 2004: added a slight style tweak for the Committees directory
 *      16 Dec 2004: added the "eWindow announcements box"
 *      11 Feb 2005: added committee listing stuff for the table (NOT the dl),
 *                   the "warning" em, some tweaks for the programming page
 *	21 Feb 2005: Housekeeping! Wiped a few things that never went live,
 *                   organized a few things; generally setting things in order
 *	17 Mar 2005: added nested UL indent for Opera's benefit on the eWindow
 *                   indexes. Ah, silly things.
 *	28 Jul 2005: attempt at redundant color setting of eWindow titles
 *	31 Aug 2005, lots and lots of little changes and experiments to create
 *	 1 Sep 2005: a Whole New Look(tm)! Huzzah! And thus tbs3.css is geborn.
 *       4 Sep 2005: a few small changes made here and there as the website is
 *                   migrated.
 *	24 Jan 2006: after reading ALA again, decided to change form highlight
 *		     colors to blues instead of reds.
 *      27 Mar 2007: created some styles for AINA07 gallery and front page;
 *                   also a little housekeeping done.
 *      28 Mar 2007: some more styles created to finish off the AINA07 gallery
 *                   and fix a degrade display bug or two (damn you, Firefox!)
 *      12 Jun 2008: wow, been a while! new styles for new staff page layout
 *      14 Aug 2008: modification to the temple board layout to allow for
 *                   "pictureless" setup
 *      16 Oct 2008: modification to Talmud Torah photos system since we
 *                   (FINALLY!!) have new photos with a different aspect ratio
 *      11 Aug 2009: new photo of all rabbis together, so the TT photo system
 *                   was adopted to accommodate that shot
 *       6 Aug 2010: quick appearance refresh prior to an eventual move to
 *                   WordPress
 */

/******************************************************************************/
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 6, 2010 07:17:32 PM America/New_York */

@font-face {
	font-family: 'CartoGothicStdBook';
	src: url('/webfont/CartoGothicStd-Book-webfont.eot');
	src: local('☺'), url('/webfont/CartoGothicStd-Book-webfont.woff') format('woff'), url('/webfont/CartoGothicStd-Book-webfont.ttf') format('truetype'), url('/webfont/CartoGothicStd-Book-webfont.svg#webfontiSSvHuvy') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CartoGothicStdItalic';
	src: url('/webfont/CartoGothicStd-Italic-webfont.eot');
	src: local('☺'), url('/webfont/CartoGothicStd-Italic-webfont.woff') format('woff'), url('/webfont/CartoGothicStd-Italic-webfont.ttf') format('truetype'), url('/webfont/CartoGothicStd-Italic-webfont.svg#webfontVz7NhMTG') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CartoGothicStdBold';
	src: url('/webfont/CartoGothicStd-Bold-webfont.eot');
	src: local('☺'), url('/webfont/CartoGothicStd-Bold-webfont.woff') format('woff'), url('/webfont/CartoGothicStd-Bold-webfont.ttf') format('truetype'), url('/webfont/CartoGothicStd-Bold-webfont.svg#webfontXG7opWym') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CartoGothicStdBoldItalic';
	src: url('/webfont/CartoGothicStd-BoldItalic-webfont.eot');
	src: local('☺'), url('/webfont/CartoGothicStd-BoldItalic-webfont.woff') format('woff'), url('/webfont/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'), url('/webfont/CartoGothicStd-BoldItalic-webfont.svg#webfontxsBXupzT') format('svg');
	font-weight: normal;
	font-style: normal;
}
/******************************************************************************/


html {
	background: #399 /* url(/Images/skybg.png) top fixed repeat-x*/;
	padding: 2em 1em;
}

/* standard sitewide overrides */
body {
	quotes: '' ''; /* we'll be inserting them manually, thank you */
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	background-color: #eeffff;
	text-align: justify;
/*	background-image: url(/Images/WindowBG-Light.png);
	background-repeat: no-repeat;
	background-position: 30px -165px;*/
	/* Are these redundant? Possibly. Do things break without them? Yep! Grar. */
	z-index: 0;
	margin: 0;
	border: 0;
	padding: 0;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	max-width: 68em;
	text-shadow: #aaa 1px 1px 1px;
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	}
a img { border: none; } /* Whose idea was it to add those borders, anyway? They look horrible. */
a:hover { background-color: #ffec00; border-radius: 0.3em; }
a.imglink:hover { background-color: inherit; }

/* heading styles */
h2 { /* standard content heading */
	text-align: center;
	}
h1, h2, h3 {
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: bold;
	font-style: italic;
	}
h3.copyright, h4, h5, h6, p.quote, q, .events dt {
/*	font-weight: bold;*/
	font-family: 'CartoGothicStdBold', Trebuchet MS, Arial, Helvetica, sans-serif;
}
h3.copyright { /* subhead for the Rabbi's sermons */
	font-size: 1em;
	width: 16em;
	float: right;
	border: 1px solid black;
	background-color: silver;
	text-align: center;
	}

p.mission {
	font-size: 1.2em;
/*	font-style: italic;*/
	font-family: 'CartoGothicStdItalic', Trebuchet MS, Arial, Helvetica, sans-serif;
	margin-top: 0;
}

/* Flickrshow-based flickr slideshow */
div#tbsphotos {
	float: right;
/*	width: 16em;
	height: 12em;*/
	width: 240px !important;
	height: 180px !important;
	margin: 0.5em;
}
/* Force a border around each image. The right border vanishes during transitions due to the way they're implemented, but Oh Well. */
div#tbsphotos * img {
	border: 1px solid black !important;
	height: 178px !important;
	width: 238px !important;
	left: 0 !important;
	top: 0 !important;
}

/* a few basic layout elements */
div.content { /* I do believe I have yet to develop a website that DOESN'T have one of these. */
	margin-left: 1em;
	margin-right: 16.5em;
	margin-top: -1px;
	padding: 1em;
	}
div.address.block { /* blurb at the bottom */
	padding: 1em;
	margin-top: -1px;
	text-align: center;
	font-size: 0.8em;
	color: gray;
	font-family: 'CartoGothicStdBook', Verdana, Arial, Helvetica, sans-serif;
	clear: both;
	min-height: 50px;
/*	background-image: url(/Images/TBS-Oval.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;*/
	}
address { font-style: normal; } /* bottom blurb default override */
div.address.block address {
	padding-top: 12px;
}

/* for the directions */
div.directions em {
	text-decoration: underline;
	}
div.directions h4 {
	text-align: center;
	}

/* some little content tricks that get reused */
em.warning { /* WARNING! WARNING! WARNING! ALERT! ALERT! ALERT! */
	color: red;
	font-weight: bold;
	}
/* images in the text */
.img.left {
	float: left;
	margin: 0.5em;
	}
.img.right {
	float: right;
	margin: 0.5em;
	}
q, p.quote, .events dt { /* just a few things that should always be italicized */
	font-style: italic;
	}

/* Major layout element - banner across top of page */
div.top.banner {
	clear: both;
	/*background-color: silver;
	background-image: url(/Images/WindowBG-Dark.png);
	background-repeat: no-repeat;
	background-position: 30px -165px;
	min-height: 81px;*/
	background-color: #ccf;
	min-height: 81px;
	margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-moz-border-radius-topleft: 1em;
	-moz-border-radius-topright: 1em;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 0.2em ridge #ccf;
	}
div.top.banner h1 {
	text-align: left;
	font-style: italic;
	font-size: 2em;
	line-height: 1.75em;
	padding: 0;
	margin: 0;
}
div.top.banner h1 a {
	text-decoration: none;
	color: black;
}
div.top.banner h1 a:hover {
	background: inherit;
}
div.top.banner img {
	float: left;
	display: block;
	padding-left: 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 3px;
}
div.top.banner p {
/*	font-family: Tempus Sans ITC, Technical, Trebuchet MS, Arial, Helvetica, sans-serif;*/
	font-family: 'CartoGothicStdItalic', Trebuchet MS, Arial, Helvetica, sans-serif;
	text-align: left;
/*	font-style: italic;*/
	padding: 0;
	margin: 0;
	padding-left: 5em;
}
div.top.banner p.tagline {
	font-size: 1.2em;
	font-family: Georgia, sans-serif;
	font-style: italic;
	text-transform: lowercase;
	float: right;
	text-align: right;
	margin: 0.25em;
}

/* Major layout element - TOC/Main Menu */
ul.main {
	float: right;
	clear: both;
	height: 100%;
	width: 16em;
	text-align: right;
	padding-right: 0.5em;
	border-left: 1px dotted silver;
	position: relative;
	}
ul.toc, .toc li { list-style-type: none; }
ul.toc, ul.toc li {
	margin-left: 0;
	padding-left: 0;
	}
div.toc {
	margin-left: 0.2em;
	}
li.title span.titleline {
	color: #339999;
	font-size: 1.2em;
/*	font-weight: bold;*/
	font-family: 'CartoGothicStdBold', Trebuchet MS, Arial, Helvetica, sans-serif;
	}
ul.sub li, li.affiliates {
	padding-right: 1em;
	}
.uahc.plug img {
	border: none;
	}
p.buttonpara { line-height: 0; }
p.buttonpara img { margin: 1px; }
p.buttonpara img, p.buttonpara a {
	border: none;
	padding: 0;
}

/* Board of Trustees page (specifically the photos thereon) */
div.boardmember {
	width: 23em;
	height: 148px;
}
div.boardmember.nopic {
	width: 15em;
	height: auto;
}
div.boardmember.fran {
	width: 46em;
}
div.boardmember div.pic {
	float: left;
	height: 148px;
	width: 123px;
	padding-top: 5px;
	padding-left: 5px;
	background-image: url(/Images/BoardPhotoShadow-trans.png);
	background-repeat: no-repeat;
}
div.boardmember div.pic img {
	border: 1px solid black;
}
div.boardmember ul, div.boardmember ul li { list-style-type: none; }
div.boardmember ul, div.boardmember p {
	padding-top: 1em;
}
div.boardmember.nopic ul, div.boardmember.nopic p {
	padding-top: 0;
	text-align: center;
	padding-left: 0;
	margin-left: 0;
}
div.boardmember ul li.name {
	font-weight: bold;
}
div.boardmember.nopic ul li.name {
	font-weight: normal;
}
div.boardmember.nopic ul li.title {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
}

/* AINA Thumbnail Gallery (adapted from .boardmember above) */
div.ainatb {
	width: 15em;
	height: 14em;
/*	border: 2px inset silver;*/	/* decided against this; looks bleah */
}
div.ainatb div.pic {
	margin: auto;
	max-height: 128px;
	max-width: 128px;
	text-align: center; /* it's either this or "display: block; margin: auto;" on img */
}
div.ainatb div.pic img { border: 1px solid black; }
div.ainatb ul, div.ainatb ul li { list-style-type: none; }
div.ainatb ul, div.ainatb p, div.ainatb ul li {
	padding: 0;
	margin: 0;
	text-align: center;
}
div.ainatb ul li.title {
	font-style: italic;
}
div.divider {
	clear: left;
	/* Every little bit of the rest of this is compensating for the fact
	   that browsers like to ignore these things if they have no content in
	   them, or if they're 0 in size. So I have to throw in a   and
	   make it 1px minimum. Pfah! */
	margin: 0;
	padding: 0;
	height: 1px;
	width: 1px;
	font-size: 1px;
	line-height: 1px;
}

/* AINA Photos (the individual pages */
div.ainashowcase {
	width: 640px;
	width: 500px;
	/* height: auto; */
	text-align: center;
	margin: auto;
}
/*div.ainashowcase */p.ainanav {
	/* nothing would be needed here, except I decided to reuse the class */
	text-align: center;
}
div.ainashowcase img { border: 1px solid black; }
div.ainashowcase ul, div.ainashowcase ul li {
	list-style-type: none;
	margin-top: 0;
	padding-top: 0;
	margin-left: 0;
	padding-left: 0;
}
div.ainashowcase ul li.title { font-style: italic; }
div.ainashowcase ul li.clickon {
	padding-top: 1em;
}

/* AINA Artist and Stores Lists (because it was getting a bit unwieldy) */
ul.ainalist {
	/*font-size: 0.9em;*/	/* hate MSIE so very very much... */
	padding: 0;
	margin: 0;
	padding-left: 1.5em;
	padding-bottom: 0.5em;	/* so when FF wraps the lists they don't blend together */
	list-style-type: none;
	float: left;
}
ul.ainalist.stores  { width: 15em; }
ul.ainalist.artists { width: 12em; }
ul.ainalist li {
	font-size: 0.9em;	/* damn you MSIE! learn to cascade already! */
	padding-left: 0;
	margin-left: 0;
	text-indent: -0.5em;
}

/* Temporary Staff Layout */
dl.staff {
	max-width: 48%;
	margin: 1em;
}
dl.staff dt {
	padding-top: 0.75em;
	font-style: italic;
}
dl.staff dd { margin-left: 0; padding-left: 0; }
dl.staff dd.name { font-weight: bold; }


/* New Staff Layout */
div.newstaff {
	margin: auto;
	max-width: 22em;
}
div.newstaff h3 {
	text-align: center;
	padding-bottom: 0.25em;
	margin-bottom: 0;
}
div.newstaff dl {
	padding-top: 0;
	margin-top: 0;
}
div.newstaff dl dd {
	text-align: right;
	margin-top: -0.3em;
	padding-bottom: 0.85em;
}

/* Mailing Forms & similar - thanks to Mark Newhouse/ALA
 * (alistapart.com/stories/practicalcss/) for inspiration.
 */
form {
	width: 40em; /* label width + widget width + 1 em spacing between */
	}
div.intro {
	font-size: 0.8em;
	font-style: italic;
	text-align: center;
	}
div.row, span.sub.row {
	float: left;
	padding-top: 0.5em;
	display: block;
	}
.msiemac { /* since MSIE/Mac can't properly grok the float property */
	height: 0;
	line-height: 0;
	margin-top: -0.4em;
	margin-bottom: -1px;
	}
div.row span.label, span.sub.row span.label {
	float: left;
	width: 9em; /* default value; can and will change per page */
	text-align: right;
	}
div.row span.widget, span.sub.row span.widget, ul.item.list, ol.item.list {
	float: right;
	width: 30em; /* see above */
	text-align: left;
	}
span.sub.row span.label		{ width: 5em; }
span.sub.row span.widget	{ width: 24em; }
span.sub.row.radio span.label	{ width: 2em; }
span.sub.row.radio span.widget	{ width: 27.5em; }
div.row.radio span.label	{ width: 1em; }
div.row.radio span.widget	{ width: 38.5em; }
span.spacing {
	font-size: 0.5em;
	height: 0.5em;
	display: block;
	}
em.highlight {
	font-style: normal;
	font-weight: bold;
/*	color: red;*/
	color: #03C;
	}
em.highlight input {
/*	background-color: #FCC;*/
	background-color: #CCF;
	}

/* eWindow index. For some reason nested ULs don't indent in Opera... */
ul ul {
	padding-left: 1em;
	list-style-type: circle;
	}
li.ewindowtitle {
	font-weight: bold;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}
/* eWindows themselves. Apparently putting bgcolor on a td only works in
   HTML email. Go figure. */
td[bgcolor="#ccccff"] { background-color: #ccccff; }

/* Legacy stuff for the old Combined Calendar. Perhaps now you will see why I hated it so. */
/* And with the changeover from UAHC->URJ, apparently the calendar can't work at all anymore anyways. Go fig. */
/*td[bgcolor="#ffffcc"] font[color="darkblue"] {color: red; font-weight: bold;}
td[bgcolor="#ffffcc"] {background-color: #EEE;}
span.calimg { text-align: center; }
td font[face="times"][color="darkblue"] { display: none; }*/

/* random small page-specific styles */
table.committees td { padding: 0.25em; }
div.content.programming h3 { text-align: center; } /* Just because. */
table.wbscalendar td, table.wbscalendar tr, table.wbscalendar { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
table.wbscalendar tr.month td { padding-top: 0.5em; }

/* and some stuff tacked onto the end to make things a little prettier */
ul.item.list { list-style-type: none; }
td { background: none; text-align: left; }
em cite, cite em, em em { font-weight: bold; }

/* contact info on front page */
p.contact {
	float: left;
	padding: 1em;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* rabbis picture; borrowed from "schoolpic" class setup below */
div.rabbipic {
	/* 250x280, with 30px larger shadow */
	height: 280px;
	width: 310px;
	padding-top: 5px;
	padding-left: 5px;
	background-image: url(/Images/RBPhotoDropShadow-trans.png);
	background-repeat: no-repeat;
	margin: auto;
	margin-bottom: 1em;
}
div.rabbipic p {
	margin: 0;
	font-size: 0.5em;
	text-align: center;
}
div.rabbipic img {
	border: 1px solid black;
}

/* the pictures on the school page. This is one of the many ways in which I trim image sizes ;) */
div.schoolpic {
	/* images were 136x123; shadow pic was 30px larger */
	/*height: 153px;
	width: 166px;*/
	/* now they're 250x188 with 30px larger shadow */
	height: 218px;
	width: 280px;
	padding-top: 5px;
	padding-left: 5px;
	/*background-image: url(/Images/SchoolDropShadow-trans.png);*/
	background-image: url(/Images/TTPhotoDropShadow-trans.png);
	background-repeat: no-repeat;
}
div.schoolpic img {
	border: 1px solid black;
}

/* the school news menu */
/* technique borrowed from Mark Newhouse/ALA
 * http://www.alistapart.com/articles/taminglists/
 * He so totally rocks. Does he not?
 */
div.schoolmenu ul {
	margin: 0;
	padding: 0;
}
div.schoolmenu ul li {
	margin: 0;
	padding: 0 1em;
	border-left: 1px solid #000;
	list-style: none;
	display: inline;
}
div.schoolmenu ul li:first-child {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
}
div.schoolmenu.internal {
	margin: auto;
	text-align: center;
}
div.schoolmenu.internal.one {
	padding-bottom: 0.25em;
/*	border-bottom: 1px dotted #000;*/	/* looks better without than with */
	margin-bottom: 0.25em;
}