/*
tts3
(c)2010 bei KÜHNE-Webdienste.de

project colors:
  
  content bg  FCF2BD
  titel-text 084981
  bg yellow  FEDE00 
  bg orange  FF9900

  navi bg     178FDD
  navi border 505B4D
  navi hover  A5D5EF
  hover sub   96c3da
  bg sub      0570a5
  trenner sub 37adea

*/  

/*

----------------- resets

*/

*  { padding: 0; margin: 0; border: 0; text-align:left; }
html { height: 100%; margin-bottom: 1px; } /* force FF scrollbar */
ul ul { margin-bottom: 0; }
li { margin-left: 1em ; }

/*

----------------- basics

*/
body {
  background-color: #ff9900;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100.1%;
}
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; }
address {
  text-align: center;
  font-size: 80%;
  font-style: normal;
}
a {
  text-decoration: none;
  /* outline: none; */ /* nur wenn es Sie wirklich stört */
}
a:link,
a:visited,
a:hover,
a:active,
a:focus
{
  text-decoration:none;
  color:blue;
}

.clearing,
.clearer,
.cleaner { clear: both; line-height:0; font-size:0 }


/*

----------------- page

*/
#page {
  background: #ff9900 url(inhalt.gif) repeat-y left top;
  color: black;
  width: 1023px;
  margin: 0 auto;
}

#header {
  position: relative;
  height:379px;
  color: black;
  background: #ff9900 url(kopf_de.jpg) repeat-y left top;
}

#navigation {
  position:relative;
  /* background-color: pink; */ /* zum Testen Kommentar entfernen */
  float: left;
  width: 219px;
  display: inline;
  margin-top:-255px;
}
/* Patch für IE6: 6px weniger */
* html #navigation {
  width: 212px;
}

#main {
  position:relative;
  float: right;
  width: 803px;
 /*  padding: 20px 10px 20px 20px; */ /* zu #content verschoben */
}

  /* Bereiche in #main */
  #content {
    float: left;
    width: 487px;
    /*margin-top:-160px; wenn #header h1#pagetitle dabei */
    margin-top: -185px;
    padding: 0 10px 20px 20px;
  }
  #sidebar {
    float: right;
    width: 241px;
    margin-top: -5px;
    padding: 0 24px 0 0;
  }

#footer {
  clear:both;
  float:none;
  text-align:center;
  background: #ff9900 url(footer.gif);
  color: black;
  font-size:80%;
}

  #footer #bottomofcontent {
    background: #ff9900 url(inhalt.gif) repeat-y left top;
    padding-left: 240px;
    padding-right: 300px;
    padding-top: 30px;
    font-size:90%;
  }
  #footer #bottomofcontent a {
    color: black;
  }
  
  #footer .oben {
    background: #ff9900 url(inhalt_unten.gif) repeat-y top left;
    height:9px;
    margin-bottom:10px;
  }
  
  #footer .unten {
    background: #ff9900 url(seite_unten.gif) repeat-y top left;
    height:16px;
    margin-top:10px;  
  }

/* ----------------- global elements
*/

/* Bilder floaten und mit Rahmen versehen */
.bildlinks {
  float:left;
  padding: 3px;
  border: 5px solid #ccc;
  margin-right: 10px;
  margin-bottom: 10px;
}
.bildrechts {
  float:right;
  padding: 3px;
  border: 5px solid #ccc;
  margin-bottom: 10px;
  margin-left: 10px;
}

.picframe {
  padding:0;
  margin-bottom:1em;
}

a.piclink,
a.piclink:hover,
a.piclink:focus,
a.piclink:active
{
  border:0;
  text-decoration:none;
}

.externallink {
  clear:both;
  float:none;
  margin-top:2em;
}

/* ----------------- header
*/

#header p {
  position:absolute;
  top: 10px ;
  right: 10px;
  padding: 5px 0 5px 0;
  margin-bottom: 0;
}
div#header p span {
  color: #d90000;
}

