/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

 body{

 
       height: 100%;
	   background: #e8e8e8  url('../../images/bord_degrade2.png') top center repeat-y;
	   text-align: center; 
	  margin: 0;
    padding: 0;
 }
/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
#page,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  text-align: center; /* pour ie*/
	  margin: 0;
    padding: 0;
	
	height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 1000px;
		 
}

/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  *behavior: url("/path/to/boxsizing.htc");
  _display: inline;
  _overflow: hidden;
  _overflow-y: visible;
}
#header, #footer{
padding-left: 0px;
padding-right:0px;
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  *position: relative;
  *zoom: 1;
  
}
#main{
 background-color: white;
}
#page.productscss #main{
/*background-color: #888888;*/
}



#header:before,
#header:after,
#main:before,
#main:after,
#footer:before,
#footer:after {
  content: "";
  display: table;
}
#header:after,
#main:after,
#footer:after {
  clear: both;
}

/* Navigation bar */
/*@media all and (min-width: 480px) {*/
  #main {
    /* Move all the children of #main down to make room. */
    padding-top: 0px;
    position: relative;
	float:left;
	width: 1000px;
  }
  #navigation {
    /* Move the navbar up inside #main's padding. */
    position: absolute;
    top: 0;
    height: 3em;
    width: 100%;
  }
  
  #header{
  position:relative;
   box-shadow: 0 5px 20px #A39475;
    color: #CCCCCC;
  margin: 0px -20px 0px -20px;
  z-index: 300;
  }
 
  
  
  
  #banniere{	
	position: relative;
	width: 1000px;
    height: 250px;
	z-index: 100;
	background-color: white;
	}	

	#menu_bar_top{
		 position: relative;
		    float: left;
			width: 1000px;
			height: 38px;
			background-color: #E0E0E0;
			
			border-top: thin solid #C3C3C3;
			border-bottom: thin solid #C3C3C3;
			
		 }
		 
 #mod_drapeaux {
   
	float: left;
	text-align:left;
	width: 150px;
	margin-left: 10px;
	/*margin-top:-6px;*/
	 position: relative; 
	z-index: 110;/* pour que le menu ne soit pas caché par l'image de dessus en partie transparente*/
	
	height: 35px;
	padding-top: 5px;
}
#mod_drapeaux ul{
list-style-type: none;
display: inline;

}
#mod_drapeaux ul li{
margin-left: 5px;
}
#mod_drapeaux li{
float:left;
}
/* onglets ronds avec sous-menus*/
#menu_top {
   
	float: right;
	/*width: 100%;*/
	/*background:#DAE0D2 url(../images/menuonglets/bg_uni.gif) repeat-x bottom;*/
	/*background-color: #CFBFA6;*/
	font-family: Arial, Helvetica, sans-serif;
   font-size: 93%;
	line-height: normal;
	
	width: 350px;
	margin-left: 20px;
	
	 position: relative; 
	z-index: 110;/* pour que le menu ne soit pas caché par l'image de dessus en partie transparente*/
}
#menu_top ul {
	   margin: 0;
	   padding: 0 0 0 0;
	   list-style: none;	
	   margin-left: 0px; /* déplace le premier onglet*/
		
	z-index: 110;
}
#menu_top li {
      float:left;
      /*background:url(../images/menuonglets/left.gif) no-repeat left top;*/
		/*background: #bcaf9b;*/
      margin:0;
      padding: 0px 0px 0 0; /* padding-right (top) = espace entre onglets*/	
		margin-left: 0px;
		margin-right: 0px;
		
		z-index: 10;
}
#menu_top a {
	float: left;
	display: block;
	/*background:url(../images/menuonglets/right.gif) no-repeat right top;*/
	background: #bcaf9b;
	background: #9DC262;
	background-color: #64B4D9;
	background-color: #084C7B;
	background-color: #DDD3C0;
	background-color: #E0E0E0;
	padding: 10px 10px 10px 10px; /*padding du texte*/
	text-decoration: none;
	font-weight: bold;
	color: #765;
	color: #574b3e;
	color: white;
	color: black;
	
	z-index: 10;
	margin-left: 0px;
	/*width: 150px;*/
	border-right: thin solid #C3C3C3;
	z-index: 10;
}
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
#menu_top a {float:none;}
    /* End IE5-Mac hack */
	 
#menu_top a:hover {
      color:#333;
		color: gray;
}
#menu_top #current a:hover {
      color:#333;
		color: gray;
}

#menu_top #current 
/*,#menu_bar li.parent.active /* couleur current de l'onglet si sous-menu actif*/
{
      /*background-image:url(../images/menuonglets/left_on.gif);*/
		/*background-color: #ab9f8c;*/
		
      border-width:0;
}
#menu_top #current a
/*,#menu_bar li.parent.active a  /* couleur current de l'onglet si sous-menu actif*/
{
      /*background-image:url(../images/menuonglets/right_on.gif);*/
		background-color: #ab9f8c;
		background-color: #71A71B;
		background-color: #084C7B;
		background-color: #2e6387;
		
		background-color: #DDD3C0;
		background-color: #d0d0d0;
		
      color:#765;
		color: #574b3e;
		color: white;
		
		color: black;
		
      /*padding-bottom:4px;*/
}	

#menu_top ul li#current.parent{
	 /*background-image:url(../images/menuonglets/right_on.gif);*/
	 /*background-color: #ab9f8c;
	background-color: aqua;*/
}





#menu_top li ul {
	/* listes de deuxième niveau */
	position: absolute;
	background: orange;
	width: 1px;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
	
	z-index: 10;
}


