/*    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: 355px; position: absolute;float: right;  width:250px; 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;}

    #rightCol ul {list-style-type: none;}
    

    #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; margin-top: 20px; }

        #concertCalendar ul {margin-left: 20px;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; clear:both; position: relative;}

 


    /*************for the 501c(3) and Paypal info at the bottom of a single-column page**************************************************/

    #seasonLower {width:605px;  margin-left: auto; margin-right: auto; clear: both; position: relative;}

    #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; }

.bold{font-weight: bold;}

#forms  {background-color: #e5de9c; width:285px; border: double 1px #b59605; float: left; clear:right;  font-family: Arial, Sans-Serif; font-size: 80%; margin-top: 8px; margin-bottom: 3px; margin-left: 3px;}
legend {text-align:center; width:225px; white-space: normal; padding: 5px 0 0 0; font-weight: bold; }
fieldset {  border: none;}


label{float: left; width: 88px; text-align: left; padding: 0 0 0 2px; }

 form ul {display: block; padding: 0 0 0 0; list-style-type: none; width:225px;}
 form ul li {display: block;  margin: 2px 2px 2px 2px; width:225px; padding: 2px 0 2px 4px; list-style-type:none;}
 
 
em {color: #c00; font-weight: bold;}
.submit {text-align:center;  font-size: 90%;}






#holiday {text-align: center; border-style: dotted; border-color: #c00;  border-width: 3px; width: 275px; float: left; clear:right; margin-top: -20px; margin-left: 3px;}

#holiday ul li {list-style-type: none; padding: 4px 3px 8px 3px;}


/* 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;

   }
fieldset ul {display: block; padding: 0 0 0 0; list-style: none;}
fieldset ul li {display: block; padding: 2px 0 2px 0; margin: 0 0 0 0;list-style: none;}

   legend {

      display: block;

      width: 235px;

      font-size: 90%;

      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: 80%;

      font-weight: bold;

      line-height: 1;

      padding: 0 1px;

      vertical-align: middle;

   }

  ul {

      padding: 0;

      margin: 0;

   }

   ul 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; margin-left: 40px;

   }
   
   input.image {width: 125px;}*/
   
  

/***** Uncomment this section to put the sign-up form back in a one-column layout *****


 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;

   }

*/