/* styles for "Poem(s) of the Day", by Mike Roam, Saint Ann's School  */
 /* Revised 5 Nov 2010 to make poemtext have "white-space: pre-wrap;" which is like <pre> but allows line wrap when going out of bounds. This way I don't have to use breaks in long-lined p's! (Safari 5 & Firefox 3 and IE 8 like it (but not ie <8, according to http://www.quirksmode.org/css/whitespace.html 
 IE 6+ are happy with "white-space:pre;" ... can I trick IE into using it? One idea is redefining 
 pre { word-wrap: break-word; }    // Internet Explorer 5.5+
 ... This IE<8 problem is that 
 I was going to use p with style white-space:pre-wrap for poems with long lines, and then poems with long lines in p's will render poorly in IE<8.
 How about if I continue to use pre for everything even with long lines,
 knowing that everywhere but IE<8 will get nice breaks where necessary, ...and
 what kind of mess will IE<8 make? Will word-wrap:break-word suffice for IE?
 Should I add it manually to poems that have long lines, p class='poemtext' style='word-wrap: break-word;' ??
 There's a long-lined example poem at 28oct2010 ...
 Meanwhile, I still want to remove all <br /> from long-lined poems, but how would I ever put them back? Re-export since the poem-webber poems still have the <br />'s??
 Okay, not removing <br /> from old poems yet, though this makes poems with breaks be double line spaced...
 */
 /* Revised 17 nov 2007 to lighten the block that contains the poem, and
 shrink the navigation text and make the navigation text sans-serif. */
 /* Revised 6 May 2004 to bolden the current page's header ("toc_here") on nav bar.
    Revised 1 Mar 2005 to include navigation lists.
    Note: dark blue is 00F.    */



body { 
	margin-left:0.5em; margin-right:0.5em;  margin-top:0em; margin-bottom:1.0em;
	background-color:#FFC; color:#003;
	font-family:Arial,Helvetica,Verdana,sans-serif;
}
h1 { text-align:left; font-size:1.2em; margin: 1.5em 3em  0 0; /* T(B) L(R) */}
h2 { text-align:left; font-size:1.1em; margin: 1.3em 3em  0 0; /* T(B) L(R) */}
h3 { text-align:left; font-size:1.0em; margin: 1.1em 3em  0 0; /* T(B) L(R) */}

.nav_with_history  /* .navigation*/ { 
	text-align:left; font-family:Arial,Helvetica,Verdana,sans-serif; font-size:0.8em;
	margin: 0em;
	padding: 0em;
	/* for debug--border: green thin solid; */
}
.nav_simple { 
	font-family:Arial,Helvetica,Verdana,sans-serif; 
	text-align:center;  /* not working..., do I need width:30% or margin-left:30%; ?? */
	margin-left:20%;
	font-size:0.8em; 
	/* bad on iphone: position:fixed; bottom:0;  /* need to force rest of page to roll up above this */
	background-color: #FFC;
	color: #003;
}
.navigation2 { text-align:center; font-family:Georgia, 'Times New Roman', Times, serif;}
.nav_scoot { /* separates the (left side) history from the (center-ish) [basic] [four] [nav] [buttons]*/
	padding-left:2.25em;
}

.toc_here  { font-weight:bold; }

