/* ----------------  Notes on colors  ---------------- */
/*  Default background color:  #f8f7f5   rgb(97%, 97%, 96%)  hsl(40, 18%, 97%) */
/*  Darker background color:   #e6e3d6   rgb(90%, 89%, 84%)  hsl(49, 24%, 87%) */
/*                             #e0ddcc   rgb(88%, 87%, 80%)  hsl(52, 24%, 84%) */
/*  Even Darker background:    #d3cdb6   rgb(83%, 80%, 71%)  hsl(48, 25%, 77%) */
/*  Solid text and graphics:   #691d00   rgb(41%, 11%, 0%)   hsl(17, 100%, 21%) */
/*  Less intense graphics:     #5e240d   rgb(37%, 14%, 5%)   hsl(17, 75%, 21%) */
/*  Even Less intense:         #582613   rgb(35%, 15%, 7%)   hsl(17, 65%, 21%) */
/*  Graphics TEST2 #9e2d00   rgb(62%, 18%, 0%)  hsl(17, 100%, 31%) */
/*  Shadow test:   #d6c8c2   rgb(84%, 78%, 76%) hsl(17, 20%, 80%)  */
/*  Shadow test2:   #dfd6d2   rgb(88%, 84%, 82%)  hsl(17, 17%, 85%)  */
/*  Shadow test3:   #cabbb4   rgb(79%, 73%, 71%)  hsl(17, 17%, 75%)  */
/*                  #c0aea5   rgb(75%, 68%, 65%)  hsl(19, 17%, 70%)  */
/*  Shadow test4:   #b59f97   rgb(71%, 62%, 59%)  hsl(17, 17%, 65%)  */
/*  Shadow test5:   #aa9188   rgb(67%, 57%, 53%)  hsl(17, 17%, 60%)  */
/*  Shadow test6:   #95766a   rgb(58%, 46%, 42%)  hsl(17, 17%, 50%)  */
/*  Shadow test7:   #866a5f   rgb(53%, 42%, 37%)  hsl(17, 17%, 45%)  */

/* ----------------  Site-wide defaults  ---------------- */

html {
     height:auto;
     }

body{
    height:auto;
    margin:0px;
    padding:0px;
    font-size: medium;
    background-color: #e6e3d6;
    font-family:  Verdana, "Verdana Ref", "DejaVu Sans", "Lucida Sans Unicode", sans-serif
    }


/* ----------------  NEW Main Content Styling  ---------------- */

#dynamic-container {
    position:absolute;
    min-height: 100%;
    top: 0px;
    left: 4%;
    right: 4%;
    font-size: medium;
    background-image: url("/images/ricepaper2_@2X.png");
    background-repeat: repeat;
/*  background-position: center;  */
    background-attachment: fixed;   
/*  background: transparent;  */ 
/*  border: 1px solid red;  */
    }

#dynamic-container .content {
    counter-reset: item-count;
    font-size: 75%;
/*  letter-spacing: 1px;  */ 
/*  word-spacing: 0.1em;  */
    position: relative;
/*  top: 200px;  */
    height: auto;
    width:auto;
    margin-top: 230px;
/*    margin-left: 250px; */
    padding-left: 270px;
    margin-right: 4%;
/*  background: transparent;  */
/*  border: 1px solid red;  */
    }

#dynamic-container .content h1 {
    counter-reset: item-count;
    font-size: 2.6em;
    font-family: Cambria, "Hoefler Text", Utopia, "Nimbus Roman No9 L Regular", "Times New Roman", Times, serif;
    color: #582613;
    text-shadow: 1px 2px 1px #b59f97;
    }

#dynamic-container .content ul  {
    line-height: 1.4;
    }


/* -------------  NEW Masthead styling  ------------- */


#masthead-outer {

    font-family: Cambria, "Hoefler Text", Utopia, "Nimbus Roman No9 L Regular", "Times New Roman", Times, serif;
    position: fixed;
    height: 240px;
    width: 100%;
    top:  0;
    margin-left: 0;
