:root {
  --PlayerWidth : 380px;
  --PlayerHeight : 220px;
  --PlayListTop : calc(var(--PlayerHeight) + 16px);
  

  --VolumeBarStyle: 1;/*1=horizontal 2=vertical*/
  --ValueDisplayBorderSize: 2px;
  --ValueDisplayBackgroundColor: #202040;

  --DateTimeLeft: 4px;
  --DateTimeTop: 4px;
  --DateTimeWidth: calc(var(--PlayerWidth) - 12px);
  --DateTimeHeight: calc(32px - var(--ValueDisplayBorderSize)*2);
  --DateTimeFontColor: #f04020;
  --DateTimeBackgroundColor: var(--ValueDisplayBackgroundColor);

  --ListNameLeft: var(--DateTimeLeft);
  --ListNameTop: calc(var(--DateTimeTop) + var(--DateTimeHeight) + 2px);
  --ListNameWidth: calc(var(--PlayerWidth) - 12px);
  --ListNameHeight: calc(32px - var(--ValueDisplayBorderSize)*2);
  --ListNameFontColor: #40f9ff;
  --ListNameBackgroundColor: var(--ValueDisplayBackgroundColor);
 
  --ElapDisplayLeft: var(--ListNameLeft);
  --ElapDisplayTop: calc(var(--ListNameTop) + var(--ListNameHeight) + 4px);/*4px for Combobox focused rectangle */
  --ElapDisplayWidth: 64px;
  --ElapDisplayHeight: var(--ListNameHeight);
  --ElapDisplayFontColor: #40ff40;

  --RemDisplayLeft: var(--ElapDisplayLeft);
  --RemDisplayTop: calc(var(--ElapDisplayTop) + var(--ElapDisplayHeight) + 2px);		
  --RemDisplayWidth: var(--ElapDisplayWidth);
  --RemDisplayHeight: var(--ElapDisplayHeight);
  --RemDisplayFontColor: #ffa040;

  --IntroDisplayLeft: var(--ElapDisplayLeft);
  --IntroDisplayTop: calc(var(--RemDisplayTop) + var(--RemDisplayHeight) + 2px);		
  --IntroDisplayWidth: var(--ElapDisplayWidth);
  --IntroDisplayHeight: var(--ElapDisplayHeight);
  --IntroDisplayFontColor: #ffff00;
  
  --SpecCanvasLeft: calc(var(--ElapDisplayLeft) + var(--ElapDisplayWidth) + 8px);
  --SpecCanvasTop: calc(var(--ElapDisplayTop) + 2px);
  --SpecCanvasWidth: calc(var(--PlayerWidth) - var(--SpecCanvasLeft) - 4px);
  --SpecCanvasHeight: calc(var(--IntroDisplayTop) + var(--IntroDisplayHeight) - var(--SpecCanvasTop) + 4px);		

  --MarqueeLeft: var(--ElapDisplayLeft);
  --MarqueeTop: calc(var(--IntroDisplayTop) + var(--IntroDisplayHeight) + 2px);
  --MarqueeWidth: calc(var(--PlayerWidth) - var(--MarqueeLeft) - 4px);
  --MarqueeHeight: var(--ElapDisplayHeight);

  --PlayButtonLeft: var(--ElapDisplayLeft);		
  --PlayButtonTop: calc(var(--MarqueeTop) + var(--MarqueeHeight) + 2px);		
  --PlayButtonWidth: 32px;
  --PlayButtonHeight: 32px;

  --PlayButtonPlayImg1: url('../img/btnPlay1.png');
  --PlayButtonPlayImg2: url('../img/btnPlay2.png');
  --PlayButtonPauseImg1: url('../img/btnPause1.png');
  --PlayButtonPauseImg2: url('../img/btnPause2.png');

  --VolumeDisplayLeft: calc(var(--PlayerWidth) - var(--VolumeDisplayWidth) - var(--ValueDisplayBorderSize)*2 - 2px);
  --VolumeDisplayTop: calc(var(--VolumeButtonTop));
  --VolumeDisplayWidth: calc(52px - var(--ValueDisplayBorderSize)*2);
  --VolumeDisplayHeight: calc(var(--VolumeButtonHeight) - var(--ValueDisplayBorderSize)*2);

  --VolumeButtonLeft: calc(var(--VolumeDisplayLeft) - var(--VolumeButtonWidth) - 2px);		
  --VolumeButtonTop: var(--PlayButtonTop);		
  --VolumeButtonWidth: 32px;
  --VolumeButtonHeight: 32px;		
  --VolumeButtonImg1: url('../img/btnVolume1.png');		
  --VolumeButtonImg2: url('../img/btnVolume2.png');		

  --VolumeBarWidth: 160px;
  --VolumeBarHeight: 35px;
  --VolumeBarThumbWidth: calc(var(--VolumeBarThumbHeight) / 2);
  --VolumeBarThumbHeight: calc(var(--VolumeBarHeight) - 4px);
  --VolumeBarThumbMarginTop: calc((var(--VolumeBarHeight) - var(--VolumeBarThumbHeight)) / 2);

  --VolumeBarLeft1: calc(var(--VolumeDisplayLeft) + var(--VolumeDisplayWidth) - var(--VolumeBarWidth));
  --VolumeBarTop1: calc(var(--VolumeButtonTop) + var(--VolumeButtonHeight) + 2px);
  --VolumeBarLeft2: calc(var(--VolumeButtonLeft));
  --VolumeBarTop2: calc(var(--VolumeButtonTop) + var(--VolumeButtonHeight) + var(--VolumeBarWidth) + 2px);

  --VolumeBarTrackImg:  url('../img/track2b.png');
  --VolumeBarThumbImg: url('../img/thumb2a.png');
  --VolumeBarThumbActiveImg: url('../img/thumb2b.png');
 
  --JingleBoxButtonLeft: calc(var(--VolumeButtonLeft) - var(--OptButtonWidth) - 2px);		
  --JingleBoxButtonTop: var(--PlayButtonTop);		
  --JingleBoxButtonWidth: 32px;
  --JingleBoxButtonHeight: 32px;		
  --JingleBoxButtonImg: url('../img/btnJingleBox1.png');		
  --JingleBoxButtonImg2: url('../img/btnJingleBox2.png');		
  --JingleButtonBkgColor: linear-gradient(#333333, #555555, #333333);
  --JingleButtonFntColor: #f8f8f8;
  
  --JingleBoxPopupLeft: calc(var(--JingleBoxButtonLeft) - 120px);		
  --JingleBoxPopupTop: calc(var(--JingleBoxButtonTop) + var(--JingleBoxButtonHeight) + 2px);		
  --JingleBoxPopupWidth: 200px;
  --JingleBoxPopupHeight: 280px;		
  
  --JingleCounterBackground: linear-gradient(#603333, #765555, #603333);
  --JingleCounterFontColor: #ffff80;


  --OptButtonLeft: calc(var(--JingleBoxButtonLeft) - var(--OptButtonWidth) - 2px);		
  --OptButtonTop: var(--PlayButtonTop);		
  --OptButtonWidth: 32px;
  --OptButtonHeight: 32px;		

  --OptButtonImg1: url('../img/btnOpt.png');
  --OptButtonImg2: url('../img/btnOpt2.png');

  --OptPopupLeft: calc(var(--OptButtonLeft) - 90px);		
  --OptPopupTop: calc(var(--OptButtonTop) + var(--OptButtonHeight) + 2px);		
  --OptPopupWidth: 220px;
  --OptPopupHeight: 240px;		
  
  --PositionBarLeft: calc(var(--PlayButtonLeft) + var(--PlayButtonWidth) + 2px);
  --PositionBarTop: var(--PlayButtonTop);
  --PositionBarWidth: calc(var(--OptButtonLeft) - var(--PositionBarLeft) - 6px);
  --PositionBarHeight: 32px;
  --PositionBarThumbWidth: calc(var(--PositionBarThumbHeight) / 2);
  --PositionBarThumbHeight: calc(var(--PositionBarHeight) - 4px);
  --PositionBarThumbMarginTop: calc((var(--PositionBarHeight) - var(--PositionBarThumbHeight)) / 2);
  --PositionBarTrackImg: url('../img/track.png');
  --PositionBarThumbImg: url('../img/thumb1a.png');
  --PositionBarThumbActiveImg: url('../img/thumb1b.png');
}

body {
	background : #434343;
}

.label {
	color: white;
	background-color: var(--ValueDisplayBackgroundColor);
	*padding: 8px;
	font-family: Arial;
	border: var(--ValueDisplayBorderSize) solid #333333;	
}

.ValueDisplay {
	font-weight: bold;
	color: #00e0d0;
	line-height: var(--VolumeDisplayHeight);
	text-align: center;
}	

.OptionPopup {
  padding:5px;
  resize:both;
  overflow:hidden;

  background: rgb(2,0,36);
  background: linear-gradient(317deg, rgba(2,0,36,1) 0%, rgba(123,134,147,1) 76%, rgba(121,147,152,1) 100%);

  font-family: Arial;
	font-weight: bold;
	color: #ffffff;
	z-index: 7;
}

.JingleBoxPopup {
  padding:5px;
  resize:both;
  overflow:hidden;

  background: rgb(2,0,36);
  *background: linear-gradient(317deg, rgba(2,0,36,1) 0%, rgba(123,134,147,1) 76%, rgba(121,147,152,1) 100%);

  font-family: Arial;
	font-weight: bold;
	color: #ffffff;
	z-index: 7;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
	
input[type=range] {
  -webkit-appearance: none;
  margin: 0px;
  top: 0px;
  background: transparent;
  z-index: 7;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  /*
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  *border: 1px solid #000000;
  */
  
  background-repeat: no-repeat;
  background-attachment: initial;

  *border-radius: 12px;
}

input[type=range]#objVolumeBar {
  width: var(--VolumeBarWidth);
  height: var(--VolumeBarHeight);
}

input[type=range]#objVolumeBar::-webkit-slider-thumb {
  *transform: rotate(270deg);  
  margin-top: var(--VolumeBarThumbMarginTop);
  width: var(--VolumeBarThumbWidth);
  height: var(--VolumeBarThumbHeight);
  background-size: var(--VolumeBarThumbWidth) var(--VolumeBarThumbHeight);
  background-image: var(--VolumeBarThumbImg); 
}

input[type="range"]#objVolumeBar::-webkit-slider-thumb:active {
	*transform: rotate(270deg);  
	background-image: var(--VolumeBarThumbActiveImg); 
}

