/*

1. Main Layout Elements
2. Panels
3. Positioning
4. Margins
5. Padding
6. Background & Text Colours
7. Lists
8. Links
9. Buttons
10. Typography

*/

/* ==================== 1. Main Layout Elements ==================== */
.main-wrapper{
 margin: $base-margin*4 auto;
}

.page-wrapper{
  border: $base-border;
  background-color: $white;
}

.page-title{
  background: $ash;
  border-bottom: $base-border;
  padding: $base-padding 0;
}

.section-title{
  @extend .page-title;
  border: 0;
  padding: $base-padding*2;
  background-color: $stone;

  h5{
    color: $slate;
  }
}

.page-steps{
  text-align: right;
}

.content-block{
  margin-bottom: $base-margin*4;
  background: $white;
  border: $base-border;
}

.content-block-bottom{
  margin-top: $base-margin*8;
}

.image-callout{
  border: $base-border;
}

.fullwidth{
  width: 100% !important;
}

/* ==================== 2. Panels ==================== */
.panel-box{
  padding: $base-padding*4;

  h4, p{
    color: $white;
    margin-top: 0;
  }
}

.panel-box-confirmation{
  background: $green;
}

.panel-box-error{
  background: $brand-red;
}

.panel-title{
  @extend .page-title;
  border: 0px;
  padding: $base-padding*2;

  h5{
    color: $jet;
    padding-left: $base-padding*2;
  }
}

/* ==================== 3. Positioning ==================== */
.left{
  float: left !important;
}

.right{
  float: right !important;
}

.center{
  margin-left: auto;
  margin-right: auto;
}

.block{
  display: block !important;
}

.inline{
  display: inline !important;
}

.inline-block{
  display: inline-block !important;
}

.text-left{
  text-align: left !important;
}

.text-center{
  text-align: center !important;
}

.text-right{
  text-align: right !important;
}

/* ==================== 4. Margins ==================== */
.m1{
  margin: $base-margin*4 !important;
}

.mt1{
  margin-top: $base-margin*4 !important;
}

.mr1{
  margin-right: $base-margin*4 !important;
}

.mb1{
  margin-bottom: $base-margin*4 !important;
}

.ml1{
  margin-left: $base-margin*4 !important;
}

.m0{
  margin: 0 !important;
}

.mt0{
  margin-top: 0 !important;
}

.mr0{
  margin-right: 0px !important;
}

.mb0{
  margin-bottom: 0 !important;
}

.ml0{
  margin-left: 0px !important;
}

/* ==================== 5. Padding ==================== */
.p1{
  padding: $base-padding*4;
}

.pt1 {
  padding-top: $base-margin*4 !important;
}

.pr1 {
  padding-right: $base-margin*4 !important;
}

.pb1 {
  padding-bottom: $base-margin*4 !important;
}

.pl1 {
  padding-left: $base-margin*4 !important;
}

.p0{
  padding: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

.pb0 {
  padding-bottom :0 !important;
}

.pl0 {
  padding-left: 0 !important;
}

.bb0{
  border-bottom: 0px !important;
}

/* ==================== 6. Background Colours ==================== */
.whitebg{
  background-color: $white;
}

.greybg{
  background-color: $stone;
}

.insurance-blue-bg{
  background-color: $brand-blue-insurance;
}

.light-blue-bg{
  background: $brand-blue-light;
}

.dark-blue-bg{
  background: $brand-blue-dark;
}

.rewards-green-bg{
  background-color: $brand-green;
}

// On a coloured background, the child links should be white
.insurance-blue-bg a,
.light-blue-bg a,
.rewards-green-bg a,
.dark-blue-bg a{
  color: $white;
}

.white-trans{
  background-color: $white;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  background-color: rgba(255,255,255,0.6);
}

/* ==================== 7. Lists ==================== */
.lined-list{
  list-style: none;
  margin: 0;

  li{
    padding: $base-padding*3 $base-padding*2 $base-padding*2 $base-padding*2;
    border-bottom: $base-border;

    .table-value{
      float: right;
    }
  }
}

.no-bullets{
  list-style-type: none;
}

/* ==================== 8. Links ==================== */
.multiline-link{
  line-height: 1.3rem !important;
}

/* ==================== 9. Buttons ==================== */
.base-button{
  @extend .radius;
  @extend .small;
  color: $white;
}

.emphasized,
.emphasized:visited{
  @extend .base-button;
  background: $secondary-color;

  &:hover,
  &:active,
  &:focus{
   background-color: lighten($secondary-color, 10%);
  }
}

button.disabled,
button[disabled],
.button.disabled,
.button[disabled]{
  background-color: lighten($secondary-color, 10%);
  border-color: none;

  &:hover,
  &:active,
  &:focus{
    background-color: lighten($secondary-color, 10%);
    border-color: none;
  }
}

.de-emphasized, .de-emphasized:visited{
  @extend .base-button;
  background: $slate;

  &:hover,
  &:active,
  &:focus{
   background-color: lighten($slate, 10%);
  }
}

.red-btn{
  @extend .base-button;
  background: $brand-red;

  &:hover,
  &:active,
  &:focus{
   background-color: lighten($brand-red, 10%);
  }
}

.green-btn,
.green-btn:visited{
  @extend .base-button;
  background: $brand-green;

  &:hover,
  &:active,
  &:focus{
   background-color: lighten($brand-green, 10%);
  }
}

/* ==================== 10. Typography ==================== */
.white-text{
  color: $white;

  >a{
    color: $white;
  }
}

.white-micetype{
  color: $white;
  font-size: 80%;
}

.text-shadow{
  filter: Shadow(Color=#656565, Direction=130, Strength=1);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

.strike-through{
  text-decoration: line-through;
  color: $black;
}

.uppercase-title{
  font-size: $base-font-size*0.875;
  font-weight: normal;
  color: $slate;
  text-transform: uppercase;
  padding: $base-padding*2 $base-padding*0 $base-padding*2 $base-padding*2;
}

.uppercase{
  text-transform: uppercase;
}