1/* Copyright 2014 Mozilla Foundation
2 *
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16.textLayer {
17  position: absolute;
18  left: 0;
19  top: 0;
20  right: 0;
21  bottom: 0;
22  overflow: hidden;
23  opacity: 0.2;
24  line-height: 1.0;
25}
26
27.textLayer > span {
28  color: transparent;
29  position: absolute;
30  white-space: pre;
31  cursor: text;
32  transform-origin: 0% 0%;
33}
34
35.textLayer .highlight {
36  margin: -1px;
37  padding: 1px;
38  background-color: rgba(180, 0, 170, 1);
39  border-radius: 4px;
40}
41
42.textLayer .highlight.begin {
43  border-radius: 4px 0px 0px 4px;
44}
45
46.textLayer .highlight.end {
47  border-radius: 0px 4px 4px 0px;
48}
49
50.textLayer .highlight.middle {
51  border-radius: 0px;
52}
53
54.textLayer .highlight.selected {
55  background-color: rgba(0, 100, 0, 1);
56}
57
58.textLayer ::selection {
59  background: rgba(0, 0, 255, 1);
60}
61
62.textLayer .endOfContent {
63  display: block;
64  position: absolute;
65  left: 0px;
66  top: 100%;
67  right: 0px;
68  bottom: 0px;
69  z-index: -1;
70  cursor: default;
71  user-select: none;
72}
73
74.textLayer .endOfContent.active {
75  top: 0px;
76}
77
78
79.annotationLayer section {
80  position: absolute;
81}
82
83.annotationLayer .linkAnnotation > a,
84.annotationLayer .buttonWidgetAnnotation.pushButton > a {
85  position: absolute;
86  font-size: 1em;
87  top: 0;
88  left: 0;
89  width: 100%;
90  height: 100%;
91}
92
93.annotationLayer .linkAnnotation > a:hover,
94.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
95  opacity: 0.2;
96  background: rgba(255, 255, 0, 1);
97  box-shadow: 0px 2px 10px rgba(255, 255, 0, 1);
98}
99
100.annotationLayer .textAnnotation img {
101  position: absolute;
102  cursor: pointer;
103}
104
105.annotationLayer .textWidgetAnnotation input,
106.annotationLayer .textWidgetAnnotation textarea,
107.annotationLayer .choiceWidgetAnnotation select,
108.annotationLayer .buttonWidgetAnnotation.checkBox input,
109.annotationLayer .buttonWidgetAnnotation.radioButton input {
110  background-color: rgba(0, 54, 255, 0.13);
111  border: 1px solid transparent;
112  box-sizing: border-box;
113  font-size: 9px;
114  height: 100%;
115  margin: 0;
116  padding: 0 3px;
117  vertical-align: top;
118  width: 100%;
119}
120
121.annotationLayer .choiceWidgetAnnotation select option {
122  padding: 0;
123}
124
125.annotationLayer .buttonWidgetAnnotation.radioButton input {
126  border-radius: 50%;
127}
128
129.annotationLayer .textWidgetAnnotation textarea {
130  font: message-box;
131  font-size: 9px;
132  resize: none;
133}
134
135.annotationLayer .textWidgetAnnotation input[disabled],
136.annotationLayer .textWidgetAnnotation textarea[disabled],
137.annotationLayer .choiceWidgetAnnotation select[disabled],
138.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
139.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
140  background: none;
141  border: 1px solid transparent;
142  cursor: not-allowed;
143}
144
145.annotationLayer .textWidgetAnnotation input:hover,
146.annotationLayer .textWidgetAnnotation textarea:hover,
147.annotationLayer .choiceWidgetAnnotation select:hover,
148.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
149.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
150  border: 1px solid rgba(0, 0, 0, 1);
151}
152
153.annotationLayer .textWidgetAnnotation input:focus,
154.annotationLayer .textWidgetAnnotation textarea:focus,
155.annotationLayer .choiceWidgetAnnotation select:focus {
156  background: none;
157  border: 1px solid transparent;
158}
159
160.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
161.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
162.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
163  background-color: rgba(0, 0, 0, 1);
164  content: '';
165  display: block;
166  position: absolute;
167}
168
169.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
170.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
171  height: 80%;
172  left: 45%;
173  width: 1px;
174}
175
176.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
177  transform: rotate(45deg);
178}
179
180.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
181  transform: rotate(-45deg);
182}
183
184.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
185  border-radius: 50%;
186  height: 50%;
187  left: 30%;
188  top: 20%;
189  width: 50%;
190}
191
192.annotationLayer .textWidgetAnnotation input.comb {
193  font-family: monospace;
194  padding-left: 2px;
195  padding-right: 0;
196}
197
198.annotationLayer .textWidgetAnnotation input.comb:focus {
199  /*
200   * Letter spacing is placed on the right side of each character. Hence, the
201   * letter spacing of the last character may be placed outside the visible
202   * area, causing horizontal scrolling. We avoid this by extending the width
203   * when the element has focus and revert this when it loses focus.
204   */
205  width: 115%;
206}
207
208.annotationLayer .buttonWidgetAnnotation.checkBox input,
209.annotationLayer .buttonWidgetAnnotation.radioButton input {
210  -moz-appearance: none;
211       appearance: none;
212  padding: 0;
213}
214
215.annotationLayer .popupWrapper {
216  position: absolute;
217  width: 20em;
218}
219
220.annotationLayer .popup {
221  position: absolute;
222  z-index: 200;
223  max-width: 20em;
224  background-color: rgba(255, 255, 153, 1);
225  box-shadow: 0px 2px 5px rgba(136, 136, 136, 1);
226  border-radius: 2px;
227  padding: 6px;
228  margin-left: 5px;
229  cursor: pointer;
230  font: message-box;
231  font-size: 9px;
232  word-wrap: break-word;
233}
234
235.annotationLayer .popup > * {
236  font-size: 9px;
237}
238
239.annotationLayer .popup h1 {
240  display: inline-block;
241}
242
243.annotationLayer .popup span {
244  display: inline-block;
245  margin-left: 5px;
246}
247
248.annotationLayer .popup p {
249  border-top: 1px solid rgba(51, 51, 51, 1);
250  margin-top: 2px;
251  padding-top: 2px;
252}
253
254.annotationLayer .highlightAnnotation,
255.annotationLayer .underlineAnnotation,
256.annotationLayer .squigglyAnnotation,
257.annotationLayer .strikeoutAnnotation,
258.annotationLayer .freeTextAnnotation,
259.annotationLayer .lineAnnotation svg line,
260.annotationLayer .squareAnnotation svg rect,
261.annotationLayer .circleAnnotation svg ellipse,
262.annotationLayer .polylineAnnotation svg polyline,
263.annotationLayer .polygonAnnotation svg polygon,
264.annotationLayer .caretAnnotation,
265.annotationLayer .inkAnnotation svg polyline,
266.annotationLayer .stampAnnotation,
267.annotationLayer .fileAttachmentAnnotation {
268  cursor: pointer;
269}
270
271.pdfViewer .canvasWrapper {
272  overflow: hidden;
273}
274
275.pdfViewer .page {
276  direction: ltr;
277  width: 816px;
278  height: 1056px;
279  margin: 1px auto -8px auto;
280  position: relative;
281  overflow: visible;
282  border: 9px solid transparent;
283  background-clip: content-box;
284  border-image: url(images/shadow.png) 9 9 repeat;
285  background-color: rgba(255, 255, 255, 1);
286}
287
288.pdfViewer.removePageBorders .page {
289  margin: 0px auto 10px auto;
290  border: none;
291}
292
293.pdfViewer.singlePageView {
294  display: inline-block;
295}
296
297.pdfViewer.singlePageView .page {
298  margin: 0;
299  border: none;
300}
301
302.pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread {
303  margin-left: 3.5px;
304  margin-right: 3.5px;
305  text-align: center;
306}
307
308.pdfViewer.scrollHorizontal, .spread {
309  white-space: nowrap;
310}
311
312.pdfViewer.removePageBorders,
313.pdfViewer.scrollHorizontal .spread,
314.pdfViewer.scrollWrapped .spread {
315  margin-left: 0;
316  margin-right: 0;
317}
318
319.spread .page,
320.pdfViewer.scrollHorizontal .page,
321.pdfViewer.scrollWrapped .page,
322.pdfViewer.scrollHorizontal .spread,
323.pdfViewer.scrollWrapped .spread {
324  display: inline-block;
325  vertical-align: middle;
326}
327
328.spread .page,
329.pdfViewer.scrollHorizontal .page,
330.pdfViewer.scrollWrapped .page {
331  margin-left: -3.5px;
332  margin-right: -3.5px;
333}
334
335.pdfViewer.removePageBorders .spread .page,
336.pdfViewer.removePageBorders.scrollHorizontal .page,
337.pdfViewer.removePageBorders.scrollWrapped .page {
338  margin-left: 5px;
339  margin-right: 5px;
340}
341
342.pdfViewer .page canvas {
343  margin: 0;
344  display: block;
345}
346
347.pdfViewer .page canvas[hidden] {
348  display: none;
349}
350
351.pdfViewer .page .loadingIcon {
352  position: absolute;
353  display: block;
354  left: 0;
355  top: 0;
356  right: 0;
357  bottom: 0;
358  background: url('images/loading-icon.gif') center no-repeat;
359}
360
361.pdfPresentationMode .pdfViewer {
362  margin-left: 0;
363  margin-right: 0;
364}
365
366.pdfPresentationMode .pdfViewer .page,
367.pdfPresentationMode .pdfViewer .spread {
368  display: block;
369}
370
371.pdfPresentationMode .pdfViewer .page,
372.pdfPresentationMode .pdfViewer.removePageBorders .page {
373  margin-left: auto;
374  margin-right: auto;
375}
376
377.pdfPresentationMode:fullscreen .pdfViewer .page {
378  margin-bottom: 100%;
379  border: 0;
380}
381
382:root {
383  --sidebar-width: 200px;
384  --sidebar-transition-duration: 200ms;
385  --sidebar-transition-timing-function: ease;
386}
387
388* {
389  padding: 0;
390  margin: 0;
391}
392
393html {
394  height: 100%;
395  width: 100%;
396  /* Font size is needed to make the activity bar the correct size. */
397  font-size: 10px;
398}
399
400body {
401  height: 100%;
402  width: 100%;
403  background-color: rgba(64, 64, 64, 1);
404  background-image: url(images/texture.png);
405}
406
407body,
408input,
409button,
410select {
411  font: message-box;
412  outline: none;
413}
414
415.hidden {
416  display: none !important;
417}
418[hidden] {
419  display: none !important;
420}
421
422.pdfViewer.enablePermissions .textLayer > span {
423  user-select: none !important;
424  cursor: not-allowed;
425}
426
427#viewerContainer.pdfPresentationMode:fullscreen {
428  top: 0px;
429  border-top: 2px solid rgba(0, 0, 0, 0);
430  background-color: rgba(0, 0, 0, 1);
431  width: 100%;
432  height: 100%;
433  overflow: hidden;
434  cursor: none;
435  user-select: none;
436}
437
438.pdfPresentationMode:fullscreen a:not(.internalLink) {
439  display: none;
440}
441
442.pdfPresentationMode:fullscreen .textLayer > span {
443  cursor: none;
444}
445
446.pdfPresentationMode.pdfPresentationModeControls > *,
447.pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
448  cursor: default;
449}
450
451#outerContainer {
452  width: 100%;
453  height: 100%;
454  position: relative;
455}
456
457#sidebarContainer {
458  position: absolute;
459  top: 32px;
460  bottom: 0;
461  width: var(--sidebar-width);
462  visibility: hidden;
463  z-index: 100;
464  border-top: 1px solid rgba(51, 51, 51, 1);
465  transition-duration: var(--sidebar-transition-duration);
466  transition-timing-function: var(--sidebar-transition-timing-function);
467}
468html[dir='ltr'] #sidebarContainer {
469  transition-property: left;
470  left: calc(0px - var(--sidebar-width));
471}
472html[dir='rtl'] #sidebarContainer {
473  transition-property: right;
474  right: calc(0px - var(--sidebar-width));
475}
476
477.loadingInProgress #sidebarContainer {
478  top: 36px;
479}
480
481#outerContainer.sidebarResizing #sidebarContainer {
482  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
483  transition-duration: 0s;
484  /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
485  user-select: none;
486}
487
488#outerContainer.sidebarMoving #sidebarContainer,
489#outerContainer.sidebarOpen #sidebarContainer {
490  visibility: visible;
491}
492html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
493  left: 0px;
494}
495html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
496  right: 0px;
497}
498
499#mainContainer {
500  position: absolute;
501  top: 0;
502  right: 0;
503  bottom: 0;
504  left: 0;
505  min-width: 320px;
506}
507
508#sidebarContent {
509  top: 32px;
510  bottom: 0;
511  overflow: auto;
512  position: absolute;
513  width: 100%;
514  background-color: rgba(0, 0, 0, 0.1);
515}
516html[dir='ltr'] #sidebarContent {
517  left: 0;
518  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
519}
520html[dir='rtl'] #sidebarContent {
521  right: 0;
522  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
523}
524
525#viewerContainer {
526  overflow: auto;
527  position: absolute;
528  top: 32px;
529  right: 0;
530  bottom: 0;
531  left: 0;
532  outline: none;
533}
534#viewerContainer:not(.pdfPresentationMode) {
535  transition-duration: var(--sidebar-transition-duration);
536  transition-timing-function: var(--sidebar-transition-timing-function);
537}
538html[dir='ltr'] #viewerContainer {
539  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
540}
541html[dir='rtl'] #viewerContainer {
542  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
543}
544
545#outerContainer.sidebarResizing #viewerContainer {
546  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
547  transition-duration: 0s;
548}
549
550html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
551  transition-property: left;
552  left: var(--sidebar-width);
553}
554html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
555  transition-property: right;
556  right: var(--sidebar-width);
557}
558
559.toolbar {
560  position: relative;
561  left: 0;
562  right: 0;
563  z-index: 9999;
564  cursor: default;
565}
566
567#toolbarContainer {
568  width: 100%;
569}
570
571#toolbarSidebar {
572  width: 100%;
573  height: 32px;
574  background-color: rgba(66, 66, 66, 1); /* fallback */
575  background-image: url(images/texture.png),
576                    linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
577}
578html[dir='ltr'] #toolbarSidebar {
579  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
580              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
581              0 1px 0 rgba(0, 0, 0, 0.15),
582              0 0 1px rgba(0, 0, 0, 0.1);
583}
584html[dir='rtl'] #toolbarSidebar {
585  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
586              inset 0 1px 0 rgba(255, 255, 255, 0.05),
587              0 1px 0 rgba(0, 0, 0, 0.15),
588              0 0 1px rgba(0, 0, 0, 0.1);
589}
590
591#sidebarResizer {
592  position: absolute;
593  top: 0;
594  bottom: 0;
595  width: 6px;
596  z-index: 200;
597  cursor: ew-resize;
598}
599html[dir='ltr'] #sidebarResizer {
600  right: -6px;
601}
602html[dir='rtl'] #sidebarResizer {
603  left: -6px;
604}
605
606#toolbarContainer, .findbar, .secondaryToolbar {
607  position: relative;
608  height: 32px;
609  background-color: rgba(71, 71, 71, 1); /* fallback */
610  background-image: url(images/texture.png),
611                    linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
612}
613html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
614  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
615              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
616              0 1px 0 rgba(0, 0, 0, 0.15),
617              0 1px 1px rgba(0, 0, 0, 0.1);
618}
619html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
620  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
621              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
622              0 1px 0 rgba(0, 0, 0, 0.15),
623              0 1px 1px rgba(0, 0, 0, 0.1);
624}
625
626#toolbarViewer {
627  height: 32px;
628}
629
630#loadingBar {
631  position: relative;
632  width: 100%;
633  height: 4px;
634  background-color: rgba(51, 51, 51, 1);
635  border-bottom: 1px solid rgba(51, 51, 51, 1);
636}
637
638#loadingBar .progress {
639  position: absolute;
640  top: 0;
641  left: 0;
642  width: 0%;
643  height: 100%;
644  background-color: rgba(221, 221, 221, 1);
645  overflow: hidden;
646  transition: width 200ms;
647}
648
649@keyframes progressIndeterminate {
650  0% { left: -142px; }
651  100% { left: 0; }
652}
653
654#loadingBar .progress.indeterminate {
655  background-color: rgba(153, 153, 153, 1);
656  transition: none;
657}
658
659#loadingBar .progress.indeterminate .glimmer {
660  position: absolute;
661  top: 0;
662  left: 0;
663  height: 100%;
664  width: calc(100% + 150px);
665  background: repeating-linear-gradient(135deg,
666                                        rgba(187, 187, 187, 1) 0, rgba(153, 153, 153, 1) 5px,
667                                        rgba(153, 153, 153, 1) 45px, rgba(221, 221, 221, 1) 55px,
668                                        rgba(221, 221, 221, 1) 95px, rgba(187, 187, 187, 1) 100px);
669  animation: progressIndeterminate 950ms linear infinite;
670}
671
672.findbar, .secondaryToolbar {
673  top: 32px;
674  position: absolute;
675  z-index: 10000;
676  height: auto;
677  min-width: 16px;
678  padding: 0px 6px 0px 6px;
679  margin: 4px 2px 4px 2px;
680  color: rgba(217, 217, 217, 1);
681  font-size: 12px;
682  line-height: 14px;
683  text-align: left;
684  cursor: default;
685}
686
687.findbar {
688  min-width: 300px;
689}
690.findbar > div {
691  height: 32px;
692}
693.findbar.wrapContainers > div {
694  clear: both;
695}
696.findbar.wrapContainers > div#findbarMessageContainer {
697  height: auto;
698}
699html[dir='ltr'] .findbar {
700  left: 68px;
701}
702html[dir='rtl'] .findbar {
703  right: 68px;
704}
705
706.findbar label {
707  user-select: none;
708}
709
710#findInput {
711  width: 200px;
712}
713#findInput::placeholder {
714  font-style: italic;
715}
716#findInput[data-status="pending"] {
717  background-image: url(images/loading-small.png);
718  background-repeat: no-repeat;
719  background-position: right;
720}
721html[dir='rtl'] #findInput[data-status="pending"] {
722  background-position: left;
723}
724
725.secondaryToolbar {
726  padding: 6px;
727  height: auto;
728  z-index: 30000;
729}
730html[dir='ltr'] .secondaryToolbar {
731  right: 4px;
732}
733html[dir='rtl'] .secondaryToolbar {
734  left: 4px;
735}
736
737#secondaryToolbarButtonContainer {
738  max-width: 200px;
739  max-height: 400px;
740  overflow-y: auto;
741  margin-bottom: -4px;
742}
743
744#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
745#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
746  display: none !important;
747}
748
749.doorHanger,
750.doorHangerRight {
751  border: 1px solid rgba(0, 0, 0, 0.5);
752  border-radius: 2px;
753  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
754}
755.doorHanger:after, .doorHanger:before,
756.doorHangerRight:after, .doorHangerRight:before {
757  bottom: 100%;
758  border: solid rgba(0, 0, 0, 0);
759  content: " ";
760  height: 0;
761  width: 0;
762  position: absolute;
763  pointer-events: none;
764}
765.doorHanger:after,
766.doorHangerRight:after {
767  border-bottom-color: rgba(82, 82, 82, 0.99);
768  border-width: 8px;
769}
770.doorHanger:before,
771.doorHangerRight:before {
772  border-bottom-color: rgba(0, 0, 0, 0.5);
773  border-width: 9px;
774}
775
776html[dir='ltr'] .doorHanger:after,
777html[dir='rtl'] .doorHangerRight:after {
778  left: 13px;
779  margin-left: -8px;
780}
781
782html[dir='ltr'] .doorHanger:before,
783html[dir='rtl'] .doorHangerRight:before {
784  left: 13px;
785  margin-left: -9px;
786}
787
788html[dir='rtl'] .doorHanger:after,
789html[dir='ltr'] .doorHangerRight:after {
790  right: 13px;
791  margin-right: -8px;
792}
793
794html[dir='rtl'] .doorHanger:before,
795html[dir='ltr'] .doorHangerRight:before {
796  right: 13px;
797  margin-right: -9px;
798}
799
800#findResultsCount {
801  background-color: rgba(217, 217, 217, 1);
802  color: rgba(82, 82, 82, 1);
803  text-align: center;
804  padding: 3px 4px;
805}
806
807#findMsg {
808  font-style: italic;
809  color: rgba(166, 183, 208, 1);
810}
811#findMsg:empty {
812  display: none;
813}
814
815#findInput.notFound {
816  background-color: rgba(255, 102, 102, 1);
817}
818
819#toolbarViewerMiddle {
820  position: absolute;
821  left: 50%;
822  transform: translateX(-50%);
823}
824
825html[dir='ltr'] #toolbarViewerLeft,
826html[dir='rtl'] #toolbarViewerRight {
827  float: left;
828}
829html[dir='ltr'] #toolbarViewerRight,
830html[dir='rtl'] #toolbarViewerLeft {
831  float: right;
832}
833html[dir='ltr'] #toolbarViewerLeft > *,
834html[dir='ltr'] #toolbarViewerMiddle > *,
835html[dir='ltr'] #toolbarViewerRight > *,
836html[dir='ltr'] .findbar * {
837  position: relative;
838  float: left;
839}
840html[dir='rtl'] #toolbarViewerLeft > *,
841html[dir='rtl'] #toolbarViewerMiddle > *,
842html[dir='rtl'] #toolbarViewerRight > *,
843html[dir='rtl'] .findbar * {
844  position: relative;
845  float: right;
846}
847
848html[dir='ltr'] .splitToolbarButton {
849  margin: 3px 2px 4px 0;
850  display: inline-block;
851}
852html[dir='rtl'] .splitToolbarButton {
853  margin: 3px 0 4px 2px;
854  display: inline-block;
855}
856html[dir='ltr'] .splitToolbarButton > .toolbarButton {
857  border-radius: 0;
858  float: left;
859}
860html[dir='rtl'] .splitToolbarButton > .toolbarButton {
861  border-radius: 0;
862  float: right;
863}
864
865.toolbarButton,
866.secondaryToolbarButton,
867.overlayButton {
868  border: 0 none;
869  background: none;
870  width: 32px;
871  height: 25px;
872}
873
874.toolbarButton > span {
875  display: inline-block;
876  width: 0;
877  height: 0;
878  overflow: hidden;
879}
880
881.toolbarButton[disabled],
882.secondaryToolbarButton[disabled],
883.overlayButton[disabled] {
884  opacity: .5;
885}
886
887.splitToolbarButton.toggled .toolbarButton {
888  margin: 0;
889}
890
891.splitToolbarButton:hover > .toolbarButton,
892.splitToolbarButton:focus > .toolbarButton,
893.splitToolbarButton.toggled > .toolbarButton,
894.toolbarButton.textButton {
895  background-color: rgba(0, 0, 0, 0.12);
896  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
897  background-clip: padding-box;
898  border: 1px solid rgba(0, 0, 0, 0.35);
899  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
900  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
901              0 0 1px rgba(255, 255, 255, 0.15) inset,
902              0 1px 0 rgba(255, 255, 255, 0.05);
903}
904.splitToolbarButton > .toolbarButton:hover,
905.splitToolbarButton > .toolbarButton:focus,
906.dropdownToolbarButton:hover,
907.overlayButton:hover,
908.overlayButton:focus,
909.toolbarButton.textButton:hover,
910.toolbarButton.textButton:focus {
911  background-color: rgba(0,0,0,0.2);
912  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
913              0 0 1px rgba(255, 255, 255, 0.15) inset,
914              0 0 1px rgba(0, 0, 0, 0.05);
915  z-index: 199;
916}
917.dropdownToolbarButton:hover {
918  background-color: rgba(0, 0, 0, 0.26);
919}
920.splitToolbarButton > .toolbarButton {
921  position: relative;
922}
923html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
924html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
925  position: relative;
926  margin: 0;
927  margin-right: -1px;
928  border-top-left-radius: 2px;
929  border-bottom-left-radius: 2px;
930  border-right-color: rgba(0, 0, 0, 0);
931}
932html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
933html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
934  position: relative;
935  margin: 0;
936  margin-left: -1px;
937  border-top-right-radius: 2px;
938  border-bottom-right-radius: 2px;
939  border-left-color: rgba(0, 0, 0, 0);
940}
941.splitToolbarButtonSeparator {
942  padding: 8px 0;
943  width: 1px;
944  background-color: rgba(0, 0, 0, 0.5);
945  z-index: 99;
946  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
947  display: inline-block;
948  margin: 5px 0;
949}
950html[dir='ltr'] .splitToolbarButtonSeparator {
951  float: left;
952}
953html[dir='rtl'] .splitToolbarButtonSeparator {
954  float: right;
955}
956.splitToolbarButton:hover > .splitToolbarButtonSeparator,
957.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
958  padding: 12px 0;
959  margin: 1px 0;
960  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
961}
962
963.toolbarButton,
964.dropdownToolbarButton,
965.secondaryToolbarButton,
966.overlayButton {
967  min-width: 16px;
968  padding: 2px 6px 0;
969  border: 1px solid rgba(0, 0, 0, 0);
970  border-radius: 2px;
971  color: rgba(255, 255, 255, 0.8);
972  font-size: 12px;
973  line-height: 14px;
974  user-select: none;
975  /* Opera does not support user-select, use <... unselectable="on"> instead */
976  cursor: default;
977}
978
979html[dir='ltr'] .toolbarButton,
980html[dir='ltr'] .overlayButton,
981html[dir='ltr'] .dropdownToolbarButton {
982  margin: 3px 2px 4px 0;
983}
984html[dir='rtl'] .toolbarButton,
985html[dir='rtl'] .overlayButton,
986html[dir='rtl'] .dropdownToolbarButton {
987  margin: 3px 0 4px 2px;
988}
989
990.toolbarButton:hover,
991.toolbarButton:focus,
992.dropdownToolbarButton,
993.overlayButton,
994.secondaryToolbarButton:hover,
995.secondaryToolbarButton:focus {
996  background-color: rgba(0, 0, 0, 0.12);
997  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
998  background-clip: padding-box;
999  border: 1px solid rgba(0, 0, 0, 0.35);
1000  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
1001  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
1002              0 0 1px rgba(255, 255, 255, 0.15) inset,
1003              0 1px 0 rgba(255, 255, 255, 0.05);
1004}
1005
1006.toolbarButton:hover:active,
1007.overlayButton:hover:active,
1008.dropdownToolbarButton:hover:active,
1009.secondaryToolbarButton:hover:active {
1010  background-color: rgba(0, 0, 0, 0.2);
1011  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1012  border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
1013  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
1014              0 0 1px rgba(0, 0, 0, 0.2) inset,
1015              0 1px 0 rgba(255, 255, 255, 0.05);
1016}
1017
1018.toolbarButton.toggled,
1019.splitToolbarButton.toggled > .toolbarButton.toggled,
1020.secondaryToolbarButton.toggled {
1021  background-color: rgba(0, 0, 0, 0.3);
1022  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1023  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
1024  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
1025              0 0 1px rgba(0, 0, 0, 0.2) inset,
1026              0 1px 0 rgba(255, 255, 255, 0.05);
1027}
1028
1029.toolbarButton.toggled:hover:active,
1030.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
1031.secondaryToolbarButton.toggled:hover:active {
1032  background-color: rgba(0, 0, 0, 0.4);
1033  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
1034  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
1035              0 0 1px rgba(0, 0, 0, 0.3) inset,
1036              0 1px 0 rgba(255, 255, 255, 0.05);
1037}
1038
1039.dropdownToolbarButton {
1040  width: 140px;
1041  padding: 0;
1042  overflow: hidden;
1043}
1044.dropdownToolbarButton::after {
1045  position: absolute;
1046  display: inline-block;
1047  top: 4px;
1048  content: url(images/toolbarButton-menuArrows.png);
1049}
1050html[dir='ltr'] .dropdownToolbarButton::after {
1051  right: 8px;
1052}
1053html[dir='rtl'] .dropdownToolbarButton::after {
1054  left: 8px;
1055}
1056
1057.dropdownToolbarButton > select {
1058  width: 162px;
1059  height: 23px;
1060  font-size: 12px;
1061  color: rgba(242, 242, 242, 1);
1062  margin: 0;
1063  padding: 3px 2px 2px;
1064  border: none;
1065  background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
1066}
1067
1068.dropdownToolbarButton > select > option {
1069  background: rgba(61, 61, 61, 1);
1070}
1071
1072#customScaleOption {
1073  display: none;
1074}
1075
1076#pageWidthOption {
1077  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
1078}
1079
1080html[dir='ltr'] .splitToolbarButton:first-child,
1081html[dir='ltr'] .toolbarButton:first-child,
1082html[dir='rtl'] .splitToolbarButton:last-child,
1083html[dir='rtl'] .toolbarButton:last-child {
1084  margin-left: 4px;
1085}
1086html[dir='ltr'] .splitToolbarButton:last-child,
1087html[dir='ltr'] .toolbarButton:last-child,
1088html[dir='rtl'] .splitToolbarButton:first-child,
1089html[dir='rtl'] .toolbarButton:first-child {
1090  margin-right: 4px;
1091}
1092
1093.toolbarButtonSpacer {
1094  width: 30px;
1095  display: inline-block;
1096  height: 1px;
1097}
1098
1099html[dir='ltr'] #findPrevious {
1100  margin-left: 3px;
1101}
1102html[dir='ltr'] #findNext {
1103  margin-right: 3px;
1104}
1105
1106html[dir='rtl'] #findPrevious {
1107  margin-right: 3px;
1108}
1109html[dir='rtl'] #findNext {
1110  margin-left: 3px;
1111}
1112
1113.toolbarButton::before,
1114.secondaryToolbarButton::before {
1115  /* All matching images have a size of 16x16
1116   * All relevant containers have a size of 32x25 */
1117  position: absolute;
1118  display: inline-block;
1119  top: 4px;
1120  left: 7px;
1121}
1122
1123html[dir="ltr"] .secondaryToolbarButton::before {
1124  left: 4px;
1125}
1126html[dir="rtl"] .secondaryToolbarButton::before {
1127  right: 4px;
1128}
1129
1130.toolbarButton#sidebarToggle::before {
1131  content: url(images/toolbarButton-sidebarToggle.png);
1132}
1133html[dir='rtl'] .toolbarButton#sidebarToggle::before {
1134  transform: scaleX(-1);
1135}
1136
1137.toolbarButton#secondaryToolbarToggle::before {
1138  content: url(images/toolbarButton-secondaryToolbarToggle.png);
1139}
1140html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
1141  transform: scaleX(-1);
1142}
1143
1144.toolbarButton.findPrevious::before {
1145  content: url(images/findbarButton-previous.png);
1146}
1147html[dir='rtl'] .toolbarButton.findPrevious::before {
1148  transform: scaleX(-1);
1149}
1150
1151.toolbarButton.findNext::before {
1152  content: url(images/findbarButton-next.png);
1153}
1154html[dir='rtl'] .toolbarButton.findNext::before {
1155  transform: scaleX(-1);
1156}
1157
1158.toolbarButton.pageUp::before {
1159  content: url(images/toolbarButton-pageUp.png);
1160}
1161html[dir='rtl'] .toolbarButton.pageUp::before {
1162  transform: scaleX(-1);
1163}
1164
1165.toolbarButton.pageDown::before {
1166  content: url(images/toolbarButton-pageDown.png);
1167}
1168html[dir='rtl'] .toolbarButton.pageDown::before {
1169  transform: scaleX(-1);
1170}
1171
1172.toolbarButton.zoomOut::before {
1173  content: url(images/toolbarButton-zoomOut.png);
1174}
1175
1176.toolbarButton.zoomIn::before {
1177  content: url(images/toolbarButton-zoomIn.png);
1178}
1179
1180.toolbarButton.presentationMode::before,
1181.secondaryToolbarButton.presentationMode::before {
1182  content: url(images/toolbarButton-presentationMode.png);
1183}
1184
1185.toolbarButton.print::before,
1186.secondaryToolbarButton.print::before {
1187  content: url(images/toolbarButton-print.png);
1188}
1189
1190.toolbarButton.openFile::before,
1191.secondaryToolbarButton.openFile::before {
1192  content: url(images/toolbarButton-openFile.png);
1193}
1194
1195.toolbarButton.download::before,
1196.secondaryToolbarButton.download::before {
1197  content: url(images/toolbarButton-download.png);
1198}
1199
1200.toolbarButton.bookmark,
1201.secondaryToolbarButton.bookmark {
1202  box-sizing: border-box;
1203  outline: none;
1204  padding-top: 4px;
1205  text-decoration: none;
1206}
1207.secondaryToolbarButton.bookmark {
1208  padding-top: 5px;
1209}
1210
1211.bookmark[href='#'] {
1212  opacity: .5;
1213  pointer-events: none;
1214}
1215
1216.toolbarButton.bookmark::before,
1217.secondaryToolbarButton.bookmark::before {
1218  content: url(images/toolbarButton-bookmark.png);
1219}
1220
1221#viewThumbnail.toolbarButton::before {
1222  content: url(images/toolbarButton-viewThumbnail.png);
1223}
1224
1225#viewOutline.toolbarButton::before {
1226  content: url(images/toolbarButton-viewOutline.png);
1227}
1228html[dir="rtl"] #viewOutline.toolbarButton::before {
1229  transform: scaleX(-1);
1230}
1231
1232#viewAttachments.toolbarButton::before {
1233  content: url(images/toolbarButton-viewAttachments.png);
1234}
1235
1236#viewFind.toolbarButton::before {
1237  content: url(images/toolbarButton-search.png);
1238}
1239
1240.toolbarButton.pdfSidebarNotification::after {
1241  position: absolute;
1242  display: inline-block;
1243  top: 1px;
1244  /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
1245  content: '';
1246  background-color: rgba(112, 219, 85, 1);
1247  height: 9px;
1248  width: 9px;
1249  border-radius: 50%;
1250}
1251html[dir='ltr'] .toolbarButton.pdfSidebarNotification::after {
1252  left: 17px;
1253}
1254html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after {
1255  right: 17px;
1256}
1257
1258.secondaryToolbarButton {
1259  position: relative;
1260  margin: 0 0 4px 0;
1261  padding: 3px 0 1px 0;
1262  height: auto;
1263  min-height: 25px;
1264  width: auto;
1265  min-width: 100%;
1266  white-space: normal;
1267}
1268html[dir="ltr"] .secondaryToolbarButton {
1269  padding-left: 24px;
1270  text-align: left;
1271}
1272html[dir="rtl"] .secondaryToolbarButton {
1273  padding-right: 24px;
1274  text-align: right;
1275}
1276html[dir="ltr"] .secondaryToolbarButton.bookmark {
1277  padding-left: 27px;
1278}
1279html[dir="rtl"] .secondaryToolbarButton.bookmark {
1280  padding-right: 27px;
1281}
1282
1283html[dir="ltr"] .secondaryToolbarButton > span {
1284  padding-right: 4px;
1285}
1286html[dir="rtl"] .secondaryToolbarButton > span {
1287  padding-left: 4px;
1288}
1289
1290.secondaryToolbarButton.firstPage::before {
1291  content: url(images/secondaryToolbarButton-firstPage.png);
1292}
1293
1294.secondaryToolbarButton.lastPage::before {
1295  content: url(images/secondaryToolbarButton-lastPage.png);
1296}
1297
1298.secondaryToolbarButton.rotateCcw::before {
1299  content: url(images/secondaryToolbarButton-rotateCcw.png);
1300}
1301
1302.secondaryToolbarButton.rotateCw::before {
1303  content: url(images/secondaryToolbarButton-rotateCw.png);
1304}
1305
1306.secondaryToolbarButton.selectTool::before {
1307  content: url(images/secondaryToolbarButton-selectTool.png);
1308}
1309
1310.secondaryToolbarButton.handTool::before {
1311  content: url(images/secondaryToolbarButton-handTool.png);
1312}
1313
1314.secondaryToolbarButton.scrollVertical::before {
1315  content: url(images/secondaryToolbarButton-scrollVertical.png);
1316}
1317
1318.secondaryToolbarButton.scrollHorizontal::before {
1319  content: url(images/secondaryToolbarButton-scrollHorizontal.png);
1320}
1321
1322.secondaryToolbarButton.scrollWrapped::before {
1323  content: url(images/secondaryToolbarButton-scrollWrapped.png);
1324}
1325
1326.secondaryToolbarButton.spreadNone::before {
1327  content: url(images/secondaryToolbarButton-spreadNone.png);
1328}
1329
1330.secondaryToolbarButton.spreadOdd::before {
1331  content: url(images/secondaryToolbarButton-spreadOdd.png);
1332}
1333
1334.secondaryToolbarButton.spreadEven::before {
1335  content: url(images/secondaryToolbarButton-spreadEven.png);
1336}
1337
1338.secondaryToolbarButton.documentProperties::before {
1339  content: url(images/secondaryToolbarButton-documentProperties.png);
1340}
1341
1342.verticalToolbarSeparator {
1343  display: block;
1344  padding: 8px 0;
1345  margin: 8px 4px;
1346  width: 1px;
1347  background-color: rgba(0, 0, 0, 0.5);
1348  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
1349}
1350html[dir='ltr'] .verticalToolbarSeparator {
1351  margin-left: 2px;
1352}
1353html[dir='rtl'] .verticalToolbarSeparator {
1354  margin-right: 2px;
1355}
1356
1357.horizontalToolbarSeparator {
1358  display: block;
1359  margin: 0 0 4px 0;
1360  height: 1px;
1361  width: 100%;
1362  background-color: rgba(0, 0, 0, 0.5);
1363  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
1364}
1365
1366.toolbarField {
1367  padding: 3px 6px;
1368  margin: 4px 0 4px 0;
1369  border-radius: 2px;
1370  background-color: rgba(255, 255, 255, 0.09);
1371  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1372  background-clip: padding-box;
1373  border-width: 1px;
1374  border-style: solid;
1375  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
1376  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
1377              0 1px 0 rgba(255, 255, 255, 0.05);
1378  color: rgba(242, 242, 242, 1);
1379  font-size: 12px;
1380  line-height: 14px;
1381  outline-style: none;
1382}
1383
1384.toolbarField[type=checkbox] {
1385  display: inline-block;
1386  margin: 8px 0px;
1387}
1388
1389.toolbarField.pageNumber {
1390  -moz-appearance: textfield; /* hides the spinner in moz */
1391  min-width: 16px;
1392  text-align: right;
1393  width: 40px;
1394}
1395
1396.toolbarField.pageNumber.visiblePageIsLoading {
1397  background-image: url(images/loading-small.png);
1398  background-repeat: no-repeat;
1399  background-position: 1px;
1400}
1401
1402.toolbarField:hover {
1403  background-color: rgba(255, 255, 255, 0.11);
1404  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
1405}
1406
1407.toolbarField:focus {
1408  background-color: rgba(255, 255, 255, 0.15);
1409  border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
1410}
1411
1412.toolbarLabel {
1413  min-width: 16px;
1414  padding: 3px 6px 3px 2px;
1415  margin: 4px 2px 4px 0;
1416  border: 1px solid rgba(0, 0, 0, 0);
1417  border-radius: 2px;
1418  color: rgba(217, 217, 217, 1);
1419  font-size: 12px;
1420  line-height: 14px;
1421  text-align: left;
1422  user-select: none;
1423  cursor: default;
1424}
1425
1426#thumbnailView {
1427  position: absolute;
1428  width: calc(100% - 60px);
1429  top: 0;
1430  bottom: 0;
1431  padding: 10px 30px 0;
1432  overflow: auto;
1433}
1434
1435#thumbnailView > a:active,
1436#thumbnailView > a:focus {
1437  outline: 0;
1438}
1439
1440.thumbnail {
1441  margin: 0 10px 5px 10px;
1442}
1443html[dir='ltr'] .thumbnail {
1444  float: left;
1445}
1446html[dir='rtl'] .thumbnail {
1447  float: right;
1448}
1449
1450#thumbnailView > a:last-of-type > .thumbnail {
1451  margin-bottom: 10px;
1452}
1453
1454#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
1455  margin-bottom: 9px;
1456}
1457
1458.thumbnail:not([data-loaded]) {
1459  border: 1px dashed rgba(255, 255, 255, 0.5);
1460  margin: -1px 9px 4px 9px;
1461}
1462
1463.thumbnailImage {
1464  border: 1px solid rgba(0, 0, 0, 0);
1465  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
1466  opacity: 0.8;
1467  z-index: 99;
1468  background-color: rgba(255, 255, 255, 1);
1469  background-clip: content-box;
1470}
1471
1472.thumbnailSelectionRing {
1473  border-radius: 2px;
1474  padding: 7px;
1475}
1476
1477a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
1478.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
1479  opacity: .9;
1480}
1481
1482a:focus > .thumbnail > .thumbnailSelectionRing,
1483.thumbnail:hover > .thumbnailSelectionRing {
1484  background-color: rgba(255, 255, 255, 0.15);
1485  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1486  background-clip: padding-box;
1487  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
1488              0 0 1px rgba(255, 255, 255, 0.2) inset,
1489              0 0 1px rgba(0, 0, 0, 0.2);
1490  color: rgba(255, 255, 255, 0.9);
1491}
1492
1493.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
1494  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
1495  opacity: 1;
1496}
1497
1498.thumbnail.selected > .thumbnailSelectionRing {
1499  background-color: rgba(255, 255, 255, 0.3);
1500  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1501  background-clip: padding-box;
1502  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
1503              0 0 1px rgba(255, 255, 255, 0.1) inset,
1504              0 0 1px rgba(0, 0, 0, 0.2);
1505  color: rgba(255, 255, 255,1);
1506}
1507
1508#outlineView,
1509#attachmentsView {
1510  position: absolute;
1511  width: calc(100% - 8px);
1512  top: 0;
1513  bottom: 0;
1514  overflow: auto;
1515  user-select: none;
1516}
1517
1518#outlineView {
1519  padding: 4px 4px 0;
1520}
1521#attachmentsView {
1522  padding: 3px 4px 0;
1523}
1524
1525html[dir='ltr'] .outlineWithDeepNesting > .outlineItem,
1526html[dir='ltr'] .outlineItem > .outlineItems {
1527  margin-left: 20px;
1528}
1529
1530html[dir='rtl'] .outlineWithDeepNesting > .outlineItem,
1531html[dir='rtl'] .outlineItem > .outlineItems {
1532  margin-right: 20px;
1533}
1534
1535.outlineItem > a,
1536.attachmentsItem > button {
1537  text-decoration: none;
1538  display: inline-block;
1539  min-width: 95%;
1540  min-width: calc(100% - 4px); /* Subtract the right padding (left, in RTL mode)
1541                                  of the container. */
1542  height: auto;
1543  margin-bottom: 1px;
1544  border-radius: 2px;
1545  color: rgba(255, 255, 255, 0.8);
1546  font-size: 13px;
1547  line-height: 15px;
1548  user-select: none;
1549  white-space: normal;
1550}
1551
1552.attachmentsItem > button {
1553  border: 0 none;
1554  background: none;
1555  cursor: pointer;
1556  width: 100%;
1557}
1558
1559html[dir='ltr'] .outlineItem > a {
1560  padding: 2px 0 5px 4px;
1561}
1562html[dir='ltr'] .attachmentsItem > button {
1563  padding: 2px 0 3px 7px;
1564  text-align: left;
1565}
1566
1567html[dir='rtl'] .outlineItem > a {
1568  padding: 2px 4px 5px 0;
1569}
1570html[dir='rtl'] .attachmentsItem > button {
1571  padding: 2px 7px 3px 0;
1572  text-align: right;
1573}
1574
1575.outlineItemToggler {
1576  position: relative;
1577  height: 0;
1578  width: 0;
1579  color: rgba(255, 255, 255, 0.5);
1580}
1581.outlineItemToggler::before {
1582  content: url(images/treeitem-expanded.png);
1583  display: inline-block;
1584  position: absolute;
1585}
1586.outlineItemToggler.outlineItemsHidden::before {
1587  content: url(images/treeitem-collapsed.png);
1588}
1589html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
1590  transform: scaleX(-1);
1591}
1592.outlineItemToggler.outlineItemsHidden ~ .outlineItems {
1593  display: none;
1594}
1595html[dir='ltr'] .outlineItemToggler {
1596  float: left;
1597}
1598html[dir='rtl'] .outlineItemToggler {
1599  float: right;
1600}
1601html[dir='ltr'] .outlineItemToggler::before {
1602  right: 4px;
1603}
1604html[dir='rtl'] .outlineItemToggler::before {
1605  left: 4px;
1606}
1607
1608.outlineItemToggler:hover,
1609.outlineItemToggler:hover + a,
1610.outlineItemToggler:hover ~ .outlineItems,
1611.outlineItem > a:hover,
1612.attachmentsItem > button:hover {
1613  background-color: rgba(255, 255, 255, 0.02);
1614  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1615  background-clip: padding-box;
1616  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
1617              0 0 1px rgba(255, 255, 255, 0.2) inset,
1618              0 0 1px rgba(0, 0, 0, 0.2);
1619  border-radius: 2px;
1620  color: rgba(255, 255, 255, 0.9);
1621}
1622
1623.outlineItem.selected {
1624  background-color: rgba(255, 255, 255, 0.08);
1625  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
1626  background-clip: padding-box;
1627  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
1628              0 0 1px rgba(255, 255, 255, 0.1) inset,
1629              0 0 1px rgba(0, 0, 0, 0.2);
1630  color: rgba(255, 255, 255, 1);
1631}
1632
1633.noResults {
1634  font-size: 12px;
1635  color: rgba(255, 255, 255, 0.8);
1636  font-style: italic;
1637  cursor: default;
1638}
1639
1640/* TODO: file FF bug to support ::-moz-selection:window-inactive
1641   so we can override the opaque grey background when the window is inactive;
1642   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
1643::selection {
1644  background: rgba(0, 0, 255, 0.3);
1645}
1646
1647#errorWrapper {
1648  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
1649  color: rgba(255, 255, 255, 1);
1650  left: 0;
1651  position: absolute;
1652  right: 0;
1653  z-index: 1000;
1654  padding: 3px;
1655  font-size: 0.8em;
1656}
1657.loadingInProgress #errorWrapper {
1658  top: 37px;
1659}
1660
1661#errorMessageLeft {
1662  float: left;
1663}
1664
1665#errorMessageRight {
1666  float: right;
1667}
1668
1669#errorMoreInfo {
1670  background-color: rgba(255, 255, 255, 1);
1671  color: rgba(0, 0, 0, 1);
1672  padding: 3px;
1673  margin: 3px;
1674  width: 98%;
1675}
1676
1677.overlayButton {
1678  width: auto;
1679  margin: 3px 4px 2px 4px !important;
1680  padding: 2px 6px 3px 6px;
1681}
1682
1683#overlayContainer {
1684  display: table;
1685  position: absolute;
1686  width: 100%;
1687  height: 100%;
1688  background-color: rgba(0, 0, 0, 0.2);
1689  z-index: 40000;
1690}
1691#overlayContainer > * {
1692  overflow: auto;
1693}
1694
1695#overlayContainer > .container {
1696  display: table-cell;
1697  vertical-align: middle;
1698  text-align: center;
1699}
1700
1701#overlayContainer > .container > .dialog {
1702  display: inline-block;
1703  padding: 15px;
1704  border-spacing: 4px;
1705  color: rgba(217, 217, 217, 1);
1706  font-size: 12px;
1707  line-height: 14px;
1708  background-color: rgba(71, 71, 71, 1); /* fallback */
1709  background-image: url(images/texture.png),
1710                    linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
1711  border: 1px solid rgba(0, 0, 0, 0.5);
1712  border-radius: 4px;
1713  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
1714}
1715
1716.dialog > .row {
1717  display: table-row;
1718}
1719
1720.dialog > .row > * {
1721  display: table-cell;
1722}
1723
1724.dialog .toolbarField {
1725  margin: 5px 0;
1726}
1727
1728.dialog .separator {
1729  display: block;
1730  margin: 4px 0 4px 0;
1731  height: 1px;
1732  width: 100%;
1733  background-color: rgba(0, 0, 0, 0.5);
1734  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
1735}
1736
1737.dialog .buttonRow {
1738  text-align: center;
1739  vertical-align: middle;
1740}
1741
1742.dialog :link {
1743  color: rgba(255, 255, 255, 1);
1744}
1745
1746#passwordOverlay > .dialog {
1747  text-align: center;
1748}
1749#passwordOverlay .toolbarField {
1750  width: 200px;
1751}
1752
1753#documentPropertiesOverlay > .dialog {
1754  text-align: left;
1755}
1756#documentPropertiesOverlay .row > * {
1757  min-width: 100px;
1758}
1759html[dir='ltr'] #documentPropertiesOverlay .row > * {
1760  text-align: left;
1761}
1762html[dir='rtl'] #documentPropertiesOverlay .row > * {
1763  text-align: right;
1764}
1765#documentPropertiesOverlay .row > span {
1766  width: 125px;
1767  word-wrap: break-word;
1768}
1769#documentPropertiesOverlay .row > p {
1770  max-width: 225px;
1771  word-wrap: break-word;
1772}
1773#documentPropertiesOverlay .buttonRow {
1774  margin-top: 10px;
1775}
1776
1777.clearBoth {
1778  clear: both;
1779}
1780
1781.fileInput {
1782  background: rgba(255, 255, 255, 1);
1783  color: rgba(0, 0, 0, 1);
1784  margin-top: 5px;
1785  visibility: hidden;
1786  position: fixed;
1787  right: 0;
1788  top: 0;
1789}
1790
1791#PDFBug {
1792  background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
1793  border: 1px solid rgba(102, 102, 102, 1);
1794  position: fixed;
1795  top: 32px;
1796  right: 0;
1797  bottom: 0;
1798  font-size: 10px;
1799  padding: 0;
1800  width: 300px;
1801}
1802#PDFBug .controls {
1803  background: rgba(238, 238, 238, 1);
1804  border-bottom: 1px solid rgba(102, 102, 102, 1);
1805  padding: 3px;
1806}
1807#PDFBug .panels {
1808  bottom: 0;
1809  left: 0;
1810  overflow: auto;
1811  position: absolute;
1812  right: 0;
1813  top: 27px;
1814}
1815#PDFBug .panels > div {
1816  padding: 5px;
1817}
1818#PDFBug button.active {
1819  font-weight: bold;
1820}
1821.debuggerShowText {
1822  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
1823  color: rgba(0, 0, 255, 1);
1824}
1825.debuggerHideText:hover {
1826  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
1827}
1828#PDFBug .stats {
1829  font-family: courier;
1830  font-size: 10px;
1831  white-space: pre;
1832}
1833#PDFBug .stats .title {
1834    font-weight: bold;
1835}
1836#PDFBug table {
1837  font-size: 10px;
1838}
1839
1840#viewer.textLayer-visible .textLayer {
1841  opacity: 1.0;
1842}
1843
1844#viewer.textLayer-visible .canvasWrapper {
1845  background-color: rgba(128, 255, 128, 1);
1846}
1847
1848#viewer.textLayer-visible .canvasWrapper canvas {
1849  mix-blend-mode: screen;
1850}
1851
1852#viewer.textLayer-visible .textLayer > span {
1853  background-color: rgba(255, 255, 0, 0.1);
1854  color: rgba(0, 0, 0, 1);
1855  border: solid 1px rgba(255, 0, 0, 0.5);
1856  box-sizing: border-box;
1857}
1858
1859#viewer.textLayer-hover .textLayer > span:hover {
1860  background-color: rgba(255, 255, 255, 1);
1861  color: rgba(0, 0, 0, 1);
1862}
1863
1864#viewer.textLayer-shadow .textLayer > span {
1865  background-color: rgba(255, 255, 255, 0.6);
1866  color: rgba(0, 0, 0, 1);
1867}
1868
1869.grab-to-pan-grab {
1870  cursor: url("images/grab.cur"), move !important;
1871  cursor: grab !important;
1872}
1873.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
1874  cursor: inherit !important;
1875}
1876.grab-to-pan-grab:active,
1877.grab-to-pan-grabbing {
1878  cursor: url("images/grabbing.cur"), move !important;
1879  cursor: grabbing !important;
1880  position: fixed;
1881  background: rgba(0, 0, 0, 0);
1882  display: block;
1883  top: 0;
1884  left: 0;
1885  right: 0;
1886  bottom: 0;
1887  overflow: hidden;
1888  z-index: 50000; /* should be higher than anything else in PDF.js! */
1889}
1890
1891@page {
1892  margin: 0;
1893}
1894
1895#printContainer {
1896  display: none;
1897}
1898
1899@media screen and (min-resolution: 1.1dppx) {
1900  /* Rules for Retina screens */
1901  .toolbarButton::before {
1902    transform: scale(0.5);
1903    top: -5px;
1904  }
1905
1906  .secondaryToolbarButton::before {
1907    transform: scale(0.5);
1908    top: -4px;
1909  }
1910
1911  html[dir='ltr'] .toolbarButton::before,
1912  html[dir='rtl'] .toolbarButton::before {
1913    left: -1px;
1914  }
1915
1916  html[dir='ltr'] .secondaryToolbarButton::before {
1917    left: -2px;
1918  }
1919  html[dir='rtl'] .secondaryToolbarButton::before {
1920    left: 186px;
1921  }
1922
1923  .toolbarField.pageNumber.visiblePageIsLoading,
1924  #findInput[data-status="pending"] {
1925    background-image: url(images/loading-small@2x.png);
1926    background-size: 16px 17px;
1927  }
1928
1929  .dropdownToolbarButton::after {
1930    transform: scale(0.5);
1931    top: -5px;
1932    content: url(images/toolbarButton-menuArrows@2x.png);
1933  }
1934  html[dir='ltr'] .dropdownToolbarButton::after {
1935    right: 4px;
1936  }
1937  html[dir='rtl'] .dropdownToolbarButton::after {
1938    left: 4px;
1939  }
1940
1941  .toolbarButton#sidebarToggle::before {
1942    content: url(images/toolbarButton-sidebarToggle@2x.png);
1943  }
1944  html[dir='rtl'] .toolbarButton#sidebarToggle::before {
1945    transform: scale(-0.5, 0.5);
1946  }
1947
1948  .toolbarButton#secondaryToolbarToggle::before {
1949    content: url(images/toolbarButton-secondaryToolbarToggle@2x.png);
1950  }
1951  html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
1952    transform: scale(-0.5, 0.5);
1953  }
1954
1955  .toolbarButton.findPrevious::before {
1956    content: url(images/findbarButton-previous@2x.png);
1957  }
1958  html[dir='rtl'] .toolbarButton.findPrevious::before {
1959    transform: scale(-0.5, 0.5);
1960  }
1961
1962  .toolbarButton.findNext::before {
1963    content: url(images/findbarButton-next@2x.png);
1964  }
1965  html[dir='rtl'] .toolbarButton.findNext::before {
1966    transform: scale(-0.5, 0.5);
1967  }
1968
1969  .toolbarButton.pageUp::before {
1970    content: url(images/toolbarButton-pageUp@2x.png);
1971  }
1972  html[dir='rtl'] .toolbarButton.pageUp::before {
1973    transform: scale(-0.5, 0.5);
1974  }
1975
1976  .toolbarButton.pageDown::before {
1977    content: url(images/toolbarButton-pageDown@2x.png);
1978  }
1979  html[dir='rtl'] .toolbarButton.pageDown::before {
1980    transform: scale(-0.5, 0.5);
1981  }
1982
1983  .toolbarButton.zoomIn::before {
1984    content: url(images/toolbarButton-zoomIn@2x.png);
1985  }
1986
1987  .toolbarButton.zoomOut::before {
1988    content: url(images/toolbarButton-zoomOut@2x.png);
1989  }
1990
1991  .toolbarButton.presentationMode::before,
1992  .secondaryToolbarButton.presentationMode::before {
1993    content: url(images/toolbarButton-presentationMode@2x.png);
1994  }
1995
1996  .toolbarButton.print::before,
1997  .secondaryToolbarButton.print::before {
1998    content: url(images/toolbarButton-print@2x.png);
1999  }
2000
2001  .toolbarButton.openFile::before,
2002  .secondaryToolbarButton.openFile::before {
2003    content: url(images/toolbarButton-openFile@2x.png);
2004  }
2005
2006  .toolbarButton.download::before,
2007  .secondaryToolbarButton.download::before {
2008    content: url(images/toolbarButton-download@2x.png);
2009  }
2010
2011  .toolbarButton.bookmark::before,
2012  .secondaryToolbarButton.bookmark::before {
2013    content: url(images/toolbarButton-bookmark@2x.png);
2014  }
2015
2016  #viewThumbnail.toolbarButton::before {
2017    content: url(images/toolbarButton-viewThumbnail@2x.png);
2018  }
2019
2020  #viewOutline.toolbarButton::before {
2021    content: url(images/toolbarButton-viewOutline@2x.png);
2022  }
2023  html[dir="rtl"] #viewOutline.toolbarButton::before {
2024    transform: scale(-0.5, 0.5);
2025  }
2026
2027  #viewAttachments.toolbarButton::before {
2028    content: url(images/toolbarButton-viewAttachments@2x.png);
2029  }
2030
2031  #viewFind.toolbarButton::before {
2032    content: url(images/toolbarButton-search@2x.png);
2033  }
2034
2035  .secondaryToolbarButton.firstPage::before {
2036    content: url(images/secondaryToolbarButton-firstPage@2x.png);
2037  }
2038
2039  .secondaryToolbarButton.lastPage::before {
2040    content: url(images/secondaryToolbarButton-lastPage@2x.png);
2041  }
2042
2043  .secondaryToolbarButton.rotateCcw::before {
2044    content: url(images/secondaryToolbarButton-rotateCcw@2x.png);
2045  }
2046
2047  .secondaryToolbarButton.rotateCw::before {
2048    content: url(images/secondaryToolbarButton-rotateCw@2x.png);
2049  }
2050
2051  .secondaryToolbarButton.selectTool::before {
2052    content: url(images/secondaryToolbarButton-selectTool@2x.png);
2053  }
2054
2055  .secondaryToolbarButton.handTool::before {
2056    content: url(images/secondaryToolbarButton-handTool@2x.png);
2057  }
2058
2059  .secondaryToolbarButton.scrollVertical::before {
2060    content: url(images/secondaryToolbarButton-scrollVertical@2x.png);
2061  }
2062
2063  .secondaryToolbarButton.scrollHorizontal::before {
2064    content: url(images/secondaryToolbarButton-scrollHorizontal@2x.png);
2065  }
2066
2067  .secondaryToolbarButton.scrollWrapped::before {
2068    content: url(images/secondaryToolbarButton-scrollWrapped@2x.png);
2069  }
2070
2071  .secondaryToolbarButton.spreadNone::before {
2072    content: url(images/secondaryToolbarButton-spreadNone@2x.png);
2073  }
2074
2075  .secondaryToolbarButton.spreadOdd::before {
2076    content: url(images/secondaryToolbarButton-spreadOdd@2x.png);
2077  }
2078
2079  .secondaryToolbarButton.spreadEven::before {
2080    content: url(images/secondaryToolbarButton-spreadEven@2x.png);
2081  }
2082
2083  .secondaryToolbarButton.documentProperties::before {
2084    content: url(images/secondaryToolbarButton-documentProperties@2x.png);
2085  }
2086
2087  .outlineItemToggler::before {
2088    transform: scale(0.5);
2089    top: -1px;
2090    content: url(images/treeitem-expanded@2x.png);
2091  }
2092  .outlineItemToggler.outlineItemsHidden::before {
2093    content: url(images/treeitem-collapsed@2x.png);
2094  }
2095  html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
2096    transform: scale(-0.5, 0.5);
2097  }
2098  html[dir='ltr'] .outlineItemToggler::before {
2099    right: 0;
2100  }
2101  html[dir='rtl'] .outlineItemToggler::before {
2102    left: 0;
2103  }
2104}
2105
2106@media print {
2107  /* General rules for printing. */
2108  body {
2109    background: rgba(0, 0, 0, 0) none;
2110  }
2111
2112  /* Rules for browsers that don't support mozPrintCallback. */
2113  #sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
2114    display: none;
2115  }
2116  #viewerContainer {
2117    overflow: visible;
2118  }
2119
2120  #mainContainer, #viewerContainer, .page, .page canvas {
2121    position: static;
2122    padding: 0;
2123    margin: 0;
2124  }
2125
2126  .page {
2127    float: left;
2128    display: none;
2129    border: none;
2130    box-shadow: none;
2131    background-clip: content-box;
2132    background-color: rgba(255, 255, 255, 1);
2133  }
2134
2135  .page[data-loaded] {
2136    display: block;
2137  }
2138
2139  .fileInput {
2140    display: none;
2141  }
2142
2143  /* Rules for browsers that support PDF.js printing */
2144  body[data-pdfjsprinting] #outerContainer {
2145    display: none;
2146  }
2147  body[data-pdfjsprinting] #printContainer {
2148    display: block;
2149  }
2150  #printContainer {
2151    height: 100%;
2152  }
2153  /* wrapper around (scaled) print canvas elements */
2154  #printContainer > div {
2155    position: relative;
2156    top: 0;
2157    left: 0;
2158    width: 1px;
2159    height: 1px;
2160    overflow: visible;
2161    page-break-after: always;
2162    page-break-inside: avoid;
2163  }
2164  #printContainer canvas,
2165  #printContainer img {
2166    display: block;
2167  }
2168}
2169
2170.visibleLargeView,
2171.visibleMediumView,
2172.visibleSmallView {
2173  display: none;
2174}
2175
2176@media all and (max-width: 900px) {
2177  #toolbarViewerMiddle {
2178    display: table;
2179    margin: auto;
2180    left: auto;
2181    position: inherit;
2182    transform: none;
2183  }
2184}
2185
2186@media all and (max-width: 840px) {
2187  #sidebarContent {
2188    background-color: rgba(0, 0, 0, 0.7);
2189  }
2190
2191  html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {
2192    left: 0px !important;
2193  }
2194  html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer {
2195    right: 0px !important;
2196  }
2197
2198  #outerContainer .hiddenLargeView,
2199  #outerContainer .hiddenMediumView {
2200    display: inherit;
2201  }
2202  #outerContainer .visibleLargeView,
2203  #outerContainer .visibleMediumView {
2204    display: none;
2205  }
2206}
2207
2208@media all and (max-width: 770px) {
2209  #outerContainer .hiddenLargeView {
2210    display: none;
2211  }
2212  #outerContainer .visibleLargeView {
2213    display: inherit;
2214  }
2215}
2216
2217@media all and (max-width: 700px) {
2218  #outerContainer .hiddenMediumView {
2219    display: none;
2220  }
2221  #outerContainer .visibleMediumView {
2222    display: inherit;
2223  }
2224}
2225
2226@media all and (max-width: 640px) {
2227  .hiddenSmallView, .hiddenSmallView * {
2228    display: none;
2229  }
2230  .visibleSmallView {
2231    display: inherit;
2232  }
2233  .toolbarButtonSpacer {
2234    width: 0;
2235  }
2236  html[dir='ltr'] .findbar {
2237    left: 38px;
2238  }
2239  html[dir='rtl'] .findbar {
2240    right: 38px;
2241  }
2242}
2243
2244@media all and (max-width: 535px) {
2245  #scaleSelectContainer {
2246    display: none;
2247  }
2248}
2249