@charset "utf-8";
/*  
	Hatem+D
	modeacademie.css
*/

/*	=Reset ----------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/*	=General --------------------------------------------------------------- */
	
body, html {
	/*height: 100%;*/
}

html {
	background: url(../medias/interface/stripe-background.jpg) top left repeat;
	
}

body {
	display: none;
	color: #333333;
	font-family: "skolar", serif;
}

a {
	text-decoration: none;
	color: #D17800;
}

a:hover{
  text-decoration: underline;
}

h2 {
	border-bottom: 1px solid #D1D1D1;
	font-family: "calluna",serif;
	font-style: normal;
	font-weight: 300;
	font-size: 45px;
	line-height: 50px;
	margin: 80px 0 15px 0;
	padding: 5px 0 60px 0;
	position: relative;
}

h2 span.stripped {
	background: url(../medias/interface/h2-striped-line.png) left top no-repeat;
	display: block;
	position: absolute;
	left: -39px;
	top: -2px;
	width: 20px; height: 53px;
}



h3 {
	background: url(../medias/interface/h3-striped-line.png) left 2px no-repeat;
	font-size: 30px;
	font-family: "calluna",serif;
	font-style: normal;
	font-weight: 300;
	line-height: 42px;
	margin: 15px 0 0 0;
	padding: 0 0 20px 0;
	position: relative;
	left: -39px;
	padding-left: 39px;
}

h4 {
	font-family: "skolar",serif;
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	margin: 0 0 10px 0;
	text-transform: uppercase;
}


p {
	font-size: 15px;
	line-height: 24px;
	padding: 0 0 20px 0;
}

p a{
	/*background: #faead2;*/
	/*border-bottom: #ebad17 solid 1px;*/
	/*color: #333333;*/
}

p a:hover{
	/*background: none;
	border-bottom: #ebad17 solid 1px;*/
	color: #ebad17;
}

.clear{
	clear: both;
}

.separator {
	border-top: #D1D1D1 double 3px;
	height: 3px; width: 637px;
	margin: 25px 0;
}

.yellow {
	color: #d88401;	
}



/*	=Container ------------------------------------------------------------ */

#container {
	
	float: right;
	overflow: hidden;
	position: relative;
	
	width: 940px; height: 100%;
	min-height: 760px;
	
}

#container-right-motif {
	background: url(../medias/interface/content-background-right.png) top right repeat-y;
	height: 100%;
	width: 26px;
	position: absolute;
	
	right: -15px;
}

#container-left-motif {
	background: url(../medias/interface/content-background-left.png) top right repeat-y;
	height: 100%;
	width: 6px;
	position: absolute;
	left: 222px;
	z-index: 20;
	
}

/*	=Page ------------------------------------------------------------ */

#spacer {
	height: 3px; width: 74.6666667%;
	min-width: 960px;
}
	#spacer div{
		background: url(../medias/interface/content-spacer-top.png) top right no-repeat;
		float: right;
		position: relative;

		width: 940px; height: 3px;
		right: -19px;
		
	}

#page {
	background: #fff;
	 width: 74.6666667%;
	min-width: 960px;
	height: 100%;
	position: relative;
}

/*	=Header --------------------------------------------------------------- */

#header {
	
	background: url(../medias/interface/menu-background.jpg) top right repeat-y;
	height: 100%; width: 222px;
	float: left;
	
	position: relative;
}

	#header #header-spacer{
		background: url(../medias/interface/header-spacer-background.png) right top no-repeat;
		float: left;
		height: 3px;
		width: 222px;
		position: relative;
		top: -3px;
	}

	#header #logo-modeacademie {
		
		background: url(../medias/interface/logo-modeacademie.png) top left no-repeat;
		height: 222px; width: 201px;
		margin: 40px 0 25px 0;
		text-indent: -9999px;
		
	}
	
		#header #logo-modeacademie a{
			display: block;
			height: 215px; width: 201px;
		}
	
	#header #menu {
		
	}

		#header #menu ul {



		}
		
			#header #menu ul li {
				background: url(../medias/interface/menu-list-background.jpg) top left no-repeat;
				height: 47px;
				line-height: 47px;
				text-transform: uppercase;
				margin: 0px;
				padding: 0px;
			}

			#header #menu ul li.last {
				background: url(../medias/interface/menu-list-last-background.jpg) top left no-repeat;
			}

				#header #menu ul li a{
					color: #444;
					display: block;
					height: 47px;
					letter-spacing: 2px;
					padding: 0 0 0 40px;
					position: relative;
					text-transform: uppercase;
					font-size: 14px;
				}
				  #header #menu ul li a:hover{
				    text-decoration: none;
				  }
				
				#header #menu ul li a .active{
					background: #EBAD17;
					display: none;
					height: 48px;
					width: 6px;
					position: absolute;
					top: 0px;
					right: 0px;
				}				
				
				#header #menu ul li.last a:hover .active{
					height: 47px;
				}
				
				#header #menu ul li a.current .active, #header #menu ul li a:hover .active{
					display: block;
				}
				
	#header #facebook{
		margin: 8px 0 0 32px;
		
	}
	
		iframe .connect_widget_vertical_center {
			vertical-align: middle !important;
		}
	
		#header #facebook .fb-like-box iframe{
			height: 72px !important;
		}
	
		#header #facebook #logo-modeacademie-facebook{
			float: left;
			margin: 0 15px 20px 0;
		}
	
		#header #facebook #title-facebook{
			color: #808080;
			display: block;
			font-size: 11px;
			line-height: 14px;
			margin: 5px 0 10px 0;
			padding: 2px 0 0 0;
			text-transform: uppercase;
			width: 150px;
		}
	
		#header #facebook .fb_edge_widget_with_comment {
			width: 120px;
		}

