// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "foundation4/foundation/variables";
@import "foundation4/foundation/components/global";
@import "foundation4/foundation/components/buttons";
@import "foundation4/foundation/components/panels";

#postcode_select_box {
  text-align: center;
  padding: 18% 0;

  p {
    color: white;
    font-size: 1.1em;
  }

  input {
    font-size: 2em;
  }

  .button-huge {
    $padding: emCalc(21);
    $bg: $primary-color;
    $radius: true;
    $full-width: false;
    $disabled: false;
    $is-input: false;

    @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
  }

  a {
    &:link {
      color: #FFF;
    }
    &:visited {
      color: #FFF;
    }
    &:hover {
      color: $primary-color;
    }
  }
}

.backstretch img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.bgwidth { 
  width: 100%; 
}

.bgheight { 
  height: 100%; 
}

#home-page-nav
{
  ul {
    margin: 0;
    padding: 0;

    li {
      list-style-type: none;
      display: inline;
      font-size: 1.2em;
      font-weight: bold;
      color: #FFF;

      &:before {
        content: " | ";
      }

      &:first-child {
        &:before {
          content: none;
        }
      }
    }
  }
}

#sidebar {
  border: none;
}

.login-panel {
  $bg: #222;
  $padding: emCalc(20);
  $adjust: true;

  @include panel($bg, $padding, $adjust);
}

.centered {
  text-align: center;
}

#logo-container {
  margin-bottom: emCalc(25);
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}