@media only screen and (max-width: 640px) and (min-width: 400px) 
 {
  body {font-size: 17px;}
  #Container {width: 95%;}
  #Player {position: relative; width: 320px;}
  audio {width: 220px; position: relative; top: 10px;}
  header {position: relative; max-width: 100%;}
 }

@media only screen and (max-width: 800px) and (min-width: 641px) 
 {
  body {font-size: 17px;}
  #Container {width: 95%;}
  #Player {position: relative; width: 550px;}
  audio {width: 420px; position: relative; top: 10px;}
  header {position: relative; max-width: 100%;}
 }


@media only screen and (min-width: 801px) 
 {
  body {font-size: 20px;}
  #Container {width: 1000px;}
  #Player {width: 550px;}
  audio {width: 420px; position: relative; top: 10px;}
  header {position: relative; max-width: 1000px; margin: 0 auto;}
 }

body
 {
  font-family: "times new roman";
  font-weight: normal;
  margin: 0px;
  overflow-y: scroll;
  text-align: justify;
 }

#ContainerTop
 {
  position: relative;
  display: block;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
  top: -40px;
 }

#Container
 {
  margin: 0 auto;
  position: relative;
  top: -35px;
 }

#ContainerAdmin
 {
  width: 1000px;
  margin: 0 auto;
 }

#Note
 {
  position: relative; top: -3px;
 }

#Info
 {
  display: inline-block;
  border: 3px solid #00000F;         
  border-radius: 20px;
  padding: 10px;
  background-color: #FFFACD;
  text-align: center;
 }

#Relief
 {
  font-size: 23px;
  font-weight: bold;
  text-align: center;
  color: #000000;
  text-shadow: 
    0 1px 0 #CCCCCC, 
    0 2px 0 #C9C9C9, 
    0 3px 0 #BBBBBB, 
    0 4px 0 #B9B9B9, 
    0 5px 0 #AAAAAA, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
 }

#Player
 {
  position: relative;
  margin: 0 auto;
  margin-bottom: 10px;
  border: 2px solid #808080;         
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 15px;
  z-index: 1;
  background-image: url("../images/acier.jpg");
  box-shadow: 8px 8px 0px #000000;
 }

#Cover
 {
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: 1px solid #000000;
 }

#Position2 {position: relative; top: -2px;}
#Position3 {position: relative; top: -3px;}
#Position4 {position: relative; top: -4px;}
#Position5 {position: relative; top: -5px;}
#Position6 {position: relative; top: -6px;}

/* ================================ Puces ================================ */
/*                         Mettre la class dans UL                         */
/*                       Mettre la class Puce dans LI                      */
/* ======================================================================= */
.Puce  {padding-left: 1.5em; margin: 0.5em;}
.Puce1 {list-style-image: url("../images/puces/1.png"); padding-left: 1.5em; margin: 0.5em;}
.Puce2 {list-style-image: url("../images/puces/2.png"); padding-left: 1.5em; margin: 0.5em;}
.Puce3 {list-style-image: url("../images/puces/3.png"); padding-left: 1.5em; margin: 0.5em;}
.PuceAnime1 {list-style-image: url("../images/puces/anime1.gif"); padding-left: 1.5em; margin: 0.5em;}
.PuceAnime2 {list-style-image: url("../images/puces/anime2.gif"); padding-left: 1.5em; margin: 0.5em;}
.PuceCheck  {list-style-image: url("../images/puces/check.png"); padding-left: 1.5em; margin: 0.5em;}
.PuceTiret  {list-style-image: url("../images/puces/tiret.png"); padding-left: 1.5em; margin: 0.5em;}

