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

Revision 19858, 7.5 KB checked in by yomoro, 13 years ago (diff)

スマートフォンのカート画面以降のレイアウト微調整・ボタンのcss化

Line 
1@charset "utf-8";
2
3/* body
4----------------------------------------------- */
5body {
6background: rgb(197,204,211) url(../img/common/stripes.png);
7background-position: 50% 0% fixed;
8font-family: helvetica, Osaka;
9font-size:small;
10margin: 0px 3.13% 10px;
11padding: 0px;
12-webkit-user-select: none;
13-webkit-text-size-adjust: none;
14-webkit-tap-highlight-color: rgba(51,102,204,0.70);
15max-width: 100%;
16}
17
18/* HTML default
19----------------------------------------------- */
20a {
21    color: #5B87A4;
22    text-decoration: none;
23}
24form {
25    margin: 0;
26    padding: 0;
27}
28table,img,p {
29    border: 0;
30}
31em {
32    font-weight: bold;
33    font-style: normal;
34    color: #C00;
35}
36hr {
37    display: none;
38}
39p {
40    margin: 0 0 1em;
41    padding: 0;
42}
43li {
44list-style-type: none;
45}
46img {
47vertical-align: bottom;
48}
49.hidden {
50    display: none;
51}
52br.clear {
53clear: both;
54display: none;
55font-size: 0px;
56line-height: 0%;
57height: 0px
58}
59
60/* クリアフィックス
61----------------------------------------------- */
62#block-login:after,
63.block-center:after,
64.listarea:after,
65.recomendblock > div
66.whoboughtblock > div {
67content: "";
68display: block;
69height: 0;
70clear: both;
71visibility: hidden;
72}
73
74/* font
75----------------------------------------------- */
76h1,h2,h3,h4,h5 {
77font-size: 100%;
78line-height: 150%;
79}
80.price { color: #ff0000; font-weight: bold; }
81.attention { color: #ff0000; }
82.mini { font-size: 80%; }
83
84/* wrapper
85----------------------------------------------- */
86div#wrapper {
87margin: 0 auto;
88padding: 0;
89text-align: left;
90background: #FFFFFF;
91overflow: hidden;
92}
93
94/* 見出し (h2)
95----------------------------------------------- */
96h2 {
97color:#4D576B;
98font: bold 22px helvetica;
99background-color: transparent;
100text-shadow: 0px 1px 1px #ffffff;
101margin: 10px 0px;
102}
103
104/* 見出し (h3)
105----------------------------------------------- */
106#mycontentsarea h3 {
107color:#4D576B;
108font: bold 19px helvetica;
109text-shadow: 0px 1px 1px #ffffff;
110}
111
112/* ナビゲーションバー・ページタイトル
113----------------------------------------------- */
114#navigation_bar,
115h2.title,
116.title-undercolumn,
117.title-under02column,
118#title-list,
119.title-mypagecolumn,
120#windowarea h2,
121#pan + h2 {
122display: inline-block;
123width: 106.8%;
124margin: 0 0 1em -3.4%;
125color: #ffffff;
126text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
127font: bold 17px helvetica;
128padding: 0.45em 0;
129background-color: #333332;
130background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
131border-top: 1px solid rgba(255,255,255,0.3);
132border-bottom: 1px solid rgba(0,0,0,1);
133text-align:center;
134vertical-align: middle;
135white-space: nowrap;
136overflow: hidden;
137text-overflow: ellipsis;
138}
139
140/* ページタイトル
141----------------------------------------------- */
142#navigation_bar > h2{
143font: bold 17px helvetica;
144color: #ffffff;
145vertical-align: middle;
146text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
147margin: 0;
148display: inline-block;
149max-width: 65%;
150white-space: nowrap;
151overflow: hidden;
152text-overflow: ellipsis;
153-webkit-text-overflow: ellipsis;
154}
155
156/* header
157----------------------------------------------- */
158/* information
159----------------------------------------------- */
160/* navigation
161----------------------------------------------- */
162/* フレーム
163----------------------------------------------- */
164/* contents
165----------------------------------------------- */
166
167/* footer
168----------------------------------------------- */
169#pagetop {
170width: 100%;
171margin: 25px 0 0;
172text-align: right;
173}
174#pagetop a{
175color:#4D576B;
176font: bold 13px helvetica;
177text-shadow: 0px 1px 1px #ffffff;
178text-decoration: underline;
179}
180div#footer {
181margin: 0;
182padding: 0;
183text-align: center;
184}
185
186/* footer information
187----------------------------------------------- */
188#footer-menu {
189text-align: left;
190font: bold 15px helvetica;
191}
192#footer-menu li{
193background: #ffffff url(../img/common/chevron.png) no-repeat right center;
194}
195#footer-navi {
196float:left;
197list-style:none outside none;
198margin: 0 auto 4px;
199padding: 0 0 0 5px;
200text-align:center;
201width: 100%;
202border: none;
203background-color: transparent;
204}
205#footer-navi > li{
206display: inline;
207color:#4D576B;
208font: bold 12px helvetica;
209background-color: transparent;
210text-shadow: 0px 1px 1px #ffffff;
211border: none;
212border-right: 1px dotted #999999;
213-webkit-border-radius: 0;
214line-height: 1em;
215margin: 0;
216padding: 0;
217}
218#footer-navi > li:last-child{
219border-right: none;
220}
221#footer-navi > li > a {
222margin: 0;
223padding: 0;
224display: inline;
225color:#4D576B;
226}
227#copyright {
228margin: 7px 0px;
229color: #4D576B;
230font: bold 17px helvetica;
231text-shadow: 0px 1px 1px #ffffff;
232text-align: center;
233}
234#copyright a{
235color: #4D576B;
236text-decoration: under-line;
237}
238
239/* ニュース
240----------------------------------------------- */
241/* おすすめ
242----------------------------------------------- */
243
244/* panlist
245----------------------------------------------- */
246div#pan {
247display: none;
248}
249
250/* error
251----------------------------------------*/
252
253/* フォーム
254----------------------------------------------- */
255input[size="40"] {
256width: 50%;
257}
258input[type="password"] {
259width: 50%;
260}
261input[type="tel"] {
262width: 3em;
263}
264input, tr, th, td {
265max-width: 93.8%;
266}
267input {
268font-size: small;
269}
270textarea{
271font-size: small;
272width: 95%;
273}
274form dl{
275font: bold small helvetica;
276margin: 10px 0;
277}
278form dt{
279margin: 5px 0;
280color:#4D576B;
281font: bold small helvetica;
282background-color: transparent;
283text-shadow: 0px 1px 1px #ffffff;
284border: none;
285}
286form dd{
287margin:0;
288background-color: rgba(255,255,255,0.3);
289color: #999999;
290border: 2px dotted #B4B4B4;
291list-style-type: none;
292padding: 10px 7px;
293-webkit-border-radius: 8px;
294}
295
296body, p,
297table, thead, tbody, th, td {
298word-break: break-all;
299}
300table, thead, tbody {
301white-space: normal;
302overflow: hidden;
303}
304
305/* プライバシーポリシー
306----------------------------------------------- */
307ol {
308padding-start:0;
309-o-padding-start:0;
310-moz-padding-start:0;
311-webkit-padding-start:0;
312margin: 1em 3.13%;
313}
314ol > li.privacy_ol{
315margin: 1em;
316}
317ol > li.privacy_ol > strong{
318color:#4D576B;
319font: bold 17px helvetica;
320text-shadow: 0px 1px 1px #ffffff;
321line-height: 2em;
322}
323
324/* 特定商取引に基づく表記
325----------------------------------------------- */
326#undercolumn_order dl{
327margin: 0;
328}
329#undercolumn_order dt{
330color:#4D576B;
331font: bold 17px helvetica;
332text-shadow: 0px 1px 1px #ffffff;
333line-height: 2em;
334}
335#undercolumn_order dd,
336#undercolumn_order ul {
337padding-start:0;
338-o-padding-start:0;
339-moz-padding-start:0;
340-webkit-padding-start:0;
341margin: 0 3.13%;
342}
343
344/* マイページ
345----------------------------------------------- */
346#welcome-message {
347color: #4D576B;
348text-shadow: 0px 1px 1px #ffffff;
349}
350.your-point {
351display: inline-block;
352padding: 0.1em;
353text-align: right;
354color: #ffffff;
355width: 100%;
356background-color: rgba(0,0,0,0.3);
357margin-bottom: 5px;
358}
359.your-point em {
360text-shadow: 0 0 2px #ffffff;
361}
362#btn-mypagetop {
363width: 100%;
364text-align: left;
365-webkit-border-radius: 8px;
366background: #ffffff url(../img/common/chevron.png) no-repeat right center;
367border: solid 1px #cccccc;
368margin: 10px 0;
369}
370#btn-mypagetop a {
371display: inline-block;
372margin: 7px 3.3%;
373width: 93%;
374color: black;
375text-decoration: none;
376font: bold 15px helvetica;
377}
378
379/* マイページ・購入履歴
380----------------------------------------------- */
381table[summary="購入履歴"] td:first-child {
382width: 20%;
383text-align: center;
384}
385table[summary="購入履歴"] tr[onclick] td:last-child {
386background: #ffffff url(../img/common/chevron.png) no-repeat right center;
387}
388table[summary="お届け先の指定"] td:nth-child(2),
389table[summary="購入履歴"] tr[onclick] td:last-child {
390text-align: left;
391}
392
393/* 商品詳細
394----------------------------------------------- */
Note: See TracBrowser for help on using the repository browser.