@charset "utf-8";
/* CSS Document */

/*** GENERAL SELF CARE STYLES ***/

.pageWidth { width: 960px; }
.pageWidth .module { background: transparent url(/css/images/en_GB/misc/bg_module960.jpg) bottom left no-repeat; }

.colHolder { overflow: auto; padding-top: 5px; }
.col300 { float: left; width: 300px; margin-right: 15px; }
.col375 { float: left; width: 375px; margin-right: 15px; }
.col450 { float: left; width: 450px; margin-right: 15px; }
.colHolder .last { margin-right: 0; }

.module { background: transparent url(/css/images/en_GB/misc/bg_module765.jpg) bottom left no-repeat; padding: 0 0 11px 0; border-top: 1px solid #ccc; }
.module h2 { margin-top: -1px; }
.moduleBody { padding: 14px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.col300 .module { background: transparent url(/css/images/en_GB/misc/bg_module300.jpg) bottom left no-repeat; }
.col375 .module { background: transparent url(/css/images/en_GB/misc/bg_module375.jpg) bottom left no-repeat; }
.col450 .module { background: transparent url(/css/images/en_GB/misc/bg_module450.jpg) bottom left no-repeat; }

p.infoNote { background: transparent url(/css/images/en_GB/misc/bg_infoNote.jpg) top left no-repeat; font-size: .85em; padding: 4px 0 0 28px; }

.wrapper { position: relative; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; text-align: center; }
#overlay #modal { background: #fff; border: 1px solid #999; width: 400px; margin: 275px auto 0; }
#overlay #modal .success { background: #fff url(/css/images/en_GB/misc/bg_modal.jpg) 40px -75px no-repeat; }
#overlay #modal h2 { font-size: 1.7em; color: #666; margin: 0 20px; padding: 30px 0 20px; }
#overlay #modal p { background: transparent url(/css/images/en_GB/misc/line.gif) top left repeat-x; margin: 0 20px; padding: 20px 0; }

div.formFail { background: #ccc url(/css/images/en_GB/misc/bg_formFail.gif) 10px 10px no-repeat; padding: 15px 15px 0 55px; margin-bottom: 10px; border: 1px solid #f00; font-size: 1.1em; min-height: 40px; _height: 40px; }
div.formFail ul { padding-left: 20px; margin-bottom: 15px; font-size: .85em; }
div.formFail li { margin-bottom: 5px;}
div.validationList { background-image: none; padding-left: 15px; }

#formHolder { margin: 10px 0 0 0; padding-bottom: 10px; }
#formHolder ol { list-style-type: none; margin: 0; padding: 0; }
#formHolder li { overflow: hidden; margin-bottom: 15px; *height: 1%; }
#formHolder label, #formHolder li.optionList span { float: left; width: 160px; margin: 2px 10px 0 0; }
#formHolder input { float: left; width: 170px; border: 1px solid #bbb; font-size: 1em; padding: 2px; margin: 0 10px 0 0; }
#formHolder select { float: left; font-size: 1em; border: 1px solid #bbb; margin: 0 10px 0 0; }

#formHolder li.txtSml input { width: 60px; }
#formHolder li.txtNumber input {  }
#formHolder li.cbx { margin-left: 170px; }
#formHolder li.cbx input, #formHolder li.optionList input { float: left; width: auto; padding: 0; border: none; margin: 3px 3px 3px 0; }
#formHolder li.cbx label, #formHolder li.optionList label { float: left; width: auto; margin: 2px 10px 0 3px; }
#formHolder li.optionList ol { float: left; width: 565px; }
#formHolder li.optionList li { margin-bottom: 3px; }

#formHolder li span.required { float: none; color: #f00; width: auto; }
#formHolder li.formFail label { color: #f00; }
#formHolder li.formFail input, #formHolder li.formFail select { border-color: #f00; }

#formHolder .btnHolder { margin: 20px 0 0 170px; }
#formHolder .btnHolder input { width: auto; float: none; text-indent: -9999px; padding: 0; border: none; cursor: pointer; }
#optIN { width: 20px !important; }
.infoOptIn { padding-left:25px; }

/*** ACCOUNT LOGIN STYLES ***/

.accountLogin .loginSection select { margin-top: 10px; font-size: .88em; border: 1px solid #ccc; }

.loginSection .btnHolder { padding-left: 145px; border-top: 1px solid #ccc; margin-top:10px; padding-top:10px;}
.loginSection .btnHolder input { background: none; border: none; padding: 0; cursor: pointer; text-indent: -9999px; display: block; font-size: 0; line-height: 0; }
.loginSection .btnHolder input.btnLogin { width: 79px; height: 23px; background: url(/wsimages/en_GB/buttons/loginMain.gif) top left no-repeat; }
.loginSection .btnHolder input.btnRegister { width: 93px; height: 23px; background: url(/wsimages/en_GB/buttons/Reg_Button.jpg) top left no-repeat; }
.loginSection .btnHolder input.btnValidate { width: 93px; height: 23px; background: url(/wsimages/en_GB/buttons/validate.gif) top left no-repeat; }
.loginSection .btnHolder input.btnSubmit { width: 73px; height: 23px; background: url(/wsimages/en_GB/buttons/submit1.gif) top left no-repeat; }

/*** MY ACCOUNT PAGE STYLES ***/

.myAccount h2 { font-size: 1.9em; font-weight: normal; margin: 20px 0 15px; }
.myAccount h2 em { font-style: normal; color: #722978; }
.myAccount h3 { font-size: 1.2em; margin-bottom: 10px; }
.myAccount p { font-size: .85em; }

.myAccount .module { margin-bottom: 10px; }
.myAccount .module h2 { font-size: 1em; font-weight: bold; color: #fff; background: #732978; padding: 8px; margin: -1px 0 0 0; }

.myAccount #myDetails { background: transparent url(/css/images/en_GB/misc/bg_myDetails.jpg) 100px bottom no-repeat; padding-bottom: 80px;}
.myAccount #myDetails h3 { font-size: 1.2em; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }
.myAccount dl { overflow: auto; font-size: .85em; margin: 0 0 10px 0; }
.myAccount dt, .myAccount dd { float: left; width: 159px; margin-bottom: 5px; }
.myAccount dd { margin-left: 0; font-weight: bold; }
.myAccount dd select { font-size: 1em; }

.myAccount #myAccountBalance h3 { background: #e2d4e5 url(/css/images/en_GB/misc/accordionExpand.gif) 8px 11px no-repeat; padding: 8px 8px 8px 24px; border-top: 1px solid #fff; margin: 0; cursor: pointer; }
.myAccount #myAccountBalance h3.selected { background-image: url(/css/images/en_GB/misc/accordionCollapse.gif) }
.myAccount #myAccountBalance h3 em { font-style: normal; color: #732978; }
.myAccount #myAccountBalance .balanceDetails { margin-left: 25px; }
.myAccount #myAccountBalance h4 { text-transform: uppercase; font-size: .85em; margin-bottom: 5px; padding-top: 10px; }
.myAccount #myAccountBalance dl { margin: 0; }
.myAccount #myAccountBalance p.readMore { margin: 0; padding: 10px 0 15px; }

.myAccount p.readMore a { color: #000; background: transparent url(/css/images/en_GB/misc/go_purple.gif) top right no-repeat; padding: 0 20px 4px 0; margin-bottom: 0; }


/*** ACCOUNT HISTORY STYLES ***/

.steps_section .bottomRight input { margin-left: 23px; }

.steps_section .step2 .txt { width: 75px; }

.acc_history_tableArea .purpleArea a img { vertical-align: text-top; }

table.Account_historyTable td { vertical-align: top; padding: 5px 10px; }


/*** MANAGE CARDS STYLES ***/

#existingCards .moduleBody { padding: 15px 0 65px; background: transparent url(/css/images/en_GB/misc/bg_existingCardsModuleBody.jpg) 82px bottom no-repeat; }
#existingCards table { width: 448px; font-size: .85em; }
#existingCards tr.alt { background: #f7f2f6; }
#existingCards th, #existingCards .moduleBody td { padding: 7px 15px; }
#existingCards th { text-align: left; padding-bottom: 10px; padding-top: 0; }
#existingCards table a.rowDelete { background: transparent url(/css/images/en_GB/misc/bg_rowDelete.gif) top left no-repeat; padding-left: 18px; color: #333; text-decoration: none; }
#existingCards table a.rowDelete:hover { text-decoration: underline; color: #000; }

#addNewCard h2 { background: #999; }
#addNewCard .moduleBody { background: transparent url(/css/images/en_GB/misc/bg_addNewCardModuleBody.jpg) left bottom no-repeat; }
#addNewCard ol { margin: 0; padding: 0; list-style-type: none; font-size: .85em; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
#addNewCard li { overflow: auto; margin-bottom: 10px; }
#addNewCard label { float: left; width: 100px; }
#addNewCard input { float: left; width: 160px; border: 1px solid #bbb; padding: 2px; }
#addNewCard select { float: left; border: 1px solid #bbb; padding: 1px; margin-right: 5px; }
#addNewCard input, #addNewCard select { font-size: 1em; }
#addNewCard .btnHolder { text-align: right; padding-top: 15px; }
#addNewCard .btnHolder input { background: transparent url(../wsimages/en_GB/buttons/addNewCard.jpg) top left no-repeat; border: none; float: none; width: 100px; height: 25px; text-indent: -9999px; padding: 0; font-size:0px; line-height: 0px; cursor: pointer; }


/*** ORDER HISTORY STYLES ***/

#orderHistory, #orderSearch { border-top: 1px solid #ccc; }

#orderSearch .moduleBody { background: transparent url(/css/images/en_GB/misc/bg_orderSearch.jpg) top right no-repeat; }
#orderSearch #formHolder { padding: 10px 0 3px; overflow: auto; margin: 0; *height: 1%; }
#orderSearch #formHolder label, #orderSearch #formHolder select, #orderSearch #formHolder input { width: auto; margin-right: 15px; }
#orderSearch #formHolder label { font-size: .85em; margin-top: 5px; }
#orderSearch #formHolder select { font-size: .85em; margin-top: 4px; }
#orderSearch #formHolder input.btnSearch { background: url(../wsimages/en_GB/buttons/search02.gif) bottom left no-repeat; width: 126px; height: 30px; text-indent: -9999px; border: none; padding: 0; margin-right: 15px; cursor: pointer; font-size:0px; line-height: 0px; display: block; }

#orderHistory .moduleBody { padding: 0; }

#orderHistory table.orderSummary { width: 764px; }
#orderHistory table.orderSummary tr.alt { background: #efefef; }
#orderHistory table.orderSummary th, #orderHistory table.orderSummary td { padding: 10px 12px; vertical-align: top; border-right: 1px solid #ccc; }
#orderHistory table.orderSummary th { border-top: 2px solid #ccc; color: #742c76; text-align: left; }
#orderHistory table.orderSummary th.date { width: 25%; }
#orderHistory table.orderSummary th.number { width: 15%; }
#orderHistory table.orderSummary th.details { width: 60%; }
#orderHistory table.orderSummary td { border-top: 1px solid #ccc; font-size: .85em; }

#orderHistory table.orderDetails { width: 100%;  }
#orderHistory table.orderDetails th, #orderHistory table.orderDetails td { border: none; padding: 1px 5px; }
#orderHistory table.orderDetails th { border: none; color: #333; }
#orderHistory table.orderDetails th.number { width: 20%; }
#orderHistory table.orderDetails th.name { width: 60%; }
#orderHistory table.orderDetails th.price { width: 20%; }
#orderHistory table.orderDetails td { font-size: 1em; }


/*** ONLINE RELOAD STYLES ***/



#onlineReload .moduleBody { background: transparent url(/css/images/common/misc/bg_onlineReload_en.jpg) 439px top no-repeat; padding:14px; font-size:100%; }
/***#onlineReload .moduleBody { background: transparent url(/css/images/common/misc/bg_onlineReload_3_en.jpg) 439px top no-repeat; padding:14px; font-size:100%; }***/

#onlineReload #formHolder .btnHolder input {  background: transparent url(../wsimages/en_GB/buttons/reload-now.gif) top left no-repeat; width: 112px; height: 25px; font-size:0px; line-height: 0px; display: block; }
#onlineReload li span.required { background: transparent url(/css/images/en_GB/misc/bg_required.gif) right top no-repeat; color:#ffffff;display: -moz-inline-stack; display: inline-block; text-indent: -9999px; width: 15px; height: 12px; vertical-align: middle; margin: 0; }

#onlineReloadConfirmation .backLink { text-align: center; margin-bottom: 0; }
#onlineReloadConfirmation .backLink a { 
	background: transparent url(/wsimages/en_GB/buttons/back2AccountSummary.gif) bottom left no-repeat; 
	border: none; 
	width: 174px; 
	height: 24px; 
	text-indent: -9999px; 
	padding: 0; 
	display: block;
	font-size:0px; 
	line-height: 0px;
	margin: 0 auto;
}
.reloadNotice { font-size:80%; color: #ADADAD; width:350px; }
.infoOptIn { font-size:80%;}
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; background: #fff; border: 1px solid #666; font-size: .92em; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; background: url(images/en_GB/misc/stepsH1BG.gif) center left; color: #fff; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; background: url(images/en_GB/misc/ui-date-prev.gif) center center; }
.ui-datepicker .ui-datepicker-next { right:2px; background: url(images/en_GB/misc/ui-date-next.gif) center center; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
.ui-state-default { background: #eee; border: 1px solid #D8DCDF; }
.ui-state-highlight { background: #fbf8ee; border: 1px solid #FCD3A1; }
.ui-state-disabled { opacity: 0.35; }
.ui-icon { text-indent: -99999px;}
.ui-datepicker-trigger { margin-top: 5px; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/* assignPlans to package styles. basket */
#assignPlans .moduleBody { overflow: visible; padding-top: 1px; }
#assignPlans .alert { border: 1px solid #f90; background: #ccc url(/css/images/en_GB/misc/bg_alert.gif) 680px center no-repeat; padding: 15px; margin: 15px; }
#assignPlans .alert p { color: #000; margin-right: 45px; }

#assignPlans ul { list-style-type: none; padding: 0 0 10px 0; margin: 0; }
#assignPlans li { background: #e8f6f7; margin-top: 10px; padding: 15px 15px 5px; border-bottom: 1px dotted #999; border-top: 1px dotted #999; }
#assignPlans ul h3, #assignPlans ul dl, #assignPlans ul dt, #assignPlans ul dd, #assignPlans ul p { float: right; padding: 0; margin: 0; }
#assignPlans ul h3 { width: 200px; color: #008699; font-size: 1.3em; }
#assignPlans ul dl { width: 460px; font-size: 1.2em; }
#assignPlans ul dt,#assignPlans ul dd { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #999; }
#assignPlans ul .last { border: none; padding-bottom: 0; }
#assignPlans ul dt { width: 190px; font-weight: bold; }
#assignPlans ul dd { width: 250px; margin-left: 20px; display: inline; position: relative; }
#assignPlans ul dd a.assignPlanInfoIcon { display: block; position: absolute; top: -4px; right: 235px; width: 15px; height: 23px; text-decoration: none; background: transparent url(/css/images/ar_QA/misc/bg_assignPlanOption.gif) right 8px no-repeat; cursor: default; overflow: hidden; }
#assignPlans ul dd a.assignPlanInfoIcon:hover, 
#assignPlans ul dd a.assignPlanInfoIcon:active, 
#assignPlans ul dd a.assignPlanInfoIcon:focus { width: 250px; height: 100px; }
#assignPlans ul dd a span.assignPlanInfoBox { position: absolute; top: -9999px; right: -9999px; display: none; color: #333; font-size: .8em; padding-right: 10px; background: transparent url(/css/images/ar_QA/misc/bg_assignPlanInfo.gif) -9999px -9999px no-repeat; }
#assignPlans ul dd a:hover span.assignPlanInfoBox, 
#assignPlans ul dd a:active span.assignPlanInfoBox, 
#assignPlans ul dd a:focus span.assignPlanInfoBox { display: block; top: 0; right: 20px;  background: transparent url(/css/images/ar_QA/misc/bg_assignPlanInfo.gif) right 4px no-repeat; }
#assignPlans ul dd a span.assignPlanInfoTitle { display: block; background: #ccc; padding: 5px; font-weight: bold; border: 2px solid #ccc; }
#assignPlans ul dd a span.assignPlanInfoBody { display: block; background: #fff; padding: 5px; border: 2px solid #ccc; }
#assignPlans ul p { width: 73px; }