body{
   background-color: white;
   color: #404040;
   font-size: 1em;
   margin: 0;  
   font-family: Tahoma, arial, Verdana, helvetica;
   text-align: left;
   min-height: 101%; 
}
html, body {
   scroll-behavior: smooth;
}

.page {
   background: white;
   margin-left: 1em;
   width: 95%;
}

.hr {color:silver; background-color:silver; height:1px; width:95%} 

#mobile{
   display: block;
}

/* the mobile navigation menu */
.topnav {
    overflow: hidden;
    color: #404040;
    background-color: #fcfefc;
    position: relative;
}

.left {
    float:left;
}
#myLinks{
  width:95%;
   background-color: #F8F8F8;
   padding: 1em 1em;
   margin: 1em 2em 1em 1em;
}

  /* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
	background-color: #F8F8F8;
    padding: 0.3em 0.3em 0.3em 0.8em;
    width: 90%;
}

.topnav #myLinks span{
    font-size: 1em;
    vertical-align: middle;
}
.topnav #myLinks hr {
   color:silver; 
   background-color: #F8F8F8; 
   height: 1px; 
   width:95%;
}

  /* Style mobile navigation menu links */
.topnav a {
    color: #404040;
	margin-left: 2em;
    text-decoration: none;
    font-size: 1em;
    display: block;
}

  /* Style the hamburger menu */
.topnav a.icon {
    padding: 0.5em;
    font-size: 1.5em;
    color: gray;
    background: #fcfefc;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
  
  /* Add a background text color on mouse-over */
.topnav a:hover {
    color: silver;
}

.inblock {
  display: inline-block;
}

.home, .galerie, .texte, .ausstellungen, .kontakt, .links, .impressum{
   padding: 0;
   margin: 0;
}

.home{background-image: url(./images/home.jpg)}
.galerie{background-image: url(./images/galerie.jpg)}
.texte{background-image: url(./images/texte.jpg)}
.ausstellungen{background-image: url(./images/ausstellungen.jpg)}
.links{background-image: url(./images/links.jpg)}
.kontakt{background-image: url(./images/kontakt.jpg)}
.impressum{background-image: url(./images/impressum.jpg)}

.ausstellungen p, .ausstellungen a, .home table{
   color: #FAF0E6;
}

.kontakt p{
   color: #FAF0E6;	
}

.vita{
   background-image: url(./images/vita.jpg);
   background-position:3em 2em;
   background-repeat:no-repeat;
   background-color:#F8F8F8;
   height: 18em;
}

.zentriert {text-align: center;}
		       
a.refbox:hover { 
   color:#FF8C00; 
   background:white; }
		    
a.refbox span { 
   visibility:hidden; 
   position:absolute; left:2em;
   margin-top: 1.6em;
   padding:0.6em; 
   width: 22.5em
}
		    
a.refbox:hover span { 
   visibility:visible; 
   text-align:left;
   font-size: 1em;
   line-height: 1.4em;
   text-decoration:none;
   font-weight:normal;
   border:1px solid #a1a1a1;
   background-color: #F0F0F0;
   color: black;
}

#galerie{
background-color: white;
height:580px;
width:1019px;
clear: both;
}

#gal_page {
   margin: 1em;
   background: white;
   width: 95%;
}
					       		       
#top{
   border-top: solid 1px silver;
   background-color: #fcfefc;
   margin: 0em 1em 1em 0;
   height: 5em;
   display: none;
}


#logo{
   margin: 1em 1em 1em 2em;
   display: inline-block;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
}

#box_left, #ausstellungen, #links{
   color: #333333;
   background-color: #F8F8F8;
   width:93%;
   height: 24em;
   margin: 1em 2em 1em 1em;
   overflow: auto;
}

#ausstellungen, #links{
   height: auto;
}

#box_right{
   height:24em;
   background-color: #F8F8F8;
   width:99.8%;
   display: none;
}
#box_left ol, #ausstellungen ol, #links ol{
   list-style-type:decimal;
}

