| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- .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
- }
|