Cacher is the code snippet organizer for pro developers

/*Positioning*/
/*Box model*/
/*Typographic*/
/*Visual*/

body {
    /* visual */
    background: rgb(242,244,245);
}

/* -------------------------------------------------- */
/* Page Containers | Layout
/* -------------------------------------------------- */

aside.sidebar,
div.main-content {
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
}

aside.sidebar {
    width: 200px;
    background-color: rgb(60,74,85);
}

div.main-content {
    left: 200px;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.container {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* -------------------------------------------------- */
/* Sidebar
/* -------------------------------------------------- */
.pure-menu-heading {
    color: rgb(255,255,255);
    font-weight: 600;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.pure-menu-link {
    font-weight: 600;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
    background-color: rgb(54,66,75);
}

.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
    color: rgb(255,255,255);
    background-color: rgb(34,48,58);
}

/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */

.header {
    position: relative;
    display: block;
    height: 40px;
    width: 100%;
    padding: 10px;
    background: rgb(187, 44, 49);
}

.header-container {
    display: block;
    margin: 0 auto;
    box-sizing: content-box;
}

.header-logo {
    float: left;
    overflow: hidden;
    width: 295px !important;
    height: 40px !important;
    -webkit-background-size: 295px 40px !important;
    background-size: 295px 40px !important;
    background: url('../../../pageEdits/public/img/logos/redwave_grocery_for_dark_backgrounds.svg') no-repeat;
}

/* -------------------------------------------------- */
/* Section.main
/* -------------------------------------------------- */

.panel {
    padding: 20px;
    margin-top: 20px;
    background-color: rgb(255,255,255);
}

/* -------------------------------------------------- */
/* Section > Spreadsheet | Table Properties
/* -------------------------------------------------- */

.grid-body {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.grid-row {
    /* box model */
    display: table-row;
    width: 100%;
    height: 30px;
    /* visual */
    border-bottom: 1px solid #dfe4e9;
}

.grid-cell {
    display: table-cell;
    padding: 0 .5em;
    vertical-align: middle;
}

/* -------------------------------------------------- */
/* Section > Spreadsheet | Headers
/* -------------------------------------------------- */

.grid-cell.header {
    /* box model */
    height: 2.25em;
    /* visual */
    border-right: 1px solid #dfe4e9;
    /* typographic */
    color: #0099bb;
    line-height: 2.125em;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

/* -------------------------------------------------- */
/* Section > Spreadsheet | Containers
/* -------------------------------------------------- */

.grid-cell.checkbox {
    width: 26px;
}

.grid-cell.date {
    display: table-cell;
    width: 7.125em;
    white-space: nowrap;
}

.grid-cell.payee {
}

.grid-cell.category {
    width: 100%;
}

.grid-cell.memo {
}

.grid-cell.inflow {
    width: 10%;
}

.grid-cell.outfow {
    width: 10%;
}

/**
test
*/

/*

*/

/* -------------------------------------------------- */
/* Section > Spreadsheet > Table
/* -------------------------------------------------- */
/* - sets styles for the spreadsheet table
/* - https://www.w3.org/TR/CSS2/tables.html#width-layout
/* -------------------------------------------------- */
table.spreadsheet-table {
    display: table;
    width: 100%;
    table-layout: fixed; /* horizontal layout of the table depends on table width (as opposed to cell contents) */
    border-collapse: collapse;
    text-align: left;
    cursor: pointer;
    background-color: rgb(255,255,255);
}

/* ------------------------------ */
/* Table > Head + Body
/* ------------------------------ */
table.spreadsheet-table thead tr,
table.spreadsheet-table tbody tr {
    border-bottom: 1px solid #dfe4e9;
}

table.spreadsheet-table thead tr th,
table.spreadsheet-table tbody tr td {
    /* box model */
    padding-left: 0.5em;
    padding-right: 0.5em;

    /* visual */
    white-space: nowrap; /* prevents <td> content from increasing the <tr> height to accommodate the content that does not fit */
    overflow: hidden; /* prevents <td> width from increasing as it tries to accommodate content */
    text-overflow: ellipsis; /* text that overflows the width of the <td> is hidden */
}

/* ------------------------------ */
/* Table > Head
/* ------------------------------ */
table.spreadsheet-table thead {}

/* ------------------------------ */
/* Table > Head > Rows
/* ------------------------------ */
table.spreadsheet-table thead tr {}
table.spreadsheet-table thead tr th {
    height: 40px;
    border-right: 1px solid #dfe4e9;

    /* typographic */
    color: #0099bb;
    line-height: 2em;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

table.spreadsheet-table thead tr th:last-child {
    border-right: none;
}

/* ------------------------------ */
/* Table > Head > Columns
/* ------------------------------ */
table.spreadsheet-table thead tr th.identifier { width: 10% }
table.spreadsheet-table thead tr th.category { width: 25% }
table.spreadsheet-table thead tr th.page-name { width: 45% }
table.spreadsheet-table thead tr th.options { width: 20% }

/* ------------------------------ */
/* Table > Body
/* ------------------------------ */
table.spreadsheet-table tbody {}

/* ------------------------------ */
/* Table > Body > Rows
/* ------------------------------ */
table.spreadsheet-table tbody tr {
    height: 40px;
}
table.spreadsheet-table tbody tr:hover {
    background: rgba(0, 89, 111, 0.05);
}
table.spreadsheet-table tbody tr.active {
    color: rgb(255, 255, 255);
    background: rgb(0, 89, 111);
}

/* ------------------------------ */
/* Table > Body > Cells
/* ------------------------------ */
table.spreadsheet-table tbody tr td {
    line-height: 2em;
    font-size: 0.8em;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

/* ------------------------------ */
/* Design Plugins
/* ------------------------------ */

.box-shadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.box-shadow-1dp {
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
                0px 1px 1px 0px rgba(0, 0, 0, 0.14),
                0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.box-shadow-2dp {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}