#menu_top li ul ul {
/* position listes troisième niveau */
	margin: -28px 0 0 120px;
}
#menu_top li:hover ul ul, #menu_top li.sfhover ul ul {
/* position listes troisième niveau */
	margin: -28px 0 0 120px;
}
#menu_top li:hover ul ul, #menu_top li:hover ul ul ul, #menu_top li.sfhover ul ul, #menu_top li.sfhover ul ul ul {
	left: -999em;
}
#menu_top li:hover ul, #menu_top li li:hover ul, #menu_top li li li:hover ul, #menu_top li.sfhover ul, #menu_top li li.sfhover ul, #menu_top li li li.sfhover ul {
	/* listes imbriquées sous les items de listes survolés */
	left: auto;
}
#menu_top li:hover ul, #menu_top li.sfhover ul {
	margin-left: 0px; /* position de la première sous-liste*/
	margin-top: 0px;
	
}
#menu_top li:hover ul a, #menu_top li.sfhover ul a{
   /* décale le texte des sous-listes*/
	width: 120px !important;   /* pour tout les non I.E.*/    /* si l'on change la largeur ici, il faut aussi changer le margin-left plus haut*/
	width: 160px; /* pour I.E.*/
	background: #D5D0BA;
	/*background:url(../images/menuonglets/right_carre.gif) no-repeat right top;*/
	background-color: #bcaf9b;
	background: #9DC262;
	background-color: #64B4D9;
	background-color: #084C7B;
	background-color: #DDD3C0;
	
	padding: 5px 5px 5px 8px; /* padding texte sous-listes*/
		}
#menu_top li:hover ul li, #menu_top li.sfhover ul li{
	background: #D5D0BA;
	/*background:url(../images/menuonglets/left_carre.gif) no-repeat left top;*/
	background-color: #bcaf9b;
	background: #9DC262;
	background-color: #64B4D9;
	background-color: #084C7B;
	background-color: #DDD3C0;
	
   margin:0;
   /*padding:0 0 0 9px; */
	padding: 0 0 0 0px; 
}


#menu_top #current:hover ul a
/*,#menu_bar #current:hover a*/ /* l'onglet principal devient carré aussi au passage*/
{
/*background:url(../images/menuonglets/right_carre_on.gif) no-repeat right top;*/

background: #ab9f8c;
background-color: #71A71B;
background-color: #084C7B;
background-color: #2e6387;

background-color: #DDD3C0;
background-color: transparent;

color:#765;
color: #574b3e;
color: white;

color: black;

}
#menu_top #current:hover ul li
/*,#menu_bar #current:hover *//* l'onglet principal devient carré aussi au passage*/
{
/*background:url(../images/menuonglets/left_carre_on.gif) no-repeat left top;*/

background: #ab9f8c;
background-color: #71A71B;
background-color: #084C7B;
background-color: #2e6387;

background-color: #DDD3C0;

margin-top: 0px;
}

#menu_top #current:hover ul a:hover{
	color: #333;
	color: lightgray;
	color: transparent;
}

#menu_top ul li #current a /* si sous-menu actif ca reste carré*/ /* sous-menu si actif*/
{
/*background:url(../images/menuonglets/right_carre_on.gif) no-repeat right top;*/
background-color: #ab9f8c;
background-color: #71A71B;
background-color: #084C7B;
background-color: #2e6387;

background-color: #DDD3C0;


}
#menu_top ul li #current /* si sous-menu actif ca reste carré*//* sous-menu si actif*/
{
/*background:url(../images/menuonglets/right_carre_on.gif) no-repeat right top;*/
background-color: #ab9f8c;
background-color: #71A71B;
background-color: #084C7B;
background-color: #2e6387;

background-color: #DDD3C0;
}






#menu_top li.parent.active {	/*menu si sous-menu actif*/
	/*background: #ab9f8c;
	background-color: aqua;*/
}
#menu_top li.parent.active  a  {	/*menu si sous-menu actif*/
	background: #ab9f8c;
	background-color: #71A71B;
	background-color: #084C7B;
	background-color: #2e6387;
	
	background-color: #DDD3C0;
	
}
#menu_top li.parent.active ul a  {	/* remets le sous-menu non-actif, qui a été changé par la commande précédente*/
	background: #bcaf9b;
	background: #71A71B;
	background-color: #084C7B;
	background-color: #2e6387;
	
	
	background-color: #DDD3C0;
}


/*The active parent: li#current.parent.active
The sub: li#current.parent.active ul li
Active sub: li#current.active
The parent when a sub is active: li.parent.active
*/

#sidebarleft {
  text-align: center;
  float: left;
  width: 215px;
  height: 100%;
  margin-left: 20px;
  margin-bottom: 20px;

   }  


#slide_left {
   float: left;
   width: 400px;
   margin-left: 20px;
   margin-top: 40px;
   margin-bottom: 10px;
   
   position:relative;
   }  
#slide_left .skin-default {
position:relative;
}
#logo_devis{
float: left;
position: relative;
margin-top: 60px;
margin-left: 90px;
width: 200px;
}
#logo_devis_home{
float: left;
position: relative;
margin-top: 60px;
margin-left: 90px;
width: 200px;
}


			  /* grand box universel, bords arrondis transparents, taille du contenu ou largeur fixe */
/* left captures_slides*/
  #box3 {

   float: left; /*pour que la largeur s'adapte au contenu*/

	position: relative;

	margin-top: 180px;

	margin-left: 20px;

	width: 240px; /* nettre aussi width: 100% plus bas */

	/*padding-top: 30px;*/
	background-color: #E0E0E0;/*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure*/

}    


