/*----------------------------------------------------------------------------
	main.css

	this css-file contains all definitions, that are independend from the
	colorschemes.

	(c) Schlund + Partner AG


	----------------------------------------------------------------------
	Modified and extended by Barti Bartman for the Sports-Template

	This CSS-File uses the original "Tanteks Box Modell Hack"
	http://www.tantek.com/CSS/Examples/boxmodelhack.html

	NOTE:
	Older W3C CSS validators return errors when the voice-family property
	is used in a 'screen' style sheet. This is an error in the W3C CSS
	validator itself. The validator should report a warning, not an error,
	when properties which are unsupported by a particular medium are used,
	and this has been reported to the W3C:

 ----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------
 styles for specific classes and ids
----------------------------------------------------------------------------*/


/*-- global container ------------------------------------------------------*/

#container {
	/*position: relative;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	width: 930px;*/
	/*background-color: #706B60;*/
    max-width: 930px;
    margin: auto;
	background : url(images/fond/contentbg.gif) repeat-y 50% 50% ;
}

@media all and (max-width: 500px)  /* fm pour que la largeur du containeur principale passe de 930 à 730 */
{
#container {
	position: relative;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	background-color: #00FFFF;
	width:470px; /*450*/
	background : url(images/fond/contentbgEtroit.gif) repeat-y;
/*border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
border-style:inset;*/
}
}
#container-tourisme {
	position: relative;
	padding: 0;
	/*margin: 0 auto;*/
    margin: auto;
	text-align: left;
	width: 930px;
	background : url(images/fond/contentbgBis.gif) repeat-y 50% 50%;
}
@media all and (max-width: 500px)  /* fm pour que la largeur du containeur principale passe de 930 à 730 */
{
#container-tourisme {
	margin: 0 auto;
	background-color: #00FFFF;
	width: 470px; /*730*/
	background : url(images/fond/contentbgBisEtroit.gif) repeat-y;
}
}

/*-- main container: contains all between header and footer ----------------*/

#main_container {
	padding: 0;
	margin: 20px 5px 5px 5px;
	clear: both;                             /* fm pour qu'il se place automatiquement en dessous */
	display: flex;
}

/*--- the main container is devided in sub containers ----------------------*/

#sub_container2 {

	position: relative;
	float: right;
	margin: 0px 0px 0px 0px;	
	padding: 0;
	width: 80%;/*685px;*/
}


#sub_container2acces {
	position: relative;
	float: right;
	margin: 0px 0px 0px 2px;	
	padding: 0px;
	width: 685px;
	min-height:600px
}
@media all and (max-width: 500px)  /* fm réduit la largeur de colonne droite (texte) */
{
#sub_container2acces {
	width: 625px; /*625*/
}
}

#sub_container2Bis{  /* tourisme*/
	position: relative;
	float: right;
	padding: 0px 0px 0px 0px;
	width: 310px; /*286*/
	clear: both;      
	display: flex;
}
@media all and (max-width: 500px)  /* fm réduit la largeur de colonne droite (texte) */
{
#sub_container2Bis{
	width: 150px         /*images tourisme ok à 426 jusque 20200831 réduit la largeur des images sur écrans étroits*/
}
}

#sub_container2Reservation{  /* réservation*/
	position: relative;
	float: right;
	margin: 0px;
	padding: 0px;
	width: 685px; /*286*/
	clear: both;      
	display: flex;
}
@media all and (max-width: 500px)  /* fm réduit la largeur de colonne droite (texte) */
{
#sub_container2Reservation{
	width: 426px         /*réservation*/
}
}

#content_container {
	clear: both;
	overflow: hidden;
	/*line-height: 1.3;*/
	margin: 0;
	padding: 40px;
	/*width: 660px; /*687*/
}
@media all and (max-width: 500px)  /* fm réduit la largeur de colonne gauche de visuels */
{
#content_container {
	padding-left: 15px;
	/*width: 580px; /*687*/
}
}

}

#content_container p {
	line-height: 1.3;
}

#content_containerBis {
	clear: both;
	overflow: hidden;
	line-height: 1.3;
	margin: 0;
	padding: 0;	
	/*width: 300px;*/
}

#left_column_container {
	margin: 0;
	padding: 0;
	float: left;
	width: 27%;/*232px; /*232px;*/
	background : url(images/fond/contentbgmenu.gif) repeat;

}

@media all and (max-width: 500px)  /* fm réduit la largeur de colonne gauche de visuels */
{
#left_column_container {
	margin: 0;
	padding: 0;
	float: left;
	width: 120px; /** 210 av 20200831*/
}
}


