﻿/*
    Commonwealth Bank Group Campaign Template Version 2
    ===================================================
    Define: All Themes
	Structural/layout styles for the campaign template
    Born:   09/08/11
**/

html, body, ul, ol, li { margin:0; padding:0; }
.campaignBtn img { width: auto !important; }

body {
    font:62.5%/1.5 Verdana, Arial;
    background-color:#fff;
	margin: 0;
	padding: 0;
}

select, input, textarea { font-family: Verdana; }

/* Mobile or web specific */
.mobileOnly { display:none !important; }
.webOnly { display:block !important; }

.h1IR { text-indent:-9999em; height:0; overflow:hidden; margin:0; padding:0; }

#headerContain {
    /* in campaignMasthead campaignMasthead.css */	
}

/* BreadCrumb */
#breadCrumbNav { padding: 0px 0 0 16px !important; margin:-30px 0 10px 0 !important; position:relative; }

#breadCrumbNav,
.module {
    font-size:1.1em;
}

#breadCrumbNav { color:#666666; }
#breadCrumbNav a { color:#999999; }

#breadCrumbNav a { text-decoration:none; }
#breadCrumbNav a:hover { text-decoration:underline; }

#yellowTheme #breadCrumbNav { color: #2a2a2a; }
#yellowTheme #breadCrumbNav a { color:#4c4e4f; }
#blackTheme #breadCrumbNav { color: #ffffff; }
#blackTheme #breadCrumbNav a { color:#bdbdbd; }

/**
    Campaign Theme
**/

#lightTheme,
#greyTheme,
#yellowTheme,
#blackTheme {
	 position: relative;
	 min-width:1005px;
}

#lightTheme {
	border-top: 1px solid #ffcc02;
	margin-top: -1px;
}

#greyTheme {
	border-top: 1px solid #ffffff;
	background-color: #bdbdbd;
}

#yellowTheme {
	border-top: 1px solid #ffffff;
	background: #ffffff url(/images/campaignV2/bgYellowTheme.gif) top repeat-x;
}

#blackTheme {
	border-top: 1px solid #ffffff;
	background-color: #000000;
}


/* 
    Body Contain - Middle Content Holder
**/
#bodyInner {
    margin:0 auto;
	padding-top: 50px;
	width: 995px;
}

/* Structural
**************/

/* Structural: parents */
.con1col        { } /* 1 col - 988px */
.con2col_5050   { } /* 2 col: (50% x 50%) - 494px */
.con2col_6733   { } /* 2 col: (67% x 33% - either direction including nested) - 659px, 329px */
.con3col        { } /* 3 col: (33% x 33% x 33%) - 329px each */

.con1col,
.con2col_5050,
.con2col_6733,
.con3col { clear:both; zoom:1; }

.contentCol,
.contentColPrimary {
    float:left;
	padding: 16px 16px 0 16px;
}

.genericModule .contentCol,
.genericModule .contentColPrimary { padding: 0; }

.genericModule,
.transparentModule { float: left;  }

/** 
    Structural alignment: 
**/

/* con1col */
.con1col .transparentModule .contentCol {
    width: 956px;
}
.con1col .genericModule .contentCol {
    width: 988px;
}

/* con2col_6733 */
.con2col_6733 .transparentModule .contentColPrimary {
    width: 627px;
}
.con2col_6733 .genericModule .contentColPrimary {
    width: 659px;
}

.con2col_6733 .transparentModule .contentCol {
    width: 297px;
}
.con2col_6733 .genericModule .contentCol { 
    width: 329px;
}

/* con2col_5050 */
.con2col_5050 .transparentModule .contentCol {
    width: 462px;
}
.con2col_5050 .genericModule .contentCol {
    width: 494px;
}

/* con3col */
.con3col .transparentModule .contentCol {
    width: 297px;
}
.con3col .genericModule .contentCol {
    width: 329px;
}

/* darkModule starts */
.darkModule {
    float: left;
	display: inline-block;
    padding-bottom: 10px;
}

/* darkModule at IE7 only */
/*html>body .darkModule,
html>body .transparentModule,
html>body .genericModule { *xmargin-top: 16px; } */

.darkModuleBtn .campaignBtn { float: left; }
.darkModuleBtn .campaignBtn img {
    float: left;
	margin: 0 15px 0px 0;
}

