/*##### Lesebereich ###############################################################################*/

#wrapmain
{
  width: 826px;                               /* Feste Breite einstellen
                                                 Breite wrap + 2* wrap-margin = 822 + 2*2 = 826
												 Damit liegen wir deutlich unter 1024, der minimalen Breite.
										      */
  margin-left:auto;                           /* die folgenden beiden Regeln zentrieren den Lesebereich */
  margin-right:auto;
  margin-top: 10px;                           /* ein wenig Abstand von oben */
  margin-bottom: 50px;                        /* ansonsten wird z.B. beim Chrome der Schatten unten abgeschnitten */
}

#wrapmargin
{
  width: 822px;                               /* Breite wrap */
  padding: 2px;                               /* Rahmenbreite des wraps */
  background: #800000;
}

#wrap 
{
  background: #1C1E1C;
} 
  
/*
Shadow: eigentlich CSS3 Funktionalität, kann bereits jetzt mit browser spezifischen Styles
        abgebildet werden.
		Für IE kann man keine abgerundeten Ecken machen.
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
*/
.shadow
{		
  -moz-box-shadow: 14px 10px 20px #000000;		
  -webkit-box-shadow: 14px 10px 20px #000000;		
  box-shadow: 14px 10px 20px #000000;		
  /* For IE 8 */		
  -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=135, Color='#000000');		
  /* For IE 5.5 - 7 */		
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=135, Color='#000000');	
}  
  
/*##### Headerbereich #############################################################################
Der Headerbereich Überschrift, Bilderreihe und top menu (siehe unten).
Berechnung der header Breite:
7*106px (Bildbreite) + 8*10px (Absände) = 822px --> siehe wrapmargin oben
*/

#header
{
  padding-left: 10px;
  padding-right: 10px;
}

#header #imgline img.ir 
{ 
  float: left;
  margin-right: 10px;                        /* Abstand zwischen den Bildern */
  margin-bottom: 10px;                       /* Abstand zum Top-Menu; bei Änderungen muss der Wert für #irr ebenfalls geändert werden  */
}
#header #imgline img.irr                                             /* Selektor für rechtes Bild (kein margin-right) */
{ 
  float: left;
  margin-bottom: 10px;                       /* Abstand zum Top-Menu  */
}
#header h1#ar                                                                  /* Überschrift im Header */
{ 
  float: left;
  font-size: 2.50em;                            
  margin-top: 30px;
  margin-bottom: 25px;
}
#header h1#ar a
{ 
  color: #FFFFFF;
  text-decoration: none;                      /* Darstellung als normaler Text */
  line-height: 1em;                           /* hier muss der entsprechende Wert von body zurückgestzt werden
                                                 sonst gibt's Probleme mit IE7 */
}
#header h1#ar a:hover
{
  color: #FFFFFF;
  background: #800000;                        /* um hover Effekt zu erzielen darf :visited nicht gesetzt werden */
}
#header p#r                                                                        /* rechte Seite */
{ 
  color: #FFFFFF;
  float: right;
  font-style: italic;
  margin-top: 50px;                           /* die Ausrichtung unten erfolgt über Pixelabstände, d.h. kann 
                                                 durcheinander kommen, falls man die Schriftgröße ändert. */
}

/*##### top menu ##################################################################################*/

#toplevel
{
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 20px;                        /* Abstand zur main content area */
  float: left;                                /* sorgt für Orientierung an der linken Seite; diese eine Stelle genügt!! */
  font-weight: bold;                          /* Menu in bold anzeigen */
}

#toplevel li 
{ 
  margin-left: 0;                             /* kompensiert globale li Einstellung */
  display: inline;                            /* erzeugt verikales Menu */
}

#toplevel li a
{
  margin-right: 2em;
  padding-top: 0.2em;
  color: #FFFFFF;                             /* Vordergrund */
  text-decoration: none;                      /* Darstellung als normaler Text */ 
}

#toplevel li a:hover
{
  color: #FFFFFF;                             /* dezenter Hoover Effekt */
  background: #800000;
}

a.alang
{
  float: right;
  margin-left: 9px;
}

/*##### main menu #################################################################################*/

