#Register_login_div_bg{
  position:fixed;
  background-color:lightgrey;
  height:100%;
  width:100%;
  display:none;
  top:0;
  opacity:0.5;
}
#Register_login_div_close
{
  cursor:pointer;
  position:absolute;
  display:none;
  width:22px;
  height:22px;
  left:89%;
  top:	8.5%;
  border:2px solid black;
  border-radius:15px;
  background:url('logos/close.png');
  background-size: 85% 85%;
  background-repeat: no-repeat;
  background-position: center; 
  z-index:2;
}
#Register_login_div
{
  position:absolute;
  width:80%;
  height:80%;
  left:10%;
  top:10%;
  display:none;
  overflow:auto;
  background-size: 100% 100%;
  border:1px solid gray;
  border-radius:10px;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  box-shadow:0px 0px 15px black;
}
#Register_login_div > img
{
  position:absolute;
  padding:80px;
  width:300px;
  height:280px;
  top:50%;
  transform:translate(0%, -50%);
}
#Register_login_div_tab
{
  position:relative;
  width:100%;
  height:8%;
  text-align:center;
}

#login{
  font-family: "Comic Sans MS", cursive, sans-serif;
  opacity:1;
  font-size:130%;
  cursor:pointer;
  background-color:red;
  color:white;
  
  width:50%;
  height:100%;
  position:relative;
  left:50%;
  
  padding-top:1px;
  border-top-right-radius:9px;
  box-shadow:0px 0px 20px 0px black;
}
#login p{
  position:absolute;
  padding:0px;
  margin:0px;
  left:50%;
  top:50%;
  	transform:translate(-50%, -50%);
}
#register{
  cursor:pointer;
  opacity:0.8;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size:100%;
  background-color:red;
  color:white;
  
  position:absolute;
  width:50%;
  height:100%;
  
  padding-top:1px;
  border-top-left-radius:9px;
  box-shadow:0px 0px 0px 0px red;
}
#register p{
  position:absolute;
  padding:0px;
  margin:0px;
  left:50%;
  top:50%;
  	transform:translate(-50%, -50%);
}

#login_form
{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(0%, -50%);
}
#login_form table
{
  margin-top:8%;
}
#Register_form
{
  position:absolute;
  left:50%;
  display:none;
  top:50%;
  transform:translate(0%, -50%);
}
#Register_form table
{
  margin-top:8%;
}

#login_form input
{
  background-color:transparent;
  border:1px solid white;
  width:380px;
  height:40px;
  border-radius:5px;
  font-size: 110%;
  text-indent:10px;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}
#login_form button
{
  background-color:DodgerBlue;
  border:0px solid white;
  width:170px;
  height:35px;
  border-radius:5px;
  font-size: 100%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}
#Register_form input
{
  background-color:transparent;
  border:1px solid white;
  width:380px;
  height:40px;
  border-radius:5px;
  font-size: 110%;
  text-indent:10px;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}
::-webkit-input-placeholder 
{ 
    color: white; 
}
#Register_form button
{
  background-color:DodgerBlue;
  border:0px solid white;
  width:170px;
  height:35px;
  border-radius:5px;
  font-size: 100%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}

#username_help{
  position:relative;
  width:16px;
  height:16px;
  border:1px solid white;
  border-radius:20px;
  background-color:black;
  background-image:url('logos/help.png'); 
  background-size: 80% 80%;
  background-repeat:no-repeat;
  background-position: center;
}
#username_help_comment
{
  position:relative;
  width:250px;
  height:110px;
  padding:10px;
  border-radius:2px;
  background-color:white;
  font-size: 78%;
  box-shadow:0px 0px 5px 0px black;
  color:black;
  font-family:"Comic Sans MS", cursive, sans-serif;
}
#username_help_comment_arrow {
  position:relative;
  width: 0; 
  height: 0;
  left:-2px; 
  top:-45px;  
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid white;
}
#username_help_comment_table
{
  position:absolute;
  display:none;
}

a:link{
  text-decoration:none;
}
a:visited{
  color:white;
  text-decoration:none;
}
a:hover{
  color:white;
  text-decoration:underline;
}

#l_username_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#l_username_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}
#l_password_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#l_password_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}


#name_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#name_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}
#r_username_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#r_username_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}
#r_password_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#r_password_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}
#c_password_error {
  position:absolute;
  width: 150px; 
  height: 30px; 
  left:-155px;
  margin-top:-1px;
  background-color:red;
  box-shadow:0px 0px 5px 0px black;
  padding:7px;
  border-radius:2px;
  font-size: 70%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  display:none;
}
#c_password_error_arrow {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:8px;
  margin-top:10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid red;
  display:none;
}


@media screen and (max-width:1150px){
	#Register_login_div_close{
	  left:94%;
	  top:	3%;
	}
	#Register_login_div{
	  width:90%;
	  height:90%;
	  left:5%;
	  top:5%;
	}
	#Register_login_div_tab{
		height:16%;
	}
	#register{
		width:100%;
		height:50%;
		border-top-right-radius:9px;
		left:0;
		position:relative;
	}
	#login{
		width:100%;
		height:50%;
		border-top-right-radius:0px;
		left:0;
		position:relative;
	}
	#Register_login_div img{
		width:150px;
		width:150px;
		left:50%;
  top:50%;
  transform:translate(-50%, -50%);
	}
	#login_form{
		left:50%;
  top:50%;
  transform:translate(-50%, -50%);
	}
	#register_form{
		left:50%;
        top:50%;
        transform:translate(-50%, -50%);
	}
#Register_form table
{
  margin-top:12%;
}
}
@media screen and (max-width:750px){
	#Register_login_div_close{
	  left:93%;
	  top:	3%;
	}
	#Register_login_div img{
        width:150px;
		height:150px;
		left:50%;
  top:50%;
  transform:translate(-50%, -50%);
	}
}
@media screen and (max-width:700px){
	#login_form, #register_form{
		left:0px;
		width:100%;
        top:50%;
        transform:translate(0%, -50%);
	}
	#login_form table, #register_form table{
		width:100%;
	}
	#login_form input, #register_form input
	{
		width:100%;
	}
	#Register_login_div img{
        width:150px;
		height:150px;
		left:50%;
  top:50%;
  transform:translate(-50%, -50%);
	}
	#register, #login{
		height:60%;
	}
#Register_form table
{
  margin-top:20%;
}
#Register_login_div
{
  height:600px;
}
}
@media screen and (max-width:400px){
	#Register_login_div_close{
	  left:90%;
	  top:	3%;
	}
	#Register_login_div img{
        width:100px;
		height:100px;
		left:50%;
  top:50%;
  transform:translate(-50%, -50%);
	}
#Register_form table
{
  margin-top:35%;
}
	#login_form input, #register_form input
	{
		height:25px;
	}
#login_form button,#register_form button
{
    height:25px;
}
}
@media screen and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){
#login_form input, #register_form input
{
	height:25px;
}
#login_form button,#register_form button
{
    height:25px;
}
}