@charset "utf-8";

/*==================================================================
  Centrelink Online Services CSS File
  ==================================================================

  CSS formatting rules
    - mobile first, with media queries for tablet then desktop building on each
    - indent with a single tab not spaces
    - indent media query blocks
    - all declarations on separate lines
    - selector lists (separated by commas) on separate lines
    - clearly mark sections with the separating block
    - try to keep IE only styles/fixes in ie.css but small hacks are OK to include here
    - use shorthand declarations and colour values when possible and no units on zero values
    - CSS3 selectors should have a fallback and add the vendor specific prefixes finishing with the real CSS3 declaration
    - curly braces: space before and after, start on same line as last selector and the end on a new line

  ==================================================================
  Table of Contents
  ==================================================================
  
    i. Colours
  
    0. Container / #container
  
    1. Header / #header
  
    2. Footer / #footer
  
    3. Window container / .window
      3.1 Table of Contents
  
    4. Forms
      4.1 Error Feedback
  
    5. Tables
  
    6. Calandar
  
    7. Progress indicator and breadcrumbs
    
    *. Modal Windows / Tool Tips
    
  
    *. Responsive Web Design RWD
      *.1 Width RWD
  
      *.2 Height RWD
  
    *. Misc
    
    *. Layout
    
  
  /*==================================================================
  0. Container / #container
  ==================================================================*/
  
  html {
    background: #fff; 
    background-size: 100%;
  }

  #container {
    width:100%;
    margin: 0 auto;
  }

  #header {
    z-index: 99;
    position: fixed;
    background: #000 none no-repeat 0 0;
    height: 3.5em;
    width: 100%;
    overflow: hidden;
  }

  #header div.logo { float:left; height: 100%; }
    #header .logo h1 {
      float:left;
      color:#111;
      font-style: normal;
      letter-spacing:-1px;
      margin:0;
      font-size:1.2em;
      color:#f6f5f5;

      font-weight: normal;
    }
    #header div.logo img  { float:left; padding:0.5em; }

  #header .home-link:hover,
  #header .app-title:hover,
  .controls ul:hover {
    background: #555;
  }

  .touch .ipad-hide {
    display: none;
  }
  #header .home-link{
    display: inline-block;
    width:3em;
    height: 100%;
    overflow: hidden;

  }
  #header .home-link h1 {
    margin-left: .5em;
    font-weight: normal;
  }
  #header .app-title {
    display: inline-block;
    padding: 0 .5em;
    line-height: 3.5em;
  }

 .return-home {
    float: left;
    height: 100%;
  }

  .return-home a {
    height: 100%;
    line-height: 3.5em;
    padding: 0 0.8em;
    display: block;
    text-decoration: none;
  }

  .return-home img {
    height: 22px;
  }

 
.header-controls li:hover,
  .return-home a:hover {
    text-decoration: none;
  }
  
  .header-controls {
    height: 100%;
    overflow: hidden;
	margin-right: 2.7%;
  }

  .header-controls ul {
    height:100%;
    line-height: 3em;
    float: right;
    list-style-type: none;
    
  }

  .header-controls li {
    float: right;
    height: 100%;
    padding: 0 8px;
    min-width: 3em;
    color: #fff;
  }

  .header-controls .logoff a {
   color: #fff;
   text-decoration: none;
  }

  .header-controls .logoff,
  .header-controls .header-crn {
    font-size: .9em;
    padding-top: 0.3em;
    text-transform: uppercase;
  }


  /*==================================================================
  2. Footer / #footer
  ==================================================================*/    
/* ============ DHS Band ============= */

#footer {
  width:100%;
  height: 2.95em;
  background: #000 none no-repeat 0 0;
  position: fixed;
  z-index:99;
  bottom: 0;
  text-align: center;
}

