@import url(http://fonts.googleapis.com/css?family=Rye);
@import url(http://fonts.googleapis.com/css?family=Leckerli+One);
body{
	background:url(images/fond.jpg) center top no-repeat #1f0018;
	background-attachment:fixed;
  background-size: 100% auto;
	color:#b8a2d3; /* #D299FF; */
	padding:0;
	margin:0;
	font-family:Georgia, serif;
  font-size:16px;
}
h1, h2{
	color:#ffcf8d; /* #66bde5; */
	font-family: 'Leckerli One', cursive;
	font-weight:normal;
}
h1{
	margin-top:0;
}
h2{
	margin-left:2em;
	margin-bottom:0;
}
a{
	text-decoration:none;
}
a img{
  border:0px;
}
.fond, .grillage{
	padding:0;
	margin:0;
	width:100%;
	height:200%;
	position:absolute;
	left:0px;
	right:0px;
}
.grillage{
	background:url(images/grillage.gif) repeat;
	background-attachment:fixed;
	opacity:0.2;
	filter: alpha(opacity = 20);
	z-index:-1;
}
.fond{
  background: #bb0095; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #bb0095 0%, #020001 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#bb0095), color-stop(100%,#020001)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #bb0095 0%,#020001 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #bb0095 0%,#020001 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #bb0095 0%,#020001 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #bb0095 0%,#020001 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb0095', endColorstr='#020001',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logo, .menuhaut, .menuhaut div{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.logo{
	display:block;
	padding:5px 0px 15px 0px;
}
.menuhaut div{
	text-align:center;
	width:780px;
	margin-top:30px;
	margin-bottom:30px;
}
.menuhaut a{
	font-size:24px;
	font-weight:normal;
	font-family: Rye, cursive;
}
.menuhaut a, .menuhaut a:visited{
	color:#e1a9f2;
}
.menuhaut a:hover{
	color:#e9ccf2;
}
.menuhaut .l{
	background:url(images/Menu-L.gif) no-repeat left;
	height:46px;
}
.menuhaut .r{
	background:url(images/Menu-R.gif) no-repeat right;
	height:46px;
}
.menuhaut ul{
	background:url(images/Menu-BG.gif) repeat-x;
	list-style:none;
	margin:0px 11px;
	height:46px;
	padding:5px 10px;
}
.menuhaut li{
	display:inline;
	padding:10px;
}
.contenu{
  background: rgba(40, 20, 20, 0.6);
  width:850px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  padding:3px;
  z-index:1;
  border-radius:20px;
  text-align:justify;
  padding:10px;
}
div{
	position:relative;
	z-index:10;
}
ul{
  list-style-image:url(images/minietoile.gif);
}
.contenu a{
  font-weight:bold;
}
.contenu a, .contenu a:visited{
  color:#ff9994; /* #BA132B; #FF493F; */
}
.contenu a:hover{
  color:#ffccc9; /* #BA132B; #FF493F; */
}
p:first-letter{
	font-size:2em;
	font-weight:bold;
	color:#D299FF;
}
.footer{
  border-top:1px solid #A5A;
  margin-top:20px;
  padding:5px 15px 15px 15px;
  font-size:12px;
  color:#A3A;
}
.footer a{
  font-weight:normal;
}
.footer .g{
	float:left;
}
.footer .d{
	float:right;
}

/* Player mp3 en Javascript */
#player{
  cursor:pointer;
  color:#ffe9f3;
  background-image: linear-gradient(to bottom, rgba(142,19,91,0.60) 0%, rgba(94,19,91,0.40) 100%);
  border-radius: 10px;
  padding:5px;
  width:350px;
  margin:1em auto;
}
#player .titre{
  font-family: Rye, cursive;
  font-size: 18px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  padding-left:0.3em;
}
#player .titre:hover{
  color:#ffcf8d;
}
#player .selected{
  color:#E1A5F0;
  border-radius: 6px;
  background-image: linear-gradient(to right, #8C005D 50%,#E1A5F000 100%);
}
#controls{
  padding-top: 8px;
}
.play{
  display:inline-block;
  margin-left:0.8em;
  border-left: 10px solid #ffe9f3;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  width:4px;
}
.play:hover{
  border-left: 10px solid #ffcf8d;
}
.pause{
  display:inline-block;
  margin-left:0.8em;
  box-sizing: border-box;
  border-left: 5px solid #ffe9f3;
  border-right: 5px solid #ffe9f3;
  width: 14px;
  height: 18px;
}
.pause:hover{
  border-left: 5px solid #ffcf8d;
  border-right: 5px solid #ffcf8d;  
}
.hide{
  display:none;
}

#progress{
  margin-left: 10px;
  display: inline-block;
  width: 300px;
  height:16px;
  cursor:pointer;
}
input[type=range] {
  -webkit-appearance: none;     
  padding: 0;                   
  font: inherit;                
  outline: none;
  opacity: .8;
  background: #CCC;             
  box-sizing: border-box;       
  transition: opacity .2s;
  cursor: pointer;  
  
  height: 2em;
  color: #FFF;
  background: transparent;
  background-image: linear-gradient(to right, #EEAAEE, #EEAAEE);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
input[type=range]::-webkit-slider-thumb {
  width: 3px !important;
  height:3px !important;
  margin-top:3px;
  padding:5px;
  border: none;
  border-radius:50%;
}
input[type=range]::-moz-range-thumb {
  width: 3px;
  height:3px;
  padding: 3px;
  border: none;
  border-radius:50%;
}
input[type=range]::-ms-thumb {
  width: 3px !important;
  height:3px !important;
  margin-top:2px;
  padding:5px;
  border: none;
  border-radius:50%;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 100%;
  border: none;
  background-color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: inherit;
  border: none;
  background: currentColor;       
}

input[type=range]::-ms-track {
  height: 100%;
  border: none;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
}
input[type=range]::-ms-thumb {
  height: inherit;
  border: none;
  background: currentColor;
}
input[type=range]::-ms-tooltip {
  display: none;
}
input[type=range]::-ms-fill-lower {
  background: transparent;
}
input[type=range]::-ms-fill-upper {
  background: transparent;
}