/* -----------------------------
Avertissement
(site en lecture seule, etc.)
--------------------------------*/

.lecture-seule {
	position: relative;
	margin: 1em 0 1em 0;
	padding: 1em;
	text-align: justify;
	-moz-border-radius: 4px;
	background-color: #ddd;
	color: #000;
	/*background-color: #FF6600;*/
}

.info-message {
	padding: 0.2em 0.5em;
	background-color: var(--main-highlight-bg);
	color: var(--main-color-bg);
	border-radius: 4px;
}

.error-message {
	padding: 0.2em 0.5em;
	background-color: #e65252;
	color: var(--main-color-bg);
	border-radius: 4px;
}

.debug-message {
	padding: 0.2em 0.5em;
	background-color: #b4d558;
	color: var(--main-color-bg);
	border-radius: 4px;
}

/* Image replacement pour les flags
   Cette technique fonctionne aussi pour les éléments en ligne
   http://www.evotech.net/blog/2007/09/css-image-replacement-method/ */
.flag {
	display:-moz-inline-box;
	display:inline-block;
	background:transparent none 0 0 no-repeat;
	text-indent:-3000px;
	font:0/0 Arial;
	overflow:hidden;
	color:rgba(255,255,255,0);
	vertical-align: middle;
}


a.flag {
    width: 24px;
	height: 24px;
}

.flag-text {
	padding: 4px 0 2px 30px;
	background-repeat: no-repeat;
}


.f1 { background-image: url(flags/France.png); }
.f2 { background-image: url(flags/United-Kingdom.png); }
.f3 { background-image: url(flags/United-States-Of-America.png); }
.f4 { background-image: url(flags/Germany.png); }
.f5 { background-image: url(flags/Albania.png); }
.f6 { background-image: url(flags/Argentina.png); }
.f7 { background-image: url(flags/Australia.png); }
.f8 { background-image: url(flags/Austria.png); }
.f9 { background-image: url(flags/Belgium.png); }
.f10 { background-image: url(flags/Bosnia-Herzegovina.png); }
.f11 { background-image: url(flags/Brazil.png); }
.f12 { background-image: url(flags/Bulgaria.png); }
.f13 { background-image: url(flags/Canada.png); }
.f14 { background-image: url(flags/China.png); }
.f15 { background-image: url(flags/Chile.png); }
.f16 { background-image: url(flags/Colombia.png); }
.f17 { background-image: url(flags/Costa-Rica.png); }
.f18 { background-image: url(flags/Cote-d-Ivoire.png); }
.f19 { background-image: url(flags/Croatia.png); }
.f20 { background-image: url(flags/Cuba.png); }
.f21 { background-image: url(flags/Czech-Republic.png); }
.f22 { background-image: url(flags/Cyprus.png); }
.f23 { background-image: url(flags/Denmark.png); }
.f24 { background-image: url(flags/Dominican-Republic.png); }
.f25 { background-image: url(flags/Egypt.png); }
.f26 { background-image: url(flags/Estonia.png); }
.f27 { background-image: url(flags/Ethiopia.png); }
.f28 { background-image: url(flags/Finland.png); }
.f29 { background-image: url(flags/Gabon.png); }
.f30 { background-image: url(flags/Greece.png); }
.f31 { background-image: url(flags/Guatemala.png); }
.f32 { background-image: url(flags/Hungary.png); }
.f33 { background-image: url(flags/India.png); }
.f34 { background-image: url(flags/Indonesia.png); }
.f35 { background-image: url(flags/Monaco.png); }
.f36 { background-image: url(flags/Iran.png); }
.f37 { background-image: url(flags/Israel.png); }
.f38 { background-image: url(flags/Italy.png); }
.f39 { background-image: url(flags/Jamaica.png); }
.f40 { background-image: url(flags/Iraq.png); }
.f41 { background-image: url(flags/Japan.png); }
.f42 { background-image: url(flags/Kazakhstan.png); }
.f43 { background-image: url(flags/South-Korea.png); }
.f44 { background-image: url(flags/North-Korea.png); }
.f45 { background-image: url(flags/Kuwait.png); }
.f46 { background-image: url(flags/Kyrgyzstan.png); }
.f47 { background-image: url(flags/Laos.png); }
.f48 { background-image: url(flags/Lesotho.png); }
.f49 { background-image: url(flags/Liechtenstein.png); }
.f50 { background-image: url(flags/Lithuania.png); }
.f51 { background-image: url(flags/Luxembourg.png); }
.f52 { background-image: url(flags/Madagascar.png); }
.f53 { background-image: url(flags/Malaysia.png); }
.f54 { background-image: url(flags/Iceland.png); }
.f55 { background-image: url(flags/Malta.png); }
.f56 { background-image: url(flags/Mexico.png); }
.f57 { background-image: url(flags/New-Zealand.png); }
.f58 { background-image: url(flags/Netherlands.png); }
.f59 { background-image: url(flags/Nigeria.png); }
.f60 { background-image: url(flags/Norway.png); }
.f61 { background-image: url(flags/Pakistan.png); }
.f62 { background-image: url(flags/Paraguay.png); }
.f63 { background-image: url(flags/Peru.png); }
.f64 { background-image: url(flags/Philippines.png); }
.f65 { background-image: url(flags/Poland.png); }
.f66 { background-image: url(flags/Portugal.png); }
.f67 { background-image: url(flags/Romania.png); }
.f68 { background-image: url(flags/Russian-Federation.png); }
.f69 { background-image: url(flags/Senegal.png); }
.f70 { background-image: url(flags/Seyshelles.png); }
.f71 { background-image: url(flags/Slovakia.png); }
.f72 { background-image: url(flags/Slovenia.png); }
.f73 { background-image: url(flags/South-Africa.png); }
.f74 { background-image: url(flags/Spain.png); }
.f75 { background-image: url(flags/Sri-Lanka.png); }
.f76 { background-image: url(flags/Swaziland.png); }
.f77 { background-image: url(flags/Sweden.png); }
.f78 { background-image: url(flags/Switzerland.png); }
.f79 { background-image: url(flags/Tajikistan.png); }
.f80 { background-image: url(flags/Thailand.png); }
.f81 { background-image: url(flags/Trinidad-Tobago.png); }
.f82 { background-image: url(flags/Singapore.png); }
.f83 { background-image: url(flags/Tunisia.png); }
.f84 { background-image: url(flags/Turkey.png); }
.f85 { background-image: url(flags/Ukraine.png); }
.f86 { background-image: url(flags/United-Arab-Emirates.png); }
.f87 { background-image: url(flags/Uruguay.png); }
.f88 { background-image: url(flags/Venezuela.png); }
.f89 { background-image: url(flags/Viet-Nam.png); }
.f90 { background-image: url(flags/Serbia.png); }
.f91 { background-image: url(flags/Zimbabwe.png); }
.f92 { background-image: url(flags/Zambia.png); }
.f93 { background-image: url(flags/Taiwan.png); }
.f94 { background-image: url(flags/Ireland.png); }
.f95 { background-image: url(flags/United-Nations.png); }
.f96 { background-image: url(flags/Cameroon.png); }
.f97 { background-image: url(flags/Algeria.png); }
.f98 { background-image: url(flags/Armenia.png); }
.f99 { background-image: url(flags/Faroes.png); }
.f100 { background-image: url(flags/Lebanon.png); }
.f101 { background-image: url(flags/Bolivia.png); }
.f102 { background-image: url(flags/Andorra.png); }
.f103 { background-image: url(flags/Panama.png); }
.f104 { background-image: url(flags/Syria.png); }
.f105 { background-image: url(flags/Mali.png); }
.f106 { background-image: url(flags/Macedonia.png); }
.f107 { background-image: url(flags/Morocco.png); }
.f108 { background-image: url(flags/Central-African-Republic.png); }
.f109 { background-image: url(flags/Montenegro.png); }
.f110 { background-image: url(flags/Congo-Kinshasa.png); }
.f111 { background-image: url(flags/Afghanistan.png); }
.f112 { background-image: url(flags/Belarus.png); }
.f113 { background-image: url(flags/Libya.png); }
.f114 { background-image: url(flags/Somalia.png); }
.f115 { background-image: url(flags/Bahrain.png); }
.f116 { background-image: url(flags/Ghana.png); }
.f117 { background-image: url(flags/Bahamas.png); }
.f118 { background-image: url(flags/Azerbaijan.png); }
.f119 { background-image: url(flags/Cambodja.png); }
.f120 { background-image: url(flags/Uzbekistan.png); }
.f121 { background-image: url(flags/Tanzania.png); }
.f122 { background-image: url(flags/Groenland.png); }
.f124 { background-image: url(flags/Burkina-Faso.png); }
.f125 { background-image: url(flags/Equador.png); }
.f126 { background-image: url(flags/Nicaragua.png); }
.f127 { background-image: url(flags/Latvia.png); }
.f128 { background-image: url(flags/suriname.svg); background-size: 22px 16px; background-position: 1px 2px; }
.f129 { background-image: url(flags/guyana.svg); background-size: 22px 16px; background-position: 1px 2px; }
.f130 { background-image: url(flags/Georgia.png); }
.f131 { background-image: url(flags/aland.svg); background-size: 22px 16px; background-position: 1px 2px; }
/* -------------------------
graphismes
----------------------------*/
.gfxNotePleine {
	padding-right:10px;
	background : var(--score-full) 0px 3px no-repeat;
}
.gfxNoteVide {
	padding-right:10px;
	background : var(--score-empty) 0px 3px no-repeat;
}
.gfxNoteDemi {
	padding-right:10px;
	background : var(--score-half) 0px 3px no-repeat;
}
.gfxNotePleineSmall {
	padding-right:7px;
	background : var(--score-full-mini) 0px 4px no-repeat;
}
.gfxNoteVideSmall {
	padding-right:7px;
	background : var(--score-empty-mini) 0px 4px no-repeat;
}
.gfxNoteDemiSmall {
	padding-right:7px;
	background : var(--score-half-mini) 0px 4px no-repeat;
}
.gfxFleche {
	padding-right: 20px;
	background : url(design/fleche.jpg) 0px 1px no-repeat;
}
.gfxPlus {
	padding-right: 9px;
	background : url(design/plus.gif) 0px 2px no-repeat;
}
.gfxPlus2 {
	padding-right: 9px;
	background : url(design/vide.gif) 0px 2px no-repeat;
}
.gfxMp3 {
	padding-right:10px;
	background : url(design/notemusic.png) no-repeat;
}
.gfxPrivateMail {
	padding-right:11px;
	background : url(design/privatemail.png) no-repeat;
}
.gfxOnLine {
	padding-right:15px;
	background : url(design/online.png) no-repeat;
}
#contenuInfovis {
    position: relative;
}


