/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.7em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Palanquin', Helvetica, Arial, sans-serif;
  color: #000; 
  background: url('../media/pw_pattern.png');  }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
  color: #21b54a;    }
h1 { font-size: 3.0rem; line-height: 1.2;  letter-spacing: -.1rem; }
h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.1rem; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.4rem; margin-top: 20px; }
  h2 { font-size: 2.8rem;  }
}



p             { margin-top: 10px;
                line-height: 1.8;                          }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a             { color: #0073bd;
                text-decoration: underline;             }

a:hover       { color: #ef1821;                         }




/* DIVS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

*             { margin: 0;
                padding: 0;                              }



#TopBar       { margin-top: 20px;
                text-align: center;
                font-weight: 300;
                font-size: 1.3em;
                color: #0073bd;
                padding: 10px 20px;  
                background-color: #f6f6f6;
                border-bottom: solid 1px #0073bd;
                box-shadow: 0px 0px 10px #bbb;            }

@media (min-width: 550px) {
#TopBar       { text-align: left;                         } 
}


#TopBar a     { text-decoration: none;                    }



.social a     { display: inline-block;
                padding: 0 15px 0 0; }


#CONTENT      { padding: 20px;
                margin-top: 20px;
                background-color: #FFF;
                border-bottom: solid 1px #0073bd;
                box-shadow: 0px 0px 10px #bbb;            }



iframe        { margin-left: -10px;                       }
@media (min-width: 550px) {
iframe        { margin-left: 0;                           }
                          }

#FOOTER       { padding: 20px;
                font-size: 0.8em;
                font-weight: 300;
                color: #000;                              }