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

Version du 20 juin 2024 à 13:23

/*====================*/
/* VARIABLES GLOBALES */
/*====================*/
: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;   /* Couleur général +sombre */
    --color_main_grey1: #F5F5F5;  /* Gris clair+ */
    --color_main_grey2: #EAEAEA;  /* Gris clair */
    --color_main_grey3: #E0E0E0;  /* Gris moyen - Fond du site */
    --color_main_grey4: #D8D8D8;  /* Gris foncé */
    --color_main_grey5: #CACACA;  /* Gris foncé+ */
    --color_gradient1: #496D27;   /* ok */
    --color_gradient2: #9F4A3B;   /* ok */
    --color_gradient3: #448086;   /* ok */
    --color_gradient4: #00BA97;   /* pas testé */
    --color_gradient5: #00DBF2;   /* pas testé */

    --color_home_h2: #4D1712;      /* Couleur Titre niv 2 de l'accueil */
    --color_a: #0752CA;            /* Couleur des liens hypertexte (save #0858D9) */
    --a_link_title_icon: "⮊";      /* Flèches des liens de titre */
    --a_link_title_color: #002C75; /* Couleurs des flèches (save #002C75) */


    --fs: 12.5px;                   /* Police de base - Taille */
    --ff: Calibri, sans-serif;    /* Police de base - Police */
    --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 */
    --h1_size: 230%; --h2_size: 210%; --h3_size: 170%; --h4_size: 140%; --h5_size: 125%; --h6_size: 110%; /* Taille des titrs */

    --content_marg_left: 140px;  /* Marge du site : à droite */
    --content_marg_right: 200px; /* Marge du site : à gauche */
    --menu_marg_top: 140px;      /* Marge du site : en haut */
    --box_shadow_menu: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; /* Ombre des menus - TOC et menu de gauche */

    --ibox_size: 270px; /* Taille de l'infobox */
}


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

.mw-body {line-height: 1.4}

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


/*====================*/
/* ADAPTATION VECTOR  */
/*====================*/
.vector-body {font-size: 130%;} /* Ajustement de la taille la police) */

#mw-page-base {background-image: none; background-color: var(--color_main_grey3);} /* Bandeau du haut */

/*====================*/
/*   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 {position: relative; text-align: center; z-index: 0;}


/*====================*/
/*      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;
    margin-bottom: 0.5em;
    line-height: 1em;
}

h1, .mw-body h1 {
    font-size: var(--h1_size);
    background-color: var(--color_main);
    border-radius: 15px 15px 15px 15px;
    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: var(--h2_size);
    box-shadow: 0px 13px 10px -5px var(--color_main_grey4);
    border-bottom: 3px solid var(--color_main);
}

.page-Accueil h2 {
    color: var(--color_home_h2);
    border: 1px solid var(--color_home_h2);
    border-bottom: 3px solid var(--color_home_h2);
    border-right: 3px solid var(--color_home_h2);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 1.95px 1.95px 2.6px;
    background-color: var(--color_main_grey1);
    line-height: 1.2em;
    padding-left: 0.5em;
}

h3, .mw-body h3 {
    font-size: var(--h3_size);
    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: var(--h4_size);
    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: var(--h5_size); color: black;}

h6, .mw-body h6 {font-size: var(--h6_size); color: black;}

/* Ajouter une icône après les titres contenant des liens, sauf pour les liens "MODIFIER" */
h1 a:not(.mw-editsection a), h2 a:not(.mw-editsection a), h3 a:not(.mw-editsection a), 
h4 a:not(.mw-editsection a), h5 a:not(.mw-editsection a), h6 a:not(.mw-editsection a),
.mw-body h1 a:not(.mw-editsection a), .mw-body h2 a:not(.mw-editsection a), 
.mw-body h3 a:not(.mw-editsection a), .mw-body h4 a:not(.mw-editsection a), 
.mw-body h5 a:not(.mw-editsection a), .mw-body h6 a:not(.mw-editsection a) {
    color: inherit;        /* Conserver la couleur du titre */
    text-decoration: none; /* Supprimer le soulignement par défaut des liens */
    position: relative;    /* Nécessaire pour le pseudo-élément */
}

