source: branches/version-2_11-dev/html/user_data/packages/default/css/bloc.css @ 21410

Revision 21410, 10.9 KB checked in by Seasoft, 12 years ago (diff)

2.12系へマイルストーン変更となったチケット分を差し戻し
r21326 #1536
r21325 #1528
r21324 #1547,#1546
r21323 #1546
r21322 #1543
r21321 #1536
r21320 #1536
r21319 #1544
r21318 #1521,#1522
r21317 #1431
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 .bloc_body {
35    background-color: #fff;
36}
37.side_column {
38    overflow-x: hidden; /* IE6 表示乱れ防止 */
39}
40.side_column .bloc_outer {
41    margin: 10px 7%;
42}
43.side_column .bloc_body ,
44.main_column .bloc_body {
45    border: solid 1px #ccc;
46    border-top: none;
47}
48.side_column .bloc_body .box {
49    border: solid 1px #ccc;
50    width: 145px;
51}
52.main_column .bloc_outer {
53    margin-bottom: 20px;
54}
55
56
57/* リスト
58----------------------------------------------- */
59/* ログイン 検索条件 */
60#container .bloc_outer .bloc_body dl.formlist {
61    margin-bottom: 8px;
62}
63#container .bloc_outer .bloc_body dl.formlist dd {
64    margin-bottom: 5px;
65}
66#container .bloc_outer .bloc_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: 90%;
71}
72#container .bloc_outer .bloc_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    padding: 5px 0 8px 10px;
86    border-style: solid;
87    border-color: #f90 #ccc #ccc;
88    border-width: 1px 1px 0;
89    background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
90    font-size: 14px;
91}
92#category_area h2 {
93    border-top: solid 1px #f90;
94    background: url('../img/background/bg_tit_bloc_01.jpg') repeat-x left bottom;
95    padding: 5px 0 8px 10px;
96    font-size: 14px;
97}
98
99/* タイトルの背景 オレンジ */
100#recommend_area h2 ,
101#news_area h2 {
102    padding: 5px 0 8px 10px;
103    border-style: solid;
104    border-color: #f90 #ccc #ccc;
105    border-width: 1px 1px 0;
106    background: url('../img/background/bg_btn_bloc_02.jpg') repeat-x left bottom #fef3d8;
107}
108
109
110/* ==============================================
111▼ヘッダー上、フッター下のブロックエリア
112=============================================== */
113div#topcolumn {
114    margin:0px;
115    clear:both;
116}
117div#bottomcolumn {
118    margin:0px;
119    clear: both;
120}
121
122
123/* ***********************************************
124▼各機能ブロックの指定
125/*********************************************** */
126
127/* ===============================================
128▼新着情報
129=============================================== */
130#news_area .bloc_body {
131    padding: 10px;
132}
133#news_area .news_contents {
134    padding-right: 10px;
135    max-height:260px;
136    height: auto !important;
137    height: 260px;
138    overflow:auto;
139    overflow-y:scroll;
140}
141
142#news_area dl.newslist {
143    background: url("../img/background/line_dot_01.gif") repeat-x bottom;
144}
145#news_area dl.newslist dt {
146    margin-bottom: 5px;
147}
148#news_area dl.newslist dd {
149    margin-bottom: 10px;
150    padding-bottom: 10px;
151}
152#news_area dl.end {
153    padding: 10px 0;
154    background: url("") no-repeat bottom;
155}
156
157
158/* ===============================================
159▼現在のカゴの中
160=============================================== */
161#cart_area .information {
162    padding: 10px;
163}
164#cart_area .postage {
165    margin-top: 10px;
166    padding-top: 10px;
167    background: url("../img/background/line_dot_01.gif") repeat-x top;
168}
169#cart_area .postage .point_announce {
170    padding: 2px 0 2px 20px;
171    background: url("../img/icon/ico_price.gif") no-repeat left top;
172}
173#cart_area .btn {
174    padding: 10px 0;
175    background: url("../img/background/line_dot_01.gif") repeat-x top #f7f7e6;
176    text-align: center;
177}
178
179
180/* ===============================================
181▼カテゴリー
182=============================================== */
183#category_area .bloc_body{
184    background-color: #fffaf0;
185}
186
187#category_area li{
188    padding-left: 5px;
189}
190#category_area li.level1{
191    border-bottom: solid 1px #ccc;
192}
193#category_area li.level1 p{
194    padding-left: 20px;
195    margin: 7px 3px;
196}
197#category_area li.level1 p {
198    background: url("../img/icon/ico_arrow_01.gif") 2px 3px no-repeat;
199}
200#category_area li.level1 li p {
201    background: url("../img/icon/ico_level.gif") 7px 7px no-repeat;
202}
203#category_area li a {
204    display: block;
205    padding: 0;
206}
207a.onlink:link {
208    color: #f00;
209    text-decoration: underline;
210}
211a.onlink:visited {
212    color: #f00;
213}
214a.onlink:hover {
215    color: #f00;
216}
217
218
219/* ===============================================
220▼ガイドリンク
221=============================================== */
222#guide_area {
223    margin-top: 1em;
224    border: none;
225}
226#guide_area li{
227    margin-bottom: 5px;
228    letter-spacing: -0.05em;
229}
230ul.button_like li {
231    margin: 0;
232    padding: 0 0 1px 0;
233    background: url("../img/background/bg_btn_list.jpg") bottom repeat-x;
234}
235ul.button_like li a {
236    margin: 0;
237    padding: 10px 15px 10px 10px;
238    border: 1px solid;
239    border-bottom: none;
240    border-color: #ccc;
241    display: block;
242    background: url("../img/icon/ico_arrow_02.gif") no-repeat right;
243    text-decoration: none;
244    outline: none;
245}
246
247
248/* ===============================================
249▼ログイン（サイド用）
250※ヘッダー用はbloc_alpha.css内に記述
251=============================================== */
252#container div#login_area .bloc_body {
253    padding: 10px;
254}
255
256#container div#login_area .bloc_body p {
257    margin-bottom: 5px;
258}
259
260#container div#login_area .bloc_body .btn {
261    text-align: center;
262}
263#container .login_area dl.formlist {
264    margin-bottom: 8px;
265    width: 420px;
266}
267#container .login_area dl.formlist dt {
268    margin-bottom: 3px;
269    padding-left: 15px;
270    color: #333;
271    background: url("../img/icon/ico_arrow_03.gif") no-repeat left;
272    width: 90px;
273    float: left;
274    font-size: 90%;
275}
276#container .login_area dl.formlist dd {
277    margin-bottom: 5px;
278    float: right;
279    width: 300px;
280    vertical-align: bottom;
281    text-align: left;
282}
283#container div#login_area .bloc_body .mini {
284    margin-top: 5px;
285    letter-spacing: -0.01em;
286}
287
288
289/* ===============================================
290▼検索
291=============================================== */
292div#search_area .bloc_body {
293    padding: 10px;
294}
295div#search_area .bloc_body .btn {
296    text-align: center;
297}
298
299
300/* ===============================================
301▼カレンダー
302=============================================== */
303#calender_area {
304    background-color: transparent;
305    border: none;
306}
307#calender_area .bloc_body {
308    padding: 10px 0;
309    background-color: #f1f9fc;
310}
311#calender_area table {
312    background: #fff;
313    border: none;
314    width: 150px;
315    margin: 0 auto 5px;
316    font-size: 90%;
317}
318#calender_area table td {
319    padding: 1px 3px;
320    border-top: 1px solid #ccc;
321    border-right: none;
322    text-align:center;
323}
324#calender_area th {
325    padding: 1px 3px;
326    background: #fff;
327    border: none;
328    text-align: center;
329}
330#calender_area table .month {
331    margin-bottom: 5px;
332    padding-left: 12px;
333    background: url("../img/icon/ico_arrow_04.gif") no-repeat left;
334    font-size: 120%;
335}
336#calender_area .off {
337    color: #f00;
338}
339#calender_area .information {
340    margin-left: 10px;
341    font-size: 90%;
342}
343
344
345/* ===============================================
346▼おすすめ商品
347=============================================== */
348/*
349   tplファイルのマークアップが同じ項目
350   メインカラム用 2カラム時 [two_maincolumn_left]
351                            [two_maincolumn_right]
352   メインカラム用 3カラム時 [three_maincolumn]
353   サイドカラム用           [side_column]
354   商品詳細のオススメ商品   [whobought_area]
355=============================================== */
356/* 共通
357----------------------------------------------- */
358#recommend_area .bloc_body ,
359#whobought_area .whobought_bloc {
360    margin-bottom: 10px;
361    padding: 10px 0 10px;
362    border: none;
363    background: url("../img/background/line_dot_01.gif") repeat-x bottom;
364}
365
366#recommend_area .bloc_body p ,
367#whobought_area .whobought_bloc p {
368    margin: 0 0 5px 0;
369}
370
371#recommend_area .bloc_body img ,
372#whobought .whobought_bloc img {
373    margin: 0 5px 0 0;
374}
375
376#recommend_area .bloc_body h3 ,
377#whobought_area .whobought_bloc h3 {
378    font-size: 100%;
379    font-weight: normal;
380}
381
382/* サイドカラム用 */
383.side_column #recommend_area .product_item {
384    margin-bottom: 10px;
385}
386
387
388/* 画像
389----------------------------------------------- */
390/* メインカラム用 */
391.main_column #recommend_area .bloc_body .productImage,
392#whobought_area .whobought_bloc .productImage {
393    margin-bottom: 10px;
394    float: left;
395    width: 90px;
396}
397/* サイドカラム用 */
398.side_column #recommend_area .bloc_body .productImage {
399    float: none;
400    text-align: center;
401    width: auto;
402}
403
404
405/* 左右の振り分け
406----------------------------------------------- */
407.main_column #recommend_area .product_item,
408#whobought_area .whobought_bloc .whobought_left {
409    float: left;
410    width: 47.5%;
411}
412#whobought_area .whobought_bloc .whobought_right {
413    float: right;
414    width: 47.5%;
415}
416
417
418/* 商品説明テキスト
419----------------------------------------------- */
420/* メインカラム用 1カラム時*/
421#one_maincolumn #recommend_area .bloc_body .productContents {
422    float: right;
423    width: 74%;
424}
425
426/* メインカラム用 2カラム時*/
427#two_maincolumn_right #recommend_area .bloc_body .productContents ,
428#two_maincolumn_left #recommend_area .bloc_body .productContents ,
429#two_maincolumn_right #whobought_area .whobought_bloc .productContents ,
430#two_maincolumn_left #whobought_area .whobought_bloc .productContents {
431    float: right;
432    width: 74%;
433}
434
435/* メインカラム用 3カラム時*/
436#three_maincolumn #recommend_area .bloc_body .productContents ,
437#three_maincolumn #whobought_area .whobought_bloc .productContents {
438    float: right;
439    width: 67%;
440}
441
442/* サイドカラム用 */
443.side_column #recommend_area .bloc_body .productContents {
444    clear: both;
445}
Note: See TracBrowser for help on using the repository browser.