login.css

body {
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
}

* {
  background-repeat: no-repeat;
  color: inherit;
  font: inherit;
  text-shadow: inherit;
  -webkit-font-smoothing: inherit;
}

textarea {
  resize: none;
}

a {
  text-decoration: none;
}

.tab {
  cursor: pointer;
  display: inline-block;
  height: 26px;
  vertical-align: top;
}
.tab.pressed {
  background-image: url(../images/clip_result_arrow.png);
  background-size: 16px 8px;
}

.pinch {
  background-color: #2F373D;
  border-top: 1px solid #272D33;
  border-bottom: 1px solid #272D33;
  margin-top: -1px;
}

input[type=radio], input[type=checkbox] {
  display: none;
}
label {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
}
input[type=radio] + label:before {
  background-image: url(../images/radio.png);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  content: "";
  display: inline-block;
  height: 16px;
  width: 16px;
}
input[type=radio]:checked + label:before {
  background-image: url(../images/radio-dot.png), url(../images/radio.png);
  background-position: 5px, 0;
  background-size: 6px 7px, 16px 16px;
}
input[type=radio] + label {
  height: 16px;
  line-height: 16px;
}

input[type=checkbox] + label:before {
  background-color: #737F89;
  border: 1px solid #232A31;
  border-radius: 4px;
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
}
input[type=checkbox]:checked + label:before {
  background-image: url(../images/checkmark-big.png);
  background-position: 50% 5px;
  background-repeat: no-repeat;
  background-size: 14px 12px;
}
input[type=checkbox] + label {
  height: 22px;
  line-height: 22px;
}

select {
  background-color: white;
  background-image: url(../images/icon_down_padded.png);
  background-position: -webkit-calc(100% - 10px) 50%;
  background-size: 8px 5px;
  border: 1px solid #232A30;
  border-radius: 3px;
  color: #3A4045;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 24px;
  margin: 0;
  outline: none;
  padding: 0 28px 0 10px;
  text-shadow: none;
  -webkit-appearance: button;
}

@font-face {
  font-family: "CaeciliaBold";
  src: url(../fonts/caecilialtstd-bold-webfont.woff) format('woff');
}
@font-face {
  font-family: "CaeciliaRoman";
  src: url(../fonts/caecilialtstd-roman-webfont.woff) format('woff');
}
@font-face {
  font-family: "GothamBook";
  src: url(../fonts/GothamSSm-Book.otf) format('opentype');
}
@font-face {
  font-family: "GothamMedium";
  src: url(GothamSSm-Medium.otf) format('opentype');
}
@font-face {
  font-family: "GothamBold";
  src: url(GothamSSm-Bold.otf) format('opentype');
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  .tab.pressed {
    background-image: url(../images/[email protected]);
  }
  input[type=radio] + label:before {
    background-image: url(../images/[email protected]);
  }
  input[type=radio]:checked + label:before {
    background-image: url(../images/[email protected]), url(../images/[email protected]);
  }
  input[type=checkbox]:checked + label:before {
    background-image: url(../images/[email protected]);
  }
  select {
    background-image: url(../images/[email protected]);
  }
}

a {
  text-decoration: none;
}

body {
  border: 1px solid #21262C;
  border-radius: 5px;
  margin: 2px;
}

#main {
  background-color: #2F373D;
  border-radius: 4px;
  padding: 22px 28px;
}

#logo {
  background-image: url(clipboard.png), url(evernote_web_clipper.png);
  background-position: -10px -10px, 48px 1px;
  background-size: 58px 58px, 134px 36px;
  cursor: pointer;
  height: 58px;
}
#logo.china {
  background-image: url(clipboard.png), url(../../images/evernote_web_clipper_china.png);
  background-position: -10px -10px, 43px 1px;
  background-size: 58px 58px, 48px 47px;
}

#close {
  background-image: url(close_login.png);
  background-size: 8px 8px;
  cursor: pointer;
  height: 8px;
  outline: none;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 8px;
}

.inputContainer {
  position: relative;
}
input {
  background-color: #EAF0F5;
  border: 1px solid #21262C;
  border-radius: 3px;
  color: #3A4045;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 36px;
  margin-bottom: 16px;
  max-width: 236px;
  outline: none;
  padding: 10px;
  text-shadow: none;
  width: 236px;
}
input::-webkit-input-placeholder {
  color: #8E98A1;
}
input+.errorHoverRegion {
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 11px;
  top: 10px;
  width: 16px;
}
input.error {
  background-image: url(../../images/auth_error.png);
  background-position: -webkit-calc(100% - 12px) 50%;
  background-size: 16px 16px;
}
input.error+.errorHoverRegion {
  pointer-events: all;
}
input.error+.errorHoverRegion:hover:before {
  background-color: #ED4C5B;
  border: 1px solid white;
  border-radius: 3px;
  bottom: 19px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  content: attr(data-error);
  color: white;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 20px;
  padding: 0 5px;
  position: absolute;
  right: -5px;
  text-shadow: none;
  white-space: nowrap;
}
input.error+.errorHoverRegion:hover:after {
  background-image: url(../../images/auth_error_arrow.png);
  background-position: 0 0;
  background-size: 14px 7px;
  content: "";
  height: 7px;
  position: absolute;
  right: 1px;
  top: -4px;
  width: 14px;
}
input.valid {
  background-image: url(../../images/checkmark_green.png);
  background-position: -webkit-calc(100% - 12px) 50%;
  background-size: 15px 13px;
}