#sidebar 
{
  float:left;
  width:160px;                                /* entspricht der (nicht beinflussbaren) Breite der google ads */
  overflow: hidden;
  padding: 15px;                              /* einheitlicher Innenabstand */
  background: #610000;                        /* Hintergrundfarbe leicht unterschiedlich zum Hauptton */
} 

#googleads
{
  padding-top: 40px; 
}

#main_menu > li 
{
  list-style-type: none;                      /* kein Listen-Symbol für toplevel Einträge */
  margin-left: 0px;
}

/*##### toplevel einstellungen */

#main_menu > li > a:link, #main_menu > li > a:visited, #main_menu > li > a:active
{
  display: block;
  height: 30px;                               /* entspricht der Höhe des Button-Bildes */
  color: #FFFFFF;                             
  padding-top: 0.4em;                         /* Abstand der Buttons der obersten Ebene; gleichzeitig Ausrichtung des Textes */
  padding-left: 10px;                         /* Einrückungen des Textes; muss mit dem weißen Dreieck abgestimmt sein*/
  font-weight: bold;                          /* Menu in bold anzeigen */
  border: 0;
  background-image: url('../images/button_bg.png');
  background-repeat: repeat-x;
  text-decoration: none;                      /* kein Unterstrich für Menu-Einträge */
}

#main_menu > li > a:hover 
{
  background-image: url('../images/button_hover_bg.png');
}

/* weißes Dreick kennzeichnet das aktive Element */
#main_menu > li.active > a
{
  padding-left: 0px;                          /* padding zurücksetzen damit Dreieck Platz hat */
}

#main_menu > li.active > a:before                               /* funktioniert nicht für IE7 (da :before nicht richtig unterstützt wird
												 workaround: im php file über Browserweiche padding überschreiben
												 und link unterstreichen; ab IE8 kein Problem mehr */
{
  content: url('../images/button_curr.gif');  /* für aktiven Menupunkt kleines Dreieck anzeigen (Breite 10px) */
}

/*##### Einstellungen für Ebene 1 */
/* Die Verwendung von list-style-image ist problematisch, da man die vertikale Position nicht
   wirklich beeinflussen kann. ==> als background image einbinden und mit padding/margin positionieren.
   Der Wert von 20 korreliert zur Einrückung von Listen (siehe unten).
   
   Die Größe von indent1.png -> 13x13 
*/

#main_menu > li> ul
{
	margin-left: -20px;
}

#main_menu > li> ul > li
{
  margin-left: 20px;
  padding-left: 20px;
  
  list-style-type: none;                      /* background image; den Rest ausschalten */
  background-image: url('../images/indent1.gif');
  background-repeat: no-repeat;
	
  margin-bottom: 3px;                         /* regelt den Abstand der Menueinträge */
}

/* weisser Text ohne Dekoration */
#main_menu > li> ul > li > a:link, #main_menu > li> ul > li > a:visited 
{
  color: #FFFFFF;                             
  text-decoration: none; 
}

#main_menu > li> ul > li > a:hover
{
	color: #800000;
	background: #FFFFFF;
}

#main_menu > li> ul > li.active a
{
  text-decoration: underline; 
}

/*#####  Einstellungen für Ebene 2 */
/* Im Prinzip das gleiche Vorgehen wie in Ebene 1.
   Die Größe von indent1.gif -> 9x9; damit die Ausrichtung passt, wird das Bild auf 9x13 vergrößert.
   Transparente pngs werden eigentlcih flexibler, können aber von IE7 oder kleiner nicht dargestellt 
   werden.
*/

#main_menu > li> ul > li > ul
{
  margin-left: -18px;
}

#main_menu > li> ul > li > ul > li
{
  margin-left: 18px;
  padding-left: 12px;                         /* etwas näher an den Kreis ran, damit die Proportionen stimmen */
  
  list-style-type: none;                      /* background image; den Rest ausschalten */
  background-image: url('../images/indent2.gif');
  background-repeat: no-repeat;
  
  /* hier kein margin; dadurch wird die Zusammenhörigkeit der Ebene 2 klarer */
}

