@font-face {
    font-family: fortunatesdecember;
    src: url('fortunatesdecember.ttf');
}

html{background:#ccc;font:1em "Helvetica Neue",Helvetica,"Trebuchet MS",Arial,Verdana,sans-serif;margin:0px;}

body{margin:0px;}

#page{
	position:relative;
	margin:0 auto;
	padding:0px;
	width:1024px;
	height:100%;
	/* background:#008080 url('../images/minimi.png') no-repeat right top; */
	background:url('../images/minimi.png') no-repeat right top;
}

header,nav,article,section,footer{display:block;}

header{
	float:left;
	width:460px;
	height:300px;
	margin:0px;
	padding:0px;
	background:url('../images/tache.png') no-repeat left top;
}

header h1{
	font-family: fortunatesdecember;
	font-weight:bold;
	font-size:5.0em;
	text-shadow:0px 0px 5px rgba(0,0,0,0.5);
	text-align:right;
	margin:50px;
}

header h1 a{
	color: white;
	text-decoration: none;
}

nav{
	float:left;
	height:300px;
	width:200px;
	/*background: #C0C0C0;*/
}

nav ul:before{

content:"";
position:absolute;
z-index:100;
background:#804;
/* height:100%; */
height:300px;
width:200px;
margin-top:0px;
margin-left:0px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
   -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
        box-shadow:0px 0px 10px rgba(0,0,0,0.75);
}

nav ul{
clear:both;
position:absolute;
list-style:none;
width:200px;
height:300px;
padding:0px 0px;
/* margin-left:130px; */
margin-top:10px;
}

nav ul li{
height:40px;
width:182px;
}
nav ul li:first-of-type{
margin-top:20px;
}
nav ul li a.menuLien{
position:absolute;
z-index:110;
font-weight:bold;
color:white;
font-size:1.8em;
padding-left:22px;
display:block;width:160px;height:40px;
text-decoration:none;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
letter-spacing:-1px;
}
/*la boite qui slide*/
/* nav ul li div{ */
nav ul li div{
width:200px;height:300px;
/* padding:15px;padding-top:0px; */
background:rgba(0,0,0,0.6);
overflow:hidden;
color:white;
position:absolute;top:0px;left:0;z-index:50;
opacity:0;
margin:10px 0px 0px -10px;
padding:0px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
-webkit-transition:1s left,1s width,1s opacity;
   -moz-transition:1s left,1s width,1s opacity;
     -o-transition:1s left,1s width,1s opacity;
        transition:1s left,1s width,1s opacity;
}
nav ul li:hover div{
left:200px;
opacity:1;
width:364px;
margin:10px 0px 0px -10px;
padding:0px;
background:rgba(0,0,0,0.6);
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
}

/*les elements de la boite*/
nav ul li div h5{
margin:10px 20px;
padding:0px;
font-size:2.8em;color:#804;text-align:right;
}
nav ul li div p{
width:304px;
margin:10px 20px 10px 30px;
text-indent:0px;overflow:hidden;font-size:0.8em;font-weight:normal;text-align:justify;
}
nav ul li div p.lien{text-align:right;}
nav ul li div p.lien a{color:#804;}

article:first-of-type {
	border-top:none;
}

article {
	clear:both;
	padding-top:20px;
	margin:20px;
	border-top:dotted #804;
}
article h2{
	color:#804;
}
article h3{
	color:white;
}
article p:first-of-type{
	background:rgba(0,0,0,0.2);
	/* margin:15px; */
	margin:0px 15px;
padding:15px;
color:black;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
		text-align:left;
}

article p{

margin:0px 15px;
padding:0px;
text-align:right;
}

/*ul li:hover div{
     left:182px;opacity:1;width:276px; 
     transition:1s left,1s width,1s opacity;
}
ul li div{
     left:0px;opacity:0;width:152px; 
     transition:1s left,1s width,1s opacity;
}*/

footer {
height:50px;
width:1024px;
background:#804;
margin:0px;
padding:0px;
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
}
footer p{
	height:20px;
text-align:right;
color:white;
text-decoration:none;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
font-weight:bold;
margin:15px;
padding:15px;
}