.clean{
	height: 0;
	clear: both;
}

html{
	height: 100%;
}

body{
	background:#111 url('../../js/booklet/images/body_background.png') repeat center center;
	height: 100%;

}

a{
	cursor: pointer;
}

#bandeau-superieur-dark, #bandeau-superieur-light{
	width: 100%;
	
	padding-top: 0.5%;

	z-index: 100;

	margin: 0 auto;
	position:relative;
}

#bandeau-superieur-dark{
	background-color: #505253;
	box-shadow: -1px 2px 2px 1px rgba(0, 0, 0, 0.7); 
}

#bandeau-superieur-light{
	background-color: #dfdfdf;
	box-shadow: -1px 1px 1px 1px #b4b4b4; 
}

#logo{
	margin-left: 2%;
	float: left;
	width: 20%;
}

#logo img{
	height: 37px;
	max-width:100%; 
}

#boutons{
	width: 50%;
	margin: 0 auto;
}

#boutons-navigation{
	float: left;
	width: 40%;
}

#boutons-navigation input{
	vertical-align: 50%;
	margin-left: 1%;
	width: 8%;
	text-align: center;
}

#boutons-navigation a{
	margin-left: 1%;
}

#boutons-utilitaire{
	text-align:right;
	float : right;
	width: 40%;
}


/*******************************************************/

#contenu-liseuse{
	position:relative;
	text-align: center;
	z-index:50;
}
#contenu{
	width: 100%;
	height: 100%;
	z-index: 0;
	-webkit-transform: translate3d(0,0,0);
}

#liseuse{
	height: 100%;
}

#liseuse img{
	width: 100%;
}


/**********************************************************************/

#plein-ecran, #cent, #zoom-plus, #zoom-moins{
	display: inline-block;
}

#cent-mobile{
	display: none;
}

#loader_img{
	text-align: center;
	display: none;
	top: 49%;
	width:100%;
	position:absolute;
	
}

/*********************************************************************/
.booklet {
	margin:0px auto;
}
.booklet .b-arrow div {
	top: 40%;
}

.booklet .b-arrow-next div {
    margin-left: 50%;
}

/***********************************************************************/

.b-menu{
	padding: 0;
	height: 0;
}

#custom-menu{
	display: none;
}

#liste-page{
	background-color: #505253;
	box-shadow: -1px 2px 2px 1px rgba(0, 0, 0, 0.7); 
	width: 100%;	
	z-index: 100;
	margin: 0 auto;
	position:absolute;
	bottom:0px;
	min-height:45px;
}

#liste-page ul{
	display:block;
	margin: 0.5% 0 0.5% 0;
	margin-bottom: 0;
	text-align: center;
	font-size:14px;
}

#liste-page .b-text{
	display: none;
}

#liste-page li{
	display: inline-block;
	margin: 0;
	padding: 0 0.3%;
}

#liste-page a, #liste-page a:hover, #liste-page a:visited{
	color: white;
	text-transform: none;
}

.booklet .b-wrap-right, .booklet .b-wrap-left{
	background: none;
}
.booklet .b-arrow div
{
	width:47px;
	height:91px;
}
.booklet .b-arrow {
	width:47px;
}
.booklet .b-arrow-next {
	right:-47px;
}
.booklet .b-arrow-prev {
	left:-47px;
}
.booklet .b-arrow-next div {
	margin-left: 0px;
	background-color:#ddd;
	-webkit-transition: background 500ms ease-out;
	-moz-transition: background 500ms ease-out;
	-ms-transition: background 500ms ease-out;
	-o-transition: background 500ms ease-out;
	transition: background 500ms ease-out;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.booklet .b-arrow-next div:hover {
	background-color:#fff;
	-webkit-transition: background 500ms ease-out;
	-moz-transition: background 500ms ease-out;
	-ms-transition: background 500ms ease-out;
	-o-transition: background 500ms ease-out;
	transition: background 500ms ease-out;
}
.booklet .b-arrow-prev div {
	margin-right: 0px;
	background-color:#ddd;
	-webkit-transition: background 500ms ease-out;
	-moz-transition: background 500ms ease-out;
	-ms-transition: background 500ms ease-out;
	-o-transition: background 500ms ease-out;
	transition: background 500ms ease-out;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.booklet .b-arrow-prev div:hover {
	background-color:#fff;
	-webkit-transition: background 500ms ease-out;
	-moz-transition: background 500ms ease-out;
	-ms-transition: background 500ms ease-out;
	-o-transition: background 500ms ease-out;
	transition: background 500ms ease-out;
}
.b-num-page
{
	background-color:#333;
	padding:6px 3px;
	border:0px;
	color:#ccc;
	min-width:20px;
	display:inline-block;
}
.b-num-page:hover
{
	color:#FFF;
}
.b-num-page20
{
	border-width:0px 1px 0px 0px;
	border-style:solid;
	border-color:#666;
}
.active-page .b-num-page{
	background-color:#666;
}
/*********************************************************************/
/*********************************************************************/
/*********************************************************************/
/*********************************************************************/
/*********************************************************************/
/*********************************************************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#plein-ecran, #cent{
		display: none;
	}

	#cent-mobile{
		display: inline-block;
	}

	#contenu{
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.booklet .b-arrow-next div {
	    margin-left: -50%;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	#liste-page{
		min-height:60px;
	}
}