/*--------------------------------------------------

GLOBAL CSS

This contains globally used, default styling for 
the basic HTML components. It also contains 
externally required CSS such as SIFR.

Do NOT modify the default styles for list elements
(the bullet points) as when the site requires their
use it is very tedious trying to style them back in.

--------------------------------------------------*/

/* Includes
--------------------------------------------------*/
@import url(/assets/style/layout.css);
@import url(/assets/style/catalogue.css);
@import url(/assets/style/components.css);
@import url(/assets/style/account.css);



/* Elements
--------------------------------------------------*/
html { font-size: 100.01% }
body {
	margin: 0; 
	padding: 0; 
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 62.5%; /* Enable the use of em to relative pixel equivalents i.e. 1.1em = 11px */
	color: #333;
	background-color : #fff;	
	overflow: -moz-scrollbars-vertical !important; /* Prevent page jumping between non/scrolling pages */
}
input, select, textarea {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1em;
}

/* links converted to input for non-js support */
input.linkButton {
    background-color:Transparent;
    border:0;
    color:#0055A5;    
    text-decoration:underline;   
    margin: -1px -2px -1px -2px; 
    padding: 1px;
    width:52px;
    font-size: 1.1em;
    text-align: center;   
    font-weight: bold;
    display:inline-block; 
    position:relative;  
    cursor: pointer;
}     

input.linkButton2 {
    background-color:Transparent;
    border:0;
    color:#0055A5;    
    text-decoration:underline;   
    margin: 0px; 
    padding-left: 4px;
    width:auto;
    font-size: 1em;
    text-align: left;   
    font-weight: normal;
    display:inline-block; 
    position:relative;  
    cursor: pointer;
}   

.form dd input.linkButton3 {
    background-color:Transparent;
    border:0;
    color:#0055A5;    
    text-decoration:underline;   
    margin: 1px 0 0 2px; 
    padding: 0;
    width:80px;
    font-size: 1em;
    text-align: left;   
    font-weight: bold;
    display:inline-block; 
    position:relative;  
    cursor: help;
}

.image-hover input.xlargelinkButton {
    background-color:Transparent;
    border:0;
    color:#0055A5;
    margin: 0px; 
    padding-left: 0px;
    width:auto;
    font-size: 1em;
    text-align: left;   
    font-weight: normal;
    display:inline-block; 
    position:relative;  
    cursor: pointer;
    text-decoration:underline; 
}   
.image-hover input.xlargelinkButton:hover {
    text-decoration:underline; 
    color: #d52b1e; 
    display:inline-block; 
    cursor:pointer;
} 

#pay-by-card .form input.linkButton3, #giftcard-balance .form input.linkButton3,
#pay-by-account .form input.linkButton3
{
    width:80px;
    float:none;
}

input.linkButton4 {
    background-color:Transparent;
    border:0;
    color:#0055A5;    
    text-decoration:underline;   
    margin: -1px -2px -1px -2px; 
    padding: 1px;
    width:auto;
    font-size: 1em;
    text-align: left;   
    font-weight: bold;
    display:inline-block; 
    position:relative;  
    cursor: pointer;
}  

input.instore-price-product
{
     margin: -5px -2px -1px -2px; 
    padding: 0px;
    width:78px;
    font-size: 1em;
}

input.instore-price-list
{
     margin: -37px 28px -1px; 
    padding: 0px;
    width:47px;
    font-size: 1em;
    height:28px;
}



