/* Bootstrap theming */

h2 {
  margin: 20px 0 40px 0;
}

h3 {
  margin: 40px 0 20px 0;
}

.actions {
  margin: 40px 0 40px 0;
}

.actions-centered {
  text-align: center;
}

.input-group-addon {
  background-color: #f4f4f4;
}

.btn-sm {
  font-size: 11px;
  font-weight: bold;

  padding: 5px 25px;
}

.btn-sm.btn-low {
  padding-top: 2px;
  padding-bottom: 2px;
}

.btn-default {
  padding: 6px 25px;
}

.btn-lg {
  font-size: 16px;
  font-weight: bold;

  padding: 10px 25px;
}

.button.green,
.button.blue,
.btn-success,
.btn-primary {
  color: #fff;

  border-color: transparent;
}

.button.green,
.btn-success {
  background-color: #5bc20e;
}

.button.blue,
.btn-primary {
  background-color: #364d7a;
}

.btn-info,
.label-info {
  background-color: #6084c2;
  border-color: transparent;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: #364d7a;
  border-color: transparent;
}

.btn-busy-wrapper {
  position: absolute;
  background: url(../images/ajax-loader-small.gif) no-repeat 0px 50%;
  width: 22px;
  height: 22px;
  margin-left: -32px;
}

button.navbar-toggle .icon-bar {
  background-color: #364d7a;
}

.form-control:focus {
  /* SM-style border colour and smaller shadow */
  border-color: #5da7e4;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(102, 175, 233, .6);
}

/* For easily centering a single column */
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  text-align: left;
  margin-right: -4px;
}

/* Compatibility with existing components */

div.alert.error-box ul, div.alert.info-box ul, div.alert.warning-box ul {
  list-style-type: none;
  padding: 0;
}

select.error,
textarea.error,
form input[type=email].error,
form input[type=text].error,
form input[type=password].error {
  border-color: #d8412c;
}

form div.field-error {
  color: #d8412c;
  font-size: 13px;
  padding: 5px;
}

form div.hint {
  display: none;
  font-size: 13px;
}

form div.alert.hint {
  margin-top: 5px;
  margin-bottom: 0;
  padding: 5px 12px;
}

form div.hint p {
  margin: 0;
}

body.home div.dialog div.hint {
  right: auto;
  position: relative;
}

div.hint .hint-spinner {
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin-right: 5px;
}

div.hint div.hint-loaded,
div.hint.loading div.hint-loading {
    display: block;
}

div.hint div.hint-loading,
div.hint.loading div.hint-loaded {
    display: none;
}

div.hint div.hint-loading p {
    float: left;
}

form div.hint-positive {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

form div.hint-negative {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

form div.hint-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

form div.help.trailing {
  float: right;
  font-size: 12px;
}

div.row-captcha div.captcha {
  text-align: right;
  font-size: 10px;
  margin-bottom: 15px;
}

body.home div.row-captcha div.captcha #captcha {
  float: left;
}

body.home div.row-captcha div.captcha #btn-refresh-captcha {
  float: right;
  margin: -4px 0 0 0;
  padding: 0 4px;
}


div.password-strength {
    display: block;
    position: relative;
    width: 200px;
}

div.password-strength span.value {
    font-weight: bold;
    color: #000;
}

div.password-strength div.password-meter-bar {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 5px;
    margin: 4px -1px 3px -1px;
    background: #F8F8F8;
    border: 1px solid #606060;
    border-radius: 2px;
}

div.password-strength div.password-meter-bar.good {
    border: 1px solid #397f06;
}

div.password-strength div.password-meter-bar div.password-meter-bar-inner {
    display: block;
    position: relative;
    height: 5px;
}

div.password-strength div.password-meter-bar.bad div.password-meter-bar-inner {
    background-color: #dd0000;
}
div.password-strength div.password-meter-bar.good div.password-meter-bar-inner {
    background-color: #5ecf0b;
}
div.password-strength div.password-meter-bar.decent div.password-meter-bar-inner {
    background-color: #ff9900;
}

#password-meter-label.bad {
    color: #dd0000;
}
#password-meter-label.decent {
    color: #ff6600;
}
#password-meter-label.good {
    color: #4aa408;
}

