justrjlewis/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<div class="viewport" id="viewport"><!-- viewport(outter wrapper) -->
      <div class="canvas" id="canvas"><!-- begin cavas (inner wrapper) -->
        <header class="page-header"><!-- begin header -->
          <div class="page" data-ui-component="header-top">
            <div class="media of1-2" data-ui-component="logo">
              <img src="assets/images/logo.png" alt="Zeta Phi Beta Sorority, Inc. – Oklahoma State" width="265px" height="auto">
            </div>
            <div class="media__body of2-2" data-ui-component="tagline">
              <p>Building on the Principles of Zeta<br>by Reconnecting, Retraining & Retaining</p>
            </div>
          </div>
          <hr class="divider">
          <div class="page" data-ui-component="menu-container" id="top">
            <a class="button open" id="nav-button" href="#nav-menu">menu</a>
            <nav  class="nav-menu" role="navigation">
              <ul class="menubar" data-ui-component="main-navigvation">
                <li class="menubar__item nav-selected"><a class="menubar__item-target" href="#nowhere">home</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#somewhere">ok zeta shop</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#here">zeta spotlights</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#there">announcements</a></li>
                <li class="menubar__item"><a class="menubar__item-target dropdown" href="#everywhere">about</a>
                  <ul class="menu">
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 1</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 2</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 3</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 4</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </header>
        <div class="content-area header-image__wrapper" data-ui-component="header-image__wrapper"><!-- begin header image content -->
          <div class="page">
            <img class="header-image" src="http://dummyimage.com/600x300/4d494d/686a82.gif&text=placeholder+image" alt="Page Header Image" width="600px" height="300px" >
          </div>
        </div><!-- end header image content -->
        <div class="content-area main"><!-- begin main content -->
          <div class="ribbon">
            <div class="page">
              <ul class="uilist" data-ui-component="principles">
                <li class="uilist__item">Scholarship</li>
                <li class="uilist__item">Service</li>
                <li class="uilist__item">Sisterly Love</li>
                <li class="uilist__item">Finer Womanhood</li>
              </ul>
            </div>
          </div>
          <div class="page content">
            <aside class="sidebar right-sidebar">
              <h2>Upcoming Events</h2>
              <div class="blog-index">
                <section class="blog-index__listing">
                  <h3  class="blog-index__title"><a href="">heading 1</a></h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 2</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 3</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 4</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
              </div>
            </aside>
            <div class="main-content right-sidebar">
              <div class="one-col 1of1">
                <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
              </div>
              <div class="two-col 1of2">
                <section class="panel cta">
                  <h2  class="cta-title">Call to Action Title</h2>
                  <div class="cta-body">
                    <div class="media">
                      <img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
                    </div>
                    <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button cta"><a href="">more</a></div>
                </section>
              </div>
              <div class="two-col 2of2">
                <section class="panel cta">
                  <h2  class="cta-title">Call to Action Title</h2>
                  <div class="cta-body">
                    <div class="media">
                      <img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
                    </div>
                    <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button cta"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <input type="text" name="username" placeholder="username">
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
            </div>
          </div>
        </div><!-- end main content -->
        <footer>
          <div class="page page-overlay">
          </div>
          <div class="page footer-top">
            <section class="four-col">
              <h3>heading 1</h3>
              <div><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</a></div>
            </section>
            <section class="four-col">
              <h3>heading 2</h3>
              <div>
                <input type="text" name="username" placeholder="username">
              </div>
            </section>
            <section class="four-col">
              <h3>heading 3</h3>
              <div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 4</h3>
              <div><p>Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</p></div>
            </section>
          </div>
          <hr class="divider">
          <div class="page footer-bottom">
            <section class="four-col">
              <h3>heading 1</h3>
              <div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</p></div>
            </section>
            <section class="four-col">
              <h3>heading 2</h3>
              <div><p>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 3</h3>
              <div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 4</h3>
              <div><p>Tenetur <a href="#"> quod</a> cum excepturi recusandae porro sint quas soluta!</p></div>
            </section>
          </div>
        </footer>
      </div><!-- end cavas(inner wrapper) -->
    </div><!--  end viewport(outter wrapper) -->

## SassMeister-input.scss
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Breakpoint Slicer (v1.3.4)
// Singularity.gs (v1.2.1)
// ----

//////////////////////////////
// @group old ie mixins
//////////////////////////////
    $fix-mqs: false !default;

    @mixin respond-min($width) {
        // If we're outputting for a fixed media query set...
        @if $fix-mqs {
            // ...and if we should apply these rules...
            @if $fix-mqs >= $width {
                // ...output the content the user gave us.
                @content;
            }
        }
        @else {
            // Otherwise, output it using a regular media query
            @media screen and (min-width: $width) {
                @content;
            }
        }
    }
    // I also have a respond-max mixin, that does what you might expect

    $old-ie: false !default;

    @mixin old-ie {
        // Only use this content if we're dealing with old IE
        @if $old-ie {
            @content;
        }
    }
// @end old ie mixin

//////////////////////////////
// @group modern browser mixin
//////////////////////////////
    $modern: false !default;

    @mixin modern {
        // Only use this content if we're dealing with a modern browser
        @if $modern {
            @content;
        }
    }
// @end modern browser mixin

//////////////////////////////
// @group visibility
//////////////////////////////
    // Hide from both screenreaders and browsers: h5bp.com/u
    @mixin hidden {
        display: none !important;
        visibility: hidden;
    }

    // Accessible Visibility – Hide only visually, but have it available for screenreaders: h5bp.com/v
    @mixin visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
// @end visibility

//////////////////////////////
// @group clearfix
//////////////////////////////
    @mixin clearfix {
        &:before,
        &:after {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }
        *zoom: 1;
    }
// @end clearfix

//////////////////////////////
// @group pixels to ems
//////////////////////////////
    @function pem($pxval, $base: 16) {
      @if (unitless($pxval)) {
        $pxval: $pxval * 1px;
      }

      @if (unitless($base)) {
        $base: $base * 1px;
      }

      @return $pxval / $base * 1em;
    }
// @end pem

//////////////////////////////
// @group layout
//////////////////////////////

// @end layout

//////////////////////////////
// Imports
//////////////////////////////
  @import "singularitygs";
  @import "breakpoint";
  @import 'breakpoint-slicer';
  @import "memo";
  @import url(http://fonts.googleapis.com/css?family=Great+Vibes|Roboto+Condensed:400,300|Open+Sans+Condensed:300);
  @import "compass/css3/opacity";
  // @import "../font-awesome.scss";
  // http://www.google.com/fonts#UsePlace:use/Collection:Great+Vibes|Roboto+Condensed:400,300|Open+Sans+Condensed:300
// @end Imports

//////////////////////////////
// Variables
//////////////////////////////
  //layout
    $breakpoint-no-query-wrappers:  true;
    $breakpoint-to-ems: true;
    $slicer-breakpoints: 0 768px 1024px 1200px;

    @include add-grid(12);
    @include add-grid(12 at bp(2));
    @include add-grid(12 at bp(3));
    @include add-grid(12 at bp(4));

    @include add-gutter(1/3);

    $nav-off-canvas-width: 70%;
  //style
    $blue: #2041a5;
    $gray: #777;
    $off-black: #333;
    $white: #fff;
// @end Variables

//////////////////////////////
// @group Theme Global Defaults
//////////////////////////////
  // element defaults
    ::selection {
      color:$blue;
      background:#7fb6ff;
    }
    ::-moz-selection {
      color:$blue;
      background:#7fb6ff;
    }
    // #57b8fa
    a {
      text-decoration: none;
      .content-area & {
        &:link, &:visited {
          color: $blue;
          // text-decoration: underline;
        }
        &:focus, &:hover {
          color: $off-black;
          background-color: #57b8fa;
          // text-decoration: none;
          // border-bottom: 1px solid #ddd;
        }
      }
    }
// @end Theme Global Defaults

//////////////////////////////
// @group placeholders
//////////////////////////////
  %row {
    @include grid-span(12,1);
  }
  %clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
  }
  %container {
    @include grid-span(10,2);
  }
  %body-font {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 300;
  }
  %subheader-font {
    font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 300;
  }
  %header-font {
    font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
    font-weight: 400;
  }
// @end placeholders

