<div id="spacer"></div>


<div id="login">
  <h1 align="center">Login</h1>
  <div id="loginbox" class="box">
    <i id="icon" class="fa fa-power-off"></i>
    <div id="form-container">
    <input class="text" id="logintext" type="text" placeholder="Email" size="27"><i id="logintext" class="clear icon fa fa-times"></i>
    <br>
    <br>
    <input class="text" id="loginpass" type="password" placeholder="Password" size="27"><i id="loginpass" class="clear icon fa fa-times"></i>
    </div>
  </div>
</div>
  
  


<div id="login">  
  <h1 align="center">Sign up</h1>
  <div id="box" class="box">
    <i id="icon" class="fa fa-plus"></i>
    <div id="form-container">
      <input class="text" id="signuptext" type="text" placeholder="Email" size="27"><i id="signuptext" class="icon fa fa-times"></i>
      <br><br>
      <input class="text" id="signuppass" type="password" placeholder="Password" size="27"><i id="signuptext" class="icon fa fa-times"></i>
    </div>
  </div>
</div>

* {
  font-family:Helvetica;
  font-weight:100
}

body{
  background:url("https://subtlepatterns.com/patterns/dark_fish_skin.png");
  color:white;
}
#spacer{
  height:100px;
}
header{
  height:50px;
}

h1{
  vertical-align:top;
  line-height:50px;
}
.box{
  border-radius:25px;
  background:#888;
  padding:5px 0px;
  padding-left:16px;
  width:28px;
  height:35px;
  margin:auto;
  overflow:hidden;
  white-space: nowrap;
  transition:all .2s ease;
  border:3px solid #8BF;
}
.text{
  margin-left:15px;
  margin-top:3px;
  background:#37D;
  color:white;
  border:none;
  outline:transparent;
  padding:5px;
  font-size:12pt;
  
}

#form-container, #icon {
  display:inline-block;
  vertical-align:top;
}
#icon {
  margin-top:10px;
}

.showbox {
  background:#39F;
  width:305px;
  transition-delay:0s;
}

.showpass {
  height:88px;
}

.icon {
  margin-left:-25px;
  color:#15B;
}
.icon:hover {
  margin-left:-25px;
  color:#69F;
}

///////////// LOGIN ////////////////

$("#loginbox").mouseenter( function () {
   $("#loginbox").addClass("showbox");
});

$("#loginbox").mouseleave( function () {
  
  if (!$("#logintext,#loginpass").is(":focus")) {
   $("#loginbox").removeClass("showbox showpass");
  }
  
});

//$("#logintext,#loginpass").focusout( function () {
//   $("#loginbox").removeClass("showbox showpass");
//});

$("#logintext, #loginpass").focusin( function () {
   $("#loginbox").addClass("showbox showpass");
});

///////////// SIGNUP ////////////////

$("#box").mouseenter( function () {
   $("#box").addClass("showbox");
});

$("#box").mouseleave( function () {
  
  if (!$("#signuptext, #signuppass").is(":focus")) {
   $("#box").removeClass("showbox showpass");
   }
  
});

//$("#signuptext, #signuppass").focusout( function () {
//   $("#box").removeClass("showbox showpass");
//});


$("#signuptext, #signuppass").focusin( function () {
   $("#box").addClass("showbox showpass");
});

$("i.icon").mousedown(function() {
  var id = $(this).attr("id");
   $("input#"+id).val("");
});