#layout {
  overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
}

#setup {
  .header {
    width: 100%;
    height: 5.4em;
    background-color: #555;
    background-image: -moz-linear-gradient(top, #777, #555);
    background-image: -webkit-linear-gradient(top, #777, #555);
    background-image: -o-linear-gradient(top, #777, #555);
    background-image: -ms-linear-gradient(top, #777, #555);
    background-image: linear-gradient(top, #777, #555);

    img {
      width: 12.5em;
      margin: 0.5em;
      float: left;
    }

    .progress-bar {
      overflow: hidden;
      padding-top: 1em;

      .step {
        float: left;

        h1 {
          margin: 0;
          color: white;
          font-size: 1em;
          text-align: center;
        }

        table {
          margin-top: 0.7em;

          td {
            padding: 0;

            &.left, &.right {
              width: 50%;
            }
          }
        }

        div {
          background-color: lightgrey;

          &.line {
            height: 0.5em;

            &.left {
              margin-left: 0.1em;
              margin-right: -0.1em;
              border-top-left-radius: 0.5em;
              border-bottom-left-radius: 0.5em;
            }

            &.right {
              margin-left: -0.1em;
              margin-right: 0.1em;
              border-top-right-radius: 0.5em;
              border-bottom-right-radius: 0.5em;
            }
          }

          &.bubble {
            width: 1.5em;
            height: 1.5em;
            border-radius: 1.5em;

            // Make sure that such a bubble overlays lines
            position: relative;
            z-index: 1337;
          }

          &.active {
            background-color: white;
          }

          &.complete {
            background-color: #2e8b57;
          }

          &.visited {
              background-color: #77bf97;
          }
        }
      }
    }
  }

  .setup-content {
    margin: 1.5em 1.8em 0 1.8em;
  }
}

#setup div.buttons {
  margin: 1.5em 0;

  .double {
    position: absolute;
    left: -1337px;
  }

  #btn_prev {
    margin-right: 1em;
  }

  button, .button-like {
    padding: 0.5em 1em;
    font-weight: bold;
    outline: 0;
    border: 1px solid black;
    border-radius: 0.2em;
    background: #666;
    color: #eee;

    &[disabled="1"] {
      background-color: #aaa;
      border: 1px dotted black;
    }

    &:hover, &:focus, &:active {
      background-color: #333;

      &[disabled="1"] {
        background-color: #aaa;
      }
    }

    &.finish, &.login {
      min-width: 25em;
      color: #fffafa;
      background: #aaa;

      &:hover, &:focus, &:active {
        background: #888;
      }
    }
  }

  a.button-like {
    cursor: default;
    text-decoration: none;
  }
}

#setup table.requirements {
  margin: -1em -1em 0;
  border-spacing: 1em;
  border-collapse: separate;

  td {
    h2 {
      margin: 0 1em 0 0;
    }

    &.state {
      color: white;
      padding: 0.4em;
      border-radius: 0.2em;

      &.fulfilled {
        background-color: #4fad4b;
      }

      &.not-available {
        color: black;
        background-color: #e8ec70;
      }

      &.missing {
        background-color: #fd7770;
      }
    }

    &.btn-update {
      padding-top: 0.3em;
      text-align: center;

      div.buttons {
        margin: 0;

        a.button-like {
          padding: 0.2em 0.5em;
          background-color: #888;

          &:hover, &:focus {
            background-color: #666;
          }
        }
      }
    }
  }
}

#setup_ldap_discovery_confirm table {
  margin: 1em 0;
  border-collapse: separate;
  border-spacing: 1em 0.2em;
}

#setup_admin_account {
  div.instructions {
    width: 30.2em;
    display: inline-block;
  }

  div.radiobox {
    vertical-align: top;
    display: inline-block;
    padding: 0.9em 0.2em 0;
  }
}

#setup {
  div.summary {
    font-size: 90%;

    div.page {
      float: left;
      width: 25em;
      min-height: 25em;
      padding: 0 1em 1em;
      margin: 1em 1.5em 1.5em;
      border-radius: 0.5em;
      border: 1px dashed lightgrey;

      h2 {
        font-size: 1.2em;
      }

      div.topic {
        margin-left: 2em;

        h3 {
          font-size: 1em;
        }

        ul {
          list-style-type: circle;
        }

        table {
          border-spacing: 0.5em;
          border-collapse: separate;
          font-size: 0.9em;
          margin-left: 2em;
        }
      }
    }
  }

  form#setup_summary {
    clear: left;
  }
}

.conspicuous-state-notification {
  width: 66%;
  margin: 0 auto;
  padding: 0.5em;
  color: white;
  font-weight: bold;
  border-radius: 1em;
}

#setup-finish {
  div.report {
    padding: 1em;
    border-radius: 2em;
    background-color: #eee;

    div.line-separator {
      width: 50%;
      height: 1px;
      margin: 0 auto;
      background-color: white;
    }

    p {
      margin: 1em;
      color: #444;
      text-align: center;

      &.error {
        color: red;
      }

      &.failure {
        .conspicuous-state-notification;
        background-color: @colorCritical;
      }

      &.success {
        .conspicuous-state-notification;
        background-color: @colorOk;
      }
    }
  }

  div.buttons {
    text-align: center;
  }
}

.welcome-page {
  margin-top: 3em;
  text-align: center;

  h2 {
    font-size: 1.5em;
  }

  div.info {
    display: inline-block;
    max-width: 66%;
    padding: 0 1em;
    border-radius: 1em;
    background-color: #eee;
    border: 1px solid lightgrey;
  }

  p.restart-warning {
    color: coral;
    font-weight: bold;
  }

  div.note {
    width: 40%;
    padding: 1em 1em 0;
    margin: 3em auto 0;
    text-align: left;
    border-radius: 0.5em;
    border: 1px solid #eee;

    div.title {
      padding: 0.2em;
      margin: -1em -1em 1em;
      text-align: center;
      background-color: #eee;
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }

    img {
      float: right;
    }

    p {
      margin: 2em 0 1em 0;

      &:first-child {
        margin-top: 1em;
      }
    }

    div.code {
      margin: 0 2em;

      span {
        display: block;
        font-family: monospace;
      }
    }
  }
}

#setup_monitoring_welcome {
  .welcome-page;
  margin-top: 0;
  padding: 1em;

  h2 {
    margin-top: 0;
  }
}

#setup {
  div.module-wizard {
    width: auto;
    padding: 1em;
    overflow: hidden;
    border-radius: 1em;
    background-color: #f4f4f4;

    div.buttons {
      margin: 1.5em 0 0;

      button[type=submit] {
        padding: 0.5em;
        line-height: 0.5em;
        background-color: #888;

        &:hover, &:focus, &:active {
          background-color: #666;
        }
      }
    }
  }

  div.module-menu {
    width: 25%;
    float: right;
    margin-left: 1.5em;

    p {
      margin-top: 0;

      &.all-completed {
        .conspicuous-state-notification;
        text-align: center;
        font-size: 90%;
        background-color: @colorOk;
      }
    }

    ul {
      padding-left: 1.2em;

      button {
        margin: 0 0 0.8em;
        padding: 0;
        color: black;
        border: none;
        outline: none;
        font-size: 90%;
        background-color: white;

        &:hover {
          color: #666;
          cursor: pointer;
        }

        &:focus, &:active {
          color: #666;
        }
      }

      img {
        margin: 0 0.5em 0.2em;
      }
    }
  }
}
