/* 
    Document   : mobile.css
    Created on : 17-okt-2013, 10:45:09
    Author     : B.v.d.Brink
    Description: Responsive Layout styling
*/

/**
 * Table of Contents:
 *
 *  20.0 - Responsive layout
 *     20.1 - iPhone portrait (320 x 480)
 *     20.2 - iPhone landscape (480 x 320)
 *     20.3 - iPad portrait (768 x 1024)
 *     20.4 - iPad landscape (1024 x 768)
 *     20.5 - Desktop (1200px and wider)
 *     20.6 - Smallest mobile devices or very small resized desktop
 *
 * ----------------------------------------------------------------------------
 */


/**
 * 20.0 Responsive layout
 * ----------------------------------------------------------------------------
 */

/**
 * 20.1 iPhone portrait (320 x 480)
 * ----------------------------------------------------------------------------
 */

@media (min-width: 320px) {
    /* Header & Footer */
    .jea-header-profile {
        float: left;
        clear: both;
    }

    .jea-header-profile-name {
        float: right;
    }

    .jea-header-profile-icon {
        float: left;
    }

    
    /* Dashboard */
    .jea-dashboard {
        padding-top: 150px;
    }
    
    .jea-dashboard .jea-container {
        max-width: 320px;
        width: 100%;
    }
    
    .modal-dialog {
/*        padding-top: 30px;*/
    }
    
    /* Forms */
    .form-horizontal .form-group {
        margin-bottom: 15px;
        min-height: 45px;
    }    
    
    .form-horizontal .control-label {
        margin-bottom: 4px;
    }
}


/**
 * 20.2 iPhone landscape (480 x 320)
 * ----------------------------------------------------------------------------
 */

@media (min-width: 480px) {
    /* Header & Footer */
    
    /* Dashboard */
    .jea-dashboard .jea-container {
        max-width: 480px;
    }
}


/**
 * 20.3 iPad portrait (768 x 1024)
 * ----------------------------------------------------------------------------
 */

@media (min-width: 768px) {
    /* Header & Footer */
    .jea-header-profile {
        float: right;
        clear: none;
    }
    
    .jea-header-profile-name {
        float: left;
    }

    .jea-header-profile-icon {
        float: right;
    }
    
    /* Dashboard */
    .jea-dashboard {
        padding-top: 125px;
    }
    
    .jea-dashboard .jea-container {
        max-width: 640px;
    }
    
    .modal-dialog {
/*        padding-top: 150px;*/
        width: 650px;
    }
}


/**
 * 20.4 iPad landscape (1024 x 768)
 * ----------------------------------------------------------------------------
 */

@media (min-width: 960px) {
    /* Dashboard */
    .jea-dashboard .jea-container {
        max-width: 960px;
    }
    
    .dashboard-imagetile {
        display: block;
    }
    
    /* Forms */
    .form-horizontal .form-group {
        margin-bottom: 5px;
        min-height: 24px;
    }    
}


/**
 * 20.5 Desktop (1200px and wider)
 * ----------------------------------------------------------------------------
 */

@media (min-width: 1200px) {
    /* 
    .container {
        max-width: 100%;
    }
    */
}


/**
 * 20.6 Smallest mobile devices or very small resized desktop 
 * ----------------------------------------------------------------------------
 */

@media (max-width: 319px) {
    body {
        padding: 0px;
    }
    
    /* Header & Footer */
    .jea-header-profile {
        float: left;
        clear: both;
    }
    
    /* Dashboard */
    .jea-dashboard {
        padding-top: 150px;
    }
    
    .jea-dashboard .jea-container {
        width: 100%;
    }
    
    .jea-tile-container, .jea-tile-container.jea-cols-1, .jea-tile-container.jea-cols-2 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .jea-page-nav {
        display: none;
    }
    
    .jea-page-content, .jea-page-nav + .jea-page-content {
        left: 10px;
    }
    
    .jea-page .jea-content-fixed {
        top: 180px;
    }    
}