@import url(fonts.css);

*
{
    margin:0;
    padding:0;
}
body
{
    background-color:#202020;
    color:white;
    font-family:Kanit;
}
a
{
    color:white;
}
a.lienExterne 
{
  padding-right: 15px;
  background: url("../images/external-link_B10.png") no-repeat scroll right center transparent;
}

div#zonePage
{

}
p
{
    margin-top:0.5em;
}

h2
{
    margin:0.5em 0 0.2em 0;
    text-align:center;
    font-family:Plakette-Serial;
    font-size:250%;
    text-transform: uppercase;
    color:red;
}
h2 span.bande
{
    display:block;
    width:100%;
    height:5px;
    background-color:red;
    position:relative;
    top:-0.3em;
}

/* Entête */

header
{
    padding:1em 2em 1em 2em;
    margin:0 !important;
    border-bottom:2px solid white;
}
header h1
{
    display:block;
    margin:0.2em 0 0.2em 0;
    text-align:center;
    font-family:Plakette-Serial;
    font-size:500%;
    text-transform: uppercase;
    text-align:center;
}
header nav
{}
header nav ul#menuHaut
{
    list-style-type:none;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
header nav ul#menuHaut > li
{
    flex:15%;
}


/* Pied de page */

footer
{
    display:flex;
    background-color:rgba(0, 0, 0, 0.35);
    padding:1em 5em;
}
footer p.mention
{
    flex-grow:2;
    font-size:90%;
    font-weight:200;
}
footer ul
{
    flex-grow:1;
    
    display:flex;
    justify-content:flex-end;
    list-style-type:none;
}
footer ul li
{
    padding:0.5em 1em 0 1em;
}
footer ul li a
{
  font-size:80%;
  font-weight:300;
  text-decoration:none;
  text-transform:uppercase;
}

/* ALBUMS */

div.unAlbum
{
    border:1px solid white;
    border-radius:0.5em;
    padding:1em;
    margin:1.5em 2em;
    overflow:hidden;
}
div#ThePrisoners2
{
    background-color:#2a2b87;
}
div#ThePrisoners
{
    background-color:#e4dfcb;
    color:#231f20;
}

div.unAlbum img.pochette
{
    display:block;
    width:25%;
    float:left;
    margin:0 1em 1em 0;
    border:1px solid black;
    border-radius:0.2em;
}
div.unAlbum ul.trackList
{
    clear:left;
    margin:0 0 0 2em;
    list-style-type:none;
}
div.unAlbum ul.trackList ol.tracks
{
    list-style-type:numeric;
}
div.unAlbum ul.trackList p.uneFace
{
    font-weight:bold;
}
div.unAlbum p.refs
{
    font-style:italic;
    margin-bottom:1em;
}

/* CONCERTS */

div#concerts
{}
div#concerts h3
{
    text-align:center;
    margin:0.5em 0;
    font-family:Plakette-Serial;
    font-size:220%;
    text-transform: uppercase;
}
div#concerts ul
{
    margin:0 0 0 1em;
}
div#concerts ul li
{
    clear:
}
div#concerts ul li p.date,
div#concerts ul li p.salle,
div#concerts ul li p.ville,
div#concerts ul li p.lien
{
    display:inline-block;
    padding-right:0.2em;
}
div#concerts ul li p.date
{
    font-weight:bold;  
    color:red;
}
div#concerts ul li p.salle
{
    font-weight:bold;  
}
div#concerts ul li p.lien a
{
    background-color:red;
    color:white;
    border-radius:0.2em;
    padding:2px 5px;
    text-decoration:none;
}

/* Responsive */

@media only screen and (min-width: 600px) {
  /* For tablets: */
}
@media only screen and (min-width: 768px) {
  /* For desktop: */

  div.contenuZone
  {
      width:30%;
  }

  header p.logo a
  {
      max-width:60%;
      background-size:auto 100%;
  }

  div.unAlbum img.pochette
  {
      width:10%;
  }
}