﻿@charset "utf-8";
/* CSS Document */

/* ==== Rappel : les hack css : ===*/
/* pour ie8 ie9 et sup et navigateur moderne exemple ( :root #boite ) */
/* pour ie 6   : _color : #FFF *//*   *html #menu a { height: 27px;}   */
/* pour ie 6-7 : *color : #FFF */
/* pour ie 7   : *:first-child+html #menu ul a{ height: 20px; width: 150px;}  */
/*

/* ----------------------------- */
/* summary */
/* ----------------------------- */
/*
1- RESET
2- TEXTE
	- font
	- alignement
	- color
	- other (size marge etc...)
3- LAYOUT
	- position & display
4- COMMON
	- global
	- apparence - background
5- LIENS

6- MY PAGES
	- Header / nav
	- Contain
	- Acceuil
	- fresques

7 - MEDIA QUERY	
	
*/

/*-----------------------*/
/* == 1- RESET */
/*-----------------------*/
html, body, label { margin: 0; padding: 0; }
/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
/* max values */
img, table, td, blockquote, code, pre, textarea, input, video { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; word-wrap: break-word; }

/* normalize list */
ol, ul { list-style:none; padding:0; margin:0; }

/* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
img {vertical-align: middle;}

a img { border: none; /* élimine la bordure bleue */ }

/* switching box model for all elements */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /**behavior: url(/script/boxsizing.htc);*/}
/* box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */
/*
ie67 * {
	*behavior: url(/script/boxsizing.htc);
}
*/