/*	=Content --------------------------------------------------------------- */
	
#content {
	float: left;
	padding: 0 20px 100px 40px;
	width: 650px;
	background: url(../medias/interface/content-background.jpg) top left repeat;
	position: relative;
}

	#content p{
		width: 600px;
		
	}

	#content-shadow-left{
		background: url(../medias/interface/content-shadow-left.png) top right no-repeat;
		height: 212px;
		width: 10px;
		position: absolute;
		left: 0px;
	}


	#content .double-columns .col-1 {
		float: left;
		width: 270px;
		padding: 0 30px 0 0;
	}
		#content .double-columns .col-1 p{
	    width: 270px;
		}

	#content .double-columns .col-2 {
		float: left;
		width: 300px;
		padding: 0 0 0 0;
	}
		#content .double-columns .col-2 p{
		  width: 290px;
		}

	#content .triple-columns .col-1, .triple-columns .col-2 {
		float: left;
		margin: 0 22px 0 0;
		width: 192px;
	}
	
	#content .triple-columns .col-3 {
		float: left;
		width: 192px;
	}
	
	#content .notice{
		color: #9b9b9b;
		font-size: 12px;
		line-height: 14px;
	}

/*  =Home ------------------------------------------------------------------ */

#home {
	
	
	
}

	#home #striped-circles{
		background: url(../medias/interface/content-striped-circles.png) top right no-repeat;
		position: absolute;
		left: 303px;
		top: -3px;
		width: 366px; height: 291px;
	}

	#home h2{
		background: none;
		border: none;
		margin: 80px 0 0 0;
	}

	#home #winners-collections {
		
		

	}
	
	#home #winners-collections img{
		margin: 0 0 22px 0;

	}
	
	#home #winners-collections span.title{
		display: block;
		font-size: 11px;
		margin: 0 0 10px 0;
		text-transform: uppercase;

	}
	
	#home #winners-collections span.name{
		font-size: 21px;
		

	}
	
/*  =Jury ------------------------------------------------------------------ */

#jury{


}

	#jury .judge{
		border-bottom: 1px solid #D1D1D1;
		margin: 0 0 15px 0;
	}

	#jury .judge.last{
		border-bottom: none;
	}

	#jury .judge h3{
		background: none;
		padding: 0;
		left: 0px;
	}

	#jury .judge h4{
		color: #d78400;
		font-size: 13px;
		margin: 0 0 15px 0;
	}

	#jury .judge p{
		width: 400px;
	}
	
	#jury .judge img{
		display: block;
		margin: 10px auto;
		width: 130px;
	}
	
	#jury .judge .col-1{
		float: left;
		margin: 0 25px 0 0;
		width: 195px; height: 195px;
	}

	#jury .judge .col-2{
		float: left;
		width: 400px;
	}

/*  =Partners ------------------------------------------------------------------ */

#partners{


}

	#partners .partner{
		border-bottom: 1px solid #D1D1D1;
		margin: 0 0 20px 0;
	}

	#partners .partner.last{
		border-bottom: none;
	}

	#partners .partner p{
		width: 400px;
	}

	#partners .partner .col-1{
		float: left;
		width: 220px;
	}

	#partners .partner .col-2{
		float: left;
		width: 400px;
	}


/*  =finalists ------------------------------------------------------------------ */

#finalists{


}

	#finalists h3{
		background: none;
		padding: 0;
		left: 0px;
	}
	
/*  =finalists-list ------------------------------------------------------------------ */