#contenuInfovis ul.nestedList dl dt {
	top: 0.8em;
}

#inner-details {
    font-size:1em;
    list-style:none;
    margin:7px 7px 7px 602px;
}

#log {
    position: absolute;
    top: 5px;
    left: 0;
    font-size:1.0em;
    font-weight:bold;
    color:#FF6701;
}


#infovis {
    position:relative;
    float: left;
    width:600px;
    height:600px;
    overflow:hidden;
}

/*TOOLTIPS*/
.tip {
    color: #111;
    width: 139px;
    border:1px solid #ccc;
    -moz-box-shadow:#555 2px 2px 8px;
    -webkit-box-shadow:#555 2px 2px 8px;
    -o-box-shadow:#555 2px 2px 8px;
    box-shadow:#555 2px 2px 8px;
    opacity:0.9;
    filter:alpha(opacity=90);
    font-size:10px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding:7px;
}

#infovis-canvaswidget {
  margin:0;
}

/* style for the visualization's labels */
.node {
  cursor:pointer;
  padding:1px 2px;
}

.hidden {
  display:none;
}

/* -----------------------------
Chroniques au hasard
--------------------------------*/

#random h2 {
	display: none;
}

.random-item {
	display: flex;
	align-items: flex-start;
	min-height: 125px;
	text-align: justify;
	border-radius: 4px;
	background-color: var(--block-color-bg);
}

.random-item-title {
	margin-left: 1em;
	font-weight: bold;
}

.random-item-text {
	margin-left: 1em;
}

.random-item img {
	min-width: 125px;
	margin-top: 0.5em;
	border: 1px solid #cccccc;
}

.random-item span.lien {
	display: block;
	text-align: right;
	margin: 0.4em 0 0 0;
}
body {
	margin: 0 0 3em 0;
}

#conteneur {
	position: relative;
	margin: 10px 10px 3em 40px;
	padding: 0;
	min-width: 940px;
	max-width: 1260px;
}

#header-guide, #header-catch1, #header-catch2, #header-theme-switch {
	display: none;
}

#header-info {
	position: absolute;
	top: 99px;
	left: 0;
}

#header-info p {
	line-height: 160%;
}

#header-session {
	position: absolute;
	top: 99px;
	right: 0;
}

#corps {
	z-index: 50; /* ne pas supprimer sinon le footer ne vient pas au premier plan */
}

#contenu {
	margin: 0 33% 0 0;
	padding: 0 20px 20px 20px;
	_height: 0; /* résolution Peekaboo bug dans IE6 */
}

/* -------------------------
Menu contextuel
----------------------------*/

#context-nav {
	float: right;
	width: 30%;
	margin: 0 20px 20px 20px;
}
/* -------------------------
colors
----------------------------*/

:root {
  --main-color-bg: #000000;
  --main-color: #bbbbbb;
  --main-signboard: url(design/enseigne.jpg);
  --main-signboard-tab: url(design/god-tab.png);
  --main-signboard-logo: url(design/god-grey-and-orange.png);
  --main-signboard-opacity: url(design/opacity.png);
  --main-link-color: #e6b367;
  --main-menu-color: #ffffff;
  --main-menu-focus-color: #ffffff;
  --main-highlight-bg: #e6b367;
  --main-highlight-color: #1e1e1e;
  --main-form-color-bg: #222222;
  --main-form-color: #cccccc;
  --main-form-focus-color-bg: #333333;
  --main-form-fieldset-color-bg: #020808;;
  --main-form-fieldset-color: #bbbbbb;
  --main-form-fielset-legend-color: #e6b367;
  --main-form-border-color: #312f2f;
  --main-h2-color: #cccccc;
  --main-h3-color: #eeeeee;
  --block-color-bg: #020808; /* plus clair: #111010 */
  --search-bg: url(design/recherche.png);
  --score-full: url(notation/note_pleine.jpg);
  --score-half: url(notation/note_demi.jpg);
  --score-empty: url(notation/note_vide.jpg);
  --score-full-mini: url(notation/note_pleine_small.jpg);
  --score-half-mini: url(notation/note_demi_small.jpg);
  --score-empty-mini: url(notation/note_vide_small.jpg);
  --tracklist-length-color: #dddddd;
  --tracklist-info-color: #dddddd;
  --footer-bg: url(design/enseigne.jpg);
  --footer-opacity: url(design/opacity.png);
  --footer-menu-title-color: #eeeeee;
}

