From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 9 Mar 2016 11:12:14 +0000 (+0000)
Subject: #fluidbook-html5 convert css files to less
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c3710428382bfe393c4a82e3691fd38d9ea7268f;p=fluidbook-html5.git

#fluidbook-html5 convert css files to less
---

diff --git a/style/fluidbook.css b/style/fluidbook.css
deleted file mode 100644
index c11b2806..00000000
--- a/style/fluidbook.css
+++ /dev/null
@@ -1,1658 +0,0 @@
-/* Screenshot */
-.screenshot .mview {
-	overflow-y: hidden;
-}
-
-/* Incompatible */
-.no-csstransforms #device {
-	display: none;
-}
-
-.csstransforms #message {
-	display: none;
-}
-
-#message {
-	text-align: center;
-	margin: 30px auto;
-	width: 600px;
-}
-
-#message a {
-	text-decoration: underline;
-}
-
-#message a:after {
-	content: " »";
-}
-
-/* Disable print div*/
-#printpages {
-	display: none;
-}
-
-/* Global settings */
-a, input[type=text], input[type=password], input[type=file], textarea {
-	outline: none;
-	-webkit-appearance: none;
-}
-
-a {
-	text-decoration: none;
-	color: inherit;
-}
-
-* {
-	padding: 0;
-	margin: 0;
-
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	-ms-box-sizing: border-box;
-	-o-box-sizing: border-box;
-
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	-ms-touch-action: double-tap-zoom pinch-zoom;
-	-ms-scroll-chaining: chained;
-
-	-webkit-font-smoothing: antialiased;
-}
-
-img {
-	border: 0;
-	box-sizing: content-box;
-	-moz-box-sizing: content-box;
-	-webkit-box-sizing: content-box;
-	-ms-box-sizing: content-box;
-	-o-box-sizing: content-box;
-}
-
-b, strong, h1, h2, h3, h4, h5, h6 {
-	font-weight: 600;
-}
-
-.pan, .pan * {
-	-ms-touch-action: auto;
-}
-
-html {
-	user-select: text;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-o-user-select: text;
-	-ms-user-select: text;
-}
-
-body {
-	-webkit-touch-callout: none !important;
-}
-
-body, input {
-	font-family: Ubuntu, Arial, Helvetica, sans-serif;
-}
-
-body.loading * {
-	cursor: progress !important;
-}
-
-html.screenshot #main {
-	visibility: visible !important;
-	display: block !important;
-}
-
-html.screenshot #coquillette {
-	visibility: hidden !important;
-}
-
-body {
-	overflow-y: hidden;
-	overflow-x: hidden;
-}
-
-#main {
-	position: absolute;
-	display: none;
-	overflow: hidden;
-	visibility: hidden;
-	opacity: 1;
-}
-
-#main.fadeout, #view.fadeout {
-	transition: opacity 500ms ease-out;
-	-moz-transition: opacity 500ms ease-out;
-	-webkit-transition: opacity 500ms ease-out;
-	-ms-transition: opacity 500ms ease-out;
-	-o-transition: opacity 500ms ease-out;
-
-	opacity: 0;
-}
-
-#hiddencontents {
-	display: none;
-}
-
-/* Background */
-#background {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-}
-
-#background .links {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-#background .links .link {
-	position: absolute;
-}
-
-/* Orientation */
-.portrait .shade, .portrait .page.right {
-	display: none;
-}
-
-.portrait .hideOnPortrait {
-	display: none;
-}
-
-/* Desktop devices */
-
-.desktop #links {
-	cursor: url(../images/cur-zoom-in.png), -moz-zoom-in;
-}
-
-.desktop.zoomed #links {
-	cursor: url(../images/cur-zoom-out.png), -moz-zoom-out;
-}
-
-#links .link {
-	cursor: auto;
-}
-
-/* Coquillette */
-#coquillette {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 1000;
-}
-
-/* Pages */
-.background, .texts {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	overflow: visible;
-}
-
-.background {
-	background-repeat: no-repeat;
-}
-
-.background img {
-	width: 100%;
-	height: 100%;
-}
-
-.texts {
-}
-
-.texts img, .texts object {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-/* Espaces forcés */
-
-.page {
-	overflow: hidden;
-	position: absolute;
-	top: 0px;
-	background-color: #fff;
-}
-
-.page .shade {
-	position: absolute;
-	top: 0px;
-}
-
-.page.right .shade {
-	left: 0px;
-}
-
-.page.left .shade {
-	right: 0px;
-}
-
-.background, .texts, .l, .g, .s {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-.texts .g {
-	line-height: 1;
-}
-
-.g, .gs, .l {
-	white-space: nowrap;
-}
-
-.texts .gs {
-	display: inline-block;
-}
-
-.o {
-	font-style: oblique;
-}
-
-.doublePage, #pages {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	overflow: hidden;
-}
-
-#pages {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-/* Shadow */
-#shadow {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	/* !!!!!!!!!!! non !!!!!!!!!!!!!!!!!
-	-webkit-transform: translateZ(0);
-	 -moz-transform: translateZ(0);
-	 -ms-transform: translateZ(0);
-	 -o-transform: translateZ(0);
-	 transform: translateZ(0);*/
-}
-
-#shadow > div {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-.portrait #shadow > div.right {
-	display: none;
-}
-
-/* Nav */
-#nav #locales {
-	display: inline-block;
-	width: 22px;
-	height: 17px;
-	border-radius: 3px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	margin: 11px 3px 0;
-}
-
-.localesList li a {
-	padding: 10px 20px !important;
-}
-
-.localesList li a img {
-	vertical-align: middle;
-	margin: -2px 20px 0 0;
-}
-
-/* Fluidbook */
-#fluidbook {
-	position: absolute;
-	z-index: 11;
-	direction: ltr;
-}
-
-#cache {
-	display: none;
-}
-
-#pagesnumbers {
-	font-size: 12px;
-	padding: 0;
-	position: absolute;
-	white-space: nowrap;
-	margin: 5px 0 0 0;
-}
-
-#pagesnumbers div {
-	text-align: center;
-	display: inline-block;
-}
-
-.portrait #pagesnumbers .right {
-	display: none;
-}
-
-/* Interface */
-#interface {
-	position: static;
-}
-
-#next, #previous {
-	background: #f00;
-	width: 40px;
-	height: 100px;
-	position: absolute;
-	top: 310px;
-	display: block;
-	opacity: 1;
-	z-index: 21;
-	background-size: 40px 100px;
-}
-
-#next, #previous, #down, #splash {
-	transition: opacity 1s ease-in-out;
-	-moz-transition: opacity 1s ease-in-out;
-	-webkit-transition: opacity 1s ease-in-out;
-	-o-transition: opacity 1s ease-in-out;
-	-ms-transition: opacity 1s ease-in-out;
-}
-
-#next.hidden.help, #previous.hidden.help {
-	transition: none;
-	-moz-transition: none;
-	-webkit-transition: none;
-	-o-transition: none;
-	-ms-transition: none;
-	opacity: 1;
-
-}
-
-#next.hidden, #previous.hidden {
-	opacity: 0;
-	cursor: default;
-}
-
-.ltr #next {
-	background-image: url("../data/images/interface-next.svg");
-	right: 0px;
-	border-top-left-radius: 7px;
-	border-bottom-left-radius: 7px;
-}
-
-.ltr #previous {
-	background-image: url("../data/images/interface-previous.svg");
-	left: 0px;
-	border-top-right-radius: 7px;
-	border-bottom-right-radius: 7px;
-}
-
-.rtl #previous {
-	background-image: url("../data/images/interface-next.svg");
-	right: 0px;
-	border-top-left-radius: 7px;
-	border-bottom-left-radius: 7px;
-}
-
-.rtl #next {
-	background-image: url("../data/images/interface-previous.svg");
-	left: 0px;
-	border-top-right-radius: 7px;
-	border-bottom-right-radius: 7px;
-}
-
-.rtl.no-svg #next {
-	background-image: url("../data/images/interface-next.png");
-}
-
-.rtl.no-svg #previous {
-	background-image: url("../data/images/interface-previous.png");
-}
-
-.rtl.no-svg #previous {
-	background-image: url("../data/images/interface-next.png");
-}
-
-.rtl.no-svg #next {
-	background-image: url("../data/images/interface-previous.png");
-}
-
-/* Header */
-header {
-	position: relative;
-}
-
-#nav > a {
-	vertical-align: top;
-	display: inline-block;
-}
-
-#nav a {
-	padding: 0 10px 20px 10px;
-}
-
-.ltr #nav a#submitSearch {
-	margin: 0 0 0 5px;
-}
-
-.rtl #nav a#submitSearch {
-	margin: 0 5px 0 0;
-}
-
-#nav > a > img {
-	padding: 10px 2px 0px 2px;
-	vertical-align: top;
-}
-
-#nav {
-	position: relative;
-	white-space: nowrap;
-}
-
-#afterSearch {
-	display: inline-block;
-	position: relative;
-	vertical-align: top;
-	left: 30px;
-}
-
-#afterSearch .c {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 9;
-	display: block;
-}
-
-#afterSearch .links {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 10;
-}
-
-#afterSearch .links .link {
-	position: absolute;
-}
-
-#search {
-	position: relative;
-	display: inline-block;
-	z-index: 2;
-	vertical-align: top;
-}
-
-.ltr #search {
-	margin: 8px 0 0 30px;
-}
-
-.rtl #search {
-	margin: 8px 30px 0 0;
-}
-
-#search img {
-	vertical-align: middle;
-}
-
-#search input {
-	padding: 5px;
-	border-radius: 5px;
-	border: 0;
-	height: 22px;
-	width: 150px;
-
-}
-
-.hint {
-	padding: 2px 5px 5px;
-	height: 22px;
-	width: 137px;
-	margin: 2px;
-	display: block;
-	font-size: 12px;
-}
-
-#searchHints {
-	border-radius: 5px;
-	width: 150px;
-	padding: 5px;
-	display: none;
-	z-index: 25;
-	position: relative;
-}
-
-#logo {
-	position: absolute;
-	top: 0px;
-	background-repeat: no-repeat;
-	z-index: 10;
-}
-
-.ltr #logo {
-	right: 0px;
-}
-
-.rtl #logo {
-	left: 0px;
-}
-
-.portrait #logo {
-	display: none;
-}
-
-/* Credits */
-footer {
-	font-family: Silkscreen, Arial, Helvetica, sans-serif;
-	font-size: 8px;
-	text-transform: uppercase;
-	position: absolute;
-	bottom: 2px;
-	z-index: 20;
-}
-
-footer a {
-	text-decoration: none;
-	margin: 0 4px 4px 0;
-}
-
-.ltr footer {
-	right: 2px;
-}
-
-.rtl footer {
-	left: 2px;
-}
-
-/* Fluidbook zooming */
-
-footer, header, #interface {
-	-moz-transition: opacity 400ms ease-in;
-	-webkit-transition: opacity 400ms ease-in;
-	-o-transition: opacity 400ms ease-in;
-	-ms-transition: opacity 400ms ease-in;
-	transition: opacity 400ms ease-in;
-}
-
-footer.hidden, header.hidden, #interface.hidden {
-	opacity: 0;
-	z-index: 0;
-}
-
-#fluidbook {
-	-moz-transition: -moz-transform 1s ease-out, transform 1s ease-out;
-	-webkit-transition: -webkit-transform 1s ease-out, transform 1s ease-out;
-	-o-transition: -o-transform 1s ease-out, transform 1s ease-out;
-	-ms-transition: -ms-transform 1s ease-out, transform 1s ease-out;
-	transition: transform 1s ease-out;
-}
-
-#fluidbook.animate {
-	-moz-transition: all 1s ease-out;
-	-webkit-transition: all 1s ease-out;
-	-ms-transition: all 1s ease-out;
-	-o-transition: all 1s ease-out;
-	transition: all 1s ease-out;
-}
-
-/* Links */
-#links {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 4;
-	background-color: rgba(0, 0, 0, 0.001);
-}
-
-#links .link {
-	position: absolute;
-	cursor: auto;
-	z-index: 2;
-}
-
-.link.multimedia {
-	position: absolute;
-	z-index: 1 !important;
-}
-
-.link.contentLink {
-	z-index: 0 !important;
-	position: absolute;
-}
-
-.link a {
-	width: 100%;
-	height: 100%;
-	display: block;
-	border-radius: 5px;
-	background-color: rgba(0, 0, 0, 0.01);
-}
-
-.link a.displayArea.animating {
-	-moz-transition: opacity 1s ease-in;
-	-webkit-transition: opacity 1s ease-in;
-	-o-transition: opacity 1s ease-in;
-	-ms-transition: opacity 1s ease-in;
-	transition: opacity 1s ease-in;
-}
-
-#links .nonlinkarea {
-	display: none;
-}
-
-#links .bookmark {
-	z-index: 3;
-}
-
-.pad #links .nonlinkarea {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	display: block;
-}
-
-/* Bookmarks */
-.bookmark.left {
-	background-image: url("../data/images/bookmark-left-off.svg");
-}
-
-.bookmark.right,
-.portrait #fluidbook .bookmark.left {
-	background-image: url("../data/images/bookmark-right-off.svg");
-}
-
-.bookmark.left[data-enabled] {
-	background-image: url("../data/images/bookmark-left-on.svg");
-}
-
-.bookmark.right[data-enabled],
-.portrait #fluidbook .bookmark.left[data-enabled] {
-	background-image: url("../data/images/bookmark-right-on.svg");
-}
-
-.no-svg .bookmark.left {
-	background-image: url("../data/images/bookmark-left-off.png");
-}
-
-.no-svg .bookmark.right,
-.no-svg .portrait #fluidbook .bookmark.left {
-	background-image: url("../data/images/bookmark-right-off.png");
-}
-
-.no-svg .bookmark.left[data-enabled] {
-	background-image: url("../data/images/bookmark-left-on.png");
-}
-
-.no-svg .bookmark.right[data-enabled],
-.no-svg .portrait #fluidbook .bookmark.left[data-enabled] {
-	background-image: url("../data/images/bookmark-right-on.png");
-}
-
-.bookmark.animating {
-	-moz-transition: opacity 1s ease-in;
-	-webkit-transition: opacity 1s ease-in;
-	-o-transition: opacity 1s ease-in;
-	-ms-transition: opacity 1s ease-in;
-	transition: opacity 1s ease-in;
-}
-
-.bookmark {
-	background-repeat: no-repeat;
-	background-size: cover;
-	position: absolute;
-	top: 0px;
-	opacity: 0.01;
-	display: block;
-	cursor: pointer;
-}
-
-.bookmark[data-enabled], .bookmark:hover {
-	opacity: 1 !important;
-	-moz-transition: none;
-	-webkit-transition: none;
-	-o-transition: none;
-	-ms-transition: none;
-	transition: none;
-}
-
-#indexView .bookmark {
-	width: 35px;
-	height: 35px;
-}
-
-.landscape .bookmark.left {
-	left: 0px;
-}
-
-.bookmark.right {
-	right: 0px;
-}
-
-/* View */
-
-.mview {
-	position: absolute;
-	z-index: 22;
-	display: none;
-	overflow-x: hidden;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15);
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-}
-
-.mview.animate {
-	-moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
-	-webkit-transition: -webkit-transform 600ms ease-out;
-	-o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
-	-ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
-	transition: transform 600ms ease-out;
-}
-
-.mview .caption {
-	padding: 9px 12px;
-	height: 44px;
-	position: absolute;
-	z-index: 1;
-}
-
-.mview .caption h2 {
-	font-size: 20px;
-	line-height: 22px;
-	text-align: center;
-	font-weight: 600;
-	margin: 0 auto;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.mview .caption .fonctions {
-	position: absolute;
-	top: 9px;
-	right: 12px;
-}
-
-.mview .caption .fonctions a {
-	float: right;
-	margin: 0 0 0 10px;
-}
-
-.mview .caption a {
-	height: 27px;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 25px;
-	display: block;
-
-	box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
-	-moz-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
-	-webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
-	-ms-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
-	-o-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
-
-	background-repeat: no-repeat;
-	background-position: 10px 4px;
-
-	border-radius: 5px;
-}
-
-.mview .caption a.back {
-	position: absolute;
-	top: 9px;
-	left: 12px;
-
-	background-image: url("../data/images/interface-back-arrow.svg");
-	background-size: auto 17px;
-	padding: 0 13px 0 27px;
-}
-
-.mview .caption a.send {
-	background-image: url("../data/images/share-email.svg");
-}
-
-.mview .caption a.print {
-	background-image: url("../data/images/interface-print.svg");
-}
-
-.mview .caption a {
-	padding: 0 13px 0 33px;
-	background-size: auto 17px;
-}
-
-.portrait .mview .caption a.miniOnPortrait {
-	background-position: 50% 50%;
-	padding: 0 15px;
-}
-
-.mview .content {
-	text-align: center;
-	position: absolute;
-	top: 44px;
-}
-
-#indexView {
-	margin: auto;
-}
-
-#indexView .doubleThumb, #indexView .padding {
-	display: inline-block;
-	margin: 10px 10px 40px 10px;
-	position: relative;
-	width: 200px;
-	cursor: pointer;
-	text-align: center;
-}
-
-#indexView.bookmarkView .doubleThumb {
-	width: 100px;
-
-}
-
-#indexView.bookmarkView .doubleThumb.left {
-	margin-right: 10px;
-}
-
-#indexView.bookmarkView {
-	text-align: left;
-}
-
-#indexView .padding {
-	height: 1px;
-}
-
-#indexView .doubleThumb .overlay {
-	background-color: rgba(0, 0, 0, 0.5);
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 200px;
-	z-index: 4;
-}
-
-#indexView .doubleThumb.simple .overlay {
-	width: 100px;
-}
-
-#indexView .doubleThumb .hits {
-	position: relative;
-	display: inline;
-	top: 30px;
-	z-index: 5;
-	font-size: 12px;
-}
-
-#indexView .doubleThumb .hits.yes {
-	padding: 5px;
-	border-radius: 5px;
-}
-
-#indexView .thumb {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	font-size: 12px;
-}
-
-#indexView .thumb img {
-	background: #fff;
-}
-
-#indexView .thumb .number {
-	text-align: center;
-	display: block;
-	font-family: Arial, Helvetica, sans-serif;
-	margin: 1px 0 0 0;
-	max-width: 100px;
-}
-
-#indexView .thumb.right {
-	left: 100px;
-}
-
-#indexView .doubleThumb.simple {
-	width: 100px;
-}
-
-#indexView .doubleThumb.simple.right {
-	margin-left: 110px;
-}
-
-#indexView .doubleThumb.left {
-	margin-right: 110px;
-}
-
-#indexView .right .thumb.right {
-	left: 0px;
-}
-
-/* Search */
-.highlight0 {
-	background-color: #00ff00;
-}
-
-.highlight1 {
-	background-color: #ffff00;
-}
-
-.highlight2 {
-	background-color: #00ffff;
-}
-
-.highlight3 {
-	background-color: #ff00ff;
-}
-
-.highlight4 {
-	background-color: #ff0000;
-}
-
-/* Share */
-
-ul.chapters.shareList a.level0 img {
-	height: 25px;
-	margin: 2px 10px 0 0;
-	position: relative;
-	top: 3px;
-}
-
-.rtl ul.chapters.shareList a.level0 img {
-	margin: 2px 0 0 10px;
-}
-
-/* Help */
-#helpView {
-	background-color: rgba(0, 0, 0, 0.7);
-	position: absolute;
-	z-index: 20;
-	display: none;
-	color: #ffffff;
-	overflow: hidden;
-}
-
-#helpView .illustration {
-	text-align: center;
-	font-size: 20px;
-}
-
-#helpView .illustration p {
-	position: static;
-}
-
-#helpView #icons {
-	position: absolute;
-	top: 0px;
-}
-
-.portrait #helpView .icon.afterSearch {
-	display: none;
-}
-
-#helpView .icon {
-	position: absolute;
-	top: 0px;
-	display: inline-block;
-	border-left: 1px solid #ffffff;
-	padding-left: 5px;
-	white-space: nowrap;
-}
-
-.rtl #helpView .icon span {
-	position: absolute;
-	right: 1em;
-	display: block;
-	margin-top: -1em;
-}
-
-#helpView .interface hr {
-	width: 30px;
-	height: 0px;
-	border: 0;
-	border-top: 1px solid #ffffff;
-	display: inline-block;
-	margin: 0 10px;
-	vertical-align: middle;
-}
-
-#helpView .down {
-	position: absolute;
-	right: 62px;
-	bottom: 20px;
-}
-
-#helpView .down hr {
-	width: 30px;
-	height: 0px;
-	border: 0;
-	border-top: 1px solid #ffffff;
-	display: inline-block;
-	margin: 0 10px;
-	vertical-align: middle;
-}
-
-.ltr #helpView .interface .next,
-.ltr #helpView .interface .last,
-.rtl #helpView .interface .first,
-.rtl #helpView .interface .previous {
-	text-align: right;
-	right: 40px;
-	top: 340px;
-}
-
-.ltr #helpView .interface .next:after,
-.ltr #helpView .interface .last:after,
-.rtl #helpView .interface .first:after,
-.rtl #helpView .interface .previous:after {
-	content: '------------';
-	width: 100px;
-	border-bottom: 1px solid #fff;
-	margin: 0 10px;
-	position: relative;
-	top: -0.5em;
-	color: transparent;
-}
-
-.rtl #helpView .interface .next,
-.rtl #helpView .interface .last,
-.ltr #helpView .interface .first,
-.ltr #helpView .interface .previous {
-	left: 40px;
-	top: 340px;
-}
-
-.rtl #helpView .interface .next:before,
-.rtl #helpView .interface .last:before,
-.ltr #helpView .interface .first:before,
-.ltr #helpView .interface .previous:before {
-	content: '------------';
-	width: 100px;
-	border-bottom: 1px solid #fff;
-	margin: 0 10px;
-	position: relative;
-	top: -0.5em;
-	color: transparent;
-}
-
-#helpView .interface .first,
-#helpView .interface .last {
-	margin-top: 43px;
-}
-
-#helpView .interface .next,
-#helpView .interface .previous {
-	margin-top: -5px;
-}
-
-#helpView .interface div {
-	position: absolute;
-	direction: ltr;
-}
-
-.portrait #helpView .interface {
-	display: none;
-}
-
-.pad.portrait #helpView .interface {
-	display: block;
-}
-
-.pad #helpView .illustration {
-	display: none;
-}
-
-/* Archives */
-#archivesview {
-	position: relative;
-	overflow: hidden;
-	top: 44px;
-}
-
-#archivesview .links {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-}
-
-#archivesview .links .link {
-	position: absolute;
-
-}
-
-/* Inner view */
-
-#innerView {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 30;
-	display: none;
-}
-
-#innerView > div {
-	position: absolute;
-	border-radius: 10px;
-	padding: 20px;
-	font-size: 0.8rem;
-}
-
-#innerView > div p {
-	margin: 0 0 20px 0;
-}
-
-/* Form elements */
-#innerView form input[type="text"],
-#innerView form input[type="email"] {
-	font-family: Ubuntu;
-	padding: 5px;
-	border-radius: 5px;
-	border: 0;
-	width: 100%;
-	margin: 7px 0;
-}
-
-#innerView .close {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-	width: 34px;
-	height: 34px;
-	display: block;
-	background-image: url("../data/images/interface-close.svg");
-	background-size: 14px 14px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-}
-
-#innerView form input[type="submit"] {
-	background-image: -moz-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* FF3.6+ */
-	background-image: -webkit-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Chrome10+,Safari5.1+ */
-	background-image: -o-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Opera 11.10+ */
-	background-image: -ms-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* IE10+ */
-	background-image: linear-gradient(to bottom, #ffffff 0%, #a2a2a2 100%); /* W3C */
-	border: 0;
-	color: #000;
-	font-weight: bold;
-	position: absolute;
-	right: 20px;
-	bottom: 20px;
-	padding: 4px 10px 6px;
-	border-radius: 5px;
-	display: inline-block;
-	cursor: pointer;
-}
-
-/* Videos */
-.mview .videoContainer {
-
-	padding: 20px;
-	width: 100%;
-	height: 100%;
-}
-
-.mview .videoContainer video,
-.mview .videoContainer object, .webvideo {
-	position: static;
-	width: 100%;
-	height: auto;
-	display: block;
-	background-color: transparent !important;
-	margin: 0 auto;
-}
-
-.videoContainer {
-	position: relative;
-}
-
-/* multimedia */
-
-.mview .multimediaContainer {
-	padding: 20px 20px 20px 20px;
-}
-
-.mview img.multimedia {
-	width: 100%;
-	height: auto;
-	display: block;
-}
-
-/* Chapters */
-ul.chapters > li {
-	clear: both;
-}
-
-ul.chapters a {
-	display: block;
-	text-align: left;
-	padding: 10px 20px;
-}
-
-.rtl ul.chapters a {
-	text-align: right;
-}
-
-ul.chapters a.level-1 {
-	font-size: 200%;
-	font-family: Ubuntu;
-	font-weight: 600;
-	text-align: center;
-}
-
-ul.chapters a.level-1 .right {
-	display: none;
-}
-
-ul.chapters a.level0, ul.chapters a.level1, ul.chapters a.level2, ul.chapters a.level3 {
-	border-top: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-ul.chapters a.level0 {
-	font-size: 150%;
-	font-family: Ubuntu;
-	font-weight: 600;
-}
-
-ul.chapters a.level1 {
-	padding: 10px 20px 10px 50px;
-	font-size: 120%;
-}
-
-ul.chapters a.level2 {
-	padding: 10px 20px 10px 80px;
-	font-size: 100%;
-}
-
-ul.chapters a.level3 {
-	padding: 10px 20px 10px 110px;
-	font-size: 80%;
-}
-
-ul.chapters, ul.chapters ul {
-	list-style: none;
-}
-
-ul.chapters .right {
-	float: right;
-	display: inline-block;
-}
-
-ul.chapters .right .puce.noshadow {
-	border-radius: 0px;
-	-moz-border-radius: 0px;
-	-webkit-border-radius: 0px;
-	-ms-border-radius: 0px;
-	-o-border-radius: 0px;
-
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-	-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
-
-	margin: 0 0 0 15px;
-	float: right;
-}
-
-ul.chapters .right .puce {
-	width: 25px;
-	height: 25px;
-
-	border-radius: 5px;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-ms-border-radius: 5px;
-	-o-border-radius: 5px;
-
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
-	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
-	-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
-	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
-
-	background-image: url("../images/chapters-arrow.png");
-	background-repeat: no-repeat;
-}
-
-ul.chapters a.nodark {
-	background-image: none !important;
-	border-top: 1px solid rgba(255, 255, 255, 0.25);
-}
-
-ul.chapters a.level0 .right .puce {
-	margin: 2px 0 0 0;
-}
-
-ul.chapters a.level2 .right .puce {
-	margin: -2px 0 0 0;
-}
-
-ul.chapters a > nav {
-	display: none;
-}
-
-/* ipad mag */
-.pad #pagesnumbers,
-.pad footer {
-	display: none;
-}
-
-.pad #interface,
-.pad header {
-	opacity: 0;
-	visibility: hidden;
-	z-index: 21;
-}
-
-.pad #interface {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-}
-
-#down {
-	display: none;
-}
-
-.pad #down {
-	display: block;
-	width: 40px;
-	height: 40px;
-	border-radius: 5px;
-	background-image: url("../data/images/interface-down.svg");
-	background-repeat: no-repeat;
-	padding: 8px 8px 8px 8px;
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	background-size: 24px 24px;
-	background-position: 50% 50%;
-	z-index: 22;
-	opacity: 0;
-	background-color: rgba(0, 0, 0, 0.6);
-
-	-moz-transition: all .15s ease-out;
-	-webkit-transition: all .15s ease-out;
-	-o-transition: all .15s ease-out;
-	-ms-transition: all .15s ease-out;
-	transition: all .15s ease-out;
-
-	-moz-transform-origin: 50% 20px;
-	-webkit-transform-origin: 50% 20px;
-	-ms-transform-origin: 50% 20px;
-	-o-transform-origin: 50% 20px;
-	transform-origin: 50% 20px;
-
-	-moz-transform: rotate(0deg);
-	-webkit-transform: rotate(0deg);
-	-ms-transform: rotate(0deg);
-	-o-transform: rotate(0deg);
-	transform: rotate(0deg);
-}
-
-#down.right {
-	-moz-transform: rotate(-90deg);
-	-webkit-transform: rotate(-90deg);
-	-ms-transform: rotate(-90deg);
-	-o-transform: rotate(-90deg);
-	transform: rotate(-90deg);
-}
-
-/*  Transitions */
-
-/* 2D */
-.doublePage._2d.sliding {
-	-moz-transition: none;
-	-webkit-transition: none;
-	-o-transition: none;
-	-ms-transition: none;
-	transition: none;
-}
-
-/* 3D */
-#pages._3dtransition {
-	-moz-perspective: 5000px;
-	-webkit-perspective: 5000px;
-	-o-perspective: 5000px;
-	-ms-perspective: 5000px;
-	perspective: 5000px;
-
-	-moz-perspective-origin: 50% 75%;
-	-webkit-perspective-origin: 50% 75%;
-	-ms-perspective-origin: 50% 75%;
-	-o-perspective-origin: 50% 75%;
-	perspective-origin: 50% 75%;
-
-	overflow: visible !important;
-}
-
-.doublePage._3d {
-	overflow: visible;
-	z-index: 100;
-
-	-moz-transform-style: preserve-3d;
-	-webkit-transform-style: preserve-3d;
-	-o-transform-style: preserve-3d;
-	transform-style: preserve-3d;
-}
-
-._3d .page {
-	-moz-backface-visibility: hidden;
-	-webkit-backface-visibility: hidden;
-	-o-backface-visibility: hidden;
-	-ms-backface-visibility: hidden;
-	backface-visibility: hidden;
-
-	left: 0px !important;
-}
-
-.doublePage._3d .right {
-	-webkit-transform: rotate3d(0, 1, 0, 0deg);
-	-o-transform: rotate3d(0, 1, 0, 0deg);
-	-ms-transform: rotate3d(0, 1, 0, 0deg);
-	transform: rotate3d(0, 1, 0, 0deg);
-	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d .right {
-	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
-	transform: rotateY(0deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d .left {
-	-webkit-transform: rotate3d(0, 1, 0, 180deg);
-	-o-transform: rotate3d(0, 1, 0, 180deg);
-	-ms-transform: rotate3d(0, 1, 0, 180deg);
-	transform: rotate3d(0, 1, 0, 180deg);
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d .left {
-	transform: rotateY(180deg) translate3d(0, 0, 0);
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.nextstart {
-	-webkit-transform: rotate3d(0, 1, 0, 360deg);
-	-o-transform: rotate3d(0, 1, 0, 360deg);
-	-ms-transform: rotate3d(0, 1, 0, 360deg);
-	transform: rotate3d(0, 1, 0, 360deg);
-	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-
-	-moz-transform-origin: 0 0;
-	-webkit-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-	transform-origin: 0 0;
-}
-
-.mozrotation .doublePage._3d.nextstart {
-	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-	transform: rotateY(360deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.nextend {
-
-	-webkit-transform: rotate3d(0, 1, 0, 180deg);
-	-o-transform: rotate3d(0, 1, 0, 180deg);
-	-ms-transform: rotate3d(0, 1, 0, 180deg);
-	transform: rotate3d(0, 1, 0, 180deg);
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d.nextend {
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-	transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.prevstart {
-	-webkit-transform: rotate3d(0, 1, 0, 180deg);
-	-o-transform: rotate3d(0, 1, 0, 180deg);
-	-ms-transform: rotate3d(0, 1, 0, 180deg);
-	transform: rotate3d(0, 1, 0, 180deg);
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-
-	-moz-transform-origin: 0 0;
-	-webkit-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-	transform-origin: 0 0;
-}
-
-.mozrotation .doublePage._3d.prevstart {
-	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-	transform: rotateY(180deg) translate3d(0, 0, 0);
-}
-
-.doublePage._3d.prevend {
-
-	-webkit-transform: rotate3d(0, 1, 0, 360deg);
-	-o-transform: rotate3d(0, 1, 0, 360deg);
-	-ms-transform: rotate3d(0, 1, 0, 360deg);
-	transform: rotate3d(0, 1, 0, 360deg);
-	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-}
-
-.mozrotation .doublePage._3d.prevend {
-	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
-	transform: rotateY(360deg) translate3d(0, 0, 0);
-}
-
-a.button {
-	display: inline-block;
-	padding: 8px 32px 8px 16px;
-	border-radius: 6px;
-	font-weight: 600;
-	margin: 10px 0;
-	background-image: url("../images/arrow-button.png");
-	background-repeat: no-repeat;
-	background-position: 100% 50%;
-}
-
-#fontsLoader {
-	position: absolute;
-	bottom: 0px;
-	right: 0px;
-	width: 0;
-	height: 0px;
-	overflow: hidden;
-}
-
-/*  Splash screen */
-#splash {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	z-index: 30;
-	opacity: 0;
-}
-
-#splash .logo {
-	position: absolute;
-}
-
-#popinOverlay {
-	position: absolute;
-	z-index: 29;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.3);
-	display: none;
-}
-
-#popinOverlay iframe {
-	background-color: #fff;
-	overflow: hidden;
-}
-
-#popinOverlay > * {
-	position: absolute;
-	z-index: 30;
-	top: 0px;
-	left: 0px;
-
-}
-
-/* Tooltip */
-#tooltip {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	padding: 5px 10px;
-	border-radius: 5px;
-	display: none;
-	font-size: 0.8rem;
-	max-width: 180px;
-	z-index: 100;
-	white-space: pre-wrap;
-	line-height: 1.15rem;
-}
-
-@media handled and (orientation: portrait) {
-	#ol {
-		display: none;
-	}
-
-	@-ms-viewport {
-		width: 800px;
-	}
-}
-
-@media handled and (orientation: landscape) {
-	#op {
-		display: none;
-	}
-
-	@-ms-viewport {
-		width: 1280px;
-	}
-}
-
-/* Webfonts*/
-@font-face {
-	font-family: 'Silkscreen';
-	src: url('fonts/slkscr-webfont.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Ubuntu';
-	src: url('fonts/Ubuntu-R-webfont.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Ubuntu';
-	src: url('fonts/Ubuntu-M-webfont.ttf') format('truetype');
-	font-weight: 600;
-	font-style: normal;
-}
diff --git a/style/fluidbook.less b/style/fluidbook.less
new file mode 100644
index 00000000..c11b2806
--- /dev/null
+++ b/style/fluidbook.less
@@ -0,0 +1,1658 @@
+/* Screenshot */
+.screenshot .mview {
+	overflow-y: hidden;
+}
+
+/* Incompatible */
+.no-csstransforms #device {
+	display: none;
+}
+
+.csstransforms #message {
+	display: none;
+}
+
+#message {
+	text-align: center;
+	margin: 30px auto;
+	width: 600px;
+}
+
+#message a {
+	text-decoration: underline;
+}
+
+#message a:after {
+	content: " »";
+}
+
+/* Disable print div*/
+#printpages {
+	display: none;
+}
+
+/* Global settings */
+a, input[type=text], input[type=password], input[type=file], textarea {
+	outline: none;
+	-webkit-appearance: none;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+* {
+	padding: 0;
+	margin: 0;
+
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-ms-touch-action: double-tap-zoom pinch-zoom;
+	-ms-scroll-chaining: chained;
+
+	-webkit-font-smoothing: antialiased;
+}
+
+img {
+	border: 0;
+	box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	-ms-box-sizing: content-box;
+	-o-box-sizing: content-box;
+}
+
+b, strong, h1, h2, h3, h4, h5, h6 {
+	font-weight: 600;
+}
+
+.pan, .pan * {
+	-ms-touch-action: auto;
+}
+
+html {
+	user-select: text;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-o-user-select: text;
+	-ms-user-select: text;
+}
+
+body {
+	-webkit-touch-callout: none !important;
+}
+
+body, input {
+	font-family: Ubuntu, Arial, Helvetica, sans-serif;
+}
+
+body.loading * {
+	cursor: progress !important;
+}
+
+html.screenshot #main {
+	visibility: visible !important;
+	display: block !important;
+}
+
+html.screenshot #coquillette {
+	visibility: hidden !important;
+}
+
+body {
+	overflow-y: hidden;
+	overflow-x: hidden;
+}
+
+#main {
+	position: absolute;
+	display: none;
+	overflow: hidden;
+	visibility: hidden;
+	opacity: 1;
+}
+
+#main.fadeout, #view.fadeout {
+	transition: opacity 500ms ease-out;
+	-moz-transition: opacity 500ms ease-out;
+	-webkit-transition: opacity 500ms ease-out;
+	-ms-transition: opacity 500ms ease-out;
+	-o-transition: opacity 500ms ease-out;
+
+	opacity: 0;
+}
+
+#hiddencontents {
+	display: none;
+}
+
+/* Background */
+#background {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+}
+
+#background .links {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+#background .links .link {
+	position: absolute;
+}
+
+/* Orientation */
+.portrait .shade, .portrait .page.right {
+	display: none;
+}
+
+.portrait .hideOnPortrait {
+	display: none;
+}
+
+/* Desktop devices */
+
+.desktop #links {
+	cursor: url(../images/cur-zoom-in.png), -moz-zoom-in;
+}
+
+.desktop.zoomed #links {
+	cursor: url(../images/cur-zoom-out.png), -moz-zoom-out;
+}
+
+#links .link {
+	cursor: auto;
+}
+
+/* Coquillette */
+#coquillette {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 1000;
+}
+
+/* Pages */
+.background, .texts {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	overflow: visible;
+}
+
+.background {
+	background-repeat: no-repeat;
+}
+
+.background img {
+	width: 100%;
+	height: 100%;
+}
+
+.texts {
+}
+
+.texts img, .texts object {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+/* Espaces forcés */
+
+.page {
+	overflow: hidden;
+	position: absolute;
+	top: 0px;
+	background-color: #fff;
+}
+
+.page .shade {
+	position: absolute;
+	top: 0px;
+}
+
+.page.right .shade {
+	left: 0px;
+}
+
+.page.left .shade {
+	right: 0px;
+}
+
+.background, .texts, .l, .g, .s {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+.texts .g {
+	line-height: 1;
+}
+
+.g, .gs, .l {
+	white-space: nowrap;
+}
+
+.texts .gs {
+	display: inline-block;
+}
+
+.o {
+	font-style: oblique;
+}
+
+.doublePage, #pages {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	overflow: hidden;
+}
+
+#pages {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+/* Shadow */
+#shadow {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	/* !!!!!!!!!!! non !!!!!!!!!!!!!!!!!
+	-webkit-transform: translateZ(0);
+	 -moz-transform: translateZ(0);
+	 -ms-transform: translateZ(0);
+	 -o-transform: translateZ(0);
+	 transform: translateZ(0);*/
+}
+
+#shadow > div {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+.portrait #shadow > div.right {
+	display: none;
+}
+
+/* Nav */
+#nav #locales {
+	display: inline-block;
+	width: 22px;
+	height: 17px;
+	border-radius: 3px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	margin: 11px 3px 0;
+}
+
+.localesList li a {
+	padding: 10px 20px !important;
+}
+
+.localesList li a img {
+	vertical-align: middle;
+	margin: -2px 20px 0 0;
+}
+
+/* Fluidbook */
+#fluidbook {
+	position: absolute;
+	z-index: 11;
+	direction: ltr;
+}
+
+#cache {
+	display: none;
+}
+
+#pagesnumbers {
+	font-size: 12px;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	margin: 5px 0 0 0;
+}
+
+#pagesnumbers div {
+	text-align: center;
+	display: inline-block;
+}
+
+.portrait #pagesnumbers .right {
+	display: none;
+}
+
+/* Interface */
+#interface {
+	position: static;
+}
+
+#next, #previous {
+	background: #f00;
+	width: 40px;
+	height: 100px;
+	position: absolute;
+	top: 310px;
+	display: block;
+	opacity: 1;
+	z-index: 21;
+	background-size: 40px 100px;
+}
+
+#next, #previous, #down, #splash {
+	transition: opacity 1s ease-in-out;
+	-moz-transition: opacity 1s ease-in-out;
+	-webkit-transition: opacity 1s ease-in-out;
+	-o-transition: opacity 1s ease-in-out;
+	-ms-transition: opacity 1s ease-in-out;
+}
+
+#next.hidden.help, #previous.hidden.help {
+	transition: none;
+	-moz-transition: none;
+	-webkit-transition: none;
+	-o-transition: none;
+	-ms-transition: none;
+	opacity: 1;
+
+}
+
+#next.hidden, #previous.hidden {
+	opacity: 0;
+	cursor: default;
+}
+
+.ltr #next {
+	background-image: url("../data/images/interface-next.svg");
+	right: 0px;
+	border-top-left-radius: 7px;
+	border-bottom-left-radius: 7px;
+}
+
+.ltr #previous {
+	background-image: url("../data/images/interface-previous.svg");
+	left: 0px;
+	border-top-right-radius: 7px;
+	border-bottom-right-radius: 7px;
+}
+
+.rtl #previous {
+	background-image: url("../data/images/interface-next.svg");
+	right: 0px;
+	border-top-left-radius: 7px;
+	border-bottom-left-radius: 7px;
+}
+
+.rtl #next {
+	background-image: url("../data/images/interface-previous.svg");
+	left: 0px;
+	border-top-right-radius: 7px;
+	border-bottom-right-radius: 7px;
+}
+
+.rtl.no-svg #next {
+	background-image: url("../data/images/interface-next.png");
+}
+
+.rtl.no-svg #previous {
+	background-image: url("../data/images/interface-previous.png");
+}
+
+.rtl.no-svg #previous {
+	background-image: url("../data/images/interface-next.png");
+}
+
+.rtl.no-svg #next {
+	background-image: url("../data/images/interface-previous.png");
+}
+
+/* Header */
+header {
+	position: relative;
+}
+
+#nav > a {
+	vertical-align: top;
+	display: inline-block;
+}
+
+#nav a {
+	padding: 0 10px 20px 10px;
+}
+
+.ltr #nav a#submitSearch {
+	margin: 0 0 0 5px;
+}
+
+.rtl #nav a#submitSearch {
+	margin: 0 5px 0 0;
+}
+
+#nav > a > img {
+	padding: 10px 2px 0px 2px;
+	vertical-align: top;
+}
+
+#nav {
+	position: relative;
+	white-space: nowrap;
+}
+
+#afterSearch {
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
+	left: 30px;
+}
+
+#afterSearch .c {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 9;
+	display: block;
+}
+
+#afterSearch .links {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 10;
+}
+
+#afterSearch .links .link {
+	position: absolute;
+}
+
+#search {
+	position: relative;
+	display: inline-block;
+	z-index: 2;
+	vertical-align: top;
+}
+
+.ltr #search {
+	margin: 8px 0 0 30px;
+}
+
+.rtl #search {
+	margin: 8px 30px 0 0;
+}
+
+#search img {
+	vertical-align: middle;
+}
+
+#search input {
+	padding: 5px;
+	border-radius: 5px;
+	border: 0;
+	height: 22px;
+	width: 150px;
+
+}
+
+.hint {
+	padding: 2px 5px 5px;
+	height: 22px;
+	width: 137px;
+	margin: 2px;
+	display: block;
+	font-size: 12px;
+}
+
+#searchHints {
+	border-radius: 5px;
+	width: 150px;
+	padding: 5px;
+	display: none;
+	z-index: 25;
+	position: relative;
+}
+
+#logo {
+	position: absolute;
+	top: 0px;
+	background-repeat: no-repeat;
+	z-index: 10;
+}
+
+.ltr #logo {
+	right: 0px;
+}
+
+.rtl #logo {
+	left: 0px;
+}
+
+.portrait #logo {
+	display: none;
+}
+
+/* Credits */
+footer {
+	font-family: Silkscreen, Arial, Helvetica, sans-serif;
+	font-size: 8px;
+	text-transform: uppercase;
+	position: absolute;
+	bottom: 2px;
+	z-index: 20;
+}
+
+footer a {
+	text-decoration: none;
+	margin: 0 4px 4px 0;
+}
+
+.ltr footer {
+	right: 2px;
+}
+
+.rtl footer {
+	left: 2px;
+}
+
+/* Fluidbook zooming */
+
+footer, header, #interface {
+	-moz-transition: opacity 400ms ease-in;
+	-webkit-transition: opacity 400ms ease-in;
+	-o-transition: opacity 400ms ease-in;
+	-ms-transition: opacity 400ms ease-in;
+	transition: opacity 400ms ease-in;
+}
+
+footer.hidden, header.hidden, #interface.hidden {
+	opacity: 0;
+	z-index: 0;
+}
+
+#fluidbook {
+	-moz-transition: -moz-transform 1s ease-out, transform 1s ease-out;
+	-webkit-transition: -webkit-transform 1s ease-out, transform 1s ease-out;
+	-o-transition: -o-transform 1s ease-out, transform 1s ease-out;
+	-ms-transition: -ms-transform 1s ease-out, transform 1s ease-out;
+	transition: transform 1s ease-out;
+}
+
+#fluidbook.animate {
+	-moz-transition: all 1s ease-out;
+	-webkit-transition: all 1s ease-out;
+	-ms-transition: all 1s ease-out;
+	-o-transition: all 1s ease-out;
+	transition: all 1s ease-out;
+}
+
+/* Links */
+#links {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 4;
+	background-color: rgba(0, 0, 0, 0.001);
+}
+
+#links .link {
+	position: absolute;
+	cursor: auto;
+	z-index: 2;
+}
+
+.link.multimedia {
+	position: absolute;
+	z-index: 1 !important;
+}
+
+.link.contentLink {
+	z-index: 0 !important;
+	position: absolute;
+}
+
+.link a {
+	width: 100%;
+	height: 100%;
+	display: block;
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, 0.01);
+}
+
+.link a.displayArea.animating {
+	-moz-transition: opacity 1s ease-in;
+	-webkit-transition: opacity 1s ease-in;
+	-o-transition: opacity 1s ease-in;
+	-ms-transition: opacity 1s ease-in;
+	transition: opacity 1s ease-in;
+}
+
+#links .nonlinkarea {
+	display: none;
+}
+
+#links .bookmark {
+	z-index: 3;
+}
+
+.pad #links .nonlinkarea {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	display: block;
+}
+
+/* Bookmarks */
+.bookmark.left {
+	background-image: url("../data/images/bookmark-left-off.svg");
+}
+
+.bookmark.right,
+.portrait #fluidbook .bookmark.left {
+	background-image: url("../data/images/bookmark-right-off.svg");
+}
+
+.bookmark.left[data-enabled] {
+	background-image: url("../data/images/bookmark-left-on.svg");
+}
+
+.bookmark.right[data-enabled],
+.portrait #fluidbook .bookmark.left[data-enabled] {
+	background-image: url("../data/images/bookmark-right-on.svg");
+}
+
+.no-svg .bookmark.left {
+	background-image: url("../data/images/bookmark-left-off.png");
+}
+
+.no-svg .bookmark.right,
+.no-svg .portrait #fluidbook .bookmark.left {
+	background-image: url("../data/images/bookmark-right-off.png");
+}
+
+.no-svg .bookmark.left[data-enabled] {
+	background-image: url("../data/images/bookmark-left-on.png");
+}
+
+.no-svg .bookmark.right[data-enabled],
+.no-svg .portrait #fluidbook .bookmark.left[data-enabled] {
+	background-image: url("../data/images/bookmark-right-on.png");
+}
+
+.bookmark.animating {
+	-moz-transition: opacity 1s ease-in;
+	-webkit-transition: opacity 1s ease-in;
+	-o-transition: opacity 1s ease-in;
+	-ms-transition: opacity 1s ease-in;
+	transition: opacity 1s ease-in;
+}
+
+.bookmark {
+	background-repeat: no-repeat;
+	background-size: cover;
+	position: absolute;
+	top: 0px;
+	opacity: 0.01;
+	display: block;
+	cursor: pointer;
+}
+
+.bookmark[data-enabled], .bookmark:hover {
+	opacity: 1 !important;
+	-moz-transition: none;
+	-webkit-transition: none;
+	-o-transition: none;
+	-ms-transition: none;
+	transition: none;
+}
+
+#indexView .bookmark {
+	width: 35px;
+	height: 35px;
+}
+
+.landscape .bookmark.left {
+	left: 0px;
+}
+
+.bookmark.right {
+	right: 0px;
+}
+
+/* View */
+
+.mview {
+	position: absolute;
+	z-index: 22;
+	display: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.mview.animate {
+	-moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
+	-webkit-transition: -webkit-transform 600ms ease-out;
+	-o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
+	-ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
+	transition: transform 600ms ease-out;
+}
+
+.mview .caption {
+	padding: 9px 12px;
+	height: 44px;
+	position: absolute;
+	z-index: 1;
+}
+
+.mview .caption h2 {
+	font-size: 20px;
+	line-height: 22px;
+	text-align: center;
+	font-weight: 600;
+	margin: 0 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.mview .caption .fonctions {
+	position: absolute;
+	top: 9px;
+	right: 12px;
+}
+
+.mview .caption .fonctions a {
+	float: right;
+	margin: 0 0 0 10px;
+}
+
+.mview .caption a {
+	height: 27px;
+	font-weight: 600;
+	font-size: 14px;
+	line-height: 25px;
+	display: block;
+
+	box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
+	-moz-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
+	-webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
+	-ms-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
+	-o-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.3);
+
+	background-repeat: no-repeat;
+	background-position: 10px 4px;
+
+	border-radius: 5px;
+}
+
+.mview .caption a.back {
+	position: absolute;
+	top: 9px;
+	left: 12px;
+
+	background-image: url("../data/images/interface-back-arrow.svg");
+	background-size: auto 17px;
+	padding: 0 13px 0 27px;
+}
+
+.mview .caption a.send {
+	background-image: url("../data/images/share-email.svg");
+}
+
+.mview .caption a.print {
+	background-image: url("../data/images/interface-print.svg");
+}
+
+.mview .caption a {
+	padding: 0 13px 0 33px;
+	background-size: auto 17px;
+}
+
+.portrait .mview .caption a.miniOnPortrait {
+	background-position: 50% 50%;
+	padding: 0 15px;
+}
+
+.mview .content {
+	text-align: center;
+	position: absolute;
+	top: 44px;
+}
+
+#indexView {
+	margin: auto;
+}
+
+#indexView .doubleThumb, #indexView .padding {
+	display: inline-block;
+	margin: 10px 10px 40px 10px;
+	position: relative;
+	width: 200px;
+	cursor: pointer;
+	text-align: center;
+}
+
+#indexView.bookmarkView .doubleThumb {
+	width: 100px;
+
+}
+
+#indexView.bookmarkView .doubleThumb.left {
+	margin-right: 10px;
+}
+
+#indexView.bookmarkView {
+	text-align: left;
+}
+
+#indexView .padding {
+	height: 1px;
+}
+
+#indexView .doubleThumb .overlay {
+	background-color: rgba(0, 0, 0, 0.5);
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 200px;
+	z-index: 4;
+}
+
+#indexView .doubleThumb.simple .overlay {
+	width: 100px;
+}
+
+#indexView .doubleThumb .hits {
+	position: relative;
+	display: inline;
+	top: 30px;
+	z-index: 5;
+	font-size: 12px;
+}
+
+#indexView .doubleThumb .hits.yes {
+	padding: 5px;
+	border-radius: 5px;
+}
+
+#indexView .thumb {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	font-size: 12px;
+}
+
+#indexView .thumb img {
+	background: #fff;
+}
+
+#indexView .thumb .number {
+	text-align: center;
+	display: block;
+	font-family: Arial, Helvetica, sans-serif;
+	margin: 1px 0 0 0;
+	max-width: 100px;
+}
+
+#indexView .thumb.right {
+	left: 100px;
+}
+
+#indexView .doubleThumb.simple {
+	width: 100px;
+}
+
+#indexView .doubleThumb.simple.right {
+	margin-left: 110px;
+}
+
+#indexView .doubleThumb.left {
+	margin-right: 110px;
+}
+
+#indexView .right .thumb.right {
+	left: 0px;
+}
+
+/* Search */
+.highlight0 {
+	background-color: #00ff00;
+}
+
+.highlight1 {
+	background-color: #ffff00;
+}
+
+.highlight2 {
+	background-color: #00ffff;
+}
+
+.highlight3 {
+	background-color: #ff00ff;
+}
+
+.highlight4 {
+	background-color: #ff0000;
+}
+
+/* Share */
+
+ul.chapters.shareList a.level0 img {
+	height: 25px;
+	margin: 2px 10px 0 0;
+	position: relative;
+	top: 3px;
+}
+
+.rtl ul.chapters.shareList a.level0 img {
+	margin: 2px 0 0 10px;
+}
+
+/* Help */
+#helpView {
+	background-color: rgba(0, 0, 0, 0.7);
+	position: absolute;
+	z-index: 20;
+	display: none;
+	color: #ffffff;
+	overflow: hidden;
+}
+
+#helpView .illustration {
+	text-align: center;
+	font-size: 20px;
+}
+
+#helpView .illustration p {
+	position: static;
+}
+
+#helpView #icons {
+	position: absolute;
+	top: 0px;
+}
+
+.portrait #helpView .icon.afterSearch {
+	display: none;
+}
+
+#helpView .icon {
+	position: absolute;
+	top: 0px;
+	display: inline-block;
+	border-left: 1px solid #ffffff;
+	padding-left: 5px;
+	white-space: nowrap;
+}
+
+.rtl #helpView .icon span {
+	position: absolute;
+	right: 1em;
+	display: block;
+	margin-top: -1em;
+}
+
+#helpView .interface hr {
+	width: 30px;
+	height: 0px;
+	border: 0;
+	border-top: 1px solid #ffffff;
+	display: inline-block;
+	margin: 0 10px;
+	vertical-align: middle;
+}
+
+#helpView .down {
+	position: absolute;
+	right: 62px;
+	bottom: 20px;
+}
+
+#helpView .down hr {
+	width: 30px;
+	height: 0px;
+	border: 0;
+	border-top: 1px solid #ffffff;
+	display: inline-block;
+	margin: 0 10px;
+	vertical-align: middle;
+}
+
+.ltr #helpView .interface .next,
+.ltr #helpView .interface .last,
+.rtl #helpView .interface .first,
+.rtl #helpView .interface .previous {
+	text-align: right;
+	right: 40px;
+	top: 340px;
+}
+
+.ltr #helpView .interface .next:after,
+.ltr #helpView .interface .last:after,
+.rtl #helpView .interface .first:after,
+.rtl #helpView .interface .previous:after {
+	content: '------------';
+	width: 100px;
+	border-bottom: 1px solid #fff;
+	margin: 0 10px;
+	position: relative;
+	top: -0.5em;
+	color: transparent;
+}
+
+.rtl #helpView .interface .next,
+.rtl #helpView .interface .last,
+.ltr #helpView .interface .first,
+.ltr #helpView .interface .previous {
+	left: 40px;
+	top: 340px;
+}
+
+.rtl #helpView .interface .next:before,
+.rtl #helpView .interface .last:before,
+.ltr #helpView .interface .first:before,
+.ltr #helpView .interface .previous:before {
+	content: '------------';
+	width: 100px;
+	border-bottom: 1px solid #fff;
+	margin: 0 10px;
+	position: relative;
+	top: -0.5em;
+	color: transparent;
+}
+
+#helpView .interface .first,
+#helpView .interface .last {
+	margin-top: 43px;
+}
+
+#helpView .interface .next,
+#helpView .interface .previous {
+	margin-top: -5px;
+}
+
+#helpView .interface div {
+	position: absolute;
+	direction: ltr;
+}
+
+.portrait #helpView .interface {
+	display: none;
+}
+
+.pad.portrait #helpView .interface {
+	display: block;
+}
+
+.pad #helpView .illustration {
+	display: none;
+}
+
+/* Archives */
+#archivesview {
+	position: relative;
+	overflow: hidden;
+	top: 44px;
+}
+
+#archivesview .links {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+
+#archivesview .links .link {
+	position: absolute;
+
+}
+
+/* Inner view */
+
+#innerView {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 30;
+	display: none;
+}
+
+#innerView > div {
+	position: absolute;
+	border-radius: 10px;
+	padding: 20px;
+	font-size: 0.8rem;
+}
+
+#innerView > div p {
+	margin: 0 0 20px 0;
+}
+
+/* Form elements */
+#innerView form input[type="text"],
+#innerView form input[type="email"] {
+	font-family: Ubuntu;
+	padding: 5px;
+	border-radius: 5px;
+	border: 0;
+	width: 100%;
+	margin: 7px 0;
+}
+
+#innerView .close {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	width: 34px;
+	height: 34px;
+	display: block;
+	background-image: url("../data/images/interface-close.svg");
+	background-size: 14px 14px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+}
+
+#innerView form input[type="submit"] {
+	background-image: -moz-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* FF3.6+ */
+	background-image: -webkit-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Chrome10+,Safari5.1+ */
+	background-image: -o-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Opera 11.10+ */
+	background-image: -ms-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* IE10+ */
+	background-image: linear-gradient(to bottom, #ffffff 0%, #a2a2a2 100%); /* W3C */
+	border: 0;
+	color: #000;
+	font-weight: bold;
+	position: absolute;
+	right: 20px;
+	bottom: 20px;
+	padding: 4px 10px 6px;
+	border-radius: 5px;
+	display: inline-block;
+	cursor: pointer;
+}
+
+/* Videos */
+.mview .videoContainer {
+
+	padding: 20px;
+	width: 100%;
+	height: 100%;
+}
+
+.mview .videoContainer video,
+.mview .videoContainer object, .webvideo {
+	position: static;
+	width: 100%;
+	height: auto;
+	display: block;
+	background-color: transparent !important;
+	margin: 0 auto;
+}
+
+.videoContainer {
+	position: relative;
+}
+
+/* multimedia */
+
+.mview .multimediaContainer {
+	padding: 20px 20px 20px 20px;
+}
+
+.mview img.multimedia {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+/* Chapters */
+ul.chapters > li {
+	clear: both;
+}
+
+ul.chapters a {
+	display: block;
+	text-align: left;
+	padding: 10px 20px;
+}
+
+.rtl ul.chapters a {
+	text-align: right;
+}
+
+ul.chapters a.level-1 {
+	font-size: 200%;
+	font-family: Ubuntu;
+	font-weight: 600;
+	text-align: center;
+}
+
+ul.chapters a.level-1 .right {
+	display: none;
+}
+
+ul.chapters a.level0, ul.chapters a.level1, ul.chapters a.level2, ul.chapters a.level3 {
+	border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+ul.chapters a.level0 {
+	font-size: 150%;
+	font-family: Ubuntu;
+	font-weight: 600;
+}
+
+ul.chapters a.level1 {
+	padding: 10px 20px 10px 50px;
+	font-size: 120%;
+}
+
+ul.chapters a.level2 {
+	padding: 10px 20px 10px 80px;
+	font-size: 100%;
+}
+
+ul.chapters a.level3 {
+	padding: 10px 20px 10px 110px;
+	font-size: 80%;
+}
+
+ul.chapters, ul.chapters ul {
+	list-style: none;
+}
+
+ul.chapters .right {
+	float: right;
+	display: inline-block;
+}
+
+ul.chapters .right .puce.noshadow {
+	border-radius: 0px;
+	-moz-border-radius: 0px;
+	-webkit-border-radius: 0px;
+	-ms-border-radius: 0px;
+	-o-border-radius: 0px;
+
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+	-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
+
+	margin: 0 0 0 15px;
+	float: right;
+}
+
+ul.chapters .right .puce {
+	width: 25px;
+	height: 25px;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	-ms-border-radius: 5px;
+	-o-border-radius: 5px;
+
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+	-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+
+	background-image: url("../images/chapters-arrow.png");
+	background-repeat: no-repeat;
+}
+
+ul.chapters a.nodark {
+	background-image: none !important;
+	border-top: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+ul.chapters a.level0 .right .puce {
+	margin: 2px 0 0 0;
+}
+
+ul.chapters a.level2 .right .puce {
+	margin: -2px 0 0 0;
+}
+
+ul.chapters a > nav {
+	display: none;
+}
+
+/* ipad mag */
+.pad #pagesnumbers,
+.pad footer {
+	display: none;
+}
+
+.pad #interface,
+.pad header {
+	opacity: 0;
+	visibility: hidden;
+	z-index: 21;
+}
+
+.pad #interface {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+}
+
+#down {
+	display: none;
+}
+
+.pad #down {
+	display: block;
+	width: 40px;
+	height: 40px;
+	border-radius: 5px;
+	background-image: url("../data/images/interface-down.svg");
+	background-repeat: no-repeat;
+	padding: 8px 8px 8px 8px;
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	background-size: 24px 24px;
+	background-position: 50% 50%;
+	z-index: 22;
+	opacity: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+
+	-moz-transition: all .15s ease-out;
+	-webkit-transition: all .15s ease-out;
+	-o-transition: all .15s ease-out;
+	-ms-transition: all .15s ease-out;
+	transition: all .15s ease-out;
+
+	-moz-transform-origin: 50% 20px;
+	-webkit-transform-origin: 50% 20px;
+	-ms-transform-origin: 50% 20px;
+	-o-transform-origin: 50% 20px;
+	transform-origin: 50% 20px;
+
+	-moz-transform: rotate(0deg);
+	-webkit-transform: rotate(0deg);
+	-ms-transform: rotate(0deg);
+	-o-transform: rotate(0deg);
+	transform: rotate(0deg);
+}
+
+#down.right {
+	-moz-transform: rotate(-90deg);
+	-webkit-transform: rotate(-90deg);
+	-ms-transform: rotate(-90deg);
+	-o-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+}
+
+/*  Transitions */
+
+/* 2D */
+.doublePage._2d.sliding {
+	-moz-transition: none;
+	-webkit-transition: none;
+	-o-transition: none;
+	-ms-transition: none;
+	transition: none;
+}
+
+/* 3D */
+#pages._3dtransition {
+	-moz-perspective: 5000px;
+	-webkit-perspective: 5000px;
+	-o-perspective: 5000px;
+	-ms-perspective: 5000px;
+	perspective: 5000px;
+
+	-moz-perspective-origin: 50% 75%;
+	-webkit-perspective-origin: 50% 75%;
+	-ms-perspective-origin: 50% 75%;
+	-o-perspective-origin: 50% 75%;
+	perspective-origin: 50% 75%;
+
+	overflow: visible !important;
+}
+
+.doublePage._3d {
+	overflow: visible;
+	z-index: 100;
+
+	-moz-transform-style: preserve-3d;
+	-webkit-transform-style: preserve-3d;
+	-o-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+
+._3d .page {
+	-moz-backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	-o-backface-visibility: hidden;
+	-ms-backface-visibility: hidden;
+	backface-visibility: hidden;
+
+	left: 0px !important;
+}
+
+.doublePage._3d .right {
+	-webkit-transform: rotate3d(0, 1, 0, 0deg);
+	-o-transform: rotate3d(0, 1, 0, 0deg);
+	-ms-transform: rotate3d(0, 1, 0, 0deg);
+	transform: rotate3d(0, 1, 0, 0deg);
+	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d .right {
+	-moz-transform: rotateY(0deg) translate3d(0, 0, 0);
+	transform: rotateY(0deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d .left {
+	-webkit-transform: rotate3d(0, 1, 0, 180deg);
+	-o-transform: rotate3d(0, 1, 0, 180deg);
+	-ms-transform: rotate3d(0, 1, 0, 180deg);
+	transform: rotate3d(0, 1, 0, 180deg);
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d .left {
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.nextstart {
+	-webkit-transform: rotate3d(0, 1, 0, 360deg);
+	-o-transform: rotate3d(0, 1, 0, 360deg);
+	-ms-transform: rotate3d(0, 1, 0, 360deg);
+	transform: rotate3d(0, 1, 0, 360deg);
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+
+	-moz-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	transform-origin: 0 0;
+}
+
+.mozrotation .doublePage._3d.nextstart {
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+	transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.nextend {
+
+	-webkit-transform: rotate3d(0, 1, 0, 180deg);
+	-o-transform: rotate3d(0, 1, 0, 180deg);
+	-ms-transform: rotate3d(0, 1, 0, 180deg);
+	transform: rotate3d(0, 1, 0, 180deg);
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d.nextend {
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.prevstart {
+	-webkit-transform: rotate3d(0, 1, 0, 180deg);
+	-o-transform: rotate3d(0, 1, 0, 180deg);
+	-ms-transform: rotate3d(0, 1, 0, 180deg);
+	transform: rotate3d(0, 1, 0, 180deg);
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+
+	-moz-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	transform-origin: 0 0;
+}
+
+.mozrotation .doublePage._3d.prevstart {
+	-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
+	transform: rotateY(180deg) translate3d(0, 0, 0);
+}
+
+.doublePage._3d.prevend {
+
+	-webkit-transform: rotate3d(0, 1, 0, 360deg);
+	-o-transform: rotate3d(0, 1, 0, 360deg);
+	-ms-transform: rotate3d(0, 1, 0, 360deg);
+	transform: rotate3d(0, 1, 0, 360deg);
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
+.mozrotation .doublePage._3d.prevend {
+	-moz-transform: rotateY(360deg) translate3d(0, 0, 0);
+	transform: rotateY(360deg) translate3d(0, 0, 0);
+}
+
+a.button {
+	display: inline-block;
+	padding: 8px 32px 8px 16px;
+	border-radius: 6px;
+	font-weight: 600;
+	margin: 10px 0;
+	background-image: url("../images/arrow-button.png");
+	background-repeat: no-repeat;
+	background-position: 100% 50%;
+}
+
+#fontsLoader {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	width: 0;
+	height: 0px;
+	overflow: hidden;
+}
+
+/*  Splash screen */
+#splash {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 30;
+	opacity: 0;
+}
+
+#splash .logo {
+	position: absolute;
+}
+
+#popinOverlay {
+	position: absolute;
+	z-index: 29;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	display: none;
+}
+
+#popinOverlay iframe {
+	background-color: #fff;
+	overflow: hidden;
+}
+
+#popinOverlay > * {
+	position: absolute;
+	z-index: 30;
+	top: 0px;
+	left: 0px;
+
+}
+
+/* Tooltip */
+#tooltip {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	padding: 5px 10px;
+	border-radius: 5px;
+	display: none;
+	font-size: 0.8rem;
+	max-width: 180px;
+	z-index: 100;
+	white-space: pre-wrap;
+	line-height: 1.15rem;
+}
+
+@media handled and (orientation: portrait) {
+	#ol {
+		display: none;
+	}
+
+	@-ms-viewport {
+		width: 800px;
+	}
+}
+
+@media handled and (orientation: landscape) {
+	#op {
+		display: none;
+	}
+
+	@-ms-viewport {
+		width: 1280px;
+	}
+}
+
+/* Webfonts*/
+@font-face {
+	font-family: 'Silkscreen';
+	src: url('fonts/slkscr-webfont.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Ubuntu';
+	src: url('fonts/Ubuntu-R-webfont.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Ubuntu';
+	src: url('fonts/Ubuntu-M-webfont.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+}
diff --git a/style/widget.css b/style/widget.css
deleted file mode 100644
index 4105d7eb..00000000
--- a/style/widget.css
+++ /dev/null
@@ -1,161 +0,0 @@
-*{margin:0;padding:0}
-
-body{
-	overflow: hidden;
-	cursor:pointer;
-}
-
-#container{
-	overflow:hidden;
-	display:none;
-}
-
-#widget{
-	position:absolute;
-	top:0px; 
-	left:0px;
-}
- 
-.p{
-	display:none;
-	position:absolute;
-	top:0px;
-	left:0px;
-}
-
-.p>img{
-	position:absolute;
-	top:0px;
-	left:0px;
-}
-
-.p .shade img{
-	position: absolute;
-	top:0px;
-}
-
-.p.left .shade img{
-	right:0px;
-}
-
-.p.right .shade img{
-	left:0px;
-}
-
-.shade img{
-	display:block;
-	position:relative;
-	z-index:4;
-}
-
-#currentDoublePage,#nextDoublePage{
-	position:absolute;
-	top:0px;
-	left:0px;
-}
-
-#nextDoublePage{
-	z-index:3;
-}
-
-#widget{
-	perspective: 5000px;
-	-moz-perspective:5000px;
-	-webkit-perspective:5000px;
-	-o-perspective:5000px;
-	-ms-perspective:5000px;
-
-
-	perspective-origin: 50% 75%;
-	-moz-perspective-origin:50% 75%;
-	-webkit-perspective-origin:50% 75%;
-	-ms-perspective-origin:50% 75%;
-	-o-perspective-origin:50% 75%;
-}
-
-#nextDoublePage._3d{
-	overflow: visible;
-	z-index:100;
-
-	transition: all 1s ease-out;
-	-moz-transition: all 1s ease-out;
-	-webkit-transition: all 1s ease-out;
-	-o-transition: all 1s ease-out;
-	-ms-transition: all 1s ease-out;
-
-	transform-style: preserve-3d;
-	-moz-transform-style:preserve-3d;
-	-webkit-transform-style:preserve-3d;
-	-o-transform-style:preserve-3d;
-	-ms-transform-style:preserve-3d;
-}
-
-#nextDoublePage._3d .p{
-	backface-visibility: hidden;
-	-moz-backface-visibility:hidden;
-	-webkit-backface-visibility:hidden;
-	-o-backface-visibility:hidden;
-	-ms-backface-visibility:hidden;	
-
-	left:0px !important;
-}
-
-#nextDoublePage._3d .right{
-	transform:  rotate3d(0,1,0,0deg);
-	-moz-transform:  rotateY(0deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,0deg);
-	-o-transform:  rotate3d(0,1,0,0deg);
-	-ms-transform:  rotate3d(0,1,0,0deg);
-}
-
-#nextDoublePage._3d .left{
-	transform:  rotate3d(0,1,0,180deg);
-	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,180deg);
-	-o-transform:  rotate3d(0,1,0,180deg);
-	-ms-transform:  rotate3d(0,1,0,180deg);
-}
-
-#nextDoublePage._3d.nextstart{
-	transform:  rotate3d(0,1,0,360deg);
-	-moz-transform:  rotateY(360deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,360deg);
-	-o-transform:  rotate3d(0,1,0,360deg);
-	-ms-transform:  rotate3d(0,1,0,360deg);
-
-	transform-origin: 0 0;
-	-moz-transform-origin: 0 0;
-	-webkit-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-}
-
-#nextDoublePage._3d.nextend{
-	transform:  rotate3d(0,1,0,180deg);
-	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,180deg);
-	-o-transform:  rotate3d(0,1,0,180deg);
-	-ms-transform:  rotate3d(0,1,0,180deg);
-}
-
-#nextDoublePage._3d.prevstart{
-	transform:  rotate3d(0,1,0,180deg);
-	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,180deg);
-	-o-transform:  rotate3d(0,1,0,180deg);
-	-ms-transform:  rotate3d(0,1,0,180deg);
-
-	transform-origin: 0 0;
-	-moz-transform-origin: 0 0;
-	-webkit-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-}
-
-#nextDoublePage._3d.prevend{
-	transform:  rotate3d(0,1,0,360deg);
-	-moz-transform:  rotateY(360deg) translate3d(0,0,0);
-	-webkit-transform:  rotate3d(0,1,0,360deg);
-	-o-transform:  rotate3d(0,1,0,360deg);
-	-ms-transform:  rotate3d(0,1,0,360deg);
-}
\ No newline at end of file
diff --git a/style/widget.less b/style/widget.less
new file mode 100644
index 00000000..d4a39ded
--- /dev/null
+++ b/style/widget.less
@@ -0,0 +1,162 @@
+*{margin:0;padding:0}
+
+body{
+	overflow: hidden;
+	cursor:pointer;
+}
+
+#container{
+	overflow:hidden;
+	display:none;
+}
+
+#widget{
+	position:absolute;
+	top:0px; 
+	left:0px;
+
+}
+ 
+.p{
+	display:none;
+	position:absolute;
+	top:0px;
+	left:0px;
+}
+
+.p>img{
+	position:absolute;
+	top:0px;
+	left:0px;
+}
+
+.p .shade img{
+	position: absolute;
+	top:0px;
+}
+
+.p.left .shade img{
+	right:0px;
+}
+
+.p.right .shade img{
+	left:0px;
+}
+
+.shade img{
+	display:block;
+	position:relative;
+	z-index:4;
+}
+
+#currentDoublePage,#nextDoublePage{
+	position:absolute;
+	top:0px;
+	left:0px;
+}
+
+#nextDoublePage{
+	z-index:3;
+}
+
+#widget{
+	perspective: 5000px;
+	-moz-perspective:5000px;
+	-webkit-perspective:5000px;
+	-o-perspective:5000px;
+	-ms-perspective:5000px;
+
+
+	perspective-origin: 50% 75%;
+	-moz-perspective-origin:50% 75%;
+	-webkit-perspective-origin:50% 75%;
+	-ms-perspective-origin:50% 75%;
+	-o-perspective-origin:50% 75%;
+}
+
+#nextDoublePage._3d{
+	overflow: visible;
+	z-index:100;
+
+	transition: all 1s ease-out;
+	-moz-transition: all 1s ease-out;
+	-webkit-transition: all 1s ease-out;
+	-o-transition: all 1s ease-out;
+	-ms-transition: all 1s ease-out;
+
+	transform-style: preserve-3d;
+	-moz-transform-style:preserve-3d;
+	-webkit-transform-style:preserve-3d;
+	-o-transform-style:preserve-3d;
+	-ms-transform-style:preserve-3d;
+}
+
+#nextDoublePage._3d .p{
+	backface-visibility: hidden;
+	-moz-backface-visibility:hidden;
+	-webkit-backface-visibility:hidden;
+	-o-backface-visibility:hidden;
+	-ms-backface-visibility:hidden;	
+
+	left:0px !important;
+}
+
+#nextDoublePage._3d .right{
+	transform:  rotate3d(0,1,0,0deg);
+	-moz-transform:  rotateY(0deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,0deg);
+	-o-transform:  rotate3d(0,1,0,0deg);
+	-ms-transform:  rotate3d(0,1,0,0deg);
+}
+
+#nextDoublePage._3d .left{
+	transform:  rotate3d(0,1,0,180deg);
+	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,180deg);
+	-o-transform:  rotate3d(0,1,0,180deg);
+	-ms-transform:  rotate3d(0,1,0,180deg);
+}
+
+#nextDoublePage._3d.nextstart{
+	transform:  rotate3d(0,1,0,360deg);
+	-moz-transform:  rotateY(360deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,360deg);
+	-o-transform:  rotate3d(0,1,0,360deg);
+	-ms-transform:  rotate3d(0,1,0,360deg);
+
+	transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+}
+
+#nextDoublePage._3d.nextend{
+	transform:  rotate3d(0,1,0,180deg);
+	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,180deg);
+	-o-transform:  rotate3d(0,1,0,180deg);
+	-ms-transform:  rotate3d(0,1,0,180deg);
+}
+
+#nextDoublePage._3d.prevstart{
+	transform:  rotate3d(0,1,0,180deg);
+	-moz-transform:  rotateY(180deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,180deg);
+	-o-transform:  rotate3d(0,1,0,180deg);
+	-ms-transform:  rotate3d(0,1,0,180deg);
+
+	transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+}
+
+#nextDoublePage._3d.prevend{
+	transform:  rotate3d(0,1,0,360deg);
+	-moz-transform:  rotateY(360deg) translate3d(0,0,0);
+	-webkit-transform:  rotate3d(0,1,0,360deg);
+	-o-transform:  rotate3d(0,1,0,360deg);
+	-ms-transform:  rotate3d(0,1,0,360deg);
+}
\ No newline at end of file