@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);

/* First for IE 4–8 */
@font-face {
	font-family: DINWeb;
	src: url("fonts/DINWeb.eot");
}

/* Then for WOFF-capable browsers */
@font-face {
	font-family: DINWeb;
	src: url("fonts/DINWeb.woff") format("woff");
}

#toplinks {
	background: white;
	box-shadow: none;
	border-color: $primary-color;
}

#receipt-intro a {
	color: $href-color;
	font-weight: bold;
	text-decoration: underline;
}

div#content a#disclose-dataview {
	display: none;
}

div.dataview {
	display: block;
}

.wcs-forms-of-category-affaires-citoyennes,
.wcs-forms-of-category-population,
.wcs-forms-of-category-urbanisme,
.wcs-forms-of-category-recherche-genealogique,
.wcs-forms-of-category-interet-general,
.wcs-forms-of-category-environnement,
.wcs-forms-of-category-mobilite,
.wcs-forms-of-category-organisation-d-evenements,
.wcs-forms-of-category-travaux,
.wcs-forms-of-category-logement {
	background-repeat: no-repeat;
	background-size: 35px 35px;
	padding-left: 40px !important;
}

.wcs-forms-of-category-affaires-citoyennes {
	background-image: url("images/ic_population.png");
}

.wcs-forms-of-category-population {
	background-image: url("images/ic_etatcivil.png");
}

.wcs-forms-of-category-urbanisme {
	background-image: url("images/ic_urbanisme.png");
}

.wcs-forms-of-category-recherche-genealogique {
	background-image: url("images/ic_genealogie.png");
}

.wcs-forms-of-category-interet-general {
	background-image: url("images/ic_interetgeneral.png");
}

.wcs-forms-of-category-environnement {
	background-image: url("images/ic_environnement.png");
}

.wcs-forms-of-category-mobilite {
	background-image: url("images/ic_mobilite.png");
}

.wcs-forms-of-category-organisation-d-evenements {
	background-image: url("images/ic_manifestation.png");
}

.wcs-forms-of-category-travaux {
	background-image: url("images/ic_travaux.png");
}

.wcs-forms-of-category-logement {
	background-image: url("images/ic_logement.png");
}

/* Make bulleted list*/
#columns .wcsformsofcategorycell ul li {
	background-image: url("images/form_puce.png");
	background-size: 10px 10px;
	background-attachement: fixed;
	background-position: left center;
	background-repeat: no-repeat;
}

/* Print a lock behind required authentication forms*/
#columns .wcsformsofcategorycell ul li.required-authentication a {
	width: auto;
	display: inline-block;
	background-image: url("images/form_lock.svg");
	background-size: 10px 10px;
	background-attachement: fixed;
	background-position: right center;
	background-repeat: no-repeat;
}

/* Print underline if required FEDICT authentication forms*/
#columns .wcsformsofcategorycell ul li.required-fedict-authentication a {
	width: auto;
	display: inline-block;
	background-image: url("images/form_lock.svg");
	background-size: 10px 10px;
	background-attachement: fixed;
	background-position: right center;
	background-repeat: no-repeat;
	text-decoration: underline;
}

/* Nouvelle class*/
#main-content ul li a:hover {
	color: $highlight-text-color !important;
}

a {
	text-decoration: none;
}

/* surcharge*/
div#services > ul > li,
div.a2-block,
#content div.cell,
div.block {
	text-align: left;
	background: white;
	border-radius: 3px;
	border: 0px;
}

/* resize text input for "nb_exemplaire" field*/
.nb_exemplaire input {
	width: 60px;
}

/* surcharge*/
div#rub_service div.category ul a,
div#services > ul > li > ul a,
div#account-management ul a,
div.categoriescell ul a,
div.wcsformsofcategorycell ul a,
div.wcscurrentdraftscell ul a,
div.wcscurrentformscell ul a {
	padding: 1em;
	display: block;
	border-bottom: 0px !important;
	position: relative;
}

