body { position: relative; min-width: 600px; width: 99%; margin: 0; padding: 0; border: none; }
	.middle p {
 text-indent: 2em;
	 font-size: 14px;
	 font-family:  georgia, verdana, "Times New Roman", Times, sans-serif;
line-height: 150%;
}
/*.  p.poem has no indent  */
p.poem {
 text-indent: 0em;
line-height: 180%;
}

	.middle li {

	 font-size: 14px;

}


/*.  cambria,
1. body and main p style---see above
2. three main panels
3. top styles navigation box. start with "title"
4. styles applicable to all
5. styles applicable only to index page
6. orphaned styles 

all styles inside the blue top navigation box start with title, titleleft, titlebylinesmallersize, titleright See below 
Note: this applies only to erotic notions box; unbuttoned tales will have a different color and a different class "topunbuttoned" which otherwise will be exactly the same */


.top { position: absolute; top: 3px; left: 0; min-width: 600px; color: white; width: 100%; height: 60px; 
z-index: 1; 
			   border: 0;
background : #336699; 		 
padding: 5px; }

.topunbuttoned { position: absolute; top: 3px; left: 0; min-width: 600px; 
color: #cc0066;
 width: 100%; height: 60px;
			   border: 0;
	background : #ffff00;
	z-index:1;		 
padding: 5px; }

/*.  .middle, and .right are layout for  story pages only.  left 2, middle2, and right2 go only with the index page*/

.middle { position: absolute; top:100px; left:7%; min-width: 360px; width: 60%; margin-top: 1%; }
.right { position: absolute; top:100px; left: 67%; width: 31%;  margin: 1% 0 0 1%;  text-align: right;     }



/*. .left2, .middle2, and .right2 go with index.html. */

.middle2 { position: absolute; top:90px; left:4%; min-width: 360px; width: 46%; z-index: 500;margin-top: 0%; }

.right2 { position: absolute; top:90px; left: 52%; width: 46%; min-width: 360px; margin: 1% 0 0 1%;text-align: right; 
 }

