/* ------------------------------------------------------------- */
/* layout-account.css                                                    */
/* CSS file containing override styles for Daddy and Mummy bear  */
/* Issue 1.6 - 20-Nov-2012 - VLD                                 */
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
/* DADDY BEAR                                                    */
/* Represents the widest format normally used on desktop dispays */
/* ------------------------------------------------------------- */



/* My Account General styles*/
#myaccount {position:relative}
#myaccount .account-heading{padding-bottom:10px; margin-bottom:20px; border-bottom:1px dotted #ddd}
#myaccount .account-heading h3{display:inline}
#myaccount a.edit-link,
#myaccount a.delete-link{font-size:0.85em; margin-left:10px}
#create-account-link{float:left; display:block; display:block; height:32px; margin:0; margin-top:10px; padding:0 15px; border:0; color:#FFF; font-size:0.8em; font-weight:bold; line-height:32px; text-decoration:none; text-transform:uppercase; background:#FF0101; cursor:pointer; -webkit-appearance:none}
#myaccount p{font-size:0.8em}
#myaccount p.compulsory-field-text{font-style:italic; font-size:0.75em}
#myaccount p.compulsory-field-text span{font-weight:bold; font-style:normal; padding-right:10px; background:url(/images/design/icon-compulsory.png) no-repeat right top}

/* My Account Login */
#myaccount .login{float:left; width:435px; margin:15px 0 40px; padding:0; padding-right:25px}
#myaccount .register{float:left; width:435px; margin:15px 0 40px; padding:0; padding-left:25px}
#login-form{float:left; width:100%; margin-bottom:40px}

/* My Account Forms */
#myaccount form{float:left; width:100%; margin-bottom:50px}
#myaccount form ul{float:left; width:100%; margin:0; margin-top:10px}
#myaccount form li{float:left; width:100%; height:50px; color:#555; font-size:1em; list-style:none; margin:0; margin-bottom:6px; padding:0}
#myaccount form li h4{margin:0}
#myaccount form li.caption-text p{font-size:0.75em; line-height:1.1em}
#myaccount form li.caption-text{height:auto; padding-bottom:5px}
#myaccount form label{display:inline-block; vertical-align:middle; text-transform:uppercase; padding:0; padding-left:6px; color:#333; font-size:0.7em; line-height:1em; text-transform:uppercase}
#myaccount form input{margin:0; padding:0; border:none}
#myaccount form input.text{display:block; vertical-align:middle; width:298px; height:26px; margin:0; font-size:0.85em; line-height:26px; color:#333; line-height:1em; padding:0 5px; border:1px solid #ddd; background:#f2f2f2}
#myaccount form input.checkbox{display:inline-block; vertical-align:middle; margin-right:5px; padding:0}
#myaccount form input.send-button {clear:left; float:left; display:block; height:32px; margin:0; margin-top:10px; padding:0 15px; border:0; color:#FFF; font-size:0.8em; font-weight:bold; line-height:32px; text-decoration:none; text-transform:uppercase; background:#FF0101; cursor:pointer; -webkit-appearance:none}
#myaccount form input.update-button{font-size:0.9em; color:#0076BC; text-decoration:underline; cursor:pointer}
#myaccount form select{display:block; width:auto; margin-top:1px; color:#3a3a3a; font-size:0.85em; text-transform:none}
#myaccount form li.title{}
#myaccount form li.title select{width:auto}
#myaccount form li.address-line-3{display:none}
#myaccount form li.compulsory label{font-weight:bold; padding-right:10px; background:url(/images/design/icon-compulsory.png) no-repeat right top}
#myaccount form li.subscribe{height:25px}
#myaccount form li.email,
#myaccount form li.telephone,
#myaccount form li.town,
#myaccount form li.county-text,
#myaccount form li.county-select,
#myaccount form li.postcode,
#myaccount form li.country{width:150px; *height:46px}
#myaccount form li.postcode{clear:left}
#myaccount form li.telephone,
#myaccount form li.county-text,
#myaccount form li.county-select,
#myaccount form li.country{margin-left:10px}
#myaccount form li.country{height:auto}
#myaccount form li.email input.text,
#myaccount form li.telephone input.text,
#myaccount form li.town input.text,
#myaccount form li.county-text input.text,
#myaccount form li.postcode input.text{width:138px}
#myaccount form li.county-select select,
#myaccount form li.country select{width:150px}
#myaccount form li.telephone input.text{*margin-left:-10px}
#myaccount form li.county-text{display:block}

