body { 
font-family: Arial, sans-serif; 
line-height: 1.6;
font-size: 14px;
background: #bcbeb0;
margin: 0;
padding: 0;
color: #112211;
}

a { color: #336699; text-decoration: none;}
a:hover { color:red; text-decoration: none; }

/* image modale */
.float_l { float: left; }
.float_r { float: right; }

.image_wrapper { 
	display: inline-block; 
	border: 1px solid #ded6ce; 
	padding: 4px; 
	margin-bottom: 10px; 
}

.image_fl { 
	float: left; 
	margin: 3px 15px 0 0; 
}

.image_fr { 
	float: right; 
	margin: 3px 0 0 15px; 
}


/* bouton animé */
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/*  zone exo */
.container {
  border: 1px solid black;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 5px;
  margin-left: 10px;
 padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 5px;
  background-color: SteelBlue;
}


#wrap { 
width: 980px;
margin: 20px auto;
}

#header {
background: url('images/header.jpg') no-repeat;
height: 160px
}
#header h1 {
font-family: Arial, sans-serif; 
margin: 0;
padding: 20px 0 0 20px;
font-weight: 100;
color: #FFB96F;
font-size: 24px;
letter-spacing: -2px;
line-height: 18px;
}

#header h1 a { text-decoration: none; color: #fff; }
#header h1 a:hover { text-decoration: none; color: #eee; }
#header h2 { font-size: 21px; padding: 0 0 0 40px; margin: 0; color: #eee; font-weight:bold; }

#menu {
background: url('images/menu.jpg') no-repeat;
height: 40px;
line-height: 40px
}

#menu ul {
list-style-type: none;
margin: 0;
padding-left: 30px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
padding: 0 10px 0 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
#menu ul li a:hover {
color:red;
background: url('images/menuover.png') repeat-x;
}

#contentwrap {
background: url('images/content.jpg') repeat-y;
padding-left:30px; padding-right:20px; padding-top:0; padding-bottom:0
}

#content {
margin-top: 20px;
float: left;
width: 590px;

}
#content h2 {
margin: 0;
color:#112211;
line-height: 30px;
font-weight:bold;
font-size: 18px;
font-family: 'Fredoka One', cursive;
}

#content p { padding-bottom: 0px; padding: 0 0 5px 0; color: #232323;}
#content ul { padding: 0 20px 10px 30px; }

#sidebar {
float: right;
width: 320px;
margin-top: 20px;
}

#sidebar h3 {
background: url('images/sidebar.jpg') no-repeat;
height: 30px;
line-height: 30px;
font-weight: 100;
margin: 0; color: #fff; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0
}

#sidebar p { padding: 0 10px 10px 10px; color: #232323; }

#sidebar ul {
padding: 10px 0 20px 15px;
margin: 0;
color: #aaa;
list-style-type: none;
}

#sidebar ul li {
background: url('images/bullet.png') no-repeat center left;
margin: 0; padding-left:19px; padding-right:0; padding-top:1px; padding-bottom:2px
}
#sidebar ul li a {  }

#footer { 
text-align: center;
color: #fff;
background: url('images/footer.jpg') repeat-y;
height: 80px;
line-height: 80px
}
#footer p { padding: 0; margin: 0; }
#footer a { color: #fff; }
#footer a:hover { text-decoration: underline; }