@import (less) "./../colors.less";
@import (less) "./../functions.less";

body{
	margin: 0;
	padding: 0;

	font-family: 'Lato', sans-serif;

	#login-container{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );

		#logo{
			width: 800px;
			text-align: center;
			margin-bottom: 30px;

			& > a{
				position: relative;

				& > img{
					width: 256px;
					height: auto;

					margin: 1px 30px 0 40px;
				}
			}
		}

		#login-form{
			float: left;
			width: 400px;
			padding: 15px;
			box-sizing: border-box;

			border-right: 1px solid @COLOR_PRIMARY_LIGHT;

			#info-box{
			    display: none;
			    width: 100%;
			    position: relative;
			    background-color: #E21032;
			    color: #FFFFFF;
			    padding: 10px;
			    box-sizing: border-box;
			    text-align: center;
			    margin-bottom: 10px;
			    font-size: 14px;

				&.visible{ display: block; }
			}

			p{
				margin: 0;
				font-size: 14px;
				text-align: center;
				font-weight: bold;
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			input, #login-submit{
				width: 369px;
				padding: 8px;
				margin-bottom: 10px;
				box-sizing: border-box;

				border: 1px solid @COLOR_PRIMARY_LIGHT;

				font-family: 'Lato', sans-serif;
				font-weight: bold;
				text-align: center;

				.FTransition( .4s ease-in-out border );

				&::placeholder{ 
					color: @COLOR_PRIMARY; 
					font-weight: normal;

					.FTransition( .4s ease-in-out color );
				}

				&:focus{
					outline: none;
					border: 1px solid @COLOR_PRIMARY;
					border-left: 8px solid @COLOR_PRIMARY;
					border-right: 8px solid @COLOR_PRIMARY;

					.FTransition( .4s ease-in-out border );

					&::placeholder{
						color: @COLOR_PRIMARY;

						.FTransition( .4s ease-in-out color );
					}
				}
			}

			#login-submit{
				position: relative;
				margin-top: 20px;
				margin-bottom: 0;
				padding: 12px;

				border: none;
			}

			#login-header{
				margin: 0;
				margin-bottom: 10px;

				font-size: 20px;

				font-weight: bold;
			}

			#login-footer{
				margin: 0;
				margin-top: 8px;

				text-align: center;
				color: @COLOR_PRIMARY_LIGHT;
				font-size: 12px;
			}
		}

		#register-info{
			float: left;
			width: 400px;
			padding: 15px;
			box-sizing: border-box;
			position: relative;

			p:first-of-type{
				margin: 0;
				font-size: 14px;
				text-align: center;
				font-weight: bold;
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			p:nth-of-type(2){
				position: relative;
				top: 30px;
				margin: 0;
				font-size: 16px;
				text-align: center;
				margin-bottom: 20px;
			}

			#go-to-register-site{
				position: relative;
				top: 69px;
				margin-top: 20px;
				margin-bottom: 0;
				padding: 12px;

				border: none;
			}
		}
	}
}