/* =======================================================
  	RESET! Put together from a few resets
========================================================== */
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-family: "Cardo", "Times", serif;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility; }

/* 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; }

html,
button,
input,
select,
textarea {
  color: #222; }

.clearasil {
  clear: both; }

/* =======================================================
      Variables 
========================================================== */
/* =======================================================
  	My styles and such
========================================================== */
body {
  background-color: #cccccc; }

#wrapper {
  width: 68.75em;
  max-width: 90%;
  margin: 1em auto 0 auto;
  position: relative;
  min-height: 100%; }

header {
  background-color: white;
  width: 100%;
  height: 3em;
  margin: .6em 0;
  padding: 1em; }

#logo {
  display: block;
  float: left;
  font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
  text-decoration: none;
  font-size: 1.1em;
  text-align: center; }

#mainColumn {
  background-color: white;
  width: 96%;
  margin: 0em 1em; }

h1 {
  color: #333;
  font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
  font-size: 2em;
  font-weight: bold; }

h2 {
  color: #333;
  font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
  font-size: 1.5em;
  line-height: 1.3em;
  margin-bottom: 1em; }

h3 {
  font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
  font-size: 1em;
  color: #333;
  text-decoration: none; }

p {
  margin: 0 0 1.1em 0;
  color: #000;
  font-family: "Cardo", "Times", serif;
  font-size: 1em;
  line-height: 1.3em; }

img.articleImg {
  float: right;
  margin: 0 0 1em 1em;
  border: 1px solid #aaa; }

.articlePlain {
  padding-bottom: 1em; }

nav {
  position: absolute;
  top: .7em;
  right: .7em;
  line-height: 2em; }
  nav ul {
    float: right; }
  nav li {
    display: inline;
    border-left: 1px #cccccc solid; }
    nav li a {
      font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
      text-align: center;
      padding: .2em .8em;
      margin: 0 0 0 .3em;
      color: #663333; }
    nav li a.activeLink {
      background-color: #ffcc00; }
    nav li a:hover {
      background: #ffcc00;
      /* Old browsers */
      background: -moz-linear-gradient(top, #ffe014 0%, #ffcc00 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe014), color-stop(100%, #ffcc00));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ffe014 0%, #ffcc00 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ffe014 0%, #ffcc00 100%);
      /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ffe014 0%, #ffcc00 100%);
      /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$navColor+20, endColorstr=$navColor,GradientType=0 );
      /* IE6-9 */
      background: linear-gradient(top, #ffe014 0%, #ffcc00 100%);
      /* W3C */
      text-decoration: none; }
    nav li:first-child {
      border: none; }

/*
#backToTop a {
	visibility: hidden;
}
*/
#mainContent {
  background-color: white;
  float: left;
  padding: 1em;
  margin-top: 1.5em;
  width: 68%; }

.accordion {
  width: 100%; }
  .accordion .accordionitem {
    cursor: pointer;
    -webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
    background-color: #AAA;
    height: 2em;
    overflow: hidden;
    margin-bottom: 1em;
    padding: .5em;
    /* this class gets appended to .accordionitem through jquery 
       and therefore changes to full height */ }
    .accordion .accordionitem h3 {
      margin-bottom: 1em; }
    .accordion .accordionitem.openMe {
      height: 100%;
      overflow: auto; }

a.menu-link {
  display: none; }

#sideBar, #sidebox {
  background-color: white;
  min-height: 10em;
  float: right;
  border-left: 1px #cccccc solid;
  padding: 1em;
  margin-top: 1.5em;
  width: 28%; }
  #sideBar h2, #sidebox h2 {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: .4em; }
  #sideBar p, #sidebox p {
    font-size: .8em;
    line-height: 1.2em; }
  #sideBar .sideItem, #sidebox .sideItem {
    padding-bottom: 1em; }

#sidebox {
  background-color: #FFC; }

footer {
  background-color: #aaaaaa;
  position: fixed;
  bottom: 0em;
  height: 2.5em;
  width: 100%;
  padding: .5em; }

/* ===================================================== 
   						MEDIA QUERIES 
   ===================================================== */
@media only screen and (max-width: 48em) {
  /* These are styles for our more-or-less tablet-sized breakpoint */
  #wrapper {
    background-color: transparent;
    width: 48em;
    max-width: 94%;
    margin-bottom: 3em; }

  .js nav[role=navigation] {
    max-height: none; }

  #sideBar, #sidebox {
    float: none;
    clear: both;
    width: 100%;
    padding: 1em;
    min-height: 100px;
    border: none; }

  #mainContent {
    background-color: white;
    width: 100%;
    margin-bottom: 2em; }

  #backToTop {
    visibility: visible; }

  #backToTop a {
    /* This is all for the Back To Top link */
    /* first, unhide it from the larger layout 
    visibility: visible; */
    /* display as block, then hide it right away */
    display: block;
    display: none;
    /* make sure it's top of all other elements and
       doesn't completely hide the content behind it */
    z-index: 999;
    opacity: .6;
    position: fixed;
    top: .5em;
    right: .7em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: .8em;
    background-color: #333;
    font-family: "Signika Negative", "Gotham", "Helvetica", sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-size: .8em;
    color: #fff; }
    #backToTop a:hover {
      background-color: #000;
      opacity: .8; } }
@media only screen and (max-width: 31em) {
  /* Here are the styles for when our page drops to below our smallest breakpoint */
  body {
    min-width: 19em; }

  #wrapper {
    width: 31em;
    max-width: 94%;
    margin: 1em 1em 1em .5em; }

  #mainContent {
    margin-top: .5em;
    min-width: 31em -1em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    #mainContent h2 {
      font-size: 1.1em;
      line-height: 1.2em; }

  #mainContent.pushDown {
    margin-top: 15.5em; }

  a.menu-link {
    display: block;
    width: 3em;
    height: 3em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 500;
    border-left: 1px solid #cccccc;
    background-color: #FFC; }
    a.menu-link img {
      display: block;
      margin: 0 auto;
      padding-top: .8em; }
    a.menu-link:hover.menu-link {
      border-left: 1px solid #cccccc; }

  header {
    min-height: 3em;
    width: 100%; }
    header .logo {
      clear: left;
      float: none;
      margin: 0px auto;
      padding-top: 2em;
      padding-bottom: .6em; }

  nav {
    width: 100%;
    font-size: 1em;
    position: absolute;
    z-index: 500;
    top: 3em;
    left: 0em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    nav ul {
      float: none;
      border-top: 1px solid #cccccc; }
      nav ul li {
        display: block;
        background-color: #FFF;
        border-left: none;
        border-right: none; }
        nav ul li a {
          height: 3em;
          display: block;
          padding-top: .5em;
          margin: 0;
          border-bottom: 1px solid #cccccc; }
          nav ul li a :hover {
            background-color: #FC0; }

  #sideBar, #sidebox {
    float: none;
    clear: both;
    border: none;
    position: relative;
    width: 100%; }

  footer {
    background-color: #aaaaaa;
    position: relative;
    height: 2.5em;
    width: 100%;
    padding: .5em; }

  /* This is the stuff that makes our nav appear and disappear */
  .js nav[role=navigation] {
    overflow: hidden;
    max-height: 0; }

  nav[role=navigation].active {
    max-height: 15.5em; }

  #mainContent.pushDown {
    margin-top: 15.5em; } }