/* Delivery address edit */
#delivery-edit form{width:310px}

/* My Account Personal information */
#myaccount .personal-information{float:left; width:340px; margin:15px 0 40px}
#myaccount .personal-information table{float:left; width:100%; margin:0; border:none}
#myaccount .personal-information td{padding:0 0 12px; border:none; background:none}
#myaccount .personal-information td.heading{width:28%; color:#555}

/* Billing address, hide in css but JS enable */
#myaccount .billing-address{float:left; width:340px; margin:15px 0 40px 40px}
#myaccount .billing-address ul{margin:0; margin-bottom:20px}
#myaccount .billing-address li{margin:0; margin-bottom:2px; padding:0; line-height:1.3em; list-style:none outside}
#myaccount .billing-address form ul{float:left; width:100%; margin:0; margin-top:10px}
#myaccount .billing-address form li{float:left; width:100%; color:#555; font-size:1em; list-style:none; margin:0; margin-bottom:5px; padding:0}
#myaccount .billing-address form li.town input.text,
#myaccount .billing-address form li.county-text input.text,
#myaccount .billing-address form li.postcode input.text{width:333px}
#myaccount .billing-address form li.county-select select,
#myaccount .billing-address form li.country select{width:100%}
#myaccount .billing-address form li.town,
#myaccount .billing-address form li.county-text,
#myaccount .billing-address form li.county-select,
#myaccount .billing-address form li.postcode,
#myaccount .billing-address form li.country{width:167px; *height:46px}
#myaccount .billing-address form li.postcode{clear:left}
#myaccount .billing-address form li.county-text,
#myaccount .billing-address form li.county-select,
#myaccount .billing-address form li.country{margin-left:11px}
#myaccount .billing-address form li.town input.text,
#myaccount .billing-address form li.county-text input.text,
#myaccount .billing-address form li.postcode input.text{width:155px}
#myaccount .billing-address form li.county-select select,
#myaccount .billing-address form li.country select{width:167px}

/* Billing address - Company Details */
#myaccount .billing-address ul.company-details{width:325px; margin:20px 0; padding:10px; background:#f2f2f2}
#myaccount .billing-address .company-details li{margin-bottom:5px}
#myaccount .billing-address .company-details p{margin:0}
#myaccount .billing-address .company-details li.company-number,
#myaccount .billing-address .company-details li.tax-number{display:none; width:110px}
#myaccount .billing-address .company-details li.tax-number{margin-left:10px}
#myaccount .billing-address .company-details li.company-number input.text,
#myaccount .billing-address .company-details li.tax-number input.text{width:98px}
#myaccount .billing-address .company-details li.tax-number input.text{*margin-left:-10px}
#myaccount .billing-address .company-details li.tax-number-only{margin-bottom:10px}
#myaccount .billing-address .company-details li.company-number{display:none}

/* Hide forms */
#personal-edit,
#password-reset,
#billing-address,
#edit-billing-back-link,
#personal-information,
#account-edit-back-link,
#password-reset-back-link,
#edit-delivery-link,
#edit-delivery-back-link,
#create-account-link,
#forgot-password-form{display:none}

#billing-edit, #personal-edit, #password-reset, #delivery-edit {display:block} /* Hide when JS enabled */

/* Billing address form */
#billing-edit form input.text{width:333px}
#billing-edit form .company-details input.text{width:313px; background:#FFF}

