/*    cream color for backgrounds  is #fef8c3  ****************************************/
/*    darker khaki is #e5de9c  *******************************************************/

body{
    background-color: #000000; /*set background default to black*/
    
    
   
    /*global styles to strip browser padding and margins*/  
    margin: 0; padding: 0;}  
    h1,h2,h3,h4,h5,h6 {margin:0; padding: 0;}
    p{margin:0; padding:0; line-height: normal; }
    ul{margin: 0; padding:0;}
    ul>li {padding: 0; margin: 0;}
    
    h3, h4, h5{padding: 5px 0 2px 0;text-align: center; width: 675px; font-family: Georgia, Times New Roman, Serif; }
    h6 {padding: 0 0 0 0; width: 675px; text-align: center; border: none;}
    
    
    
    
    

#container /*wraps entire site to center it*/
    {width: 705px; margin-left: auto; margin-right: auto;overflow: scroll;}
    
    
 
#content /*puts content at the very top and contains the editable area and sets some site-wide styles*/
{width: 705px;  background-color: Transparent; color: #000000; /*color of text*/ top : 0;  position: absolute;/* border: solid 1px  #fef8c3;*/border-left: solid 1px #e5de9c; border-right: solid 1px #e5de9c;
font-family: Verdana, Arial, Sans-Serif;  font-size: 100%;}
    
/*this header style is for the index page - taller and different image from other pages*/ 
#header{background-image: url(images/header.jpg); background-color: Transparent; background-repeat: no-repeat; height: 151px; width: 705px;}


/*this header for all subpages - shorter and different image from index page*/
#header2{background-image: url(images/header-sub-pages.jpg);background-color: Transparent; background-repeat: no-repeat; height: 151px; width: 705px;}


/* for navigation styles on ALL pages **************************************************/
#navigation
{
    background-color:transparent;
    position:absolute;
    height: 28px;
    text-align: center;
    width: 700px;
    top: 125px;
    z-index: 100;
    
    
    
    z-index: 50;
    color: #fef8c3;
    
}

#navigation ul
    { 
       z-index: 50;
    }

#navigation ul li
{
    display: inline;  
    text-align: center;
    list-style: none;
    padding: 0 25px 0 25px;
    margin-left: -25px;
}

#navigation ul li a {
    color: #fef8c3;
    text-decoration: none;
}

#navigation ul li a:hover{
    color:#fef8c3;
    text-decoration: overline underline;
   
}

/*** styles for the large WWS logo on home page ****************************************/
.logo{background-image: url(images/WWS-logo.gif); background-color: Transparent; background-repeat: no-repeat; position:absolute; top: 160px; width: 400px; height: 158px; margin-left: 135px; z-index: 100;}


 /*******holds editable/changeable info*************************************************/
#info {width: 700px; background-color: Transparent; }
#info a {color: #80784d;text-decoration: none;}

#info a:active{color: #80784d;text-decoration: none;}
    
#info a:hover{color: #80784d; background-color: #e5de9c; padding: 1px 3px 1px 3px;text-decoration: overline underline;}
    
#info a:visited{color: #80784d;text-decoration: none;}
  
  
  
  
  
/**** the top part of the cream rounded corners image*****************************************/    
#upper{background-image: url(images/upper.gif); background-repeat: no-repeat; background-color: Transparent;  width: 675px; height: 75px; margin-left: auto; margin-right: auto;}

/**********the middle part of the cream - the part with straight edges on the sides and right angles too***/

