Forum

/*---------------------------------------------------------
 * Theme    : BaseV4.1
 * Par      : PHPBoost.com
 * Porté par: EDN | Swan
 * Date     : 13/10/2017
 * Site web :  http://easy-design.net/
 * Commentaire ou autre de l'auteur 
 # Merci de ne pas toucher au entête des fichiers CSS.
/*--------------------------------------------------------
 * Théme compatible avec deux / ou une seule colonne de menus.
 *----------------------------------------------------------*/
 
/*--------------------------------------
        design.css
Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix
--------------------------------------*/
 
 
/* -- Elements HTML generiques specifique au theme -- */
/* -------------------------------------------------- */
html {
    font-size: 100%;
    font-size: 10px;
}
 
body {
    background: #E8EDF3 url(images/global.png) repeat-x scroll 0 0;
    position: relative;
    height: auto;
    min-height: 100%;
    font-size: 1.3em;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
    color: #555555;
}
 
@media (max-width: 768px) {
    body {
        font-size: 1.4em;
    }
}
 
/* -- Gestion de la taille du site -- */
/* ---------------------------------- */
 
#header,
#global {
    width: 100%;
    max-width: 1024px;
}
 
@media (min-width: 768px) {
    #header,
    #global {
        max-width: 1024px;
    }
}
#footer {
    width: 100%;
}
/* -- En-tete de page - Header -- */
/* ------------------------------ */
#header {
    background: url('images/header.png') no-repeat;
    margin: auto;
    background-size: contain;
}
 
/* --- Partie superieure du header --- */
#top-header {
    position: relative;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    margin-top: 4px;
    min-height: 135px;
}
 
#top-header-content {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
 
@media (max-width: 768px) {
    #top-header {
        position: relative;
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
    }
 
    #top-header-content {
        align-self: flex-end;
        -ms-align-self: flex-end;
        -webkit-align-self: flex-end;
    }
}
 
/* --- Partie inferieur du header --- */
#sub-header {
    min-height: 35px;
}
 
#sub-header-content{
    margin: auto;
}
 
#sub-header, #sub-header a { 
    color: #FFFFFF;
}
 
/* --- Logo et Nom du site web --- */
#site-infos {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    margin: 0.5em 0 0 0.5em;
    max-width: 940px;
    flex: 1 1 auto;
}
 
#site-name-container {
    margin: 5em 0 0 6em;
}
 
#site-name {
    color: #F9FCFF;
    font-size: 2em;
    font-weight: bold;
    line-height: 1em;
    text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
    letter-spacing: 0.02em;
    text-decoration: none;
}
 
#site-slogan {
    display: block;
    color: #FFFFFF;
    font-size: 1em;
    padding: 0.1em 0 0 0.1em;
    letter-spacing: 0.1em;
}
 
@media (min-width: 769px) {
 
    #site-name-container {
        margin: 1em 0 0 0;
    }
 
    #site-name {
        font-size: 3em;
        font-family: "Trebuchet MS";
    }
 
}
 
/* -- Conteneur global du site -- */
/* ------------------------------ */
#global {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    margin: 0 auto 0 auto;
    padding: 15px 0 0 0;
}
 
#main {
    padding: 0 0 10px 0;
    max-width: 100%;
    order : 1;
    -ms-flex-order: 1;
    -webkit-flex-order: 1;
}
 
#menu-left,
#menu-right {
    width: 100%;
}
 
#menu-left  {
    order : 2;
    -ms-flex-order: 2;
    -webkit-flex-order: 2;
}
#menu-right {
    order : 3;
    -ms-flex-order: 3;
    -webkit-flex-order: 3;
}
 
@media (min-width: 769px) {    
    #global {
        min-height: 100vh;
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
    }
 
    #main {
        padding: 0 10px;
        order : 2;
        -ms-flex-order: 2;
        -webkit-flex-order: 2;
        flex: 1 0 auto;
        -ms-flex: 1 0 100%;
    }
 
    #menu-left,
    #menu-right {
        width: 200px;
    }
 
    #menu-left  { 
        order : 1;
        -ms-flex-order: 1;
        -webkit-flex-order: 1;
    }
    #menu-right { 
        order : 3;
        -ms-flex-order: 3;
        -webkit-flex-order: 3;
    }
 
    #main.main-with-left,
    #main.main-with-right {
        width: calc(100% - 200px);
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }
 
    #main.main-with-left.main-with-right {
        width: calc(100% - 400px);
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }
}
 
#top-footer {
    padding: 0.5em 0;
}
 
 
/* -- Contenu de la page -- */
/* ------------------------ */
 
/* --- Contenu central --- */
#main-content {
    background: #ffffff;
    border: 1px #bebebe solid;
    padding: 1.5em 0.8em;
    padding-top: 20px;
    border-spacing: 1px;
 
 
}
 
