@media all and (max-device-width: 799px)
{
 /* Vos règles CSS pour les mobiles ici */

*
{
  margin: 0px;
  padding:0px;
  border:0px none;
}
html, body
{
  height:100%;
  width: 100%;
/* width:450px; /* JUST FOR TEST, TO BE REMOVED */
  font-size:1em;
  font-family:  Berylium, Gentium, sans-serif;
  background-color:#ffffff;
  color:#574019;
  overflow:auto;
}
ul
{
  list-style-type: none;
}
p
{
  margin:auto;
  text-align:justify;
  vertical-align:baseline;
  padding-left:3px;
  padding-right: 5px;
  padding-bottom:5px;
}
article p
{
  margin-bottom: 3px;
}
article p:last-child
{
  margin-bottom: 0px;
}
a
{
  color:#574019;
}
a:hover
{
  color:#bb3222;  
}

header, footer, section
{
  display: block;
}
/* bandeau haut fixe */
header
{
  position:top;
  width: 100%;
/* height:185px; */
/* overflow:hidden; */
  border-bottom: 2px;
  border-color: #574019;
}

header aside
{
  
  margin:0;
  border:solid;
  border-width:2px;
  border-color:#575219;
  position:relative;
  vertical-align: center;
  float:left;
}

header #chris
{
  vertical-align: middle;
  margin:0px;
  position:relative;
  float:right;
  text-align:right;
}


/* le div qui contient toute la page */
#bloc_page
{
  position:relative;
  height:auto;
  min-height:100%;
  width: 100%;
  font-weight: normal;
}

/* le logo */



/* le titre */

header table #logo4
{
 display:none;

}


/* menu navigation */
nav
{
  clear:both;
  text-align: left;
  border-color:#575219 inset;
}

#slider section
{
}
.transbox
{
/*  height: 400px; */
/*  margin:30px 50px; */
  padding: 5px;

  color:;
/*
  border:;
  background:url(transparent20-574019.png);
*/
  /* opacity:0.6; */
  /* filter:alpha(opacity=60); */ /* For IE8 and earlier */
}

.boiteprincipale
{
  vertical-align:top;
  float:left;
}

section aside
{
  display: inline-block;
  vertical-align:top;
  clear:both;
  width: 100%;
  margin: 35px 0 0 0; 
}

.deco
{
  display: none;
}

table
{
  border-collapse: collapse;
  border: 2px; 
  border-color: #574019;
  width: 100%;
}
td, th
{
  border: 2px;
  border-color: #574019;
}
th, nav
{
  border:solid;
  border-width:1px;
  border-color:#575219;
  border-left:none;
  border-right:none;
  background-color:#e7c78e;
}

/* tableau aside */
aside table tr td:first-child
{
  width: 50px;
}
aside table tr td h3
{
  padding-top:25px;
  padding-bottom:15px;
}
aside table tr:last-child td
{
  padding-bottom:25px;
}

/* menus aller directement p 6 et 7*/
.allerdirect
{
}

/* formatage textes */
article ul
{
  margin-left:15px;
  padding-left:0;
}
article ul li:first-child
{
  margin-top:2px;
}
article ul li
{
  margin-bottom:2px;
}
article ul li ul li
{
  margin-bottom:1px;
}
article ul li:last-child
{
  margin-bottom:0px;
}

aside ul
{
  margin-left:5px;
}
aside ul li
{
  margin-bottom:2px;
}
aside ul li:last-child
{
  margin-bottom:0px;
}

footer ul
{
  margin-left:5px;
}
footer ul li
{
  margin-bottom:2px;
}
footer ul li:last-child
{
  margin-bottom:0px;
}

.rouge
{
  color:#bb3222;  
}
.black
{
  color:black;  
}
.strong
{
  font-weight:bold;
}
.smallcaps
{
  font-variant:small-caps;
}

h1
{
  font-size:1.7em;
  padding-bottom:10px;
}
h2
{
  font-size:1.3em;
}
h3 
{
  font-size:1.1em;  
}
/* defaut size is 1em */
h5
{
  font-size:0.9em;
}
h6
{
  font-size:0.8em;
}

/* formatage images */
.imageflottante
{
  float:right;  
}

/* formatage footer page 1 */
footer
{
  clear:both;
  padding-top:10px;
  display:inline-block;
  position:relative;
  width:100%;
}
footer table
{
  width: 100%;
}
footer table td
{
  vertical-align:top;
}
footer table td
{
  width: 100%;
}

#copyright 
{
  padding-top: 10px;
  width:100%;
}
#copyright p
{
  text-align:center;
}
}

