* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
body {
  background-color: #D5DDE5;;
}

header, nav, section, footer, #infoblock {
    display: block;
}
header {
    background-color: yellow;
}

#infoblock {
  background-color: yellowgreen;
}

section, #infoblock {
   /* background-color: yellowgreen;*/
    margin-left:20%;
    width:80%;
}
footer {
    background-color: deepskyblue;
    clear:both;
}

#vaNavi {
  margin-left:2em;
  margin-right:2em;
}
.clickArrow {
  background-color:#ff8500;
  padding:2px 6px;
  cursor: pointer;
}

#previewFrameBig, #previewFrameSlim  {
  width:  100%;
  height: 100%;

}
#preview {
  overflow:hidden;
   width:1120px; 
   height:630px;
  position: fixed;  
  background:#06172e;
  border-radius: 8px;
  top: 50%;
  left: 50%;
  margin-top: -315px; /* Negative half of height. */
  margin-left: -560px; /* Negative half of width. */
}
#previewSlim {
  overflow:hidden;
  width:656px; 
  height:950px;
  position: fixed;  
  background:white;
  border-radius: 8px;
  top: 20px;
  left: 50%;
  margin-left: -500px; /* Negative half of width. */
  
}
#DivFileUpload, 
#DivPodcastUpload,
#DivPdfUpload,
#LepoPdfUpload,
#DivFanzyFileUpload,
#DivSunEditor,
#DivFileUploadBild2 {
  overflow:hidden;
  width:700px;
  height:700px;
  top: 50%;
  left: 50%;
  margin-top: -350px; /* Negative half of height. */
  margin-left: -350px; /* Negative half of width. */
  position: fixed;  
  background-color:#D5DDE5;
  color:#06172e;
  border-radius: 8px;
  box-shadow: 5px 5px 3px silver;
  border-style: solid;
  border-width: 1px;
  border-color: #06172e;
  outline: white solid 5px;

   
}
#DivFanzyFileUpload {
  height:800px;
  margin-top: -400px; /* Negative half of height. */
}


#DivFileUpload img {
  max-width: 100px;
}
#DivFileUpload form,
#DivPodcastUpload form,
#LepoPdfUpload form
#DivFanzyFileUpload form {
  margin-left:1em;
  margin-top: 1em;
}
.headPopup,
.footPopup {
  height: 2em;
  width:100%;
  color: #D5DDE5;
  background: #06172e;
  font-size: 1em;
  font-weight: 100;
  padding: 0.3em;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  font-size: 1em;
  font-weight: bold;
}
.headPopup p,
.footPopup p {
   padding: 0.2em;
    float:left;
}
.headPopup button,
.footPopup button {
  float:right;
  margin-right:1em;
}


.footPopup {
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  height: 1.5em; 
}

#closePreview {
  margin-left: 26px;

}

#uploadFormCrop input[type="file"] {
    display: none;
}

.custom-file-upload,
.textFilename {
    border: none;
    padding: 8px 15px 8px 15px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    -moz-box-shadow: 1px 1px 4px #DADADA;
    -webkit-box-shadow: 1px 1px 4px #DADADA;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    float:left;
    margin:0.2em 0.2em 0.2em 0 ;
}

.textFilename {
    background: #ebebeb;
    color: black;
    display: none;
    cursor:auto;
}

.uploadInnerWindow {
  padding-left:0.2em;
  height:100%;
}

.cropXY {
  width: 2em;
  
}
.break {
  height: 1em;
  width: 100%;
}

.flexContainer {
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width:100%;
  margin-right:0.2em;
  align-content:space-around;

}