// ====================================================
// DEFAULT PAGE STYLES
//

// adjustments to normalize.css

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 *    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
 *    http://snook.ca/archives/html_and_css/font-size-with-rem
 * 2. Keeps page centred in all browsers regardless of content height
 * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 */

html {
  font-size: 62.5%; /* 1 */
  overflow-y: scroll; /* 2 */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
  background-color: #fff;
}

/*
 * 1. Font-size increased to compensate for change to html element font-size in
 *    order to support beta typography which was set in ems
 *    (62.5% * 160% = 100%)
 * 2. Addresses margins handled incorrectly in IE6/7
 */

body {
  font-size: 160%; /* 1 */
  margin: 0; /* 2 */
}

#wrapper {
  background-color: transparent;
}

header.page-header {
  .hgroup {
    background-color: transparent;
  }
}


#content {
  display: block;
  margin: 0 auto;
  max-width: 1020px;
  position: relative;
}

article {
  .inner {
    padding: 0 10em 2em 2em;
    width: auto;
  }
  .article-container{
    margin-bottom: 45px;
  }
}

/* Global footer */

#footer {
  .footer-categories {
    @extend %contain-floats;

    @include media(tablet){
      padding: 0 $gutter-half $gutter;
    }

    .footer-explore,
    .footer-inside-government {
      @include media(tablet){
        float: left;
        width: 66.66%;
        padding-bottom: 60px;
      }

      h2 {
        margin: 0 15px;
        padding: 10px 0 0;

        @include media(tablet) {
          padding: 0 0 20px;
          border-bottom: 1px solid $border-colour;
        }
      }
    }

    hr {
      clear: both;
      margin: 0 15px 30px;
      border: 1px solid $border-colour;
      border-width: 1px 0 0 0;

      @include media(tablet){
        margin-bottom: 0;
      }
    }

    ul {
      @include core-16;
      list-style: none;
      padding: 0;
      margin: 0;

      @include media(tablet){
        float: left;
        margin: 15px 0 0 0;
        width: 50%;
      }

      li {
        display: block;
        margin-bottom: 5px;

        padding: 10px 0 0;
        margin: 0 15px 5px;

        @include media(tablet){
          padding: 20px 0 0;
          margin: 0 15px;
        }
      }
    }

    .footer-inside-government {
      @include media(tablet){
        float: left;
        width: 33.33%;
      }

      ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
