html { font-family: 'Raleway', sans-serif; }

.light { font-weight:300;}
.normal { font-weight:400;}
.medium { font-weight:500;}
.semi-bold { font-weight:600;}

.display-none {display:none;}

body {width:980px; margin:20px auto;}
body.voeux {width:1200px; margin:20px auto;}

header, nav, footer, figure, section, article, figcaption, aside { /* @note : introducing new HTML5 elements */	display:block; border:0; margin:0; padding:0;}

#page {float:left; width:100%;}

header { background:url(../images/tetiere.jpg) no-repeat; width:100%; height:53px;}
.voeux header { background:url(../images/tetiere_voeux.jpg) no-repeat;}

.deconnexion {display:inline-block; background:url(../images/bouton_deconnexion.png) no-repeat; width:114px; height:29px; cursor:pointer;}
.deconnexion:hover { background-position:right;} 

.parametres {display:inline-block; background:url(../images/bouton_parametres.png) no-repeat; width:107px; height:28px; cursor:pointer; margin-left:30px;}
.parametres:hover { background-position:right;} 

.telechargelogo {display:inline-block; background:url(../images/bouton_telecharge_logo.png) no-repeat; width:73px; height:29px; cursor:pointer; margin-left:30px;}
.telechargelogo:hover { background-position:right;} 

.telechargecharte {display:inline-block; background:url(../images/bouton_telecharge_charte.png) no-repeat; width:77px; height:29px; cursor:pointer; margin-left:30px;}
.telechargecharte:hover { background-position:right;} 

.tarifs {display:inline-block; background:url(../images/bouton_tarifs.png) no-repeat; width:61px; height:26px; cursor:pointer; margin-left:30px;}
.tarifs:hover { background-position:right;} 

.liste_identifiants {display:inline-block; background:url(../images/bouton_liste_identifiants.png) no-repeat; width:131px; height:26px; cursor:pointer; margin-left:30px;}
.liste_identifiants:hover { background-position:right;} 

.imprimeur {display:inline-block; background:url(../images/bouton_imprimeur.png) no-repeat; width:100px; height:25px; cursor:pointer; margin-left:30px;}
.imprimeur:hover { background-position:right;} 

.retour_accueil {display:inline-block; background:url(../images/bouton_retour_accueil.png) no-repeat; width:122px; height:29px; cursor:pointer; margin-left:30px;}
.retour_accueil:hover { background-position:right;} 

.plus {display:inline-block; float:right; margin:5px; background:url(../images/bouton_plus.png) no-repeat; width:36px; height:36px; cursor:pointer; }
.plus:hover { background-position:right;} 

.modifier {display:inline-block; float:right; margin:5px; background:url(../images/bouton_crayon.png) no-repeat; width:14px; height:20px; cursor:pointer; }
.modifier:hover { background-position:right;} 

.supprimer {display:inline-block; float:right; margin-right:5px; background:url(../images/bouton_croix_supprimer.png) left no-repeat; width:18px; height:18px; cursor:pointer; }
.supprimer:hover { background-position:right; } 

.t24 { font-size:24px;}
.t20 { font-size:20px;}
.t16 {font-size:16px;}
.t15 {font-size:15px;}
.t14 {font-size:14px;}
.t12 {font-size:12px;}
.t11 {font-size:11px;}
.t10 {font-size:10px;}
.t9 {font-size:9px;}
.t8 {font-size:8px;}
.t7 {font-size:7px;}
.t6 {font-size:6px;}

.lh12 {line-height:12px;}
.lh8 {line-height:8px;}

