body{
	margin:0.3;
	font-family: 'PlutoRegular';
	position: absolute;
	left: 0px;
	top: 0px
	margin:0;
	
}
@font-face {
    font-family: 'PlutoRegular';
    src: url('../font/PlutoRegular.otf');
}
#dragdrop {
position:absolute;
width: 600px;
}


p {
	margin:0;
	padding:0;
}

img{
z-index:1;
border:1px solid #EA9800;
border-radius: 10px;
background-color:#FFFFFF;
margin:20px;
width:350px;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}

.box1{border:4px solid #EA9800;background-color:#FAF7EA; padding:1em;box-shadow: 10px 10px 10px #888888;margin-bottom:1em;margin-left:1em;margin-top:1em;width:600px;border-radius: 15px;}
.box1 h3{color:#800080;text-align:left;margin-bottom:0.2em;}
.box2 {border:4px solid #EA9800;background-color:#FAF7EA; padding:1em;box-shadow: 10px 10px 10px #888888;margin-bottom:1em;margin-left:1em;margin-top:1em;width:600px;border-radius: 15px;}
.box2 h2{color:#FF6347;text-align:center;margin-bottom:0.2em;margin-top:0em;}
.box2 h3{color:#800080;text-align:center;margin-bottom:0.2em;}
.box2 p{margin-left:2.5em;}




.text {
color: #FFFFFF;
font-weight:bold;
font-size:1em;
padding:.5em.2em.2em.2em;

}




#drop_3 > .ans {
border: 8px solid green;
position:absolute;
border-radius: 0px 15px 0px 15px;
top:291px;
left:203px;
background-color: green;
width: 150px;
padding:.3em;
opacity:5;
z-index:1;
font-size:.7em;
line-height:1em;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
text-align:center;
font-size:105%;
color:#FFFFFF;
}

#drop_4 > .ans {
border-radius: 0px 15px 0px 15px;
border: 8px solid green;
position:absolute;
top:566px;
left:83px;
background-color: green;
width: 150px;
padding:.3em;
opacity:5;
z-index:1;
font-size:.7em;
line-height:1em;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
font-size:105%;
color:#FFFFFF;
text-align:center;
}

















#drop_1 > .ans {
border: 8px solid #fff;
position:absolute;
border-radius: 0px 15px 0px 15px;
top:170px;
left:150px;
background-color: #FFFFFF;
width: 150px;
padding:.3em;
opacity:5;
z-index:1;
font-size:.7em;
line-height:1em;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}

#drop_2 > .ans {
border-radius: 0px 15px 0px 15px;
border: 8px solid #fff;
position:absolute;
top:170px;
left:30px;
background-color: #FFFFFF;
width: 150px;
padding:.3em;
opacity:5;
z-index:1;
font-size:.7em;
line-height:1em;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}

/* Photo Gallery styles */
.gallery {
margin: 10px;
width:150px;
float:left;
}

.gallery a {
display: inline-block;
margin: 10px;
padding: 20px 10px 10px 10px;
opacity: 1;
height: 45px;
width: 100px;

-khtml-user-drag: element;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.gallery #a1 span {
border: 8px solid Purple;
border-bottom: 20px solid Purple;
color: Purple;
background-color:#FFFFFF;
border-radius: 0px 20px 0px 20px;
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-align:center;
padding: 5px 2px 2px 2px;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}

.gallery #a2 span {
border: 8px solid blue;
border-bottom: 20px solid blue;
color: blue;
background-color:#FFFFFF;
border-radius: 0px 20px 0px 20px;
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-align:center;
padding: 5px 2px 2px 2px;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}


/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) span {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);

}
.gallery a:nth-child(2) span {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background-color:red;
}

.gallery a:hover span {
z-index: 5;
/* CSS3 transition rules */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* CSS3 transform rules */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery a.hidden {
height: 0;
margin: 0;
opacity: 0;
width: 0;
}
.albums {
overflow: hidden;

}

#drop_1 {
margin: 1px;
float:left;
position:absolute;
min-height: 15px;
padding: 10px;
width: 335px;
height: 215px;
left:52px;
top:120px;
text-align:center;
font-size:150%;
line-height:.5em;
}
#drop_2 {
margin: 1px;
float:left;
position:absolute;
min-height: 15px;
padding: 10px;
width: 335px;
height: 215px;
left:52px;
top:395px;
text-align:center;
font-size:150%;
line-height:.5em;
}
input#btnclr1 {
	cursor:pointer;
	/*forces the cursor to change to a hand when the button is hovered*/
	padding:5px;
	/*add some padding to the inside of the button*/
	background:#FFFFFF;
	border:3px solid #EA9800;
	/*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	/*style the text*/
	color:#000000;
	font-size:1.1em;
	margin-top:0em;
	margin-bottom:0em;
	float:left;
	width: 250px;
font-family: 'PlutoRegular';
font-family: 'PlutoRegular';
	background-image:url('../images/recommencer.jpg');
	background-repeat: no-repeat;
	background-position: left; 

}

input#btn1 {
	cursor:pointer;
	/*forces the cursor to change to a hand when the button is hovered*/
	padding:5px;
	/*add some padding to the inside of the button*/
	background:#FFFFFF;
	border:3px solid #EA9800;
	/*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	/*style the text*/
	color:#000000;
	font-size:1.1em;
	margin-top:0em;
	margin-bottom:0em;
	float:right;
	width: 250px;
	background-image:url('../images/valider.jpg');
	background-repeat: no-repeat;
	background-position: left; 
	font-family: 'PlutoRegular';

}
input#btn2 {
	cursor:pointer;
	/*forces the cursor to change to a hand when the button is hovered*/
	padding:5px 55px;
	/*add some padding to the inside of the button*/
	background:#FFFFFF;
	border:3px solid #EA9800;
	/*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	/*style the text*/
	color:#000000;
	font-size:1.1em;
	margin-top:-2em;
	margin-bottom:0em;
	width: 600px;
	/*display:none;*/
	position:absolute;
font-family: 'PlutoRegular';
}