/**
*  Login page of the /new app.
*  Same entrance transition as the homepage (#content starts faded and shifted
*  down), a narrow centered column holding the credentials form, the separator
*  and the two social sign in buttons.
*/

#content{
	max-width: 26rem;
	text-align:center;
	padding: 4.1rem var(--page-margin);
}

#content.faded{
	opacity:0;
	top:1.28rem;
}



/** --------------------------------------
              CREDENTIALS FORM
    --------------------------------------*/

#login_form{
	display:block;
	width:100%;
	margin-top: 2.5rem;
}

.input_blocks{
	display:block;
	width:100%;
	margin-bottom: 1.1rem;
	text-align:left;
}

.input_blocks label{
	display:block;
	width:100%;
	font-size:0.8rem;
	line-height:1.4rem;
	color:#777;
	cursor:pointer;
}

.input_blocks input{
	display:block;
	width:100%;
	height: var(--button-h);
	padding: 0 0.72rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	background:#fff;
	font-family:'Roboto', sans-serif;
	font-size:0.9rem;
	line-height: calc(var(--button-h) - 2px);
	font-weight:300;
	color:#000;
	cursor:text;
	transition:all 250ms ease;
}

.input_blocks input::placeholder{
	color:#bbb;
}

.input_blocks input:focus{
	outline:none;
	border-color:#ff6600;
}

.input_blocks input.wrong{
	border-color:#cc0000;
}

#sign_in_btn{
	display:block;
	width:100%;
	margin-top: 1.5rem;
	background:#ff6600;
	font-family:'Roboto', sans-serif;
}

/* Greyed out until the e-mail is well formed and a password has been typed,
   and again while the request is running. */
#sign_in_btn.deactivated,
#sign_in_btn.sending{
	background:#ccc;
	border-color:#ccc;
	cursor:default;
}

#register_form{
	width:100%;
	margin-top: 2.5rem;
}

#err_msg{
	display:block;
	width:100%;
	margin-top: 1.5rem;
	padding: 0.4rem 0.72rem;
	border-radius: 0.5rem;
	background:#ffe5e5;
	font-size:0.85rem;
	line-height:1.3rem;
	color:#cc0000;
}

#forgot{
	display:block;
	width:100%;
	margin-top: 1rem;
	/* font-size:0.85rem; */
}



/** --------------------------------------
              SOCIAL SIGN IN
    --------------------------------------*/

#separator{
	display:block;
	width:100%;
	margin: 2.2rem 0 1.5rem 0;
	border-top: 1px solid #ddd;
	text-align:center;
}

#separator span{
	top: -0.75rem;
	padding: 0 0.72rem;
	background:#fff;
	font-size:0.8rem;
	line-height:1.5rem;
	color:#999;
}

#socials{
	display:block;
	width:100%;
}

.social_buttons{
	display:block;
	width:100%;
	height: var(--button-h);
	margin-bottom: 0.8rem;
	padding: 0 0.72rem;
	border: 1px solid #ccc;
	border-radius: 1rem;
	background:#fff;
	text-align:center;
	cursor:pointer;
}

.social_buttons span{
	font-size:0.9rem;
	line-height: calc(var(--button-h) - 2px);
	color:#333;
	cursor:inherit;
}

.social_buttons .social_logos{
	position:absolute;
	top:50%;
	left: 0.72rem;
	width: 1.2rem;
	height: 1.2rem;
	transform: translateY(-50%);
	cursor:inherit;
}

.social_buttons a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:inherit;
}

.social_buttons:hover{
	border-color:#777;
	background:#f5f5f5;
}

.social_buttons.deactivated{
	border-color:#eee;
	background:#f5f5f5;
	cursor:default;
}

.social_buttons.deactivated span,
.social_buttons.deactivated .social_logos{
	color:#bbb;
	opacity:0.45;
}

.social_buttons.deactivated:hover{
	border-color:#eee;
	background:#f5f5f5;
}

#sign_up_note{
	display:block;
	width:100%;
	margin-top: 2rem;
	font-size:0.85rem;
}



@media (max-width: 12cm){

	body{
		min-width:auto;
	}

	#main_layer{
		background:#fff;
	}

	#outer_content{
		min-width:100%;
	}

	#content{
		width:100%;
		min-width:100%;
		max-width:100%;
		padding: 8vw 4vw 12vw 4vw;
	}

	.input_blocks label{
		font-size:3.8vw;
		line-height:7vw;
	}

	.input_blocks input,
	.social_buttons,
	#sign_in_btn{
		height:12vw;
		border-radius:2.6vw;
	}

	.input_blocks input{
		font-size:4.4vw;
		line-height:12vw;
	}

	#sign_in_btn span,
	.social_buttons span{
		font-size:4.4vw;
		line-height:11vw;
	}

	.social_buttons .social_logos{
		width:5.4vw;
		height:5.4vw;
	}

	#err_msg,
	#forgot,
	#sign_up_note{
		font-size:4vw;
		line-height:6.4vw;
	}
}