/* -------------------------------------------------------------------------- */
/* Filename ...... : dus103.css                                               */
/* Function ...... : Style Definitions                                        */
/* Date .......... : 2020-05-24                                               */
/* Contact ....... : MF                                                       */
/* Last Change ... : 2020-05-24 MF                                            */
/* Last Change ... : 2020-07-04 New Design                                    */  
/* -------------------------------------------------------------------------- */

body {
  font-family:               'Verdana',sans-serif;
  margin:                    0;
  padding:                   0;
  font-size:                 1em;
  color:                     #333;  
  background:                url("../images/Skyline-large.jpg") no-repeat;
  margin-top:                12px;
  margin-bottom:             8px;
  background-size:           100% 130px;    
  background-color:          #F0F0F0;  
}

/* -------------------------------------------------------------------------- */
/* Headlines ---------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
h1 { 
  font-family:               'Verdana',sans-serif;
  /* 
  margin:                    0 0 15px 0;
  padding:                   0;
  font-size:                 36px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #333;    
  */
  position:                  relative;
  left:                      50%;     
  font-size:                 20px;
  color:                     #1E8FC0
  }
  
h2 { 
  font-family:               'Verdana',sans-serif;
  margin:                    0 0 15px 0;
  padding:                   0;
  font-size:                 30px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #333
  }
  
h3 { 
  font-family:               'Verdana',sans-serif;
  margin:                    0 0 5px 0;
  padding:                   0;
  font-size:                 24px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #333 
  }

h4 { 
  font-family:               'Verdana',sans-serif;
  position:                  relative;
  left:                      50%;     
  font-size:                 20px;
  color:                     #1E8FC0;
  }

h5 { 
  font-family:               'Verdana',sans-serif;
  margin:                    0 0 5px 0;
  padding:                   0;
  font-size:                 18px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #479; 
  }
  
h6 { 
  font-family:               'Verdana',sans-serif;
  margin:                    0 0 5px 0;
  padding:                   0;
  font-size:                 16px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #339; 
  }
  
p {   
  font-family:               'Verdana',sans-serif;
  margin-top:                0px;   
  margin-left:               40px;
  margin-right:              15px;
  margin-bottom:             0px;   
  padding-top:               0px;  
  padding-left:              15px;
  padding-right:             0px;
  padding-bottom:            0px;     
  font-size:                 12px;
  font-weight:               normal;
  line-height:               normal;
  color:                     #239; 
  }

td { 
  vertical-align:            top;
  }
  
img { 
  margin:                    0;
  padding:                   0;
  border-style:              none;
  max-width:                 100%;
  height:                    auto;
  }

a { 
  color:                     #1E8FC7;
  font-size:                 1.4em;
  text-decoration:           none;
  }

a:hover { 
  color:                     #1E8FC7;
  text-decoration:           underline;
  }


/* -------------------------------------------------------------------------- */
/* id=xxx  
   https://www.w3schools.com/howto/howto_css_sidebar_icons.asp
   ------------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */

#topblock {
  /*position:                  fixed;                        new 18-07-2020 */
  font-size:                 12px;	 
  margin-top:                95px;
  margin-left:               20px;
  margin-right:              20px;
  margin-bottom:             10px;
  padding-top:               10px;
  padding-left:              10px;
  padding-right:             10px;
  padding-bottom:            10px;  
  background-color:          #FCFCFC;
  border:                    1px solid #8d8d8d;            /* Farbe des Rahmens */
  border-radius:             4px; 
} 
  
#midblock { 
  /*position:                  fixed;                        new 18-07-2020 */
  font-size:                 12px;
  margin-top:                10px;
  margin-left:               20px;
  margin-right:              20px;
  margin-bottom:             10px;
  padding-top:               10px;
  padding-left:              10px;
  padding-right:             10px;
  padding-bottom:            10px;
  min-height:                1px;
  background-color:          #FCFCFC;
  border:                    1px solid #8d8d8d;            /* Farbe des Rahmens */
  border-radius:             4px;  
} 

#footerblock {  
  /* position:                  fixed;  */
  bottom:                    0;  
  margin-top:                10px;
    margin-left:               20px;
    margin-right:              20px;
    margin-bottom:             10px;
    padding-top:               10px;
    padding-left:              10px;
    padding-right:             10px;
    padding-bottom:            10px; 
  font-size:                 12px;
  min-height:                1px;
  background-color:          #FCFCFC;
  border:                    1px solid #8d8d8d;            /* Farbe des Rahmens */
  border-radius:             4px; 
}   
  
