/* German Australia css */

/* ============================= NAV menu start */
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/ipad-flyout.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


ul.toplevel {margin:0 0 0 10px; padding:0; list-style:none; white-space:nowrap; text-align:left; background:Gold; border-bottom:1px solid #fff; border-left:1px solid #fff; position:relative; float:left; clear:left; height:22px; width:160px; z-index:100;}

ul.toplevel li {margin:0; padding:0; list-style:none;}
ul.toplevel li {display:inline;}
ul.toplevel ul {margin:0; padding:0; list-style:none; position:absolute; left:-9999px; border-left:1px solid #fff;}

ul.toplevel li a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none; padding:0 20px; border-bottom:1px solid #fff; background:Gold;} 
ul.toplevel li a.fly {background:Gold url(ipad/arrow.gif) no-repeat right center;}
ul.toplevel ul li a {padding:0 20px 0 10px;}

ul.toplevel li a:hover {background-color:DarkGoldenrod; color:#fff;} 
ul.toplevel li:hover > a {background-color:DarkGoldenrod; color:#fff;}

ul.toplevel li:hover > ul {left:100%; margin-top:-23px;}

ul.toplevel a:hover ul,
ul.toplevel a:hover a:hover ul, 
ul.toplevel a:hover a:hover a:hover ul {left:100%;}
ul.toplevel a:hover ul ul, 
ul.toplevel a:hover a:hover ul ul {left:-9999px;}

ul.toplevel table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px;}

ul.toplevel li.close {position:absolute; left:0; top:0; width:20px; height:22px; z-index:-1; overflow:hidden; }
ul.toplevel li.close a {display:block; padding:0; border:0; width:32px; height:32px; background:url(ipad/close.png);}
ul.toplevel li.close a b {position:absolute; left:-9999px;}
/* ============================= NAV menu end */

html, body {margin:0;padding:0;}

body {

background: url(bg-gradient.jpg) repeat-x #aca18d;
color: #000000;
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
font-size: 80%;
text-align:center;
}

/* containers */
div#header {background: DarkRed url(ga-hdr-DarkRed.gif) no-repeat; background-position:10px 4px; 
grid-column-start: 1;
  grid-column-end: 3;
	height:65px;}
div#header h1 {display:none;}
div#container {background: url(navcol-bg-Chocolate.gif) repeat-y; background-position:0% 0%; width:1120px;
display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: auto auto auto;
	margin:0 auto; text-align:left; border-right:2px solid DarkRed; border-left:1px solid white; background-color:#FFF;}
div#content {grid-column-start: 2; grid-column-end: 3;}
div#navigation {grid-column-start: 1;
  grid-column-end: 2; padding-top: 5px;}
/* background: url(navcol-bg-Chocolate.gif) repeat-y; */
div#footer {clear:both;
grid-column-start: 1;
  grid-column-end: 3;
background: DarkRed; color: #fff;}
/* originally bg #2F4F4F */
div#footer p {margin:0; padding:5px 10px;}
div#langswap {clear:both;}

/* end containers */

p {
font-size: 1.0em;
line-height: 1.6em;
margin: 1.2em;
}

/* sources, footnotes at the bottom of pages */
div#source {border-top:thin solid SaddleBrown; margin-left: 1.2em; margin-right:20%; margin-bottom: 1.5em; clear: both;}

/* end of sources, footnotes at the bottom of pages */
div#source p {font-size:90%; color:DarkSlateGray; margin-bottom: 0.5em;}

/* source at any spot within a page */
.source-body {border:2px solid #e6e6e6; margin-left: 1.2em; margin-right:20%; padding: 0.4em; font-size:90%; color:DarkSlateGray; margin-top: 0.5em;}

/* reference pointers in text, (e.g. [2]) to footnotes at the bottom of pages */
.note-ref {
color:black; font-weight:normal; margin-left:2px; font:"Times New Roman", Times, serif;
line-height: inherit; vertical-align: 15%;
font-size: 0.85em;
}


select {
font-size: 0.9em;
background-color:#ffdead;
color:brown;
margin-left: 1.2em;
border-color:#000066;
}

h1, h2, h3, h4, h5, h6 {
font-weight: bold;
text-align: center;
margin: 1.2em;
}

h1 {
font-size: 2em;
color: #008000;
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
}

h2 {
font-size: 1.4em;
margin: 1.2em 0em 1.2em 0em;
color: #008000;
font-family: Arial, Geneva, Helvetica, Sans-Serif;
clear:both;
}

h3 {
padding-bottom: 0;
padding-top:5px;
border-left: 0.6em solid #993300;
border-top: 0.2em solid #993300;
padding-left: 0.8em;
text-align: left;
font-size: 1.3em;
font-family: Arial, Geneva, Helvetica, Sans-Serif;
color: #008000;
margin-right: 50%;
clear:both;
}

caption {
text-align:center;
margin: 0 0 0.5em 0;
color:#666;
font-weight: bold;
}

table {
margin: 0.6em 5%;
font-size: 1.0em;
border-collapse:collapse;
}

table.tabmid {
margin: 0.6em auto;
}

tr {
background: #ffffb9;
}

th, td {
border-right:2px solid #fff;
border-bottom:2px solid #fff;
vertical-align:text-top;
text-align:center;
line-height: 1.6em;
padding:0.6em;
}

thead th {
	background:yellow;
}

tbody th {
	background:#658cb1;
	font-weight:normal;
}

.tablenondata tbody th {
	background:none;
}

tr:nth-child(even) {background: #ffffb9;}
tr:nth-child(odd) {background: Khaki;}

.table-center td {
text-align: center;
}

.tablenondata {
border-style: none;
}

.tablenondata th, td {
text-align:left;
}

.tablenondata-bg {
border-style: none;
background-color: #ffffb9;
}

.tablenondata-bg td {
border-style: none;
padding: 0.5em;
}

ul {
list-style-type: square;
}

ul ul {
list-style-type: circle;
}

li {
line-height: 1.6em;
margin: 0.8em 15% 0.8em 0;
}

/* links blue */
a:link {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color:#000080;
font-weight : normal;
text-decoration : underline;
}

/* visited links purple */
a:visited {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: #9933ff;
font-weight : normal;
text-decoration : underline;
}

/* mouse-over links red */
a:hover {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: #ff0000;
font-weight : normal;
text-decoration: none;
}

/* footer links yellow */
div#footer a:link {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color:yellow;
font-weight : normal;
text-decoration : underline;
}

/* footer visited links red */
div#footer a:visited {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: #7FFF00;
font-weight : normal;
text-decoration : underline;
}

/* footer mouse-over links aqua */
div#footer a:hover {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: Aqua;
font-weight : normal;
text-decoration: none;
}

