/**
 * CSS for C-WEB: Login screen
 *
 * @author (c) 2015 Michal Suchan, VESTERON s.r.o.
 */

html, body {
	height: 100%;
    background: transparent;
}

body#login {
	min-width: 1000px;
	color: #444444;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
	position: relative;
	background: #105785 url(../img/login_page_background.jpg) no-repeat center center;
    background-size: cover;
    
	}

.clr {
	clear: both;
	}

div#login_page {
	padding-top: 25px;
	}

div#login_box {
	width: 580px;
	height: 435px;
	background: #105785 url(../img/login_background.jpg) no-repeat center center;
	box-shadow: 0px 0px 25px #000;
	display: block;
	margin:-245px 0 0 -290px;
	position:absolute;
	left:50%;
	top:50%;
    border-radius: 12px;
    overflow: hidden;
}



body#login > div#login_page > div#login_box > div#message {
	width: 100%;
	line-height: 30px;
	color: #ffffff;
	display: inline-block;
	opacity: 0;
	position: absolute;
	bottom: 80px;
	left: 0;
	text-align: center;
	z-index: 100;
	animation-name: a_message;
	animation-duration: 6s;
	animation-iteration-count: 1;
	-webkit-animation-name: a_message;
	-webkit-animation-duration: 6s;
	-webkit-animation-iteration-count: 1;
}

div#login_box > div.login_shadow {
	width: 100%;
	height: 80px;
	background: #5b2310;
	display: block;
	opacity: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}

div#login_box > div.login_form {
	width: 100%;
	height: 34px;
	display: block;
	padding: 23px 0;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	z-index: 150;
}

div#login_box > div.login_form > form > input {
	width: 200px;
	height: 30px;
	border: 2px solid #a0511a;
	color: #333333;
	font-size: 1.4em;
	line-height: 30px;
	margin: 0;
	padding: 0 5px;
}

div#login_box > div.login_form > form > button {
	width: 100px;
	height: 34px;
	background-color: #bc6223;
	border: 2px solid #a0511a;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-size: 1.4em;
	margin: 0;
	padding: 0 5px;
}

div#login_box > div.login_form > form > button:hover {
	background-color: #a0511a;
}

div.vesteron {
    width: 214px;
    height: 35px;
    background: transparent url(../img/vesteron_light.png) no-repeat center center;
	position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 500;
}

div.shadow {
    height: 150px;
    width: 100%;    
    background: transparent url(../img/login_shadow.png) repeat-x bottom center;
    position: absolute;
    bottom: 0px;
    z-index: 490;
    
}

@-webkit-keyframes a_message {
	0%	{opacity: 1; z-index: 15000; height: 50px; line-height: 50px;}
	85%	{opacity: 1; z-index: 15000; height: 50px; line-height: 50px;}
	99%	{opacity: 0; z-index: 15000; height: 50px; line-height: 50px;}
	100%	{opacity: 0; z-index: -100; height: 0px; line-height: 50px;}
}

@keyframes a_message {
	0%	{opacity: 1; z-index: 15000; height: 50px; line-height: 50px;}
	85%	{opacity: 1; z-index: 15000; height: 50px; line-height: 50px;}
	99%	{opacity: 0; z-index: 15000; height: 50px; line-height: 50px;}
	100%	{opacity: 0; z-index: -100; height: 0px; line-height: 50px;}
}