﻿/* --------------------------------------------
   CUSTOM BRANDING STYLES - JustDrive CV  
----------------------------------------------*/

/* LOGO */

.site-title {
    background: url(../images/logo_lrg_transparent.png) no-repeat top center;
    width: 157px;
    height: 80px;
    background-size: contain;
}

/* FOR IE8 */
.no-backgroundsize .site-title { 
    background: url(../images/logo_lrg_transparent_ie8.png) no-repeat top center;
}



/* PAGE BODY */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333333;
    line-height: inherit;
    background-attachment: fixed;
    background-position: top;
}

body.admin {
    background: none;
}

.form-containerSSP {
  box-shadow: 0 0 12px 1px #888;
  -webkit-box-shadow: 0 0 12px 1px #888;
     -moz-box-shadow: 0 0 12px 1px #888;
}

#AddOnsPanelOuter.span6 {
    width: 65% !important;
}


/*  ANCHORS */

a {
  color: #d22028;
  text-decoration: none;
  cursor:pointer;
}

a:hover, 
a:focus {
  color: #d22028;
  text-decoration: underline;
}



/*  HEADINGS */

h1 {
    font-size: 38.5px;
}

h2 {
    font-size: 22px;
    margin: 18px 0 10px 0;
    line-height: 24px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 11.9px;
}

.form-container h1, 
.fieldset_area h1 {
    font-size: 24px;
}



/* HEADER */

.header-rowSSP {
    text-align: center;
    color: #000;
    height: 86px;
}

.header-rowSSP p {
    font-size: 17px;
    margin: 0;
}

#HeaderNarrative {
    float: right;    
    width: 567px;
    height: 81px;
    display: table;
}

.AggLogo #HeaderNarrative {
    text-align: left;
    margin: 10px 0 0 30px;
    padding-left: 20px;
    float: left;
    width: auto;
    height: 71px;
    display: table;
    border-left: 1px solid #ccc;
}

#HeaderNarrative p { 
    line-height: 28px;
}

#AggregatorLogo img {    
    width: auto;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    padding: 6px;
    background: #FFF;
}



/* STYLING FOR EACH AGGREGATOR LOGO */

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/CompareTheMarket.png"] { 
    max-height: 50px;
    padding: 6px 6px 0px 6px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/CompareTheMarket.png"] {
    height: 50px;
    width: 196px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/GoCompare.png"] { 
    max-height: 65px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/GoCompare.png"] {
    height: 65px;
    width: 154px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/MoneySupermarket.png"] { 
    max-height: 38px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/MoneySupermarket.png"] {
    height: 38px;
    width: 252px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Q4Insure.png"] { 
    max-height: 65px;
    margin-left: 8px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Q4Insure.png"] {
    height: 65px;
    width: 77px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/QuoteZone.png"] { 
    max-height: 65px;
    margin-left: 12px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/QuoteZone.png"] {
    height: 65px;
    width: 65px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Tiger.png"] { 
    max-height: 50px;
    padding: 6px 6px 3px 6px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Tiger.png"] {
    height: 50px;
    width: 167px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/TotallyMoney.png"] { 
    max-height: 40px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/TotallyMoney.png"] {
    height: 40px;
    width: 239px;
}

#AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/USwitch.png"] { 
    max-height: 65px;
    margin-left: 18px;
}

/* FOR IE8 */
.no-backgroundsize #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/USwitch.png"] {
    height: 65px;
    width: 56px;
}



/* BUTTONS */

