p.button,
span.button,
input.submit,
p.button a,
span.button a {
	height: 23px;
	text-indent: -9999em;
	background: url('https://images.blackcircles.com/images/global/buttons.png') no-repeat;
	outline: none;
}
p.button,
span.button,
input.submit,
a.submit,
p.button a,
span.button a {
	height: 23px;
	text-indent: -9999em;
	background: url('https://images.blackcircles.com/images/global/buttons.png') no-repeat;
	outline: none;
}
span.button {
	display: inline-block;
}
input.findtyres {
	background-position: -800px top;
	border: medium none;
	float: right;
	width: 109px;
}

p.button.choose-fitting a:hover {
	background-position: -3000px bottom;
}
.loginDetails input.submit.login:hover {
	background-position: -800px bottom;
}
input.submit {
	border: none;
	cursor: pointer;
	width: 38px;
	background-position: -200px top;
}
input.submit a {
	border: none;
	cursor: pointer;
	width: 38px;
	background-position: -200px bottom;
}
input.submit a:hover {
	border: none;
	cursor: pointer;
	width: 38px;
	background-position: -200px bottom;
}
p.button a,
span.button a {
	display: block;
	cursor: pointer;
}
/* search */
input.submit.search {
	width: 74px;
	background-position: 0 top;
}
input.submit.search:hover {
	background-position: 0 bottom;
	width: 74px;
}
/* go */
input.submit.go {
	width: 37px;
	background-position: -200px top;
}
input.submit.go:hover {
	background-position: -200px bottom;
	width: 37px;
}
/* select garage */
input.submit.select-garage {
	width: 109px;
	background-position: -2200px top;
}
input.submit.select-garage:hover {
	background-position: -2200px bottom;
	width: 109px;
}
/* place order */
p.button.place-order {
	width: 109px;
	background-position: -600px bottom;
}
p.button.place-order a {
	background-position: -600px top;
}
p.button.place-order a:hover {
	background-position: -600px bottom;
}
/* login */
input.submit.login {
	background-position: -800px top;
	width: 109px;
}
input.submit.login:hover {
	background-position: -800px bottom;
	width: 109px;
}
/* next */
input.submit.next {
	width: 128px;
	background-position: -1000px top;
}
input.submit.next:hover {
	background-position: -1000px bottom;
}
/* add service to basket */
input.submit.add-service-to-basket {
	width: 161px;
	background-position: -1200px top;
	float: right;
}
input.submit.add-service-to-basket:hover {
	background-position: -1200px bottom;
}
/* add mot to basket */
input.submit.add-mot-to-basket {
	width: 161px;
	background-position: -1400px top;
}
input.submit.add-mot-to-basket:hover {
	background-position: -1400px bottom;
}
/* add more tyres */
span.button.add-more-tyres a {
	background-position: -7727px top;
	width: 150px;
}
span.button.add-more-tyres {
	background-position: -7727px top;
}

/* add more items */
span.button.add-more-items a {	
	background-position: -1600px top;
	width: 150px;
}
span.button.add-more-items {
	background-position: -1600px top;
}
/* continue to garage choice*/
.button.continue-to-garagechoice {
	width: 110px;
	background-position: -2200px bottom;
}
.button.continue-to-garagechoice a {
	background-position: -2200px top;
}
.button.continue-to-garagechoice a:hover {
	background-position: -2200px bottom;
}
/* find my tyres */
input.submit.find-my-tyres {
	width: 109px;
	background-position: -2000px top;
	cursor: pointer;
}
input.submit.find-my-tyres:hover {
	width: 109px;
	background-position: -2000px bottom;
}
input.submit.find-my-tyres:hover {
	background-position: -2000px bottom;
}

/* continue */
input.paypal.continue {		
	float: right;
}

input.submit.pay4later:disabled 
{
    background-position: -7400px bottom;
}
input.submit.continue:disabled,
input.paypal.continue:disabled,
input.submit.pay4later:disabled
{
    cursor: progress;   
}    

