body {
	background-color: #FFFFFF;
	color: #212121;
	font-size: 11px;
	letter-spacing: normal;
	font-family:  Verdana, Helvetica, Arial, Geneva, sans-serif; 
	margin: 0px;
	padding: 0px; 
	text-align: center;
}

#index {
	background-color: #212121;
}

#peinture {
	background-color: #ededed;
}

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

a:hover, a:active {
	color: #999999;
	text-decoration: none;
}

img {
	border: 0;
	margin: 0px;
	padding: 0px;
}

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

em {
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
}

/* ----------container centre le layout-------------- */
#container {
	width: 990px;
	height: 540px;
	margin-top: 36px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto; 
	text-align: left;
}

/* debut page d'accueil */
#entree_peinture {
	float: left;
	width: 330px;
	height: 540px;
	background-image: url("pix/ombre_peinture.jpg");
    background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
}

#entree_katiachaix {
	float: left;
	width: 330px;
	height: 540px;
	background-image: url("pix/katiachaix.jpg");
    background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
}

#entree_photographie {
	float: left;
	width: 330px;
	height: 540px;
	background-image: url("pix/ombre_photographie.jpg");
    background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	/*-moz-opacity:.8;
	-khtml-opacity:.8;
	filter: alpha(opacity=80);
   	opacity:.8;*/
}

.masque {
	-moz-opacity:.8;
	-khtml-opacity:.8;
	filter: alpha(opacity=80);
   	opacity:.8;
}

#sound {
	width: 990px;
	height: 24px; 
	margin-top: 6px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
	color: #333333;
}

.cadre {
	border: 1px solid #666666;
	padding: 0px 3px 0px 3px;
}

#sound a:link, #sound a:visited {
	color: #333333;
	text-decoration: none;
	padding: 0px 4px 0px 4px;
}

#sound a:hover, #sound a:active {
	color: #999999;
	text-decoration: none;
	border: 1px solid #999999;
	padding: 0px 3px 0px 3px;
}

#son {
	padding: 0px 0px 0px 9px;
	margin: 0px 0px 0px 9px;
}

/* fin page d'accueil */

/* debut page peinture */
#container_peinture {
	width: 990px;
	height: 540px;
	margin-top: 36px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto; 
	text-align: left;
	background-image: url("pix/peinture/atelier.jpg");
    background-repeat:  no-repeat;
}

#navigation {
	float: left; 
	width: 130px;
	height: 540px;
	margin: 6px 0px 0px 0px;
}

#navigation h1  {
	font-size: 11px;
	font-weight: normal;
    margin: 0px 0px 24px 15px;
	padding: 0px 0px 0px 0px;
}

#navigation ul  {
    list-style-position: outside;
	list-style-type: none;
    margin: 0px 0px 0px 15px;
	padding: 0px 0px 0px 0px;
}

#navigation li  {
    list-style-position: outside;
	list-style-type: none;
    margin: 0px 0px 18px 15px;
	padding: 0px 0px 0px 0px;
}

li.on {
	list-style-image: url("pix/points.png");
	color: #999999;
}

#tableaux {
	float: left; 
	width: 840px;
    margin: 12px 0px 0px 0px;
	text-align: right;
}

#tableaux ul {
    list-style-position: inside;
	list-style-type: none;
	display: inline;
    margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#tableaux li {
	display: inline;
    margin: 0px 6px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#tableaux li img {
	-moz-opacity:.5;
	-khtml-opacity:.5;
	filter: alpha(opacity=50);
   	opacity:.5;
}

#vide {
    margin: 12px 3px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	height: 80px;
}

#bleu, #vert, #jaune_orange, #sombre, #feu {
    margin: 12px 3px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: none;
	height: 80px;
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
	color: #212121;
	-moz-opacity:.9;
	-khtml-opacity:.9;
	filter: alpha(opacity=90);
   	opacity:.9;
}

#description {
	background-color: #ededed;
	-moz-opacity:.8;
	-khtml-opacity:.8;
	filter: alpha(opacity=80);
   	opacity:.8;
	z-index: 30;
    margin: 0px 0px 0px 140px;
	padding: 9px 18px 12px 18px;
	width: 600px;
	text-align: left;
	line-height: 15px;
}

.lettre {
	color: #ffffff;
}

/* fin page peinture */

/* debut popup tableau */

#frame_tableau {
	width: 924px;
	height: 400px;
    margin: 12px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 10px;
}

#frame_tableau a:link, #frame_tableau a:visited {
	color: #666666;
	text-decoration: none;
}

#precedent {
	float: left;
	width: 90px;
    margin: 385px 0px 0px 0px;
}

#tableau {
	float: left;
	width: 536px;
	height: 350px;
}

