@import url(http://fonts.googleapis.com/css?family=Trocchi);

body {
  background-color: #ffffff;
  margin: 0;}

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




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;}


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; }#
  




.topnav {
  height:80px;  
  width: 100%;
  background-color:#222930;
  overflow: hidden;
  
}

.topnav a {
  margin-top: 25px;
  transition: 0.7s;
}

.topnav ul {
  list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
}

.topnav li {
   display:inline;
}

.topnav li a {
   padding:5px 10px;
   color: #E9E9E9;
   font-size: 25px;
   text-decoration: none;
   display: inline-block;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: white;
  color: black;
  transition: 0.7s;
  
}

/* Add a color to the active/current link */


.topnav a.current {
    background-color: #4EB1BA;
	color: #df3e23;
	background-size: auto;
	transition: 0.7s;
}