@charset "iso-8859-1";

@import "slimbox.css";

/****************************************************************************/
/*                            CSS GENERIQUES                                */
/****************************************************************************/
* {	
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
	background:#356ea3 url(../images/navigation-bg.jpg) repeat-x 0 0;
}

ul, li {
	padding:0;
	margin:0;
	list-style:none;
}

p {
	padding:0 0 10px;
	margin:0;
}

img {
	border:none;
}

a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
img, div, a, input { behavior: url(iepngfix.htc) } 
* html div#map img { behavior: none; }


/***** Classes communes *****/
.clear { 
	height:0; 
	width:1px; 
	clear:both; 
	line-height:0; 
	*display:inline;
}

#contener p.plus {
	text-align:right;
}
#contener p.plus a {
	background:url(../images/bouton.jpg) no-repeat 0 0;
	padding:2px 9px;
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	text-transform:uppercase;
	font-size:10px;
}

#contener p.plus.large a {
	background-image:url(../images/bouton_large.jpg);
	

}

/***** Les titres *****/
h1, h2, h3, h4, h5 {
	margin:0;
	padding:0;
}
h1 {
	font-size:20px;
	font-weight:normal;
	color:#FDB257;
	border-bottom:1px solid #FDB257;
	margin-bottom:20px;
	padding-bottom:5px;
	letter-spacing:2px;
}

h1 a {color:#FDB257; text-decoration:none}

h2 {
	font-size:18px;
	font-weight:normal;
	color:#FDB257;
	background:url(../images/pictos/picto-h2.gif) no-repeat 0 center;
	padding-left:25px;
	text-transform:uppercase;
	letter-spacing:2px;
}
h2 a {color:#FDB257; text-decoration:none}

h3 {
	font-size:14px;
	font-weight:normal;
	letter-spacing:1px;
	color:#FDB257;
}
h3 a {color:#FDB257; text-decoration:none}

h4 {
	font-size:12px;
	font-weight:bold;
	color:#FDB257;
	text-transform:uppercase;
}
h4 a {color:#FDB257; text-decoration:none}

h5 {
	font-size:12px;
	font-weight:normal;
	color:#FDB257;
	padding-bottom:10px;
}
h5 a {color:#FDB257; text-decoration:none}

/****************************************************************************/
/*                               CSS PAGES                                  */
/****************************************************************************/

/***** PAGE *****/
#page {
	margin:0 auto;
	width:1000px;
}

/***** HEADER *****/
#header {
	width:1000px;
}

/**** Navigation ****/
#navigation {
	width:1000px;
	height:36px;
}
#navigation li {
	float:left;
	background:url(../images/navigation-li-border.gif) no-repeat 0 0;
	letter-spacing:1px;
	line-height:33px;
}
#navigation li a {
	display:block;
	color:#fbefd0;
	text-transform:uppercase;
	font-size:11px;
	padding:0 22px 2px;
	font-weight:bold;	
	float:left;
}
#navigation li a:hover,
#navigation li.on a {
	background:url(../images/navigation-bg-on.gif) repeat-x 0 0;
	text-decoration:none;
	color:#0f3d69;
}
#navigation li.first {
	background:url(../images/pictos/picto-home.gif) no-repeat center 12px;
}
#navigation li.on.first {
	background:url(../images/pictos/picto-home-on.gif) no-repeat center 12px;
}
#navigation li.first a,
#navigation li.on.first a {
	height:auto;
	background:none;
}
#navigation li.first a:hover,
#navigation li.on.first a:hover {
	background:url(../images/pictos/picto-home-on.gif) no-repeat center 12px;
}





/***** CONTENER *****/
#contener {
	width:1000px;
	padding:20px 0;
}

/**** Colonne Gauche ****/
#col-gauche {
	float:left;
	width:240px;
}

#contener.home #col-gauche {
	width:430px;
	float:left;
	padding:0 0 0 10px;
	position:relative;
}

/*** Sous navigation ***/
#col-gauche .sous-nav {
	width:200px;
	margin:10px 0 10px 9px;
}
#col-gauche .sous-nav li {
	border:1px solid #fcb156;
	margin-bottom:5px;
	height:25px;
}
#col-gauche .sous-nav li a {
	background:url(../images/pictos/picto-sous-nav.gif) no-repeat 10px 4px;
	color:#fcb156;
	text-transform:uppercase;
	font-weight:bold;
	padding:0 10px 0 35px;
	display:block;
	height:25px;
	line-height:25px;
}
#col-gauche .sous-nav li.on {
	border:1px solid #fbefd0;
}
#col-gauche .sous-nav li.on a,
#col-gauche .sous-nav li a:hover {
	color:#fbefd0;
	background:url(../images/pictos/picto-sous-nav-on.gif) no-repeat 10px 4px;
	text-decoration:none;
}

