body { background-color: #f2f2f2; font-size: 11pt; font-family: Tahoma, Geneva, "DejaVu sans", sans-serif; }
a { font-weight: bold; text-decoration:none; color:green; }

input[type=text] { background-color:#f4fff0; }
input[type=button] { border:1px solid #b0b0b0; border-width:thin; background: linear-gradient(#f0f0f0, #d0d0d0); }
textarea { background-color:#f4fff0; }

.pageheader { border-style:none; background-color:white; margin:0px; padding:0px; width:100%; }
.pageheader tr { margin:0px; padding:0px; }
.pageheader td { vertical-align:middle; }
.pageheader a { text-decoration:none; }
.pageheader img { vertical-align:middle; }
.sitename { text-align:center; font-size: 18pt; font-weight: bold; vertical-align:middle; color:#404040; }
.pageheaderlink {
  text-align:center;
  font-size:12pt;
  font-weight:bold;
  vertical-align:middle;
  text-decoration:none;
  color:green; }
.pageheadertitle {
  text-align:left;
  font-size:14pt;
  font-weight:bold;
  vertical-align:middle;
  color:green;
  text-shadow: 0px 0px 5px #7eaf3f; }
.pagetagline { font-size:15pt; font-weight:500; text-align:center; color:#8dc94f; margin-top:12pt; }  

.nothing { background-color: #f0ece8;}
h1     { text-align:center; color:#604040; font-size:12pt; }
h2     { text-align:center; font-size: 14pt; font-weight: bold; margin-top: 6px; }
h3     { text-align:left;   font-size: 12pt; font-weight: bold; margin-top: 4px; }
.sheet { width: 600px; padding: 60px; background-color: #fffcf8; margin-left: auto; margin-right: auto; }
.expand a { font-size: 12pt; color: #2020ff; text-decoration: none; border: none; }
.hidden { visibility: hidden; height: 0px; }
.msgArea { border-color: #c0c000; border-width: 2px; border-style: outset; 
				background-color: #e0e0ff; color: #2020ff; }
.thumb	{ width: 22px; height: 22px; overflow: hidden; }
.thumb:hover { width: 50px; height: 50px; padding: 2px; }
.newsthumb	{ text-align: left; margin-left: 2px; padding-right:4px; width: 50px; height: 50px; overflow: hidden; }
.newsthumb:hover { width: 80px; height: 80px; overflow: visible; }
.backbutton { cursor: pointer; width:220px; margin-bottom: 20px; }

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.kachel {
  box-shadow:0px 0px 10px 5px #d0d0d0;
  float:left;
  position:relative;
  background-color:white;
  overflow:hidden; 
  margin:9px;
  padding:9px;
}
.kachel header {
  font-size: 10pt; font-weight: bold; color: #604040; text-align:center;
  padding: 5px 5px 0px 5px;
  background: white;
}
/*
.kachel footer { padding-left: 2px; padding-right: 2px; width: 100%;
                 font-style: italic; font-size: 10pt; 
               }
*/ 
.kachel h1 { color:#604040; font-size:12pt; }
.kachel .zitat {
  color:#604040; font-style:italic; font-weight:500; font-size:10pt; padding-bottom:0px; margin-bottom:0px; }
.kachel .eventdate {
  color:#604040; text-align: center; font-weight:600; font-size:10pt; padding-bottom:0px; margin-bottom:0px; }
.kachel .quelle { text-align:right; padding-top:0px; margin-top:0px; padding-bottom:3px; color:#604040; font-size:9pt; }
.kachel .text { color:#604040; font-size:10pt; padding-top:0px; margin-top:0px; }
/* .kachel p { margin: 1px 0px 0px 1px; font-size: 10pt;  } */
.kachel.over { border: 2px dashed #ff0000; }

.expandcollapsebox {
  box-shadow:0px 0px 10px 5px #808080;
  background-color:#ffffe0;
  padding:9px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

.modal-header { padding:5px; color:#404040; background:white; font-size:10pt; font-weight:bold; }
.modal-body   { padding:5px; color:#404040; }
.modal-footer { padding:5px; color:#404040; background:white; }

.modal-content {
    position: fixed; top:50%; left:50%;
    /* width: 600px; */ 
    /* height: 324px; */ 
    /* margin-left: -300px; */ 
    margin-top:-162px;
    background-color: #f2f2f2;
    padding: 0;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0} 
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/* The Close Button */
.close {
    color: #d88;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.ajaxdialog { background-color: #ffe0e0; border: 1px solid #888; }
.ui-dialog { background-color: #ffc0c0; border: 1px solid #888; }

blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 67% { opacity: 0 } }
@-moz-keyframes blink { 67% { opacity: 0 } }
@keyframes blink { 67% { opacity: 0 } }

 /* Style the tab */
div.reiter {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.reiter button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.reiter button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.reiter button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.periods { text-align: center; vertical-align: bottom;
	padding: 0px; margin: 0px; border-spacing: 0px; }
.periods a:link { text-align: center; text-decoration: none; }
.periods a:active { text-align: center; text-decoration: none; }
.periods a:hover { text-align: center; text-decoration: none; }
.periods a:visited { text-align: center; text-decoration: none; }

 /* Popup container only for position */
.popup {
    position: fixed;
    left:0px;
    top:0px;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: whitesmoke;
    color: #604040;
    text-align: center;
    border-radius: 3px;
    padding: 8px 0;
    position: absolute;
    z-index: 2;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    box-shadow:0px 0px 10px 5px #a0f0a0;

}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}