#footer ul {
  margin: 0;
  padding: 0.9em 0px 0px 1.4em;
}
#footer li {
  display: inline;
  list-style-type: none;
  color: #fff;
}
#footer a {
  padding: 1.8em;
  margin: 0;
  white-space: nowrap;
  display: inherit;
}
#footer a:link,
#footer a:visited {
  color: #fff;
  background-color: transparent;
}
#footer a#legal-notices:link,
#footer a#legal-notices:visited {
  border: 0;
}
#footer a:hover,
#footer a:active {
  color: #fff;
  text-decoration: underline;
}
#footer .your-rights {
  background: url(../images/your-rights.png) no-repeat 0.05em center;
  background-size: 28px;
}
#footer .contact-us {
  background: url(../images/contact.png) no-repeat 0.5em center;
  background-size: 28px;
}
#footer .legal-notices {
  background: url(../images/legal-notices.png) no-repeat scroll 0.5em center / 35px auto transparent;
  width: 43px;
  padding-top: 30px;
}

  /*==================================================================
  *. Body / #main-body
  ==================================================================*/

  #main-body {  
    width: 90%;
    margin: 0 auto;
  }
  
/* side buttons */


  .aux-functions {
    position: fixed;
    top: 5em;
    right: 0;
    z-index: 9995;

      -webkit-transition: right 200ms ease-out;
      -moz-transition: right 200ms ease-out;
      -ms-transition: right 200ms ease-out;
      -o-transition: right 200ms ease-out;
    transition: right 200ms ease-out;
  }

  .aux-functions.open {
    right: 25em;
  }

  .aux-functions.updates.open {
    right: 18em;
  }

  .aux-functions>ul {
    list-style-type: none;
  }

  .aux-functions>ul>li {
    position: relative;
    z-index: 9999;
    width: 36px;
    height: 24px;
    margin: 0.5em 0;

    line-height: 2em;
    font-weight: bold;
    padding-left: 5px;
  }

  .aux-functions.updates li {
    width: 48px;
    height: 48px;
  }

  .aux-functions>ul a {
    width: 100%;
    height: 100%;
    display: block;
    color: #444;
    text-decoration: none;
    border: 1px solid #ccc;
    border-right: 0;

  }

/*  .aux-functions a.clicked {
    z-index:9999;
    border-right: 1px solid #fff;
  }

  .aux-functions.open a {
    background-color: #ccc;
    opacity: .85;
  }

  .aux-functions.open a.clicked {
    background-color: #fff;
    opacity: 1;
  }*/

  .floating-print {
    background: #fff url("../images/icons/print-grey.png") no-repeat center center;
  }

  .floating-help {
    background: #fff url("../images/icons/help_blk.png") no-repeat center center;
  }

  .floating-feedback {
    background: #fff url("../images/icons/feedback.png") no-repeat center center;
  }

  .floating-update {
    background: #fff url("../images/icons/drawer-update-icon.png") no-repeat center center;
    background-size: 48px;
    position: absolute;

    top: 20em;
  }



  .right-drawer {
    z-index: 9999;
    background: #fff;
    border-left: 1px solid #ccc;
    position: fixed;
    top: 3.5em;
    bottom: 2.5em;
    right: -15em;
    width: 15em;

      -webkit-transition: right 200ms ease-out;
      -moz-transition: right 200ms ease-out;
      -ms-transition: right 200ms ease-out;
      -o-transition: right 200ms ease-out;
    transition: right 200ms ease-out;
	
	margin-bottom: 0;
	display: none;
  }

  .right-drawer.open {
    right: 0;
    width: 25em;
	
	display: block;
  }
  
  .right-drawer.open div {
	overflow-y: auto !important;
  }

  .right-drawer.updates.open {
    right: 0;
    width: 18em;
  }

