@font-face {
	font-family:LiberationSerif;
	font-weight:normal;
	font-style:normal;
	src: url("../fonts/LiberationSerif-Regular.ttf");
}
/* LiberationSerif seulement pour h1 (bold, normal) */
@font-face {
	font-family:LiberationSerif;
	font-weight:bold;
	font-style:normal;
	src: url("../fonts/LiberationSerif-Bold.ttf");
}
@font-face {
	font-family:Arimo;
	font-weight:normal;
	font-style:normal;
	src: url("../fonts/Arimo-Regular.ttf");
}
@font-face {
	font-family:Arimo;
	font-weight:bold;
	font-style:normal;
	src: url("../fonts/Arimo-Bold.ttf");
}
@font-face {
	font-family:Arimo;
	font-weight:normal;
	font-style:oblique;
	src: url("../fonts/Arimo-Italic.ttf");
}
@font-face {
	font-family:Arimo;
	font-weight:bold;
	font-style:oblique;
	src: url("../fonts/Arimo-BoldItalic.ttf");
}

body {
	font-family: Arimo, Arial,helvetica,sans-serif;
	background-color:rgb(30, 33, 38);
	background-image: url(../photos/fond00.jpg);
	background-attachment: fixed;
}
/* div 1er niveau : conteneur principal contient : haut, corps, bas */
.contenant {
	max-width:60em;
	width:100%;
	margin:auto;
	padding-top:2em;
	background-color:trans;
}
/* bordure des sous-conteneurs */
.cadre {
	border: ridge .3em grey;
	background-color:#dddddd;
	align:centre;
	margin:1em;
	}
/* sous conteneur ajoute une marge interne (pas de tableau) */
.pa {
	padding: 2em 5em 2em 5em;
	text-align:justify;
}

/* en tête  - contient logo-gauche et  audio-div*/
.haut {
	background-image: url(../docs/annecy2015v2.jpg);
	background-size:100%;
	position; relative;
}
.haut2 {
	background-image: url(../docs/annecy2015v2.jpg);
	background-size:100%;
	position; relative;
}
.bas-haut { margin-top:1.5em; }
.haut-haut {
	border-top: solid 1px black;
}
.haut-bas {
	border-top: solid 1px transparent;
	margin-top:34.1%;
}
.logo-gauche {
	float: left;
	display:inline-block;
	max-width: 19%;
	padding-top: 2%;
	padding-left: 6%;
}
.logo-droit {
	position:relative;
	width:100%;
	height:1px;
}
.logo-droit #ad, .logo-droit #pp {
		max-width:100%;
		position:absolute;
		top: -60px;
		right: 8px;
		index:-1;
}
.ncc { width:100%;}
.ncc img { width:33%; float:left;}
.rando { margin-top: 12%; }

#pp {
	margin:0;
	padding:0;
	width:2em;
	height:2em;
	border-radius: 2em;
	border: solid 1px white;
}
#ppi {
	width:100%;
}
#ad {
	 display:inline-block;
}
#pp {
	display: none;
}

/*.boite-urge{
	background-color:red;
	color:white;
	text-align:justify;
	margin-top:.5em;
	width:25%;
	height: 2.3em;
	padding: 0em;
	border:ridge .1em grey;
	overflow:auto;
}*/
.corps{
	margin-top:1.5em;
	background-color:#ffffff;
	text-align:left;
	padding:7em 5em 0em 5em;
}
 .boite-fonction {
	align:center;
	background-color:#d6f5f5;
	font-size: 1em;
	color: #251c4a;
	margin-top: 1em;
	width :88%em;
	height: 6em;
	text-align: justify;
	padding: 0em 1em;
	border:ridge .1em grey;
	overflow:auto;
}
.boite-fonction-2{
	background-color:#fcff91;
	font-size: 1em;
	color: #bd1c17;
	margin-top: 1em;
	margin-left: 4em;
	width:80%;
	height:8em;
	text-align:left;
	padding: 0em 1em;
	border:ridge .1em grey;
	overflow:auto;
}
.corps-2{
	margin-top:.5em;
	background-color:#ffffff;
	text-align:left;
	padding:2em 5em 0em 5em;
}

/* BAS */
.bas{
	margin:1.5em 0em 0em 0em;
	/*height:12em;*/
	padding-bottom:0em;
	background-color:white;/*rgb( 173, 222, 246)*/
}

.logo-droite {
	float:right;
	margin:50px 5em 0em 0em;
	max-width:5em;
}
.logo-droite img {
	width:100%;
}

.logo-bas-gauche {
	width:25%;
	float: left;
}
.logo-bas-gauche img {
	width:100%;
}
.boite-bas-centre {
	width:50%;
	text-align:center;
	float:left;
}
.boite-bas-droite {
	width:25%;
	float:left;
	min-height:1em;
	background-color: transparent;
}
.bas-haut {
	margin-top:1.5em;
	height:1px;
	background-color:black;
	border-top: solid 1px black;
}
.bas-bas {
	margin-top :19.2%;
	height:1px;
	background-color:black;
}
/* fin bas */

