/*
 * CSS hacks and small modification for my Sphinx website
 * :copyright: Copyright 2013-2016 Lilian Besson
 * :license: GPLv3, see LICENSE for details.
 */


/* Colors and text decoration.
 For example, :black:`text in black` or :blink:`text blinking` in rST. */

.black {
    color: black;
}

.gray {
    color: gray;
}

.grey {
    color: gray;
}

.silver {
    color: silver;
}

.white {
    color: white;
}

.maroon {
    color: maroon;
}

.red {
    color: red;
}

.magenta {
    color: magenta;
}

.fuchsia {
    color: fuchsia;
}

.pink {
    color: pink;
}

.orange {
    color: orange;
}

.yellow {
    color: yellow;
}

.lime {
    color: lime;
}

.green {
    color: green;
}

.olive {
    color: olive;
}

.teal {
    color: teal;
}

.cyan {
    color: cyan;
}

.aqua {
    color: aqua;
}

.blue {
    color: blue;
}

.navy {
    color: navy;
}

.purple {
    color: purple;
}

.under {
    text-decoration: underline;
}

.over {
    text-decoration: overline;
}

.blink {
    text-decoration: blink;
}

.line {
    text-decoration: line-through;
}

.strike {
    text-decoration: line-through;
}

.it {
    font-style: italic;
}

.ob {
    font-style: oblique;
}

.small {
    font-size: small;
}

.large {
    font-size: large;
}

.smallpar {
    font-size: small;
}


/* Style pour les badges en bas de la page. */

div.supportBadges {
    margin: 1em;
    text-align: right;
}

div.supportBadges ul {
    padding: 0;
    display: inline;
}

div.supportBadges li {
    display: inline;
}

div.supportBadges a {
    margin-right: 1px;
    opacity: 0.6;
}

div.supportBadges a:hover {
    opacity: 1;
}


/* Details elements in the sidebar */

a.reference {
    border-bottom: none;
    text-decoration: none;
}

ul.details {
    font-size: 80%;
}

ul.details li p {
    font-size: 85%;
}

ul.externallinks {
    font-size: 85%;
}


/* Pour le drapeau de langue */

img.languageswitch {
    width: 50px;
    height: 32px;
    margin-left: 5px;
    vertical-align: bottom;
}

div.sphinxsidebar {
    overflow: hidden !important;
    font-size: 120%;
    word-wrap: break-word;
    width: 300px;
    max-width: 300px;
}

div.sphinxsidebar h3 {
    font-size: 125%;
}

div.sphinxsidebar h4 {
    font-size: 110%;
}

div.sphinxsidebar a {
    font-size: 85%;
}


/* Image style for scrollUp jQuery plugin */

#scrollUpLeft {
    bottom: 50px;
    left: 260px;
    height: 38px;
    width: 38px;
    background: url('//perso.crans.org/besson/_images/.top.svg');
    background: url('../_images/.top.svg');
}

@media screen and (max-width: 875px) {
    #scrollUpLeft {
        right: 50px;
        left: auto;
    }
}


/* Responsive font-size.

   These used to scale the body up to 115%, which suited the old theme's
   smaller base. They never actually took effect -- the stylesheet was being
   requested from the wrong path -- so once that was fixed they stacked on top
   of a theme that is already comfortable to read, and the whole site came out
   oversized. Leave the base alone and only lift it on narrow screens. */

@media (max-width: 875px) {
    body {
        font-size: 102%;
    }
}


/* Social Icons in the sidebar (available: twitter, facebook, linkedin, google+, bitbucket, github) */

.social-icons {
    display: inline-block;
    margin: 0;
    text-align: center;
}

.social-icons a {
    background: none no-repeat scroll center top #444444;
    border: 1px solid #F6F6F6;
    border-radius: 50% 50% 50% 50%;
    display: inline-block;
    height: 35px;
    width: 35px;
    margin: 0;
    text-indent: -9000px;
    transition: all 0.2s ease 0s;
    text-align: center;
    border-bottom: none;
}

