@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

*{margin:0;padding:0;}

body{
  background:#afafaf;
  font-family:'Open Sans',sans-serif; 
  text-align: center;
}

#login{
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}

#login h1{
  background:#fff;
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  color:#fff;
}

div.form{
  background:#0F2A77;
  padding:6% 4%;
}

div.form.not_allowed{
  color:#fff;
}

div.form a{
  color:#fff;
}

input[type="text"],input[type="password"]{
  width:92%;
  background:#fff;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}

button{
  width:100%;
  background:#F7BB18; /* Amarillo */
  border:0;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  color:#0F2A77; /* Azul */
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

button:hover{
  -moz-box-shadow: inset 0 0 10px #093C66; /* Azul Claro */
  -webkit-box-shadow: inset 0 0 10px #093C66;
  box-shadow: inset 0 0 10px #093C66;
}

#username{
  font-size:small; 
  margin-top:4%;
  color:#F7BB18;
}               

#txtPassword,#username{
  margin-bottom:4%;
}

#legend{
  margin-top: 10px;
  font-size: small;
  color:#fff;
  width: 100%;
}

#powered{
  margin-top: 10px;
  font-size: x-small;
  width: 100%;
}

@media only screen and (max-width: 400px) {
  #login{
    width:90%;
  }
}