/* TERM CLOUD */

.term-cloud {
    line-height: 26px; width: 80%; font-size: 12px; text-align: center; margin: 10px auto; clear: both;
}

.term-cloud li {
    display: inline-block; margin: 0 10px;
}

.term-tabs {
    width: 100%; clear: both; height: 41px; margin-top: 20px;
}

.term-tab {
    width: 20%; float: left;
}

.term-tab h2 {
    height: 20px; margin: 0 2px; border: 1px #cccccc; border-style: solid solid none; padding: 10px; font-weight: bold; text-align: center;
    font-size: 15px; background: #f8f8f8; color: #0000c0; border-radius: 8px 8px 0 0; overflow: hidden; line-height: 1.1em;
}

@media screen and (max-width: 720px) {
    .term-tab h2 {
        font-size: 12px;
    }
}

.term-tab.active h2 {
    color: #000000; background: #ffffff; font-weight: bold;
}

.term-contents {
    background: #ffffff; border: 1px solid #cccccc; padding: 10px;
}

.term-filter {
    margin: 5px; font-size: 16px; font-weight: bold; color: #666666;
}

.letter {
    display: inline-block;
}

.term-filter.active, .letter.active {
    color: #0000C0;
}

.term-contents-empty {
    text-align: center; font-size: 18px; font-style: italic; color: #999999;
}

.terms {
    width: 100%;
}

.term {
    float: left; width: 290px; margin: 5px; border: 1px solid #e0e0e0; padding: 5px; height: 60px; overflow: hidden;
}

html[dir=rtl] {
    float: right;
}

.term-image-wrap {
    float: left; width: 48px; height: 60px; margin-right: 5px;
}

.term h3 {
    font-size: 13px; font-weight: bold;
}

.term img {
    display: block; margin: 0 auto; max-width: 48px; max-height: 60px;
}

.term p {
    font-size: 11px; line-height: 1.1em;
}
