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

Revision 20764, 13.2 KB checked in by nanasess, 13 years ago (diff)

#601 (コピーライトの更新)

  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
Line 
1@charset "utf-8";
2
3/* テーブル(リスト)
4----------------------------------------------- */
5ul {
6background: #fff;
7border: 1px solid #B4B4B4;
8font: bold 100% 'Helvetica-Bold';
9padding: 0;   
10margin: 10px 0;
11text-align: left;
12-webkit-border-radius: 8px;
13}
14ul li {
15color: #999999;
16border-top: 1px solid #B4B4B4;
17list-style-type: none;
18padding: 4px 6px;
19}
20
21ul#paymentP, ul#mypageT {
22background: #fff;
23border: 1px solid #B4B4B4;
24font:normal 100% 'Helvetica';
25padding: 0;   
26margin: 10px 0;
27text-align: left;
28-webkit-border-radius: 8px;
29}
30
31ul#paymentP li, ul#mypageT li {
32color: #000000;
33list-style-type: none;
34padding: 4px 6px;
35}
36
37li:first-child {
38border-top: 0;
39-webkit-border-top-left-radius: 8px;
40-webkit-border-top-right-radius: 8px;
41}
42li:last-child {
43-webkit-border-bottom-left-radius: 8px;
44-webkit-border-bottom-right-radius: 8px;
45}
46
47/* テーブル(リスト)上のリンク
48----------------------------------------------- */
49ul li a, li.img a + a {
50color: #000;
51text-decoration: none;
52text-overflow: ellipsis;
53white-space: nowrap;
54overflow: hidden;
55display: block;
56padding: 12px 10px 12px 10px;
57margin: -10px;
58}
59ul li.img a + a {
60margin: -10px 10px -20px -5px;
61font-size: 100%;
62font-weight: bold;
63}
64ul li.img a + a + a {
65font-size: 100%;
66font-weight: normal;
67margin-left: -10px;
68margin-bottom: -10px;
69margin-top: 0;
70}
71ul li.img a + small + a {
72margin-left: -5px;
73}
74ul li.img a + small + a + a {
75margin-left: -10px;
76margin-top: -20px;
77margin-bottom: -10px;
78font-size: 100%;
79font-weight: normal;
80}
81ul li.img a + small + a + a + a {
82margin-left: 0px !important;
83margin-bottom: 0;
84}
85ul li a + a {
86color: #000;
87font: 100% 'Helvetica';
88text-overflow: ellipsis;
89white-space: nowrap;
90overflow: hidden;
91display: block;
92margin: 0;
93padding: 0;
94}
95ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
96color: #666;
97font: 100% 'Helvetica';
98margin: 0;
99text-overflow: ellipsis;
100white-space: nowrap;
101overflow: hidden;
102display: block;
103padding: 0;
104}
105
106/* table角丸(共通)
107----------------------------------------------- */
108table {
109width: 100%;
110max-width: 300px;
111margin: 10px 0 20px;
112text-align: center;
113vertical-align: middle;
114border-collapse: collapse;
115border-spacing: 0;
116-webkit-border-radius: 8px;
117-webkit-box-shadow: 0 0 4px #000000;
118}
119table tr {
120border-bottom: solid 1px #cccccc;
121-webkit-border-radius: 8px;
122}
123table > tr:last-child,
124table > tbody > tr:last-child {
125border-bottom: none;
126}
127table th,
128table td {
129margin: 0;
130max-width: 250px;
131height: 2em;
132background-color: #ffffff;
133border: none;
134-webkit-border-radius: 0;
135font-weight:normal;
136}
137table th {
138background-color: #f0f0f0;
139}
140table td {
141background-color: #ffffff;
142}
143table tr:first-of-type th:first-child,
144table tr:first-of-type td:first-child {
145-webkit-border-top-left-radius: inherit;
146}
147table tr:first-of-type th:last-child,
148table tr:first-of-type td:last-child {
149-webkit-border-top-right-radius: inherit;
150}
151table tr:last-of-type th:first-child,
152table tr:last-of-type td:first-child {
153-webkit-border-bottom-left-radius: inherit;
154}
155table tr:last-of-type th:last-child,
156table tr:last-of-type td:last-child {
157-webkit-border-bottom-right-radius: inherit;
158}
159table > thead tr:last-of-type th:first-child,
160table > thead tr:last-of-type td:first-child,
161table > thead tr:last-of-type th:last-child,
162table > thead tr:last-of-type td:last-child {
163-webkit-border-bottom-left-radius: 0;
164-webkit-border-bottom-right-radius: 0;
165}
166table > thead + tbody > tr:first-of-type th:first-child,
167table > thead + tbody > tr:first-of-type td:first-child,
168table > thead + tbody > tr:first-of-type th:last-child,
169table > thead + tbody > tr:first-of-type td:last-child {
170-webkit-border-top-left-radius: 0;
171-webkit-border-top-right-radius: 0;
172}
173
174/* テーブル(div)共通?
175----------------------------------------------- */
176#block {
177width: 100%;
178background-color: #ffffff;
179-webkit-border-radius: 8px;
180-webkit-box-shadow: 0px 0px 4px #000000;
181margin: 10px 0;
182}
183.box-wrap {
184display:inline-block;
185width: 100%;
186border-top: 1px solid #cccccc;
187}
188.box-wrap:first-child {
189border-top: none;
190-webkit-border-top-left-radius: 8px;
191-webkit-border-top-right-radius: 8px;
192}
193.box-wrap:last-child {
194-webkit-border-bottom-left-radius: 8px;
195-webkit-border-bottom-right-radius: 8px;
196}
197.box-photo {
198float:left;
199display:block;
200margin-left: 10px;
201margin-right: 10px;
202position: relative;
203}
204.box-data {
205display:block;
206margin: 0px 8px;
207text-align: left;
208}
209.box-data h3 {
210margin: 0px;
211white-space: nowrap;
212overflow: hidden;
213text-overflow: ellipsis;
214-webkit-text-overflow: ellipsis;
215}
216.box-data h3 a {
217font-size: 100%;
218text-decoration: none;
219}
220.description, .box-comment {
221font: bold 100% Osaka;
222line-height: 1.5em;
223white-space: nowrap;
224overflow: hidden;
225text-overflow: ellipsis;
226-webkit-text-overflow: ellipsis;
227}
228.box-price {
229color: #993333;
230font: bold 100% Osaka;
231line-height: 1.5em;
232}
233
234/* テーブル(div)(recomend、関連商品)
235----------------------------------------------- */
236
237.recomendblock,
238.whoboughtblock{
239margin-top: 0;
240margin-bottom: 0;
241}
242.recomendblock > div ,
243.whoboughtblock > div {
244margin-top: 0;
245margin-bottom: 0;
246-webkit-border-radius: 0;
247}
248.recomendblock > div,
249.whoboughtblock > div {
250width: 100%;
251display:inline-block;
252background-color: #eeeeee;
253border-bottom: 1px solid #ffffff;
254padding: 5px 0;
255}
256.recomendblock > div > a,
257.recomendblock > div > div ,
258.whoboughtblock > div > a,
259.whoboughtblock > div > div{
260float: left;
261}
262.recomendblock:first-of-type > div:first-of-type ,
263.whoboughtblock:first-of-type > div:first-of-type {
264-webkit-border-top-left-radius: 8px;
265-webkit-border-top-right-radius: 8px;
266}
267.recomendblock:last-of-type > div:last-of-type ,
268.whoboughtblock:last-of-type > div:last-of-type {
269border-bottom: none;
270-webkit-border-bottom-left-radius: 8px;
271-webkit-border-bottom-right-radius: 8px;
272}
273
274.recomendrightblock {
275display: block;
276width: 100%;
277height: 100%;
278}
279
280.recomendrightblock,
281.whoboughtrightblock{
282width: 63%;
283}
284.recomendrightblock > h3,
285.recomendrightblock > p,
286.whoboughtrightblock > h3,
287.whoboughtrightblock > p{
288    margin-top: 0;
289    margin-bottom: 0;
290    font-size:90%;
291}
292.recomendblock img,
293.whoboughtblock img,
294.listphoto {
295float:left;
296display:block;
297margin: 3px 10px;
298position: relative;
299}
300.recommend-photo img,
301.listphoto img {
302width: 80px;
303}
304
305div.listrightblock {
306float:right;
307text-align:left;
308width:65%;
309}
310
311.recommend-box h3 {
312font-weight: bold;
313font-size: 100%;
314font-family: helvetica;
315margin: 0.4em 0 0;
316white-space: nowrap;
317overflow: hidden;
318text-overflow: ellipsis;
319-webkit-text-overflow: ellipsis;
320}
321.recommend-box h3 a {
322font-size: 100%;
323text-decoration: none;
324}
325.description,
326.recommend-comment {
327font-weight: normal;
328font-size: 100%;
329font-family: Osaka;
330line-height: 1.5em;
331white-space: nowrap;
332overflow: hidden;
333text-overflow: ellipsis;
334-webkit-text-overflow: ellipsis;
335margin: 0;
336}
337.price,
338.recommend-price {
339color: #ff0000;
340font-size: 90%;
341line-height: 1.5em;
342margin-bottom: 0.3em;
343}
344
345.paymentprice {
346color: #ff0000;
347line-height: 1.5em;
348margin-bottom: 0.3em;
349font-weight:bold;
350}
351
352/* アイテムリスト(div)の処理
353----------------------------------------------- */
354.listarea {
355width: 100%;
356background-color: #ffffff;
357border-bottom: solid 1px #CCC;
358margin: 0;
359margin-top: 0;
360margin-bottom: 0;
361padding:15px 0;
362-webkit-border-radius: 0;
363-webkit-box-shadow: none;
364}
365#page_navi_top + .listarea{
366margin-bottom: 0;
367-webkit-border-top-left-radius: 8px;
368-webkit-border-top-right-radius: 8px;
369}
370.listarea:last-of-type{
371border: none;
372-webkit-border-bottom-left-radius: 8px;
373-webkit-border-bottom-right-radius: 8px;
374}
375.listrightblock > ul {
376    border: none;
377    background-color: transparent;
378}
379.listrightblock > h3,
380.listrightblock > p,
381.listrightblock > ul {
382    margin-top: 0;
383    margin-bottom: 0.1em;
384}
385.listrightblock > h3:first-child,
386.listrightblock > p:first-child,
387.listrightblock > ul:first-child,
388margin-top: 0;
389}
390.listrightblock > ul > li {
391margin: 0;
392padding: 0 3px 0 0;
393}
394.listrightblock > h3:last-child,
395.listrightblock > p:last-child {
396margin-bottom: 0;
397}
398
399.newitem-line-list .newitem-box-wrap-end {
400border-bottom: 1px solid #cccccc;
401}
402
403div.listarea span.pricebox {
404font-size:90%;
405}
406
407/* 商品検索結果
408----------------------------------------------- */
409#page_navi_top,
410#page_navi_bottom {
411border: none;
412-webkit-box-shadow: none;
413clear: both;
414width: 100%;
415border-spacing: 0 0;
416border-collapse: collapse;
417margin-top:10px;
418}
419#page_navi_top tr,
420#page_navi_bottom tr {
421width: 100%;
422}
423#page_navi_top td,
424#page_navi_bottom td {
425text-align: left;
426background-color: transparent;
427}
428
429.change a,
430.change strong {
431display: block;
432float: left;
433margin: 5px 0px;
434padding: 0.3em 0;
435color: #ffffff;
436width: 49.6%;
437text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
438background-color: #666666;
439background-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)));
440text-align:center;
441vertical-align: middle;
442text-decoration: none;
443border-left: solid 1px #666666;
444}
445.change > a:first-child,
446.change > strong:first-child {
447border-left: none;
448-webkit-border-top-left-radius: 4px;
449-webkit-border-bottom-left-radius: 4px;
450}
451.change > a:last-child,
452.change > strong:last-child{
453margin-left: 1px;
454-webkit-border-top-right-radius: 4px;
455-webkit-border-bottom-right-radius: 4px;
456}
457.change select {
458margin-right: 0;
459}
460
461/* テーブル・カゴ
462----------------------------------------------- */
463
464table[summary="商品情報"]{
465font-size: 80%;
466}
467
468table[summary="商品情報"] tr:nth-child(even) td{
469background-color: #ffffff;
470}
471/*table[summary="商品情報"] tr:nth-child(odd) td{
472background-color: #f0f0f0;
473}*/
474
475table[summary="商品情報"] td{
476
477text-align: center;
478vertical-align: middle;
479max-width: 200px;
480}
481table[summary="商品情報"] tr:nth-child(even) td:last-child{
482width: 21%;
483overflow: visible;
484}
485table[summary="商品情報"] ul,
486table[summary="商品情報"] ul li,
487table[summary="商品情報"] ul li a {
488display: inline;
489margin: 0;
490padding: 0;
491border: none;
492}
493table[summary="商品情報"] ul li a{
494display: inline-block;
495margin: 1px;
496padding:0;
497}
498/*table[summary="商品情報"] tr:nth-last-of-type(1) td,
499table[summary="商品情報"] tr:nth-last-of-type(2) td,
500table[summary="商品情報"] tr:nth-last-of-type(3) td {
501background-color: #ffffff;
502text-align: center;
503min-width:30px;
504}*/
505
506table td.detailtdName {
507text-align:left;
508width:100px;
509}
510
511table td.detailtdPM {
512text-align:center;
513width:40px;
514}
515
516
517table td.detailtdYenT {
518text-align:right;
519width:80px;
520}
521
522table th.resulttd {
523text-align:left;
524}
525table td.mailtd {
526text-align:left;
527}
528
529table td.product_td {
530font-size:80%;
531}
532
533table td p.no_margin {
534margin:0;
535}
536
537/* テーブル・商品詳細
538----------------------------------------------- */
539#detailrightblock table th {
540font-size: 80%;
541font-weight: normal;
542width: 100px;
543text-align:left;
544}
545
546#detailrightblock table h2 {
547font-size: 120%;
548}
549
550/* お客様情報入力
551----------------------------------------------- */
552table[summary="お客様情報入力"] td{
553padding-left:5px;
554text-align: left;
555vertical-align: middle;
556}
557
558/* 会員登録内容変更
559----------------------------------------------- */
560table[summary="会員登録内容変更"] td{
561padding-left:5px;
562text-align: left;
563vertical-align: middle;
564}
565
566/* お届け先登録
567----------------------------------------------- */
568table[summary="お届け先登録"] td{
569padding-left:5px;
570text-align: left;
571vertical-align: middle;
572}
573
574/* お問い合わせ
575----------------------------------------------- */
576#undercolumn_contact table td {
577text-align: left;
578}
579
580/*TOP商品カテゴリ内
581-----------------------------------------------*/
582ul#categorytree {
583font-size: 100%;
584margin: 0 0 15px;
585}
586
587/*会員登録(入力ページ)フォーム
588-----------------------------------------------*/
589table.entryform {
590font-size:80%;
591}
592table.entryform th {
593    min-width: 50px;
594    padding: 3px;
595    margin:3px;
596    text-align: left;
597    vertical-align: top;}
598
599table.entryform td {
600text-align:left;
601padding: 3px;
602}
603
604table.entryform td.tdc {
605text-align:center;
606}
607
608table.entryform th.confirmtd {
609    width: 70px;
610    padding: 3px;
611    margin:3px;
612    text-align: left;
613    vertical-align: top;}
614
615table.entryform th.select {
616min-width:30px;
617text-align:center;
618}
619
620table.entryform th.change {
621min-width:30px;
622}
623
624table.entryform th.multi_ph {
625text-align:center;
626min-width:30px;
627}
628
629table.entryform th.multi_pr {
630text-align:center;
631}
632
633table.entryform th.multi_nu {
634text-align:center;
635}
636
637table.entryform td.multi_pr {
638text-align:left;
639}
640
641table.entryform td.multi_nu {
642text-align:center;
643min-width:30px;
644}
645
646table td.phototd {
647    width: 53px;
648    text-align: center;
649}
650
651table td.multi_send {
652    text-align: center;
653}
654
655table.payment th.select {
656width:30%;
657text-align:center;
658}
659
660table.payment td.right {
661width:200px;
662}
663
664table td.detailtdNumber {
665text-align:center;
666width:52px;
667}
668
669table td.alignR {
670text-align:right;
671}
672
673table td.pricetd {
674    text-align: right;
675}
676
677table.entryform th.alignC {
678text-align:center;
679}
680
681table.entryform th.confirm_ph {
682width:57px;
683}
684
685table.entryform th.trorder {
686width:80px;
687}
688
689table.entryform th.trpoint {
690width:215px;
691}
692
693table.entryform td.detailtd {
694    text-align: left;
695    min-width:180px;
696}
697
698table.entryform td.centertd {
699    text-align: center;
700}
701
702table.entryform th.valignM {
703vertical-align:middle;
704}
705
706table.entryform td.yentd {
707min-width: 60px;
708}
709
710span#point_default, span#point_dynamic {
711font-size:90%;
712}
713
714div.payarea, div.payarea02 {
715margin-bottom:30px;
716}
717
718div.delivdate {
719margin-bottom:5px;
720}
721
722div.delivdate02 {
723padding-bottom:10px;
724margin-bottom:15px;
725border-bottom:1px solid #ccc;
726}
Note: See TracBrowser for help on using the repository browser.