MediaWiki:Common.css

/**********************************************************
 * Style Dokit for Schneider   -    issu de style.css Dokit
 *********************************************************/
 
/******* global elements */

.containerBodyWithoutSS.col-lg-12,
.footer-main.col-lg-12,
.contentContainer.col-lg-12 {
    padding-left: 0;
    padding-right: 0;
    float: unset;
}

.containerBodyWithoutSS .container {
    max-width: 1600px;
    width: 100%;
}

.ns-0 .containerBodyWithoutSS .container {
    max-width: 1170px;
    width: 100%;
}

.contentContainer {
    overflow-y: hidden;
}

/******* header */
#mw-navigation {
    border:0 ;
}

#mw-navigation .container {
    width:100%;
}

#p-logo {
    padding: 0;
    border: 0;
    margin-left: 0;
}

#p-logo img {
    max-height: none;
}

.navbar-userloggedin .glyphicon-user {
    display: none !important;
}

/******* Sidemenu  -  merged with my css (only part)  */

.SchneiderMenuChapter {
	padding-left: 30px; 
	margin-top: 20px; 
	margin-bottom: 20px; 
	color: #000000; 
	font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;
}

.SchneiderMenuTitle {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 20px;
    margin-top: 5px;
    padding: 0 15px 10px 30px;
}

.vertical-sidebar .MainCurrentChapter {
	background-color: #f2f4f8;
}

.vertical-sidebar .MainCurrentChapter > a {
    font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;
}

.vertical-sidebar li a {
	font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}

.vertical-sidebar a:active {
    color: #0087cd;
}

.vertical-sidebar li .selflink {
	font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
}


/* commented ... ce max-width est appliqué sur toutes les pages, pas seulement celles avec un sidemenu
body .pushBodyLeft.HasSideSummary .container {
    width: 100%;
    max-width: 1170px;
}
*/


/******* page toolbar  -  merged  */

.p-tb.navbar {
    z-index: 0;
    margin-top: 48px;
    padding-left: 5px;
    border: 1px solid #cbcbcb;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.p-tb .navbar-nav > li > a, .p-tb .navbar-nav > li > a:hover {
    padding: 5px 10px;
    font-size: 12px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}
.p-tb .navbar-nav > li > a {
    color: #9fa0a4;
}


/*  commented as not useful or managed elsewhere ... also already managed by chameleon (class = .img-responsive etc ...)
.responsive-img img {
    width: 100%;
    height: 100%;
}

.thumbinner {
	max-width: 100%;
}
*/


/*********************
 * Style of Schneider Footer
 *********************/

.footer-main {
    padding-bottom: 30px;
    background-color: #444;
}

.footer-main .container .row {
    padding-top: 30px;
    color: #fff;
}

.schneider-logo img {
    min-height: 40px;
}

.footer-info {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    /* font-size:12px; */
    float: none;
    width: 100%;
    margin-top:48px;
    margin-bottom: 0;
    padding: 0 15px 10px 0;
    color: #9fa0a4;
    background: #fff;
}

.footer-main li {
    line-height: 1.7em;
}

.footer-main .footer-info li {
    width: 100%;
    padding: 0 15px;
}

.footer-main a, .footer-main a:visited, .footer-main a.new {
    color: #9fa0a4;   /* medium grey  */
}

/* Dokit version, kept temporarily as memory
.footer-main a:link,
.footer-main a:visited {
    color: #aaa;
}
*/

.footer-main a:visited:hover,
.footer-main a:hover,
.footer-main a:active {
    color: #ffffff;
    text-decoration: none;
}

#footer-icons {
    margin-bottom: 30px;
}

.footer-main h4 {
    color: inherit;
    font-size: 18px;
    font-weight: normal;
}

.footer-main p {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    color: #9fa0a4;   /* medium grey  */
}


/* ========= Comment & share ===========*/
#share-prev-next {
	margin-top: 48px;
    padding: 0 2em;
    /*  to disable text selection - for mobile */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */

}
.add-a-comment {
    display: inline-block;
	font-size: 16px;
	margin-bottom: 15px;
}
.add-a-comment a {
    color: #219bfd;
}
.add-a-comment a:before {
	content:'\F1A7';
	font-family:"se-icon";
	font-size:24px;
	line-height:20px;
	vertical-align: text-top;
    display: inline-block;
    padding-right: 10px;
}
#share-prev-next a.a2a_dd {
    color: inherit;
}
a.a2a_dd:before {
	content:'\F135';
	font-family:"se-icon";
	font-size:24px;
	line-height:20px;
	vertical-align: text-top;
    display: inline-block;
    padding-right: 15px;
}
a.a2a_dd:after {
	content:'\F159';
	font-family:"se-icon";
	font-size:24px;
	line-height:20px;
	vertical-align: text-top;
    display: inline-block;
    padding-left: 10px;
}
.comment-share {
	width:100%;
	text-align: left;
	margin-bottom: 48px;
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
}
.comment-share .btn {
    font-size: 16px;
    margin: 15px 32px 15px 0;
}
.comment-share .se-icon {
    font-size: 24px;
    margin: -5px 8px 0;
    top: 4px;
}
a:hover .se-icon {
    text-decoration: none;
}

