/* Page background */
body.login{
  background:#fff !important;
}

/* Optional: hide WP footer links */
#nav{
  display:none;
}

/* Center column */
#login{
  width:360px;
  padding:42px 0 0;
  margin:0 auto;
  position:relative;
}

/* Replace WordPress logo with your Manipulatives logo */
#login h1 a{
  background-image:url('../images/logo_manipulatives.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  width:100%;
  height:42px;
  margin:0 auto 10px;
}

/* THIS is the “big illustration above the login box” */
#login::before{
  content:"";
  display:block;
  width:100%;
  height:200px;                 /* adjust to match your art */
  margin:0 auto 10px;
  background-image:url('/shared_manipulatives/images/manipulatives_icon.gif');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* The login “card” */
.login form{
  margin-top:0;
  padding:22px 22px 18px;
  background:#fff;
  border:2px solid #c3c4c7;     /* match WP-ish but thicker */
  border-radius:8px;
  box-shadow:none;
}

/* Labels */
.login label{
  font-size:13px;
}

/* Inputs */
.login input[type="text"],
.login input[type="password"]{
  font-size:16px;
  padding:10px 12px;
  border-radius:6px;
}

/* Button row feel */
.wp-core-ui .button-primary{
  background:#2271b1;           /* WP blue */
  border-color:#2271b1;
  box-shadow:none;
  text-shadow:none;
  border-radius:4px;
  padding:6px 14px;
}
.wp-core-ui .button-primary:hover{
  background:#1e66a0;
  border-color:#1e66a0;
}

/* Tighten spacing a bit */
.login .forgetmenot{
  margin-top:6px;
}
.login .submit{
  margin-top:10px;
}

/* Mobile */
@media (max-width:420px){
  #login{ width:92vw; }
  #login::before{ height:180px; }
}