/* DATEI: formate.css */ 

html, body {background:url(../grafiken/hintergrund.jpg); background-attachment:fixed;}
@font-face { font-family: 'ProfaisalRegular'; src: url('profaisal_elite_riqa.ttf') format('truetype'); }

/* kleine Schrift bei Copyright-Angaben */
uu { font-family: Verdana,Arial,sans-serif; font-size: 11px; line-height: 0em; }
/* Schrift auf kleine Tafel auf Station 8 */
vv { font-family: 'ProfaisalRegular', Courier, monospace; color: #eee; font-size: 18px; position: relative; top: 16px; left: -10px; }
/* Bildunterschriften bei Lightboxen */
ww { font-family: Verdana,Arial,sans-serif; font-size: 14px; line-height: -2.3px; }
/* Schreibmaschinen-Style im Fließtext */
xx { font-family: 'ProfaisalRegular', Courier, monospace; font-weight: bold; }
/* Verweispfeil auf externe Links */
yy { color: #000077; font-size: 12px; }
/* Workaround: Courier-Aufruf innerhalb Schreibmaschinen-Style bei Sonderzeichen */
zz { font-family: Courier; font-weight: bold; }

/* Links ohne Unterstreichung (wegen der Lightbox-Untertitel) */
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none;}
a:active { text-decoration: none;}


/* Text-Schatten:
http://css3gen.com/text-shadow/ */

h1 { text-shadow: 4px 4px 10px rgba(140, 140, 140, 0.65); font-family: 'ProfaisalRegular', Courier, monospace; color: #666666; font-size: 36px; line-height: 0.4em; letter-spacing: 0.03em; }
h2 { text-shadow: 4px 4px 10px rgba(140, 140, 140, 0.65); font-family: 'ProfaisalRegular', Courier, monospace;
     color: #666666; font-size: 28px; letter-spacing: 0.07em; line-height: 0.9em; }
h3 { text-shadow: 4px 4px 10px rgba(140, 140, 140, 0.65); }
h4 { margin-top: 1px; text-shadow: 4px 4px 10px rgba(140, 140, 140, 0.65);
     font-family: 'ProfaisalRegular', Courier, monospace; font-weight: 900; }
h5 { text-shadow: 4px 4px 10px rgba(140, 140, 140, 0.65); font-family: Verdana,Arial,sans-serif; color: #666666; font-size: 24px; line-height: 0.4em; font-weight: 100; }

/* Knopffläche neben Audioplayer */
.knopf {width:150px; opacity:0.1; box-shadow: 4px 4px 6px #ccc; padding: 40px 0px; }

/* Bilder mit Schatten  */ 
.schatten_linksbild img {
  width: 200px;
  margin-right: 14px;
  display: block;
  float: left;
  border: 2px solid #cadcf2;
  border-radius: 6px;
  box-shadow: 4px 4px 6px #ccc;
  -webkit-box-shadow: 4px 4px 6px #ccc;
  -moz-box-shadow: 4px 4px 6px #ccc;
}

.schatten_rechtsbild img {
  width: 200px;  
  margin-right: 14px;
  display: block;
  float: right;
  border: 2px solid #cadcf2;
  border-radius: 6px;
  box-shadow: 4px 4px 6px #ccc;
  -webkit-box-shadow: 4px 4px 6px #ccc;
  -moz-box-shadow: 4px 4px 6px #ccc;
}

.schatten_rechtsbild_klein img {
  width: 100px;  
  margin-right: 14px;
  display: block;
  float: right;
  border: 2px solid #cadcf2;
  border-radius: 6px;
  box-shadow: 4px 4px 6px #ccc;
  -webkit-box-shadow: 4px 4px 6px #ccc;
  -moz-box-shadow: 4px 4px 6px #ccc;
}

.schatten_linksbild_schmal img {
  width: 60px;  
  margin-right: 14px;
  display: block;
  float: right;
  border: 2px solid #cadcf2;
  border-radius: 6px;
  box-shadow: 4px 4px 6px #ccc;
  -webkit-box-shadow: 4px 4px 6px #ccc;
  -moz-box-shadow: 4px 4px 6px #ccc;
}

.schatten_uebersichtbild img {
  height: 165px;  
  margin-right: 4px;
  display: block;
  float: left;
  border: 2px solid #cadcf2;
  border-radius: 6px;
  box-shadow: 4px 4px 6px #ccc;
  -webkit-box-shadow: 4px 4px 6px #ccc;
  -moz-box-shadow: 4px 4px 6px #ccc;
}

/* Zitatbalken links
http://de.selfhtml.org/css/eigenschaften/rahmen.htm */
.rahmen {
  border-left-width:4px;
  border-right-width:0px;
  border-top-width:0px;
  border-bottom-width:0px;
  border-style:solid;
  border-color:#ccc;
  padding:.5em;
  margin-top:.5em;
  margin-bottom:.5em;
  margin-left:.1em;
  margin-right:0em;
  font-size: 16px;
  text-align:left;
  font-style:italic;
  background-color: #eee;
}

/* gedrehte Schrift */
.gedreht {
-moz-transform: rotate(348deg); -ms-transform: rotate(348deg); -o-transform: rotate(348deg); -webkit-transform: rotate(30deg); transform: rotate(348deg); position: absolute; top: 32px; left: 340px; opacity: 0.2; font-size: 48px; }

/* bestimmte Bildschirmgrößen kriegen konkretes Player-Outfit
http://wiki.selfhtml.org/wiki/CSS/Media_Queries */

@media screen and (min-device-width: 200px) {
audio {width: 50%; background:#ddd; border: 2px solid #cadcf2; border-radius: .4em; margin: 10px 0 10px 0; opacity:1.0; box-shadow: 4px 4px 9px #bbb; }}
video {width: 80%; background:#ddd; border: 2px solid #cadcf2; border-radius: .4em; margin: 10px 0 10px 0; opacity:1.0; box-shadow: 4px 4px 9px #bbb; }}

/* Die Lightbox
http://www.emanueleferonato.com/downloads/lightbox.html -->
damit mehrere Boxen gehen müssen fade und light durchnummeriert  werden -->
Inhalt zentrieren: http://www.toptip.ca/2012/01/lightbox-without-jquery-soooooooo.html  */

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.4;
opacity:.40;
filter: alpha(opacity=40);
}

/* --- hier das originale: ---
.white_content {
display: none;
position: absolute;
top: 20px;
left: 8%;
width: 80%;
height: 500px;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #dddddd;
z-index:1002;
overflow: auto;
}
--- --- --- --- --- --- ---*/

.white_content {
display: none;
position: absolute;
/* war top: 20px; */
top: inherit;
left: 8%;
width: 80%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #dddddd;
z-index:1002;
overflow: auto;

}

.white_content_tiefer {
display: none;
position: absolute;
/* war top: 250px; */
top: inherit;
left: 8%;
width: 80%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #dddddd;
z-index:1002;
overflow: auto;
}

.white_content_tiefertiefer {
display: none;
position: absolute;
/* war top: 500px; */
top: inherit;
left: 8%;
width: 80%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #dddddd;
z-index:1002;
overflow: auto;
}

.white_content_hauptseite {
display: none;
position: absolute;
top: 5px;
left: 10%;
width: 80%;
height: 80%;
padding: 2px;
border: 8px solid #cadcf2;
border-radius: 6px;
background-color: #dddddd;
z-index:1002;
overflow: auto;
}
.white_content_tafel {
display: none;
position: absolute;
top: 20px;
left: 8%;
width: 600px;
height: 400px;
padding: 100px;
padding-top: 20px;
padding-left: 55px;
border: 0px solid #cadcf2;
border-radius: 6px;
background-image: url("../grafiken/kreidetafel.png");
background-repeat: no-repeat;
background-size: contain;
z-index:1002;
overflow: auto;
font-family: 'ProfaisalRegular', Courier, monospace;
font-size: 165%; 
line-height: 140%;
color: #ddd
}
.kleinbild_tafel {
display: none;
position: absolute;
top: 20px;
left: 8%;
width: 600px;
height: 400px;
padding: 100px;
padding-top: 20px;
padding-left: 60px;
border: 0px solid #cadcf2;
border-radius: 6px;
background-image: url("../grafiken/kreidetafel.png");
background-repeat: no-repeat;
background-size: contain;
z-index:1002;
overflow: auto;
font-family: 'ProfaisalRegular', Courier, monospace;
font-size: 170%; 
line-height: 140%;
color: #ddd
}

.white_content_text {
display: none;
position: absolute;
/* war top: 250px; */
top: inherit;
left: 18%;
width: 60%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #f5f5f5;
z-index:1002;
overflow: auto;
}

.white_content_text_tiefer {
display: none;
position: absolute;
/* war top: 400px; */
top: inherit;
left: 18%;
width: 60%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #f5f5f5;
z-index:1002;
overflow: auto;
}

.white_content_text_tiefertiefer {
display: none;
position: absolute;
/* war top: 700px; */
top: inherit;
left: 18%;
width: 60%;
height: auto;
padding: 5px;
border: 5px solid #cadcf2;
border-radius: 6px;
background-color: #f5f5f5;
z-index:1002;
overflow: auto;
}

.lightbox_table {
    width:100%;
    height:100%;
}
.lightbox_table_cell {
    vertical-align:top;
}