source: branches/comu-ver2/html/user_data/packages/default/css/main.css @ 17462

Revision 17462, 6.9 KB checked in by Seasoft, 16 years ago (diff)

「通常価格」と「販売価格」の二重価格表示を所謂「赤札」の概念にスタイル変更

Line 
1@charset "utf-8";
2* {
3    margin: 0;
4    padding: 0;
5}
6
7table,img,p {
8    border: 0;
9}
10
11body {
12    font-family: Verdana,Arial,Helvetica,sans-serif;
13    color: #555555;
14    background-color: #ffe9e6;
15    font-size: 72.5%;
16    line-height: 150%;
17    letter-spacing:1px;
18}
19
20li {
21    list-style-type: none;
22}
23
24select {
25    border: solid 1px #ccc;
26}
27
28/*PHOTO*/
29.picture {
30    border: 1px solid #ccc;
31}
32/* フロート回り込み解除
33----------------------------------------------- */
34br.clear {
35    clear: both;
36    display: none;
37    font-size: 0px;
38    line-height: 0%;
39    height: 0px
40}
41/* リンク指定
42----------------------------------------------- */
43a { text-decoration: underline; }
44a:link { color: #3a75af; }
45a:visited { color: #3a75af; }
46a:hover { color: #ff6600; }
47/* フォント
48----------------------------------------------- */
49h1,h2,h3,h4,h5 {
50    font-size: 100%;
51    line-height: 150%;
52}
53.price {
54}
55/* FIXME ポイントがクラス「price」を利用しているようだが、専用のクラスを用意すべき。 */
56.sale_price {
57    color: #ff0000;
58}
59.sale_price .price {
60    font-weight: bold;
61}
62.normal_price {
63}
64.attention { color: #ff0000; }
65.mini { font-size: 90%; }
66em {
67    font-style: normal;
68    color: #ff0000;
69}
70/* テーブル共通指定
71----------------------------------------------- */
72table  {
73    margin: 15px auto 0 auto;
74    border-top: 1px solid #ccc;
75    border-left: 1px solid #ccc;
76    border-collapse: collapse;
77    text-align: left;
78}
79table th {
80    padding: 8px;
81    border-right: 1px solid #ccc;
82    border-bottom: 1px solid #ccc;
83    background-color: #f0f0f0;
84    font-weight: normal;
85}
86table td {
87    padding: 8px;
88    border-right: 1px solid #ccc;
89    border-bottom: 1px solid #ccc;
90}
91div.tblareabtn {
92    clear: both;
93    margin: 15px 0 0 0;
94    text-align: center;
95}
96.phototd {
97    width: 75px;
98    text-align: center;
99}
100.centertd {
101    text-align: center;
102}
103.pricetd {
104    text-align: right;
105}
106.pricetd em {
107    font-weight: bold;
108}
109div#completetext {
110    width: 470px;
111    margin: 15px auto 0 auto;
112    padding: 15px;
113    border: 5px solid #ccc;
114}
115div#completetext em {
116    font-weight: bold;
117}
118div#completetext p{
119    padding: 20px 0 0 0;
120    text-align: left;
121}
122
123
124/* ヘッダーロゴ
125------------------------------------------------ */
126div#header {
127    background: url("../img/header/bg.gif");
128    width: 780px;
129    height: 95px;
130    margin: 0 auto;
131}
132div#header h1 a {
133    float: left;
134    display: block;
135    margin: 8px 0 0 0;
136    width: 292px;
137    height: 81px;
138    background: url("../img/header/logo.gif");
139}
140div#header em {
141    display: none;
142}
143
144
145/* ヘッダーナビ
146----------------------------------------------- */
147div#information {
148    float: right;
149    padding: 60px 8px 0 0;
150}
151div#information ul li {
152    display: inline;
153}
154div#information ul li a {
155    text-decoration: none;
156}
157/* フレーム
158----------------------------------------------- */
159div#container {
160    width: 764px;
161    margin: 0 auto;
162    padding: 0 8px;
163    background-color: #fff;
164    text-align: left;
165}
166#container:after {/* firefox背景色表示用 */
167    content: "";
168    display: block;
169    clear: both;
170    height: 1px;
171    overflow: hidden;
172}
173
174div#leftcolumn {
175    float: left;
176    width: 166px;
177}
178
179div#leftcolumn h2 {
180    padding: 15px 0 0 0;
181}
182
183div#rightcolumn {
184    float: left;
185    width: 166px;
186}
187
188div#rightcolumn h2 {
189    padding: 15px 0 0 0;
190}
191
192/* メインコンテンツ
193----------------------------------------------- */
194/* 3カラム設定 */
195div#three_maincolumn {
196    float: left;
197    width: 432px;
198    padding: 15px 0 0 0;
199}
200
201div#three_maincolumn h2 {
202    padding: 15px 0 0 0;
203}
204
205/* 2カラム設定 */
206div#two_maincolumn {
207    float: left;
208    width: 598px;
209    padding: 15px 0 0 0;
210}
211
212div#two_maincolumn h2 {
213    padding: 15px 0 0 0;
214}
215
216/* 1カラム設定 */
217div#one_maincolumn {
218    padding: 10px 0 0 0;
219}
220
221/* カゴの中
222----------------------------------------------- */
223div#cartarea {
224    width: 144px;
225    padding: 10px;
226    border: solid 1px #ccc;
227}
228
229div#cartarea p {
230    padding: 5px 0 10px 0;
231}
232
233div#cartarea p.item {
234    padding: 0 0 10px 0;
235    background: url("../img/side/line_146.gif") no-repeat bottom;
236}
237
238div#cartarea .btn {
239    padding: 0;
240    text-align: center;
241}
242
243
244/* カテゴリー
245----------------------------------------------- */
246div#categoryarea {
247    width: 144px;
248    padding: 10px;
249    border: solid 1px #ccc;
250    background-color: #fff1e3;
251}
252
253div#categoryarea li {
254    padding: 0 0 0 20px;
255    background: url("../img/common/arrow_blue.gif") 0 3px no-repeat;
256}
257div#categoryarea li.onmark {
258    background: url("../img/common/arrow_red.gif") 0 3px no-repeat;
259}
260div#categoryarea li.level1 {
261    font-weight: bold;
262}
263div#categoryarea li.level1 li {
264    font-weight: normal;
265}
266div#categoryarea li a {
267    display: block;
268    padding: 3px 0;
269}
270
271a.onlink {  text-decoration: underline; }
272a.onlink:link { color: #ff0000; }
273a.onlink:visited { color: #ff0000; }
274a.onlink:hover { color: #ff0000; }
275
276
277/* ガイドリンク
278----------------------------------------------- */
279#guidearea {
280    padding: 15px 0 0 0;
281    line-height: 0;
282}
283
284/* ログイン
285----------------------------------------------- */
286div#loginarea {
287    width: 144px;
288    padding: 0 10px 10px 10px;
289    border: solid 1px #ccc;
290}
291
292div#loginarea p {
293    padding: 8px 0 0 0;
294}
295
296div#login img {
297    padding: 0 5px 0 0;
298    vertical-align: bottom;
299}
300
301div#loginarea .btn {
302    text-align: center;
303}
304
305#loginarea .box96 {
306    width: 96px;
307    border: solid 1px #ccc;
308}
309
310
311/* 検索
312----------------------------------------------- */
313div#searcharea {
314    width: 144px;
315    padding: 0 10px 10px 10px;
316    border: solid 1px #ccc;
317}
318
319div#searcharea p {
320    padding: 8px 0 0 0;
321}
322
323div#searcharea .btn {
324    text-align: center;
325}
326
327#searcharea .box142 {
328    width: 142px;
329    border: solid 1px #ccc;
330}
331
332
333/* バナー
334----------------------------------------------- */
335ul#banner {
336    padding: 15px 0 0 0;
337}
338
339#banner li {
340    padding: 0 0 10px 0;
341}
342
343/* テキストフィールド
344----------------------------------------------- */
345input[type='text'] {
346    border: solid 1px #ccc;
347}
348
349/* ボタン
350----------------------------------------------- */
351input[type='image'] {
352    border: none;
353}
354
355input[type='image'].box190 {
356    width: 190px;
357    height: 30px;
358}
359
360input[type='image'].box180 {
361    width: 180px;
362    height: 30px;
363}
364
365input[type='image'].box150 {
366    width: 150px;
367    height: 30px;
368}
369
370input[type='image'].box140 {
371    width: 140px;
372    height: 30px;
373}
374
375input[type='image'].box130 {
376    width: 130px;
377    height: 30px;
378}
379
380input[type='image'].box51 {
381    width: 51px;
382    height: 22px;
383}
384
385/* フッター
386----------------------------------------------- */
387#pagetop {
388    width: 764px;
389    margin: 0 auto;
390    padding: 30px 8px 15px 8px;
391    background-color: #fff;
392    text-align: right;
393}
394
395#fotter {
396    width: 764px;
397    margin: 0 auto;
398    padding: 15px 8px;
399    border-top: 1px solid #ff6600;
400    background-color: #ffa85c;
401    font-size: 90%;
402    color: #fff;
403    text-align: left;
404}
Note: See TracBrowser for help on using the repository browser.