h1 {
  margin-left: 0em !important;
}

/* Display No JS version by default */

.supported-browser,
.outdated-browser,
.unsupported-browser {
  display: none;
}

.no-js {
  display: initial;
}

#skip-verification-direct,
#verification,
#update-extension,
#verifying-download,
#verification-successful,
#verification-failed,
#verification-failed-again,
#skip-download-direct,
#skip-download-bittorrent,
#extension-version,
.use-mirror-pool-on-retry {
  display: none;
}

#verify-download-wrapper input {
  display: none;
}

.transparent {
  opacity: 0.3;
}

/* Display logic in case the extension is installed or outdated */

html[data-extension="up-to-date"] #install-extension,
html[data-extension="outdated"] #install-extension {
  display: none;
}

html[data-extension="outdated"] #update-extension,
html[data-extension="up-to-date"] #verification {
  display: block;
}

/* Layout */

#content {
  padding-left: 0 !important;
}

#direct-download {
  border-right: 1px solid #ccc;
}

.btn {
  color: black !important;
  background: #53b351 !important;
  border: none;
  padding: 6px 12px !important;
}

span.step-number {
  display: inline-block;
  width: 35px;
}

.indent {
  margin-left: 35px !important;
}

#step-download-iso, #step-download-torrent {
  min-height: 7em;
}

#step-verify-direct, #step-verify-bittorrent, #step-continue-direct {
  margin-top: 4em;
}

#step-continue-bittorrent {
  margin-top: 5em;
}

/* FLOATING TOGGLEABLE FOR 'WHY?' CONTEXTUAL HELP */

/* Hide toggleable by default so they don't appear when there is no JavaScript. */
.floating-toggleable-link {
  display: none;
  margin: 0;
}

.floating-toggleable div.toggleable {
  display: none;
  background: white !important;
  border: 1px solid #53b351 !important;
  -webkit-box-shadow: 5px 5px #53b351;
  box-shadow: 5px 5px #53b351;
  padding: 15px 30px !important;
  margin: -1em auto !important;
  position: absolute !important;
  text-align: left;
  font-size: 13px;
  z-index: 1;
  width: 35em;
}

/* X for closing the toggle */
.floating-toggleable a.toggle {
  border: none !important;
  cursor: pointer;
  position: absolute;
  right: 7px;
  top: 5px;
}

.caution, #bittorrent-download, #verification-failed, #verification-failed-again {
  position: relative;
}

.why-verify-link {
  position: absolute;
  top: 1.2em;
  right: 1em;
}

.why-failed-link, .why-failed-again-link {
  position: absolute;
  top: 0;
  right: 1em;
}

.what-is-bittorrent-link {
  position: absolute;
  top: 2.4em;
  right: 1em;
}
html[dir="rtl"] .what-is-bittorrent-link { left: 1em; }

#already-downloaded {
  margin-top: 0.5em;
  cursor: pointer;
}

/* Skip verification */

#skip-verification-direct div {
  background: url(../icons/dialog-warning-small.png) no-repeat;
  height: 2em;
  padding-left: 30px;
}

#skip-verification-direct a {
  color: #e8112d;
  border-color: #e8112f;
  border-size: 2px;
}

/* Progress bar */

.progress {
  max-width: 100%;
}

.progress-bar {
  background: #53b351;
}

/* Verification results */

#extension-installed, #verification-successful {
  background: url(../icons/check.png) no-repeat;
  padding-left: 35px;
}

#verification-failed, #verification-failed-again {
  background: url(../icons/failed.png) no-repeat;
  padding-left: 35px;
}

#continue-link-direct li, #continue-link-bittorrent li {
  margin-left: 1em;
}

/* OpenPGP */

#openpgp {
  margin-top: 5em;
}

#openpgp h3 {
  margin-top: 3em;
}

#openpgp pre, #openpgp p.pre {
  min-width: 58em;
  width: 58em;
}