[data-theme="light"] {
  --main-color-bg: #ffffff;
  --main-color: #1e1e1e;
  --main-signboard: url(design/enseigne-inverse.jpg);
  --main-signboard-tab: url(design/god-tab-inverse.png);
  --main-signboard-logo: url(design/god-black-and-white.svg);
  --main-signboard-opacity: url(design/opacity-inverse.png);
  --main-link-color: #1e1e1e;
  --main-menu-color: #1e1e1e;
  --main-menu-focus-color: #e6b367;
  --main-highlight-bg: #cccccc;
  --main-highlight-color: #1e1e1e;
  --main-form-color-bg: #cccccc;
  --main-form-color: #1e1e1e;
  --main-form-focus-color-bg: #bbbbbb;
  --main-form-fieldset-color-bg: #020808;
  --main-form-fieldser-color: #bbbbbb;
  --main-form-border-color: #bbbbbb;
  --main-h2-color:#1e1e1e;
  --main-h3-color: #1e1e1e;
  --block-color-bg: #eeeeee;
  --search-bg: url(design/recherche-inverse.png);
  --score-full: url(notation/score-full-inverse.svg);
  --score-half: url(notation/score-half-inverse.svg);
  --score-empty: url(notation/score-empty-inverse.svg);
  --score-full-mini: url(notation/score-full-mini-inverse.svg);
  --score-half-mini: url(notation/score-half-mini-inverse.svg);
  --score-empty-mini: url(notation/score-empty-mini-inverse.svg);
  --tracklist-length-color: #1e1e1e;
  --tracklist-info-color: #1e1e1e;
  --footer-bg: url(design/enseigne-inverse.jpg);
  --footer-opacity: url(design/opacity-inverse.png);
  --footer-menu-title-color: #1e1e1e;
}

/* -------------------------
balises générales
----------------------------*/

html {
    box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
	position: relative;
	font: normal 0.80em 'Lucida Grande','Lucida Sans Unicode', sans-serif;
/*	color: #bbb; */
/*	background-color: ; */
	color: var(--main-color);
	background-color: var(--main-color-bg);
}

a:link, a:visited {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px dotted var(--main-link-color);
	color: var(--main-link-color);
}

#menuArtiste a:visited {
	color: #ff6600; /* on différencie les chro déjà lues */
}

a:active, a:hover {
	text-decoration: none;
	border-bottom: 1px solid var(--main-link-color);
}

a.externe {
	padding: 4px 30px 2px 0;
	background-repeat: no-repeat;
	background-image: url(design/externe.png);
	background-position: right;
}

acronym {
	color : #bbb;
	cursor: help;
}

em {
	font-style : normal;
	color : var(--main-link-color);
}

input, select, textarea, button {
	padding: 2px 3px;
	background-color: var(--main-form-color-bg);
	color: var(--main-form-color);
	font-size: 14px;
	border: 1px solid var(--main-form-border-color);
	border-radius: 4px;
}

textarea {
    line-height: 160%;
}

input[type=submit], button {
	font-weight: bold;
}

input[type=submit]:hover, input:focus, select:focus, textarea:focus, button:focus {
	cursor: hand;
	background-color: var(--main-form-focus-color-bg);
}

input[type=radio] {
	border: none;
	background-color: transparent;
}

input:required {
}

form {
	margin: 0;
	padding: 0;
}

h2, h3, h4 {
	margin: 0;
	padding: 0;
}

h2 {
	line-height: 140%;
}

h2 em {
	font-style : italic;
}

img {
	border:0px;
	max-width: 100%;
}

p {
	margin: 0;
	text-align: justify;
	line-height: 180%;
}

dd {
	line-height: 160%;
}

ul {
	margin: 0px;
	padding: 0px;
	list-style-type : none;
}

ins {
    padding: 0 0.1em;
    color: ;
    text-decoration: none;
    background: #d1ff9f;
}

del {
    padding: 0 0.1em;
    color: ;
    background: #ffafaf;
}

.right {
    float: right;
}

.small {
    font-size: 0.8em;
}

.very-small {
    font-size: 0.6em;
}


.button { /* à utiliser sur les balises a */
	padding: 0.2em 0.5em !important;
	background-color: var(--main-form-color-bg);
	color: var(--main-color) !important;
	border: 1px solid var(--main-form-border-color) !important;
	border-radius: 4px;
    line-height: 1em;
}
.button:hover { /* à utiliser sur les balises a */
	color: var(--main-link-color) !important;
}

.infobox {
    padding: 0.5em;
    border: 2px solid var(--main-link-color);
}

/* -------------------------
zoom
----------------------------*/

.zoom-x15, .zoom-x20, .zoom-x25 {
    transition: transform .2s;
}

.zoom-x15:hover {
    transform: scale(1.5);
    z-index: 200;
}

.zoom-x20:hover {
    transform: scale(2);
    z-index: 200;
}

.zoom-x25:hover {
    transform: scale(2.5);
    z-index: 200;
}


/* -------------------------
conteneur principal
----------------------------*/
#conteneur {
	border: 1px solid #333;
	border-radius: 4px;
	background-image: var(--main-signboard-tab), var(--main-signboard);
    background-repeat: no-repeat;
	line-height: 130%;
}


/* -------------------------
entete de page
----------------------------*/
#header {
	height: 230px;
	width: 100%;
}

#header-site a {
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -5000px;
	background-image: var(--main-signboard-logo);
    background-repeat: no-repeat;
    background-size: 96% auto;
    background-position: 23px 6px;
	height: 99px; /* taille de l'hyperlien */
	width: 460px;
	border: none;
}

#header-info {
	background: transparent var(--main-signboard-opacity) repeat;
	width: 100%;
}

#header-info p,
#header-session p {
	padding: 1em 20px;
}

#header-advert {
	position: relative;
	top: 20px;
	right: 20px;
	margin-left: 490px;
	text-align: center;
}

#header-advert a.externe {
	padding: 0;
	background: none;
	border: none;
}


/* -------------------------
divers
----------------------------*/

.listeParagraphe {
	margin-top: 3px;
	padding-bottom: 6px;
	text-align: justify;
}

.listeFormat1 {
	margin-left: 20px;
	padding-bottom: 6px;
	text-align: left;
	list-style-image : url(design/fleche_menu.gif);
}
.listeFormat1 a {
	border: none;
}

.listeFormat1 a:hover {
	border-bottom: 1px solid var(--main-link-color);
}

.listeFormat1 a>strong {
    padding-left: 2px;
    padding-right: 2px;
    color: var(--main-highlight-color);
	background: var(--main-highlight-bg);
}

.listeFormat2 {
	padding-bottom: 6px;
	text-align: left;
}

.listeFormat2 a {
	border: none;
}

.listeFormat2 a:hover {
	border-bottom: 1px solid var(--main-link-color);
}

.listeFormat2 a>strong {
    padding-left: 2px;
    padding-right: 2px;
    color: var(--main-highlight-color);
    background: var(--main-highlight-bg);
}

.listeFormat2 li {
	display: inline;
}
.listeFormat3 {
	padding-bottom: 6px;
	text-align: left;
	-moz-mn-count: 3;
	list-style-position: outside;
}
.listeFormat3 li {
	padding: 0.3em 0;
}

.listeFormat3 a {
	padding-top: 4px;
	padding-bottom: 4px;
	border: none;
}

.listeFormat3 a:hover {
	border-bottom: 1px solid var(--main-link-color);
}

.masquer {
	display:none; /* permet de masquer les icones privatemail et online*/
}

p.plus {
	clear: left;
	text-align: right;
}

/* -------------------------
tableaux
----------------------------*/
.tableau1 {
	margin: 30px 0;
	padding: 20px 0 1px 0;
	font-size: 1em;
	width: 100%;
}

table {
	/*border-collapse: collapse;*/
}

