body {
  margin: 0;
  padding: 0 0 50px 0;
  font-family: Georgia;
  font-size: 14px;
  /*background: url("../img/bg.jpg") no-repeat;*/
  background-size: cover;
  position: relative;
}

p {
  font-family: Verdana;
}

.wrapper {    
	margin: 50px auto;
}

.header {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}

.header hr {
  max-width: 500px;
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(2, 1, 43, 0.6);
  color: #ffffff;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}

#demo-form-ouput {
  width: 100%;
  height: 100px;
  border: 2px solid #dddddd;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

h1.page-title {
  margin: 30px auto;
}

.form-signin {
  max-width: 420px;
  padding: 30px 38px 66px;
  background-color: #eee;
  border-radius: 5px;
  border: 2px solid rgba(0,0,0,0.1);
  -webkit-box-shadow: 9px 10px 17px 1px rgba(0,0,0,0.37);
  -moz-box-shadow: 9px 10px 17px 1px rgba(0,0,0,0.37);
  box-shadow: 9px 10px 17px 1px rgba(0,0,0,0.37);
}

.demo-source {
  margin-top: 20px;
  padding: 30px;
}

textarea {
  font-family: Courier;
  margin-top: 10px;
}

.form-signin-heading {
  text-align: center;
  margin-bottom: 30px;
}

.form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
}

input[type="text"], input[type="password"] {
  margin-bottom: 20px;
}

.colorgraph {
  height: 7px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}