/* 
 __  __                        __  __                                   
|  \/  | ___  _ __   ___ _   _|  \/  | __ _ _ __   __ _  __ _  ___ _ __ 
| |\/| |/ _ \| '_ \ / _ \ | | | |\/| |/ _` | '_ \ / _` |/ _` |/ _ \ '__|
| |  | | (_) | | | |  __/ |_| | |  | | (_| | | | | (_| | (_| |  __/ |   
|_|  |_|\___/|_| |_|\___|\__, |_|  |_|\__,_|_| |_|\__,_|\__, |\___|_|
                         |___/                          |___/           
Author:   WDG & Jens Korff - Fairfax Digital
Born:     September 2006
Modified: February 2008

DO NOT MODIFY THIS FILE! 
Make any changes only to the version which is in version control!
-------------------------------------------------------------------------------------------------- */

body {margin: 0;text-align: center;font-family: Verdana, sans-serif;font-size: 0.7em;background-color: #DAD9D6;background-image: url(../images/common/bg.gif);background-repeat: repeat-y;background-position: center top;color: #444;line-height: 120%}

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility: hidden;}/*Credit: http://www.positioniseverything.net/easyclearing.html */
* html .clearfix {height: 1%;}
*+ html .clearfix {height: 1%;}

h1 {font-size: 160%}
h2, h3 {font-size: 104%;color: black;margin: 1em 0 0.55em 0}
h3 {font-size: 100%}

p, ul, dl, ol {margin: 0.85em 0}

input, select, textarea, button {vertical-align: middle;font-size: 11px;margin: 0 3px 0 0}
input, select {line-height: 11px;height: 17px}
button {width: auto !important;border: 0;padding: 0;background: none;overflow: visible;cursor: pointer}

iframe.app {width: 100%;border: 0;border-spacing: 0;overflow: hidden;margin: 0;padding: 0}

