1 | @charset "utf-8"; |
---|
2 | |
---|
3 | /************************************************ |
---|
4 | 共通設定 |
---|
5 | ************************************************ */ |
---|
6 | body { |
---|
7 | color: #666; |
---|
8 | font-family: Arial,sans-serif; |
---|
9 | font-size: 75%; |
---|
10 | background-color: #f5f5f5; |
---|
11 | } |
---|
12 | |
---|
13 | select { |
---|
14 | border: solid 1px #ccc; |
---|
15 | } |
---|
16 | |
---|
17 | /*写真*/ |
---|
18 | .picture { |
---|
19 | border: 1px solid #ccc; |
---|
20 | } |
---|
21 | |
---|
22 | |
---|
23 | /* ============================================== |
---|
24 | フレーム |
---|
25 | =============================================== */ |
---|
26 | /* 全体を包括 */ |
---|
27 | .frame_outer { |
---|
28 | margin: 0 auto; |
---|
29 | width: 100%; |
---|
30 | text-align: center; |
---|
31 | } |
---|
32 | |
---|
33 | /* コンテンツ */ |
---|
34 | #container { |
---|
35 | margin: 0 auto; |
---|
36 | padding: 0 0 30px 0; |
---|
37 | width: 980px; |
---|
38 | background: #fff; |
---|
39 | text-align: left; |
---|
40 | } |
---|
41 | |
---|
42 | |
---|
43 | /* ============================================== |
---|
44 | カラム指定 |
---|
45 | =============================================== */ |
---|
46 | /* ヘッダーとフッターの上下 |
---|
47 | [注意]ブロック移動時はbloc.css内で調整が必要 */ |
---|
48 | #topcolumn, |
---|
49 | #bottomcolumn, |
---|
50 | #footerbottomcolumn { |
---|
51 | margin: 0 auto; |
---|
52 | padding: 15px; |
---|
53 | width: 950px; |
---|
54 | background: #fff; |
---|
55 | text-align: left; |
---|
56 | } |
---|
57 | |
---|
58 | /* 中央カラム */ |
---|
59 | .main_column { |
---|
60 | padding: 10px 0 20px; |
---|
61 | } |
---|
62 | |
---|
63 | /* サイドカラム */ |
---|
64 | #leftcolumn { |
---|
65 | float: left; |
---|
66 | width: 20%; |
---|
67 | } |
---|
68 | #rightcolumn { |
---|
69 | float: right; |
---|
70 | width: 20%; |
---|
71 | } |
---|
72 | |
---|
73 | /* 1カラム設定 */ |
---|
74 | #one_maincolumn { |
---|
75 | margin: 0 auto; |
---|
76 | width: 80%; |
---|
77 | } |
---|
78 | |
---|
79 | /* 2カラム設定 (メイン部が左) */ |
---|
80 | #two_maincolumn_left { |
---|
81 | padding-left: 1.5%; |
---|
82 | float: left; |
---|
83 | width: 78%; |
---|
84 | } |
---|
85 | |
---|
86 | /* 2カラム設定 (メイン部が右) */ |
---|
87 | #two_maincolumn_right { |
---|
88 | padding-right: 1.5%; |
---|
89 | width: 78%; |
---|
90 | float: right; |
---|
91 | } |
---|
92 | |
---|
93 | /* 3カラム設定 */ |
---|
94 | #three_maincolumn { |
---|
95 | padding-left: 0.5%; |
---|
96 | width: 59%; |
---|
97 | float: left; |
---|
98 | } |
---|
99 | |
---|
100 | /* 下層コンテンツ */ |
---|
101 | #undercolumn { |
---|
102 | width: 100%; |
---|
103 | margin: 0 0 30px 0; |
---|
104 | } |
---|
105 | |
---|
106 | |
---|
107 | /* ============================================== |
---|
108 | ユーティリティ |
---|
109 | =============================================== */ |
---|
110 | /* フロート回り込み解除 |
---|
111 | ----------------------------------------------- */ |
---|
112 | .clearfix:after { |
---|
113 | display: block; |
---|
114 | clear: both; |
---|
115 | height: 0px; |
---|
116 | line-height: 0px; |
---|
117 | visibility: hidden; |
---|
118 | content: "."; |
---|
119 | } |
---|
120 | .clearfix { |
---|
121 | display: block; /* for IE8 */ |
---|
122 | } |
---|
123 | .clear { |
---|
124 | clear: both; |
---|
125 | } |
---|
126 | |
---|
127 | /* リンク指定 |
---|
128 | ----------------------------------------------- */ |
---|
129 | a:link, |
---|
130 | a:visited { |
---|
131 | color: #39c; |
---|
132 | text-decoration: none; |
---|
133 | } |
---|
134 | a:link:hover, |
---|
135 | a[href]:hover { |
---|
136 | color: #f60; |
---|
137 | text-decoration: underline; |
---|
138 | } |
---|
139 | |
---|
140 | |
---|
141 | /* フォント |
---|
142 | ----------------------------------------------- */ |
---|
143 | h1, |
---|
144 | h2, |
---|
145 | h3, |
---|
146 | h4, |
---|
147 | h5 { |
---|
148 | font-size: 100%; |
---|
149 | line-height: 150%; |
---|
150 | } |
---|
151 | .sale_price { |
---|
152 | color: #f00; |
---|
153 | } |
---|
154 | .normal_price { |
---|
155 | font-size: 0.917em; |
---|
156 | } |
---|
157 | .point { |
---|
158 | color: #f00; |
---|
159 | font-weight: bold; |
---|
160 | } |
---|
161 | .user_name { |
---|
162 | font-weight: bold; |
---|
163 | } |
---|
164 | .recommend_level { |
---|
165 | color: #ecbd00; |
---|
166 | } |
---|
167 | |
---|
168 | .attention { |
---|
169 | color: #f00; |
---|
170 | } |
---|
171 | .attentionSt { |
---|
172 | color: #f00; |
---|
173 | font-weight: bold; |
---|
174 | } |
---|
175 | .st { |
---|
176 | font-weight: bold; |
---|
177 | } |
---|
178 | .mini { |
---|
179 | font-size: 0.917em; |
---|
180 | } |
---|
181 | |
---|
182 | |
---|
183 | /* 行揃え |
---|
184 | ----------------------------------------------- */ |
---|
185 | .alignC { |
---|
186 | text-align: center; |
---|
187 | } |
---|
188 | .alignR { |
---|
189 | text-align: right; |
---|
190 | } |
---|
191 | .alignL { |
---|
192 | text-align: left; |
---|
193 | } |
---|
194 | .pricetd em { |
---|
195 | font-weight: bold; |
---|
196 | } |
---|
197 | |
---|
198 | |
---|
199 | /* フォーム |
---|
200 | ----------------------------------------------- */ |
---|
201 | input[type='text'], |
---|
202 | input[type='password'], |
---|
203 | .select { |
---|
204 | border: solid 1px #ccc; |
---|
205 | padding: 2px; |
---|
206 | } |
---|
207 | |
---|
208 | .box40 { |
---|
209 | width: 40px; |
---|
210 | } |
---|
211 | .box60 { |
---|
212 | width: 60px; |
---|
213 | } |
---|
214 | .box100 { |
---|
215 | width: 100px; |
---|
216 | } |
---|
217 | .box120 { |
---|
218 | width: 120px; |
---|
219 | } |
---|
220 | .box140 { |
---|
221 | width: 140px; |
---|
222 | } |
---|
223 | .box145 { |
---|
224 | width: 145px; |
---|
225 | } |
---|
226 | .box150 { |
---|
227 | width: 150px; |
---|
228 | } |
---|
229 | .box240 { |
---|
230 | width: 240px; |
---|
231 | } |
---|
232 | .box300 { |
---|
233 | width: 300px; |
---|
234 | } |
---|
235 | .box320 { |
---|
236 | width: 320px; |
---|
237 | } |
---|
238 | .box350 { |
---|
239 | width: 350px; |
---|
240 | } |
---|
241 | .box380 { |
---|
242 | width: 380px; |
---|
243 | } |
---|
244 | |
---|
245 | /* フォームが縦に重なり合う場合に併用する余白 */ |
---|
246 | .top { |
---|
247 | margin-bottom: 5px; |
---|
248 | } |
---|
249 | |
---|
250 | .ng_top { |
---|
251 | margin-bottom: 0 !important; |
---|
252 | } |
---|
253 | |
---|
254 | |
---|
255 | /* タイトル |
---|
256 | ----------------------------------------------- */ |
---|
257 | h2.title { |
---|
258 | margin-bottom: 10px; |
---|
259 | padding: 8px; |
---|
260 | border-top: solid 1px #ebeced; |
---|
261 | border-bottom: solid 1px #ebeced; |
---|
262 | color: #f60; |
---|
263 | background-color: #fef3d8; |
---|
264 | font-size: 170%; |
---|
265 | box-shadow: 0 0 1px 1px #fff inset; |
---|
266 | background: #fef3d8; /* Old browsers */ |
---|
267 | background: -moz-linear-gradient(top, #fef3d8 0%, #f7df7f 100%); /* FF3.6+ */ |
---|
268 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef3d8), color-stop(100%,#f7df7f)); /* Chrome,Safari4+ */ |
---|
269 | background: -webkit-linear-gradient(top, #fef3d8 0%,#f7df7f 100%); /* Chrome10+,Safari5.1+ */ |
---|
270 | background: -o-linear-gradient(top, #fef3d8 0%,#f7df7f 100%); /* Opera 11.10+ */ |
---|
271 | background: -ms-linear-gradient(top, #fef3d8 0%,#f7df7f 100%); /* IE10+ */ |
---|
272 | background: linear-gradient(to bottom, #fef3d8 0%,#f7df7f 100%); /* W3C */ |
---|
273 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef3d8', endColorstr='#f7df7f',GradientType=0 ); /* IE6-9 */ |
---|
274 | zoom: 1; |
---|
275 | } |
---|
276 | |
---|
277 | #one_maincolumn .sub_area h3, |
---|
278 | #two_maincolumn_right .sub_area h3, |
---|
279 | #two_maincolumn_left .sub_area h3, |
---|
280 | #three_maincolumn .sub_area h3, |
---|
281 | #undercolumn_login .login_area h3, |
---|
282 | #undercolumn_shopping h3, |
---|
283 | #mypagecolumn h3, |
---|
284 | #undercolumn_cart h3 { |
---|
285 | margin: 0 0 10px 0; |
---|
286 | padding: 5px 0 10px; |
---|
287 | color: #f60; |
---|
288 | background: url("../img/background/line_01.gif") repeat-x left bottom; |
---|
289 | font-size: 1.05em; |
---|
290 | } |
---|
291 | |
---|
292 | div#undercolumn_login .login_area h4 { |
---|
293 | padding-left: 15px; |
---|
294 | background: url("../img/icon/ico_arrow_05.gif") no-repeat left; |
---|
295 | } |
---|
296 | |
---|
297 | |
---|
298 | /* ============================================== |
---|
299 | ヘッダー |
---|
300 | =============================================== */ |
---|
301 | /* レイアウト |
---|
302 | ----------------------------------------------- */ |
---|
303 | #header_wrap { |
---|
304 | border-top: solid 3px #f90; |
---|
305 | min-height: 82px; |
---|
306 | background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0; |
---|
307 | } |
---|
308 | #header { |
---|
309 | margin: auto; |
---|
310 | width: 980px; |
---|
311 | } |
---|
312 | #logo_area { |
---|
313 | padding-left: 10px; |
---|
314 | float: left; |
---|
315 | width: 390px; |
---|
316 | text-align: left; |
---|
317 | } |
---|
318 | #header_utility { |
---|
319 | float: right; |
---|
320 | width: 580px; |
---|
321 | } |
---|
322 | |
---|
323 | #errorHeader { |
---|
324 | color: #F00; |
---|
325 | font-weight: bold; |
---|
326 | font-size: 12px; |
---|
327 | background-color: #FEB; |
---|
328 | text-align: center; |
---|
329 | padding: 5px; |
---|
330 | } |
---|
331 | |
---|
332 | /* ロゴ |
---|
333 | ----------------------------------------------- */ |
---|
334 | #site_description { |
---|
335 | font-size: 0.917em; |
---|
336 | } |
---|
337 | #logo_area h1 { |
---|
338 | width: 378px; |
---|
339 | height: 33px; |
---|
340 | } |
---|
341 | #logo_area h1 span { |
---|
342 | display: none; /* テキストロゴ非表示 */ |
---|
343 | } |
---|
344 | |
---|
345 | |
---|
346 | /* ヘッダーナビ |
---|
347 | ----------------------------------------------- */ |
---|
348 | div#header_navi { |
---|
349 | float: right; |
---|
350 | margin-bottom: 4px; |
---|
351 | } |
---|
352 | div#header_navi ul { |
---|
353 | padding-top: 17px; |
---|
354 | } |
---|
355 | div#header_navi ul li { |
---|
356 | float: left; |
---|
357 | } |
---|
358 | div#header_navi ul li:hover { |
---|
359 | opacity: 0.75; |
---|
360 | filter:alpha(opacity=75); |
---|
361 | } |
---|
362 | div#header_navi ul li:active { |
---|
363 | opacity: 1; |
---|
364 | filter:alpha(opacity=100); |
---|
365 | } |
---|
366 | div#header_navi ul li a { |
---|
367 | display: inline-block; |
---|
368 | font-weight: bold; |
---|
369 | color: #fff; |
---|
370 | padding: 8px 20px 8px 40px; |
---|
371 | text-decoration: none !important; |
---|
372 | } |
---|
373 | div#header_navi ul li.mypage { |
---|
374 | border-right: 1px solid #e9efb6; |
---|
375 | border-radius: 4px 0 0 0; |
---|
376 | background: #C5D709; /* Old browsers */ |
---|
377 | background: -moz-linear-gradient(top, #C5D709 0%, #8CA710 100%); /* FF3.6+ */ |
---|
378 | background: -webkit-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */ |
---|
379 | background: -o-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */ |
---|
380 | background: -ms-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* IE10+ */ |
---|
381 | background: linear-gradient(to bottom, #C5D709 0%,#8CA710 100%); /* W3C */ |
---|
382 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */ |
---|
383 | } |
---|
384 | div#header_navi ul li.mypage:active { |
---|
385 | background: #8CA710; /* Old browsers */ |
---|
386 | background: -moz-linear-gradient(top, #8CA710 0%, #87A010 100%); /* FF3.6+ */ |
---|
387 | background: -webkit-linear-gradient(top, #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */ |
---|
388 | background: -o-linear-gradient(top, #8CA710 0%,#87A010 100%); /* Opera 11.10+ */ |
---|
389 | background: -ms-linear-gradient(top, #8CA710 0%,#87A010 100%); /* IE10+ */ |
---|
390 | background: linear-gradient(to bottom, #8CA710 0%,#87A010 100%); /* W3C */ |
---|
391 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */ |
---|
392 | } |
---|
393 | div#header_navi ul li.mypage a { |
---|
394 | background: url(../img/button/header_arrow02.png) 20px center no-repeat; |
---|
395 | text-shadow: 1px 1px 1px #8c9f0c; |
---|
396 | } |
---|
397 | div#header_navi ul li.entry { |
---|
398 | border-right: 1px solid #e9efb6; |
---|
399 | border-left: 1px solid #a3b610; |
---|
400 | background: #C5D709; /* Old browsers */ |
---|
401 | background: -moz-linear-gradient(top, #C5D709 0%, #8CA710 100%); /* FF3.6+ */ |
---|
402 | background: -webkit-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */ |
---|
403 | background: -o-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */ |
---|
404 | background: -ms-linear-gradient(top, #C5D709 0%,#8CA710 100%); /* IE10+ */ |
---|
405 | background: linear-gradient(to bottom, #C5D709 0%,#8CA710 100%); /* W3C */ |
---|
406 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */ |
---|
407 | } |
---|
408 | div#header_navi ul li.entry:active { |
---|
409 | border-right: 1px solid #e9efb6; |
---|
410 | border-left: 1px solid #a3b610; |
---|
411 | background: #8CA710; /* Old browsers */ |
---|
412 | background: -moz-linear-gradient(top, #8CA710 0%, #87A010 100%); /* FF3.6+ */ |
---|
413 | background: -webkit-linear-gradient(top, #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */ |
---|
414 | background: -o-linear-gradient(top, #8CA710 0%,#87A010 100%); /* Opera 11.10+ */ |
---|
415 | background: -ms-linear-gradient(top, #8CA710 0%,#87A010 100%); /* IE10+ */ |
---|
416 | background: linear-gradient(to bottom, #8CA710 0%,#87A010 100%); /* W3C */ |
---|
417 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */ |
---|
418 | } |
---|
419 | div#header_navi ul li.entry a { |
---|
420 | background: url(../img/button/header_arrow02.png) 20px center no-repeat; |
---|
421 | text-shadow: 1px 1px 1px #8c9f0c; |
---|
422 | } |
---|
423 | |
---|
424 | div#header_navi ul li.view_basket { |
---|
425 | border-left: 1px solid #D96700; |
---|
426 | border-radius: 0 4px 0 0; |
---|
427 | background: #ff9900; /* Old browsers */ |
---|
428 | background: -moz-linear-gradient(top, #ff9900 0%, #E86800 100%); /* FF3.6+ */ |
---|
429 | background: -webkit-linear-gradient(top, #ff9900 0%,#E86800 100%); /* Chrome10+,Safari5.1+ */ |
---|
430 | background: -o-linear-gradient(top, #ff9900 0%,#E86800 100%); /* Opera 11.10+ */ |
---|
431 | background: -ms-linear-gradient(top, #ff9900 0%,#E86800 100%); /* IE10+ */ |
---|
432 | background: linear-gradient(to bottom, #ff9900 0%,#E86800 100%); /* W3C */ |
---|
433 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#E86800',GradientType=0 ); /* IE6-9 */ |
---|
434 | } |
---|
435 | |
---|
436 | div#header_navi ul li.view_basket:active { |
---|
437 | border-left: 1px solid #D96700; |
---|
438 | border-radius: 0 4px 0 0; |
---|
439 | background: #E86800; /* Old browsers */ |
---|
440 | background: -moz-linear-gradient(top, #E86800 0%, #E36600 100%); /* FF3.6+ */ |
---|
441 | background: -webkit-linear-gradient(top, #E86800 0%,#E36600 100%); /* Chrome10+,Safari5.1+ */ |
---|
442 | background: -o-linear-gradient(top, #E86800 0%,#E36600 100%); /* Opera 11.10+ */ |
---|
443 | background: -ms-linear-gradient(top, #E86800 0%,#E36600 100%); /* IE10+ */ |
---|
444 | background: linear-gradient(to bottom, #E86800 0%,#E36600 100%); /* W3C */ |
---|
445 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E86800', endColorstr='##E36600',GradientType=0 ); /* IE6-9 */ |
---|
446 | } |
---|
447 | div#header_navi ul li.view_basket a { |
---|
448 | position: relative; |
---|
449 | padding-left: 50px; |
---|
450 | text-shadow: 1px 1px 1px #d96f00; |
---|
451 | } |
---|
452 | div#header_navi ul li.view_basket a img { |
---|
453 | position: absolute; |
---|
454 | left: 18px; top: -5px; |
---|
455 | } |
---|
456 | |
---|
457 | |
---|
458 | /* ============================================== |
---|
459 | フッター |
---|
460 | =============================================== */ |
---|
461 | #footer_wrap { |
---|
462 | margin: 0 auto; |
---|
463 | width: 980px; |
---|
464 | height: 80px; |
---|
465 | background: #fff; |
---|
466 | } |
---|
467 | #footer { |
---|
468 | margin: auto; |
---|
469 | padding-top: 10px; |
---|
470 | border-top: solid 1px #ccc; |
---|
471 | width: 950px; |
---|
472 | } |
---|
473 | #pagetop { |
---|
474 | width: 210px; |
---|
475 | float: right; |
---|
476 | text-align: right; |
---|
477 | } |
---|
478 | #copyright { |
---|
479 | width: 740px; |
---|
480 | float: left; |
---|
481 | text-align: left; |
---|
482 | font-size: 97%; |
---|
483 | } |
---|
484 | |
---|
485 | |
---|
486 | /* ============================================== |
---|
487 | パーツ |
---|
488 | =============================================== */ |
---|
489 | /* ボタン |
---|
490 | ----------------------------------------------- */ |
---|
491 | .btn_area { |
---|
492 | margin-top: 10px; |
---|
493 | width: 100%; |
---|
494 | text-align: center; |
---|
495 | } |
---|
496 | |
---|
497 | .btn_area li { |
---|
498 | padding-right: 10px; |
---|
499 | display: inline; |
---|
500 | vertical-align: bottom; |
---|
501 | } |
---|
502 | |
---|
503 | /* 完了メッセージ |
---|
504 | ----------------------------------------------- */ |
---|
505 | div#complete_area { |
---|
506 | margin-bottom: 20px; |
---|
507 | } |
---|
508 | div#complete_area .message, |
---|
509 | div#undercolumn_entry .message { |
---|
510 | margin-bottom: 20px; |
---|
511 | line-height: 150%; |
---|
512 | font-weight: bold; |
---|
513 | font-size: 1.05em; |
---|
514 | } |
---|
515 | div#complete_area .shop_information { |
---|
516 | margin-top: 40px; |
---|
517 | padding: 20px 0 0 0; |
---|
518 | border-top: solid 1px #ccc; |
---|
519 | } |
---|
520 | div#complete_area .shop_information .name { |
---|
521 | margin-bottom: 10px; |
---|
522 | font-weight: bold; |
---|
523 | font-size: 140%; |
---|
524 | } |
---|
525 | |
---|
526 | |
---|
527 | /* Tipsy |
---|
528 | ----------------------------------------------- */ |
---|
529 | .tipsy { |
---|
530 | padding: 5px; |
---|
531 | font-size: 10px; |
---|
532 | position: absolute; |
---|
533 | z-index: 100000; |
---|
534 | } |
---|
535 | .tipsy-inner { |
---|
536 | padding: 5px 8px 4px 8px; |
---|
537 | background-color: black; |
---|
538 | color: white; |
---|
539 | max-width: 200px; |
---|
540 | text-align: center; |
---|
541 | } |
---|
542 | .tipsy-inner { |
---|
543 | border-radius: 3px; |
---|
544 | -moz-border-radius: 3px; |
---|
545 | -webkit-border-radius: 3px; |
---|
546 | } |
---|
547 | .tipsy-arrow { |
---|
548 | position: absolute; |
---|
549 | background: url('../img/ajax/tipsy.gif') no-repeat top left; |
---|
550 | width: 9px; |
---|
551 | height: 5px; |
---|
552 | } |
---|
553 | .tipsy-n .tipsy-arrow { |
---|
554 | top: 0; |
---|
555 | left: 50%; |
---|
556 | margin-left: -4px; |
---|
557 | } |
---|
558 | .tipsy-nw .tipsy-arrow { |
---|
559 | top: 0; |
---|
560 | left: 10px; |
---|
561 | } |
---|
562 | .tipsy-ne .tipsy-arrow { |
---|
563 | top: 0; |
---|
564 | right: 10px; |
---|
565 | } |
---|
566 | .tipsy-s .tipsy-arrow { |
---|
567 | bottom: 0; |
---|
568 | left: 50%; |
---|
569 | margin-left: -4px; |
---|
570 | background-position: bottom left; |
---|
571 | } |
---|
572 | .tipsy-sw .tipsy-arrow { |
---|
573 | bottom: 0; |
---|
574 | left: 10px; |
---|
575 | background-position: bottom left; |
---|
576 | } |
---|
577 | .tipsy-se .tipsy-arrow { |
---|
578 | bottom: 0; |
---|
579 | right: 10px; |
---|
580 | background-position: bottom left; |
---|
581 | } |
---|
582 | .tipsy-e .tipsy-arrow { |
---|
583 | top: 50%; |
---|
584 | margin-top: -4px; |
---|
585 | right: 0; |
---|
586 | width: 5px; |
---|
587 | height: 9px; |
---|
588 | background-position: top right; |
---|
589 | } |
---|
590 | .tipsy-w .tipsy-arrow { |
---|
591 | top: 50%; |
---|
592 | margin-top: -4px; |
---|
593 | left: 0; |
---|
594 | width: 5px; |
---|
595 | height: 9px; |
---|
596 | } |
---|
597 | |
---|
598 | |
---|
599 | /* button CSS |
---|
600 | ----------------------------------------------- */ |
---|
601 | |
---|
602 | /* ----- button size */ |
---|
603 | |
---|
604 | .side_column .btn button { |
---|
605 | width: 85%; |
---|
606 | padding: 5px; |
---|
607 | *width: auto; |
---|
608 | } |
---|
609 | |
---|
610 | .side_column .btn a { |
---|
611 | width: 79%; |
---|
612 | display: inline-block; |
---|
613 | padding: 7px 5px; |
---|
614 | margin: 0 auto; |
---|
615 | *width: auto; |
---|
616 | } |
---|
617 | |
---|
618 | .main_column .cart_area a, |
---|
619 | .main_column .review_btn a { |
---|
620 | width: 150px; |
---|
621 | } |
---|
622 | |
---|
623 | .main_column .btn_area button, |
---|
624 | #window_area .btn_area button { |
---|
625 | min-width: 140px; |
---|
626 | } |
---|
627 | .main_column a.bt01,.main_column a.bt02,.main_column a.bt03,.main_column a.bt04 { |
---|
628 | display: inline-block; |
---|
629 | padding: 7px 10px; |
---|
630 | min-width: 130px; |
---|
631 | *width: auto; |
---|
632 | } |
---|
633 | .main_column .btn_area a.bt_wide, |
---|
634 | .main_column .btn_area button.bt_wide { |
---|
635 | min-width: 220px; |
---|
636 | } |
---|
637 | |
---|
638 | /* ----- button white */ |
---|
639 | .bt01 { |
---|
640 | text-align: center; |
---|
641 | padding: 6px 10px; |
---|
642 | color: #666 !important; |
---|
643 | border: 1px solid #ccc; |
---|
644 | border-radius: 4px; |
---|
645 | box-shadow: 0 0 1px 1px #fff inset; |
---|
646 | text-shadow: 1px 1px 1px #fff; |
---|
647 | cursor: pointer; |
---|
648 | background: #fbfbfb; /* Old browsers */ |
---|
649 | background: -moz-linear-gradient(top, #fbfbfb 0%, #e6e6e6 100%); /* FF3.6+ */ |
---|
650 | background: -webkit-linear-gradient(top, #fbfbfb 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */ |
---|
651 | background: -o-linear-gradient(top, #fbfbfb 0%,#e6e6e6 100%); /* Opera 11.10+ */ |
---|
652 | background: -ms-linear-gradient(top, #fbfbfb 0%,#e6e6e6 100%); /* IE10+ */ |
---|
653 | background: linear-gradient(to bottom, #fbfbfb 0%,#e6e6e6 100%); /* W3C */ |
---|
654 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */ |
---|
655 | } |
---|
656 | |
---|
657 | .bt01:hover { |
---|
658 | opacity: 0.75; |
---|
659 | filter:alpha(opacity=75); |
---|
660 | text-decoration: none !important; |
---|
661 | } |
---|
662 | .bt01:active { |
---|
663 | opacity: 1; |
---|
664 | filter:alpha(opacity=100); |
---|
665 | text-decoration: none !important; |
---|
666 | background: #e6e6e6; /* Old browsers */ |
---|
667 | background: -moz-linear-gradient(top, #e6e6e6 0%, #e0e0e0 100%); /* FF3.6+ */ |
---|
668 | background: -webkit-linear-gradient(top, #e6e6e6 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */ |
---|
669 | background: -o-linear-gradient(top, #e6e6e6 0%,#e0e0e0 100%); /* Opera 11.10+ */ |
---|
670 | background: -ms-linear-gradient(top, #e6e6e6 0%,#e0e0e0 100%); /* IE10+ */ |
---|
671 | background: linear-gradient(to bottom, #e6e6e6 0%,#e0e0e0 100%); /* W3C */ |
---|
672 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ |
---|
673 | } |
---|
674 | |
---|
675 | .bt01:disabled,.bt01:disabled:hover,.bt01:disabled:active { |
---|
676 | opacity: 1; |
---|
677 | filter:alpha(opacity=100); |
---|
678 | cursor: default; |
---|
679 | background: #e9e9e9; /* Old browsers */ |
---|
680 | background: -moz-linear-gradient(top, #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */ |
---|
681 | background: -webkit-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */ |
---|
682 | background: -o-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */ |
---|
683 | background: -ms-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */ |
---|
684 | background: linear-gradient(to bottom, #e9e9e9 0%,#c4c4c4 100%); /* W3C */ |
---|
685 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */ |
---|
686 | } |
---|
687 | |
---|
688 | .favorite_btn span.bt01,.favorite_btn span.bt01:hover,.favorite_btn span.bt01:active { |
---|
689 | opacity: 1; |
---|
690 | filter:alpha(opacity=100); |
---|
691 | display: inline-block; |
---|
692 | min-width: 150px; |
---|
693 | cursor: default; |
---|
694 | background: #e9e9e9; /* Old browsers */ |
---|
695 | background: -moz-linear-gradient(top, #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */ |
---|
696 | background: -webkit-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */ |
---|
697 | background: -o-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */ |
---|
698 | background: -ms-linear-gradient(top, #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */ |
---|
699 | background: linear-gradient(to bottom, #e9e9e9 0%,#c4c4c4 100%); /* W3C */ |
---|
700 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */ |
---|
701 | } |
---|
702 | |
---|
703 | .main_column .cart_area .favorite_btn .bt01, |
---|
704 | .main_column .review_btn .bt01, |
---|
705 | .main_column .addbtn .bt01, |
---|
706 | .main_column .add_multiple .bt01, |
---|
707 | .zipimg .bt01 { |
---|
708 | padding: 4px 10px !important; |
---|
709 | } |
---|
710 | |
---|
711 | /* ----- button green */ |
---|
712 | .bt02 { |
---|
713 | text-align: center; |
---|
714 | padding: 6px 10px; |
---|
715 | color: #fff !important; |
---|
716 | border: none; |
---|
717 | border-radius: 4px; |
---|
718 | text-shadow: 1px 1px 1px #67770B; |
---|
719 | cursor: pointer; |
---|
720 | background: #c0d209; /* Old browsers */ |
---|
721 | background: -moz-linear-gradient(top, #c0d209 0%, #91ab10 100%); /* FF3.6+ */ |
---|
722 | background: -webkit-linear-gradient(top, #c0d209 0%,#91ab10 100%); /* Chrome10+,Safari5.1+ */ |
---|
723 | background: -o-linear-gradient(top, #c0d209 0%,#91ab10 100%); /* Opera 11.10+ */ |
---|
724 | background: -ms-linear-gradient(top, #c0d209 0%,#91ab10 100%); /* IE10+ */ |
---|
725 | background: linear-gradient(to bottom, #c0d209 0%,#91ab10 100%); /* W3C */ |
---|
726 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0d209', endColorstr='#91ab10',GradientType=0 ); /* IE6-9 */ |
---|
727 | } |
---|
728 | |
---|
729 | .bt02:hover { |
---|
730 | opacity: 0.75; |
---|
731 | filter:alpha(opacity=75); |
---|
732 | text-decoration: none !important; |
---|
733 | } |
---|
734 | .bt02:active { |
---|
735 | opacity: 1; |
---|
736 | filter:alpha(opacity=100); |
---|
737 | text-decoration: none !important; |
---|
738 | background: #91ab10; /* Old browsers */ |
---|
739 | background: -moz-linear-gradient(top, #91ab10 0%, #7B9210 100%); /* FF3.6+ */ |
---|
740 | background: -webkit-linear-gradient(top, #91ab10 0%,#7B9210 100%); /* Chrome10+,Safari5.1+ */ |
---|
741 | background: -o-linear-gradient(top, #91ab10 0%,#7B9210 100%); /* Opera 11.10+ */ |
---|
742 | background: -ms-linear-gradient(top, #91ab10 0%,#7B9210 100%); /* IE10+ */ |
---|
743 | background: linear-gradient(to bottom, #91ab10 0%,#7B9210 100%); /* W3C */ |
---|
744 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ab10', endColorstr='#7B9210',GradientType=0 ); /* IE6-9 */ |
---|
745 | } |
---|
746 | |
---|
747 | |
---|
748 | /* ----- button orange */ |
---|
749 | .bt03 { |
---|
750 | text-align: center; |
---|
751 | padding: 6px 10px; |
---|
752 | color: #fff !important; |
---|
753 | border: none; |
---|
754 | border-radius: 4px; |
---|
755 | text-shadow: 1px 1px 1px #A83D09; |
---|
756 | cursor: pointer; |
---|
757 | background: #fd9748; /* Old browsers */ |
---|
758 | background: -moz-linear-gradient(top, #fd9748 0%, #de4402 100%); /* FF3.6+ */ |
---|
759 | background: -webkit-linear-gradient(top, #fd9748 0%,#de4402 100%); /* Chrome10+,Safari5.1+ */ |
---|
760 | background: -o-linear-gradient(top, #fd9748 0%,#de4402 100%); /* Opera 11.10+ */ |
---|
761 | background: -ms-linear-gradient(top, #fd9748 0%,#de4402 100%); /* IE10+ */ |
---|
762 | background: linear-gradient(to bottom, #fd9748 0%,#de4402 100%); /* W3C */ |
---|
763 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9748', endColorstr='#de4402',GradientType=0 ); /* IE6-9 */ |
---|
764 | } |
---|
765 | |
---|
766 | |
---|
767 | .bt03:hover { |
---|
768 | opacity: 0.75; |
---|
769 | filter:alpha(opacity=75); |
---|
770 | text-decoration: none !important; |
---|
771 | } |
---|
772 | .bt03:active { |
---|
773 | opacity: 1; |
---|
774 | filter:alpha(opacity=100); |
---|
775 | text-decoration: none !important; |
---|
776 | background: #de4402; /* Old browsers */ |
---|
777 | background: -moz-linear-gradient(top, #de4402 0%, #dd4200 100%); /* FF3.6+ */ |
---|
778 | background: -webkit-linear-gradient(top, #de4402 0%,#dd4200 100%); /* Chrome10+,Safari5.1+ */ |
---|
779 | background: -o-linear-gradient(top, #de4402 0%,#dd4200 100%); /* Opera 11.10+ */ |
---|
780 | background: -ms-linear-gradient(top, #de4402 0%,#dd4200 100%); /* IE10+ */ |
---|
781 | background: linear-gradient(to bottom, #de4402 0%,#dd4200 100%); /* W3C */ |
---|
782 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4402', endColorstr='#dd4200',GradientType=0 ); /* IE6-9 */ |
---|
783 | } |
---|
784 | |
---|
785 | |
---|
786 | /* ----- button gray */ |
---|
787 | .bt04 { |
---|
788 | text-align: center; |
---|
789 | padding: 6px 10px; |
---|
790 | color: #fff !important; |
---|
791 | border: none; |
---|
792 | border-radius: 4px; |
---|
793 | text-shadow: 1px 1px 1px #707070; |
---|
794 | cursor: pointer; |
---|
795 | background: #a9a9a9; /* Old browsers */ |
---|
796 | background: -moz-linear-gradient(top, #a9a9a9 0%, #767676 100%); /* FF3.6+ */ |
---|
797 | background: -webkit-linear-gradient(top, #a9a9a9 0%,#767676 100%); /* Chrome10+,Safari5.1+ */ |
---|
798 | background: -o-linear-gradient(top, #a9a9a9 0%,#767676 100%); /* Opera 11.10+ */ |
---|
799 | background: -ms-linear-gradient(top, #a9a9a9 0%,#767676 100%); /* IE10+ */ |
---|
800 | background: linear-gradient(to bottom, #a9a9a9 0%,#767676 100%); /* W3C */ |
---|
801 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#767676',GradientType=0 ); /* IE6-9 */ |
---|
802 | } |
---|
803 | |
---|
804 | .bt04:hover { |
---|
805 | opacity: 0.75; |
---|
806 | filter:alpha(opacity=75); |
---|
807 | text-decoration: none !important; |
---|
808 | } |
---|
809 | .bt04:active { |
---|
810 | opacity: 1; |
---|
811 | filter:alpha(opacity=100); |
---|
812 | text-decoration: none !important; |
---|
813 | background: #767676; /* Old browsers */ |
---|
814 | background: -moz-linear-gradient(top, #767676 0%, #707070 100%); /* FF3.6+ */ |
---|
815 | background: -webkit-linear-gradient(top, #767676 0%,#707070 100%); /* Chrome10+,Safari5.1+ */ |
---|
816 | background: -o-linear-gradient(top, #767676 0%,#707070 100%); /* Opera 11.10+ */ |
---|
817 | background: -ms-linear-gradient(top, #767676 0%,#707070 100%); /* IE10+ */ |
---|
818 | background: linear-gradient(to bottom, #767676 0%,#707070 100%); /* W3C */ |
---|
819 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#707070',GradientType=0 ); /* IE6-9 */ |
---|
820 | } |
---|