source: branches/version-2_5-dev/html/user_data/packages/default/css/common.css @ 20546

Revision 20546, 8.5 KB checked in by pineray, 13 years ago (diff)

refs #1062
お気に入りに登録した際、その旨のTipsをボタンのまわりに表示するように変更。

Line 
1@charset "utf-8";
2
3/************************************************
4 共通設定
5************************************************ */
6body {
7    font-family: Verdana,Arial,Helvetica,sans-serif;
8    background-color: #f5f5f5;
9    font-size: 72.5%;
10    line-height: 150%;
11    letter-spacing: 0.1em;
12}
13
14select {
15    border: solid 1px #ccc;
16}
17
18/*写真*/
19.picture {
20    border: 1px solid #ccc;
21}
22
23
24/* ==============================================
25 フレーム
26=============================================== */
27/* 全体を包括 */
28.frame_outer {
29    margin: 0 auto;
30    width: 100%;
31    text-align: center;
32}
33
34/* コンテンツ */
35#container {
36    margin: 0 auto;
37    padding: 0 0 30px 0;
38    width: 980px;
39    background: #fff;
40    text-align: left;
41}
42
43
44/* ==============================================
45 カラム指定
46=============================================== */
47/* ヘッダーとフッターの上下
48[注意]ブロック移動時はbloc.css内で調整が必要 */
49#topcolumn ,
50#bottomcolumn ,
51#footerbottomcolumn {
52    margin: 0 auto;
53    padding: 15px;
54    width: 950px;
55    background: #fff;
56    text-align: left;
57}
58
59/* 中央カラム */
60.main_column {
61    padding: 10px 0 20px;
62}
63
64/* サイドカラム */
65#leftcolumn {
66    float: left;
67    width: 20%;
68}
69#rightcolumn {
70    float: right;
71    width: 20%;
72}
73
74/* 1カラム設定 */
75#one_maincolumn {
76    margin: 0 auto;
77    width: 80%;
78}
79
80/* 2カラム設定 (メイン部が左) */
81#two_maincolumn_left {
82    padding-left: 1.5%;
83    float: left;
84    width: 78%;
85}
86
87/* 2カラム設定 (メイン部が右) */
88#two_maincolumn_right {
89    padding-right: 1.5%;
90    width: 78%;
91    float: right;
92}
93
94/* 3カラム設定 */
95#three_maincolumn {
96    padding-left: 0.5%;
97    width: 59%;
98    float: left;
99}
100
101/* 下層コンテンツ */
102#undercolumn {
103    width: 100%;
104    margin: 0 0 30px 0;
105}
106
107
108/* ==============================================
109 ユーティリティ
110=============================================== */
111/* フロート回り込み解除
112----------------------------------------------- */
113.clearfix:after {
114    display: block;
115    clear: both;
116    height: 0px;
117    line-height: 0px;
118    visibility: hidden;
119    content: ".";
120}
121
122
123/* リンク指定
124----------------------------------------------- */
125a:link ,
126a:visited {
127    color: #15a;
128    text-decoration: none;
129}
130a:link:hover ,
131a[href]:hover {
132    color: #f60;
133    text-decoration: underline;
134}
135
136
137/* フォント
138----------------------------------------------- */
139h1,h2,h3,h4,h5 {
140    font-size: 100%;
141    line-height: 150%;
142}
143.price {
144    color: #f00;
145}
146.sale_price {
147    color: #f00;
148}
149.normal_price {
150    color: #f00;
151    font-size: 90%;
152}
153.point {
154    color: #f00;
155    font-weight: bold;
156}
157.user_name {
158    font-weight: bold;
159}
160.recommend_level {
161    color: #ecbd00;
162}
163
164.attention {
165    color: #f00;
166}
167.attentionSt {
168    color: #f00;
169    font-weight: bold;
170}
171.st {
172    font-weight: bold;
173}
174.mini {
175    font-size: 90%;
176}
177
178
179/* 行揃え
180----------------------------------------------- */
181.alignC {
182    text-align: center;
183}
184.alignR {
185    text-align: right;
186}
187.alignL {
188    text-align: left;
189}
190.pricetd em {
191    font-weight: bold;
192}
193
194
195/* フォーム
196----------------------------------------------- */
197input[type='text'] ,
198input[type='password'] ,
199.select {
200    border: solid 1px #ccc;
201    padding: 2px;
202}
203
204.box40 {
205    width: 40px;
206}
207.box60 {
208    width: 60px;
209}
210.box100 {
211    width: 100px;
212}
213.box120 {
214    width: 120px;
215}
216.box140 {
217    width: 140px;
218}
219.box145 {
220    width: 145px;
221}
222.box150 {
223    width: 150px;
224}
225.box240 {
226    width: 240px;
227}
228.box300 {
229    width: 300px;
230}
231.box320 {
232    width: 320px;
233}
234.box350 {
235    width: 350px;
236}
237.box380 {
238    width: 380px;
239}
240
241/* フォームが縦に重なり合う場合に併用する余白 */
242.top {
243    margin-bottom: 5px;
244}
245
246
247/* タイトル
248----------------------------------------------- */
249h2.title {
250    margin-bottom: 10px;
251    padding: 8px;
252    border-top: solid 1px #ebeced;
253    color: #f60;
254    background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom;
255    background-color: #fef3d8;
256    font-size: 170%;
257}
258
259#one_maincolumn .sub_area h3 ,
260#two_maincolumn_right .sub_area h3 ,
261#two_maincolumn_left .sub_area h3 ,
262#three_maincolumn .sub_area h3 ,
263#undercolumn_login .login_area h3 ,
264#undercolumn_shopping h3 ,
265#mypagecolumn h3 ,
266#undercolumn_cart h3 {
267    margin: 0 0 10px 0;
268    padding: 5px 0 10px;
269    color: #f60;
270    background: url("../img/background/line_01.gif") repeat-x left bottom;
271    font-size: 120%;
272}
273
274div#undercolumn_login .login_area h4 {
275    padding-left: 15px;
276    background: url("../img/icon/ico_arrow_05.gif") no-repeat left;
277}
278
279
280/* ==============================================
281 ヘッダー
282=============================================== */
283/* レイアウト
284----------------------------------------------- */
285#header_wrap {
286    border-top: solid 3px #f90;
287    min-height: 82px;
288    background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0;
289}
290#header {
291    margin: auto;
292    width: 980px;
293}
294#logo_area {
295    padding-left: 10px;
296    float: left;
297    width: 390px;
298    text-align: left;
299}
300#header_utility {
301    float: right;
302    width: 580px;
303}
304
305#errorHeader {
306    color: #F00;
307    font-weight: bold;
308    font-size: 12px;
309    background-color: #FEB;
310    text-align: center;
311    padding: 5px;
312}
313
314/* ロゴ
315----------------------------------------------- */
316#site_description {
317    font-size: 90%;
318}
319#logo_area h1 {
320    width: 378px;
321    height: 33px;
322}
323#logo_area h1 span {
324    display: none; /* テキストロゴ非表示 */
325}
326
327
328/* ヘッダーナビ
329----------------------------------------------- */
330div#header_navi {
331    float: right;
332    width: 409px;
333    height: 38px;
334}
335div#header_navi ul li {
336    display: block;
337    float: left;
338}
339div#header_navi ul li.mypage,
340div#header_navi ul li.entry {
341    margin-top: 6px;
342}
343
344
345/* ==============================================
346 フッター
347=============================================== */
348#footer_wrap {
349    margin: 0 auto;
350    width: 980px;
351    height: 80px;
352    background: #fff;
353}
354#footer {
355    margin: auto;
356    padding-top: 10px;
357    border-top: solid 1px #ccc;
358    width: 950px;
359}
360#pagetop {
361    width: 210px;
362    float: right;
363    text-align: right;
364}
365#copyright {
366    width: 740px;
367    float: left;
368    text-align: left;
369    font-size: 97%;
370}
371
372
373/* ==============================================
374 パーツ
375=============================================== */
376/* ボタン
377----------------------------------------------- */
378.btn_area {
379    margin-top: 10px;
380    width: 100%;
381    text-align: center;
382}
383
384.btn_area li {
385    padding-right: 10px;
386    display: inline;
387}
388
389
390/* 完了メッセージ
391----------------------------------------------- */
392div#complete_area {
393    margin-bottom: 20px;
394}
395div#complete_area .message ,
396div#undercolumn_entry .message {
397    margin-bottom: 20px;
398    line-height: 150%;
399    font-weight: bold;
400    font-size: 120%;
401}
402div#complete_area .shop_information {
403    margin-top: 40px;
404    padding: 20px 0 0 0;
405    border-top: solid 1px #ccc;
406}
407div#complete_area .shop_information .name {
408    margin-bottom: 10px;
409    font-weight: bold;
410    font-size: 140%;
411}
412
413
414/* Tipsy
415----------------------------------------------- */
416.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
417  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
418  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
419  .tipsy-arrow { position: absolute; background: url('../img/ajax/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
420  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
421    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
422    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
423  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
424    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
425    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
426  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
427  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
428
Note: See TracBrowser for help on using the repository browser.