/*    background-image: url("/images/header-left(half).jpg"), url("/images/header-right(half).jpg") ;  */
/*    background-position:  left 45px, right 45px;  */
/*    background-repeat: no-repeat;  */
/*    background-color: transparent;  */
/*    border:1px solid red;  */  
    }

#masthead-inner {
    position: absolute;
    width: 100%;
    top: 0;
/*    left: 4%;  */
    background-image: url("/images/header-image(half).jpg");
    background-position:  right 45px;
    background-repeat: no-repeat;
    background-color: transparent;
/*    border:1px solid gray;  */  
    }

.masthead-text {
    overflow: auto;
/*    width: 100%;  */
    width: auto;
    height: 240px;
/*    position: absolute;  */
    position: relative;
/*    left: 4%; */ 
    margin-right: none;
    margin-top: 0;
    background-color: transparent;
/*    border:1px solid blue;  */
    } 

.masthead-text h1 {
    position: absolute;
    line-height: 95%;
    margin: 0 0 0 3%;
/*    left: 240px;  */
/*    right: auto;  */  
    bottom: 50%; 
    width: auto;
    font-weight: bold;
    font-size: 2.4em;
    text-shadow:  2px 2px 2px black;
    color: white;
/*     color: red; */
/*    border:1px solid green; */  
    }

.masthead-text h2 {
    position: absolute;
    line-height: 95%;
    margin: 0 0 0 3%;
    width: auto;
    top:  54%;
    font-weight: bold;
    font-size: 1.8em;
    text-shadow:  2px 2px 2px black;
    color: white;
/*     color: red; */
/*    border:1px solid green; */ 
    }



.picture-frame {
    display: block;
/*    display: none;   */
    border:2px solid #691d00;
    border-radius: 3px;
    padding: 4px;
    margin-right: auto;
    margin-top: 20px;
    margin-left: 85px;
}




/* --------------  Navigation pane (Menu) is defined below:  -------------- */


#nav-column {
    width: 240px;
    top: 270px;
    position: fixed;
    background: transparent;
/*  border: 1px solid red;  */
    height: auto;
    margin-left: 4%;
    }

#nav-column p {
    margin-top: 0;
    margin-bottom: 0;
    color: #582613;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    }



#button-menu {
    font-size: .7em;
    margin: 0 auto;
    width: 200px;
    }

#button-menu ul{
    list-style-type: none;
    line-height 1em;
    margin: 0;
    padding: 0;
    margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
    }


#button-menu li a:link,  #button-menu li a:visited {
    display: block;
    text-decoration: none;
    }

#button-menu li a:hover {
    background-color: #e6e3d6;
    color:  #9e2d00;
    font-color: #9e2d00;
    border: 2px solid #9e2d00;
    padding: 2px 0em 4px 1em;
    -webkit-box-shadow: 1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    -moz-box-shadow:    1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    box-shadow:         1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    }

#button-menu li a:active {
    background-color: #691d00;
    color:  #e6e3d6;
    font-color:  #e6e3d6;
    padding: 3px 0em 5px 1em;
    border: 1px solid #582613;
    -webkit-box-shadow: 1px 1px 3px 0 #c0aea5, inset 0px 0px 3px 0 white;
    -moz-box-shadow:    1px 1px 3px 0 #c0aea5, inset 0px 0px 3px 0 white;
    box-shadow:         1px 1px 3px 0 #c0aea5, inset 0px 0px 3px 0 white;
    }

.menu-button {
    margin-top: .6em;
    margin-bottom: .6em;
    display: block;
    font-weight: bold;
    font-color: #582613;
    color:  #582613;     
    background: transparent;
/*    background-color: transparent; */
    background-color: #e6e3d6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #582613;
    -webkit-box-shadow: 1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    -moz-box-shadow:    1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    box-shadow:         1px 1px 3px 0 #c0aea5, inset 1px 2px 3px 0 white, inset -2px -2px 3px 0 #b59f97;
    padding: 3px 0em 5px 1em;
}