input.paypal.continue:disabled {
    opacity: 0.7;
}

/* add to basket - showing "Buy" image*/
input.submit.add-to-basket {
	width: 109px;
	background-position: -7584px top;
	float: right;
	margin-left: 10px;
	margin-top:3px;
}
input.submit.add-to-basket:hover {
	background-position: -7584px bottom;
	width: 109px;
}
/* brands add to basket */
input.submit.brands-add-to-basket {
	width: 109px;
	background-position: -2400px top;
	float: right;
}
input.submit.brands-add-to-basket:hover {
	background-position: -2400px bottom;
	width: 109px;
}

/* go to checkout */
span.button.go-to-checkout {
	width: 109px;
	background-position: -2600px bottom;
	margin-left: 60px !important;
}
span.button.go-to-checkout a {
	background-position: -2600px top;
}
/* continue to basket - shows continue button */
span.button.continue-to-basket {
	width: 112px;
	background-position: -2200px bottom;
}
span.button.continue-to-basket a {
	background-position: -2200px top;
}
/* go to basket */
span.button.go-to-basket {
	width: 112px;
	background-position: -2200px bottom;
}
span.button.go-to-basket a {
	background-position: -2200px top;
}
/* choose tyres */
span.button.choose-tyres {
	width: 109px;
	background-position: -2800px bottom;
	float: right;
}
span.button.choose-tyres.none {    
    float: none;
}

input.submit:hover {
	background-position: -200px bottom;
	border: medium none;
	cursor: pointer;	
}

span.button.choose-tyres a:hover {
	background-position: -2800px bottom;
}

span.button.choose-tyres a {
	background-position: -2800px top;
}

/* choose fitting */
p.button.choose-fitting {
	width: 109px;
	background-position: -3000px bottom;
}
p.button.choose-fitting a {
	background-position: -3000px top;
}
/* find my garage */
input.submit.find-my-garage {
	width: 109px;
	background-position: -3200px top;
}
input.submit.find-my-garage:hover {
	background-position: -3200px bottom;
}
/* consolidate */
p.button.consolidate {
	width: 109px;
	background-position: -3400px bottom;
}
p.button.consolidate a {
	background-position: -3400px top;
}
/* update details */
input.submit.update-details {
	width: 109px;
	background-position: -3600px top;
}
input.submit.update-details:hover {
	background-position: -3600px bottom;
}
/* re-order */
span.button.re-order {
	width: 109px;
	background-position: -3800px bottom;
}
span.button.re-order a {
	background-position: -3800px top;
}
/* send email */
input.submit.send-email {
	width: 109px;
	background-position: -4000px top;
}
input.submit.send-email:hover {
	background-position: -4000px bottom;
}
.field submit, .find-tyres {
	background-position: -2800px bottom;
	width: 109px;
}

span.button.change-fitting-option a {
	width: 150px;
	background-position: -6600px top;
}

span.button.change-fitting-option a:hover {
	background-position: -6600px bottom;
}
span.button.cancel a {
	width: 150px;
	background-position: -6200px top;
}
span.button.cancel a:hover {
	background-position: -6200px bottom;
}
span.button.dont-change-options a {
	width: 150px;
	background-position: -6800px top;
	cursor: pointer;
}
span.button.dont-change-options a:hover {
	background-position: -6800px bottom;
}
/* proceed */
input.submit.proceed
{
	width: 95px;
	background-position: -7000px top;
}
input.submit.proceed:hover
{
	background-position: -7000px bottom;
}
/* proceed */
input.submit.proceed-to-confirmation-page
{
	width: 216px;
	background-position: -7150px top;
}
input.submit.proceed-to-confirmation-page:hover
{
	background-position: -7150px bottom;
}

