@font-face {
	font-family: "Titraille";
	src: url('fonts/hermes.ttf') format('truetype');
}
/* cyrillic */
@font-face {
  font-family: 'Lobster';  
  src: url('fonts/Lobster 1.4.otf') format('opentype'); 
}
div .rotCarte{
	margin:50px auto;
	width:620px;
	height:400px;
	position:relative;
	top:0;	
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
}
div .chinCarteLeft{
position: absolute;
width:41px;
height:30px;
background: url(../img/chinCarteLeft.png) no-repeat;
background-size:cover;
z-index:1000;
top:-5px;
left:10px;
}
div .chinCarteRight{
position: absolute;
width:30px;
height:41px;
background: url(../img/chinRight.png) no-repeat;
background-size:cover;
z-index:1000;
top:-20px;
left:575px;
}

#contenu{ 
	width:620px;
	height:400px;
	background: url(../img/crumpled-paper.jpg) no-repeat;	
	font-family: 'Lobster', arial, serif;
	position: relative;
	-webkit-box-shadow: 0px 0px 2px 0px #202020;
	-moz-box-shadow: 0px 0px 2px 0px #202020;
	box-shadow: 0px 0px 2px 0px #202020;
}
#contenu:before, #contenu:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;  
  background: none;
  -webkit-box-shadow: 0 35px 20px #202020;
  -moz-box-shadow: 0 35px 20px #202020;
  box-shadow: 0 35px 20px #202020;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
