/* css for Bunch of Fives. It begins with general css rules for the pages of stories and ends with specific rules for the Bunch of Fives-specific index page*/


body   {
      font-family: Constantia, Times New Roman, Georgia, serif;
	  width: 1060px;  
}
body p {
      font-family: Calibri, Arial, sans-serif;
}

#outerContainer  {
   margin: 0;
   padding: 0;
   width: 1060px;
   font-style: normal;
   font-weight: 400;
   font-size: 12pt;
   line-height: 1.2;
   color: black;
   background-color: white;
}
img   {
      border: none;
}
#topWrapper  {
      margin: 75px 0 0 120px;

}
#taleFive #movingTable {
	  margin: 0 0 0 0;
      padding: 0 30px 100px 0;
	  background-color: white;
	  float: left;
	  width: 280px;
}

#taleFive.chaucer #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(209,161,27);
	  background-image: url(../production_images/pngs/transparent_daisy_2.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.purgatory #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(167,20,0);
	  background-image: url(../production_images/pngs/transparent_snowdrops.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.saints #hawk {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(113,58,51);
	  background-image: url(../production_images/pngs/transparent_clematis.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.medievalRom #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(36,23,7);
	  background-image: url(../production_images/pngs/transparent_wildroses.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.arthurian #hawk  {
      position: relative;
	  top: 0;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(36,23,7);
	  background-image: url(../production_images/pngs/transparent_poppy.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.religious #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(75,87,51);
	  background-image: url(../production_images/pngs/transparent_convolvulus.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.contemporary #hawk  {
      position: relative;
	  top: -0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(36,23,7);
	  background-image: url(../production_images/pngs/transparent_harlequin.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.animals #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(30,29,95);
	  background-image: url(../production_images/pngs/transparent_columbine.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#taleFive.dreams #hawk  {
      position: relative;
	  top: 0px;
	  left: -20px;
      width: 250px;
	  height: 250px;
	  background-color: rgb(36,23,7);
	  background-image: url(../production_images/pngs/transparent_rose.png);
	  background-position: top left;
	  background-repeat: no-repeat;
      margin: 0 0 10px 0;
      padding: 0 0 0 0;
}
#topNav {
      position: relative;
      left: 70px;
      margin: 0 0 0 0;
      padding: 0;
      height: 40px;  
}	  
#bookNav  {
     text-align: left;
	 padding: 0px;
     margin-top: 0px;
}
#bookNav a:hover { 
	  color: blue;
	  font-weight: 700;
}

#taleFive h1 {
      margin-bottom: 60px;
      font-size: 24pt;
}
#taleFive h2  {
      text-align: left;
	  margin-top: 50px;
	  margin-right: 60px;
	  color: rgb(103,135,160);
}
#taleFive #descBlurb {
     margin: 0 0 0 0;
	 font-style: italic;
     font-size: 12pt;
     color: black;
     font-weight: 700;
	 padding: 0 20px;
     margin: 0 120px 0 0;
     padding: 0 0 0 0; 
}
#taleFive #mainContent {
     margin: 0 10% 60px 5%;
     font-size: 12pt;
     color: black;
     font-weight: normal;
	 padding: 20px;
	 clear: left;
	 width: 700px;
	 border: 2px solid black;
}
#taleFive #mainContent h3  {
      text-align: center;
	  margin: 40px 0 50px 0;
	  color: rgb(80,80,80);
}
#taleFive #mainContent p {
      font-size: 11pt;
	  text-align: left;
	  margin-left: 30px;
	  margin-right: 30px;
}
#taleFive #mainContent ul {
      list-style-type: none;
	  font-size: 11pt;      
}
#MEintro  {
      color: red;
}
span.firstMEwords {
      font-size: larger;
}
span.comment  {
      font-size: smaller;
}

