/*--------------------------------------------------------------------
réalisation: Christelle Pellegrin - mai 2009
---------------------------------------------------------------------*/
/*http://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html*/

@font-face {
    font-family: "Hypatia Sans pro";
    src: url('../font/HypatiaSansPro-Regular.otf') format("opentype");
}

@font-face {
	font-family: "Hypatia Sans pro";
	font-weight: bold;
	src: url('../font/HypatiaSansPro-Semibold.otf') format("opentype");
}

/*@font-face {
	font-family: "Hypatia Sans pro";
	font-style: italic;
	src: url('../font/HypatiaSansPro-Semibold.otf') format("opentype");
}*/

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "Hypatia Sans pro", Arial;
	font-size: 14px;
	line-height: 16.8px;
	color: #000000;
	text-align: left;
	background-color: #FF0000;
}

img {
	border: 0px;
}

a {
	text-decoration: none;
	color: #000000;
}

a:hover {
	color: #FFFFFF;
}

#conteneur, #conteneur.gris {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 950px;
	height: 600px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	margin-top: -300px; /* moitié de la hauteur */
	margin-left: -475px; /* moitié de la largeur */
}

#conteneur.gris {
	height: 630px;
	margin-top: -315px;
}

#bandeau {
	position: absolute;
    top: 60px;
	left: 148px;
}

#accueil {
	position: absolute;
    top: 180px;
	left: 400px;
	font-size: 18px;
	line-height: 18px;
	color: #FFFFFF;
}

#enter {
	position: absolute;
    top: 510px;
	left: 400px;
	font-size: 24px;
	line-height: 24px;
	color: #000000;
	font-weight: bold;
}

#enter:hover {
	color: #FFFFFF;
}

#logo {
	position: absolute;
    top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

#artistes {
	position: absolute;
	top: 0px;
	left: 400px;
	font-size: 36px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
}

#artistes a {
	color: #FFFFFF;
}

#artistes a:hover {
	color: #000000;
}

#page {
	position: absolute;
	top: 60px;
	left: 400px;
	width: 550px;
	height: 540px;
}

#page.page_galerie {
	top: 16px;
}

.artiste {
	font-size: 24px;
	line-height: 28.8px;
	font-weight: bold;
	color: #000000;
}

a.artiste:hover {
	color: #FFFFFF;
}

#sousnav {
	position: absolute;
	top: 110px;
	left: 0px;
	width: 170px;
	font-size: 14px;
	line-height: 16.8px;
	font-weight: bold;
	z-index: 3;
}

#sousnav a {
	color: #000000;
}

#sousnav a:hover {
	color: #FFFFFF;
}

#footer {
	position: absolute;
	bottom: 0px;
	left: 400px;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}

#footer a {
	color: #000000;
}

#footer a:hover {
	color: #FFFFFF;
}

.on, #sousnav a.on, #footer a.on {
	color: #FFFFFF;
}

.on:hover, #page a.on:hover {
	color: #000000;
}

#cache {
	position: absolute;
	top: 20px;
	left: -400px;
	width: 400px;
	height: 540px;
	background-color: #999999;
	z-index: 2;
}
/*
#ligne_1_g {
	position: absolute;
	top: 46px;
	left: 0px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}

#ligne_1_d {
	position: absolute;
	top: 46px;
	left: 450px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}

#ligne_2_g {
	position: absolute;
	top: 196px;
	left: 0px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}

#ligne_2_d {
	position: absolute;
	top: 196px;
	left: 450px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}

#ligne_3_g {
	position: absolute;
	top: 346px;
	left: 0px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}

#ligne_3_d {
	position: absolute;
	top: 346px;
	left: 450px;
	width: 80px;
	height: 129px;
	border: 1px solid #FF0000;
	z-index: 2;
}
*/
#ligne_1 {
	position: absolute;
	z-index: 1;
	top: 46px;
}

#ligne_2 {
	position: absolute;
	z-index: 1;
	top: 196px;
}

#ligne_3{
	position: absolute;
	z-index: 1;
	top: 346px;
}

#prec{
	position: absolute;
	z-index: 1;
	top: 46px;
}

#suiv{
	position: absolute;
	z-index: 1;
	top: 46px;
}

#retour_gal{
	position: absolute;
	z-index: 1;
	top: 46px;
}

.vignette {
	padding: 0px;
	margin: 0px;
	margin-right: 11px;
	width: 129px;
	height: 129px;
	float: left;
}

.grandeimg {
	padding: 0px;
	margin: 0px;
}

.description {
	color: #FFFFFF;
}

.demarche {
	font-size: 24px;
	line-height: 28.8px;
}

.galeries {
	font-size: 14px;
	line-height: 16.8px;
	color: #FFFFFF;
}

.parcours {
	font-size: 14px;
	line-height: 16.8px;
	color: #FFFFFF;
}