#flag_de {
  height:25px;
  position:absolute;
  right:380px;
  top:13px;
  width:35px;
}
#flag_br {
  height:25px;
  position:absolute;
  right:297px;
  top:24px;
  width:35px;
}
#flag_en {
  height:25px;
  position:absolute;
  right:339px;
  top:18px;
  width:35px;
}

#link_home {
  height:164px;
  position:absolute;
  right:420px;
  top:0;
  width:380px;
}

#link_home a,
#flag_de a,
#flag_en a,
#flag_br a {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

#header h1#pagetitle {
  position:absolute;
  top:0px;
  left:1px;
  color:#084981;
  color:white;
  font-size:1.1em;
  line-height:1.1em;
}

/* ----------------- navigation
*/

#navigation li {
  list-style-type: none;
  margin: 0;
}
#navigation ul a {
  display: block;
  text-decoration: none;
  font-weight:bold;
  color: white;
  padding: 4px 4px 4px 14px;
  padding-left:27px;
}
/* selektiert (und hover?) */
/*#navigation ul ul a.rex-current,*/
#navigation ul a.rex-current,
#navigation ul a:hover,
#navigation ul a:focus {
  color:#068ED4;
  background-color:#A5D5EF;
}
#navigation ul ul {
  margin-left:25px;
  background-color:#0570A5;
  border-top: 1px solid #37ADEA;
  border-bottom: 1px solid #37ADEA;
}


/*  Logos
*/
#navi_logos {
  border: 1px solid #505B4D;
  background-color: white;
  margin: 40px 20px 20px 25px;
  padding: 10px;
  overflow: hidden;
}
#navi_logos td { 
  padding-bottom:15px; !important
}
#navi_logos h1,h2,h3,h4,p {
  color: #505B4D;
  margin-bottom:1em;
}
#navi_logos .externallink {
  text-align:center;
  margin-top:1em;
}
/* ----------------- main /content
*/

#main a {
  border-bottom: 1px dotted #cc0000;
}
#main a:hover,
#main a:focus {
  border-bottom: 1px solid #d90000;
}
#main h1, #mainh2, #main h3, #main h4, #main p, #main ul, #main ol, #main img { margin-bottom: 1em; }

/* TODO: allgemeine DEfs. für #content UND #sidebar oben ! */

#main .teaser {
  clear:both;
}
#main .teaser img {
  float:right;
  margin: 0 0 10px 5px;
}
#main .teaser h2,
#main .teaser h3,
#main .teaser h4 {
  margin:1em 0 0 0;
  padding:0;
}
#main .teaser p {
 margin: 0;
}
#main .teaser p,
#main .teaser h4 {
  padding:0 20px 0 0;
}

#main .externallink img {
  float:right;
  /*margin:0 0 10px 10px;*/
  border:0;
  margin: 0 0 5px 5px;
}

.pagetop {
  text-align:right;
  margin:0;
  padding:0;
}

#content,
#content p,
#content td {
  color:#000000;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  font-weight:bold;
  color:#084981;
}

#content #pagetitle {
  font-style: italic;
} 

#content .pic a,
#content .picleft a,
#content .picright a,
#content .picklein a,
#content .picdoppel a,
#content .picrand a
 {
  border:0;
}

#content .picleft {
  float:left;
  margin:0 1em 1em 0;
}
/* pic wrapper rechts */
#content .picright {
  float:right;
  margin:0 0 1em 1em;
}

#content .picklein {
  float:right;
  clear:right;
  margin: 0 0 10px 10px;
}
#content .picdoppel {
  float:left;
  padding: 0;
}

#content .picframe {
  border:1px solid #0570A5;
}

/* geht über content und sidebar */
#content .bigpicframe {
  border:1px solid #084981;
}

/* mit right nach rechts schieben, die bilder müssen aber mit margin left aufschließen, das geht aber nur wenn ausschließlich 1 Bild margin-left ändert -> Probleme wenn mehrere Bilder nebeneinander!
*/
#content .sidebarspacer {
  display: none;
