body { 
    background: white; 
    text-align: center; 
    }



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

header {
    width: 100%;  
    background: #0f335b;
    height: 185px;
    position: relative;
    margin: auto;
    background: url('/theme/img/header-bg.jpg') no-repeat center center;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    } 
    
    @media (min-width : 1200px) { header { height: 220px; }} 
           
#logo {
    background: url('/theme/img/photos.png') no-repeat right top;
    background-size: 63%;
    width: 960px;
    height: 135px;
    display: block;
    text-align: left;
    margin: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }
       
    @media (min-width : 1200px) { #logo { width: 1200px; height: 170px; }}  
  
#logo img {
    width: 250px;
    height: 93px;
    margin: 20px 0 0 15px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
    }
    
    @media (min-width : 1200px) { #logo img { width: 315px; height: 118px; margin: 25px 0 0 15px;  }}  
  
#logo img:hover { 
    width: 270px;
    height: 101px;
    margin: 16px 0 0 5px;   
    }
    
    @media (min-width : 1200px) { #logo img:hover { width: 335px; height: 125px; margin: 21.5px 0 0 5px;   }} 
    
#logo img:active {     
    width: 240px;
    height: 90px; 
    margin: 21.5px 0 0 20px;
    }
 
    @media (min-width : 1200px) { #logo img:active { width: 305px; height: 114px; margin: 27px 0 0 20px;  }} 
  



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

#body,
#content,
#options {
    position: relative;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition:    background .3s ease-in-out;
    -o-transition:      background .3s ease-in-out;
    -ms-transition:     background .3s ease-in-out;
    transition:         background .3s ease-in-out; 
    }
    
#body {
    margin: auto;
    width: 960px; 
    text-align: left;
    padding: 20px 0;
    }
    
    @media (min-width : 1200px) { #body { width: 1200px; padding: 30px 0; } }   

#content {
    float: left; 
    width: 640px;
    } 
    
    @media (min-width : 1200px) { #content {width: 790px; } }  
    
#content.share { width: 585px; padding-left: 55px; } 
    
    @media (min-width : 1200px) { #content.share { width: 730px; padding-left: 60px; } }  

#options {
    float: right; 
    width: 300px;
    } 
    
    @media (min-width : 1200px) { #options { width: 380px;  } }  

.wide #content{
    width: 960px; 
    padding: 0;
    float: none;
    }      
    
    @media (min-width : 1200px) { .wide #content { width: 1200px; } }  


/* 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: 12px;
    line-height: 12px;
    color: #a6a6a6;
    border-top: 1px solid #e0e0e0;
    }
    
    @media (min-width : 1200px) { footer { width: 1200px; }}  
    
footer .founding-organizations {
    width: 415px;
    margin: auto;
    text-transform: uppercase; 
    font-size: 14px;
    padding-bottom: 50px;
    }

footer .founding-organizations span, 
footer .founding-organizations a {
    float: left;
    display: block;
    }
    
footer .founding-organizations span {
    margin: 18px 20px 0 0;
    }
 
footer .founding-organizations .next-generation {
    margin: 10px 0 0 25px;
    }

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

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