body
{
/*Image de fond*/
background:url("../image/default/fond_gris.png");
}

@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */
/*Spécificité du CSS3 qui permet le chargement de la police dans le navigateur*/   
   font-family: 'riesling-webfont';
    src: url('../police/riesling-webfont.eot');
    src: url('../police/riesling-webfont.eot?#iefix') format('embedded-opentype'),
         url('../police/riesling-webfont.woff') format('woff'),
         url('../police/riesling-webfont.ttf') format('truetype'),
         url('../police/riesling-webfont.svg#LearningCurveProRegular') format('svg');
}

nav
{
margin-top:-9px;
background:green;
/*vertical-align: top;*/
background-color:green;/*Couleur de fond*/
/*padding-bottom:0px;*/
}

header
{
background-color:#6dffbf;/*Couleur de fond*/
height:375px;/*Hauteur*/
width:100%;/*Largeur*/
min-width:600px;/*Largeur minimum*/
}

 .titre/* Utilisation de la police qu'on vient de définir sur la class titre*/
{
font-size:5em;/*taille de la police*/
letter-spacing:0.2em;/*espace entre les lettres*/
font-family: 'riesling-webfont', Arial, serif;/*Calligraphie, police*/
overflow: hidden;/*cacher le texte en cas de débordement*/
width:40%;
min-width:640px;
height:18%;
min-height:69px;
margin:auto;
padding-right:30%;
text-align:left;
color:red;
background-color:#000000;
opacity:0.4;
}

.baniere
{
background: url("../image/default/baniere.png") no-repeat bottom, url("../image/default/carreau.jpg");
height:250px;
width:70%;
min-width:1000px;
border-radius:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: solid 1px #777;
box-shadow: 6px 6px 3px #777;
-moz-box-shadow: 6px 6px 3px #777;
-webkit-box-shadow: 6px 6px 3px #777;
margin:auto;
opacity:1;
}

h1
{
text-align:center;
}

.principal
{
text-align:justify;
padding:20px 20px 20px 20px;
margin-left:10px;
margin-right:10px;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border: solid 1px black;
box-shadow: 6px 6px 3px black;
-moz-box-shadow: 6px 6px 3px black;
-webkit-box-shadow: 6px 6px 3px black;
}

section
{
margin-top:1px;
margin-left:0px;
background-color:#4f7eff;
background-position:center;
background-attachment:fixed;
opacity:0.4;
/*height:400px;*/
width:100%;
}

article
{
overflow:hidden;
display:inline-block;
background-color:#6dffbf;
background-position:center;
background-attachment:fixed;
vertical-align: top;
opacity:0.4;
/*height:400px;*/
width:59%;
min-width:300;
}

aside
{
overflow:hidden;
display:inline-block;
background-color:#6dffbf;
background-position:right;
background-attachment:fixed;
vertical-align: top;
padding-top:0px;
opacity:0.4;
/*height:400px;*/
width:40%;
min-width:150;
}

