/*--------------------------------------------------------------------------
* Author      : Nathan Winch
* Date        : June 27, 2012
* Project     : Pi Microsite
* Description : Main CSS. 
--------------------------------------------------------------------------*/
/*
* CONTENTS
*
* 1. STYLE GUIDE
* 2. SWATCH COLORS
* 3. FRAMEWORK
*   3.1. SASS
        3.1.1. VARIABLES
        3.1.2. MIXINS
*   3.2. ELEMENT
*   3.3. PRIMARY
*       3.3.1. Site Wide
*   3.4. SKELETON
* 4. PAGE SPECIFIC
*   4.1. Home
* 5. MEDIA QUERIES
* 6. OVERWRITES
*   6.1. webCampaign.css
*   6.2. mobileCampaign.css
--------------------------------------------------------------------------*/
/*
* 1. STYLE GUIDE
*
* - All colors must be listed in the Swatch Colors section of this file.
* - All properties must be listed in alphabetical order for each declaration block.
--------------------------------------------------------------------------*/
/*
* 2. SWATCH COLORS
*
* 4ec4e2 - CBA brand sky
* 71d0e8 - CBA brand sky tint 1
* 95dcee - CBA brand sky tint 2
* b8e7f3 - CBA brand sky tint 3
* dcf3f9 - CBA brand sky tint 4
* c4b6a2 - CBA brand sandstone
* d0c5b5 - CBA brand sandstone tint 1
* dcd3c7 - CBA brand sandstone tint 2
* e7e2da - CBA brand sandstone tint 3
* f3f0ec - CBA brand sandstone tint 4
* 8a97a1 - CBA brand dusk
* a1acb4 - CBA brand dusk tint 1
* b9c1c7 - CBA brand dusk tint 2
* d0d5d9 - CBA brand dusk tint 3
* e8eaec - CBA brand dusk tint 4
* 808285 - CBA brand slate
* 999b9d - CBA brand slate tint 1
* b3b4b6 - CBA brand slate tint 2
* cccdce - CBA brand slate tint 3
* e6e6e7 - CBA brand slate tint 4
* ffcc00 - CBA brand yellow
* 231f20 - CBA brand dark
--------------------------------------------------------------------------*/
/*
* 3. FRAMEWORK
--------------------------------------------------------------------------*/
/*
* 3.1. SASS
---------------------------------------*/
/*
* 3.1.1. VARIABLES
---------------------------------------*/
/*
* 3.1.2. MIXINS
---------------------------------------*/
/*
* 3.2. ELEMENT
---------------------------------------*/
/*
* 3.3. PRIMARY
---------------------------------------*/
/*
* 3.3.1 Site wide useable primary styles.
* Weight: ALL pages.
---------------------------------------*/
.btn {
  margin-bottom: 0;
}
.btn a {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
  background: #ffcc00;
  color: #231f20 !important;
  display: block;
  font: 16px 'HelveticaNeueW01-65Medi', Helvetica, sans-serif;
  padding: 6px 15px 8px;
  text-align: center;
  text-decoration: none;
}

.cta a {
  color: #fff;
  font: 18px 'HelveticaNeueW01-75Bold', Helvetica, sans-serif;
  text-decoration: underline;
}