/* dark Module - 33% */
.con3col .darkModule { 
    background: url(/images/campaignV2/darkModuleBottomBg.png) 0px bottom no-repeat;
}

.con3col .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBg.png) 0px top no-repeat;
	width: 298px;
}

#blackTheme .con3col .darkModule {
    background: url(/images/campaignV2/darkModuleBottomBgBlack.png) 0px bottom no-repeat;
}

#blackTheme .con3col .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBgBlack.png) 0px top no-repeat;
}

/* dark Module - 100% */
.con1col .darkModule { 
   background: url(/images/campaignV2/darkModuleBottomBg100.png) 0px bottom no-repeat;
}

.con1col .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBg100.png) 0px top no-repeat;
	width: 956px;
}
/*THIS IS WHERE STEVE IS EDITING*/
#blackTheme .con1col .darkModule {
    background: url(/images/campaignV2/darkModuleBottomBgBlack100.png) 0px bottom no-repeat;
}

#blackTheme .con1col .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBgBlack100.png) 0px top no-repeat;
}

/* dark Module - 50% */
.con2col_5050 .darkModule { 
    background: url(/images/campaignV2/darkModuleBottomBg50.png) 0px bottom no-repeat;
}

.con2col_5050 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBg50.png) 0px top no-repeat;
	width: 462px;
}

#blackTheme .con2col_5050 .darkModule {
    background: url(/images/campaignV2/darkModuleBottomBgBlack50.png) 0px bottom no-repeat;
}

#blackTheme .con2col_5050 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBgBlack50.png) 0px top no-repeat;
}

/* dark Module - 67% */
.con2col_6733 .darkModule .dark33 { 
    background: url(/images/campaignV2/darkModuleBottomBg.png) 0px bottom no-repeat;
	float: left;
	display: inline-block;
    padding-bottom: 10px;
}

.con2col_6733 .darkModule .dark67 { 
    background: url(/images/campaignV2/darkModuleBottomBg67.png) 0px bottom no-repeat;
	float: left;
	display: inline-block;
    padding-bottom: 10px;
}

.con2col_6733 .darkModule .contentColPrimary {
    background: url(/images/campaignV2/darkModuleTopBg67.png) 0px top no-repeat;
	width: 627px;
}
.con2col_6733 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBg.png) 0px top no-repeat;
	width: 298px;
}

#blackTheme .con2col_6733 .darkModule .dark33 { 
    background: url(/images/campaignV2/darkModuleBottomBgBlack.png) 0px bottom no-repeat;
}

#blackTheme .con2col_6733 .darkModule .dark67 { 
    background: url(/images/campaignV2/darkModuleBottomBg67Black.png) 0px bottom no-repeat;
}

#blackTheme .con2col_6733 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBgBlack.png) 0px top no-repeat;
}

#blackTheme .con2col_6733 .darkModule .contentColPrimary {
    background: url(/images/campaignV2/darkModuleTopBgBlack67.png) 0px top no-repeat;
}








/* ****** */
/*.con2col_6733 .darkModule { 
    background: url(/images/campaignV2/darkModuleBottomBg.png) 0px bottom no-repeat;
}

.con2col_6733 .darkModuleLarger { 
	background: url(/images/campaignV2/darkModuleBottomBg67.png) 0px bottom no-repeat;
}

.con2col_6733 .darkModule .contentColPrimary {
    background: url(/images/campaignV2/darkModuleTopBg67.png) 0px top no-repeat;
	width: 627px;
}
.con2col_6733 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBg.png) 0px top no-repeat;
	width: 298px;
}

#blackTheme .con2col_6733 .darkModule {
    background: url(/images/campaignV2/darkModuleBottomBgBlack.png) 0px bottom no-repeat;
}

#blackTheme .con2col_6733 .darkModuleLarger { 
	background: url(/images/campaignV2/darkModuleBottomBg67Black.png) 0px bottom no-repeat;
}

#blackTheme .con2col_6733 .darkModule .contentCol {
    background: url(/images/campaignV2/darkModuleTopBgBlack.png) 0px top no-repeat;
}

#blackTheme .con2col_6733 .darkModule .contentColPrimary {
    background: url(/images/campaignV2/darkModuleTopBgBlack67.png) 0px top no-repeat;
}
*/

/**
    Default Style across all templates
	- <h1>
	- Campaign button
	- <a>
**/
.campaignBtn {
    display: block;
}

.otherLink { 
    display: block;
}