.inline-button {
    display: inline;
    font-color: #691d00;
    color:  #691d00;
    background: transparent;
    background-color: transparent;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #773e28;
    -webkit-box-shadow: inset -2px -2px 4px #cabbb4; 
    -moz-box-shadow:    inset -2px -2px 4px #cabbb4;
    box-shadow:         inset -2px -2px 4px #cabbb4;
/*    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);  */
/*    padding: 1em 1em 1em 1em;  */
    padding: 2px .5em 3px .5em;
}



/* ----------------  Various Horizontal lines  ---------------- */



hr {
    color: #582613;
    background-color: #582613;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    -moz-box-shadow:    1px 1px 2px 0 #aa9188;
    -webkit-box-shadow: 1px 1px 2px 0 #aa9188;
    box-shadow:         1px 1px 2px 0 #aa9188;
    }

hr.narrow {
/*    height: 2px;  */
    height: .15em;
    border: 0;
}

hr.top {
   background: transparent;
   padding-top: 2px;
   padding-bottom: 0;
   border-top: 8px solid;
   border-bottom: 3px solid;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   border-left: 0 none;
   border-right: 0 none;
   margin-top: 2.1em;
   margin-bottom: 1.9em;
}

hr.bottom {
   background: transparent;
   padding-top: 2px;
   padding-bottom: 0;
   border-top: 3px solid;
   border-bottom: 8px solid;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-left: 0 none;
   border-right: 0 none;
   margin-top: 1.9em;
   margin-bottom: 2.1em;
}


/* ----------------  misc. classes  ---------------- */


.btn {
  background: #691d00;
  background-image: -webkit-linear-gradient(top, #691d00, #691d00);
  background-image: -moz-linear-gradient(top, #691d00, #691d00);
  background-image: -ms-linear-gradient(top, #691d00, #691d00);
  background-image: -o-linear-gradient(top, #691d00, #691d00);
  background-image: linear-gradient(to bottom, #691d00, #691d00);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
/*  font-family: Arial;   */
  color: #ffffff;
  font-size: 130%;
/*  padding: 10px 20px 10px 20px; */
  padding: 5px 1.5em 5px 1.5em;
  text-decoration: none;
}


.btn:hover {
  background: #691d00;
  text-decoration: none;
}


.content h2 {    
    font-size: 115%;
    font-weight: bold;
    color: inherit;
    margin-left: 2.0em;
    }

.content h2.question, h2.answer, h2.indent1, h2.numbered {
    font-size: 100%;
    font-weight: normal;
    color: inherit;
    margin-left: 2.0em;
    }

.content .question, .answer, .indent1, .numbered {
    font-size: 100%;
    font-weight: normal;
    color: inherit;
    margin-left: 2.0em;
    }

.content p.center {
    text-align: center;
    }

.content p.numbered {    
    font-weight: bold;
    }

.content .numbered:before {
    font-size: 115%;
    font-weight: bold;
    color: #582613;
    text-shadow: 1px 2px 1px #b59f97;
    content: counter(item-count) ".\0000a0\0000a0";
    counter-increment: item-count;
    margin-left: -2.0em;
    }

.content .question:before {
    font-size: 115%;
    font-weight: bold;
    color: #582613;
    text-shadow: 1px 2px 1px #b59f97;
    content: "Q.\000a0\0000a0";
    margin-left: -2.0em;
}

.content .answer:before {
    font-size: 115%;
    font-weight: bold;
    color: #582613;
    text-shadow: 1px 2px 1px #b59f97;
    content: "A.\000a0\0000a0";
    margin-left: -2.0em;
    }    

.content .indent2 {
    margin-left: 3.8em;
    }


@media screen and (min-height: 920px) {
    #dynamic-container .content {
        font-size: 100%;
    }
}

@media screen and (max-width: 580px) {
    .picture-frame {
        display: none;
    }
}