div.field-error {
  display: none;
}

span.required-icon {
  color: #c33;
  vertical-align: middle;
}

div.field {
  position: relative;
}

div.field span.required-icon {
  position: absolute;
  left: -15px;
  top: 30px;
}

div.field span.required-icon-top {
  top: 3px;
}

iframe.terms-panel {
  width: 100%;
  height: 190px;
  margin-bottom: 0;
}

#dialog-ajax-loader,
img.ajax-loader {
  display: none;
  position: relative;
  width: auto;
}

#dialog-ajax-loader img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  width: 32px;
  height: 32px;
}

#dialog-ajax-loader p {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
}

/* Adjust dialog styling to better fit layout */
body.home div.dialog div.inner {
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

body.home div.dialog div.header {
  background: #e7f3ff;
  color: #6084c2;


  font-weight: inherit;
  font-family: inherit;
  font-size: 16px;

  height: 40px;

  border-left: 4px solid #e7f3ff;
  border-right: 4px solid #e7f3ff;
  border-top: 4px solid #e7f3ff;
}

body.home div.dialog div.content {
  background: transparent;
}

body.home .simplemodal-container > .modalCloseImg {
  margin-top: 2px;
  height: 30px;
  opacity: 0.7;
  background-color: transparent;
}

body.home .simplemodal-container > .modalCloseImg:active,
body.home .simplemodal-container > .modalCloseImg:hover {
  border: 0px;
  opacity: 1;
}

body.home div.dialog div.actions {
  margin-top: 20px;
}

body.home div.actions * {
  margin-right: 4px;
}

body.home div.actions *:last-child {
  margin-right: 0;
}


/* Button compatibility */

/*
We have to duplicate bootstrap's basic button settings in order to quickly
achieve compatibility with existing buttons in e.g. dialogs.

If/when we switch over to a CSS preprocessor, we can cleanly inherit those
styles and feel less dirty.
*/

.button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.button:focus,
.button:active:focus,
.button.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.button:hover,
.button:focus {
  /* Note: difference from bootstrap .btn in that we do not set color
     here for compatibility reasons */
  text-decoration: none;
}
.button:active,
.button.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.button.disabled,
.button[disabled],
fieldset[disabled] .button {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}

/* Button colouring compatibility */
.button.green:hover {
  background-color: #449d44;
  border-color: #398439;
}
.button.blue:hover {
  background-color: #3071a9;
  border-color: #285e8e;
}

.button.white {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.button.white:hover,
.button.white:focus,
.button.white:active,
.button.white.active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.button.red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.button.red:hover,
.button.red:focus,
.button.red:active,
.button.red.active {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}


.link, .link:visited {
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #4278b4;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;

  zoom: 1;
  position: relative;
  overflow: visible;
}

.link:hover {
  color: #6399d5;
  text-decoration: underline;
}


/* Home layout */

body.home {
  background: #fff url('../images/bg-external.png') repeat-x top left;

  font-family: 'Open Sans', sans-serif;

  padding-top: 80px;
}

body.home div.navbar {
  background: #fff url('../images/bg-external.png') repeat-x top left;
  margin: 0;
  padding: 0 20px;
  min-height: 80px;
}

body.home .navbar-brand img {
  height: 50px;
  margin: 0 20px 0 30px;
}

body.home div.navbar #logo {
  margin-left: -35px;
}

body.home div.navbar #switch-language {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 10px;
}

body.home div.navbar button#switch-language.switch-german {
  background: url('../images/flag-german.png') no-repeat 50% 50%;
}
body.home div.navbar button#switch-language.switch-us {
  background: url('../images/flag-english.png') no-repeat 50% 50%;
}

body.home div.navbar .navbar-button-area {
  margin-top: 15px;
}

body.home div.navbar button.navbar-toggle {
  margin-left: 5px;
  margin-right: -8px;
}

body.home div.navbar ul.nav * {
  font-size: 13px;
  color: #364d7a;
}

body.home div.navbar ul.nav li {
  height: 50px;
  margin-right: 10px;
}

body.home div.navbar ul.nav li a {
  padding: 15px 5px 5px 5px;
}

