* {
    box-sizing: border-box
}
body {
    font-family: Calibri, Tahoma, sans-serif;
    font-weight: 100;
    margin: 0;
    padding: 0;
}
h1 {
    font-family: Cambria. serif;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: capitalize;
}
h1 i {
    padding-right: 1rem;
}

#left {
    background: rgb(54, 67, 71);
    height: 100%;
    position: fixed;
    width: 20%;
    padding: 1em;
}
#left * {
    color: rgb(255, 255, 255) !important;
}
#left a {
    text-decoration: underline;
}
#main {
    width: 80%;
    margin-left: 20%;
}
#main-table {
    width: 100%;
    padding: 1em;
    display: table;
    border-collapse: collapse;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
    width: 33%;
    text-align: center;
    padding: 30px 0;
    border: 1px solid #333;
    font-size: 1.5em;
    font-weight: 500;
    vertical-align: top;
}
.td:hover {
    box-shadow: 0 0 4px 4px rgba(0,0,0,.5);
}
.browserSupport {
    margin-top: 40px;
    list-style-type: none;
}
.browserSupport li {
    display: inline-block;
    color: #aaa;
    font-size: 1em !important;
}
li.active {color: #333; }

/* Виды курсоров  */
.auto {cursor: auto}
.default {cursor: default}
.text {cursor: text}
.none {cursor: none}
.pointer {cursor: pointer}
.progress {cursor: progress}
.help {cursor: help}
.cell {cursor: cell}
.crosshair {cursor: crosshair}
.col-resize {cursor: col-resize}
.context-menu {cursor: context-menu}
.copy {cursor: copy}
.alias {cursor: alias}
.all-scroll {cursor: all-scroll}
.move {cursor: move}
.vertical-text {cursor: vertical-text}
.no-drop {cursor: no-drop}
.not-allowed {cursor: not-allowed}
.row-resize {cursor: row-resize}
.e-resize {cursor: e-resize}
.ew-resize {cursor: ew-resize}
.n-resize {cursor: n-resize}
.ne-resize {cursor: ne-resize}
.nesw-resize {cursor: nesw-resize}
.ns-resize {cursor: ns-resize}
.nw-resize {cursor: nw-resize}
.nwse-resize {cursor: nwse-resize}
.s-resize {cursor: s-resize}
.se-resize {cursor: se-resize}
.sw-resize {cursor: sw-resize}
.w-resize {cursor: w-resize}
.wait {cursor: wait}
.grab {cursor: grab; }
.grabbing {cursor: grabbing}
.zoom-in {cursor: zoom-in}
.zoom-out {cursor: zoom-out}
.ico {cursor: url(up_down.ico), ns-resize;}
.png {cursor: url(load.png), progress;}
.two-cursors {cursor:  url(bad.png), url(aero_link.cur), pointer;}

@media screen and (max-width: 930px) {
    #left {position: static; width: 100%;}
    #main {width: 100%; margin-left: 0;}
}@media screen and (max-width: 480px) {
    .td {
        display: block;
        width: 100%;
    }
}