@charset "utf-8";
/* CSS Document sensual.css*/

html, body {
	background: linear-gradient(to bottom, rgba(109,0,25,1) 0%,rgba(143,2,34,1) 75%,rgba(169,3,41,1) 100%);
}

a {COLOR: #720202; text-decoration: none;}
a:hover {COLOR: #720202; text-decoration: underline;}

img { border: none;
	 
}

.centre {
  text-align:center;
}

#logo {
color:#FE1111;
background-color:rgb(112,0,26);
height:80px;
font-size: 30px;
font-weight: 100;
width: 1100px;
}

#logo a {
color:#FE1111;
display: inline-block;
line-height: 70px;
vertical-align: bottom;
}

#slogan {
  color:white;
  background-color:#8e6c6c;
  height: 45px;
  padding-left:10px;
  display:block;
}

#main {
  width: 1100px;
  margin: 20px auto;
  background-color:white;
  overflow:hidden;
}

#work {
  display:block;
  padding:10px;
  overflow-y:auto;
  min-height: 500px;
}


footer{
   position: fixed;
   width: 100%;
   height: 25px;
   left: 0px;
   bottom: 0px;
   background: #E5E5E5;
   border-top:1px solid #8d0223;
   text-align:center;
	 z-index: 10;
}

label {
  width:100px; 
  float:left;
}

textarea {
  font-size: 12px; 
  background-color:#FFFFFF; 
  border:1px solid #8d0223;
  min-width: 100px;
  min-height:45px;
  }

 input {
  font-size: 12px; 
  background-color:#FFFFFF; 
  border:1px solid #8d0223;
 }

 form br {
   clear: both; 
 }

 fieldset {
   padding-left:5px; 
 }
 
  #login {
    float:right;
    display:block;
  }
  
  #gauche {
  display:inline-block;
  width:740px;
  padding:15px;
  }
  
  #droite {
    display:block;
    width:385px;
    float:right;
    background-image:url("images/photo1.jpg");
    background-position:top;
    background-repeat:no-repeat;
    min-height:435px;
  }
  
  textarea.moyenne {
  	min-height: 80px;
    max-height:200px;
    min-width:350px;
    max-width:490px;
    overflow:auto; 
  }
  
  textarea.present {
    min-height:100px;
    max-height:190px;
    min-width:350px;
    max-width:400px;
    overflow:auto;
  }
  
  #seul {
   	display: block; 
  }
  
  #couple {
    display:none;
  }

  #slogandroite {
    float:right;
    display:block; 
  }
    
  #galerie {
		background-color: #72001A;
		color: white;
		width: 1100px;
  }

	#galerie table {
		width: 1100px;
	}
  
	#detailsvisites {
		display: none;
		position: fixed;
		left: 20px;
		top: 50px;
		width: 400px;
		height: auto;
		max-height: 440px;
		overflow: hidden;
		border: thin solid purple;
    box-shadow:5px 5px 5px #8E6C6C;
		color: purple;
		background-color: white;
	}
	
	#visiteurs {
		width:400px;
		height: auto;
		max-height: 400px;
		overflow: auto;
	}

	.txtchat {
		display: block;
		position: fixed;
		bottom: -200px;
		background-color: white;
		border: thin solid red;
		right: 10px;
		width: 250px;
		height: 250px;
		z-index: 5;
		transition: right 2s;
	}
	
	.txtchat h3 {
		background-color: maroon;
		color: white;
		text-align: center;
		margin-top: 0px;
		margin-bottom: -10px;
	}
	
	.txtchat p {
		height: 190px;
		overflow: auto;
	}
	
	.txtchat .saisie {
		border-top: thin solid black;
	}
	
	.txtchat input {
		width: 245px;
	}
	@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* 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 */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	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) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */

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