#piTheme {
  background: #a1acb4 url(/content/dam/commbank/business/pi/images/bg.gif) repeat-x;
  position: relative;
}
#piTheme h1 {
  color: #ffcc00;
  font: normal 62px/1 "Aachen W01 Bold", Arial, Verdana, serif;
  letter-spacing: -1px;
  margin: 0;
  padding: 0 0 15px;
}
#piTheme h2 {
  color: #fff;
  font: normal 28px/1 "Aachen W01 Bold", Arial, Verdana, serif;
  margin: 0;
  padding-bottom: 30px;
}
#piTheme h3 {
  color: #ffcc00;
  font: normal 28px/1 "Aachen W01 Bold", Arial, Verdana, serif;
  margin: 0;
  padding: 16px 0 6px;
}
#piTheme h4 {
  color: #fff;
  font: 18px 'HelveticaNeueW01-75Bold', Helvetica, sans-serif;
  margin: 0 0 40px;
  padding: 0;
}
#piTheme p {
  color: #231f20;
  font-size: 12px !important;
  margin: 0;
  padding: 0 0 10px;
}
#piTheme a:focus {
  outline: none;
}
#piTheme .cta {
  padding-bottom: 5px;
}
#piTheme .cta a:hover {
  color: #ffcc00 !important;
  text-decoration: none;
}
#piTheme .btn-registermyinterest {
  width: 180px !important;
}
#piTheme .btn-registermyinterest a {
  position: relative;
}
#piTheme .nav {
  float: left;
  position: relative;
  z-index: 100;
}
#piTheme .nav ul {
  margin: 0;
  padding: 0;
}
#piTheme .nav ul li {
  background: none;
  float: left;
  height: 77px;
  margin: 0;
  padding: 0;
}
#piTheme .nav a {
  color: #231f20;
  display: block;
  font: normal 26px/0.85 "Aachen W01 Bold", Arial, Verdana, serif;
  height: 51px;
  padding: 26px 20px 0;
  text-decoration: none;
}
#piTheme .nav a:hover {
  background-color: #a1acb4;
}
#piTheme .nav a.active {
  color: #ffcc00;
}
#piTheme .nav .sub {
  position: relative;
}
#piTheme .nav .sub ul {
  display: none;
  left: 0;
  position: absolute;
  top: 77px;
  z-index: 100;
}
#piTheme .nav .sub:hover a {
  background-color: #a1acb4;
}
#piTheme .nav .sub:hover ul {
  display: block;
}
#piTheme .nav .sub:hover ul a {
  color: #fff;
  font-size: 18px;
  height: 31px;
  padding-top: 8px;
}
#piTheme .nav .sub:hover .lev1 {
  background-image: none;
  background-position: center 60px;
  background-repeat: no-repeat;
}
#piTheme .nav .sub .lev1 {
  background-image: url(/content/dam/commbank/business/pi/images/icon-navarrowdown.gif);
  background-position: center 60px;
  background-repeat: no-repeat;
}
#piTheme .nav .home a {
  background-image: url(/content/dam/commbank/business/pi/images/icon-navhome.gif);
  background-position: 16px center;
  background-repeat: no-repeat;
  padding-left: 86px;
}
#piTheme .nav .home a:hover {
  background-color: #8a97a1;
}
#piTheme .nav .businesses a {
  width: 130px;
}
#piTheme .nav .developers a {
  width: 130px;
}
#piTheme .social {
  float: right;
  height: 20px;
  padding-top: 26px;
}
#piTheme .social .googleShare,
#piTheme .social .facebookShare,
#piTheme .social .twitterShare {
  float: right;
}
#piTheme .important-info {
  padding-bottom: 12px;
}
#piTheme .important-info h3 {
  color: #231f20;
  font: bold 11px Verdana, Arial, serif;
  margin: 0;
  padding-bottom: 8px;
}
#piTheme .important-info p {
  font-size: 11px !important;
  padding-bottom: 8px;
}
#piTheme .important-info a {
  color: #fff;
  text-decoration: underline;
}

/*
* 4. PAGE SPECIFIC
--------------------------------------------------------------------------*/
/*
* 5. MEDIA QUERIES
--------------------------------------------------------------------------*/
@media screen and (max-width:640px) {
  .cta a {
    color: #fff !important;
    font: 18px 'HelveticaNeueW01-75Bold', Helvetica, sans-serif !important;
  }

  #piTheme {
    background-color: #8a97a1;
    background-image: none !important;
  }
  #piTheme h1 {
    font-size: 44px !important;
  }
  #piTheme h2 {
    color: #fff !important;
    font-size: 24px !important;
  }
  #piTheme h3 {
    background-color: #a1acb4;
    border-bottom: 1px solid #8A97A1;
    cursor: pointer;
    position: relative;
  }
  #piTheme h3 .icon {
    background: url(/content/dam/commbank/business/pi/images/icon-arrowdown-yellow.gif) 0 0 no-repeat;
    display: block;
    height: 13px;
    position: absolute;
    right: 10px;
    top: 16px;
    width: 19px;
  }
  
    #piTheme h3 .iconright {
    background: url(/content/dam/commbank/business/pi/images/icon-arrowright-yellow.gif) 0 0 no-repeat;
    display: block;
    height: 19px;
    position: absolute;
    right: 10px;
    top: 16px;
    width: 19px;
  }
 
  #piTheme h3.toggled .icon {
    background-image: url(/content/dam/commbank/business/pi/images/icon-arrowup-yellow.gif);
  }
  #piTheme p {
    color: #231f20 !important;
  }
  #piTheme .con1col:nth-child(2) {
    background-color: #231f20;
  }
  #piTheme .nav ul {
    margin: 0 !important;
    padding: 0 !important;
  }
  #piTheme .nav ul li {
    float: left !important;
    height: 44px;
  }
  #piTheme .nav a {
    color: #231f20 !important;
    font-size: 16px !important;
    height: 30px;
    padding: 14px 7px 0;
  }
  #piTheme .nav a.active {
    color: #ffcc00 !important;
  }
  #piTheme .nav .sub ul {
    top: 44px;
  }
  #piTheme .nav .sub:hover ul a {
    font-size: 14px !important;
  }
  #piTheme .nav .home a {
    background: none;
    padding-left: 0;
  }
  #piTheme .nav .businesses a {
    width: 80px;
  }
  #piTheme .nav .developers a {
    width: 80px;
  }
  
}
/*
* 6. OVERWRITES
--------------------------------------------------------------------------*/
/*
* 6.1. webCampaign.css
---------------------------------------*/
#bodyInner {
  padding-top: 0;
}

/*
* 6.2. mobileCampaign.css
---------------------------------------*/