publik-base-theme/static/cnil/_custom.scss

a:link, a:visited {
	color: $link-color;
	&:hover {
		text-decoration: underline;
	}
}

a.pk-button:link, a.pk-button:visited {
	color: white;
}

%button {
	@extend %button;
	&:hover {
		text-decoration: none !important;
		box-shadow: none;
	}
}

body {
	background: $lightgray;
	@media screen and ($max-mobile-viewport) {
		background: white;
	}
	h1, h2, h3 {
		font-family: $title-font-family;
	}
}

.site-header {
	background: white;
	border-top: 40px solid #444444;
	@media screen and ($max-mobile-viewport) {
		border-top: 0;
	}
	#logo {
		padding: 40px 0;
		@media screen and ($max-mobile-viewport) {
			padding: 50px 0;
		}
		a {
			display: block;
			margin: 0 auto;
			width: 275px;
			height: 52.25px;
			background: url(img/logo_CNIL.png) no-repeat;
			background-size: cover;
			text-indent: -10000px;
		}
	}
	#toplinks {
		background: $logoblue;
		border: none;
		padding-bottom: 0.6rem;
		a {
			color: white;
		}
	}
}

.site-nav {
	text-align: center;
	font-family: $title-font-family;
	@media screen and ($max-mobile-viewport) {
		text-align: left;
	}
	div.gru-nav > ul > li a {
		font-weight: normal;
	}
	@media screen and ($max-mobile-viewport) {
		div.gru-nav-wrapper {
			background: transparent;
		}
	}
}

#main-content {
	background: white;
	padding: 0.5rem 1rem;
	@media screen and ($max-mobile-viewport) {
	padding: 0.5rem 0.5rem;
	}
}

div.comment-field,
div.textcell {
	line-height: 1.4285714;
}


footer {
	margin-top: 30px;
	@media screen and ($max-mobile-viewport) {
		margin-top: 0;
	}
	h1, h2, h3 {
		color: white;
	}
	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	a:link {
		color: #A9A9A9;
		&:hover {
			color: #4796ec;
		}
	}
}

.cell.textcell.intro,
div#title-section {
	text-align: center;
	h1 {
		font-family: "Open Sans Condensed", $title-font-family;
		font-size: 2.375rem;
		color: #333;
		text-align: center;
		font-weight: bold;
	}
	p {
		font-size: 130%;
		font-style: italic;
		margin: 0 auto;
		max-width: 40em;
	}
	&::after {
		content: '';
		height: 3px;
		width: 170px;
		display: block;
		margin: 30px auto 10px auto;
		background: $gray;
	}
}

// STEPS

.wcs-steps {
	font-family: $title-font-family;
}

.wcs-step--label {
	text-transform: uppercase;
}

@media (min-width: $very-small-limit + 1) {
	.wcs-steps--list {
		justify-content: center;
		align-items: flex-end;
		overflow: hidden;
	}

	.wcs-step {
		flex-direction: column;
		align-items: center;
		flex: 1 1 6em;
		max-width: 11em;
		position: relative;
		font-size: 1.2em;

		&--label {
			position: static;
			font-size: 0.67em;
			order: -1;
			padding-bottom: .66em;
			text-align: center;
		}

		&:not(.current) & {
			&--label {
				display: block;
			}
		}

		// Tie
		&::after {
			position: absolute;
			bottom: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
			left: 50%;
			width: calc(100% + #{$wcs-step-marker-size});
		}
	}
}

div#rub_service div#tracking-code {
	text-align: center;
	button {
		margin-right: 0;
	}
	h3, a {
		font-size: 100%;
		display: inline-block;
	}
}

div.form-validation {
	div.page {
		background: $lightgray;
	}
	div.title label {
		font-weight: bold;
	}
	input[readonly], select[readonly], textarea[readonly] {
		border-width: 0 0 3px 0;
	}
}

div.gru-content #rub_service form.quixote {
	h3, h4 {
		clear: both;
		margin: 25px 0;
		text-align: left;
		font-size: 1.625rem;
		line-height: 40px;
		color: $darkgray;
		border-bottom: none;
	}
	h4 {
		font-size: 1.375rem;
	}
	div.buttons {
	}
}

.wcs-step--label {
	font-weight: 500;
}

div.errornotice {
	color: #cc1a1a;
}

.gru-content div.cell.inverse {
	background: $darkgray;
	color: white;
	h2 {
		background: $darkgray;
		color: white;
	}
}

div.links-list ul > li > a {
	color: $link-color;
}

div.list-of-forms {
	span.form-status {
		font-weight: bold;
	}
	span.form-number {
		opacity: 1;
		font-size: 100%;
		color: $typogray;
	}
}

.a2-block + #frontend-registration-fc, .block + .block-fc,
.block + .block-fc {
	border-left: none;
}

#registration-blocks,
#login-page {
	h2 {
		text-transform: uppercase;
		font-size: 115%;
		margin-top: 2rem;
		margin-bottom: 0;
		padding-bottom: 0;
		@media screen and ($max-mobile-viewport) {
			margin-top: 0;
		}
	}
	form {
		margin-left: 0;
		p {
			margin-left: 0;
		}
	}
}

@media screen and ($max-mobile-viewport) {
	#login-page.methods2 > .block {
		margin-left: 0;
		margin-right: 0;
	}
}

.a2-block + #frontend-registration-fc::after,
.block + .block-fc::after {
	margin-top: 60px;
	font-weight: bold;
	font-size: 1.5rem;
	font-family: $title-font-family;
	color: $logoblue;
}

div.block {
	&.block-fc h2 {
		padding-left: 0;
	}
	div#fc-registration-user-info, div#fc-explanation-text {
		text-align: left;
	}
}

div.a2-block {
	h2 {
		padding-left: 0;
	}
	div#fc-registration-user-info, div#fc-explanation-text {
		text-align: left;
	}
}


h2.intertitle {
	text-align: center;
	color: $title-color;
}

div.registration-bottom {
	padding-top: 20px;
	clear: both;
	position: relative;
	&::before {
		content: '';
		height: 3px;
		width: 170px;
		display: block;
		margin: 30px auto 10px auto;
		background: $gray;
	}

	text-align: center;
}

div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
	padding: 0.5rem 1rem;
}

// adjustments for extra right gutter
div.form-validation div.page {
	padding-left: 2rem;
}

div#rub_service #steps ~ form {
	margin-right: #{0 - $grid-gutter};
	@media screen and ($max-mobile-viewport) {
		margin-right: 0;
	}
}

div.widget label {
	font-weight: bold;
}

.text-check-before-submit {
	text-align: center;
	font-size: 1.25rem;
	font-style: italic;
}

.mention {
	font-size: 80%;
	text-align: center;
	&::before {
		content: '';
		height: 3px;
		width: 170px;
		display: block;
		margin: 30px auto 10px auto;
		background: #c6bfa5;
	}
}

div.error {
	background-image: url(img/alerte-saisie.png);
	background-size: 16px;
}

#profile span.label {
	color: $font-color;
	font-weight: bold;
}

#registration-blocks h2 {
	padding-left: 1rem;
}

#frontend-registration-password.a2-block > div h2,
#frontend-registration-fc.a2-block > div h2 {
	display: none;
}

.a2-block {
	max-width: 48em;
}