/*---------------------------------------------*/
/*== 2- Texte
/*---------------------------------------------*/

	/*---FONT---*/
	.arialblack { font-family: "Arial Black", Gadget, sans-serif; }
	.arial { font-family: "Arial", Verdana, helvetica, sans-serif; }
	.upcase {text-transform:uppercase;}

	/*---Alignement--*/
	.tcenter { text-align: center; }
	.tright { text-align: right; }
	.tleft { text-align: left; }
	
	/*---Color---*/
	.browndark { color: #330000; }
	.brown { color: #473909; }
	.white { color: #FFF; }
	.orange { color: #f13d0c; }
	.turquoise { color: #0e808d; }
	.bleu { color: #304fa1; }
        
        /* p em { color: #0e808d;} */
	
	
	/*---Others--*/
	.underline { text-decoration: underline; }
	.nodeco { text-transform: none; text-decoration: none; text-shadow: none; }
	.bsmall { font-weight: 300; }
	.bnormal { font-weight: normal; }
	.bbig { font-weight: 700; }
	.bold { font-weight: bold; }
	.italic { font-style:inherit; }
	
	
	/*---font-sizing for content---*/
	/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
	/*calcul : font-size 14/12 = .8571em - line height : 1.5/0.8571 = 1.75em */
	
	h1, .h1-like { font-size: 1.8571em; font-weight: normal; line-height: 1.6154; margin: 0 0 10px 0; } /* equiv 26px */
	h2, .h2-like { font-size: 1.7143em; font-weight: normal; line-height: 1.75; margin: 0 0 10px 0; } /* equiv 24px */
	h3, .h3-like { font-size: 1.5714em; font-weight: normal; line-height: 1.909; margin: 0 0 10px 0; } /* equiv 22px */
	h4, .h4-like { font-size: 1.4286em; font-weight: normal; line-height: 1.05; margin: 0 0 10px 0; } /* equiv 20px */
	h5, .h5-like { font-size: 1.2857em; font-weight: normal; line-height: 1.1667; margin: 0 0 10px 0; } /* equiv 18px */
	h6, .h6-like { font-size: 1.1429em; font-weight: normal; line-height: 1.3125; margin: 0 0 10px 0; } /* equiv 16px */
	
/*	h1, h2, h3, h4, h5, h6 {margin: 0 0 5px 0; padding-top: 8px;}*/
        
        h1, h2, h3, h4, h5, h6 {margin: 0 0 5px 0; padding: 8px;}
        
	/* alternate font-sizing */
	.px10 { font-size: .7143em; line-height: 2.1; }
	.px12 { font-size: .8571em; line-height: 1.75; }
	.px14 { font-size: 1em; line-height: 1.5;} /* taille de référence */
	.px16 { font-size: 1.1429em; line-height: 1.3125; }
	.px18 { font-size: 1.2857em; line-height: 1.1667; }
	.px20 { font-size: 1.4286em; line-height: 1.05; }
	.px22 { font-size: 1.5714em; line-height: 0.95; }
	.px24 { font-size: 1.7143em; line-height: 0.87; }
	.px26 { font-size: 1.8571em; line-height: 0.81;}
	.px28 { font-size: 2em; line-height: 0.75; }
	.px30 { font-size: 2.1429em; line-height: 0.70; }
	
	/* alternative line height */
	.lh12 { line-height: 1.2; }
	.lh125 { line-height: 1.25; }
	.lh13 { line-height: 1.3; }
	.lh135 { line-height: 1.35; }
	.lh14 { line-height: 1.4; }
	
	
	/* avoid collapsing margins
	you might need this, depending on your design
	*/
	/*
	h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
		margin-top: 0;
	}
	*/
	/* avoid last-child bottom margin */
    /*p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, pre:last-child, table:last-child  {
		margin-bottom: 0;
	}*/
	
  /* avoid supp margin on nested elements */
  li p, li ul{
	  margin-top: 0;
	  margin-bottom: 0;
  }
  
  
  /* you shall not pass */
  textarea, table, td, th, code, pre, samp, div, p {
	  word-wrap: break-word;
	  -webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  -ms-hyphens: auto;
	  -o-hyphens: auto;
	  hyphens: auto;
  }
  
/*---------------------------------------------*/
/*== 3- LAYOUT
/*---------------------------------------------*/

/*----Position & display----------------*/

	/* just inline-block */
	.inbl { display: inline-block; vertical-align: middle; zoom: 1; *display: inline; /* hack pour ie 6 - 7 */}
	/* module, contains floats */
	.mod { padding: 1em; overflow: hidden;}
	
	/* left - right elements */
	.fleft { float: left; margin-right: 1em;}
	.fright { float: right; margin-left: 1em;}
	
	.mod .fleft, 
	.col .fleft { margin-right: 0; }
	.mod .fright, 
	.col .fright { margin-left: 0; }
	
        /* espacement avec plusieurs images  - figure */
        figure + figure {margin-left: 10px;}
        img + img {margin-left: 10px; }
        
	img.fleft, 
	img.fright { margin-bottom: 5px; }
	
	/* div center */
	.center { margin: auto; }
	
	/* visibility */
	.visually-hidden { position: absolute; left: -7000px; overflow: hidden; } /* hiding content */
	.desktop-hidden { display: none; } /* hidden on desktop */
	
	/*
	 * Clearfix: contain floats
	 *
	 * For modern browsers
	 * 1. The space content is one way to avoid an Opera bug when the
	 *    `contenteditable` attribute is included anywhere else in the document.
	 *    Otherwise it causes space to appear at the top and bottom of elements
	 *    that receive the `clearfix` class.
	 * 2. The use of `table` rather than `block` is only necessary if using
	 *    `:before` to contain the top-margins of child elements.
	 */

	.clearfix:before,
	.clearfix:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}
	
	.clearfix:after {
		clear: both;
	}

	
	/* contain floats */
	.clearfix:before, .clearfix:after, .mod:before, .mod:after { content: ""; display: table;}
	.clearfix:after, .mod:after { clear: both; }
	
	/*
	 * For IE 6/7 only
	 * Include this rule to trigger hasLayout and contain floats.
	 */
	.clearfix, .mod,{*zoom: 1;}
	
	
	/* blocks widths (percentage and pixels) */
	.w10    { width: 10%; }
	.w20    { width: 20%; }
	.w25    { width: 25%; }
	.w30    { width: 30%; }
	.w33    { width: 33.333%; }
	.w40    { width: 40%; }
	.w50    { width: 50%; }
	.w60    { width: 60%; }
	.w66    { width: 66.666%; }
	.w70    { width: 70%; }
	.w75    { width: 75%; }
	.w80    { width: 80%; }
	.w90    { width: 90%; }
	.w100   { width: 100%; }
	
	.w50p   { width: 50px; }
	.w100p  { width: 100px; }
	.w150p  { width: 150px; }
	.w200p  { width: 200px; }
	.w280p  { width: 280px; }
	.w300p  { width: 300px; }
	.w400p  { width: 400px; }
	.w500p  { width: 500px; }
	.w600p  { width: 600px; }
	.w700p  { width: 700px; }
	.w800p  { width: 800px; }
	.w960p  { width: 960px; }
	.mw960p { max-width: 960px; }
	



/*---------------------------------------------*/
/*== 4- COMMUN
/*---------------------------------------------*/

/*---global---*/
html { width: auto; height: auto; font-size: 62.5%; /* 62,5% soit 1em = 10px*/ }
body { font-size: 1.4em; line-height: 1.5;/* soit 14px */ 
       height: 100%; 
       background-image: url(../img/bg.gif);
/*       background-image: url(/img/page-bkg.jpg);*/
       background-repeat: repeat; 
       overflow: hidden; 
	  }    
      #contain { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: auto; z-index: 70; }

/*---Apparence - background---*/
.bgwo { background-color: rgba(255,255,255,0.5); } /* blanc */
.bgwo2 { background-color: rgba(255,255,255,0.5); } /* blanc */
.bgw { background-color: rgba(255,255,255,1); } /* blanc */
.bgbo { background-color: rgba(14,128,141,0.7); } /*bleu opacité*/
.bgb { background-color: rgba(14,128,141,1); } /*bleu normal*/
.bg { background-color: rgba(166,190,200,0.5); }

	.bg1 { background-color:tomato;}
	.bg2 { background-color:#43C6DB;}
	.bg3 { background-color:#90C;}
	.bg4 { background-color:#6F0;}
        
                     
        .bgbleuclear {background-color: rgba(63, 185, 190, 1);}
        .bgbleuclearo {background-color: rgba(63, 185, 190, 0.5);}
        

.shadowb { 
	-moz-box-shadow: 0px 4px 5px 0px #656565; 
	-webkit-box-shadow: 0px 4px 5px 0px #656565; 
	-o-box-shadow: 0px 4px 5px 0px #656565; 
	box-shadow: 0px 4px 5px 0px #656565; 
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=5);
	_behavior: url(../script/PIE.htc); /* hack pour ie6 */
	}

.borderb {border-bottom: 1px dotted #CCC;}        

/*--- HR---*/
hr {display: block; height: 1px; border: 0; border-bottom: 1px dotted #CCC;; margin: 1em 0; padding: 0; margin: 12px 0 20px 0;}
  hr.end {  text-align: center; }
  /* hr.end:after { content: "\273D \273D \273D"; height: 0; letter-spacing: 1em; color: #aaa; border: none;} */
  hr.clear {clear:both; margin: 1em 0 1em 0;}

 [data-tip] { /* on sélectionne l'attribut data-tip */
 position: relative;
 cursor: help;
 border-bottom: 1px dotted #aaa;
 *behavior: url(../script/PIE.htc);
 }
[data-tip]:hover:after { content: attr(data-tip); /* on récupère la valeur de l'attribut data-tip */ position: absolute; top: 1.5em; left: 0; white-space: nowrap; /* no wrapping */ padding: 5px 10px; background: #E69B00; color: #fff; }



/* ----------------------------- */
/*== 5- Liens*/
/* ----------------------------- */

/*---lien global---*/
a:link { color: #330000; text-decoration: none; }
a:visited { color: #330000; text-decoration: none; }
a:hover, a:active, a:focus { color: #f13d0c; text-decoration: underline; }

/*--- class lien blanc ---*/
a.awithe:link {color: #FFF; text-decoration: none; }
a.awithe:visited { color: #FFF; text-decoration: none; }
a.awithe:hover, a.awithe:active, a.awithe:focus { color: #FFF; text-decoration: underline; }

/*---page---*/
#boxlefttheme a, a:hover, a:active, a:focus { color:inherit;}

    
/* ----------------------------- */
/*== 6- MY PAGES*/
/* ----------------------------- */

/* == Header / Navigation*/

#logo { position: relative; top: 3px; left: 3px; z-index: 100; }

nav select{ display: none;}

#menu { position: absolute; top: 30px; left: 0px; width:100%; display: block; margin: 0; padding: 0 0 0 250px; list-style: none; background: #FFF; z-index: 90; border-bottom: solid #696969 1px;} /* ul */
#menu li { float: left; padding: 0 0 0 0; position: relative;}
#menu a { float: left; height: 35px; padding: 8px 19px 0px 0px; color: #999; text-transform: uppercase; text-decoration: none;}
*html #menu a { height: 27px;}              /* IE6 */
*:first-child+html #menu a { height: 27px;} /* IE7 */
#menu a.active { color: #f13d0c;}           /* lien courant */ 
    #menu li:hover > a { color: #000;}
    *html #menu li a:hover { color: #000;}  /* IE6 */
    #menu li:hover > ul{ display: block;}

/* Sous-menu */
#menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; width: 200px; left: 0; z-index: 99999; background: #FFF;}
*html #menu ul {width: 170px;}              /* IE6 */
*:first-child+html #menu ul {width: 170px;} /* IE7 */
    #menu ul li{ float: none; margin: 0; padding: 0; display: block;}
    #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
    #menu ul a{ padding: 10px; height: auto; display: block; white-space: nowrap; float: none; text-transform: none; border-bottom: dotted 1px;}
    #menu ul a.active { color: #f13d0c;} /* sous lien courant */ 

*html #menu ul a{ height: 10px; width: 150px;}/* IE6 */
*:first-child+html #menu ul a{ height: 20px; width: 150px;}/* IE7 */

#menu ul a:hover{ background: #0186ba;}
#menu ul li:first-child a{ border-top: dotted 1px;}
#menu ul li:first-child a:after{}
#menu ul li:first-child a:hover:after{}
#menu ul li:last-child a{ border-bottom: none;}

/* Rétablissement du flottement */
#menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

/* Donne le layaout a l'élément */
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */


/* == CONTAIN*/


/*---Left---*/
  /*---Page Infos---*/
  #boxleft { position: absolute; top: 80px; left: 3%; width: 18%;/* background-color: #0C3;*/ z-index: 80; }
    #boxleft div { padding: 0px 0px 4px 0px; margin-bottom: 4%; line-height: 1.4em; overflow : hidden;}
    #boxleft div h2 { padding: 8px 8px 8px 8px; }
    
  /*---Page Theme / Perso---*/
  #boxlefttheme { 
	  position: absolute; 
	  top: 80px; 
	  left: 30px; 
	  width: 45%; 
	  z-index: 80; 
	  max-width: 395px; 
	  min-width: 383px; 
	  *min-width:395px;  /* hack pour ie 7 probleme taille différente*/
	  _width: 395px;
	  }
    #boxlefttheme div { padding: 0px 0px 4px 0px; margin-bottom: 1%; line-height: 1.4em; }
        #boxlefttheme p { padding: 0px 0px 0px 15px; margin-bottom: 1%; line-height: 1.4em; }
        #boxlefttheme img { width: 20%; height: auto; max-width: 50%; }
	  

/*---right---*/
  /*---Page Infos---*/
  #boxright.home { position: absolute; top: 80px; left: 22%; width: 66%; padding: 10px 20px 0 20px; padding-bottom: 50px;}
  #boxright.home h3 { border-bottom: 1px dotted #CCC;}
  #boxright.home img { opacity: 1;
            -webkit-transition: all 300ms ease-out;  
               -moz-transition: all 300ms ease-out;  
                -ms-transition: all 300ms ease-out; 
                 -o-transition: all 300ms ease-out;  
                    transition: all 300ms ease-out;}
  #boxright.home img:hover { opacity: 0.6;}
      
      #boxright.home a#perso {width : 157px; height: 35px; display:inline-block; position: relative; background : url('../img/boutton-perso.png'); }
      #boxright.home a#perso:hover#perso {background-position:0px -35px; }
      #boxright.home a#theme {width : 157px; height: 35px; display:inline-block; position: relative; background : url('../img/boutton-theme.png'); }
      #boxright.home a#theme:hover#theme {background-position:0px -35px; }
      #boxright.home a.article {width: 140px; height: 168px; display: inline-block; position: relative;  text-decoration: none; margin-bottom: 4px;}      
        #boxright.home a.article img {border: none; width: 140px; height: 140px; padding: 8px; background: #FFF;}
        #boxright.home a.article span {position: absolute; left:10px; display: block; display:none;}
        #boxright.home a.article:hover span {display: block;}
        #boxright.home a.article span.bg {top:0; left:0; height:140px; width:140px; background: #8cb6cf  ; z-index:1}
        #boxright.home a.article span.titre {bottom:0px; left:0px; height:25px; width:140px; color: #FFF; z-index:2; text-align: center; background: #8cb6cf; display: block; padding-top: 2px;}
 
        
  #boxrightdossier { position: absolute; top: 80px; left: 22%; width: 66%;  padding-bottom: 20px; }
  #boxrightdossier h2 { border-bottom: 1px dotted #CCC;}
      #boxrightdossier figure {margin: 5px 2% 5px 2%; vertical-align: top;}
      #boxrightdossier figcaption {width: 200px; margin-bottom: 2%; margin-top: 1%;}
      #boxrightdossier a {width : 200px; height: 150px; display:inline-block; position: relative; margin-bottom: 1%;}
      #boxrightdossier a.presse {width : auto; height: auto; display:inline-block; position: relative; margin-bottom: 1%;}
      #boxrightdossier a.basic {width : auto; height: auto; display:inline;}
      *html #boxrightdossier a {margin-bottom: 4px;} /* IE6 */
      *html #boxrightdossier a.basic {margin-bottom: 0px;} /* IE6 */

        #boxrightdossier a img {width: 200px; height: 150px; border: none; }
        #boxrightdossier a.presse img {width: auto; height: auto; border: none; }
        
        
        #boxrightdossier a span {position: absolute; top:25px; left:25px; display : block; display:none;}
        #boxrightdossier a:hover span {display: block;}
        #boxrightdossier span.deco {top:0; left:0; height:150px; width:200px; z-index:2}
        #boxrightdossier span.bg {top:0; left:0; height:150px; width:200px; background: #3fb9be  ; z-index:1} 


        .videocontainer {
        	width : 100%;
        	height : 0;
        	padding-bottom: 50%;  /* 16/9em */
        	overflow: hidden;
        	position: relative;   /* les iframe enfant peuvent etre redimensionnée et positionnée */
        }

        .videocontainer.r1{
			padding-bottom: 100%;  /* 4-3 */
        }

        .videocontainer iframe, .videocontainer embed, .videocontainer object {
        	width: 100%!important; height: 100%!important;
        	position: absolute;
        	top: 0; left: 0;
        	z-index: -1;
        }     
    
  #boxrighttheme { position: absolute; top: 80px; left: 430px; width: 43%; right: 10%;}
      #boxrighttheme hr.end { padding-bottom:5%;}
      *#boxrighttheme hr.end {border-top: 1px dotted #ccc; border-bottom: 0px; margin-bottom:60px;}
      #boxrighttheme article p { text-transform: uppercase; font-weight: bold; }
      #boxrighttheme article p.fright { margin-top: 10px;}
      #boxrighttheme article ul {margin-bottom:20px; margin-left: 10%; margin-right: 2%; _width : auto; overflow:hidden;}
      *html #boxrighttheme article ul {margin-bottom:30px; margin-left: 5%; margin-right: 2%;} /* IE6 */
      #boxrighttheme article ul li {width: 42%; float: left;} 


	

/* ==Fresques*/

#fresque {padding: 80px 20px 5px 20px; margin-bottom: 1em; border-bottom: 1px dotted #CCC; text-align: left;
/*	_width: 760px; _width: expression( document.body.clientWidth < 600? "400px" : document.body.clientWidth > 1000? "1000px" : "600px" );*/
	 }
#fresque h3 {border-bottom: 1px dotted #CCC;}
#fresque h4 {border-bottom: 1px dotted #CCC;}
#fresque hr {margin:0.4em;}
/*#fresque p {max-width:400px; padding-bottom:0px;}*/
#fresque div#bio {padding: 10px;}
	#fresque img {border: 0px solid #330000;}
	#fresque img {_width: 100%;}
	#fresque img {max-width:none; max-height:none;}
        #fresque div#bio img {height: 150px; padding: 10px; background: #FFF; opacity : 1;
                        -webkit-transition: all 300ms ease-out;  
                           -moz-transition: all 300ms ease-out;  
                            -ms-transition: all 300ms ease-out; 
                             -o-transition: all 300ms ease-out;  
                                transition: all 300ms ease-out;}
        #fresque div#bio img:hover {opacity : 0.5;}
        #fresque div#bio h4 {padding-top: 0px;}
		a#next {width : 70px; height: 65px; display: inline-block; position: relative; background : url('../img/next.png'); }
		a#next:hover {background-position:0px -65px; }
		a#previous {width : 70px; height: 65px; display: inline-block; position: relative; background : url('../img/previous.png'); }
		a#previous:hover {background-position:0px -65px; }

		a#nextdisable {width : 70px; height: 65px; display: inline-block; position: relative; background : url('../img/nextdisable.png'); }	
		a#previousdisable {width : 70px; height: 65px; display: inline-block; position: relative; background : url('../img/previousdisable.png'); }


	.zoomecenter
	{
		width :100%;
		margin: 40px auto; 
	}
	.zoomecenter .zm-wrap
	{
		width:100%;
	}
	.zoomecenter .zm-wrap img
	{
		width:100%;
	}


/* ----------------------------- */
/* 7 - MEDIA QUERY  */
/* ----------------------------- */
/* ----------------------------- */
/* ==desktop and retina medias   */
/* ----------------------------- */

@media (min-width: 641px) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */
}

/* ---------------------------------- */
/* ==Responsive large / medium / tiny */
/* ---------------------------------- */

@media (max-width: 1024px) {

body {
	overflow: auto;
	margin: auto;
	height: auto;
}

#contain{
	position: static;
	margin: auto;
}

#boxright.home, #boxrightdossier {
	position : static;
	margin : auto;
	margin-top: 20px;
	width: 100%;
}

 #boxrighttheme {
 	position : static;
 	margin-top: 405px;
	width: 100%;
 }

 #boxlefttheme {
		left     : 0;
		max-width: 100%;
		min-width: 100%;
		width    : 100%;
 }

 #boxlefttheme img {
 	width : 68px;
 	height: auto;
 }

 #boxlefttheme div {
 	margin-bottom: 0;
 }

#boxleft {
	position: static;
	width   : 100%;
	margin  : auto;
}

#boxleft div {
	margin-bottom: 0;
}

#fresque {
	width: 80%;
	margin-top: 20px;
	padding-top: 20px;
}

}


@media (max-width: 768px) {

	
header {background-color: #fff; text-align: center;}
#logo {position: static;}
nav {text-align: center; background-color: #fff; height: 40px; padding-top: 10px;}
#menu {display:none;}
nav select {display:inline-block;}	

#boxright.home, #boxrightdossier {
	position : static;
	margin : auto;
	margin-top: 10px;
	width: 100%;
}

 #boxrighttheme {
 	margin-top: 384px;
 }

 #boxlefttheme {
		left     : 0;
		top:100px;
		max-width: 100%;
		min-width: 100%;
		width    : 100%;
 }

 #boxlefttheme img {
 	width : 68px;
 	height: auto;
 }

 #boxlefttheme div {
 	margin-bottom: 0;
 }

#boxleft {
	position: static;
	width   : 100%;
	margin  : auto;
}

#boxleft div {
	margin-bottom: 0;
}

#fresque {
	width: 100%;
	margin-top: 0px;
}

a#previous, a#previousdisable {
	margin:10px 0 10px 0;}

}