@import url(http://fonts.googleapis.com/css?family=Rambla:400,700);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

/* Generic ########################################### */

*{margin:0 auto;padding:0;}  
html{height: 100%;}
body{color: #666;font-family:Rambla,'Bree Serif';line-height: 1.3;font-size:14px;position: relative;margin:0;min-height:100%;}
a{text-decoration:none;color:#444;cursor:pointer;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}
a:hover {text-shadow:0 0 1px rgba(0, 0, 0, 0.2);text-decoration:none;}
img {border:none;margin:0;padding:0;}
.fa {margin:0px 0.5em;}
object, embed, canvas, video, audio, picture {max-width: 100%;_width: 100%;}
img {max-width: 100%;_width: 100%;}
li {display:block;list-style:none;}

/* Structure ########################################### */
.ma{margin-left="500px"}
.HEADER{width:88%;margin:0 auto;padding:0px 1%;height:70px;top: 0;color:white;overflow:auto;border:1px solid #d3d7cf;border-top:none;background-image: url(/static/imgs/dark-stripes-light.png);background-color: #56ABEE;}
.CORE {min-height:800px;width:85%;overflow: auto;margin:5px auto; padding:10px 2.5%;float:center;background:white;border:1px solid #d3d7cf;} 
.FOOTER {float:none;width:88%;margin:auto;padding: 1rem 1%;text-align: center;color:white;border-top:1px solid #888a85;background:#333;overflow:auto;}
.wholePage{background:#eeeeec;}

.Logo {position:absolute;width:50%;margin:10px 2%;text-align:left;}
.Menu {float:right;width:20%;margin:0 2%;text-align:right;margin-top:25px;}

/* Menu ########################################### */

.Menu li {display:inline-block;padding:0 0.4em;height:1.4em;line-height:1.4em;position:relative;text-align:right;font-weight:700;cursor:pointer;font-size:120%;}
.Menu li ul         {display:none;}
.Menu li li         {display:block; width:8em;}
.Menu li:hover > ul {display:block; position:absolute; top:1.4em; left:-1px; width:8em; z-index:10;}
.Menu li li:hover ul{left:8em; top:-1px}
.Menu li a{color:white;text-decoration:none;padding:5px 5px 5px 0px;}
.Menu li a:hover{color:#d3d7cf;text-decoration:none;}

/* Form ########################################### */
/*input,select,textarea {padding:6px 6px; margin:8px 0px;border-radius:2px;border:1px solid #babdb6;}*/
input.parsley-success,select.parsley-success,textarea.parsley-success {color: #468847;background-color: #DFF0D8 !important;border: 1px solid #D6E9C6 !important;}
input.parsley-error,select.parsley-error,textarea.parsley-error {color: #B94A48;background-color: #F2DEDE !important;border: 1px solid #EED3D7 !important;}
.parsley-errors-list {margin:4px 0px 10px 10px;text-align:right;color: #B94A48;padding: 0;list-style-type: none;font-size: 0.9em;line-height: 0.9em;opacity: 0;-moz-opacity: 0;
-webkit-opacity: 0;transition: all .3s ease-in;-o-transition: all .3s ease-in;-ms-transition: all .3s ease-in-;-moz-transition: all .3s ease-in;-webkit-transition: all .3s ease-in;}
.parsley-errors-list.filled {opacity: 1;}
.formstyle { width:100%;margin:10px 0;border:1px solid #d3d7cf;float:left;overflow:auto;border-radius:4px;color:#555;}
.formstyle .formheader,.formstyle .formfooter {float:left;width: 96%;background:#555;border-bottom:1px solid #d3d7cf;text-align: right;padding: 5px 2%;}
.formstyle .formheader h1 { margin:0;padding:10px;color:#eeeeec;font-size:1.5em;text-align:left;}
.formstyle .formcore {width:90%;padding:15px 5%;background:#f3f3f3;float:left;}
.formstyle .formcore h2 { margin:0;padding:0;}
.formstyle p {margin-top:5px;font-size:1em;font-weight:700;color:#333;font-family:rambla;}
.formstyle input,.formstyle select,.formstyle textarea {padding:6px 6px; margin:6px 0px 6px 30px;border-radius:2px;border:1px solid #d3d7cf;}
.formstyle input[type=file],.formstyle input[type=file]:hover {border:none;}
.formstyle input:hover,.formstyle select:hover,.formstyle textarea:hover {border:none;border:1px solid #babdb6;}
.formstyle input:focus,.formstyle select:focus,.formstyle textarea:focus {border:none;border:1px solid #3f9db8;}
/* padding:10px 20px !important;width:200px;margin:10px 20px !important;*/
.Depotbtn {/* float:right; */} 
.formdashn,.smallform {width:60%;margin:20px 20%;}


.vote {float:left;}

/* Home page ########################################### */
.loginform {width:80%;padding:20px 5%;border:1px solid #d3d7cf;background-color:white;}
.homeright {width:28%;float:left;}
.homeleft {width:70%;float:left;}

/* commons divs ###########################################  width:80%;padding:10px 5%;margin:10px auto;overflow:auto;color:white;font-size:1.1em;border:1px solid #d3d7cf;border-radius:3px;font-weight:bold;*/

.errorbox,.succesbox,.warningbox,.infosbox {margin: 15px 25px;overflow:hidden;padding: 10px 20px;-webkit-border-radius: 5px;border-radius: 5px;text-align:left; }
.errorbox {background-color:#f9dbdb;border:1px solid #e9b3b3;}
.succesbox {background-color:#d9edc2;border:1px solid #b2ce96;}
.warningbox {background-color:#fef5c4;border:1px solid #fadf98;}
.infosbox {background-color:#d8ecf7;border:1px solid #afcde3;}

/* Customs ########################################### */
.titlez {font-family: 'Bree Serif', serif;font-weight: 300;line-height:34px;color: #414848;text-shadow: 1px 1px 0 rgba(256,256,256,1.0);padding-bottom:6px;}
.errorlist {margin:5px 10px; font-weight:bold;}
.PageTitlz {float:left;width:98%;font-family: 'Bree Serif', serif;font-weight: 300;background-color: #56ABEE;color: #f6f6f6;padding:5px 0; margin: 5px 1%;text-align:center;border: 1px solid #f6f6f6;border-radius: 3px;}
/* Dashboard ########################################### */

.DashboardMenu { width:100%;text-align:right;font-family: 'Bree Serif', serif;font-weight: 300;}
.DashboardMenu li { display:inline-block;text-align:center;border-radius:3px;}

.dashPage { width:100%;margin:0; padding: 5px 0; }

.newannonce {width:100%;float:left;text-align:right;margin:auto;}
.DashboardMessages {width:100%;margin:0 auto;float:left;}
.DashSection { float:left;overflow:auto;width:90%;margin:3px auto;padding:5px 5%;background:#eeeeec;border:1px solid #d3d7cf;border-radius:3px;color:#414848;}
.DashStats ul li {font-size:1.1em;}
.DSannonces,.DSprofiles,.DScollaborateurs {float:left;width:30%;margin:1% auto;}

	/* Dashboard ANNONCES LIST ########################################### */ 
.SnapAnnonces {}
.SnapAnnonces a {color:#204a87;}
.SnapAnnonces h3 a {float:left;width:100%;color:#204a87;text-transform:uppercase;padding-bottom:5px;}
.SnapAnnonces li {margin:5px;display:block;}
.AnnInfos, .AnnCandidats,.AnnStats {float:left;width:30%;margin-top:10px;}
.LinkDiv {float:left;margin-top:5px;width:100%;}
.AnnonceOperations { float:right;margin: 5px 0.9%;border: 1px solid #eeeeec;background: #f6f6f6;padding: 5px 0;border-radius: 3px; width: 46%; text-align: center;padding-right:2%;}
.statistiqueAnnonce { float:left;margin-bottom: 5px;border: 1px solid #eeeeec;background: #f6f6f6;padding: 5px 0;border-radius: 3px; width: 98%; text-align: center;padding-right:2%;}
.statistiqueAnnonce li {display:inline;margin:0 10px;padding:8px 10px;}
.AnnonceOperations li {display:inline;margin:0 0px;padding:2px 2px;}
.AnnonceOperations a, .statistiqueAnnonce a { color:#094b5e; }
.CanListing .selected {background-color: lightgray; margin: 0 -10px; padding: 0 10px;}
	/* Dashboard ANNONCES EDIT ########################################### */ 
.annonceForm { width:60%;margin:0 auto;}
.EditAnnonces .annonceForm { float:left;width:96%;padding:auto 0;margin:auto 2%;}
.EditAnnonces .annonceForm .login-form .header h1 {padding-bottom: 5px;border-bottom: 1px solid #414848;}
.EditAnnonces .annonceForm h2 { margin:0 auto 20px 10px;color:#1786a6;}
.QuestionForm .login-form .footer {padding:0;}


.annonceBox {float:left;width:60%;margin:30px 5% 0 0;font-size:1.2em;background:#eeeeec;border:1px solid #d3d7cf;padding:30px;border-radius:3px;}
.annonceActions {float:left;width:20%;margin:30px auto;font-size:1.2em;padding:30px;}

.annonceBox li {margin:5px 0;}
.annonceBox h2 {color:#1786a6;padding-bottom:20px;margin-bottom:20px;}
.annonceBox hr {margin:30px auto !important;}
.annonceActions a {width:90%;margin:10px auto;font-size:1.2em;}

	/* Dashboard LIST CANDIDATURES ########################################### */
.CvBox {width:60%;float:left;text-align:right;}
.CandidatureBox {width: 98%;float:left;margin:auto;border-bottom:1px solid #eeeeec;overflow:auto;padding: 5px 0;}
/*.CandidatureBox:hover {opacity:0.5;}*/
.ThumbnailCandidat {float:left;margin:auto;height:48px;width:48px;}
.ThumbnailCandidat img { width:100%;height:100%;}
.InfosCandidat {float:left;width:30%;margin-left:2%;margin-top: 5px;text-align: center;}
.NoteCandidat,.StatusCandidat {float:left;width: 15%;margin-left:2%;line-height: 48px;text-align: center;}

.visio {float:left;width: 5%;margin-left:2%;line-height: 48px;text-align: center;}
.InfosCandidat h2 {color:#3465a4;margin-bottom:20px;}
.InfosCandidat p {margin:3px 10px;}
.ActionsCandidat {float: right;width: 20%;margin-left:2%;text-align: right;line-height: 48px;}
.ActionsCandidat li {margin:4px 0;}
.ActionsCandidat .DateDepot {text-align:right;padding-bottom:6px;margin-bottom:6px;color: #888a85;}
.CandidatureVote {float:left;margin-top:20px;}
.InfosCandidat a { margin-left:30px;color:#3465a4;}
.CandidatureVote a {font-size:1em;margin:0px 10px;float:left;text-align:right;}
.CanPhotow { width:4cm;height:5cm;}
.Docsbtn { font-size: 1.1em;margin: auto 5px;color: rgb(0, 94, 122);}
.DocsNav { text-align:right;float:left;width:100%;margin:5px 0;}
	/* Dashboard LIST COLLABORATEUS ########################################### */
.col_list {width:80%;float:left;margin:10px 10%;background:#eeeeec;border:1px solid #d3d7cf;border-radius:5px;}
.col_list li { display:inline; width: 25%;float:left; padding: 10px 0px 10px 0;border-bottom:1px solid #d3d7cf; text-align:center;}
.col_list .col_list_header li { background:#333;color:#f6f6f6;font-weight:bold;}
.col_list_header {font-size:1.1em;}

.client_list {width:80%;float:left;margin:10px 10%;background:#eeeeec;border:1px solid #d3d7cf;border-radius:5px;}
.client_list li { display:inline; width: 16.66%;float:left; padding: 10px 0px 10px 0;border-bottom:1px solid #d3d7cf; text-align:center;}
.client_list .client_list_header li { background:#333;color:#f6f6f6;font-weight:bold;}
.client_list_header {font-size:1.1em;}

.delCol {}
.delCol.On { color:green; }
.delCol.Off { color:#cc0000; }
/*******************
Indiv Pages ( front scripts )
*******************/

.indivpages {width:100%;background:white;height:100%;margin:0;padding:0px;}


/* HR ########################################### */
hr.ruler {
margin:0px auto;
border: 0;
width:80%;
height: 1px;
background: #555753;
background-image: -webkit-linear-gradient(left, #babdb6, #555753, #babdb6);
background-image: -moz-linear-gradient(left, #babdb6, #555753, #babdb6);
background-image: -ms-linear-gradient(left, #babdb6, #555753, #babdb6);
background-image: -o-linear-gradient(left, #babdb6, #555753, #babdb6);
}

/* Bouttons ########################################### */
.btn {
	font-weight:bold;
	font-size:1.1em;
	position: relative;
	color:#f6f6f6;
	text-decoration:none;
	margin: 5px !important;
	text-shadow:-1px -1px 0 #2C7982;
	background: #56ABEE;
	border: 1px solid #888a85 !important;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius: 3px !important;
	display: inline-block;
	padding: 6px 30px !important;
	float:right;
	cursor:pointer;
}
.btn:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}

.btn:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:0px;
	color:#444;
}
.btn:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}
.btn:hover {
	background: #48C6D4;
	background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:linear-gradient(top, #3EACBA, #48C6D4);
}

/* ####################################### PARSLEY CSS */

input.parsley-success,select.parsley-success,textarea.parsley-success {color: #468847;background-color: #DFF0D8 !important;border: 1px solid #D6E9C6 !important;}
input.parsley-error,select.parsley-error,textarea.parsley-error {color: #B94A48;background-color: #F2DEDE !important;border: 1px solid #EED3D7 !important;}
.parsley-errors-list {margin:4px 0px 10px 10px;text-align:left;color: #ef2929;padding: 0;list-style-type: none;font-size: 0.9em;line-height: 0.9em;opacity: 0;-moz-opacity: 0;
-webkit-opacity: 0;transition: all .3s ease-in;-o-transition: all .3s ease-in;-ms-transition: all .3s ease-in-;-moz-transition: all .3s ease-in;-webkit-transition: all .3s ease-in;}
.parsley-errors-list.filled {opacity: 1;}
.ProCessedDiv { margin:10px 0;}

/* ####################################### RECORDING CSS */

.RecTitles { text-transform:capitalize;font-weight:bold;font-size:1.5em;padding-bottom:2px;margin-bottom:2px;border-bottom: 1px solid #d3d7cf;color:#888a85;}
.AcceuilPages {width:100%;float:left;margin: 40px 0;font-size: 120%;}
.infosAnnonces, .infosEmployeur {width:47%;float:left;}
.AcceuilPages .fs-title { margin-bottom:10px; color: #56ABEE;}
.AcceuilPages p { padding-left:3%;}
.experiment { text-align:center;}
.experiment button { padding:5px 15px; margin-top:15px;border-radius:3px;text-align:center;}
.recBox {margin-top:20px;border: 1px solid #babdb6; height: 240px; max-width: 100%; vertical-align: top; width: 320px;}
.ParamPage {float:left;width:100%;}
.CamSection, .DescSection {width:46%;float:left;}
.DescSection {font-size:1.1em;border: 1px solid; margin-top:30px;color: #9F6000;background-color: #FEEFB3;padding:20px 1%;border-radius:2px; }
.DescSection p {margin:10px 0;}
.traitementBox {width:85%;float:left;color: #444; border: 1px solid #91d4f3;background-color: #BDE5F8;padding:10px 4%;border-radius:2px;margin:0; }
.MsgBox { margin-left:10px; font-size: 120%; font-weight: bold;}
.QuesForm {float:left;width:100%;margin:10px 0;padding:10px 0;background:#fff;}
.QuizzPage { width: 1000px; margin: 0 auto;}
.VideoBox {float:left;width: 640px;}
.ReadDiv, .AnswerDiv {width: 170px;float:left;margin: 0 3px;text-align:center;}
.QuesForm h1 {color: darkslategray;background-color: whitesmoke;border: 1px solid #ccc;width: 90%;padding: 10px 5%;border-radius: 2px;}
.QuizzPage h3 {font-family:Rambla;font-size: 1.1em;padding: 5px 0;border-bottom: 3px solid darkslategrey;text-align: left;border: 1px solid darkslategrey;border-radius: 3px;background: darkslategrey;color: #fff;width: 100%;text-align:center;}
.QuizzPage h4 {font-family:Rambla;font-size:1.1em; }
.QuesForm .MsgBox {margin-left:20px;color:#333;}
.prevReponses {margin: 20px 0 0 5%;font-size: 1.2em;line-height: 150%;border-bottom: 1px solid;width: 50%;padding-bottom: 20px;}
.ValidControls {width:100%;text-align:right;}
.ValidControls #Ok {background:#65a355;margin:0px 10px;}
.ValidControls #Ko {background:#a40000;}
button a { color:white;}

.experiment button,.MyBtn
{
font-family:Rambla;
font-weight:bold;
font-size:1.1em;
text-align:center; 
padding:7px 32px; 
border:solid 1px #9ea0a1; 
color:#fff; 
background-color:#c9cdcf; 
background-image: -moz-linear-gradient(top, #c9cdcf 0%, #bfb8b8 100%); 
background-image: -webkit-linear-gradient(top, #c9cdcf 0%, #bfb8b8 100%); 
background-image: -o-linear-gradient(top, #c9cdcf 0%, #bfb8b8 100%); 
background-image: -ms-linear-gradient(top, #c9cdcf 0% ,#bfb8b8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfb8b8', endColorstr='#bfb8b8',GradientType=0 ); 
background-image: linear-gradient(top, #c9cdcf 0% ,#bfb8b8 100%);   
}
.VideoFrame {width:95%; height:1500px; overflow: hidden;}
#star_btn { background:green;float: none;margin: 5px 0 !important;}
#RatyBox { margin: 5px; float:none; width:auto; display: inline-block;}
.RoundedNote {background: #DE8C09;color: white;padding: 5px 10px;border-radius: 50%;}
.SortBox { float:left;text-align:right;width:100%; font-size: 1.1em;}
#flashApp { box-shadow: 0 0 8px #888888;-moz-box-shadow: 0 0 8px #888888;-webkit-box-shadow: 0 0 8px #888888;}
.CamSec { width:100%; }
.CamtestingObject, .CamtestingInfo { float:left;width:46%;margin:0 2%;text-align:center;overflow:hidden;}
.CamtestingInfo  p { text-align:left; margin:3px 0;font-size:130%;}
.BubbleBox {width:100%;float:left;text-align:center;margin:20px 0;}
.CamRequirement { width:80%;float:left;margin:20px 10%;text-align:center;}
.CamRequirement .Besoins,.CamRequirement .Consignes {float:left;width:46%;margin:0 2%;}
.CamRequirement .fa {font-size:5em;margin:20px;}
.CamRequirement {font-size:150%;}
.BubbleBox h1 { color:white;
position: relative;width: 80%;margin:10px 4%;padding: 20px 5%;background: #56ABEE;webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 2px 2px 10px 0px #616161;
-moz-box-shadow: 2px 2px 10px 0px #616161;box-shadow: 2px 2px 10px 0px #616161;
}
.BubbleBox h1:after {content: "";position: absolute;bottom: -15px;left: 50%;border-style: solid;border-width: 15px 15px 0;border-color: #56ABEE transparent;display: block;width: 0;z-index: 1;}

/* ####################################### Counter/ Timer CSS */

.is-countdown {padding:15px 0;float:left;width:100%;font-weight:bold;font-size:200%;}
.countdown-rtl {direction: rtl;}
.countdown-holding span {color: #888;}
.countdown-row {clear: both;width: 100%;padding: 0px 2px;text-align: center;}
.countdown-show1 .countdown-section {width: 98%;}
.countdown-show2 .countdown-section {width: 48%;}
.countdown-show3 .countdown-section {width: 32.5%;}
.countdown-show4 .countdown-section {width: 24.5%;}
.countdown-show5 .countdown-section {width: 19.5%;}
.countdown-show6 .countdown-section {width: 16.25%;}
.countdown-show7 .countdown-section {width: 14%;}
.countdown-section {display: block;float: left;font-size: 100%;text-align: center;}
.countdown-amount {font-size: 200%;background-color: #eeeeec;float:left;width:50%;border: 1px solid #ccc;border-radius:3px;}
.countdown-period {display: block;font-size:100%;}
.countdown-descr {display: block;width: 100%;}


/* ####################################### Retour d'informations */

.RepBox,.AnnBox{font-size: 1.1em;float:left;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;-webkit-box-shadow: 0 1px 0 1px #e4e6eb;-moz-box-shadow: 0 1px 0 1px #e4e6eb;box-shadow: 0 1px 0 1px #e4e6eb;margin:5px 1%;background-color:#f6f6f6;}
.RepBox { width: 90%; padding: 5px 4%;}
.AnnBox { width:44%; padding:10px 2%; }
.RepBox a,.AnnBox a { color:#216B82;}
.RepBox p,.AnnBox p {margin:2px 0;}
.RepPhoto,.RepLink,.RepStatus,.RepInvDate,.RepDate { float:left;width:20%; margin: 0 1%;}
.RepLink,.RepStatus { width:10%;}
.RepInvDate,.RepDate { width:12%;}
.RepInfo { float:left;width:46%; margin:5px 1%;}
.RepInfo p {margin: 5px 0;}
.RepPhoto { height: 96px; }
.RepPhoto img {height:100%;}
.RepLink,.RepStatus,.RepInvDate,.RepDate { line-height:60px;}
.RepPage {width:100%;}
.leftPan {width:50%;margin:0 1%;float:left;}
.rightPan {width:46%;margin:0 1%;float:left;}
.RepPage h2 {color: white;margin: 0px 0 5px 0;padding: 5px 0px;width: 100%;border-bottom: 1px solid #eeeeec;background: #56ABEE;font-size:1.1em;}
.QuesList,.CV, .ColList,.RecNote,.video ,.comments, .NoteGlob {float:left;border: 1px solid #eeeeec;background-color: #f6f6f6;width: 99%;margin: 20px 0;border-radius: 3px;padding-bottom: 5px;}
.printQues { float:left;width:96%;margin:3px 2%;font-size:110%;text-align:left;}
.vidplayer { float:left;width:100%; padding-top: 5px;}
.CV iframe {margin-left:5px;}
.QuesList li,.ColList li {font-size:1.1em;margin:2px 5px;}
.ComBox {width:auto;overflow:auto;color: #555;margin: 0 30px;padding: 1px 0;border-bottom: 1px dashed #999;}
.ComBox .header {float:left;padding: 5px 2%;width: 96%;text-align: right;color: #666;}
.ComBox .comText {float:left;padding: 10px 3%;width: 93%;position: relative;}
.CmntCoreSpan {padding-top: 10px;float: left;font-family:'Bree Serif';}
.CmntForm { text-align:right;width:96%; margin: 5px 2%; }
.CmntForm input,.CmntForm select,.CmntForm textarea {padding:6px 6px; margin: 1px 0;border-radius:3px;border:1px solid #babdb6;}
.CmntForm textarea {width:90%;background-color:white;}
.CmntForm p {margin-right: 15px;}