body.home div.navbar ul.nav li a:hover,
body.home div.navbar ul.nav li a:focus
{
  background: transparent;
}

body.home div.navbar ul.nav li.active a,
body.home div.navbar ul.nav li a:hover
{
  border-bottom: 1px solid #364d7a;
}

body.home div.navbar button.navbar-btn {
  margin-right: 20px;
}

body.home div#navbar-logged-in * {
  font-size: 11px;
  color: #364d7a;
}

body.home div#navbar-logged-in a {
  text-decoration: underline;
}

body.home footer {
  padding-top: 20px;
  padding-bottom: 20px;
}

body.home footer * {
  background-color: #fff;
  color: #364d7a;

  font-size: 13px;
  line-height: 32px;
}

body.home footer div.footer-menu {
  text-align: right;
}

body.home footer div.footer-menu ul {
  margin: 0;
}

body.home footer div.copyright {
  display: inline-block;

  margin-right: 24px;
}

body.home footer a.social-link {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: top;

  margin: 4px;
}

body.home footer a.social-link:hover {
  opacity: 0.8;
}

body.home footer a.social-link.fbook {
  background: url('../images/icon-facebook.png') no-repeat 50% 0;
}

body.home footer a.social-link.twitter {
  background: url('../images/icon-twitter.png') no-repeat 50% 0;
}


body.home h2 {
  color: #6084c2;
  font-size: 32px;
  font-weight: normal;
  margin: 40px 0 30px 0;
}

body.home h3 {
  color: #6084c2;
  font-size: 24px;
  font-weight: normal;
  margin: 40px 0 20px 0;
}


/* Home page sections */

body.home .section {
  padding-top: 80px;
  margin-top: -80px;
  position: relative;
}

body.home .section .section-content {
  padding: 80px 0 40px 0;
}

body.home .section-odd .section-content {
  background: #FFFFFF;
}

body.home .section-even .section-content {
  background: #E4EEFC;
}

body.home .section .section-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 10px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #3C4B7A;
}

body.home .section .next-section-link {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 80px;
  z-index: 2;
}

body.home .section .next-section-link a {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 40px;
  overflow: hidden;
  padding-top: 80px;
  background: #FFFFFF url(../images/chevron-down.png) no-repeat 50% 33px;
}

body.home .section-content .block {
  margin-bottom: 40px;
}

body.home .section-content .block > .actions:last-child {
  /* remove redundant margin (the bloick already does this) */
  margin-bottom: 0;
}

body.home .section-content .block .separator {
  height: 1px;
  background: #E0E0E0;
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 50%, rgba(255,255,255,1) 100%);
}

/* Home page section elements */

body.home .section h2 {
  margin-top: 80px;
}

body.home .section h2:first-child {
  margin-top: 0;
}

body.home .section h3:first-child {
  margin-top: 0;
}

body.home .section p:last-child {
  margin-bottom: 0;
}

body.home .section .full-image img {
  width: 100%;
  margin-top: 20px;
}

