- Timestamp:
- 2011/07/31 15:25:24 (13 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/version-2_11-dev/html/user_data/packages/sphone/css/contents.css
r21052 r21081 2 2 /* =================================================================== 3 3 CSS information 4 file name :contents.css5 4 style info :下層コンテンツ用(#undercolumn) 6 5 =================================================================== */ … … 9 8 ----------------------------------------------- */ 10 9 #undercolumn{ 11 padding-bottom:35px;10 padding-bottom:35px; 12 11 } 13 12 /**イントロダクション*/ 14 13 .information{ 15 font-weight:bold;16 padding:5px 10px;17 line-height:1.3;18 border-bottom:#CCC solid 1px;14 font-weight:bold; 15 padding:5px 10px; 16 line-height:1.3; 17 border-bottom:#CCC solid 1px; 19 18 } 20 19 .information p:first-child{ 21 font-size:14px;22 margin-bottom:0.5em;20 font-size:14px; 21 margin-bottom:0.5em; 23 22 } 24 23 /*フォーム枠*/ 25 24 .form_area{ 26 padding:10px;25 padding:10px; 27 26 } 28 27 .form_area p:first-child{ 29 margin-bottom:0.5em;28 margin-bottom:0.5em; 30 29 } 31 30 .formBox{ 32 margin-bottom:20px;33 border:#A9ABAD solid 1px;34 border-radius:7px;35 -moz-border-radius:7px;36 -webkit-border-radius:7px;31 margin-bottom:20px; 32 border:#A9ABAD solid 1px; 33 border-radius:7px; 34 -moz-border-radius:7px; 35 -webkit-border-radius:7px; 37 36 } 38 37 .innerBox{ 39 padding:10px;40 border-bottom:#CCC solid 1px;38 padding:10px; 39 border-bottom:#CCC solid 1px; 41 40 } 42 41 .arrowBox{ 43 padding:10px 25px 10px 10px;44 background:url(../img/common/ico_arrowR.png) 95% center no-repeat;45 border-bottom:#CCC solid 1px;46 clear:both;42 padding:10px 25px 10px 10px; 43 background:url(../img/common/ico_arrowR.png) 95% center no-repeat; 44 border-bottom:#CCC solid 1px; 45 clear:both; 47 46 } 48 47 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 49 .arrowBox {50 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat;51 -webkit-background-size: 10px 15px;52 background-size: 10px 15px;53 }48 .arrowBox { 49 background: url(../img/common/ico_arrowR2.png) 95% center no-repeat; 50 -webkit-background-size: 10px 15px; 51 background-size: 10px 15px; 52 } 54 53 } 55 54 .box_header{ 56 font-size:16px;57 font-weight:bold;58 background:#EEE;59 padding:10px;60 border-radius:7px 7px 0 0;61 -moz-border-radius:7px 7px 0 0;62 -webkit-border-radius:7px 7px 0 0;63 border-bottom:#CCC solid 1px;55 font-size:16px; 56 font-weight:bold; 57 background:#EEE; 58 padding:10px; 59 border-radius:7px 7px 0 0; 60 -moz-border-radius:7px 7px 0 0; 61 -webkit-border-radius:7px 7px 0 0; 62 border-bottom:#CCC solid 1px; 64 63 } 65 64 /*合計(フォーム下)*/ 66 65 .total_area,.result_area{ 67 padding:10px;68 text-align:right;69 background:#F7F5F0;70 border-top:#FFF solid 1px;71 border-bottom:#A9ABAD solid 1px;66 padding:10px; 67 text-align:right; 68 background:#F7F5F0; 69 border-top:#FFF solid 1px; 70 border-bottom:#A9ABAD solid 1px; 72 71 } 73 72 .formBox .btn_area_btm{ 74 padding:10px;75 background:#F7F5F0;76 border-top:#FFF solid 1px;77 border-bottom:none;78 border-radius:0 0 7px 7px;79 -moz-border-radius: 0 0 7px 7px;80 -webkit-border-radius: 0 0 7px 7px;73 padding:10px; 74 background:#F7F5F0; 75 border-top:#FFF solid 1px; 76 border-bottom:none; 77 border-radius:0 0 7px 7px; 78 -moz-border-radius: 0 0 7px 7px; 79 -webkit-border-radius: 0 0 7px 7px; 81 80 } 82 81 .formBox div:first-child{ 83 border-radius:7px 7px 0 0;84 -moz-border-radius:7px 7px 0 0;85 -webkit-border-radius:7px 7px 0 0;82 border-radius:7px 7px 0 0; 83 -moz-border-radius:7px 7px 0 0; 84 -webkit-border-radius:7px 7px 0 0; 86 85 } 87 86 .formBox div:last-child{ 88 border-radius:0 0 7px 7px;89 -moz-border-radius: 0 0 7px 7px;90 -webkit-border-radius: 0 0 7px 7px;91 border-bottom:none;87 border-radius:0 0 7px 7px; 88 -moz-border-radius: 0 0 7px 7px; 89 -webkit-border-radius: 0 0 7px 7px; 90 border-bottom:none; 92 91 } 93 92 .form_area div:after{ 94 content: ".";95 display: block;96 clear: both;97 height: 0;98 visibility: hidden;93 content: "."; 94 display: block; 95 clear: both; 96 height: 0; 97 visibility: hidden; 99 98 } 100 99 … … 105 104 /*カゴの中の商品*/ 106 105 .cartinarea{ 107 padding:10px;108 border-bottom:#CCC solid 1px;106 padding:10px; 107 border-bottom:#CCC solid 1px; 109 108 } 110 109 .cartitemBox{ 111 padding:10px 0;112 border-bottom:#CCC solid 1px;113 clear:both;110 padding:10px 0; 111 border-bottom:#CCC solid 1px; 112 clear:both; 114 113 } 115 114 .cartinarea .cartitemBox:last-child{ 116 border-bottom:none;115 border-bottom:none; 117 116 } 118 117 .cartinarea .photoL{ 119 width:80px;118 width:80px; 120 119 } 121 120 .cartinarea .cartinContents{ 122 width:68%;123 float:right;124 display:block;125 position:relative;121 width:68%; 122 float:right; 123 display:block; 124 position:relative; 126 125 } 127 126 /* ----------------------------------------------- … … 129 128 ----------------------------------------------- */ 130 129 .bubbleBox{ 131 width:90%;132 font-weight:bold;133 margin:10px auto 20px auto;134 padding:10px 15px;135 position:relative;136 background-color:#F6F6F6;137 border:1px solid #C5C4C0;138 -moz-border-radius:7px;139 -webkit-border-radius:7px;140 -moz-box-shadow:inset 1px 1px 1px #FFF;141 -webkit-box-shadow:inset 1px 1px 1px #FFF;142 cursor:pointer;130 width:90%; 131 font-weight:bold; 132 margin:10px auto 20px auto; 133 padding:10px 15px; 134 position:relative; 135 background-color:#F6F6F6; 136 border:1px solid #C5C4C0; 137 -moz-border-radius:7px; 138 -webkit-border-radius:7px; 139 -moz-box-shadow:inset 1px 1px 1px #FFF; 140 -webkit-box-shadow:inset 1px 1px 1px #FFF; 141 cursor:pointer; 143 142 } 144 143 .bubble_arrow_line{ 145 width:0;146 height:0;147 border-color: #C5C4C0 transparent transparent transparent;148 border-style: solid;149 border-width: 10px;150 position:absolute;151 bottom:-21px;152 left:50%;144 width:0; 145 height:0; 146 border-color: #C5C4C0 transparent transparent transparent; 147 border-style: solid; 148 border-width: 10px; 149 position:absolute; 150 bottom:-21px; 151 left:50%; 153 152 } 154 153 .bubble_arrow{ 155 width:0;156 height:0;157 border-color: #F6F6F6 transparent transparent transparent;158 border-style: solid;159 border-width: 10px;160 position:absolute;161 bottom:-19px;162 left:50%;154 width:0; 155 height:0; 156 border-color: #F6F6F6 transparent transparent transparent; 157 border-style: solid; 158 border-width: 10px; 159 position:absolute; 160 bottom:-19px; 161 left:50%; 163 162 } 164 163 .bubble_announce{ 165 height:2.5em;166 background:url(../img/common/ico_arrowR.png) right center no-repeat;167 clear:both;168 vertical-align:middle;169 margin-bottom:8px;170 } 171 172 .bubble_announce {173 background: url(../img/common/ico_arrowR2.png) right center no-repeat;174 -webkit-background-size: 10px 15px;175 background-size: 10px 15px;176 }164 height:2.5em; 165 background:url(../img/common/ico_arrowR.png) right center no-repeat; 166 clear:both; 167 vertical-align:middle; 168 margin-bottom:8px; 169 } 170 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 171 .bubble_announce { 172 background: url(../img/common/ico_arrowR2.png) right center no-repeat; 173 -webkit-background-size: 10px 15px; 174 background-size: 10px 15px; 175 } 177 176 } 178 177 .bubbleBox p.fb{ 179 line-height:2.5em;178 line-height:2.5em; 180 179 } 181 180 .deliv_announce p{ 182 width:80%;181 width:80%; 183 182 } 184 183 .bubbleBox a:link,.bubbleBox a:visited{ 185 color:#333;184 color:#333; 186 185 } 187 186 /* ----------------------------------------------- … … 189 188 ----------------------------------------------- */ 190 189 .totalmoney_area{ 191 font-size:14px;192 font-weight:bold;193 padding:10px;194 border-bottom:#CCC solid 1px;190 font-size:14px; 191 font-weight:bold; 192 padding:10px; 193 border-bottom:#CCC solid 1px; 195 194 } 196 195 .point_announce{ 197 font-size:14px;198 font-weight:bold;199 margin-bottom:5px;196 font-size:14px; 197 font-weight:bold; 198 margin-bottom:5px; 200 199 } 201 200 .cartinContents .btn_delete{ 202 padding:2px;203 right:0;204 float:right;205 position:absolute;206 top:0;207 cursor:pointer;201 padding:2px; 202 right:0; 203 float:right; 204 position:absolute; 205 top:0; 206 cursor:pointer; 208 207 } 209 208 .cartinContents ul{ 210 float:right;211 clear:both;212 line-height:1.1;209 float:right; 210 clear:both; 211 line-height:1.1; 213 212 } 214 213 .cartinContents ul li{ 215 display:inline;216 float:left;214 display:inline; 215 float:left; 217 216 } 218 217 .cartinContents ul li.result{ 219 padding-left:0.5em;220 padding-top:1em;221 vertical-align:bottom;218 padding-left:0.5em; 219 padding-top:1em; 220 vertical-align:bottom; 222 221 } 223 222 … … 226 225 ----------------------------------------------- */ 227 226 .deliv_check{ 228 clear:both;227 clear:both; 229 228 } 230 229 .deliv_check dt{ 231 font-size:14px;232 font-weight:bold;233 padding:15px 10px 5px 10px;234 background:#EEE;235 border-top:#FFF solid 1px;236 vertical-align:middle;237 position:relative;238 display:block;230 font-size:14px; 231 font-weight:bold; 232 padding:15px 10px 5px 10px; 233 background:#EEE; 234 border-top:#FFF solid 1px; 235 vertical-align:middle; 236 position:relative; 237 display:block; 239 238 } 240 239 .deliv_check dt p{ 241 vertical-align:middle;240 vertical-align:middle; 242 241 } 243 242 .deliv_check dd{ 244 font-size:12px;245 padding:10px;246 border-bottom:#CCC solid 1px;247 display:block;243 font-size:12px; 244 padding:10px; 245 border-bottom:#CCC solid 1px; 246 display:block; 248 247 } 249 248 .deliv_check dd p{ 250 display:inline;251 float:left;249 display:inline; 250 float:left; 252 251 } 253 252 .deliv_check ul.edit{ 254 float:right;255 clear:right;256 display:inline;257 line-height:1.1;258 position:absolute;259 right:10px;260 top:8px;253 float:right; 254 clear:right; 255 display:inline; 256 line-height:1.1; 257 position:absolute; 258 right:10px; 259 top:8px; 261 260 } 262 261 .deliv_check dt:first-child{ 263 border-top:none;264 border-radius:7px 7px 0 0;265 -moz-border-radius:7px 7px 0 0;266 -webkit-border-radius:7px 7px 0 0;262 border-top:none; 263 border-radius:7px 7px 0 0; 264 -moz-border-radius:7px 7px 0 0; 265 -webkit-border-radius:7px 7px 0 0; 267 266 } 268 267 … … 271 270 ----------------------------------------------- */ 272 271 .delivitemBox{ 273 padding:10px;274 border-bottom:#CCC solid 1px;275 clear:both;276 position:relative;272 padding:10px; 273 border-bottom:#CCC solid 1px; 274 clear:both; 275 position:relative; 277 276 } 278 277 .delivitemBox .photoL{ 279 width:80px;278 width:80px; 280 279 } 281 280 .delivitemBox .delivContents{ 282 width:67%;283 float:right;284 display:block;285 position:relative;281 width:67%; 282 float:right; 283 display:block; 284 position:relative; 286 285 } 287 286 .delivContents p{ 288 float:left;287 float:left; 289 288 } 290 289 .delivContents ul{ 291 width:2.2em;292 float:right;293 right:15px;294 position:absolute;290 width:2.2em; 291 float:right; 292 right:15px; 293 position:absolute; 295 294 } 296 295 .delivContents ul li{ 297 text-align:center;298 clear:both;296 text-align:center; 297 clear:both; 299 298 } 300 299 … … 303 302 ----------------------------------------------- */ 304 303 .pay_area ul{ 305 padding:10px;306 margin-bottom:10px;307 font-weight:bold;304 padding:10px; 305 margin-bottom:10px; 306 font-weight:bold; 308 307 } 309 308 .pay_area ul li{ 310 margin-bottom:6px;309 margin-bottom:6px; 311 310 } 312 311 .pay_area02 select:first-child{ 313 margin-bottom:12px;312 margin-bottom:12px; 314 313 } 315 314 p.check_point{ 316 font-size:12px;317 padding-left:1em;318 font-weight:normal;315 font-size:12px; 316 padding-left:1em; 317 font-weight:normal; 319 318 } 320 319 p.check_point .box_point{ 321 margin-right:0.5em;320 margin-right:0.5em; 322 321 } 323 322 /* ----------------------------------------------- … … 325 324 ----------------------------------------------- */ 326 325 .cartcartconfirmarea{ 327 padding:0 10px;328 border-bottom:#CCC solid 1px;326 padding:0 10px; 327 border-bottom:#CCC solid 1px; 329 328 } 330 329 .cartconfirmBox{ 331 padding:10px 0;332 border-bottom:#CCC solid 1px;333 clear:both;334 position:relative;330 padding:10px 0; 331 border-bottom:#CCC solid 1px; 332 clear:both; 333 position:relative; 335 334 } 336 335 .cartconfirmBox:last-child{ 337 border-bottom:none;336 border-bottom:none; 338 337 } 339 338 .cartconfirmBox .photoL{ 340 width:80px;341 float:left;339 width:80px; 340 float:left; 342 341 } 343 342 .cartconfirmContents{ 344 width:67%;345 float:right;346 display:block;347 position:relative;343 width:67%; 344 float:right; 345 display:block; 346 position:relative; 348 347 } 349 348 .cartconfirmBox ul{ 350 float:right;351 clear:both;352 line-height:1.1;349 float:right; 350 clear:both; 351 line-height:1.1; 353 352 } 354 353 .cartconfirmBox ul li{ 355 display:inline;356 font-weight:bold;354 display:inline; 355 font-weight:bold; 357 356 } 358 357 .cartconfirmBox ul li.result{ 359 padding-left:1em;360 vertical-align:bottom;358 padding-left:1em; 359 vertical-align:bottom; 361 360 } 362 361 .result_area{ 363 font-size:14px;364 font-weight:bold;362 font-size:14px; 363 font-weight:bold; 365 364 } 366 365 .result_area dl{ 367 text-align:right;368 float:right;369 display:block;366 text-align:right; 367 float:right; 368 display:block; 370 369 } 371 370 .result_area dt,.result_area dd{ 372 text-align:right;371 text-align:right; 373 372 } 374 373 .result_area dt{ 375 font-size:11px;376 clear:left;377 float:right;374 font-size:11px; 375 clear:left; 376 float:right; 378 377 } 379 378 dl.point dl{ 380 display:block;379 display:block; 381 380 } 382 381 .point_confifrm dl{ 383 font-weight:bold;384 border-bottom:#CCC solid 1px;382 font-weight:bold; 383 border-bottom:#CCC solid 1px; 385 384 } 386 385 .point_confifrm dl:last-child{ 387 border-bottom:none;386 border-bottom:none; 388 387 } 389 388 .point_confifrm dt{ 390 width:60%;391 padding:10px 0 10px 10px;392 float:left;393 display:block;389 width:60%; 390 padding:10px 0 10px 10px; 391 float:left; 392 display:block; 394 393 } 395 394 .point_confifrm dd{ 396 width:30%;397 padding:10px 10px 10px 0;398 float:left;399 text-align:right;395 width:30%; 396 padding:10px 10px 10px 0; 397 float:left; 398 text-align:right; 400 399 } 401 400 .deliv_confirm dt{ 402 font-size:14px;403 font-weight:bold;404 padding:10px;405 background:#EEE;406 border-top:#FFF solid 1px;407 border-radius:7px 7px 0 0;408 -moz-border-radius:7px 7px 0 0;409 -webkit-border-radius:7px 7px 0 0;410 line-height:1.2;411 vertical-align:middle;412 position:relative;413 display:block;401 font-size:14px; 402 font-weight:bold; 403 padding:10px; 404 background:#EEE; 405 border-top:#FFF solid 1px; 406 border-radius:7px 7px 0 0; 407 -moz-border-radius:7px 7px 0 0; 408 -webkit-border-radius:7px 7px 0 0; 409 line-height:1.2; 410 vertical-align:middle; 411 position:relative; 412 display:block; 414 413 } 415 414 .deliv_confirm dd{ 416 font-size:12px;417 padding:10px;418 border-bottom:#CCC solid 1px;419 display:block;415 font-size:12px; 416 padding:10px; 417 border-bottom:#CCC solid 1px; 418 display:block; 420 419 } 421 420 .deliv_confirm dd:last-child{ 422 border-bottom:none;421 border-bottom:none; 423 422 } 424 423 .date_confirm li{ 425 padding-right:1em;426 display:inline;424 padding-right:1em; 425 display:inline; 427 426 } 428 427 /* ----------------------------------------------- … … 430 429 ----------------------------------------------- */ 431 430 dl.form_entry{ 432 width:100%;433 margin:0 0 15px 0;434 padding:0;435 border-top:#999 solid 1px;436 border-bottom:#999 solid 1px;437 position:relative;431 width:100%; 432 margin:0 0 15px 0; 433 padding:0; 434 border-top:#999 solid 1px; 435 border-bottom:#999 solid 1px; 436 position:relative; 438 437 } 439 438 dl.form_entry dt{ 440 font-weight:bold;441 padding:10px 12px 0;439 font-weight:bold; 440 padding:10px 12px 0; 442 441 } 443 442 dl.form_entry dd{ 444 padding:0 12px 10px;445 border-bottom:#CCC solid 1px;443 padding:0 12px 10px; 444 border-bottom:#CCC solid 1px; 446 445 } 447 446 dl.form_entry dd:last-child{ 448 border-bottom:0;447 border-bottom:0; 449 448 } 450 449 dl.form_entry .selectdate{ 451 margin-top:12px;452 padding:5px 6px 5px 2px;453 font-size:12px;454 vertical-align:bottom;450 margin-top:12px; 451 padding:5px 6px 5px 2px; 452 font-size:12px; 453 vertical-align:bottom; 455 454 } 456 455 dl.form_entry li{ 457 margin-bottom:0.3em;458 vertical-align:middle;456 margin-bottom:0.3em; 457 vertical-align:middle; 459 458 } 460 459 /* ----------------------------------------------- … … 462 461 ----------------------------------------------- */ 463 462 .thankstext{ 464 font-size:16px;465 color:#FF6633;466 font-weight:bold;467 padding:10px;468 margin-bottom:10px;463 font-size:16px; 464 color:#FF6633; 465 font-weight:bold; 466 padding:10px; 467 margin-bottom:10px; 469 468 } 470 469 #completetext,.shopInformation{ 471 font-size:14px;472 padding:10px;473 clear:both;470 font-size:14px; 471 padding:10px; 472 clear:both; 474 473 } 475 474 #completetext p,.shopInformation p{ 476 margin-bottom:0.5em;475 margin-bottom:0.5em; 477 476 } 478 477 /* ----------------------------------------------- … … 480 479 ----------------------------------------------- */ 481 480 dl.form_info{ 482 width:100%;483 margin:10px 0 15px 0;484 padding:0;485 border-bottom:#999 solid 1px;486 position:relative;481 width:100%; 482 margin:10px 0 15px 0; 483 padding:0; 484 border-bottom:#999 solid 1px; 485 position:relative; 487 486 } 488 487 dl.form_info dt{ 489 font-weight:bold;490 padding:10px 10px 0;488 font-weight:bold; 489 padding:10px 10px 0; 491 490 } 492 491 dl.form_info dd{ 493 padding:0 10px 10px;494 border-bottom:#CCC solid 1px;492 padding:0 10px 10px; 493 border-bottom:#CCC solid 1px; 495 494 } 496 495 dl.form_info dd:last-child{ 497 border-bottom:0;496 border-bottom:0; 498 497 } 499 498 500 499 #maps{ 501 width:88%!important;502 margin:10px auto!important;500 width:88%!important; 501 margin:10px auto!important; 503 502 } 504 503 /* ----------------------------------------------- … … 506 505 ----------------------------------------------- */ 507 506 #kiyaku_text{ 508 padding:10px 20px;509 border-bottom:#999 solid 1px;510 border-top:#999 solid 1px;511 overflow: hidden;512 text-overflow: ellipsis;513 line-height:1.3;507 padding:10px 20px; 508 border-bottom:#999 solid 1px; 509 border-top:#999 solid 1px; 510 overflow: hidden; 511 text-overflow: ellipsis; 512 line-height:1.3; 514 513 } 515 514 /*------------------------------------------------- … … 517 516 ----------------------------------------*/ 518 517 #errorBox { 519 text-align:left; 520 padding:20px; 521 } 522 523 518 text-align:left; 519 padding:20px; 520 }
Note: See TracChangeset
for help on using the changeset viewer.