@media all and (min-device-width: 800px)
{
/* STYLE NORMAL SCREEN */

/* généralités valables pour toute la page*/
*
{
  margin: 0px;
  padding:0px;
  border:0px none;
}
html, body
{
  overflow:auto;
  height:100%;
  width: 100%;
  font-size:1em;
  font-family:  Berylium, Gentium, sans-serif;
  background-color:#fffff;
  color:#443213;
}
ul
{
  list-style-type: none;
}
p
{
  margin:auto;
  text-align:justify;
  vertical-align:baseline;
  padding-left:3px;
  padding-right: 5px;
  padding-bottom:5px;
}
a
{
  color:#443213;
}
a:hover
{
  color:#bb3222;  
}

header, footer, section
{
  display: block;
}
header
{
  width: 100%;
  border-bottom: 2px;
  border-color: #443213;
}

#bloc_page
{
  position:relative;
  height:auto;
  min-height:100%;
  width: 100%;
/*
  width: -moz-calc(100% - 4px);
  width: -webkit-calc(100% - 4px);
  width: calc(100% - 4px);
  font-weight: normal;
  border-left:#574019 2px inset;  
  border-right:#574019 2px inset;  
*/
}

/* le logo */
header aside
{
  margin:0;
  
  position:relative;
  vertical-align: center;
  width: 25%;
  height:173px;
  padding-left:50px;
  padding-top:30px;
  padding-bottom:0;
  float:left;
}

/* le titre */
header section
{
  margin:0;
  float:right;
  width:50%;
  padding-top:60px;
}



header table
{
  margin:0;
  float:right;
  width:60%;
  padding-top:30px;
margin-top:30px;
}

header table td #chris
{
  vertical-align: middle;
  margin:0px;
  position:relative;
  width:75%;
  text-align:right;

}

header table #christine
{
  vertical-align: middle;
  margin:0px;
  position:relative;
  width:75%;
  text-align:right;
padding-top:42px;
}

header table #logo4
{
  display:none;

}


/* menu navigation */
nav
{
  clear:both;
  display:inline-block;
  width: 100%;
  height: 50px;
  margin:30px 0px 0px 0px;
  border-color:#443213 inset;
}
nav ul, nav ul li
{
  text-align:center;
}
nav ul
{
  padding-top:5px;
}
nav ul li
{
  width:11.3%;
  float:left;
}
nav ul li:first-child
{
  margin-left:4.5%;
}
nav ul li:last-child
{
  margin-right:4.5%;
}

#main
{
  width: 100%;
  clear: both;
  white-space: nowrap;
}
#main section
{
  white-space: normal;
  display: inline-block;
}
#main aside
{
  white-space: normal;
  display: inline-block;
}

#slider
{
  width:620px; /* must be the same as the picture width */
  padding: 50px;
  vertical-align:top;
/*  height:550px; */
}
.background
{
/*  width:600px; */
/*  height:550px; */
  background:url(pics/deco_fond3.png);
  background-repeat: no-repeat;
  padding:50px;
}
.transbox
{
  width:450px;
  padding: 30px;
/*
  background:url(pics/);
*/

  color:#443213;
/*
  border:;
*/
  /* opacity:0.6; */
  /* filter:alpha(opacity=60); */ /* For IE8 and earlier */
}

.boiteprincipale
{
  display: inline-block;
  vertical-align:top;
  width:620px; /* must be the same as the picture width */
  padding: 50px;
  white-space: normal;
}

#main .filler
{
  width: -moz-calc(75.7% - 620px - 50px - 50px - 7px);
  width: -webkit-calc(75.7% - 620px - 50px - 50px - 7px);
  width: calc(75.7% - 620px - 50px - 50px - 7px);
  /* 620px=picture_width, 50px=padding, 24.3%=aside_width */
  /* not sure why we need to prune 7px more */
}

#main aside
{
  display: inline-block;
  vertical-align:top;
  padding-top: 50px;
  width:24.3%;
}

/* tableau aside */
table
{
  border-collapse: collapse;
  border: 2px; 
  border-color: #443213;
  width: 100%;
}
td, th
{
  border: 2px;
  border-color: #443213;
}
th, nav
{
  padding-top:12px;
  padding-bottom:12px;
  border:solid;
  border-width:3px;
  border-color:#443213;
  border-left:none;
  border-right:none;
  background-color:#E7C78E;
}

aside table tr td:first-child
{
  width: 50px;
}
aside table tr td:last-child /* over rule the above when colspan=2 */
{
  width: auto;
}
aside table tr td:nth-child(2)
{
  width: auto;
  padding: 5px;
  /* over ruled by the next two rules for the 2nd and last row */
}
aside table tr td h3
{
  padding-top:25px;
  padding-bottom:15px;
}
aside table tr:last-child td
{
  padding-bottom:25px;
}

/* menus aller directement p 6 et 7*/
.allerdirect
{
  padding-bottom:25px;
}

/* formatage textes */
article ul
{
  margin-left:50px;
}
article ul li:first-child
{
  margin-top:20px;
}
article ul li
{
  margin-bottom:20px;
}
article ul li ul li
{
  margin-bottom:5px;
}
article ul li:last-child
{
  margin-bottom:0px;
}

aside ul
{
  margin-left:50px;
}
aside ul li
{
  margin-bottom:25px;
}
aside ul li:last-child
{
  margin-bottom:0px;
}

footer ul
{
  margin-left:50px;
}
footer
{
  clear:both;
  padding-top:35px;
  display:inline-block;
  position:relative;
  width:100%;
  white-space: nowrap;
  vertical-align: top;
}
footer table
{
  display:inline-table;
  vertical-align: top;
  width: 24.3%;
  margin: 0;
  padding: 0;
  margin-right: 0.5%;
}
footer table:last-child
{
  margin-right: 0%;
}
footer table tr:nth-child(2) td
{
  padding-top:25px;
}

.rouge
{
  color:#bb3222;  
}
.black
{
  color:black;  
}
.strong
{
  font-weight:bold;
}
.smallcaps
{
  font-variant:small-caps;
}

h1
{
  font-size:1.7em;
  padding-bottom:25px;
}
h2
{
  font-size:1.3em;
}
h3 
{
  font-size:1.1em;  
}
/* defaut size is 1em */
h5
{
  font-size:0.9em;
}
h6
{
  font-size:0.8em;
}

article p
{
  margin-bottom: 30px;
}
article p:last-child
{
  margin-bottom: 0px;
}

/* formatage images */
.imageflottante
{
  float:right;  
}

#copyright 
{
  padding-top: 25px;
  width:100%;
}
#copyright p
{
  text-align:center;
}
}