/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

$border-radius: 4px;
@font-face {
  font-family: 'DINNextLTPro-Regular';
  src: url('../fonts/25C797_0_0.eot');
  src: url('../fonts/25C797_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/25C797_0_0.woff') format('woff'),url('../fonts/25C797_0_0.ttf') format('truetype');
}

@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
@import "sassybuttons";
@import "slider";
@import "step1";
@import "step2";
@import "step3";

body {
  color: #F2F2F2;
  background-color: #222222;
  font-size: 14px;
  font-family: DINNextLTPro-Regular;
}

a {
  color: #F2F2F2;
}

a.visited {
  color: #E2E2E2;
}

.label {
  text-transform: uppercase;
}

.container {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  background-image: url(../images/background2.png);
  background-position: 0 0;
  background-repeat: no-repeat;  
  padding-top: 85px;
  border: solid 1px #333333;
  @include box-shadow(rgba(black, 0.6) 0 0 25px, rgba(black, 0.4) 0 0 3px 1px inset);
  background-color: black;
}

input[disabled=disabled] {
  background-color: gray;
}

input[type="text"] {
  border: 0;
  padding: 4px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label span {
  display:inline-block;
  width:35px;
  height:35px;
  margin:-5px 4px 0 0;
  vertical-align:middle;
  background:url(../images/radiobutton_off.png) left top no-repeat;
  cursor:pointer;
}

input[type="radio"]:checked + label span {
  background:url(../images/radiobutton_on.png) left top no-repeat;
}

input[type="submit"] {
  @include sassy-button("glass", $border-radius, 14px, #555555);
  @include box-shadow(rgba(red, 0.4) 0 0 25px, rgba(red, 0.2) 0 0 3px 1px inset);
}

input[type="submit"]:hover {
  @include sassy-button("glass", $border-radius, 14px, #888888);
  @include box-shadow(rgba(red, 0.4) 0 0 25px, rgba(red, 0.2) 0 0 3px 1px inset);
}

input[type="submit"]:active {
  @include sassy-button("matte", $border-radius, 14px, #444444);
  @include box-shadow(rgba(red, 0.4) 0 0 25px, rgba(red, 0.2) 0 0 3px 1px inset);
}

.error {
  border: solid 1px red !important;
  background-color: #FFDDDD;
}

.bottom {
  margin-top: 15px;
  margin-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}

.middle {
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
}

.line {
  background-image: url(../images/line_big2.png);
  background-position: 0 20px;
  background-repeat: no-repeat;
  height: 25px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  
  &.with_headline {
    margin-top: 20px;    
  }

  h2 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
  }
}

.wide_button {
  width: 100%;
}

.steps {
  padding-top: 20px;
  margin-bottom: 25px;
  margin-left: 30px;

  .step {
    display: inline-block;
    margin-right: 20px;
    
    a {
      text-decoration: none;
      color: white;
      overflow: auto;
      font-size: 18px;

      .circle {
        background-image: url(../images/circle_inactive.png);
        height: 110px;
        width: 110px;
        float: left;
        display: inline-block;
        margin-right: 5px;
        
        .number {
          margin-top: 46px;
          margin-left: 50px;
          font-size: 22px;
        }
      }
      
      .text {
        float: right;
        padding-top: 45px;
        width: 150px;
      }
      
      &.active {
        .circle {
          background-image: url(../images/circle_active.png);
        }
      }
    }    
  }
}

.step_content {
	display: none;
}

.step_1_content {
  display: block;
}