.note
{
	height:150px;
	margin:0px;
	width:200px;
	box-shadow: 0 4px 10px -1px rgba(200, 200, 200, 0.7);
	position: absolute;
	left: -100px;
	z-index:10;
	background-color:white;
}
.note:hover, .note:active
{
	left: 30px;
	z-index:11;
}
.note h1
{
	font-size:large;
	color:#898989;
	display:none;
}
.note h2
{
	font-size:medium;
	color:#663300;
	display:none;
}
#cours
{
	top: 10px;
	background-image:url(cours.png);
	background-repeat:no-repeat;
	background-color:white;
	-o-transform:rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
#hiragna
{
	top: 155px;
}
#katakana
{
	top: 305px;
	-o-transform:rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
}
#photo
{
	top: 405px;
	-o-transform:rotate(10deg);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
}
#voyage
{
	top: 505px;
	-o-transform:rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}
#vie
{
	top: 605px;
	-o-transform:rotate(5deg);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
}