.box3_bg{
position:relative;
right: 15px;
background-color: #E0E0E0; /*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure; nécessaire parce que le right_side.gif doit être transparent pour pouvoir se superposer au top au cas où l'on souhaite que le texte soit sur le dégradé du top; uniquement pour I.E. car dans I.E. le z-index ne permet pas de passer le right-side  en-dessous)*/

}


    .boxuniversel3 {

	 position: relative;
	 
	 z-index:1;

    margin: 0px auto;

    background:  url('../../images//box//boxrondepetite3//leftside.gif') repeat-y left top;


	 float: none !important; /*moz*/

	 float: left ;  /*IE */		


    }      

      .boxuniversel_top3 {

		position: relative;
       
      background: url('../../images//box//boxrondepetite3//top.gif') no-repeat left top;

	   top: -15px; /*décalage en haut à cause de la transparence du coin*/

		/*margin-bottom: -14px;*/	
		

    }
	
    .boxuniversel_top3_int{
	position:relative;
	z-index: 30;
	}

     .boxuniversel_top3_int span {

		z-index: 30;

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite3//top-right.gif') no-repeat right top;	

		right: -15px;  /*décalage du coin à droite à cause de la transparence du coin*/

		padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/		
        padding-top: 15px;/*hauteur de l'image*/		


      }

		

      .boxuniversel_center3 {

		z-index: 20;

	   position: relative;

	   float: none !important; /*moz*/

	   float: left ;  /*IE */

	   background: url('../../images//box//boxrondepetite3//rightside.gif') repeat-y right top;

	   right: -15px;/*décalage du coin à droite à cause de la transparence du coin*/

		/*background-color: white;*/
	

		margin-top: -15px;
	margin-top: -15px;	/*faire passer le texte au-dessus du dégradé top*/

		margin-bottom: -15px;

		padding-right: 15px;
		
		

      }

			 

	.boxuniversel_texte3 {			

	position: relative;
	
	width: 100%; /* uniquement si box largeur fixe pour I.E.*/

}


      .boxuniversel_bottom3 {

	  position: relative;

      background: url('../../images//box//boxrondepetite3//bottom.gif') no-repeat left bottom;

	  top: 15px;/*décalage du bottom en bas à cause de la transparence du coin;  height-1px*/ 	
	  
	  height: 15px;
	

     }

      .boxuniversel_bottom3 span {	

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite3//bottom-right.gif') no-repeat right top;

	  right: -15px; /*décalage du coin à droite à cause de la transparence du coin*/

	  /*padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/

	   height: 15px;
	    
     }

    
	
	 /* grand box universel, bords arrondis transparents, taille du contenu ou largeur fixe */
/* right accueil premier*/
  #box5 {

   float: left; /*pour que la largeur s'adapte au contenu*/

	position: relative;

	margin-top: 50px;


	width: 440px; /* nettre aussi width: 100% plus bas */

	/*padding-top: 30px;*/
	background-color: white;/*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure*/
}    

.box5_bg{
position:relative;
right: 15px;
background-color: white; /*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure; nécessaire parce que le right_side.gif doit être transparent pour pouvoir se superposer au top au cas où l'on souhaite que le texte soit sur le dégradé du top; uniquement pour I.E. car dans I.E. le z-index ne permet pas de passer le right-side  en-dessous)*/

}


    .boxuniversel5 {

	 position: relative;
	 
	 z-index:1;

    margin: 0px auto;

    background:  url('../../images//box//boxrondepetite5//leftside.gif') repeat-y left top;


	 float: none !important; /*moz*/

	 float: left ;  /*IE */		


    }      

      .boxuniversel_top5 {

		position: relative;
       
      background: url('../../images//box//boxrondepetite5//top.gif') no-repeat left top;

	   top: -15px; /*décalage en haut à cause de la transparence du coin*/

		/*margin-bottom: -14px;*/	
		

    }
	
    .boxuniversel_top5_int{
	position:relative;
	z-index: 30;
	}

     .boxuniversel_top5_int span {

		z-index: 30;

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite5//top-right.gif') no-repeat right top;	

		right: -15px;  /*décalage du coin à droite à cause de la transparence du coin*/

		padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/		
padding-top: 60px;/*hauteur de l'image*/		


      }

		

      .boxuniversel_center5 {

		z-index: 20;

	   position: relative;

	   float: none !important; /*moz*/

	   float: left ;  /*IE */

	   background: url('../../images//box//boxrondepetite5//rightside.gif') repeat-y right top;

	   right: -15px;/*décalage du coin à droite à cause de la transparence du coin*/

		/*background-color: white;*/
	

		margin-top: -15px;
	margin-top: -40px;	/*faire passer le texte au-dessus du dégradé top*/

		margin-bottom: -15px;

		padding-right: 15px;
		
		

      }

			 

	.boxuniversel_texte5 {			

	position: relative;
	
	width: 100%; /* uniquement si box largeur fixe pour I.E.*/

}


      .boxuniversel_bottom5 {

	  position: relative;

      background: url('../../images//box//boxrondepetite5//bottom.gif') no-repeat left bottom;

	  top: 15px;/*décalage du bottom en bas à cause de la transparence du coin;  height-1px*/ 	
	  
	  height: 15px;
	

     }

      .boxuniversel_bottom5 span {	

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite5//bottom-right.gif') no-repeat right top;

	  right: -15px; /*décalage du coin à droite à cause de la transparence du coin*/

	  /*padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/

	   height: 15px;
	    
     }




/* grand box universel, bords arrondis transparents, taille du contenu ou largeur fixe */
/* right accueil deuxième*/
  #box6 {

   float: left; /*pour que la largeur s'adapte au contenu*/

	position: relative;

	margin-top: 80px;

	padding-bottom: 0px;

    left: -160px;

	width: 600px; /* nettre aussi width: 100% plus bas */
/*padding-top: 30px;*/
	background-color: white;/*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure*/
	
}    