#suivant {
	float: left;
	width: 90px;
    margin: 385px 0px 0px 0px;
}

#precedent img {
	margin-right: 9px;
}

#suivant img {
	margin-left: 9px;
}

#legende {
	float: left;
	width: 200px;
	text-align: left;
	height: 350px;
}

.position {
	vertical-align: bottom;
}

.alpha {
	-moz-opacity:.5;
	-khtml-opacity:.5;
	filter: alpha(opacity=50);
   	opacity:.5;
}

.margetop {
	margin-top: 80px;
}

/* fin pop up */

/* debut page cahiers de tendance */
#container_ambiances {
	width: 990px;
	height: 540px;
	margin-top: 36px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto; 
	text-align: left;
	background-color: #FFF2F2;
}

#ambiances {
	float: left;
	width: 860px;
	height: 540px;
	margin: 0px 0px 0px 0px;
	background-image: url("pix/cahiers_de_tendance/ambiances.jpg");
    background-repeat:  no-repeat;
}

#paragraphe {
	height: 165px;
	margin: 0px 0px 0px 18px;
}

#paragraphe h1 {
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: normal;
    margin: 0px 0px 0px 0px;
	padding: 24px 0px 12px 0px;
}

#paragraphe a:link, #paragraphe a:visited {
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
}

#paragraphe a:hover, #paragraphe a:active {
	color: #212121;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
}

.blanc {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

#silhouette {
	height: 375px;
	margin: 0px 0px 0px 0px;
}

.caption {
	font-size: 10px;
	margin: 24px 0px 0px 0px;
	color: #ffffff;
}

.cellule_rose1 {
	background-color: #CE4E81;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_rose1 {
	background-color: #FDF6F9;
}

.cellule_rose2 {
	background-color: #B1897F;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_rose2 {
	background-color: #FBF9F8;
}

.cellule_rouge1 {
	background-color: #800001;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_rouge1 {
	background-color: #F9F2F2;
}

.cellule_rouge2 {
	background-color: #4E0D0B;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_rouge2 {
	background-color: #F6F3F3;
}

.cellule_brun {
	background-color: #61340F;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_brun {
	background-color: #F7F5F3;
}

.cellule_nacre {
	background-color: #C7AE93;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_nacre {
	background-color: #FCFBF9;
}

.cellule_gris1 {
	background-color: #B0A9AB;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_gris1 {
	background-color: #FBFBFB;
}

.cellule_gris2 {
	background-color: #A1979F;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_gris2 {
	background-color: #FAFAFA;
}

.cellule_noir {
	background-color: #000000;
	padding: 6px 0px 0px 6px;
	color: #ffffff;
}

.fond_noir {
	background-color: #F4F4F4;
}

/* fin page tendance */

/* debut page photos */

#photos {
	float: left; 
	width: 860px;
	height: 540px;
	margin: 0px 0px 0px 0px;
}

#cote01 { 
	float: left; 
	width: 462px;
}

#cote02 { 
	float: left; 
	width: 398px;
}

.legende {
	margin: 24px 0px 0px 0px;
	font-size: 10px;
	line-height: 14px;
}

.leg {
	margin: 24px 9px 12px 72px; 
	float: left;
}

.marge15 {
	margin: 0px 15px 0px 0px;
}

.marge20 {
	margin: 0px 20px 0px 0px;
}

.marge33 {
	margin: 0px 33px 0px 0px;
}

.marge6 {
	margin: 0px 6px 0px 0px;
}

.marge30 {
	margin: 0px 0px 0px 30px;
}

#portugal01, #portugal02, #portugal03 {
	float: left; 
	margin: 0px 9px 0px 0px;
}

#portugal04 {
	float: left; 
	margin: 256px 0px 0px 12px;
}

#portugal05, #portugal06, #portugal07, #instants03, #memoire03 {
	float: left; 
}

#maroc01, #maroc02, #instants01, #instants02 {
	margin: 0px 20px 0px 0px;
	float: left; 
}

#maroc03, #maroc04 {
	margin: 282px 20px 0px 0px;
	float: left; 
}

#memoire01, #memoire02 {
	margin: 0px 30px 0px 0px;
	float: left; 
}

.margebas6 {
	margin: 0px 0px 6px 0px;
}

.margebas9 {
	margin: 0px 0px 9px 0px;
}

.margetop15 {
	margin: 15px 0px 0px 0px;
}

.margetop18 {
	margin: 18px 0px 0px 0px;
}

.margetop59 {
	margin: 59px 0px 0px 0px;
}
.margeleft180 {
	margin: 30px 0px 0px 180px;
}

#droite {
	margin: 24px 0px 0px 451px;
}
/* fin page photos */

/* début page cv */

#texte {
	width: 990px;
	height: 540px;
	margin-top: 36px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto; 
	text-align: left;
}