.boite-log {
	text-align:centre;
	width:60%;
	height:50em;
	background-color:transparant;
}
.bas-w {
	margin:1.5em 0em 0em 0em;
	height:15em;
	padding-bottom:0em;
	background-color:white;
}
.bas-maitre{
	margin:3em 2em 0em 28em;
}
.boite-inscr{
	margin:1.5em 0em 0em 0em;
	height:12em;
	border:ridge .3em white;
	padding-bottom:0em;
	background-color:white;
}
.boite-article{
	text-align:justify;
	float:right;
	width:70%;
	height:auto;
	padding-bottom:0em;
	background-color:white;
}
.boite-lien{
	margin:2em 6em;
	height:2em;
	border:none;
	padding-bottom:2em;
	background-color:trans;
}
.boite-lien2{
	margin:2em 5em;
	height:3em;
	border:none;
	padding-bottom:0em;
	background-color:trans;
}

.lien {
	width:10em;
	float:left;
	margin-top:.5em;
	margin-left:1.5em;
	text-align:center;
}
.lien p {
	color:#b2e1f7;
	font-family: Arial, helvetica, sans-serif;
	font-weight:bold;
	margin: 0.9em 0 0.9em 0;
}
/* Menu definition des liens */
.lien a {
	display:inline-block;
	width:8em;
	height:2.1em;
	background-image:url('../docs/vide03.jpg');
	background-size: 100% 100%;
	width:50%;
	min-width:8em;
	line-height:2em;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
}
.lien a:hover,  .lien a:focus {
	background-image:url('../docs/vide04.jpg');
	color:#55ffff;
}

.bouton-gpx{
	width:2em;
	height:2em;
	margin-left:2em;
}
.logo-ascenseur {
	float:right;
	margin:0em;
	border:none;
}	
.bouton {
    margin-left:3em;
    border: none; 
}
.bouton img{
    height: 2em;
}
.bouton-2 {
	left:0em;
	width:5em;
	max-height:3em;
}
a a:visited {
	text-decoration:none;

}
.table {
	background-color:#eeeeee;
}
.col1 {
	width:25%;
}
.col2 {
	width:33%;

}
.col3 {
	width:14%;
}
.col4 {
	width:25%;
}
.col5 {
	width: 3%;
}

.h1 {
	font-family:LiberationSerif, 'Times New Roman', serif;
	text-align:center;
	color:brun;
}
.titre {
	/*
	padding-top:.2em;
	padding-bottom:.2em;
	*/
	line-height: 1.2em;
	color: #000000;
	background-color:#ddd9d9;
	text-align:center;
}
.titre-h1 {
	text-align:left;
	color: #990000;
}
.titre h1 {
	text-align:center;
	color: #ffffff;
}
.text  {
	margin-top:1em;
	border: ridge .3em grey;
	background-color:#cccccc;
	text-align:justify;
	padding:1em 5em 1em 5em;
}
.text h1 {
	margin-top:.3em;
	padding:2em;
	font-size:2.5em;
}
.p {
	font-family:AlegreyaSans, arial, helvetica, sans-serif;
}
.li {
	font-family:AlegreyaSans, arial, helvetica, sans-serif;
}
/*position des textes*/
.indent {
	text-indent:3em;
}
.centre {
	text-align:center; /*!important;*/
}
.gauche {
	text-align:left;
}
.droite {
	text-align:right;
}
.justifie {
	text-align:justify;
}

/* couleur des textes */
.blanc {
	color:#ffffff;
}
.bleu-clair {
	color:#c4f7f7;
}
.bleu {
	color:rgb(38, 41, 238);
}
.brun {
	color:#990000;
}
.bordeaux {
	color: #c02626;
}
.noir {
	color:#000000;
}
.vert {
	color:#00ff00;
}	
}
/*Taile des polices*/
.geant {
	font-size: 3em;
	margin: 0.33em;
}
.grand {
	font-size: 2em;
	margin: 0.5em;
}
.normal {
	font-size: 1.7em;
	margin: 0.65em;
}
.petit {
	font-size: 1.5em;
	margin: 0.71em;
}
.nain {
	font-size: .7em;
	margin: 1em;
}
.fond-blanc {
	background-color: white;
	padding: 0px 0.5em;
}
.gras {
	font-size:10em;
	font-weight:bold;
}
.clear {
	font-size:1px;
	clear:both;
}
/*.webmestre {
	font-size:.14em;
}
.webmestre a {
	color:black;
}*/
/*Div 2ème niveau*/
.annonces{
	margin-top:1em;
	padding:1em 3em;
	padding-bottom:4em;
	text-align:center;
	background-image: url(../docs/fondgauf fre.jpg);
	background-color:rgb(155, 222, 246);	
}
/*
.titre .menu {
	height:2.4em;
}*/
.tableau-idx {
	padding-bottom:1.5em;
	background-color:#cccccc;
	height:auto;
	overflow: auto;
}
.vignetteph {
	height:6.5em;
	width:auto;
	border:solid .1em black;
}
.vignettephg {
	height:6.5em;
	width:auto;
	border:solid .1em black;
	float:left;
	margin-top:.1em;
	margin-right:1.5em;
}
.vignettephd {
	height:6.5em;
	width:auto;
	border:solid .1em black;
	float:right;
	margin-top:.1em;
	margin-left:1.5em;	
}
.vignettevid {
	height:6.5em;
	width:auto;
	border:solid .1em orange;
	
}
.notice {
	font-style: oblique;
	text-align:center;
}
/*Liens*/
.chevauchant {
	position: relative;
}
/*échelle dans bas masterweb*/
.chevauchant a {
	position: absolute;
	top:5em;
	left:1em;
}
.chevauchant p {
	margin:2em 0em 1em 0;
}
.extra-marge {
	height: .5em;
}
	
