html, body {
width: 100%;
height: 100%;
}
.home_wide_slider .slideshow_gallery_slider_container,
.home_wide_slider .slideshow_gallery_slider,
.home_wide_slider .slideshow_inner_container,
.home_wide_slider .slideshow_inner_container a,
.home_wide_slider .slideshow_inner_container img {
width: 100% !important;
height: auto !important;
aspect-ratio: 98 / 15;
}
.home_wide_slider .slideshow_gallery_slider_container {
position: relative;
}
.home_wide_slider .slideshow_gallery_slider {
z-index: 1;
}
.home_wide_slider .slideshow_left_browse {
top: 50% !important;
transform: translateY(-50%);
position: absolute !important;
z-index: 2;
}
.home_wide_slider .slideshow_right_browse {
top: 50% !important;
transform: translateY(-50%);
position: absolute !important;
z-index: 2;
right: 0 !important;
left: auto !important;
}
.modal_bg {
z-index: 9999999999 !important;
}
#instafeed.slick-slider {
margin-bottom: 13px;
}
#instafeed a {
display: block;
padding-bottom: 7rem;
position: relative;
background-color: #000;
border-right: 2px solid #000;
}
#instafeed a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:2;
opacity: 0;
transition: all 0.2s ease-out;
backdrop-filter: brightness(120%);
}
#instafeed a:hover::after {
opacity: 1;
}
.instagram-image {
width: 100%;
height: 0;
padding-top: 100%;
object-fit: cover;
position: relative;
z-index: 0;
background-size: cover;
background-position: center center;
}
.instagram-image::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
z-index:2;
box-sizing: border-box;
}
.instagram-caption {
background: linear-gradient(0deg, rgba(0,0,0,1) 73%, rgba(0,0,0,0) 100%);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 1.5rem 1rem 1.5rem;
box-sizing: border-box;
min-height: 7rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index:3;
}
@media all and (max-width: 730px) {
#instafeed a {
padding-bottom: 0;
}
.instagram-caption {
display: none;
}
}
.home_mob_reviews, .mob-academy-link {
display: none;
}
.mob-main-nav {
display: none;
}
@media all and (max-width: 730px) {
.home_top_reviews {
display: none;
}
.home_mob_reviews {
display: block;
}
#text-banner-widget-mob {
display: flex;
}
.mob-academy-link {
display: block;
background: #000;
color: #fff !important;
text-align: center;
font-size: 1.2rem;
padding: 1rem;
border-radius: 5px;
line-height: 1;
}
.mob-main-nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin: 0.5rem;
align-items: stretch;
}
.mob-main-nav.mob-main-nav--sub {
grid-template-columns: repeat(3, 1fr);
}
.mob-main-nav > * {
background: #fbcc37;
border-radius: 3px;
text-align: center;
color: #000 !important;
font-size: clamp(10px, 2.5vw, 1rem);
font-weight: bold;
padding: 0.25rem 3px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
}
.wish_list_link {
text-align: center;
font-size: 1.25em;
color: #fff !important;
display: block;
background: #666;
padding: 0.5em 0.5em 0.5em calc(0.5em + 30px);
transition: all 0.2s ease-out;
}
a + a.wish_list_link {
margin-top: 1.5em;
}
.wish_list_link:hover {
filter: brightness(1.1);
outline: 1px solid #fff;
}
.wish_list_link > span {
font-size: 2em;
width: 25px;
text-align: center;
margin-left: -30px;
margin-top: -3px;
position: absolute;
transition: all 0.4s ease-out;
}
.wish_list_link:hover > span {
transform: scale(1.3);
color: red;
}
.sheet_music_link {
display: none;
text-align: center;
font-size: 1.4em;
padding: 0 0.4em;
background: #FFCC00;
color: #000 !important;
font-weight: bold;
}
.sheet_music_link span {
text-decoration: underline;
display: inline-block;
}
.sheet_music_link img {
display: inline-block;
width: 18px;
height: 30px;
margin-right: 5px;
content-fit: cover;
}
@media all and (max-width: 730px) {
.sheet_music_link {
display: flex;
align-items: center;
justify-content: center;
}
}
#text-banner-widget {
height: 44px;
overflow: hidden;
}
@media all and (max-width: 730px) {
#text-banner-widget {
height: 62px;
}
}
.huge-promo-container a:hover > img {
filter: brightness(1.05);
}
.huge-promo-container img {
width: 100%;
height: auto;
transition: all 0.2s ease-out;
}
.top-announcement-container {
width: 984px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: stretch;
border: 1px solid rgba(255,255,255,0.2);
}
.top-announcement {
padding: 0.5em 0 0 0;
background: #000;
color: #fff !important;
display: block;
text-align:center;
font-size: 1.5em;
line-height: 1.2em;
box-sizing: border-box;
width: 80%;
transition: all 0.2s ease-out;
}
.mob-announcement-container {
display: none;
}
@media all and (max-width: 730px) {
.top-announcement-container {
height: 2.2rem;
width: 100%;
}
.top-announcement-container .top-announcement {
display: none;
}
.mob-announcement-container {
display: block;
background: #000;
}
.mob-announcement-container .top-announcement {
padding: 0.5rem;
font-size: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mob-announcement-container .top-announcement p {
margin: 0;
padding: 0;
}
}
.top-appointment-button,
.top-subscribe-button {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
background: #222;
color: #fff !important;
font-size: 1rem;
text-align: center;
transition: all 0.2s ease-out;
cursor: pointer;
}
.top-appointment-button:hover,
.top-subscribe-button:hover {
background-color: #444;
}
.top-appointment-button img {
width: 37px;
height: 59px;
display: block;
margin-right: 5px;
position: relative;
top: 0;
transition: all 0.2s ease-out;
}
.top-appointment-button:hover img {
top: -5px;
}
.top-appointment-button span {
flex-grow: 0;
flex-shrink: 1;
width: 120px;
}
.top-appointment-button span span {
font-size: 0.8rem;
display: block;
line-height: 1;
margin-top: 0.5rem;
}
a.top-announcement:hover {
background-color: rgba(255,255,255,0.1);
color: #FFCC00 !importa
}
.mob_branches {
display: none;
}
@media all and (max-width: 1200px) {
.top-announcement-container {
background: #222;
}
.top-announcement {
padding-left: 100px;
}
.top-subscribe-button {
position: relative;
left: 100px;
}
}
@media all and (max-width: 1100px) {
.top-announcement {
padding-left: 200px;
width: 100%;
}
.top-appointment-button,
.top-subscribe-button {
display: none;
}
}
@media all and (max-width: 730px) {
.home_wide_slider {
/*display: none;*/
}
.mob_branches {
display: flex;
align-items: center;
justify-content: space-between;
background: #eee;
padding: 0.5em 0;
flex-direction: column;
}
.mob_branches.hide {
display: none;
}
.mob_branches > * {
text-align: center;
}
.mob_branches > *:first-child {
margin-bottom: 0.25em;
}
.mob_branches > * > div {
display: flex;
justify-content: space-evenly;
}
.mob_branches > * > div > * {
min-width: 6em;
}
}
.home-yamaha-keys-logos {
display: block;
width: 100%;
max-width: 950px;
height: auto;
margin: 0 auto;
}
#top_branches {
position: absolute;
width: 250px;
right: 16px;
bottom: 3px;
font-size: 10px;
text-align: center;
line-height: 1.2em;
box-sizing: border-box;
color: #000;
display: none;
}
.new_top_strapline {
position: absolute;
width: 100%;
height: 48px;
left: 0;
bottom: -2px;
font-size: 1rem;
text-align: center;
line-height: 1.2em;
box-sizing: border-box;
color: #000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.new_top_strapline > div:first-child {
font-size: 1.2rem;
font-weight: bold;
}
@media all and (max-width: 730px) {
.new_top_strapline {
display: none;
}
}
#top_branches > div {
font-size: 1.1em;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0.5rem;
line-height: 1.2;
}
#top_splash_bf a {
width: 100%;
box-sizing: border-box;
}
#top_splash_bf a > img {
display: block;
width: 100%;
height: auto;
}
#topnav_bigad {
clear:both;
}
#topnav_bigad img {
width: 100%;
height: auto;
}
.topnav_bigad_boxes {
display: grid;
grid-template-columns: 392px 196px 196px 196px;
grid-template-rows: 130px 130px;
grid-template-areas:
"bigpic . . ."
"bigpic . . ."
}
.topnav_bigad_boxes > *:first-child {
grid-area: bigpic;
}
.topnav_bigad_boxes > a > img {
display: block;
width: 100%;
height: auto;
transition: all 0.2s ease-out;
}
.topnav_bigad_boxes > a > img:hover {
filter: brightness(1.1);
transform: scale(1.02);
}
.topnav_bigad_boxes2 {
margin-top: 0.5rem;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 130px 130px;
grid-template-areas:
". . . . ."
". . . . ."
}
.topnav_bigad_boxes2 > a > img {
display: block;
width: 100%;
height: auto;
transition: all 0.2s ease-out;
}
.topnav_bigad_boxes2 > a > img:hover {
filter: brightness(1.1);
transform: scale(1.02);
}
@media all and (max-width: 730px) {
.topnav_bigad_boxes2 {
display: none;
}
}
#topnav_bigad_boxes {
display: table;
width: 100%;
}
#topnav_bigad_boxes > * {
display: table-cell;
width: 196px;
}
#topnav_bigad_boxes > * > img {
display: block;
width: 196px;
height: 130px;
transition: all 0.2s ease-out;
box-shadow: 1px 1px 20px rgba(0,0,0,0);
}
#topnav_bigad_boxes > *:first-child {
width: 392px;
}
#topnav_bigad_boxes > *:first-child > img {
width: 392px;
}
#topnav_bigad_boxes > *:hover > img {
transform: scale(1.04);
filter: brightness(1.1);
box-shadow: 1px 1px 20px rgba(0,0,0,0.3);
}
#topnav_bigad_boxes_small {
display: table;
width: 100%;
}
#topnav_bigad_boxes_small > * {
display: table-cell;
width: 33.33333%;
}
#topnav_bigad_boxes_small > * > img {
display: block;
width: 100%;
height: auto;
transition: all 0.2s ease-out;
box-shadow: 1px 1px 20px rgba(0,0,0,0);
}
#topnav_bigad_boxes_small > *:hover > img {
transform: scale(1.04);
filter: brightness(1.1);
box-shadow: 1px 1px 20px rgba(0,0,0,0.3);
}
.top_big_ads.mob {
display: none;
}
@media all and (max-width: 730px) {
#topnav {
display: none;
}
.top_big_ads {
display: none;
}
.top_big_ads.mob {
display: block;
}
}
body {
margin: 0;
padding: 0 0;
/*background: url(/library/templates/default/resources/wallpaper.jpg) no-repeat center center;*/
/*background: #000 url(/library/templates/default/resources/black-friday-bg.png) repeat 0 0;*/
/*background: #000 url(/library/templates/default/resources/xmas-tile.png) repeat 0 0;*/
/* Autumn */
/* background: url(/library/templates/default/resources/timothy-eberly-HUiNRjXr-bQ-unsplash.jpg) no-repeat center center;*/
/* Winter */
/* background: url(/library/templates/default/resources/snow-642454.jpg) no-repeat center center;*/
/* Spring
background: url(/library/templates/default/resources/pexels-pixabay-159406.jpg) no-repeat center center;
background-attachment: fixed;
background-size: cover;*/
}
@media all and (max-width: 730px) {
body {
padding: 0;
}
}
.home-splash-buttons {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 1px;
margin: 0.5rem 0;
}
@media all and (max-width: 730px) {
.home-splash-buttons {
display: none;
}
}
.home-splash-buttons a {
border-radius: 5px;
background-color: #000;
background: linear-gradient(0deg, rgba(42,42,42,1) 0%, rgba(136,136,136,1) 100%);
color: #fff !important;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
line-height: 1;
padding: 3px;
font-size: 0.8rem;
min-height: 2rem;
transition: all 0.2s ease-out;
}
.home-splash-buttons a:hover {
color: #fbcc37 !important;
text-shadow: 0 0 0 5px rgba(0,0,0,1);
}
#home_splash_words {
margin: 10px 20px 10px 18px;
color: #000;
display: flex;
align-items: stretch;
justify-content: space-between;
}
#home_splash_words span {
line-height: 2em;
padding: 0.5em 1em;
border-radius: 5px;
font: bold 14px 'Arial', sans-serif;
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: rgb(223,222,219);
background: linear-gradient(0deg, rgba(223,222,219,1) 0%, rgba(255,255,255,1) 50%, rgba(223,222,219,1) 100%);
}
#home_splash_words a:hover span {
color: #FFCC00 !important;
text-shadow: 1px 1px 1px #000;
}
#cart_link {
width: 200px;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background-color: #FFCC33;
background-color: rgba(255,204,51,0.9);
height: 30px;
text-align: center;
font-size: 16px;
padding-top: 5px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 #fff;
font-weight: bold;
}
#cart_link a {
display: inline-block;
color: #000 !important;
padding: 2px 0 0 30px;
background: url(/library/templates/default/resources/blackcart.gif) no-repeat top left;
}
#cart_link a:hover {
text-decoration: underline;
}
.home-yamaha-logos {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.home-yamaha-logos > * {
flex-basis: 1;
display: flex;
align-items: center;
}
.home-yamaha-logos img {
transition: all 0.2s ease-out;
transform: translateY(0) scale(1);
filter: brightness(1);
}
.home-yamaha-logos a img:hover {
transform: translateY(-5px) scale(1.1);
filter: brightness(1.3);
}
#home_logos {
margin: 0 0 10px 10px;
width: 960px;
overflow: hidden;
}
#home_logos_inner {
width: 1000px;
}
#home_logos_inner img {
padding: 5px 5px 0 5px;
transition: all 0.2s ease-out;
transform: translateY(0) scale(1);
filter: brightness(1);
}
#home_logos_inner img:hover {
transform: translateY(-5px) scale(1.1);
filter: brightness(1.3);
}
#home_logos_inner img {
padding: 5px 5px 0 5px;
}
#tagline {
display: none;
position: absolute;
top: 98px;
width: 400px;
height: 40px;
text-align: center;
left: 25px;
color: #000;
font-size: 13px;
}
#opening_hours_link {
display: none;
position: absolute;
top: 102px;
left: 456px;
font-size: 14px;
font-weight: bold;
color: #000;
width: 250px;
text-align: center;
line-height: 115%;
white-space:nowrap;
}
#opening_hours_link img {
width: 151px;
height: 15px;
}
#topnav_splashes {
overflow: hidden;
width: 100%;
}
#topnav_splashes div {
display: flex;
align-items: center;
justify-content: space-evenly;
row-gap: 5px;
flex-wrap: wrap;
margin: 4px 0 5px 0;
}
#topnav_splashes a {
display: block;
width: 121px;
border-right: 1px solid #fff;
}
#topnav_splashes a img {
width: 121px;
height: 31px;
object-fit: cover;
display: block;
transition: all 0.2s ease-out;
}
#topnav_splashes a:hover img {
transform: scale(1.1);
}
#shop_filter_bottomspace {
margin: 25px 5px;
min-height: 50px;
width: 230px;
overflow: hidden;
}
#nav_container {
height: 45px;
color: #fff;
overflow: hidden;
padding: 0;
/* background: url(/library/templates/default/resources/menuover.png) repeat-x 0 0; */
background: rgb(42,42,42);
background: linear-gradient(0deg, rgba(42,42,42,1) 0%, rgba(136,136,136,1) 100%);
}
#nav_container a {
font: 1.2em "Arial",sans-serif;
color: #fff;
text-decoration: none;
display: block;
line-height: 45px;
padding: 0;
display: block;
transition: all 0.2s ease-out;
}
#nav_container a:hover {
text-shadow: 1px 1px 4px rgba(0,0,0,1);
color: #ffcc00;
}
#nav_container a.last {
color: #FA9C20;
}
#nav_container a.last:hover {
background-image: none;
color: #fff !important;
}
#navigation_topmenu {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
#navigation_topmenu li:first-child {
display: none;
}
#navigation_topmenu li {
flex: 1 1 auto;
white-space: nowrap;
text-align: center;
}
#navigation_topmenu li + li {
border-left: solid 1px rgba(255,255,255,0.3);
}
#navigation_topmenu li:first-child + li {
border: 0;
}
.navigation_dropdown_container {
width: 360px;
min-height: 50px;
background: #000;
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
position: absolute;
z-index: 1000;
margin-left: -8px;
margin-top: -2px;
}
.navigation_column {
width: 150px;
float: left;
padding: 10px 0 10px 15px;
color: #fff;
}
.navigation_dropdown_container a {
color: #fff !important;
}
.navigation_column a {
color: #fff;
display: block !important;
font: normal 13px 'Arial', sans-serif !important;
padding: 0 !important;
text-transform: none !important;
background: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
line-height: 180% !important;
text-align: left !important;
}
.navigation_column a:hover {
color: #FFCC00 !important;
}
.navigation_column b {
display: block;
font: normal 22px 'kenyan_coffeeregular', 'arial', sans-serif;
text-transform: uppercase;
color: #fff;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #fa9c20;
}
.navigation_sub_menu {
display: none;
}
#shop_cols_container {
background: url(/library/templates/default/resources/shopcol_shadow.png) repeat-y 0 0;
overflow: auto;
}
#shop_filter_col {
width: 250px;
float: left;
padding: 10px 10px;
min-height: 600px;
overflow: hidden;
}
#shop_content_col {
width: 710px;
overflow: hidden;
float: right;
}
.shop_filter_link {
display: block;
font-size: 14px;
color: #666 !important;
text-decoration: none !important;
line-height: 155%;
padding: 0px 0px 0px 5px;
background: url('/library/templates/default/resources/filtertick-off.png') no-repeat scroll 220px 4px transparent;
}
.shop_filter_link:hover {
background-color: #ddd;
}
.shop_filter_link.ticked {
background-image: url('/library/templates/default/resources/filtertick-on.png');
}
#shop_filter_col h3 {
display: block;
font: 22px "Arial",sans-serif;
color: #333;
padding: 0px 0px 10px 5px;
margin-bottom: 10px;
border-bottom: 1px solid #404040;
}
#home_carousel {
height: 300px;
/*overflow: hidden;*/
background: #fff; /*#2A2A2A;*/
padding-top: 5px;
/*
position: relative;
left: 15px;
*/
width: 930px;
margin: 0 auto;
}
#home_carousel_slider {
}
#top_social {
width: 300px;
float: right;
height: 32px;
position: relative;
right: 45px;
top: 46px;
text-align: right;
}
#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: -1;
}
#main_container {
width: 980px;
margin: 0.5em auto;
background-color: #fff;
border: 2px solid #fff;
}
@media all and (max-width: 730px) {
#main_container {
margin: 0 auto;
}
.home-yamaha-logos {
display: none;
}
}
#header {
height: 140px;
background: #eee; /*#fff url(/library/templates/default/resources/headerbg2.png) no-repeat 0 0;*/
color: #fff;
overflow: hidden;
position: relative;
}
#top_yellow {
margin-left: 14px;
width: 950px;
height: 28px;
background: #FFCC00;
float: left;
position: relative;
top: 65px;
}
.top_mob_tel {
display: none;
}
#top_logo {
width: 408px;
height: 74px;
display: block;
float: left;
position: relative;
top: -15px;
left: 20px;
}
#sales_hotline {
width: 280px;
height: 60px;
position: absolute;
top: 2px;
left: 450px;
color: #000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 0.8rem;
align-items: center;
font-weight: bold;
}
#sales_hotline > div:last-child {
font-size: 1.7rem;
text-shadow: 0 0 2px #fbcc37, 0 0 2px #fbcc37, 0 0 2px #fbcc37;
}
#top_tel {
float: left;
width: 200px;
font-size: 14px;
color: #000;
position: relative;
top: -12px;
left: 20px;
color: #333;
font-style: italic;
display: none;
}
#top_tel b {
display: block;
font-size: 20px;
color: #000;
font-style: normal;
}
#topnav {
background:#000 url(/library/templates/default/resources/navbg.png) repeat-x 0 0;
height: 45px;
overflow: hidden;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#mobile_menu {
display: none;
}
#mid_container {
overflow: auto;
}
.content_container {
padding: 25px;
background: url(/library/templates/default/resources/contentbg.png) repeat-x 0 0;
overflow: auto;
}
#home_boxes {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
row-gap: 0.5rem;
justify-content: space-evenly;
}
.homebox {
display: block;
text-align: center;
background: #ffcc33 url(/library/templates/default/library/templates/default/resources/menuover.png) repeat-x bottom left;
}
.homebox img {
width: 200px;
height: 130px;
border: 2px solid #FFCC33;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.homebox:hover img {
border: 2px solid #000;
}
.homebox span {
display: block;
background: url(/library/templates/default/resources/homebox_arrow.gif) no-repeat 190px 10px;
padding: 8px 20px 8px 7px;
font: bold 15px 'Arial', sans-serif;
color: #000;
line-height: 120%;
}
#home_content {
flex-shrink: 1;
flex-grow: 1;
width: 520px;
padding: 0;
font-size: 13px;
}
#home_slide {
width: 514px;
height: 225px;
display: block;
background: #000;
}
#home_text_box * {
padding: 0 !important;
font-size: 12px;
}
#home_text_boxes_container {
width: 100%;
display: table;
}
#home_text_box {
background: #eee;
color: #000;
padding: 5px 15px;
box-sizing: border-box;
line-height: 135%;
display: table-cell;
vertical-align: middle;
}
#home_slider_ad_box {
width: 150px;
background: #fff;
box-sizing: border-box;
display: table-cell;
vertical-align: bottom;
padding-right: 6px;
}
#home_slider_ad_box img {
width: 100%;
height: auto;
display: block;
box-sizing: border-box;
}
#home_text_box p,
#home_text_box div {
text-align: center !important;
}
#home_text_box a {
color: #000 !important;
}
#home_bottom {
overflow: auto;
padding-bottom: 5px;
background: #fff; /*#2A2A2A;*/
}
#home_bottom_inner {
/*border: 1px solid #121212;*/
background: #fff; /* #121212;*/
padding: 0 0 5px 10px;
overflow: auto;
}
.home_cat_box {
display: block;
float: left;
margin: 10px 15px 0 0;
padding-bottom: 5px;
}
.home_cat_box img {
width: 200px;
height: 100px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
display: block;
float: left;
margin-right: 0px;
}
.home_cat_box_new {
display: block;
float: left;
margin: 5px 8px 0 0;
padding-bottom: 5px;
}
.home_cat_box_new img {
width: 470px;
height: 100px;
border: 2px solid #fff;
display: block;
float: left;
margin-right: 0px;
}
.home_cat_box span {
height: 100px;
background: #000;
color: #fff;
display: block;
float: left;
padding: 0 15px;
width: 225px;
line-height: 140%;
font-size: 13px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.home_cat_box:hover span {
background: #222;
}
.home_cat_box b {
display: block;
font-size: 18px;
text-shadow: 1px 1px 1px #000;
color: #fff;
line-height: 140%;
padding: 5px 0;
font-weight: normal !important;
}
#home_bottom_links {
overflow: auto;
background: #2A2A2A;
/* background: #FFCC00;*/
padding: 5px 0 5px 13px;
}
#home_bottom_links a {
display: block;
float: left;
width: 302px;
margin-right: 10px;
background: #FFCC00;
color: #000;
font-size: 17px;
text-align: center;
padding: 5px 3px;
font-weight: bold;
border: 1px solid #FFCC00;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#home_bottom_links a:hover {
border: 1px solid #FFCC33;
color: #FFCC33;
background: #000;
}
#home_widelinks {
text-align: left;
padding: 0px 0 11px 2px;
background: #fff; /*#2A2A2A;*/
}
#home_widelinks img {
width: 310px;
height: 200px;
margin: 0 0 0 12px;
}
#home_widelinks img.wide {
width: 632px;
height: 200px;
margin: 0 0 0 12px;
}
#home_widelinks div.fb {
float: right;
margin-right: 10px;
}
#home_biglinks {
text-align: left;
padding: 10px 0 10px 2px;
background: #fff; /*#2A2A2A;*/
margin-bottom: 1vw;
}
#home_biglinks img {
width: 296px;
height: 112px;
margin: 0 0 0 12px;
}
.home_biglinks {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 18px 14px 5px 14px;
}
.home_biglinks img {
width: 296px;
height: 112px;
margin: 0 0 10px 0;
transition: all 0.2s ease-out;
}
.home_biglinks img:hover {
filter: brightness(1.1);
}
#side_news {
padding: 5px 10px;
}
#right_col {
width: 780px;
padding: 0 0 10px 20px;
float: left;
}
#bottom_links {
text-align: center;
padding: 0 10px 5px 0;
font-size: 11px;
background: #2A2A2A;
}
#bottom_links a {
color: #FFCC33;
padding: 0 10px;
text-decoration: underline;
}
#footer {
font-size: 13px;
text-align: center;
padding: 0;
width: 980px;
margin: 0 auto;
color: #FFCC00;
text-shadow: 1px 1px 0px #000;
}
#footer a {
color: #FFCC00 !important;
text-decoration: underline;
}
#footer a:hover {
color: #000 !important;
text-decoration: underline;
text-shadow: none;
}
#footer_left{
float: left;
padding: 10px 0;
}
#footer_right {
float: right;
padding: 20px 5px 20px 5px;
}
#new_footer {
background: #292929;;
min-height: 100px;
overflow: auto;
padding-bottom: 10px;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.footer_col {
min-width: 100px;
white-space:nowrap;
padding: 20px 0 0 0;
font-size: 1em;
color: #F9C90D;
line-height: 100%;
}
.footer_col b {
font-size: 1.2em;
display: block;
margin-bottom: 20px;
}
.footer_col a {
text-decoration: none;
color: #F9C90D !important;
}
.footer_col a:hover {
text-decoration: underline;
}
#footer_social {
width: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 150px;
margin-top: 10px;
}
#footer_social img {
transition: all 0.2s ease-out;
filter: brightness(1);
}
#footer_social img:hover {
filter: brightness(1.5);
}
#new_footer_right {
width: 455px;
padding: 10px 0 5px 0;
}
#new_footer_right form {
padding: 0;
margin: 0 0 5px 0;
overflow: auto;
text-align: right;
}
#new_footer_right form label {
padding-right: 10px;
color: #fff;
font-size: 15px;
font-weight: bold;
float: left;
width: 37%;
padding-top: 5px;
text-align: left;
}
#new_footer_right form {
display: flex;
justify-content: space-between;
}
#new_footer_right form .inputbox {
display: inline-block;
padding: 3px 6px;
font-size: 16px;
background: #fff !important;
width: 87%;
font-weight: normal;
height: 33px;
box-sizing: border-box;
}
#new_footer_right form .button {
display: inline-block;
width: 10%;
font-weight: normal;
height: 33px;
box-sizing: border-box;
padding: 3px 2px;
font-size: 16px;
}
#footer_logos {
max-width: 455px !important;
width: 100%;
float: right;
clear: both;
}
#footer_logos img {
height: auto;
display: block;
padding-top: 20px;
}
#footer_logos img:first-child {
width:250px;
float: right;
margin-top: -2px;
}
#footer_logos img:last-child {
width:180px;
float: right;
padding-right: 22px;
}
.home_grey_band_heading {
background: #ccc;
padding: 10px 5px;
text-align: center;
font-size: 150%;
color: #000;
text-shadow: 1px 1px 0 #fff;
}
#new_footer_boxes {
overflow: auto;
margin-top: 10px;
}
#new_footer_boxes_left {
float: left;
width: 230px;
padding-left: 20px;
padding-bottom: 10px;
}
#new_footer_boxes_left iframe {
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
height: 412px !important;
}
#new_footer_boxes_right {
float: right;
width: 710px;
min-height: 335px;
text-align: right;
padding-right: 20px;
}
.new_footer_box {
width: 24%;
display: inline-block;
height: 180px;
margin-bottom: 5px;
text-align: center;
vertical-align: top;
background: #ccc;
overflow: hidden;
transition: all 0.2s ease-out;
position: relative;
padding-bottom: 25px;
}
.new_footer_box img {
display: inline-block;
width: calc(100% - 10px);
margin-top: 4px;
transition: all 0.2s ease-out;
}
.new_footer_box:hover img {
transform: scale(1.025);
}
.new_footer_box span {
/*background: rgba(255,255,255,0.7);*/
display: inline-block;
width: 95%;
margin-top: 3px;
height: 51px;
line-height: 110%;
color: #000 !important;
padding-top: 3px;
}
.new_footer_box span > div {
position: absolute;
left: 5px;
width: calc(100% - 10px);
height: 60px;
display: flex;
align-items: center;
}
.new_footer_box span b {
display: block;
padding: 3px 0;
color: #000;
height: 20px;
position: absolute;
bottom: 3px;
left: 5px;
width: calc(100% - 10px);
box-sizing: border-box;
background: #ffcc33 url(/library/templates/default/library/templates/default/resources/menuover.png) repeat-x bottom left;
}
.new_footer_box span b strike {
font-weight: normal;
padding-right: 5px;
}
.new_footer_box:hover {
filter: brightness(1.1);
}
.new_footer_box:hover span {
color: #000 !important;
}
.product_added {
display: block;
position: fixed;
top: -1000px;
left: -1000px;
width: 90vw;
max-width: 400px;
background: #FFCC00;
border: 2px solid #000;
padding: 1em;
box-sizing: border-box;
text-align: center;
font-size: 2em;
line-height: 1.3em;
z-index: 9999;
box-shadow: 0 0 20px #000;
opacity: 0.95;
transform: translate3d(-50%,-50%,0) scale(0.5);
transition: all 0.5s ease-in;
opacity: 0;
}
.product_added.active {
top: 50%;
left: 50%;
opacity: 1;
transform: translate3d(-50%,-50%,0) scale(1);
}
.shop_option_add_warning {
display: block;
position: fixed;
width: 90vw;
max-width: 400px;
color: #FFCC00;
background: #000;
bottom: -1000px;
left: 50%;
border: 2px solid #FFCC00;
padding: 1em;
box-sizing: border-box;
text-align: center;
font-size: 2em;
line-height: 1.3em;
z-index: 9999;
box-shadow: 0 0 20px #000;
opacity: 0.95;
transform: translate3d(-50%,50%,0);
transition: all 0.5s ease-in;
opacity: 0;
}
.shop_option_add_warning.active {
bottom: 50%;
opacity: 1;
}
#home_top {
height: 100%;
padding: 0;
overflow: hidden;
display: flex;
background: #fff; /*#FFE69A url(/library/templates/default/resources/home_top.png) no-repeat 0 0;*/
border-bottom: 2px solid #fff;
overflow: hidden;
}
@media all and (max-width: 1300px) {
#cart_link {
transform: scale(0.7);
transform-origin: 0 0;
}
}
@media all and (max-width: 730px) {
#bg {
display: none;
}
#main_container {
width: 100%;
overflow: hidden;
}
#top_logo {
width: 90%;
height: auto;
display: block;
position: absolute;
top: 60%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
#top_yellow {
width: 100%;
top: 19vw;
left: 0;
margin: 0;
}
.top_mob_tel {
display: block;
position: absolute;
top: 5px;
line-height: 25px;
right: 6vw;
font-size: 1.5rem;
font-weight: bold;
color: #fff !important;
z-index: 5;
}
@media(max-width: 400px) {
.top_mob_tel {
width: 150px;
text-align: right;
line-height: 1;
font-size: 1.3rem;
}
}
#top_menu {
display: none;
}
#mobile_menu {
display: block;
}
.topnav_bigad_boxes {
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas:
". ."
". ."
". .";
margin-right: 2.5vw;
}
.topnav_bigad_boxes > *:first-child {
display: none;
}
#home_grey_box {
display: none;
}
#topnav_bigad_boxes_small {
display: flex;
flex-direction: column;
}
#topnav_bigad_boxes_small > * {
display: block;
width: 100%;
}
#topnav {
height: 4.1em;
}
#mobile_menu {
padding: 0 0.5rem;
}
#mobile_menu select {
font-size: 1.5em;
width: 100%;
margin: 0.5rem auto 0.5rem auto;
padding: 0 1rem;
display: block;
border: 2px solid #000 !important;
}
#header {
height: 27vw;
overflow: hidden;
padding: 0;
}
#sales_hotline, #opening_hours_link, #tagline, #top_branches {
display: none;
}
#site_search {
padding:0 !important;
float: none;
white-space: nowrap;
margin: 0 !important;
position: fixed;
top: 0;
right: 0;
z-index: 99999;
}
#site_search_search {
height: 30px !important;
}
#site_search_go {
height: 32px !important;
}
#home_wide_graphic {
display: none;
}
#home_content {
display: none;
}
#home_text_box {
width: 450px;
height: 90px;
}
#home_bottom {
overflow: hidden;
}
#home_bottom_inner {
padding: 0;
left: 0;
}
.home_cat_box_new {
float: none;
margin: 1vw 0;
padding: 0;
}
.home_cat_box_new img {
width: 100%;
height: auto;
}
#home_widelinks, .home_grey_band_heading, #home_carousel, #new_footer_boxes, #home_splash_words, #home_logos {
display: none;
}
.home_biglinks {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas:
". ."
". ."
". .";
padding: 0;
grid-gap: 1vw;
margin-bottom: 1vw;
}
.home_biglinks img {
width: 100%;
height: auto;
margin: 0;
display: block;
}
#home_boxes {
padding: 0;
width: calc(100% - 5vw);
float: none;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-template-areas:
". ."
". .";
grid-gap: 2.5vw;
margin: 0 2.5vw 2.5vw 2.5vw;
overflow: hidden;
}
.homebox {
float: none;
width: 100%;
margin: 0;
height: auto;
}
.homebox img {
width: 100%;
height: auto;
border: none !important;
}
.homebox:hover img {
border: none !important;
}
#home_bottom {
padding: 0;
}
#new_footer {
flex-wrap: wrap;
}
#new_footer_right {
padding: 0 2vw;
}
.footer_col {
width: 30%;
}
#footer_social {
flex-direction: row;
height: auto;
gap:1em;
}
#home_slide {
display: none;
}
#home_bottom_links {
padding-left: 85px;
}
#shop_content_col {
width: auto;
clear: both;
}
#shop_filter_col {
display: none;
float: none;
overflow: auto;
background: #eee;
margin: 0 auto 20px auto;;
width: 386px;
}
.shop_filter_link {
background-position: 360px 4px;
}
#shop_filter_bottomspace {
display: none;
}
#content_container {
background: #fff;
}
.home_cat_box {
width: 460px;
}
#footer {
width: 460px;
}
#shop_cols_container {
background-image: none;
}
.shop_product_right_column {
width: 420px !important;
padding: 0;
overflow: hidden;
}
.shop_product_img {
width: 100% !important;
height: auto !important;
}
.shop_img_extra img {
width: 80px !important;
height: 80px !important;
}
#topnav_bigad {
display: none;
}
#topnav_splashes div {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#topnav_splashes div a {
width: 100%;
}
#topnav_splashes img {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 1;
}
#finance_stuff {
clear: both;
margin: 0 auto;
float: none;
}
.finance_box {
margin: 10px auto;
float: none !important;
overflow: auto;
}
#shop_product_tabs {
width: 416px !important;
}
#shop_product_tabs div {
width: 106px !important;
}
#shop_product_tab_content {
width: 393px !important;
}
#shop_content_col {
float: none;
}
.shop_product_left_column {
width: 100% !important;
float: none;
overflow: hidden;
}
.shop_product_left_column img,
.content_container img{
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
.shop_product_right_column {
width: 100% !important;
overflow: hidden;
float: none;
}
}
/* styles for phones portrait */
@media all and (max-width: 475px) {
body {
padding: 0;
margin: 0;
font-size: 13px !important;
}
#main_container {
margin: 0 auto;
overflow: hidden;
}
.home_mob_reviews {
transform: scale(0.7);
}
#home_text_box {
width: 290px;
height: 125px;
}
.home_cat_box {
width: 300px;
}
.home_cat_box img {
width: 100px;
height: 50px;
}
.home_cat_box b {
display: none;
}
.home_cat_box span {
width: 190px;
height: 46px;
font-size: 10px;
line-height: 110%;
padding: 4px 0 0 0;
}
.home_cat_box span * {
font-weight: normal !important;
}
#home_biglinks {
width: 315px;
overflow: hidden;
}
#home_biglinks img {
width: 300px;
height: 160px;
}
#home_bottom_links {
padding: 0;
width: 100%;
overflow: hidden;
}
#home_bottom_links a {
margin-left: 3px;
}
#footer {
width: 295px;
}
#new_footer {
font-size: 0.8em;
}
#footer_logos {
max-width: 300px !important;
margin: auto;
float: none !important;
clear: both;
}
#footer_logos img:first-child {
width: 150px;
}
#footer_logos img:last-child {
width: 100px;
float: left;
padding-right: 0;
}
#new_footer_right form .inputbox {
font-size: 1em !important;
}
.shop_img_extra img {
width: 60px !important;
height: 60px !important;
}
#shop_product_long_description_container {
border: 0 !important;
}
#shop_addtocart_stuff {
width: 260px !important;
overflow: hidden !important;
}
#shop_filter_col {
width: 290px;
}
.shop_filter_link {
background-position: 270px 4px;
}
#topnav_splashes {
display: none;
}
.shop_addtocart {
left: -5px;
top: -35px !important;
}
#shop_product_tabs {
width: 256px !important;
}
#shop_product_tabs div {
width: 54px !important;
font-size: 10px !important;
}
#shop_product_tab_content {
width: 233px !important;
}
.features_list {
width: 250px !important;
}
#shop_addtocart_stuff select.inputbox {
width: 260px !important;
}
.shop_badge {
width: 100px;
height: auto;
}
.shop_addtocart {
left: 0;
}
}
/* Retina media query.
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
----------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
body {
}
}
/* Form buttons */
.button {
font: normal 1.2em 'Arial', sans-serif;
background: #FFCC33;
color: #000;
border: 1px solid #666;
font-weight: normal !important;
padding: 0.5em 1em;
cursor: pointer;
}
.new_button {
border-width: 0;
font-family: inherit;
text-align: center;
box-sizing: border-box;
background-color: #000;
transition: all 0.2s ease-out;
color: #fff !important;
font-size: 1.2em;
padding: 0.5em 1em;
}
.new_button.small {
font-size: 0.8em;
}
.new_button:hover {
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
cursor: pointer;
filter: brightness(1.2);
}
.new_button.grey {
background-color: #666;
}
.new_button.green {
background-color: #139c1d;
}
.new_button.yellow {
background-color: #ffcc00;
color: #000;
}
/* Form input fields / text areas */
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
.inputbox {
font: normal 1.2em 'Arial', sans-serif;
background: #fafafa; /*F6F3E5 url(/library/templates/default/resources/inputbg.png) repeat-x 0 0 !important;*/
color: #666 !important;
border: 1px solid #ddd !important;
padding: 0.5em;
}
.input_error {
font: normal 1.2em 'Arial', sans-serif;
background: #ffbda5 !important;
color: black !important;
border: 1px solid red !important;
padding: 0.5em;
}
.datebox {
background: url(/library/templates/default/resources/calendar_icon.gif) no-repeat top right;
cursor: pointer;
}
/* Forms */
form {
margin: 0;
padding: 0;
}
.form_container {
min-width: 0 !important;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.forms_item_container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 1.5em;
}
.form_container h2 {
clear: both;
}
.forms_item_label {
display: block;
width: 30%;
padding-top: 0.5em;
font-size: 1.2em;
}
.forms_item_input_container {
flex-grow: 1;
}
.forms_item_input_container span {
font-size: 10px;
display: block;
}
.forms_item_input_container .inputbox {
width: 100%;
box-sizing: border-box;
}
.forms_item_input_container textarea {
height: 50px;
}
.forms_item_columnmode_container {
float: left;
padding: 3px 0 3px 0;
text-align: center;
width: 250px;
}
.forms_item_columnmode_container .inputbox {
width: 70px;
}
.forms_item_columnmode_container label {
display: block;
}
.form_fieldset {
background: #C0C0FF;
margin: 15px 0 15px 0;
padding: 15px 100px 15px 20px;
border: 2px solid #c0c0c0;
background-repeat: no-repeat;
background-position: top right;
*position: relative;
}
.form_legend {
font-weight: bold;
color: #000;
font-size: 15px;
padding: 0 10px 0 10px;
*position: relative;
*top: -1.5em;
}
.form_buttons_container {
max-width: 450px;
width: 100%;
margin: 10px auto 20px auto;
padding: 20px 0 5px 0;
white-space: nowrap;
background: transparent;
text-align: center;
clear: both;
}
.form_buttons_container .button {
width: 150px;
padding: 5px;
font-weight: bold;
}
.forms_branding_logo {
float: right;
}
/* User input wizards (e.g. adding new items) */
.stages_container {
height: 120px;
background: #D6E5C3;
}
.stage_block {
width: 100px;
height: 100px;
float: left;
text-align: center;
background-position: 12px 10px;
background-repeat: no-repeat;
}
.stage_block_label {
color: #4D642C;
font-weight: bold;
padding-top: 90px;
}
.stage_block_label_disabled {
color: #7A9F45;
padding-top: 90px;
}
/* User comments */
.forms_item_comment_link_container {
overflow: auto;
clear: both;
overflow: hidden;
}
.forms_item_comment_link {
display: block;
float: right;
width: 85px;
text-align: left;
padding: 10px 0 5px 25px;
font-size: 10px;
background: url(/library/templates/default/resources/small_edit.gif) no-repeat 0 5px;
margin: 1px 5px 0 0;
}
.forms_item_comment_container {
clear: left;
padding: 10px;
margin: 20px auto 10px auto;
width: 400px;
border: 1px solid #999;
display: none;
}
.forms_item_comment_container textarea {
border: 1px solid #999;
background-color: #fff;
width: 100%;
height: 100px;
margin-top: 5px;
}
.forms_item_usercomment {
clear: both;
margin: 20px auto 10px auto;
width: 400px;
border: 1px solid #61992F;
padding: 10px 10px 10px 50px;
font-size: 11px;
min-height: 20px;
text-align: left;
background: #E1F1CF url(/library/templates/default/resources/small_user.gif) no-repeat 11px 10px;
}
.forms_item_admincomment {
clear: both;
margin: 20px auto 10px auto;
width: 400px;
border: 1px solid #E7A007;
padding: 10px 10px 10px 50px;
font-size: 11px;
min-height: 20px;
text-align: left;
background: #FEF9D0 url(/library/templates/default/resources/small_admin.gif) no-repeat 11px 10px;
}
.forms_item_moderatorcomment {
clear: both;
margin: 20px auto 10px auto;
width: 400px;
border: 1px solid #DB911D;
padding: 10px 10px 10px 50px;
font-size: 11px;
min-height: 20px;
text-align: left;
background: #F9DBC5 url(/library/templates/default/resources/small_moderator.gif) no-repeat 11px 10px;
}
/* Range CSS generated from http://danielstern.ca/range.css/#/ */
input[type=range] {
width: 100%;
margin: 7.5px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: #c8c8c8;
border: 1px solid rgba(1, 1, 1, 0.2);
border-radius: 25px;
width: 100%;
height: 6px;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
margin-top: -8.5px;
width: 22px;
height: 21px;
background: #ffc800;
border: 2.7px solid rgba(100, 100, 100, 0.4);
border-radius: 50px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #d5d5d5;
}
input[type=range]::-moz-range-track {
background: #c8c8c8;
border: 1px solid rgba(1, 1, 1, 0.2);
border-radius: 25px;
width: 100%;
height: 6px;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 22px;
height: 21px;
background: #ffc800;
border: 2.7px solid rgba(100, 100, 100, 0.4);
border-radius: 50px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 8.5px 0;
color: transparent;
width: 100%;
height: 6px;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background: #bbbbbb;
border: 1px solid rgba(1, 1, 1, 0.2);
border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
background: #c8c8c8;
border: 1px solid rgba(1, 1, 1, 0.2);
border-radius: 50px;
}
input[type=range]::-ms-thumb {
width: 22px;
height: 21px;
background: #ffc800;
border: 2.7px solid rgba(100, 100, 100, 0.4);
border-radius: 50px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
background: #c8c8c8;
}
input[type=range]:focus::-ms-fill-upper {
background: #d5d5d5;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
input[type=range] {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do*/
}
}
/* Site search */
#site_search {
padding: 0px 17px 0 0;
float: right;
white-space: nowrap;
margin-top: -14px;
margin-right: 18px;
overflow: hidden;
position: relative;
height: 40px;
width: 190px;
z-index: 10;
}
#site_search + #site_search_search:focus {
background: #fff;
}
#contact_stuff {
clear: left;
padding-top: 10px;
text-align: left;
width: 229px;
float: right;
color: #8b8b8b;
font-size: 15px;
}
#site_search label {
display: none;
}
#site_search_search {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
height: 40px;
border-width: 0 0 1px 0 !important;
border-style: solid !important;
border-bottom-color: rgba(0,0,0,0.1) !important;
background: transparent !important;
padding: 0 50px 0 10px !important;
font-size: 1.2em;
color: #8b8b8b !important;
transition: all 0.4s ease-out;
box-sizing: border-box;
}
#site_search_search:focus {
border-bottom-color: rgba(0,0,0,0.4) !important;
background-color: rgba(255,255,255,0.5) !important;
}
#site_search_go {
position: absolute;
top: -2px;
right: 0;
z-index:1;
width: 40px;
float: left;
display: block;
height: 40px;
border: 0 !important;
cursor: pointer;
background: transparent url(/library/templates/default/resources/search-glass-trans.png?v=3) no-repeat center center !important;
opacity: 0.7;
}
@media all and (max-width: 730px) {
#site_search {
position: absolute;
top: 0.5vw;
left: 1%;
width: 98%;
margin: 0;
}
#site_search_search {
height: 25px !important;
background: rgba(255,255,255,0.8) !important;
border-radius: 3px;
font-size: 0.8rem !important;
}
#site_search_go {
width: 25px !important;
height: 25px !important;
padding: 0 !important;
display: block;
top:0 !important;
}
}
#site_search_go:hover {
opacity: 1;
}
#site_search_search:focus, #site_search_go:focus {
outline: none !important;
}
/* Search results */
.site_search_item {
list-style-image: none;
list-style-type: none;
margin-top: 5px;
margin-left: 0;
padding-left: 0;
color: inherit;
display: block;
clear: both;
}
.site_search_item img {
position: relative;
top: -15px;
border: 1px solid #c0c0c0;
width: 48px;
height: auto;
float: right;
clear: right;
margin: 15px 0 0 10px;
}
.site_search_item hr {
clear: both;
}
.site_search_item a {
display: block;
color: #333;
overflow: auto;
padding: 5px 10px;
background: #fcfcfc;
text-decoration: none !important;
border-left: 3px solid #dedede;
color: #888 !important;
}
.site_search_item a:hover, .site_search_item a:hover * {
background: #000 !important;
color: #fff !important;
}
.site_search_item .heading {
display: block;
font-size: 120%;
margin: 0 0 5px 0;
color: #333;
}
.site_search_item a b {
color: #000 !important;
}
/* Search results (dropdown / popup) */
.search_results_dropdown_container {
box-sizing: border-box;
padding:10px;
border: 1px solid #EDEDED;
margin-top: 5px;
min-width: 350px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
max-width: 400px;
overflow: hidden;
background: #fff;
}
.search_results_dropdown_container {
font-size: 100%;
line-height: 110%;
}
.search_results_dropdown_container .site_search_item a {
padding: 10px 15px;
}
.search_results_dropdown_container .site_search_item:nth-child(2n+1) a {
background: #f8f8f8;
}
.search_results_dropdown_container .site_search_item {
margin-bottom: 0;
margin-top: 0;
}
.search_results_dropdown_container .site_search_item li {
padding-bottom: 0;
}
.site_search_item a {
border-left: none;
}
.search_results_dropdown_container .site_search_item img {
width: 50px;
height: 44px;
}
.search_results_dropdown_container .emphasisedtext {
display: none;
}
.search_results_dropdown_container .search_result_summary {
display: none;
}
.search_results_more_link {
padding-top: 15px;
display: block;
text-align: center;
}
.search_results_dropdown_container .site_search_item .heading {
font-size: 160%;
}
/* Special products (eg on home page) -
these are selectable within control panel */
#shop_special_products {
}
.shop_product_special {
width: 229px;
min-height: 295px;
overflow: hidden;
margin: 0 2px 0 2px;
background: #ccc;
position: relative;
box-shadow: 0;
}
.shop_product_special {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shop_product_special.last {
/* margin-right: 0 !important;*/
}
.shop_product_special:hover {
filter: brightness(1.1);
}
.shop_product_special_details {
padding: 5px;
font-size: 11px;
color: #000;
line-height: 130%;
}
.shop_product_special_image {
text-align: center;
padding-bottom: 5px;
width: 100%;
}
.shop_product_special_image img {
width: 100% !important;
height: auto !important;
}
.shop_product_special_left {
/*
float: left;
width: 129px;
*/
text-align: center;
}
.shop_product_special_price strike {
color: #666;
font-size: 11px;
display: block;
}
.shop_product_special_splash {
display: none;
float: right;
width: 75px;
text-align: center;
background: red;
border-radius: 20px;
color: #fff;
padding: 5px 3px;
border: 2px solid #fff;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
font-size: 15px;
line-height: 130%;
color: #fff;
font-weight: bold;
margin-top: 5px;
transform: rotate(5deg) ;
-webkit-transform: rotate(5deg) ;
-moz-transform: rotate(5deg) ;
-o-transform: rotate(5deg) ;
-ms-transform: rotate(5deg) ;
}
.shop_product_special_splash span {
display: block;
/*
transform: rotate(-5deg) ;
-webkit-transform: rotate(-5deg) ;
-moz-transform: rotate(-5deg) ;
-o-transform: rotate(-5deg) ;
-ms-transform: rotate(-5deg) ;
*/
}
.shop_product_special_description {
font-weight: bold;
/*font-size: 11px;
text-align: left;*/
}
.shop_product_special_price {
font-weight: bold;
font-size: 14px;
padding: 3px 0 5px 0;
margin-top: 5px;
background: #ffcc33 url(/library/templates/default/library/templates/default/resources/menuover.png) repeat-x bottom left;
}
/* Main special product - extra large one, eg on home page */
#shop_special_product_main {
background: #57647C;
border: 3px solid #333;
padding: 20px 20px 20px 20px;
width: 680px;
overflow: auto;
line-height: 140%;
font-size: 11px;
color: #fff;
}
#shop_special_product_main a {
font-weight: bold;
text-decoration: underline;
color: #000040;
}
#shop_special_product_main h1 {
color: #fff;
padding: 0;
margin: 0 0 5px 0;
line-height: 100%;
}
#shop_special_product_main h2 {
color: #000040;
font-size: 22px;
text-decoration: line-through;
}
#shop_special_product_main b {
font-size: 14px;
display: block;
padding: 0;
margin: 0 0 5px;
}
#shop_special_product_main img {
width: 215px;
height: 215px;
border: 2px solid #333;
display: block;
float: right;
}
.shop_special_product_content {
float: left;
width: 430px;
}
.shop_special_product_price {
font-size: 38px;
font-weight: bold;
padding: 5px 0;
white-space: nowrap;
}
.shop_special_product_save_splash {
display: block;
float: right;
width: 80px;
height: 50px;
background: #000;
border: 2px solid #fff;
text-align: center;
position: relative;
top: 5px;
padding-top: 10px;
}
.shop_special_product_save_splash b {
font-size: 19px !important;
font-weight: bold;
}
/* If extra columns of text are to be shown on the side of the page. */
.side_text {
color: #000000;
background-color: inherit;
font-size: 11px;
}
.side_text label {
color: #58667E;
background-color: inherit;
font-size: 10px;
}
.side_heading {
text-align: left;
font-size: 12px;
font-weight: bold;
color: #58667E;
background-color: inherit;
}
/* Standard Log-in controls */
#site_login_container {
font-size: 11px;
padding: 10px;
text-align: left;
}
#site_login_username, #site_login_psw {
margin: 0 0 3px 0;
width: 120px;
}
#site_login_go {
font-size: 11px;
margin: 5px 0 10px 105px;
}
#site_login_container .form_label {
width: 100px;
text-align: right;
float: left;
margin-right: 5px;
}
#site_login_container .section {
margin: 2px 0 2px 0;
}
/* Side Log-in controls */
#side_login_heading {
margin: 15px 0 5px 0;
text-align: left
}
#side_login_loggedin {
padding: 5px 0 5px 0;
text-align: left;
font-weight: normal;
}
.side_login_options {
text-align: left;
padding: 6px 0 0 0;
}
#side_login_username, #side_login_psw {
margin: 0 0 3px 0;
width: 100%;
}
#side_login_remember_me {
position: relative;
top: 1px;
}
#side_login_go {
padding: 1px 0 1px 3px;
font-size: 11px;
width: 29px;
}
/* User menu / icons */
#user_menu {
padding: 0 10px 15px 10px;
width: 300px;
}
#user_menu a {
display: block;
clear: left;
margin: 0 0 0 0;
}
#user_menu span {
position: relative;
top: 8px;
}
#user_menu img {
width: 33px;
height: 40px;
float: left;
padding: 0 10px 0 0;
}
/* Images */
.content_image_caption {
color: #333;
background-color: #e1e1e1;
font-size: 10px;
padding: 2px 5px;
}
.image_border { border: 2px solid #000; }
.content_container img {
max-width: 100%;
height: auto !important;
}
/* Users / Profiles stuff */
#users_compose_link {
padding: 10px;
text-align: left;
}
.users_compose_label {
width: 100px;
text-align: right;
float: left;
padding: 0 10px 10px 0;
font-weight: bold;
}
.users_compose_input, .users_compose_msg {
margin-left: 115px;
padding: 0 10px 10px 0;
}
/* Popup / modal calendar */
.calendar_pop_container {
position: absolute;
width: 200px;
height: 220px;
border: 1px solid #333;
background: #fff;
color: #000;
padding: 5px;
margin: 0 2px 0 2px;
-moz-box-shadow: black 2px 2px 5px;
-webkit-box-shadow: black 2px 2px 5px;
}
.calendar_pop_monthyear {
height: 70px !important;
}
.calendar_pop_monthyear button {
margin: 10px auto;
display: block;
width: 40px;
}
.calendar_pop_top_container {
background-color: #6494B6;
color: #000;
font-weight: bold;
font-size: 13px;
text-align: center;
overflow: auto;
padding: 2px 0 2px 0;
}
.calendar_pop_top_container a {
color: #fff !important;
position: relative;
top: -2px;
}
.calendar_pop_top_container img {
width: 22px;
height: 11px;
position: relative;
top: 5px;
padding: 0 2px 2px 2px;
}
#calendar_pop_month, #calendar_pop_year {
width: 60px !important;
font-size: 11px !important;
margin: 0 3px;
}
.calendar_pop_link_back {
width: 30px;
float: left;
text-align: center;
}
.calendar_pop_link_forward {
width: 30px;
float: right;
text-align: center;
}
.calendar_pop_days_table td, .calendar_pop_days_table th {
width: 14.28%;
text-align: center;
font-weight: bold;
}
.calendar_pop_days_table th {
font-size: 10px;
}
.calendar_pop_days_table td {
font-size: 11px;
}
.calendar_pop_slot_empty {
background-color: #EBF2F7;
padding: 2px;
}
.calendar_pop_slot_weekday {
background-color: #E2EBF2;
padding: 2px;
}
.calendar_pop_slot_weekend {
background: #D1E0EB;
padding: 2px;
}
.calendar_pop_slot_passive {
color: #c0c0c0;
text-decoration: line-through;
font-weight: normal;
cursor: default;
}
.calendar_pop_slot_active, .calendar_pop_slot_active a:hover {
color: #426C8A;
cursor: pointer;
}
.calendar_pop_slot_active:hover {
color: #000;
}
.calendar_pop_close {
display: block;
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px;
text-align: right;
margin: 3px 2px;
}
/* Calendar */
#calendar_container {
width: 400px;
padding: 5px;
background-color: #fff;
}
#calendar_top_container {
background-color: #E6ECC8;
color: #000;
font-weight: bold;
font-size: 16px;
padding: 5px;
margin: 0 2px 0 2px;
text-align: center;
}
#calendar_top_container a {
color: #000;
}
#calendar_top_container select {
margin: 0 5px 0 5px;
}
#calendar_link_back {
width: 50px;
float: left;
text-align: center;
}
#calendar_link_forward {
width: 50px;
float: right;
text-align: center;
}
#calendar_days_container {
margin: 0 0 0 0;
}
#calendar_days_table td, #calendar_days_table th {
width: 14.28%;
text-align: center;
font-weight: bold;
}
.calendar_day_title_weekend {
padding: 5px 0 5px 0;
background-color: #fff;
}
.calendar_day_title_weekday {
padding: 5px 0 5px 0;
background-color: #fff;
}
.calendar_slot_empty {
background-color: #E6ECC8;
padding: 10px 0 10px 0;
}
.calendar_slot_weekday {
background-color: #F3F6E5;
padding: 10px 0 10px 0;
font-size: 19px;
}
.calendar_slot_weekend {
background: #DEE6B6;
padding: 10px 0 10px 0;
font-size: 19px;
}
.calendar_slot_passive {
color: #c0c0c0;
text-decoration: line-through;
font-weight: normal;
cursor: default;
}
.calendar_slot_active, .calendar_slot_active a:hover {
color: #F09E4C;
cursor: pointer;
}
.calendar_slot_active:hover {
color: #000;
}
#calendar_times_container {
width: 396px;
min-height: 100px;
background-color: #E6ECC8;
border-left: 2px solid #fff;
padding-bottom: 5px;
}
#calendar_times_container h2 {
text-transform: none;
padding: 10px;
}
.calendar_times_slot {
padding: 3px 10px 3px 10px;
font-size: 12px;
font-weight: normal;
margin: 2px 10px 2px 10px;
}
.calendar_slots_active {
color: #F09E4C;
background: #F3F5E7;
font-weight: bold;
cursor: pointer;
}
.calendar_slots_active:hover {
color: #000;
}
.calendar_slots_passive {
color: #c0c0c0;
text-decoration: line-through;
font-weight: normal;
cursor: default;
background: transparent;
}
.shop_sort_container {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5em;
padding-bottom: 1em;
}
#shop_sort_select.inputbox {
padding: 0.25em !important;
}
.shop_wishlist_item {
display: flex;
border: 1px solid #ccc;
border-radius: 0.5em;
border-spacing: 10px;
width: 100%;
box-sizing: border-box;
margin: 1em 0 0 0;
justify-content: space-between;
align-items: center;
padding: 1em;
}
.shop_wishlist_image {
width: 20%;
display: block;
vertical-align: top;
margin-right: 1em;
}
.shop_wishlist_image img {
width: 100%;
height: auto;
}
.shop_wishlist_description {
flex-grow: 1;
vertical-align: middle;
text-align: left;
font-size: 1.25em;
margin-right: 1em;
}
.shop_wishlist_price {
width: 20%;
text-align: center;
color: #000;
display: flex;
flex-direction: column;
font-size: 1.25rem;
}
.shop_wishlist_price > * {
margin-top: 1em;
}
.shop_wishlist_price > *:first-child {
margin-top: 0;
}
.shop_wishlist_price .button {
width: 100%;
display: block;
font-size: 0.8rem;
box-sizing: border-box;
}
.xxxshop-description-inline-icons {
display: flex;
justify-content: space-evenly;
}
.shop_product_section1 {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 1em;
margin: 1em 0;
}
.shop_product_section1 > * {
flex-grow: 1;
width: 50%;
}
.shop_product_buttons {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-evenly;
/*min-height: 28em;*/
gap: 1px;
}
.shop_product_buttons.small {
min-height: 0;
}
.shop_product_buttons textarea {
width: 100%;
height: 5em;
box-sizing: border-box;
padding:1em;
margin-bottom: 1em;
}
.shop_product_buttons > * {
}
.shop_product_finance #finance_box {
width: 100%;
margin: 0;
overflow: hidden;
}
@media all and (max-width: 730px) {
.shop_product_section1 {
flex-direction: column;
}
.shop_product_section1 > * {
width: 100%;
}
.shop_product_buttons {
order: 1;
}
.shop_product_finance {
order: 2;
}
}
.shop_product_image_slider_container {
background: rgb(195,195,195);
background: linear-gradient(180deg, rgba(195,195,195,1) 41%, rgba(195,195,195,1) 47%, rgba(195,195,195,0) 100%);
}
.lSSlideOuter .lSPager.lSGallery li.active {
border: 4px solid #ccc !important;
}
.lSSlideOuter .lSPager.lSGallery li:hover {
border: 4px solid #aaa !important;
}
.lSPager.lSGallery {
margin-top: 0 !important;
}
.lSPager.lSGallery img {
height: 100%;
}
#shop_images_slider > li {
padding: 0 !important;
margin: 0 !important;
}
.shop-products-container {
display: flex;
flex-direction: column;
}
.mob-subcats {
display: none;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1em;
}
.mob-subcats a {
background: #ffcc00;
width: 24%;
color: #000 !important;
text-align: center;
margin-bottom: 4px;
line-height: 1.2em;
padding: 0.5em 1em;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 4em;
}
.mob-subcats a:nth-child(4n + 4) {
margin-right: 0;
}
@media all and (max-width: 730px) {
.mob-subcats {
display: flex;
}
/*
.shop-cat-intro {
order: 2;
}
*/
}
@media all and (max-width: 500px) {
.mob-subcats a {
width: 32%;
}
}
@media all and (max-width: 350px) {
.mob-subcats a {
width: 49%;
}
}
.lSAction > a {
filter: drop-shadow(1px 1px 5px black);
}
#shop_images_slider img {
border: 1px solid #ccc;
box-sizing: border-box;
}
/* For shop, individual product tables */
.shop_product_extras_new_container > h3 {
background: #FFCC00;
text-shadow: 1px 1px 0 #fff;
padding: 5px;
margin: 0 0 0.5em 0;
font-size: 21px;
text-align: center;
}
.shop_product_extras_new {
padding: 1em;
border: 1px solid #ddd;
margin-top: 10px;
}
.shop_product_extras_new_container > .shop_product_extras_new {
padding: 0;
border: 0;
margin-top: 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 1em;
justify-content: flex-start;
margin: 0.5em 0 0.5em 0;
}
.shop_product_extras_new > h3 {
margin: 0;
text-align: center;
padding: 0.5em;
line-height: 1em;
}
.shop_product_extras_new_container > .shop_product_extras_new > .shop_product_extra_row {
width: calc(calc(100% - 2em) / 3);
border: 1px solid #eee;
box-sizing: border-box;
margin: 0;
}
.shop_product_extra_row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.5em 0 0 0;
}
.shop_product_extra_row div:first-child {
width: 40px;
height: 40px !important;
opacity: 0.7;
cursor: pointer;
transition: all 0.2s ease-out;
font-size: 0.8em;
}
.shop_product_extra_row div:first-child img {
margin-bottom: 5px;
width: 100%;
height: auto;
display: block;
}
.shop_product_extra_row div:first-child:hover {
opacity: 1;
}
.shop_product_extra_row > div {
flex-grow: 5;
text-align: center;
padding: 0 0.5em;
display: flex;
flex-direction: column;
justify-content: space-around;
line-height: 1.2em;
align-items: center;
}
.shop_product_extra_buy {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.1em;
width: 120px;
}
.shop_product_extra_addtocart {
padding: 0.2em;
cursor: pointer;
transform: scale(0.65);
}
form.addtocart_form {
display: flex;
justify-content: space-between;
align-items: center;
}
form.addtocart_form> div.button-addtocart {
order: 2;
width: 100%;
}
.product_button {
border-width: 0;
font-family: inherit;
text-align: center;
width: 100%;
box-sizing: border-box;
background-color: #000;
transition: all 0.2s ease-out;
color: #fff;
font-size: 1.2em;
margin-top: 10px;
padding: 10px 5px;
position: relative;
background-image: url(/library/templates/default/resources/topnip.png);
background-position: top right;
background-repeat: no-repeat;
display: block;
}
a.product_button {
color: #fff !important;
}
.shop_product_buttons .product_button {
margin: 0;
padding: 0.75em;
}
.product_button:hover {
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
cursor: pointer;
filter: brightness(1.2);
}
.product_button.trans {
padding: 0 5px;
background: transparent;
color: #555;
font-size: 1em;
}
.product_button.trans:hover {
filter: none;
box-shadow: none;
color: #000;
}
.product_button.grey {
background-color: #666;
}
.product_button.green {
background-color: #139c1d;
}
.product_button.red {
background-color: #ba2327;
padding: 5px 5px;
margin-bottom: 1px;
}
.product_button.yellow {
background-color: #FFCC00;
color: #000;
font-weight: bold;
font-size: 1.4em;
}
.product_button.blackorange {
color: #ffcc00 !important;
}
.product_button > span {
padding-left: 40px;
background: url(/library/templates/default/resources/addtocart-trans.png) no-repeat 0 0;
}
#shop_crosslinks_container {
overflow: auto;
}
.new_product_header {
padding: 10px 0;
}
#sliderObj {
width: 235px;
height: 30px;
}
#finance_deposit_percent {
width: 30px;
}
.finance_box {
border: 2px solid #FFCC00;
border-radius: 10px;
width: 335px;
box-sizing: border-box;
margin-bottom: 10px;
clear:both;
margin-top: 10px;
}
.finance_box_inner {
padding: 10px;
}
.finance_left {
clear: left;
float: left;
width: 60%;
padding: 5px 0;
font-size: 15px;
line-height: 110%;
}
.finance_right {
float: right;
width: 35%;
padding: 5px 0;
text-align: right;
line-height: 110%;
font-size: 15px;
}
.finance_box h3 {
text-align: center;
background: #000;
color: #FFCC00;
padding: 3px;
margin: 0 0 10px 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 1em;
}
.finance_box h4 {
text-align: center;
background: #FFCC00;
color: #000;
padding: 3px;
margin: 0 0 0 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 0.85rem;
}
.finance_box h3 span {
color: #fff;
}
.finance_box select {
width: 310px !important;
display: block:
margin: 10px 0;
border: 1px solid #000;
font: 15px "Trebuchet MS",sans-serif !important;
}
#finance_buy {
display: block;
float: none;
padding: 0.5em 0;
margin: 10px 0 0 0;
width: 100%;
font: normal 1.2em 'Trebuchet MS', sans-serif;
background: #FFC800;
color: #000;
text-shadow: 1px 1px 1px #fff;
text-align: center;
cursor: pointer;
border: 0 !important;
}
#finance_terms_link {
display: block;
width: 115px;
text-align: center;
font-size: 12px;
float: left;
padding: 8px 0 0 0;
}
#instock_icon {
display: block;
margin-top: 10px;
}
.shop_product_right_column select {
/* width: 332px;
font-size: 11px !important; */
}
#features_container {
padding: 5px 0 5px 0;
overflow: auto;
text-align: center;
margin: 0px 0 0 0;
}
#features_container h3 {
background: #FFCC00;
text-shadow: 1px 1px 0 #fff;
padding: 5px;
margin: 0 0 15px 0;
font-size: 21px;
text-align: center;
}
.features_list {
padding: 0 25px 0 0;
margin: 0;
list-style-type: none;
/*float: left;*/
display: inline-block;
max-width: 290px;
position: relative;
vertical-align: top;
}
.features_list li {
background: url(/library/templates/default/resources/yellowtick.png) no-repeat 7px 5px;
padding: 5px 0px 3px 35px;
margin: 0;
font-size: 16px;
line-height: 140%;
text-align :left;
}
#home_box {
width: 614px;
margin: 0 auto;
border: 1px solid #A4A59F;
padding: 5px 10px;
}
.link_to_cart {
display: block;
text-align: center;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
}
.shop_options_table select {
font-size: 11px;
width: 100%;
}
.shop_big_header {
width: 634px;
height: 160px;
margin: 10px auto 10px auto;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
border: 1px solid #A4A59F;
}
.shop_big_header div {
width: 250px;
float: left;
padding: 0 90px 0 10px;
color: #666;
background: url(/library/templates/default/resources/fadeytop.png) repeat-y 0 0;
height: 200px;
line-height: 150%;
font-size: 12px;
}
.shop_big_header div h2 {
color: #AE66AD;
line-height: 120%;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 10px 0 5px 0;
}
.shop_product_container {
padding: 5px 0;
margin: 5px 0;
clear: both;
overflow: auto;
}
.shop_product_price {
font-size: 20px;
color: #000;
display: block;
position: relative;
}
.shop_product_unit {
font-weight: normal;
color: #999;
font-size: 13px;
padding-left: 10px;
}
.shop_product_rrp {
display: block;
font-size: 1.4em;
font-weight: normal;
color: #888;
}
.shop_price_stuff {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 auto 1em auto;
}
.shop-product-dropdown-label {
display: block;
margin: 1em auto 0.5em auto;
text-align: center;
font-size: 1.4em;
font-weight: bold;
}
.shop-product-dropdown {
width: 100%;
display: block;
padding:0.5em;
font-size: 1.2em;
margin-bottom: 1em;
border: 2px solid #ccc !important;
color: #000 !important;
background: #eee;
text-align: center;
cursor: pointer;
}
#shop_addtocart_stuff {
width: 295px;
float: right;
overflow: hidden;
margin: 0 0px 10px 0;
}
.shop_productbox {
background-color: #eee;
color: inherit;
}
.shop_paging {
float: right;
font-weight: bold;
position: relative;
top: 3px;
padding-bottom: 5px;
}
.shop_paging a {
font-weight: normal;
}
.shop_paging img {
padding: 0 5px;
opacity: 0.6;
filter: alpha(opacity=60);
position: relative;
top: 1px;
}
.shop_thumb_description {
min-height: 30px;
}
.shop_product_thumbs_container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.shop_product_thumb {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
border: 1px solid transparent;
width: 200px;
text-align: center;
background: #E3E6E7;
color: #666 !important;
font-weight: bold;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
line-height: 120%;
overflow: hidden;
float: none;
box-sizing: border-box;
margin-bottom: 1.5em;
margin-right: 30px;
}
.shop_product_thumb:nth-child(3n+3) {
margin-right: 0;
}
.shop_product_thumb.shopcat {
height: 240px !important;
}
.shop_product_thumb:hover {
color: #FFCC00 !important;
background: #000;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border: 1px solid #FFCC00;
box-shadow: 5px 5px 5px #ccc;
}
.shop_product_thumb img {
margin: 0 auto 5px 0;
width: 100%;
max-width: 198px;
height: auto;
display: block;
}
.shop_thumb_rrp {
display: block;
background: #fff;
color: #333;
padding-top: 2px;
}
.shop_thumb_price {
display: block;
background: #FFCC00;
color: #000;
padding-top: 2px;
font-size: 1.2em;
line-height: 1.5em;
}
.shop_breadcrumb {
border-bottom: 1px solid #ddd;
padding: 5px;
text-align: left;
margin-bottom: 10px;
}
.shop_product_thumb.shopproduct:hover .shop_thumb_price {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background: #FFCC00;
color: #000;
}
#shop_product_long_description_container {
padding: 0 7px 7px 0;
margin-top: 0;
line-height: 130%;
font-size: 13px;
overflow: auto;
clear: both;
}
.shop_product_right_column {
width: 350px;
padding: 5px 5px 0 0;
float: left;
text-align: left;
}
.shop_product_img {
border: 1px solid #A4A59F;
}
.shop_product_left_column {
float: left;
width: 655px;
text-align: left;
}
.shop_footer {
border-top: 1px solid #ddd;
padding: 10px 0;
margin: 10px 0;
font-size: 10px;
clear: right;
}
.shop_img_extra_container {
background: #fff;
text-align: left;
width: 380px;
}
.shop_img_extra {
display: inline-block;
padding: 2px;
margin: 15px 0 0 0px;
}
.shop_category_back_button {
opacity: 0.6;
filter: alpha(opacity=60);
}
.shop_qty {
display: block;
}
.shop_addtocart {
border: 0;
display: block;
}
/* Currency conversion links */
#shop_side_currency {
position: relative;
left: -7px;
white-space: nowrap;
}
#shop_side_currency_heading {
margin: 10px 0 8px 0;
}
.shop_side_currency_img_selected {
padding: 10px 0 5px 0;
background: url(/library/templates/default/resources/curency_select_arrow.png) no-repeat top center;
}
.shop_side_currency_img {
padding: 10px 0 5px 0;
}
#shop_side_currency_pound {
padding-right: 3px;
position: relative;
left: 3px;
width: 46px;
height: 47px;
}
#shop_side_currency_usd {
width: 42px;
height: 47px;
}
#shop_side_currency_euro {
padding-left: 5px;
position: relative;
left: -5px;
width: 44px;
height: 47px;
}
.shop_crosslinked_items {
overflow: auto;
}
#shop_cart_accessories_container {
overflow: auto;
margin-bottom: 20px;
}
.shop_cart_accessory {
display: block;
float: left;
margin: 10px;
width: 170px;
background: #ABA4C8;
color: #fff !important;
font-weight: bold;
line-height: 140%;
padding-bottom: 10px;
font-size: 14px;
text-align: center;
border: 2px solid #ddd;
}
.shop_cart_accessory:hover {
color: #5A5085 !important;
}
.shop_cart_accessory img {
display: block;
padding-bottom: 10px;
width: 170px;
height: 120px;
}
#shop_cart_accessories_products {
display: none;
}
.shop_cart_accessories_product {
overflow: auto;
padding: 5px;
margin: 5px 0;
background: #EBEBF1;
}
.shop_cart_accessories_product img {
display: block;
float: left;
width: 120px;
height: 85px;
margin-right: 60px;
}
.shop_cart_accessories_product a {
display: block;
width: 100px;
font-weight: bold;
text-align: center;
padding: 5px 5px;
background: #5A5085;
color: #fff !important;
cursor: pointer;
float: right;
margin: 25px 10px 0 60px;
}
.shop_cart_accessories_product b {
display: block;
float: right;
text-align: right;
width: 100px;
}
.shop_cart_accessories_product h2 {
margin: 5px 0 5px 0 !important;
line-height: 100% !important;
}
.shop_cart_accessories_product div {
float: left;
width: 410px;
line-height: 140%;
font-size: 11px;
padding: 5px 0;
}
#shop_product_tabs {
background: #000;
width: 100%;
font-size: 1em;
overflow: auto;
color: #fff;
display: flex;
justify-content: stretch;
align-items: stretch;
}
#shop_product_tabs div {
cursor: pointer;
width: 33.333333333333%;
border-right: 1px solid #fff;
padding: 5px 15px;
box-sizing: border-box;
flex-grow: 1;
}
#shop_product_tabs div:last-child {
border-right: 0;
}
#shop_product_tabs div:hover {
background: #FFCC00;
color: #000;
}
#shop_product_tab_content {
clear: both;
/*height: 300px;*/
padding: 0 10px 10px 10px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
}
#shop_product_tab_content iframe {
margin-bottom: 10px;
}
@media all and (max-width: 730px) {
.shop_product_thumb {
font-size: 0.9em;
width: 31%;
margin-right: 3.5%;
}
.finance_box {
width: 100%;
}
#shop_addtocart_stuff {
width: 100% !important;
float: none !important;
margin: 20px 0px 10px 0;
}
#shop_product_tab_content {
width: 100% !important;
box-sizing: border-box;
}
.features_list {
max-width: 1000px;
width: 100%;
}
#features_container {
padding-bottom: 1em;
}
}
@media all and (max-width: 430px) {
.shop_product_thumbs_container {
flex-direction: column;
gap: 1em;
}
.shop_product_thumb {
width: 100%;
margin: 0;
}
.finance_box {
font-size: 0.8em;
}
}
/* Gallery */
#gallery_overall {
padding-bottom: 10px;
overflow: auto;
}
.gallery_paging {
float: right;
font-weight: bold;
position: relative;
top: 3px;
padding-bottom: 5px;
}
.gallery_paging a {
font-weight: normal;
}
.gallery_paging img {
padding: 0 5px;
opacity: 0.6;
filter: alpha(opacity=60);
position: relative;
top: 1px;
}
.gallery_breadcrumb {
border-bottom: 1px solid #000;
padding: 5px;
text-align: left;
}
.gallery_cat_button_div {
padding: 10px 1px 15px 1px;
float: left;
text-align: center;
vertical-align: bottom;
}
.gallery_cat_button_img {
}
.gallery_cat_button_description {
display: block;
padding: 5px;
}
.gallery_cats_row {
width: 100%;
float: left;
}
#gallery_pictures_div {
}
#gallery_sidecats_div {
float: right;
text-align: left;
font-size: 13px;
font-weight: bold;
width: 120px;
}
#gallery_sidecats_div div {
padding: 5px 0 5px 0;
}
.gallery_pic_div {
padding: 10px 1px 15px 1px;
float: left;
text-align: center;
}
.gallery_pic_description {
padding: 5px;
}
.gallery_pic {
}
.gallery_pics_row {
width: 98%;
float: left;
overflow: auto;
}
#gallery_link_back {
width: 100%;
font-weight: bold;
text-align: center;
padding: 10px 0 10px 0;
margin-top: 20px;
border: 1px solid #000;
cursor: pointer;
}
.gallery_paging_arrows {
position: relative;
top: 6px;
}
/* Javascript slideshow */
.slideshow_inner_container {
}
.slideshow_left_browse {
background: url(/library/templates/default/resources/left_arrow.png) no-repeat center left;
cursor: pointer;
}
.slideshow_right_browse {
background: url(/library/templates/default/resources/right_arrow.png) no-repeat center right;
cursor: pointer;
}
/* Forum styles */
.forum {
background-color: #ffffff;
color: inherit;
}
.top {
background-color: #E2E3FC;
color: inherit;
}
.cat {
background-color: #CCFFCC;
color: inherit;
}
.evenrow {
background-color: #C0C0FF;
color: inherit;
}
.oddrow {
background-color: #ffffff;
color: inherit;
}
/* General directory layout */
.directory_listing {
background-color: #E4E5EE;
}
.directory_breadcrumb {
border-bottom: 1px solid #000;
padding: 5px;
text-align: left;
}
/* Featured listings */
#directory_featured_listings {
width: 300px;
border: 1px solid #c0c0c0;
padding: 10px;
}
/* Tabs (for directory popups) */
.tabs_main {
background-color: #E2E3FC;
color: inherit;
border: 1px solid #000000;
}
.tabs_active {
background-color: #E2E3FC;
color: inherit;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom-width: 0;
}
.tabs_inactive {
background-color: #AFB0C3;
color: inherit;
border: 1px solid #000000;
}
.tabs_hover {
background-color: #C1C5F9;
color: inherit;
border: 1px solid #000000;
}
html {
font-size: 100%;
}
body {
font: normal 13px 'Arial', sans-serif;
line-height: 150%;
color: #000;
}
/* Main page titles */
h1, .pagetitle {
background: url(/library/templates/default/resources/blackfadey.jpg) no-repeat top right;
font: normal 20px 'Arial', sans-serif;
text-shadow: 1px 1px 1px #000;
letter-spacing: 0;
color: #FFCC00;
margin: 0;
padding: 17px 0 17px 25px;
border-bottom: 2px solid #fff;
}
/* Paragraph sub-headings */
h2, .heading {
font: bold 15px 'Arial', sans-serif;
letter-spacing: 0;
color: #000;
margin: 10px 0 10px 0;
}
/* Links */
a:link, a:visited, a:active {
color: #926A00;
text-decoration: none;
}
a:hover {
color: #DE9D00;
text-decoration: none;
}
/* Miscellaneous font styles */
.largetext { font-size: 13px; }
.smalltext { font-size: 11px; font-weight: normal; }
.texthighlight {
background-color: yellow;
color: inherit;
}
.emphasisedtext {
color: #000000;
background-color: inherit;
font-weight: bold;
font-size: 13px;
}
.properties_property_container {
width: 75%;
background: #fff;
padding: 15px 25px 15px 25px;
}
.properties_property_left_col {
margin-right: 225px;
}
.properties_property_left_col div {
padding: 0 0 15px 0;
}
.properties_property_right_col {
width: 200px;
text-align: right;
float: right;
background: #ffffff;
padding-top: 35px;
}
.properties_property_bottom {
clear: right;
padding: 5px;
margin-top: 10px;
}
.properties_property_bottom div {
float: right;
width: 200px;
text-align: right;
}
.properties_details_label {
float: left;
width: 80px;
font-weight: bold;
text-align: right;
font-size: 10px;
clear: left;
}
.properties_details_value {
float: right;
width: 105px;
font-size: 10px;
text-align: left;
}
/* Tables that display information */
.tablestyle {
border: 1px solid #ffffff;
background-color: #060606;
color: #ffcc00;
}
.tablestyle_table {
border-left: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
.tablestyle_heading,
.tablestyle_table th,
.tablestyle_table thead tr td {
background-color: #000;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding: 2px 4px;
}
.tablestyle_table td {
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background-color: #ddd;
padding: 2px 4px;
vertical-align: top;
}
.tablestyle_table th a {
color: #fff;
text-decoration: underline;
}
.tablestyle_centred td, .tablestyle_centred th {
text-align: center;
}
.tablestyle_nostyle {
border: 0;
}
.tablestyle_nostyle td, .tablestyle_nostyle th {
vertical-align: top;
padding: 3px;
border-spacing: 0;
border: 0;
}
/* Content area, important for control panel preview */
.content_area {
background-color: #fff;
}
hr {
color: #4B5870;
background-color: #4B5870;
border-width: 0;
height: 1px;
}
#comments {
border-top: 1px solid #666;
clear: both;
margin-top: 15px;
}
.comments_comment {
background: #eee;
padding: 10px 10px 20px 10px;
margin: 15px 0;
color: #333;
border-top: 1px solid #d9d9d9;
border-bottom: 2px solid #ccc;
font-size: 11px;
line-height: 140%;
}
.comments_comment_comment {
float: left;
width: 565px;
padding: 0 0 0 10px;
}
.comments_comment_comment blockquote {
font-style: italic;
}
.comments_comment_top {
overflow: auto;
}
.comments_comment_links {
width: 150px;
float: right;
overflow: hidden;
padding-right: 10px;
}
.comments_comment_links hr {
border-top: 1px dotted #ccc !important;
background-color: transparent !important;
color: transparent !important;
}
.comments_comment_links a {
display: block;
margin: 1px;
}
.comments_comment_header {
margin-bottom: 15px;
padding: 10px 10px 0 10px;
color: #666;
font-size: 10px;
background-color: #e5e5e5;
overflow: auto;
}
.comments_comment_header b {
font-weight: bold;
color: #666;
float: left;
}
.comments_comment_date {
float: right;
width: 150px;
}
.comments_comment_avatar {
width: 23px;
height: 23px;
float: left !important;
display: block;
margin: -5px 10px 5px 0 !important;
border: 1px solid #d9d9d9;
background-color: #fff;
}
#comments input {
display: block;
width: 200px;
}
#comments label {
display: block;
margin: 10px 0 5px 0;
}
#comments textarea {
height: 100px;
display: block;
width: 100%;
}
.comments_comment_comment .button {
clear:left;
float: left !important;
}
#comments .button {
float: right;
padding: 5px;
width: 120px;
margin: 10px 0 15px 0;
}
#comments img {
float: right;
margin: 0 0 5px 5px;
}
.comment_approval_needed {
border: 2px solid red;
}
.popupstyle {
padding: 0;
background: #ffffff !important;
color: inherit;
margin: 0;
}
.contact_heading {
color: #333;
background-color: inherit;
}
a[rel~="tag"] {
color: inherit !important;
text-decoration: none !important;
border-bottom: 1px dotted #ccc !important;
}
.error_alert, #error_alert {
padding: 20px 10px 25px 80px;
background: #ffffff url(/library/templates/default/resources/alert_negative.gif) 5px 5px no-repeat;
color: #000000;
border: 1px solid #c0c0c0;
margin: 0 0 20px 0;
}
.success_alert {
padding: 20px 10px 25px 80px;
background: #ffffff url(/library/templates/default/resources/alert_positive.gif) 5px 10px no-repeat;
color: #000000;
border: 1px solid #c0c0c0;
margin: 0 0 20px 0;
}
.pass_alert {
padding: 20px 10px 25px 80px;
background: #ffffff url(/library/templates/default/resources/notice_pass.gif) 15px 25px no-repeat;
color: #000000;
border: 1px solid #c0c0c0;
margin: 0 0 20px 0;
}
.fail_alert {
padding: 20px 10px 25px 80px;
background: #ffffff url(/library/templates/default/resources/notice_fail.gif) 15px 25px no-repeat;
color: #000000;
border: 1px solid #c0c0c0;
margin: 0 0 20px 0;
}
#modal_info_container {
width: 320px;
height: 275px;
background: #6c6c6c;
color: #fff;
border: 1px solid #000;
position: absolute;
display: none;
padding: 5px;
-webkit-box-shadow: 1px 2px 3px #333;
-moz-box-shadow: 1px 2px 3px #333;
}
#modal_info_content {
overflow: auto;
overflow-x: hidden;
height: 250px;
font-size: 11px;
}
#modal_info_content img {
display: block;
width: 310px;
margin: 0 auto 10px auto;
}
#modal_info_close {
font-size: 20px;
text-align: right;
padding-top: 5px;
}
#modal_info_close a {
color: #fff !important;
}
/* Site Map */
#sitemap_paging {
text-align: left;
padding: 0 0 10px 0;
}
.sitemap {
margin-top: -10px;
}
.sitemap, .sitemap ul {
padding: 0 0 0 15px;
list-style-type: none !important;
}
.sitemap li {
padding: 10px 0 0 0;
}
.sitemap ul li {
padding: 0 0 0 0;
}
/* Expandable menus (ie non-roll-over list menus) */
.menu_expandable_container {
text-align: left;
}
.menu_expandable_container ul {
padding: 3px 0 3px 0;
margin: 0;
list-style-type: none;
}
.menu_expandable_container ul ul {
padding-left: 20px;
list-style-type: none;
}
.menu_expandable_container ul ul li {
font-size: 10px;
}
.menu_expandable_container a {
display: block;
}
/* Menus when javascript disabled */
.navigation_vertical li, #navigation_horizontal li, #navigation_products li {
font-size: 10px;
}
.navigation_horizontal li {
display: inline;
padding: 0 10px 0 10px;
color: #ffffff;
background: #000000;
}
.navigation_vertical ul, #navigation_products ul {
padding-left: 10px;
}
.navigation_horizontal ul {
white-space: nowrap;
padding: 0 10px 0 10px;
display: inline;
}
/* AJAX stuff */
.ajax_updating {
height: 140px;
background: url(/library/templates/default/resources/indicator.gif) no-repeat center center;
text-align: center;
}
#ajaxticker1{
/* styles go here if required */
}
#ajaxticker1 div{
/*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
/* Styles for iBox modal dialogues */
#ibox_wrapper button {
position: relative;
left: 5px;
}
#ibox_w{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999999;
width: 100%;
height: 100%;
background-color: #000;
margin: 0;
padding: 0;
filter: alpha(opacity=0);
-moz-opacity: 0.0;
opacity: 0.0;
}
#ibox_progress {
margin:0;
padding:0;
position: absolute;
z-index:105;
}
#ibox_wrapper {
position: absolute;
top: 0px;
left: 0px;
z-index:9999999999;
padding:8px 14px 34px 8px;
border: 1px solid #333;
width:300px;
min-width: 45px;
height:300px;
background-color:#ccc;
margin: 0;
}
#ibox_wrapper input, #ibox_wrapper button {
z-index: 101 !important;
}
#ibox_content, #ibox_extra_content {
background: #fff;
width: 100%;
height: 100%;
margin-bottom: 5px;
position: relative;
top: 0px;
left: 0px;
border: 1px solid #000;
padding: 2px;
}
#ibox_footer_wrapper {
position:relative;padding:0;margin:0;top:0px;left:0px;
}
.modal_popup_content {
padding: 5px 15px;
}
/* Driver SMS tracking (users system) */
#drivertracker_group {
float: right;
clear: both;
width: 300px;
margin: -30px 0 15px 0;
}
#drivertracker_container{
font-size: 14px;
color: #666;
overflow: auto;
padding-top: 30px;
}
#drivertracker_container hr {
clear: both;
position: relative;
top: -8px;
display: block;
}
.drivertracker_close_icon {
width: 19px;
height: 19px;
float: right;
display: block;
background: url(/library/templates/default/resources/close_x.gif) no-repeat center center;
}
.drivertracker_driver {
clear: left;
width: 300px;
float: left;
font-weight: bold;
padding: 0 0 10px 0;
}
.drivertracker_driver img {
width: 50px;
height: 50px;
float: left;
display: block;
margin: -10px 10px 5px 0;
border: 1px solid #ccc;
}
.drivertracker_number {
float: left;
width: 150px;
}
.drivertracker_icons {
width: 150px;
float: left;
margin-top: -2px;
}
.drivertracker_icons img {
width: 23px;
height: 23px;
padding: 0 3px;
}
.drivertracker_status {
float: left;
font-size: 11px;
}
.drivertracker_changeno {
padding: 5px 10px 5px 205px;
border: 1px solid #e1e1e1;
margin: 0 0 40px 0;
clear: left;
font-size: 12px;
display: none;
}
.drivertracker_expanded_details {
padding: 5px 10px 5px 10px;
border: 1px solid #e1e1e1;
margin: 0 0 40px 0;
clear: left;
font-size: 12px;
overflow: auto;
display: none;
}
.drivertracker_expanded_details img {
width: 150px;
height: 150px;
border: 1px solid #ccc;
float: left;
display: block;
}
.drivertracker_expanded_details textarea {
float: left;
width: 400px;
height: 70px;
display: block;
margin: 0 0 5px 0;
padding: 3px 5px;
}
.drivertracker_expanded_details div {
padding: 0 0 10px 20px;
float: left;
}
.drivertracker_expanded_details b {
display: block;
}
.drivertracker_expanded_details .button {
margin-left: 20px;
padding: 2px 10px;
}
/* Miscellaneous styles */
.section { margin: 8px 0 8px 0; }
a img { border-width: 0; }
.paging_container {
padding: 10px 0 10px 0;
text-align: center;
}
.heading_highlighted {
color: navy;
background-color: inherit;
}
.content_section {
display: block;
border: 0 solid #000;
}
.swf_div {
display: inline;
}
.flashgallery_div {
display: block;
text-align: center;
margin: 10px auto;
padding: 5px;
border: 1px solid #666;
clear: both;
width: 600px;
background: #BBBDFF;
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
overflow: auto;
}
p {
margin: 0;
padding: 0 0 10px 0;
display: block;
}
code {
font-size: 12px;
}
.admin_icons_horizontal {
float: right;
}
.admin_icons_horizontal img {
width: 23px;
height: 23px;
margin-right: 5px;
}
/* New modal boxes (bumble) */
.modal_bg {
background: rgba(0,0,0,0.4);
}
.modal_box {
background: #fff;
border-radius: 1em;
box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
overflow: hidden;
max-width: 900px;
border: 1px solid #fff;
}
.modal_close {
width: 32px;
height: 32px;
top: 10px;
right: 10px;
position: absolute;
background: url(/library/templates/default/resources/modal_close.png) no-repeat center center;
cursor: pointer;
}
.modal_title {
background: #333;
color: #fff;
padding: 15px 40px 15px 20px;
box-sizing: border-box;
font-size: 2em;
text-align: center;
}
.modal_content {
padding: 15px 20px;
min-height: 100px;
box-sizing: border-box;
margin: 55px 0 0 0;
font-size: 100%;
height: calc(100% - 60px);
/*max-height: 88%;*/
width: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}
@media only screen and (max-width: 550px) {
.modal_content {
padding: 10px 10px;
}
}
.modal_content.compressed {
height: calc(100% - 100px);
}
.modal_content .modal_content_block {
vertical-align: top;
display: inline-block;
width: 48%;
box-sizing: border-box;
padding: 6px 0;
}
.modal_content .modal_content_block.left {
margin-right: 4%;
}
.modal_content .modal_content_block.wide {
width: 100%;
}
.modal_content .modal_content_block label {
display: block;
padding-bottom: 4px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.modal_content_section.columns {
overflow: auto;
}
.modal_content_section.columns label {
width: 40%;
float: left;
padding-top: 3px;
}
.modal_content .modal_content_block .inputbox {
box-sizing: border-box;
width: 100%;
padding: 5px !important;
font-size: 100% !important;
}
.modal_content_section.columns .inputbox {
width: 55% !important;
float: right;
}
.modal_content .modal_content_block .inputbox.narrow {
width: 50%;
}
.modal_content .modal_content_block .inputbox.narrower {
width: 30%;
}
.modal_content .modal_content_block .inputbox.right {
text-align: right;
}
.modal_content .modal_content_block textarea.inputbox {
height: 100px;
font: 'Arial', sans-serif;
}
.modal_content .modal_button_container {
text-align: center;
padding: 10px 0;
}
.modal_content .modal_button_container .button {
padding: 5px !important;
font-size: 100% !important;
width: 30%;
margin: 0 10px;
display: inline-block;
}
.modal_content .modal_content_alert {
text-align: center;
margin: 10px auto;
font-size: 100%;
line-height: 140%;
padding: 5px;
box-sizing: border-box;
}
.modal_content .modal_content_alert.highlight {
background: #eb5555;
color: #fff;
text-shadow: 1px 1px 0 #000;
}
.modal_top_alert {
line-height: 140%;
padding: 5px;
box-sizing: border-box;
background: #fbfbfb;
margin: 0 0 20px 0;
}
.modal_top_alert i {
padding-right: 5px;
}
.modal_content_title_block, .modal_content_title_block * {
text-align: center;
}
.modal_content h2 {
font-size: 120%;
}
.modal_content h3 {
font-size: 100%;
margin: 10px 0 10px 0;
padding: 0;
}
.modal_content h3 div {
font-size: 70%;
}
.modal_content_section {
overflow: auto;
padding: 10px 0 0 0;
}
.modal_content_section h3 {
margin: 10px 0 10px 0;
}
.modal_content_section:first-child h3 {
margin: 0 0 10px 0;
}
.modal_content_title {
color: #fff;
text-align: center;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
margin: 0;
padding: 5px;
background-color: #333;
}
.modal_content.tabbed .modal_content_title {
padding-top: 10px;
padding-bottom: 10px;
border-top-left-radius: 0;
}
.modal_description_box {
background: #fafafa;
border: 1px solid #ededed;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
}
.modal_description_box label {
display: block;
font-weight: bold;
vertical-align: bottom;
}
.modal_description_box label select {
display: inline-block;
vertical-align: baseline;
font-weight: normal;
text-transform: none;
margin-left: 10px;
margin-top: 10px;
}
.modal_wizard_controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background: #fbfbfb;
/*height: 15%;*/
height: 70px;
/*border-top: 3px solid [%template_colour1];*/
box-shadow: 0 -3px 15px rgba(0,0,0,0.2);
}
.modal_wizard_controls button {
position: absolute;
width: 40%;
max-width: 200px;
top: 50%;
height: 70%;
max-height: 70px;
box-sizing: border-box;
transform: translateY(-50%);
text-align: center;
display: inline-block;
}
.modal_wizard_prev {
left: 5%;
}
.modal_wizard_next {
right: 5%;
}
.modal_wizard_controls button.hidden {
display: none;
}
.modal_wizard_tabs button {
font-weight: normal;
padding: 5px 10px;
font-size: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-right: 2px;
display: inline-block;
}
.modal_wizard_tabs button.button.active {
color: [%template_font_colour] !important;
background-color: [%template_box_heading_background] !important;
}
@media only screen and (max-width: 750px) {
.modal_wizard_tabs button {
font-size: 80%;
padding: 5px 5px;
}
}
@media only screen and (max-width: 550px) {
.modal_wizard_tabs button {
font-size: 60%;
padding: 3px 2px;
}
}
.modal_middle_splash {
width: 50%;
margin: 20px auto;
text-align: center;
font-size: 150%;
line-height: 200%;
}
.modal_middle_splash i {
font-size: 300%;
color: [%template_colour1];
display: inline-block;
margin-bottom: 15px;
margin-left: 5px;
}
.modal_messages_container {
display: table;
height: 100%;
width: 100%;
border-spacing: 10px;
}
.modal_messages_top {
display: table-row;
background: #fff;
position: relative;
}
.modal_messages_top_stuff {
overflow-y: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.modal_messages_bottom {
display: table-row;
background: #eee;
height: 30%;
position: relative;
}
.modal_messages_bottom_stuff {
display: table;
width: 100%;
height: 100%;
}
.modal_messages_bottom_left {
display: table-cell;
box-sizing: border-box;
width: 90%;
position: relative;
}
.modal_messages_bottom .inputbox {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0%;
padding: 5px;
width: 100%;
height: 100%;
}
.modal_messages_bottom_right {
display: table-cell;
vertical-align: bottom;
padding: 0 20px;
}
.modal_messages_send_icon {
width: 80px;
height: 80px;
background-color: [%template_colour1];
border-radius: 50%;
margin: 0 auto;
transition: all 0.2s ease-out;
position: relative;
}
.modal_messages_send_icon::after {
position: absolute;
top: 20px;
width: 100%;
left: 0;
color: [%template_menu_font_colour];
content: '\f1d8';
font-family: 'FontAwesome';
font-size: 30px;
}
.modal_messages_send_icon:hover {
background-color: [%template_menu_hover_background];
}
.modal_messages_message {
width: 85%;
margin: 0 0 20px 15px;
padding: 30px 20px;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
background: #fafafa;
position: relative;
}
.modal_messages_message.you {
margin-left: 7%;
background: #C6F8D8;
}
#modal_messages_bottom {
clear: both;
}
.modal_messages_message:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
top: 15px;
left: -7px;
background: #fafafa;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.modal_messages_message.you:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
top: 100%;
left: 100%;
background: #C6F8D8;
margin-left: -7px;
margin-top: -30px;
}
.modal_messages_dateheader {
position: absolute;
top: 5px;
right: 15px;
font-size: 60%;
color: #aaa;
}
.modal_options_select {
display: block;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
border: 1px solid [%template_colour1];
padding: 5px;
height: 160px;
overflow-y: auto;
overflow-x: hidden;
}
.modal_options_select label {
display: block;
padding: 3px;
font-size: 90%;
line-height: 100%;
}
.modal_options_select label:hover {
cursor: pointer;
background: [%template_colour1];
color: #fff;
}
.modal_content_cols {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
/* Bumble JS stuff */
.bumbleBlackBox {
background: rgba(0,0,0,1);
}
.bumbleThrobber {
width: 34px;
height: 34px;
background: url(/library/templates/default/resources/throbber.png?v=2) no-repeat center center;
animation-duration: 1.5s;
animation-name: bumbleRotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: absolute;
left: 50%;
top: 50%;
margin: -17px 0 0 -17px;
}
.bumbleThrobber.top {
top: 15%;
}
.bumbleThrobber.dark {
background-image: url(/library/templates/default/resources/throbber-dark.png?v=2);
}
@keyframes bumbleRotate {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.bumbleDragDropProxy {
width: 64px;
height: 64px;
border: 2px dashed #ccc;
display: block;
background: rgba(255,255,255,0.8);
}
.shop_crosslinked_product {
width: 150px;
height: 200px;
float: left;
margin: 5px;
text-align: center;
}
.shop_crosslinked_product b {
display: block;
}
.shop_product_rating_container {
font-size: 10px;
margin: -6px 0 5px 0;
overflow: auto;
}
.shop_product_rating_text {
float: left;
padding-top: 5px;
}
.shop_product_star_rating {
float: left;
width: 120px;
}
.shop_product_rating_container span {
padding: 0 2px
}
#directory_advanced_search {
background: #DEDEE7;
overflow: auto;
padding: 5px;
}
#directory_advanced_search h1 {
font-size: 16px;
margin: 5px 0 10px 0;
line-height: 140%;
}
.directory_search_field_container {
float: left;
width: 380px;
height: 25px;
}
.directory_search_label {
width: 100px;
display: block;
float: left;
}
.directory_search_input_container {
float: left;
display: block;
width: 150px;
}
#directory_advanced_search .inputbox{
width: 250px;
font-size: 10px !important;
}
#directory_advanced_search .button {
display: block;
width: 100px;
padding: 5px;
clear: both;
margin: 0 auto 20px auto;
position: relative;
top: 10px;
}
#events_select_categories_container {
float: right;
margin: 10px 10px 0 0;
padding: 10px;
text-align: right;
}
#events_side_categories {
float: right;
clear: right;
padding: 10px;
width: 20%;
margin: 0 10px 10px 0;
}
#events_side_categories a, #events_side_categories b {
display: block;
}
#events_table {
width: 70%;
}
#events_table tr td a {
display: block;
}
#news_article i {
display: block;
}
.news_articles_list {
}
/* news categories */
.news_categories ul {
padding-left: 0;
list-style-type: none;
font-weight: bold;
}
.news_categories ul ul {
font-weight: normal;
padding-left: 20px;
font-size: 10px;
list-style-type: square;
}
/* news sub categories */
.news_sub_categories {
padding: 10px 10px;
list-style-type: none;
font-weight: bold;
margin: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
#blog_article i {
display: block;
}
.blog_articles_list {
}
/* blog categories */
.blog_categories ul {
padding-left: 0;
list-style-type: none;
font-weight: bold;
}
.blog_categories ul ul {
font-weight: normal;
padding-left: 20px;
font-size: 10px;
list-style-type: square;
}
/* blog sub categories */
.blog_sub_categories {
padding: 10px 10px;
list-style-type: none;
font-weight: bold;
margin: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}