header, nav, section, article, aside, footer { display: block; }  /* old browsers */
*    { margin: 0; padding: 0; }
html { height: 100%; color: black; background-color: white; font: 0.625em 'Trebuchet MS',Arial,sans-serif; }
body { height: 100%; font-size: 1.2em; } .clear { clear:both; } ul { list-style-type: none; }

#sidebar{ width: 300px; padding: 2em 12px; position: absolute; top: 0; bottom: 0; background-color: white; }
#main	{ min-height: 100%; margin-left: 325px; background-color: #f8f8f8; padding: 0 1em; }

header   { text-align:center; }  
header a { display: block; font-size: 2em; font-weight: bold; text-decoration:none; color: #3ac; }

/* le menu principal, en pseudo-boutons, bloc en haut à gauche sous le logo */
#menu ul li a, a.top {
  display: block; line-height: 0.7em; padding: 0.3em 1em; margin-bottom: 0.5em;
  color: #666; border: 2px solid #ccc; border-radius: 1em;
  font-size: 1.3em; font-weight: bold; text-decoration:none;
}
#menu ul li a:hover, a.top:hover { color: #3ac; border: 2px solid #3ac; }

/* le menu Alphabétique, avec 1 pseudo-bouton par lettre */
#alpha ul li   { float: left; text-align:center; }
#alpha ul li a {
  border: 1px solid #ccc; border-radius: 1.4em; margin: 4px; 
  display: block; font-weight: bold; text-decoration:none; color: #999;
  font-size: 1.2em; min-width: 1.2em; line-height: 1.2em; 
}
#alpha ul li a:hover { color: #3ac; border: 1px solid red; }
#alpha p { margin-bottom: 1em; }
/* #search input[name="q"] { width: 100px; } */
/* #search { width: 250px; overflow: hidden; } */


/* la page principale, à droite, grisée, et son header */
#main nav a { text-decoration:none; color:#3ac; line-height:2.0em; border: 2px solid #ccc;}
#main nav a:hover { color: #fff; border-color:#3ac; }
#main h3, #main h4 { padding:0; font-size:1.3em; color:white; background-color:#ccc; }
#main h1   { padding:0.5em 1em; font-size:1.5em; color: #666; background-color:#eee; }
#main h1 small  { font-size:0.66666em; }
#main h1 strong { font-size:1.33333em; color:#3ac; line-height:1.6em; }
#main h1 em { font-size:0.9em; line-height:1.4em; display:none; } /* @print */

#main #paroles { font-size:1.3em; padding:1em; line-height:1.5em;}

/* affichage des liens des listes (titres, artistes) */
#main .liste { font-size:1.3em; padding:1em; }
#main .liste li a { display: block; text-decoration:none; color: black; padding: 0.3em 0; }
#main .liste li a:hover { color:#3ac; background-color:#eee; }
#main .liste li small   { color:#999; }

/* cas page accueil, titre - artiste, et differenciation liens artistes */
#main .liste2 { max-width:700px; }
#main .liste2 span { float:right; }
#main .liste2 span a { color:#666; }

/* cas des classements (Top) */
ol.liste      { margin-left:2em; }
ol.liste li   { font-size: 0.8em; color: #3ac; }
ol.liste li a { font-size: 1.25em; }

/* les blocs de la colone de gauche */
#menu, #alpha, #search, #gAdRect {margin-top: 2em; overflow: hidden; }
#cloud, #links { display:none; }
#gAdRect { border:0px solid #eee; }
div.pub { min-height:90px; background-color:#f8f8ff; }

div.center{text-align:center!important;}
a img.kov{ width:50%; max-width:150px; height:auto;text-align:center;}

footer { Xposition: absolute; bottom: 0; color: gray; }

h3, h4 { font-size:1.2em; padding:0;   color:white; background-color:#ccc; }
h1     { font-size:1.6em; padding:1em; color:#3ac;  background-color:#eee; }

/* #gAdBoard {display:flex; align-items:center; justify-content:center;} */
#gAdBoard  {margin: 4px auto;}
#gAdBanner {margin: 2em auto;}

@media only screen and (min-width: 780px) {
  .mobil { display:none; }
  #gAdBanner { display:none; }
}

@media only screen and (min-width: 780px) and (max-width: 1023px) {
  #sidebar{ width: 250px; padding: 2em 4px; }
  #main	{ margin-left: 250px; }
  #search { width: 250px; overflow: hidden; }
}

@media only screen and (max-width: 780px) {
  body     { font-size: 1.1em; }
  #main    { min-height: 0; }
  #sidebar, header { width: 90%; padding:0; margin: 0.5em auto 0 auto; position: relative; }
  div#main { margin-left: 0; }
  footer   { }  /* display:none; */
  #sidebar header a { margin-top: 1em; }
  #gAdRect { display:none; }
}

@media only screen and (max-width: 400px) {
  #main .liste2 span { float:none; }  /* interlacer artistes et titres */
  #main .liste2 span a { font-style:italic; font-size: 0.9em; }
}

@media print {
  html { height: auto; font: xx-small Georgia,'Times new roman',serif; }
  body { height: auto; font-size: 1.2em; }
  nav, #sidebar, div.pub, .NoP { display:none; }
  #main { margin-left: 0; }
  #main h1 strong { font-size:1.1em; color:black; }
  #main h1 em { display: initial; }
}

@media (pointer: coarse) {
  body { font-size: 1.2em; }
 #menu  ul li a, a.top { padding: 0.6em 1em; }
 #alpha ul li a {
    margin-right: 10px; margin-bottom: 10px;
    font-size: 1.3em; min-width: 1.3em; line-height: 1.3em;
  }
  #main .liste li a { padding: 0.6em 0; }
}


ON#search { display:none; } /* waiting for GWT */


/* button toTop on bottom-right when page scrolled */
a#toTop{ position:fixed; right:16px; z-index:99; }
a#toTop:before{ content: "▲"; }  /* ▲ 🡅 🡹 🢁 🡡 🡹 🔝 */
#toTop, a.fltbtn{
	font-size:16px; border-radius:6px; padding:8px; width:20px;
	background-color:#aaa; color:#fff;
	text-decoration: none; text-align:center;
}
a#toTop:hover, a.fltbtn:hover{
	background-color:#3ac; transition:all ease-in 0.25s;
}
a#toTop.hide{
	bottom:-32px; opacity:0;
	background-color:#777; transition:all ease-in 0.5s;
}
a#toTop.show{
	bottom:16px; opacity:1;
}

a#toPrev{ position:fixed; right:60px; top:2em; z-index:99; }
a#toPrev:before{ content: "◀"; }
a#toNext{ position:fixed; right:16px; top:2em; z-index:99; }
a#toNext:before{ content: "▶"; }


html { scroll-behavior: smooth; }

/* ▲ ▼ ◀ ▶ △ ▽ ◁ ▷ ▴ ▾ ◂ ▸  // ▵ ▿ ◃ ▹ ⛛ ◄ ► ◅ ▻ 🞀 🞂 🞁 🞃 ⏪ // 🔺 🔻 🔼 🔽 */
/* ⏪⏮️◀️🔼▶️⏩⏮️⏯️⏫🔽🔺🔻 */

/* eof */