input.linkButton.discount-overlay-link,input.linkButton.supplierdirect-overlay-link {
    position: static;
    width: 100px;
}
input.linkButton:hover {
    text-decoration:underline; 
    color: #d52b1e; 
    display:inline-block; 
    cursor:pointer;
} 
input.pagelinkButton {
    width:auto;
    color:#003591;
    font-weight: normal;
    text-decoration: none;
}
.form input.button {width: auto;height: auto;border: none;}
.form input.find {
	border:medium none;
	height:auto;
	width:auto;
	padding:0 0 2px;
	float:right;
}
img {
	vertical-align: bottom; /* IEWIN : stops images aligning to baseline */
	border: none; 
	margin: 0; /* IEWIN : image margin reset bug */
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.2em;
	color: #000;
	margin: 0 0 1em 0;
	padding: 0;
}
h1 {
	font-size: 1.8em;
}
h2 {
	display: block;
	font-size: 1.6em;
	background: transparent url(../en/site/canvas/h2-bg.gif) no-repeat scroll left top;
	margin-top: 0px;
	padding: 10px;
}
.button-as-link 
{
    color: #0055A5;text-decoration: underline;outline: 0; background: none; cursor:pointer;
}
a:link {color: #0055A5;text-decoration: underline;outline: 0;}
a:visited {color: #0055A5;text-decoration: underline;}
a:hover {color: #d52b1e;text-decoration: underline;}
a:active {color: #0055A5;text-decoration: underline;outline: 0;border:0;}
ul, ol {margin-bottom: 1em;}
ul li, ol li {font-size: 1.1em;margin: 0;}
p, dl {margin: 0 0 1em;padding: 0;font-size: 1.1em;}
dd, dt, form, fieldset {border:0;margin: 0;padding: 0;}
table {border-collapse: collapse;border-spacing: 0;font-size: 1.1em;}
th {text-align: left;}
:focus { outline: 0; /* Remove outline of focused links */}
/* Components
--------------------------------------------------*/
.longdesc,.access,caption,legend,.no-print { /* Place selectors here as required to hide something for accessibility reasons */
	height: 0;
	width: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
	position: absolute;
	overflow: hidden;
	left: -9999em;
}
.clear-float:after { /* Do NOT use this class, instead add a selector here (easier to edit CSS than HTML and we get cleaner code) */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear-float {height: 1%;}
.analytic {display: none; /* Applied to HTML dynamically inserted by analyitcs packages */}
/* Address
--------------------------------------------------*/
ol.address {margin: 0;padding: 0;list-style-type: none;	}
ol.address li {margin: 0;padding: 0;	}

/* Price
--------------------------------------------------*/
#price-format span.was-price {font-weight: bold;display: block;}
#price-format span.now-price {display: block;color: #D52B1E;	}

/* Form
--------------------------------------------------*/
.form dl {margin: 0;}
.form dt {
	float: left;
	clear: left;
	padding: 4px 10px 0 0;
	text-align: right;
	width: 160px;
}
* html .form dt { /* WIE6 : remove 3PP */
	margin-right: -3px;
}
.form dt.required label {
	background: url(../en/site/icons/required.gif) no-repeat top right;
	padding: 0 5px 0 0;	
}
.form dd {
	padding-bottom: 2px;
}
.form dd input {
	border:1px solid #7F9DB9;
	font-size:1.1em;
	padding:2px;
	width:160px;
}
.form textarea {
	border:1px solid #7F9DB9;
	font-size:1.1em;
	padding:2px;
	width:635px;
}
#registration .form dt.required label {background:url(../en/site/icons/required-grey.gif) no-repeat scroll right top;}
div#registration-section .select {
	width: 325px;
	border:1px solid #7F9DB9;
	font-size:1.1em;
	padding:2px;
}
select {
	width: 200px;
	border:1px solid #7F9DB9;
	font-size:1.1em;
	padding:2px;
}
.form input.submit {
	border:0;
	float:right;
	margin-right:25px;
}
#page #content p.NUSMessageerror {/* for NUS error message for Business Account Customer.*/
    margin-right:20px;
    float:none;
}
#page #content p.NUSMessageerrortop
{/* for NUS error message for Business Account Customer.*/
    margin-right:20px;
    margin-top :0px;
    margin-bottom :0;
    padding :0;
    float:none;
}
#payment-page #page #content p.NUSMessageerrortop
{/* for NUS error message for Business Account Customer on payment page.*/
    margin: 0px;
    padding: 0px;
    position: absolute;
    top:90px;
    right:20px;
}
#page #content  p.NUSMessageerrorright
{/* for NUS error message for Business Account Customer.*/
    margin-right:0px; /* was 10px */
    margin-bottom:0px;
    float:right;
}
/* for NUS error message for Business Account Customer on Delivery page */
#delivery #page #content p.NUSMessageerrorright {
    margin:0px;
    position:absolute;
    top:147px;
    right:10px;
    font-size:0.8em;
    font-weight:normal;
}
.error { /* For small notes adjacent next to a field e.g. "View T&C" link */
	color: red;
	display: block;
	float:right;
	text-align:right;
}
.errorright {color: red;display: block;text-align:right;}
.errorleft {color: red;display: block;float:left;}
ul.option {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.option li {
	margin: 0;
	padding: 0;
}
p.no-margin {
	margin-bottom: 0;
}
.form .option input {
	vertical-align: bottom;
}
/* Generic
--------------------------------------------------*/
.right {float: right;}
.left {float: left; }
.fullwidth{ width: 100%;}
.clear{float: left;clear: both;}
#search-results-page .clear{
    clear:both;
    float:left;
    text-align:center;
    width:308px;
}
.strike {text-decoration:line-through}
.none {display: none;}
.blue {color: #0055A5;font-size: 1.1em;font-weight: bold;}
.bold {font-weight: bold;}
a.banner {float: left;margin-bottom: 8px;}
.show {display: block;}
.hide {display: none;}
.showLoading {display: block!important;}
/* Modal
--------------------------------------------------*/
div#modalFull {
	font-size: 12px;
	color: #777;
}
div#modalFull div#modalLoading {
	width: 150px;
	height: 150px;
	text-indent: -9999em;
	background: #fff url(../en/site/canvas/ajax-loader.gif) no-repeat;
	background-position: center;
}
div#modalFull div#modalLoading.error {
	line-height: 20px;
	padding: 20px;
	width: 300px;
	height: 100px;
	text-indent: 0;
	background: #fff;
}
div#modalFull div#modalWrapper {background: #fff;}
div#modalFull div#modalWrapper a#closeBut {
	position: absolute;
	display: block;
	top: -3px;
	right: 0;
	width: 26px;
	height: 40px;
	text-indent: -9999em;
	background: url(../en/site/canvas/close.gif) no-repeat 0 2px;
	outline: 0;
	z-index: 73;
	cursor: auto;
}
.browserIE6 div#modalFull div#modalWrapper a#closeBut {
	top: 0;
	right: 0px;
}
div#modalFull div#modalWrapper h1#modalTitle {
	margin: 0;	
	position: absolute;
	top: 0;	
	font-size: 14px;
	color: #fff;	
	width: 100%;
	text-align: left;
	padding: 1px 0 27px 5px;
	width: 98%;
	background: url(../en/site/canvas/modal-header-bg.gif) no-repeat 0 top;
	z-index: 72;
	left: 0;	
}
.browserIE6 div#modalFull div#modalWrapper h1#modalTitle {
	top: 10px;
	left: 10px;	
	background: #d52b1e;
	padding: 7px 0 7px 5px;
	display: block;
	float: none;	
	margin-right: 8px;	
	width: 97%;
}
div#modalFull div#modalWrapper div.wrapper div#modalContent {
	padding: 1px 10px 0 0;
	position: relative;
	z-index: 71;
	margin: 35px 0px 50px 5px;
	background: #e9e9e9 url(../en/site/canvas/overlay-content-right-bg.gif) no-repeat right bottom;	
	*float: left;
	*margin-top: 35px;
}
.browserIE6 div#modalFull div#modalWrapper div.wrapper div#modalContent {
	border: 1px solid #ccc;
	background: none;
	padding-right: 10px;
	margin-left: 0;
}
div#modalFull div#modalWrapper div.wrapperImg div#modalContent {
	position: relative;
	overflow: hidden;
	text-align: center;
	z-index: 71;
	padding: 10px;
}
div#modalFull div#modalWrapper div.wrapperImg div#modalContent img {
	vertical-align: baseline;
}
div#modalFull div#modalWrapper div.wrapperImg div#modalContent div {
	position: absolute;
	bottom: 0;
	left: 0;
	background: black;
	padding: 10px;
	margin: 10px;
	border: 1px white dotted;
	overflow: hidden;
	opacity: 0.2;
	filter: alpha(opacity=20);
	display: none;
}
div#modalFull div#modalWrapper div.wrapperImg div#modalContent div:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	cursor: help;
}
div#modalFull div#modalWrapper a.modalPrev, div#modalFull div#modalWrapper a.modalNext {
	z-index: 105;
	outline: none;
	position: absolute;
	top: 0;
	height: 100%;
	width: 40%;
	cursor: pointer;
	text-indent: -9999em;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE6 */
}
div#modalFull div#modalWrapper div.wrapperSwf a.modalPrev, div#modalFull div#modalWrapper div.wrapperSwf a.modalNext, div#modalFull div#modalWrapper div.wrapper a.modalPrev, div#modalFull div#modalWrapper div.wrapper a.modalNext {
	height: 60%;
	width: 20%;
}
div#modalFull div#modalWrapper div#modalContent a.modalPrev {
	left: 0;
}
div#modalFull div#modalWrapper div#modalContent a.modalPrev:hover {
	background: url(../en/site/icons/prev.png) left 15% no-repeat;
}
.browserIE6 div#modalFull div#modalWrapper div#modalContent a.modalPrev:hover {
	background: url(../en/site/icons/prev.gif) left 15% no-repeat;
}
div#modalFull div#modalWrapper div#modalContent a.modalNext {
	right: 0;
}
div#modalFull div#modalWrapper div#modalContent a.modalNext:hover {
	background: url(../en/site/icons/next.png) right 15% no-repeat;
}
.browserIE6 div#modalFull div#modalWrapper div#modalContent a.modalNext:hover {
	background: url(../en/site/icons/next.gif) right 15% no-repeat;
}
#modalBg {
	background: #000;
}
#wrapper_bg {
	border:0 none;
	height:100%;
	left:0;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:70;	
	background: #e9e9e9 url(../en/site/canvas/overlay-content-left-bg.gif) no-repeat 0 bottom;	
	padding: 0;
}
.browserIE6 #wrapper_bg {
	display: none;
}
.browserIE6 .wrapper,
.browserIE6 .wrapperImg {
	padding: 15px 15px;
	border:5px solid #ebeef0;
}
#wrapper_bg .wrapper_bg_nw {
	background: url(../en/site/canvas/modal_nw_bg.png) no-repeat 0 0;
	left:-14px;
	padding:20px 17px 0 0;
	position:absolute;
	top:-20px;
	z-index:72;
}
#wrapper_bg .wrapper_bg_n {
	background: url(../en/site/canvas/modal_n_bg.png) repeat-x 0 0;
	left: 3px;
	height: 20px;
	position:absolute;
	top:-20px;
	z-index:71;
	width: 100%;
}
#wrapper_bg .wrapper_bg_ne {
	background: url(../en/site/canvas/modal_ne_bg.png) no-repeat top right;
	right:-14px;
	padding:10px;
	position:absolute;
	top:-20px;
	z-index:71;
}
#wrapper_bg .wrapper_bg_e {
	background: url(../en/site/canvas/modal_e_bg.png) repeat-y top right;
	right:-15px;
	width: 15px;
	position:absolute;
	top:0;
	z-index:71;
	height: 100%;
}
#wrapper_bg .wrapper_bg_se {
	background: url(../en/site/canvas/modal_se_bg.png) no-repeat bottom right;
	right:-16px;
	padding:10px;
	position:absolute;
	bottom:-17px;
	z-index:71;
}
#wrapper_bg .wrapper_bg_s {
	background: url(../en/site/canvas/modal_s_bg.png) repeat-x top right;
	right:0;
	height: 20px;
	position:absolute;
	bottom:-20px;
	z-index:71;
	width: 100%;
}
#wrapper_bg .wrapper_bg_sw {
	background: url(../en/site/canvas/modal_sw_bg.png) no-repeat bottom left;
	left:-18px;
	padding:10px;
	position:absolute;
	bottom:-17px;
	z-index:71;
}
#wrapper_bg .wrapper_bg_w {
	background: url(../en/site/canvas/modal_w_bg.png) repeat-y top left;
	left:-14px;
	width: 14px;
	position:absolute;
	top:0;
	z-index:71;
	height: 100%;
}
#modalContent {
	position: relative;
	z-index: 72;
	margin: 10px;	
}
.applied-filters {
    display:inline;
    list-style: none;
}
.applied-filters-group {
    margin:0px;
    padding:0px;
    display:block;
}
body#delivery #footer-nav li {
    border:0 none;
    padding-top:10px;
    white-space:nowrap;
    width:138px;
}
body#delivery #footer-nav li {height:70px;}
body#delivery #address-book-page button.close-overlay {
    width:80px;
    height:25px;
}
#stay-in-touch .window {
	width: 208px; 
	top: 194px; 
	left: 1px; 	
	background: #fff; 
	border: 1px solid #5f5f5f; 
	font-size:1.2em;
	z-index: 999; 
	height: 78px;
}
#ctl00_cphBodyContent_stayintouch .window {
	width: 208px; 
	top: 194px; 
	left: 1px; 	
	background: #fff; 
	border: 1px solid #5f5f5f; 
	font-size:1.2em;
	z-index: 999; 
	height: 78px;
}
.Vatjs-overlay {
	position: fixed;
	width: 400px; 
	top: 150px; 
	left: 50%; 
	margin-left: -225px; 
	background: #fff; 
	border: 1px solid #5f5f5f; 
	z-index: 999; 
	padding:10px;
}
.Vatjs-overlay h4 {
    background:url(../en/site/canvas/forgot-pass-bg2.gif) no-repeat;
    color:#FFFFFF;
    padding:7px 10px;
    font-size:1.3em;
    margin:0px;
}
.Vatjs-overlay dl {margin:20px 0 0 20px;}
.Vatjs-overlay dt,.Vatjs-overlay dd {
    padding:2px;
    float:left;
    width:350px;
}
.Vatjs-overlay dd input{width:350px;}
.Vatjs-overlay table{width:100%;}
.Vatjs-overlay table td{padding:5px;}
.Vatjs-overlay .cp-thumb{width:50px;height:45px;}
.Vatjs-overlay .prod-basket-overview p{float:left;margin:0 5px;}
/* Non JS Overlay */  
.background-effect {
    display:none; 
    filter: Alpha(Opacity=30);
    opacity: 0.5;
    width: 100%; 
    height: 100%; 
    background: #000;
    position: fixed;
    z-index:40;
    top: 0px; 
    left: 0px;
}
.nonjs-overlay {
	position: absolute;
	width: 400px; 
	top: 150px; 
	left: 50%; 
	margin-left: -225px; 
	background: #fff; 
	border: 5px solid #5f5f5f; 
	z-index: 999; 
	padding:10px;
}
.nonjs-overlay h4 {
    background:url(../en/site/canvas/forgot-pass-bg2.gif) no-repeat;
    color:#FFFFFF;
    padding:7px 10px;
    font-size:1.3em;
    margin:0px;
}
.nonjs-overlay dl {margin:20px 0 0 20px;}
.nonjs-overlay dt, .nonjs-overlay dd {
    padding:2px;
    float:left;
    width:350px;
    clear: none;
} 
.nonjs-overlay dd input{width:350px;}
.nonjs-overlay table{width:100%;}
.nonjs-overlay table td{padding:5px;}
.nonjs-overlay .cp-thumb{width:50px;height:45px;}
.nonjs-overlay .prod-basket-overview p{float:left;margin:0 5px;}
/* Print Logo */
.print-logo {
    top:-9999px;
    left:-9999px;
    width:600px;
    position:absolute;
}