body.home .section .pop-out-box {
  padding: 30px;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

body.home .section-odd .pop-out-box {
  background: #E4EEFC;
}

body.home .section-even .pop-out-box {
  background: #FFFFFF;
}

body.home .section .pop-out-box p {
  font-size: 13px;
  line-height: 20px;
}

body.home .section .pop-out-box .actions {
  margin: 20px 0 0 0;
}

body.home .section ul.checklist {
  text-align: left;
  margin: 0;
}

body.home .section ul.checklist li {
  position: relative;
  padding: 10px 10px 10px 35px;
}

body.home .section ul.checklist li {
  background: url('../images/tick.png') no-repeat 0 10px;
}

html.backgroundsize body.home .section ul.checklist li {
  background-image: url('../images/tick-hidpi.png');
  background-size: 20px 20px;
}

/* Quotes */

body.home .section .quote-logo {
  text-align: center;
  margin-bottom: 20px;
}

@media (min-width: 992px) {
  /* hack to right-align logo on md sizes and up */
  body.home .section .quote-logo {
    text-align: right;
    margin-bottom: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* hack to make logo smaller on md size */
  body.home .section .quote-logo img {
    height: 63px;
    margin-top: 10px;
  }
}

body.home .section .quote {
  position: relative;
  margin: 10px 0;
}

body.home .section .quote-text {
  font-size: 16px;
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  line-height: 20px;
}

body.home .section .quote-text .footnote {
  color: #3C4B7A;
}

body.home .section .quote-attribution {
  font-size: 13px;
  line-height: 20px;
  color: #606060;
}

body.home .section .quote-videolink a {
  display: block;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  background: url(../images/pcmag-videolink-icon.png) no-repeat left 1px;
  padding-left: 31px;
}

body.home .section .quote-videolink a span {
  border-left: 1px solid #000000;
  padding-left: 0.6em;
  margin-left: 0.6em;
  line-height: 20px;
}

/* Account options */

body.home .account-option {
  padding: 10px;
  background: #F0F6FD;
  border-radius: 4px;
  margin: -10px;
}

@media (max-width: 767px) {
  body.home .account-option {
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
  }
}

body.home .account-option-content {
  padding: 20px;
  background: #E4EEFC;
  border-radius: 4px;
  text-align: center;
}

body.home .account-option-content h3 {
  color: #3C4B7A;
  font-size: 21px;
  font-weight: bold;
  margin: 0 0 20px 0;
  line-height: 30px;
}

body.home .account-option-content h4 {
  color: #6881C2;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  margin: 20px 0;
}

body.home .account-option-content p {
  margin: 20px 0;
  min-height: 60px; /* to force equal height in this 'row' */
}

body.home .account-option-content ul {
  display: block;
  margin: 0;
  padding: 0;
}

body.home .account-option-content ul li {
  display: block;
  margin: 10px 0;
  padding: 0;
  color: #6881C2;
}

body.home .account-options-combined {
  position: relative;
}

body.home .account-options-combined .plus {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  z-index: 2;
  overflow: visible;
}

body.home .account-options-combined .plus span {
  display: block;
  position: absolute;
  top: -35px;
  left: -35px;
  width: 70px;
  height: 70px;
  background: #F0F6FD;
  background: #FFFFFF;
  background: #3C4B7A;
  border: 10px solid #F0F6FD;
  border-radius: 35px;
  color: #3C4B7A;
  color: #FFFFFF;
  line-height: 50px;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
}

body.home .account-options-combined .plus-horizontal {
  position: absolute;
  width: 100%;
  height: 100%;
}

body.home .account-options-combined .plus-vertical {
  width: 100%;
  height: 40px;
}

/* Feature table */

body.home .features {
  margin: 40px 0;
}

body.home .feature {
  margin-top: 40px;
  margin-bottom: 40px;
}

body.home .feature .feature-name {
  color: #6881C2;
  font-size: 17px;
  line-height: 20px;
}

body.home .feature .feature-description {
  color: #000066;
  line-height: 20px;
}

body.home .feature-coffee .feature-name {
  color: #6CA613;
}

body.home .feature-coffee .feature-description {
  color: #2F7700;
}

body.home .feature-coffee .feature-coffee-image {
  display: block;
  position: absolute;
  top: -35px;
  left: -10px;
  width: 90px;
}

/* Feature icons */

body.home .feature-icon {
  width: 45px;
  height: 45px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  z-index: 2;
  position: relative;
  top: -3px;
  margin: 0 -15px;
}

body.home .icon-vault {
  background-image: url('../images/vault.png');
}
body.home .icon-never-read {
  background-image: url('../images/envelope.png');
}
body.home .icon-ssl-pfs {
  background-image: url('../images/lock.png');
}
body.home .icon-private {
  background-image: url('../images/private.png');
}
body.home .icon-pgp {
  background-image: url('../images/circle_ok.png');
}
body.home .icon-offshore {
  background-image: url('../images/badge.png');
}
body.home .icon-imap {
  background-image: url('../images/connection_wifi.png');
}
body.home .icon-alias {
  background-image: url('../images/sampler.png');
}
body.home .icon-price {
  background-image: url('../images/coins.png');
}
body.home .icon-coffee {
  background-image: url('../images/coffee.png');
}

/* Mugshots */

body.home img.mugshot {
  width: 200px;
  border: 10px solid #FFFFFF !important;
  border-radius: 4px;
}

/* Special 'join us' section */

body.home .section-join-us h3 {
  color: #000000;
}

body.home .section-join-us .actions {
  margin: 20px 0 40px 0;
}

/* Privacy slogan bar */

body.home #privacy-bar {
  padding: 15px;
  background-color: #3C4B7A;
  color: #FFFFFF;
  text-align: center;
}

body.home #privacy-bar p {
  margin: 0;
}


