/* =======================================================
 * Document:    Typography Stylesheet
 * Version:     1.0
 * Created:     August 21, 2014, 3:47AM (EDT))
 * Author:      Brian Szatkowski
 * Purpose:     These styles establish the site-wide font styles and handle
 *              sizing at various screen resolutions
 * Prereqs:     Must follow all other CSS files
 * =======================================================
 */

/* @START - Typography CSS */

html {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px !important;
}
body {
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px !important;
}
h1, .h1 {
    font-size: 2.43em !important; /* 34pt based on 14px base */
}
h2, .h2 {
    font-size: 2.14em !important; /* 30pt based on 14px base */
}
h3, .h3 {
    font-size: 1.71em !important; /* 24pt based on 14px base */
}
h4, .h4 {
    font-size: 1.29em !important; /* 18pt based on 14px base */
}
h5, .h5 {
    font-size: 1.0em !important; /* 14pt based on 14px base */
}
h6, .h6 {
    font-size: 0.86em !important; /* 12pt based on 14px base */
}

.container {
    padding-left: 1.07em;
    padding-right: 1.07em;
}

#sidemenu li{
    font-size: 1.4em;
}

.well {
    padding: 1.36em !important;
}

#slideout,
#collapsedMenuArea,
.footer-content {
    font-size: 14px !important; /* To ensure these elements' text does not reduce with rest of site */
}

/*
 *  Cutoff for tablet-sized resolutions (below 1025px)
 */
@media (min-width: 993px) {

    .manfBanner, .cmsPage, .cmsPage h5, .categoryBanner {
        font-size: 16px !important;
    }
}

/*
 *  Cutoff for tablet-sized resolutions (below 993px)
 */
@media (max-width: 992px) {

    html, body {
        font-size: 14px !important;
    }    
    
    .manfBanner, .cmsPage, .cmsPage h5, .categoryBanner {
        font-size: 15px !important;
    }
    
    .well {
        padding: 0.85em !important;
    }
    
    .container {
        padding-left: 0.86em;
        padding-right: 0.86em;
    }
}

/*
 *  Cutoff for tablet-sized resolutions (below 769px)
 */
@media (max-width: 768px){
    
    html, body {
        font-size: 13px !important;
    }    
    
    .manfBanner, .cmsPage, .cmsPage h5, .categoryBanner {
        font-size: 14px !important;
    }
    
    .well {
        padding: 0.64em !important;
    }
    
    .container {
        padding-left: 0.64em;
        padding-right: 0.64em;
    }
}

/*
 *  Cutoff for tablet-sized resolutions (below 481px)
 */
@media (max-width: 480px){

    html, body {
        font-size: 11px !important;
    }    
    
    .manfBanner, .cmsPage, .cmsPage h5, .categoryBanner {
        font-size: 13px !important;
    }
    
    .well {
        padding: 0.42em !important;
    }
    
    .container {
        padding-left: 0.43em;
        padding-right: 0.43em;
    }
}

/*
 *  Cutoff for tablet-sized resolutions (below 361px)
 */
@media (max-width: 360px){
    
    html, body {
        font-size: 10px !important;
    }
    
    .manfBanner, .cmsPage, .cmsPage h5, .categoryBanner {
        font-size: 12px !important;
    }
    
    .well {
        padding: 0.21em !important;
    }
    
    .container {
        padding-left: 0.21em;
        padding-right: 0.21em;
    }
}

/* @END - Typography CSS */