.btn, 
.ui-dialog-buttonset button, 
.CollapsablePanel button, 
.list-table a, 
table a,
.SummaryValue a {
    color: #ffffff; 
    border: 1px solid #AC2023;
    border-color: #AC2023 #780A0C #780A0C;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    box-shadow: 0 6px 6px -6px #000000;
    text-shadow: 1px 1px 2px #780a0c;
    background: #D22028; 
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#d22028), color-stop(100%,#ac2023));
    background: -webkit-linear-gradient(top, #d22028 0%, #AC2023 100%);
    background:    -moz-linear-gradient(top, #d22028 0%, #AC2023 100%);
    background:     -ms-linear-gradient(top, #d22028 0%, #AC2023 100%);
    background:      -o-linear-gradient(top, #d22028 0%, #AC2023 100%);
    background:         linear-gradient(top, #d22028 0%, #ac2023 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22028', endColorstr='#ac2023',GradientType=0 ); /* IE6-9 */
}

.btn:hover, 
.btn:focus, 
.btn:active, 
.btn.active, 
.btn.disabled, 
.btn[disabled],
.ui-dialog-buttonset button:hover, 
.CollapsablePanel button:hover, 
.list-table a:hover, 
.ui-dialog-buttonset button:focus, 
.CollapsablePanel button:focus, 
.list-table a:focus, 
table a:hover {
    color: #ffffff;  
    background: #666666;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#666666), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top, #666666 0%, #000000 100%);
    background:    -moz-linear-gradient(top, #666666 0%, #000000 100%);
    background:     -ms-linear-gradient(top, #666666 0%, #000000 100%);
    background:      -o-linear-gradient(top, #666666 0%, #000000 100%);
    background:         linear-gradient(top, #666666 0%, #000000 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=0 ); /* IE6-9 */  
    background-position:top left;
    border: 1px solid #666666;
    border-color: #666666 #000000 #000000;
    text-shadow: 1px 1px 2px #000000;
    text-decoration:none;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active, 
.btn:active {
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.btn.disabled,
.btn[disabled] {
    color: #333333;
    border: 1px solid #CCC;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
    background-image: none;
    text-shadow:none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.SummaryValue a {
    text-decoration: none;
    color: #FFF;
    box-shadow: none;
    font-size: 12px;
    padding: 2px 8px;
    line-height: normal;
    margin: 5px 0;
    display: inline-block;
}

.btn-secondary, 
.nextbtn .btn.backbtn, 
.CollapsablePanel button.btn-secondary, 
.ui-dialog-buttonset button.btn-secondary, 
.list-table a {
    color:#666;
    border:1px solid #CCC;
    text-shadow: 1px 1px 2px #FFF;    
    background:#DEDEDE;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#DEDEDE), color-stop(100%,#FFFFFF));
    background: -webkit-linear-gradient(bottom,#DEDEDE,#FFFFFF);
    background:    -moz-linear-gradient(bottom,#DEDEDE,#FFFFFF);    
    background:     -ms-linear-gradient(bottom,#DEDEDE,#FFFFFF);
    background:      -o-linear-gradient(bottom,#DEDEDE,#FFFFFF);
    background:         linear-gradient(bottom,#DEDEDE,#FFFFFF);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DEDEDE',GradientType=0 ); /* IE6-9 */
}

.btn-secondary:hover, 
.nextbtn .btn.backbtn:hover, 
.CollapsablePanel button.btn-secondary:hover, 
.ui-dialog-buttonset button.btn-secondary:hover, 
.btn-secondary:active, 
.nextbtn .btn.backbtn:active, 
.CollapsablePanel button.btn-secondary:active, 
.ui-dialog-buttonset button.btn-secondary:active,
.btn-secondary:focus, 
.nextbtn .btn.backbtn:focus, 
.CollapsablePanel button.btn-secondary:focus, 
.ui-dialog-buttonset button.btn-secondary:focus {
    color:#FFF;
    border:1px solid #888;
    text-shadow: 1px 1px 2px #666;
    text-decoration:none;
    background:#DEDEDE;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#666666), color-stop(100%,#CCCCCC));
    background: -webkit-linear-gradient(bottom,#666666,#CCCCCC);
    background:    -moz-linear-gradient(bottom,#666666,#CCCCCC);    
    background:     -ms-linear-gradient(bottom,#666666,#CCCCCC);
    background:      -o-linear-gradient(bottom,#666666,#CCCCCC);
    background:         linear-gradient(bottom,#666666,#CCCCCC);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#CCCCCC',GradientType=0 ); /* IE6-9 */
}



/* PROGRESS / BREADCRUMB */

.breadcrumbSSP > li {    
    text-shadow: 1px 1px 2px #780a0c;
    background: #d22028;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#d22028), color-stop(100%,#ac2023));
    background: -webkit-linear-gradient(left, #d22028 50%, #ac2023 100%);
    background:    -moz-linear-gradient(left, #d22028 50%, #ac2023 100%);
    background:     -ms-linear-gradient(left, #d22028 50%, #ac2023 100%);
    background:      -o-linear-gradient(left, #d22028 50%, #ac2023 100%);    
    background:         linear-gradient(to right, #d22028 50%,#ac2023 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22028', endColorstr='#ac2023',GradientType=1 ); /* IE6-9 */ 
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: inset 1px 1px 4px 0px #ac2023;
       -moz-box-shadow: inset 1px 1px 4px 0px #ac2023;
            box-shadow: inset 1px 1px 4px 0px #ac2023;
}

.breadcrumbSSP > li:before {
    border-top: 8px solid #d22028;
    border-bottom: 8px solid #d22028;
    border-left: 10px solid white;  
}

.breadcrumbSSP > li:after {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 8px solid #ac2023;
}

.breadcrumbSSP > li.active {
    text-shadow: 1px 1px 2px #000000;
    background: #666666;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#666666), color-stop(100%,#000000));
    background: -webkit-linear-gradient(left, #666666 50%, #000000 100%);
    background:    -moz-linear-gradient(left, #666666 50%, #000000 100%);   
    background:      -o-linear-gradient(left, #666666 50%, #000000 100%);
    background:     -ms-linear-gradient(left, #666666 50%, #000000 100%);
    background:         linear-gradient(to right, #666666 50%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
    -webkit-box-shadow: inset 1px 1px 2px 0px #000000;
       -moz-box-shadow: inset 1px 1px 2px 0px #000000;
            box-shadow: inset 1px 1px 4px 0px #000000;
}

.breadcrumbSSP > li.active:before {
    border-top: 8px solid #666666;
    border-bottom: 8px solid #666666;
}

.breadcrumbSSP > li.active:after {
    border-left: 9px solid #000000;
}



/* VALIDATION */

.alert-danger, 
.alert-error,
div.validation-summary-errors, 
.question_details {
    color: #BE403D;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.alert-error h1, 
.alert-error h2, 
.alert-error h3, 
.alert-error h4 {
    color: #BE403D;
}



/* HELP */

.helptext, 
.addons h2 a:after {
    cursor: pointer;
    color: #fff;    
    font-family: georgia;
    font-weight: bold;
    padding: 1px 8px 2px;
    margin-top:1px;
    text-shadow: 1px 1px 2px #780a0c;
    background: #d22028;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#d22028), color-stop(100%,#ac2023));
    background: -webkit-linear-gradient(top, #d22028 0%, #ac2023 100%); 
    background:    -moz-linear-gradient(top, #d22028 0%, #ac2023 100%);     
    background:     -ms-linear-gradient(top, #d22028 0%, #ac2023 100%);
    background:      -o-linear-gradient(top, #d22028 0%, #ac2023 100%);    
    background:         linear-gradient(to bottom, #d22028 0%,#ac2023 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22028', endColorstr='#ac2023',GradientType=0 ); /* IE6-9 */    
    border: 1px solid #ac2023;
    border-color: #ac2023 #780a0c #780a0c;   
    *border: 0;
    *zoom: 1;
    -webkit-border-radius: 16px;
       -moz-border-radius: 16px;
            border-radius: 16px;
    -webkit-box-shadow: 0 6px 6px -6px #000000;
       -moz-box-shadow: 0 6px 6px -6px #000000;
            box-shadow: 0 6px 6px -6px #000000;
}

.helptext:before {
    content: "i";
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}

.helptext:hover {
    color:#FFFFFF;
    text-decoration:none;
    text-shadow: 1px 1px 2px #000000;
    background: #666666;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#666666), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top, #666666 0%, #000000 100%);
    background:    -moz-linear-gradient(top, #666666 0%, #000000 100%);
    background:     -ms-linear-gradient(top, #666666 0%, #000000 100%);
    background:      -o-linear-gradient(top, #666666 0%, #000000 100%);    
    background:         linear-gradient(to bottom, #666666 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    border: 1px solid #666666;
    border-color: #666666 #000000 #000000;
    *border: 0;    
}

.helpbox, 
.CollapsablePanel   {
    background-color: #FBFBFB;  
    border-width: 1px;
    border-style: solid;    
    border-color: #E5E5E5 #DADADA #BBBBBB;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    font-size: 12px;
}

.helpbox p.watermark:before {
    content: "i";
    font-family: georgia;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    color: #fff;    
    background: #ececec;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#ececec), color-stop(100%,#cacaca));
    background: -webkit-linear-gradient(top, #ececec 0%, #cacaca 100%);
    background:    -moz-linear-gradient(top, #ececec 0%, #cacaca 100%);
    background:     -ms-linear-gradient(top, #ececec 0%, #cacaca 100%);
    background:      -o-linear-gradient(top, #ececec 0%, #cacaca 100%);    
    background:         linear-gradient(to bottom, #ececec 0%, #cacaca 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#cacaca',GradientType=0 ); /* IE6-9 */
    border: 1px solid #cccccc;
    border-color: #dddddd #cccccc #bbbbbb #dddddd;
    *border: 0;    
    *zoom: 1;
    text-shadow: 0 1px 6px #888888;   
    -webkit-border-radius: 16px;
       -moz-border-radius: 16px;
            border-radius: 16px;
}



/* FORMS */

fieldset ul.fieldset_area li:before {
    content: "";
    border-top: 1px solid #E5E5E5;
    margin-bottom: 12px;
}



/* TABLES */

table, 
.list-table {
    border:1px solid #E5E5E5; 
}

table tr, 
.list-table tr {
    text-align:left; 
    border-bottom:1px solid #E5E5E5;
}

table th,
.list-table th {
    background:#F5F5F5;
    border-bottom:1px solid #E5E5E5;
}

table td, 
.list-table td {
    border-right:1px solid #E5E5E5;
}

table a {
    box-shadow:none;
}

table a:hover { 
    text-decoration:none; 
    color:#FFF;
}

table a, 
.list-table a {
    font-size:12px; 
 }

#payment_table tr.active td {
    background:#F0FFE1;
}



/* ERROR PAGE DIALOGS */

.ApplicationErrorContainer, 
.ThankYou {  
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #FFF;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background:#FFF;
    background: -webkit-linear-gradient(#FFFFFF, #F5F5F5);
    background:    -moz-linear-gradient(#FFFFFF, #F5F5F5);    
    background:     -ms-linear-gradient(#FFFFFF, #F5F5F5);
    background:      -o-linear-gradient(#FFFFFF, #F5F5F5);
    background:         linear-gradient(#FFFFFF, #F5F5F5);
    box-shadow: 0px 5px 13px rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.2);
}

.no-boxshadow .ApplicationErrorContainer, 
.no-boxshadow .ThankYou {
    border:1px solid #AAA;
}

.ApplicationErrorContainer strong {
    color:#BE403D;
}



/* Confirmation Page */

.ThankYou h1 {
    font-size: 38px;
    font-weight: normal;
}

.tick {
    background: #F5FFEB url(../../shared/images/tick-circle.png) no-repeat 5px center;
    border-top: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
}

.tick .highlight {
    color: #008C00;
}

.highlight {
    color: #D22028;
    font-weight: bold;
}

.email {
    background: url(../../shared/images/email-circle.png) no-repeat left center;
}

.tel {
    background: url(../../shared/images/tel-circle.png) no-repeat left center;
}

.ThankYou .email label, .ThankYou .tel label {
    width: auto !important;
    margin-right: 1px;
}



/* COLLAPSE PANELS */

.CollapsablePanel {
    font-size:14px;
    background:#FFF;
}

.CollapsablePanel h1, 
.ui-dialog h1 {
    font-size:18px;
}

.CollapsablePanel h3 {
    font-size:14px;
}

.CollapsablePanel h4 {
    font-size:13px;
}

.collapsible, 
.col, 
.addon .addonInner {
    background-color: #FFFFFF;
    border:1px solid;
    border-color: #E5E5E5 #DADADA #BBBBBB;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.collapseTitle {
    font-size: 14px;
    font-weight:bold;
}



/* UI DIALOGS*/

.ui-widget, 
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family:Arial, helvetica, sans-serif;    
}

.ui-widget-header {
    background:#FFF;
    background: -webkit-linear-gradient(top,#FFFFFF,#F5F5F5);
    background:    -moz-linear-gradient(top,#FFFFFF,#F5F5F5);    
    background:     -ms-linear-gradient(top,#FFFFFF,#F5F5F5);
    background:      -o-linear-gradient(top,#FFFFFF,#F5F5F5);
    background:         linear-gradient(top,#FFFFFF,#F5F5F5);
}

.ui-dialog-titlebar.ui-widget-header {
    border:none; 
    border-bottom:1px solid #AAA; 
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    box-shadow: 1px 1px 3px #CCCCCC;
}

.ui-dialog-buttonpane.ui-widget-content {
    background:#F5F5F5;
    -webkit-border-radius: 0 0 4px 4px;
       -moz-border-radius: 0 0 4px 4px;
            border-radius: 0 0 4px 4px;
}

.site_dialog label { cursor:auto; }

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    color:#212121;
    border-right-color:#DADADA;
    border-left-color:#DADADA;
    border-top-color:#E5E5E5;
    border-bottom-color:#BBB;
}

.ui-accordion .ui-accordion-content {
    border-right-color:#DADADA;
    border-left-color:#DADADA;
    border-bottom-color:#BBBBBB;
    border-top-color: #E5E5E5;
}

.ui-accordion-header {
    background:#FAFAFA; 
    background:#FFF; 
    font-weight:bold;
    font-size: 110%;
}

.ui-accordion .ui-accordion-header.ui-state-active {
    border-bottom:1px solid transparent;
}


/* QUOTE PANELS */

.PaymentPanelOuter.selected, 
.addon.selected {
    border:3px solid #50A73C; 
    box-shadow: #999 1px 1px 8px;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background: -webkit-linear-gradient(bottom,#EEEEEE,#FFFFFF);
    background: -moz-linear-gradient(bottom,#EEEEEE,#FFFFFF);
    background: linear-gradient(bottom,#EEEEEE,#FFFFFF);    
    background-position: left top;
    background-repeat: repeat-x;
}

.PaymentPanelOuter.selected:before, 
 {
    border: 1px solid #50A73C;
    width: 28px;
    height: 28px;
    position: absolute;
    top: 10px;
    left: 10px;
    content: "";
    -webkit-border-radius: 16px;
       -moz-border-radius: 16px;
            border-radius: 16px;
    background: #f0ffe1;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#f0ffe1), color-stop(100%,#dff8c5));
    background: -webkit-linear-gradient(top, #f0ffe1 0%, #dff8c5 100%); 
    background:    -moz-linear-gradient(top, #f0ffe1 0%, #dff8c5 100%);     
    background:     -ms-linear-gradient(top, #f0ffe1 0%, #dff8c5 100%);
    background:      -o-linear-gradient(top, #f0ffe1 0%, #dff8c5 100%);    
    background:         linear-gradient(to bottom, #f0ffe1 0%,#dff8c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0ffe1', endColorstr='#dff8c5',GradientType=0 ); /* IE6-9 */
}

.PaymentPanelOuter.selected:after {
    position: absolute;
    content: "";
    background: transparent;
	width: 16px;
    height: 9px;
    top: 18px;
    left: 16px;
    border: 4px solid #50A73C;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	        -o-transform: rotate(-45deg);
	            -ms-transform: rotate(-45deg);
	                transform: rotate(-45deg);    
}

/* FOR IE8 */
.no-backgroundsize .PaymentPanelOuter.selected {
     background: #EEE url(../../shared/images/tick-circle.png) no-repeat 12px 12px;
     filter: none !important;
}

/* FOR IE8 */
.no-backgroundsize .PaymentPanelOuter {
     background-color: #EEE;
     filter: none !important;
}

/* FOR IE8 */
.no-backgroundsize .PaymentPanelOuter .PaymentPanelInner {
     filter: none !important;
     background: none;
}

/* FOR IE8 */
.no-backgroundsize .PaymentPanelOuter.selected:before {
    left: -9999px;
}

/* FOR IE8 */
.no-backgroundsize .PaymentPanelOuter.selected:after {
    left: -9999px;
}

.PaymentPanelOuter .PaymentPanelInner {
    border:1px solid #CCC;     
    background: #EEEEEE;
    background: -webkit-linear-gradient(bottom,#EEEEEE,#FFFFFF);
    background:    -moz-linear-gradient(bottom,#EEEEEE,#FFFFFF);    
    background:     -ms-linear-gradient(bottom,#EEEEEE,#FFFFFF);
    background:      -o-linear-gradient(bottom,#EEEEEE,#FFFFFF);
    background:         linear-gradient(bottom,#EEEEEE,#FFFFFF);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EEEEEE',GradientType=0 ); /* IE6-9 */
} 

.PaymentHeader {
    font-size:16px;
}

.PaymentPremium {
    font-size:28px;
}



/* Summary of cover */
.SummaryOfCover, 
#CoverSummary { 
    border:1px solid #E5E5E5;
}

.ValuePair {
    background:#F5F5F5;
    border-bottom:1px solid #E5E5E5;
}

.SummaryLabel {
    font-weight:bold;
}

.SummaryValue {
    background:#FFF;
    border-left:1px solid #E5E5E5;
}

/* FOR IE8 */
.no-backgroundsize #CoverSummaryRightPanelOuter {
    display: none;
}


#RecalculatePanel {
    background: #FFF;
    border: 3px solid #d22028;
    border-radius: 4px;
}


#excess-table th, #excess-table td {
    border-bottom:1px solid #DDD; 
}

#excess-table th {
    background:#FAFAFA;
}

#excess-table td {
    border-left:1px solid #DDD;
}



/* Excess slider */
.ui-slider-handle.ui-state-default {    
    border:1px solid;
    border-color:#AAA;
    cursor:ew-resize;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    border-radius:100%;    
    background: -webkit-linear-gradient(bottom,#FFFFFF,#CCCCCC);
    background:    -moz-linear-gradient(bottom,#FFFFFF,#CCCCCC);    
    background:     -ms-linear-gradient(bottom,#FFFFFF,#CCCCCC);
    background:      -o-linear-gradient(bottom,#FFFFFF,#CCCCCC);
    background:         linear-gradient(bottom,#FFFFFF,#CCCCCC);
    box-shadow: 0 0.1em 0.1em 0.1em rgba(255, 255, 255, 0.8) inset, 0 0 0.5em rgba(0, 0, 0, 0.3);
}

.ui-slider-range {
    background: #d22028;
    background: -webkit-gradient(linear, top, bottom, color-stop(0%,#D22028), color-stop(100%,#AC2023));
    background: -webkit-linear-gradient(top, #D22028 0%, #AC2023 100%);
    background:    -moz-linear-gradient(top, #D22028 0%, #AC2023 100%);     
    background:     -ms-linear-gradient(top, #D22028 0%, #AC2023 100%); 
    background:      -o-linear-gradient(top, #D22028 0%, #AC2023 100%);
    background:         linear-gradient(top, #D22028 0%, #AC2023 100%);
    border-radius:1px;
}

.rgba .ui-dialog {
    box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
}

.rgba .ui-widget-overlay { 
    background:rgba(0,0,0,0.5)
}


.addon { 
    border:3px solid #FFF;
    border-radius:3px;
    text-align:center; 
    font-size:13px; 
}

.addon.selected {
    border:3px solid #50A73C; 
}

.addon.free {
    border:3px solid #50A73C; 
}

.addon.selected .addonInner {
    border-color:transparent;
}

.addon .addonInner {
    border:1px solid;
    border-color: #E5E5E5 #DADADA #BBBBBB;
   
}

.addon .top {
    height: 145px;
}

.addon .middle {	 	
    height: auto !important;    
	margin-top: 40px;
}

.addon .bottom {
    height: 26px;
}

.addon h2 {
    font-size:20px; 
    text-decoration:none;
    font-weight:normal; 
}

.addon.selected h2 a{
    color:#50A73C;
}

.addon.free h2 a {
    color:#50A73C; 
}

.addons h2 a:after {
    font-size:14px; 
    font-style:italic;
}

.AddOnPremiumContainer {
    font-size:12px; 
    background:#FFF;
    border: 1px solid #CCC;
    border-radius:7px;
}

.AddOnPremiumContainer span {
    font-size:28px; 
    font-weight:normal;
}

.AddOnPolicyBookletTop {
    display: none;
}

/* FOR IE8 */
.no-backgroundsize .AddOnSubProduct input {
        margin: -2px -2px 0 6px;
}

label[for^=AddOnPanelSelected] p {
    display: none;
}

.selected .AddOnSelectionPanel input[type=checkbox] {
	margin: 2px 4px;
}

#TermsAndConditions .checkStyle {
   -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
            box-sizing: content-box;
}

#AddOnSelectionPanel.checkStyle, #AddOnNotRequiredPanel.checkStyle {
   -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
            box-sizing: inherit;
}


#AddOnSelectionPanel.checkStyle label, 
#AddOnSelectionPanel.checkStyle:link label {
    width: 0px !important;
    height: 0px;
	border: none;
    text-indent: 0px;
    margin: 5px 17% 0;
}

#AddOnSelectionPanel.checkStyle {
	margin: auto;
}

/* FOR IE8 */
.no-backgroundsize input.SlidingSwitch[type="checkbox"] + div {
    display: none !important;
}

/* FOR IE8 */
.no-backgroundsize #AddOnSelectionPanel.checkStyle label, 
.no-backgroundsize #AddOnSelectionPanel.checkStyle:link label {
    width: inherit;
    height: inherit;
	border: inherit;
    text-indent: inherit;
    margin: inherit;
    position: relative;
}

/* FOR IE8 */
.no-backgroundsize .RoundedCheckbox input, 
.no-backgroundsize input.SlidingSwitch[type="checkbox"] {
    display: block;
}

/* FOR IE8 */
.no-backgroundsize .AddOnSelectionPanel, 
.no-backgroundsize .AddOnNotRequiredPanel {
    left: 35px;
}

/* FOR IE8 */
.no-backgroundsize .AddOnSelectionPanel, 
.no-backgroundsize .AddOnNotRequiredPanel,
.no-backgroundsize .AddOnSelectionPanel:after, 
.no-backgroundsize .AddOnNotRequiredPanel:after {
    width: auto;
    height: auto;
    display: block;
    position: relative;
    float: left;
}

/* FOR IE8 */
.no-backgroundsize .AddOnSelectionPanel:after, 
.no-backgroundsize .AddOnNotRequiredPanel:after {
    content: "Yes please";
    font-weight: bold;
    top: -25px;
    left: 25px;
}

input.SlidingSwitch[type="checkbox"]:checked + div {
    margin-left: 10px;
}

#AddOnSelectionPanel.checkStyle label:after {
    display: none;
}

/* FOR IE8 */
.no-backgroundsize #TermsAndConditionsPanelOuter {
    display: none;
}


/* ADMIN UTILITY */
body.login {
    background-color: #fff;
}

body.admin #user-info {
    background-color: #333333;
    color: #fff;
}

body.admin .breadcrumb > li, 
body.admin .breadcrumb > li:after, 
body.admin table a.btn-link, 
body.admin table a.btn-link:hover, 
body.admin #header-bar .btn, 
.breadcrumb > li:before {
    background: none;
    border: none !important;
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

body.admin table a:hover {
    color: #333333
}

body.admin .btn-default {
    color: #fff;
    text-shadow: none;
}

body.admin .btn i {
    color: #fff;
}

.errorContainer {
    color: #fff;
}

#folderContainer table a {
    color: #d22028;
}


#TermsAndConditionsPanelOuter,
#TermsAndConditions .checkStyle,
#TermsAndConditions,
#NCDProtectionPanel1.span6	{
		width: 100%;
}


@media all and (min-device-width: 1024px) { 
    .AddOnSubProduct input {
        margin: -2px -2px 0 4px; 
        position: relative;
        width: 20px !important;
        height: 18px;
    }
}


@media (min-width: 1200px) {
    #HeaderNarrative {
        width: 727px;
    }

    #AddOnSelectionPanel.checkStyle label, 
    #AddOnSelectionPanel.checkStyle:link label {
        margin: 0 25%;
    }
}


@media (max-width: 1199px) {	
	.addon .middle {
		margin-top: 75px;
	}
	
	.qtip {  
		margin-left: -50px;
	}
}


@media (max-width: 979px) {	
	#AddOnSelectionPanel.checkStyle {		
		margin-right: 105px;
	}
}


@media (min-width: 800px) and (max-width: 979px) {
    #HeaderNarrative p span {
        display: none;
    }
}


@media (max-width: 979px) and (min-width: 768px) {
    #HeaderNarrative {
        width: 70%;
    }

    .addon .top {
        height: auto;
    }

    .addon .middle {
        height: auto;
    }

    .addon .bottom {
        height: auto;
    }
}


@media (max-width: 800px) {
    #HeaderNarrative p span { 
        display:none;
    }

    .addon .top {
        height: auto;
    }

    .addon .middle {
        height: auto;
    }

    .addon .bottom {
        height: auto;
    }	
}


@media (max-width: 767px) {
    .NoAggLogo #HeaderNarrative { 
        padding-left: 10px !important; 
        width:auto;
    }  

    .AggLogo #HeaderNarrative { 
        width:auto; 
    }
	
	#BuyNowPanelOuter {
		width: initial;
	}

    /* STYLING FOR EACH AGGREGATOR LOGO */

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/CompareTheMarket.png"]  { 
        max-height: 42px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/GoCompare.png"]  { 
        max-height: 58px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/MoneySupermarket.png"]  { 
        max-height: 36px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Q4Insure.png"]  { 
        max-height: 62px;
        margin-left: 10px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/QuoteZone.png"]  { 
        max-height: 64px;
        margin-left: 12px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Tiger.png"]  { 
        max-height: 46px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/TotallyMoney.png"]  { 
        max-height: 36px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/USwitch.png"]  { 
        max-height: 64px;
        margin-left: 17px;
    }
		
	.qtip {  
		margin-left: -26px;		
	}	
}


@media (max-width: 735px) {
    #AggregatorLogo {
        margin-top: 9px;
    }
    
    .header-rowSSP .span2:last-child {
        float:none; 
        width:auto;
    }


    .AggLogo #HeaderNarrative {
        margin: 12px 0 0 15px;
        padding-left: 8px;
    }
    
    #HeaderNarrative { 
        width:60%; 
    }

    .AggLogo #HeaderNarrative p {
        font-size: 15px;
        line-height: 20px;
    }


    /* STYLING FOR EACH AGGREGATOR LOGO */
    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/CompareTheMarket.png"]  { 
        max-height: 38px;
        margin: 0 auto;
        padding: 4px 4px 0 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/GoCompare.png"]  { 
        max-height: 54px;
        margin: 0 auto;
        padding: 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/MoneySupermarket.png"]  { 
        max-height: 29px;
        margin: 0 auto;
        padding: 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Q4Insure.png"]  { 
        max-height: 60px;
        margin: 0 auto;
        padding: 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/QuoteZone.png"]  { 
        max-height: 60px;
        margin: 0 auto;
        padding: 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Tiger.png"]  { 
        max-height: 40px;
        margin: 0 auto;
        padding: 4px 4px 1px 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/TotallyMoney.png"]  { 
        max-height: 30px;
        margin: 0 auto;
        padding: 4px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/USwitch.png"]  { 
        max-height: 60px;
        margin: 0 auto;
        padding: 4px;
    }
    
    #payment_table th {
        border-right:1px solid #E5E5E5;
    }
    
    #payment_table td {
        border-bottom:1px solid #E5E5E5; 
    }

    #AddOnSelectionPanel.checkStyle label, 
    #AddOnSelectionPanel.checkStyle:link label {
        margin: 6px 0 0 0;
    }
	
	
	.qtip {  
		margin-left: 0px;
	}
	
	#TermsAndConditions .checkStyle {
		margin-bottom: 20px;
	}	
}



@media (max-width: 640px) {
    .header-rowSSP {
        height: auto;
    }
    
    .site-title{
        height:75px;
        width:160px;
        -webkit-background-size:contain;
        -moz-background-size:contain;
        -o-background-size:contain;
        background-size:contain;
    }
    
    #HeaderNarrative { 
        width:60%; 
    }
    
    #HeaderNarrative p { 
        font-size:15px;
    }
    
    #HeaderNarrative strong { 
        display:block;
    }

    .AggLogo #HeaderNarrative {
        margin: 6px 40px 0 0;
        padding-left: 0;
        text-align: center;
        float: right;
        width: auto;
        height: 71px;
        display: table;
        border:none;
    }

    .AggLogo #HeaderNarrative p {
        font-size: 15px;
        line-height: 20px;
    }

    #AggregatorLogo { 
        width: 100%; 
        height: auto; 
        margin:2px auto 0;
        float:none;
    }

    #AggregatorLogo img { 
        margin: 0 auto;
    }

    #AddOnSelectionPanel.checkStyle label, 
    #AddOnSelectionPanel.checkStyle:link label {
        margin: 5px 20% 0;
    }

    .addon .top {
        height: 145px;
    }

    .addon .middle {
        height: 118px;
    }

    .addon .bottom {
        height: 26px;
    }
}

   
@media (max-width: 597px) {
	.addon .middle {
        margin-top: 87px;
    }
}
   
   
@media (max-width: 540px) {
    .AggLogo #HeaderNarrative {
        margin: 6px 20px 0 0;
    }

    .header-rowSSP p.site-title {
        margin-left: 20px;
        height: 75px;
    }

    #AggregatorLogo img {
        padding: 4px;
    }
    
    .SummaryValue{
        border-left:none;
    }
	
	.addon .addonInner {
		height: 255px;
	}
}

   
@media (max-width: 520px) {

    .header-rowSSP p.site-title {
        margin-left: 0 !important;
    }

    .AggLogo #HeaderNarrative { 
        margin: 6px 0 0 0; 
    }

    .site-title {
        height:73px;
    }

    .addon .top {
        height: auto;
    }

    .addon .middle {
        height: auto;
    }

    .addon .bottom {
        height: auto;
		margin-left: 0px;		
    }
}


@media (max-width: 480px) {
	.addon .addonInner {
		height: auto;
	}
}


@media (max-width: 460px) {
    .header-rowSSP p.site-title, 
    .header-rowSSP.AggLogo p.site-title {
        margin: 0 auto !important;
    }

    #HeaderLogo { 
        float: none; 
    }
    
    .NoAggLogo #HeaderNarrative, 
    .AggLogo #HeaderNarrative { 
        width:100%; 
        margin-top:10px; 
        height:auto;
    }
     
    .AggLogo #HeaderNarrative { 
        margin-bottom: 8px;
    }

    .NoAggLogo #HeaderNarrative p { 
        line-height: 20px; 
        font-size: 14px; 
    }

    #AggregatorLogo { 
        margin-top:6px;
    }    

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/CompareTheMarket.png"]  { 
        max-height: 32px;
        padding: 3px 3px 0 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/GoCompare.png"]  { 
        max-height: 48px;
        padding: 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/MoneySupermarket.png"]  { 
        max-height: 26px;
        padding: 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Q4Insure.png"]  { 
        max-height: 46px;
        padding: 3px 1px 3px 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/QuoteZone.png"]  { 
        max-height: 55px;
        padding: 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/Tiger.png"]  { 
        max-height: 34px;
        padding: 3px 3px 1px 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/TotallyMoney.png"]  { 
        max-height: 24px;
        padding: 3px;
    }

    #AggregatorLogo img[src="/SSPAdmin.STE/Content/Shared/Images/AggregatorLogos/USwitch.png"]  { 
        max-height: 55px;
        padding: 3px;
    }

    #AddOnSelectionPanel.checkStyle label, #AddOnSelectionPanel.checkStyle:link label {
        margin: 5px 31% 0;
    }
}

@media (max-width: 440px) {
	.addon .middle {
		margin-top: 10px;
	}
	.addon .addonInner {
		height: 365px;
	}
	
	#AddOnSelectionPanel.checkStyle {
		margin: auto;
	}
}


@media (max-width: 400px) {

    #AddOnSelectionPanel.checkStyle label, 
    #AddOnSelectionPanel.checkStyle:link label {
        margin: 5px 28% 0;
    }

    .SummaryValue a {
        font-size: 14px;
        padding: 4px 14px;
    }
}


@media (max-width: 347px) {

    #AddOnSelectionPanel.checkStyle label, 
    #AddOnSelectionPanel.checkStyle:link label {
        margin: 5px 27% 0;
    }
}

@media (max-width: 315px) {
	#AddOnSelectionPanel.checkStyle {
		margin-right: 75px;
	}
}

@media (max-width: 293px) {
	.addon .addonInner {
		height: 400px;
	}
	
	#AddOnSelectionPanel.checkStyle {
		margin-right: 110px;
	}
}


.PaymentContainer .affix {
    top: 0;
    margin: 0;
    z-index: 1000;
    width: 825px;
}

.PaymentContainer .affix .PaymentPanelOuter.span3 {
	width: initial;
}

.PaymentContainer .affix .PaymentPanelOuter .PaymentPanelInner {
	min-height: inherit;
    padding: 0;
    text-align: center;
}

.PaymentContainer .affix .PaymentPanelInner > div {
	display: inline-block;
    vertical-align: middle;
    margin: 5px;
    float: none!important;
}

.PaymentContainer .affix .MonthlyPaymentSummary {
	border: none;
    width: initial;
    font-size: 0.8em;
}

.PaymentContainer .affix #AnnualPaymentPanelOuter {
	width: 38%;
}

.PaymentContainer .affix #MonthlyPaymentPanelOuter {
	width: 60%;
}

@media (min-width: 1200px) {
    .PaymentContainer .affix {
        width: 1045px;
    }
}

@media (max-width: 979px) and (min-width: 768px) {
    .PaymentContainer .affix {
        width: 630px;
    }

    .PaymentContainer .affix #AnnualPaymentPanelOuter {
        width: 100%;
    }

    .PaymentContainer .affix #MonthlyPaymentPanelOuter {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .PaymentContainer .affix {
        width: 80%;
    }

    .PaymentContainer .affix #AnnualPaymentPanelOuter {
        width: 97%;
    }

    .PaymentContainer .affix #MonthlyPaymentPanelOuter {
        width: 97%;
    }
}

.AddOnPanelSummary {
    min-height: 18px;
}


.AddOnSubProduct {
	width:100px;
}


.AddOnSubProduct input[type="radio"] {
	margin-bottom: 5px;
}

#AddOnIPIDDocument {
	margin-top: 10px;
}

.AddOnPanelPremium {
	height: auto;
}

.AddOnPolicyBookletMiddle {
	margin: 10px 10px 0 0 !important;
}

.addon .bottom {
	margin-top: 15px;
}

.checkStyle label, 
.checkStyle:link label {
	z-index: 999;
}

.AddOnSubProduct {
text-align:left !important;
margin-left:10px;
width: auto;
}


.addon {
	width: 110%;
}


#AddOnNotRequiredPanel {
	display: none;
}