html { background: #fef4e9; }

body { 
    background: #fef4e9; 
    text-align: center; 
    }



/* Site Header
------------------------------------ */

header {
    width: 1200px;   
    height: 147px;
    position: relative;
    margin: auto;
    background: white;
    }
    
    #home header {
        background: transparent;
        height: 127px;
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0 0 0 -600px;
        z-index: 10;
        }
      
    
    @media (max-width : 1200px) { 
        header { width: 960px; }  
        #home header { margin: 0 0 0 -480px; } 
        }   
  

#logo {
    width: 246px;
    height: 107px;
    display: block;
    opacity: .8;
    position: absolute; 
    left: 30px;
    top: 20px;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition:    opacity .5s ease-in-out;
    -o-transition:      opacity .5s ease-in-out;
    -ms-transition:     opacity .5s ease-in-out;
    transition:         opacity .5s ease-in-out; 
    }
  
#logo:hover { opacity: 1; }
#logo:active { opacity: .7; }

    @media (max-width : 1200px) { #logo {  left: 20px; } }   
  
  
  


/* Section ID
------------------------------------ */

#id {
    width: 1200px;
    margin: auto;
    background: white; 
    }
    
    @media (max-width : 1200px) { #id { width: 960px; } }   

#id a { 
    display: block;
    text-align: left;
    margin: 0 30px; 
    background: #00849c;
    }
  
    @media (max-width : 1200px) { #id a { margin: 0 20px; } }   

#id h1 {
    margin: 0 auto;
    padding: 15px 20px;   
    font-size: 24px;
    line-height: 1;
    font-weight: normal;
    text-transform: uppercase; 
    }

#id a h1 { 
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2) 
  }
  
#id:hover a h1 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .3) }

#id:active a h1 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .25) }

#id:hover h1:after { content: " »" }



/* Content
------------------------------------ */


#body {
    width: 1140px;
    margin: auto;
    background: white;
    padding: 20px 30px;
    text-align: left;
    }
    
    @media (max-width : 1200px) { #body {  width: 920px; padding: 20px; } }   

#content {
    float: left; 
    width: 750px; 
    position: relative;
    } 
    
    @media (max-width : 1200px) { #content {  width: 610px; } }  

#options {
    float: right; 
    width: 360px;
    } 
    
    @media (max-width : 1200px) { #options {  width: 290px; } }  

.wide #content {
    width: 100%;
    float: none;
    }      
    

/* Photo with INSET Shadow
----------------------------- */ 

#content figure.photo {
  width: auto;
  position: relative;
  float: right;
  display: block;
  margin: 0 0 15px 15px; }  

#content figure.photo:before {
  -moz-border-radius:    6px; 
  -webkit-border-radius: 6px;
  border-radius:         6px;    
  -moz-box-shadow:    inset 2px 2px 5px rgba(0,0,0,.3);
  -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,.3);
  box-shadow:         inset 2px 2px 5px rgba(0,0,0,.3); 
  content: "";
  position: absolute;   
  bottom: 0;
  left: 0;
  right: 0;
  top: 0; }   

#content figure.photo img {
  float: left;      
  -moz-border-radius:    6px; 
  -webkit-border-radius: 6px;
  border-radius:         6px; }        







/* Site Footer
------------------------------------ */

footer {
    opacity: .7;
    width: 960px;
    padding: 30px 0;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    color: #9a9a9a; 
    }

footer .links { 
    font-size: 14px; 
    color: #6e6f6f;
    display: block;
    }   

footer .small-links { 
    color: #6e6f6f;
    display: block;
    padding: 15px 0 0 0;
    }   
    
footer .small-links a { color: #6e6f6f; }  
footer .small-links a:hover { color: black; }  

footer .credit {
    text-transform: none;
    padding: 15px;
    display: block; 
    }  
    
footer .credit a { color: #6e6f6f; }  
footer .credit a:hover { color: black; }