/* ----------------- feuille de style CSS ---------------------*/

/* Ce fichier définit les styles visuels des différents éléments des pages.
 * Dans l'ordre, avec le noms des blocs principaux :
 * - balises html generales
 * - textes
 
===============================================================
Organisation des grands blocs
===============================================================

 * - global (bloc) 780 px de large centré
	 * - entete 
	 * - contenu_global 
		 * - contenu (page index)
		 * - menu_gauche (page index, flottant)
		 		 * - menu_haut
				 * - menu_bas
	* - pied
		* - liens techniques
 * - msai (bloc)
 
 
 		 * - titre_page_appart (page appart)
		 * - .sous-menu (page appart)
		 * - photos_appart (page appart, flottant)
		 * - contenu_appart (page appart)

*/


/* balises html generales
============================================================ */

* {
	margin: 0;
	padding: 0;
}

body {
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFF;
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
}

h1 {
	font-size: 20px;
	font-weight: bold;
	color: #003366;
	text-align: center;
	margin-bottom: 15px;
}

h2 {
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	background-color: #336699;
	margin-left: 50px;
	padding: 10px;
	width: 474px;
}

p {
	margin: 0;
	padding:  7px 0;
	text-align: justify;
}
 
img {
	border: none;
	margin: 0;
	padding: 0;
}

.img-right {
	float: right;
	margin-left: 20px;

}

.img-left {
	float: left;
	margin-right: 20px;

}

.centrer { /* classe passe partout pour centrer */
	text-align: center;
}

.cache { /* classe passe partout pour précharger des images */
	display: none;
}


a:link, a:visited, a:active  {
	text-decoration: none;
	color: #00c;
}

a:hover {
	color: #000;
	background-color: #eee;
}


/* global
=======================================================*/

#global {
	width: 780px;
	margin: 0 auto;
}

/*  entete 
=======================================================*/

#entete {
}

#contenu_global {
	background-image: url(../images/centre-fond-2.gif);
}


/*  page index avec 2 menus
=======================================================*/

#contenu {
	margin: 0 15px 0 180px;
}

#menu_gauche {
	float: left;
	width: 150px;
	text-align: center;
	background-color: #eee;
	border: 1px solid #CC0000;
	margin: 0 0 0 15px;
	padding: 15px 0 0 0;
}

.titre-menu {
	font-size: 15px;
	color: #CC0000;
	text-align: center;
	font-weight: bold;
	font-style: italic;
}

#menu_gauche p {
	font-size: 11px;
	text-align: center;
}

#menu_gauche a:link, #menu_gauche a:visited {
	text-decoration: none;
	color: #036;
}

#menu_gauche a:hover, #menu_gauche a:active {
	color: #009;
	text-decoration: underline overline;
	background-color: #fff;
	font-weight: bold;
}



#pied {
	background-image: url(../images/bg-pied.jpg);
	height: 77px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #336699;
}

#pied p {
	margin: 0 0 0 40px;
	padding: 20px 0 10px 0;
}

#liens-tech {
	color: #999999;
	margin-left: 40px;
	font-weight: bold;
}

#liens-tech a:link, #liens-tech a:visited {
	text-decoration: none;
	color: #999;
}

#liens-tech a:hover, #liens-tech a:active {
	color: #000;
}


/* msai
=======================================================*/

#msai {
	text-align: right;
	margin-top: 10px;
	margin-right: 10px;
	font-size: 9px;
	color: #999;
}

#msai a:link, #msai a:visited {
	text-decoration: none;
	color: #999;
}

#msai a:hover, #msai a:active {
	color: #000;
}

/* page type liens/plan/erreur-404, etc.
============================================================*/

#contenu-centre {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
}

#entete-page {
	background-image: url(../images/titre-page.jpg);
	height: 106px;
	position: relative;
		width: 760px;
	margin-right: auto;
	margin-left: auto;
}


#titre-page {
	font-size: 20px;
	font-style: italic;
	color: #FFFFFF;
	position: absolute;
	width: 500px;
	left: 150px;
	top: 62px;
	text-align: center;
}

#drapeau-nav {
	position: absolute;
	left: 680px;
	top: 60px;
}

/* page appartement
============================================================*/

#titre_page_appart{
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 711px;
	font-weight: bold;
	margin-bottom: 20px;
}

#titre_page_appart p{
	margin: 0 auto;
	position: absolute;
	left: 227px;
	top: 55px;
	font-style: italic;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
}

#contenu_appart {
	text-align: center;
	width: 520px;
	margin-left: 20px;
}

#contenu_appart .appart-infos {
	width: 470px;
	margin: 0 0 20px 50px;
	padding: 10px;
	border: 2px solid #336699;
}

.tarifs {
	width: 492px;
	margin: 0 0 20px 51px;
	background-color: #eee;
	border: 2px solid #336699;
	border-collapse: collapse;
}



.tarifs td {
	text-align: center;
	border: thin solid #336699;
	height: 40px;
}

#photos_appart {
	width: 200px;
	margin-right: 10px;
	text-align: center;
	float: right;
}

#photos_appart img {
	margin-bottom: 20px;
}

.sous_menu {
	text-align: center;
	padding-bottom: 15px;
}

#nav_bas {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000066;
}

#nav_bas a:link,  #nav_bas a:active, #nav_bas a:visited {
	font-size: 12px;
	font-weight: bold;
	color: #999999;
	text-decoration: none;
}

#nav_bas a:hover{
	font-size: 12px;
	font-weight: bold;
	color: #000;
}




.tab_liens {
background-color: #eee;
border: thin dotted #FFCC33;
}







.titre1 {
	font-size: 12px;
	font-weight: bold;
	font-variant: normal;
	color: #FFFFFF;
}



.titrepage {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: bolder;
	font-variant: normal;
	color: #FFFFFF;
	text-decoration: none;
}
.titretarifs {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #000000;
	text-decoration: none;
}
.texte1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
}


.legende {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}
.note {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
	font-style: italic;
}

.note2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	color: #999999;
	text-decoration: none;
}


.plan {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #999999;
	text-decoration: none;
}