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

http://alageospatialportal.googlecode.com/ · CSS · 832 lines · 686 code · 124 blank · 22 comment · 0 complexity · ef65d22ab25683339a883f826d360b5f MD5 · raw file

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