html, body 
{
	margin: 0;
	padding: 0;
	background: #000033;
	color:white;
	font: normal 12px "typewriter";
}

#page
{
	margin: 0;
	padding: 0;
	display:block;
	width:1000px;
	height:647px;
	position:absolute;
	left:50%;
	transform:translateX(-500px);
	background-image: url(garde_castel.png); 
	background-repeat: no-repeat;
    background-attachment: absolute;
    background-position:100% 40px;
	background-size: 497px 600px;	
	color:white;
	font: normal 12px "mayflower";
}

#page .texte
{
	padding: 0;
	margin-top: 45vh;
	display:block;
	top:40px;
	left:50%;
	transform:translateX(-100%);
	width:500px;
	position:absolute;
	color:white;
	font: normal 20px "typewriter";
	/* border:3px solid red; */
	text-align:center; /* poussé de la moitié de hauteur de viewport */
 /* poussé de la moitié de hauteur de viewport */
}

#curs
{
	margin: 0;
	padding: 0;
	display:block;
	width:497px;
	height:647px;
	position:absolute;
	left:50%;
    cursor:pointer;	
}

#book
{
	margin: 0;
	padding: 0;
	display:block;
	top:40px;
	left:50%;
	transform:translateX(-500px);
	width:1000px;
	height:600px;
	position:absolute;
}

@font-face
{
font-family: mayflower;
src: url(antique.ttf);
}

/* Let's get this party started */
body::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
body::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;

    border-radius: 10px;
    background: rgba(0,0,192,0.7); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
body::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(192,192,192,0.7); 
}

.ca
{
	border:1px solid #999;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
	
#image1
{
	margin: 0;
	padding: 4px;
	display:block;
	top:30px;
	left:5%;
	/* transform:translateX(-55%); */
	position:absolute;
	z-index:1;
	visibility:none;
	/* border:1px solid red;  */
}

#image2
{
	margin: 0;
	padding: 4px;
	display:block;
	bottom:110px;
	right:54%;
	/* transform:translateX(-150px); */
	position:absolute;
	z-index:1;
	visibility:none;
	/* border:1px solid red;  */
}

#image3
{
	margin: 0;
	padding: 4px;
	display:block;
	top:30px;
	left:55%;
	/* transform:translateX(-150px); */
	position:absolute;
	z-index:1;
	visibility:none;
	/* border:1px solid red;  */
}

#image4
{
	margin: 0;
	padding: 4px;
	display:block;
	bottom:110px;
	right:5%;
	/* transform:translateX(-150px); */
	position:absolute;
	z-index:1;
	visibility:none;
	/* border:1px solid red;  */
}

.coins
{
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background:url(castel/ctl.png) no-repeat left top, 
url(castel/ctr.png) no-repeat right top, 
url(castel/cbl.png) no-repeat left bottom, 
url(castel/cbr.png) no-repeat right bottom;
z-index:999; 
/* border:1px solid red;  */
}

#titre
{
	margin: 0;
	padding: 2px;
	display:block;
	/* transform:translateX(-150px); */
	position:absolute;
	top:100%;
	left:0%;
    width:100%;
	line-height:20px;
	color:black;
	font: bold 18px "mayflower";
	text-align:center;
	/* border:1px solid red;  */
}

#detail
{
	margin: -10px 0 0 0;
	padding: 2px 2px 2px 2px;
	display:block;
	/* transform:translateX(-150px); */
	position:absolute;
	top:110%;
	left:0%;
    width:100%;
	color:#333;
	font: normal 16px "mayflower";
	text-align:center;
	/* border:1px solid blue;  */
}

#numpageleft
{
	margin: 0 0 0 0;
	padding: 2px 2px 2px 2px;
	display:block;
	left:23%;
	position:absolute;
	top:600px;
	color:#333;
	font: normal 20px "mayflower";
	text-align:center;
	/* border:1px solid blue;  */
}

#numpageright
{
	margin: 0 0 0 0;
	padding: 2px 2px 2px 2px;
	display:block;
	left:75%;
	position:absolute;
	top:600px;
	color:#333;
	font: normal 20px "mayflower";
	text-align:center;
	/* border:1px solid blue;  */
}
p
{
			line-height:14px;
}

#next
{
display:block; 
position:absolute;
bottom:13px;
right:19px;
width:60px;
height:54px;
/* border:1px solid blue; */
	background-image: url(paged.png); 
	background-repeat: no-repeat;
cursor:pointer;
}

#previous
{
display:block; 
position:absolute;
bottom:13px;
left:19px;
width:60px;
height:54px;
/* border:1px solid blue; */
	background-image: url(pageg.png); 
	background-repeat: no-repeat;
cursor:pointer;
}

.departement
{
	color:#000;
	font: bold 12px "mayflower";
}