/* Centered column styling */

div.centered-main-container {
  padding: 25px 55px;
  border-radius: 5px;
  background-color: #fff;

  max-width: 600px;
  min-width: 450px;
}

div.centered-main-container div.content {
  margin: auto;
}


/* Privacy Policy page */

#privacy-container {
  max-width: 800px;
  padding: 35px 50px;
}

#privacy-container .privacy-section {
  clear: both;
  margin: 20px 0 20px 0;
  overflow: hidden;
}

#privacy-container .privacy-section h3 {
  margin-top: 0;
}

#privacy-container .section-intro {
  margin-bottom: 20px;
}

#privacy-container .section-image {
  margin-bottom: 20px;
}

#privacy-container .image-left .section-image {
  float: left;
  margin-right: 30px;
}

#privacy-container .image-right .section-image {
  float: right;
  margin-left: 30px;
}

#privacy-container .section-content {
  padding: 30px 30px 60px 30px;
  background-color: #f0f0f0;
  clear: both;
  position: relative;
  margin-bottom: 20px;
}

#privacy-container .section-content .read-close {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

#privacy-container .section-content h4 {
  margin: 0 0 20px 0;
}


/* Login page */

#login-container {
  max-width: 600px;
}

#login-container div.content {
  width: 350px;
}

#form-login {
  position: relative;
  margin-top: 40px;
}

#cookie-warning {
  display: none;
}

html.no-cookies #cookie-warning {
  display: block;
}

#form-login #animation-overlay {
  display: none;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;

  background-color: rgba(255, 255, 255, 0.85);

  z-index: 10;
}

#form-login #animation-overlay div.vault-animation {
  top: 22px;

  width: 105px;
  height: 90px;

  margin: auto;

  background-position: 0px 0px;
  background-repeat: no-repeat;

  z-index: 11;
}

#animation-overlay div.vault-animation.spinning {
  background-image: url('../images/vault-spinning-sheet.png');
}

#animation-overlay div.vault-animation.opening {
  background-image: url('../images/vault-opening-sheet.png');
}


/* Logout page */

#logout-container {
  max-width: 600px;
}

#logout-container div.content {
  width: 350px;
}


/* Order pages */

#order-container {
  max-width: 800px;
}

#order-container div.content{
  width: 550px;
}

#order-container.extra-wide {
  max-width: 900px;
}

#order-container.extra-wide div.content {
  width: 650px;
}

#order-container p.lead {
  margin-top: -20px;
  color: #364d7a;
  font-size: 16px;
}

#order-container .purchase-total {
  margin: 20px 0;
}

#order-container .price-amount {
  font-size: 200%;
}

#order-container .price-amount {
  font-weight: bold;
}

#order-container table.cart {
  width: 100%;
  margin-bottom: 30px;
}

#order-container table.cart td {
  padding: 10px;
}

#order-container table.cart td.cart-include-col {
  width: 16px;
}

#order-container table.cart td.cart-number-col {
  text-align: right;
}

#order-container table.cart td.cart-price-col {
  padding-left: 0;
  padding-right: 0;
  width: 130px;
  height: 60px;
  text-align: right;

  position: relative;
}

#order-container table.cart td.cart-price-col div.cart-vat-note {
  font-size: 11px;
  position: absolute;

  right: 0;
  top: 45px;
}

#order-container table.cart td.cart-number-col-total {
  text-align: left;
}

#order-container table.cart tr.cart-product-row > td {
  padding-bottom: 20px;
}

#order-container table.cart tr.cart-total-row > td {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

