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

body { color: #ffd899; font-size: 14px; font-family: Georgia, "Times New Roman", Times, serif; background-color: #4e0515; }

h1 { font-style: normal; font-weight: normal; color: #f19f1f; font-size: 36px; font-family: Diavlo;}

#fond { position: fixed; background-image: url(../img/fond-degrade.png); background-repeat: repeat-x; width: 100%; height: 100%;}

#image-fond { left: 0px; position: absolute; height: 816px; width: 763px; left: 0px; top: 0px; background-image: url(../img/fond-rideaux.jpg);}

#logo { top: -30px; left: 380px; z-index: 6; height: 59px; width: 109px; position: absolute;}

#enluminureHaut { left: -17px; z-index: 4; height: 305px; width: 913px; position: absolute; top: -20px; background-image: url(../img/enluminures-haut.png);}

#page { top: 75px; margin-right: auto; margin-left: auto; width: 879px; position: relative;}

#page #header{ top: 0px; width: 879px; position: absolute; z-index: 3; background-repeat: no-repeat; background-image: url(../img/page-haut.png); 	height: 300px; }

#page #center{padding-bottom: 40px; z-index: 1; position: relative; padding-top: 40px; padding-right: 40px; padding-left: 300px; top: 0px; background-color: #490a14; background-image: url(../img/page-degrade.png); background-repeat: repeat-y;}

#page #image{ top: 0px; position: relative; height: 300px; width: 879px; z-index: 1; display: none;}

#page #menu{ width: 200px; padding: 30px; z-index: 5; left: 0px; top: 0px; position: absolute; }

#page #menuFond{ width: 200px; height: 240px; padding: 30px; background-image: url(../img/menu-degrade.png); background-repeat: repeat-y; z-index: 3; background-color: #9a0b0e; left: 0px; top: 0px; position: absolute;  opacity : 0.8; -moz-opacity : 0.8; -ms-filter: "alpha(opacity=80)"; filter : alpha(opacity=80); }

.navigation { margin: 0; padding: 0; list-style: none; } 

.navigation a, .navigation span { font-family: Georgia, "Times New Roman", Times, serif; padding-left: 0; padding-bottom: 10px; padding-right: 0; padding-top: 10px; font-size: 16px; font-weight: bold; display: block; color: #f19f1f; text-decoration: none; }
 
.navigation a:hover, .navigation a:focus, .navigation a:active { text-decoration: none; }
 
.navigation .subMenu, .navigation .subMenu a { letter-spacing: 0px; font-style: normal; font-weight: normal; font-family: Georgia, "Times New Roman", Times, serif; color: #ffd899; font-size: 14px; margin: 0; padding: 0; }

.navigation ul.subMenu a { padding: 3px 10px 3px 15px; }

.navigation ul.subMenu .on a { padding-left: 15px; padding-bottom: 3px; padding-right: 10px; padding-top: 3px; background-position: 0 9px; background-image: url(../img/menu-fleche.png); background-repeat: no-repeat; }

#FBFond { margin-top: 50px; bottom: 0px; width: 616px; height: 40px; position: absolute; left: 260px; background-color: white; }

#dargaud { top: 20px; position: relative; margin-right: auto; margin-left: auto; height: 15px; width: 99px; }

#share { top: -10px; position: relative; width: 800px; height: 30px; z-index: 8; left: 282px; }
#share a { color:#666; text-decoration: none; }
#share a:hover { text-decoration: underline; }

#credits { top: -35px; width: 260px; position: absolute; left: 20px; z-index: 0; text-align: center; }

#enluminureBas { position: absolute; left: -17px; z-index: 2; height: 210px; width: 913px; background-image: url(../img/enluminures-bas.png);}
#g { left: 0px; bottom: 0px; position: absolute;height: 210px; width: 20px; background-image: url(../img/enluminures-bas.png); overflow: hidden;}
#m { position: absolute; left: 20px; bottom:0px; height: 80px; width: 873px; background-image: url(../img/enluminures-bas.png); overflow: hidden; background-position:-20px -130px; }
#d { bottom: 0px; right:0px; position: absolute;height: 210px; width: 20px; background-image: url(../img/enluminures-bas.png); overflow: hidden; background-position:-893px 0; }

#footer { left: -16px; width: 913px; z-index: 10; bottom: 42px; position: relative; }

.couv { text-align: center; width: 177px; float: left; margin-bottom: 20px; margin-right: 20px; }

/* personnages */
.tooltip { display:none; background:transparent url(../img/tooltip.png); font-size:12px; height:132px; width:244px; padding:25px; z-index: 100;}	

#listeImage img { border-style: solid; border-color: #ad7b5d; border-width: 6px; cursor:pointer; margin: 10px;}

/* overlay (izneo et player bd */
#izneo { background-position: 20px 5px; padding: 5px; height: 20px; background-repeat: no-repeat; background-image: url(../img/izneo-couv.jpg); font-size: 12px; font-family: sans-serif; color: #490a14; background-color: #ad7b5d; text-align: center; }

#izneo a { color: #490a14; text-decoration: none; }

#izneo a:hover { text-decoration: underline; }

#overlay { background-image:url(../img/overlay.png); color:#efefef; height:650px; }

div.contentWrap { height:655px; overflow-y:auto; }

.apple_overlay { display:none; width:990px; padding:40px; }

.apple_overlay .close { background-image:url(../img/close.png); position:absolute; right:20px; top:20px; cursor:pointer; height:35px; width:35px; }

/* croquis */
.visionneuse { position:relative; overflow:hidden; width: 540px; height:550px;}

.scrollable { background-color: #ad7b5d; position:relative; overflow:hidden; margin-left: 45px; width: 450px; height:550px; -moz-border-radius:10px; -webkit-border-radius:10px; }

.scrollable .items { width:20000em; position:absolute; clear:both;}

.items div { float:left; width:540px; }

/* calendrier */
#calendrier { display:none; width:913px; }
#calendrier div { }
#calendrier-swf { width: 913px; height: 560px; }

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 17px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../img/bouton-scroll.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-left: 505px; position: absolute; top:220px; }
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left { margin-left: 5px; position: absolute; top:220px; }
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}