input[type=range]#objVolumeBar::-webkit-slider-runnable-track {
  width: var(--VolumeBarWidth);
  height: var(--VolumeBarHeight);  
  background-size: var(--VolumeBarWidth) var(--VolumeBarHeight);
  background-image: var(--VolumeBarTrackImg);
}

input[type=range]::-webkit-slider-thumb {
  margin-top: 18px;
  
  *box-shadow: 1px 1px 1px #000000;
  *border: 1px solid #000000;
  *border-radius: 5px;
  *background: #FFFFFF;
  
  width: 50px;
  height: 46px;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
}

 input[type="range"]::-webkit-slider-thumb:active {
    /*
	background-color: white;
    border: 2px solid #e74c3c;
    */
	*background-image: url('../img/thumb1b.png'); 
  }

  input[type=range]#objPositionBar {
    left: var(--PositionBarLeft);
    top: var (--PositionBarTop);
    width: var(--PositionBarWidth);
    height: var(--PositionBarHeight);
  }
  
   input[type=range]#objPositionBar::-webkit-slider-runnable-track {
    width: var(--PositionBarWidth);
    height: var(--PositionBarHeight);
    background-size: var(--PositionBarWidth) var(--PositionBarHeight);
    *background-image: url('../img/track.png'); 
    background-image: var(--PositionBarTrackImg);
  }
  
  input[type=range]#objPositionBar::-webkit-slider-thumb {
    margin-top: var(--PositionBarThumbMarginTop);
    width: var(--PositionBarThumbWidth);
    height: var(--PositionBarThumbHeight);
    background-size: var(--PositionBarThumbWidth) var(--PositionBarThumbHeight);
    *background-image: url('../img/thumb1a.png'); 
    background-image: var(--PositionBarThumbImg);
  }
  
   input[type="range"]#objPositionBar::-webkit-slider-thumb:active {
	*background-image: url('../img/thumb1b.png');
  background-image: var(--PositionBarThumbActiveImg);
  }

  .logTableDiv {
    *top: 80px;/*may be overriden*/
    padding-bottom: 8px;
    max-width: 100%;
    *height: calc(100% - var(--OptPopupHeight) - 60px);
    height: calc(100% - 100px);
    overflow: scroll;
    *position: fixed;
    background-color:#434343;
  }
  
  .logTable {
    table-layout:fixed;
    position: relative;
    font-family: 'Arial', 'Courier New', 'Courier', monospace;
    font-size: 70%;
    border-collapse: collapse;
    *background-color:#1fc04f;
    color: #2e0c0c;
    width: auto;
    height: 100%
  }
  
  .logTable td, th {
    padding: 2px;
    *color: #FDFDFD;
    *background-color: #000000;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
  }
 
  .logTableDiv::-webkit-scrollbar-track {
    background: #6c7283;
  }

  .logTableDiv::-webkit-scrollbar-corner {
    background-color: #6c7283;
  }


  .logTable tbody tr:nth-child(even) {
    background-color: #c0c0c0;
  }
   
  .logTable tbody tr:nth-child(odd) {
    background-color: #a0a0a0;
  }
  
  .Marquee {
    font-weight: bold;
    background-color: var(--ValueDisplayBackgroundColor);
    color: #00e0d0;
    line-height: var(--VolumeDisplayHeight);
    overflow: hidden;
  }
 
  .MarqueeDiv {
    display:inline-block;
    overflow:hidden;
    margin-top: 2px;
    font-size: 16px;
    position:absolute; 
    white-space: nowrap;
  	font-weight: bold;
}