« MediaWiki:Common.css » : différence entre les versions

Version du 26 mai 2024 à 11:22

/*====================*/
/* VARIABLES GLOBALES */
/*        ET          */
/*      BASES         */
/*====================*/
:root {
    --color_main: #661810;        /* Couleur général du site - Bordeaux */
    --color_main2: #923F31;       /* Couleur général +clair */
    --color_main3: #CAADA8;       /* Couleur général ++clair */
    --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: 12px;                   /* Taille de police de base */
    --ff: Calibri, sans-serif;    /* Famille de police de base */
    --fs_XXS: 85%; --fs_XS: 90%; --fs_S: 95%; --fs_M: 100%; --fs_L: 105%; --fs_XL: 110%; --fs_XXL: 115%;  /* Taille de police modifiée */

    --content_marg_left: 143px;
    --content_marg_right: 195px;
}


/*====================*/
/*    BODY et BASE    */
/*====================*/
body {
    background-image: none;
    background-color: var(--color_main_grey3);
    font-family: var(--ff);
    font-size: var(--fs);
}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {font-family: var(--ff);}

.vector-body {font-size: 130%;} /* Correction pour Vector (mode déconnecté) */


/*====================*/
/*   MAIN DU SITE     */
/*====================*/
#content {
    margin-left: var(--content_marg_left);
    margin-right: var(--content_marg_right);
    text-align: justify;
    border-right: 1px solid #aaaaaa;
}

#footer, .mw-footer {text-align: center;}


/*====================*/
/*      HEADER        */
/*====================*/
h1, h2, h3, h4, h5, h6, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
    font-variant-caps: small-caps;
    font-weight: bold;
    color: var(--color_main);
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 0.2em;
    margin-top: 0.5em;
    line-height: 1em;
    margin-bottom: 10px;
}

h1, .mw-body h1 {
    font-size: 230%;
    background-color: var(--color_main);
    border-radius: 5px 30px 5px 30px / 5px 20px 5px 20px;
    color: white;
    padding-left: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px;
    line-height: 1.3em;
}

h2, .mw-body h2 {
    font-size: 210%;
/*    background-color: var(--color_main_grey2); */
    box-shadow: 0px 13px 10px -5px var(--color_main_grey4);
    border-bottom: 3px solid var(--color_main);
    margin-top: 0.7em;
}

h3, .mw-body h3 {
    font-size: 170%;
    border-bottom: 2px solid var(--color_main2);
/*    border-image: linear-gradient(to right, var(--color_main), var(--color_main3)) 1; */
}

h4, .mw-body h4 {
    font-size: 140%;
    color: black;
    border-bottom: 1px solid var(--color_main2);
/*    border-image: linear-gradient(to right, var(--color_main), white) 1; */
}

h5, .mw-body h5 {font-size: 125%; color: black;}

h6, .mw-body h6 {font-size: 110%; color: black;}


/*====================*/
/*      SIDEBAR       */
/*====================*/
#sidebar a, {font-size: var(--fs_S);}

.vector-menu-portal .vector-menu-content li {font-size: var(--fs_M);} /* Taille du menu pour Vector */
.vector-user-menu-legacy li {font-size: var(--fs_M);} /* Taille du menu pour Vector */
.vector-menu-tabs li a {font-size: var(--fs_M);} /* Taille du menu pour Vector */
#left-navigation {margin-left: 13em;}

#p-search, #sidebar .portlet {width: calc(var(--content_marg_left) - 5px);}

#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"] {
    font-family: var(--ff);
    width: 9.5em;
    font-size: var(--fs_XS);
}

#p-search input[type="submit"] {  /* Style du bouton de recherche */
    font-family: var(--ff);
    background-color: var(--color_main2);  
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: var(--fs_XS);
    box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px;
}

#p-search input[type="submit"] {display: none;} /* Supprime les boutons de recherche inutiles */


/*====================*/
/*   SOMMAIRE (TOC)   */
/*====================*/
#toc, #toc * {
    text-align: left;
}

#toc ul ul {margin-left: 1em; font-size: 95%;}

#toc {
    font-size: var(--fs_S);
    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: calc(var(--content_marg_right) - 12px);
}

#toc .toctitle {display: none;} /* Supprime le titre du Sommaire */

#toc .tocnumber { padding-right: 0.3em;}

/*====================*/
/*  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_XXS {font-size: var(--fs_XXS);}
.fontsize_XS {font-size: var(--fs_XS);}
.fontsize_S  {font-size: var(--fs_S);}
.fontsize_M  {font-size: var(--fs_M);}
.fontsize_L  {font-size: var(--fs_L);}
.fontsize_XL {font-size: var(--fs_XL);}
.fontsize_XXL {font-size: var(--fs_XXL);}

/*====================*/
/*  LIEN HYPERTEXTE   */
/*====================*/
a {position: relative;}

a:hover {text-decoration: none;}

a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color_main);
    transition: width 0.5s ease-in-out;
}

a:hover::after {width: 100%;}

a, a:visited {color: var(--color_a);}
a.new, a.new:visited {color: #cc2200;}

a:has(img):hover::after {width: 0;} /* Enlève l'effet de hover pour les liens autour des images */
#p-logo a:hover::after {width: 0%;} /* Enlève l'effet de hover sur le logo du site */

/*====================*/
/*   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;
    margin-bottom: 10px;
    margin-left: 20px;
}

.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_grey1);
     padding-left: 0.4em; padding-right: 0.4em;
     border: solid 1px var(--color_main2);
     box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
     margin-right: 0.5em;
     margin-left: 1em;
     margin-bottom: 0.5em;
     margin-top: -1.5em;
}


/*====================*/
/*       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; */
    width: 1200px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

.structure {
    position: relative;
    margin-left: auto;
    margin-right: auto;
/*    width: 1024px; */
/*    height: 768px; */
    width: 1200px;
    height: 900px;
    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");*/