/******************************************************************************
*** Global
/*****************************************************************************/
html,body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
/*
body {
background-image: url(../img/background.jpg);
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover;
}
*/
body
{
background-image:url('../img/backgroungDegrade.png');
background-repeat:repeat-x;
background-attachment:fixed;
background-position: top left;
} 

/*
@media only screen and (max-device-width:500px) {
 body {
 font-size:120%;
 }
}
*/

/*
body {
	background-image:url(http://glitterbank.com/bkgrnd/feather.jpg);
	background-position:top left; 
	background-attachment:fixed; 
	background-repeat:repeat;
}
*/

* {
	font-family: "Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
}

p {
	clear: both;
	margin: 6px auto 0;
	padding: 6px;
	background: rgba(250,250,250,0.5);
	-webkit-box-shadow: 0 0 4px #777;
	box-shadow: 0 0 4px #777;
	border: 1px solid #aaa;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.evolutionSite{
	font-family:Times New Roman;
	font-weight:bold;
	color:#000000;
	font-size:10px;
}

/******************************************************************************
*** Encadre Changelog
/*****************************************************************************/
.encadreChangelog{
/*  background-color:#0000ff;*/
/*  color:#ffffff;*/
  font-size:14px;
  text-align:justify;
background-color:#E4EFFF;
border:1px solid #9FC6FF;
padding:5px;
/*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
border-radius:10px 10px;
}

.encadreChangelog h2{
  color:#306F9F;
  font-size:16px;
  margin:1px;
  text-align:left;
  text-decoration:underline;
}

.encadreChangelog u{
  color:#306F9F;
  font-weight:bold;
  text-align:left;
  text-decoration:underline;
}

.encadreChangelog h3{
  color:#ffffff;
  font-size:16px;
  margin:1px;
  text-align:left;
}

.encadreChangelog ul{
  margin-bottom:10px;
  margin-left:16px;
  margin-top:10px;
  padding-left:0;
}

/******************************************************************************
*** Réseaux Sociaux
/*****************************************************************************/
.encadreReseauxSociaux{
  font-size:14px;
  text-align:justify;
background-color:rgba(204, 204, 204, 100);
border:1px solid #AFE0D9;
padding:6px 5px 5px 5px;
margin:10px;
/*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
border-radius:10px 10px;
}

hr{
	background-color:#ffcc66;
	color:#ffcc66;
	height:1px;
}

h1{
  background-color:#0295CE;
  border-bottom:2px solid #0000ff;
  color:#000000;
  font-size:20px;
  margin:4px 6px 2px 6px;
  text-align:center;
-webkit-border-radius: 8px;
border-radius: 8px;
}

h2 {
    color: rgb(0, 0, 255);
    margin: 1px;
    text-align: left;
    font-size: 19px;
    border-bottom: 1px solid rgb(0, 0, 255);
}

#corps {width:100%}

/******************************************************************************
*** Header
/*****************************************************************************/
#header {
background-color:#333333;
border-top:1px solid #383838;
border-bottom:1px solid #444;
padding:0px 0pt;
position: relative;
top: -23px;
}

#header .titre1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
margin: 0;
top: 60px;
font-size: 50px;
color:rgb(255, 255, 255);
-webkit-text-stroke: 1px black;
text-shadow:
	3px 3px 0 #000,
	-1px -1px 0 #000,  
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
}

#header .titre2{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
top: 100px;
font-size: 30px;
-webkit-text-stroke: 1px black;
text-shadow: 0px 0px 30px rgba(0, 0, 255, 1);
}

@media screen and (max-width: 500px) {
#header .titre1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
margin: 0;
top: 30px;
font-size: 40px;
color:rgb(255, 255, 255);
-webkit-text-stroke: 1px black;
text-shadow:
	3px 3px 0 #000,
	-1px -1px 0 #000,  
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
}

#header .titre2{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
top: 100px;
font-size: 22px;
-webkit-text-stroke: 1px black;
text-shadow: 0px 0px 30px rgba(0, 0, 255, 1);
}
}

@media screen and (max-width: 425px) {
#header .titre1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
margin: 0;
top: 30px;
font-size: 30px;
color:rgb(255, 255, 255);
-webkit-text-stroke: 1px black;
text-shadow:
	3px 3px 0 #000,
	-1px -1px 0 #000,  
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
}

#header .titre2{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
top: 100px;
font-size: 18px;
-webkit-text-stroke: 0px black;
text-shadow: 0px 0px 0px rgba(0, 0, 255, 1);
}
}