td {
	padding: 0.2em 0.5em;
	font-size: 1em;
	/*border-bottom: 1em solid var(--main-color-bg); */
	background: var(--block-color-bg);
	line-height: 150%;
}
th {
	font-size: 1em;
	padding: 1em 0.5em;
	line-height: 150%;
	text-align: left;
}

/* --------------------------------
balises speciales menus latéraux
-----------------------------------*/
#context-nav {
	position: relative;
	padding-top: 8em;
}

#context-nav h2, #context-nav h3 {
	margin: 2em 0 0.5em 0;
	padding: 0 0 0.5em 0;
	font-size: 1em;
	color: var(--main-h3-color);
	border-bottom: 1px dotted #444;
	text-align: justify;

}

/* --------------------------------
balises spéciales contenu
-----------------------------------*/
#contenu {
	border-right: 1px dotted var(--main-form-color-bg);
}

#contenu ul li {
	line-height: 160%;
}

#contenu h2, #contenu h3, #contenu h4 {
	font-family: arial, verdana, helvetica, sans-serif;
}

#contenu h2 {
	margin: 2em 0 0.5em 0;
	font-size: 1.6em;
	color: var(--main-link-color);
}

#contenu h3 {
	margin: 2em 0 0.5em 0;
	padding: 0 0 0.5em 0;
	font-size: 1.2em;
	color: var(--main-h3-color);
	border-bottom: 1px dotted #444;
	text-align: justify;
}

#contenu h4 {
	margin: 2em 0 0.5em 0;
	padding: 0 0 0.5em 0;
	color: #eee;
	text-align: justify;
}

#contenu p {
	margin: 0 0 1em 0;
}

/* --------------------------------
balises spéciales home
-----------------------------------*/

#contenuActu .actu, #homeArtistOfTheWeek, #homeConcours {
	min-height: 120px;
}

#contenuDocument h2#homeTitle {
	display: none;
}

/* --------------------------------
balises speciales objets
-----------------------------------*/

#objetTracklist .tl-separator-title {
	display: block;
	margin-top: 1em;
	margin-right: 100px;
	font-style: italic;
	font-weight: bold;
	color: var(--main-color);
}
#objetTracklist .tl-tracks>li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px dotted var(--block-color-bg);
	line-height: 160%;
}
#objetTracklist .tl-track-number {
	flex-basis: 2em;
	display: block;
	margin-right: 0.5em;
	padding: 0 1px;
	background: var(--main-form-color-bg);
	color: #ffffff;
	font-size: 80%;
	text-align: center;
	font-weight: bold;

}
#objetTracklist .tl-track-title {
    flex-grow: 2;
	text-align: left;
}
#objetTracklist .tl-track-length {
	flex-basis: 4em;
    order: 4;
	color: var(--tracklist-length-color);
	font-family: monospace;
	font-weight: bold;
	text-align: right;

}
#objetTracklist .tl-track-info {
	flex-shrink: 1;
	font-family: monospace;
	font-size: 90%;
    color: var(--tracklist-info-color);
	line-height: 140%;
	margin-top: 0.4em;
}



#objetVoteurs table {
	margin-top: 0;
}

#objetPochettesEditionsTracklist {
	display: flex;
	align-content: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#objetEditionsTracklist {
    width: 100%;
}

.edition-reference {
    display: inline-block;
    float: right;
    margin-left: 2em;
    font-size: 80%;
}

#objetPochettes {
	margin: 0;

}

#objetPochettes img {
	min-width: 200px;
	height: 200px;
	margin: 0 0 0 2em;
	border: 1px solid #ccc;
}

#objetEditions {
}

#objetChroniques p {
	clear: left;
	padding-bottom: 5px;
	font-size: 1.1em;
	text-align: justify;
}

.objetChroniqueur {
	margin-top: 10px;
	float: left;
	font-weight: bold;
}

.objetChroniqueur img.avatar {
	width: 25px;
	height: 25px;
	border: 1px solid var(--block-color-bg);
	margin-right: 0.5em;
	vertical-align: middle;
}

div.objet-style {
	margin: 1.3em 0 0.7em 0;
	padding: 0.1em 1em 0.1em 0;
	text-align: right;
	line-height: 220%;
}

.objet-style-1, .objet-style-2 {
	display: inline;
}

.objet-style-1 dt, .objet-style-2 dt, .objet-style-3 dt {
	display: none;
}

.objet-style-1 dd, .objet-style-2 dd, .objet-style-3 dd {
	display: inline;
}

.objet-style-1 dd:before, .objet-style-2 dd:before {
	margin: 0 1em;
	content:"/";
	font-size: 60%;

}

.objet-style-1 dd.first:before {
	content:"";
}

.objet-style-3 dd {
	font-style: italic;
}

/* ------------------------------------------
Objet recommandations
(Ecrase le comportement objectList classique)
---------------------------------------------*/

#objetChroniques h4 {
	margin-left: 5em;
}

#objetChroniques ul.objectList {
	margin-left: 5em;
	margin-right: 5em;
	-moz-column-width: 26em;
	-webkit-column-width: 26em;
}

#objetChroniques ul.objectList li {
	padding-left: 0.2em;
	border-left: 1px dotted #444;
}

#objetChroniques ul.objectList dl {
	/*border: 1px solid #444;*/
	background: none;
}



/* -----------------------------------------------------------------
balises pour les commentaires
-------------------------------------------------------------------*/

/* ---------- balises spécifiques : formulaire saisie commentaire ---------- */

#comment-add textarea {
	margin-top: 1em;
	width: 99%;
	height: 8em;
}

#comment-add p {
	text-align: right;
}

/* ---------- balises g�n�riques ---------- */
dl.comment {
	position: relative;
	margin: 2em 0 1em 0;
	padding: 1em 60px 1em 1em;
	min-height: 10em;
	text-align: justify;
	border-radius: 4px;
	background: var(--block-color-bg) url(design/corner_small.png) bottom right no-repeat;
}

dl.comment dt {
	margin: 0;
	padding: 0;
	font-weight: bold;
	line-height: 160%;
	text-align: left;
}

dl.comment dd {
	margin: 0.4em 0;
	padding: 0;
	padding: 0;
}

dl.comment dd.membre {
	line-height: 160%;
	margin-bottom: 0.5em;
}

/*
dl.comment dd.membre strong {
	display: block
}
*/

dl.comment img.avatar {
	position: absolute;
	right: 1em;
	top: 1em;
	width: 40px;
	height: 40px;
	border: 1px solid var(--block-color-bg);
}

/* ---------- balises sp�cifiques : commentaires objet ---------- */

#contenuObjetCommentaires dl.comment dt {
	display: none;
}

/* ---------- balises sp�cifiques : pages tous les commentaires + pages membres---------- */

#contenuCommentaires dl.comment img.pochette,
#contenuMembreDetail dl.comment img.pochette {
	position: absolute;
	left: 1em;
	top: 1em;
	width: 90px;
	height: 90px;
	border: 1px solid #cccccc;
}

#contenuCommentaires dl.comment {
	padding: 1em 60px 1em 125px;
}

#contenuMembreDetail dl.comment {
	padding: 1em 1em 1em 125px;
}

/* ---------- balises spécifiques : pages forum ---------- */

#contenuForumDocument dl.comment dt {
	display: none;
}

.color-forum-1 {
    padding-left: 0.5em;
    border-left: 0.4em solid #460404;
}

.color-forum-2 {
    padding-left: 0.5em;
    border-left: 0.4em solid #1b2401;
}

.color-forum-3 {
    padding-left: 0.5em;
    border-left: 0.4em solid #012739;
}

.color-forum-4 {
    padding-left: 0.5em;
    border-left: 0.4em solid #483301;
}

.color-forum-5 {
    padding-left: 0.5em;
    border-left: 0.4em solid #330029;
}

