/* The Young Israel style sheet */

/* basic stuff */
a img {
  border: none;
}
a:hover img {
  border: none ! important ;
}
h4 {
  padding: 0;
  margin: 0;
}

/* 'more information' links */
.more {
  text-align: right;
}
/* invisible text , including things that are supposed to be hidden if scripting is enabled (in some browsers, <noscript> elements are removed entirely) */
.invis, html.js .noscript{ display: none; }

/* make the  "wrong" havarah invisible */
body.Ashkenazi .seph { display: none; }
body.Sephardic .ash { display: none; }

/* Invalid CSS for Internet Explorer */

/* for Google maps */
v\:* {
  behavior:url(#default#VML);
}
/* PNG transparency fix, from http://www.twinhelix.com/css/iepngfix/demo/ */
.IElt7 .fixPNG , .IElt7 .fixPNG * , #sidebar h2 , #sidebar legend {
  behavior: url("/inc/iepngfix.htc");
}

/* Peekaboo fix for IE */
body.IElt7 .module {
  zoom: 1;
}
/* End invalid CSS*/


/* drop shadow styles. Should use div > div , but IE can't handle it */
div.dropshadow {
  background:url("/images/shadow.gif") right bottom repeat; /* uses repeat; if the object is larger than the shadow it will show an ugly seam, but not as ugly as a huge gap */
}
div.dropshadow1 {
  background:url("/images/shadow_bl.gif") left bottom no-repeat;
}
div.dropshadow2 {
  background:url("/images/shadow_tr.gif") right top no-repeat;
}

/* Havarah buttons */
#havarah input:submit {
	-jquery-bodySwitcher: ;
}

/* for the overlabel plugin */
label.overlabel-apply {
  color:#999999;
  left:5px;
  position:absolute;
  top: -2px;
  z-index:1;
}
.IE label.overlabel-apply {
  top: 1px;
}
/* the fancy search box */
#search {
  display: inline-block;
  position: relative; 
  width: 150px; 
}
body.IE #search {
	display: inline;
}
#search label {
	-jquery-overlabel: ;
}
#q {
	display: inline-block; /* to allow setting height */
	position: relative;
  border: 0pt none;
  text-indent: 5px;
  margin-right: 2px;
	-jquery-hebrewKeyboard: {
		trigger: $('<li><a href="#keyboardtrigger" id="keyboardtrigger">Hebrew Keyboard</a></li>').insertAfter($(this).closest('li'))
		/* rather ugly to use this much javascript in the css. Not really what I intended jquery.cssparser to do */
	};
	-jquery-googleSearch: {
		position: "rb"
	};
}
#search input.image {
  position: absolute;
  right: 4px;
  top: 1px;
}
body.IE #search input.image {
  top: 3px;
}
/* the scrolling news */
.scroller {
  background: white;
}

/* the davening information plaque */
div.plaque {
  background-color: purple;
  width: 13em;
  float: right;
  padding: 0.5em;
  border: outset 3px gold;
  background: url(/images/woodgrain.jpg) brown;
}
.plaque.print {
  background: none white;
}
.plaque div.text {
  text-align: center; 
  font-family: Arial, sans-serif;
  color: beige;
  font-weight: bold;
  font-size: 1.4em;
}
.plaque.print div.text {
  color: black;
}
.plaque div.hebrew {
  direction: rtl;
}
.plaque hr {
  background: gold; /* different browsers use different things to color hr's */
  color: gold;
}
.plaque .sponsor {
  background: url(/images/brushedgold.jpg);
  margin: 0.5em;
  padding: 0.25em;
  font-family: Arial, sans-serif;
  color: black;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center
}
.plaque .sponsorfooter {
  font-weight: normal;
  font-size: 0.7em;
}

/* the search results */
#resultdisplay {
  position: absolute;
  z-index: 2;
  left: 230px;
  width: 324px;
  display: none;
}
.IE #resultdisplay { /* not clear why IE has this bug, but it needs a smaller width. Related to a box-model problem? */
  width: 310px;
}
#resultdisplay div.dropshadow2 div { /* frame the innermost div */
   background: white;
   border: 2px solid black;
   padding: 5px;
}
#resultdisplay div.dropshadow2 div div { /* undo the above, since IE6 doesn't get > */
   background: white;
   border: none;
   padding: 0;
}
#resultdisplay .inside {
  width: 300px;
}
#resultdisplay img {
  float: right;
  cursor: pointer;
}
#resultdisplay h1 {
  font-size: larger;
}
/* the new search box */
.searchresults {
	border: 5px outset silver;
	background: url('http://youngisrael-stl.org/images/para_bg.jpg') white repeat-x;
	width: 330px;
	padding: 5px;
}
.searchresults h2 {
  font-size: larger;
}
/* the gs- classes are applied by Google */
.gs-visibleUrl , .gs-watermark {
  display: none;
}
.gs-snippet {
  font-size: 0.9em;
  margin-bottom: 5px;
}
.gs-title {
  display:block;
}

