body {
  padding-top: 10px;
}

.hidden {
    display:none;
    visibility:hidden;
}

.message_info, 
.message_success, 
.message_warning, 
.message_error {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px 15px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	border-radius:.5em;
}

.message_info {
	color: #00529B;
	background-color: #BDE5F8;
	background-image: url('info.png');
}
.message_success {
	color: #4F8A10;
	background-color: #DFF2BF;
	background-image: url('success.png');
}
.message_warning {
	color: #9F6000;
	background-color: #FEEFB3;
	background-image: url('warning.png');
}
.message_error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('error.png');
}

/* Add here all your css styles (customizations) */
/* Fond blanc impératif : les pages sont intégrées en iFrame sur les sites des communes. */
html {
    background: #fff;
}
/* Typographie : ces pages sont affichées en iFrame DANS le site de la commune, elles
   doivent donc suivre la charte de l'hôte et non celle du backend. Pile, couleur, corps
   et interligne repris tels quels de www.chaux-de-fonds.ch (media/apicdfrcv/css/base.css,
   règle « body ») : le widget se fond dans la page qui l'accueille. */
body {
    color: #595959;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
	background: none repeat scroll 0 0 #fff;
}
.wrapper {
    background: none repeat scroll 0 0 transparent;
}
h1, h2 {
    font-size: 1.3em;
    padding-bottom: 10px;
	font-weight:bold;
}
h3, .showhide {
    font-size: 1.1em;
    padding-bottom: 10px;
	text-decoration: underline;
	margin-top: 20px;
	margin-bottom: 10px;
}
.showhide {
	margin-top: 0;
}
h3.nounderline {
	text-decoration: none;
}
h1, h2, h3, h4, h5, .showhide {
    line-height: 1.2;
	color: #595959;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}
a, .sky-form a {
    color: #005fa0;
}
/* Survol des liens comme dans le contenu de l'hôte : noir + souligné
   (default_cdf.css, « #maincontent .blog a:hover »). */
a:hover, .sky-form a:hover {
    text-decoration: underline;
	color: #000000;
}
a:link {
    text-decoration: none;
}
.blue {
	color: #005fa0;
}
.titre, .gras {
	font-weight: bold;
}
.content {
	padding: 28px 28px 29px 29px;
}
.info {
	font-size: 13px;
}
.sky-form {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
    box-shadow: 0;
    color: #595959;
    margin: 0;
	border: 0;
    outline: medium none;
	font-size: 16px;
}
.sky-form label.select {
	padding: 0;
}
.sky-form fieldset {
    border: 0;
    display: block;
    padding: 0;
	background: none repeat scroll 0 0 transparent;
}
.sky-form label.radio p {
    margin: 0;
	font-weight:bold;
	line-height: 27px;
}
.sky-form .radio, .sky-form .checkbox {
    font-size: 16px;
}
.sky-form .checkbox.showhide {
    font-size: 1.1em;
}
.sky-form label.radio {
    line-height: 24px;
}
.sky-form label.label {
    line-height: 24px;
	padding:0 0 5px 0;
	margin: 0;
}
.sky-form .select i {
    height: 8px;
    right: 13px;
    top: 13px;
    width: 9px;
}
.sky-form label.age {
    width: 185px;
}
.sky-form section {
    margin-bottom: 20px;
}

/*Button Styles
------------------------------------*/
.btn-u {
    background: none repeat scroll 0 0 #005fa0;
}
.btn-u:hover, .btn-u:focus {
    background: none repeat scroll 0 0 #666666;
}
.btn_i_paddingright {
    padding-right: 8px;
}
.btn_i_paddingleft {
    padding-left: 8px;
}

.btn {
   box-shadow: none;
}

.btn-u {
   white-space: nowrap;
   border: 0;
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   font-weight: 400;
   padding: 6px 13px;
   position: relative;
   display: inline-block;
   text-decoration: none;
}
.btn-u:hover {
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sky-form .state-error + em {
	color: #CF4D4D;
	margin: 6px;
}
.sky-form .inline-group .state-error + em {
	display: inline;
}

/*.sky-form .input input[disabled], .sky-form .select select[disabled], .sky-form .textarea textarea[disabled] {
    border-width: 1px;
    color: #999;
    font-size: 14px;
}*/
.sky-form .radio, .sky-form .checkbox {
    color: #555;
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
table.dataTable.no-footer, table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #999;
}
table.dataTable thead > tr > th {
    padding: 8px 10px;
}
.col-xs-12 table {
	margin-bottom: 25px !important;
}
.padding-top {
	padding-top:10px;
}
.label-ie9 {
	display:none !important;
}
.ie9 .label-ie9, html[data-useragent*='MSIE 10.0'] .label-ie9 {
	display:block !important;
}
.ui-datepicker {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
}
.ui-datepicker-calendar span {
	text-align: center;
}
.degresharmos h3 {
	margin-top:0;
}
.sky-form .input input:disabled {
    color: #bbb;
}
/* table */
.table thead > tr > th {
    border-bottom: 1px solid #999;
}
.table thead > tr > th.noborder {
    border: 0 none transparent;
}
.table-striped > tbody > tr > td.even {
    background-color: #fff;
}
.table-striped > tbody > tr > td.odd {
	background-color: transparent;
}
.table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border:0;
}
.table > thead > tr > th.nobottom {
	border-bottom:none;
}
.table > thead > tr > th.notop {
	border-top:none;
}
.table-hover > tbody > tr.hoverCell > td,
.table-hover > tbody > tr.hoverCell > th,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #CCDFEC;
}
/* /table */
@media only screen and (min-width: 481px) and (max-width: 760px) {
	.row {
		margin-left: -10px;
		margin-right: -10px;
	}
	.sky-form .row {
		margin: 0;
	}
	.sky-form .col-12 {
		padding-right: 15px;
		padding-left: 15px;
	}
}

