@charset "UTF-8";
/* CSS Document */

html, body
{
background-color:black;
margin:0;
height:100%;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

html
{
background:url("images/motif-spider.png") bottom left fixed;
}

body
{
background:url("images/motif-haut.png") repeat-x top;
}

div#page
{
/*min-height:100%;*/
height:300px;
width: 1000px;
margin: 0 auto;
/*position: relative;*/
/*background: url("images/corps.png") repeat-y;*/

}

a{outline-style:none;}



/*div#page2
{





background: url("images/corps.png") repeat-y;

}*/

div#tete
{
background:url("images/motif-haut2.png") repeat-x top;
height:300px;
width:1000px;
position: relative;
z-index:2;
}

div#en-tete
{
position:absolute;
top:24px;
width:1000px;
height:172px;
background:url("images/en-tete.png") no-repeat top;

}

/*div#student
{
width:65px;
height:93px;
background:url("images/student.png") no-repeat top;
position:absolute;
left:210px;
top:106px;
	
}*/

div#banniere-flash
{
	width:910px;
	height:246px;
	margin:0 45px;
	position:absolute;
}

div#menu-haut
{
position:absolute;
bottom:0;
width:1000px;
height:110px;
background:url("images/plan-menu-haut.png") no-repeat bottom;
}

div#menu-haut ul
{
margin:0;
padding:0;
list-style:none inside;
}

div#menu-haut ul li
{
margin:0;
padding:0;
display:block;
float:left;
height:71px;
}

div#menu-haut a
{
display:block;
height:71px;

}

div#menu-haut a.index:hover, div#menu-haut a.src:hover, div#menu-haut a.creations:hover, div#menu-haut a.cv:hover, div#menu-haut a.divers:hover
{
background-position:top right;
}

div#menu-haut a.index
{
width:216px;
background: url("images/menu-haut-index.png") no-repeat top left;
}

div#menu-haut a.src
{
width:135px;
background: url("images/menu-haut-src.png") no-repeat top left;
}

div#menu-haut a.creations
{
width:302px;
background: url("images/menu-haut-creations.png") no-repeat top left;
}

div#menu-haut a.cv
{
width:103px;
background: url("images/menu-haut-cv.png") no-repeat top left;
}

div#menu-haut a.divers
{
width:244px;
background: url("images/menu-haut-divers.png") no-repeat top left;
}

div#centre
{
overflow: auto;
/*padding-bottom: 10px;*/
z-index:1;
background: url("images/corps.png") repeat-y;
position:relative;
padding-top:30px;
padding-bottom:18px;
top:-30px;
min-height:200px;
}

div#menu-gauche
{
width:200px;
float:left;
position:relative;
}

div#menu-gauche-middle
{
width:150px;
background: url("images/menu-gauche-middle.png") repeat-y;
color:white;
margin:20px 0;
padding:0 25px;
min-height:1px;
}

div#menu-gauche-middle *, div#mini *
{
margin:0;
padding:0;
list-style-type:none;
list-style-position:inside;
text-decoration:none;
border:none;
color:black;
}

div#menu-gauche-middle li
{
	display:block;
	width:130px;
	height:140px;
	margin:0 auto 20px;
	background-color:#FFF;
	color:#000;
	overflow:hidden;
	position:relative;
}

div#menu-gauche-middle li:hover
{
	background-color:#CCC;
}

div#menu-gauche-middle li.selec p
{
	font-weight:bold;
	color:#0091ff;
}

div#menu-gauche-middle li img
{
	display:block;
	width:116px;
	height:100px;
	margin:7px;
	background-color:#000;
	float:left;
}

div#menu-gauche-middle li p
{
	display:block;
	width:100%;
	text-align:center;
	float:left;
	font-size:14px;
}

div#mini
{
margin:0;
padding:0;
text-decoration:none;
border:none;
position:relative;
	
}

div#mini a
{
	display:block;
	width:130px;
	height:140px;
	margin:16px;
	background-color:#000;
	color:#fff;
	float:left;
}

div#mini a:hover
{
	border:3px solid #0091ff;
	width:124px;
	height:134px;
}
div#mini a:hover p
{
	margin-top:113px;
	color: #0091ff;
	width:124px;
}

div#mini a:hover img
{
	
	margin:4px;
}

div#mini a img
{
	display:block;
	width:116px;
	height:100px;
	margin:7px;
	background-color:#000;
	position:absolute;
}

div#mini a p
{
	display:block;
	width:130px;
	margin:116px 0 0;
	text-align:center;
	position:absolute;
	font-size:14px;
	color:#fff;
}

div#menu-gauche-top
{
height:20px;
width:200px;
background: url("images/menu-gauche-top.png") no-repeat;
position:absolute;
top:0;
}

div#menu-gauche-bottom
{
height:20px;
width:200px;
background: url("images/menu-gauche-bottom.png") no-repeat;
position:absolute;
bottom:0;
}

div#corps
{
/*margin-right:120px;
margin-top:5px;
float:right;*/
position:relative;
float:right;
right:120px;

width:680px;
}

a img
{
	border:none;	
}

div#corps div#titre-image
{
font-size:34px;
margin:10px 16px 16px;
background-image:url(images/titreM.png);
background-repeat:repeat-x;
width:648px;
height:40px;
}

div#corps div#titre-image div#titre-text
{
	background-color:white;
	display:inline;
	height:100%;
	float:left;
}

div#corps div#titre-image div#titre-rondD
{
	width:12px;
	height:100%;
	float:right;
	background-image:url(images/titreD.png);
}

div#corps div#titre-image div#titre-rondG
{
	width:12px;
	height:100%;
	float:left;
	background-image:url(images/titreG.png);
}

div#corps p.para
{
text-align:justify;
margin:16px 16px 0px;	
line-height:26px;
text-indent:12px;

}

div#corps p.separ
{
padding-top:24px;
background:url(images/separateur3.jpg) top center no-repeat;
}

div#corps p.indent
{
margin:0px 16px;	
}

div#corps div.boiteLiens
{
width:50%;
float:left;

}

div#corps ul
{
	list-style-type:circle;

}

div#corps li
{
margin:6px;

}

div#corps span.expl
{
	margin-left:6px;
font-size:10px;

}

div#corps li a
{
color:#0075ff;
text-decoration:none;
padding:0 2px;
}

div#corps li a:hover
{
	
	background-color:#333;
	color:#FFF;

}

div#pied
{
height:49px;
/*position: absolute;*/
width: 1000px;
top:-30px;
position:relative;
/*bottom: 0;*/

/*background:url('images/motif-spider.png') bottom center;*/
}

div#pied2
{
height:49px;
width: 1000px;
background:url('images/pied.png') no-repeat ;
text-align:center;
font-size:11px;
}


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

div#photo-all
{
	/*width:500px;*/
	/*height:300px;*/
	
	position:relative;
	margin:0 auto;
}

#photo-image
{
	margin:16px;
	max-width:648px;
	max-height:648px;
	
}

img#photo-image:hover
{
	opacity:0.9;
}

div#photo-haut
{
	
	opacity:0.5;
	height:16px;
	width:100%;
	position:absolute;
	top:0;
	background-image:url(images/photoNN.png);
	background-repeat:repeat-x;
	
	
}

div#photo-gauche
{
	
	opacity:0.5;
	height:100%;
	width:16px;
	position:absolute;
	left:0;
	background-image:url(images/photoOO.png);
	background-repeat:repeat-y;
	
	
}

div#photo-droite
{
	
	opacity:0.5;
	height:100%;
	width:16px;
	position:absolute;
	right:0;
	background-image:url(images/photoEE.png);
	background-repeat:repeat-y;
	
}

div#photo-bas
{
	
	opacity:0.5;
	height:16px;
	width:100%;
	position:absolute;
	bottom:0;
	background-image:url(images/photoSS.png);
	background-repeat:repeat-x;
	
}

div#coinHG, div#coinHD, div#coinBG, div#coinBD
{
	
	opacity:0.5;
	width:26px;
	height:26px;
	position:absolute;
}

div#coinHG
{
	top:0;
	left:0;
	background-image:url(images/photoNO.png);
}

div#coinBG
{
	bottom:0;
	left:0;
	background-image:url(images/photoSO.png);
}
div#coinHD
{
	right:0;
	top:0;
	background-image:url(images/photoNE.png);
}
div#coinBD
{
	right:0;
	bottom:0;
	background-image:url(images/photoSE.png);
}

img#loader
{
position:absolute;
top:50%;
left:50%;
margin-top:-10px;
margin-left:-110px;	
}
/*---------------------ICONE-----------*/
#description{
overflow:auto;
padding:0;
margin:0;
position:relative;
top:-18px;	
}

