/** Common */
@import "less/mixins.less";
@import "less/variables.less";
@import "less/helpers.less";

/** Reset */
@import "less/reset.less";
@import "less/typography.less";

/** Grids */
@import "less/grid.less";

/** Components */
@import "less/buttons.less";
@import "less/forms.less";
@import "less/popin.less";
@import "less/checkbox.less";

/** Icons */
@import "icons.less";

/* Wrapper */
.wrapper{
  width: 1280px;
  /*width: 1040px;*/
  max-width: 90%;
  margin: 0 auto;
}

/** Layout */
header.header{
	position: relative;
	background-color: white;

	.blue-mask{
		position: absolute;
		top: 0;
		right: 0;
		width:50%;
		height:100%;
		background-color: #0071e1;
		z-index: 1;
	}

	.wrapper{
		background: white;
		position: relative;
		z-index: 2;
  	padding:15px 0 20px;
  }
}

#user-panel{
	position: absolute;
	top: 0;
	right: 0;
	color: white;
	background-color: #0071e1;
	height: 100%;
	line-height: 60px;

	a{
		color: white;
		font-size: 13px;
		font-weight: bold;
	}

	.icon{
		position: relative;
		top: 10px;
		margin:0 7px 0 18px;
	}
}

/** Footer */
footer.footer{
	color: white;
  font-size:12px;
	padding: 25px 0 130px;

	ul{
		margin-top: -10px;
	}

	li{
		display: inline-block;

		.icon{
			position: relative;
			top: 10px;
			margin:0 7px 0 20px;

			&.locked{
				top: 5px;
				margin-left: 0;
			}
		}
	}
}

/** Navbar */
.navbar{
	background-color: @color-blue;
	padding: 45px 0 40px;
	color: white;
	font-size: 10px;
	text-transform: uppercase;

	a{
		position: relative;
		display: inline-block;
		color: rgba(255,255,255,0.3);
		height: 51px;
		width: 11.1111%;
		line-height: 1.1;
		padding: 12px 7px;
		border-top: 2px solid rgba(255,255,255,0.3);
		border-bottom: 2px solid rgba(255,255,255,0.3);

		&:first-child{
			border-left: 2px solid rgba(255,255,255,0.3);

			&.active:before{
				content: none;
			}
		}

		&:last-child{
			border-right: 2px solid rgba(255,255,255,0.3);

			&:after{
				content: none;
			}
		}

		&:hover{
			text-decoration: none;
		}

		&:after{
			content: "";
			position: absolute;
			top:-2px;
			right:0;
			width: 14px;
			height: 51px;
			background: url('../images/menu.png') no-repeat;
		}

		&.active{
			background: white;
			color: @color-blue;

			&:after{
				background-image: url('../images/menu-active.png');
			}

			&:before{
				content: "";
				position: absolute;
				top:-2px;
				left:-10px;
				width: 14px;
				height: 51px;
				background: url('../images/menu-active-2.png') no-repeat;
			}

			span{
				background: @color-blue;
				color: white;
			}
		}

		span{
			float:left;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: rgba(255,255,255,0.3);
			margin:2px 5px 0 0;
			color: @color-blue;
			text-align: center;
			line-height: 18px;
		}

		label{
			position: relative;
			top: 5px;
		}
	}
}

main{
	background-color: white;

	.wrapper{
		padding: 50px 0 150px;
	}
}

.forms{
	width:800px;
	margin:0 auto;
}

/**
 * Tooltip
 */
.tooltip{
  display:none;
  position: absolute;
  border:2px solid #0071e1;
  border-radius: 5px;
  padding: 15px;
  margin-top: -10px;
  margin-left: -10px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  max-width: 300px;
  z-index: 10;

  &:after{
    content: " ";
    position: absolute;
    bottom: -13px;
    left:10px;
    width: 16px;
    height: 15px;
    background: url('../images/ui.png') no-repeat 0 -480px;
  }
}

/** Alert box */
.alert{
	position: relative;
	border: 2px solid #0256B8;
	padding: 30px 30px 30px 80px;
	margin:20px 0;
	color: #0256B8;
	font-size: 13px;
	font-weight: bold;

	a{ color: #0256B8; text-decoration: underline; }

	&:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 20px;
		width: 45px;
		height: 45px;
		margin-top: -22px;
		background: url('../images/ui.png') no-repeat 0 -1200px;
	}

	& .lead{
		margin:15px 0 -15px;
		font-size: 1em;
		font-weight: normal;
		font-style: italic;
		line-height: 1;
		padding: 0 !important;
		background-color: transparent !important;
	}

	/** Success */
	&.alert-success{
		border-color: @color-green;
		color: @color-green;

		a{ color: @color-green; }
		&:before{ background-position: 0 -950px; }
	}

	/** Warning */
	&.alert-warning{
		border-color: @color-orange;
		color: @color-orange;

		a{ color: @color-orange; }
		&:before{ background-position: 0 -850px; }
	}

	/** Error */
	&.alert-error{
		border-color: @color-red;
		color: @color-red;

		a{ color: @color-red; }
		&:before{ background-position: 0 -400px; }
	}
}

/** Upload */
#dropzone{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0,0.7);
  z-index:300;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

#dropzone{
	h1{
	  position:absolute;
	  width:100%;
	  text-align:center;
	  top:45%;
	  margin:-20px 0 0 0;
	  padding: 0;
	  font-size:28px;
	  font-weight: normal;
	  color:#fff;
	  border:none;
	  text-transform: none;
 	}

 	.in-progress{
	  display:none;
	  position:absolute;
	  width:600px;
	  top:50px;
	  left: 50%;
	  margin-left: -300px;
	  font-size:18px;
	  text-align:center;
	  color:#fff;
	  list-style: none;

	  li{
	  	padding: 10px;
	  	margin: 10px 0;
    	border: 1px solid rgba(255,255,255,.5);

    	span{
    		float: right;
    	}
	  }
	}
}


#dropzone-hideme{
  color:#fff;
  position:absolute;
  top:20px;
  right:20px;
}

/** Files list */
.files-list{
	width: 75%;
	font-weight: normal;

	li{
		margin: 5px 0;

		&:first-child{
			position: relative;
			padding-top: 40px;

			&:after{
				content: "Liste des pièces jointes :";
				position: absolute;
				top: 10px;
				left: -30px;
		    font-size: 14px;
		    font-weight: normal;
		    font-style: italic;
			}
		}
	}
}