/* 購物車結帳樣式 - Cart & Checkout Styles */

/* Cart Styles */
.relate{
    position:relative
}

.mobie_cart {
    float: right;
    margin-left: 20px;
}

.cart-count {    
    display: none;
}

.cart-count a{
    color:#fff
}

.cart-row { 
    position: absolute; 
    right: 10px
}

.add-cart { 
    background: #fff; 
    padding: 0 10px
}

.add-cart .btn-label {
    left: -10px;
}

.header_nav .cart:hover .btn-label{
    color:#E84E63
}

.header_nav .cart{
    border:1px solid #ccc;
    padding-right: 5px;
}

.header_nav .btn-label{   
    left: 0;
    width: 35px;
    height: 32px;
    margin-right: 5px;
    border-right: 1px solid #ccc;
}

.cart{
    float:right;
    position:relative;
    z-index:100;
    height:33px;
    Margin-top:5px
}

.cart .cart_info{
    float:left
}

.cart .cart_info .btn-primary,.thumbnail .btn-primary{
    color: #fff;
    background-color: #E14847;
    border-color: #D64140;
}

.cart .cart_info a{
    display:block;
    line-height:28px;
    font-size:14px
}

.cart .cart_info a:hover{
    text-decoration:none
}

.cart .cart_info a em{
    float:left;
    width:24px;
    height:24px;
    overflow:hidden;
    margin-right:6px;
    padding:7px 0 2px;
    color:#fff;
    font-size:12px;
    line-height:18px;
    text-align:center;
    background:url('../img/bag.gif') no-repeat 0 1px
}

.cart .list_wrapper{
    display:none;    
    position: absolute;
    top: 20px;
    right: 0;
    padding-top: 20px;
    max-height: 525px;
    overflow-y: scroll !important;
}

.cart .list_arrow{
    display:block;
    position:absolute;
    top:-10px;
    right:0;
    height:10px;
    width:80px;
    text-indent:-999em
}

.cart .loader{
    position:absolute;
    top:10px;
    right:10px
}

.cart .list{
    width: 260px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 5px 3px #999;
    background-color: #fff;
}

.cart .list .cart_empty{
    padding:15px 5px;
    font-size:14px;
    font-weight:bold;
    text-align:center
}

.cart .list li{
    padding:5px 0;
    background:url('../img/horizontal_spacer.gif') repeat-x left top
}

.cart .list li.first{
    background-image:none
}

.cart .list .package_goods_list{
    display:none
}

.cart .list .photo{
    display:block;
    float:left;
    width:40px;
    height:40px;
    margin-right:10px
}

.cart .list .photo img{
    width:40px;
    height:40px
}

.cart .list .name{
    display:block;
    padding-top:3px;
    line-height:16px
}

.cart .list .name em{
    margin-left:3px
}

.cart .list .package_name{
    display:block;
    padding:5px 5px 5px 20px;
    font-size:14px;
    font-weight:bold;
    line-height:18px;
    background:url('../img/icon/package.gif') no-repeat left 6px
}

.cart .list .extra_info{
    display:block;
    color:#999
}

.cart .list .extra_info em{
    display:inline-block;
    color:#E84E63
}

.cart .list span.price{
    float:left;
    width:130px;
    padding-top:3px;
    font-weight:bold
}

.cart .list .action{
    float:right;
    width:50px;
    padding-top:3px;
    text-align:right
}

.cart .list .action a{
    display:inline-block;
    padding:2px 8px;
    background:#555;
    color: #fff; 
    font-size: 13px;
}

.cart .list .action a:hover{
    color:#fff;
    text-decoration:none;
    background-color:#E84E63;
    background-position:left -90px
}

.cart .list .total{
    margin-top:5px;
    padding:5px 0;
    border-top:1px solid #eee
}

.cart .list .total .price{
    font-weight:bold
}

.cart .list .next{
    padding:5px 0;
    text-align:right
}

.cart .list .next a:hover{
    border-color:#333
}

.cart .list .next a {
    background: none;
    color: #333;
    border-radius: 0;
    border: 1px solid #ccc;
}

.cart .list .next span {
    color: #333;
    text-shadow: none;
}

.cart .list .close{
    position:absolute;
    left:20px;
    bottom:15px;
    display:none
}

