* {
margin:0;
padding:0;
}

body {
background:#A5A5A5 url('img/bg.jpg');
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

h1 {
color:#555555;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:2.2em;
font-weight:normal;
border-bottom:1px solid #555555;
text-align:right;
margin-bottom:25px;
}

h2 {
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:1.6em;
font-weight:normal;
margin-bottom:20px;
}

p {
margin-top:20px;
/*text-indent:20px;*/
}

strong {
font-weight:normal;
}

img {
border:0;
}

input, textarea {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

/* id */

#page {
background:#FFFFFF;
/*border:1px solid #555555;*/
margin:0px auto;
padding:10px;
width:820px;
}

#header {
/*margin-top:30px;*/
margin-bottom:40px;
background: url(img/top.jpg) bottom right no-repeat #7F7F7F;
height:270px;
}

#header li {
list-style:none;
margin-bottom:20px;
}

#header ul {
font-family:"Times New Roman", Georgia, Times, serif;
font-size:20px;
padding:40px 0 0 35px;
}

#header a {
color:#FFFFFF;
text-decoration:none;
padding-left:20px;
}

#header a.active {
border-left:5px solid #CCCCCC;
padding-left:15px;
}

#header a:hover {
border-left:5px solid #FFFFFF;
padding-left:15px;
}

#content {
width : 540px;
margin-bottom:40px;
padding:10px;
float : left;
}

#content p {
line-height:140%;
}

#content textarea {
width:400px;
height:120px;
}

#contact {
/*margin: 0 auto;
width: 440px;
border:1px solid #DDDDDD;
padding: 0 20px;*/
}

#contact label { 
display:block;
}

#contact ul {
color:#FF0000;
font-weight:bold;
}

#sidebar {
width : 210px;
/*padding : 40px 25px;*/
float : right;
clear : none !important;
clear : left;
font-size : 0.9em;
}
#sidebar div {
margin : 0 0 20px 0;
padding : 0 0 10px 0;
}


/* class */

.read-it {
color: #639B68;
/*font-weight:bold;*/
margin: 0px;
padding: 5px 0 0 0;
}

.read-it a {
color: #639B68;
padding: 0px;
text-decoration: none;
}

.read-it a:hover {
text-decoration: underline;
}

.lien1 {
text-decoration: none;
color:#333333;
}

.band {
background:#7F7F7F;
font-family:Arial, Helvetica, sans-serif;;
font-size:0.9em;
padding:8px 15px;
text-align:right;
color:#FFFFFF;
clear:both
}

.band a {
color:#FFFFFF;
text-decoration: none;
}

.band a:hover {
text-decoration: underline;
}

.facebook {
float:left;
font-size:0,95em;
}

.facebook a {
color: #666;
}


@media (max-width: 640px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, #page, #header,  #content {
   width: auto;
   margin: auto;
   padding: auto;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* césure forcée */
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
  #page, #header, #content {
   float: none !important;
   width: auto !important
 }

 /* masquer les éléments superflus */
 .hide_mobile, .facebook, #sidebar {
   display: none !important;
 }

 /* Un message personnalisé 
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }*/
}