/* ========= Previous Next ===========*/
.prev-next {
/*    margin-bottom: 48px;    */
}
/* ul.pager {padding-left:0!important;}   a priori pas/plus utile   */
.pager { margin: 0; }
li.previous a, li.next a {height:160px;width:160px;padding-top:100px;font-variant: small-caps;color:#999999;font-size:20px;letter-spacing: 1px;line-height:1;border-radius:0;border:0;}
li.previous a:link, li.previous a:visited {background-image: url("extensions/DokitSchneider/img/BUTTON_PREVIOUS_NORMAL.svg"); color:#9fa0a4;}
li.next a:link, li.next a:visited {background-image: url("extensions/DokitSchneider/img/BUTTON_NEXT_NORMAL.svg"); color:#9fa0a4;}
li.previous a:hover, li.previous a:active {background-image: url("extensions/DokitSchneider/img/BUTTON_PREVIOUS_SELECTED.svg");color:white;background-color:#3dcd58;}
li.next a:hover, li.next a:active {background-image: url("extensions/DokitSchneider/img/BUTTON_NEXT_SELECTED.svg");color:white;background-color:#3dcd58;}



/*********************
 * Tablet style
 *********************/

.navbar-default .navbar-toggle {
    border:none;
    padding: 5px 10px;
    margin-right: 0px;
    font-size: 1.4em;
    margin-top: 6px;
    margin-bottom: 6px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active {
    background-color: transparent;
}

/*  not useful, I think
.navbar-default .navbar-toggle .icon-bar {
    width: 5px;
    height: 5Px;
    background-color: #fff;
    border-radius: 5px;
}
*/

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:none !important;
}

/* == header - brought == */

.subnavbar {
    background-color: #3dcd58;
    color: #fff;
}

.subnavbar-label {
    padding-top: 6px;   /* modifié */
    height: 32px;
    padding-left: 15px;
}

#mw-navigation-collapse {
    float: right;
}

@media (min-width: 1024px) {
input#searchInput {
	width: 250px; 
}
#mw-navigation-collapse .nav.navbar-nav {
    display: none;
}
/* not useful ? already exists in bootstrap, just -16px, no visual difference (or better with -16px)
.navbar-right-aligned .navbar-tools:last-child {
    margin-right: -15px !important;
}
*/
}

@media (min-width: 992px) {
.footer-main p {
    padding-right: 60px;
}
}

@media (min-width: 1024px) {
#mw-navigation-collapse .nav.navbar-nav {
    display:block;
    }
}

/* added by me, reco Joost vs distance between sidemenu and content */
/* no more needed or not working, I think */
/*
@media only screen and (min-width: 1024px) and (max-width: 1830px) {
body .pushBodyLeft.HasSideSummary > .container {
    padding-left: 44px;
    padding-right: 44px;
}
}
*/

@media (min-width: 1440px) {
input#searchInput {
	width: 400px; }
}

@media (min-width: 1830px) {
.pushBodyLeft {
    margin-left: 0px;
    width: 100%;
}
}

@media (max-width: 1023px) {
.navbar-default .navbar-collapse .navbar-nav {
    display: none;
}
}


/*********************
 * Mobile style
 *********************/
@media (max-width: 1023px) {

#p-logo {
    height: 50px !important;
    margin-left: 10px;
}

#p-logo img {
    max-height: 50px;
}

.toggle.hookButtonOpenTop, .toggle {    /*  à supprimer après modif css wikifa-side-summary  */
    color: initial !important;
}

body .navbar-default .navbar-collapse .navbar-form {
    box-shadow: none;
}

.mw-body, #share-prev-next  {
    padding: 0px;
}

}





/* =========================================================================*/
/* DEV - COMMON.CSS - Le CSS placé ici sera appliqué à tous les habillages. */

/* avoid impacts of parser DIV added in latest MW version */
/* .mw-parser-output { display: inline; } */


/* Default Schneider Electric web font - to be moved to style.less*/
@font-face{
    font-family:'Arial Rounded MT Std';
    src:url("/webfonts/ArialRoundedMTStd.otf");
}
@font-face{
    font-family:'Arial Rounded MT Std Light';
    src:url("/webfonts/ArialRoundedMTStd-Light.otf");
}
@font-face{
    font-family:'Arial Rounded MT Std Bold';
    src:url("/webfonts/ArialRoundedMTStd-Bold.otf");
}
/* version Emmanuel 
@font-face {
  font-family: 'se-icon';
  src: url('/webfonts/se-icon.eot?') format('embedded-opentype'),
       url('/webfonts/se-icon.woff') format('woff'),
       url('/webfonts/se-icon.woff2') format('woff2'),
       url('/webfonts/se-icon.ttf') format('truetype'),
       url('/webfonts/se-icon.svg') format('svg');
}
*/

/* SE-ICONS  -  css récupéré dans l'outil de sélection de se-icon */
@font-face {
  font-family: "se-icon";
  src: url("/webfonts/se-icon.eot");
  src: url("/webfonts/se-icon.eot?#iefix") format("embedded-opentype"), url("/webfonts/se-icon.woff") format("woff"), url("/webfonts/se-icon.ttf") format("truetype"), url("/webfonts/se-icon.svg#se-icon") format("svg");
  font-weight: normal;
  font-style: normal; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "se-icon";
    src: url("/webfonts/se-icon.svg#se-icon") format("svg"); } }