.cart_list  .btn-warning {
    float:right;
}

/* Mobile Cart */
.mobie_cart a.btn.btn-orange {
    width: 100% !important;
    border: 1px solid #ccc !important;
}

.mobie_cart .next:hover a.btn.btn-orange {
    border: 1px solid #333 !important;
}

/* Flow Styles */
.current-step {
    width: 50px;
    height: 50px;
    float: left;
    background-color: #F8BA01;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    font-size: 25px;
    text-align: center;
    padding-top: 13px;
    color: #fff;
    margin-right:10px;
}

.shop-step {
    width: 50px;
    height: 50px;
    float: left;
    background-color: #ccc;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    font-size: 25px;
    text-align: center;
    padding-top: 13px;
    color: #fff;
    margin-right:10px;
}

.shopping-step {
    line-height: 42px;
    height: 50px;
    width: 100%;
    margin: 15px 0px;
}

.check-cart.row {
    border: 1px solid #eee;
    padding-top: 35px;
    margin-top: 50px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    background: #fff
}

.shopping-step {
    position: absolute;
    margin-top: -60px;
}

/* Flow Wrapper */
.flow_wrapper .full_box{
    position:relative;
    margin-top:30px
}

.flow_step2{
    background-position:center -36px
}

.flow_step3{
    background-position:center -72px
}

.flow_wrapper .box .bd{
    padding:14px
}

#page_flow .flow_wrapper .full_box {  
    margin: 60px 0 30px;
    border-top: 1px dashed #eee;
    padding-top: 35px;
}

.flow_wrapper .full_box .bd{
    padding-top:32px;
    padding-bottom:32px
}

.flow_wrapper .box h4{
    padding:8px 10px;
    font-size:1.2em
}

.flow_wrapper .box .form h4{
    padding:0;
    margin:0 0 .6em;
    color:#ff6600;
    font-size:18px
}

.flow_wrapper .box .content{
    padding:0;
    border-width:0
}

.flow_wrapper .form label b, .user .form .label b{
    max-width:20%
}

.flow_wrapper .form div.submit_wrap{
    padding:5px 0 5px 12em
}

.flow_wrapper .form label .directions{
    margin-left:12em
}

.flow_wrapper .form label select{
    width:auto
}

/* Cart List in Flow */
.flow_wrapper .cart_list .content{
    padding-right:10px
}

.flow_wrapper .cart_list .photo{
    float:left;
    padding-right:10px
}

.flow_wrapper .cart_list .photo img{
    height:50px;
    width:50px
}

.flow_wrapper .cart_list .name{
    display:block;
    padding:2px;
    color:#333;
    font-size:15px
}

.flow_wrapper .cart_list .package_name{
    padding:5px 5px 5px 20px;
    font-size:14px;
    font-weight:bold;
    line-height:18px;
    background:url('../img/icon/package.gif') no-repeat left 6px
}

.flow_wrapper .cart_list .extra_info{
    color:#999;
    font-size:13px
}

.flow_wrapper .cart_list .extra_info em{
    margin-left:2px;
    padding:2px 5px;
    color:#fff;
    background-color:#ff8c22;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.flow_wrapper .cart_list .number{
    width:30px;
    padding:2px;
    color:#999
}

.flow_wrapper .cart_list .subtotal{
    font-size:14px
}

.flow_wrapper .cart_list .actions{
    text-align:right
}

.flow_wrapper .cart_list .actions p{
    float:left;
    font-size:14px;
    text-align:left
}

.flow_wrapper .cart_list .actions .price{
    font-weight:bold
}

.cart_list .package_goods_list em{
    margin-right:5px;
    padding:2px 5px;
    background-color:#eee;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.checkout_cart_list .package_goods_list{
    display:none
}

/* Consignee List */
.flow_wrapper .consignee_list{
    margin-top: 40px;
    padding-top: 35px;
    border-top: 1px solid #eee
}

.consignee_list form{
    margin-bottom:10px
}

.consignee_list input{
    margin-right:5px
}

.consignee_list input[type='text'], .consignee_list input[type='password']{
    width:160px
}

/* Favourable List */
.flow_wrapper .favourable_list h4{
    color:#b00
}