.contentCol a,
.contentColPrimary a {
    color: #2a2a2a;
	font-size: 11px;
}
#blackTheme .contentCol a,
#blackTheme .contentColPrimary a {
   color: #ffffff;
}

h1, h2, h3, h4, p, ul, ol,
.otherLink, .expandPolicy, .hidePolicy,
.campaignBtn {
    margin: 0 0 16px 0;
}


p a { margin: 0 ; }

h1 { font-family:'Aachen W01 Bold', Verdana, Arial; }
#blackTheme h1 { font-family:'HelveticaNeueW01-95Blac'; }

h2 { font-family:'HelveticaNeueW01-55Roma'; font-weight: normal; }

h3,
.multiSecondaryNav li a,
a.expandPolicy,
a.hidePolicy,
.tabulator li a { font-family:'Aachen W01 Medium', Verdana, Arial;}
#footerContainer .footerHeading H3 {
   font-family:  'HelveticaNeueW01-75Bold', Verdana, Arial;
}




h1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
font-size: 50px;
line-height: 44px;
letter-spacing: -1px;
font-weight: normal;
color: black;
}

h1 span.yellow {color: #ffcc00;}
h1 span.sky {color: #4ec4e2;}
h1 span.sandstone {color:#c4b6a2;}
h1 span.dusk {color: #8a97a1;}
h1 span.slate {color: #808285;}

.contentColPrimary p.calculator{
	margin-left:-16px!important;
	font-size:14px!important;
	}
#blackTheme h1 {
    color: #ffffff;
}

h2 {
    padding: 0;
	font-size: 19px;
	color: #000000;
	margin-top: -9px;
	margin-bottom: 4px;
} 

h3 {
    padding: 0;
	font-size: 23px;
	color: #000000;
	margin-top: -9px;
	margin-bottom: 4px;
}

h4 {
    padding: 0;
	font-size: 15px;
	color: #000000;
}

.darkModule h3 { 
    color: #b8b8b8; 
}

#blackTheme h2,
#blackTheme h3,
#blackTheme h4 { color: #ffffff; }

a {
    text-decoration: underline;
	font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
#blackTheme a { color: #c0c0c0; }
.darkModule a { color: #d1d1d1; }
#blackTheme .darkModule a { color: #c8c8c8; }

p,
ul li,
ol li {
    font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4c4e4f;
}

#blackTheme,
#blackTheme  p,
#blackTheme ul li,
#blackTheme  ol li { color: #bdbdbd; }

.darkModule p,
.darkModule ul li,
.darkModule ol li { color: #ffffff; }
#blackTheme .darkModule p,
#blackTheme .darkModule ul li,
#blackTheme .darkModule ol li { color: #afafad; }

.bigFont,
a.bigFont,
ul.bigFont li,
ol.bigFont li,
.bigFont a { font-size: 12px; }

a.bigFont { display: block; }

ul {
	list-style: none;
	padding: 0;
}

ol {
	padding: 0;
}
/* ol in IE7 */
html>body ol { *margin-left: 5px; }

ul li {
    margin: 0;
	padding: 0 0 0 12px;
	background: url(/images/campaignV2/greyArrow.gif) no-repeat 0 5px;
}

ol li {
    margin: 0 0 0 16px;
	padding: 0;
}

.darkModule .contentCol ul li,
.darkModule .contentColPrimary ul li { background: url(/images/campaignV2/multinavArrowWhite.gif) no-repeat 0 5px; }

#blackTheme .darkModule .contentCol ul li,
#blackTheme .darkModule .contentColPrimary ul li { background: url(/images/campaignV2/greyArrow.gif) no-repeat 0 5px; }

/**
    Components style at various Template Themes:
	- <h1>
	- Button
	- Expand Policy
**/

/* Expand Policy */
.contentCol .expandPolicy,
.contentCol .hidePolicy,
.contentColPrimary .expandPolicy,
.contentColPrimary .hidePolicy {
    display: inline-block;
	padding: 0;
	color: #000000;
	text-decoration: none !important;
}

.policyPanel p {
    font-size: 11px;
}

/**
    Media Share
**/
.mediaShare {
    float: left;
	padding: 5px 0 16px 204px;
}

.mediaShare .facebookShare,
.mediaShare .twitterShare,
.mediaShare .googleShare {
    float: left;
}

.mediaShare .googleShare {
    width: 73px;
}

/*
.facebookShare iframe {
    width: 450px !important;
}
*/

/** 
    Points Calculator Table
**/
#pointCalculatorTable {
    color: #ffffff;
	width: 296px;
	margin-bottom: 12px;
}
#blackTheme #pointCalculatorTable {
    color: #afafad;
}

#pointCalculatorTable td {
    text-align: left;
	width: 144px;
	padding-bottom: 6px;
}

#pointCalculatorTable .calcTxt {
    width: 144px;
	padding: 2px;
	border: 1px solid #454545;
}

#pointCalculatorTable .calcDrop {
    width: 148px;
	padding: 2px;
	margin-left: 1px; 
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	border: none;
}


.pointCalculatorBottom .otherLink {
    float: left;
}
.pointCalculatorBottom .campaignBtn {
    float: right;
	margin: 0 0 5px 0;
}
.pointCalculatorBottom .otherLink a {
    float: left;   
}
.pointCalculatorBottom .campaignBtn img {
    float: left;
}

/**
    Footer Contain
**/

#footerContain {
    background-color: #e8e8e8;
	color: #666666;
	min-width: 1005px;
}

#footerContainer { 
    width: 987px;
	margin: 0 auto;
	padding-top: 20px;
}