a {color: #080;text-decoration: none}
#content a:hover {color: black;text-decoration: underline}
h2 a, h3 a {color: black;text-decoration: underline}

img {border: 0;display: block;vertical-align: middle}
.imgtxt {text-indent: -9999em;overflow: hidden;margin: 0;padding: 0;background-repeat: no-repeat;background-position: left top}

.title {height: 54px;margin-top: 26px}
.titlecontainer {padding-top: 80px;background-position: 0 26px;background-repeat: no-repeat}
.titlecontainer h1 {margin: 4px 0 0 0 !important;margin: 0;padding: 2px 0 22px 0;background-image: url(../images/subhead/blank.png);background-position: left bottom;background-repeat: repeat-x}

.subhead {height: 36px;margin-top: 3.15em;margin-bottom: 0.25em}

.inline {display: inline}
.headline {clear: left;margin-bottom: -0.5em}
.headline img {float: left;margin: 0 9px 6px 0}

fieldset, form {border: 0;margin: 0;padding: 0}

table {font-size: 100%;border-collapse: separate;border-spacing: 0}
tr {vertical-align: top}
th {text-align: left}

dt {font-weight: bold;padding-bottom: 0.5em}
dd, dt {margin: 0}

.icon {background-repeat: no-repeat;background-position: left center;padding: 8px 0 8px 32px;margin-bottom: 0}

.link {list-style-type: none;padding: 0;margin: 1.5em 0}
.link li, .link dd {background: url(../images/common/bullet-01.png) no-repeat 0 0.25em;padding: 0 0.15em 0 9px}
.tick li, .tick dd {background: url(../images/common/bullet-tick.png) no-repeat 0 0.25em;padding: 0 0.15em 0 18px}
.link .selected {color: black;font-weight: bold}

.guide {list-style-type: none;padding: 0}
.guide li {background: url(../images/common/icon-guide.png) no-repeat left center;padding: 2px 0 2px 24px}
.guide li em {font-style: normal;color: black;font-weight: bold}

.directory {width: 50%;float: left;clear: right;font-size: 90%;margin: 0 0 1.5em 0}
.directory dt, .directory dd {padding: 0 12px 0 0;margin: 0}

.utility {background-repeat: no-repeat;background-position: left top}
.utility dt, .utility dd {padding: 0px 24px 0 40px;margin: 0}
p.utility {padding: 0px 24px 6px 40px;margin: 0}

.feature,.homefeature {float: left;width: 292px !important;width: 316px;padding: 0 12px;background-color: #f4f4f6}
.feature h2 a,.homefeature h2 a {text-decoration: none}
.feature h3,.homefeature h3 {color: #01455F;font-size: 120%}
.feature3 {font-size: 90%;line-height: 120%;float: left;width: 186px !important;width: 204px;height: 128px;padding: 9px;background-color: #eaeaee;margin: 0 12px 1.25em 0}

.homecontainer
{
    background-color: #f4f4f6;
    width: 630px;
}

.homefeature
{
    width: 192px !important;
    width: 210px;
    padding: 0 18px 0 0;
}

.homefeature img
{
    margin-right: -18px;
}

.homefeature .cta
{
    list-style-type: none;
    margin: 0 -18px 0 0;
    padding: 4px 0 4px 25px;
    background-image: url(../images/feature/feature-btm.png);
    background-repeat: repeat-x;
    background-position: left bottom;
}

.homefeature .cta li
{
    height: 18px;
    overflow: hidden;
}

.homefeature .cta li a
{
    display: block;
    padding-top: 18px;
}

.homespacer
{
    clear: both;
    height: 1px;
    overflow: hidden;
}




.promo img {float: left;margin: 0 6px 6px 0}

.hero {height: 142px;width: 292px !important;width: 316px;padding: 0 12px}
.herolg {height: 172px}
.heroimg {position: relative;background-image: url(../images/feature/feature-bg.png);background-repeat: repeat-y;width: 162px !important;width: 316px;padding: 0 142px 0 12px}
.hero img {position: absolute;left: 186px;top: 0px}
.hero h2 {background-image: url(../images/feature/feature-top.png);background-repeat: repeat-x;margin: 0 -12px -0.5em -12px;padding: 12px 0 0 12px;color: #01455F;font-size: 120%}
.hero ul {margin: 0 -12px;padding: 4px 0;position: absolute;bottom: 0px;width: 185px;background-image: url(../images/feature/feature-btm.png);background-repeat: no-repeat}
.hero ul li {height: 18px;overflow: hidden}
.hero ul li a {display: block;padding-top: 18px}

.indent {margin-left: 55px}
.content {float: left;width: 398px;margin-top: 1.25em}
.l {clear: left}
.col {float: left;margin-top: 1.25em;margin-left: 18px;width: 216px}
.coll {float: left;margin-top: 1.25em;margin-right: 18px;width: 216px}
.r {margin-right: 0}
.tool {background-color: #eaeaee;padding: 6px 6px 1px 6px;font-size: 90%;margin-top: 1.5em}
.ad {clear: both;padding: 0;margin-top: 1.5em}
.tool h3 {margin-bottom: 0.25em;font-size: 110%}
.portraitr {float: right;margin: 0 -12px 6px 12px}

.panel, .formpanel {background-color: #f4f4f6;padding: 12px;font-size: 90%;margin-bottom: 1.25em;color: #555;height: 1%; /* Fix IE6 and IE7 bug by applying "hasLayout". This one validates. */}
.panel h3 {color: #555}
.formpanel {font-size: 100%}
.panel h2.subhead2 {height: 36px;position: relative;top: 0 !important;top: -12px;margin-bottom: 6px !important;margin-bottom: -6px}
.panel h2 {margin: -12px -12px 6px -12px}
.panel a, .link a, #sidebar a {color: #555;text-decoration: underline}
.panel a:hover, .link a:hover, #sidebar a:hover {color: black}
.panel .divider {padding-top: 9px}

.calculator, .toolkit {padding-left: 42px;background-image: url(../images/common/icon-calculator.png);background-repeat: no-repeat}
.toolkit {background-image: url(../images/common/icon-toolkit.png)}

.ctaloans a {background-image: url(../images/common/calltoaction-compare-loans.png)}
.ctapersonal a {background-image: url(../images/common/calltoaction-compare-personal.png)}
.ctacredit a {background-image: url(../images/common/calltoaction-compare-cards.png)}
.ctaspecial a {background-image: url(../images/common/calltoaction-view-offers.png)}

.tab {clear: both;border: 1px solid #c4dfe6;padding: 9px}
.tab .menu {font-size: 90%;height: 27px;overflow: hidden;margin: 0;background-image: url(../images/common/tab-bg.png);background-repeat: repeat-x;background-position: 0 0}
.tab .menu dd {padding: 0 0 0 8px;float: left;background-image: url(../images/common/tab-l.png);background-repeat: no-repeat;background-position: 0 0}
.tab .menu dd.selected, .tab .menu dd.selected a {background-position: 0 -27px}
.tab .menu dd a {color: #636c6f;display: block;background-image: url(../images/common/tab-r.png);background-repeat: repeat-x;padding: 7px 6px 6px 2px;background-position: 0 0}
.tab .menu dd.selected a {color: black;font-weight: bold}
.tab .menu dd a:hover {color: black;text-decoration: underline}

.note {color: #555;line-height: 120%}
.section {font-size: 120%;margin: 0 0 1.5em 0}
.sectionlink {margin: 0 0 2em 0;padding-top: 1.5em;border-top: 1px solid #999;clear: both}
.next {width: 50%;width: 45%;float: right;text-align: right}
.prev {width: 45%;text-align: left}

.chart, .comparison {margin: 1.5em 0}
.chart a {color: #369;text-decoration: underline}
.chart a.apply {white-space: nowrap;color: black;font-weight: bold}
.chart thead tr {vertical-align: bottom}
.chart th {border-right: 1px solid white;border-left: 1px solid #c4dfe6;border-top: 1px solid #c4dfe6;padding: 2px 4px 20px 4px;font-size: 90%;line-height: 110%;font-weight: normal;background-image: url(../images/common/bg-table.png);background-repeat: repeat-x;background-position: left bottom}
.chart .blank {background-image: none;padding-bottom: 4px;font-weight: bold;border-bottom: 1px solid #c4dfe6}
.chart th a {background-position: left bottom;background-repeat: no-repeat;font-weight: bold;display: block}
.chart th a:hover {color: black}
.chart .up {padding-left: 24px;background-image: url(../images/common/icon-up.png)}
.chart .dn {padding-left: 24px;background-image: url(../images/common/icon-dn.png)}
.chart th.right {text-align: right;padding-right: 0}

td.tableWidth,
th.tableWidth  {table-layout: fixed;width: 232px}
.comparison th {white-space: nowrap;font-size: 90%}
.chart td, .comparison td, .comparison th {border-right: 1px solid white;border-left: 1px solid #c4dfe6;padding: 3px 4px}
.on td, .on th, .off th {background-color: #e9f3f5}
.off td /*, .off th */ {background-color: #cae1e7}
.on td.selected, .on th.selected {background-color: #f4f9fa;color: black}
.off td.selected, .off th.selected {background-color: #e5f0f3;color: black}
.on .compare {background-color: #95c0d1}
.off .compare {background-color: #95c0d1}

.compare, .details {vertical-align: top}
thead .compare {vertical-align: middle}
.compare a {color: black;text-decoration: underline;font-weight: bold}
.compare a:hover {color: grey}
th.compare {vertical-align: top;font-size:120%;font-weight: bold}
th.compare h2 {font-size: 140%;padding: 6px 0}

.form {margin: 1em 0;background-color: #eaeaee}
.form h2 {margin-bottom: 1em}
.form p {clear: both;border-top: 1px solid white;padding: 3px 9px;margin: 0}
.form .input {display: block;width: auto !important}
label.block {display: block;float: left;margin: 0 2em 0.5em 0}

.radio {margin-left: 5px}

.true, .false {text-indent: -999em;width: 18px;height: 18px;background-image: url(../images/common/tick.png);display: block}
.false {background-image: url(../images/common/cross.png)}

.form p {margin: 0.25em 0}

.float {float: left}
.clear {float: none;clear: both}
.floatr {float: right}

.full {width: 100%}
.half {width: 50%}
.third {width: 40%}
.qtr {width: 25%}

.first {clear: left}
.last {margin-left: 50%;float: none;width: auto !important}

.top {margin-top: 0}
.btm {margin-bottom: 0}

#layout {text-align: left;width: 952px !important;width: 992px; /* IE */margin: 0 auto;padding: 0 20px;background: white}
#content {float: left;width: 636px !important;margin-bottom: 10px}
#content.full {width: 952px}

.centred {float: none;margin: 0 158px !important;margin: 0 79px;width: 636px}

#sidebar {float: left;width: 300px;margin: 20px 0 10px 16px}
#sidebar div#adSpotIsland {margin:0;padding:0;float:none}

#footer {clear: both;margin: 0;padding: 12px 0 12px 0;text-align: center;border-top: 1px solid #eaeaee}

#layout #networkStripTop, #layout #networkStripBot {margin: 0 -18px;clear: both}
#leaderboardad,
#adSpotBanner-Leader {position: absolute;left: 252px;top: 8px}

#masthead {position: relative;background-image: url(../images/common/banner.png);background-repeat: no-repeat;padding-top: 107px;margin: 0 -18px}
#masthead #mh_homeLink {display: block;position: absolute;top: 28px;left: 13px;width: 218px;height: 57px;text-indent: -9999px}
#masthead ul {margin: 0;padding: 0;list-style-type: none;font-size: 90%;height: 26px;background-image: url(../images/common/nav-bg.png);background-repeat: repeat-x;overflow: hidden}
#masthead li {float: left;background-position: 0 -26px}
#masthead li.last {float: none}
#masthead li a {display: block;text-decoration: none;padding-top: 26px;background-position: 0 0}
#masthead li.selected a {background-position: 0 -26px}
#masthead li a:hover {background-image: none}

#nav_home, #nav_home a { width: 65px; background-image: url(../images/common/nav-home.png); }
#nav_savings, #nav_savings a { width: 77px; background-image: url(../images/common/nav-savings.png); }
#nav_cards, #nav_cards a { width: 102px; background-image: url(../images/common/nav-cards.png); }
#nav_loans, #nav_loans a { width: 105px; background-image: url(../images/common/nav-loans.png); }
#nav_personal, #nav_personal a { width: 119px; background-image: url(../images/common/nav-personal.png); }
#nav_investing, #nav_investing a { width: 82px; background-image: url(../images/common/nav-investing.png); }
#nav_banking, #nav_banking a { width: 77px; background-image: url(../images/common/nav-banking.png); }
#nav_property, #nav_property a { width: 81px; background-image: url(../images/common/nav-property.png); }
#nav_planning, #nav_planning a { width: 81px; background-image: url(../images/common/nav-planning.png); }
#nav_news, #nav_news a { width: 63px; background-image: url(../images/common/nav-news.png); }
#nav_portfolios, #nav_portfolios a { width: 107px; background-image: url(../images/common/nav-portfolios.png); }

#srchtxt {width: 56px;height: 20px;display: block;float: left;text-indent: -9999px;background: url(../images/common/type-search.png) left center no-repeat}

#searchpanel {position:relative}

.adSpot-nav-search {position:absolute;top:0;top:10px;left:200px;width:60px;height:18px;display:block;float:none;margin:2px 0 0 0;padding:0;overflow:hidden}
* html .adSpot-nav-search { /* Fix IE6 */top:9px}
*+html .adSpot-nav-search {	/* Fix IE7 and Opera 9 */top:11px}

/* Pop-up text classes */
.popUp {position:relative;z-index:0}
.popUp:hover{background-color:transparent;z-index:50}
a.popUp:hover {border-width:0; /* make pop-up appear in IE */}
.popUp span {display:none}
.popUp:hover span {display:block;position:absolute;left:60px;top:0;background-color:white;padding:0 5px 5px 5px;border:1px solid #5aa427;color:black;width:200px}

/* Special offer page */
.special-offer-box {position:relative;border-top:1px solid #84c302;border-bottom:1px solid #84c302;padding-left:150px;line-height:normal;margin-top:-1px;/* merge borders */}
.special-offer-box img {position:absolute;top:17px;left:0;border:0}
.special-offer-box h2 {font-size:16pt;color:#008000;padding:15px 0 0 0;margin:0}
.special-offer-box h3 {font-size:12pt;color:#008000;font-weight:normal;margin:0;padding:1em 0 0.1em 0}
.special-offer-box .disclaimer {font-size:smaller}
.special-offer-box p a {display:block;width:107px;height:28px;overflow:hidden;text-indent:-9000px;float:right;margin-bottom:7px}
.special-offer-box a.link-more-info {background:transparent url(../images/common/btn-special-offers.png) no-repeat -107px 0;}
.special-offer-box a.link-apply-now {background:transparent url(../images/common/btn-special-offers.png) no-repeat 0 0;}

.btnSearchAgain {background-image:url(/images/common/btn_searchAgain.png);display:block;width:117px;height:18px;text-indent:-99000px;float:right;}
.adSpot-acquisitionad {float:left;margin:0 12px 1.25em 0 !important;width:auto;}
#adSpot-acquisitionad3 {margin-right:0 !important;}