/*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

*/


/*
.responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;
    background: #FFF;
    color: #024457;
    border-radius: 10px;
    border: 1px solid #167F92;
    font-size: .75em;
}
.responstable tr {
    border: 1px solid #D9E4E6;
}

.responstable tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.responstable tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

.responstable tr:last-child th:first-child {
    border-bottom-left-radius: 10px;
}

.responstable tr:last-child th:last-child {
    border-bottom-right-radius: 10px;
}

.responstable tr:nth-child(odd) {
    background-color: #EAF3F3;
}
.responstable th {
    display: none;
    border: 1px solid #FFF;
    background-color: #167F92;
    color: #FFF;
    padding: .5em;
    font-size: 1em;
}
.responstable th.group {
    background-color: #0d6575;
}
.responstable th:first-child {
    display: table-cell;
    text-align: center;
}
.responstable th:nth-child(2) {
    display: table-cell;
}
.responstable th:nth-child(2) span {
    display: none;
}
.responstable th:nth-child(2):after {
    content: attr(data-th);
}
@media (min-width: 480px) {
    .responstable th:nth-child(2) span {
        display: block;
    }
    .responstable th:nth-child(2):after {
        display: none;
    }
}
.responstable td {
    display: block;
    word-wrap: break-word;
    max-width: 7em;
}
.responstable td:first-child {
    display: table-cell;
    text-align: center;
    border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
    .responstable td {
        border: 1px solid #D9E4E6;
    }
}
.responstable th, .responstable td {
    text-align: left;
    margin: .25em .5em;
}
@media (min-width: 480px) {
    .responstable th, .responstable td {
        display: table-cell;
        padding: .5em;
    }
}

body {
    padding: 0 1em;
    font-family: roboto, sans-serif;
    color: #024457;
    background: #f2f2f2;
}

h1 {
    font-family: Verdana;
    font-weight: normal;
    color: #024457;
}
h1 span {
    color: #167F92;
}

td.ident {
    border: none;
    width: 5px;
    background-color: white;
}
*/