.nowrap {
   white-space: nowrap;
}

body {
   max-width: 60em;
   background-color: #C8C8FF;
}

@media print {
body {
   background-color: #FFFFFF;
}
}

a, a:link {
   text-decoration: none;
   color: #000095;
}

a:visited {
   text-decoration: none;
   color: #000065;
}

a:hover {
   text-decoration: underline;
   outline: none;
}

nav, nav ul, nav li {
   list-style: none; 
   margin: 0; 
   padding: 0;
   border: 0;
}

nav ul {
   text-align: center;
   background-color: #0000FF;
}

nav li {
   display: inline-block;
   float: left;
   margin: 0; 
   padding: 0;
   border: 2px solid #0000FF;
}

nav li span {
   padding: 0 1em 0 1em;
   text-decoration: none; 
   color: #000000; 
   background-color: #4848FF;
}

nav li a, nav li a:link, nav li a:active {
   padding: 0 1em 0 1em;
   text-decoration: none; 
   color: #000090; 
   background-color: #C8C8FF;
}

nav li a:hover {
   text-decoration: none;
   background-color: #7070FF;
   outline: none;
}

/* The following class is used for "read more" text. It cannot hold the
   pop-up dialog below,  however.  It will be closed as well,  when a
   pop-up in another part of the page is activated.
*/

.mndhide {
   display: none;
}

.mndhide:target {
   display: block;
}

/* In the pop-up,  close has an absolute position,  relative to the div;
   margin is exterior and padding is interior distance;  the
   target is activated,  when a link to the dialog is clicked.
   Then div is shown and the rest is covered by changing the opacity
   of the full black background.  Drawbacks of this approach:
   The location display is modified,  the back button records pop-ups.
   While adaptation to the device width or the viewport width seems to
   be straightforward with css,  I do not know how to set it individually.
   The media query was tested in Firefox emulator ctrl shift m .
   Recently changed the vids from 600 to 800.
*/

.mndialog {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0,0,0,0.6);
   z-index: -1;
   opacity: 0;
   -moz-transition: opacity 0.4s ease-in-out;
   -webkit-transition: opacity 0.4s ease-in-out;
   transition: opacity 0.4s ease-in-out;
   pointer-events: none;
}

.mndialog:target {
   z-index: 1000;
   opacity: 1;
   pointer-events: auto;
}

.mndialog > div {
   width: 800px;
   position: relative;
   margin: 5% auto;
   padding: 5px 10px 5px 10px;
   border-radius: 10px;
   background: #C8C8FF;
}

@media screen and (max-device-width: 640px) {
.mndialog > div {
   width: 480px;
}
}

@media screen and (max-device-width: 520px) {
.mndialog > div {
   width: 320px;
}
}

.close {
   background: #7070FF;
   color: #000090;
   line-height: 25px;
   position: absolute;
   left: -12px;
   text-align: center;
   top: -10px;
   width: 24px;
   text-decoration: none;
   font-weight: bold;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
   border-radius: 12px;
}