/* Styles du programme v-Jemaf 6 */

/* Police utilisées : Roboto */
@font-face {font-family: "Roboto";src: url('../img/Roboto-Thin.ttf');}
@font-face {font-family: "Roboto";font-style: italic;src: url('../img/Roboto-ThinItalic.ttf');}
@font-face {font-family: "Roboto";font-weight: bold;src: url('../img/Roboto-Regular.ttf');}
@font-face {font-family: "Roboto";font-style: italic;font-weight: bold;src: url('../img/Roboto-Italic.ttf');}

body, textarea, select, input{font: 16px 'Roboto', 'Verdana', sans-serif;color: white;letter-spacing: .25px;background-color: transparent;}
body{background-color: black;margin: 0;}
body.simple-ecran{overflow: hidden;}

/* Standard */
a{color: white;text-decoration: none;}
.icone:hover, a:hover, #telec aside a:hover, .hover:hover, input:hover, #telec #code:hover, textarea:hover, select:hover, .bouton:hover{color:#fcc;border-color: #fcc;cursor: pointer;}
.bouton:hover{background-color: #666;}
input[type="text"]:hover, input[type="number"]:hover, textarea:hover, #telec #code:hover{cursor: text;}
a.vu{color: #a8f;}
a.actif{color: #f88;font-weight: bold;}
h1{margin: 0 0 .75em;text-align: center;font-weight: bold;font-size: 2em;}
h2{margin: 0 0 .25em;font-size: 1.25em;font-weight: bold;color: #080;}
sub{vertical-align: 0px;color: #888;font-weight: bold;}
p.message {color: #f88;font-style: italic;margin: .5em 0	;font-size: .95em;}

.print_r{white-space: pre;border: 1px dotted;padding: .5em;display: inline-block;margin: 0 .5em .5em 0;color: #fb3d3d;vertical-align: top;}

#contenu{width: 1024px;background-color: #111;height: 768px;margin: 0 auto;box-sizing: border-box;padding: 32px;overflow-y: hidden;position: relative;}

/* Barre de navigation */
nav{position: fixed;bottom: 0;background-color: #444;width: 100%;box-sizing: border-box;padding: 6px 0 6px .5em;height: 32px;display: flex;transition:all 2s;}
#nav-gauche{display: inline-flex;width: 360px;}
.icone{height: 25px;width:25px;border: 1px solid #888;border-radius: 2px;cursor: pointer;box-sizing: content-box;}
#nav-gauche img{margin: -4px .5em 0 0;vertical-align: middle;}
#form_code #code{margin: -2px 0 -2px 6px;background-color: #333;color: #fcc;padding: 1px 2px;font-size: 20px;width: 6em;border: none;font-weight: bold;}
#numero, #t-numero{text-align: center;color: #fcc;letter-spacing: .5px;font-weight: bold;text-transform: uppercase;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: normal;}
#numero{width: 250px;font-size: 25px;margin: -5px 0;}
#nav-droite{flex: 1;text-align: center;overflow: hidden;padding-right: 6px;margin: -4px 0 -6px;line-height: 30px;overflow-x:hidden;}
#nav-droite a{padding: 0 2.5px;}

/* Menu de navigation */
aside{display:none;position: absolute;background-color: #666;padding: 4px;bottom: 33px;left: 1px;}
aside a{display: block;padding: 6px 2px;border-bottom: 1px solid #fff;}
aside a:last-child{border-bottom: none;}

/* Affichage d'un chant */
#contenu .chant{margin: -32px;padding: 32px;font-size: 44px;}
.chant{background:no-repeat fixed top center;display:none;}
.chant h1{font-size: 1.1em;text-transform: uppercase;margin: 5em auto 0;}
.chant sub{display: block;font-size: .7em;}
.chant h2{text-align: right;color: #888;margin-top: .75em;margin-bottom: 15em;font-size:.7em;}
.chant h4{position: absolute;top: 1em;left: 2em;white-space: pre;font-weight: bold;color: #888;line-height: 1.23em;font-size: 0.4em;}
.chant a{font-size: 1em;}
.chant .strophe, .chant .refrain{font-size: 1em;font-weight: bold;white-space: pre;margin-bottom:20em;}
.chant .refrain{margin-top: .5em;margin-left: 1.5em;font-style: italic;}
.fond span{background-color: rgba(0,0,0,.5);color:white;}
#fin{display:none;width: 80px;position: fixed;top: 690px;left: 50%;margin-left: 434px;}

/* Fond blanc */
.fond_blanc {background-color: white;color: black;}	/* Fond blanc */
.fond_blanc.fond span{background-color: rgba(255,255,255,.5);color: black;}

/* Style personnalisé */
.fond_image{background: url(../fonds/fond.jpg) no-repeat fixed top center !important;}
.fond_image .strophe, .fond_image .refrain{}	/* Modifier ici les styles */

/* Sans sauts de page */
.chant.sauts_sans h1{margin-top: 3em;}
.chant.sauts_sans h2{margin-bottom: 2em;}
.chant.sauts_sans .strophe, .chant.sauts_sans .refrain{margin-bottom: 1em;}
.chant.sauts_sans > div:nth-last-of-type(1){margin-bottom: 15em;}


/* Index */
.recueil{font-size: 2em;display: list-item;margin-left: 3em;padding: 0 0 .5em;font-weight: bold;}
.index {font-size: 20px}
.index h2{border-bottom: 1px solid;}
.index h2.resume{background: url(../img/drop_down.svg) no-repeat left center;padding-left: 1.5em;cursor:pointer;}
.index h2.resume.ouvert{background-image: url(../img/drop_up.svg);}
.index .details{display:none;}
.index p{margin: 0;border: 1px solid transparent;padding: 1px 4px 3px;}
.res-index span{font-size: .9em;color: #fcc;min-width: 5em;display: inline-block;}
.res-index:hover, .verset:hover{border: 1px dotted #fcc;border-radius: 4px;cursor:pointer;background-color: #222;}
.index sub{font-size: 14px;padding-left: 4px;}
.index a{font-size: 1em;}
.nb_recueil, .nb_total{color: #888;font-weight: bold;margin: .5em 0 1em;}
.nb_total{font-size: 1.25em;text-align: center;}
    
/* Formulaires */
.form{margin: 1em 0 0;background-color: #444;padding: 1em;border-radius: 6px;font-size: 18px;}
.flex{display: flex;}
.flex > div{display: inline-flex;margin: 0 1.25em 0 1em;}
.flex > div > div{display: block;}
.flex label{padding: 0 0 2px;display: block;}
label{cursor: pointer;font-weight: bold;}
textarea, input, select{vertical-align: top;padding: 2px 4px;border-radius: 2px;font-size: 18px;border: 1px solid #aaa;}
.bouton{background-color: #ccc;color: #222;font-weight: bold;border-radius: 4px;margin-top: 1.5em;padding: 2px .5em;border: 1px solid white;}
.flex textarea{width: 250px;height: 67px;}
.flex select{cursor: pointer;overflow-y: auto;}
.flex option{background-color: #666;color: white;}
.flex input[type="number"]{width: 60px;}
#verset_deb{margin: .25em 0 1em;vertical-align: 0;}

/* Texte biblique */
#contenu .div-Bible{display:none;font-size: 28px;margin: -32px;padding: 32px 32px 25em;min-height: 768px;}
.Bible {text-align: justify;box-sizing: border-box;}
.Bible .Ref h1{margin: 2em 0 .5em;font-size: 1.5em;}
.Bible .Ref h2{margin:0 0 2em;color: #ff8}
.Bible .Ref h4 {font-size: 16px;color: #bbf;position: absolute;top: 1em;}/*Annotations du livre*/
.Bible small {vertical-align: text-top;font-size: 14px;color: #ff6;padding: 0 2px;} /*N° verset*/
.Bible p, .Bible q {font-size: 1em;padding-top: .5em;text-indent: 0.5em;margin: .25em 0;}/*Paragraphes*/
.Bible p{padding-top:0;}
.Bible p.retrait {margin-left:1.5em;}
.Bible h1 {text-transform: uppercase;font-size: 1.15em;margin-top: .5em;}
.Bible h2.chapitre {border-bottom: 1px solid;padding-bottom: 3px;color: #666;}/*Chapitre de livre*/
.Bible h2, .Bible t {color: #afa;text-align: left;font-size: .9em;padding-top: 2em;}/*Chapitre à gauche*/
.Bible h2 + h2, .Bible h1 + h2{padding-top: .5em;}
.Bible h3 {margin-left: 1.9em;font-size: .8em;font-style: italic;color: #ffb;}/*Sous-titre*/
.Bible t {display: block;padding-top: .5em;}/*Sous-titre*/
.Bible q {display:block;padding-left : 1.5em;color: #fcc;text-align: left;}/*Citation*/
q:before, .Bible q:after {content:none;}/*Citation*/
.verset{border: 1px solid transparent;text-indent: 0;padding: 6px;font-size: 20px;}	/*Verset trouvé*/
.verset p, .verset q{text-indent: 0;margin-left: 0 !important;padding-left: 0;font-size: 1em;} 
.verset small{vertical-align: baseline;margin: 0 8px 0 0;font-size: .7em;}

/* Bible Fond Blanc */
.div-Bible.fond_blanc{font-weight: bold;}
.div-Bible.fond_blanc .Ref h2, .Bible.fond_blanc h3, .Bible.fond_blanc small{color: #fa4}
.div-Bible.fond_blanc h2, .Bible.fond_blanc t{color: #0f0}
.div-Bible.fond_blanc q{color: #f22}

/* Recherche biblique dans les 2 versions */
#version-bible{font-size: 1.25em;font-weight: bold;margin-bottom: 1em;}
#version-bible input{margin: 0 .5em;vertical-align: baseline;}
#version-bible label{margin-right: 1em;cursor: pointer;}
.version-Bible{font-size: 1.25em;font-style: italic;}
#div-livre{display:none;margin-top: 15px;}
#rech-dans-livre{width: 90px;background-color:#444;}
#div-res-bible{position: relative;margin-bottom: 4em;}
#res-semeur{position: absolute;width: 100%;}
#res-semeur + #res-segond{display:none;}

/* Couleur mots-cles */
span.mot-cle {border-radius:4px;padding:0 .1em;color:#000;font-weight: bold;margin: 0 .5px;}
span.Coul_0 {background-color:#da6;}
span.Coul_1 {background-color:#6dd;}
span.Coul_2 {background-color:#d6d;}
span.Coul_3 {background-color:#9d6;}
span.Coul_4 {background-color:#8ae;}

/* Accueil */
#accueil{background: url(../img/accueil.png) no-repeat fixed center top, radial-gradient(farthest-side ellipse at 25% 70%, #AAA, #111);height: 768px;}
#accueil h1{margin-top: 2em;}
#accueil h2, #accueil p{margin:1.5em 0 1em;}
#accueil ul{white-space: normal;line-height: 1.5em;margin-bottom: 0;font-size: .75em;}

/* Paramètres */
.param h2{margin: 1.5em 0 .5em;border-bottom: 1px solid;}
.param p{margin: .5em 0 0 .5em;font-size: 1.05em;}
p.comment, .comment a{color: #aaa;}
.param label{font-weight: normal;}
.param input[type='text']{margin: 0 .25em;max-width: 4em;border: 1px solid #444;padding: 0 4px;}
.param #titre_nv{max-width: 12em;}
#param_submit{margin: 1em 0;}


/* ******************************************************************************************************************************************************** */

/* TELECOMMANDE */
#telec{white-space: nowrap;overflow: hidden;}
fieldset{color: #888;background-color: #0e0e0e;font-weight: bold;border-color: #888;border-radius: 6px;margin: 4px;padding: 12px 12px;text-align: center;position: relative;vertical-align: top;display: block;}
fieldset legend{color: #888;}
#telec fieldset{display: inline-block;}
#telec fieldset:nth-of-type(1){width:350px;}
#telec fieldset:nth-of-type(2){width:222px;}
#telec fieldset:nth-of-type(3){width:514px;}

.reduire{position: absolute;z-index: 1;width: 35px;height: 35px;}
.reduire img{padding: 4px;background-color: #222;display:none;}
#reduire_previsu{right: 0;}

/* Composition */
#liste-compo, #liens{margin: 0;padding: 0;overflow-y: auto;position: relative;}
#liste-compo{height: 582px;min-height: 232px;}
#liste-compo li, #liens li{display: block;border: 1px solid;font-size: 17px;padding: 4px;border-bottom: none;cursor: pointer;}
#liste-compo li{text-align: left;display: flex;flex-wrap: wrap;min-height: 29px;box-sizing: border-box;}
#liste-compo li:hover, #liens li:hover, #t-droite:hover{background-color: #222;}
#liste-compo > li:nth-last-of-type(1), #liens > li:nth-last-of-type(1){border-bottom: 1px solid;}
#liste-compo span{color: #fcc;margin-right: .5em;font-weight: normal;min-width: 4em;text-transform: uppercase;}
#liste-compo p{margin: 0;white-space: normal;flex: 1;}
#liste-compo q{font-style: italic;color: #ccc;font-weight: normal;font-size: .9em;background-color: #3b0909;text-align: center;width: 100%;}
#telec li.vu{background-color: #555;}
#telec li.actif{background-color: #822;}

/* Centre */
#telec #code{border: 1px solid #888;width: 110px;padding: 1px 4px 0px;margin-right: 4px;font-size: 20px;vertical-align:top;}
#telec .icone{margin-right: 1px;}
#telec aside{top: 70px;bottom: auto;left: 66px;border-radius: 2px;z-index: 1;text-align: left;background-color: #222;color: #888;border: 1px solid #888;padding: 0 4px;}
#telec aside a{color: #888;border-color: #888;}
#t-centre #t-droite{display: block;width: 100%;margin: 10px 0 0;background: url(../img/scroll.png) no-repeat right;box-sizing: border-box;height: 35px;}
#t-numero{margin:20px 0 6px;font-size: 1.75em;height: 34px;}
#t-titre{height: 40px;margin: 0 0 6px;color: #fcc;font-weight: normal;white-space: normal;}
#liens{height: 400px;min-height: 71px;}
#liens li{font-size: 18px;padding: 6px 4px;}
#previsualisation{width: 512px;height: 576px;min-height: 226px;border: 1px solid #888;}

.previsu > div{font-size: 18px;padding: 12px 12px 36px;min-height: 575px;position: relative;box-sizing: border-box;}
.previsu .chant{font-size: 22px;background-size: cover;}
#prev_numero{background-color: rgba(68,68,68,.9);color: #fcc;position: fixed;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 16px;padding: 2px 0 2px;height: 18px;font-weight: bold;}
#prev_numero .prev_numero{text-transform: uppercase;}
#prev_liens, #compo-preliste{display: none;}
.previsu h1, .previsu .recueil{font-size: 1.25em;}
.previsu .chant h3 {margin: 0;color: #080;border-bottom: 1px solid;font-size: .8em;font-style: italic;margin-bottom: 4px;}	/* Repères */
.previsu h4, .previsu .Bible .Ref h4{font-size: 14px;line-height: 17px;top: 0;}
.previsu .form{display:block;padding: 0;}
.previsu .form > div{padding: .5em;vertical-align: top;}
.previsu .bouton{margin: 0 0 .5em;}
.previsu .chant.sauts_sans > div:nth-last-of-type(1) {margin-bottom: 0;}
.previsu .recherche > p, .previsu .recherche > h3, .previsu .nb_recueilp, .previsu .nb_total, .previsu .message{font-size: .9em;}

/* Fenêtre de Composition */
#composition{overflow: hidden;}
#composition .form{margin-top: 0;}
#composition textarea{display: block;height: 333px;min-height: 72px;background-color: #0e0e0e;width: 100%;box-sizing: border-box;overflow:auto;}

/* Fenêtre d'Edition */
#edition .form{margin-top: 0;display: block;text-align: left;}
#edition input[type="text"]{margin-bottom: .5em;}
.choix{padding: .5em 10px;}
.choix div{display: inline-block;font-size: 1.2em;margin: .5em 5px;}
#choix_code{padding: 0 0 1em 0;}
#choix_code input[type="button"]{margin: 0 0 0 28px;}
#edit_info label{display: inline-block;width: 120px;font-size: .9em;}
#edit_info label:nth-of-type(even){padding-left: 2em;}
#edition #edit_paroles{display:none;}
#edit_paroles .header, #edit_images .header{font-size: .9em;}
#edit_paroles .header{margin-left: 23px;}
#edit_paroles .form > div{padding: 4px 0;}
#edit_paroles span{display: inline-block;width: 20px;vertical-align: top;}
#edit_paroles textarea{height: 10em;width: 22.8em;margin-right: 1em;box-sizing: border-box;overflow:auto;white-space: pre;}
#edit_paroles textarea.refrain{padding: .5em 0 0 2em;font-style: italic;}
#edit_paroles .col{display: inline-block;width: 14em;line-height: 2em;}
#edit_paroles .col label{width: 5em;display: inline-block;}
#edit_paroles select, #edit_paroles input{width: 8em;box-sizing: border-box;}
#edit_paroles option{background-color: #444;color: white;}
#edit_images .header{margin: 0 0 2px;}
#edit_images ul{margin: 0 0 .5em;padding: 0;max-height: 330px;overflow-y: auto;position: relative;}
#edit_images li{background: url(../fonds/jem@fonds/jem@fonds.jpg) no-repeat center;width: 132px;height: 99px;display: inline-block;margin: 0 10px 5px 0;border: 1px solid;}
#edit_images li:hover{border-color: #fcc;cursor: pointer;}
#edit_images li.disabled{opacity: .3;}
#images-autres li{background-size: contain;}
#edit_nv_image{margin: 0 0 0 2em;}
#div-nv-image{margin-bottom: 1em;}
#nv-image{border: none;font-size: .9em;}
#edit_enregistrer {margin: 1em 0 0 1em;}
#image_decouper{width: 620px;height: 465px;overflow: hidden;border: 1px solid;position: relative;display: inline-block;}
#image_decouper img{position: absolute;}
#image_decouper.horizontal img{height: 100%;cursor: e-resize;}
#image_decouper.vertical img{width: 100%;cursor: n-resize;}
#edit_dec_image{margin: 0 0 0 1em;}
#editeur-numero{display: none;}