@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'RochesterRegular';
	src:url('../fonts/rochester/Rochester-Regular-webfont.eot');
	src:url('../fonts/rochester/Rochester-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/rochester/Rochester-Regular-webfont.woff') format('woff'),
		url('../fonts/rochester/Rochester-Regular-webfont.ttf') format('truetype'),
		url('../fonts/rochester/Rochester-Regular-webfont.svg#RochesterRegular') format('svg');
}

body {
	margin:0;
	font-family: 'RochesterRegular', Arial, sans-serif;
	background-image: url(../img/blanc.jpg);
	background-repeat: repeat;
}

#container{
	position:relative;
	width:100vh;
	margin: 20px auto 0 auto;

}

@media only screen and (-webkit-min-device-pixel-ratio:1.5) ,
only screen and (min-device-pixel-ratio:1.5) ,
only screen and (min-resolution:144dpi)  {
   #container {
	margin: 20px auto 0 100px;

	}
}

.bureau{
	position:absolute;
	z-index:-5;
	width:960px;
	height: 585px;
	-webkit-border-radius: 5px;
	border-radius: 30px;
	-webkit--box-shadow:0 40px 40px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	-moz-box-shadow:0 40px 60px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	box-shadow:0 40px 60px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	background-image: url(../img/bois.jpg);
	background-repeat: no-repeat;
	border: 2px solid #CCC;
}

.span{
	color: #ff00ff; /*rose*/
}

mark {
	background-color: #ABFFBD;
	color: #666;
}

.draggable {
	z-index:10;
	cursor: url('../img/main.png'), move;
	
}

.tasse {
	position:absolute;
	height: 128px;
	width: 134px;
	background-image: url(../img/Tasse-cafe.png);
	left: 139px;
	top: 381px;
}

.tache {
	position:absolute;
	height: 81px;
	width: 64px;
	background-image: url(../img/tache.png);
	left: 114px;
	top: 380px;
}

.animation_1 {
	position:absolute;
	height: 144px;
	width: 195px;
	background-image: url(../img/animations/texte.png);
	left: 518px;
	top: 18px;
	background-repeat: no-repeat;
}

.animation_2 {
	position:absolute;
	height: 176px;
	width: 230px;
	background-image: url(../img/animations/papier.png);
	left: 362px;
	top: 110px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-20.5deg);
	-moz-transform: rotate(-20.5deg);
	-o-transform: rotate(-20.5deg);
	transform: rotate(-20.5deg);
}

.animation_3 {
	position:absolute;
	z-index:1;
	height: 74px;
	width: 74px;
	background-image: url(../img/animations/rouge.png);
	left: 439px;
	top: 161px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-5.5deg);
	-moz-transform: rotate(-5.5deg);
	-o-transform: rotate(-5.5deg);
	transform: rotate(-5.5deg);
	-webkit-animation: rotation_r 4s infinite linear;
	/*transition: transform .80s ease-in-out;
	transition-delay: .2s;*/
}

@-webkit-keyframes rotation_r {
		from {
				-webkit-transform: rotate(-0deg);
		}
		to {
				-webkit-transform: rotate(-359deg);
		}
}

.animation_4 {
	position:absolute;
	z-index:1;
	height: 74px;
	width: 74px;
	background-image: url(../img/animations/orange.png);
	left: 437px;
	top: 160px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-5.5deg);
	-moz-transform: rotate(-5.5deg);
	-o-transform: rotate(-5.5deg);
	transform: rotate(-5.5deg);
	-webkit-animation: rotation_o 9s infinite linear;
	/*transition: transform .80s ease-in-out;
	transition-delay: .2s;*/
}

@-webkit-keyframes rotation_o {
		from {
				-webkit-transform: rotate(-0deg);
		}
		to {
				-webkit-transform: rotate(-359deg);
		}
}

.animation_5 {
	
	position:absolute;
	z-index:1;
	height: 10px;
	width: 20px;
	background-image: url(../img/animations/grise.png);
	left: 496px;
	top: 161px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-15.5deg);
	-moz-transform: rotate(-15.5deg);
	-o-transform: rotate(-15.5deg);
	transform: rotate(-15.5deg);
	animation-name: glissement;
	animation-duration: 1.7s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
.}

@keyframes glissement {
  from {
    margin-left: 0.7%;
	margin-top: 0.6%;
    width: -20%;
  }

  to {
    margin-left: 0%;
	margin-top: 0.7%;
    width: -125%;
  }
}

.animation_6 {
	position:absolute;
	z-index:1;
	height: 10px;
	width: 28px;
	background-image: url(../img/animations/bus.png);
	left: 418px;
	top: 220px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-20.5deg);
	-moz-transform: rotate(-20.5deg);
	-o-transform: rotate(-20.5deg);
	transform: rotate(-20.5deg);
}

.pic {
	position:absolute;
	z-index:10;
	height: 31px;
	width: 27px;
	background-image: url(../img/pic.png);
	left: 428px;
	top: 115px;
}

.cats {
	position:absolute;
	z-index:9;
	height: 54px;
	width: 54px;
	background-image: url(../img/cats.png);
	left: 92px;
	top: 302px;
}

