@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
body {
	background: url(../images/bg.jpg) center top transparent;
}
body:before {
  content: " ";
  box-shadow: 0px 0px 100px black inset;
  width: 100%;
  height: 100%;
  display: block;
  top: 0px;
  left: 0px;
  position: fixed;
}
#login {
  background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(244,244,244,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(244,244,244,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );

  width: 300px;
  height: 230px;
  position: fixed;
  top: 35%;
  left: 50%;
  margin-left: -160px;
  margin-top: -100px;
  color: #333;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}

#login:before {
  display: block;
  position: absolute;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  content: '';
  z-index: 0;
  background: -webkit-gradient(linear,left top,left bottom,from(rgba(0, 0, 0, .7)),to(transparent));
  -webkit-mask-box-image: -webkit-gradient(linear,left top,right top,
    color-stop(0.0,rgba(0,0,0,0.1)),
    color-stop(0.025,rgba(0,0,0,0.8)),
    color-stop(0.5,rgba(0,0,0,0)),
    color-stop(0.975,rgba(0,0,0,0.8)),
    color-stop(1.0,rgba(0,0,0,0.1)));
}


#login:after {
  content: " ";
  display: block;
  background: rgba(0,0,0,0.1);
  position: absolute;
  left: 35px;
  right: 35px;
  height: 30px;
  top: -15px;
  /*margin-left: 240px; */
}

#login form {
  width: 70%;
  margin: 30px auto;
  text-align: center;
}

#login form h1 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
#login form h1:before {
  display: inline-block;
  content: " ";
  margin-right: 15px;
  width: 60px;
  height: 6px;
  border-top: 1px solid #333;
}
#login form h1:after {
  display: inline-block;
  content: " ";
  margin-left: 15px;
  width: 60px;
  height: 6px;
  border-top: 1px solid #333;
}

#login form input {
  width: 100%;
  height: 25px;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  margin-bottom: 10px;
  text-indent: 10px;
  outline: none;
  -webkit-transition: box-shadow 1s;
  -moz-transition: box-shadow 1s;
  -o-transition: box-shadow 1s;
  transition: box-shadow 1s;
}
#login form input:focus {
  box-shadow: 0px 0px 3px 1px #a2d7fc;
}

#login form button {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  border-radius: 5px;
  background: rgb(224,243,250);
background: -moz-linear-gradient(top,  rgba(224,243,250,1) 0%, rgba(216,240,252,1) 50%, rgba(184,226,246,1) 51%, rgba(182,223,253,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,243,250,1)), color-stop(50%,rgba(216,240,252,1)), color-stop(51%,rgba(184,226,246,1)), color-stop(100%,rgba(182,223,253,1)));
background: -webkit-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
background: -o-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
background: -ms-linear-gradient(top,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
background: linear-gradient(to bottom,  rgba(224,243,250,1) 0%,rgba(216,240,252,1) 50%,rgba(184,226,246,1) 51%,rgba(182,223,253,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 );

  border: 1px solid #b6dffd;
  color: black;
  text-transform: uppercase;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.7);
  text-shadow: 0px 1px 1px white;
  font-size: 12px;
}

#login form button:hover {
  text-shadow: 0px 0px 1px gray;
}
#login form button:active {
 background: rgb(162,215,252);
background: -moz-linear-gradient(top,  rgba(162,215,252,1) 0%, rgba(164,219,244,1) 49%, rgba(194,231,250,1) 50%, rgba(203,235,247,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(162,215,252,1)), color-stop(49%,rgba(164,219,244,1)), color-stop(50%,rgba(194,231,250,1)), color-stop(100%,rgba(203,235,247,1)));
background: -webkit-linear-gradient(top,  rgba(162,215,252,1) 0%,rgba(164,219,244,1) 49%,rgba(194,231,250,1) 50%,rgba(203,235,247,1) 100%);
background: -o-linear-gradient(top,  rgba(162,215,252,1) 0%,rgba(164,219,244,1) 49%,rgba(194,231,250,1) 50%,rgba(203,235,247,1) 100%);
background: -ms-linear-gradient(top,  rgba(162,215,252,1) 0%,rgba(164,219,244,1) 49%,rgba(194,231,250,1) 50%,rgba(203,235,247,1) 100%);
background: linear-gradient(to bottom,  rgba(162,215,252,1) 0%,rgba(164,219,244,1) 49%,rgba(194,231,250,1) 50%,rgba(203,235,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2d7fc', endColorstr='#cbebf7',GradientType=0 );
  margin-top: 10px;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.7) inset;
}