body {
margin: 0;
background-color: #ffd4e1;
font-family: Calibri;
background-image: url('images/fond.png');
min-width: 760px;
}

h1 {
font-family: Pacifico;
font-size: 50px;
color: #84dcff;
text-shadow: 0 0 10px #a90033;
text-align: center;
}

h2 {
font-family: Calligraffitti;
text-align: center;
margin-top: -35px;
font-size: 32px;
color: #ffffa5;
font-weight: 100;
}

h3 {
	font-family: Calligraffitti;
	font-size: 25px;
    margin-left: 83px;
    color: #0d4b7d;
}

p {
    background-color: #ffffff;
    margin: 50px;
    padding: 10px;
    margin-top: 5px;
    border: #84dcff double 7px;
}

header {
background-color: #ff8baf;
height: 200px;
}

ul {
	list-style: none;
    height: 50px;
}

a {
	text-decoration: none;
	color: #c02554;
}

li a {
	float: left;
	margin-top: 0px !important;
	margin: 20px;
	font-family: Pacifico;
    font-size: 20px;
    text-decoration: none;
    color: #c02554;
}

p img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.dentelle {
background-image: url('images/dentelle.png');
height: 130px;
background-repeat: repeat-x;
    margin-bottom: 44px;
}

.menu {
background-image: url('images/horloge.png');
height:350px;
width:350px;
float: left;
position: relative;
}


#haut {
	position: fixed;
	bottom: 10px;
}

img.spinel {
width: 265px;
height: 559px;
-webkit-transition: 1s; 
transition: 1s;		
}
img.spinel:hover {
 -webkit-transform:rotate(180deg); 
 transform:rotate(180deg);	
}

#tutoriels, #dessins, #accueil, #pokemon, #animalcrossing, #pripara, #aiguille, #paiguille {
position: absolute;
 display: block;
 z-index: 2;
}

img.dessin {
	height: 400px;
}

/*Aiguilles*/

#aiguille {
height: 196px;
width: 30px;
background-image: url('images/menu/aiguille.png');
    left: 161px;
    bottom: 74px;
      -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 2;
}

#paiguille {
	width: 20px;
	height: 112px;
	background-image: url('images/menu/paiguille.png');
	left: 166px;
    bottom: 117px;
    z-index: 1;
    -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform:rotate(-30deg);
  transform:rotate(-30deg);
}

/*Position des liens de navigation*/

#accueil {
height: 24px;
width: 78px;
bottom: 269px;
left: 138px;
}

#dessins {
height: 22px;
width: 72px;
bottom: 224px;
left: 54px;
-webkit-transform:rotate(-55deg);
transform:rotate(-55deg);
}

#tutoriels {
height: 29px;
width: 97px;
bottom: 221px;
left: 211px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
}

#pokemon {
	height: 20px;
	width: 100px;
	bottom: 125px;
	left: 34px;
	-webkit-transform: rotate(65deg);
	transform: rotate(65deg);
}

#animalcrossing {
	height: 60px;
	width: 200px;
	bottom: 25px;
	left: 135px;
}

#pripara {
	height: 29px;
	width: 81px;
	bottom: 115px;
	left: 230px;
	-webkit-transform:
	 rotate(-72deg);
	 transform: rotate(-72deg);
	}

/*Mouvement de l'aiguille quand on survole la navigation*/

#accueil:hover ~ #aiguille {
	-webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}


#tutoriels:hover ~ #aiguille {
	-webkit-transform:rotate(50deg);
  transform:rotate(50deg);
}

#dessins:hover ~ #aiguille {
	-webkit-transform:rotate(-50deg);
  transform:rotate(-50deg);
}

#pripara:hover ~ #aiguille {
	-webkit-transform:rotate(110deg);
  transform:rotate(110deg);
}

#pokemon:hover ~ #aiguille {
	-webkit-transform:rotate(-110deg);
  transform:rotate(-110deg);
}

#animalcrossing:hover ~ #aiguille {
	-webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

#accueil:hover ~ #aiguille {
	-webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}

/*Mouvement de la petite aiguille en navigation*/
#tutoriels:hover ~ #paiguille {
	-webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}

#dessins:hover ~ #paiguille {
	-webkit-transform:rotate(40deg);
  transform:rotate(40deg);
}

#pripara:hover ~ #paiguille {
	-webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

#pokemon:hover ~ #paiguille {
	-webkit-transform:rotate(110deg);
  transform:rotate(110deg);
}

#animalcrossing:hover ~ #paiguille {
	-webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}