/* Delivery addresses */
#myaccount .delivery-addresses{float:left; width:100%; margin:15px 0 40px}
#myaccount .delivery-address{float:left; width:220px; height:210px; margin:0 20px 10px 0}
#myaccount .delivery-address h4{display:inline; margin:0}
#myaccount .delivery-address ul{margin:0; margin-top:5px}
#myaccount .delivery-address li{margin:0; margin-bottom:2px; padding:0; line-height:1.3em; list-style:none outside}
#myaccount .delivery-address p{margin-top:5px}
#myaccount .delivery-address li.name{margin-bottom:5px}

/* Billing and Delivery address common styles */
#myaccount li.name{font-weight:bold}
#myaccount li.company-name{margin-top:5px}
#myaccount li.tax-number{margin-bottom:5px}
#myaccount li.telephone{margin-top:5px}
#myaccount p.form-caption{float:left; margin:10px 0 20px; font-size:0.75em; color:#555; font-style:italic; text-transform:none}



/* ---------------------- MY ACCOUNT ORDER HISTORY -------------------- */

/* Order History */
#myorders {position:relative}
#myorders .account-heading{position:relative; padding-bottom:10px; border-bottom:1px solid #DDD}
#myorders .account-heading h3{display:inline}
#myorders .account-heading p{position:absolute; top:0; right:0; line-height:1.8em; text-align:right; font-weight:bold}
#myorders a.back-link{font-size:0.9em; margin-left:10px}
#myorders .order-history{float:left; width:100%; margin:15px 0 40px; border:none}
#myorders .order-history table{xfloat:left; width:100%; margin:15px 0 5px; border:none}
#myorders .order-history table#new-orders{margin-bottom:50px}
#myorders .order-history th{border:none; border-bottom:1px solid #DDD; background:#FFF}
#myorders .order-history td{font-size:0.9em; padding:10px; border:none; border-bottom:1px solid #DDD; background:none}
#myorders .order-history td a{font-weight:normal}
#myorders .order-history th.view-order{width:8%}
#myorders .order-history th.order-total,
#myorders .order-history td.order-total{text-align:center}
#myorders .order-history td.status{font-weight:bold}
#myorders .order-history td p{font-size:0.9em; line-height:1.2em; margin:0}
#myorders span.label{color:#7A7A7A}

/* Order History Pagination*/
#myorders .order-history .pagination{float:right; width:auto; padding:0; margin:0; background:none}
#myorders .order-history .pagination ul{width:auto}
#myorders .account-heading .pagination{position:absolute; top:0; right:0}

/* Message text*/
#myorders .message-text{float:left; width:600px; margin:15px 0 20px}




/* ---------------------- MY ACCOUNT ORDER SUMMARY -------------------- */

/* Order Summary */
#myorders .order-summary{float:left; width:100%; margin:60px 0 40px; border:none}
#myorders .order-summary .print-button{position:absolute; top:-115px; right:0; width:24px; height:24px; background:url(/images/design/icon-print.png) no-repeat}
#myorders .order-summary table.order-summary-details{float:left; width:100%; margin:0; margin-top:20px; margin-bottom:40px; border:none}
#myorders .order-summary .order-summary-details th{border:none; padding:10px; color:#7A7A7A; font-size:0.7em; line-height:1.2em; text-transform:uppercase; border-bottom:1px solid #DDD; background:#f2f2f2}
#myorders .order-summary .order-summary-details td{font-size:0.9em; padding:0 0 10px; color:#3A3A3A; border:none; background:none}
#myorders .order-summary p{margin:0}
#myorders .order-summary .order-summary-details td.label{width:20%; color:#7a7a7a}
#myorders .order-summary .shopping-cart-table{margin-top:10px}
#myorders .order-summary .shopping-cart-table th{border-top:none}
#myorders .order-summary .shopping-cart-table th.product-name,
#myorders .order-summary .shopping-cart-table td.product-name{width:45%}


