/*
 *  Styles for the Roles Viewer
 */

#wazoku-roles-viewer-wrapper {
    width: 100%;
    z-index: 0;
    margin: 2.5% auto;
    max-width: 1024px;
    display: block;
    overflow: auto;
}

#wazoku-roles-viewer-wrapper tr {
    height: 75px;
    cursor: pointer;
}

#wazoku-roles-viewer-wrapper td {
    vertical-align: middle;
}

#wazoku-roles-viewer-wrapper td a {
    text-decoration: none;
    color: #676767;
    outline: none;
}

#wazoku-roles-viewer-wrapper td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#wazoku-roles-viewer-wrapper td:nth-child(2) {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#wazoku-roles-image-container {
    position: relative;
    height: 225px;
}

.wazoku-roles-image {
    border-radius: 10px;
    margin: 0 auto;
    opacity: 0;
    display: none;
}

/* Title in roles wrappers */
.wazoku-role-title {
    font-size: 1em;
    word-wrap: break-word;
    width: 90%;
}

.wazoku-role-icon {
    width: 75%;
    height: auto;
}

.wazoku-roles-redirect {
    position: absolute;
    background: #ffffff;
    text-align: center;
    font-size: 0.9em;
    width: 80%;
    margin-left: 5%;
    padding: 8px 5px;
    border-radius: 10px;
    border: solid 1px #3d9c94;
    color: #3d9c94;
    z-index: 1;
    cursor: pointer;
    bottom: 10%;
}

.wazoku-roles-redirect:hover {
    text-decoration: none;
    color: #3d9c94;
}

.wazoku-role-active {
    color: #3d9c94;
    background: rgba(61, 156, 148, 0.1);
}

#wazoku-roles-data-left td:nth-child(even) {
    width: 30%;
    height: auto;
}

#wazoku-roles-data-right td:nth-child(odd) {
    width: 30%;
    height: auto;
}

/* --- Media Queries --- */
@media only screen
and (max-width: 992px) {
    #wazoku-roles-viewer-wrapper {
        width: 100%;
    }

    #wazoku-roles-image-container {
        display: none;
    }
}

/* IE8 */

.ie8 #wazoku-roles-data-left .wazoku-role-wrapper td.data,
.ie8 #wazoku-roles-data-right .wazoku-role-wrapper td.data  {
    width: 66% !important;
}