/* CSS Document */
/* Mise en forme du site RIAD SPA */
/* www.iris-interactive.fr */

* {
	margin:0;
	padding:0;
}

body{
	background:#230300 url(../images/bg-body.jpg) repeat-x center bottom;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#2F1504;
}
#head{
	width:760px;
	height:162px;
	margin:0 auto;
}

/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles a la navigation */
/* -------------------------------------------------------------------------------------------- */

#navigation{
	color:#4F4F4F;
	height:17px !important;
}
#navigation ul {
	padding:auto 0;
	margin:3px 0;
	
}
#navigation li {
	display:inline;
	list-style:none;
}
#navigation a {
	color:#E35202;
	text-decoration:none;
	padding:5px 10px;
}
#navigation a:hover {
	color:#2F1504;
	background:#FFFFFF;
	padding:5px 10px;
}

/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles relatifs aux outils */
/* -------------------------------------------------------------------------------------------- */

#wire{
	background:url(../images/bg-tool.png) no-repeat;
	width:760px;
	height:42px;
	text-align:right;
	position:relative;
	z-index:auto;
}
#wire ul {
	float:left;
	margin-top:16px;
	margin-left:20px;
	display:inline;
	padding:0;
}
#wire li {
	float:left;
	background:url(../images/bg-li.gif) no-repeat left;
	font-size:11px;
	padding-left:10px;
	margin-right:30px;
	display:inline;
}
	html* #wire li {
		margin-right:12px;
	}
#wire li a {
	color:#ffffff;
	text-decoration:none;
	padding:0;
}
#wire li a:hover {
	text-decoration:underline;
}

#tools {
	padding:0;
	float:right;
	margin-top:0;
	margin-right:20px;
	text-align:center;
	color:#FFFFFF;
}
#tools li {
	padding:0;
	margin:0;
	display:inline;
	list-style:none;
	background-image:none;
    position:relative;
    z-index:79;
}
#tools li span {
	position:absolute;
	left:-999em;
	z-index:990;
	display:block;
	padding:2px 5px;
	margin:10px 0 0 10px;
	background-color:#142A32;
	color:#FFFFFF;
}
*html #tools li span {
	margin:30px 0 0 -15px;
}
#tools li:hover span, 
#tools li.sfhover span {
	left:auto;
}
#tools a, 
#tools a:hover {
	text-decoration:none;
}
#tools a img {
	text-decoration:none;
	border:none;
}

/*
#tools {
	float:right;
	margin-top:16px;
	margin-right:20px;
	text-align:center;
	color:#FFFFFF;
}
#tools ul {
	padding:0;
}
#tools li {
	padding:0;
	margin:0;
	display:inline;
	list-style:none;
	background-image:none;
    position:relative;
    z-index:79;
}
#tools li span {
	position:absolute;
	left:-999em;
	z-index:10;
	display:block;
	padding:2px 5px;
	margin:0 0 0 50px;
	background-color:#142A32;
	color:#FFFFFF;
}
*html #tools li span {
	margin:20px 0 0 -15px;
}
#tools li:hover span, 
#tools li.sfhover span {
	left:auto;
}
#tools a, 
#tools a:hover {
	cursor:pointer;
	text-decoration:none;
}
#tools a img {
	text-decoration:none;
	border:none;
}
#tool #wire {
	float:left;
	margin-top:16px;
	margin-left:20px;
}
#tool #wire li {
	float:left;
	background:url(../images/bg-li.gif) no-repeat left;
	font-size:11px;
	padding-left:10px;
	margin-right:30px;
	display:inline;
}
	html* #tool #wire li {
		margin-right:12px;
	}
#tool #wire a {
	color:#ffffff;
}
#tool #wire a:hover {
	text-decoration:underline;
}*/

/* ---------------------------------------------------------------------------------------------- */
/* Déclaration de styles applicables au contenu */
/* ---------------------------------------------------------------------------------------------- */

#page{
	width:760px;
	margin:0 auto;
}
#content{
	background:url(../images/bg-content.png) repeat-y;
	min-height:380px; 
	text-align:justify;
}
	html* #content {
		height:380px;
	}
#contenu {
	float:right;
	width:560px;
	position:relative;
	margin-right:-10px;
}
	*html #contenu{
		margin-right:0;
	}
/* -------------------------------------------------------------------------------------------- */
/* BOX MODELS */

.col0 {
	width:330px;
	float:left;
	margin-left:10px;
}
.col3 {
	width:190px;
	float:right;
	margin-right:10px;
}
.col2 {
	width:260px;
	float:left;
	margin-left:10px;
}
.col1 {
	width:540px;
	float:left;
}
	*html .col1{
		width:530px;
		margin-left:10px;
	}