.color-forum-6 {
    padding-left: 0.5em;
    border-left: 0.4em solid #421c01;
}

.color-forum-7 {
    padding-left: 0.5em;
    border-left: 0.4em solid #08003e;
}

.color-forum-10 {
    padding-left: 0.5em;
    border-left: 0.4em solid #1e1818;
}

/* --------------------------------------------------
balises spéciales forum de discussion
-----------------------------------------------------*/
#contenuForumTopic p {
	padding-bottom: 5px;
	text-align: justify;
}
#contenuForumPoster p {
	padding-top: 4px;
	padding-bottom: 4px;
}
#contenuForumTopic h4 {
	display: none;
}
#contenuForumTopic .action h4 {
	display: block;
}

.lastPage {
	font-size: 0.8em;
}

.lastPage a {
	color: #bbb;
	border-color: #bbb;
}

.forumDatePost {
	font-size: 0.8em;
	font-family: arial, verdana, helvetica, sans-serif;
}

/* ---------- forum document ---------- */

#contenuForumDocument blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	min-height: 30px;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	background: url(design/quote.gif) no-repeat 0 0;
}
#contenuForumDocument blockquote p {
	margin-left: 85px;
	margin-bottom: 0em;
	padding-bottom: 0;
}
#contenuForumDocument blockquote>p {
	margin-left: 55px;
}

#contenuForumDocument q {
	padding: 0 2px 1px 2px;
	border: 1px solid #bbb;
}

#contenuForumDocument code, #contenuForumDocument pre {
	margin: 1em 3em 1em 3.7em;
	padding: 0 5px;
	border-left: 2px solid #555;
	font-size: 13px;
	color: #477098;
}
#contenuForumDocument pre, #xhtmlZone pre {
	overflow: scroll;
	width: 100%;
}
html>body #contenuForumDocument pre { /* pour IE */
	overflow: auto;
	width: auto;
}


/* --------------------------------------------
Listes simples
-----------------------------------------------*/
ul.simpleList{
	margin: 0 2em 2em 0;
	padding: 0.5em 0.5em 1em 0.5em;
}

ul.simpleList li {
	margin: 0 1em 0 0.5em;
	padding: 2px 0 2px 1em;
    background : transparent url(design/fleche_menu.gif) 0 0.6em no-repeat;
}

ul.simpleList li a {
	padding-bottom: 2px;
}

ul.simpleList li a:hover {
    border-bottom: 1px solid var(--main-link-color);
}

/* ---------------- colonnes ---------------------*/

#contenuMembres ul.simpleList {
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}

/* --------------------------------------------
Listes complexes
-----------------------------------------------*/

ul.nestedList{
	margin-top: 2em;
	padding-bottom: 1em;
	-moz-column-gap: 2em;
	-webkit-column-gap: 2em;
}

ul.nestedList li {
	margin: 0 0 2em 0;
	padding: 1em 0.5em 1em 0.5em;
	border-radius: 4px;
	background: var(--block-color-bg) url(design/corner_small.png) bottom right no-repeat;
	position: relative;
}

ul.nestedList dl {
	min-height: 5em;
}

ul.nestedList dl dt {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: bold;
}

ul.nestedList dl dd {
	margin: 0 1em 0 0.5em;
	padding: 0 0 0 1em;
	line-height: 200%;
    background : transparent url(design/fleche_menu.gif) 0 0.8em no-repeat;
}

ul.nestedList dl dd a {
	padding-bottom: 2px;
	border: none;
}

ul.nestedList dl dd a:hover {
    border-bottom: 1px solid var(--main-link-color);
}

ul.nestedList dl dd span {
	font-size: 0.8em;
}

ul.visual dd {
	display: inline-block;
}

/*
.artistsList {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1px;
}
*/


/* ---------------- colonnes ---------------------*/
/*
#menuArtiste ul.nestedList li {
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}
*/
#contenuAnnuaire ul.nestedList li {
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}
/*
#contenuArtistes ul.nestedList li {
	-moz-column-width: 30em;
	-webkit-column-width: 22em;
}
*/
#contenuStyles ul.nestedList li {
	-moz-column-width: 22em;
	-webkit-column-width: 22em;
}

#contenuStyles ul.nestedList dl {
	min-height: 0em;
}

#contenuPays ul.nestedList li {
	-moz-column-width: 20em;
	-webkit-column-width: 20em;
}

#contenuPays ul.nestedList dl dd {
	background : none;
}

#contenuPDF ul.nestedList li {
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}

#contenuLabel ul.nestedList li { /* page d'un label */
	-moz-column-count: 1;
	-webkit-column-count: 1;
}

#contenuLabels ul.nestedList li { /* liste des labels */
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}

#contenuLiens ul.nestedList li {
	-moz-column-width: 17em;
	-webkit-column-width: 17em;
}

#contenuForumListe ul.nestedList li { /* liste des forums */
	-moz-column-count: 1;
	-webkit-column-count: 1;
}

#contenuMembreDetail ul.nestedList li { /* Page d'un membre */
	-moz-column-count: 1;
	-webkit-column-count: 1;
}

#contenuObjetTags ul.nestedList li { /* Liste des tags */
	-moz-column-count: 1;
	-webkit-column-count: 1;
}

/* --------------------------------------------
Listes d'objets avec pochettes
-----------------------------------------------*/

ul.objectList dl {
	position: relative;
	margin: 1em 0 1em 0;
	padding: 0.2em 1em 0.2em 95px;
	min-height: 85px;
	border-radius: 4px;
	background: var(--block-color-bg) url(design/corner_small.png) bottom right no-repeat;
}

ul.objectList dt {
	margin: 0;
	padding: 0;
}

ul.objectList dt a {
	font-weight: bold;
}

ul.objectList dd {
	margin: 0.4em 0;
	padding: 0;
}

ul.objectList img {
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	width: 75px;
	height: 75px;
	border: 1px solid #cccccc;
}

ul.objectList img.avatar {
	position: static;
	width: 20px;
	height: 20px;
	border: 1px solid var(--block-color-bg);
	margin-right: 0.5em;
	vertical-align: middle;
}

/* ----------------------------------------------
barres navigation page par page
-------------------------------------------------*/
.barre {
	margin: 2em;
	font-family: arial;
	text-align: right;
	border: 1px solid transparent;
}
.barre ul {
	padding: 10px 20px 30px 20px;
	float: right;
}
.barre p {
	float: right;
}
.barre li a{
	display: block;
	padding: 2px 6px;
	color: var(--main-link-color);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: 1px dotted var(--main-link-color);
}
.barre li {
	list-style: none;
	float: left;
	margin-left: 4px;
	font-weight: bold;
}
.barre li.barreIndex {
	padding: 2px 6px;
	color: #eee;
	background: var(--main-form-color-bg);
	border: 1px solid var(--main-form-color-bg);
	text-decoration: none;
}
.barre li:hover a {
	color: #eee;
	background: var(--main-form-color-bg);
	border: 1px solid var(--main-form-color-bg);
	text-decoration: none;
}


/* -------------------------------
Bloc : Vous êtes ici
----------------------------------*/
#vousEtesIciParents {
	margin-top: 2em;
	text-align: left;
}
#vousEtesIciParents h2 {
	display: none;
}
#vousEtesIciParents p {
	margin-right: 7px;
	padding: 3px 0.5em;
	background: transparent;
	border-left: 20px solid var(--main-link-color);
	text-align: left;
}
#vousEtesIciEnfants {
	margin: 0 0 3.2em 0;
}

#vousEtesIciEnfants ul.liste1 {
	padding: 0 5px;
	border-left: 2px solid #555;
}


