/* TABLE
----------------------------------------------------------*/

table.custom {
    border: 1px solid #F58220;
    border-collapse: collapse;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    overflow: scroll;
}

    table.custom tr {
        vertical-align: middle;
        height: auto;
    }

        /* Zebra striping */
        table.custom tr:nth-of-type(odd) {
            background: #eee;
        }

    table.custom th {
        /*padding: 6px 5px;*/
        padding: .5em;
        text-align: center;
        background-color: #666666;
        border: solid 1px #e8eef4;
        color: #F58220;
    }

    table.custom td {
        padding: .5em;
        border: solid 1px #e8eef4;
    }


/*http://elvery.net/demo/responsive-tables/
No More Tables*/

/*view-source:http://css-tricks.com/examples/ResponsiveTables/responsive.php
Ver este outro
*/


/*eXEMPLO DAQUI: http://elvery.net/demo/responsive-tables/#no-more-tables*/
@media only screen and (max-width: 800px) {

    /* Force table to not be like tables anymore */
    table.custom,
    table.custom thead,
    table.custom tbody,
    table.custom th,
    table.custom td,
    table.custom tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        table.custom thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.custom tr {
            border: 1px solid #ccc;
        }

        table.custom td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
            white-space: normal;
            text-align: left;
            left: 0px;
        }

            table.custom td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: .1em;
                width: 35%;
                padding-right: .2em;
                white-space: nowrap;
                font-weight: bold;
            }

            /* Label the data */
            table.custom td:before {
                content: attr(data-title);
            }
}

/* Estilos para coluna de tabelas
----------------------------------------------------------*/
.column-extra-small {
    width: 3em;
}

.column-small, .column-date {
    width: 10em;
}

.column-medium, .column-email {
    width: 15em;
}

.column-large {
    width: 26em;
}

.column-number, .column-decimal {
    min-width: 4em;
    width: auto;
    text-align: right;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 800px) {
    .column-extra-small {
        width: auto;
    }

    .column-small, .column-date {
        width: auto;
    }

    .column-decimal {
        width: auto;
        text-align: left;
    }
}