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

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

diff --git a/style/fluidbook.css b/style/fluidbook.css
new file mode 100644
index 00000000..b6390898
--- /dev/null
+++ b/style/fluidbook.css
@@ -0,0 +1,1413 @@
+/* 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 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 0.15s ease-out;
+  -webkit-transition: all 0.15s ease-out;
+  -o-transition: all 0.15s ease-out;
+  -ms-transition: all 0.15s ease-out;
+  transition: all 0.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;
+}