#footerContainer a {
    color: #666666;
	font-size: 11px;
	text-decoration: none;
	outline: none;
}

#footerContainer .footerHeading {
    font-size: 15px;
	margin: 15px 0 12px 0;
	padding: 0;
	color: #666666;
}

#footerContainer h3 {
    font-size: 15px;
	font-weight: normal;
	margin: 15px 0 12px 0;
	padding: 0;
	color: #666666;
	font-family: Verdana, Arial, sans-serif;
}

#footerContainer ul {
    list-style: none;
	margin-top: 10px;
}

#footerContainer ul li {
    padding: 0 0 6px 0;
	background: none;
}

#footerContainer p {
    margin: 0 0 5px 0;
	padding: 0;
}

#footerContainer .social span {
    padding-right: 6px;
    
}


#footerContainer .social span.blog {
    padding-top: 6px;
}
#footerContainer .social img.blog {
    vertical-align:middle;
    padding-top: 6px;
}
#footerContainer div {
    float: left;
	padding-left: 16px;
	width: 148px;
}

#footerContainer div.aboutUs {
    float: left;
	width: 312px;
}

#footerContainer .footerPolicy {
    float: left;
	width: 858px;
	padding: 10px 129px 0 0;
	margin: 15px 0 30px 0;
	border-top: 1px solid #ffffff;
}

#footerContainer .footerPolicy a {
    color: #000000;
}

/* Tabulator 
***************/
.tabulator {
   list-style: none !important;
   position: relative;
   z-index: 1;
   margin: 16px 0 0 0;
}

.contentCol .tabulator li,
.contentColPrimary .tabulator li {
    float: left;
	padding: 0 3px 0 0;
	background: none;
	margin: 0 !important;
}
#blackTheme .contentCol .tabulator li,
#blackTheme .contentColPrimary .tabulator li {
    background: none;
	padding: 0 3px 0 0;
}

.tabulator li a {
    float: left;
	color: #8a8a8a;
	font-size: 20px;
	text-decoration: none;
	-webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
	padding: 0px 20px;
	line-height: 35px;
	height: 36px;
	outline: none;
	margin-bottom: 0;
}

#greyTheme .tabulator li a { color: #666666; background: url(/images/campaignV2/bgTabGrey.gif) repeat-x; }
#yellowTheme .tabulator li a,
#lightTheme .tabulator li a { color: #8a8a8a; background: url(/images/campaignV2/bgTabWhite.gif) repeat-x; }
#blackTheme .tabulator li a { color: #7a7a7a; background: url(/images/campaignV2/bgTabBlack.gif) repeat-x; }

.tabulator li.selected a {
    background-image: none !important;
	color: #000000 !important;
	height: 35px;
}

#greyTheme .tabulator li.selected a { 
    background-color: #c3c3c3; 
	border-left: 1px solid #9d9d9d;
	border-top: 1px solid #9d9d9d;
	border-right: 1px solid #9d9d9d;
}

#yellowTheme .tabulator li.selected a,
#lightTheme .tabulator li.selected a { 
    background-color: #ffffff; 
    border-left: 1px solid #c2c2c2;
	border-top: 1px solid #c2c2c2;
	border-right: 1px solid #c2c2c2;
}

