source: branches/version-2_12-multilang/html/user_data/packages/default_en/css/bloc.css @ 22182

Revision 22182, 13.0 KB checked in by h_yoshimoto, 11 years ago (diff)

#1996 テキストボタン画像のCSS化を一旦コミット

Line 
1@charset "utf-8";
2
3/************************************************
4 ブロック用
5************************************************ */
6/*** 目次 ***
7
8▼ブロック共通
9リスト
10タイトル
11ヘッダー上、フッター下のブロックエリア
12
13▼各機能ブロックの指定
14-新着情報
15-現在のカゴの中
16-カテゴリ
17-ガイドリンク
18-ログイン(サイド用)
19-検索
20-カレンダー
21-おすすめ商品
22    *メインカラム用 1カラム時 [one_maincolumn]
23    *メインカラム用 2カラム時 [two_maincolumn_left]
24                              [two_maincolumn_right]
25    *メインカラム用 3カラム時 [three_maincolumn]
26    *サイドカラム用           [side_column]
27    *商品詳細のオススメ商品   [whobought_area]
28 */
29
30
31/* ==============================================
32ブロック共通
33/* ============================================= */
34#container .block_body {
35    background-color: #fff;
36}
37.side_column {
38    overflow-x: hidden; /* IE6 表示乱れ防止 */
39}
40.side_column .block_outer {
41    margin: 10px 7%;
42}
43.side_column .block_body,
44.main_column .block_body {
45    border: solid 1px #ccc;
46    border-top: none;
47}
48.side_column .block_body .box {
49    border: solid 1px #ccc;
50    width: 145px;
51}
52.main_column .block_outer {
53    margin-bottom: 20px;
54}
55
56
57/* リスト
58----------------------------------------------- */
59/* ログイン 検索条件 */
60#container .block_outer .block_body dl.formlist {
61    margin-bottom: 8px;
62}
63#container .block_outer .block_body dl.formlist dd {
64    margin-bottom: 5px;
65}
66#container .block_outer .block_body dl.formlist dt {
67    margin-bottom: 3px;
68    padding-left: 15px;
69    background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
70    font-size: 0.917em;
71}
72#container .block_outer .block_body dl.formlist span {
73    vertical-align: top;
74}
75
76
77/* タイトル
78----------------------------------------------- */
79/* タイトルの背景 白 */
80#login_area h2,
81#search_area h2,
82#calender_area h2,
83#cart_area h2,
84#cart h2 {
85    vertical-align: middle;
86    padding: 7px 0 0 10px;
87    border-style: solid;
88    border-color: #f90 #ccc #ccc;
89    border-width: 1px 1px 1px;
90    font-size: 14px;
91    color: #ec5504;
92    text-shadow: 1px 1px 1px #fff;
93    box-shadow: 0 0 1px 1px #fff inset;
94background: #ffffff; /* Old browsers */
95background: -moz-linear-gradient(top,  #ffffff 0%, #e3e3e3 100%); /* FF3.6+ */
96background: -webkit-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
97background: -o-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* Opera 11.10+ */
98background: -ms-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* IE10+ */
99background: linear-gradient(to bottom,  #ffffff 0%,#e3e3e3 100%); /* W3C */
100filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */   
101}
102
103#login_area h2 img,
104#search_area h2 img,
105#calender_area h2 img,
106#cart_area h2 img,
107#cart h2 img {
108    float: left;
109    position: relative;
110    top: -1px;
111    margin-bottom: 6px;
112}
113
114
115#login_area h2 .title,
116#search_area h2 .title,
117#calender_area h2 .title,
118#cart_area h2 .title,
119#cart h2 .title {
120    display: block;
121    padding: 0 0 7px 30px;
122    line-height: 1.4;
123}
124
125#category_area h2 {
126    border-top: solid 1px #f90;
127    border-bottom: 1px solid #ccc;
128    padding: 5px 0 8px 10px;
129    font-size: 14px;
130    box-shadow: 0 0 1px 1px #fff inset;
131background: #ffffff; /* Old browsers */
132background: -moz-linear-gradient(top,  #ffffff 0%, #e3e3e3 100%); /* FF3.6+ */
133background: -webkit-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
134background: -o-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* Opera 11.10+ */
135background: -ms-linear-gradient(top,  #ffffff 0%,#e3e3e3 100%); /* IE10+ */
136background: linear-gradient(to bottom,  #ffffff 0%,#e3e3e3 100%); /* W3C */
137filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */   
138}
139
140/* タイトルの背景 オレンジ */
141#recommend_area h2,
142#news_area h2 {
143    padding: 5px 0 8px 10px;
144    border-style: solid;
145    border-color: #f90 #ccc #ccc;
146    border-width: 1px 1px 1px;
147    box-shadow: 0 0 1px 1px #fff inset;
148background: #fef3d8; /* Old browsers */
149background: -moz-linear-gradient(top,  #fef3d8 0%, #fedd7e 100%); /* FF3.6+ */
150background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef3d8), color-stop(100%,#fedd7e)); /* Chrome,Safari4+ */
151background: -webkit-linear-gradient(top,  #fef3d8 0%,#fedd7e 100%); /* Chrome10+,Safari5.1+ */
152background: -o-linear-gradient(top,  #fef3d8 0%,#fedd7e 100%); /* Opera 11.10+ */
153background: -ms-linear-gradient(top,  #fef3d8 0%,#fedd7e 100%); /* IE10+ */
154background: linear-gradient(to bottom,  #fef3d8 0%,#fedd7e 100%); /* W3C */
155filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef3d8', endColorstr='#fedd7e',GradientType=0 ); /* IE6-9 */
156}
157
158
159/* ==============================================
160▼ヘッダー上、フッター下のブロックエリア
161=============================================== */
162div#topcolumn {
163    margin: 0px;
164    clear: both;
165}
166div#bottomcolumn {
167    margin: 0px;
168    clear: both;
169}
170
171
172/* ***********************************************
173▼各機能ブロックの指定
174/*********************************************** */
175
176/* ===============================================
177▼新着情報
178=============================================== */
179#news_area .block_body {
180    padding: 10px;
181}
182#news_area .news_contents {
183    padding-right: 10px;
184    max-height: 260px;
185    height: auto !important;
186    height: 260px;
187    overflow: auto;
188    overflow-y: scroll;
189}
190
191#news_area dl.newslist {
192    background: url("../img/background/line_dot_01.gif") repeat-x bottom;
193}
194#news_area dl.newslist dt {
195    margin-bottom: 5px;
196}
197#news_area dl.newslist dd {
198    margin-bottom: 10px;
199    padding-bottom: 10px;
200}
201#news_area dl.end {
202    padding: 10px 0;
203    background: url("") no-repeat bottom;
204}
205
206
207/* ===============================================
208▼現在のカゴの中
209=============================================== */
210#cart_area .information {
211    padding: 10px;
212}
213#cart_area .postage {
214    margin-top: 10px;
215    padding-top: 10px;
216    background: url("../img/background/line_dot_01.gif") repeat-x top;
217}
218#cart_area .postage .point_announce {
219    padding: 2px 0 2px 20px;
220    background: url("../img/icon/ico_price.gif") no-repeat left top;
221}
222#cart_area .btn {
223    padding: 10px 0;
224    background: url("../img/background/line_dot_01.gif") repeat-x top #f7f7e6;
225    text-align: center;
226}
227
228
229/* ===============================================
230▼カテゴリ
231=============================================== */
232#category_area .block_body {
233    background-color: #fffaf0;
234}
235
236#category_area li {
237    padding-left: 5px;
238}
239#category_area li.level1 {
240    border-bottom: solid 1px #ccc;
241}
242#category_area li.level1 p {
243    padding-left: 20px;
244    margin: 7px 3px;
245}
246#category_area li.level1 p {
247    background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat;
248}
249#category_area li.level1 li p {
250    background: url("../img/icon/ico_level.gif") 7px 7px no-repeat;
251}
252#category_area li a {
253    display: block;
254    padding: 0;
255}
256a.onlink:link {
257    color: #f00;
258    text-decoration: underline;
259}
260a.onlink:visited {
261    color: #f00;
262}
263a.onlink:hover {
264    color: #f00;
265}
266
267
268/* ===============================================
269▼ガイドリンク
270=============================================== */
271#guide_area {
272    margin-top: 1em;
273    border: none;
274}
275#guide_area li {
276    margin-bottom: 5px;
277}
278ul.button_like li {
279    margin: 0;
280    border: 1px solid #ccc;
281background: #fdfdfd; /* Old browsers */
282background: -moz-linear-gradient(top,  #fdfdfd 0%, #f1f1f1 91%, #eeeeee 100%); /* FF3.6+ */
283background: -webkit-linear-gradient(top,  #fdfdfd 0%,#f1f1f1 91%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
284background: -o-linear-gradient(top,  #fdfdfd 0%,#f1f1f1 91%,#eeeeee 100%); /* Opera 11.10+ */
285background: -ms-linear-gradient(top,  #fdfdfd 0%,#f1f1f1 91%,#eeeeee 100%); /* IE10+ */
286background: linear-gradient(to bottom,  #fdfdfd 0%,#f1f1f1 91%,#eeeeee 100%); /* W3C */
287filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
288}
289ul.button_like li a {
290    margin: 0;
291    padding: 10px 15px 10px 10px;
292    display: block;
293    background: url("../img/icon/ico_arrow_02.gif") no-repeat right;
294    text-decoration: none;
295    outline: none;
296    box-shadow: 0 0 1px 1px #fff inset;
297}
298
299
300/* ===============================================
301▼ログイン(サイド用)
302※ヘッダー用はbloc_alpha.css内に記述
303=============================================== */
304#container div#login_area .block_body {
305    padding: 10px;
306}
307
308#container div#login_area .block_body p {
309    margin-bottom: 5px;
310}
311
312#container div#login_area .block_body .btn {
313    text-align: center;
314}
315#container .login_area dl.formlist {
316    margin-bottom: 8px;
317    width: 420px;
318}
319#container .login_area dl.formlist dt {
320    margin-bottom: 3px;
321    padding-left: 15px;
322    color: #333;
323    background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
324    width: 90px;
325    float: left;
326    font-size: 0.917em;
327}
328#container .login_area dl.formlist dd {
329    margin-bottom: 5px;
330    float: right;
331    width: 300px;
332    vertical-align: bottom;
333    text-align: left;
334}
335#container div#login_area .block_body .mini {
336    margin-top: 5px;
337}
338
339
340/* ===============================================
341▼検索
342=============================================== */
343div#search_area .block_body {
344    padding: 10px;
345}
346div#search_area .block_body .btn {
347    text-align: center;
348}
349
350
351/* ===============================================
352▼カレンダー
353=============================================== */
354#calender_area {
355    background-color: transparent;
356    border: none;
357}
358#calender_area .block_body {
359    padding: 10px 0;
360    background-color: #f1f9fc;
361}
362#calender_area table {
363    background: #fff;
364    border: none;
365    width: 150px;
366    margin: 0 auto 5px;
367    font-size: 0.917em;
368}
369#calender_area table td {
370    padding: 1px 3px;
371    border-top: 1px solid #ccc;
372    border-right: none;
373    text-align: center;
374}
375#calender_area th {
376    padding: 1px 3px;
377    background: #fff;
378    border: none;
379    text-align: center;
380}
381#calender_area table .month {
382    margin-bottom: 5px;
383    padding-left: 12px;
384    background: url("../img/icon/ico_arrow_04.gif") no-repeat left;
385    font-size: 1.05em;
386}
387#calender_area .off {
388    color: #f00;
389}
390#calender_area .today {
391    background-color: #FFF99D;
392    font-weight: bold;
393}
394#calender_area .information {
395    margin-left: 10px;
396    font-size: 0.917em;
397}
398
399
400/* ===============================================
401▼おすすめ商品
402=============================================== */
403/*
404   tplファイルのマークアップが同じ項目
405   メインカラム用 2カラム時 [two_maincolumn_left]
406                            [two_maincolumn_right]
407   メインカラム用 3カラム時 [three_maincolumn]
408   サイドカラム用           [side_column]
409   商品詳細のオススメ商品   [whobought_area]
410=============================================== */
411/* 共通
412----------------------------------------------- */
413#recommend_area .block_body,
414#whobought_area .product_item {
415    margin-bottom: 10px;
416    padding: 10px 0 10px;
417    border: none;
418    background: url("../img/background/line_dot_01.gif") repeat-x bottom;
419}
420
421#recommend_area .block_body p,
422#whobought_area .product_item p {
423    margin: 0 0 5px 0;
424}
425
426#recommend_area .block_body img,
427#whobought_area .product_item img {
428    margin: 0 5px 0 0;
429}
430
431#recommend_area .block_body h3,
432#whobought_area .product_item h3 {
433    font-size: 100%;
434    font-weight: normal;
435}
436
437/* サイドカラム用 */
438.side_column #recommend_area .product_item {
439    margin-bottom: 10px;
440}
441
442
443/* 画像
444----------------------------------------------- */
445/* メインカラム用 */
446.main_column #recommend_area .block_body .productImage,
447#whobought_area .product_item .productImage {
448    margin-bottom: 10px;
449    float: left;
450    width: 90px;
451}
452/* サイドカラム用 */
453.side_column #recommend_area .block_body .productImage {
454    float: none;
455    text-align: center;
456    width: auto;
457}
458
459
460/* 左右の振り分け
461----------------------------------------------- */
462.main_column #recommend_area .product_item,
463#whobought_area .product_item {
464    float: left;
465    width: 47.5%;
466    padding-left: 1%;
467    padding-right: 1%;
468}
469
470
471/* 商品説明テキスト
472----------------------------------------------- */
473/* メインカラム用 1カラム時*/
474#one_maincolumn #recommend_area .block_body .productContents {
475    float: right;
476    width: 74%;
477}
478
479/* メインカラム用 2カラム時*/
480#two_maincolumn_right #recommend_area .block_body .productContents,
481#two_maincolumn_left #recommend_area .block_body .productContents,
482#two_maincolumn_right #whobought_area .productContents,
483#two_maincolumn_left #whobought_area .productContents {
484    float: right;
485    width: 74%;
486}
487
488/* メインカラム用 3カラム時*/
489#three_maincolumn #recommend_area .block_body .productContents,
490#three_maincolumn #whobought_area .productContents {
491    float: right;
492    width: 67%;
493}
494
495/* サイドカラム用 */
496.side_column #recommend_area .block_body .productContents {
497    clear: both;
498}
Note: See TracBrowser for help on using the repository browser.