span.numb  {
      font-size: x-small;
	  position: relative;
	  top: -8px;
}
p.initialPara {
      margin-top: 80px;
}
span.sectionIntro  {
      font-size: larger;
      color: darkblue;
}
.lastPara  {
      padding-bottom: 20px;
}
q.bookquote  {
	  font-style: italic;
}
q.meng  {
      text-decoration: none;
	  color: rgb(40,40,180);
	  font-style: italic;
}
#meQuote {
      list-style-type: none;
	  margin-left: 20%;
	  color: red;		
}
.topas {
      color: rgb(180,0,100);
	  font-weight: 700;
}
#notes  {
      margin: 20px 12% 20px 5%;
	  width: 700px;
}
#notes h2  {
      font-size: 14pt;
	  margin-bottom: 40px;
}
#broomstick  {
      margin: 30px;
	  width: 700px;
	  font-size: 12pt;
}
#refs  {
      margin: 30px;
	  width: 400px;
	  font-size: 12pt;
}
#refs h2  {
      font-size: 14pt;
	  text-align: left;
	  margin: 40px 0 40px 0;
	  color: rgb(125,137,115);
}
#Amazon  {
      margin: 50px;
	  width: 350px;
	  font-size: 12pt;
	  margin-bottom: 30px;
}
#Amazon h2  {
      font-size: 14pt;
	  text-align: left;
	  margin: 40px 0 40px 0;
	  color: rgb(125,137,115);
}
#Amazon a {
      margin-right: 30px;
}
#Amazon *.comment {
      font-size: smaller;
} 
#nextPageBottom  {
      text-align: center;
	  font-size: 14pt;
	  margin-top: 30px;
	  margin-bottom: 30px;
	  margin-right: 30px;
	  border-top: 1px solid black;
}
#nextPageBottom  a:hover {
      color: blue;
	  font-weight: 700;
}
#footer  {
      font-size: 12pt;
	  text-align: center;
	  width: auto;
	  padding-bottom: 10px;
	  margin-right: 30px;
	  position: relative;
	  top: 80px;
}
#footer p {
      margin: 20px 200px 10px 200px;
}
#w3valid  {
      margin-left: 600px;
}
/* ------ are the following used any more? ----- */

#firstWords  { 
      font-size: larger;
	  color: blue;
}
#taleSummaries p {
      font-family: Constantia, Times New Roman, Georgia, serif;
}

/* ------------- */


/* css rules for the title bar at the top of the page follow. */

#endThree  {
      position: absolute;
	  top: 0px;
	  left: 0px;
	  background-color: rgb(97,155,167);
	  background-image: url(../production_images/pngs/wildRose.png);
	  background-position: top left;
	  width: 1030px;
	  height: 30px;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.purgatory #endThree  {
	  background-color: rgb(239,60,17);
}
#taleFive.chaucer #endThree  {
	  background-color: rgb(237,183,12);
}
#taleFive.saints #endThree  {
	  background-color: rgb(215,129,128);
}
#taleFive.medievalRom #endThree  {
	  background-color: rgb(154,119,3);
}
#taleFive.arthurian #endThree  {
	  background-color: rgb(249,163,18);
}
#taleFive.animals #endThree  {
	  background-color: rgb(91,61,147);
}
#taleFive.religious #endThree  {
	  background-color: rgb(255,255,255);
}
#endFour  {
      position: absolute;
	  top: 30px;
	  left: 0px;
	  background-color: rgb(14,68,6);
	  background-image: url(../production_images/pngs/gradient_2.png);
	  background-position: top left;
	  width: 1030px;
	  height: 30px;
	  margin: 0px;
	  padding: 0px;
}
#endFour p span.topleftBacknav  {
      margin: 0;
      padding: 0 0 0 116px;
}
#endFour p span.toprightBacknav  {
      margin: 0;
      padding: 0 0 0 340px;
}
#endFour p span.separation  {
      margin: 0;
      padding: 0 20px;

}
#taleFive.purgatory #endFour  {
      background-color: rgb(255,255,0);
}
#taleFive.chaucer #endFour  {
      background-color: rgb(40,82,0);
}
#taleFive.saints #endFour  {
      background-color: rgb(106,65,43);
}
#taleFive.medievalRom #endFour  {
      background-color: rgb(36,23,7);
}
#taleFive.arthurian #endFour  {
      background-color: rgb(90,158,171);
}
#taleFive.animals #endFour  {
      background-color: rgb(169,153,241);
}
#taleFive.religious #endFour  {
      background-color: rgb(255,255,255);
}
#endFour p  {
      color: white;
	  font-size: 14px;
      margin: 5px 0 0 0;
      padding: 0;
}

#endFour a  {
      color: white;
	  text-decoration: none;
      margin: 0px;
      padding: 0px;
}

