/**
 *
 * CSS file to handle buttons with big image tile in them
 *
 * This file is written by Yaya MNH48 and licensed under MIT
 *
 */

.image-button {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.image-button li a {
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 10px 10px 0 0;
    border-radius: 10px;
    background: #716;
    box-shadow: 4px 4px 4px #000;
}

.image-button li a:hover span {
    background: #572b6f;
}

.image-button li a span {
    display: block;
    margin: 0;
    padding: 5px 10px 5px 10px;
    background: #716;
    border-radius: 0 0 10px 10px;
    font-size: 100%;
    color: #fbe;
}

.image-button li a img {
    display: block;
    width: 164px;
    height: 164px;
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
}

.image-button .more {
    float: right;
}

.image-button .more a {
    border-radius: 0;
    border-width: 105px 0 105px 64px;
    padding: 0;
}

.image-button .more a:hover {
    background: none;
    border-color: transparent transparent transparent #faadfa;
}

.image-button li {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Override for Jawi Malay */
.image-button:lang(ms-Arab) li a {
    box-shadow: -4px 4px 4px #000;
}

/* Override for Beringin Malay */
.image-button:lang(ms-Brgn) li a {
    margin: 0 10px 10px 0;
    box-shadow: -4px 4px 4px #000;
}

.image-button:lang(ms-Brgn) li a span {
    padding: 10px 5px 10px 5px;
    background: #716;
    border-radius: 10px 0 0 10px;
    font-size: 100%;
    color: #fbe;
}

.image-button:lang(ms-Brgn) li a img {
    border-radius: 0 10px 10px 0;
}

.image-button:lang(ms-Brgn) .more a {
    border-radius: 0;
    border-width: 64px 105px 0 105px;
    padding: 0;
}