footer
{
/*background-color:#d6a1ff;*/
background-position:bottom;
border-top:1px solid #747474;
margin-left:-6px;
padding-right:14px;
height:240px;
width:100%;
min-width:600
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
background-color: #fff;
background-image: -moz-linear-gradient(#747474, #fff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#747474), to(#fff));
background-image: -webkit-linear-gradient(#747474, #fff);
background-image: -o-linear-gradient(#747474, #fff);
background-image: -ms-linear-gradient(#747474, #fff);
background-image: linear-gradient(#747474, #fff);
}

#mask
{
width:100%;
padding-left:13px;
margin-top:-10px;
margin-bottom:-50px;
height:200px;
background-color: #fff;
background-image: -moz-linear-gradient(#9a9a9a, #fff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#fff));
background-image: -webkit-linear-gradient(#9a9a9a, #fff);
background-image: -o-linear-gradient(#9a9a9a,#fff);
background-image: -ms-linear-gradient(#9a9a9a, #fff);
background-image: linear-gradient(#9a9a9a, #fff);
}

/*Menu déroulant*/
#menuNiv1, .menuNiv2 ,.menuNiv3
 {/*supression des puces*/
margin: 0;
padding: 0;
list-style: none;
}

/*Largeur,hauteur,arrière fond,bordure arrondi, ombre porté du menu*/
#menuNiv1 
{
width: 100%;
height:45px;
/*min-width:867px;*/
/*margin: 1px auto;*/
/*overflow:hidden;*/
margin-left:-9px;
padding-right:14px;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 6px 6px 1px #777;
-webkit-box-shadow: 6px 6px 1px #777;
box-shadow: 6px 6px 1px #777;
}

/*Annulation des flotements*/
#menuNiv1:before,#menuNiv1:after {
content: "";
display: table;
overflow:hidden;
}

#menuNiv1:after 
{
clear: both;
}

#menuNiv1 
{
zoom:1;
} 

#menuNiv1 li 
{
 float: left;
 border-right: 1px solid #222;
 -moz-box-shadow: 1px 0 0 #444;
 -webkit-box-shadow: 1px 0 0 #444;
 box-shadow: 1px 0 0 #444;
 position: relative;
}

#menuNiv1 a 
{
 float: left;
 padding: 12px 30px;
 color: #999;
 text-transform: uppercase;
 font: bold 1.1em 'riesling-webfont',Helvetica, Arial, serif;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menuNiv1 li:hover > a 
{
color: #ffffff;
}

*html #menuNiv1 li a:hover 
{ /* IE6 only */
color: #ffffff;
}

#menuNiv1 .menuNiv2,#menuNiv1 .menuNiv3
 {
position:absolute;
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 1;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
overflow:visible;
}

#menuNiv1 li:hover > .menuNiv2 
{
opacity: 1;
visibility: visible;
margin:0px;
margin-top:10px;
z-index: 9999;
}

#menuNiv1 .menuNiv2 li:hover > .menuNiv3 
{
opacity: 1;
visibility: visible;
margin:0px;
z-index: 9999;
}

#menuNiv1 .menuNiv2 .menuNiv3 
{
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menuNiv1 .menuNiv2 li 
{
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menuNiv1.menuNiv2 li:last-child 
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menuNiv1 .menuNiv2 a 
{
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menuNiv1 .menuNiv2 a:hover 
{
 background-color: #ff6661;
 background-image: -moz-linear-gradient(#e10000,  #ff6661);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e10000), to(#ff6661));
 background-image: -webkit-linear-gradient(#e10000, #ff6661);
 background-image: -o-linear-gradient(#e10000, #ff6661);
 background-image: -ms-linear-gradient(#e10000, #ff6661);
 background-image: linear-gradient(#e10000, #ff6661);
}

#menuNiv1 .menuNiv2 li:first-child > a 
{
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}

#menuNiv1 .menuNiv2 li:first-child > a:after 
{
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menuNiv1 .menuNiv2 .menuNiv3 li:first-child a:after 
{
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menuNiv1 .menuNiv2  li:first-child a:hover:after 
{
border-bottom-color: #e10001;
}

#menuNiv1 .menuNiv2 .menuNiv3 li:first-child a:hover:after 
{
border-right-color: #ff6661;
border-bottom-color: transparent;
}

#menuNiv1 .menuNiv2 li:last-child > a 
{
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

/*Image dans le menu principale*/
#menuImage
{
/*position:absolute;*/
/*margin-left:300px;*/
/*background-position:left;*/
display:inline-block;
min-width:50px;
height:45px;
overflow:hidden;
}
  
#imageHome
{
background:url("../image/default/homeHover.png") no-repeat;
background:url("../image/default/home.png") no-repeat;
margin-top:1px;
margin-left:20px;
height:20px;
}

#imageHome:hover 
{
background:url("../image/default/home.png") no-repeat;
background:url("../image/default/homeHover.png") no-repeat;
}

#imageFace
{
background:url("../image/default/facebookHover.png") no-repeat;
background:url("../image/default/facebook.png") no-repeat;
margin-top:2px;
margin-left:35px;
height:20px;
min-width:0px
}

#imageFace:hover 
{
background:url("../image/default/facebook.png") no-repeat;
background:url("../image/default/facebookHover.png") no-repeat;
}

#imageG
{
background:url("../image/default/google+Hover.png") no-repeat;
background:url("../image/default/google+.png") no-repeat;
margin-top:2px;
margin-left:20px;
height:20px;
min-width:0px
}

#imageG:hover 
{
background:url("../image/default/google+.png") no-repeat;
background:url("../image/default/google+Hover.png") no-repeat;
}

#imageTweet
{
background:url("../image/default/twitterHover.png") no-repeat;
background:url("../image/default/twitter.png") no-repeat;
margin-top:2px;
margin-left:20px;
height:20px;
min-width:0px
}

#imageTweet:hover 
{
background:url("../image/default/twitter.png") no-repeat;
background:url("../image/default/twitterHover.png") no-repeat;
}

#imageRss 
{
background:url("../image/default/rssHover.png") no-repeat;
background:url("../image/default/rss.png") no-repeat;
margin-top:2px;
margin-left:20px;
height:20px;
min-width:0px
}

#imageRss:hover  
{
background:url("../image/default/rss.png") no-repeat;
background:url("../image/default/rssHover.png") no-repeat;
/*display:none;*/
}