/* surcharge*/
div#rub_service div.category h3,
#content div.a2-block h2,
#content div.block h2,
div#services > ul > li > strong > a,
#content div.textcell h2:first-child,
#content div.cell h2:first-child,
div#rub_service h2 {
	background: transparent url("images/hr.png") left bottom no-repeat;
	background-size: 100% 2px;
	display: block;
	position: relative;
	text-transform: none;
	color: $highlight-text-color;
	padding: 1ex;
	border-radius: 3px;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	font-size: 14.3px;
	font-family: sans-serif;
	border: 0;
}

div#tracking-code h3 {
	border: 0;
	background: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 100%;
	font-weight: bold;
	color: #666;
	padding-bottom: 0;
	&::after {
		content: " :";
	}
}

div#tracking-code a {
	display: inline-block;
	font-size: 130%;
}

label[for="id_username"]::before,
label[for="id_email"]::before {
	content: url("images/icone_user.png");
	visibility: visible;
}

label[for="id_username"] {
	visibility: hidden;
	width: 54px;
	height: 1px;
}

[for="id_username"],
#id_username {
	float: left;
}

label[for="id_password"]::before {
	content: url("images/icone_cadenas.png");
	visibility: visible;
}

label[for="id_password"],
label[for="id_email"] {
	visibility: hidden;
	width: 54px;
	height: 1px;
}

[for="id_password"],
#id_password,
[for="id_email"],
#id_username {
	float: left;
}

input[value="Connexion"] {
	background: url("images/fleche_epaisse_droite.png") no-repeat top center
		transparent;
	color: #ed226c;
	font-size: 70%;
	box-shadow: none;
	border: none;
	float: right;
	padding-top: 35px;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	bottom: 1ex;
	height: auto;
}

input[value="Connexion"]:hover {
	box-shadow: none;
}

label[for="id_username"]::before,
label[for="id_password"]::before,
label[for="id_email"]::before {
	margin-left: 31px;
	margin-top: 8px;
	position: relative;
	visibility: visible;
	z-index: 1;
}

.form-field-required label:after {
	content: "*";
	color: #d90024;
	padding-left: 1ex;
	font-size: 80%;
}

div#rub_service div.form-validation div.page {
	background: transparent;
	padding-left: 0;
	> h3 {
		color: #be0d67;
		border-bottom: 2px solid #e2e2e2;
		font-size: 120%;
		margin-bottom: 0.5em;
	}
}

#messages li,
div.infonotice,
div.warningnotice,
div.errornotice {
	background: #e6f5fc;
	color: #f2f2f2;
}

#messages li,
div.infonotice,
div.warningnotice,
div.errornotice {
	background: #e6f5fc;
	color: #666768;
}

#messages li::before,
div.infonotice::before,
div.warningnotice::before,
div.errornotice::before {
	font-family: FontAwesome;
	font-size: 2em;
	left: 0.5em;
	position: absolute;
	top: 0.25em;
	color: $highlight-text-color;
}

div#rub_service h2 {
	text-align: left;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 0px 0px 0px 10px;
	background: linear-gradient(to right, #f6f6f6, white);
}

/* Remove border on fields validate form page */
input[readonly],
select[readonly],
textarea[readonly] {
	border-width: 0;
	padding-left: 0;
	padding-top: 0;
}

label {
	font-size: 1.2em;
	margin-bottom: 0;
}

/* profile page */
.page-profil ul#id_title > li {
	list-style-type: none;
}

.page-profil #content {
	.column:first-child {
		float: right;
		width: 73%;
	}
	.column:last-child {
		float: left;
		width: 25%;
	}
	.column {
		#a2-profile {
			background: linear-gradient(to bottom, #f6f6f6, #f6f6f6 30%, white);
			margin-right: 0;
			border-radius: 10px;
		}
		#account-management {
			border-radius: 10px;
			background: linear-gradient(to bottom, #f6f6f6, #f6f6f6 30%, white);
			h2 {
				color: $font-color;
			}
			a::after {
				content: " ";
				display: block;
				height: 1px;
				margin-left: 5%;
				width: 90%;
				top: auto;
				bottom: 0;
			}
		}
		h2 {
			text-transform: uppercase;
			background: transparent;
			font-weight: bold;
		}
	}
}

