/* CSS principale du site yoanmelodie.com
pour affichage écran
Version 1.0 du 12/10/2007
Créée le 12/10/2007 par éric vesque */

/* - Conteneur - */
html { 
	font-size: 100%;
	background: #222;
	color: #ef9;
}

body {
	text-align: center;/*pour IE <= 6 */
	margin: 0.5em auto;
	background: inherit;
	color: inherit;
	font: normal normal 100% sans-serif;
	border: none;
	position: relative;
}

div#conteneur {
	text-align: left;/*pour compenser l'autre plus haut*/
	margin: 0.5em auto;
	width: 802px;
	background: transparent;
}

div#cadre {
	clear: left;
	background: #eee;
	border: solid 1px #e0dfe3;
	margin: 0 auto;
	width: 800px;
	color: #222;
	padding: 0;
}

div#preload { display: none;}
/* - Fin de Conteneur - */

/* - Pied de page - */
div#piedpage {
	clear: both;
	margin: 0;
	background: inherit;
	color: inherit;
	padding: .5em;
	border: solid 1px #e0dfe3;
	border-top: none;
}

.note {
	margin: 0;
	font: italic normal 70% serif;
	text-align: right;
	background: inherit;
	color: #fcc;
}

.liens {
	margin: 0;
	font: italic normal 70% serif;
	text-align: left;
	background: inherit;
	color: inherit;
}

.liens a {
	text-decoration: none;
	background: transparent;
	color: #ef9;
}

.liens a:hover {
	text-decoration: none;
	background: #888;
	color: #ef9;
}

#webm {
	float: left;
	font-size: 70%;
	line-height: 1em;
	margin: 0;
	position: relative;
}

#webm a {
	text-decoration: none;
	background: transparent;
	color: #ef9;
}

#webm a:hover {
	text-decoration: none;
	background: #888;
	color: #ef9;
}
/* - Fin de Pied de page - */

/* - barre de navigation -*/
		#navig { 
			clear: left;
			width: 100%;
			font: normal bold 80% sans-serif;
			text-align: center;
			background: url("img/portiqhoriz.gif") repeat-x transparent;
			color: #79322e;
			margin: 0;
			padding: 0.05em 0;
		}

		ul#navswap { 
			height: 40px; 
			list-style: none;
			margin: 0 auto;
			padding: 3px 0 0 12%;
		}
		
		#navswap li { 
			width: 150px; 
			height: 38px; 
			float: left; 
			color: #eee;
			list-style-type: none; 
			line-height: 250%; 
			vertical-align: middle; 
			padding: 0; 
			border: none; 
			margin: 0 2px;
		}
		
		#navswap li a			
		{ 
			width: 100%; 
			height: 100%;
			display: block; 
			background: url(img/spotsnoirs.gif) no-repeat #555;
			font-weight: bold; 
			color: #fff; 
			padding: 0;
			text-decoration: none;
		}

	#navswap li a:visited {
			background: url(img/spotsnoirs.gif) no-repeat #777;
			color: #555;
	}

	#navswap li a:hover {
			background: url(img/spots.gif) no-repeat #999;
			color: white;
	}

	#navswap li a:active {
			background: url(img/spotsblancs.gif) no-repeat #bbb;
			color: #000;
			font-size: 110%;
	}
/* - fin de barre de navigation -*/

/* - Contenu page d'accueil -*/
div#fond {
	background: url("img/djlogo.jpg") 50% 50% no-repeat;
	border: solid 1px #e0dfe3;
	margin: auto;
	width: 800px;
	height: 480px;
	color: inherit;
	padding: 0;
}

div#contenuaccueil {
	margin: 5% 0 0 0;
	position: relative;
}

h1#titreaccueil {
	text-align: center;
	font: normal bold 150% cursive;
	background: transparent;
	color: #ef9;
	position: absolute;
	top: .5em;
	left: 33%;
	margin: 2em 0 0 0;
}

p#intro {
	text-align: center;
	font: normal normal 100% cursive;
	background: transparent;
	color: yellow;
	position: absolute;
	top: 7em;
	left: 23%;
	margin: 2em 0 0 0;
}