/*** large buttons ***/
input[type="submit"].submit.large {
	height: 32px;
	background-image: url('https://images.blackcircles.com/images/global/buttons-large.png');
}
/* find my tyres */
input.submit.large.find-my-tyres {
	width: 155px;
	background-position: left top;
}
input.submit.large.find-my-tyres:hover {
	background-position: left bottom;
}
/*** large button v2 ***/
input[type="submit"].submit.large2 {
	height: 31px;
	background-image: url('https://images.blackcircles.com/images/global/button-large-tyredeals.png');
}
/* Show Tyre Deals */
input.submit.large2.show-tyre-deals {
	width: 229px;
	background-position: left top;
}
input.submit.large2.show-tyre-deals:hover {
	background-position: left bottom;
}
/* confirm my details */
input.submit.large.confirm-my-details {
	width: 192px;
	background-position: -200px top;
}

input.submit.large.confirm-my-details:hover {
	background-position: -200px bottom;
}
/* sign up */
input.submit.large.sign-up {
	width: 155px;
	background-position: -400px top;
}
input.submit.large.sign-up:hover {
	background-position: -400px bottom;
}

h4.lookup-address-title {    
    height: 26px;
    margin-bottom: 20px;
    text-indent: -10000px;
    width: 154px;
    background-image: url('https://images.blackcircles.com/images/global/lookupaddress.png');
    background-position: bottom;
}


/* Add New Tyres button */
#dialogUpdatedText a {
    text-decoration: none;
    outline: none;
}