.col2 a.modelages,
.col2 a.spa,
.col2 a.hammam,
.col2 a.idees-cadeaux,
.col2 a.sauna {
	width:227px;
	height:86px;
	display:block;
	margin:10px;
	float:left;
	position:relative;
	z-index:2;
}
.col2 a.modelages span,
.col2 a.spa span,
.col2 a.hammam span,
.col2 a.idees-cadeaux span,
.col2 a.sauna span,
.col2 a.chromoterapie span {
	position:absolute;
	left:-999em;
}
.col2 a.modelages {
	background:transparent url(../images/modelages.gif) no-repeat center top;
	margin-top:30px;
}
.col2 a:hover.modelages {
	background:transparent url(../images/modelages-hover.gif) no-repeat center top;
}
.col2 a.spa {
	background:transparent url(../images/spa.gif) no-repeat center top;
}
.col2 a:hover.spa {
	background:transparent url(../images/spa-hover.gif) no-repeat center top;
}
.col2 a.hammam {
	background:transparent url(../images/hammam.gif) no-repeat center top;
	margin-top:30px;
}
.col2 a:hover.hammam {
	background:transparent url(../images/hammam-hover.gif) no-repeat center top;
}
.col2 a.idees-cadeaux {
	background:transparent url(../images/idees-cadeaux.jpg) no-repeat center top;
	margin-top:30px;
}
.col2 a:hover.idees-cadeaux {
	background:transparent url(../images/idees-cadeaux-hover.jpg) no-repeat center top;
}
.col2 a.sauna {
	background:transparent url(../images/sauna.gif) no-repeat center top;
}
.col2 a:hover.sauna {
	background:transparent url(../images/sauna-hover.gif) no-repeat center top;
}
.col2 a.chromoterapie {
	width:240px;
	height:40px;
	display:block;
	background:transparent url(../images/chromoterapie.png) no-repeat left;
	border:0;
	margin-left:-10px;
}
.col2 a.chromoterapie:hover {
	background:transparent url(../images/chromoterapie-hover.png) no-repeat center;
	cursor:pointer;
}

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

#content h1,
#content h2,
#content h3,
#content h4, 
#content p, 
#content ul, 
#content form {
	margin:10px;
}
#content h2,
#content h3,
#content h4, 
#content p, 
#content ul, 
#content form {
	font-size:12px;
}
#content img{
	margin:0 10px 5px 10px;
	line-height:18px;
}
.commentaire{
	font-size:10px;
	line-height:normal;
	color:#666666;
}
.prix{
	font-size:12px;
	font-weight:bold;
	color:#A9223D;
	text-align:right;
}
#content ul li{
	list-style-position:outside;
	list-style-type:square;
	margin:0 20px;
	padding:0 12px;
}
#content strong{
	color:#FE7B20;
}
#content a{
	color:#FE7B20 !important;
	text-decoration:underline;
}
#content a:hover{
	text-decoration:none;
}
#content h2.presentation {
	background:url(../images/h2-presentation.jpg) no-repeat left;
}
#content h2.salon {
	background:url(../images/h2-salon-boutique.jpg) no-repeat left;
}

h1.presentation{
	background:url(../images/h1-presentation.jpg) no-repeat left;
}
h1.spa{
	background:url(../images/h1-spa.jpg) no-repeat left;
}
h1.sauna{
	background:url(../images/h1-sauna.jpg) no-repeat left;
}
h1.hammam{
	background:url(../images/h1-hammam.jpg) no-repeat left;
}
h1.idees-cadeaux{
	background:url(../images/h1-idees-cadeaux.jpg) no-repeat left;
}
h1.modelages{
	background:url(../images/h1-modelages.jpg) no-repeat left;
}
h1.salon{
	background:url(../images/h1-salon-boutique.jpg) no-repeat left;
}
h1.contact{
	background:url(../images/h1-contact.jpg) no-repeat left;
}
h1.chromotherapie {
	background:url(../images/h2-chromotherapie.jpg) no-repeat left;
}
h1.actualite {
	background:url(../images/h1-actualite.jpg) no-repeat left;
}
h1.actu {
	background:url(../images/h1-actu.jpg) no-repeat left;
}
#foot{
	background:url(../images/bg-foot.png) no-repeat;
	height:70px;
}

/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles appliqué a la colonne de gauche */
/* -------------------------------------------------------------------------------------------- */

#col_gauche{
	color:#FFFFFF;
	background:url(../images/col1_coordonnees.gif) no-repeat top left;
	float:left;
	width:180px;
	min-height:146px !important;
	position:relative;
	padding-left:10px;
	margin-left:8px;
	font-size:12px;
}
	html* #col_gauche {
		height:146px !important;
	}
#col_gauche h1.contact {
	background:url(../images/h1-contact-col.png) no-repeat left;
}
#col_gauche h1.actualite {
	background:url(../images/h1-actualite-left-col.jpg) no-repeat left;
}
#col_gauche h1.riad {
	background:url(../images/h1-riad-left-col.jpg) no-repeat left;
	width:88px;
	margin: 10px 0 0 2px !important;
	padding: 0 !important;
}
#col_gauche p.actu,
#col_gauche p.colGauche{
	text-align:left;
	color:#FFFFFF;
	width:160px;
	
}

