/* ######################## */
/*       TYPOGRAPHY         */
/* ######################## */

/* Mobile Styles */
@media only screen and (max-width: 600px) {

    body {
        font: 16px/1.5 "Lato",sans-serif;
        color: #000;
        line-height: 24px;
    }

    h1 {
        color: #000;
        font-size: 1.4em;
        font-weight: 700;
        line-height: 35px;
        margin: 0 0 1.2em 0;
    }

    h2 {
        color: #000;
        font-size: 1.4em;
        font-weight: 400;
        margin: 0 0 1em 0;
    }

    h3 {
        color: #64A70B;
        font-size: 1.2em;
        font-weight: 400;
        margin: 0 0 .9em 0;
    }

    h4 {
        color: #000;
        font-size: 1.2em;
        font-weight: 400;
        margin: 0 0 .8em 0;
    }

    p, address, ul {
        margin-bottom: 1.5em
    }

    ul, ol {
        margin-left: 20px
    }

    li {
        text-indent: 0;
    }
}

/* Desktop and Tablet Styles */
@media only screen and (min-width: 601px) {

    body {
        font: 13px 'Lato',sans-serif;
        color: #000;
        line-height: 20px
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: 400
    }

    h1 {
        color: #666;
        font-size: 1.5em;
        font-weight: 700;
        margin: 0 0 20px
    }

    h2 {
        color: #666;
        font-size: 1.4em;
        font-weight: 700;
        margin: 0 0 16px
    }

    h3 {
        color: #666;
        font-size: 1.3em;
        font-weight: 700;
        margin: 0 0 13px
    }

    #maincol h3 {
        color: #64A70B;
        font-size: 1.3em;
        font-weight: 700;
        margin: 0 0 13px
    }

    h4 {
        color: #666;
        font-size: 1.2em;
        font-weight: 400;
        margin: 0 0 10px
    }

    em, strong {
        font-style: normal;
        font-weight: 400
    }

    p, ul {
        margin: 0 0 14px
    }

    ul, ol {
        margin-left: 10px
    }

    ol, ul, li {
        list-style: none
    }
}

.smaller {
    font-size: .8em
}

a {
    color: #ff760e;
    font-weight: 700;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

a img {
    border: 0
}

.underline {
    border-bottom: 1px solid #444
}

blockquote {
    margin: 1em 0 .4em;
    line-height: 1.2em;
    font-size: 1.1em;
    padding: 10px 0 0 40px;
    background: url(../../images/quote_up.png) no-repeat 0 0
}

blockquote p {
    padding: 0 40px 0 0;
    background: url(../../images/quote_down.png) no-repeat bottom right
}

cite {
    font-size: .9em;
    margin-left: 15px
}

.strikethrough {
    text-decoration: line-through
}

table th {
    text-align: left
}

.inline {
    display: inline;
    margin-right: 20px;
    text-decoration: underline
}

.watermarked {
    color: #aaa
}

a.grey {
    color: #444
}

td.slim {
    line-height: 1.1em
}

span.feedback {
    color: Green
}

span.feedback span {
    color: Red
}

.small_line_height {
    line-height: 1.3em
}

.big_validation {
    font-size: 24px
}

.medium_validation {
    font-size: 16px
}

.watermark {
    background-color: #faf
}

.watermarked {
    color: Gray
}

.watermarked_special {
    color: Red
}

.radbtn input {
    margin-right: 5px
}

.highlight {
    background-color: #fefbd2
}

/* CMS image helper classes */
@media only screen and (max-width: 600px) {
    img.cms {
        width: 100%;
    }
}

@media only screen and (min-width: 601px) and (max-width: 960px) {
    img.cms {
        width: 75%;
    }
}

@media only screen and (min-width: 961px) {
    img.cms {
        width: 50%;
    }
}