#endFour  a:link  {
      color: white;
}
#endFour  a:visited  {
      color: white;
}
#endFour  a:hover  {
      color: blue;
}
#endFour  a:active  {
      color: blue;
}
#endFive  {
      position: absolute;
	  top: 60px;
	  left: 0;
	  width: 1030px;
	  height: 10px;
	  background-color: rgb(139,223,86);
	  margin: 0px;
	  padding: 0px;
}
#taleFive.purgatory #endFive  {
	  background-color: rgb(201,67,16);
}
#taleFive.chaucer #endFive  {
	  background-color: rgb(81,84,13);
}
#taleFive.saints #endFive  {
	  background-color: rgb(215,129,128);
}
#taleFive.medievalRom #endFive  {
	  background-color: rgb(180,179,131);
}
#taleFive.arthurian #endFive  {
	  background-color: rgb(180,179,131);
}
#taleFive.animals #endFive  {
	  background-color: rgb(20,6,81);
}
#taleFive.religious #endFive  {
	  background-color: rgb(239,240,232);
}
#endSix  {
      position: absolute;
	  top: 0;
	  left: 0;
	  width: 106px;
	  height: 70px;
	  background-image: url(../production_images/blue_butterfly.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.purgatory #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 130px;
	  height: 70px;
	  background-image: url(../production_images/heatandFire.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.chaucer #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 92px;
	  height: 70px;
	  background-image: url(../production_images/chaucer_daisies_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.saints #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 237px;
	  height: 70px;
	  background-image: url(../production_images/icyClematis_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.medievalRom #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 94px;
	  height: 70px;
	  background-image: url(../production_images/wildroses_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.arthurian #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 93px;
	  height: 70px;
	  background-image: url(../production_images/arthurian_thumbnail_2.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.religious #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 132px;
	  height: 70px;
	  background-image: url(../production_images/religious_fives.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.dreams #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 93px;
	  height: 70px;
	  background-image: url(../production_images/roseGarden_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.contemporary #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 99px;
	  height: 70px;
	  background-image: url(../production_images/harlequin_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}
#taleFive.animals #endSeven  {
      position: absolute;
	  top: 0;
	  left: 360px;
	  width: 125px;
	  height: 70px;
	  background-image: url(../production_images/columbine_thumb.jpg);
	  background-position: top left;
	  margin: 0px;
	  padding: 0px;
}

/* */
/* specific rules for the index page follow */
/* */

#bofContents  {
      font-style: normal;
      font-weight: 400;
      font-size: 12pt;
      line-height: 1.2;
      color: rgb(97,155,167);
      background-color: white;
}
#aboveTable  {
     margin: 100px 180px 10px 100px;
}
#tableContent  {
     margin-left: 190px;
}
#bofcTitle  {
     color: rgb(28,42,25);
     text-align: center;
     font-size: 20pt;
     font-style: italic;
     font-weight: 700;
	 margin: 0 0 10px 0;
	 }
#bofcSubtitle  {
     color: rgb(28,42,25);
     text-align: center;
     font-size: 14pt;
     font-style: italic;
     font-weight: 700;
	 margin: 10px 0 10px 0;
	 }

#tableContent table ol {
     list-style-type: none;
	 font-size: 12pt;
     line-height: 1.3;
	 font-weight: 700;
}
#tableContent tr.titles  th  {
     text-align: center;
	 font-size: 18pt;
	 color: rgb(14,68,6);
	 background-color: rgb(116,169,185);
}
#tableContent tr.stories  {
     font-size: 12pt;
	 line-height: 18pt;
	 background-color: rgb(219,241,248);
	 color: rgb(78,107,137);
}
#tableContent tr.stories a:link {
	 color: black;
}
#tableContent tr.stories a:visited  {
     color: rgb(38,81,36);
}
#tableContent tr.stories a:hover  {
     color: blue;
}
#tableContent tr.stories a:active  {
     color: red;
}
#introD {
     text-align: center;
	 padding-top: 15px;
	 font-size: 12pt;
}
#introD a:link {
     color: rgb(38,81,36);
	 font-weight: 700;
}
#introD a:visited  {
}
#introD a:hover  {
     color: blue;
}
#introD a:active  {
     color: red;
}

/* END css rules for Bunch of Fives pages */