/*version du 05 avril/ 021*/

header
{
	display: flex;
	flex-direction: row;
}

header img
{
	flex: 1;
	margin-left:  : 15px;
	max-width: 70px;
}


header ul
{
	flex : 4;
	padding: 10px;
	margin-top: 0px;
	margin-left: 15px;
}

header h2
{
	margin-top: 5px;
	
	padding-left: 10px;
	color:blue;

}

#vuesAP 
{
	flex : 0.2;
	font-size: 0.7em;
	color : gray;
}


@media screen and (max-width:1024px) {
	header img
	{display : none;}
	header
	{
		flex : 4;
		padding: 5px;
		margin-top: 5px;
		margin-left: 8px;
	}
}


ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

li {
	margin-right: 15px;
	margin-bottom: 3px;
}


/*a:hover 
{
	border: 2px outset blue;/*#760001;
	background-color: #00bfff; 

}*/

hr
{
	height: 5px;
	background-color: blue;

}

		
.smallButton
{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #A9E2F3;
}

.smallButtonGris
{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #c0c0c0;
}

.smallB2
{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #f0e68c 	 	;/* #8fbc8f;*/
}

.smallB3
{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #bdcbf5; 	 	 	 	;/* #8fbc8f;*/
}

.largeButton
{
	font-size: 1.3em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 2px outset #760001;
	border-radius: 8px;
	background-color: #A9E2F3;
	
}

.largeButtonGris
{
	font-size: 1.3em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 2px outset #760001;
	border-radius: 8px;
	background-color: #c0c0c0 	;
}



.buttonCentrage
{
	display: block;  /*sinon margin inopérant*/
	/*max-width : 100px;*/
	left : -10px;
	min-width : 290 px;
	margin-top : 5px;
	margin-bottom : 5px;
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	/**text-decoration: none;*/
	
	border-bottom: 2px outset #760001;
	border-radius: 4px;
	background-color: #ebf5fb; 
	opacity : 0.75;
	position : relative;
	cursor: pointer;
	text-align: center;
	

}

.refLi
{
	text-decoration: none;
}

.smallButton:hover 
{
	background-color: #00bfff; 	
}

.largeButton:hover
{
	background-color: #00bfff; 	
}

.refLi:hover
{
	background-color: #A9E2F3;	
}

.ssep
{
	height: 3px;
	background-color: aqua;
}

#figMeteo
{
	height: 280px;
	width: 260px;
	/*overflow: auto;*/
}

#page
{
	display: flex;
	flex-direction: row;
	max-height: 650px;
	overflow: auto;

}

#main
{
	flex: 3;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 650px;
	max-height: 650px;

}

#cadre
{ 
	display: flex;
	overflow : auto;
}

.sp1
{   height: 275px;
	width: 275px;
	border: 2px Maroon solid;
	margin-top: 10px;
	margin-left: 10px;
	padding: 5px;
	/*overflow: auto;*/
}

#ucal
{
	height: 275px;
	width: 275px;
	border: 2px Maroon solid;
	margin-top: 10px;
	margin-left: 10px;
	padding: 5px;
	overflow: auto;
	background-image: url("../images/fondNuages.png");
	background-position: 0px 40px;
	background-repeat:no-repeat;
}

#ucal a {
	text-decoration: none;
	color :navy;
}

.sp1:hover
{
	border: 2px red solid ;
}
.sp2:hover
{
	border: 2px red solid ;
}
.sp3:hover
{
	border: 2px red solid ;
}

.ip1
{
	width: 275px;
}

.lp1
{
	/*max-width:  150px;*/
	display : block;
	/*margin-top: 0px;*/
	font-style: italic;
	text-align: center;
	margin-bottom : 5px;

}

#captionTable
{
	font-size: large;
	/*font-style: bold;*/
}

h3
{
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 10px;
	/*color:red;*/

}





aside
{
	flex: 1;
	min-width: 180px;
	max-width: 300px;
	max-height: 1200px;
	border: 4px Maroon solid;
	background-color: white;
	background-image: url("../images/fond1.png");
	position: relative;
	overflow: auto;
	margin-left : 10px;
	
}



#figAP
{
   display : inline-block;
   border: 1px Maroon solid;
   padding:10px;
   background-color: white;

}

#figAP img
{
	width: 100%;
	height : 30%
}



aside h3
{
	
	margin-top: 10px;
	margin-left: 15px;
}

aside ul
{
	list-style-type: none;
}

aside ol a
{
	text-decoration: none;
}

aside ol a:hover
{
	text-decoration: underline;
}

#aside-liste
{
	visibility : hidden;
}

#aside-corps
{
	visibility : hidden;
	max-height: 500px;
	
	overflow: auto;
}
aside p
{
	font-size: small;
	padding: 10px;
	text-align: justify;
	
}

#version
{
	font-size: small;
	padding: 10px;
	margin-top: -15px;
	margin-right: 15px;
	text-align: right;
}

@media screen and (max-width:1024px) 
{
.largeButtonGris
	{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #c0c0c0;
	margin: 1px;
	}
.largeButton
{
	font-size: 1em;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-bottom: 1px outset #760001;
	border-radius: 4px;
	background-color: #A9E2F3;
	margin: 1px;
}

}

@media screen and (orientation: landscape)
{
	#main h3
	{
		color:blue;
	}
}

}

@media screen and (orientation: portrait)
{
	#main h3
	{
		color:green;
	}
	.sp1
	{  
		/*height: 33%;
		width: 33%;*/
		border: 2pt Blue solid;
		margin-top: 8pt;
		margin-left: 8pt;
		padding: 3pt;
		position: center;
	}
}