#cv {
	float: left; 
	width: 840px;
	height: 540px;
    margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
}

#cv a:link, #cv a:visited, #contact a:link, #contact a:visited {
	color: #666666;
	text-decoration: underline;
}

#cv a:hover, #cv a:active, #contact a:hover, #contact a:active, #frame_tableau a:hover, #frame_tableau a:active {
	color: #212121;
	text-decoration: none;
}

#cv ul {
    list-style-position: inside;
	list-style-type: none;
    margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: block;
}

#cv li {
    list-style-position: inside;
	list-style-type: none;
    margin: 0px 0px 2px 18px;
	padding: 0px 0px 0px 0px;
	color: #808080;
}

#present, #passe, #ferie {
	display: none;
}

#expose {
	display: block;
	line-height: 15px;
}

#cv h1 {
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: normal;
    margin: 36px 0px 18px 0px;
	padding: 0px 0px 1px 1px;
	border-bottom: 1px solid #dddddd;
}

#cv h2 {
	letter-spacing: 12px;
	font-size: 12px;
	font-weight: normal;
	border-bottom: 1px solid #dddddd;
    margin: 36px 0px 18px 0px;
	padding: 0px 0px 1px 1px;
}

#cv h3 {
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: normal;
	/*color: #666666;*/
    margin: 12px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
}

#cv h4 {
	letter-spacing: normal;
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
    margin: 0px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
}

#cv h5 {
	letter-spacing: normal;
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
    margin: 12px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
}
/* fin page cv */

/*début contact */
#contact {
	float: left;
	width: 860px;
	height: 540px;
	margin: 0px 0px 10px 0px;
	background-image: url("pix/contact.jpg");
    background-repeat: no-repeat;
    background-position: bottom right;
}

#contact h1 {
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: normal;
    margin: 36px 0px 18px 0px;
	padding: 0px 0px 0px 0px;
}

#formulaire {
	margin-top: 36px;
			}

.formulaire_text {
	background-color: #ffffff;
	border: 1px solid #999999;
	padding: 1px;
	background-position: center bottom;
	height: 16px;
	width: 160px;
	font-size: 10px;
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	margin-bottom: 6px;
			}

.formulaire_question {
	background-color: #ffffff;
	border: 1px solid #999999;
	padding: 1px;
	background-position: center bottom;
	height: 180px;
	width: 360px;
	font-size: 10px;
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	margin-top: 6px;
			}
			
.formulaire_submit {
	background-color: #eeeeee; 
	border: 1px solid #999999;
	padding: 3px; 
	height: 22px; 
	width : 63px; 
	background-position: center; 
	margin: 9px 9px 18px 0px;
	color: #212121;
	font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
	font-size: 11px;
	}
	
.copyright {
	font-size: 10px;
	text-align: right;
    margin: 0px 3px 0px 0px;
}

/*début footer */

#index #footer {
	font-size: 10px;
	color: #666666;
	text-align: right;
    margin: 24px 3px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}

#index #footer a:link, #index #footer a:visited {
	color: #666666;
	text-decoration: none;
}

#index #footer a:hover, #index #footer a:active {
	color: #666666;
	text-decoration: none;
}

#footer {
	font-size: 10px;
	color: #cccccc;
	text-align: right;
    margin: 24px 3px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}

#footer a:link, #footer a:visited {
	color: #cccccc;
	text-decoration: none;
}

#footer a:hover, #footer a:active {
	color: #cccccc;
	text-decoration: none;
}

/* tooltip */
div#divTooltip {
    position: absolute; 
    top: 0px;
    width: 170px; 
	height: 130px;
    visibility: hidden; 
    z-index: 200; 
   	background-color: #ffffff;
    padding: 9px 0px 0px 0px;
}


/*
			Horizontal Accordion
		*/
		
		.horizontal_accordion_toggle {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */

			display: block;
			height: 540px;
			color: #ffffff;
			text-decoration: none;
			outline: none;
			cursor: pointer;
			margin: 0 0 0 0;
	-moz-opacity:.5;
	-khtml-opacity:.5;
	filter: alpha(opacity=50);
   	opacity:.5;
		}
		
		.horizontal_accordion_toggle_active {
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	filter: alpha(opacity=100);
   	opacity:1.0;
		}
		
		.horizontal_accordion_content {
			/* REQUIRED */
			height: 540px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */
				/*width: 550px;*/
			/* REQUIRED */
			
			overflow: hidden;
			background-color: #fff;
		}
			
			.horizontal_accordion_content p {
				padding: 0px 9px 0px 0px;
				margin: 0px 0px 0px 9px;
			}		
					
    /* Container styling*/
    #horizontal_container {
	float: left;
	width: 860px;
	height: 540px;
    }