/* Librairies */

@import 'variables';
@import 'fa';
@import 'fa-custom';
@import 'common';

/* Fix librairies location */
/* FIXME */
@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.2.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Logon */

#container {
	background:$col_main_1;
	padding:10px 10px 1px;
}

#logon {
	.logo {
		width:auto;
		height:auto;
		text-transform:uppercase;
		position:absolute;
		top:0;
		left:0;
		padding:10px 10px 10px 35px;
		margin:0;
		border-bottom:3px solid $col_none;
		font-weight:bold;
		color:$col_none;
		font-size:35px;
		line-height:35px;
		text-decoration: none;
		background:url(../images/logo_25.png) 10px 50% no-repeat;
	}
	
	.container {
		position:fixed;
		top:50%;
		left:50%;
		margin-left:-230px; /* -(68+10*2+160+200+5*2+1*2)/2 */
		margin-top:-64px; /* -(10*2+20*4+20*2+20+2*2+1*2)/2 */
	}
	.box {
		background:$col_none;
		overflow:hidden;
		position:relative;
		
		.key {
			position:absolute;
			height:100%;
			width:68px;
			background:$col_main_2;
			
			.fa {
				position:absolute;
				top:50%;
				left:50%;
				text-align:center;
				color:$col_main_1;
				line-height:50px;
				font-size:50px;
				width:50px;
				margin-left:-25px;
				margin-top:-25px;
			}
		}
		
		table {
			margin-left:68px;
			padding:10px;
			
			td {
				padding:0;
				text-align:left;
				font-size:18px;
				color:$col_main_1;
			}
		
			td.desc {
				width:160px;
				line-height:20px;
				padding:10px 0;
			}
		
			td.validate {
				text-align:right;
			}
		}
		.feedback {
			float:left;
			font-size:14px;
			margin-top:5px;
			font-style:italic;
			color:red;
		}
		input {
			border:1px solid $col_main_1;
			color:$col_main_1;
			font-size:18px;
			line-height:20px;
			padding:2px 5px;
			width:200px;
		}
		a.button {
			margin-right:0;
		}
		a.button .fa {
			margin:1px;
		}
	}
	#footer {
		position:fixed;
		bottom:0;
		width:100%;
	}
	
	.logon_msg {
		margin-top:10px;
		padding:5px;
		color:$col_none;
		text-align:center;
		font-size: 0.75em;
		border:1px solid $col_none;
	
		span {
			display:block;
			margin-top:5px;
		}
		
		span.msg_title {
			margin-top:0;
			text-decoration:underline;
		}
	}
}