.page-profil .form-field-required {
	margin: 0 auto;
	padding-bottom: 1ex;
}

.page-profil .a2-block p {
	display: block;
	margin: 1em auto;
}

/* Libellé du profile (auth) et valeur alignée*/
#profile dt {
	color: #666666;
	float: left;
	font-size: 100%;
	width: 40%;
}

#profile dd {
	font-weight: bold;
}

/*Boutton "commander un autre document"*/
a#workflow-button-command,
a#new-command {
	vertical-align: middle;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: normal;
	color: #be0d67;
	background-color: white;
	width: 200px;
	height: 3em;
	line-height: 1.5em;
	padding: 1px;
	border: solid #be0d67 1px;
	border-radius: 10px;
	text-align: center;
	text-decoration: None;
}

/*Bouton "Valider votre commande"*/
a#workflow-button-paid,
input#pay {
	vertical-align: middle;
	float: left;
	margin-right: 20px;
	margin-left: 24%;
	display: block;
	font-size: 1.2em;
	font-weight: normal;
	color: white;
	background-color: #be0d67;
	width: 200px;
	height: 3em;
	line-height: 2.5em;
	padding: 1px;
	border: solid #be0d67 1px;
	border-radius: 10px;
	text-align: center;
	text-decoration: None;
}

/* Keep border style solid for table presentation in last forms validation page*/
.form-validation .TableListRowsWidget table td {
	border: 1px solid black;
}

/* Align label for error connexion*/

.page-profil input[type="submit"]:hover {
	box-shadow: none;
	opacity: 0.7;
}

/* When a profile data is empty, we create a new line for next "print field"*/
#profile dl > dd > ul {
	display: inline;
}

/* In forms title*/
div.widget div.title {
	font-weight: bold;
}

/* In forms h4 style (see first word "Traitement" in certif cohab legale)*/
h4 {
	font-weight: normal;
	text-transform: uppercase;
}

#footer {
	border-top: 1px solid #eee;
	text-align: center;
}

/* Change size for button => usefull for "delete" draft form button*/
.fargo-pick-popup button,
div#content button {
	height: 100%;
}

/* Class css qui peut servir à rendre invisible un champs en fonciton d'une valeur testée dans extra.js*/
.invisible {
	display: None;
}

/*Style for new undo BUTTON with 'submit' class*/
div.a2-block .submit {
	background: #be0d67 none repeat scroll 0 0;
	border: 1px solid transparent;
	box-shadow: 1px 0 5px rgba(0, 0, 0, 0.21);
	color: white;
	cursor: pointer;
	height: 2.5em;
	margin-right: 2ex;
	padding: 5px 15px;
	transition: all 0.2s ease 0s;
	vertical-align: middle;
	width: 12em;
}

.page-index .column {
	border-collapse: separate;
	display: table;
	float: none;
	margin-bottom: 20px;
	width: 100%;
}

/* Cells' title in index page*/
.page-index #content div.textcell h2:first-child,
.page-index #content div.cell h2:first-child {
	background-image: none;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
/* Cells in index page*/
.page-index #main-content > #content .cell {
	background-image: linear-gradient(#f6f6f6, white);
	border-radius: 10px 10px 0px 0px;
	border-bottom: 2px solid #dcdcdc;
	margin-bottom: 2em;
	border-left: 10px solid #fcfcfc;
	border-right: 10px solid #fcfcfc;
	width: 50%;
	display: table-cell;
	vertical-align: top;
}

.page-index div#population,
.page-index div#archives,
.page-index div#etat-civil,
.page-index div#urbanisme {
	background-repeat: no-repeat;
	background-size: 2em 2em;
	margin-left: 0;
	line-height: 1em;
	padding-bottom: 1em;
	padding-left: 3em;
}

