/*
 * Copyright: LEARNTUBE! GbR
 * Author: Kallol Chakraborty <kchakraborty@learntube.de>
 */
.wrapper{display: block;}
.popup_wrapper{width:960px; display: block; position: relative;}
.lms3storyslider{
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    /*display: none;*/
}
.slide-title{
    background: transparent url(../Images/gray.gif) no-repeat center center;
    float: left;
    margin: 10px 5px 20px 0;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #000;
    font-size: 14px;
}
.slide-title:hover{
    background: transparent url(../Images/rot.gif) no-repeat center center;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.active-slide {
    background: transparent url(../Images/rot.gif) no-repeat center center;
    color: #fff;
    cursor: pointer;
}
.active{
    display: block;
}
.ssbtw {
    display: block;
    overflow: hidden;
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}
.ss_overlay {
    width: 450px;
    position: absolute;
    z-index: 999;
    margin-top: 20px;
    left: 25%;
}
.ss_content {
    display: none;
    position: relative;
    z-index: 0;
    padding: 15px;
    height: auto;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
.ss_content ul, .ss_content ol{
    padding: 5px;
}
.ss_content ul li{
    margin: 5px;
    list-style-type: disc;
}
.ss_content ol li{
    margin: 5px;
    list-style-type: decimal;
}
.ss_close {
    display: none;
    width: 25px;
    height: 25px;
    background: black;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 99999;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    border-radius: 50px
}
.ss_video, .ss_image{
    padding-bottom: 10px;
}
.ico_audio {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/audio.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_document {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/document.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_photo {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/photo.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_info {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/info.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_music {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/music.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_text {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/text.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.ico_video {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Images/video.png) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.icon_orange_document {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Icons/icon-orange-document.svg) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.icon_purple_document {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Icons/icon-purple-document.svg) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.icon_red_document {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: transparent url(../Icons/icon-red-document.svg) no-repeat center center;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.inner img {
    display: block;
}
.nav-left, .nav-right, .nav-end, .nav-previous, .nav-next{
    cursor: pointer;
}
.nav-right{
    margin: 0 0 0 50px;
}
.nav-end{
    margin: -8px 0 0 50px;
}
.nav-previous{
    float:left;
    /*margin-top: -345px;
    margin-left:15px;
    position: relative;*/
    z-index: 10;
    display: none;
}
.nav-next{
    float:right;
    /*margin-top: -345px;
    margin-right:15px;
    position: relative;*/
    z-index: 10;
}
.selected{
    border: 2px dashed #d7d8d9;
    padding: 20px 1px;
}
.nav-controls{
    font-weight: bold;
    padding: 15px 0 0 0;
    width: auto;
    margin: 0 auto;
    text-align: center;
}
.nav-controls img{
    display: inline-block;
}
.ttip{
    opacity: 1 !important;
    display: none;
    width: 250px;
    background: #fff;
    padding: 10px;
    color: #000;
    z-index: 9999;
    position: absolute;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 35px 0px #616161; /* WebKit */
    -moz-box-shadow: 5px 5px 35px 0px #616161; /* Firefox */
    box-shadow: 5px 5px 35px 0 #616161; /* Standard */
}
.ttipsmall{
    opacity: 1;
    display: none;
    width: auto;
    min-width: 150px;
    background: #fff;
    padding: 10px;
    color: #000;
    z-index: 9999;
    position: absolute;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 35px 0px #616161; /* WebKit */
    -moz-box-shadow: 5px 5px 35px 0px #616161; /* Firefox */
    box-shadow: 5px 5px 35px 0 #616161; /* Standard */
}
.ss_btn:hover .ttip{
    display: block;
}
.ss_btn:hover .ss_btn{
    opacity: 1 !important;
}
.ss_btn:hover .ttipsmall{
    display: block;
}
.info{
    clear: both;
    margin: 20px 0 0 0;
    font-weight: normal;
    display: block;
}
/*mediaqueries*/
@media only screen and (max-width: 800px){
    .popup_wrapper{width: 800px;}
    .ss_overlay{margin-left: -130px;margin-right: 130px;}
}
@media only screen and (max-width: 660px){
    .popup_wrapper{width: 660px;}
    .ss_overlay{margin-left: -130px;margin-right: 130px;}
}