@charset "ISO-8859-1";

/*---------------------------------------------------------------*/
/*                    neues html5                                */
/*---------------------------------------------------------------*/

/*------------------------------------------*/
/* Klassenselektoren, z.B. class = "center" */
/*------------------------------------------*/
.right   { text-align: right; }
.left    { text-align: left; }
.center  { text-align: center; }

/*------------------------------------------*/
/* Typselektoren, ohne Komponente           */
/*------------------------------------------*/
body {
  /*border: 1px solid green;*/   /* fuer Testzwecke*/
  /*max-width: 80em;  */       /* wenn max-width von body=main ist, gibts links keinen Rand, opt. für mein BS, 80em*/
  background-color:grey;
  #background-image:url(../graphics/serveimage.jpeg);
}

header {
  border-top: 1px solid white;         /* fuer Testzwecke*/
  border-bottom: 1px solid red;
  display: flex;
  align-items: flex-end;            /* Mond unten  */
  justify-content: space-between;   /* Mond rechts */
}

section {
  /*border: 1px solid hotpink; */
  /*background: url('../graphics/erde3.jpg') no-repeat top; */ /* vorerst mal keinen BG, da auch in HOME sichtbar*/
  background-position: 0px -280px;

  margin: 0 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;  /* Mond rechts */
}

article {
  /*border: 2px solid red;*/
  margin-top:0px;
  flex: 3 1 0%;
  max-width: 60em;
}

aside {
  /*border: 1px solid green;*/
  flex: 1 -1 0%;
  min-width: 7em;
}

figcaption {
  text-align: left;
  color:white;
  /*color:#676665; */
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:14pt;
  padding:3px;
  margin-top:20px;
  margin-bottom:5px;
}

p.koord-text {
  color:white;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:10pt;
  font-weight:lighter;
  margin-top:160px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:5px;
  text-align:right;
}

h1.vwtitle {
  text-align: left;
  color:white;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:18pt; margin-bottom:1em;
}

p.navboxf1 {
  color:white;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:11pt;
  xtext-align:left;
  margin-left:0px;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:5px;
  border: 2px solid red;
}

p.textboxf1 {
  /*clear:both;*/
  /*break-after:always; */
  color:#676665;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:11pt;
  /*margin-left:5px;  */
  margin-top:5px;
  margin-right:5px;
  margin-bottom:5px;
  width:auto;    /* beim x-breitern wird die box verkleinert, nav-Menu aber nicht umgebrochen*/
}

/*------------------------------------------*/
/* ID-Selektoren                            */
/*------------------------------------------*/
#mapbox-html5 {
  border-width:5px;
  border-style:solid;
  border-color: blue;
  background-color:white;
}

#mapbox2-html5 {
  border-width:5px;
  border-style:solid;
  border-color: blue;
  max-width: 43em;
  background-color:white;
}

#contrast {
  color:white;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:10pt;
  padding:0px;
  vertical-align:top;
  text-align:right;
  /*background-color:black; */  /* ohne background-color schimmert (transparent) der Globus durch */
}

#xcontrast2 {
  color:white;
  font-family:"Andale Mono", Arial,sans-serif;
  font-size:15pt;
  padding:0px;
  vertical-align:top;
  text-align:right;
  /*background-color:black; */  /* ohne background-color schimmert (transparent) der Globus durch */
}

/*------------------------------------------*/
/* dynamische Pseudoklassen                 */
/*------------------------------------------*/
a:link    { text-decoration:none; color:white; }
a:visited { text-decoration:none; color:white; }
a:hover   { text-decoration:none; color:blue; }
a:active  { text-decoration:none; color:white; }
a:focus   { text-decoration:none; color:white; }



/* Navigation */

nav {
        margin: 0;
        width: 100%;
        background: black;
}

nav ul {
        margin: 0;
        padding: 0;
        font: 1.3em  Arial, Helvetica, sans-serif;
        list-style-type: none;
}

nav li {
        display: inline;
        margin: 0;
}

nav a {
        position: relative;
        display: inline-block;
        text-decoration: none;
        color: white;
        padding: .5em;
}


#logo {
  /*border: 2px solid midnightblue;*/
  display: block;
  background: url('../graphics/erde3.jpg') no-repeat top;
  xbackground-position: 0px -900px;
  background-size: 1024px;
  color: white;
  margin: 0 0 0 0em;
  padding-left: 0em;
  text-decoration: none;
  animation: orbit 120s linear infinite;
  height: 250px;
}

@keyframes orbit {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -1200px;
  }
}


@keyframes mond {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

#mond {
  padding: 25px;
  xanimation: mond 50s infinite linear;
}

h1.dummy-vwtitle {color:black; font-size:8pt; text-align:center; margin-top:0px; margin-bottom:0px;}

h1.vwtitle {color:white; font-family:"Andale Mono", Arial,sans-serif;
    font-size:28pt; text-align:center; margin-top:0px; margin-bottom:15px;}

hr {
  color: white;
}

xnav {
  margin-bottom: 2em;
}