@charset "utf-8";
/* CSS Document */
.CSS-Barre3D-Vert{
	display: table;
	max-width: 1244px; /* déterminer la largeur de la div directement dans le code de la page */
	margin: 5px auto;
	padding: 0;
	/*background:linear-gradient(deepskyblue, dodgerblue);*/
	background:linear-gradient(lightgreen, forestgreen);
	border-radius: 6px;
    border-width: 3px;
    border-style: ridge;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: small;
}
.CSS-Barre3D-Vert table tr td{
	display: table-cell;
	min-width: 120px; /* déterminer la largeur du td directement dans la page*/
}
.CSS-Barre3D-Vert table tr td label{
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3px;
    justify-content: center; 
    align-content: space-between; 
    justify-items: center; 
    align-items: center;  
    /*border-right-style: groove;*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
					0 -1px 0 hsl(120, 100%, 32%) inset, 
					0 -2px 0 hsl(120, 100%, 38%) inset, 
					0 -3px 0 hsl(120, 100%, 44%) inset, 
					0 -4px 0 hsl(120, 100%, 50%) inset, 
					0 -5px 0 hsl(120, 100%, 60%) inset;
    caret-color: transparent;
    color: rgba(0, 0, 0, .7); 
    padding: 8px 8px 10px 8px;
	position: relative;
    text-align: center;
    text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
	transition: all .3s .1s;
}
.CSS-Barre3D-Vert table tr td:first-child label{
    border-radius: 5px 0 0 5px;
}
.CSS-Barre3D-Vert table tr td:last-child label{
    border-radius: 0 5px 5px 0;
}
.CSS-Barre3D-Vert table tr td label:hover,
.CSS-Barre3D-Vert table tr td label:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(120, 100%, 42%) inset, 
                0 -2px 0 hsl(120, 100%, 48%) inset, 
                0 -3px 0 hsl(120, 100%, 54%) inset, 
                0 -4px 0 hsl(120, 100%, 60%) inset, 
                0 -5px 0 hsl(120, 100%, 70%) inset;
    color: rgba(255, 215, 0, .9);
	padding: 8px 25px 10px 25px;
    text-shadow: 1px 1px 2px darkred,
        0 0 1em deepskyblue,
        0 0 0.2em dodgerblue;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, .9);*/
	transition: all .3s 0s;
}
.CSS-Barre3D-Vert table tr td label input{
    display: none;
}
.img-checked {
	display: none;
}
.img-hover{
    display: none;
}
.CSS-Barre3D-Vert table tr td label input:checked ~ .img-checked{
    display:inline-grid;
}
.CSS-Barre3D-Vert table tr td label input:checked ~ .img-unchecked{
    display: none;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-hover{
    display: inline-grid;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-checked{
    display: none;
}
.CSS-Barre3D-Vert table tr td label:hover input:not(:checked) ~ .img-unchecked{
    display: none;
}
/* Les styles ci-dessous servent à mettre un petit point bleu qui devient blanc au focus*/
/*.CSS-Barre3D-Vert table tr td label:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;

}
.CSS-Barre3D-Vert table tr td label::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 6px;
    height:6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}
.CSS-Barre3D-Vert table tr td label:hover::before,
.CSS-Barre3D-Vert table tr td label:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}
.CSS-Barre3D-Vert table tr td label input{
    display:none;
}
*/
/* Styles pour les boutons 3D */
/* Bouton radio de sélection Vert - Orange en hover - Bleu en active (click) */
.Button_3D_Vert {
    border: 0;
    line-height: 3;
    padding: 0 20px;
	font-family: "Comic Sans MS", cursive;
    font-size: 13px;
	font-weight: bold;
    text-align: center;
    color: #FF0;
    text-shadow: 2px 2px 2px #000;
    border-radius: 7px;
    background-color: rgba(51, 204, 51, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
	height: 2em;
	vertical-align: middle;
}
.Button_3D_Vert:hover{
    background-color: rgba(255, 153, 102, 1);
    color: #000;
    text-shadow: 2px 2px 2px #FF0;
}
.Button_3D_Vert:active {
    background-color: rgba(67, 220, 255, 1);
    color: #C00;
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.Button_3D_Beige {
    border: 0;
    /*line-height: 3;*/
    padding: 5px 10px 5px 10px;
	font-family: "Comic Sans MS", cursive;
    font-size: 13px;
	font-weight: bold;
    text-align: center;
    color: #000000;
    text-shadow: 2px 2px 2px #778899;
    border-radius: 7px;
    background-color: rgba(238, 232, 170, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
	height: 3em;
	vertical-align: middle;
}
.Button_3D_Beige:hover{
    background-color: rgba(255, 153, 102, 1);
    color: #000;
    text-shadow: 2px 2px 2px #FF0;
}
.Button_3D_Beige:active{
	background-color: rgba(255,255,255,1);
	color: #00F;
	box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.Button_3D_Beige:disabled{
    background-color: silver;
    color: gray;
    text-shadow: 2px 2px 2px gray;
}
.Button_3D_Beige:disabled:active{
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}
/* ----------------------------------------------------------------------------------*/
/* Styles pour les textes dans les pages */
.TitreDePage {
	font-family: "Comic Sans MS", cursive;
	border: medium ridge #69F;
	font-size: large;
	font-style: italic;
	font-weight: bold;
	text-transform: capitalize;
	color: #F00;
	text-shadow: 1px 2px 2px #000;
	border-radius: 10px;
	border-style: groove;
	background-color: #FFC;
	border-color: #09F;
	display: inline-block;
	text-align: center;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 6px;
	
}
.txt_noir_14px_normal_gauche {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight:normal;
    font-style:normal;
	text-align:left;
	color: #000000;
}
.txt_noir_14px_gras_centre {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	color: #000000;
}
.txt_noir_14px_gras_italic_centre {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
    font-style: italic;
	text-align: center;
	color: #000000;
}
.txt_bleu_14px_gras_centre {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	color: #0000FF;
}
.txt_gris_14px_gras_centre {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	color: gray;
}
.txt_rouge_14px_gras_centre {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	color: #FF0000;
}
.txt_bleu_14px_gras_droite {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: right;
	color: #0000FF;
}
.txt_bleu_14px_gras_gauche {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-weight: bolder;
	text-align: left;
	color: #0000FF;
}
.txt_vert_14px_gras_italic_gauche {
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
	font-style: italic;
	font-weight: bolder;
	text-align:left;
	color: green;
}

.DivConteneurBoutons {
    background-image:url("Images/PapierBleu.png");
    border-color: gold;
    border-radius: 7px;
    border-style: ridge;
    border-width: 5px;
    display: table;
    max-width: 1244px;
}
.TitreDivConteneurBoutons{
	color: #006633;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	font-size: 16px;
	font-style: italic;
	text-align:center;
    padding-top: 5px;
    padding-bottom: 10px;
}
.DivConteneurTableau {
    background-image:url("Images/PapierVert.png");
    border-color: firebrick;
    border-radius: 7px;
    border-style: ridge;
    border-width: 5px;
    display: table;
    max-width: 1244px;
    padding: 3px;
}
.DivConteneurSelecteurComparateur{
    background-image:url("Images/PapierJaune.png");
    border-color: firebrick;
    border-radius: 7px;
    border-style: ridge;
    border-width: 5px;
    padding: 10px;
}
.DivConteneurGraphDyn {
    border-color: goldenrod;
    border-radius: 8px;
    border-style: ridge;
    border-width: 3px;
    display: inline-block;
    margin: 1px;
    max-width: 620px;
    padding: 0px;
    
}
.SelecteurListeDeroulante {
    align-items: center;
    background-color:lightgray;
    border-color:deepskyblue;
    border-radius: 7px;
    border-style: ridge;
    border-width: 5px;
    display: inline-flex;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    padding: 5px;
}
.SelectDate {
    border: none;
    background-color:lightgray;    
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    padding: 5px;
}
.TableDatasJMA {
	background-color:#FFFFE0;
	border:groove;
    border-radius: 10px;
    border-width:3px;
	border-collapse: collapse;
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
}
.TableDatasJMA-Entete {
	background-color:#0080C0;
    border: ridge;
    border-width: 3px;
	color:#FF0;
	font-family: "Comic Sans MS", cursive;
	font-size: 18px;
	font-style: italic;
    padding: 5px;
    text-shadow: 2px 2px 2px #F00;
}
.TableDatasJMA-Cellule {
	border-color:#C16100;
	border-style:solid;
	border-width:thin;
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
    font-weight: 500;
	white-space:nowrap;
}
.TableStatJMA {
	background-color:#CCCCCC;
	border:ridge;
    border-radius: 10px;
    border-width:3px;
	border-collapse: collapse;
	font-family: "Comic Sans MS", cursive;
	font-size: 14px;
}
.TableStatJMA-Entete {
	background-color:#0080C0;
    border: ridge;
    border-width: 3px;
	color:#FF0;
	font-family: "Comic Sans MS", cursive;
	font-size: 18px;
	font-style: italic;
    padding: 5px;
    text-shadow: 2px 2px 2px #F00;
}
.TableStatJMA-Cellule {
	border-color:#808080;
    border-style: none ridge none ridge;
	border-width: 3px;
	font-family: "Comic Sans MS", cursive;
	font-size: 13px;
	white-space:nowrap;
}
.DefColonneEntete {
	background-color:#FFFFE0;
	border-color: #C16100;
	font-family: "Comic Sans MS", cursive;
    font-size: 13px;
	font-style:italic;
	font-weight:bold;
	text-align: center;
    text-shadow: 2px 2px 2px #778899;
    vertical-align: middle;
}
.DefColonneEntete_Bleu {
	background-color:#FFFFE0;
	border-color: #C16100;
    color: blue;
	font-family: "Comic Sans MS", cursive;
    font-size: 13px;
	font-style:italic;
	font-weight:bold;
	text-align: center;
    text-shadow: 2px 2px 2px #778899;
    vertical-align: middle;
}
.DefColonneEntete_Rouge {
	background-color:#FFFFE0;
	border-color: #C16100;
    color: red;
	font-family: "Comic Sans MS", cursive;
    font-size: 13px;
	font-style:italic;
	font-weight:bold;
	text-align: center;
    text-shadow: 2px 2px 2px #778899;
    vertical-align: middle;
}
.Nota_Bene_RougeFonce_11px_Italic_Gauche{
	font-size: 11px;
	text-align: left;
	font-style:italic;
	color: darkred;
}
.Nota_Bene_RougeFonce_12px_Gras_Centre{
	color: darkred;    
	font-family:"Comic Sans MS", cursive;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}
.TD_Entete_Tooltip_GraphDyn {
	background-color:#0080C0;
	border-radius:3px;
	border-color: burlywood;
	border-style:groove;
	border-width:3px;
	color: gold;
	font-family:"Comic Sans MS", cursive;
	font-size:12px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	padding:5px;
}
.TD_Entete_Table_Compare_Periode_1{
    background-color: #00BFFF;
	border-color:#808080;
    border-style: none ridge none ridge;
    color: black;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
}
.TD_Cellule_Table_Compare_Periode_1{
    background-color: #00BFFF;
    color: black;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	text-align:center;
}
.TD_Entete_Table_Compare_Periode_2{
    background-color: #FFDAB9;
	border-color:#808080;
    border-style: none ridge none ridge;
    color: black;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:center;
}
.TD_Cellule_Table_Compare_Periode_2{
    background-color: #FFDAB9;
    color: black;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	text-align:center;
}
.TR_Cellule_Table_Compare_Periode_1-2{
    border-bottom-width: thin;
    border-bottom-style: solid;
}
#TableSats ul{
    margin-left: 10px;
    padding: 5px 0px 5px 10px;
    list-style-type: "\25C9";
}
#TableSats ul ul{
    list-style-type: "\25C8";
    display: table;
}
#TableSats ul ul ul{
    list-style-type: "\25CF";
    display: table;
}
#TableSats li span{
    font-family: "Comic Sans MS", cursive;
    font-size: 14px;
    font-style: italic;
    font-weight: bolder;
    color: green;
    margin-left: 5px;
}
#TableSats li li{
    display:table-row;
}
#TableSats li li::before{
    content: "\25C8";
}
#TableSats li li div{
    display:table-cell;
    font-family: "Comic Sans MS", cursive;
	font-size: 12px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    padding: 1px 1px 1px 5px;
}
#TableSats p{
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	font-weight: bolder;
	color: #0000FF;
    text-align: right; 
    margin: 0px;
    padding: 0px;
    line-height: 1em;
}
#TableSats li li li{
    display:table-row;
}
#TableSats li li li::before{
    content: "\25CF";
}
#TableSats dl{
    margin-left: -15px;
    padding: 0px;
}
#TableSats dd{
	font-size: 11px;
	text-align: left;
	font-style:italic;
	color: darkred;
}
#TableSats dd::before{
    content: "\25CF";
    margin: 0px;
    padding-right: 5px;
}
#TableNbJours td{
    font-family: "Comic Sans MS", cursive;
	font-size: 12px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    padding: 1px 1px 1px 5px;
}
#TableNbJours p{
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	font-weight: bolder;
	color: #0000FF;
    text-align: center; 
    margin: 0px;
    padding: 0px;
    line-height: 1em;
}