.picto { width:52px; height:32px; background-repeat:no-repeat; background-position:left; display:inline-block;color:#666;}

.picto_dwld { width:49px; height:32px; background-repeat:no-repeat; background-position:left; display:inline-block;color:#666;}

.picto_doc { cursor:pointer; color:#666;}
.picto_doc:hover { cursor:pointer; color:#000;}
.picto_doc:hover .picto { background-position:center; cursor:pointer;}

.lien { cursor:pointer; text-decoration:none;}
.lien:hover {text-decoration:none;}

.rouge { color:#b3071b;}
.gris { color:#666;}
.blanc { color:#FFF;}
.noir { color:#000;}
.maj { text-transform:uppercase;}

input[type=text], input[type=date], input[type=tel], input[type=email], input[type=date], input[type=password] {width:98%; padding:1%; border:solid 1px #ececec; background:#FFF;
	 font-family: 'Raleway', sans-serif; font-size:12px;
}
textarea { width:98%; padding:1%; border:solid 1px #ececec; background:#FFF; resize:none; font-family: 'Raleway', sans-serif; font-size:12px;}

.suivant {
	display:inline-block;
	width:210px;
	height:23px;
	padding:10px 20px 10px 0px;
	text-align:center;
	border:none;
	background:url(../images/bouton_continuer_commander.png);
	font-size:18px;
	font-weight:300;
}
.suivant:hover { background-position:right; cursor:pointer; color:#FFF;}

.bouton {
	display:block;
	text-align:center;
	border:none;
	width:114px;
	background:url(../images/bouton_modif_valider_supprimer.png);
	font-size:14px;
	font-weight:300;
	text-decoration:none; color:#000;
}
.bouton:hover { background-position:right; cursor:pointer;}

#liste_services ul{ margin:5px 0; padding:0; float:left; width:100%; clear:both;}
#liste_services ul li { list-style:none; padding:10px; border-bottom:solid 1px #FFF; color:#FFF; font-size:12px; font-weight:400; color:#000; cursor:pointer;}
#liste_services ul li:hover {background:#cacaca;}
#liste_services ul li.actif {background:#b3071b; color:#FFF; cursor:default;}
#liste_services ul li.actif input {color:#FFF;}
#liste_services ul li.actif:hover {background:#b3071b; color:#FFF}

#liste_collaborateurs { margin:0; padding:0 ; float:left; width:100%; clear:both;}
#liste_collaborateurs li { list-style:none; padding:5px; border-bottom:solid 1px #FFF; color:#FFF; font-size:12px; font-weight:400; color:#000; cursor:pointer;}
#liste_collaborateurs li:hover {background:#DDD;}
#liste_collaborateurs li.actif {background:#b3071b; color:#FFF; cursor:default;}
#liste_collaborateurs li.actif:hover {background:#b3071b; color:#FFF}


#liste_departements ul{ margin:5px 0; padding:0; float:left; width:100%; clear:both;}
#liste_departements ul li { list-style:none; padding:10px; border-bottom:solid 1px #FFF; color:#FFF; font-size:12px; font-weight:400; color:#000; cursor:pointer;}
#liste_departements ul li:hover {background:#cacaca;}
#liste_departements ul li.actif {background:#b3071b; color:#FFF; cursor:default;}
#liste_departements ul li.actif:hover {background:#b3071b; color:#FFF}

#FREN { display:inline-block; background:url(../images/bouton_FR_EN.png) no-repeat right; width:15px; overflow:hidden; height:31px; margin-left:5px; cursor:pointer;}
#FREN:hover{background-position:left;}

#contenu_popup {
	width:600px; 
	position:relative;
	float:left;
	background: white;
	padding: 0 0 20px 0;
}

#contenu_popup h1 { background:#B00; color: white; font-size: 24px; font-weight: 200; padding-left: 30px; padding-top: 20px; padding-bottom: 5px; margin: 0; letter-spacing: 1px; }
#contenu_popup div { background: white; color: black; font-size: 14px; font-weight: 300; padding-left: 30px;}
#contenu_popup div h2 { font-weight: 600; padding: 15px 0; margin: 0; font-size: 14px; }
#contenu_popup div input {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #eee; padding: 5px 10px; width:520px; }

#contenu_popup div button {font-size: 14px; display:block; height: 40px;  }
#contenu_popup div button:disabled  {display:none;  }


/* ++++++++++++++++  VOEUX ++++++++++++++++ */

@font-face {
    font-family: 'Helvetica Neue';
    src: url('voeux-font/HelveticaNeue-Light.woff2') format('woff2'),
        url('voeux-font/HelveticaNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'Darleston';
    src: url('voeux-font/Darleston.eot');
    src: url('voeux-font/Darleston.eot?#iefix') format('embedded-opentype'),
        url('voeux-font/Darleston.woff2') format('woff2'),
        url('voeux-font/Darleston.woff') format('woff'),
        url('voeux-font/Darleston.ttf') format('truetype'),
        url('voeux-font/Darleston.svg#Darleston') format('svg');
    font-weight: normal;
    font-style: normal;
}



.title { font-size:40px; color:#CAAD51; font-weight: 300;}
#liste_voeux ul{ margin:5px 0; padding:0; float:left; width:100%; clear:both; list-style:none; }
#liste_voeux ul li { padding:10px; border-bottom:solid 1px #FFF; color:#FFF; font-size:12px; font-weight:400; color:#000; cursor:pointer;line-height: 20px; position: relative;}
#liste_voeux ul li span {height: 18px; display: none; position: absolute; right: 15px; top:10px;}
#liste_voeux ul li:hover span { display: inline-block;}
#liste_voeux ul li:hover {background:#CCC;}
#liste_voeux ul li.actif {background:#CAAD51; color:#FFF; cursor:default;}
#liste_voeux ul li.actif input {color:#FFF;}
#liste_voeux ul li.actif:hover {background:#CAAD51; color:#FFF}

input.form-voeux {
    width:545px;
    padding: 15px;
    border: solid 1px #CCC;
    margin-bottom: 15px;
}

#modif_carte {background: #f4f4f4;}

.btn-voeux { background: #CAAD51; border: none; border-radius: 0px; color: #FFF; padding: 10px 15px; font-size: 14px; cursor: pointer;}

.card-steps {list-style: none; width: 584px; margin: 0px; padding: 0px;}
.card-steps li { display:inline-block; width:94px; background:#F2ECD4; color:#FFF; font-size:22px; font-weight: bold; padding:5px 10px; border-bottom:solid 2px #FFF; height:28px; cursor: pointer; }

.card-steps li:not(:last-child) { margin-right:3px;}
.card-steps li.active {background:#EBE1BD; border-bottom:solid 2px #EBE1BD; cursor: default;}
.card-steps li.disabled {background:#F2F2F2; border-bottom:solid 2px #FFF; cursor: not-allowed;}

.steps {float:left; background:#EBE1BD; width:502px; padding: 0px 40px; height:510px; font-size: 12px; position:relative;}
.steps h2 {font-weight: normal; font-size: 20px; margin-top: 30px; margin-bottom: 0;}
.steps p {margin-top: 5px;}
.steps input.form-voeux {
    width:470px;
    margin-top: 20px;
}
.steps label { font-size: 16px; display: block; margin-top: 15px;}
.steps label input[type="radio"] { margin-left: 0; margin-right: 15px;}

.steps .next { position:absolute; bottom: 20px; right: 40px;}
.btn-voeux-next { background: #CAAD51; border: none; border-radius: 0px; color: #FFF; height: 44px; display: inline-block; padding: 5px 20px; font-size: 14px; cursor: pointer; font-weight: 100; letter-spacing:0.5px}
.btn-voeux-next.disabled { background: #CCC; cursor: not-allowed;}
.btn-voeux-next:not(.disabled):hover { background: #bba14b; cursor: pointer;}

.btn-voeux-next:not(.disabled):after {
    content :"";
    position: absolute;
    right:-22px;
    top:0px;
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 22px solid #CAAD51;
}
.btn-voeux-next:not(.disabled):hover:after {
    content :"";
    position: absolute;
    right:-22px;
    top:0px;    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 22px solid #bba14b;
}

.btn-voeux-next.disabled:after {
    content :"";
    position: absolute;
    right:-22px;
    top:0px;
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 22px solid #CCC;
}

.steps .previous { position:absolute; bottom: 20px; left: 40px;}
.btn-voeux-previous { background: #CAAD51; border: none; border-radius: 0px; color: #FFF; height: 44px; display: inline-block; padding: 5px 20px; font-size: 14px; cursor: pointer; font-weight: 100; letter-spacing:0.5px}
.btn-voeux-previous:hover { background: #bba14b; cursor: pointer;}

.btn-voeux-previous:before {
    content :"";
    position: absolute;
    left:-22px;
    top:0px;
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid #CAAD51;
}
.btn-voeux-previous:hover:before {
    content :"";
    position: absolute;
    left:-22px;
    top:0px;    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid #bba14b;
}

.custom-select {
  position: relative;
  font-family: Arial;
  background: #FFF;
  border: solid 1px #CCC;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: #FFF;
  border: solid 1px #CCC;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 21px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #555; font-weight: 100;
  padding: 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
  border: solid 1px #CCC;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.steps .img { float:left; margin: 10px; padding: 0px; background-size: 125px 135px; background-repeat: no-repeat; background-position: center 5px;}
.steps .img img { border: solid 5px #EBE1BD; cursor: pointer; width: 125px; height: 135px; }
.steps .img img.active { border: solid 5px #bba14b;}

#step-4 textarea {resize: none; height: 120px; font-size: 24px; line-height: 25px; padding: 10px; font-family: "Darleston";}
.card-preview {width:325px; height:346px; background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; margin-top: 15px;}
.card-preview .direction { position: absolute; top:20px; left:0px; background: #BB171F; color: #FFF; font-family: "Helvetica Neue"; padding: 5px 12px 5px 12px; font-size: 6px; line-height: 10px;}
#text-preview {width:245px; background:#FFF; padding: 10px 40px 10px 40px; min-height: 18px; font-size: 12px; line-height: 15px; font-family: "Darleston";color: #000;}
#signature-preview {width:245px; background:#FFF; padding: 5px 40px 10px 40px; min-height: 15px; font-size: 12px; line-height: 15px; font-family: "Darleston";color: #000; text-align: right;}
#download { font-size: 12px; text-align: center; margin-top: 50px; cursor: pointer;}
#download a {text-decoration: none; color: #FFF;}
#download img {margin-left: 10px;}