/* ========

Stylesheet - Deckelsammlung
www.schacht-deckel.de

neu für HTML 5
Juni 2014 / Dez. 2016
Autor: Andrea Pietsch

============ */

* {
 padding: 0;
 margin: 0;
}

body {
 background-image: url(pfb.jpg);   
}

body, p, nav  {
 font-family:  Calibri, Arial, Tahoma;
 font-size: 14pt;     
}

legend  {
 font-family:  Calibri, Arial, Tahoma;
 /* font-size: 14pt;  */
 font-weight: bold;  
}

button {
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    padding: 1px 5px 1px 5px; 
    margin: 2px; 
}

nav {
    display: block;
    width: 90%;   /* alt: 900px */
}

.liste {    /* Sd1/Sw1 / G1 */
    margin-left: 40px;
}

.fset {  /* Sw1 */
    margin-left: 80px;
    margin-top: 5px;
    padding: 5px; 
    width: 700px;  
}

.fxset {  /* Swx2 - Test --- neu T */
    float: left;
    border: none;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px; 
    width: 55%;  
}

.fyset {  /* Swx2 - Test  --- neu T */
    margin-right: 40px;
    width: 38%;
    float: right; 
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px; 
}

.ftset  {  /* Swx2 - Test --- neu T */
    float: left; 
    border: none;
    margin-top: 25px;
    margin-bottom: 5px;
    padding: 5px; 
}

.nfxset {   /* Swx2 */
    width: 90%;
}

.nfset {   /* Sw1 */
    width: 700px;
} 

.ifset {            /* Sn Inseln */
    width: 400px;
    padding: 10px;
    margin: 10px;
} 

.lafset {            /* R dt.Städte - fieldset */
    width: 90%;
    margin-bottom: 10px;
    border: none;
} 

.laiset {            /* R dt.Städte - fieldset Inseln*/
    width: 70%;
    margin-bottom: 10px;
    margin-left: 200px;
    border: none;
} 

.legend {   /* Sw1 / T */
    font-family:  Calibri, Arial, Tahoma;
    font-size: 14pt;
    padding: 0 5px 0 5px;
    margin-left: 10px;
}

.legT {   /* Sw1 / T */
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt;
    padding: 0 5px 0 5px;
    margin-left: 0px;
}

nav form {     /* Sw1 */
    display: inline;
}   

a  {           /* A_start - PostIt */
    text-decoration: none;
    color: #000;
    font-family:  Calibri, Arial, Tahoma;
}

figure {       /* S3 / DN3 / G3 */
    width: 230px;
    float: left; 
}

figcaption {    /* G3 / DN3 */
    color: #000;
    width: 213px;
    font-size: 12pt;
    text-align: center;   
    padding: 5px;
}

figcaption.gal {
    width: 140px;
    font-size: 12pt;
    text-align: center; 
}

ul {    /* B_dank */
    list-style-type: none;
}

li {    /* B_dank */
    margin-left: 2em; 
    margin-bottom: 10px;
}

/* ID und Class */

#verweis {    /* h_index */
    width: 160px;
    height: 570px;
    border: 1px solid #606060;  /* dk. grau */
    background-image: url(pfv.jpg);
    text-align: right;
    float: left; 
    margin: 20px;
    padding: 10px;  
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

#verweis button {   /* h_index */
    width: 150px;
    text-align: right;
}

.vknopf {    /* h_index */
    width: 150px;
    text-align: right;
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    padding: 1px 5px 1px 5px; 
    margin: 2px;  
}

.vbox {   /* h_index */
    width: 132px;
    text-align: left;
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    padding: 2px 5px 2px 5px; 
    margin: 0px 0px 2px 10px;
    border-radius: .2em;
    border: 1px solid #606060;  /* dk. grau */
    background-color: #A0A0A0;     
}
                     
.bild {   /* h_index */
    width: 150px;         
    height: 100px;
    border: 1px solid #606060;
    margin: 0px 0px 15px 0px;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

#mitte, #disc {  /* alle Seiten bzw. D-dis / C-kon */
    padding: 20px;
    margin-left: 220px; 
}

#mitte h2 {   /* alle Seiten bzw. D-dis / C-kon */  
    width: 800px;
    text-align: left; 
    font-weight: bold;
    margin-left: 70px;
} 

#mitte .tx {
    width: 800px;
    text-align: left; 
    margin-left: 70px;
}

.max {    /* LD3 */
    font-size: 150%;
}

.tore {    /* LD3 */
    width: 900px;
    text-align: right;
}

.TextEins {  /*  S4 / G4 */
    padding: 10px;
    margin-right: 10px;
    margin-left: 40px;
    margin-top: 20px;
   /* border: 1px solid #6f6f6f; */
    float: left;        
    width: 300px;     /* alt 200 */
    }
    
.reihe form {   /* S4 / DN4 / G4 */
    display: inline;
}

.fotograf {   /* B_dank / S4 / G4 */
    font-weight: bold;
    font-style: italic;
    padding-top: 3px;
}

.knopf {   /* alle Seiten */
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    padding: 1px 5px 1px 5px; 
    margin: 2px;  
}  

.blau {   /* T */
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    color: #0066CC; 
  /*  font-style: italic;
    font-weight: bold;     */
    padding: 1px 5px 1px 5px; 
    margin: 2px;  
} 

.mark {   /* alle Seiten */
    font-family:  Calibri, Arial, Tahoma;
    font-size: 12pt; 
    font-weight: bold;
    padding: 1px 5px 1px 5px; 
    margin: 2px; 
}

.tacht {   /* S3 - Hinweis Top 8 */
    float: right; 
}

#deckel {   /*  S4 / G4 / DN4 */
    padding-left: 20px;
    /*width: 910px;*/
    width: 90%;                
} 

