div.scrollbar {
    display:block; /* initially display:none; to hide from incapable */
}

div#wn1,div#wn2,div#wn3,div#wn4,div#wn5,div#wn6  { 
  position:relative; 
  width:100%;
  height:90px;
  overflow:hidden;
}
#lyr1,#lyr2,#lyr3,#lyr4,#lyr5,#lyr6 {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
div#scrollbar1,div#scrollbar2,div#scrollbar3,div#scrollbar4,div#scrollbar5,div#scrollbar6 { 
  position:relative;
  width:11px; height:90px; 
  top: 0;
  left: 0;
  font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  margin:0;
  padding:0;
  }
div#track1,div#track2,div#track3,div#track4,div#track5,div#track6 { 
  position:absolute; left:0; top:0px;
  width:11px; height:90px;
  background-color: #dcdcdc;
  }
div#dragBar1,div#dragBar2,div#dragBar3,div#dragBar4,div#dragBar5,div#dragBar6 {
  position:absolute; left:1px; top:1px;
  width:9px; height:20px;
  background-color:#7b7b7b;
  z-index:1
  }  
div#up1,div#up2,div#up3,div#up4,div#up5,div#up6 {
  position:absolute; left:0; top:0; z-index:2
}  
div#down1,div#down2,div#down3,div#down4,div#down5,div#down6 {
  position:absolute; left:0; bottom:0; z-index:3
} 

/* for safari, to prevent selection problem  */
div#scrollbar1, div#track1, div#dragBar1, div#up1, div#down1,
div#scrollbar2, div#track2, div#dragBar2, div#up2, div#down2,
div#scrollbar3, div#track3, div#dragBar3, div#up3, div#down3,
div#scrollbar4, div#track4, div#dragBar4, div#up4, div#down4,
div#scrollbar5, div#track5, div#dragBar5, div#up5, div#down5,
div#scrollbar6, div#track6, div#dragBar6, div#up6, div#down6
    {
    -moz-user-select: none;
    -khtml-user-select: none;
    }


/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div.scrollbar img {
    display:block; 
    }