/* SCROLLABLE SLIDER */

.scrollable-wrapper { position: relative; margin-bottom:25px; width: 600px; height: 400px; margin: 1.5em auto 0; background-color: white; z-index: 9}
.scrollable-wrapper:after { display: block; content: ""; position: absolute; bottom: 3px; left: 5%; height: 1px; width: 90%; box-shadow: 0px 8px 16px #333; border-bottom: 1px solid transparent; z-index: -1 }
.scrollable { position: relative; overflow: hidden; width: 600px; height: 100% }
.scrollable-items { width: 55000px; position: absolute; }
.scrollable-item { float: left; width: 600px; height: 100%; position: relative; overflow: hidden; text-align: center; background-color: rgb( 196, 212, 245 ) }
.scrollable-item img { display: inline; min-height: 100% }
.browse { width: 46px; height: 400px; position: absolute; z-index: 3; background: url(images/main_sprite.png) no-repeat 0 0; cursor: pointer }
.left:hover { background-position: -96px 0 }
.right {right: 0px; top: 0; background-position: -48px 0 }
.right:hover { background-position: -144px 0 }
.slider-title-wp { width: 600px; height: 55px; overflow: hidden; background: url(images/main_sprite.png) no-repeat 0 -423px; position: absolute; bottom:-1px; z-index: 2; padding: 15px 25px }
.slider-title { font-size: 1.45em; color: rgb( 215, 39, 42 ); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px }
.slider-sub { font-size: 1.1em; color: #fff  }
.slider-title-link { display: block; width: 100%; height: 100%  }

.scrollable-wrapper-bottom { height: 105px; position: relative; width: 600px; margin: 0 auto }
.scrollable-bottom { position: relative; overflow: hidden; width: 100%; height: 110%;  } 
.scrollable-bottom-items { width: 20000em; position: absolute }
.scrollable-single-item { width: 600px; float: left; position: relative; }
.scrollable-item-img-wp { width: 101px; height: 101px; margin-right: 16px; float: left; overflow: hidden; padding: 2px; border: 1px solid #999; cursor: pointer }
.scrollable-item-img-wp:last-child { margin-right: 0 }
.scrollable-item-img-wp img { width: 101px; height: 101px;  }
.browse-bottom { position: absolute; z-index: 9; width: 30px; height: 150px; top: 0 }
.right-bottom { right: 0; background-color: red; cursor: pointer }

.button-active { box-shadow: 2px 2px 8px #333 }
.scrollable-wrapper-bottom .browse { position: absolute; width: 20px; height: 100%; background: url(images/main_sprite.png) no-repeat 0 0  }
.scrollable-wrapper-bottom .left { left: -25px; background-position: -194px -56px  }
.scrollable-wrapper-bottom .right { right: -25px; background-position: -222px -56px  }
.scrollable-wrapper-bottom .disabled { opacity: 0.3 }

.image-informations { width: 600px; margin: 1.5em auto 0; display: none }
.image-informations-title { text-transform: uppercase; letter-spacing: 1px; font-size: 1em }
.image-informations-body { margin-top: 1em; font-size: 1.2em }

.tooltip { display: none; position: relative; width: 86px; text-align: center; background-color: rgb( 196, 212, 245 ); box-shadow: 1px 1px 2px 1px #999; font-size: .9em; padding: .5em; }
.tooltip:before { content:" "; width: 0: height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgb( 196, 212, 245 ); position: absolute; left: 41%; top: -10px; }