/* -------------------------------
Balises de formatage des documents
----------------------------------*/
#contenuDocument #documentTitre {
}

#contenuDocument p.auteur {
	margin: 1em 0 1em 0;
	padding: 0.3em 0.5em;
	text-align: right;
	background: var(--block-color-bg);
}
#contenuDocument p.chapeau {
	margin: 0.5em 0 1em 0;
	letter-spacing: 2px;
	line-height: 160%;
}
#contenuDocument p.motscles {
	margin: 20px 0 0 0;
	padding: 2px 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
#contenuDocument p.maj {
	margin: 4em 0 0 0;
	padding: 1em 0 0 0;
	border-top: 1px solid #444;
}

#contenuDocument p, #xhtmlZone p {
	margin: 0 0 12px 0;
	line-height: 160%;
}

#contenuDocument .footnotes, #xhtmlZone .footnotes {
	padding-top: 10px;
	border-top: 1px solid #dddddd;
}
#contenuDocument .footnotes h4, #xhtmlZone .footnotes h4 {
	display: none;
}
#contenuDocument .footnotes p, #xhtmlZone .footnotes p {
	margin: 0;
}

#contenuDocument blockquote, #xhtmlZone blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	min-height: 30px;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	background: url(design/quote.gif) no-repeat 0 0;
}
#contenuDocument blockquote p, #xhtmlZone blockquote p {
	margin-left: 85px;
	margin-bottom: 0em;
	padding-bottom: 0;
}
#contenuDocument blockquote>p, #xhtmlZone blockquote>p {
	margin-left: 55px;
}

#contenuDocument q, #xhtmlZone q {
	padding: 0 2px 1px 2px;
	border: 1px solid #bbb;
}


#contenuDocument ul, #xhtmlZone ul { /* liste classique */
	margin: 0 2em 2em 0;
	padding: 0.5em 0.5em 1em 0.5em;
}
#contenuDocument ul li, #xhtmlZone ul li
 {
	margin: 0 1em 0 0.5em;
	padding: 2px 0 2px 1em;
    background : transparent url(design/fleche_menu.gif) 0 0.6em no-repeat;
}

#contenuDocument ul li a, #xhtmlZone ul li a {
	padding-bottom: 2px;
}

#contenuDocument ol, #xhtmlZone ol { /* liste numrote */
	margin: 0 2em 0 2em;
	padding: 0 5px;
	list-style-position: inside;
}
#contenuDocument ol li, #xhtmlZone ol li {
	margin: 6px 0;
	padding: 0;
	line-height: 12px;
}
#contenuDocument ol ul, #xhtmlZone ol ul {/* liste classique  l'intrieur d'une liste numrote */
 	margin: 0 2em 0 2em;
	padding: 0 5px;
}
#contenuDocument ol ul li, #xhtmlZone ol ul li {
	margin: 6px 0;
	padding: 0 0 0 10px;
	line-height: 12px;
    background : transparent url(design/fleche_menu.gif) left center no-repeat;
}

#contenuDocument code, #contenuDocument pre, #xhtmlZone code, #xhtmlZone pre {
	margin: 1em 3em 1em 3.7em;
	padding: 0 5px;
	border-left: 2px solid #555;
	font-size: 13px;
	color: #477098;
}
#contenuDocument pre, #xhtmlZone pre {
	overflow: scroll;
	width: 100%;
}
html>body #contenuDocument pre, html>body #xhtmlZone pre { /* pour IE */
	overflow: auto;
	width: auto;
}

#contenuDocument a[hreflang]:after {
content: "\0000a0[" attr(hreflang) "]";
color : #888;
font-size: 10px;
}


/* -------------------------------
Listes de documents
----------------------------------*/
#contenuDocumentsListe .blocItemDocument {
	margin: 3em 0;
	padding: 0.5em 1em;
	border-radius: 4px;
	background: var(--block-color-bg) url(design/corner.png) bottom right no-repeat;
}

#contenuDocumentsListe .blocItemDocument p {
	padding: 0.3em 0;
}

#contenuDocumentsListe .blocItemDocument h2{
	margin: 0.5em 0;
	padding :0;
}

#contenuDocumentsListe .blocItemDocument p.resume {
	border-top: 1px solid #333;
	line-height: 180%;
}

#contenuDocumentsListe .blocItemDocument p.lien {
	text-align: right;
}

/* -------------------------------
Popup nouveau message
----------------------------------*/

#modal-box-filter
{
	position:fixed;
	_position: absolute; /* bug position ie */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	/*background-color: red;*/
	z-index:99;
	opacity:0.8;
	filter: alpha(opacity=80);
}

#modal-box
{
	position:fixed;
	_position: absolute; /* bug position ie */
	left: 50%;
	top: 50%;
	width: 30em;
	z-index: 100;
	margin-top: -6em; /* moiti� de la hauteur */
	margin-left: -15em; /* moiti� de la largeur */
	border: 3px solid var(--main-link-color);
	border-radius: 8px;
	background: var(--main-color-bg);
	/*cursor: pointer;*/
	text-align: center;
}

#modal-box h2 {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--main-link-color);
	background: var(--main-link-color);
	color: #000;
}

#modal-box p {
	margin: 1em;
	padding: 0.5em;
	font-size: 1em;
}

#modal-box p.fermer {
	margin: 0;
	padding: 0.5em 0;
	text-align: center;
	border-top: 1px solid var(--main-link-color);
	background: var(--main-link-color);
	color: #000;
	font-weight: bold;
}

#modal-box p.fermer a {
	color: #000;
}


/* -------------------------------
Sélecteur de chroniques
----------------------------------*/
#selecteur {
	width: 220px;
	float: right;
	margin-top: 2.5em;
	margin-left: 20px;
}

#selecteurResultats {
	margin-right: 240px;
}

#selecteurResultats .barre p {
	float: none;
}

#selecteurResultats dd {
	line-height: 120%;
}

#selecteurResultats h3 {
	/*margin-right: 240px;*/
}

#selecteur ul.columns {
	-moz-column-count: 2;
	-webkit-column-count: 2;
}

#selecteur li {
	font-size:11px;
}

/* -------------------------------
Annonces google
----------------------------------*/
#google {
	margin-left: 15px;
}

/* -------------------------------
Accès membre
----------------------------------*/
#accesMembre form {
	margin: 1em 0 0 0;
	padding: 1em;
	border-radius: 4px;
	background-color: var(--block-color-bg);
}

#accesMembre ul {
	margin: 0;
}

#accesMembre table {
	margin: 0;
	padding: 0;
}

#accesMembre td {
	border: none;
}

/* -------------------------------
Droits accès insuffisants
----------------------------------*/

.avertissement {
	background : url(design/access.png) 1em 1.3em no-repeat;
	min-height: 70px;
}

.avertissement p {
	margin-left: 70px;
}

/* -------------------------------
News
----------------------------------*/

.nouveau {
	color: #bbb;
	font-weight : bold;
}

/* ------------------------------------------
Home mosaique
(écrase le comportement objectList classique)
---------------------------------------------*/

#homeNews ul.objectList {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	width: 100%;
}

#homeNews ul.objectList li {
	position: relative;
	float: left;
	margin: 5px 5px 0 0;
	padding: 0;
	background : none;
}

#homeNews ul.objectList dl {
	margin: 0;
	padding: 0;
	width: 87px;
	height: 87px;
	background-image: none;
}

ul.objectList dd.lastItemCover img
{
	margin: 5px;
	padding: 0;
	left: 0;
	top: 0;
	width: 75px;
	height: 75px;
}

#homeNews ul.objectList dt, dd.lastItemPost {
	display: none;
}


#contenu #homeNews ul.objectList li:hover {
	z-index: 90;
}

