/*
Tutorial Name: Create a Flat Login/Sign up Page with Validator jQuery Plugin jQuery Plugin
Author: Samuel Dalusung
*/

/*= GENERAL STYLES
--------------------------------------------------------*/

body {
  background: url('../img/vv.jpg');
  background-size: cover;
  height: 100%;
  color: white;
/*  font-family: 'Segoe Script';*/
  font-family: 'Segoe Script';
}

@font-face {font-family:'Segoe Script';src: url('Segoe_Script.ttf');}

.container{ margin: 0 auto;

      border: medium none;
    top: 00px;
    padding: 25px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    display: none;
    right: 40%;
    overflow: hidden;
    position: fixed;
    text-align: center;
    text-decoration: none;
    z-index: 999;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;


}



/*= TABS
--------------------------------------------------------*/

.flat-design-form{
  background: #f58020;
  margin: auto auto;
  width: 400px;
  height: auto;
  position: relative;
  font-family: 'Segoe Script';
  -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.75);
	
}
#login {
    padding-bottom: 20px;
}
#logout {
    padding-bottom: 20px;
}

#register {
    background: #0DA1FF;
    padding-bottom: 20px;
}

#login-tab {
    background: #f58020;
}
#logout-tab {
    background: #f58020;
}

#register-tab {
    background: #0DA1FF;
}

span#login_icon {
    width: 16px;
    height: 16px;
    left: 8px;
    position: absolute;
    background: url(../img/login.png)no-repeat;
    display: block;
}

span#signup_icon {
    width: 16px;
    height: 16px;
    left: 110px;
    position: absolute;
    background: url(../img/sign-in.png)no-repeat;
    display: block;
}


.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 6px;
  
}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
    width: 200px;
}
.tabs a {

  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 18px;
  padding: 15px 20px 15px 20px;
   text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  
}






/*= FORMS
--------------------------------------------------------*/

.form-display {
  padding: 0 20px;
  position: relative;
}

.form-display h1 {
  font-size: 30px;
  padding: 10px 0 20px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

form {
  padding-right: 20px !important;
}


form input[type=text],
form input[type=password], 
form input[type=username],
form input[type=userfamily],
form input[type=classroom]{
  width: 100%;
  outline: none;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #545454;
  
   font-family: 'Segoe Script';
  font-size: 17px;
}


.show {
  display: block;
}
.hide {
  display: none;
}



/*= BUTTON
--------------------------------------------------------*/


.button-login{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-login:hover {
  background: #1B78B2;

}


.button-logout{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-logout:hover {
  background: #1B78B2;

}



.closeLogin{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.closeLogin:hover {
  background: #1B78B2;

}


.closeregister{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.closeregister:hover {
  background: #1B78B2;

}


.toTop{
 position:relative; 
}
.llog {
    position:fixed;
    right:0px;
    bottom:0px;
		z-index:111;
}
.llog{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.llog:hover {
  background: #1B78B2;

}

.controlznanij {
    position:fixed;
    right:0px;
    bottom:41px;
		z-index:111;
}
.controlznanij{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.controlznanij:hover {
  background: #1B78B2;

}


.tvorcheskiezadaniya {
    position:fixed;
    right:0px;
    bottom:93px;
		z-index:111;
}
.tvorcheskiezadaniya{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.tvorcheskiezadaniya:hover {
  background: #1B78B2;

}

.lhome {
    position:fixed;
    right:0px;
    top:8px;
		z-index:111;
}
.lhome{
  z-index: 9999;
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.lhome:hover {
  background: #1B78B2;

}

.start {
    position:fffixed;
    left: 50%;
		z-index:111;
}
.start{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.start:hover {
  background: #1B78B2;

}




.start:hover {
  background: #1B78B2;

}

.slovar {
    position:fixed;
    right:0px;
    bottom:143px;
		z-index:111;
}
.slovar{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.slovar:hover {
  background: #1B78B2;

}


.history {
    position:fixed;
    right:0px;
    bottom:193px;
		z-index:111;
}
.history{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.history:hover {
  background: #1B78B2;

}

.eto_interesno1 {
    position:fixed;
    right:220px;
    bottom:223px;
		z-index:111;
}
.eto_interesno1{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.eto_interesno1:hover {
  background: #1B78B2;

}

.eto_interesno3 {
    position:fixed;
    right:220px;
    bottom:278px;
		z-index:111;
}
.eto_interesno3{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.eto_interesno3:hover {
  background: #1B78B2;

}

.eto_interesno4 {
    position:fixed;
    right:220px;
    bottom:330px;
		z-index:111;
}
.eto_interesno4{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.eto_interesno4:hover {
  background: #1B78B2;

}
.eto_interesno5 {
    position:fixed;
    right:220px;
    bottom:382px;
		z-index:111;
}
.eto_interesno5{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.eto_interesno5:hover {
  background: #1B78B2;

}

.eto_interesno2 {
    position:fixed;
    right:220px;
    bottom:143px;
	z-index:111;
}
.eto_interesno2{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.eto_interesno2:hover {
  background: #1B78B2;

}
.button-register{
    display: block;
    background: #f58020;
    padding: 10px 30px;
	font-size: 19px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Segoe Script';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #c36518;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c36518;
  box-shadow: inset 0 -2px #c36518;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-register:hover {
  background: #fb7100;

}

.button-register:active {
  background: #136899;
}




/*= PLACEHOLDER
--------------------------------------------------------*/


::-webkit-input-placeholder {
	font-size: 17px;
	font-family: 'Segoe Script';
  color: #545454;
}
:-moz-placeholder {
  /* Firefox 18- */
  font-size: 17px;
	font-family: 'Segoe Script';
  color: #545454;
}
::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 17px;
	font-family: 'Segoe Script';
  color: #545454;
}
:-ms-input-placeholder {
font-size: 17px;
	font-family: 'Segoe Script';
  color: #545454;
}



/*= VALIDATION
--------------------------------------------------------*/

.item{position: relative;}
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#ef3030; max-width:170px; white-space:pre; position:absolute; left:-15px; opacity:0; z-index:1; transition:0.15s ease-out; }
.item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #ef3030 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; top:5px; left: -10px; }
.item.bad .alert{ left:0; opacity:1; top:5px; left: 343px; font-size: 16px; padding: 10px;}