div#navig a span {
	display: none;
}

div#navig a:hover span { 
	display: block;
	position: absolute;
	z-index: 10;
	top: 75px;
	left: 28%;
	margin-top: 12em;
	width: 300px;
	background: #fff;
	color: #000;
	padding: 10px;
	font: normal normal 80% sans-serif;
	text-transform: none;
	text-align: left;
}

div#navig a span strong {
	font: normal bold 100% cursive;
}
/* - Fin de Contenu page d'accueil -*/

/* - Contenu des autres pages -*/
div#contenu {
	margin: 2%;
	position: relative;
	height: 750px;/*C'est la hauteur minimum, mais IE6 ne comprend pas "min-height"*/
}

div#titraille {
	vertical-align: middle;
}

#titraille img {
	float: left;
	border: none;
}

h1 {
	text-align: left;
	margin-left: 30%;
	font: normal bold 150% cursive;
	background: transparent;
	color: #ef9;
}

h2 {
	text-align: center;
	font: normal bold 120% cursive;
	background: transparent;
	color: #222;
}

div#texte {
	width: 500px;
	margin: 2em auto;
}
p#indic {
	clear: both;
	font: italic normal 90% sans-serif;
}
dt {
	font: normal bold 100% cursive;
}
dd {
	margin-left: 0;
	margin-bottom: 1em;
}
/* - Fin de contenu des autres pages -*/

/* - Galeries de photos -*/
div#gauche {
	float: left;
	padding: 0;
}

div#droite {
	float: right;
	padding: 0;
}

#gauche ul,#droite ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#gauche li,#droite li {
	margin: 10px 0;
	list-style-type: none; 
}

#gauche img,#droite img {
	border: none;
}

div#gauche a span,div#droite a span {
	position:absolute;
	width:1px;
	height: 1px;
	top:5px;
	left:5px;
	overflow:hidden;
	background:#eee;
}

div#gauche a,div#droite a,div#gauche a:visited,div#droite a:visited {
	background-color: #eee;
	padding: 0;
}

div#gauche a:hover,div#droite a:hover,div#gauche a:active,div#droite a:active {
	background-color: #fff;
	padding: 0;
}

div#gauche a:hover span,div#droite a:hover span {
	display: block;
	position: absolute;
	top: 7%;
	left: 17%;
	width: 502px;
	height: 690px;
	background: transparent;/*#eee;*/
	color: #222;
	text-align: center;
	font-size: 80%;
	font-style: italic;
	text-decoration: none;
}
/* - Fin de Galeries de photos - */

/* - Page contact (formulaire) - */
div#contenuform {
	margin: 2%;
	position: relative;
}

#siret {
	margin: 0;
	font: italic normal 70% sans-serif;
	text-align: center;
	background: inherit;
	color: inherit;
}

.addresse {
	margin: 0;
	font-style: italic;
	text-align: center;
	background: inherit;
	color: inherit;
}

fieldset {
	background-color: #eee;
	color: inherit;
	padding: 1em;
	margin: 1.5em 0.5em;
	border: inset 2px #6c8736;
	text-align: left;
}

legend {
	background-color: #fff;
	color: inherit;
	padding: 0.2em 1em;
	margin: 0;
	border: inset 2px #6c8736;
}

option {
	border: solid 1px #6c8736;
	min-height: 1%;
}

.text {
	background-color: #fff;
	color: #222;
	border: solid 1px #6c8736;
}

.sub {
	background-color: #fff;
	color: #222;
	border: outset 2px #6c8736;
	font-variant: small-caps;
}

.error {
	background-color: #f00;
	color: #fff;
	font: normal bold 120% sans-serif;
}

input:hover {background-color: #ff9; color: #222;}/* N'a aucun effet dans IE6 */
input:focus {background-color: #ff9; color: #222;}/* N'a aucun effet dans IE6 */
.text:focus  {background-color: #ff9; color: #222;}
.text:hover {background-color: #ff9; color: #222;}/*N'a aucun effet dans IE6 */ 

/* - Fin de page contact (formulaire) - */