/* border-collapse doesn't work with anything but tables, so we erase the top of each li and apply it to the ul */
/* boxlist is basically a single-column table */
ul.boxlist{
  border-top: 3px outset gray;
  padding: 0;
  margin: 5px; /* need border to clear the sidebar */
}

ul.boxlist li {
  list-style: none;
  border: 3px outset gray;
  border-top: 0;
  padding: 5px;
  margin: 0;
}

ul.boxlist h3 {
  padding: 0;
  margin: 0;
}

/* a simple table */
table.announcements caption {
  font-size: larger;
  font-weight: bold;
}

table.announcements , table.announcements th , table.announcements td {
  padding: 0.5em;
}

/* the week's summary */
#thisweek dd , #thisweek dl , #thisweek dt{
  margin: 0;
}
#thisweek dt {
  font-weight: bold;
}
#thisweek dd {
  margin-left: 4pt;
}
#thisweek .day , #thisweek .hebrewdate {
  /* the summary does not need the dates listed */
  display: none;
}

/* a table with 2 columns, each of which fills half the space */
table.halfwidth {
  border: 0;
  border-collapse: collapse;
  width: 75%;
  margin-left:auto;
  margin-right:auto;
  text-align: center; /* to center in ie */
}

table.halfwidth td {
  width: 50%;
}

/* for the calendar */
.calendar {
  border: 2px solid black;
  width: 98%;
}

TD.calendar-day {
  border: 2px solid grey;
  font-family:sans-serif;
  font-size: x-small;
  vertical-align: top;
  min-height: 4em;
}

.calendar caption {
  font-family: serif;
  font-size: larger;
  font-weight: bold;
}

.calendar caption a , .calendar caption a:visited {
  font-size: larger;
  text-decoration: none;
  color: blue;
}

.calendar caption a:hover {
  color: red;
}

.calendar .longformlink {
  float: left;
  clear: both;
}

.calendar .longformlink img {
  border: 0;
  padding: 1px;
}

.calendar .longformlink a:hover {
  border-bottom: 1px solid blue;
}

.calendar .day {
  text-align: right;
  font-weight: bold;
  font-size: larger;
}
.calendar .hebrewdate {
  text-align: center;
}

.calendar .event , .calendar .event a {
  text-align: center;
  font-weight: bold;
  font-size: larger;
}

.calendar .minorevent , .calendar .minorevent a {
  text-align: center;
}

.calendar .jewish {
  text-align: center;
  font-weight: normal;
}

.calendar .light {
  text-align: right;
  font-weight: normal;
}

/* for the lists of archives */
#announcementarchive li {
  list-style: none;
}

#announcementarchive ul {
  margin: 0;
  text-align: center;
  list-style-position: outside;
}

#announcementarchive th, #announcementarchive td {
  text-align: center;
  padding: 0 15px;
  vertical-align: top;
}

#announcementarchive img {
  border: none;
}

#gotodate  {
  text-align: left;
  font-family: sans-serif;
  font-size: small;
}

/* the sitemap */
#sitemap img {
  margin: 0 5px;
}

/* the lists of kosher organizations */
table.kosher {
  border-collapse: collapse;
}

.kosher-cell { /* make a 60-pixel margin on the left for the image */
  padding: 2px 2px 2px 60px;
  border: 2px solid gray;
  white-space: nowrap;
  font-size: smaller;    
}

.kosher-cell img { /* move the image into the 60-pixel margin */
  width: 50px;
  padding: 5px;
  position: absolute;
  margin-left: -58px;
}

.zmanim .day {
  font-weight: bold;
  font-size: larger;
  text-align: center;
}

/* Hebrew documents */

.hebrew {
  direction: rtl;
  font-family: Arial, sans-serif;
}
input.hebrew {
	-jquery-hebrewKeyboard: /* default */;
}
.hebrew em {
  text-decoration: underline;
}

.english {
  direction: ltr;
}

.sourceTable , .sourceTable th , .sourceTable td { /* for mekorot that use tables */
  border: 4px ridge grey;
  padding: 0.2em 0.5em;
  border-collapse: collapse;
}

/* schedule of classes */

table.schedule {
  border-collapse: collapse;
}

table.schedule caption {
  text-align: center;
  font-weight: bold;
  font-size: larger;
}

table.schedule td {
  border: 2px solid grey;
  padding: 5px;
}

