/* slider root element */
.slider{
    background:none;
    height:9px;
    position:relative;
    cursor:pointer;
    border:none;
    width:380px;
    float:left;
    clear:right;
}
.slider:before, .clearfix:after { content: ""; display: table; }
.slider:after { clear: both; }
.slider { zoom: 1; }
/* progress bar (enabled with progress: true) */
.progress {
    height:9px;
    background-color:#C5FF00;
    display:none;
    opacity:0.6;
}

/* drag handle */
.savings-calculator .controls .handle {
    background:url(../img/calc-handle.png) no-repeat 0 0;
    height:33px;
    width:34px;
    top:-12px;
    position:absolute;
    display:block;
    margin-top:30px;
}

/* lifestyle maintenance overrides */
.lifestyle-maintenance h2{margin-bottom:20px;}
.lifestyle-maintenance > p{margin-bottom:10px;}

/* saving calculator overrides */
.savings-calculator h2{margin-bottom:20px;}
.savings-calculator .calculator .row{margin-bottom:10px; width:100%;}
.savings-calculator .calculator .label{font-size:20px; width:340px; margin-top:0px; margin-top:10px;}
.savings-calculator .calculator p{font-size:14px; line-height:18px; text-transform: none;}
.savings-calculator .calculator .totals .label{line-height:25px; width:600px; font-size:25px; text-transform: none; margin-top:26px;}
.savings-calculator .calculator .totals .value{font-size:50px;}

/* This should eventually apply to the main calculator */
.calculator .handle{background:url(../img/calc-handle.png) no-repeat 0 0; height:33px; width:34px; position:absolute; display:block;}

.calculator .row-group{margin-bottom:40px;}
.calculator .row{margin-bottom:10px;}

/* Define the slider label and value styles */
.calculator .label{font-family: GibsonRegular; font-size:20px; float:left; margin-top: 25px; margin-right:20px; text-transform: uppercase; width:290px;}
.calculator .label strong{font-family: GibsonSemiBold;}
.calculator .value{font-size:45px; float:right; margin-left:20px; font-family: GibsonSemiBold;}
.calculator .value small{font-size:18px;}

.calculator .track-container{width:425px; float:left;}
    .calculator .track-container > .less{background:url('../img/calc-sign-minus-blue.png') no-repeat center center; height:27px; margin-top:28px; margin-right:5px; float:left; width:16px;}
    .calculator .track-container > .more{background:url('../img/calc-sign-plus-blue.png') no-repeat center center; height:27px; margin-top: 27px; margin-left:5px; float:left; width:16px;}

/* define the labels, these sit above the track bar*/
.calculator .labels{font-size:17px; font-weight:bold;}
    .calculator .labels .less{float:left;}
    .calculator .labels .more{float:right;}

/* set up the standard track bar, blue by default */
.calculator .track {float:left; width:380px;}
    .calculator .track .slider{background:url('../img/calc-track-bar-blue.png') no-repeat center center; height:34px;}
    .calculator .track input{display:none;}


/* now set the colour specifics */
.calculator .row.blue{color:#3893CF;}
    .calculator .row.blue .track-container > .less{background-image:url('../img/calc-sign-minus-blue.png');}
    .calculator .row.blue .track-container > .more{background-image:url('../img/calc-sign-plus-blue.png');}
    .calculator .row.blue .track .slider{background-image:url('../img/calc-track-bar-blue.png');}

.calculator .row.purple{color:#6d338f;}
    .calculator .row.purple .track-container > .less{background-image:url('../img/calc-sign-minus-purple.png');}
    .calculator .row.purple .track-container > .more{background-image:url('../img/calc-sign-plus-purple.png');}
    .calculator .row.purple .track .slider{background-image:url('../img/calc-track-bar-purple.png');}

.calculator .row.green{color:#5DAD39;}
    .calculator .row.green .track-container > .less{background-image:url('../img/calc-sign-minus-green.png');}
    .calculator .row.green .track-container > .more{background-image:url('../img/calc-sign-plus-green.png');}
    .calculator .row.green .track .slider{background-image:url('../img/calc-track-bar-green.png');}

.calculator .row.orange{color:#EC6226;}
    .calculator .row.orange .track-container > .less{background-image:url('../img/calc-sign-minus-orange.png');}
    .calculator .row.orange .track-container > .more{background-image:url('../img/calc-sign-plus-orange.png');}
    .calculator .row.orange .track .slider{background-image:url('../img/calc-track-bar-orange.png');}

/* finally style the totals */
.row-group.totals .total{width:28%; float:left; margin-left:8%;  font-size:18px;}
.row-group.totals .total h2{ font-size:34px;}
.row-group.totals .total h3{font-family: GibsonRegular; font-size:18px;}
.row-group.totals .total strong{font-family: GibsonSemiBold;}
.row-group.totals .total:first-child{margin-left:0;}
.row-group.totals .total .value{float:none; font-size:36px; margin-top:10px; margin-left:0px; }