.box6_bg{
position:relative;
right: 15px;
background-color: white; /*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure; nécessaire parce que le right_side.gif doit être transparent pour pouvoir se superposer au top au cas où l'on souhaite que le texte soit sur le dégradé du top; uniquement pour I.E. car dans I.E. le z-index ne permet pas de passer le right-side  en-dessous)*/

}


    .boxuniversel6 {

	 position: relative;
	 
	 z-index:1;

    margin: 0px auto;

    background:  url('../../images//box//boxrondepetite6//leftside.gif') repeat-y left top;


	 float: none !important; /*moz*/

	 float: left ;  /*IE */		


    }      

      .boxuniversel_top6 {

		position: relative;
       
      background: url('../../images//box//boxrondepetite6//top.gif') no-repeat left top;

	   top: -15px; /*décalage en haut à cause de la transparence du coin*/

		/*margin-bottom: -14px;*/	
		

    }
	
    .boxuniversel_top6_int{
	position:relative;
	z-index: 30;
	}

     .boxuniversel_top6_int span {

		z-index: 30;

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite6//top-right.gif') no-repeat right top;	

		right: -15px;  /*décalage du coin à droite à cause de la transparence du coin*/

		padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/		
padding-top: 60px;/*hauteur de l'image*/		


      }

		

      .boxuniversel_center6 {

		z-index: 20;

	   position: relative;

	   float: none !important; /*moz*/

	   float: left ;  /*IE */

	   background: url('../../images//box//boxrondepetite6//rightside.gif') repeat-y right top;

	   right: -15px;/*décalage du coin à droite à cause de la transparence du coin*/

		/*background-color: white;*/
	

		margin-top: -15px;
	margin-top: -70px;	/*faire passer le texte au-dessus du dégradé top*/

		margin-bottom: -15px;

		padding-right: 15px;
		
		

      }

			 

	.boxuniversel_texte6 {			

	position: relative;
	
	width: 100%; /* uniquement si box largeur fixe pour I.E.*/

}
#sidebar_left_module2{
/*text-align: left;/*nécessaire pour le lof article scroller dans I.E.*/

   float: left; 

	position: relative;

	margin-top: 180px;

	margin-left: 20px;

	width: 240px; 

}


      .boxuniversel_bottom6 {

	  position: relative;

      background: url('../../images//box//boxrondepetite6//bottom.gif') no-repeat left bottom;

	  top: 15px;/*décalage du bottom en bas à cause de la transparence du coin;  height-1px*/ 	
	  
	  height: 15px;
	

     }

      .boxuniversel_bottom6 span {	

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetite6//bottom-right.gif') no-repeat right top;

	  right: -15px; /*décalage du coin à droite à cause de la transparence du coin*/

	  /*padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/

	   height: 15px;
	    
     }





   #sidebar_right {  

     float: right;
     position: relative;
	 text-align: center;  
     width: 500px;
	 } 
   
   #sidebar_right div.contextual-links-wrapper {
    right: 25px;
    top: 15px;
}
   
   
#slogan{
float: left;
position: relative;
/*background-image: url('../images/banniere_web_slogan2.jpg');*/
background-color: #A5A5A5;
left: -20px;
width: 517px;
height: 100px;
margin-top: 40px;
border-style: outset;
border-right-style: none;
/*border-color: #A5A5A5;*/


}




/*----------------------------------------------*/
		
/*}

/**
 * Use 3 grid columns for smaller screens.
 */
