/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.movie-list thead th, .movie-list tbody th .ui-table-cell-label,
.movie-list tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .9em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* Light blue bg, large blue text for rank and title */
.movie-list tbody th {
    font-size: 1.0em;
    background-color: #ccd9ff;
    color: #002080;
    text-align: left;
}
/*  Add a bit of extra left padding for the title */
.movie-list tbody td.title {
    padding-left: .8em;
}
/* Add strokes */
.movie-list thead th {
    border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.movie-list tbody th, .movie-list tbody td {
    border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-right: 1px solid #e6e6e6; /* non-RGBA fallback  */
    border-right: 1px solid rgba(0,0,0,.05);
}


/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 55em) {
    /*  Negate the margin between sections */
    .movie-list tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  pale blue bg, large dark blue text for rank and title */
    .movie-list tbody th, .movie-list tbody td.title {
        display: block;
        font-size: 1.0em;
        line-height: 110%;
        padding: .5em .5em;
        background-color: #ccd9ff;
        color: #002080;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for rank and title */
    .movie-list tbody th .ui-table-cell-label, .movie-list tbody td.title .ui-table-cell-label {
        display: none;
    }
    /*  Position the title next to the rank, pad to the left */
    .movie-list tbody td.title {
        margin-top: -2.1em;
        padding-left: 2.2em;
        border-bottom: 1px solid rgba(0,0,0,.15);        
    }   
    /*  Make the td data normal */
    .movie-list tbody td {
        font-weight: normal;        
    }
     /*  Make the th data bold */
    .movie-list tbody th {
        font-weight: bold;
    }
    /* Make the label elements a percentage width */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        min-width: 20%;
        font-weight: bold;
        color: #14075c;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 55em ) {
    /* Show the table header rows */
    .movie-list td,
    .movie-list th,
    .movie-list tbody th,
    .movie-list tbody td,
    .movie-list thead td,
    .movie-list thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 55em ) {
    .movie-list td,
    .movie-list th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}