/******************************************************************************
*** Encadrés
/*****************************************************************************/
.encadre{
margin: 5px;
padding: 5px;
background-color: #fdffba;
border: 2px solid rgb(2,149,206);
/*border: 2px solid #051dff;*/
-moz-border-radius: 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;/*This is the correct shorthand for webkit*/
border-radius: 50px 0px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}

.encadre .titre {
font-size: 16px;
font-weight:bold;
text-align:center;
text-decoration:underline;
}

/******************************************************************************
*** Icones Facebook, twitter, etc...
/*****************************************************************************/
.twitter .labelTwitter{
	visibility: hidden;
	display: none;
}

a:hover > .twitter > .labelTwitter{
	visibility: visible;
	display: block;
}

.facebook .labelFacebook{
	visibility: hidden;
	display: none;
}

a:hover > .facebook > .labelFacebook{
	visibility: visible;
	display: block;
}

.googlePlus .labelGooglePlus{
	visibility: hidden;
	display: none;
}

a:hover > .googlePlus> .labelGooglePlus{
	visibility: visible;
	display: block;
}

.youtube .labelYoutube{
	visibility: hidden;
	display: none;
}

a:hover > .youtube> .labelYoutube{
	visibility: visible;
	display: block;
}

.dailymotion .labelDailymotion{
	visibility: hidden;
	display: none;
}

a:hover > .dailymotion > .labelDailymotion{
	visibility: visible;
	display: block;
}

#header #logo #social .twitter{
			background: #00ACED url(../img/twitter_icon.png) no-repeat;
			right: 5px;
			position: absolute;
			width: 40px;
			height: 35px;
			top: 49px;
			font-size: 20px;
			transition: 350ms ease;}
			#header #logo #social .twitter:hover{
				width: 140px;
				transition: 350ms ease;}


			#header #logo #social .twitter:after{
				content: '';
				background: url(../img/twitter_icon.png) no-repeat;
				height: 40px;
				width: 3px;
				position: absolute;
				background-position-x: -31px;
				right: -3px;}


#header #logo #social .facebook{
			background: #395797 url(../img/fb_icon.png) no-repeat;
			right: 5px;
			position: absolute;
			width: 40px;
			height: 35px;
			top: 6px;
			font-size: 20px;
			transition: 350ms ease;}
			#header #logo #social .facebook:hover{
				width: 140px;
				transition: 350ms ease;}

			#header #logo #social .facebook:after{
				content: '';
				background: url(../img/fb_icon.png) no-repeat;
				height: 40px;
				width: 3px;
				position: absolute;
				background-position-x: -31px;
				right: -3px;}

#header #logo #social .googlePlus{
			background: rgb(215,68,50) url(../img/googlePlus_icon.png) no-repeat;
			right: 5px;
			position: absolute;
			width: 40px;
			height: 35px;
			top: 91px;
			font-size: 20px;
			transition: 350ms ease;}
			#header #logo #social .googlePlus:hover{
				width: 140px;
				transition: 350ms ease;}

			#header #logo #social .googlePlus:after{
				content: '';
				background: url(../img/googlePlus_icon.png) no-repeat;
				height: 40px;
				width: 3px;
				position: absolute;
				background-position-x: -31px;
				right: -3px;}

#header #logo #social .youtube{
			background: #D41D1D url(../img/yt_icon.png) no-repeat;
			right: 5px;
			position: absolute;
			width: 40px;
			height: 35px;
			font-size: 20px;
			top: 133px;
			font-size: 20px;
			transition: 350ms ease;}
			#header #logo #social .youtube:hover{
				width: 140px;
				transition: 350ms ease;}

			#header #logo #social .youtube:after{
				content: '';
				background: url(../img/yt_icon.png) no-repeat;
				height: 40px;
				width: 3px;
				position: absolute;
				background-position-x: -31px;
				right: -3px;}

#header #logo #social .dailymotion{
			background: rgb(0,96,136) url(../img/dailymotion_icon.png) no-repeat;
			right: 5px;
			position: absolute;
			width: 40px;
			height: 35px;
			top: 175px;
			font-size: 20px;
			transition: 350ms ease;}
			#header #logo #social .dailymotion:hover{
				width: 140px;
				transition: 350ms ease;}

			#header #logo #social .dailymotion:after{
				content: '';
				background: url(../img/dailymotion_icon.png) no-repeat;
				height: 40px;
				width: 3px;
				position: absolute;
				background-position-x: -31px;
				right: -3px;}