]>
Commit | Line | Data |
---|---|---|
ff366de0 MT |
1 | /* |
2 | AnythingSlider v1.4 | |
3 | ||
4 | By Chris Coyier: http://css-tricks.com | |
5 | with major improvements by Doug Neiner: http://pixelgraphics.us/ | |
6 | based on work by Remy Sharp: http://jqueryfordesigners.com/ | |
7 | */ | |
8 | ||
9 | /******* SET DEFAULT DIMENSIONS HERE ********/ | |
10 | div.anythingSlider { | |
11 | width: 700px; | |
12 | height: 390px; | |
13 | margin: 0 auto; | |
14 | } | |
15 | ||
16 | div.anythingSlider img { | |
17 | padding: 0; | |
18 | } | |
19 | ||
20 | /****** SET COLORS HERE *******/ | |
21 | /* Default State */ | |
22 | div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a { | |
23 | background: #880400; | |
24 | } | |
25 | div.anythingSlider .anythingWindow { | |
26 | border-top: 2px solid #880400; | |
27 | border-bottom: 2px solid #880400; | |
28 | } | |
29 | /* Active State */ | |
30 | div.anythingSlider.activeSlider .thumbNav a.cur { | |
31 | color: white; | |
32 | background-color: #880400; | |
33 | } | |
34 | ||
35 | div.anythingSlider.activeSlider .thumbNav a { | |
36 | background-color: white; | |
37 | } | |
38 | ||
39 | div.anythingSlider.activeSlider .anythingWindow { | |
40 | border-color: #880400; | |
41 | } | |
42 | ||
43 | /**** DO NOT CHANGE BELOW THIS LINE ****/ | |
44 | /* anythingSlider viewport window */ | |
45 | div.anythingSlider .anythingWindow { | |
46 | overflow: hidden; | |
47 | position: relative; | |
48 | width: 100%; | |
49 | height: 100%; | |
50 | } | |
51 | /* wrapper: 45px right & left padding for the arrows, 28px @ bottom for naviagation */ | |
52 | div.anythingSlider { | |
53 | position: relative; | |
54 | padding: 0 35px 28px; | |
55 | /*padding: 0 35px 28px 35px;*/ | |
56 | } | |
57 | /* anythingSlider base UL */ | |
58 | ul.anythingBase { | |
59 | background: transparent; | |
60 | list-style: none; | |
61 | position: absolute; | |
62 | top: 0; left: 0; | |
63 | margin: 0; | |
64 | } | |
65 | ul.anythingBase li.panel { | |
66 | background: transparent; | |
67 | display: block; | |
68 | float: left; | |
69 | padding: 0; | |
70 | margin: 0; | |
71 | } | |
72 | ||
73 | /* Navigation Arrows */ | |
74 | div.anythingSlider .arrow { | |
75 | top: 50%; | |
76 | position: absolute; | |
77 | display: block; | |
78 | } | |
79 | div.anythingSlider .arrow a { | |
80 | display: block; | |
81 | height: 70px; | |
82 | margin-top: -70px; | |
83 | width: 35px; | |
84 | text-align: center; | |
85 | outline: 0; | |
86 | background: url(../images/anythingslider/arrows.png) no-repeat; | |
87 | text-indent: -9999px; | |
88 | } | |
89 | div.anythingSlider .forward { right: 0; } | |
90 | div.anythingSlider .back { left: 0; } | |
91 | div.anythingSlider .forward a { background-position: 0 -70px; } | |
92 | div.anythingSlider .back a { background-position: -35px -70px; } | |
93 | div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 0; } | |
94 | div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -35px 0; } | |
95 | ||
96 | /* Navigation Links */ | |
97 | div.anythingSlider .thumbNav { margin: 0; } | |
98 | div.anythingSlider .thumbNav li { display: inline; } | |
99 | div.anythingSlider .thumbNav a { | |
100 | color: #880400; | |
101 | /* font: 11px/18px Georgia, Serif; */ | |
102 | display: inline-block; | |
103 | text-decoration: none; | |
104 | padding: 2px 8px; | |
105 | height: 18px; | |
106 | margin: 0 5px 0 0; | |
107 | background-image: url(../images/anythingslider/cellshade.png); | |
108 | background-repeat: repeat-x; | |
109 | text-align: center; | |
110 | outline: 0; | |
111 | /* -moz-border-radius-bottomleft: 5px; | |
112 | -moz-border-radius-bottomright: 5px; | |
113 | -webkit-border-bottom-right-radius: 5px; | |
114 | -webkit-border-bottom-left-radius: 5px; */ | |
115 | } | |
116 | div.anythingSlider .thumbNav a:hover { background-image: none; } | |
117 | ||
118 | /* slider autoplay right-to-left, reverse order of nav links to look better */ | |
119 | div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */ | |
120 | div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */ | |
121 | /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ | |
122 | ||
123 | /* Autoplay Start/Stop button */ | |
124 | div.anythingSlider .start-stop { | |
125 | z-index: 10; | |
126 | background-color: #880400; | |
127 | color: white; | |
128 | padding: 2px 5px; | |
129 | width: 40px; | |
130 | text-align: center; | |
131 | text-decoration: none; | |
132 | float: right; | |
133 | /* -moz-border-radius-bottomleft: 5px; | |
134 | -moz-border-radius-bottomright: 5px; | |
135 | -webkit-border-bottom-right-radius: 5px; | |
136 | -webkit-border-bottom-left-radius: 5px; */ | |
137 | } | |
138 | div.anythingSlider .start-stop.playing { background-color: #880400; } | |
139 | div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: white } | |
140 |