#contenu #homeNews ul.objectList li:hover dt {
	display: block;
	position: absolute;
	left: 101px;
	bottom: 70px;
	z-index: 300;
	width: 350px;
	background: transparent url(design/opacity-80.png) repeat;
	font-weight: normal;
	padding: 5px 7px;
	border-top: 2px solid #222222;
	border-right: 2px solid #222222;
	border-left: 2px solid #222222;
	border-radius: 4px 4px 0 0;
}

#contenu #homeNews ul.objectList li:hover dd.lastItemPost {
	display: block;
	position: absolute;
	left: 101px;
	top: 13px;
	z-index: 300;
	background: transparent url(design/opacity-80.png) repeat;
	width: 350px;
	padding: 0 7px 5px 7px;
	border-bottom: 2px solid #222222;
	border-right: 2px solid #222222;
	border-left: 2px solid #222222;
	border-radius: 0 0 4px 4px;
	font-size: 0.85em;
}


/* ------------------------------------------
Tags web 2.0 sur les disques chroniqués
---------------------------------------------*/

#contenuObjetTags dl.comment dt {
	display: none;
}


ul.tagcloud {
	position: relative;
	margin: 0;
	padding: 0 60px 1em 0;
	min-height: 3em;
	text-align: justify;
	border-radius: 4px;
	background-color: var(--block-color-bg);
	list-style-type: none;
}

ul.tagcloud li {
	display: inline-block;
	margin-right: 2em;
	padding: 0.3em 0;
	line-height: 3em;
}

ul.tagcloud li:last-child:after {
	content: "";
}

ul.tagcloud .count {
	font-size: 0.875em;
	line-height: 1.714em;
	color: #888;
}


/* ------------------------------------------
Geolocalisation
---------------------------------------------*/
#map {
 width: 99%;
 height: 500px;
}
#map div.olPopup {
	width: 350px !important;
	height: 170px !important;
	background-color: transparent !important;
}
#map div.olPopup div {
	background-color: transparent !important;
}

#map div.olPopup span {
	display: none !important; /* masque tous les span inutiles */
}

#map div.olPopupContent {
	padding: 0.7em;
	width: 300px !important;
	height: 150px !important;
	background: transparent url(design/opacity-80.png) repeat !important;
	border: 1px solid #000;
	border-radius: 4px;
}
#map div.olPopupContent h2 {
	margin-top: 0;
}

#map div.olPopupContent p {
	line-height: 145%;
}


/* -----------------------------
Derniers votes
--------------------------------*/

#derniers-votes ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#derniers-votes li {
	display: flex;
}

#derniers-votes img {
	margin-right: 0.8em;
	width: 65px;
	height: 65px;
	border: 1px solid #cccccc;
}

#derniers-votes a {
	border-bottom: none;
}

#derniers-votes p {
	line-height: 140%;
}

.dernier-vote-objet {
	font-weight: bold;
}

.dernier-vote-membre {
	display: inline-block;
	font-size: 90%;
}
.dernier-vote-heure {
	/*display: inline-block;*/
	font-size: 90%;
}


/* -----------------------------
Playlist list
--------------------------------*/
.playlist-list-item {
    display: flex;
    justify-content: flex-start;
}

.playlist-list-item-playlist-name {
    order: 2;
    flex-grow: 2;
}

.playlist-list-item-playlist-author {
    order: 3;
}

.playlist-list-item-playlist-visibility {
    order: 1;
    flex-shrink: 1;
    flex-basis: 6em;
    font-size: 0.8em;
}

/* -----------------------------
Playlist add form
--------------------------------*/

#playlist-add {
    display: flex;
}

#playlist-add form {
    flex-grow: 2;
    margin-left: 1em;
}

#playlist-add textarea,
#playlist-delete textarea {
	width: 100%;
	height: 200px;
}

#playlist-name {
    width: 100%;
    color: var(--main-form-color);
}

#new-playlist {
    width: 100%;
}

#playlist-submit {
    text-align: right;
}
/* -----------------------------
Footer
--------------------------------*/

#footer {
	position: relative;
	z-index: 60;
	clear: both;
	margin: 0;
	padding: 0;
	font: normal 1em verdana, tahoma, arial, helvetica, sans-serif;
	border-top: 1px solid #333;
	background : var(--footer-bg) top right no-repeat;
}


/* -----------------------------
Footer menu
--------------------------------*/

#footer-menu {
	overflow: hidden;
	padding: 0;
	background-color: transparent;
	line-height: 1.6;
	background: transparent var(--footer-opacity) repeat;
}

#footer-menu h2 {
	position: fixed;
	z-index: 2;
	bottom: 55px;
	left: 12px;
	padding: 0;
	margin: 0;
	background : #000 url(design/menu_principal_2.png) top right no-repeat;
	border: 1px solid #333;
	-moz-border-radius: 4px 0 0 4px;
	letter-spacing: 3px;
	color: transparent;
	cursor: default;
	width: 29px;
	height: 128px;
	text-indent: -9000px;
}

#footer-menu ul {
	display: none;
}

#footer-menu li, #footer-menu dl, #footer-menu dt, #footer-menu dd {
	margin: 0;
	padding: 0;
}

#footer-menu a {
	color: var(--main-color);
	text-decoration: none;
	border: none;
}

#footer-menu a:hover {
	border-bottom: 1px solid #bbb;
}

#footer-menu li {
    vertical-align: top;
	display: inline-block;
	margin: 0 1em 1em 1em;
	height: 10em;
}

#footer-menu dt {
	font-weight: bold;
	color: var(--footer-menu-title-color);
}

#footer-menu dd.rss {
	background : url(design/rss.png) center left no-repeat transparent;
}

#footer-menu dd.rss a {
	padding-left: 18px;
}

#footer:hover #footer-menu
{
	position: fixed;
	z-index: 1;
	bottom: 0;
	left: 30px;
	display: block;
	padding : 0;
	background-image: none;
}

#footer:hover #footer-menu ul
{
	position: relative;
	display: block;
	margin: 0 40px 0 10px;
	padding: 1em 0 1em 0;
	border: 1px solid #333;
	background : var(--footer-bg) top right no-repeat;
	overflow: visible;
	height: 20em;
}

/* -----------------------------
Footer infos
--------------------------------*/

#footer-infos {
	position: relative;
	padding: 0.5em 1em;
	color: #888;
	background: transparent var(--footer-opacity) repeat;
}

#footer-infos p#timer {
	position: absolute;
	right: 1em;
	top: 0.5rem;
}

#footer-infos p#disclaimer {
	margin-top: 1rem;
	font-size: 90%;
}
#search-box {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	border-radius: 4px;
	background: var(--block-color-bg) var(--search-bg) repeat-y scroll center top;
}

#search-target {
	text-align: left;
	font-size: 0.9em;
}

#search-box h3
{
	/*display: none;*/
	position: relative;
    margin: 0;
    padding:2px 5px;
	border: none;
	color: #bbb;
}

#search-box input {
	margin: 0;
	padding: 2px 3px;
	vertical-align: text-top;
}

#search-box p {
	margin: 0.7ex;
	padding: 0;
}

#search-box ul {
	margin: 0.7ex 5ex;
	padding: 0;
}

#search-box li {
	margin: 0.2ex;
	padding: 0;
}

#search-box #search-list-content {
	border-top: 1px dotted #444;
}

#search-box #select-mode {
    display: none;
}

#search-box input#r {
	width: 70%;
	padding: 2px 3px;
	background-color: var(--main-form-color-bg);
	color: var(--main-form-color);
	border: 1px solid var(--main-form-border-color);
	border-radius: 4px;
}

#search-box input#r:focus {
	background-color: var(--main-form-focus-color-bg);
}