/*
  position:relative;
  width:200px;
  height:300px;
  border:1px solid red;
*/
}

#content .externallink img {
  margin: 0 0 20px 5px;
}

#content .teaser {
  margin-bottom:2em;
}

#content .hline {
  border-bottom:1px solid #FF9900;
}


/* ----------------- sidebar
*/


/* -- newsbutton */

#newsbutton {
  height:105px;
  position:absolute;
  right:43px;
  top:-135px;
  width:100px;
}
#newsbutton a {
  display:block;
  width:100%;
  height:100%;
  border:0;
}
#newsbutton a:hover,
#newsbutton a:active,
#newsbutton a:focus {
  border:0;
}

/* -- Text */
#sidebar p, #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6, #sidebar td {
  margin-right:15px;
}
#sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5 {
  color:white;
}
#sidebar p, #sidebar td {
  color:black;
}

#sidebar a,
#sidebar a:hover {
  color:#FEDE00;
}

/* -- Bilder */
/* auch Klassen picleft,piclright beachten, in der sidebar diese erstmal gleichschalten*/
#sidebar .pic,
#sidebar .picleft,
#sidebar .picright {
  float:right;
  clear:both;
  margin-left:auto;
  text-align:left;
  margin:0 0 20px 20px;  
}

#sidebar .pic a,
#sidebar .picleft a,
#sidebar .picright a {
  border:0;
  margin:0;
  padding:0;
}

#sidebar img.picframe {
  border:1px solid #505B4D;
}

/* news teaser */
#sidebar .teaser p {
  font-size:90%;
}
#sidebar .teaser img {
  width:110px;
}

/* ----------- footer
*/
#footer p {
  margin:0;padding:0;
}

/*gleichsetzen mit #sidebar a ! */
#footer a {
  color:white;
}

/* ----------- Seiten-Meta 
*/
/* wenn schrift drüber soll: 
#pageimg {
border:1px solid #505B4D;
height:113px;
left:25px;
position:absolute;
top:20px;
width:183px;
}
*/
#pageimg {
border:1px solid #505B4D;
height:134px;
left:25px;
position:absolute;
top:-1px;
width:183px;
}
#pageimg img {
  position:absolute;
  width:100%;
  height:100%;
}
/* ----------- Flash-Galerie
*/

.monoslideshow {
  float:none;
  clear:both;
  margin-bottom:2em;
}
.mss_galerie {
  margin-bottom:2em;
  background-color:#FFDF61;
  border:1px solid #178FDD; 
}

.mss_album {
  clear:both;
  float:none;
}

.mss_album img {
  float:left;
  margin:0 0.7em 0.7em 0;
}
.mms_album p {
  margin:0 !important; 
  padding:0;
}
/* wieso geht nicht?? */

/* Power-Dance Slideshow */
/*height:182px;
margin:auto;
position:absolute;
right:12px;
top:19px;
width:260px;
*/
#bpd_mss_wrapper {
position:absolute;
top:-1px;
right:24px;
height:228px;
width:240px;
line-height:0;
margin:0;padding:0;
border:1px solid #505B4D;
}
#bpd_mss {
  position:absolute;
  width:100%;
  height:100%;
}

/* ----------- TABELLEN
*/

#content table {
  margin-bottom: 2em;
}

/* MODUL: Kurse-Tabelle */
.daten { 
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.2em;
  margin-bottom: 2em;
}

.daten caption { 
  margin:2px;
  margin-top: 30px;
  padding-bottom: 5px;
  font-size: 1.2em;
  font-weight: bold;
  color: #084981;
  border-bottom:1px solid #178FDD;
}

.daten td { 
  padding: 4px;
  text-align:left;
  vertical-align: top;
  border-bottom:1px solid #178FDD;
  background-color:white;
}

.daten th { 
  padding: 8px 3px;
  text-align: left;
  vertical-align: middle;
  background-color: red;
  font-weight: bold;
  color: black;
}

.daten .subtitle td { 
  padding: 8px 3px;
  background-color: #FFCC66;
  font-weight: bold;
}

