/webportal/src/main/webapp/css/map.css

  1html, body {
  2
  3    font-family: arial, Helvetica, Arial, sans-serif;
  4    font-size: 0.85em;
  5    margin: 0px;
  6    background-color: #7391ad;
  7    height:100%;
  8}
  9
 10h2 { font-size: 20px; font-family:'Arial Narrow',Arial,Helvetica,sans-serif; font-weight: normal; }
 11
 12/*
 13h2 { color:#3B6E8F; font-size: 16px; font-weight: bold;}
 14h3 { color:#3B6E8F; font-size: 14px; font-weight: bold; margin-bottom:2px;margin-top:0px;}
 15h4 { color:#3B6E8F; font-size: 12px;  margin: 0px 2px;}
 16h5 { color:#3B6E8F; font-size: 11px;  margin: 0px 2px;}
 17h6 { color:#3B6E8F; font-size: 11px;  margin: 0px 2px; display:inline;	}
 18*/
 19
 20a {
 21    color: black;
 22}
 23a img{
 24    border: none;
 25}
 26
 27a:hover{
 28    color: grey;
 29}
 30a[rel="external"], a.external {
 31    white-space: nowrap;
 32    padding-right: 15px;
 33    background: url(../img/extlink.gif) no-repeat 100% 50%;
 34    zoom: 1;
 35}
 36
 37table.featureInfo, table.featureInfo td, table.featureInfo th {
 38    border:1px solid #ddd;
 39    border-collapse:collapse;
 40    margin:0;
 41    padding:0;
 42    font-size: 90%;
 43    padding:.2em .1em;
 44}
 45table.featureInfo th {
 46    padding:.2em .2em;
 47    font-weight:bold;
 48    background:#eee;
 49}
 50table.featureInfo td{
 51    background:#fff;
 52}
 53table.featureInfo tr.odd td{
 54    background:#eee;
 55}
 56table.featureInfo caption{
 57    text-align:left;
 58    font-size:100%;
 59    font-weight:bold;
 60    text-transform:uppercase;
 61    padding:.2em .2em;
 62}
 63
 64
 65.extlink {
 66    margin-left: 2px;
 67}
 68hr {
 69    width: 80%;
 70    color:#7391ad;
 71    background: #fff url(../img/borderLine.gif) no-repeat center bottom;
 72    margin: 8px auto;
 73    height: 1px;
 74    border: 0 none;
 75}
 76.error {
 77
 78    color: #f71bbc;
 79    font-weight: bold;
 80}
 81
 82
 83
 84#mapdiv {
 85    position: absolute;
 86    z-index: 1;
 87    height: 100%;
 88    width:100%;
 89}
 90
 91
 92.topdrop  {
 93    background-image:url(../img/mapshadow.png);
 94    background-position:left top;
 95    background-repeat:repeat-x;
 96    z-index: 100;
 97    width: 100%;
 98    height:10px;
 99    position: absolute;
100}
101
102
103
104.leftdrop  {
105    background-image:url(../img/leftshadow.png);
106    background-position:left top;
107    background-repeat:repeat-y;
108    z-index: 101;
109    width:10px ;
110    height:100%;
111    position: absolute;
112}
113
114
115
116#mapscale {
117    width: 90px;
118    z-index: 3;
119    position: relative;
120    float: left;
121    color: white;
122}
123#mapcoords {
124    width: 90px;
125    z-index: 4;
126    position: relative;
127    float: right;
128    color: white;
129    background: inherit;
130}
131#mapcoords b{
132    background: none;
133}
134
135#mapinfo {
136    bottom: 20px;
137    right: 0px; /* changing to right as it is over the google logo we can have anything over it */
138    padding: 10px 2px 10px 10px ;
139    display: block;
140    position: absolute;
141    width: 220px;
142    z-index: 3;
143    font-family: Arial;
144    font-size: smaller;
145    -moz-border-radius: 5! important;
146    border: 1px 1px 0 0;
147    background-color:#3c668d;
148    opacity: 0.5;
149}
150#layervalues {
151    position: absolute;
152    bottom: 68px! important;
153    right: 0px! important;
154    width: 220px;
155    max-height: 300px! important;
156    padding: 6px;
157    z-index: 410;
158
159    overflow: auto; 
160    background-color: #3c668d;
161    color: #fff;
162    cursor: pointer;
163    font-family: Arial;
164    font-size: x-small;
165    opacity: 0.5;
166    -moz-border-radius: 5! important;
167}
168.layervaluesMin {
169    /*height: 175px;*/
170    display: block;
171}
172.layervaluesMax {
173    /*height: 175px;*/
174    display: none;
175}
176.layervaluesDie {
177    /*height: 10px;*/
178    display: none;
179}
180#layervalues div#lheader {
181    border-bottom: 1px solid white;
182    font-size: x-small;
183}
184#layervalues .lvicons {
185    float: right;
186    font-size: smaller;
187    font-weight: bold;
188    padding: 5px 5px 2px 5px;
189    line-height: 0.5em; 
190}
191#layervalues .lvicons span a {
192    color: white;
193    text-decoration: none;
194}
195#layervalues .lvicons span a.hidden {
196    content: '∧';
197}
198#layervalues .lvicons span a.shown {
199    content: '∨';
200}
201#layervalues .lvalue {
202    padding: 2px 0; 
203}
204.ellipsis, #layervalues .lvalue div {
205    white-space: nowrap;
206    text-overflow: ellipsis;
207    -o-text-overflow: ellipsis;
208}
209#layervalues .lvalue .lname {
210    position: relative; 
211    max-width: 145px;
212    float: left;
213    clear:both;
214}
215#layervalues .lvalue .lval {
216    clear:both;
217    /*position: relative;*/
218    /*float: right;
219    width: 50px;
220    text-align: right;*/
221}
222#gmaplyrswtch {
223    top: 20px;
224    right: 0px;
225    padding: 10px 2px 10px 10px ;
226    display: none;
227    position: absolute;
228    width: 200px;
229    z-index: 3;
230    font-family: Arial;
231    font-size: smaller;
232    -moz-border-radius: 5! important;
233    border: 1px 1px 0 0;
234    background-color: transparent;
235    opacity: 1.0;
236}
237#gmaplyrswtch div {
238    background-color: white;
239    float: right;
240    margin-right: 10px;
241    padding: 5px;
242    font-size: 10px;
243    font-weight: bold;
244    color: teal; 
245    border: 2px solid black;
246    text-decoration: none;
247}
248
249#tmpres {
250    bottom: 0em;
251    left: 400px;
252    padding: 10px 15px ;
253    display: block;
254    position: absolute;
255    width: 100px;
256    z-index: 8;
257    font-family: Arial;
258    font-size: smaller;
259}
260
261/*	getfeatureinfo results 
262*/
263
264
265.getfeaturepopup_contentDiv, .olPopupContent {	
266    overflow: hidden! important;
267    cursor: default;
268    margin-top: 5px;
269    margin-left: 7px;
270}
271.olPopup {
272    height: 100%;
273}
274
275
276#featureinfoheader {	
277    clear:both;
278    margin-bottom:0;
279    padding:2px;
280    width:410px;
281}
282#featureinfostatus {
283    float:left;
284    margin:5px 3px;
285}
286#featureinfodepth {
287    float: left;
288    clear:left;
289}
290#featureinfoGeneral {
291    padding: 0px 5px 5px 5px ;
292}
293
294
295.feature {
296    margin: 2px 0px 5px 0px;
297    padding: 8px;
298    padding-right: 12px;
299    padding-top: 10px;
300    width:100%;
301    background-color: #fafafa;
302    background-image:url(../img/mapshadow.png);
303    background-position:left top;
304    background-repeat:repeat-x;
305    border: 1px solid #ddd;
306}
307.nofeature {
308    margin: 2px 0px 5px 0px;
309    padding: 5px;
310    width:100%;
311    background-color: #fafafa;
312}
313
314
315.feature ul li{
316    margin-left: 1em;
317}
318
319
320
321#featureinfocontent {
322    padding: 3px;
323    padding-top: 10px;
324    padding-left: 10px;
325    width: 420px;
326    height: 220px;
327    overflow-x: hidden;
328    overflow-y: auto;
329    position: relative;
330    top:10px;
331}
332
333
334#featureinfocontent_topborder {
335    margin-top: 10px;
336    clear: both;
337}
338#featureinfocontent_topborderimg {
339    width:100%;
340    position:absolute;
341}
342
343
344#featureinfocontent .feature {
345    width: 93%;
346
347}
348#featureinfocontent img {
349    padding: 10px 5px;
350}
351#featureinfocontent b { 
352    color:#3B6E8F;
353    font-weight: bold;
354}
355#featureinfocontent ul { 
356    margin: 5px 0px;
357    padding-left: 2px;
358    list-style-type: circle;
359}
360#featureinfocontent li { 
361    margin-left: 2px;
362    padding-left: 2px;
363    list-style-position: inside;
364}
365
366
367.block h3 {
368    border: solid 1px #cccccc;
369    background-color: #efefef;
370    padding-left: 3px;
371    width: 100%;
372}
373
374p.important {
375    color:#3c668d;
376    font-weight: bold;
377}
378
379.argodates {
380
381    font-size: .9em;
382    background-color: #ffffff;
383    padding: 2px 10px;
384}
385
386
387
388
389/* Overview Map wigit */
390.olControlOverviewMapElement {
391    background-color: #3c668d;
392}
393
394.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover, .ygtvfocus{
395    background-color: transparent;
396}
397a.ygtvlabel:hover {
398    text-decoration:underline;
399}
400
401
402div.olControlScaleLineBottom {
403    margin-top: -1;
404}
405div.olControlScaleLineTop, div.olControlScaleLineBottom {
406    border-color: white;
407}
408
409
410.olControlEditingToolbar, .olControlEditingToolbarItemInactive {
411    width: 50px;
412}
413.olControlEditingToolbar div {
414    float: left;
415}
416
417
418#navtoolbar {
419    position: absolute;
420    float: left;
421    width: 42px;
422    z-index: 1001;
423    margin-top: 250px;
424    margin-left: 9px;
425
426}
427#navtoolbar .olControlNavigationItemActive, 
428#navtoolbar .olControlNavigationItemInactive, 
429#navtoolbar .olControlZoomBoxItemActive, 
430#navtoolbar .olControlZoomBoxItemInactive,
431
432#navtoolbar .olControlEditingToolbar,
433#navtoolbar .olControlEditingToolbarItemInactive
434
435{
436    display: block;
437    background-image: url('../img/raa_y.gif');
438    height: 25px;
439}
440
441#areaTool {
442    position: absolute;
443    float: left;
444    width: 42px;
445    z-index: 1001;
446    margin-top: 300px;
447    margin-left: 9px;
448
449}
450
451#areaTool .olControlButtonItemActive {
452
453    height: 222px;
454    background-image: url("../img/draw_polygon_on.png?");
455    background-position:12px 1px;
456    background-repeat: no-repeat;
457    display: block;
458}
459#areaTool .olControlButtonItemInactive {
460    height: 222px;
461    background-image: url("../img/draw_polygon_off.png?");
462    background-position:12px 1px;
463    background-repeat: no-repeat;
464    display: block;
465}
466
467#navtoolbar .olControlDrawFeatureItemActive {
468
469    height: 22px;
470    background-image: url("../img/draw.png?");
471    background-position:12px 1px;
472    background-repeat: no-repeat;
473    display: block;
474}
475#navtoolbar .olControlDrawFeatureItemInactive {
476    display: none;
477}
478.olPopupCloseBox {
479    background:transparent url(../img/close.png) no-repeat scroll 0 0 !important;
480    margin-right: 7px;
481}
482
483.olControlZoomBoxItemActive {
484    background-position: -600px 0pt;
485}
486.olControlZoomBoxItemInactive {
487    background-position: -500px 0pt;
488}
489.olControlZoomBoxItemInactive:hover {
490    background-position: -600px 0pt;
491}
492
493.olControlNavigationItemActive {
494    background-position: -800px 0pt;
495}
496.olControlNavigationItemInactive {
497    background-position: -700px 0pt;
498}
499.olControlNavigationItemInactive:hover {
500    background-position: -800px 0pt;
501}
502
503
504
505#controlPanZoom {
506    position: absolute;
507    margin-left: 5px;
508    width: 42px;
509    z-index: 1000;
510}
511
512
513
514
515#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panup,
516#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panright,
517#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_pandown,
518#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panleft,
519#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomin,
520#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomout
521
522{
523    background-repeat: no-repeat;
524    background-image: url('../img/raa_y.gif');
525    width: 23px! important;
526    height: 22px! important;
527    cursor: pointer;
528}
529
530#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panup img,
531#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_pandown img,
532#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panleft img,
533#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panright img,
534#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomin img,
535#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomout img,
536#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_Map_8 img
537{
538    display: none;
539}
540
541#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomin
542{
543    top: 98px! important;
544    left: 11px! important;
545    background-position: -1900px 0;
546}
547
548#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomin:hover
549{
550    background-position: -2000px 0;
551}
552
553#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomout
554{
555    /*top: 219px! important;*/
556    top: 319px! important;
557    left: 11px! important;
558    background-position: -2100px 0;
559}
560
561#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_zoomout:hover
562{
563    background-position: -2200px 0;
564}
565#controlPanZoom  #OpenLayers\002E Control\002E PanZoomBar_2_OpenLayers\002E Map_8 img
566{
567    display: none;
568}
569
570#controlPanZoom #OpenLayers_Control_PanZoomBar_ZoombarOpenLayers\002E Map_8
571{
572    top: 119px! important;
573    left: 11px! important;
574    background: url('../img/panelPanZoom.gif') no-repeat 0 0! important;
575    width: 21px! important;
576    /*height: 120px! important;*/
577    height: 200px! important;
578}
579
580
581
582#controlPanZoom  #OpenLayers\002E Control\002E PanZoomBar_2_OpenLayers\002E Map_8
583{
584    left: 0px;
585    z-index: 99;
586    background-repeat: no-repeat;
587    background-image: url('../img/raa_y.gif');
588    background-position: -2300px 0;
589    width: 30px;
590    height: 10px;
591    margin: 17px 6px 3px 0px;
592    padding: 3px;
593}
594
595#controlPanZoom  #OpenLayers\002E Control\002E PanZoomBar_2_OpenLayers\002E Map_8:hover
596{
597    background-position: -2400px 0;
598}
599
600
601#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panup
602{
603    background-position: -1100px 0;
604    z-index: 110;
605    top: 7px! important;
606    left: 11px! important;
607}
608
609#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panup:hover
610{
611    background-position: -1200px 0;
612}
613
614#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_pandown
615{
616    background-position: -1300px 0;
617    z-index: 110;
618    top: 47px! important;
619    left: 11px! important;
620}
621
622#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_pandown:hover
623{
624    background-position: -1400px 0;
625}
626
627#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panleft
628{
629    background-position: -1500px 0;
630    z-index: 100;
631    top: 27px! important;
632    left: 0! important;
633}
634
635#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panleft:hover
636{
637    background-position: -1600px 0;
638}
639
640#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panright
641{
642    background-position: -1700px 0;
643    z-index: 100;
644    top: 27px! important;
645    left: 22px! important;
646}
647
648#controlPanZoom #OpenLayers\002E Control\002E PanZoomBar_2_panright:hover
649{
650    background-position: -1800px 0;
651}
652
653
654
655.olControlOverviewMapElement
656{
657    position: absolute! important;
658    bottom: 0! important;
659    right: 0! important;
660    _bottom: -1px! important;
661    _right: -1px! important;
662    background: #3c668d! important;
663    -moz-border-radius: 5! important;    
664}
665
666.olControlOverviewMapExtentRectangle
667{
668    border: 1px solid #e89c14! important;
669    margin: 0! important;
670    padding: 0! important;
671}
672
673#layerswitch {
674    position: static;
675    clear: both;
676}
677.olControlLayerSwitcher {	
678    display: none;
679}
680
681/* hide it till positioned in style.css */
682.olControlOverviewMapMaximizeButton {
683
684    visibility : hidden;
685}
686
687.olFramedCloudPopupContent {
688    height: 250px;
689}
690
691#zoomtolocation {
692    position: absolute;
693    background-repeat: no-repeat;
694    background-image: url('../img/74-location.png');
695    width: 16px! important;
696    height: 16px! important;
697    cursor: pointer;
698
699    z-index: 110;
700    top: 80px! important;
701    left: 22px! important;
702}
703
704#hoverTool {
705    position: absolute;
706    background-repeat: no-repeat;
707    background-image: url('../img/overview_replacement_off.gif');
708    width: 16px! important;
709    height: 16px! important;
710    cursor: pointer;
711
712    z-index: 110;
713    top: 350px! important;
714    left: 22px! important;
715    
716    display: none;
717}
718#nearestTool {
719    position: absolute;
720    background-repeat: no-repeat;
721    background-image: url('../img/overview_replacement_off.gif');
722    width: 16px! important;
723    height: 16px! important;
724    cursor: pointer;
725
726    z-index: 110;
727    top: 370px! important;
728    left: 22px! important;
729}
730
731#featureTool {
732    position: absolute;
733    background-repeat: no-repeat;
734    background-image: url('../img/overview_replacement_off.gif');
735    width: 16px! important;
736    height: 16px! important;
737    cursor: pointer;
738
739    z-index: 110;
740    top: 370px! important;
741    left: 22px! important;
742}
743
744#hoverOutput {
745    position: absolute;
746    width: 500px! important;
747    height: 80px! important;
748    cursor: pointer;
749
750    z-index: 110;
751    top: 350px! important;
752    left: 42px! important;
753}
754
755#radiusDisplay {
756    position: absolute;
757    padding: 10px; 
758    background-color: rgba(250,245,175,0.5);
759    width: 350px! important;
760    height: 30px! important;
761    cursor: pointer;
762
763    z-index: 410;
764    top: 0px! important;
765    left: 60px! important;
766
767    font-family: verdana;
768    font-size: 20px;
769    text-align: center;
770
771    display: none; 
772}
773
774#addPanoramio {
775    position: absolute;
776    background-repeat: no-repeat;
777    /*background-image: url('http://www.gisandchips.org/demos/j3m/panoramio/panoramio-marker.png');*/
778    /*background-image: url('../img/panoramio-marker-off.png');*/
779    width: 16px! important;
780    height: 16px! important;
781    cursor: pointer;
782
783    z-index: 110;
784    top: 350px! important;
785    left: 23px! important;
786}
787
788.imagesOn {
789    background-image: url('../img/images_on.png');
790}
791.imagesOff {
792    background-image: url('../img/images_off.png');
793}
794
795.olLayerGooglePoweredBy {display: none;}
796.z-loading {
797    left: 45% !important;
798    top: 50% !important;
799    vertical-align: middle;
800
801    background-color: #E3E3E3;
802    border: 1px solid #C7C7C7;
803    cursor: wait;
804    left: 0;
805    padding: 3px;
806    position: absolute;
807    top: 0;
808    white-space: nowrap;
809    z-index: 31000;
810
811    font-family: arial,sans-serif;
812    font-size: 12px;
813    font-weight: normal;
814
815    display:none;
816}
817.z-loading-indicator {
818    background-color: #FFFFFF;
819    border: 1px solid #C7C7C7;
820    color: #102B6D;
821    padding: 6px;
822    white-space: nowrap;
823}
824.z-apply-loading-icon, .z-loading-icon, .z-renderdefer {
825    background: url("/webportal/zkau/web/da1ccf7c/zk/img/progress4.gif") no-repeat scroll center center transparent;
826    height: 16px;
827    width: 16px;
828    display: inline-block;
829    vertical-align: top;
830}
831
832#sppopup2 { line-height: 16px;}