/*** Numéro / prise de rendez-vous / Télécharger le PDF ***/
#col-gauche .numero,
#col-gauche .rdv {
	margin-bottom:10px;
}
#col-gauche .numero,
#col-gauche .rdv,
#col-gauche .pdf {
	margin-left:9px;
}

/*** Home - Brochure et Numéro ***/
#contener.home #col-gauche .contact-brochure {
	position:absolute;
	top:275px;
	left:3px;
}
#contener.home #col-gauche .contact-brochure area {
	cursor:pointer;
}

#contener.home #col-gauche h3 {
	margin:10px 0;
}
#contener.home #col-gauche p {
	width:363px;
}


/**** Colonne Droite ****/
#col-droite {
	float:left;
	width:720px;
	padding:0 0 0 20px;
}

#contener.home #col-droite {
	width:550px;
	float:left;
	padding:0 10px 0 0;
}

/*** Fil d'ariane ***/
#fil-ariane {
	width:720px;
	padding-bottom:15px;
}
#fil-ariane li {
	display:inline;
	padding:0 2px;
	color:#fbefd0;
	font-size:11px;
}
#fil-ariane li a {
	color:#fdb257;
	text-decoration:underline;
}
#fil-ariane li a:hover {
	text-decoration:none;
}

/*** Contenu de la page ***/ 
#col-droite .content-page,
#col-droite .content-page .listing {
	width:720px;
}
#col-droite .content-page .listing {
	margin-top:20px;
}
#col-droite .content-page .listing .detail {
	float:left;
	width:310px;
	height:130px;
	overflow:hidden;
	background:url(../images/listing-bg.jpg) repeat-x 0 0;
	padding:0 10px;
	margin:0 60px 30px 0;
}
#col-droite .content-page .listing .detail.last {
	margin:0;
}
#col-droite .content-page .listing .detail h2 {
	padding-top:2px;
	margin-bottom:11px;
}
#col-droite .content-page .listing .detail img {
	float:left;
	padding-right:15px;
}
#col-droite .content-page .listing .detail p {
	font-weight:bold;
}


/** Détail de l'appartement **/
#col-droite .content-page .detail-appartement {
	width:720px;
}
#col-droite .content-page .detail-appartement h2 {
	border-top:1px solid #858985;
	border-bottom:1px solid #858985;
	width:290px;
	padding-top:2px;
	padding-bottom:2px;
	margin-bottom:10px;
}
#col-droite .content-page .detail-appartement .photos-droit {
	float:right;
	padding-left:20px;
	width:381px;
}
#col-droite .content-page .detail-appartement .photos-droit ul {
	margin:10px 0 0;
}
#col-droite .content-page .detail-appartement .photos-droit ul li {
	display:inline;
	padding:0 10px 0 0;
}
#col-droite .content-page .detail-appartement .photos-droit ul li.last {
	padding:0;
}
#col-droite .content-page .detail-appartement .photos-droit p.legende {
	text-align:right;
	font-size:10px;
}
#col-droite .content-page .detail-appartement .photos-gauche {
	float:left;
	padding-right:20px;
	width:311px;
}
#col-droite .content-page .detail-appartement h4 {
	clear:right;
}
#col-droite .content-page .detail-appartement ul#texte {
	float:left;
	margin:0 80px!important;
	*margin:0 60px;
}
#col-droite .content-page .detail-appartement ul li {
	background:url(../images/pictos/picto-li.gif) no-repeat 0 4px;
	color:#FDB257;
	font-weight:bold;
	padding-left:15px;
	padding-bottom:5px;
}

/*** Home - Photos ***/
#contener.home #col-droite .photos-droit {
	width:550px;
}
#contener.home #col-droite .photos-droit ul {
	margin:10px 0 0;
}
#contener.home #col-droite .photos-droit ul li {
	display:inline;
	padding:0 16px 0 0;
}
#contener.home #col-droite .photos-droit ul li.last {
	padding:0;
}

#contener.home #col-droite .lieu {
	float:right;
	margin:20px 0 0 0;
}

/**** Pagination ****/
#contener .pagination {
	padding:10px 0;
	border-top:1px solid #AEC3D8;
	border-bottom:1px solid #AEC3D8;
	float:left;
	width:720px;
}
#contener .pagination ul {
	float:right;
}
#contener .pagination li {
	display:inline;
	padding:0 2px;
	float:left;
}
#contener .pagination li a {
	color:#103e69;
	background:#a7c0d7;
	width:17px;
	text-align:center;
	padding:1px 5px;
	text-decoration:none;
}
#contener .pagination li a:hover,
#contener .pagination li.on a {
	background:#e7973d;
	color:#fff;
	font-weight:bold;
}

