/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */

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


#setup {
  .header {
    width: 100%;
    height: 5.4em;
    background-color: @colorPetrol;
    border-bottom: 1px solid #d9d9d9d;
    text-align: center;
    -webkit-box-shadow: 0 3px 7px -3px #000;
    -moz-box-shadow: 0 3px 7px -3px #000;
    box-shadow: 0 3px 7px -3px #000;


    img {
      width: 7.5em;
      margin: 1.5em;
      float: left;
    }

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

      .step {
        float: left;

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

        table {
          margin-top: 0.7em;

          td {
            padding: 0;

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

        div {
          background-color: lightgrey;

          &.line {
            height: 0.4em;

            &.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.2em;
            height: 1.2em;
            border-radius: 1.2em;

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

          &.active {
            background-color: white;
          }

          &.complete {
            background-color: @colorOk ;
          }

          &.visited {
            background-color: #eee;
          }
        }
      }
    }
  }

  .setup-content {
    margin: 1.5em 10em 0 10em;

    form {
      h2 {
        font-size: 2.0em;
        color: @colorTextDefault;
        border-bottom: 2px solid @colorPetrol;
      }
    }
  }
}

#setup div.buttons {
  margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
  margin-bottom: 1.5em;

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

  #btn_prev {
    margin-right: 1em;
    font-size: 0.9em;
  }

  #btn_next {
    font-size: 0.9em;
  }

  button, .button-like {
    font-size: 0.9em;
    font-weight: bold;
    outline: 0;
    color: #fff;
    border: 2px solid;
    border-color: @colorPetrol;
    background: @colorPetrol;

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

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

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

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

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

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

form#setup_requirements {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 2px solid @colorPetrol;

  div.buttons div.requirements-refresh {
    width: 25%;
    float: right;
    text-align: center;

    a.button-like {
      padding: 0.1em 0.4em;
    }
  }
}

#setup > table.requirements {
  font-size: 0.9em;
}

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

  td {
    padding: 0;

    h2 {
      margin: 0 1em 0 0;
    }

    table {
      font-size: 102%; // Just a hack for webkit, remove this in case you can't see any difference or make it work without it
    }

    ul {
      margin: 0;
      padding-left: 1em;
      list-style-type: square;
    }

    &.title {
      width: 25%;
    }

    &.desc {
      width: 50%;
    }

    &.state {
      width: 25%;
      color: white;
      padding: 0.4em;

      &.fulfilled {
        background-color: @colorOk;
      }

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

      &.missing {
        background-color: @colorCritical;
      }
    }
  }
}

#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: 20em;
      min-height: 25em;
      padding: 0 1em 1em;
      margin: 1em 1.5em 1.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.summary {
    clear: left;
  }
}

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

#setup-finish {
  div.report {
    padding: 1em;
    border: 1px solid lightgrey;
    border-radius: 0em;

    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: 2.0em;
    color: @colorTextDefault;
    border-bottom: 2px solid @colorPetrol;
    margin-bottom: 2em;

  }

  div.info {
    padding: 0 1em;
    background-color: #eee;
    border: 1px solid lightgrey;
  }

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

  div.note {
    padding: 1em 1em 0;
    margin: 3em auto 0;
    text-align: left;
    font-size: 0.9em;
    border: 1px solid lightgrey;

    div.title {
      color: white;
      padding: 0.2em;
      margin: -1em -1em 1em;
      text-align: center;
      color: @colorTextDefault;
      border-bottom: 2px solid @colorPetrol;

    }

    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_modules {
  div.module {
    float: left;
    width: 15em;
    height: 15em;
    margin: 1em;
    padding: 0.3em;
    border: 1px solid #ccc;
    background-color: snow;

    h3 {
      border: none;
      margin: 0.5em 0;
      text-align: center;

      label {
        margin: 0;
        width: 15em;
        cursor: pointer;
      }
    }

    h3 + label {
      width: 13.5em;
      height: 13.9em;
      overflow: auto;
      cursor: pointer;
      font-weight: normal;
    }

    input[type=checkbox] {
      height: 10em;
      float: right;
      margin: 0;
    }
  }

  div.buttons {
    padding-top: 1em;
    clear: both;
  }
}