/*****************************************************
 * Hygiene Mentale                                   *
 * La feuille de style commune pour toutes les pages *
 * http://laelith.fr/Zet/                            *
 *****************************************************/
	
@font-face { font-family: Berlin; src: url(BRLNSB.TTF);}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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 {
/*    background-image:linear-gradient(#300, #fff);				*/
    margin: 0;
    padding: 0;
}

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

body > nav li {
    background-color: #fff;
    border: 1px solid #ddd;
    display: inline;
    list-style: none;
    margin: 5px;
    padding: 2px;
    width: 200px;
}
@media screen and (max-width: 1200px) {
body > nav li {    margin: 0px; }}



body > nav li:hover ,
body > nav li.select:hover {
    background-color: #fff6f6;
}
@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 li.select { background-color:#eee; }

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; }

main header p { margin: 0 0 30px 0; }



main header h1  {
    font-size: 3em;
    font-weight: bold;
    margin: 10px auto;
    text-align: center;
}
@media screen and (max-width: 1200px) {
    main header h1 { font-size: 2.9em; }}
@media screen and (max-width: 800px) {
    main header h1 { font-size: 1.8em; }}

main header h1 > a {
    color: black;
    text-decoration: none;
}
main header h1 > a:hover {
    background-color: #f9eeee;
}

.floatright {
    float: right
}

.floatleft {
    float: left
}

.vjs-dock-description {display: none;}    /* Pour cacher l'alerte dans l'apperçu Peertube   */
    

/****************************
 * 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;
}