/* -----------------------------------------------------------------------------*/
/* VARIABLES
/* -------------------------------------------------------------------------------
/* COLOURS */
/* FONT SIZES */
/* FONT STACKS */
/* Use of non-standard fonts in Sainsburys Savers Delivery Pass
MaryAnn
----------
Top nav
H1
Buttons
MaryAnn Bold
-------------
Top nav selected
Stage indicator
H2
Footer nav
MaryAnn ExtraBold
MaryAnn Light
MaryAnn Medium
LucidaGrande
--------------
Error summary heading
LucidaGrande Bold
*/
@font-face {
font-family: 'MaryAnn';
src: url(../font/mary_ann_web-regular.eot);
src: url(../font/mary_ann_web-regular.eot?#iefix) format("embedded-opentype"), url(../font/mary_ann_web-regular.woff) format("woff"), url(../font/mary_ann_web-regular.svg#MaryAnn) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'MaryAnn';
src: url(../font/mary_ann_web-medium.eot);
src: url(../font/mary_ann_web-medium.eot?#iefix) format("embedded-opentype"), url(../font/mary_ann_web-medium.woff) format("woff"), url(../font/mary_ann_web-medium.svg#MaryAnnBold) format("svg");
font-weight: 500;
font-style: normal; }
@font-face {
font-family: 'MaryAnn';
src: url(../font/mary_ann_web-bold.eot);
src: url(../font/mary_ann_web-bold.eot?#iefix) format("embedded-opentype"), url(../font/mary_ann_web-bold.woff) format("woff"), url(../font/mary_ann_web-bold.svg#MaryAnnBold) format("svg");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'MaryAnn';
src: url(../font/mary_ann_web-extrabold.eot);
src: url(../font/mary_ann_web-extrabold.eot?#iefix) format("embedded-opentype"), url(../font/mary_ann_web-extrabold.woff) format("woff"), url(../font/mary_ann_web-extrabold.svg#MaryAnnBold) format("svg");
font-weight: 700;
font-style: normal; }
@font-face {
font-family: 'MaryAnnBold';
src: url(../font/mary_ann_web-bold.eot);
src: url(../font/mary_ann_web-bold.eot?#iefix) format("embedded-opentype"), url(../font/mary_ann_web-bold.woff) format("woff"), url(../font/mary_ann_web-bold.svg#MaryAnnBold) format("svg");
font-weight: normal;
font-style: normal; }
/* -----------------------------------------------------------------------------*/
/* TABLE OF CONTENTS
/* -------------------------------------------------------------------------------
This CSS document has been divided up into the following sections:
01. RESET
01.1 NORMALISE.CSS RESET (SOME REMOVED / COMMENTED)
01.2 CUSTOM RESET
02. UNIVERSAL STYLES
02.1 HEADINGS
03. SKIP LINKS
03.1 ACCESS SKIP LINKS
03.2 SKIP LINK
04. HEADER
04.1 HEADER OVERLAYS
04.1.1 HEADER MENU OVERLAY SPECIFICS
04.1.2 HEADER CHECKOUT OVERLAY SPECIFICS
05. LAYOUT
08. FOOTER
09. BUTTONS
09.1 ACTION BUTTONS
09.2 PROMOTION OPTIONS
09.3 FILTER BUTTON
11. FORMS
11.1 REGISTRATION
12. ERROR HANDLING
13. TABLES
13.1 ORDER SUMMARY
13.2 TROLLEY SUMMARY
13.3 VOUCHER SUMMARY
14. FIXED AND LIQUID WIDTH COMBO
17. LINKS
17.1 VOUCHER SUMMARY
*/
/* -----------------------------------------------------------------------------*/
/* RESET
/* -----------------------------------------------------------------------------*/
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
header {
background: white;
display: block;
border-bottom: #d8d8d8 1px solid;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
/*margin:0 0 .306em 9px;*/
margin: 0 0 .306em;
font-size: 2.5rem!important;
line-height: 1.25!important;
font-weight: 700!important;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif!important;
}
h2 {
font-size: 1.375em;
margin: 0 0 1.136em;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif!important;
}
h3 {
font-size: 0.875em;
margin: 0 0 1em;
font-weight: normal;
}
h4 {
font-size: 0.75em;
margin: 0 0 1em;
}
h5 {
font-size: 0.75em;
margin: 0 0 1em;
}
h6 {
font-size: 0.75em;
margin: 0 0 1em;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: black;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 0 0 1em;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
padding: 0;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background: #f2f2f2;
color: #404040;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
min-width: 900px;
}
p {
/* Provided for accessibility, so that we do no have long lines of text. */
max-width: 37em;
}
/* ==========================================================================
Generic classes
==========================================================================*/
.access {
left: -9999px;
position: absolute;
top: -9999px;
}
.hidden,
.js .jsHidden,
.no-js .no-jsHidden {
display: none;
}
.jsShow {
display: none;
}
.jsHidden,
.js .jsShow {
display: block;
}
.siteCatalystTag {
display: none;
}
.minor {
font-size: 0.75em;
}
/* Please note: We are only declaring this class so we can extend it for elements
that need a clearing solution other than overflow:hidden. DO NOT apply this
class to elements in your HTML.
Please alse note: We opted for declaring this ourselves rather than using
Bourbon's mixin as adding *zoom:1 to the selector ourselves will use less
characters than adding to a chain of selectors. */
.clearfix:before, .secondaryCol:before, .primaryCol:before, main:before, .passes:before, .clearfix:after, .secondaryCol:after, .primaryCol:after, main:after, .passes:after {
content: " ";
display: table;
}
.clearfix:after, .secondaryCol:after, .primaryCol:after, main:after, .passes:after {
clear: both;
}
/* ==========================================================================
page structure
==========================================================================*/
.pageCentre {
margin: 0 auto;
width: 960px;
*text-align: center;
}
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 1em 70px 1em;
position: relative;
*text-align: left;
width: 960px;
*zoom: 1;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 942px;
*zoom: 1;
}
.secondaryCol {
float: left;
width: 36.3%;
*zoom: 1;
}
.primaryCol {
float: right;
width: 61.8%;
*zoom: 1;
}
.eSpotContainer {
overflow: hidden;
*zoom: 1;
}
/* order Confirmation page */
.orderConfirmation .secondaryCol {
float: right;
}
.orderConfirmation .primaryCol {
float: left;
}
.orderConfirmation .ddPrimaryPanel {
padding: 15px 20px 0 20px;
}
/* Pass page */
.passPage .secondaryCol {
float: left;
width: 58%;
height: 100%;
}
.passPage .primaryCol {
float: right;
width: 40%;
background: #fff;
margin-right: 10px;
}
a {
color: inherit;
*color: #222;
text-decoration: underline;
}
a:hover {
cursor: pointer;
/* Needed for links that do not have a href - they have a JavaScript reaction */
text-decoration: none;
}
/* anchors with no underline until hovered over */
a.button, nav li a, footer li a, .printHeader a, .globalNav a {
text-decoration: none;
}
a.anchorWithIcon .icon {
margin-right: 0.5em;
vertical-align: middle;
}
/* ==========================================================================
Icons
==========================================================================*/
.icon {
background-image: url(../img/sprite-icons.png);
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: 28px;
width: 28px;
}
.nectar {
background-position: 0 0;
height: 27px;
width: 30px;
}
.info {
background-position: 0 -50px;
}
.warning {
background-position: 0 -100px;
}
.close {
background-position: 0 -150px;
height: 15px;
width: 15px;
}
.masterCard {
background-position: 0 -200px;
height: 30px;
width: 70px;
}
.verfiedVisa {
background-position: 0 -250px;
height: 34px;
width: 55px;
}
.visa {
background-position: 0 -300px;
height: 19px;
width: 30px;
}
.americanExpress {
background-position: 0 -350px;
height: 28px;
width: 30px;
}
.add {
background-position: 0 -400px;
}
.arrowRight1 {
background-position: 0 -450px;
height: 14px;
width: 11px;
}
.arrowRight2 {
background-position: 0 -500px;
height: 14px;
width: 11px;
}
.tick {
background-position: 0 -550px;
}
.warning2 {
background-position: 0 -600px;
height: 27px;
width: 31px;
}
.newWindow {
background-position: 0 -650px;
height: 12px;
width: 12px;
}
.print {
background-position: 0 -700px;
height: 27px;
width: 27px;
}
.cookiePolicy .close {
background-position: 0 -1000px;
height: 15px;
width: 15px;
}
a.cta .icon {
margin-right: 10px;
vertical-align: -10%;
}
.ccAmericanExpress,
.ccMasterCard,
.ccMaestroDebit,
.ccSolo,
.ccSwitchDebit,
.ccVisa,
.ccVisaDebit, .ccVisaElectron {
width: 51px;
height: 32px;
}
.ccAmericanExpress {
background-position: 0 -350px;
}
.ccMasterCard {
background-position: 0 -1050px;
}
.ccMaestroDebit {
background-position: 0 -1100px;
}
.ccSolo {
background-position: 0 -1150px;
}
.ccSwitchDebit {
background-position: 0 -1200px;
}
.ccVisa {
background-position: 0 -300px;
}
.ccVisaDebit {
background-position: 0 -1250px;
}
.ccVisaElectron {
background-position: 0 -1300px;
}
/* ==========================================================================
HEADERS
==========================================================================*/
.withCards,
.wrapFloat {
overflow: hidden;
*zoom: 1;
}
.withCards .icon {
float: right;
}
h1.withCards .verfiedVisa {
margin-left: 19px;
}
h1.withCards .masterCard {
margin-top: 0.111em;
}
h2 {
color: #404040;;
}
.inner {
margin: 0 auto;
_margin: 0;
max-width: 960px;
_width: 960px;
}
main {
/*display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;*/
margin: 0 auto;
_margin: 0;
max-width: 940px;
padding: 0 0 40px;
_width: 940px;
*zoom: 1;
}
.homePage main {
max-width: 960px;
_width: 960px;
background: #f2f2f2;
}
/* ==========================================================================
Skip links
========================================================================== */
.skipLinks li {
*float: left;
*width: 20em;
}
.skipLinks a,
.skipLists a {
height: 1.2em;
left: -9999px;
position: absolute;
top: -9999px;
}
.skipLists a:active,
.skipLists a:focus {
position: static;
}
.skipLinks a:active,
.skipLinks a:focus {
background: #fff;
border: 1px solid #f26334;
font-size: .75em;
/* 12px */
left: 0;
padding: .5em 1em;
top: 0;
z-index: 900;
}
/* Buttons */
/* .button {
background: #ffd217;
border: 0;
border-radius: 20px;
box-shadow: inset 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px rgba(0, 0, 0, 0.3);
color: #222222;
font-family: 'MaryAnn';
font-size: 1em;
padding: 7px 15px 9px;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
.button:hover, .button:focus {
box-shadow: inset 1px 1px rgba(255, 255, 255, 0), inset -1px -1px transparent;
}
.button:active {
box-shadow: inset -1px -1px rgba(255, 255, 255, 0.4), inset 1px 1px rgba(0, 0, 0, 0.3);
} */
.secondary {
background: #cccccc;
}
.tertiary {
background: #72213e;
color: #fff;
}
.lt-ie8 .button {
/*border-width:1px;*/
line-height: 1;
}
/* Needed to remove extra padding included by Firefox */
input.button::-moz-focus-inner {
border: none;
padding: 0;
}
/* fix for IE7 and below to remove extra padding from buttons */
input.button {
*overflow: visible;
*width: 1;
}
/* Variations in style */
.pass .button {
border-radius: 2px;
}
.voucherForm .button {
font-size: 1.125em;
padding: 7px 28px 9px;
}
/* For the Go input button that only appears when JS is off and can break the styling */
.minimalNonJS {
margin: 0;
padding: 0;
}
/* Cookie Policy */
.cookiePolicy {
background: #555555;
color: #fff;
padding: 6px 0 8px;
-webkit-transition: margin-top 0.5s;
-moz-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.cookiePolicy p {
font-size: 0.75em;
margin-bottom: 0;
max-width: 100%;
}
.cookiePolicy .policyHeading {
font-family: "MaryAnnBold";
font-size: 1em;
}
.cookiePolicy .inner {
position: relative;
}
.cookiePolicy .closeLink {
position: absolute;
right: 0;
top: 0;
}
/* Global Navigation */
.globalNav {
background: #fff;
padding: 8px 0;
}
.globalNav .inner {
overflow: hidden;
*zoom: 1;
}
.globalNav p {
color: #222222;
display: inline-block;
font-size: 0.75em;
margin: 0;
}
.globalNav p.homepageGreeting {
float: right;
color: #0c0c0c;
font-family: MaryAnn, "Trebuchet MS", sans-serif;
font-weight: 500;
text-decoration: none;
font-size: 14px;
}
.globalNav a {
color: #0c0c0c;
font-family: MaryAnn, "Trebuchet MS", sans-serif;
font-weight: 500;
text-decoration: none;
font-size:14px;
}
.globalNav a:hover,
.globalNav a:focus {
text-decoration: underline;
}
.globalNav a .icon {
margin-left: 5px;
vertical-align: -4%;
}
/* Logo */
.logoNav {
padding-top: 42px;
_height: 68px;
max-width: 960px;
margin-bottom:10px;
}
.logoNav a {
display: inline-block;
width: 60%;
}
.logoNav img {
width: 65%;
}
/* Help text */
.logoNav .helpMessage {
color: #222222;
float: right;
font-size: 0.875em;
width:40%;
}
/* Main Navigation */
/* .mainNav {
border-bottom: 2px solid #eb8c23;
} */
.mainNav ul {
margin: 0 9px;
overflow: hidden;
padding-right: 7em;
position: relative;
zoom: 1;
}
/* .mainNav li {
float: left;
font-size: 1.375em;
margin: 0 1.909em 0.454em 0;
0 42px 10px 0
} */
/* .mainNav a {
color: #222;
font-family: "MaryAnn";
text-decoration: none;
} */
.mainNav a:hover, .mainNav a:focus, .mainNav a:active {
text-decoration: none;
}
.mainNav .myPasses {
float: none;
margin-right: 0;
position: absolute;
right: 0;
top: 0;
*top: -2px;
/* IE7 has a problem with the height of this due to the icon inside, hence why we need to change the top value. */
}
.mainNav .myPasses a {
color: #72213e;
}
.mainNav .myPasses .icon {
margin-right: 9px;
*vertical-align: 20%;
}
.mainNav strong {
color: #555555;
font-family: "MaryAnnBold";
}
/* Footer Navigation */
footer ul {
background-color: #4c4c4c;
padding: 32px;
list-style:none;
}
.footer {
clear: both;
margin: 0 auto;
width: 100%;
min-width: 662px;
zoom: 1;
text-align: center;
position: static;
bottom: 0;
}
.footer ul li {
display: inline-block;
margin: 0 12px 0 0;
}
.footer a {
font-size: 1.125rem!important;
line-height: 1.57143!important;
font-weight: 400!important;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif!important;
color:#fff
}
}
/* Passes */
.passes {
padding: 20px 0 0;
zoom: 1;
}
.passesList {
list-style-type: none;
margin: 0 -4px;
*margin: 0 -4px 20px;
/* -IE7 has a hard time clearing margins */
padding: 0;
text-align: center;
zoom: 1;
}
.pass {
/* border: 2px solid #cccccc;
border-radius: 12px; */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 20px;
padding: 1em;
position: relative;
}
.passesList .pass {
display: inline-block;
*float: left;
/* As IE7 won't handle display:inlin-block in this instance */
margin: 0 4px 20px;
max-width: 400px;
min-height: 20em;
min-width: 340px;
*min-width: 0;
/* IE7 doesn't handle box-sizing so we'll just give this a set size */
text-align: left;
vertical-align: top;
width: 31.5%;
*width: 265px;
}
@supports (flex-wrap: wrap) {
.passesList {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -5px;
}
.passesList .pass {
flex: 1;
margin-left: 5px;
margin-right: 5px;
min-height: 0;
width: auto;
background: #fff;
}
}
.pass h3 {
color: #f06c00;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif!important;
line-height: 1.22581!important;
font-weight: 700!important;
font-size: 1.375em;
margin: 0 0 26px;
padding: 0 60px 0 0;
}
.passImage {
margin: 0 -11px 10px;
text-align: center;
}
.passImage img {
vertical-align: top;
}
.passDesc {
font-size: 0.875em;
text-align: center;
}
.pass .roundel {
position: absolute;
right: -9px;
top: -21px;
}
.passVariants {
list-style-type: none;
margin: 0 ;
padding: 0 ;
border-top: 1px solid #d8d8d8;
}
.passVariants li {
padding: .5rem 1rem;
overflow: hidden;
zoom: 1;
}
ul.passVariants li:nth-child(even){
background-color:#f2f2f2
}
.passVariants h4 {
color: #404040;
font-size: 1rem;
line-height: 1.5;
font-weight: 400;
float: left;
margin: 12px 4px 0 0;
width: 29%;
}
.passVariants .priceInfo {
color: #404040;
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
float: left;
margin: 14px 0 0;
width: 30%;
}
.passVariants .passPrice {
font-size: 0.875em;
margin: 0;
}
.passVariants .price {
font-weight: bold;
}
.passVariants .reducedPrice {
color: #e42313;
}
.passVariants .wasPrice,
.wasPrice {
font-size: .857em;
/* 12px */
text-decoration: line-through;
}
.passVariants .pricePerMonth {
font-size: 0.75em;
margin: 0;
}
.passVariants form {
float: right;
}
/* Voucher Form */
.voucherForm {
margin: 0 0 26px;
padding: 15px;
text-align: center;
zoom: 1;
border-top: 5px solid #f2f2f2;
}
.voucherForm h2 {
display: inline-block;
*float: left;
font-family: "MaryAnnBold";
margin-bottom: 0;
margin-right: .5em;
vertical-align: middle;
}
.voucherForm .field {
display: inline-block;
*float: left;
margin-bottom: 0;
vertical-align: middle;
}
.voucherForm .input input[type="text"] {
margin-bottom: 0;
margin-right: 5px;
/* Prevents input from being cut off, although not sure why it was getting cut off */
vertical-align: top;
width: 270px;
}
.voucherForm .errorText {
margin-left: 0;
overflow: auto;
}
.voucherForm .errorText p {
width: 100%;
}
.passPage .voucherForm {
margin: 0;
}
.passPage .voucherForm h2 {
font-size: 1.125em;
margin: 0 0 .5em;
}
.passPage .voucherForm .input input[type="text"] {
margin: 0 0 1em;
border-radius: 2px;
border: 1px solid #737373;
}
/* H1 header block with print function */
.printHeader {
margin-bottom: 10px;
overflow: hidden;
padding: 0 0 0 9px;
*zoom: 1;
}
.printHeader h1 {
margin-left: 0;
}
.printHeader p {
float: left;
font-size: 1em;
width: 75%;
}
.printHeader a {
float: right;
font-size: 0.875em;
}
.printHeader a .icon {
margin-left: 8px;
vertical-align: -45%;
}
/* stage-indicator */
.stageIndicator {
background: #f0f0f0;
border-radius: 9px;
margin-bottom: 20px;
max-width: 960px;
overflow: hidden;
padding: 0;
width: 100%;
*zoom: 1;
}
.stageIndicator li {
float: left;
font-family: 'MaryAnn';
height: 12px;
line-height: 1;
list-style: none;
/* Disable the normal item numbering */
padding: 12px 1% 16px;
*padding: 12px 1px 16px;
position: relative;
text-align: center;
width: 48%;
z-index: 1;
}
.stages3 li {
width: 31%;
}
.stages4 li {
width: 23%;
}
.stageIndicator li:after {
background-image: url(../img/sprite-icons.png);
background-position: 0 -850px;
background-repeat: no-repeat;
content: "";
height: 40px;
position: absolute;
right: 0;
top: 0;
width: 24px;
z-index: 2;
}
.stageIndicator li.last:after {
display: none;
}
.stageIndicator li.current:after {
background-position: 0 -800px;
right: -1px;
}
.stageIndicator li.completed:after {
background-position: 0 -750px;
}
.stageIndicator li.completed2:after {
background-position: 0 -1350px;
}
.stageIndicator li.completed {
background: #cccccc;
font-family: 'MaryAnnBold';
}
.stageIndicator li.current {
background: #72213e;
color: #fff;
font-family: 'MaryAnnBold';
}
/* Primary panel */
.ddPrimaryPanel,
.ddSecondaryPanel {
border: 1px solid #d8d8d8;
clear: both;
margin-bottom: 10px;
overflow: hidden;
padding: 1rem;
*zoom: 1;
background:#fff
}
.hPadding {
padding: 0 10px;
}
.ddPrimaryPanel h2,
.ddSecondaryPanel h2 {
padding: 0 10px;
}
.ddPrimaryPanel .hPadding h2,
.ddSecondaryPanel .hPadding h2 {
padding: 0;
}
.ddPrimaryPanel h2,
.ddSecondaryPanel h2,
.subPanel h2,
.overlay h2 {
font-size: 1.375rem!important;
line-height: 1.18182!important;
font-weight: 700!important;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif!important;
}
.ddPrimaryPanel > p {
color: #222;
font-size: 0.875em;
margin-bottom: 15px;
}
p.additionalInfo {
font-size: 0.875em;
max-width: 39em;
}
/* Forms */
input {
/* Makes sure that webkit's handling of placeholder is consistent across browsers */
}
input[type=text], input[type=email], input[type=password], input[type=tel] {
border: 1px solid #555555;
border-radius: 2px;
color: #222;
font-size: 0.875em;
margin-bottom: 9px;
padding: 11px 10px;
width: 200px;
}
input[type=checkbox] {
background-color: #fff;
border-radius: 4px;
width: 20px;
}
input::-webkit-input-placeholder {
color: #222222;
}
input:-moz-placeholder {
color: #222222;
}
input::-moz-placeholder {
color: #222222;
}
input:-ms-input-placeholder {
color: #222222;
}
input:focus::-webkit-input-placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
input:focus:-moz-placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
input:focus::-moz-placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
input:focus:-ms-input-placeholder {
transition: opacity 0.2s 0.2s ease;
opacity: 0;
}
select {
border: 1px solid #555555;
border-radius: 9px;
color: #222;
font-size: 0.875em;
margin-bottom: 9px;
padding: 10px 8px 10px 5px;
text-overflow: ellipsis;
vertical-align: middle;
width: 222px;
}
.field {
margin-bottom: 11px;
overflow: hidden;
*zoom: 1;
}
.input {
float: left;
}
.input .nonJSButton {
font-size: 0.75em;
padding: 0;
vertical-align: 30%;
}
.indicator {
float: left;
padding: 12px 10px 0 0;
text-align: right;
width: 149px;
}
.disabledField .indicator,
.indicatorWith2lines {
padding-top: 0;
}
.checkboxField {
margin-bottom: 20px;
}
.checkboxField .indicator {
padding: 0 0 0 10px;
text-align: left;
width: 90%;
}
.indicator label,
.input label {
color: #555555;
font-size: 0.875em;
font-weight: bold;
line-height: 1;
}
.checkboxField .indicator label,
.checkboxes .input label,
.radios .input label {
font-weight: normal;
}
.indicator label span {
display: block;
font-weight: normal;
}
.radios .input,
.checkboxes .input {
float: none;
}
.formSectionBody {
padding: 0 19px;
}
input.postcodeInput {
width: 165px;
}
.input input[type="text"]:disabled,
span.inputDisabled,
ul.inputDisabled li {
background: none;
border: 0;
color: #555555;
display: inline-block;
font-size: 0.875em;
font-weight: bold;
margin: 0;
min-height: 0;
padding: 0 10px;
width: auto;
}
ul.inputDisabled li {
display: block;
}
span.inputDisabled {
padding-left: 0;
}
/* Billing address */
.checkoutMoreDetails2 ul {
list-style: none;
margin: 3px 0 0;
padding: 0;
}
.error .input input[type=email],
.error .input input[type=password],
.error .input input[type=text],
.error .input select {
border-color: #e23d3b;
border-width: 2px;
}
.errorText {
display: none;
margin-left: 160px;
position: relative;
}
.error .errorText,
.errorMessage .errorText {
display: block;
}
.loginPanel .errorText {
margin-left: 150px;
}
.modal .errorText {
margin-left: 0;
}
.checkboxes .errorText,
.radios .errorText {
margin-left: 0;
}
.errorText .warning {
left: 0;
position: absolute;
top: 47px;
_top: 40px;
}
.errorText p {
color: #e23d3b;
font-size: 0.75em;
margin-bottom: 10px;
width: 260px;
}
.loginPanel .errorText p,
.modal .errorText p {
padding: 0;
width: auto;
}
.checkboxes .errorText p,
.radios .errorText p {
padding-left: 0;
width: auto;
}
.input p {
color: #222;
font-size: 0.75em;
width: 267px;
}
.input p.info2 {
color: #555555;
display: inline-block;
padding-left: 0px;
width: 120px;
}
.paymentCard {
color: #555555;
font-size: 0.875em;
margin-bottom: 0;
}
.paymentCard .cardType {
color: black;
font-weight: bold;
}
.paymentCard .expires {
font-size: .857em;
/* 12px from within 14px */
}
.paymentCard .icon {
margin-right: 7px;
vertical-align: -60%;
}
.paymentCard .americanExpress {
vertical-align: -50%;
}
.paymentCard .changeCard {
font-size: .857em;
/* 12px from within 14px */
margin-left: .5em;
}
/* Variations in style */
.chooseCard .paymentCard {
float: left;
}
.chooseCard h2 {
margin: 0 0 20px;
}
.chooseCard ul {
border-top: 1px solid #cccccc;
list-style: none;
margin-bottom: 13px;
padding: 0;
}
.chooseCard li {
border-bottom: 1px solid #cccccc;
overflow: hidden;
padding: 15px 10px;
*zoom: 1;
}
.chooseCard .currentlySelected {
float: right;
font-size: 0.75em;
margin: 3px 0 0;
}
.chooseCard .currentlySelected .icon {
margin-right: 7px;
vertical-align: -60%;
}
.chooseCard .addNewCard {
float: none;
font-size: 0.875em;
margin: 4px 10px 20px;
}
.chooseCard .field {
float: right;
}
.chooseCard .button {
float: right;
padding: 5px 0;
text-align: center;
width: 8em;
}
.infoPairings p .icon,
.confirmationSummary p .icon {
margin-right: 7px;
vertical-align: -60%;
}
/* Error Messages */
.errorMessage {
border: 2px solid #d70000;
border-radius: 2px;
margin: 0 0 10px;
overflow: hidden;
padding: 21px 19px 0 56px;
position: relative;
*zoom: 1;
}
.errorMessage h2 {
color: #d70000;
line-height: 1;
margin-bottom: 0.5em;
}
.errorMessage p,
.errorMessage ul {
color: #e23d3b;
margin: 0;
}
.errorMessage .warning {
left: 18px;
position: absolute;
top: 19px;
}
.errorSingle .warning {
top: 17px;
}
.errorMessage p {
font-weight: bold;
margin-bottom: 10px;
}
.errorMessage ul {
margin-bottom: 19px;
padding: 0;
}
.errorMessage ul li {
background: url(../img/sprite-icons.png) 0 -944px no-repeat;
font-size: 0.875em;
list-style: none;
padding: 0 0 0 14px;
}
.errorMessage ul li a {
font-size: 1em;
}
.field .warning {
display: none;
}
.error .warning {
display: inline-block;
margin: 0 0.1em 0 0;
vertical-align: -45%;
}
.challengeAnswerField .warning,
.titleField .warning {
vertical-align: -25%;
}
.errorSingle {
/* Used on the homepage when there is a single error message */
margin: 10px 0 0;
padding-bottom: 12px;
}
.errorSingleDD {
/* Used on the Delivery details page when there is a single error message */
padding-bottom: 12px;
}
a.cta {
color: #222;
display: block;
font-size: 0.875em;
}
a.cta .icon {
margin-right: 10px;
vertical-align: -10%;
}
/* dd Secondary Panel */
.ddSecondaryPanel {
border-color: #d8d8d8;
/*padding:11px 10px 15px 10px;*/
}
.ddSecondaryPanel .hPadding {
padding: 0 10px;
}
.ddSecondaryPanel .subPanelDivider {
border-bottom: 1px solid #d8d8d8;
margin-bottom: 18px;
}
.ddSecondaryPanel .subPanelDividerTop {
border-top: 1px solid #d8d8d8;
padding-top: 18px;
}
.ddSecondaryPanel p {
font-size: 0.875em;
overflow: hidden;
*zoom: 1;
}
.ddSecondaryPanel .start, .ddSecondaryPanel .saving, .ddSecondaryPanel .total {
font-size: 1em;
/* to stop font-size multiplying effects */
}
.ddSecondaryPanel p .major {
color: black;
display: inline-block;
font-size: 1em;
}
.ddSecondaryPanel p .value {
float: right;
font-size: 0.875em;
}
.ddSecondaryPanel .total .value {
font-size: 1em;
}
.ddSecondaryPanel .start .value {
line-height: 1.5;
}
.ddSecondaryPanel p .minor {
clear: both;
color: #555555;
display: block;
font-size: 0.875em;
}
.ddSecondaryPanel .saving,
.ddSecondaryPanel .total {
margin-bottom: 15px;
}
.ddSecondaryPanel .saving .major {
font-size: 0.875em;
}
.ddSecondaryPanel .total .major {
color: #555555;
}
.ddSecondaryPanel .total .value {
color: #555555;
font-size: 1;
}
.ddSecondaryPanel ul,
.siteMap ul {
margin: 16px 0;
padding: 0;
}
.ddSecondaryPanel li,
.siteMap li {
background: url(../img/sprite-icons.png) 0 -896px no-repeat;
color: #222;
font-size: 1rem;
list-style: none;
margin: 0 0 4px 0;
padding: 0 0 0 14px;
}
.siteMap li {
font-size: 0.875em;
}
.ddSecondaryPanel a.cta {
margin-bottom: 10px;
}
.subPanel {
background: #d8d8d8!important;
margin-bottom: 20px;
padding: 20px;
}
.iconIndent {
padding: 20px 20px 20px 10px;
}
.iconIndent div {
min-height: 27px;
padding-left: 35px;
position: relative;
}
.iconIndent > .icon,
.iconIndent .info,
.iconIndent .nectar,
.iconIndent .warning2,
.iconIndent .tick {
left: 0;
position: absolute;
top: 0;
_left: -37px;
}
.subPanel .icon {
top: 2px;
}
.subPanel p {
font-size: 0.875em;
margin: 0;
}
.subPanel .mb1 {
margin-bottom: 10px;
}
.iconIndent strong {
color: #555555;
}
.subPanel h2 {
margin-bottom: 10px;
}
.pageWithoutH1 .subPanel3,
.pageWithoutH1 .errorMessage {
margin-top: 10px;
}
/*.subPanelSingleLine p {
padding-top:5px;
}*/
.primaryCol > .button {
float: right;
}
.ddPrimaryPanel > .button,
.passWarning .button,
.checkPostCode .button,
.checkoutMoreDetails .button,
.checkoutMoreDetails2 .button,
.checkDeliveryAddress .button,
.AddVoucherCode .button {
float: right;
margin-bottom: 0.5em;
}
.checkPostCode .input .button,
.checkoutMoreDetails2 .input .button {
float: none;
margin: 0 0 0 10px;
}
.error .input .button {
margin-left: 0;
}
/* suggestion panel on confirmation page in secondary column */
.suggestion h2 {
color: #222;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
margin-bottom: 0;
}
/* .suggestion .button {
display: inline;
font-size: 1.125em;
margin: 0 auto;
text-align: center;
width: 10em;
} */
p.address {
font-size: 0.875em;
line-height: 1.6;
}
.confirmationSummary {
margin-bottom: 10px;
}
.confirmationSummary h3,
.confirmationSummary p {
display: inline-block;
font-size: 1rem;
*display: inline;
}
.confirmationSummary h3 {
color: #555555;
font-weight: bold;
text-align: right;
width: 150px;
}
.confirmationSummary p {
padding: 0 0 0 5px;
}
.visa {
margin-right: 5px;
vertical-align: -20%;
}
p.confirmationSummary {
margin: 0 0 20px 155px;
}
/* Overlay panel */
.pageOverlay {
background: black;
filter: alpha(opacity=70);
height: 100%;
left: 0;
opacity: 0.7;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
}
.deliveryPassOverlay {
line-height: 1.23077;
font-weight: 700;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif;
}
.overlay {
background: #fff;
left: 50%;
margin: 0 0 0 -216px;
overflow: hidden;
padding: 30px;
position: absolute;
top: 33%;
width: 392px;
z-index: 1001;
*zoom: 1;
}
.overlayWithEPromo {
width: 670px;
height: auto;
/* 670 pixels needed for E Promos */
}
.overlayWithEPromo h2 {
padding: 0 60px 0 0;
}
.overlayWithEPromo .buttonHolder {
text-align: center;
margin: 0 0 1em 0;
}
.cancelAutoRenewal {
width: 462px;
}
.closeOverlay {
display: none;
}
/* Hide the close icon for when JS is off and there is no overlay */
.overlay .closeOverlay {
color: #222222;
display: inline-block;
font-size: 0.75em;
position: absolute;
right: 20px;
top: 17px;
}
.overlay .closeOverlay .icon {
margin-left: 8px;
vertical-align: -37%;
}
/*.overlay p {
color:#222;
font-size:$fontSize14px;
margin-bottom:15px;
}*/
.overlay .overlayInput,
.overlay .button {
display: inline-block;
/*height:40px;*/
/*padding:0 10px;*/
vertical-align: middle;
}
.overlay .overlayInput {
border-radius: 9px;
height: 38px;
margin: 0 10px 0 0;
min-height: 20px;
width: 258px;
}
.overlay .button:hover{
text-decoration:none !important;
background-color: #e55000;
}
.overlay .button {
width: auto;
min-height:26px!important;
}
/*.overlay .tertiary {
padding-right:26px;
padding-left:26px;
}*/
.overlay * {
*text-align: left;
}
.cancelAutoRenewal .button {
float: left;
}
.cancelAutoRenewal .secondary {
float: right;
}
.cancelAutoRenewal strong {
color: #555555;
}
.modal .indicator {
float: none;
padding-top: 0;
text-align: left;
width: auto;
}
.modal .indicator label {
font-weight: normal;
}
.modal .input {
float: none;
margin-top: 12px;
}
.modal .input input[type="text"],
.modal .button {
float: left;
margin-right: 1em;
}
.termsText {
max-height: 11em;
margin-bottom: 1em;
overflow: auto;
}
.modalInfoMessage {
text-align: center;
}
.modalInfoMessage .button {
float: none;
margin: 0 auto 0.5em;
}
.modalInfoMessage p {
text-align: left;
}
.passVoucherMessage {
font-weight: 400;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.saveEmphasis {
color: #e23d3b;
}
/* My Passes pages */
.pairedWrapper {
border: 1px solid #d8d8d8;
border-radius: 2px;
padding: 10px 0;
background:#fff;
}
.pairedWrapper .pairedDivider {
background: url(../img/bg-dot-ccc.gif) repeat-y 34% 0;
overflow: hidden;
*zoom: 1;
}
.pairedWrapper .ddPrimaryPanel,
.pairedWrapper .ddSecondaryPanel {
border: 0;
clear: none;
float: left;
padding: 0;
}
.pairedWrapper .ddPrimaryPanel {
float: right;
padding: 1rem;
width: 62%;
}
.pairedWrapper .ddSecondaryPanel {
width: 34%;
}
.pairedWrapper .ddSecondaryPanel .hPadding {
padding: 0 0 0 20px;
}
.pairedWrapper .ddSecondaryPanel h3 {
color: #555555;
font-size: 1em;
/* 16px */
margin: 0 0 20px 0;
}
.pairedWrapper .ddSecondaryPanel ul {
margin: 0 0 25px 0;
}
.pairedWrapper .ddSecondaryPanel li {
font-size: 0.875em;
}
.infoPairings {
margin-bottom: 22px;
*zoom: 1;
}
.infoPairings h3 {
color: #555555;
display: inline-block;
font-size: 0.875em;
font-weight: bold;
margin: 0;
width: 102px;
*float: left;
}
.infoPairings p {
display: inline-block;
font-size: 0.875em;
margin: 0;
padding: 0 0 0 5px;
*float: left;
}
.infoPairings a.cta {
display: inline-block;
font-size: 1em;
margin: 0 0 0 1em;
}
.pairedWrapper .ddPrimaryPanel .subPanel2 {
background-color: #faf5e0;
margin: 0 0 0 112px;
}
.pairedWrapper .ddPrimaryPanel .subPanel2 div {
padding-left: 40px;
}
.subPanel2 .mb2 {
margin-bottom: 20px;
}
.pairedWrapper .ddPrimaryPanel .subPanel2 p {
line-height: 1.4;
}
.pairedWrapper .ddPrimaryPanel .subPanel3,
.subPanel3 {
background-color: #e0e7a9 !important;
padding: 11px 11px 1px;
}
.pairedWrapper .ddPrimaryPanel .subPanel3 .tick,
.subPanel3 .tick {
top: -4px;
}
.pairedWrapper .ddPrimaryPanel .subPanel4 {
margin: 0 0 25px 110px;
padding: 13px 20px 10px 20px;
}
.pairedWrapper .ddPrimaryPanel .subPanel4 h3 {
color: #555555;
font-size: 0.875em;
font-weight: bold;
margin-bottom: 5px;
}
.pairedWrapper .ddPrimaryPanel .subPanel4 ul {
color: #222;
font-size: 0.875em;
list-style: none;
padding: 0;
}
.pairedWrapper .ddPrimaryPanel .subPanel4 ul li {
margin-bottom: 5px;
}
.pairedWrapper .ddPrimaryPanel .indented {
margin-left: 127px;
}
.bringAttention {
padding: 0 9px;
}
.bringAttention .attention {
font-size: 1.125em;
font-weight: bold;
}
.bringAttention .button {
display: inline-block;
min-height: 26px;
padding: 0.7rem 1rem!important;
/*margin:0 auto;*/
}
.bringAttention .centre {
text-align: center;
}
.passWarning {
/*@include dpPanel;*/
overflow: hidden;
padding: 10px;
}
.passWarning h2 {
border-bottom: 1px solid #777777;
margin-bottom: 5px;
padding-bottom: 10px;
}
/* Login page */
.loginPanelWrapper {
border-spacing: 10px 0;
border-collapse: separate;
display: table;
margin: 1em 0 0 0;
*zoom: 1;
}
.loginPanel {
overflow: hidden;
padding: 0 0 10px;
}
.loginPanelWrapper .loginPanel {
display: table-cell;
*float: right;
width: 49%;
}
.checkPostCodePanel {
*float: left;
}
.loginPanel .actions {
padding-left: 150px;
}
.loginPanel > h2 {
background: #fff;
margin-bottom: 0.682em;
padding: 13px 19px 5px;
}
.loginPanel h2 .minor {
font-size: 0.6em;
}
.loginPanelWrapper .loginPanel a {
padding: 0 10px;
}
.loginPanel p,
.loginPanel h3,
.loginPanel a {
font-size: 0.75em;
font-weight: normal;
}
.loginPanel p a,
.loginPanel label a {
font-size: 1em;
}
.loginPanel form {
border-bottom: 1px solid #777777;
padding: 0 0 10px;
}
.checkPostCodePanel form {
border: 0;
}
.loginPanel .button {
min-width: 150px;
}
.loginPanel .indicator {
position: relative;
width: 140px;
}
.loginPanel a.callToAction {
padding: 1em 20px 0.5em 20px;
display: block;
}
/* QuickRegistrationForm */
.quickRegistrationForm .loginPanel {
margin-bottom: 1em;
width: 83%;
}
.quickRegistrationForm .tip {
float: right;
width: 45%;
}
.quickRegistrationForm .tip p {
width: auto;
}
.quickRegistrationForm .actions {
float: right;
}
.quickRegistrationForm .nectarCardField strong {
display: block;
}
/* -----------------------------------------------------------------------------*/
/* CUSTOMER PREFERENCES
/* -----------------------------------------------------------------------------*/
.receiveEmailNo ~ .optInContent {
display: none;
}
.receiveEmailNo:checked ~ .optInContent {
display: block;
}
.optInContent {
background-color: #f6f6f6;
box-sizing: border-box;
margin: 10px 0;
padding: 20px 0 20px 20px;
width: 100%;
}
.optInContent p {
width: auto;
}
.optInContent .optInParts {
font-family: 'MaryAnn';
font-size: 0.8125em;
font-weight: bold;
}
.optInContent .optInOptions {
list-style: none;
margin-bottom: 0;
margin-left: -12px;
overflow: hidden;
padding: 0;
}
.optInContent .optInOptions .optInItem {
float: left;
list-style: none;
margin: 0 0 12px 12px;
width: 184px;
}
.optInContent .optInOptions .optInItem input[type="checkbox"] {
display: none;
}
.optInContent .optInOptions .optInItem label {
box-sizing: border-box;
cursor: pointer;
display: block;
width: 184px;
}
.optInContent .optInOptions .optInItem span {
background: url(../img/sprite-opt-in-logos-desktop.png) 0 0 no-repeat transparent;
display: block;
width: 184px;
height: 160px;
text-indent: -9999px;
}
/* GOL / Live well for less */
.optInContent .optInOptions .optInItem .optInOptionGol:checked ~ .optInLabelGol .optInTextGol {
background-position: 0 -160px;
}
/* Argos */
.optInContent .optInOptions .optInItem .optInTextArgos {
background-position: -184px 0;
}
.optInContent .optInOptions .optInItem .optInOptionArgos:checked ~ .optInLabelArgos .optInTextArgos {
background-position: -184px -160px;
}
/* Sainsbury's Bank */
.optInContent .optInOptions .optInItem .optInTextBank {
background-position: -368px 0;
}
.optInContent .optInOptions .optInItem .optInOptionBank:checked ~ .optInLabelBank .optInTextBank {
background-position: -368px -160px;
}
/* Habitat */
.optInContent .optInOptions .optInItem .optInTextHabitat {
background-position: -552px 0;
}
.optInContent .optInOptions .optInItem .optInOptionHabitat:checked ~ .optInLabelHabitat .optInTextHabitat {
background-position: -552px -160px;
}
/* Tu */
.optInContent .optInOptions .optInItem .optInTextTu {
background-position: -736px 0;
}
.optInContent .optInOptions .optInItem .optInOptionTu:checked ~ .optInLabelTu .optInTextTu {
background-position: -736px -160px;
}
/* Argos financial services */
.optInContent .optInOptions .optInItem .optInTextAFS {
background-position: -920px 0;
}
.optInContent .optInOptions .optInItem .optInOptionAFS:checked ~ .optInLabelAFS .optInTextAFS {
background-position: -920px -160px;
}
.nectar.newNectar {
background-image: url(../img/nectar-logo-flat-purple-rgb.svg);
background-size: 100%;
}
/* New Main Nav */
.saverNav {
height: 62px;
transition-duration: .2s;
transition-property: height,line-height;
}
.saverNav .mainNav {
background-color: #fff;
margin: 0 auto;
max-width: 960px;
overflow: hidden;
position: relative;
padding-top:12px;
padding-left:0;
}
.mainNavItem {
float: left;
list-style: none;
font-weight: 700;
}
.mainNavItem .active .mainNavArrowIconUp, .mainNavItem .active .mainNavArrowIconDown
{
opacity: 1;
}
.mainNavItem .mainNavArrowIconUp {
background: url(../img/icon-mainNav-ArrowUp.svg) no-repeat 0 0;
height: 16px;
position: absolute;
width: 16px;
top: 50%;
margin-left: 3px;
opacity: 0.54;
}
.mainNavItem .mainNavArrowIconDown {
background: url(../img/icon-mainNav-ArrowDown.svg) no-repeat 0 0;
height: 16px;
position: absolute;
width: 16px;
top: 50%;
margin-left: 3px;
opacity: 0.54;
}
.mainNavItem .active {
border-bottom: 4px solid #f06c00;
color: #f06c00;
display: inline-block;
margin:0;
}
.mainNavLink {
color: #404040;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
text-decoration: none;
display:inline-block;
padding: 0.5rem 1rem;
min-height: 30px;
}
.mainNavLink:hover, .mainNavLink:active, .mainNavLink:focus {
border-bottom: 4px solid #f06c00;
text-decoration: none !important;
}
.mainNav .passesRight {
float: right;
margin-right: 0;
right: 0;
top: 0;
list-style: none;
*top: -2px;
/* IE7 has a problem with the height of this due to the icon inside, hence why we need to change the top value. */
}
.button {
font-size: 1.125rem!important;
line-height: 1.33333!important;
font-weight: 700!important;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif!important;
box-shadow: 0 0 0 3px transparent;
transition-duration: .2s;
transition-property: box-shadow,background-color,border-color,color;
transition-timing-function: ease-out;
background-color: rgba(0,0,0,0);
background-image: none;
border-radius: 2px;
color: #404040;
min-height: 48px;
min-width: 48px;
padding: 0.5rem 1rem!important;
text-align: center;
text-decoration: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
background-color: #f06c00;
color: #fff;
text-decoration: none;
border:none;
}
.passPage main {
max-width: 960px;
_width: 960px;
background: #f6f6f6;
}
.button:hover {
background-color: #e55000;
text-decoration:none;
}
h1.category-header {
font-size: 2.5rem;
line-height: 1.25;
font-weight: 700;
font-family: MaryAnn,Trebuchet MS,Arial,Helvetica,sans-serif;
margin-top: 5px;
}
.passesButton{
display: inline-block;
min-height: 26px;
padding: 0.7rem 1rem!important;
}
a.cancelRenewal:hover {
background-color: rgba(229,80,0,.06);
border-color: #e55000;
color: #e55000;
}
a.cancelRenewal {
background-color: white;
border: 2px solid #f06c00;
color: #f06c00;
padding: calc(.7rem - 2px) calc(1rem - 2px)!important;
}