#contenu:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
.headerCmd,.footerCmd{
	width:578px;
	height:20px;
	margin: 0 auto;
	padding:20px;	
}
.headerCmd label {
	float: left; 
	margin-left: 30px; 
	text-decoration: underline;
	font-size:1.2em;
}
label.titre1{
	float:right;
	margin-right:30px;
}
select{
	float:right;
	margin-right:30px;
	background:transparent;
	border:none;
	font-family: 'Lobster', arial, serif;
	font-size:1em;
}
option.choix{
	display:none;
}
.posAbsolute{
	position:absolute;
}
 img.posAbsolute{
	width:618px;
	height:313px;
	margin-left:1px;
}
iframe{
	width:618px;
	height:313px;
	position:absolute;
	margin-left:1px;
}
.posAbsoluteMasque{
	position:absolute;
	width: 620px;
	height:313px;
	background: url(../img/crumpled-paper.jpg)no-repeat;
	opacity: 0.4;
	background-position: 0 -60px; 	
	z-index:99;
}
.posAbsoluteMasque:hover{
	cursor:pointer;
}
span.spot{
	position:absolute;	
	text-align:center;
	width:50px;
	height:80px;
	/*background: url(../cartes/logo.jpg)no-repeat;
	background-size: 32px 31px;
	background-position:11px 10px;*/
	-webkit-transform:rotate(-6deg);
    -moz-transform:rotate(-6deg);	
}
span.spot img{
	-webkit-transform:rotate(6deg);
    -moz-transform:rotate(6deg);
	width:50px;
	height:80px;
}
span.spot img:hover{
	cursor:pointer;
}
.dummy {
	border: 1px solid red; 
	display: table;
	width:10px;
	text-align:center;
	font-family: 'Lobster', arial, serif;
	float:left;
	margin-left:-1000px;
}
span.titre {
  padding: 4px 8px;
  color: #333;
  /*color: #fff;*/
  font-family: 'Lobster', arial, serif;
  position: absolute;
  left: 50%; 
  top: 80px; 
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  -webkit-transform:rotate(6deg);
    -moz-transform:rotate(6deg);	
  display:none;
}
img#back{
	position:relative;
	top:-35px;
	left:10px;
	z-index:99;	/*background: url(../img/picto_back_fond.png) no-repeat;background:white;*/
}
img#back:hover{
	cursor:pointer;
}
div .chinPost-itLeft{
position: absolute;
width:41px;
height:30px;
background: url(../img/chinPost-itLeft.png) no-repeat;
background-size:cover;
z-index:1000;
top:378px;
left:156px;
}
div .chinPost-itRight{
position: absolute;
width:30px;
height:41px;
background: url(../img/chinRight.png) no-repeat;
background-size:cover;
z-index:1000;
top:358px;
left:286px;
}
#swing {
	margin:0 auto;
	width:230px;
	height:230px;
	position:relative;
	top:334px;	
 }
 .animated {
	-webkit-transform-origin: top center;
		-ms-transform-origin: top center;
			transform-origin: top center;
	-webkit-animation-name: swing;
			animation-name: swing;
	-webkit-animation-duration: 5s;
			animation-duration: 5s;
	-webkit-animation-iteration-count: 1;
			animation-iteration-count: 1;	  
}
@-webkit-keyframes swing { 
10% {
    -webkit-transform:  rotate(20deg); 
	}
20% {
    -webkit-transform:  rotate(-12deg); 
	}	
30% {
    -webkit-transform:  rotate(10deg); 
	}
40% {
    -webkit-transform:  rotate(-7deg); 
	}
50% {
    -webkit-transform:  rotate(4deg); 
	}
60% {
    -webkit-transform:  rotate(-3deg); 
	} 
70% {
    -webkit-transform:  rotate(2deg); 
	}
80% {
    -webkit-transform:  rotate(-1deg); 
	}
90% {
    -webkit-transform:  rotate(0.5deg); 
	}  
100% {
    -webkit-transform:  rotate(0deg); 
	}
}
@-moz-keyframes swing {
10% {
    -webkit-transform:  rotate(20deg); 
	}
20% {
    -webkit-transform:  rotate(-12deg); 
	}	
30% {
    -webkit-transform:  rotate(10deg); 
	}
40% {
    -webkit-transform:  rotate(-7deg); 
	}
50% {
    -webkit-transform:  rotate(4deg); 
	}
60% {
    -webkit-transform:  rotate(-3deg); 
	} 
70% {
    -webkit-transform:  rotate(2deg); 
	}
80% {
    -webkit-transform:  rotate(-1deg); 
	}
90% {
    -webkit-transform:  rotate(0.5deg); 
	}  
100% {
    -webkit-transform:  rotate(0deg); 
	}
}
div .rotPost-it{
	margin:0 auto;
	width:154px;
	height:170px;
	position:relative;
	top:10px;	
	-ms-transform: rotate(-50deg); /* IE 9 */
    -webkit-transform: rotate(-50deg); /* Chrome, Safari, Opera */
    transform: rotate(-50deg);
}
div.post-it{	
	width:154px;
	min-height:124px;
	height:auto;
	background: url(../img/post-it.png)no-repeat;
	background-size:154px 154px;
	text-align:center;
	padding-top:15px;
	padding-bottom:15px;
	margin:0 auto;
	position:relative;
	top:0;	
	font-size:1em;	
}
.dummyPost-it {
	width:154px;
	min-height:124px;
	height:auto;
	display: table;
	padding-top:15px;
	padding-bottom:15px;
	text-align:center;
	font-family: 'Lobster', arial, serif;
	float:left;
	margin-left:-1000px;
	border:1px solid red;
}
div.post-it p,.dummyPost-it p{
	padding:5px;
	line-height: 20px;
	padding-left:10px;
	padding-right:20px;	
}
div.post-it b,.dummyPost-it b{
	padding:5px;		
	font-size:1.3em;	
}
.post-it:before, .post-it:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 30px;
  left: 0px;
  width: 50%;
  top: 70%;  
  background: none;
  -webkit-box-shadow: 0 35px 20px #202020;
  -moz-box-shadow: 0 35px 20px #202020;
  box-shadow: 0 35px 10px #202020;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.post-it:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 0px;
  left: auto;
}
table.pays,table.villes{
	position:absolute;
	
	background:transparent;
	font-family: 'Lobster', arial, serif;
	font-size:1em;
	display:block;
	z-index:100;
	border:none;	
}
table.pays{left:250px;}
table.villes{left:450px;}
.border-gray{border:1px solid gray;}
td {	
	background: url(../img/table.png);
	padding:3px;
	border:none;	
	display:none;
}
td:hover{
	cursor: pointer;
	background: blue;
	color:white;
}
td.choix {	
	display:block!important;
	background:transparent;
	cursor:pointer;
	color:black;
}
.border-blue{border:1px solid blue}