/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box; 
    margin-left: 4%;}
.column:first-child,
.columns:first-child {
    margin-left: 0; }
.mini.column {width:37px;}
.one.column,
.one.columns                    { width: 4.66666666667%; }
.two.columns                    { width: 13.3333333333%; }
.three.columns                  { width: 22%;            }
.four.columns                   { width: 30.6666666667%; }
.five.columns                   { width: 39.3333333333%; }
.six.columns                    { width: 48%;            }
.seven.columns                  { width: 56.6666666667%; }
.eight.columns                  { width: 98%; }
.nine.columns                   { width: 74.0%;          }
.ten.columns                    { width: 82.6666666667%; }
.eleven.columns                 { width: 91.3333333333%; }
.twelve.columns                 { width: 100%; margin-left: 0; }

.one-third.column               { width: 30.6666666667%; }
.two-thirds.column              { width: 65.3333333333%; }

.one-half.column                { width: 48%; }
.offset-by-one.column,
.offset-by-one.columns          { margin-left: 4%; }
.offset-by-two.column,
.offset-by-two.columns          { margin-left: 1%; }
.offset-by-three.column,
.offset-by-three.columns        { margin-left: 13%; }
.offset-by-four.column,
.offset-by-four.columns         { margin-left: 17%; }
.offset-by-five.column,
.offset-by-five.columns         { margin-left: 20%; }
.offset-by-six.column,
.offset-by-six.columns          { margin-left: 26%; }
.offset-by-seven.column,
.offset-by-seven.columns        { margin-left: 30%; }
.offset-by-eight.column,
.offset-by-eight.columns        { margin-left: 35%; }
.offset-by-nine.column,
.offset-by-nine.columns         { margin-left: 40%;}
.offset-by-ten.column,
.offset-by-ten.columns          { margin-left: 42%; }
.offset-by-eleven.column,
.offset-by-eleven.columns       { margin-left: 45%; }

