﻿/* Brand colour 1 */

#footer,
.bookletNameHeader,
#header { background-color: rgb(50,54,57); }

.summaryBox{ border:1px solid rgb(50,54,57); }

/* Brand colour 2 */

.ccBgColor,
.button,
.basket-wrapper .basket-items-count,
.help-message,
.close,
.button:focus,
.button:active,
.progress-bar li.current .progress-step,
#product-tabs li.unvisited .product-tab-btn,
#product-tabs li.visited a { background-color: rgb(0,52,120); }

.progress-bar li.current .progress-step{ border:1px solid rgb(0,52,120); }

#view-as, .view-popout > a {color: rgb(0,52,120) !important; }



/* Brand color 3 - white */
#sidebar h2,
legend,
#dealerDetails,
#sidebar .unstyledList,
#sidebar .links-and-contact #links li a,
#sidebar .links-and-contact #links li a:hover,
.formRow,
#sidebar #contact h2,
#contact,
#directDebitGuarantee,
.button:hover,
body,
#formButtons,
#product-tabs li.current a,
#product-tabs li.current .product-tab-top,
#product-tabs li.unvisited .product-tab-top,
#product-tabs li.visited .product-tab-top,
.error-message   { background-color: #FFF;}

#sidebar #links li a:hover,
#sidebar #links li a.active:hover,
.additional-info,
.help-message,
#footer p,
.ccFontColor,
.button,
#fade-as .close, #fade-ddo .close ,#fade-dd .close,
#ccWrapper *,
.basket-items-count,
li.visited .product-tab-btn p,
.progress-bar li.current .progress-step a,
.progress-bar li.visited .progress-step a,
#logoutButton a ,
#header h1,
.more-options,
.progress-bar .current span,
.progress-bar .current strong,
.progress-bar .visited span,
.progress-bar .visited strong,
.progress-bar .unvisited span,
.progress-bar .unvisited strong,
#product-tabs li.unvisited .product-tab-btn p,
#product-tabs li.visited .product-tab-btn p,
.faq-question:hover a {color:#FFF;}

.help-message {border: 1px solid #fff;}

@media only screen and (max-width:650px)
{
    #faqList,
    #acceptanceSummary,
    #directDebitOriginator,
    #directDebitGuarantee {background-color:#fff;}
}

/* Brand color 4  */

.groupedRequiredField,
.requiredField,
.inline-field-wrapper    { border-left:3px solid rgb(145, 163, 176) !important; }

.progress-bar .visited .progress-step,
.progress-bar li.unvisited .progress-step {border:1px solid rgb(145, 163, 176)}

.progress-bar li.unvisited .progress-step,
.progress-bar .visited .progress-step {background-color:rgb(145, 163, 176);}

#product-tabs li.unvisited,
#product-tabs li.visited {border-bottom: 2px solid rgb(145, 163, 176);}

#product-tabs li.current {border: 2px solid rgb(145, 163, 176);}


/* brand color 5  */

#sidebar #links li a,
select option,
.faq-question a {color:rgb(44, 163, 225);}

.button:hover,
#sidebar #links li a:hover,
#sidebar #links li a.active:hover,
.faq-question:hover,
#product-tabs li.unvisited:hover .product-tab-btn,
#product-tabs li.visited:hover a,
#sidebar .links-and-contact #links li a:hover,
#sidebar .links-and-contact #links li .sub-links a:hover,
#sidebar .links-and-contact #links li a.active:hover  { background-color: rgb(44, 163, 225);}



/* brand colour 6 - black */

#product-tabs li.unvisited .product-tab-btn a {color: #000;}

/* brand colour 7 - borders */
.formRowInlineLeft.second   {border-left: 1px solid #ebebeb;}

#directDebitGuarantee,
.formRow,
#contact ,
#dealerDetails,
#sidebar #links li  {border-bottom: 1px solid #ebebeb;border-left: 1px solid #ebebeb;border-right: 1px solid #ebebeb;}


.formRow.booklet-description,
.booklet-description {border-top:1px solid #ebebeb;}

#faqList h2.faq-question-title {border-bottom:1px solid #ebebeb;}

.progress-bar .unvisited .progress-step {border-top:1px solid #ebebeb; border-bottom: 1px solid #ebebeb;border-right: 1px solid #ebebeb;}

#progress-bar {/* border-right: 1px solid #ebebeb; */}


#sidebar #links .sub-links {background-color: #ebebeb;}

@media only screen and (max-width:650px)
{
  
   #faqList > .formRow {border-bottom: 1px solid #ebebeb; }
}


/* brand color 8 - font color */

#sidebar h2,
legend,
body * {color:rgb(66,89,104);}

/* brand color 9 - error red */


.error-message {border: 2px solid #ee2725;}


/* Logo and elements based on logo size*/

#logo  { position:absolute; left:15px; top: 10px;width: 250px;}
#content, #sidebar {margin-top: 20px;}
#progress-bar {top: 20px;}
.basket-wrapper {top: 45px;}

@media only screen and (max-width:650px)
{  
    #logo {width:190px;}
    #progress-bar {top: 20px;}
    #content {margin-top: 20px;}
    #sidebar {margin-top:0;}
    .basket-wrapper {top: 30px;}
}

@media only screen and (max-width:500px)
{
     .basket-wrapper {top: 45px;}  
}

/* images */

#guaranteeDetails li                { background-image:url("/images/ford-asset-protection/bullet.gif");}
.visited .progressBarNumber         {background: url("/images/ford-asset-protection/tick.png") 0 0 no-repeat; background-size: 35px;}

#sidebar #links li a                {background: url("/images/ford-asset-protection/menu-arrow-blue.gif") 10px center no-repeat;}
#sidebar #links li a:hover         {background: url("/images/ford-asset-protection/menu-arrow-white.gif") 10px center no-repeat;}
#sidebar #links li a.active                {background: url("/images/ford-asset-protection/menu-arrow-down-blue.gif") 10px center no-repeat;}
#sidebar #links li a.active:hover         {background: url("/images/ford-asset-protection/menu-arrow-down-white.gif") 10px center no-repeat;}


@media only screen and (max-width:650px)
{ 
    
    .booklet-description h2 {background: url("/images/ford-asset-protection/menu-arrow.gif") 0 center no-repeat;}
    .faq-question a.active {background: url("/images/ford-asset-protection/menu-arrow-down-blue.gif") 0 center no-repeat; }
    .booklet-description.active h2 {background: url("/images/ford-asset-protection/menu-arrow-down.gif") 0 center no-repeat; }
    
    .faq-question a {background: url("/images/ford-asset-protection/menu-arrow-blue.gif") 0 center no-repeat;}
    .faq-question:hover a.active {background: url("/images/ford-asset-protection/menu-arrow-down-white.gif") 0 center no-repeat;}
    
    .faq-question:hover a {background: url("/images/ford-asset-protection/menu-arrow-white.gif") 0 center no-repeat;}
    
    .checkbox span.option { background-image: url("/images/ford-asset-protection/checkbox.png");}
}

/*
.button
{
    background: url("/images/ford-credit/button-bg.png") no-repeat top left; height:31px;     
    padding: 0 12.5px 0 32px;
    line-height: 32px;
    border-right: 1px solid #2768a8;
    border-radius: 3px;
}
    
.button:hover  
{
    background:url("/images/ford-credit/button-bg.png") no-repeat bottom left; 
    border-right:1px solid #c8c8c8;
    color: rgb(44, 163, 225);
}

*/
body *,
#ccIntro,
#ccExpandable p,
#ccLinks a,
#ccReadLess,
.progressBarText,
.progressBarText .progress-step-action span,
.progressBarText .progress-step-title strong,
#product-tabs li a, #product-tabs li a p {letter-spacing:0; font-size:14px;}

legend, 
#sidebar h2,
.ccInfoCol h2,
.booklet-description h2,
#totalCost, 
.totalCost,
.basketNote,
#directDebitGuarantee h2,
#transactionIdSummary,
#transactionIdSummary strong {font-size:20px;}

#ccLinks a:hover {font-size:16px;}

#product-tabs li a, #product-tabs li a p {font-weight:bold;}

legend , #sidebar > h2,
#faqList h2 {border-bottom:1px solid #ebebeb;}

.basket-wrapper {position: relative;height: 63px;margin-top: 10px; top:0; right:0;}
#basket-button {position:absolute; right:0;}

.button {text-transform: capitalize;}

.button {border-radius: 5px;}

.progressBarNumber span {font-size:1em;}

.current .progressBarText span,
.visited .progressBarText span {font-weight:normal;}

ol {-webkit-padding-start:0px;}
#product-tabs {padding:0px;}
#product-tabs li {margin:0;}

#product-tabs.tabs-count-1 > li,
#product-tabs.tabs-count-2 > li,
#product-tabs.tabs-count-3 > li { width: 33.33%; }
#product-tabs.tabs-count-4 > li { width: 25%; }
#product-tabs.tabs-count-5 > li { width: 20%; }

#product-tabs li.current {border-top-right-radius:5px;border-top-left-radius:5px; border-bottom:none;}

#product-tabs .first-product-tab {border-top-left-radius:5px;}
#product-tabs .last-product-tab {border-top-right-radius:5px;}

#product-tabs li a,
#product-tabs li a p {height:60px; line-height:60px;}

.error-message {position:relative;line-height: 21px; padding-top:5px; padding-bottom:5px;}
.error-message::after {float:right; width:17px; height:17px; content:""; background: url("/images/ford-asset-protection/error.gif");}

@media only screen and (min-width:651px)
{
    #title {width:115px;}
    
    .checkbox input[type="checkbox"] {display:none;}
    .checkbox span {border:2px solid rgb(145, 163, 176); width:20px; height:20px; float:left; margin-right:5px;}
    .checkbox input[type="checkbox"]:checked + span 
    {
        background-color:rgb(44, 163, 225);
        background-image: url("/images/ford-asset-protection/tick.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size:10px;
    }
}

@media only screen and (max-width: 500px)
{
    .basket-wrapper {height: 40px;} 
}

@media only screen and (max-width: 400px)
{
    .basket-wrapper {height: 35px;} 
}


/* Variable Pricing UI fix */

.paymentOptionText {margin: 0px 10px 0 0;}