#deckel img {    /*  S4 / G4 / DN4 */
    margin: 10px;
    border-radius: .5em;
    box-shadow: 5px 5px 5px #000;     
    float: left; 
    
}

#deckel h3 {  /*  S4 / G4 / DN4 */
    text-align: center; 
    margin-bottom: 10px;
    width: 515px;
}
 
.ifig {  /*  DN3 / LD3 / G3  */ 
    width: 200px;
    height: 160px;
  /*  border: 1px solid #606060;    */
    margin:10px 10px 0px 10px;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

.lfig {  /*  DN3 / LD3 / G3 */ 
    height: 220px;
}

.gfig {  /*  G1  */ 
    width: 130px;
    height: 100px;
  /*  border: 1px solid #606060;    */
    margin:10px 10px 0px 10px;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

.mfig {  /*  G1  */ 
    width: 130px;
    height: 100px;
    margin:0px 10px 0px 10px;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

.klfig {  /*  G1 */ 
    width: 150px;
    height: 120px;
}

.gfset {
    border: 0;     
}

.lwfig {  /*  Sn - Landeswappen  */ 
    width: 130px;
    height: 100px;
    border: 1px solid #606060;    
    margin: 0px 50px 0px 0px;
    border-radius: .3em;
    box-shadow: 5px 5px 5px #000;
}

figcaption.wpg {    /*  Sn - Landeswappen left: 220px; */ 
    width: 130px;
    font-size: 14pt;
    text-align: center; 
    position: relative;
    top: -75px;
    color: white;
    font-style: bold; 
}

#unten {     /*  blättern S4 / G4 */
    margin-left: 60px;
    display: block;
    width: 440px; 
    height: 30px;
}

#unten p {   /*  blättern S4 / G4 */
    font-size: 10pt; 
    text-align: center;
    padding: 5px;
}

.bufl {    /*  S4 / DN4 / G4 */
    width: 100px;
    height: 150px;
    padding-top: 120px;
    padding-bottom: 110px;
    position: absolute;
    top: 150px;
    left: 220px; 
}

.bufr {    /*  S4 / DN4 / G4 */
    width: 100px;
    height: 150px;
    padding-top: 120px;
    padding-bottom: 110px;
    position: absolute;
    top: 150px;
    left: 725px;
}

.start {    /* nav - A_start */
    margin: 5px 0 10px 30px;
}

.dank {  /*  B_dank */
    font-weight: bold;
    float: left;
}

#ubersicht {  /*  S3 / LD3 / DN3 */
   /* width: 950px;    */
    width: 90%;
}

#zusatz p {   /*  LS3 */
    padding-left: 30px;
    width: 950px;  
    margin-top: 30px; 
    float: left;           
}

/* D_disclaim */
#disc p {
 font-family:  Calibri, Arial, Tahoma;
 font-size: 13pt;
 padding-bottom: 4px;
}

#disc p.text {
 font-family:  Calibri, Arial, Tahoma;
 font-size: 14pt;
 padding-bottom: 8px;
}

#disc h2 {
 font-weight: bold; 
 font-size: 15pt;   
 padding-bottom: 8px;
}

#disc h3 {
 font-weight: bold; 
 font-size: 13pt;
 padding-top: 4px; 
}

.BoxEins {   /* A_Start */
    width: 50px; 
    font-weight: bold; 
    float: left;
    text-align: right;
    padding: 2px 5px 2px 5px; 
    margin-left: 0px;
   /* border: 1px solid #404040;   */
    }
    
.BoxZwei {   /* A_Start */
    width: 250px;
    text-align: left;
    padding: 2px 5px 2px 5px; 
    margin-left: 320px;
}

.BoxDrei {   /* A_Start */
    width: 200px;
    float: left;
    text-align: right;
    padding: 2px 5px 2px 5px; 
    margin-left: 100px;
}

.BoxVier {   /* A_Start */
    width: 350px;
    float: left;
    text-align: right;
    padding: 2px 5px 2px 5px; 
    margin-left: 100px;
  /*  background: #D0D0D0;  /* grau 
  /*  border: grey solid 1px;        */
    border-radius: .3em;
    border: 2px solid #606060;  /* dk. grau */
}

.leer {
    border: none; 
    margin-top: 20px;
    margin-bottom: 20px;
}

.tabli {     /* A_Start */
    text-align: left;    
}

.text {  /* A_Start */
    padding-bottom: 6px;
}

/* == PostIt  --  A_Start == */

ul.drop1,
ul.drop2 {
 margin:  0;
 padding: 0;
 clear: both;
 overflow: hidden; 
 }    

ul.drop1 li,
ul.drop2 li {
 list-style-type: none;
 margin: 5px;
 padding: 5px;
 position: relative;
 float: right;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.drop1 li {
 width: 200px;
 height: 120px;
 border: 0;
 background: #FFCC00;  /* gelb */
/* background: #00CCFF;  /* blau */
 text-align: center;
}

ul.drop2 li {
 width: 250px;
 height: 120px;
 border: 0;
 background: #FF9933;  /* orange */
 text-align: center;
}

.PostIt { /* A_Start */
 float: left;
 width: 220px;
/* height: 270px;  margin-right: 100px; */
 padding: 5px;   
  
}

.PostF { /* A_Start */
 float: left;
 width: 270px;
/* height: 270px;  margin-right: 100px; */
 padding: 5px;   
 
}

ul.drop1 h3, 
ul.drop1 p {
 padding: 5px 5px 5px 10px;
 }

ul.drop2 p {
 padding: 5px 5px 5px 10px;
 }
 
ul.drop1 li:before,
ul.drop1 li:after,
ul.drop2 li:before,
ul.drop2 li:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

ul.drop1 li:after,
ul.drop2 li:after {
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}