body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
}

#intro {
    font-size: 13px;
}

.note {
    font-size: 10px;
}

#index {
    padding-top: 13px;
    font-size: 13px;
}

.short-text {
    display: none;
}

/* table css */
table.minimalistBlack {
    border: 2px solid #000000;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    table.minimalistBlack td, table.minimalistBlack th {
        border: 1px solid #000000;
        padding: 5px 4px;
    }

    table.minimalistBlack tbody td {
        font-size: 13px;
    }

    table.minimalistBlack thead {
        background: #CFCFCF;
        background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
        border-bottom: 2px solid #000000;
    }

        table.minimalistBlack thead th {
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            text-align: left;
        }

    table.minimalistBlack tfoot td {
        font-size: 14px;
    }

    table.minimalistBlack th.korean {
        width: 20%;
    }

    table.minimalistBlack th.romanization {
        width: 20%;
    }

    table.minimalistBlack th.meaning {
        width: 40%;
    }

    table.minimalistBlack th.audio {
        width: 20%;
    }
/* end table css*/

/* div table css*/

div.minimalistBlack {
    border: 2px solid #000000;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.divTable.minimalistBlack .divTableCell, .divTable.minimalistBlack .divTableHead {
    border: 1px solid #000000;
    padding: 5px 4px;
}

.divTable.minimalistBlack .divTableBody .divTableCell {
    font-size: 13px;
}

.divTable.minimalistBlack .divTableHeading {
    background: #CFCFCF;
    background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
    border-bottom: 2px solid #000000;
}

    .divTable.minimalistBlack .divTableHeading .divTableHead {
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        text-align: left;
    }

.minimalistBlack .tableFootStyle {
    font-size: 14px;
}
/* DivTable.com */
.divTable {
    display: table;
}

.divTableRow {
    display: table-row;
}

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

.divTableCell, .divTableHead {
    display: table-cell;
}

    .divTableHead.korean {
        width: 20%;
    }

    .divTableHead.romanization {
        width: 20%;
    }

    .divTableHead.meaning {
        width: 40%;
    }

    .divTableHead.audio {
        width: 20%;
    }

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

.divTableFoot {
    display: table-footer-group;
}

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

/* end div table css*/

.playbutton {
    box-shadow: inset 0px 1px 0px 0px #97c4fe;
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
    border-radius: 6px;
    border: 1px solid #337fed;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #1570cd;
}

    .playbutton:hover {
        background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
        background-color: #1e62d0;
    }

    .playbutton:active {
        position: relative;
        top: 1px;
    }


@media (max-width: 480px) {
    .short-text {
        display: inline-block;
    }

    .full-text {
        display: none;
    }
}