/**
 * Reset
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
em {
    font-style: italic;
}
strong {
    font-weight: 700;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**
 * Main
 */
body {
    -webkit-print-color-adjust: exact;
    padding: 10px;
    font-family: 'Merriweather', serif;
}
body.output {
    padding: 0;
}


/**
 * Typography
 */
p, ul, ol {
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.3;
}

code {
    font-family: monospace;
}


/**
 * Table w/o <table> element
 */
.table {
    display: table;
}

.table .thead {
    display: table-header-group;
}

.table .tbody {
    display: table-row-group;
}

.table .thead > .tr,
.table .tbody > .tr {
    display: table-row;
}

.table .thead > .tr > .th,
.table .tbody > .tr > .td {
    display: table-cell;
}


/**
 * Students table
 */
table.students,
.table.students {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Table head/body
 */
table.students thead > tr > th,
table.students tbody > tr > td,
.table.students .head > .tr > .th,
.table.students .tbody > .tr > .td {
    vertical-align: middle;
}

table.students thead > tr > th.pay-schedule,
table.students tbody > tr > td.pay-schedule,
table.students thead > tr > th.pay-complete,
table.students tbody > tr > td.pay-complete,
table.students thead > tr > th.attended,
table.students tbody > tr > td.attended,
.table.students .thead > .tr > .th.pay-schedule,
.table.students .tbody > .tr > .td.pay-schedule,
.table.students .thead > .tr > .th.pay-complete,
.table.students .tbody > .tr > .td.pay-complete,
.table.students .thead > .tr > .th.attended,
.table.students .tbody > .tr > .td.attended {
    text-align: center;
}

/*
 * Table head
 */
table.students thead tr,
.table.students .thead .tr {
    background-color: #000;
}

table.students thead > tr > th,
.table.students .thead > .tr > .th {
    padding: 10px 20px;
    font-family: 'Merriweather', serif;
    font-size: 11pt;
    text-align: left;
    color: #fff;
}

/*
 * Table body
 */
table.students tbody > tr:nth-child(odd),
.table.students .tbody > .tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.students tbody > tr:nth-child(even),
.table.students .tbody > .tr:nth-child(even) {
    background-color: #fff;
}

table.students tbody > tr:hover,
.table.students .tbody > .tr:hover {
    background-color: #f4a259;
}

.table.students .tbody > .tr.success {
    background-color: #90c5a3;
}
.table.students .tbody > .tr.error {
    background-color: #c59090;
}

table.students tbody > tr > td,
.table.students .tbody > .tr > .td {
    padding: 19px 20px;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 12pt;
}

table.students tbody > tr > td.count,
.table.students tbody > .tr > .td.count {
    border-right: 1px solid #000;
}

table.students.output tbody > tr > td.name,
.table.students.output .tbody > .tr > .td.name {
    width: 170px;
}

table.students.output tbody > tr > td.email,
.table.students.output .tbody > .tr > .td.email {
    width: 250px;
}

table.students.output tbody > tr > td.notes,
.table.students.output .tbody > .tr > .td.notes {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width: 490px;
}

table.students tbody > tr > td.pay-complete,
.table.students .tbody > .tr > .td.pay-complete {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding-top: 0;
    padding-bottom: 0;
}

table.students tbody > tr > td.pay-complete,
table.students tbody > tr > td.attended,
.table.students .tbody > .tr > .td.pay-complete,
.table.students .tbody > .tr > .td.attended {
    width: 50px;
}

table.students tbody > tr > td.pay-complete .check,
table.students tbody > tr > td.attended .check,
.table.students .tbody > .tr > .td.pay-complete .check,
.table.students .tbody > .tr > .td.attended .check {
    display: block;
    width: 15px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

table.students tbody > tr:last-child > td {
    border-bottom: 1px solid #000;
}

table.students tbody > tr > td.pay-schedule,
table.students tbody > tr > td.joining-course,
table.students tbody > tr > td.submit,
.table.students .tbody > .tr > .td.pay-schedule,
.table.students .tbody > .tr > .td.joining-course,
.table.students .tbody > .tr > .td.submit {
    border-left: 1px solid #000;
}