#left_column_containerBis {
	margin: 0;
	padding: 0;
	float: left;
	width: 610px;
}


#left_column_containerBis  a{
	padding: 2px 0px 0px 20px;
	display: block;
	text-align: left;
	overflow: hidden;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 20px;
}
#left_column_containerBis  h2{
	padding: 0px 0px 0px 10px;
}
/*--- header ---------------------------------------------------------------*/

#header	{
	position: relative;
	padding: 0;
	margin: 0;
	/*width: 930px;*/
	height: 220px;
	top: 0;
	left: 0;
	background : url(images/fond/headerbg2.gif);
}

#banniere{
    background: transparent url("images/Location-gite-alsace-accueil-ete.jpg") no-repeat scroll 0% 0%;
    z-index: 2;
	float: right;
	margin: auto;
    position: absolute;
	background-size: cover;
    top: 5px;
    right: 5px;
    width: 99%;
    height:220px;
    display: block;
    margin-left: auto;
    margin-right: auto; 
}
@media all and (max-width: 750px)  /* fm pour que la largeur du containeur principale passe de 930 à 730 */
{
#banniere{
    background: transparent url("images/Location-gite-alsace-accueil-ete-750.jpg") no-repeat scroll 0% 0%;
}
}
@media all and (max-width: 500px)  /* fm pour que la largeur du containeur principale passe de 930 à 730 */
{
#banniere{
    background: transparent url("images/Location-gite-alsace-accueil-ete-mobile.jpg") no-repeat scroll 0% 0%;
}
}
#logo {
	z-index: 2;
	width: 130px;
	height: 90px;
	position: relative;
	top: 15px;
	left: 15px;
    background: url(images/dynamic/Moulin-Nord.png) no-repeat;
}
#logo a {
  display: block;
  width: 100%;
  height: 100%;
}
#logode {
	z-index: 2;
	width: 130px;
	height: 90px;
	position: relative;
	top: 15px;
	left: 15px;
    background: url(images/dynamic/Moulin-Nord-DE.png) no-repeat;
}

#conteneur_langues{   
    position:relative; 
	top: 1px;
    width: 17%;	
	height: 100px;
	float: right;
	padding-top : 10px;
	padding-right: 10px
	display: flex;
	flex-wrap: wrap;	
	flex-direction: row;
	justify-content: flex-end;
}

.langue{ /*chaque langue*/
	width: 30px;
    height: 20px;
	margin: 10px;
	float: right;
	background-color: #706B64;
    box-shadow: 0px 2px 5px #1C1A19;
    border-radius: 5px;
}
.langue a {
  display: block;
  width: 100%;
  height: 100%;
}  
.langue a:hover {
  border-color:white;
      box-shadow: 3px 4px 6px #ffffff;
}  

#languefr {
    background: url(images/dynamic/fr.gif) no-repeat;
	width: 30px;
    height: 20px;
	/*margin: 5px;
    /*background-color: #706B64;
    box-shadow: 0px 2px 5px #1C1A19;
    border-radius: 5px;
    padding: 10px;
    color: #FFF;
    font-size: 0.9em;*/
}
#languede {
    background: url(images/dynamic/de.gif) no-repeat;
	width: 30px;
    height: 20px;
 }
#langueuk {
   background: url(images/dynamic/uk.gif) no-repeat;
	width: 30px;
    height: 20px;
}

#conteneur_sociaux{ 
	z-index: 2;
    position:relative; 
	top: 150px;
    width: 10%;	
	height: 10%;
	float: right;
	padding : 10px;
	display: flex;
	flex-wrap: wrap;	
	flex-direction: row;
	justify-content: flex-end;
	border: 2px;
}

.sociaux{ /*commun*/
	width: 30px;
    height: 30px;
	margin: 5px;
	float: right;
	background-color: #706B64;
    box-shadow: 0px 2px 5px #1C1A19;
    border-radius: 5px;
}
.sociaux a {
  display: block;
  width: 100%;
  height: 100%;
}  
.sociaux a:hover {
  border-color:white;
      box-shadow: 3px 4px 6px #ffffff;
}  
#sociauxFB {
    background: url(images/dynamic/facebook.png) no-repeat;
	width: 30px;
    height: 30px;
	/*margin: 5px;
    /*background-color: #706B64;
    box-shadow: 0px 2px 5px #1C1A19;
    border-radius: 5px;
    padding: 10px;
    color: #FFF;
    font-size: 0.9em;*/
}
#sociauxG {
    background: url(images/dynamic/google.gif) no-repeat;
	width: 30px;
    height: 30px;
 }


/*--- caption (as text or background image) --------------------------------*/

