/*

		Global Pageflip Styles
		
*/
#pageflip {
    width: 100%;
    background: #e2eef0;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

#pf-pagerin {
    font-family: "Fauna One", "Lucida Grande", Helvetica, sans-serif;
    color: rgba(0,0,0,0.8);
}

#pf-stage {
    background: #e2eef0;
}

#pageflip-controls {
    top: 0;
    height: 40px;
}

    #pageflip-controls img {
        width: 30px;
        height: 30px;
        padding: 0 3px;
    }

        #pageflip-controls img:hover {
            -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
            filter: grayscale(100%);
        }

.pf-centered-buttons {
    width: 216px;
}

#pf-pfpager {
    width: 216px;
}

.pf-page-container {
    background-color: rgba(255,255,255,1);
}

span[data-begin].speaking {
    outline: 2px solid rgba(102,175,233,0.80);
}

span[data-begin] {
    cursor: pointer;
}

.pf-disabled {
    visibility: hidden;
}

.pf-control-bar-button:focus {
    outline: 2px solid #27BAE7;
}

.btn-control {
    width: 30px;
    height: 30px;
    padding: 0 3px;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
    display: inline-block;
}

    .btn-control.btn-first-page {
        background-image: url(../images/001.png);
    }

    .btn-control.btn-prev-page {
        background-image: url(../images/002.png);
    }

    .btn-control.btn-play {
        background-image: url(../images/005.png);
    }

    .btn-control.btn-stop {
        background-image: url(../images/006.png);
    }

    .btn-control.btn-next-page {
        background-image: url(../images/004.png);
    }

    .btn-control.btn-last-page {
        background-image: url(../images/003.png);
    }

    .btn-control.btn-mute {
        background-image: url(../images/007.png);
    }

    .btn-control.btn-unmute {
        background-image: url(../images/008.png);
    }


#page-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.3);
    padding-top: 6px;
}
/*
	
	Container HTML Page Styles
		
*/
body {
    margin: 0;
    background-color: #e2eef0;
}

@font-face {
    font-family: 'FuturaHandwritten';
    src: url('../fonts/futurahandwritten.eot'), url("../fonts/futurahandwritten.woff") format("woff"), url("../fonts/futurahandwritten.ttf");
}

.access-hidden {
    display: none;
}

article {
    position: absolute;
    top: 0;
    width: 960px;
    height: 960px;
    background-color: rgba(255,255,255,0.85);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    resize: vertical;
    overflow: auto;
}
/*

	Book Cover

*/
#coverTitle {
    position: absolute;
    top: 0;
    left: 0;
}

#coverAuteurs {
    position: absolute;
    bottom: 0;
    left: 0;
}
#coverProducteur {
    position: absolute;
    bottom: 40px;
    left: 438px;
}
/*

	Book Content

*/
p {
    font-family: 'futurahandwritten';
    font-size: 2.2em;
    font-weight: bold;
    margin-left: 100px;
    margin-right: 100px;
}

    p:first-child {
        /*margin-top: 100px;*/
    }

#playPause {
    position: absolute;
    top: 430px;
    left: 377px;
    opacity: 0.8;
    cursor: pointer;
}

    #playPause:hover {
        opacity: 1;
    }

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px;
    width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}