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

Revision 20916, 14.5 KB checked in by Seasoft, 13 years ago (diff)

#1292 (商品詳細画面にメーカー名が出力されない)
#1294 (ソースを読みやすくする)
#1295 (通常価格も赤色となっている)

Line 
1@charset "utf-8";
2
3/************************************************
4 各ページコンテンツ用
5************************************************ */
6/* ==============================================
7▼TOP
8=============================================== */
9/* メインイメージ
10----------------------------------------------- */
11#main_image {
12    margin-bottom: 10px;
13    text-align: center;
14}
15
16/* ==============================================
17▼下層
18=============================================== */
19/* ==============================================
20▼ガイド
21=============================================== */
22/* ◎◎について
23----------------------------------------------- */
24div#undercolumn_aboutus {
25}
26
27/* 特定商取引法
28----------------------------------------------- */
29div#undercolumn_order {
30}
31
32/* お問い合わせ
33----------------------------------------------- */
34div#undercolumn_contact {
35    margin: 0 auto;
36    width: 100%;
37}
38
39.zipimg img {
40    vertical-align: middle;
41}
42
43
44/* ==============================================
45▼MYページ
46=============================================== */
47/* 共通設定
48----------------------------------------------- */
49div#mypagecolumn {
50    width: 100%;
51}
52
53div#mynavi_area {
54    width: 100%;
55}
56
57div#mycontents_area {
58    width: 100%;
59}
60div#mynavi_area .mynavi_list {
61    margin-bottom: 20px;
62    width: 100%;
63}
64div#mynavi_area .mynavi_list li {
65    margin:0 15px 5px 0;
66    padding-left: 15px;
67    float: left;
68    background: url('../img/icon/ico_arrow_01.gif') no-repeat left ;
69    font-size: 120%;
70}
71
72div#mynavi_area div.point_announce {
73    margin-bottom: 30px;
74    padding: 10px;
75    border: solid 1px #ffcc62;
76    background-color: #fffaf0;
77}
78div#mynavi_area div.point_announce p {
79    padding-left: 20px;
80    background: url('../img/icon/ico_point.gif') no-repeat left ;
81}
82
83div#mycontents_area p.inforamtion {
84    margin-bottom: 20px;
85}
86
87div#mypagecolumn h4 {
88    margin: 10px auto;
89    border-bottom: 1px solid #999;
90    text-align: left;
91    font-size: 120%;
92}
93
94
95/* 購入履歴一覧/詳細
96----------------------------------------------- */
97div#mycontents_area div.mycondition_area {
98    margin: 0 auto 20px 0;
99    padding: 10px;
100    border: solid 1px #ccc;
101    width: 97%;
102    background: #f9f9f9;
103
104}
105div#mycontents_area div.mycondition_area p {
106    float: left;
107}
108div#mycontents_area div.mycondition_area .btn {
109    width: 160px;
110    margin-top: 15px;
111    float: right;
112}
113.add_address {
114    margin-bottom: 20px;
115}
116
117
118/* 会員登録内容変更/退会
119----------------------------------------------- */
120div#mycontents_area .message_area {
121    margin: 30px auto;
122    padding: 30px;
123    border: 1px solid #ccc;
124    text-align: center;
125}
126
127div#mycontents_area .message_area p {
128    margin-bottom: 20px;
129}
130
131/* ==============================================
132▼会員登録
133=============================================== */
134div#undercolumn_entry {
135    width: 100%;
136}
137
138div#undercolumn_entry .kiyaku_text {
139    margin: 20px auto;
140    padding: 10px;
141    border: solid 1px #ccc;
142    width: 94%;
143    background: #fff;
144}
145
146
147/* ==============================================
148▼ログイン
149=============================================== */
150div#undercolumn_login {
151    margin: 0 auto;
152    width: 100%;
153}
154
155div#undercolumn_login .login_area {
156    margin-bottom: 30px;
157}
158
159div#undercolumn_login .login_area .inputbox {
160    margin: 15px auto 15px auto;
161    padding: 15px 20px 10px 20px;
162    background: #f0f0f0;
163}
164
165div#undercolumn_login .login_area .inputbox .btn_area {
166    margin-top: 0;
167}
168
169
170/* ==============================================
171▼エラー
172=============================================== */
173div#undercolumn_error .message_area {
174    width:80%;
175    margin: 30px auto;
176    padding: 30px;
177    border: 1px solid #ccc;
178    text-align: center;
179}
180
181div#undercolumn_error .message_area .error {
182    padding: 120px 0;
183}
184
185
186/* ==============================================
187▼商品一覧
188=============================================== */
189/* ページ送り
190----------------------------------------------- */
191.pagenumber_area {
192    padding-bottom: 10px;
193    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
194}
195.pagecond_area {
196    margin-bottom: 20px;
197    padding: 10px;
198}
199.pagenumber_area {
200    margin: 20px 0;
201}
202.pagecond_area {
203    border: 1px solid #ccc;
204}
205.pagenumber_area .navi {
206    width: 100%;
207    text-align: left;
208}
209.pagenumber_area .navi li {
210    display: inline;
211}
212.pagenumber_area .change {
213    float: right;
214    text-align: right;
215    white-space: nowrap;
216}
217
218
219/* レイアウト
220----------------------------------------------- */
221div.list_area {
222    padding: 0 0 30px 0;
223    width: 100%;
224    overflow: auto;
225}
226
227div.listphoto {
228    float: left;
229}
230
231/* メインカラム用 1カラム時*/
232#one_maincolumn div.listrightbloc {
233    float: right;
234    width: 74%;
235}
236
237/* メインカラム用 2カラム時*/
238#two_maincolumn_right div.listrightbloc ,
239#two_maincolumn_left div.listrightbloc {
240    float: right;
241    width: 80%;
242}
243
244/* メインカラム用 3カラム時*/
245#three_maincolumn div.listrightbloc {
246    float: right;
247    width: 74%;
248}
249
250
251/* 商品情報 各種設定
252----------------------------------------------- */
253/* 商品ステータス */
254div.listrightbloc ul.status_icon {
255    margin-bottom: 10px;
256    width: 100%;
257}
258div.listrightbloc ul.status_icon li {
259    margin-right: 5px;
260    float: left;
261}
262
263/* 商品名 */
264div.listrightbloc h3 {
265    font-weight: bold;
266    font-size: 120%;
267}
268
269/* コメント */
270div.listrightbloc .listcomment {
271    margin: 0 0 10px 0;
272    text-align: left;
273}
274
275/* 商品詳細を見る */
276div.listrightbloc .detail_btn {
277    margin-bottom: 20px;
278}
279
280/* 価格 */
281div.listrightbloc .pricebox {
282    margin: 0 0 10px 0;
283}
284
285/* 買い物かご */
286div.listrightbloc .cart_area {
287    padding: 10px;
288    border: 1px solid #cef0f4;
289    background-color: #ecf5ff;
290    width: 94%;
291}
292
293/* 規格 */
294div.listrightbloc .classlist {
295    margin-bottom: 10px;
296    padding-bottom: 10px;
297    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
298}
299div.listrightbloc dl {
300    width: 100%;
301}
302div.listrightbloc dt {
303    display: inline-block;
304    vertical-align: top;
305}
306div.listrightbloc dd {
307    padding-bottom: 10px;
308    display: inline-block;
309}
310div.listrightbloc dd p.attention {
311    margin-top: 5px;
312}
313
314/* カゴに入れる */
315div.listrightbloc .cartin {
316    margin: 0;
317    float :right;
318}
319div.listrightbloc .cartin .quantity {
320    padding: 3px 10px 0 0;
321    width: 150px;
322    float :left;
323    text-align: right;
324}
325div.listrightbloc .cartin .quantity .box {
326    width: 70px;
327}
328div.listrightbloc .cartin_btn {
329    width: 160px;
330    float :left;
331}
332
333
334/* ==============================================
335▼商品詳細
336=============================================== */
337/* レイアウト
338
339    tplファイルのマークアップが同じ項目
340    *1カラム時 [one_maincolumn]
341    *2カラム時 [two_maincolumn_left]
342               [two_maincolumn_right]
343    *3カラム時 [three_maincolumn]
344
345----------------------------------------------- */
346#detailarea ,
347.sub_area {
348    margin-bottom: 20px;
349    width: 100%;
350}
351
352/* レイアウト
353----------------------------------------------- */
354/* 1カラム用 */
355#one_maincolumn div#detailphotobloc {
356    width: 37%;
357    float: left;
358}
359#one_maincolumn #detailrightbloc {
360    width: 63%;
361    float: right;
362}
363#one_maincolumn div.subtext {
364    margin-bottom: 20px;
365    float: left;
366    width: 69%;
367}
368#one_maincolumn div.subphotoimg {
369    float: right;
370    width: 25%;
371    text-align: right;
372}
373#one_maincolumn p.subtext {
374    margin-bottom: 20px;
375}
376
377/* 2カラム用 */
378#two_maincolumn_left div#detailphotobloc ,
379#two_maincolumn_right div#detailphotobloc {
380    float: left;
381    width: 37%;
382}
383#two_maincolumn_left #detailrightbloc ,
384#two_maincolumn_right #detailrightbloc {
385    float: right;
386    width: 63%;
387}
388#two_maincolumn_left div.subtext,
389#two_maincolumn_right div.subtext {
390    margin-bottom: 20px;
391    float: left;
392    width: 73%;
393}
394#two_maincolumn_left p.subtext,
395#two_maincolumn_right p.subtext {
396    margin-bottom: 20px;
397}
398#two_maincolumn_left div.subphotoimg ,
399#two_maincolumn_right div.subphotoimg {
400    float: right;
401    width: 25%;
402    text-align: right;
403}
404
405/* 3カラム用 */
406#three_maincolumn div#detailphotobloc {
407    float: left;
408    width: 49%;
409}
410#three_maincolumn #detailrightbloc {
411    float: right;
412    width: 50%;
413}
414#three_maincolumn div.subtext {
415    margin-bottom: 20px;
416    float: left;
417    width: 63%;
418}
419#three_maincolumn p.subtext {
420    margin-bottom: 20px;
421}
422#three_maincolumn div.subphotoimg {
423    float: right;
424    width: 35%;
425    text-align: right;
426}
427
428/* 商品情報 各種設定
429----------------------------------------------- */
430#detailrightbloc h2 {
431    margin: 0 0 10px 0;
432    padding: 0 0 15px 0;
433    color: #666;
434    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
435    font-weight: bold;
436    font-size: 160%;
437}
438#detailrightbloc .point,
439#detailrightbloc .relative_cat {
440    margin: 0 0 10px 0;
441    padding: 0 0 10px 0;
442    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
443}
444#detailrightbloc .main_comment {
445    margin-bottom: 20px;
446}
447
448/* 商品コード */
449#detailrightbloc .product_code dt,
450#detailrightbloc .product_code dd {
451    display: inline;
452}
453
454/* 商品ステータス */
455#detailrightbloc ul.status_icon {
456    margin-bottom: 10px;
457    width: 100%;
458}
459#detailrightbloc ul.status_icon li {
460    margin-right: 5px;
461    margin-bottom: 3px;
462    float: left;
463}
464
465/* 通常価格 */
466#detailrightbloc .normal_price dt,
467#detailrightbloc .normal_price dd {
468    display: inline;
469}
470
471/* 販売価格 */
472#detailrightbloc .sale_price dt,
473#detailrightbloc .sale_price dd {
474    display: inline;
475}
476
477/* ポイント */
478#detailrightbloc .point dt,
479#detailrightbloc .point dd {
480    display: inline;
481}
482
483/* 規格 */
484#detailrightbloc div.classlist {
485    margin-bottom: 10px;
486    padding-bottom: 10px;
487    width: 100%;
488    background: url("../img/background/line_dot_02.gif") repeat-x bottom ;
489}
490#detailrightbloc .classlist {
491    margin-bottom: 5px;
492}
493#detailrightbloc ul {
494    margin-bottom: 10px;
495    width: 100%;
496}
497#detailrightbloc ul li {
498    vertical-align: top;
499    float: left;
500}
501
502/* メーカー */
503#detailrightbloc .maker dt,
504#detailrightbloc .maker dd {
505    display: inline;
506}
507
508/* メーカーURL */
509#detailrightbloc .comment1 dt,
510#detailrightbloc .comment1 dd {
511    display: inline;
512}
513
514/* 関連カテゴリ */
515#detailrightbloc .relative_cat dd {
516    margin-left: 1em;
517}
518
519/* 買い物かご */
520#detailrightbloc .cart_area {
521    padding: 10px;
522    background-color: #ecf5ff;
523    border: 1px solid #cef0f4;
524}
525#detailrightbloc .quantity dt,
526#detailrightbloc .quantity dd {
527    display: inline;
528}
529#detailrightbloc .cartin {
530    text-align: center;
531}
532#detailrightbloc .cartin_btn {
533    text-align: center;
534}
535#detailrightbloc .favorite_btn {
536    text-align: center;
537    margin-top: 10px;
538}
539
540
541/* お客様の声
542----------------------------------------------- */
543div#customervoice_area {
544    clear: both;
545    padding: 35px 0 0 0;
546}
547
548div#customervoice_area h2 {
549    margin-bottom: 20px;
550    padding: 6px 0 8px 10px;
551    border-top: solid 1px #f90;
552    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
553}
554
555div#customervoice_area .review_bloc {
556    margin-bottom: 20px;
557    padding: 10px;
558    background-color: #f6f6f6;
559}
560
561div#customervoice_area .review_bloc p {
562    padding-top: 3px;
563    margin-right: 10px;
564    float: left;
565}
566
567div#customervoice_area review_bloc .review_btn {
568    float: right;
569    width: 160px;
570}
571
572div#customervoice_area ul li{
573    padding-bottom: 15px;
574    margin-bottom: 15px;
575    background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
576}
577
578div#customervoice_area .voicetitle {
579    margin-bottom: 5px;
580    color: #333;
581    font-weight: bold;
582}
583
584div#customervoice_area .voicedate {
585    margin-bottom: 10px;
586}
587
588
589/* 関連商品(商品部分はbloc.cssのおすすめ商品と共通)
590----------------------------------------------- */
591div#whobought_area {
592    clear: both;
593    padding: 35px 0 0 0;
594}
595
596div#whobought_area h2 {
597    border-top: solid 1px #f90;
598    background: url('../img/background/bg_tit_sub_01.jpg') repeat-x left bottom;
599    padding: 5px 0 8px 10px;
600    font-size: 14px;
601}
602
603
604/* ***********************************************
605▼カートの中
606/*********************************************** */
607/* 現在のカゴの中
608----------------------------------------------- */
609div#undercolumn_cart .point_announce {
610    padding: 20px;
611    margin-bottom: 20px;
612    border: solid 1px #ffcc62;
613    background: #fffaf0;
614    font-size: 120%;
615    text-align: center;
616    line-height: 140%;
617}
618div#undercolumn_cart .totalmoney_area {
619    margin-bottom: 20px;
620}
621
622div#undercolumn_cart p {
623    margin: 10px 5px;
624}
625
626div#undercolumn ul#quantity_level li {
627    padding: 3px;
628    display: inline;
629}
630
631div#undercolumn .empty {
632    text-align: left;
633}
634
635div.form_area {
636    margin-bottom: 30px;
637}
638
639
640/* お客様情報入力
641----------------------------------------------- */
642div#undercolumn_customer {
643}
644
645.flow_area {
646    margin: 0 0 20px 0;
647}
648
649div#undercolumn_customer th em {
650    color: #000;
651    font-weight: bold;
652}
653
654
655/* お支払い方法・お届け時間等の指定
656----------------------------------------------- */
657div#undercolumn_shopping .pay_area {
658    margin: 0 auto 30px;
659    width: 100%;
660}
661div#undercolumn_shopping .pay_area02 {
662    margin: 40px auto 30px auto;
663}
664div#undercolumn_shopping .pay_area02 .txtarea {
665    margin: 5px 0 0 0;
666    padding: 2px;
667    border: 1px solid #ccc;
668    width: 99%;
669    height: 150px;
670}
671div#undercolumn_shopping .pay_area02 .select-msg {
672    margin-bottom: 10px;
673}
674
675div#undercolumn_shopping .point_area {
676    margin: 40px auto 0 auto;
677}
678
679div#undercolumn_shopping .point_area .point_announce {
680    padding: 20px;
681    border: 1px solid #ccc;
682}
683
684div#undercolumn_shopping .point_area p {
685    margin-bottom: 20px;
686}
687
688div#undercolumn_shopping .point_area .point_announce li {
689    margin-bottom: 5px;
690}
691
692
693/* お届け先の指定
694----------------------------------------------- */
695#address_area {
696    margin-bottom: 10px;
697    width: 100%;
698}
699
700#address_area .information {
701    width: 65%;
702    float: left;
703}
704
705#undercolumn_shopping .information {
706    margin-bottom: 15px;
707}
708
709#address_area .add_multiple {
710    padding: 15px 10px;
711    border: 1px solid #ffcc62;
712    float: right;
713    width: 30%;
714    color: #555;
715    background: #fffaf0;
716    text-align: center;
717    font-weight: bold;
718}
719
720#address_area .add_multiple p {
721    margin-bottom: 10px;
722}
723
724#address_area p.addbtn {
725    font-weight: bold;
726    font-size: 10px;
727}
728
729
730/* ==============================================
731▼検索結果
732=============================================== */
733p.condition_area {
734    margin: 0 auto;
735    padding: 5px;
736    border: solid 1px #333;
737    width: 566px;
738}
739
Note: See TracBrowser for help on using the repository browser.