materials/javascript-and-jquery-book-code/c13/css/c13.css
@import url(http://fonts.googleapis.com/css?family=Trocchi);

body {
  background-color: #90908c;
  margin: 0;}

form {
  font-family: trocchi, georgia, times, serif;
  max-width: 1000px;
  margin: 0 auto 0 auto;}

.one-third, .two-thirds {
  background-color: #f8584a;
  border: 12px solid #fff;
  float: left;
  padding: 10px;
  margin: 10px;
  color: #fff;
  overflow: hidden;}

.one-third {width: 268px;}
.two-thirds {width: 530px;}
.one-third fieldset {border: none; margin: 0.5em;}
.two-thirds fieldset {border: none; margin: 2.5em;}

.container .one-third, .container .two-thirds {height: 35em;}
.login .one-third, .login .two-thirds { height: 20em;}

#logo {
  width: 220px;
  height: 220px;
  margin: 1em auto 2em auto;
  display: block;}

h2 {
  font-weight: normal;
  margin: 0;}

p {
  font-size: 0.8em;
  line-height: 1.6em;
  margin: 1em;}

.welcome {text-align: center;}
p.intro {margin: 2em;}


/* FORM STYLES */
legend {
  font-size: 160%;
  position: relative;
  color: #fff;}
.one-third legend { top: -0.2em; left: -0.6em;}
.two-thirds legend { top: -1em; left: -1em;}

label {width: 100%; display: block;}
label[for="parentsConsent"], label[for="showPwd"], label[for="search"], label[for="print"], label[for="other"], label[for="parents-consent"] {display: inline;}
label[for="equipmentType"], label[for="model"] {display: inline-block; width: 4em;}

input {
  border: none;
  padding: 8px;
  line-height: 1.2em; 
  margin-bottom: 1.4em;
  font-size: 1.2em;}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="color"], input[type="number"] {width: 90%;}

input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="color"], #bio {
  box-shadow: inset 0 2px 2px #000;
  outline: 0;}

input[type="submit"], #submit {
  background-color: #000;
  border-radius: 5px;
  color: #fff;
  display: block;
  float: right;
  font-family: trocchi, georgia, times, serif;
  font-size: 1.2em;
  margin-right: 1.4em;}

input[type="submit"]:hover, #submit:hover {
  background-color: #666;
  cursor: pointer;
  text-shadow: 2px 2px 2px #000;
  box-shadow: inset 0 2px 2px #000;}

.register input[type="submit"] {margin: 1em 0 0 0;}

#submit.disabled {background-color: #999;}
#submit.disabled:hover {
  background-color: #999;
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;}

textarea {
  width: 100%;
  height: 5em;
  clear: left;
  border: none;}

.req {
  color: #000;
  font-size: 0.6em;
  position: relative;
  top: -0.5em;}

.hide {display: none;}
.fail { background-image: url("../img/cross.png"); }
.pass { background-image: url("../img/tick.png"); }
.fail, .pass {
  background-repeat: no-repeat; 
  background-position: right center;}


span.error {
  padding-top: 1px;
  margin-top: -1.4em;
  margin-bottom: 1.4em;
  display: block;
  padding-left: 20px;
  color: #242424;
  background-image: url("../img/icon-warning.png");
  background-position: left 3px;
  background-repeat: no-repeat;}

textarea + span.error, #bio-count {margin: 0;}

/* TEXTAREA */
#bio-count.warn b, #bio-count.error b {
  border-radius: 16px;
  padding-top: 4px;
  width: 32px;
  height: 28px;
  display: inline-block;
  font-weight: normal;
  text-align: center;}
.warn b {color: #ffff66; background-color: #333;}
.error b {color: #ff9966; background-color: #000;}


/* needed to override default style sheet of number polyfill */
div.number-spin-btn-container {
  margin-bottom: 1.6em !important; }