h1 a:not(.mw-editsection a)::after, h2 a:not(.mw-editsection a)::after, h3 a:not(.mw-editsection a)::after, 
h4 a:not(.mw-editsection a)::after, h5 a:not(.mw-editsection a)::after, h6 a:not(.mw-editsection a)::after,
.mw-body h1 a:not(.mw-editsection a)::after, .mw-body h2 a:not(.mw-editsection a)::after, 
.mw-body h3 a:not(.mw-editsection a)::after, .mw-body h4 a:not(.mw-editsection a)::after, 
.mw-body h5 a:not(.mw-editsection a)::after, .mw-body h6 a:not(.mw-editsection a)::after {
    font-family: -apple-system;
    vertical-align: middle;
    content: var(--a_link_title_icon);
    font-size: 1em;
    color: var(--a_link_title_color);
    margin-left: 0.4em;
}


/*====================*/
/* HEADER non-header  */
/*====================*/
.nh2, .nh3, .nh4, .nh5, .nh6 {
    font-variant-caps: small-caps;
    font-weight: bold;
    color: var(--color_main);
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-top: 0.5em;
    line-height: 1em;
}

.nh2 {font-size: var(--h2_size);}
.nh3 {font-size: var(--h3_size);}
.nh4 {font-size: var(--h4_size);}
.nh5 {font-size: var(--h5_size);}
.nh6 {font-size: var(--h6_size);}

.nh4, .nh5, .nh6 {color: black;}


/*====================*/
/*      SIDEBAR       */
/*====================*/
#sidebar, #mw-panel {
    position: fixed;
    background-color: var(--color_main_grey3);
    top: var(--menu_marg_top);
    left: 0px;
    box-shadow: var(--box_shadow_menu);;
    border-radius: 0px 10px 10px 0px;
    padding: 6px 0px 6px 0px;
    z-index: 1;
}

#sidebar a, {font-size: var(--fs_S);}

body.skin--responsive #sidebar .pBody {
    background-color: transparent;
    border: none;
}

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

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

#p-search h3, #p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3, #p-RACCOURCIS h3, #p-REGIONS h3 {font-weight: bold; border: none; box-shadow: none; font-size: var(--fs_XL);}

#p-search ul, #p-NAVIGATION ul, #p-tb ul, #p-OUTILS_SPECIAUX ul, #p-RACCOURCIS ul, #p-REGIONS ul {margin: 0.25em;}

#p-search input[type="search"] {
    font-family: var(--ff);
    width: 9.1em;
    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 */
#p-search-label {display: none;} /* Supprime le titre du bouton Rechercher */

#sidebar ul {list-style-type: "●";}

#sidebar ul li {padding-left: 0.1em;}

#sidebar li::marker {color: #6F6F6F; font-size: 100%;}


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

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

#toc {
    font-size: var(--fs_S);
    line-height: 1.3em;
    border: none;
    border-radius: 10px 0px 0px 10px;
    box-shadow: var(--box_shadow_menu);
    position: fixed;
    top: var(--menu_marg_top);
    right: 0;
    max-height: calc(90vh - 150px);
    overflow-y: auto;
    background-color: var(--color_main_grey3);
    width: calc(var(--content_marg_right) - 20px);
}

#toc ul {margin: 0.3em 0;}

/* #toc > ul {font-weight: bold;} H2 de toc en gras*/

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

.fontsize_XXS, .fontsize_XS, .fontsize_S, .fontsize_M, .fontsize_L, .fontsize_XL, .fontsize_XXL {display: inline-block;}