.block-container {
    margin-top: 15px;
}
 
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
#top-content {
    margin: 0 0 2% 0;
    padding: 0.1em 0.8em;
}
 
/* --- Emplacement au dessus du pied de page --- */
#bottom-content {
    margin: 2% 0 0 0;
    padding: 0.1em 0.8em;
}
 
 
/* -- Pied de page - Footer -- */
/* --------------------------- */
#footer {
    border-top: #336397 2px solid;
    background: #212121;
    min-height: 40px;
    clear: both;
    margin: auto;
    padding:10px 20px 0px 0px;
    text-align: center;
}
 
.footer-content {
    margin: 0 auto 0 auto;
    padding: 1.5em 0;
}
 
.footer-content nav > ul > li.has-sub {
    width: 25%;
}
 
.footer-infos {
    margin: auto 15px auto auto;
}
 
.footer-infos span     { color: #ffffff; }
 
.footer-infos span {
    font-size: 0.8em;
}
 
@media (max-width: 768px) {
    .footer-infos span {
        display: block
    }
 
    .footer-infos span.footer-infos-separator {
        display: none;
    }
 
    .footer-infos {
        padding: 10px;
    }
}
 
 
/* -- Elements specifiques PHPboost -- */
/* ----------------------------------- */
 
/* --- Compteur de visites --- */
#visit-counter {
    position: absolute;
    right: 0;
    bottom : 1em;
    margin-right: 10px;
    font-size: 0.9em;
    text-align: right;
    color:#efefef;
}
 
/* --- Barre de lien rapide --- */
#breadcrumb {
    margin: 0 0 20px 10px;
    text-indent: 10px;
}
 
#breadcrumb ol {
    margin: 0;
    list-style: none;
}
 
#breadcrumb li {
    display: inline;
}
 
#breadcrumb li:not(.current):after { content: "/"; }
 
/* --- Scroll to Top --- */
/* --------------------- */
.scroll-to {    
    background-color: #212121;
    position: fixed;
    z-index: 10;
    display: none;
    border-radius:5px;
}
 
#scroll-to-top {
    right: 25px;
    bottom: 0;
    padding: 2px 11px 3px 10px;
    transition: 0.2s;
}
 
.scroll-to i {
    color: rgba(255, 255, 255, 0.8);
    transition: 0.2s;
}
 
.scroll-to:hover i {
    color: rgba(255, 255, 255, 1);
    transition: 0.3s;
}
 
@media (min-width: 769px) {
    #scroll-to-top {
        bottom: 100px;
        padding: 5px 5px 5px 5px;
 
    }
 
    .scroll-to i {
        font-size: 2em;
    }
}
 
@media (max-width: 768px) {
    #scroll-to-top:hover {
        padding: 9px 11px 11px 10px;
        transition: 0.3s;
    }
}
 
/* --   Cookie Bar  -- */ 
/* ------------------- */
.cookiebar-container {
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    padding: 7px 20px;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E2E2E2;
    font-size: 0.9em;
    text-align: center;
}
 
.cookiebar-container.fixed {
    position: fixed;
}
 
.cookiebar-content {
    text-align: justify;
}
 
@media (min-width: 769px) {
    .cookiebar-content {
        display: inline-block;
        max-width: calc(100% - 250px);
        vertical-align: middle;
    }
 
    .cookiebar-actions {
        display: inline-block;
        width: 250px;
    }
}
 
@media (max-width: 768px) {
    .cookiebar-content {
        margin-bottom: 5px;
    }
 
    .cookiebar-actions {
        margin: 15px 0 5px 0;
    }
}
 
.cookiebar-button {
    margin: 0 5px 0 5px;
    border-radius: 4px;
    color: #FEFEFE;
}
 
@media (max-width: 768px) {
    .cookiebar-button {
        margin: 0 10px 0 10px;
    }
}
 
.cookiebar-button-understand         { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover     { background-color: #2E6DA4; }
 
.cookiebar-button-allowed             { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover     { background-color: #4CAE4C; }
 
.cookiebar-button-declined             { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover     { background-color: #CE271A; }
 
@media (max-width: 468px) {
    .cookiebar-more {
        display: block;
        margin: 10px 0 5px 0;
    }
}
 
.aboutcookie-title {
    font-size: 1.3em;
    line-height: 1.3em;
    font-weight: bold
}
 
.aboutcookie-title + p {
    margin: 0px 0 20px 0px;
}
 
#cookiebar-change-choice {
    margin-top: 10px;
    text-align: center;
}
 
.cookiebar-change-choice-link {
    text-align: center;
}

@media (min-width: 769px) {
#footer .footer-content nav > ul > li.has-sub {
    width: 25%;
}
}

@media (min-width: 769px) {
#top-footer nav.cssmenu-static > ul > li.has-sub {
    width: 25%;
}
}