[class*="se-icon"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "se-icon";
  speak: none;
  font-style: normal;
  line-height: 1;
  position: relative;
  top: 1px;
  display: inline-block;
  font-size: 24px;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  font-stretch: normal;
  text-transform: none;
  font-size: inherit;
  text-rendering: auto;
  /* Better Font Rendering =========== */
  font-smoothing: antialiased;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-display: block; }

.se-icon-action_share:before {
  content: ""; }

.se-icon-arrow2_down:before {
  content: ""; }

.se-icon-communication_bubbles3:before {
  content: ""; }

.se-icon-action_download_stroke:before {
  content: ""; }

.se-icon-open_book:before {
  content: ""; }

.se-icon-solar_panel1:before {
  content: ""; }

.se-icon-action_search_stroke:before {
  content: ""; }

.se-icon-action_search:before {
  content: ""; }

/* =======================================================  */

body { font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif; color:#434343;}   /* when moving to style.less, replace fixed color value by variable */


/* ================= Links =====================
/* kept for memory, for now, while testing mixin added in style.less

a, a:link, a:visited, a.new:link, a.new:visited, a.external:link, a.external:visited {
	color: #0087cd;
}
a:hover, a:focus, a:visited:hover, a:visited:focus, a.new:hover, a.new:focus, a.external:hover, a.external:focus  {
	color: #219bfd;
}
a:active, a.new:active, a.external:active {
	color: #b10043;
}
*/


/* =========== Breadcrumbs =============*/
.sbl-breadcrumb-bootstrap, .sbl-breadcrumb-bootstrap a, .sbl-breadcrumb-slash-location  { color: #9fa0a4; background-color: white; font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif; font-size: 12px; }
.sbl-breadcrumb-bootstrap a:hover  { color: #219bfd; }

#sbl-breadcrumbs {position:absolute;top:-8px;padding:0px;display:block;overflow:hidden;text-overflow: ellipsis;height:17px;}
#firstHeading {padding-top: 64px;padding-bottom:32px;margin: 0 0 .2em;}

@media only screen and (max-width: 767px) {
#sbl-breadcrumbs {display: none;}
#firstHeading { padding-top: 20px; }
}

/* ============ Content ==============*/
.mw-body {
/*	padding: 0px;  */
}
p {
    margin: 0.6em 0;
}
pre {
    margin: 10px 0;
}
.mw-body ol, .mw-body ul {
	margin: 0.2em 0 0 1em;
	padding-left: 0;
}
.mw-body ul {
	list-style: outside disc url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%2214%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%229%22%20r%3D%223%22%20fill%3D%22%23cbcbcb%22/%3E%3C/svg%3E");
	list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAJCAYAAAARml2dAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABUSURBVAiZdY4xDsAgFELB2J0DdnbwQI5OHvDfgC62SY0yvhAetI1dWEq5JN0kKwDYbhEx8oT9a5JdEtLb/M2QNW0FAJLttkLbLUfEkIRVztPdo+MBm8UkW9Zxc20AAAAASUVORK5CYII=") \9;
}
.mw-body li {
    margin-bottom: .1em;
    padding-left: 0.5em;
}
.mw-body ul ul ul, .mw-body ol ol ul, .mw-body ul ol ul, .mw-body ol ul ul, .mw-body dl dl ul {
  list-style: none;
}
.mw-body ul ul ul li:before, .mw-body ol ol ul li:before, .mw-body ul ol ul li:before, .mw-body ol ul ul li:before, .mw-body dl dl ul li:before  {
  content: '\2013';
  position: absolute;
  margin-left: -1.3em;
}
.mw-content-ltr dd, .mw-content-rtl .mw-content-ltr dd {
    margin-left: 1em;
    padding-left: 0.5em;
}



/* ============ titles h1, h2 ... ==============*/
h1 { font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif; font-size: 32px;}
.firstHeading {border-bottom: 1px solid #cbcbcb;}
.firstHeading .titleicon {vertical-align: text-top; margin-right:0.4em;}   /* First heading icons */
h1, h2, h3 { color:#000}
h4, h5 { color:#333333;}
h3, h4, h5 { font-family: 'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;}
h2 { font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif; font-size: 24px; padding-bottom: 0.4em; border-bottom: 1px solid #cbcbcb; }
h3 { font-size: 18px}
h4, h5 { font-size: 14px}
h1,h2,h3,h4,h5 {margin-top: 1.6em; margin-bottom: 0.8em;}


/* ============ Sidemenu   -   transféré dans css de l'extension  ==============*/

/* ============ end of Sidemenu ========================================================================*/


/* ============ Table ==============*/
/* reduce top-bottom margins vs chameleon default, as I have table title before and sometimes table notes after */
table.wikitable {
margin: 8px 0; 
box-sizing: content-box;
}
/*  only for wikitables with table-title before */
.table-title~table.wikitable {
box-shadow: 3px 3px 3px -1px rgba(159,160,164,0.4);
font-size: 12px;
color: inherit;
border: none;
}

.table-title~table.wikitable > tr > th, .table-title~table.wikitable > * > tr > th {background-color: #9ee6ab;color:black;text-align:left; border-color: #f9f9f9;padding: 0.4em 0.6em; vertical-align:top;}
table.wikitable > tr > td.table_title_level_1, table.wikitable > * > tr > td.table_title_level_1 {background-color: #cbcbcb!important; }
table.wikitable > tr > td.table_title_level_2, table.wikitable > * > tr > td.table_title_level_2 {background-color: #ededed!important; border-color: #9fa0a4!important; }
.table-title~table.wikitable > tr > td, .table-title~table.wikitable > * > tr > td {background-color: white; border-color: #9fa0a4; padding-left:0.6em; padding-right:0.6em; }

/* adjust the "external" borders around the table, for headers, normal cells, and for sub-headers */
.table-title~table.wikitable > * > tr > th:first-child { border-left-color: #9ee6ab; }
.table-title~table.wikitable > * > tr > td:first-child, .table-title~table.wikitable > * > tr > td.table_title_level_1:first-child, .table-title~table.wikitable > * > tr > td.table_title_level_2:first-child { border-left-color: #9fa0a4; }
.table-title~table.wikitable > * > tr > th:last-child { border-right-color: #9fa0a4; }
.table-title~table.wikitable > * > tr > td:last-child, .table-title~table.wikitable > * > tr > td.table_title_level_1:last-child, .table-title~table.wikitable > * > tr > td.table_title_level_2:last-child { border-right-color: #9fa0a4; }
.table-title~table.wikitable > * > tr:first-child > th, .table-title~table.wikitable > * > tr:first-child > td {
    border-top-color: #9ee6ab;
}

/* table title - div before the table */
.table-title {margin-top: 32px; }
span.title-num {font-weight: bold; }
/* span.title-sep::before {content: "\00a0\002013\00a0"; }    no more needed, added the dash in the html rather than css */

/* specific case of table legends, created with template tb-legend */
.table-title.no-title {
    margin: 0;
}
.table-title.no-title+table.wikitable {
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0 5px;
    background-color: #fff;
}
.table-title.no-title+table.wikitable td {
    border: none;
}
.legend-white {
	border: 1px solid #9fa0a4!important;
}

/* table notes */
.tb-notes {font-size: 12px; margin-top: 0; margin-left: 5px; margin-bottom: 32px;}
.tb-txt-notes ul { 
	list-style: none;
    margin-left: 1px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid #9fe6ac;
}
.tb-ref-notes, .tb-txt-notes {
    margin-top: 12px;
}
table.wikitable+p, table.wikitable+h3, table.wikitable+h4 {margin-top: 32px;}

/* Enable custom list style types like lower-alpha (copied from wikipedia) */
div.reflist ol.references {
 list-style-type: inherit; /* Enable custom list style types */
}
/* Format reference tooltips and table notes on mouseover - commented - styling done in ReferenceTooltip.css
.referencetooltip > li {
    background: #def;
    border: 1px solid #219bfd;
    -webkit-box-shadow: 0 0 10px rgba(0,135,205,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,135,205,0.4);
    box-shadow: 0 0 10px rgba(0,135,205,0.4);
}
ol.references li:target, .RTTarget {
    background-color: #d7edff;
}
.referencetooltip > li + li {
    border-top-color: #219bfd;
}
.referencetooltip > li + li::after {
    border-top-color: #d7edff;
}
.referencetooltip.RTflipped > li + li {
    border-bottom-color: #219bfd;
}
.referencetooltip.RTflipped > li + li::after {
    border-bottom-color: #d7edff;
}
.RTflipped {
	padding-top: 11px;
}
*/

/* table vertical align */
td {vertical-align: top;}

/* no border for empty cells */
.ns-0 table {empty-cells: hide;}

/* font-size for footnotes */
h2.footnotes-intro + .mw-references-wrap { font-size: 90%; }

/* ==================== responsive tables ===================== */

@media only screen and (max-width: 1024px) {

    /* modify look of table scrollbar, when table is too large for screen (mobile) and has its own horiz scrollbar */
    table::-webkit-scrollbar { height: 5px; }
    table::-webkit-scrollbar-thumb { background-color: #333333; }
    table::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }

    /* ============== images in tables ================ */
    .table-title~table.wikitable td a img {
        max-width: 30vw;
        height: auto;
    }
    
}

/* for each "standardized" table width (class .cols-2 ... 5), apply responsive CSS if screen size below max width, and standard max-width table CSS if screen is larger */
/* WARNING : might not be OK as it does not take into account if navigation menu is visible or not ... */

/* === .cols-2 === */
@media only screen and (max-width: 340px) {
.table-title.cols-2+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 341px) {
.table-title.cols-2 + table {
    max-width: 340px;
}
}

/* === .cols-3 === */
@media only screen and (max-width: 510px) {
.table-title.cols-3+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 511px) {
.table-title.cols-3+table {
    max-width: 510px;
}
}

/* === .cols-4 === */
@media only screen and (max-width: 680px) {
.table-title.cols-4+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 681px) {
.table-title.cols-4+table {
    max-width: 680px;
}
}

/* === .cols-5 === */
@media only screen and (max-width: 850px) {
.table-title.cols-5+table {
    margin-right: auto;
    border-collapse: collapse;
    overflow: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% + 15px);
    /*  to disable text selection - for mobile - when scrolling left-right on a table */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
}
@media only screen and (min-width: 851px) {
.table-title.cols-5+table {
    max-width: 850px;
}
}


/* highlights */
.hl-box {
    margin-top: 32px;
    margin-bottom: 32px;
    background: #F7F7F7;
    border-left: 3px solid #3DCD58;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 15px;
    width: 100%;
    border-radius: 0;
    padding: 16px;
}

/* local specific contents */

.local-specific-section {
/*    margin-left: -15px;            */
/*    padding: 3px 0px 3px 10px;     */
/*    border-left:5px solid #c96fff; */
    margin-left: -15px;
    margin-right: -15px;
    padding: 3px 15px;
    background-color: #f2edfe;
}
.local-specific-text {
    background-color: #f2edfe;
    padding: 2px 3px;
}

.local-specific {
    background-color: #f2edfe!important;
}

/* test ajout icône dans la marge
.local-specific-text:before, .local-specific-section:before {
    content: "\F1E2";
    font-family: "se-icon";
    font-size: 20px;
    position: absolute;
    left: -25px;
    margin-top: -5px;
    color: rgba(165, 111, 255, 1);
}
*/

/* ============== page TOC (generated by mediawiki) ================ */
#toc {
    display: table;
    padding: 16px;
    background-color: #f7f7f7;
    border-radius: 0;
    margin-top: 32px;
    margin-bottom: 32px;
}
#toc h2 {
    display: inline;
    font-size: 20px;
    border: none;
    color: #333333;
}
/*  span.toctext, #toc li a {   */
#toc ul {
	margin-left:0;
	margin-top:15px;
}
#toc li {
	padding-left:0;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}

#toc .tocnumber { display: none; }

/* ============== images with titles ('figures') ================ */
.img_anchor {
    margin-top: 32px;
    margin-bottom: 32px;
}
.thumbinner {
    background-color: white;
    border: none;
    padding: 0px;
    box-sizing: content-box;
    border-radius: 0;
}

.thumbinner { max-width:100%; }

.thumbcaption {
    border: none;
    background-color: #ededed;
    color: #434343;
    padding: 0px;
}

.thumbcaption p {margin:0;}

.thumbinner > img, .thumbinner a > img {
    border: 1px solid #ededed;
    border-bottom: none;
    background-color: white;
    max-width: calc(100% - 2px);
}

.figure-title {
    padding: 10px;
}

.figure-notes {
    font-size: 12px;
    border: 1px solid #ededed;
    border-top: none;
    padding: 10px 18px;
    background-color: white;
}

/*=================== new gallery ===============*/

.EIG-gallery { 
    margin-left: -4px;
    margin-top: 30px;
}

.gallery-title { padding: 0 0 5px 6px; }

.EIG-gallery ul.gallery {
    margin: 2px;
    padding: 2px;
    display: block;
}

.EIG-gallery li.gallerybox { 
	margin-bottom: 10px;
	padding-left: 0;
	max-width: 100%;
}

.EIG-gallery li.gallerybox > div {
    max-width: 100%;
}

.EIG-gallery li.gallerybox div.thumb { 
    border: 1px solid #ededed;
    background-color: white;
    max-width: calc(100% - 5px);
}

.EIG-gallery li.gallerybox div.thumb img {
    max-width: calc(100% - 10px);
}

.EIG-gallery li.gallerybox div.gallerytext { 
    font-size: 12px;
    padding: 0;
    word-wrap: break-word;
    background-color: #ededed;
    margin: -2px 3px 0 2px;
/*    min-height: 55px;   */
}

.EIG-gallery div.gallerytext p { margin: 5px 0 5px; padding: 5px 10px;}

/* ============ math formulas ==============*/
.mwe-math-element { margin: 0 7px; }


/* Video embedded as a float right */
.video-float-right {
	float:right;
	margin-left:20px;
	margin-bottom:20px;
	padding:0;
}

/* Video embedded as a float left */
.video-float-left {
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	padding:0;
}

.clearfix {clear: both;}








/* ================ CSS specific to Home Page (HP)  -  merged between Dokit css and my css =========================================================================== */

.eig-main-page .contentHeader {
    display: none;
}

.eig-main-page #content {
    margin-top: 0;
}

.eig-main-page .containerBodyWithoutSS > .container {
    max-width: none;
}

.eig-main-page .mw-body {
    padding: 0;
}

.eig-main-page div.patrollink {
    max-width: 1170px;
    margin: auto;
    margin-top: 20px;
}


/******************************
 * HP  -  Carousel  -  Merged
 *****************************/

.hp-slider {
    margin-top:-1px;
}

.hp-slider ol.carousel-indicators {
    width: 100%;
    left: auto;
    margin: auto;
    text-align: center;
    bottom: 5px;
    padding-left: 0;
}

/* commented, seems unneeded
.hp-slider .carousel {
    border: none;
}
*/

.hp-slider .carousel-caption {
    float: left;
    text-align: left;
    padding: 24px;
    max-width: 520px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 10%;
    left:25%;  /*  modifié pour carousel sur toute la largeur de la page */
    right:15%;
    bottom: auto;
}

.hp-slider .carousel-caption h4 {
	font-family:'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 2em;
	color:inherit;
	margin-top: 0;
	margin-bottom: 15px;
}

.hp-slider p.text {
    font-size: 1.05em;
    margin-bottom: 1em;
    line-height: 1.5em;
}

.carousel-caption p {
    margin: 0;
}

.hp-slider .carousel-indicators li {
    width: 14px;
    height: 14px;
    background-color: #e6e6e6;
    -webkit-transition: opacity 200ms cubic-bezier(0.19,1,0.22,1);
    transition: opacity 200ms cubic-bezier(0.19,1,0.22,1);
    margin:0 1px;
    border: 0px;
}

.hp-slider .carousel-indicators li.active {
    background-color: #3dcd58;
}

.hp-slider .carousel-inner {
    max-height: 300px;
}

.hp-slider .carousel-inner + p {
    margin: 0px;
}

@media (min-width: 1921px) {
    .hp-slider {
        max-width:1170px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }
}

/*****************************************
 * HP  -  Blog Post  -  Merged
 ****************************************/

 .hp-blogpost {
    padding-top: 5px;
    padding-bottom: 13px;
    border-bottom: 1px solid #cbcbcb;
}

.hp-blogpost .btn {
    float: left;
    font-size: 16px;
    max-width: 230px;
	margin-top: 10px;
    padding: 5px 12px 5px 38px;
	background-image: url("extensions/DokitSchneider/img/ICON_BLOG_ALPHA75_24.png");
	background-position: 6px 4px;
    background-size: 24px;
    background-repeat: no-repeat;
}

.hp-blogpost .btn-info:hover, .hp-blogpost .btn-info a:hover, .hp-blogpost .btn-info a.new:visited:hover, .hp-blogpost .btn-info a:visited:hover {
    background-color: #0087cd;
    border-color: #0087cd;
}

.hp-blogpost dl {
    float: left;
    width: calc(100% - 245px);    /* should be ok for other languages - tested in FR   */
    margin-left: 15px;
    margin-bottom: 0;
    margin-top: -2px;

}

.mw-body .hp-blogpost .plainlinks a {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    float: left;
    vertical-align: baseline;
	color: #3dcd58;
	font-size: 15px;
}

.blog-author {
    float: left;
    margin: 0px 15px;
    color:#505559;     /* Joost reco */
    font-size: 15px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}


/*********************
 * HP - Intro
 *********************/
.intro-section h1 {        /*  Joost reco  */
    font-size: 32px;
	color: #000;
	margin-bottom: 20px;
}
.intro-section .intro-description, .chapter-section .subtitle {     /*  Joost reco  */
	font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    font-size: 18px;
    color: #333333;
}
.intro-section {
    margin-top: 44px;    /*  in total, vertical space (below blog border) OK vs reco Joost - replace by 24px if no blog border  */
}
.intro-description a {
    display: inline-block;    /* ensure that the link "Read more ..." is never broken between 2 lines  */
}


/*********************
 * HP - Table of Contents  -   css reviewed/merged according to my version of TOC (internal links, not external links as in Dokit version)
 *********************/

.chapter-section { 
    margin-top: 20px;
}
 
.chapter-section h3, .book-section h3, .highlight-section-block h3, .help-section h3 {     /* copied from isee-eig  -  chameleon.css  */
    text-align: left;
    font-family: "Arial Rounded MT Std",Helvetica,Verdana,sans-serif;
    font-size: 24px;
}

.chapter-section h3 {
	font-size: 28px;
	color: #3dcd58;
}

.chapter-section .subtitle {
    text-align: left;
    margin: 20px 0;
    font-size: 18px;    /*  responsive size to check ....   */
	color: #333333;
}

.hp-chapter {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    float: left;
    width: 100%;
    margin-bottom: 2em;
    border-left: 5px solid #3dcd58;
}

.hp-chapter:hover {
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.hp-chapter:hover h4 span {
    color: #219bfd;
    text-decoration: underline;
}
.hp-chapter > a {
	float:left;
	width:96px;
    height: 91px;
    padding-top: 15px;
}
.hp-chapter-img {margin: auto; display:block; }

.hp-chapter h4 {
	margin:0;
	padding: 0 15px 0 0;
    float: left;
    line-height: 21px;
	width: calc(100% - 96px); 
	font-family:'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
	font-size: 16px;
}

.hp-chapter-letter {font-weight: bold;}
.mw-body .hp-chapter h4 a {
	color:#333333;
	padding: 15px 0 13px;
	display:block;
}
.mw-body .hp-chapter h4 a:hover, .mw-body .hp-chapter h4 a:focus {color:#219bfd;}   /*  color as per Joost reco  */

/* added in case a chapter title would take more than 3 lines, to hide the text overflow  */
/* to be tested again when migrating German wiki, as titles are normally quite long  */
.mw-body .hp-chapter h4 a > span {
    height: 63px;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


/*********************
 * Book section block  -  Merged
 *********************/

.book-section {
    background-image: url('extensions/DokitSchneider/img/hp-book-bg.png');
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: 10px;
    padding: 0 30px 10px 30px;
}

.book-section h3 {
	margin-top: 20px;
	margin-bottom: 20px;
	color: #333333;
	padding-top: 120px;
}

.book-section-text {
	padding: 0 15px;
}

.book-section .subtitle {
	margin: 0 0 20px;
	font-size: 15px;
	font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
	color:#333333;
}

.book-section-img {
    text-align: center;
}


/*************************
 * Highlight section block  (no merging here as it did not exist as such in Dokit css - was "help-section-left" in Dokit homepage)
 *************************/
.highlight-section {
    margin-top: 64px;
}

.highlight-section p {
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}

.highlight-section-block {
    padding: 0 30px;
    max-width: 585px;
}

.highlight-section-block .subtitle {
    text-align: left;
    font-size: 16px;
    color: #3dcd58;
    margin: 0 0 10px;
}

.highlight-section-block:nth-child(odd) {
	border-right: 1px solid #cbcbcb;
}

.highlight-section-block h3 {
    margin: 0 0 25px;
    color: #333333;
}

.highlight-section-block img {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}

.highlight-section-block a {
    font-family: "Arial Rounded Mt Std",Helvetica,Verdana,sans-serif;
/*    color: #219bfd;    a priori pas utile  */
}

.highlight-link {margin-top: 15px;}

/*******************************
 * Help section block  -  Merged
 *******************************/

.help-section { margin-top: 64px;}

.help-section .row { background-color: #f7f7f7; }

.help-section h3 { margin-top: 0; color:#fff; }
.help-section-text {
    color: #fff;
    background-color: #626469;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    padding: 30px;
}

.help-section-action {
    text-align: center;
    padding: 30px 15px 20px;
}

.help-section-action a, .help-section-action a.new {
    color: #333333;
}

.help-section-action a:hover, .help-section-action a.new:hover {
    color: #219bfd;
}

.help-section-action h4 {
	font-size: 16px;
	margin-top: 15px;
	color: inherit;
}
.help-section-action p { 
	margin:0;
	font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
}

/*******************************
 * Other languages section
 *******************************/
.lang-section {
    padding: 0 30px;
	margin-top: 64px;
}

.lang-section.container h3 {
    font-size: 24px;
    font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
    margin-top: 0;
}

.hp-lang {
    padding: 15px;
    background-color: #f7f7f7;
}

.hp-lang:hover, .hp-lang:hover h4 {
    background-color: #e6e6e6;   /* Super Light Grey */
}

.hp-lang h4 {
    padding: 15px;
    background-color: inherit;
    color: #333333;
    margin: 0;
    text-align: center;
    font-family: 'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;
    font-size: 20px;
}

.lang-section .subtitle {
    font-size: 15px;
    font-family: 'Arial Rounded MT Std Light',Helvetica,Verdana,sans-serif;
    color: #333333;
}

.lang-section.container h3:before {
    content: "\F1E2";
    font-family: "se-icon";
    font-size: 32px;
    vertical-align: sub;
    padding-right: 10px;
    margin-left: -4px;
    color: #9fa0a4;
}

.lang-section .row > div {
    margin-top: 10px;
}

.hp-lang a:hover {
    text-decoration: none;
}

@media (max-width: 767px) {
.lang-section {
    padding: 0;
}
}


/*********************
 * Tablet style  -  from Dokit  -  only HomePage parts  -  to be merged with mine
 *********************/

/*  commented for now  -  check if useful to do something, like smaller icon size + larger space for title + smaller font, possibly
    also keep in mind that I re-used class .hp-chapter-img but it is different than in Dokit version of chapter TOC
    so ALL css related to .hp-chapter-img MUST BE REVIEWED

@media (max-width: 1200px) {
.hp-chapter-img {
    width: 87px;
    padding: 15px 10px !important;
    height: 90px;
    }

.hp-chapter h4 {
    width: calc(100% - 88px);
    font-size: 16px;
    padding-top: 23px;
    max-height: 75px;
    overflow: hidden;
    }
}

*/

/*********************
 * Mobile style   -   merged
 *********************/

@media (max-width: 991px) {

.book-section {
    background-repeat: repeat;
    padding-top: 25px;
}

.book-section h3 {
    padding-top: 15px;
}

.book-section-img img {
    max-width: 100%;
    height: auto;
}

.hp-slider p.text {
	display: none;
}

}

@media (max-width: 767px) {

.intro-section {
    margin-top: 24px;
}
.intro-section h1 {
    font-size: 28px;
}

.chapter-section h3 {
    font-size: 24px;
}

.intro-section .intro-description, .chapter-section .subtitle {
    font-size: 16px;
}

.book-section {
    margin-top: 50px;
}
.book-section h3 {
    padding-top: 0px;
}

.book-section-text {
    padding: 0;
}

.book-section-img {
    margin-top: 30px;
    padding-left: 50px;
}

.highlight-section-block {
    padding: 24px 15px;
}
.highlight-section-block:nth-child(odd) {
	border-right: none;
	border-bottom: 1px solid #cbcbcb;
}

}

@media (max-width: 768px) {

.hp-slider, .hp-blogpost {
    display: none;
}

.p-tb.navbar { display:none; }

}


@media (max-width: 360px) {

.hp-chapter > a {
	width:80px;
    height: 75px;
    padding-top: 18px;
}

.hp-chapter img:not([class=icon_new]) {
    width: 65%;
    height: auto;
}


.hp-chapter h4 {
    width: calc(100% - 80px);
    font-size: 14px;
}

.book-section-img {
    padding-left: 0;
}

li.previous a, li.next a {
    height: 132px;
    width: 132px;
    padding-top: 80px;
    font-size: 16px;
}
}

@media (max-width: 319px) {

.hp-chapter h4 {
    font-size: 12px;
}

}


/*****************************************************************************************
 * ajustements UI mediawiki  vs  chameleon qui impose "box-sizing = border-box" par défaut  
 ****************************************************************************************/

.wikiEditor-ui {
    box-sizing: content-box;
}

/*****************************************************************************************
 * ajustements look&feel pages spéciales  
 ****************************************************************************************/
.ns--1 #firstHeading {
    padding-top: 20px;
}
/* make "new" links appear in red in special namespace */
body.ns--1 a.new {
    color: #b10043;
}


.action-edit #share-prev-next {
    display: none;
}

/* ============ CSS for chapter TOC pages ==============*/
#chapter-toc { padding: 0 15px 15px; background-color: #f9f9f9; }
#chapter-toc h2 { margin-top: 0; }

#chapter-toc > ul { list-style: none; padding: 0; margin-left:0; }
#chapter-toc > ul > li { font-size: 18px; padding: 0.8em 0 0; font-family:'Arial Rounded MT Std Bold',Helvetica,Verdana,sans-serif;}
#chapter-toc a {color: #333333;}

#chapter-toc > ul ul { padding: 0.2em 0 0.2em 0.3em; }
#chapter-toc > ul ul li { font-size: 14px; }
#chapter-toc ul ul a { color: #626469; font-family:'Arial Rounded MT Std',Helvetica,Verdana,sans-serif;}

#chapter-toc a:hover { color: #219bfd; }

/* commented for now - test other chapter toc intro format
body.Chapter-TOC h1.firstHeading, body.Chapter-TOC #sbl-breadcrumbs { display:none; }
*/

.chapter-toc-title {
	margin: 48px 0 16px;
}

.chapter-toc-chapter {
    color: #3dcd58;
}

.chapter-banner-img {
    max-width: 100%;
    height: auto;
}
.chapter-banner + .hl-box {
    margin-top: 0;
    border:none;
}

/* TOC toggle (show-hide) in page tocs */
.toctoggle {
    float: right;
    padding-left: 10px;
}

/* Hide Share and Prev-Next when editing a page */
.action-edit #share-prev-next, .ve-active #share-prev-next {
	display: none;
}

/* Tables "squares" to show functions and options */
.tb-squares {
    font-size: 15px;
    line-height: 17px;
}

/* figure number format, in texts like "see Fig. xxx" */
.FigRef {
    font-weight: bold;
}

/* Hide category links in namespace 0 */
.ns-0 #catlinks {
    display: none;
}



/*===========================================================================*/
/* Adjustments to UI elements that are not OK vs skin Chameleon and MW 1.31 */

/* Correction of bug in Chameleon skin */
@media (min-width: 1024px) {
.skin-chameleon .navbar-tools > li, .skin-chameleon .navbar-tools li.open {
    float: none;
}
}

.mw-echo-ui-crossWikiUnreadFilterWidget-subtitle {
    display: block!important;
}

/* pb in advanced search options format, because chameleon uses .mw-body ul, which takes precedence over .search-types ul */
.mw-body .search-types ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* position of notifications when watching / unwatching pages */
.mw-notification-area { position: fixed; top: 100px; }

/* add "video" capsule at the end of a page title */
/* in pages including a video, and in search results */
.vd0 #firstHeading:after, .mw-search-results a[title*=Eig-pages-with-video]+a:after {
    content: "video";
    display: inline-block;
    font-family: Arial;
    font-size: 9px;
    color: #fff;
    background-color: #9fa0a4;
    padding: 2px 4px;
    border-radius: 3px;
    position: relative;
    top: -17px;
    left: 4px;
}
.mw-search-results a[title*=Eig-pages-with-video]+a:after {
    top: -7px;
}
/* hide the VIDEO TitleIcon (replaced by capsule after page title) */
#firstHeading img[src*=media_player], .mw-search-results a[title*=Eig-pages-with-video] { display: none; }

/* Search results - adjust look&feel */
.mw-body .mw-search-results { max-width: 50em; padding: 0; margin:0;}
.searchresult { max-width: 40em; }
.searchalttitle { display:none; }
.mw-search-results .titleicon { margin-right:0.3em;}

/* Create account form - adjust for captcha size */
div#userloginForm form, div#userlogin form#userlogin2 {min-width: 302px;}

/* editorial pages */
.mw-parser-output .helpContents-section {
    position: relative;
    margin: 1em 0;
    padding-left: 65px;
    padding-right: 30px;
}

.mw-parser-output .helpContents-icon {
    position: absolute;
    left: 0;
    line-height: 1;
}

.mw-parser-output .helpContents-section h2 {
    font-size: 21px;
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    line-height: 1.5;
}

/* related guides blocks - chapter landing pages */
.related-guide {
    padding: 20px 0;
}
.related-guide+.related-guide {
    border-top: 1px solid #e6e6e6;
}
h2+.related-guide {
    margin-top: -10px;
}
.related-guide-image {
    display: table-cell;
    width: 140px;
}
.related-guide-image:hover {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.related-guide-details {
    display: table-cell;
    vertical-align: top;
    padding-left: 15px;
}
.related-guide-title {font-family: Arial Rounded MT Std Bold; font-size: 16px; margin-bottom: 0.6em; }
@media (max-width: 360px) {
.related-guide-details {
    display: block;
    padding: 16px 0 0;
}
}