/*------------ mise en page générale ---------------------------------------*/
	html, body { margin: 0; padding: 0; }
	
	html {
		background: #e7e7e7 url("images/fond.jpg") no-repeat fixed center;
		width: 100%;
		height: 100%;
		
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
	
	body {
		position: absolute;
		width: 100%;
		height: 100%;
		min-height: 500px;
		min-width: 750px;
		}
		
	body#contact {
		background: url(images/fond_contact.png) no-repeat right bottom;
		}
	
	/* Gros hack bâtard pour une image de fond qui se redimensionne! */
	div#pseudo-fond {
		position: absolute;
		top: 0;
		right: 0;
		z-index: -1;
		height: 100%;
		overflow: hidden;
		text-align: right;
		}	
	div#pseudo-fond img {
		height: 90%;
		margin-top: 73px;
		margin-right: -1px;
		}
		
	p#copyright {
		position: fixed;
		bottom: 0;
		right: 60px;
		margin: 0 -15px 0 0;
		padding: 10px 15px;
		background: #e7e7e7;
		-moz-border-radius: 7px 7px 0 0;
		-webkit-border-top-right-radius: 7px;
		-webkit-border-top-left-radius: 7px;
		border-radius: 7px 7px 0 0;
		
		font-size: 0.7em;
		color: #6e6e6e;
		}
	
	body#contact h2+p {
		position: absolute;
		top: 50%;
		left: 60px;
		height: 5em;
		margin-top: -2.5em;
		
		line-height: 2.5em;
		font-size: 0.9em;
		}
		
/*------------ liens ------------------------------------------------*/
	a {
		text-decoration: none;
		color: #6e6e6e;
		}
		
	a:hover, a:active, a:focus,
	/* mise en évidence de la section courante */
	body#accueil a[rel='index'],
	body#photo a[href='galerie.php?type=photo'],
	body#graphisme a[href='galerie.php?type=graphisme'], 
	body#contact a[rel='contact'] { color: #333; }

/*------------ titres -----------------------------------------------*/
	h1 {
		background: url(images/karine_bonneau.png) no-repeat top left;
		width: 120px;
		height: 15px;
		margin: 0;
		padding: 0;
		position: fixed;
		left: 60px;
		top: 43px;
		
		text-indent: -100%;
		}
		
	body#accueil h2 {
		background: url(images/logo.png) no-repeat center center;
		width: 367px;
		height: 134px;
/*		width: 214px;
		height: 74px;*/
		position: absolute;
		left: 203px;
		top: 50%;
		margin-top: -67px;
/*		left: 50%;
		top: 50%;
		margin: -37px 0 0 -107px;*/
		
		text-indent: -100%;
		}
		
	body#photo h2, body#graphisme h2, body#contact h2 { 
		position: absolute; 
		height: 0; 
		width: 0;
		text-indent: -1000%;
		overflow: hidden;
		}

/*------------ navigation -----------------------------------------------*/	
	ul#navi {
		position: fixed;
		left: 188px;
		right: 60px;
		margin: 0;
		padding: 45px 0 0 0;
		
		text-align: right;
		line-height: 12px;
		}
		
	ul#navi li { /* tous les li */
		position: absolute;
		left: 0px;
		bottom: 0px;
		display: inline;
		padding: 0 0 0 16px;
		background: url(images/navi_puce.png) no-repeat left center;
		
		font-size: 0.75em;
		}
		
	ul#navi li+li { /* tous les li suivant un autre li (donc sans le premier) */
		position: static;
		padding: 0 16px 0 3px;
		background: url(images/navi_puce.png) no-repeat right center;
		}
		
	/* 	Ça, c'est le lien "contact".
		:last-child ne marche pas dans IE, on fait avec… */
	ul#navi li+li+li+li {
		background: none;
		padding-right: 0;
		}
	
	ul#listeProjets {
		position: fixed;
		top: 80px;
		right: 60px;
		margin: 0;
		padding: 0;
		
		font-size: 0.73em;
		color: #333;
		}
	
	ul#listeProjets li {
		display: inline;
		}
	
	ul#listeProjets li+li {
		background: url(images/metanavi_puce.png) no-repeat 1px 6px;
		padding: 0 0 0 10px;
		}
	
/*------------ galerie, avec visionneuse ----------------------------------*/
	ul#galerie-js.galleria {
		margin: 0;
		padding: 15px 0;
		list-style: none;
		width: 76px;
		overflow: hidden;
		position: absolute;
		top: 133px;
		bottom: 71px;
		left: 103px;
		}
		
	ul#galerie-js.galleria li {
		width: 74px;
		height: 74px;
		overflow: hidden;
		margin: 0 0 15px 0;
		border: 1px solid #808080;
		float: none;
		}
		
	.galleria li a {
		display: none;
		}
		
	.galleria li div {
		position: absolute;
		display: none;
		top: 0;
		left:180px;
		}
		
	.galleria li div img {
		cursor: pointer;
		}
	.galleria li.active div img,.galleria li.active div {
		display: block;
		}
	.galleria li img.thumb {
		cursor: pointer;
		top: auto;
		left: auto;
		display: block;
		width: auto;
		height:auto;
		}
		
	.galleria_container .caption { display: none; }
		
	* html .galleria li div span { width: 400px; } /* contourne un bug dans IE */
	
	div.galleria_wrapper {
		position: absolute;
		top: 118px;
		bottom: 55px;
		left: 322px;
		right: 60px;
		}
	div.galleria_wrapper img {
		max-height: 100%;
		max-width: 100%;
		border: 1px solid #808080;
		}
		
	a#precedent, a#suivant {
		display: block;
		width: 90px;
		height: 15px;
		position: absolute;
		left: 96px;
		}
	a#precedent:focus, a#suivant:focus { outline: none; }
	
	a#precedent {
		top: 118px;
		border-bottom: 1px solid #bebebe;
		background: url(images/fleche_haut.png) no-repeat center top;
		}
		
	a#suivant {
		bottom: 55px;
		border-top: 1px solid #bebebe;
		background: url(images/fleche_bas.png) no-repeat center bottom;
		}
	
/*------------ galerie, sans visionneuse (JavaScript désactivé) -------------*/
	ul#galerie {
		white-space: nowrap;
		position: absolute;
		top: 128px;
		left: 60px;
		height: 500px;
		margin: 0;
		padding: 0;
		}
		
	ul#galerie li {
		display: inline;
		margin: 0 60px 0 0;
		padding: 0;
		}
	ul#galerie li+li {
		margin-left: 20px;
		}
		
	ul#galerie li img {
		height: 100%;
		border: 1px solid #808080;
		}