#finalists-list{


}

	#finalists-list h3{
		background: none;
		padding: 0;
		left: 0px;
	}
	
	#finalists-list #etape_1 .box_finalist .finalist_link{
	  color: #333333;
	  display: block;
	  height: 187px;
	}
	
	#finalists-list #etape_1 .box_finalist .finalist_link:hover{
	  color: #d17800;
	  text-decoration: none;
	}
	
	#finalists-list #etape_1 .box_finalist .finalist_link .img{
		
		background-position: 0px 2px;
		
	  width: 145px;
	  height: 145px;
	  display: block;
	}
	
	#finalists-list #etape_1 .box_finalist .finalist_link:hover .img{
	  background-position: 0px -146px;
	}

	#finalists-list .box_finalist{
		float: left;
		margin: 0px 53px 20px 0;
		width: 145px; height: 170px;
	}
	
	#finalists-list .box_finalist h4{
	  text-align: center;
	  font-size: 12px;
	  line-height: 1.4;
	  height: 32px;
	  margin-bottom: 0;
  }
	

/*  =finalists-info ------------------------------------------------------- */

#finalists-info{


}
	#finalists-info #content {   }

	#finalists-info #content .col-1{
		float: left;
		margin: 0 25px 0 0;
		width: 170px;
	}

		#finalists-info #content .col-1 h3{
			background: none;
			float: none;
			font-size: 21px;
			padding: 0px;
			position: inherit;
			left: 0px;
			text-align: center;
		}
		
		#finalists-info #content .col-1 img{
			margin: auto;
			width: 132px;
		}
		
		#finalists-info #content .col-1 .finalist-picture{
			
			height: 134px;
			width: 145px;
			
			margin: 0 auto 20px auto;
			
		}
		
			#finalists-info #content .col-1 .finalist-picture span{

				display: block;
				height: 100%;
				width: 100%;

			}

			#finalists-info #content .col-1 .creations{
				
				background-position: 0px 0px;
				background-repeat: no-repeat;
				display: block;
			 	width: 145px;
				height: 145px;
				
				margin: auto;
				
			}

			#finalists-info #content .col-1 .creations:hover{
				background-position:0px -148px; 				
			}

			
	#finalists-info #content .col-2{
		float: left;
		width: 400px;
	}

		#finalists-info #content .col-2 h3{
			background: none;
			padding: 0;
			left: 0px;
		}
		
		#finalists-info #content .col-2 h4{
			font-size: 13px;
			margin: 0 0 20px 0;
		}

		#finalists-info #content .col-2 p{
			width: 400px;
		}
		
		#finalists-info .vote_btn{
		  background-color: #686868;
		  display: block;
		  color: #fff;
			width: 152px;
			
		  -webkit-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -o-border-radius: 3px;
	    border-radius: 3px;
		}

		#finalists-info .vote_btn:hover{
		  background-color: #ebad17;
		  text-decoration: none;
		}

		#finalists-info .vote_btn .btn_vote_label{

		  font-size: 14px;
		  line-height: 2.5;
		  padding-left: 7px;
		  padding-right: 15px;
		}

		#finalists-info .vote_btn .btn_vote_label .check{
		  background-image: url(../medias/interface/sprite-check.png);
		  background-position: 0px 0px;
	  	background-repeat: no-repeat;
	  	width: 13px;
	    height: 12px;
	  	display: block;
	  	float: left;
	  	margin-top: 12px;
	  	margin-right: 10px;
		}

		#finalists-info .vote_btn:hover .btn_vote_label .check, #vote #etape_2 form .btn_arrow .vote_btn:hover .check{
		  background-position: 0px -13px;
		}

/*  =Vote ------------------------------------------------------------------ */