/*@media all and (min-width: 480px) and (max-width: 959px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 2 columns, starting in 2nd column from left. */
  /*.sidebar-first #content {*/
  
  /* voir template.php et page.tlp.php <div id="content ...*/
  /* #content.nosidebarright{
     text-align: justify;	
	position: relative;	
	float: left;	
	display: inline;		
	width: 780px;	
	padding: 10px 10px 10px 10px;	
	margin: -50px 20px 20px 25px;
	overflow: hidden;
	background-color: none;
    border: none;	
	background-color: #C7BFAB;
    border: 1px solid #EB7C27;
  }*/
 
  body.page-views #content.nosidebarright{
	background-color: transparent;
    border: none;	
  }
  
  body.page-collection #content.nosidebarright{
  background-color: black;
  }
  
  /* classe mycssclass ajouté à certains content types; fond noir pour certains types de produits comme Mandalas; fond clair pour le reste, p.ex. livres)*/
  /* voir template.php et page.tpl.php*/
   #content.productscss {
  /*background-color: black;
  color: white;*/
  
  /*width: 826px; 
  border: 1px solid #266573;
  margin: 0 0 0 2px;
  margin-top: -68px;*/
  }
 
  /*#content.sidebarrightpresent{
    text-align: justify;	
	position: relative;	
	float: left;	
	display: inline;		
	width: 650px;	
	padding: 20px 20px 20px 20px;	
	margin: -50px 20px 20px 45px;
	overflow: hidden;
	background-color: #EB7C27;
	border: 1px solid #266573;	
  }*/
  
   
  
  
  table.views-view-grid  td.viewrowclass{
 background-color: #C7BFAB;
    border: 1px solid #EB7C27;
  margin: 10px; 
  padding: 20px;
  width: 50%;
  vertical-align: top;
  
  }
   table.views-view-grid {
  border-collapse: separate;
    border-spacing: 15px;
   }
 #header a:link{
 /*color:red;*/
 }
  

  /* Span 1 column, starting in 1st column from left. */
  /*.sidebar-first .region-sidebar-first {*/
  .region-menu_left{
    float: left;
	text-align: center;	
	float: left;	
	width: 174px;	
	height: 100%;	
	 background-color: #266573;
	 margin-left: -2px;
	
  }
 
  
   /**
   * The layout when there is also a right sidebar.
   */

  /* Span 3 columns, starting in 2nd column from left. */
  /*.sidebar-right #content {
    float: left;
    width: 60%;
    margin-left: 20%;
    margin-right: -80%;
  }*/


  /* Span 1 column, starting in 5th column from left. */
   .region-sidebarright {
    float: right;
    width: 89px;
    margin-top: 20px;	
	margin-right: -2px;
	
  }
  
 .region-sidebarsocial {	
	text-align: justify;	
	float: right;	
	width: 200px !important;
	width: 200px;	
	margin-top: 30px;	
	margin-bottom: 30px;	
	margin-right: -2px;
	 border-left-color: gray;
	 border-left-style: solid;
	 border-left-width: 1px;
	 padding-left: 17px;
	 padding-right: 13px;
	  background-color: #266573;
	  padding-bottom: 20px;
 }  
 .region-modulecontent2{
	text-align: justify;	
	position: relative;	
	float: left;	
	display: inline;		
	width: 600px;	
	padding: 10px 15px 10px 15px;	
	/*overflow-y: auto;*/	
	overflow: hidden;
	margin-left: 60px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 30px;
	border: 1px solid #266573;	
	background-color: #EB7C27;
	
	}

 
#navigation {
float: left;
background-color: #266573;
width: 174px;
}



#content {



	text-align: justify;





	padding: 5px 15px 10px 15px;

   


}    


/* box content*/
  #boxC {

   float: left; /*pour que la largeur s'adapte au contenu*/

	position: relative;

	margin-top: 50px;

	
	margin-left: 100px;

	width: 800px; /* nettre aussi width: 100% plus bas */
	
	padding-bottom: 100px;

	/*padding-top: 30px;*/
	background-color: white;/*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure*/
}    

.boxC_bg{
position:relative;
right: 15px;
background-color: white; /*mettre la couleur de l'intérieur (fond du texte), si différent de la couleur extérieure; nécessaire parce que le right_side.gif doit être transparent pour pouvoir se superposer au top au cas où l'on souhaite que le texte soit sur le dégradé du top; uniquement pour I.E. car dans I.E. le z-index ne permet pas de passer le right-side  en-dessous)*/

}


    .boxuniverselC {

	 position: relative;
	 
	 z-index:1;

    margin: 0px auto;

    background:  url('../../images//box//boxrondepetiteC//leftside.gif') repeat-y left top;


	 float: none !important; /*moz*/

	 float: left ;  /*IE */		


    }      

      .boxuniversel_topC {

		position: relative;
       
      background: url('../../images//box//boxrondepetiteC//top.gif') no-repeat left top;

	   top: -15px; /*décalage en haut à cause de la transparence du coin*/

		/*margin-bottom: -14px;*/	
		

    }
	
    .boxuniversel_topC_int{
	position:relative;
	z-index: 30;
	}

     .boxuniversel_topC_int span {

		z-index: 30;

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetiteC//top-right.gif') no-repeat right top;	

		right: -15px;  /*décalage du coin à droite à cause de la transparence du coin*/

		padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/		
padding-top: 60px;/*hauteur de l'image*/		


      }

		

      .boxuniversel_centerC {

		z-index: 20;

	   position: relative;

	   float: none !important; /*moz*/

	   float: left ;  /*IE */

	   background: url('../../images//box//boxrondepetiteC//rightside.gif') repeat-y right top;

	   right: -15px;/*décalage du coin à droite à cause de la transparence du coin*/

		/*background-color: white;*/
	

		margin-top: -15px;
	margin-top: -40px;	/*faire passer le texte au-dessus du dégradé top*/

		margin-bottom: -15px;

		padding-right: 15px;
		
		

      }

			 

	.boxuniversel_texteC {			

	position: relative;
	
	width: 100%; /* uniquement si box largeur fixe pour I.E.*/

}


      .boxuniversel_bottomC {

	  position: relative;

      background: url('../../images//box//boxrondepetiteC//bottom.gif') no-repeat left bottom;

	  top: 15px;/*décalage du bottom en bas à cause de la transparence du coin;  height-1px*/ 	
	  
	  height: 15px;
	

     }

      .boxuniversel_bottomC span {	

      display: block;

      position: relative;

      background: url('../../images//box//boxrondepetiteC//bottom-right.gif') no-repeat right top;

	  right: -15px; /*décalage du coin à droite à cause de la transparence du coin*/

	  /*padding-top: 15px; /* au lieu de height, car sinon I.E. n'adapte plus la taille du box au contenu, car layout spécifié*/

	   height: 15px;
	    
     }

 
 /* grand box universel, bords arrondis transparents, taille du contenu ou largeur fixe */
/* dans bande_footer*/