#box_left ul, #ausstellungen ul , #links ul{
   font-size: 1em;
   margin-top: 2em;
   line-height: 2em;	
}

#box_left ul li a, #austellungen ul li a, #links ul li a {
   color: #333333;
   text-decoration: none;
}

#box_left a:hover, #ausstellungen a:hover, #links a:hover{
   color: #B0B0B0;
}

#box_left p, #ausstellungen p, #links p{
   margin: 1em;
}

#box_left p a, #ausstellungen p a, #links p a{
   color: #FAF0E6;	
}

#box_left hr, #ausstellungen hr, #links hr {color:silver; background-color:silver; height:1px; width:95%} 

#vita{
   line-height: 1.3em;
   color: #333333;
   padding-right: 0.75em;
   padding-left: 0.7em;
   background-color: #F8F8F8;
   width: 95%;
   height:auto;
   overflow:auto;
}

#vita dt{
   font-weight : bold; 
   margin-top: 1em;
}

#impressum { 
   background-color: white;
   letter-spacing: 1px;
   padding-top: 3px;
   text-decoration: none;
   height: 1.6em;
   width: 63.8em;
   text-align: center;
}

#impressum a {
   color: #333333;
   text-decoration: none;
}

#impressum  a:hover{
   color: #ffffff;
   background-color: #F8F8F8;
}

/* Main - Navigation  */

#navcontainer{
   margin: 0 0 2em 2em;
   padding-left: 2em;
   min-width: 70%;
   height:4.4em;
   background-color: #fcfefc;
   display: inline-block;
}

#navcontainer ul { 
   padding: 0; 
}
#navcontainer ul li { 
   display: inline; 
}

#navcontainer ul {
   font: tahoma, arial, verdana, helvetica;
   font-size: 1em;
   color: #3D3D3D;
   letter-spacing: 1px;
   float: right;
}

#navcontainer ul li a{
   padding: 3px 11px;
   background-color: #fcfefc;
   color: #3D3D3D;
   text-decoration: none;
   float: left;
   border-left: 1px solid silver;
}

#navcontainer ul li a:hover{
   background-color: #FFFFFF;
   color: #B0B0B0;
}

#navlist{
   margin: 0;
   padding: 0 0 1.25em 0.63em;
}

#navlist ul, #navlist li{
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}

#navlist li a:hover, #navlist li a:active{
   color: #FFFFFF;
   padding-bottom: 2px;
   background: #DCDCDC;
   text-align: left;
}

/* Ende Main - Navigation  */

#navlist #active a{
   color: #B0B0B0;
}
 
#navlist #active a:hover{
   color: #B0B0B0;
}

#content{
   background-color: white;
   margin-top: 2em;
   padding: 0.5em 0.5em;
   width:96%;
   clear: both;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.gallery{
   background-color: #F8F8F8;
}

#gal_page {
   margin: 1em;
   background: white;
   position: absolute;
   width: 95%;
   height: auto;
}

.zoom{
  padding-bottom: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* gängige Displayformate:
 320 Pixel - iPhone im Hochformat
 480 Pixel - kleines Display, auch iPhone Querformat
 600 Pixel - kleine Tablets
 
 800x600 Pixel - SVGA
 1024x768 Pixel - manche Laptops
 1280x720/800/1024 Pixel - größere Monitore
 1600x900 Pixel - HD+
 1980x1080 Pixel - FHD. große Monitore
 
 Retina Display:
 
 iPad mini (2./3./4. Generation) (326ppi),
 iPad Pro (9,7″) (264ppi)                 - 2048 × 1536
 iPad (10,2") (264ppi)                    - 2160 × 1620
 iPad (3./4. Generation), 
 iPad Air (1./2. Generation), 
 MacBook (12" Retina Display) (226ppi)     - 2304 × 1440
 */
 
#gal_left{
   display: none;
   width:80%;
}

#gal_left td{
   font-size: 1em;
}

#gal_right{
  margin: 1em 1em;
  width: 95%; text-align:center;
}


#gal_right table{
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}