#icones{
float:right;
max-width:198px;
margin-left:10px;
margin-top:18px;
margin-right:16px;	
	
}

#icones img{
margin-right:2px;
margin-bottom:4px;	
}




/*---------------------NAV-----------*/


div#nav
{
	height:21px;
	width:304px;
	margin:18px auto;
}
div#nav-prec
{
	height:21px;
	width:52px;
	float:left;
	background-position:left;
}
div#nav-prec:hover
{
	background-position:right;
}
div.nav-prec
{
	background-image:url(images/nav_prec.png);
}
div.nav-prec-rien
{
	background-image:url(images/nav_prec_rien.png);
}
div#nav-suiv
{
	height:21px;
	width:52px;
	float:left;
	background-position:left;
}
div#nav-suiv:hover
{
	background-position:right;
}
div.nav-suiv
{
	background-image:url(images/nav_suiv.png);
}
div.nav-suiv-rien
{
	background-image:url(images/nav_suiv_rien.png);
}
div#nav-mid
{
	height:21px;
	min-width:200px;
	background-image:url(images/nav_mid.png);
	background-repeat:repeat-x;
	float:left;
	
}

div#nav-mid p
{
	color:#FFF;
	font-size:14px;
	width:100%;
	text-align:center;
	margin:2px 0 0;
	padding:0;
	
}
div#nav-mid a
{
	text-decoration:none;
	color:#FFF;
}
div#nav-mid a:hover
{
	color:#0091ff;
}

/*-----------ZOOM IMAGE -------------*/

#zoom{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	bottom:0;
	z-index:50;
}

#zoom #fond{
	width:100%;
	height:100%;
	background-color:black;
	opacity:0.9;
	z-index:51;
}

#zoom #fermer{
	width:27px;
	height:27px;
	top:3px;
	left:3px;
	position:absolute;
	background-image:url(images/bouton-fermer.png);
	z-index:53;
}

#zoom #fermer a{
	display:block;
	height:100%;
}

#zoom #photo-all
{
	/*width:500px;*/
	/*height:300px;*/
	z-index:52;
	position:fixed;
	margin:0;
}

#zoom #photo-image
{
	max-width:none;
	max-height:none;
	
}

#zoom #photo-image:hover, #zoom #photo-haut, #zoom #photo-gauche, #zoom #photo-droite, #zoom #photo-bas, #zoom #coinHG, #zoom #coinHD, #zoom #coinBG, #zoom #coinBD
{
	opacity:1;
}


#pub {
	margin-top:18px;
}

#pub > * {
	left:106px;
}