/*-----------------
Valeurs reference

h_entete = h_article: 92
t_fontenav : 13
t_hauteurmenu : 30
t_largeurmenu : 160
t_fontemenu : 14
l_navigation : 160
h_barre_menu : 50

l_lang : 1186 (apres resize)
l_user : 1186 (apres resize)

strmap=var(h_article) 92 var(h_entete) 92 var(h_navigation) 115 var(l_navigation) 160 var(l_article) 849 var(l_gif) 944 var(t_fontenav) 13 var(t_navhauteurligne) 14 var(t_fontemenu) 14 var(t_hauteurmenu) 30 var(t_largeurmenu) 160 var(l_lang) 824 var(l_user) 764 var(t_fontephoto) 12 var(t_fontephotoindex) 11 var(haut_article) 524 var(h_barre_menu) 50 

------------------*/
:root {
    --col1: #242424;
    --col2: #343434;
    --col3: #444444;
    --col4: #545454;
    --col5: #646464;
    --col6: #747474;
    --col7: #848484;
    --fg: white;
    --titles: yellow;
    
    /*
    --fontaccueilsite: Chilanka;
    --fontnomsite: Dyuthi;
    */
    
    --fontaccueilsite: cheloniachilanka;
    --fontnomsite: cheloniadyuthi;
   
    
    --h_entete: 92px;
    --h_article: 92px;
    --h_navigation: 115px;
    --t_navhauteurligne: 14px;
    --t_fontenav: 13px;
    --t_hauteurmenu: 30px;
    --t_largeurmenu: 160px;
    --t_fontemenu: 14px;
    --l_navigation: 160px;
    --h_barre_menu: 50px;
    --t_fontephoto: 12px;
    --h_barre_menu: 50px;

    /*
    --l_lang: 1186px;
    --l_user: 1186px;
   */
    --l_lang: 824px;
    --l_user: 764px;
    --l_recherche: 700px;
}

@font-face {
    font-family: cheloniadyuthi;
    src: url('/htfiles/Dyuthi-Regular.ttf');
}
@font-face {
    font-family: cheloniachilanka;
    src: url('/htfiles/Chilanka-Regular.otf');
}