.daten tfoot td { 
  padding: 8px;
  background-color: #FF9900;
}

.daten .leer {
  background:none;
}

/* Nur Kurstabelle */
td.tag {
  vertical-align:bottom;
  font-size: 1.2em;
  font-weight: bold;
  background-color:#FCF2BD;
  color:#084981;
  height:2.5em;
}
td.thema {
  font-weight: bold;
  background-color: #FFDF61;
}

/* Nur MODUL: Tabelle  für Preise */

.preisdaten { 
  font-size: 0.9em;
  line-height: 1.2em;
  margin-bottom:2em;
  border-collapse:collapse;
  border:1px solid #178FDD;
}

.preisdaten caption,
h4.preise {
  margin-top: 30px;
  padding: 0 8px 8px 0;
  font-weight: bold;
  color: #084981;
}
.preisdaten caption {
  font-size: 1.2em;
}
h4.preise {
  margin-bottom:0;
  padding-bottom:0;
  font-size:1em;
}

.preisdaten td,
.preisdaten th {
  padding:5px;
  text-align:center;
  border-bottom:1px solid #178FDD;
} 

.preisdaten td {
  vertical-align:top;
}
.preisdaten th {
  vertical-align:bottom; 
  background-color:#FFDF61;
}
.preisdaten .firstrow {
  vertical-align:bottom; 
  background-color:#FFDF61;
  font-weight:bold;
}
.preisdaten .firstcol {
  text-align:left;
  background-color:#FFDF61;
  border-right:1px solid #178FDD;
}

.preisdaten .subtitle td { 
  padding: 8px 3px;
  background-color:#FCF2BD;
  color:black;
}

.preisdaten tfoot td { 
  padding: 8px;
  background-color: #FFCC66;
}

.preisdaten .leer {
  background:none;
}

/* Modul: Lehrer: 
*/

.lehrerkasten {
  clear:both;
  float:none;
  margin-top:1.5em;
  padding-top:1em;
  border-top: 1px solid #FF9900;
}
.lehrerbild {
  border: 1px solid #008000;
  float: right;
  margin-left:1em;
  margin-bottom:1em;
}

/* Modul: Lehrerverzeichnis 
*/
.lehrerverzeichnis td {
  padding: 0 1em 0.5em 0;
}


/* Variation der links tabelle für Logos (navi-adds) */
#navi-adds td.links {
  text-align:center;
}
#navi-adds td.rechts {
  display:none;
}

/* ----------- ABBILDUNGSSEITE 
*/
#abbildung table {
  margin: 3em 0 0 0 !important;
}

/* ----------- MATERIAL
*/


/* Die kleine Galerie */
div.galerie {
  overflow: hidden; /* zum Einschließen der Floats */
  padding: 25px 10px 10px 0;
  margin: 0 3px 3px 0;
}

/* Sternchen-Hack und Holly-Hack
   bewirkt hasLayout für IE6 */
* html div.galerie { height: 1%; }

div.galerie img {
  float: left;
  padding: 4px;
  border: 1px solid #ddd;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  margin-right: 15px;
  margin-bottom: 15px;
}
.rot {
  color:red;
}

.gruen {
  color:#008000;
}

.blau {
  color:#0B65D4;
}

.groesser {
  font-size:1.2em;
}
.kleiner {
  font-size:0.9em;
}


/*.blinkend {
  font-size:12pt;
  color: #008000;
  text-decoration: blink;
}
blink ist veraltete Spec.
*/
/* Beachte, dass die Styles im Frontend-CSS noch einmal definiert werden müssen. */
/* mache Farben des Projektes! */

/* ----------------- globale Elemente die überschreiben sollen:
*/


/* ----------------- print/accessibility
*/

#header h1,
#header h2,
#print-logo {
  position:absolute;
  top:-999em;
}

/* Skiplink ausblenden */
.skiplink {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

#localhost {
  position:fixed;
  color:red;
  right:1px;
  z-index:1000;
}