@charset "utf-8";
/**
 *Website von Tangoyim
 *
 *@link		http://www.tangoyim.de
 *@version	1.0*/

@import url(forms.css);
@import url(microformats.css);
@media print
{

  /* (de) Wechsel der der Schriftgrößen-Maßheinheit zu [pt] - Probleme mit Maßeinheit [px] in Gecko-basierten Browsern vermeiden */
  body { font-size: 10pt; font-family: Garamond, Helvetica, sans-serif; background-image: none !important;}
  /* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
  #head ul, #head img, .phark, #sidebar2, #footer, #videos { display: none; }
  
  /* Sidebar und Content untereinander ausgeben, Zeilenumbruch */
  #sidebar2.print {float: none; width: 95% !important; background-color: #fff !important; background-image: none !important; page-break-after: always;}
  #content {margin-left: 0 !important;}
  #content img {width: auto; height: auto;}
  .background-box {page-break-after: always; background-color: #fff !important;}
  
  /* diese zwei Anweisungen nur für die Startseite, immer noch nicht optimal, aber wer druckt die schon */
  #sidebar1.print {float: none; width: 95% !important; background-color: #fff !important; background-image: none !important;}
  #content .titel {position: static !important;}
 
  /* Ausgabe der Termine */
  .vevent {border: none !important; background-color: #fff !important; margin: 0 !important;}
  li {page-break-inside: avoid;}

  /* (de) Allgemeine CSS Klasse, um beliebige Elemente in der Druckausgabe auszublenden */
  .noprint { display:none; }
  
  /* Klasse, um ausgeblendete Elemente wieder einzublenden (konkret: Termine in sidebar2)*/
  .print {display: block !important;}

    /* (de) vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
  h1,h2,h3,h4,h5,h6 { page-break-after:avoid; }
  #head h1 {font-size: 32pt !important;}
  h2 {font-size: 12pt; color: #012AAE;}
  
  /* Klasse in Seiten Texte: ein Text pro Seite */
  .druckabsatz {page-break-after: always; padding-top: 20px;}
}

@media screen, projection 
{

/*===================== Reset =====================*/

/* fuer den ie5 muessen die im Drucklayout abgeschalteten Elemente noch einmal extra wieder eingeschaltet werden - try-and-error-workaround... */
  #sidebar2, #head ul, #footer { display: block; }

* {
  margin: 0;
  padding: 0;
}

img {
 border: none;
 }

ul {
 list-style: none;
}

/*===================== Schriften, Absätze, Überschriften =====================*/

body, td, th {font: normal 85%/167% "Trebuchet MS", Helvetica, sans-serif;}
 td, th {f\ont-size: 100%}

h1 {
 color: #3b2b20;
 font-family: Candara, "Lucida Sans", Helvetica, sans-serif;
 font-size: 3em;
 line-height: 1.1;
 margin: 0.8em 0;
 }
.phark {
    display: none;
}
h2 {
 font-family: Candara, "Lucida Sans",Georgia,serif;
 font-style:italic;
 color: #980c02;
 font-size: 1.5em;
 line-height: 1.1;
 margin: 1em 0 .8em 0;
 }
h3 {
 font-size: 1.5em;
 line-height: 1.1em;
 margin: 1em 0 0 0;
 }
 
h3.titeltext {
    color: #DEDEDE;
    position: relative;
    left: 450px;
    bottom: 160px;
    font-size: 1.6em;
    line-height: 1.2;
}

hr.rote_linie {
    color: #9F1F16;
    margin: 20px 0 0 0;
}
}
p {
    margin: .8em 0;
}

/*===================== Layout =====================*/

body {

 color: #3b2b20;
 background: url(images/bggeige2.jpg);
 background-attachment: fixed;
}

#rahmen {
 max-width: 900px;
 min-width: 700px;
 margin: auto;
 background-color: white;
 }

#head {
 max-width: 900px;
 min-width: 700px;
 margin: auto;
 position: relative;
 background: #C9945F url(images/titel.png) top right no-repeat;
 } 