/* -------------------------------------------------------------------------- */
/* button ------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
button {
   font-family:              'Verdana',sans-serif;
   font-size:                12px;
   font-weight:              normal;
   text-decoration:          none;   
}
  
.button {
  margin-top:                10px;   
  margin-left:               20px;
  margin-right:              0px;
  margin-bottom:             10px;   
  padding-top:               5px;                /* Rahmen um die Schrift */
  padding-left:              10px;
  padding-right:             10px;
  padding-bottom:            5px;   
  font-size:                 1em;
  color:                     #23517b;            /* Schriftfarbe      */
  background-color:          #fcfcfc;
  box-shadow:                0px 12px 10px -7px rgba(0,0,0,0.4);
  border:                    solid 1px #8d8d8d;  /* Farbe des Rahmens */
  border-radius:             4px;                /* Abrundung Rahmen  */
  transition:                ease-in-out all 300ms;  
}
  
button:hover {
   color:                    #db5757;
   background-color:         #F1F1F1;
   transform:                translate(0px, -10px);
   box-shadow:               0px 20px 10px rgba(0,0,0,0.2); 
   text-decoration:          none;
}
 
button:focus {
   color:                    #007474;
   background-color:         #F2F2F2;   
   box-shadow:               0px 30px 10px; 
}
 
 
/* -------------------------------------------------------------------------- */
/* Class Definitions for Flexbox -------------------------------------------- */
/* -------------------------------------------------------------------------- */
.container {
   background-color:         #FFF;	 
   display:                  flex;
   height:                   auto;
   align-items:              center;
   margin-top:               4px;
   margin-bottom:            4px;      
   column-count:             4;
   column-rule-color:        red;
   column-rule-width:        1px;
   column-rule-style:        dotted;
   column-gap:               10px;
 }
 
.item {
   margin:                   1px;
   padding-top:              1px;
   padding-bottom:           6px;
   flex-basis:               80px;
   flex-shrink:              1;
   flex-grow:                1;
   
   height:                   57%;
   background:               rgba(100,190,199,0);
   background-size:          cover;   
   border:                   solid 1px #8d8d8d;            /* Farbe des Rahmens */
   border-radius:            2px;    
   border-color:             rgba(100,190,199,0.1)   
 }
 
.item:hover {          
   border-color:             rgba(100,100,199,0.1)   
 }
 
.detail {
   text-align:               center;   
   font-size:                11px;
   color:                    red;
 }
 
.text {
   font-family:              'Verdana',sans-serif;	 	 
   color:                    gray; 
   font-size:                1.2em;
   text-align:               left;
   position:                 relative;
   top:                      2px; 
   margin-top:               0px;
   margin-left:              0px;   

}
 
 
/* -------------------------------------------------------------------------- */
/* Unknown ------------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
 
#top { 
  margin:                    0;
  padding:                   0; 
}

#wrapper { 
  margin:                    0 auto;
  padding:                   0 30px;
  max-width:                 952px;
}
  
#framebox { 
  margin:                    0;
  padding:                   0;
  border-right:              1px solid #efefef;
  border-left:               1px solid #efefef
}

#slogan { 
  margin:                    0;
  padding:                   0;
  font-size:                 13px;
  font-weight:               normal;
  font-style:                normal;
  color:                     #333;
  text-transform:            none
}
 
#header { 
  margin:                    0;
  padding:                   20px;
  background-color:          #FCFCFC;
  border-bottom:             1px solid #e3e3e3
}
  
  
/* -------------------------------------------------------------------------- */
/* Special Style ------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */  

#midblockcontent { 
  margin:                    0;
  padding-top:               10px;               /* Rahmen um die Schrift     */
  padding-left:              10px;
  padding-right:             10px;
  padding-bottom:            10px;   
  font-size:                 12px;
  background-color:          #efefef;            /* Hellgrau                  */
}
  
#footer { 
  margin:                    0;
  padding-top:               10px;               /* Rahmen um die Schrift     */
  padding-left:              10px;
  padding-right:             10px;
  padding-bottom:            10px;   
  font-size:                 12px;
  /*color:                     #533;  */
  background-color:          #efefef;            /* Hellgrau                  */
}

#footerinfo { 
  float:                     right;
  margin:                    0;
  padding-top:               5px;                /* Rahmen um die Schrift     */
  padding-left:              5px;
  padding-right:             5px;
  padding-bottom:            5px;   
  font-size:                 10px;
  overflow:                  hidden;
}
 
/* -------------------------------------------------------------------------- */
/* End of File -------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */