1/*****************************************************************************
2 *
3 * style.css - NagVis default theme stylesheet
4 *
5 * Copyright (c) 2004-2014 NagVis Project (Contact: info@nagvis.org)
6 *
7 * License:
8 *
9 * This program is free software; you can redistribute it and/or modify
10 * it under the terms of the GNU General Public License version 2 as
11 * published by the Free Software Foundation.
12 *
13 * This program is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16 * GNU General Public License for more details.
17 *
18 * You should have received a copy of the GNU General Public License
19 * along with this program; if not, write to the Free Software
20 * Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
21 *
22 *****************************************************************************/
23
24body, table, th, td {
25    margin: 0;
26    padding: 0;
27
28    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
29    text-decoration: none;
30
31    color: black;
32    font-size: 9pt;
33}
34
35span {font-size: 9pt;}
36
37html,body{height:100%;}
38
39table {width:100%}
40div {margin:0;padding:0}
41img {border:0}
42
43/* Global DIVs */
44.main {margin:0;padding:0;background-color:white;color:black}
45.header {position:fixed;top:0;left:0;padding:0;z-index:100;min-width:1000px;}
46.headerspacer {width:100%}
47div#map, div#overview, div#url {
48    position: absolute;
49    top: 0;
50    left: 0;
51    right: 0;
52    bottom: 0;
53    z-index:98
54}
55
56iframe#url {
57    width: 100%;
58    height: 100%;
59}
60
61/* Background images */
62#backgroundImage {
63    position: absolute;
64    top: 0;
65    left: 0;
66    z-index: 0;
67}
68
69/* icons */
70.icondiv {
71    position : absolute;
72    border : 0;
73    z-index : 1;
74}
75
76.icon {
77    cursor: pointer;
78}
79
80.dragger .icon {
81    cursor: move;
82}
83
84/* lines */
85.line {
86    position : absolute;
87}
88
89.jsline div {
90    z-index: 10;
91}
92
93a.linelink {
94  color: #000000;
95}
96
97/* textbox (object on map) */
98.box {
99    position: absolute;
100    z-index : 1;
101    border: 1px #000 solid;
102    padding: 0 2px;
103    /* tried to solve the off-screen text wrap. This fixes the problem but
104     * results no no linebreak at all: white-space:nowrap; */
105}
106
107/* control styles */
108div.control {
109    position: absolute;
110}
111
112div.control.togglemid {
113    cursor: pointer;
114}
115
116.dragger {
117    cursor: move;
118}
119
120/* new overview page */
121
122div.infopage h2 {
123    margin: 20px 10px 0 10px;
124}
125
126div.infobox {
127    margin: 0 auto;
128    padding: 10px;
129    overflow: hidden;
130}
131
132div.infopage div.clear {
133    clear: left;
134}
135
136div.infobox div.mapobj {
137    float: left;
138    width: 200px;
139    height: 36px;
140    margin: 1px;
141    background-color: #fbfbfb;
142    border: 1px solid #e5e5e5;
143    overflow: hidden;
144}
145
146div.infobox div.mapobj h3,
147div.infobox table.rotation h3 {
148    color: #43B3CF;
149    margin-top: 2px;
150    margin-bottom: 2px;
151    margin-left: 2px;
152    font-weight: normal;
153    font-size: 1.0em;
154}
155
156div.infobox div.mapobj img.state {
157    margin: 2px;
158}
159
160div.infobox table.rotation {
161    width: 600px;
162    margin: 2px auto;
163    border-collapse:collapse;
164    background-color: #fbfbfb;
165}
166
167div.infobox table.rotation td.title {
168    width: 300px;
169}
170
171div.infobox table.rotation td {
172    padding: 4px;
173    border: 1px solid #e5e5e5;
174    vertical-align: top;
175}
176
177/* Style on info page */
178div.infopage > table {
179    margin: auto;
180    margin-top: 20px;
181    margin-bottom: 25px;
182
183    width: 800px;
184
185    background-color: #fbfbfb;
186    border-collapse:collapse;
187}
188
189div.infopage > table td, div.infopage > table th {
190    border: 1px solid #e5e5e5;
191    padding: 4px;
192
193    color: #43B3CF;
194    vertical-align: top;
195}
196
197div.infopage > table th {
198    text-align: center;
199}
200
201div.infopage > table th.head {
202    font-size: 1.3em;
203}
204
205div.infopage > div.map.disabled h3  {
206    color: #a4a4a4;
207}
208
209div.infopage > div.map.error h3  {
210    color: #ff4f4f;
211}
212
213div.infopage a {
214    display: block;
215    width: 100%;
216    height: 100%;
217    color: #43b3cf;
218    text-decoration: none;
219}
220
221div.infopage a:hover {
222    color: #789D2B;
223    text-decoration: none;
224    opacity: .5;
225}
226
227/**
228 *
229 *  Status message dialog
230 *
231 */
232
233#statusMessage {
234  position: absolute;
235  display: none;
236  top: -1px;
237  left: 200px;
238  right: 200px;
239  z-index: 5000;
240  opacity: 0.85;
241  font-size: 1.5em;
242}
243
244#statusMessage div {
245  width: 400px;
246  margin: 0px auto;
247  height: 24px;
248  min-height: 24px;
249  padding: 8px 10px 8px 46px;
250}
251
252#statusMessage div.notice {
253  background: url('../../frontend/nagvis-js/images/internal/info.png') 6px 3px no-repeat;
254  background-color: #fbfbfb;
255  border: 1px solid #e5e5e5;
256}
257
258#statusMessage div.error,
259#statusMessage div.warning {
260  background: url('../../frontend/nagvis-js/images/internal/warning.png') 6px 3px no-repeat;
261  background-color: #EF9398;
262  border: 1px solid #DC5757;
263}
264
265#statusMessage div.loading {
266  background: url('../../frontend/nagvis-js/images/internal/loading.gif') 6px 3px no-repeat;
267  background-color: #fbfbfb;
268  border: 1px solid #e5e5e5;
269}
270
271/*
272 * popupWindow css
273 */
274
275div#popupWindow {
276    position: absolute;
277    z-index: 2000;
278
279    font-weight: normal;
280    -moz-border-radius: 11px;
281    -khtml-border-radius: 11px;
282    -webkit-border-radius: 11px;
283    border-radius: 5px;
284    background: #fff;
285    border: 1px solid #e5e5e5;
286    -moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
287    -webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
288    -khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
289    box-shadow: rgba(200,200,200,1) 0 4px 18px;
290}
291
292div#popupWindow div.close {
293    width: 20px;
294    height: 20px;
295    float: right;
296    font-size: 13px;
297    border: 1px dotted #c0c0c0;
298    text-align: center;
299    margin-top: 8px;
300    margin-right: 8px;
301    cursor: pointer;
302    color: #555;
303}
304
305/* Content styling */
306#popupWindowContent {
307    padding: 0 16px 16px 16px;
308    color: #43B3CF;
309}
310
311#popupWindowContent div.error {
312    background-color: #febabb;
313    border: 1px solid #d5091b;
314    color: #d5091b;
315    border-radius: 5px;
316    margin: 2px 0;
317    padding: 3px;
318    white-space: normal;
319}
320
321#popupWindowContent div.error code,
322#popupWindowContent div.error pre {
323    display: block;
324    overflow: scroll;
325    background-color: #fff;
326    color: #000;
327    margin: 2px;
328    padding: 2px;
329}
330
331#popupWindowContent div.error div.details {
332    margin-top: 5px;
333    text-align: left;
334    font-size: 0.8em;
335}
336
337#popupWindowContent table.mytable {
338    width: 100%;
339    padding: 0;
340    margin: 0;
341}
342
343#popupWindowContent table.mytable th,
344#popupWindowContent table.mytable td {
345    padding: 0;
346    margin: 0;
347    border: 0;
348    color: #43B3CF;
349}
350
351#popupWindowContent table.mytable td {
352    vertical-align: middle;
353}
354
355#popupWindowContent label span {
356    vertical-align: middle;
357}
358
359#popupWindowContent p {
360    margin-bottom: 12px;
361}
362
363/* title */
364div.infopage h2,
365div#popupWindow h1,
366#popupWindowContent h2 {
367    text-align: left;
368    padding: 3px 10px 2px 2px;
369    line-height:20px;
370    font-weight:normal;
371    border-bottom: 1px solid #7EA434;
372    color: #43B3CF;
373}
374
375div#popupWindow h1 {
376    font-weight: normal;
377    margin: 5px;
378    padding: 5px 10px;
379    font-size: 1.5em;
380
381    cursor: move;
382    -webkit-touch-callout: none;
383    -webkit-user-select: none;
384    -khtml-user-select: none;
385    -moz-user-select: none;
386    -ms-user-select: none;
387    user-select: none;
388}
389
390#popupWindowContent h2 {
391    margin: 5px 0;
392}
393
394/* cat */
395#popupWindowContent table.mytable th.cat {font-size: 1.2em;}
396
397/* Child rows */
398#popupWindowContent table.mytable tr.child-row td.tdlabel {padding-left: 10px;}
399
400/* td labels */
401#popupWindowContent table.mytable td.tdlabel {width: 140px;}
402#popupWindowContent table.mytable td.tdbox {width: 25px;}
403#popupWindowContent table.mytable td.tdfield {
404    overflow: hidden;
405    text-overflow: ellipsis;
406}
407#popupWindowContent input[type="radio"] {
408    vertical-align: middle;
409}
410#popupWindowContent table.mytable tr td.tdlabel input {
411    width: 140x;
412}
413#popupWindowContent table.mytable tr td.tdfield textarea,
414#popupWindowContent table.mytable tr td.tdfield select {
415    width: 99%;
416}
417#popupWindowContent table.mytable tr td.tdfield textarea {
418    height: 250px;
419}
420#popupWindowContent table.mytable tr td.tdfield input[type="checkbox"] {
421    width: auto;
422    margin-right:2px;
423}
424#popupWindowContent table.mytable tr td.tdfield span {
425    word-wrap: break-word;
426}
427#popupWindowContent table.mytable tr td.tdfield div.picker input {
428    width:140px;
429    margin-right:3px;
430}
431#popupWindowContent table.mytable tr td.tdfield div.picker img {
432    vertical-align: middle;
433}
434#popupWindowContent table.mytable tr td.tdfield input.err,
435#popupWindowContent table.mytable tr td.tdfield select.err {
436    border-color: #ff4f4f;
437}
438
439#popupWindowContent table.mytable tr td.tdfield div.err {
440    margin: 0;
441}
442
443#popupWindowContent .submit {
444    /*font-weight: bold;
445    color: #43b3cf;
446    vertical-align: middle;*/
447
448    padding: 3px 10px;
449    background-color: #fbfbfb;
450    border: 1px solid #e5e5e5;
451    border-width: 1px;
452    border-style: solid;
453    -moz-border-radius: 5px;
454    -khtml-border-radius: 5px;
455    -webkit-border-radius: 5px;
456    border-radius: 5px;
457    cursor: pointer;
458    text-decoration: none;
459
460    margin: 2px auto;
461    display: block;
462}
463
464#popupWindowContent table.mytable tr td.err div {
465    padding: 3px;
466    margin: 0 0 0 20%;
467    width: 80%;
468    border: 1px solid #ff4f4f;
469    background-color: #ffdddd;
470    color: #000000;
471    -moz-border-radius: 5px;
472    -khtml-border-radius: 5px;
473    -webkit-border-radius: 5px;
474    border-radius: 5px;
475}
476
477#popupWindowContent div.success,
478#popupWindowContent div.err {
479    padding: 5px 8px;
480    margin: 10px;
481    border: 1px solid #00ff00;
482    background-color: #ddffdd;
483    color: #000000;
484    -moz-border-radius: 5px;
485    -khtml-border-radius: 5px;
486    -webkit-border-radius: 5px;
487    border-radius: 5px;
488}
489
490#popupWindowContent div.err {
491    border: 1px solid #ff4f4f;
492    background-color: #FFC9C9;
493    color: #000;
494}
495
496/* Popup window forms */
497
498#popupWindowContent table.perms td.perm {
499    text-align: center;
500}
501
502#popupWindowContent a {color:#43B3CF;text-decoration:none;}
503#popupWindowContent a:hover {color:#779D2A;text-decoration:underline}
504
505#popupWindowContent input, select {
506    color: #555555;
507    background-color: #fbfbfb;
508    border: 1px solid #e5e5e5;
509}
510
511/* Header styling */
512.header {
513    background-color: #fbfbfb;
514    border-bottom: 1px solid #ddd;
515    box-shadow: 0 3px 6px #ddd;
516    color: #43B3CF;
517    height: 31px;
518    width: 100%;
519}
520
521#headershow {
522    display: none;
523    width: 9px;
524    min-width: 9px;
525    height: 31px;
526    background-image: none;
527    background-color: #fbfbfb;
528    border: 1px solid #dddddd;
529    border-top: none;
530    border-bottom-right-radius: 4px;
531}
532
533.header ul.head {
534    margin: 0;
535    padding: 0;
536    height: 31px;
537    float:left;
538    list-style:none;
539}
540
541.header ul.right {float:right}
542
543.header ul.head li {
544    margin: 0;
545    padding: 0;
546
547    height: 100%;
548
549    float: left;
550}
551
552.header ul.head li.toggle a,
553#headershow a {
554    display: block;
555    margin-left: 2px;
556    height: 100%;
557    line-height: 32px;
558    text-decoration: none;
559    color: #43B3CF;
560}
561
562#headershow a {
563    margin-left: 0;
564}
565
566#sidetoggle {
567    position: absolute;
568    left: 50px;
569    top: 31px;
570    background-color: #fbfbfb;
571    border: 1px solid #dddddd;
572    border-top: none;
573    border-bottom-left-radius: 4px;
574    border-bottom-right-radius: 4px;
575    width: 100px;
576    height: 5px;
577    text-align: center;
578}
579
580#sidetoggle:hover {
581    cursor:pointer;
582    background-color: #ffffff;
583}
584
585#sidetoggle img {
586    width: 20px;
587    height: 3px;
588    margin-top: 1px;
589}
590
591.header ul.head li.logo {
592    padding-left: 5px;
593    padding-right: 5px;
594    margin-top: 2px;
595}
596
597.header ul.head li.logo img {
598    height: 25px;
599    width: 97px;
600}
601
602.header ul.head li.logo a, .header ul.head li.logo a:active {
603    margin: 0;
604    padding: 0;
605    width: 100%;
606    height: 100%;
607
608    display: block;
609    text-decoration: none;
610}
611
612.header ul li > span {
613    margin:0;
614    height:31px;
615    line-height:32px;
616    font-weight:normal;
617    padding: 0 8px;
618}
619
620#editIndicator span {width:89px;color:#ff4f4f}
621.dropdown span, .header div#refreshCounterHead {
622    display:block;
623    margin:0;
624    padding:0;
625    height:31px;
626    padding-left:8px;
627    padding-right:8px;
628    line-height: 32px;
629    width:auto;
630    font-weight:normal;
631    cursor:pointer;
632}
633.dropdown span:hover {
634    background-color: #ffffff;
635}
636.dropdown img {vertical-align:middle;margin-left:10px}
637.dropdown ul {margin:0;padding:0;list-style:none;width:205px;z-index:100;position:absolute;top:31px;display:none}
638.dropdown li {margin:0;padding:0}
639.dropdown li.current a{color:#000000}
640.dropdown li.lvl2 a{padding-left:10px;width:188px}
641.dropdown li.lvl3 a{padding-left:20px;width:178px}
642.dropdown li.lvl4 a{padding-left:30px;width:168px}
643.dropdown li.lvl5 a{padding-left:40px;width:158px}
644.dropdown li.lvl5 a{padding-left:50px;width:148px}
645.dropdown a, .dropdown a:active, .dropdown li.spacer, .dropdown dl.subdropdown dt {
646    display: block;
647    width: 193px;
648    background: #fbfbfb;
649    margin: 0;
650    color: #43B3CF;
651    text-decoration: none;
652    border-left: 1px solid #e5e5e5;
653    border-right: 1px solid #e5e5e5;
654    padding:5px;
655    z-index:100
656}
657.dropdown a:visited {color:#43B3CF;}
658.dropdown a.left, .dropdown a.left:active {float:left;width:152px;border-right:0}
659.dropdown a.right, .dropdown a.right:active {float:right;width:30px;border-left:1px solid #43B3CF}
660.dropdown a.error, .dropdown a.error:active, .dropdown a.error:visited {color:#ff4f4f}
661.dropdown a:hover {
662    background-color: #ffffff;
663    color: #789D2B;
664    text-decoration: none;
665}
666.dropdown a.submenu-link:after {float:right;content:">"}
667.dropdown li.spacer {width:203px}
668.dropdown li.spacer hr {
669    border: 0;
670    height: 1px;
671    width: 95%;
672    background-color: #e5e5e5;
673}
674.dropdown .underline {border-bottom:1px solid #e5e5e5}
675.subdropdown {position:relative;}
676.subdropdown .topline {border-top:1px solid #e5e5e5}
677.subdropdown .underline {border-bottom:1px solid #e5e5e5}
678
679.dropdown ul#views-ddcontent {max-height:690px;overflow-y:auto;overflow-x:hidden}
680
681/* Styling for the sidebar */
682#sidebar {
683    position:absolute;
684    top:0;
685    left:0;
686    bottom:0;
687    width:200px;
688    z-index:99;
689    display:none;
690    background-color:#fbfbfb;
691    text-decoration:none;
692    padding-top:10px;
693    border-right:1px solid #e5e5e5;
694}
695#sidebar ul {margin:0;padding:0;display:block;list-style:none}
696#sidebar li {margin:0;padding:0;line-height:25px;}
697#sidebar li.spacerbottom {border-bottom:1px dotted #e5e5e5}
698#sidebar li.spacertop {border-top:1px dotted #e5e5e5}
699#sidebar li > div {width:200px;clear:both;}
700#sidebar li > div a {padding-left:20px;}
701
702#sidebar li.parent div {}
703#sidebar li.parent a.title {width:160px;}
704#sidebar li.parent a.open {width:20px;padding:0;text-align:center;float:right}
705#sidebar li.parent.lvl1 a.title{padding-left:30px;width:150px;background-position:10px 0;}
706#sidebar li.parent.lvl2 a.title{padding-left:40px;width:140px;background-position:20px 0;}
707#sidebar li.parent.lvl3 a.title{padding-left:50px;width:130px;background-position:30px 0;}
708#sidebar li.parent.lvl4 a.title{padding-left:60px;width:120px;background-position:40px 0;}
709#sidebar li.parent.lvl5 a.title{padding-left:70px;width:110px;background-position:50px 0;}
710#sidebar li.parent.lvl6 a.title{padding-left:80px;width:100px;background-position:60px 0;}
711
712#sidebar li a {display:block;width:180px;color:#43B3CF;text-decoration:none;}
713#sidebar li.lvl2 a{padding-left:30px;width:170px}
714#sidebar li.lvl3 a{padding-left:40px;width:160px}
715#sidebar li.lvl4 a{padding-left:50px;width:150px}
716#sidebar li.lvl5 a{padding-left:60px;width:140px}
717#sidebar li.lvl6 a{padding-left:70px;width:130px}
718#sidebar li.open > div a.title {background: url('../images/templates/default.folder_open.gif') no-repeat left #fbfbfb;}
719#sidebar li.closed > div a.title {background: url('../images/templates/default.folder_closed.gif') no-repeat left #fbfbfb;}
720#sidebar li.current > div {font-weight: bold;}
721#sidebar li > div a:hover,
722#sidebar li > div a.title:hover {
723    background-color: #ffffff;
724    color:#779D2A
725}
726#sidebar a.error, #sidebar a.error:active, #sidebar a.error:visited {color:#ff4f4f}
727
728div.statediv {
729    display: none;
730    float: left;
731    margin-top: 9px;
732    margin-left: 5px;
733    width: 5px;
734    height: 5px;
735    border: 1px solid #000;
736}
737
738div.statediv.sOK, div.statediv.sUP {
739    display: block;
740    background-color: #00FF00;
741}
742
743div.statediv.sWARNING {
744    display: block;
745    background-color: #FFFF00;
746}
747
748div.statediv.sCRITICAL, div.statediv.sDOWN, div.statediv.sUNREACHABLE {
749    display: block;
750    background-color: #ff0000;
751}
752
753div.statediv.sUNKNOWN {
754    display: block;
755    background-color: #FFCC66;
756}
757
758div.statediv.sERROR {
759    display: block;
760    background-color: #519EFF;
761}
762
763div.statediv.sPENDING, div.statediv.sUNCHECKED {
764    display: block;
765    background-color: #C0C0C0;
766}
767
768div.statediv.sACK:not(.sDOWNTIME) {
769    border-style: dotted;
770    clip-path: polygon(100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
771}
772div.statediv.sDOWNTIME:not(.sACK) {
773    border-style: dotted;
774    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
775}
776div.statediv.sACK.sDOWNTIME {
777    border-style: dotted;
778    clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
779}
780
781/*
782 * Frontend eventlog styling
783 */
784
785#eventlog {
786	position: fixed;
787	bottom: 0px;
788	right: 20px;
789	z-index: 1000;
790
791	width: 400px;
792	height: 70px;
793
794	background-color: #d0d0d0;
795	border: 1px solid #000000;
796	border-bottom: 0;
797
798	opacity:0.4;
799	/*filter:alpha(opacity=40);*/
800
801	padding: 2px;
802	font-size: 0.8em;
803}
804
805#eventlogControl {
806	position: fixed;
807	bottom: 75px;
808	right: 20px;
809	z-index: 1001;
810
811	width: 10px;
812	height: 10px;
813
814	background-color: #d0d0d0;
815	border: 1px solid #000000;
816	border-bottom: 0;
817
818	opacity:0.4;
819	/*filter:alpha(opacity=40);*/
820
821	padding: 2px;
822
823	font-size: 0.8em;
824}
825
826/**
827 * The zoom bar
828 */
829
830div#zoombar {
831    position: absolute;
832    width: 20px;
833    height: 145px;
834    z-index: 98;
835    left: 10px;
836    top: 40px;
837}
838
839div#zoombar a {
840    display: block;
841    width: 100%;
842    height: 20px;
843
844    background-color: #fbfbfb;
845    border: 1px solid #e5e5e5;
846    border-radius: 4px;
847
848    text-align: center;
849    vertical-align: middle;
850    line-height: 20px;
851    color: #43B3CF;
852    font-weight: bold;
853    cursor: pointer;
854}
855div#zoombar a.minus {
856    border-bottom: none;
857}
858div#zoombar a:hover {
859    background-color: #ffffff;
860    color: #779D2A;
861}
862div#zoombar div.drag {
863    position: relative;
864    height: 100px;
865    width: 100%;
866    background-image:url('../images/templates/default.zoombar_bg.gif')
867}
868div#zoombar div.drag div {
869    position: absolute;
870    left: 3px;
871
872    width: 14px;
873    height: 6px;
874    cursor: pointer;
875
876    background-color: #fbfbfb;
877    border: 1px solid #e5e5e5;
878}
879
880input[type=checkbox] {
881    position: relative;
882    vertical-align: middle;
883    bottom: 1px;
884}
885
886/* edit main config dialog navigation (tabbing) */
887
888#popupWindowContent ul.nav {
889    list-style: none;
890    height: 21px;
891    margin: 0;
892    padding: 0;
893    border-bottom: 1px solid #e5e5e5;
894    margin-bottom: 10px;
895}
896
897#popupWindow ul.nav li {
898    float: left;
899}
900
901#popupWindow ul.nav li a {
902    display: block;
903    height: 20px;
904    padding: 0 5px;
905    margin: 0 1px;
906    line-height: 20px;
907    border: 1px solid #e5e5e5;
908    border-top-left-radius: 5px;
909    border-top-right-radius: 5px;
910}
911
912#popupWindow ul.nav li a:hover {
913    text-decoration: none;
914    color:#779D2A;
915    background-color: #fbfbfb;
916}
917
918#popupWindow ul.nav li.active a {
919    border-bottom: 1px solid #fff;
920    color: #000;
921}
922
923/* search dialog */
924
925td#popupWindow div.simple_form input#highlightInput {
926    width: 200px;
927}
928
929td#popupWindow div.simple_form .submit {
930    display: inline-block;
931    margin: 2px 10px;
932}
933
934/* ack dialog */
935
936td#popupWindow form#acknowledge input#comment {
937    width: 246px;
938    margin-left: 5px;
939}
940
941body.add, body.add .leaflet-container {
942    cursor: crosshair;
943}
944
945/* edit grid */
946div#grid div {
947    position: absolute;
948    z-index: 9;
949}
950
951div#grid div.vertical {
952    position: absolute;
953    width: 1px;
954}
955
956div#grid div.horizontal {
957    position: absolute;
958    height: 1px;
959}
960
961/* worldmap specific */
962
963/* required styles */
964
965.leaflet-map-pane,
966.leaflet-tile,
967.leaflet-marker-icon,
968.leaflet-marker-shadow,
969.leaflet-tile-pane,
970.leaflet-tile-container,
971.leaflet-overlay-pane,
972.leaflet-shadow-pane,
973.leaflet-marker-pane,
974.leaflet-popup-pane,
975.leaflet-overlay-pane svg,
976.leaflet-zoom-box,
977.leaflet-image-layer,
978.leaflet-layer {
979    position: absolute;
980    left: 0;
981    top: 0;
982    }
983.leaflet-container {
984    overflow: hidden;
985    -ms-touch-action: none;
986    }
987.leaflet-tile,
988.leaflet-marker-icon,
989.leaflet-marker-shadow {
990    -webkit-user-select: none;
991       -moz-user-select: none;
992            user-select: none;
993    -webkit-user-drag: none;
994    }
995.leaflet-marker-icon,
996.leaflet-marker-shadow {
997    display: block;
998    }
999/* map is broken in FF if you have max-width: 100% on tiles */
1000.leaflet-container img {
1001    max-width: none !important;
1002    }
1003/* stupid Android 2 doesn't understand "max-width: none" properly */
1004.leaflet-container img.leaflet-image-layer {
1005    max-width: 15000px !important;
1006    }
1007.leaflet-tile {
1008    filter: inherit;
1009    visibility: hidden;
1010    }
1011.leaflet-tile-loaded {
1012    visibility: inherit;
1013    }
1014.leaflet-zoom-box {
1015    width: 0;
1016    height: 0;
1017    }
1018/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
1019.leaflet-overlay-pane svg {
1020    -moz-user-select: none;
1021    }
1022
1023.leaflet-tile-pane    { z-index: 2; }
1024.leaflet-objects-pane { z-index: 3; }
1025.leaflet-overlay-pane { z-index: 4; }
1026.leaflet-shadow-pane  { z-index: 5; }
1027.leaflet-marker-pane  { z-index: 6; }
1028.leaflet-popup-pane   { z-index: 7; }
1029
1030.leaflet-vml-shape {
1031    width: 1px;
1032    height: 1px;
1033    }
1034.lvml {
1035    behavior: url(#default#VML);
1036    display: inline-block;
1037    position: absolute;
1038    }
1039
1040
1041/* control positioning */
1042
1043.leaflet-control {
1044    position: relative;
1045    z-index: 7;
1046    pointer-events: auto;
1047    }
1048.leaflet-top,
1049.leaflet-bottom {
1050    position: absolute;
1051    z-index: 1000;
1052    pointer-events: none;
1053    }
1054.leaflet-top {
1055    top: 0;
1056    }
1057.leaflet-right {
1058    right: 0;
1059    }
1060.leaflet-bottom {
1061    bottom: 0;
1062    }
1063.leaflet-left {
1064    left: 0;
1065    }
1066.leaflet-control {
1067    float: left;
1068    clear: both;
1069    }
1070.leaflet-right .leaflet-control {
1071    float: right;
1072    }
1073.leaflet-top .leaflet-control {
1074    margin-top: 10px;
1075    }
1076.leaflet-bottom .leaflet-control {
1077    margin-bottom: 10px;
1078    }
1079.leaflet-left .leaflet-control {
1080    margin-left: 10px;
1081    }
1082.leaflet-right .leaflet-control {
1083    margin-right: 10px;
1084    }
1085
1086
1087/* zoom and fade animations */
1088
1089.leaflet-fade-anim .leaflet-tile,
1090.leaflet-fade-anim .leaflet-popup {
1091    opacity: 0;
1092    -webkit-transition: opacity 0.2s linear;
1093       -moz-transition: opacity 0.2s linear;
1094         -o-transition: opacity 0.2s linear;
1095            transition: opacity 0.2s linear;
1096    }
1097.leaflet-fade-anim .leaflet-tile-loaded,
1098.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
1099    opacity: 1;
1100    }
1101
1102.leaflet-zoom-anim .leaflet-zoom-animated {
1103    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
1104       -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
1105         -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
1106            transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
1107    }
1108.leaflet-zoom-anim .leaflet-tile,
1109.leaflet-pan-anim .leaflet-tile,
1110.leaflet-touching .leaflet-zoom-animated {
1111    -webkit-transition: none;
1112       -moz-transition: none;
1113         -o-transition: none;
1114            transition: none;
1115    }
1116
1117.leaflet-zoom-anim .leaflet-zoom-hide {
1118    visibility: hidden;
1119    }
1120
1121
1122/* cursors */
1123
1124.leaflet-clickable {
1125    cursor: pointer;
1126    }
1127.leaflet-container {
1128    cursor: -webkit-grab;
1129    cursor:    -moz-grab;
1130    }
1131.leaflet-popup-pane,
1132.leaflet-control {
1133    cursor: auto;
1134    }
1135.leaflet-dragging .leaflet-container,
1136.leaflet-dragging .leaflet-clickable {
1137    cursor: move;
1138    cursor: -webkit-grabbing;
1139    cursor:    -moz-grabbing;
1140    }
1141
1142
1143/* visual tweaks */
1144
1145.leaflet-container {
1146    background: #ddd;
1147    outline: 0;
1148    }
1149.leaflet-container a {
1150    color: #0078A8;
1151    }
1152.leaflet-zoom-box {
1153    border: 2px dotted #38f;
1154    background: rgba(255,255,255,0.5);
1155    }
1156
1157
1158/* general typography */
1159.leaflet-container {
1160    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
1161    }
1162
1163
1164/* general toolbar styles */
1165
1166.leaflet-bar {
1167    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
1168    border-radius: 4px;
1169    }
1170.leaflet-bar a,
1171.leaflet-bar a:hover {
1172    background-color: #fff;
1173    border-bottom: 1px solid #ccc;
1174    width: 26px;
1175    height: 26px;
1176    line-height: 26px;
1177    display: block;
1178    text-align: center;
1179    text-decoration: none;
1180    color: black;
1181    }
1182.leaflet-bar a,
1183.leaflet-control-layers-toggle {
1184    background-position: 50% 50%;
1185    background-repeat: no-repeat;
1186    display: block;
1187    }
1188.leaflet-bar a:hover {
1189    background-color: #f4f4f4;
1190    }
1191.leaflet-bar a:first-child {
1192    border-top-left-radius: 4px;
1193    border-top-right-radius: 4px;
1194    }
1195.leaflet-bar a:last-child {
1196    border-bottom-left-radius: 4px;
1197    border-bottom-right-radius: 4px;
1198    border-bottom: none;
1199    }
1200.leaflet-bar a.leaflet-disabled {
1201    cursor: default;
1202    background-color: #f4f4f4;
1203    color: #bbb;
1204    }
1205
1206.leaflet-touch .leaflet-bar a {
1207    width: 30px;
1208    height: 30px;
1209    line-height: 30px;
1210    }
1211
1212
1213/* zoom control */
1214
1215.leaflet-control-zoom-in,
1216.leaflet-control-zoom-out {
1217    font: bold 18px 'Lucida Console', Monaco, monospace;
1218    text-indent: 1px;
1219    }
1220.leaflet-control-zoom-out {
1221    font-size: 20px;
1222    }
1223
1224.leaflet-touch .leaflet-control-zoom-in {
1225    font-size: 22px;
1226    }
1227.leaflet-touch .leaflet-control-zoom-out {
1228    font-size: 24px;
1229    }
1230
1231
1232/* layers control */
1233
1234.leaflet-control-layers {
1235    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
1236    background: #fff;
1237    border-radius: 5px;
1238    }
1239.leaflet-control-layers-toggle {
1240    background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers.png);
1241    width: 36px;
1242    height: 36px;
1243    }
1244.leaflet-retina .leaflet-control-layers-toggle {
1245    background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers-2x.png);
1246    background-size: 26px 26px;
1247    }
1248.leaflet-touch .leaflet-control-layers-toggle {
1249    width: 44px;
1250    height: 44px;
1251    }
1252.leaflet-control-layers .leaflet-control-layers-list,
1253.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
1254    display: none;
1255    }
1256.leaflet-control-layers-expanded .leaflet-control-layers-list {
1257    display: block;
1258    position: relative;
1259    }
1260.leaflet-control-layers-expanded {
1261    padding: 6px 10px 6px 6px;
1262    color: #333;
1263    background: #fff;
1264    }
1265.leaflet-control-layers-selector {
1266    margin-top: 2px;
1267    position: relative;
1268    top: 1px;
1269    }
1270.leaflet-control-layers label {
1271    display: block;
1272    }
1273.leaflet-control-layers-separator {
1274    height: 0;
1275    border-top: 1px solid #ddd;
1276    margin: 5px -10px 5px -6px;
1277    }
1278
1279
1280/* attribution and scale controls */
1281
1282.leaflet-container .leaflet-control-attribution {
1283    background: #fff;
1284    background: rgba(255, 255, 255, 0.7);
1285    margin: 0;
1286    }
1287.leaflet-control-attribution,
1288.leaflet-control-scale-line {
1289    padding: 0 5px;
1290    color: #333;
1291    }
1292.leaflet-control-attribution a {
1293    text-decoration: none;
1294    }
1295.leaflet-control-attribution a:hover {
1296    text-decoration: underline;
1297    }
1298.leaflet-container .leaflet-control-attribution,
1299.leaflet-container .leaflet-control-scale {
1300    font-size: 11px;
1301    }
1302.leaflet-left .leaflet-control-scale {
1303    margin-left: 5px;
1304    }
1305.leaflet-bottom .leaflet-control-scale {
1306    margin-bottom: 5px;
1307    }
1308.leaflet-control-scale-line {
1309    border: 2px solid #777;
1310    border-top: none;
1311    line-height: 1.1;
1312    padding: 2px 5px 1px;
1313    font-size: 11px;
1314    white-space: nowrap;
1315    overflow: hidden;
1316    -moz-box-sizing: content-box;
1317         box-sizing: content-box;
1318
1319    background: #fff;
1320    background: rgba(255, 255, 255, 0.5);
1321    }
1322.leaflet-control-scale-line:not(:first-child) {
1323    border-top: 2px solid #777;
1324    border-bottom: none;
1325    margin-top: -2px;
1326    }
1327.leaflet-control-scale-line:not(:first-child):not(:last-child) {
1328    border-bottom: 2px solid #777;
1329    }
1330
1331.leaflet-touch .leaflet-control-attribution,
1332.leaflet-touch .leaflet-control-layers,
1333.leaflet-touch .leaflet-bar {
1334    box-shadow: none;
1335    }
1336.leaflet-touch .leaflet-control-layers,
1337.leaflet-touch .leaflet-bar {
1338    border: 2px solid rgba(0,0,0,0.2);
1339    background-clip: padding-box;
1340    }
1341
1342
1343.leaflet-oldie .leaflet-control-zoom,
1344.leaflet-oldie .leaflet-control-layers {
1345    border: 1px solid #999;
1346    }
1347
1348
1349/* div icon */
1350
1351.leaflet-div-icon {
1352    background: #fff;
1353    border: 1px solid #666;
1354    }
1355
1356/* disable focus effect (border), needed for worldmap, but ok for whole nagvis */
1357input:focus,
1358select:focus,
1359textarea:focus,
1360button:focus,
1361a:focus,
1362div:focus {
1363    outline: none;
1364}
1365