/* AnythingSlider v1.7+ Default (base) theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID to match your slider */ #slider { width: 640px; height: 285px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; clear:both; } /***************** SET COLORS HERE *****************/ /**** Default state (no keyboard focus) ****/ /* slider window - top & bottom borders, default state */ div.anythingSlider .anythingWindow { } /* Navigation buttons, default state */ div.anythingSlider .anythingControls { color: #000; margin-left:0px; margin-top:20px; width:640px; padding-top:6px; position:absolute; height:34px; z-index:1001; } div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a { width:15px; height:15px; color: #000; } /* start-stop button, stopped, default state */ div.anythingSlider .start-stop { background-color: #FFF; color: #fff; } /* start-stop button, playing, default state */ div.anythingSlider .start-stop.playing { background-color: #FFF; } /* start-stop button, default hovered text color (when visible) */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { color: #015249; } /**** Active State (slider has keyboard focus) ****/ /* slider window - top & bottom borders, active state */ div.anythingSlider.activeSlider .anythingWindow { border-color: #FFF; } /* Navigation buttons, active state */ div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a { background-image:url(1.png); background-repeat:no-repeat; background-position:center; color:#000; font-size:9px; color:#FFFFFF; } div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a:hover { background-image:url(2.png); background-repeat:no-repeat; background-position:center; color:#000; font-size:9px; color:#FFFFFF; } /* start-stop button, stopped, active state */ div.anythingSlider .start-stop { background-color: #080; color: #fff; } /* start-stop button, playing, active state */ div.anythingSlider .start-stop.playing { background-color: #d00; } /* start-stop button, active slider hovered text color (when visible) */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { color: #fff; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */ div.anythingSlider { display: block; margin: 0 auto; overflow: visible !important; padding: 10px; border:1px solid #e9e9e9; } /* anythingSlider viewport window */ div.anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* all panels inside the slider */ .anythingBase .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } .anythingBase .panel.vertical { float: none; } /* Navigation Arrows */ div.anythingSlider .arrow { top: 50%; position: absolute; display: block; } div.anythingSlider .arrow a { display: block; height: 140px; margin: -70px 0 0 0; /* half height of image */ width: 45px; text-align: center; outline: 0; } /* hide text, target the span so IE7 doesn't text-indent the link */ div.anythingSlider .arrow a span { display: block; visibility: hidden; } /* back arrow */ div.anythingSlider .back { left: 0; } div.anythingSlider .back a { background-position: left top; } div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; } div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ /* forward arrow */ div.anythingSlider .forward { right: 0; } div.anythingSlider .forward a { background-position: right top; } div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; } div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ /* Navigation Links */ div.anythingSlider .anythingControls { outline: 0; display: none; } div.anythingSlider .anythingControls ul { margin: 0; padding: 0; margin-top:0px; text-align:center;} div.anythingSlider .anythingControls ul li { display: inline; } div.anythingSlider .anythingControls ul a { font-size:12px; display: inline-block; text-decoration: none; padding: 2px 2px; margin: 0 2px 0 0; text-align: center; outline: 0; } div.anythingSlider .anythingControls ul a:hover { background-image: none; } /* Navigation size window */ div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* slider autoplay right-to-left, reverse order of nav links to look better */ div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ div.anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ /* Autoplay Start/Stop button */ div.anythingSlider .start-stop { background-position: center -288px; background-repeat: repeat-x; padding: 2px 5px; width: 40px; text-align: center; text-decoration: none; float: right; z-index: 100; outline: 0; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } /* hide cell shading on hover - makes the button appear to come forward */ div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; } /* probably not necessary, but added just in case */ div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { transition-duration: 0; -o-transition-duration: 0; -moz-transition-duration: 0; -webkit-transition-duration: 0; }