/* langswap links white */
div#langswap a:link {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color:white;
font-weight : normal;
text-decoration : none;
}

/* langswap visited links white */
div#langswap a:visited {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: white;
font-weight : normal;
text-decoration : none;
}

/* langswap mouse-over links aqua */
div#langswap a:hover {
font-family: Verdana, Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
color: Aqua;
font-weight : normal;
text-decoration: none;
}

a.external {background: url(external-link.png) center right no-repeat; padding-right: 15px}

a.nachoben {
	margin: 0 0 0 10px;
	background: url(icon_top.gif) center left no-repeat;
	padding: 0 0 0 12px;
}

strong, b {
font-weight: bold;
}

hr {
border: 0;
width: 90%;
color: green;
background-color: green;
height: 2px;
margin-top:1.4em;
margin-bottom:1.4em;
text-align:center;
clear:both;
}

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}


select, input {
	color:brown;
	font-size:1.2em;
}

/* glossary lists */
dt {
margin-left: 1em;
font-weight: bold;
}

dd {
position:relative; margin-left: 15em; top: -1.25em; margin-right:1.5em;
line-height:1.6em;
}

/* classes */

.credit {
text-align: center;
font-size: 0.9em;
color: DarkSlateGray;
}

.creditright {
text-align: right;
font-size: 0.9em;
color: DarkSlateGray;
}