#center{ background-image: url(images/center.gif); background-repeat: repeat-y;  width: 675px;  margin-left: auto; margin-right: auto; top: 160px;background-color:#fef8c3;  }


 
/****editable text appearing top and center of page************************************************/
    #topText{width:675px; height:231px; margin-left: auto; margin-right: auto; top: 300px; }
    
    #topText h2 {padding: /*107px*/88px 0 5px 0;text-align: center; width: 675px; font-family: Georgia, Times New Roman, Serif; }
    #topText h3{padding: 0 0 0 0;}
    
   /*add color and link styles for KPC link*/
    #topText a:hover{background-color: #e5de9c; padding: 1px 3px 1px 3px; text-decoration: overline underline;}
  
   /* #topText img{padding: 47px 0 15px 0;}*/
    
    
    
    
    
    
    
    .tickets {padding: 25px 0 0 0; background-image: url(images/tickets.gif); background-repeat: no-repeat;background-position:center; position: absolute; text-align: center;  height: 50px; }
    
  

    
    .programImage{margin-top: 65px; background-image: url(images/two-col-index.gif); background-repeat:no-repeat; position: absolute;  width: 675px; height: 35px; margin-left: 8px;}
    
    
    
 
 /*LEFT COLUMN of the 2 col layout design******************************************************/   
    #leftCol{ margin-left: 65px;  width: 275px; text-align: left; border-right: solid 1px black;}
    #leftCol ul {width: 231px; margin-top:70px; margin-left: 5px;list-style: none; }
    #leftCol ul li {width: 230px; font-weight: bold; display: block; text-align:center; padding: 7px 0 0 0;}
    
    
    .leftColSpacer{height: 500px; width: 250px; min-height: 488px;}
    
    
        /*****STYLE FOR THE ABOUT PAGE-use negative margins for proper placement*************************/
        #personnel { margin-top: -15px; margin-left: 65px;  width: 250px; text-align: left;background-color:#fef8c3;   }
        #personnel p {padding: 2em .5em 1em 3em; font-size:77%; font-style:italic; text-indent: 1em; width: 225px;background-color:#fef8c3; }
        #personnel ul {width: 220px; margin-left:45px; list-style:none; background-color:#fef8c3; }
        #personnel ul li{font-weight: normal;width: 220px; display: block; padding:0 0 0 0; font-size:75%; text-align: left;background-color:#fef8c3; }
        .section{font-weight: bold; font-variant:small-caps; text-decoration: underline; margin-left: 0;}
       
        .underline{text-decoration: underline;}
        .heading {font-size: 125%; font-weight: bold; text-align: left;font-family: Georgia, Serif;  text-indent: -6px;}
    
   
 /*RIGHT COLUMN of the 2 col layout design****************************************************/   
    #rightCol{  margin-left: 345px; position: absolute;float: right;  width:245px; text-align: left;/*border-left: solid 1px black;*/top: 550px;}   
    #rightCol p { font-size:75%; text-indent: 1em; width: 250px; padding: 0 0 0 6px;}
    #rightCol img{padding: 25px 0 0 0; margin-left: 0; text-align: left;}
    
    #programNotes {width: 250px;}
    #programNotes a {color: #000000;text-decoration: none; font-weight: bold;}

    #programNotes a:active{color: #000000;text-decoration: none;font-weight: bold;}
    
    #programNotes a:hover{color:#000000; text-decoration: overline underline;font-weight: bold;}
    
    #programNotes a:visited{color: #000000;font-weight: bold;}
    
       /*  for placing program notes in correct position on page index page ***************************/
        
    
    
     /*  for listing of upcoming concerts on the index page --- more details on current page  ***********/  
        #concertCalendar{width: 245px; text-align: left;  padding: 16px 2px 2px 16px;background-color:#fef8c3;  }
        #concertCalendar ul {margin-left: 6px;background-color:#fef8c3; }
        #concertCalendar ul li{list-style: none; font-weight: bold;font-size: 78%;padding: 10px 0 10px 0;background-color:#fef8c3; }
        
        
        
    /* for about page styles and moving the margin top further toward the top with negative margins and continue the black line that separates the cols*****/
    #about{margin-left: 345px; position: absolute;width:245px; text-align: left;top: 180px;background-color:#fef8c3; border-left: solid 1px black;}
    #about p {padding: 2em .5em 1em 3em; font-size:78%; text-indent: 1em; width: 225px;background-color:#fef8c3;  }
    #about p img {padding: 3px 6px 3px 0;}
    
   
    
    
    /*************for the current season page for single col layout**************************************************/
    #season {width:605px;  margin-left: auto; margin-right: auto;}
    #season ul {text-align: center; margin-top: -100px;}
    #season ul li {list-style: none; padding:4px 5px 3px 5px;max-width: 509px;margin-left: auto; margin-right: auto;}
   
     .italic {font-style: italic; }
     .boldItalic {font-style:italic; font-weight:bold;}
     .title {font-weight: bold; font-size: 120%; font-style: normal;}
     .date{font-weight: bold; font-size: 105%;}
     .seasonImg{margin-left: auto; margin-right: auto; text-align: center; padding: 0 0 0 0; width: 500px;}
     
     
     
     /**********for the past season page  **************************************************************************/
     #past p {margin-left: 90px; width: 500px; font-weight: bold; font-size: 85%; padding: 0 0 14px 0;}
     #past ul{margin-left: 90px;}
     #past ul li{list-style: none; font-size: 85%;}
   
  
    /**********for the directions page ******************************************************************************/
    
     
     #mapRightCol {margin-left: 345px; position: absolute;width:245px; text-align: left;top: 247px;background-color:#fef8c3; border-left: solid 1px black;}
    #mapRightCol p {padding: 2em .5em 1em 3em; font-size:78%; text-indent: 1em; width: 225px;background-color:#fef8c3;  }
        
        
     #map {margin-left: 95px;  }  
     
    
 /*the bottom section with rounded corners********************************************************/ 
 #lower
 {background-image: url(images/lower.gif); background-repeat: no-repeat; width: 675px; height: 75px; margin-left: auto; margin-right: auto;}
 
 
    /*************for the 501c(3) and Paypal info at the bottom of a single-column page**************************************************/
    #seasonLower {width:605px;  margin-left: auto; margin-right: auto;}
    #seasonLower ul {text-align: center;}
    #seasonLower ul li {list-style: none; padding:4px 5px 3px 5px;max-width: 509px;margin-left: auto; margin-right: auto;}

