/*                                                                                                                                         
                                                ,,            ,,                          ,,                                             
 .M"""bgd mm                                    db          `7MM        mm         mm   `7MM                                    OO OO OO 
,MI    "Y MM                                                  MM        MM         MM     MM                                    88 88 88 
`MMb.   mmMMmm ,pW"Wq.`7MMpdMAo.     `7Mb,od8 `7MM  .P"Ybmmm  MMpMMMb.mmMMmm     mmMMmm   MMpMMMb.  .gP"Ya `7Mb,od8 .gP"Ya      || || || 
  `YMMNq. MM  6W'   `Wb MM   `Wb       MM' "'   MM :MI  I8    MM    MM  MM         MM     MM    MM ,M'   Yb  MM' "',M'   Yb     || || || 
.     `MM MM  8M     M8 MM    M8       MM       MM  WmmmP"    MM    MM  MM         MM     MM    MM 8M""""""  MM    8M""""""     `' `' `' 
Mb     dM MM  YA.   ,A9 MM   ,AP       MM       MM 8M         MM    MM  MM         MM     MM    MM YM.    ,  MM    YM.    ,     ,, ,, ,, 
P"Ybmmd"  `Mbmo`Ybmd9'  MMbmmd'      .JMML.   .JMML.YMMMMMb .JMML  JMML.`Mbmo      `Mbmo.JMML  JMML.`Mbmmd'.JMML.   `Mbmmd'     db db db 
                        MM                         6'     dP                                                                             
                      .JMML.                       Ybmmmd'                                                                               

Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray!
You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet.
So please don't use these styles. They're just here to put together the demo, and nothing more.
They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself.

Atomic design is philosophically complimentary with these CSS approaches:

* SMACSS by Jonathan Snook http://smacss.com/
* OOCSS by Nicole Sullivan http://oocss.org/
* BEM CSS Methology : http://bem.info/method/
* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines

So feel free to use any of these approaches. Or don't. It's totally up to you.

*/
/*------------------------------------*\
    $TABLE OF CONTENTS 
    based generally on Harry Roberts excellent CSS Guidelines https://github.com/csswizardry/CSS-Guidelines
\*------------------------------------*/
/**
 * VARIABLES..............................Declarations of Sass variables 
 * .....Colors
 * .....Typography
 * .....Layout
 * .....Defaults
 * .....Breakpoints
 * MIXINS.................................Sass mixins 
 * RESET..................................Set reset defaults
 * GLOBAL CLASSES.........................Set reset defaults
 * GLOBAL ELEMENTS........................Establish global styles
 * .....Main
 * .....Headings
 * .....Text-related elements (p, blockquote, lists)
 * .....Defaults
 * .....Breakpoints
 * TYPOGRAPHY------------------------------
 * MEDIA------------------------------
 * LAYOUT------------------------------
 * NAVIGATION------------------------------
 * TOC To Be Continued
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/* CSS Transition
	Usage: @include transition(width,0.3s,ease-out);
 */
/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback  
	Usage: @include font-size(1, large);
*/
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0; }

header, footer, nav, section, article, hgroup, figure {
  display: block; }

/*------------------------------------*\
    $GLOBAL ELEMENTS
\*------------------------------------*/
/*------------------------------------*\
    $GLOBAL CLASSES
\*------------------------------------*/
/* Clearfix */
.cf, .l-two-col, [role=main] {
  *zoom: 1; }

.cf:before, .l-two-col:before, [role=main]:before, .cf:after, .l-two-col:after, [role=main]:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.cf:after, .l-two-col:after, [role=main]:after {
  clear: both; }

/* Completely remove from the flow and screen readers. */
.is-hidden {
  display: none !important;
  visibility: hidden !important; }

/* Completely remove from the flow but leave available to screen readers. */
.is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

/* Floats */
.right {
  float: right;
  padding: 0 0 1em 1em; }

.right-search {
  float: right;
  padding: 0 0 1em 0; }

.left {
  float: left;
  padding: 0 1em 1em 0; }