#order-container table.cart td .cart-item-checked {
  display: block;
  background: url('../images/tick.png') no-repeat;
  height: 22px;
  width: 22px;
  overflow: hidden;
  padding-top: 22px;
  margin: -3px;
}

#order-container dl dt {
  margin-top: 10px;
}

#order-container #order-result-spinner div {
  margin: auto;
  display: block;
  padding: 20px;
}

#order-container #order-license-form .panel-body div.field span.required-icon {
    position: relative;
    top: 0px;
    left: 0px;
}

#order-container #order-license-form .form-group .control-label .label-text {
    font-weight: normal;
}

#order-container #order-account-form div.logout-wrap {
  float: right;
  position: relative;
}

#order-container #order-account-form div.logged-in {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: -20px;
}


#view-order-container {
  min-width: inherit;
  max-width: inherit;
}

#view-order-container p.lead {
  color: #364d7a;
  font-size: 14px;
}

#view-order-container span.order-number {
  font-weight: bold;
}

#view-order-container table.purchased-licenses td,
#view-order-container table.purchased-licenses th {
  padding: 16px;
}

#view-order-container table.purchased-licenses td.action-col {
  text-align: center;
}

#view-order-container div.titled-hr-divider {
  width: 100%;
  text-align: center;
  height: 2px;
  background-color: #ddd;

  margin: 60px 0;
}

#view-order-container div.titled-hr-divider span {
  position: relative;
  top: -0.5em;

  color: #364d7a;
  background-color: #fff;

  font-size: 18px;
  line-height: 18px;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
}

#view-order-container button.btn-multi-line {
  white-space: normal;
}

#view-order-container div.section-what-now div.row {
  margin-bottom: 15px;
}

#view-order-container div.section-what-now div.action-none {
  padding: 0 30px;
  text-align: center;
}

span.subscription-code {
  font: 16px monospace;
}

/* Signup page */

#register-container {
  max-width: 800px;
}

#register-container div.content {
  width: 550px;
}

#trial-success p.trial-username {
    font-size: 16px;
    text-align: center;
}

#form-register div.field span.required-icon {
  position: absolute;
  left: -15px;
  top: 30px;
}

#form-register .multi-invite-code span.separator {
  margin: 2px;
  height: 100%;
}

#form-register .multi-invite-code div.form-group {
  /* Force to inline-block, or Bootstrap will remove it at XS screens */
  display: inline-block;
}

#form-register .multi-invite-code input {
  font-family: monospace;
  letter-spacing: 0.1em;

  width: 100px;
  text-transform: uppercase;
  text-align: center;
}

#form-register div.field.invite-code-wrapper span.required-icon {
  top: 3px;
}

#form-register div.field.terms-of-use div.help label {
  font-weight: normal;
}

#form-register #captcha-wrapper span.required-icon,
#form-register div.field.terms-of-use span.required-icon {
  top: 3px;
}

#form-register #register-busy-notice {
    margin-top: 36px;
}

#form-success h4 {
  margin-top: 30px;
  font-size: 16px;
}


span.icon-print {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
}

span.icon-print {
    background: url(../images/icon-print.png) no-repeat 50% 50%;
}

/* External redirect warning */

#external-redirect-container .destination {
  font-size: 14px;
  padding: 5px 20px;
  margin-right: 20px;
  word-wrap: break-word;
  display: block;
}

#external-redirect-container .destination a {
  display: block;
  padding-left: 20px;
  background: url('../images/icon-external.png') no-repeat left 1px;
}

/* Recovery page */

#recovery-key {
  font-weight: bold;
  font-size: 18px;
  font-family: monospace;
  text-transform: uppercase;
}

/* Upgrade pages */

#upgrade-container {
  max-width: 800px;
}

#upgrade-container div.content {
  width: 600px;
}

#upgrade-container.upgrade-resize-status .running-message {
  padding-left: 24px;
  background: url(../images/ajax-loader-small.gif) no-repeat 0 0;
}

#upgrade-container div.progress-bar {
  background-color: #6084C2;
}

.icon-selected-btn-block {
    margin-left: -40px;
    margin-top: 14px;
    float: left;
}

#upgrade-container .upgrade-form .section-actions {
    /* Adjust width for German texts */
    width: 670px;
}