.creditleft {
font-size: 0.9em;
color: DarkSlateGray;
}

.titlevariant {
	color:#9F9;
}

.rcorners-txtbg1 {
  border-radius: 25px;
  background-color: aqua;
  padding: 3px 5px;
	font-weight: bold;
  }

.centertext {
text-align: center;
}

.bigger {
font-size: 1.2em;
font-weight:bold;
}

.smaller {
	font-size:0.9em;
}

.generalhead {
font-size: 1.3em;
font-weight: bold;
margin: 1.0em 0em 0.4em 1.2em;
color: #008000;
font-family: Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
}

.ballpoint {
float:left;
margin: 5px 10px 0 1.2em;
}

.contentfloat-l {
	float:left;
	margin:0 1.2em 1.4em 1em;
	border-left:2px dotted green;
}

.contentcols {
float:left;

margin:0.6em 1em 0.6em 1.2em;
padding-left:1.5em;
}

.box-bg {
margin-left: 5%;
margin-right: 5%;
background-color: #FFF8DC;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid gray;
} /* background box behind text */

.emphasis1 {
font-weight: bold;
color: #ff0000;
} /* red */

.red {
color:red;
}

.emphasis2 {
color: #663300;
font-weight:bold;
} /* brown */

.brown {
color: #663300;
}

.emphasis3 {
font-weight: bold;
color: #008000;
} /* green */

.green {
color: #008000;
}

.emphasis4 {
font-weight: bold;
color: #800080;
} /* purple */

.lila {
color: #800080;
}

.emphasis5 {
font-weight: bold;
color: #000099;
} /* blue */

.blue {
color: #000099;
}

.gray {
color: #666;
}