.page-index #content div.textcell div#population h2,
.page-index #content div.textcell div#archives h2,
.page-index #content div.textcell div#etat-civil h2,
.page-index #content div.textcell div#urbanisme h2 {
	text-align: left;
}

.page-index div#population {
	background-image: url("images/ic_population.png");
}

.page-index div#archives {
	background-image: url("images/ic_population.png");
	/*background-image: url("images/ic_archives.png");*/
}

.page-index div#etat-civil {
	background-image: url("images/ic_etatcivil.png");
}

.page-index div#urbanisme {
	background-image: url("images/ic_population.png");
	/*background-image: url("images/ic_urbanisme.png");*/
}

.page-index div#content div.column div#colleft,
.page-index div#content div.column div#colright {
	max-width: 48%;
}

.page-index div#content div.column div#colleft h2,
.page-index div#content div.column div#colright h2 {
	text-align: left;
}

.page-index div#content div.column div#colleft {
	float: left;
}

.page-index div#content div.column div#colright {
	float: right;
	padding: 1em;
}

.page-index #content .column:last-child .cell.wcscurrentformscell,
.page-index #content .column:last-child .cell.wcscurrentdraftscell {
	display: block;
	margin-bottom: 0;
	width: 100%;
}

.page-index #content .column:last-child .cell.wcscurrentformscell {
	background: #f6f6f6 none repeat scroll 0 0;
	border-bottom: medium none;
	padding-bottom: 2em;
}
.page-index #content .column:last-child .cell.wcscurrentdraftscell {
	min-height: 165px;
}

/* in forms' page : format word "TRAITEMENT" */
form.quixote > div > p > u:first-child {
	text-transform: uppercase;
	text-decoration: none;
}

.page-profil #Mot_de_passe input[name="cancel"] {
	display: None;
}

/*Formulaire*/

div.a2-block form input[type="submit"] {
	margin-top: 1.5em;
}

div#gauche {
	width: 25.5%;
}

div#gauche + div#rub_service {
	padding-left: 2em;
	width: 74.5%;
}

.comment-field {
	margin-bottom: 2em;
}

.comment-field li {
	line-height: 1.5em;
	margin-bottom: 1em;
}

#var_rb_concerne .content {
	margin-top: 0.75em;
}

.title > label {
	display: inline-block;
	padding-bottom: 0em;
}

#content #columns {
	max-width: 100%;
}

/* correct a bug in first eId connexion with profile form */
.form-field-required label[for="id_email"]::before {
	content: None;
	visibility: hidden;
}

.form-field-required #id_email {
	border: 1px solid #aaa;
	border-radius: 0px;
	margin-top: 6px;
	padding-left: 2em;
	width: 100%;
}

.form-field-required label[for="id_email"] {
	height: 20px;
	visibility: visible;
	width: 100%;
}
/* END correct a bug in first eId connexion with profile form */

/* Skin page d'accueil */
.page-index #main-content > #content .column:first-child .cell:nth-child(2) {
	border: 1px solid #be0d67;
	border-radius: 10px;
}

.page-index #main-content > #content .column:first-child .cell:nth-child(2) h2 {
	/*background: #be0d67 none repeat scroll 0 0;*/
	border-radius: 0;
	/*box-shadow: 1px 0 5px rgba(0, 0, 0, 0.21);*/
	display: block;
	font-size: 1em;
	/*color:white;*/
	margin: 1ex auto 2.5ex;
	max-width: 52%;
	text-align: center;
}

.page-index
	#main-content
	> #content
	.column:first-child
	div.following_code_connected
	h2 {
	color: #be0d67;
	background: transparent;
	display: inherit;
	text-transform: uppercase;
	box-shadow: inherit;
	margin: 0 auto;
	margin-bottom: 0;
}

/*
.page-index #main-content > #content .column:first-child .cell:nth-child(2) .wcs-tracking-code-input h2{
    background: transparent;
    display: inherit;
    text-transform: uppercase;
    box-shadow: inherit;
    margin:0 auto;
    margin-bottom:0;
}*/

