diff src/main/webapp/imageServer/resources/css/diva.min.css @ 203:719475ad0923 iiif_diva

more work on new diva.js in imageServer
author casties
date Fri, 05 Jul 2019 16:05:57 +0200
parents a3bf915b62fe
children
line wrap: on
line diff
--- a/src/main/webapp/imageServer/resources/css/diva.min.css	Mon Jul 01 15:05:05 2019 +0200
+++ b/src/main/webapp/imageServer/resources/css/diva.min.css	Fri Jul 05 16:05:57 2019 +0200
@@ -1,1 +1,554 @@
-.hidden{display:none}.grab{cursor:url("../img/openhand.cur"),pointer}.grabbing{cursor:url("../img/closedhand.cur"),move !important}.loading{background:url("../img/loading.gif") no-repeat center}.full-width{width:100% !important;max-width:100% !important}.full-height{height:100% !important;max-height:100% !important}.prevent-selection{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button{cursor:pointer;height:32px;width:32px;background-color:#f1f1f1;background-repeat:no-repeat;background-position:center;border:1px solid #99bbe8}@media screen and (min-device-width:769px){.button:hover{background-color:#fdfdfd}}.diva-title{text-align:center;font-weight:bold;font-size:2em}.diva-tools{margin-top:5px}.diva-tools .diva-tools-left{float:left}.diva-tools .diva-tools-left .diva-slider-label{display:none;padding:8px;float:left}.diva-tools .diva-tools-left .diva-zoom-buttons-label{display:none;padding:8px;float:left}.diva-tools .diva-tools-left .diva-zoom-out-button{display:none;float:left;background-image:url("../img/zoomout.png")}.diva-tools .diva-tools-left .diva-zoom-in-button{display:none;float:left;background-image:url("../img/zoomin.png");margin-left:-1px}.diva-tools .diva-tools-left .diva-grid-out-button{display:none;float:left;background-image:url("../img/zoomout.png")}.diva-tools .diva-tools-left .diva-grid-in-button{display:none;float:left;background-image:url("../img/zoomin.png");margin-left:-1px}.diva-tools .diva-tools-left .diva-buttons-label{display:none;padding:8px;float:left}.diva-tools .diva-tools-left.in-fullscreen{float:left;clear:none}.diva-tools .diva-tools-right{float:right;height:42px}.diva-tools .diva-tools-right .diva-grid-icon{float:right;background-image:url("../img/grid.png")}.diva-tools .diva-tools-right .diva-grid-icon.diva-in-grid{background-image:url("../img/document.png")}.diva-tools .diva-tools-right .diva-download-icon{float:right;background-image:url("../img/download.png")}.diva-link-icon{float:right;background-image:url("../img/link.png")}.diva-tools .diva-tools-right .diva-page-nav{float:left;text-align:right;padding-right:4px;white-space:nowrap;line-height:32px}.diva-tools .diva-tools-right .diva-page-nav .diva-page-label{float:left;padding-top:1px;padding-right:.5em;line-height:32px}.diva-tools .diva-tools-right .diva-page-nav .diva-goto-form{float:right}.diva-tools .diva-tools-right .diva-page-nav .diva-goto-form .diva-input{width:30px;outline:none;margin:0;padding-top:0}.diva-tools.diva-fullscreen-tools{position:fixed;top:0;right:30px;z-index:101;width:230px;height:73px;padding:15px;border:1px solid #ddd;background:#fff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5)}.diva-tools.diva-fullscreen-tools .diva-buttons-label{margin-top:5px;padding:0;clear:both}.diva-tools.diva-fullscreen-tools .diva-page-nav{float:none;line-height:1em}.diva-tools.diva-fullscreen-tools .diva-page-nav .diva-goto-form{margin-top:9px}.diva-tools.diva-fullscreen-tools .diva-page-nav .diva-page-label{float:none;clear:both;line-height:1em}.diva-outer{clear:both;background:#f1f1f1;border:1px solid #99bbe8;position:relative;min-height:100px;min-width:200px;height:700px;overflow:auto}.diva-outer .diva-inner{position:relative;overflow:hidden;margin:0 auto}.diva-outer .diva-inner .diva-page{-webkit-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);background:url("../img/loading.gif") no-repeat center;position:absolute}.diva-outer .diva-inner .diva-document-page{-webkit-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);background:url("../img/loading.gif") no-repeat center;position:absolute;left:0;right:0}.diva-outer .diva-inner .diva-document-page .diva-page-tools{position:absolute;top:-25px;left:0;height:25px;z-index:3}.diva-outer .diva-inner .diva-document-page .diva-page-tools div{display:inline-block;height:25px;width:25px;cursor:pointer}.diva-outer .diva-inner .diva-page-vertical{margin:0 auto;display:inline-block}.diva-outer .diva-inner .diva-page-horizontal{vertical-align:middle;display:inline-block;top:50%;transform:translate(0, -50%);-webkit-transform:translate(0, -50%);-moz-transform:translate(0, -50%);-ms-transform:translate(0, -50%)}.diva-outer .diva-inner .diva-row{position:absolute;width:100%}.diva-outer .diva-inner.diva-grab{cursor:url("../img/openhand.cur"),pointer}.diva-outer .diva-inner.diva-grabbing{cursor:url("../img/closedhand.cur"),move !important}.diva-outer.diva-fullscreen{width:100% !important;max-width:100% !important;height:100% !important;max-height:100% !important;z-index:100;position:fixed !important;top:0;left:0;margin:0;border:0}.diva-fullscreen-icon{background-image:url("../img/fullscreen.png");border-left:0;float:right}.diva-popup{background:#fff;border:1px solid #99bbe8;padding:.6em;z-index:101;position:absolute;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5)}.diva-link-popup{font-size:10pt}.diva-link-popup input{width:15em}.diva-link-popup input:focus{outline:none}.diva-link-popup.in-fullscreen{top:150px;right:30px}.diva-download-popup{font-size:10pt}.diva-download-popup input{width:15em}.diva-download-popup input:focus{outline:none}.diva-download-popup.in-fullscreen{top:150px;right:30px}.diva-hide-scrollbar{overflow:hidden !important}.diva-relative-position{position:relative}.zoom-slider{position:relative;top:.6em;display:none;float:left}@media (max-width:480px){.zoom-slider{width:100px}}.grid-slider{position:relative;top:.6em;display:none;float:left}@media (max-width:480px){.grid-slider{width:100px}}.diva-throbber{display:none;position:absolute;width:50px;height:50px;background:url("../img/loading.gif") no-repeat center;background-color:#fff;border:1px solid #ddd;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);top:50%;left:50%;margin-left:-25px;margin-top:-25px}.diva-error{position:absolute;width:400px;height:200px;background-color:#fff;border:1px solid #ddd;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);top:50%;left:50%;margin-left:-220px;margin-top:-120px;z-index:120;padding:0 1em}.diva-canvas-icon{background:url('../img/plugins/canvas.png') no-repeat;background-position:left center}.diva-canvas-icon:hover{background-position:-25px center}.diva-canvas-icon.new{background-position:-50px center}.diva-canvas-icon.new:hover{background-position:-75px center}#diva-canvas-backdrop{z-index:105;position:fixed;top:0;left:0;bottom:0;right:0;display:none;background:rgba(50,50,50,0.9)}#diva-canvas-tools{color:#333;position:fixed;top:10px;left:10px;width:230px;z-index:108;background:#fff;padding-bottom:10px;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5);box-shadow:2px 2px 4px 0 rgba(0,0,0,0.5)}#diva-canvas-tools .action-buttons{clear:both;margin-bottom:5px;text-align:right}#diva-canvas-tools .action-buttons a{color:#333;text-decoration:none;background:#f1f1f1;padding:5px;border:1px solid #99bbe8}#diva-canvas-tools .action-buttons a:last-child{border-left:0}#diva-canvas-tools .action-buttons a:hover{background:#fdfdfd}#diva-canvas-toolbar{height:16px;padding:10px;padding-bottom:0}#diva-canvas-toolbar div{height:18px;width:18px;background-repeat:no-repeat;cursor:pointer;z-index:109;display:inline-block;margin-right:5px;background-image:url("../img/actions.png")}#diva-canvas-toolbar span{vertical-align:top;float:right}#diva-canvas-toolwindow{position:relative;margin:10px}#diva-canvas-close:hover{background-position:-20px 0}#diva-canvas-minimise{background-position:-40px 0}#diva-canvas-minimise:hover{background-position:-60px 0}#diva-canvas-buttons div{cursor:pointer;background-image:url("../img/plugins/canvas-buttons.png");background-repeat:no-repeat;width:20px;height:20px;padding:5px;display:inline-block}#diva-canvas-buttons div.clicked{background-color:#ddd}#diva-canvas-buttons .contrast{background-position:5px 5px}#diva-canvas-buttons .contrast:hover,#diva-canvas-buttons .contrast.clicked{background-position:5px -25px}#diva-canvas-buttons .brightness{background-position:-25px 5px}#diva-canvas-buttons .brightness:hover,#diva-canvas-buttons .brightness.clicked{background-position:-25px -25px}#diva-canvas-buttons .rotation{background-position:-55px 5px}#diva-canvas-buttons .rotation:hover,#diva-canvas-buttons .rotation.clicked{background-position:-55px -25px}#diva-canvas-buttons .zoom{background-position:-85px 5px}#diva-canvas-buttons .zoom:hover,#diva-canvas-buttons .zoom.clicked{background-position:-85px -25px}#diva-canvas-buttons .red{background-position:-115px 5px}#diva-canvas-buttons .red:hover,#diva-canvas-buttons .red.clicked{background-position:-115px -25px}#diva-canvas-buttons .green{background-position:-145px 5px}#diva-canvas-buttons .green:hover,#diva-canvas-buttons .green.clicked{background-position:-145px -25px}#diva-canvas-buttons .blue{background-position:-175px 5px}#diva-canvas-buttons .blue:hover,#diva-canvas-buttons .blue.clicked{background-position:-175px -25px}#diva-canvas-pane{background:#ddd;padding-bottom:10px}#diva-canvas-pane p{margin-left:10px;padding-top:10px}#diva-canvas-pane p .link{cursor:pointer}#diva-canvas-pane p .link:hover{text-decoration:underline}#diva-canvas-mode{text-transform:capitalize}#diva-canvas-slider{width:188px;margin:0 auto;display:block}#diva-canvas-slider .handle{margin-left:-6px}#diva-canvas-minimap{height:210px;width:210px;cursor:crosshair;margin-bottom:10px;background:#000}#diva-canvas{position:absolute;left:0;right:0;margin:0 auto;z-index:107;cursor:url("../img/openhand.cur"),pointer}#diva-map-viewbox{border:2px solid #99bbe8;position:absolute;top:10px;left:10px;cursor:crosshair;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none}.overflow-hidden{overflow:hidden !important}#diva-canvas-wrapper{z-index:106;position:absolute;top:0;left:0;bottom:0;right:0;overflow:scroll}.canvas-throbber{z-index:110;position:fixed}.diva-download-icon{background:url('../img/plugins/download.png') no-repeat;background-position:left center}.diva-download-icon:hover{background-position:-25px center}.diva-autoscroll-icon{float:right;border-right:none;background-image:url("../img/plugins/play.png")}.diva-autoscroll-prefs{display:none;margin-right:.6em}.diva-autoscroll-prefs-text{float:left}.diva-autoscroll-prefs-input{float:right;margin-left:.6em}.diva-autoscroll-pps{width:5em}
\ No newline at end of file
+.diva-wrapper {
+  min-height: 95vh;
+  width: 100%;
+  flex-grow: 1; }
+  .diva-wrapper.diva-wrapper-flexbox {
+    display: flex;
+    flex-direction: column; }
+  .diva-wrapper > *:not(.diva-outer) {
+    flex-shrink: 0; }
+
+.diva-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.3em;
+  max-width: 50em;
+  margin: 0 auto; }
+
+.diva-button, .diva-input {
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 0;
+  font: inherit;
+  vertical-align: middle; }
+  .diva-button::-moz-focus-inner, .diva-input::-moz-focus-inner {
+    padding: 0; }
+
+.diva-button {
+  display: inline-block;
+  cursor: pointer;
+  height: 34px;
+  width: 34px;
+  line-height: 34px;
+  -webkit-appearance: none;
+  padding: 3px;
+  background-color: #F1F1F1;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: 1px solid #AAA; }
+  .diva-button:hover, .diva-button:focus {
+    background-color: #FDFDFD; }
+  .diva-button.diva-button-text {
+    width: auto;
+    padding: 0 0.5em; }
+
+.diva-input {
+  height: 34px;
+  border: 1px solid #AAA;
+  padding: 0 0.5em; }
+  .diva-input:focus {
+    border-color: #919191; }
+
+.diva-label {
+  margin: 0 1em;
+  line-height: 34px;
+  vertical-align: top;
+  white-space: nowrap;
+  text-overflow: ellipsis; }
+
+.diva-tools-left, .diva-tools-right {
+  margin-bottom: 1em; }
+
+.diva-tools-left {
+  float: left;
+  user-select: none; }
+
+.diva-zoom-in-button, .diva-grid-in-button {
+  margin-left: -1px; }
+
+.diva-tools-right {
+  float: right; }
+  .diva-tools-right .diva-button {
+    margin-left: -1px;
+    user-select: none; }
+
+.diva-page-nav {
+  white-space: nowrap;
+  margin-right: 1em; }
+
+.diva-goto-form {
+  display: inline-block;
+  position: relative; }
+
+.diva-goto-page-input {
+  width: 5em; }
+
+.diva-input-suggestions {
+  display: none;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  background-color: white;
+  border: solid 1px #aaa;
+  border-top: none;
+  z-index: 1; }
+
+.diva-input-suggestion {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: 3px;
+  padding: 2px;
+  padding-left: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer; }
+
+.diva-input-suggestion.active, .diva-input-suggestion:hover {
+  background-color: #dfefff; }
+
+.diva-view-menu {
+  display: inline-block;
+  position: relative; }
+
+.diva-view-options {
+  position: absolute;
+  top: 34px;
+  z-index: 1;
+  display: none;
+  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); }
+
+.diva-view-options .diva-button {
+  margin-top: -1px;
+  display: block; }
+
+.diva-zoom-label, .diva-grid-label, .diva-page-label {
+  display: inline-block; }
+
+.diva-fullscreen-tools {
+  position: fixed;
+  top: 15px;
+  right: 30px;
+  z-index: 101;
+  padding: 15px;
+  border: 1px solid #DDD;
+  background: #FFF;
+  transition: opacity 0.5s;
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
+  /* prevent variable number of digits in labels from resizing .diva-fullscreen-tools */ }
+  .diva-fullscreen-tools .diva-tools-left, .diva-fullscreen-tools .diva-tools-right {
+    margin-bottom: 0; }
+  .diva-fullscreen-tools .diva-tools-right {
+    margin-left: 2em; }
+  .diva-fullscreen-tools .diva-label, .diva-fullscreen-tools .diva-page-label {
+    margin: 0; }
+  .diva-fullscreen-tools .diva-zoom-label, .diva-fullscreen-tools .diva-grid-label, .diva-fullscreen-tools .diva-page-label {
+    width: 8em;
+    display: block; }
+  .diva-fullscreen-tools .diva-page-nav {
+    margin-right: 0; }
+
+.diva-outer {
+  display: flex;
+  clear: both;
+  background: #F1F1F1;
+  border: 1px solid #AAA;
+  position: relative;
+  overflow: hidden;
+  min-height: 100px;
+  min-width: 200px;
+  flex-grow: 1; }
+
+.diva-viewer-canvas {
+  position: absolute;
+  top: 0;
+  left: 0; }
+
+.diva-viewport {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto; }
+
+.diva-inner {
+  cursor: move;
+  /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto; }
+  .diva-inner.diva-grabbing {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing; }
+
+.diva-page {
+  box-shadow: 7px 7px 6px -6px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  background-color: #FDFDFD; }
+
+.diva-page-tools-wrapper {
+  position: absolute;
+  z-index: 3; }
+
+.diva-page-tools {
+  position: relative;
+  top: -27px;
+  height: 20px; }
+  .diva-page-tools div {
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    padding: 3px; }
+    .diva-page-tools div svg:hover .diva-pagetool-icon {
+      fill: #006ebc; }
+
+.diva-page-labels-wrapper {
+  position: absolute;
+  z-index: 3; }
+
+.diva-page-labels {
+  position: relative;
+  top: -20px;
+  height: 20px;
+  font-size: 0.8em; }
+
+.diva-fullscreen {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  z-index: 100;
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  margin: 0;
+  border: 0; }
+
+.diva-popup {
+  background: #FFF;
+  border: 1px solid #AAA;
+  padding: .6em;
+  z-index: 101;
+  position: absolute;
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5); }
+
+.diva-link-popup {
+  font-size: 10pt; }
+  .diva-link-popup input {
+    width: 18em; }
+    .diva-link-popup input:focus {
+      outline: none; }
+  .diva-link-popup.in-fullscreen {
+    top: 150px;
+    right: 30px; }
+
+.diva-hide-scrollbar {
+  overflow: hidden !important; }
+
+.diva-slider {
+  position: relative;
+  top: 0.6em;
+  float: left; }
+  @media (max-width: 480px) {
+    .diva-slider {
+      width: 100px; } }
+
+.diva-throbber {
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
+  width: 40px;
+  height: 40px;
+  margin: auto auto;
+  padding: 20px;
+  background-color: #fff;
+  /*
+   * Spinner positions
+   * 1 2 3
+   * 4 5 6
+   * 7 8 9
+   */ }
+  .diva-throbber .cube {
+    width: 33.33%;
+    height: 33.33%;
+    background-color: #333;
+    float: left;
+    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
+  .diva-throbber .cube1 {
+    animation-delay: 0.2s; }
+  .diva-throbber .cube2 {
+    animation-delay: 0.3s; }
+  .diva-throbber .cube3 {
+    animation-delay: 0.4s; }
+  .diva-throbber .cube4 {
+    animation-delay: 0.1s; }
+  .diva-throbber .cube5 {
+    animation-delay: 0.2s; }
+  .diva-throbber .cube6 {
+    animation-delay: 0.3s; }
+  .diva-throbber .cube7 {
+    animation-delay: 0.0s; }
+  .diva-throbber .cube8 {
+    animation-delay: 0.1s; }
+  .diva-throbber .cube9 {
+    animation-delay: 0.2s; }
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    transform: scale3D(1, 1, 1); }
+  35% {
+    transform: scale3D(0, 0, 1); } }
+
+.diva-error {
+  position: absolute;
+  width: 400px;
+  height: 200px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
+  top: 50%;
+  left: 50%;
+  margin-left: -220px;
+  margin-top: -120px;
+  z-index: 120;
+  padding: 0 1em; }
+
+.diva-error-close {
+  width: 18px;
+  height: 18px;
+  border: none;
+  position: absolute;
+  top: 1em;
+  right: 1em; }
+  .diva-error-close:hover {
+    cursor: hand; }
+
+.diva-modal {
+  position: absolute;
+  width: 32em;
+  max-height: 26em;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 120;
+  word-wrap: break-word; }
+
+.manipulation-fullscreen {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  z-index: 100;
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  margin: 0;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex; }
+
+.manipulation-sidebar {
+  width: 15%;
+  overflow: scroll;
+  text-align: center;
+  padding: 10px; }
+  .manipulation-sidebar .manipulation-sidebar-primary-image,
+  .manipulation-sidebar .manipulation-sidebar-secondary-image {
+    margin: 10px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #fff;
+    color: #fff; }
+
+.manipulation-sidebar-mobile {
+  width: 50%;
+  text-align: center;
+  padding: 10px;
+  display: none; }
+  .manipulation-sidebar-mobile .manipulation-sidebar-primary-image,
+  .manipulation-sidebar-mobile .manipulation-sidebar-secondary-image {
+    margin: 10px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #fff;
+    color: #fff; }
+
+.manipulation-main-area {
+  width: 70%;
+  flex: 1 1 auto;
+  background-color: rgba(255, 255, 255, 0.5);
+  overflow: scroll;
+  text-align: center;
+  cursor: move;
+  /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab; }
+  .manipulation-main-area.grabbing {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing; }
+  .manipulation-main-area canvas {
+    margin: 0 auto; }
+
+.manipulation-main-area-mobile {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  overflow: scroll;
+  text-align: center;
+  cursor: move;
+  /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab; }
+  .manipulation-main-area-mobile.grabbing {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing; }
+  .manipulation-main-area-mobile canvas {
+    margin: 0 auto; }
+
+.manipulation-tools {
+  width: 15%;
+  flex: 1 1 auto;
+  overflow: auto; }
+  .manipulation-tools .manipulation-tools-text {
+    color: #FBF7F6;
+    margin-bottom: 0.7em; }
+
+.manipulation-tools-mobile {
+  width: 50%;
+  flex: 1 1 auto;
+  overflow: auto;
+  display: none; }
+  .manipulation-tools-mobile .manipulation-tools-text {
+    color: #FBF7F6;
+    margin-bottom: 0.7em; }
+
+.burger-menu {
+  position: fixed;
+  top: 0.5em;
+  left: 0.5em;
+  cursor: pointer; }
+  .burger-menu .stripe {
+    width: 2em;
+    height: 0.3em;
+    background-color: #fff5ef;
+    margin: 0.2em 0; }
+
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 4.5px 0; }
+
+input[type=range]:focus {
+  outline: none; }
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+  background: rgba(255, 255, 255, 0.66);
+  border-radius: 25px;
+  border: 0px solid rgba(1, 1, 1, 0); }
+
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -4.5px; }
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgba(253, 133, 243, 0.66); }
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32);
+  background: rgba(255, 255, 255, 0.66);
+  border-radius: 25px;
+  border: 0px solid rgba(1, 1, 1, 0); }
+
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer; }
+
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent; }
+
+input[type=range]::-ms-fill-lower {
+  background: rgba(251, 83, 239, 0.66);
+  border: 0px solid rgba(1, 1, 1, 0);
+  border-radius: 50px;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32); }
+
+input[type=range]::-ms-fill-upper {
+  background: rgba(252, 108, 241, 0.66);
+  border: 0px solid rgba(1, 1, 1, 0);
+  border-radius: 50px;
+  box-shadow: 0.4px 0.4px 2.4px rgba(0, 0, 0, 0.32), 0px 0px 0.4px rgba(13, 13, 13, 0.32); }
+
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 6.2px rgba(0, 0, 49, 0.66), 0px 0px 1px rgba(0, 0, 75, 0.66);
+  border: 0.9px solid rgba(0, 0, 30, 0.42);
+  height: 13px;
+  width: 13px;
+  border-radius: 10px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 4px; }
+
+input[type=range]:focus::-ms-fill-lower {
+  background: rgba(252, 108, 241, 0.66); }
+
+input[type=range]:focus::-ms-fill-upper {
+  background: rgba(253, 133, 243, 0.66); }
+
+#metadata-content {
+  overflow-y: auto;
+  max-height: 20em;
+  padding: 2em; }
+
+#metadata-content dl dt {
+  font-weight: bold; }
+
+#metadata-content dl dd {
+  margin-left: 0;
+  margin-bottom: 1em; }
+
+#metadata-title {
+  margin: 0;
+  text-align: center; }
+
+.close-button {
+  position: absolute;
+  right: 1em;
+  top: 1em; }
+
+.close-button:hover {
+  color: tomato; }
+
+
+/*# sourceMappingURL=diva.css.map*/
\ No newline at end of file