/* global.css - defines global settings */



/* colours:
	#e7e7e7 - background for webForm (override with bg image in layout_x)
	#ffffff - background for webBox
	#5e5cb0 - blue for links
	#e9e9e9 - separator lines
	#be1278 - magenta text (headers etc)
	
	[del]#93d052 - green for yes buttons etc	
	[del]#e5b9b7 - pink for no buttons etc

	(mag: cc0099, pink: ff66cc)

/*


/* general */
html, body {margin: 0px; color: #444;}


/* general text, heading etc - see font_[x] for other font size settings*/

html, body, td, p, div { font-family: Verdana; font-size: 10pt; }

p {margin: 12px 0px 16px 0px ;}
.contentContainer p {margin: 0px; padding: 0px 0px 4px 0px; }

h1,h2, h3, h4  { font-size: 14pt; margin: 0px 0px 4px 0px;}
h1{ font-size: 12pt; color: #9F1D35}
h2, h4, span.h4Helper { font-size: 12pt; color: #be1278}
h2 { margin: 0px 0px 12px 0px; }
h3 { font-size: 11pt; }
h4 { font-size: 10pt; }
span.h4Helper {font-size: 8pt; font-weight: bold; }

.errorBox h1 {font-size: 12pt; color:#9F1D35; margin-bottom: 12px;}

.strikethrough {text-decoration: line-through; color: #999;}


/* generic float */
.floatRight{float: right;}
.floatLeft{float: left;}

/* hr */
hr{ color: #e9e9e9; background: #e9e9e9; height: 1px; }

/* status / disabled / error text */

.disabledText, .disabledTextSmall { color: gray; font-weight: bold; }
.statusText, .statusTextSmall, .productStatus , .statusTextNormal { color: green; font-weight: bold; }
.errorText, .warningText, .errorTextSmall, .labelInvalid , .orangeText { color: red; font-weight: bold; }
.productStatus, .statusTextNormal {font-weight: normal; }
.orangeText {color: Orange}

/* links */
a, a:visited, a:active, a:hover { text-decoration: none; color: #5e5cb0 }
a:hover { text-decoration: underline; }

a.disabled, a.disabled:visited, a.disabled:active, a.disabled:hover { text-decoration: none; color: #555}

ul.linkList { list-style-type: none; margin: 0px 0px 6px 0px; }
ul.linkList li { margin-left: -40px; }
ul.linkList li ul.linkList { list-style-type: none; margin-left: -30px;  }

ul.linkList li.account,
ul.linkList li.favourites,
ul.linkList li.orders,
ul.linkList li.help
{
	background: url(../img/icons/account/icon_account_24x24.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 32px;
	height: 26px;
}

ul.linkList li.favourites { background: url(../img/icons/account/icon_favourites_24x24.png);background-repeat: no-repeat; }
ul.linkList li.orders { background: url(../img/icons/account/icon_orders_24x24.png);background-repeat: no-repeat; }
ul.linkList li.help { background: url(../img/icons/iconmag_help_24x24.png);background-repeat: no-repeat; }



/* tooltips */
a.infoTip, a.basketInfoTip, a.productInfoTip
{
	float: left;
	width: 16px;
	height: 16px;
	background: url(../img/icons/info_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.webForm td.col1 span, .webForm a.infoTip {float:left;} /* TODO - need a grey anti-alias on this one */
.webForm a.infoTip {margin-left: 3px;}

	

/* help text */

.helpText, p
{
	margin: 12px 0px 12px 0px;
	padding: 0px;
}

/* content */

.contentContainer
{
	position: relative;
	padding: 0px 12px 12px 12px;
	width: auto;
}

.contentContainer h2 {margin: -6px 0px 0px 20x; }

/* forms */
.webForm, table.webForm, .webBox, table.invoice
{
	border: 1px solid #ddd;
	margin: 2px 0px 22px 0px;
	padding: 4px;
	margin-top: 2px;
	margin-bottom: 24px;
}

.webBox{ background: #fff; 	}

.webForm p {margin-bottom: 8px}


td.webFormColumn2 input
{
	/* width: 280px; */
}

td.webFormColumn1 {width: 200px; font-weight:bold;}
td.webFormColumn2 {width: 300px;}

td.basketMergeColumn {width: 500px; text-align: left; }


/* contact details form (see layout_x) */
table.contactDetailsForm {width: 100%}
div.passwordBox input, div.passwordBox a {float:left;}
div.passwordBox input.password {display: none; margin-right: 8px;} /* show on demand */

/* buttons */

a.button,
a.button_disabled,
a.button24,
a.button58,
a.button58_disabled,
a.button72,
a.button72_disabled,
a.button96,
a.button96_disabled,
a.button120,
a.button120_disabled,
a.button200,
a.button200_disabled,
a.confirmButton,
a.yesButton,
a.noButton,
a.buttonGreen84,
a.tickButton,
a.googleButton,
.twoStateFormUpdateButtons a,
.twoStateFormUpdateButtons a.disabled
{
	display: block;
	font-weight: bold;
	width: 140px;
	height: 19px;
	text-align: center;
	background: url(../img/buttons/button_144.png);
	background-repeat: no-repeat;
	margin: 0px 6px 0px 0px;
	padding: 3px 2px 4px 2px;
	font-size: 8pt;
}

a.button200, a.button200_disabled
{
	width: 196px;
	background: url(../img/buttons/button_200.png);
	background-repeat: no-repeat;
}

a.button58, a.button58_disabled
{
	width: 54px;
	background: url(../img/buttons/button_58.png);
	background-repeat: no-repeat;
}

a.button24, a.button24_disabled
{
	width: 24px;
	padding: 5px 0px 2px 0px;
	background: url(../img/buttons/button_24.png);
	background-repeat: no-repeat;
}

a.button72, a.button72_disabled
{
	width: 68px;
	background: url(../img/buttons/button_72.png);
	background-repeat: no-repeat;
}

a.button96, a.button96_disabled
{
	width: 93px;
	background: url(../img/buttons/button_96.png);
	background-repeat: no-repeat;
}

a.button120
{
	width: 117px;
	background: url(../img/buttons/button_120.png);
	background-repeat: no-repeat;
}

a.button:disabled,
a.button200_disabled,
a.button96_disabled,
a.button_disabled
{
	text-decoration: none;
	color: #999;
	cursor: default;
}

a.confirmButton,
a.confirmButton156,
a.yesButton,
a.noButton,
a.buttonGreen84,
a.tickButton
{
	color: #fff;
	display: block;
	font-weight: bold;
	width: 128px;
	height: 34px;
	text-align: center;
	vertical-align: middle;
	background: url(../img/buttons/buttongreen_180x50.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 8px 42px 10px 10px;
}

a.noButton
{
	color: #444;
	background: url(../img/buttons/buttonsilver_180x50.png);
	background-repeat: no-repeat;
}

a.tickButton, a.tickButton84
{
	padding: 3px 22px 4px 8px;
	width: 42px;
	background: url(../img/buttons/buttongreen_72x24.png);
	background-repeat: no-repeat;
}

a.tickButton84
{
	width: 54px;
	background: url(../img/buttons/buttongreen_84x24.png);
	background-repeat: no-repeat;
}

a.confirmButton156
{
	width: 112px;
	background: url(../img/buttons/buttongreen_156x50.png);
	background-repeat: no-repeat;
}

a.googleButton{ width: 174px; height:30px; padding:0px; margin: 0px; background: url(../img/buttons/button_google_checkout.png); background-repeat: no-repeat;}


div.buttonBox a, td.buttons a {float: left; }


/* "twoState" form buttons */

.twoStateFormUpdateButtons a,
.twoStateFormUpdateButtons a.disabled
{	
	width: 54px;
	background: url(../img/buttons/button_58.png);
	background-repeat: no-repeat;
 	float: right; 
 	margin: 0px 0px 0px 4px;
}
 
.twoStateFormUpdateButtons
{
	height: 24px;
	padding: 0px;
	margin: 6px 0px 0px 0px;
}


/* magnifying glass links */
div.image a.magnifyingGlass
{
	display: block;
	width: 24px; 
	height: 24px; 
	margin: 6px 0px 0px 12px;
	background: url(../img/buttons/mag_glass_24x24.png); /* TODO - resized image */
	background-repeat: no-repeat;
}


/* generic input controls */
input.input50, select.input50 {width: 50px;}
input.input80, select.input80 {width: 80px;}
input.input100, select.input110 {width: 100px;}
input.input110, select.input100 {width: 110px;}
input.input120, select.input120 {width: 120px;}
input.input140, select.input140 {width: 140px;}
input.input160, select.input160 {width: 160px;}
input.input180, select.input180 {width: 180px;}
input.input200, select.input200 {width: 200px;}
input.input260, select.input260 {width: 260px;}
input.input280, select.input280 {width: 280px;}
input.input290, select.input290 {width: 290px;}
input.input300, select.input300 {width: 300px;}

input.strong {font-weight: bold; }


/* delivery method */
table.deliveryMethodList, table.deliveryInfo
{
	margin: 0px;
	padding: 0px;
	border: none;
}

table.deliveryMethodList tr td,
table.deliveryInfo tr td
{
	padding: 5px 1px 4px 0px;
	vertical-align: top;
}

table.deliveryInfo tr td.title{ width: 66px; font-weight: bold;}


/* info lists */

ul.infoList li
{
	list-style-image: url(../img/icons/info_16x16.png);
	vertical-align: middle;
	padding-left: 8px;
	margin-top: 2px;
}



/* tabbedMenu */

div.tabbedMenu ul.tabs { height: 70px; }

div.tabbedMenu ul.tabs li
{ 
	display: block;
	float: left;
	text-align: center;
	padding-top: 10px;
}

div.tabbedMenu ul.tabs li a { color: #fff; font-weight: bold; }
div.tabbedMenu ul.tabs li a.disabled { color: #eaeaea; font-weight: bold; text-decoration: none;}

/* n.b. individual tab and bar styling in layout_x */


/* addressSelector / addressManager */

div.addressSelector, div.addressSelector_first, div.addressManagerBox
{
	border-top: 1px solid #ccc;
	padding: 8px 0px 8px 0px;
	width: auto;
}

div.addressSelector_first, div.addressManagerBox
{
	border-top: none;
}

div.addressSelector label, div.addressSelector_first label {font-weight: bold; margin-top: -3px }

div.addressSelector div.content,
div.addressSelector_first div.content { padding: 1px 0px 0px 15px; }

div.addressSelector input,
div.addressSelector_first input {margin-left: 0px;}


.addressManagerBoxContents
{
	padding: 4px;
}

.addressManagerBoxHeader
{
	height: 22px;
	float: left;
	padding-top: 0px;
	padding-left: 4px;
	width: 100%;
}

.addressFormDefaultCheckboxes
{
	margin: 12px 0px 12px 0px;
}


/* ajax */

div.contentLoading
{
	position: absolute;
	top: 100px;
	left: 100px;
	border: 1px solid #ddd;
	width: 124px;
	height: 34px;
	padding-left: 56px;
	padding-top: 16px;
	background: #fff;
	background-image: url(../img/waiting.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	z-index: 999;
}


/* basket contents (main view, merge, my account)  and productItem (external product pages)*/

div#pnlBasketContents div.main div.empty { padding: 4px; }

div#pnlBasketTotals div.main { padding: 0px 12px 0px 12px; }

div.basketItems div.basketItem,
div.basketItems div.basketItem_top,
div.basketItems div.basketItem_bottom,
div.productItem
{ 
	/* width in layout_x */
	float:left;
	min-height: 60px;
	margin-bottom: 0px; 
	border-top: 1px dotted #e9e9e9;
	padding: 12px;
}

div.productItem a.pipeTip,
div.basketItem a.pipeTip,
div.basketItem_top a.pipeTip,
div.basketItem_bottom a.pipeTip { font-weight: bold; }

div.basketItems div.basketItem_top { border-top: none; }
div.basketItems div.basketItem_bottom {border-bottom: 1px dotted #e9e9e9; }

div.productItem div.image,
div.basketItem div.image,
div.basketItem_top div.image,
div.basketItem_bottom div.image { position: relative; width:60px; height: 60px; margin: 0px 12px 0px 0px; float:left; }

div.productItem div.info,
div.basketItem div.info,
div.basketItem_top div.info,
div.basketItem_bottom div.info { margin-left: 60px; margin-bottom: 4px; padding: 0px; }

div.info div.top * { float:left; }

div.productItem div.form,
div.basketItem div.form,
div.basketItem_top div.form,
div.basketItem_bottom div.form { margin: 0px 0px 0px 60px; height: 24px; vertical-align: middle; }

div.form div.control * { float: left; margin: 0px 4px 0px 0px}
div.form div.control a { margin: -2px 2px 0px 0px}

div.form span {margin: 2px 0px 0px 0px;}
div.form span.cost {float: right; text-align: right; margin: -16px 0px 0px 0px;}

div.checkoutButtons{ vertical-align: middle; float: right; height: 45px; }

div.checkoutButtons span,
div.checkoutButtons a,
div.checkoutButtons a:visited,
div.checkoutButtons a:active,
div.checkoutButtons a:hover
{
	float: left;
	margin-left: 4px;
}


img.productThumbnail,
img.productThumbnail_offer{ border: 1px solid #ccc; }

/* generic */
.hidden{ display: none; }

/* my orders / my favourites */

div.reOrderButton
{
	position: relative;
	float: right;
	width: 96px;
}

div.reOrderButton > span
{
	margin-right: -100px;
}

.myOrderPaymentDetails table
{
	float: right;
}


/* waiting div */
div.waiting
{
	width: 100%;
	height: 200px;
	background-image: url(../img/waiting.gif);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	text-align: center;
}

/* layout selector */
div.layoutSelector
{
		
}

/* basket item tooltips */
div.basketItemTooltip{ width: 120px; }
div.basketItemTooltip div.info{ text-align:center; }



/* money */
.money { color: Blue; }
.negativeMoney { color: Red; }

/* payment methods */
div.paymentMethod 
{
	min-height: 40px; 
	vertical-align: middle; 
	float: left; 
	width: 100%; 
	border-top: 1px solid #e9e9e9;
	margin: 0px;
	padding: 12px 0px 0px 0px;
}

div.paymentMethod div {float: left}
div.paymentMethod div.radio {width: 26px; }
div.paymentMethod div.info div.active label { float:left; margin-right: 4px;}
div.paymentMethod div.info div.active a.infoTip { float:left; }
div.paymentMethod div.logo {width: 80px; height: 40px; margin-right: 12px; }
div.paymentMethod div.logo img {width: 80px; height: 40px; margin-top: -8px;}

/* boxes */
div.accountBox,
div.loginBox,
div.errorBox_bordered,
div.errorBox,
div.checkoutWaitBox
{ 
	padding: 7px 7px 7px 61px; 
	background-position: 0px 0px;
	min-height: 55px;
	border-bottom: 1px solid #e9e9e9;
}

div.errorBox { padding: 7px 7px 7px 66px; border: none; }
div.errorBox_bordered { padding: 7px 7px 7px 66px; margin: 0px 0px 12px 0px; border-top: 1px solid #e9e9e9; }

div.accountBox h4,
div.errorBox h4,
div.errorBox_bordered h4 {color: #be1278; margin: 0px;}

div.accountBox p,
div.errorBox p,
div.errorBox_bordered p  {margin: 2px 0px 8px 0px; }

div.loginBox
{ 
	border:none;
	background: url(../img/icons/iconblue_login.png);
	background-repeat: no-repeat;
	background-position: 0px 7px;
	padding: 9px 7px 7px 61px; 
}

div.checkoutWaitBox
{ 
	border-bottom: none;
	background-image: url(../img/waiting.gif);
	background-repeat: no-repeat;
	background-position: 12px 12px;
	padding: 9px 7px 7px 61px; 
}

div.loginBox div.label, 
div.loginBox div.field {width: 70px; float: left; margin-bottom: 4px;}
div.loginBox div.field, div.loginBox div.field input {width: 240px;}

div.errorBox,
div.errorBox_bordered
{ background: url(../img/icons/error.png); background-repeat: no-repeat; background-position: 0px 7px; }

div.errorBox h4 { margin-bottom: 12px; }

div.loginBox div.errorBox_bordered { margin-left: -66px; }

div.newCustomerBox div { border-top: 1px solid #e9e9e9; padding: 7px 0px 0px 0px; height: 58px; }
div.newCustomerBox div span { float:left; padding: 4px 0px 0px 0px; margin: 0px; } /* width in layout_x */
div.newCustomerBox div a.infoTip { width: 51px; height: 51px; float:left; margin-right: 7px}

div.newCustomerBox div.discount a.infoTip { background: url(../img/icons/iconblue_discount.png); background-repeat: no-repeat; }
div.newCustomerBox div.favourites a.infoTip { background: url(../img/icons/iconblue_favourites.png); background-repeat: no-repeat; }
div.newCustomerBox div.orders a.infoTip { background: url(../img/icons/iconblue_orders.png); background-repeat: no-repeat; }
div.newCustomerBox div.options a.infoTip { background: url(../img/icons/iconblue_options.png); background-repeat: no-repeat; }
div.newCustomerBox div.credit a.infoTip { background: url(../img/icons/iconblue_credit.png); background-repeat: no-repeat; }
div.newCustomerBox div.credit { border-bottom: 1px solid #e9e9e9;  }


/* boxes - account */

div#divAccountHome_credit {background: url(../img/icons/account/icon_credit.png);background-repeat: no-repeat; background-position: 0px 7px; border-top: 1px solid #e9e9e9;}
div#divAccountHome_news {background: url(../img/icons/account/icon_news.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_favourites {background: url(../img/icons/account/icon_favourites.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_orders {background: url(../img/icons/account/icon_orders.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_details {background: url(../img/icons/account/icon_details.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_addresses {background: url(../img/icons/account/icon_addresses.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_options {background: url(../img/icons/account/icon_options.png);background-repeat: no-repeat; background-position: 0px 7px; }
div#divAccountHome_contact {background: url(../img/icons/account/icon_contact.png);background-repeat: no-repeat; background-position: 0px 7px; border-bottom: none;}


/* generic styling for prod pages etc */
div.separator
{
	width: 100%;
	margin: 4px 0px 4px 0px;
	border-bottom: 1px dotted #e9e9e9;
	height: 1px;
}

div.clear {clear:both; }

/* web form radio / checkboxes */

div.webForm div.radioButton,
div.webForm div.radioLabel { width: 22px; float: left; padding: 0px 0px 4px 0px;}
div.webForm div.radioLabel { width: 320px; padding-top: 1px;}

/* mandatory fields / note */
input.mandatory, select.mandatory { float:left; }
span.mandatory { color:#ff0000; margin-left: 4px; }
div.mandatoryFields, div.note { padding-top: 8px; color: #808080;}
div.mandatoryFields {clear: both; color: #808080;}
div.mandatoryFields span.mandatory {margin: 0px;}

div.note { padding: 0px 0px 8px 0px; }



/* popups / tooltips */
div.popup, div.fullProductInfoPopup, div.textPopup
{
	z-index: 999;
	width: 300px;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #606060;
	padding: 4px;
	font-size: 9pt;
}

div.productInfoTooltip_main { width: 120px; }
div.productInfoTooltip_popup { width: 300px; }

div.popup, div.hover {width:auto; text-align: center;}
div.textPopup {padding: 12px; width:auto; text-align: left;}


div.popup div.header,
div.fullProductInfoPopup div.header {float: right; }

div.popup div.info,
div.fullProductInfoPopup div.info {text-align: center; }

div.fullProductInfoPopup { width: 300px; height: auto; padding: 4px }

/* stickers */

div.sticker_new,
div.sticker_offer,
div.sticker_offer40,
div.sticker_priceWatch,
div.sticker_specialOffers
{
	width: 60px;
	height: 60px;
	background: url(../img/stickers/new_60x60.png);
}

div.sticker_offer{background: url(../img/stickers/offer_60x60.png);}
div.sticker_offer40{background: url(../img/stickers/offer_40x40.png);width:40px;height:40px;}
div.sticker_priceWatch{background: url(../img/stickers/price_watch_60x60.png);}
div.sticker_specialOffers{background: url(../img/stickers/special_offers_60x60.png);}



/*-------------jquery.tooltip---------- */
#tooltip {
	position: absolute;
	z-index: 999;
	width: auto;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #606060;
	padding: 5px;
	font-size: 9pt;
}
#tooltip h3, #tooltip div { margin: 0px; text-align: left; }
#tooltip div.info {text-align: center}
/*-------------/jquery.tooltip---------- */


/*-------------jquery.impromptu---------- */
.jqiwarning .jqi{ background-color: #fff; }	
.jqifade{ position: absolute; background-color: #333333; }
div.jqi { position: absolute; background-color: #ddd; padding: 4px; width: auto; text-align: left; }
div.jqi .jqiclose{ float: right; margin: 0px 2px 0px 0px; cursor: pointer; }
div.jqi .jqicontainer{ background-color: #aaa; padding: 2px; color: #444; font-weight: bold; }
div.jqi .jqimessage{ background-color: #ddd; padding: 10px; }
div.jqi .jqibuttons{ text-align: center; padding: 5px 0 5px 0; background: #eee; }
div.jqi button{ background: #eee; padding: 3px 10px 3px 10px; margin: 0 10px; border: 1px solid #999; }
/*-------------/jquery.impromptu---------- */