/*  .open .drawer-help {
    display: block !important;
  }
*/
  .open .drawer-feedback {
    display: block !important;
  }


  .drawer-feedback ul {
    list-style-type: none;
  }

  .drawer-update {
    padding: 0 0.5em;
  }

  .drawer-update .section-items {
    list-style-type: none;
    font-size: 0.9em;
  }

 .drawer-update .section-items li {
    background-size: 14px;
    padding-left: 2.5em;
 }

  .drawer-update .updated {
    background: url("../images/icons/edit-pencil.png") no-repeat 0.5em center;
  }

  .drawer-update .added {
    background: url("../images/icons/add-new-icon.png") no-repeat 0.5em center;
  }

  .drawer-update .removed {
    background: url("../images/icons/garbage-can-icon.png") no-repeat 0.5em center;
  }

   .drawer-update .button-bar {
    position: absolute;
    bottom: 0;
  }

  .drawer-update .button-bar .next-button {
    float: left;
    margin: 0 auto;
    width: 85%;
  }

  .drawer-update .button-bar .additional-information {
    font-size: 0.75em;
    padding: 0.5em;

    background: #fcf5c5;

    position: absolute;
    bottom: 4em;
    width: 90%;
  }

  .drawer-update .button-bar .keep-updating {
    font-size: 0.85em;
    padding: 0.5em;

    position: absolute;
    bottom: 3em;
    width: 90%;

    text-decoration: none;
  }

  .drawer-update .button-bar .keep-updating a {
    text-decoration: none;
  }

  .drawer-update .button-bar .keep-updating a:hover,
  .drawer-update .button-bar .keep-updating a:focus {
    text-decoration: underline;
  }
.helpContent {
  padding-left: 15px;
  font-size: 0.8em;
  height: 100%;
  padding-right: 15px;
}

.helpContent h5 {
  font-size: 1em;
  margin-bottom: 0.5em;
}

.helpContent li a {
  padding-left: 0px !important;
}

.myProfileWelcomeParagraph {
  margin-top: 10px;
}

.myProfileWelcomeTrialButtons {
  text-align: center;
}

.feedbackContent{
  padding: 5px;
}

.feebackButton{
    width: 100px !important;
    margin: 0;
    padding: 0;
} 

.hide{
  display: none !important;
}



  /*==================================================================
  *. Forms and buttons
  ==================================================================*/
.button-bar {
  height: 2.2em;
  min-width: 8em;
  width: 100%;
/*  width: 10em\9;  removed  as should not be needed, causing problems*/ 

  padding: 0;
  margin: 2em 0;
/*  cursor: pointer;
  cursor: hand;*/
  list-style-type: none;
}

.button-bar.middle-aligned {
  text-align: center;
  margin: 2em auto;
}

#post-bill-pay-block .button-bar.middle-aligned {
  margin: 2em auto 0 auto;
}

.button-bar.middle-aligned li {
  display: inline-block;
}

.button-bar .cancel-link {
  float: left;
  padding-top: 1em;
}

.button-bar input{
  position: relative;
  z-index: 1;
  padding: 0.5em 1em;
  color: #222;
  background: transparent;

  font-size: 1em;
  font-weight: normal;
}

.right-button,
.left-button,
.next-button,
.middle-button,
.previous-button {
  position: relative;
  height: 100%;
  min-width: 8em;
}

.next-button,
.right-button { float: right; }
.previous-button,
.left-button { float: left; }

.right-button input,
.middle-button input,
.left-button input {
  background: #363636;
  color: #fff;
}

.logon-button input {
  font-weight: bold;
}

.right-button input:hover,
.right-button input:focus,
.middle-button input:hover,
.middle-button input:focus,
.left-button input:hover,
.left-button input:focus {
  background: #aaa;
}

.right-button input,
.middle-button input,
.left-button input,
.next-button input,
.previous-button input {
  width: 100%;
  float: left;
  border: 1px solid #ccc;
  height: 105%;
}

.next-button input {
  padding: 0.5em 40% 0.5em 0.5em;
  background: #363636 url(../images/right10px.png) no-repeat 87.5% center;
  background-size: 10px;
  color: rgb(255, 255, 255);
}

.previous-button input {
  padding: 0.5em 0.5em 0.5em 40%;
  background: rgb(36, 36, 36) url(../images/left10px.png) no-repeat 12.5% center;
  background-size: 10px;
  color: rgb(255, 255, 255);
}