.corbeille {
	position:absolute;
	z-index:-8;
	height: 216px;
	width: 217px;
	background-image: url(../img/corbeille.png);
	left: 873px;
	top: 330px;
}

.boulette {
	position:absolute;
	height: 59px;
	width: 63px;
	background-image: url(../img/boulette.png);
	left: 838px;
	top: 626px;
}

.crayon {
	position:absolute;
	height: 100px;
	width: 100px;
	background-image: url(../img/crayon.png);
	left: 502px;
	top: 94px;
}

.gomme {
	position:absolute;
	height: 180px;
	width: 180px;
	background-image: url(../img/gomme-crayon.png);
	left: 482px;
	top: 91px;
}


.stabilo {
	position:absolute;
	z-index:999;
	height: 128px;
	width: 128px;
	background-image: url(../img/stabilo.png);
	left: 568px;
	top: 259px;
}

.logo {
	position:absolute;
	height: 53px;
	width: 216px;
	background-image: url(../img/logo.png);
	left: 19px;
	top: 515px;
}

.stylo {
	position:absolute;
	height: 123px;
	width: 177px;
	background-image: url(../img/stylo.png);
	left:383px;
	top: 462px;
}

.post-it {
	position:absolute;
	z-index:10;
	height: 93px;
	width: 138px;
	background-image: url(../img/post-it.png);
	left:14px;
	top: 283px;
	-webkit-transform: rotate(-20.5deg);
	-moz-transform: rotate(-20.5deg);
	-o-transform: rotate(-20.5deg);
	transform: rotate(-20.5deg);
}

.plan {
	position:absolute;
	z-index:-2;
	height: 684px;
	width: 904px;
	background-image: url(../img/plan2.png);
	left:74px;
	top: -31px;
	background-repeat: no-repeat;
}

.pc {
	position:absolute;
	height: 329px;
	width: 428px;
	left: -54px;
	top: 35px;
	-webkit-transform: rotate(-15.5deg);
	-moz-transform: rotate(-15.5deg);
	-o-transform: rotate(-15.5deg);
	transform: rotate(-15.5deg);
}

.tablette {
	position:absolute;
	height: 256px;
	width: 256px;
	background-image: url(../img/tablette.png);
	left: 697px;
	top: 24px;
	-webkit-transform: rotate(11.5deg);
	-moz-transform: rotate(11.5deg);
	-o-transform: rotate(11.5deg);
	transform: rotate(11.5deg);
}

.tabouret{
	position:absolute;
	z-index:-25;
	height: 497px;
	width: 579px;
	background-image: url(../img/tabouret.png);
	left: 225px;
	top: 315px;
	-webkit-transform: rotate(-10.5deg);
	-moz-transform: rotate(-10.5deg);
	-o-transform: rotate(-10.5deg);
	transform: rotate(-10.5deg);
	background-color: transparent;
}

.portable{
	position:absolute;
	height: 235px;
	width: 126px;
	left: 753px;
	top: 288px;
	-webkit-transform: rotate(-31.5deg);
	-moz-transform: rotate(-31.5deg);
	-o-transform: rotate(-31.5deg);
	transform: rotate(-31.5deg);
	background-color: transparent;
}

.carte {
	position:absolute;
	height: 86px;
	width: 133px;
	background-image: url(../img/carte.png);
	left: 16px;
	top: 4px;
	-webkit-transform: rotate(-18.5deg);
	-moz-transform: rotate(-18.5deg);
	-o-transform: rotate(-18.5deg);
	transform: rotate(-18.5deg);
	background-color: transparent;
}

.note {
	position:absolute;
	z-index:-1;
	height: 290px;
	width: 210px;
	background-image: url(../img/carreau.png);
	left: 457px;
	top: 257px;
	background-repeat: repeat;
	background-color: #FFF;
	-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .8);
	box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .8);
	box-shadow: none\9;
	border: 1px solid rgba(0,0,0,0.5);
	-webkit-transform: rotate(-11.5deg);
	-moz-transform: rotate(-11.5deg);
	-o-transform: rotate(-11.5deg);
	transform: rotate(-11.5deg);
}

.disquette{
	position:absolute;
	height: 64px;
	width: 64px;
	left: 180px;
	top: 394px;	
}

a {
	color:#C00;
	text-decoration: none;
	outline: none;
}

.log_acad{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 63px;
	top: 62px;

}

.log_cov{
	position:absolute;
	height: 24px;
	width: 24px;
	left: 102px;
	top: 65px;

}

.log_cer{
	position:absolute;
	height: 26px;
	width: 26px;
	left: 135px;
	top: 62px;

}

.log_office{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 136px;
	top: 102px;

}

.log_photo{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 170px;
	top: 102px;
}

.log_pdf{
	position:absolute;
	height: 24px;
	width: 24px;
	left: 171px;
	top: 65px;
}

.log_dict{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 68px;
	top: 99px;
}

.log_ms{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 102px;
	top: 99px;
}

.log_teams{
	position:absolute;
	height: 28px;
	width: 28px;
	left: 63px;
	top: 145px;
}