.right2 a:hover {
background-color: #ebe889;}

/* subtitleblue gives light blue font for email paragraph on index page*/
.subtitleblue {font-size:12px; font-family: cambria, verdana, "Times New Roman", sans-serif; color:#369; font-weight: normal; text-indent: 2em;
line-height: 90%;
}

/* Start titlebox styles. titleleft establishes 75% width, 3% left margin for left title link text */


.titleleft{
 padding:0;
  margin:0; 
position: absolute;
width: 71%;
	font-weight:bold;
	text-align: left;
		margin-left: 2%;
font-family:  Verdana, Helvetica, Arial,  Constantia,  sans-serif;

font-size: 22px;}

/*want to replace div.titleleft with h1.titleleft Will do it gradually. Not sure what effect it will have, so in the meantime am putting identical style info in both. */

h1.{
 padding:0;
  margin:0; 
position: absolute;
width: 71%;
border: inherit;
	font-weight:bold;
	text-align: left;
		margin-left: 2%;
	font-family:  Verdana, Helvetica, Arial, sans-serif;
font-size: 20px;
vertical-align: inherit;}

h3{
font-size: 1.3em; 
margin-left: 5%;
}



.titleleftsmaller{
padding:0;
  margin:0; 
position: absolute;
width: 71%;
	font-weight:bold;
	text-align: left;
		margin-left: 2%;
font-size: 17px;
font-family: Verdana, Helvetica, Arial, sans-serif;}

.titlebylinesmallersize {
	font-size:14px;
} 


.titleright {
	font-size:14px;
	font-family: verdana, calibri, sans-serif;
	font-style:italic;
	text-align: right;
	vertical-align: middle;
	z-index: 4; 
	} 


	.titleright a:link {
		color:yellow;
	}
.titleright a:visited {color:orange;}
.titleright a:hover {
color: red;}
/* end blue titlebox styles.  */

.topunbuttoned h1.titleleft {
font-family:  "Comic Sans", Trebuchet, sans-serif;
width: 71%;
color: inherit;
background: inherit;
	text-align: left;
		margin-left: 2%;
font-size: 20px;
}

.topunbuttoned	.titleright a:link {
		color: navy
	}
.topunbuttoned  .titleright a:visited {color: maroon}
.topunbuttoned .titleright a:hover {
color: red;}


.rightcolumncaption {
	text-align: center;
	color: navy;
	font-size: 1.2em;
width: 90%;
	font-weight: bold;
	margin-bottom: 25px;
	font-family:  Geneva, Arial, Helvetica, Calibri,sans-serif;


}

.prefacetext {
color: #0c8000;
font-family: serif;
font-style: italic;
font-size: 11em;}

.picturecaption {

color: purple;
font-style: italic;
font-size: .8em;
	padding-top: 5px;
	padding-bottom: 5px;}

img 
{text-decoration: none;
border: none;
}

a img {
text-decoration: none;
color: white;
background: white;
border: none;}


a:hover img {text-decoration: none;
border: none;}


.darkgreen {
	color: #009900;
}

/* colored update box  */
.update {
	border:2px dotted #666;
	background:#E7F1F3;
	padding:6px;
	font-family:corbel, verdana, arial, sans-serif; 
	font-size: small; 
	color: #333;
text-align: left; 
	background-repeat:no-repeat;
	padding-top:5px;
margin-top: 2em;}

.unchanginglinks {
	border:2px dotted #666;
	background: #f3c8f8 no-repeat;
	padding:6px;
	font-family: corbel, verdana, arial, sans-serif; 
	font-size: small;
text-align: left;
padding-top:5px;
color: black;
margin-top: 2em;}

.unbuttonedtoc {
	border:2px dotted #666;
	background: #f9f569 no-repeat;
	padding:6px;
	font-family:verdana, arial, sans-serif; 
	font-size: small; 
	color: #e7291b;
text-align: left;
padding-top:5px;
margin-top: 2em;}

.donate {
	font-weight: bold;
	color: #290CB8;
	display: block;
}
/* sort of boring bold blue font for quotations in middle column */
.quotation
{font-weight: bold;
color: navy; 
font-size: 1.1em;
text-align: left;
	margin-left: 8%;

}
.right div.license
{
	display: block;
	padding-top: 7px;
	padding-bottom: 2px;
}

/*.tinytext, small indenting for expanded legal notice link text
*/
.tinytext{
font-size: .7em;
font-style: italic;
color: #330066;}


/* interlude covers link colors, orange italics for the story interludes*/

.interlude {margin-left: 1em;}
.interlude a:link{
	font-style: italic;
	color: #32CD32;
/*	text-indent: 8px;*/
}
.interlude a:hover{
	font-style: italic;
	text-indent: 8px;
	text-decoration: none;
}
.interlude a:visited{
	font-style: italic;
	color: #006400;
/*	text-indent: 8px;*/
}/* index page red summary at top */
.highlight {font-size: 12px; font-family: verdana, sans-serif; color:#CC3300; font-weight:bold;
text-align: left;
margin-left: 5em;}

	/* index page quote in right panel Georgia italic*/
	.epigraph {
	text-align: right;
		padding: 14px;
font-family:  Georgia, Verdana, Trebuchet, sans-serif;
font-style: italic;}
		/* seealso goes on the about page to indicate prominent links in the main text panel at the top. sort of lot an epigraph but uglier.  ./*/
.seealso{font-style: italic;
	color: #006400;
	text-indent: 2px;
	font-weight: normal;
	text-align: left;
	font: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;}
	
	.commentform{
visibility: visible;}
		/* commentform is an empty style used to enclose the comment form. ./*/
		
			/* using this for separator text in middle panel./*/
	.centeralign{
text-align: center;}

/*.linksection goes in index page on right box. It contains links and interludes, with span.hidden hiding tooltip descriptions and a: hover revealing them. */

.linkssection {font-weight: bold;} 

.linkssection a:hover {
background-color: gray;
text-decoration:none;}
/*.linkssection */
a span.hidden {display: none;}
/*.linkssection*/
 
 .middle2 a:hover span.hidden {
   display:block;
  margin-left:10em;
    padding:2px;
   z-index:5;
   color:black;
position:absolute;
   border:1px solid black;
   font-weight: normal;
   width: 25em;
   color: yellow;
font: 10px Verdana, sans-serif; 
text-indent: 0em;
   text-align: inherit;
background-color: #110079;}

 .right2 a:hover span.hidden {
   display:block;
  margin-right:-3em;
    padding:2px;
   z-index:5;
   color:black;
position:absolute;
   border:1px solid black;
   font-weight: normal;
   width: 20em;
   color: yellow;
font: 10px Verdana, sans-serif; 
text-indent: 0em;
   text-align: inherit;
background-color: #110079;}


/*the ul within .linkssection won't have bullets, and be indented and be bold. */

.linkssection ul {list-style-type: none;
padding: 0;
margin-left: 1em;}
.linkssection li 
{
text-indent: -1em;}

.linkssection li a
{
font-weight: bold;}

blockquote {
margin:0;
padding:1em  5em 1em 7em;
font-style: italic;
font-size: .75em;

}