#main_menu > li> ul > li > ul > li a:link, #main_menu > li> ul > li > ul > li a:visited
{
  color: #FFFFFF;                             
  text-decoration: none; 
}

#main_menu > li> ul > li > ul > li a:hover
{
	color: #800000;
	background: #FFFFFF;
}

#main_menu > li> ul > li > ul > li.active
{
  color: #FFFFFF;   
  text-decoration: underline; 
}

#main_menu > li> ul > li > ul > li.active a:hover
{
  color: #800000;
  background: #FFFFFF;
  text-decoration: underline; 
}

/*##### Inhaltsbereich ############################################################################*/

#main
{
  background: white;
  clear: both;
  padding: 10px;                              /* einheitlicher Innenabstand */
}

#content 
{
  width:602px;                                /* das padding (siehe inside Regel unten, ca. 4%) muss abgezogen werden */
  float: right;
  margin-left: 10px;                          /* einheitlicher Innenabstand für die content area */
} 

/*##### Footer #####################################################################################*/

#footer 
{
  clear:both;                                 /* Rücksetzen des flaotings */
  height: 30px;
  margin-top: 10px;
  padding-top: 2px;
  padding-left: 10px;
  color: #FFFFFF;
  background-image: url('../images/footer_bg.png');
  background-repeat: repeat-x;
  font-weight: bold;
} 

#footer #fl                                   /* linke Seite des Footers */
{
  float: left;
}

#footer #fr                                   /* rechte Seite des Footers */
{
  float: right;
  margin-right: 10px;
  margin-top: 3px;
}

#footer #fc1
{
  margin-left: 275px;       /* manuelles zentrieren, ansonsten kommt man mit den floating in Konflickt */
}

#footer #fc2
{
  font-size: xx-small;
  font-weight: normal;
  text-align: center;
}

#footer #fc2 a:link, #footer #fc2  a:visited, #footer #fc2  a:active
{
  text-decoration: underline; 
  color: white
}

.navbtn
{
  border: solid 1px white;                    /* Rahmen für die Navigations-Button */
}

/* ##### customize.css #############################################################################
Hierunter werden alle Styles für Standard HTML tags gesammelt.
*/

*                                             /* Setzt Abstände global zurück und sorgt damit für einheitliches Aussehen über alle
                          Elemente */
{
  margin: 0;
  padding: 0;
} 

body
{
  font-size: 0.8em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #610000;                        /* äußere Hintergrundfarbe */
  color: #000000;
}

li                   
{
  margin-left: 25px;                          /* Setzt Einrückung für Listen */
}

hr
{
  background-color: #800000;
  color: #800000;
  margin-bottom: 1em;
}

/* ##### Joomla! styles ############################################################################*/


ul.actions 
{
  list-style-type: none; 
  float: right;
  margin-top: -48px; /* align print button on the top */
}

ul.actions li
{
  display: inline;
}

ul.actions li a:hover img                                                                       /* avoid hover effect for print icon */
{
  background: #FFFFFF;
  color:  #006600;
}


#content h1           /* Überschrift für Inhalte und Komponenten */
{
  color: #800000;                           
  font-size: 1.8em;
  font-weight: normal;
  padding-bottom: 20px;
}

#content h2
{
  padding-bottom: 1em;
  font-weight: bold;
  font-size: 1.4em;
}
#content h3
{
  font-weight: normal;
  font-size: 0.8em;
  padding-bottom: 0.3em;
}
#content h4
{
  font-weight: bold;
  font-size: 1.2em;
  padding-bottom: 0.8em;
}

.pagination 
{
  margin-top: 1em;
/*  float: left;*/
}

.pagination ul li
{
  display: inline;
  margin-left: 0px;
}
.pagination ul 
{
list-style-type: none; 
}

.pagenavcounter
{
  font-size: 0.8em;
  padding-bottom: 0.5em;
  float: right;
}


#content p
{
  padding-bottom: 0.5em;
}

/* Behandlung von links: Komplementär-Farbe zu #800000 
Die Verwendung von bold-Style ist schlecht, da es dann das Layout der Tabelle verändert.
*/
#content a
{
  color: #006600;
  font-weight: normal;  
  text-decoration: underline;
}