/*====================*/
/*  LIEN HYPERTEXTE   */
/*====================*/
a:hover {text-decoration: none;}
a, a:visited {color: var(--color_a);}
a.new, a.new:visited {color: #cc2200;}


/*====================*/
/*   FIL D'ARIANE     */
/*====================*/
.breadcrumb {
    display: inline-block;
    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 : 0.1em;
}

/* Espace avant et après chaque lien */
.breadcrumb a {margin-right: 0.5em; margin-left: 0.1em;}


/*====================*/
/*      POST-IT       */
/*====================*/
.post-it {
    float: right;
    background-color: #E0DA15;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transform: rotate(-8deg);
    padding: 1.5em;
    margin: 0 15px 15px 15px;
    font-family: "Segoe Print";
    text-align: center;
}

/*====================*/
/*      INFOBOX       */
/*====================*/
.infobox {
    display: flex;
	flex-wrap: wrap;
	width: var(--ibox_size);
	font-family: Calibri;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
    float: right;
    background-color :#EEEEEE;
    font-size: 80%;
	vertical-align: top;
    text-align: left;
    line-height: 1.7;
    margin: 0px 0px 15px 15px;
}

.infobox-title {
    width: 100%;
    font-weight: bold;
    background-color: var(--color_main);
    color: white;
    font-size: 115%;
	text-align: center;
}

.infobox-img {width: var(--ibox_size); height: auto;}

.infobox-30 {width: 28%; padding:0 0 0 2%; font-weight: bold;}
.infobox-70 {width: 65%; padding:0 0 0 2%;}





/*====================*/
/*   mw-collapsible A REFAIRE   */
/*====================*/
.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;
}

/*====================*/
/*       PAPER        */
/*====================*/
.paper {
    background-color: #f8f5de;
    background-image: linear-gradient(to right, #e4e1d4 0%, #f1f0e9 16%, #e4e1d4 40%, #f1f0e9 60%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.paper2 {
    background-color: #f8f5de;
    background-image: linear-gradient(to right, #f1f0e9 20%, #e4e1d4 35%, #f1f0e9 45%, #bbb593 50%, #aca67e 50%, #f1f0e9 58%, #e4e1d4 70%, #f1f0e9 80%);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.paper-titre, .paper2-titre {
    padding: 1.25em 9% 0 9%;
    color: var(--color_main);
    font-family: "Old English Text MT";
    font-size: 200%;
    text-align: left;
}

.paper2-titre {padding: 1.25em 4.5% 0 4.5%;}

.paper-titre [class^="image-"] {margin-bottom: 0;}

.paper-text, .paper2-text {
    padding: 1.75em 9% 3.5em 9%;
    color: rgba(0,0,0,0.85);
    letter-spacing: 0.03em;
    font-family: Geranium, Cavolini;
    font-size: var(--fs_XS);
}

.paper2-text {padding: 1.75em 4.5% 3.5em 4.5%;}

.paper-text::first-letter {
    color: var(--color_main);
    font-family: "Old English Text MT";
    font-size: 4em;
    line-height: 1;
    float: left;
    margin-right: 0;
}

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

.Bl-Shad0T {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
    hyphens: auto;
    text-align: justify;
    padding: 1em;
}

.Justify, .Coll, .Coll3, .Coll4, .Coll-5, {
    hyphens: auto;
    text-align: justify;
}

.Coll {column-count: 2;}
.Coll3 {column-count: 3;}
.Coll4 {column-count: 4;}
.Coll-5 {column-count: 2; column-gap: 10%;}


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

.image-left, .image-right, .image-center { margin-bottom: 15px; }

.image-left { float: left; margin-right: 15px; }
.image-right { float: right; margin-left: 15px; }
.image-center { margin-right: auto; margin-left: auto;}

.image-thumb {
    padding: 5px;
    border: 1px solid #c8ccd1;
    background-color: #f8f9fa;
    font-size: 87%;
}


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


/*====================*/
/*       LIVRE        */
/*====================*/
.livre {
    position: relative;
    text-align: center;
    font-family: "Pristina";
    font-weight: bold;
    font-size: 170%;
    transition: 0.5s;
    margin: 0 10px 10px 10px;
}

.livre a, .livre {color: #404040;}

.livre-titre {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.livre:hover{transform: rotate(1deg);}


/*====================*/
/*   ZOOM DE CARTE    */
/*====================*/
.titrecarte {
    text-align: center;
    color: var(--color_main);
    font-size: 120%;
    font-weight: bold;
}

.zoominfo {
    font-size: 80%;
    width: 1200px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

.structure {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    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 DAN      */
/*====================*/

.paper3 {
    background-color: #f8f5de;
    background-image: Livre-O_0.png;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.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");*/