h1 { font-family: 'Literata', calibri,tahoma, helvetica, sans-serif;
color: rgb(25,25,112); text-align: center }
h2 { font-family: 'Literata', 'Open Sans', sans-serif; color: rgb(25,25,112) }
h3 { font-family: 'Literata', 'Open Sans',tahoma, helvetica, sans-serif; color: rgb(25,25,112); background: #DDEEF0 }
h4 { font-family: 'Literata', 'Open Sans',tahoma, helvetica, sans-serif; color: rgb(25,25,112); background: #DDEEF0 }
h5 { font-family: 'Literata', 'Open Sans', helvetica, sans-serif; color: rgb(25,25,112) }

title { font-family: 'Literata', 'Open Sans',tahoma, helvetica, sans-serif; color: rgb(25,25,112) }
A:link {    color: blue }
A:visited { color: rgb(25,25,112) }
A:active {  color: green }
A:hover {   color: red }

body {
   font-family: 'Literata', 'Open Sans',tahoma,helvetica;
   font-size: 1.4rem;
   margin: 0 auto;
   margin-top: 10px;
   text-align: center
}

#container {
   background: #FCFCFF;
   width: 90%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 24;
   text-align: left
}




h4 { margin-left: 0%; margin-right: 0% }
h3 { margin-left: 0%; margin-right: 0% }
h2 { margin-left: 0%; margin-right: 0% }
h1 { margin-left: 0%; margin-right: 0% }

p.narrow {
  margin-left: 10%;
  margin-right: 40%;
}

p.text {
}

p.text1 {
}

table {
    font-size: 1.0em;
}

table.sidemap th, table.sidemap td {

}

table.footer th, table.footer td {

}

div.footer {
  font-family: 'Literata', 'Open Sans', tahoma;
  font-size: 0.8rem;
}

hr.bottomrule {
  width: 100%;
  color: rgb(50,50,112);
  height: 3px;
  padding-bottom: 1px;
}

hr.bottomrule2 {
  width: 100% ;
  color: rgb(80,80,112);
  height: 2px;
  padding-bottom: 1px;
  padding-top: 0px;
}

div#narrow {
  width: 85%;
  margin: 0 auto;
}

div#wide {
  width: 100%;
  margin: 0 auto;
}

div.quote {
   text-align: right;
   font-size: 0.8rem;
   margin-left: 150px;   
   padding-bottom: 10px;
}


div.indented {
     padding-left: 50px;
}

div.hanging {
     padding-left: 25px;
     text-indent: -25px;
}

div.hangingmore {
     padding-left: 40px;
     text-indent: -40px;
    }

div.offset {
     padding-left: 25px;
     padding-top: 12px;
     padding-bottom: 12px;
}

div.border {
      font-size: 0.8rem;
      padding: 4px;
      background: #ffffaa;
}

div.highlight {
      font-size: 0.8rem;
      padding: 4px;
      background: #ffffbe;
}

div.greenhighlight {
      font-size: 0.8rem;
      padding: 4px;
      background: #beffbe;
}

div.wideborder {
      font-size: 0.8rem;
      padding-left: 50px;
      text-align: right;
}

div.greenborder {
      font-size: 0.8rem;
      border: 2px solid;
      padding: 8px;
      background: #aaffaa;
      float: right;
      width: 55%;
    }

    div.answer {
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 3px;
      padding-bottom: 3px;
    }

    div.source {
      text-align: right;
      padding-right: 3px;
      padding-top: 3px;
      padding-bottom: 0px;
    }



    div.buttonbar {
      text-align: center;
      font-size: 1.0em;
      border: 2px solid;
      background: #DDEEF0;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 3px;
      padding-bottom: 3px;
    }


/* http://stopdesign.com/eg/buttons/3.0/code.html */
   /* Start custom button CSS here
    ---------------------------------------- */
    .btn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:100%/1.2 'Literata', 'Open Sans', "Trebuchet MS",Sans-serif;
      text-decoration:none;
      color:#333;
      }
    * html button.btn {
      padding-bottom:1px;
      }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }
    .btn span {
      background:#ddd url(bg-button.gif) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #bbb;
      border-right:1px solid #aaa;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #bbb;
      border-bottom:1px solid #aaa;
      }
    
    /* pill classes only needed if using pill style buttons ( LEFT |
    CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #bbb;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #bbb;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover/focus/active state for
    buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus
    span span {
      cursor:pointer; /* important for any clickable/pressable element
    */
      border-color:#9cf !important;
      color:#000;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only
    <a> */
      }
 
    /* use if one button should be the 'primary' button */
    .primary {
      font-weight:bold;
      color:#000;
      }


.rightnote
{
   position:absolute;
   float:right;
   left:1250px;
   width:250px;
   padding: 10px;
   margin-top:-70px;
   text-align:left;
   font-weight:200;
   font-size: 0.8rem;
   line-height: 16px;
   background-color: #DDEEF0;
}


img {
  max-width: 100%;
  display: block;
}