#content a:hover
{
  text-decoration: underline;
  color: #FFFFFF;
  background:  #006600;
}

/* Listen
   Alternative Ansatz unterwendung von Hintergrundbildern
   Problem: IE 7.0 ignoriert padding-left und rück trotzdem ein.
#content ul
{
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#content ul li
{
  padding-left: 30px;
  background-image: url('listbullet1.gif');
  background-repeat: no-repeat;
  background-position: 0 3px;
}
*/

#content ul 
{
  list-style-image: url('../images/indent1_list.gif');
  padding-bottom: 1em;
}

/* sorgt für etwas Abstand zwischen dem Bild und dem Beginn des Textes */

#content ul li 
{
  padding-left: 0.3em;
}

#content ul ul 
{
  list-style-image: url('../images/indent2_list.gif')
}
#content ul ul ul 
{
  list-style-image: url('../images/indent3_list.gif')
}

#content ul.linklist li
{
  padding-left: 0.3em;
  padding-bottom: 1em;
}

/* Tabelle für Tagesübersichten von Reiseberichten */

#content table.daylist
{
  border-collapse: collapse;
  margin-bottom: 0.5em;
}

#content  table.daylist td, th
{
  border:1px dotted black;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
  text-align: left;
}

#content table.daylist td.ar
{
  text-align: right;
}

#content div.contact fieldset
{
	border: 0px;
}

#content div.blog div.items-row
{
	margin-top: 3em;
}

#content .vbContainer h2                                             /* Einstellungen wie h1*/
{                                            /* Aus irgendwelchen wird an dieser Ecke ein h2 generiert */
  color: #800000;                           
  font-size: 1.8em;
  font-weight: normal;
  padding-bottom: 20px;
}

#content .search  fieldset, #content form#searchForm .form-limit
{
	margin-top: 1em;
}

#content .search form#searchForm 
{
	margin-bottom: 2em;
}

.modified
{
  color: silver;
  font-size: xx-small;
}

/*##### selber definierte Styles ####################################################################*/

/* Tabulatoren */

.tab1
{
  padding-left: 30px;                         /* Einrückung Tiefe 1 */
}

/* Impressum */

.impressum
{
  line-height: normal;
  font-size: small;
}

.impressumH
{
  font-size: small;
  font-weight: bold;
}

/* zentrierte Darstellung von Fotos (Bildern) */

table.pic  
{
  border-collapse:collapse;
  margin-left:auto;                           /* die folgenden Regeln zentrieren */
  margin-right:auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

#content table.pic  a:hover
{
  background: #FFFFFF;
  color:  #006600;
}

table.pic  td , table.picl td , table.picr td                   /* Bildunterschrift */
{
  font-size: x-small;
  font-weight: bold; 
  text-align: center;
  vertical-align: top;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;                         
  border-collapse:collapse;
}

table.pic  td.space                                                           /* etwas mehr Abstand nach unten, falls man mehr als eine Reihe von bildern hat */
{
  padding-bottom: 20px;
}

table.pic img, table.picl img , table.picr img             /* schmaler Rand um die Bilder zur Kontrasterhöhung */
{
  border-style: solid; 
  border-width: 1px; 
  border-color: black; 
  padding: 2px;
}

/* linksbündige Darstellung eines Bildes */

table.picl  
{
  border-collapse:collapse;
  float: left;
  margin-right: 10px;
}

/* rechtssbündige Darstellung eines Bildes */

table.picr  
{
  border-collapse:collapse;
  float: right;
  margin-left: 10px;
}

img.center 
{
  display: block;                             /* dadurch vermeidet man das äußere align="center" */
  border: 0;
  margin-left:auto;                           /* die folgenden Regeln zentrieren */
  margin-right:auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

img.left
{
  border: 0px;
  float: left;
  margin-right: 10px;
}

img.right
{
  border: 0px;
  float: right;
  margin-left: 10px;
}

img.piclink {
  border: 0;
}

img.picinl {
  padding: 5px 10px 5px 10px;
  border: 0;
}

img.gm {
	vertical-align: -1px;
	padding-left: 2px
}