/*Sidebar*/
/*sidebar1 ist für die Startseite: feste Höhe orientiert sich am Bild auf der Startseite (720+2*10)*/

#sidebar1 {
 float: left;
 width: 200px;
 height: 720px;
 background: #DCE0E2 url(images/sidebar.gif) repeat-y;
 margin: 0 10px 0 0;
 padding: 10px 10px 10px 15px;
 }

#sidebar2 {
 float: left;
 width: 200px;
 background: #DCE0E2 url(images/sidebar.gif) repeat-y;
 margin: 0 10px 0 0;
 padding: 10px 10px 10px 15px;
 }

#content {
 position: relative;
 background-color: white;
 /* opacity: .9;
 filter: Alpha(opacity = 90); */
 margin: 0 0 0 220px;
 padding: 20px;
 }
 
/* Spaltenbreite auf der Seite Musik */
#sidebar2.side_425 {
    width: 425px;
    background-image: none;
}
#content.side_425 {
    margin-left: 445px;
}

/* Spaltenbreite der Seite Programm */
#sidebar2.side_320 {
    width: 320px;
    background-image: none;
}
#content.side_320 {
    margin-left: 340px;
}    

/*===================== Navigation =====================*/

a:link {
 color: #012AAE;
 background-color: transparent;
 }
a:visited {
 color: #4465CF;
 background-color: transparent;
 }
a:hover, a:focus {
 color: #980c02;
 background-color: transparent;
 text-decoration: none;
 }
a:active {
 color: white;
 background-color: #980c02;
 text-decoration: none;
 }

/*===================== Head und Hauptnavigation =====================*/
                            
#head h1 {
 color: #34211C;
 background-color: transparent;
 font-size: 4.6em;
 margin: 0;
 padding: 0.6em 0 1em 0.9em;
 }

#head h1 span {
 color: #efefef;
 vertical-align: -10px;
 }

#head ul {
 position: absolute;
 bottom: 0;
 right: 26px;
 }

#head ul li {
 float: left;
 list-style: none; 
 margin: 0 8px 0 0;
 }

#head ul a, #head ul strong {
 color: #D2CBC1;
 background: #5B301F url(images/button.png) bottom left repeat-x;
 display: block;
 padding: .8em;
 text-transform: uppercase;
 text-decoration: none;
 }

#head ul strong {
 color: #C9A47F;
 }

#head ul a:hover, #head ul a:focus, #head ul a:active {
 color: white;
 background: #980c02 url(images/buttonactive.png) bottom left repeat-x;
 }

#head .maennchen {
 margin: 0 0 0 330px;
 position: absolute;
 bottom: -28px;
 z-index: 1;
 }

 /*===================== Sidebar =====================*/
#sidebar2 ul {
 list-style-type: none;
 }
 
/*Liste in sidebar Texte und Programm*/

div#sidebar1 ul li, div#sidebar2 ul li {
 background: url(images/navpfeil.gif) 0px 6px no-repeat;
 text-indent: 1em;
 font-size: .9em;
}

div#sidebar1 .vcard {
    padding: 10px;
}

.zufallsbild_sidebar {
    width: 200px;
    height: 150px;
    border: 1px solid white;
    position: relative;
    left: -5px;
    margin: 30px 0;
}

 /*===================== Content und allgemeine Klassen =====================*/
 /* Verwendung bei den Pressetexten im Service */
#content .floatright {
    float: right;
}
#content .floatleft {
    float: left;
}
#content .clear {
    clear: both;
}

#content .pressebox {
    background: #FAFAF9;
    border: 1px solid #efefef;
    padding: 10px;
    width: 45%;
}
#content .kritikbox {
    background: #FAFAF9;
    border: 1px solid #efefef;
    padding: 5px 10px;
    margin-top: 15px;
    width: 90%;
}
/* Verwendung bei diversen Bildern */
#content .img_floatright {
 float: right;
 text-align: right;
 padding: 0 0 0 20px;
   }
