/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*------------------------------REST--------------*/
* { 
        /*
        BOX Sizing without padding and border getting in the way
        Does not work in IE7 and below
        Polyfill workaround: https://github.com/Schepp/box-sizing-polyfill
        Great explanation: http://paulirish.com/2012/box-sizing-border-box-ftw/
        */
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
      }

html {
  font-size: 62.5%; /* set font-size to use with rems */
} 

img {
  max-width: 100%;
}

body {
  background-color:#333;
  font-family: 'Belgrano', Verdana, serif; 
  font-size: 1.5rem; /* equal to 15 pixels */
}

/* responsive images */

#container {
  background-color:#eee;
  padding:5px;
  margin:auto;
  
  max-width:1000px;
  width:90%;
  min-width:320px;
}


#masthead, #closing {
        background-color:#191a1f;
        background-image:url('_css/bgTile-noisy.png');
        padding:25px;
        color:#eee;
        overflow:auto;
      }
      
      #masthead { 
        font-family: 'Oswald', cursive;
      }
      
      #masthead .logo {
        width:100%;
        border:2px solid #fff;    
      }

      #masthead header {
        width:70%;
/*        float:right;
*/        
        padding:10% 5% 0px;
      }
      
      #masthead h1 {
        font-size:6rem;
        margin:0px;
        color:#fff;
        line-height:60px;
        text-shadow: 0px 2px 3px #777; 
      }
      #masthead h2 {
        font-size:2.4rem;
        margin:0px;
        color:#fff;
      }

      nav {
        height:50px;
        background-color:#999;
      }
      
      nav a {
        display:block;
        
        background-color:#999;
        
        /*Box Model*/
        width:25%;
        height:50px;
        
        /*Type*/
        text-decoration:none;
        font-size:1.8rem;
        text-transform:uppercase;
        text-align:center;
        color:#eee;
        line-height:50px;
        
        float:left;
        
      }
      
      nav a:hover {
        background-color:#666;
      }
      
      nav a.selected {
        background-color:#333;
      }
}

      #content {
        /*box model*/
        width:60%;
        padding:5px;
        
        background-color:#333;
        
        float:left;
      }
      
      #content img {
        
      }
     
      #content p {
        font-size:14px; line-height:20px; margin:0px 0px 25px;
      }

       #content h2 {
         font-size: 1.0rem margin:0px 0px 25px;
      }

        #sidebar p {
         font-size:14px; line-height:20px; margin:0px 0px 25px;
      }


      #closing { text-align:center; clear:both; font-size:1.4rem; }



/* media queries for smaller screens */

@media all and (min-width: 320px) {
  
  body {
    font-size: 1.3rem; /* smaller font */
  }

  nav {
    font-size: 1.2rem; /* bigger font */
  }

 h2 {
    font-size: 4.0rem; /* bigger font */
  }

  #container {
    max-width: 1120px;
  }
 
  img {
  max-width: 100%;
}

}

/* media queries for medium and up screens */

@media screen and (min-width: 700px) {
        body {  
          margin:0px; padding:0px;
          font-size:9px;
        }
        #container {
          background-color:#eee;
        }
        
        #masthead .logo {
          width:100%;
        }
        #masthead header {
          width:100%;
        }

        #masthead header h2 {
        font-size:4.4rem;
        color:#fff;
        float:right;
        margin-right: 40px;
      	}

        #masthead h1 {
        font-size:7.5rem;
        margin-top:-30px;
        }

      
       #content {
        /*box model*/
        width:60%;
        padding:5px;
        
        background-color:#eee;
        
        float:left;
      }
      
      #content img {
        
      }

      #content {
        width: 60%; /* 600 / 1000 */
      }
     
      #content p {
        font-size:14px; line-height:20px; margin:15px 0px 25px;
      }

       #content h2 {
         font-size: 1.0rem margin:0px 0px 25px;
      }

       #sidebar {
         font-size:1.4rem; line-height:20px; color:#eee;  margin:0px 0px 25px;
         float: right;
         width: 40%; /* 400 / 1000 */
      }


        #sidebar p {
         font-size:1.4rem; line-height:20px; color:#1f1f20;  margin-top:15px; margin-left:25px; 
      
      }

        #sidebar h2 {
         color:#1f1f20;  margin-top:15px; margin-left:25px; 
      
      }

      .gallery img {
         display:block;
         float:right;  
      }

      #closing { text-align:center; clear:both; font-size:1.4rem; margin-top:20px;} 


      }


      /* media queries for largest screens */

@media all and (min-width: 1000px) {
  
  

  #container {
    max-width: 1000px;
  }

   #masthead header h2 {
        font-size:5.4rem;
        color:red;
        float:right;
        margin-right:100px;
      }

        #masthead h1 {
        font-size:9.5rem;
        margin-top:-50px;
        }
 
}