.button {
  border-radius: 3px;
  color: white;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  margin-bottom: 18px;
  overflow: hidden;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url(../../images/[email protected]), url(../../images/[email protected]);
  }
  #logo.china {
    background-image: url(../../images/[email protected]), url(../../images/[email protected]);
  }
  #close {
    background-image: url(../../images/[email protected]);
  }
  input.error {
    background-image: url(../../images/[email protected]);
  }
  input.error+.errorHoverRegion:hover:after {
    background-image: url(../../images/[email protected]);
  }
  input.valid {
    background-image: url(../../images/[email protected]);
  }
}

#switcher {
  color: #C2CFD7;
  cursor: pointer;
  display: none;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  margin-bottom: 14px;
  outline: none;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#switcher.visible {
  display: inline-block;
}
#switcher:after {
  background-image: url(../../images/forward.png);
  background-size: 16px 16px;
  content: "";
  height: 16px;
  position: absolute;
  right: -21px;
  top: 1px;
  width: 16px;
}

#globalError {
  background-color: #262C32;
  background-image: url(error-clip.png);
  background-position: 28px 5px;
  background-size: 16px 16px;
  border-bottom: 1px solid #21262C;
  border-top: 1px solid #21262C;
  color: white;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 10px;
  margin: 0 0 15px -28px;
  overflow: hidden;
  padding: 8px 28px 8px 49px;
  width: -webkit-calc(100% - 21px);
}
#globalError:empty {
  display: none;
}
#globalError button {
  color: black;
  float: right;
  font-size: 12px;
  padding: 3px 6px;
}

input {
  max-width: 251px;
  width: 251px;
}

#username {
  margin-bottom: 18px;
}

#simsearch .checkbox, #simsearch .label {
  display: inline-block;
  vertical-align: top;
}
#simsearch .checkbox {
  background-color: #737F89;
  border: 1px solid #21262C;
  border-radius: 3px;
  cursor: pointer;
  height: 16px;
  outline: none;
  width: 16px;
}
#simsearch .checkbox.checked {
  background-image: url(../../images/checkmark.png);
  background-position: 2px 4px;
  background-size: 12px 10px;
}
#simsearch .label {
  color: #C2CFD7;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  padding-bottom: 26px;
  padding-left: 3px;
  padding-top: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: -webkit-calc(100% - 25px);
}
#simsearch .label .help {
  background-image: url(../../images/question-mark.png);
  background-size: 15px 15px;
  cursor: pointer;
  display: inline-block;
  height: 15px;
  margin-left: 5px;
  position: relative;
  vertical-align: middle;
  width: 15px;
}
#simsearch .label .help:hover:before {
  background-color: #FAFAFA;
  border: 1px solid #21262C;
  border-radius: 3px;
  bottom: 24px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  color: #3A4045;
  content: attr(data-tooltip);
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 10px;
  left: -81px;
  line-height: 13px;
  padding: 5px 7px;
  position: absolute;
  text-shadow: none;
  width: 168px;
}
#simsearch .label .help:hover:after {
  background-image: url(../../images/login_simsearch_tooltip_arrow.png);
  background-repeat: no-repeat;
  background-size: 30px 15px;
  bottom: 10px;
  content: "";
  height: 15px;
  left: -8px;
  position: absolute;
  width: 30px;
}

#login {
  background-color: #26B064;
  box-shadow: inset 0 1px #33CC78;
  font-family: "GothamBold", Helvetica, Arial, sans-serif;
  font-size: 16px;
  outline: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#reg {
  background-color: #209BC9;
  box-shadow: inset 0 1px #48C0ED;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 13px;
  outline: none;
}
#forgotPw {
  color: #C2CFD7;
  cursor: pointer;
  font-family: "GothamMedium", Helvetica, Arial, sans-serif;
  font-size: 11px;
  height: 14px;
  line-height: 14px;
  outline: none;
  overflow: hidden;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  #switcher:after {
    background-image: url(../../images/[email protected]);
  }
  #globalError {
    background-image: url(../../images/[email protected]);
  }
  #simsearch .checkbox.checked {
    background-image: url(../../images/[email protected]);
  }
  #simsearch .label .help {
    background-image: url(../../images/[email protected]);
  }
  #simsearch .label .help:hover:after {
    background-image: url(../../images/[email protected]);
  }
}