.social-icons li {
    display: inline-block;
    list-style-type: none;
    border-bottom: none;
}
.social-icons li a {
    border-bottom: none;
}

.social-icons a:hover {
    background-color: #666666;
    transition: all 0.2s ease 0s;
    text-decoration: none;
}

.social-icons a.facebook {
    background-image: url('../_images/.facebook.png');
    background-image: url('//perso.crans.org/besson/_images/.facebook.png');
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 35px 35px;
}

.social-icons a.bitbucket {
    background-image: url('../_images/.bitbucket.png');
    background-image: url('//perso.crans.org/besson/_images/.bitbucket.png');
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 35px 35px;
}

.social-icons li a.github {
    background-image: url('../_images/.github.png');
    background-image: url('//perso.crans.org/besson/_images/.github.png');
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 35px 35px;
}

.social-icons li a.wikipedia {
    background-image: url('../_images/.wikipedia.png');
    background-image: url('//perso.crans.org/besson/_images/.wikipedia.png');
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 35px 35px;
}

/* Narrow the left hand column: the nav entries are short, so the default
   quarter of the viewport leaves a lot of empty space beside them. */
.bd-sidebar-primary {
    width: 17%;
    max-width: 260px;
}

/* Pages with no child pages still render the "Section Navigation" heading
   above an empty list; hide the whole block when there is nothing in it. */
.bd-sidebar-primary nav.bd-links:has(> .bd-toc-item:empty) {
    display: none;
}

/* The gallery download links are block containers, so they stack; put them
   side by side instead. */
.sphx-glr-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.sphx-glr-footer .sphx-glr-download {
    /* share the row evenly: at their natural width the two labels are wider
       than the content column and would wrap onto separate lines */
    margin: 0;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
}
.sphx-glr-footer .sphx-glr-download p {
    margin: 0;
}
.sphx-glr-footer .sphx-glr-download code,
.sphx-glr-footer .sphx-glr-download code span {
    white-space: normal;
    word-break: break-word;
}

/* The logo sits in an over-wide box, which pushed the navigation towards the
   middle of the header; let it shrink to the logo and start the links there. */
.bd-header .navbar-header-items {
    justify-content: flex-start;
}
.bd-header .navbar-header-items__start {
    width: auto;
    flex: 0 0 auto;
    margin-right: 4rem;
}
.bd-header .navbar-header-items__center {
    flex: 1 1 auto;
    justify-content: flex-start;
}

/* The page contents in the left column were noticeably smaller than the body
   text. The links carry their own rule, so they need naming separately -- a
   size on the container alone leaves them untouched. */
.bd-sidebar-primary .onthispage,
.bd-sidebar-primary .bd-links__title {
    font-size: 1.05rem;
}
.bd-sidebar-primary nav a,
.bd-sidebar-primary nav.page-toc a,
.bd-sidebar-primary .toc-entry a {
    /* the theme sets these from a more specific rule, so it has to be forced */
    font-size: 1rem !important;
}

/* Space the header links out, so the row reaches closer to the search box
   instead of bunching up on the left. */
.bd-header .navbar-header-items__center .navbar-nav > li,
.bd-header .navbar-nav li.nav-item {
    margin-right: 1.1rem;
}

/* Pull the search box and the icon links in from the right edge, so they sit
   inside the header rather than hard against it. */
.bd-header .navbar-header-items__end {
    margin-right: 5rem;
}

/* Bring the whole left block -- logo, page contents and the divider -- in
   from the window edge, rather than sitting hard against it. */
.bd-header .navbar-header-items__start {
    margin-left: 7rem;
}
.bd-sidebar-primary {
    margin-left: 7rem;
    padding-left: 1rem;
}

/* The content column is centred inside the space left over by the sidebar,
   which pushes it away from the divider and leaves a gap on both sides.
   Start it against the sidebar instead, and take the outsized page title
   down with it. */
.bd-main .bd-content {
    justify-content: flex-start;
}
.bd-article-container .bd-article {
    padding-left: 0.5rem;
}
.bd-article h1 {
    font-size: 2rem;
}