.offset-by-one-third.column,
.offset-by-one-third.columns    { margin-left: 18; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns   { margin-left: 35%; }

.offset-by-one-half.column,
.offset-by-one-half.columns     { margin-left: 26%; }

/* For devices larger than 400px */
@media (min-width: 400px) {
    .containerS {
        width: 85%;
        padding: 0; }

    @media (min-width: 550px) {
        .containerS {
            width: 100%; }
    }


    @media (min-width: 1820px) {
        .containerS {
            width: 100%; }
        .column,
        .columns {
            margin-left: 4%; }
        .column:first-child,
            .columns:first-child {
            margin-left: 0; }
        .mini.column {width:37px;}
        .one.column,
        .one.columns                    { width: 4.66666666667%; }
        .two.columns                    { width: 13.3333333333%; }
        .three.columns                  { width: 22%;            }
        .four.columns                   { width: 30.6666666667%; }
        .five.columns                   { width: 39.3333333333%; }
        .six.columns                    { width: 48%;            }
        .seven.columns                  { width: 56.6666666667%; }
        .eight.columns                  { width: 65.3333333333%; }
        .nine.columns                   { width: 74.0%;          }
        .ten.columns                    { width: 82.6666666667%; }
        .eleven.columns                 { width: 91.3333333333%; }
        .twelve.columns                 { width: 100%; margin-left: 0; }

        .one-third.column               { width: 30.6666666667%; }
        .two-thirds.column              { width: 65.3333333333%; }

        .one-half.column                { width: 48%; }

        /* Offsets */
        .offset-by-one.column,
        .offset-by-one.columns          { margin-left: 8.66666666667%; }
        .offset-by-two.column,
        .offset-by-two.columns          { margin-left: 17.3333333333%; }
        .offset-by-three.column,
        .offset-by-three.columns        { margin-left: 26%;            }
        .offset-by-four.column,
        .offset-by-four.columns         { margin-left: 34.6666666667%; }
        .offset-by-five.column,
        .offset-by-five.columns         { margin-left: 43.3333333333%; }
        .offset-by-six.column,
        .offset-by-six.columns          { margin-left: 52%;            }
        .offset-by-seven.column,
        .offset-by-seven.columns        { margin-left: 60.6666666667%; }
        .offset-by-eight.column,
        .offset-by-eight.columns        { margin-left: 69.3333333333%; }
        .offset-by-nine.column,
        .offset-by-nine.columns         { margin-left: 78.0%;          }
        .offset-by-ten.column,
        .offset-by-ten.columns          { margin-left: 86.6666666667%; }
        .offset-by-eleven.column,
        .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

        .offset-by-one-third.column,
        .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
        .offset-by-two-thirds.column,
        .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

        .offset-by-one-half.column,
        .offset-by-one-half.columns     { margin-left: 52%; }

    }


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


    /* Typography
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 2rem;
        font-weight: 300; }
    h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
    h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
    h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
    h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
    h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
    h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

    /* Larger than phablet */
    @media (min-width: 550px) {
        h1 { font-size: 5.0rem; }
        h2 { font-size: 4.2rem; }
        h3 { font-size: 3.6rem; }
        h4 { font-size: 3.0rem; }
        h5 { font-size: 2.4rem; }
        h6 { font-size: 1.5rem; }
    }

    p {
        margin-top: 0; }


    /* Links
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    a {
        color: #1EAEDB; }
    a:hover {
        color: #0FA0CE; }


    /* Lists
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    ul {
        list-style: circle inside; }
    ol {
        list-style: decimal inside; }
    ol, ul {
        padding-left: 0;
        margin-top: 0; }
    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin: 1.5rem 0 1.5rem 3rem;
        font-size: 90%; }
    li {
        margin-bottom: 1rem; }


    /* Code
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    code {
        padding: .2rem .5rem;
        margin: 0 .2rem;
        font-size: 90%;
        white-space: nowrap;
        background: #F1F1F1;
        border: 1px solid #E1E1E1;
        border-radius: 4px; }
    pre > code {
        display: block;
        padding: 1rem 1.5rem;
        white-space: pre; }


    /* Tables
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    th,
    td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #E1E1E1; }
    th:first-child,
    td:first-child {
        padding-left: 0; }
    th:last-child,
    td:last-child {
        padding-right: 0; }


    /* Spacing
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    button,
    .button {
        margin-bottom: 1rem; }
    input,
    textarea,
    select,
    fieldset {
        margin-bottom: 1.5rem; }
    pre,
    blockquote,
    dl,
    figure,
    table,
    p,
    ul,
    ol,
    form { }


    /* Utilities
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .u-full-width {
        width: 100%;
        box-sizing: border-box; }
    .u-max-full-width {
        max-width: 100%;
        box-sizing: border-box; }
    .u-pull-right {
        float: right; }
    .u-pull-left {
        float: left; }


    /* Misc
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    hr {
        margin-top: 3rem;
        margin-bottom: 3.5rem;
        border-width: 0;
        border-top: 1px solid #E1E1E1; }


    /* Clearing
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

    /* Self Clearing Goodness */
    .container:after,
    .row:after,
    .u-cf {
        content: "";
        display: table;
        clear: both; }


    /* Media Queries
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    /*
    Note: The best way to structure the use of media queries is to create the queries
    near the relevant code. For example, if you wanted to change the styles for buttons
    on small devices, paste the mobile query code up in the buttons section and style it
    there.
    */


    /* Larger than mobile */
    @media (min-width: 400px) {}

    /* Larger than phablet (also point when grid becomes active) */
    @media (min-width: 550px) {}

    /* Larger than tablet */
    @media (min-width: 750px) {}

    /* Larger than desktop */
    @media (min-width: 1000px) {}

    /* Larger than Desktop HD */
    @media (min-width: 1200px) {}