#box4 {

   float: left; /*pour que la largeur s'adapte au contenu*/

	position: relative;

	margin-top: 20px;

	margin-right: 20px;
	margin-bottom: 20px;

	width: 420px; 

	padding-top: 10px;
	
	
	margin-left: 60px;
	
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: white;
	border-style: solid;
	border-color: #A5A5A5;
	border-width: thin;
	
	

}    

   
 
 
#cclear{

	clear:both;


 }



    #bande_bas{
    float: left;
	position: relative;
    width: 1000px;
    height: 105px;



	 }


#bande_bas_droite{
float: right;
position:relative;
background-image: url('../../images/smoke_coin_droit.png');
height: 105px;
width: 106px;

}

#bande_footer { 
   position: relative;
   float: left;        
	text-align: center;
					 
	width: 1000px;
	background-color: #E8E8E8;
    border-top-color: #C3C3C3;
	border-top-style: solid;
	border-top-width: thin;
	
	border-bottom-color: #C3C3C3;
	border-bottom-style: solid;
	border-bottom-width: thin;
	}

	#footer_right{
	float: right;
	width: 300px;
	}
	
	#footer_images{
	position: relative;
	float: right;
	margin-top: 20px;
	margin-right: 10px;
	text-align: right;
	}
	#footer{	
	position: relative;
	width: 300px;
	font-style: normal;
	font-size: medium;
	text-align: right;
	
	height: 35px;
	margin-top: 130px;
	}    	


  
	
	#bottom2{		
	position:relative;
	/*float: left;*/	
	padding-bottom: 1px;
	padding-top: 3px;
	font-size: 12px;
	background-color: #E0E0E0;
	}		 


   


	#footer a:link, a:visited, a:hover, a:active {



		color: black;



	}



	



	#footer ul{



		



		float: right;



		text-align: right;



	}



	#footer li{



		display: inline; 



      list-style-type: none;



		float: right;



		text-align: right;



	}



	#footer a{



	display: block;



	padding: 0 10px;



	color: black;



	float: right;
	float: left;
	



	text-align: right;
	text-align:left;



}
#footer menu, #footer ol, #footer ul{
margin: 0px;
}


 .webform-client-form label {
   width: 130px;

  float: left;
   text-align:left; 
}
.webform-component-textarea label{
float: none;
display: block;

}
.form-type-checkbox{
padding-left: 10px;
}
.form-type-checkbox input{
float: left;
vertical-align: baseline;
line-height: normal;
margin-top: 5px;
margin-right: 5px;
}
.form-type-checkbox label{
vertical-align: baseline;
line-height: normal;
padding-right: 10px;
}
.form-type-checkbox{
display: inline-block;
}
.webform-client-form .form-checkboxes label {
    width: auto;
}	
	
/*jcarousel captures web*/	
.jcarousel-skin-tango .jcarousel-item {
    background: none repeat scroll 0 0 #C7BFAB;
	width: 190px;
	height: 127px;
}
.jcarousel-skin-tango .jcarousel-container {
    background: none repeat scroll 0 0 #E0E0E0;
    border: none;
    border-radius: 20px;
    margin: auto;
}
 .jcarousel-skin-tango .jcarousel-item {
  padding: 0;
  
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    height: 450px;
    padding: 30px 20px;
    width: 193px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical, .jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    /*background-position: 0 -64px;
    left: 55px;*/
	background-position: 30px 0px;
	left: 92px;
    position: absolute;
    top: 5px;
}
.jcarousel-skin-tango .jcarousel-next-vertical, .jcarousel-skin-tango .jcarousel-next-vertical:hover {
    /*background-position: 0 -96px;*/
	 background-position: 30px 0px;
    bottom: 5px;
    left: 92px;
    position: absolute;
}
.jcarousel-skin-tango .jcarousel-next, .jcarousel-skin-tango .jcarousel-next:hover {
     background: url("../../images/arrow-bottom.png")no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     display: block;
    height: 36px;
    width: 36px;
}
.jcarousel-skin-tango .jcarousel-prev, .jcarousel-skin-tango .jcarousel-prev:hover {
    background: url("../../images/arrow-top.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 36px;
    width: 36px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin: 10px 0;
}

/*slideshow web slides*/
.views-slideshow-pager-field-item{
float:left;
/*padding: 3px;*/
/*background-color: gray;*/
}

.views-slideshow-controls-bottom .views-slideshow-pager-field-item {
   /* background: url("../../images/slide_nav.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    overflow: hidden;
    text-indent: 30px;
    width: 25px;
    z-index: 99;*/
	
	
	background: none repeat scroll 0 0 #334;
    border-radius: 6px;
    cursor: pointer;
    display: block;
    float: left;
    height: 12px;
    margin-right: 4px;
    opacity: 0.3;
    width: 12px;
	
	
}
.views-slideshow-controls-bottom a:link{
color: transparent;
}
.views-slideshow-controls-bottom .views-slideshow-pager-field-item:hover{
 /*background: url("../../images/slide_nav_active.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);*/
 opacity: 0.8;
}
.views-slideshow-controls-bottom .views-slideshow-pager-field-item.active{
 /*background: url("../../images/slide_nav_active.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);*/
 
 opacity: 0.8;
}

.views-slideshow-controls-bottom {
    top: 20px;
    position: absolute;
    right: 10px;
    z-index: 99;
}

.webslidetextwrapper{
/*position: relative;
left: 30px;
top: -130px;*/
position: absolute;
left: 30px;
bottom: 40px;
background-color: #E0E0E0;
width: 300px;
text-align: left;

 /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(224, 224, 224) transparent;
    /* RGBa with 0.8 opacity */
    background: rgba(224, 224, 224, 0.85);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E0E0E0, endColorstr=#C0E0E0E0);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E0E0E0, endColorstr=#C0E0E0E0)";

}
.webslidetitel{
font-size: 24px;
padding: 10px 5px 5px 10px;

}
.webslidebody{
color: #505050;
padding: 2px 5px 10px 10px;

}



a.contextual-links-trigger {
width: 20px;
}

   div.contextual-links-wrapper { /* liens "éditer*/
    right: 20px;
    top: 2px;
  
} 

/* first hide all children*/
/*.menu-block-wrapper li.expanded  ul.menu  {
display:none;
}
/* now unhide children of active parent*/
/*.menu-block-wrapper  .expanded.active-trail.active .menu  {
display:block;
}



  /*}

/**
 * Use 5 grid columns for larger screens.
 */
/*@media all and (min-width: 960px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 4 columns, starting in 2nd column from left. */
  /*.sidebar-first #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  /*.sidebar-first .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 4 columns, starting in 1st column from left. */
  /*.sidebar-second #content {
    float: left;
    width: 80%;
    margin-left: 0%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 5th column from left. */
  /*.sidebar-second .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars.
   */

  /* Span 3 columns, starting in 2nd column from left. */
  /*.two-sidebars #content {
    float: left;
    width: 60%;
    margin-left: 20%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 1st column from left. */
  /*.two-sidebars .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /* Span 1 column, starting in 5th column from left. */
  /*.two-sidebars .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }
}
*/

/*750px*/
@media only screen and (max-width: 1020px) {

#page, .region-bottom {
 width: 750px;
 }
 #banniere {
 width: 750px;
 height: 187px;
 }