//////////////////////////////
// @group fonts
//////////////////////////////
  .page {
    @extend %body-font;
    h1, h2, h3, h4, h5, h6 {
      @extend %header-font;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    .page-header &, footer & {
      color: $white;
    }
    .content-area & {
      color: $off-black;
    }
  }
  .browsehappy {
    border-style: solid;
    border-width: 1px;
    display: block;
    font-weight: normal;
    position: relative;
    padding: pem(20) pem(5);
    font-size: pem(13);
    transition: opacity 300ms ease-out;
    background-color: #57b8fa;
    border-color: #1999e2;
    color: $off-black;
  }
// @end fonts

//////////////////////////////
// @group Grid Settings
//////////////////////////////
 .viewport {
   @extend %row;
 }
 .page {
   clear: both;
   @include old-ie {
     @include grid-span(10,2);
   }
   @include modern {
     @include to(1) {
       @include grid-span(10,2);
       max-width: 1200px;
     }
     @include from(2) {
       @include grid-span(10,2);
     }
   }
 }
  // .of1-2 {
  //   @include clearfix;
  //   @include modern {
  //     @include to(1) {
  //       @include layout(6) {
  //         @include grid-span(6,1);
  //         clear: both;
  //       }
  //     }
  //     @include from(2) {
  //       @include layout(12) {
  //         @include grid-span(7,1);
  //         clear: both;
  //       }
  //     }
  //   }
  // }
  // .of2-2 {
  //   @include clearfix;
  //   @include old-ie {
  //     @include layout(12) {
  //       @include grid-span(6,7);
  //     }
  //   }
  //   @include modern {
  //     @include to(1) {
  //       @include layout(6) {
  //         @include grid-span(6,1);
  //         clear: both;
  //       }
  //     }
  //     @include from(2) {
  //       @include layout(12) {
  //         @include grid-span(5,8);
  //         clear: both;
  //       }

  //     }
  //   }
  // }
// @end Grid Settings

//////////////////////////////
// @group Button Settings
//////////////////////////////
  .canvas {
    .button {
      padding: 0;
      border: 0;
      outline: none;
      white-space: nowrap;
      -webkit-tap-highlight-color: rgb(0,0,0);
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      clear: both;
      &.open {
        @include opacity(0.8);
        @include old-ie {
          @include hidden;
        }
        @include modern {
          @include to(1) {
            background-color: rgba(255,255,255,0);
            border: 1px solid $white;
            position: relative;
            color: $white;
            padding: pem(2) pem(5);
            text-transform: uppercase;
            font-weight: bold;
          }
          @include from(2) {
            @include visuallyhidden;
          }
        }
        &:focus,
        &:hover {
          // background-color: #7fb6ff;
          color: #7FB6FF;
          border-color: #2DA4FB;
          box-shadow: inset 0 0 2px 0 rgba(127, 182, 255, 0.75);
        }
      }
      &.cta {
        background-color: #2DA4FB;
        text-transform: capitalize;
        text-align: center;
        max-width: 100px;
        a {
          display: block;
          padding: pem(2) pem(5);
        }
      }
      &.info {
        background-color: $blue;
        text-transform: capitalize;
        text-align: center;
        max-width: 100px;
        a {
          color: $white;
          display: block;
          padding: pem(2) pem(5);
          &:hover {
            background-color: rgba(0,0,0,0.5) !important;
          }
        }
      }
    }
  }
// @end Button Settings

//////////////////////////////
// @group Form Settings
//////////////////////////////

  .canvas {
    input {
      border: 0;
      padding: 5px;
      font-size: .9em;
      // font-family: Arial, sans-serif;
      color: #aaa;
      border: 1px solid #ccc;
      margin: 0 0 10px;
      width: 100%;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
    }
    input:focus {
      border: 1px solid #7fb6ff;
    }
  }

// @end Form Settings

//////////////////////////////
// @group Nav Settings
//////////////////////////////
  //fixed nav -- ie8
    @include old-ie {
      body > nav {
        @include hidden;
      }
      .nav-menu {
        @extend %row;
        position: relative;
        overflow: hidden;
        color: #fff;
      }
      .menubar {
        @include clearfix;
        @extend %row;
        display: block;
        white-space: nowrap;
        padding-left: 0;
      }
      .menubar__item {
        display: inline-block;
        text-transform: uppercase;
        margin-left: -3px;
        border-right: 1px solid rgba(255,255,255, 0.1);
        border-bottom: 1px solid $blue;
        &:last-child {
          border-right: none;
        }
        &:hover {
          .menu {
            display: block;
            z-index: 2;
          }
        }
      }
      .menubar__item-target {
        display: block;
        color: #fff;
        @extend %subheader-font;
        font-weight: bold;
        font-size: 16px;
        line-height: 18px;
        padding: 6px 12px;
        outline: none;
        &:focus,
        &:hover {
          color: #7fb6ff;
          background: #1E3E9C;
        }
      }
      .menu {
        background-color: darken($blue, 2%);
        padding: 0 !important;
        position:absolute;
        top: 100%;
        list-style: none;
        width: 8em;
        display: none;
      }
    }
  // responsive nav
    @include modern {
      @include to(1) {
        .page {
          & > .nav-menu {
            @include hidden;
          }
          .page-header &:last-child {
            padding-bottom: pem(10);
          }
        }
        .mm-menu.mm-vertical .mm-list li.mm-opened > ul {
          background: rgba(0,0,0, 0.2);
        }
      }
      @incldue from(2) {

      }
      .nav-menu {
        position: relative;
        overflow: hidden;
        color: #fff;
        @include to(1) {
          &.mm-ismenu {
            background: darken($blue, 10%);
          }
        }
        @include from(2) {
          // @include grid-span(12,1);
          overflow: visible;
        }
      }
      .menubar {
        @extend %clearfix;
        display: block;
        @include to(1) {
          padding: 0 !important;
        }
        @include from(2) {
          padding-bottom: 7px;
        }
      }
      .menubar__item {
        position: relative;
        @include to(1) {
          border-top: 1px solid rgba(255,255,255, 0.1);
          &:last-child {
            border-bottom: 1px solid rgba(255,255,255, 0.1);
          }
          &.nav-selected:after {
            z-index: 4;
            display: block !important;
            content: "";
            position: absolute  !important;
            top: 50% !important;
            right: 1.9px;
            bottom: 50% !important;
            margin-top: pem(-15) !important;
            border-top: pem(15) transparent solid !important;
            border-bottom: pem(15) transparent solid !important;
            border-right: pem(15) $blue solid !important;
          }
        }
        @include from(2) {
          margin-left: -3px;
          display: inline-block;
          border-right: 1px solid rgba(255,255,255, 0.1);
          border-bottom: 1px solid $blue;
          &:last-child {
            border-right: none;
          }
          &:hover {
            .menu {
              display: block;
              z-index: 2;
            }
          }
        }
      }
      .menubar__item-target {
        display: block;
        color: #fff;
        @extend %subheader-font;
        outline: none;
        text-transform: uppercase;
        @include to(1) {
          padding: pem(12, 14) pem(30, 14);
        }
        @include from(2) {
          border-bottom: 1px solid $blue;
          font-size: pem(14);
          line-height: pem(18, 14);
          padding: pem(6, 14) pem(12, 14);
        }
        &:focus,
        &:hover {
          color: #7fb6ff;
          @include to(1) {
            background: rgba(0,0,0, 0.1);
          }
          @include from(2) {
            background: rgba(255,255,255, 0.1);
          }
        }
      }
      .menu {
        background-color: darken($blue, 2%);
        padding: 0 !important;
        @include to(1) {

        }
        @include from(2) {
          position:absolute;
          top: 100%;
          list-style: none;
          width: 8em;
          display: none;
        }
      }
      .menu__item {
        border-top: 1px solid rgba(255,255,255, 0.1);
        @include to(1) {

        }
        @include from(2) {

        }
        &:first-child {
          border-top: 0;
        }
        &:last-child {
          border-bottom: 1px solid rgba(255,255,255, 0.1);
        }
      }
      .menu__item-target {
        @include to(1) {

        }
        @include from(2) {
          display: block;
          color: $white;
          padding: 8px 20px;
        }
        &:focus,
        &:hover {
          color: #7fb6ff;
          background: rgba(255,255,255, 0.1);
        }
      }
      .nav-selected {
        > a {
          color: #7fb6ff;
          border-bottom: 1px solid #1999e2;
          @include to(1) {
            background: rgba(0,0,0, 0.01);
          }
          @include from(2) {
            background: rgba(255,255,255, 0.1);
          }
        }
      }
      .dropdown {
        @include from(2) {
          position: relative;
          padding-right: 24px;
          &:after {
            content: "+";
            position: absolute;
            top: 7px;
            right: 12px;
          }
        }
      }
    }
// @end Nav Settings

//////////////////////////////
// @group Style Settings
//////////////////////////////
  .media__body {
    .page-header .page & {
      color: $white;
      @include old-ie {
       font-size: 16px;
       text-align: right;
       padding: 4% 0 0 0;
      }
      @include modern {
        @include to(1) {
          font-size: .8rem;
          text-align: center;
        }
        @include from(2) {
          font-size: 1rem;
          text-align: right;
          padding: 4% 0 0 0;
        }
      }
    }
  }
  //page
  .page {
    .page-header &:first-child {
      @extend %clearfix;
      padding: pem(8) 0;
    }
    .main & {
      &.content {
        @extend %clearfix;
        background-color: $white;
        padding: pem(25) pem(18) 0;
      }
    }
    @include modern {
      @include to(1) {
        footer &.footer-top {
          padding: pem(60) pem(18) pem(10);
        }
        &.footer-bottom {
          padding: pem(10) pem(18) pem(10);
        }
      }
      @include from(2) {
        footer &.footer-top {
          position: relative;
          padding: pem(60) pem(18) pem(10);
        }
        &.footer-bottom {
          padding: pem(10) pem(18) pem(10);
        }
      }
    }
  }
  //header
    .page-header {
      @extend %clearfix;
      background-color: $blue;
      color: $white;
      position:relative;
      z-index: 1;
    }
    hr {
      clear: both;
      border: 0;
      &.divider {
        @include old-ie {
          border-top: 1px solid rgb(0, 0, 0);
          border-bottom: 1px solid rgb(255, 255, 255);
        }
        @include modern {
          height: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
      }
    }
  //main content
    .content-area {
      @extend %clearfix;
      @include modern {
        position: relative;
        .header-image__wrapper {
          z-index: 0;
        }
        .main {
          z-index: 2;
        }

      }
    }
    .header-image__wrapper {
      background: $white url(../assets/images/bg.png) repeat repeat;
      text-align: center;
      img {
        width: 100%;
        height: auto;
        max-height: 400px;
      }
      @include modern {
        @include from(2) {

        }
      }
    }
    .main {
      background: $blue url(../assets/images/blue_noise.png) repeat repeat;
    }
    .ribbon {
      @extend %clearfix;
      background-color: $blue;
      color: $white;
      @include modern {
        @include to(1) {
          margin-top: -4px;
        }
        @include from(2) {
          margin-top: -4px;
        }
      }
    }
    .uilist {
      .ribbon & {
        @extend %clearfix;
        padding: 2px 0;
        text-align: center;
        @include modern {
          @include to(1) {
            font-size: pem(8);
          }
          @include from(2) {
            font-size: pem(14);
          }
        }
        .uilist__item {
          position: relative;
          padding: 0 2.5%;
          @include modern {
            &:before {
              content: "";
              background: url('../assets/images/bullet.png') no-repeat;
              background-size: 90%;
              position: absolute;
              top: 0;
              left: 0;
              @include to(1) {
                width: 15px;
                height: 10px;
              }
              @include from(2) {
                width: 30px;
                height: 20px;
              }
            }
            &:last-child {
              &:after {
                content: "";
                background: url('../assets/images/bullet.png') no-repeat;
                background-size: 90%;
                position: absolute;
                top: 0;
                left: 90%;
                @include to(1) {
                  width: 15px;
                  height: 10px;
                }
                @include from(2) {
                  width: 30px;
                  height: 20px;
                }
              }
            }
          }
        }
      }
    }
    .sidebar, .main-content {
      @include clearfix;
      clear: both;
    }
  //footer
    footer {
      @extend %clearfix;
      background-color: $blue;
      color: $white;
      position: relative;
      z-index: 1;
      a:link, a:visited {
        color: #57B8FA;
        border-bottom: 1px dotted $white;
        &:hover, &:focus {
          color: #eee;
        }
      }
    }
    .page-overlay {
      @extend %clearfix;
      background-color: $white;
      height: 30px;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.8);
        box-shadow: 0 5px 30px rgba(0,0,0,0.8);
        bottom: 0;
        left: 2%;
        right: 2%;
        width: 95%;
        height: 50%;
        -moz-border-radius: 100%;
        border-radius: 100%;
      }
    }
    .footer-bottom {
      @include clearfix;
      padding-bottom: pem(40) !important;
    }
    //pagelists
      .blog-index__listing {
        border-width: 1px;
        border-style: solid;
        border-color: #ddd;
        margin-bottom: 2px;
      }
      .blog-index__title {
        background-color: #eee;
        text-align: center;
        padding: pem(5);
        a {
          display: block;
          &:link, &:visited {
            color: $blue;
            background-color: transparent;
            border: none;
          }
        }
        &:focus, &:hover {
          background: rgba(0,0,0, 0.2);
          a {
            color: $off-black;
          }
        }
      }
      .blog-index__byline {
        background-color: $white;
        text-align: center;
        color: $gray;
        font-size: .75em;
        line-height: 1.4em;
        border-bottom: 1px dotted #ddd;
        padding: pem(5);
      }
      .blog-index__description {
        background-color: $white;
        text-align: center;
        color: $off-black;
        font-size: .875em;
        padding: pem(5);
        &:hover {
          background-color: rgba(0,0,0, 0.2);
          a {
            background-color: transparent;
            color: $off-black;
            display: block;
            border: none;
          }
        }
      }
    //panel blocks
      .panel {
        @include clearfix;
        border-radius: 3px;
        margin-bottom: 5px;
        &.cta {
          background-color: $blue;
          color: $white;
          padding: pem(8) pem(20);
        }
        &.info {
          background-color: #eee;
          color: #333;
          padding: pem(8) pem(20);
        }
      }
    //cta
      .cta-title {
        font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
        font-weight: 300 !important;
        color: $white !important;
      }
      .cta-body {
        @include clearfix;
        padding: pem(8) 0;
      }
    // info
      .info-title {
        font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
        font-weight: 300 !important;
      }
      .info-body {
        padding: 0 0 pem(8);
      }
