/* 
    Document   : no-more-tables
    Created on : 28/02/2012, 11:01:54 AM
    Author     : Simon Elvery
    Description:
        Demonstration of the responsive tables method described at by Chris Coyier
		at http://css-tricks.com/responsive-data-tables/
*/


@media only screen and (max-width: 1470px), (min-device-width: 768px) and (max-device-width: 1170px) 

{

    /* Force table to not be like tables anymore */
    #no-more-tables table:not(.not-mobile), .mobile-inline-table table:not(.not-mobile),
    #no-more-tables thead:not(.not-mobile), .mobile-inline-table thead:not(.not-mobile),
    #no-more-tables tbody:not(.not-mobile), .mobile-inline-table tbody:not(.not-mobile),
    #no-more-tables th:not(.not-mobile), .mobile-inline-table th:not(.not-mobile),
    #no-more-tables td:not(.not-mobile), .mobile-inline-table td:not(.not-mobile),
    #no-more-tables tr:not(.not-mobile), .mobile-inline-table tr:not(.not-mobile) {
        display: block !important;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr:not(.not-mobile), .mobile-inline-table thead tr:not(.not-mobile){
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
            display: none;
        }

    #no-more-tables tr:not(.not-mobile), .mobile-inline-table tr:not(.not-mobile) {
        border: 1px solid #ccc !important;
    }

    #no-more-tables td.inline-action-hidden:not(.not-mobile), .mobile-inline-table td.inline-action-hidden:not(.not-mobile) {
        display: none !important;
    }

    #no-more-tables td:not(.not-mobile), .mobile-inline-table td:not(.not-mobile) {
        /* Behave  like a "row" */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        padding-left: 50% !important;
        white-space: normal !important;
        text-align: left !important;
        word-wrap: break-word !important;
        height: auto !important;
        min-height: 35px !important;
    }

        #no-more-tables td.inner-table-container:not(.not-mobile), .mobile-inline-table td.inner-table-container:not(.not-mobile) {
            padding-left: 10px !important;
            padding-bottom: 0 !important;
        }

    .inner-table-container .mobile-inline-table:not(.not-mobile) {
        margin-bottom: 8px;
    }

        .inner-table-container .mobile-inline-table tr:not(.not-mobile) {
            margin-bottom: 5px;
        }

    #no-more-tables td:not(.not-mobile):before, .mobile-inline-table td:not(.not-mobile):before {
        /* Now like a table header */
        position: absolute !important;
        /* Top/left values mimic padding */
        top: 6px !important;
        left: 6px !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-weight: bold !important;
    }



    /*
	Label the data
	*/
    #no-more-tables td:not(.not-mobile):before, .mobile-inline-table td:not(.not-mobile):before{
        content: attr(data-title) !important;
    }

    #no-more-tables td:not(.not-mobile), .mobile-inline-table td:not(.not-mobile) {
        /*word-wrap: break-word;*/
    }

    .enable-mobile-tab .tab-pane:before {
        content: attr(data-title) !important;
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .summary-table tr:not(.not-mobile) {
        display: inline-block !important;
        width: 100%;
    }

    .summary-table td:not(.not-mobile) {
        word-wrap: break-word !important;
        display: block !important;
        vertical-align: top !important;
    }

    .summary-table td:not(.not-mobile) *{
        display: inline-block !important;
    }
    
    .td-actions :not(.not-mobile){
        width: auto !important;
    }

    .pagination :not(.not-mobile) {
        float: left !important;
    }

    .drill-down:not(.collapse) {
        display: table;
    }
    .td-last_updated_on, td-created_on, .td-next_run_time, .td-run_at_every, .td-last_ran_at {
        width: 100% !important;
    }

    .td-actions {
        width: 100% !important;
    }
    .td-is_active {
        width: 100% !important;
    }
}

.summary-table td:not(.not-mobile) {
    vertical-align: top !important;
}

.summary-table td:not(.not-mobile):nth-child(2n+1) {
    font-weight: bold;
    content: ":" !important;
}


.summary-table tr:not(.not-mobile):first-child td{
    border-top: none;
}