.button-bar span.grey { background: #ccc; }
.button-bar span.white { background: #fff; }
.button-bar input:hover + .grey, .button-bar input:focus + .grey { background: #aaa; border: 1px solid #;}
.button-bar input:hover + .grey + .white, .button-bar input:focus + .grey + .white { background: #eee; }
.button-bar span { position: absolute; height: 105%; }

.right-button span.grey,
.middle-button span.grey,
.left-button span.grey { width:100%; left: 0;}

.next-button span.grey { width: 70%; left: 0;}
.next-button span.white { width: 30%; right: 0; }
.previous-button span.grey { width: 70%; right: 0;}
.previous-button span.white { width: 30%; left: 0; }

.button-bar .secondary {
  min-width: 0;
}

.button-bar .secondary input {
  padding: 0;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  color: rgb(41, 182, 232);

}

.button-bar .secondary input:hover,
.button-bar .secondary input:focus {
  text-decoration: underline;
}

.card .i-and-a-list.input {
  overflow: hidden;

}

.card .button-bar input,
.card .button-bar .right-button {
  min-width: 0;
}

.card .button-bar .right-button.tick input {
  padding: 0.1em 0.5em 0.1em 2em;
  background: url("../images/message-icons/tick.png") no-repeat 0.25em center;
  background-size: 16px;
}

.card .button-bar .right-button.tick input:hover,
.card .button-bar .right-button.tick input:focus {
  background: #ddd url("../images/message-icons/tick.png") no-repeat 0.25em center;
  background-size: 16px;
}

.card .button-bar {
  margin-bottom: 0;
}

.button-bar i,
.button-bar em,
.auxiliary-info {
  font-size: 0.8em;
  float: left;
  line-height: 2em; 
}

.button-bar p {
  padding-bottom: 1em;
}

  /*==================================================================
  *. Layout
  ==================================================================*/

  .go-top-navigation {
    position: fixed;
    top: 60%;
    right: 0;
    z-index: 999;
  }

  .go-top-navigation a {
    display: block;
    width: 41px;
    height: 41px;
    background: no-repeat -41px 0 url('../images/to-top.png');
  }

  .go-top-navigation a:hover {
    background-position: 0 0;
  }

  .pull-right { float: right; }
  .pull-left { float: left; }
  .indent-left {padding-left: 1em;}

  /*==================================================================
  *. For LoginServices/Credman pages
  ==================================================================*/
  #branding  .header-logo  h1 {
    font-size: 114%;
	line-height: 50px;
	margin: 0px 0px 0px 1.5px;
  }
  
  #branding img#logo {
    margin: 0.5em 1em 0 15px;
  }
  
  #branding .web-address a {
    font-size: 14px;
  }
  
  .web-address {
    margin-top: 0.1em;
  }

  #main-body.outer-nav-wrapper {
	padding-top: 40px;
  }
  
  /*==================================================================
  *. Responsive web design
  ==================================================================*/

@media only screen  and (orientation: landscape) {
  .touch #main-body {
    font-size: 0.9em;
  }
}

.helpAnchorLink a {
  border: none;
  cursor: pointer;
}


.feedbackChoices{
    float: left;
}

.paymentDestinations{
  display: inline-block;
  width: 90%;
  clear: both;
  padding-top: 0.3em; 
}

@media print {

  .card    {
      -webkit-margin-before: 0 !important;
  }
    
  .section-container{
    margin-left: 0px;
  }
  
  .i-and-a-page-title {
    margin-top: -1em;
    font-size: 1.8em;
  }
  
  a[href]:after {
    content: " " !important;
  }
    
  .section-wrapper{
    min-height: 5px;
    margin: 0 auto 4em auto;
  }
  
  #nav,
  .list-title,
  .right-drawer,
  .aux-functions
  {
    display: none;
  }
  
   .flow-column {
        -moz-column-count: 1;
        -webkit-column-count: 1;
      column-count: 1;

  }

  .i-and-a-list .value {
    position: static;
    width: 100%;
    
  }

  .i-and-a-list .value span {
    text-align: left;
  }

  #header {
    position: absolute;
    top:0;
  }
  
}