/* Order Summary Table*/
#myorders .order-summary table.order-items{margin-top:0; border-bottom:1px solid #DDD}
#myorders .order-summary table.order-items td{padding:10px; border-bottom:1px dotted #DDD}
#myorders .order-summary table.order-items .sub-total td{padding-bottom:0; padding-top:10px; text-align:right; color:#7a7a7a; border:none}
#myorders .order-summary table.order-items .delivery td,
#myorders .order-summary table.order-items .vat td{padding-bottom:0; padding-top:4px; text-align:right; color:#7a7a7a; border:none}
#myorders .order-summary table.order-items .total td{padding-bottom:10px; text-align:right; font-size:1em; color:#7a7a7a; border:none}
#myorders .order-summary table.order-items td.price{text-align:center; color:#3a3a3a}
#myorders .order-summary table.order-items .total td.price{font-weight:bold}
#myorders .order-summary table.order-items td.product-image{width:85px}
#myorders .order-summary table.order-items td.product-name{width:320px}
#myorders .order-summary table.order-items .product-action-buttons{margin-top:10px; font-size:0.85em; font-weight:bold}
#myorders .order-summary table.order-items .product-action-buttons a{float:left; display:block; height:24px; margin:0; margin-right:5px; padding:0 10px; border:0; color:#FFF; line-height:1.9em; text-transform:lowercase; text-decoration:none; border-radius:8px; -ms-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; background:#0076BC; cursor:pointer}
#myorders .order-summary table.order-items td.label{width:auto; color:#7a7a7a; text-align:right}
#myorders .order-summary table.order-items td img{display:block; max-width:85px; max-height:85px; margin:0}
* html #myorders .order-summary table.order-items td img{width:85px; height:85px}
#myorders .order-summary table.order-items p{font-size:1em; line-height:1.2em}
#myorders .order-summary table.order-items p.product-options{font-size:90%; margin-top:5px; font-style:italic}
#myorders .order-summary table.order-items .quantity,
#myorders .order-summary table.order-items .price{text-align:center}

/* Order Summary Addresses */
#myorders .order-summary .billing-address{float:left; width:300px; margin:50px 40px 0 0}
#myorders .order-summary .delivery-address{float:left; width:300px; margin:50px 40px 0 0}
#myorders .order-summary .billing-address ul,
#myorders .order-summary .delivery-address ul{float:left; width:100%; margin:20px 0}
#myorders .order-summary .billing-address li,
#myorders .order-summary .delivery-address li{margin:0; padding:0; line-height:1.3em; list-style:none outside}
#myorders .order-summary li.name{font-weight:bold; margin-bottom:4px}
#myorders .order-summary li.telephone{margin-top:4px}

/* Order Summary Form */
#myorders .form-buttons {float:right; width:auto; margin:46px 0 0 0}
#myorders .form-buttons .back-button-form,
#myorders .form-buttons .confirm-button-form,
#myorders .form-buttons .pay-button-form{float:right}
#myorders .form-buttons .confirm-button-form{display:none}
#myorders .form-buttons .back-button-form{margin-right:10px}
#myorders .form-buttons input.back-button{float:left; display:block; height:38px; margin:0; padding:0 10px; border:0; color:#555; font-size:0.9em; font-weight:normal; line-height:38px; text-transform:uppercase; text-decoration:none; background:#DDD; cursor:pointer}
#myorders .form-buttons input.back-button:hover{background:#CCC}
#myorders .form-buttons input.send-button{float:left; display:block; height:38px; margin:0; padding:0 25px; border:0; color:#FFF; font-size:0.9em; font-weight:bold; line-height:38px; text-transform:uppercase; text-decoration:none; background:#072135; cursor:pointer}
#myorders .form-buttons input.send-button:hover{background:#031119}
#myorders .buttons-top{position:absolute; top:20px; right:0; margin:0}

/* Admin Order Summary */
#admin #myorders {padding:0 20px}
#admin #myorders .order-summary h3{margin-left:0}
#admin #myorders .shopping-cart-table{width:100%; margin:0; padding:0; background:#FFF}





/* ------------------------------------------------------------- */
/* MUMMY BEAR                                                    */
/* Represents the narrow format normally used on tablet displays */
/* ------------------------------------------------------------- */

/*@media screen and (min-width: 30em) and (max-width: 65em) {
@media screen and (min-width: 30em) and (max-width: 63.236em) {*/

/* Container */
/*#container {width: 30em}
}