*{outline:none !important;}
html {height:100%;}
body{font-family:"Open Sans","Droid Sans","Verdana",sans serif;line-height:1.5;color:#D8C3AE;background:#29231D;}
a, a:visited, a b {text-decoration:none;color:#b78642;}
a:hover {text-decoration:underline;color:#f29a1c;}
a.external {background:url('external.png') right center no-repeat; padding-right:15px;margin-right:5px}
a.wiki {color:#416EB7;background:url('wiki.png') right center no-repeat; padding-right:12px;}
h1, h2, strong {text-align:center;color:#E5DDD4;}
h1 {font-size:20px;font-weight:700;line-height:50px;margin:0}
h2 {font-size:20px;font-weight:700;line-height:1.5;margin:50px 0 0 0}
h3 {font-size:16px;font-weight:700;line-height:1.5;max-width:500px;margin:10px auto 0 auto}
p {max-width:500px;margin:20px auto;text-align:justify}
article nav {max-width:500px;margin:20px auto;background:#3E352C;border:1px solid #b78642;border-radius:9px;font-size:90%}
header {width:100%;height:50px;margin:0;padding:200px 0 0 0;text-align:center;background-color:#1a110c}
.planche {max-width:500px;margin:auto}
.planche a {border:1px solid #29231D;border-radius:4px;height:65px;max-width:115px;display:block;float:left;margin-right:8px;margin-bottom:8px}
.planche a:hover {border-color: #b78642;}
.album {margin: 5px 35px;max-width:500px;margin:10px auto;padding:10px;line-height:1em;border:1px solid #564E47;border-radius:9px;background:#2F2B27}
.album img {margin: 2px 0 5px;max-width:200px;max-height:200px;float:left;margin-right:20px}
.nettoyeur {clear:both;}
.nofont {font:0/0 a;}
/*--
░█▄█░█▀▀░█▀█░█░█░░░█▀▄░█▀█░█▀▄
░█░█░█▀▀░█░█░█░█░░░█▀▄░█▀█░█▀▄
░▀░▀░▀▀▀░▀░▀░▀▀▀░░░▀▀░░▀░▀░▀░▀
--*/
/* à factoriser ! */
@media only screen and (max-width: 1299px) {
#menuBar {
width:100%;height:106px;
border-bottom:1px solid #000;
background:linear-gradient(to top, #222, #333);
font-size:14px;
line-height:50px;
position:absolute;top:0;left:0;z-index:100;
}
/* Menu téléphones */
@media (max-width: 599px) {
#extraMenu, .sous {display:none;}
#mainMenu {
display:block;height:50px;
position:absolute;top:5px;left:0;
list-style:outside none none;
margin:0;padding:0;
}
#extraMenu {
display:block;height:50px;
position:absolute;top:5px;right:130px;
list-style:outside none none;
margin:0;padding:0;
}
#mainMenu > li, #extraMenu > li {display:none;}
#headerHome {display:block !important;width:200px !important;}
#headerHome a {display:block !important;height:50px;background:url(../style/ico1.png) no-repeat 10px 0;opacity:0.9;border:none !important;}
#headerHome a:hover {background:url(../style/ico1.png) no-repeat 10px 0;opacity:1}
#headerShop {
display:block !important;
position:absolute;top:0;left:0;
}
#headerShop a {
display:block;text-decoration:none;
padding-left:50px !important;width:60px;background:url(../style/ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}
#headerSearch {position:absolute;top:55px;left:10px;right:60px;margin:8px 0;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:90%;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
@media (max-width: 370px) {#headerSearch input {width:85%;}}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(../style/ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}
}
/* Menu petits ordis, tablettes */
@media (min-width: 600px) {
#menuBarContainer{position:relative;width:590px;margin:auto;}
#mainMenu {
display:block;height:50px;
position:absolute;top:55px;left:-50px;
list-style:outside none none;
margin:0;
}
#extraMenu {
display:block;height:50px;width:150px;text-align:center;
position:absolute;top:55px;left:400px;
list-style:outside none none;
margin:0;}
#mainMenu > li {float:left;width:150px;text-align:center;}
#mainMenu > li > a, #mainMenu li > a:visited, #extraMenu > li > a, #extraMenu li > a:visited {display:block;padding:0 10px;color:#ccc;text-decoration:none;}
#mainMenu > li > a, #mainMenu li > a:visited {border-right:1px solid #111;}
#mainMenu > li > a:hover, #extraMenu li > a:hover {color:#fff;background-color:#2d2922;}
#headerHome {
position:absolute;top:-50px;left:50px;
width:200px !important;
}
#headerHome a {height:50px;background:url(../style/ico1.png) no-repeat 10px 0;opacity:0.9;border:none !important;}
#headerHome a:hover {background:url(../style/ico1.png) no-repeat 10px 0;opacity:1}
#headerSearch {position:absolute;top:5px;left:190px;width:260px;margin:8px 10px;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:230px;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(../style/ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}
#headerShop a {
display:block !important;
position:absolute;top:-50px;left:60px;
padding-left:50px !important;width:60px;background:url(../style/ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}
.sous {background:linear-gradient(to bottom, #FFDAA9 0,#ffc578 15px,#d38002 100px);border:1px solid #644918;border-radius:0 0 6px 6px;padding:0;margin:0;box-shadow: 0 0px 5px #333;display:none;}
#mainMenu > li:hover .sous, #extraMenu > li:hover .sous {display:block;}
.sous > li {list-style:outside none none;text-align:left;}
.sous > li a, .sous > li a:visited {display:block;color:#111 !important;text-decoration:none;padding-left:10px;list-style:outside none none;}
.sous > li a:hover {background-color:#FFFFFF50 !important;border-radius:6px;}
}
}
/* Menu grands Ordis */
@media only screen and (min-width: 1300px) {
#menuBarContainer{width:1300px;margin:auto;}
#menuBar {
width:100%;height:50px;
border-bottom:1px solid #000;
background:linear-gradient(to top, #222, #333);
font-size:14px;
line-height:50px;
position:absolute;top:0;left:0;z-index:100;
}
#mainMenu, #extraMenu {display:block;height:50px;float:left;list-style:outside none none;margin:0;padding:0;}
#mainMenu {width:770px;}
#extraMenu {width:250px;}
#extraMenu::after {content:"";display:table;clear:both;}
#mainMenu > li {float:left;width:140px;text-align:center;}
#extraMenu > li {float:left;width:50%;text-align:center;}
#mainMenu > li > a, #extraMenu li > a, #mainMenu li > a:visited , #extraMenu li > a:visited {display:block;padding:0 10px;color:#ccc;text-decoration:none;border-right:1px solid #111;}
#mainMenu > li > a:hover, #extraMenu li > a:hover {color:#fff;background-color:#2d2922;}
#headerHome {width:200px !important;}
#headerHome a {display:block;height:50px;background:url(../style/ico1.png) no-repeat 10px 0;opacity:0.9;}
#headerHome a:hover {background:url(../style/ico1.png) no-repeat 10px 0;opacity:1}
#headerShop a {padding-left:50px !important;width:65px;background:url(../style/ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}
.sous {background:linear-gradient(to bottom, #FFDAA9 0,#ffc578 15px,#d38002 100px);border:1px solid #644918;border-radius:0 0 6px 6px;padding:0;margin:0;box-shadow: 0 0px 5px #333;display:none;}
#mainMenu > li:hover .sous, #extraMenu > li:hover .sous {display:block;}
.sous > li {list-style:outside none none;text-align:left;}
.sous > li a, .sous > li a:visited {display:block;color:#111 !important;text-decoration:none;padding-left:10px;list-style:outside none none;}
.sous > li a:hover {background-color:#FFFFFF50 !important;border-radius:6px;}
#headerSearch {width:260px;float:left;margin:8px 10px;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:230px;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(../style/ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}
}
/*---------------------*/
/*--Choix de la langue--*/
#selectLang {position:absolute;top:60px;right:20px;}
/*------- tels ---------*/
@media (max-width: 1299px) {
#selectLang {top:120px;}
}
#selectLang a, #selectlang a:visited {
color:#fff;text-decoration:none;
padding:6px;
}
#selectLang b, #selectlang a:hover {
background:rgba(255,255,255,0.4);font-weight:normal;border-radius:5px;padding:6px;
cursor:pointer;transition: background 0.4s ease-in-out;
}
/*--Fil d'Ariane--*/
#fildariane {width:100%;margin:0;padding:0.2em;list-style: outside none none;font-family:"Ropa Sans",sans serif;font-size:0.9em;height:1.4em;color:#8E7C62;}
#fildariane li {float:left;}
#fildariane a, #fildariane a:active, #fildariane a:visited {padding:0.3em;color:#8E7C62;border-radius:0.8em;transition: all 0.2s linear;}
#fildariane a:hover {background:#B7A691;color:#fff;text-decoration:none;}
#fildariane .encours, #fildariane a .encours {color:#fff;background:#D8CEC4;border-radius:0.8em;padding:0 0.3em;margin-left:0.2em;}
/*--
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█▀▄
░█▀▀░█░█░█░█░░█░░█▀▀░█▀▄
░▀░░░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀
*/
@media only screen and (min-width: 1120px) {
#footContainer {width:fit-content;margin:0 auto;}
}
@media only screen and (max-width: 1119px) {
#footContainer {width:fit-content;margin:0 auto;}
@media (max-width: 759px) {
#footContainer {width:fit-content;}
@media (max-width: 499px) {
#footContainer {width:230px;}
}
}
}
footer{
width:100%;padding:10px 0 50px 0;margin-top:100px;
border-top:1px solid #000;
color:#ccc;
background:linear-gradient(to top, #222, #333);
line-height:1.7em;
}
footer a, footer a:visited {color:#ccc;text-decoration:none;}
footer a:hover {color:#fff;}
footer p {text-align: left;color:#ccc;}
.foot-block{
width:200px;margin:5px 15px;
float:left;
}
.foot-block ul {padding:0;margin:0;}
.foot-block li {
list-style:outside none none;
line-height:1.7em;
}
#dispOpentrad {display:block;width:200px;height:48px;margin:auto;background:url(ico1.png) no-repeat 10px 0;opacity:0.9}
#dispOpentrad:hover {background:url(ico1.png) no-repeat 10px 0;opacity:1}
#socialMed li {float:left;margin-left:-10px;}
#socialMed a, #socialMed a:visited {
display:inline-block;
width:50px;height:50px;
border:none;
margin:0 20px 2px 0;
opacity:0.8;
}
#socialMed a:hover { opacity:1;}
#icoMasto {background:url(ico1.png) no-repeat -140px -150px;}
#icoPeertube {background:url(ico1.png) no-repeat -50px -150px;}
#icoDogmazik {background:url(ico1.png) no-repeat 0 -150px;}
#siteAutor {text-align:center;margin:30px auto;padding-top:30px;max-width:300px;border-top:1px solid #ccc;}