/* CSS for cover list widget */

.cover-list {
    display: block;
    position: relative;
    height: 300px;
}
.cover-list .cover-loading {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: transparent url("img/loading.gif") 50% 50% no-repeat;
}
.cover-list a {
    color: transparent;
}
.cover-list .cover-bar {
    padding: 0 40px;
    left: 120px;
    right: 120px;
    bottom: 15px;
    position: absolute;
    height: 30px;
    background: transparent url("img/black_mask.png") 0 0 repeat;
    border: 1px solid #888;
    border-radius: 4px;
}
.cover-list .cover-previous,
.cover-list .cover-next {
    top: 2px;
    bottom: 2px;
    position: absolute;
    width: 26px;
    background: #fff;
    border: 1px solid #888;
    border-radius: 4px;
}
.cover-list .cover-previous {
    left: 2px;
}
.cover-list .cover-next {
    right: 2px;
}
.cover-list .cover-previous-icon,
.cover-list .cover-next-icon {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}
.cover-list .cover-previous-icon {
    background: transparent url("img/previous.png") 50% 50% no-repeat;
}
.cover-list .cover-next-icon {
    background: transparent url("img/next.png") 50% 50% no-repeat;
}
.cover-list .cover-slider {
    display: block;
    height: 100%;
    position: relative;
}
.cover-list .cover-slider .ui-slider-handle {
    margin-left: -7px;
    top: 2px;
    bottom: 2px;
    position: absolute;
    width: 12px;
    display: block;
    background: #fff;
    border: 1px solid #888;
    border-radius: 4px;
}
.cover-list .cover-box {
    top: 0;
    position: absolute;
    width: 240px;
    cursor: pointer;
}
.cover-list .cover-box-content {
    display: block;
    position: relative;
    text-align: center;
    overflow: hidden;
    background: transparent url("img/black_mask.png") 0 0 repeat;
    border: 3px solid #888;
}
.cover-list .cover-box-content img {
    display: inline;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
.cover-list .cover-box-content div {
    padding: 4px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    color: #fff;
    text-align: center;
    display: block;
    background: transparent url("img/black_mask.png") 0 0 repeat;
    word-break: break-all;
}