#search-box #search-btn {
	border: none;
	-moz-border-radius: 6px;
	background-color: var(--main-form-color-bg);
	color: var(--main-form-color);
	border: 1px solid var(--main-form-border-color);
	cursor: pointer;
	font-weight: bold;
	padding: 1px 3px;
}

#search-box #search-btn[disabled] {
	border: none;
	color: #444;
	cursor: default;
}

#search-box #search-close {
	position: absolute;
	right: 0.5ex;
}

#search-box #search-close a:hover {
	font-size: 120%;
	font-weight: bold;
	text-decoration: none;
}

#search-box #search-list-content {
	padding-bottom: 1em;
}

#search-box #search-list-info {
	margin-right: 3em;
	text-align: left;
}

#search-box #search-img {
	width: 14px;
	height: 14px;
	position: relative;
	top: 0.5ex;
	left: 1ex;
}
/* -----------------------------
Navigation principale
--------------------------------*/

#nav-container {
	position: absolute;
	top: 98px;
	overflow: hidden;
	font: bold 1em helvetica, arial, verdana, tahoma, helvetica, sans-serif;
	letter-spacing: 1px;
	margin: 3.6em 0 0 0;
	background: transparent var(--main-signboard-opacity) repeat;
	text-align: right;
	width: 100%;
	height: 80px;
}

#nav-container h2
{
	display: none;
}

#nav-container ul {
	float: right;
	height: 4.5em;
	padding: 1em 20px 1em 20px;
	list-style: none;
}

#nav-container ul li {
	float: left;
	margin: 3px 0 0 1em;
}

#nav-container ul li a {
	float: left;
	padding: 0;
	text-decoration: none;
	border: none;
	border-bottom: 3px solid var(--main-link-color);
	color: var(--main-menu-color);
}

#nav-container ul li a.current {
	border-bottom: 3px solid var(--main-menu-focus-color);
}

#nav-container ul li a span {
	/*float: left;*/
	display: block;
	padding: 3px 0 3px 0;
}

#nav-container ul li.current span {
	/*float: left;*/
	padding: 3px 0 3px 0;
}

#nav-container ul li a:hover,
#nav-container ul li a:focus {
	border-bottom: 3px solid var(--main-menu-focus-color);
}

#nav-container span.nbItems {
	font-family: verdana, arial, tahoma, helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: normal;
}



/* -----------------------------
Onglets internes
--------------------------------*/

#content-navlist {
	margin: 30px 0;
	padding: 3px 20px 3px 30px;
	font: bold 12px arial, verdana, tahoma, helvetica, sans-serif;
	text-align: right;
}

#content-navlist li {
	list-style: none;
	margin: 0;
	display: inline;
}

#content-navlist li a {
	padding: 0.3em 0.5em;
	_padding: 0.2em 0.5em 0.25em 0.5em; /* IE hack : bug d'affichage*/
	margin: 0px;
	border: 1px solid #222;
	background: #111;
	text-decoration: none;
	-moz-border-radius: 4px;
}

#content-navlist li a:link, #content-navlist li a:visited {
	color: #aaa;
}

#content-navlist li a:hover {
	background: #222;
	color: #fff;
	border: 1px solid #222;
}

#content-navlist li a.current {
	background: #FF6701;
	color: #fff;
	border: 1px solid #FF6701;
}
/* -----------------------------
Effet flip sur la mozaïque
des pochettes
--------------------------------*/

/* Static state */
.flip {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
    margin: 0.4em;
    vertical-align: top;
}

.flip img {
    position: absolute;
}

.flip1 {
    /* overall animation container */
    transition-property: height;
    transition-duration: .5s;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.flip2	{
    /* full content during animation *can* go here */
}

.flip3	{
    /* animated, "folded" block */
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    transition-property: all;
    transition-duration: .5s;
    transform: rotateX(-90deg);
    transform-origin: top;
}

.flip:hover .flip3 {
    /* Hover states to trigger animations */
    transform: rotateX(0deg);
}

.size-125 {
    width: 125px;
    height: 125px;
}

/* Flip font styles */
.flip h1 {
    margin: 0;
    padding: 0.5em;
    font-weight: normal;
    font-size: 0.7em;
}

.flip p {
    margin: 0.2em 0;
    padding: 0.5em;
    font-size: 0.5em;
}

.flip a {
    color: #fff;
    text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li
{
	margin: 0;
	padding: 0;
	font-size: 1em;
}/* -------------------------
formulaires entête et pied
----------------------------*/
#titreForm, #piedForm {
}
#titreForm {
}
#piedForm {
	margin: 0;
	text-align: right;
}
#piedForm input {
	padding: 0.5em 1em;
	font-family: Arial, Helvetica, sans-serif;
	background: var(--main-form-color-bg);
	font-weight: bold;
}

#piedForm input:hover {
	background: var(--main-form-focus-color-bg);
}

/* -------------------------
formulaires corps - format 1
----------------------------*/
#corpForm {
	margin: 0;
	color: black;
}
#corpForm fieldset {
	margin: 1.5em 0;
	_margin: 0;
	padding: 1em;
	border: 1px solid var(--main-form-fieldset-color-bg);
	-moz-border-radius: 4px;
	background: var(--main-form-fieldset-color-bg) url(design/corner.png) bottom right no-repeat;
	color: var(--main-form-fieldset-color);
}
#corpForm legend {
	margin-left: 2em;
	padding: 0.5em 1em;
	background: var(--main-form-fieldset-color-bg);
	border: 1px solid var(--main-form-fieldset-color-bg);
	-moz-border-radius: 6px;
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	color: var(--main-form-fielset-legend-color);
	font-weight: bold;
}
#corpForm p {
	padding: .2em 0;
	margin: 0 0 .2em 0;
}
#corpForm li {
	margin: .5em 0;
}
#corpForm ul {
	margin: 0 0 1.5em 0;
}
#corpForm fieldset label {
	float: left;
	width: 20%;
	text-align: right;
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	color: var(--main-form-fieldset-color);
}

#corpForm .richText {
	margin-left: 20.7%;
	width: 60%;
	_margin-left: 0;
	_width: 100%;
	_padding-top: 10px;
}
#corpForm textarea {
	width: 70%;
	_width: 80%;
}
#corpForm label:hover, #piedForm input {
	cursor: pointer;
}
#corpForm label.oblig {
}
#corpForm p.oblig {
	margin: 0 0 1.5em 0;
}
#corpForm .legende {
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
}
#corpForm a.aide {
	text-decoration: none;
}
#corpForm a.aide img {
	margin: 0;
	padding: 0;
	border: 0;
}
#corpForm a.aide:hover {
	cursor: help;
}

#corpForm .alerteTop {
	margin: 1.3em 0 2em 0;
	background: red;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
#corpForm .alerte {
	border: 1px solid red;
}
#corpForm .messageAlerte {
	display: block;
	margin: 0 0 .3em .3em;
	padding-left: 2em;
	color: red;
	font-weight: bold;
	background: url('_d/icon_alert.gif') no-repeat left center;
}


/* --------------------------------------------------- */
/* ----- Checkboxes, Radios buttons and switches ----- */
/* --------------------------------------------------- */

.switch {
    position : relative ;
    display : inline-block;
    width : 40px;
    height : 20px;
    background-color: #e6b367;
    border-radius: 20px;
    border: 1px solid #c69841;
    vertical-align: bottom;
}
.switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #eeeeee;
    top: 2px;
    left: 3px;
    transition: 0.5s;
}
.checkbox:checked + .switch::after {
    left : 21px;
}
.checkbox:checked + .switch {
    background-color: #1e1e1e;
    border: 1px solid #bbbbbb;
}
.checkbox {
    display : none;
}