@font-face {
	font-family: 'cooperhewitt-thin';
	src: url('CooperHewitt-Thin.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'din';
	src: url('D-DIN.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'din-condensed';
	src: url('D-DINCondensed.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'din-exp';
	src: url('D-DINExp.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


html {
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	margin: 0;
	font-family: din, sans-serif;
	color: #0f2685;
	padding:0 3em;

}
#main {
	padding-bottom : 7em;
}
* {-moz-box-sizing: border-box; box-sizing: border-box;}

header ul {
	margin: 0;
}
#erreur {
	color: red;
	font-weight: bold;
	margin: 10px 0;
	padding-left: 80px;
}
#logo {
	background: url(ECAM-Lyon-Lasalle.png) no-repeat 0 -15px;
	padding-left: 14em;
	height: 6em;
	color: #0f2685;
}
#logo-title {
	text-transform:uppercase;
	font-size: 1.5em;
	font-weight:bold;
	font-family: din-condensed, sans-serif;

}
#logo-subtitle, #program-subtitle {
	font-family: din, sans-serif;

}
#program-title {
	font-size: 1.5em;
	font-family: din-condensed, sans-serif;
	font-weight: bold;
}
#banner{
	clear:both;
	position:relative;
}
#banner-title{
	font-family: din-exp-bold, sans-serif;
	font-size: 260%;
	width: 20%;
	min-width: 7em;
	position: absolute;
	bottom: 0;
	left: 0;
	color: white;
	background: #0f268590;
	margin: 0.3em 0.4em;
	padding: 0.1em 0.5em;
}

.col{
	display:table-cell ;
	width: 28%;
	padding : 1em;
}
.col1 p {
	font-size : 1.3em;
	font-weight:bold;
	width: 90%;
}

.col2 h2, .col2 h3,
.col3 h2, .col3 h3, .col3 label {
	padding-left:80px;
}
.col2 h3 {
	margin-top: -10px;
	margin-bottom: 2em;
}
.col2 input,
.col3 input {
	margin-left:80px;
}
.col2 {
	background: url(picto_still_no_registerd.png) no-repeat 0 1em;
	background-size: 5em;
}

.col3{
	background: url(picto_already_account.png) no-repeat 0 1em;
	background-size: 5em;
}

label {
	color: #7f7a7a;
	font-size: 0.8em;
	font-weight: bold;
	display: block;
	padding: -12px;
	margin: -9px 0;
}

div#forgot-psw {
	font-size: 12px;
	color: red;
	padding-top: 0.5em;
	width: 285px;
	text-align: right;
}

.col h2 {
	font-size : 1.2em;
}

.col h3 {
	font-size : 1em;
	color:#7f7a7a
}
footer
{
	text-align: center;
	font-size: 0.8em;
	background: url(footer_top.png) no-repeat 0 0;
	background-color:#d9d9d9;
	background-size: 100%;
	padding: 2em;
	color:black;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
header li, footer li
{
	margin-right: 5%;
	display: inline-block;
	vertical-align: top;
}
footer li
{
	margin-top: 1em;
}
header li {
	margin : 0
}
footer li a {
	text-decoration: none;
}
footer ul li div {
	margin-left: 3em;
	text-align: left;
}
footer ul li div:first-child {
	font-weight:bold;
}

#footer-phone{
	background: url(picto_tel.png) no-repeat 0 0;
	background-size: 2em;
}
#footer-mail{
	background: url(picto_email.png) no-repeat 0 0;
	background-size: 2em;
}
#footer-address{
	background: url(picto_adresse.png) no-repeat 0 0;
	background-size: 2em;
}
#footer-www{
	background: url(picto_web.png) no-repeat 0 0;
	background-size: 2em;
}
#footer-www a {
	color:black;
}

input#identifiant, input#password {
	border-radius: 5px;
	border : 2px solid #ef8c47;
	height: 2em;
	width: 205px;
}

input[type="button"]{
	border:0px solid #e69a02; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 30px 10px 30px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
	background-color: #FDB423; background-image: -webkit-gradient(linear, left, right, from(#fccc63), to(#EB6C15));
	background-image: -webkit-linear-gradient(left, #fccc63, #EB6C15);
	background-image: -moz-linear-gradient(left, #fccc63, #EB6C15);
	background-image: -ms-linear-gradient(left, #fccc63, #EB6C15);
	background-image: -o-linear-gradient(left, #fccc63, #EB6C15);
	background-image: linear-gradient(to right, #fccc63, #EB6C15);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fccc63, endColorstr=#EB6C15);
}

input[type="button"]:hover{
	border:0px solid #b87b02;
	background-color: #eb9d02; background-image: -webkit-gradient(linear, left, right, from(#eb9d02), to(#bd5610));
	background-image: -webkit-linear-gradient(left, #eb9d02, #bd5610);
	background-image: -moz-linear-gradient(left, #eb9d02, #bd5610);
	background-image: -ms-linear-gradient(left, #eb9d02, #bd5610);
	background-image: -o-linear-gradient(left, #eb9d02, #bd5610);
	background-image: linear-gradient(to right, #eb9d02, #bd5610);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eb9d02, endColorstr=#bd5610);
}
#formPrinc input[type="button"]{
	padding: 10px 20px;
}
@media (max-width: 700px) {
	body {
		padding:0;
	}
	#main {
		padding-bottom : 16em;
		margin-right : 0;
	}
	div.col{
		display: block;
		width: 70%;
		margin: 0 auto;
		text-align: center;
	}
	footer li {
		margin-right: 0;
		display: block;
		vertical-align: top;
		margin-bottom: 1em;
	}
	div#forgot-psw {
		padding-top: 0.1em;
		width: 295px;
		padding-bottom: 1.5em;
	}
}