1 /* Main Style Sheet for jQuery UI date picker */ |
|
2 #ui-datepicker-div, .ui-datepicker-inline { |
|
3 font-family: Arial, Helvetica, sans-serif; |
|
4 font-size: 14px; |
|
5 padding: 0; |
|
6 margin: 0; |
|
7 background: #ddd; |
|
8 width: 185px; |
|
9 } |
|
10 #ui-datepicker-div { |
|
11 display: none; |
|
12 border: 1px solid #777; |
|
13 z-index: 9999; /*must have*/ |
|
14 } |
|
15 .ui-datepicker-inline { |
|
16 float: left; |
|
17 display: block; |
|
18 border: 0; |
|
19 } |
|
20 .ui-datepicker-rtl { |
|
21 direction: rtl; |
|
22 } |
|
23 .ui-datepicker-dialog { |
|
24 padding: 5px !important; |
|
25 border: 4px ridge #ddd !important; |
|
26 } |
|
27 button.ui-datepicker-trigger { |
|
28 width: 25px; |
|
29 } |
|
30 img.ui-datepicker-trigger { |
|
31 margin: 2px; |
|
32 vertical-align: middle; |
|
33 } |
|
34 .ui-datepicker-prompt { |
|
35 float: left; |
|
36 padding: 2px; |
|
37 background: #ddd; |
|
38 color: #000; |
|
39 } |
|
40 * html .ui-datepicker-prompt { |
|
41 width: 185px; |
|
42 } |
|
43 .ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker { |
|
44 clear: both; |
|
45 float: left; |
|
46 width: 100%; |
|
47 color: #fff; |
|
48 } |
|
49 .ui-datepicker-control { |
|
50 background: #400; |
|
51 padding: 2px 0px; |
|
52 } |
|
53 .ui-datepicker-links { |
|
54 background: #000; |
|
55 padding: 2px 0px; |
|
56 } |
|
57 .ui-datepicker-control, .ui-datepicker-links { |
|
58 font-weight: bold; |
|
59 font-size: 80%; |
|
60 } |
|
61 .ui-datepicker-links label { /* disabled links */ |
|
62 padding: 2px 5px; |
|
63 color: #888; |
|
64 } |
|
65 .ui-datepicker-clear, .ui-datepicker-prev { |
|
66 float: left; |
|
67 width: 34%; |
|
68 } |
|
69 .ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev { |
|
70 float: right; |
|
71 text-align: right; |
|
72 } |
|
73 .ui-datepicker-current { |
|
74 float: left; |
|
75 width: 30%; |
|
76 text-align: center; |
|
77 } |
|
78 .ui-datepicker-close, .ui-datepicker-next { |
|
79 float: right; |
|
80 width: 34%; |
|
81 text-align: right; |
|
82 } |
|
83 .ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next { |
|
84 float: left; |
|
85 text-align: left; |
|
86 } |
|
87 .ui-datepicker-header { |
|
88 padding: 1px 0 3px; |
|
89 background: #333; |
|
90 text-align: center; |
|
91 font-weight: bold; |
|
92 height: 1.3em; |
|
93 } |
|
94 .ui-datepicker-header select { |
|
95 background: #333; |
|
96 color: #fff; |
|
97 border: 0px; |
|
98 font-weight: bold; |
|
99 } |
|
100 .ui-datepicker { |
|
101 background: #ccc; |
|
102 text-align: center; |
|
103 font-size: 100%; |
|
104 } |
|
105 .ui-datepicker a { |
|
106 display: block; |
|
107 width: 100%; |
|
108 } |
|
109 .ui-datepicker-title-row { |
|
110 background: #777; |
|
111 } |
|
112 .ui-datepicker-days-row { |
|
113 background: #eee; |
|
114 color: #666; |
|
115 } |
|
116 .ui-datepicker-week-col { |
|
117 background: #777; |
|
118 color: #fff; |
|
119 } |
|
120 .ui-datepicker-days-cell { |
|
121 color: #000; |
|
122 border: 1px solid #ddd; |
|
123 } |
|
124 .ui-datepicker-days-cell a{ |
|
125 display: block; |
|
126 } |
|
127 .ui-datepicker-week-end-cell { |
|
128 background: #ddd; |
|
129 } |
|
130 .ui-datepicker-title-row .ui-datepicker-week-end-cell { |
|
131 background: #777; |
|
132 } |
|
133 .ui-datepicker-days-cell-over { |
|
134 background: #fff; |
|
135 border: 1px solid #777; |
|
136 } |
|
137 .ui-datepicker-unselectable { |
|
138 color: #888; |
|
139 } |
|
140 .ui-datepicker-today { |
|
141 background: #fcc !important; |
|
142 } |
|
143 .ui-datepicker-current-day { |
|
144 background: #999 !important; |
|
145 } |
|
146 .ui-datepicker-status { |
|
147 background: #ddd; |
|
148 width: 100%; |
|
149 font-size: 80%; |
|
150 text-align: center; |
|
151 } |
|
152 |
|
153 /* ________ Datepicker Links _______ |
|
154 |
|
155 ** Reset link properties and then override them with !important */ |
|
156 #ui-datepicker-div a, .ui-datepicker-inline a { |
|
157 cursor: pointer; |
|
158 margin: 0; |
|
159 padding: 0; |
|
160 background: none; |
|
161 color: #000; |
|
162 } |
|
163 .ui-datepicker-inline .ui-datepicker-links a { |
|
164 padding: 0 5px !important; |
|
165 } |
|
166 .ui-datepicker-control a, .ui-datepicker-links a { |
|
167 padding: 2px 5px !important; |
|
168 color: #eee !important; |
|
169 } |
|
170 .ui-datepicker-title-row a { |
|
171 color: #eee !important; |
|
172 } |
|
173 .ui-datepicker-control a:hover { |
|
174 background: #fdd !important; |
|
175 color: #333 !important; |
|
176 } |
|
177 .ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover { |
|
178 background: #ddd !important; |
|
179 color: #333 !important; |
|
180 } |
|
181 |
|
182 /* ___________ MULTIPLE MONTHS _________*/ |
|
183 |
|
184 .ui-datepicker-multi .ui-datepicker { |
|
185 border: 1px solid #777; |
|
186 } |
|
187 .ui-datepicker-one-month { |
|
188 float: left; |
|
189 width: 185px; |
|
190 } |
|
191 .ui-datepicker-new-row { |
|
192 clear: left; |
|
193 } |
|
194 |
|
195 /* ___________ IE6 IFRAME FIX ________ */ |
|
196 |
|
197 .ui-datepicker-cover { |
|
198 display: none; /*sorry for IE5*/ |
|
199 display/**/: block; /*sorry for IE5*/ |
|
200 position: absolute; /*must have*/ |
|
201 z-index: -1; /*must have*/ |
|
202 filter: mask(); /*must have*/ |
|
203 top: -4px; /*must have*/ |
|
204 left: -4px; /*must have*/ |
|
205 width: 200px; /*must have*/ |
|
206 height: 200px; /*must have*/ |
|
207 } |
|