// @end Style Settings

## SassMeister-output.css
@import url(http://fonts.googleapis.com/css?family=Great+Vibes|Roboto+Condensed:400,300|Open+Sans+Condensed:300);
::selection {
  color: #2041a5;
  background: #7fb6ff;
}

::-moz-selection {
  color: #2041a5;
  background: #7fb6ff;
}

a {
  text-decoration: none;
}
.content-area a:link, .content-area a:visited {
  color: #2041a5;
}
.content-area a:focus, .content-area a:hover {
  color: #333333;
  background-color: #57b8fa;
}

.viewport {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.page-header .page:first-child, .main .page.content, .page-header, .content-area, .ribbon, .ribbon .uilist, footer, .page-overlay {
  *zoom: 1;
}
.page-header .page:first-child:before, .main .page.content:before, .page-header:before, .content-area:before, .ribbon:before, .ribbon .uilist:before, footer:before, .page-overlay:before, .page-header .page:first-child:after, .main .page.content:after, .page-header:after, .content-area:after, .ribbon:after, .ribbon .uilist:after, footer:after, .page-overlay:after {
  content: "";
  display: table;
}
.page-header .page:first-child:after, .main .page.content:after, .page-header:after, .content-area:after, .ribbon:after, .ribbon .uilist:after, footer:after, .page-overlay:after {
  clear: both;
}

.page {
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.page-header h1, footer h1, .page-header h2, footer h2, .page-header h3, footer h3, .page-header h4, footer h4, .page-header h5, footer h5, .page-header h6, footer h6 {
  color: white;
}
.content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6 {
  color: #333333;
}

.browsehappy {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-weight: normal;
  position: relative;
  padding: 1.25em 0.3125em;
  font-size: 0.8125em;
  transition: opacity 300ms ease-out;
  background-color: #57b8fa;
  border-color: #1999e2;
  color: #333333;
}

.page {
  clear: both;
}

.canvas .button {
  padding: 0;
  border: 0;
  outline: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: black;
  -webkit-tap-highlight-color: transparent;
  clear: both;
}
.canvas .button.open {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
.canvas .button.open:focus, .canvas .button.open:hover {
  color: #7FB6FF;
  border-color: #2DA4FB;
  box-shadow: inset 0 0 2px 0 rgba(127, 182, 255, 0.75);
}
.canvas .button.cta {
  background-color: #2DA4FB;
  text-transform: capitalize;
  text-align: center;
  max-width: 100px;
}
.canvas .button.cta a {
  display: block;
  padding: 0.125em 0.3125em;
}
.canvas .button.info {
  background-color: #2041a5;
  text-transform: capitalize;
  text-align: center;
  max-width: 100px;
}
.canvas .button.info a {
  color: white;
  display: block;
  padding: 0.125em 0.3125em;
}
.canvas .button.info a:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.canvas input {
  border: 0;
  padding: 5px;
  font-size: .9em;
  color: #aaa;
  border: 1px solid #ccc;
  margin: 0 0 10px;
  width: 100%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.canvas input:focus {
  border: 1px solid #7fb6ff;
}

.page-header .page .media__body {
  color: white;
}

.page-header .page:first-child {
  padding: 0.5em 0;
}
.main .page.content {
  background-color: white;
  padding: 1.5625em 1.125em 0;
}

.page-header {
  background-color: #2041a5;
  color: white;
  position: relative;
  z-index: 1;
}

hr {
  clear: both;
  border: 0;
}

.header-image__wrapper {
  background: white url(../assets/images/bg.png) repeat repeat;
  text-align: center;
}
.header-image__wrapper img {
  width: 100%;
  height: auto;
  max-height: 400px;
}

.main {
  background: #2041a5 url(../assets/images/blue_noise.png) repeat repeat;
}

.ribbon {
  background-color: #2041a5;
  color: white;
}

.ribbon .uilist {
  padding: 2px 0;
  text-align: center;
}
.ribbon .uilist .uilist__item {
  position: relative;
  padding: 0 2.5%;
}

.sidebar, .main-content {
  *zoom: 1;
  clear: both;
}
.sidebar:before, .sidebar:after, .main-content:before, .main-content:after {
  content: "";
  display: table;
}
.sidebar:after, .main-content:after {
  clear: both;
}

footer {
  background-color: #2041a5;
  color: white;
  position: relative;
  z-index: 1;
}
footer a:link, footer a:visited {
  color: #57B8FA;
  border-bottom: 1px dotted white;
}
footer a:link:hover, footer a:link:focus, footer a:visited:hover, footer a:visited:focus {
  color: #eee;
}

.page-overlay {
  background-color: white;
  height: 30px;
  position: relative;
}
.page-overlay:before {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 2%;
  right: 2%;
  width: 95%;
  height: 50%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.footer-bottom {
  *zoom: 1;
  padding-bottom: 2.5em !important;
}
.footer-bottom:before, .footer-bottom:after {
  content: "";
  display: table;
}
.footer-bottom:after {
  clear: both;
}

.blog-index__listing {
  border-width: 1px;
  border-style: solid;
  border-color: #ddd;
  margin-bottom: 2px;
}

.blog-index__title {
  background-color: #eee;
  text-align: center;
  padding: 0.3125em;
}
.blog-index__title a {
  display: block;
}
.blog-index__title a:link, .blog-index__title a:visited {
  color: #2041a5;
  background-color: transparent;
  border: none;
}
.blog-index__title:focus, .blog-index__title:hover {
  background: rgba(0, 0, 0, 0.2);
}
.blog-index__title:focus a, .blog-index__title:hover a {
  color: #333333;
}

.blog-index__byline {
  background-color: white;
  text-align: center;
  color: #777777;
  font-size: .75em;
  line-height: 1.4em;
  border-bottom: 1px dotted #ddd;
  padding: 0.3125em;
}

.blog-index__description {
  background-color: white;
  text-align: center;
  color: #333333;
  font-size: .875em;
  padding: 0.3125em;
}
.blog-index__description:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.blog-index__description:hover a {
  background-color: transparent;
  color: #333333;
  display: block;
  border: none;
}

.panel {
  *zoom: 1;
  border-radius: 3px;
  margin-bottom: 5px;
}
.panel:before, .panel:after {
  content: "";
  display: table;
}
.panel:after {
  clear: both;
}
.panel.cta {
  background-color: #2041a5;
  color: white;
  padding: 0.5em 1.25em;
}
.panel.info {
  background-color: #eee;
  color: #333;
  padding: 0.5em 1.25em;
}

.cta-title {
  font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
  color: white !important;
}

.cta-body {
  *zoom: 1;
  padding: 0.5em 0;
}
.cta-body:before, .cta-body:after {
  content: "";
  display: table;
}
.cta-body:after {
  clear: both;
}

.info-title {
  font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
}

.info-body {
  padding: 0 0 0.5em;
}

## SassMeister-rendered.html
<div class="viewport" id="viewport"><!-- viewport(outter wrapper) -->
      <div class="canvas" id="canvas"><!-- begin cavas (inner wrapper) -->
        <header class="page-header"><!-- begin header -->
          <div class="page" data-ui-component="header-top">
            <div class="media of1-2" data-ui-component="logo">
              <img src="assets/images/logo.png" alt="Zeta Phi Beta Sorority, Inc. – Oklahoma State" width="265px" height="auto">
            </div>
            <div class="media__body of2-2" data-ui-component="tagline">
              <p>Building on the Principles of Zeta<br>by Reconnecting, Retraining & Retaining</p>
            </div>
          </div>
          <hr class="divider">
          <div class="page" data-ui-component="menu-container" id="top">
            <a class="button open" id="nav-button" href="#nav-menu">menu</a>
            <nav  class="nav-menu" role="navigation">
              <ul class="menubar" data-ui-component="main-navigvation">
                <li class="menubar__item nav-selected"><a class="menubar__item-target" href="#nowhere">home</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#somewhere">ok zeta shop</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#here">zeta spotlights</a></li>
                <li class="menubar__item"><a class="menubar__item-target" href="#there">announcements</a></li>
                <li class="menubar__item"><a class="menubar__item-target dropdown" href="#everywhere">about</a>
                  <ul class="menu">
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 1</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 2</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 3</a></li>
                    <li class="menu__item"><a class="menu__item-target" href="#nowhere">item 4</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </header>
        <div class="content-area header-image__wrapper" data-ui-component="header-image__wrapper"><!-- begin header image content -->
          <div class="page">
            <img class="header-image" src="http://dummyimage.com/600x300/4d494d/686a82.gif&text=placeholder+image" alt="Page Header Image" width="600px" height="300px" >
          </div>
        </div><!-- end header image content -->
        <div class="content-area main"><!-- begin main content -->
          <div class="ribbon">
            <div class="page">
              <ul class="uilist" data-ui-component="principles">
                <li class="uilist__item">Scholarship</li>
                <li class="uilist__item">Service</li>
                <li class="uilist__item">Sisterly Love</li>
                <li class="uilist__item">Finer Womanhood</li>
              </ul>
            </div>
          </div>
          <div class="page content">
            <aside class="sidebar right-sidebar">
              <h2>Upcoming Events</h2>
              <div class="blog-index">
                <section class="blog-index__listing">
                  <h3  class="blog-index__title"><a href="">heading 1</a></h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 2</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 3</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
                <section class="blog-index__listing">
                  <h3 class="blog-index__title">heading 4</h3>
                  <div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
                  <div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
                </section>
              </div>
            </aside>
            <div class="main-content right-sidebar">
              <div class="one-col 1of1">
                <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
              </div>
              <div class="two-col 1of2">
                <section class="panel cta">
                  <h2  class="cta-title">Call to Action Title</h2>
                  <div class="cta-body">
                    <div class="media">
                      <img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
                    </div>
                    <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button cta"><a href="">more</a></div>
                </section>
              </div>
              <div class="two-col 2of2">
                <section class="panel cta">
                  <h2  class="cta-title">Call to Action Title</h2>
                  <div class="cta-body">
                    <div class="media">
                      <img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
                    </div>
                    <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button cta"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
              <div class="three-col">
                <section class="panel info">
                  <h2  class="info-title">Panel Title</h2>
                  <div class="info-body">
                    <input type="text" name="username" placeholder="username">
                  </div>
                  <div class="button info"><a href="">more</a></div>
                </section>
              </div>
            </div>
          </div>
        </div><!-- end main content -->
        <footer>
          <div class="page page-overlay">
          </div>
          <div class="page footer-top">
            <section class="four-col">
              <h3>heading 1</h3>
              <div><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</a></div>
            </section>
            <section class="four-col">
              <h3>heading 2</h3>
              <div>
                <input type="text" name="username" placeholder="username">
              </div>
            </section>
            <section class="four-col">
              <h3>heading 3</h3>
              <div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 4</h3>
              <div><p>Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</p></div>
            </section>
          </div>
          <hr class="divider">
          <div class="page footer-bottom">
            <section class="four-col">
              <h3>heading 1</h3>
              <div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</p></div>
            </section>
            <section class="four-col">
              <h3>heading 2</h3>
              <div><p>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 3</h3>
              <div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
            </section>
            <section class="four-col">
              <h3>heading 4</h3>
              <div><p>Tenetur <a href="#"> quod</a> cum excepturi recusandae porro sint quas soluta!</p></div>
            </section>
          </div>
        </footer>
      </div><!-- end cavas(inner wrapper) -->
    </div><!--  end viewport(outter wrapper) -->
	<div class="viewport" id="viewport"><!-- viewport(outter wrapper) -->
	<div class="canvas" id="canvas"><!-- begin cavas (inner wrapper) -->
	<header class="page-header"><!-- begin header -->
	<div class="page" data-ui-component="header-top">
	<div class="media of1-2" data-ui-component="logo">
	<img src="assets/images/logo.png" alt="Zeta Phi Beta Sorority, Inc. – Oklahoma State" width="265px" height="auto">
	</div>
	<div class="media__body of2-2" data-ui-component="tagline">
	<p>Building on the Principles of Zeta<br>by Reconnecting, Retraining & Retaining</p>
	</div>
	</div>
	<hr class="divider">
	<div class="page" data-ui-component="menu-container" id="top">
	<a class="button open" id="nav-button" href="#nav-menu">menu</a>
	<nav class="nav-menu" role="navigation">
	<ul class="menubar" data-ui-component="main-navigvation">
	<li class="menubar__item nav-selected"><a class="menubar__item-target" href="#nowhere">home</a></li>
	<li class="menubar__item"><a class="menubar__item-target" href="#somewhere">ok zeta shop</a></li>
	<li class="menubar__item"><a class="menubar__item-target" href="#here">zeta spotlights</a></li>
	<li class="menubar__item"><a class="menubar__item-target" href="#there">announcements</a></li>
	<li class="menubar__item"><a class="menubar__item-target dropdown" href="#everywhere">about</a>
	<ul class="menu">
	<li class="menu__item"><a class="menu__item-target" href="#nowhere">item 1</a></li>
	<li class="menu__item"><a class="menu__item-target" href="#nowhere">item 2</a></li>
	<li class="menu__item"><a class="menu__item-target" href="#nowhere">item 3</a></li>
	<li class="menu__item"><a class="menu__item-target" href="#nowhere">item 4</a></li>
	</ul>
	</li>
	</ul>
	</nav>
	</div>
	</header>
	<div class="content-area header-image__wrapper" data-ui-component="header-image__wrapper"><!-- begin header image content -->
	<div class="page">
	<img class="header-image" src="http://dummyimage.com/600x300/4d494d/686a82.gif&text=placeholder+image" alt="Page Header Image" width="600px" height="300px" >
	</div>
	</div><!-- end header image content -->
	<div class="content-area main"><!-- begin main content -->
	<div class="ribbon">
	<div class="page">
	<ul class="uilist" data-ui-component="principles">
	<li class="uilist__item">Scholarship</li>
	<li class="uilist__item">Service</li>
	<li class="uilist__item">Sisterly Love</li>
	<li class="uilist__item">Finer Womanhood</li>
	</ul>
	</div>
	</div>
	<div class="page content">
	<aside class="sidebar right-sidebar">
	<h2>Upcoming Events</h2>
	<div class="blog-index">
	<section class="blog-index__listing">
	<h3 class="blog-index__title"><a href="">heading 1</a></h3>
	<div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
	<div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
	</section>
	<section class="blog-index__listing">
	<h3 class="blog-index__title">heading 2</h3>
	<div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
	<div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
	</section>
	<section class="blog-index__listing">
	<h3 class="blog-index__title">heading 3</h3>
	<div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
	<div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
	</section>
	<section class="blog-index__listing">
	<h3 class="blog-index__title">heading 4</h3>
	<div class="blog-index__byline">May 1 2014 — Posted by Nationals</div>
	<div class="blog-index__description"><a href="#somewhere">More about this event »</a></div>
	</section>
	</div>
	</aside>
	<div class="main-content right-sidebar">
	<div class="one-col 1of1">
	<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
	</div>
	<div class="two-col 1of2">
	<section class="panel cta">
	<h2 class="cta-title">Call to Action Title</h2>
	<div class="cta-body">
	<div class="media">
	<img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
	</div>
	<p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
	</div>
	<div class="button cta"><a href="">more</a></div>
	</section>
	</div>
	<div class="two-col 2of2">
	<section class="panel cta">
	<h2 class="cta-title">Call to Action Title</h2>
	<div class="cta-body">
	<div class="media">
	<img src="http://dummyimage.com/75x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
	</div>
	<p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
	</div>
	<div class="button cta"><a href="">more</a></div>
	</section>
	</div>
	<div class="three-col">
	<section class="panel info">
	<h2 class="info-title">Panel Title</h2>
	<div class="info-body">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
	</div>
	<div class="button info"><a href="">more</a></div>
	</section>
	</div>
	<div class="three-col">
	<section class="panel info">
	<h2 class="info-title">Panel Title</h2>
	<div class="info-body">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, enim!</p>
	</div>
	<div class="button info"><a href="">more</a></div>
	</section>
	</div>
	<div class="three-col">
	<section class="panel info">
	<h2 class="info-title">Panel Title</h2>
	<div class="info-body">
	<input type="text" name="username" placeholder="username">
	</div>
	<div class="button info"><a href="">more</a></div>
	</section>
	</div>
	</div>
	</div>
	</div><!-- end main content -->
	<footer>
	<div class="page page-overlay">
	</div>
	<div class="page footer-top">
	<section class="four-col">
	<h3>heading 1</h3>
	<div><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</a></div>
	</section>
	<section class="four-col">
	<h3>heading 2</h3>
	<div>
	<input type="text" name="username" placeholder="username">
	</div>
	</section>
	<section class="four-col">
	<h3>heading 3</h3>
	<div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
	</section>
	<section class="four-col">
	<h3>heading 4</h3>
	<div><p>Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</p></div>
	</section>
	</div>
	<hr class="divider">
	<div class="page footer-bottom">
	<section class="four-col">
	<h3>heading 1</h3>
	<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</p></div>
	</section>
	<section class="four-col">
	<h3>heading 2</h3>
	<div><p>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</p></div>
	</section>
	<section class="four-col">
	<h3>heading 3</h3>
	<div><p>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</p></div>
	</section>
	<section class="four-col">
	<h3>heading 4</h3>
	<div><p>Tenetur <a href="#"> quod</a> cum excepturi recusandae porro sint quas soluta!</p></div>
	</section>
	</div>
	</footer>
	</div><!-- end cavas(inner wrapper) -->
	</div><!-- end viewport(outter wrapper) -->
	// ----
	// Sass (v3.3.9)
	// Compass (v1.0.0.alpha.20)
	// Breakpoint (v2.4.2)
	// Breakpoint Slicer (v1.3.4)
	// Singularity.gs (v1.2.1)
	// ----

	//////////////////////////////
	// @group old ie mixins
	//////////////////////////////
	$fix-mqs: false !default;

	@mixin respond-min($width) {
	// If we're outputting for a fixed media query set...
	@if $fix-mqs {
	// ...and if we should apply these rules...
	@if $fix-mqs >= $width {
	// ...output the content the user gave us.
	@content;
	}
	}
	@else {
	// Otherwise, output it using a regular media query
	@media screen and (min-width: $width) {
	@content;
	}
	}
	}
	// I also have a respond-max mixin, that does what you might expect

	$old-ie: false !default;

	@mixin old-ie {
	// Only use this content if we're dealing with old IE
	@if $old-ie {
	@content;
	}
	}
	// @end old ie mixin

	//////////////////////////////
	// @group modern browser mixin
	//////////////////////////////
	$modern: false !default;

	@mixin modern {
	// Only use this content if we're dealing with a modern browser
	@if $modern {
	@content;
	}
	}
	// @end modern browser mixin

	//////////////////////////////
	// @group visibility
	//////////////////////////////
	// Hide from both screenreaders and browsers: h5bp.com/u
	@mixin hidden {
	display: none !important;
	visibility: hidden;
	}

	// Accessible Visibility – Hide only visually, but have it available for screenreaders: h5bp.com/v
	@mixin visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}
	// @end visibility

	//////////////////////////////
	// @group clearfix
	//////////////////////////////
	@mixin clearfix {
	&:before,
	&:after {
	content: "";
	display: table;
	}
	&:after {
	clear: both;
	}
	*zoom: 1;
	}
	// @end clearfix

	//////////////////////////////
	// @group pixels to ems
	//////////////////////////////
	@function pem($pxval, $base: 16) {
	@if (unitless($pxval)) {
	$pxval: $pxval * 1px;
	}

	@if (unitless($base)) {
	$base: $base * 1px;
	}

	@return $pxval / $base * 1em;
	}
	// @end pem

	//////////////////////////////
	// @group layout
	//////////////////////////////

	// @end layout

	//////////////////////////////
	// Imports
	//////////////////////////////
	@import "singularitygs";
	@import "breakpoint";
	@import 'breakpoint-slicer';
	@import "memo";
	@import url(http://fonts.googleapis.com/css?family=Great+Vibes\|Roboto+Condensed:400,300\|Open+Sans+Condensed:300);
	@import "compass/css3/opacity";
	// @import "../font-awesome.scss";
	// http://www.google.com/fonts#UsePlace:use/Collection:Great+Vibes\|Roboto+Condensed:400,300\|Open+Sans+Condensed:300
	// @end Imports

	//////////////////////////////
	// Variables
	//////////////////////////////
	//layout
	$breakpoint-no-query-wrappers: true;
	$breakpoint-to-ems: true;
	$slicer-breakpoints: 0 768px 1024px 1200px;

	@include add-grid(12);
	@include add-grid(12 at bp(2));
	@include add-grid(12 at bp(3));
	@include add-grid(12 at bp(4));

	@include add-gutter(1/3);

	$nav-off-canvas-width: 70%;
	//style
	$blue: #2041a5;
	$gray: #777;
	$off-black: #333;
	$white: #fff;
	// @end Variables

	//////////////////////////////
	// @group Theme Global Defaults
	//////////////////////////////
	// element defaults
	::selection {
	color:$blue;
	background:#7fb6ff;
	}
	::-moz-selection {
	color:$blue;
	background:#7fb6ff;
	}
	// #57b8fa
	a {
	text-decoration: none;
	.content-area & {
	&:link, &:visited {
	color: $blue;
	// text-decoration: underline;
	}
	&:focus, &:hover {
	color: $off-black;
	background-color: #57b8fa;
	// text-decoration: none;
	// border-bottom: 1px solid #ddd;
	}
	}
	}
	// @end Theme Global Defaults

	//////////////////////////////
	// @group placeholders
	//////////////////////////////
	%row {
	@include grid-span(12,1);
	}
	%clearfix {
	&:before,
	&:after {
	content: "";
	display: table;
	}
	&:after {
	clear: both;
	}
	*zoom: 1;
	}
	%container {
	@include grid-span(10,2);
	}
	%body-font {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
	font-weight: 300;
	}
	%subheader-font {
	font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
	font-weight: 300;
	}
	%header-font {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
	font-weight: 400;
	}
	// @end placeholders

	//////////////////////////////
	// @group fonts
	//////////////////////////////
	.page {
	@extend %body-font;
	h1, h2, h3, h4, h5, h6 {
	@extend %header-font;
	}
	}
	h1, h2, h3, h4, h5, h6 {
	.page-header &, footer & {
	color: $white;
	}
	.content-area & {
	color: $off-black;
	}
	}
	.browsehappy {
	border-style: solid;
	border-width: 1px;
	display: block;
	font-weight: normal;
	position: relative;
	padding: pem(20) pem(5);
	font-size: pem(13);
	transition: opacity 300ms ease-out;
	background-color: #57b8fa;
	border-color: #1999e2;
	color: $off-black;
	}
	// @end fonts

	//////////////////////////////
	// @group Grid Settings
	//////////////////////////////
	.viewport {
	@extend %row;
	}
	.page {
	clear: both;
	@include old-ie {
	@include grid-span(10,2);
	}
	@include modern {
	@include to(1) {
	@include grid-span(10,2);
	max-width: 1200px;
	}
	@include from(2) {
	@include grid-span(10,2);
	}
	}
	}
	// .of1-2 {
	// @include clearfix;
	// @include modern {
	// @include to(1) {
	// @include layout(6) {
	// @include grid-span(6,1);
	// clear: both;
	// }
	// }
	// @include from(2) {
	// @include layout(12) {
	// @include grid-span(7,1);
	// clear: both;
	// }
	// }
	// }
	// }
	// .of2-2 {
	// @include clearfix;
	// @include old-ie {
	// @include layout(12) {
	// @include grid-span(6,7);
	// }
	// }
	// @include modern {
	// @include to(1) {
	// @include layout(6) {
	// @include grid-span(6,1);
	// clear: both;
	// }
	// }
	// @include from(2) {
	// @include layout(12) {
	// @include grid-span(5,8);
	// clear: both;
	// }

	// }
	// }
	// }
	// @end Grid Settings

	//////////////////////////////
	// @group Button Settings
	//////////////////////////////
	.canvas {
	.button {
	padding: 0;
	border: 0;
	outline: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: rgb(0,0,0);
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	clear: both;
	&.open {
	@include opacity(0.8);
	@include old-ie {
	@include hidden;
	}
	@include modern {
	@include to(1) {
	background-color: rgba(255,255,255,0);
	border: 1px solid $white;
	position: relative;
	color: $white;
	padding: pem(2) pem(5);
	text-transform: uppercase;
	font-weight: bold;
	}
	@include from(2) {
	@include visuallyhidden;
	}
	}
	&:focus,
	&:hover {
	// background-color: #7fb6ff;
	color: #7FB6FF;
	border-color: #2DA4FB;
	box-shadow: inset 0 0 2px 0 rgba(127, 182, 255, 0.75);
	}
	}
	&.cta {
	background-color: #2DA4FB;
	text-transform: capitalize;
	text-align: center;
	max-width: 100px;
	a {
	display: block;
	padding: pem(2) pem(5);
	}
	}
	&.info {
	background-color: $blue;
	text-transform: capitalize;
	text-align: center;
	max-width: 100px;
	a {
	color: $white;
	display: block;
	padding: pem(2) pem(5);
	&:hover {
	background-color: rgba(0,0,0,0.5) !important;
	}
	}
	}
	}
	}
	// @end Button Settings

	//////////////////////////////
	// @group Form Settings
	//////////////////////////////

	.canvas {
	input {
	border: 0;
	padding: 5px;
	font-size: .9em;
	// font-family: Arial, sans-serif;
	color: #aaa;
	border: 1px solid #ccc;
	margin: 0 0 10px;
	width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	}
	input:focus {
	border: 1px solid #7fb6ff;
	}
	}

	// @end Form Settings

	//////////////////////////////
	// @group Nav Settings
	//////////////////////////////
	//fixed nav -- ie8
	@include old-ie {
	body > nav {
	@include hidden;
	}
	.nav-menu {
	@extend %row;
	position: relative;
	overflow: hidden;
	color: #fff;
	}
	.menubar {
	@include clearfix;
	@extend %row;
	display: block;
	white-space: nowrap;
	padding-left: 0;
	}
	.menubar__item {
	display: inline-block;
	text-transform: uppercase;
	margin-left: -3px;
	border-right: 1px solid rgba(255,255,255, 0.1);
	border-bottom: 1px solid $blue;
	&:last-child {
	border-right: none;
	}
	&:hover {
	.menu {
	display: block;
	z-index: 2;
	}
	}
	}
	.menubar__item-target {
	display: block;
	color: #fff;
	@extend %subheader-font;
	font-weight: bold;
	font-size: 16px;
	line-height: 18px;
	padding: 6px 12px;
	outline: none;
	&:focus,
	&:hover {
	color: #7fb6ff;
	background: #1E3E9C;
	}
	}
	.menu {
	background-color: darken($blue, 2%);
	padding: 0 !important;
	position:absolute;
	top: 100%;
	list-style: none;
	width: 8em;
	display: none;
	}
	}
	// responsive nav
	@include modern {
	@include to(1) {
	.page {
	& > .nav-menu {
	@include hidden;
	}
	.page-header &:last-child {
	padding-bottom: pem(10);
	}
	}
	.mm-menu.mm-vertical .mm-list li.mm-opened > ul {
	background: rgba(0,0,0, 0.2);
	}
	}
	@incldue from(2) {

	}
	.nav-menu {
	position: relative;
	overflow: hidden;
	color: #fff;
	@include to(1) {
	&.mm-ismenu {
	background: darken($blue, 10%);
	}
	}
	@include from(2) {
	// @include grid-span(12,1);
	overflow: visible;
	}
	}
	.menubar {
	@extend %clearfix;
	display: block;
	@include to(1) {
	padding: 0 !important;
	}
	@include from(2) {
	padding-bottom: 7px;
	}
	}
	.menubar__item {
	position: relative;
	@include to(1) {
	border-top: 1px solid rgba(255,255,255, 0.1);
	&:last-child {
	border-bottom: 1px solid rgba(255,255,255, 0.1);
	}
	&.nav-selected:after {
	z-index: 4;
	display: block !important;
	content: "";
	position: absolute !important;
	top: 50% !important;
	right: 1.9px;
	bottom: 50% !important;
	margin-top: pem(-15) !important;
	border-top: pem(15) transparent solid !important;
	border-bottom: pem(15) transparent solid !important;
	border-right: pem(15) $blue solid !important;
	}
	}
	@include from(2) {
	margin-left: -3px;
	display: inline-block;
	border-right: 1px solid rgba(255,255,255, 0.1);
	border-bottom: 1px solid $blue;
	&:last-child {
	border-right: none;
	}
	&:hover {
	.menu {
	display: block;
	z-index: 2;
	}
	}
	}
	}
	.menubar__item-target {
	display: block;
	color: #fff;
	@extend %subheader-font;
	outline: none;
	text-transform: uppercase;
	@include to(1) {
	padding: pem(12, 14) pem(30, 14);
	}
	@include from(2) {
	border-bottom: 1px solid $blue;
	font-size: pem(14);
	line-height: pem(18, 14);
	padding: pem(6, 14) pem(12, 14);
	}
	&:focus,
	&:hover {
	color: #7fb6ff;
	@include to(1) {
	background: rgba(0,0,0, 0.1);
	}
	@include from(2) {
	background: rgba(255,255,255, 0.1);
	}
	}
	}
	.menu {
	background-color: darken($blue, 2%);
	padding: 0 !important;
	@include to(1) {

	}
	@include from(2) {
	position:absolute;
	top: 100%;
	list-style: none;
	width: 8em;
	display: none;
	}
	}
	.menu__item {
	border-top: 1px solid rgba(255,255,255, 0.1);
	@include to(1) {

	}
	@include from(2) {

	}
	&:first-child {
	border-top: 0;
	}
	&:last-child {
	border-bottom: 1px solid rgba(255,255,255, 0.1);
	}
	}
	.menu__item-target {
	@include to(1) {

	}
	@include from(2) {
	display: block;
	color: $white;
	padding: 8px 20px;
	}
	&:focus,
	&:hover {
	color: #7fb6ff;
	background: rgba(255,255,255, 0.1);
	}
	}
	.nav-selected {
	> a {
	color: #7fb6ff;
	border-bottom: 1px solid #1999e2;
	@include to(1) {
	background: rgba(0,0,0, 0.01);
	}
	@include from(2) {
	background: rgba(255,255,255, 0.1);
	}
	}
	}
	.dropdown {
	@include from(2) {
	position: relative;
	padding-right: 24px;
	&:after {
	content: "+";
	position: absolute;
	top: 7px;
	right: 12px;
	}
	}
	}
	}
	// @end Nav Settings

	//////////////////////////////
	// @group Style Settings
	//////////////////////////////
	.media__body {
	.page-header .page & {
	color: $white;
	@include old-ie {
	font-size: 16px;
	text-align: right;
	padding: 4% 0 0 0;
	}
	@include modern {
	@include to(1) {
	font-size: .8rem;
	text-align: center;
	}
	@include from(2) {
	font-size: 1rem;
	text-align: right;
	padding: 4% 0 0 0;
	}
	}
	}
	}
	//page
	.page {
	.page-header &:first-child {
	@extend %clearfix;
	padding: pem(8) 0;
	}
	.main & {
	&.content {
	@extend %clearfix;
	background-color: $white;
	padding: pem(25) pem(18) 0;
	}
	}
	@include modern {
	@include to(1) {
	footer &.footer-top {
	padding: pem(60) pem(18) pem(10);
	}
	&.footer-bottom {
	padding: pem(10) pem(18) pem(10);
	}
	}
	@include from(2) {
	footer &.footer-top {
	position: relative;
	padding: pem(60) pem(18) pem(10);
	}
	&.footer-bottom {
	padding: pem(10) pem(18) pem(10);
	}
	}
	}
	}
	//header
	.page-header {
	@extend %clearfix;
	background-color: $blue;
	color: $white;
	position:relative;
	z-index: 1;
	}
	hr {
	clear: both;
	border: 0;
	&.divider {
	@include old-ie {
	border-top: 1px solid rgb(0, 0, 0);
	border-bottom: 1px solid rgb(255, 255, 255);
	}
	@include modern {
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}
	}
	}
	//main content
	.content-area {
	@extend %clearfix;
	@include modern {
	position: relative;
	.header-image__wrapper {
	z-index: 0;
	}
	.main {
	z-index: 2;
	}

	}
	}
	.header-image__wrapper {
	background: $white url(../assets/images/bg.png) repeat repeat;
	text-align: center;
	img {
	width: 100%;
	height: auto;
	max-height: 400px;
	}
	@include modern {
	@include from(2) {

	}
	}
	}
	.main {
	background: $blue url(../assets/images/blue_noise.png) repeat repeat;
	}
	.ribbon {
	@extend %clearfix;
	background-color: $blue;
	color: $white;
	@include modern {
	@include to(1) {
	margin-top: -4px;
	}
	@include from(2) {
	margin-top: -4px;
	}
	}
	}
	.uilist {
	.ribbon & {
	@extend %clearfix;
	padding: 2px 0;
	text-align: center;
	@include modern {
	@include to(1) {
	font-size: pem(8);
	}
	@include from(2) {
	font-size: pem(14);
	}
	}
	.uilist__item {
	position: relative;
	padding: 0 2.5%;
	@include modern {
	&:before {
	content: "";
	background: url('../assets/images/bullet.png') no-repeat;
	background-size: 90%;
	position: absolute;
	top: 0;
	left: 0;
	@include to(1) {
	width: 15px;
	height: 10px;
	}
	@include from(2) {
	width: 30px;
	height: 20px;
	}
	}
	&:last-child {
	&:after {
	content: "";
	background: url('../assets/images/bullet.png') no-repeat;
	background-size: 90%;
	position: absolute;
	top: 0;
	left: 90%;
	@include to(1) {
	width: 15px;
	height: 10px;
	}
	@include from(2) {
	width: 30px;
	height: 20px;
	}
	}
	}
	}
	}
	}
	}
	.sidebar, .main-content {
	@include clearfix;
	clear: both;
	}
	//footer
	footer {
	@extend %clearfix;
	background-color: $blue;
	color: $white;
	position: relative;
	z-index: 1;
	a:link, a:visited {
	color: #57B8FA;
	border-bottom: 1px dotted $white;
	&:hover, &:focus {
	color: #eee;
	}
	}
	}
	.page-overlay {
	@extend %clearfix;
	background-color: $white;
	height: 30px;
	position: relative;
	&:before {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.8);
	box-shadow: 0 5px 30px rgba(0,0,0,0.8);
	bottom: 0;
	left: 2%;
	right: 2%;
	width: 95%;
	height: 50%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	}
	}
	.footer-bottom {
	@include clearfix;
	padding-bottom: pem(40) !important;
	}
	//pagelists
	.blog-index__listing {
	border-width: 1px;
	border-style: solid;
	border-color: #ddd;
	margin-bottom: 2px;
	}
	.blog-index__title {
	background-color: #eee;
	text-align: center;
	padding: pem(5);
	a {
	display: block;
	&:link, &:visited {
	color: $blue;
	background-color: transparent;
	border: none;
	}
	}
	&:focus, &:hover {
	background: rgba(0,0,0, 0.2);
	a {
	color: $off-black;
	}
	}
	}
	.blog-index__byline {
	background-color: $white;
	text-align: center;
	color: $gray;
	font-size: .75em;
	line-height: 1.4em;
	border-bottom: 1px dotted #ddd;
	padding: pem(5);
	}
	.blog-index__description {
	background-color: $white;
	text-align: center;
	color: $off-black;
	font-size: .875em;
	padding: pem(5);
	&:hover {
	background-color: rgba(0,0,0, 0.2);
	a {
	background-color: transparent;
	color: $off-black;
	display: block;
	border: none;
	}
	}
	}
	//panel blocks
	.panel {
	@include clearfix;
	border-radius: 3px;
	margin-bottom: 5px;
	&.cta {
	background-color: $blue;
	color: $white;
	padding: pem(8) pem(20);
	}
	&.info {
	background-color: #eee;
	color: #333;
	padding: pem(8) pem(20);
	}
	}
	//cta
	.cta-title {
	font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	color: $white !important;
	}
	.cta-body {
	@include clearfix;
	padding: pem(8) 0;
	}
	// info
	.info-title {
	font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	}
	.info-body {
	padding: 0 0 pem(8);
	}
	// @end Style Settings
	@import url(http://fonts.googleapis.com/css?family=Great+Vibes\|Roboto+Condensed:400,300\|Open+Sans+Condensed:300);
	::selection {
	color: #2041a5;
	background: #7fb6ff;
	}

	::-moz-selection {
	color: #2041a5;
	background: #7fb6ff;
	}

	a {
	text-decoration: none;
	}
	.content-area a:link, .content-area a:visited {
	color: #2041a5;
	}
	.content-area a:focus, .content-area a:hover {
	color: #333333;
	background-color: #57b8fa;
	}

	.viewport {
	width: 100%;
	float: right;
	margin-left: 0;
	margin-right: 0;
	clear: none;
	}

	.page-header .page:first-child, .main .page.content, .page-header, .content-area, .ribbon, .ribbon .uilist, footer, .page-overlay {
	*zoom: 1;
	}
	.page-header .page:first-child:before, .main .page.content:before, .page-header:before, .content-area:before, .ribbon:before, .ribbon .uilist:before, footer:before, .page-overlay:before, .page-header .page:first-child:after, .main .page.content:after, .page-header:after, .content-area:after, .ribbon:after, .ribbon .uilist:after, footer:after, .page-overlay:after {
	content: "";
	display: table;
	}
	.page-header .page:first-child:after, .main .page.content:after, .page-header:after, .content-area:after, .ribbon:after, .ribbon .uilist:after, footer:after, .page-overlay:after {
	clear: both;
	}

	.page {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
	font-weight: 300;
	}

	.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
	font-weight: 400;
	}

	.page-header h1, footer h1, .page-header h2, footer h2, .page-header h3, footer h3, .page-header h4, footer h4, .page-header h5, footer h5, .page-header h6, footer h6 {
	color: white;
	}
	.content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6 {
	color: #333333;
	}

	.browsehappy {
	border-style: solid;
	border-width: 1px;
	display: block;
	font-weight: normal;
	position: relative;
	padding: 1.25em 0.3125em;
	font-size: 0.8125em;
	transition: opacity 300ms ease-out;
	background-color: #57b8fa;
	border-color: #1999e2;
	color: #333333;
	}

	.page {
	clear: both;
	}

	.canvas .button {
	padding: 0;
	border: 0;
	outline: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: black;
	-webkit-tap-highlight-color: transparent;
	clear: both;
	}
	.canvas .button.open {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	opacity: 0.8;
	}
	.canvas .button.open:focus, .canvas .button.open:hover {
	color: #7FB6FF;
	border-color: #2DA4FB;
	box-shadow: inset 0 0 2px 0 rgba(127, 182, 255, 0.75);
	}
	.canvas .button.cta {
	background-color: #2DA4FB;
	text-transform: capitalize;
	text-align: center;
	max-width: 100px;
	}
	.canvas .button.cta a {
	display: block;
	padding: 0.125em 0.3125em;
	}
	.canvas .button.info {
	background-color: #2041a5;
	text-transform: capitalize;
	text-align: center;
	max-width: 100px;
	}
	.canvas .button.info a {
	color: white;
	display: block;
	padding: 0.125em 0.3125em;
	}
	.canvas .button.info a:hover {
	background-color: rgba(0, 0, 0, 0.5) !important;
	}

	.canvas input {
	border: 0;
	padding: 5px;
	font-size: .9em;
	color: #aaa;
	border: 1px solid #ccc;
	margin: 0 0 10px;
	width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	}
	.canvas input:focus {
	border: 1px solid #7fb6ff;
	}

	.page-header .page .media__body {
	color: white;
	}

	.page-header .page:first-child {
	padding: 0.5em 0;
	}
	.main .page.content {
	background-color: white;
	padding: 1.5625em 1.125em 0;
	}

	.page-header {
	background-color: #2041a5;
	color: white;
	position: relative;
	z-index: 1;
	}

	hr {
	clear: both;
	border: 0;
	}

	.header-image__wrapper {
	background: white url(../assets/images/bg.png) repeat repeat;
	text-align: center;
	}
	.header-image__wrapper img {
	width: 100%;
	height: auto;
	max-height: 400px;
	}

	.main {
	background: #2041a5 url(../assets/images/blue_noise.png) repeat repeat;
	}

	.ribbon {
	background-color: #2041a5;
	color: white;
	}

	.ribbon .uilist {
	padding: 2px 0;
	text-align: center;
	}
	.ribbon .uilist .uilist__item {
	position: relative;
	padding: 0 2.5%;
	}

	.sidebar, .main-content {
	*zoom: 1;
	clear: both;
	}
	.sidebar:before, .sidebar:after, .main-content:before, .main-content:after {
	content: "";
	display: table;
	}
	.sidebar:after, .main-content:after {
	clear: both;
	}

	footer {
	background-color: #2041a5;
	color: white;
	position: relative;
	z-index: 1;
	}
	footer a:link, footer a:visited {
	color: #57B8FA;
	border-bottom: 1px dotted white;
	}
	footer a:link:hover, footer a:link:focus, footer a:visited:hover, footer a:visited:focus {
	color: #eee;
	}

	.page-overlay {
	background-color: white;
	height: 30px;
	position: relative;
	}
	.page-overlay:before {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);
	bottom: 0;
	left: 2%;
	right: 2%;
	width: 95%;
	height: 50%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	}

	.footer-bottom {
	*zoom: 1;
	padding-bottom: 2.5em !important;
	}
	.footer-bottom:before, .footer-bottom:after {
	content: "";
	display: table;
	}
	.footer-bottom:after {
	clear: both;
	}

	.blog-index__listing {
	border-width: 1px;
	border-style: solid;
	border-color: #ddd;
	margin-bottom: 2px;
	}

	.blog-index__title {
	background-color: #eee;
	text-align: center;
	padding: 0.3125em;
	}
	.blog-index__title a {
	display: block;
	}
	.blog-index__title a:link, .blog-index__title a:visited {
	color: #2041a5;
	background-color: transparent;
	border: none;
	}
	.blog-index__title:focus, .blog-index__title:hover {
	background: rgba(0, 0, 0, 0.2);
	}
	.blog-index__title:focus a, .blog-index__title:hover a {
	color: #333333;
	}

	.blog-index__byline {
	background-color: white;
	text-align: center;
	color: #777777;
	font-size: .75em;
	line-height: 1.4em;
	border-bottom: 1px dotted #ddd;
	padding: 0.3125em;
	}

	.blog-index__description {
	background-color: white;
	text-align: center;
	color: #333333;
	font-size: .875em;
	padding: 0.3125em;
	}
	.blog-index__description:hover {
	background-color: rgba(0, 0, 0, 0.2);
	}
	.blog-index__description:hover a {
	background-color: transparent;
	color: #333333;
	display: block;
	border: none;
	}

	.panel {
	*zoom: 1;
	border-radius: 3px;
	margin-bottom: 5px;
	}
	.panel:before, .panel:after {
	content: "";
	display: table;
	}
	.panel:after {
	clear: both;
	}
	.panel.cta {
	background-color: #2041a5;
	color: white;
	padding: 0.5em 1.25em;
	}
	.panel.info {
	background-color: #eee;
	color: #333;
	padding: 0.5em 1.25em;
	}

	.cta-title {
	font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	color: white !important;
	}

	.cta-body {
	*zoom: 1;
	padding: 0.5em 0;
	}
	.cta-body:before, .cta-body:after {
	content: "";
	display: table;
	}
	.cta-body:after {
	clear: both;
	}

	.info-title {
	font-family: 'Open Sans Condensed', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	}

	.info-body {
	padding: 0 0 0.5em;
	}