#col_gauche p strong.tel {
	color:#FE7B20;
	font-size:18px;
	font-weight:normal;
}
#col_gauche p.colGauche,
#col_gauche p.actu,
#col_gauche p.actu span,
#col_gauche p.actu a {
	font-size:12px;
}
.date {
	font-weight:bold;
	margin-left:inherit;
	font-size:10px !important;
}
#col_gauche p.actu a {
	color:#330903;
}
#col_gauche a {
	text-align:left;
	color:#FFC412;
	text-decoration:underline;
	font-weight:bold;
}
#col_gauche a:hover{
	text-decoration:none;
}
#col_gauche a.album{
	background:url(../images/bt-album.png) no-repeat center;
	width:150px;
	height:50px;
	display:block;
}
#col_gauche a:hover.album{
	background:url(../images/bt-album-hover.png) no-repeat center;
}
#col_gauche a.tarif{
	background:url(../images/bt-tarifs.png) no-repeat center;
	width:150px;
	height: 100px;
	display:block;
}
#col_gauche a:hover.tarif{
	background:url(../images/bt-tarifs-hover.png) no-repeat center;
}

/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles a la signature */
/* -------------------------------------------------------------------------------------------- */

#signature{
	text-align:center;
	width:100%;
	height:auto;
	font-size:10px;
}		
#signature p{
	padding-top:5px;
	color:#ffffff;
}	
#signature a{
	color:#ffffff;
	text-decoration:none;
}
#signature a:hover{
	color:#ffffff;
	text-decoration:underline;
}

/* -------------------------------------------------------------------------------------------- */
/* Déclaration des styles applicables aux formulaires */
/* -------------------------------------------------------------------------------------------- */

#content form {
	margin:0 0 0 10px !important;
	padding:0 0 0 0 !important;
	float:left;
	width:560px !important;
}
	html* #content form {
		width:520px !important;
	}
#content legend {
	color:#FE7B20;
}
#content fieldset {
	border:1px solid #FE7B20;
	padding:5px;
	margin-bottom:5px;
	width:509px !important;
}
#content fieldset input,
#content fieldset select,
#content fieldset textarea {
	border:0;
	border:1px solid #3C1515;
	background-color:#eeeeee;
	font-family: Verdana, 'Trebuchet MS', sans-serif;
	color:#3C1515;
	font-size:10px;
	text-align:left;
}
	html>body #content fieldset {
		clear:both;
	}
	html* #content fieldset {
		width:520px !important;
	}
#content fieldset.small {
	width:243px !important;
}
	html>body #content fieldset.small {
		width:180px;
		float:left;
		clear:none;
		margin-right:10px;
	}
	html* #content fieldset.small {
		width:256px !important;
	}
#content input.submit {
	padding:5px;
	border:0;
	background:none;
	float:left;
	width:88px;
	height:32px;
	color:#3C1515;
	font-weight:bold;
	background:url(../images/button-submit.gif) no-repeat center;
}
#content input:hover.submit,
#content input.submit:hover {/*
	background:url(../images/button-submit-hover.gif) no-repeat center;*/
	cursor:pointer;
}
	html* #content input.submit {
		margin-top:5px;
	}

/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles génériques */
/* -------------------------------------------------------------------------------------------- */

.right{
	float:right;
}
.left{
	float:left;
}
.spacer {
	width:100%;
	clear:both;
	font-size:1px;
	height:10px;
}
.spacer-red{
	background:url(../images/spacer-red.png) no-repeat left top;
	width:100%;
	height:1px;
	margin:-10px auto 10px 7px;

}
.spacer-color{
	background:url(../images/spacer.png) no-repeat left top;
	width:100%;
	height:1px;
	margin:-10px auto 10px 7px;

}
.col3 .spacer-color{
	background:url(../images/spacer.png) no-repeat left top;
	width:175px;
	height:1px;
	margin:-10px auto 10px 7px;

}
h1.presentation span,
h1.spa span,
h1.sauna span,
h1.hammam span,
h1.idees-cadeaux span,
h1.modelages span,
h1.salon span,
h1.contact span,
a.album span,
h1.actualite span,
a.tarif span,
h1.chromotherapie span,
h1.actu span,
h1.riad span{
	margin-left:-999em;
}

.img-actu{
	float:right;
	border:none;
}
.img-album{
	/*float:left;*/
	border:none;
	margin:0 !important;
}
dl,dt {
	margin:5px 15px 5px 10px;
	width:150px;
	float:left;
	display:block;
}
	html* dl,dt {
		margin:5px 15px 5px 10px;
		width:120px !important;
		float:left;
		display:block;
	}
a {
	outline: none;
}
:focus {
	-moz-outline-style: none;
}
a.plan {
	background:url(../images/ico-plan.jpg) no-repeat left 5px;
	padding: 10px 0 0 25px;
	border:none;
}