.sky-form .state-error + em {
	color: #CF4D4D;
	margin: 6px;
}
.sky-form .inline-group .state-error + em {
	display: inline;
}

.col {
    margin-bottom: 10px;
}

/* Fer à gauche, comme le site hôte : chaux-de-fonds.ch ne justifie jamais son
   contenu (aucun « justify » dans son CSS, body en text-align: left). La
   justification, ajoutée ici en 2013, creusait en plus des rivières dès que la
   colonne se resserre — ces pages sont intégrées dans des gabarits de largeur
   inconnue. */
p {
    text-align: left;
}

/* ------------------------------------------------------------------
   Maquette mutualisation 2026 (doc\Maquette\main.css) : conteneur
   étroit + liste des alertes du widget iFrame.
   ------------------------------------------------------------------ */
.container {
    max-width: 750px;
}

/* Chapeau : fer à gauche même en colonne large — la justification globale
   creuse des rivières sur ces deux phrases. */
/* Le widget n'a pas de gouttière propre : les 15 px de Bootstrap décalaient la
   liste vers la droite par rapport aux paragraphes de la page hôte. La commune
   gère déjà ses marges autour de l'iFrame, le texte doit partir du même fer. */
.alertes-widget .container,
.alertes-widget .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
}

.alertes-intro p {
    margin: 0 0 15px;
    text-align: left;
}

/* Titre de la liste au gabarit des h2 de contenu de l'hôte (20 px, gras, #595959,
   même respiration verticale) : dans leur page, la liste doit se lire comme une
   section de l'article, pas comme un encart d'un autre site. */
.alertes-titre {
    margin: 0;
    padding: 11px 0 13px;
    font-size: 20px;
    font-weight: bold;
    color: #595959;
}

.alertes {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccc;
}

.alertes li {
    display: flex;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}

.alertes time {
    flex: 0 0 7em;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    /* chiffres à chasse fixe : les dates s'alignent en colonne */
    font-variant-numeric: tabular-nums;
}

.alertes .jour {
    display: block;
    font-weight: bold;
}

/* Gris neutre à 4.5:1 sur blanc (minimum WCAG AA à 14 px) : les gris secondaires
   de l'hôte (#a6a6a6, #939393) sont dans le ton mais plafonnent à 2.4 et 3.1:1,
   on ne les reprend donc pas tels quels. */
.alertes .heure {
    display: block;
    color: #767676;
}

.alertes p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    /* pas de justification : colonne étroite, les messages sont courts */
    text-align: left;
}

.alertes-vide {
    padding: 14px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #767676;
    text-align: left;
}

@media only screen and (max-width: 480px) {
    .alertes li {
        display: block;
    }

    .alertes time {
        display: block;
        padding-bottom: 4px;
    }

    .alertes .jour {
        display: inline;
    }

    .alertes .heure {
        display: inline;
        padding-left: 8px;
    }
}