@charset "UTF-8";
/*
Anything we didn't write ourselves goes here
Try not to edit any of these files directly, overwrite the styles somewhere else
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* 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;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* 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 Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
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.
*/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type=checkbox],
input[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
*/
input[type=search] {
-webkit-appearance: textfield; /* 1 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
button,
.button, label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
html {
background: #fff;
}
input,
textarea {
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield !important;
}
input,
textarea,
button {
outline: none;
border-radius: 0;
}
textarea {
resize: vertical;
}
label {
cursor: pointer;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
a {
-webkit-touch-callout: none;
}
b {
font-weight: inherit;
}
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
ul,
dd, dl, dt, figure,
blockquote, ol {
margin: 0;
padding: 0;
list-style-type: none;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide from both screenreaders and browsers
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
body {
background: #ffffff;
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-rendering: optimizeLegibility;
margin-bottom: 40px;
}
p {
margin: 10px 0;
line-height: 20px;
}
a {
color: #258aaf;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
abbr,
abbr[title] {
border: none;
outline: none;
text-decoration: none;
}
code {
padding: 2px 4px;
color: #D14;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
padding: 0 3px 2px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
white-space: nowrap;
border-radius: 3px;
}
ul,
ol {
padding: 0;
margin: 0 0 10px 25px;
}
ul.compact {
list-style: none;
margin: 0;
}
img,
object,
embed {
max-width: 100%;
}
img {
height: auto;
}
.well {
background-color: #eee;
border: 1px solid #ddd;
padding: 6px;
margin-bottom: 10px;
}
table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
margin: 20px 0;
}
.table thead th {
vertical-align: bottom;
}
.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #DDD;
}
.table th {
font-weight: bold;
border-top: 0;
}
.table th a {
color: #333;
}
.table_striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
}
.table_bordered {
border: 1px solid #DDD;
border-left: 0;
border-collapse: separate;
border-radius: 4px;
}
.table_bordered td,
.table_bordered th {
border-left: 1px solid #DDD;
}
.table_compacted th,
.table_compacted td {
padding: 2px 8px;
}
.table.interactive tr {
-webkit-transition: background 400ms;
transition: background 400ms;
}
.table.interactive tr:hover {
background: #F1F1F1;
}
@media print {
* {
/* background: transparent !important;
color: black !important;*/
text-shadow: none !important;
-webkit-filter: none !important;
filter: none !important;
-ms-filter: none !important;
}
p a,
p a:visited {
color: #444 !important;
text-decoration: underline;
}
p a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre {
border: 1px solid #999;
page-break-inside: avoid;
}
blockquote {
font-family: "Source Sans Pro", Arial, sans-serif;
border-top: 5px solid #111;
border-bottom: 5px solid #111;
color: #111;
font-size: 22px;
font-weight: 700;
line-height: 25px;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*
.spanX (@index) when (@index > 0) {
(~".span@{index}") { width: ((@index / @numCols) * 100)(~"%"); }
.spanX(@index - 1);
}
.row { width: @rowWidth; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.spanX (@numCols);
*/
.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
*zoom: 1;
display: inline-block;
display: block;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
.row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0;
}
.row [class*=span] {
position: relative;
float: left;
min-height: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row .span1 {
width: 8.33333%;
}
.row .span2 {
width: 16.66667%;
}
.row .span3 {
width: 25%;
}
.row .span4 {
width: 33.33333%;
}
.row .span5 {
width: 41.66667%;
}
.row .span6 {
width: 50%;
}
.row .span7 {
width: 58.33333%;
}
.row .span8 {
width: 66.66667%;
}
.row .span9 {
width: 75%;
}
.row .span10 {
width: 83.33333%;
}
.row .span11 {
width: 91.66667%;
}
.row .span12 {
width: 100%;
}
.row .prefix1 {
margin-left: 8.33333%;
}
.row .prefix2 {
margin-left: 16.66667%;
}
.row .prefix3 {
margin-left: 25%;
}
.row .prefix4 {
margin-left: 33.33333%;
}
.row .prefix5 {
margin-left: 41.66667%;
}
.row .prefix6 {
margin-left: 50%;
}
.row .prefix7 {
margin-left: 58.33333%;
}
.row .prefix8 {
margin-left: 66.66667%;
}
.row .prefix9 {
margin-left: 75%;
}
.row .prefix10 {
margin-left: 83.33333%;
}
.row .prefix11 {
margin-left: 91.66667%;
}
.row .suffix1 {
margin-right: 8.33333%;
}
.row .suffix2 {
margin-right: 16.66667%;
}
.row .suffix3 {
margin-right: 25%;
}
.row .suffix4 {
margin-right: 33.33333%;
}
.row .suffix5 {
margin-right: 41.66667%;
}
.row .suffix6 {
margin-right: 50%;
}
.row .suffix7 {
margin-right: 58.33333%;
}
.row .suffix8 {
margin-right: 66.66667%;
}
.row .suffix9 {
margin-right: 75%;
}
.row .suffix10 {
margin-right: 83.33333%;
}
.row .suffix11 {
margin-right: 91.66667%;
}
.grid.centered {
float: none;
margin: 0 auto;
}
.row,
.clearfix {
display: inline-block;
}
.row,
.clearfix {
display: block;
}
.clear {
clear: both;
}
form {
margin: 0;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: 40px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: block;
margin: 5px 0 2px;
height: auto;
}
fieldset > legend {
border: none;
margin: 8px 0 5px;
padding: 0;
height: 22px;
line-height: 35px;
}
select,
input[type=file] {
height: 29px;
/* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
line-height: 30px;
}
select {
width: 220px;
background-color: #ffffff;
border: 1px solid #cccccc;
}
select[multiple],
select[size] {
height: auto;
}
select:focus,
input[type=file]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.uneditable-input,
.uneditable-textarea {
color: #999999;
cursor: not-allowed;
background-color: #fcfcfc;
border-color: #cccccc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}
.uneditable-input {
overflow: hidden;
white-space: nowrap;
}
.uneditable-textarea {
width: auto;
height: auto;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999;
}
input[placeholder] {
text-overflow: ellipsis;
}
input:-moz-placeholder {
text-overflow: ellipsis;
}
input::-moz-placeholder {
text-overflow: ellipsis;
} /* firefox 19+ */
input[type=number],
input[type=number]:-moz-placeholder,
input[type=number]::-moz-placeholder {
text-overflow: clip;
}
.radio,
.checkbox {
min-height: 18px;
padding-left: 18px;
}
.radio input[type=radio],
.checkbox input[type=checkbox] {
float: left;
margin-left: -18px;
}
.radio_inline,
.checkbox_inline {
display: inline-block;
vertical-align: middle;
}
.radio_inline + .radio_inline,
.checkbox_inline + .checkbox_inline {
margin-left: 10px;
}
.form_inline .radio,
.form_inline .checkbox,
.form_inline label {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form_inline label,
label.inline {
display: inline-block;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
line-height: 29px;
}
.form_inline .radio input[type=radio],
.form_inline .checkbox input[type=checkbox] {
float: left;
margin-right: 3px;
margin-left: 0;
}
input[type=submit].button_block {
width: 100%;
}
input[class*=span],
button[class*=span] {
float: none !important;
}
[class*=span] > select,
[class*=span] > textarea,
[class*=span] > input[type=text],
[class*=span] > input[type=password],
[class*=span] > input[type=datetime],
[class*=span] > input[type=datetime-local],
[class*=span] > input[type=date],
[class*=span] > input[type=month],
[class*=span] > input[type=time],
[class*=span] > input[type=week],
[class*=span] > input[type=number],
[class*=span] > input[type=email],
[class*=span] > input[type=url],
[class*=span] > input[type=search],
[class*=span] > input[type=tel],
[class*=span] > input[type=color] {
width: 100%;
}
.input-append,
.input-prepend {
padding: 0px 6px;
display: inline-block;
background: #F7F7F9;
border: 1px solid #ccc;
line-height: 27px;
}
.input-append {
margin-left: -1px;
border-radius: 0 4px 4px 0;
}
.input-prepend {
border-radius: 4px 0 0 4px;
}
input[type=text].input-prepended {
width: auto;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -1px;
}
input[type=text].input-appended {
width: auto;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.button_group {
*zoom: 1;
display: inline-block;
display: block;
}
.button_group:before,
.button_group:after {
display: table;
content: "";
line-height: 0;
}
.button_group:after {
clear: both;
}
.button_group > .button {
float: left;
margin-left: -1px;
}
.button_group > .button.button_left {
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-o-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
margin-left: 0;
}
.button_group > .button.button_right {
border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
-o-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
}
.button_group > .button.button_middle {
border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-border-radius: 0;
}
.button_group > .button.button_accent {
background-color: #333;
}
.button.dropdown {
display: inline-block;
padding-right: 30px;
position: relative;
}
.button.dropdown::after {
content: "";
display: block;
width: 0;
height: 0;
border: solid 7px;
border-color: #333 transparent transparent transparent;
margin-top: -3px;
right: 10px;
position: absolute;
top: 50%;
}
.button.dropdown.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.button.dropdown.open > ul {
display: block;
}
.button.dropdown > ul {
-moz-box-sizing: content-box;
box-sizing: content-box;
display: none;
position: absolute;
left: -1px;
background: white;
background: rgba(255, 255, 255, 0.95);
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #CCC;
border-top: none;
min-width: 100%;
z-index: 40;
top: 29px;
}
.button.dropdown > ul li a,
.button.dropdown > ul li button {
display: block;
color: #555;
font-size: 13px;
font-weight: normal;
padding: 6px 14px;
text-align: left;
text-decoration: none;
}
.button.dropdown > ul li {
width: 100%;
cursor: pointer;
padding: 0;
min-height: 18px;
line-height: 18px;
margin: 0;
white-space: nowrap;
list-style: none;
}
.button.dropdown > ul li a,
.button.dropdown > ul li button {
display: block;
color: #555;
font-size: 13px;
font-weight: normal;
padding: 6px 14px;
text-align: left;
}
.button.dropdown > ul li button {
width: 100%;
border: inherit;
background: inherit;
font-family: inherit;
margin: inherit;
-webkit-font-smoothing: antialiased;
}
.button.dropdown > ul li:hover,
.button.dropdown > ul li:focus {
background-color: #e3f4f9;
color: #222;
}
.button.dropdown > ul li.divider {
min-height: 0;
padding: 0;
height: 1px;
margin: 4px 0;
background: #ededed;
}
.button.dropdown ul.show_dropdown {
display: block !important;
}
.button.dropdown.float > ul {
margin-top: 11px;
border: 1px solid #ccc;
}
.button.dropdown.float > ul:before {
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: #ccc;
position: absolute;
top: -7px;
left: 9px;
}
.button.dropdown.float > ul:after {
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
top: -6px;
left: 10px;
}
.button_group > .button.dropdown {
margin-top: -1px;
padding-right: 10px;
border-bottom: none;
margin-bottom: 1px;
}
.button_group > .button.dropdown::after {
display: none;
}
.nav_bar {
display: block;
height: 47px !important;
margin: 0 0 30px;
padding: 0;
line-height: 45px;
width: 100% !important;
background: #F8F8F8;
border-bottom: 1px solid #C6C6C6;
border-top: 1px solid #C6C6C6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
}
.nav_bar a {
color: #333;
text-decoration: none;
}
.nav_bar ul {
list-style-type: none;
}
.nav_bar ul li {
float: left;
color: white;
font-size: 13px;
}
.nav_bar ul li h3,
.nav_bar ul li h3 a {
color: #333;
line-height: 18px;
margin-right: 20px;
font-size: 27px;
margin-bottom: 10px;
}
.nav_bar ul > li.divider {
background: #C6C6C6;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);
height: 100%;
margin-right: 1px;
width: 1px;
}
.nav_bar ul > li a {
color: #333;
display: block;
font-size: 13px;
font-weight: bold;
height: 47px;
line-height: 47px;
padding: 0 15px;
}
.nav_bar ul > li.has_dropdown {
position: relative;
}
.nav_bar ul > li.has_dropdown a {
padding-right: 34px;
}
.nav_bar ul > li.has_dropdown a:after {
content: "";
display: block;
width: 0;
height: 0;
border: solid 5px;
border-color: #333 transparent transparent transparent;
margin-right: 15px;
margin-top: -2.5px;
position: absolute;
right: 0;
top: 50%;
}
.nav_bar ul > li.has_dropdown .dropdown {
background: white;
background: rgba(255, 255, 255, 0.95);
border-width: 1px;
border-style: solid;
border-color: #C6C6C6;
left: 0;
margin: 0;
position: absolute;
visibility: hidden;
z-index: 99;
min-width: 100%;
margin-left: -2px;
}
.nav_bar ul > li.has_dropdown:hover > .dropdown,
.nav_bar ul > li.has_dropdown .dropdown.expanded {
display: block;
visibility: visible;
}
.nav_bar ul > li.has_dropdown .dropdown li {
float: none;
}
.nav_bar ul > li.has_dropdown .dropdown li a {
font-size: 13px;
font-weight: normal;
color: #555;
height: 100%;
line-height: 1;
padding: 6px 17px 6px 15px;
white-space: nowrap;
}
.nav_bar ul > li.has_dropdown .dropdown li a:after {
border: none;
}
.nav_bar ul > li.has_dropdown .dropdown li a:hover {
background: #e3f4f9;
}
.nav_bar ul > li.has_dropdown .dropdown li.divider {
border-top: solid 1px #c6c6c6;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
height: 10px;
padding: 0;
margin: 10px 0 0 0;
width: 100%;
background: transparent;
}
.nav_bar ul > li.mobile-toggle {
display: none;
position: absolute;
top: 0;
width: 38px;
right: 10px;
top: 10px;
padding: 6px;
background: #F8F8F8;
border-radius: 6px;
}
.nav_bar ul > li.mobile-toggle.active {
background: #333;
}
.nav_bar ul > li.mobile-toggle.active > .bar {
background: #F8F8F8;
}
.nav_bar ul > li.mobile-toggle > .bar {
width: 100%;
height: 7px;
background: #333;
margin: 4px 0;
border-radius: 4px;
}
ul.side_nav {
display: block;
list-style: none;
margin: 0;
padding: 17px 0;
}
ul.side_nav li {
display: block;
list-style: none;
margin: 0 0 7px 0;
}
ul.side_nav li a {
display: block;
text-decoration: none;
}
ul.side_nav li.active a {
color: #4d4d4d;
font-weight: bold;
}
ul.side_nav li.divider {
border-top: 1px solid #e6e6e6;
height: 0;
padding: 0;
}
@media only screen and (max-width: 767px) {
.nav_bar {
height: auto !important;
line-height: normal;
overflow: hidden;
}
.nav_bar ul {
margin-left: 0;
}
.nav_bar ul li {
float: none;
}
.nav_bar ul.pull_right {
float: none;
}
.nav_bar ul > li.divider {
border-top: solid 1px black;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
height: 1px;
padding: 0;
width: 100%;
background: transparent;
}
.nav_bar ul > li.has_dropdown ul.dropdown {
width: 100%;
}
.nav_bar ul > li.has_dropdown a:after {
border-color: transparent transparent transparent white;
top: 20px;
}
.nav_bar ul > li.has_dropdown a.opened:after {
border-color: white transparent transparent transparent;
top: 20px;
}
.nav_bar ul > li.has_dropdown .dropdown li a {
height: 26px;
line-height: 26px;
}
.nav_bar ul > li.has_dropdown:hover > .dropdown {
display: none;
visibility: hidden;
}
.nav_bar ul > li.has_dropdown > .dropdown.expanded {
left: 0;
position: relative;
display: block;
visibility: visible;
}
.nav_bar ul .menu_link {
display: inline-block;
*display: inline;
zoom: 1;
background-image: url("../images/mobile_nav_tab.png");
width: 54px;
height: 51px;
padding: 0;
}
.nav_bar ul .menu_link:hover {
background-image: url("../images/mobile_nav_tab_selected.png");
}
.nav_bar.nav_collapse > ul > li {
display: none;
}
.nav_bar.nav_collapse > ul > li.handle,
.nav_bar.nav_collapse li.opened {
display: block;
}
.nav_bar ul > li.mobile-toggle {
display: block;
}
}
.show_for_landscape,
.hide_for_portrait {
display: block !important;
}
.hide_for_landscape,
.show_for_portrait {
display: none !important;
}
@media screen and (orientation: landscape) {
.show_for_landscape,
.hide_for_portrait {
display: block !important;
}
.hide_for_landscape,
.show_for_portrait {
display: none !important;
}
}
@media screen and (orientation: portrait) {
.show_for_portrait,
.hide_for_landscape {
display: block !important;
}
.hide_for_portrait,
.show_for_landscape {
display: none !important;
}
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.gmnoprint img {
max-width: none;
}
.tooltip {
position: absolute;
display: none;
}
.tooltip.active {
display: block;
}
.tooltip-inner {
min-width: 50px;
padding: 15px 10px 35px;
background: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 4px;
}
.tooltip-inner > h4 {
font-weight: bold;
}
.tooltip-beak {
position: relative;
height: 20px;
}
.tooltip-beak-arrow {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(0, 0, 0, 0.8);
position: absolute;
left: 50%;
margin-left: -20px;
}
.tooltip.red .tooltip-inner {
background: #c80000;
}
.tooltip.red .tooltip-inner .tooltip-beak-arrow {
border-top: 20px solid #c80000;
}
.popboxoverlay {
position: fixed;
background-color: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1998;
}
.popboxpopup {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid #ccc;
z-index: 1999;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 20px;
}
@media only screen and (max-width: 767px) {
.popboxpopup {
width: 100% !important;
margin-left: 0 !important;
left: 0 !important;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
.colorpicker-saturation {
width: 100px;
height: 100px;
background-image: url(/images/colorpicker-saturation.png);
cursor: crosshair;
float: left;
}
.colorpicker-saturation i {
display: block;
height: 5px;
width: 5px;
border: 1px solid #000;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
margin: -4px 0 0 -4px;
}
.colorpicker-saturation i b {
display: block;
height: 5px;
width: 5px;
border: 1px solid #fff;
border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker-hue i,
.colorpicker-alpha i {
display: block;
height: 1px;
background: #000;
border-top: 1px solid #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: -1px;
}
.colorpicker-hue {
background-image: url(/images/colorpicker-hue.png);
background: -webkit-linear-gradient(top, #ff0000, #ff00ff 16.7%, #0000ff 33.3%, #00ffff 50%, #00ff00 66.7%, #ffff00 83.3%, #ff0000 100%);
background: linear-gradient(top, #ff0000, #ff00ff 16.7%, #0000ff 33.3%, #00ffff 50%, #00ff00 66.7%, #ffff00 83.3%, #ff0000 100%);
}
.colorpicker-alpha {
background-image: url(/images/colorpicker-alpha.png);
display: none;
}
.colorpicker {
*zoom: 1;
display: inline-block;
display: block;
top: 0;
left: 0;
padding: 4px;
min-width: 120px;
margin-top: 1px;
border-radius: 4px;
display: none;
}
.colorpicker:before,
.colorpicker:after {
display: table;
content: "";
line-height: 0;
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.colorpicker:after {
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
top: -6px;
left: 7px;
}
.colorpicker div {
position: relative;
}
.colorpicker.alpha {
min-width: 140px;
}
.colorpicker.alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
background-image: url(/images/colorpicker-alpha.png);
background-position: 0 100%;
}
.colorpicker-color div {
height: 10px;
}
.input-append.color .add-on i,
.input-prepend.color .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
body > div.cookieWarning,
body > div.cookieWarning div,
body > div.cookieWarning span,
body > div.cookieWarning p,
body > div.cookieWarning a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body > div.cookieWarning {
line-height: 1.2em;
width: 100%;
position: fixed;
top: 0;
left: 0;
color: #eee;
border-top: 0px solid #aaa;
border-bottom: 0px solid #aaa;
z-index: 9002;
background-color: #555;
}
body > div.cookieWarning p {
padding: 18px 150px 18px 18px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 13px;
}
body > div.cookieWarning a {
color: #fff;
}
body > div.cookieWarning a.cookieCloseMessage {
position: absolute;
right: 20px;
top: 0;
bottom: 0;
height: 14px;
color: #fff;
text-decoration: none;
font-size: 14px;
background-color: #333;
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px;
line-height: 1em;
}
body > div.cookieWarning a.cookieCloseMessage:hover {
background-color: #222;
}
.nav_tabs {
border-bottom: 1px solid #ddd;
list-style: none;
margin: 10px 0 0;
}
.nav_tabs:before,
.nav_tabs:after {
display: table;
content: "";
}
.nav_tabs:after {
clear: both;
}
.nav_tabs > li {
margin-bottom: -1px;
float: left;
line-height: 18px;
}
.nav_tabs > li > a {
text-align: left;
display: block;
padding: 8px 12px;
margin-right: 2px;
line-height: 18px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav_tabs > li > a:focus {
outline: 0;
}
.nav_tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
background-color: #eee;
}
.nav_tabs > .active > a,
.nav_tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.tab_content {
display: none;
}
.tab_content.active {
display: block;
}
.tab_contained {
border: 1px solid #ddd;
border-top: none;
padding: 10px;
}
.tabs_left > ul {
width: 25%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tabs_left > .nav_tabs > li {
clear: both;
min-width: 74px;
width: 100%;
}
.tabs_left > .nav_tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs_left > .nav_tabs {
float: left;
margin: 0;
border-right: 1px solid #ddd;
border-bottom: none;
}
.tabs_left > .nav_tabs > li > a {
margin-right: -1px;
border-radius: 4px 0 0 4px;
}
.tabs_left > .nav_tabs > li > a:hover {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs_left > .nav_tabs .active > a,
.tabs_left > .nav_tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
.tabs_left .tab_content {
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 75%;
padding: 0 10px;
}
.nav_tabs.pill {
border: none;
}
.nav_tabs.pill > li {
line-height: 16px;
margin: 0 10px;
}
.nav_tabs.pill > li > a {
padding: 4px 12px;
background-color: #eeeeee;
border: 1px solid #ddd;
border-radius: 10px;
}
.nav_tabs.pill > li > a:hover {
border: 1px solid #ddd;
background-color: #ddd;
}
.nav_tabs.pill > .active > a,
.nav_tabs.pill > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
}
.help-block,
.help-inline {
color: #888;
}
.help-block {
display: block;
margin-bottom: 10px;
}
.help-inline {
display: inline-block;
*display: inline;
padding-left: 5px;
vertical-align: middle;
*zoom: 1;
}
.markdown-template {
display: none;
}
.markdown > textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.markdown > .markdown-help {
margin-bottom: -1px;
}
.markdown > .markdown-help > .button {
float: none;
}
.markdown > .markdown-help > .button ~ .button {
margin-left: -6px;
}
.markdown > .markdown-help > .button.button_left {
border-bottom-left-radius: 0;
}
.markdown > .markdown-help > .button.button_right {
border-bottom-right-radius: 0;
}
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: #fff;
}
/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
overflow: hidden;
}
/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
/* border-color: ... !important; */
}
/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
cursor: help;
margin-left: 4px;
}
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
padding: 0;
font-size: 0;
line-height: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999999;
pointer-events: none;
width: auto;
overflow: visible;
}
.tooltipster-base .tooltipster-content {
overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
display: block;
text-align: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
display: block;
width: 0;
height: 0;
position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid;
bottom: -7px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-top: 9px solid;
bottom: -7px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid;
top: -7px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
border-left: 9px solid transparent !important;
border-right: 9px solid transparent !important;
border-bottom: 9px solid;
top: -7px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
left: 0;
right: 0;
margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
left: 5px;
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-left: 8px solid;
top: 50%;
margin-top: -7px;
right: -7px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-left: 9px solid;
margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
border-right: 8px solid;
top: 50%;
margin-top: -7px;
left: -7px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
border-top: 9px solid transparent !important;
border-bottom: 9px solid transparent !important;
border-right: 9px solid;
margin-top: -8px;
}
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
.tooltipster-fade-show {
opacity: 1;
}
.tooltipster-grow {
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.tooltipster-swing {
opacity: 0;
-webkit-transform: rotateZ(4deg);
-moz-transform: rotateZ(4deg);
-o-transform: rotateZ(4deg);
-ms-transform: rotateZ(4deg);
transform: rotateZ(4deg);
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.tooltipster-swing-show {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
-webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
-moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
-ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
-o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}
.tooltipster-fall {
top: 0;
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
-ms-transition-property: top;
transition-property: top;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.tooltipster-fall.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
top: 0px !important;
opacity: 0;
}
.tooltipster-slide {
left: -40px;
-webkit-transition-property: left;
-moz-transition-property: left;
-o-transition-property: left;
-ms-transition-property: left;
transition-property: left;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.tooltipster-slide.tooltipster-dying {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
left: 0px !important;
opacity: 0;
}
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
opacity: 0.5;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
div.fancy-select {
position: relative;
display: inline-block;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 9px;
}
.fancy-select.ws-select-large {
font-size: 15px;
line-height: 18px;
}
.fancy-select.ws-select-large.ws-select-white {
line-height: 20px;
}
div.fancy-select .ws-select-large {
font-size: 15px;
line-height: 22px;
}
div.fancy-select.disabled {
opacity: 0.5;
}
div.fancy-select div.trigger {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
line-height: 34px;
padding: 1px 35px 1px 13px;
background: #e2e2e2;
border: 1px solid #e2e2e2;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: none;
-webkit-transition: none;
}
.ws-select-outer.ws-select-white .trigger {
background: #fff;
border: 1px solid #d1d1d1;
color: #000;
}
div.fancy-select.ws-select-no-ellipsis div.trigger {
text-overflow: clip;
}
div.fancy-select div.trigger.open,
div.fancy-select select:focus + div.trigger {
padding: 0px 34px 0px 12px;
}
div.fancy-select.ws-select-large div.trigger {
line-height: 40px;
min-height: 44px;
}
div.fancy-select div.trigger:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #4B5468;
top: 15px;
right: 16px;
}
div.fancy-select div.trigger.open:after,
div.fancy-select select:focus + div.trigger:after {
top: 14px;
right: 15px;
}
div.fancy-select.ws-select-large div.trigger:after {
top: 19px;
}
div.fancy-select.ws-select-large div.trigger.open:after,
div.fancy-select.ws-select-large select:focus + div.trigger:after {
top: 18px;
right: 15px;
}
div.fancy-select div.trigger.open,
div.fancy-select select:focus + div.trigger {
border: 2px solid #336b75;
}
.book-detail-cnc div.fancy-select div.trigger.open,
.book-detail-cnc div.fancy-select select:focus + div.trigger {
border-color: #9E866B;
}
div.fancy-select ul.options {
list-style: none;
margin: 0;
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
opacity: 0;
min-width: 100%;
max-height: 200px;
transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-webkit-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-moz-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-ms-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-o-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
border: 2px solid #336b75;
background: #fff;
overflow: auto;
z-index: 101;
}
div.fancy-select.ws-select-right ul.options {
left: auto;
right: 0;
}
.book-detail-cnc div.fancy-select ul.options {
border-color: #9E866B;
}
div.fancy-select ul.options.open {
visibility: visible;
margin-top: 10px;
opacity: 1;
/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-webkit-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-moz-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-ms-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-o-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
}
.header-search div.fancy-select ul.options.open {
margin-top: 4px;
}
div.fancy-select ul.options.overflowing {
top: auto;
bottom: 100%;
transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-webkit-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-moz-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-ms-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
-o-transition: opacity 0.05s ease-out, margin 0.05s ease-out, visibility 0.05s ease-out;
}
div.fancy-select ul.options.overflowing.open {
margin-top: 0;
margin-bottom: 10px;
transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-webkit-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-moz-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-ms-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
-o-transition: opacity 0.05s ease-out, margin 0.05s ease-out;
}
.header-search div.fancy-select ul.options.open {
margin-top: 0;
margin-bottom: 4px;
}
div.fancy-select ul.options li {
float: none !important;
display: block;
width: auto !important;
padding: 10px 18px 10px 13px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
color: #000;
}
div.fancy-select ul.options li.hover,
div.fancy-select ul.options li.selected {
background: #b2e4e1;
}
.book-detail-cnc div.fancy-select ul.options li.hover,
.book-detail-cnc div.fancy-select ul.options li.selected {
background: #d9d1c7;
}
div.fancy-select ul.options li span {
display: inline-block;
vertical-align: top;
}
/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
}
.ui-front {
z-index: 100;
}
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
.ui-icon {
display: inline-block;
vertical-align: middle;
margin-top: -0.25em;
position: relative;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
.ui-widget-icon-block {
left: 50%;
margin-left: -8px;
display: block;
}
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: 0.5em 0.5em 0.5em 0.7em;
font-size: 100%;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: 0;
}
.ui-menu .ui-menu {
position: absolute;
}
.ui-menu .ui-menu-item {
margin: 0;
cursor: pointer;
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px 0.4em;
}
.ui-menu .ui-menu-divider {
margin: 5px 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus, .ui-menu .ui-state-active {
margin: -1px;
}
.ui-menu-icons {
position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
padding-left: 2em;
}
.ui-menu .ui-icon {
position: absolute;
top: 0;
bottom: 0;
left: 0.2em;
margin: auto 0;
}
.ui-menu .ui-menu-icon {
left: auto;
right: 0;
}
.ui-button {
padding: 0.4em 1em;
display: inline-block;
position: relative;
line-height: normal;
margin-right: 0.1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: visible;
}
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {
text-decoration: none;
}
.ui-button-icon-only {
width: 2em;
box-sizing: border-box;
text-indent: -9999px;
white-space: nowrap;
}
input.ui-button.ui-button-icon-only {
text-indent: 0;
}
.ui-button-icon-only .ui-icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
.ui-button.ui-icon-notext .ui-icon {
padding: 0;
width: 2.1em;
height: 2.1em;
text-indent: -9999px;
white-space: nowrap;
}
input.ui-button.ui-icon-notext .ui-icon {
width: auto;
height: auto;
text-indent: 0;
white-space: normal;
padding: 0.4em 1em;
}
input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-controlgroup {
vertical-align: middle;
display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
float: left;
margin-left: 0;
margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
display: block;
float: none;
width: 100%;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
padding: 0.4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
border-bottom: none;
}
.ui-controlgroup-vertical .ui-spinner-input {
width: 75%;
width: calc(100% - 2.4em);
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
border-top-style: solid;
}
.ui-checkboxradio-label .ui-icon-background {
box-shadow: inset 1px 1px 1px #ccc;
border-radius: 0.12em;
border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
width: 16px;
height: 16px;
border-radius: 1em;
overflow: visible;
border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
background-image: none;
width: 8px;
height: 8px;
border-width: 4px;
border-style: solid;
}
.ui-checkboxradio-disabled {
pointer-events: none;
}
.ui-datepicker {
width: 17em;
padding: 0.2em 0.2em 0;
display: none;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: 0.2em 0;
}
.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;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.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, .ui-datepicker select.ui-datepicker-year {
width: 45%;
}
.ui-datepicker table {
width: 100%;
font-size: 0.9em;
border-collapse: collapse;
margin: 0 0 0.4em;
}
.ui-datepicker th {
padding: 0.7em 0.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: 0.2em;
text-align: right;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: 0.7em 0 0 0;
padding: 0 0.2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: 0.5em 0.2em 0.4em;
cursor: pointer;
padding: 0.2em 0.6em 0.3em 0.6em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left;
}
.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 0.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, .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%;
font-size: 0;
}
.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, .ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px;
}
.ui-datepicker .ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
left: 0.5em;
top: 0.3em;
}
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: 0.2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: 0.1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 0.3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: 0.5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: 0.5em;
padding: 0.3em 1em 0.5em 0.4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: 0.5em 0.4em 0.5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-n {
height: 2px;
top: 0;
}
.ui-dialog .ui-resizable-e {
width: 2px;
right: 0;
}
.ui-dialog .ui-resizable-s {
height: 2px;
bottom: 0;
}
.ui-dialog .ui-resizable-w {
width: 2px;
left: 0;
}
.ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw {
width: 7px;
height: 7px;
}
.ui-dialog .ui-resizable-se {
right: 0;
bottom: 0;
}
.ui-dialog .ui-resizable-sw {
left: 0;
bottom: 0;
}
.ui-dialog .ui-resizable-ne {
right: 0;
top: 0;
}
.ui-dialog .ui-resizable-nw {
left: 0;
top: 0;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
height: 100%;
-ms-filter: "alpha(opacity=25)";
opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-selectmenu-menu {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
}
.ui-selectmenu-menu .ui-menu {
overflow: auto;
overflow-x: hidden;
padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
padding: 2px 0.4em;
margin: 0.5em 0 0 0;
height: auto;
border: 0;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-text {
display: block;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 14em;
}
.ui-selectmenu-icon.ui-icon {
float: right;
margin-top: 0;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: pointer;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: 0.7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.ui-slider-horizontal {
height: 0.8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.3em;
margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: 0.8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -0.3em;
margin-left: 0;
margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;
}
.ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: 0.222em 0;
margin: 0.2em 0;
vertical-align: middle;
margin-left: 0.4em;
margin-right: 2em;
}
.ui-spinner-button {
width: 1.6em;
height: 50%;
font-size: 0.5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
.ui-spinner a.ui-spinner-button {
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
}
.ui-spinner-up {
top: 0;
}
.ui-spinner-down {
bottom: 0;
}
.ui-tabs {
position: relative;
padding: 0.2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 0.2em 0.2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px 0.2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: 0.5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
}
body .ui-tooltip {
border-width: 2px;
}
/**
* Swiper 11.0.5
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: November 22, 2023
*/
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color:#007aff;
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color:#fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color:#000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.swiper-virtual .swiper-slide {
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
:root {
--swiper-navigation-size:44px;
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
display: none !important;
}
.swiper-button-next svg, .swiper-button-prev svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center;
}
.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
transform: rotate(180deg);
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-lock {
display: none;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
content: "prev";
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
content: "next";
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 0.3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 0.2s transform, 0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s transform, 0.2s right;
}
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: var(--swiper-scrollbar-border-radius, 10px);
position: relative;
touch-action: none;
background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
position: absolute;
left: var(--swiper-scrollbar-sides-offset, 1%);
bottom: var(--swiper-scrollbar-bottom, 4px);
top: var(--swiper-scrollbar-top, auto);
z-index: 50;
height: var(--swiper-scrollbar-size, 4px);
width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
position: absolute;
left: var(--swiper-scrollbar-left, auto);
right: var(--swiper-scrollbar-right, 4px);
top: var(--swiper-scrollbar-sides-offset, 1%);
z-index: 50;
width: var(--swiper-scrollbar-size, 4px);
height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
border-radius: var(--swiper-scrollbar-border-radius, 10px);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
touch-action: none;
}
.swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube {
overflow: visible;
}
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-flip {
overflow: visible;
}
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
.swiper-cards {
overflow: visible;
}
.swiper-cards .swiper-slide {
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=rtl] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("../img/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
font-weight: normal;
font-style: normal;
font-display: swap;
src: url("../fonts/slick.eot");
src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: calc(50% - 20px);
display: block;
width: 17px;
height: 41px;
margin-top: -10px;
padding: 0;
cursor: pointer;
border: none;
outline: none;
background: url(../img/ui/white-carousel-arrows.png) no-repeat 0 0;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
color: #9F9D9D;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.35;
}
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 30px;
/*line-height: 5;*/
opacity: 0.75;
color: #336b75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir=rtl] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: url(../img/ui/chevron_teal_left.png);
font-size: 40px;
}
[dir=rtl] .slick-prev:before {
content: url(../img/ui/chevron_teal_left.png);
font-size: 40px;
}
.slick-next {
right: -25px;
}
[dir=rtl] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: url(../img/ui/chevron_teal_right.png);
font-size: 40px;
}
[dir=rtl] .slick-next:before {
content: url(../img/ui/chevron_teal_right.png);
font-size: 40px;
}
/* Dots */
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: 10px;
display: block;
width: 100%;
padding: 0;
margin-left: 0px;
list-style: none;
text-align: center;
z-index: 99;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: "slick";
font-size: 18px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "•";
text-align: center;
opacity: 0.75;
color: #8e8e8e;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: 0.95;
color: #336b75;
}
/*
Site fonts
*/
/* Over the Rainbow */
@font-face {
font-family: "Over the Rainbow";
src: url("../fonts/overtherainbow-webfont.eot");
src: url("../fonts/overtherainbow-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/overtherainbow-webfont.woff2") format("woff2"), url("../fonts/overtherainbow-webfont.woff") format("woff"), url("../fonts/overtherainbow-webfont.ttf") format("truetype"), url("../fonts/overtherainbow-webfont.svg#over_the_rainbowregular") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Source Sans Pro */
/* Black/Ultra-bold */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-black-webfont.eot");
src: url("../fonts/sourcesanspro-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-black-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-black-webfont.woff") format("woff"), url("../fonts/sourcesanspro-black-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-black-webfont.svg#source_sans_problack") format("svg");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Black/Ultra-bold italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-blackitalic-webfont.eot");
src: url("../fonts/sourcesanspro-blackitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-blackitalic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-blackitalic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-blackitalic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-blackitalic-webfont.svg#source_sans_problack_italic") format("svg");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Bold */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-bold-webfont.eot");
src: url("../fonts/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-bold-webfont.woff") format("woff"), url("../fonts/sourcesanspro-bold-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold") format("svg");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Bold italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-bolditalic-webfont.eot");
src: url("../fonts/sourcesanspro-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-bolditalic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-bolditalic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-bolditalic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-bolditalic-webfont.svg#source_sans_probold_italic") format("svg");
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* Extra light */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-extralight-webfont.eot");
src: url("../fonts/sourcesanspro-extralight-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-extralight-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-extralight-webfont.woff") format("woff"), url("../fonts/sourcesanspro-extralight-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-extralight-webfont.svg#source_sans_proextralight") format("svg");
font-weight: 200;
font-style: normal;
font-display: swap;
}
/* Extra light italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-extralightitalic-webfont.eot");
src: url("../fonts/sourcesanspro-extralightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-extralightitalic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-extralightitalic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-extralightitalic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-extralightitalic-webfont.svg#source_sans_proXLtIt") format("svg");
font-weight: 200;
font-style: italic;
font-display: swap;
}
/* Regular italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-italic-webfont.eot");
src: url("../fonts/sourcesanspro-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-italic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-italic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-italic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-italic-webfont.svg#source_sans_proitalic") format("svg");
font-weight: normal;
font-style: italic;
font-display: swap;
}
/* Light */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-light-webfont.eot");
src: url("../fonts/sourcesanspro-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-light-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-light-webfont.woff") format("woff"), url("../fonts/sourcesanspro-light-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight") format("svg");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Light italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-lightitalic-webfont.eot");
src: url("../fonts/sourcesanspro-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-lightitalic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-lightitalic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-lightitalic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-lightitalic-webfont.svg#source_sans_prolight_italic") format("svg");
font-weight: 300;
font-style: italic;
font-display: swap;
}
/* Regular */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-regular-webfont.eot");
src: url("../fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-regular-webfont.woff") format("woff"), url("../fonts/sourcesanspro-regular-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Semi bold */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-semibold-webfont.eot");
src: url("../fonts/sourcesanspro-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-semibold-webfont.woff") format("woff"), url("../fonts/sourcesanspro-semibold-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold") format("svg");
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Semi bold italic */
@font-face {
font-family: "Source Sans Pro";
src: url("../fonts/sourcesanspro-semibolditalic-webfont.eot");
src: url("../fonts/sourcesanspro-semibolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-semibolditalic-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-semibolditalic-webfont.woff") format("woff"), url("../fonts/sourcesanspro-semibolditalic-webfont.ttf") format("truetype"), url("../fonts/sourcesanspro-semibolditalic-webfont.svg#source_sans_proSBdIt") format("svg");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?-o5tg73");
src: url("../fonts/icomoon.eot?#iefix-o5tg73") format("embedded-opentype"), url("../fonts/icomoon.woff?-o5tg73") format("woff"), url("../fonts/icomoon.ttf?-o5tg73") format("truetype"), url("../fonts/icomoon.svg?-o5tg73#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^=icon-]:before,
[class*=" icon-"]:before,
.icon:before,
.star-rating > div:before,
.comment-vote:before,
.carousel-control:before,
.set-filter-clear:before,
.view-toggle:before,
.pager a:before,
.shop-floor .title .trigger:before,
.accordionItem span:before,
.shop-facilities li:before,
.ws-checkbox-outer:before,
.perk-list li:before,
.tabs-header > a:before,
.shop-item .button:before,
.cookie-bar span:before,
.action-edit:before,
.action-link:before,
.address-block.add-address .inner:before,
.address-block.add-address .add-link span:before,
.close-cookie-bar:before,
.filter-header:after,
.basket-delivery-prompt:before,
.pdp-buy-wrap .free-delivery-info:before {
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
line-height: inherit;
font-variant: normal;
text-transform: none;
text-indent: 0;
color: inherit;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}
.icon-youtube:before {
content: "\e60c";
}
.icon-checkmark:before,
.ws-checkbox-outer:before,
.pdp-buy-wrap .free-delivery-info:before,
.perk-list li.feature-good:before {
content: "\e60f";
}
.icon-cancel:before {
content: "\e610";
}
.icon-star:before,
.star-rating > div:before {
content: "\e618";
}
.icon-pencil:before,
.action-edit:before {
content: "\e611";
}
.icon-share:before {
content: "\e60e";
}
.icon-heart:before {
content: "\e60d";
}
.icon-thumbsup:before,
.vote-up:before {
content: "\e613";
}
.icon-thumbsdown:before,
.vote-down:before {
content: "\e614";
}
.icon-house:before,
.nav-item.home:before {
content: "\e619";
}
.icon-search:before {
content: "\e606";
}
.icon-arrow-left:before,
.pager a:before {
content: "\e602";
}
.icon-arrow-down:before {
content: "\e603";
}
.icon-arrow-up:before {
content: "\e604";
}
.icon-arrow-right:before,
.pager a.next:before {
content: "\e605";
}
.icon-facebook:before {
content: "\e608";
}
.socials .icon-google:before,
.icon-googleplus:before {
content: "\e609";
}
.icon-pinterest:before {
content: "\e60a";
}
.icon-instagram:before {
content: "\e60b";
}
.icon-email:before {
content: "\e622";
}
.icon-list:before,
.view-toggle:before {
content: "\e617";
}
.icon-grid:before,
.view-toggle.view-toggle-grid:before {
content: "\e616";
}
.icon-angle-left:before,
.carousel-control.prev:before {
content: "\f104";
}
.icon-angle-right:before,
.carousel-control:before {
content: "\f105";
}
.icon-angle-up:before {
content: "\f106";
}
.icon-angle-down:before {
content: "\f107";
}
.icon-cross:before,
.set-filter-clear:before {
content: "\e117";
}
.icon-minus:before,
.shop-floor.open .title .trigger:before,
.accordionItem.open span:before,
.tabs-header > a.active:before,
.filter-container.open .filter-header:after {
content: "\e601";
}
.icon-plus:before,
.shop-floor .title .trigger:before,
.accordionItem span:before,
.tabs-header > a:before,
.address-block.add-address .add-link span:before,
.filter-header:after {
content: "\e615";
}
.icon-signal:before,
.shop-facilities li.facility-wifi:before {
content: "\e61a";
}
.icon-cafe:before,
.shop-facilities li.facility-cafe:before {
content: "\e612";
}
.icon-disabledaccess:before,
.shop-facilities li.facility-disabled:before {
content: "\e623";
}
.icon-facilities:before,
.shop-facilities li.facility-toilets:before {
content: "\e61b";
}
.icon-warning:before,
.perk-list li.feature-warning:before {
content: "\e61c";
}
.icon-bookmark:before {
content: "\e61d";
}
.icon-arrow-thin-left:before {
content: "\e61e";
}
.icon-arrow-thin-down:before {
content: "\e61f";
}
.icon-arrow-thin-up:before {
content: "\e620";
}
.icon-arrow-thin-right:before,
.shop-item .button:before {
content: "\e621";
}
.icon-delivery:before,
.basket-delivery-prompt:before {
content: "\e600";
}
.icon-cookie:before {
content: "\e624";
}
.icon-link:before,
.action-link:before {
content: "\e625";
}
.icon-location:before,
.address-block.add-address .inner:before {
content: "\e626";
}
@font-face {
font-family: "ws-icons";
src: url("../fonts/ws-icons.eot");
src: url("../fonts/ws-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/ws-icons.woff") format("woff"), url("../fonts/ws-icons.ttf") format("truetype"), url("../fonts/ws-icons.svg#ws-icons") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
[data-icon]:before {
font-family: "ws-icons" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^=ws-icon-]:before,
[class*=" ws-icon-"]:before {
font-family: "ws-icons" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ws-icon-user:before {
content: "a";
}
.ws-icon-truck:before {
content: "b";
}
.ws-icon-credit-card:before {
content: "c";
}
.ws-icon-list-ul:before {
content: "d";
}
.ws-icon-credit-card-1:before {
content: "e";
}
.ws-icon-banknote:before {
content: "f";
}
.ws-icon-address-book:before {
content: "g";
}
.ws-icon-book:before {
content: "h";
}
.ws-icon-volume-down:before {
content: "i";
}
/* PLUS */
@font-face {
font-family: "wsplusregular";
src: url("../fonts/wsplus-regular-webfont.woff2") format("woff2"), url("../fonts/wsplus-regular-webfont.woff") format("woff"), url("../fonts/wsplus-regular-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Born Ready */
@font-face {
font-family: "Born Ready";
src: url("../fonts/bornreadyttf-webfont.woff2") format("woff2"), url("../fonts/bornreadyttf-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Oswald */
/* Extra Light */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-ExtraLight.ttf");
src: url("../fonts/Oswald/Oswald-ExtraLight.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Light */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-Light.ttf");
src: url("../fonts/Oswald/Oswald-Light.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Regular */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-Regular.ttf");
src: url("../fonts/Oswald/Oswald-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Medium */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-Medium.ttf");
src: url("../fonts/Oswald/Oswald-Medium.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Semi bold */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-SemiBold.ttf");
src: url("../fonts/Oswald/Oswald-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Bold */
@font-face {
font-family: "Oswald";
src: url("../fonts/Oswald/Oswald-Bold.ttf");
src: url("../fonts/Oswald/Oswald-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url("../fonts/roboto/roboto-regular/Roboto-Regular-webfont.eot");
src: url("../fonts/roboto/roboto-regular/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-regular/Roboto-Regular-webfont.woff") format("woff"), url("../fonts/roboto/roboto-regular/Roboto-Regular-webfont.ttf") format("truetype"), url("../fonts/roboto/roboto-regular/Roboto-Regular-webfont.svg#robotoregular") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "RobotoBold";
src: url("../fonts/roboto/roboto-bold/Roboto-Bold-webfont.eot");
src: url("../fonts/roboto/roboto-bold/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-bold/Roboto-Bold-webfont.woff") format("woff"), url("../fonts/roboto/roboto-bold/Roboto-Bold-webfont.ttf") format("truetype"), url("../fonts/roboto/roboto-bold/Roboto-Bold-webfont.svg#robotobold") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "RobotoItalic";
src: url("../fonts/roboto/roboto-italic/Roboto-Italic-webfont.eot");
src: url("../fonts/roboto/roboto-italic/Roboto-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-italic/Roboto-Italic-webfont.woff") format("woff"), url("../fonts/roboto/roboto-italic/Roboto-Italic-webfont.ttf") format("truetype"), url("../fonts/roboto/roboto-italic/Roboto-Italic-webfont.svg#robotoitalic") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "RobotoMedium";
src: url("../fonts/roboto/roboto-medium/Roboto-Medium-webfont.eot");
src: url("../fonts/roboto/roboto-medium/Roboto-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-medium/Roboto-Medium-webfont.woff") format("woff"), url("../fonts/roboto/roboto-medium/Roboto-Medium-webfont.ttf") format("truetype"), url("../fonts/roboto/roboto-medium/Roboto-Medium-webfont.svg#robotomedium") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.row.basket {
margin-top: 21px;
}
.checkout-main [class*=span] {
min-height: 0;
}
.checkout-login-label {
float: left;
clear: both;
}
.label-container {
height: 43px;
white-space: nowrap;
}
.label-container.label-container--regular {
height: 34px;
}
.label-container:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 1px;
margin-right: -3px;
overflow: hidden;
}
.label-container label,
.label-container .label-content {
display: inline-block;
vertical-align: middle;
margin: 0;
line-height: 1;
white-space: normal;
}
.label-container label {
padding-right: 10px;
}
.loyalty-cardbox-amount .label-container label {
padding-right: 6px;
}
.loyalty-cardbox-amount > .input-wrapper {
min-width: 159px;
}
.label-container label .break {
margin-left: -4px;
}
.label-container br {
display: none;
}
.clickyBox {
cursor: pointer;
}
.promo {
height: 320px;
padding: 5px 20px;
border-radius: 3px;
background-color: #ddd;
}
.nav_bar {
height: auto !important;
margin-bottom: 10px;
}
.nav_bar ul {
margin: 0;
}
.nav_bar ul > li a {
height: auto;
}
.productRow {
padding: 0 0 0 0;
}
.product {
margin-top: 20px;
}
.productInner {
height: 110px;
padding: 5px 20px;
border-radius: 3px;
background-color: #eee;
}
.product .title {
margin-bottom: 2px;
}
.product .subtitle {
margin-top: 0;
font-size: 12px;
font-style: italic;
}
.productDetail {
padding-right: 20px;
}
p.subtitle {
font-style: italic;
}
.detailImage {
height: 400px;
padding: 5px 20px;
border-radius: 3px;
background-color: #eee;
}
.action {
margin-top: 20px;
}
.action .basketAdded {
display: inline-block;
margin-left: 20px;
padding: 3px 10px;
zoom: 1;
*display: inline;
}
table.table tfoot {
font-weight: bold;
}
.countryForm {
margin: 0;
}
h2.shippingOption {
padding: 10px;
background-color: #eee;
font-size: 14px;
font-weight: bold;
line-height: 14px;
cursor: pointer;
}
.shipping-method {
margin-bottom: 10px;
}
.shipping-method .shipping-method-heading,
.basket-delivery-complete-name {
margin: 0;
font-size: 17px;
color: #333;
}
.shipping-method .shipping-method-amount,
.basket-delivery-complete-price {
display: block;
margin-top: 22px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.shipping-method .shipping-method-amount {
margin-top: 23px;
}
.shipping-method .shipping-method-amount-was {
text-decoration: line-through;
color: #9b9b9b;
margin-bottom: -18px;
display: block;
text-align: center;
}
.basket-delivery-complete-price {
text-align: left;
}
.shipping-method.disabled {
cursor: default;
}
.left {
padding-right: 10px;
}
.right {
padding-left: 10px;
}
.selectBox-dropdown {
margin: 0;
}
p.error {
padding: 6px 0;
}
p.error > a:hover {
color: inherit;
text-decoration: underline;
}
label.error {
margin-top: 8px;
padding: 4px 7px;
padding: 0;
background-color: transparent;
font-size: 15px;
font-style: italic;
color: #df3f3f;
}
label.error.error-select {
margin-top: -8px;
margin-bottom: 10px;
}
.input-large + label.error {
margin-top: -8px;
margin-bottom: 10px;
}
.confirm-cv2 .input-large + label.error {
margin-top: 0;
}
.gift-cards-table tr.error td {
padding: 0 26px 0 0;
}
.gift-cards-table tr.error td label {
margin-top: 0;
}
.loyalty-cards-form div.error label.error {
margin-top: 0;
}
.input-large.error,
.input-large.error:focus,
.input.error,
.input.error:focus {
border: 2px solid #df3f3f;
}
.ws-select-outer.ws-select-white select.error + .trigger {
border: 2px solid #df3f3f;
}
span.price {
font-weight: bold;
}
span.invalidPrice {
color: #ae0000;
}
span {
vertical-align: baseline;
}
.panel-heading ul {
float: right;
list-style: none;
}
.panel {
margin-bottom: 10px;
padding-bottom: 10px;
border-top-width: 0;
}
.panel.hidden,
.panel-heading.hidden {
display: none;
}
.panel.disabled,
.panel-heading.disabled {
display: none;
}
.panel.open,
.panel-heading.open {
display: block;
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
}
.panel.open .panel-options {
display: block;
}
.panel.open .panel-complete {
display: none;
}
.panel.complete,
.panel-heading.complete {
display: block;
}
.touch .panel.complete,
.touch .panel-heading.complete {
display: none;
}
.touch .panel.complete.reserve-details + * {
margin-top: 0;
}
/*.touch .panel.complete.reserve-details + .preferred-method .inline-radios {
padding-top: 0;
}*/
.panel.complete .panel-options {
display: none;
}
.panel.complete .panel-complete {
display: block;
}
.panel-heading h2 a {
text-decoration: none;
}
.panel-heading.basket-checkout-heading,
.panel.basket-checkout-panel {
display: none;
}
.panel-heading.basket-checkout-heading.open,
.panel.basket-checkout-panel.open {
display: block;
}
.panel .panel-disabled-overlay {
display: none;
}
.panel.disabled .panel-complete {
display: none;
}
.panel.disabled .panel-disabled-overlay {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
z-index: 10;
}
.panel-complete {
color: #5c5c5c;
}
.checkout-panel-actions .actions-disabled-overlay {
position: relative;
display: none;
}
.checkout-panel-actions.disabled {
opacity: 0.3;
-moz-opacity: 0.3;
-webkit-opacity: 0.3;
}
.checkout-panel-actions.disabled .actions-disabled-overlay {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
z-index: 10;
}
.sub-panel {
display: none;
}
.sub-panel.open {
display: block;
}
.basket-top-heading {
margin-top: 20px;
}
.basket-top-heading h1 {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}
.basket-top-heading .basket-current-total {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}
.basket-header-right {
text-align: right;
}
.basket-action-buttons-right {
text-align: right;
}
.basket-header-right .basket-current-total {
margin-top: 12px;
margin-bottom: 18px;
}
.basket-total-lower {
text-align: right;
}
/* *** BASKET PRODUCTS **** */
.basket-products {
border-top: 1px solid #d1d1d1;
margin: 2px 0 20px;
}
.basket-product {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
padding: 25px 0;
border-bottom: 1px solid #ccc;
}
/* Product Image */
.basket-product-image {
float: left;
margin-right: 30px;
}
.basket-product-image a {
display: block;
width: 130px;
/*height: 130px;*/
}
/* *** Product QPS *** */
.basket-product-qps {
margin-top: 20px;
}
.basket-product-qps-content {
position: absolute;
right: 0;
top: 25px;
margin-bottom: 10px;
}
.basket-product > .basket-product-qps-content {
position: static;
right: auto;
top: auto;
float: right;
margin-left: 30px;
visibility: hidden;
}
.basket-product-qps-content > div {
position: relative;
float: left;
min-width: 80px;
margin-left: 60px;
}
.basket-product-qps-content > div:first-child {
margin-left: 0;
min-width: 0;
}
.basket-product-qps-content > div.basket-product-price {
text-align: right;
}
.basket-product-qps-content > div:before {
display: none;
content: "";
position: absolute;
left: 0;
right: 0;
top: -50px;
font-size: 14px;
line-height: 16px;
font-weight: 600;
}
.basket-product-qps-content > div.basket-product-actions:before {
content: "Quantity";
}
.basket-product-qps-content > div.basket-product-price:before {
content: "Price";
}
.basket-product-qps-content > div.basket-product-subtotal:before {
content: "Subtotal";
}
.basket-product:first-child .basket-product-qps-content > div:before {
display: block;
}
.basket-product-qps-content b {
display: none;
font-size: 14px;
font-weight: 600;
line-height: 16px;
text-transform: none;
}
/* Actions - Update Quantity */
.basket-product-update-quantity {
margin-top: 0;
text-align: center;
text-transform: uppercase;
}
.basket-products-table .basket-product-update-quantity {
width: 50px;
}
.basket-product-update-quantity .input {
width: 100%;
text-align: center;
}
.basket-button-product-update-quantity {
margin-left: 10px;
vertical-align: middle;
}
.js .basket-button-product-update-quantity {
display: none;
}
.basket-product-button-remove {
display: inline-block;
margin-top: 0;
padding: 0;
border: none;
background: none;
font-size: 14px;
text-decoration: underline;
}
/* Price */
.basket-product-price {
font-size: 22px;
font-weight: 300;
color: #5c5c5c;
}
/* **** Basket Product Details **** */
.basket-product-details {
overflow: hidden;
}
.basket-product-title {
height: 29px;
margin: 0;
font-family: Baskerville, serif;
font-size: 20px;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
}
.basket-products-table .basket-product-title {
height: auto;
}
.basket-product-author {
margin: 0;
font-size: 17px;
font-weight: bold;
line-height: 19px;
color: #9e866b;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.basket-products-table .basket-product-author {
white-space: normal;
}
.basket-product-author a {
color: #9e866b;
}
.basket-product-details .product-format {
margin-top: 9px;
margin-bottom: 0;
font-size: 14px;
line-height: 16px;
font-style: italic;
color: #5c5c5c;
}
.basket-product-details > p.error {
margin-top: 0;
}
a.basket-product-button-wishlist {
width: 92px;
margin-top: 40px;
}
.basket-product-price-was span,
.side-basket-product-price-was {
color: #bbb;
text-decoration: line-through;
}
.basket-product-price-was {
display: block;
margin-top: -2px;
font-size: 14px;
color: #bbb;
}
.basket-checkout-delivery-panel {
padding-top: 10px;
}
.basket-checkout-panel .login-register {
padding: 90px 0 0 0;
text-align: center;
}
.help-block {
display: block;
margin-top: -4px;
margin-bottom: 5px;
font-size: 94%;
}
.address input[type=radio] {
margin-left: -16px;
}
.address {
display: none;
}
.confirm-product-container {
margin: 10px 0;
padding: 20px 0 0 0;
border-top: 1px solid #e1e1e1;
}
.confirm-product {
margin-bottom: 20px;
}
.confirm-product-thumbnail {
display: inline-block;
float: left;
width: 72px;
height: 72px;
margin-right: 10px;
background-color: #e7e7e7;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.confirm-product-title {
margin-top: 0;
margin-bottom: 0;
padding: 0;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 17px;
}
.confirm-product-author {
margin: 0 0 4px 0;
}
.confirm-print {
margin-top: 10px;
padding-top: 24px;
border-top: 1px solid #e1e1e1;
}
.confirm-card-image {
margin-right: 40px;
}
.confirm-card-number {
margin-right: 40px;
}
.confirm-card {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e1e1e1;
}
.confirm-card-address {
margin-top: -7px;
font-size: 14px;
line-height: 17px;
color: #9b9b9b;
}
.confirm-points-accrued {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid #e1e1e1;
}
.confirm-product-shipping p:first-child {
margin-top: 0;
}
.confirm-card-expiry {
white-space: nowrap;
}
/* *** Side Basket *** */
.side-basket {
display: inline-block;
width: 100%;
vertical-align: top;
margin-bottom: 40px;
}
.side-basket.main-basket,
.side-basket.main-checkout-basket {
display: none;
margin-bottom: 30px;
overflow: hidden;
}
.side-basket.main-basket.side-basket-no-total,
.side-basket.main-checkout-basket.side-basket-no-total {
margin-bottom: 10px;
}
.side-basket h3 {
margin-top: 0;
}
.side-basket .side-basket-product-title {
margin-bottom: 0;
}
.side-basket .side-basket-product-author {
margin: 0 0 2px;
font-size: 14px;
font-weight: bold;
}
.side-basket .side-basket-product {
margin-top: 10px;
padding-bottom: 7px;
border-bottom: 1px solid #E1E1E1;
}
.side-basket.side-basket-no-total .side-basket-product {
border-bottom: none;
}
.side-basket p.side-basket-product-price {
margin: 0;
margin-top: 15px;
font-size: 24px;
font-weight: 500;
color: #5c5c5c;
text-align: center;
}
.side-basket .side-basket-product-price > span {
display: inline-block;
margin-right: 10px;
font-size: 17px;
line-height: 1;
white-space: nowrap;
vertical-align: top;
}
.side-basket p.side-basket-product-price.price-small {
margin-top: 0;
font-size: 0;
line-height: 1;
text-align: left;
}
.side-basket p.side-basket-product-price.price-small .side-basket-product-price-was {
color: #9b9b9b;
}
.side-basket p.side-basket-product-price.price-small .side-basket-product-price-was-figure {
text-decoration: line-through;
}
.side-basket .side-basket-product-button-remove {
padding: 0;
font-size: 14px;
line-height: 20px;
color: #999;
text-decoration: underline;
}
.side-basket .side-basket-product-button-remove:hover {
color: #444;
}
.side-basket .side-basket-product-remove-form {
display: block;
text-align: center;
}
.side-basket .side-basket-product-total {
float: right;
font-size: 22px;
font-weight: bold;
color: #5c5c5c;
}
.side-basket .side-basket-product-title {
margin-top: -3px;
margin-bottom: 5px;
padding-top: 0;
font-size: 15px;
line-height: 17px;
font-weight: 700;
color: rgb(82, 82, 82);
}
.side-basket .side-basket-product-actions {
float: right;
width: 50px;
margin-left: 10px;
text-align: center;
}
.side-basket .side-basket-product-description {
overflow: hidden;
}
.side-basket .side-basket-product-update-quantity-form {
margin-bottom: 6px;
}
.side-basket .side-basket-breakdown-amount {
float: right;
}
.side-basket .side-basket-total {
padding: 7px 0;
border-bottom: 1px solid #e1e1e1;
font-size: 16px;
color: #5c5c5c;
}
.side-basket .side-basket-total:last-child {
border-bottom: none;
}
.side-basket.main-checkout-basket .side-basket-total {
border-bottom: none;
}
.side-basket .side-basket-total .side-basket-breakdown-heading {
color: #5c5c5c;
}
.side-basket .side-basket-total .side-basket-breakdown-total {
color: #5c5c5c;
}
.side-basket .side-basket-total:first-child {
border-top: 1px solid #e1e1e1;
}
.side-basket .side-basket-total:last-child {
margin-top: -1px;
border-top: 3px solid #e1e1e1;
}
.side-basket .side-basket-total:last-child .side-basket-breakdown-heading {
font-size: 20px;
line-height: 32px;
}
.side-basket .side-basket-total:last-child .side-basket-breakdown-amount {
font-size: 20px;
line-height: 32px;
}
.side-basket.fixed .basket-heading,
.side-basket.fixed .side-basket-product {
opacity: 1;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.side-basket.fixed .basket-heading,
.side-basket.fixed .side-basket-product {
opacity: 0;
}
.shop-locator {
margin-top: 25px;
overflow: auto;
}
.shop-locator-item {
border-top: 1px solid #C8C8C8;
padding: 0;
font-size: 18px;
line-height: 28px;
}
.shop-locator-item:first-child {
border: none;
padding-top: 0;
}
.shop-locator-item .shop-item {
padding: 15px 0;
}
.shop-item.reserve-item .inner {
padding-top: 0;
border-top: none;
}
.shop-locator-item img {
display: block;
}
.shop-locator-item p {
margin: 2px 0;
}
.shop-locator-item label.disabled {
font-style: italic;
color: #999;
}
.delivery-collection-actions {
text-align: right;
}
.delivery-collection-locator-collect-heading {
font-weight: bold;
}
.delivery-collection-locator-find-heading {
margin: 20px 0;
font-weight: bold;
}
.breakdown-changed .side-basket-breakdown-amount {
color: #f00;
}
.js .delivery-collection-locator-find-heading button {
display: none;
}
.js .delivery-collection-locator-find-heading input {
width: 100%;
}
.shop-map-container {
margin-top: 40px;
}
.basket-current-total {
margin-left: 10px;
font-size: 16px;
}
.basket-current-total .total {
margin-left: 10px;
font-weight: bold;
text-transform: uppercase;
}
.basket-current-total .current-total {
margin-left: 20px;
font-size: 26px;
}
.basket-current-total .current-count {
display: inline-block;
font-weight: normal;
color: #6b6b6b;
}
.basket-header-left h1 {
margin: 0;
}
.basket-ws-points {
font-size: 18px;
}
.basket-ws-points .ws-points-count {
margin-right: 5px;
}
.basket-coupon {
display: inline-block;
padding: 4px 4px 4px 14px;
border: 1px solid #336b75;
}
.basket-coupon b {
font-size: 20px;
line-height: 44px;
vertical-align: top;
}
.basket-coupon .sprite-icon {
margin: 0 12px 0 4px;
margin-top: -2px;
vertical-align: middle;
}
.basket-coupon .input {
width: 212px;
}
.basket-coupon-container {
margin-bottom: 16px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.basket-points-gained {
margin-top: 4px;
font-size: 18px;
line-height: 1;
text-transform: none;
overflow: hidden;
}
.basket-top-row a.button-basket-continue-shopping,
.basket-top-row a.button-basket-continue-shopping:hover {
margin-top: 30px 0 20px 0;
color: #a0a09f;
text-decoration: none;
}
.basket-top-row .button-basket-continue-arrow,
.basket-top-row a:hover .button-basket-continue-arrow {
margin-right: 3px;
vertical-align: 1px;
text-decoration: none;
}
.basket-top-row .button-basket-continue-shopping a:hover .button-basket-continue-text {
text-decoration: underline;
}
.basket-outro-row {
margin-top: 29px;
padding-top: 18px;
border-top: 1px solid #f1f1f1;
margin-top: 20px;
}
.basket-outro-row .button {
margin-right: 6px;
}
.basket-checkout-panel .checkout-login .inner {
padding: 30px;
background: #363636;
}
.sub-panel h3 {
margin-top: 0;
font-family: "FoundersGrotesk", sans-serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
letter-spacing: -1px;
text-transform: uppercase;
}
.basket-checkout-panel .checkout-guest {
padding: 30px;
border: 1px solid #b6b6b6;
}
.basket-checkout-panel .checkout-login h3 {
margin-bottom: 18px;
color: #d9d9d9;
}
.panel .input,
.panel .ws-select-outer {
margin-bottom: 10px;
}
.basket-checkout-panel .checkout-guest p {
font-size: 14px;
line-height: normal;
}
.create-account {
display: inline-block;
margin-top: 20px;
font-size: 15px;
font-weight: bold;
font-style: italic;
color: #363636;
text-transform: uppercase;
}
.basket-checkout-panel .checkout-guest p.p-confirm {
margin: 0 0 20px;
}
.basket-checkout-panel .remember {
margin: 5px 0 0;
}
.basket-checkout-register .inner {
padding: 30px;
background: #363636;
}
.basket-checkout-register h3 {
color: #d9d9d9;
}
.basket-checkout-register label {
font-size: 14px;
color: #999;
}
.password-note {
/* position: absolute; */
font-size: 14px;
font-style: italic;
line-height: 15px;
color: #999;
margin: 0;
}
.register-finish {
padding-top: 26px;
}
.basket-checkout-panel .remember .ws-checkbox-outer {
margin: 0 0 0 10px;
}
.basket-checkout-panel .remember label {
margin-top: 0;
}
.sub-panel .ws-select-outer,
.sub-panel .ws-select-outer.ws-select-large {
width: 100%;
max-width: none;
}
.addressContainer .address {
display: none;
}
.delivery-toggle {
line-height: 29px;
cursor: pointer;
}
.delivery-toggle .ws-radio-outer {
vertical-align: top;
}
.basket-checkout-delivery-panel,
.basket-checkout-payment-panel {
padding: 0 0 10px 0 !important;
}
.shipping-label {
margin-top: 4px;
}
.deliveryOptions {
padding: 0 0 0;
}
.shop-locator-item .ws-radio-outer {
vertical-align: top;
}
.shop-locator-item label {
cursor: pointer;
}
.delivery-collection-locations {
clear: both;
padding: 0 0 20px;
/*min-height:260px;*/
}
/* Checkout Progress */
ol.progress {
position: relative;
display: block;
margin: 0 0 5px 0;
padding: 15px 0 0 0;
text-align: justify;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
z-index: 1;
}
/* Top bar */
ol.progress:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: #e2e2e2;
overflow: hidden;
}
/* Make text-align justify work with single line */
ol.progress:after {
content: "";
display: inline-block;
width: 100%;
height: 1px;
margin-bottom: -1px;
overflow: hidden;
visibility: hidden;
}
ol.progress > li {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
font-size: 13px;
font-weight: 700;
line-height: 15px;
color: #999;
vertical-align: top;
}
ol.progress > li.active {
color: #000;
}
ol.progress > li:after {
content: "";
position: absolute;
right: -1px;
top: -15px;
display: none;
width: 2000px;
height: 4px;
background: #336b75;
overflow: hidden;
}
ol.progress > li.active:after {
display: block;
}
.basket-checkout-payment-panel h3 {
margin: 0 0 12px;
font-size: 25px;
font-style: italic;
color: #999;
}
.basket-checkout-payment-panel .required-note {
font-size: 15px;
}
.basket-checkout-payment-panel h4 {
margin: 0 0 6px;
font-size: 15px;
font-weight: normal;
color: #5c5c5c;
text-transform: none;
}
.billing-address label {
margin-bottom: 12px;
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #999;
text-transform: uppercase;
}
.billing-address {
margin-top: 34px;
}
.basket-payment-actions {
margin-top: 20px;
margin-bottom: 20px;
}
.checkout-top .inner {
border-bottom: 3px solid #000;
}
.checkout-top {
margin-bottom: 20px !important;
padding-right: 10px;
padding-left: 10px;
}
.side-basket h3 {
margin-bottom: 15px;
font-size: 25px;
font-style: italic;
line-height: normal;
color: #999;
}
.side-basket-product .basket-product-update-quantity {
margin: 6px 0 0;
}
.side-basket-remove {
border: none;
background: none;
}
.side-basket-breakdown-subtotal {
margin-top: -10px;
padding-bottom: 10px;
font-size: 14px;
color: #5c5c5c;
}
.side-basket-breakdown-subtotal .side-basket-breakdown-amount {
font-size: 22px;
}
.side-basket-breakdown-modifier {
margin-bottom: 4px;
padding: 12px 0;
padding-top: 9px;
border-top: 1px solid #c8c8c8;
font-size: 20px;
color: #5c5c5c;
}
.side-basket-breakdown-modifier .side-basket-breakdown-amount {
font-size: 22px;
}
.side-basket-breakdown-modifier .side-basket-breakdown-heading {
font-size: 20px;
}
.side-basket-breakdown-gift-cards {
border-top: 0;
}
.side-basket-breakdown-total {
margin-top: -6px;
padding: 9px 0;
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #c8c8c8;
border-bottom: 0 solid #000;
color: #5c5c5c;
}
.side-basket .side-basket-breakdown-total .side-basket-breakdown-amount {
font-size: 22px;
}
.side-basket-actions {
padding: 10px 0;
}
.side-basket-actions .button ~ .button {
margin-top: 10px;
}
.discount-code-tabs {
margin: 40px 0 10px;
}
.discount-code-tabs h3 {
margin-bottom: 16px;
font-size: 20px;
}
.input-wrap {
display: inline-block;
}
.promo-code-container {
padding: 8px;
border: 4px solid #336b75;
}
.promo-code-container .input {
min-width: 330px;
}
.discount-code-tabs .tabs-content-container .tab-content {
padding: 16px 20px;
}
.discount-code-tabs .code-warning {
display: block;
margin-top: 15px;
font-size: 14px;
color: #5c5c5c;
}
.accepted-cards-container {
float: right;
width: 172px;
height: 20px;
margin: 0 0 0 11px;
font-size: 13px;
color: #444;
vertical-align: -11px;
}
.accepted-cards-container .accepted-cards {
display: block;
height: 20px;
background: url(../img/ui/accepted-cards.png) no-repeat center;
}
.basket-product-actions .basket-button-product-update-quantity {
margin: 10px 0 0;
}
.table-header {
font-size: 18px;
color: #5c5c5c;
}
/*.basket-product-details .feature-list {
margin-left: 0;
list-style: none;
font-size: 17px;
line-height: 23px;
color: #6b6b6b;
}
.basket-product-details .feature-list li {
display: inline-block;
margin-right: 20px;
}
.basket-product-details .feature-list .sprite-icon {
margin-right: 4px;
}*/
/*li.feature-good .icon-tick,
.feature-good .icon-tick {
background: url("../img/ui/tick_teal.png");
background-repeat: no-repeat;
background-position: bottom left;
}
.icon-cross {
background-image: url("../img/ui/cross_red.png") !important;
background-repeat: no-repeat;
background-position: bottom left !important;
}
.icon-cross {
width: 12px;
height: 14px;
}*/
.basket-subtotal {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e3e3e3;
font-weight: 300;
line-height: 26px;
color: #5c5c5c;
overflow: hidden;
}
.basket-subtotal-values {
float: right;
margin-left: 30px;
font-size: 1px;
line-height: 1;
}
.basket-subtotal .label {
position: relative;
top: -2px;
display: inline-block;
vertical-align: bottom;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
}
.basket-subtotal.basket-final-total .label {
margin-right: -3px;
font-weight: 700;
}
.basket-subtotal .value {
display: inline-block;
vertical-align: top;
min-width: 80px;
margin-left: 60px;
font-size: 24px;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
.basket-subtotal.basket-final-total .value {
font-size: 28px;
font-weight: 700;
line-height: 1;
}
.basket-subtotal .value.basket-promo-form-amount {
float: right;
}
.basket-promo-code {
overflow: hidden;
}
.basket-promo-form {
max-width: 420px;
overflow: hidden;
}
.basket-promo-form .label-container {
float: left;
margin-right: 10px;
}
.basket-promo-form button {
float: right;
margin-left: 5px;
}
.basket-subtotal .value .current-total {
font-size: 28px;
}
.basket-promo-code .promo-code-container {
padding-bottom: 19px;
}
.basket-promo-form input[type=text] {
margin-bottom: 0;
}
.basket-promo-form-amount {
margin-top: 10px;
}
/*.basket-promo-form .button-light {
vertical-align: 1px;
}*/
.basket-promo-form label.inline {
margin-top: -12px;
margin-right: 20px;
font-size: 16px;
text-transform: none;
}
.basket-promo-form label.inline span {
font-size: 16px;
}
.basket-subtotal.basket-promo-code {
border-bottom: 3px solid #e3e3e3;
}
.discount-code-tabs.basket-promo-code {
margin-top: 0;
padding-bottom: 10px;
}
.discount-code-tabs.basket-promo-code .inner {
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
p.error {
margin-top: -25px;
padding-bottom: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 18px;
color: #df2222 !important;
}
p.error:first-child {
margin-top: 10px;
}
p.success {
margin-top: -25px;
padding-bottom: 0;
margin-bottom: 25px;
font-size: 16px;
color: #336b75 !important;
}
p.success:first-child,
h1 + p.success,
h1 + p.error,
h2 + p.success,
h2 + p.error {
margin-top: 0;
}
.basket-checkout-payment-panel {
padding: 0 !important;
border-width: 0;
}
.basket-checkout-payment-panel .discount-code-tabs {
margin-top: 0;
}
.basket-top-row {
margin-bottom: 0;
}
.discount-code-tabs.basket-promo-code h3 {
margin-top: 0;
}
/* Basket Checkout Row */
.basket-checkout-row {
float: right;
overflow: hidden;
}
.touch-basket-checkout-row {
display: none;
float: none;
margin-bottom: 50px;
}
.touch .touch-basket-checkout-row {
display: block;
}
.basket-checkout-row form {
float: right;
margin-top: 10px;
padding: 14px 20px;
background-color: #e2e2e2;
line-height: 44px;
overflow: hidden;
}
.touch-basket-checkout-row form {
float: none;
}
.basket-checkout-row form label.inline {
display: inline-block;
vertical-align: middle;
font-size: 16px;
line-height: 1;
margin-right: 20px;
}
.basket-checkout-row form label.inline b {
display: block;
font-weight: normal;
}
.basket-checkout-row form label.inline span {
display: block;
}
.add-payment-actions {
margin-top: 20px;
margin-bottom: 100px;
}
.payment-tabs {
margin-bottom: -1px;
}
.payment-tabs > a {
display: inline-block;
padding: 0 20px;
border: 1px solid #ddd;
font-size: 20px;
font-weight: bold;
line-height: 42px;
color: #aaa;
text-decoration: none;
text-transform: uppercase;
}
.payment-tabs > a ~ a {
margin-left: -3px;
border-left: none;
}
.payment-tabs > a.selected,
.payment-tabs > a:hover {
color: #336b75;
}
.payment-tabs > a.selected {
border-bottom-color: #fff;
}
.payment-types-tab-content {
padding: 30px;
}
.payment-types-tab-content h2 {
margin-top: 0;
}
.gift-card-code {
width: 332px;
}
.gift-card-form,
.apply-gift-card-form {
clear: both;
margin-top: 0;
overflow: hidden;
}
/* **** Gift cards items **** */
.gift-cards-items {
overflow: hidden;
}
.gift-cards-item {
overflow: hidden;
}
/* Number Value */
.gift-cards-item .number-value {
float: left;
margin-right: 20px;
}
/* Amount confirm */
.gift-cards-item .amount-confirm {
padding-top: 10px;
overflow: hidden;
}
.gift-cards-item .amount-confirm .amount {
float: left;
line-height: 35px;
margin-right: 5px;
}
.gift-cards-item .amount-confirm button {
float: right;
margin-left: 5px;
}
/* Table */
.gift-cards-table {
display: table;
width: 100%;
}
.gift-cards-table > div {
display: table-cell;
padding: 10px;
vertical-align: top;
}
.gift-cards-table > div.card {
padding-left: 0 !important;
}
.gift-cards-table strong {
display: block;
}
.apply-loyalty-card-form {
line-height: 42px;
}
/* Side basket heading */
.side-basket .basket-heading {
margin-bottom: 0px;
padding: 6px 13px;
background-color: #333;
font-size: 22px;
color: #fff;
}
.side-basket .basket-heading a {
display: inline-block;
float: right;
margin-top: 4px;
font-family: "FoundersGrotesk", sans-serif;
font-size: 14px;
font-style: normal;
color: #fff;
vertical-align: baseline;
text-decoration: underline;
}
.side-basket .basket-heading a:hover {
text-decoration: none;
}
/* Side basket thumb */
.side-basket .side-basket-thumbnail {
display: inline-block;
width: 130px;
height: 130px;
margin-bottom: 5px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
.side-basket .side-basket-thumbnail-small {
float: left;
width: 72px;
height: 72px;
margin-right: 10px;
}
.side-basket.main-checkout-basket .side-basket-thumbnail-small {
width: 110px;
height: 110px;
}
.find-collect {
clear: both;
}
.book-detail-cnc.cnc-again > div {
padding: 15px 5px;
}
.collect-map {
height: 300px !important;
}
.heading-underline {
padding-bottom: 7px;
border-bottom: 1px solid #c8c8c8;
}
.heading-underline + p {
margin-top: 0;
}
.search-term {
font-weight: normal;
text-transform: capitalize;
}
/*.collect-results h2 {
margin-top: 0;
}*/
/*.collect-results {
margin-bottom: 30px;
}*/
.collect-search-list .inner {
min-height: 151px !important;
}
/*.collect-search-list .shop-item .inner > a {
float: left;
margin-right: 20px;
}*/
.collect-search-list-first {
margin-bottom: 10px;
}
.collect-search-list a .shop-distance {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: italic;
color: #5c5c5c;
}
.collect-search-list .shop-item .inner .distance a {
font-weight: 500;
color: #969696;
}
.collect-search-list .shop-item.disabled .shop-item-fade {
display: block;
}
.collect-search-list .shop-item .shop-item-fade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.5;
display: none;
z-index: 1;
}
.shop-item .get-directions {
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
}
.collect-search-list .shop-item {
position: relative;
}
/*.collect-search-list .shop-item .collect-select {
position: absolute;
right: 0;
bottom: 30px;
}*/
.shop-item .button:before {
display: none;
font-size: 50px;
line-height: 1;
color: #777;
}
.collect-search-list.collect-search-list-first .shop-item .inner {
border-bottom-width: 0;
}
.reserve-item .shop-facilities {
margin-top: 10px;
}
.gift-card-form div + div,
.loyalty-card-form div + div {
padding-left: 5px;
}
.input-wrapper {
display: block;
overflow: hidden;
}
.input-wrapper input {
width: 100%;
}
.input-wrapper-content {
clear: left;
}
.gift-card-form .button,
.loyalty-card-form .button {
float: right;
margin-left: 5px;
}
.panel-gift-card,
.panel-loyalty-card,
.panel-promo-code {
display: block;
padding: 17px 0 15px 0;
border-top: 1px solid #e1e1e1;
}
.panel-promo-code {
padding-bottom: 20px;
}
.touch .panel-gift-card,
.touch .panel-loyalty-card,
.touch .panel-promo-code {
margin-top: 10px;
padding-top: 0;
border-top: none;
border-bottom: 1px solid #e1e1e1;
}
.panel-payment-card {
padding-top: 0px;
padding-bottom: 5px;
}
.touch .panel-loyalty-card {
border-bottom: none;
padding-bottom: 0;
margin-bottom: -13px;
}
.payment-panel {
margin-bottom: 10px;
padding: 20px 28px 10px;
}
.panel-loyalty-card .loyalty-card-form {
margin-top: 10px;
}
.payment-card-list .payment-card {
margin-bottom: 20px;
padding: 0 10px 10px;
border: 1px solid #ddd;
}
.order-totals-suborder .price-column {
width: 90px;
}
.order-totals-suborder .total-column {
width: 100px;
}
.order-summary-totals .total-column {
width: 100px;
}
/* Checkout payment options */
.checkout-payment-options {
display: inline-block;
width: 100%;
padding: 40px 0px 36px 0;
vertical-align: top;
}
.checkout-payment-options > label .label-content > span:first-child {
color: #000;
}
.error + div > .checkout-payment-options {
padding-top: 0;
}
.checkout-payment-options > label {
float: left;
width: 33.33%;
margin: 0;
padding-right: 10px;
}
.checkout-payment-options > label:last-child {
padding-right: 0;
}
.touch .checkout-payment-options > label {
width: 100%;
padding-right: 0;
margin-top: 20px;
}
.touch .checkout-payment-options > label:first-child {
margin-top: 0;
}
.help-text {
display: block;
margin-top: 2px;
font-size: 14px;
font-style: italic;
line-height: 16px;
color: #999;
text-align: left;
}
label .help-text:not(.label-container .help-text):not(.radio-label .help-text):not(.checkbox-label .help-text) {
margin-top: -6px;
}
.help-text p {
margin-top: 0;
font-size: inherit;
line-height: inherit;
}
.payment-panel.payment-billing {
padding-top: 0;
}
.payment-panel.confirm-panel {
border-top: 1px solid #ddd;
}
.payment-card-entry input.input-large,
.delivery-address-form input.input-large {
margin-bottom: 8px;
}
.payment-card-entry .ws-select-outer,
.delivery-address-form .ws-select-outer {
margin-bottom: 8px;
}
.payment-type-field .ws-select-outer {
width: 180px;
}
.cardbox > div {
float: left;
}
.cardbox.loyalty-cardbox > div + div {
float: right;
}
.cardbox .label-container {
display: inline-block;
vertical-align: top;
margin-right: 5px;
}
.loyalty-cardbox-amount .label-container {
float: left;
margin-right: 0;
font-weight: bold;
}
.loyalty-cardbox-balance {
padding-top: 15px;
line-height: 1;
}
.loyalty-cardbox-amount {
overflow: hidden;
}
.loyalty-cardbox-amount input {
width: 53px;
min-width: 45px;
}
.loyalty-cardbox-amount button {
float: right;
margin-left: 5px;
}
.inline-help-container {
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-style: italic;
line-height: 44px;
color: #999;
}
.confirm-cv2 .inline-help-container {
display: block;
overflow: hidden;
}
.confirm-cv2 input {
float: left;
width: 54px;
margin-right: 10px;
}
.inline-help-container span {
position: relative;
top: -2px;
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.basket-checkout-payment-panel h4.payment-billing-address-heading {
margin: 10px 0;
margin-bottom: 20px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: normal;
font-style: normal;
color: #333;
}
.row .checkout-main {
padding-right: 20px;
}
.delivery-collection-postcode-input {
margin-bottom: 0 !important;
}
.delivery-collection-store-locator {
position: absolute !important;
top: 178px;
z-index: 10;
}
.success-frame {
margin-top: 100px;
}
.success-frame p {
text-align: center;
}
.checkout-panel-actions {
margin-top: 15px;
padding-top: 20px;
border-top: 1px solid #e1e1e1;
}
.checkout-panel-actions.payment-panel {
margin-top: 10px;
}
.checkout-login-start {
padding-top: 6px;
overflow: hidden;
}
.checkout-login-start .label {
margin-top: 13px;
color: #545454;
}
.checkout-login-forgotten {
float: right;
font-size: 14px;
font-style: italic;
color: #5c5c5c;
}
.checkout-login-forgotten-link {
float: left;
display: block;
margin: 0 0 0 0;
padding-right: 2px;
overflow: hidden;
}
.checkout-login-remember-password {
float: right;
margin: -12px 0 0 0;
text-align: right;
}
.checkout-login-remember-password .ws-checkbox-outer {
margin-right: 0;
margin-left: 4px;
}
.checkout-login-yes-panel {
display: none;
}
.checkout-login-no-panel {
display: none;
}
.checkout-login-guest-panel {
display: none;
}
.checkout-login-no-panel h2 {
margin-top: 0;
margin-bottom: 25px;
}
.basket-checkout-login-form label.inline {
font-size: 14px;
}
label.checkout-login-label {
margin: 4px 0;
cursor: pointer;
}
label.checkout-login-guest-account {
margin-bottom: 10px;
}
.checkout-login-question {
margin-bottom: 5px;
}
div.delivery-to-address {
float: left;
width: 45%;
padding-right: 20px;
margin-bottom: 20px;
}
div.delivery-to-shop {
float: left;
width: 55%;
margin-bottom: 20px;
}
.saved-address-container .label-container,
.card-fields-container .label-container,
.payment-card-saved .label-container {
float: left;
min-width: 90px;
margin-right: 10px;
}
.smaller-address-label .ws-select-outer {
width: 80% !important;
width: calc(100% - 100px) !important;
}
.saved-address-container .ws-select-outer,
.card-fields-container .ws-select-outer,
.payment-card-saved .ws-select-outer {
float: left;
width: 100% !important;
margin: 0 0 5px 0;
}
.card-fields-container .ws-select-outer .default {
color: #909090;
margin-left: 4px;
}
.saved-address-container .add-address,
.saved-address-container .payment-add-address {
vertical-align: top;
}
.saved-address-container .saved-address-edit,
.saved-address-container .payment-saved-address-edit {
vertical-align: top;
}
.address-save-actions a.button {
vertical-align: top;
}
.panel-complete-delivery-method .span4 a.button {
margin-top: 15px !important;
}
.collect-form-outer .book-detail-cnc {
position: absolute;
top: 177px;
/*z-index: 1;*/
}
.collect-form-outer .cnc-left {
padding-top: 6px;
padding-left: 0px;
}
.collect-form-outer .book-detail-cnc-saved {
padding-right: 0 !important;
overflow: hidden;
}
.collect-form-outer .book-detail-cnc-saved .collect-form-saved {
margin-top: 0;
}
.collect-form-outer .book-detail-cnc .book-detail-cnc-saved .collect-form-saved button {
margin-top: -2px;
margin-right: -10px;
}
.delivery-collection-locations .shop-item {
height: auto;
overflow: hidden;
}
.delivery-collection-locations .shop-item .inner {
height: auto;
padding: 0;
margin: 0;
}
.shop-item .button.spacer {
float: right;
visibility: hidden;
margin-left: 20px;
}
.shop-item .info-wrap + .button {
position: absolute;
right: 0;
bottom: 14px;
}
.delivery-collection-locations .shop-address {
margin-top: 0;
line-height: inherit;
}
.accepted-cards-label {
font-style: italic;
color: #999;
padding: 0;
}
.accepted-cards-label label {
padding-top: 6px;
margin: 0;
}
.accepted-cards {
margin-bottom: 18px;
padding-top: 5px;
}
select.card-select.ws-select-large {
display: none;
}
.billing-address-container {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e1e1e1;
}
/*.same-as-delivery-container {
margin-bottom: 30px;
}*/
.same-as-delivery-container .label,
.billing-select-container .saved-address-container .label-container,
.confirm-cv2 .label-container {
float: left;
min-width: 90px;
margin-right: 10px;
}
.same-as-delivery-value label {
margin-top: 5px;
}
.same-as-delivery-value .ws-checkbox-outer {
vertical-align: -8px;
}
body .main-nav.hidden {
position: static;
bottom: 44px;
height: 0;
margin: 0;
margin-bottom: -20px;
padding: 0;
border-bottom-width: 0;
overflow: hidden;
}
body .main-nav.hidden.detached {
display: none;
}
.gift-card-explanation {
margin-top: 0;
margin-bottom: 20px;
}
.gift-cards-container {
margin-top: 0;
margin-bottom: 25px;
padding: 0 0 9px 0;
border-bottom: 1px solid #e1e1e1;
}
.reserve-details.complete .complete {
display: block;
}
.reserve-details.complete .options {
display: none;
}
.reserve-details.open .complete {
display: none;
}
.reserve-details.open .options {
display: block;
}
.reserve-details .complete p {
margin-top: 0;
/*margin-bottom: 50px;*/
}
.remember-card {
margin-top: 20px;
}
.remember-card-new {
margin-top: 0;
margin-bottom: 40px;
}
/*.remember-card-same {
margin-top: 20px;
}*/
.order-payment iframe {
border-width: 0;
}
.qas-result {
display: none;
}
ul.qas-list {
max-height: 137px;
margin: 0;
margin-bottom: 8px;
border: 1px solid #d1d1d1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
ul.qas-list li {
padding: 4px 6px;
-webkit-transition: background 200ms;
transition: background 200ms;
cursor: pointer;
}
ul.qas-list li:hover {
background: #eee;
}
.lookup-spinner {
display: none;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 44px;
}
.qas-error, .qas-service-error {
display: none;
}
.basket-error-container {
margin-top: 20px;
}
.span8.promo-code-summary {
margin-top: 13px;
padding-right: 31px;
}
.saved-address-container .floater.right {
margin-left: 0;
}
.saved-address-container .floater .saved-address-edit,
.saved-address-container .floater .add-address {
float: left;
margin-left: 5px;
}
.saved-address-container .add-address-responsive {
display: none;
}
.address-container {
clear: both;
margin-bottom: 10px;
font-size: 15px;
line-height: 20px;
}
.account-content .address-container {
clear: none;
}
.address-block .address-container {
max-height: 160px;
overflow: hidden;
}
.button-qas.invible {
opacity: 0;
visibility: hidden;
}
.floater.right.lookup-button-container {
position: relative;
margin-left: 5px;
}
.button.postcode-lookup-button {
padding-left: 15px;
padding-right: 10px;
font-size: 15px;
}
.address-save-actions .button,
.basket-payment-actions .button {
float: right;
margin-left: 5px;
}
/*.checkout-panel-actions .button {
float: left;
}
.checkout-panel-actions .button ~ .button {
float: right;
}
*/
.shipping-method .shipping-label {
display: block;
}
.shipping-method .shipping-method-details {
padding-top: 6px;
overflow: hidden;
}
.shipping-method .shipping-method-cost {
float: right;
margin-left: 20px;
}
.basket-checkout-payment-heading h2 {
margin-bottom: 0;
}
.panel-content {
overflow: hidden;
}
/*.complete > .panel-content,
.panel-complete > .panel-content {
font-size: 16px;
line-height: 20px;
}
*/
.panel-complete > .button {
float: right;
margin-left: 20px;
}
.panel-complete-delivery-method > .button {
margin-top: 18px;
}
.panel-complete .basket-delivery-complete-price {
float: right;
margin-left: 20px;
}
.card-fields-container .add-new-card,
.addressContainer .payment-add-address,
.payment-card-saved .payment-add-address {
float: right;
margin-left: 5px;
}
.addressContainer .input-wrapper-content .payment-add-address {
float: none;
margin-left: 0;
}
.card-fields-container .responsive-add-new-card,
.addressContainer .responsive-payment-add-address,
.payment-card-saved .responsive-payment-add-address {
display: none;
float: none;
margin: 0;
}
.input[type=text].confirm-cv2-input {
width: 90px;
margin: 0 10px 0 0;
}
.checkout-loyalty-signup {
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid #e1e1e1;
}
.delivery-collection-inputs {
padding-bottom: 88px;
}
.shops-other h2 {
margin-bottom: 0;
}
.preferred-method {
margin-bottom: 10px;
margin-top: 10px;
}
.basket-delivery-container {
width: auto;
overflow: hidden;
}
.basket-delivery-prompt {
background-color: #f4f4f4;
margin-top: 10px;
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
display: table;
width: 100%;
}
.basket-delivery-prompt:before {
float: left;
padding-left: 30px;
padding-right: 10px;
font-size: 40px;
color: #A0856A;
}
.basket-delivery-message {
padding-left: 25px;
padding-right: 20px;
font-weight: normal;
overflow: hidden;
display: table-cell;
vertical-align: middle;
padding-left: 6px;
}
.mobile-basket-delivery-prompt {
display: none;
}
.card-fields-container {
float: left;
width: 100%;
}
/* *** Standard shipping *** */
.standard-shipping {
clear: both;
width: 100%;
max-width: 622px;
padding-top: 20px;
color: #545454;
font-weight: 400;
/*text-transform: uppercase;*/
}
.touch .standard-shipping {
display: none;
}
.standard-shipping > ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
.standard-shipping > ul > li {
float: left;
width: 50%;
min-height: 45px;
line-height: 45px;
margin-bottom: 12px;
padding-right: 10px;
}
.standard-shipping > ul > li:nth-child(2n) {
padding-right: 0;
padding-left: 10px;
}
.standard-shipping > ul > li:nth-child(2n+1) {
clear: both;
}
.standard-shipping img {
float: left;
margin-right: 12px;
}
/* Info */
.standard-shipping .input-wrapper {
font-size: 0;
}
.standard-shipping-info {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.standard-shipping-info .title {
display: block;
margin-bottom: 4px;
font-size: 18px;
line-height: 16px;
}
.standard-shipping-info .subtitle {
display: block;
font-size: 14px;
font-weight: normal;
line-height: 1;
}
.standard-shipping-info p {
margin: 0;
}
.address-container .single-line {
padding-top: 9px;
}
.important-information {
color: #C41823;
}
.same-as-delivery-container {
margin-bottom: 6px;
}
.guest-password-fields > .label-container {
float: left;
width: 140px;
}
.confirm-cv2 {
padding-top: 20px;
padding-bottom: 15px;
}
.unapply-code-form {
display: block;
margin-top: 10px;
font-size: 16px;
line-height: 19px;
font-weight: bold;
color: #336b75;
}
.sub-panel h3 {
font-family: Baskerville, serif;
font-size: 19px;
font-weight: 300;
font-style: normal;
line-height: 23px;
color: #000;
text-transform: none;
margin: 0;
}
.checkout-login-start {
display: none;
}
#login-start-error > .input-error {
margin: 0;
}
p.promo-success, p.promo-error {
margin-top: 0;
}
body.redirect-frame {
width: 100%;
height: 100% !important;
display: table;
background: #fff;
}
body.redirect-frame form {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
body.redirect-frame .loading-spinner {
display: block;
margin-bottom: 100px;
}
.payment-iframe {
width: 100%;
height: 460px;
border-width: 0px;
padding: 30px 30px 0px 30px;
}
label.label-disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
.paypal-disabled {
pointer-events: none;
opacity: 0.4;
}
@charset "UTF-8";
.submit-wrapper, .ws-select-handle, input[disabled], .button, .reviews-header a.pdp-write-review, .tabs-header, .accordionItem h4,
.accordionItem h3, .footer-col, .carousel, .map, .shop-prefs-help, .shop-floors .title, .set-filter, .slide-trigger, .ico-tooltip, .plus-login h1 span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tabs-header .tab-content {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.first-click-overlay, .shop-prefs-overlay, .swiper .book-preview .quick-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
::-moz-selection {
background: rgba(0, 153, 153, 0.8);
color: #fff;
}
::selection {
background: rgba(0, 153, 153, 0.8);
color: #fff;
}
html {
height: 100%;
letter-spacing: 0.03em;
}
html.scroll-disabled,
html.scroll-disabled body {
overflow: hidden !important;
}
body {
position: relative;
margin: 0;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
line-height: 1.2;
font-weight: 300;
color: #000;
height: auto !important;
}
body.modal-open {
position: fixed;
width: 100%;
overflow-y: scroll;
}
.lt-ie9 body {
min-width: 1000px;
}
body > img {
display: none;
}
.main-container {
width: 100%;
overflow: hidden;
}
.row {
max-width: 1280px;
padding-left: 10px;
padding-right: 10px;
}
.row .row {
padding-left: 0;
padding-right: 0;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
letter-spacing: inherit;
}
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
padding-left: 10px;
padding-right: 10px;
}
.alpha {
padding-left: 0;
}
.omega {
padding-right: 0;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.contained-width-fields {
max-width: 640px;
}
.text-primary {
color: #000;
}
.text-grey {
color: #5c5c5c;
}
.text-gold {
color: #9E866B;
}
.text-author {
color: #336b75;
font-weight: 600;
text-decoration: none;
}
a.text-author:hover {
color: #355156;
}
.d-flex {
display: flex;
}
h1, h2, h3, h4, h5 {
font-family: Baskerville, serif;
font-weight: 500;
color: #000;
font-size: 28px;
}
h2, h3, h4, h5 {
font-style: italic;
letter-spacing: 0.03em;
font-size: 24px;
}
h2:not(.search-tabs-wrap) {
padding-bottom: 4px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h1.alternate,
h2.alternate,
h3.alternate,
h4.alternate,
h5.alternate {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.0625em;
text-transform: uppercase;
font-style: normal;
}
a {
text-decoration: underline;
color: inherit;
outline: none !important;
}
a[href]:hover {
text-decoration: none;
}
a.text-gold[href]:hover {
color: #846542;
}
a.link-invert {
text-decoration: none;
}
a.link-invert[href]:hover {
text-decoration: underline;
}
.section {
margin-bottom: 20px;
}
.ie-placeholder {
color: #8e8e8e;
}
.display-block {
display: block;
}
.mb-none {
margin-bottom: 0 !important;
}
.mt-none {
margin-top: 0 !important;
}
blockquote {
font-size: 18px;
font-family: Baskerville, serif;
line-height: 1.5em;
margin: 10px 0;
text-align: justify;
}
blockquote cite {
text-transform: uppercase;
text-align: center;
display: block;
font-style: inherit;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
margin-top: 10px;
}
b,
strong {
font-weight: bold;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.text-decoration-underline {
text-decoration: underline !important;
}
.p-normal,
.content-text p {
font-size: 17px;
line-height: 25px;
margin: 12px 0;
}
.p-large {
font-size: 17px;
line-height: 25px;
}
.p-medium {
font-size: 15px;
line-height: 21px;
}
.p-small {
font-size: 14px;
line-height: 18px;
color: #5f5f5f;
}
.hr {
height: 1px;
background: #ddd;
margin-bottom: 30px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
border: none;
border-bottom: 1px solid #c8c8c8;
}
.anchor-target {
display: block;
position: relative;
top: -150px;
visibility: hidden;
}
.opacity-50 {
opacity: 0.5;
}
.content-text {
font-size: 17px;
line-height: 25px;
}
.content-text strong {
color: #5c5c5c;
}
.blog-detail .content-text {
border-top: 1px solid #ddd;
padding-top: 40px;
margin-top: 40px;
}
.chevron {
display: inline-block;
width: 9px;
height: 9px;
background: url(../img/chevron-right.png) no-repeat center;
background-size: contain;
}
#skip-to-content {
position: relative;
}
#skip-to-content a {
position: absolute;
top: -45px;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
transition: top 0.5s;
background: #fff;
padding: 10px 40px 14px;
border-radius: 0 0 10px 10px;
border: 1px solid #5c5c5c;
}
#skip-to-content a:focus {
top: -1px;
left: 20px;
width: auto;
height: auto;
z-index: 9999;
}
@media only screen and (max-width: 640px) {
#skip-to-content a:focus {
left: 8px;
}
}
#main-content {
display: block;
position: relative;
top: -220px;
visibility: hidden;
}
.main-page {
padding-top: 26px;
padding-bottom: 100px;
}
.main-page.home-page, .main-page.main-blog-page, .main-page.events-page, .main-page.home-row {
padding-top: 0;
}
.main-page .main-page {
padding-bottom: 0;
}
.main-page .home-row :last-child {
margin-bottom: 0;
}
.no-touch .main-page {
min-height: calc(100vh - 365px);
}
/* Paragraph end */
.paragraph-end {
position: absolute;
top: 0;
right: -1px;
width: 30px;
height: 21px;
max-height: 100%;
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgb(255, 255, 255)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
background-repeat: no-repeat;
overflow: hidden;
}
.book-preview-grid-item .paragraph-end {
bottom: auto;
top: 21px;
}
.book-preview .paragraph-end {
top: auto;
bottom: 0;
}
.nav-dropdown-basket td.info .title .paragraph-end {
top: auto;
bottom: 0;
right: -14px;
}
.basket-product-price-amount {
font-weight: 600;
color: #5c5c5c;
}
.touch .search-trigger-button.icon:before {
float: right;
margin-right: 15px;
}
.separator-container {
border-top: 1px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.separator-container:first-child {
border-top: none;
}
.logo-container span {
display: block;
text-align: center;
font-family: Baskerville, serif;
font-size: 23px;
margin-top: 12px;
}
.logo-container {
max-width: 144px;
}
.sprite-icon {
display: inline-block;
background: url(../img/ui/sprites.png) no-repeat;
}
.icon-pencil {
background-position: 0 -15px;
}
.icon-tick {
background-position: 0 -27px;
width: 17px;
height: 14px;
}
.icon-basket-bag {
background-position: 0 -41px;
width: 17px;
height: 21px;
}
.icon-reserve-chevron {
background-position: 0 -62px;
width: 4px;
height: 7px;
}
.icon-grid-view {
background-position: 0 -99px;
width: 10px;
height: 10px;
}
.icon-list-view {
background-position: -10px -99px;
width: 10px;
height: 10px;
}
.icon-filters-plus {
background-position: 0 -109px;
width: 10px;
height: 10px;
}
.icon-filters-minus {
background-position: -15px -109px;
width: 5px;
height: 2px;
}
.icon-white-corner {
background-position: 0 -288px;
width: 15px;
height: 15px;
}
.icon-arrow-left {
background-position: 0 -303px;
width: 7px;
height: 12px;
}
.icon-help-button {
background-position: 0 -315px;
width: 15px;
height: 15px;
}
.sprite-icon:before {
display: none;
}
.sidenav {
width: 268px;
}
.sidenav a {
font-size: 18px;
font-family: Baskerville, serif;
color: #949494;
display: block;
text-align: center;
padding: 14px 10px;
text-decoration: none;
}
.sidenav a ~ a {
border-top: 1px solid #d9d9d9;
}
.sidenav a:hover, .sidenav a.active {
text-decoration: none;
color: #336b75;
}
.sidenav a:hover span, .sidenav a.active span {
background: url(../img/ui/sidenav-arrow.png) no-repeat right center;
display: block;
}
/* FORMS */
input::-moz-placeholder {
color: #8e8e8e !important;
opacity: 1 !important;
}
input:-moz-placeholder {
color: #8e8e8e !important;
opacity: 1 !important;
}
input::-webkit-input-placeholder {
color: #8e8e8e !important;
opacity: 1 !important;
}
label {
margin: 10px 0 4px;
}
.label-container {
display: flex;
align-items: center;
}
.login-container label:first-child {
margin-top: 0;
}
form > ol {
margin: 0;
padding: 0;
}
form > ol > li {
position: relative;
}
.reset-pass .reset-title {
font-weight: bold;
}
.reset-pass .password-expired {
display: none;
}
.reset-pass .message {
margin: 10px 0;
}
.reset-pass .message.error {
font-size: 15px;
margin: 5px 0 0 0;
}
.reset-pass .message:empty {
margin: 0;
}
#resetPwModal,
#updatePwModal {
background: #eee;
}
#resetPwModal header,
#updatePwModal header {
background: #336b75;
}
#resetPwModal .modal-body,
#updatePwModal .modal-body {
padding: 20px 10px;
}
#resetPwModal .modal-body p,
#updatePwModal .modal-body p {
margin: 0 0 16px;
}
#resetPwModal .modal-body .button,
#updatePwModal .modal-body .button {
color: #fff;
margin-left: 10px;
}
#resetPwModal .modal-body .button.submit-reset-pw, #resetPwModal .modal-body .button.submit-update-pw,
#updatePwModal .modal-body .button.submit-reset-pw,
#updatePwModal .modal-body .button.submit-update-pw {
background: #336b75;
}
#resetPwModal .modal-body .button.js-modal-close,
#updatePwModal .modal-body .button.js-modal-close {
background: #888;
}
/* Submit container */
.submit-container {
display: inline-block;
width: 100%;
vertical-align: top;
margin-bottom: 30px;
}
.submit-container label {
float: left;
margin-top: 0;
padding-top: 6px;
margin-bottom: 8px;
}
.submit-container .button {
float: right;
margin-left: 15px;
}
/* Submit wrapper */
.submit-wrapper {
overflow: hidden;
}
.submit-wrapper .submit-wrapper-fields {
float: left;
overflow: hidden;
}
.submit-wrapper .button {
float: right;
margin-top: 10px;
}
/* *** Checkboxes and Radios *** */
.radio-label,
.checkbox-label {
position: relative;
padding-top: 6px;
padding-bottom: 2px;
line-height: 1 !important;
overflow: hidden;
}
.radio-label {
padding-top: 8px;
}
.input-container .radio-label,
.input-container .checkbox-label {
margin-bottom: 0;
}
.radio-label.small,
.checkbox-label.small {
font-size: 14px;
}
.radio-label .label-content,
.checkbox-label .label-content {
display: block;
padding-bottom: 2px;
overflow: hidden;
}
.inline-radios {
padding-top: 10px;
overflow: hidden;
}
.radio-label + .inline-radios,
.checkbox-label + .inline-radios {
margin-top: 15px;
}
.inline-radios > label {
float: left;
margin: 5px 20px 15px 0;
}
.inline-radios fieldset {
float: left;
}
.inline-radios fieldset > label {
float: left;
margin: 0 20px 20px 0;
}
.inline-radios fieldset > label:last-child {
margin-right: 0;
}
/* Checkbox / Radio input */
.ws-checkable-outer {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
line-height: 24px;
border: 1px solid #d1d1d1;
background: #E2E2E2;
text-align: center;
vertical-align: middle;
}
.radio-label .ws-checkable-outer,
.checkbox-label .ws-checkable-outer {
top: -6px;
margin-bottom: -6px;
}
.radio-label .ws-checkable-outer.ws-radio-small,
.checkbox-label .ws-checkable-outer.ws-checkbox-small {
top: -1px;
}
.ws-radio-outer {
border-radius: 128px;
}
.ws-checkable-outer.checked {
background-color: #B2E4E1;
}
.ws-checkable-outer.disabled {
background: #e2e2e2;
border: 1px solid #c1c1c1;
}
.ws-checkable-outer.disabled {
cursor: not-allowed;
}
.ws-checkable-outer.ws-checkbox-small {
width: 16px;
height: 16px;
line-height: 12px;
}
label > .ws-checkable-outer {
margin-right: 8px;
}
label > .ws-checkable-outer.ws-checkbox-small,
label.small > .ws-checkable-outer {
margin-right: 5px;
}
label.inverted > .ws-checkable-outer {
margin-left: 10px;
margin-right: 0;
}
label.inverted > .ws-checkable-outer.ws-checkbox-small,
label.inverted.small > .ws-checkable-outer {
margin-left: 5px;
margin-right: 0;
}
.checkbox-label > .ws-checkable-outer,
.radio-label > .ws-checkable-outer {
float: left;
}
.checkbox-label.inverted > .ws-checkable-outer,
.radio-label.inverted > .ws-checkable-outer {
float: right;
}
.ws-checkable-outer:hover {
border-color: #B4B4B4;
}
.ws-checkable-outer:focus,
.ws-checkable-outer:active,
.ws-checkable-outer.checked {
border: 2px solid #336b75;
}
.ws-checkable-outer:before {
display: none;
}
.ws-checkable-outer.checked:before {
display: block;
}
.ws-checkbox-outer:before {
font-size: 22px;
color: #3E3E3E;
text-indent: 1px;
}
.ws-checkbox-small:before {
font-size: 12px;
}
.ws-radio-outer:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #3E3E3E;
}
.ws-checkable-outer input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* Radio labels images */
.checkbox-label > img,
.radio-label > img {
display: block;
margin: 0 10px 10px 0;
}
/* *** Selects *** */
.ws-select-outer {
position: relative;
display: inline-block;
width: 100%;
max-width: 180px;
margin-bottom: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ws-select-outer .ws-select {
display: none;
}
.ws-select-outer.use-native .ws-select {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0.01;
}
.ws-select-handle {
padding: 11px 15px 11px 13px;
background: #E2E2E2;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 13px;
cursor: pointer;
}
.ws-select-large .ws-select-handle {
padding: 10px 18px;
font-size: 15px;
line-height: 22px;
}
.ws-select-white.ws-select-outer .ws-select-handle {
background: #fff;
border: 1px solid #d1d1d1;
color: #444;
}
.ws-select-handle .ws-select-handle-inner {
display: block;
padding-right: 20px;
background: url(../img/ui/ws-select-chevron-small.png) no-repeat right center;
}
.ws-select-handle .ws-select-handle-inner img,
.fancy-select img {
position: relative;
top: -1px;
display: inline-block;
height: 16px;
vertical-align: middle;
}
div.fancy-select ul.options.open {
z-index: 2;
}
.sort div.fancy-select ul.options.open,
.blog-filter-category-wrap div.fancy-select ul.options.open,
.delivery-address-panel div.fancy-select ul.options.open {
z-index: 98;
}
.ws-select-list {
list-style: none;
margin: 0;
border: 2px solid #336b75;
border-top: none;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
display: none;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
max-height: 312px;
overflow-y: auto;
z-index: 999;
}
.ws-select-list li {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
font-size: 13px;
padding: 10px 18px 10px 13px;
line-height: 13px;
}
.ws-select-list li.option {
cursor: pointer;
}
.ws-select-list li.option:hover, .ws-select-list li.selected {
background: #b2e4e1;
}
.ws-select-outer.open .ws-select-list {
display: block;
position: absolute;
}
.ws-select-list li.disabled {
color: #8D8D8D;
pointer-events: none;
cursor: default;
background: none !important;
}
.ws-select-list li.group {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
}
.ws-select-list li.option.child {
padding-left: 36px;
}
.ws-select-large .ws-select-handle > span {
background-image: url(../img/ui/ws-select-chevron.png);
height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-select-outer.disabled .ws-select-handle-inner {
background: none;
}
.ws-select-outer.disabled .ws-select-handle {
cursor: default;
}
.ws-select-outer.ws-select-large {
max-width: 275px;
}
.ws-select-outer.ws-select-half {
max-width: none;
width: 50%;
}
.ws-select-outer.ws-select-large.ws-select-half {
max-width: 137px;
}
.contact-details-edit .ws-select-outer.ws-select-half {
max-width: 185px;
}
.ws-select-outer.ws-select-full {
max-width: none;
width: 100%;
}
.ws-select-large .ws-select-list li {
font-size: 15px;
padding: 11px 10px 11px 18px;
line-height: normal;
}
.ws-select-outer.ws-select-block {
display: block;
width: 100%;
max-width: none;
}
html.js .ws-select {
display: none;
}
.input {
display: inline-block;
min-width: 30px;
height: 35px;
padding: 6px 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: normal;
border: 1px solid #D1D1D1;
text-transform: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
vertical-align: middle;
outline: none;
}
.lt-ie9 .input {
line-height: 20px;
}
.input:not([disabled]):focus,
.input:not([disabled]):active,
.input.input-error {
border: 2px solid #336b75;
padding: 5px 9px;
}
.input-gold:focus,
.input-gold:active {
border-color: #9E866B;
}
input[disabled] {
background: #e9e9e9;
color: #5c5c5c;
-webkit-text-fill-color: #5c5c5c;
-webkit-opacity: 1;
}
.input.input-large,
.input.input-large:focus,
.input.input-large.input-error,
.input.input-large.error {
height: 44px;
padding: 10px 12px;
margin-bottom: 10px;
font-size: 15px;
line-height: 22px;
}
.input[type=number].input-large {
padding-left: 8px;
padding-right: 8px;
}
.lt-ie9 .input.input-large {
line-height: 20px;
}
.input[type=number].input-large:active,
.input[type=number].input-large:focus,
.input[type=number].input-large.input-error,
.input[type=number].input-large.error {
padding-left: 7px;
padding-right: 7px;
}
.input.input-error {
border-color: #cc0000;
}
.input-hint,
label.input-error {
margin: -5px 0 20px;
font-size: 15px;
line-height: 17px;
color: #9f9f9f;
opacity: 0;
-webkit-transition: opacity 100ms;
transition: opacity 100ms;
font-style: italic;
}
.input:focus + .input-hint,
.input:active + .input-hint,
.input-error + .input-hint {
opacity: 1;
}
.input-error + .input-hint, label.input-error {
color: #cc0000;
opacity: 1;
}
.input-block {
display: block;
width: 100%;
}
.login-error {
display: none;
}
.field.remember-me {
margin: 10px 0 18px 0;
clear: both;
float: left;
width: 100%;
}
@media only screen and (max-width: 640px) {
.field.remember-me {
margin: 12px 0 10px 0;
}
}
.remember-me-container {
clear: both;
}
.remember-me-container label {
float: left;
}
.remember-me-container .field.remember-me {
margin: 3px 0 !important;
}
.input.input-small {
height: 30px !important;
font-size: 13px;
padding: 6px 8px;
}
.input.input-small:not([disabled]):focus,
.input.input-small:not([disabled]):active {
padding: 4px 6px;
}
.input-search-outer {
white-space: nowrap;
}
body textarea.input,
body textarea.input.input-large {
height: auto !important;
resize: none;
}
.text-teal {
color: #336b75;
}
.text-gold {
color: #9e866b;
}
.input-spacer {
line-height: 44px;
}
/* *** Buttons *** */
.button {
display: inline-block;
border: none;
padding: 0 16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 19px;
font-weight: 300;
line-height: 35px;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
text-align: center;
cursor: pointer;
vertical-align: top;
letter-spacing: normal;
}
.button:active, .button:hover {
text-decoration: none;
}
.no-touch .button:active,
.no-touch .button:hover,
.no-touch .card-upgrade-wrap .card-option:hover {
opacity: 0.75;
transition: opacity 0.3s;
}
.button.button-teal {
background: #336b75;
color: #fff !important;
}
.button.button-gold {
background: #9e866b;
color: #fff !important;
}
.button.button-grey {
background: #e2e2e2;
color: #000 !important;
}
.button.button-account-action {
background: #e0e9ed;
color: #336b75;
border: 1px solid #336b75;
}
.button.button-account-action[disabled] {
opacity: 1;
background: #fff;
color: #D9D9D9;
border-color: #D9D9D9;
}
.button.button-danger {
background: rgb(181, 20, 47);
color: #fff !important;
}
.button[disabled] {
pointer-events: none;
opacity: 0.8;
}
.button span.print-icon {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(../img/icons/print.svg);
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
margin-bottom: -4px;
}
.button.button-account-action span.print-icon {
background-image: url(../img/icons/print-teal.svg);
}
.button.button-see-more {
color: #336b75;
font-size: 18px;
font-weight: 600;
padding: 0;
}
.button.button-see-more:hover {
opacity: 1;
color: #355156;
}
.delivery-address-form .clear-current-form {
float: right;
line-height: 44px;
}
.button-small {
font-size: 14px;
line-height: 30px;
padding: 0 14px;
font-weight: 500;
}
.button-large {
font-size: 23px;
padding: 0 20px;
line-height: 44px;
}
.button-block {
display: block;
width: 100%;
}
.button-light {
font-style: italic;
font-size: 15px;
color: #444;
}
.button.waiting {
position: relative;
color: transparent !important;
pointer-events: none;
}
.button.waiting:before {
content: "";
width: 100%;
height: 100%;
background-image: url(../img/waiting_gold.gif);
position: absolute;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.button.button-teal.waiting:before {
background-image: url(../img/waiting_teal.gif);
}
.button-account-back {
display: none;
float: left;
margin-top: 24px;
}
.popup-message {
display: inline-block;
border: 1px solid #d1d1d1;
padding: 30px 60px;
}
.popup-message p {
margin: 0 0 20px;
}
.popup-message .button ~ .button {
margin-left: 20px;
}
.icon-teal-tick {
display: inline-block;
background: url(../img/ui/teal-tick.png) no-repeat center;
width: 17px;
height: 13px;
}
.promo-box {
display: inline-block;
position: relative;
}
.promo-box p {
position: absolute;
right: 0;
bottom: 0;
padding: 21px 30px;
background: #000;
margin: 0;
letter-spacing: -0.9px;
}
.promo-box .title {
font-family: Baskerville, serif;
font-size: 20px;
color: #fff;
display: block;
}
.promo-box .subtitle {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #999;
}
.promo-box img {
display: block;
}
.preview-content {
height: 80px;
font-family: Baskerville, serif;
display: inline-block;
vertical-align: top;
padding: 20px;
box-sizing: border-box;
font-size: 17px;
line-height: 19px;
color: #fff;
overflow: hidden;
}
.preview-content-tweet a, .preview-content .abstract {
font-size: 15px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
text-decoration: none;
}
.tweet a:hover {
text-decoration: underline;
}
.preview-content p {
margin: 0;
padding-right: 20px;
color: #fff;
}
.preview-content-tweet .icon {
width: 21px;
height: 17px;
float: right;
background: url(../img/ui/twitter-icon.png) no-repeat center;
margin-top: -17px;
}
.tweet-teal a {
color: #b2e0e0;
}
.tweet-teal {
background: #336b75;
}
.preview-content-gold {
background: #9e866b;
}
.preview-content-gold a, .preview-content .abstract {
color: #3f3f3f;
}
.tweet-picture-container {
display: inline-block;
}
.preview-image-content .image {
display: block;
height: 220px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
}
.product-detail-box > img {
float: left;
margin-right: 20px;
}
.product-detail-box .detail {
border: 1px solid #d7d7d7;
border-left: none;
height: 290px;
padding: 20px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.product-detail-box .title {
font-size: 22px;
font-family: Baskerville, serif;
display: block;
}
.product-detail-box .author {
display: block;
font-size: 16px;
}
.product-detail-box p a {
color: #333;
}
.product-detail-box p {
font-size: 14px;
line-height: 17px;
height: 85px;
overflow: hidden;
}
.product-detail-box .ws-select-outer {
max-width: 123px;
}
.product-detail-box .price {
display: inline-block;
font-size: 25px;
vertical-align: top;
line-height: 35px;
margin-left: 20px;
}
.product-detail-box .detail .inner {
padding-right: 16px;
height: 207px;
}
.product-detail-box .detail .band {
padding: 17px 0 14px;
background: #f2f2f2;
}
.product-detail-box .button-reserve {
margin-right: 14px;
}
.review-gold {
background: #9e866b;
color: #fff;
padding: 26px 24px;
}
.review-gold .review {
line-height: 33px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 36px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -1px;
font-style: italic;
}
.review-white .review {
font-family: Baskerville, serif;
font-size: 19px;
}
.review-white {
border: 1px solid #B2B2B2;
padding: 28px 22px 14px 28px;
line-height: 22px;
}
.review-box .name {
font-size: 14px;
text-transform: uppercase;
}
.review-box .review {
margin: 0 0 4px;
}
.review-teal {
background: #336b75;
color: #fff;
padding: 30px 20px 20px 26px;
}
.review-teal .review {
font-size: 20px;
line-height: 23px;
}
/* *** Rating *** */
.book-detail .rating {
margin: 20px 0 9px 0;
font-size: 14px;
line-height: 18px;
}
.book-preview-side .rating {
margin-bottom: 0;
}
/* *** Star Ratings *** */
.star-rating {
position: relative;
display: inline-block;
width: 100px;
padding-top: 1px;
margin: 0px 4px 0px -5px;
font-size: 1px;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-align: center;
text-decoration: none !important;
display: inline-block;
}
.book-preview.book-preview-list-item .star-rating {
display: block;
margin: 10px 0 0;
}
.book-detail .star-rating {
margin-right: 8px;
float: left;
}
.book-preview .star-rating {
float: none;
display: inline-block;
margin-top: 8px;
}
.book-preview-side .star-rating {
float: none;
display: block;
margin-bottom: 6px;
}
.review-rating .star-rating {
top: 2px;
float: left;
margin-right: 1px;
display: inline-block;
vertical-align: top;
margin-right: 2px;
}
.reviews-list-item .review-rating .star-rating {
margin-left: -5px;
}
.review-rate .star-rating {
vertical-align: middle;
}
.review-rate .star-rating > div {
cursor: pointer;
}
.set-filter .star-rating {
line-height: 16px;
width: auto;
text-align: left;
}
.set-filter .star-rating > div:before {
color: #fff;
}
.star-rating > div {
width: 20px;
height: 16px;
overflow: hidden;
display: inline-block;
vertical-align: top;
}
.star-rating > div:before {
display: block;
font-size: 16px;
line-height: 1;
color: #C5C5C5;
}
.star-rating > div.active:before {
content: "\e618"; /* IE8 fix*/
color: #FF9933;
}
.star-rating > div .half:before {
width: 50%;
left: 0;
overflow: hidden;
}
.star-rating > div ~ div {
margin-left: -2px;
}
.star-rating > .empty {
opacity: 0.4;
}
.star-icon {
color: #ddd;
position: relative;
font-size: 19px;
}
.star-icon.full:before {
color: #FF9933;
content: "★";
position: absolute;
left: 0;
}
.star-icon.half:before {
color: #FF9933;
content: "★";
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
}
@-moz-document url-prefix() {
.star-icon.full:before {
top: 3px;
}
.star-icon.half:before {
top: 3px;
}
}
.star-rating-white > div:before {
color: #fff;
}
.star-rating-gold > div:before {
color: #8C7358;
}
.set-filter > span {
display: block;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 20px;
padding-right: 5px;
}
.lt-ie9 .set-filter > span {
font-family: Verdana, sans-serif;
font-size: 13px;
}
/* *** HEADER *** */
.env-banner {
position: fixed;
width: 100%;
text-align: center;
z-index: 101;
top: 0;
border-top: 8px solid currentColor;
padding-top: 5px;
font-size: 14px;
pointer-events: none;
display: none;
}
@media print {
.env-banner {
display: none;
}
}
@media only screen and (min-width: 680px) {
html.touch .env-banner br {
content: " ";
margin-right: 180px;
}
}
@media only screen and (max-width: 679px) {
html.touch .env-banner br {
content: " ";
display: block;
margin-top: 22px;
}
.env-banner {
padding-top: 0;
}
}
html.touch .mobile-nav-open {
position: relative;
height: 100% !important;
overflow: hidden;
}
.touch .main-nav-holder .main-nav-bar {
overflow-y: auto;
max-height: 84vh;
}
html.touch.safari body:not(.mobile-nav-open) .main-nav {
bottom: 0;
}
.touch.safari .main-nav-holder .main-nav-bar {
-webkit-overflow-scrolling: auto;
}
.touch.safari .main-nav-holder .main-nav-bar.open {
max-height: calc(100dvh - 60px);
padding-bottom: 100px;
}
/* *** MAIN NAV *** */
.footer-col.nav-col a,
.footer-col.nav-col .manage-cookies {
position: relative;
display: block;
height: 43px;
padding: 0 5px;
font-size: 14px;
font-weight: 400;
line-height: 44px;
color: #545454;
text-transform: uppercase;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
/* *** Subnav *** */
.subnav {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
position: absolute;
left: 10px;
right: 10px;
top: 54px;
padding: 10px 20px;
background: #fff;
border: 1px solid #D3D3D3;
z-index: 9999;
border-top: none;
overflow-y: auto;
}
.touch .subnav {
opacity: 1;
pointer-events: auto;
display: none;
}
.subnav.active {
opacity: 1;
pointer-events: auto;
z-index: 9999;
display: inline-block !important;
float: left;
}
.subnav.active ~ .active {
float: none;
}
.subnav > .row {
display: flex;
}
.subnav .list-wrap {
width: 25%;
}
.subnav ul {
margin-bottom: 20px !important;
}
.subnav ul li.back a {
cursor: pointer;
}
.subnav ul li.back a:after {
display: none !important;
}
.subnav ul li a {
display: inline-block;
padding: 4px 6px;
margin-right: -6px;
margin-left: -6px;
font-size: 13px;
line-height: 16px;
text-decoration: none;
}
.subnav ul li a:hover {
background: #336b75;
color: #fff;
transition: background-color 0.3s, color 0.4s;
}
.subnav ul li a.subnav-image:hover {
background: none;
}
.subnav .highlight {
color: #9e866b;
}
.subnavs,
.subnav ul {
margin: 0;
list-style: none;
z-index: 9999;
}
a.subnav-image > img.subnav-image-item {
width: 100% !important;
}
.mobile-navs ul.subnavs {
white-space: nowrap;
}
.mobile-navs ul.subnavs > li {
width: 100%;
}
.nav-header {
font-weight: bold;
color: #336b75;
font-size: 16px;
}
.subnav-section {
margin-bottom: 50px;
}
/* Nav Promo */
.nav-promos {
float: right;
margin-right: -333px;
}
.nav-promo {
position: relative;
display: block;
width: 315px;
height: 144px;
}
.nav-promo ~ .nav-promo {
margin-top: 20px;
}
.nav-promo .info {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
text-align: right;
}
.nav-promo .info-inner {
display: inline-block;
padding: 20px;
background: #000000;
color: #fff;
text-align: left;
}
.nav-promo .info-inner span {
display: block;
}
.nav-promo .info-inner .title {
font-family: Baskerville, serif;
font-size: 20px;
}
.nav-promo .info-inner .subtitle {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
color: #999;
}
/* *** BREADCRUMBS *** */
.breadcrumbs {
font-size: 13px;
line-height: 15px;
margin-bottom: 20px;
margin-top: 0;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
}
.breadcrumbs b,
.breadcrumbs strong {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
color: #5c5c5c;
}
.breadcrumbs b + a,
.breadcrumbs strong + a {
color: #050708;
}
.breadcrumbs span {
padding: 0px 2px 0px 2px;
}
.breadcrumbs a {
display: inline-block;
text-decoration: none;
white-space: nowrap;
}
.breadcrumbs a[href] {
line-height: 11px;
border-bottom: 1px solid;
}
.breadcrumbs a:hover {
color: #333;
text-decoration: none;
}
.breadcrumbs a.main {
color: #333;
}
.breadcrumbs + h1 {
margin-top: -10px;
}
.mobile-breadcrumbs {
display: none;
}
.span12 > .mobile-breadcrumbs {
margin-bottom: 18px !important;
}
/* *** Perk List *** */
.perk-container {
margin-top: 20px;
text-align: left;
}
.perk-list {
margin: 0;
padding: 0;
}
.book-actions .perk-list {
margin: 20px 0 0;
}
.book-actions .post-add .perk-list {
margin-bottom: 20px;
}
.collect-search-list .perk-list {
padding-top: 5px;
}
.perk-list li {
display: inline-block;
margin-bottom: 5px;
padding-left: 0;
padding-right: 10px;
font-size: 15px;
line-height: 18px;
font-weight: bold;
}
.perk-list li:first-child {
color: #5c5c5c;
}
.perk-list li ~ li {
padding-left: 10px;
}
.feature-good {
font-weight: 600;
color: #336b75;
}
.perk-list .invalidPrice {
color: #336b75;
}
.feature-bad {
font-weight: 600;
color: #336b75;
}
.feature-warning {
font-weight: 600;
color: #f60;
}
.feature-good.warning {
color: #ff6600;
}
.perk-list li:before {
position: relative;
top: 0;
display: inline-block;
margin-right: 2px;
font-size: 19px;
line-height: 1;
vertical-align: bottom;
}
.perk-list li.feature-warning:before {
margin-right: 4px;
}
.perk-container .stock-message {
font-weight: bold;
}
.icon-cancel:before {
position: relative;
top: 1px;
}
.book-detail h1.title {
margin: 0 0 6px;
}
.book-detail .contributors {
display: block;
color: #9e866b;
overflow: hidden;
}
.book-detail .contributors a {
font-size: 18px;
text-decoration: none;
}
.book-detail .spec {
color: #5c5c5c;
font-style: italic;
font-size: 12px;
margin: 0;
}
#write-review {
height: 0;
width: 0;
margin: 0;
}
.write-review-trigger {
position: relative;
display: inline-block;
white-space: nowrap;
vertical-align: top;
padding-left: 15px;
}
.write-review-trigger:before {
position: absolute;
left: 0;
top: 3px;
line-height: 1;
color: #000;
}
.book-detail .book-format {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 16px 24px;
border-bottom: 1px solid #ddd;
}
.book-detail .book-format > .ws-checkable-outer {
float: left;
margin-top: 3px;
margin-right: 18px;
}
.book-detail .book-format .info {
overflow: hidden;
flex: 1;
}
.book-detail .book-format .subtitle {
font-size: 13px;
display: block;
font-style: italic;
}
.book-detail .book-format .rrp-label {
color: #5c5c5c;
font-size: 13px;
display: inline-block;
position: relative;
font-weight: 400;
padding-right: 2px;
}
.book-detail .book-format .rrp-label .price-rrp {
font-weight: inherit;
}
.book-detail .book-format .rrp-label .price-rrp:after {
top: 44%;
}
.book-detail .book-format .price {
float: right;
margin-left: 10px;
font-size: 22px;
}
.book-detail .book-format .price [itemprop=price] {
color: #000;
}
.book-detail .book-format .price-savings {
font-size: 16px;
font-weight: 400;
color: #b01519;
text-align: right;
}
.book-detail .book-format .ico-tooltip {
position: relative;
margin-right: 2px;
background-color: #d5e0e8;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 600;
font-size: 11px;
}
.book-detail .book-format .ico-tooltip .tooltip {
width: 270px;
margin-left: -90px;
background-color: #d5e0e8;
border-color: #326b75;
box-shadow: 3px 3px 6px #999;
font-size: 13px;
text-align: left;
bottom: calc(100% + 10px);
}
.book-detail .book-format .ico-tooltip .tooltip:before {
right: 163px;
left: auto;
border-top-color: #326b75;
}
.book-detail .book-format .ico-tooltip .tooltip:after {
right: 161px;
left: auto;
border-top-color: #d5e0e8;
}
@media only screen and (min-width: 640px) and (max-width: 850px) {
.book-detail .book-format .ico-tooltip .tooltip {
margin-left: -106px;
}
.book-detail .book-format .ico-tooltip .tooltip:before {
right: 148px;
}
.book-detail .book-format .ico-tooltip .tooltip:after {
right: 146px;
}
}
@media only screen and (max-width: 640px) {
.book-detail .book-format .rrp-label {
font-size: 12px;
}
.book-detail .book-format .price {
font-size: 18px;
}
.book-detail .book-format .price-savings {
font-size: 12px;
}
.book-detail .book-format .ico-tooltip .tooltip {
min-width: 270px;
margin-left: -132px;
}
.book-detail .book-format .ico-tooltip .tooltip:before {
right: 122px;
}
.book-detail .book-format .ico-tooltip .tooltip:after {
right: 120px;
}
}
.book-actions {
clear: both;
margin-top: 20px;
}
.book-detail .book-actions .button {
width: 172px;
}
@media only screen and (max-width: 640px) {
.book-detail .book-actions .button {
width: 156px;
}
}
.book-actions .buy-container {
border: 1px solid #ddd;
}
.book-actions .buy-container .ws-select-outer {
width: 100%;
max-width: none;
}
.book-actions .ws-select-outer .price,
.book-actions .ws-select-outer .discount {
font-size: 23px;
margin-left: 6px;
}
.book-actions .ws-select-outer .discount {
color: #919191;
}
.top-bar {
position: relative;
clear: both;
font-size: 1px;
text-align: right;
}
.book-actions .post-add {
display: none;
opacity: 0;
padding-bottom: 11px !important;
}
.post-add .button-container {
font-size: 40px;
}
.post-add .button-container .button {
vertical-align: top;
margin-bottom: 10px;
}
.book-actions .buy-container .buy-inner {
padding: 16px 24px;
}
.book-actions .buy-container .buy-inner .button-container {
border-bottom: 2px solid #fff;
float: none;
}
.book-actions .buy-container .buy-inner.plus-exclusive .button-container {
clear: both;
}
.book-actions .buy-container .buy-inner.plus-exclusive p {
font-weight: 600;
margin: 10px 0;
}
.local-shipping-message,
.embargo-message {
margin: 0 auto 10px;
text-align: center;
font-size: 14px;
padding: 8px;
background-color: #e0e9ed;
color: #535353;
}
.book-editorial .local-shipping-message,
.book-editorial .embargo-message {
min-width: 300px;
}
.book-editorial .local-shipping-message a,
.book-editorial .embargo-message a {
text-decoration: underline;
}
.stock-error-message {
display: none;
margin: 0 auto 10px;
text-align: center;
font-size: 14px;
padding: 8px;
}
.stock-error-message,
.input[name=quantity].inputError {
color: #b60303;
background-color: #ffdede;
}
.book-editorial .stock-error-message {
min-width: 300px;
}
@media only screen and (max-width: 800px) {
.book-editorial .stock-error-message {
min-width: 260px;
}
}
.stock-info-message {
margin: 0 auto 10px;
text-align: center;
font-size: 14px;
padding: 8px;
background-color: #e0e9ed;
}
.stock-info-message:not(td) {
display: none;
}
.book-editorial .stock-info-message {
min-width: 300px;
}
@media only screen and (max-width: 800px) {
.book-editorial .stock-info-message {
min-width: 260px;
}
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .form-shop-search .pdp-buy-wrap > *:nth-child(1) {
width: 40%;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .form-shop-search .pdp-buy-wrap > *:nth-child(2) {
width: 30%;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .form-shop-search .pdp-buy-wrap > *:nth-child(3) {
width: 172px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap {
display: flex;
justify-content: space-between;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info {
width: 48%;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search,
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-info {
width: 52%;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search > div,
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-info > div {
display: flex;
justify-content: space-between;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search > div > *:nth-child(1),
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-info > div > *:nth-child(1) {
width: 47%;
text-align: right;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search > div > *:nth-child(2),
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-info > div > *:nth-child(2) {
width: 172px;
}
@media only screen and (max-width: 1090px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search > div,
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-add {
flex-direction: column;
align-items: flex-end;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-reserve-search > div > div,
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-basket-add > div {
width: 100% !important;
margin-bottom: 10px;
}
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info {
display: block !important;
font-size: 13px;
line-height: 18px;
font-weight: bold;
color: #336b75;
text-align: right;
margin-bottom: 10px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info.not-free {
color: #5c5c5c;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info:before {
position: relative;
top: 0;
display: inline-block;
margin-right: 2px;
font-size: 19px;
line-height: 1;
vertical-align: bottom;
}
@media only screen and (max-width: 640px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info.show-on-mobile {
padding-right: 120px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info.hide-on-mobile {
display: none !important;
}
}
@media only screen and (min-width: 641px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info.show-on-mobile {
display: none !important;
}
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .stock-message-wrap {
width: 100%;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info {
color: #5c5c5c;
font-weight: bold;
padding-right: 10px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .stock-message {
font-weight: bold;
}
@media only screen and (max-width: 640px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .stock-message {
margin-top: 5px;
}
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .perk-container,
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .perk-list {
margin: 0;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .perk-list li ~ li {
padding-left: 0;
display: block;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .limit-message {
width: calc(100% - 55px);
float: left;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .collect-message {
color: #5c5c5c;
font-weight: bold;
background-repeat: no-repeat;
background-size: 20px;
padding-right: 10px;
}
@media only screen and (max-width: 1023px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap {
flex-wrap: wrap;
justify-content: flex-end;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap > *:nth-child(1) {
width: calc(100% - 172px);
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap > *:nth-child(2) {
width: 172px;
text-align: right;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap > *:nth-child(3) {
width: 172px;
}
}
@media only screen and (max-width: 640px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap {
flex-direction: column;
position: relative;
padding-top: 0;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap > * {
width: 100% !important;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-quantity {
position: absolute;
top: 0;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info.with-limited-message {
padding-top: 20px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .pdp-delivery-info .stock-message {
background-repeat: no-repeat;
background-size: 25px;
padding-left: 33px;
background-image: url(../img/ui/Delivery_icon_truck.png);
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .collect-message {
margin-bottom: 10px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info {
display: flex !important;
justify-content: flex-start !important;
text-align: left;
margin-top: 5px;
margin-bottom: 10px;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner.pre-add .pdp-buy-wrap .free-delivery-info:before {
margin-right: 5px;
}
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .buy-inner + .buy-inner {
padding-top: 0;
}
.book-detail:not(.book-preview-side) .book-actions .buy-container .plus-form .buy-inner.pre-add > *:nth-child(3) {
width: 196px;
}
@media only screen and (max-width: 1023px) {
.book-detail:not(.book-preview-side) .book-actions .buy-container .plus-form .buy-inner.pre-add > *:nth-child(3) {
width: 196px;
}
}
.book-actions .buy-container .buy-inner.gdpr-cta {
border: 1px solid #073746 !important;
background-color: #cedbe3;
color: #3a3834;
font-size: 15px;
font-weight: 400;
}
.book-actions .buy-container .buy-inner.gdpr-cta > div:nth-child(2) {
margin-top: 12px;
}
.book-actions .buy-container .buy-inner.gdpr-cta .message {
width: calc(100% - 182px);
float: left;
min-height: 35px;
display: block;
font-size: 14px;
padding-right: 40px;
}
@media only screen and (max-width: 768px) {
.book-actions .buy-container .buy-inner.gdpr-cta .message {
padding-right: 20px;
}
}
@media only screen and (max-width: 640px) {
.book-actions .buy-container .buy-inner.gdpr-cta .message {
width: 100%;
padding-right: 0;
}
}
.book-actions .buy-container .buy-inner.gdpr-cta .message i,
.book-actions .buy-container .buy-inner.gdpr-cta .message > div:nth-child(1) {
font-family: Baskerville, serif;
font-weight: 400;
color: #ee503e;
font-size: 20px;
line-height: 19px;
margin-bottom: 5px;
}
.book-actions .buy-container .buy-inner.gdpr-cta .button {
background: #8cbd6a;
color: #fff;
cursor: pointer;
border: 1px solid #fff;
text-transform: uppercase;
}
.book-actions .buy-container .buy-inner.gdpr-cta .sub-link {
float: right;
margin-top: 10px;
}
.book-actions .buy-container .buy-inner.gdpr-cta .sign-up {
color: #073746;
font-size: 16px;
font-weight: bold;
}
/*plus esclusive*/
.basket-form .plus-exclusive .early-access {
color: #000;
font-weight: 600;
line-height: 24px;
padding-left: 58px;
padding-bottom: 10px;
background: url(../img/plus-green.png) no-repeat;
background-size: 48px;
margin-bottom: 8px;
}
.basket-form .plus-exclusive .js-open-modal {
margin-bottom: 20px;
}
.basket-form .plus-exclusive.is-student .early-access {
background-image: url(../img/plus-blue.png);
}
/* *** Actions *** */
.action-button,
.action-twitter,
.action-icon {
position: relative;
display: inline-block;
width: 54px;
height: 42px;
line-height: 42px;
border: 1px solid #ddd;
border-bottom: 0;
text-decoration: none !important;
vertical-align: top;
text-align: center;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: hidden;
}
.shop-detail .action-icon {
border: 1px solid #ddd;
border-top: none;
}
.action-icon .action-icon {
border: none;
}
.top-bar > .action-icon {
margin-left: 3px;
}
.action-icon:before {
display: block;
font-size: 25px;
color: #336b75;
}
.action-icon.icon-heart {
line-height: 44px;
}
.icon-heart.active:before {
color: #9E866B;
}
.icon-heart.loyalty-exclusive:before {
color: #AAAAAA;
}
.icon-share:before {
text-indent: -3px;
}
/* Action Share */
.action-share-container {
float: right;
background: #fff;
-webkit-transition: width 400ms;
transition: width 400ms;
overflow: hidden;
}
.no-touch .action-share-container:hover .share-array {
display: block;
}
.no-touch .action-share-container:hover .action-icon {
display: none;
}
.action-share-container.active {
display: block;
}
.action-share-container .share-array {
display: none;
padding: 5px;
font-size: 1px;
white-space: nowrap;
}
.account-list .action-share-container {
float: none;
}
.review-header-bottom .action-share-container {
position: absolute;
right: 0;
bottom: 0;
}
.touch .shop-detail .action-share-container {
display: none;
}
.book-actions .top-bar > .action-share-container.active {
display: inline-block;
}
.touch .reviews-list-item .action-share-container {
position: absolute;
right: -21px;
top: auto;
bottom: 15px;
border: 1px solid #ddd;
z-index: 1;
}
.email-share.show-email .share-array {
display: block;
}
.top-bar .action-icon {
border-bottom: 1px solid #ddd;
border-top: none;
}
.share-array > a {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
margin-left: 3px;
text-decoration: none;
vertical-align: top;
overflow: hidden;
z-index: 1;
}
.share-array > a:first-child {
margin-left: 0;
}
.share-array > a:before {
font-size: 20px;
color: #fff;
}
.share-array a.icon-facebook {
background: #2E5796;
}
.share-array a.icon-facebook:before {
font-size: 22px;
}
.share-array a.icon-twitter {
background-color: #000;
background-image: url(../img/icons/icon-x.png);
background-repeat: no-repeat;
background-position: center;
background-size: 19px;
}
.share-array a.icon-pinterest {
background: #C82A20;
}
.share-array a.icon-googleplus {
background: #CE4D30;
}
.share-array a.icon-email {
background: #738a8e;
}
.share-array a.icon-link {
border: 1px solid #336b75;
}
.share-array a.icon-link:before {
color: #336b75;
}
.reviews-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.reviews-header a {
display: inline-block;
margin-right: 20px;
margin-top: 7px;
font-size: 15px;
}
.reviews-header a:last-child {
margin-right: 0;
font-size: 15px;
}
.reviews-header a.pdp-write-review {
float: right;
text-transform: uppercase;
line-height: 20px;
font-weight: 400;
font-size: 12px;
background: #336b75;
color: #fff;
text-decoration: none;
padding: 3px 9px 2px;
margin-top: 0;
cursor: pointer;
}
@media only screen and (max-width: 320px) {
.reviews-header a.pdp-write-review {
color: #336b75;
background: none;
text-decoration: underline;
padding: 0;
line-height: 26px;
}
}
.reviews-header h2 {
display: inline-block;
vertical-align: top;
margin: 0;
margin-right: 4px;
}
.reviews-header .write-review-trigger,
.reviews-header .js-open-modal {
float: right;
}
.reviews-header .write-review-trigger {
padding-left: 17px;
}
.reviews-header .write-review-trigger:before {
margin-top: -2px;
}
.book-reviews {
margin-top: 16px;
padding-bottom: 20px;
border-bottom: 1px solid #DDDDDD;
}
.book-reviews .reviews-list {
margin-top: 20px;
}
.book-review:hover .review-rate-container {
visibility: visible;
}
.book-review a.rec-count {
display: inline-block;
margin-bottom: 4px;
}
.book-review h3 {
margin: 0;
}
.book-review p {
overflow: hidden;
}
.book-review .meta {
margin-top: 20px;
font-size: 15px;
}
.book-review .meta > * {
display: block;
}
.book-review .meta .date {
margin: 0 0 4px;
}
.book-review .meta .user {
text-transform: uppercase;
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
color: #5c5c5c;
}
.book-review .review-rate-container {
float: left;
visibility: hidden;
}
.book-review .user-picture {
margin: 0 16px 0 0;
max-width: 60px;
}
.book-review .review-top {
margin-bottom: 20px;
}
.book-review .star-rating {
display: block;
margin-bottom: 7px;
text-align: left;
}
.bookseller-review-tag {
width: 140px;
height: 34px;
margin: 0 0 10px;
background: url(../img/ui/bookseller-review-tag.png) left top no-repeat;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%20140%2034%22%20enable-background%3D%22new%200%200%20140%2034%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23666766%22%20d%3D%22M140%2C0l-16.6%2C17L140%2C34H0V0H140z%22/%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M13.5%2C12.7c0-1.1-0.6-1.7-1.5-1.9v0c0.7-0.2%2C1.1-1%2C1.1-1.7c0-1.4-1.2-1.9-2.8-1.9H7.8V15h2.7%0D%0A%09%09%09C12.3%2C15%2C13.5%2C14.3%2C13.5%2C12.7z%20M9.2%2C8.2h1c1%2C0%2C1.5%2C0.3%2C1.5%2C1.1c0%2C0.7-0.5%2C1.1-1.6%2C1.1h-1V8.2z%20M9.2%2C13.9v-2.5h1.2%0D%0A%09%09%09c1.2%2C0%2C1.8%2C0.4%2C1.8%2C1.2c0%2C0.9-0.6%2C1.3-1.8%2C1.3H9.2z%20M18.5%2C7c-2%2C0-3.5%2C1.5-3.5%2C4c0%2C2.5%2C1.4%2C4.1%2C3.5%2C4.1c2.1%2C0%2C3.5-1.6%2C3.5-4.1%0D%0A%09%09%09C22%2C8.5%2C20.6%2C7%2C18.5%2C7z%20M18.5%2C13.9c-1.2%2C0-2-1.1-2-2.9c0-1.8%2C0.8-2.8%2C2-2.8c1.2%2C0%2C2%2C1.1%2C2%2C2.8C20.5%2C12.8%2C19.7%2C13.9%2C18.5%2C13.9z%0D%0A%09%09%09%20M27.1%2C15.1c2.1%2C0%2C3.5-1.6%2C3.5-4.1c0-2.5-1.4-4-3.5-4c-2%2C0-3.5%2C1.5-3.5%2C4C23.6%2C13.6%2C25%2C15.1%2C27.1%2C15.1z%20M27.1%2C8.2%0D%0A%09%09%09c1.2%2C0%2C2%2C1.1%2C2%2C2.8c0%2C1.8-0.8%2C2.9-2%2C2.9s-2-1.1-2-2.9C25.1%2C9.3%2C25.8%2C8.2%2C27.1%2C8.2z%20M38.4%2C7.2h-1.5L34%2C10.7h0V7.2h-1.4V15H34v-2.3%0D%0A%09%09%09l1.1-1.4l2.1%2C3.7h1.5L36%2C10.2L38.4%2C7.2z%20M42.4%2C13.9c-0.7%2C0-1.5-0.4-2-0.9L39.5%2C14c0.7%2C0.7%2C1.8%2C1.2%2C2.8%2C1.2c1.8%2C0%2C2.8-1.1%2C2.8-2.3%0D%0A%09%09%09c0-1.1-0.7-1.7-1.6-2.1l-1.1-0.4c-0.6-0.3-1.2-0.5-1.2-1.1c0-0.6%2C0.5-0.9%2C1.2-0.9c0.7%2C0%2C1.2%2C0.3%2C1.7%2C0.7L44.9%2C8%0D%0A%09%09%09c-0.6-0.6-1.5-1-2.4-1c-1.5%2C0-2.6%2C1-2.6%2C2.2c0%2C1.2%2C0.8%2C1.8%2C1.6%2C2.1l1.1%2C0.5c0.7%2C0.3%2C1.2%2C0.5%2C1.2%2C1.2%0D%0A%09%09%09C43.8%2C13.5%2C43.3%2C13.9%2C42.4%2C13.9z%20M48.5%2C11.5h2.8v-1.2h-2.8v-2h3.3V7.2h-4.7V15h4.8v-1.2h-3.5V11.5z%20M55.4%2C7.2H54V15h4.7v-1.2h-3.3%0D%0A%09%09%09V7.2z%20M61.9%2C7.2h-1.4V15h4.7v-1.2h-3.3V7.2z%20M68.4%2C11.5h2.8v-1.2h-2.8v-2h3.3V7.2H67V15h4.8v-1.2h-3.5V11.5z%20M77.9%2C11.7%0D%0A%09%09%09c0.9-0.3%2C1.6-1%2C1.6-2.2c0-1.8-1.2-2.3-2.9-2.3H74V15h1.4v-3.1h1.2l1.7%2C3.1h1.6L77.9%2C11.7z%20M76.5%2C10.8h-1.1V8.3h1.1%0D%0A%09%09%09c1.1%2C0%2C1.7%2C0.3%2C1.7%2C1.2C78.1%2C10.4%2C77.5%2C10.8%2C76.5%2C10.8z%20M13.3%2C21.5c0-1.8-1.2-2.3-2.9-2.3H7.8V27h1.4v-3.1h1.2l1.7%2C3.1h1.6%0D%0A%09%09%09l-1.9-3.3C12.7%2C23.4%2C13.3%2C22.7%2C13.3%2C21.5z%20M10.3%2C22.8H9.2v-2.6h1.1c1.1%2C0%2C1.7%2C0.3%2C1.7%2C1.2C12%2C22.4%2C11.4%2C22.8%2C10.3%2C22.8z%0D%0A%09%09%09%20M16.8%2C23.5h2.8v-1.2h-2.8v-2h3.3v-1.2h-4.7V27h4.8v-1.2h-3.5V23.5z%20M25.3%2C23.1c-0.2%2C0.9-0.4%2C1.7-0.7%2C2.6h0%0D%0A%09%09%09c-0.3-0.9-0.4-1.7-0.7-2.6l-1.1-3.9h-1.5l2.4%2C7.8h1.6l2.4-7.8h-1.4L25.3%2C23.1z%20M29.3%2C27h1.4v-7.8h-1.4V27z%20M34.5%2C23.5h2.8v-1.2%0D%0A%09%09%09h-2.8v-2h3.3v-1.2h-4.7V27H38v-1.2h-3.5V23.5z%20M46.4%2C23.1c-0.1%2C0.8-0.3%2C1.7-0.4%2C2.5h0c-0.2-0.8-0.3-1.7-0.5-2.5l-1-4h-1.2l-1%2C4%0D%0A%09%09%09c-0.2%2C0.8-0.3%2C1.7-0.5%2C2.5h0c-0.1-0.8-0.3-1.7-0.4-2.5l-0.7-4h-1.4l1.6%2C7.8h1.7l0.9-4.1c0.1-0.6%2C0.3-1.2%2C0.4-1.8h0%0D%0A%09%09%09c0.1%2C0.6%2C0.2%2C1.2%2C0.3%2C1.8l1%2C4.1h1.7l1.5-7.8h-1.3L46.4%2C23.1z%22/%3E%0D%0A%09%3C/g%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
}
/* *** Tabs *** */
/* Tabs Header */
.tabs-header {
margin-bottom: -1px;
}
.tabs-header > a {
position: relative;
display: inline-block;
padding: 0 20px;
border: 1px solid #ddd;
font-size: 22px;
font-weight: bold;
font-style: italic;
line-height: 42px;
color: #aaa;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
z-index: 1;
}
.tabs-header > a ~ a {
margin-left: -3px;
border-left: none;
}
.tabs-header > a.active, .tabs-header > a:hover {
color: #336b75;
}
.tabs-header > a.active {
border-bottom-color: #fff;
}
.tabs-header > a:before {
display: none;
position: absolute;
right: 10px;
top: 0;
font-size: 26px;
color: #000;
}
.book-info-tabs {
margin-top: 15px;
}
/* Tabs Content */
.tabs-content-container {
border: 1px solid #ddd;
}
.tabs-content-container .tab-content {
padding: 40px 60px 46px 40px;
}
.tab-content {
display: none;
padding: 40px;
overflow: hidden;
}
.tab-content.active {
display: block;
}
.tab-content h4 {
margin-bottom: 10px;
}
.tab-content p:first-child {
margin-top: 0;
}
.tab-content b,
.tab-content strong {
color: #5c5c5c;
}
.tab-content .author-preview h4 {
font-size: 22px;
margin-top: 0;
}
.tabs-header .tab-content {
display: none;
}
.tab-content-synopsis .two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 44px;
-moz-column-gap: 44px;
column-gap: 44px;
font-size: 17px;
line-height: 25px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
/* Accordions */
.accordionItem.open > div {
display: block;
}
.accordionItem h4,
.accordionItem h3 {
position: relative;
display: block;
background: #ffffff;
font-size: 18px;
padding: 12px 55px 12px 22px;
line-height: 24px;
outline: none;
cursor: pointer;
}
.accordionItem .accordionContent {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: -20px;
padding: 20px;
}
.accordionItem .heading-baskerville {
margin-top: 0px;
margin-bottom: 20px;
border: 1px solid #ccc;
position: relative;
display: block;
}
.accordionItem .trigger {
position: absolute;
right: 30px;
}
.accordionItem > div {
display: none;
}
/* *** Event Preview *** */
.tab-content .author-preview {
overflow: hidden;
}
/* Event Preview Image */
.tab-content .event-preview > a {
float: left;
margin: 0 40px 0 0;
}
.tab-content .event-preview > a img {
display: block;
}
/* Event Preview Details */
.event-preview-details {
padding-top: 10px;
overflow: hidden;
}
.event-preview-details .event-preview h4 {
margin: 0 0 2px 0;
font-family: Baskerville, serif;
font-size: 22px;
font-style: normal;
line-height: 1;
color: #000;
text-transform: none;
font-weight: normal;
}
/* Author Preview Details */
.author-preview-details {
position: relative;
min-height: 50px;
padding-right: 100px;
padding-left: 10px;
}
.author-preview-details .button {
position: absolute;
right: 0;
top: 0;
}
/* *** Video Wrapper *** */
/* Note: this technique requires all videos to be the same aspect ratio */
.video-wrapper,
.embed-youtube {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video-wrapper iframe,
.embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* *** Footer *** */
footer {
position: relative;
background: #363636;
z-index: 1;
}
.footer-body {
position: relative;
max-width: 1280px;
padding: 0 110px 18px 20px;
margin: 0 auto;
color: #fff;
overflow: hidden;
}
.touch .footer-body {
max-width: none;
}
/* Footer Columns */
.footer-col {
float: left;
width: 25%;
padding-top: 16px;
padding-left: 15px;
margin-bottom: 14px;
overflow: hidden;
}
.footer-col.footer-col-4 {
width: 33.33333%;
}
.footer-col:first-child {
padding-left: 0;
}
.footer-col.footer-col-social {
float: right;
width: 100px !important;
margin-right: -100px;
}
.footer-col.footer-col-social ul li a:hover {
border: none;
}
.footer-col.nav-col {
display: none;
}
.footer-col.footer-col-newsletter.nav-col {
display: block;
}
.footer-col.footer-col-newsletter > a {
display: none !important;
}
.footer-col h3 {
font-family: inherit;
font-size: 14px;
line-height: 18px;
color: #eee;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.footer-col h3 br {
display: none;
}
.footer-col ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
.footer-col ul li {
margin-bottom: 6px;
}
.footer-col ul li a,
.footer-col ul li .manage-cookies {
display: inline-block;
font-size: 13px;
line-height: 17px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.footer-col ul li a:hover,
.footer-col ul li .manage-cookies:hover {
text-decoration: underline;
}
/* Copyright */
.footer-body > small {
clear: both;
display: block;
font-size: 14px;
line-height: 16px;
color: #979797;
}
/* Newsletter signup */
.form-newsletter {
overflow: hidden;
}
.form-newsletter .input {
float: left;
clear: both;
margin-bottom: 6px;
border: none; /* who keeps deleting this line? */
color: #5c5c5c;
}
.form-newsletter label.input-error {
float: left;
width: 100%;
margin: -4px 0 12px;
}
.form-newsletter .button {
float: left;
clear: both;
}
/* Socials */
.socials a {
position: relative;
display: inline-block;
}
.socials a:before {
position: relative;
display: inline-block;
padding-right: 5px;
font-size: 16px;
vertical-align: middle;
}
.socials a.icon-email:before, .socials a.icon-twitter:before {
top: -1px;
}
.socials a.icon-tiktok:before {
content: "";
width: 17px;
height: 17px;
float: left;
background-image: url(../img/icons/icon-tiktok.svg);
background-position: top left;
background-repeat: no-repeat;
}
.socials a.icon-x:before {
content: "";
width: 17px;
height: 17px;
float: left;
background-image: url("https://cdn.waterstones.com/images/00336362-25x25.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 15px;
}
.book-image-thumbs {
padding: 0 20px;
max-width: 300px;
margin: 25px auto;
}
.book-image-thumbs .inner {
height: 72px;
overflow: hidden;
}
.book-image-thumbs .book-thumb {
padding: 0 4px;
}
.book-image-thumbs .book-thumb-inner {
border: 1px solid #c4c4c4;
cursor: pointer;
width: 72px;
}
.book-image-thumbs .book-thumb-inner img {
display: block;
height: 70px;
margin: auto;
}
.lt-ie9 #nav_basket .basket-count {
top: -2px;
}
header .header-basket #nav_basket .basket-count.basket-padding {
padding: 12px 4px;
}
.reserve-collect .icon-reserve-chevron {
margin-left: 2px;
}
/* *** CAROUSELS *** */
.carousel {
position: relative;
overflow: hidden;
}
.book-carousel {
padding-left: 40px;
padding-right: 40px;
}
.personalisation-carousel {
position: relative;
min-height: 140px;
overflow: hidden;
padding: 0 24px;
}
/* *** Wrapper *** */
.carousel .wrapper {
overflow: hidden;
}
.book-carousel .wrapper {
height: 228px;
}
.account-list-carousel .wrapper {
height: 225px;
}
.carousel-crop-end .wrapper {
margin: 0;
width: 100% !important;
}
.personalisation-carousel.carousel-crop-end .wrapper {
margin-left: -4px;
}
/* Carousel shift */
.no-touch .book-carousel .carousel-shift {
margin-left: -10px;
}
/* Wrapper shift */
.book-carousel .wrapper-shift {
position: relative;
overflow: hidden;
z-index: 1;
height: 100%;
}
.no-touch .book-carousel .wrapper-shift {
padding-left: 30px;
}
.no-touch .book-carousel .wrapper-shift:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 100%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
-webkit-transition: -webkit-transform 200ms;
transition: transform 200ms;
background: #fff;
overflow: hidden;
z-index: 2;
}
.book-carousel .wrapper.first-active .wrapper-shift:before {
display: none;
}
.no-touch .book-carousel .wrapper-shift:hover:before {
-webkit-transform: translate(-30px, 0);
-ms-transform: translate(-30px, 0);
transform: translate(-30px, 0);
z-index: 1;
}
.no-touch .book-carousel .wrapper.animating .wrapper-shift:hover:before {
-webkit-transform: none;
-ms-transform: none;
transform: none;
z-index: 2;
}
.lt-ie9 .book-carousel .wrapper-shift:before {
display: none !important;
}
/* *** Outer *** */
.personalisation-carousel-outer {
position: relative;
padding: 0 30px;
}
.personalisation-carousel-wrap {
position: relative;
overflow: hidden;
}
/* *** Inner *** */
.book-carousel .inner {
position: relative;
z-index: 1;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.personalisation-carousel .wrapper .inner {
font-size: 0;
white-space: nowrap;
overflow: hidden;
}
/* Item */
.carousel .inner > .item,
.carousel .inner > .book-thumb {
float: left;
}
.book-carousel .inner > .item {
position: relative;
height: 100%;
background: #fff;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: padding 200ms;
transition: padding 200ms;
white-space: nowrap;
z-index: 1;
}
.personalisation-carousel .item {
float: none !important;
display: inline-block;
vertical-align: top;
padding: 0 8px;
overflow: hidden;
position: relative;
}
.book-carousel .inner > .item.expanded + .item {
margin-left: 0 !important;
}
.book-carousel .inner > .item.expanded:hover {
padding-right: 0;
}
.author-book-carousel .inner > .item {
width: 178px;
height: 225px;
padding: 0 10px;
}
.no-touch .book-carousel .inner > .item.first-in-view:before {
content: "";
position: absolute;
left: -30px;
top: 0;
width: 30px;
height: 100%;
background: #fff;
overflow: hidden;
z-index: 1;
}
.lt-ie9 .book-carousel .inner > .item.first-in-view:before {
display: none !important;
}
/* *** Stuff inside item *** */
/* Expand Trigger */
.book-carousel .inner > .item .expand-trigger {
position: relative;
width: 90px;
height: 100%;
display: inline-block;
vertical-align: top; /* don't remove */
}
.book-carousel .inner > .item.expanded .expand-trigger {
width: auto;
}
.lt-ie9 .book-carousel .inner > .item.expanded .expand-trigger {
width: 140px;
}
.personalisation-carousel .item a {
display: inline-block;
}
/* Image Wrap */
.book-carousel .inner > .item .image-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 200ms;
transition: transform 200ms;
-webkit-transform: none;
-ms-transform: none;
transform: none;
z-index: 2;
}
.book-carousel .inner > .item:hover .image-wrap {
-webkit-transform: translate(-30px, 0);
-ms-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
.no-csstransforms .book-carousel .inner > .item:hover .image-wrap {
margin-left: -30px;
}
.book-carousel .inner > .item.no-hover:hover .image-wrap,
.book-carousel .inner > .item.expanded .image-wrap {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.no-csstransforms .book-carousel .inner > .item.no-hover:hover .image-wrap,
.no-csstransforms .book-carousel .inner > .item.expanded .image-wrap {
margin-left: 0;
}
/* Image */
.book-carousel .inner > .item img {
display: block;
max-height: 100%;
max-width: none;
width: auto;
height: auto;
margin: 0 auto;
position: relative;
z-index: 3;
}
.book-carousel .inner > .item img.image404 {
display: none;
}
.book-carousel .inner > .item img.image404 + .book-image-placeholder {
display: block;
height: 228px;
width: 150px;
background: #FFF url(../img/logo-decoration.png) no-repeat center bottom;
background-size: 90%;
}
.personalisation-carousel .item img {
width: auto;
height: 140px;
}
.personalisation-carousel .item .title {
font-size: 16px;
position: absolute;
top: 140px;
left: 0;
max-width: 100%;
white-space: normal;
padding: 4px 8px 0;
font-size: 15px;
}
/* Fade */
.book-carousel .inner > .item .fade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(36%, rgba(0, 0, 0, 0)), color-stop(100%, rgb(0, 0, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 36%, rgb(0, 0, 0) 100%);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 36%, rgb(0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 36%, rgb(0, 0, 0) 100%);
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
z-index: 3;
}
.book-carousel .inner > .item.expanded .fade,
.book-carousel .inner > .item.no-hover .fade {
opacity: 0;
}
.lt-ie9 .book-carousel .inner > .item .fade {
display: none !important;
}
.book-carousel .inner > .item.last .fade {
display: none;
}
/* *** Expand *** */
.book-carousel .inner > .item .expand {
display: none;
padding: 0 20px 0 30px;
width: 300px;
vertical-align: top;
white-space: normal;
}
.book-carousel .inner > .item.expanded .expand {
display: inline-block;
}
.book-carousel .inner > .item.expanded .expand h3 {
margin: 10px 0 4px;
font-size: 18px;
max-height: 44px;
overflow: hidden;
}
.book-carousel .inner > .item.expanded .expand .contributors {
font-size: 14px;
margin: 0 0 10px;
height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.book-carousel .inner > .item.expanded .expand .description {
height: 43px;
overflow: hidden;
margin: 5px 0;
}
/* Price Format */
.book-carousel .inner > .item.expanded .expand .price-format {
margin: 12px 0 10px;
}
.book-carousel .inner > .item.expanded .expand .price {
color: #000;
font-size: 20px;
}
/* Bullets */
.book-carousel .bullets {
margin-top: 20px;
text-align: center;
}
.book-carousel .bullet {
display: inline-block;
width: 36px;
height: 36px;
background: #f0f0f0;
text-align: center;
color: #8c8b8b;
font-family: Baskerville, serif;
line-height: 36px;
font-size: 20px;
}
.book-carousel .bullet ~ .bullet {
margin-left: 8px;
}
.book-carousel .bullet.bullet-gold {
background: #9e866b;
color: #fff;
}
.bullets .bullet {
display: inline-block;
width: 12px;
height: 12px;
background: #b4b4b4;
margin-left: 8px;
cursor: pointer;
}
.bullets {
text-align: right;
margin: 5px 0 0 0;
}
.bullets .bullet.active {
background: #9e866b;
}
/* Ribbons */
.bestseller-ribbon {
width: 36px;
height: 43px;
background: url(../img/ui/bestseller-ribbon.png) no-repeat right top;
position: absolute;
left: 10px;
top: -4px;
color: #464646;
text-align: center;
line-height: 43px;
font-family: Baskerville, serif;
font-size: 20px;
}
.bestseller-ribbon.bestseller-ribbon-gold {
background-position: left top;
color: #fff;
}
/* Buy buttons */
.book-carousel .basket-form .button {
width: 180px;
}
.book-carousel .basket-form .button ~ .button {
margin-top: 5px;
}
.book-carousel .cnc-box {
display: none;
margin-top: 5px;
}
.book-carousel .cnc-enabled .cnc-box {
display: block;
}
.book-carousel .cnc-enabled .button-reserve {
display: none;
}
.book-carousel .cnc-box .input {
width: 180px;
}
/* *** Carousel Controls *** */
.carousel-control {
position: absolute;
width: 17px;
height: 42px;
top: 50%;
margin-top: -21px;
right: 0;
cursor: pointer;
overflow: hidden;
}
.personalisation-carousel .carousel-control {
top: 50px;
margin-top: 0;
}
.carousel-control.prev {
left: 0;
}
.carousel-control.disabled {
visibility: hidden;
}
.carousel-control.inactive {
cursor: default;
}
.carousel .carousel-control.inactive {
opacity: 0.35;
}
.carousel-control:before {
display: block;
font-size: 50px;
line-height: 42px;
color: #9F9D9D;
text-align: center;
}
.carousel-control:not(.inactive):hover:before {
color: #336b75;
}
.carousel-control.carousel-control-small:before {
font-size: 28px;
}
.account-list-carousel .carousel-control {
position: absolute;
top: 50%;
margin-top: -21px;
right: 20px;
width: 17px;
height: 41px;
background: url(../img/ui/white-carousel-arrows.png) no-repeat 0 0;
cursor: pointer;
}
.account-list-carousel .carousel-control.prev {
background-position: 0 bottom;
left: 20px;
}
.personalisation-carousel-outer .carousel-control.next {
right: 0;
}
.personalisation-carousel-outer .carousel-control.prev {
left: 0;
}
/* *** Book Personalisations *** */
.book-personalisation {
padding-top: 50px;
margin-bottom: 40px;
}
/* *** Book preview titles *** */
.book-preview.book-detail .title {
position: relative;
display: block;
max-height: 48px;
font-family: Baskerville, serif;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #000;
text-decoration: none;
overflow: hidden;
}
.book-preview-grid-item .title {
display: block;
max-height: 46px;
font-family: Baskerville, serif;
font-size: 20px;
line-height: 23px;
color: #000;
}
.book-preview-list-item .title {
font-size: 24px;
line-height: 28px;
font-family: Baskerville, serif;
color: #000;
max-height: 56px;
overflow: hidden;
display: inline-block;
}
.book-preview-list-item .price-info {
float: right;
text-align: right;
padding-left: 60px;
position: relative;
z-index: 1;
top: 16px;
}
.book-preview-list-item .product-sticker {
margin-right: -30px;
position: relative;
z-index: 1;
}
/* Book Thumb */
.book-preview-grid-item .book-thumb-container {
position: relative;
width: 100%;
max-height: 200px;
text-align: center;
overflow: hidden;
}
.book-preview-grid-item .book-thumb {
display: block;
font-size: 0;
height: 200px;
overflow: hidden;
}
.book-preview-grid-item .book-image-wrap {
display: inline-block;
position: relative;
}
.book-preview-grid-item .book-thumb .image-wrap {
height: 100%;
position: relative;
display: inline-block;
width: 100%;
}
.book-preview-grid-item .book-thumb .image-wrap > a {
display: block;
height: 100%;
}
/* -------------------------------------------------------------------
// PRODUCT IMAGES
// -------------------------------------------------------------------
*/
/* Images which are max height 100%, centered horizontally */
.book-list-book .book-image img,
.ebook-download img {
display: block;
max-height: 100%;
max-width: none;
width: auto;
height: auto;
margin-left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.no-csstransforms .book-list-book .book-image img,
.no-csstransforms .ebook-download img {
margin: 0 auto;
}
/* Images which are max height 100%, not centered horizontally */
.replace-this-placeholder-class img {
display: block;
max-height: 100%;
max-width: none;
width: auto;
height: auto;
}
/* *** Full cover images *** */
/* Images which are in a fixed height container, are width 100%, and centered vertically */
/* note: the parent must have a known height and overflow hidden for this to work
*/
.replace-this-placeholder-class img {
position: relative;
top: 50%;
display: block;
max-width: none;
max-height: none;
width: 100%;
height: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.no-csstransforms .replace-this-placeholder-class img {
top: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: none; /* just in case */
-ms-transform: none;
transform: none;
}
/* Images which are max-height 100%, and centered horizonally and vertically */
/* note: the parent must have a known height and overflow hidden for this to work
*/
.book-preview-grid-item .book-thumb img {
position: relative;
top: 50%;
display: block;
max-height: 100%;
max-width: none;
width: auto;
height: auto;
margin-left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.no-csstransforms .book-preview-grid-item .book-thumb img {
top: auto;
margin: 0 auto;
-webkit-transform: none; /* just in case */
-ms-transform: none;
transform: none;
}
/* Images which are width 100%, and not centered vertically */
.events-result .event-preview img,
.book-box img,
.nav-dropdown-basket .product-image img,
.basket-product-image a img,
.book-list-item .book-list-image img {
display: block;
max-width: none;
max-height: none;
width: 100%;
height: auto;
}
.orders-content-col .product-image img {
width: 70px;
}
.orders-content-col .success.section {
color: #5c5c5c;
font-weight: bold;
}
.order-books .product-image img {
display: block;
max-width: none;
max-height: none;
}
.book-preview-grid-item {
padding: 0 10px 20px 10px;
}
.book-preview-grid-item.span4:nth-child(3n+1) {
padding-left: 0;
}
.book-preview-grid-item.span4:nth-child(3n) {
padding-right: 0;
}
.book-preview-grid-item.cnc-enabled .hover-layer .hover-item.item-cnc {
display: block;
bottom: 0;
}
.book-preview-grid-item .title-wrap {
overflow: hidden;
position: relative;
}
.book-preview-grid-item .author {
position: relative;
display: block;
margin-top: 1px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.book-preview-grid-item .info-wrap {
height: 180px;
padding: 18px 18px 0 18px;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
overflow: hidden;
}
.book-preview-grid-item .title-break {
float: right;
width: 20px;
height: 20px;
margin-right: -18px;
}
.book-preview-grid-item .book-bottom {
position: relative;
}
.book-preview-grid-item .hover-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.book-preview-grid-item .hover-layer .hover-item {
position: absolute;
left: 0;
width: 100%;
transition: bottom 150ms ease-out;
}
.book-preview-grid-item .hover-layer .hover-item.item-buttons {
bottom: -100px;
background: #fff;
}
.book-preview-grid-item .hover-layer .hover-item.item-cnc {
display: none;
}
.book-preview-grid-item .hover-layer .bottom {
text-align: center;
width: 100%;
height: 0;
}
html.touch .book-preview-grid-item .image-wrap.focussed .hover-layer .hover-item,
html.no-touch .book-preview-grid-item:hover .hover-layer .hover-item {
bottom: 0;
}
.title-wrap a[href]:hover {
color: #000;
}
.book-preview.cnc-enabled .basket-form {
display: none;
}
.book-preview .book-image .book-thumb {
width: 100%;
}
.book-preview .book-price .price,
.book-preview .book-price .price-rrp {
font-family: "Source Sans Pro", Arial, sans-serif;
display: inline-block;
margin: 6px 10px 0 0;
}
.book-preview .book-price .price {
color: #000;
font-weight: bold;
margin-right: 12px;
}
.book-preview .book-price .format {
vertical-align: top;
margin: 6px 0 0;
display: block;
color: #2f2f2f;
font-weight: normal;
line-height: 14px;
}
.book-preview .hover-layer .cnc-box {
padding: 10px 20px;
}
.book-preview .hover-layer .cnc-box.cnc-box-shop {
background: #9E866B !important;
}
.book-preview .hover-layer .cnc-box .field {
position: relative;
padding-right: 50px;
}
.book-preview .hover-layer .cnc-box .button {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
.search-results .book-preview .book-price .price,
.search-results .book-preview .book-price .price-rrp {
margin: 0;
}
.swiper-slide.book-preview .book-price .format {
margin-right: 0;
}
.book-preview-grid-item .hover-layer .pre-add,
.book-preview-grid-item .hover-layer .post-add,
.book-preview-grid-item .hover-layer .cnc-box {
background: #fff;
}
.book-preview-grid-item.cnc-enabled .hover-layer .cnc-box {
background: #E2E2E2;
top: -55px;
}
.book-preview-grid-item .cnc-box .input {
width: 100%;
}
/* Single book preview elements (single_book_block.tpl) */
.single-book-prev.book-preview-grid-item {
padding: 0;
}
.single-book-prev.book-preview-grid-item .info-wrap {
height: 140px;
padding: 18px 0 0;
}
.author-after {
position: relative;
left: -3px;
width: 2px;
display: inline-block;
}
.book-preview-list-item .field {
display: none;
background: #e2e2e2;
padding: 8px;
}
.book-preview-list-item.cnc-enabled .field {
display: block;
}
.book-preview-list-item .detail-expand .button {
margin-bottom: 5px;
}
.book-preview-list-item .field .right.floater {
position: relative;
margin-left: -2px;
}
.book-preview-grid-item .hover-layer .hover-inner {
padding: 0 18px 0 18px;
}
.book-preview-grid-item .hover-layer .button {
margin-top: 5px;
}
.book-preview-grid-item .hover-layer .book-description {
margin: 0 0 16px;
font-size: 14px;
line-height: 17px;
max-height: 51px;
overflow: hidden;
}
.book-preview-list-item.cnc-enabled .bottom > form {
display: none;
}
.book-preview-list-item.book-preview .book-price .price {
font-size: 22px;
}
.book-preview-list-item.book-preview .book-price .price-rrp {
font-size: 22px;
margin-bottom: -14px;
}
.book-preview-list-item.book-preview .format {
font-size: 12px;
}
.book-preview-list-item .book-thumb {
position: relative;
overflow: hidden;
}
.view-switcher {
float: right;
margin-bottom: -4px;
margin-left: 25px;
}
.view-toggle {
position: relative;
display: inline-block;
width: 46px;
height: 44px;
line-height: 44px;
border: 1px solid #d1d1d1;
text-decoration: none !important;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.view-toggle:hover {
background: #336b75;
border-color: #336b75;
}
.view-toggle.active {
background: #e2e2e2;
border-color: #d1d1d1;
cursor: default;
pointer-events: none;
}
.view-toggle:before {
display: block;
font-size: 32px;
color: #444;
}
.view-toggle:hover:before {
color: #fff;
}
.view-toggle.active:before {
color: #444;
}
.search-title {
display: inline-block;
margin: 0;
font-size: 20px;
margin: 0 0 0 22px;
line-height: 43px;
vertical-align: top;
}
.search-title .term {
text-transform: none;
}
.search-count {
font-size: 19px;
line-height: 43px;
margin-left: 12px;
}
.spellchecked .suggestion {
font-weight: 700;
text-decoration: none;
padding: 6px 6px;
display: inline-block;
}
.filters-title {
color: #333;
text-transform: uppercase;
font-size: 17px;
display: block;
border: 1px solid #d1d1d1;
border-left: none;
border-right: none;
padding: 16px 0;
}
.filters-column .clear-filters {
margin: 10px 0;
display: inline-block;
}
.filter-header {
position: relative;
}
.search-sidebar.active .filter-header {
cursor: pointer;
}
.filter-header:after {
display: none;
position: absolute;
right: 10px;
top: 50%;
margin-top: -11px;
font-size: 20px;
}
.search-sidebar.active .filter-header:after {
display: block;
}
.slide-content .inner {
padding: 5px 0 0 8px;
}
.slide-content ul {
list-style: none;
margin-left: 10px;
margin-bottom: 0;
}
.slide-content .inner > ul {
margin: 0 0 -5px 0;
}
.filter-content a.js-filter-content-toggle {
text-decoration: underline;
}
.filter-content a.js-filter-content-toggle:hover {
text-decoration: none;
}
.filter-content li .ws-checkbox-outer {
margin-right: 10px;
}
.filter-content .inner > ul {
margin-bottom: 0;
}
.filter-content .inner li .ws-checkable-outer {
position: absolute;
left: 0;
top: 4px;
}
.filter-content .inner .selected {
font-weight: bold;
color: #5c5c5c;
}
.filter-content .star-rating {
margin-left: -7px;
cursor: pointer;
}
.search-sidebar.active .filter-content a.js-filter-content-toggle {
display: none;
}
.slide-content .inner li {
position: relative;
margin-bottom: 3px;
}
.slide-content a:not(.star-rating) {
padding: 3px 0;
font-size: 15px;
font-weight: 500;
line-height: 17px;
text-decoration: none;
}
.slide-content a:not(.star-rating):hover {
text-decoration: underline;
}
.slide-content li a:not(.star-rating) {
display: inline-block;
font-style: italic;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}
#help-layout h1 {
margin-top: 36px;
}
#help-layout strong {
color: #5c5c5c;
}
/* Book preview list item */
.book-preview-list-item {
margin-bottom: 30px;
padding: 0 0 30px 0;
border-bottom: 1px solid #e6e6e6;
/*overflow: hidden;*/
}
.book-preview-list-item ul {
list-style: none;
margin: 0;
font-size: 12px;
}
.book-preview-list-item .detail-expand .info {
padding: 0 23px 20px;
}
.book-preview-list-item .bottom {
position: relative;
padding-top: 5px;
background: #fff;
}
.book-preview-list-item .post-add {
display: none;
}
.book-preview-list-item .bottom .fade,
.book-preview.book-preview-list-item .book-description:after {
position: absolute;
width: 100%;
height: 10px;
top: -10px;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgb(255, 255, 255)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ffffff", GradientType=0);
}
.book-preview.book-preview-list-item .book-description:after {
content: "";
top: auto;
left: 0;
bottom: 0;
}
.book-preview.book-preview-list-item .book-description {
position: relative;
height: 105px;
margin: 10px 0 0;
font-size: 15px;
line-height: 22px;
color: #777;
overflow: hidden;
}
.book-preview-list-item .book-image img {
display: block;
}
.book-thumb > a {
display: block;
}
.book-preview-list-item .detail-expand {
position: absolute;
bottom: -100%;
width: 100%;
clear: both;
padding-left: 16.66667%;
-webkit-transition: bottom 150ms ease-out;
transition: bottom 150ms ease-out;
}
html.touch .book-preview-list-item.focussed .detail-expand,
html.no-touch .book-preview-list-item:hover .detail-expand,
.book-preview-list-item.cnc-enabled .detail-expand {
bottom: 0;
}
.book-preview.book-preview-list-item .author {
position: relative;
display: block;
max-width: 100%;
font-size: 16px;
line-height: 19px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.book-preview.book-preview-list-item .title-container {
position: relative;
display: block;
margin-bottom: 0;
}
.book-preview-list-item .inner .wrap {
overflow: hidden;
/*height: 180px;*/
}
.search-bottom {
float: right !important;
}
.autocomplete-popout {
background: #fff;
border: 1px solid #eaeff2;
width: 100%;
display: none;
}
.autocomplete-popout.active {
display: block;
}
.autocomplete-popout ul {
margin: 0;
list-style: none;
}
.autocomplete-popout .inner-list {
text-align: left;
}
.autocomplete-popout .inner-list li {
padding: 6px 6px;
-webkit-transition: background 100ms;
transition: background 100ms;
cursor: pointer;
}
.autocomplete-popout .inner-list li:hover {
background: #efefef;
}
.autocomplete-popout .inner-list li.active {
background: #efefef;
}
.autocomplete-popout .inner-list li ~ li {
border-top: 1px solid #eaeff2;
}
.autocomplete-popout .inner-list li .title {
font-size: 16px;
}
.autocomplete-popout .inner-list li .text-gold {
overflow: hidden;
text-overflow: ellipsis;
}
.autocomplete-popout .inner-list li .subtitle {
font-size: 13px;
}
.autocomplete-popout .inner-list li .format {
font-style: italic;
font-size: 12px;
color: #545454;
display: inline-block;
margin-left: 4px;
}
.autocomplete-popout .inner-list .item:hover {
background: #FbFbFb;
}
.autocomplete-popout .inner-list strong,
.autocomplete-popout .inner-list b,
.autocomplete-popout .inner-list .book-price .price {
color: #5c5c5c;
}
.autocomplete-popout .heading {
background: #E2E2E2;
font-size: 14px;
text-transform: uppercase;
padding: 3px 10px;
display: block;
color: #666;
font-weight: 500;
}
.autocomplete-popout .inner-list li .title,
.autocomplete-popout .autocomplete-popout .inner-list li .subtitle {
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.book-image-outer {
font-size: 0;
}
.book-detail .book-image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
}
.book-detail .book-image-wrap ul.inner {
display: none;
}
.book-detail .book-image-wrap .bullets {
display: none;
}
.book-image-main > img {
display: block;
max-height: 400px;
}
.book-image-main > img.js-open-modal {
cursor: pointer;
}
.book-image-main > .inner {
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.book-image-main > .inner > li {
display: block;
width: 100%;
font-size: 0;
}
.page-curl {
position: absolute;
top: 0;
right: 0;
background: url(../img/ui/page-curl.png) no-repeat;
width: 71px;
height: 61px;
}
.promo-sticker {
position: absolute;
top: 10px;
left: 10px;
width: 70px;
height: 70px;
}
.nav-popout {
position: absolute;
background: #fff;
font-size: 15px;
z-index: 100;
margin-top: 40px;
border: 1px solid #DEDEDE;
border-top: none;
padding: 20px 17px;
display: none;
width: 960px;
}
.nav-popout.active {
display: block;
}
.nav-popout a {
line-height: 0;
height: 20px;
margin: 3px 0;
color: #545454;
white-space: nowrap;
}
.nav-popout ul {
list-style: none;
margin: 0;
}
label.checkbox-label.mail-icon {
display: flex;
align-items: center;
padding: 10px 230px 20px 0;
background: url(../img/mail-icon.png);
background-size: 160px;
background-position: 90% center;
background-repeat: no-repeat;
font-family: Baskerville, serif;
line-height: 18px !important;
}
label.checkbox-label.mail-icon .ws-checkable-outer.ws-checkbox-outer {
min-width: 29px !important;
margin-right: 15px;
}
label.checkbox-label.mail-icon + div {
font-size: 13px;
margin-bottom: 20px;
padding-left: 45px;
margin-top: -12px;
}
.register-finish .button {
margin-top: 28px;
}
.basket-checkout-payment-panel .ws-select-outer {
max-width: none;
}
.vertical-form-container .input, .vertical-form-container .ws-select-outer {
margin-bottom: 10px;
}
html.safari.account-area,
html.safari.account-area body,
html.safari.registration-page,
html.safari.registration-page body {
-webkit-overflow-scrolling: auto !important;
}
.header-actions form {
float: right;
margin-right: 9px;
}
.blog-preview {
margin-bottom: 30px;
}
.blog-preview > a {
text-decoration: none;
}
.blog-preview > a h2:hover {
text-decoration: underline;
}
.blog-preview img {
display: block;
}
.blog-preview h2 {
font-family: Baskerville, serif;
font-style: italic;
font-size: 23px;
margin: 0;
line-height: 1;
letter-spacing: 0.03em;
text-align: left;
padding: 15px 10px 0;
}
.blog-preview-black .blog-preview-content h2,
.blog-preview-black .blog-preview-content p,
.blog-preview-teal .blog-preview-content h2,
.blog-preview-teal .blog-preview-content p,
.blog-preview-gold .blog-preview-content h2,
.blog-preview-gold .blog-preview-content p {
color: #fff;
}
.blog-preview-content {
padding: 16px 10px 30px 10px;
overflow: hidden;
text-align: left;
}
.blog-preview-content:after {
content: "";
position: absolute;
left: 35%;
bottom: 0;
width: 30%;
height: 1px;
background: #000;
}
.blog-preview-content p {
margin: 0;
padding-right: 25px;
line-height: 1.5;
color: #000;
font-size: 16px;
overflow: hidden;
}
.blog-preview-content p:empty {
display: none;
}
.multi-blogs {
margin-bottom: 20px;
margin-top: 10px;
}
.multi-blogs .blog-preview .inner {
position: relative;
}
.multi-blogs .blog-preview a.dot-link {
bottom: -3px;
right: -2px;
}
.multi-blogs .blog-preview-content .inner {
padding-bottom: 8px;
}
@media only screen and (max-width: 640px) {
.multi-blogs .blog-slider.swiper .swiper-slide-next {
opacity: 0;
}
}
.blog-preview-black .blog-preview-content p {
color: #b8b8b8;
}
.blog-component p {
font-family: Baskerville, serif;
padding-right: 20px;
}
.blog-component a.dot-link,
.blog-preview-content a.dot-link {
position: absolute;
bottom: 26px;
right: 18px;
width: 25px;
height: 25px;
background-image: url(../img/dot.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.blog-component a.dot-link {
bottom: 6px;
right: 6px;
}
.blog-component h2 {
font-family: Baskerville, serif;
font-size: 24px;
font-style: italic;
}
.search-results-categories .blog-component a.link-invert:before {
content: "Blog";
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 24px;
text-transform: uppercase;
font-style: normal;
font-weight: 300;
padding-right: 10px;
letter-spacing: 1px;
}
.preview-brick .blog-preview .inner {
position: static;
}
.blog-preview-gold .blog-preview-content {
background: #9e866b;
}
.blog-preview-teal .blog-preview-content {
background: #336b75;
}
.blog-preview-black .blog-preview-content {
background: #282828;
}
.load-more-forward {
padding-top: 14px;
}
.load-more-previous {
padding-bottom: 24px;
}
.endless-loader .loader {
width: 14px;
height: 14px;
display: inline-block;
margin: 0 3px;
border-radius: 100px;
}
.endless-loader .loader-one {
background: #999;
}
.endless-loader .loader-two {
background: #666;
}
.endless-loader .loader-three {
background: #333;
}
.author-description-wrapper > h1 {
margin-bottom: 0 !important;
}
.blog-detail > h2,
.blog-detail > h1,
.blog-detail .author-description-wrapper > h1 {
font-size: 23px;
line-height: 1;
margin-top: 19px;
}
.blog-detail > h1 {
font-style: italic;
margin-bottom: 30px;
letter-spacing: 0.03em;
font-family: Baskerville, serif;
text-transform: none;
}
.blog-detail p.p-large,
.blog-detail .content-text,
.blog-detail .content-text p {
line-height: 1.5;
font-size: 16px;
letter-spacing: 0.03em;
}
.blog-detail .meta {
z-index: 2;
position: relative;
}
.blog-detail .article-desc {
line-height: 1.5;
font-size: 16px;
}
.blog-detail .article-desc > div {
margin: 10px 0;
}
.blog-preview h2 a:hover {
color: inherit;
}
.page-detail-actions {
/*position: relative;*/
display: block;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.shop-detail .page-detail-actions {
border-top: 1px solid #ddd;
border-bottom: none;
margin-bottom: 25px;
}
.page-detail-actions h2 {
display: inline-block;
vertical-align: middle;
margin: 0 0 10px 0 !important;
}
.blog-detail .page-detail-actions h2 {
font-size: 30px;
line-height: 32px;
padding-top: 2px;
}
.author-description-wrapper {
position: relative;
}
.touch .author-description-wrapper {
padding-bottom: 59px;
}
.no-touch .author-description-wrapper h2 + .page-detail-actions {
margin-top: -40px;
}
.touch .author-description-wrapper .action-share-container {
position: absolute;
right: 0;
bottom: 20px;
}
.email-share {
position: relative;
clear: both;
}
.related-article {
display: table;
width: 100%;
height: 90px;
margin-bottom: 18px;
background: #eee;
font-size: 13px;
}
.related-article a:hover {
color: #000;
}
.related-article .title {
display: table-cell;
padding: 10px 45px 10px 30px;
vertical-align: middle;
}
.related-article-image {
display: table-cell;
width: 70px;
height: 100%;
padding: 10px 10px 10px 0;
vertical-align: middle;
text-align: right;
}
.related-article-image img {
display: inline-block;
vertical-align: top;
}
.blog-detail-side .header-actions {
height: 70px;
}
.comments-new {
padding: 15px;
background: #eee;
margin: 15px 0;
}
.comments-new button {
float: right;
}
.comments-list-inner {
margin-bottom: 20px;
}
.comment-outer p {
margin-top: 0;
overflow: hidden;
}
.comment-outer .author {
display: block;
margin: 0 0 5px 0;
font-size: 14px;
line-height: 1;
color: #3a3a3a;
text-transform: uppercase;
}
.comment-new-reply {
margin-bottom: 20px;
}
.comment-new-reply h4 {
margin-top: 10px;
margin-bottom: 7px;
}
.comment-new-reply textarea {
margin-bottom: 10px;
}
.comment-bottom {
position: relative;
display: inline-block;
width: 100%;
vertical-align: top;
margin-top: 10px;
}
.comment-bottom > div {
float: left;
margin-bottom: 10px;
font-size: 14px;
}
.comment-bottom > span {
display: block;
clear: both;
}
.comment-bottom > div:before {
content: "/";
display: inline-block;
font-size: 14px;
color: #d0d0d0;
margin: 0 5px;
}
.comment-bottom div:first-child:before {
display: none;
}
/* Comment Vote */
.comment-vote-container {
margin-top: -2px;
}
.comment-vote {
display: inline-block;
width: 21px;
height: 21px;
background: #C2C2C2;
margin-top: -2px;
text-indent: -1000px;
text-decoration: none !important;
cursor: pointer;
vertical-align: top;
overflow: hidden;
}
.comment-bottom .comment-vote {
margin-left: 6px;
}
.comment-vote:hover {
background: #336b75;
}
.comment-vote:before {
display: block;
font-size: 14px;
line-height: 21px;
color: #fff;
text-align: center;
}
.comment-vote.vote-down:before {
line-height: 23px;
}
.comment-vote.voted {
background: #727272;
/*cursor: default;*/
}
.comment-bottom .vote-count {
margin-left: 3px;
color: #5c5c5c;
}
.comments-list {
margin: 15px 0 !important;
border-left: none;
border-right: none;
}
.comments-list button.js-open-modal {
position: absolute;
right: 0;
top: 12px;
}
.blog-detail .comments-list {
border-top: 1px solid #c8c8c8;
}
.comment-outer {
padding-top: 15px;
border-bottom: 1px solid #c8c8c8;
overflow: hidden;
padding-bottom: 5px;
}
.comments-new {
/*margin-top: 26px;*/
}
.comments-new h4 {
margin-top: 0;
margin-bottom: 7px;
}
.comments-new p.error {
margin-top: 0;
}
.review-replies-content {
margin-bottom: 15px;
border-top: 1px solid #c8c8c8;
}
.avatar-image {
width: 60px;
height: 60px;
background: url(../img/ui/profile-image.png);
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
font: 0/0 a;
text-shadow: none;
color: transparent;
text-indent: -999em;
}
.endless-loader {
display: none;
}
.endless-loader.active {
display: block;
}
.load-more-trigger {
font-size: 21px;
cursor: pointer;
display: inline-block;
padding: 0 20px;
}
.template {
display: none;
}
.blog-grid {
margin: 20px 0;
display: flex;
flex-wrap: wrap;
}
.comment-replies {
height: 0;
min-height: 0 !important;
overflow: hidden;
}
.comment-replies.active {
height: auto;
}
.comment-replies > div:first-child {
border-top: 1px solid #c8c8c8;
}
.review-rate {
font-size: 18px;
}
/* Login Box */
.login-box {
padding: 12px;
background: #e2e2e2;
}
.login-box .inner {
width: 100%;
max-width: 420px;
margin: 0 auto;
background: #fff;
}
.login-box .inner .login-top {
padding: 40px 45px;
}
.login-box .inner .login-top h2 {
margin: 0 0 20px;
font-size: 25px;
font-style: italic;
}
.login-box .inner .login-top .input {
width: 100%;
margin-bottom: 10px;
}
.login-box .inner .login-top .span6 {
margin-top: 15px;
font-size: 14px;
color: #5c5c5c;
}
.login-box .inner .login-top .span6 label {
margin-top: 0;
line-height: 16px;
}
.login-box .inner .login-top .span6 label * {
vertical-align: top;
}
.login-bottom {
border-top: 1px solid #e2e2e2;
padding: 35px 15px;
color: #919191;
}
.login-box label.checkbox-label {
margin-bottom: 10px;
}
/* Signin page */
.login-container .button {
width: 178px;
}
.review-rating {
font-size: 18px;
line-height: 20px;
}
.review-rate span {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.review-meta {
display: block;
overflow: hidden;
vertical-align: top;
padding-bottom: 5px;
}
.reviews-header-top {
margin-bottom: 10px;
}
.review-header-bottom {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
min-height: 39px;
padding-right: 60px;
border-bottom: 1px solid #c8c8c8;
}
.touch .review-header-bottom {
position: static;
}
.review-content {
margin: 10px 0 18px;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.review-content .review-content-fields {
display: none;
flex-grow: 1;
}
.review-content .review-content-fields .review_title {
width: 100%;
font-style: italic;
font-family: Baskerville, serif;
font-size: 24px !important;
}
.review-content .review-content-fields .review_body {
width: 100%;
height: 100px !important;
}
.review-content .review-buttons {
margin-left: 20px;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.review-content .review-buttons .review_save {
display: none;
}
.review-content .review-buttons.show-save {
align-items: flex-end;
}
.review-content .review-buttons.show-save .review_save {
display: block;
}
.review-content .review-buttons.show-save .review_edit {
display: none;
}
.display_review_date {
padding-right: 50px;
}
.display_review_date.display_review_status {
font-weight: bold;
color: #666666;
}
.reviews-list-item {
position: relative;
display: inline-block;
width: 100%;
vertical-align: top;
border-bottom: 4px solid #c8c8c8;
margin-bottom: 30px;
padding-bottom: 18px;
}
.reviews-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.reviews-list-item h2 {
margin: 0;
font-style: italic;
line-height: 32px;
word-wrap: break-word;
}
.reviews-list-item .user-picture {
margin-right: 18px;
max-width: 60px;
}
.review-list-item-main {
position: relative;
}
.review-list-item-main .review-rating > * {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.review-list-item-main .review-image {
max-width: 45px;
max-height: 70px;
float: left;
margin-right: 8px;
margin-bottom: 10px;
}
.touch .review-list-item-main {
padding-bottom: 25px;
}
.touch .comment-bottom > div,
.touch .comment-bottom > span {
min-width: 40%;
}
.review-replies {
height: 0;
overflow: hidden;
}
.review-replies.active {
height: auto;
}
/*.review-replies .comment-outer {
padding-bottom: 30px;
}
*/
.review-reply {
margin-bottom: 20px;
}
.review-comment-success .title {
font-size: 18px;
text-align: center;
}
.review-comment-success {
padding-top: 30px;
display: none;
}
.swiper.in_review_page,
.slick_carousel.books_carousel.slick_reviews_page {
margin-bottom: 30px;
}
/*.review-recommended .book-preview-grid-item .book-thumb-container {
height: 150px;
}
.review-recommended .book-preview-grid-item .book-thumb img {
height: 150px;
}
.review-recommended .book-preview-grid-item .info-wrap {
padding-left: 0;
padding-right: 0;
}*/
.review-rec-books .book-preview-grid-item .remove-rec-xbutton {
height: 20px;
background: url("../img/ui/close-039A99.png") right no-repeat;
cursor: pointer;
margin-left: 90%;
}
.review-rec-books .book-preview-grid-item .remove-rec-xbutton:hover {
background-image: url("../img/ui/close-373737.png");
}
.login-modal {
display: none;
}
#simplemodal-overlay {
background: #000;
}
.anchor-fix:before {
position: relative;
content: "";
display: block;
height: 100px;
margin: -100px 0 0 0;
z-index: -1;
}
.first-click-overlay {
cursor: pointer;
}
.focussed .first-click-overlay,
html.no-touch .first-click-overlay {
display: none;
}
.book-preview .image-container img {
max-width: 100%;
max-height: 100%;
}
.reviews-sidecol .order-form {
margin-bottom: 10px;
}
.reviews-sidecol .ws-select-outer,
.reviews-list .ws-select-outer {
max-width: none;
}
.reviews-sidecol .add-basket-form .button {
float: right;
width: 160px;
padding: 0;
}
.reviews-sidecol .add-basket-form .post-add {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
.reviews-sidecol .add-basket-form .post-add .button {
float: none;
}
.reviews-sidecol .add-basket-form .post-add .button-container .button {
margin-bottom: 0;
margin-top: 10px;
}
.reviews-sidecol .book-preview-side .image-container {
background: #ffffff;
border: 1px solid #ddd;
border-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.reviews-sidecol.book-preview-side .contributors {
display: inline-block;
max-width: calc(100% - 72px);
}
.book-preview.book-preview-side .book-info .title {
font-size: 25px;
line-height: 22px;
max-height: 60px;
margin-bottom: 6px;
}
.book-preview.book-preview-side .book-info {
padding: 25px 15px;
border: 1px solid #ddd;
border-top: none;
margin: 0;
}
.book-preview-side .book-info .contributors a {
font-size: 18px;
}
.book-preview-side .price:not(.book-info) > div {
display: inline-flex;
align-items: center;
}
.reviews-trigger {
margin-right: 11px;
}
.book-list-book .reviews-trigger {
margin-left: 6px;
line-height: 20px;
color: #6b6b6b;
vertical-align: top;
}
.book-preview-side .price {
padding: 15px;
border: 1px solid #DDD;
border-top: none;
line-height: 35px;
overflow: hidden;
}
.book-preview-side .price input {
float: left;
width: 34px;
text-align: center;
}
.book-preview-side .price label {
float: left;
margin: 0 8px 0 0;
font-size: 15px;
color: #444;
}
.book-preview-side .price .input {
float: left;
width: 36px;
text-align: center;
color: #5c5c5c;
}
.book-preview-side .price .price-value {
float: right;
display: inline-block;
vertical-align: middle;
font-size: 25px;
line-height: 1;
color: #262626;
}
.book-preview-side .price-value b {
display: block;
}
.book-preview-side .add-basket {
padding: 15px;
border: 1px solid #DDD;
border-top: none;
}
.blog-detail .content-text img.alignleft,
.blog-detail .content-text img.alignright,
.blog-detail .content-text img.aligncenter {
margin-bottom: 1.625em;
}
.blog-detail .content-text .alignleft {
display: inline;
float: left;
margin-right: 1.625em;
}
.blog-detail .content-text .alignright {
display: inline;
float: right;
margin-left: 1.625em;
}
.blog-detail .content-text .aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.blog-detail .content-text .aligncenter {
clear: both;
margin-left: auto;
margin-right: auto;
display: block;
}
.blog-detail .wp-caption .wp-caption-text {
margin-top: 0;
font-weight: 600;
}
.blog-detail .wp-caption {
margin: 12px 0;
}
.blog-detail p.pullquote-right {
float: right;
width: 200px;
margin: 5px 0 20px 40px;
padding: 20px 0;
border-top: 5px solid #111;
border-bottom: 5px solid #111;
font-size: 22px;
font-weight: 700;
line-height: 25px;
color: #111;
}
.header-actions .ws-select-outer {
min-width: 220px;
}
/* Find Shops */
.find-shops {
float: right;
padding: 15px 0 20px;
width: 400px;
}
h1.shop-finder {
float: left;
}
@media only screen and (max-width: 640px) {
.js-location-container .button {
height: 44px;
}
}
.touch .find-shops {
margin-bottom: 0;
}
.find-shops .prompt {
float: left;
margin: 0 0 0 -328px;
padding-left: 12px;
padding-top: 10px;
padding-bottom: 10px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 24px;
line-height: 1;
color: #b0afaf;
text-transform: uppercase;
}
.find-shops .other-filters {
position: relative;
float: right;
width: 100%;
max-width: 450px;
}
.find-shops .input {
float: left;
width: 100%;
margin: 0;
border-right: none !important;
}
.find-shops button.button {
float: right;
}
.find-shops .open-map-button {
margin-top: 8px;
}
.find-shops .other-filters .ws-select-outer {
display: block;
max-width: none;
}
/* *** Shops Map *** */
.shops-map {
height: 405px;
clear: both;
}
/* Open map button */
.open-map-button,
.close-map-button {
display: none;
width: 100%;
}
.touch .open-map-button {
display: block;
margin-top: 8px;
}
.close-map-button.active {
display: block;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 2;
}
.close-map-button:hover,
.close-map-button:active {
opacity: 1;
}
.region-map-point {
position: absolute;
background: #336b75;
background: rgba(0, 164, 154, 0.38);
border-radius: 1024px;
padding: 1%;
padding: 10px;
}
.region-map-point-marker {
background: #336b75;
width: 100%;
height: 100%;
border-radius: 1024px;
color: #fff;
text-align: center;
line-height: 60px;
font-size: 29px;
font-style: italic;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
}
.shops-directory .index,
.a-z-index {
border-bottom: 1px solid #000;
font-size: 20px;
text-decoration: none;
padding: 15px 0 30px;
}
.shops-directory .index a,
.a-z-index a {
display: inline-block;
vertical-align: middle;
margin: 0 1px;
width: 26px;
height: 26px;
line-height: 26px;
text-decoration: none;
}
.shops-directory .index a:hover, .shops-directory .index a.active, .a-z-index a:hover, .a-z-index a.active {
background: #336b75;
color: #fff;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.shop-item:nth-child(odd) {
clear: left;
}
.shop-item:first-child .inner, .shop-item:first-child + .shop-item .inner {
border-top: none;
}
.shop-item.reserve-item .inner {
height: auto;
min-height: 0 !important;
}
.shop-item.disabled .collect-select {
display: none;
}
.shop-item a.buy-online {
position: relative;
color: #5c5c5c;
z-index: 1;
}
.shop-item a.buy-online:hover {
color: #5c5c5c;
text-decoration: none;
}
.shop-item .inner {
min-height: 80px;
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid #c8c8c8;
overflow: hidden;
}
.shop-item .inner .title {
display: inline-block;
font-family: Baskerville, serif;
font-size: 20px;
line-height: 22px;
color: #000;
}
.shop-item .inner .shop-thumb {
position: relative;
float: left;
margin-right: 20px;
}
.shop-item .inner .shop-thumb .shop-thumb {
display: block;
}
.shop-item .inner .info-wrap {
overflow: hidden;
}
.shop-item .inner .shop-address,
.shop-item .inner .distance {
display: block;
font-size: 16px;
line-height: 20px;
}
.shop-item .inner .distance a {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
}
.shop-item .inner .opentime {
display: inline-block;
font-weight: bold;
color: #5c5c5c;
margin-top: 10px;
}
.shop-item .info-wrap a {
text-decoration: none;
}
.shop-item .perk-list {
position: relative;
float: left;
margin-right: 10px;
z-index: 1;
}
.shop-item .map-marker {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -34px;
}
.shop-item .perk-list li {
padding-left: 0;
padding-right: 0;
}
.main-page .heading-underline + .shop-item .inner {
border-top: none !important;
}
.shops-directory-list .shop-item:last-child .inner {
padding-bottom: 0;
}
.shops-search-list .shop-item .inner {
height: auto;
}
.dashboard-shop .shop-item .inner {
padding: 0;
margin: 0;
border: none;
}
.collect-search-list .shop-item .stock {
display: block;
margin-top: 10px;
}
.map {
position: relative;
}
.touch .map:not(.mobile-app-map) {
position: fixed !important;
left: -100%;
top: 92px;
bottom: 44px;
width: 100%;
height: auto !important;
background: rgb(229, 227, 223);
z-index: -1;
}
.touch .map:not(.mobile-app-map).loading, .touch .map:not(.mobile-app-map).active {
left: 0;
z-index: 500;
}
.touch .map:not(.mobile-app-map).active > div {
opacity: 1;
}
.touch .map:not(.mobile-app-map) > div {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.shops-directory {
margin-bottom: 32px;
}
.shops-directory.nearest-bookshops {
margin-bottom: 0;
}
.shop-detail > h2 {
margin-top: 0;
}
.shop-detail-feature {
position: relative;
padding: 60px 55px;
margin-bottom: 30px;
background: url(../img/shop-detail-feature.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
text-align: center;
font-size: 15px;
}
.shop-detail-feature .open-today > div:nth-child(1) {
font-weight: 400;
}
.shop-detail-feature .opening-times {
display: flex;
flex-direction: column;
}
.shop-detail-feature .opening-times > div {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.shop-detail-feature .opening-times > div:nth-child(n+2) {
border-top: 1px solid #ccc;
}
.shop-detail-feature .opening-times > div:nth-child(1) {
font-weight: 400;
}
.shop-detail-feature .opening-times > div .special {
font-size: 14px;
}
.shop-detail-feature .opening-times > div .times {
display: flex;
align-items: flex-end;
}
.no-touch .shop-detail-feature {
overflow: hidden; /* causes display issue with maps on iOS*/
}
.lt-ie9 .shop-detail-feature {
background: none !important;
}
.fallback-shop-detail-image {
display: none;
}
.lt-ie9 .fallback-shop-detail-image {
position: absolute;
left: 0;
top: 0;
display: block;
min-width: 100%;
min-height: 100%;
z-index: 1;
}
.touch .shop-detail-feature .map-box {
width: 0;
height: 0;
overflow: hidden;
}
.shop-detail-feature .inner {
position: relative;
min-height: 505px;
background: #fff;
background: rgba(255, 255, 255, 0.9);
text-align: left;
z-index: 2;
}
.touch .shop-detail-feature .inner {
display: inline-block;
min-width: 345px;
max-width: 400px;
vertical-align: top;
}
.shop-detail-feature .inner h1 {
position: relative;
font-size: 26px;
line-height: 28px;
margin: 30px 0 0 0;
z-index: 1;
}
.no-touch .shop-detail-feature .inner h1 {
padding-right: 20px;
}
.shop-detail-feature .address {
display: block;
margin-top: 2px;
}
.shop-detail-feature .inner .detail-box.favourite h1 {
color: #336b75;
}
.shop-detail-feature .inner h1:after {
display: none;
content: "This is your preferred shop";
position: absolute;
left: 0;
bottom: -15px;
font-size: 15px;
font-weight: 600;
line-height: 17px;
color: #878787;
}
.shop-detail-feature .inner .detail-box.favourite h1:after {
display: block;
}
.shop-detail-feature .inner h4 {
font-size: 25px;
margin: 10px 0 3px;
font-style: normal;
text-transform: none;
font-size: 16px;
}
.open-today {
display: none;
}
.open-today > div:nth-child(2) {
padding-right: 20px;
padding-left: 40px;
position: relative;
white-space: nowrap;
color: #336b75;
font-weight: 400;
}
.open-today > div:nth-child(2):after {
content: "";
position: absolute;
width: 6px;
height: 20px;
top: -1px;
right: 4px;
background-image: url(../img/ui/arrow_dark_teal.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.open-today.opened > div:nth-child(2):after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@media only screen and (max-width: 640px) {
.open-today {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
cursor: pointer;
}
.open-today + div {
height: 0;
overflow: hidden;
}
.open-today.opened + div {
height: auto;
}
}
.shop-detail-feature .directions {
margin-top: 7px;
padding-right: 90px;
overflow: hidden;
}
.no-touch .shop-detail-feature .directions {
max-width: 400px;
}
.shop-detail-feature .detail-box .directions {
padding-right: 59px;
}
.shop-detail-feature .directions .input {
float: left;
width: 100%;
max-width: none;
border-right: none;
margin-bottom: 8px;
}
.shop-detail-feature .directions .button {
float: right;
width: 59px;
margin-right: -59px;
padding: 0;
}
.no-touch .shop-detail-feature .shop-map {
height: 100%;
}
.shop-detail-feature .detail-box {
position: relative;
min-height: 505px;
padding-left: 30px;
padding-bottom: 22px;
padding-right: 30px;
}
.touch .shop-detail-feature .detail-box {
width: 100%;
}
/* Contact */
.shop-detail-feature .contact,
.shop-detail-feature .touch-contact {
margin: 0;
padding: 0;
list-style-type: none;
}
.shop-detail-feature .contact li {
margin-bottom: 2px;
}
.shop-detail-feature .contact li a:hover {
text-decoration: none;
}
/* Touch contact */
.shop-detail-feature .touch-contact {
display: none;
margin-left: -5px;
margin-right: -5px;
margin-top: 15px;
overflow: hidden;
}
.touch .shop-detail-feature .touch-contact {
display: block;
}
.shop-detail-feature .touch-contact li {
float: left;
width: 50%;
padding-left: 5px;
padding-right: 5px;
}
.shop-detail-feature .touch-contact li a {
display: block;
}
.shop-detail-feature h4.directions-heading {
margin-top: 24px;
}
.action-fav-shop {
width: auto;
padding: 0 12px;
padding-right: 40px;
margin-top: 10px;
font-size: 14px;
}
.shop-detail .action-fav-shop {
margin-top: 0;
}
.action-fav-shop .pre {
white-space: nowrap;
}
.action-fav-shop:before {
position: absolute;
right: 4px;
font-size: 31px;
top: -5px;
}
.action-fav-shop.active:before {
color: #9E866B;
}
.action-fav-shop .post {
display: none;
}
.action-fav-shop.active .pre {
display: none;
}
.action-fav-shop.active .post {
display: inline;
}
.action-fav-shop .link {
text-decoration: underline;
margin-left: 4px;
}
.content-text.fancy-p p:first-child {
font-style: italic;
font-family: Baskerville, serif;
line-height: 25px;
font-size: 20px;
}
/* Shop Facilities */
.shop-facilities {
float: left;
padding: 0;
margin: 10px 0 0 0;
overflow: hidden;
}
.detail-box .shop-facilities {
float: none;
}
.shops-search-list .shop-facilities {
margin-top: 10px;
display: inline-block;
}
.shop-facilities li {
float: left;
width: 30px;
height: 25px;
line-height: 25px;
margin-right: 13px;
margin-top: 10px;
text-align: center;
overflow: hidden;
}
.detail-box .shop-facilities li {
margin-right: 6px;
}
.shop-facilities li.facility-disabled + li.facility-wifi {
margin-left: -14px;
}
.detail-box .shop-facilities li.facility-disabled + li.facility-wifi {
margin-left: -7px;
}
.shop-facilities li:before {
position: relative;
display: block;
font-size: 20px;
color: #9E9E9E;
}
.shop-facilities li.facility-wifi:before {
left: 1px;
}
.shop-facilities li.facility-disabled:before {
left: 1px;
}
.shop-facilities li.facility-toilets:before {
left: 1px;
}
.shop-detail > h2 {
margin-bottom: 15px;
}
.shop-facilities li.facility-cafe:before {
font-size: 17px;
}
.shop-facilities li.facility-toilets:before {
font-size: 24px;
}
/* Shop preferences */
.shop-prefs-wrap {
background: #e0e9ed;
border: 1px solid #b9baac;
overflow: hidden;
padding: 0 10px 30px;
margin: -6px 0 36px;
}
.shop-prefs-inner {
max-width: 1000px;
margin: 0 auto;
}
.shop-prefs-wrap h2 {
font-family: "Source Sans Pro", Arial, sans-serif;
text-transform: uppercase;
font-style: normal;
text-align: center;
color: #000d42;
margin: 40px 0 0;
letter-spacing: 0.02em;
}
.shop-prefs-wrap h3 {
text-align: center;
color: #000d42;
margin: 0 0 30px;
letter-spacing: 0em;
}
.shop-prefs-wrap input {
display: none;
opacity: 0;
-webkit-appearance: none;
border-radius: 0;
}
.shop-email-box {
margin: 8px 0;
}
.shop-prefs-help {
float: left;
margin-right: 5px;
width: 20px;
cursor: pointer;
}
.shop-prefs-help > div:nth-child(1) {
width: 20px;
height: 20px;
background: #416a73;
color: #fff;
font-weight: 400;
border-radius: 50%;
text-align: center;
line-height: 22px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.shop-prefs-help > div:nth-child(2) {
position: absolute;
left: 50px;
background: #416a73;
padding: 20px;
padding-right: 34px;
top: 50%;
width: 85%;
color: white;
font-size: 13px;
transform: translateY(-50%);
z-index: 99;
transition: opacity 0.2s;
display: none;
box-shadow: 4px 4px 10px #999;
}
.shop-prefs-help.hover > div:nth-child(2) {
display: block;
}
.shop-prefs-help > div:nth-child(2):before {
content: "";
width: 0;
height: 0;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
border-right: 16px solid #416a73;
position: absolute;
right: 99%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.shop-prefs-help > div:nth-child(2):after {
content: "×";
position: absolute;
color: #fff;
right: 8px;
top: 1px;
font-size: 28px;
}
.shop-prefs-wrap .shop-prefs-label {
width: calc(100% - 28px);
float: right;
margin: 0;
background: #f8fafa;
border: 1px solid #336b75;
padding: 10px;
}
.shop-prefs-wrap .shop-prefs-label .shop-prefs-name {
float: left;
width: calc(100% - 30px);
font-size: 14px;
line-height: 18px;
}
.shop-prefs-wrap .shop-prefs-label .shop-prefs-check {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #b9baac;
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.shop-prefs-wrap .shop-prefs-label input:checked + .shop-prefs-check {
background: #9cb7bf;
border: 1px solid #628d98;
}
.shop-prefs-wrap .shop-prefs-label input:checked + .shop-prefs-check:before {
content: "\e60f";
color: #fff;
font-family: "icomoon";
margin: 0 2px;
speak: none;
font-style: normal;
font-weight: normal;
line-height: inherit;
font-variant: normal;
text-transform: none;
text-indent: 0;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}
.flex-center {
display: flex;
justify-content: center;
}
.shop-prefs-overlay {
cursor: pointer;
}
@media only screen and (max-width: 640px) {
.shop-prefs-wrap {
padding: 0 0 40px;
}
.shop-prefs-wrap h2 {
font-size: 21px;
}
.shop-prefs-wrap label {
width: calc(100% - 36px);
}
}
/* *** Shop Floors *** */
.shop-floors .shop-floor {
margin-bottom: 12px;
}
/* Title */
.shop-floors .title {
position: relative;
display: block;
background: #9e866b;
color: #fff;
font-size: 18px;
padding: 0 55px 0 22px;
line-height: 48px;
outline: none;
cursor: pointer;
}
/* Content */
.shop-floor .content {
height: 0;
-webkit-transition: height 0.3s cubic-bezier(0.66, -0.23, 0.42, 1.29);
transition: height 0.3s cubic-bezier(0.66, -0.23, 0.42, 1.29);
overflow: hidden;
}
.shop-floor.open .content {
height: auto;
}
.shop-floor ul {
list-style: none;
margin: 0;
padding: 15px 25px;
border: 1px solid #D1D1D1;
border-top: none;
font-size: 14px;
line-height: 20px;
}
/* Trigger */
.shop-floor .title .trigger {
position: absolute;
top: 0;
right: 10px;
display: block;
width: 40px;
height: 100%;
line-height: 48px;
text-align: center;
}
.shop-floor .title .trigger:before {
display: block;
font-size: 30px;
color: #fff;
text-align: center;
}
.nearest-bookshops h2 {
margin-bottom: 0;
}
.bookseller-preview img, .bookseller-preview .avatar-placeholder {
display: block;
margin-bottom: 20px;
}
.bookseller-preview .title {
font-size: 25px;
color: #aaa9a9;
}
.bookseller-preview .title .surname {
color: #343434;
}
.bookseller-preview p {
margin: 0;
font-size: 16px;
color: #222;
}
.book-list-preview img {
max-height: 220px;
margin-bottom: -4px;
}
.book-list-preview .title {
color: #535353;
font-size: 25px;
}
.book-list-preview .by {
color: #222;
}
.bookseller-detail .bookseller-intro {
margin: 0;
color: #535353;
}
.bookseller-detail > h2 {
margin-bottom: 5px;
}
.no-touch .map-box {
height: 505px;
}
.author-detail .content-text {
clear: both;
padding-bottom: 20px;
}
.touch .author-detail .content-text {
padding-bottom: 12px;
}
.blog-preview .author-placeholder {
height: 250px;
background: url(../img/logo.png) no-repeat left bottom;
}
.events-page h2 {
margin-top: 6px;
margin-bottom: 0;
font-style: normal;
}
@media only screen and (min-width: 1024px) {
.events-page h2 {
font-size: 32px;
}
}
.events-page strong {
color: #5c5c5c;
}
.events-page .event-preview-row {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
@media only screen and (max-width: 770px) {
.events-page .event-preview-row {
padding: 0 5px;
}
}
.events-page .event-preview-row .event-preview {
display: block;
width: 20%;
padding: 0 10px;
margin-bottom: 20px;
text-decoration: none;
}
@media only screen and (max-width: 1024px) {
.events-page .event-preview-row .event-preview {
width: 33.3333333333%;
}
}
@media only screen and (max-width: 770px) {
.events-page .event-preview-row .event-preview {
width: 50%;
padding: 0 5px;
}
}
.events-page .event-preview-row .event-preview .inner {
background-color: #e0e9ec;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.events-page .event-preview-row .event-preview .inner .event-preview-images {
display: flex;
height: 175px;
margin: 10px 10px 70px;
background-color: #fff;
gap: 5px;
padding: 5px;
}
@media only screen and (max-width: 770px) {
.events-page .event-preview-row .event-preview .inner .event-preview-images {
height: 120px;
}
}
.events-page .event-preview-row .event-preview .inner .event-preview-images .event-preview-image {
display: block;
flex-grow: 1;
height: 100%;
overflow: hidden;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
}
.events-page .event-preview-row .event-preview .inner .details {
padding: 10px;
color: #fff;
font-size: 14px;
line-height: 16px;
}
.events-page .event-preview-row .event-preview .inner .details .contributors {
height: 30px;
display: flex;
}
.events-page .event-preview-row .event-preview .inner .details .contributors .contributor {
width: 88px;
height: 88px;
background-image: url(../img/event_default.png);
border-radius: 50%;
margin: -70px auto;
background-size: cover;
}
@media only screen and (max-width: 770px) {
.events-page .event-preview-row .event-preview .inner .details .contributors {
height: 10px;
}
.events-page .event-preview-row .event-preview .inner .details .contributors .contributor {
width: 70px;
height: 70px;
}
}
.events-page .event-preview-row .event-preview .inner .details .title {
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
line-height: 18px;
height: 54px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.events-page .event-preview-row .event-preview .inner .details .location {
height: 32px;
margin-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.events-page .event-preview-row .event-preview .inner .details .date {
height: 16px;
margin-top: 10px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.events-page .event-preview-row .event-preview .inner .details .cta {
margin-top: 10px;
}
.events-page .event-preview-row .event-preview .inner .details .cta > div {
background: #fff;
color: #000;
padding: 6px 10px;
float: left;
font-weight: 400;
font-size: 12px;
}
.events-page .event-preview-row .event-preview:nth-child(1) .inner .details {
background-color: #768a91;
}
.events-page .event-preview-row .event-preview:nth-child(2) .inner .details {
background-color: #9b834d;
}
.events-page .event-preview-row .event-preview:nth-child(3) .inner .details {
background-color: #934848;
}
.events-page .event-preview-row .event-preview:nth-child(4) .inner .details {
background-color: #32839e;
}
.events-page .event-preview-row .event-preview:nth-child(5) .inner .details {
background-color: #7b9176;
}
.events-page .event-preview-row .event-preview .see-all-tile {
background-color: #336b75;
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 400;
height: 100%;
}
@media only screen and (max-width: 1024px) {
.events-page .event-preview-row .event-preview .see-all-tile {
display: flex;
}
}
.events-page .event-preview-row .event-preview .see-all-tile span:after {
content: "";
display: block;
float: right;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #fff;
margin: 6px 0 0 8px;
}
.events-search .form-panel {
background: #fff;
padding: 25px 20px 0;
height: 300px;
}
.events-search {
background: url(../img/event-search-bg.jpg);
padding: 36px;
color: #5c5c5c;
}
.events-search .form-panel p {
margin: 0;
margin-bottom: 12px;
}
.events-search .form-panel .ws-select-outer {
max-width: none;
margin-bottom: 10px;
}
.events-home-search .location-container {
position: relative;
padding-right: 69px;
}
.events-home-search .location-container .button {
position: absolute;
top: 0;
right: 0;
width: 70px;
}
.events-home-search .location-container .input {
margin-bottom: 0;
}
.icon-gold-corner {
background: url(../img/ui/gold-corner.png);
width: 15px;
height: 15px;
display: inline-block;
}
.featured-event {
padding: 0 10px;
}
.featured-event .eotm {
position: absolute;
bottom: 18px;
right: 20px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 22px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
white-space: nowrap;
}
.featured-event .eotm:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 15px 15px;
border-color: transparent transparent #9c876c transparent;
overflow: hidden;
}
.events-search .location-container label.input-error {
margin-top: 6px;
}
.find-events .ws-select-outer {
margin-bottom: 10px;
}
.no-results-text {
font-size: 20px;
}
.blog-detail .content-text > :first-child {
margin-top: 0;
}
.event-dates .event-date .location {
font-family: Baskerville, serif;
font-size: 20px;
color: #000;
}
.event-dates .event-date .location-image {
margin-right: 22px;
}
.event-dates .event-date {
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid #c8c8c8;
height: 90px;
}
.event-dates {
margin-top: 35px;
}
.book-preview-feature {
margin: 22px 0 40px;
font-size: 17px;
color: #6b6b6b;
}
.book-preview-feature .stock-count {
margin-left: 20px;
}
.book-preview-cnc {
background: #e2e2e2;
padding: 20px 26px 20px 20px;
}
.book-preview-cnc .title {
display: block;
font-size: 20px;
color: #444;
}
.book-preview-cnc .subtitle {
font-size: 14px;
}
.book-preview-cnc form .input {
width: 100%;
}
.book-preview-cnc form .button {
width: 58px;
position: absolute;
top: 0;
right: 0;
}
.book-preview-cnc form {
position: relative;
padding-right: 57px;
}
.gm-style img {
max-width: none;
max-width: initial;
}
.marker-popup {
position: relative;
padding-bottom: 17px;
text-align: left;
color: #fff;
font-size: 14px;
line-height: 19px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
display: inline-block;
width: 250px;
}
.marker-popup .popup-inner {
position: relative;
background: #9e866b;
padding-right: 20px;
box-shadow: 1px 1px 24px -8px #000;
}
.marker-popup img {
width: 110px;
height: 122px;
min-height: 122px;
margin-right: 12px;
}
.marker-popup .beak {
background: url(../img/ui/map-beak.png) no-repeat center;
width: 29px;
height: 17px;
position: absolute;
left: 50%;
margin-left: -15px;
bottom: 0;
}
.marker-popup ul {
list-style: none;
padding: 10px 0 10px 10px;
margin: 0;
}
.marker-popup-outer {
display: none;
}
.marker-popup .link {
position: absolute;
bottom: 3px;
right: 7px;
font-size: 14px;
color: #fff;
}
.book-detail .additional-images img {
display: none;
}
.book-detail .additional-images img.active {
display: inline-block;
}
.book-detail .additional-images img.js-open-modal {
cursor: pointer;
}
.hero-banner {
margin-bottom: 30px;
z-index: 1;
float: left;
width: 100%;
}
.hero-banner .ws-lazy:not(.ws-loaded) {
height: 0;
padding-bottom: 27.8%;
}
.hero-banner .hero-slide img {
width: 100%;
}
.hero-banner:not(.slick-initialized) {
height: 0;
padding-bottom: 27.8%;
overflow: hidden;
}
.hero-banner .slick-next:focus,
.hero-banner .slick-prev:focus,
.hero-banner .slick-arrow:hover,
.hero-banner .slick-arrow {
z-index: 100;
opacity: 0;
transition: opacity 0.5s;
top: 50%;
margin: 0;
width: 60px;
height: 60px;
transform: translateY(-50%);
background-image: url(../img/hp-banner-chevron.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0 50%;
}
.hero-banner .slick-arrow:hover {
opacity: 1 !important;
}
.hero-banner .slick-arrow:before {
content: "";
}
.hero-banner .slick-arrow.slick-next {
right: 0;
}
.hero-banner .slick-arrow.slick-prev {
left: 0;
transform: rotate(180deg) translateY(50%);
}
.hero-banner .slick-dots {
bottom: 3px;
}
.hero-banner .slick-dots li {
margin: 0 4px;
}
.slick-dots li:only-child {
display: none;
}
.hero-banner .slick-dots li button:before {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
width: 20px;
height: 20px;
text-shadow: 1.6px 1.6px 2px #909090;
}
.hero-banner .slick-dots li.slick-active button:before {
color: #fff;
}
@media only screen and (max-width: 800px) {
.hero-banner.slick-initialized .slick-dots {
bottom: -2px;
margin-bottom: 10px;
}
.hero-banner.slick-initialized .slick-dots li {
margin: 0 10px;
}
.hero-banner.slick-initialized .slick-dots li button:before {
font-size: 8px;
}
}
@media only screen and (max-width: 640px) {
.hero-banner.slick-initialized {
margin-bottom: 20px;
}
.hero-banner:not(.slick-initialized) {
padding-bottom: 66.8%;
}
.hero-banner .slick-arrow {
display: none !important;
}
.row .hero-banner {
padding-left: 20px;
padding-right: 20px;
}
}
html.touch .hero-banner .slick-arrow {
display: none !important;
}
h1 .count {
color: #3d3a3a;
font-size: 15px;
font-style: normal;
font-weight: 300;
}
.other-filters label.input-error {
margin: 10px 0 0;
}
.randc-banner {
background: url(../img/ui/randc-banner.png);
min-height: 95px;
padding-left: 28px;
padding-top: 28px;
padding-right: 15px;
padding-bottom: 15px;
line-height: 28px;
}
.randc-banner .title {
font-size: 28px;
color: #fff;
text-transform: uppercase;
font-style: italic;
line-height: 0px;
}
.randc-banner .subtitle {
display: block;
color: #bff6f6;
font-family: Baskerville, serif;
font-style: italic;
font-size: 16px;
line-height: 16px;
}
p.marketplace-message {
text-align: left;
font-size: 17px;
font-weight: bold;
color: #5c5c5c;
}
p.marketplace-message b {
text-decoration: underline;
}
p.marketplace-message a:hover b {
text-decoration: none;
}
/* Book Detail CNC */
.book-detail-cnc {
background: #e2e2e2;
}
.book-actions + .book-detail-cnc {
margin-top: -1px;
}
.book-detail-cnc + .book-detail-cnc {
margin-top: 10px;
}
.book-detail-cnc > div {
min-height: 65px !important;
padding: 11px 11px;
}
.book-preview .book-detail-cnc > div {
padding-left: 15px;
}
.book-detail-cnc .book-detail-cnc-saved {
padding-right: 88px;
background: #9E866B;
border-left: 1px solid #9E866B;
border-right: 1px solid #9E866B;
color: #fff;
}
.book-detail-cnc-postcode .title br {
display: none;
}
.book-detail-cnc .title,
.book-detail .book-format .name {
display: block;
font-size: 15px;
line-height: 18px;
margin-bottom: 1px;
}
.book-detail-cnc .title .cnc-title {
text-transform: uppercase;
font-style: italic;
font-weight: bold;
margin-right: 2px;
font-size: 16px;
}
.book-actions .collect-message span {
white-space: nowrap;
}
.reviews-sidecol .book-detail-cnc-postcode .book-detail-cnc-label,
.reviews-sidecol .book-detail-cnc-postcode .book-detail-cnc-form {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.reviews-sidecol .book-detail-cnc-label .title,
.reviews-sidecol .book-detail-cnc-label .subtitle {
display: inline-block;
vertical-align: top;
}
.reviews-sidecol .book-preview-side .book-detail .contributors {
display: inline-block;
width: calc(100% - 75px);
}
.reviews-sidecol .book-preview-side .price {
line-height: normal;
}
.book-detail-cnc .title .cnc-title .and {
font-weight: normal;
}
.book-detail-cnc .input {
margin: 0;
width: 100%;
border-color: transparent;
}
.book-detail-cnc .subtitle {
position: relative;
display: inline-block;
font-size: 15px;
font-style: italic;
line-height: 1;
vertical-align: top;
font-weight: normal;
}
.book-detail-cnc-postcode .subtitle {
font-size: 16px;
}
.book-detail-cnc .subtitle a {
display: inline-block;
line-height: 11px;
border-bottom: 1px solid;
text-decoration: none;
}
.book-detail-cnc .subtitle a:hover {
color: inherit;
}
.book-detail-cnc form:not(.location-form) {
position: relative;
margin-top: 4px;
padding-right: 54px;
}
.book-detail-cnc .book-detail-cnc-saved form {
margin-top: 0;
}
.book-detail-cnc .button:not(.get-location-button) {
position: absolute;
top: 0;
right: 0;
width: 56px;
padding-left: 0;
padding-right: 0;
}
.get-location-button {
width: 100%;
margin-top: 8px;
}
.book-detail-cnc .book-detail-cnc-saved .button {
border: 1px solid #fff;
right: 10px;
}
.book-preview .book-detail-cnc-saved .button {
right: 14px;
}
.basket-checkout-delivery-panel .book-detail-cnc-saved .button {
right: 20px;
}
.book-detail-cnc .book-detail-cnc-saved .button {
top: 50%;
margin-top: -19px;
}
.book-detail-cnc .book-detail-cnc-saved .button.button-large {
margin-top: -22px;
}
.book-detail-cnc-label {
padding-left: 0;
padding-right: 0;
}
.book-detail-cnc-postcode .title {
font-size: 16px;
line-height: 1;
color: #444;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
}
.book-detail-cnc-postcode .title .and {
font-weight: normal;
}
.book-detail-cnc-saved .subtitle {
position: relative;
z-index: 2;
}
.book-detail-cnc-postcode form {
position: relative;
}
.book-detail-cnc-postcode .location-form {
margin-top: 10px;
}
.book-detail-cnc .book-detail-cnc-postcode {
overflow: visible;
}
.book-detail-cnc-saved form.collect-form {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 66px;
padding: 0;
z-index: 2;
}
.book-detail-cnc-saved .float-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border: none;
background: none;
}
.author-preview ~ .author-preview {
padding-top: 20px;
border-top: 1px solid #ddd;
margin-top: 20px;
}
.header-with-link h1 {
display: inline-block;
margin-right: 16px;
margin-top: 0;
font-size: 28px;
}
.list-type .name {
font-size: 17px;
color: #5c5c5c;
}
.list-types {
margin-top: 24px;
padding-bottom: 15px;
margin-bottom: 60px;
border-bottom: 1px solid #C8C8C8;
}
.list-type {
margin: 0 0 15px 0;
}
.list-type .info {
color: #5c5c5c;
font-size: 14px;
}
@media only screen and (max-width: 640px) {
.account-lists .pagination-footer {
float: left;
width: 100%;
margin: -20px 0 45px;
}
}
.account-list h1 {
display: inline-block;
font-size: 26px;
font-style: italic;
text-transform: none;
margin: 0;
}
.account-list .list-detail {
display: none;
}
.account-list .pagination-wrap {
margin: 10px 0 15px;
}
.account-list .pagination-wrap .pager {
padding-top: 5px;
}
.account-list .pagination-wrap .sort {
max-width: 235px;
}
.account-list .heading-wrap {
position: relative;
top: 35px;
margin-bottom: 5px;
padding: 0;
z-index: 1;
}
.account-list .heading-under {
margin-top: 6px;
}
.account-list .infinite-load {
margin: 50px 0 25px;
padding-left: 0;
}
.book-list-item {
position: relative;
background: #fff;
padding: 25px 0;
font-size: 17px;
overflow: hidden;
}
.book-list-item .title {
font-family: Baskerville, serif;
font-size: 24px;
}
.book-list-item .contrib {
font-size: 20px;
white-space: nowrap;
}
.book-list-item .book-list-image {
float: left;
width: 120px;
margin-right: 40px;
}
.book-list-item .remove {
float: right;
font-size: 17px;
line-height: 16px;
}
.book-list-item .list-actions {
float: right;
margin: 4px 0 0 10px;
}
.book-list-item + .hr {
margin-bottom: 0;
}
.book-list-item .price,
.book-list-item .price-rrp {
font-size: 20px;
font-weight: normal;
}
.book-list-item .price-rrp {
margin-top: 0px;
display: inline-block;
}
.book-list-item .format {
font-size: 15px;
font-style: italic;
}
.book-list-details {
overflow: hidden;
margin-bottom: 10px;
}
.book-list-item-info {
overflow: hidden;
padding-right: 20px;
}
.book-list-item-info > * {
display: block;
margin-bottom: 10px;
}
.book-list-add {
background: #E2E2E2;
border: 1px solid #ddd;
padding: 22px;
margin: 0 0 20px;
}
.book-list-add .title {
font-size: 17px;
}
.book-list-add .subtitle {
font-size: 14px;
display: block;
color: #6e6e6e;
font-style: italic;
margin-top: 2px;
}
.book-list-add .search-bar .title {
font-size: 17px;
line-height: 1;
}
.book-list-add .search-bar .subtitle {
font-size: 14px;
}
.book-list-add .search-input {
padding-right: 58px;
}
.search-input input {
border-right: none !important;
}
.book-list-add .search-input .button {
position: absolute;
top: 0;
right: 0;
width: 58px;
}
.book-list-add .book-results {
max-height: 428px;
background: #fff;
margin-top: 14px;
border: 1px solid #d1d1d1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.book-list-add .book-results .book-list-item {
padding: 18px;
}
.book-list-add .book-results .book-list-item ~ .book-list-item {
border-top: 1px solid #e9e9e9;
}
.book-list-add .book-results .no-results {
text-align: center;
margin: 30px 0;
}
.book-list-add .book-results .book-list-item:hover {
cursor: pointer;
background: #eee;
}
.book-list-add .loading-spinner {
position: relative;
height: 60px;
}
.account-list .meta,
.list-preview .meta {
font-size: 16px;
font-style: italic;
}
.account-lists .header-with-link h1 {
font-size: 26px;
}
.account-lists .header-with-link a {
font-size: 18px;
}
.list-preview .title {
font-family: Baskerville, serif;
color: #000;
font-size: 26px;
display: inline-block;
margin-bottom: 20px;
font-style: italic;
}
.list-preview .list-heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.list-preview .list-images {
margin-right: 30px;
}
.list-preview .list-images .slick-arrow.slick-disabled {
display: none !important;
}
.list-preview .list-images .slick-track {
display: flex;
align-items: flex-end;
}
.list-preview .list-images .list-image {
position: relative;
display: block;
overflow: hidden;
display: flex;
align-items: flex-end;
margin-right: 40px;
padding: 0;
}
.list-preview .list-images .list-image > a {
display: block;
height: 100%;
}
.list-preview .list-images .list-image.empty {
display: block;
aspect-ratio: 1/1.55;
}
.list-preview .list-images .list-image.empty span {
display: block;
height: 100%;
background-color: #e0e9ee;
}
.list-preview .list-images.empty {
display: flex;
align-items: flex-end;
}
.list-preview .hr {
margin: 30px 0;
}
.list-feature-image .list-feature-image-wrapper {
display: flex;
align-items: flex-end;
margin-bottom: 30px;
}
.list-feature-image .list-image {
overflow: hidden;
padding: 0;
}
.list-feature-image .list-image:not(:last-child) {
margin-right: 40px;
}
.list-feature-image .list-image.empty {
display: block;
aspect-ratio: 1/1.55;
}
.list-feature-image .list-image.empty span {
display: block;
height: 100%;
background-color: #e0e9ee;
}
.order-handle {
float: right;
width: 24px;
margin-left: 16px;
cursor: pointer;
}
.touch .order-handle {
display: none;
}
.order-handle .bar {
height: 3px;
background: #C9C9C9;
margin-top: 3px;
}
.order-handle .bar:first-child {
margin-top: 0;
}
.booklist-banner {
margin-bottom: 30px;
}
.user-lists-popup,
.send-email-popup {
position: absolute;
right: 0;
display: none;
min-width: 250px;
background: #fff;
padding: 8px 0 0 0;
border: 1px solid #ddd;
text-align: left;
border: 3px solid #336b75;
z-index: 1000;
font-size: 16px;
}
.user-lists-popup .title {
display: block;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 5px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
}
.user-lists-popup ul {
list-style: none;
margin: 0 0 6px;
line-height: 24px;
max-height: 92px;
overflow-y: auto;
}
.user-lists-popup ul li {
padding: 5px 8px;
font-size: 14px;
line-height: 16px;
cursor: pointer;
}
.user-lists-popup ul li:hover {
background: #eee;
}
.user-lists-popup form {
position: relative;
padding: 0 64px 0 8px;
margin: 8px 0;
}
.user-lists-popup .input {
width: 100%;
height: 30px;
font-size: 12px;
line-height: 16px;
border-right: none;
}
.user-lists-popup .button {
position: absolute;
width: 56px;
top: 0;
right: 8px;
}
.send-email-popup {
width: 200px;
padding: 10px;
top: 40px;
right: 0;
}
.email-share.show-email .send-email-popup {
display: block;
}
.send-email-popup > p {
margin-top: 0;
font-size: 15px;
}
.send-email-popup p.success-message {
font-size: 15px;
margin-top: 0;
display: none;
}
.send-email-popup .input {
width: 100%;
margin-bottom: 10px;
}
.list-meta.list-types {
padding-bottom: 16px;
margin-bottom: 20px;
}
.list-meta .fields > * {
margin-bottom: 10px;
}
.list-meta .fields label {
margin: 0;
}
.list-meta .fields .ws-select-outer {
max-width: none;
}
.dashboard-shop {
border: 1px solid #C8C8C8;
padding: 10px 5px;
margin-bottom: 10px;
}
.blog-article-edit .field-row label {
margin: 0;
}
.blog-article-edit .field-row {
margin-bottom: 10px;
}
.blog-article-edit .button-container {
margin-top: 16px;
}
.ui-datepicker {
background: #fff;
border: 1px solid #D1D1D1;
text-align: center;
font-size: 14px;
padding: 4px;
display: none;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-calendar th {
padding: 0 5px;
}
.ui-datepicker a {
text-decoration: none;
}
.ui-datepicker-calendar td a {
display: block;
}
.ui-datepicker-calendar td.ui-datepicker-unselectable {
background: none;
}
.ui-datepicker-next {
float: right;
}
.ui-datepicker-prev {
float: left;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
opacity: 0.6;
cursor: pointer;
}
.ui-datepicker-header {
padding: 2px;
}
.blog-image-upload img {
vertical-align: bottom;
}
.blog-image-upload .file {
border: 1px solid #ccc;
padding: 4px;
height: auto;
display: none;
}
.blog-image-upload .file.active {
display: inline-block;
}
.shop-content-form .button-container {
margin-top: 20px;
}
.facilities-edit input[type=checkbox], .regions-edit input[type=checkbox] {
vertical-align: middle;
}
input[type=file] {
height: auto;
line-height: 15px;
border: 1px solid #D1D1D1;
padding: 5px;
font-size: 15px;
}
input[type=file]:active, input[type=file]:focus {
border: 2px solid #336b75;
padding: 4px;
outline: none;
}
select {
height: auto;
font-size: 15px;
line-height: 15px;
padding: 5px 6px;
border: 1px solid #D1D1D1;
display: inline-block;
}
select:active, select:focus {
border: 2px solid #336b75;
outline: none;
padding: 4px 5px;
}
.image-edit label {
margin-top: 0;
}
.image-edit .display {
margin: 10px 0;
}
.preview-action .inner {
height: 440px;
position: relative;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
}
.preview-action .title {
position: absolute;
bottom: 20px;
right: 20px;
display: block;
min-height: 12px;
padding: 10px 15px 10px 15px;
background: #5c5c5c;
background: rgba(0, 0, 0, 0.5);
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 22px;
font-weight: bold;
font-style: italic;
line-height: 22px;
color: #fff;
text-transform: uppercase;
}
.preview-action:hover .title {
background: #249998;
}
.preview-action .title.title-teal {
background: #249998;
}
.preview-action .title:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 12px;
background: url(../img/ui/nav-arrow.png) no-repeat right top;
background-size: auto 12px;
overflow: hidden;
}
.preview-review .inner {
display: table;
width: 100%;
height: 210px;
padding: 20px;
table-layout: fixed;
background: url(../img/ui/chalk-bg.jpg);
color: #fff;
text-align: center;
}
.preview-review .book-image {
float: right;
display: block;
border: 4px solid #fff;
margin-left: 20px;
}
.preview-review .title {
font-family: Baskerville, serif;
text-transform: uppercase;
font-size: 24px;
margin-bottom: 4px;
}
.preview-review p {
font-style: normal;
font-size: 14px;
margin: 0;
color: #fff;
}
.preview-review p.quote {
font-family: "Over the Rainbow", cursive;
font-size: 17px;
line-height: 24px;
margin: 10px 0;
min-height: 48px;
}
.preview-review p a {
color: #9e866b;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.preview-action.preview-action-small .inner {
height: 210px;
}
.display-container-trio > * ~ *, .display-container-duo > * ~ * {
margin-top: 20px;
}
.preview-action.preview-action-small .title {
bottom: 15px;
right: 15px;
}
.home-page .hr {
height: 1px;
background: #C8C8C8;
margin: 10px 0 35px;
}
.preview-content .abstract {
display: block;
}
.home-row > * {
margin-bottom: 25px;
}
.home-row > .hr-outer {
margin-bottom: 0;
}
.preview-promo .details p {
margin-bottom: 0;
}
.display-container-trio > *, .display-container-duo > * {
height: 210px;
}
.preview-promo .image {
height: 175px;
background-size: cover;
background-position: center;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
}
.preview-content p {
font-size: 17px;
}
.badge {
color: #fff;
padding: 1px 4px;
border-radius: 2px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
font-size: 12px;
background: #545454;
display: inline-block;
}
.badge.badge-green {
background: #5cb85c;
}
.badge.badge-red {
background: #d9534f;
}
.badge.badge-blue {
background: #5bc0de;
}
.badge.badge-orange {
background: #DE955B;
}
.ajax-badge {
visibility: hidden;
line-height: normal;
}
.ajax-badge.active {
visibility: visible;
}
.book-list-preview .image {
text-align: center;
display: block;
background: #E2E2E2;
margin-bottom: 20px;
}
.ui-menu .ui-menu-item.ui-state-focus {
background: #336b75;
margin: 0;
color: #fff;
}
.ui-menu {
border: 1px solid #D1D1D1;
background: #fff;
border-top: none;
}
.blog-thumb,
.blog-feature-image {
position: relative;
width: 100%;
height: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.blog-feature-image {
padding-bottom: 62.419354838%;
}
.blog-thumb.aspect4 {
padding-bottom: 83.3333333333%;
}
.blog-thumb.aspect6 {
padding-bottom: 54.347826087%;
}
.blog-thumb.aspect8 {
padding-bottom: 39.222581%;
}
.blog-tag:hover {
text-decoration: none;
}
.rb-image-outer .image-caption {
display: block;
}
.blog-gallery.carousel .blog-gallery-image img {
display: block;
}
.blog-gallery-image {
float: left;
}
.blog-gallery .wrapper,
.blog-gallery .blog-gallery-image {
height: 0px;
padding-bottom: 62.419354838%;
}
.blog-gallery .inner {
overflow: hidden;
}
/* RSS button */
.feed-container {
position: relative;
float: right;
margin-bottom: 10px;
}
/* Button */
.feed-button {
float: right;
width: 44px;
height: 44px;
border: 1px solid #d1d1d1;
background: url(../img/ui/feed-icon.png) no-repeat center top;
border-color: #336b75;
background-color: #336b75;
background-position: center bottom;
}
.search-top {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
}
/* Search Sidebar */
.search-sidebar {
float: left;
width: 220px;
margin-right: 25px;
}
.search-sidebar h3,
.filter-responsive-set-filters h3 {
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 18px;
margin: 0 0 5px 0;
}
.filter-responsive-set-filters h3 {
margin-top: 15px;
}
.search-refine-container {
margin-bottom: 20px;
}
.search-refine {
padding-right: 58px;
position: relative;
}
.search-refine .input {
width: 100%;
}
.search-refine .button {
position: absolute;
right: 0;
bottom: 0;
}
.search-result-row {
padding-top: 20px;
padding-bottom: 10px;
border-top: 1px solid #e6e6e6;
}
.search-result-row:first-child {
padding-top: 0;
border: none;
}
.search-result-row h2 {
margin-top: 0;
margin-bottom: 0px;
}
.search-result-row img {
margin: 0 20px 10px 0;
}
.search-result-row .subtitle {
font-size: 18px;
line-height: 23px;
margin-top: 2px;
margin-bottom: 0;
font-weight: bold;
color: #5c5c5c;
}
.search-result-content {
overflow: hidden;
}
.search-result-header {
overflow: hidden;
}
/* *** Filter responsive *** */
.filter-responsive {
display: none;
margin-top: 10px;
}
/* Filter button */
.filter-responsive .button-filter-results {
float: left;
}
.filter-responsive .button-filter-results:before {
content: "Filter";
}
.filter-responsive .button-filter-results.active:before {
content: "Close Filters";
}
/* Sort dropdown */
.filter-responsive .sort {
float: right;
}
.filter-responsive .sort h3 {
float: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 42px;
margin: 0 5px 0 0;
white-space: nowrap;
}
.filter-responsive .sort select,
.filter-responsive .sort .ws-select-outer {
width: auto;
max-width: none;
margin: 0;
}
/* Set Filters */
.filter-responsive-set-filters {
float: left;
width: 100%;
}
.set-filters {
margin-bottom: 20px;
overflow: hidden;
}
.filter-responsive-set-filters .set-filters {
margin-bottom: 0;
}
.search-sidebar.active .set-filters {
margin-bottom: 10px;
}
.set-filter {
position: relative;
padding: 12px 30px 13px 15px;
margin-bottom: 5px;
background: #E2E2E2;
font-size: 16px;
font-weight: 500;
line-height: 18px;
color: #666;
overflow: hidden;
z-index: 1;
}
.search-sidebar.active .set-filter,
.filter-responsive-set-filters .set-filter {
float: left;
margin-right: 5px;
padding: 8px 30px 9px 10px;
font-size: 14px;
line-height: 16px;
}
.set-filter-clear {
position: absolute;
right: 0px;
top: 50%;
margin-top: -12px;
width: 20px;
height: 34px;
padding-right: 10px;
line-height: 20px;
text-align: center;
text-decoration: none !important;
box-sizing: content-box;
}
.set-filter-clear:before {
display: block;
font-size: 16px;
color: #666;
}
.set-filter-clear:hover:before {
color: #000;
}
/* Search Results */
.search-sidebar .sort {
margin-bottom: 15px;
}
.soft-redirect {
background-color: #e5eff1;
padding: 20px;
border-radius: 10px;
float: left;
width: 100%;
margin-bottom: 20px;
}
.soft-redirect a {
font-weight: 600;
}
.search-results-list {
margin-bottom: 20px;
overflow: hidden;
}
.search-results-list .main-page > .row:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
.search-result-row .address {
display: block;
margin: 8px 0;
font-size: 17px;
color: #5c5c5c;
height: 85px;
}
/*.search-result-row.shops-result img {margin-bottom: 0; }*/
h1 .view-all,
h2 .view-all {
position: relative;
top: 1px;
display: inline-block;
margin-left: 15px;
line-height: 27px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
font-weight: 300;
font-style: normal;
text-transform: none;
white-space: nowrap;
vertical-align: top;
}
.search-result-group .product-result img {
height: 220px;
}
.search-result-group .product-result {
text-align: center;
}
.search-result-group .product-result h2 {
max-height: 48px;
font-size: 20px;
line-height: 23px;
margin-bottom: 0;
margin-top: 10px;
overflow: hidden;
}
.search-result-group .product-result .author {
display: block;
margin-bottom: 10px;
}
.search-result-group .heading {
margin-bottom: 20px;
}
.search-result-group .section {
margin-bottom: 40px;
}
.search-result-group-blog .subtitle {
font-size: 14px;
}
.map-marker {
width: 50px;
height: 67px;
background: url(../img/ui/map-marker.png) no-repeat center;
font-size: 22px;
text-align: center;
line-height: 58px;
vertical-align: top;
color: #fff;
font-family: Baskerville, serif;
}
.dashboard-shop .shop-item .inner .shop-thumb {
margin-bottom: 0;
}
.preview-review .review-details {
display: table-cell;
vertical-align: middle;
}
.search-result-row.events-result .location {
font-size: 16px;
color: #5c5c5c;
font-style: normal;
}
.event-preview .event-book {
position: absolute;
top: 18px;
left: 18px;
width: 30%;
}
.event-preview .event-book img {
width: 100%;
height: auto;
max-width: 150px;
max-height: 180px;
border: 4px solid #FFF;
}
.book-list-book .book-image {
float: left;
display: block;
max-width: 220px;
height: 220px;
/*background: #e2e2e2;*/
text-align: center;
margin-right: 30px;
margin-bottom: 12px;
}
.separator-container .book-list-book .book-image {
margin-bottom: 0;
}
.book-list-book h3 {
font-size: 20px;
line-height: 22px;
margin: 2px 0 10px;
}
.book-list-book .authors {
margin: 0;
font-size: 14px !important;
}
.author a,
.authors a {
text-decoration: none;
}
.author b,
.authors b {
font-weight: 600;
}
.book-list-book ~ .book-list-book {
/* margin-top: 35px; */
padding-top: 20px;
/*border-top: 1px solid #D5D5D5;*/
}
.book-list-description {
border-bottom: 1px solid #D5D5D5;
margin-bottom: 35px;
}
.book-list-description p {
margin-bottom: 35px;
}
.page-header {
height: 180px;
background-position: center;
}
.reviews-login {
display: none;
}
.reviews-write {
display: none;
}
.form-write-review ::placeholder {
color: #383838 !important;
}
.form-write-review .review-rate {
border: 3px solid #d1d1d1;
padding: 12px 20px;
margin: 0 0 20px;
font-size: 1px;
line-height: 56px;
}
.form-write-review .review-rate > div {
display: inline-block;
font-size: 18px;
line-height: 20px;
vertical-align: middle;
}
.form-write-review .review-rate .star-rating {
margin-right: 0;
}
.form-write-review .submit-container {
margin-bottom: 0;
}
.form-write-review .subscribe {
margin-bottom: 20px;
}
.review-disclaimer {
display: none;
clear: both;
}
#form-write-review-side .review-disclaimer {
display: block;
}
.review-disclaimer p {
line-height: 19px;
}
.search-result-group .author-result .placeholder {
width: 220px;
height: 176px;
display: block;
background: url(../img/logo.png) no-repeat left bottom;
}
.author-result h2 span ~ span {
color: #333;
}
.author-result p {
height: 57px;
overflow: hidden;
}
.load-more-comments {
text-align: center;
margin: 60px 0 0;
}
.load-more-comments .button {
display: block;
}
#mfPreviewBar {
display: none;
}
.header-with-link .hr {
margin-bottom: 20px;
}
.load-more-comments .spinner-container {
display: none;
height: 35px;
}
.main-blog-page h1 {
float: left;
max-width: calc(100% - 290px);
margin-top: 0;
}
.page-title-container {
float: left;
width: 100%;
}
.price-rrp {
position: relative;
color: #0c0c0c;
font-weight: 400;
}
.price.rrp-50 {
color: #b01519 !important;
}
.price-format .price-rrp {
margin-right: 5px;
}
.price-rrp:after {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 50%;
border-bottom: 1px solid;
}
b.price-rrp:after {
border-width: 2px;
}
.list-comment-form textarea {
width: 100%;
height: 80px;
margin-top: 18px;
margin-bottom: 14px;
}
.book-detail {
margin-top: 20px;
}
.buy-container label {
display: inline-block;
margin: 0;
margin-right: 5px;
}
.buy-container .input {
width: 100%;
}
.buy-container .input.quantity {
width: 50px;
text-align: center;
}
.book-actions .buy-container .pre-add .button {
float: right;
}
.book-actions .buy-container .pre-add .button-container + .button {
margin-top: 10px;
}
.book-actions .buy-container .pre-add:nth-of-type(2),
.book-actions .buy-container .pre-add:nth-of-type(3) {
border-top: 1px solid #ddd;
}
.book-actions .buy-container .pre-add[data-border-colour] {
border: 1px solid attr(data-border-colour);
}
.book-actions .post-add p {
margin-top: 0;
}
p.stock-message {
color: #5c5c5c;
margin: 3px 0 0;
font-size: 14px;
font-weight: normal;
}
.book-recommends h2 {
margin-top: 0;
}
.book-recommends {
margin-top: 20px;
}
.review-item-small-functions {
font-size: 15px;
}
.review-item-small-functions .comment-bottom {
margin: 25px 0 0;
line-height: 21px;
}
.events-home-search.no-feature {
margin-bottom: 40px;
}
.events-home-search .search-container {
position: relative;
padding: 30px 100px;
margin-top: 20px;
text-align: center;
background-color: #e0e9ec;
}
.events-home-search .search-container h1 {
margin-top: 0;
margin-bottom: 10px;
}
.events-home-search .search-container p.p-medium {
font-size: 16px;
font-weight: 400;
}
.events-home-search .search-container form {
text-align: left;
}
.events-home-search .search-container form p {
margin-bottom: 5px;
}
.events-home-search .search-container form .trigger {
border: 2px solid #336b75;
padding: 0px 34px 0px 12px;
}
@media (max-width: 640px) {
.events-home-search .search-container {
padding: 20px;
}
.events-home-search .search-container .button-container > div {
width: calc(100% - 10px);
}
.events-home-search .search-container .button-container > div .button {
width: 100%;
}
}
.events-home-search .inner {
position: relative;
display: table-cell;
vertical-align: middle;
min-height: 100px;
padding: 30px;
background: #fff;
line-height: 1;
}
.events-home-search .map-canvas {
width: 100%;
height: 390px;
}
.events-home-search .ws-select-outer {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.events-home-search form {
display: inline-block;
width: 100%;
vertical-align: top;
}
.events-home-search .location-container label {
margin: 5px 0 0;
}
.events-home-search .switch-list, .events-home-search .switch-map {
position: absolute;
bottom: 30px;
right: 30px;
}
.events-home-search .map-view, .events-home-search .list-view {
position: relative;
display: none;
}
.events-home-search .map-view.active, .events-home-search .list-view.active {
display: block;
}
.events-home-search .list-view {
border: 1px solid #ddd;
height: 390px;
padding: 30px;
}
.events-home-search .list-view > ul {
height: 241px;
margin: 0;
overflow: auto;
}
.events-home-search .list-view > ul > li {
padding: 0 0 10px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
font-size: 16px;
font-weight: normal;
line-height: 18px;
overflow: hidden;
}
.events-home-search .list-view > ul li:last-child {
border: none;
}
.events-home-search .list-view > ul .title {
display: block;
}
.events-home-search .list-view > ul .date {
display: block;
margin-top: 2px;
font-weight: bold;
}
.a-z-index a.inactive {
cursor: default;
background: none !important;
color: #B0AFAF !important;
font: inherit !important;
opacity: 0.5;
}
.author-directory-item .title {
display: block;
margin-bottom: 5px;
font-family: Baskerville, serif;
font-size: 20px;
line-height: 22px;
color: #000;
}
.author-directory-item .inner {
height: 85px;
padding-top: 14px;
border-top: 1px solid #C8C8C8;
margin-bottom: 14px;
overflow: hidden;
}
.author-directory-item:first-child .inner,
.author-directory-item:nth-child(2) .inner {
border-top: none;
}
.author-directory-item p {
margin-top: 0;
}
.author-directory-item .author-thumb {
float: left;
margin-right: 20px;
display: block;
}
.author-directory-item .author-thumb img {
display: block;
}
.event-past-row .info-box {
background: #383838;
padding-left: 27px;
padding-right: 20px;
padding-top: 26px;
height: 300px;
margin-left: -10px;
}
.event-past-row .info-box h3 {
color: #fff;
margin: 0;
font-size: 26px;
}
.event-past-row .event-book img {
max-width: 100px;
display: block;
}
.event-past-row .event-book {
float: left;
margin-right: 15px;
}
.event-past-row .subtitle {
font-style: normal;
margin: 6px 0 0;
color: #9e866b;
line-height: 18px;
font-size: 16px;
}
.event-past-row .desc {
color: #dadada;
margin: 0;
}
.event-past-row .wrap {
margin-top: 30px;
position: absolute;
bottom: 26px;
}
.event-past-row .feature-image {
height: 300px;
display: block;
}
.event-dates .event-date .location-image img {
display: block;
}
.author-row {
border: 1px solid #d5d5d5;
height: 250px;
}
.author-row ~ .author-row {
margin-top: 30px;
}
.author-row h3 {
font-family: "Source Sans Pro", Arial, sans-serif;
color: #9e866b;
margin: 0 0 20px;
font-size: 17px;
font-weight: bold;
}
.author-row .detail-inner {
padding: 30px 20px;
}
.author-row .author-book {
padding-top: 10px;
padding-bottom: 10px;
}
.author-row .author-book img {
max-height: 180px;
max-width: 100%;
}
.author-row .author-image img {
display: block;
}
.author-row .book-hover {
height: 248px;
position: absolute;
top: 0;
right: 0;
padding: 0;
width: 299px;
display: none;
}
.author-row .book-hover p {
margin: 0;
max-height: 207px;
}
.author-row .book-hover .inner {
background: #EEE;
height: 100%;
padding: 20px;
}
.author-row .book-hover .price {
margin: 20px 0;
}
.author-row .book-hover .price b {
font-size: 20px;
}
.author-row .author-image:hover .book-hover {
display: block;
}
.main-nav a.popout-active span {
background: #000;
color: #FFF;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
}
header .header-bar .with-dropdown .nav-dropdown-basket {
left: -97%;
}
header .header-basket .nav-dropdown-basket .button-container .button-teal {
width: 100%;
}
.nav-dropdown-added {
max-width: 300px;
}
.nav-dropdown-added .item-name {
font-weight: 700;
margin: 0;
}
.nav-popout a span {
margin: 0;
}
.pagination {
text-align: center;
}
.view-switcher + .pagination {
margin-top: 7px;
}
.page-title + div > .pagination {
margin-bottom: 9px;
}
.results-header .pagination {
float: right;
}
.shops-directory .pagination {
float: right;
margin-top: 14px;
}
.pager {
font-size: 0;
line-height: 30px;
text-align: right;
white-space: nowrap;
}
.pager > span {
display: inline-block;
vertical-align: top;
font-size: 15px;
}
.pager form {
display: inline-block;
vertical-align: top;
}
.pager a {
display: inline-block;
vertical-align: top;
width: 24px;
height: 30px;
margin-left: -26px;
padding-left: 26px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
font-size: 1px;
text-shadow: none;
text-decoration: none;
text-align: center;
overflow: hidden;
}
.pager a.next {
margin-right: -7px;
margin-left: -28px;
text-align: right;
}
.pager a.next:before {
margin-left: -9px;
}
.pager a:hover {
color: #336b75;
}
.pager a:before {
display: block;
margin-left: -8px;
font-size: 40px;
padding-top: 1px;
}
.pager a.inactive {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
.pager .input {
display: block;
width: 40px;
min-width: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
margin: 0 4px 0 0;
text-align: center;
color: #4c4c4c;
}
.pager .input:active, .pager .input:focus {
padding-top: 4px;
padding-bottom: 4px;
}
.pager .input.input-error {
padding: 4px 0;
}
.pager .size a.active {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
pointer-events: none;
}
.search-results .pager,
.pagination.centered .pager {
display: inline-block;
vertical-align: middle;
}
.page-title-container .pagination {
float: right;
margin-left: 20px;
}
.page-title-container .pager {
float: right;
margin-top: 2px;
}
.reviews-list form + .pager {
position: absolute;
right: 0;
top: -43px;
}
.ui-slider {
background: #c8c8c8;
height: 5px;
position: relative;
}
.ui-slider-handle {
display: inline-block;
width: 8px;
height: 15px;
background: url(../img/ui/slider-handle.png);
position: absolute;
cursor: pointer;
margin-top: -3px;
outline: none !important;
}
.ui-slider-range {
height: 100%;
background: #333;
position: absolute;
}
.range-slider-outer {
margin-right: 10px;
padding: 0 8px 0 0;
}
.ui-slider-handle .label {
position: absolute;
top: 15px;
width: 50px;
text-align: center;
margin-left: -22px;
outline: none !important;
font-style: italic;
color: #545454;
font-size: 12px;
}
.filter-range {
display: flex;
margin-top: 10px;
}
.filter-range .button {
margin: 0 0 0 5px;
}
.lt-ie9 .filter-range .button {
width: 50px;
padding-left: 0;
padding-right: 0;
}
.filter-prices {
overflow: hidden;
}
.filter-price {
position: relative;
float: left;
width: 50%;
padding-left: 15px;
padding-right: 11px;
margin-bottom: 2px;
}
.filter-price ~ .filter-price {
padding-right: 0;
padding-left: 26px;
}
.filter-price:before {
content: "£";
float: left;
width: 13px;
margin-left: -13px;
font-size: 18px;
font-weight: 500;
line-height: 35px;
text-align: left;
vertical-align: middle;
}
.filter-price:first-child:after {
content: "to";
position: absolute;
right: -17px;
top: 50%;
margin-top: -10px;
width: 30px;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-align: center;
}
.filter-price input {
width: 100%;
}
.button .light {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
line-height: normal;
}
.book-preview-grid-item .button {
padding-left: 0;
padding-right: 0;
width: 100%;
max-width: 215px;
}
.basket-form .post-add .message {
display: inline-block;
margin-bottom: 5px;
}
.input-search-outer form > * {
vertical-align: top;
}
.allow-download .purchased-message {
margin: 0;
line-height: 35px;
display: block;
}
.input-search-outer form > * {
vertical-align: top;
}
.book-preview.book-preview-list-item .message {
display: block !important;
}
.list-preview .list-image .hover-layer {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.38);
width: 100%;
height: 100%;
}
.no-touch .list-preview .list-image:hover .hover-layer {
display: block;
}
.list-preview .list-image .hover-layer .action {
display: inline-block;
width: 48px;
height: 38px;
line-height: 38px;
background-color: #fff;
margin-top: 0;
text-align: center;
text-decoration: none;
vertical-align: top;
}
.action:before,
.action-button:before {
color: #336b75;
}
.action:hover:before,
.action-button:hover:before {
color: #9C876C;
}
.action-button:before {
font-size: 25px;
}
.action-button.action-link:before,
.icon-link:before {
font-size: 22px;
}
.list-preview .list-image .hover-layer .action:before {
font-size: 30px;
}
.list-preview .list-image .hover-layer .action.action-link:before {
font-size: 24px;
}
.list-preview .list-image .hover-layer .inner {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin-top: -19px;
overflow: hidden;
white-space: nowrap;
}
.list-preview .list-image .hover-layer .inner > * ~ * {
margin-left: 5px;
}
.list-preview .action-share-container {
background: #fff;
border: none;
}
.booking-iframe {
width: 100%;
height: 500px;
border: 1px solid #c8c8c8;
}
.reviews-write h2 {
margin-top: 0;
}
.action-twitter {
background-image: url(../img/ui/action-twitter-icon.png);
}
.action-twitter:hover {
background-position: center bottom;
}
.marker-popup .close {
position: absolute;
bottom: 12px;
right: 0px;
padding: 10px;
}
.infoBox > img[src*=infobox-close] {
position: absolute !important;
width: 20px;
height: 20px;
top: 4px;
right: 4px;
z-index: 1;
}
.payment-card {
display: inline-block;
width: 48px;
height: 28px;
background: no-repeat center center;
background-size: contain;
}
.payment-card.payment-card-vi, .payment-card.payment-card-ve, .payment-card.payment-card-vd {
background-image: url("../img/ui/icoVI.png");
}
.payment-card.payment-card-ax {
background-image: url("../img/ui/icoAX.png");
}
.payment-card.payment-card-ma {
background-image: url("../img/ui/icoMA.png");
}
.payment-card.payment-card-mc, .payment-card.payment-card-md {
background-image: url("../img/ui/icoMC.png");
}
.order-info-section .payment-card {
margin-right: 5px;
vertical-align: -2px;
}
.order-info-section b {
color: #5c5c5c;
}
.order-info-section .paypal-logo {
width: 86px;
height: 22px;
background: no-repeat center center;
background-size: auto;
background-image: url(../img/ui/paypal.png);
margin-bottom: 3px;
}
.profile-picture-drop {
float: left;
display: inline-block;
width: 60px;
height: 60px;
background: url(../img/ui/profile-image.png) no-repeat center;
background-size: cover;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
margin-right: 20px;
vertical-align: top;
}
.upload-profile-image .help {
color: #000;
display: block;
margin-bottom: 6px;
}
.upload-profile-image:not(.legacy) .file {
display: none;
}
.upload-profile-image.legacy .button-upload {
display: none;
}
.opt-in-out {
color: #545454;
}
.contact-details-edit .ws-select-outer, .contact-details-edit .input {
margin-bottom: 10px;
}
.upload-profile-image .help {
display: block;
margin-bottom: 7px;
}
.contact-details-edit .button-container {
margin-top: -35px;
}
.contact-details-edit .hr {
margin: 30px 0;
}
.password-change-form {
margin-top: 10px;
}
.password-change-form p {
margin-bottom: 30px;
}
.password-change-form .button {
margin-top: 9px;
}
.single-card-block ~ .single-card-block {
margin-top: 0;
border-top: none;
}
.add-gift-card {
border: 1px solid #d2cccc;
padding: 30px;
text-align: left;
}
.add-gift-card form {
margin-bottom: -10px;
}
/*.add-gift-card .input {margin-bottom: 0; }*/
.shop-detail .gallery-carousel {
margin-top: 20px;
}
.gallerylist .galleryimage {
display: inline-block;
text-align: center;
padding: 10px;
border-radius: 2px;
border: 3px dashed #BEBEBE;
background: #fff;
margin: 10px;
}
.reviews-success {
display: none;
margin-top: 19px;
text-align: center;
}
.reviews-success p {
margin: 0 0 20px;
}
.address-block .inner {
border: 1px solid #d2cccc;
margin-bottom: 20px;
height: 340px;
padding: 30px;
position: relative;
}
.address-block .default-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 30px;
border-top: 1px solid #e8e8e8;
background: #fff;
}
.address-block .default-container label {
margin: 0;
line-height: 28px;
}
.address-block .button-container {
margin-top: 25px;
overflow: hidden;
}
.address-block .button-container .button {
float: left;
margin-left: 5px;
margin-top: 5px;
}
.address-block .button-container .button:first-child {
margin-left: 0;
}
.address-block.add-address {
text-align: center;
}
.address-block.add-address .inner {
position: relative;
line-height: 338px;
z-index: 1;
}
.address-block.add-address .inner:before {
position: absolute;
left: 50%;
top: 0;
margin-left: -130px;
font-size: 260px;
line-height: 350px;
color: #E6E6E6;
text-align: center;
z-index: -1;
}
.address-block.add-address .add-link {
display: block;
margin-top: 174px;
padding: 0 0 0 25px;
font-size: 22px;
font-weight: bold;
line-height: 24px;
width: 100%;
background: none;
border: none;
}
.address-block.add-address .add-link:hover {
text-decoration: underline;
}
.address-block.add-address .add-link span:before {
position: absolute;
left: -34px;
top: 50%;
margin-top: -14px;
display: block;
font-size: 30px;
line-height: 1;
}
.address-block.add-address .add-link span {
position: relative;
}
.ebook-download .bottom-bar {
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
background: #fff;
-webkit-transition: bottom 150ms ease-out;
transition: bottom 150ms ease-out;
padding-top: 10px;
}
.touch .ebook-download .bottom-bar,
.ebook-download:hover .bottom-bar {
bottom: 0;
}
.ebook-download .inner {
position: relative;
height: 300px;
background: #e2e2e2;
margin-bottom: 10px;
text-align: center;
overflow: hidden;
}
.user-reviews-container {
padding: 20px 20px 0 20px;
border: 1px solid #d2cccc;
margin: 15px 0;
}
.user-reviews-container .pager-outer {
position: relative;
z-index: 1;
margin: 12px 0;
}
.user-reviews-container .review-meta {
display: block;
}
.user-reviews-container .review-meta b {
color: #5c5c5c;
}
.user-reviews-container .review-rating {
text-align: left;
overflow: hidden;
}
.account-content .reviews-container .button-save {
margin-top: 10px;
}
.account-content .reviews-container .form-wrap {
margin-left: -10px;
margin-right: -10px;
}
.account-content .user-reviews-container .ws-checkable-outer {
top: -3px;
}
.account-content .user-reviews-container .waiting .label-content:after {
content: "";
width: 30px;
height: 30px;
position: absolute;
margin-top: -3px;
background-image: url(../img/waiting_teal.gif);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.account-content p.section {
color: #5c5c5c;
font-weight: bold;
}
.book-list-book .price-container {
display: inline-block;
font-size: 20px;
line-height: 30px;
vertical-align: top;
margin-right: 40px;
}
.book-list-book .basket-form {
display: inline-block;
padding: 10px 14px;
border: 1px solid #ddd;
}
.book-list-book .basket-form .post-add .message {
line-height: 30px;
margin-right: 10px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
}
.competition-question > h3 {
color: #5c5c5c;
font-style: italic;
margin-bottom: 0;
}
.competition-question > ul {
margin: 10px 0;
}
.competition-question > ul .answer-text {
display: inline-block;
margin-left: 10px;
line-height: 28px;
vertical-align: top;
}
.competition-question > ul li {
margin-bottom: 20px;
}
.competition-question > ul label {
margin: 0;
}
/* Google Maps Markers */
.cluster[title] {
background: #336b75;
border-radius: 50%;
box-shadow: 0 0 0 7px rgba(19, 149, 136, 0.5);
overflow: hidden;
display: flex;
align-items: center;
font-weight: bold;
}
.cluster[title] img {
display: none !important;
}
form.competition-form .input {
margin-bottom: 6px;
}
.comp-terms-container ol {
list-style-type: decimal;
color: #5c5c5c;
font-style: italic;
}
.competition-form .subtitle {
margin-top: 6px;
}
.competition-form #capt {
margin-bottom: 20px;
}
h2.comp-title {
font-size: 28px;
margin-top: 10px;
line-height: 30px;
}
.competition-page .subtitle {
margin-bottom: 30px;
}
.competition-page .comp-terms-container,
.competition-page .comp-content,
.competition-page .comp-entry-form,
.competition-page .book-list-book {
padding: 30px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 30px;
}
.competition-page .comp-entry-form {
padding-top: 0;
}
.competition-page .comp-entry-form h2 {
margin-top: 0;
}
.competition-page .comp-entry-form .button.button-plus.join-plus {
margin-bottom: 12px;
}
.competition-page .comp-entry-form .plus-line {
font-weight: normal;
padding-bottom: 10px;
}
.competition-page .comp-entry-form .js-open-modal {
margin-right: 20px;
}
.competition-page .comp-content strong {
color: #5c5c5c;
}
.competition-page .comp-content .feature-image {
float: right;
margin-left: 20px;
position: relative;
}
.competition-page .comp-content .feature-image .comp-image {
width: 100%;
max-width: 350px;
}
@media (max-width: 640px) {
.competition-page .comp-content h2 {
display: inline-block;
}
}
.competition-page .comp-terms-container {
border: 0;
}
.competition-page .comp-terms ol,
.competition-page .comp-terms p {
font-size: 15px;
}
.comp-entry-form form .button {
margin-top: 12px;
}
.button-comp {
margin: 0 10px;
}
h1.plus-exclusive {
background: url(../img/plus-green.png) no-repeat;
background-size: 50px;
padding-left: 60px;
min-height: 38px;
}
body.plus-student h1.plus-exclusive,
.is-student h1.plus-exclusive {
background-image: url(../img/plus-blue.png);
}
@media only screen and (max-width: 320px) {
.comp-entry-form .button.join-plus {
margin-top: 10px;
}
}
.event-detail > h2,
.event-detail > h1 {
margin-bottom: 0;
margin-top: 19px;
}
.event-detail .event-detail-image img {
display: block;
width: 100%;
max-height: 234px;
}
@media only screen and (max-width: 640px) {
.event-detail .event-detail-image img {
max-height: 98px;
}
}
.event-detail .event-detail-book-images {
display: flex;
align-items: baseline;
width: 100%;
padding-bottom: 20px;
}
.event-detail .event-detail-book-images img {
max-height: 360px;
}
.event-detail .event-detail-book-images img:not(:last-child) {
margin-right: 20px;
}
@media only screen and (max-width: 640px) {
.event-detail .event-detail-book-images img {
max-height: none;
max-width: calc(50% - 10px);
}
.event-detail .event-detail-book-images img :nth-child(even) {
margin-right: 0;
}
}
.event-detail .short-desc {
margin-bottom: 0;
font-size: 19px;
}
.event-detail p.subtitle {
font-size: 16px;
font-style: normal;
}
.reviews-write textarea.input {
margin-bottom: 10px;
}
.tips-content ul {
list-style: disc;
}
.author-detail .page-detail-actions {
margin-bottom: 20px;
}
.author-detail-extended .feature-image {
display: block;
margin-bottom: -1px;
}
.no-touch .author-detail-extended .page-detail-actions {
margin-top: -40px;
}
.author-detail-extended .hr {
margin: 30px 0 10px;
}
/* If you need anything in here feel free to bring it back on
.author-top {
border-bottom: 1px solid #ddd;
}
h2.author-name {
font-size: 34px;
margin-top: 0;
}
.book-preview-cnc.has-shop {
padding: 0;
}
.book-preview-cnc .book-detail-cnc-saved form {
position: relative;
}
.book-preview-cnc .book-detail-cnc-saved {
padding: 20px;
}
.book-preview-cnc .book-detail-cnc-saved .title {
color: #fff;
}
.book-preview-cnc .book-detail-cnc-saved form .button {
top: 8px;
}
*/
.book-preview-side .perk-container {
margin-bottom: 40px;
}
.shop-draft {
margin: 15px 0 0;
}
.shop-draft .button {
margin-bottom: 5px;
}
.nav-dropdown .table-wrap {
max-height: 210px;
overflow: auto;
}
.password-recovery-button {
margin-top: 34px;
}
/* *** Slides - boxes that open and close *** */
/* JS open/close functionality */
.js-slide-inner,
.filter-content .inner {
overflow: hidden; /* create a block formatting context so that any margin on the content doesn't affect it */
}
.js-slide-content,
.filter-content {
height: 0;
overflow: hidden;
}
.js-slide-content {
-webkit-transition: height 0.3s cubic-bezier(0.66, -0.23, 0.42, 1.29);
transition: height 0.3s cubic-bezier(0.66, -0.23, 0.42, 1.29);
}
.js-slide.open .js-slide-content,
.filter-container.open .filter-content {
height: auto;
}
/* Styles */
.slide {
margin-bottom: 10px;
}
.filter-container {
margin-bottom: 15px;
}
.slide-trigger {
position: relative;
padding: 13px 16px;
margin: 0;
background: #E2E2E2;
font-size: 16px;
line-height: 18px;
letter-spacing: 1px;
text-transform: uppercase;
text-overflow: ellipsis;
}
.slide-trigger .with-arrow {
padding-left: 30px;
cursor: pointer;
}
.slide-trigger .with-arrow:hover {
color: #000;
}
.slide-trigger .with-arrow:before {
content: "";
position: absolute;
left: 15px;
top: 50%;
margin-top: -5px;
-webkit-transform: rotate(0deg) scale(0.9999);
-ms-transform: rotate(0deg) scale(0.9999);
-moz-transform: rotate(0deg) scale(0.9999);
transform: rotate(0deg) scale(0.9999);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #000000;
}
.lt-ie9 .slide-trigger {
font-family: Verdana, sans-serif;
font-size: 13px;
}
.slide.review-tips-container .slide-trigger {
height: 30px;
border: 1px solid #ddd;
padding: 0 11px;
font-size: 15px;
line-height: 28px;
color: #000;
}
.review-tips-container .slide-trigger {
min-height: 0;
}
.slide.review-tips-container .slide-trigger.with-arrow {
padding-left: 32px;
}
.slide.open .slide-trigger.with-arrow:before {
-webkit-transform: rotate(90deg) scale(0.9999);
-ms-transform: rotate(90deg) scale(0.9999);
-moz-transform: rotate(90deg) scale(0.9999);
transform: rotate(90deg) scale(0.9999);
}
.cancellation-reason-text {
width: 100%;
max-width: 400px;
}
.review-item-small-functions span.sep {
color: #a0a09f;
}
.nav-dropdown .basket-empty {
margin: 0;
}
.social-profile {
display: inline-block;
font-size: 0;
background: no-repeat center;
background-size: 100% auto;
height: 20px;
}
.social-profile.social-profile-facebook {
background-image: url(../img/ui/facebook.png);
width: 20px;
}
.social-profile.social-profile-twitter {
background-image: url(../img/ui/twitter.png);
width: 20px;
}
.shop-facilities .social-profile {
height: 25px;
}
.dp_banner_header_container {
display: table;
width: 100%;
}
.dp_banner_header_container:before,
.dp_banner_header_container:after {
display: none;
}
.dp_banner_header {
display: table-cell;
width: 100%;
padding-left: 15px !important;
padding-right: 15px !important;
vertical-align: middle;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 50px;
line-height: 1;
font-weight: bold;
font-style: italic;
margin: 0 !important;
}
.reviews-list .order-form {
margin-bottom: 20px;
}
.comment-avatar {
float: left;
margin-right: 18px;
}
.comment-body {
padding-bottom: 2px;
overflow: hidden;
}
.comment-body .show-button {
color: inherit;
text-decoration: underline;
font-weight: normal;
position: absolute;
right: 20px;
}
.delivery-address-panel .ws-select-outer {
margin-bottom: 8px;
}
.searchrollout {
height: 0;
overflow: hidden;
}
.search-sidebar.active .searchrollout {
height: auto;
}
#map-spinner {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
z-index: 501;
}
.touch #map-spinner.active {
display: block;
}
.blog-detail .feature-image-credit {
font-size: 14px;
text-align: right;
font-family: Baskerville, serif;
line-height: 1.5;
color: #5c5c5c;
}
.blog-detail .content-text ul {
list-style: inherit;
}
/* *** My Account *** */
.account-content {
float: right !important;
min-height: 390px !important;
}
/* Input container - for buttons pushing the content and aligned to the content bottom
- example: My Account Details page */
.input-container {
position: relative;
}
.input-container button.invisible {
float: right;
margin-left: 10px;
}
.input-container button.invisible ~ button {
position: absolute;
right: 0;
bottom: 0;
}
/* Saved gift cards */
.gift-cards {
font-size: 14px;
}
@media (min-width: 321px) {
.gift-cards {
font-size: inherit;
}
}
.gift-cards .egift-added {
display: flex;
align-items: center;
height: 50px;
padding-left: 20px;
background: #336b75;
font-size: 16px;
color: #fff;
}
.gift-cards .egift-added:not(:first-of-type) {
margin: 15px 0 -15px;
}
.gift-cards .egift-added img.icon-check {
max-width: 25px;
}
.gift-cards .single-card-block {
background: #f5f8f9;
border-top: 1px solid #d1d1d1;
}
.gift-cards img.gift-card-design {
float: left;
margin-right: 15px;
}
@media (min-width: 640px) and (max-width: 992px) {
.gift-cards img.gift-card-design {
float: none;
display: block;
margin-bottom: 5px;
}
}
.gift-cards img.icon-check {
max-width: 20px;
padding-right: 5px;
vertical-align: text-top;
}
.gift-cards .qr-code {
padding-top: 10px;
margin-bottom: 8px;
}
@media (min-width: 321px) {
.gift-cards .qr-code {
margin-bottom: 0;
}
}
@media (min-width: 640px) {
.gift-cards .qr-code {
left: 25px;
padding-top: 0;
}
}
.gift-cards .qr-code div {
width: 100%;
}
@media (min-width: 321px) {
.gift-cards .qr-code div {
max-width: 230px;
}
}
@media (min-width: 321px) and (max-width: 600px) {
.gift-cards .qr-code div {
text-align: left;
}
}
.gift-cards .button.remove {
position: relative;
top: 0;
left: 175px;
}
@media (min-width: 321px) {
.gift-cards .button.remove {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: auto;
}
}
/* *** My Account Orders *** */
.order-row ~ .order-row > .order-number {
margin-top: 30px;
}
/* Order Book Images */
.order-books .product-image,
.order-info .product-image {
display: inline-block;
width: 70px;
height: 70px;
text-align: center;
vertical-align: top;
overflow: hidden;
}
.order-books {
float: left;
margin-right: 24px;
}
.order-books .product-image {
height: auto;
}
.order-books .product-image ~ .product-image {
margin-left: 10px;
}
.order-books .product-image.egift-image img {
width: 70px;
}
.order-info .order-books .product-image.egift-image {
margin-top: 12px;
}
.order-info .product-image img {
display: block;
margin: 0 auto;
max-height: 90px;
max-width: 100%;
width: auto;
}
/* Buttons and right content */
.order-block .block-head > .button,
.order-overview-details {
float: right;
margin-left: 20px;
}
.order-block .block-head > .button .checkbox-label,
.order-overview-details .checkbox-label {
float: right;
}
.order-block .block-head.d-flex > .button {
align-self: center;
}
.order-block .block-head.d-flex .order-books {
flex-shrink: 0;
}
.order-block .block-head.d-flex .order-overview {
width: 100%;
}
.order-overview {
flex-grow: 1;
}
.order-overview.payment-attention {
margin-right: 230px;
}
.order-overview > .button {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.order-overview .title,
.order-overview .info strong {
color: #5c5c5c;
}
@media (max-width: 768px) {
.order-overview .info.egift-message {
padding-bottom: 20px;
}
}
/* Central content */
.order-overview,
.order-overview-details {
line-height: 70px;
overflow: hidden;
}
.order-overview > div,
.order-overview-details > div {
display: inline-block;
line-height: 1.3;
vertical-align: middle;
width: 100%;
}
.order-overview-details {
width: 250px;
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 0;
flex-shrink: 0;
align-items: end;
}
@media only screen and (max-width: 640px) {
.order-overview-details {
width: 110px;
}
}
.order-overview-details .button {
margin-top: 10px;
padding: 6px 10px;
line-height: 1.2rem;
width: auto;
}
@media only screen and (max-width: 640px) {
.order-overview-details .button {
white-space: break-spaces;
}
}
.order-overview-details strong {
display: block;
}
.order-overview-details strong + .button {
margin-top: 8px;
}
.order-overview-details strong br {
display: none;
}
.order-overview-details .invoice-pending {
font-size: 12px;
font-weight: 600;
text-align: right;
}
.order-overview-details .invoice-pending .tick {
display: inline-block;
width: 11px;
height: 11px;
background-image: url(../img/icons-check-teal.png);
background-size: contain;
background-repeat: no-repeat;
margin-right: 3px;
margin-bottom: -1px;
}
.refund-form .confirm-text {
font-weight: bold;
color: #5c5c5c;
}
.overview-order-status {
color: #5c5c5c;
text-align: right;
}
/* *** Order Info Section *** */
.order-info-section {
margin-bottom: 40px;
}
.order-info-section > h2 {
background: #336b75;
color: #fff;
font-size: 18px;
line-height: 44px;
padding: 0 20px;
font-style: italic;
margin: 0 0 20px;
}
.order-info-section > h2 ~ h2 {
margin-top: 40px;
}
.order-info-section strong {
color: #5c5c5c;
}
/* Order Infos */
.order-infos {
margin-bottom: -20px;
}
.label-share-review-toggle {
display: none;
}
.related-section .shop-item .inner {
border: none;
}
.related-section .shop-item ~ * ~ * > .inner {
border-top: 1px solid #c8c8c8;
}
.order-info {
padding-bottom: 20px;
padding-top: 20px;
border-top: 1px solid #E3E3E3;
overflow: hidden;
position: relative;
display: flex;
}
.order-info:first-child {
padding-top: 0;
border: none;
}
.order-info .title {
margin-bottom: 8px;
}
.order-info .title a {
font-weight: bold;
}
.order-info .price .total {
margin-left: 20px;
margin-bottom: 8px;
display: inline-block;
}
/* Cancel Order */
.cancel-order-section {
padding-bottom: 20px;
position: relative;
display: none;
align-items: flex-start;
}
.cancelling-order .cancel-order-section {
display: flex;
}
@media only screen and (max-width: 640px) {
.cancelling-order .cancel-order-section {
flex-direction: column;
align-items: end;
}
.cancelling-order .cancel-order-section .button {
margin-top: 5px;
}
}
.cancel-order-section .button {
flex: 0 0 inherit;
float: none;
}
.cancel-order-section .button[disabled] {
background-color: #c3c3c3;
}
.cancel-order-section .select-all {
width: 145px;
flex: none;
}
.cancel-order-section .select-all.deselect:before {
content: "de";
}
@media only screen and (max-width: 640px) {
.cancel-order-section .select-all {
margin-top: 10px !important;
}
}
.js-cancel-order-container {
border-top: 0px !important;
}
.view-order-titles {
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 640px) {
.view-order-titles {
flex-direction: column;
}
}
.view-order-titles .view-order-title-buttons {
display: flex;
flex-direction: column;
}
.view-order-titles .view-order-title-buttons .button {
width: 165px;
margin-top: 12px;
}
@media only screen and (max-width: 640px) {
.view-order-titles .view-order-title-buttons {
flex-direction: row-reverse;
justify-content: space-between;
width: auto;
}
.view-order-titles .view-order-title-buttons .button {
margin-top: 0;
margin-bottom: 12px;
}
}
.cancel-order-info {
flex: 1 1 auto;
}
.cancel-order-info strong {
color: #5c5c5c;
}
.cancel-order-info p {
margin-top: 0;
margin-bottom: 0;
}
.order-overview-details .cancel-order-checkbox,
.order-overview-details .cancel-order-unavailable-info {
display: none;
}
.cancelling-order .cancel-order-info p,
.cancelling-order .cancel-order-unavailable-info,
.cancelling-order .cancel-order-checkbox {
display: block;
}
.cancelling-order .cancel-order-info p.display-none,
.cancelling-order .cancel-order-unavailable-info.display-none,
.cancelling-order .cancel-order-checkbox.display-none {
display: none;
}
/* Totals Table */
.order-totals-table {
width: 100%;
font-size: 17px;
line-height: 40px;
}
.order-totals-table tr {
border-bottom: 1px solid #e3e3e3;
}
.order-totals-table tr.tax {
color: #666;
}
.order-totals-table tr.total {
border-top: 3px solid #E3E3E3;
font-size: 20px;
}
.order-totals-table tr .ico-tooltip {
position: relative;
top: -2px;
margin-top: 0px;
margin-left: 5px;
margin-bottom: 2px;
min-width: 16px;
}
.order-totals-table tr .ico-tooltip .tooltip {
width: 170px;
height: max-content;
margin: 0 !important;
font-size: 12px;
text-align: left;
left: 30px;
top: -22px;
}
.order-totals-table tr .ico-tooltip .tooltip:before {
top: 21px;
left: 4px;
border-left: none;
border-right: 8px solid #336b75;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-left: -13px;
}
.order-totals-table tr .ico-tooltip .tooltip:after {
top: 19px;
left: 4px;
border-left: none;
border-right: 10px solid #e0e9ed;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
@media only screen and (max-width: 640px) {
.order-totals-table tr .ico-tooltip .tooltip:after {
left: -8px;
}
}
.label-share-review-toggle {
display: none;
}
.additional-comment {
margin-top: 20px;
}
.lists-grid {
margin-bottom: -40px;
}
.row .create-list-form {
margin-top: 15px;
}
.floater.right {
float: right;
margin-left: 10px;
padding: 0;
}
.floater.left {
float: left;
margin-right: 10px;
padding: 0;
}
.floater.no-margin {
margin: 0;
}
.floater.invisible ~ .floater {
position: absolute;
top: 0;
left: 0;
}
.floater.invisible ~ .floater.right {
left: auto;
right: 0;
}
.account-content .payment-card-block .block-head .floater.left {
margin-right: 20px;
margin-top: 5px;
}
.account-content .order-block .block-head .floater.left {
margin-top: 0px;
}
.account-content .order-block .block-head .floater.right {
margin-left: 20px;
}
.account-content .payment-card-block .block-head .input-wrapper {
margin-top: 10px;
}
.account-content .payment-card-block .block-head .input-wrapper > span {
float: left;
margin-right: 20px;
}
.account-content .order-block .block-head .input-wrapper > span {
float: none;
margin-right: 0;
}
.account-content .payment-card-block .block-content .button {
float: right;
/*clear: both;*/
margin-top: 0;
margin-left: 10px;
}
.account-content .payment-card-block .block-content .button:first-child {
margin-top: 0;
}
.account-content .payment-card-block .address-container {
overflow: hidden;
}
.block-content-container,
.block-head-container {
position: relative;
overflow: hidden;
}
.inline-submit {
position: relative;
padding-right: 123px;
}
.inline-submit .button {
position: absolute;
right: 0;
top: 0;
width: 118px;
}
.buy-inner i, .buy-inner i a {
color: #C41823;
}
.tooltipster-default {
background: #fff;
border: 2px solid #ddd;
color: #333;
}
.tooltipster-default .tooltipster-content {
font-family: inherit;
font-size: 15px;
}
.mobile-navs {
display: none;
width: 100%;
overflow: hidden;
}
.author-top {
overflow: hidden;
margin-top: 10px;
padding-bottom: 15px;
}
.author-intro-content {
margin-bottom: 50px;
}
.touch .author-intro-content {
margin-bottom: 20px;
}
.book-list-content {
overflow: hidden;
}
h1.search-page-title {
line-height: 34px;
padding-top: 0;
}
.author-events-side .event-preview {
margin-bottom: 20px;
}
.book-list-book {
border-bottom: 1px solid #ddd;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 0px;
}
.separator-container .book-list-book {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
/*.book-list-book:last-child {
border-bottom: none;
}
*/
.search-result-group-blog-image {
display: block;
text-align: center;
}
.search-result-group-blog-image img {
display: inline-block;
vertical-align: top;
}
.book-box {
text-align: center;
background: #ddd;
font-size: 0;
display: block;
}
#event-shop-details {
border: 1px solid #ddd;
}
#event-shop-details .block {
padding: 18px;
}
#event-shop-details .block ~ .block {
border-top: 1px solid #ddd;
}
#event-shop-details img {
float: left;
margin-right: 10px;
}
#event-shop-details .title {
font-family: Baskerville, serif;
color: #000;
font-size: 18px;
}
#event-shop-details .date {
font-size: 14px;
margin-top: 5px;
font-weight: 500;
}
#event-shop-details .price {
font-weight: 600;
font-size: 20px;
}
#event-shop-details .price-subtitle {
font-weight: normal;
margin-top: 10px;
}
#event-shop-details p.location {
font-weight: normal;
font-size: 16px;
}
[id^=eventbrite-widget-container] {
height: 425px;
}
.cookies-not-accepted {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cookies-not-accepted.hidden {
display: none;
}
.cookies-not-accepted a {
cursor: pointer;
text-decoration: underline;
}
#events-terms {
font-size: 14px;
}
.event-preview .status-banner {
color: #990000;
text-align: center;
font-size: 40px;
font-weight: bold;
background: #fff; /* IE8 */
background: rgba(255, 255, 255, 0.77);
position: absolute;
top: 110px;
width: 100%;
padding: 26px 10px;
height: 100px;
margin-top: -50px;
}
.cancelled-header {
color: #990000;
font-size: 18px;
line-height: 20px;
font-weight: bold;
}
.events-result .event-preview {
float: left;
width: 200px;
margin-right: 50px;
}
.events-result .event-preview img {
margin: 0;
}
.events-result .events-result-content {
overflow: hidden;
}
.event-detail-content {
overflow: hidden;
padding-left: 20px;
}
.event-detail-content strong {
color: #5c5c5c;
}
#event-side-books {
float: left;
width: 150px;
}
#event-side-books .book-box ~ .book-box {
margin-top: 15px;
}
.author-detail h1 {
font-size: 23px;
line-height: 25px;
margin: 19px 0;
}
.heading-pagination {
position: relative;
overflow: hidden;
min-height: 55px;
padding-bottom: 10px;
bottom: -1px;
z-index: 1;
}
.account-add-card-frame {
width: 100%;
height: 400px;
}
.basket-add-card-frame {
width: 100%;
height: 400px;
}
.order-screen-frame {
width: 100%;
height: 300px;
}
.main-page .reserve-shop .shop-item .inner {
border-top: none !important;
padding: 0;
}
#search-no-results h2 {
font-size: 28px;
line-height: 1;
margin: 24px 0 30px;
}
#quote-person {
font-weight: bold;
}
#release-days {
font-weight: bold;
color: #5c5c5c;
}
.product-sticker {
width: 60px;
height: 60px;
background: no-repeat center;
background-size: 100% auto;
display: block;
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.product-sticker-hover {
width: 100%;
height: 100%;
background: no-repeat center;
background-size: 100% auto;
display: none;
}
.product-sticker:hover .product-sticker-hover {
display: block;
}
.product-sticker.small {
width: 40px;
height: 40px;
}
.author-directory-items {
margin-bottom: -15px;
}
.user-lists-popup .loading {
display: block;
padding-left: 8px;
padding-right: 8px;
}
/* *** Blog *** */
.blog-preview .image-container img {
width: 100%;
}
/*.header-actions h1.page-title {
padding-top: 5px;
}*/
.blog-detail > img {
width: 100%;
}
.blog-detail .page-detail-actions {
margin-top: 50px;
}
.blog-detail p > a > img,
.blog-detail img.size-full,
.blog-detail .embed-youtube {
display: block;
margin: 0 auto 30px auto;
}
.blog-detail img.size-medium {
display: block;
margin: 0 auto;
}
.blog-detail h2 {
clear: both;
margin-top: 15px;
}
.blog-detail h3 {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
margin-bottom: 10px;
margin-top: 30px;
}
.blog-detail li.p1 {
margin-bottom: 12px;
}
.button-qas.invisible {
visibility: hidden;
opacity: 0;
}
.tab-content-author .author-preview > img {
margin-bottom: 10px;
}
/* *** Homepage *** */
/* *** Banner *** */
.banner img {
width: 100%;
}
/* *** Promo boxes *** */
.preview-image-content img {
display: block;
width: 100%;
}
/* *** Bestsellers list *** */
.bestsellers-list h2 {
margin-top: 0;
}
.bestsellers-list > ul {
list-style: none;
margin: 0 0 -20px 0;
padding: 0;
counter-reset: bestsellers;
overflow: hidden;
}
.bestsellers-list > ul > li {
counter-increment: bestsellers;
position: relative;
min-height: 45px;
padding-left: 60px;
margin-bottom: 20px;
line-height: 40px;
overflow: hidden;
}
.bestsellers-list > ul > li a {
display: block;
}
.bestsellers-list > ul > li:before {
content: counter(bestsellers);
position: absolute;
left: 0;
top: 0;
width: 45px;
height: 45px;
margin-right: 15px;
background: #e2e2e2;
font-family: Baskerville, serif;
font-size: 27px;
line-height: 45px;
text-align: center;
}
.bestsellers-list.bestsellers-list-gold > ul > li:before {
background: #9e866b;
color: #fff;
}
.bestsellers-list > ul > li > div {
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.bestsellers-list ul > li > div .subtitle {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
line-height: 17px;
font-weight: bold;
color: #9e866b;
}
/* **** Infobox **** */
.infobox {
margin-bottom: 0 !important;
overflow: hidden;
}
/* Content */
.infobox-content {
overflow: hidden;
}
/* Header */
.infobox > header,
.pages-header-row {
position: static;
background: none;
overflow: hidden;
z-index: auto;
margin-bottom: 20px;
}
.infobox > header > a,
.pages-header-row > a {
float: right;
margin-left: 26px;
}
.infobox > header h2,
.pages-header-row h2 {
margin-top: 3px;
margin-bottom: 0;
line-height: 26px;
}
.infobox > header {
padding: 0;
}
.pages-header-row {
display: flex;
flex-flow: row-reverse;
justify-content: space-between;
align-items: center;
margin-top: 3px;
}
.carousel-heading {
margin-bottom: 15px;
}
/* Figure */
.infobox figure {
float: left;
max-width: 300px;
margin-right: 20px;
margin-bottom: 10px;
}
.infobox figure img {
display: block;
}
/* Preview Promo */
.preview-promo {
margin-bottom: 20px;
}
.preview-promo > a.inner {
display: block;
text-decoration: none;
}
.preview-promo > .inner > img {
display: block;
width: 100%;
}
.preview-promo .title {
font-size: 25px;
line-height: 1;
margin-bottom: 10px;
}
.preview-promo .book-preview .title-wrap .title {
font-size: 15px;
line-height: 1.2;
}
.preview-promo a.inner:hover .title {
text-decoration: underline;
}
.preview-promo .title b {
font-weight: inherit;
color: #343434;
}
.preview-promo .details {
margin-top: 25px;
}
/* Preview Brick */
.preview-bricks {
overflow: hidden;
}
.preview-brick {
margin-bottom: 20px;
}
.preview-brick.with-content {
font-size: 0;
white-space: nowrap;
}
.preview-brick .inner {
position: relative;
display: block;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-ms-behavior: url(/stylesheets/backgroundsize.min.htc);
color: #fff;
text-decoration: none;
overflow: hidden;
}
.preview-brick .inner > img {
display: block;
width: 100%;
}
.preview-brick.with-content .inner > img {
display: inline-block;
vertical-align: middle;
visibility: hidden;
}
.preview-brick-content {
display: none;
width: 100%;
margin-left: -100%;
padding: 0 20px;
}
.preview-brick.with-content .preview-brick-content {
display: inline-block;
vertical-align: middle;
}
.preview-brick-content .title {
margin: 0 0 5px 0;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 28px;
font-weight: bold;
font-style: italic;
line-height: 20px;
color: #fff;
text-transform: uppercase;
}
.preview-brick-content p {
margin-top: 0;
}
.starting-location-form {
display: none;
margin-top: 5px;
}
.starting-location-form.active {
display: block;
}
.starting-location-form .right.floater {
position: relative;
margin-left: -2px;
}
.starting-location-form input {
min-width: 0;
width: 100%;
}
.span6.preview-action {
clear: left;
}
.span6.preview-action + .span6.preview-action {
clear: none;
}
.rb-image-outer {
display: block;
}
.rb-image-outer img {
display: block;
}
.lt-ie9 .rb-image-outer img {
max-width: none !important;
height: auto !important;
width: 100% !important;
}
[class*=span] > .ws-select-outer {
width: 100%;
max-width: none;
}
#ebook-popup {
position: fixed;
left: 50%;
margin-left: -200px;
width: 400px;
border: 3px solid #336b75;
background: #fff;
z-index: 110;
padding: 10px;
display: none;
}
#ebook-popup p {
margin-top: 0;
}
#popup-under {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.6;
z-index: 100;
display: none;
}
.order-block .book-info .title {
display: block;
font-weight: bold;
}
.order-block .book-info .title-author {
margin-top: 10px;
}
/*.order-block .book-info {
padding-left: 94px;
padding-right: 150px;
}*/
/*a.button.button-teal.ebook-download-button {
position: absolute;
right: 30px;
top: 50%;
margin-top: -17px;
}*/
#error-404-container {
background: url(../img/ui/404-book.jpg);
width: 940px;
height: 834px;
padding-top: 102px;
}
#error-404-container p.heading-fg {
font-size: 34px;
line-height: 40px;
font-weight: 900;
color: #999;
}
#error-404-container .page {
width: 50%;
display: inline-block;
vertical-align: top;
}
#error-404-container #p1 {
padding-left: 118px;
padding-right: 26px;
}
#error-404-container #p2 {
padding-left: 52px;
padding-right: 100px;
}
#error-404-container #p2 p.heading-fg {
text-transform: none;
padding-left: 10px;
min-height: 225px;
}
#error-404-container #p2 p.heading-fg:before {
content: "“";
margin-left: -26px;
}
#error-404-container #p2 p.heading-fg:after {
content: "”";
}
#error-help {
color: #999;
font-size: 20px;
font-weight: normal;
margin: 32px 0 16px;
padding-right: 21px;
}
#error-404-container p,
#error-404-mobile p {
font-size: 18px;
color: #777;
font-weight: normal;
}
#error-404-container ul,
#error-404-mobile ul {
font-size: 18px;
color: #777;
font-weight: normal;
list-style: none;
margin-left: 20px;
}
#error-404-container ul li:before,
#error-404-mobile ul li:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: #336b75;
vertical-align: baseline;
margin-right: 12px;
margin-left: -20px;
}
#error-404-container a,
#error-404-mobile a {
color: #9e866b;
font-weight: bold;
}
#error-cover {
text-align: right;
margin-top: 25px;
}
#error-404-container .search-box .input {
border: 2px solid #336b75;
padding: 5px 9px;
background: none;
}
#error-404-container .search-box {
margin-top: 20px;
text-align: center;
}
#error-404-mobile #quote-image {
vertical-align: top;
}
#error-404-mobile #mobile-image {
max-width: 480px;
}
#error-404-mobile p,
#error-404-mobile ul {
margin-top: 20px;
margin-bottom: 20px;
}
#error-404-mobile {
display: none;
}
#holding-message {
width: 100%;
line-height: 30px;
background: red;
color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
}
body.holding-enabled {
padding-bottom: 30px;
}
/*#overlay {
background:rgba(0,0,0,0.85);
display: none;
width:100%;
height:100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.desktop-overlay {
position: relative !important;
z-index: 10000 !important;
background-color: white !important;
padding-left: 0px !important;
padding-right: 0px !important;
}*/
/*For alert box
*/
.alertMsg {
border: 3px #336b75 solid;
width: 70%;
background-color: #E3E3E3;
position: absolute;
left: 15%;
top: 0;
z-index: 9002;
padding: 20px;
}
.hideMsg,
.display-none {
display: none;
}
.showMsg {
display: block;
}
span.alertMsg {
border: none;
background-color: #FFF;
color: #CD0003;
position: relative;
left: 0%;
top: -7%;
padding: 0px;
z-index: 1;
}
.message_button {
border: 0px solid #336b75;
-webkit-box-shadow: #336b75 0px 0px 1px inset;
-moz-box-shadow: #336b75 0px 0px 1px inset;
box-shadow: #336b75 0px 0px 1px inset;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
padding: 7px 10px 7px 10px;
text-decoration: none;
display: inline-block;
font-weight: bold;
color: #FFFFFF;
background-color: #336b75;
background-image: -webkit-gradient(linear, left top, left bottom, from(#336b75), to(#336b75));
background-image: -webkit-linear-gradient(top, #336b75, #336b75);
background-image: -moz-linear-gradient(top, #336b75, #336b75);
background-image: -ms-linear-gradient(top, #336b75, #336b75);
background-image: -o-linear-gradient(top, #336b75, #336b75);
background-image: linear-gradient(to bottom, #336b75, #336b75);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#336b75, endColorstr=#336b75);
}
.message_button:hover {
border: 0px solid #336b75;
background-color: #4BB4B3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4BB4B3), to(#4BB4B3));
background-image: -webkit-linear-gradient(top, #4BB4B3, #4BB4B3);
background-image: -moz-linear-gradient(top, #4BB4B3, #4BB4B3);
background-image: -ms-linear-gradient(top, #4BB4B3, #4BB4B3);
background-image: -o-linear-gradient(top, #4BB4B3, #4BB4B3);
background-image: linear-gradient(to bottom, #4BB4B3, #4BB4B3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#4BB4B3, endColorstr=#4BB4B3);
}
/* Wish Lists */
.add-all-container {
float: right;
display: block;
}
.add-all-container.above {
margin-bottom: 20px;
}
.add-all-container.below {
margin-top: 20px;
}
.add-all-container .message {
display: inline-block;
margin-top: 10px;
margin-right: 5px;
}
.book-list-book .wishlist-add-to-basket.basket-form {
padding: 0;
border: none;
}
.book-list-book .wishlist-add-to-basket.basket-form .wishlist-button {
margin-right: 40px;
}
/*
review form
*/
.reviews-write .review-rate {
border: none;
padding: 0;
text-align: center;
}
.reviews-write .review-rate span {
margin-bottom: 8px;
display: block;
}
.reviews-write .review-stars-wrapper .star-rating {
width: auto;
}
.reviews-write .review-stars-wrapper .star-rating > div {
width: 50px;
height: 50px;
margin-right: 24px;
}
.reviews-write .review-stars-wrapper .star-rating > div:before {
font-size: 40px;
}
.reviews-write .book-list-add .search-bar .title {
margin-bottom: 8px;
display: inline-block;
}
.reviews-write .button-submit {
margin-top: 10px;
}
.reviews-write .review-tips-container {
margin-bottom: 25px;
}
.reviews-write .checkbox-label .ws-checkable-outer {
margin-bottom: 0;
float: none;
}
.added-basket {
position: absolute;
top: 100%;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #eee;
background: rgba(0, 0, 0, 0.5);
transition: top 0.3s, opacity 0.2s;
pointer-events: none;
text-align: center;
opacity: 0;
}
.added-basket.added-show {
top: 0;
opacity: 1;
}
.added-basket > div {
display: flex;
flex-direction: column;
font-size: 16px;
padding: 0 20px;
}
.added-basket .icon-tick,
.added-basket .icon-error {
width: 20px;
height: 20px;
filter: invert(100%);
}
.added-basket .icon-tick {
background-position: -3px -124px;
margin: auto;
transform: scale(1.4);
}
.added-basket .icon-error {
margin: auto auto 5px;
transform: scale(1.2);
background: center/contain url(../img/ui/cross-grey.png) no-repeat;
}
.book-preview-list-item .added-basket span {
display: none;
}
.clearfix {
clear: both;
}
html.safari {
height: 100% !important;
}
html.safari,
html.safari body {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
}
/** CGC **/
.cgc-page .ws-select-outer.ws-select-large {
max-width: none;
}
.cgc-content {
float: left !important;
}
.cgc-row {
margin: 30px 0 0;
background-color: #e9eaea;
padding: 10px 20px 20px;
border-radius: 10px;
float: left;
width: 100%;
text-align: center;
}
.cgc-form {
margin-bottom: 10%;
}
label#tc {
display: inline;
}
#cgcform .cgc-button {
margin: 20px;
}
#cgcform .input-narrow {
width: 10%;
}
#cgcform .tile-text {
color: black;
font-weight: bold;
}
#cgcform label[for=gc] {
text-align: center;
}
.cgcform h1, .cgcform h2 {
padding: 20px 0px;
}
.cgc-tc {
margin: 30px 0px;
}
#cgcform img.prodthumb {
border: thin solid #000;
border-radius: 5px;
display: inline-block;
width: 200px;
}
#cgcform .order-form.sub-panel.open h2 {
margin-bottom: 0;
}
#cgcform .input.input-large {
margin-bottom: 0;
}
#cgcform .label-container label {
vertical-align: bottom;
margin-bottom: 4px;
}
#cgcform .basket {
width: calc(100% + 20px) !important;
margin-left: -10px;
}
#cgcform .basket .span2 .tile-text {
text-align: center;
}
#cgcform input[name="order_item[GC5]"],
#cgcform input[name="order_item[GC10]"],
#cgcform input[name="order_item[GC15]"],
#cgcform input[name="order_item[GC20]"],
#cgcform input[name="order_item[GC25]"],
#cgcform input[name="order_item[GC50]"],
#cgcform input[name=GC_OTHER_AMOUNT],
#cgcform input[name=GC_OTHER_QTY],
#cgcform input[name="order_item[GCE]"] {
width: 44px;
}
#cgcform label.input-error {
margin: 5px 0;
}
#cgcform .input-symbol-pound {
position: relative;
}
#cgcform .input-symbol-pound:before {
position: absolute;
top: 4px;
content: "£";
left: 5px;
font-size: 15px;
}
.cgc-page td {
border: 1px solid black;
padding: 5px;
}
/** IPS **/
#ipsform .input-symbol-pound {
position: relative;
}
#ipsform .input-symbol-pound:before {
position: absolute;
content: "£";
left: 5px;
font-size: 15px;
padding-top: 15px;
}
.book-detail-cnc .button.js-open-modal {
position: relative !important;
width: auto !important;
padding: 0 16px !important;
float: right !important;
margin-right: 14px;
margin-top: 3px;
}
@media only screen and (max-width: 640px) {
.book-detail-cnc .button.js-open-modal {
margin-top: 0;
}
.upload-profile-image .button-grey {
float: right;
margin-bottom: 14px;
}
.upload-profile-image .button {
width: 60%;
}
.register-page .button-teal {
display: block;
}
.register-page .button-teal,
.profile-page .button-teal,
.profile-page .button-danger {
margin: 0 auto;
float: none;
width: 74%;
margin-top: 12px;
}
.profile-page .button-teal,
.profile-page .button-danger {
width: 100%;
}
.email-genres {
width: 100%;
}
.no-touch .row .accountSidebar.generic-sidebar.accountSidebar-sticky,
.row .accountSidebar-sticky {
width: 100% !important;
max-width: none !important;
position: relative !important;
top: auto !important;
}
.acc-trigger {
cursor: pointer;
padding: 8px 0;
position: relative;
}
.acc-trigger:after {
content: "\e605";
position: absolute;
right: -5px;
top: 50%;
margin-top: -19px;
display: block;
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-indent: 0;
color: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-size: 40px;
color: #494949;
visibility: visible;
transition: transform 0.5s;
}
.acc-trigger.triggered:after {
transform: rotate(90deg);
}
.acc-content {
display: none;
}
.email-category-wrap .acc-content {
padding-bottom: 20px;
float: left;
}
.prefs-area.prefs-disabled .prefs-wrap {
display: none;
}
.prefs-area .email-subscribe-wrap {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.validate-button-wrap {
float: right;
display: flex;
flex-direction: column;
width: 100%;
}
.validate-button-wrap > * {
margin-bottom: 10px;
width: 100%;
}
}
html.touch .preview-flip-container .slick-slide img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
html.touch .book-detail .book-image-wrap {
width: 100%;
}
html.touch .book-detail .book-image-wrap ul.inner {
display: block;
font-size: 0;
overflow: hidden;
}
html.touch .book-detail .book-image-wrap ul.inner.multi-img {
height: 450px;
}
html.touch .book-detail .book-image-wrap ul.inner.multi-img:not(.slick-initialized) li:not(:first-child) {
display: none;
}
html.touch .book-detail .book-image-wrap ul.inner.multi-img .slick-slide img {
max-height: 410px;
}
html.touch .book-detail .book-image-wrap ul.inner > li {
height: 400px;
}
html.touch .book-detail .book-image-wrap ul.inner img {
max-height: 100%;
}
html.touch .book-detail .book-image-wrap .slick-dots {
bottom: -6px;
width: calc(100% - 30px);
text-align: left;
}
@media only screen and (max-width: 640px) {
html.touch .book-detail .book-image-wrap .slick-dots {
width: 100%;
text-align: center;
}
}
html.touch .book-image-thumbs,
html.touch .book-image-main > img,
html.touch .book-detail .additional-images {
display: none;
}
.swiper .book-preview > div {
position: relative;
}
.swiper .book-preview .quick-overlay {
cursor: pointer;
}
#detailModal header {
background: #336b75;
}
#detailModal .modal-body {
position: relative;
}
#detailModal .detail-modal-image {
float: left;
width: 40%;
padding: 15px 10px 15px 20px;
text-align: center;
}
#detailModal .detail-modal-image img {
max-height: calc(100vh - 150px);
}
#detailModal .detail-modal-info {
float: left;
width: 60%;
padding: 15px 20px 30px 10px;
position: relative;
}
#detailModal .detail-modal-info .book-title {
font-family: Baskerville, serif;
font-weight: 400;
color: #333;
font-size: 24px;
display: block;
text-decoration: none;
}
#detailModal .detail-modal-info .book-synopsis {
max-height: 200px;
overflow: auto;
font-size: 14px;
padding-right: 6px;
margin: 10px 0;
position: relative;
}
#detailModal .user-lists-popup {
bottom: 0;
right: 100%;
}
@media only screen and (max-width: 800px) {
#detailModal .detail-modal-info .book-synopsis {
max-height: 23vw;
}
}
#detailModal .detail-modal-info .book-synopsis p:first-child {
margin-top: 0;
}
#detailModal .detail-modal-info .star-rating {
margin: 0px 14px 7px -4px;
}
#detailModal .detail-modal-info .book-format {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
#detailModal .detail-modal-info .book-format .info {
display: flex;
flex-direction: column;
padding-right: 10px;
}
#detailModal .detail-modal-info .book-format .info .name {
font-weight: bold;
}
#detailModal .detail-modal-info .book-format .info .subtitle {
font-style: italic;
}
#detailModal .detail-modal-info .book-format div.price > div {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
}
#detailModal .detail-modal-info .book-format div.price .price-rrp {
font-size: 14px;
}
#detailModal .detail-modal-info .stock-message {
margin-top: 10px;
color: #336b75;
font-weight: bold;
width: calc(100% - 60px);
}
#detailModal .detail-modal-info .availability-message {
font-weight: bold;
font-size: 14px;
}
#detailModal .add-list-button-wrap {
position: absolute;
right: 20px;
bottom: 15px;
}
#detailModal .add-list-button-wrap .action-icon {
border: 1px solid #ddd;
}
#detailModal .post-add {
display: none;
}
#detailModal footer {
padding: 12px 20px;
background: #eee;
}
#detailModal footer a.more-details {
float: left;
}
#detailModal .basket-form {
display: inline-block;
}
#detailModal .in-basket,
#detailModal .button-buy {
width: 165px;
margin-left: 4px;
margin-bottom: 0;
float: left;
}
#detailModal .button-container .button {
float: left;
margin-bottom: 0;
}
.modal-open .tooltipster-default {
position: fixed;
}
#detailModal .more-details-link {
display: none;
}
@media only screen and (max-width: 640px) {
#detailModal .modal-body {
max-height: calc(100vh - 170px);
}
#detailModal .detail-modal-image {
position: absolute;
top: 0;
left: 0;
padding-left: 10px;
width: 85px;
z-index: 1;
}
#detailModal .detail-modal-info .book-synopsis {
max-height: none;
}
#detailModal .detail-modal-info {
padding-right: 10px;
width: 100%;
}
#detailModal .detail-modal-info .book-main-info {
padding-left: 85px;
min-height: 105px;
}
#detailModal .add-list-button-wrap {
right: 10px;
}
#detailModal footer {
padding: 12px 10px;
}
#detailModal .basket-form {
width: 100%;
}
#detailModal .basket-form .buy-inner .button-container {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
#detailModal .basket-form .buy-inner .button-container .collect-open {
order: 2;
}
#detailModal .more-details-link {
display: block;
width: 100%;
text-align: center;
font-weight: bold;
padding-bottom: 8px;
}
#detailModal footer .button.more-details {
display: none;
}
#detailModal .button-container .button {
width: auto;
height: auto;
line-height: normal;
padding: 6px 12px;
font-size: 15px;
}
}
#reportReviewModal header h3 {
text-transform: capitalize;
}
#reportReviewModal .modal-body {
padding: 10px 20px 20px;
}
#reportReviewModal p {
margin-bottom: 15px;
}
#reportReviewModal button {
float: right;
margin-top: 5px;
}
@media only screen and (max-width: 640px) {
#reportReviewModal .modal-body {
padding: 10px;
}
}
.book-preview.book-preview-list-item .add-list-button-wrap {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
}
.book-preview.book-preview-list-item .add-list-button-wrap .action-icon.icon-heart {
border: 0;
position: absolute;
top: 0;
right: 0;
border: 1px solid #ddd;
background: #fff;
z-index: 2;
}
.book-preview.book-preview-list-item .add-list-button-wrap .user-lists-popup {
position: absolute;
min-width: 250px;
right: 0;
top: 38px;
}
.book-preview.book-preview-list-item .title-container,
.book-preview.book-preview-list-item .author {
width: calc(100% - 48px);
}
.synced_slider {
padding-bottom: 20px;
}
.synced_slider .synced_slider_feature {
margin: 0 0 15px 0;
overflow: hidden;
background: #dee6ff;
}
.synced_slider .synced_slider_nav {
margin: 15px 30px;
}
.synced_slider .synced_slider_nav:not(.slick-initialized) {
height: 200px;
overflow: hidden;
}
.synced_slider .synced_slider_nav:not(.slick-initialized) > div {
width: 25%;
float: left;
height: 100%;
}
.synced_slider .synced_slider_nav:not(.slick-initialized) > div,
.synced_slider .synced_slider_nav .slick-slide {
padding-top: 4px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid transparent;
cursor: pointer;
margin: 0 8px;
transition: padding 0.3s, border 0.3s;
}
.synced_slider .synced_slider_nav .slick-slide:focus {
outline: none;
}
.synced_slider .synced_slider_nav .slick-slide.synced_selected {
border-color: #000;
padding-bottom: 6px;
padding-top: 0;
}
.synced_slider .slick-slide img {
width: 100%;
}
.synced_slider .synced_slider_feature .feature-image {
position: relative;
width: 70%;
float: left;
display: flex;
align-items: center;
justify-content: center;
border: 12px solid transparent;
border-width: 12px 0 12px 12px;
overflow: hidden;
}
.synced_slider .synced_slider_feature .feature-image .sync-img-mob {
display: none;
}
.synced_slider.zoomable .synced_slider_feature .feature-image {
cursor: pointer;
}
.synced_slider.zoomable .synced_slider_feature .feature-image:after {
position: absolute;
bottom: 5px;
right: 5px;
width: 35px;
height: 35px;
content: "";
background-image: url(../img/searchiconblk.png);
background-repeat: no-repeat;
opacity: 0.7;
background-size: 80%;
background-color: #fff;
filter: invert(0);
background-position: center;
}
.synced_slider .synced_slider_feature .feature-text {
width: 30%;
float: left;
color: #fff;
padding: 12px 60px 12px 0;
overflow: hidden;
}
.synced_slider .synced_slider_feature .feature-text h2 {
margin: 6px auto;
}
.synced_slider .synced_slider_feature .feature-text .show-container:not(.heightAuto):before {
background: -moz-linear-gradient(top, rgba(222, 230, 255, 0) 0%, rgb(222, 230, 255) 50%);
background: -webkit-linear-gradient(top, rgba(222, 230, 255, 0) 0%, rgb(222, 230, 255) 50%);
background: linear-gradient(to bottom, rgba(222, 230, 255, 0) 0%, rgb(222, 230, 255) 50%);
}
.synced_slider .synced_slider_feature .feature-text .show-button {
text-transform: uppercase;
}
.synced_slider .synced_slider_feature .feature-text-inner {
padding: 10px 20px;
max-height: 100%;
overflow-y: auto;
}
.synced_slider .synced_slider_feature .feature-text {
font-size: 16px;
font-family: "Source Sans Pro", Arial, sans-serif;
color: #000;
}
.synced_slider .synced_slider_feature .slick-prev,
.synced_slider .synced_slider_feature .slick-next {
right: 0;
left: auto;
height: 50%;
top: 50%;
width: 60px;
background: #eee;
border: 1px solid #ddd;
margin: 0;
z-index: 10;
}
.synced_slider .slick-prev:before,
.synced_slider .slick-next:before {
content: "";
background: url(../img/ui/chevron_black.png);
background-size: 16px, 30px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
}
.synced_slider .slick-prev:before {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.synced_slider .synced_slider_feature .slick-next {
top: 0;
}
.synced_slider img.slick-loading {
height: 1px;
}
.synced_slider .synced_slider_nav .slick-prev,
.synced_slider .synced_slider_nav .slick-next {
margin-top: 0;
background: none;
}
@media only screen and (max-width: 1023px) {
.synced_slider .synced_slider_feature {
max-height: none;
padding-bottom: 8px;
}
.synced_slider .synced_slider_feature .feature-image,
.synced_slider .synced_slider_feature .feature-text {
width: 100%;
}
.synced_slider .synced_slider_feature .feature-image {
border-width: 12px 12px 0px 12px;
cursor: auto;
}
.synced_slider .synced_slider_feature .feature-text {
height: auto;
}
.synced_slider .synced_slider_feature .feature-text-inner {
padding: 0;
overflow-y: hidden;
}
.synced_slider .synced_slider_feature .feature-text-inner p:first-child {
margin-top: 0;
}
.synced_slider .synced_slider_feature .slick-next,
.synced_slider .synced_slider_feature .slick-prev {
height: 50px;
width: 50px;
left: -10px;
top: 21.5053763441vw;
background: none;
border: none;
}
.synced_slider .synced_slider_feature .slick-next:before,
.synced_slider .synced_slider_feature .slick-prev:before {
background-image: url(../img/ui/chevron_white.png);
opacity: 1;
background-size: 22px, 37px;
}
.synced_slider .synced_slider_feature .slick-next.slick-disabled:before,
.synced_slider .synced_slider_feature .slick-prev.slick-disabled:before {
opacity: 0;
}
.synced_slider .synced_slider_feature .slick-next {
left: auto;
right: -10px;
}
.synced_slider .synced_slider_feature .slick-dots {
bottom: auto;
top: 315px;
}
.synced_slider .synced_slider_feature .feature-text {
padding: 8px 12px;
}
}
@media only screen and (min-width: 641px) {
.synced_slider .synced_slider_feature .feature-text-inner.show-container.show-more {
height: auto !important;
}
.synced_slider .synced_slider_feature .feature-text-inner .show-button,
.synced_slider .synced_slider_feature .feature-text .show-container:not(.heightAuto):before {
display: none;
}
.synced_slider .synced_slider_feature .feature-text {
line-height: 1.3em;
}
.synced_slider .synced_slider_feature .feature-text h2 {
line-height: 1.2em;
}
}
@media only screen and (max-width: 640px) {
.synced_slider .synced_slider_feature .feature-image .sync-img-mob {
display: block;
}
.synced_slider .synced_slider_feature .feature-image .sync-img-dsktp {
display: none;
}
.synced_slider .synced_slider_feature {
margin-bottom: 0;
}
.synced_slider .synced_slider_nav {
margin-top: 10px;
}
.synced_slider .synced_slider_feature .slick-next,
.synced_slider .synced_slider_feature .slick-prev {
top: 32.2580645161vw;
}
.synced_slider .synced_slider_feature .feature-text h2 {
font-size: 21px;
}
}
.fullscreen-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.fullscreen-lightbox:after {
position: absolute;
top: 5px;
right: 25px;
padding: 2px 12px 0;
content: "×";
color: #000;
opacity: 0.7;
background-color: #fff;
filter: invert(0);
font-weight: bold;
font-size: 34px;
}
.fullscreen-lightbox img {
max-width: 100%;
max-height: 100%;
}
.loyaltyModal .modal-body {
padding: 10px 20px;
}
.card-option-desc {
font-size: 20px;
margin-top: 20px;
}
.card-option-desc a {
font-weight: bold;
}
.card-option-wrap {
display: flex;
justify-content: space-between;
margin: 12px 0;
padding-bottom: 40px;
}
.card-option-wrap > div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.card-option-wrap ul {
float: left;
width: 100%;
height: 100%;
border: 2px solid #fff;
margin: 0;
padding: 6px 6px 6px 20px;
font-size: 14px;
text-align: left;
}
.card-option-wrap ul li {
padding: 3px 0;
}
.card-option-wrap > div:not(:last-child) {
margin-right: 10px;
}
.card-option-wrap .card-option,
.card-upgrade-wrap .card-option {
width: 100%;
min-height: 80px;
background-color: #aaa;
font-size: 20px;
color: #fff;
text-align: center;
padding: 15px;
align-items: center;
display: flex;
justify-content: center;
font-weight: 400;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
}
.card-option-wrap .card-option.selected {
background-color: #336b75;
}
.card-option-wrap .card-option.no-show {
display: none;
}
.card-option-wrap .card-option + div {
font-size: 15px;
font-weight: normal;
padding-top: 6px;
}
.plus-form.account-basic .register-wrap,
.plus-form.account-auto .register-wrap {
margin-top: 0;
}
.plus-form label.input-error,
.plus-form label.error {
background-color: #FFDEDE;
color: #B60303;
font-style: normal;
font-size: 0.75rem;
font-weight: 400;
padding: 4px 10px;
font-family: "Source Sans Pro", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
position: relative;
}
.plus-form .work-location label.input-error,
.plus-form .work-location label.error {
margin-top: 5px;
clear: both;
}
.plus-form label.input-error .plus-warning-main,
.plus-form label.input-error .plus-warning-sub {
display: block;
}
.plus-form label.input-error .plus-warning-main {
color: #B60303;
padding: 10px 0 3px;
}
.plus-form label.input-error .plus-warning-sub {
color: #000;
padding: 3px 0 10px;
}
.plus-form label.input-error + #pw_macho {
margin-top: -10px;
}
.plus-form.account-basic .hide-basic {
display: none;
}
.plus-form .show-basic {
display: none;
}
.plus-form.account-basic .show-basic {
display: block;
}
.show-basic,
.show-book,
.show-student {
display: none;
}
.card-1 .show-basic,
.card-2 .show-book,
.card-3 .show-student {
display: block;
}
.card-1 span.show-basic,
.card-2 span.show-book,
.card-3 span.show-student {
display: inline;
}
.card-fields .reg-loyalty-input {
margin-bottom: 14px;
display: none;
}
.email-preferences .check-marketing .checkbox-label .label-content,
.email-preferences .check-sms .checkbox-label .label-content,
.email-preferences .account-content .checkbox-label .label-content {
max-width: calc(100% - 40px);
float: left;
}
.check-marketing .checkbox-label > .ws-checkable-outer,
.check-sms .checkbox-label > .ws-checkable-outer,
.account-content .checkbox-label > .ws-checkable-outer {
float: right;
margin-right: 0;
top: -4px;
}
.card-3 .check-marketing,
.card-2 .check-marketing {
display: none;
}
.check-marketing .checkbox-label,
.check-sms .checkbox-label,
.account-content .checkbox-label {
display: flex;
justify-content: space-between;
align-items: center;
}
.check-sms {
display: none;
}
.check-sms .checkbox-label {
margin: 0 0 20px;
}
/* PLUS Registration form */
.plus-form {
color: #000;
}
.plus-form form {
padding: 0 18px;
}
.plus-logo-wrap {
width: 320px;
max-width: 70%;
margin: 0 auto 2%;
}
.plus-logo,
.plus-logo-green,
.plus-logo-blue {
background: url(../img/plus/plus-logo-green.png) no-repeat center;
background-size: contain;
padding-bottom: 20%;
}
.plus-logo-blue {
background-image: url(../img/plus/plus-logo-blue.png);
}
.book-seller .plus-logo {
background-image: url(../img/plus/plus-logo-purple.png);
}
.plus-form .reg-intro {
width: 100%;
color: #000;
text-align: center;
padding: 0 100px 20px;
font-size: 14px;
display: inline-block;
}
.account-basic .reg-intro {
padding: 0 18px;
padding-bottom: 20px;
}
.plus-form .reg-intro p {
padding-left: 8%;
padding-right: 8%;
margin-bottom: 5px;
}
.reg-intro h3 {
margin: 0 0 14px;
font-size: 16px;
text-transform: uppercase;
font-family: "Source Sans Pro", Arial, sans-serif;
font-style: normal;
font-weight: 300;
}
.plus-form .form-info-msg {
color: #8e8e8e;
font-size: 12px;
}
.plus-form .form-info-msg.label-container {
display: block;
}
.plus-form .label-container:before {
margin-right: 0;
}
.plus-form .account-plus .button.button-teal,
.plus-form.account-plus .button.button-teal {
background: #80c078;
}
.book-seller .plus-form .account-plus .button.button-teal,
.book-seller .plus-form.account-plus .button.button-teal {
background: #a783b7;
}
.plus-form.account-student .button.button-teal {
background: #76c0e2;
}
.plus-form .ws-checkbox-outer:before {
font-size: 34px;
text-indent: 2px;
}
.plus-form .ws-radio-outer:before {
width: 14px;
height: 14px;
}
.plus-form .account-plus .ws-checkbox-outer:before,
#loginModal.modal-box.plus .ws-checkbox-outer:before,
.plus-form.account-plus .ws-checkbox-outer:before,
.plus-form .ws-checkbox-outer.field-plus:before {
color: #80c078;
}
.plus-form.account-student .inline-plus,
.plus-form.account-student .ws-checkbox-outer:before,
.plus-form .ws-checkbox-outer.field-student:before {
color: #69afd0;
}
.plus-form .account-plus .ws-checkable-outer,
#loginModal.modal-box.plus .ws-checkable-outer,
.plus-form.account-plus .ws-checkable-outer,
.plus-form .ws-checkable-outer.field-plus {
background: #e7f5e6;
}
.plus-form.account-student .ws-checkable-outer,
.plus-form .ws-checkable-outer.field-student {
background: #d5edf9;
}
#loginModal.modal-box.plus .ws-checkable-outer,
#loginModal.modal-box.plus .ws-checkable-outer:focus,
#loginModal.modal-box.plus .input:not([disabled]):focus,
#loginModal.modal-box.plus .input:not([disabled]):active,
.plus-form .ws-checkable-outer:focus,
.plus-form .ws-checkable-outer:active,
.plus-form .ws-checkable-outer.checked,
.plus-form div.fancy-select div.trigger.open,
.plus-form div.fancy-select select:focus + div.trigger .plus-form .input:not([disabled]):focus,
.plus-form .input:not([disabled]):active,
.plus-form .input.input-error,
.plus-form div.fancy-select ul.options,
.plus-form .input.input-large:focus,
.plus-form .input.input-large.input-error,
.plus-form .input.input-large.error,
.plus-form .fancy-select div.trigger.open,
.plus-form .fancy-select select:focus + div.trigger {
border: 1px solid #b4b4b4;
}
.plus-form .input.input-large:focus,
.plus-form .input.input-large.input-error,
.plus-form .input.input-large.error {
padding: 10px 12px;
}
.plus-form div.fancy-select div.trigger.open,
.plus-form div.fancy-select select:focus + div.trigger {
padding: 1px 35px 1px 13px;
}
.plus-form .checkbox-label {
display: flex;
padding-top: 0;
line-height: normal;
justify-content: left;
overflow: visible;
}
.plus-form .checkbox-label .label-content {
line-height: normal;
overflow: visible;
}
.plus-login .plus-form .checkbox-label .label-content {
line-height: 38px;
}
.plus-form .ws-checkable-outer {
border: 1px solid #b4b4b4;
background: #e0e9ee;
}
.plus-form label > .ws-checkable-outer:not(.ws-radio-outer) {
margin: 4px 14px 4px 0;
}
.plus-form label > .ws-checkable-outer:not(.ws-radio-outer):before {
content: "";
background: url(../img/ui/tick-teal.png) top right no-repeat;
background-size: contain;
position: absolute;
top: -4px;
left: 0;
width: 35px;
height: 25px;
}
.plus-form label > .ws-checkable-outer.check-plus:not(.ws-radio-outer):before,
.plus-form .account-plus label > .ws-checkable-outer:not(.ws-radio-outer):before,
.plus-form.account-plus label > .ws-checkable-outer:not(.ws-radio-outer):before {
background-image: url(../img/ui/tick-green.png);
}
#loginModal.modal-box.plus label > .ws-checkable-outer:not(.ws-radio-outer):before {
content: "";
width: 17px;
height: 17px;
background-image: url(../img/ui/tick-green.png);
background-size: contain;
background-repeat: no-repeat;
margin-top: -2px;
margin-left: 2px;
}
.plus-form label > .ws-checkable-outer.check-student:not(.ws-radio-outer):before,
.plus-form.account-student label > .ws-checkable-outer:not(.ws-radio-outer):before {
background-image: url(../img/ui/tick-blue.png);
}
.plus-form .inline-radios {
display: flex;
align-items: center;
padding: 0;
}
.plus-form .inline-radios label {
margin: 4px 0;
}
.plus-form .inline-radios fieldset > label {
margin: 10px 20px 10px 0;
}
.plus-form .checkbox-label .ws-checkable-outer {
top: 0;
margin-bottom: 0;
flex-shrink: 0;
}
.plus-form .option-block .card-fields {
margin-top: 12px;
}
.plus-form .password-input-wrap {
position: relative;
}
.plus-form .password-input-wrap input {
width: 100%;
padding-right: 76px !important;
}
.plus-form .pre-add {
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 940px) {
.plus-form .pre-add {
flex-direction: column;
}
}
.plus-form .pdp-ctas {
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 940px) {
.plus-form .pdp-ctas {
margin-top: 15px;
justify-content: flex-end;
}
}
@media only screen and (max-width: 640px) {
.plus-form .pdp-ctas {
flex-direction: column;
}
.plus-form .pdp-ctas .pdp-qty {
text-align: center;
}
}
.plus-form .pre-add .perk-list,
.plus-form .pre-add .perk-container {
margin-top: 0;
}
.plus-form .quantity {
margin-right: 10px;
}
@media only screen and (min-width: 941px) {
.plus-form .pdp-qty {
margin: 0 15px 0 30px;
text-align: center;
flex-direction: column-reverse;
display: flex;
justify-content: start;
align-items: center;
}
.plus-form .pdp-qty label {
margin-right: 0;
}
.plus-form .quantity {
margin-bottom: 6px;
margin-right: 0;
}
}
.plus-form .perk-list li {
padding-right: 10px;
}
.plus-form .perk-list li ~ li {
padding-left: 0;
}
.plus-form a[href].plus-learn-more,
.plus-form a[href].student-learn-more {
text-transform: uppercase;
font-weight: 400;
text-decoration: underline;
}
.plus-form .plus-learn-more:focus,
.plus-form .plus-learn-more:active,
.plus-form .plus-learn-more:hover,
.plus-form .plus-learn-more {
color: #80c078;
}
.plus-form .student-learn-more:focus,
.plus-form .student-learn-more:active,
.plus-form .student-learn-more:hover,
.plus-form .student-learn-more {
color: #69afd0;
}
.plus-form .plus-box {
position: relative;
padding: 26px;
margin: 14px 0 10px;
display: none;
}
.plus-alert-info {
background: #ffe1e1;
padding: 10px 26px;
text-align: center;
font-size: 14px;
}
#loginForm.plus-form .plus-alert-info {
margin-bottom: 12px;
}
.plus-form.account-student .locate-button-select,
.plus-form.account-student .locate-button-change,
.plus-form.account-student .plus-alert-info {
background: #e3f2fa;
}
.plus-form.account-student .plus-alert-info h2 {
color: #509fc5;
}
.alert-existing-account {
margin-top: -10px;
}
.plus-success-info {
background: #e7f5e5;
padding: 6px 26px 16px;
clear: both;
}
.plus-form .plus-success-info p {
margin: 10px 0;
}
.plus-dashboard-page .plus-success-info {
font-size: 17px;
font-weight: 400;
padding: 10px 26px;
margin-bottom: 20px;
}
.plus-form.account-student .plus-success-info {
background: #d5edf9;
}
.plus-validation-resend {
padding: 16px 26px;
}
.plus-student-box,
.plus-form .plus-student-learn {
background: #d5edf9;
text-align: center;
}
.plus-form .plus-learn p,
.plus-form .plus-student-learn p {
padding: 0 80px;
}
.plus-marketing-learn,
.plus-form .plus-learn {
background: #e7f5e6;
text-align: center;
}
.inline-student {
color: #69afd0;
text-transform: uppercase;
font-weight: 400;
}
.inline-student .inline-plus {
color: #69afd0;
}
.plus-form .click-to-hide {
width: 30px;
height: 30px;
padding-top: 12px;
position: absolute;
top: 10px;
right: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
font-weight: 200;
color: #326b73;
}
.plus-form .plus-learn .click-to-hide {
color: #80c078;
}
.plus-form .plus-student-learn .click-to-hide {
color: #69afd0;
}
.plus-form .plus-blue-card-img-wrap {
max-width: 230px;
width: 70%;
margin: 20px auto 10px;
}
.plus-form .plus-blue-card-img-wrap > div {
background: url(../img/plus/plus-card-blue.png) no-repeat center;
background-size: contain;
padding-bottom: 66%;
}
.plus-form .plus-cards-img-wrap {
max-width: 320px;
width: 90%;
margin: 20px auto 10px;
}
.plus-form .plus-cards-img-wrap > div {
background: url(../img/plus/cards.png) no-repeat center;
background-size: contain;
padding-bottom: 50%;
}
.plus-form .register-wrap .checkbox-label {
align-items: center;
}
.plus-form .register-wrap .label-content {
font-size: 13px;
}
.plus-form .button-locate,
.plus-form .button-formsubmit {
font-size: 16px;
letter-spacing: 1px;
width: 100%;
padding: 0px;
line-height: 36px;
margin-top: 10px;
}
.plus-form .button-formsubmit {
margin-bottom: 14px;
}
.button.button-locate {
line-height: 44px;
margin-top: 0;
}
.button.button-locate:not(.waiting):after {
content: "";
position: relative;
top: 1px;
left: 1px;
display: inline-block;
width: 14px;
height: 14px;
background: url(../img/ui/locate-marker-arrow.png) no-repeat center;
background-size: contain;
}
.button.button-locate.waiting:before {
background-image: url(../img/ui/loading-wheel-white.png);
background-size: 26px;
animation: spin 1000ms infinite linear;
width: 44px;
height: 44px;
left: calc(50% - 22px);
}
.locate-input-wrap .input-error {
float: left;
width: 100%;
}
.locate-results-wrap,
.selected-shop-wrap {
display: none;
}
.locate-results-wrap:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding-bottom: 50px;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 50%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 50%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 50%);
z-index: 1;
}
.locate-results-target {
max-height: 270px;
overflow: auto;
position: relative;
}
.locate-results-target:after {
content: "";
display: block;
height: 50px;
}
.heading-nearest-shops {
padding: 18px 0 10px;
border-bottom: 1px solid #e8e8e8;
position: relative;
}
.locate-shop-form-wrap {
margin-top: 10px;
}
.plus-form .click-to-hide.close-locate-results {
position: absolute;
top: 10px;
right: 12px;
z-index: 1;
font-size: 30px;
color: #000;
cursor: pointer;
}
.locate-results-row {
padding: 18px 0 18px 50px;
background: url(../img/ui/location-drop-marker.png) left 18px no-repeat;
background-size: 26px;
overflow: hidden;
border-bottom: 1px solid #e8e8e8;
}
.selected-shop-wrap .locate-results-row {
padding-top: 10px;
background-position: left 12px;
border-bottom: 0;
}
.locate-shop-details {
width: calc(100% - 100px);
float: left;
}
.locate-shop-title {
font-weight: 600;
}
.locate-shop-address {
padding-top: 8px;
}
.locate-select-wrap {
width: 100px;
float: left;
}
.locate-button-select,
.locate-button-change {
border: 1px solid #b4b4b4;
display: inline-block;
padding: 8px 16px 7px;
text-transform: uppercase;
font-size: 14px;
background: #e7f5e5;
cursor: pointer;
}
/* Register form grecaptch */
.reg-submit-wrap {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
}
@media only screen and (max-width: 1024px) and (min-width: 800px) {
.touch .plus-form .reg-intro {
padding: 0 70px 20px;
}
}
@media only screen and (max-width: 640px) {
.reg-intro .plus-logo-wrap {
width: 320px;
max-width: 80vw;
margin: 0 auto 14px;
}
.plus-form .reg-intro p {
padding: 0;
}
.plus-form .reg-intro .plus-alert-info + .secondary-notification {
margin: 10px 0;
}
.plus-form .reg-intro .plus-alert-info.bookseller-alert + .secondary-notification {
padding-left: 0 !important;
padding-right: 0 !important;
}
.main-page.plus-form {
padding-top: 20px;
}
.plus-form .reg-intro {
padding: 0 18px 10px;
}
.plus-form .input,
.plus-form .input.input-large {
font-size: 14px !important;
height: 34px !important;
padding-left: 12px;
}
.plus-form div.fancy-select.ws-select-large div.trigger {
font-size: 14px;
line-height: 30px;
min-height: 34px;
}
.plus-form div.fancy-select.ws-select-large div.trigger:after {
top: 13px;
}
.plus-form .form-info-msg {
padding-bottom: 11px;
}
.plus-form .form-info-msg.label-container {
display: none;
}
.plus-form .plus-learn p,
.plus-form .plus-student-learn p {
padding: 0;
}
.plus-form .inline-radios {
padding-bottom: 16px;
}
.plus-form .inline-radios fieldset > label {
margin: 10px 0px 10px 0;
}
.plus-form .password-input-wrap .show-password {
height: 34px;
line-height: 36px;
}
.plus-form .label-container {
height: 34px;
}
.checkbox-label .label-content {
font-size: 14px;
}
.plus-form .account-plus .checkbox-label.reduced-margin {
margin-top: 0;
}
.preferred-dropdown-wrap {
margin-top: 12px;
}
.safari .plus-form input,
.safari .plus-form input.input-large {
font-size: 16px !important;
}
.locate-results-row {
padding: 18px 0 18px 40px;
}
.locate-shop-details {
width: calc(100% - 90px);
}
.locate-select-wrap {
width: 90px;
}
.locate-button-wrap {
margin-top: 8px;
}
.button.button-locate.waiting:before {
width: 36px;
height: 36px;
background-size: 22px;
}
.locate-button-select,
.locate-button-change {
float: right;
}
.plus-form.account-plus .button.button-teal {
line-height: 36px;
}
.plus-validation-resend,
.plus-form .plus-success-info {
padding: 6px 20px 16px;
}
.plus-form .click-to-hide.close-locate-results {
right: -7px;
}
.notification-page .plus-form .plus-alert-info {
margin: 0 -33px 12px;
}
.notification-page .plus-form .plus-alert-info.bookseller-alert {
margin: 0 -33px 22px;
}
#loginForm.plus-form .plus-alert-info {
margin: 0 -15px 12px;
}
}
/* Tooltips */
.tooltip {
display: block;
position: absolute;
text-align: center;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: normal;
font-size: 0.7rem;
background-color: #e0e9ed;
color: #000;
z-index: 100;
padding: 8px;
border: 1px solid #336b75;
width: 120px;
margin-top: -70px;
margin-left: -50px;
opacity: 0;
bottom: 23px;
bottom: calc(100% + 7px);
}
.tooltip:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #e0e9ed;
content: "";
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -12px;
}
.tooltip:before {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #336b75;
content: "";
position: absolute;
left: 50%;
bottom: -8px;
margin-left: -10px;
}
.tooltip.left:after {
left: 10px;
margin: 0;
}
.tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
}
.tooltip.arrow-right {
right: calc(100% + 7px);
bottom: auto;
top: calc(50% - 30px);
transform: translateY(-50%);
margin: 0;
}
.tooltip.arrow-right:after, .tooltip.arrow-right:before {
left: 100%;
margin-left: 0;
top: 50%;
transform: translateY(-50%);
}
.tooltip.arrow-right:after {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #e0e9ed;
margin-left: -3px;
}
.tooltip.arrow-right:before {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #336b75;
}
.ico-tooltip {
font-family: RobotoMedium;
background-color: #b9e7e4;
color: #000;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
height: 16px;
width: 16px;
text-align: center;
font-weight: 800;
font-size: 10px;
line-height: 16px;
display: inline-block;
cursor: pointer;
z-index: 1;
text-transform: none;
}
.ico-tooltip:hover {
background-color: #b9e7e4;
}
.ico-tooltip.arrow-left .tooltip {
text-align: left;
}
.ico-tooltip.arrow-left .tooltip:before {
top: 21px;
left: 4px;
border-left: none;
border-right: 8px solid #336b75;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-left: -13px;
}
.ico-tooltip.arrow-left .tooltip:after {
top: 19px;
left: 4px;
border-left: none;
border-right: 10px solid #e0e9ed;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
/* Plus tooltips */
.plus-dashboard-page .tooltip-wrap,
.plus-form .tooltip-wrap {
display: flex;
height: 44px;
width: 44px;
align-items: center;
padding-left: 4px;
position: absolute;
top: 0;
left: 100%;
}
.plus-form .inline-radios + .tooltip-wrap {
margin-top: 5px;
}
.plus-dashboard-page .plus-balance-table .tooltip-wrap {
height: 24px;
}
.plus-dashboard-page .ico-tooltip,
.plus-form .ico-tooltip,
.plus-confirmation .ico-tooltip {
color: #336b75;
border: 1px solid #336b75;
width: 19px;
height: 19px;
padding-top: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
font-size: 14px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 400;
position: relative;
}
.plus-form .tooltip-wrap .ico-tooltip {
display: flex;
}
.plus-dashboard-page .tooltip,
.plus-form .tooltip,
.plus-confirmation .tooltip {
margin: 0 !important;
top: 50%;
right: calc(100% + 15px);
bottom: auto;
transform: translateY(-50%);
width: 270px;
border-color: #336b75;
background-color: #e0e9ee;
box-shadow: 0 3px 3px #ccc;
padding: 14px;
font-size: 14px;
font-weight: 300;
text-align: left;
}
.plus-form .tooltip.right {
right: auto;
left: calc(100% + 15px);
}
.plus-dashboard-page .tooltip:before,
.plus-dashboard-page .tooltip:after,
.plus-form .tooltip:before,
.plus-form .tooltip:after,
.plus-confirmation .tooltip:before,
.plus-confirmation .tooltip:after {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #e0e9ee;
content: "";
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
bottom: auto;
margin-left: -1px;
}
.plus-dashboard-page .tooltip:before,
.plus-form .tooltip:before,
.plus-confirmation .tooltip:before {
border-left: 12px solid #336b75;
margin-left: 0;
}
.tooltip.right:before {
left: auto;
margin-left: 0;
right: 50%;
margin-right: -10px;
}
.tooltip.right:after {
left: auto;
margin-left: 0;
right: 50%;
margin-right: -12px;
}
.plus-form .tooltip.right:before, .plus-form .tooltip.right:after {
border-left: none;
left: auto;
margin-left: 0;
border-right: 12px solid #e0e9ee;
right: 100%;
margin-right: -1px;
}
.plus-form .tooltip.right:before {
border-left: none;
margin-left: 0;
border-right: 12px solid #336b75;
margin-right: 0;
}
.plus-form.account-plus .tooltip.right:before {
border-left: none;
border-right: 12px solid #80c078;
}
.plus-form.account-plus .tooltip.right:after {
border-left: none;
border-right: 12px solid #e7f5e6;
}
.tooltip[data-tooltipcontentid=securitycode] {
padding: 10px 4px 10px 10px;
display: flex;
align-items: center;
text-align: left;
}
.securitycode-img {
background: url(../img/plus/security-code-icon-blue.png) center no-repeat;
background-size: contain;
padding-bottom: 90px;
}
.plus-form .account-plus .securitycode-img,
.plus-form.account-plus .securitycode-img {
background: url(../img/plus/security-code-icon-green.png) center no-repeat;
background-size: contain;
}
/* Plus Tootlips */
.ico-tooltip.account-plus,
.plus-dashboard-page .ico-tooltip,
.plus-form .ico-tooltip,
.plus-form .account-plus .ico-tooltip,
.plus-form.account-plus .ico-tooltip,
.plus-confirmation .ico-tooltip {
color: #80c078;
border-color: #80c078;
z-index: 2;
}
.plus-dashboard-page .tooltip,
.plus-form .tooltip,
.plus-form .account-plus .tooltip,
.plus-form.account-plus .tooltip,
.plus-confirmation .tooltip {
border-color: #80c078;
background-color: #e7f5e5;
}
.plus-form .tooltip:before,
.plus-form .account-plus .tooltip:before,
.plus-form.account-plus .tooltip:before,
.plus-dashboard-page .tooltip:before,
.plus-confirmation .tooltip:before {
border-left: 12px solid #80c078;
}
.plus-dashboard-page .tooltip:after,
.plus-form .tooltip:after,
.plus-form .account-plus .tooltip:after,
.plus-form.account-plus .tooltip:after,
.plus-confirmation .tooltip:after {
border-left: 12px solid #e7f5e5;
}
/* Plus Student Tooltips */
body.plus-student .plus-inherit .ico-tooltip,
.plus-dashboard-page.is-student .ico-tooltip,
.plus-form .ico-tooltip.account-student,
.plus-form.account-student .ico-tooltip {
color: #69afd0;
border-color: #69afd0;
}
body.plus-student .plus-inherit .tooltip,
.plus-dashboard-page.is-student .tooltip,
.plus-form .account-student .tooltip,
.plus-form.account-student .tooltip {
border-color: #69afd0;
background-color: #d5edf9;
}
body.plus-student .plus-inherit .tooltip:not(.right):before,
.plus-dashboard-page.is-student .tooltip:not(.right):before,
.plus-form .account-student .tooltip:not(.right):before,
.plus-form.account-student .tooltip:not(.right):before {
border-left: 12px solid #69afd0;
}
body.plus-student .plus-inherit .tooltip:not(.right):after,
.plus-dashboard-page.is-student .tooltip:not(.right):after,
.plus-form .account-student .tooltip:not(.right):after,
.plus-form.account-student .tooltip:not(.right):after {
border-left: 12px solid #d5edf9;
}
.ico-tooltip.alt-plus .tooltip:not(.right):before {
border-right-color: transparent;
border-left-color: #80c078;
}
.ico-tooltip.alt-plus .tooltip.right:before {
border-left-color: transparent;
border-right-color: #80c078;
}
body.plus-student .plus-inherit .ico-tooltip.alt-plus .tooltip:not(.right):before,
.plus-form.account-student .ico-tooltip.alt-plus .tooltip:not(.right):before {
border-left-color: #69afd0;
}
body.plus-student .plus-inherit .ico-tooltip.alt-plus .tooltip.right:before,
.plus-form.account-student .ico-tooltip.alt-plus .tooltip.right:before {
border-right-color: #69afd0;
}
/* Plus Bookseller Tooltips */
body.plus-bookseller .plus-inherit .ico-tooltip,
.book-seller .ico-tooltip {
color: #a783b7;
border: 1px solid #a783b7;
}
body.plus-bookseller .plus-inherit .tooltip,
.validate-banner.book-seller .tooltip,
.plus-dashboard-page.book-seller .tooltip,
.book-seller .tooltip {
border-color: #a783b7;
background-color: #f3e6f9;
}
body.plus-bookseller .plus-inherit .tooltip:not(.right):after,
.book-seller .tooltip:not(.right):after {
border-left: 12px solid #f3e6f9;
}
body.plus-bookseller .plus-inherit .tooltip.right:after,
.book-seller .tooltip.right:after {
border-right: 12px solid #f3e6f9;
border-left: 0;
}
body.plus-bookseller .plus-inherit .tooltip:not(.right):before,
.book-seller .tooltip:not(.right):before {
border-left-color: #a783b7;
}
body.plus-bookseller .plus-inherit .ico-tooltip.alt-plus .tooltip.right:before,
.book-seller .tooltip.right:before {
border-right-color: #a783b7;
}
/* Plus Bookseller Tooltips White on Purple */
.book-seller .validate-message .tooltip,
.book-seller .plus-alert-info.bookseller-alert .tooltip {
background: #fff;
}
.book-seller .validate-message .tooltip:not(.right):after,
.book-seller .plus-alert-info.bookseller-alert .tooltip:not(.right):after {
border-left: 12px solid #fff;
}
body.plus-bookseller .plus-interit .ico-tooltip.alt-plus .tooltip,
body .ico-tooltip.alt-plus .tooltip {
background: #fff;
}
body.plus-bookseller .plus-interit .ico-tooltip.alt-plus .tooltip:not(.right):after,
body .ico-tooltip.alt-plus .tooltip:not(.right):after {
border-left: 12px solid #fff;
}
body.plus-bookseller .plus-interit .ico-tooltip.alt-plus .tooltip.right:after,
body .ico-tooltip.alt-plus .tooltip.right:after {
border-right: 12px solid #fff;
border-left: 0;
}
.book-seller .securitycode-img {
background-image: url(../img/plus/security-code-icon-purple.png);
}
.book-seller .marketing-vb .inline-plus,
.book-seller .marketing-vb h2 {
color: #8e52a8;
}
.book-seller .marketing-vb.plus-alert-info {
background-color: #f3e6f9;
}
.plus-dashboard-page.book-seller .plus-email-optin-box .checkbox-label > .ws-checkable-outer,
.book-seller .marketing-vb .ws-checkable-outer {
border-color: #8e52a8;
}
.plus-dashboard-page.book-seller .plus-email-optin-box .checkbox-label > .ws-checkable-outer:before,
.book-seller label > .ws-checkable-outer:not(.ws-radio-outer):before {
background-image: url(../img/ui/tick-purple.png);
}
.book-seller .ws-checkable-outer {
border-color: #8e52a8;
background-color: #f3e6f9;
}
.book-seller .button.button-formsubmit {
background-color: #a783b7;
}
@media only screen and (max-width: 640px) {
.plus-dashboard-page .tooltip-wrap {
height: 24px;
}
.plus-form .tooltip-wrap {
height: 34px;
}
.plus-form .inline-radios + .tooltip-wrap {
margin-top: 0;
height: calc(100% - 16px);
}
}
@media only screen and (max-width: 350px) {
.plus-form .inline-radios fieldset > label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plus-form label > .ws-checkable-outer {
margin-right: 0;
margin-bottom: 2px;
}
.plus-form .inline-radios + .tooltip-wrap {
height: 54px;
}
}
.register-wrap p {
line-height: 1;
text-align: right;
}
.email-pref-wrap {
margin-bottom: 20px;
}
.email-genres {
margin-top: 10px;
float: left;
margin-bottom: 30px;
width: 100%;
}
.loyalty-upgrade-wrap {
float: left;
width: 100%;
color: #000;
}
.loyalty-upgrade-wrap h2 {
font-family: "Born Ready", Baskerville, serif;
font-size: 26px;
margin: 28px 0 14px;
font-style: normal;
}
.loyalty-upgrade-wrap h2 .inline-plus {
font-size: inherit;
}
.loyalty-upgrade-wrap .card-upgrade-wrap {
justify-content: flex-start;
margin-top: 18px;
}
.book-actions .buy-container .buy-inner.plus-exclusive.is-student .button-container .button {
background: #76c0e2;
}
.book-actions .buy-container .buy-inner.plus-exclusive .button-container .button {
margin-bottom: 5px;
}
.profile-page .loyalty-upgrade-wrap .card-upgrade-wrap .button {
width: auto;
}
.button.button-plus.join-plus:before,
.book-actions .buy-container .buy-inner.plus-exclusive .button-container .button:before,
.loyalty-upgrade-wrap .card-upgrade-wrap .button:before {
content: "";
display: block;
position: absolute;
top: 6px;
left: 9px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fffaeb;
}
.button.button-plus.join-plus:after,
.book-actions .buy-container .buy-inner.plus-exclusive .button-container .button:after,
.loyalty-upgrade-wrap .card-upgrade-wrap .button:after {
content: "";
display: block;
position: absolute;
top: 6px;
left: 6px;
width: 40px;
height: 40px;
background: url(../img/plus/plus-stamp.png) no-repeat center;
background-size: contain;
}
.button.button-plus.join-plus .inline-plus,
.loyalty-upgrade-wrap .card-upgrade-wrap .button .inline-plus {
color: #fff;
font-size: inherit;
margin-left: -4px;
}
.email-preferences b {
color: #5c5c5c;
}
.email-unsubscribe-wrap,
.card-upgrade-wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin: 20px 0 12px;
}
.email-options-wrap,
.email-unsubscribe-wrap {
float: left;
width: 100%;
margin-bottom: 30px;
}
.card-upgrade-wrap .card-option {
width: auto;
background-color: #336b75;
display: inline-block;
}
.card-upgrade-wrap .card-option:hover {
color: #fff;
}
.plus-form .send-email-verification {
text-decoration: underline;
cursor: pointer;
}
.select-disabled {
background: #eee;
pointer-events: none;
color: #aaa;
}
.ajax-prefs-wrap {
display: none;
}
.ajax-prefs {
background: rgb(100, 100, 100);
width: 350px;
height: 80px;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: -300px;
pointer-events: none;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
z-index: 999;
transition: bottom 1s;
border-radius: 20px 20px 0 0;
padding: 0 50px;
}
.update-prefs-wrap {
display: flex;
align-items: center;
}
.update-prefs-spinner {
width: 50px;
height: 50px;
background: url(../img/waiting_teal.gif);
}
.ajax-prefs.ajax-success .update-prefs-spinner,
.ajax-prefs.ajax-error .update-prefs-spinner {
background: none;
}
.ajax-prefs.ajax-success .update-prefs-spinner:after {
content: "\e60f";
font-family: "icomoon";
width: 100%;
height: 100%;
display: block;
color: #fff;
font-size: 32px;
text-align: center;
padding-top: 5px;
}
.ajax-prefs.ajax-error .update-prefs-spinner:after {
content: "×";
font-family: "icomoon";
width: 100%;
height: 100%;
display: block;
color: #e74c3c;
font-size: 32px;
text-align: center;
}
.update-prefs-message {
padding: 20px 0;
color: #fff;
font-size: 16px;
font-weight: 400;
}
.prefs-area {
position: relative;
}
.email-category-wrap .checkbox-label {
padding-right: 60px;
}
.prefs-area.prefs-disabled .prefs-wrap {
padding: 20px;
opacity: 0.5;
background: #eee;
pointer-events: none;
}
.email-subscribe-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: #fff;
border: 3px solid #336b75;
width: 300px;
padding: 10px;
position: absolute;
top: 70px;
left: calc(50% - 150px);
}
.swiper {
padding: 0 40px;
}
.swiper .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: block;
}
.swiper .swiper-slide .info-wrap {
display: flex;
flex-direction: column;
height: 110px;
font-size: 14px;
text-align: left;
}
@media only screen and (max-width: 800px) {
.swiper .swiper-slide .info-wrap {
height: initial;
min-height: 110px;
}
}
.swiper .swiper-slide .info-wrap .title-wrap {
margin-top: 12px;
font-weight: 600;
color: #000;
flex: 1;
}
.swiper .swiper-slide .info-wrap .title-wrap a {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.swiper .swiper-slide .info-wrap .author-wrap {
margin: 5px 0 0;
color: #9E866B;
max-height: 16px;
overflow: hidden;
word-break: break-all;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
}
.swiper .swiper-slide .info-wrap .author-wrap .text-author {
text-decoration: none;
}
.swiper .swiper-slide .info-wrap .author-wrap .text-author b {
font-weight: 600;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
height: 100%;
top: 0;
margin-top: 0;
background-color: #fff;
background-size: 50%;
width: 32px;
}
.swiper .swiper-button-next.swiper-button-black,
.swiper .swiper-button-prev.swiper-button-black {
background-repeat: no-repeat;
z-index: 10;
cursor: pointer;
height: 100%;
top: 0;
margin-top: 0;
background-color: #fff;
background-size: 50%;
width: 32px;
}
.swiper .swiper-button-next.swiper-button-black:after,
.swiper .swiper-button-prev.swiper-button-black:after {
display: none;
content: "";
}
.swiper .swiper-button-next.swiper-button-disabled,
.swiper .swiper-button-prev.swiper-button-disabled {
opacity: 0 !important;
}
.swiper .swiper-button-next {
right: -1px;
background-position: 70% 36%;
}
.swiper .swiper-button-next.swiper-button-black {
background-image: url(../img/ui/right_scroll_teal.png);
}
.swiper .swiper-button-next.swiper-button-black:hover {
background-image: url(../img/ui/right_scroll_grey.png);
}
.swiper .swiper-button-prev {
left: -1px;
background-position: 30% 36%;
}
.swiper .swiper-button-prev.swiper-button-black {
background-image: url(../img/ui/left_scroll_teal.png);
}
.swiper .swiper-button-prev.swiper-button-black:hover {
background-image: url(../img/ui/left_scroll_grey.png);
}
.page-regform .error {
margin-bottom: 0;
}
.click-disabled {
pointer-events: none;
}
.email-options-wrap .checkbox-label {
min-height: 32px;
margin-top: 0;
padding-top: 0;
}
.email-options-wrap .label-content span {
margin: 10px 0;
line-height: 20px;
}
.infinite-load {
text-align: center;
width: 100%;
padding-left: 246px;
}
.infinite-load .loading-gif {
background-image: url(../img/ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 34px;
display: none;
}
.infinite-load button {
display: none;
}
.main-container {
position: relative;
}
.backtotop {
position: fixed;
right: 0;
text-align: center;
font-weight: bold;
bottom: 60px;
cursor: pointer;
opacity: 0;
transition: opacity 1s;
color: transparent;
width: 42px;
height: 35px;
background-image: url(../img/uparrow.png);
background-repeat: no-repeat;
background-color: #336b75;
background-position: 50% 45%;
background-size: 60%;
}
.backtotop.show {
opacity: 1;
}
.backtotop.stick {
position: absolute;
top: -95px;
}
@media (max-width: 800px) {
.backtotop {
bottom: 50px;
}
.backtotop.stick {
top: -85px;
}
}
@media (max-width: 640px) {
.backtotop {
bottom: 65px;
}
.backtotop.stick {
top: -100px;
}
}
.related-books-container h3 {
font-family: Baskerville, serif;
font-size: 19px;
font-weight: 500;
color: #000;
margin: 20px 0;
}
.related-books-container .book-list-content h3,
.competition-page .book-list-content h3,
.blog-detail .content-text .book-list-content h3 {
font-family: Baskerville, serif;
font-size: 17px;
font-weight: 400;
margin: 0;
color: #000;
font-style: normal;
}
.blog-detail .content-text .book-list-content .authors,
.blog-detail .content-text .book-list-content .price-container {
font-family: "Source Sans Pro", Arial, sans-serif;
}
.related-books-container .book-list-content .price-rrp,
.competition-page .book-list-content .price-rrp,
.blog-detail .book-list-content .price-rrp {
font-size: 16px;
}
.related-books-container .book-list-content [itemprop=price],
.competition-page .book-list-content [itemprop=price],
.blog-detail .book-list-content [itemprop=price] {
font-size: 18px;
color: #000;
}
.related-books-container .book-list-content .star-rating,
.competition-page .book-list-content .star-rating,
.blog-detail .content-text .book-list-content .star-rating {
margin-left: 0;
line-height: 1.1;
}
.related-books-container .book-list-book .book-image,
.competition-page .book-list-book .book-image,
.blog-detail .content-text .book-list-book .book-image {
width: 26%;
background: #fff;
}
.related-books-container .book-image img,
.competition-page .book-image img,
.blog-detail .content-text .book-image img {
max-width: 100%;
}
.related .book-list-content .desc,
.blog-detail .book-list-content .desc {
font-family: "Source Sans Pro", Arial, sans-serif;
line-height: 20px;
color: #5c5c5c;
font-size: 15px;
}
@media only screen and (max-width: 640px) {
.related-books-container .book-list-book .book-image,
.competition-page .book-list-book .book-image,
.blog-detail .content-text .book-list-book .book-image {
width: 100%;
height: 200px;
max-width: none;
margin-bottom: 20px;
}
.related-books-container .book-list-book .book-list-content,
.competition-page .book-list-book .book-list-content,
.blog-detail .content-text .book-list-book .book-list-content {
float: left;
}
.related-books-container .book-list-book .wishlist-add-to-basket.basket-form,
.competition-page .book-list-book .wishlist-add-to-basket.basket-form,
.blog-detail .content-text .book-list-book .wishlist-add-to-basket.basket-form {
width: 100%;
}
.related-books-container .book-list-book .basket-form .post-add .message,
.competition-page .book-list-book .basket-form .post-add .message,
.blog-detail .content-text .book-list-book .basket-form .post-add .message {
width: 100%;
}
.related-books-container .book-list-book .button,
.competition-page .book-list-book .button,
.blog-detail .content-text .book-list-book .button {
min-width: 120px;
}
}
.form-blog-filters {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blog-filter-category-wrap,
.blog-filter-search-wrap {
flex: 1;
}
.blog-filter-category-wrap .ws-select-outer.ws-select-large,
.blog-filter-search-wrap input.input {
width: 100%;
max-width: none;
}
.blog-filter-search-wrap {
margin: 0 10px;
}
.main-blog-page .header-actions {
clear: both;
}
@media only screen and (max-width: 640px) {
.blog-filter-category-wrap {
width: 100%;
flex: auto;
}
.blog-filter-search-wrap {
margin: 0 10px 0 0;
}
}
.comp-list-wrap {
margin-bottom: -40px;
}
.single-comp-wrap {
width: 50%;
position: relative;
float: left;
min-height: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 20px;
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
@media only screen and (max-width: 800px) {
.single-comp-wrap {
width: 100%;
margin-bottom: 30px;
}
}
.single-comp-wrap:nth-child(2n-1) {
clear: both;
}
.single-comp-wrap:only-child {
width: 100%;
}
.single-comp-wrap:only-child .single-comp-img-wrap {
width: auto !important;
}
@media only screen and (max-width: 640px) {
.single-comp-wrap .single-comp-img-wrap {
padding-bottom: 10px;
}
}
.single-comp-wrap .single-comp-img-wrap img {
float: left;
max-height: 200px;
}
.single-comp-wrap .single-comp-main-info strong {
color: #5c5c5c;
}
.single-comp-wrap .link-wrap {
position: relative;
display: block;
float: left;
}
.plus-flash {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 68px solid #80c078;
border-right: 68px solid transparent;
}
.plus-flash:before {
content: " ";
position: absolute;
top: -63px;
left: 2px;
width: 40px;
height: 40px;
background-image: url(../img/plus-cream.png);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-8deg);
}
body.plus-student .plus-flash {
border-top-color: #76c0e2;
}
.plus-home .staff-discount-box,
.plus-home .student-discount-box {
overflow: hidden;
text-align: center;
position: relative;
padding: 40px 0;
margin-bottom: 20px;
letter-spacing: 0.05em;
}
.plus-home .staff-discount-box .born-ready,
.plus-home .student-discount-box .born-ready {
font-size: 1.8rem;
}
.plus-home .staff-discount-box:before,
.plus-home .student-discount-box:before {
content: "";
position: absolute;
left: 50%;
top: 53%;
width: 94%;
max-width: 320px;
height: 100%;
transform: translate(-50%, -50%);
}
.plus-dashboard-page.book-seller .staff-discount-box:before,
.plus-home .staff-discount-box:before {
background: url(../img/plus/purple-bkgrnd.png) center no-repeat;
background-size: contain;
}
.plus-home .student-discount-box:before {
background: url(../img/plus/blue-bkgrnd.png) center no-repeat;
background-size: contain;
}
.plus-home .student-discount-box:after {
content: "";
background: url(../img/plus/grunge-bkgrnd.png) center no-repeat;
background-size: contain;
position: absolute;
left: 50%;
top: 50%;
width: 93%;
max-width: 320px;
height: 100%;
transform: translate(-50%, -50%);
}
.plus-home .staff-discount-box-content,
.plus-home .student-discount-box-content {
position: relative;
z-index: 1;
color: #fff;
}
.plus-home .staff-discount-box-content {
max-width: 280px;
margin: 0 auto;
}
.plus-home .staff-discount-box-content p,
.plus-home .student-discount-box-content p {
text-transform: uppercase;
margin: 0;
}
.plus-home .staff-discount-box h2,
.plus-home .student-discount-box h2 {
font-family: "Born Ready", Baskerville, serif;
font-size: 28px;
color: #fff;
margin: 0;
}
.born-ready {
font-family: "Born Ready", Baskerville, serif;
}
/* plus pages */
.plus-heading {
color: #80c078;
font-family: "Born Ready", Baskerville, serif;
font-size: 28px;
}
/* index */
.plus-home {
padding-top: 0;
text-align: center;
color: #000;
}
.plus-home .content-block,
.plus-dashboard-page .content-block {
width: 580px;
max-width: 100%;
margin: auto;
padding: 0 15px;
}
.plus-dashboard-page .content-block {
width: 500px;
}
.plus-home .plus-banner {
background: #fffaeb;
padding-top: 20px;
margin-bottom: 40px;
}
.plus-home .plus-banner .plus-cards {
width: 420px;
height: 200px;
background-image: url("../img/plus/cards.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
margin-bottom: -30px;
max-width: calc(100% - 20px);
max-height: 41vw;
}
.plus-home.book-seller .plus-banner .plus-cards {
background-image: url("../img/plus/purple-card.png");
}
.plus-home .welcome {
padding: 0 0 40px 0;
}
.plus-home .welcome h1 {
font-family: "Born Ready", Baskerville, serif;
margin-bottom: 12px;
font-style: normal;
}
.plus-home.book-seller .welcome .intro {
max-width: 440px;
font-size: 18px;
font-weight: 500;
display: block;
margin: auto;
}
.plus-home.book-seller .welcome .lead-in {
font-size: 15px;
display: block;
margin: auto;
max-width: 100%;
}
.plus-home.book-seller.blocked .welcome .lead-in {
font-weight: 700;
max-width: 340px;
}
.plus-home .welcome .actions {
display: flex;
justify-content: space-around;
max-width: 600px;
margin: 10px auto;
}
.plus-home .welcome .actions > div {
width: 50%;
padding: 10px 7%;
}
.plus-home .welcome .actions > div:nth-child(2) {
border-left: 1px solid #aaa;
}
.plus-home .welcome .actions > div > div:nth-child(1) {
font-weight: normal;
font-size: 17px;
}
.plus-home .welcome .actions > div:nth-child(2) > div:nth-child(2) {
min-height: 36px;
}
.plus-home .welcome .actions .button {
margin-top: 15px;
}
.plus-dashboard-page .small-print,
.plus-home .small-print {
font-size: 12px;
margin-top: 10px;
line-height: 1.4em;
}
.plus-home .staff-discount {
padding: 10px 0 0;
}
.plus-home .student-discount {
padding: 30px 0;
}
.plus-home .students-area,
.plus-home .even-more,
.plus-home .email-programme,
.plus-home .how-it-works,
.plus-dashboard-page .how-it-works {
background: #fffaeb;
padding: 20px;
padding-bottom: 40px;
}
.plus-home .email-programme .envelope-icon {
height: 80px;
background: url("../img/plus/plus-mail.png") center no-repeat;
background-size: contain;
}
.plus-home img {
margin-bottom: 20px;
}
.plus-home .email-programme {
background: #e7f5e6;
}
.plus-home .email-programme h2 {
margin-bottom: 4px;
}
.plus-home .even-more {
padding-top: 0;
background: #fff;
}
.plus-home .even-more h2 {
margin-top: 0;
margin-bottom: 4px;
}
.plus-home .even-more a {
white-space: nowrap;
}
.plus-home .students-area {
background: #e3f2fa;
padding-bottom: 30px;
}
.plus-home.book-seller .welcome .actions {
margin: 18px auto;
}
.plus-home.book-seller .welcome .actions .button {
margin: 0;
}
.no-break {
white-space: nowrap;
}
.emph {
font-weight: normal;
}
.plus-dashboard-page .how-it-works h2,
.plus-home h2 {
font-family: "Born Ready", Baskerville, serif;
font-size: 28px;
font-style: normal;
}
.plus-form .account-validate .captcha-box,
.plus-form .plus-prereg .captcha-box,
.plus-login .plus-form.plus-prereg .captcha-box {
margin-top: 32px;
}
h1 span.inline-plus,
h2 span.inline-plus {
font-size: 22px;
font-style: normal;
}
.plus-dashboard-page .how-it-works h2,
.plus-home .email-programme h2,
.plus-home .how-it-works h2 {
color: #80c078;
}
.plus-home.book-seller .how-it-works h2,
.plus-home.book-seller .book-seller-ready h2 {
color: #a783b7;
}
.book-seller-ready {
padding-top: 20px;
}
.plus-home.book-seller .book-seller-ready h2 {
margin: 20px 0 17px;
}
.book-seller .book-seller-ready .button.button-plus {
margin-bottom: 30px;
}
.book-seller-ready .faq a {
display: inline-block;
color: #000;
font-weight: 400;
font-size: 16px;
}
/* Plus steps */
.plus-dashboard-page .how-it-works .how-steps,
.plus-home .how-it-works .how-steps {
display: flex;
margin: auto;
margin-bottom: 20px;
}
.plus-home .how-it-works .how-steps > div,
.plus-dashboard-page .how-it-works .how-steps > div {
width: 32%;
padding: 100px 10px 0 10px;
background-image: url("../img/plus/stamp1.png");
background-size: 80px;
background-repeat: no-repeat;
background-position: top center;
color: #80c078;
font-weight: 600;
font-size: 14px;
}
.plus-home .how-it-works .how-steps > div.two,
.plus-dashboard-page .how-it-works .how-steps > div.two {
background-image: url("../img/plus/stamp2.png");
}
.plus-home .how-it-works .how-steps > div.three,
.plus-dashboard-page .how-it-works .how-steps > div.three {
width: 36%;
background-image: url("../img/plus/stamp3.png");
}
.how-it-works .how-steps-disclaimer {
max-width: 350px;
margin: 0 auto;
text-align: center;
color: #000;
font-size: 14px;
}
.how-it-works .how-steps-disclaimer p {
font-size: 12px;
line-height: 1.4em;
}
.terms-text {
font-size: 12px;
}
/* Plus Book Seller steps */
.plus-dashboard-page.book-seller .how-it-works .how-steps > div,
.plus-home.book-seller .how-it-works .how-steps > div {
background-image: url("../img/plus/stamp1-purple.png");
color: #a783b7;
}
.plus-dashboard-page.book-seller .how-it-works .how-steps > div.two,
.plus-home.book-seller .how-it-works .how-steps > div.two {
background-image: url("../img/plus/stamp2-purple.png");
}
.plus-dashboard-page.book-seller .how-it-works .how-steps > div.three,
.plus-home.book-seller .how-it-works .how-steps > div.three {
background-image: url("../img/plus/stamp3-purple.png");
}
/* Plus Student steps */
.plus-dashboard-page.is-student .how-it-works .how-steps > div {
background-image: url("../img/plus/stamp1-cream.png");
}
.plus-dashboard-page.is-student .how-it-works .how-steps > div.two {
background-image: url("../img/plus/stamp2-cream.png");
}
.plus-dashboard-page.is-student .how-it-works .how-steps > div.three {
background-image: url("../img/plus/stamp3-cream.png");
}
.plus-home .rewards-youll-love {
background-color: #e7f5e6;
padding: 20px;
padding-bottom: 40px;
}
.plus-home .rewards-youll-love .content-block {
width: auto;
}
.plus-home .rewards-youll-love .content-block .rewards {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-weight: normal;
}
.plus-home .rewards-youll-love .content-block .rewards > div {
width: 28%;
padding: 10px 3%;
font-size: 13px;
margin-bottom: 12px;
}
@media only screen and (max-width: 768px) {
.plus-home .rewards-youll-love .content-block .rewards > div {
width: 40%;
}
}
@media only screen and (max-width: 640px) {
.plus-home .rewards-youll-love .content-block .rewards > div {
width: 100%;
}
}
.plus-home .rewards-youll-love .content-block .rewards > div .reward-title {
font-size: 17px;
margin-bottom: 8px;
font-weight: 600;
}
.plus-home .rewards-youll-love .content-block .rewards > div:before {
content: "";
position: relative;
top: -10px;
display: inline-block;
width: 36px;
height: 38px;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
}
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(1):before {
background-image: url("../img/plus/reward1.png");
width: 55px;
}
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(2):before {
background-image: url("../img/plus/reward2.png");
}
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(3):before {
background-image: url("../img/plus/reward3.png");
}
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(4):before {
background-image: url("../img/plus/reward4.png");
height: 50px;
}
@media only screen and (max-width: 768px) {
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(4):before {
height: 38px;
}
}
.plus-home .rewards-youll-love .content-block .rewards > div:nth-child(5):before {
background-image: url("../img/plus/reward5.png");
height: 50px;
}
.plus-home .app-banner {
background: #80c078;
position: relative;
}
.plus-home .app-banner .row {
position: relative;
max-width: 600px;
}
.plus-home .app-banner .row:before {
content: "";
position: absolute;
display: block;
width: 51%;
top: -10%;
bottom: -26%;
left: 10px;
background-image: url("../img/plus/mobile-phone.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media only screen and (max-width: 640px) {
.plus-home .app-banner .row:before {
width: 60%;
top: -16%;
}
}
.plus-home .app-banner .row > div {
display: flex;
flex-direction: column;
padding: 4% 2%;
width: 46%;
float: right;
}
@media only screen and (max-width: 640px) {
.plus-home .app-banner .row > div {
width: 42%;
}
}
.plus-home .app-banner .row > div .digital-cards {
padding-bottom: 40%;
margin-top: 3%;
margin-bottom: 1%;
width: 100%;
background-image: url("../img/plus/digital-cards.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media only screen and (max-width: 640px) {
.plus-home .app-banner .row > div .digital-cards {
background-image: url("../img/plus/digital-cards-mob.png");
padding-bottom: 70%;
margin-bottom: 5%;
}
}
.plus-home .app-banner .row > div .logos {
display: flex;
flex-direction: row;
justify-content: center;
}
.plus-home .app-banner .row > div .logos > a {
display: block;
padding-bottom: 15%;
margin: 3% 1%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media only screen and (max-width: 640px) {
.plus-home .app-banner .row > div .logos > a {
margin: 1%;
}
}
.plus-home .app-banner .row > div .logos > a.app-store {
background-image: url("../img/plus/app-store.png");
width: 120px;
}
.plus-home .app-banner .row > div .logos > a.google-play {
background-image: url("../img/plus/google-play.png");
width: 136px;
}
.plus-home .faq {
margin: 20px 0 40px 0;
font-weight: normal;
}
.plus-home .welcome .intro,
.accordian-content .intro,
.plus-login .intro {
font-weight: 400;
font-size: 16px;
line-height: 23px;
margin: 20px 0 10px 0;
text-align: center;
}
.plus-home .welcome .intro.small,
.accordian-content .intro.small,
.plus-login .intro.small {
font-size: 13px;
}
.accordian-content .intro {
font-weight: bold;
}
.plus-home .welcome .intro {
display: inline-block;
max-width: 410px;
margin-top: 0;
}
.plus-home .lead-in {
font-weight: 600;
font-size: 14px;
max-width: 230px;
display: inline-block;
}
.plus-home .how-it-works .lead-in {
padding-top: 100px;
background-image: url("../img/plus/plus-mail.png");
background-size: 100px;
background-position: top center;
background-repeat: no-repeat;
}
.plus-home.book-seller .how-it-works .lead-in {
background-image: url("../img/plus/plus-mail-purple.png");
}
.plus-lead-in-heading {
margin: 37px 0 0;
}
.plus-home .how-it-works .faq {
font-weight: 400;
}
.plus-dashboard-page .how-it-works {
padding: 30px 20px 60px;
}
.plus-dashboard-page .how-it-works h2,
.plus-dashboard-page .how-it-works .how-steps > div {
text-align: center;
}
.plus-dashboard-page.is-student .how-it-works {
background-color: #76c0e2;
}
.plus-dashboard-page.is-student .how-it-works .inline-plus,
.plus-dashboard-page.is-student .how-it-works .how-steps > div {
color: #fffaeb;
}
.plus-home .benefits {
margin: 0 auto 20px;
}
.plus-home .benefits span {
white-space: nowrap;
display: inline-block;
padding-left: 10px;
}
.plus-home .benefits span:before {
content: "•";
font-size: 20px;
margin-right: 2px;
}
.plus-home .benefits.shop-list {
font-weight: bold;
margin-bottom: 5px;
}
.plus-home .how-it-works .button {
margin-bottom: 30px;
}
.plus-home .plus-spacer {
background: url(../img/plus/plus.png) center no-repeat;
background-size: contain;
height: 50px;
margin: 30px 0;
}
.links-bar {
text-align: center;
}
.links-bar a {
padding: 0 30px;
display: inline-block;
border-right: 1px solid #999;
margin-top: 80px;
font-weight: 400;
}
.links-bar a:last-child {
border: 0;
}
@media only screen and (max-width: 640px) {
.plus-home .welcome .actions > div > div:nth-child(1),
.plus-home .welcome .intro,
.plus-login .intro {
font-size: 13px;
line-height: 20px;
}
.plus-home .welcome .actions > div > div:nth-child(1).small,
.plus-home .welcome .intro.small,
.plus-login .intro.small {
font-size: 12px;
}
.plus-form .account-validate .captcha-box,
.plus-form .plus-prereg .captcha-box {
margin-top: 0;
}
.plus-home .welcome .actions > div {
padding: 10px 16px;
}
.plus-home .welcome .actions > div:nth-child(1) {
padding-left: 0;
}
.plus-home .welcome .actions > div:nth-child(2) {
padding-right: 0;
}
.plus-home.book-seller .welcome .lead-in {
font-size: 14px;
}
.plus-home .welcome .actions .button {
width: 100%;
padding: 6px;
}
.plus-home .welcome .actions > div:nth-child(2) > div:nth-child(2),
.plus-dashboard-page .welcome .actions > div:nth-child(2) > div:nth-child(2) {
min-height: auto;
}
.plus-home .how-it-works,
.plus-dashboard-page .how-it-works {
padding: 32px 0 44px 0;
}
.plus-home .how-it-works h2,
.plus-dashboard-page .how-it-works h2 {
margin: 20px 0;
}
.plus-home .how-it-works .how-steps > div,
.plus-dashboard-page .how-it-works .how-steps > div {
padding: 28% 5px 0 5px;
background-size: 21vw;
font-size: 12px;
}
.plus-home .how-it-works .how-steps > div.one,
.plus-dashboard-page .how-it-works .how-steps > div.one {
padding-left: 0;
}
.plus-home .how-it-works .how-steps > div.three,
.plus-dashboard-page .how-it-works .how-steps > div.three {
padding-right: 0;
}
.plus-home .how-it-works h2.plus-lead-in-heading {
margin: 37px 0 0;
}
.links-bar a {
padding: 0 12px;
}
.plus-home h2 {
line-height: 24px;
margin: 23px 0;
}
.plus-login .plus-form.plus-prereg .captcha-box,
.plus-login .captcha-box {
margin-top: 0;
}
}
.button.button-plus {
background: #80c078;
color: #fff;
padding: 2px 34px 0;
line-height: 35px;
letter-spacing: 0.05em;
font-weight: 400;
font-size: 16px;
}
.button.button-plus:hover {
color: #fff;
}
.is-student .button.button-plus {
background: #76c0e2;
}
.book-seller .button.button-plus {
background: #a783b7;
}
.sup {
font-size: 0.5em;
position: relative;
top: -5px;
}
/*plus login*/
.plus-login .intro {
text-align: center;
padding: 0 20px;
}
.plus-login .reg-intro a {
color: #80c078;
font-weight: 400;
}
.plus-login .book-seller .reg-intro a {
color: #a783b7;
}
.plus-login h1 span {
color: transparent;
background: url(../img/plus-green.png) center no-repeat;
background-size: contain;
}
.plus-login .button {
float: right;
background-color: #80c078;
margin-top: 14px;
}
.plus-login.book-seller .button {
background: #a783b7;
}
.green-card {
margin: auto;
width: 170px;
height: 120px;
position: relative;
}
.green-card .card {
position: absolute;
top: 0;
left: 50%;
width: 220px;
height: 120px;
margin: 0 -110px;
float: left;
perspective: 500px;
}
.green-card .card .content {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.green-card .card.flipped .content {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.green-card .card .front,
.green-card .card .back {
position: absolute;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url(../img/plus/plus-card-green.png);
}
.green-card .card .back {
transform: rotateY(180deg);
background-image: url(../img/plus/plus-card-reverse.png);
}
.green-card .card.swapped .front {
background-image: url(../img/plus/plus-card-reverse.png);
}
.accordian-content .card-text {
text-align: center;
font-weight: normal;
margin: 10px 0;
}
.plus-login .ctas {
text-align: center;
}
.plus-login .ctas .button-plus {
width: 100px;
display: inline-block;
float: none;
margin-top: 4px;
}
.plus-login .ctas .button-plus:first-child {
margin-right: 30px;
}
.card-question {
max-width: 550px;
margin: auto;
}
.card-question,
.card-yes-box,
.card-no-box {
min-height: 316px;
}
.accordian-content .small-print,
.plus-login .small-print {
margin: 20px auto;
text-align: center;
font-size: 12px;
margin-top: 10px;
line-height: 1.4em;
}
.card-question .small-print {
margin-bottom: 0;
}
.card-yes-box,
.card-no-box {
display: none;
}
.card-yes .card-yes-box,
.card-no .card-no-box {
display: block;
}
.card-accordian {
margin-bottom: 180px;
}
.card-accordian .accordian-strip {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e7f5e6;
font-family: "Born Ready", Baskerville, serif;
font-style: normal;
font-size: 26px;
text-align: center;
padding: 20px 0;
margin-top: 40px;
margin-bottom: 30px;
position: relative;
}
.card-accordian .accordian-strip .inline-plus {
font-size: 0.8em;
}
.card-accordian .accordian-strip:after {
content: "+";
font-family: sans-serif;
position: absolute;
right: 30px;
font-size: 40px;
top: 0;
line-height: 72px;
}
.card-accordian.open .accordian-strip:after {
content: "−";
}
.card-accordian:not(.open) .accordian-content {
display: none;
}
.plus-form-error {
background-color: #FFDEDE;
text-align: center;
padding: 8px 0;
color: #000;
font-size: 14px;
margin: 20px 20px 10px 20px;
}
.change-card-picked {
cursor: pointer;
text-decoration: underline;
font-weight: normal;
}
.inline-tick {
display: inline-block;
background: url(../img/ui/tick-green.png) top right no-repeat;
background-size: contain;
height: 1em;
width: 1em;
margin-bottom: -0.3em;
}
@media only screen and (max-width: 800px) {
.plus-dashboard-page .plus-success-info {
margin-left: -10px !important;
width: 100vw !important;
font-size: 14px;
}
.card-accordian .accordian-strip {
padding-right: 40px;
margin-left: -10px !important;
width: calc(100% + 20px) !important;
}
.card-accordian .accordian-strip:after {
right: 20px;
font-size: 36px;
}
}
@media only screen and (max-width: 640px) {
.plus-dashboard-page .plus-success-info {
margin-left: -15px !important;
}
.card-accordian .accordian-strip {
margin-left: -5px !important;
width: calc(100% + 10px) !important;
}
}
/* resize captcha on iphone 5 size */
@media only screen and (max-width: 335px) {
.plus-login .plus-form.plus-prereg .captcha-box {
margin-top: 0;
}
}
.search-tabs-wrap {
margin: 0;
height: 100%;
position: absolute;
width: 100%;
max-width: calc(100% - 270px);
}
.search-tabs-wrap [class^=search-result-tab-] {
color: #000;
background-color: #fff;
display: inline-flex;
height: 100%;
align-items: center;
padding: 0 20px 0 55px;
border: 1px solid #e6e6e6;
border-bottom: 1px solid #fff;
float: left;
font-family: "Source Sans Pro", Arial, sans-serif;
text-transform: uppercase;
font-style: normal;
font-weight: 300;
font-size: 20px;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 30px 30px !important;
}
.search-tabs-wrap [class^=search-result-tab-].tab-inactive {
color: #bcbcba;
padding: 0;
border-bottom: 1px solid #e6e6e6;
}
.search-result-tab-local {
overflow: hidden;
}
.search-tabs-wrap [class^=search-result-tab-] a {
height: 100%;
display: flex;
align-items: center;
padding: 0 20px 0 55px;
text-decoration: none;
overflow: hidden;
}
.search-tabs-wrap .truncate {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.search-result-tab-all,
.search-result-tab-all.tab-inactive:hover {
background: url(../img/icon-search-all-teal.jpg);
}
.search-result-tab-all.tab-inactive {
background: url(../img/icon-search-all-grey.jpg);
}
.search-result-tab-local,
.search-result-tab-local.tab-inactive:hover {
background: url(../img/icon-search-local-teal.jpg);
}
.search-result-tab-local.tab-inactive {
background: url(../img/icon-search-local-grey.jpg);
}
@media only screen and (max-width: 960px) {
.search-result-tab-local {
max-width: calc(100% - 190px);
}
.search-tabs-wrap {
max-width: calc(100% - 270px);
}
}
@media only screen and (max-width: 640px) {
.heading-pagination {
width: 100%;
padding-bottom: 50px;
}
.heading-pagination.hide-tabs {
min-height: 0;
}
.search-tabs-wrap {
max-width: 100%;
}
.hide-tabs.heading-pagination {
padding-bottom: 10px;
}
.hide-tabs .search-tabs-wrap {
display: none;
}
.search-result-tab-local {
max-width: calc(100% - 190px);
}
.button.button-filter-results {
padding: 0 20px;
margin-bottom: 10px;
min-height: 44px;
line-height: 44px;
font-size: 16px;
}
}
.show-print {
display: none;
}
.vat-footer {
padding-top: 20px !important;
float: left;
width: 100%;
}
.blog-detail h5 {
font-family: "Source Sans Pro", Arial, sans-serif;
line-height: 1.5;
color: #5c5c5c;
font-size: 16px;
margin-bottom: 10px;
margin-top: 30px;
}
.book-editorial {
padding-bottom: 30px;
border-bottom: 1px solid #c8c8c8;
margin-bottom: 20px;
margin-top: 10px;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.book-editorial .description p {
font-size: 15px;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.book-editorial img {
width: 100%;
max-width: 220px;
}
.book-editorial .title {
font-family: Baskerville, serif;
font-size: 18px;
margin-bottom: 5px;
}
.book-editorial .title a:hover {
color: #000;
}
.book-editorial .authors {
font-size: 15px;
font-weight: 600;
margin-bottom: 10px;
}
.featured-book-editorial > div:first-child {
margin-bottom: 10px;
}
.book-editorial a,
.book-editorial a:hover,
.book-editorial a:focus {
text-decoration: none;
}
.book-editorial .price {
font-size: 17px;
margin-bottom: 5px;
}
.book-editorial .format {
font-size: 16px;
color: #5c5c5c;
margin-bottom: 5px;
font-weight: 500;
}
.book-editorial .basket-form {
width: min-content;
}
.book-editorial .pre-add {
display: flex;
flex-direction: column;
width: min-content;
margin-bottom: 10px;
}
.book-editorial .pre-add .buttons-wrap {
width: max-content;
}
.book-editorial .post-add {
display: none;
width: min-content;
}
.book-editorial .post-add .perk-list {
width: 100%;
float: left;
}
.book-editorial .post-add .perk-list .feature-good {
width: max-content;
}
.book-editorial.featured-book-editorial .basket-form, .book-editorial.featured-book-editorial .post-add {
margin: auto;
}
.book-editorial .buy-inner i {
padding-bottom: 5px;
display: inline-block;
}
.book-editorial .button:not(:last-child) {
margin-right: 15px;
}
.book-editorial .perk-list {
display: inline;
line-height: 35px;
margin-right: 10px;
}
.book-editorial .description {
padding: 10px 0;
clear: both;
}
.book-editorial .description h2 {
margin: 0;
font-size: 20px;
}
.book-editorial .description > div {
margin: 10px 0;
line-height: 20px;
}
.book-editorial .description > p:first-child {
margin-top: 0;
}
.book-editorial .description br {
display: none;
}
.book-editorial .stocktext,
.book-editorial .deliverytext {
float: left;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
}
.book-editorial .stocktext span {
display: inline-block;
padding-left: 30px;
background-image: url(../img/icons/tick.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
.book-editorial .book-editorial-center {
display: inline-block;
float: none;
}
.book-editorial .image-auto-margin {
margin: auto;
}
.book-editorial .stocktext span.invalidPrice {
background-image: url(../img/icons/cross.png);
}
.book-editorial .deliverytext {
border-left: 1px solid #c8c8c8;
margin-left: 15px;
padding-left: 43px;
background-image: url(../img/icons/clock.png);
background-repeat: no-repeat;
background-size: 24px;
background-position: 15px center;
}
.touch .blog-detail .book-editorial .button:not(.plus-button-icon) {
padding: 0 10px;
font-size: 16px;
min-width: 133px;
width: auto;
}
.touch .blog-detail .book-editorial .button:not(:last-child) {
margin-right: 5px;
}
.touch .blog-detail .perk-list {
margin-right: 0;
}
.book-editorial-slider {
margin: 0 30px;
}
@media only screen and (max-width: 1023px) {
.book-editorial .perk-list {
display: block;
}
}
@media only screen and (max-width: 800px) {
.book-editorial .deliverytext {
clear: both;
border: 0;
margin-left: 0;
padding-left: 30px;
background-position: left center;
}
}
@media only screen and (max-width: 640px) {
.book-editorial {
padding-left: 0 !important;
padding-right: 0 !important;
}
.book-editorial img {
max-width: 50%;
}
.book-editorial > div:first-child {
margin-bottom: 10px;
}
.featured-book-editorial > div:first-child {
margin-bottom: 15px;
}
.book-editorial .stocktext, .book-editorial .deliverytext {
font-size: 16px;
}
.book-editorial .buy-inner .button {
width: 130px;
font-size: 16px;
float: left;
}
.featured-book-editorial .buy-inner .button {
float: none;
}
.book-editorial .button {
margin-right: 0;
}
}
.survey-container > div {
width: 100%;
max-width: 640px;
padding-top: 1200px;
position: relative;
height: 0;
margin: 30px auto;
}
.survey-container iframe {
position: absolute;
top: 0;
width: 100%;
max-width: 640px;
height: 100%;
border: 0;
}
@media only screen and (max-width: 1024px) {
.survey-container > div {
padding-top: 190%;
}
}
@media only screen and (max-width: 800px) {
.survey-container > div {
padding-top: 180%;
}
}
@media only screen and (max-width: 640px) {
.survey-container > div {
padding-top: 260%;
}
}
.limit-message {
margin-left: 10px;
font-weight: bold;
color: #336b75;
}
.qty-fixed {
background: #e9e9e9;
border: 1px solid #D1D1D1;
pointer-events: none;
}
.nav-dropdown-basket td.info .qty-msg {
font-size: 13px;
color: #336b75;
margin-top: 10px;
font-weight: 600;
line-height: 1.2;
}
.select-disabled {
background: #eee;
pointer-events: none;
color: #aaa;
}
.remember-me-help {
width: 18px;
height: 18px;
display: inline-block;
background: #336b75;
color: #fff;
font-weight: 600;
border-radius: 50%;
font-size: 13px;
margin-left: 6px;
line-height: 18px;
text-align: center;
cursor: pointer;
}
.tab-content-synopsis hr {
margin: 20px 0;
}
.book-editorial .show-container {
height: 104px;
}
.show-container:not(.heightAuto):before {
content: "";
position: absolute;
padding-bottom: 50px;
bottom: 0;
width: 100%;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
}
.book-editorial .show-container:not(.heightAuto):before {
padding-bottom: 60px;
}
.show-more {
overflow: hidden;
position: relative;
}
.show-less {
position: relative;
padding-bottom: 30px !important;
}
.show-button {
content: "Show more";
display: block;
position: absolute;
bottom: 0;
font-weight: bold;
font-size: 14px;
color: #336b75;
cursor: pointer;
}
.heightAuto {
height: auto !important;
}
a.default-ribbon,
a.default-ribbon:hover,
.default-ribbon {
display: block;
background: #e0e9ed;
border: 1px solid #9a876e;
border-width: 1px 0;
color: #173237;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: normal;
text-align: center;
padding: 8px 10px;
font-size: 14px;
line-height: 1.2;
text-decoration: none;
margin-bottom: 10px;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
/* Waterstones PLUS */
.marketing-vb.plus-alert-info {
background: #e7f5e5;
text-align: center;
padding: 20px 26px;
margin: 14px 0;
}
.plus-alert-info h2 {
font-family: "Born Ready", Baskerville, serif;
font-style: normal;
text-align: center;
color: #80c078;
margin: 14px 0;
}
.marketing-vb .opt-out-msg {
font-size: 13px;
}
.marketing-vb .ws-checkable-outer {
background: #fff !important;
border-color: #80c078;
}
.marketing-vb .ws-checkable-outer {
align-items: center;
justify-content: center;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.marketing-vb .checkbox-label {
align-items: center;
justify-content: center;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.marketing-vc > .field .checkbox-label:after {
content: "";
width: 44px;
height: 44px;
background: url(../img/icons/hand-draw-doodle-mail.png) center right no-repeat;
background-size: contain;
float: right;
flex: 0 0 44px;
}
.marketing-vc.plus-marketing-learn {
padding: 30px 20px 40px;
}
.marketing-vc .click-to-hide {
color: #80c078;
right: 10px;
}
/* Plus alert info Boolseller */
.book-seller .plus-alert-info.bookseller-alert {
background-color: #f3e6f9;
padding: 15px 26px 20px;
}
.book-seller .plus-alert-info.bookseller-alert h2 {
color: #000;
margin-top: 18px;
font-style: normal;
}
.book-seller .plus-alert-info.bookseller-alert .button {
background: #a783b7;
color: #fff;
font-size: 16px;
letter-spacing: 1px;
line-height: 36px;
margin: 20px 0 14px;
}
.book-seller .reg-intro .plus-alert-info.bookseller-alert p {
position: relative;
}
.book-seller .reg-intro .plus-alert-info.bookseller-alert p strong {
font-weight: 600;
}
.book-seller .reg-intro .plus-alert-info.bookseller-alert p .ico-tooltip {
position: absolute;
right: 3%;
top: 50%;
transform: translateY(-50%);
}
.secondary-notification {
padding-top: 20px;
}
.secondary-notification .send-email-verification {
text-decoration: underline;
cursor: pointer;
}
.plus-form .reg-intro .plus-alert-info + .secondary-notification {
margin: 0;
}
.plus-form .reg-intro .plus-alert-info.bookseller-alert + .secondary-notification {
padding-left: 80px;
padding-right: 80px;
}
.inline-plus {
font-family: "wsplusregular";
font-size: 1.1em;
text-transform: lowercase;
color: #80c078;
font-weight: normal;
font-style: normal;
}
.inline-plus.is-student {
color: #76c0e2;
}
body.plus-student .plus-inherit .inline-plus,
.is-student .inline-plus {
color: #69afd0;
}
body.plus-bookseller .plus-inherit .inline-plus,
.inline-plus.book-seller,
.book-seller .inline-plus {
color: #a783b7;
}
.plus-form.account-student .plus-alert-info .checkbox-label > .ws-checkable-outer,
.plus-dashboard-page.is-student .plus-email-optin-box .checkbox-label > .ws-checkable-outer {
border-color: #76c0e2;
}
.plus-form.account-student .plus-alert-info .checkbox-label > .ws-checkable-outer:before,
.plus-dashboard-page.is-student .plus-email-optin-box .checkbox-label > .ws-checkable-outer:before {
background: url(../img/ui/tick-blue.png) top right no-repeat;
background-size: contain;
}
.is-student .student-flex-wrap {
margin-top: 10px;
}
.book-seller .student-flex-wrap > div:nth-child(2) {
background: #f3e6f9;
}
.is-student .student-flex-wrap > div {
background: #e3f2fa;
}
@media screen and (min-width: 800px) {
/* bookseller/student discount box layout on Plus Home page */
/*.book-seller .student-flex-wrap,*/
.is-student .student-flex-wrap {
display: flex;
padding: 0 15px;
}
/*.book-seller .student-flex-wrap .how-it-works,*/
.is-student .student-flex-wrap .how-it-works {
margin-right: 5px;
}
.book-seller .student-flex-wrap .staff-discount-box,
.book-seller .student-flex-wrap .student-discount-box .is-student .student-flex-wrap .staff-discount-box,
.is-student .student-flex-wrap .student-discount-box {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
}
/*.book-seller .student-flex-wrap > div,*/
.is-student .student-flex-wrap > div {
width: 50%;
}
}
/** Site Ribbon **/
.site-ribbon a,
.site-ribbon a:hover,
.site-ribbon {
display: block;
color: #fff;
font-family: Baskerville, serif;
font-style: italic;
font-weight: normal;
text-align: center;
font-size: 16px;
line-height: 1.2;
text-decoration: none;
}
.site-ribbon > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.site-ribbon > ul > li {
display: none;
}
.site-ribbon > ul > li.show {
display: block;
}
.site-ribbon {
background: #2f6476;
width: 100%;
z-index: 99;
padding: 8px 10px;
border: 1px solid #2f6476;
border-width: 1px 0;
}
.site-ribbon.detached {
top: 94px;
position: fixed;
}
.row .image-grid {
padding: 50px 10px;
clear: both;
margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
.row .image-grid {
padding: 20px;
}
}
.row .image-grid.collapse-padding {
padding: 0 10px;
}
@media screen and (max-width: 640px) {
.row .image-grid.collapse-padding {
padding: 0 10px;
}
}
.row .image-grid .pages-header-row {
flex-flow: column;
margin: auto;
padding: 10px 19px 19px;
}
@media screen and (max-width: 640px) {
.row .image-grid .pages-header-row {
padding: 5px 0;
}
}
.row .image-grid .pages-header-row.title-left {
flex-flow: row;
max-width: 1090px;
}
.row .image-grid .pages-header-row h2 {
font-style: normal;
}
@media screen and (max-width: 640px) {
.row .image-grid .pages-header-row h2 {
font-size: 22px;
}
}
.row .image-grid .pages-header-row .button-see-more {
color: #000;
}
.row .image-grid .pages-header-row .button-see-more:hover {
color: #000;
opacity: 0.7;
}
.row .image-grid .grid-images {
display: flex;
width: 100%;
max-width: 1090px;
margin: auto;
flex-wrap: wrap;
justify-content: flex-start;
}
@media screen and (max-width: 640px) {
.row .image-grid .grid-images {
justify-content: space-between;
}
}
.row .image-grid .grid-images:before {
content: none;
}
.row .image-grid .grid-images > a, .row .image-grid .grid-images > span {
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
width: 25%;
max-width: 280px;
color: #000;
text-decoration: none;
font-family: Baskerville, serif;
font-style: italic;
font-weight: 500;
}
@media screen and (max-width: 640px) {
.row .image-grid .grid-images > a, .row .image-grid .grid-images > span {
width: calc(50% - 8px);
padding: 8px 0;
}
}
.row .image-grid .grid-images > a .feature-image, .row .image-grid .grid-images > span .feature-image {
width: 100%;
text-align: center;
}
.row .image-grid .grid-images > a .feature-image img, .row .image-grid .grid-images > span .feature-image img {
width: 100%;
display: block;
}
.row .image-grid .grid-images > a .feature-text, .row .image-grid .grid-images > span .feature-text {
margin: 5px;
font-size: 18px;
line-height: 22px;
text-align: center;
font-family: "Source Sans Pro";
font-style: normal;
}
.row .image-grid .grid-images > a .feature-text {
text-decoration: underline;
}
.row .image-grid.text-light h2 {
color: #fff;
}
.row .image-grid.text-light .button-see-more {
color: #fff;
}
.row .image-grid.text-light .button-see-more:hover {
color: #fff;
}
.row .image-grid.text-light .grid-images > a, .row .image-grid.text-light .grid-images > span {
color: #fff;
}
.highlighted-error {
background: #ffe1e1;
padding: 10px 26px;
text-align: center;
font-size: 14px;
}
.pdp-plus-header,
.pdp-plus-text {
width: 100%;
float: left;
padding: 5px 0;
}
.pdp-plus-header {
font-size: 18px;
font-weight: 600;
padding: 16px 24px;
}
.pdp-plus-header p {
margin: 7px 0px;
}
.pdp-plus-text {
font-weight: 400;
float: left;
width: 100%;
padding-right: 20px;
}
.plus-exclusive-header-logo {
background: url(../img/plus-green.png) no-repeat;
background-size: auto;
float: left;
width: 60px;
height: 44px;
background-size: contain;
margin-right: 10px;
}
.button.button-plus.plus-button-icon::after {
display: none;
}
@media only screen and (min-width: 641px) {
.basket-form.plus-form .button-plus {
margin-bottom: 10px;
}
}
.button.button-plus.plus-button-icon::before {
background: url(../img/plus/plus-exclusive-stamp.png) no-repeat center;
background-size: contain;
width: 40px;
height: 35px;
top: 2px;
border-radius: 0;
}
.button.button-plus.plus-button-icon {
margin-bottom: 0px;
font-size: 17px;
height: 36px;
position: relative;
padding: 1px 30px 0 54px;
color: #000;
}
.plus-exclusive-alert {
background-color: #e7f5e5;
}
.plus-exclusive-alert + div {
padding: 26px 16px;
}
.plus-exclusive-alert h3 {
font-family: "Born Ready", Baskerville, serif;
font-style: normal;
font-size: 22px;
}
.plus-exclusive-alert h3 .inline-plus {
font-size: inherit;
}
.button.button-plus.plus-button-icon.add-to-basket {
width: 208px;
}
.plus-button-container {
float: left;
width: 100%;
padding-top: 10px;
}
.plus-student .plus-exclusive-cta,
.plus-student .button.button-plus {
background-color: #76c0e2;
}
.plus-student .plus-exclusive-header-logo {
background: url(../img/plus-blue.png) no-repeat;
background-size: contain;
}
.plus-student .plus-exclusive-alert {
background-color: #e3f2fa;
}
.plus-student .plus-exclusive-alert .inline-plus {
color: #69afd0;
}
.plus-bookseller .plus-exclusive-cta,
.plus-bookseller .button.button-plus {
background-color: #a783b7;
}
.plus-bookseller .plus-exclusive-header-logo {
background: url(../img/plus-purple.png) no-repeat;
background-size: contain;
}
.plus-bookseller .plus-exclusive-alert {
background-color: #f3e6f9;
}
.plus-bookseller .plus-exclusive-alert .inline-plus {
color: #a783b7;
}
@media only screen and (max-width: 640px) {
.plus-exclusives-wrap .pdp-plus-header {
width: 100%;
}
.plus-exclusives-wrap .plus-exclusives-copy {
width: 100%;
}
.plus-exclusives-wrap .plus-exclusives-copy .pdp-plus-text {
padding-right: 0px;
}
.plus-exclusives-wrap .plus-exclusives-buttons {
width: 100%;
float: none;
}
.button.button-plus.plus-button-icon {
font-size: 17px;
padding: 1px 30px 0;
}
.book-editorial .button.button-plus.plus-button-icon {
padding: 1px 30px 0 54px;
}
.plus-exclusives-wrap {
display: block;
}
.competition-page .button-plus {
width: 100%;
}
.competition-page .comp-entry-form .button.button-plus.join-plus {
margin-top: 10px;
}
}
.plus-exclusive-cta {
background-color: #80c078;
text-decoration: none;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-image: url("../img/plus/plus-exclusive-stamp.png");
background-repeat: no-repeat;
background-size: 34px;
background-position: 4px bottom;
max-width: 215px;
margin: 0 auto;
}
.plus-exclusive-cta:hover {
text-decoration: none;
}
.plus-exclusive-cta .plus-exclusive-cta-inner {
color: #000;
font-size: 14px;
padding-top: 2px;
font-weight: 400;
text-transform: uppercase;
height: 100%;
position: relative;
display: flex;
align-items: center;
}
.plus-exclusive-cta .inline-plus {
color: #fff;
padding-right: 3px;
font-size: 18px;
margin-top: 0;
}
.plus-exclusive-cta .cta-arrow {
width: 11px;
margin-left: 2px;
height: 100%;
background: url("../img/white-arrow.png") center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 100%;
}
@media only screen and (max-width: 640px) {
.plus-exclusive-cta .plus-exclusive-cta-inner {
font-size: 12px;
}
.plus-exclusive-cta .inline-plus {
font-size: 15px;
}
.plus-exclusive-cta .cta-arrow {
width: 9px;
top: -1px;
}
}
.countdown-timer {
opacity: 0;
transition: opacity 0.5s;
}
.countdown-timer.timer-loaded {
opacity: 1;
}
.appstore-redirect {
display: none;
}
/*
Welcome to Waterstones Styles!
*/
/*
CSS for default ribbon banner
HTML for previous campaign banners can be found in the Waterstones app here: application/views/default/ribbons
*/
.ribbon-banner {
width: 100%;
height: 40px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: normal;
letter-spacing: 0.6px;
z-index: 999;
text-decoration: none;
position: absolute;
top: 0;
background: #336b75;
}
.ribbon-banner + #masthead {
padding-top: 40px;
padding-top: calc(38px + 40px);
}
.ribbon-banner + #masthead + .site-ribbon.detached {
top: calc(94px + 40px);
}
.ribbon-banner + #masthead #header-bar.detached + div#main-logos {
margin-top: 0;
}
.ribbon-banner + #masthead .main-nav.detached {
top: calc(39px + 40px);
}
.ribbon-banner .message {
text-align: center;
position: relative;
}
.theme-tagged-browsing .ribbon-banner,
.theme-tagged-browsing .ribbon-banner + #masthead .header-bar {
position: absolute !important;
}
@media only screen and (max-width: 770px) {
.theme-tagged-browsing .ribbon-banner,
.theme-tagged-browsing .ribbon-banner + #masthead .header-bar {
position: fixed !important;
}
}
html:not(.touch) .cookie-bar + .ribbon-banner {
top: 112px;
}
html:not(.touch) .cookie-bar + .ribbon-banner.detached,
.ribbon-banner.detached {
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
}
.no-touch .ribbon-banner + #masthead .header-bar {
position: absolute;
top: 40px;
}
.no-touch .ribbon-banner + #masthead .header-bar.detached,
.ribbon-banner + #masthead .header-bar.detached {
position: fixed;
top: 40px;
}
.row .accountSidebar-sticky {
top: calc(103px + 40px);
}
.touch .theme-tagged-browsing .ribbon-banner + #masthead .header-bar {
position: absolute;
}
.touch .ribbon-banner {
position: fixed;
height: 50px;
}
.touch .ribbon-banner + #masthead + .site-ribbon.detached {
top: calc(93px + 50px);
}
.touch .ribbon-banner + #masthead #main-logos,
.touch .ribbon-banner + #masthead .nav-trigger-button,
.touch .ribbon-banner + #masthead .search-trigger-button {
top: 50px !important;
}
.touch .ribbon-banner + #masthead .header-bar {
top: 50px;
}
.touch .ribbon-banner + #masthead .header-basket,
.touch .ribbon-banner + #masthead .nav-shop-finder {
top: calc(50px + 1px);
}
.touch .ribbon-banner + #masthead .header-search {
top: calc(59px + 50px);
}
.touch .ribbon-banner .message {
font-size: 14px;
}
@media only screen and (max-width: 770px) {
.no-touch .site-ribbon.detached {
top: 103px;
}
.no-touch .ribbon-banner + #masthead {
padding-top: calc(103px + 50px);
}
.no-touch .ribbon-banner + #masthead + .site-ribbon.detached {
top: calc(103px + 50px);
}
.no-touch .ribbon-banner + #masthead #main-logos,
.no-touch .ribbon-banner + #masthead .nav-trigger-button,
.no-touch .ribbon-banner + #masthead .search-trigger-button {
top: 50px !important;
}
.no-touch .ribbon-banner + #masthead .header-basket,
.no-touch .ribbon-banner + #masthead .nav-shop-finder {
top: calc(50px + 1px);
}
.no-touch .ribbon-banner + #masthead .nav-trigger-button {
top: calc(50px - 11px) !important;
}
.no-touch .ribbon-banner + #masthead .main-nav-holder {
top: calc(50px + 50px);
}
.ribbon-banner {
position: fixed;
height: 50px;
top: 0 !important;
}
.ribbon-banner .message {
font-size: 14px;
}
}
/* password strength indicator */
#pw_macho {
width: 100%;
margin-bottom: 3px;
float: left;
}
#pw_macho .label {
margin-top: 3px;
margin-bottom: 3px;
}
#pw_macho .bar {
height: 5px;
}
[class^=pw-very-weak] .bar {
background: #e74c3c;
width: 15%;
}
[class^=pw-very-weak] .label {
color: #e74c3c;
}
.pw-very-weak-1 .bar {
width: 3%;
}
.pw-very-weak-2 .bar {
width: 6%;
}
.pw-very-weak-3 .bar {
width: 9%;
}
.pw-very-weak-4 .bar {
width: 12%;
}
.pw-weak .bar {
background: #e67e22;
width: 30%;
}
.pw-weak .label {
color: #e67e22;
}
.pw-mediocre .bar {
background: #f3b31a;
width: 50%;
}
.pw-mediocre .label {
color: #f3b31a;
}
.pw-strong .bar {
background: #1abc9c;
width: 100%;
}
.pw-strong .label {
color: #1abc9c;
}
/** Footer newsletter sign up panel **/
.egift-modal-success, .ws-app .button-shop-info, .ws-app .button-get-directions,
.ws-app .button-contact, .ws-app .button-primary, .ws-app .button-secondary, .ws-app .button-tertiary, .ribbon-banner.double-stamps-ribbon, .ribbon-banner.campaign-ribbon, .shop-filters-wrap .shop-filter-pill, .close-modal-x, .show-hide-password {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.shop-filters-wrap {
-ms-overflow-style: none;
scrollbar-width: none;
}
.shop-filters-wrap::-webkit-scrollbar {
display: none;
}
#collectModal .input-overlay, #masthead .logo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ws-app .button-primary, .ws-app .button-secondary, .ws-app .button-tertiary {
cursor: pointer;
font-weight: 400;
padding: 4px 20px;
display: inline-block;
text-decoration: none;
}
.container.wpaccess .card .checkout .field.valid, .container.wpaccess .card .checkout .field.is-valid,
#billing-address-form .card .checkout .field.valid,
#billing-address-form .card .checkout .field.is-valid,
#shipping-address-form .card .checkout .field.valid,
#shipping-address-form .card .checkout .field.is-valid,
#changeCardModal .card .checkout .field.valid,
#changeCardModal .card .checkout .field.is-valid {
border-bottom-color: #008000;
background-image: url("../img/validate-tick.png");
background-repeat: no-repeat;
background-size: 15px;
background-position: calc(100% - 10px) center;
}
.container.wpaccess .card .checkout .field.is-invalid, .container.wpaccess .card .checkout .field.is-empty,
#billing-address-form .card .checkout .field.is-invalid,
#billing-address-form .card .checkout .field.is-empty,
#shipping-address-form .card .checkout .field.is-invalid,
#shipping-address-form .card .checkout .field.is-empty,
#changeCardModal .card .checkout .field.is-invalid,
#changeCardModal .card .checkout .field.is-empty, .container.wpaccess .field.input-error, .container.wpaccess .field.input-error + .trigger,
#billing-address-form .field.input-error,
#billing-address-form .field.input-error + .trigger,
#shipping-address-form .field.input-error,
#shipping-address-form .field.input-error + .trigger,
#changeCardModal .field.input-error,
#changeCardModal .field.input-error + .trigger, .container.wpaccess input.input-error,
.container.wpaccess input.input-error + .trigger,
#billing-address-form input.input-error,
#billing-address-form input.input-error + .trigger,
#shipping-address-form input.input-error,
#shipping-address-form input.input-error + .trigger,
#changeCardModal input.input-error,
#changeCardModal input.input-error + .trigger {
border-bottom-color: #B60303;
background-image: url("../img/validate-cross.png");
background-repeat: no-repeat;
background-size: 15px;
background-position: calc(100% - 10px) center;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.newsletter-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #E0E9ED;
width: calc(100% - 40px);
margin: 0 auto 20px;
padding: 15px 25px 20px;
border-radius: 24px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 400;
color: #000;
position: relative;
}
.newsletter-panel .close {
width: 14px;
height: 14px;
position: absolute;
top: 10px;
right: 10px;
background-image: url(../img/icons-close.png);
background-size: 14px;
background-repeat: no-repeat;
}
.newsletter-panel .form-error {
position: absolute;
text-align: center;
font-size: 12px;
color: #ff0000;
}
.newsletter-panel .form-error.mob {
width: calc(100% - 50px);
bottom: 2px;
}
.newsletter-panel .form-error.desktop {
width: 100%;
display: none;
bottom: -20px;
}
.newsletter-panel .pre-sent {
width: 100%;
}
.newsletter-panel .pre-sent .lead-area {
margin-bottom: 15px;
text-align: center;
letter-spacing: 0;
}
.newsletter-panel .pre-sent .lead-area div.title {
font-family: Baskerville, serif;
font-style: italic;
padding-bottom: 10px;
font-size: 24px;
}
.newsletter-panel .pre-sent .lead-area div.sub-title {
font-size: 16px;
}
.newsletter-panel .pre-sent .input-area form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.newsletter-panel .pre-sent .input-area form.inputs-expanded {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.newsletter-panel .pre-sent .input-area form.inputs-expanded .outer-wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.newsletter-panel .pre-sent .input-area form.inputs-expanded input {
border-radius: 6px;
}
.newsletter-panel .pre-sent .input-area form.inputs-expanded button.button-chevron {
display: none;
}
.newsletter-panel .pre-sent .input-area form.inputs-expanded .privacy-policy-wrap,
.newsletter-panel .pre-sent .input-area form.inputs-expanded button.button-text {
display: block;
}
.newsletter-panel .pre-sent .input-area .outer-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.newsletter-panel .pre-sent .input-area .input-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.newsletter-panel .pre-sent .input-area .input-wrap input {
width: 100%;
height: 44px;
border: 1px solid #336b75;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.newsletter-panel .pre-sent .input-area button.button-chevron {
width: 40px;
height: 44px;
border: 1px solid #336b75;
background-image: url(../img/ns-chev.png);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.newsletter-panel .pre-sent .input-area button.button-chevron.waiting {
background-image: none;
}
.newsletter-panel .pre-sent .input-area .privacy-policy-wrap .checkbox-label {
padding: 10px 0;
margin-top: 0;
}
.newsletter-panel .pre-sent .input-area .privacy-policy-wrap .checkbox-label .label-content {
font-size: 13px;
font-weight: 300;
line-height: 15px;
padding-left: 30px;
}
.newsletter-panel .pre-sent .input-area .privacy-policy-wrap .ws-checkbox-outer {
position: absolute;
width: 22px;
height: 22px;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-color: #336b75;
}
.newsletter-panel .pre-sent .input-area .privacy-policy-wrap .ws-checkbox-outer:before {
font-size: 18px;
text-indent: 0px;
line-height: 20px;
}
.newsletter-panel .pre-sent .input-area button.button-text {
display: none;
width: 100%;
height: 46px;
font-size: 20px;
}
.newsletter-panel .post-sent {
display: none;
font-size: 16px;
max-width: 275px;
text-align: center;
line-height: 22px;
padding-top: 10px;
margin: auto;
}
.newsletter-panel .post-sent .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.newsletter-panel .post-sent .wrap img {
width: 65px;
}
.newsletter-panel .collapsed {
display: none;
cursor: pointer;
}
.newsletter-panel .collapsed img {
width: 55px;
}
@media only screen and (min-width: 768px) {
.newsletter-panel {
padding: 20px;
}
.newsletter-panel .form-error.mob {
display: none;
}
.newsletter-panel .form-error.desktop {
display: block;
}
.newsletter-panel .pre-sent .lead-area {
max-width: 380px;
margin: 0 auto 15px;
}
.newsletter-panel .pre-sent .lead-area div.title {
padding-bottom: 5px;
font-size: 28px;
line-height: 28px;
}
.newsletter-panel .pre-sent .lead-area div.sub-title {
font-size: 18px;
}
.newsletter-panel .pre-sent .input-area form,
.newsletter-panel .pre-sent .input-area form.inputs-expanded,
.newsletter-panel .pre-sent .input-area form.inputs-expanded .outer-wrap {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.newsletter-panel .pre-sent .input-area form {
max-width: 768px;
margin: auto;
}
.newsletter-panel .pre-sent .input-area form .input-wrap {
position: relative;
}
.newsletter-panel .pre-sent .input-area form .input-wrap input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.newsletter-panel .pre-sent .input-area form .privacy-policy-wrap {
display: block;
margin-right: 20px;
text-align: left;
}
.newsletter-panel .pre-sent .input-area form .privacy-policy-wrap .checkbox-label {
margin: 0;
padding: 0;
}
.newsletter-panel .pre-sent .input-area form button.button-text {
display: block;
max-width: 144px;
max-height: 44px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.newsletter-panel .pre-sent .input-area form button.button-chevron {
display: none;
}
.newsletter-panel .post-sent {
max-width: 400px;
}
}
.newsletter-panel.float {
width: calc(100% - 50px);
max-width: 825px;
position: fixed;
right: 25px;
bottom: 70px;
border-radius: 7px;
z-index: 2;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
padding: 25px 20px 20px;
}
.newsletter-panel.float .pre-sent .lead-area {
margin: 0;
}
.newsletter-panel.float .pre-sent .lead-area div.title {
padding: 0;
}
.newsletter-panel.float .pre-sent .input-area .outer-wrap {
margin-top: 10px;
}
.newsletter-panel.float .pre-sent .input-area form.inputs-expanded .outer-wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
}
.newsletter-panel.float .pre-sent .input-area form.inputs-expanded input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.newsletter-panel.float .pre-sent .input-area form.inputs-expanded button.button-chevron {
display: block;
}
.newsletter-panel.float .post-sent {
padding: 0;
}
.newsletter-panel.float .post-sent .wrap img {
display: none;
}
.newsletter-panel.float .privacy-policy-wrap .checkbox-label .label-content {
margin-left: 0 !important;
}
@media only screen and (min-width: 768px) {
.newsletter-panel.float {
max-height: 100px;
}
.newsletter-panel.float .pre-sent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.newsletter-panel.float .pre-sent .lead-area {
max-width: 235px;
margin-right: 15px;
}
.newsletter-panel.float .pre-sent .lead-area div.title {
font-size: 26px;
}
.newsletter-panel.float .pre-sent .input-area {
flex-grow: 2;
}
.newsletter-panel.float .pre-sent .input-area form .outer-wrap {
margin: 0;
}
.newsletter-panel.float .pre-sent .input-area form .outer-wrap .privacy-policy-wrap {
max-width: 200px;
margin-right: 5px;
}
.newsletter-panel.float .pre-sent .input-area form .outer-wrap .privacy-policy-wrap .ws-checkbox-outer {
top: 2px;
transform: none;
}
.newsletter-panel.float .pre-sent .input-area form .outer-wrap .privacy-policy-wrap .checkbox-label {
padding: 0;
}
.newsletter-panel.float .pre-sent .input-area form .outer-wrap button.button-chevron {
display: block;
}
.newsletter-panel.float .pre-sent .input-area form.inputs-expanded .outer-wrap {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.newsletter-panel.float .post-sent {
max-width: 500px;
}
.newsletter-panel.float .post-sent .wrap {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.newsletter-panel.float .post-sent .wrap img {
display: block;
margin-left: 15px;
}
.newsletter-panel.float .privacy-policy-wrap .checkbox-label .label-content {
margin-left: 30px;
}
}
/** Footer newsletter sign up panel **/
/*
Styles shared between the main site and checkout
*/
.password-field-wrap {
position: relative;
float: left;
width: 100%;
}
.password-field-wrap > input {
width: 100%;
}
.show-hide-password {
display: block;
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: 24px;
background-image: url("../img/mobile-app/icons/eye-grey.png");
background-size: contain;
cursor: pointer;
}
.input-large ~ .show-hide-password {
top: 6px;
}
@media only screen and (max-width: 640px) {
.plus-form .input-large ~ .show-hide-password {
top: 1px;
}
}
.panel-content-delivery .show-hide-password {
background-image: url("../../img/mobile-app/icons/eye-grey.png");
top: 4px;
}
.show-password .show-hide-password {
background-image: url("../img/mobile-app/icons/eye.png");
}
.panel-content-delivery .show-password .show-hide-password {
background-image: url("../../img/mobile-app/icons/eye.png");
}
.ot-floating-button,
.banner-close-btn-container,
.ot-close-icon,
.ot-close-cntr {
display: none !important;
}
.ot-desc-cntr {
outline: none !important;
}
#onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob:before,
#onetrust-pc-sdk *, #onetrust-pc-sdk ::after, #onetrust-pc-sdk ::before {
outline: none !important;
}
.cky-switch input[type=checkbox] {
border-radius: 50px !important;
}
.cky-audit-table ul li {
float: none;
}
.error-message {
color: #cc0000;
}
/** Footer newsletter sign up panel **/
body {
--service-ribbon-height: 25px;
}
#masthead {
position: relative;
padding: 0 0 60px 0;
background: #fff;
}
#masthead.no-nav {
padding-bottom: 0;
border-bottom: 1px solid #D1D1D1;
}
#masthead.ribbon {
padding-bottom: calc(60px + var(--service-ribbon-height));
}
#masthead > .inner,
#masthead > .inner .span12 {
height: 70px;
}
#masthead .nav-shops,
#masthead .nav-account,
#masthead .nav-wish-lists {
background: url(../img/icons/account.png) 8px center no-repeat;
background-size: auto 14px;
padding-left: 28px;
}
#masthead .nav-shops {
background-image: url(../img/icons/pin.png);
background-size: auto 18px;
}
#masthead .nav-account {
background-image: url(../img/icons/account.png);
background-position: 8px 0;
}
#masthead .nav-wish-lists {
background-image: url(../img/icons/heart.png);
background-size: auto 16px;
}
#masthead .nav-shops-li {
padding-left: 0 !important;
}
#masthead .nav-shops {
background-image: url(../img/icons/pin.png);
background-size: auto 18px;
}
#masthead .navbar-redesign {
float: left !important;
}
#masthead .navbar-redesign ul {
float: none !important;
}
#masthead #nav_basket {
height: 40px;
width: 50px;
display: inline-block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 11px;
font-weight: 400;
color: #030303;
}
#masthead #nav_basket:hover, #masthead #nav_basket:focus {
color: #000000;
}
#masthead #nav_basket .basket-count {
display: inline-block;
width: 27px;
height: 22px;
background: url(../img/icons/basket.png) no-repeat;
background-size: contain;
color: transparent;
font-size: 0;
}
#masthead #nav_basket .basket-count:before {
content: "";
display: block;
width: 11px;
height: 8px;
background: url(../img/icons/basket-w.png) no-repeat;
background-size: contain;
margin: 11px auto 0;
}
#masthead #nav_basket .basket-count.plain-basket {
color: #000;
font-size: 11px;
padding-top: 9px;
}
#masthead #nav_basket .basket-count.plain-basket:before {
display: none;
}
#masthead #nav_basket .basket-count.font-size-small {
font-size: 10px;
}
#masthead #nav_basket .basket-label {
margin-top: 2px;
}
#masthead #main-logos {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
overflow: hidden;
}
#masthead .logo {
margin: auto;
font: 0/0 a;
text-shadow: none;
color: transparent;
overflow: hidden;
background-image: url("../img/site-logos/waterstones-logo-standard.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 305px;
height: 68px;
margin-top: 0;
margin-bottom: 0;
}
@media only screen and (max-width: 770px) {
#masthead .logo {
top: 0;
height: 50px;
width: calc(100% - 200px);
max-width: 250px;
background-size: 100%;
background-image: url("../img/site-logos/waterstones-logo-standard-mob.png");
}
}
@media only screen and (max-width: 640px) {
#masthead .logo {
max-width: 200px;
}
}
#masthead .logo h1 {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#masthead .logo-small {
display: none !important;
}
#masthead .logo-small a {
display: block;
background-image: url("../img/site-logos/waterstones_logo.svg");
background-size: 87px;
background-repeat: no-repeat;
width: 95px;
height: 14px;
background-position: 8px 0;
}
.header-bar {
position: relative;
top: 0;
left: 0;
width: 100%;
background: #ffffff;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
font-smooth: auto;
z-index: 102;
transition: opacity 0.2s;
}
.touch .header-bar .right-menu > ul > li.nav-shops-li {
display: none;
}
header .header-bar li.welcome-message {
color: #999999;
margin-right: 3px;
}
.lt-ie9 .header-bar {
min-width: 1000px;
}
.header-bar a {
text-decoration: none;
color: #000;
padding-top: 2px;
}
.header-bar a:hover {
color: #000;
text-decoration: underline;
}
.header-bar a:focus {
color: #000;
}
.header-bar b {
font-family: inherit;
font-weight: inherit;
}
.header-bar > .row {
font-size: 13px;
line-height: 30px;
white-space: nowrap;
letter-spacing: 0.04em;
}
.header-bar .right-menu {
float: right;
padding: 4px 15px;
}
.header-bar .right-menu.secondary-nav {
float: left;
}
.header-bar .right-menu > ul {
float: right;
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}
.header-bar .right-menu > ul > li {
position: relative;
display: inline-block;
text-transform: uppercase;
vertical-align: top;
font-weight: 400;
padding: 2px 12px 0 9px;
margin: 8px 0;
border-right: 1px solid #ccc;
line-height: 14px;
}
.header-bar .right-menu > ul > li.with-dropdown:hover:after, .header-bar .right-menu > ul > li.with-dropdown.active:after, .header-bar .right-menu > ul > li.with-dropdown.plus-account.active:before, .header-bar .right-menu > ul > li.with-dropdown.plus-account:hover:before, .header-bar .right-menu > ul > li.with-dropdown.plus-account.active:after, .header-bar .right-menu > ul > li.with-dropdown.plus-account:hover:after {
content: " ";
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent #dddddd transparent;
overflow: hidden;
z-index: 1;
float: left;
}
.header-bar .right-menu > ul > li:first-child {
padding-left: 0px;
}
.header-bar .right-menu > ul > li:last-child {
border: 0;
padding-right: 0;
}
.header-bar .right-menu > ul > li.nav-plus {
padding: 0 13px 0 7px;
}
.header-bar .right-menu > ul > li.account-attention {
padding-right: 25px;
}
.header-bar .right-menu > ul > li.account-attention > a:after {
content: "!";
background-image: none;
display: inline-flex;
background: red;
color: #fff;
align-items: center;
justify-content: center;
font-weight: 600;
border-radius: 50%;
width: 10px;
height: 10px;
font-size: 8px;
position: absolute;
top: -3px;
right: 14px;
}
.header-basket,
.header-search {
position: relative;
float: right;
margin-top: 8px;
z-index: 10000;
transition: opacity 0.2s;
}
.header-basket {
margin-left: 16px;
}
.header-search {
width: 22%;
min-width: 250px;
}
.header-search .input-wrap {
position: relative;
width: 100%;
}
.header-search .input-wrap .main-search-bar {
display: flex;
align-items: center;
background-color: #eaeff2;
}
.header-search .input-wrap .main-search-bar .input-search {
flex: 1;
padding: 5px 24px 5px 12px;
border: 0;
background-color: transparent;
}
.header-search .input-wrap .main-search-bar .input-search::placeholder {
color: #505050;
}
.header-search .input-wrap .main-search-bar .input-search:not(:placeholder-shown) + .button-clear-search {
display: block;
}
.header-search .input-wrap .main-search-bar .button-clear-search {
display: none;
position: absolute;
right: 32px;
height: 100%;
width: 32px;
cursor: pointer;
}
.header-search .input-wrap .main-search-bar .button-clear-search:before, .header-search .input-wrap .main-search-bar .button-clear-search:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #a6a6a6;
overflow: hidden;
border-radius: 3px;
margin-top: -2px;
}
.header-search .input-wrap .main-search-bar .button-clear-search:before {
transform: translateX(-50%) rotate(-45deg);
}
.header-search .input-wrap .main-search-bar .button-clear-search:after {
transform: translateX(-50%) rotate(45deg);
}
.header-search .input-wrap .main-search-bar .button-search-input {
padding: 0;
border: 0;
background-color: transparent;
}
.header-search .input-wrap .main-search-bar .button-search-input:before {
content: "";
display: block;
width: 15px;
height: 15px;
padding: 9px;
background-image: url("../img/icons/search-button.svg");
background-repeat: no-repeat;
background-position: 6px 6px;
background-size: 55%;
}
.nav-trigger-button {
display: none;
}
.mob-close-button {
position: fixed;
top: 0;
right: 50px;
width: 40px;
height: 46px;
line-height: 46px;
cursor: pointer;
overflow: hidden;
z-index: 102;
transform: translate3d(0, 0, 0);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s, right 0.3s;
}
.mob-close-button:before, .mob-close-button:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 3px;
background: #000;
overflow: hidden;
border-radius: 3px;
margin-top: -2px;
}
.mob-close-button:before {
transform: translateX(-50%) rotate(-45deg);
}
.mob-close-button:after {
transform: translateX(-50%) rotate(45deg);
}
.mob-close-button .mob-close-label {
position: absolute;
bottom: -2px;
font-size: 11px;
font-weight: 400;
line-height: normal;
width: 100%;
text-align: center;
}
.main-nav {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 55px;
border: 1px solid #D3D3D3;
border-left: none;
border-right: none;
background: #fff;
z-index: 100;
}
.ribbon .main-nav {
height: calc(55px + var(--service-ribbon-height));
border-bottom: none;
}
.main-nav .header-ribbon {
position: absolute;
bottom: 0;
width: 100%;
height: max-content;
max-height: 55px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0 !important;
padding: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
background: #EBE5E1;
font-size: 13px;
font-weight: 500;
text-align: center;
overflow: hidden;
}
.main-nav .header-ribbon .slide {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0;
}
.main-nav .header-ribbon a {
text-decoration: none;
cursor: pointer;
}
.main-nav .header-ribbon a,
.main-nav .header-ribbon > span {
display: block;
max-height: 32px;
overflow: hidden;
}
@media only screen and (max-width: 640px) {
.main-nav .header-ribbon {
bottom: calc(100vh - 90px - var(--service-ribbon-height));
font-size: 13px;
}
}
.lt-ie9 .main-nav {
min-width: 1000px;
}
.main-nav .with-dropdown.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent #dddddd transparent;
overflow: hidden;
z-index: 1;
float: left;
}
.nav-dropdown {
display: none;
position: absolute;
top: 15px;
right: 0;
white-space: normal;
font-size: 15px;
line-height: normal;
text-transform: none;
z-index: 10001;
padding-top: 10px;
}
.nav-dropdown.nav-dropdown-basket {
width: 340px;
margin-left: -177px;
top: 40px;
}
.nav-dropdown .inner {
background: #fff;
border: 2px solid #ddd;
padding: 20px;
}
.nav-dropdown-account {
width: 360px;
margin-left: -180px;
}
.nav-dropdown-account.account-dropdown-error .points {
white-space: normal;
padding: 6px 30px;
}
.nav-dropdown-account .left,
.nav-dropdown-account .right {
float: left;
}
.nav-dropdown-account .left {
width: 60%;
}
.nav-dropdown-account .right {
width: 40%;
padding-left: 25px;
}
.nav-dropdown-account .button {
padding: 0;
width: 100%;
text-align: center;
font-size: 15px;
}
.nav-dropdown-account .points {
margin: 0 0 17px;
padding: 0 0 17px;
border-bottom: 1px solid #e3e3e3;
color: #000;
}
.nav-dropdown-account .account-dropdown-completed-cards {
font-weight: bold;
}
.right-menu > ul > li:hover .nav-dropdown,
.right-menu > ul > li.active .nav-dropdown,
.main-nav .with-dropdown.active .nav-dropdown {
display: block;
}
/* Main nav Plus (default) */
.plus-account-dropdown {
width: auto;
min-width: 368px;
top: 19px;
right: -26px;
padding-top: 15px;
}
.plus-account-dropdown .inner {
height: 169px;
padding: 16px 30px 28px;
background: url(../img/plus/dropdown-stamp-bkgd.png) bottom left no-repeat #e7f5e6;
background-size: 174px;
border: 1px solid #80c078;
box-shadow: -2px 2px 3px #ccc;
}
.plus-account-dropdown .balance-target {
display: none;
text-transform: uppercase;
font-size: 16px;
text-align: center;
white-space: nowrap;
margin: 10px 0;
}
.plus-account-dropdown .gbp {
font-weight: bold;
}
.plus-account-dropdown .points {
padding: 6px 14px;
margin: 12px 0 16px;
border: none;
background: rgba(128, 192, 120, 0.4);
font-size: 14px;
text-align: center;
white-space: nowrap;
display: none;
}
.plus-account-dropdown .button {
background: #80c078;
width: auto;
float: right;
padding: 5px 38px 5px 28px;
font-weight: 500;
line-height: normal;
position: absolute;
right: 31px;
bottom: 29px;
}
.plus-account-dropdown .button:after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 22px;
background: url(../img/chevron.png) no-repeat center;
background-size: contain;
width: 12px;
height: 12px;
transform: rotate(-90deg) translateX(50%);
}
.plus-account-dropdown .button .inline-plus {
color: #fff;
}
.plus-account-dropdown .account-loading-wrap {
position: absolute;
top: 16px;
left: 0;
width: 100%;
height: 106px;
display: flex;
align-items: center;
justify-content: center;
}
.plus-account-dropdown .account-loading-spinner {
width: 42px;
height: 42px;
background: url(../img/loading-wheel-green.png) no-repeat center;
background-size: contain;
animation: spin 1000ms infinite linear;
}
.header-bar .right-menu > ul > li.with-dropdown.plus-account:hover:before, .header-bar .right-menu > ul > li.with-dropdown.plus-account.active:before {
content: "";
border-color: transparent transparent #80c078 transparent;
bottom: -20px;
}
.header-bar .right-menu > ul > li.with-dropdown.plus-account:hover:after, .header-bar .right-menu > ul > li.with-dropdown.plus-account.active:after {
content: "";
border-color: transparent transparent #e7f5e6 transparent;
bottom: -22px;
z-index: 10001;
}
/* Main nav Plus Student */
.header-bar .right-menu > ul > li.is-student.with-dropdown.plus-account:hover:before, .header-bar .right-menu > ul > li.is-student.with-dropdown.plus-account.active:before {
border-color: transparent transparent #76c0e2 transparent;
}
.header-bar .right-menu > ul > li.is-student.with-dropdown.plus-account:hover:after, .header-bar .right-menu > ul > li.is-student.with-dropdown.plus-account.active:after {
border-color: transparent transparent #e3f2fa transparent;
}
.is-student .plus-account-dropdown .account-loading-spinner {
background: url(../img/loading-wheel-blue.png) no-repeat center;
background-size: contain;
}
.is-student .plus-account-dropdown .inner {
border-color: #76c0e2;
background-color: #e3f2fa;
}
.is-student .plus-account-dropdown .points {
background-color: rgba(118, 192, 226, 0.3);
}
.is-student .plus-account-dropdown .button {
background-color: #76c0e2;
}
/* Main nav Plus Bookseller */
.nav-plus.book-seller .balance-target .inline-plus {
color: #8e52a8;
}
.header-bar .right-menu > ul > li.book-seller.with-dropdown.plus-account:hover:before, .header-bar .right-menu > ul > li.book-seller.with-dropdown.plus-account.active:before {
border-color: transparent transparent #a783b7 transparent;
}
.header-bar .right-menu > ul > li.book-seller.with-dropdown.plus-account:hover:after, .header-bar .right-menu > ul > li.book-seller.with-dropdown.plus-account.active:after {
border-color: transparent transparent #f3e6f9 transparent;
}
.book-seller .plus-account-dropdown .account-loading-spinner {
background: url(../img/loading-wheel-purple.png) no-repeat center;
background-size: contain;
}
.book-seller .plus-account-dropdown .inner {
border-color: #a783b7;
background-color: #f3e6f9;
}
.book-seller .plus-account-dropdown .points {
background-color: rgba(142, 82, 168, 0.3);
}
.book-seller .plus-account-dropdown .button {
background-color: #a783b7;
}
.nav-dropdown-basket table {
width: 100%;
}
.nav-dropdown-basket table.items:not(.basket-totals) {
border-collapse: separate;
border-spacing: 0 5px;
margin-top: -5px;
}
.nav-dropdown-basket table.items:not(.basket-totals) td.image {
width: 70px;
}
.nav-dropdown-basket table tbody tr:not(.template) ~ tr {
border-top: 1px solid #e3e3e3;
}
.nav-dropdown-basket table tbody tr:not(.template) ~ tr td:not(.stock-error-message, .stock-info-mesage) {
padding-top: 16px;
}
.nav-dropdown-basket table tbody tr td:not(.stock-error-message) {
padding-bottom: 11px;
}
.nav-dropdown-basket table tfoot tr {
border-top: 3px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
.nav-dropdown-basket table tfoot tr td {
padding: 10px 0;
}
.nav-dropdown-basket table tfoot .total {
font-size: 18px;
color: #5c5c5c;
}
.nav-dropdown-basket td.info {
padding-left: 10px;
padding-right: 10px;
color: #535353;
vertical-align: top;
}
.nav-dropdown-basket td.info > span {
display: block;
}
.nav-dropdown-basket td.info .title {
position: relative;
display: block;
max-height: 36px;
font-size: 15px;
line-height: 17px;
font-weight: 700;
color: #5c5c5c;
overflow: hidden;
}
.nav-dropdown-basket td.info input[type=submit] {
padding: 0;
background: none;
border: none;
text-decoration: underline;
white-space: normal;
text-align: left;
}
.nav-dropdown-basket td.info input[type=submit]:hover {
text-decoration: none;
}
.nav-dropdown-basket td.info .format {
font-style: italic;
font-size: 14px;
color: #5c5c5c;
margin-top: 5px;
}
.nav-dropdown-basket td.qty {
text-align: center;
width: 50px;
padding-right: 2px;
}
.nav-dropdown-basket .product-image {
display: block;
width: 70px;
}
.nav-dropdown-basket .button-container {
margin-top: 20px;
}
.nav-dropdown-basket .table-wrap {
padding-right: 10px;
width: calc(100% + 10px);
}
.nav-dropdown-basket .table-wrap .items .stock-error-message,
.nav-dropdown-basket .table-wrap .items .stock-info-message {
font-size: 12px;
}
.nav-dropdown-basket .basket-product-price-was {
display: inline-block;
text-decoration: line-through;
}
.nav-popup-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: 999;
opacity: 0.5;
display: none;
}
.nav-dropdown-login {
width: 270px;
margin-left: -209px;
}
.nav-dropdown-login .input {
max-width: none;
width: 100%;
margin-bottom: 10px;
color: #333;
font-style: normal;
}
.nav-dropdown-login label.checkbox-label {
margin: 0 0 5px 0;
}
.nav-dropdown-login a.forgot,
.nav-dropdown-login a.register {
font-size: 12px;
color: #5c5c5c;
}
.navs-container.desktop-navs {
max-height: 44px;
overflow: hidden;
}
.main-nav-bar {
float: left;
padding-left: 4px;
font-weight: 400;
}
.no-touch .main-nav-bar {
overflow: hidden;
z-index: 1;
float: left;
max-width: calc(100% - 340px);
}
ul.navs {
margin: 0;
padding: 0;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
ul.navs > li {
float: left;
margin: 0 5px;
list-style: none;
position: relative;
padding-top: 12px;
}
ul.navs > li:not(:nth-of-type(1)):before {
content: "|";
position: absolute;
left: -11px;
top: 17px;
width: 12px;
text-align: center;
color: #336b75;
}
ul.navs > li:first-child {
margin-left: 0;
}
a.nav-item,
span.nav-item {
position: relative;
display: block;
height: 30px;
padding: 0 8px;
font-size: 14px;
font-weight: normal;
line-height: 30px;
color: #336b75;
text-transform: uppercase;
text-decoration: none;
text-align: center;
white-space: nowrap;
z-index: 1;
letter-spacing: 0.05em;
transition: background 0.3s, color 0.3s;
}
a.nav-item:after,
span.nav-item:after {
content: attr(data-content);
display: block;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: bold;
visibility: hidden;
}
a.nav-item {
cursor: default;
}
a.nav-item[href] {
cursor: pointer;
}
a.nav-item.home {
position: relative;
width: 16px;
padding-left: 0;
padding-right: 0;
font-family: a;
font-size: 0;
text-shadow: none;
color: transparent;
text-align: left;
}
a.nav-item.home:hover, a.nav-item.home.active {
background: transparent;
}
a.nav-item.home:hover:before, a.nav-item.home.active:before {
color: #336b75;
}
a.nav-item.home:after {
display: none;
}
span.nav-item:hover {
cursor: default;
}
.nav-item.home:before {
display: inline-block;
vertical-align: middle;
top: 0;
position: absolute;
left: auto;
right: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
font-size: 15px;
color: #545454;
}
html:not(.touch) a.nav-item:not(.home):hover,
html:not(.touch) .nav-item:not(.home).active {
font-family: "Source Sans Pro", Arial, sans-serif;
color: #fff;
background: #336b75;
}
.mob-nav-footer {
display: none;
}
/*
Mobile and tablet layout
*/
@media only screen and (max-width: 770px) {
.main-container {
padding-top: 107px;
}
.ribbon-banner ~ .main-container {
padding-top: 157px;
}
.ribbon-banner ~ .main-container .header-search .input-wrap .autocomplete-target {
top: 157px;
}
#masthead.ribbon ~ .main-container {
padding-top: calc(107px + var(--service-ribbon-height));
}
.ribbon-banner ~ #masthead.ribbon ~ .main-container {
padding-top: calc(157px + var(--service-ribbon-height));
}
.desktop-navs {
display: none;
}
.mobile-navs {
display: block;
}
.mobile-nav-open {
position: fixed;
width: 100%;
}
.mobile-nav-open .main-nav {
position: fixed;
top: 107px;
bottom: 0;
}
.mobile-nav-open .mob-nav-footer {
display: block;
position: fixed;
bottom: -1px;
width: 100%;
height: 50px;
background-color: #eaeff2;
z-index: 100;
transition: bottom 0.4s;
box-shadow: 1px 1px 5px 1px rgb(130, 130, 130);
}
.mobile-nav-open .mob-nav-footer.hide-mob-nav-footer {
bottom: -55px;
}
.mobile-nav-open .mob-nav-footer ul {
list-style: none;
margin: 0;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.mobile-nav-open .mob-nav-footer ul li {
padding: 6px 0;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
border-right: 1px solid #000;
}
.mobile-nav-open .mob-nav-footer ul li:last-child {
border-right: none;
}
.mobile-nav-open .mob-nav-footer ul li .mob-nav-footer-item {
width: 100%;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#nav-menu-button {
width: 50px;
height: 45px;
text-decoration: none;
}
#nav-menu-button .mob-menu-label {
position: absolute;
bottom: -3px;
left: -2px;
font-size: 11px;
font-weight: 400;
line-height: normal;
width: 100%;
text-align: center;
}
.nav-trigger-button {
position: fixed;
left: 0;
top: 2px;
display: block;
width: 60px;
height: 50px;
line-height: 46px;
cursor: pointer;
overflow: hidden;
z-index: 102;
transform: translate3d(0, 0, 0);
}
.nav-trigger-button:before, .nav-trigger-button:after,
.nav-trigger-button span {
position: absolute;
left: 10px;
top: 50%;
margin-top: -3px;
width: 24px;
height: 3px;
background: #000;
overflow: hidden;
border-radius: 3px;
}
.nav-trigger-button:before, .nav-trigger-button:after {
content: "";
transition: transform 0.3s, margin 0.3s 0.3s;
transform-origin: center center;
}
.nav-trigger-button:before {
margin-top: -11px;
}
.nav-trigger-button:after {
margin-top: 5px;
}
.nav-trigger-button span {
opacity: 1;
transition: opacity 0.3s 0.3s;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.nav-trigger-button.active:before, .nav-trigger-button.active:after {
margin-top: -2px;
transition: transform 0.3s;
}
.nav-trigger-button.active span {
opacity: 0;
transition: none;
}
.nav-trigger-button.active:before {
transform: rotate(-45deg);
}
.nav-trigger-button.active:after {
transform: rotate(45deg);
}
.header-search {
position: fixed;
width: 100%;
height: 47px;
padding: 0 10px 10px;
margin-top: 0;
background: #fff;
z-index: 1609;
top: 60px;
border-bottom: 1px solid #eaeff2;
}
.header-search .input-wrap {
width: 100%;
}
.header-search .input-wrap .main-search-bar {
border-radius: 40px;
overflow: hidden;
}
.header-search .input-wrap .main-search-bar .input-search {
height: 36px !important;
}
.mob-search-open {
position: fixed;
overflow: hidden;
}
.mob-search-open .header-basket,
.mob-search-open .header-bar {
opacity: 0;
pointer-events: none;
}
.mob-search-open .header-search {
border-bottom: 0;
}
.mob-search-open .header-search .input-wrap .autocomplete-target {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 107px;
}
.mob-search-open .header-search .input-wrap .autocomplete-target .autocomplete-popout {
display: block;
height: 100%;
border: 0;
}
.mob-search-open .header-search .input-wrap .autocomplete-target .autocomplete-popout .autocomplete-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.mob-search-open .mob-close-button {
opacity: 1;
right: 2px;
pointer-events: all;
}
#masthead {
border-bottom: none !important;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
padding: 0;
height: 60px;
}
#masthead > .inner,
#masthead > .inner .span12 {
height: 100%;
}
#masthead .main-nav .header-ribbon {
top: 107px;
}
#masthead #nav_basket .basket-label {
text-transform: capitalize;
margin-top: 4px;
}
#masthead .header-basket {
position: fixed;
top: 1px;
right: 0;
margin-top: 7px;
}
#masthead .nav-account,
#masthead .nav-plus {
display: flex;
padding: 20px 0 0;
}
#masthead .nav-account {
background-size: 20px;
background-position: top center;
margin-right: 11px;
}
#masthead .nav-plus {
padding-top: 22px;
margin-right: 2px;
}
#masthead .nav-plus a {
padding: 0;
}
#masthead .nav-plus .plus-info-dropdown,
#masthead .nav-plus .plus-account-dropdown {
display: none;
}
#masthead .nav-plus .plus-pulse-icon {
left: 50%;
transform: translateX(-50%);
}
#masthead .nav-plus .nav-icon-plus {
height: 9px;
width: 22px;
}
#masthead #main-logos {
position: relative;
width: 100%;
max-width: none;
height: 60px;
background: #fff;
-webkit-transition: border-color 0.2s;
transition: border-color 0.2s;
overflow: hidden;
z-index: 100;
margin-top: 0;
}
#masthead #main-logos .logo {
position: absolute;
top: calc(50% - 1px);
left: 40px;
width: 45%;
max-width: 191px;
height: 26px;
transform: translateY(-50%);
margin: 0;
background-image: url(../img/site-logos/waterstones-logo-standard-mob.png);
background-size: 100%;
background-position: center;
}
/* Nav Promo */
/* Account Sidebar */
}
@media only screen and (max-width: 770px) and (max-width: 640px) {
#masthead #main-logos .logo {
left: 50%;
transform: translateY(-50%) translateX(calc(-50% - 60px));
}
}
@media only screen and (max-width: 770px) {
.nav-dropdown,
.header-bar .right-menu > ul > li.nav-plus:before,
.header-bar .right-menu > ul > li.nav-plus:after {
display: none;
}
.nav-dropdown-account {
position: absolute;
top: 100%;
right: auto;
left: 50%;
margin-left: 0;
transform: translateX(-50%);
}
.header-bar {
position: fixed;
left: auto;
right: 0;
top: 0px;
z-index: 1610;
height: 60px;
background: none;
width: auto;
}
.header-bar .right-menu {
height: 60px;
padding: 0 50px 0 0;
margin: 0;
display: flex;
align-items: center;
float: right;
width: 100%;
}
.header-bar .right-menu > ul {
width: 100%;
display: flex;
justify-content: flex-end;
}
.header-bar .right-menu > ul > li {
display: none;
border: none;
text-transform: none;
font-size: 11px;
}
.header-bar .right-menu > ul > li a {
text-decoration: none;
}
.header-bar .right-menu > ul > li.account-attention > a:after {
width: 13px;
height: 13px;
font-size: 11px;
top: -5px;
right: -2px;
}
.main-nav {
position: static;
left: auto;
bottom: auto;
width: 100%;
height: 47px;
border: none;
}
.ribbon .main-nav {
height: calc(47px + var(--service-ribbon-height));
}
.main-nav > .row > [class*=span]:first-child {
padding-left: 0;
padding-right: 0;
}
.main-nav .row {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.main-nav-bar {
position: relative;
display: none;
background: #fff;
width: 100%;
float: none;
padding: 0;
z-index: 100;
overflow: hidden;
}
.main-nav-bar.open {
display: block;
border: 0;
max-width: 100%;
max-height: calc(100vh - 107px);
overflow: auto;
}
.navs-container {
font-size: 0;
line-height: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
white-space: nowrap;
}
.navs-container.moved {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
ul.navs {
display: inline-block;
width: 100%;
vertical-align: top;
}
ul.navs > li {
padding-top: 0;
}
ul.navs a.nav-item {
display: block;
width: auto;
height: auto;
padding: 0 15px;
margin: 0;
font-family: inherit;
font-weight: 400;
font-size: 17px;
line-height: 50px;
text-shadow: inherit;
color: #0c0c0c;
text-align: left;
cursor: pointer;
white-space: normal;
text-transform: capitalize;
}
ul.navs a.nav-item:before {
display: none;
}
ul.navs a.nav-item:after {
content: "\e605";
position: absolute;
right: 4px;
top: 50%;
margin-top: -17px;
display: block;
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-indent: 0;
color: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-size: 34px;
color: #336b75;
visibility: visible;
}
ul.navs a.nav-item .nav-item-inner {
display: block;
padding-top: 2px;
border-bottom: 1px solid #d5e2e8;
}
.accountSidebar li,
ul.navs > li {
float: none;
display: block;
width: 100%;
margin: 0;
white-space: nowrap;
}
.nav-header {
font-size: 16px;
line-height: 20px;
padding: 0 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.accountSidebar li {
border-top: 1px solid #eee;
}
.accountSidebar .inner a {
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.accountSidebar .inner a:hover {
color: #336b75;
}
.accountSidebar .inner a:hover:after {
color: #336b75;
}
.accountSidebar .inner a:after {
content: "\e605";
position: absolute;
right: 10px;
top: 50%;
margin-top: -19px;
display: block;
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-indent: 0;
color: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-size: 40px;
color: #336b75;
visibility: visible;
}
.accountSidebar .inner li.selected a {
background: none;
}
.subnavs {
display: inline-block;
width: 100%;
vertical-align: top;
white-space: normal;
margin: 0;
padding: 0;
}
.subnavs .subnav {
position: static;
left: 0;
right: 0;
top: 0;
padding: 0;
background: none;
border: none;
}
.subnavs .subnav > .row {
margin-bottom: 0;
}
.subnavs .subnav [class*=span] {
float: none;
width: 100%;
padding: 0;
}
.subnavs .subnav ul {
margin-bottom: 0 !important;
}
.subnavs .subnav ul li {
margin: 0;
}
.subnavs .subnav ul li a {
display: block;
width: auto;
height: auto;
padding: 0 20px;
margin: 0;
font-family: inherit;
font-weight: 400;
font-size: 17px;
line-height: 50px;
text-shadow: inherit;
color: #0c0c0c;
text-align: left;
cursor: pointer;
white-space: normal;
text-transform: capitalize;
z-index: 1;
}
.subnavs .subnav ul li a:hover {
background: none;
color: inherit;
}
.nav-promos {
display: none;
}
.accountSidebar.generic-sidebar {
display: none;
}
.main-page.nav-page {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.row .accountSidebar {
width: 100%;
padding: 0;
}
.nav-page .accountSidebar ul {
margin-top: -1px;
}
.account-content {
float: left !important;
width: 100% !important;
}
.button-account-back {
display: block;
}
.mobile-breadcrumbs {
display: block !important;
margin-bottom: 0;
}
}
.touch {
/* Nav Promo */
/* Account Sidebar */
}
.touch .main-container {
padding-top: 107px;
}
.touch .ribbon-banner ~ .main-container {
padding-top: 157px;
}
.touch .ribbon-banner ~ .main-container .header-search .input-wrap .autocomplete-target {
top: 157px;
}
.touch #masthead.ribbon ~ .main-container {
padding-top: calc(107px + var(--service-ribbon-height));
}
.touch .ribbon-banner ~ #masthead.ribbon ~ .main-container {
padding-top: calc(157px + var(--service-ribbon-height));
}
.touch .desktop-navs {
display: none;
}
.touch .mobile-navs {
display: block;
}
.touch .mobile-nav-open {
position: fixed;
width: 100%;
}
.touch .mobile-nav-open .main-nav {
position: fixed;
top: 107px;
bottom: 0;
}
.touch .mobile-nav-open .mob-nav-footer {
display: block;
position: fixed;
bottom: -1px;
width: 100%;
height: 50px;
background-color: #eaeff2;
z-index: 100;
transition: bottom 0.4s;
box-shadow: 1px 1px 5px 1px rgb(130, 130, 130);
}
.touch .mobile-nav-open .mob-nav-footer.hide-mob-nav-footer {
bottom: -55px;
}
.touch .mobile-nav-open .mob-nav-footer ul {
list-style: none;
margin: 0;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.touch .mobile-nav-open .mob-nav-footer ul li {
padding: 6px 0;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
border-right: 1px solid #000;
}
.touch .mobile-nav-open .mob-nav-footer ul li:last-child {
border-right: none;
}
.touch .mobile-nav-open .mob-nav-footer ul li .mob-nav-footer-item {
width: 100%;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.touch #nav-menu-button {
width: 50px;
height: 45px;
text-decoration: none;
}
.touch #nav-menu-button .mob-menu-label {
position: absolute;
bottom: -3px;
left: -2px;
font-size: 11px;
font-weight: 400;
line-height: normal;
width: 100%;
text-align: center;
}
.touch .nav-trigger-button {
position: fixed;
left: 0;
top: 2px;
display: block;
width: 60px;
height: 50px;
line-height: 46px;
cursor: pointer;
overflow: hidden;
z-index: 102;
transform: translate3d(0, 0, 0);
}
.touch .nav-trigger-button:before, .touch .nav-trigger-button:after,
.touch .nav-trigger-button span {
position: absolute;
left: 10px;
top: 50%;
margin-top: -3px;
width: 24px;
height: 3px;
background: #000;
overflow: hidden;
border-radius: 3px;
}
.touch .nav-trigger-button:before, .touch .nav-trigger-button:after {
content: "";
transition: transform 0.3s, margin 0.3s 0.3s;
transform-origin: center center;
}
.touch .nav-trigger-button:before {
margin-top: -11px;
}
.touch .nav-trigger-button:after {
margin-top: 5px;
}
.touch .nav-trigger-button span {
opacity: 1;
transition: opacity 0.3s 0.3s;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.touch .nav-trigger-button.active:before, .touch .nav-trigger-button.active:after {
margin-top: -2px;
transition: transform 0.3s;
}
.touch .nav-trigger-button.active span {
opacity: 0;
transition: none;
}
.touch .nav-trigger-button.active:before {
transform: rotate(-45deg);
}
.touch .nav-trigger-button.active:after {
transform: rotate(45deg);
}
.touch .header-search {
position: fixed;
width: 100%;
height: 47px;
padding: 0 10px 10px;
margin-top: 0;
background: #fff;
z-index: 1609;
top: 60px;
border-bottom: 1px solid #eaeff2;
}
.touch .header-search .input-wrap {
width: 100%;
}
.touch .header-search .input-wrap .main-search-bar {
border-radius: 40px;
overflow: hidden;
}
.touch .header-search .input-wrap .main-search-bar .input-search {
height: 36px !important;
}
.touch .mob-search-open {
position: fixed;
overflow: hidden;
}
.touch .mob-search-open .header-basket,
.touch .mob-search-open .header-bar {
opacity: 0;
pointer-events: none;
}
.touch .mob-search-open .header-search {
border-bottom: 0;
}
.touch .mob-search-open .header-search .input-wrap .autocomplete-target {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 107px;
}
.touch .mob-search-open .header-search .input-wrap .autocomplete-target .autocomplete-popout {
display: block;
height: 100%;
border: 0;
}
.touch .mob-search-open .header-search .input-wrap .autocomplete-target .autocomplete-popout .autocomplete-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.touch .mob-search-open .mob-close-button {
opacity: 1;
right: 2px;
pointer-events: all;
}
.touch #masthead {
border-bottom: none !important;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
padding: 0;
height: 60px;
}
.touch #masthead > .inner,
.touch #masthead > .inner .span12 {
height: 100%;
}
.touch #masthead .main-nav .header-ribbon {
top: 107px;
}
.touch #masthead #nav_basket .basket-label {
text-transform: capitalize;
margin-top: 4px;
}
.touch #masthead .header-basket {
position: fixed;
top: 1px;
right: 0;
margin-top: 7px;
}
.touch #masthead .nav-account,
.touch #masthead .nav-plus {
display: flex;
padding: 20px 0 0;
}
.touch #masthead .nav-account {
background-size: 20px;
background-position: top center;
margin-right: 11px;
}
.touch #masthead .nav-plus {
padding-top: 22px;
margin-right: 2px;
}
.touch #masthead .nav-plus a {
padding: 0;
}
.touch #masthead .nav-plus .plus-info-dropdown,
.touch #masthead .nav-plus .plus-account-dropdown {
display: none;
}
.touch #masthead .nav-plus .plus-pulse-icon {
left: 50%;
transform: translateX(-50%);
}
.touch #masthead .nav-plus .nav-icon-plus {
height: 9px;
width: 22px;
}
.touch #masthead #main-logos {
position: relative;
width: 100%;
max-width: none;
height: 60px;
background: #fff;
-webkit-transition: border-color 0.2s;
transition: border-color 0.2s;
overflow: hidden;
z-index: 100;
margin-top: 0;
}
.touch #masthead #main-logos .logo {
position: absolute;
top: calc(50% - 1px);
left: 40px;
width: 45%;
max-width: 191px;
height: 26px;
transform: translateY(-50%);
margin: 0;
background-image: url(../img/site-logos/waterstones-logo-standard-mob.png);
background-size: 100%;
background-position: center;
}
@media only screen and (max-width: 640px) {
.touch #masthead #main-logos .logo {
left: 50%;
transform: translateY(-50%) translateX(calc(-50% - 60px));
}
}
.touch .nav-dropdown,
.touch .header-bar .right-menu > ul > li.nav-plus:before,
.touch .header-bar .right-menu > ul > li.nav-plus:after {
display: none;
}
.touch .nav-dropdown-account {
position: absolute;
top: 100%;
right: auto;
left: 50%;
margin-left: 0;
transform: translateX(-50%);
}
.touch .header-bar {
position: fixed;
left: auto;
right: 0;
top: 0px;
z-index: 1610;
height: 60px;
background: none;
width: auto;
}
.touch .header-bar .right-menu {
height: 60px;
padding: 0 50px 0 0;
margin: 0;
display: flex;
align-items: center;
float: right;
width: 100%;
}
.touch .header-bar .right-menu > ul {
width: 100%;
display: flex;
justify-content: flex-end;
}
.touch .header-bar .right-menu > ul > li {
display: none;
border: none;
text-transform: none;
font-size: 11px;
}
.touch .header-bar .right-menu > ul > li a {
text-decoration: none;
}
.touch .header-bar .right-menu > ul > li.account-attention > a:after {
width: 13px;
height: 13px;
font-size: 11px;
top: -5px;
right: -2px;
}
.touch .main-nav {
position: static;
left: auto;
bottom: auto;
width: 100%;
height: 47px;
border: none;
}
.ribbon .touch .main-nav {
height: calc(47px + var(--service-ribbon-height));
}
.touch .main-nav > .row > [class*=span]:first-child {
padding-left: 0;
padding-right: 0;
}
.touch .main-nav .row {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.touch .main-nav-bar {
position: relative;
display: none;
background: #fff;
width: 100%;
float: none;
padding: 0;
z-index: 100;
overflow: hidden;
}
.touch .main-nav-bar.open {
display: block;
border: 0;
max-width: 100%;
max-height: calc(100vh - 107px);
overflow: auto;
}
.touch .navs-container {
font-size: 0;
line-height: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
white-space: nowrap;
}
.touch .navs-container.moved {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.touch ul.navs {
display: inline-block;
width: 100%;
vertical-align: top;
}
.touch ul.navs > li {
padding-top: 0;
}
.touch ul.navs a.nav-item {
display: block;
width: auto;
height: auto;
padding: 0 15px;
margin: 0;
font-family: inherit;
font-weight: 400;
font-size: 17px;
line-height: 50px;
text-shadow: inherit;
color: #0c0c0c;
text-align: left;
cursor: pointer;
white-space: normal;
text-transform: capitalize;
}
.touch ul.navs a.nav-item:before {
display: none;
}
.touch ul.navs a.nav-item:after {
content: "\e605";
position: absolute;
right: 4px;
top: 50%;
margin-top: -17px;
display: block;
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-indent: 0;
color: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-size: 34px;
color: #336b75;
visibility: visible;
}
.touch ul.navs a.nav-item .nav-item-inner {
display: block;
padding-top: 2px;
border-bottom: 1px solid #d5e2e8;
}
.touch .accountSidebar li,
.touch ul.navs > li {
float: none;
display: block;
width: 100%;
margin: 0;
white-space: nowrap;
}
.touch .nav-header {
font-size: 16px;
line-height: 20px;
padding: 0 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.touch .accountSidebar li {
border-top: 1px solid #eee;
}
.touch .accountSidebar .inner a {
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.touch .accountSidebar .inner a:hover {
color: #336b75;
}
.touch .accountSidebar .inner a:hover:after {
color: #336b75;
}
.touch .accountSidebar .inner a:after {
content: "\e605";
position: absolute;
right: 10px;
top: 50%;
margin-top: -19px;
display: block;
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-indent: 0;
color: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
font-size: 40px;
color: #336b75;
visibility: visible;
}
.touch .accountSidebar .inner li.selected a {
background: none;
}
.touch .subnavs {
display: inline-block;
width: 100%;
vertical-align: top;
white-space: normal;
margin: 0;
padding: 0;
}
.touch .subnavs .subnav {
position: static;
left: 0;
right: 0;
top: 0;
padding: 0;
background: none;
border: none;
}
.touch .subnavs .subnav > .row {
margin-bottom: 0;
}
.touch .subnavs .subnav [class*=span] {
float: none;
width: 100%;
padding: 0;
}
.touch .subnavs .subnav ul {
margin-bottom: 0 !important;
}
.touch .subnavs .subnav ul li {
margin: 0;
}
.touch .subnavs .subnav ul li a {
display: block;
width: auto;
height: auto;
padding: 0 20px;
margin: 0;
font-family: inherit;
font-weight: 400;
font-size: 17px;
line-height: 50px;
text-shadow: inherit;
color: #0c0c0c;
text-align: left;
cursor: pointer;
white-space: normal;
text-transform: capitalize;
z-index: 1;
}
.touch .subnavs .subnav ul li a:hover {
background: none;
color: inherit;
}
.touch .nav-promos {
display: none;
}
.touch .accountSidebar.generic-sidebar {
display: none;
}
.touch .main-page.nav-page {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.touch .row .accountSidebar {
width: 100%;
padding: 0;
}
.touch .nav-page .accountSidebar ul {
margin-top: -1px;
}
.touch .account-content {
float: left !important;
width: 100% !important;
}
.touch .button-account-back {
display: block;
}
.touch .mobile-breadcrumbs {
display: block !important;
margin-bottom: 0;
}
@media only screen and (min-width: 771px) {
#masthead .detached .logo-small {
display: inline-block !important;
}
#masthead .header-bar.detached {
position: fixed;
top: 0;
}
.main-nav.detached {
position: fixed;
top: 39px;
z-index: 101;
}
#header-bar.detached + div#main-logos {
margin-top: 38px;
}
}
@media only screen and (max-width: 1029px) {
#masthead .logo {
margin-left: 0;
}
}
/** Footer newsletter sign up panel **/
/*
CSS used on PDP pages
PDP stands for Product Detail Page
Related template: /application/views/default/books/detail.tpl
*/
.button-book-zoom {
width: 30px;
height: 30px;
position: absolute;
right: 0;
bottom: 0px;
background: #fff;
cursor: pointer;
border: 1px solid #e4e4e4;
z-index: 98;
}
@media only screen and (max-width: 640px) {
.button-book-zoom {
display: none;
}
}
.button-book-zoom:before {
content: "\e606";
font-size: 24px;
color: #5c5c5c;
}
.close-modal-x {
position: absolute;
top: -15px;
right: 10px;
text-decoration: none;
font-size: 80px;
font-weight: 200;
color: #fff;
pointer-events: none;
}
.zoom-container {
position: fixed;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
z-index: 1001;
opacity: 0;
width: 100%;
max-width: calc(100% - 80px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.zoom-container .close-modal-x {
top: -45px;
right: -20px;
}
.zoom-content {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: #fff;
position: relative;
border: 30px solid #fff;
display: inline;
}
@media (orientation: landscape) {
.zoom-content {
width: calc(100vh - 80px);
height: calc(100vh - 80px);
}
}
@media (orientation: portrait) {
.zoom-content {
width: calc(100vw - 80px);
height: calc(100vw - 80px);
}
}
.zoom-content .zoom-arrow-left,
.zoom-content .zoom-arrow-right {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 40px;
height: 80px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.zoom-content .zoom-arrow-left:before,
.zoom-content .zoom-arrow-right:before {
content: "";
display: block;
background-image: url("../img/chevron-white.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 40px;
height: 40px;
}
.zoom-content .zoom-arrow-left {
right: calc(100% + 30px);
}
.zoom-content .zoom-arrow-left:before {
transform: rotate(-90deg);
}
.zoom-content .zoom-arrow-right {
left: calc(100% + 30px);
}
.zoom-content .zoom-arrow-right:before {
transform: rotate(90deg);
}
/*
Gift finder pills on PDP pages
*/
.tagged-theme-collection {
padding: 16px 24px;
border: 1px solid #ddd;
border-top: 0px;
color: #003746;
font-weight: normal;
}
@media only screen and (max-width: 850px) {
.tagged-theme-collection {
padding-left: 10px;
padding-right: 10px;
}
}
.tagged-theme-collection .lead-in {
margin-bottom: 4px;
color: #003746;
}
.tagged-theme-collection .page-title {
font-family: Baskerville, serif;
font-size: 22px;
font-style: italic;
padding-left: 3px;
white-space: nowrap;
letter-spacing: -0.02em;
}
.tagged-theme-collection .collection-pills .pill {
background-color: #fff;
color: #003746;
margin-right: 4px;
margin-top: 7px;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 10px 12px;
border: 1px solid #003746;
width: auto;
cursor: pointer;
display: inline-block;
white-space: nowrap;
transition: background-color 0.3s, color 0.3s;
}
.tagged-theme-collection .collection-pills .pill:hover {
background-color: #003746;
color: #fff;
text-decoration: none;
}
.detail-out-of-stock {
padding: 16px 24px;
}
@media only screen and (max-width: 800px) {
.detail-out-of-stock .detail-out-of-stock {
padding: 16px 10px;
}
}
.detail-out-of-stock strong {
color: #5c5c5c;
}
.detail-out-of-stock p {
margin-bottom: 2px;
}
@media only screen and (max-width: 800px) {
.detail-out-of-stock button {
margin-top: 14px;
}
}
.detail-out-of-stock > .row {
display: flex;
flex-wrap: wrap;
}
.detail-out-of-stock .button-notify-wrap {
display: flex;
align-items: center;
}
.detail-out-of-stock .blackwells-link {
margin-top: 14px;
}
.button-notify {
width: 100% !important;
background-color: #fff;
color: #336b75;
border: 2px solid #336b75;
font-weight: 400;
}
.button-notify:hover {
opacity: 1 !important;
border-color: #679096;
}
.button-notify.waiting:before {
background-image: url("../img/waiting_teal.gif");
}
.button-notify-sequence {
width: 160px !important;
height: 35px;
}
@media only screen and (max-width: 800px) {
.modal-body .button-notify {
margin-top: 14px;
}
}
.pdp-waterstones-says {
display: inline-block;
width: 100%;
position: relative;
background-size: contain;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #336b75;
}
.pdp-waterstones-says p {
padding: 0 20px;
color: #000;
margin: 0;
}
.pdp-waterstones-says .logo-waterstones-says {
width: 50%;
clear: both;
float: left;
margin-bottom: 10px;
}
@media screen and (max-width: 800px) {
.pdp-waterstones-says .logo-waterstones-says {
width: 70%;
}
}
@media only screen and (max-width: 640px) {
.pdp-waterstones-says .logo-waterstones-says {
width: 66.6666666667%;
margin-top: 10px;
}
}
.pdp-media-reviews {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
color: rgb(51, 107, 117);
}
.inputError {
border: solid 2px #F87474;
color: #B60303;
background-image: none;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
-o-transition: background 0.6s;
transition: background 0.6s;
}
.blackwells-link {
font-size: 16px;
font-weight: bold;
color: #595959;
}
.blackwells-link a {
text-decoration: none;
display: flex;
align-items: center;
font-weight: 400;
}
.blackwells-link img {
position: relative;
top: -2px;
}
.blackwells-link img.logo-blackwells {
height: 25px;
padding: 4px 5px;
}
.blackwells-link img.chevron-blackwells {
height: 13px;
}
.blackwells-link .message-new-window {
margin: 0;
position: relative;
top: -4px;
}
.message-new-window {
color: #5c5c5c;
font-size: 12px;
font-weight: normal;
display: flex;
align-items: center;
}
.message-new-window:before {
content: "";
display: block;
width: 10px;
height: 10px;
margin-right: 4px;
background-image: url("../img/icon-new-window.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.search-results-blog .heading-pagination {
display: flex;
flex-direction: column-reverse;
overflow: visible;
}
.search-results-blog .heading-pagination .right.floater {
display: flex;
align-items: center;
margin-left: 0;
}
.search-results-blog .heading-pagination .right.floater .form-blog-filters {
flex: 1;
margin-right: 20px;
}
@media only screen and (max-width: 640px) {
.search-results-blog .heading-pagination .right.floater .form-blog-filters {
margin-right: 0;
}
}
.search-results-blog .heading-pagination .right.floater .form-blog-filters .ws-select-outer {
margin-bottom: 0;
}
.search-results-blog .search-top {
border: 0;
}
.search-results-blog .search-results-wrap {
display: flex;
flex-wrap: wrap;
}
.image-slider-component {
padding: 0 10px 20px 10px;
margin-left: auto;
margin-right: auto;
clear: both;
}
@media only screen and (max-width: 1029px) {
.image-slider-component h2 {
margin-bottom: 15px;
}
}
@media only screen and (max-width: 1029px) and (max-width: 640px) {
.image-slider-component h2 {
text-align: left !important;
}
}
.image-slider-component .image-slider-wrap {
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
}
@media (hover: none) {
.image-slider-component .image-slider-wrap {
padding: 0;
margin: 0 -10px;
}
}
.image-slider-component .image-slider-wrap .image-slider-container {
display: flex;
padding: 0 10px;
padding-bottom: 18px;
margin-bottom: -18px !important;
overflow-x: scroll;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide {
flex: 0 0 auto;
width: 77px;
display: flex;
flex-direction: column;
text-align: center;
font-weight: 400;
text-decoration: none;
font-size: 14px;
line-height: 16px;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide img {
width: 77px;
height: 77px;
object-fit: contain;
margin-bottom: 5px;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide .image-label {
word-break: break-word;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide:not(:first-child) {
margin-left: 10px;
}
@media only screen and (min-width: 641px) {
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide {
width: 96px;
font-size: 15px;
line-height: 17px;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide img {
width: 96px;
height: 96px;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-slide:not(:first-child) {
margin-left: 17px;
}
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-arrows {
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 44px;
z-index: 1;
pointer-events: none;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-arrows .slider-arrow {
width: 35px;
height: 60px;
background-color: #fff;
position: absolute;
background-image: url(../img/ui/right_scroll_teal.png);
background-size: 15px;
background-repeat: no-repeat;
background-position: center;
pointer-events: all;
cursor: pointer;
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-arrows .slider-arrow.slider-arrow-left {
left: -2px;
transform: rotate(180deg);
}
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-arrows .slider-arrow.slider-arrow-right {
right: -2px;
}
@media (hover: none) {
.image-slider-component .image-slider-wrap .image-slider-container .image-slider-arrows {
display: none;
}
}
/** Footer newsletter sign up panel **/
/*
CSS for the bookshops pages:
/waterstones/httpdocs/application/modules/ecommerce/views/default/bookshops
*/
.find-shops {
float: right !important;
}
.find-shops .invisible.right.no-margin.floater {
display: none;
}
.shop-search-input-wrapper {
display: flex;
margin-bottom: 8px;
}
.shop-search-input-wrapper input,
.shop-search-input-wrapper .get-location-button {
margin: 0 !important;
}
.shop-search-input-wrapper input {
flex: 1;
}
.shop-search-input-wrapper button {
width: auto !important;
}
.shop-search-input-wrapper .get-location-button {
margin-left: 8px !important;
}
.shop-search-input-wrapper .get-location-button:after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
margin-right: -3px;
background: url("../img/location-icon.png");
background-size: contain;
background-repeat: no-repeat;
}
.shop-search-input-wrapper + .open-map-button {
display: none;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.shop-search-input-wrapper + .open-map-button {
display: flex;
}
}
.shop-search-input-wrapper + .open-map-button:after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 4px;
margin-right: -3px;
background: url("../img/map-marker.png");
filter: invert(1) brightness(100);
background-size: contain;
background-repeat: no-repeat;
}
.shop-filters-wrap {
width: 100%;
float: left;
text-align: right;
padding-bottom: 20px;
white-space: nowrap;
overflow: scroll;
}
.shop-filters-wrap .shop-filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Source Sans Pro", Arial, sans-serif;
color: #336b75;
background-color: #f4f1f0;
font-size: 17px;
font-weight: bold;
height: 38px;
padding: 0 15px;
margin-left: 1px;
border-radius: 24px;
cursor: pointer;
}
.shop-filters-wrap .shop-filter-pill.filter-active {
color: #fff;
background-color: #336b75;
}
@media only screen and (max-width: 768px) {
.shop-filters-wrap {
text-align: left;
}
.shop-search-input-wrapper {
padding-right: 10px;
}
.shop-search-input-wrapper .get-location-button {
display: none;
}
.other-filters {
max-width: none !important;
display: flex;
}
.other-filters > * {
width: 50%;
margin: 0 !important;
}
.shop-filters-wrap .shop-filter-pill {
margin-left: 0px;
margin-right: 1px;
}
}
@media only screen and (max-width: 640px) {
.shop-search-input-wrapper {
padding-right: 0;
flex-wrap: wrap;
}
.shop-search-input-wrapper .get-location-button {
display: block;
}
.shop-search-input-wrapper + .open-map-button {
margin-top: 10px !important;
}
.other-filters {
max-width: none !important;
display: flex;
flex-wrap: wrap;
}
.other-filters > * {
width: 100%;
}
}
/** Footer newsletter sign up panel **/
/*
CSS for modals
including modals for Login, Click and Collect, app store redirect, etc.
*/
.modal-box {
display: none;
position: fixed;
z-index: 1001;
width: 90%;
max-width: 700px;
background: white;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.6);
background-clip: padding-box;
-webkit-transition: top 0.5s;
transition: top 0.5s;
}
.modal-box header {
padding: 11px 20px 10px;
background: #9E866B;
}
.modal-box header h3 {
line-height: 25px;
}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
margin: 0;
color: #fff;
}
.modal-box .modal-body {
max-height: calc(100vh - 50px);
overflow: auto;
}
.modal-box .modal-body .subheading {
color: white;
font-size: 12px;
padding-top: 2px;
background: #9E866B;
padding: 0 20px 15px 20px;
}
.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
}
.modal-box a.close {
font-size: 38px;
position: absolute;
top: 8px;
right: 15px;
text-decoration: none;
color: #fff;
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
width: 30px;
height: 30px;
display: block;
line-height: 31px;
text-align: center;
}
@media only screen and (max-width: 640px) {
.modal-box header,
.modal-box .modal-header {
padding: 10px;
}
.modal-box .modal-body .subheading {
padding: 0 10px 10px;
}
.modal-box .modal-body {
font-size: 14px;
max-height: calc(100vh - 100px);
-webkit-overflow-scrolling: auto;
}
html.safari .modal-box .modal-body {
max-height: calc(100vh - 150px);
}
.modal-box a.close {
top: 6px;
right: 10px;
}
#collectModal .collect-error {
padding: 10px;
}
}
html:not(.touch) #collectModal .input-overlay,
html:not(.safari) #collectModal .input-overlay {
display: none;
}
#collectModal input:focus + .input-overlay {
display: none;
}
#collectModal .collect-error {
display: none;
padding: 20px;
}
#collectModal .collect-error .error-message:not(:empty) {
padding: 10px 0;
}
.collect-box {
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.collect-box.cncdisabled h2 {
margin: 8px 0 0 0;
font-style: normal;
font-size: 20px;
}
.collect-box.book, .collect-box.stores {
background: #eee;
border-top: 1px solid #fff;
-webkit-transition: color 0.5s, margin-top 0.5s;
transition: color 0.5s, margin-top 0.5s;
}
.collect-box.book:before, .collect-box.stores:before {
content: "To collect the following item:";
position: absolute;
bottom: calc(100% + 5px);
font-weight: bold;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
color: #5c5c5c;
}
.collect-box.book .info, .collect-box.stores .info {
float: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
height: 100%;
font-size: 14px;
width: calc(100% - 150px);
}
.collect-box.book .button-holder, .collect-box.stores .button-holder {
position: absolute;
top: 0;
right: 20px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.collect-box.stores:before {
content: "From your selected shop:";
}
.collect-box.stores.open {
background: #fff;
}
.collect-box.stores.open .store-message {
display: none;
padding-bottom: 12px;
}
.collect-box.stores.open .store-message .buy-link {
text-decoration: underline;
cursor: pointer;
}
.collect-box.stores.open .store-container {
overflow: auto;
max-height: calc(100vh - 460px);
padding-right: 15px;
}
.collect-box.stores.open .store + .store {
border-top: 1px solid #ccc;
padding-top: 10px;
}
.collect-box.stores.open .search,
.collect-box.stores.open .store {
height: auto;
opacity: 1;
}
.collect-box.stores.open .search {
margin-top: 6px;
}
.collect-box.stores.open .store {
margin-bottom: 12px;
}
.collect-box.stores.open .store.external-link .info .collect-time {
width: 70%;
}
.collect-box.stores.open .store.external-link .button-holder {
flex-direction: column;
justify-content: center;
align-items: end;
}
.collect-box.stores.open .store.external-link .button-holder .button {
margin-bottom: 7px;
}
@media only screen and (max-width: 640px) {
.collect-box.stores.open .store {
padding-bottom: 0;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.collect-box.stores.open .store.external-link {
padding-bottom: 20px;
}
.collect-box.stores.open .store.external-link .button-holder {
justify-content: flex-end;
}
}
.collect-box.stores.open .info {
height: 100%;
width: calc(100% - 170px);
}
.collect-box.stores.open .button-holder .select {
display: block;
}
.collect-box.stores.open .button-holder .change {
display: none;
}
.collect-box.stores:not(.open) .store-message {
display: none !important;
}
.collect-box.stores:not(.open) .title {
color: #5c5c5c;
}
.collect-box.stores .book-detail-cnc {
width: 100%;
}
.collect-box.stores .search,
.collect-box.stores .store {
opacity: 0;
height: 0;
margin-bottom: 0;
overflow: hidden;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-transition: opacity 0.5s, margin-bottom 0.5s;
transition: opacity 0.5s, margin-bottom 0.5s;
}
.collect-box.stores .store.selected {
height: auto;
opacity: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.collect-box.stores .store.selected .collect-time {
padding: 0;
background: none;
margin-top: 2px;
}
.collect-box.stores .thumb {
float: left;
width: 50px;
height: 50px;
background-size: cover;
background-position: center;
margin-right: 10px;
-webkit-transition: width 0.5s, height 0.5s;
transition: width 0.5s, height 0.5s;
}
.collect-box.stores .title {
margin-bottom: 0;
-webkit-transition: font-size 0.5s, margin-bottom 0.5s;
transition: font-size 0.5s, margin-bottom 0.5s;
}
.collect-box.stores .address {
display: block;
}
.collect-box.stores .hours {
display: none;
}
.collect-box.stores .collect-time {
padding: 7px 0 7px 40px;
background-image: url(../img/icons/cal.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: 3px center;
margin-top: 10px;
font-weight: 500;
font-size: 15px;
color: #336b75;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.collect-box.stores .collect-time.two-hr {
background-image: url(../img/icons/2hrs.png);
background-size: 30px;
background-position: left center;
}
.collect-box.stores .button-holder {
right: 0;
}
.collect-box.stores .button-holder .select {
display: none;
}
.collect-box.stores .button-holder .change {
display: block;
}
.collect-box.book {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.collect-box.book .price .wasprice:not(:empty) {
text-decoration: line-through;
padding-right: 8px;
}
.collect-box.book .price .nowprice {
font-weight: bold;
color: #5c5c5c;
}
.collect-box.book .price-eur {
display: none;
font-weight: bold;
color: #5c5c5c;
transition: color 1s, font-size 1s;
line-height: 15px;
}
.collect-box.book .price-eur.animate-text {
color: #1d796f;
font-size: 16px;
}
.collect-box.book .thumb {
float: left;
width: 50px;
background-size: cover;
background-position: center;
margin-right: 10px;
text-align: center;
}
.collect-box.book .thumb img {
max-height: 80px;
max-width: 100%;
}
.collect-box.book .info {
width: calc(100% - 60px);
}
.collect-box.book .title {
font-family: Baskerville, serif;
font-size: 17px;
font-weight: 400;
margin-bottom: 4px;
}
.collect-box.details {
display: none;
border-right: 1px solid #fff;
}
.collect-box.details.bottom-spaced {
padding-bottom: 60px;
}
.collect-box.details form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 10px;
}
.collect-box.details form button.order {
position: absolute;
bottom: 20px;
right: 20px;
}
.collect-box.details form .field {
float: left;
width: 48%;
margin-bottom: 6px;
position: relative;
}
.collect-box.details form .field.mail-prefs-field {
display: none;
}
.collect-box.details form .field.mailing-optin-field {
width: 70%;
margin-top: 10px;
margin-bottom: 0;
}
@media only screen and (max-width: 640px) {
.collect-box.details form .field.mailing-optin-field {
width: 100%;
}
}
.collect-box.details form .cnc-flex-fix {
width: 100%;
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 640px) {
.collect-box.details form .cnc-flex-fix {
flex-direction: column;
}
.collect-box.details form .cnc-flex-fix .hide-mob {
display: none;
}
}
.collect-box.details label {
margin: 4px 0;
margin-top: 3px;
}
.collect-box.details .inline-radios {
padding-top: 5px;
}
.collect-box.details .inline-radios label {
margin: 0;
}
.collect-box.details .inline-radios .fieldset {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
clear: both;
}
.collect-box.details .inline-radios .fieldset label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-right: 24px;
}
.collect-box.details .textbox {
display: block;
box-sizing: border-box;
width: 100%;
height: 2.2rem;
margin: 3px 0 3px 0;
padding: 0px 6px;
font-size: 0.9rem;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 400;
color: #0a0a0a;
text-shadow: 0px 0px #ffffff !important;
background-color: #fefefe;
box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
-webkit-appearance: none;
border: 0.1rem solid #cacaca;
border-radius: 0px !important;
outline: none;
box-shadow: none;
background-image: none;
-webkit-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
.collect-box.thankyou, .collect-box.orderready {
display: none;
}
.collect-box.thankyou .title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.collect-box.orderready {
position: relative;
padding-right: 90px;
}
.collect-box.orderready .title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #5c5c5c;
}
.collect-box.orderready button {
position: absolute;
right: 20px;
bottom: 15px;
}
.collect-box.orderready .shopcontact {
margin-top: 6px;
}
.reserved .collect-box.thankyou {
border: 0;
}
.reserved .collect-box.book, .reserved .collect-box.stores {
border-top: 1px solid #ccc;
margin-top: 24px;
}
.reserved .collect-box.book:before, .reserved .collect-box.stores:before {
opacity: 1;
}
.reserved .collect-box.stores {
margin-top: 34px;
}
.reserved .collect-box.stores .button-holder {
opacity: 0;
display: none;
}
.reserved .collect-box.stores .info {
width: calc(100% - 90px);
}
.reserved .collect-box.stores .title {
color: #000;
}
.collect-box .label-content {
font-size: 15px;
}
.collect-box .book-detail-cnc > div {
min-height: auto !important;
padding: 10px;
}
.collect-box .book-detail-cnc form.geo_enabled {
padding-bottom: 50px;
}
.collect-box .book-detail-cnc form.geo_enabled .get-location-button {
position: absolute;
bottom: 0;
right: 0;
margin-top: 0;
width: 100%;
}
.collect-box .book-detail-cnc form:not(.location-form) {
margin-top: 0;
}
.collect-box .book-detail-cnc label.error {
margin: 4px 0 0 0;
}
.collect-box .checkbox-label {
display: flex;
align-items: center;
padding-top: 2px;
}
.collect-box .checkbox-label .ws-checkable-outer.ws-checkbox-outer {
width: 28px;
min-width: 28px;
margin-right: 12px;
}
.shopcontact .shopphone,
.shopcontact .shopemail {
font-weight: bold;
color: #5c5c5c;
}
@media only screen and (max-width: 818px) {
.collect-box.book .thumb img {
max-height: 60px;
}
.collect-box.details label {
font-size: 14px;
}
}
.collect-error .title,
.collect-box.book .title,
.collect-box.stores .title {
font-weight: bold;
}
.reserved .collect-box.book .thumb,
.reserved .collect-box.stores .thumb,
.collect-box.stores.open .thumb {
width: 80px;
height: 80px;
margin-top: 4px;
}
.collect-error .title,
.reserved .collect-box.book .title,
.reserved .collect-box.stores .title,
.collect-box.stores.open .title {
font-size: 17px;
font-weight: 400;
margin-bottom: 5px;
}
.reserved .collect-box.stores .hours,
.collect-box.stores.open .hours {
display: block;
margin-top: 6px;
}
.reserved .collect-box.stores .hours.wont-open-today,
.collect-box.stores.open .hours.wont-open-today {
font-weight: bold;
}
@media only screen and (min-width: 641px) {
.collect-box .book-detail-cnc form.geo_enabled {
padding-right: 244px;
padding-bottom: 0;
}
.collect-box .book-detail-cnc form.geo_enabled .get-location-button {
top: 0;
bottom: auto;
width: 180px;
}
.collect-box .book-detail-cnc form.geo_enabled .button:not(.get-location-button) {
right: 188px;
}
.email-category-wrap .acc-content {
display: block !important;
}
}
@media only screen and (max-width: 640px) {
.collect-box {
padding: 10px;
}
.collect-box.book .button-holder, .collect-box.details form button.order {
right: 10px;
}
.collect-box.details.bottom-spaced {
padding-bottom: 10px;
}
.collect-box.details form {
padding-bottom: 60px;
}
.collect-box.details form .field,
.collect-box.details form .field:nth-of-type(7) {
width: 100%;
margin: 6px 0;
}
.collect-box.details form .field:empty {
display: none;
}
.collect-box.details form label {
margin: 0 0 4px 0;
font-size: 14px;
}
.collect-box.details form label > .ws-checkable-outer {
margin-right: 4px;
}
.collect-box.details .textbox {
height: 32px;
font-size: 14px;
margin: 6px 0;
}
.collect-box.orderready {
padding-right: 10px;
}
.collect-box.orderready button {
display: none;
}
.collect-box .checkbox-label .ws-checkable-outer.ws-checkbox-outer {
width: 57px;
}
.collect-box .button.button-small {
font-size: 12px;
line-height: 30px;
height: auto;
padding: 0 8px;
}
.collect-box .inline-radios {
padding-top: 5px;
}
.collect-box.stores .store.selected .collect-time {
margin-left: 0;
}
.reserved .collect-box.book .thumb,
.reserved .collect-box.stores .thumb,
.collect-box.book .thumb,
.collect-box.stores .thumb {
width: 40px;
}
.collect-box.stores .thumb,
.reserved .collect-box.stores .thumb {
height: 40px;
}
.collect-box.book .thumb,
.reserved .collect-box.book .thumb {
height: auto;
}
.collect-box.book .info,
.collect-box.stores .info {
width: calc(100% - 115px);
}
.reserved .collect-box.stores .info,
.collect-box.book .info {
width: calc(100% - 50px);
}
.reserved .collect-box.book .title,
.reserved .collect-box.stores .title,
.collect-box.stores.open .title {
font-size: 18px;
margin-bottom: 2px;
}
.collect-box.thankyou .title {
font-size: 19px;
}
.collect-box.stores.open .info {
width: calc(100% - 60px);
}
.collect-box.stores.open .address,
.collect-box.stores.open .hours {
padding-right: 60px;
}
.collect-box.stores.open .thumb {
width: 50px;
height: 50px;
margin-top: 2px;
margin-right: 8px;
}
.collect-box.stores.open .button-holder {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.reserved .collect-box.book {
margin-top: 25px;
}
.collect-box.stores.open .store-container {
max-height: none;
padding-right: 0;
}
.collect-box.stores.open .search {
margin-top: 0;
}
.collect-box.stores .collect-time {
margin-left: -56px;
width: 100%;
padding-top: 0;
font-size: 14px;
padding-bottom: 0;
min-height: 32px;
}
.book-detail-cnc .button:not(.get-location-button) {
height: 44px;
}
}
#loginModal.modal-box,
#loginValidModal.modal-box {
background: #eee;
max-width: 400px;
}
#loginModal.modal-box:focus,
#loginValidModal.modal-box:focus {
outline: none;
}
#loginModal header,
#loginValidModal header {
background: #336b75;
}
#loginModal input,
#loginModal label,
#loginValidModal input,
#loginValidModal label {
float: left;
clear: both;
width: 100%;
margin-bottom: 10px;
}
#loginModal .modal-body,
#loginValidModal .modal-body {
padding: 20px 10px;
}
#loginModal .checkbox-label,
#loginValidModal .checkbox-label {
float: none;
display: inline;
}
#loginModal .remember-me-wrap,
#loginValidModal .remember-me-wrap {
margin: 16px 0;
}
#loginModal .lnkLogOut,
#loginValidModal .lnkLogOut {
float: right;
margin-bottom: 4px;
}
#loginModal .register-here {
float: right;
padding: 0 10px 5px 0;
}
.login-privacy-message {
margin-top: 12px;
font-size: 12px;
}
@media only screen and (max-width: 640px) {
#loginModal.modal-box header,
#loginValidModal.modal-box header {
padding: 10px 15px;
}
}
#loginModal.plus header {
background: #80c078;
}
#loginModal.plus .button.button-teal {
background: #80c078;
padding: 0px 26px;
}
#loginModal.plus .default-link {
display: none;
}
#loginModal.plus .plus-link {
display: inline;
}
#loginModal.plus .remember-me-help {
border: 1px solid #80c078;
background: white;
color: #80c078;
font-weight: normal;
}
#loginModal.plus .register-here {
padding-bottom: 10px;
font-size: 16px;
font-weight: normal;
}
#loginModal.modal-box.plus {
background: #fff;
color: #000;
}
#loginModal.modal-box.plus a {
color: #000;
}
#loginModal.modal-box.plus a.js-modal-close {
color: #fff;
}
#loginModal.modal-box.plus a:hover .inline-plus {
text-decoration: none;
}
#loginModal.modal-box.plus header h3 {
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.0625em;
text-transform: uppercase;
font-style: normal;
}
#loginModal .plus-link {
display: none;
}
@media only screen and (max-width: 640px) {
#loginModal.plus .register-here,
#loginModal.modal-box.plus a .inline-plus {
font-size: 13px;
}
}
#appRedirectModal header {
background-color: #336b75;
padding-left: 14px;
}
@media only screen and (max-width: 640px) {
#appRedirectModal header h3 {
font-size: 17px;
}
}
#appRedirectModal .modal-body {
padding: 4px 14px 14px;
}
#appRedirectModal .modal-body .button-wrap {
display: flex;
justify-content: space-around;
}
#appRedirectModal .modal-body .button-wrap > .button {
display: inline-block;
flex: 1;
max-width: 160px;
}
#appRedirectModal .modal-body .button-wrap > .button:nth-child(1) {
margin-right: 5px;
}
#appRedirectModal .modal-body .button-wrap > .button:nth-child(2) {
margin-left: 5px;
}
#notifyInStockModal,
.notifyInStockModal {
border: 2px solid #5c5c5c;
box-shadow: none;
}
#notifyInStockModal header,
.notifyInStockModal header {
background-color: #ebebeb;
color: #000;
padding: 18px 38px 18px 20px;
}
#notifyInStockModal header h3,
.notifyInStockModal header h3 {
font-family: "Source Sans Pro", Arial, sans-serif;
font-style: normal;
font-weight: 600;
color: #5c5c5c;
}
#notifyInStockModal header p,
.notifyInStockModal header p {
margin: 2px 0 0 0;
font-size: 14px;
line-height: normal;
}
#notifyInStockModal header a.close,
.notifyInStockModal header a.close {
color: #000;
right: 6px;
}
#notifyInStockModal input,
.notifyInStockModal input {
text-align: left !important;
height: 39px;
border: 2px solid #5c5c5c;
padding: 5px 9px;
}
#notifyInStockModal input:focus,
.notifyInStockModal input:focus {
border-color: #336b75;
}
#notifyInStockModal input + .error,
.notifyInStockModal input + .error {
padding-top: 6px;
}
#notifyInStockModal .modal-body,
.notifyInStockModal .modal-body {
padding: 20px;
}
#notifyInStockModal .modal-body .collect-box,
.notifyInStockModal .modal-body .collect-box {
background: #fff;
border: 0;
padding: 0 0 20px;
}
#notifyInStockModal .modal-body .collect-box img,
.notifyInStockModal .modal-body .collect-box img {
float: left;
}
#notifyInStockModal .notify-set-height,
.notifyInStockModal .notify-set-height {
display: flex;
flex-direction: column;
justify-content: center;
}
#notifyInStockModal .notify-thankyou-wrap,
.notifyInStockModal .notify-thankyou-wrap {
display: none;
}
#notifyInStockModal .notify-thankyou-wrap .notify-thankyou-msg,
.notifyInStockModal .notify-thankyou-wrap .notify-thankyou-msg {
color: #336b75;
text-transform: uppercase;
font-size: 20px;
font-weight: 400;
}
#notifyInStockModal .notify-thankyou-wrap p,
.notifyInStockModal .notify-thankyou-wrap p {
font-size: 16px;
margin: 5px 0;
}
[id^=removeModal-gc],
#deleteAccountModal,
[id^=deleteAddress] {
max-width: 600px;
}
[id^=removeModal-gc] .close,
#deleteAccountModal .close,
[id^=deleteAddress] .close {
color: #636363;
}
[id^=removeModal-gc] .modal-body,
#deleteAccountModal .modal-body,
[id^=deleteAddress] .modal-body {
padding: 70px;
text-align: center;
font-size: 20px;
}
@media (max-width: 376px) {
[id^=removeModal-gc] .modal-body,
#deleteAccountModal .modal-body,
[id^=deleteAddress] .modal-body {
padding: 40px;
}
}
[id^=removeModal-gc] .modal-body .button,
#deleteAccountModal .modal-body .button,
[id^=deleteAddress] .modal-body .button {
margin-top: 15px;
}
[id^=removeModal-gc] .modal-body .button + .button,
#deleteAccountModal .modal-body .button + .button,
[id^=deleteAddress] .modal-body .button + .button {
margin-left: 8px;
}
[id^=removeModal-gc] .modal-body .button-teal,
#deleteAccountModal .modal-body .button-teal,
[id^=deleteAddress] .modal-body .button-teal {
width: auto;
}
#newPaymentCardModal {
width: auto;
max-width: calc(100vw - 30px);
}
#bookPreviewModal {
max-width: 85vw;
}
#bookPreviewModal .modal-body {
height: 100vh;
}
#bookPreviewModal .modal-body iframe {
width: 100%;
height: 100%;
border: 0;
float: left;
}
#bookPreviewModal .modal-body iframe.iframe-loading {
display: none;
}
#bookPreviewModal .modal-body #book_preview_container {
width: 100%;
height: 100%;
}
/*
CSS for sliders and carousels
*/
.swiper .swiper-wrapper,
.slick_carousel .swiper-wrapper {
display: flex;
align-items: flex-end;
height: min-content;
}
.multi-blogs .swiper .swiper-wrapper,
.multi-blogs .slick_carousel .swiper-wrapper {
align-items: flex-start;
}
.swiper .book-preview .image-wrap,
.slick_carousel .book-preview .image-wrap {
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
}
.swiper .book-preview .image-wrap .image-container,
.slick_carousel .book-preview .image-wrap .image-container {
margin: 0 auto;
position: relative;
max-width: 100%;
}
.swiper .book-preview .image-wrap .hover-layer,
.slick_carousel .book-preview .image-wrap .hover-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.swiper .book-preview .image-wrap .hover-layer .hover-item,
.slick_carousel .book-preview .image-wrap .hover-layer .hover-item {
position: absolute;
bottom: -88px;
background: #fff;
width: 100%;
transition: bottom 150ms ease-out;
}
.swiper .book-preview .post-add button,
.swiper .book-preview .post-add a,
.swiper .book-preview .pre-add button,
.swiper .book-preview .pre-add a,
.slick_carousel .book-preview .post-add button,
.slick_carousel .book-preview .post-add a,
.slick_carousel .book-preview .pre-add button,
.slick_carousel .book-preview .pre-add a {
margin-top: 5px;
width: 100%;
}
.swiper .book-preview .mobile_ctas .post-add button,
.swiper .book-preview .mobile_ctas .post-add a,
.swiper .book-preview .mobile_ctas .pre-add button,
.swiper .book-preview .mobile_ctas .pre-add a,
.slick_carousel .book-preview .mobile_ctas .post-add button,
.slick_carousel .book-preview .mobile_ctas .post-add a,
.slick_carousel .book-preview .mobile_ctas .pre-add button,
.slick_carousel .book-preview .mobile_ctas .pre-add a {
width: 130px;
}
.swiper .basket-form .post-add .message,
.slick_carousel .basket-form .post-add .message {
margin: 5px 0 0;
}
.swiper .mobile_ctas,
.slick_carousel .mobile_ctas {
margin-top: 5px;
/*display: none; temp removal*/
}
.slick_carousel {
margin: 0 30px;
z-index: 1;
}
.slick_carousel.books_carousel .slick-prev,
.slick_carousel.books_carousel .slick-next {
top: 80px;
}
.slick_carousel.slick-slider {
margin-bottom: 0;
}
.slick_carousel .book-preview {
text-align: center;
padding: 0 10px;
}
.slick_carousel .book-preview .image-wrap {
height: 180px;
}
.slick_carousel .book-preview .image-wrap .image-container img {
max-width: 100%;
max-height: 180px;
}
.slick_carousel .book-preview .button-small {
font-size: 14px;
line-height: 30px;
padding: 0 14px;
height: auto;
}
.slick_carousel .book-preview .title-wrap {
margin-top: 5px;
font-weight: bold;
font-size: 15px;
font-family: Baskerville, serif;
overflow: hidden;
height: 36px;
}
.slick_carousel .book-preview .title-wrap > a {
max-height: 35px;
display: inline-block;
overflow: hidden;
}
.slick_carousel .book-preview .title-wrap .format {
font-weight: normal;
font-size: 12px;
}
.slick_carousel .book-preview .author-wrap {
overflow: hidden;
height: 36px;
margin: 4px 0;
font-size: 15px;
}
@media only screen and (max-width: 640px) {
.slick_carousel .book-preview .mobile_ctas .post-add button,
.slick_carousel .book-preview .mobile_ctas .post-add a,
.slick_carousel .book-preview .mobile_ctas .pre-add button,
.slick_carousel .book-preview .mobile_ctas .pre-add a {
width: 95px;
font-size: 11px;
padding: 2px 7px;
line-height: 26px;
margin-bottom: 4px;
}
}
@media only screen and (max-width: 559px) {
.slick_carousel .book-preview .image-wrap {
height: 150px;
}
.slick_carousel .book-preview .image-wrap .image-container img {
max-height: 150px;
}
.slick_carousel .book-preview .book-price .format {
display: none;
}
}
.swiper .book-preview .image-wrap .image-container img {
max-height: 240px;
float: left;
width: auto;
height: auto;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.swiper .book-preview .image-wrap .image-container img {
width: 100%;
}
}
[class^=pod_slider] .slick-prev,
[class^=pod_slider] .slick-next,
[class*=" pod_slider"] .slick-prev,
[class*=" pod_slider"] .slick-next,
.wishlist_slider .slick-prev,
.wishlist_slider .slick-next {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 16px;
}
[class^=pod_slider] .slick-prev:before,
[class^=pod_slider] .slick-next:before,
[class*=" pod_slider"] .slick-prev:before,
[class*=" pod_slider"] .slick-next:before,
.wishlist_slider .slick-prev:before,
.wishlist_slider .slick-next:before {
content: "";
}
[class^=pod_slider] .slick-prev,
[class^=pod_slider] .slick-prev:focus,
[class*=" pod_slider"] .slick-prev,
[class*=" pod_slider"] .slick-prev:focus,
.wishlist_slider .slick-prev,
.wishlist_slider .slick-prev:focus {
background-image: url("../img/ui/left_scroll_teal.png");
}
[class^=pod_slider] .slick-next,
[class^=pod_slider] .slick-next:focus,
[class*=" pod_slider"] .slick-next,
[class*=" pod_slider"] .slick-next:focus,
.wishlist_slider .slick-next,
.wishlist_slider .slick-next:focus {
background-image: url("../img/ui/right_scroll_teal.png");
}
[class^=pod_slider] .slick-prev:hover,
[class*=" pod_slider"] .slick-prev:hover,
.wishlist_slider .slick-prev:hover {
background: url("../img/ui/left_scroll_grey.png");
}
[class^=pod_slider] .slick-next:hover,
[class*=" pod_slider"] .slick-next:hover,
.wishlist_slider .slick-next:hover {
background: url("../img/ui/right_scroll_grey.png");
}
[class^=pod_slider].slick-initialized,
[class*=" pod_slider"].slick-initialized {
padding-bottom: 20px;
}
.books_carousel:not(.slick-initialized) {
max-height: 320px;
overflow: hidden;
}
.books_carousel:not(.slick-initialized) .book-preview {
width: 20%;
float: left;
}
.pod_slider2:not(.slick-initialized) {
height: 0;
overflow: hidden;
padding-bottom: 33.7%;
}
.pod_slider2:not(.slick-initialized) > * {
height: 100%;
width: 50% !important;
display: block;
float: left;
}
.pod_slider2:not(.slick-initialized) > div:nth-child(1n+3) {
opacity: 0;
}
.pod_slider3:not(.slick-initialized) {
height: 0;
overflow: hidden;
padding-bottom: 23.5%;
}
.pod_slider3:not(.slick-initialized) > * {
height: 100%;
width: 33.33% !important;
display: block;
float: left;
}
.pod_slider3:not(.slick-initialized) > div:nth-child(1n+4) {
opacity: 0;
}
.pod_slider4:not(.slick-initialized) {
height: 0;
overflow: hidden;
padding-bottom: 17.2%;
}
.pod_slider4:not(.slick-initialized) > * {
height: 100%;
width: 25% !important;
display: block;
float: left;
}
.pod_slider4:not(.slick-initialized) > div:nth-child(1n+5) {
opacity: 0;
}
.pod_slider2 img,
.pod_slider3 img,
.pod_slider4 img {
width: 100%;
}
html.touch .books_carousel:not(.slick-initialized) {
max-height: 390px;
}
html.no-touch .swiper .book-preview:hover .image-wrap .hover-layer .hover-item,
html.no-touch .slick_carousel .book-preview:hover .image-wrap .hover-layer .hover-item,
html.touch .swiper .book-preview .image-wrap.focussed .hover-layer .hover-item,
html.touch .slick_carousel .book-preview .image-wrap.focussed .hover-layer .hover-item {
bottom: 0;
}
html.no-touch .slick_carousel .mobile_ctas {
display: none;
}
html.touch .slick_carousel .book-preview .title-wrap + p {
height: 40px;
}
@-webkit-keyframes plusIconPulse {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.8);
}
100% {
opacity: 10%;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes plusIconPulse {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.8);
}
100% {
opacity: 10%;
transform: translate(-50%, -50%) scale(1);
}
}
.plus-pulse-icon {
display: inline-block;
width: 26px;
height: 26px;
position: relative;
}
.plus-pulse-icon:before, .plus-pulse-icon:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.plus-pulse-icon:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #80c078;
animation: plusIconPulse 1s infinite;
}
.plus-pulse-icon:after {
width: 69.231%;
height: 69.231%;
background: url("../img/plus/plus-stamp.png");
background-repeat: no-repeat;
background-size: 77%;
background-position: center;
background-color: #fefbe9;
}
.nav-dropdown-basket {
font-style: normal;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.nav-dropdown-basket table {
width: 100%;
}
.nav-dropdown-basket table.items td.image {
width: 70px;
}
.nav-dropdown-basket table tbody tr:not(.template) ~ tr {
border-top: 1px solid #E3E3E3;
}
.nav-dropdown-basket table tbody tr:not(.template) ~ tr td:not(.stock-error-message) {
padding-top: 16px;
}
.nav-dropdown-basket table tbody tr td:not(.stock-error-message) {
padding-bottom: 16px;
}
.nav-dropdown-basket table tfoot tr {
border-top: 3px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
.nav-dropdown-basket table tfoot tr td {
padding: 10px 0;
}
.nav-dropdown-basket table tfoot .total {
font-size: 18px;
color: #5c5c5c;
}
.nav-dropdown-basket td.info {
padding-left: 10px;
padding-right: 10px;
color: #535353;
vertical-align: top;
}
.nav-dropdown-basket td.info > span {
display: block;
}
.nav-dropdown-basket td.info .title {
position: relative;
display: block;
max-height: 36px;
font-size: 15px;
line-height: 17px;
font-weight: 700;
color: #5c5c5c;
overflow: hidden;
}
.nav-dropdown-basket td.info input[type=submit] {
padding: 0;
background: none;
border: none;
text-decoration: underline;
white-space: normal;
text-align: left;
}
.nav-dropdown-basket td.info input[type=submit]:hover {
text-decoration: none;
}
.nav-dropdown-basket td.info .format {
font-style: italic;
font-size: 14px;
color: #5c5c5c;
margin-top: 5px;
}
.nav-dropdown-basket td.qty {
text-align: center;
width: 50px;
padding-right: 2px;
}
.nav-dropdown-basket .product-image {
display: block;
width: 70px;
}
.nav-dropdown-basket .button-container {
margin-top: 20px;
}
.nav-dropdown-basket .table-wrap {
padding-right: 10px;
width: calc(100% + 10px);
}
.nav-dropdown-basket .table-wrap .items .stock-error-message {
font-size: 12px;
}
.nav-dropdown-basket .basket-product-price-was {
display: inline-block;
text-decoration: line-through;
}
.nav-dropdown-basket .dropdown-basket-delivery {
margin-bottom: 20px;
border: 1px solid #ababab;
}
.nav-dropdown-basket .dropdown-basket-delivery.has-free {
display: block;
}
.nav-dropdown-basket .dropdown-basket-delivery.has-free .deliverymessage .dropdown-basket-delivery-message .free-message {
display: block;
}
.nav-dropdown-basket .dropdown-basket-delivery.has-free .deliverymessage .dropdown-basket-delivery-message .incentive-message {
display: none;
}
.nav-dropdown-basket .dropdown-basket-delivery .deliverymessage {
background-color: #e0e9ed;
}
.nav-dropdown-basket .dropdown-basket-delivery .deliverymessage .dropdown-basket-delivery-message {
padding: 10px 0 10px 48px;
position: relative;
font-size: 12px;
white-space: nowrap;
}
.nav-dropdown-basket .dropdown-basket-delivery .deliverymessage .dropdown-basket-delivery-message:before {
content: "";
display: block;
width: 28px;
height: 18px;
background: url(../img/ui/Delivery_icon_truck.png) center center no-repeat;
background-size: contain;
position: absolute;
left: 10px;
top: 50%;
transform: translatey(-50%);
}
.nav-dropdown-basket .dropdown-basket-delivery .deliverymessage .dropdown-basket-delivery-message .incentive-message #free-delivery-amount {
font-weight: bold;
}
.nav-dropdown-basket .dropdown-basket-delivery .deliverymessage .dropdown-basket-delivery-message .free-message {
display: none;
text-align: center;
padding-right: 16px;
}
.nav-dropdown-basket .dropdown-join-plus {
display: block;
background: #fefbe9;
border: 1px solid #80c078;
padding: 10px 10px 10px 36px;
margin-top: -12px;
margin-bottom: 12px;
font-size: 12px;
text-decoration: none;
position: relative;
}
.nav-dropdown-basket .dropdown-join-plus .plus-pulse-icon {
position: absolute;
left: 5px;
top: 50%;
transform: translatey(-50%);
}
.nav-dropdown-basket .dropdown-join-plus strong {
font-weight: 400;
}
.nav-plus.is-student .nav-icon-plus {
background-image: url(../img/plus-blue.png);
}
.nav-plus.is-student .plus-pulse-icon:before {
background-color: #76c0e2;
}
.nav-plus.book-seller .nav-icon-plus {
background-image: url(../img/plus-purple.png);
}
.nav-plus.book-seller .plus-pulse-icon:before {
background-color: #8e52a8;
}
.nav-plus > a {
padding-left: 26px;
}
.nav-plus > a:hover {
text-decoration: none;
}
.nav-plus .plus-pulse-icon {
position: absolute;
left: 5px;
top: -6px;
}
.nav-plus .nav-icon-plus {
background: url(../img/plus-green.png) center no-repeat;
background-size: contain;
display: inline-block;
height: 11px;
width: 30px;
transform: scale(2.1) translateY(1px);
margin-left: 1px;
}
.with-plus-info.active:before, .with-plus-info.active:after, .with-plus-info.mob-active:before, .with-plus-info.mob-active:after, .with-plus-info:hover:before, .with-plus-info:hover:after {
content: "";
position: absolute;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
overflow: hidden;
z-index: 1;
float: left;
}
.touch .with-plus-info.active:before, .touch .with-plus-info.active:after, .touch .with-plus-info.mob-active:before, .touch .with-plus-info.mob-active:after, .touch .with-plus-info:hover:before, .touch .with-plus-info:hover:after {
display: none;
}
.with-plus-info.active:before, .with-plus-info.mob-active:before, .with-plus-info:hover:before {
border-color: transparent transparent #ccc transparent !important;
bottom: -15px !important;
}
.with-plus-info.active:after, .with-plus-info.mob-active:after, .with-plus-info:hover:after {
content: "";
border-color: transparent transparent #fffaeb transparent !important;
bottom: -17px !important;
z-index: 10001 !important;
}
.with-plus-info .plus-info-dropdown {
width: auto;
min-width: 300px;
right: -26px;
padding-top: 14px;
}
.with-plus-info .plus-info-dropdown .inner {
text-align: center;
background-color: #fffaeb;
border: 1px solid #ccc;
padding: 10px;
}
.with-plus-info .plus-info-dropdown .inner img {
max-width: 110px;
}
.with-plus-info .plus-info-dropdown .inner .plus-info-dropdown-message {
display: inline-block;
margin-bottom: 4px;
}
.with-account-actions.active:before, .with-account-actions.active:after, .with-account-actions.mob-active:before, .with-account-actions.mob-active:after, .with-account-actions:hover:before, .with-account-actions:hover:after {
content: "";
position: absolute;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
overflow: hidden;
z-index: 1;
float: left;
}
.touch .with-account-actions.active:before, .touch .with-account-actions.active:after, .touch .with-account-actions.mob-active:before, .touch .with-account-actions.mob-active:after, .touch .with-account-actions:hover:before, .touch .with-account-actions:hover:after {
display: none;
}
.with-account-actions.active:before, .with-account-actions.mob-active:before, .with-account-actions:hover:before {
border-color: transparent transparent #000 transparent !important;
bottom: -15px !important;
}
.with-account-actions.active:after, .with-account-actions.mob-active:after, .with-account-actions:hover:after {
content: "";
border-color: transparent transparent #fff transparent !important;
bottom: -17px !important;
z-index: 10001 !important;
}
.with-account-actions.active:before, .with-account-actions.active:after, .with-account-actions:hover:before, .with-account-actions:hover:after {
display: block;
margin-left: -1px !important;
}
.touch .with-account-actions.active:before, .touch .with-account-actions.active:after, .touch .with-account-actions:hover:before, .touch .with-account-actions:hover:after {
display: block !important;
margin-left: -9px !important;
}
.with-account-actions.mob-active:before, .with-account-actions.mob-active:after {
display: block !important;
margin-left: -9px !important;
}
.with-account-actions.mob-active .account-actions-dropdown {
display: block !important;
}
.with-account-actions .account-actions-dropdown {
width: auto;
padding-top: 15px;
}
.with-account-actions .account-actions-dropdown a {
cursor: pointer;
padding: 8px 10px;
white-space: nowrap;
color: #313131;
}
.with-account-actions .account-actions-dropdown a:not(:last-child) {
border-bottom: 1px solid #313131;
}
.with-account-actions .account-actions-dropdown .inner {
text-align: center;
background-color: #fff;
border: 1px solid #000;
padding: 3px 15px 0;
display: flex;
flex-direction: column;
color: #313131;
}
/*
Include SCSS for temporary campaigns and site takeovers
Save individual scss files in the campaigns folder
Don't forget the year, e.g. "campaigns/2020/filename"
*/
/*
Default styling for reusable ribbon banner
Related tpl: /application/views/default/ribbons/_reusable.tpl
*/
/** Footer newsletter sign up panel **/
.banner-position-relative {
position: relative;
z-index: 0;
margin-bottom: 12px;
}
.banner-position-relative.last-del {
z-index: 99;
margin-bottom: 0;
}
.banner-position-relative .ribbon-banner {
position: relative;
}
@media only screen and (max-width: 770px) {
.banner-position-relative {
top: 107px;
}
.ribbon + .banner-position-relative {
top: calc(107px + var(--service-ribbon-height));
}
}
.touch .banner-position-relative {
top: 107px;
}
.touch .ribbon + .banner-position-relative {
top: calc(107px + var(--service-ribbon-height));
}
.ribbon-banner.campaign-ribbon {
height: 50px;
}
.ribbon-banner.campaign-ribbon + #masthead {
padding-top: 50px;
padding-top: 90px;
}
.ribbon-banner.campaign-ribbon + #masthead + .site-ribbon.detached {
top: calc(94px + 50px);
}
.ribbon-banner.campaign-ribbon + #masthead .main-nav.detached {
top: 90px;
border-top: 0;
}
.ribbon-banner.campaign-ribbon + #masthead .header-bar {
top: 50px;
}
.ribbon-banner.campaign-ribbon + #masthead .header-bar.detached {
top: 50px;
}
.row .accountSidebar-sticky {
top: calc(103px + 50px);
}
@media only screen and (max-width: 770px) {
.ribbon-banner.campaign-ribbon {
height: 50px;
}
.ribbon-banner.campaign-ribbon + #masthead {
padding-top: 0;
}
.ribbon-banner.campaign-ribbon + #masthead.ribbon ~ .main-container {
padding-top: calc(157px + var(--service-ribbon-height));
}
.ribbon-banner.campaign-ribbon + #masthead + .banner-position-relative {
top: calc(107px + 50px);
}
.ribbon-banner.campaign-ribbon + #masthead #main-logos,
.ribbon-banner.campaign-ribbon + #masthead .nav-trigger-button,
.ribbon-banner.campaign-ribbon + #masthead .search-trigger-button {
top: 50px !important;
}
.ribbon-banner.campaign-ribbon + #masthead .header-bar {
top: 50px;
}
.mob-search-open .ribbon-banner.campaign-ribbon + #masthead .mob-close-button {
top: 50px;
}
.mob-search-open .ribbon-banner.campaign-ribbon + #masthead .header-search .input-wrap .autocomplete-target {
top: 157px;
}
.ribbon-banner.campaign-ribbon + #masthead .header-basket,
.ribbon-banner.campaign-ribbon + #masthead .nav-shop-finder {
top: calc(50px + 1px);
}
.ribbon-banner.campaign-ribbon + #masthead .header-search {
top: 110px;
}
.ribbon-banner.campaign-ribbon + #masthead .main-nav-bar {
height: calc(100vh - 157px);
overflow-y: scroll;
}
.ribbon-banner.campaign-ribbon + #masthead .main-nav {
top: 157px;
}
.ribbon-banner.campaign-ribbon + #masthead .main-nav .header-ribbon {
top: 157px;
}
.ribbon-banner.campaign-ribbon ~ .main-page {
padding-top: 157px;
}
}
.touch .ribbon-banner.campaign-ribbon {
height: 50px;
}
.touch .ribbon-banner.campaign-ribbon + #masthead {
padding-top: 0;
}
.touch .ribbon-banner.campaign-ribbon + #masthead.ribbon ~ .main-container {
padding-top: calc(157px + var(--service-ribbon-height));
}
.touch .ribbon-banner.campaign-ribbon + #masthead + .banner-position-relative {
top: calc(107px + 50px);
}
.touch .ribbon-banner.campaign-ribbon + #masthead #main-logos,
.touch .ribbon-banner.campaign-ribbon + #masthead .nav-trigger-button,
.touch .ribbon-banner.campaign-ribbon + #masthead .search-trigger-button {
top: 50px !important;
}
.touch .ribbon-banner.campaign-ribbon + #masthead .header-bar {
top: 50px;
}
.mob-search-open .touch .ribbon-banner.campaign-ribbon + #masthead .mob-close-button {
top: 50px;
}
.mob-search-open .touch .ribbon-banner.campaign-ribbon + #masthead .header-search .input-wrap .autocomplete-target {
top: 157px;
}
.touch .ribbon-banner.campaign-ribbon + #masthead .header-basket,
.touch .ribbon-banner.campaign-ribbon + #masthead .nav-shop-finder {
top: calc(50px + 1px);
}
.touch .ribbon-banner.campaign-ribbon + #masthead .header-search {
top: 110px;
}
.touch .ribbon-banner.campaign-ribbon + #masthead .main-nav-bar {
height: calc(100vh - 157px);
overflow-y: scroll;
}
.touch .ribbon-banner.campaign-ribbon + #masthead .main-nav {
top: 157px;
}
.touch .ribbon-banner.campaign-ribbon + #masthead .main-nav .header-ribbon {
top: 157px;
}
.touch .ribbon-banner.campaign-ribbon ~ .main-page {
padding-top: 157px;
}
.ribbon-banner.campaign-ribbon {
background: #336b75;
}
.ribbon-banner.campaign-ribbon .main-message {
width: 520px;
height: 100%;
display: flex;
justify-content: center;
position: relative;
}
.ribbon-banner.campaign-ribbon .main-message .background-link {
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media only screen and (max-width: 770px) {
.ribbon-banner.campaign-ribbon .main-message {
width: 98%;
max-width: 336px;
}
}
/*
Default styling for reusable ribbon banner
Related tpl: /application/views/default/ribbons/_reusable.tpl
*/
/*
Plus double stamps banner
March 2025
scss for campaigns should be imported in campaigns.scss
Related tpl: /application/views/default/ribbons/_double-stamps-march2025.tpl
tpl must be included in _login_nav.tpl underneath the header element
*/
.ribbon-banner.double-stamps-ribbon {
height: 84px;
}
.ribbon-banner.double-stamps-ribbon + #masthead {
padding-top: 84px;
padding-top: 124px;
}
.ribbon-banner.double-stamps-ribbon + #masthead + .site-ribbon.detached {
top: calc(94px + 84px);
}
.ribbon-banner.double-stamps-ribbon + #masthead .main-nav.detached {
top: 124px;
border-top: 0;
}
.ribbon-banner.double-stamps-ribbon + #masthead .header-bar {
top: 84px;
}
.ribbon-banner.double-stamps-ribbon + #masthead .header-bar.detached {
top: 84px;
}
.row .accountSidebar-sticky {
top: calc(103px + 84px);
}
@media only screen and (max-width: 770px) {
.ribbon-banner.double-stamps-ribbon {
height: 62px;
}
.ribbon-banner.double-stamps-ribbon + #masthead {
padding-top: 0;
}
.ribbon-banner.double-stamps-ribbon + #masthead.ribbon ~ .main-container {
padding-top: calc(169px + var(--service-ribbon-height));
}
.ribbon-banner.double-stamps-ribbon + #masthead + .banner-position-relative {
top: calc(107px + 62px);
}
.ribbon-banner.double-stamps-ribbon + #masthead #main-logos,
.ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button,
.ribbon-banner.double-stamps-ribbon + #masthead .search-trigger-button {
top: 62px !important;
}
.ribbon-banner.double-stamps-ribbon + #masthead .header-bar {
top: 62px;
}
.mob-search-open .ribbon-banner.double-stamps-ribbon + #masthead .mob-close-button {
top: 62px;
}
.mob-search-open .ribbon-banner.double-stamps-ribbon + #masthead .header-search .input-wrap .autocomplete-target {
top: 169px;
}
.ribbon-banner.double-stamps-ribbon + #masthead .header-basket,
.ribbon-banner.double-stamps-ribbon + #masthead .nav-shop-finder {
top: calc(62px + 1px);
}
.ribbon-banner.double-stamps-ribbon + #masthead .header-search {
top: 122px;
}
.ribbon-banner.double-stamps-ribbon + #masthead .main-nav-bar {
height: calc(100vh - 169px);
overflow-y: scroll;
}
.ribbon-banner.double-stamps-ribbon + #masthead .main-nav {
top: 169px;
}
.ribbon-banner.double-stamps-ribbon + #masthead .main-nav .header-ribbon {
top: 169px;
}
.ribbon-banner.double-stamps-ribbon ~ .main-page {
padding-top: 169px;
}
}
.touch .ribbon-banner.double-stamps-ribbon {
height: 62px;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead {
padding-top: 0;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead.ribbon ~ .main-container {
padding-top: calc(169px + var(--service-ribbon-height));
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead + .banner-position-relative {
top: calc(107px + 62px);
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead #main-logos,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .search-trigger-button {
top: 62px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-bar {
top: 62px;
}
.mob-search-open .touch .ribbon-banner.double-stamps-ribbon + #masthead .mob-close-button {
top: 62px;
}
.mob-search-open .touch .ribbon-banner.double-stamps-ribbon + #masthead .header-search .input-wrap .autocomplete-target {
top: 169px;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-basket,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-shop-finder {
top: calc(62px + 1px);
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-search {
top: 122px;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .main-nav-bar {
height: calc(100vh - 169px);
overflow-y: scroll;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .main-nav {
top: 169px;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .main-nav .header-ribbon {
top: 169px;
}
.touch .ribbon-banner.double-stamps-ribbon ~ .main-page {
padding-top: 169px;
}
.ribbon-banner.double-stamps-ribbon {
color: #fff;
flex-direction: row;
overflow: hidden;
}
.ribbon-banner.double-stamps-ribbon .background-link {
display: block;
width: 100%;
height: 100%;
background-color: #80c079;
background-image: url("../img/campaigns/double-stamps-march2025/DoubleStampsMarch_LoggedOut.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.ribbon-banner.double-stamps-ribbon .background-link.has-account {
background-image: url("../img/campaigns/double-stamps-march2025/DoubleStampsMarch_LoggedIn_Basic.jpg");
}
.ribbon-banner.double-stamps-ribbon .background-link.plus-account {
background-image: url("../img/campaigns/double-stamps-march2025/DoubleStampsMarch_LoggedIn_Plus.jpg");
}
.ribbon-banner.double-stamps-ribbon .background-link.is-student {
background-color: #77c2e2;
background-image: url("../img/campaigns/double-stamps-march2025/DoubleStampsMarch_LoggedIn_Student.jpg");
}
@media only screen and (max-width: 400px) {
.ribbon-banner.double-stamps-ribbon .background-link {
background-size: contain;
}
}
.ribbon-banner.double-stamps-ribbon .ts-cs {
display: block;
letter-spacing: normal;
text-decoration: none;
position: absolute;
bottom: 4px;
left: calc(50% + 265px);
font-size: 9px;
font-weight: bold;
}
.ribbon-banner.double-stamps-ribbon .ts-cs br {
display: none;
}
@media only screen and (max-width: 400px) {
.ribbon-banner.double-stamps-ribbon .ts-cs {
color: #000;
}
}
@media only screen and (max-width: 480px) {
.ribbon-banner.double-stamps-ribbon .ts-cs {
font-size: 7px;
right: 2px;
bottom: 2px;
left: auto;
}
.ribbon-banner.double-stamps-ribbon .ts-cs br {
display: inline;
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
.ribbon-banner.double-stamps-ribbon .ts-cs {
font-size: 7px;
bottom: 2px;
left: calc(50% + 190px);
}
}
@media only screen and (max-width: 320px) {
.touch .ribbon-banner.double-stamps-ribbon, .no-touch .ribbon-banner.double-stamps-ribbon {
height: 46px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead {
padding-top: 139px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead + .site-ribbon.detached, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead + .site-ribbon.detached {
top: 139px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead #main-logos,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .search-trigger-button, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead #main-logos,
.no-touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button,
.no-touch .ribbon-banner.double-stamps-ribbon + #masthead .search-trigger-button {
top: 46px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-bar, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead .header-bar {
top: 106px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-basket,
.touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-shop-finder, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead .header-basket,
.no-touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-shop-finder {
top: 47px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead .nav-trigger-button {
top: 35px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .header-search, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead .header-search {
top: 105px !important;
}
.touch .ribbon-banner.double-stamps-ribbon + #masthead .main-nav-holder, .no-touch .ribbon-banner.double-stamps-ribbon + #masthead .main-nav-holder {
top: 92px !important;
}
}
/*
Import SCSS for gift finder pages
*/
/*
Just the one function actually
*/
/*
Giftfinder theme for Christmas 2018
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.christmas2018 .theme-intro h1 {
color: themeColour(main-heading);
}
body.theme-tagged-browsing.christmas2018 .zm-slider-heading,
body.theme-tagged-browsing.christmas2018 .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.christmas2018 .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.christmas2018 .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.christmas2018 .tag-buttons-wrap.collections .pill-slide {
background-color: rgba(116, 83, 83, 0.8);
}
body.theme-tagged-browsing.christmas2018 .theme-img {
display: none;
}
body.theme-tagged-browsing.christmas2018 .main-page .home-row {
background-image: url("../img/tag-browser/christmas2018/top-image-dt.png");
background-position: calc(40% - 180px) -10px;
background-size: auto 587px;
background-repeat: no-repeat;
}
@media only screen and (max-width: 800px) {
body.theme-tagged-browsing.christmas2018 .main-page .home-row {
background-position: calc(30% - 120px) 8px;
background-size: auto 510px;
}
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.christmas2018 .main-page .home-row {
background-image: url("../img/tag-browser/christmas2018/top-image-mob.png");
background-position: -5px -118px;
background-size: auto 542px;
}
}
body.theme-tagged-browsing.christmas2018 .tag-browser-intro-wrap {
padding: 0;
}
body.theme-tagged-browsing.christmas2018 .tag-browser-intro-wrap .theme-intro {
width: 100% !important;
text-align: center;
padding-left: 57%;
padding-right: 14%;
height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.christmas2018 .tag-browser-intro-wrap .theme-intro {
height: 180px !important;
padding-right: 0 !important;
padding-left: 48% !important;
}
}
body.theme-tagged-browsing.christmas2018 .tag-browser-intro-wrap .theme-intro .theme-intro-copy {
padding: 0;
}
body.theme-tagged-browsing.christmas2018 .toggle-view {
margin-bottom: 93px;
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.christmas2018 .toggle-view {
margin-bottom: 77px;
}
}
/*
Giftfinder theme for Mothers Day 2019
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.mothersday2019 .site-ribbon {
background-color: themeColour(ribbon);
border-color: themeColour(ribbon);
}
body.theme-tagged-browsing.mothersday2019 .theme-intro h1 {
color: themeColour(main-heading);
}
body.theme-tagged-browsing.mothersday2019 .zm-slider-heading,
body.theme-tagged-browsing.mothersday2019 .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-active-outer);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.mothersday2019 .tag-buttons-wrap.collections .pill-slide {
background-color: rgba(231, 143, 129, 0.8);
}
body.theme-tagged-browsing.mothersday2019 .theme-img {
display: none;
}
body.theme-tagged-browsing.mothersday2019 .main-page .home-row {
background-image: url("../img/tag-browser/mothersday2019/top-image-dt.png");
background-position: calc(40% - 180px) -10px;
background-size: auto 587px;
background-repeat: no-repeat;
}
@media only screen and (max-width: 800px) {
body.theme-tagged-browsing.mothersday2019 .main-page .home-row {
background-position: calc(30% - 120px) 8px;
background-size: auto 510px;
}
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.mothersday2019 .main-page .home-row {
background-image: url(../img/tag-browser/mothersday2019/top-image-mob.png);
background-position: -5px -118px;
background-size: auto 542px;
}
}
body.theme-tagged-browsing.mothersday2019 .tag-browser-intro-wrap {
padding: 0;
}
body.theme-tagged-browsing.mothersday2019 .tag-browser-intro-wrap .theme-intro {
width: 100% !important;
text-align: center;
padding-left: 57%;
padding-right: 14%;
height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (max-width: 800px) {
body.theme-tagged-browsing.mothersday2019 .tag-browser-intro-wrap .theme-intro {
padding-right: 8% !important;
padding-left: 63% !important;
}
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.mothersday2019 .tag-browser-intro-wrap .theme-intro {
height: 180px !important;
padding-right: 0 !important;
padding-left: 48% !important;
}
}
body.theme-tagged-browsing.mothersday2019 .tag-browser-intro-wrap .theme-intro .theme-intro-copy {
padding: 0;
}
/*
Giftfinder theme for Fathers Day 2019
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.fathers-day-gifts .site-ribbon,
body.theme-tagged-browsing.fathers-day-2019 .site-ribbon,
body.theme-tagged-browsing.fathersday2019 .site-ribbon {
background-color: themeColour(ribbon);
border-color: themeColour(ribbon);
color: themeColour(ribbon-text);
}
body.theme-tagged-browsing.fathers-day-gifts .theme-intro h1,
body.theme-tagged-browsing.fathers-day-gifts .theme-intro p,
body.theme-tagged-browsing.fathers-day-2019 .theme-intro h1,
body.theme-tagged-browsing.fathers-day-2019 .theme-intro p,
body.theme-tagged-browsing.fathersday2019 .theme-intro h1,
body.theme-tagged-browsing.fathersday2019 .theme-intro p {
color: themeColour(main-heading);
}
body.theme-tagged-browsing.fathers-day-gifts .zm-slider-heading,
body.theme-tagged-browsing.fathers-day-gifts .b-slider-heading,
body.theme-tagged-browsing.fathers-day-2019 .zm-slider-heading,
body.theme-tagged-browsing.fathers-day-2019 .b-slider-heading,
body.theme-tagged-browsing.fathersday2019 .zm-slider-heading,
body.theme-tagged-browsing.fathersday2019 .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap .pill,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap .pill,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap .pill.active,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap .pill.active,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
border-color: themeColour(pill-1-active-outer);
color: themeColour(pill-1-active-text);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap .pill.active .pill.active,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap .pill.active .pill.active,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-active-outer);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap .pill-slide,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap .pill-slide,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap .pill-slide {
background-color: themeColour(pill-1-arrow);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap.collections .pill,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap.collections .pill,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap.collections .pill.active,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap.collections .pill.active,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-inner);
border-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.fathers-day-gifts .tag-buttons-wrap.collections .pill-slide,
body.theme-tagged-browsing.fathers-day-2019 .tag-buttons-wrap.collections .pill-slide,
body.theme-tagged-browsing.fathersday2019 .tag-buttons-wrap.collections .pill-slide {
background-color: themeColour(pill-2-arrow);
}
/*
Giftfinder theme for summer reading
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.summer-reading .site-ribbon {
background-color: themeColour(ribbon);
border-color: themeColour(ribbon);
color: themeColour(ribbon-text);
}
body.theme-tagged-browsing.summer-reading .theme-intro h1,
body.theme-tagged-browsing.summer-reading .theme-intro p {
color: themeColour(main-heading);
}
body.theme-tagged-browsing.summer-reading .zm-slider-heading,
body.theme-tagged-browsing.summer-reading .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
border-color: themeColour(pill-1-active-outer);
color: themeColour(pill-1-active-text);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-active-outer);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap .pill-slide {
background-color: themeColour(pill-1-arrow);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-inner);
border-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.summer-reading .tag-buttons-wrap.collections .pill-slide {
background-color: themeColour(pill-2-arrow);
}
/*
Giftfinder theme for Christmas 2019
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.christmas2019 .site-ribbon {
background-color: themeColour(ribbon);
border-color: themeColour(ribbon);
color: themeColour(ribbon-text);
}
body.theme-tagged-browsing.christmas2019 .theme-intro h1 {
color: themeColour(intro-heading);
}
body.theme-tagged-browsing.christmas2019 .theme-intro p {
color: themeColour(intro-copy);
}
body.theme-tagged-browsing.christmas2019 .zm-slider-heading,
body.theme-tagged-browsing.christmas2019 .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.christmas2019 .b-slider-description {
color: themeColour(slider-descriptions);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
border-color: themeColour(pill-1-active-outer);
color: themeColour(pill-1-active-text);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-inner);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap .pill-slide {
background-color: themeColour(pill-1-arrow);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-inner);
border-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.christmas2019 .tag-buttons-wrap.collections .pill-slide {
background-color: themeColour(pill-2-arrow);
}
/*
Giftfinder theme for 21st Century Books campaign 2020
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing[class*="21st-century-reading"] .theme-intro h1 {
color: themeColour(intro-heading);
font-family: "Oswald", sans-serif;
font-style: normal;
text-transform: uppercase;
font-size: 30px;
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing[class*="21st-century-reading"] .theme-intro h1 {
font-size: 15px;
}
}
body.theme-tagged-browsing[class*="21st-century-reading"] .theme-intro p {
color: themeColour(intro-copy);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .zm-slider-heading,
body.theme-tagged-browsing[class*="21st-century-reading"] .b-slider-heading {
color: themeColour(slider-headings);
font-family: "Oswald", sans-serif;
font-style: normal;
}
body.theme-tagged-browsing[class*="21st-century-reading"] .b-slider-description {
color: themeColour(slider-descriptions);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
border-color: themeColour(pill-1-active-outer);
color: themeColour(pill-1-active-text);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-inner);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap .pill-slide {
background-color: themeColour(pill-1-arrow);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-inner);
border-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing[class*="21st-century-reading"] .tag-buttons-wrap.collections .pill-slide {
background-color: themeColour(pill-2-arrow);
}
/*
Giftfinder theme for Mother's Day campaign 2020
Giftfinder themes should be imported in giftfinder-campaigns.scss
*/
body.theme-tagged-browsing.mothers-day .site-ribbon {
background-color: themeColour(ribbon-background);
border-color: themeColour(ribbon-background);
color: themeColour(ribbon-text);
}
body.theme-tagged-browsing.mothers-day .theme-intro h1 {
color: themeColour(intro-heading);
}
@media only screen and (max-width: 640px) {
body.theme-tagged-browsing.mothers-day .theme-intro h1 {
font-size: 15px;
}
}
body.theme-tagged-browsing.mothers-day .theme-intro p {
color: themeColour(intro-copy);
}
body.theme-tagged-browsing.mothers-day .zm-slider-heading,
body.theme-tagged-browsing.mothers-day .b-slider-heading {
color: themeColour(slider-headings);
}
body.theme-tagged-browsing.mothers-day .b-slider-description {
color: themeColour(slider-descriptions);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap .pill {
background-color: themeColour(pill-1-inner);
border-color: themeColour(pill-1-outer);
color: themeColour(pill-1-text);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap .pill.active {
background-color: themeColour(pill-1-active-inner);
border-color: themeColour(pill-1-active-outer);
color: themeColour(pill-1-active-text);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap .pill.active .pill.active {
border-color: themeColour(pill-1-inner);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap .pill-slide {
background-color: themeColour(pill-1-arrow);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap.collections .pill {
background-color: themeColour(pill-2-inner);
border-color: themeColour(pill-2-outer);
color: themeColour(pill-2-text);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap.collections .pill.active {
background-color: themeColour(pill-2-active-inner);
border-color: themeColour(pill-2-active-outer);
color: themeColour(pill-2-active-text);
}
body.theme-tagged-browsing.mothers-day .tag-buttons-wrap.collections .pill-slide {
background-color: themeColour(pill-2-arrow);
}
.tagged-theme-collection .collection-pills .pill {
background-color: themeColour(pill-2-inner);
color: themeColour(pill-2-text);
border-color: themeColour(pill-2-outer);
}
.tagged-theme-collection .collection-pills .pill:hover {
background-color: themeColour(pill-2-active-inner);
color: themeColour(pill-2-active-text);
}
/*
Import SCSS for the Waterstones mobile app views
*/
.app-grey1 {
color: rgb(12, 12, 12);
}
.app-grey2 {
color: rgb(80, 80, 80);
}
.app-grey3 {
color: rgb(166, 166, 166);
}
.app-grey4 {
color: rgb(243, 243, 243);
}
.app-turquoise1 {
color: rgb(42, 101, 112);
}
.app-turquoise2 {
color: rgb(167, 188, 197);
}
.app-turquoise3 {
color: rgb(213, 226, 232);
}
.app-turquoise4 {
color: rgb(234, 239, 242);
}
.app-brown1 {
color: rgb(158, 134, 107);
}
.app-brown2 {
color: rgb(203, 178, 149);
}
.app-brown3 {
color: rgb(230, 210, 189);
}
.app-brown4 {
color: rgb(252, 247, 241);
}
.app-blue1 {
color: rgb(41, 112, 235);
}
.app-orange1 {
color: rgb(247, 165, 38);
}
.app-orange2 {
color: rgb(255, 250, 228);
}
.app-red1 {
color: rgb(215, 99, 97);
}
.app-purple1 {
color: rgb(137, 106, 178);
}
.app-bluishGrey {
color: rgb(105, 144, 151);
}
/** Footer newsletter sign up panel **/
.ws-app {
font-size: 18px;
color: rgb(12, 12, 12);
}
.ws-app .row.main-page {
padding-top: 0;
}
.ws-app h1,
.ws-app .heading-main {
font-size: 26px;
font-weight: 600;
margin: 22px 0;
font-style: normal;
}
.ws-app h2 {
font-style: normal;
font-size: 20px;
}
.ws-app .app-subtitle {
text-transform: uppercase;
color: rgb(80, 80, 80);
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
font-style: normal;
}
.ws-app p {
line-height: 1.4em;
}
.ws-app ul {
list-style-type: none;
margin-left: 0;
line-height: 1.4em;
}
.ws-app .button-primary {
color: #fff;
background-color: rgb(42, 101, 112);
border: none;
width: 100%;
padding: 15px 0;
font-family: Baskerville, serif;
text-align: center;
text-decoration: none;
}
.ws-app .button-secondary {
color: #fff;
background-color: rgb(158, 134, 107);
border: none;
}
.ws-app .button-tertiary {
color: rgb(42, 101, 112);
background-color: #fff;
border: 2px solid rgb(42, 101, 112);
}
.ws-app .ws-app-logo {
width: auto;
max-width: 140px;
height: 40px;
margin: 20px auto 30px;
background-image: url("../img/waterstones-logo@2x.png");
background-size: contain;
background-position: center;
display: block;
background-repeat: no-repeat;
}
.ws-app .ws-app-row-grey,
.ws-app .ws-app-row-turquoise,
.ws-app .ws-app-row-yellow,
.ws-app .ws-app-row-green {
padding: 10px;
}
.ws-app .ws-app-row-grey h1,
.ws-app .ws-app-row-turquoise h1,
.ws-app .ws-app-row-yellow h1,
.ws-app .ws-app-row-green h1 {
margin: 0;
}
.ws-app .ws-app-row-grey p,
.ws-app .ws-app-row-turquoise p,
.ws-app .ws-app-row-yellow p,
.ws-app .ws-app-row-green p {
font-size: 16px;
}
.ws-app .ws-app-row-grey label,
.ws-app .ws-app-row-turquoise label,
.ws-app .ws-app-row-yellow label,
.ws-app .ws-app-row-green label {
color: rgb(12, 12, 12);
}
.ws-app .ws-app-row-grey label a,
.ws-app .ws-app-row-turquoise label a,
.ws-app .ws-app-row-yellow label a,
.ws-app .ws-app-row-green label a {
color: rgb(42, 101, 112);
}
.ws-app .ws-app-row-grey {
background-color: rgb(243, 243, 243);
color: rgb(12, 12, 12);
}
.ws-app .ws-app-row-turquoise {
background: rgb(234, 239, 242);
}
.ws-app .ws-app-row-yellow {
background-color: rgb(255, 250, 235);
color: rgb(12, 12, 12);
border: 1px solid #80c078;
}
.ws-app .ws-app-row-green {
background-color: rgb(108, 169, 102);
color: #fff;
}
.ws-app .plus-box .checkbox-label .label-content {
overflow: visible;
font-weight: 600;
}
.ws-app .plus-box ul.benefits {
overflow: hidden;
}
.ws-app .info-icon {
display: block;
width: 24px;
height: 24px;
background-image: url("../img/mobile-app/icons/information-grey.png");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-img,
.ws-app .app-bookdetails-wrap .app-bookdetails-info {
float: left;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-img {
width: 20%;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-info {
width: 80%;
padding-left: 20px;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-info .app-bookdetails-title {
font-family: Baskerville, serif;
font-weight: 600;
color: rgb(12, 12, 12);
font-size: 22px;
margin-bottom: 6px;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-info .app-bookdetails-author {
font-weight: 600;
color: #336b75;
}
.ws-app .app-bookdetails-wrap .app-bookdetails-info .app-bookdetails-published {
color: rgb(80, 80, 80);
background-image: url("../img/mobile-app/icons/calendar.png");
background-repeat: no-repeat;
background-size: 18px;
padding-left: 26px;
margin: 6px 0px;
}
.ws-app .app-bookdetails-format {
font-weight: 600;
display: inline-block;
padding: 6px 12px 4px;
color: rgb(12, 12, 12);
background: rgb(213, 226, 232);
text-transform: uppercase;
font-size: 14px;
position: relative;
margin-top: 6px;
}
.ws-app .app-bookdetails-format:before {
content: "";
height: 0;
display: block;
position: absolute;
bottom: 100%;
left: 0;
border: 5px solid transparent;
border-bottom: 3px solid rgb(167, 188, 197);
border-right: 9px solid rgb(167, 188, 197);
}
.ws-app .ws-app-alert-info {
background: #ffe1e1;
padding: 10px;
text-align: center;
font-size: 14px;
margin: -10px 0 24px;
}
.ws-app .main-container {
padding-top: 0;
}
/** Footer newsletter sign up panel **/
.ws-app-form label {
font-size: 16px;
color: rgb(80, 80, 80);
font-weight: 400;
}
.ws-app-form label.error {
font-size: 15px;
color: #df3f3f;
margin-top: -8px;
margin-bottom: 22px;
color: rgb(197, 36, 62);
font-style: normal;
}
.ws-app-form label.error#rating-error {
padding: 0 !important;
}
.ws-app-form label.error#reviewTextArea-error {
margin-top: -40px;
}
.ws-app-form .input {
border: none;
border-bottom: 1px solid rgb(213, 226, 232);
padding: 10px 12px 10px 0 !important;
margin-bottom: 20px !important;
}
.ws-app-form .input:not([disabled]):focus, .ws-app-form .input:not([disabled]):active, .ws-app-form .input.input-error {
border: none;
border-bottom: 1px solid rgb(42, 101, 112);
padding: 10px 12px;
margin-bottom: 20px;
}
.ws-app-form .input.error {
border-color: rgb(197, 36, 62) !important;
padding-right: 46px !important;
background-repeat: no-repeat;
background-position: calc(100% - 12px);
background-size: 24px;
}
.ws-app-form .input.error:not(.webview-pw) {
background-image: url("../img/mobile-app/icons/error-red.png");
}
.ws-app-form #agree_terms_conditions-error {
margin-top: 0px;
}
.ws-app-form .ws-checkable-outer {
background-color: transparent;
border: none;
background-image: url("../img/mobile-app/icons/check-empty-square-grey.png");
background-size: contain;
background-repeat: no-repeat;
width: 25px;
height: 25px;
margin-right: 10px;
}
.ws-app-form .ws-checkable-outer:before {
display: none;
}
.ws-app-form .ws-checkable-outer.checked {
background-image: url("../img/mobile-app/icons/check-square.png");
}
.ws-app-form .field.with-info {
display: flex;
align-items: center;
}
.ws-app-form .field.with-info .checkbox-label {
flex: 1;
width: 100%;
}
.ws-app-form .checkbox-label .label-content {
font-weight: 400;
}
.ws-app-form .plus-box .field.with-info {
flex-direction: column;
}
.ws-app-form .plus-box .checkbox-label {
margin-bottom: 0;
}
.ws-app-form .plus-box ul.benefits {
flex: 1;
font-size: 14px;
font-weight: 600;
padding: 0 0 15px 30px;
}
.ws-app-form .password-field-wrap {
position: relative;
}
.ws-app-form .password-field-wrap input {
padding-right: 46px !important;
}
.ws-app-form .button-formsubmit {
width: 100%;
padding: 15px 0;
font-family: Baskerville, serif;
}
.ws-app-form .button-formsubmit.button-disabled {
opacity: 0.6;
pointer-events: none;
}
.ws-app-form .button-formsubmit.button-loading {
height: 51px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.ws-app-form .button-formsubmit.button-loading:before {
content: "";
display: block;
width: 30px;
height: 30px;
left: 50%;
top: 50%;
transform: translate(-10px);
background-image: url("/img/loading-wheel-white.png");
background-size: contain;
animation: spin 1000ms infinite linear;
}
/*
For template: /webview/signin.tpl
*/
.ws-app .login-page-row {
margin: 20px 0;
text-align: center;
font-size: 17px;
}
.ws-app .login-page-row.create-account-row {
background: rgb(234, 239, 242);
padding: 20px 0;
font-weight: 400;
}
.ws-app .login-page-row a {
text-decoration: none;
color: rgb(42, 101, 112);
font-weight: 400;
}
/*
For template: /webview/register.tpl
*/
.ws-app .app-regform-footer {
text-align: center;
}
.ws-app .app-regform-footer a {
text-decoration: none;
color: rgb(42, 101, 112);
font-weight: 500;
}
.ws-app .card-activation-page h1 {
margin: 0;
}
.ws-app .card-activation-page p {
color: rgb(80, 80, 80);
font-size: 16px;
font-weight: 400;
}
.ws-app .card-activation-page p.text-explanation, .ws-app .card-activation-page p.text-resend-email {
color: rgb(12, 12, 12);
text-align: center;
}
.ws-app .card-activation-page p.text-resend-email {
font-size: 14px;
}
.ws-app .card-activation-page p.text-resend-email a {
text-decoration: none;
color: rgb(42, 101, 112);
font-weight: 600;
}
.ws-app .card-activation-page .ws-app-alert-info {
color: rgb(80, 80, 80);
font-size: 15px;
font-weight: 400;
margin: 2px 0;
position: absolute;
width: 100%;
}
.ws-app .card-activation-page .activation-code-wrap {
display: flex;
justify-content: center;
margin: 80px 0 20px;
}
.ws-app .card-activation-page .activation-code-wrap + .error {
padding: 10px;
text-align: center;
}
.ws-app .card-activation-page .activation-code-wrap .activate-num {
border: 2px solid #b7b7b7;
width: 58px;
height: 58px;
margin: 0 9px;
text-align: center;
font-size: 40px !important;
font-weight: 400;
padding: 0;
}
.ws-app .card-activation-page .button-formsubmit {
margin: 50px 0 10px;
}
.ws-app .reviews-write h1,
.ws-app .reviews-write label,
.ws-app .reviews-write input,
.ws-app .reviews-write .reviewbook-wrap,
.ws-app .reviews-write .review-stars-wrapper,
.ws-app .reviews-write .submit-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.ws-app .reviews-write .review-body {
margin-left: 20px !important;
margin-bottom: 50px !important;
}
.ws-app .reviews-write .review-rate span {
color: rgb(12, 12, 12);
font-weight: 600;
font-size: 20px;
}
.ws-app .reviewbook-wrap {
margin-bottom: 20px;
}
.ws-app .app-write-review-wrap {
display: flex;
flex-direction: column;
}
.ws-app .app-write-review-wrap .error-wrap {
margin-bottom: 15px;
padding: 0 20px;
font-style: italic;
font-size: 18px;
}
.ws-app .app-write-review-wrap .review-rate {
text-align: left;
padding: 0;
}
.ws-app .app-write-review-wrap .review-stars-wrapper {
border-bottom: 1px solid rgb(213, 226, 232);
}
.ws-app #reviewSubmitButton {
text-transform: none;
font-size: 20px;
}
.ws-app .page-title-container {
float: none;
padding: 0 20px 16px;
}
.ws-app .review-order-wrap .button-tertiary {
padding: 10px 14px;
}
.ws-app .review-order-wrap .form-review-order {
float: right;
padding-top: 5px;
}
.ws-app .review-order-wrap .form-review-order select {
width: 100%;
}
.ws-app .reviews-list-item {
margin: 24px 0;
border-bottom: none;
}
.ws-app .reviews-list-item h2 {
color: rgb(80, 80, 80);
font-style: italic;
font-size: 16px;
font-weight: 600;
line-height: normal;
}
.ws-app .reviews-list-item .review-list-item-main {
padding: 0 20px;
}
.ws-app .review-header-bottom {
border-bottom: 0;
padding-bottom: 10px;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
}
.ws-app .review-header-bottom > div {
float: left;
margin-right: 10px;
}
.ws-app .review-content {
padding-bottom: 10px;
}
.ws-app .review-content .p-medium {
margin-bottom: 10px;
}
.ws-app .app-comment-bottom {
display: flex;
align-items: center;
}
.ws-app .app-comment-bottom .app-user-picture {
width: 34px;
height: 34px;
border-radius: 50%;
margin-right: 10px;
}
.ws-app .app-comment-bottom .app-reviewer-name {
font-weight: 500;
font-size: 16px;
}
.ws-app .app-comment-bottom .app-bookseller-review-tag {
font-family: Baskerville, serif;
color: rgb(80, 80, 80);
font-style: italic;
font-size: 16px;
font-weight: 600;
line-height: normal;
margin-top: 4px;
background-image: url("../img/mobile-app/icons/review.png");
background-repeat: no-repeat;
background-size: contain;
padding-left: 28px;
}
.ws-app .event-main-book {
text-align: center;
background-color: rgb(213, 226, 232);
padding: 40px 20px;
}
.ws-app .event-main-book img {
max-height: 260px;
}
.ws-app .app-event-info {
display: flex;
padding: 20px 0;
}
.ws-app .app-event-info .app-event-details {
flex: 1;
font-weight: 500;
}
.ws-app .app-event-info .app-event-details > div {
padding: 4px 0;
}
.ws-app .app-event-info .app-event-details .app-event-loc {
display: flex;
align-items: center;
color: rgb(42, 101, 112);
}
.ws-app .app-event-info .app-event-details .app-event-loc:before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
margin-right: 4px;
background-image: url("../img/mobile-app/icons/location.png");
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat;
}
.ws-app .app-event-info .app-event-price {
font-weight: bold;
font-family: Baskerville, serif;
font-style: italic;
font-size: 22px;
}
.ws-app .app-event-tickets {
padding: 20px 0;
}
.ws-app .main-blog-page h1 {
max-width: 100%;
}
.ws-app .blog-preview-content h2 {
height: auto;
}
/*
For template: /webview/aboutPlusRewards.tpl
*/
.ws-app .plus-steps {
margin: 16px 0;
}
.ws-app .plus-steps li {
padding: 14px 0 14px 70px;
background-position: left center;
background-repeat: no-repeat;
background-size: 52px;
}
.ws-app .plus-steps li:nth-child(1) {
background-image: url("../img/plus/stamp1.png");
}
.ws-app .plus-steps li:nth-child(2) {
background-image: url("../img/plus/stamp2.png");
}
.ws-app .plus-steps li:nth-child(3) {
background-image: url("../img/plus/stamp3.png");
}
.ws-app .app-read-more-links {
border-top: 1px solid rgb(213, 226, 232);
border-bottom: 1px solid rgb(213, 226, 232);
padding: 0 14px;
margin: 0;
}
.ws-app .app-read-more-links li {
background-image: url("../img/mobile-app/icons/forward.png");
background-position: right center;
background-repeat: no-repeat;
background-size: 16px;
}
.ws-app .app-read-more-links li:not(:last-child) {
border-bottom: 1px solid rgb(213, 226, 232);
}
.ws-app .app-read-more-links li a {
text-decoration: none;
color: rgb(12, 12, 12);
font-weight: 500;
display: block;
padding: 14px 0;
}
.ws-app ul.benefits {
padding: 6px 0;
margin: 0;
}
.ws-app ul.benefits li {
padding: 2px 0 2px 24px;
background-image: url("../img/mobile-app/icons/check-plus.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 0 center;
}
/** Footer newsletter sign up panel **/
.ws-app .section-shop-details {
margin-bottom: 40px;
}
.ws-app .button-shop-info {
color: rgb(80, 80, 80);
font-size: 14px;
display: block;
text-decoration: none;
padding: 14px 40px;
border-bottom: 1px solid rgb(213, 226, 232);
position: relative;
cursor: pointer;
}
.ws-app .button-shop-info:before, .ws-app .button-shop-info:after {
content: "";
display: block;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
}
.ws-app .button-shop-info:before {
left: 0;
background-image: url("../img/mobile-app/icons/location.png");
background-size: 50%;
}
.ws-app .button-shop-info:after {
right: 0;
background-image: url("../img/mobile-app/icons/forward.png");
background-size: 36%;
}
.ws-app .button-shop-info strong {
color: rgb(12, 12, 12);
font-size: 16px;
}
.ws-app .shop-description {
margin-bottom: 20px;
}
.ws-app .shop-description.show-container:before {
z-index: 1;
}
.ws-app .shop-description.show-container .show-button {
z-index: 2;
left: 16px;
font-size: 16px;
}
.ws-app .shop-description p:not(:last-child) {
margin: 20px 0 30px;
}
.ws-app .shop-intro {
color: rgb(158, 134, 107);
font-size: 19px;
}
.ws-app .section-shop-info .row:not(:first-child):not(:last-child) {
margin-bottom: 16px;
}
.ws-app .section-shop-info h3 {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 18px;
font-weight: bold;
font-style: normal;
margin: 12px 0;
}
.ws-app .section-shop-info .opening-times > div {
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.ws-app .section-shop-info .opening-times > div:nth-child(1) {
font-weight: 400;
}
.ws-app .location-override {
cursor: text;
text-decoration: none;
color: #0c0c0c;
}
.ws-app .map-box {
height: 300px;
}
.ws-app .map-box .mobile-app-map {
height: 100%;
}
.ws-app .directions .input {
width: 100%;
margin-bottom: 0 !important;
border-width: 2px;
height: 50px !important;
padding: 10px 7px;
}
.ws-app .shop-info-subtitle {
display: inline-block;
color: rgb(158, 134, 107);
text-transform: uppercase;
font-weight: 500;
margin: 20px 0 10px;
font-size: 16px;
}
.ws-app .button-get-directions,
.ws-app .button-contact {
display: block;
text-align: center;
padding: 12px 8px;
text-decoration: none;
margin: 20px 0;
width: 100%;
}
.ws-app #help-layout h1,
.ws-app #help-layout h2 {
font-family: "Source Sans Pro", Arial, sans-serif;
color: rgb(12, 12, 12);
font-weight: 500;
}
.ws-app #help-layout h2 {
font-style: normal;
font-size: 22px;
}
.ws-app #help-layout strong {
color: rgb(80, 80, 80);
}
/*
For template: /webview/synopsis.tpl
*/
.ws-app .app-specs {
margin: 10px 0 30px;
padding-top: 22px;
border-top: 1px solid rgb(213, 226, 232);
}
.ws-app .app-specs li {
margin-bottom: 18px;
}
.ws-app .app-specs li p {
margin: 0;
}
.ws-app .email-options-wrap,
.ws-app .email-unsubscribe-wrap,
.ws-app .email-preferences .hr {
margin-bottom: 4px;
}
.ws-app .prefs-content {
margin: 30px 10px;
}
.ws-app .prefs-content:first-child {
margin-top: 0;
}
.ws-app .prefs-content h2 {
font-style: normal;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 20px;
display: block;
float: left;
width: 100%;
}
.ws-app .prefs-area .page-title {
display: none;
}
.ws-app .prefs-area .hr {
background-color: rgb(213, 226, 232);
}
.ws-app .prefs-area .ws-checkable-outer {
border: none;
background-color: transparent;
background-image: url("../img/mobile-app/icons/check-empty-circle-grey.png");
background-size: contain;
background-repeat: no-repeat;
}
.ws-app .prefs-area .ws-checkable-outer:before {
display: none;
}
.ws-app .prefs-area .ws-checkable-outer.checked {
background-image: url("../img/mobile-app/icons/check-circle.png");
}
.ws-app .email-options-wrap > .span12 {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.ws-app .email-options-wrap > .span12 > label {
width: calc(100% - 38px);
margin: 0;
padding: 0 12px;
}
.ws-app .email-options-wrap > .span12 > label .label-content {
padding: 0;
}
.ws-app .email-options-wrap > .span12 > label .label-content h2 {
margin: 12px 0px;
padding: 0;
font-style: normal;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 18px;
font-weight: 300;
}
.ws-app .pref-description {
display: block;
width: 28px;
height: 28px;
background-image: url("../img/mobile-app/icons/information-grey.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.ws-app .pref-description span {
display: none;
}
.ws-app .order-info .order-overview.max-width {
max-width: 55%;
}
.ws-app .order-info .order-overview .title a {
color: rgb(42, 101, 112);
text-decoration: none;
}
/** Footer newsletter sign up panel **/
.account-content .container.wpaccess .use-delivery,
.account-content #billing-address-form .use-delivery,
.account-content #shipping-address-form .use-delivery,
.account-content #changeCardModal .use-delivery {
display: none;
}
.account-content .container.wpaccess .panel-field-remember-new-card,
.account-content #billing-address-form .panel-field-remember-new-card,
.account-content #shipping-address-form .panel-field-remember-new-card,
.account-content #changeCardModal .panel-field-remember-new-card {
display: none;
}
.container.wpaccess h2,
#billing-address-form h2,
#shipping-address-form h2,
#changeCardModal h2 {
margin: 10px 0;
padding-top: 10px;
float: none;
clear: both;
}
.chk-surround .container.wpaccess h2,
.chk-surround #billing-address-form h2,
.chk-surround #shipping-address-form h2,
.chk-surround #changeCardModal h2 {
display: none;
}
.container.wpaccess abbr, .container.wpaccess abbr[title], .container.wpaccess .required-fields,
#billing-address-form abbr,
#billing-address-form abbr[title],
#billing-address-form .required-fields,
#shipping-address-form abbr,
#shipping-address-form abbr[title],
#shipping-address-form .required-fields,
#changeCardModal abbr,
#changeCardModal abbr[title],
#changeCardModal .required-fields {
border: none;
outline: 0;
text-decoration: none;
color: #B60303;
}
.container.wpaccess .required-fields,
#billing-address-form .required-fields,
#shipping-address-form .required-fields,
#changeCardModal .required-fields {
clear: both;
float: left;
}
.container.wpaccess .use-delivery,
#billing-address-form .use-delivery,
#shipping-address-form .use-delivery,
#changeCardModal .use-delivery {
clear: both;
}
.chk-surround .container.wpaccess .card,
.chk-surround #billing-address-form .card,
.chk-surround #shipping-address-form .card,
.chk-surround #changeCardModal .card {
padding: 0 20px;
}
.container.wpaccess .card .checkout.is-valid .submit,
#billing-address-form .card .checkout.is-valid .submit,
#shipping-address-form .card .checkout.is-valid .submit,
#changeCardModal .card .checkout.is-valid .submit {
background: green;
}
.container.wpaccess .card .checkout .label .type,
#billing-address-form .card .checkout .label .type,
#shipping-address-form .card .checkout .label .type,
#changeCardModal .card .checkout .label .type {
color: green;
}
.container.wpaccess .card .checkout .submit,
#billing-address-form .card .checkout .submit,
#shipping-address-form .card .checkout .submit,
#changeCardModal .card .checkout .submit {
background: #336b75;
font-family: sans-serif;
cursor: pointer;
width: 200px;
color: white;
outline: 0;
font-size: 16px;
border: 0;
text-transform: uppercase;
font-weight: 300;
padding: 15px 0;
transition: background 0.3s ease;
}
.container.wpaccess #manual-address-btn, .container.wpaccess #postcode-search-btn,
#billing-address-form #manual-address-btn,
#billing-address-form #postcode-search-btn,
#shipping-address-form #manual-address-btn,
#shipping-address-form #postcode-search-btn,
#changeCardModal #manual-address-btn,
#changeCardModal #postcode-search-btn {
font-size: 15px;
text-decoration: underline;
cursor: pointer;
margin-bottom: 10px;
color: #336b75;
}
.container.wpaccess .manual-address-fields,
#billing-address-form .manual-address-fields,
#shipping-address-form .manual-address-fields,
#changeCardModal .manual-address-fields {
display: none;
}
.container.wpaccess .qas-result,
#billing-address-form .qas-result,
#shipping-address-form .qas-result,
#changeCardModal .qas-result {
display: none;
}
.container.wpaccess ul.qas-list,
#billing-address-form ul.qas-list,
#shipping-address-form ul.qas-list,
#changeCardModal ul.qas-list {
max-height: 137px;
margin: 0;
margin-bottom: 8px;
border: 1px solid #d1d1d1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container.wpaccess ul.qas-list li,
#billing-address-form ul.qas-list li,
#shipping-address-form ul.qas-list li,
#changeCardModal ul.qas-list li {
padding: 4px 6px;
-webkit-transition: background 200ms;
transition: background 200ms;
cursor: pointer;
}
.container.wpaccess ul.qas-list li:hover,
#billing-address-form ul.qas-list li:hover,
#shipping-address-form ul.qas-list li:hover,
#changeCardModal ul.qas-list li:hover {
background: #eee;
}
.container.wpaccess .lookup-spinner,
#billing-address-form .lookup-spinner,
#shipping-address-form .lookup-spinner,
#changeCardModal .lookup-spinner {
display: none;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 44px;
}
.container.wpaccess .qas-error, .container.wpaccess .qas-service-error,
#billing-address-form .qas-error,
#billing-address-form .qas-service-error,
#shipping-address-form .qas-error,
#shipping-address-form .qas-service-error,
#changeCardModal .qas-error,
#changeCardModal .qas-service-error {
display: none;
}
.container.wpaccess .addcard-label,
#billing-address-form .addcard-label,
#shipping-address-form .addcard-label,
#changeCardModal .addcard-label {
position: relative;
float: left;
min-height: 1px;
width: 120px;
clear: both;
}
@media only screen and (max-width: 640px) {
.container.wpaccess .addcard-label,
#billing-address-form .addcard-label,
#shipping-address-form .addcard-label,
#changeCardModal .addcard-label {
width: 100%;
}
}
.container.wpaccess .addcard-field,
#billing-address-form .addcard-field,
#shipping-address-form .addcard-field,
#changeCardModal .addcard-field {
position: relative;
float: left;
min-height: 1px;
width: calc(100% - 120px);
}
@media only screen and (max-width: 640px) {
.container.wpaccess .addcard-field,
#billing-address-form .addcard-field,
#shipping-address-form .addcard-field,
#changeCardModal .addcard-field {
width: 100%;
}
}
.container.wpaccess .addcard-half,
#billing-address-form .addcard-half,
#shipping-address-form .addcard-half,
#changeCardModal .addcard-half {
float: left;
padding-right: 20px;
}
@media only screen and (max-width: 640px) {
.container.wpaccess .addcard-half,
#billing-address-form .addcard-half,
#shipping-address-form .addcard-half,
#changeCardModal .addcard-half {
width: 50%;
padding-right: 10px;
}
}
.container.wpaccess .addcard-half .addcard-field,
#billing-address-form .addcard-half .addcard-field,
#shipping-address-form .addcard-half .addcard-field,
#changeCardModal .addcard-half .addcard-field {
width: 95px;
}
.container.wpaccess .addcard-half + .addcard-half .addcard-field,
#billing-address-form .addcard-half + .addcard-half .addcard-field,
#shipping-address-form .addcard-half + .addcard-half .addcard-field,
#changeCardModal .addcard-half + .addcard-half .addcard-field {
width: 80px;
}
@media only screen and (min-width: 641px) {
.container.wpaccess .addcard-half + .addcard-half .addcard-label,
#billing-address-form .addcard-half + .addcard-half .addcard-label,
#shipping-address-form .addcard-half + .addcard-half .addcard-label,
#changeCardModal .addcard-half + .addcard-half .addcard-label {
padding: 0 10px;
text-align: right;
}
}
@media only screen and (max-width: 640px) {
.container.wpaccess .addcard-phone,
#billing-address-form .addcard-phone,
#shipping-address-form .addcard-phone,
#changeCardModal .addcard-phone {
width: 100%;
}
}
.container.wpaccess .addcard-phone .addcard-label,
#billing-address-form .addcard-phone .addcard-label,
#shipping-address-form .addcard-phone .addcard-label,
#changeCardModal .addcard-phone .addcard-label {
padding-right: 4px;
padding-top: 1px;
}
.container.wpaccess .addcard-phone .addcard-label label,
#billing-address-form .addcard-phone .addcard-label label,
#shipping-address-form .addcard-phone .addcard-label label,
#changeCardModal .addcard-phone .addcard-label label {
line-height: 1rem;
}
.container.wpaccess .addcard-phone .addcard-field,
#billing-address-form .addcard-phone .addcard-field,
#shipping-address-form .addcard-phone .addcard-field,
#changeCardModal .addcard-phone .addcard-field {
width: 315px;
}
@media only screen and (max-width: 640px) {
.container.wpaccess .addcard-phone .addcard-field,
#billing-address-form .addcard-phone .addcard-field,
#shipping-address-form .addcard-phone .addcard-field,
#changeCardModal .addcard-phone .addcard-field {
width: 90%;
}
}
.container.wpaccess input, .container.wpaccess input:focus, .container.wpaccess select, .container.wpaccess .ws-select-outer,
#billing-address-form input,
#billing-address-form input:focus,
#billing-address-form select,
#billing-address-form .ws-select-outer,
#shipping-address-form input,
#shipping-address-form input:focus,
#shipping-address-form select,
#shipping-address-form .ws-select-outer,
#changeCardModal input,
#changeCardModal input:focus,
#changeCardModal select,
#changeCardModal .ws-select-outer {
width: 100%;
max-width: none;
box-shadow: none;
border-width: 2px;
font-size: 16px !important;
font-family: sans-serif;
margin-bottom: 10px;
}
.container.wpaccess select.input-error,
#billing-address-form select.input-error,
#shipping-address-form select.input-error,
#changeCardModal select.input-error {
border-bottom-color: #B60303;
}
.container.wpaccess select.input-error + .trigger,
#billing-address-form select.input-error + .trigger,
#shipping-address-form select.input-error + .trigger,
#changeCardModal select.input-error + .trigger {
border-bottom-color: #B60303;
}
.container.wpaccess select.valid, .container.wpaccess select.is-valid,
#billing-address-form select.valid,
#billing-address-form select.is-valid,
#shipping-address-form select.valid,
#shipping-address-form select.is-valid,
#changeCardModal select.valid,
#changeCardModal select.is-valid {
border-bottom-color: #008000;
}
.container.wpaccess select.valid + .trigger, .container.wpaccess select.is-valid + .trigger,
#billing-address-form select.valid + .trigger,
#billing-address-form select.is-valid + .trigger,
#shipping-address-form select.valid + .trigger,
#shipping-address-form select.is-valid + .trigger,
#changeCardModal select.valid + .trigger,
#changeCardModal select.is-valid + .trigger {
border-bottom-color: #008000;
}
.container.wpaccess .field,
#billing-address-form .field,
#shipping-address-form .field,
#changeCardModal .field {
width: 100%;
margin-bottom: 10px;
height: 40px;
border: 2px solid #d1d1d1;
transition: border-color 0.25s ease-in-out;
padding-left: 10px;
}
.container.wpaccess .field::placeholder,
#billing-address-form .field::placeholder,
#shipping-address-form .field::placeholder,
#changeCardModal .field::placeholder {
color: #757575 !important;
}
.container.wpaccess .trigger,
#billing-address-form .trigger,
#shipping-address-form .trigger,
#changeCardModal .trigger {
padding-left: 10px;
border-width: 2px;
}
.container.wpaccess .postcode-lookup-button,
#billing-address-form .postcode-lookup-button,
#shipping-address-form .postcode-lookup-button,
#changeCardModal .postcode-lookup-button {
margin-bottom: 10px;
font-size: 18px;
}
.container.wpaccess label.input-error,
#billing-address-form label.input-error,
#shipping-address-form label.input-error,
#changeCardModal label.input-error {
color: #B60303;
width: 100%;
float: left;
font-size: 0.75rem;
font-weight: 400;
line-height: 16px;
margin: -5px 0 15px;
font-style: italic;
}
.container.wpaccess .use-delivery,
#billing-address-form .use-delivery,
#shipping-address-form .use-delivery,
#changeCardModal .use-delivery {
margin-bottom: 10px;
float: left;
width: 100%;
}
.container.wpaccess #addressId,
#billing-address-form #addressId,
#shipping-address-form #addressId,
#changeCardModal #addressId {
margin-top: 10px;
}
.container.wpaccess #address-state,
.container.wpaccess #address4 + .fancy-select,
#billing-address-form #address-state,
#billing-address-form #address4 + .fancy-select,
#shipping-address-form #address-state,
#shipping-address-form #address4 + .fancy-select,
#changeCardModal #address-state,
#changeCardModal #address4 + .fancy-select {
display: none;
}
.container.wpaccess #add-billing-address-btn,
#billing-address-form #add-billing-address-btn,
#shipping-address-form #add-billing-address-btn,
#changeCardModal #add-billing-address-btn {
float: left;
margin-left: 0;
margin-bottom: 10px;
}
.container.wpaccess .side-button,
#billing-address-form .side-button,
#shipping-address-form .side-button,
#changeCardModal .side-button {
position: relative;
margin-left: 5px;
float: right;
}
.container.wpaccess #select-existing-address-btn,
#billing-address-form #select-existing-address-btn,
#shipping-address-form #select-existing-address-btn,
#changeCardModal #select-existing-address-btn {
clear: both;
color: #336b75;
margin-bottom: 10px;
cursor: pointer;
}
.container.wpaccess #select-existing-address-btn span,
#billing-address-form #select-existing-address-btn span,
#shipping-address-form #select-existing-address-btn span,
#changeCardModal #select-existing-address-btn span {
text-decoration: underline;
}
.container.wpaccess .input-wrapper,
#billing-address-form .input-wrapper,
#shipping-address-form .input-wrapper,
#changeCardModal .input-wrapper {
display: block;
overflow: hidden;
}
#changeCardModal .addcard-phone .addcard-label {
width: auto;
}
@media only screen and (max-width: 640px) {
.panel-content-payment .addcard-phone .addcard-label {
width: 100%;
}
}
.theme-foyles .panel-content-payment .addcard-phone .addcard-label label {
padding-top: 0;
}
@media only screen and (max-width: 640px) {
.theme-foyles .panel-content-payment .addcard-phone .addcard-label label {
padding-top: 10px;
}
}
.panel-saved-cards-options {
top: 15px !important;
}
@media only screen and (max-width: 640px) {
.panel-saved-cards-options {
top: 5px !important;
}
}
/* Tooltips */
.cvv-tooltip,
.phone-tooltip {
float: left;
}
.cvv-tooltip .ico-tooltip,
.phone-tooltip .ico-tooltip {
position: relative;
top: 10px;
left: 8px;
}
.phone-tooltip .tooltip {
line-height: 14px;
}
@media only screen and (max-width: 640px) {
.panel-content-payment .phone-tooltip .tooltip {
left: -40px;
}
.panel-content-payment .phone-tooltip .tooltip:before, .panel-content-payment .phone-tooltip .tooltip:after {
left: calc(50% + 40px);
}
}
.tooltip.tooltip-security:not(.hcg) {
width: 400px;
padding: 10px 24px 20px;
right: 0;
margin-right: -41px;
line-height: 1.6;
}
@media only screen and (max-width: 640px) {
.tooltip.tooltip-security:not(.hcg) {
width: 300px !important;
padding: 10px 22px 16px;
margin-right: -45px;
}
}
.tooltip.tooltip-security:not(.hcg):before, .tooltip.tooltip-security:not(.hcg):after {
right: 38px;
left: auto;
}
@media only screen and (max-width: 640px) {
.tooltip.tooltip-security:not(.hcg):before, .tooltip.tooltip-security:not(.hcg):after {
right: 43px;
}
}
.tooltip.tooltip-security:not(.hcg):before {
margin-right: 0px;
}
.tooltip.tooltip-security:not(.hcg):after {
margin-right: -2px;
}
.tooltip.tooltip-security:not(.hcg) .tooltip-msg {
padding-bottom: 10px;
}
.tooltip.tooltip-security:not(.hcg) .columns {
font-size: 12px;
}
.tooltip.tooltip-security:not(.hcg) img {
width: 80%;
}
.tooltip-msg {
font-size: 0.94rem;
}
.mobile-tooltip-close {
display: none;
}
@media only screen and (max-width: 640px) {
.mobile-tooltip-close {
display: block;
position: absolute;
top: 4px;
right: 2px;
background-image: url(../img/Cross_G.png);
background-size: cover;
background-position: center;
width: 30px;
height: 30px;
}
}
.touch .mobile-tooltip-close {
display: block;
}
/** Footer newsletter sign up panel **/
/*
CSS for egift-cards
*/
@supports selector(:has(*)) {
.row:has(.egift-product) {
display: flex;
flex-flow: row wrap;
}
.row:has(.egift-product) .egift-product .egift-info .info-title {
height: auto;
}
}
.egift-product {
display: flex;
flex-direction: column;
white-space: normal;
float: left;
width: 25%;
margin-bottom: 40px;
padding: 0 12px;
}
@media (max-width: 640px) {
.egift-product {
width: 50%;
margin-bottom: 30px !important;
padding: 0 5px !important;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.egift-product {
width: 33.3333333333%;
padding: 0 5px;
}
}
.egift-product .egift {
width: 100%;
max-width: 380px;
margin: 0 auto;
padding-top: 65%;
}
@media (max-width: 768px) {
.egift-product .egift {
width: 95%;
}
}
.egift-product .egift img {
transform: translateY(-51%);
left: 1.3%;
}
.egift-product .egift-info {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
}
.egift-product .egift-info .info-title {
display: block;
margin-bottom: 12px;
font-family: Baskerville, serif;
font-size: 22px;
line-height: 24px;
text-decoration: none;
}
@media (max-height: 850px) {
.egift-product .egift-info .info-title {
height: 48px;
}
}
.egift-product .egift-info .info-price {
margin-bottom: 6px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 600;
font-size: 16px;
}
.egift-product .egift-info .egift-select {
background-color: #336b75;
color: #fff;
font-weight: normal;
font-size: 18px;
margin-top: 10px;
}
@media (max-width: 360px) {
.egift-product .egift-info .egift-select {
padding: 0 5px;
}
}
.egift,
.physical {
position: relative;
padding-top: 100%;
}
.egift:before,
.physical:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 99%;
height: 100%;
background: url("../img/card-shadow.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.egift img,
.physical img {
width: 96%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1.6%;
}
.egift_slider,
.physical_slider {
margin: 0 40px 10px;
}
.egift_slider .egift_slider_feature,
.egift_slider .physical_slider_feature,
.physical_slider .egift_slider_feature,
.physical_slider .physical_slider_feature {
margin: 0;
}
.egift_slider .egift_slider_feature .slick-slide,
.egift_slider .physical_slider_feature .slick-slide,
.physical_slider .egift_slider_feature .slick-slide,
.physical_slider .physical_slider_feature .slick-slide {
outline: none;
padding: 20px;
}
.egift_slider .egift_slider_feature .egift,
.egift_slider .egift_slider_feature .physical,
.egift_slider .physical_slider_feature .egift,
.egift_slider .physical_slider_feature .physical,
.physical_slider .egift_slider_feature .egift,
.physical_slider .egift_slider_feature .physical,
.physical_slider .physical_slider_feature .egift,
.physical_slider .physical_slider_feature .physical {
opacity: 0;
padding-top: 90%;
}
.egift_slider .egift_slider_feature.slick-initialized .egift,
.egift_slider .egift_slider_feature.slick-initialized .physical,
.egift_slider .physical_slider_feature.slick-initialized .egift,
.egift_slider .physical_slider_feature.slick-initialized .physical,
.physical_slider .egift_slider_feature.slick-initialized .egift,
.physical_slider .egift_slider_feature.slick-initialized .physical,
.physical_slider .physical_slider_feature.slick-initialized .egift,
.physical_slider .physical_slider_feature.slick-initialized .physical {
opacity: 1;
}
@media (max-width: 640px) {
.egift_slider .egift_slider_feature .egift,
.egift_slider .egift_slider_feature .physical,
.egift_slider .physical_slider_feature .egift,
.egift_slider .physical_slider_feature .physical,
.physical_slider .egift_slider_feature .egift,
.physical_slider .egift_slider_feature .physical,
.physical_slider .physical_slider_feature .egift,
.physical_slider .physical_slider_feature .physical {
padding-top: 60%;
}
}
.egift_slider .egift_slider_nav,
.egift_slider .physical_slider_nav,
.physical_slider .egift_slider_nav,
.physical_slider .physical_slider_nav {
width: calc(90% - 30px);
margin: auto;
}
.egift_slider .egift_slider_nav .slick-slide,
.egift_slider .physical_slider_nav .slick-slide,
.physical_slider .egift_slider_nav .slick-slide,
.physical_slider .physical_slider_nav .slick-slide {
border: 1px solid #ccc;
margin: 5px;
padding: 5px;
outline: none;
}
.egift_slider .egift_slider_nav .slick-prev, .egift_slider .egift_slider_nav .slick-next,
.egift_slider .physical_slider_nav .slick-prev,
.egift_slider .physical_slider_nav .slick-next,
.physical_slider .egift_slider_nav .slick-prev,
.physical_slider .egift_slider_nav .slick-next,
.physical_slider .physical_slider_nav .slick-prev,
.physical_slider .physical_slider_nav .slick-next {
top: calc(50% - 13px);
}
.egift_slider .egift_slider_nav .slick-prev:before, .egift_slider .egift_slider_nav .slick-next:before,
.egift_slider .physical_slider_nav .slick-prev:before,
.egift_slider .physical_slider_nav .slick-next:before,
.physical_slider .egift_slider_nav .slick-prev:before,
.physical_slider .egift_slider_nav .slick-next:before,
.physical_slider .physical_slider_nav .slick-prev:before,
.physical_slider .physical_slider_nav .slick-next:before {
font-family: "icomoon";
content: "\f105";
display: block;
line-height: 42px;
font-size: 28px;
color: #9F9D9D;
text-align: center;
}
.egift_slider .egift_slider_nav .slick-prev:before,
.egift_slider .physical_slider_nav .slick-prev:before,
.physical_slider .egift_slider_nav .slick-prev:before,
.physical_slider .physical_slider_nav .slick-prev:before {
content: "\f104";
}
.egift-buy .breadcrumbs {
margin: 0;
margin-bottom: 18px;
}
.egifts-form {
border: 1px solid #9e866b;
padding: 15px 15px 25px;
font-size: 18px;
font-weight: 400;
}
@media (max-width: 640px) {
.egifts-form {
padding: 5px 0 15px;
}
}
.egifts-form .egifts-form-error {
width: calc(100% - 20px);
margin: 0 auto 5px auto;
background-color: #ffdede;
color: #b60303;
text-align: center;
font-size: 14px;
padding: 8px;
}
.egifts-form .box {
padding-left: 30px;
position: relative;
}
.egifts-form .box:before {
content: "";
border-radius: 50%;
border: 1px solid #2a6570;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
}
.egifts-form input[type=radio]:checked + .box:after {
content: "";
border-radius: 50%;
background: #2a6570;
position: absolute;
width: 10px;
height: 10px;
top: 6px;
left: 6px;
}
.egifts-form .select-cardtype {
margin: 10px 0 19px;
}
@media (max-width: 640px) {
.egifts-form .select-cardtype {
margin-bottom: 0;
}
}
.egifts-form .select-cardtype input[type=radio] {
display: none;
}
.egifts-form .select-cardtype label {
height: 100%;
margin: 0;
}
@media (max-width: 640px) {
.egifts-form .select-cardtype label {
margin-bottom: 12px;
}
}
.egifts-form .select-cardtype .box {
background: #e0e9ed;
padding: 43px 10px 20px;
border: 2px solid #e0e9ed;
font-size: 15px;
text-align: center;
}
@media (min-width: 641px) and (max-width: 768px) {
.egifts-form .select-cardtype .box {
padding: 23px 15px 10px;
font-size: 13px;
}
}
@media (max-width: 640px) {
.egifts-form .select-cardtype .box {
padding: 10px 15px;
text-align: left;
}
}
.egifts-form .select-cardtype .box:before {
top: 23px;
left: calc(50% - 11px);
}
@media (min-width: 641px) and (max-width: 768px) {
.egifts-form .select-cardtype .box:before {
width: 12px;
height: 12px;
top: 10px;
left: calc(50% - 6px);
}
}
@media (max-width: 640px) {
.egifts-form .select-cardtype .box:before {
top: 15px;
right: 15px;
left: auto;
}
}
.egifts-form .select-cardtype .box img {
position: relative;
height: 45px;
display: block;
margin: 15px auto;
}
@media (min-width: 641px) and (max-width: 768px) {
.egifts-form .select-cardtype .box img {
height: 22px;
margin: 10px auto;
}
}
@media (max-width: 640px) {
.egifts-form .select-cardtype .box img {
height: 30px;
display: inline-block;
margin: 0;
margin-right: 10px;
vertical-align: middle;
}
.egifts-form .select-cardtype .box img.deliver {
margin-left: -8px;
}
.egifts-form .select-cardtype .box img.email {
top: -3px;
}
.egifts-form .select-cardtype .box img.print {
margin-right: 14px;
}
}
.egifts-form .select-cardtype input[type=radio]:checked + .box {
border-color: #2a6570;
}
.egifts-form .select-cardtype input[type=radio]:checked + .box:after {
top: 29px;
left: calc(50% - 5px);
}
@media (min-width: 641px) and (max-width: 768px) {
.egifts-form .select-cardtype input[type=radio]:checked + .box:after {
width: 6px;
height: 6px;
top: 14px;
left: calc(50% - 2px);
}
}
@media (max-width: 640px) {
.egifts-form .select-cardtype input[type=radio]:checked + .box:after {
top: 21px;
right: 21px;
left: auto;
}
}
.egifts-form .select-cardtype .disabled label {
color: #fff;
background-color: #d8d8d8;
}
.egifts-form .select-cardtype .disabled .box {
border-color: #d8d8d8;
}
.egifts-form .select-cardtype .disabled .box:before {
border-color: #fff;
}
.egifts-form .select-cardtype .disabled input[type=radio]:checked + .box {
border-color: #d8d8d8;
}
.egifts-form .select-cardtype .disabled input[type=radio]:checked + .box:after {
background-color: #fff;
}
.egifts-form .physical-details {
float: left;
width: 100%;
}
.egifts-form label.error {
margin-top: -8px;
margin-bottom: 10px;
}
.egifts-form .ws-select-outer.ws-select-white select.error + .trigger {
border: 2px solid #df3f3f;
}
@media (max-width: 640px) {
.egifts-form select,
.egifts-form select:focus,
.egifts-form .fancy-select.ws-select-large {
font-size: 16px !important;
}
}
.egifts-form .egift-show-print {
display: none;
}
.egifts-form .egift-show-print p {
font-size: 14px;
margin-top: 0;
}
.egifts-form .design-select-surround {
position: relative;
margin-top: 10px;
}
.egifts-form .design-select-surround .error-wrap {
display: flex;
justify-content: flex-end;
margin: 0 10px 10px;
}
@media (max-width: 800px) {
.egifts-form .design-select-surround .error-wrap {
justify-content: space-around;
margin: 0;
}
}
.egifts-form .design-select-surround .error-wrap.display-none {
display: none;
}
.egifts-form .design-select-surround .error-wrap .egifts-form-error {
max-width: calc(58.33333% - 8px);
margin: 0;
}
@media (max-width: 800px) {
.egifts-form .design-select-surround .error-wrap .egifts-form-error {
max-width: 100%;
}
}
.egifts-form .design-select-surround .design-select-overlay {
position: absolute;
top: -1px;
left: 11px;
width: calc(100% - 20px);
border: 2px solid #336b75;
background: #fff;
z-index: 1;
line-height: 40px;
display: none;
}
@media (max-width: 768px) {
.egifts-form .design-select-surround .design-select-overlay {
top: 34px;
}
}
.egifts-form .design-select-surround .design-select-overlay.open {
display: block;
}
.egifts-form .design-select-surround .design-select-overlay .design-options {
display: flex;
flex-wrap: wrap;
max-height: 350px;
overflow-y: auto;
}
.egifts-form .design-select-surround .design-select-overlay .design-options > div {
width: 33%;
padding: 10px;
text-align: center;
cursor: pointer;
}
@media (max-width: 1023px) {
.egifts-form .design-select-surround .design-select-overlay .design-options > div {
width: 50%;
}
}
.egifts-form .design-select-surround .design-select-overlay .design-options > div img {
float: left;
}
.egifts-form .design-select-surround .design-select-overlay .design-options > div .design-label {
line-height: 20px;
padding-top: 10px;
clear: both;
}
.egifts-form .design-select-surround .selected-design {
padding: 1px 35px 1px 63px;
background-repeat: no-repeat;
background-size: 43px;
background-position: 10px center;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
cursor: pointer;
}
.egifts-form .design-select-surround .selected-design:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #4B5468;
top: 18px;
right: 16px;
}
.egifts-form .design-select-surround .selected-design.design-selector {
font-size: 15px;
font-weight: 300;
line-height: 40px;
min-height: 44px;
position: relative;
border: 1px solid #d1d1d1;
text-overflow: ellipsis;
cursor: pointer;
}
@media (max-width: 640px) {
.egifts-form .design-select-surround .selected-design.design-selector {
font-size: 16px;
}
}
.egifts-form .design-select-surround .selected-design.design-selector + select {
display: none;
}
.egifts-form .design-select-surround .selected-design.unselected {
padding-left: 12px;
}
.egifts-form .personalisation {
display: flex;
clear: both;
margin-bottom: 10px;
}
.egifts-form .personalisation .pers-message {
height: 100%;
display: flex;
flex-direction: column;
}
.egifts-form .personalisation .pers-message textarea {
height: 100% !important;
margin-bottom: 10px;
padding: 10px;
font-size: 15px;
}
.egifts-form .personalisation .counter {
text-align: right;
font-size: 16px;
}
@media (max-width: 768px) {
.egifts-form .personalisation {
display: block;
}
.egifts-form .personalisation .pers-message textarea {
height: 100px !important;
}
}
.egifts-form .egift-sendwhen input {
padding-left: 50px !important;
background-image: url(../img/ui/cal.png);
background-repeat: no-repeat;
background-size: 28px;
background-position: 10px center;
}
.egifts-form .egift-sendwhen input[type=radio] {
display: none;
}
.egifts-form .egift-sendwhen label span {
display: block;
}
.egifts-form .egift-sendwhen label span:nth-child(2) {
font-size: 14px;
}
.egifts-form .egift-sendwhen .date-fields {
margin-top: 10px;
}
.egifts-form .egift-sendwhen .time-pickers {
display: flex;
}
.egifts-form .physical-details-unavailable {
padding: 20px 10px 50px;
font-size: 15px;
text-align: center;
}
.egifts-form .physical-details-unavailable p {
margin: 0;
}
.egifts-form .physical-details-unavailable p #egift-select {
text-decoration: underline;
cursor: pointer;
}
.egifts-form .physical-details-unavailable p #egift-select:hover {
text-decoration: none;
}
.egifts-form .egift-buttons {
margin-top: 20px;
}
.egifts-form .egift-buttons .button:nth-child(1) {
margin-left: 10px;
}
@media (max-width: 640px) {
.egifts-form .egift-buttons .button {
width: 100%;
font-size: 15px;
padding: 0px 11px;
}
}
.egifts-form .input, .egifts-form select, .egifts-form textarea {
width: 100%;
}
.ui-datepicker {
width: 300px;
font-weight: normal;
}
.ui-datepicker .ui-datepicker-header {
margin: 8px 8px 2px;
border: 1px solid #9e866b;
border-width: 1px 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
top: 2px;
right: 2px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
background: url(../img/ui/chevron_black.png) no-repeat center;
background-size: contain;
width: 11px;
height: 16px;
display: inline-block;
text-indent: 9999px;
overflow: hidden;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
left: 2px;
right: auto;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
transform: rotate(180deg);
}
.ui-datepicker .ui-datepicker-calendar {
border-spacing: 8px;
border-collapse: separate;
}
.ui-datepicker .ui-datepicker-calendar th {
font-weight: normal;
}
.ui-datepicker .ui-datepicker-calendar td {
border: solid 1px #9e866b;
width: 30px;
height: 32px;
color: #000000;
font-size: 14px;
}
.ui-datepicker .ui-datepicker-calendar td:hover, .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day {
background-color: #000;
color: #fff;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable, .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable:hover {
background-color: #d8d8d8;
color: transparent;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month, .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month:hover {
background-color: #fff;
color: transparent;
}
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span {
text-align: center;
}
button#egift_submit:disabled {
background-color: #d8d8d8;
}
a#egift_cancel_changes.disabled {
pointer-events: none;
background-color: #d8d8d8;
}
#how-it-works {
margin-top: 50px;
}
@media (max-width: 640px) {
#how-it-works {
margin-top: 20px;
}
}
#how-it-works .accordionItem .heading-baskerville {
border: none;
border-bottom: 1px solid #ccc;
padding: 0;
font-size: 28px;
font-style: normal;
line-height: 40px;
}
@media (max-width: 640px) {
#how-it-works .accordionItem .heading-baskerville {
border: 1px solid #ccc;
padding: 0 55px 0 22px;
font-size: 22px;
}
}
#how-it-works .accordionItem span:not(.trigger)::before {
display: none;
}
#how-it-works .accordionItem .tab {
padding: 15px 25px 3px;
border: 1px solid #ccc;
border-bottom: 2px solid #fff;
}
@media (max-width: 640px) {
#how-it-works .accordionItem .tab {
padding: 0;
border: none;
}
}
#how-it-works .accordionItem .trigger {
display: none;
}
@media (max-width: 640px) {
#how-it-works .accordionItem .trigger {
display: initial;
}
}
@media (max-width: 640px) {
#how-it-works .accordionItem .accordionContent {
padding: 10px 1px 0;
border: none;
}
}
#how-it-works .two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 44px;
-moz-column-gap: 44px;
column-gap: 44px;
font-size: 17px;
line-height: 25px;
padding: 10px 20px;
}
@media (max-width: 640px) {
#how-it-works .two-columns {
-webkit-column-count: initial;
-moz-column-count: initial;
column-count: initial;
padding: 0;
}
}
#how-it-works .two-columns p:first-child {
margin-top: 0;
}
#how-it-works .two-columns strong {
font-weight: 400;
}
#how-it-works .two-columns table {
width: 100%;
break-inside: avoid;
margin-bottom: 15px;
}
#how-it-works .two-columns table td {
padding: 0 5px;
}
#how-it-works .two-columns table td strong {
font-weight: bold;
color: #5c5c5c;
}
#how-it-works .two-columns table td img {
width: auto;
height: 15px;
}
.downloaded-message {
display: none;
font-size: 18px;
color: #336b75;
width: 100%;
float: left;
margin-top: 6px;
margin-bottom: 20px;
}
.downloaded-message a {
cursor: pointer;
white-space: nowrap;
}
.order-info .info [id^=order-recipient-email] {
word-break: break-word;
}
.order-info .info-and-buttons-wrap {
display: flex;
}
@media (max-width: 768px) {
.order-info .info-and-buttons-wrap {
flex-direction: column;
}
}
.order-info .info-and-buttons-wrap .order-info-wrap {
flex: 1;
}
.order-info .info-and-buttons-wrap .egift-buttons-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 290px;
}
.order-info .info-and-buttons-wrap .egift-buttons-wrap > * {
margin-bottom: 10px;
}
@media (max-width: 768px) {
.order-info .info-and-buttons-wrap .egift-buttons-wrap {
width: 100%;
}
.order-info .info-and-buttons-wrap .egift-buttons-wrap > * {
width: 100% !important;
}
}
.order-info .info-and-buttons-wrap .button.button-egift.disabled {
background-color: #cbcbcb;
}
.order-info .info-and-buttons-wrap .button.egift-edit {
width: 100px;
}
.order-info .info-and-buttons-wrap .button.download-egift {
width: 270px;
height: 35px;
text-transform: none;
}
.order-info .info-and-buttons-wrap .button.download-egift:after {
content: "";
display: none;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.order-info .info-and-buttons-wrap .button.download-egift.downloading {
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.order-info .info-and-buttons-wrap .button.download-egift.downloading:after {
animation: spin 1.5s infinite linear;
display: block;
background-image: url("../img/ui/loading-wheel-white.png");
}
.order-info .info-and-buttons-wrap .button.download-egift.download-complete:after {
display: inline-block;
background-image: url(../img/icons-check-white.png);
width: 16px;
height: 16px;
margin-left: 6px;
}
.order-info .info-and-buttons-wrap .button.download-egift.download-complete + .downloaded-message {
font-size: 15px;
font-weight: 400;
text-align: right;
}
.egift-submitted {
display: none;
margin: 20px 0 10px;
}
.egift-submitted .button {
margin: 10px;
}
@media (max-width: 930px) {
.egift-submitted .button {
width: 100%;
margin: 10px 0;
}
}
[id^=egiftModal] .hide {
display: none;
}
[id^=egiftModal] header {
background-color: #2a6570;
}
[id^=egiftModal] .modal-body {
padding: 25px;
font-size: 18px;
}
[id^=egiftModal] .modal-body .egift-form-error {
margin: 0 0 10px;
padding: 8px;
background-color: #ffdede;
color: #b60303;
text-align: center;
font-size: 14px;
}
[id^=egiftModal] .modal-body form {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
[id^=egiftModal] .modal-body form div,
[id^=egiftModal] .modal-body form label,
[id^=egiftModal] .modal-body form textarea {
width: 100%;
}
[id^=egiftModal] .modal-body form input,
[id^=egiftModal] .modal-body form input:focus,
[id^=egiftModal] .modal-body form textarea,
[id^=egiftModal] .modal-body form .ws-select-large,
[id^=egiftModal] .modal-body form input.input-error {
font-size: 18px;
}
[id^=egiftModal] .modal-body form .counter {
text-align: right;
font-size: 16px;
}
[id^=egiftModal] .modal-body form .counter span {
font-size: inherit;
}
[id^=egiftModal] .modal-body form .email-wrapper {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
[id^=egiftModal] .modal-body form .email-wrapper.hide {
display: none;
}
[id^=egiftModal] .modal-body form .email-wrapper .email {
width: 49%;
}
@media (max-width: 640px) {
[id^=egiftModal] .modal-body form .email-wrapper .email {
width: 100%;
}
}
[id^=egiftModal] .modal-body form .email-wrapper .email input {
width: 100%;
}
[id^=egiftModal] .modal-body form .email-wrapper .email input {
width: 100%;
}
[id^=egiftModal] .modal-body form .email-wrapper .email-disabled {
font-style: italic;
}
[id^=egiftModal] .modal-body form textarea {
resize: none;
}
[id^=egiftModal] .modal-body form span {
font-size: 14px;
}
[id^=egiftModal] .modal-body form input[name=egift-recipient-name], [id^=egiftModal] .modal-body form input[name=egift-printed-name] {
width: 100%;
}
[id^=egiftModal] .modal-body form .egift-delivery {
margin-top: 10px;
}
[id^=egiftModal] .modal-body form .egift-delivery > div {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.radio-item .radio-select {
padding-left: 30px;
position: relative;
margin-top: 0;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.radio-item .radio-select:before {
content: "";
border-radius: 50%;
border: 1px solid #2a6570;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
}
@media (max-width: 640px) {
[id^=egiftModal] .modal-body form .egift-delivery > div.radio-item .radio-select span {
display: inline-block;
line-height: 14px;
padding-top: 3px;
}
}
[id^=egiftModal] .modal-body form .egift-delivery > div.radio-item input[type=radio]:checked + .radio-select:after {
content: "";
border-radius: 50%;
background: #2a6570;
position: absolute;
width: 10px;
height: 10px;
top: 6px;
left: 6px;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker {
display: flex;
flex-flow: row nowrap;
}
@media (max-width: 768px) {
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker {
flex-flow: row wrap;
}
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker > div {
width: 49%;
}
@media (max-width: 768px) {
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker > div {
width: 100%;
}
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker input {
width: 100%;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker input.egift-schedule-date-picker {
padding-left: 50px !important;
background-image: url(../img/ui/cal.png);
background-repeat: no-repeat;
background-size: 28px;
background-position: 10px center;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker .ws-select-outer.ws-select-large {
max-width: 24%;
display: inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker .ws-select-outer.ws-select-large {
max-width: 49%;
}
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker .fancy-select ul.options {
top: auto;
bottom: 100%;
}
[id^=egiftModal] .modal-body form .egift-delivery > div.date-picker .fancy-select ul.options + label {
display: inline-block;
}
[id^=egiftModal] .modal-body form .save-egift {
margin-top: 20px;
}
@media (max-width: 640px) {
[id^=egiftModal] .modal-body form .save-egift {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
[id^=egiftModal] .modal-body form .save-egift .button {
width: 49%;
margin: 0 !important;
}
}
[id^=egiftModal] .modal-body form .button-inverted {
background-color: #e0e9ed;
color: #2a6570;
outline: 1px solid #2a6570;
outline-offset: -1px;
}
[id^=egiftModal] .modal-body form[id^=egift-form-resend] button {
margin-top: 10px !important;
}
.egift-landing {
font-weight: normal;
display: flex;
background: #F5F8F9;
padding: 40px;
}
@media (max-width: 640px) {
.egift-landing {
flex-direction: column;
padding: 0 10px;
}
.egift-landing .egift-redeem {
order: 2;
}
}
.egift-landing h1 {
font-weight: 600;
font-size: 38px;
margin-bottom: 0;
margin-top: 10px;
}
.egift-landing h2 {
font-style: normal;
font-size: 24px;
margin-top: 0;
}
.egift-landing .egift-design {
padding: 0 6% 0 14%;
}
@media (max-width: 640px) {
.egift-landing .egift-design {
padding: 0 10% 0 24%;
}
}
.egift-landing .egift-design .egift-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url("../img/egift-overlay.png");
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
}
.egift-landing .egift-redeem input + .button {
background-image: url("../img/ui/chevron_white_right.png");
background-repeat: no-repeat;
background-size: 22px;
background-position: center;
}
.egift-landing .pre-validate {
font-weight: 300;
}
.egift-landing .pre-validate .button-group {
display: flex;
}
.egift-landing .pre-validate .button-group > * {
margin-bottom: 10px;
}
.egift-landing .pre-validate .button-group input:not(.button) {
width: 230px;
font-size: 18px;
}
.egift-landing .post-validate {
display: none;
}
.egift-landing .post-validate .egift-message,
.egift-landing .post-validate .egift-balance {
font-family: Baskerville, serif;
font-weight: bold;
font-size: 16px;
}
.egift-landing .post-validate .egift-message {
white-space: pre-wrap;
}
.egift-landing .post-validate .egift-balance {
border: 2px solid #000;
border-width: 2px 0;
padding: 8px 16px;
float: left;
margin: 15px 0;
font-size: 20px;
width: 100%;
}
.egift-landing .post-validate .egift-details {
clear: both;
font-size: 18px;
}
.egift-landing .post-validate .egift-download-icon {
width: 18px;
height: 18px;
background-image: url(../img/egift-recipient-download.png);
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
vertical-align: text-top;
margin-top: 1px;
margin-left: 2px;
}
.egift-landing .post-validate .egift-download {
margin: 15px 0;
font-size: 15px;
}
.egift-landing .post-validate .egift-download .pdf_download.button {
width: 290px;
text-transform: none;
}
.egift-landing .post-validate .egift-download .pdf_download.button .egift-download-icon {
display: none;
}
.egift-landing .post-validate .egift-download.waiting .pdf_download.button .egift-download-icon {
display: inline-block;
}
.egift-landing .post-validate .egift-download.waiting .pdf_download.button .egift-download-icon:after {
animation: spin 1.5s infinite linear;
content: "";
width: 18px;
height: 18px;
display: block;
margin-top: 1px;
margin-left: 5px;
background-image: url(../img/ui/loading-wheel-white.png);
background-size: contain;
background-repeat: no-repeat;
}
.egift-landing .post-validate .egift-download.download-complete .pdf_download.button .egift-download-icon {
display: inline-block;
}
.egift-landing .post-validate .egift-download.download-complete .pdf_download.button .egift-download-icon:after {
content: "";
width: 18px;
height: 18px;
display: block;
margin-top: 1px;
margin-left: 5px;
background-image: url(../img/icons-check-white.png);
background-size: contain;
background-repeat: no-repeat;
}
.egift-landing .post-validate .save-egift-message {
margin-top: 30px;
font-size: 18px;
}
.egift-landing .post-validate .save-egift-message > * {
margin: 0 0 10px;
}
.egift-landing .post-validate .save-egift-message a {
color: #336b75;
cursor: pointer;
}
.egift-landing .post-validate .save-egift-message h5 {
font-style: normal;
font-weight: bold;
font-size: 20px;
}
.egift-landing .post-validate .save-egift-message ul li {
list-style: none;
padding-left: 18px;
background-image: url(../img/icons-check-teal.png);
background-repeat: no-repeat;
background-size: 20px;
padding: 0px 0 10px 35px;
font-size: 14px;
}
.egift-landing .info-error {
float: left;
}
.egift-landing .info-error:empty {
display: none;
}
@media (max-width: 640px) {
.egift-landing-main {
background: #F5F8F9;
}
.egift-landing-main .egift-landing .egift {
padding-top: 70%;
}
.egift-landing-main .egift-landing .egift-design {
padding: 0 9% 0 8%;
}
.egift-landing-main .egift-landing .pdf_download.button {
width: 100% !important;
}
}
.egift-modal-success {
width: 350px;
height: 80px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
bottom: -300px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
transition: bottom 1s;
background: #646464;
border-radius: 20px 20px 0 0;
}
.egift-modal-success .tick {
width: 50px;
height: 50px;
}
.egift-modal-success .tick:after {
content: "\e60f";
font-family: "icomoon";
width: 100%;
height: 100%;
display: block;
color: #fff;
font-size: 32px;
text-align: center;
padding-top: 5px;
}
.egift-modal-success .message {
color: #fff;
font-size: 16px;
font-weight: 400;
}
/** Footer newsletter sign up panel **/
/*
CSS for the guest order details page:
/waterstones/httpdocs/application/modules/ecommerce/views/default/orderstatus/view.tpl
*/
.order-info-section.upgrade-account h2 {
margin-bottom: 0;
}
.order-info-section.plus .guest-upgrade-account {
padding: 0 25px 25px 15px;
background-color: #fffaea;
border: 2px solid #d3d3d3;
border-top: none;
}
.hide-for-basic {
display: none;
}
.upgrade-account.plus .hide-for-basic {
display: inline;
}
.upgrade-account.plus .hide-for-plus {
display: none;
}
.vieworder-intro .vieworder-intro-text {
font-family: "New Baskerville", Baskerville, serif;
font-size: 20px;
line-height: 25px;
padding: 10px 0;
-webkit-font-smoothing: antialiased;
}
.vieworder-intro .vieworder-intro-text.account-confirmed {
display: flex;
}
.vieworder-intro .vieworder-intro-text.account-confirmed:before {
content: "";
display: inline-block;
background-image: url("../img/icons-check.png");
background-size: contain;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
flex-shrink: 0;
}
.vieworder-intro .vieworder-intro-text.account-basic, .vieworder-intro .vieworder-intro-text.account-plus {
display: none;
}
.vieworder-intro .vieworder-intro-text span.small {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
display: block;
line-height: 22px;
margin-top: 5px;
}
.panel-choose-account .box {
position: relative;
margin: 0;
padding: 25px 25px 25px 95px;
border: 1px solid #5c5c5c;
font-size: 20px;
line-height: 25px;
color: #313131;
}
.panel-choose-account .box:not(:last-child) {
margin-bottom: 15px;
}
.panel-choose-account .box strong {
color: #313131;
font-weight: 500;
}
.panel-choose-account .box span {
font-size: 15px;
}
.panel-choose-account .box span.inline-plus {
font-size: 20px;
}
.panel-choose-account .box span:not(.inline-plus) {
display: block;
line-height: 22px;
}
@media (max-width: 940px) {
.panel-choose-account .box span:not(.inline-plus) {
margin-top: 6px;
}
}
.panel-choose-account .box:before {
content: "";
border-radius: 50%;
border: 2px solid #cfcfcf;
background-color: #e2e2e2;
position: absolute;
width: 40px;
height: 40px;
left: 28px;
top: 50%;
transform: translateY(-50%);
}
.panel-choose-account input[type=radio] {
display: none;
}
.panel-choose-account input[type=radio]:checked + .box:before {
border-color: #326b75;
background-color: #b2e4e0;
}
.panel-choose-account input[type=radio]:checked + .box:after {
content: "";
border-radius: 50%;
background-color: #3e3e3e;
position: absolute;
width: 20px;
height: 20px;
top: 40px;
left: 40px;
}
.panel-choose-account input[type=radio]#account-plus + .box {
background-color: #fffaea;
}
.payment-card-block {
border: 1px solid #d1d1d1;
}
.payment-card-block .block-content {
border-top: 1px solid #E8E8E8;
padding: 18px 20px;
}
.create-account-error {
color: #000;
background-color: #ffe8e8;
display: inline-block;
padding: 6px 12px;
margin-bottom: 10px;
width: 83%;
max-width: 840px;
}
@media only screen and (max-width: 800px) {
.create-account-error {
width: 100%;
}
}
.panel-created-confirmed {
display: none;
}
.panel-created-confirmed .button {
float: left !important;
width: 180px;
}
.upgrade-account.plus .panel-created-confirmed .button:first-of-type {
float: right !important;
}
.upgrade-account.plus .panel-created-confirmed .button:nth-of-type(2) {
display: none;
}
.panel-password-create {
display: none;
}
.guest-upgrade-account .ico-tooltip:not(.plus) {
width: 19px;
height: 19px;
margin: 0 !important;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 19px;
background-color: white;
border: 1px solid transparent;
}
.guest-upgrade-account .ico-tooltip:not(.plus) .tooltip {
height: max-content;
font-size: 14px;
font-weight: 300;
text-align: left;
}
.guest-upgrade-account .ico-tooltip:not(.plus) .tooltip img {
height: 100%;
margin: 20px 10px 0 0;
}
.guest-upgrade-account .ico-tooltip:not(.plus) .tooltip:before {
top: -17px;
right: 50%;
border-top: none;
border-bottom: 17px solid #336b75;
border-width: 17px;
margin-left: -13px;
}
.guest-upgrade-account .ico-tooltip:not(.plus) .tooltip:after {
top: -15.5px;
right: calc(50% + 3px);
border-top: none;
border-bottom: 16px solid #e0e9ed;
border-width: 16px;
}
.guest-upgrade-account .ico-tooltip.plus .tooltip {
background-color: #fff;
}
.guest-upgrade-account .ico-tooltip.plus .tooltip:before {
right: -10px;
}
.guest-upgrade-account .ico-tooltip.plus .tooltip:after {
right: -9px;
border-left-color: #fff;
}
#guest-create-account .span5 {
max-width: 430px;
}
#guest-create-account .password-field-wrap .ico-tooltip {
width: 100%;
height: 100%;
background-color: transparent;
}
#guest-create-account .password-field-wrap .ico-tooltip .tooltip {
width: max-content !important;
margin-left: 0;
padding: 12px;
top: 84px;
}
.upgrade-account.plus #guest-create-account .password-field-wrap .ico-tooltip .tooltip {
border-color: #87c37e;
background-color: #e7f6e5;
}
.upgrade-account.plus #guest-create-account .password-field-wrap .ico-tooltip .tooltip:before {
border-bottom-color: #87c37e;
}
.upgrade-account.plus #guest-create-account .password-field-wrap .ico-tooltip .tooltip:after {
border-bottom-color: #e7f6e5;
}
#guest-create-account label.input-error {
background-color: #FFDEDE;
color: #B60303;
font-family: "Source Sans Pro", Arial, sans-serif;
font-style: normal;
font-size: 0.75rem;
font-weight: 400;
padding: 4px 10px;
-webkit-font-smoothing: antialiased;
text-align: center;
}
#guest-create-account input {
border: 1px solid #336b75;
width: 100%;
font-size: 16px;
}
#guest-create-account .ws-checkable-outer {
margin: 4px 14px 4px 0;
flex-shrink: 0;
top: 0;
border: 2px solid #cacaca;
background-color: #e0e9ec;
}
#guest-create-account .checkbox-label {
justify-content: flex-start;
margin-top: 0;
padding-top: 0;
overflow: visible;
}
@media only screen and (max-width: 640px) {
#guest-create-account .checkbox-label {
align-items: center;
}
}
#guest-create-account .checkbox-label .label-content {
font-size: 14px;
font-weight: 300;
line-height: 16px;
-webkit-font-smoothing: antialiased;
overflow: visible;
}
#guest-create-account .checkbox-label .ws-checkable-outer {
margin: 8px 14px 8px 0;
}
.upgrade-account.plus #guest-create-account .checkbox-label .ws-checkable-outer {
background-color: #e7f5e6;
}
.upgrade-account.plus #guest-create-account .checkbox-label .ws-checkable-outer.checked:before {
color: #87c37e;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student {
align-items: center;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student .ws-checkable-outer {
background-color: #e3f2fa;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student .ws-checkable-outer.checked:before {
color: #83c6e3;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip {
position: absolute;
left: 145px;
top: 12px;
color: #76c0e2;
border-color: #76c0e2;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip {
display: flex;
width: 342px !important;
top: 78px;
left: -92px;
border-color: #83c6e5;
background-color: #e3f2fa;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip:before {
border-bottom-color: #83c6e5;
margin-right: 3px;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip:after {
border-bottom-color: #e3f2fa;
margin-right: 1px;
}
#guest-create-account .student-message {
display: none;
max-width: 550px;
padding: 15px;
margin-bottom: 10px;
background-color: #ffe1e1;
}
#guest-create-account .g-recaptcha {
margin-top: 10px;
}
#guest-create-account .terms {
margin-bottom: 12px;
font-size: 14px;
}
#guest-create-account .terms a {
color: #336b75;
}
#guest-create-account .terms a:hover {
text-decoration: underline;
}
#guest-create-account .submit-button-wrap {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: flex-end;
}
#guest-create-account .submit-button-wrap #lnkCreateAccount:disabled {
background: #bebebe;
}
.upgrade-account.plus #guest-create-account .submit-button-wrap #lnkCreateAccount {
background: #80c078;
}
.upgrade-account.plus #guest-create-account .submit-button-wrap #lnkCreateAccount:disabled {
background: #bebebe;
}
@media only screen and (max-width: 640px) {
.order-info-section.plus .guest-upgrade-account {
padding: 0 2px 12px 2px;
}
#guest-create-account .span5 {
max-width: none;
}
#guest-create-account .g-recaptcha {
transform: scale(0.85);
transform-origin: 0;
}
#guest-create-account .submit-button-wrap {
flex-direction: column;
padding: 10px 10px 0 10px;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip {
left: -93px;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip:before {
margin-left: -5px;
}
.upgrade-account.plus #guest-create-account .checkbox-label.student + .ico-tooltip .tooltip:after {
margin-left: -4px;
}
.panel-created-confirmed .button {
width: 100%;
margin: 0 0 6px !important;
}
.marketing-optin-wrapper {
margin-top: 15px;
}
.create-account-error {
max-width: auto;
}
}
.desktop-hide {
display: none !important;
}
.touch-show {
display: none;
}
.touch .touch-show {
display: block;
}
@media only screen and (min-width: 800px) {
.desktop-alpha {
padding-left: 0;
}
.desktop-omega {
padding-right: 0;
}
}
.lt-ie9 .desktop-alpha {
padding-left: 0;
}
.lt-ie9 .desktop-omega {
padding-right: 0;
}
@media only screen and (max-width: 980px) {
.related-article .title {
padding-left: 20px;
padding-right: 20px;
}
.loyalty-cardbox-amount .button {
padding-left: 10px;
padding-right: 10px;
}
.gift-card-form .button,
.loyalty-card-form .button,
.basket-promo-form .button {
padding-left: 10px;
padding-right: 10px;
}
}
@media only screen and (max-width: 900px) {
.basket-product-qps-content > div,
.basket-subtotal .value {
margin-left: 50px;
}
.saved-address-container .label-container,
.billing-select-container .saved-address-container .label-container {
float: none;
height: auto;
display: block;
margin: 0 0 10px 0;
}
.events-result .event-preview {
margin-right: 30px;
}
.books_carousel:not(.slick-initialized) .book-preview {
width: 25%;
}
}
@media only screen and (max-width: 850px) {
.tab-content .event-preview > a {
margin-right: 30px;
}
.book-detail .book-format,
.book-actions .buy-container .buy-inner {
padding-left: 10px;
padding-right: 10px;
}
.book-detail-cnc > div {
padding-left: 10px;
padding-right: 10px;
}
.book-detail-cnc .button:not(.get-location-button) {
width: 56px;
margin-right: 0;
}
.book-detail-cnc-postcode {
padding-top: 13px;
}
.book-detail-cnc form:not(.location-form) {
padding-right: 0;
}
.book-detail-cnc-postcode .mobile-span12 {
width: 100%;
padding-left: 0;
padding-top: 0;
}
.book-detail-cnc-postcode .mobile-span12 .title {
display: inline-block;
margin-bottom: 5px;
}
.find-shops .prompt {
padding-left: 0;
}
.no-touch .shop-detail-feature {
padding: 20px;
}
div.delivery-to-address,
div.delivery-to-shop {
clear: both;
width: 100%;
padding-right: 100px;
}
.delivery-collection-inputs {
padding-bottom: 129px;
}
.basket-product-qps-content > div,
.basket-subtotal .value {
margin-left: 40px;
}
.book-detail-cnc .book-detail-cnc-saved .button {
right: 10px;
}
.basket-checkout-delivery-panel .book-detail-cnc .book-detail-cnc-saved .button {
right: 0;
}
.book-detail-cnc .book-detail-cnc-saved {
padding-right: 78px;
}
.book-detail .book-format > .ws-checkable-outer {
margin-right: 10px;
}
.loyalty-cardbox-balance,
.loyalty-cardbox-amount {
float: none;
width: 100%;
padding-top: 0;
}
.loyalty-cardbox-balance {
margin-bottom: 20px;
}
.loyalty-cardbox-amount strong {
font-weight: 300;
}
.loyalty-cardbox-amount input {
width: 100%;
}
.collect-form-outer .book-detail-cnc .book-detail-cnc-saved .collect-form-saved button {
margin-right: 10px;
}
.events-result .event-preview {
margin-right: 20px;
}
.loyalty-cardbox-amount .label-container {
min-width: 90px;
margin-right: 10px;
font-weight: 300;
}
}
/* *** Touch Carousels *** */
.touch .carousel .inner {
white-space: nowrap;
overflow: scroll !important;
-webkit-overflow-scrolling: touch;
}
.touch .carousel-control {
display: none;
}
.touch .carousel .inner > .item,
.touch .carousel .inner > .book-thumb {
display: inline-block;
vertical-align: top;
width: auto;
margin-left: 10px;
padding: 0 !important;
-webkit-transition: none;
transition: none;
}
.touch .book-carousel .inner > .item .expand-trigger {
width: auto;
}
.touch .carousel .inner > .item:first-child,
.touch .carousel .inner > .book-thumb:first-child {
margin-left: 0;
}
.touch .carousel .inner > .item,
.touch .carousel .inner > .book-thumb {
float: none;
}
.touch .book-carousel .inner > .item .image-wrap {
-webkit-transition: none;
transition: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.touch .book-carousel .inner > .item .fade {
display: none;
}
.touch .book-carousel .bullets {
display: none !important;
}
.touch .book-carousel {
padding-left: 0px;
padding-right: 0px;
}
.touch .carousel .wrapper {
overflow: visible;
}
.touch .personalisation-carousel {
position: relative;
min-height: 0;
overflow: visible;
padding: 0;
}
.touch .book-carousel .wrapper {
width: auto !important;
overflow: hidden;
}
.touch .book-carousel .wrapper-shift {
overflow: auto;
width: auto !important;
-webkit-overflow-scrolling: touch;
}
.touch .book-carousel .inner {
overflow: visible !important;
-webkit-overflow-scrolling: none;
}
.book-carousel .touch-link {
display: none;
}
.touch .book-carousel .touch-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: block;
}
.touch .book-personalisation .inner {
width: 100%;
}
.touch .site-ribbon.detached {
top: 93px;
}
/* -------------------------------------------------------------------
// Nav Stuff - touch overrides
// -------------------------------------------------------------------
*/
@media only screen and (max-width: 800px) {
.books_carousel:not(.slick-initialized) .book-preview {
width: 33.3%;
}
.pod_slider3:not(.slick-initialized) > *,
.pod_slider4:not(.slick-initialized) > * {
width: 50% !important;
}
.book-editorial .button {
padding: 0 10px;
font-size: 18px;
}
.book-editorial .button:not(:last-child) {
margin-right: 5px;
}
.no-touch .navbar-redesign ul li:last-child {
display: none;
}
.no-touch .navbar-redesign ul li:nth-last-child(2) {
border-right: 0;
}
}
@media only screen and (max-width: 920px) {
.no-touch .detached .navbar-redesign ul li:last-child {
display: none;
}
.no-touch .detached .navbar-redesign ul li:nth-last-child(2) {
border-right: 0;
}
}
@media only screen and (max-width: 874px) {
.no-touch .detached .navbar-redesign ul li:nth-last-child(2) {
display: none;
}
.no-touch .detached .navbar-redesign ul li:nth-last-child(3) {
border-right: 0;
}
}
/* -------------------------------------------------------------------
// Nav Stuff - responsive
// -------------------------------------------------------------------
*/
@media only screen and (max-width: 960px) {
.no-touch a.nav-item.home {
width: 18px;
}
}
@media only screen and (max-width: 640px) {
label.checkbox-label.mail-icon {
padding: 10px 20px 80px 0;
background-position: center bottom;
margin-top: 0;
margin-bottom: 20px;
}
label.checkbox-label.mail-icon + div {
padding-left: 0;
margin-top: 0;
}
.infinite-load {
padding-left: 0 !important;
}
.swiper {
padding: 0;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev,
.swiper .swiper-button-next.swiper-button-black,
.swiper .swiper-button-prev.swiper-button-black {
top: 32%;
height: 28px;
width: 26px;
background-size: 10px;
background-position: 10px;
}
.swiper .swiper-button-prev.swiper-button-black {
background-image: url(../img/ui/right_scroll_teal.png);
transform: rotate(180deg);
}
.swiper .swiper-button-prev.swiper-button-black:hover {
background-image: url(../img/ui/right_scroll_teal.png);
transform: rotate(180deg);
}
.swiper:not(.in_cat_page):not(.in_review_page) {
padding: 0 10px;
}
.swiper:not(.in_cat_page):not(.in_review_page) .swiper-button-next,
.swiper:not(.in_cat_page):not(.in_review_page) .swiper-button-next.swiper-button-black {
right: 10px;
}
.swiper:not(.in_cat_page):not(.in_review_page) .swiper-button-prev,
.swiper:not(.in_cat_page):not(.in_review_page) .swiper-button-prev.swiper-button-black {
left: 10px;
}
.swiper .book-preview .image-wrap .image-container img {
max-height: 155px;
}
.swiper .book-preview .image-wrap button {
padding: 0;
}
.competition-page .comp-content .feature-image {
width: 100%;
margin: 0 0 15px 0;
}
.competition-page .comp-content .feature-image .comp-image {
max-width: 50%;
}
.book-actions .buy-container .pre-add .button {
width: 100%;
margin-top: 10px;
float: none;
}
.perk-container .stock-message,
.book-actions .collect-message {
width: 100%;
}
.book-actions .buy-container .buy-inner.microsite .message {
width: 100%;
}
.book-actions .buy-container .buy-inner .button-container {
text-align: center;
}
.results-header {
display: flex;
flex-direction: column-reverse;
}
:root {
--ribbonHeight: 30px;
}
}
@media (max-width: 960px) {
#error-404-container {
display: none;
}
#error-404-mobile {
display: block;
}
}
/* ------------------------------------------------------
// TABLET SIZE
// ------------------------------------------------------
*/
@media only screen and (max-width: 800px) {
.home-row {
padding-left: 10px;
padding-right: 10px;
}
/* .hr-outer { padding: 0 40px; }*/
.row .tablet-span1 {
width: 8.33333%;
}
.row .tablet-span2 {
width: 16.66667%;
}
.row .tablet-span3 {
width: 25%;
}
.row .tablet-span4 {
width: 33.33333%;
}
.row .tablet-span5 {
width: 41.66667%;
}
.row .tablet-span6 {
width: 50%;
}
.row .tablet-span7 {
width: 58.33333%;
}
.row .tablet-span8 {
width: 66.66667%;
}
.row .tablet-span9 {
width: 75%;
}
.row .tablet-span10 {
width: 83.33333%;
}
.row .tablet-span11 {
width: 91.66667%;
}
.row .tablet-span12 {
width: 100%;
}
.row .tablet-prefix0 {
margin-left: 0;
}
.row .tablet-prefix1 {
margin-left: 8.33333%;
}
.row .tablet-prefix2 {
margin-left: 16.66667%;
}
.row .tablet-prefix3 {
margin-left: 25%;
}
.row .tablet-prefix4 {
margin-left: 33.33333%;
}
.row .tablet-prefix5 {
margin-left: 41.66667%;
}
.row .tablet-prefix6 {
margin-left: 50%;
}
.row .tablet-prefix7 {
margin-left: 58.33333%;
}
.row .tablet-prefix8 {
margin-left: 66.66667%;
}
.row .tablet-prefix9 {
margin-left: 75%;
}
.row .tablet-prefix10 {
margin-left: 83.33333%;
}
.row .tablet-prefix11 {
margin-left: 91.66667%;
}
.row .tablet-suffix0 {
margin-right: 0;
}
.row .tablet-suffix1 {
margin-right: 8.33333%;
}
.row .tablet-suffix2 {
margin-right: 16.66667%;
}
.row .tablet-suffix3 {
margin-right: 25%;
}
.row .tablet-suffix4 {
margin-right: 33.33333%;
}
.row .tablet-suffix5 {
margin-right: 41.66667%;
}
.row .tablet-suffix6 {
margin-right: 50%;
}
.row .tablet-suffix7 {
margin-right: 58.33333%;
}
.row .tablet-suffix8 {
margin-right: 66.66667%;
}
.row .tablet-suffix9 {
margin-right: 75%;
}
.row .tablet-suffix10 {
margin-right: 83.33333%;
}
.row .tablet-suffix11 {
margin-right: 91.66667%;
}
.tablet-height-auto {
height: auto !important;
}
.tablet-omega {
padding-right: 0;
}
.tablet-alpha {
padding-left: 0;
}
.tablet-hide {
display: none !important;
}
.tablet-show {
display: block !important;
}
.tablet-span12.display-container-duo > * ~ * {
margin-top: 0;
}
.display-container-duo > * ~ .tablet-span12 {
margin-top: 20px;
}
.main-page {
padding-bottom: 50px;
}
h2 {
line-height: 24px;
}
.tab-content {
padding: 20px;
}
.tab-content .event-preview > a {
max-width: 50%;
margin-right: 20px;
}
.search-results-list .book-preview-grid-item,
.preview-image-content .book-preview-grid-item {
padding-left: 10px;
padding-right: 10px;
}
.search-results-list .book-preview-grid-item:nth-child(2n+1),
.preview-image-content .book-preview-grid-item:nth-child(2n+1) {
clear: both;
padding-left: 0;
}
.search-results-list .book-preview-grid-item:nth-child(2n),
.preview-image-content .book-preview-grid-item:nth-child(2n) {
padding-right: 0;
}
.book-preview-grid-item .info-wrap {
height: auto;
}
.no-touch .shop-detail-feature {
padding: 0;
background: none;
}
/* *** Checkout *** */
.password-note {
position: static;
margin: -7px 0 10px 0;
}
.checkout-login-no-panel h2 {
margin-bottom: 16px;
}
.button-qas {
padding-left: 10px;
padding-right: 10px;
}
.checkout-payment-options > label {
width: 100%;
padding-right: 0;
margin-top: 20px;
}
.checkout-payment-options > label:first-child {
margin-top: 0;
}
.checkout-payment-options > label img {
float: left;
}
/* .side-basket .side-basket-product-button-remove {
float: right;
}
*/
.basket-product-qps-content > div,
.basket-subtotal .value {
margin-left: 30px;
}
.shop-item .inner .shop-thumb img {
width: 70px;
}
/* .touch .header-bar .right-menu > ul {
float: left;
}*/
/* Shop Select */
/* .row .shop-item {cursor:pointer;}*/
.row .shop-item .collect-select {
height: auto;
padding: 10px 0;
background: none;
top: 50%;
bottom: auto;
margin-top: -35px;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.row .shop-item .collect-select:before {
display: block;
}
.shop-item .collect-select.spacer {
margin-top: 0;
top: auto;
}
.collect-search-list .shop-item .perk-list {
float: none;
}
.row .click-collect-checkout {
padding-right: 10px;
}
/* *** Reviews page *** */
.reviews-list .pager {
text-align: center;
margin-bottom: 70px;
}
.form-write-review .review-rate {
padding-left: 10px;
padding-right: 10px;
}
.book-preview.book-preview-side .book-detail .title {
font-size: 22px;
line-height: 24px;
}
/* .panel-payment-card {
padding-top: 20px;
}
*/
.basket-heading > span.tablet-show {
display: inline-block !important;
}
.no-touch .input-container button.invisible {
display: none;
}
.no-touch .input-container button.invisible ~ button {
position: static;
float: right;
margin-top: 10px;
}
.basket-delivery-container {
width: 100%;
padding: 0;
}
.mobile-basket-delivery-prompt {
display: block;
background-color: #f4f4f4;
margin-top: 10px;
margin-bottom: 40px;
}
.mobile-basket-delivery-icon {
float: left;
content: url("../img/ui/delivery.png");
padding-top: 10px;
padding-bottom: 10px;
max-width: 80px;
}
.mobile-basket-delivery-message {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.order-books .product-image:not(:first-child) {
display: none;
}
.order-overview-details b br {
display: block;
}
.order-books {
margin-right: 15px;
}
.payment-card-block .block-content,
.payment-card-block .block-head {
padding-left: 15px;
padding-right: 15px;
}
.add-gift-card {
padding: 15px;
}
.account-content .payment-card-block .block-head .input-wrapper > span:first-child b {
display: block;
}
.address-block .inner {
padding: 20px;
}
.address-block .default-container {
padding-left: 20px;
padding-right: 20px;
}
.book-image-main > .inner {
overflow: auto;
}
/*.touch .book-detail .book-image-wrap ul.inner {
display: block; font-size: 0; overflow: hidden;
display: none;
}
.touch .book-image-main > img { display: none; }
.touch .book-detail .additional-images { display: none; }
.touch .book-image-thumbs { display: none; }*/
.book-list-book .book-image {
margin-right: 20px;
}
.saved-address-container .add-address {
display: none;
}
.saved-address-container .add-address-responsive {
display: inline-block;
}
/* Gift card items */
.gift-cards-item .number-value {
float: none;
margin: 0;
}
.gift-cards-item .amount-confirm {
padding-top: 0;
}
.gift-cards-table > div.value {
width: 101px;
}
.gift-cards-item .amount-confirm .amount {
font-weight: 300;
}
.side-basket.main-checkout-basket {
display: block;
}
/*.main-basket .side-basket-total,
.main-checkout-basket .side-basket-total {
background: #E2E2E2;
padding-right: 20px;
}*/
.collect-search-list .shop-item .inner .distance .get-directions {
display: none;
}
.author-detail h1 {
margin-top: 10px;
margin-bottom: 0;
}
.events-result .event-preview {
width: 120px;
}
#event-side-books {
width: 120px;
}
.related-article .title {
padding-left: 20px;
padding-right: 20px;
}
.blog-detail {
margin-bottom: 30px;
}
.bestsellers-list > ul > li {
float: left;
width: 100%;
padding-left: 70px;
}
.bestsellers-list > ul > li:before {
left: 0px;
}
.starting-location-form {
display: none !important;
}
.user-reviews-container {
padding: 20px 20px 0 20px;
}
.reviews-list-item .review-rating .star-rating {
float: none;
display: block;
margin-bottom: 5px;
}
.row .accountSidebar-sticky {
top: 121px;
}
/* PLUS Dashboard */
.plus-dashboard-page .plus-welcome {
font-size: initial;
}
.plus-dashboard-page .plus-card {
padding-bottom: 0;
margin: 0 auto;
width: 100%;
max-width: 340px;
}
.plus-dashboard-page .payment-card-block h3 {
margin: 24px 0 0px;
}
.plus-dashboard-page .plus-card-info {
flex-direction: column;
padding: 0 14px;
}
.plus-header-menu-wrap {
border-top: 0;
}
.plus-header .row:nth-child(1) {
padding-bottom: 8px;
}
.plus-dashboard-page .plus-add-devices {
display: block;
}
.plus-dashboard-page .plus-balance-info {
font-size: 0.9em;
background: none;
box-shadow: none;
padding: 20px 0;
width: unset;
background: #fff;
margin: 20px -25px;
}
.plus-dashboard-page .plus-balance-info .balance-spent-info {
margin: 10px 0;
}
.plus-dashboard-page .plus-learn-more {
margin-top: 24px;
}
.plus-balance-info > .row {
max-width: 310px;
}
.swiper .book-preview .info-wrap {
min-height: 104px;
}
.swiper .book-preview .info-wrap .author-wrap {
margin-top: 3px;
}
.swiper .book-preview .info-wrap .book-price .format,
.swiper .book-preview .info-wrap .book-price .price,
.swiper .book-preview .info-wrap .book-price .price-rrp {
margin-top: 4px;
}
} /* end tablet */
/* ------------------------------------------------------
// Apply only to tablet; do not propagate to mobile
// ------------------------------------------------------
*/
@media only screen and (min-width: 640px) and (max-width: 800px) {
.card-fields-container .label-container {
float: none;
height: auto;
display: block;
margin: 0 0 10px 0;
}
}
@media only screen and (max-width: 775px) {
.footer-col h3 br {
display: block;
}
.search-result-row img {
width: 29%;
margin-right: 10px;
height: auto;
}
.basket-product-qps-content > div,
.basket-subtotal .value {
margin-left: 25px;
}
}
@media only screen and (max-width: 725px) {
.find-shops {
width: 100%;
}
.find-shops .prompt {
float: none;
margin-left: 0;
padding-top: 0;
}
.find-shops .other-filters {
max-width: none;
}
.search-result-content {
overflow: visible;
}
.no-touch .shop-detail-feature {
padding: 0;
margin: 0 0 20px 0;
background: none !important;
}
.row .map-box {
float: none;
width: 100%;
}
.no-touch .row .detail-box {
float: none;
min-height: 0;
width: 100%;
padding: 0;
}
.events-home-search .switch-list,
.events-home-search .switch-map {
right: 20px;
bottom: 20px;
}
.events-home-search .list-view > ul {
height: 261px;
}
.ws-select-large .ws-select-handle {
padding-left: 10px;
padding-right: 10px;
}
.no-touch .shop-detail-feature .inner h1 {
margin-top: 10px;
}
.shop-detail-feature .inner h1:after {
position: static;
}
.basket-product-qps-content > div,
.basket-subtotal .value {
margin-left: 20px;
}
}
@media only screen and (max-width: 700px) {
div.delivery-to-address,
div.delivery-to-shop {
padding-right: 0px;
}
}
/* ------------------------------------------------------
// MOBILE SIZE
// ------------------------------------------------------
*/
@media only screen and (max-width: 640px) {
.home-row,
.row {
padding-left: 0;
padding-right: 0;
}
.mobile-section {
float: none !important;
clear: both;
width: auto !important;
margin-left: -5px;
margin-right: -5px;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 15px;
border-top: 1px solid #ddd;
}
.row .mobile-span1 {
width: 8.33333%;
}
.row .mobile-span2 {
width: 16.66667%;
}
.row .mobile-span3 {
width: 25%;
}
.row .mobile-span4 {
width: 33.33333%;
}
.row .mobile-span5 {
width: 41.66667%;
}
.row .mobile-span6 {
width: 50%;
}
.row .mobile-span7 {
width: 58.33333%;
}
.row .mobile-span8 {
width: 66.66667%;
}
.row .mobile-span9 {
width: 75%;
}
.row .mobile-span10 {
width: 83.33333%;
}
.row .mobile-span11 {
width: 91.66667%;
}
.row .mobile-span12 {
width: 100%;
}
.row .mobile-prefix0 {
margin-left: 0;
}
.row .mobile-prefix1 {
margin-left: 8.33333%;
}
.row .mobile-prefix2 {
margin-left: 16.66667%;
}
.row .mobile-prefix3 {
margin-left: 25%;
}
.row .mobile-prefix4 {
margin-left: 33.33333%;
}
.row .mobile-prefix5 {
margin-left: 41.66667%;
}
.row .mobile-prefix6 {
margin-left: 50%;
}
.row .mobile-prefix7 {
margin-left: 58.33333%;
}
.row .mobile-prefix8 {
margin-left: 66.66667%;
}
.row .mobile-prefix9 {
margin-left: 75%;
}
.row .mobile-prefix10 {
margin-left: 83.33333%;
}
.row .mobile-prefix11 {
margin-left: 91.66667%;
}
.row .mobile-suffix0 {
margin-right: 0;
}
.row .mobile-suffix1 {
margin-right: 8.33333%;
}
.row .mobile-suffix2 {
margin-right: 16.66667%;
}
.row .mobile-suffix3 {
margin-right: 25%;
}
.row .mobile-suffix4 {
margin-right: 33.33333%;
}
.row .mobile-suffix5 {
margin-right: 41.66667%;
}
.row .mobile-suffix6 {
margin-right: 50%;
}
.row .mobile-suffix7 {
margin-right: 58.33333%;
}
.row .mobile-suffix8 {
margin-right: 66.66667%;
}
.row .mobile-suffix9 {
margin-right: 75%;
}
.row .mobile-suffix10 {
margin-right: 83.33333%;
}
.row .mobile-suffix11 {
margin-right: 91.66667%;
}
.mobile-height-auto {
height: auto !important;
}
.tablet-alpha {
padding-left: 10px;
}
.tablet-omega {
padding-right: 10px;
}
.mobile-alpha {
padding-left: 0;
}
.mobile-omega {
padding-right: 0;
}
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
.mobile-text-left {
text-align: left;
}
.mobile-text-right {
text-align: right;
}
.preview-action .inner {
height: 220px;
}
.display-container-trio > *, .display-container-duo > * {
height: auto;
}
.home-row > * {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 15px;
}
.preview-bricks {
margin-bottom: 0;
}
.preview-bricks .preview-brick {
margin-bottom: 15px;
}
.main-page {
padding-bottom: 65px;
}
.pages-header-row,
.carousel-heading {
padding: 0 20px;
}
.span12 .pages-header-row,
.span12 .carousel-heading {
padding: 0 10px;
}
.preview-promo.mobile-span12 .details {
margin-top: 15px;
}
.display-container-duo > * ~ .mobile-span12 {
margin-top: 20px;
}
.dp_banner_header {
font-size: 38px;
line-height: 1;
}
/* *** CAROUSEL *** */
.touch .book-carousel .wrapper {
height: 140px;
}
.touch .book-carousel .inner > .item img {
height: 140px;
}
.no-touch .book-carousel .inner > .item .expand-trigger,
.no-touch .book-carousel .inner > .item.expanded .expand-trigger {
width: 75px; /* you need to change this in bookcarousel.js as well */
}
.book-carousel .inner > .item .expand-trigger .image-wrap {
margin: 0 !important;
}
.book-carousel .inner > .item.expanded .expand {
display: none;
}
.image-slider-component {
padding: 0 20px 20px;
}
/* Typography */
body {
min-height: 0;
padding: 0;
}
h1.page-title {
margin-bottom: 10px;
}
h2 {
line-height: 23px;
margin: 5px 0 10px 0;
}
#search-no-results h2 {
font-size: 23px;
line-height: 25px;
margin: 24px 0 30px;
}
.heading-fg {
font-size: 20px;
line-height: 22px;
margin-bottom: 13px;
}
.reviews-header a {
margin-top: 3px;
}
.heading-underline {
padding-bottom: 5px;
margin-bottom: 8px;
}
/* Forms */
.ws-select-outer.active:after {
display: block;
}
/* *** NAV OVERRIDES *** */
.nav-trigger-button {
left: 0px;
}
/*.header-bar .right-menu > ul {
float: left;
}
*/
/* *** FOOTER *** */
footer {
position: relative;
left: auto;
bottom: auto;
}
.footer-expand-trigger {
display: none;
}
.footer-body {
padding-left: 0;
padding-right: 0;
}
.footer-body > small {
padding-left: 15px;
padding-top: 15px;
}
.footer-col {
float: none;
width: 100%;
padding: 15px 15px 15px 15px;
border-bottom: 1px solid #4E4E4E;
margin: 0;
}
.footer-col.nav-col {
padding: 5px 0;
}
.footer-col.footer-col-generic {
display: none;
}
.footer-col.footer-col-social {
float: none;
width: auto !important;
margin-right: 0;
}
.footer-col ul li a:hover {
text-decoration: none;
}
.footer-col.footer-col-newsletter .button {
float: right;
}
.footer-col.footer-col-newsletter h3 {
display: none;
}
.footer-col-newsletter .input {
max-width: none;
width: 100%;
height: 37px;
margin: 0 0 8px 0;
font-size: 16px;
}
.footer-col-newsletter .input:focus {
padding-left: 6px !important;
padding-right: 6px !important;
}
.form-newsletter {
display: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.form-newsletter.active {
display: block;
}
.footer-col.nav-col {
display: block;
padding: 0;
margin: 0;
}
#footer .footer-col.nav-col a,
#footer .footer-col.nav-col .manage-cookies {
color: #fff;
}
.reviews-write .review-stars-wrapper .star-rating > div {
margin-right: 5px;
}
.footer-col h3 {
font-size: 17px;
line-height: 21px;
}
.footer-col h3 br {
display: none;
}
.footer-col ul li {
margin-bottom: 0;
}
.footer-col.footer-col-social li {
float: left;
text-align: center;
}
.footer-col ul.socials li a {
display: block;
padding-left: 8px;
padding-right: 8px;
overflow: hidden;
}
.footer-col ul.socials {
margin-left: -5px;
}
.footer-col.footer-col-social ul li a:hover {
border: none;
}
.socials a:before {
display: block;
padding-right: 0;
font-size: 32px;
line-height: 1;
color: #878787;
color: rgba(255, 255, 255, 0.5);
}
.socials a:hover:before {
color: #fff;
}
.socials a.icon-tiktok:before, .socials a.icon-x:before {
width: 32px;
height: 32px;
margin: auto;
background-position: center;
float: none;
opacity: 0.5;
}
.socials a.icon-tiktok:hover:before, .socials a.icon-x:hover:before {
opacity: 1;
}
.socials a.icon-x:before {
background-size: 24px;
}
/* *** Breadcrumbs *** */
.breadcrumbs {
margin: 10px 0;
}
.breadcrumbs + h1 {
margin-top: 0;
}
.no-touch .mobile-breadcrumbs {
display: block;
margin-bottom: 0;
}
/* *** Preview Promo *** */
/*.preview-promo .details,
.bestsellers-list {
padding-left: 20px;
padding-right: 20px;
}*/
/* *** Tab Header *** */
.book-info-tabs {
margin-bottom: 30px !important;
}
.book-reviews {
margin-bottom: 20px !important;
}
.tabs-header {
margin-bottom: 0;
}
.ws-tabs .tabs-header > a {
display: block;
margin: 15px 0 0 0;
padding: 0 80px 0 20px;
background: #fff;
border: 1px solid #D1D1D1;
color: #666;
}
.ws-tabs .tabs-header > a:first-child {
margin-top: 0;
}
.ws-tabs .tabs-header > a:hover {
color: #000;
}
.tabs-header > a:before {
display: block;
}
/* *** Tab Content *** */
.tabs-content-container {
display: none;
}
.tabs-header .tab-content {
padding: 7px 0;
}
.tabs-header .tab-content.active {
display: block;
}
.tab-content h4 {
margin-bottom: 2px;
}
.tab-content p.spec {
margin-bottom: 0;
margin-top: 15px;
}
.author-preview ~ .author-preview {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
.tab-content .event-preview > a {
max-width: 40%;
margin-right: 10px;
}
.event-preview-details {
padding-top: 5px;
}
.author-preview-details {
padding-right: 0;
}
.author-preview-details .button {
position: static;
right: auto;
top: auto;
}
/* *** ACTIONS *** */
.buy-inner .button {
width: 149px;
padding-left: 0;
padding-right: 0;
}
.book-info {
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.account-content .order-block .block-head .book-info {
padding-top: 5px;
padding-bottom: 5px;
}
.book-actions {
margin-top: 0;
}
.book-detail {
margin-top: 10px;
margin-bottom: 8px !important;
}
.reviews-sidecol .book-detail {
margin-bottom: 0 !important;
}
.book-detail h1.title {
font-size: 22px;
line-height: 24px;
}
.book-detail .rating {
margin-top: 10px;
}
.perk-container {
margin-top: 15px;
}
.input,
.input.input-large {
height: 44px !important;
padding-left: 8px;
padding-right: 8px;
font-size: 15px;
line-height: normal !important;
}
.search-input input {
height: 35px !important;
}
.input:not([disabled]):focus,
.input:not([disabled]):active,
.input.input-large:focus,
.input.input-large:active,
.input.input-error {
padding-left: 7px;
padding-right: 7px;
}
.input.input-small:not([disabled]):focus,
.input.input-small:not([disabled]):active {
padding-left: 5px;
padding-right: 5px;
}
.button {
font-size: 17px;
padding-left: 15px;
padding-right: 15px;
}
.button.button-small {
font-size: 12px;
}
.button.button-see-more {
position: relative;
top: 2px;
font-size: 14px;
}
.button-upload {
height: auto;
line-height: 35px;
}
.no-touch .button-account-back {
display: block;
}
.user-lists-popup {
position: static;
width: 100%;
right: auto;
border-width: 2px;
}
/* Book Reviews */
.reviews-header {
padding-bottom: 10px;
border-bottom: none;
}
.reviews-header a {
margin-right: 10px;
}
.marketplace-message {
margin-top: 10px;
margin-bottom: 15px;
}
.reviews-trigger {
display: inline-block;
margin-bottom: 1px;
}
.form-write-review {
margin-top: 20px;
}
.book-detail-cnc .book-detail-cnc-saved .button {
margin-top: -22px;
}
.book-review {
border-top: 1px solid #ddd;
padding-top: 10px;
padding-bottom: 10px;
}
.book-review:first-child {
border-top: none;
}
.book-recommends {
margin-top: 0;
margin-bottom: 20px !important;
}
.book-image-main > img {
height: auto;
}
.touch .book-image-main > img {
max-height: 280px;
}
/* *** SEARCH RESULTS *** */
.search-top {
margin-bottom: 10px;
}
.view-switcher {
display: none;
}
.search-sidebar {
display: none;
width: 100%;
margin: 0;
}
.search-sidebar.active {
display: block;
}
.search-sidebar h3,
.filter-responsive-set-filters h3 {
font-size: 17px;
line-height: 19px;
}
.search-results-list {
margin-bottom: 0;
}
.search-results h1 {
font-size: 20px;
line-height: 22px;
padding-top: 0;
}
.search-results .heading-pagination h1 {
padding-top: 9px;
}
.filter-responsive {
display: block;
}
/*.book-preview .title {
font-size: 14px;
line-height: 18px;
}*/
.book-preview-grid-item .title {
padding-bottom: 2px;
font-size: 19px;
line-height: 21px;
}
.book-preview-list-item .title {
font-size: 19px;
line-height: 21px;
max-height: 64px;
}
.book-preview .book-price {
margin-top: 2px;
white-space: nowrap;
}
.book-preview .book-price .format {
white-space: normal;
}
.book-preview .star-rating {
margin-top: 2px;
}
.search-result-row {
padding-top: 10px;
}
.search-result-row img {
margin-left: 0;
margin-right: 10px;
margin-bottom: 10px;
}
/* Filter range */
.filter-price:before {
line-height: 44px;
}
.filter-content a:not(.star-rating) {
font-size: 16px;
line-height: 22px;
}
.filter-content li a:not(.star-rating) {
padding-top: 3px;
padding-bottom: 3px;
}
/* Shops Listing */
/*.shop-item .inner .shop-thumb {
float: none;
display: inline-block;
margin-right: 0;
margin-bottom: 5px;
vertical-align: top;
}*/
.shop-item .inner .shop-thumb {
margin-right: 10px;
}
.shop-item .inner .opentime {
margin-top: 2px;
}
.shop-item:first-child + .shop-item .inner {
border-top: 1px solid #c8c8c8;
}
.delivery-collection-form .shop-item .inner .shop-thumb {
display: none;
}
.find-shops .prompt {
font-size: 22px;
line-height: 1;
}
.shop-item .inner .title {
font-size: 18px;
line-height: 20px;
}
/* Shop */
.row .shop-detail {
float: none;
width: 100%;
}
.row .shop-detail-side {
float: none;
width: 100%;
margin-top: 20px;
}
.shop-detail-feature {
margin-bottom: 10px;
}
.no-touch .shop-detail-feature .inner {
background: #fff;
}
.no-touch .shop-detail-feature .inner h1 {
margin-top: 10px;
}
/*.no-touch .shop-detail-feature .inner h4 {
margin-top: 10px;
margin-bottom: 0;
}
*/
.shop-detail-feature .directions {
margin-top: 5px;
}
.shops-directory {
margin-bottom: 0px;
}
.shops-search-list .shop-item .inner {
min-height: 0;
}
.shop-item:nth-child(odd) {
clear: none;
}
.shop-item .inner {
min-height: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.shop-item:nth-child(2) .inner {
border-top: 1px solid #c8c8c8 !important;
}
.related-shop-items .shop-item:first-child .inner {
padding-top: 0;
}
/* Book Review */
.review-disclaimer {
display: block;
}
#form-write-review-side .review-disclaimer {
display: none;
}
.review-disclaimer p {
margin: 0;
}
.form-write-review .review-rate {
margin-bottom: 10px;
}
/* Login Box */
.login-box .inner .login-top {
padding: 20px;
}
.login-bottom {
padding: 18px 20px 20px 20px;
}
.book-list-add .subtitle {
margin: 0 0 8px 0;
}
/* Book Personalisation */
.book-personalisation {
padding-top: 10px;
margin-bottom: 20px;
}
/* *** Events *** */
.events-home-search.no-feature {
margin-bottom: 20px;
}
.events-home-search .list-view {
margin-top: 24px;
padding: 0 0 42px 0;
height: auto;
border: none;
}
.events-home-search .list-view > ul {
height: auto;
overflow: hidden;
}
.events-home-search .switch-list,
.events-home-search .switch-map {
right: 0;
bottom: 0;
}
/* *** Checkout *** */
.row .checkout-main {
padding-right: 10px;
}
.checkout-panel-actions {
padding-top: 10px;
}
.row > .side-basket {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
visibility: hidden;
}
.side-basket.main-basket {
display: block;
}
.touch .side-basket.main-basket:not(.show-on-touch) {
display: none;
}
div.delivery-to-address,
div.delivery-to-shop {
padding-right: 0;
margin: 0;
}
.label-container br {
display: block;
}
.collect-form-outer .cnc-left {
padding-top: 0;
}
.shipping-method {
margin-bottom: 0;
}
.deliveryOptions {
padding-top: 0;
padding-bottom: 0;
}
/*.panel-heading.complete {
display: none !important;
}*/
.checkout-payment-options {
padding-top: 24px;
padding-bottom: 18px;
}
.panel-gift-card,
.panel-payment-card,
.panel-loyalty-card,
.panel-promo-code {
padding-top: 10px;
padding-bottom: 5px;
}
.panel-promo-code {
padding-bottom: 15px;
}
.panel-payment-card {
padding-top: 20px;
}
.gift-card-form .button,
.loyalty-card-form .button,
.loyalty-cardbox-amount .button,
.basket-promo-form .button {
padding-left: 20px;
padding-right: 20px;
}
.accepted-cards {
margin-bottom: 10px;
}
.gift-card-form div + div,
.loyalty-card-form div + div {
padding-left: 0;
}
/* *** Basket *** */
.basket-product-qps {
overflow: hidden;
}
.basket-product-qps-content {
position: static;
right: auto;
top: auto;
text-align: justify;
}
/* Make text-align justify work with single line */
.basket-product-qps-content:after {
content: "";
display: inline-block;
width: 100%;
height: 1px;
margin-bottom: -1px;
overflow: hidden;
visibility: hidden;
}
.basket-product > .basket-product-qps-content {
display: none;
}
.basket-product-qps-content > div {
float: none;
display: inline-block;
vertical-align: top;
min-width: 0;
margin: 0;
}
.basket-product-qps-content > div:before {
display: none;
}
.basket-product-qps b {
display: block;
}
.basket-checkout-row form {
float: none;
}
.accepted-cards-container {
float: none;
display: block;
margin-bottom: 20px;
}
.basket-products,
.basket-subtotal,
.basket-promo-code {
margin-bottom: 13px;
}
.basket-subtotal {
padding-bottom: 13px;
}
.checkout-login-question > p:first-child {
margin-top: 8px;
margin-bottom: 12px;
}
/*.shop-item .collect-select {
padding: 10px 0;
height: auto;
background: none;
top: 50%;
bottom: auto;
margin-top: -35px;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.shop-item .collect-select:before {
display: block;
}*/
.shop-locator {
margin-top: 0;
}
.reserve-details .ws-select-outer {
width: 100%;
max-width: none;
}
.preferred-method {
margin: 0;
}
.row.basket {
margin-top: 10px;
}
.reserve-details .complete p {
margin-bottom: 15px;
}
input,
textarea {
font-size: 16px !important;
}
/* *** Reviews page *** */
.comment-bottom > div,
.comment-bottom > span {
min-width: 50%;
}
.comment-bottom > span:last-child {
float: right;
clear: none;
}
.reviews-list-item .comment-bottom > div:not(:first-child):not(:last-child),
.comments-list .comment-bottom > div:nth-child(3) {
clear: left;
display: block;
}
.reviews-list-item .comment-bottom > div:before,
.comments-list .comment-bottom > div:before,
.review-item-small-functions .comment-bottom > div:before {
display: none;
}
.reviews-list-item .action-share-container {
position: absolute;
right: -20px;
top: 0px;
bottom: auto;
border-bottom: 1px solid #ddd;
border-right: none;
}
.reviews-header-top {
padding-right: 65px;
}
.touch .reviews-header-top {
padding-right: 0;
}
.reviews-list-item {
margin-bottom: 15px;
}
.review-list-item-main {
padding-bottom: 10px;
}
.review-content {
margin-bottom: 0;
}
.review-content p:first-child {
margin-top: 0px;
}
.reviews-list-item h2 {
font-size: 25px;
line-height: 27px;
}
.reviews-list-item .user-picture {
margin-right: 10px;
}
.review-rating.pull-left {
font-size: 16px;
}
.touch .reviews-list-item .review-header-bottom {
min-height: 0;
/*padding-bottom: 10px;*/
}
.review-tips-container {
margin-top: 20px;
}
.submit-container,
.form-write-review .submit-container {
margin-bottom: 20px;
}
.book-list-add {
padding: 10px;
}
.comment-avatar {
display: none;
}
.comment-outer {
padding-top: 8px;
}
.comments-new .heading-fg {
margin-bottom: 8px;
}
.reviews-header-top {
margin-bottom: 5px;
}
.review-replies.active {
padding-bottom: 10px;
}
.pager {
margin-top: 20px;
}
.row .reviews-list {
margin-top: 0;
}
.page-title-container .pager {
margin-top: -5px;
}
.book-preview.book-preview-side .book-detail {
padding: 10px 10px 0 10px;
}
.book-preview-side .add-basket-form > div {
padding: 10px;
}
.login-container .input-large,
.login-container .ws-select-outer {
max-width: none;
margin-bottom: 0;
}
.login-container .input-large + label.input-error {
margin-top: 0;
}
.login-container > div {
margin-bottom: 30px;
}
.search-results-list .book-preview-grid-item,
.search-result-group .book-preview-grid-item,
.books-result .book-preview-grid-item,
.preview-image-content .book-preview-grid-item {
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 15px;
border-bottom: 1px solid #E6E6E6;
margin-bottom: 15px;
}
.books-result .book-preview-grid-item:first-child {
padding-top: 15px;
border-top: 1px solid #E6E6E6;
}
.search-result-group .book-preview-grid-item:first-child,
.search-results-list .book-preview-grid-item:first-child,
.preview-image-content .book-preview-grid-item:first-child {
padding-top: 5px;
}
.book-preview-grid-item .info-wrap {
padding-top: 8px;
padding-left: 10px;
padding-right: 10px;
}
.panel-payment-card {
padding-top: 30px;
}
.checkout-loyalty-signup {
padding-top: 14px;
}
.basket-checkout-row {
float: none !important;
}
.basket-outro-row {
margin-top: 23px;
}
.basket-product-image {
margin-right: 20px;
}
.search-sidebar .ws-select-outer {
max-width: none;
}
/* *** MY ACCOUNT*** */
.profile-page .ws-select-outer.ws-select-large {
max-width: none;
}
.profile-page input,
.profile-page .ws-select-outer {
max-width: none;
}
.profile-picture-drop {
margin-right: 10px;
margin-bottom: 10px;
}
.contact-details-edit .hr {
margin-bottom: 10px;
}
.contact-details-edit .button-upload {
margin-bottom: 20px;
}
.payment-card-block .block-head {
padding-left: 15px;
padding-right: 15px;
}
.order-overview > .button {
right: 15px;
}
.pagination.mobile-centered .pager {
text-align: center;
}
.socials a.icon-email:before,
.socials a.icon-twitter:before {
top: 0;
}
.order-info-section > h2 {
margin-bottom: 12px;
}
.contact-details-edit {
margin-bottom: 0;
}
.add-gift-card {
padding: 15px;
}
.account-content .add-gift-card {
padding-bottom: 5px;
}
.add-gift-card .input {
margin-bottom: 10px;
}
.list-preview .meta {
display: block;
}
.list-preview .title {
margin-bottom: 0;
}
.list-preview .list-heading {
margin-bottom: 30px;
}
.list-preview .list-images {
margin: 0 20px;
}
.list-preview .list-images .list-image {
margin-right: 10px;
}
.list-preview .list-images.empty .list-image.empty:nth-child(3), .list-preview .list-images.empty .list-image.empty:nth-child(4), .list-preview .list-images.empty .list-image.empty:nth-child(5) {
display: none;
}
.list-types {
padding-bottom: 0;
margin-bottom: 30px;
}
h1.page-title + p {
margin-top: 0;
}
.p-large {
line-height: 23px;
}
.account-list .list-detail {
display: block;
margin-bottom: 5px;
}
.account-list .pagination-wrap {
margin-top: 0;
}
.account-list .pagination-wrap .pager {
margin: 0;
}
.account-list .heading-wrap,
.account-list .list-description {
display: none;
}
.account-list .heading-under {
margin-top: 0;
margin-bottom: 0;
}
.book-list-item .book-list-image {
width: 70px;
margin-right: 15px;
}
.book-list-item .title {
font-size: 20px;
}
.book-list-item .contrib,
.book-list-item .price,
.book-list-item .price-rrp {
font-size: 18px;
}
.book-list-item .format {
font-size: 14px;
}
.book-list-item .remove {
font-size: 15px;
}
.book-list-item .book-list-item-info > * {
margin-bottom: 5px;
}
.list-feature-image {
margin-bottom: 10px;
}
.list-feature-image .list-image:not(:last-child) {
margin-right: 20px;
}
.list-feature-image .list-image:first-child {
margin-left: 20px;
}
.list-feature-image .list-image:nth-child(4), .list-feature-image .list-image:nth-child(5), .list-feature-image .list-image:nth-child(6) {
display: none;
}
.list-comment-form textarea {
margin-top: 0;
margin-bottom: 0;
}
.book-list-add .book-results .book-list-item {
padding: 10px;
}
.mobile-unboxed {
border: none !important;
padding: 0 !important;
}
.label-container {
height: 44px;
font-size: 14px;
}
.address-container .single-line {
padding-top: 13px;
}
.account-content .payment-card-block .block-head .floater.left {
margin-right: 10px;
}
.account-content .payment-card-block .block-content .button,
.account-content .payment-card-block .block-content .button:first-child {
clear: none;
margin-top: 0;
margin-left: 5px;
}
.mobile-text-center {
text-align: center;
}
.payment-card-block .block-head .card-default {
line-height: 45px;
}
.ebook-download .bottom-bar {
bottom: 0;
}
.user-reviews-container .review-rating {
padding-right: 0;
}
.reviews-list-item .review-rating .star-rating {
display: block;
margin-bottom: 5px;
float: left;
}
.reviews-list-item .review-rating .star-rating.clear-both {
clear: both;
}
.user-reviews-container {
padding: 20px 20px 0 20px;
}
.view-switcher + .pagination {
margin-top: 0;
}
.book-list-book .book-image {
max-width: 100px;
margin-right: 15px;
}
.heading-pagination .floater.invisible {
display: none;
}
.heading-pagination .floater.invisible ~ .floater {
position: static !important;
left: auto;
right: auto;
top: auto;
}
.loyalty-cardbox-balance {
margin-bottom: 10px;
}
/* Gift card items */
.gift-cards-table > div.value {
width: 111px;
}
.gift-cards-item .amount-confirm .amount {
line-height: 45px;
}
.gift-cards-container {
margin-bottom: 15px;
padding-bottom: 5px;
}
.card-fields-container .add-new-card,
.addressContainer .payment-add-address,
.payment-card-saved .payment-add-address {
display: none;
}
.addressContainer .input-wrapper-content .payment-add-address {
display: inline-block;
}
.card-fields-container .responsive-add-new-card,
.addressContainer .responsive-payment-add-address,
.payment-card-saved .responsive-payment-add-address {
display: inline-block;
}
/*.preferred-method {
border-top: 1px solid #E1E1E1;
padding-top: 10px;
}*/
.basket-delivery-prompt {
padding-bottom: 20px;
padding-top: 20px;
}
.touch .row .detail-box {
float: none;
min-height: 0;
width: 100%;
}
.shops-search-list .shop-item .collect-view-shop {
position: static;
right: auto;
top: auto;
float: right;
margin: 0;
}
.touch-basket-checkout-row {
display: none;
float: none;
margin-bottom: 18px;
}
.basket-delivery-message br {
display: none;
}
.heading-pagination .pagination {
display: none;
}
.author-detail h1 {
font-size: 20px;
line-height: 22px;
margin-top: 10px;
margin-bottom: 0;
}
.author-directory-items {
margin-top: -20px;
margin-bottom: -15px;
}
.author-directory-item .inner {
height: auto;
padding-top: 10px;
margin-bottom: 10px;
}
.author-directory-item:nth-child(2) .inner {
border-top: 1px solid #C8C8C8;
}
#event-side-books {
width: 70px;
}
.blog-detail .page-detail-actions {
margin-top: 10px;
}
.cancelled-header {
margin-top: 50px;
margin-bottom: -7px;
}
.blog-detail > h2,
.blog-detail > h1,
.blog-detail .author-description-wrapper > h1 {
font-size: 22px;
line-height: 24px;
}
.book-preview-list-item {
margin-bottom: 20px;
padding-bottom: 20px;
}
.footer-col.footer-col-newsletter > a {
display: block !important;
}
.blog-grid {
margin: 5px 0 0 0;
}
.blog-preview-content {
padding-left: 0;
padding-right: 0;
}
.blog-detail h1 {
margin-bottom: 10px;
}
.blog-detail h3,
.blog-detail-side h3 {
margin-bottom: 5px;
}
.blog-detail p > a > img,
.blog-detail img.size-full,
.blog-detail .embed-youtube {
margin-bottom: 10px;
}
.blog-detail .content-text img.alignleft,
.blog-detail .content-text img.alignright,
.blog-detail .content-text img.aligncenter {
float: none;
display: block;
margin: 0 auto 20px auto;
}
.blog-component .image-container {
padding: 0;
}
.blog-component .image-container + div {
padding: 0;
}
.infobox > header {
margin-bottom: 10px;
}
.infobox figure {
max-width: 30%;
}
.infobox-content {
overflow: visible;
}
.infobox {
padding-top: 15px;
}
.review-header-bottom {
position: static;
}
.review-header-bottom {
position: static;
padding-right: 0;
}
.preview-promo {
margin-bottom: 30px;
}
.account-content .order-block .block-head .input-wrapper {
margin-top: 0;
}
#help-layout {
display: flex;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/* Wish Lists */
.book-list-book .wishlist-add-to-basket.basket-form b {
font-size: 18px;
line-height: 18px;
}
.book-list-book .wishlist-add-to-basket.basket-form b.price-rrp {
display: block;
}
.book-list-book .wishlist-add-to-basket.basket-form b.price-rrp:after {
top: 40%;
}
.add-all-container .message {
display: block;
margin-bottom: 5px;
}
.label-container label {
vertical-align: bottom;
}
.subnav {
opacity: 1;
pointer-events: auto;
display: inline-block;
}
.plus-header .plus-col-balance {
padding-top: 4px;
}
.plus-header .plus-col-cardno {
padding-top: 6px;
}
.plus-dashboard-page .plus-balance-info {
padding: 40px 10px 0 0;
}
.plus-dashboard-inner {
padding-bottom: 30px;
}
.plus-dashboard-page .tooltip-wrap {
padding-left: 9px;
}
} /* end mobile */
@media only screen and (max-width: 600px) {
.tab-content-synopsis .two-columns {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
.touch .shop-detail-feature {
padding: 20px;
}
}
@media only screen and (max-width: 520px) {
.basket-product {
padding-top: 15px;
padding-bottom: 15px;
}
.basket-product-qps {
clear: both;
}
.basket-product-qps .basket-product-qps-content {
padding-left: 14px;
}
.basket-product-image {
margin-right: 10px;
}
.basket-product-image a {
width: 80px;
margin-bottom: 10px;
}
.basket-product-title {
font-size: 18px;
line-height: 20px;
}
.basket-product-author {
font-size: 15px;
line-height: 17px;
}
.basket-product-qps .perk-list li {
margin-bottom: 0;
}
#ebook-popup {
width: 100%;
left: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 500px) {
.tab-content-synopsis .two-columns {
-webkit-column-gap: normal;
-moz-column-gap: normal;
column-gap: normal;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.row .address-block {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
} /* end 500px */
@media only screen and (max-width: 480px) {
.main-blog-page h1.page-title {
max-width: calc(100% - 50px);
}
h1.page-title {
margin-bottom: 5px;
}
.card-fields-container .label-container {
float: none;
height: auto;
display: block;
margin: 0 0 10px 0;
}
.basket-promo-form {
max-width: none;
}
.basket-promo-form .label-container {
float: none;
}
.basket-subtotal .value.basket-promo-form-amount {
float: none;
display: block;
text-align: right;
}
.no-touch .basket-promo-form {
margin-top: -20px;
}
.basket-promo-form-amount {
margin-top: 0;
}
.order-books {
display: none;
}
.order-overview {
line-height: 44px;
}
.order-overview-details {
line-height: 1;
}
.account-content .payment-card-block .input-wrapper {
clear: left;
}
.payment-card-block .block-head .card-default {
display: block;
text-align: right;
margin-right: 0;
padding-right: 0;
}
.book-list-book .book-image {
float: none;
max-width: none;
height: 120px;
margin-right: 0;
background: #e2e2e2;
margin-bottom: 4px;
}
.payment-card-block .block-head .card-default {
line-height: inherit;
margin-bottom: 5px;
}
.account-content .order-block .block-head .input-wrapper {
margin-top: 0;
}
} /* end 480px */
@media only screen and (max-width: 450px) {
.account-content .payment-card-block .address-container {
overflow: visible !important;
}
.account-content .address-container {
clear: both !important;
}
.book-info {
overflow: visible;
}
ol.progress li span {
display: none;
}
.saved-address-label {
float: none;
width: auto;
height: auto;
margin: 0 0 5px 0;
}
.address-container {
margin-left: 0;
}
.footer-col ul.socials li a {
padding-left: 5px;
padding-right: 5px;
}
.standard-shipping > ul > li,
.standard-shipping > ul > li:nth-child(n) {
width: 100%;
padding: 0;
}
.touch .shop-detail-feature .detail-box {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 15px;
}
.touch .shop-detail-feature .inner h1 {
margin-top: 20px;
}
.events-result .event-preview {
width: 100px;
margin-right: 10px;
}
.bestsellers-list > ul > li {
float: none;
width: auto;
padding-right: 0;
padding-left: 60px;
}
.bestsellers-list > ul > li:before {
left: 0;
}
.home-row .preview-image-content {
width: 100%;
}
.order-overview-details {
text-align: left;
}
} /* end 450px */
/* iPhone 6 Plus */
@media only screen and (max-width: 414px) {
.submit-container label {
float: none;
margin-top: 0;
}
.card-fields-container .input-wrapper {
padding-right: 0;
}
.panel-payment-card {
padding-top: 10px;
}
.basket-final-total .basket-subtotal-values {
float: none;
display: block;
text-align: right;
margin-bottom: 20px;
}
.inline-radios > label {
float: none;
margin-right: 0;
margin-left: 0;
}
.inline-radios fieldset {
float: none;
}
.inline-radios fieldset > label {
width: 100%;
display: block;
margin-right: 0px;
margin-left: 0px;
}
.confirm-print .button {
width: 100%;
margin-bottom: 4px;
}
.confirm-print .button:first-child {
margin-bottom: 10px;
}
.find-shops .other-filters .floater {
float: none;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
.find-shops .other-filters .floater.invisible {
display: none;
}
.find-shops .other-filters .button {
float: none;
width: 100%;
margin-right: 0;
}
.find-shops .other-filters input {
margin-bottom: 8px;
}
.find-shops .other-filters {
padding-right: 0;
}
.find-shops .other-filters .input {
border-right: 1px solid #D1D1D1 !important;
}
.find-shops .other-filters .input:focus,
.find-shops .other-filters .input:active {
border-right: 2px solid #336b75 !important;
}
.book-detail .star-rating {
float: none;
display: block;
margin-bottom: 5px;
}
.filter-responsive .button-filter-results {
float: none;
width: 100%;
}
.filter-responsive .button-filter-results:before {
content: "Open Filters";
}
.filter-responsive .sort {
float: none;
clear: both;
}
.filter-responsive .sort .ws-select-outer {
width: 100%;
}
.book-detail-cnc-postcode .title br {
display: block;
}
.touch .shop-detail-feature {
padding: 0;
margin: 0 0 30px 0;
background: none;
}
.shop-detail-feature .inner {
min-height: auto;
}
.touch .shop-detail-feature .inner {
width: 100%;
background: #fff;
}
.touch .shop-detail-feature .inner h1 {
margin: 0;
}
.touch .row .detail-box {
float: none;
min-height: 0;
width: 100%;
padding: 0;
}
.results-header .pagination.invisible {
display: none;
}
.filter-responsive .sort select,
.filter-responsive .sort .ws-select-outer {
margin-bottom: 10px;
}
.main-blog-page .header-actions form {
float: none;
clear: both;
width: 100%;
}
.main-blog-page .header-actions .ws-select-outer {
max-width: none;
}
.blog-detail p.pullquote-right {
float: none;
width: 100%;
margin: 20px 0;
}
.touch .shop-detail-feature .inner {
min-width: 0;
}
.checkout-login-remember-password {
float: left;
clear: both;
margin-top: 0px;
}
.checkout-login-remember-password .checkbox-label.inverted > .ws-checkable-outer {
float: left;
margin-left: 0;
margin-right: 5px;
}
.checkout-login-forgotten-link {
margin-top: -4px;
}
} /* end 414px */
/* iPhone 6 */
@media only screen and (max-width: 375px) {
.confirm-cv2 input {
float: none;
}
.confirm-cv2 .inline-help-container {
line-height: 1;
}
.search-result-header + * {
clear: both;
}
.side-basket.main-checkout-basket .side-basket-thumbnail-small {
width: 72px;
height: 72px;
}
.socials a span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#reset-form .floater.invisible {
display: none;
}
#reset-form .floater.invisible ~ .floater {
position: static;
top: auto;
right: auto;
}
.delivery-address-form .clear-current-form {
padding: 0;
background: 0;
font-size: 14px;
text-decoration: underline !important;
color: #336b75 !important;
}
}
@media only screen and (max-width: 580px) {
html.touch .books_carousel:not(.slick-initialized) {
max-height: 350px;
}
.books_carousel:not(.slick-initialized) .book-preview {
width: 50%;
}
}
@media only screen and (max-width: 900px) {
.pod_slider4:not(.slick-initialized) {
padding-bottom: 23.5%;
}
.pod_slider4:not(.slick-initialized) > div:nth-child(1n+4) {
opacity: 0;
}
}
@media only screen and (max-width: 780px) {
.pod_slider3:not(.slick-initialized),
.pod_slider4:not(.slick-initialized) {
padding-bottom: 33.7%;
}
.pod_slider3:not(.slick-initialized) > div:nth-child(1n+3),
.pod_slider4:not(.slick-initialized) > div:nth-child(1n+3) {
opacity: 0;
}
.touch .pod_slider2,
.touch .pod_slider3,
.touch .pod_slider4 {
margin: 0;
width: 127vw;
}
.touch .pod_slider2 .slick-arrow,
.touch .pod_slider3 .slick-arrow,
.touch .pod_slider4 .slick-arrow {
display: none !important;
}
}
@media only screen and (max-width: 590px) {
.pod_slider2:not(.slick-initialized),
.pod_slider3:not(.slick-initialized),
.pod_slider4:not(.slick-initialized) {
padding-bottom: 61%;
}
.pod_slider2:not(.slick-initialized) > div:nth-child(1n+2),
.pod_slider3:not(.slick-initialized) > div:nth-child(1n+2),
.pod_slider4:not(.slick-initialized) > div:nth-child(1n+2) {
opacity: 0;
}
.pod_slider2:not(.slick-initialized) > *,
.pod_slider3:not(.slick-initialized) > *,
.pod_slider4:not(.slick-initialized) > * {
width: 100% !important;
}
.touch .pod_slider2,
.touch .pod_slider3,
.touch .pod_slider4 {
width: 150vw;
}
}
@media only screen and (max-width: 767px) {
.reviews-sidecol .add-basket .button:nth-of-type(2) {
margin-top: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 403px) {
.reviews-sidecol .add-basket .button:nth-of-type(2) {
margin-top: 15px;
}
}
@media only screen and (max-width: 529px) {
header .header-bar li:nth-child(2):before {
content: "";
}
}
@media (min-width: 800px) and (max-width: 1110px) {
.book-preview-side .add-basket,
.book-preview-side .price:not(.book-detail) {
display: flex;
flex-direction: column;
align-items: center;
}
.book-preview-side .price button {
margin-top: 10px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
.header-bar a.basket:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAcCAYAAACK7SRjAAAFT0lEQVRIDQXBy4+VdxkA4Of9fd+5zsBw6VAolBYMYAzG2lRj0hqMiRtjojFxqS5048qNG1248i9w4V43Lty4MBpXGhPTqtUGrIhIQa4FyjD3M+ec7/L6PJGZAAAAAAAQqFChRo0asI8FEqCGn//ke5Tw7R/9rMLo4e3ra91ysdq2y9F8f291d3vj8HI+eyH77mymV7pmeaZpFi/2bXusaeaHFrO9Uanq+9PVIz+ez3Z+u/P8I0lTA46NJitf/Mvvfjk88uKZN/qu/dTT+7cubTy+d7xZLquuawsZpaqjroeGo0kOxxPTw0cMhuOoqrrv2+bM1saT7+9vb17BIPhpDdVgcHEx2/vVjX/8yZkLn1y8/oWv1X3fla5tYzgaSUUpRakqEUXfd9EsDhzs7dicPbKc71fN/OBI2zZXhCsQ/KaG0WRlMtvdUqqSk+nq6Pb7f3Xv5lWyt5jPNIu5vmsFEoGEIJMAgCQRVDVUVT2FUupo28bOw9t2Nh4TSAASkABCiTAYDrVNo+87AMm4wHjl0BokCIPRmAgSQT0cGU1WEAQCkKmqa+unz5sePtoBBDApiNFkdR1IpBJBJiCMp4ecvfSaqq5JQBDITKPpqtFkpQCAMCnQ990Y9AkIIoBMi9meI+svKXUtISFAPRwqpdK3TYgggEyTgpztbjaJhESEAAia5dzmkwdOvnxBQEBKrJ8+bzRdsbv1LGXKBIJxDbPdra4E0GevlCIzJSKBuzfec/HTb7n0+uc9vn9LVWrrp88ZjMbu3vi7tm0CAJJJDV3T1JmU7MmkFBCAxHI5d/v9d6yf+ZgTp8+D/Z1NG4/vme1sapsFpagHQ4QIkxp6xoJMoEQQSDJTZieT2d6OB//9J0lKIXR9Z7Kyam39EsJHj+7olgullGkB2Y8lKfV9JyNIMhlPVqweXbd++lWT1TV9n8594g1vfuVbLr7+luViZjg95DNf+oZjJ05rlnNK6JkWwCSRgkSSfS+71slXLvryN3/gyle/qyq1rplbzPedv/xZB/u7moMD891tH1x7272bV/VtixARowKYBGRKqZQiSlGq4sa7f/DRwzvKYGAxn4H93S1RihdOvaLLznTtuOVyYbGYiVIJyJwWkCYCgSQzQVSVKJW7/3nPyuqatfVTur63euS47WePnTr3cSuHjqjr2nK2p1nM1FUFMC2QciSBCEopoE/q4ciHt687ONhz4sw5EcVk5ZB/v/tHh4+uO3n2oq5d2t9+rms7IgDGBaSxQKbM1CeBItWDke3NZ55/eM/ZC69ZOXxMJvduXrVYzp25cFmpBxaLmcyeCAkMCkSYAGSmQKJPIoJMd97/m+MnX3by7AV7Wxu2nj705O5N5y5/zuracYu9XSUqMgVQF5DGAEACyGQwHHl0+7qu65y7/Iatpw9l9h59cN3hoy+YHFoz29tSqgoEMCiQjCSQfS8iQIBU1QN728/tbHzo6PFT9ne3lKhsPH1g9/kTs+1NXdeKUggSSV1DMg4kEhEBAELos/XofzccPvqitlmoB0MHezuu/fn3Np/cVw3HZEoEUNcQcgARREAAgSQj1YOxW9feNhhOVPVAVdeag30fXHtHRhoMRwIiyBScqgEnAPq+l5lAApKqquxtPpNJXQ8kSH3fiSgiQk9G5hM8FK7WEPyw1IPvdG3zZrM4aDNTUkcEkKlHlNJHep48Ep5mxtNS1Y9k3hbuBQ+JZzIX0rwG/OLUq5d+HVX99Xow/HrbLF6aTFdOtk3zr65ZXk9uRcSdSA8yPBGxK7OPiE5mjxa9RJAIRGYCQMEUAyxwgAQAAAAAAAD4P0qBqCVyYqKZAAAAAElFTkSuQmCC);
}
}
.basic-slider .loading-slide:before, .b-wrap.b-loading:before {
content: "";
display: block;
width: 40px;
height: 40px;
position: absolute;
left: calc(50% - 20px);
top: 50%;
background: url(../img/loading-icon.png);
background-size: contain;
background-repeat: no-repeat;
animation: spin 1000ms infinite linear;
}
.b-wrap {
position: relative;
z-index: 1;
float: left;
width: 100%;
margin: 20px 0 30px;
}
.b-wrap.no-products {
display: none;
}
.b-wrap.b-loading .basic-slider .basic-arrow-wrap {
display: none;
}
.b-wrap .b-slider-heading {
color: #9e866b;
margin: 0;
font-size: 28px;
}
@media only screen and (max-width: 640px) {
.b-wrap .b-slider-heading {
font-size: 25px;
}
}
.b-wrap .b-slider-description {
font-size: 17px;
font-weight: 500;
float: none;
color: #000;
}
@media only screen and (max-width: 640px) {
.b-wrap .b-slider-description {
font-size: 14px;
line-height: 1.2em;
margin-top: 5px;
}
}
.basic-slider {
margin: 20px 0 30px;
position: relative;
}
.basic-slider .b-wrapper-container {
overflow: hidden;
}
.basic-slider .basic-wrapper {
display: flex;
overflow: auto;
overflow-y: hidden;
padding-bottom: 20px;
margin-bottom: -20px;
}
.basic-slider .basic-wrapper .product {
width: 18.2%;
text-align: center;
flex-shrink: 0;
flex-grow: 0;
margin-top: 0;
}
@media only screen and (max-width: 768px) {
.basic-slider .basic-wrapper .product {
width: 28%;
}
}
@media only screen and (max-width: 640px) {
.basic-slider .basic-wrapper .product {
width: 40%;
}
}
.basic-slider .basic-wrapper .product.hid {
opacity: 0;
}
.basic-slider .basic-wrapper .product.placeholder-product {
opacity: 0;
}
.basic-slider .basic-wrapper .product.placeholder-product .placeholder-content {
height: 86px;
}
.basic-slider .basic-wrapper .product .image-bkgd {
background: #fff;
}
.basic-slider .basic-wrapper .product .image {
display: flex;
cursor: pointer;
width: 100%;
height: 0;
padding-bottom: 144%;
position: relative;
text-align: center;
background: #fff;
}
.basic-slider .basic-wrapper .product .image img {
max-width: 100%;
max-height: 100%;
display: inline-block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding: 20px 10%;
}
@media only screen and (max-width: 640px) {
.basic-slider .basic-wrapper .product .image img {
padding: 6px 6%;
}
}
.basic-slider .basic-wrapper .product .title,
.basic-slider .basic-wrapper .product .author,
.basic-slider .basic-wrapper .product .book-price {
padding: 0 6%;
}
.basic-slider .basic-wrapper .product .title {
font-weight: 400;
font-size: 17px;
font-family: Baskerville, serif;
color: #003746;
min-height: 20px;
max-height: 40px;
}
.basic-slider .basic-wrapper .product .author {
color: #9e866b;
font-weight: 600;
font-size: 14px;
margin: 5px 0;
min-height: 16px;
}
.basic-slider .basic-wrapper .product .book-price {
min-height: 21px;
}
.basic-slider .basic-wrapper .product .book-price .price,
.basic-slider .basic-wrapper .product .book-price .price-rrp {
color: #003746;
font-size: 18px;
font-weight: 600;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.basic-slider .basic-wrapper .product .book-price .price-rrp {
color: #999;
margin-right: 6px;
font-size: 16px;
}
.basic-slider .loading-slide {
width: 100px;
min-height: 100%;
flex: 1 0 auto;
position: relative;
background: #fff;
}
.basic-slider .loading-slide:before {
top: calc(50% - 20px);
}
.basic-slider .back-to-start-slide {
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
width: 150px;
padding: 0 50px 0 30px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
flex-direction: column;
color: #003648;
background: #fff;
}
.basic-slider .back-to-start-slide:before {
content: "";
display: block;
width: 60px;
height: 60px;
flex: 0 0 auto;
margin-bottom: 10px;
background-image: url(../img/tag-browser/back-to-start-chevron.png);
background-size: contain;
background-repeat: no-repeat;
}
.basic-slider .basic-arrow-wrap {
top: 0;
position: absolute;
bottom: 0;
width: 50px;
display: none;
pointer-events: none;
}
.basic-slider .basic-arrow-wrap.basic-button-prev {
left: 10px;
}
.basic-slider .basic-arrow-wrap.basic-button-prev .basic-arrow {
transform: translateY(-50%) rotate(180deg);
}
.basic-slider .basic-arrow-wrap.basic-button-next {
right: 10px;
}
.basic-slider .basic-arrow-wrap .basic-arrow {
width: 50px;
height: 50px;
background-image: url(../img/tag-browser/chevron-darkteal.png);
display: block;
background-size: 33%;
background-repeat: no-repeat;
background-position: 18px center;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 50%;
cursor: pointer;
pointer-events: all;
}
.touch .basic-slider .basic-arrow-wrap {
display: none !important;
}
@charset "UTF-8";
/*
CSS used on tag browser template
AKA gift finder
Related template: /application/views/default/page_components/tag_browser.tpl
*/
.theme-tagged-browsing .main-page {
background: #fffdfa;
}
.theme-tagged-browsing .backtotop {
right: 10px;
border-radius: 50%;
height: 42px;
background-color: rgba(37, 58, 84, 0.8);
border: 2px solid #253a54;
}
.tag-browser {
overflow: hidden;
margin: 0px 14px 30px;
}
.touch .tag-browser {
overflow: visible;
}
.tag-browser-intro-wrap {
padding: 20px 0;
display: flex;
}
.tag-browser-intro-wrap .theme-img {
text-align: center;
}
.tag-browser-intro-wrap .theme-img img {
width: 100%;
max-width: 270px;
}
.tag-browser-intro-wrap .theme-intro {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.tag-browser-intro-wrap .theme-intro h1 {
font-style: italic;
text-transform: none;
font-family: Baskerville, serif;
font-size: 36px;
letter-spacing: -0.02em;
margin: 0;
}
@media only screen and (max-width: 640px) {
.tag-browser-intro-wrap .theme-intro h1 {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 15px;
text-transform: uppercase;
font-style: normal;
font-weight: bold;
}
}
.tag-browser-intro-wrap .theme-intro p {
font-size: 18px;
line-height: 25px;
font-weight: 500;
color: #000;
margin-bottom: 0;
}
@media only screen and (max-width: 640px) {
.tag-browser-intro-wrap .theme-intro p {
font-size: 14px;
line-height: normal;
padding: 0 2px;
}
}
.tag-browser-intro-wrap .theme-intro .theme-intro-copy {
max-width: 360px;
}
@media only screen and (max-width: 640px) {
.tag-browser-intro-wrap {
padding: 10px 0;
margin: 0 -2px !important;
}
.tag-browser-intro-wrap .theme-intro p {
margin: 5px 0 0;
}
.tag-browser-intro-wrap .theme-img {
padding-right: 4px;
}
.tag-browser-intro-wrap .theme-img img {
float: left;
}
}
/* pill filters */
.pill-filter-container {
overflow: hidden;
}
html.touch .tag-browser,
html.touch .pill-filter-container {
overflow: visible;
}
.no-child-categories .pill-children {
display: none !important;
}
#floating-pills {
position: fixed;
top: -180px;
left: 0;
width: 100%;
transition: top 0.5s, background-color 0.3s, box-shadow 0.3s;
padding-top: 10px;
background-color: #fffdfa;
z-index: 2;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}
#floating-pills .pill-filter-container {
width: calc(100% - 48px);
max-width: 1260px;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
#floating-pills {
padding-left: 10px;
}
#floating-pills .pill-filter-container {
width: 100%;
margin: 0;
}
}
.tag-buttons-wrap {
margin-bottom: 12px;
position: relative;
height: 45px;
}
.tag-buttons-wrap.collections .pill {
background-color: #fff;
color: #003746;
}
.tag-buttons-wrap .tag-swiper {
position: absolute;
right: 0;
width: 100%;
overflow: hidden;
height: 45px;
}
.tag-buttons-wrap .pill {
background: #7c9cab;
color: #fff;
margin-right: 7px;
border-radius: 40px;
font-size: 14px;
font-weight: 600;
text-transform: none;
padding: 5px 10px;
border: 1px solid #003746;
width: auto;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.tag-buttons-wrap .pill.active {
display: flex !important;
background-color: #003746;
color: #fff;
}
.tag-buttons-wrap .pill.active:after {
content: "×";
font-size: 24px;
margin-left: 5px;
line-height: 10px;
}
.tag-buttons-wrap .pill.pill-parent.active:after {
margin-left: 0;
}
.tag-buttons-wrap .pill .pill-children {
flex-wrap: nowrap;
display: flex;
overflow: hidden;
}
.tag-buttons-wrap .pill .pill-children .pill {
float: left;
padding: 7px 10px;
font-size: 12px;
font-weight: normal;
border: 1px solid #7c9cab;
}
.tag-buttons-wrap .pill .pill-label {
padding: 7px 6px;
}
.tag-buttons-wrap .pill span {
display: none;
}
.tag-buttons-wrap .pill-children .pill.active:after {
font-size: 20px;
margin-top: 3px;
}
.tag-buttons-wrap .pill-slide {
position: absolute;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
background: rgba(83, 108, 116, 0.8);
height: 45px;
width: 34px;
background-image: url("../img/white-arrow.png");
background-size: 26px;
background-position: 7px center;
background-repeat: no-repeat;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.tag-buttons-wrap .pill-slide.showing {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.tag-buttons-wrap .pill-slide[data-direction=right] {
right: 0;
}
.tag-buttons-wrap .pill-slide[data-direction=left] {
left: 0;
transform: rotate(180deg);
}
.touch .tag-buttons-wrap .pill-slide {
display: none;
}
.swiper-free-mode > .swiper-wrapper {
margin: 0;
}
@media only screen and (max-width: 1280px) {
.tag-buttons-wrap .tag-swiper {
overflow: visible;
}
}
/* Carousels */
html.touch .tag-carousels-wrap {
margin-left: -10px;
margin-right: 10px;
width: calc(100% + 20px);
overflow: hidden;
}
html.touch .b-slider-heading,
html.touch .b-slider-description {
padding-left: 20px;
}
@media only screen and (max-width: 640px) {
html.touch .b-slider-heading {
padding-right: 16%;
}
}
.tag-browser .b-wrap {
display: none;
}
.tag-browser .b-wrap.coll-on {
display: block;
}
.tag-browser .b-wrap.coll-on.no-products {
display: none;
}
.tag-browser .b-wrap .basic-slider {
margin-top: 10px;
margin-bottom: 0;
}
.tag-browser .grid-view .load-more,
.tag-browser .load-previous {
padding: 0 22px;
border: 1px solid #003746;
font-weight: normal;
color: #003746;
background: #fff9f1;
cursor: pointer;
width: 200px;
margin: auto;
text-transform: uppercase;
line-height: 36px;
display: none;
}
.tag-browser .load-previous {
margin-top: 20px;
}
.tag-browser .grid-view .load-more {
display: none;
margin-top: 25px;
color: #fff;
background: #336b75;
border-color: #336b75;
}
/* clear all */
.tag-browser .clear-all {
float: left;
color: #003746;
font-size: 14px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
text-decoration: underline;
opacity: 0;
white-space: nowrap;
min-height: 36px;
transition: opacity 0.3s;
line-height: 36px;
}
.tag-browser .clear-all.showing {
opacity: 1;
}
/* item-count */
.item-count {
float: right;
color: #003746;
font-size: 14px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.01em;
}
/* refine drawer */
#filter-refine {
float: right;
padding: 8px 40px 8px 12px;
margin-left: 8px;
margin-bottom: 7px;
border: 1px solid #003746;
font-weight: normal;
color: #003746;
background: #fff;
background-image: url("../img/tag-browser/refine.png");
background-size: 22px;
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
#filter-refine.activated {
background-image: url("../img/tag-browser/tick-navy.png");
background-size: 20px;
}
.theme-tagged-browsing .slidey {
margin: 20px 10px 10px;
}
.theme-tagged-browsing .slidey .ui-slider-handle {
background: #003746;
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: -8px;
margin-left: -10px;
}
.theme-tagged-browsing .ui-slider {
height: 3px;
}
.theme-tagged-browsing .ui-slider-range {
background: #003746;
}
/* toggle view */
.toggle-view {
float: right;
padding: 6px 0 6px 14px;
}
.toggle-view-button {
width: 21px;
height: 21px;
background-image: url("../img/tag-browser/view-grid-g.png");
background-size: contain;
background-repeat: no-repeat;
float: left;
cursor: pointer;
}
.toggle-view-button.active {
background-image: url("../img/tag-browser/view-grid.png");
}
.toggle-view-button#carr {
margin-right: 10px;
width: 32px;
background-image: url("../img/tag-browser/view-carr-g.png");
}
.toggle-view-button#carr.active {
background-image: url("../img/tag-browser/view-carr.png");
}
/*carousel view */
.swiper-zoom .image-container {
height: 253px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
}
.swiper-zoom .swiper-slide-active .image-container {
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 640px) {
.swiper-zoom .image-container {
height: 185px;
}
.tag-buttons-wrap .pill .pill-children .pill {
font-size: 14px;
}
}
/* grid view */
.grid-view {
text-align: center;
}
.grid-view .product-list {
display: flex;
clear: both;
flex-wrap: wrap;
}
.grid-view .product-list .product {
width: 16.65%;
padding: 0 10px;
text-align: center;
opacity: 1;
transition: opacity 0.8s;
padding-bottom: 30px;
}
.grid-view .product-list .product.hid {
opacity: 0;
}
.grid-view .product-list .product .image {
height: 290px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
}
.grid-view .product-list .product .image img {
max-width: 100%;
max-height: 100%;
display: block;
flex: 0 0 auto;
}
.grid-view .product-list .product .title {
font-weight: 400;
font-size: 17px;
font-family: Baskerville, serif;
color: #003746;
}
.grid-view .product-list .product .author {
color: #9e866b;
font-weight: 600;
font-size: 14px;
margin: 5px 0;
}
.grid-view .product-list .product .price,
.grid-view .product-list .product .price-rrp {
color: #000;
font-size: 18px;
font-weight: 600;
font-family: "Source Sans Pro", Arial, sans-serif;
}
.grid-view .product-list .product .price-rrp {
color: #999;
margin-right: 6px;
font-size: 16px;
}
.grid-view .loading-gif {
position: relative;
height: 60px;
display: none;
}
.grid-view .loading-gif:before {
content: "";
display: block;
width: 40px;
height: 40px;
position: absolute;
left: calc(50% - 20px);
top: 10px;
background: url(../img/loading-icon.png);
background-size: contain;
background-repeat: no-repeat;
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@media only screen and (max-width: 1200px) {
.grid-view .product-list .product {
width: 20%;
}
.grid-view .product-list .product .image {
height: 26vw;
}
}
@media only screen and (max-width: 768px) {
.tag-browser {
margin: 0 0 30px;
}
.grid-view .product-list .product {
width: 25%;
}
.grid-view .product-list .product .image {
height: 32vw;
}
.touch #floating-pills #filter-refine {
margin-right: 10px;
}
}
@media only screen and (max-width: 640px) {
.grid-view .product-list .product {
width: 50%;
}
.grid-view .product-list .product .image {
height: 64vw;
}
.zm-wrap {
min-height: 410px;
}
.zm-wrap .zm-slider-description {
font-size: 14px;
line-height: normal;
}
}
/* No results message */
.no-results-msg {
float: left;
width: 100%;
padding-top: 20px;
color: #003746;
font-weight: 400;
display: none;
}
.no-results-msg .clear-filters {
text-transform: uppercase;
text-decoration: underline;
cursor: pointer;
}
/* Slide Drawer */
.noscroll {
position: fixed;
overflow: hidden;
}
.noscroll .main-page {
width: 100vw;
}
.no-touch .noscroll .main-nav {
position: fixed;
top: 39px;
z-index: 101;
}
.sd-overlay {
position: fixed;
background: rgba(0, 0, 0, 0.7);
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
z-index: 999;
display: none;
cursor: pointer;
}
.slide-drawer {
position: fixed;
top: 0;
right: -100%;
bottom: 0px;
left: 100%;
z-index: 1000;
padding: 0;
margin: 0;
transition: left 0.5s, right 0.5s;
width: 380px;
}
.slide-drawer.sd-open {
right: 0;
left: auto;
}
.sd-close-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 100%;
z-index: 2;
}
.sd-close {
width: 50px;
height: 100%;
line-height: 60px;
text-align: center;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
color: #fff;
font-size: 80px;
font-weight: lighter;
z-index: 1;
display: none;
}
.slide-drawer .sd-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: calc(100vw - 50px);
max-width: 330px;
background: #fff;
z-index: 2;
overflow: auto;
padding-right: 4px;
}
@media only screen and (max-width: 640px) {
.slide-drawer,
.sd-close-wrap {
width: 100%;
}
}
/* Quick View */
.quick-view {
color: #000;
}
.qv-main-img-wrap {
float: left;
width: 50%;
height: 330px;
text-align: center;
padding: 0 14px;
}
.qv-info-wrap {
float: left;
width: 50%;
padding: 8px 14px;
}
.qv-main-img {
max-height: 100%;
max-width: 100%;
display: none;
}
.qv-image-swiper {
width: 100%;
height: 100%;
padding: 0 30px;
overflow: hidden;
position: relative;
display: none;
}
.qv-image-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.qv-image-swiper img {
max-width: 100%;
max-height: 100%;
}
.qv-image-swiper .swiper-pagination {
right: auto;
left: 3px;
}
.qv-image-swiper .swiper-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
margin: 20px 0;
cursor: pointer;
}
.qv-image-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #336b75;
}
.qv-title {
font-weight: 400;
font-size: 21px;
font-style: normal;
font-family: Baskerville, serif;
color: #000;
}
.qv-format {
font-weight: 400;
color: #000;
margin: 4px 0 6px;
}
.qv-author {
color: #9e866b;
font-weight: 500;
font-size: 17px;
}
.qv-flexend-row {
display: flex;
align-items: flex-end;
}
.qv-specs {
font-size: 13px;
display: block;
color: #5c5c5c;
font-style: italic;
font-weight: normal;
}
.qv-price-wrap {
padding-left: 10px;
border-left: 1px solid #fff;
margin-left: 10px;
}
.qv-price-rrp,
.qv-price {
font-size: 16px;
font-family: "Source Sans Pro", Arial, sans-serif;
display: inline-block;
}
.qv-price-rrp {
position: relative;
opacity: 0.5;
font-size: 14px;
margin-right: 8px;
display: inline-block;
display: none;
}
.qv-price-rrp:after {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 50%;
border-bottom: 1px solid;
}
.qv-input-quantity {
display: none;
width: 50px !important;
text-align: center;
}
@media only screen and (max-width: 640px) {
.qv-input-quantity {
height: 30px !important;
width: 40px !important;
}
}
.qv-basket-form .pre-add.buy-inner {
text-align: right;
}
.quick-view .post-add .button-container .button,
.qv-basket-form .button-buy,
.qv-basket-form .collect-open {
font-size: 17px;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.qv-collect-btn-wrap,
.qv-submit-btn-wrap {
width: 100%;
display: none;
}
.qv-collect-btn-wrap {
margin-top: 10px;
}
@media only screen and (max-width: 640px) {
.qv-collect-btn-wrap {
margin-top: 8px;
}
}
.qv-basket-form .pre-add.buy-inner .button-container {
display: inline-block;
width: 100%;
}
.qv-basket-form .post-add {
display: none;
}
.qv-rating .star-rating {
float: right;
margin-right: 0;
padding-top: 2px;
margin-top: 0;
width: auto;
}
.qv-rating .star-icon {
color: #fff;
-webkit-text-stroke: 1px #336b75;
font-size: 15px;
}
.qv-rating .star-icon.full:before,
.qv-rating .star-icon.half:before {
color: #336b75;
}
.qv-reviews {
cursor: pointer;
}
.qv-review-count {
display: inline-block;
float: right;
text-decoration: underline;
text-align: right;
margin-top: 0;
}
.row.qv-button-container {
margin-top: 14px;
}
@media only screen and (max-width: 640px) {
.row.qv-button-container {
margin-top: 12px;
}
}
.qv-accordion-wrap {
padding-top: 14px;
margin: 0 14px;
border-bottom: 1px solid #ddd;
clear: both;
}
.qv-submit-btn-wrap:not(.prod-available) {
padding-right: 10px;
}
.qv-submit-btn-wrap:not(.prod-available) .qv-stock-msg {
font-weight: 600;
}
.qv-collect-wrap,
.qv-stock-wrap {
padding-top: 10px;
}
.qv-collect-wrap,
.prod-available .qv-stock-wrap {
font-size: 14px;
padding-left: 20px;
padding-top: 5px;
background-image: url("../img/tag-browser/tick-teal.png");
background-size: 16px;
background-repeat: no-repeat;
background-position: 0 6px;
text-align: left;
}
.qv-collect-msg,
.prod-available .qv-stock-msg {
color: #336b75;
font-weight: 600;
}
.quick-view .qv-collect-msg {
color: #9e866b;
}
.qv-collect-wrap {
display: none;
}
.qv-collect-wrap.is-in-stock {
background-image: url("../img/tag-browser/tick-bronze.png");
}
.qv-collect-wrap:not(.is-in-stock) {
background: none;
padding-left: 0;
}
.ico-locate {
display: inline-block;
background-image: url("../img/ui/locate-marker-arrow.png");
background-size: contain;
background-repeat: no-repeat;
width: 12px;
height: 12px;
margin-bottom: -1px;
margin-left: 3px;
}
.qv-accordion-wrap .ws-acc-trigger {
width: 100%;
text-transform: uppercase;
border-top: 1px solid #ddd;
font-weight: 400;
padding: 10px 0;
cursor: pointer;
color: #000;
position: relative;
}
.qv-accordion-wrap .ws-acc-trigger:before {
content: "";
background-image: url(../img/tag-browser/plus.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
width: 14px;
height: 14px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.qv-accordion-wrap .ws-acc-trigger.acc-open:before {
background-image: url(../img/tag-browser/minus.png);
}
.ws-acc-content {
display: none;
}
.ws-acc-content:last-child {
padding-bottom: 18px;
}
.acc-waterstones-says {
height: 50px;
background: url(../img/waterstones-says.png);
background-size: 170px;
background-repeat: no-repeat;
background-position: 0 8px;
}
.full-details-wrap a,
.full-details-wrap a:hover,
.full-details-wrap a:focus {
width: 100%;
display: block;
padding: 16px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #000;
}
.quick-view .content-waterstones-says,
.quick-view .content-synopsis,
.quick-view .content-description {
padding-bottom: 18px;
padding-right: 30px;
}
.quick-view .content-reviews {
padding-top: 10px;
}
.quick-view .single-review:not(:last-child) {
border-bottom: 1px solid #ddd;
padding-bottom: 18px;
margin-bottom: 14px;
}
.quick-view .reviews-list-item {
border-bottom: 1px solid #ddd;
padding-bottom: 18px;
margin-bottom: 14px;
}
.quick-view .user-picture {
width: 60px;
height: 60px;
margin-right: 10px;
}
.quick-view .reviews-header-top h3 {
margin: 0;
}
.quick-view .bookseller-review-tag {
margin: 14px 0;
}
.quick-view .review-content {
margin: 10px 0 18px;
}
.quick-view .user {
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
margin: 4px 0 20px;
color: #5c5c5c;
}
.quick-view .review-edition-rating .star-rating {
display: inline-block;
margin: 0 0 3px 10px;
}
.quick-view .review-edition-rating .star-icon {
font-size: 15px;
margin-right: 3px;
}
.quick-view .review-edition-rating .star-icon.full:before,
.quick-view .review-edition-rating .star-icon.half:before {
color: #336b75;
}
.slide-drawer.refine-filters .sd-inner {
background: #fffdfa;
color: #003746;
font-weight: 600;
display: flex;
flex-direction: column;
}
.refine-section {
padding: 15px;
border-bottom: 1px solid #ccc;
}
.refine-section:last-child(2) {
border: none;
}
.refine-section.prices .refine-options {
width: 100%;
display: flex;
justify-content: space-between;
}
.refine-section.prices select {
width: 80px;
}
.refine-section.view-filtered-items {
flex: 1;
display: flex;
flex-direction: column-reverse;
}
.refine-section.view-filtered-items .button-view-filtered-items {
display: block;
padding: 6px 0;
background: #003746;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: 400;
cursor: pointer;
}
.refine-section .title {
font-family: Baskerville, serif;
font-size: 22px;
font-weight: bold;
font-style: italic;
padding-left: 32px;
background-image: url("../img/tag-browser/refine.png");
background-size: 24px;
background-repeat: no-repeat;
background-position: left center;
position: relative;
line-height: 28px;
float: left;
}
.refine-section .apply-button {
position: absolute;
top: 0;
right: 0;
text-transform: uppercase;
font-weight: normal;
color: #fff;
background: #003746;
padding: 6px 14px;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
cursor: pointer;
}
.refine-section .clear {
float: right;
text-transform: uppercase;
text-decoration: underline;
cursor: pointer;
clear: none;
}
.refine-section .clear.clearbox {
background: #fff;
padding: 4px 8px;
border: 1px solid #003746;
text-decoration: none;
}
.refine-section .subtitle {
margin-bottom: 10px;
}
.refine-filters .refine-options label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 34px;
height: 32px;
position: relative;
cursor: pointer;
margin: 5px 0;
}
.refine-filters .refine-options label:before,
.refine-filters .refine-options label:after {
content: "";
position: absolute;
top: 3px;
left: 0px;
width: 22px;
height: 22px;
background: #fff;
border: 1px solid #5d7488;
}
.refine-filters .refine-options label:after {
background: url("../img/tag-browser/tick-navy.png");
border: 0;
background-size: 13px;
background-position: 1px 1px;
background-repeat: no-repeat;
opacity: 0;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
top: 8px;
left: 5px;
}
.refine-filters .refine-options input[type=checkbox]:checked + label:after {
opacity: 1;
}
.refine-filters .refine-options input[type=checkbox] {
display: none;
}
.refine-filters .refine-options label.disabled {
color: #aaa;
pointer-events: none;
}
.refine-filters .refine-options label.disabled:before {
background: #aaa;
border-color: #aaa;
}
.refine-filters .refine-options label.disabled:after {
background: none;
}
@media only screen and (max-width: 640px) {
.slide-drawer .sd-inner {
max-width: calc(100vw - 50px);
}
.qv-main-img-wrap {
width: 100%;
height: 282px;
padding: 2px 10px 10px;
}
.qv-info-wrap {
width: 100%;
padding: 0 8px;
}
.qv-title {
font-size: 17px;
line-height: 18px;
}
.qv-format {
font-size: 15px;
margin: 4px 0;
line-height: 15px;
}
.qv-author {
font-weight: 600;
font-size: 15px;
line-height: 15px;
}
.qv-stock-status {
font-size: 13px;
}
.qv-basket-form .button-buy,
.qv-basket-form .collect-open {
font-size: 14px;
}
.quick-view .content-waterstones-says,
.quick-view .content-synopsis,
.quick-view .content-description {
padding-right: 20px;
}
}
@media only screen and (max-width: 370px) {
.qv-main-img-wrap {
height: 62vw;
}
}
/* unfix the nav bar */
html.touch.safari .theme-tagged-browsing .main-nav-holder,
.touch .theme-tagged-browsing #masthead .header-bar,
.touch .theme-tagged-browsing #main-logos,
.touch .theme-tagged-browsing .nav-trigger-button,
.touch .theme-tagged-browsing .nav-shop-finder,
.touch .theme-tagged-browsing .search-trigger-button,
.touch .theme-tagged-browsing .header-basket {
position: absolute;
}
.touch .theme-tagged-browsing .main-nav-holder {
top: 0;
}
html.touch body.theme-tagged-browsing .site-ribbon.detached {
top: 0px;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.card-dex {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100%;
}
.card-dex:not(.cd-open) {
display: none;
}
.card-dex .card-dex-overlay {
position: fixed;
background: rgba(0, 0, 0, 0.7);
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
cursor: pointer;
z-index: 995;
}
.card-dex .card-dex-swiper {
overflow: hidden;
max-width: 1260px;
margin: 10px auto;
height: calc(100% + 15px);
position: relative;
z-index: 996;
cursor: pointer;
}
@media only screen and (max-width: 640px) {
.card-dex .card-dex-swiper {
margin: 1px -10px;
}
}
.card-dex .card-dex-swiper > * {
cursor: auto;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide {
width: 680px;
height: 100%;
position: relative;
opacity: 1;
transition: opacity 0.3s;
}
@media only screen and (max-width: 767px) {
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide {
width: calc(100vw - 40px);
}
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.invisible {
opacity: 0;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
width: 100%;
height: 100%;
overflow-y: scroll;
position: relative;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder:before {
content: "";
background: #fff;
border-radius: 15px;
pointer-events: auto;
transition: opacity 0.3s;
z-index: 11;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder .card {
width: 100%;
background: #fff;
border-radius: 15px;
padding: 30px;
min-height: 100%;
}
@media only screen and (max-width: 640px) {
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder .card {
padding: 12px 16px;
}
}
@media only screen and (max-width: 370px) {
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder .card {
padding: 10px;
}
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder .card .ws-acc-trigger {
display: none;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-dex-close {
position: absolute;
top: 0;
right: 0;
color: #000;
font-size: 30px;
text-decoration: none;
font-weight: normal;
padding: 12px 11px 11px;
line-height: 15px;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
@media only screen and (max-width: 640px) {
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-dex-close {
padding: 0px 8px;
}
}
@media only screen and (max-width: 370px) {
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-dex-close {
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-prev .card-holder:before, .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-next .card-holder:before {
opacity: 0.8;
}
.card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-active .card-holder:before {
opacity: 0;
pointer-events: none;
}
.card-dex:not(.with-collection) .qv-top-info {
display: none;
}
.card-dex.with-collection .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-dex-close {
top: 40px;
}
.card-dex.with-collection .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
margin-top: 40px;
height: calc(100% - 40px);
}
@media only screen and (max-width: 640px) {
.card-dex.with-collection .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
margin-top: 28px;
height: calc(100% - 28px);
}
}
.card-dex.with-collection .qv-top-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 996;
text-align: center;
}
.card-dex.with-collection .qv-top-info .qv-collection-name {
color: white;
width: 100%;
text-align: center;
margin-top: 10px;
font-size: 16px;
font-weight: normal;
}
@media only screen and (max-width: 640px) {
.card-dex.with-collection .qv-top-info .qv-collection-name {
font-size: 14px;
margin-top: 2px;
}
}
.card-dex.with-collection .qv-top-info .qv-collection-name .qv-pagination {
font-size: 80%;
margin-left: 4px;
}
.card-dex.with-collection .qv-top-info .qv-collection-tracker {
position: relative;
display: inline-block;
left: 0;
top: 0;
width: 100%;
max-width: 1260px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
}
@media only screen and (max-width: 640px) {
.card-dex.with-collection .qv-top-info .qv-collection-tracker {
top: -7px;
}
}
.card-dex.with-collection .qv-top-info .qv-collection-tracker #tracker {
position: absolute;
left: 0;
height: 100%;
background-color: #fff;
width: 10px;
transform: translateX(0);
transition: transform 0.3s;
}
.qv-slide-to-copy {
display: none;
}
.no-touch .card-dex .card-dex-swiper {
height: 100vh;
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-dex-close {
font-size: 40px;
padding: 16px;
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
background: #fff;
border-radius: 15px;
overflow: hidden;
padding: 45px 0;
height: calc(100% - 20px);
}
@media only screen and (max-width: 640px) {
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
padding-top: 12px;
}
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder .card {
padding: 0 30px;
height: calc(100% - 20px);
overflow-y: scroll;
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder:after {
content: "";
width: 50px;
height: 50px;
background-image: url("../img/tag-browser/chevron-darkteal.png");
background-color: rgba(255, 255, 255, 0.75);
display: block;
background-size: 33%;
background-repeat: no-repeat;
background-position: 18px center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40px;
border-radius: 50%;
box-shadow: 0px 0px 8px #aaa;
z-index: 11;
opacity: 0;
transition: opacity 0s;
transition-timing-function: ease-out;
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-prev .card-holder:after, .no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-next .card-holder:after {
opacity: 1;
transition: opacity 1s;
}
.no-touch .card-dex .card-dex-swiper > .swiper-wrapper > .swiper-slide.swiper-slide-prev .card-holder:after {
transform: translateY(-50%) rotate(180deg);
left: auto;
right: 40px;
}
.no-touch .card-dex.with-collection .card-dex-swiper > .swiper-wrapper > .swiper-slide .card-holder {
height: calc(100% - 60px);
}