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

@import url("reset.css");
html{
	height:100%;
	min-height:100%;
	max-height: 100%;
	border: none;
}

a	{
	text-decoration: none;
	}
	
body{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:11px;
	background-image:url(/Oulipo@50/images/bg.jpg) repeat;
	height:100%;
	min-height:100%;
	vertical-align:baseline;
	border: none;
	text-align: center;			
}



.clear{clear:both;}



/*--------------------------------------------------------------
	SPLASH PAGE
----------------------------------------------------------------*/
#splash-page{
	margin:0;
	padding:0;
	text-align: left;
}

#splash-page #oulip{
	margin:auto;
	padding:0 0 0 0;
	width: 100%;
	background: url(/Oulipo@50/images/bg-vert.jpg) repeat;
	height: 350px;
}

#splash-page #oulip img{
	margin:30px 0 0 0;
	padding: 0;	
}

#splash-page .filetdrapo{
	margin:-19px 0 0 0;
	padding: 0;	
}

#splash-page .bloctext{
	display:block;
	position:relative;
	margin-left: auto;
  	margin-right: auto;
	padding:10px 0 0 0;
	font-size:12px;
	font-style:italic;
	width: 650px;
	line-height:18px	
}

#splash-page .bloctext #fr{
	margin:0;
	padding:7px 20px 0 0;
	text-align: right;
	float:left;
	background:url(/Oulipo@50/images/pointilles-gris-v.gif) repeat-y right;
	height: 95px;
	width:304px;
	
}


#splash-page .bloctext #us{
	margin:0 0 0 0;
	padding:7px 0 0 0;
	text-align:left;
	float:right;
	width:304px;
}


#splash-page .bloctext #fr a{
	padding: 0 3px 0 12px;
	font-weight:bold;
	text-decoration:none;
	background:url(/Oulipo@50/images/fleche.gif) no-repeat left;
	color:#000000;
	line-height:26px
}

#splash-page .bloctext #fr a:hover, a:active{
	text-decoration:none;
	color:#e52f35;;
	/*background:#e52f35;*/
	background:url(/Oulipo@50/images/fleche.gif) no-repeat left;
}

#splash-page .bloctext #us a{
	margin-top:5px;
	padding: 0 0 0 12px;
	font-weight:bold;
	text-decoration:none;
	background:url(/Oulipo@50/images/fleche.gif) no-repeat left;
	color:#000000;
	line-height:26px
}

#splash-page .bloctext #us a:hover, a:active{
	text-decoration:none;
	color:#e52f35;;
	/*background:#e52f35;*/
	background:url(/Oulipo@50/images/fleche.gif) no-repeat left;
}


/*--------------------------------------------------------------
	HEADER
----------------------------------------------------------------*/

body #top #header {
	top : 0px;
	display:block;
	position:absolute;
	width:auto;
	min-width:100%;
	/*width: 1000px;*/
	height:188px;
	z-index:20;
	overflow:visible;
}

#header #left{
	display:block;
	width:265px;
	height:177px;
	margin-left:0;
	background: url(/Oulipo@50/images/ombre-verti-header2.jpg) #009ca7 no-repeat right top;
	
	
}




#header #filet{
	display:block;
	width:265px;
	height:11px;
	margin:0 0 0 0;
	background: url(/Oulipo@50/images/ombre-left-header.jpg) no-repeat left top;
	
}


#header #filet2{
	display:block;
	width:265px;
	height:11px;
	margin:0;
	background: url(/Oulipo@50/images/ombre-left-headerV.jpg) no-repeat left top;
	z-index:25;
}

#header #left #logo{
	display:block;
	width:147px;
	height:137px;
	margin:0;
	padding: 25px 0 0 55px;
	border: none;	
}

#header #principal{
	display:block;
	position:absolute;
	top: 0px;
	width:722px;
	height:188px;
	margin: 0 0 0 265px;
	background: url(/Oulipo@50/images/ombre-horiz-header.jpg) repeat-x bottom;
	border: none;
	text-align: left;	
}

#header #principal2{
	display:block;
	position:absolute;
	top: 0px;
	width:722px;
	height:188px;
	margin: 0 0 0 265px;
	background: url(/Oulipo@50/images/ombre-horiz-header2.png) repeat-x bottom;
	border: none;
	z-index:9;
	text-align: left;
	
}

#header #bout{
	display:block;
	position:absolute;
	left: 722px;
	width:100px;
	height:11px;
	margin: 0 0 0 0;
	border: none;
	background: url(/Oulipo@50/images/bout-filet3.jpg) no-repeat;
}

#header #bout2{
	display:block;
	position:absolute;
	left: 722px;
	width:100px;
	height:11px;
	margin: 0 0 0 0;
	border: none;
	background: url(/Oulipo@50/images/bout-filet3v.jpg) no-repeat;
}
#header #principal #title{
	display:block;
	position:relative;
	width:686px;
	height:177px;
	margin: 0 0 0 0;
	border: none;
}


/*--------------------------------------------------------------
	BODY
----------------------------------------------------------------*/


body #container {
	display:block;
	position:absolute;
	margin:0;
	/*margin-bottom:50px;*/
	/*width:960px;*/
	width:100%;
	height:100%;
	min-height:100%;
	top:177px;
	text-align: left;	
}

#content{
	display:block;
	min-height:100%;
	height: 100%;
	position:relative;
	margin:0 0 150px 0;
	
}



/*--------------------------------------------------------------
	LEFT
----------------------------------------------------------------*/


#content-left{
	display:block;
	position: relative;
	width:265px;
	height:1635px;
	margin:0;
	min-height: 1635px;
	background: url(/Oulipo@50/images/ombre-verti-content.jpg) #009ca7 repeat-y right top;
	text-align: left;
}


#content-left2{
	display:block;
	position: relative;
	width:257px;
	height:1100px;
	margin:0;
	background: #009ca7;
	min-height:1100px;
	text-align: left;
	/*height: 100%;*/	
}

#left ul#langues {
	display:block;
	position:absolute;
	margin: 0;
	top: -45px;
	left: 40px;
	list-style-type:none;
	z-index:50;
}

#left ul#langues li#flag {
	display:inline;
	cursor:pointer;
	margin: -2px 0 0 18px;
	border: none;

}

#left ul#langues li#flag a.drapo{
	border:none;
	background:none;
}

#left ul#langues div.lang{
	display:block;
	position:relative;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
	text-align:center;
	color:#FFFFFF;
	margin: 7px 9px 0 9px;
}


#left ul#langues div.filet {
	position:relative;
	width:1px;
	height:21px;
	background: url(/Oulipo@50/images/filet-lang.gif) no-repeat;
	margin: -26px 0 0 61px
}


#left ul{
	list-style-type:none;
	padding: 47px 15px 0 25px;
	
}


#left ul li#std {
	list-style-type:none;
	margin: 0 0 0 5px;
	position:relative;
	display:block;
	color:#ffffff;
	text-decoration:none;
	padding: 0 0 8px 0;
	line-height: 1.1em;
}

#left ul li#std a{
	text-decoration:none;
	color:#FFFFFF;
	padding: 1px 4px 1px 4px;
	
}

#left ul li#titre {
	font-weight:bold;
	font-size:12px;
	color:#FFFFFF;
	list-style-type:none;
	margin: 0 0 0 5px;
	position:relative;
	display:block;
	padding: 0 0 8px 0;
	line-height: 1.1em;
	
}

#left ul li#titre a{
	text-decoration:none;
	color:#FFFFFF;
	padding: 1px 4px 1px 4px;	
}


#left ul li#titre a:hover, a:active{
	text-decoration:none;
	/*color:#8de5eb;*/
	color:#e52f35;
	background:#ffffff;
}


#left ul li#titre a.current{
	text-decoration:none;
	color:#FFFFFF;
	background:#e52f35;
}

#left ul li#filet {
	padding:0;
	width:202px;
	height: 1px;
	margin: 10px 0 5px 0;
 	background: url(/Oulipo@50/images/blc.gif) repeat-x top;
}


#left ul li#pointilles {
	padding: 0 0 8px 0;
	width:202px;
	height: 1px;
	margin: -2px 0 3px 0;
 	background: url(/Oulipo@50/images/pointilles-blc.gif) repeat-x top;
}










/*--------------------------------------------------------------
	CONTENU HOME
----------------------------------------------------------------*/

#content-home{
		clear:both;
		display:block;
		position:absolute;
		top:11px;
		left: 274px;
		margin: 0 0 0 20px;
		min-height:100%;
		height: 1660px;
		background: url(/Oulipo@50/images/ombre-verti-content3.png) repeat-y top right;
}

#content-home #deco1{
	background: url(/Oulipo@50/images/o-devant3.gif) no-repeat top right;
	display: block;
	position:absolute;
	top: 200px;
	left: 630px;
	width: 85px;
	height: 120px;		
}