#vote{


}
  #vote #content { padding-bottom: 186px;  }
	#vote h3{
		background: none;
		border-top: 1px solid #D1D1D1;
		font-size: 24px;
		padding: 20px 0 20px 0;
		left: 0px;
	}
	
	#vote #etape_1 .box_finalist .finalist_link{
	  color: #333333;
	  display: block;
	  height: 187px;
	}
	
	#vote #etape_1 .box_finalist .finalist_link:hover{
	  color: #d17800;
	  text-decoration: none;
	}
	
	#vote #etape_1 .box_finalist .finalist_link .img{
		
		background-position: 0px 2px;
		
	  width: 145px;
	  height: 145px;
	  display: block;
	}
	
	#vote #etape_1 .box_finalist .finalist_link:hover .img{
	  background-position: 0px -146px;
	}

	#vote .box_finalist{
		float: left;
		margin: 30px 53px 0 0;
		width: 145px; height: 210px;
	}
	
	#vote .box_finalist h4{
	  text-align: center;
	  font-size: 12px;
	  line-height: 1.4;
	  height: 32px;
	  margin-bottom: 0;
  }

	#vote table tr{
		line-height: 30px;
	}

	#vote .td_label{
		width: 200px;
		
	}
	
	#vote td label{
	  line-height: 1.3;
	}
	
	
	
	#vote .vote_btn{
	  background-color: #686868;
	  display: block;
	  color: #fff;
	  
	  -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
	}
	
	#vote .vote_btn:hover{
	  background-color: #ebad17;
	  text-decoration: none;
	}
	
	#vote .vote_btn .btn_vote_label{
	  
	  font-size: 14px;
	  line-height: 2.5;
	  padding-left: 7px;
	  padding-right: 15px;
	}
	
	#vote .vote_btn .btn_vote_label .check{
	  background-image: url(../medias/interface/sprite-check.png);
	  background-position: 0px 0px;
  	background-repeat: no-repeat;
  	width: 13px;
    height: 12px;
  	display: block;
  	float: left;
  	margin-top: 12px;
  	margin-right: 10px;
	}
		
	#vote .vote_btn:hover .btn_vote_label .check, #vote #etape_2 form .btn_arrow .vote_btn:hover .check{
	  background-position: 0px -13px;
	}
	
	
	
	#vote #etape_2 .label_btn_arrow{
	  border-top: 1px solid #d1d1d1;
	  padding-top: 20px;
	}
	
	#vote #etape_2 .label_btn_arrow .candidate{
	  text-transform: uppercase;
	  display: block;
	  float: left;
	  margin-right: 25px;
	}
	
	#vote #etape_2 .label_btn_arrow .vote_btn{
	  color: #fff;
	  font-size: 11px;
	  display: block;
	  width: 133px;
	  float: left;
	  line-height: 2;
	  
	}
	
	#vote #etape_2 .label_btn_arrow .vote_btn span{
	  display: block;
	  float: left;
	  width: 7px;
	  height: 8px;
	  background: url(../medias/interface/x.png) top left no-repeat;
	  margin: 8px 5px 0 5px;
	}
	
	#vote #etape_2 form .margin{
	  padding: 0 0 10px 0;
  }
	
	#vote #etape_2 form input{
	  
	  border: 1px solid #c6c6c6;
	  font-size: 12px;
	  padding: 5px 10px;
	  line-height: 1.5;
	 /* margin-bottom: 15px;*/
	  
	  
	  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
	}
	
	#vote #etape_2 form input:hover{
	  border: 1px solid #999;
	}
	
	#vote #etape_2 form input:focus{
	  border: 1px solid #999;
	}
	
	#vote #etape_2 form .btn_arrow .vote_btn{
	  width: auto;
	  line-height: 2.5;
	  font-size: 12px;
	  padding-right: 15px;
	}
	
	#vote #etape_2 form .btn_arrow .vote_btn .check{
	  background-image: url(../medias/interface/sprite-check.png);
	  background-position: 0px 0px;
  	background-repeat: no-repeat;
  	width: 13px;
    height: 12px;
  	display: block;
  	float: left;
  	margin-top: 10px;
  	margin-right: 10px;
	}
		
		
	
/*  =Contact ------------------------------------------------------------------ */

#contact{


}

	#contact h3{
		background: none;
		font-size: 19px;
		line-height: 30px;
	}
	
	#contact p{
		padding: 0 0 15px 0;
	}
	
	#contact a{
		background: none;
		border: none;
		color: #d17800;
	}
	
	#contact .telephones #fax{
		color: #888;
		
	}

	#contact a.find-store{
		background: url(../medias/interface/btn-find-store.png) #444 15px 12px no-repeat;
		color: white;
		margin: 5px 0 0 0;
		padding: 11px 10px 10px 40px;
		border-radius: 5px;
		display: block;
		width: 150px;
		height: 19px;
	}
	
	#contact a.find-store:hover{
	  text-decoration: none;
	  background-color: #ebad17;
	}

	/*  =Contact ------------------------------------------------------------------ */

#campaign{


}

	#campaign .video{
		border-bottom: 1px solid #D1D1D1;
		margin: 0 0 25px 0;
		padding: 0 0 40px;
	}

		#campaign .video.last{
			border: none;
		}

	#campaign .video .informations{
		float: left;
		margin: 0 20px 0 0;
		width: 150px;
	}
	
		#campaign .video .informations .title{
			font-size: 20px;
			font-family: "calluna",serif;
			font-style: normal;
			font-weight: 300;
			margin: 15px 0 0 0;
			padding: 0 0 10px 0;
			display: block;
		}
	
		#campaign .video .informations .subtitle{
			display: block;
			font-size: 12px;
			margin: 0 0 10px 0;
			text-transform: uppercase;
		}

	#campaign .video .embed{
		float: left;
	}