.favourable_list h4 {
    font-size: 15px;
}

.flow_wrapper .zoom{
    padding-right:10px
}

/* Order Total */
.order_total .complete{
    padding:10px 0;
    color:#999;
    font-size:12px;
    line-height:14px
}

.order_total .total_list{
    padding-bottom:10px;
    font-size:14px;
    line-height:16px;
    text-align:right;
    border-bottom:1px dashed #ccc
}

.order_total .total_fee{
    padding-top:10px;
    font-size:1.3em;
    line-height:1.4em;
    text-align:center
}

.order_total .total_fee .price{
    font-size:1.4em;
    font-weight:bold;
    color: #B60000;
}

/* Flow Action */
.flow_action{
    display:inline-block;
    width:100%;
    padding:30px 0 50px
}

p.flow_action{
    text-align:center
}

.flow_action .next{
    float:right;
    margin-right:365px
}

.flow_action .back{
    margin-right:20px;
    line-height:40px;
    font-size:16px
}

.flow_action  .btn-primary {
    padding:10px 20px;
}

/* Checkout Wrapper */
.checkout_wrapper .option_title{    
    margin-top: -1px;
    padding: 8px 15px; 
    color: #333;
    border-bottom: 1px dashed #ccc;
}

.checkout_wrapper .option_title h2{
    font-size:16px;
    line-height:18px
}

.checkout_wrapper .option_inner{
    padding:12px
}

.checkout_wrapper .option_item{
    float:left;
    padding:10px 10px
}

.checkout_wrapper .option_item label{
    position:relative;
    display:block;
    height:50px;
    width:150px;
    margin:0 auto 5px;
    font-size:14px;
    font-weight:bold;
    line-height:50px;
    text-align:center;
    background:#fafafa url('../img/option_item_bg.gif') no-repeat left top;
    border:1px solid #eee
}

.checkout_wrapper .option_item label .name{
    display:block;
    height:50px;
    width:150px;
    overflow:hidden
}

.checkout_wrapper .option_item label:hover, .checkout_wrapper .option_item label.hover{
    border-color:#ccc
}

.checkout_wrapper .option_item label.checked{
    border-color:#f60
}

.checkout_wrapper .option_item label.disabled{
    opacity:0.5;
    cursor:default
}

.checkout_wrapper .option_item label .status{
    position:absolute;
    left:-1px;
    top:-1px;
    display:none;
    height:50px;
    width:150px;
    background:transparent url('../img/option_item_bg.gif') no-repeat left bottom;
    border:2px solid #74B5FE
}

.checkout_wrapper .option_item label.checked .status{
    display:block
}

.checkout_wrapper .option_item img{
    position:absolute;
    left:0;
    top:0;
    height:50px;
    width:150px
}

.checkout_wrapper .option_item input{
    position:absolute;
    right:5px;
    bottom:5px
}

.checkout_wrapper .option_item .info{
    display:block;
    width:175px;
    margin:0 auto 5px;
    line-height:16px;
    text-align:center
}

.checkout_wrapper .option_item .info .price{
    display:block
}

.checkout_wrapper .option_item .info .free{
    display:block;
    color:#999
}

.checkout_wrapper .option_item .info .not_supported{
    display:block;
    color:#999
}

.checkout_wrapper .option_item .free sup {
    display: none;
}

.checkout_wrapper .option_extra{
    clear:both
}

.checkout_wrapper .option_inner .current_intro{
    display:block;
    clear:both;
    margin-bottom:10px;    
    padding: 30px 9px 30px 45px;
    line-height:16px;
    border: 1px solid #eee;
    background-image:url('../img/note.png');
    background-repeat:no-repeat;
    background-position: 15px 30px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
}

.checkout_wrapper .option_inner .current_intro a{
    padding:0 2px;
    text-decoration:underline
}

.checkout_wrapper .option_inner .insure_wrapper{
    text-align:right
}

.checkout_wrapper .option_inner .insure_disabled{
    display:none
}

.checkout_wrapper .card_message{
    clear:both;
    padding:9px;
    background-color:#f8f8f8;
    border:1px solid #eee
}

.checkout_wrapper .card_message h4{
    float:left;
    padding:2px 5px
}

.checkout_wrapper .card_message textarea{
    max-width:350px
}