#menu_bar_top {
width: 750px;
}
#main{
width: 750px;
}
#slide_left{
margin-top: 170px;
margin-left: 50px;
}
#box5{
margin-top: 310px;
right: 60px;
}
#logo_devis_home{
margin-top: -370px;
margin-left: 10px;
width: 160px;
z-index: 100;
}
#logo_devis{
margin-top: -110px;
margin-left: 10px;
width: 160px;
z-index: 100;
}
#sidebar_left_module2{
margin-top: 480px;
margin-left: 5px;
}
#box6{
width: 400px;
left: 70px;
margin-bottom: 10px;
}
#bande_bas{
width: 750px;
}
#bande_footer{
width: 750px;
}
#box4{
margin: 20px 10px 20px 0px;
width: 430px;
}
#footer_right{
width: 270px;
}
#footer{
width: 270px;
}
#boxC{
width: 650px;
margin-left: 60px;
padding-bottom: 50px;
}
}

/*500px*/	

	
	@media only screen and (max-width: 760px) {
	
	#page, .region-bottom {
    width: 500px;
     }
	 #banniere {
    width: 500px;
    height: 125px;
    }
   #menu_bar_top {
    width: 500px;
    }
   #main{
    width: 500px;
    }
	#mod_drapeaux {
	width: 90px;
	}
	#logo_devis_home{
	width: 0px;
	height: 0px;
	display:none;
	}
	#slide_left {
    margin-left: 30px;
    margin-top: 180px;
    }
   #sidebar_right{
    width: 250px;
    }
   #slogan{
   margin-top: 30px;
   left: -250px;
   }
   #box5{
   margin-top: 350px;
   right: 210px;
   }
   #sidebar_left_module2 {
    margin-left: 110px;
    margin-top: 1120px;
   }
   #box6{
   left: -190px;
   }
   #bande_bas {
    width: 500px;
   }
   #bande_footer {
    width: 500px;
   }
  
   #box4 {
    margin: 20px 10px 5px 20px;
   }
   #footer_right {
    width: 500px;
   }
   #footer_images{
   float: left;
   margin-top: 0px;
   margin-left: 40px;
   margin-bottom: 20px;
   }
   #footer{
   float: right;
   margin-top: 70px;
   margin-right: 20px;
   }
   #boxC {
    margin-left: 35px;
    padding-bottom: 30px;
    width: 450px;
   }
   #logo_devis {
    margin-left: 10px;
    margin-top: 0px;
    width: 160px;
   }
	}
	
	
	/*310px*/	
	
	@media only screen and (max-width: 510px) {
	
	#page, .region-bottom {
    width: 310px;
     }
	 #banniere {
    width: 310px;
    height: 77px;
    }
   #menu_bar_top {
    width: 310px;
	height: 80px;
    }
	#menu_top{
	width: 310px;
	margin-left: 0px;
	font-size: 70%;
	}
   #main{
    width: 310px;
    }
	#sidebarleft{
	width: 140px;
	margin-left: 5px;
	}
	#sidebar_right{
	width: 140px;
	}
	#slogan{
	width: 0px;
	height: 0px;
	display: none;
	}
	#slide_left{
	margin-top: 20px;
	margin-left: 10px;
	width: 280px;
	}
	
	.views_slideshow_cycle_main {
    width: 100%;
    float: left;
    }
   .views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
     width: 100% !important;
     height: auto;
    }
   .views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
     width: 100% !important;
     height: auto;
    }
    .views_slideshow_cycle_main .field-content {
     max-width: 100%;
     width: 100%;
    }
   .views_slideshow_cycle_main .field-content img {
     max-width: 100%;
     width: 100%;
     height: auto;
     margin: 0;
     padding: 0;
    }
    .webslidetextwrapper{
     width: 250px;
    }
    .webslidetitel {
      font-size: 16px;
    }
    .webslidebody{
    font-size: 12px;
     }
   #box5{
    margin-top: 250px;
    width: 270px;
    right: 143px;
    }
   #box6{
   width: 270px;
   left: -140px;
   }
   #sidebar_left_module2 {
    margin-left: 30px;
    margin-top: 1420px;
   }
   #bande_bas{
    width: 310px;
    }
	 #bande_footer {
    width: 310px;
   }
  
	#box4{
	width: 290px;
	margin: 10px 0px 5px 0px;
	}
	#box4 table{
	width: 270px;
	margin-left: 30px;
	}
	#box4 table td{
	column-width:200px;
    -moz-column-width:200px; /* Firefox */
    -webkit-column-width:200px; /* Safari and Chrome */
    display: inline-block;
	}
	#box4 table td + td {
	column-width:10px;
    -moz-column-width:10px; /* Firefox */
    -webkit-column-width:10px; /* Safari and Chrome */
    }
	#box4 table td + td + td{
	column-width:0px;
    -moz-column-width:0px; /* Firefox */
    -webkit-column-width:0px; /* Safari and Chrome */
    border-style: none none none none;
    visibility: hidden;
	}
	#box4 table td + td + td + td{
	column-width:200px;
   -moz-column-width:200px; /* Firefox */
   -webkit-column-width:200px; /* Safari and Chrome */
    visibility: visible;
	}
	#footer_right {
    width: 310px;
     }
	 #footer {
	 margin-top: 0px;
	 }
	 #boxC {
    margin-left: 30px;
    padding-bottom: 30px;
    width: 270px;
	margin-top: 20px;
}
	}
	/*#container{
    width: 500px;
	}
	#bande_top1{
	width: 500px;	
	height: 100px;	
	margin-top: 5px;
	background-image: url('../images/banniere4_750.jpg');
	background-size: 100%;
	}
	
	#bande_top_gen{	
	position: relative;
	height: 246px;	
	}		  		  
	
	#bande_top_c1{
	display:none;
	}
	#mod_flash {
	width: 500px;
	height: 246px;
	margin-left: 0px;
	padding-left: 0px;
	}
	
	#mod_flash object{
	width: 500px;
	height: 246px;
	}
	
	#wrapper{	   
	width: 500px;	 	
	}	  
	#menu_top {
	width: 500px;
	}
	
    #cadre1{
	display:none;	
	}
	#cadre1_mobile{
	width:150px;
	height: 310px;
	}
	
	
	#cadre2{
	position:relative;
	float:left;
	width:500px;
	height: 210px;
	padding:10px;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-left: 0px;
	
	}
	
	#cadre3{
	width:250px;
	height: 180px;
	background-color: black;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 20px;
	}
	
	#content {		
	width: 500px;	
	}  
	#content .mentionslegales {		
	width: 430px;	
	}  
	#content .concepts {		
	width: 480px;	
	}  
	#content .concepts  td{		
	display:block;
	}  
	#content .concepts table {		
	width: 480px;	
	}  
	#content .contact{
	width: 400px;
	margin-left: 50px;
	}
	#content .contact td{
	display:block;
	}
	#content .contact table{
	margin-left: 0px;
	}	
	.photoergo {
	width: 400px;
     }	
	 .photomass{
	 width: 300px;
	 }
	#panorama{
	width: 500px;
	height: 175px;
	}	
	#bottom{		
	width: 500px;
	}	
	#footer{	
	width: 500px;
	}    
	#footer-left{	
	width: 500px;
	}    
	#footer-right{	
	width: 500px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-color: #C42026;
	}    
	
	
	/*310px*/	
	
	
	
	/*@media only screen and (max-width: 510px) {
	
	#container{
    width: 310px;
	}
	#bande_top1{
	width: 310px;	
	height: 90px;	
	margin-top: 5px;
	background-image: url('../images/banniere4_310.jpg');
	background-size: 100%;
	}
	
	#bande_top_gen{	
	position: relative;
	width: 310px;	
	height: 153px;
	}		  		  
	
	#bande_top_c1{
	display:none;
	}
	#mod_flash {
	width: 310px;
	height: 153px;
	}
	
	#mod_flash object{
	width: 310px;
	height: 153px;
	}
	
	#wrapper{	   
	width: 310px;	 	
	}	  
	#menu_top {
	width: 310px;
	font-size: 12pt;
	}
	#menu_top li{
	padding: 1px 2px;
	}
	
	
    #cadre1{
	display:none;	
	}
	#cadre1_mobile{
	width:150px;
	height: 310px;
	margin-top: 0px;
	margin-left: 70px;
	}
	
	
	#cadre2{
	position:relative;
	float:left;
	width:310px;
	height: 240px;
	padding:10px;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-left: 0px;
	
	}
	
	#cadre3{
	width:280px;
	height: 230px;
	background-color: black;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	}
	
	#content {		
	width: 310px;	
	}  
	#content .mentionslegales {		
	width: 290px;
    padding:10px;	
	}  
	#content .concepts {		
	width: 290px;	
	
	}  
	#content .concepts  td{		
	display:block;
	}  
	#content .concepts table {		
	width: 290px;	
	}  
	#content .contact{
	width: 310px;
	margin-left: 0px;
	}
	#content .contact td{
	display:block;
	}
	#content .contact table{
	margin-left: 0px;
	}	
	 .photoamenagement{
	 width: 300px;
	 }
	#panorama{
	width: 310px;
	height: 109px;
	}	
	#bottom{		
	width: 310px;
	}	
	#footer{	
	width: 310px;
	height: 60px;
	}    
	#footer-left{	
	width: 310px;
	}    
	#footer-right{	
	width: 310px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-color: #C42026;
	}  
    #events .item-container {	
	display:block;
	float:none;
	width:100%;
	}
	body{
	font-size: 12px;
	}
	
	}*/