#blackTheme .tabulator li.selected a {
    background-color: #000000;
	color: #ffffff !important;
	border-left: 1px solid #484848;
	border-top: 1px solid #484848;
	border-right: 1px solid #484848;
}

.tabulatorContent {
    margin: -1px 0 30px 0;
	padding: 22px 0 0 0;
	-webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
}

#greyTheme .tabulatorContent { border: 1px solid #9d9d9d; }
#yellowTheme .tabulatorContent,
#lightTheme .tabulatorContent { border: 1px solid #c2c2c2; }
#blackTheme .tabulatorContent { border: 1px solid #484848; }
#yellowTheme .tabulatorContent { background-color: #ffffff; }

.tabDisplayCol {
    float: left;
	padding: 0 0px 40px 20px;
}

/* tabulator content columns in 67% module */
.contentColPrimary .tabulatorCol1 .tabDisplayCol { width: 626px; }
.contentColPrimary .tabulatorCol2 .tabDisplayCol { width: 302px; }
.contentColPrimary .tabulatorCol3 .tabDisplayCol { width: 302px; }

/* tabulator content columns in 100% module */
.contentCol .tabulatorCol1 .tabDisplayCol { width: 952px; }
.contentCol .tabulatorCol2 .tabDisplayCol { width: 463px; }
.contentCol .tabulatorCol3 .tabDisplayCol { width: 302px; }
.contentCol .tabulatorCol4 .tabDisplayCol { width: 220px; }

.tabDisplayCol h4 {
    color: #000000;
	margin: 20px 0 15px 0;
}

.tabDisplayCol ul li {
    list-style: none;
	padding: 0 0 10px 10px;
	font-size: 11px;
	color: #666666;
	background: url(/images/campaignV2/greyArrow.gif) 0 6px no-repeat;
}


/**
    Video
**/
#videoPlaceHolder {
    margin: 0px 0 30px 0;
}

/**
    Multi Secondary Nav
**/

.multiSecondaryNav {
    list-style: none;
}

#lightTheme .multiSecondaryNav {
    border-bottom: 1px solid #cccccc;	
}
#greyTheme .multiSecondaryNav {
    border-bottom: 1px solid #979797;	
}
#blackTheme .multiSecondaryNav {
    border-bottom: 1px solid #262626;
}
#yellowTheme .multiSecondaryNav {
    border-bottom: 1px solid #cca300 !important;
}

.contentCol .multiSecondaryNav li {
    padding: 5px 0 5px 0;
	background: none;
}
#blackTheme .multiSecondaryNav li {
    background: none !important;
}

#lightTheme .multiSecondaryNav li {
    border-top: 1px solid #cccccc;	
}
#greyTheme .multiSecondaryNav li {
    border-top: 1px solid #979797;	
}
#blackTheme .multiSecondaryNav li {
    border-top: 1px solid #262626;
}
#yellowTheme .multiSecondaryNav li {
    border-top: 1px solid #cca300;
}

.multiSecondaryNav li a {
    background: url(/images/campaignV2/multinavArrow.gif) 0 7px no-repeat;
	text-decoration: none;
	font-size: 16px;
	color: #4c4e4f;
	padding-left: 10px;
}
#blackTheme .multiSecondaryNav li a { 
    color: #bdbdbd; 
	background: url(/images/campaignV2/multinavArrowLightGrey.gif) 0 7px no-repeat;
}

.multiSecondaryNav .active a {
    color: #000000;
	background: url(/images/campaignV2/multinavArrowSelected.gif) 0 7px no-repeat;
}
#blackTheme .multiSecondaryNav .active a { 
    color: #ffffff; 
	background: url(/images/campaignV2/multinavArrowWhite.gif) 0 7px no-repeat;
}


/* Resets & common classes
**************************/
form, fieldset { border:none; padding:0; margin:0; }
a img, img a { border:none; }
.clearfix:after, .outer {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
.clearfix {display: block;}
/* End hide from IE-mac */

/* IE6 Quirks */
* html .clearfix,
.themeLight,
.themeDark,
.themeGeneric {
height:1%;
}

/* Ipad-specific style for social share */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
   .mediaShare .googleShare {
      width: 92px;
   }
}

.con2col_6733 .contentCol .mediaShare,
.con3col .contentCol .mediaShare{ padding-left:0; }


