@charset "utf-8";

/* CSS Document */

.voice_item_table_base {
    display: block;
    margin: 8px 32px;
    padding: 2px;

    border: solid 2px;
    border-radius: 8px;
    border-color: #185fb5;
    background: #185fb5;
}
.voice_item_table_base .voice_item_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.voice_item_table_base .voice_item_table td,
.voice_item_table_base .voice_item_table th {
    position: relative;
    padding: 8px;
    border: solid 1px;
    border-color: #185fb5;
}
.voice_item_table_base .voice_item_table th {
    color: #fff;
    background: #499bea;
    background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #499bea), color-stop(100%, #207ce5));
    background: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -o-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -ms-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#499bea', endColorstr='#207ce5', GradientType=0);
}

.voice_item_table_base .voice_item_table .even
/*.voice_item_table tr:nth-child(even)*/
{
    background-color: #f0f9ff;
}

.voice_item_table_base .voice_item_table .odd
/*.voice_item_table tr:nth-child(odd)*/
{
    background-color: #fff;
}
.voice_item_table_base .voice_item_table .name {
    width: 60%;
}
.voice_item_table_base .voice_item_table .sample {
    text-align: center;
}
.voice_item_button {
    -webkit-appearance:none;
    position: relative;
    height: 32px;
    padding: 4px 8px 4px 4px;
    
    border-radius: 4px;
    border: solid 1px #0a3b86;
    
    font-size: 12px;
    color: #fff;
    
    box-shadow: inset 0 1px 1px #e7f0ff;
    
    background: #499bea;
    background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #499bea), color-stop(100%, #207ce5));
    background: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -o-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -ms-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#499bea', endColorstr='#207ce5', GradientType=0);
}
.voice_item_button[class*='hover'] {
    cursor: pointer;

    background: #207ce5;
    background: -moz-linear-gradient(bottom, #499bea 0%, #207ce5 100%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #499bea), color-stop(100%, #207ce5));
    background: -webkit-linear-gradient(bottom, #499bea 0%, #207ce5 100%);
    background: -o-linear-gradient(bottom, #499bea 0%, #207ce5 100%);
    background: -ms-linear-gradient(bottom, #499bea 0%, #207ce5 100%);
    background: linear-gradient(to top, #499bea 0%, #207ce5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#207ce5', endColorstr='#499bea', GradientType=0);
}
.voice_item_button[disabled='disabled'] {
    color: #fff;
    background: #ccc;
    border-color: #666;
}
.voice_item_button .icon_speaker {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin: 4px;
    
    background: url('images/icon_voice.png') no-repeat center center;
}
.voice_item_button .wait_counter {
    display: none;
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    
    width: 16px;
    height: 16px;
    background: url('images/wait.gif') no-repeat center center;
    background-size: contain;
}

/**
 * new
 **/
.voice_item_table .newSpan {
    vertical-align: middle;
    display: inline-block;
    margin-left: 16px;
    width: 32px;
    height: 32px;
    background-image: url(images/new.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.voice_item_table .newDiv {
    position: absolute;
    top: 8px;
    left: -26px;
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(images/new.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-resolution: 192dpi),
    (-webkit-min-device-pixel-ratio: 2)
{
    .voice_item_table_base .voice_item_table {
        font-size: 30px;
    }
    .voice_item_table_base .voice_item_table .name {
        width: 50%;
    }
    .voice_item_table .newDiv {
        top: 8px;
        left: -40px;
        width: 48px;
        height: 48px;
    }
    .voice_item_table .newSpan {
        width: 48px;
        height: 48px;
    }
    .voice_item_button {
        font-size: 20px;
        height: 48px;
    }
    .voice_item_button .wait_counter {
        width: 20px;
        height: 20px;
    }
}