#contener .pagination li.suite a {
	background:none;
	width:auto;
	padding:0;
} 
#contener .pagination li.suite a img {
	padding:0;
	border:none;
	margin-right:0;
	vertical-align:text-bottom;
}



/***** FOOTER *****/
#footer {
	border-top:1px solid #295e90;
	margin:5px 0;
	padding-top:10px;
	text-align:center;
}
#footer li {
	color:#aec3d8;
	display:inline;
	font-size:11px;
	padding:2px;
}
#footer li a {
	color:#aec3d8;
	text-decoration:underline;
}
#footer li a:hover {
	text-decoration:none;
}
#footer li img {
	vertical-align:middle;
}




.galerie_photo_gauche
{
	margin: 0 ;
	padding: 0px 0px ;
	list-style-type: none ;
	text-align:center;
	float:left;
}

.galerie_photo_gauche ul {margin:0;padding:0;list-style-type: none ;}
.galerie_photo_gauche li
{
	margin:0;padding:0;
	margin: 0px 2px 2px 2px;
	padding: 0px ;
	text-align:center;
	font-size:10px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.galerie_photo_gauche  img 
{
	margin: 1px 5px 3px 5px;
	padding:0px;
}

.galerie_photo_gauche a, .galerie_photo_gauche a:visited, .galerie_photo_gauche a:hover {
	text-decoration:none;
	color:#f7941d;
}

.galerie_photo_gauche span {
		background-color:#543019;
		font-weight:bold;
		line-height:13px;
		padding: 1px 3px;
}

.infos {margin-bottom:15px;}

.date { font-size:10px; font-style:italic;}


/* Champs de Formulaires
-------------------------------------------------------- */
input,textarea{margin : 1px;}
input.noborder {border:0;}
input.recherche {width:50px;}
input.button {	border:0px solid #2c220e;}
input.small_button {
	border:0px solid #2c220e;
	background-color:#2c220e;
	color:#ccc;
	font-size:9px;	
}

select {margin : 2px;}
form {padding:0;margin:0;}
textarea{
	width: 96%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: black;
	margin: 0;
	padding: .5em;
}

#piedForm {
	text-align: center; /*** Les boutons sont alignes a droite ***/
}

#piedForm input {
	font-weight: bold; /*** Pour ameliorer la lisibilite des boutons ***/
	padding: 0.1em 0.1em;

}

#corpForm {	/*** Mise en forme du corp du formulaire (bordure, couleur du fond...) ***/

	margin: 0;
	padding: 1em;
}

#corpForm .text-input {
	width: 200px;
	padding:1px 4px;
	border: 1px solid #aec3d8;
	font-size: 12px;
	margin-top: 4px;
	background: #FFF url('../images/text-bg.gif') repeat-x;
	
}

#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 5px;
	border: 1px solid #FDB257;
	
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: #000;
	background: #FDB257;
	padding:3px 10px;
	margin-left:10px;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;

}
#corpForm fieldset.coordonnees label {	/*** Mise en forme des intitules de champs ***/
	float: left;	/*** Tres important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignes a droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centres verticalement. ***/
}

#corpForm fieldset.interets p{	/*** Mise en forme des intitules de champs ***/
	
	/*** Les intitules prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: left;	/*** ... et ils sont alignes a droite... ***/
	margin-left:40%;
	padding: 0 .5em 0 5px;
	line-height: 1.8;	/*** ... et centres verticalement. ***/
}

#corpForm fieldset.quizz p {
	padding:10px;
}

#corpForm fieldset.quizz input {border:0}


#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs a cliquer sur les intitules ***/
}
#corpForm label.oblig {
	font-weight: bold;	/*** Mise en evidence des champs obligatoires ***/
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
	font-size:10px;
}
#corpForm a.aide {	/*** Mise en forme des bulles d'aide ***/
	text-decoration: none;
}
#corpForm a.aide img {	/*** Mise en forme de l'image des bulles d'aide ***/
	margin: 0;
	padding: 0;
	border: 0;
}

a.aide:hover {	/*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
	cursor: help;
}

/* bouton ok */
.submit {
     border:none;
     color:#fff;
     width:36px;
     height:20px;
	 font-weight:bold;
	 font-size:10px;
	 padding:0 ;
	 margin:0;
}