/* Note, this is essentially the same as holiday-letter.css except
   the background colors have changed for following sections:
   
   body: orange
   masthead: brown
   footer: brown
   navbar: no change, it remained red as it is not used.
*/

body 
    {
      min-width: 1000px;
      font-family: "Comic Sans MS";
	  font-size: large;
      background-color: orange;
    }
h1
    {
      margin-top: 0px;
      padding-top: 0px;
      text-align: center;
    }

h2
    {
      margin-top: 0px;
      padding-top: 0px;
      text-align: center;
    }

h3
    {
      margin-top: 0px;
      padding-top: 0px;
      text-align: center;
    }

#wrapper {margin: 0px}

#masthead 
    {
      display: table;
      margin: 0px;
      padding: 0px;
      height: 140px;
      width: 1000px;
      background-color: brown;
      text-align: center;
    }

#masthead-left 
    {
      display: table-cell;
      margin: 6px;
      padding-left: 20px;
      margin-top: 11px;
      width: 200px;
      height: 100px;
      position: relative; 
    }

#masthead-center 
    {
      display: table-cell;
      margin: 0px;
      margin-top: 6px;
      margin-left: 10px;
      padding-left: 20px;
      padding-top: 0px;
      height: 100px;
    }

#masthead-right 
    {
      display: table-cell;
      margin: 6px;
      margin-top: 11px;
      padding-right: 20px;
      width: 200px;
      height: 100px;
      position: relative;
    }

.content 
    {
    display: table;
    margin: 0px;
    padding: 0px;
    width: 900px;
  }
.content-row 
    {
      display: table-row;
    }
.content-navbar 
    {
      display: table-cell;
      background-color: red;  
      margin: 0px; 
      padding: 0px;
      width: 200px;
    }
.content-data 
    {
      display: table-cell;
      margin: 0px;
      padding: 10px;
      padding-top: 0px;
      text-align: justify;
      width: 622px;
    }

.content a 
    {
      text-decoration: none;
    }
div.picture-container
    {
     display:table;
     clear: both;
     margin: 1em auto;
     margin-bottom: 20px;
     margin-top: 20px;
     width: 632px;
     text-align: justify;
/*
     background-color: lightgrey;
     border-color: blue;
     border-style: solid;
     border-width: 2px;
*/
    }

.picture-panorama
    {
     margin: 10px;
     margin-left: auto;
     margin-right: auto;
     width: 630px;
/*
     border-color: blue;
     border-style: solid;
     border-width: 2px;
*/
    }

div.picture-center
    {
     margin-left: auto;
     margin-right: auto;
     width: 302px;
    }

div.picture-left
    {
     float: left;
     width: 304px;
    }

div.picture-right
    {
     float: right;
     width: 304px;
     padding-left: 15px;
    }

.picture-panorama p {margin-top: 0px; margin-left: 15px; margin-right: 15px;}
.picture-center   p {margin-top: 0px; margin-left: 15px; margin-right: 15px;}
.picture-left     p {margin-top: 0px; margin-left: 15px; margin-right: 15px;}
.picture-right    p {margin-top: 0px; margin-left: 15px; margin-right: 15px;}

#footer 
    {
      clear: both;
      display: table;
      margin-left: 0px;
      padding-top: 20px;
      width: 1000px;
      height: 30px;
      background-color: brown;
      margin-top: 0px;
      padding-top: 0px;
    }

#footer-left
    {
      display: table-cell;
      text-align: left;
      width: 200px;
      vertical-align: middle;
    }

#footer-middle
    {
      display: table-cell;
      text-align: left;
      vertical-align: middle;
    }

/*Creating buttons*/

  .clear /* generic container (i.e. div) for floating buttons */
    {
      overflow: hidden;
      width: 100%;
    }

a.button 
    {
      background: transparent url('/images/bg_button_a-transparent.gif') no-repeat scroll top right;
      color: #444;
      display: block;
/*    float: left;
*/    font: normal 16px arial, sans-serif;
      height: 24px;
      width: 200px;
      text-align: center;
      margin-right: 0px;
      padding-right: 11px; /* sliding doors padding */
      text-decoration: none;
    }

a.button span
    {
      background: transparent url('/images/bg_button_span-transparent.gif') no-repeat;
      display: block;
      line-height: 14px;
      padding: 5px 0 5px 18px;
    }

a.button:active 
    {
      background-position: bottom right;
      color: #000;
      outline: none; /* hide dotted outline in Firefox */
    }

a.button:active span 
    {
      background-position: bottom left;
      padding: 6px 0 4px 18px; /* push text down 1px */
    } 

  /* Centering tables */
.centered-table
    {
      margin-left: auto;
      margin-right: auto;
    }