1/* Copyright 2012 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* {
17  padding: 0;
18  margin: 0;
19}
20
21html {
22  height: 100%;
23  /* Font size is needed to make the activity bar the correct size. */
24  font-size: 10px;
25}
26
27body {
28  height: 100%;
29  background-color: #404040;
30  background-image: url(images/texture.png);
31}
32
33body,
34input,
35button,
36select {
37  font: message-box;
38}
39
40.hidden {
41  display: none !important;
42}
43[hidden] {
44  display: none !important;
45}
46
47#viewerContainer:-webkit-full-screen {
48  top: 0px;
49  border-top: 2px solid transparent;
50  background-color: #000;
51  width: 100%;
52  height: 100%;
53  overflow: hidden;
54  cursor: none;
55}
56
57#viewerContainer:-moz-full-screen {
58  top: 0px;
59  border-top: 2px solid transparent;
60  background-color: #000;
61  width: 100%;
62  height: 100%;
63  overflow: hidden;
64  cursor: none;
65}
66
67#viewerContainer:-ms-fullscreen {
68  top: 0px !important;
69  border-top: 2px solid transparent;
70  width: 100%;
71  height: 100%;
72  overflow: hidden !important;
73  cursor: none;
74}
75
76#viewerContainer:-ms-fullscreen::-ms-backdrop {
77  background-color: #000;
78}
79
80#viewerContainer:fullscreen {
81  top: 0px;
82  border-top: 2px solid transparent;
83  background-color: #000;
84  width: 100%;
85  height: 100%;
86  overflow: hidden;
87  cursor: none;
88}
89
90:-webkit-full-screen .page {
91  margin-bottom: 100%;
92}
93
94:-moz-full-screen .page {
95  margin-bottom: 100%;
96}
97
98:-ms-fullscreen .page {
99  margin-bottom: 100% !important;
100}
101
102:fullscreen .page {
103  margin-bottom: 100%;
104}
105
106:-webkit-full-screen a:not(.internalLink) {
107  display: none;
108}
109
110:-moz-full-screen a:not(.internalLink) {
111  display: none;
112}
113
114:-ms-fullscreen a:not(.internalLink) {
115  display: none !important;
116}
117
118:fullscreen a:not(.internalLink) {
119  display: none;
120}
121
122:-webkit-full-screen .textLayer > div {
123  cursor: none;
124}
125
126:-moz-full-screen .textLayer > div {
127  cursor: none;
128}
129
130:fullscreen .textLayer > div {
131  cursor: none;
132}
133
134#viewerContainer.presentationControls,
135#viewerContainer.presentationControls .textLayer > div {
136  cursor: default;
137}
138
139/* outer/inner center provides horizontal center */
140.outerCenter {
141  pointer-events: none;
142  position: relative;
143}
144html[dir='ltr'] .outerCenter {
145  float: right;
146  right: 50%;
147}
148html[dir='rtl'] .outerCenter {
149  float: left;
150  left: 50%;
151}
152.innerCenter {
153  pointer-events: auto;
154  position: relative;
155}
156html[dir='ltr'] .innerCenter {
157  float: right;
158  right: -50%;
159}
160html[dir='rtl'] .innerCenter {
161  float: left;
162  left: -50%;
163}
164
165#outerContainer {
166  width: 100%;
167  height: 100%;
168  position: relative;
169}
170
171#sidebarContainer {
172  position: absolute;
173  top: 0;
174  bottom: 0;
175  width: 200px;
176  visibility: hidden;
177  -webkit-transition-duration: 200ms;
178  -webkit-transition-timing-function: ease;
179  transition-duration: 200ms;
180  transition-timing-function: ease;
181
182}
183html[dir='ltr'] #sidebarContainer {
184  -webkit-transition-property: left;
185  transition-property: left;
186  left: -200px;
187}
188html[dir='rtl'] #sidebarContainer {
189  -webkit-transition-property: right;
190  transition-property: right;
191  right: -200px;
192}
193
194#outerContainer.sidebarMoving > #sidebarContainer,
195#outerContainer.sidebarOpen > #sidebarContainer {
196  visibility: visible;
197}
198html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer {
199  left: 0px;
200}
201html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
202  right: 0px;
203}
204
205#mainContainer {
206  position: absolute;
207  top: 0;
208  right: 0;
209  bottom: 0;
210  left: 0;
211  min-width: 320px;
212  -webkit-transition-duration: 200ms;
213  -webkit-transition-timing-function: ease;
214  transition-duration: 200ms;
215  transition-timing-function: ease;
216}
217html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
218  -webkit-transition-property: left;
219  transition-property: left;
220  left: 200px;
221}
222html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
223  -webkit-transition-property: right;
224  transition-property: right;
225  right: 200px;
226}
227
228#sidebarContent {
229  top: 32px;
230  bottom: 0;
231  overflow: auto;
232  position: absolute;
233  width: 200px;
234
235  background-color: hsla(0,0%,0%,.1);
236  box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
237}
238html[dir='ltr'] #sidebarContent {
239  left: 0;
240}
241html[dir='rtl'] #sidebarContent {
242  right: 0;
243}
244
245#viewerContainer {
246  overflow: auto;
247  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
248  position: absolute;
249  top: 32px;
250  right: 0;
251  bottom: 0;
252  left: 0;
253  outline: none;
254}
255
256.toolbar {
257  position: relative;
258  left: 0;
259  right: 0;
260  z-index: 9999;
261  cursor: default;
262}
263
264#toolbarContainer {
265  width: 100%;
266}
267
268#toolbarSidebar {
269  width: 200px;
270  height: 32px;
271  background-color: #424242; /* fallback */
272  background-image: url(images/texture.png),
273                    linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
274  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
275
276              inset 0 -1px 0 hsla(0,0%,100%,.05),
277              0 1px 0 hsla(0,0%,0%,.15),
278              0 0 1px hsla(0,0%,0%,.1);
279}
280
281#toolbarContainer, .findbar, .secondaryToolbar {
282  position: relative;
283  height: 32px;
284  background-color: #474747; /* fallback */
285  background-image: url(images/texture.png),
286                    linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
287  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
288              inset 0 1px 1px hsla(0,0%,0%,.15),
289              inset 0 -1px 0 hsla(0,0%,100%,.05),
290              0 1px 0 hsla(0,0%,0%,.15),
291              0 1px 1px hsla(0,0%,0%,.1);
292}
293
294#toolbarViewer {
295  height: 32px;
296}
297
298#loadingBar {
299  position: relative;
300  width: 100%;
301  height: 6px;
302  background-color: #333;
303  border-bottom: 1px solid #333;
304}
305
306#loadingBar .progress {
307  position: absolute;
308  top: 0;
309  left: 0;
310  width: 0%;
311  height: 100%;
312  background-color: #ddd;
313  overflow: hidden;
314  -webkit-transition: width 200ms;
315  transition: width 200ms;
316}
317
318@-webkit-keyframes progressIndeterminate {
319  0% { left: 0%; }
320  50% { left: 100%; }
321  100% { left: 100%; }
322}
323
324@keyframes progressIndeterminate {
325  0% { left: 0%; }
326  50% { left: 100%; }
327  100% { left: 100%; }
328}
329
330#loadingBar .progress.indeterminate {
331  background-color: #999;
332  -webkit-transition: none;
333  transition: none;
334}
335
336#loadingBar .indeterminate .glimmer {
337  position: absolute;
338  top: 0;
339  left: 0;
340  height: 100%;
341  width: 50px;
342
343  background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
344  background-size: 100% 100%;
345  background-repeat: no-repeat;
346
347  -webkit-animation: progressIndeterminate 2s linear infinite;
348  animation: progressIndeterminate 2s linear infinite;
349}
350
351.findbar, .secondaryToolbar {
352  top: 32px;
353  position: absolute;
354  z-index: 10000;
355  height: 32px;
356
357  min-width: 16px;
358  padding: 0px 6px 0px 6px;
359  margin: 4px 2px 4px 2px;
360  color: hsl(0,0%,85%);
361  font-size: 12px;
362  line-height: 14px;
363  text-align: left;
364  cursor: default;
365}
366
367html[dir='ltr'] .findbar {
368  left: 68px;
369}
370
371html[dir='rtl'] .findbar {
372  right: 68px;
373}
374
375.findbar label {
376  -webkit-user-select: none;
377  -moz-user-select: none;
378}
379
380#findInput[data-status="pending"] {
381  background-image: url(images/loading-small.png);
382  background-repeat: no-repeat;
383  background-position: right;
384}
385
386.secondaryToolbar {
387  padding: 6px;
388  height: auto;
389  z-index: 30000;
390}
391html[dir='ltr'] .secondaryToolbar {
392  right: 4px;
393}
394html[dir='rtl'] .secondaryToolbar {
395  left: 4px;
396}
397
398#secondaryToolbarButtonContainer {
399  max-width: 200px;
400  max-height: 400px;
401  overflow-y: auto;
402  margin-bottom: -4px;
403}
404
405.doorHanger,
406.doorHangerRight {
407  border: 1px solid hsla(0,0%,0%,.5);
408  border-radius: 2px;
409  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
410}
411.doorHanger:after, .doorHanger:before,
412.doorHangerRight:after, .doorHangerRight:before {
413  bottom: 100%;
414  border: solid transparent;
415  content: " ";
416  height: 0;
417  width: 0;
418  position: absolute;
419  pointer-events: none;
420}
421.doorHanger:after,
422.doorHangerRight:after {
423  border-bottom-color: hsla(0,0%,32%,.99);
424  border-width: 8px;
425}
426.doorHanger:before,
427.doorHangerRight:before {
428  border-bottom-color: hsla(0,0%,0%,.5);
429  border-width: 9px;
430}
431
432html[dir='ltr'] .doorHanger:after,
433html[dir='rtl'] .doorHangerRight:after {
434  left: 13px;
435  margin-left: -8px;
436}
437
438html[dir='ltr'] .doorHanger:before,
439html[dir='rtl'] .doorHangerRight:before {
440  left: 13px;
441  margin-left: -9px;
442}
443
444html[dir='rtl'] .doorHanger:after,
445html[dir='ltr'] .doorHangerRight:after {
446  right: 13px;
447  margin-right: -8px;
448}
449
450html[dir='rtl'] .doorHanger:before,
451html[dir='ltr'] .doorHangerRight:before {
452  right: 13px;
453  margin-right: -9px;
454}
455
456#findMsg {
457  font-style: italic;
458  color: #A6B7D0;
459}
460
461.notFound {
462  background-color: rgb(255, 137, 153);
463}
464
465html[dir='ltr'] #toolbarViewerLeft {
466  margin-left: -1px;
467}
468html[dir='rtl'] #toolbarViewerRight {
469  margin-right: -1px;
470}
471
472html[dir='ltr'] #toolbarViewerLeft,
473html[dir='rtl'] #toolbarViewerRight {
474  position: absolute;
475  top: 0;
476  left: 0;
477}
478html[dir='ltr'] #toolbarViewerRight,
479html[dir='rtl'] #toolbarViewerLeft {
480  position: absolute;
481  top: 0;
482  right: 0;
483}
484html[dir='ltr'] #toolbarViewerLeft > *,
485html[dir='ltr'] #toolbarViewerMiddle > *,
486html[dir='ltr'] #toolbarViewerRight > *,
487html[dir='ltr'] .findbar > * {
488  position: relative;
489  float: left;
490}
491html[dir='rtl'] #toolbarViewerLeft > *,
492html[dir='rtl'] #toolbarViewerMiddle > *,
493html[dir='rtl'] #toolbarViewerRight > *,
494html[dir='rtl'] .findbar > * {
495  position: relative;
496  float: right;
497}
498
499html[dir='ltr'] .splitToolbarButton {
500  margin: 3px 2px 4px 0;
501  display: inline-block;
502}
503html[dir='rtl'] .splitToolbarButton {
504  margin: 3px 0 4px 2px;
505  display: inline-block;
506}
507html[dir='ltr'] .splitToolbarButton > .toolbarButton {
508  border-radius: 0;
509  float: left;
510}
511html[dir='rtl'] .splitToolbarButton > .toolbarButton {
512  border-radius: 0;
513  float: right;
514}
515
516.toolbarButton,
517.secondaryToolbarButton {
518  border: 0 none;
519  background-color: rgba(0, 0, 0, 0);
520  width: 32px;
521  height: 25px;
522}
523
524.toolbarButton > span {
525  display: inline-block;
526  width: 0;
527  height: 0;
528  overflow: hidden;
529}
530
531.toolbarButton[disabled],
532.secondaryToolbarButton[disabled] {
533  opacity: .5;
534}
535
536.toolbarButton.group {
537  margin-right: 0;
538}
539
540.splitToolbarButton.toggled .toolbarButton {
541  margin: 0;
542}
543
544.splitToolbarButton:hover > .toolbarButton,
545.splitToolbarButton:focus > .toolbarButton,
546.splitToolbarButton.toggled > .toolbarButton,
547.toolbarButton.textButton {
548  background-color: hsla(0,0%,0%,.12);
549  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
550  background-clip: padding-box;
551  border: 1px solid hsla(0,0%,0%,.35);
552  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
553  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
554              0 0 1px hsla(0,0%,100%,.15) inset,
555              0 1px 0 hsla(0,0%,100%,.05);
556  -webkit-transition-property: background-color, border-color, box-shadow;
557  -webkit-transition-duration: 150ms;
558  -webkit-transition-timing-function: ease;
559  transition-property: background-color, border-color, box-shadow;
560  transition-duration: 150ms;
561  transition-timing-function: ease;
562
563}
564.splitToolbarButton > .toolbarButton:hover,
565.splitToolbarButton > .toolbarButton:focus,
566.dropdownToolbarButton:hover,
567.promptButton:hover,
568.toolbarButton.textButton:hover,
569.toolbarButton.textButton:focus {
570  background-color: hsla(0,0%,0%,.2);
571  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
572              0 0 1px hsla(0,0%,100%,.15) inset,
573              0 0 1px hsla(0,0%,0%,.05);
574  z-index: 199;
575}
576html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
577html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
578  position: relative;
579  margin: 0;
580  margin-right: -1px;
581  border-top-left-radius: 2px;
582  border-bottom-left-radius: 2px;
583  border-right-color: transparent;
584}
585html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
586html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
587  position: relative;
588  margin: 0;
589  margin-left: -1px;
590  border-top-right-radius: 2px;
591  border-bottom-right-radius: 2px;
592  border-left-color: transparent;
593}
594.splitToolbarButtonSeparator {
595  padding: 8px 0;
596  width: 1px;
597  background-color: hsla(0,0%,0%,.5);
598  z-index: 99;
599  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
600  display: inline-block;
601  margin: 5px 0;
602}
603html[dir='ltr'] .splitToolbarButtonSeparator {
604  float: left;
605}
606html[dir='rtl'] .splitToolbarButtonSeparator {
607  float: right;
608}
609.splitToolbarButton:hover > .splitToolbarButtonSeparator,
610.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
611  padding: 12px 0;
612  margin: 1px 0;
613  box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
614  -webkit-transition-property: padding;
615  -webkit-transition-duration: 10ms;
616  -webkit-transition-timing-function: ease;
617  transition-property: padding;
618  transition-duration: 10ms;
619  transition-timing-function: ease;
620}
621
622.toolbarButton,
623.dropdownToolbarButton,
624.promptButton,
625.secondaryToolbarButton {
626  min-width: 16px;
627  padding: 2px 6px 0;
628  border: 1px solid transparent;
629  border-radius: 2px;
630  color: hsla(0,0%,100%,.8);
631  font-size: 12px;
632  line-height: 14px;
633  -webkit-user-select: none;
634  -moz-user-select: none;
635  -ms-user-select: none;
636  /* Opera does not support user-select, use <... unselectable="on"> instead */
637  cursor: default;
638  -webkit-transition-property: background-color, border-color, box-shadow;
639  -webkit-transition-duration: 150ms;
640  -webkit-transition-timing-function: ease;
641  transition-property: background-color, border-color, box-shadow;
642  transition-duration: 150ms;
643  transition-timing-function: ease;
644}
645
646html[dir='ltr'] .toolbarButton,
647html[dir='ltr'] .promptButton,
648html[dir='ltr'] .dropdownToolbarButton {
649  margin: 3px 2px 4px 0;
650}
651html[dir='rtl'] .toolbarButton,
652html[dir='rtl'] .promptButton,
653html[dir='rtl'] .dropdownToolbarButton {
654  margin: 3px 0 4px 2px;
655}
656
657.toolbarButton:hover,
658.toolbarButton:focus,
659.dropdownToolbarButton,
660.promptButton,
661.secondaryToolbarButton:hover,
662.secondaryToolbarButton:focus {
663  background-color: hsla(0,0%,0%,.12);
664  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
665  background-clip: padding-box;
666  border: 1px solid hsla(0,0%,0%,.35);
667  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
668  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
669              0 0 1px hsla(0,0%,100%,.15) inset,
670              0 1px 0 hsla(0,0%,100%,.05);
671}
672
673.toolbarButton:hover:active,
674.promptButton:hover:active,
675.dropdownToolbarButton:hover:active,
676.secondaryToolbarButton:hover:active {
677  background-color: hsla(0,0%,0%,.2);
678  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
679  border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
680  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
681              0 0 1px hsla(0,0%,0%,.2) inset,
682              0 1px 0 hsla(0,0%,100%,.05);
683  -webkit-transition-property: background-color, border-color, box-shadow;
684  -webkit-transition-duration: 10ms;
685  -webkit-transition-timing-function: linear;
686  transition-property: background-color, border-color, box-shadow;
687  transition-duration: 10ms;
688  transition-timing-function: linear;
689}
690
691.toolbarButton.toggled,
692.splitToolbarButton.toggled > .toolbarButton.toggled,
693.secondaryToolbarButton.toggled {
694  background-color: hsla(0,0%,0%,.3);
695  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
696  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
697  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
698              0 0 1px hsla(0,0%,0%,.2) inset,
699              0 1px 0 hsla(0,0%,100%,.05);
700  -webkit-transition-property: background-color, border-color, box-shadow;
701  -webkit-transition-duration: 10ms;
702  -webkit-transition-timing-function: linear;
703  transition-property: background-color, border-color, box-shadow;
704  transition-duration: 10ms;
705  transition-timing-function: linear;
706}
707
708.toolbarButton.toggled:hover:active,
709.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
710.secondaryToolbarButton.toggled:hover:active {
711  background-color: hsla(0,0%,0%,.4);
712  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
713  box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
714              0 0 1px hsla(0,0%,0%,.3) inset,
715              0 1px 0 hsla(0,0%,100%,.05);
716}
717
718.dropdownToolbarButton {
719  width: 120px;
720  max-width: 120px;
721  padding: 3px 2px 2px;
722  overflow: hidden;
723  background: url(images/toolbarButton-menuArrows.png) no-repeat;
724}
725html[dir='ltr'] .dropdownToolbarButton {
726  background-position: 95%;
727}
728html[dir='rtl'] .dropdownToolbarButton {
729  background-position: 5%;
730}
731
732.dropdownToolbarButton > select {
733  -webkit-appearance: none;
734  -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
735  min-width: 140px;
736  font-size: 12px;
737  color: hsl(0,0%,95%);
738  margin: 0;
739  padding: 0;
740  border: none;
741  background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
742}
743
744.dropdownToolbarButton > select > option {
745  background: hsl(0,0%,24%);
746}
747
748.promptButton {
749  margin: 3px 2px 4px 5px !important;
750  line-height: 16px;
751  padding: 2px 6px 3px 6px;
752}
753
754#customScaleOption {
755  display: none;
756}
757
758#pageWidthOption {
759  border-bottom: 1px rgba(255, 255, 255, .5) solid;
760}
761
762html[dir='ltr'] .splitToolbarButton:first-child,
763html[dir='ltr'] .toolbarButton:first-child,
764html[dir='rtl'] .splitToolbarButton:last-child,
765html[dir='rtl'] .toolbarButton:last-child {
766  margin-left: 4px;
767}
768html[dir='ltr'] .splitToolbarButton:last-child,
769html[dir='ltr'] .toolbarButton:last-child,
770html[dir='rtl'] .splitToolbarButton:first-child,
771html[dir='rtl'] .toolbarButton:first-child {
772  margin-right: 4px;
773}
774
775.toolbarButtonSpacer {
776  width: 30px;
777  display: inline-block;
778  height: 1px;
779}
780
781.toolbarButtonFlexibleSpacer {
782  -webkit-box-flex: 1;
783  -moz-box-flex: 1;
784  min-width: 30px;
785}
786
787html[dir='ltr'] #findPrevious {
788  margin-left: 3px;
789}
790html[dir='ltr'] #findNext {
791  margin-right: 3px;
792}
793
794html[dir='rtl'] #findPrevious {
795  margin-right: 3px;
796}
797html[dir='rtl'] #findNext {
798  margin-left: 3px;
799}
800
801.toolbarButton::before,
802.secondaryToolbarButton::before {
803  /* All matching images have a size of 16x16
804   * (except for the print button: 18x16)
805   * All relevant containers have a size of 32x25 */
806  position: absolute;
807  display: inline-block;
808  top: 4px;
809  left: 7px;
810}
811
812html[dir="ltr"] .secondaryToolbarButton::before {
813  left: 4px;
814}
815html[dir="rtl"] .secondaryToolbarButton::before {
816  right: 4px;
817}
818
819html[dir='ltr'] .toolbarButton#sidebarToggle::before {
820  content: url(images/toolbarButton-sidebarToggle.png);
821}
822html[dir='rtl'] .toolbarButton#sidebarToggle::before {
823  content: url(images/toolbarButton-sidebarToggle-rtl.png);
824}
825
826html[dir='ltr'] .toolbarButton#secondaryToolbarToggle::before {
827  content: url(images/toolbarButton-secondaryToolbarToggle.png);
828}
829html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
830  content: url(images/toolbarButton-secondaryToolbarToggle-rtl.png);
831}
832
833html[dir='ltr'] .toolbarButton.findPrevious::before {
834  content: url(images/findbarButton-previous.png);
835}
836html[dir='rtl'] .toolbarButton.findPrevious::before {
837  content: url(images/findbarButton-previous-rtl.png);
838}
839
840html[dir='ltr'] .toolbarButton.findNext::before {
841  content: url(images/findbarButton-next.png);
842}
843html[dir='rtl'] .toolbarButton.findNext::before {
844  content: url(images/findbarButton-next-rtl.png);
845}
846
847html[dir='ltr'] .toolbarButton.pageUp::before {
848  content: url(images/toolbarButton-pageUp.png);
849}
850html[dir='rtl'] .toolbarButton.pageUp::before {
851  content: url(images/toolbarButton-pageUp-rtl.png);
852}
853
854html[dir='ltr'] .toolbarButton.pageDown::before {
855  content: url(images/toolbarButton-pageDown.png);
856}
857html[dir='rtl'] .toolbarButton.pageDown::before {
858  content: url(images/toolbarButton-pageDown-rtl.png);
859}
860
861.toolbarButton.zoomOut::before {
862  content: url(images/toolbarButton-zoomOut.png);
863}
864
865.toolbarButton.zoomIn::before {
866  content: url(images/toolbarButton-zoomIn.png);
867}
868
869.toolbarButton.presentationMode::before,
870.secondaryToolbarButton.presentationMode::before {
871  content: url(images/toolbarButton-presentationMode.png);
872}
873
874.toolbarButton.print::before,
875.secondaryToolbarButton.print::before {
876  content: url(images/toolbarButton-print.png);
877  left: 6px;
878}
879
880html[dir="ltr"] .secondaryToolbarButton.print::before {
881  left: 3px;
882}
883html[dir="rtl"] .secondaryToolbarButton.print::before {
884  right: 3px;
885}
886
887.toolbarButton.openFile::before,
888.secondaryToolbarButton.openFile::before {
889  content: url(images/toolbarButton-openFile.png);
890}
891
892.toolbarButton.download::before,
893.secondaryToolbarButton.download::before {
894  content: url(images/toolbarButton-download.png);
895}
896
897.toolbarButton.bookmark,
898.secondaryToolbarButton.bookmark {
899  -webkit-box-sizing: border-box;
900  -moz-box-sizing: border-box;
901  box-sizing: border-box;
902  padding-top: 4px;
903  text-decoration: none;
904}
905.secondaryToolbarButton.bookmark {
906  padding-top: 5px;
907}
908
909.bookmark[href='#'] {
910  opacity: .5;
911  pointer-events: none;
912}
913
914.toolbarButton.bookmark::before,
915.secondaryToolbarButton.bookmark::before {
916  content: url(images/toolbarButton-bookmark.png);
917}
918
919#viewThumbnail.toolbarButton::before {
920  content: url(images/toolbarButton-viewThumbnail.png);
921}
922
923html[dir="ltr"] #viewOutline.toolbarButton::before {
924  content: url(images/toolbarButton-viewOutline.png);
925}
926html[dir="rtl"] #viewOutline.toolbarButton::before {
927  content: url(images/toolbarButton-viewOutline-rtl.png);
928}
929
930#viewFind.toolbarButton::before {
931  content: url(images/toolbarButton-search.png);
932}
933
934.secondaryToolbarButton {
935  position: relative;
936  margin: 0 0 4px 0;
937  padding: 3px 0 1px 0;
938  height: auto;
939  min-height: 25px;
940  width: auto;
941  min-width: 100%;
942  white-space: normal;
943}
944html[dir="ltr"] .secondaryToolbarButton {
945  padding-left: 24px;
946  text-align: left;
947}
948html[dir="rtl"] .secondaryToolbarButton {
949  padding-right: 24px;
950  text-align: right;
951}
952html[dir="ltr"] .secondaryToolbarButton.bookmark {
953  padding-left: 27px;
954}
955html[dir="rtl"] .secondaryToolbarButton.bookmark {
956  padding-right: 27px;
957}
958
959html[dir="ltr"] .secondaryToolbarButton > span {
960  padding-right: 4px;
961}
962html[dir="rtl"] .secondaryToolbarButton > span {
963  padding-left: 4px;
964}
965
966.secondaryToolbarButton.firstPage::before {
967  content: url(images/secondaryToolbarButton-firstPage.png);
968}
969
970.secondaryToolbarButton.lastPage::before {
971  content: url(images/secondaryToolbarButton-lastPage.png);
972}
973
974.secondaryToolbarButton.rotateCcw::before {
975  content: url(images/secondaryToolbarButton-rotateCcw.png);
976}
977
978.secondaryToolbarButton.rotateCw::before {
979  content: url(images/secondaryToolbarButton-rotateCw.png);
980}
981
982.secondaryToolbarButton.handTool::before {
983  content: url(images/secondaryToolbarButton-handTool.png);
984}
985
986.verticalToolbarSeparator {
987  display: block;
988  padding: 8px 0;
989  margin: 8px 4px;
990  width: 1px;
991  background-color: hsla(0,0%,0%,.5);
992  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
993}
994html[dir='ltr'] .verticalToolbarSeparator {
995  margin-left: 2px;
996}
997html[dir='rtl'] .verticalToolbarSeparator {
998  margin-right: 2px;
999}
1000
1001.horizontalToolbarSeparator {
1002  display: block;
1003  margin: 0 0 4px 0;
1004  height: 1px;
1005  width: 100%;
1006  background-color: hsla(0,0%,0%,.5);
1007  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
1008}
1009
1010.toolbarField {
1011  padding: 3px 6px;
1012  margin: 4px 0 4px 0;
1013  border: 1px solid transparent;
1014  border-radius: 2px;
1015  background-color: hsla(0,0%,100%,.09);
1016  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
1017  background-clip: padding-box;
1018  border: 1px solid hsla(0,0%,0%,.35);
1019  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
1020  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
1021              0 1px 0 hsla(0,0%,100%,.05);
1022  color: hsl(0,0%,95%);
1023  font-size: 12px;
1024  line-height: 14px;
1025  outline-style: none;
1026  transition-property: background-color, border-color, box-shadow;
1027  transition-duration: 150ms;
1028  transition-timing-function: ease;
1029}
1030
1031.toolbarField[type=checkbox] {
1032  display: inline-block;
1033  margin: 8px 0px;
1034}
1035
1036.toolbarField.pageNumber {
1037  -moz-appearance: textfield; /* hides the spinner in moz */
1038  min-width: 16px;
1039  text-align: right;
1040  width: 40px;
1041}
1042
1043.toolbarField.pageNumber::-webkit-inner-spin-button,
1044.toolbarField.pageNumber::-webkit-outer-spin-button {
1045    -webkit-appearance: none;
1046    margin: 0;
1047}
1048
1049.toolbarField:hover {
1050  background-color: hsla(0,0%,100%,.11);
1051  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
1052}
1053
1054.toolbarField:focus {
1055  background-color: hsla(0,0%,100%,.15);
1056  border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
1057}
1058
1059.toolbarLabel {
1060  min-width: 16px;
1061  padding: 3px 6px 3px 2px;
1062  margin: 4px 2px 4px 0;
1063  border: 1px solid transparent;
1064  border-radius: 2px;
1065  color: hsl(0,0%,85%);
1066  font-size: 12px;
1067  line-height: 14px;
1068  text-align: left;
1069  -webkit-user-select: none;
1070  -moz-user-select: none;
1071  cursor: default;
1072}
1073
1074#thumbnailView {
1075  position: absolute;
1076  width: 120px;
1077  top: 0;
1078  bottom: 0;
1079  padding: 10px 40px 0;
1080  overflow: auto;
1081}
1082
1083.thumbnail {
1084  float: left;
1085  margin-bottom: 5px;
1086}
1087
1088#thumbnailView > a:last-of-type > .thumbnail {
1089  margin-bottom: 10px;
1090}
1091
1092.thumbnail:not([data-loaded]) {
1093  border: 1px dashed rgba(255, 255, 255, 0.5);
1094  margin-bottom: 10px;
1095}
1096
1097.thumbnailImage {
1098  transition-duration: 150ms;
1099  border: 1px solid transparent;
1100  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
1101  opacity: 0.8;
1102  z-index: 99;
1103}
1104
1105.thumbnailSelectionRing {
1106  border-radius: 2px;
1107  padding: 7px;
1108  transition-duration: 150ms;
1109}
1110
1111a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
1112.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
1113  opacity: .9;
1114}
1115
1116a:focus > .thumbnail > .thumbnailSelectionRing,
1117.thumbnail:hover > .thumbnailSelectionRing {
1118  background-color: hsla(0,0%,100%,.15);
1119  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
1120  background-clip: padding-box;
1121  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
1122              0 0 1px hsla(0,0%,100%,.2) inset,
1123              0 0 1px hsla(0,0%,0%,.2);
1124  color: hsla(0,0%,100%,.9);
1125}
1126
1127.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
1128  box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
1129  opacity: 1;
1130}
1131
1132.thumbnail.selected > .thumbnailSelectionRing {
1133  background-color: hsla(0,0%,100%,.3);
1134  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
1135  background-clip: padding-box;
1136  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
1137              0 0 1px hsla(0,0%,100%,.1) inset,
1138              0 0 1px hsla(0,0%,0%,.2);
1139  color: hsla(0,0%,100%,1);
1140}
1141
1142#outlineView {
1143  position: absolute;
1144  width: 192px;
1145  top: 0;
1146  bottom: 0;
1147  padding: 4px 4px 0;
1148  overflow: auto;
1149  -webkit-user-select: none;
1150  -moz-user-select: none;
1151}
1152
1153html[dir='ltr'] .outlineItem > .outlineItems {
1154  margin-left: 20px;
1155}
1156
1157html[dir='rtl'] .outlineItem > .outlineItems {
1158  margin-right: 20px;
1159}
1160
1161.outlineItem > a {
1162  text-decoration: none;
1163  display: inline-block;
1164  min-width: 95%;
1165  height: auto;
1166  margin-bottom: 1px;
1167  border-radius: 2px;
1168  color: hsla(0,0%,100%,.8);
1169  font-size: 13px;
1170  line-height: 15px;
1171  -moz-user-select: none;
1172  white-space: normal;
1173}
1174
1175html[dir='ltr'] .outlineItem > a {
1176  padding: 2px 0 5px 10px;
1177}
1178
1179html[dir='rtl'] .outlineItem > a {
1180  padding: 2px 10px 5px 0;
1181}
1182
1183.outlineItem > a:hover {
1184  background-color: hsla(0,0%,100%,.02);
1185  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
1186  background-clip: padding-box;
1187  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
1188              0 0 1px hsla(0,0%,100%,.2) inset,
1189              0 0 1px hsla(0,0%,0%,.2);
1190  color: hsla(0,0%,100%,.9);
1191}
1192
1193.outlineItem.selected {
1194  background-color: hsla(0,0%,100%,.08);
1195  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
1196  background-clip: padding-box;
1197  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
1198              0 0 1px hsla(0,0%,100%,.1) inset,
1199              0 0 1px hsla(0,0%,0%,.2);
1200  color: hsla(0,0%,100%,1);
1201}
1202
1203.noResults {
1204  font-size: 12px;
1205  color: hsla(0,0%,100%,.8);
1206  font-style: italic;
1207  cursor: default;
1208}
1209
1210.canvasWrapper {
1211  overflow: hidden;
1212}
1213
1214canvas {
1215  margin: 0;
1216  display: block;
1217}
1218
1219.page {
1220  direction: ltr;
1221  width: 816px;
1222  height: 1056px;
1223  margin: 1px auto -8px auto;
1224  position: relative;
1225  overflow: visible;
1226  border: 9px solid transparent;
1227  background-clip: content-box;
1228  border-image: url(images/shadow.png) 9 9 repeat;
1229  background-color: white;
1230}
1231
1232.page > a,
1233.annotationLayer > a {
1234  display: block;
1235  position: absolute;
1236}
1237
1238.page > a:hover,
1239.annotationLayer > a:hover {
1240  opacity: 0.2;
1241  background: #ff0;
1242  box-shadow: 0px 2px 10px #ff0;
1243}
1244
1245.loadingIcon {
1246  position: absolute;
1247  display: block;
1248  left: 0;
1249  top: 0;
1250  right: 0;
1251  bottom: 0;
1252  background: url('images/loading-icon.gif') center no-repeat;
1253}
1254
1255.textLayer {
1256  position: absolute;
1257  left: 0;
1258  top: 0;
1259  right: 0;
1260  bottom: 0;
1261  color: #000;
1262  font-family: sans-serif;
1263  overflow: hidden;
1264}
1265
1266.textLayer > div {
1267  color: transparent;
1268  position: absolute;
1269  line-height: 1;
1270  white-space: pre;
1271  cursor: text;
1272}
1273
1274.textLayer .highlight {
1275  margin: -1px;
1276  padding: 1px;
1277
1278  background-color: rgba(180, 0, 170, 0.2);
1279  border-radius: 4px;
1280}
1281
1282.textLayer .highlight.begin {
1283  border-radius: 4px 0px 0px 4px;
1284}
1285
1286.textLayer .highlight.end {
1287  border-radius: 0px 4px 4px 0px;
1288}
1289
1290.textLayer .highlight.middle {
1291  border-radius: 0px;
1292}
1293
1294.textLayer .highlight.selected {
1295  background-color: rgba(0, 100, 0, 0.2);
1296}
1297
1298/* TODO: file FF bug to support ::-moz-selection:window-inactive
1299   so we can override the opaque grey background when the window is inactive;
1300   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
1301::selection { background:rgba(0,0,255,0.3); }
1302::-moz-selection { background:rgba(0,0,255,0.3); }
1303
1304.annotText > div {
1305  z-index: 200;
1306  position: absolute;
1307  padding: 0.6em;
1308  max-width: 20em;
1309  background-color: #FFFF99;
1310  box-shadow: 0px 2px 10px #333;
1311  border-radius: 7px;
1312}
1313
1314.annotText > img {
1315  position: absolute;
1316  opacity: 0.6;
1317}
1318
1319.annotText > img:hover {
1320  opacity: 1;
1321}
1322
1323.annotText > div > h1 {
1324  font-size: 1.2em;
1325  border-bottom: 1px solid #000000;
1326  margin: 0px;
1327}
1328
1329#errorWrapper {
1330  background: none repeat scroll 0 0 #FF5555;
1331  color: white;
1332  left: 0;
1333  position: absolute;
1334  right: 0;
1335  z-index: 1000;
1336  padding: 3px;
1337  font-size: 0.8em;
1338}
1339.loadingInProgress #errorWrapper {
1340  top: 39px;
1341}
1342
1343#errorMessageLeft {
1344  float: left;
1345}
1346
1347#errorMessageRight {
1348  float: right;
1349}
1350
1351#errorMoreInfo {
1352  background-color: #FFFFFF;
1353  color: black;
1354  padding: 3px;
1355  margin: 3px;
1356  width: 98%;
1357}
1358
1359#overlayContainer {
1360  display: table;
1361  position: absolute;
1362  width: 100%;
1363  height: 100%;
1364  background-color: hsla(0,0%,0%,.2);
1365  z-index: 10000;
1366}
1367
1368#promptContainer {
1369  display: table-cell;
1370  vertical-align: middle;
1371  text-align: center;
1372}
1373
1374#promptContainer > * {
1375  display: inline-block;
1376}
1377
1378.prompt {
1379  display: table;
1380  padding: 15px;
1381  border-spacing: 4px;
1382  color: hsl(0,0%,85%);
1383  line-height: 14px;
1384  text-align: center;
1385  background-color: #474747; /* fallback */
1386  background-image: url(images/texture.png),
1387                    linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
1388  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
1389              inset 0 1px 1px hsla(0,0%,0%,.15),
1390              inset 0 -1px 0 hsla(0,0%,100%,.05),
1391              0 1px 0 hsla(0,0%,0%,.15),
1392              0 1px 1px hsla(0,0%,0%,.1);
1393}
1394
1395.prompt > .row {
1396  display: table-row;
1397}
1398
1399.prompt > .row > * {
1400  display: table-cell;
1401}
1402
1403.prompt .toolbarField {
1404  margin: 5px 0;
1405  width: 200px;
1406}
1407
1408.prompt .toolbarField:hover,
1409.prompt .toolbarField:focus {
1410  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
1411}
1412
1413.clearBoth {
1414  clear: both;
1415}
1416
1417.fileInput {
1418  background: white;
1419  color: black;
1420  margin-top: 5px;
1421  visibility: hidden;
1422  position: fixed;
1423  right: 0;
1424  top: 0;
1425}
1426
1427#PDFBug {
1428  background: none repeat scroll 0 0 white;
1429  border: 1px solid #666666;
1430  position: fixed;
1431  top: 32px;
1432  right: 0;
1433  bottom: 0;
1434  font-size: 10px;
1435  padding: 0;
1436  width: 300px;
1437}
1438#PDFBug .controls {
1439    background:#EEEEEE;
1440    border-bottom: 1px solid #666666;
1441    padding: 3px;
1442}
1443#PDFBug .panels {
1444  bottom: 0;
1445  left: 0;
1446  overflow: auto;
1447  position: absolute;
1448  right: 0;
1449  top: 27px;
1450}
1451#PDFBug button.active {
1452  font-weight: bold;
1453}
1454.debuggerShowText {
1455  background: none repeat scroll 0 0 yellow;
1456  color: blue;
1457  opacity: 0.3;
1458}
1459.debuggerHideText:hover {
1460  background: none repeat scroll 0 0 yellow;
1461  opacity: 0.3;
1462}
1463#PDFBug .stats {
1464  font-family: courier;
1465  font-size: 10px;
1466  white-space: pre;
1467}
1468#PDFBug .stats .title {
1469    font-weight: bold;
1470}
1471#PDFBug table {
1472  font-size: 10px;
1473}
1474
1475#viewer.textLayer-visible .textLayer > div,
1476#viewer.textLayer-hover .textLayer > div:hover {
1477  background-color: white;
1478  color: black;
1479}
1480
1481#viewer.textLayer-shadow .textLayer > div {
1482  background-color: rgba(255,255,255, .6);
1483  color: black;
1484}
1485
1486.grab-to-pan-grab * {
1487  cursor: url("images/grab.cur"), move !important;
1488  cursor: -webkit-grab !important;
1489  cursor: -moz-grab !important;
1490  cursor: grab !important;
1491}
1492.grab-to-pan-grabbing,
1493.grab-to-pan-grabbing * {
1494  cursor: url("images/grabbing.cur"), move !important;
1495  cursor: -webkit-grabbing !important;
1496  cursor: -moz-grabbing !important;
1497  cursor: grabbing !important;
1498}
1499.grab-to-pan-grab input,
1500.grab-to-pan-grab textarea,
1501.grab-to-pan-grab button,
1502.grab-to-pan-grab button *,
1503.grab-to-pan-grab select,
1504.grab-to-pan-grab option {
1505  cursor: auto !important;
1506}
1507.grab-to-pan-grab a[href],
1508.grab-to-pan-grab a[href] * {
1509  cursor: pointer !important;
1510}
1511
1512@page {
1513  margin: 0;
1514}
1515
1516#printContainer {
1517  display: none;
1518}
1519
1520@media print {
1521  /* General rules for printing. */
1522  body {
1523    background: transparent none;
1524  }
1525
1526  /* Rules for browsers that don't support mozPrintCallback. */
1527  #sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
1528    display: none;
1529  }
1530  #viewerContainer {
1531    overflow: visible;
1532  }
1533
1534  #mainContainer, #viewerContainer, .page, .page canvas {
1535    position: static;
1536    padding: 0;
1537    margin: 0;
1538  }
1539
1540  .page {
1541    float: left;
1542    display: none;
1543    border: none;
1544    box-shadow: none;
1545  }
1546
1547  .page[data-loaded] {
1548    display: block;
1549  }
1550
1551  .fileInput {
1552    display: none;
1553  }
1554
1555  /* Rules for browsers that support mozPrintCallback */
1556  body[data-mozPrintCallback] #outerContainer {
1557    display: none;
1558  }
1559  body[data-mozPrintCallback] #printContainer {
1560    display: block;
1561  }
1562  #printContainer canvas {
1563    position: relative;
1564    top: 0;
1565    left: 0;
1566  }
1567}
1568
1569.visibleLargeView,
1570.visibleMediumView,
1571.visibleSmallView {
1572  display: none;
1573}
1574
1575@media all and (max-width: 960px) {
1576  html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
1577  html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter {
1578    float: left;
1579    left: 205px;
1580  }
1581  html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
1582  html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter {
1583    float: right;
1584    right: 205px;
1585  }
1586}
1587
1588@media all and (max-width: 900px) {
1589  .sidebarOpen .hiddenLargeView {
1590    display: none;
1591  }
1592  .sidebarOpen .visibleLargeView {
1593    display: inherit;
1594  }
1595}
1596
1597@media all and (max-width: 860px) {
1598  .sidebarOpen .hiddenMediumView {
1599    display: none;
1600  }
1601  .sidebarOpen .visibleMediumView {
1602    display: inherit;
1603  }
1604}
1605
1606@media all and (max-width: 770px) {
1607  #sidebarContainer {
1608    top: 32px;
1609    z-index: 100;
1610  }
1611  .loadingInProgress #sidebarContainer {
1612    top: 39px;
1613  }
1614  #sidebarContent {
1615    top: 32px;
1616    background-color: hsla(0,0%,0%,.7);
1617  }
1618
1619  html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
1620    left: 0px;
1621  }
1622  html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
1623    right: 0px;
1624  }
1625
1626  html[dir='ltr'] .outerCenter {
1627    float: left;
1628    left: 205px;
1629  }
1630  html[dir='rtl'] .outerCenter {
1631    float: right;
1632    right: 205px;
1633  }
1634
1635  #outerContainer .hiddenLargeView,
1636  #outerContainer .hiddenMediumView {
1637    display: inherit;
1638  }
1639  #outerContainer .visibleLargeView,
1640  #outerContainer .visibleMediumView {
1641    display: none;
1642  }
1643}
1644
1645@media all and (max-width: 700px) {
1646  #outerContainer .hiddenLargeView {
1647    display: none;
1648  }
1649  #outerContainer .visibleLargeView {
1650    display: inherit;
1651  }
1652}
1653
1654@media all and (max-width: 660px) {
1655  #outerContainer .hiddenMediumView {
1656    display: none;
1657  }
1658  #outerContainer .visibleMediumView {
1659    display: inherit;
1660  }
1661}
1662
1663@media all and (max-width: 600px) {
1664  .hiddenSmallView {
1665    display: none;
1666  }
1667  .visibleSmallView {
1668    display: inherit;
1669  }
1670  html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
1671  html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter,
1672  html[dir='ltr'] .outerCenter {
1673    left: 156px;
1674  }
1675  html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
1676  html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter,
1677  html[dir='rtl'] .outerCenter {
1678    right: 156px;
1679  }
1680  .toolbarButtonSpacer {
1681    width: 0;
1682  }
1683}
1684
1685@media all and (max-width: 510px) {
1686  #scaleSelectContainer, #pageNumberLabel {
1687    display: none;
1688  }
1689}
1690
1691