/* Text-Align */
.align-right {
  text-align: right; }

.align-center {
  text-align: center; }

.align-left {
  text-align: left; }

/* Display Classes */
@media all and (max-width: 46.8em) {
  .hide-small {
    display: none; } }

@media all and (min-width: 46.8em) and (max-width: 50em) {
  .hide-med {
    display: none; } }

@media all and (min-width: 50em) {
  .hide-large {
    display: none; } }

.valid {
  color: #089e00; }

.error {
  color: red; }

.warning {
  color: #fff664; }

.information {
  color: #000db5; }

.font-secondary {
  font-family: Georgia, Times, "Times New Roman", serif; }

body {
  background: white;
  font: 100%/1.5 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #333333; }

/* Links */
a {
  color: #333333;
  text-decoration: none;
  outline: 0; }
  a:hover, a:focus {
    color: gray; }

/* Headings */
/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */
h1, .alpha {
  line-height: 1.2; }

h2, .beta {
  line-height: 1.2; }

h3, .gamma {
  line-height: 1.2; }

/* Subheadings */
.subheading {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-weight: normal; }

/* Text-Related Elements */
p {
  margin-bottom: 1em; }

/* Blockquote */
blockquote {
  font-style: italic;
  border-left: 1px solid gray;
  color: gray;
  padding-left: 1em;
  margin-bottom: 1em; }

/* Horizontal Rule */
hr {
  border: 0;
  height: 2px;
  background: #eeeeee;
  margin: 2em 0; }

abbr {
  border-bottom: 1px dotted gray;
  cursor: help; }

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none; }

/* Definition Lists */
dl {
  overflow: hidden;
  margin: 0 0 1em; }

dt {
  font-weight: bold; }

dd {
  margin-left: 0; }

/*------------------------------------*\
    $MEDIA ELEMENTS
\*------------------------------------*/
/* Flexible Media */
img, video, object {
  max-width: 100%;
  height: auto; }

iframe {
  margin-bottom: 1em; }

figure {
  margin-bottom: 1em; }
  figure img {
    margin-bottom: 0.5em; }

figcaption {
  font-style: italic; }

/*------------------------------------*\
    $FORMS
\*------------------------------------*/
form ol, form ul {
  list-style: none;
  margin-left: 0; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

label {
  display: block;
  padding-bottom: 0.5em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0 1px 0; }

input, textarea {
  width: 100%;
  border: 1px solid gray;
  padding: 0.5em 0.65rem; }

input[type=text], input[type=search], input[type=url], input[type=number], textarea {
  -webkit-appearance: none; }

button, input[type="submit"] {
  padding: 0.5em;
  background: #333333;
  border: 1px solid gray;
  cursor: pointer; }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.3em; }

input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

.field-container {
  margin-bottom: 1em; }

.inline-form fieldset, .inline-form .inline-container {
  position: relative; }
.inline-form input[type=submit], .inline-form button, .inline-form .btn {
  font-size: 0.875em;
  padding: 0.65rem 1.3rem;
  background: #333333;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: auto; }
  .inline-form input[type=submit]:hover, .inline-form input[type=submit]:focus, .inline-form button:hover, .inline-form button:focus, .inline-form .btn:hover, .inline-form .btn:focus {
    background: gray;
    color: white; }

/* Validation */
.has-error {
  border-color: red; }

.is-valid {
  border-color: #089e00; }

/*------------------------------------*\
    $SPECIFIC FORMS
\*------------------------------------*/
/* Search Form */
.search-field {
  padding-right: 3em; }

.inline-form .search-submit {
  background: none;
  padding: 0.78em 1em;
  border: 0;
  border-left: 1px solid gray;
  color: gray; }

/*------------------------------------*\
    $Table
\*------------------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid gray;
  width: 100%; }

th {
  text-align: left;
  border: 1px solid gray;
  padding: 0.2em; }

td {
  border: 1px solid gray;
  padding: 0.2em; }

.animate-fade {
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out; }
  .animate-fade:hover {
    opacity: 0; }

.animate-move > .demo-shape {
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out; }

/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/* Layout Container */
.lc, .header, [role=main] {
  max-width: 72em;
  margin: 0 auto;
  padding: 0.5em; }

/*------------------------------------*\
    $TEMPLATES
\*------------------------------------*/
/* Two Column Layout */
@media all and (min-width: 50em) {
  .l-two-col .l-main {
    float: left;
    width: 70%;
    padding-right: 1em; } }
@media all and (max-width: 50em) {
  .l-two-col .l-sidebar {
    clear: both; } }
@media all and (min-width: 50em) {
  .l-two-col .l-sidebar {
    float: left;
    width: 30%;
    padding: 0 0 0 1em; } }

/*------------------------------------*\
    $GRIDS
\*------------------------------------*/
/* Grid Container */
.g {
  overflow: hidden;
  margin: 0 -0.5em; }

/* Grid Item */
.gi {
  padding: 0.5em; }
  .gi img {
    display: block; }
  @media all and (min-width: 46.8em) {
    .gi {
      float: left; } }

/* Grid 1up */
.g-1up .gi {
  width: 100%; }

/* Grid 2up */
@media all and (min-width: 46.8em) {
  .g-2up > .gi {
    float: left;
    width: 50%; }
    .g-2up > .gi:nth-of-type(odd) {
      clear: left; } }

/* Grid Half (Always displayed side by side) */
.g-half > .gi {
  float: left;
  width: 50%; }
  .g-half > .gi:nth-of-type(odd) {
    clear: left; }

/* Grid 3up */
@media all and (min-width: 46.8em) {
  .g-3up > .gi {
    float: left;
    width: 50%; }
    .g-3up > .gi:nth-of-type(2n+1) {
      clear: left; } }
@media all and (min-width: 50em) {
  .g-3up > .gi {
    width: 33.3333333%; }
    .g-3up > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-3up > .gi:nth-of-type(3n+1) {
      clear: left; } }

/* Grid 4up */
@media all and (min-width: 46.8em) {
  .g-4up > .gi {
    float: left;
    width: 50%; }
    .g-4up > .gi:nth-of-type(2n+1) {
      clear: both; } }
@media all and (min-width: 50em) {
  .g-4up > .gi {
    width: 25%; }
    .g-4up > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-4up > .gi:nth-of-type(4n+1) {
      clear: left; } }

/* Grid Quarter (Always displayed side by side) */
.g-quarter > .gi {
  float: left;
  width: 24%; }
  .g-quarter > .gi:nth-of-type(4n+1) {
    clear: left; }

@media all and (min-width: 29.75em) {
  .g-max4 > .gi {
    float: left;
    width: 50%; }
    .g-max4 > .gi:nth-of-type(2n+1) {
      clear: both; } }
@media all and (min-width: 39.8em) {
  .g-max4 > .gi {
    width: 33.3333333%; }
    .g-max4 > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-max4 > .gi:nth-of-type(3n+1) {
      clear: left; } }
@media all and (min-width: 50em) {
  .g-max4 > .gi {
    width: 25%; }
    .g-max4 > .gi:nth-of-type(3n+1) {
      clear: none; }
    .g-max4 > .gi:nth-of-type(4n+1) {
      clear: left; } }

/* Grid 5up */
.g-max5 > .gi {
  float: left;
  width: 50%; }
  .g-max5 > .gi:nth-of-type(2n+1) {
    clear: both; }
@media all and (min-width: 39.8em) {
  .g-max5 > .gi {
    width: 33.3333333%; }
    .g-max5 > .gi:nth-of-type(2n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(3n+1) {
      clear: left; } }
@media all and (min-width: 46.8em) {
  .g-max5 > .gi {
    width: 25%; }
    .g-max5 > .gi:nth-of-type(3n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(4n+1) {
      clear: left; } }
@media all and (min-width: 48em) {
  .g-max5 > .gi {
    width: 20%; }
    .g-max5 > .gi:nth-of-type(4n+1) {
      clear: none; }
    .g-max5 > .gi:nth-of-type(5n+1) {
      clear: left; } }

/* Grid 2/3 */
@media all and (min-width: 46.8em) {
  .gi-2-3 {
    float: left;
    width: 66.666666%; } }

@media all and (min-width: 46.8em) {
  .gi-1-3 {
    float: left;
    width: 33.333333%; } }

/* Grid 4up block */
.g-opposites .gi {
  float: left; }
  .g-opposites .gi:last-child {
    float: right;
    text-align: right; }

/*------------------------------------*\
    $PAGE STRUCTURE
\*------------------------------------*/
.header {
  background: white;
  padding: 0;
  border-bottom: 1px solid #dbdbdb; }

.logo {
  float: left;
  max-width: 8rem;
  margin: 0.4rem; }
  @media all and (min-width: 46.8em) {
    .logo {
      max-width: 9rem; } }

.nav-toggle {
  float: right;
  display: block;
  padding: 0.9rem 1rem 0.7rem;
  font-size: 1.3rem;
  line-height: 1;
  border-left: 1px solid #dbdbdb; }
  @media all and (min-width: 46.8em) {
    .nav-toggle {
      display: none; } }
  @media all and (max-width: 17em) {
    .nav-toggle {
      padding-left: 0.2rem;
      padding-right: 0.2rem; } }

.search-form {
  overflow: hidden;
  max-height: 0; }
  @media all and (min-width: 46.8em) {
    .search-form {
      float: right;
      max-height: none;
      margin: 0.65em 0.5em 0 0; } }

/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/
.nav {
  clear: both;
  overflow: hidden;
  max-height: 0; }
  .nav a {
    display: block;
    padding: 1em;
    border-top: 1px solid #eeeeee; }
  .nav.active {
    max-height: 40em; }
  @media all and (min-width: 46.8em) {
    .nav {
      max-height: none;
      float: right;
      clear: none; }
      .nav li {
        float: left; }
      .nav a {
        border: 0; } }

.pagination {
  overflow: hidden; }
  .pagination li {
    float: left;
    border-right: 1px solid #eeeeee; }
    .pagination li:last-child {
      border: 0; }
  .pagination a {
    padding: 1em; }

/*------------------------------------*\
    $MAIN CONTENT AREA
\*------------------------------------*/
[role=main] {
  padding: 0.5em 0.5em 2em;
  overflow: hidden; }

/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
  clear: both;
  overflow: hidden;
  background: #131313;
  color: white;
  line-height: 1.2; }
  .footer a {
    color: #f9f9f9; }

.nav-footer {
  margin: -1em -1em 1em; }
  .nav-footer li {
    border-bottom: 1px solid #333333; }
    @media all and (min-width: 46.8em) {
      .nav-footer li {
        border: 0;
        float: left; } }
  .nav-footer a {
    display: block;
    padding: 1em; }

@media all and (min-width: 46.8em) {
  .copyright {
    float: right; } }

/*------------------------------------*\
    $TEXT Styles
\*------------------------------------*/
.intro {
  font-size: 1.0625em;
  font-weight: bold; }

.pullquote {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 1.4375em; }

.caption {
  font-style: italic; }

.text a {
  text-decoration: underline; }
.text ul {
  list-style: disc;
  margin: 0 0 1em 1.2em; }
  .text ul ul {
    margin-bottom: 0; }
.text ol {
  list-style: decimal;
  margin: 0 0 1em 1.5em; }
  .text ol ol {
    margin-bottom: 0; }

/*------------------------------------*\
    $COMPONENTS
\*------------------------------------*/
/* Icon Font */
@font-face {
  font-family: 'icons';
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'icons';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-twitter:before, .icon-stumbleupon:before, .icon-pinterest:before, .icon-linkedin:before, .icon-google-plus:before, .icon-search:before, .icon-play:before, .icon-menu:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-bubble:before, .icon-facebook:before, .icon-feed:before, .icon-youtube:before, .icon-tag:before, .icon-tumblr:before, .icon-instagram, .icon-podcast, .icon-apple, .icon-android, .icon-arrow:after, .icon-envelope:before {
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.icon-twitter:before {
  content: "\74"; }

.icon-stumbleupon:before {
  content: "\75"; }

.icon-pinterest:before {
  content: "\70"; }

.icon-linkedin:before {
  content: "\69"; }

.icon-google-plus:before {
  content: "\67"; }

.icon-search:before {
  content: "\73"; }

.icon-play:before {
  content: "\61"; }

.icon-menu:before {
  content: "\21"; }

.icon-arrow-left:before {
  content: "\23"; }

.icon-arrow-right:before {
  content: "\24"; }

.icon-bubble:before {
  content: "\25"; }

.icon-facebook:before {
  content: "\66"; }

.icon-feed:before {
  content: "\27"; }

.icon-youtube:before {
  content: "\79"; }

.icon-tag:before {
  content: "\28"; }

.icon-tumblr:before {
  content: "\6d"; }

.icon-instagram:before {
  content: "\22"; }

.icon-podcast:before {
  content: "\26"; }

.icon-android:before {
  content: "\29"; }

.icon-apple:before {
  content: "\2a"; }

.icon-envelope:before {
  content: "\2b"; }

.icon-arrow:after {
  content: "\61";
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

.icon-play:before {
  font-size: 0.7rem;
  padding-left: 0.2em; }

.icon-play-box {
  display: block;
  margin-left: 2em; }

.icon-play-box:before {
  padding: 0.25em;
  background: gray;
  color: white;
  margin-left: -1.7rem;
  margin-right: 0.5em; }

/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/
.btn {
  display: inline-block;
  background: #333333;
  color: white;
  line-height: 1;
  font-weight: bold;
  padding: 1em;
  border: 0;
  text-align: center; }
  .btn:hover, .btn:focus {
    background: gray;
    color: white; }
  .btn.disabled {
    background: #eeeeee;
    color: gray; }

.btn-small {
  padding: 0.5em; }

.btn-large {
  padding: 0.5em;
  text-transform: uppercase;
  background: gray;
  font-size: 1.4rem;
  font-weight: normal; }

.text-btn {
  font-style: italic; }

/* Generic Placeholder Brick: REMOVE FOR PRODUCTION */
.brick {
  background: #dcdddc;
  padding: 2em;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #eeeeee; }

/* Block */
.block {
  overflow: hidden; }
  .block p:last-child {
    margin-bottom: 0; }

.headline {
  line-height: 1.2; }

/* Hero Block */
.block-hero {
  margin-bottom: 0.5em; }
  .block-hero .b-thumb img {
    display: block; }
  @media all and (min-width: 50em) {
    .block-hero {
      position: relative; }
      .block-hero .b-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 1.5em; } }

/* Block Thumbnail with Headline */
.block-thumb {
  display: table;
  width: 100%;
  border-collapse: collapse; }
  .block-thumb .b-inner {
    display: table-row;
    vertical-align: top;
    overflow: hidden; }
  @media all and (min-width: 29.75em) {
    .block-thumb .b-thumb {
      display: table-cell;
      vertical-align: top;
      width: 30%;
      max-width: 10em; }
      .block-thumb .b-thumb img {
        display: block;
        width: 100%;
        height: auto; } }
  @media all and (min-width: 29.75em) {
    .block-thumb .b-text {
      display: table-cell;
      width: 70%;
      padding: 0 1em; } }

/* Block Headline Summary */
.block-headline-summary a {
  display: block;
  padding: 0.5em; }

/* Block Inset */
.block-inset {
  position: relative; }
  .block-inset .b-thumb {
    position: relative;
    z-index: 0; }
    .block-inset .b-thumb img {
      display: block; }

/* Hero Block */
.block-inset {
  margin-bottom: 0.5em;
  position: relative; }
  .block-inset .headline {
    font-size: 1.1em; }
  .block-inset .b-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 0.5em; }

/* Block Thumb with Summary */
.block-thumb-summary .b-thumb {
  float: left;
  width: 50%; }
.block-thumb-summary .b-text {
  margin-left: 50%;
  padding: 0.5em; }

.inline-list li {
  display: inline-block; }

/* Social List */
.social-list li {
  margin: 0 0.4rem 1em 0; }
.social-list a {
  font-size: 1.6em; }

/* Headline List */
.headline-list {
  margin-bottom: 1em; }
  .headline-list.flush {
    margin: 0; }
  .headline-list h4 {
    font-weight: normal; }
  .headline-list li {
    padding: 0.25em 0;
    border-top: 1px solid #dddddd; }

/* Post List */
.post-list li {
  margin-bottom: 1em; }

/* Bullet List */
.bullet-list {
  list-style: square;
  margin: 0 0 1em 1.2em;
  line-height: 1.3; }
  .bullet-list li {
    margin-bottom: 1em; }

/* Text List */
.text-list {
  margin: 0 0 1em;
  line-height: 1.3; }
  .text-list li {
    margin-bottom: 1em; }

.tooltip-container {
  display: inline-block;
  position: relative; }
  .tooltip-container:hover .tooltip {
    display: block; }

.tooltip-link {
  background: #f9f9f9; }

.tooltip {
  display: none;
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 18em;
  padding: 1em;
  background: white;
  border: 1px solid gray;
  box-shadow: 0.3em 0.3em 1em 0 rgba(0, 0, 0, 0.2); }
  .tooltip h2 {
    margin-top: 0; }
  @media all and (min-width: 24em) {
    .tooltip {
      width: 22em; } }
  @media all and (min-width: 29.75em) {
    .tooltip {
      width: 27em; } }
  @media all and (min-width: 39.8em) {
    .tooltip {
      width: 30em; } }

.accordion {
  margin-bottom: 1em; }

.acc-handle {
  background: #131313;
  color: white;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-weight: bold;
  display: block;
  position: relative;
  padding: 0.5em;
  border-bottom: 1px solid #dddddd; }
  .acc-handle:after {
    content: "+";
    float: right; }
  .acc-handle:hover {
    color: white;
    background: #333333; }
  .acc-handle.active {
    background: #333333; }
    .acc-handle.active:after {
      content: "-"; }

.tabs {
  overflow: hidden; }
  .tabs ul {
    display: table;
    width: 100%; }
  .tabs li {
    display: table-cell;
    text-align: center;
    border-right: 1px solid #dddddd; }
    .tabs li:last-child {
      border-right: 0; }
  .tabs a {
    display: block;
    padding: 0.5em;
    background: gray; }
    .tabs a:hover, .tabs a:focus {
      background: #dddddd; }
    .tabs a.active {
      background: #333333;
      color: white; }

.section {
  margin: 0 0 1em; }

.section-title {
  margin-bottom: 0.5em; }

.article-header h1 {
  font-size: 2.5em; }

.byline {
  font-size: 0.875em;
  font-style: italic;
  margin-bottom: 0.5em; }

.social-share {
  overflow: hidden;
  margin-bottom: 1em; }
  .social-share li {
    float: left;
    margin-right: 0.5em; }
  .social-share a {
    background: #333333;
    color: white;
    display: block;
    padding: 0.5em; }
    .social-share a:hover {
      background: gray; }

.comments li {
  margin-bottom: 1em; }

.comment-container {
  overflow: hidden;
  margin-bottom: 1em;
  list-style: none; }

.comment-meta {
  float: left;
  width: 6.5em; }
  .comment-meta img {
    display: block;
    border: 1px solid #eeeeee;
    margin-bottom: 0.5em; }

.comment-name {
  font-size: 0.75em; }

.comment-text {
  margin-left: 9em; }

/*------------------------------------*\
    $MESSAGING
\*------------------------------------*/
.alert {
  text-align: center;
  padding: 1em;
  margin-bottom: 0.5em;
  border: 1px solid gray;
  background: #f9f9f9; }

.alert-error {
  color: red;
  border-color: red;
  background: #ffbebe; }