/* Skin Name: Pixel Class: pixel Description: Pixel skin for Slider PRO WordPress plugin Author: David */ /* MAIN SLIDE */ .pixel .slide-wrapper { background-color: #FFF; border: 4px solid #FFF; -moz-box-shadow: 0 0 10px #CCC; -webkit-box-shadow: 0 0 10px #CCC; box-shadow: 0 0 10px #CCC; } .pixel .slide { background-color: #FFF; } /* END OF MAIN SLIDE */ /* SLIDE ARROWS */ .pixel .slide-arrows a { background: url(images/arrows.png) no-repeat; width: 38px; height: 38px; top: 50%; margin-top: -19px; } .pixel .slide-arrows a.previous { left: 20px; } .pixel .slide-arrows a.next { right: 20px; background-position: -38px 0; } /* END SLIDE ARROWS */ /* SLIDESHOW CONTROLS */ .pixel .slideshow-controls { background: url(images/playpause.png) no-repeat; width: 38px; height: 38px; top: 50%; left: 50%; margin-top: -19px; margin-left: -19px; } .pixel .slideshow-controls.pause { background-position: 0 0; } .pixel .slideshow-controls.play { background-position: -38px 0; } /* END OF SLIDESHOW CONTROLS */ /* TIMER ANIMATION */ .pixel .timer-animation { top: 20px; right: 20px; } /* END OF TIMER ANIMATION */ /* SLIDE CAPTION */ .pixel .caption-container .background { background-color: #000; width: 100%; height: 100%; } .pixel .caption-container .caption { color: #FFF; margin: 0; padding: 8px; font-size: 16px; line-height: 1; } /* END OF SLIDE CAPTION */ /* SLIDE BUTTONS/BULLETS */ /* main container of the navigation buttons */ .pixel .slide-buttons { margin-top: 40px; } /* left, right and middle of the main container for this skin, these elements are not styled by default feel free to add your own styling */ .pixel .slide-buttons .left, .pixel .slide-buttons .right { } .pixel .slide-buttons .left { } .pixel .slide-buttons .middle { } .pixel .slide-buttons .right { } /* this contains the buttons */ .pixel .slide-buttons .buttons-inner { } /* this is a button */ .pixel .slide-buttons .buttons-inner a { background: url(images/buttons.png) no-repeat; background-position: 0 0; width: 14px; height: 14px; margin: 0 2px; } .pixel .slide-buttons .buttons-inner a.over { background-position: -14px 0; } .pixel .slide-buttons .buttons-inner a.select { background-position: -28px 0; } /* this is used to style the numbers from within the buttons, when they are used */ .pixel .slide-buttons .buttons-inner a .number { margin-top: 2px; font-size: 9px; line-height: 11px; color: #666; } .pixel .slide-buttons .buttons-inner a.over .number { font-size: 8px; color: #FFF; } .pixel .slide-buttons .buttons-inner a.select .number { font-size: 8px; color: #FFF; } /* applied to the thumbnail when the thumbnail is used only as a tooltip sets the distance between the button and the thumbnail */ .pixel .slide-buttons .buttons-inner .thumbnail-wrapper { margin-bottom: 10px; } /* END OF SLIDE BUTTONS/BULLETS */ /* THUMBNAIL IMAGE */ .pixel .thumbnail { background-color: #FFF; border: solid 3px #FFF; -moz-box-shadow: 0 0 10px #AAA; -webkit-box-shadow: 0 0 10px #AAA; box-shadow: 0 0 10px #AAA; -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA')"; filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#AAAAAA'); } /* END OF THUMBNAIL IMAGE */ /* THUMBNAIL SCROLLER */ .pixel .thumbnail-scroller.horizontal { bottom: 0; left: 0; padding: 0 50px; margin-top: 30px; } .pixel .thumbnail-scroller.horizontal.overlay { bottom: 80px; margin-top: 0; } .pixel .thumbnail-scroller.vertical { right: 0; top: 0; padding: 50px 0; margin-left: 30px; } .pixel .thumbnail-scroller.vertical.overlay { right: 80px; margin-left: 0; } .pixel .thumbnail-scroller .thumbnail-wrapper { margin: 5px; padding: 4px; } .pixel .thumbnail-scroller .thumbnail.over { border: solid 3px #FFF; -moz-box-shadow: 0 0 10px #555; -webkit-box-shadow: 0 0 10px #555; box-shadow: 0 0 10px #555; -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555)"; filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555'); } .pixel .thumbnail-scroller .thumbnail.select { border: solid 3px #FFF; -moz-box-shadow: 0 0 10px #555; -webkit-box-shadow: 0 0 10px #555; box-shadow: 0 0 10px #555; -ms-filter: "progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555')"; filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color='#555555'); } /* THUMBNAIL CAPTION */ .pixel .thumbnail .caption .background { background-color: #000; filter: alpha(opacity=50); opacity: 0.5; } .pixel .thumbnail .caption .content { color: #FFF; font-size: 12px; line-height: 14px; text-align: center; padding: 2px 0; margin: 0; } /* END OF THUMBNAIL CAPTION */ /* THUMBNAIL SCROLLBAR ARROWS */ .pixel .thumbnail-scroller .arrows a { background: url(images/arrows.png) no-repeat; width: 38px; height: 38px; } .pixel .thumbnail-scroller.vertical .arrows a { background: url(images/arrows_v.png) no-repeat; } .pixel .thumbnail-scroller .arrows a.next { background-position: -38px 0; } .pixel .thumbnail-scroller.horizontal .arrows a.previous { left: 0; } .pixel .thumbnail-scroller.horizontal .arrows a.next { right: 0; } .pixel .thumbnail-scroller.vertical .arrows a.previous { top: 0; } .pixel .thumbnail-scroller.vertical .arrows a.next { bottom: 0; } /* END OF THUMBNAIL SCROLLBAR ARROWS */ /* THUMBNAIL SCROLLBAR BUTTONS */ .pixel .thumbnail-scroller .buttons a { background: url(images/buttons_small.png) no-repeat; background-position: 0 0; width: 10px; height: 10px; margin: 2px; } .pixel .thumbnail-scroller .buttons a.over { background-position: -10px 0; } .pixel .thumbnail-scroller .buttons a.select { background-position: -20px 0; } .pixel .thumbnail-scroller.horizontal .buttons { margin-top: 0; } .pixel .thumbnail-scroller.vertical .buttons { margin-left: 0; } /* END OF THUMBNAIL SCROLLBAR BUTTONS */ /* THUMBNAIL SCROLLBAR SCROLLBAR */ .pixel .thumbnail-scroller.horizontal .scrollbar { margin-top: 30px; } .pixel .thumbnail-scroller.vertical .scrollbar { margin-left: 30px; } /* END OF THUMBNAIL SCROLLBAR SCROLLBAR */ /* END OF THUMBNAIL SCROLLER */ /* TOOLTIP */ .advanced-slider-tooltip { background-color: #DDD; margin-bottom: 20px; border: #EEE solid 4px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .advanced-slider-tooltip .content { color: #999; padding: 10px; margin: 0; } /* END OF TOOLTIP */