html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background:#fff;
}
button, input[type="button"], input[type="submit"], .btn{font-family: 'Roboto', Arial, Helvetica, sans-serif;}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.sprite{ background:url(../images/sprite.png) no-repeat; }
.sprite_1{background:url(../images/gloss_set_help.png) no-repeat;}
.left{ float:left;}
.right{ float:right;}
.middle{ overflow:hidden;}
.clear{ clear:both; height:0px; overflow:hidden;}
.headerBar{ background:#000; padding:0px 15px; height: 40px;}
.headerBar > div {
    float: left;
    margin-left: 18px;
}
.help{ background-position:-266px -67px; width:22px; height:25px; }
.settings{ background-position: -228px -126px; width:22px; height:25px; margin-right:-2px;cursor: pointer; margin-top: 7px;}
.glossary {background-position: -184px -175px; height: 25px; margin-right: 3px; width: 22px; cursor: pointer; margin-top: 7px;}
.overview {background-position: -109px -221px; height: 25px; margin-right: 3px; width: 22px; cursor: pointer; margin-top: 7px;}
.icon{ background-color:transparent; border:none; padding:0px;}
.logo{margin: 13px 0;}
.overviewLink2{ display:none; color:#000;}

/* header section starts here */

.header_container{ box-shadow:0px 2px 6px rgba(0,0,0,0.5); -webkit-box-shadow:0px 2px 6px rgba(0,0,0,0.5); -moz-box-shadow:0px 2px 6px rgba(0,0,0,0.5); -ms-box-shadow:0px 2px 6px rgba(0,0,0,0.5); -o-box-shadow:0px 2px 6px rgba(0,0,0,0.5); }
.headerContentBar{ position:relative;
                   background: #fff;

}
.headerBg{ }
.headerMainContent{ position:relative; z-index:10;  padding:5px 0px;}
.toc{ background-position:-20px -119px; width:33px; height:33px; margin-right:15px;}
.userImg{ position:relative; width:36px; height:34px; /*margin-right:10px;*/ overflow:hidden; text-align:center; padding:0 0 0 3px; border-radius:55px; -webkit-border-radius:55px; -moz-border-radius:55px; -ms-border-radius:55px; -o-border-radius:55px; }
.userImg img{ width:100%; border-radius:55px; -webkit-border-radius:55px; -moz-border-radius:55px; -ms-border-radius:55px; -o-border-radius:55px; }
.userMainBg{ position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:10; /*background-position:-218px -63px;*/ background:none !important; }
.userName{    color: #666666;
              font-size: 15px;
              margin-bottom: -5px;
              /*    margin-right: 18px;*/
              max-width: 30%;
              overflow: hidden;
              padding: 8px 0;
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 130px;}
.headinMainText{ font-size:20px; color:#333333; line-height:normal; padding:2px 15px 0 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.headinMainText_1{ font-size:20px; color:#333333; line-height:normal; padding:2px 15px 0 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* header section ends here */

/* body container starts here */
.body_containerInner{ background-color: #e8ecef}
.body_container{ /*overflow:auto;*/}

/* visualise section starts here */
.visualiseSection, .videoPlayerContainer{ background:#fff; border:#e6e6e8 1px solid; border-bottom-color:transparent; box-shadow:0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -ms-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -o-box-shadow:0px 1px 3px rgba(0,0,0,0.5);   border:#aeaeae 1px solid;}
.visualiseHeader{
    border-top:#fff 1px solid;
    border-bottom:#e6e6e8 1px solid;
    background: #f3f3f3;

    padding:2px 1%;
}
.visualiseHeaderWrap { }
.tabListBtn{ font-size:0px; }	
.listenViisualiseBtn{ padding:15px 10px; text-align:center; 
                      background:none; border:#666666 1px solid; cursor:pointer; color:#1f2d39; font-size:16px;
                      text-shadow:0px 1px 0px rgba(256,256,256,0.9);
                      overflow:hidden; text-overflow:ellipsis; display:inline-block; white-space:nowrap; line-height:0px;

                      background: #f3f3f3; margin:0px;
                      border-left:none; border-right:none;
}
.listenViisualiseBtn.first{border-left:#666666 1px solid;}
.listenViisualiseBtn.last{border-right:#666666 1px solid;}

.tabListBtn .listenViisualiseBtn:first-child{ border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; -moz-border-radius:5px 0px 0px 5px; -ms-border-radius:5px 0px 0px 5px; -o-border-radius:5px 0px 0px 5px; }
.tabListBtn .listenViisualiseBtn:last-child{ border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; -moz-border-radius:0px 5px 5px 0px; -ms-border-radius:0px 5px 5px 0px; -o-border-radius:0px 5px 5px 0px; }

.listenViisualiseBtn:first-child{ border-radius:5px 0px 0p 5px; -webkit-border-radius:5px 0px 0p 5px; -moz-border-radius:5px 0px 0p 5px; -ms-border-radius:5px 0px 0p 5px; -o-border-radius:5px 0px 0p 5px;}
.listenViisualiseBtn:active, .listenViisualiseBtn.active{
    color:#fff; text-shadow:0px 1px 0px rgba(29,44,59,0.6);
    background:#666666;


}

.sectionText{ font-size:14px; color:#475e72; text-shadow:0px 1px 0px rgba(256,256,256,0.6); /*padding:8px 10px 0 0px; */text-align:right; font-weight: 800;     margin-left: 10px;
              margin-top: 8px;
              padding: 5px 10px 6px 8px;
              background: none repeat scroll 0 0 #FFFFFF; border-radius: 15px
}

.table_headVisualise{ background:#fff; border-bottom:#d8d8d8 1px solid; color:#111b25; font-size:12px; text-transform:uppercase; text-shadow:0px 1px 0px rgba(256,256,256,0.6); font-family: 'Roboto', Arial, Helvetica, sans-serif; box-shadow:0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -ms-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -o-box-shadow:0px 1px 3px rgba(0,0,0,0.5);}
.table_thVisualise{ padding:10px 5px 10px 15px;}
.table_thVisualise.tblTh1{  width:125px;  border-right:#d8d8d8 1px solid; position:relative;}
.table_thVisualise.tblTh2{ }
.tableTdVisualiseWrap{  line-height:normal; position:relative; margin-top: 3px; overflow: auto;}
/*.tableTdVisualiseWraptab2{max-height: 210px}*/
.tableTdVisualiseWraptab2HeightAuto{max-height: 370px}
.tableTdVisualiseWraptab3{max-height: 140px}
.tableTdVisualise{ font-size:13px; }
.tableTdVisualiseInner{}
.tableTdVisualiseCell{}
.tableTdVisualiseRow{ border-bottom:#e5e5e5 1px solid; /*position:relative; padding:0px 10px 0px 0px;*/  }
.elementListIconContent{ overflow:hidden; padding-top:3px;}
.tableTdVisualise.tblTd1{ background:transparent; color:#666666;    width:125px; left:0px; top:0px;  height:100%; padding:5px 10px 0px 10px; font-size:14px; cursor:pointer; }
.tableTdVisualise.tblTd2{ color:#575656; border-left:3px solid #E5E5E5; float:none; display:block; margin-left:145px; padding:5px 15px; }
.tableTdVisualise.tblTd1.whiteTd{ height:98.8%;   color:#575656;}
.tableTdVisualise.tblTd1.yellowTd{ }
.tableTdVisualise.tblTd1.blueTd{ }
.tableTdVisualise.tblTd1.redTd{ }
.keyElmInner{ width:79%;}
.dropdownArrow{ background-position:-108px -172px; width:25px; height:25px; border:none; background-color:transparent; cursor:pointer; position:absolute; right:5px; top:5px;}
.dropdownArrow.active{background-position:-145px -172px; }
b, strong{ font-weight:700;}
.tableTdVisualiseHead{font-family: 'Roboto', Arial, Helvetica, sans-serif; color:#575656; font-size:13px; font-weight:600;}
.tdBor_top{border-top:#fff 1px solid; height:0px; position:absolute; width:100%; top:0px; left:0px; display:none;}
.tdBor_bottom{border-bottom:#b8b8b8 1px solid; height:0px; position:absolute; width:100%; bottom:0px; left:0px;  display:none;}
.tableTdVisualiseMain table{width:100% }
.middleMainWrap{ /*overflow:auto; max-height: 900px*/}
/* visualise section ends here */



.opactiy .tableTdVisualiseWrap img{-webkit-filter: grayscale(1);
                                   -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
                                   -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
                                   filter: gray; filter: grayscale(100%); }


/*.opactiy  .tableTdVisualiseWrap img{ opacity:0.3;}

.opactiy  .tableTdVisualise.tblTd2{ border-color:#808080;}
*/
.imgDisable{
    -webkit-filter: grayscale(1);
    opacity: 0.5;
    filter: gray
}


.videoPlayerContainer{}
/* audio player starts here */
.playerDescripContainer{ width:20%; /*min-width:100px; max-width:200px;*/  position:relative; /*z-index:10;*/ margin-right:-8px; }
.videoPlayerContainerInner{

    /*border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px;*/
    position:relative; z-index:10; overflow: auto; /*max-height: 200px;*/

}
.PlayerMainLinesCont{


}
.playerDropdownWrap{ height:31px;}	
.playerDropdown{
    cursor:pointer;
    height:25px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2NhZDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffffff 0%, #bccad5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bccad5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#bccad5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#bccad5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#bccad5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#bccad5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bccad5',GradientType=0 ); /* IE6-8 */
    border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px;
    border:#a1adb6 1px solid; margin:3px; max-width:170px; position:relative; font-size:12px;
}	
.dropDownText{ padding:7px; color:#303030; line-height:11px; height:11px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;  }	
.dropDownContList{ position:absolute; top:100%; left:0px; margin-top:3px; background:#fff;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border:#a1adb6 1px solid; width:96%; padding:5px 2%; box-shadow:0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -ms-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -o-box-shadow:0px 1px 3px rgba(0,0,0,0.5); display:none;}
.playerDropdown.active .dropDownContList{ display:none;}
.dropDownContList li{ list-style:none; border-bottom:#f1f1f1 1px solid; padding:5px 5px 6px 5px; display:block; margin:0px -5px 0 -5px;}	
.dropDownContList li:last-child{ border:none;}
.elementListWrap_back{ position:absolute; left:0px; top:0px; /*width:20%;*/ /*min-width:100px; max-width:200px;*/ height:100%; /*border-radius:4px 0px 0px 4px; -moz-border-radius:4px 0px 0px 4px; -webkit-border-radius:4px 0px 0px 4px; -o-border-radius:4px 0px 0px 4px;*/ z-index:0;}
.elementListWrap{ font-size:14px;}
.dropDownArrow{ height:0px; border-left:4px solid transparent; border-bottom:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #3d3d3d; margin:10px;}
.elementList{ border-bottom:#101010 1px solid; border-top:#101010 1px solid; color:#cccccc; padding: 0.48em 0px;}
.elementListWrap .elementList:last-child{ border:none;}
.elementListIcon{ width:24px; height:24px;}
.tableTdVisualiseInner .elementListIcon{  margin:0 5px 0px 0px; }
.elementListIcon.lstIcon1{ background-position:-15px -69px;}
.elementListIcon.lstIcon2{ background-position:-48px -69px;}
.elementListIcon.lstIcon3{ background-position:-78px -69px;}
.elementListIcon.lstIcon4{ background-position:-107px -69px;}
.elementListContent{ padding:3px 5px;}
.timerList_cont{ width:50px; color:#9f9f9f; font-size:11px; position:relative; margin-bottom:10px;}
.timerList_cont:after{ position:absolute; height:6px; width:0px; border-left:#000 1px solid; border-right:#383838 1px solid; top:100%; left:12px; /*right: 0px;*/ margin-top:3px; content:"";}
.timerWrap{ /*padding:0px 10px 0px 0px;*/ border-bottom:#000 1px solid; box-shadow:0px 2px 3px rgba(0,0,0,1); -webkit-box-shadow:0px 2px 3px rgba(0,0,0,1); -moz-box-shadow:0px 2px 3px rgba(0,0,0,1); -o-box-shadow:0px 2px 3px rgba(0,0,0,1); -ms-box-shadow:0px 2px 3px rgba(0,0,0,1);   }
.timerBack{ position:absolute; left:0; top:0; height:33px; width:100%; z-index:1; background:#1f1f1f;}
.timerWrapValue{ margin:0px ;  height: 36px;}
.timerValue{  height:2px;  float:none; background:#fff;}
.timerValue:after {
    background: none repeat scroll 0 0 #FFFFFF;
    content: "";
    height: 2px;
    margin-left: 8px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 60;
}
/*.timerValue:after{width: 20px; background:#fff;}*/
.timerWrapInner{ /*padding:0px 10px 0px 0px;*/ position:relative; z-index:25;}
.timeInnerList{ float:left; /*width:120%;*/ position:relative; z-index:100; padding-top:13px; padding-left:10px; /*padding-right:10px;*/ height: 20px;}
.timerWrapValue .timerWrapInner{ position:relative; /*padding:15px 0 15px 10px;*/ padding:15px 0 15px 0;}
.parentInn_wrapValue{ padding:9px 0;}
.PlayerMainLinesContInner{  position:relative; /*width: 99% !important*/}
button:focus, input[type="button"]:focus, .ui-slider .ui-slider-handle:focus{ outline:none;}
.timerWrapValue.yellow .timerValue{ background-color:#f99e1b; border-color:#f99e1b;}
.timerWrapValue.blue .timerValue{ background-color:#0482c6; border-color:#0482c6;}
.timerWrapValue.red .timerValue{ background-color:#ba242e; border-color:#ba242e;}
.mainInnerWrap{background: #101010; }
.elementListWrap{padding-top:6px; padding-left:10px; }
.videoPlayerContainerInner{}
.playerInnWrap{ /*margin-top:-20px;*/ overflow: auto}
.PlayerMainLinesCont{ position:relative;/*padding-top:20px;*//* width:80%;*/ padding-left:8px; }
.videoPlayerContainer{  position:relative; z-index:0;}
.whiteBackBg{ background:#101010; /*background:#09C;*/ position:absolute; height:100%; width:100%; left:0; top:0; z-index:0;}
.backFillTimer{ background:#070707;/*background:#00f;*/ position:absolute; height:100%; z-index:20; /*margin-left:8px;*/ /*margin-left:16px;*/}
.backFillTimer.progressIncrementer{ width:20%;}
.pointerLine.progressIncrementer{ }
.timerAllWrap{ position:relative; margin-left:0;}
.timerRoundMarker{ position:absolute; background:#fff; border-radius:20px; width:10px; height:10px; border:#000 4px solid; left:0; z-index:50; top:50%; margin-top:-9px; /*margin-left:7px;*/ margin-left:-8px;}

.timerRoundMarker:before{ position:absolute; top:50%; height:2px; margin-top:-1px; background:#fff; z-index:60; content:""; width:100%; margin-left:4px;}
.timerRoundMarker:nth-child(1):after{ display:none;}


.timerRoundMarker:after{ position:absolute; top:50%; height:2px; margin-top:-1px; background:#fff; z-index:60; content:""; width:100%; margin-left:-4px;}
.timerRoundMarker.active{ width:16px; height:16px; border:none;}
.timerRoundMarker.active:before, .timerRoundMarker.active:after{ display:none;}


.timerWrapValue.yellow .timerRoundMarker{ background-color: #F99E1B;}
.timerWrapValue.yellow .timerRoundMarker:before{ background-color: #F99E1B;}
.timerWrapValue.yellow .timerRoundMarker:after{ background-color: #F99E1B;}

.timerWrapValue.blue .timerRoundMarker{ background-color: #0482C6;}
.timerWrapValue.blue .timerRoundMarker:before{ background-color: #0482C6;}
.timerWrapValue.blue .timerRoundMarker:after{ background-color: #0482C6;}

.timerWrapValue.red .timerRoundMarker{ background-color: #BA242E;}
.timerWrapValue.red .timerRoundMarker:before{ background-color: #BA242E;}
.timerWrapValue.red .timerRoundMarker:after{ background-color: #BA242E;}
/* audio player ends here */

.playerControlWrap{
    position:relative; z-index:10;
    border-top: 1px solid #000;
    background: #1f1f1f; 
    padding:5px; 
}
.overviewLink{ color:#333333; font-size:14px; margin:7px 15px;}
.overviewLink:hover{ text-decoration:none;}	
.progressControlWrap{ }	
.progressTimer{ color:#fff; font-size:12px; margin-top:20px; margin-right:10px;}
.backBarProgress{ background:#9e9e9e; height:4px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; margin:25px 10px 4px 10px;  cursor:pointer; width:125px;}
.pointerLine{ position:absolute; width:19px; height:17px; right:-10px; top:0px; background-position:-175px -75px; z-index:30; cursor:pointer;  border:none;}
.pointerLine:before{ height:1000px; left:8px; width:0px; border-left:#e8e8e8 1px solid; border-right:#c4c4c4 1px solid; background:#fff; top:100%; content:""; position:absolute;}
.backBarProgressMain{
    background: #fff; 
    border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; width:50%;
    border:#fff 1px solid; height:2px; position:relative;
}
.playerHandle{ height:25px;  width:25px; position:absolute; right:-11.5px; top:-8px; z-index:10; background-position:-140px -70px; cursor:pointer; border:none;}	

.playerIcon{ width:39px; height:39px; margin:3px; border:none; cursor:pointer; margin-top:6px;}
.playerLeftWrap{ }
.playerIcon.volumn{ background-position:-224px -20px; margin-top:8px;}
.playerIcon.volumn.active{background-position:-261px -20px;}
.playerIcon.visibleAudio{background-position:-259px -115px;margin-right: 9px;}
.playerIcon.visibleAudio.active{background-position:-259px -161px;}
.playerIcon.prevStep{ background-position:-7px -16px;}
.playerIcon.play{ background-position:-48px -13px; width:49px; height:48px; margin-top:0px;}
.playerIcon.play.active{background-position:-14px -207px;}

.playerIcon.nextStep{ background-position:-99px -17px;}
.playerIcon.stop{ background-position:-139px -18px;}
.playerIcon.replay{ background-position:-181px -18px;}
.playerIcon.replay.disable{ background-position:-259px -210px;}
.backHeadFill{ background:#0f0f0f; height:33px; border-bottom:#000 1px solid; box-shadow:0px 2px 3px rgba(0,0,0,1); -webkit-box-shadow:0px 2px 3px rgba(0,0,0,1); -moz-box-shadow:0px 2px 3px rgba(0,0,0,1); -o-box-shadow:0px 2px 3px rgba(0,0,0,1); -ms-box-shadow:0px 2px 3px rgba(0,0,0,1);}
.progressTextBar{  background:#1f1f1f; color:#999999; font-size:16px; border-bottom:#000 1px solid; box-shadow:0px 2px 3px rgba(0,0,0,1); -webkit-box-shadow:0px 2px 3px rgba(0,0,0,1); -moz-box-shadow:0px 2px 3px rgba(0,0,0,1); -o-box-shadow:0px 2px 3px rgba(0,0,0,1); -ms-box-shadow:0px 2px 3px rgba(0,0,0,1); padding:9px 15px; /*margin-right:-30px; margin-top:20px;*/}
.timerList_contInner{ position: relative;
                      left: 5px;}
/*.timerList_contInner:last-child{ text-align: right}*/
.HandleBtnWrap{ /*margin:0px 10px 0px 0px;*/ position:relative; /*margin-left:16px;*/}
.checkIcon{ display:none; width:24px; height:24px; margin-right:5px;}
.checkIcon{ background-position:-56px -170px;}
.checkIcon.active{ background-position:-22px -171px;}
.tableTdVisualiseWrap.openCheck .checkIcon{ display:block;}

.tableTdVisualiseWrap.openCheck  .elementListIcon{ display:none;}
.dropDownPanel{width: 155px; overflow-x: hidden}
.dropDownPanel .checkIcon{ display:block;}
.dropDownOverlayBackround{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 250;
}
.dropDownOverlay{
    max-height: 200px;
    overflow-x: hidden;
    width: 155px;
    position: absolute;
    z-index: 300;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.5);
    -ms-box-shadow: 0px 3px 8px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 3px 8px rgba(0,0,0,0.5);
    background-color: #fff;
}
.dropDownPanel{
    background-color: #fff; 
}
.dropDownPanel .tableTdVisualise {
    border: none
}
.dropDownOverlay .elementListIconContent {
    overflow: hidden;
    padding-top: 3px;
    padding-left: 6px;
    padding-bottom: 3px;
    color: #111B25;
    font-family: 'Roboto',Arial,Helvetica,sans-serif;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    line-height: normal;
    /* font-size: 13px; */
}
.dropDownOverlay .checkIcon{
    margin-right: -6px;
}
#visualiseSection_1{
    position: relative;
}
#jp_container_1{
    position: relative
}
.popupContainer{ position:absolute; /*left:148px;*/ top:0px; width:92%; /*width: auto;*/ min-height:100%; background:#fff; /*border-left:#fff 3px solid;*/ z-index:100; /*border-right:#e5e5e5 1px solid !important;*/ display:none; border-radius: 10px}
.popupContainer.active{ display:block;}
.popupClose{ width:20px; height:20px; background-position:-227px -172px; position:absolute; right:10px; top:10px; border:none; cursor:pointer; z-index: 9999; float:right;}
.popupHeading{ padding:5px 20px; font-size:24px; position: relative; top: 5px}
.popupNormText{ font-size:16px; padding:0px 20px 10px; max-height:200px; overflow:auto; position: relative; top: 15px}
.audioScrubber{ padding-bottom:10px; padding-right:30px;}
.audioScrubber .backBarProgress{ width:auto;}
.progressTimer.left{ margin-left:15px;}

.tableTdVisualiseRow.active .elementListIconContent{ color:#999;}
.tableTdVisualiseWrap.openCheck .tableTdVisualiseRow.active{ display:block;}
.tableTdVisualiseWrap .tableTdVisualiseRow.active{ display:none;}
.elementListWrap .elementList.active, .parentInn_wrapValue .timerWrapValue.active{ display:none;}
.videoPlayerContainerInner.active .elementListWrap, .videoPlayerContainerInner.active .parentInn_wrapValue{ display:none;}
.videoPlayerContainerInner.elementOff .elementListWrap, .videoPlayerContainerInner.elementOff .parentInn_wrapValue{ display:none;}
.listenFirst .videoPlayerContainerInner{ display:none;}
.listenFirst .prevStep, .listenFirst .nextStep,  .listenFirst .listenToTimer, .listenFirst .visibleAudio{ display:none;}
.listenTo .listenTimer, .listenTo .listentotimer2,  .listenTo .audioScrubber{ display:none;}
.visualisation .videoPlayerContainer{ display:none; height:0px;	}
.listentotimer2{ }
.backBarProgressMainInn{ position:relative;}
.loader_overlay
{
    background-color: #fdfdfd;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0.5;
    z-index: 9999;
}
.loader_overlay > img {
    left: 45%;
    position: relative;
    top: 40%;
    width: 5%;
}
.hiddenTimerRoundMarker
{
    background: none !important; display:none;
}
.backFillTimerWrap{ /*margin:0px 20px;*/ position:relative;}
.visualisation .table_headVisualise , .visualisation .tableTdVisualiseRow{/*opacity:0.5;*/ filter:alpha(opacity=50); }
.visualisation .table_headVisualise *, .visualisation .tableTdVisualiseRow *{cursor:default;}
.scrubberTimeline{
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: normal;
    height: auto;
    padding: 5px;
    position: relative;
    top: 6px;
    width: 80px;
    word-wrap: normal;
    z-index: 999;
}
.scrubberTimeline.rightpos{
    left: 9px;
}
.scrubberTimeline.leftpos{
    right: 82px;
}
.visibility_hidden{
    visibility: hidden;
}
.content_click{
    cursor: pointer;
    padding-left: 0px;
    padding-right: 7px;
    font-size: 17px
}
header{
    /* max-height: 800px;*/
    max-width: 1280px;
    margin: 0 auto;
}
.body_container
{
    /* max-height: 800px;*/
    max-width: 1280px;
    margin: 0 auto;
}
.bold{
    font-weight: 800
}
.tableTdVisualiseMain b{
    font-weight: normal
}
.formDefaultBackground{
    background-color: #eee;
}

.alphabets{
}
.alphabets a{
    margin:10px 13px;
    display:inline-block;
    cursor:pointer;
    width:19px;
    height:17px;
    text-align:center;
    border-radius:20px;
    padding-top:3px;
}

.alphabets a.active{
    background:#333333;
    color:#FFF;
}
.glossayItem{
    font-size:14px;
    padding:5px 15px 8px 15px;
}
.glossayItem h3{
    font-weight:bold;
    text-transform: capitalize;
    display: inline;
}
.table_headVisualise_1 {
    background: #fff;
    border-bottom: #d8d8d8 1px solid;
    color: #111b25;
    font-size: 12px;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(256,256,256,0.6);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.tableTdVisualiseRow_1 {
    border-bottom: #e5e5e5 1px solid;
}
.tableTdVisualiseWrap_1 {
    line-height: normal;
    position: relative;
    margin-top: 3px;
    overflow-y: auto
}
.display_none{display:none}

.glossaryAudio{
    background-color: #FFA500;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    left: 5px;
    padding: 2px;
    position: relative;
    top: 1px;
    width: 10px;
}
.glossaryAudio.pause{
    background: url(../images/ui-icons_222222_256x240.png); 
    background-position: -1px -161px;
}
.glossaryAudio.play{
    background: url(../images/ui-icons_222222_256x240.png); 
    background-position: -18px -161px;
}
.tableTdVisualiseRow_1 p{
    /*    display: inline*/
}

.glossaryicon {
    padding-right: 5px;
    position: relative;
    top: 5px;
}

.right.userName > a {
    color: #000000;
    text-decoration: underline;

}
.right.userName > a.textdecorationnone{
    text-decoration: none;
}
.userName{border-bottom: 3px solid transparent;}
.userName.borderbottom{
    border-color: #000000;
}
/* body container ends here */

.pointerLineWrap{ float:left; position:relative; height:100%;}
.playerHandler{ position:absolute; left:0; top:0; width:100%; height:100%;}
.ui-slider-horizontal .ui-slider-handle{ margin-top: -5px !important; margin-left:0px !important; width:0px !important;}
.ui-slider-handleWrap{ position:absolute; left:0; top:0; width:100%;}
.ui-slider-handleWrapInner{ margin:0 10px 0 20px; position:relative;}
.timedivider{display: block;position: relative;top: 18px;right: 4px;color: #ffffff;}
#toc_cotainer{overflow: auto}
/*******************/
.listBox{
    background-color:#ececec;
    border-collapse:separate;
    border-spacing:1px;
    margin-top:10px;
    line-height:16px;
}
.listBox th{
    background-color:#FFF;
    padding:5px;
    /*text-align:left;*/
    font-size:13px;
    font-weight:bold;
}
.listBox td{
    background-color:#FFF;
    padding:5px;	
    font-size:12px;
}
.listBox td a{
    text-decoration: none;
    color: #000000;
}
.listBox td a:hover{
    background-color: #666;
    color: #fff !important
}
.listBox ul{
    list-style:disc;
    margin-left:15px;
}

.listBox .chapterNo{
    font-size:16px;
    line-height:20px;
}
/* .listBox .btnSort{
    width:13px;
    height:8px;
    height:20px;
    float:right;
    background-image: url(../images/sprite.png);
    background-position: 227px 131px;
    cursor:pointer;
}
.listBox .btnSort span{
    width:13px;
    height:8px;
    background-image: url(../images/sprite.png);
    background-position: 189px 121px;
    display:block;		
} */
.listBox .btnSort{
    width:13px;
    height:20px;
    float:right;
    margin-left: 5px;
    position: relative
}
.listBox .btnSort .btnUp{
    width:13px;
    height:8px;
    background-image: url(../images/sprite.png);
    background-position: 189px 220px;
    display:block;
    cursor:pointer;		
}
.listBox .btnSort .btnDn{
    width:13px;
    height:8px;
    background-image: url(../images/sprite.png);
    background-position: 227px 221px;
    display:block;
    cursor:pointer;
    margin-top:2px;	
}
.listBox .artist{
    text-align:center;
}
.listBox .artist .userImg{
    margin:5px auto 0 auto;
    padding:0;
}
.visualiseHeader.form{
    padding-top:20px;
}
.visualiseHeader form .field{
    float:left;
    font-size:12px;
    margin-bottom:20px;
    margin-right:17px;
}
.visualiseHeader form .field span{
    display:block;
    margin-bottom:5px;
    text-align: center;
}
.visualiseHeader form input{
    margin:0;
    border:1px solid #dedede;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding:5px;
}
.form_buttons{
    border-top:1px solid #dedede;
    padding-top:10px;
    padding-bottom:5px;
    text-align:right;
}
.form_buttons .listenViisualiseBtn{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: #666666 1px solid;
    padding-top:14px;
    padding-bottom:16px;
}
.alphabets{
    /*	padding-left:15px;*/	
}
.alphabets a{
    margin:10px 13px;
    display:inline-block;
    cursor:pointer;
    width:19px;
    height:17px;
    text-align:center;
    border-radius:20px;
    padding-top:3px;
}

.alphabets a.active{
    background:#333333;
    color:#FFF;
}
.glossayItem{
    font-size:14px;
    padding:5px 15px 8px 15px;
}
.glossayItem h3{

    font-weight:bold;
    text-transform: capitalize;
    display: inline
}

.table_headVisualise_1 {
    background: #fff;
    border-bottom: #d8d8d8 1px solid;
    color: #111b25;
    font-size: 12px;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(256,256,256,0.6);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.tableTdVisualiseRow_1 {
    border-bottom: #e5e5e5 1px solid;
}
.tableTdVisualiseWrap_1 {
    line-height: normal;
    position: relative;
    margin-top: 3px;
}
.display_none {
    display:none;
}

.glossaryAudio{
    background-color: #FFA500;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    left: 5px;
    padding: 2px;
    position: relative;
    top: 1px;
    width: 10px;
}
.glossaryAudio.pause{
    background: url(../images/ui-icons_222222_256x240.png); 
    background-position: -1px -161px;
}
.glossaryAudio.play{
    background: url(../images/ui-icons_222222_256x240.png); 
    background-position: -18px -161px;
}

.glossaryicon{
    display: inline;
    padding-right: 5px;
    position: relative;
    top: 5px;
}
.glossaryiconNA{
    height: 23px;
    width: 23px;
}
.blockMsg{
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    position:absolute;
    z-index:1000;
    display:none;
}
.blockMsg span{
    display:block;
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    margin-top:-8px;	
}

#ListeningGuideBlocker{	
    background:url(../images/icon_alert.png) no-repeat center 20px;
    text-align:center;
    padding-top:120px;
    color:#666;
}
#ListeningGuideBlocker p{
    margin-bottom:20px;
    padding:0 10px;
    line-height:20px;
}

.dropdown-menu {
    position: absolute;
    top: 61px;
    left: -2px;
    z-index: 10000;
    /*display: none;*/
    min-width: 160px;
    padding: 5px 0;
    margin: 16px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu>li> a{
    color: #333;
    text-decoration:none;
    display: block;
    padding: 3px 20px;
    clear: both;
    white-space: nowrap;
}
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
#playBtn.play {
    background-position: -66px -120px;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    float: right;
}
#playBtn.active {
    background-position: -105px -120px;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    float: right;
}
#stopBtn.stop {
    background-position: -303px -266px;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    float: right;
}
#nextBtn.next{
    background-position: -194px -266px;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    float: right;
}
#prevBtn.prev{
    background-position: -230px -266px;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    float: right;
}
.overlayer {
    background:#fff; border:#e6e6e8 1px solid; border-bottom-color:transparent; box-shadow:0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -ms-box-shadow:0px 1px 3px rgba(0,0,0,0.5); -o-box-shadow:0px 1px 3px rgba(0,0,0,0.5);   border:#aeaeae 1px solid;
    position: absolute;
    top: 38px;
    width: 100.2%;
    z-index: 9999;
    left: -3px;
}
.clicked{
    opacity: 0.5
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    /* Styles */
    .content_click{
        cursor: pointer;
        padding-left: 0px;
        /*   padding-right: 7px;*/
        font-size: 12px;
    }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : portrait){
    /* Styles */	
    .timerRoundMarker{  border-radius:20px; width:8px; height:8px; border:#000 2px solid; margin-top:-6px; /*margin-left:7px;*/ margin-left:-6px;}
    .timerRoundMarker.active {
        width: 12px;
        height: 12px;
        border: none;
    }

}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape){
    /* Styles */
}
@media screen and (max-width:600px){
    .userName, .userImg {
        display:none;
    }

    .playerControlWrap{
        height:90px;
    }
    .jp-volume-bar{
        display:none !important;
    }
    .playerIcon.volumn{
        display:none !important;
    }
    .playerLeftWrap .playerIcon.stop {
        position:absolute;
        left:0;
    }
    .playerLeftWrap{
        position:absolute;
        left:50%;
        margin-left:-72px;
        top:40px;
        padding-left:45px;
    }
    .backBarProgress{
        margin: 10px 10px 4px 10px;
    }
    .audioScrubber {
        padding-right:20px;

    }
    .listenTimer{
        position:absolute;
        top:10px;	
    }
    .listentotimer2{
        position:absolute;
        right:10px;
        top:10px;
    }

}



@media screen and (max-width:480px){
	.sectionText{
		display:none;
	}
    .overviewLink{
        display:none;
    }
    .overviewLink2{
        display:block;
    }
    .listenViisualiseBtn {
        font-size:12px;
        padding: 15px 12px;
    }
    .table_thVisualise.tblTh1{
        width:92%;	
        border-right: none;

    }
    .dropdownArrow{
        right:auto;
        left:80px;	
    }
    .table_thVisualise.tblTh2{
        display:none;
    }
    .tableTdVisualise.tblTd1{
        float:none;
        padding: 5px 10px 5px 10px;
    }
    .tableTdVisualise.tblTd2{
        margin-left:0;
        border-left:none;
        /*		background-color:#f3f3f3;*/
        border-top:1px solid #e5e5e5;
    }
}

@media only screen and (max-device-width: 480px) and (orientation: landscape) {
    .blockMsg{
        display:block;
    }
}