TDataView_ui/styles/cascade/responsive.css

/*!
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 *               CASCADE FRAMEWORK 1.0
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 *
 * Copyright 2013, John Slegers
 * Released under the MIT license
 * http://jslegers.github.com/cascadeframework/license.html
 *
 *
 * This means you can use Cascade Framework for any project,
 * whether commercial or not.
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 * 
 * Cascade Framework also contains the following goodies,
 * which all have the same or similar 'permissive licenses :
 *
 *
 * Includes polyfills by Joshua Bell
 * http://www.calormen.com/polyfill/
 * Released in public domain
 *
 *
 * Includes Google ExplorerCanvas
 * https://code.google.com/p/explorercanvas/
 * Released under the Apache 2.0 license
 *
 *
 * Includes Google Prettify
 * https://code.google.com/p/google-code-prettify/
 * Released under the Apache 2.0 license
 *
 *
 * Includes Yepnope
 * http://yepnopejs.com/
 * Released under the WTFPL license
 *
 *
 * Includes Modernizr
 * http://modernizr.com/
 * Released under the MIT license
 *
 *
 * Includes lodash
 * http://lodash.com/
 * Released under the MIT license
 *
 *
 * Includes jQuery
 * http://jquery.com/
 * Released under the MIT license
 *
 *
 * Includes jQuery Easing plugin
 * http://gsgd.co.uk/sandbox/jquery/easing/
 * Released under the BSD license
 *
 *
 * Includes jQuery Flot plugin
 * http://www.flotcharts.org/
 * Released under the MIT license
 *
 *
 * Includes the Font Awesome webfont
 * http://fortawesome.github.com/Font-Awesome/
 * Released under the SIL Open Font License
 *
 *
 *
 *
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 * Cascade Framework was inspired by many articles and projects
 * 
 * Especially these authors are worth mentioning :
 *             
 *             Nicolle Sullivan
 *             Jonathan Snook
 *             Chris Coyier
 *             Eric Meyer
 *             Nicolas Gallagher
 *             Paul Irish
 *             Mark Otto
 *             Jacob Thornton
 *
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * Date: 2013-03-15
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
*/

@media (min-width:1200px) {
    .site-center {
        width:1160px;
    }
    .cell{
        margin:15px;
    }
}

@media (min-width:768px) and (max-width:979px) {
    .site-center {
        width:704px;
    }
}

@media (max-width:767px) {
    .parsley-error-list {
        position: static;
        display: block !important;
        margin-left:3px;
    }

    main,section,article,header,footer,aside,nav,.col,
    main.width-fit,main.width-fill,
    section.width-fit,section.width-fill,
    article.width-fit,article.width-fill,
    header.width-fit,header.width-fill,
    footer.width-fit,footer.width-fill,
    aside.width-fit,aside.width-fill,
    nav.width-fit,nav.width-fill,
    .col.width-fit,.col.width-fill {
        padding:0 !important;
        display:block !important;
        float:left !important;
        width:100% !important;
    }

    .site-center,.site-body,.site-header,.site-footer,.site-center > .body {
        margin:0 !important;
        width:100% !important;
        border:none !important;
        -webkit-box-shadow:none !important;
        -moz-box-shadow:none !important;
        box-shadow:none !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    .center {
        float:none !important;
    }
}


/* =============================================================================
   width-fit and width-fill support for mobile
   ========================================================================== */

@media (max-width: 767px) {
    main.mobile-width-fill,
    section.mobile-width-fill,
    article.mobile-width-fill,
    header.mobile-width-fill,
    footer.mobile-width-fill,
    aside.mobile-width-fill,
    nav.mobile-width-fill,
    .col.mobile-width-fill {display:table-cell !important;float:none!important;min-width:50px!important;width:10000px!important;}
    main.mobile-width-fit,
    section.mobile-width-fit,
    article.mobile-width-fit,
    header.mobile-width-fit,
    footer.mobile-width-fit,
    aside.mobile-width-fit,
    nav.mobile-width-fit,
    .col.mobile-width-fit {width:auto!important;}

    .mobile-center {
        float:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    main.mobile-width-fill,
    section.tablet-width-fill,
    article.tablet-width-fill,
    header.tablet-width-fill,
    footer.tablet-width-fill,
    aside.tablet-width-fill,
    nav.tablet-width-fill,
    .col.tablet-width-fill {display:table-cell !important;float:none!important;min-width:50px!important;width:10000px!important;}
    main.mobile-width-fill,
    section.tablet-width-fit,
    article.tablet-width-fit,
    header.tablet-width-fit,
    footer.tablet-width-fit,
    aside.tablet-width-fit,
    nav.tablet-width-fit,
    .col.tablet-width-fit {width:auto!important;}

    .tablet-center {
        float:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

@media (max-width: 480px) {
    main.phone-width-fill,
    section.phone-width-fill,
    article.phone-width-fill,
    header.phone-width-fill,
    footer.phone-width-fill,
    aside.phone-width-fill,
    nav.phone-width-fill,
    .col.phone-width-fill {display:table-cell !important;float:none!important;min-width:50px!important;width:10000px!important;}
    main.phone-width-fit,
    section.phone-width-fit,
    article.phone-width-fit,
    header.phone-width-fit,
    footer.phone-width-fit,
    aside.phone-width-fit,
    nav.phone-width-fit,
    .col.phone-width-fit {width:auto!important;}

    .phone-center {
        float:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}