« MediaWiki:Common.css » : différence entre les versions
De gahan
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 119 : | Ligne 119 : | ||
#toc { | #toc { | ||
font-size: 90%; | font-size: 90%; | ||
font-family: "Calibri Light"; | |||
line-height: 1.5em; | line-height: 1.5em; | ||
text-align: justify; | text-align: justify; | ||
Version du 22 mai 2024 à 19:16
/*====================*/
/* VARIABLES GLOBALES */
/* ET */
/* BASES */
/*====================*/
* {
--color_main: #661810; /* Couleur général des titres, bullet, box, etc. */
--color_main2: #923F31; /* Couleur général de niveau 2 */
--color_main3: #BF6655; /* Couleur général de niveau 3 */
--color_main_dark: #47100B; /* Variation dark du color-main */
--color_gradient1: #496D27; /* ok */
--color_gradient2: #9F4A3B; /* ok */
--color_gradient3: #448086; /* ok */
--color_gradient4: #00BA97; /* pas testé */
--color_gradient5: #00DBF2; /* pas testé */
--color_main_grey1: #F5F5F5; /* Gris clair+ */
--color_main_grey2: #EAEAEA; /* Gris clair */
--color_main_grey3: #E0E0E0; /* Gris moyen */
--color_main_grey4: #D8D8D8; /* Gris foncé */
--color_main_grey5: #CACACA; /* Gris foncé+ */
--color_a: #0858D9; /* Couleur des liens hypertexte #0645AD */
--color_a2: #BAC6FF; /* Couleur des liens hypertexte - Plus clair */
--fs_smaller: 80%; --fs_small: 90%; --fs_medium: 100%; --fs_big: 110%; --fs_bigger: 120%; /* Taille de police */
}
/*====================*/
/* BODY et BASE */
/*====================*/
body {
font-family: Calibri, Verdana, sans-serif;
font-size: 78%;
background-image: none;
background-color: var(--color_main_grey3); /*Fond du wiki
}
/*====================*/
/* MAIN DU SITE */
/*====================*/
#content {
margin-left: 170px;
margin-right: 190px;
text-align: justify;
border-right: 1px solid #aaaaaa;
}
#footer, .mw-footer {text-align: center;}
/*====================*/
/* HEADER */
/*====================*/
h1 {color: white;}
h1 {box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px;}
h2, h3 {box-shadow: rgba(0, 0, 0, 0.10) 0px 5px 5px;}
h1, h2, h3 {border-radius: 5px 30px 5px 30px / 5px 20px 5px 20px; padding-left: 0.7em;}
h1, h2, h3, h4 {font-variant-caps: small-caps;}
h1, h2, h3, h4, h5, h6 {font-weight: bold; padding-top: 0.2em; padding-bottom: 0.2em; line-height: 1.3em; margin-bottom: 10px;}
h2 {margin-top: 1em; border-image:}
h3, h4, h5, h6 {margin-top: 0.7em;}
h1 {font-size: 220%; background-color: var(--color_main);}
h2 {font-size: 180%; background-color: var(--color_main_grey2); border-bottom: 2px solid var(--color_main);}
h3 {font-size: 150%; background-color: var(--color_main_grey1); border-bottom: 2px solid var(--color_main2);}
h4 {font-size: 130%; border-bottom: 1px solid var(--color_main2); border-image: linear-gradient(to right, var(--color_main2), white) 1;}
h5 {font-size: 120%;}
h6 {font-size: 110%;}
/* h2::before {content: '🜋 '; font-size: 85%;} */
/* h3::before {content: '🜊 '; font-size: 85%;} */
/*====================*/
/* SEARCHBAR */
/*====================*/
#p-search {width: 10.4em;}
#p-search h3, #p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3 {font-weight: bold; border: none; box-shadow: none;}
#p-search input[type="search"] {
width: 11.5em;
font-size: 80%;
}
#p-search input[type="submit"] { /* Style du bouton de recherche */
background-color: var(--color_main2);
color: #fff;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
font-size: 80%;
box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px;
}
#p-search input[type="submit"]:hover { /* Style au survol du bouton */
background-color: var(--color_main_dark);
font-size: 80%;
box-shadow: rgba(0, 0, 0, 0.10) 0px 5px 5px;
}
/*====================*/
/* SOMMAIRE (TOC) */
/*====================*/
#toc, #toc * {
text-align: left;
}
#toc {
font-size: 90%;
font-family: "Calibri Light";
line-height: 1.5em;
text-align: justify;
border: none; /* Supprime le bord */
border-radius: 10px 0px 0px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
position: fixed;
top: 60px;
right: -1px;
max-height: calc(90vh - 150px); /* Ajustez cette valeur selon vos besoins */
overflow-y: auto;
background-color: #E8E8E8;
width: 200px; /* Largeur fixe du TOC - 250px - #E5E5E5 */
}
#toc .toctitle {display: none;} /* Supprime le titre du Sommaire */
/*====================*/
/* HORIZONTAL LIST */
/*====================*/
.hlist dd, .hlist dt, .hlist li, .hlist ul {
margin: 0;
display: inline;
}
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
.hlist dd:not(:last-child):after, .hlist li:not(:last-child):after { /* Ajout d'un • après chaque élément sauf le dernier */
content: " • ";
color: var(--color_main);
}
/*====================*/
/* FONT SIZE */
/*====================*/
.fontsize_XS {font-size: var(--fs_smaller);}
.fontsize_S {font-size: var(--fs_small);}
.fontsize_M {font-size: var(--fs_medium);}
.fontsize_L {font-size: var(--fs_big);}
.fontsize_XL {font-size: var(--fs_bigger);}
/*====================*/
/* LIEN HYPERTEXTE */
/*====================*/
a:visited {
color: var(--color_a) !important; /* Couleur bleue classique des liens */
}
/*====================*/
/* FIL D'ARIANE */
/*====================*/
.breadcrumb {
display: inline-block;
/* background: linear-gradient(to right, var(--color_main3), white); */
/* border-radius: 3px 0px 0px 15px / 3px 0px 0px 10px; */
border-width: 0px 0px 2px 0px;
border-style: none none solid none;
border-image: linear-gradient(to right, var(--color_main), white) 1;
margin-bottom : 1em;
}
.breadcrumb a {
margin-right: 0.5em; /* Ajoute de l'espace après chaque lien */
margin-left: 0.1em;
}
/*====================*/
/* INFOBOX */
/*====================*/
.infobox {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
float: right;
background-color :#EEEEEE;
margin-left: 10px;
font-size: 80%;
float: right;
line-height: 1.7;
}
.infobox td {text-align: left;}
.infoboxtitle {
/* font-family: "Tahoma", "Arial Rounded MT Bold", Calibri; */
font-weight: bold;
background-color: var(--color_main);
color: white;
font-size: 115%;
}
/*====================*/
/* QUOTE */
/*====================*/
q {
font-style: italic;
}
p {
margin: 0;
line-height: 1.4;
}
/*====================*/
/* DETAIL */
/*====================*/
.détail {
display: inline-block;
position: relative;
right: 0px;
border-radius: 0px 0px 10px 10px;
background-color: var(--color_main_grey2);
padding-left: 0.4em; padding-right: 0.4em;
border: solid 1px var(--color_main2);
border-top: none;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
margin-left: 1em;
margin-bottom: 0.5em;
margin-top: -10px;
}
/*====================*/
/* PUCES */
/*====================*/
ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B27";
list-style-position: outside;
margin: 0.5em;
}
ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B28";
}
ul ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B2A";
}
li::marker {color: var(--color_main); font-size: 90%;}
li {padding-left: 0.2em}
/*====================*/
/* mw-collapsible */
/*====================*/
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
background-color: #FAFAFA;
}
.mw-collapsible-content {
padding-left: 10px;
padding-top: 1.5em;
}
/*====================*/
/* BLOCS */
/*====================*/
.section-title {
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
padding: 0.2em 1em;
font-size: 150%;
font-weight: bold;
font-variant-caps: small-caps;
color: #FFFFFF;
background-color: var(--color_main);
/* border-style: solid; border-width: 1px; border-color: #D9D9D9; */
border-radius: 5px 30px 0px 0px;
}
.section-content {
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
padding: 1em;
background-color: var(--color_main_grey2);
/* border-style: solid; border-width: 0 1px 1px 1px; border-color: #D9D9D9; */
border-radius: 0px 0px 5px 5px;
}
/* Section par défaut avec 1% d'espace entre elles. Adapté lorsqu'il s'agit de textes uniquement sans box. */
.section-100 {width: 98%; padding: 10px 1%;}
.section-90 {float: left; width: 88%; padding: 10px 1%;}
.section-80 {float: left; width: 78%; padding: 10px 1%;}
.section-70 {float: left; width: 68%; padding: 10px 1%;}
.section-60 {float: left; width: 58%; padding: 10px 1%;}
.section-50 {float: left; width: 48%; padding: 10px 1%;}
.section-40 {float: left; width: 38%; padding: 10px 1;}
.section-30 {float: left; width: 28%; padding: 10px 1%;}
.section-20 {float: left; width: 18%; padding: 10px 1%;}
.section-10 {float: left; width: 8%; padding: 10px 1%;}
/* Section par défaut avec 0.5% d'espace entre elles. Plus adapté lorsqu'il s'agit de box. */
.sectionb-100 {width: 99%; padding: 10px 0.5%;}
.sectionb-90 {float: left; width: 89%; padding: 10px 0.5%;}
.sectionb-80 {float: left; width: 79%; padding: 10px 0.5%;}
.sectionb-70 {float: left; width: 69%; padding: 10px 0.5%;}
.sectionb-60 {float: left; width: 59%; padding: 10px 0.5%;}
.sectionb-50 {float: left; width: 49%; padding: 10px 0.5%;}
.sectionb-40 {float: left; width: 39%; padding: 10px 0.5%;}
.sectionb-30 {float: left; width: 29%; padding: 10px 0.5%;}
.sectionb-20 {float: left; width: 19%; padding: 10px 0.5%;}
.sectionb-10 {float: left; width: 9%; padding: 10px 0.5%;}
pre,.mw-code {font-size: 11px !important;}
.italique {font-style: italic;}
.Bl-Shad0 {
box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
hyphens: auto;
text-align: justify;
}
.Justify {
hyphens: auto;
text-align: justify;
}
.Coll {
hyphens: auto;
text-align: justify;
column-count: 2;
}
/*====================*/
/* IMG DYNAMIC SIZE */
/*====================*/
.image-10w, .image-20w, .image-30w, .image-40w, .image-50w, .image-60w, .image-70w, .image-80w, .image-90w, .image-100w {
height: auto;
float: left;
}
.image-10w {width: 10%;}
.image-20w {width: 20%;}
.image-30w {width: 30%;}
.image-40w {width: 40%;}
.image-50w {width: 50%;}
.image-60w {width: 60%;}
.image-70w {width: 70%;}
.image-80w {width: 80%;}
.image-90w {width: 90%;}
.image-100w {width: 100%;}
/*====================*/
/* ZOOM DE CARTE */
/*====================*/
.titrecarte {
text-align: center;
color: var(--color_main);
font-size: 120%;
font-weight: bold;
}
/* .titrecarte::after { content: " =";} */
/* .titrecarte::before { content: "= ";} */
.zoominfo {
font-size: 80%;
width: 1024px;
text-align: right;
margin-left: auto;
margin-right: auto;
}
.structure {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 768px;
display: grid;
grid-template: repeat(11, 1fr)/repeat(11, 1fr);
}
.cell {
/* border: 1px solid gray; */
background-color: transparent;
z-index: 1;
}
.cell:nth-child(n):hover ~ .mapcontent {--zoom: 1.8;} /* Le zoom réel est de la valeur de --zoom + 1 */
.cell:nth-child(1):hover ~ .mapcontent {--posX: 0%; --posY: 0%;}
.cell:nth-child(2):hover ~ .mapcontent {--posX: 10%; --posY: 0%;}
.cell:nth-child(3):hover ~ .mapcontent {--posX: 20%; --posY: 0%;}
.cell:nth-child(4):hover ~ .mapcontent {--posX: 30%; --posY: 0%;}
.cell:nth-child(5):hover ~ .mapcontent {--posX: 40%; --posY: 0%;}
.cell:nth-child(6):hover ~ .mapcontent {--posX: 50%; --posY: 0%;}
.cell:nth-child(7):hover ~ .mapcontent {--posX: 60%; --posY: 0%;}
.cell:nth-child(8):hover ~ .mapcontent {--posX: 70%; --posY: 0%;}
.cell:nth-child(9):hover ~ .mapcontent {--posX: 80%; --posY: 0%;}
.cell:nth-child(10):hover ~ .mapcontent {--posX: 90%; --posY: 0%;}
.cell:nth-child(11):hover ~ .mapcontent {--posX: 100%; --posY: 0%;}
.cell:nth-child(12):hover ~ .mapcontent {--posX: 0%; --posY: 10%;}
.cell:nth-child(13):hover ~ .mapcontent {--posX: 10%; --posY: 10%;}
.cell:nth-child(14):hover ~ .mapcontent {--posX: 20%; --posY: 10%;}
.cell:nth-child(15):hover ~ .mapcontent {--posX: 30%; --posY: 10%;}
.cell:nth-child(16):hover ~ .mapcontent {--posX: 40%; --posY: 10%;}
.cell:nth-child(17):hover ~ .mapcontent {--posX: 50%; --posY: 10%;}
.cell:nth-child(18):hover ~ .mapcontent {--posX: 60%; --posY: 10%;}
.cell:nth-child(19):hover ~ .mapcontent {--posX: 70%; --posY: 10%;}
.cell:nth-child(20):hover ~ .mapcontent {--posX: 80%; --posY: 10%;}
.cell:nth-child(21):hover ~ .mapcontent {--posX: 90%; --posY: 10%;}
.cell:nth-child(22):hover ~ .mapcontent {--posX: 100%; --posY: 10%;}
.cell:nth-child(23):hover ~ .mapcontent {--posX: 0%; --posY: 20%;}
.cell:nth-child(24):hover ~ .mapcontent {--posX: 10%; --posY: 20%;}
.cell:nth-child(25):hover ~ .mapcontent {--posX: 20%; --posY: 20%;}
.cell:nth-child(26):hover ~ .mapcontent {--posX: 30%; --posY: 20%;}
.cell:nth-child(27):hover ~ .mapcontent {--posX: 40%; --posY: 20%;}
.cell:nth-child(28):hover ~ .mapcontent {--posX: 50%; --posY: 20%;}
.cell:nth-child(29):hover ~ .mapcontent {--posX: 60%; --posY: 20%;}
.cell:nth-child(30):hover ~ .mapcontent {--posX: 70%; --posY: 20%;}
.cell:nth-child(31):hover ~ .mapcontent {--posX: 80%; --posY: 20%;}
.cell:nth-child(32):hover ~ .mapcontent {--posX: 90%; --posY: 20%;}
.cell:nth-child(33):hover ~ .mapcontent {--posX: 100%; --posY: 20%;}
.cell:nth-child(34):hover ~ .mapcontent {--posX: 0%; --posY: 30%;}
.cell:nth-child(35):hover ~ .mapcontent {--posX: 10%; --posY: 30%;}
.cell:nth-child(36):hover ~ .mapcontent {--posX: 20%; --posY: 30%;}
.cell:nth-child(37):hover ~ .mapcontent {--posX: 30%; --posY: 30%;}
.cell:nth-child(38):hover ~ .mapcontent {--posX: 40%; --posY: 30%;}
.cell:nth-child(39):hover ~ .mapcontent {--posX: 50%; --posY: 30%;}
.cell:nth-child(40):hover ~ .mapcontent {--posX: 60%; --posY: 30%;}
.cell:nth-child(41):hover ~ .mapcontent {--posX: 70%; --posY: 30%;}
.cell:nth-child(42):hover ~ .mapcontent {--posX: 80%; --posY: 30%;}
.cell:nth-child(43):hover ~ .mapcontent {--posX: 90%; --posY: 30%;}
.cell:nth-child(44):hover ~ .mapcontent {--posX: 100%; --posY: 30%;}
.cell:nth-child(45):hover ~ .mapcontent {--posX: 0%; --posY: 40%;}
.cell:nth-child(46):hover ~ .mapcontent {--posX: 10%; --posY: 40%;}
.cell:nth-child(47):hover ~ .mapcontent {--posX: 20%; --posY: 40%;}
.cell:nth-child(48):hover ~ .mapcontent {--posX: 30%; --posY: 40%;}
.cell:nth-child(49):hover ~ .mapcontent {--posX: 40%; --posY: 40%;}
.cell:nth-child(50):hover ~ .mapcontent {--posX: 50%; --posY: 40%;}
.cell:nth-child(51):hover ~ .mapcontent {--posX: 60%; --posY: 40%;}
.cell:nth-child(52):hover ~ .mapcontent {--posX: 70%; --posY: 40%;}
.cell:nth-child(53):hover ~ .mapcontent {--posX: 80%; --posY: 40%;}
.cell:nth-child(54):hover ~ .mapcontent {--posX: 90%; --posY: 40%;}
.cell:nth-child(55):hover ~ .mapcontent {--posX: 100%; --posY: 40%;}
.cell:nth-child(56):hover ~ .mapcontent {--posX: 0%; --posY: 50%;}
.cell:nth-child(57):hover ~ .mapcontent {--posX: 10%; --posY: 50%;}
.cell:nth-child(58):hover ~ .mapcontent {--posX: 20%; --posY: 50%;}
.cell:nth-child(59):hover ~ .mapcontent {--posX: 30%; --posY: 50%;}
.cell:nth-child(60):hover ~ .mapcontent {--posX: 40%; --posY: 50%;}
.cell:nth-child(61):hover ~ .mapcontent {--posX: 50%; --posY: 50%;}
.cell:nth-child(62):hover ~ .mapcontent {--posX: 60%; --posY: 50%;}
.cell:nth-child(63):hover ~ .mapcontent {--posX: 70%; --posY: 50%;}
.cell:nth-child(64):hover ~ .mapcontent {--posX: 80%; --posY: 50%;}
.cell:nth-child(65):hover ~ .mapcontent {--posX: 90%; --posY: 50%;}
.cell:nth-child(66):hover ~ .mapcontent {--posX: 100%; --posY: 50%;}
.cell:nth-child(67):hover ~ .mapcontent {--posX: 0%; --posY: 60%;}
.cell:nth-child(68):hover ~ .mapcontent {--posX: 10%; --posY: 60%;}
.cell:nth-child(69):hover ~ .mapcontent {--posX: 20%; --posY: 60%;}
.cell:nth-child(70):hover ~ .mapcontent {--posX: 30%; --posY: 60%;}
.cell:nth-child(71):hover ~ .mapcontent {--posX: 40%; --posY: 60%;}
.cell:nth-child(72):hover ~ .mapcontent {--posX: 50%; --posY: 60%;}
.cell:nth-child(73):hover ~ .mapcontent {--posX: 60%; --posY: 60%;}
.cell:nth-child(74):hover ~ .mapcontent {--posX: 70%; --posY: 60%;}
.cell:nth-child(75):hover ~ .mapcontent {--posX: 80%; --posY: 60%;}
.cell:nth-child(76):hover ~ .mapcontent {--posX: 90%; --posY: 60%;}
.cell:nth-child(77):hover ~ .mapcontent {--posX: 100%; --posY: 60%;}
.cell:nth-child(78):hover ~ .mapcontent {--posX: 0%; --posY: 70%;}
.cell:nth-child(79):hover ~ .mapcontent {--posX: 10%; --posY: 70%;}
.cell:nth-child(80):hover ~ .mapcontent {--posX: 20%; --posY: 70%;}
.cell:nth-child(81):hover ~ .mapcontent {--posX: 30%; --posY: 70%;}
.cell:nth-child(82):hover ~ .mapcontent {--posX: 40%; --posY: 70%;}
.cell:nth-child(83):hover ~ .mapcontent {--posX: 50%; --posY: 70%;}
.cell:nth-child(84):hover ~ .mapcontent {--posX: 60%; --posY: 70%;}
.cell:nth-child(85):hover ~ .mapcontent {--posX: 70%; --posY: 70%;}
.cell:nth-child(86):hover ~ .mapcontent {--posX: 80%; --posY: 70%;}
.cell:nth-child(87):hover ~ .mapcontent {--posX: 90%; --posY: 70%;}
.cell:nth-child(88):hover ~ .mapcontent {--posX: 100%; --posY: 70%;}
.cell:nth-child(89):hover ~ .mapcontent {--posX: 0%; --posY: 80%;}
.cell:nth-child(90):hover ~ .mapcontent {--posX: 10%; --posY: 80%;}
.cell:nth-child(91):hover ~ .mapcontent {--posX: 20%; --posY: 80%;}
.cell:nth-child(92):hover ~ .mapcontent {--posX: 30%; --posY: 80%;}
.cell:nth-child(93):hover ~ .mapcontent {--posX: 40%; --posY: 80%;}
.cell:nth-child(94):hover ~ .mapcontent {--posX: 50%; --posY: 80%;}
.cell:nth-child(95):hover ~ .mapcontent {--posX: 60%; --posY: 80%;}
.cell:nth-child(96):hover ~ .mapcontent {--posX: 70%; --posY: 80%;}
.cell:nth-child(97):hover ~ .mapcontent {--posX: 80%; --posY: 80%;}
.cell:nth-child(98):hover ~ .mapcontent {--posX: 90%; --posY: 80%;}
.cell:nth-child(99):hover ~ .mapcontent {--posX: 100%; --posY: 80%;}
.cell:nth-child(100):hover ~ .mapcontent {--posX: 0%; --posY: 90%;}
.cell:nth-child(101):hover ~ .mapcontent {--posX: 10%; --posY: 90%;}
.cell:nth-child(102):hover ~ .mapcontent {--posX: 20%; --posY: 90%;}
.cell:nth-child(103):hover ~ .mapcontent {--posX: 30%; --posY: 90%;}
.cell:nth-child(104):hover ~ .mapcontent {--posX: 40%; --posY: 90%;}
.cell:nth-child(105):hover ~ .mapcontent {--posX: 50%; --posY: 90%;}
.cell:nth-child(106):hover ~ .mapcontent {--posX: 60%; --posY: 90%;}
.cell:nth-child(107):hover ~ .mapcontent {--posX: 70%; --posY: 90%;}
.cell:nth-child(108):hover ~ .mapcontent {--posX: 80%; --posY: 90%;}
.cell:nth-child(109):hover ~ .mapcontent {--posX: 90%; --posY: 90%;}
.cell:nth-child(110):hover ~ .mapcontent {--posX: 100%; --posY: 90%;}
.cell:nth-child(111):hover ~ .mapcontent {--posX: 0%; --posY: 100%;}
.cell:nth-child(112):hover ~ .mapcontent {--posX: 10%; --posY: 100%;}
.cell:nth-child(113):hover ~ .mapcontent {--posX: 20%; --posY: 100%;}
.cell:nth-child(114):hover ~ .mapcontent {--posX: 30%; --posY: 100%;}
.cell:nth-child(115):hover ~ .mapcontent {--posX: 40%; --posY: 100%;}
.cell:nth-child(116):hover ~ .mapcontent {--posX: 50%; --posY: 100%;}
.cell:nth-child(117):hover ~ .mapcontent {--posX: 60%; --posY: 100%;}
.cell:nth-child(118):hover ~ .mapcontent {--posX: 70%; --posY: 100%;}
.cell:nth-child(119):hover ~ .mapcontent {--posX: 80%; --posY: 100%;}
.cell:nth-child(120):hover ~ .mapcontent {--posX: 90%; --posY: 100%;}
.cell:nth-child(121):hover ~ .mapcontent {--posX: 100%; --posY: 100%;}
.mapcontent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
--zoom: 0;
--posX: 0%;
--posY: 0%;
overflow: hidden;
}
.mapzoom img {
transform: scale(calc(var(--zoom) * 1.5 + 1));
transform-origin: var(--posX) var(--posY);
transition: all 1s ease-out;
}
.map {
width: 50%;
}
/*====================*/
/* TIMELINE */
/*====================*/
.timeline {
width: 100%;
text-align: center;
font-weight: bold;
}
.period1, .period2, .period3 {
float: left;
height: 4em;
color: white;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2em;
border: solid;
border-color: #EEEEEE;
border-left-width: 2px;
border-right-width: 0px;
border-top-width: 2px;
border-bottom-width: 2px;
box-sizing: border-box;
}
.period1 {background-color: var(--color_gradient1);}
.period2 {background-color: var(--color_gradient2);}
.period3 {background-color: var(--color_gradient3);}
/*====================*/
/* TEST */
/*====================*/
.parallax {
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.parallax1 {
background-image: url("http://www.jammerjun.net/gahan/images/b/b4/Lande_1.jpg");
}
/*background-image: url("http://www.jammerjun.net/gahan/Lande_1.jpg");*/