a.Discount-link-notavailable:hover
{
    text-decoration :none;
}
a.Discount-link-notavailable:active
{
    text-decoration :none;
    color : #D52B1E;
}

.instore-price-div
{
    /*display:none;*/
}

/* product listing/search listing in store price */
#product-list div.buy-save-table,
#search-results-page div.buy-save-table,
#high-level-category-page div.buy-save-table {
	top: 45px;
}

#product-list input.instore-price-list, 
#basket-content input.instore-price-list,  
#search-results-page input.instore-price-list,
#high-level-category-page input.instore-price-list {
	display: block;
	background: #e2e2e2 url(/assets/en/site/canvas/tab-instore_v2.gif) no-repeat left top;
	margin: 0 36px -20px;
    padding-left: 5px;
	width: 51px;
	height: 24px;
    font-size: 0.8em;
	text-align: center;
}

/* Basket in-store price */
#basket-content input.instore-price-list {
	margin: 0 36px -4px;
	width: 51px;
	height: 24px;
}

/* Product detail in-store price */
input.instore-price-product {
	margin: 0;
	padding: 0;
}

#product-info div.buy-save-table {
    background: url("/assets/en/site/canvas/prod-details-saving-bg.jpg") no-repeat scroll 0 0;
    position: static;
    float: right;
    width: 326px;	
    height: 100px;
    margin: 2px 0 0;
    padding: 2px;
}

#product-info div.buy-save-table dl{
	margin: 0;
	padding: 0;
}

#product-info #select-quantity {
	padding-top: 0;
}

#product-info #select-quantity.show-background {
    background: none;
}