/* Old cook responsive */
html, body, header, article, nav, footer {margin: 0; padding: 0; border: 0; vertical-align: baseline;}

body {font-family: Arial, Helvetica, sans-serif; font-size: 115%; font-style: normal; font-weight: normal; color: #000; text-align: left; text-decoration: none; background-image: none;}

/* body */
#medieval {background-color: #af0;}	/* mediéval - vert */
#histoire {background-color: #d3bbff;}	/* histoire - bleu violet */
#cuisine {background-color: #fc3;}	/* cuisine - orange */
#assoc {background-color: #eed;}	/* divers - gris */
#mots {background-color: #fff;}	/* pop-up mots - blanc */

/* ----------------------------- STRUCTURE ----------------------------- */
div, img, tr, td {margin: 0; padding: 0; border: 0; visibility: visible;}
img, tr, td {background-color: #fff;}
#access, #sidebar, #lang {position: absolute; visibility: visible;}
#header, #logo, #content, footer {position: relative; visibility: visible;}

#header {width: 94%; padding: 0.5em 3%; text-align: left; z-index: 2;}
#header div {display: inline-block; vertical-align: top;}
#logo {width: 65%; z-index: 4;}
#access {left: 73%; top: 0.7em; font-size: 0.8em; z-index: 5;}
#content {min-height: 53em; margin: 1em 7% 0 22%; padding: 1em 3%; background-color: #fff; z-index: 1;}
#sidebar {left: 0; top: 7em; width: 15%; margin: 0 2% 0 0; padding: 0.5em 2%; z-index: 3;}
#lang {left: 78%; top: 0.6em; width: 20%; text-align: right; z-index: 5;} /* drapeau langue fr en it */
footer {width: 90%; height: 2em; padding: 1em 3%; z-index: 2;}

/* ---------------------------- PAGE ---------------------------- */
h1, h2, h3, h4 {font-weight: bold; padding: 0;}
h1 {font-size: 1.4em; margin: 0 22% 0.6em 0;}
h1.st {margin-bottom: 0;} /* avant sous-titre ou lettrine */
h1.c {font-size: 1.5em; font-weight: normal; text-align: center; margin: 0;}
h2 {font-size: 1.2em; margin: 0 22% 0.5em 0;} /* sous titre - auteur */
h2.let {margin-bottom: 0;} /* avant lettrine */
h2.c {text-align: center; margin: 0; }
h2.c1 {text-align: center; margin: 1em 0;}
h3 {font-size: 1.1em; margin: 0 0 0.4em 0; text-align: center;}
h3.let {text-align: center; margin: 0;} /* avant lettrine */
h4 {font-size: 1em; margin: 0 0 0.3em 0;}
#article h2 {font-size: 1.1em; text-align: center; margin: 0 0 0.5em 0;}
#article h3 {font-size: 1.1em; text-align: left; margin: 0 0 0.4em 0;}
#article h4 {font-size: 1.1em; margin: 0 0 0.3em 0;}

p {font-size: 1em; padding: 0 0 0.7em 0; text-indent: 0;}
p.d {text-align: right;}
	/* rubriques gastronomie médiévale et repères historiques */
p.c {text-align: center;}
#prehisto p.c, p.let {margin: 0;} /* avant lettrine */
	/* texte recette  */
p.v {font-size: 0.9em; color: #260;} /* texte médiéval en fr = vert */
p.b {font-size: 0.9em; color: #206;} /* autre texte historique en fr = bleu */
p.o {font-size: 0.9em; color: #620;} /* recette cuisine = orange */
#recettes p.o {font-size: 1em}
	/* img + légende ou texte plus petit */
p.img, p.imc, p.imd {font-size: 0.9em;}
p.imc, p.imcp {text-align: center; padding: 0 10%;}
p.imd {text-align: right;}
	/* avant lettrine */
p.imglet, p.imclet, p.imdlet {font-size: 0.9em; margin: 0;}
p.imclet {text-align: center;}
p.imdlet {text-align: right;}

p.navig {padding: 1em 0 0.7em 0; font-size: 0.9em;}
	/* retour haut de page */
#content p.haut {font-size: 0.9em; text-align: center; padding: 1em 0 0 0;}
footer {font-family: "Times new roman", Times, "Book antiqua", "Century schoolbook", serif; font-size: 0.9em; text-align: right;}

a {font-weight: normal; text-decoration: none;}
a.gras {font-weight: bold;}
a:link {color: #309;} /* lavande */
a:visited {color: #740;} /* brun */
a:focus, a:hover, a:active {color: #97b;} /* lavande clair*/
a.lien:link, a.lien:visited {color: #309;} /* lavande */
a.lien:focus, a.lien:hover, a.lien:active {color: #97b;}

#access a {color: #777;}

	/* images ---------------- */

img {display: block; max-width: 150px; height: auto; margin: 0 auto; padding: 0.5em 0;}
#logo img {max-width: 358px;}
img.huit {max-width: 800px;}
img.six {max-width: 625px;}
img.cinq, img.g-cinq, img.d-cinq {max-width: 500px;}
img.quatre, img.g-quatre, img.d-quatre {max-width: 400px;}
img.trois, img.g-trois, img.d-trois {max-width: 300px;}
img.deux, img.g-deux, img.d-deux {max-width: 200px;}
img.ctoct, img.g-ctoct, img.d-ctoct {max-width: 180px;}
img.ctvg, img.g-ctvg, img.d-ctvg {max-width: 120px;}
img.cent, img.g-cent, img.d-cent {max-width: 100px;}
img.oct, img.g-oct, img.d-oct {max-width: 80px;}
#lang img {display: inline-block; max-width: 50px; padding: 0 4%;}
#fb img {max-width: 40px;}
img.pays {display: inline-block; margin: 0; padding: 0 2%; max-width: 30px;}

img.g, img.g-cinq, img.g-quatre, img.g-trois, img.g-deux, img.g-ctoct, img.g-ctvg, img.g-cent, img.g-oct {float:left; width: 50%; margin: 0 4% 0.6em 0;}
img.six, img.cinq, img.quatre, img.trois, img.deux, img.ctoct, img.ctvg, img.cent {width: 100%;}
img.d, img.d-cinq, img.d-quatre, img.d-trois, img.d-deux, img.d-ctoct, img.d-ctvg, img.d-cent, img.d-oct {float:right; width: 50%; margin: 0 0 0.6em 4%;}

	/* listes */
ul, ol, li {margin: 0; padding: 0;}
li {background: none; list-style-type: none;}
#content ul, #content ol {margin: 0 1% 1em 2%; padding: 0; list-style: none;}
#mots ul {margin: 0; padding: 1em; list-style: none;}
#content ol li {background: none; list-style-position: inside; list-style-type: decimal; margin: 0 0 0.4em 0; padding: 0;}
#content li, #mots li {margin: 0 0 0.5em 0; padding: 0 0 0.7em 1.2%; font-size: 1em;}
#assoc ul li {list-style-image: url(../i/ca.gif);} /* carrés gris */
#medieval ul li {list-style-image: url(../i/cav.gif);}	/* médiéval en vert */
#mots ul li {list-style-image: url(../i/cav.gif); font-size: 16px;}	/* médiéval en vert */
#histoire ul li {list-style-image: url(../i/cab.gif);}	/* histoire en bleu */
#cuisine ul li {list-style-image: url(../i/cao.gif);}	/* cuisine en orange */
#content li.o {list-style-image: url(../i/cao.gif); font-size: 0.9em;}  /* liste de recettes */
#biblio ul li  {font-size: 1em;}
#list ul li  {font-size: 0.9em;}
#content ul ul, #content ol ul {margin: 0.8em 0 0.3em 1%; padding: 0;}
#content li li {list-style-position: inside; margin: 0 0 0.3em 0; padding: 0 0 0.7em 0; background: none; list-style-type: circle;}

	/* lettrines */
span {color: #885; font-size: 57px;}	/* divers - gris */
span.lgp {color: #885; font-size: 2.2em;}	/* manuscrit Chiquart */
span.petit {font-size: 0.9em;}	/* liste Chiquart */
#medieval span {color: #380; font-size: 3em;}	/* médiéval - vert */
#histoire span {color: #70d; font-size: 3em;}	/* histoire - bleu violet */
#cuisine span {color: #950; font-size: 3em;}	/* cuisine - orange c80*/

/* --------------------------- GAUCHE ---------------------------- */
#sidebar h4, #sidebar p {text-align: center;}
#sidebar h4 {font-size: 0.9em; font-weight: normal;}
#sidebar p {font-size: 0.85em; margin: 0.7em 0 0.9em 0;}
#sidebar ul, #sidebar ol {margin: 0; padding: 0; list-style: none;}
#sidebar ul li, #sidebar ol li {margin: 0 0 0.3em 0; padding: 0 0 0.9em 0; font-size: 0.85em; text-align: center; list-style: none; background: none;}
#sidebar ol li {list-style-type: decimal;}
	/* fond coloré : visités = lien = bleu sombre */
#sidebar a {font-weight: bold;}
#sidebar a:link, #sidebar a:visited {color: #005;} /* lavande */
#sidebar a:hover, #sidebar a:active {color: #996;}
hr.menu {margin: 0 0 2em 0;}
      
#content p.haut {clear:both;}  

/* =============== STRUCTURE SELON RESOLUTION ================ */
@media screen and (max-width: 1099px) {
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
table, td, textarea, input, iframe, object, embed, video {max-width: 100%;}
textarea, table, td, th {-webkit-hyphens: auto; -moz-hyphens: auto; -ms- hyphens: auto; -o- hyphens: auto; hyphens: auto; word-wrap: break-word;} /* césure */
header {padding: 0.6em 0 1em 0;}
#content {margin: 0;}
#sidebar {position: relative; top: 0; width: 94%; margin: 0; padding: 1em 3%;}
p {margin: 0 0 1em 0;}
#access a {font-size: 1em; color: #309;}
}
@media screen and (max-device-width: 768px) and (orientation: landscape) {
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
}

@media screen and (max-width: 439px) {
body {font-size: 80%;}
img.g, img.g-cinq, img.g-quatre, img.g-trois, img.g-deux, img.g-ctoct, img.g-ctvg, img.g-cent, img.g-oct, img.d, img.d-cinq, img.d-quatre, img.d-trois, img.d-deux, img.d-ctoct, img.d-ctvg, img.d-cent, img.d-oct {width: 40%;}
img.six, img.cinq, img.quatre {max-width: 90%;}
#lang img, #fb img {max-width: 40%;}
img.pays {max-width: 10%;}
}
@media screen and (min-width: 440px) and (max-width: 609px) {
body {font-size: 85%;}
img.cinq {max-width: 80%;}
img.six {max-width: 97%;}
#lang img, #fb img {max-width: 40%;}
img.pays {max-width: 10%;}
}
@media screen and (min-width: 610px) and (max-width: 819px) {
body {font-size: 90%;}
}
@media screen and (min-width: 820px) and (max-width: 1099px) {
body {font-size: 100%;}
}
@media screen and (min-width: 1100px) and (max-width: 1459px) {
body {font-size: 100%;}
}

@media screen and (min-width: 1960px) {
body {font-size: 140%;}
}