a:link { color: #006; }       /* unvisited link */
a:visited { color: #666; }   /* visited links */

.docdate { text-align:right; font-size:0.8em; }

/* Poem specific styles */
.calendar { /* div that holds calendar (table) */ 
	margin-left:20%;  
	/* border: thin solid green; */
}

.poemcal {  text-align:left; font-family:Georgia, 'Times New Roman', Times, serif;  border:solid; border-width:thin; }
.poemnav { text-align:left; font-size:0.8em; }
.prevmonth { font-size:0.8em;  }
.currmonth { background-color:#FC6;   }
.nextmonth { font-size:0.8em;  }

.prevpoem { font-size:0.8em;  }
.nextpoem { font-size:0.8em;  }

/* the "poem" is a div, with title, text, and byline (w/ author & p#) */
.poem   { margin: 2em  3%; /* TB LR */ 
	/*text-indent:-01.2em;  affects first line of para, seems to not effect lines after <br /> */ 
	border:solid; border-width:thin; 
	/* width:80%; */min-width:8em; /* max-width:30em;  */
	font-family:Georgia, 'Times New Roman', Times, serif; 
	background-color:#EEE;
}

/* trying to have the continuations of long wrapping lines of a poem be indented (so the first line is outdented). This is working for John W.'s 6 sep 2011 bonus about "dog lick" in safari 5 and firefox 5; and might have applied to Katherine's snake style poem, except there is leading space between each div. I'm treating each line as a paragraph or div, had to use negative margin rid of the automatic spacing. Will this work in any version of IE? Maybe use list-items instead for each line of the poem? */
.poem_outdent {
      text-indent:-3em; margin-left: 4em; 
      margin-top:0px; margin-bottom:-1em;
     /* background-color: green; */
}

	.poem2008   { margin: 3em  8%; /* TB LR */ 
	/* text-indent:2em; seems to not effect lines after <br /> */ 
	border:solid; border-width:thin; width:80%; 
	font-family:Georgia, 'Times New Roman', Times, serif; 
	background-color:#EEE;
}

.poemtitle { font-size:1.6em; font-weight:bold; margin-left:3em; margin-right:3em;  border-bottom: 1px solid gray;  }
.poemtext {  
	white-space: pre-wrap; /* like <pre> but allows line wrap when going out of bounds. */
	/* text-indent:2em;*/ margin-left:1em; font-size:1.1em; text-align:left; 
	/* have to specify font to override the enclosing 'pre' */  
font-family:Georgia, 'Times New Roman', Times, serif; 
}

.poembiginit { /* for large leading letters */ font-size:1.1em; font-weight:bold; }

/* Here's the Poet credit paragraph styles... */
	.poembyline { margin-left:4em; margin-top:2em; margin-right:4em; 
		 border-top: 1px solid gray;  background-color:transparent; color:#000033; }
	.poemauthor { font-size:1.4em; }  /* deprecated: get rid of! */
	.poempoet { font-size:1.4em;  }
	.poemcount { font-size:0.75em; color:#0000CC; }
	
	.poembonus { /* hilighting the link to bonus poems */  font-size:1.2em; margin:1em; }
	
	/* note: thinking <sup> tag is better than <span style="superscr"> */
	sup { vertical-align:super; font-size:0.75em; }
	.superscr  { vertical-align:super; font-size:0.75em; }
	sub  { vertical-align:sub; font-size:0.75em;}
	.subscr { vertical-align:sub; font-size:0.75em;}
	
/* following are for lists which appear on one line.
(These used to be #horizlist  and chosen by <li class="horizlist"> but the drawback
with using id is that id's have to be unique on the page, so you're allowed only one
id=horizlist on a page but as many class="horizlist" as you want.)
To use them, say  <ul class="horizlist">  and then <li> or <li class="here"> */
.horizlist { padding: 0 1px 1px; margin-left: 0; /* font-weight: bold; font-family: Verdana, sans-serif; */}

.horizlist li { list-style: none; margin: 0; border-top: 1px solid gray; display: inline; 
padding: 0.1em 0.2em 0.1em 0.3em; border-left: 0.5em solid #CCC /* was #AAB; */  }

.horizlist li a { background: #CDC; /* was CCD */
/* padding: 0.1em 0.2em 0.1em 0.3em; border-left: 0.5em solid #AAB; */
        /* text-decoration: none; */ }
.horizlist li a:link { color: #333; }
.horizlist li a:visited { color: #669; }
.horizlist li a:active  { color: #69C; }
.horizlist li a:hover { border-color: #FE3; color: #FFF; background: #332; }

.here a:link, .here a:visited, .here a:hover
      {  border: 1px solid #333;  background-color: #F6F; border-left: 0.5em solid #996;
      background-image: url(images/l1_over.gif); color: #333;    }

	/* for rec arts TD's only; padding is top, right, bottom and left */
	/* td {  padding: 0.1em 0.5em 0.1em 0.5em;  border-style: solid solid /* dotted * / none none } */
	
	/* for definition lists... in the competitors and venues file */
	dt {  border-style: solid none none none; font-weight:bold; font-size:1.2em; }

/* WARNING: negative text-indent doesn't work in IE 5 unless you do some
nonsense about outer container and outer-outer container having "hasLayout:false". 
hmm. wassup, my right margins are miniscule when my div has
style="text-indent:1em; margin-left: 0em;" */

   /* Comment: End of style file */