#content-home #deco2{
	background: url(/Oulipo@50/images/oulipo-deco3.gif) no-repeat top right;
	display: block;
	position:absolute;
	top: 201px;
	left: 715px;
	width: 294px;
	height: 231px;	
}


#content-home #deco4{
	background: url(/Oulipo@50/images/deco-ouli.gif) no-repeat top left;
	display: block;
	position:absolute;
	top: 150px;
	left: 685px;
	width: 408px;
	height: 196px;	
}

#content-home #decotitrefr{
		display:block;
		position:absolute;
		width:575px;
		height:153px;
		top: -110px;
		left:-55px;
		padding: 0;
		background: url(/Oulipo@50/images/titre-intro-FR.gif) no-repeat;
}


#content-home #decotitreen{
		display:block;
		position:absolute;
		width:575px;
		height:153px;
		top: -110px;
		left:-55px;
		padding: 0;
		background: url(/Oulipo@50/images/titre-intro-EN.gif) no-repeat;
}

	#contenu {
		width: 715px;
		margin: 0 0 50px 10px;
		min-height: 100%;
		height: 1650px;
}

 
	#intro {
			position:relative;
			display:block;
			margin: 50px 0 0 50px;
			/*width: 600px;*/
			/*border:#CC6600 thin solid;*/
			
					
}
	
	#intro ul#pres{
			list-style-type: none;
			margin: 50px 25px 0 55px;
			/*border:#000000 thin solid;*/	
			/*background: url(/Oulipo@50/images/pointilles-vert_v-2.gif) repeat-y top right;*/	
}

	#intro ul#pres li{
			line-height:20px;
			text-align: justify;
			padding: 0 85px 10px 0;
			width: 465px;
			margin: 0;
			/*border:#009933 thin solid;*/		
}

		#intro ul#pres li#nom {
			/*font-style:italic;*/
			text-align:right;
			/*font-size:12px;*/
			color: #999999;
}

		#intro ul#pres li span {
			color: #009ca7;
			font-weight:bold;
}

		
		#intro ul#pres li p {
			font-style:italic;
			/*font-size:12px;*/
			margin: 10px 0 10px 0;
}

		#intro ul#pres li#merci {
			font-style:italic;
			/*font-size:12px;*/
			margin: 35px 0 10px 0;
			padding: 15px 0 0 0;
			font-size:10px;
			line-height:16px;
			background: url(/Oulipo@50/images/pointilles-noir.gif) repeat-x top;
}	
		#intro ul#pres li a {
			color: #999999;
			text-decoration:underline;
} 

		#intro ul#pres li a:hover, a:active {
			color: #009ca7;
			text-decoration:underline;
} 

	#apos-left{
		display:block;
		position:absolute;
		width:82px;
		height:78px;
		top: -30px;
		left:-50px;
		padding: 0;
		background: url(/Oulipo@50/images/apos-g.gif) no-repeat;
}

	#apos-right{
		display:block;
		position:relative;
		clear:both;
		width:82px;
		height:78px;
		left: 545px;
		top:-84px;
		padding: 0;
		/*margin: -80px 0 0 565px;*/
		background: url(/Oulipo@50/images/apos-d.gif) no-repeat;
}

	#intro ul#pres li#filet-pointilles-verti {
		position:relative;
		display:block;
		margin: 0;
		background: url(/Oulipo@50/images/pointilles-vert-v.gif) repeat-y top;
		width: 1px;
		height: 500px;
}
	

/*--------------------------------------------------------------
	CONTENU GALERIE
----------------------------------------------------------------*/
	

#content-galerie{
	clear:both;
	display:block;
	position:absolute;
	top:2px;
	left: 257px;
	margin: 0 0 0 0;
	min-height:100%;
	height: auto;
	
}


#content-galerie #ombre{
	display:block;
	position:absolute;
	width:11px;
	min-height:1100px;
	margin:9px 0 0 -2px;
	background: url(/Oulipo@50/images/ombre-verti-content2.png) repeat-y top;
	z-index:3;
}

#content-galerie #ombre2{
	display:block;
	position:absolute;
	width:11px;
	left: 751px;
	top: 9px;
	min-height:1100px;
	background: url(/Oulipo@50/images/ombre-verti-content3.png) repeat-y top;
	z-index:3;
} 


#content-galerie #deco1{
	background: url(/Oulipo@50/images/o-devant2.gif) no-repeat top right;
	display: block;
	position:absolute;
	top: 209px;
	left: 668px;
	width: 85px;
	height: 120px;		
}