#baseline {
	position: absolute;
	top: 200px;
	width: 390px;
	right: 5px;
  /*float: right;*/
  /*display: flex;
  justify-content: flex-end;*/
  font-family: Trebuchet MS,sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #FEFCEF;
  text-align:right;
  }

  #text_caption {
  font-family: Trebuchet MS,sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #FEFCEF;
  text-align:right;
}


/*--- main navigation ------------------------------------------------------*/

#main_nav_container {
	z-index: 1;
	position: relative;
	top: 0;
	left: 4px;
	float: left;
	width: 99%;/*921px;*/
	padding: 0;
	margin: 5px 0 0 0;
	overflow: hidden;
	background : url(images/fond/navbg.gif);
}

@media all and (max-width: 500px)  /* fm pour que la largeur du bloc menu soit automatiquement divisé par 2 */
{
#main_nav_container {
	width: 99%;
}
}

#main_nav_list {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	list-style-type: none;
}

#main_nav_list li {
	height: 28px;
	float: left;
	margin: 0;
	padding: 0;
}

/*--- main navigation items ------------------------------------------------*/

#main_nav_list a {
	background: transparent;
	margin: 0;
	padding: 2px 19px 0 24px;
	display: block;
	float: left;
	line-height: 1.9em;
	text-align: left;
	overflow: hidden;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 2.6em;
	font-size : 1.25em
}

@media all and (max-width: 500px)  /* fm pour que la taille du texte du menu passe en large */
{
#main_nav_list a {
	height: 2.9em;
	font-size : large
}
}

html>body #main_nav_list a {
	height: 26px;
}

#main_nav_list a.main_nav_item:hover {
	background: transparent;
}

/*--- container for the subnavigation --------------------------------------*/

.sub_nav_container {
	clear: both;
	margin: 0px;
	padding: 0px;
	
}

.sub_nav_container2 {
	clear: both;
	margin: 5px;
	padding: 5px;
}

/*--- subnavigation --------------------------------------------------------*/

.sub_nav_list {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.sub_nav_list li {
	margin: 0;
	padding: 0;
}

/*--- subnavigation items --------------------------------------------------*/

.sub_nav_list a {
	text-align: left;
	line-height: 28px;
	height: 28px;
	overflow: hidden;
	width: 160px;
	padding: 0 0 0 20px;
	display: block;
}


/*--- content --------------------------------------------------------------*/
/*
#content_container table {
	border-style: dotted;
	border-width: 1px;
	border-spacing: 0;
}

/*--- footer ---------------------------------------------------------------*/

#footer {
	margin: 0;
	padding: 10px 0 0 0;
	width: auto;
	height: 50px;
	clear: both;
	display: flex;
	flex-wrap: wrap;	
	justify-content: space-around;
	background: transparent url(images/fond/footerbg.gif) top left no-repeat;
}

@media all and (max-width: 500px)  /* fm pour que la taille du texte du menu passe en large */
{
#footer {
	background: transparent url(images/fond/footerbgEtroit.gif) top left no-repeat;
}
}

/*#pied_de_page {
	padding: 10px 0 0 0;
	margin: 0 5px 0 5px;
	width: auto;
	padding : 10px;
    /*border: 1px solid black;
	/*float: left;*/
	/*vertical-align: bottom;
}*/
.pied_de_page_element
{
    float: Left; /*remplissage à partir de  la droite*/
	/*margin: 5px; /* si auto, le bloc est centré */
	padding: 0 15px 0 15px;
    width: auto;
    /*border: 1px solid black;*/
    /*background-color: #706B64;*/
}

/*----------------------------------------------------------------------------
  default-styles for html-elements
----------------------------------------------------------------------------*/

/*--- body -----------------------------------------------------------------*/

body{
	margin: 0;
	padding: 0;
	text-align: left;
}

/*--- paragraph ------------------------------------------------------------*/

/*--- forms ----------------------------------------------------------------*/

fieldset {
	padding: 15px;
	border-style: solid;
	border-width: 1px;
}

input {
	border-style: solid;
	border-width: 1px;
}

textarea {
	border-style: solid;
	border-width: 1px;
}
#conteneurtableaupartenaires
{
    width: 98%;
/*	padding : 10px;*/
    /*border: 1px solid black;*/
	/*float: left;*/
	display: flex;
	flex-wrap: wrap;	
	/*flex-direction: row;*/
	justify-content:justify;
}
#conteneurpartenairescellule
{
    /*float: left;*/
	margin: 5px; /* si auto, le bloc est centré */
	padding: 5px;
    width: 150px;
    /*border: 1px solid black;*/
}

/*--------------------------------------------------------------------------*/