@charset "utf-8";

h1 {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: #CC9966;
}
p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	text-align: center;
	font-size: 10px;
}
a {
	color: #666666;
	text-decoration: none;
}
a:hover {
	color: #ffffff;
}
body {
	background-image: url(../images/fond.gif);
}
.ocre  {
	color: #CC9966;
	font-size: 14px;
	line-height: 18px;
}
.blanc  {
	color: #FFFFFF;
	font-size: 14px;
	line-height: 18px;
}

@media (min-width:600px){

#content {
	width: 600px;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
#titre  {
	position: relative;
	top: -800px;
	left: 0px;
	width: 200px;
}
#djol_marche  {
	position: relative;
	top: -910px;
	left: 150px;
	width: 150px;
}
#texte1 {
	position: relative;
	top: -850px;
	width: 400px;
	left: 50px;
}
#titre1 {
	position: relative;
	left: 120px;
	top: -800px;
	width: 100px;
}
#os1 {
	position: relative;
	top: -750px;
	left: 120px;
	width: 80px;
}
#titre2 {
	position: relative;
	left: 290px;
	top: -800px;
	width: 100px;
}
#os2 {
	position: relative;
	top: -750px;
	left: 290px;
	width: 80px;
}
#poubelle_renversee {
	position: relative;
	top: -860px;
	left: 380px;
	width: 200px;
}
#texte2 {
	width: 200px;
	position: relative;
	top: -840px;
	left: 50px;
}
#chat {
	position: relative;
	top: -900px;
	left: 200px;
	width: 100px;
}
#texte3 {
	width: 200px;
	position: relative;
	top: -840px;
	left: 360px;
}
#piaf {
	position: relative;
	top: -1020px;
	left: 420px;
	width: 75px;
}
#poubelle {
	width: 50px;
	position: relative;
	top: -920px;
	left: 20px;
}
#coucou {
	width: 94px;
	position: relative;
	top: -920px;
	left: 390px;
}
}

@media (max-width:599px){
#content {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	height: 900px;
}
#fondjol  {
	width: 100%;
}
#titre {
	position: relative;
	top: -400px;
	left: 0px;
	width: 200px;
}
#djol_marche {
	position: relative;
	top: -510px;
	left: 150px;
	width: 150px;
}
#texte1 {
	position: relative;
	top: -490px;
	width: 200px;
	left: 50px;
}
#titre1 {
	position: relative;
	left: 40px;
	top: -420px;
	width: 100px;
}
#os1 {
	position: relative;
	top: -400px;
	left: 40px;
	width: 80px;
}
#titre2 {
	position: relative;
	left: 130px;
	top: -380px;
	width: 100px;
}
#os2 {
	position: relative;
	top: -360px;
	left: 130px;
	width: 80px;
}
#poubelle_renversee {
	position: relative;
	top: -560px;
	left: 140px;
	width: 200px;
}
#texte2 {
	width: 200px;
	position: relative;
	top: -464px;
	left: 50px;
}
#chat {
	position: relative;
	top: -480px;
	left: 30px;
	width: 100px;
}
#texte3 {
	width: 200px;
	position: relative;
	top: -360px;
	left: 50px;
}
#piaf {
	position: relative;
	top: -580px;
	left: 200px;
	width: 75px;
}
#poubelle {
	width: 50px;
	position: relative;
	top: -480px;
	left: 20px;
}
#coucou {
	width: 94px;
	position: relative;
	top: -500px;
	left: 220px;
}
}