﻿

h5 {
    margin-bottom:3px;
}

/*==========================================
 Global Range
===========================================*/
#ProdItem {
    width:100%;
    margin:0;
    border:none;
    padding:0;
}

/*==========================================
 MainArea : All sub style are set to limited in #MainArea
 in case that in ProdDtl, user use the same id/class name.
===========================================*/
#MainArea {
    width:100%;
    margin:0;
    padding:0;
    color:#707070  ;
    font-size:medium; 
    overflow:hidden;
}

#LogoArea {
    display:block;
    width:250px;
    margin:5px auto;
    border:none;
    padding: 10px 0 3px 0;
}

#TextArea {
    display:block;
    width:100%;
    margin:0;
    border:none;
    padding: 5px 0px 3px 0px;
    text-align:left;
    overflow:hidden;
}

@media only screen and (min-width: 769px) {
    #LogoArea {
        display:inline-block;
        width:30%;
        /*max-width:250px;*/
        margin:5px;
        float:left;
    }

    #TextArea {
        display:inline-block;
        width:65%;
        margin:0;        
    }
}

@media only screen and (min-width: 961px) {
}


/*------------------------------------------------*/
#TextArea .minor {
    font-size:small;
}

#TextArea .empha {
    font-weight:bold;
}

/*------------------------------------------------*/
#ProdTtl {
    margin: 0px 0px 5px 0px;
    padding: 0px;
    font-size:x-large;
    font-weight:bold;
    word-wrap: break-word;
    color:black;
}

/*------------------------------------------------*/
#ProdDesc {
    margin:5px 0;
    font-size:medium;
    
    color: #009900;
    word-wrap: break-word;
}

/*------------------------------------------------*/
#DeliveryArea {
    width:100%;
    border:none;

    margin:10px 0;
    padding:5px 0;
}

/*------------------------------------------------*/
#PriceArea, #DeductArea {
    width:100%;
    margin:10px 0;
    padding:3px 0;
}

.CurrencySign {
    font-family: Arial, Helvetica, sans-serif;
    font-size:medium;
}


#ListPriceTtl { 
    font-size:medium;
    background-color:white;
}

#ListPriceVal {
    text-decoration: line-through;
}

#OnlinePriceTtl
, #SpecPriceTtl
, #DiscountedPriceTtl
, #DeductPartTtl { 
    font-size:medium;
}

#OnlinePriceVal {
    font-size:x-large;
    color:#C00000;
}

#SpecPriceVal {
    font-size:x-large;
    color:darkorange;
}

#DeductPartTtl {
    font-weight: bold;
    color: #C00000
}

#DeductPartVal {
    font-size: x-large;
    color: #C00000;
}

#DiscountPriceVal {
    font-size:x-large;
    color:deeppink;
}

.OnlinePriceVal {
    font-size: x-large;
    color: #C00000;
}
/*------------------------------------------------*/
#VenusOnlinePriceTtl { 
    font-size:medium;
}

#VenusOnlinePriceVal {
    font-size: x-large;
    color: #C00000;
}


/*------------------------------------------------*/
div.Actions {
    display:inline-block;
    margin:2px 5px 0 0;
    padding:8px 8px;
    border:none;
    border-radius:3px;
}

a.Actions {
    color:white;
    text-decoration:none;
}

#ActionShopOnine {
    background-color:#C00000 ;
}

#ActionShopCartRange {
    margin-top:5px;
    padding:3px 4px;
    border:1px solid gray;
    border-radius:3px 4px;

    text-align:center;
}

.shop-cart-message {
    background-color: #C00000;
    color:white;
    display:block;
    font-size:medium
}

#ActionShopCart {
    background-color: darkorange;
}

#ActionCheckOut {
    background-color:ForestGreen  ;
}

#ActionShowShopCart {
    background-color: indigo;
}

#QuantityArea {
    margin:5px auto 4px;
}

#Quantity {
    display: inline-block;
    margin: auto 3px;
}

#Quantity input {
    display:inline-block;
    vertical-align:middle;
    margin:0;   
    padding:4px 0;
    border:1px solid gray;
    line-height:normal; /* Important */
    text-align:center;
    font-size:14px;
    -moz-box-sizing: padding-box;
}

#Quantity input[type="text"] {
    width:40px;
}

#Quantity input[type="button"] {
    width:30px;
}

#btnDecQuantity {
    border-right-width:0;
}

#btnIncQuantity {
    border-left-width:0;
}

#AvailUnits {
    display: inline;
    font-size: medium;
    color: #C00000;
    vertical-align:middle;
}

/*------------------------------------------------*/
.OrderLimit {
    font-size: medium;
}

#MainArea ul .OrderLimitEmpha {
    color:red;
    margin:auto 3px;
}

#MainArea ul {
    margin-top:0;
    padding-left:0;
    list-style-position: inside;
    list-style-type: square;
    line-height:130%
}


/*==========================================
   MiddleSplit
===========================================*/
#MiddleSplit {
    width: 100%;
    clear:both;
}

/*==========================================
   ProdDtlArea
===========================================*/
#ProdDtlArea {
    width:100%;
    border: 1px solid #C0C0C0;
    overflow:hidden;
}

#ProdDtlArea .embed-container  { 
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
}

#ProdDtlArea .embed-container iframe, 
#ProdDtlArea .embed-container object, 
#ProdDtlArea .embed-container embed  { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

#ProdDtlArea img {
   max-width:100%
}


@media only screen and (min-width: 769px) {
    #QuantityArea {
        display:inline;
    }

}

@media only screen and (min-width: 961px) {
}