.highlight {background-color:#FF0; font-weight:bold; padding:2px;}

.lowerpara {
margin-top:3em;
} /* caption to right of video */

p.lowerpara span {
font-size: 1.3em;
font-weight:bold;
color:#ff0000;
}

/* 'next' etc */
.button-01 {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eb8d2f), color-stop(1, #d2691e));
	background:-moz-linear-gradient(top, #eb8d2f 5%, #d2691e 100%);
	background:-webkit-linear-gradient(top, #eb8d2f 5%, #d2691e 100%);
	background:-o-linear-gradient(top, #eb8d2f 5%, #d2691e 100%);
	background:-ms-linear-gradient(top, #eb8d2f 5%, #d2691e 100%);
	background:linear-gradient(to bottom, #eb8d2f 5%, #d2691e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb8d2f', endColorstr='#d2691e',GradientType=0);
	background-color:#eb8d2f;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #7d6855;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-family:arial;
	font-size:90%;
float:left;
margin:5px 1.2em 5px 1.2em;
	padding:3px 12px;
	text-decoration:none;
}
.button-01:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d2691e), color-stop(1, #eb8d2f));
	background:-moz-linear-gradient(top, #d2691e 5%, #eb8d2f 100%);
	background:-webkit-linear-gradient(top, #d2691e 5%, #eb8d2f 100%);
	background:-o-linear-gradient(top, #d2691e 5%, #eb8d2f 100%);
	background:-ms-linear-gradient(top, #d2691e 5%, #eb8d2f 100%);
	background:linear-gradient(to bottom, #d2691e 5%, #eb8d2f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2691e', endColorstr='#eb8d2f',GradientType=0);
	background-color:#d2691e;
}
.button-01:active {
	position:relative;
	top:1px;
}

.bulletnumm {
color: #ff6633;
font-weight:bold;
margin-right: 14px;
}

p.left-head {
font-family: Arial, Geneva, "Lucida Sans Unicode", Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.3em;
color: #008000;
padding-bottom: 0em;
border-left: 0.6em solid #993300;
border-top: 0.2em solid #993300;
padding-left: 0.8em;
margin-right: 40%;
margin-top: 12px;
clear:both;
}


/* general purpose box for highlighting info - centred */
.specialbox-c {
margin-left:15%; margin-right:15%; margin-bottom:15px;
padding: 6px;
border-width: medium;
border-style: solid;
border-color:gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

/* general purpose box for highlighting info - left */
.specialbox-l {
margin-right: 15%;
margin-bottom:15px;
margin-left:1.2em;
padding: 6px;
border-width: medium;
border-style: solid;
border-color:gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

/* general purpose box for highlighting info - right */
.specialbox-r {
float:right;
width:400px;
margin-bottom:15px;
margin-right:1.2em;
padding: 6px;
border-width: medium;
border-style: solid;
border-color:gray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

/* legend for general purpose box */
.boxtitle {
color: brown;
font-size:1.2em;
font-weight:bold;
font-family: "Trebuchet MS", Tahoma, Geneva, "Lucida Grande", Arial, sans-serif;
padding: 2px 6px;
border:solid 1px gray;
background-color:#FFC;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

.image-drop-shadow {
	box-shadow: 5px 5px 5px dimgray;
}

blockquote {
margin-left: 15%;
margin-right: 15%;
padding-top: 0.6em;
padding-bottom: 0.6em;
border-bottom: 2px dotted #960;
border-top: 2px dotted #960;
clear: both;
}

blockquote p {
margin: 5px 10px 0 40px;
display:list-item; padding: 0 35px 0 3px; list-style-image: url(quote-open.gif); background: url(quote-close.gif) 100% 90% no-repeat;
}

blockquote p.source {
margin-top:5px;
margin-bottom:5px;
color:#666;
font-style:italic;
text-align:right;
background-image:none;
display:block;
}


div.quote-left {
margin-left: 1.2em;
margin-right: 1.4em;
width:400px;
float:left;
border-bottom: 2px dotted #960;
border-top: 2px dotted #960;
}

quote-left p {
margin: 4px 10px 0 40px;
display:list-item; padding: 0 35px 0 3px; list-style-image: url(quote-open.gif); background: url(quote-close.gif) 100% 90% no-repeat;
}

quote-left p.source {
margin-top:5px;
margin-bottom:4px;
color:#666;
font-style:italic;
text-align:right;
background-image:none;
display:block;
}


.block-shadow {
box-shadow: 5px 5px 4px dimgray;
}
	
img.picleft {
float:left;
margin: 5px 10px 8px 1.2em;
}

img.picmid {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:5px;
margin-bottom:8px;
clear: both;
}

img.picright {
float:right;
margin: 5px 1.2em 8px 10px;
}

/* an image div for non-floated pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaption {
background-color:#FFCC99; margin:5px 12px 1.2em 1.2em; padding:5px; border:1px solid black;
clear: both;
}
div.imagecaption img {
border: 1px solid gray;
}
/* text for that caption */
div.imagecaption p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaption p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: DarkSlateGray;
}



/* an image div for left-floated pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaptionleft {
background-color:#FFCC99; float:left; margin:5px 12px 1.2em 1.2em; padding:5px; border:1px solid black; clear: both;
}
div.imagecaptionleft img {
border: 1px solid gray;
}
/* text for that caption */
div.imagecaptionleft p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptionleft p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: DarkSlateGray;
}


/* an image div for centered pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaptioncenter {
background-color:#FFCC99; margin: 5px auto 10px auto; display:block; padding:5px; border:1px solid black;
clear: both;
}
div.imagecaptioncenter img {
border: 1px solid gray;
}
/* text for that caption */
div.imagecaptioncenter p {
text-align: left; font-size:90%; color:#333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptioncenter p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: DarkSlateGray;
}

/* an image div for right-floated pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaptionright {
background-color:#FFCC99; float:right; margin:5px 1.2em 1.2em 12px; padding:5px; border:1px solid black;
clear: both;
}
div.imagecaptionright img {
border: 1px solid gray;
}
/* text for that caption */
div.imagecaptionright p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptionright p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: DarkSlateGray;
}

/* an image div for non-floated pic plus caption below, white bg colour for the frame - image's width in pixels must be added as inline style */
div.imagecaption-white {
background-color:#FFF; margin:5px 12px 1.2em 1.2em; padding:5px; border:1px solid LightGray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
clear: both;
}

/* text for that caption */
div.imagecaption-white p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaption-white p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: #778899;
}


/* an image div for left-floated pic plus caption below, white bg colour for the frame - image's width in pixels must be added as inline style */
div.imagecaptionleft-white {
background-color:#FFF; float:left; margin:5px 12px 1.2em 1.2em; padding:5px; border:1px solid LightGray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
clear: both;
}

/* text for that caption */
div.imagecaptionleft-white p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptionleft-white p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: #778899;
}

/* an image div for centered pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaptioncenter-white {
background-color:#FFF; margin: 5px auto 10px auto; display:block; padding:5px; border:1px solid LightGray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
clear:both;
}
/* text for that caption */
div.imagecaptioncenter-white p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptioncenter-white p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: #778899;
}

/* an image div for right-floated pic plus caption below - image's width in pixels must be added as inline style */
div.imagecaptionright-white {
background-color:#FFF; float:right; margin:5px 1.2em 1.2em 12px; padding:5px; border:1px solid LightGray;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
clear: both;
}
/* text for that caption */
div.imagecaptionright-white p {
text-align: left; font-size:90%; color:#333333; margin: 2px 6px; line-height:1.4em;
}

div.imagecaptionright-white p.source {
margin-top:-0.2em;
font-size: 0.85em;
color: #778899;
}


/* a sublevel navigation box for a page, leftaligned, giving links to anchors further down the same page */
div#subnavbox {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color:#e6e6cc; border:1px solid #000; width:240px; float: left; font-size:0.9em; margin: 1.2em 1.2em 1.2em 1.2em;}
div#subnavbox ul {border:0; color:green; margin:12px 20px 12px 2em; padding:0; list-style-type:square; border-top:1px solid green;}
div#subnavbox li {border-bottom:1px solid green; margin:0; padding:.3em 0;}
div#subnavbox a {text-decoration:none; color:#069;}
div#subnavbox a:hover {color:#ff0000;}

/* to get two elements, incl an image, to sit alongside each other via flex, incl the subnavbox on the left */
.subnav-neighbour {
	display:flex;
	flex-wrap: wrap;
	column-gap: 2em;
	row-gap: 1em;
	align-content: flex-start;
}

.subnav-neighbour #subnavbox {
	align-self: flex-start;
}

/* a sublevel navigation box for a page, scrollable, giving links to other pages */
.vertical-listing-menu {
width: fit-content; /* Set a width if you like */
height: 250px;
overflow-y: auto;
border-radius: 2px;
border: 1px solid gray;
margin-left: 2em;
}

.vertical-listing-menu a {
  background-color: bisque;
  color: brown;
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-listing-menu a:hover {
  background-color: lightgray; /* background colour on mouse-over */
}

.vertical-listing-menu a.active {
  background-color: #04AA6D; /* Add a green color to the "active/current" link */
  color: white;
}

.columns-01 {  /* newspaper columns, list */
column-count:4;
-moz-column-count:4;
-webkit-column-count:4;

column-width:150px;
-moz-column-width:150px;
-webkit-column-width:150px;

column-gap:30px;
-moz-column-gap:30px;
-webkit-column-gap:30px;

margin: 0 0 0 1.2em;
padding: 0;
}

.columns-01 li {
	margin: 0.8em 1.2em 0.8em 1.2em;
}

/* correct webkit/chrome uneven margin on the first column */
.columns-01 li:first-child
{
    margin-top:0px;
}

.columns-02 /* newspaper columns, list, 2 cols */
{
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;

column-width: 250px;
-moz-column-width: 250px; /* Firefox */
-webkit-column-width: 250px; /* webkit, Safari, Chrome */

column-gap:40px;
-moz-column-gap:40px;
-webkit-column-gap:40px;

margin: 0 0 0 1.2em;
padding: 0;
}

.columns-02 li {
	margin: 0.8em 1.2em 0.8em 1.2em;
}

/* correct webkit/chrome uneven margin on the first column */
.columns-02 li:first-child
{
    margin-top:0px;
}

.liedtextcols /* Australisch Lied */
{
float:left;

}

audio {margin-left: 1.2em; border-radius: 4px;}

div.videoplayer01, div.videoplayer02 {
background-color:#ddd;
border:solid 6px red;
padding:0;
margin: 1em 1em 1.6em 1.6em;
border-radius: 20px 20px 0 0 / 15px 15px 0 0;
-webkit-border-radius: 2em 2em 0 0 / 1em 1em 0 0;
}

div.videoplayer01 {
	width:420px;
}

div.videoplayer02 {
	width:560px;
}

div.videoplayer01 p, div.videoplayer02 p {
	font-weight:bold;
	font-size:1.1em;
	line-height: 1.3em;
	padding:0;
	margin:4px 0.8em;
}

/* media, print, tablet etc */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
{
    div#content .imagecaption,
  .imagecaptioncenter, .picmid {width:95%; height:auto; margin:0 auto;}
/* for iPhone, iPod Touch and iPad */
ul.toplevel li.liTop:hover + li.close {z-index:200; width:32px; height:32px; left:-15px; top:-10px;}
div#container {width:950px;}
div#content {width:740px;}

}


@media only screen and (max-device-width: 768px) and (orientation:portrait)
{
    div#container { /* removed 3px for border */
    width: calc(100% - 3px); 
    grid-template-rows: auto auto auto auto;}
    div#content {grid-column-start: 1;
      grid-column-end: 3;}
	div#navigation {
      grid-column-start: 1;
      grid-column-end: 3;
  }
    div#content .imagecaption,
  .imagecaptioncenter, .picmid {width:100%; height:auto; margin:0 auto;}
}

@media print { 
body {
background: white;
font-size: 12pt;
font-family:Georgia, "Times New Roman", Times, serif;
color: black;
}

h1, h2, h3, h4 {
color:black !important;
font-family:Arial, Helvetica, sans-serif;
}

div#header h1 {
font-variant: small-caps;
font-weight:normal;
font-size:140%;
display:inline;
margin-left:0;
color:black !important;
}

div#header {
background-image: none;
border-top: 1px dotted gray;
border-bottom: 1px dotted gray;
margin-bottom: 1em;
height:auto;
}

div#navigation {
display: none;
}

div#container, div#content {
width: auto;
padding: 0;
border: 0;
float: none;
background: transparent none;
}

div#container {
margin: 2% 5%;
}

div#subnavbox {
display: none;
}

div#footer {
	text-align:right;
	border-top: 1px solid gray;
	font-size:0.8em;
	background: transparent none;
	color:black;
}


a:link, a:visited {
color: #520;
font-size:90%;
background: transparent;
text-decoration: none;
border-bottom: 1px dotted #520;
padding-bottom: 2px;
}

.noprint {
display: none;
}

.button-01, .button-01:hover, .button-01:active {
    display: none !important;
  }
	
.titlevariant {
	color:#333;
	font-style:italic;
}

audio {
    display: none !important;
  }
}

/* Dear Reader, hope you are enjoying yourself! */