span.newbutton.change-fitting-option {
    background-color: white;
    border: 2px solid #00ab04;
    width: 123px;
    height: 26px;
    color: #00ab04;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-indent: 0;
    font-weight: 700;
    line-height: 26px;
    background-image: url(https://images.blackcircles.com/img_pro/buttons/arrowGrRi_2x.png);
    background-repeat: no-repeat;
    background-position: 93% center;
    background-size: 16px 14px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    padding-left: 23px;
    display: inline-block;
}


/* Keep Current Tyres button */
span.newbutton.dont-change-options {
    background-color: #00ab04;
    width: 180px;
    margin-left: 35px;  /* RLM 45px*/
    background-image: url(https://images.blackcircles.com/img_pro/buttons/arrowWhRi_2x.png);
    background-size: 16px 14px;
    background-position: 93% center;
    background-repeat: no-repeat;
    cursor: pointer;
    color: white;
    text-indent: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    display: inline-block;
}

@media only screen and (max-width:520px) {
    span.newbutton.change-fitting-option {
        margin: 10px auto;
        display: block;
    }

    span.newbutton.dont-change-options {
        margin: 10px auto;
        display: block;
    }
}

/* Normal add to basket overlay */

/* Add More Tyres button */
span.newbutton.add-more-tyres, span.newbutton.change-garage, span.newbutton.add-more-items, 
span.newbutton.choose-your-garage, span.newbutton.choose-tyres {
    background-color: white;
    color: #00ab04;
    text-align: left;
    text-indent: 0;
    height: 26px;
    width: 123px;
    border: 2px solid #00ab04;
    border-radius: 15px;
    line-height: 26px;
    font-size: 12px;
    font-weight: 700;
    background-image: url(https://images.blackcircles.com/img_pro/buttons/arrowGrRi_2x.png);
    background-repeat: no-repeat;
    background-size: 16px 14px;
    background-position: 93% center;
    padding-left: 23px;
    cursor: pointer;
    display: inline-block;
}

/* Continue (to garage) button */
.newbutton.continue-to-garagechoice, .newbutton.continue-to-basket {
    width: 150px;
    background-color: #00ab04;
    height: 30px;
    color: white;
    text-align: center;
    text-indent: 0;
    line-height: 30px;
    font-size: 12px;
    font-weight: 700;
    background-image: url(https://images.blackcircles.com/img_pro/buttons/arrowWhRi_2x.png);
    background-size: 16px 14px;
    background-repeat: no-repeat;
    background-position: 93% center;
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
}


@media only screen and (max-width:480px) {
    span.newbutton.add-more-tyres {
        margin: 0 auto;  /* RLM 5px auto */
        display: block;
    }

    #message-overlay span.or {
        display: block;
    }

    .newbutton.continue-to-garagechoice {
        margin: 5px auto;
        display: block;
    }
}

@charset "UTF-8";

body {margin:0; padding:0; border:0; font-size:100%;}
p {font-family:"Open Sans", Arial, sans-serif; line-height:1em;}
body, h1, h2, h3, h4, h5, h6, p, ul {
    font-family: "Open Sans",Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6 {display:block; margin:0; border:none;}
ul {font-family:"Open Sans", Arial, sans-serif;}
img {border:0px none;}
fieldset {margin:0; padding:0; border:none;}

/* Home page Structure
----------------------------------------------- */

#homeClubcard {width:191px; height:365px; position:absolute; top:0; right:0;}
	#clubcardDing {width:191px; height:85px; margin:0 0 10px; text-align:center;}
	#clubcardlogo {width:191px; height:53px;}


.footer-menu-home .footerNavBlock h3 {
    font-family:"Open Sans", Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    color:#ffffff;
    text-align:left;
    padding:0; 
    margin-top:0;
    margin-bottom: 11px;
}

.footer-menu-home .footerNavBlock ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-home .footerNavBlock li {
    font-family:Arial,sans-serif;    
    font-size:0.625em;
    color:#b0b0b0;
    text-align:left;
    padding:0;
    margin:0;
    line-height:18px;
      list-style: none;
}

.footer-menu-home .footerNavBlock li a {
    color:#b0b0b0;
    text-decoration:none;
}

.footer-menu-home .footerNavBlock li a:hover {
    color:#b0b0b0 !important;
    text-decoration:underline;
}

.message-ex-home,
.newsletter-loading {
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 0.6875em;
    font-weight: bold !important;
    color: red !important;
    text-align: left;
    padding: 0;
    margin-top: 0;
}

select.error-surround ,
input.error-surround,
textarea.error-surround
{
    background-color: #FFFFD5!important;
    border: 2px solid red!important;      
    background-image: none!important;
    background-position:left!important; 
}

.main-footer select.error-surround ,
.main-footer input.error-surround ,
.main-footer textarea.error-surround
{
    background-color: #464d53 !important;
    border: 2px solid red!important;      
    background-image: none!important;
    background-position:left!important; 
}

#message-overlay {
    position: fixed;
    margin: 0 auto;
    height: auto !important;
    text-align: center;
    z-index: 99999;
    overflow: hidden;
    padding: 30px 30px 20px !important;
    background-color: white;
    border: 10px solid #00c904;
    border-radius: 17px;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    left: 0;
    right: 0;
    top: 30%;
    width: 90% !important;
    max-width: 455px;
    box-sizing: border-box;
}

span#message-overlay-message {
    font-weight: 700;
    font-size: 16px;
    display: block;
    color: #3a4a54;
    line-height: 1em;
    margin-top: 10px;
}

span.or {
    font-weight: bold;
    font-size: 0.85em;
}

#message-overlay.message-wide {
    background-size: 516px 212px;
    width: 447px !important;
    padding: 30px 37px 42px 26px;
}
    
.message-wide p {
    color: black;
}
#message-overlay p.message.ok {
    background: none;
    color: #00ab04;
    /*font-size: 50px;*/
    margin-bottom: 15px;
    padding-top: 0;
}
#message-overlay span.or {
	padding: .3em;  /* RLM 0 .3em*/
}
#message-overlay p.close a {
	position: absolute;
	right: 35px;
	top: 20px;
	font-weight: normal;
	text-decoration: none;
	color: #333;
	cursor: pointer;
}
#message-overlay p.message {
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
	padding-top: 60px;
	background: transparent none no-repeat scroll center top;
}
#message-overlay p.message.notok {
	padding-top: 5px;
	font-size: 100%;
}
#message-overlay p.message.message-wide {
    font-size: 100%;
}
#message-overlay p {
    margin-bottom: 1em;
}

