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

Revision 23621, 9.9 KB checked in by miyamura, 12 years ago (diff)

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