/*=======================================================================================================
LAST EDITED BY:		Amber Martin-van Velzen 2 October 2014
                    Ruth Payne 26 September 2012

LEGACY COMMENTS:	02/10/14 Removing legacy CSS
                    26/09/12 Modular checkout

BROWSER SUPPORT:	Updated 9 Sept
                    Primary:			        Secondary:
					IE 7				        IE 6
                    IE 8                        IE9
                    FF 5                        Chrome 12
MIN SCREEN RES:		1024 x 768
==================================================================================*/

/*-- Font face --*/
@font-face {
    font-family: 'ProximaNova';
    src: url('themes/redesign-v2/fonts/proximanova-bold-webfont.eot');
    src: url('themes/redesign-v2/fonts/proximanova-bold-webfont.eot?iefix') format('eot'), url('themes/redesign-v2/fonts/proximanova-bold-webfont.woff') format('woff'), url('themes/redesign-v2/fonts/proximanova-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('themes/redesign-v2/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
    font-family: 'Myriad Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold'), url('themes/redesign-v2/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

/*===========
--- RESET ---
===========*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

/* remember to define focus styles! */
:focus {outline:0;}

ol, ul {list-style:none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}

caption, th, td {text-align:left; font-weight:normal;}

h1, h2, h3, h4, h5, h6 {font-weight:normal;}


/*=====================================
---------- GLOBAL ELEMENTS ------------
=====================================*/

/* font-size 62.5% sets base font to approx 10px - not sure about setting line-height to 1 as it can cause issues in IE6 */
body {
    line-height: 1;
    font-size: 62.5%;
}

strong	{ font-weight:bold }
sup		{ vertical-align:super }

em		            { font-style:italic }
    .required em,
    em.required     { color:#cc3300 !important }

/*===============================
------- COMMON ELEMENTS ---------
===============================*/

/* add this div to clear large sections */
.clearer {
    clear: both;
    font-size: 0.1em;
    height: 0.1em;
}

.hide {
    display: none;
    float: left;
}

.floatLeft { float:left }
.floatRight { float:right }

/*===========================
---------- FORMS ------------
===========================*/

/* UNIVERSAL INPUT TEXT BOX SIZES*/
input.xxxshort, textarea.xxxshort, select.xxxshort  { width: 20px }
input.xxshort, textarea.xxshort, select.xxshort,
.xxshort input                                      { width: 35px; margin-right:5px }
input.xshort, textarea.xshort, select.xshort 	    { width: 60px }
input.short, textarea.short, select.short	 	    { width: 120px }
input.medium, textarea.medium, select.medium	    { width: 250px }
input.long, textarea.long, select.long			    { width: 345px }
input.xlong, textarea.xlong, select.xlong		    { width: 470px }
input.xxlong, textarea.xxlong, select.xxlong	    { width: 500px }
input.xxxlong, textarea.xxxlong, select.xxxlong,
.xxxlong textarea, .xxxlong input                    { width: 600px }

select, input, textarea,
input.xxxshort, textarea.xxxshort,
input.xxshort, textarea.xxshort, 
input.xshort, textarea.xshort, 
input.short, textarea.short, 
input.medium, textarea.medium, 
input.long, textarea.long, 
input.xlong, textarea.xlong, 
input.xxlong, textarea.xxlong,
input.xxxlong, textarea.xxxlong, 
input.monetary, input.rate { border: 1px solid #ccc }



input[type='radio'],
input[type='checkbox'] {
    border: none
}

/* RADIO BUTTONS */
input.radio {
    border: none;
    float: left;
}

label.radio {
    line-height: 1.5;
    clear: none;
    padding-top: 0;
    font-weight: normal;
}

.radioFields {
    float: left;
    display: inline;
}

    .radioFields .description {
        margin: 0 0 0 22px
    }

                       
/* QUESTION */
.question label {
    float: left
}

/*==================================
------ AUTOCOMPLETE STYLING --------
==================================*/

/* linked to jquery.autocomplete-min.js */
.autocomplete-w1 {
    background: url(themes/img/shadow.png) no-repeat bottom right;
    position: absolute;
    top: 0;
    left: 0;
    margin: 8px 0 0 6px; /* IE6 fix: */
    _background: none;
    _margin: 0;
}

.autocomplete {
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    text-align: left;
    max-height: 350px;
    overflow: auto;
    margin: -6px 6px 6px -6px; /* IE6 specific: */
    _height: 350px;
    _margin: 0;
    _overflow-x: hidden;
}

    .autocomplete .selected {
        background: #F0F0F0
    }

    .autocomplete div {
        padding: 2px 5px;
        white-space: nowrap;
    }

    .autocomplete strong {
        font-weight: normal;
        color: #3399FF;
    }


/*==================================
---------- MAIN CONTENT ------------
==================================*/

.sectionContent {
    float: left;
    line-height: 1.6;
}

/*=====================
------- PRINT ---------
=====================*/

.print { display:none }

/*===================================
---------- ACCESSIBILITY ------------
===================================*/

.accessibility{
    text-indent:-9999em; 
    overflow:hidden; 
    position:absolute;
}

#navAccessibilityLinks { 
    text-indent:-9999em; 
    position:absolute;
}

/*==================================
---------- My Photo Card ------------
==================================*/
.blueBG {background-color:#004165} /*for extended footer colour*/
.myPhotoCard .introSection {margin-bottom:20px}
.myPhotoCard fieldset {margin-right:0}
.largeCardDisplay {width:320px; float:left}
.largeCardDisplay img {width:100%}
.optionsSection {float:left; padding:0 30px; box-sizing:border-box; line-height:1.6; margin-left:320px}
.optionsSectionWrap {float:left; width:100%; margin-left:-320px}

 .homeLoanModule .calculatedResults.left .optionsSection p {
    text-align:left}

 /*confirmation screen*/
 .calculatedResults .largeCardDisplay {width:40%; float:left}
 .calculatedResults .optionsSection {padding:0 20px; margin:0}
 .calculatedResults .optionsSectionWrap {margin-left:0; width:60%}

.progressBar {width:100%;
    border-bottom: 5px solid #e0e5e6;
    font-family: "Myriad Pro Regular",Arial,sans-serif;
    background: #ededed;
    background: -moz-linear-gradient(top,#fcfcfc 0%,#ededed 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fcfcfc),color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,#fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(top,#fcfcfc 0%,#ededed 100%);
}

.progressBar ul {width:940px; margin:0 auto}
.progressBar ul li {display:inline-block; width:266px; border-right:1px solid #ccc; text-align:center}
.progressBar ul li:first-child {width:105px; border-left:1px solid #ccc}
.progressBar ul li a {display:block; padding:10px 0; font-size:1.6em; text-decoration:none; font-weight:bold; color:#004165}
.progressBar ul li:first-child a {background:url('themes/img/Homeloan/House_icon.svg') no-repeat center; background-size:30px; text-indent:-2000px}

.next-previous-link {font-size:1.3em}

/*----Hide phone number link on desktop but show it for mobile view---*/
a[href^="tel:"].cs-phone-number,
a[href^="tel:"].cs-phone-number:hover,
a[href^="tel:"].x_cs-phone-number,
a[href^="tel:"].x_cs-phone-number {
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    cursor: text;
}

@media only screen and (max-width: 480px) {
    a[href^="tel:"].cs-phone-number,
    a[href^="tel:"].x_cs-phone-number {
        color: #004165;
        text-decoration: underline;
    }
}

/*Imporntant Information on unselected 'Compare Credit Card' section*/
.cs-width100{
    padding:0px!important;
    width:100%!important;
    margin-bottom:2px;
}
.cs-hide-compare-cc-importantInfo-section{
    display:none;
}

.cs-tabbing-focus:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.cs-importantInfo-column {
    padding: 20px 10px 0 10px;
}
.cs-importantInfo-column p {
    font-size: 1.8em;
    line-height: 1.3em;
}
.cs-importantInfo-column span {
    color: #545454
}