.video-div {
	margin-left:2em;
/*??*/widht:30%;
	text-align:center;
}	

.clear {
	clear:both;
	font-size:1px;
}
/* sous conteneur est un tableau, bordures des celulles */ 
.table {
	border-collapse: collapse;
	background-color:white;
	width: 100%;
}
.table tr:first-child td, table tr:first-child th {
	border-top:ridge 0em grey;
}
.table tr:last-child td, table tr:last-child th {
	border-bottom:ridge 0em grey;
}
.table td, table th {
	vertical-align: top;
	border: ridge 0em; grey
}
/*.table td:first-child, table th:first-child {
	border-left:ridge 0em grey;*/
}
.table td:last-child, table th:last-child {
	border-right:ridge 0em grey;
}


/* Menu definition des liens */

/*
/* pas de bordure pour une image, une balise, ... */
.nb {
	border:none;
}
a.mail {
	border-bottom: 0.3em solid transparent;
	text-decoration: none;
	font-weight: bold;
}
a.mail:hover, a.mail:focus {
	border-bottom: 0.2em solid black;
}
/* special page contacts.html */
.tbl-contact {
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em;
}
.tbl-contact td, .tbl-contact th {
	font-size:.9em;
}
.tbl-contact td, .tbl-contact table th {
	width: 33%;
}
.tbl-contact {
	width: 100%;
	max-width: 56em;
}
.contact-portrait img {
	height:11.2em;
	margin-right:1em;
}
.contact-portrait img:last-child {
	margin-right:0em;
}
/* contact cadre */

.ccadre {
	width: 262px;
	min-width:10em;
	float:left;
	text-align:center;
	margin-bottom:1.5em;
}
.ccadre + img {
	height:150px;
}
.ccadre p:nth-of-type(1) {
	margin-bottom:0;
	font-weight:bold;
}
.ccadre p:nth-of-type(2) {
	margin-top:0;
}
.telmail {
	margin-top: .5em;
}
.tel, .mail {
	height:21px;
}

/* fin contacts */
/* photo 
.gallerie img {
	width:12.5em;
	padding:.3em .3em;
}
.gallerieh200 img {
	height:12.5em;
	padding:.3em .3em;
}
.gallerieh350 img {
	height:22em;
	padding:.3em .3em;
}*/
.trans {
	background-color:transparent;
}

.signe {
	text-align:right;
}

.rel {
	height:1px;
	position:relative;
	left:-5em;
	top:-4.8em;
	width: calc(100% + 10em);
	/*background-color:blue;*/
}
.rel div {
	box-sizing: initial;
}
.boite-urge {
	background-color:red;
	color:white;
	text-align:justify;
	width:42%;
	height:4.6em;
	padding: 0em .5em;
	border:ridge .1em grey;
	overflow:auto;
	position:absolute;
	left:30%;
	box-sizing: border-box;
}
.boite-urge2 {
	background-color:orange;
	color:Black;
	text-align:justify;
	width:42%;
	height:4.6em;
	padding: 0em .5em;
	border:ridge .1em grey;
	overflow:auto;
	position:absolute;
	left:30%;
	box-sizing: border-box;
}
@media (max-width: 640px) {
	.rel {
		top:.5em;
		left:0;
		width: 100%;
		height: 4.5em;
	}	
	.boite-urge {
		box-sizing:border-box;
		display: inline-block;
		width:60%;
		left:20%;
		xborder:ridge .1em grey;
	}
	.rel h1 {
		margin-top:1em;
	}
}

@media (max-width: 640px) {
	body { margin:0; }
	div { box-sizing: border-box; }
	.cadre, .titre, .text { border-left:none;border-right:none;}
	.pa { padding:0 .5em;}
	.contact-portrait img {	height:7.2em; margin-right:2em; }
	.text { padding:.5em;}
	.text h1 { font-size:.5em;}
	.menu{font-size: .5em; height:3.4em; }
	#pp { display: inline-block; }
	#ad { display: none; }
	.corps, .corps-2 { padding-left: .5em; padding-right:.5em; }
	.logo-droite { margin: 3.5em .5em 0em 0em; }
}
@media (max-width: 480px) {
	.boite-bas-centre p {
		font-size:75%;
		margin: .5em;
	}
	tr { display: flex; flex-direction column; flex-wrap:wrap; }
	th, td {  flex-basis: 100%;display:block; margin-left: 3em;}
	th:first-child, td:first-child { margin-top: 1em; margin-left: 0em;}
}