/* for zebra striped tables */
.stripe1 { background-color: aliceblue; }
.stripehover { background-color: #bcd4ec; }

/* tables in columns. Used for Davening times */
.tablecolumn {
  float: left;
  width: 20em;
  padding-right: 1em;
}

.tablecolumn table {
  width: 100%;
  padding-bottom: 1em;
}

.tablecolumn table caption {
  font-weight: bold;
  font-size: large;
}

.tablecolumn table td {
  width: 50%;
}

/* for the photo layout. The photos are in a ul, with each li styled to look like a photo,
   with a series of photos in a div, absolutely positioned to overlay each other, and a span
   with the caption. The overlaying photos are designed to be hijaxed by an image cross-fader. */

ul.photos {
  padding: 0 5em;
  margin: 0;
  font-family: sans-serif;
}
ul.photos li {
  list-style: none;
  float: left;
  width: 7em;
  height: 8em;
  margin-bottom: 1em;
  margin-right: 1em;
  padding-top: 0.5em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 2px solid #aaa;
  border-right: 2px solid #aaa;
  background: #f0f0ff;
  overflow: hidden;
}
ul.photos li div{
  display: block;
  position: relative;
  width: 5em;
  height: 5em;
  left: 1em; /* (width of container - width of this)/2 to center */
  padding-bottom: 0.4em;
}  
ul.photos li div img {
  position: absolute;
  width: 5em;
  height: 5em;
  border: none;
}
ul.photos li span {
  display: block;
  text-align: center;
}

/* The news scroller. */
/* unfortunately, with the iframe with the announcements and all the 
   quirks of a scrolling floating element, we need to use hard-wired
   pixel sizes for positioning. This is far too hacky.
*/

.scroller-container {
  position: absolute;
  left: 640px; /* move to the right side */
  width: 350px;
  padding: 0 10px;
}

.scroller-container h2 {
  height: 2.5em;
  padding: 0;
  margin: 0.5em 0 0 0;
}

.scroller-container a.expand {
  font-family: sans-serif;
  font-weight: bold;
}

.scroller-container div.dropshadow {
  width: 340px;
}

.next-to-scroller {
  width: 390px;
  height: 12em;
}

.scroller {
  height: 8em;
  overflow: auto;
  border: 1px solid black;
  font-size: smaller;
  font-family: sans-serif;
}

.iframe {
  width: 730px;
  overflow:visible;
  border: 3px inset black;
}

/* The Hebrew Keyboard */
.hebkeyboard {
  width: 40em;
  margin: auto;
}
.hebkeyboard div {
  direction: rtl;
}

.hebkeyboard input {
  cursor:pointer;
  font-family: lucinda, arial, sans-serif;
  font-weight: bold;
  font-size: 16pt;
  color: black; 
  background-color: aliceblue;
  width: 2.5em;
}
.indented {
  padding-right: 1.25em;
}

/* the contact us form */
#mailform label {
  display: block;
  width: 23em;
  text-align: right;
}
#mailform label input , #mailform label select {
  width: 15em;
}
#mailform span {
  text-align: right;
}
#mailform textarea {
  width: 99%;
}
.more_expanded {
  cursor: pointer;
  display: list-item;
  list-style: inside url("/images/collapse.gif");
}
.more_collapsed{
  cursor: pointer;
  display: list-item;
  list-style: inside url("/images/expand.gif");
}
/* the hebrew keyboard */
.keyboardContainer {
	border: 5px outset silver;
	background: url('http://youngisrael-stl.org/images/para_bg.jpg') white repeat-x;
	width: 486px;
	overflow: hidden;
}
#weather div.weather {
  clear: both;
}
div.weather {
	margin-bottom: 1em;
}
.articlelist img , #shiurnotes img {
  margin: 0px 4px;
}
object.metaobject { /* for the metaobjects plugin, don't show the object */
  display: none;
}
div.mapoverlay { /* for things that are put onto images that are used as unobtrusive, javascript-free versions of Google maps */
  position: absolute;
}
div.made_infowindow { /* for infowindows in Google maps, make sure we don't interfere with positioning */
  position: static;
  float: none;
}

/* date input fields use flexcal */
input.date {
	-jquery-flexcal: { 
		position: 'bl', 
		calendars: ['en', 'jewish', 'he-jewish'], 
		'class': 'multicalendar',
		shown: function() {$(this).flexcal('box').scrollIntoView()}
	};
}

/* collapsed headers use jquery.more.js */
.make_more {
	-jquery-more: /* default */;
}

/* inline audio player */
audio {
	width: 80px; 
	display: inline-block;
}
a.playableaudio {
	-jquery-inline_mp3: "/inc/player.swf";
}

/* Markdown styling uses block quotes for indentation, so we want the margins to be less obtrusive */
.markdown blockquote {
	margin: 0 0 0 1em;
}