html { background: white; }

body { 
   background: #eaecec; 
   text-align: center; 
   height: 100%;
   }
   

/* Site Header
------------------------------------ */
header {
    text-align: left;
    background-color: white;
    position: relative;
    height: 66px;
    } 
        
    @media (min-width : 330px) { header { height: 74px;  }}  
         
#logo img { 
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    width: 200px;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition:   opacity .3s ease-in-out;
    -ms-transition:  opacity .3s ease-in-out;
    transition:      opacity .3s ease-in-out; 
    }    
    
    @media (min-width : 330px) { #logo img { width: 220px;  }}    
    
#logo img:active { opacity: .7; }    


/* ----------------------- Nav ----------------------- */

nav {
    text-align: left;
    color: #fff;   
    position: relative;
    } 
    
header nav {
    position: absolute;
    top: 17px;
    right: 12px;
    } 
   
    @media (min-width : 330px) { header nav { top: 20px; right: 15px; }}    
    @media (min-width : 370px) { header nav { top: 20px; right: 15px; }}
   
nav a {  
    display: block;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition:   background-color .3s ease-in-out;
    -ms-transition:  background-color .3s ease-in-out;
    transition:      background-color .3s ease-in-out; 
    }

nav ul, 
nav ol { 
   width: 100%;
   list-style: none;
   margin: 0;
   padding: 0; 
   display: block;
   float: left; 
   }
   
nav li { float: left; }

header nav li { float: right; }


   
/* --- Primary Nav --- */

nav #menu-button {
    -moz-border-radius:    3px;
    -webkit-border-radius: 3px;
    border-radius:         3px;
    position: relative; 
    text-transform: uppercase;
    font-size: 14px;
    line-height: 14px;
    padding: 5px;
    margin: 5px 3px;
    background: #4d7b2b;
    color: white; 
    -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;     
    }
   
nav #menu-button:active { background: #4d7b2b; }

nav #menu-button.active { 
    background-color: #008271 !important; 
    }


#menu {
    background: #4d7b2b;
    width: 75%;
    z-index: 1000;
    position: absolute;
    right: 100%;
    top: 0;
    min-height: 100%;
    -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;   
    }
    
#menu.active {
    right: 25%;
    }

#menu ol { 
    width: 100%; 
    margin:auto; 
    }
    
#menu ol li { 
    list-style: none;
    font: 300 18px/28px "proxima-nova",Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: left;
    }

#menu ol li a { 
    padding: 8px 16px;  
    display:block; 
    -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; 
    color: white !important;
    }    
    
#menu ol li a:active {
    color: white !important; 
    background : #4a82a5;
    }
    
#menu ol li.donate {
   background: #f79421;
   margin: 1em;
   text-align: center;   
}


/* --- Social Networking --- */


nav .facebook a,
nav .twitter a { 
    font-family: 'trilogyicons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    color: white; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    height: 14px;
    width: 14px;
    font-size: 14px;
    line-height: 14px;
    padding: 7px;
    -moz-border-radius:    14px;
    -webkit-border-radius: 14px;
    border-radius:         14px;
    float: right;
    color: white;
    margin: 2px;
    }

nav .facebook a { background: #4a6ebb; }

    nav .facebook a:active { background: #5883de; }
      
nav .twitter a { background: #55acee; }

    nav .twitter a:active { background: #74c3ff; }





/* --- Secondary ID --- */
   
#id { 
    width: 95%;
    padding: 10px 2.5%;
    background: #4f7927; 
    -moz-box-shadow: 0 0 10px rgba(21,65,112,.2);
    -webkit-box-shadow: 0 0 10px rgba(21,65,112,.2); 
    box-shadow: 0 0 10px rgba(21,65,112,.2); 
    position: relative;
    }
  
#id a h1 { 
    color: white;
    font-size: 18px;
    margin: 0;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition:   color .3s ease-in-out;
    -ms-transition:  color .3s ease-in-out;
    transition:      color .3s ease-in-out; 
    text-align: left;
    text-transform: uppercase;
    }
    
    #id a h1:active { color: #d0f0ff; }
    
   
   
   


/* Site Footer
------------------------------------ */


/* --- Return to Top Footer Link --- */

nav .return { width: 70%; }

    @media (min-width : 330px) { nav .return {width: 70%; }} 
    @media (min-width : 370px) { nav .return {width: 70%; }} 
    @media (min-width : 490px) { nav .return {width: 70%; }} 

   .return a { 
      padding: 0 10px;
      color: #1c85a8; 
      }
      
   .return a:active { color: #0a5b76; } 
      
   .return img { margin-right: 3px; }



footer {
    width: 94%;
    padding: 0 3% 2%;
    background: #eaecec;
    }
    
footer nav {
    padding: 10px 0 0 0;
    }
    
    footer nav li { float: right; }
    footer nav li:first-child { float: left; }
    
.disable_mobile {
   padding: 15px 0;
   cursor: pointer;
   display: block;
   font-size: 17px; 
   }
    
#footer-contents,
.credit {
    font: 11px/13px "proxima-nova",Arial, Helvetica, sans-serif;
    width: 100%;
    margin: auto;
    color: #616161;
    }
    
    @media (min-width : 1200px) { #footer-contents, .credit  { width: 1200px; }}    
    
.contact-info {
    margin-bottom: 15px;
    }

#footer-contents .links { text-transform: uppercase; }   
    
#footer-contents a, .credit a { color: #4a4a4a; }  

#footer-contents a:active, .credit a:active { color: black; }  

.credit {
    padding-top: 15px;
    border-top: 1px solid #a6adad;
    margin-top: 1em;
}
    



