Calendar CSS formatter

@*------------------ Wrap the calendar in a class---------------
<div class="brcalendar">
    @BRT.Calendar(DetailPage:"event")
</div>
*@

@*------------------ then put in this CSS ----------------------*@

@media (max-width: whateversize) {
    /* Force table to not be like tables anymore */
     .brcalendar table, .brcalendar thead, .brcalendar tbody, .brcalendar th, .brcalendar td, .brcalendar tr {
         display: block;
    }
    /* Hide table headers (but not display: none;
    , for accessibility) */
     .brcalendar thead tr {
         position: absolute;
         top: -9999px;
         left: -9999px;
         display:none;
    }
    /*tr {
         border: 1px solid #ccc;
    }
    */
     .brcalendar td {
        /* Behave like a "row" */
         border: none;
         border-bottom: 1px solid #ccc;
         position: relative;
        /*padding-left: 50%;
         */
         height:auto;
    }
     .brcalendar td:before {
        /* Now like a table header */
         position: absolute;
        /* Top/left values mimic padding */
         top: 6px;
         left: 6px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
    }
     .cal-header, table.cal > tr, .cal-day-unused {
         display:none !important;
    }
     .cal td {
         overflow:visible !important;
    }
     td.cal-day, td.cal-day-weekend {
         height:auto !important;
         font-size:1rem !important;
    }
}