@charset "utf-8";

.iipmooviewer { font-family: Verdana, sans-serif; left: 0px; top: 0px; background: rgb(0, 0, 0); overflow: hidden; margin: 0px; padding: 0px; border: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.iipmooviewer:focus, .iipmooviewer:active { outline: 0px; }

.navcontainer { position: absolute; z-index: 2; text-align: center; background: transparent; top: 10px; right: 10px; }

.navcontainer .toolbar { height: 8px; cursor: move; width: 100%; opacity: 0.8; background: -webkit-linear-gradient(top, rgb(169, 171, 166) 0px, rgb(192, 194, 190) 22%, rgb(213, 213, 210) 33%, rgb(226, 225, 221) 44%, rgb(237, 237, 237) 56%, rgb(190, 190, 193) 67%, rgb(195, 195, 194) 78%, rgb(161, 164, 160) 89%, rgb(135, 134, 134) 100%) repeat-x; }

.navcontainer .toolbar:hover { opacity: 1; }

.iipmooviewer:-webkit-full-screen { left: 0px !important; top: 0px !important; width: 100% !important; height: 100% !important; }

.navwin { font-size: 90%; left: 0px; font-weight: bold; text-align: left; border: 0px; top: 10px; z-index: 2; opacity: 0.9; width: 100%; height: auto; }

.navwin img { border: 0px; width: 100%; height: 100%; }

.navwin .zone { background: rgb(136, 136, 136); border: 2px solid yellow; cursor: move; z-index: 3; opacity: 0.4; }

.iipmooviewer .canvas { width: 100%; height: 100%; left: 0px; top: 0px; z-index: 0; cursor: crosshair; position: absolute; background: transparent; transition: transform 0.5s ease-in-out; }

.iipmooviewer .canvas.drag { transition: none; }

.iipmooviewer .canvas img { padding: 0px; border: 0px; position: absolute; cursor: crosshair; display: block; }

.iipmooviewer .canvas img.hidden { display: none; }

.iipmooviewer .canvas.drag img { cursor: move; }

.iipmooviewer .credit { position: absolute; margin: 10px; right: 0px; bottom: 0px; border: 1px outset rgb(51, 51, 51); color: rgb(255, 255, 255); background: rgb(34, 34, 34); font-weight: normal; padding: 5px; font-size: 80%; border-radius: 0.3em; box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; text-shadow: grey 0.5px 0.5px 0px; opacity: 0.6; transition: opacity 0.5s ease-in-out; }

.iipmooviewer .credit:hover { opacity: 0.9; }

.tip { color: rgb(204, 204, 204); background: rgb(34, 34, 34); padding: 3px; font-family: Verdana, sans-serif; font-size: 8pt; line-height: 1.2em; z-index: 2; position: relative; border-radius: 0.5em; box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px; }

.tip h1 { font-size: 120%; font-style: italic; margin-bottom: 1em; }

.tip blockquote { font-style: italic; margin-left: 2em; margin-right: 2em; }

.navcontainer .loadBarContainer { height: 10px; border: 1px solid rgb(255, 255, 255); background: rgb(0, 0, 0); opacity: 0.66; text-align: left; }

.navcontainer .loadBarContainer .loadBar { left: 0px; font-size: 7pt; font-family: sans-serif; font-weight: bold; letter-spacing: 0.25em; color: rgb(0, 0, 0); border: 0px; background: rgb(255, 255, 255); height: 10px; }

.navcontainer .coords { position: absolute; left: 50%; width: auto; background: transparent; }

.navcontainer .coords div { font-size: 6pt; color: rgb(187, 187, 187); position: relative; left: -50%; background: rgb(17, 17, 17); padding: 0px 0.3em 0.2em; width: auto; border-radius: 0.3em; }

.iipmooviewer .scale { position: absolute; left: 10px; bottom: 10px; height: 1.5em; width: auto; padding: 3px; background: rgb(34, 34, 34); opacity: 0.65; cursor: default; color: rgb(187, 187, 187); text-align: center; font-size: 65%; font-weight: normal; text-shadow: grey 0.5px 0.5px 0px; border-radius: 0.2em; }

.iipmooviewer .scale:hover { opacity: 0.9; }

.iipmooviewer .scale .ruler { margin-left: auto; margin-right: auto; border-width: 0px 2px 2px; border-style: none solid solid; border-color: currentcolor rgb(187, 187, 187) rgb(187, 187, 187); border-image: none; background: transparent; width: auto; height: 2px; }

.iipmooviewer .scale .label { width: auto; }

.navcontainer .navbuttons { font-size: 50%; line-height: 0; background: rgb(34, 34, 34); opacity: 0.6; width: auto; padding: 5px; z-index: 0; overflow: hidden; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.navcontainer .navbuttons img { margin-top: 2px; margin-left: 2px; cursor: pointer; position: relative; padding: 1px; }

.iipmooviewer .canvas .annotation { position: absolute; overflow: visible; z-index: 2; border: 1px solid rgb(136, 136, 136); background-color: transparent; visibility: visible; opacity: 1; transition: opacity 0.3s linear; }

.iipmooviewer .canvas .annotation:hover { border-color: rgb(255, 255, 255); }

.iipmooviewer .canvas .annotation.hidden { visibility: hidden; opacity: 0; }

.iipmooviewer .canvas .annotation.edit { border-color: yellow; }

.iipmooviewer .canvas .annotation.handle { cursor: se-resize; background: none 0px 0px repeat scroll white; border: 1px solid black; bottom: 0px; height: 5px; margin: -2px; position: absolute; right: 0px; width: 5px; }

.iipmooviewer .canvas .annotation.form { padding: 2px; width: auto; min-width: 150px; height: auto; margin-top: 2px; border: 1px solid rgb(170, 170, 170); line-height: 100%; background: linear-gradient(rgb(238, 238, 238) 0px, rgb(204, 204, 204) 100%); font-size: 70%; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px; }

.iipmooviewer .canvas .annotation.form tr td:first-of-type { text-shadow: rgb(187, 187, 187) 0px 2px 2px; font-weight: bold; color: rgb(34, 34, 34); }

.iipmooviewer .canvas .annotation.form input { width: 100%; border: 1px solid rgb(136, 136, 136); margin: 0px 0px 0px auto; }

.iipmooviewer .canvas .annotation.form input.button { width: auto; border-radius: 3px; text-shadow: rgb(187, 187, 187) 2px 0px 1px; border: 1px solid rgb(136, 136, 136); font: bold 11px Verdana, sans-serif; padding: 0px 2px; color: rgb(34, 34, 34); background: linear-gradient(rgb(238, 238, 238) 0px, rgb(204, 204, 204) 100%); }

.iipmooviewer .canvas .annotation.form input.button:hover { border: 1px solid rgb(85, 85, 85); }

.iipmooviewer .canvas .annotation.form input:focus, .iipmooviewer .canvas .annotation.form textarea:focus { border: 1px solid red; }

.iipmooviewer .canvas .annotation.form textarea { width: 98%; border: 1px solid rgb(136, 136, 136); }

.iipmooviewer img.logo { position: absolute; margin: 5px; left: 0px; top: 0px; border: 0px; cursor: help; width: 32px; height: 32px; opacity: 0.65; transition: opacity 0.5s ease-in-out; }

.iipmooviewer img.logo:hover { opacity: 1; }

a.logo:link, a.logo:visited { text-decoration: none; border: 0px; }

.iipmooviewer .info { position: absolute; z-index: 10; padding: 2em; left: 0px; top: 0px; width: 100%; height: 100%; font-family: Verdana, sans-serif; font-size: 9pt; color: rgb(204, 204, 204); background: rgb(17, 17, 17); display: table; overflow: hidden; visibility: hidden; }

.iipmooviewer .info div { margin-left: auto; margin-right: auto; display: table-cell; vertical-align: middle; width: 100%; height: auto; }

.iipmooviewer .info div div { text-align: left; position: relative; margin-left: auto; margin-right: auto; width: 75%; height: auto; display: block; }

.iipmooviewer .info div a { color: rgb(170, 170, 255); text-decoration: none; }

.iipmooviewer .info div a:hover { text-decoration: underline; text-shadow: rgb(102, 102, 170) 1px 0px 0px; }

.iipmooviewer .info div a img { position: relative; top: 8px; margin-right: 8px; margin-left: 0px; border: 0px; }

.iipmooviewer .info div h2 { margin-bottom: 2em; text-align: left; letter-spacing: 0.1em; font-size: 150%; font-weight: bold; text-shadow: rgb(68, 68, 68) 1px 1px 0px; }

.iipmooviewer .info div ul { width: 75%; margin: 2em; font-size: 8pt; }

.iipmooviewer .message { background: black; text-align: center; color: white; width: 18em; margin-top: 20px; margin-left: auto; margin-right: auto; position: relative; z-index: 5; padding: 0.5em; opacity: 0.7; border-radius: 0.4em; }

div.blending { width: 100%; color: rgb(187, 187, 187); margin: 0px; opacity: 0.6; padding: 5px 0px 10px; text-align: center; background: rgb(34, 34, 34); font-size: 8pt; border-radius: 5px; box-shadow: none; }

div.blending h2 { text-align: center; font-size: 10pt; margin-top: 0.3em; line-height: 1em; text-shadow: rgb(136, 136, 136) 0.5px 0.5px 1px; }

div.blending select { position: relative; background: transparent; color: rgb(187, 187, 187); border: 1px solid rgb(102, 102, 102); width: 80%; margin-left: auto; margin-right: auto; font-size: 8pt; border-radius: 1px; }

div.blending option { background: rgb(34, 34, 34); color: rgb(187, 187, 187); border: 1px solid rgb(187, 187, 187); width: 100%; cursor: default; }

div.blending:hover { opacity: 1; box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; }

div.blending span { font-size: 6pt; margin-right: 1em; }

div.blending div#area { text-align: left; background: rgb(51, 51, 51); border: 1px solid rgb(68, 68, 68); width: 90%; height: 6px; margin-left: auto; margin-right: auto; }

div.blending div#area div#knob { color: rgb(68, 68, 68); top: -6px; height: 15px; width: 8px; cursor: move; margin: 0px; border: 1px solid rgb(136, 136, 136); background: -webkit-linear-gradient(left, rgb(184, 186, 198) 0px, rgb(219, 220, 226) 30%, rgb(245, 246, 246) 49%, rgb(221, 223, 227) 70%, rgb(184, 186, 198) 100%); }

@media screen and (max-device-width: 480px) {
  .iipmooviewer { text-size-adjust: 80%; }
  .iipmooviewer .info div div { width: 100%; }
  .iipmooviewer .info div div ul { padding: 1em; }
  .iipmooviewer .info div div, .info div div ul li { font-size: 8pt; }
  .iipmooviewer .navcontainer .navbuttons img { width: 24px; height: 24px; }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
  .iipmooviewer { text-size-adjust: 120%; }
  .navcontainer .loadBarContainer .loadBar { text-size-adjust: 95%; }
  .iipmooviewer .info div div { width: 100%; }
  .iipmooviewer .navcontainer .navbuttons img { width: 36px; height: 36px; padding: 2px; }
  div.blending div#area { margin-top: 1em; }
  div.blending div#area div#knob { top: -14px; height: 32px; width: 24px; }
  .iipmooviewer.standalone img.logo { top: 15px; }
  .iipmooviewer.standalone .navcontainer { top: 20px; }
}