#content-galerie #deco2{
	background: url(/Oulipo@50/images/oulipo-deco2.gif) no-repeat top right;
	display: block;
	position:absolute;
	top: 210px;
	left: 752px;
	width: 294px;
	height: 231px;	
}


#content-galerie #deco3{
	background: url(/Oulipo@50/images/i-deco.gif) no-repeat top right;
	display: block;
	position:absolute;
	top: 650px;
	left: 0px;
	width: 23px;
	height: 101px;	
}

#content-galerie #previous_fleche{
	display:block;
	position:absolute;
	top:275px;
	left: 25px;
	width:16px;
	height:29px;
	cursor:pointer;
}

#content-galerie #next_fleche{
	display:block;
	position:absolute;
	top:275px;
	right: 25px;
	width:16px;
	height:29px;
	cursor:pointer;	
}


#content-galerie #book{
	display:block;
	width: 752px;
	height:566px;
	background: url(/Oulipo@50/images/bg-vert.jpg) repeat;
	overflow: visible;
}

#content-galerie #book #fil{
	display:block;
	position:absolute;
	top:566px;
	width: 752px;
	height:14px;
	background: url(/Oulipo@50/images/filet-book2.jpg) no-repeat;	
}


#content-galerie #book #page{
	position:absolute; 
	z-index:50;
	left: 65px; 
    top: 32px;
	width: 675px;
	height:400px;
}

#content-galerie #book .screen{
	overflow: hidden;
	left:14px;
	float:left;
	-webkit-box-shadow:1px 1px 10px #a7a7a7;
	-moz-box-shadow:1px 1px 10px #a7a7a7;
}

#content-galerie #book #legende{
	position:absolute; 
	z-index:50;
	top: 598px;
	left:70px;
	width: 600px;
	
}

#content-galerie #book #legende #legende-titre{
	background: url(/Oulipo@50/images/pointilles-noir.gif) repeat-x bottom;
	font-style: normal;
	font-size: 12px;
	font-weight: bold;
	margin:0 0 6px 0;
	width: 600px;
	padding: 0 0 8px 0;
	line-height:18px;
}



#content-galerie #book #legende #legende-descriptif{
	margin:0 0 0 0;
	width: 600px;
	line-height: 21px;
	text-align:justify;
	background: url(/Oulipo@50/images/pointilles-noir.gif) repeat-x bottom;
	padding: 0 0 15px 0;
}


#content-galerie #book #legende #legende-descriptif span{
	font-style:italic;
	margin: 0 0 2px 0;
}


#content-galerie #book #legende #pagination{
	margin:0 245px 0 0;
	font-size: 11px;
	font-weight: bold;
	text-align:center;
	background: url(/Oulipo@50/images/noir.gif) repeat-x bottom left;
	width: 600px;
	padding: 8px 0 5px 0;
	height:22px;
}

#content-galerie #book #legende .previous{
	margin: -27px 5px 0 262px;
	cursor:pointer;
}

#content-galerie #book #legende .next{
	display:block;
	margin: -14px 0 0 305px;
	cursor:pointer;
}


/*--------------------------------------------------------------
	FOOTER
----------------------------------------------------------------*/

#footer{
	clear:both;
	display:block;
	position:relative;
	width:100%;
	height:100px;
	z-index:200;
	margin:0 0 0 0;
	vertical-align:bottom;
	color:#FFFFFF;
	
}
/* 
#ombre-footer{
	display:block;
	margin:0 0 0 0;
	width:100%;
	height:8px;
	background: url(/Oulipo@50/images/ombre-footer_01.png) repeat-x top;
	z-index:200;
}*/

#footer-contenu{
	display:block;
	width:100%;
	background: #FFFFFF;
	/*background: url(/Oulipo@50/images/pointilles-noir.gif) repeat-x bottom;*/
	background: url(/Oulipo@50/images/pointilles-footer_02.gif) repeat-x top;
	margin:0 0 0 0;
	height:100%;
	
}

#footer-contenu #texte{
	display:block;
	position:absolute;
	margin:12px 0 0 460px;
	color:#000000;
	font-size:10px;
	font-style:italic;
	text-align:center;
	line-height:18px;
}


#footer-contenu #texte span{
	font-size:11px;
	text-align:center;
	font-weight:bold;
}

#footer-contenu #texte a{
	color:#000000;
	text-decoration:none;
	padding:0 1px 0 1px;
}

#footer-contenu #texte a:hover, a:active {
	color:#ffffff;
	background:#e52f35;
	text-decoration:none;
	
}