#gal_nav, #gal_style{
   color: #616161;
   border-top: 1px solid silver;
   padding-top: 0.8em;
   margin-top: 0.8em;
}

#gal_style{
   text-align:left;
}

#gal_nav span{
   color:#BEBEBE
}

#gal_caption{
   color: #616161;
   border-top: 1px solid silver;
   padding-top: 0.8em;
   margin-top: 1em;
   height: auto;
}

#gal_thumb{ 
   height: 68px;
   overflow: auto;
   margin: 0 2em 2em 2em;
   padding: 0.5em 1em 0.5em 1em;  
   background-color: #fffff0;
   display: block; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;
   scroll-behavior: smooth;
}

.gal_br{
   margin-top:5px;
}

.left_nav { 
   width: 90%; 
}

.left_nav ul{
   margin-left: 0;
   padding-left: 0;
   list-style-type: none;
}

.left_nav a{
   display: block;
   margin-left: 2em;
   padding: 0.3em 0.3em 0.3em 0.8em;
   width: 85%;
   border-top: 1px solid silver;
}

.hoverbox{
   cursor: default;
   list-style: none;
}

.hoverbox a{
   cursor: default;
}

.hoverbox a .preview{
   display: none;
}

.hoverbox a:hover .preview{
   display: block;
   position: absolute;
   top: 4.8em;
   left: 27.7em;
   z-index: 1;
}

.hoverbox img{
   background: #ddd8b7; 
   vertical-align: top;
   width: 36em;
   height: 25em;
}

.hoverbox span{
   background: #ddd8b7;
   display: inline;
   position: relative;
}

.hoverbox .preview{
   border-color: #000;    
}

.num_hoverbox{
   cursor: default;
   list-style: none;
}

.num_hoverbox a{
   cursor: default;
}

.num_hoverbox a .num_preview{
   display: none;
}

.num_hoverbox a:hover .num_preview{
   display: block;
   position: absolute;
   top: 1.9em;
   left: 17.5em;
   z-index: 1;
}

.num_hoverbox .num_preview{
    border-color: #000;
	width:auto;
	height: auto;
}

.num_preview{
   background-image:url(./images/bground_img.jpg);
   width:53.8em;
   height: 32.5em;
}

/******************************************************/

@media only screen and (min-width: 642px){

#content{
   margin: 0;
   padding: 0;
   margin-top: 2em;
}

#center{
   display:flex;
}
#navi_row{
  display: none;
}
#gal_thumb{ 
   margin-top: 1em;
}
#gal_left{
   padding-top: 2em;
   padding_left: 1em;
   width:20em;
   display: block;
}
#gal_right{
  width: 80%;
  margin-right: 1em;
}
#top{
   display: flex;
}

#mobile{
   display: none;
}

#content{
   background-color: #F8F8F8;
   margin-left: 1em;
   width:63.8em;
}

#box_right{
   display: block;
   width:100%;
   margin: 0;
   padding: 0;
}

#box_left, #ausstellungen, #links{
   margin: 0px;
   padding: 0px;
   width:44%;
   height: 24em;
   overflow:auto;
   float:left; 
}

#box_left p a, #ausstellungen p a, #links p a{
   color: #333333;	
}

.home, .galerie, .texte, .ausstellungen, .kontakt, .links, .impressum{
   background-repeat:repeat-y;
   background-position:27.7em 0px;
   width: 36em;
   height: 24em;
}

.home table, .kontakt p{
   color: #404040;
}

.ausstellungen{
   text-align: justify; 
   padding: 0em 1em 0 1em;
}

.ausstellungen p, .ausstellungen a{
   color: #404040;
}

.left_nav { 
  width: 18.75em; 
  margin-left: 1.25em;}

.left_nav a {
   width: 22.5em;
}

#vita{
  width:68%;
  height: 24em;
  float:right;
}
#vita dt{
   margin-top: 1.8em;
}

.vita{
  width: 18.9em;
  height: 25em;
}
.topnav{
    display: none;
}
}


@media only screen and (min-width: 1080px){
#gal_page {
   width: 90%;
}
}