@import "library.less";

.login-box {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 400px;
	height: 240px;
	margin: auto;
	
	.sign-in {
		width: 210px;
		margin: 0 auto;
		.big-button;
		
		&.hidden {
			display: none;
		}
	}
	
	.login-buttons {
		display: none;
		
		.item {
			display: block;
			height: 64px;
			line-height: 64px;
			margin-bottom: 20px;
			font-size: 18px;
			color: #fff;
			cursor: pointer;
			text-align: center;
			opacity: 1 !important;
			.border-radius(20px);
			
			&.vk {background-color: #46a3ff;}
			&.fb {background-color: #025efc;}
			&.gp {background-color: #ff394a;}
			
			&:hover {
				&.vk {background-color: lighten(#46a3ff, 5%);}
				&.fb {background-color: lighten(#025efc, 5%);}
				&.gp {background-color: lighten(#ff394a, 5%);}
			}
		}
		
		&.shown {
			display: block;
		}
	}
}

.big-button {
	padding: 0px 55px;
	height: 64px;
	background: @red;
	font-size: 28px;
	line-height: 64px;
	text-align: center;
	color: #ffffff;
	font-family: sans-serif;
	cursor: pointer;
	.box-sizing;
	.border-radius;
	
	&:hover {
		background: lighten(@red, 5%);
	}
}


#login-box {
	display: none;
	background: rgba(255,255,255,0.55);
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 100 + 3;
	font-family: trivia-grotesk;
	
	.container {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		width: 300px;
		height: 256px;
		background: #fff;
	}
	
	#uLogin {
		.item {
			display: block;
			height: 64px;
			background-position: 14px 14px;
			background-repeat: no-repeat;
			cursor: pointer;
			line-height: 64px;
			padding-left: 85px;
			font-variant: small-caps;
			font-size: 14px;
			color: #fff;
			.box-sizing;
			opacity: 1 !important;
			
			&.fb {
				background-image: url(../images/auth/fb.png);
				background-color: #3861ad;
				
				&:hover {
					background-color: lighten(#3861ad, 4%);
				}
			}
			&.vk {
				background-image: url(../images/auth/vk.png);
				background-color: #248bc2;
				
				&:hover {
					background-color: lighten(#248bc2, 4%);
				}
			}
			&.tw {
				background-image: url(../images/auth/tw.png);
				background-color: #42c0ef;
				
				&:hover {
					background-color: lighten(#42c0ef, 4%);
				}
			}
			&.gp {
				background-image: url(../images/auth/gp.png);
				background-color: #ffb721;
				
				&:hover {
					background-color: lighten(#ffb721, 4%);
				}
			}
			&.anonym {
				display: none;
				background-image: url(../images/auth/anonym.png);
				background-color: #313131;
				
				&:hover {
					background-color: lighten(#313131, 4%);
				}
			}
		}
	}
	
	.small {
		text-align: center;
		margin-top: 18px;
		font-size: 10px;
		color: #ccc;
		
		a {
			text-decoration: underline;
		}
	}
	
	&.show {
		display: block;
	}
	
	&.top-right {
		background: none;
		
		.container {
			top: @menuHeight;
			right: 0px;
			left: auto;
			bottom: auto;
			margin: 0;
		}
	}
	
	&.with-anonym {
		.container {
			height: 384px;
		}
		.anonym {
			display: block !important;
		}
	}
}

[id*="ul_"] {
	z-index: 10000005 !important;
}