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_noseart.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 */
}

#cadre
{
	margin: 0;
	padding: 0;
	display:block;
	top:60px;
	left:50%;
	transform:translateX(-480px);
	width:470px;
	height:400px;
	position:absolute;
	left:50%;
	border:1px solid #999;
    overflow-y: auto;
}

#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(veterantypewriter.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);
}
	
#image
{
	margin: 0;
	padding: 4px;
	display:block;
	top:40px;
	left:20px;
	/* transform:translateX(-450px); */
	position:absolute;
	z-index:1;
	visibility:none;
	/* border:1px solid red;  */
}

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

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

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

#image4
{
	margin: 0;
	padding: 4px;
	display:block;
	top:300px;
	left:530px;
	/* 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(nose/old.png) no-repeat left top; */
/* 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:#444;
	font: bold 20px "mayflower";
	font-stretch:ultra-expanded;
	text-align:center;
	/* border:1px solid red;  */
}

#titre .small
{
	font: bold 12px "mayflower";
	font-stretch:ultra-expanded;
	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:610px;
	color:#333;
	font: bold 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:610px;
	color:#333;
	font: bold 20px "mayflower";
	text-align:center;
	/* border:1px solid blue;  */
}
p
{
			line-height:12px;
}

#next
{
display:block; 
position:absolute;
bottom:6px;
right:0px;
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:6px;
left:-5px;
width:60px;
height:54px;
/* border:1px solid blue; */
	background-image: url(pageg.png); 
	background-repeat: no-repeat;
cursor:pointer;
}

select
{
	margin: 0;
	padding: 0;
	display:block;
	top:70px;
	left:50%;
	transform:translateX(-480px);
	width:470px;
	position:absolute;
	border:0px solid #999;
	background:transparent;
	font: normal 16px "mayflower";
	    overflow-y: none;
}

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