.video-list-item {
    /*height: 200px;*/
    border-bottom: 1px solid #ccc;
}

    .video-list-item .inner {
        padding: 10px 0;
        overflow: hidden;
    }

    .video-list-item .left-container {
        float: left;
    }

    .video-list-item .right-container {
        float: left;
        width: 60%;
        margin-left: 20px;
    }

.video-thumbnail-container {
    width: 320px;
    height: 180px;
    position: relative;
}

    .video-thumbnail-container.video-preview-playable:hover {
        cursor: pointer;
    }

    .video-thumbnail-container .video-thumbnail {
        width: 320px;
        height: 180px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .video-thumbnail-container .video-thumbnail-overlay {
        width: 210px;
        height: 110px;
        position: absolute;
        display: none;
        left: 55px;
        top: 35px;
    }

    .video-thumbnail-container.video-preview-playable .video-thumbnail-overlay {
        display: block;
    }

.video-list-item a {
    color: #069;
    font-size: 11px;
}

.video-list-item:hover .inner {
    background-color: #f8fbff;
}

.video-list-item .inner .video-title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;
    line-height: 1;
    color: #049;
}

.video-list-item .inner .video-info {
    margin: 5px 0px 7px 0px;
    color: #093;
}

.video-list-item .inner .video-subject {
    margin: 4px 0;
    font-size: 11px;
    font-family: Arial;
    color: #777;
}

.video-list-item .inner .video-description {
    margin-bottom: 7px;
    color: #222;
    width: 100%;
    line-height: 1.4;
}

.toc-container {
}

.toc-frontmaterial-container {
}

.toc-middlematerial-container {
}

.toc-backmaterial-container {
}

.toc-item {
    overflow: hidden;
    padding: 10px 0;
    font-size: 1em;
    border-bottom: 1px solid #ddd;
}

    .toc-item.toc-section {
        font-size: 1.2em;
    }

        .toc-item.toc-section .toc-col-left {
            width: 100%;
        }

        .toc-item.toc-section .toc-col-center,
        .toc-item.toc-section .toc-col-right {
            display: none;
        }

.toc-col {
    float: left;
}

.toc-col-left {
    width: 66%;
    padding-left: 0;
}

.toc-col-center {
    width: 18%;
    text-align: right;
}

.toc-col-right {
    float: right;
    text-align: right;
}

.toc-col-fullwidth {
    width: 80%;
}

.toc-label {
    display: inline-block;
    margin-right: 10px;
    color: #888;
}

.toc-lesson .toc-col-left {
    width: 66%;
    padding-left: 3%;
}

.toc-lesson .toc-label {
    display: inline-block;
    float: left;
}

    .toc-lesson .toc-label + span {
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        width: 80%;
        display: block;
        float: left;
    }

.play-preview-button {
    display: inline-block;
}

    .play-preview-button a {
        text-align: center;
        display: block;
        cursor: pointer;
        font-family: 'Arial';
        font-size: 10px;
        color: #5c4c30 !important;
        padding: 3px 10px;
        margin: -3px 0;
        border: 1px solid #bab4ab;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #eae9e2;
        background: url('/Images/btn-gray-rnd.png') repeat-x;
        background-image: -webkit-linear-gradient(top, #eae9e2 50%, #c6c3bd 100%);
        background-image: -moz-linear-gradient(top, #eae9e2 50%, #c6c3bd 100%);
        background-image: -ms-linear-gradient(top, #eae9e2 50%, #c6c3bd 100%);
        background-image: -o-linear-gradient(top, #eae9e2 50%, #c6c3bd 100%);
        background-image: linear-gradient(to bottom, #eae9e2 50%, #c6c3bd 100%);
    }

        .play-preview-button a:hover {
            border-color: #9e9991;
            color: #392f1e !important;
        }

.toc-abstract {
    padding-top: 10px;
    color: #666;
}

    .toc-abstract p {
        margin: 0;
    }

.toc-item .play-preview-button {
    display: none;
}

.toc-intro .play-preview-button {
    display: inline-block;
}

.video-price-container.price-container-grid {
    width: 460px;
    margin-right: 20px;
}

.video-price-container.price-container-grid-top {
    margin-bottom: 0px;
}

.video-price-container.price-container-grid .box-container {
    margin: 0px 15px 0px 0px;
    width: 194px;
    display: inline-block;
}

    .video-price-container.price-container-grid .box-container .outer {
        overflow: hidden;
    }

    .video-price-container.price-container-grid .box-container .active {
    }

    .video-price-container.price-container-grid .box-container .outer .inner {
        padding: 0;
    }

        .video-price-container.price-container-grid .box-container .outer .inner .upper {
            display: block;
        }

            .video-price-container.price-container-grid .box-container .outer .inner .upper .price-type-text {
                width: 75px;
                margin: 8px 10px;
                display: block;
            }

            .video-price-container.price-container-grid .box-container .outer .inner .upper .prices {
                display: block;
                margin: 6px 0;
            }

                .video-price-container.price-container-grid .box-container .outer .inner .upper .prices .price-text {
                }

                .video-price-container.price-container-grid .box-container .outer .inner .upper .prices .list-price-label-text {
                }

@media (max-width: 992px) {
    .toc-col-left {
        width: 65%;
    }

    .toc-lesson .toc-col-left {
        width: 65%;
    }

    .toc-col-center {
        width: 15%;
    }

    .toc-col-right {
    }
}

@media (max-width: 992px) AND (min-width: 768px) {
    .toc-lesson .toc-col-left .toc-label,
    .toc-lesson .toc-col-left .toc-label + span {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 540px) {
    .toc-col-left,
    .toc-lesson .toc-col-left {
        width: 75%;
    }

        .toc-lesson .toc-col-left .toc-label,
        .toc-lesson .toc-col-left .toc-label + span {
            display: block;
            width: 100%;
            margin-right: 0;
        }

    .toc-col-center {
        width: 25%;
    }

    .toc-intro .toc-col-right {
        clear: both;
        width: 100%;
        margin-top: 10px;
    }

    .toc-intro .play-preview-button {
        display: block;
    }
    .toc-intro .play-preview-button a {
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
