/*Z_INDEX_BASE: { BaseLayer: 100, Overlay: 325, Popup: 750, Control: 1000 },*/

/* overflow damit man die karten nach aussenhin verschieben kann */
html, body { overflow:hidden; height:100%; width:100%; margin:0px; padding:0px; font-size:16px; font-family:Arial, Helvetica, sans-serif; }


#mainPreload, #hudPreloadBg { position:absolute; height:100%; width:100%; top:0px; background-color:white; background-image:url('../../img/metarr/metarr/hudMenu/preload.gif'); background-position:center; background-repeat:no-repeat; }
#mainPreload { z-index:2500; }

/* position:absolute wegen negative margin und z-index: khtml spezifisch. display eigenschaft muss wegen konqueror-problem leider inline beim element stehen. */
#hud, #hudBg, #hudPreload { z-index:2000; display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; }
#hud { }
#hudBg { background-color:black; -webkit-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; }
#hudPreload * { position:absolute; }
#hudPreloadBgContainer { width:100%; height:100%; cursor:pointer; background-color:white; -webkit-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; filter:alpha(opacity=50); }
#hudPreloadClose { top:50%; left:50%; margin-top:10px; margin-left:-35px; padding:0px 3px 0px 22px; border:2px solid white; color:black; text-decoration:none; font-size:0.9em; font-weight:bold; background-image:url('../../img/metarr/metarr/hudMenu/close.gif'); background-repeat:no-repeat; } 

/* overflow und height damit das layout des hud großen schriftgrossen nicht gesprengt wird, die schrift ragt dann trotzdem darüber hinaus. */
#hudMenu { overflow:hidden; position:absolute; height:140px; width:200px; left:0px; top:0px; text-align:center; border-style:solid;/*inherit*/ border-color:#CCCCCC;/*inherit*/ border-width:0px 3px 3px 3px; background-color:white; }
#hudMenu img { border:0px; }
#hudMenu a { margin-right:5px; padding:0px 0px 10px 23px; font-size:0.8em; background-repeat:no-repeat; }
/*element vorm id angeben, damit obrige regel overrult wird */
a#hudMenuLogo { display:block; padding:0px; margin:0px; text-decoration:none; }
/* logolink ist dafür da, dass das logo unterstrichen wird, wie ein text-link. line-height ist wegen konqueror notwendig */
#logoLink { display:block; text-decoration:overline; font-size:8px; line-height:10px;  }
a#hudMenuAbout { padding-left:19px; background-image:url('../../img/metarr/metarr/hudMenu/about.gif'); }
a#hudMenuContact { margin-right:1px; background-image:url('../../img/metarr/metarr/hudMenu/contact.gif'); }
#hudClose { background-image:url('../../img/metarr/metarr/hudMenu/close.gif'); }

/* auskommentiert sind werte die normal vererbt werden sollten */
#hudContent { position:absolute; width:820px; height:600px; left:50%; top:50%; margin-left:-410px; margin-top:-300px; /*border-style:solid; border-color:#CCCCCC; border-width:0px;*/ }
#hudContentWeather { }
/* overflow und height damit das layout bei großen schriftgrossen zumindest nicht gesprengt wird */
#hudSelection { overflow:hidden; position:absolute; left:0px; bottom:0px; height:460px; width:180px; padding:0px 10px; border-style:solid;/*inherit*/ border-color:#CCCCCC;/*inherit*/ border-width:0px 3px 3px 3px; background-color:white; }
#hudSelection * { margin:0px auto; }
/* inline damit h1 und p im gleichen fluss stehen */
#hudSelection h1 { display:inline; margin-right:3px; font-size:1.1em; color:#00008B; }
#hudSelection p { display:inline; /*text-align:justify; nützt bei inline eh nichts */ line-height:1.2em; }
#hudSelection form { margin:10px auto; } 
#hudSelection form * { width:100%; font-size:1em; } 
#hudSelection form p { display:block; margin-bottom:3px; font-weight:bold; } 
#hudSelection form p:first-letter { padding:2px; color:white; background-color:#00008B; }
/* height in em = wieviele zeilen in der liste stehen */
#selection select { margin-bottom:5px; height:9em; }
/* #city ist für den ie6 notwendig */
#city, #city option { text-decoration:underline; color:blue; }

#hudMap { overflow:hidden; position:absolute; right:0px; top:0px; background-color:white; }
#hudMap img, #hudMap a { border:0px; }
#hudMapBg { }
/* relative ist notwendig? */
#hudMapBgContainer { /*position:relative;*/ width:600px; height:600px; background-image:url('../../img/metarr/hud/bluemetarr/region_0.png'); }
/* position absolute, = die onmouseover fläche */
#hudMapBgContainer * { position:absolute; top:0px; left:0px; width:600px; height:600px; }
/* keine postion notwendige, hudmarker bekommen sie beim generieren. 2em reicht für lange werte wie -12° */
.hudMarker { width:2em;  }
.hudMarker * { cursor:crosshair; font-weight:bold; vertical-align:middle; text-align:center; text-decoration:none; }
/* notwendig, sonst verzerrt es das icon auf 2em. margin positioniert es mittig */
.hudMarkerIcon { height:18px; width:24px; margin:0px auto; }
.hudMarkerLabel, .hudMarkerLabelBg { position:absolute; width:2em; }
/*padding-li/top und padding-r/bottom dienen als schatteneffekt*/
.hudMarkerLabel { padding-left:1px; padding-top:1px; color:white }
.hudMarkerLabelBg { padding-right:1px; padding-bottom:1px; background-color:gray; -webkit-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; filter:alpha(opacity=50); color:black }