/************MISC STYLES to solve layout and browser issues *****************************************/
.spacer {background-color: Transparent; background-repeat: no-repeat; position:absolute; top: 260px; width: 400px; height: 158px; margin-left: 135px;}

.fineprint{font-size: 75%; font-style:italic;  text-align:left; margin-left: auto; margin-right: auto; }
.centeredFineprint{font-size: 60%; font-style: italic; text-align: center; position: relative; margin-left: auto; margin-right: auto;}
.grayedOut {color: #504f41;} /* gray out for performances that have already occured*/

.reduced{font-size: 85%; font-weight: bold; font-style: italic;}
.transcribed{font-size: 85%; font-weight: normal; font-style: italic; }

/* Styling for the Mailing List sign-up forms ******************************************************
/***** Uncomment this section to put the sign-up form back in a two-column layout *****

   fieldset {
      border: none;
      position: relative;
      padding: 25px 0 0;
      width: 245px;
   }
   legend {
      display: block;
      width: 245px;
      font-size: 80%;
      font-weight: bold;
      color: black;
      padding: 40px 0 10px 0;
      position: relative;
      white-space: normal;
   }
   fieldset.submit {
      width: 100%;
      margin-top: 0;
      padding: 0 0 0 50px;
      border: none;
      text-align: center;
   }
   fieldset abbr {
      float: right;
      color: red;
      font-size: 70%;
      font-weight: bold;
      line-height: 1;
      padding: 0 1px;
      vertical-align: middle;
   }
   ol {
      padding: 0;
      margin: 0;
   }
   ol li {
      list-style: none;
      padding-bottom: 10px;
   }
   label {
      display: block;
      text-align: left;
      font-size: 78%;
      font-weight: bold;
   }
   input {
      display: block;
      text-align: left;
      margin-left: 0;
      width: 225px;
   }
   input.submit {
      width: auto;
   }
*/
   fieldset {
      border: none;
      position: relative;
      padding: 25px 0 0;
      width: 405px;
      margin-left: auto;
      margin-right: auto;
   }
   legend {
      display: block;
      width: 405px;
      font-size: 80%;
      font-weight: bold;
      color: black;
      padding: 40px 0 10px 0;
      position: relative;
      white-space: normal;
   }
   fieldset.submit {
      width: 100%;
      margin-top: 0;
      padding: 0 0 0 50px;
      border: none;
      text-align: center;
   }
   fieldset abbr {
      float: right;
      color: red;
      font-size: 70%;
      font-weight: bold;
      line-height: 1;
      padding: 0 1px;
      vertical-align: middle;
   }
   ol {
      padding: 0;
      margin-left: auto;
      margin-right: auto;
   }
   ol li {
      width: 305px;
      list-style: none;
      padding-bottom: 10px;
   }
   label {
      display: block;
      text-align: left;
      font-size: 78%;
      font-weight: bold;
      padding-left: 20px;
   }
   input {
      display: block;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
      width: auto;
   }
   input.submit {
      margin-left: auto;
      margin-right: auto;
   }