#content .img_floatleft {
 float: left;
 padding: 0 40px 0 0;
 }
 
#content .img_clear {
 clear: right;
 padding: 20px 0 0 0;
}
 
.skal_bild {
    width: 100%;
}

/*für die Jovana-Fotos und auf Seite Musik */
.abstand_oben_40 {
    margin-top: 40px;
} 

.abstand_oben_60 {
    margin-top: 60px;
}

/* für die CD-Titel */
#content ol {
    padding-left: 20px;
}

#content .texteinleitung {
 padding: 30px;
 font-size: 1.1em;
 background-color: #dedede;
 margin-bottom: 10px;
 }
 
#content .texteinleitung_luna {
 padding: 30px;
 font-size: 1.1em;
 }
 
 #content .kleiner_text {
     font-size: 0.8em;
 }
 
#content .background-box {
    padding: 20px;
    background-color: #eee;
    border: 1px solid #ccc;
}
 
#content dt {
 font-size: 1.5em;
 padding: 1em 0 .2em 0;
  }

.dropshadow_box {
      background: url(images/dropshadow.png) no-repeat bottom right;
      padding: 0 !important;
      margin: 10px 35px 10px 5px;
  }
.dropshadow_box img {
    margin: -5px 5px 0px -5px;
  }

/* ================== Titelseite ================== */

#content .titel {
 position: absolute;
 top: 0px;
 left: 0px;
 /* height: 740px; */
 }

 
#content .titel h3 {
    position: relative;
     bottom: 600px;
     left: 250px;
     font-size: 1em;
}
 
#content .titel h3 a {
    font: 1.5em "lucida sans";
    font-style: italic;
    color: #C3C1B6;
} 

/* ====================== Seite Programm =========================*/

.zufallsbild_programm {
    width: 80%;
    border: 1px solid white;

}

/* ====================== Seite Musik =============================*/

#content p.buy-cd img {
    position: relative;
    top: 10px;
    margin-left: 25px;
    border: 1px solid #dedede;
}

#content p.buy-cd a:hover {
    background-color: transparent;
}

/* ===================== Seite Texte =======================*/

hr.hrtexte {
    width: 60%;
    height: 3px;
    background-color: #980c02;
}
 /*===================== Seite La Luna =====================*/

#content .luna {
 margin: 0 0 0 -220px;
 padding: 0px 100px 0px 100px;
 background-image: url(images/vollmond.jpg);
 background-repeat: no-repeat;
 background-color: #000000;
 color: #F7F7F7;
 }

 #content .lunatext {
 padding: 20px 20px 20px 100px;
 background-image: url(images/vollmondklein.jpg);
 background-repeat: no-repeat;
 background-color: #000000;
 color: #F7F7F7;
 font-size: 1.1em;
 }
 
#content .lunatext a {
    color: #f7f7f7;
}

#content .spanisch {
 font-weight: bold;
 }

#content .deutsch {
 padding: 0 0 0 20px;
 }

#content .zitat {
 font-style: italic;
 padding: 0 0 0 20px;
 }
  
 /*===================== Fernandos Upload-Seite =====================*/
 
body.ferbody {
    background-color: #C3C1B6;
}

#ferform
{
  width: 500px;
  margin: 50px auto 0;
}

#ferform li
{
    display: block;
    width: 200px;
    background: #eee;
    text-align: center;
    padding: 10px;
    margin: 10px;
}

 /*===================== Formsreceive-Seite =====================*/

.receive {
    padding: 20px;
    background: #eee;
     opacity: .9;
    filter: Alpha(opacity = 90);
}


 /*===================== Footer =====================*/* 

#footer {
 background: #D3CCC2 url(images/strumenti.jpg) top left no-repeat;
 padding: 10px;
 text-align: center;
 clear: both;
  }