.checkout_wrapper .postscript textarea{
    max-width:350px;
    margin-left:20px
}

.checkout_wrapper .current_option h2 span{
    color:#b00
}

.checkout_wrapper .later_option .option_inner{
    display:none
}

.checkout_wrapper .extra_options{
    clear:both;
    padding:9px 19px;
    margin:9px 0; 
    background-color: #fff; 
    box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    -moz-box-shadow: 1px 1px 3px #ccc;
}

.checkout_wrapper .extra_options .item{
    float:left;
    width:100%;
    padding:5px 0;
    border-bottom:1px dotted #eee
}

.checkout_wrapper .extra_options .last{
    border-bottom-width:0
}

.checkout_wrapper .extra_options .inner{
    float:left
}

.checkout_wrapper .extra_options .price_input{
    width:50px;
    margin-right:5px
}

.checkout_wrapper .extra_options .text_input{
    width:100px;
    margin-right:5px
}

.checkout_wrapper .extra_options h3 {
    font-size: 14px !important;
    line-height: 2em !important;
    margin-bottom: 10px !important;
}

.checkout_wrapper .details {
    background-color: #F7F7F7;
    margin-top: 20px;
    padding-top: 20px;
    box-shadow: 1px 1px 5px #ccc;
    -webkit-box-shadow: 1px 1px 5px #ccc;
    -moz-box-shadow: 1px 1px 5px #ccc;
}

.checkout_wrapper .detail_inner {
    padding: 5px 10px;
    margin-top: 5px;
    border: 2px dashed #888;
    max-width: 50%;
}

.checkout_wrapper .details h2.title{
    background-image:none;
    border-color:#FFF2BC;
}

.checkout_wrapper .details h2.title span{
    float:left
}

.checkout_wrapper .cart_list li{
    position:relative;
    float:left;
    width:100%;
    padding:5px;
    background:url('../img/horizontal_spacer.gif') repeat-x left bottom
}

.checkout_wrapper .cart_list .photo{
    display:block;
    float:left;
    width:40px;
    height:40px;
    margin-right:5px;
    padding:2px;
    background-color:#fff;
    border:1px solid #eee
}

.checkout_wrapper .cart_list .photo img{
    width:40px;
    height:40px
}

.checkout_wrapper .cart_list .name em{
    margin-left:3px
}

.checkout_wrapper .cart_list .price{
    font-weight:bold
}

.checkout_wrapper .cart_list .drop{
    visibility:hidden;
    position:absolute;
    top:15px;
    right:5px
}

.checkout_wrapper .cart_list li:hover .drop, .checkout_wrapper .cart_list li.hover .drop{
    visibility:visible
}

.checkout_wrapper .cart_list .total{
    clear:both;
    padding:5px 10px;
    text-align:right
}

.checkout_wrapper .cart_list .next{
    padding:5px 10px;
    text-align:right
}

.checkout_wrapper .consignee_info{
    font-size:14px;
    line-height:2em;
    margin: 10px
}

p.consignee_info {
    margin: 10px 0 10px;
}

.checkout_wrapper .consignee_info strong{
    color:#333;
    font-size:14px;
    font-weight:bold
}

.checkout_wrapper .next{
    float:right;
    margin-right:0
}

.checkout_wrapper .back{
    float:right;
    margin-right:10px
}

.checkout_wrapper .goods_card textarea, .checkout_wrapper .other_info textarea{
    width:450px
}

.checkout_wrapper .other_info{
    line-height:25px
}

.checkout_wrapper .other_info span{
    line-height:25px;
    vertical-align:middle
}

.checkout_wrapper .other_info .price_input{
    width:50px
}

.checkout_wrapper .other_info p{
    padding:3px 0
}

.current_intro input {
    display: inherit !important;
}

a.tip.edit {
    color: #0075ff;
}

.current_intro h3.title {
    font-size: 14px;
    margin-top: 15px;
}

/* Flow Done */
.flow_done{
    margin-top:20px
}

.flow_done .pay_online{
    margin:30px;
    text-align:center
}

/* Inner Button */
.inner .btn.btn-red {
    background-image: none;
    border-radius: 0;
    height: 30px;
    line-height: 1em !important;
}