2 AnythingSlider v1.7+ Default (base) theme
3 By Chris Coyier: http://css-tricks.com
4 with major improvements by Doug Neiner: http://pixelgraphics.us/
5 based on work by Remy Sharp: http://jqueryfordesigners.com/
14 /*****************************
15 SET DEFAULT DIMENSIONS HERE
16 *****************************/
17 /* change the ID to match your slider */
22 /* Opera width restriction */
23 .anythingBase { max-width: 32766px; }
28 /**** Default state (no keyboard focus) ****/
29 /* slider window - top & bottom borders, default state */
30 div
.anythingSlider
.anythingWindow
{
34 /* Navigation buttons, default state */
35 div
.anythingSlider
.anythingControls ul a
.cur
, div
.anythingSlider
.anythingControls ul a
{
39 /* start-stop button, stopped, default state */
40 div
.anythingSlider
.start-stop
{
41 background-color: #040;
44 /* start-stop button, playing, default state */
45 div
.anythingSlider
.start-stop
.playing
{
46 background-color: #800;
48 /* start-stop button, default hovered text color (when visible) */
49 div
.anythingSlider
.start-stop:hover
, div
.anythingSlider
.start-stop
.hover
{
53 /**** Active State (slider has keyboard focus) ****/
54 /* slider window - top & bottom borders, active state */
55 div
.anythingSlider
.activeSlider
.anythingWindow
{
58 /* Navigation buttons, active state */
59 div
.anythingSlider
.activeSlider
.anythingControls ul a
.cur
, div
.anythingSlider
.activeSlider
.anythingControls ul a
{
60 background-color: #7C9127;
62 /* start-stop button, stopped, active state */
63 div
.anythingSlider
.start-stop
{
64 background-color: #080;
67 /* start-stop button, playing, active state */
68 div
.anythingSlider
.start-stop
.playing
{
69 background-color: #d00;
71 /* start-stop button, active slider hovered text color (when visible) */
72 div
.anythingSlider
.start-stop:hover
, div
.anythingSlider
.start-stop
.hover
{
76 /***********************
78 ***********************/
79 /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
83 overflow: visible
!important
; /* needed for Opera and Safari */
85 padding: 0 45px 28px 45px;
87 /* anythingSlider viewport window */
88 div
.anythingSlider
.anythingWindow
{
94 /* anythingSlider base (original element) */
96 background: transparent
;
104 /* all panels inside the slider */
105 .anythingBase .panel {
106 background: transparent
;
115 /* Navigation Arrows */
116 div
.anythingSlider
.arrow
{
121 div
.anythingSlider
.arrow a
{
124 margin: -70px 0 0 0; /* half height of image */
128 background: url
(../images/default.png) no-repeat
;
130 /* hide text, target the span so IE7 doesn't text-indent the link */
131 div
.anythingSlider
.arrow a span
{ display: block
; text-indent: -9999px; }
133 div
.anythingSlider
.back
{ left: 0; }
134 div
.anythingSlider
.back a
{ background-position: left top
; }
135 div
.anythingSlider
.back
a:hover
, div
.anythingSlider
.back a
.hover
{ background-position: left
-140px; }
136 div
.anythingSlider
.back
.disabled
{ display: none
; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
138 div
.anythingSlider
.forward
{ right: 0; }
139 div
.anythingSlider
.forward a
{ background-position: right top
; }
140 div
.anythingSlider
.forward
a:hover
, div
.anythingSlider
.forward a
.hover
{ background-position: right
-140px; }
141 div
.anythingSlider
.forward
.disabled
{ display: none
; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
143 /* Navigation Links */
144 div
.anythingSlider
.anythingControls
{ outline: 0; display: none
; }
145 div
.anythingSlider
.anythingControls ul
{ margin: 0; padding: 0; float: left
; }
146 div
.anythingSlider
.anythingControls ul li
{ display: inline
; }
147 div
.anythingSlider
.anythingControls ul a
{
148 font: 11px/18px Georgia
, Serif
;
149 display: inline-block
;
150 text-decoration: none
;
154 background-image: url
(../images/default.png);
155 background-position: center
-288px ;
156 background-repeat: repeat-x
;
159 border-radius: 0 0 5px 5px;
160 -moz-border-radius: 0 0 5px 5px;
161 -webkit-border-radius: 0 0 5px 5px;
163 div
.anythingSlider
.anythingControls ul
a:hover
{
164 background-image: none
;
166 /* Navigation size window */
167 div
.anythingSlider
.anythingControls
.anythingNavWindow
{ overflow: hidden
; float: left
; }
169 /* slider autoplay right-to-left, reverse order of nav links to look better */
170 div
.anythingSlider
.rtl
.anythingControls ul a
{ float: right
; } /* reverse order of nav links */
171 div
.anythingSlider
.rtl
.anythingControls ul
{ float: left
; } /* move nav link group to left */
172 div
.anythingSlider
.rtl
.anythingWindow
{
174 unicode-bidi: bidi-override
;
176 /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
178 /* Autoplay Start/Stop button */
179 div
.anythingSlider
.start-stop
{
180 background-image: url
(../images/default.png);
181 background-position: center
-288px;
182 background-repeat: repeat-x
;
186 text-decoration: none
;
190 border-radius: 0 0 5px 5px;
191 -moz-border-radius: 0 0 5px 5px;
192 -webkit-border-radius: 0 0 5px 5px;
194 /* hide cell shading on hover - makes the button appear to come forward */
195 div
.anythingSlider
.start-stop:hover
, div
.anythingSlider
.start-stop
.hover
{ background-image: none
; }
197 /* probably not necessary, but added just in case */
198 div
.anythingSlider
, div
.anythingSlider
.anythingWindow
, div
.anythingSlider
.anythingControls ul a
, div
.anythingSlider
.arrow a
, div
.anythingSlider
.start-stop
{
199 transition-duration: 0;
200 -o-transition-duration: 0;
201 -moz-transition-duration: 0;
202 -webkit-transition-duration: 0;