body {
  background-color:#606060;
}
#content {
  background-color: #303030;
  position: absolute;
  /**font-family: Verdana, Geneva, Arial, sans-serif;**/
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  top: 0px;
  left: 0px;
  /* border:2px solid fuchsia; */
}

#playerBackground {
    background-color: #050505;
    position: absolute;
    top:0px;
    margin:0px;
    /* border:2px solid #050505; */
}

#videoplayerid {
  position: relative;
  /* overflow:hidden; */
  padding:0px;
  border-radius: 3px;
  border:2px solid #141414;
}

#bottomBanner {
  position: absolute;
  bottom:0px;
  width: 100%;
  background-color: #000000;
  text-align: right;
  padding:0px;
}
#topBanner {
  position: absolute;
  top:0px;
  width: 100%;
  background-color: #394046;
  overflow: hidden;
  /** border:2px solid #F50505; **/
}
#topBannerBackground {
/**  position: absolute;
  top:0px;
  width: 100%;
  background-color: #303030;
  background-repeat:repeat-x;
  **/
}
#topBannerLeft{
  position: absolute;
  top:0px;
  left:0px;
  /** background-color: #394046; **/
  overflow: hidden;
}
#topBannerRight{
  /**
  position: absolute;
  top:0px;
  right:0px;
  background-color: #394046;
  border:2px solid #05F505;
  **/
}
#topBannerRightSpace{
  position:absolute;
  right:0px;
  top:0px;
  padding:0px 10px 0px 20px;
  background-color: #000000;
  text-align:right;
  height: 60px;
  line-height: 60px;
}
#topBannerRightSpaceTransition{
  position:relative;
  float:right;
  display: inline-block;
  border:2px solid #05F505;
}
#topBannerRightText{
  color:#EEEEEE;
  font-size:12px;
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
  /**padding:4px 6px 4px 20px;**/
}
#chaptersLeft {
  position: absolute;
  left:0px; 
  overflow-y:auto;
  overflow-x:hidden;
  background-color: #303030; /*303030*/
  border:0px solid #781b8d; /*303030*/
}
/* following class could be changed depending if touch interface or computer
   GDC 2015: #5a6a7d #687b91
 */
.chapterClass {
  position: relative;
  font-size:12px; /* default?*/
  color:#E0E0E0;
  left:0px;
  width: 98%;
  /*background: -webkit-linear-gradient(bottom, #481055, #601671, #481055);  dark light dark  aff25c 781b8d */
  /*background: linear-gradient(to bottom, #481055, #601671, #481055); aff25c  */
  background: -webkit-linear-gradient(bottom, #5a6a7d, #687b91, #5a6a7d); /* dark light dark  aff25c 781b8d */
  background: linear-gradient(to bottom, #5a6a7d, #687b91, #5a6a7d); /*  aff25c  */
  background-color: #9121aa; /** light **/
  border:1px solid #340c3d; /** darker **/
  padding:7px;
  margin-right:0px;
  box-sizing: border-box;
  border-radius: 3px;
  /*background-color: #91c94c; */
}
.highlightChapter {
   color:#333333;
   background: -webkit-linear-gradient(bottom, #1cbba3, #23ebcd, #1cbba3);  /*  aff25c 23ebcd */
   background: linear-gradient(to bottom, #1cbba3, #23ebcd, #1cbba3);   /* aff25c */
   /*background: -webkit-linear-gradient(bottom, #f8c21a, #f8d97a, #f8c21a);    aff25c 23ebcd */
   /*background: linear-gradient(to bottom, #f8c21a, #f8d97a, #f8c21a);    aff25c */
   /* background-color: #c0ff73; */
}

#overlayLayer{
  position: absolute;
  right:30px;
  top:100px;
  width:200px;
  height:200px;
  background-color: #444444;
  z-index:4;
}

::-webkit-scrollbar {
  width: 12px; 
  margin: 3px; 
  /* background-color: #237285; */
}
::-webkit-scrollbar-thumb {
  background-color:#5a6a7d; /*#0f3038; 5a6a7d */
  border-radius: 6px;
}




/*

scrollbar-face-color: #0040ff;

-moz-scrollbar { width: 2px; height: 4px;}

::-webkit-scrollbar-button { background-color: #00e9ff; }
*/