/* Fond */
body 
{
    background-color: var(--col4);
    margin-top: 0px;
}
div.menuis {
    background-color: var(--fg);
    width: 14px;
    height: 1px;
    margin: 3px 0px;
}
div.menuim {
    background-color: var(--fg);
    width: 18px;
    height: 2px;
    margin: 4px 0px;
}
div.menuil {
    background-color: var(--fg);
    width: 22px;
    height: 3px;
    margin: 6px 0px;
}
#article div.menuim {
    background-color: var(--titles);
}
button.navserie {
    margin: 0px 0px 0px 10px;
    padding: 0px;
    border: 0px;
    background-color: var(--col3);
}
p.msgok, p.msgnok {
    font-family: Helvetica;
    font-size:20px;
    margin: 50px;
    text-align: center;
}
p.msgnok {
    color: var(--fg);
}
p.msgok {
    color: var(--titles);
}
/* select general (utile ?) */
select {
    /*width: 100%;*/
    padding: 0px 0px;
    border: 1px solid var(--fg);
    color: var(--fg);
    border-radius: 4px;
    background-color: transparent;
    font-family: Arial;
    font-size: 14px;
}
option:focus {
    outline: none;
}
select:focus {
    outline: none;
}
*:focus {
    outline: 0;
}
*:active {
    outline: 0;
}
select::before {
    content: "\25BC";
    color: var(--fg);
    outline: none;  
}
/* input general (utile ?) */
input,textarea,#divlogin button,#inputspasswd button {
    /*width: 100%;*/
    padding: 0px 0px;
    border: 1px solid var(--fg);
    color: var(--fg);
    border-radius: 4px;
    background-color: transparent;
}
textarea {
    scrollbar-color: var(--fg) var(--col2);
    scrollbar-width: thin;
}
input:focus {
    outline: none;
}
/* Entetes fixe et mobile */
#entete_b p {
    color: var(--fg);
    margin-bottom:0px;
}
#entete_t p {
    font-family: var(--fontaccueilsite);
    font-size:20px;
    font-weight:bold;
    margin: 12px;
    color: var(--titles);
}
#entete p.lienhomefixe {
    color: var(--titles);
    font-family: var(--fontnomsite);
    font-size: 22px;
    padding-top: 7px;
    margin-left: 5px;
    display: inline;
    vertical-align: bottom;
}
#entete_t img.lienhomefixe {
    /*margin: 5px 8px 3px;*/
    margin-left: 5px;
    margin-top: 5px;
    max-height: 26px;
    max-width: 250px;
}
#entete_t img.lienhomemobile {
    width: 44px;
    height: 44px;
}
#entete_b p {
    margin-top:0px;
    padding: 5px;
    font-family: Arial;
    font-size:var(--t_fontenav);
    font-weight:normal;
}
#entete, #entetemobile
{
    position: fixed;
    top:0px;
    left:0px;
    display: block;
    background-color: var(--col4);
    width:100%;
    padding:0px;
    height:var(--h_entete);
}
#entetemobile {
    display: none;
    color: var(--fg);
    padding-top: 5px;
    font-family: Arial;
    font-size: 20px;
}
#entetemobile form,#entetemobile select {
    display: inline-block;
}
#entete a,#entetemobile a {
    /*color:var(--titles);*/
    color: var(--fg);
    text-decoration:none;
}
#entetemobile form {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
}
#entetemobile form::before {
    content: "\25BC";
}
#entetemobile select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-size: 24px;
    font-style: italic;
    /*width: 200px;*/
    /*overflow: hidden;*/
}
#entetemobile select.bold {
    font-weight: bold;
    font-size: 24px;
    font-style: normal;
}
#entetemobile p.plarge {
    font-size: 18px;
}
/* Selection langues */
#divlangues
{
    position:fixed;
    top:40px;
    left:var(--l_lang);
}
#divlanguesmobile
{
    position:fixed;
    display: none;
    top:10px;
    left:var(--l_lang);
}
/* Ident user */
#user
{
    position:fixed;
    top:10px;
    left:var(--l_user);
    /*z-index:+1*/
}
#user p {
    color: var(--fg);
    font-family: Comic sans MS;
    font-size: 14px;
    margin: 0px;
    display: inline-block;
}
#user img {
    display: inline-block;
}
#recherche {
    position: fixed;
    top: 10px;
    left: var(--l_recherche);
}
#divlogin,#divupload,#divmail {
    display: block;
    margin: 50px auto;
    padding: 20px;
    width: 600px;
    border: 3px solid var(--fg);
    text-align: center;
}
#divlogin p {
    color: var(--fg);
    font-family: Helvetica;
    font-size: 20px;
}
#divlogin p,#divupload p.small {
    font-size: 16px;
}
#divlogin table,#divlogin form {
    width: 100%;
}
#divlogin td {
    text-align: left;
}
/* Logo */
#logo
{
    position:fixed;
    text-align: center;
    color:gray;
    font-family: Comic sans MS;
    line-height: 0px;
    font-style: italic;
    top: 0px;
    left: 5000px;
}
/* classe de l'image logo */
.logo {
}
#textelogo {
    line-height: 0%;
    color: var(--col5);
    margin: 0px;
    padding: 0px;
}
#textelogo a {
    color: gray;
    text-decoration: underline;
    outline: none;
}
/* index pages */
#idxpg {
    display: inline-block;
    margin-top: 5px;
}
#idxpg p {
    font-weight: bold;
    margin-bottom: 0px;
    padding: 0px 5px;
}
#tsimg p {
    margin-top: 0px;
    padding: 0px 5px;
}
/* span boutons defilement auto */
#spanauto {
    display: inline-block;
    margin-top: 5px;
}
/* Span navigation auto (mobile uniquement) */
#spanautomobile {
    position: fixed;
    display: none;
    top: 10px;
    left: 5000px;
}
/* Icones dans le span auto (mobile + fixe) */
.actionicons {
    width: 32px;
    cursor: pointer;
    vertical-align: bottom;
}
/* Menu superieur */
#barre-menu
{
    position:fixed;
    display: block;
    top: var(--h_barre_menu);
    left: 0px;
    margin-left: var(--l_navigation);
    background-color: var(--col4);
    padding:0px;
}
#barre-menu ul 
{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
#barre-menu li
{
    float:left;
    margin:0px;
}
#barre-menu a:hover
{
    color: var(--titles);
}
#barre-menu button {
    background-color: var(--col4);
    color: var(--fg);
    margin: 0px 5px 0px 5px;
}
.selectm 
{
    display: inline-block;
    height: var(--t_hauteurmenu);
    width: var(--t_largeurmenu);
    font-family:Arial;
    font-size:var(--t_fontemenu);
    text-decoration:none;
    outline: none;
    color: var(--fg);
    background-color: var(--col3);
    text-align:center;
    border-style:solid;
    border-width:1px;
    border-color: var(--fg);
    font-weight:bold;
    /*padding: 0px;*/
    padding: 2px 2px 2px;
    vertical-align: middle;
}
.a_nselectm
{
    text-decoration:none;
    color:var(--fg);
    vertical-align: -2px;
}
.nselectm
{
    display: inline-block;
    height: var(--t_hauteurmenu);
    width: var(--t_largeurmenu);
    font-family:Arial;
    font-size:var(--t_fontemenu);
    text-decoration:none;
    outline: none;
    color: var(--fg);
    background-color: var(--col5);
    text-align:center;
    border-style:solid;
    border-width:1px;
    padding: 0px;
    border-color: var(--col4);
    font-weight:normal;
    padding: 4px 2px 2px;
    vertical-align: middle;
}
/* Navigation gauche, edition */
#barre-navigation, #edition 
{
    position: fixed;
    top: var(--h_navigation);
    left: 0px;
    float:left; 
    width:var(--l_navigation);
    background-color: var(--col4);
}
#barre-navigation a:hover
{
    color:var(--titles);
}
#barre-navigation ul 
{
    list-style-type:none;
    line-height: var(--t_navhauteurligne);
    /*padding: 0px;*/
    margin-top: 0px;
}
#barre-navigation button {
    background-color: var(--col4);
    color: var(--fg);
    margin: 5px 0px 5px 0px;
}
.nselectn
{
    font-family:Arial;
    font-size:var(--t_fontenav);
    font-weight:normal;
    text-decoration:none;
    color:var(--fg);
    margin-left:-6px;
}
.selectn
{
    font-family:Arial;
    font-size:var(--t_fontenav);
    font-weight:normal;
    text-decoration:none;
    margin-left:-20px;
    color:var(--fg);
}
/* Article : general */
#borderarticle
{
    position: fixed;
    top: var(--h_article);
    /*
    margin-left: var(--l_navigation)px;
   */
    left: var(--l_navigation);
    background-color: transparent;
    border-style: solid;
    border-color: var(--col6);
    border-width: 2px 0px 0px 0px;
}    
#article
{
    position: absolute;
    /*
      A utiliser si position absolute est supprimee
      top: 0px;
      margin-top: var(--h_article)px;
      margin-left: var(--l_navigation)px;
    */
    top: var(--h_article);
    left: var(--l_navigation);
    margin: 0px;
    padding: 0px;
    z-index: -1;
    background-color: var(--col4);
    border-style: solid;
    border-color: var(--col6);
    border-width: 2px 2px 2px;
    /* permet d'eviter un flash au chargement (empirique) */
    /*margin-right: 14px;*/
}
/* Article : contenu images, textes.... */
#article img.in {
    vertical-align: baseline;
    border: 1px solid var(--fg);
}
#article img
{
    padding : 0px;
    border-style: solid;
    border-color: var(--fg);
    border-width: 1px;
}
#article img.pageimg {
    max-width: 10%;
    max-height: 10%;
    cursor: pointer;
    position: relative;
    /*display: flex;
    margin: auto;*/
}
#article img.imgselect {
    border-color: var(--titles);
}
#article a
{
    padding: 0px;
    font-family:Arial;
    text-decoration:none;
    color: var(--fg);
}
#article p
{
    color: var(--fg);
    font-family: Arial;
    font-size: 14px;
    padding: 2px 10px;
}
#article ul {
    font-family: Arial;
    color: var(--fg);
}
#article p.legimg {
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
#nomsfichiers {
    margin-left: 5px !important;
}
#article p.descrimg {
    color: var(--titles);
    font-style: oblique;
    padding: 0px;
    margin: 0px;
}
#article p.titreimg {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}
#article.classtxt p {
    font-size: 16px;
}
#article.classtxt p.descrimg, #article.classtxt p.titreimg, #article.classtxt p.legimg {
    font-size: 13px;
}
#article.classtxt p.legimg {
    line-height: 10;
}
#article.classtxt titre1 {
    font-size:20px;
}
#article.classtxt titre2 {
    font-size:22px;
}
#article.classtxt titre3 {
    font-size:24px;
}
/* commentaires */
#comment {
    position: absolute;
    top: 5px;
    right: 5px;
}
#comment img {
    border: 0px;
    width: 30px;
}
#divcomments td {
    font-size: 14px;
    font-family: Arial;
    color: var(--fg);
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--col3);
}
#divcomments table {
    /*border: 1px solid var(--fg);*/
}
#divcomments th {
    background-color: var(--col2);
    font-style: italic;
    font-size: 14px;
    font-family: Arial;
    color: var(--fg);
    padding-left: 5px;
    padding-right: 5px;
}
#divcomments button {
    vertical-align: super;
    margin-left: 5px;
}
#divcomments textarea {
    width: 50%;
}
/* tentative pour mode inline - pas au point */
#divlegendeimg {
    text-align: center;
}
#article div.legimg {
    display: inline-block;
    float: right;
}
#article div.indeximg {
    display: inline-block;
    float: left;
}
/* Article : tables photo */
.tablephoto {
    width: 100%;
    border: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-family:Arial;
    font-size:var(--t_fontephoto);
    color: var(--fg);
    table-layout: fixed;
}
.tablephoto td {
    vertical-align: middle;
}
.tablephoto td.tdtop {
    vertical-align: top;
}
.tablephototxt {
    width: 100%;
    border: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-family:Arial;
    font-size:var(--t_fontephoto);
    border-collapse: collapse;
    /*color:#335530;*/
    color: var(--fg);
    /*table-layout: fixed;*/
}
.tablephototxt td {
    vertical-align: middle;
    border: 0px;
}
/* Article : table index, images index */
.tableindex {
    width: 100%;
    border: 0px;
    padding-top: 5px;
    text-align: center;
    font-family:Arial;
    font-size:var(--t_fontephotoindex);
    /*color:#335530;*/
    color: var(--fg);
}
.tableindex td {
    padding: 0px;
    /*border: 0px;*/
}
div.divimg,div.divseriesmall,div.divserielarge,div.divrubsmall,div.divrublarge {
    display:inline-block;
    text-align: center;
    font-family:Arial;
    /*font-size:var(--t_fontephotoindex)px;*/
    /*color:#335530;*/
    color: var(--fg);
    padding: 5px 8px 5px 8px;
}
div.divimg {
    vertical-align: middle;
}
div.imgselect {
    background-color: var(--col2);
}
div.divseriesmall,div.divserielarge,div.divrubsmall,div.divrublarge {
    /*margin-left: 15px;*/
    /*margin-right: 15px;*/
    vertical-align: top;
    margin-top: 5px;
}
div.divseriesmall,div.divrubsmall {
    width: 350px;
}
div.divserielarge,div.divrublarge {
    width: 415px;
}
img.divimg {
    display:block;
    vertical-align: middle;
}
#article p.legindeximg {
    padding: 1px;
    margin: 0px;
    font-size: 13px;
}
.tdtitre {
    text-align: center;
    font-family:Arial;
    font-size:15px;
    font-weight : bold;
    color:#335530;
    background-color:#F8F6CC;
}
#boutonalbum {
    background-color: var(--col3);
    color: var(--fg);
    font-size: 16px;
    margin: 5px 10px;
    padding: 20px 20px;
    vertical-align: top;
}
#article.articlesite ul, #article.articlesite p {
    color: var(--fg);
    font-family: Arial;
    font-size: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
}
#article.articlesite a.smalltxt, span.smalltxt {
    color: var(--fg);
    font-style: italic;
}
#article.articlesite p.titreseriesmall, #article.articlesite p.titreserielarge, #article.articlesite p.titrerubsmall, #article.articlesite p.titrerublarge {
    color: var(--fg);
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 2px;
    display: inline-block;
}
#article.articlesite p.titreseriesmall, #article.articlesite p.titrerubsmall {
    font-size: 18px;
}
#article.articlesite p.titreserielarge, #article.articlesite p.titrerublarge {
    font-size: 20px;
}
#article.articlesite p.dateseriesmall, #article.articlesite p.dateserielarge, #article.articlesite p.daterubsmall, #article.articlesite p.daterublarge {
    color: var(--fg);
    font-size: 14px;
    font-style: italic;
    margin: 0px;
    display: inline-block;
}
#article.articlesite p.presseriesmall, #article.articlesite p.presserielarge, #article.articlesite p.presrubsmall, #article.articlesite p.presrublarge {
    color: var(--fg);
    font-size: 16px;
    margin: 0px;
    display: inline-block;
}
#article.articlesite p.lientxt,a.lientxt {
    color: var(--titles);
    font-size: 12px;
    margin: 0px;
    display: inline;
}
#article.articlesite p.presseries {
    color: var(--fg);
    font-size: 30px;
    margin: 0px;
    display: inline-block;
}
#article.articlesite p.titrerubsmall, #article.articlesite p.titrerublarge {
    font-style: italic;
}
#article.articlesite p.titrelongseriesmall, #article.articlesite p.titrelongserielarge, #article.articlesite p.titrelongrubsmall, #article.articlesite p.titrelongrublarge {
    color: var(--fg);
    font-size: 12px;
    font-style: italic;
    visibility: hidden;
    display: block;
    margin: 0px;
}
#article.articlesite td.date {
    font-size: 12px;
    color: var(--fg);
    padding-right: 15px;
}
#article.articlesite img.vignserie {
    margin: 0px;
}
#article.articlesite img.seriesmall, #article.articlesite img.rubsmall {
    max-width: 325px;
    max-height: 216px;
}
#article.articlesite img.serielarge, #article.articlesite img.rublarge {
    /*width: 500px;
    height: 334px;*/
    max-width: 400px;
    max-height: 275px;
}
#article.articlesite img.seriesmall {
    border: 2px solid var(--fg);
}
#article.articlesite img.serieslarge {
    border: 4px solid var(--fg);
}
#article.articlesite span.spanseriesmall, #article.articlesite span.spanserieslarge, #article.articlesite span.spanrubsmall, #article.articlesite span.spanrublarge {
    display: inline-block;
    margin-top: 5px;
}
#article.articlesite span.spanseriesmall, #article.articlesite span.spanrubsmall {
    width: 330px;
    height: 221px;
}
#article.articlesite span.spanserielarge, #article.articlesite span.spanrublarge {
    width: 405px;
    height: 280px;
    /*width: 505px;
    height: 340px;*/
}
#article.articlesite span.cellweb:hover + p.cellweb, #article.articlesite span.cellweb:hover + p.cellweb {
    visibility: visible;
}
#article.articlesite table.h_tableseriesweb {
    width: 100%;
}
#article.articlesite td.h_tableseriesweb {
    text-align: center;
    vertical-align: top;
}
#article.articlesite td.tableserieswebg {
    text-align: left;
}
#article.articlesite td.tableserieswebd {
    text-align: right;
}
#article.articlesite td.smalltxt {
    /*text-align: right;*/
    color: var(--fg);
    font-size:14px;
    padding-left: 40px;
}
#article.articlesite .plarge {
    font-size:18px;
    color: var(--titles);
}
#article.articlesite .pwarning {
    display: inline-block;
    width: 90%;
    font-size:18px;
    font-style: italic;
    color: var(--titles);
    text-align: center;
}
#article.articlesite .psmall {
    font-size:12px;
}
#article.articlesite .ptitre {
    font-family:Comic sans MS;
    font-size:28px;
    font-weight:bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--titles);
}
#article.articlesite .ptitrerub {
    font-family:Comic sans MS;
    font-size:18px;
    font-weight:bold;
    font-style: italic;
    color: var(--titles);
    margin-left: 10px;
    margin-bottom: 10px;
}
#article.articlesite img {
    border: 0px;
}
#article .rubriquesite {
    clear: both;
    background-color: var(--col3);
    margin: 10px 50px;
    padding: 3px 10px 10px;
}
#divaccueilsite {
    text-align: center;
    padding-top: 8px;
}
/* inutilise
#divrefchelonia {
    position: fixed;
    top: px;
    left: 4px;
}
#entete p.refchelonia {
    color: var(--col6);
    font-size: 14px;
    margin: 0px;
    padding: 0px 5px 0px;
    display: inline;
}
*/
/* texte accueil site (h/g/d/b) */
#article.articlesite p.t3 {
    font-size: 26px;
}
#article.articlesite p.t2 {
    font-size: 22px;
}
#article.articlesite p.t1 {
    font-size: 18px;
}
/* logosite */
#article.articlesite img.t3 {
    max-width: 800px;
    max-height: 175px;
}
#article.articlesite img.t2 {
    max-width: 650px;
    max-height: 150px;
}
#article.articlesite img.t1 {
    max-width: 500px;
    max-height: 150px;
}
/* nom site (=titre site) */
#article.articlesite p.nst3 {
    font-size: 98px;
}
#article.articlesite p.nst2 {
    font-size: 80px;
}
#article.articlesite p.nst1 {
    font-size: 50px;
}
/* presentation site */
#article.articlesite p.t3p {
    font-size: 20px;
}
#article.articlesite p.t2p {
    font-size: 16px;
}
#article.articlesite p.t1p {
    font-size: 14px;
}
#article.articlesite p.accueilsite {
    color: var(--titles);
    font-family: var(--fontaccueilsite);
    text-align: center;
    margin: 0px;
    padding: 10px;
}
#article.articlesite p.pressite {
    color: var(--titles);
    /*font-style: italic;*/
    font-family: var(--fontaccueilsite);
    text-align: center;
}
#article.articlesite p.nomsitechelonia {
    display: inline-block;
    color: var(--titles);
    font-weight: bold;
    font-family: var(--fontnomsite);
    margin-top: 10px;
    margin-left: 5px;
    padding: 0px;
    vertical-align: bottom;
}
#entete p.nomuser {
    display: inline-block;
    font-weight: normal;
    font-family: var(--fontnomsite);
    margin: 6px 0px 0px;
    padding: 0px;
    vertical-align: top;
}
#article.articlesite p.nomuser {
    display: inline-block;
    /*font-weight: bold;*/
    font-family: var(--fontnomsite);
    margin-top: 5px;
    padding: 0px;
    vertical-align: middle;
}
#article.articlesite table.accueilsite {
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
}
#article.articlesite table.accueilsite td {
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
}
/* table des sites */
#article.articlesite table.tabsite {
    width: 90%;
    border: 2px solid var(--col6);
    margin: auto;
    border-collapse: collapse;
}
#article.articlesite tr.tabsite {
    border: 0px;
}
#article.articlesite td.tabsite {
    vertical-align: middle;
    text-align: center;
    padding: 5px;
}
#article.articlesite img.titretabsite {
    max-width: 300px;
    max-height: 120px;
    vertical-align: top !important;
}
#article.articlesite p.titretabsite {
    font-size: 38px;
    margin-top: 0px;
}
#article.articlesite p.prestabsite {
    font-size: 20px;
}
#article.articlesite div.photouser {
    position: absolute;
    right: 55px;
    margin-top: 5px;
}
#article.articlesite img.photouser {
    max-width: 120px;
    max-height: 120px;
    vertical-align: middle;
    /*float: right;*/
}
#article.articlesite p.legendephotouser {
    /*max-width: 200px;*/
    font-size: 14px;
    /*float: right;*/
}
/* Formes (et selects) utilisees par les pages site */
form.fdroite::after {
    content: "\25BC";
    color: var(--fg);
    outline: none;
}
form.fgauche::before {
    content: "\25BC";
    color: var(--fg);
    outline: none;
}
form.fdroitey::after {
    content: "\25BC";
    color: var(--titles);
    outline: none;
}
form.fgauchey::before {
    content: "\25BC";
    color: var(--titles);
    outline: none;
}
select.fgauche, select.fdroite, select.fgauchey, select.fdroitey {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px;
    background-color: transparent;
    font-style: italic;
}
select.fgauchey, select.fdroitey {
    color: var(--titles);
}
form p {
    display: inline;   
}
form {
    outline: none;
}
/* edition */
#edition {
    display: none;
    /*border: 1px solid var(--fg);*/
}
div.edition button {
    background-color: var(--col3);
    color: var(--fg);
    margin: 7px 0px 7px 0px;
    padding: 1px;
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    /*height: 20px;*/
}
div.edition div.scroll {
    /*width: var(--l_navigation)px;*/
    width: 100%;
    text-align: left;
    overflow-x: scroll;
    scrollbar-color: var(--fg) var(--col2);
    scrollbar-width: thin;
    /*direction: rtl;*/
}
div.edition p.symbolonglet {
    font-size: 18px;
    font-weight: bold;
    color: var(--titles);
    display: inline;
}
div.edition p.titreonglet {
    display: inline;
}
div.edition p.valid, #article.articlesite p.valid, #edition p.valid {
    display: inline;
    font-size: 28px;
    cursor: pointer;
    margin: 4px;
    color: var(--titles);
}
div.edition p.info, #article.articlesite p.info {
    display: block;
    visibility: hidden;
    color: lightgreen !important;
    margin: 0px;
    padding: 0px;
}
div.edition p.error, #article.articlesite p.error {
    visibility: hidden;
    color: red;
    margin: 0px;
    padding: 0px;
}
#confirmation {
    position: fixed;
    display: none;
    top: 200px;
    left: 200px;
    padding: 100px;
    background-color: var(--titles);
    border: 5px solid black;
    z-index: 200;
}
#confirmation p {
    color: blue;
    font-size: 35px;
}
div.edition div.inputs {
    display: none;
    text-align: center;
    margin-top: 5px;
}
#article div.inputs {
    display: none;
    text-align: left;
    margin-top: 15px;
}
#inputspasswd input {
    width: 250px;
}
div.edition select {
    overflow-x: hidden;
}
form.fmenud {
    display: inline-block;
}
/*
form.fmenud p {
    display: inline-block;
}
*/
#listeattrselect, #listeattrimage, #listeseries, #listerubriqueselect {
    direction: rtl;
    text-align: left;
    scrollbar-color: var(--fg) var(--col2);
    scrollbar-width: thin;
    height: 150px;
}
#listeattrselect option, #listeattrimage option, #listeseries option, #listerubriqueselect option {
    direction: ltr;
}
/* Elements gestion series */
#listerubriques {
    width: 300px;
    background-color: var(--col3);
}
#tableseries, #tableseries td, #tableseries th, #tableseries td select, #tableseries td input {
    font-size: 12px !important;
}
#tableseries td {
    max-width: 120px;
    overflow: hidden;
   white-space: nowrap;
}
#tableseries td p {
    padding: 0px;
}
#actionsedition {
    margin-bottom: 10px;
    border: 1px solid var(--titles);
}
div.edition .divdomainedit {
    text-align: left;
    background-color: var(--col3);
    padding: 1px;
    margin-bottom: 10px;
}
#textareaattr {
    width:var(--l_navigation);
    background-color: var(--col3);
    border: 0px;
    direction: rtl;
    text-align: left;
    font-family:Arial;
    font-size:var(--t_fontenav);
    color: var(--titles);
    scrollbar-color: var(--fg) var(--col2);
    scrollbar-width: thin;
    /*wrap: hard;*/
}
/*
#article.articlesite select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px;
    background-color: transparent;
    font-style: italic;
}
*/
/* Specifiques textes (dans l'article texte) */
#img, img.imgtexte, video.videotxt
{
    display: none;
    position: relative;
}
div.video
{
    text-align: center;
}
.tablevideo {
    width: 80%;
    border: 0px;
    padding: 8px;
    text-align: center;
    font-family:Arial;
    font-size:15px;
    color: var(--fg);
    table-layout: fixed;
}
.tablevideo td {
    border-bottom: 1px solid #333333;
}
#article titre1 {
    font-size:14px;
    font-weight: bold;
    color: var(--titles);
}
#article titre2 {
    font-size:16px;
    font-weight: bold;
    color: var(--titles);
}
#article titre3 {
    font-size:18px;
    font-weight: bold;
    color: var(--titles);
}
#article p.centre {
    text-align: center;
}
/* Bas de page */
#bas-de-page
{
    position: absolute;
    left: 10px;
    top: 5000px;
    padding: 0px;
    margin: 0px;
    clear:both;
    font-family:Arial;
    font-size:12px;
    color: var(--titles);
    background-color: var(--col4);
}
#bas-de-page a {
    color: var(--titles);
    text-decoration:none;
    padding: 0px;
    margin: 0px;
}
/* Tables pages d'intro site HTTP */
.tablesite {
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
    border-spacing: 50px 0px;
}
.tablesite td {
    vertical-align: top;
}
.tablesimple {
    width: 100%;
    text-align: left;
    font-family:Arial;
    font-size:12px;
    border-collapse: collapse;
    margin-top: 5px;
}
.tablesimple th {
    text-align: center;
    background-color: #f4e9c6;
    font-family:Arial;
    font-size:14px;
    border: 1px;
    color: #202060;
    border-style: solid;
    border-color: var(--fg);
    padding: 8px 0px;
    margin: 0px;
}
.tablesimple td {
    padding: 4px 2px;
    vertical-align: middle;
    border: 1px;
    color: var(--fg);
    border-style: solid;
    border-color: var(--fg);
    text-align: center;
    margin: 0px;
}
.tablesimple_sel, #article.articlesite td.tablesimple_sel, .tablesimple_sel input, .tablesimple_sel select {
    background-color: var(--col2);
    color: var(--titles);
}
th.tablesimple_clear, td.tablesimple_clear {
    background-color: transparent;
    border: 0px;
}
.tablesimple select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0px;
    border-radius: 0px;
}
.tablesimple input {
    border: 0px;
}
/*
.tablesimple select {
    direction: rtl;
    text-align: left;
}
.tablesimple select option {
    direction: ltr;
}
*/
/* Utilise en generation pages HTML statiques */
#titresite {
    color: var(--fg);
    font-family: Helvetica;
    font-size: 14px;
}
#titresite hr, #article hr {
    vertical-align: middle;
    width: 90%;
    color: var(--titles);
}
#headertitre p, #headertitre h1 {
    text-align: center;
}
#titresite a {
    text-decoration:none;
    color:var(--titles);
    font-weight:normal;
}
#titresite h1, #article h1 {
    color:var(--titles);
    font-family: Comic sans MS;
    font-size:22px;
    font-weight:bold;
}
#titresite h2, #article h2 {
    color:var(--titles);
    font-family: Comic sans MS;
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin-top: 0px;
    margin-bottom: 10px;
}
#titresite h3, #article h3 {
    color:var(--titles);
    font-family: Comic sans MS;
    font-size:16px;
    font-weight:normal;
    text-align:left;
}
/* Menu et navigation */
#navfull {
    position: fixed;
    top: 0px;
    left: 0px;
    color:var(--titles);
    font-family: Arial;
    font-size:11px;
}
/* Image fullscreen (old) */
#navfull img {
    padding: 0px;
}
#navfull a {
    color:var(--titles);
    font-family: Arial;
    font-size:11px;
    text-decoration:none;
}
#imgfull img {
    padding: 0px;
}
#imgfull table {
    border: 0px;
    width: 100%;
    padding: 0px;
    text-align: center;
    margin-left: 0px;
    margin-top: 0px;
}
#imgfull td {
    padding: 0px;
    text-align: center;
}
/* Barres upload */
#progress {
    display: none;
    width: 100%;
    text-align: center;
}
#progressFrame {
    width: 90%;
    margin: auto;
    border: 3px solid var(--fg);
}   
#progressBar {
    width: 0%;
    height: 30px;
    background-color: var(--fg);
    text-align: center;
    line-height: 30px; /* To center it vertically */
    font-family: Helvetica;
    font-size: 20px;
    color: black;
    /*padding: 0px 5px;*/
}
/* Classes et donnees d'edition */
.edit {
    display: none !important;
}
.normal {
    display: inline;
}
.left {
    float: left;
}
/*----------
  menu deroulant
----------*/
ul.mmenud {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}
ul.menud {
    list-style: none;
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 10;
    /*border: 1px solid var(--titles);*/
    margin: 0px;
    padding: 0px;
    top: 0px;
    border: 3px solid var(--col1);
}
li.menud {
    /* on place les liens du menu horizontalement */
    display: block;
    position: relative;
    vertical-align: top;
    padding: 5px;
    width: 150px;
}
ul.menud li.menud {
    background-color: var(--col2);
}
ul li.menud:hover {
    /*display: block;*/
    background-color: var(--col3);
}
li:hover ul.menud {
/* Au survol des li du menu on replace les sous menus */
    left: 90%;
}
li:hover li ul.menud {
/* Au survol des li du menu on replace les sous menus */
    left: -999em;
}
li:hover li:hover ul.menud {
/* Au survol des li du menu on replace les sous menus */
    left: 95%;
    top:0%;
}
/*
p.menud, li.menud p.menud {
    display: inline;
    background-color: var(--col3);
}
*/
/* conflit avec les types articles p et span.tooltiptext */
/* edition p couvre egalement les titres d'onglet */
#edition p, #article p.menud {
    font-family:Arial;
    /*font-size:var(--t_fontenav) !important;*/
    font-size:var(--t_fontenav);
    font-weight: bold;
    color: var(--titles);
    margin-top: 8px;
    margin-bottom: 0px;
    text-align: center;
}
#article span.tooltiptext {
    font-size:var(--t_fontenav);
}
/*----------
   tooltip
----------*/
.tooltip {
  position: relative;
  /*display: inline-block;*/
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: #ffffc0;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ffffc0 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Customisations responsive */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
    #barre-navigation { display: none; }
    #borderarticle { left: 20px; }
    #barre-menu { display: none; }
    #article { left: 20px; }
    #article, #borderarticle { top: 78px; }
    #entetemobile { display: block; height: 78px; }
    #entete { display: none; }
    #article p { font-size: 20px; }
    #article p.plarge { font-size: 20px; }
    #article.articlesite p.plarge { font-size: 20px; }
    #article.articlesite .ptitrerub { font-size: 40px; }
    #article.articlesite p.ptitre { font-size: 30px; }
    #article.articlesite select { font-size: 16px; }
    #article.articlesite p,#article.articlesite a,#article.articlesite td,#article.articlesite ul { font-size: 24px; }
    #article.articlesite td.smalltxt,td.date { display: none; }
    #article.classtxt p { font-size: 22px; }
    #article.classtxt p.descrimg, #article.classtxt p.titreimg, #article.classtxt p.legimg { font-size: 18px; }
    #article.classtxt titre1 { font-size:28px; }
    #article.classtxt titre2 { font-size:30px; }
    #article.classtxt titre3 { font-size:34px; }
    div.divimg { font-size: 18px; }
    .actionicons { width: 44px; margin-right: 20px; }
    .lienhomemobile { width: 44px; height: 44px; }
    select { font-size: 20px; }
    #entetemobile { font-size: 20px; }
    #entetemobile select { font-size: 20px; margin: 15px; }
    #entetemobile select.bold { font-size: 20px; }
    #infocadre { display: none; }
    #user img { width: 32px; }
    .logo { width: 80px; }
    #divlangues { display: none; }
    #divlanguesmobile { display: block; }
    /*
    #indeximg { display: none; }
    #legendeimg { display: none; }
    #titreimg { display: none; }
    */
    .legindeximg { display: none; }
    /*#spanautomobile { display: block; }*/
}
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    #barre-navigation { display: none; }
    #borderarticle { left: 20px; }
    #barre-menu { display: none; }
    #article { left: 20px; }
    #article, #borderarticle { top: 135px; }
    #entetemobile { display: block; height: 135px; }
    #entete { display: none; }
    #article p { font-size: 30px; }
    #article p.plarge { font-size: 40px; }
    #article.articlesite p.plarge { font-size: 40px; }
    #article.articlesite .ptitrerub { font-size: 40px; }
    #article.articlesite p.ptitre { font-size: 50px; }
    #article.articlesite select { font-size: 32px; }
    #article.articlesite p,#article.articlesite a,#article.articlesite td,#article.articlesite ul { font-size: 32px; }
    #article.articlesite td.smalltxt,td.date { display: none; }
    #article.classtxt p { font-size: 44px; }
    #article.classtxt p.descrimg, #article.classtxt p.titreimg, #article.classtxt p.legimg { font-size: 38px; }
    #article.articlesite p.titreseriesmall, #article.articlesite p.titrerubsmall { font-size: 34px; }
    #article.articlesite p.titreserielarge, #article.articlesite p.titrerublarge { font-size: 38px; }
    #article.articlesite p.dateseriesmall, #article.articlesite p.daterubsmall { display: none; }
    #article.articlesite p.dateserielarge, #article.articlesite p.daterublarge { display: none; }
    #article.classtxt titre1 { font-size:50px; }
    #article.classtxt titre2 { font-size:56px; }
    #article.classtxt titre3 { font-size:62px; }
    div.divimg { font-size: 24px; }
    .actionicons { width: 88px; margin-right: 20px; }
    .lienhomemobile { width: 88px; height: 88px; }
    select { font-size: 32px; }
    #entetemobile { font-size: 40px; }
    #entetemobile select { font-size: 30px; margin: 15px; }
    #entetemobile select.bold { font-size: 40px; }
    #infocadre { display: none; }
    #user img { width: 48px; }
    .logo { width: 80px; }
    #divlangues { display: none; }
    #divlanguesmobile { display: block; }
    /*
    #indeximg { display: none; }
    #legendeimg { display: none; }
    */
    .legindeximg { display: none; }
    /*#spanautomobile { display: block; }*/
    #article.articlesite p.t3 { font-size: 44px; }
    #article.articlesite p.t2 { font-size: 36px; }
    #article.articlesite p.t1 { font-size: 34px; }
    #article.articlesite p.t3p { font-size: 36px; }
    #article.articlesite p.t2p { font-size: 32px; }
    #article.articlesite p.t1p { font-size: 28px; }
    #article.articlesite p.t3pm { font-size: 34px; }
    #article.articlesite p.t2pm { font-size: 32px; }
    #article.articlesite p.t1pm { font-size: 30px; }
}