#hudContentAbout, #hudContentContact { display:none; position:absolute; top:0px; right:0px; width:574px; height:597px; padding:0px 10px; border-style:solid;/*inherit*/ border-color:#CCCCCC;/*inherit*/ border-width:0px 3px 3px 3px; background-color:white; background-image:url('../../img/metarr/metarr/hudMenu/bg.gif'); background-repeat:repeat-x;  }
#hudContentAbout *, #hudContentContact * { margin:0px auto; }
#hudContentAbout sub, #hudContentContact sub { color:gray; }
#hudContentAbout h1, #hudContentContact h1 { margin:15px auto 2px; font-size:1.1em; color:#00008B; }
#hudContentAbout h2, #hudContentContact h2 { font-size:1em; margin:5px; }
#hudContentAbout p, #hudContentContact p { text-align: justify; line-height:1.2em; }
/* IE <li> bug mit div padding und list-style korrigieren */
#hudContentAbout ul, #hudContentAbout ol, #hudContentContact ul, #hudContentContact ol { margin:5px 10px 10px; padding-left:0px; }
/* li margin-bottom, mehr abstand zwischen den zeilen */
#hudContentAbout li, #hudContentContact li { margin-bottom:5px; list-style-position:inside; }
#hudContentAbout li span, #hudContentContact li span { padding:0px 5px; color:#00008B; font-weight:bold; font-size:0.8em; }
#hudContentAbout code, #hudContentContact code { display:block; margin:10px auto; background-color:whitesmoke; text-align:center; }
#hudContentAbout blockquote, #hudContentContact blockquote { margin:10px auto; padding-left:8px; color:gray; font-size:0.9em; font-weight:bold; font-style:italic; background-color:#E0E0E0; background-image:url('../../img/metarr/metarr/hudMenu/lquote.gif'); background-repeat:no-repeat; background-position:top left; }
#hudContentAbout blockquote div, #hudContentContact blockquote div { padding:8px; background-image:url('../../img/metarr/metarr/hudMenu/rquote.gif'); background-repeat:no-repeat; background-position:bottom right; }


/* z-index: khtml spezifisch */
#panel { z-index:1500; position:absolute; top:356px; left:6px; width:27px; }
/*width:100%; notwendig bei IE für elementshake mit negativen margin*/
#panel div * { display:block; position:relative; width:100%; height:27px; background-color:#00008B; text-decoration:none; }
#panelContainer1 { margin-top:2px; margin-bottom:3px; }
/* sind a element, sollen aber so wirken wie die anderen div elemente im panel */
#permalinkItem, #hudItem { cursor:default; }
/*position relative; notwendig bei IE für elementshake mit negativen margin*/
#hudItem { position:relative; background-image:url(../../img/metarr/metarr/mapPanel/panel_hud.gif); }
#permalinkItem { background-image:url(../../img/metarr/metarr/mapPanel/panel_permalink.gif); }
#panelContainer2 div { }
/* die folgenden olControl... overrulen das openlayer css file */
.olControlNavToolbar div { height:27px !important; width:27px !important; }
.olControlNavigationItemActive { background-image:url(../../img/metarr/metarr/mapPanel/panel_navigationActive.gif) !important; }
.olControlNavigationItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_navigationInactive.gif) !important; }
.olControlZoomBoxItemActive { background-image:url(../../img/metarr/metarr/mapPanel/panel_zoomBoxActive.gif) !important; }
.olControlZoomBoxItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_zoomBoxInactive.gif) !important; }
.zoomExtentItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_zoomExtent.gif); }
.navigationHistoryNextItemActive { background-image:url(../../img/metarr/metarr/mapPanel/panel_historyNextActive.gif); }
.navigationHistoryNextItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_historyNextInactive.gif); }
.navigationHistoryPreviousItemActive { background-image:url(../../img/metarr/metarr/mapPanel/panel_historyPreviousActive.gif); }
.navigationHistoryPreviousItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_historyPreviousInactive.gif); }
/*position relative; notwendig bei IE für elementshake mit negativen margin*/
.restrictPanItemActive, .restrictPanItemInactive { position:relative; margin-top:3px; }
.restrictPanItemActive { background-image:url(../../img/metarr/metarr/mapPanel/panel_restrictActive.gif); }
.restrictPanItemInactive { background-image:url(../../img/metarr/metarr/mapPanel/panel_restrictInactive.gif) }

/* cursor default wegen IE7, dort taucht default ein textselect cursor auf der im BG verschwindet */
#map { cursor:default; overflow:hidden; position:absolute; top:0px; left:0px; height:100%; width:100%; background-color:#757575; }
.displayCoordinates, .displayCopyright, #displayTime { position:absolute; left:7px; color:white; font-size:0.8em; font-weight:bold; }
.displayCoordinates { bottom:3.5em; }
.displayCopyright { bottom:2em; } 
.displayCopyright a { color:white; }
#displayTime { bottom:0.4em; }

.markerIcon { cursor:pointer; }
/* relative ist notwendig */
.markerLabelContainer { cursor:pointer; position:relative; } 
/* width, margin = mittig. wdith:2em für -12° ausreichend */
.markerLabel, .markerLabelBg { position:absolute; top:0px; left:50%; width:2em; margin-left:-1em; font-weight:bold; vertical-align:middle; text-align:center; }
.markerLabelBg { color:black; background-color:gray; -webkit-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; filter:alpha(opacity=50); }
.markerLabel { color:white; }



#GB_overlay { z-index:3000 }
#GB_window { z-index:3500 }