.star{    
           background: url('https://images.blackcircles.com/images/general/stars.png') no-repeat;
           background-size: 100% 5100%;        
}

.star-0 {background-position: 0 100.1%;}  
.star-1 {background-position: 0 98.1%;}
.star-2 {background-position: 0 96.1%;}
.star-3 {background-position: 0 94.1%;}
.star-4 {background-position: 0 92.1%;}
.star-5 {background-position: 0 90.1%;}
.star-6 {background-position: 0 88.1%;}
.star-7 {background-position: 0 86.1%;}
.star-8 {background-position: 0 84.1%;}
.star-9 {background-position: 0 82.1%;}
.star-10 {background-position: 0 80.1%;}
.star-11 {background-position: 0 78.1%;}
.star-12 {background-position: 0 76%;}
.star-13 {background-position: 0 74%;}
.star-14 {background-position: 0 72.1%;}
.star-15 {background-position: 0 70%;}
.star-16 {background-position: 0 68%;}
.star-17 {background-position: 0 66.1%;}
.star-18 {background-position: 0 64%;}
.star-19 {background-position: 0 62%;}
.star-20 {background-position: 0 60.1%;}
.star-21 {background-position: 0 58%;}
.star-22 {background-position: 0 56%;}
.star-23 {background-position: 0 54%;}
.star-24 {background-position: 0 52%;}
.star-25 {background-position: 0 50%;}
.star-26 {background-position: 0 48%;}
.star-27 {background-position: 0 46%;}
.star-28 {background-position: 0 44.1%;}
.star-29 {background-position: 0 42%;}
.star-30 {background-position: 0 40%;}
.star-31 {background-position: 0 38%;}
.star-32 {background-position: 0 36%;}
.star-33 {background-position: 0 34%;}
.star-34 {background-position: 0 32%;}
.star-35 {background-position: 0 30%;}
.star-36 {background-position: 0 28%;}
.star-37 {background-position: 0 26%;}
.star-38 {background-position: 0 24%;}
.star-39 {background-position: 0 22%;}
.star-40 {background-position: 0 20%;}
.star-41 {background-position: 0 18%;}
.star-42 {background-position: 0 16%;}
.star-43 {background-position: 0 14%;}
.star-44 {background-position: 0 12%;}
.star-45 {background-position: 0 10%;}
.star-46 {background-position: 0 8%;}
.star-47 {background-position: 0 6%;}
.star-48 {background-position: 0 4%;}
.star-49 {background-position: 0 2%;}
.star-50 {background-position: 0 0;}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front {
    border: none;
    background: none;
}

@media only screen and (max-width:480px) {
    span#message-overlay-message {
        font-size: 0.9em;
    }
    #message-overlay {
        top: 28%;
    }
}

.fancybox-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background-image: url(/templates/cscripts/jQuery/fancybox/2.1.5/fancybox_sprite.png);
}

.fancybox-slide--iframe .fancybox-content {
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.fancybox-caption {
    text-align: center;
}

#tooltip
{
    font-family: Ubuntu, sans-serif;
    font-size: 0.75em;
    text-align: center;
    text-shadow: 0 1px rgba( 0, 0, 0, .5 );
    line-height: 1.5;
    color: #fff;
    background: #333;
    background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0) ), to( rgba( 0, 0, 0, .8 ) ) );
    background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0) );
    background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0 ) );
    background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0 ) );
    background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0 ) );
    background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0 ) );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-top: 1px solid #333;
    -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
    position: absolute;
    z-index: 100;
    padding: 15px 10px;
}

#tooltip:after
{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
    border-top-color: rgba( 0, 0, 0);
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}
#tooltip.top:after
{
    border-top-color: transparent;
    border-bottom: 10px solid #333;
    border-bottom-color: rgba( 0, 0, 0);
    top: -20px;
    bottom: auto;
}
#tooltip.left:after
{
    left: 10px;
    margin: 0;
}
#tooltip.right:after
{
    right: 10px;
    left: auto;
    margin: 0;
}