/*****************************************************
 * 															                                   *
 * La feuille de style commune pour toutes les pages *
 * http://laelith.fr  (Onering)                      *
 *																																																			*
 *****************************************************/

html {
    font-family: sans-serif;
}

body {
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
    margin: 0 0 3ex 0;
    padding: 0;
}

h1 {
    font-size: 2em;
}
h1 , h2 , h3 {
    margin: 0px;
}



/******************
 * Header du site *
 ******************/
body > header {
    text-align: center;
}


body > header > img {
    display: inline;
    width: 1200px;
}
@media screen and (max-width: 1200px) {body > header > img { width: 800px; }}
@media screen and (max-width: 800px) {body > header > img { width: 330px; object-fit: cover;}}



/*******************
 * Menu Horizontal *
 *******************/
body > nav {
    margin: 0;
    padding: 0;
}

body > nav ul {
    margin: auto;
    padding: 0;
    text-align: center;
}

body > nav li {
    border: 1px solid #ddd;
    display: inline;
    list-style: none;
    margin: 5px;
    padding: 2px;
    width: 200px;
}


@media screen and (max-width: 800px) {
    body > nav li { width: 200px;}
    body > nav ul { width: 350px;}
}

body > nav li a {
    color: black;
}
body > nav li:hover a {
    color: darkred;
}

@media screen and (max-width: 800px) {
		body > nav > a {
						display: block;
						margin-left: 100px;
						text-align: left;
		}
}

body > nav form { display: inline; padding:0px}

body > nav input {
	background-color:#555;
	color:#999;
	border:1px solid #999;
}







/********
 * Main *
 ********/
main {
    /* border: 1px solid #fee; */
    text-align: center;
    margin: auto;
    width: 1200px;
}
@media screen and (max-width: 1200px) {
    main {
        font-size: 14px;
        width: 800px;
    }
}
@media screen and (max-width: 800px) {
    main {
        font-size: 12px;
        width: 330px;
    }
}