.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	.wcs-tracking-code-input
	p:nth-child(2n + 1) {
	margin: 2ex 0;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	.wcs-tracking-code-input {
	border: none;
	border-radius: 0;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	.wcs-tracking-code-input
	h2:hover {
	box-shadow: inherit;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	h2:hover {
	box-shadow: 0px 0px 5px #777;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	h2
	a {
	color: #fff;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	p:first-child {
	margin-bottom: 2ex;
}
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	p:nth-child(2n + 2)::after {
	content: "↳";
	display: block;
	font-size: 127%;
}
/*No ↳ in lists' last child */
.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	p:last-child::after {
	content: inherit;
}
/*END No ↳ in lists' last child */

.page-index
	#main-content
	> #content
	.column:first-child
	.cell:nth-child(2)
	p:nth-child(2n + 1) {
	margin: -3ex 0ex 2ex 4ex;
}

/* END Skin page d'accueil*/

/* Style alert if error on field*/
.form_field_alert {
	background: url("images/alert.jpg") no-repeat left top;
	background-size: 13px 13px;
	padding-left: 18px;
	color: red;
}
/* END Style alert if error on field*/

/* New link color to highlight them.*/
a {
	color: #be0d67;
}

a:hover {
	text-decoration: underline;
}
/* END of highlight links*/

/*Mise en apge "porte-documents" sur page d'acceuil*/
a.icone-porte-documents {
	background-image: url("images/icone_porte-documents.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 100%;
	height: 125px;
}
/*END Mise en page "porte-doc..."*/

/*Print eID mini picture next to "demarche" name*/
#columns .wcsformsofcategorycell ul li.required-fedict-authentication a::after {
	background-color: Transparent;
	content: url("images/beid_image_mini.png");
	display: inline-block;
	height: 22px;
	margin-left: 105%;
	margin-top: 0.7em;
	text-align: right;
	width: 34px;
}
/* End Print eID...*/

/*Index page*/
div#columns > div.column:first-child div.jq_txt_connexion > div > div > h2 {
	background-color: transparent !important;
	box-shadow: None !important;
}

/* Form validation page : reduce margin between page*/
div.form-validation div.page {
	margin-bottom: -1.7em;
}
/* End of Form validation page ... */

div#tracking-code {
	display: none;
}
div#tracking-code h3 {
	display: none;
}
div#tracking-code a {
	display: none;
}

div#receipt-intro > p#tracking-code {
	display: none;
}

div.list-of-forms span.form-status {
	position: relative;
	right: 1ex;
	display: block;
	text-align: right;
}

select {
	-moz-appearance: menulist !important;
	-webkit-appearance: menulist !important;
}

/*End Index page*/

a#publik-portal-agent {
	top: 30px;
	right: 6%;
	border: None;
}

div.widget table input,
div.widget table select {
	width: 100%;
}

/* Rentre un champs invisible grace aux styles complementaires*/
form.quixote div.hidden,
div.invisible {
	display: none;
}

// Steps

.wcs-steps {
	border-radius: 0 0 0 10px;
	font-size: 1.2em;
	@include desktop-vertical-steps() {
		min-height: 400px;
		font-size: 1.5em;
		background: linear-gradient(to bottom, #f6f6f6, #f6f6f6 30%, white);
		border-radius: 10px 10px 0 0;
	}
}
.wcs-step {
	&--marker {
		font-weight: bold;
		border: 1px solid;
	}
	&--label {
		font-weight: normal;
	}

	@include desktop-vertical-steps() {
		border-bottom: 1px solid #ccc !important;
		margin-bottom: $wcs-steps-spacing;
		padding-bottom: $wcs-steps-spacing;

		&--marker {
			border: none;
		}
	}
}


// Fix login button

input[value="Connexion"]:hover {
    box-shadow: none;
    background: url("images/fleche_epaisse_droite.png") no-repeat top center transparent;
    color: white;
    background-color: #3a001d;
}
