.clr { clear:both; height:0 } /***************/ /** EXEMPLE 1 **/ /***************/ .jScrollbar1{ /* main container */ width:500px; height:209px; overflow:hidden; position:relative; border:1px solid #F0F0F0; background-color:#F8F8F8; padding:10px; } .jScrollbar1 .jScrollbar_mask { /* text container */ width:450px; position:relative; top:0; } .jScrollbar1 .jScrollbar_mask p { /* paragraphs */ margin:0; padding:0; color:#2B2B2B; font-size:12px; } .jScrollbar1 .jScrollbar_draggable { /* slider container */ float:left; width:13px; height:209px; overflow:hidden; background:transparent; position:relative } .jScrollbar1 .jScrollbar_draggable a.draggable { /** draggable **/ position:relative; background-color:#000; display:block; height:70px; width:13px; cursor:s-resize } /***************/ /** EXEMPLE 2 **/ /***************/ .jScrollbar2 { width:500px; height:209px; overflow:hidden; position:relative; background-color:#3f6f7c; padding:10px } .jScrollbar2 .jScrollbar_mask { width:450px; position:relative; top:0; } .jScrollbar2 .jScrollbar_mask p { margin:0; padding:0; color:#FFF; font-size:12px; } .jScrollbar2 .jScrollbar_draggable { float:left; width:13px; height:209px; overflow:hidden; background:none; background-color:#8ea9b0; position:relative } .jScrollbar2 .jScrollbar_draggable a.draggable { position:relative; background-color:#0a5060; display:block; height:45px; width:13px; margin-left:0; cursor:s-resize } /***************/ /** EXEMPLE 3 **/ /***************/ .jScrollbar3 { width:500px; height:209px; overflow:hidden; position:relative; background-color:#d6d6d6; padding:10px } .jScrollbar3 .jScrollbar_mask { width:450px; position:relative; top:0; } .jScrollbar3 .jScrollbar_mask p { margin:0; padding:0; color:#242424; font-size:12px; } .jScrollbar3 .jScrollbar_draggable { float:left; width:3px; height:209px; overflow:hidden; background:none; background-color:#FFF; position:relative } .jScrollbar3 .jScrollbar_draggable a.draggable { position:relative; background-color:#313131; display:block; height:44px; width:3px; cursor:s-resize } /***************/ /** EXEMPLE 4 **/ /***************/ .jScrollbar4 { width:500px; height:209px; overflow:hidden; position:relative; background-color:#454547; padding:10px } .jScrollbar4 .jScrollbar_mask { width:460px; position:relative; top:0; } .jScrollbar4 .jScrollbar_mask p { margin:0; padding:0; color:#FFF; font-size:12px; } .jScrollbar4 .jScrollbar_draggable { float:left; width:13px; height:209px; overflow:hidden; background:none; background:transparent url('../images/bg_slider4.png') no-repeat; position:relative } .jScrollbar4 .jScrollbar_draggable a.draggable { position:relative; background:transparent url('../images/bg_draggable4.png') no-repeat; display:block; height:58px; width:13px; cursor:s-resize } /***************/ /** EXEMPLE 5**/ /***************/ .jScrollbar5 { width:500px; height:209px; overflow:hidden; position:relative; background-color:#313131; padding:10px } .jScrollbar5 .jScrollbar_mask { width:460px; position:relative; top:0; } .jScrollbar5 .jScrollbar_mask p { margin:0; padding:0; color:#FFF; font-size:12px; } .jScrollbar5 .jScrollbar_draggable { float:left; width:12px; height:209px; overflow:hidden; background:none; background-color:#222222; border:1px solid #000; position:relative } .jScrollbar5 .jScrollbar_draggable a.draggable { position:relative; background:transparent url('../images/bg_draggable5.png') no-repeat; display:block; height:52px; width:12px; cursor:s-resize }