a {
    color: #822;
    text-decoration: none;
}
a:hover { color: #f44; }

.floatright {
    float: right
}

.floatleft {
    float: left
}



/*******************************/
/*		Menu Horizontal 		*/
/*******************************/
.menuh { 
 float:left;
 width:32%;
 text-align: center;
 margin-bottom:20px;
 margin-right:10px;
 padding:2px;
/*border: 1px solid red;  debug mode*/
}
@media screen and (max-width: 1200px) { .menuh {			font-size:100%;			margin-right:4px;	}}
@media screen and (max-width: 800px) { .menuh {    width:100%;			font-size:70%;		}}




.MenuList  { 
 /*border:1px solid #fee;*/
 margin:0px;
 padding: 0px;
 text-align: center;
}

.MenuList li {
 list-style: none;
 text-align: left;
	border: 1px solid grey;
 border-radius: 10px;
	background-color:var(--bgcolor); 
 margin-top:5px;
	font-size:20px;
}
@media screen and (max-width: 1200px) {
.MenuList li {
		font-size:16px;
		margin-top:2px;

	}
}
@media screen and (max-width: 800px) {
.MenuList li {
		font-size: 17px ;
		margin-top:2px;
	}
}

.MenuList li:hover {
  background-color:var(--bgcolorHi);
}
.MenuList li a {
 display:block;
}



.MenuHeader {
 display:block;
 border: 2px solid black;
	background-color:var(--bgcolor); 
 border-radius: 20px;
 margin: 0px 0px 10px 0px ;
 padding: 0px;
 color:#000;
}
@media screen and (max-width: 1200px) {
.MenuHeader {
			margin: 0px ;	
			height:110px;
			margin-top: 20px ;
	}
}
@media screen and (max-width: 800px) {
.MenuHeader {
		font-size:165%;
		height:90px;
	}
}

.MenuHeader a {
	display:block;
	height:110px;
}
.MenuHeader a .valueT {
	font-size: 170%;
	font-weight: bold;
}
.MenuHeader a .keyT {
	font-size: 100%;
 color:black;
}


.MenuHeader > a > img {
	height:120px ;
	float:left ;
}
@media screen and (max-width: 1200px) {
	.MenuHeader > a > img {height:90px ;}
}

.MenuHeader p { margin:10px 0px 15px 0px ; }
@media screen and (max-width: 1200px) {
	.MenuHeader p { margin:0px 0px 15px 0px ; }
}

.MenuHeader:hover {
  background-color:var(--bgcolorHi);
} 




/***************************/
/*      Menu vertical      */
/***************************/

.menuv  { 
 margin: 0px;
 padding: 0px;
 width:300px;
 float:left;
}
@media screen and (max-width: 1200px) {
 .menuv  { 
  width:250px;
 }}
@media screen and (max-width: 800px) {
.menuv  { 
  width:350px;
		display:none;
 }}

.menuv  h2 { 
 background-color: #333;
 color: #fff;
 font-size: 2em;
 font-weight: bold;
 padding:10px 0px;
 margin:0px;
}

.menuv p {
 font-family: sans-serif;
 padding:3px 0px;
 margin:0px;
}

.menuv ul {
	border: 0px solid black;
	margin:0px;
	padding:0px;
}

.menuv li {
	background-color:var(--bgcolor);
	list-style: none;
	text-align:left;
 border-top : 0px solid black;

}
.menuv li > a {
	display: block;
	font-size:110%;
	font-family : "Arial Unicode MS", Arial ;
	width: 100%;
 margin: 0px ;
}
.menuv li.border {
	border : 1px solid black; 
	border-top: 0px;
}
.menuv li.noborder {
	background:none;
}
.menuv li.noborder a {
 height:70px;
	vertical-align: middle;
}
.menuv li :hover {
  background-color:var(--bgcolorHi);
} 



.menuv li.subtype {
	border: 0px solid #000;
	border-bottom : 1px solid black;
	padding-top:8px;
 background-color:#fff;
	font-family:sans-serif;
	color:#999;
}


/*****************************/
/*         L'article         */
/*****************************/
.catdesc {
	float:left;
	font-family:sans-serif;
	color:#999;
	padding:3px;
	width:300px;
	margin:80px 0px 0px 50px;
}
article {
	width:880px;
	border: 1px solid black;
	font-family:sans-serif;
 font-weight:normal;
	text-align:left;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float:left;    
}
@media screen and (max-width: 1200px) {
 article {
  width:537px;  
 }}
@media screen and (max-width: 800px) {
 article {
  width:99%;
  border: 1px solid #fee;
  border-radius: 0px;
  margin:5px;
}}
article .titre {
	height:20px;
	text-align:right;
	font-weight:normal;
 font-size: 80%;
	background-color:#333;
	color:#999;
	padding:3px;
}

article #corps  {
	padding:5px;
}

article h2 {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 180%;
	font-style:italic;
	text-align:center;
 margin: 0px 0px 10px 0px;
	padding: 0px;
}

article h3 {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 150%;
 margin: 0px 0px 0px 0px;
	padding: 0px;
}

article h4 {  
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 120%;
	margin: 0px 0px 0px 0px;	padding: 0px;
}














/****************************
 * L'edition en frontOffice *
 ****************************/
.titre input {
    background-color: #555;
    border: 1px solid #999;
    color: #999;
}
a.edit {
    float: right;
    margin: 5px;
}
.form {
    border: 1px solid #fdd;
    border-collapse: collapse;
    text-align: left;
}
.form h1 {
    margin: 0;
}
.form td:first-child {
    font-weight: bold;
    text-align: right;
    width: 150px;
}
.form td {
    margin: 0;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}



/*************
 * Le Footer *
 *************/
footer {
	text-align:center;
	clear: both;
	color: #ccc;
	font-family: sans-serif;
	height: 100px;
	width: 100%;
}

footer a {
	color: #999;
}



/* La fonction print_a   */
.joli {
	margin: 5px ; 
}

.joli td {
	border: 1px solid black ; 
}