/* ================================ Liens ================================ */
a:visited {font-weight: bold; color: #800080; text-decoration: underline;}
a:link    {font-weight: bold; color: #8A2BE2; text-decoration: underline;}
a:hover   {font-weight: bold; color: #FF0000; text-decoration: none;}

/* ================================ Textes ================================ */
.TitreFieldSet {border-color:#708090; border-style: solid;}
.TitreLegend {font-size: 23px; color: #FF8000; font-weight: bold;}

.TitreBleu   {font-size: 35px; font-weight: bold; color: #0000E1;}
.TitreMarron {font-size: 35px; font-weight: bold; color: #800000;}
.TitreNoir   {font-size: 35px; font-weight: bold; color: #000000;}
.TitreRouge  {font-size: 35px; font-weight: bold; color: #DC143C;}
.TitreVert   {font-size: 35px; font-weight: bold; color: #008000;}

.TitreBleuI   {font-size: 35px; font-style: italic; font-weight: bold; color: #0000E1;}
.TitreMarronI {font-size: 35px; font-style: italic; font-weight: bold; color: #800000;}
.TitreNoirI   {font-size: 35px; font-style: italic; font-weight: bold; color: #000000;}
.TitreRougeI  {font-size: 35px; font-style: italic; font-weight: bold; color: #DC143C;}
.TitreVertI   {font-size: 35px; font-style: italic; font-weight: bold; color: #008000;}

.SousTitreBleu   {font-size: 25px; font-weight: bold; color: #0000E1;}
.SousTitreMarron {font-size: 25px; font-weight: bold; color: #800000;}
.SousTitreNoir   {font-size: 25px; font-weight: bold; color: #000000;}
.SousTitreRouge  {font-size: 25px; font-weight: bold; color: #DC143C;}
.SousTitreVert   {font-size: 25px; font-weight: bold; color: #008000;}

.SousTitreBleuI   {font-size: 25px; font-style: italic; font-weight: bold; color: #0000E1;}
.SousTitreMarronI {font-size: 25px; font-style: italic; font-weight: bold; color: #800000;}
.SousTitreNoirI   {font-size: 25px; font-style: italic; font-weight: bold; color: #000000;}
.SousTitreRougeI  {font-size: 25px; font-style: italic; font-weight: bold; color: #DC143C;}
.SousTitreVertI   {font-size: 25px; font-style: italic; font-weight: bold; color: #008000;}

.Blanc        {font-weight: normal; color: #FFFFFF;}
.BleuAcier    {font-weight: normal; color: #4682B4;}
.BleuArdoise  {font-weight: normal; color: #6A5ACD;}
.BleuClair    {font-weight: normal; color: #4385FF;}
.BleuMarine   {font-weight: normal; color: #000080;}
.BleuViolet   {font-weight: normal; color: #8A2BE2;}
.BriqueFeu    {font-weight: normal; color: #B22222;}
.BrunSable    {font-weight: normal; color: #8B4513;}
.CitronVert   {font-weight: normal; color: #32CD32;}
.Gris         {font-weight: normal; color: #808080;}
.GrisArdoise  {font-weight: normal; color: #708090;}
.Jaune        {font-weight: normal; color: #FFFF80;}
.MagentaFonce {font-weight: normal; color: #8B008B;}
.Marron       {font-weight: normal; color: #804040;}
.Noir         {font-weight: normal; color: #000000;}
.Or           {font-weight: normal; color: #EAC700;}
.Orange       {font-weight: normal; color: #FFA500;}
.Pourpre      {font-weight: normal; color: #800080;}
.Rouge        {font-weight: normal; color: #FF0000;}
.Sarcelle     {font-weight: normal; color: #008080;}
.Tomate       {font-weight: normal; color: #FF6347;}
.VertClair    {font-weight: normal; color: #00D900;}
.VertFonce    {font-weight: normal; color: #006400;}
.VertMarin    {font-weight: normal; color: #20B2AA;}
.VertMoyen    {font-weight: normal; color: #3CB371;}
.Violet       {font-weight: normal; color: #9400D3;}
.VioletClair  {font-weight: normal; color: #EE82EE;}

.BlancG        {font-weight: bold; color: #FFFFFF;}
.BleuAcierG    {font-weight: bold; color: #4682B4;}
.BleuArdoiseG  {font-weight: bold; color: #6A5ACD;}
.BleuClairG    {font-weight: bold; color: #4385FF;}
.BleuMarineG   {font-weight: bold; color: #000080;}
.BleuVioletG   {font-weight: bold; color: #8A2BE2;}
.BriqueFeuG    {font-weight: bold; color: #B22222;}
.BrunSableG    {font-weight: bold; color: #8B4513;}
.CitronVertG   {font-weight: bold; color: #32CD32;}
.GrisG         {font-weight: bold; color: #808080;}
.GrisArdoiseG  {font-weight: bold; color: #708090;}
.JauneG        {font-weight: bold; color: #FFFF80;}
.MagentaFonceG {font-weight: bold; color: #8B008B;}
.MarronG       {font-weight: bold; color: #804040;}
.NoirG         {font-weight: bold; color: #000000;}
.OrG           {font-weight: bold; color: #EAC700;}
.OrangeG       {font-weight: bold; color: #FFA500;}
.PourpreG      {font-weight: bold; color: #800080;}
.RougeG        {font-weight: bold; color: #FF0000;}
.SarcelleG     {font-weight: bold; color: #008080;}
.TomateG       {font-weight: bold; color: #FF6347;}
.VertClairG    {font-weight: bold; color: #00D900;}
.VertFonceG    {font-weight: bold; color: #006400;}
.VertMarinG    {font-weight: bold; color: #20B2AA;}
.VertMoyenG    {font-weight: bold; color: #3CB371;}
.VioletG       {font-weight: bold; color: #9400D3;}
.VioletClairG  {font-weight: bold; color: #EE82EE;}