@charset "UTF-8";

/***************************************************************************/
/* Prinzipielles Layout der Seite wie Navigation, Daten, Copyright-Footer  */
/***************************************************************************/
/* Der Footer soll ganz unten stehen, auch wenn die Seite nicht ganz voll ist
Ausserdem will ich von den Farben und Hintergrund weitgehende wieder das alte Layout*/
body { background-color: #336290;
      background-image: url('/images/background_side.gif');
      background-repeat: repeat-x; 
      position: absolute; height: 100%; width:100%;
}

/*Menü und Ruler unter dem Menü */
nav { display:block; }
#nav_separator{ margin-top:1px; margin-bottom:5px; border-top: 2px solid grey; } 
    
#used { 
    /*background-image: url('/images/background_data.png');*/
    background-color: #FAFAFA;
    min-height:100%;      /*Hintergrundbild bis zum Screen ganz unten gehen lassen */
    margin-top: -30px;    /* Um den Betrag für das Menü oben verschieben */
    padding-top: 35px;    /* Inhalt nach unten, damit unter Menü */
    padding-bottom: 50px; /*Platz für footer mit gleicher Höhe reservieren */  
}

/* Hier haben wir das Copyright */ 
footer {
      margin-top: -50px; /* Platz für den Footer reservieren, der hat gleiche Höhe */
      height: 50px;  /*Höhe footer, der ist mit gleicher Höhe im #used reserviert */
      font-size:smaller; text-align: center; font-weight: bold; 
}
footer hr { margin:5px; border-top: 2px solid grey; } 

/***************************************************************************/
/* Überschreiben Standard Bootstrap 3 CSS Definitionen                     */
/***************************************************************************/
#jumbotron_header { padding-top: 10px; padding-bottom: 15px; }
#jumbotron_header  h1 { font-size:32px; }

.table { margin-bottom:5px; margin-top:5px; /*statt 20px, top ist neu*/}
.table>tbody>tr>td, .table>tbody>tr>th { padding:3px; }
a                  { color: #000080; text-decoration:none; font-weight: bold;  }
a:hover      { color: #E9E7FE; text-decoration:none; background-color:#265a88;}
a.register              { display:inline-block; width:25px; height:25px; background-color:#000080; color:white; text-align:center; vertical-align: middle}
a.register:hover  { color:red; } /*Beispielsweise genutzt auf der Rezeptseite */
summary { display: list-item; }  //sonst wird kein Icon open/close angezeigt

/***************************************************************************/
/* Definition von Standart Tags ohne Klassen                  */
/***************************************************************************/
table>tbody>tr>td, table>tbody>tr>th { vertical-align:top; padding:3px; }
table>thead  { color:#ffffff; background-color:#337ab7 }  /*analog Menü*/

/***************************************************************************/
/* Speziell für Handies                     */
/***************************************************************************/
/* Icons im Menü bei Screenbreite unter 500px ausblenden */
@media screen and (max-width: 500px) { #main_menu img { display: none; } }

/***************************************************************************/
/* Eigene Bootstrap ähnliche häufig genutzte Definitionen                     */
/***************************************************************************/
#btn-rr-active { color:#F7D600; background-color:#2A6497; border-color:#204d74; background-image:none; }
     
.maildiv { max-width:700px; margin: 0 auto}
#html5warning   { display:none }
#html5warningvisible { background-color:white; padding:15px; margin:10px; border-radius: 15px;}
#rr-webpWarning { background-color:#336290; padding:10px ; color: #ffffff;}

/* beispielsweise für Mail response anzeigen */
.codebox       { font-family: monospace; white-space:pre; display:block; margin:0; padding:0 } 

/*Kommot Wegnummern in einem span element */ 
.rr-komoot-wegpunkt { display: inline-block; width:17px; background-color:#9B1C1C; color:#ffffff; font-weight:bold; text-align:center; border-radius: 10px; font-size:smaller; }
.rr-komoot-endpunkt { display: inline-block; width:17px; background-color:#000000; color:#ffffff; font-weight:bold; text-align:center; border-radius: 10px; font-size:smaller; }
 
.rr-color-red    { color: #ff0000; } 
.rr-color-green  { color: #00ff00; } 
.rr-color-blue   { color: #0000ff; } 
.rr-color-white  { color: #ffffff; } 
.rr-color-purple { color: #CF0F80; } 
.rr-color-komoot { color: #9B1C1C; } 
 
.rr-bg-white { background-color: white; }
.rr-bg-jumbo { background-color: #eee; }

.rr-border-black { border: 1px solid black; }
.rr-border-def { border: 1px solid #ccc; }

.rr-text-alarm { color: red;}
.rr-text-success { color: green;}
.rr-text-bold { font-weight: bold;}

.rr-block-center { margin: 0 auto; display:block; }
.rr-block-clear  { clear:both; }

.rr-font-big        { font-size: 1.2em; }
.rr-font-bigger     { font-size: 1.5em; }
.rr-font-biggest    { font-size: 2.0em; }
.rr-font-small      { font-size: 0.85em; }
.rr-font-smaller    { font-size: 0.75em; }
.rr-font-smallest   { font-size: 0.6em; }

.rr-font-size-xx-small { font-size: xx-small; }
.rr-font-size-x-small  { font-size: x-small; }
.rr-font-size-small    { font-size: small; }
.rr-font-size-medium   { font-size: medium; }	
.rr-font-size-large    { font-size: large; }
.rr-font-size-x-large  { font-size: x-large; }
.rr-font-size-xx-large { font-size: xx-large; }
	
.rr-ruler-top       { clear:both; margin-top:10px; margin-bottom:10px; border-top: 1px solid grey; } 
.rr-ruler-bottom    { clear:both; margin-top:10px; margin-bottom:10px; border-bottom: 1px solid grey; } 

.hr-rr-thin  { border-top: 1px solid grey; } 
.hr-rr-def   { border-top: 2px solid grey; } 
.hr-rr-fat   { border-top: 3px solid grey; } 

.rr-spacer-05 { height:5px; }
.rr-spacer-10 { height:10px; }
.rr-spacer-20 { height:20px; }
.rr-spacer-30 { height:30px; }
.rr-spacer-40 { height:40px; }
.rr-spacer-50 { height:50px; }

.rr-distance-05 { margin-top:  5px; margin-bottom:  5px }
.rr-distance-10 { margin-top: 10px; margin-bottom: 10px }
.rr-distance-15 { margin-top: 15px; margin-bottom: 15px }
.rr-distance-20 { margin-top: 20px; margin-bottom: 20px }
.rr-distance-30 { margin-top: 30px; margin-bottom: 30px }

.rr-margin-03 { margin:  3px; }
.rr-margin-05 { margin:  5px; }
.rr-margin-10 { margin: 10px; }
.rr-margin-20 { margin: 20px; }
.rr-margin-30 { margin: 30px; }
.rr-margin-50 { margin: 50px; }

.rr-margin-left-03 { margin-left:  3px; }
.rr-margin-left-05 { margin-left:  5px; }
.rr-margin-left-10 { margin-left: 10px; }
.rr-margin-left-20 { margin-left: 20px; }
.rr-margin-left-30 { margin-left: 30px; }
.rr-margin-left-50 { margin-left: 50px; }

.rr-margin-right-03 { margin-right:  3px; }
.rr-margin-right-05 { margin-right:  5px; }
.rr-margin-right-10 { margin-right: 10px; }
.rr-margin-right-20 { margin-right: 20px; }
.rr-margin-right-30 { margin-right: 30px; }
.rr-margin-right-50 { margin-right: 50px; }

.rr-padding-03 { padding:  3px; }
.rr-padding-05 { padding:  5px; }
.rr-padding-10 { padding: 10px; }
.rr-padding-20 { padding: 20px; }
.rr-padding-30 { padding: 30px; }
.rr-padding-50 { padding: 50px; }

.rr-padding-left-10 { padding-left:10px; }
.rr-padding-left-15 { padding-left:15px; }
.rr-padding-left-20 { padding-left:20px; }
.rr-padding-left-30 { padding-left:30px; }
.rr-padding-left-50 { padding-left:50px; }

.rr-padding-right-10 { padding-right:10px; }
.rr-padding-right-15 { padding-right:15px; }
.rr-padding-right-20 { padding-right:20px; }
.rr-padding-right-30 { padding-right:30px; }
.rr-padding-right-50 { padding-right:50px; }

.rr-maxwidth-100 { max-width: 100px;}
.rr-maxwidth-200 { max-width: 200px;}
.rr-maxwidth-300 { max-width: 300px;}
.rr-maxwidth-400 { max-width: 400px;}
.rr-maxwidth-500 { max-width: 500px;}
.rr-maxwidth-600 { max-width: 600px;}
.rr-maxwidth-700 { max-width: 700px;}
.rr-maxwidth-800 { max-width: 800px;}
.rr-maxwidth-900 { max-width: 900px;}

.rr-table-sum    { font-weight: bold; border-top: black 2px solid; }
.rr-notiz        { white-space: pre-line ; }              /* macht div zu pre, bricht aber lange Zeilen um */
.rr-icon         { margin-left:2px; margin-right:2px; }   /*Icons sollen seitlich immer etwas Abstand halten */

//Verwenden mit span-Element für feste Breiten wie in Tabellen 
.rr-fixed-width-10  { display: inline-block; width:  10px; }
.rr-fixed-width-15  { display: inline-block; width:  15px; }
.rr-fixed-width-20  { display: inline-block; width:  20px; }
.rr-fixed-width-25  { display: inline-block; width:  25px; }
.rr-fixed-width-30  { display: inline-block; width:  30px; }
.rr-fixed-width-35  { display: inline-block; width:  35px; }
.rr-fixed-width-40  { display: inline-block; width:  40px; }
.rr-fixed-width-50  { display: inline-block; width:  50px; }
.rr-fixed-width-60  { display: inline-block; width:  60px; }
.rr-fixed-width-70  { display: inline-block; width:  70px; }
.rr-fixed-width-80  { display: inline-block; width:  80px; }
.rr-fixed-width-90  { display: inline-block; width:  90px; }
.rr-fixed-width-100 { display: inline-block; width: 100px; }
.rr-fixed-width-150 { display: inline-block; width: 150px; }
.rr-fixed-width-200 { display: inline-block; width: 200px; }
.rr-fixed-width-250 { display: inline-block; width: 250px; }
.rr-fixed-width-300 { display: inline-block; width: 300px; }

.rr-percent-width-10  { display: inline-block; width:  10%; }
.rr-percent-width-15  { display: inline-block; width:  15%; }
.rr-percent-width-16  { display: inline-block; width:  16.6%; /*1-sechstel der Breite*/}
.rr-percent-width-20  { display: inline-block; width:  20%; }
.rr-percent-width-25  { display: inline-block; width:  25%; }
.rr-percent-width-30  { display: inline-block; width:  30%; }
.rr-percent-width-33  { display: inline-block; width:  33.3%; /*1-drittel der Breite*/}
.rr-percent-width-35  { display: inline-block; width:  35%; }
.rr-percent-width-40  { display: inline-block; width:  40%; }
.rr-percent-width-50  { display: inline-block; width:  50%; }
.rr-percent-width-60  { display: inline-block; width:  60%; }
.rr-percent-width-66  { display: inline-block; width:  66.6%; /*2-drittel der Breite*/}
.rr-percent-width-70  { display: inline-block; width:  70%; }
.rr-percent-width-80  { display: inline-block; width:  80%; }
.rr-percent-width-90  { display: inline-block; width:  90%; }
.rr-percent-width-100 { display: inline-block; width: 100%; }

/*******************************************************************************/
/* Listen im Kopf einer Reiseseite neben den Google-Maps, <ul> mit <li> Ersatz */
/* Eine normale Liste <ul> im div mit style="display:flex" ginge auch ******** */ 
/*******************************************************************************/
.rr-listitem          { display: flex; align-items: start; }
.rr-listitem>div      { margin-left: 0.5em; }
.rr-listitem:before   { content:"\2022"; font-weight:800; }
/***************************************************************************/
/* Ein paar Definitionen zum Toggeln von Texten (siehe HTML Forum)         */
/***************************************************************************/
.show-more            { display: none; }
.collapsed .show-more { display: inline; }
.collapsed .show-less { display: none; }

/***************************************************************************/
/* Ein paar Definitionen, hauptsächlich verwendet in PHP.NetAktiv.de       */
/***************************************************************************/
/* Für Anzeige der Debug-Ergebnisse */
.parameter caption { font-weight: bold; font-size:1.2em; color:black;}
.parameter  td, .parameter th { word-wrap:break-word;  max-width:650px; padding:5px; font-size: 85%;}

canvas {  width: 100%; height: auto; }
table caption { font-weight: bold; color:black; }

/***************************************************************************/
/* Formatierung des eigenen Gästebuches                                    */
/***************************************************************************/
.GB_Container { max-width: 850px; margin:0 auto}
.GB_Container hr { border-top: 2px solid grey; margin:5px; }
.GB_links   { background-color:#eee; padding-bottom:10px }
.GB_entry-list { background-color: #fff; padding: 10px}
.GB_entry  { padding: 10px; }
.GB_entry_odd { }
.GB_entry_even { }

/***************************************************************************/
/* Fehlerbehandlung wie PHP Exception und Debug Events                     */
/***************************************************************************/
.alarm     { background:WhiteSmoke; width:600px; margin: 0 auto; padding:10px; margin-top:15px; }
.alarmhead { color:red; font-size:18pt; font-weight:bold; }
.alarmtext { color:blue; font-size:12pt; margin-top:15px; }
.alarmtech { font-family: monospace; font-size:10pt; white-space: pre;  }
.alarmdebughead { font-family: monospace; color:green; padding:1px}
.alarmdebugdump { font-family: monospace; font-size:10pt; white-space: pre;  }
.alarm_details_hide { display: none; max-width:850px; word-wrap:break-word }
.alarm_details_button { text-align:right; font-size:9pt; padding-right:20px }

/********************************************************************************/
/* Die Sortieranzeigen in Tabellen mit dem Tablesorter                          */
/* Klassennamen haben sich geändert von header, headerSortUp und headerSortDown */ 
/* zu tablesorter-unsorted, tablesorter-headerAsc und tablesorter-headerDesc    */
/********************************************************************************/
table.tablesorter thead tr .tablesorter-header {
	background-image: url(/images/tablesorter_bg.gif);
	background-repeat: no-repeat;
	background-position: center left;
	cursor: pointer;
}
table.tablesorter thead tr .tablesorter-headerSortUp   { 
    background-image: url(/images/tablesorter_asc.gif);
    background-repeat: no-repeat; 
    background-position: center left;
    cursor: pointer;
}
table.tablesorter thead tr .tablesorter-headerSortDown { 
    background-image: url(/images/tablesorter_desc.gif);
    background-repeat: no-repeat;  
    background-position: center left;
    cursor: pointer;
}

/********************************************************************************/
/* viewpoint Tabellen haben zwei Spalten und werden responsive, indem man die   */
/* beiden Spalten zu Zeilen macht und die erste Spalte wird die Überschrift     */ 
/********************************************************************************/
table.rr-viewpoint-table > caption { background: #eee; }                          /* Überschrift grau hinterlegt */		
table.rr-viewpoint-table > tbody > tr > td { border-bottom: 1px solid #0d0d0d; }     /* Zelle unten als Begrenzung Strich */
table.rr-viewpoint-table > tbody > tr > td:nth-child(1) { white-space: nowrap; }     /* Spalte 1 nicht umbrechen */
table.rr-viewpoint-table > tbody > tr > td { vertical-align: top; padding: 3px}      /* Text in Zelle oben und Abstand 3px */
table.rr-viewpoint-table > thead > tr > th { vertical-align: top; padding: 3px}      /* Text in Zelle oben und Abstand 3px */
		
@media screen and (max-width: 540px) {
	
	/*Für mobile schmale Geräte, die Hochkant genommen werden */
	table.rr-viewpoint-table > thead   { display: none; }	        /* Table Head ganz ausblenden */		
	table.rr-viewpoint-table > tbody > tr { display: block; }	    /* Aus Spalten werden Zeilen */		
	table.rr-viewpoint-table > tbody > tr > td { display: block; }	/* Aus Spalten werden Zeilen */		
	table.rr-viewpoint-table > tbody > tr > td:nth-child(1) {
		font-weight: bold;  /* Erste Spalte fett als Überschrift */
		border-bottom: 0;   /* Kein Strich unter der fetten Überschrift */
	}
}
		
/**************************************************************************************/
/* reponsive-table Tabellen haben zwei Spalten und jede Spalte enthält mehrere        */
/* durch <span class='.rr-fixed-width-XX'> gebildete Unterspalten. Die Tabelle wird   */
/* responsive, indem die beiden Süalten der Tabelle bleiben, die span-Spalten aber    */
/* zu Blöcken werden, die untereinander angeordnet sind. Die Span Default width 33%   */
/* geht von 3 Sub-Spalten aus und muss eventuell je nach Layout im HTML überschrieben */
/* werden.                                                                            */ 
/**************************************************************************************/
	.rr-reponsive-table { width:100%; }
	.rr-reponsive-table > thead > tr > th        { border-bottom: 1px solid #0d0d0d; vertical-align: top; } 
	.rr-reponsive-table > thead > tr > th > span { display: inline-block; vertical-align: top; width:33%} 
	.rr-reponsive-table > tbody > tr > td        { border-bottom: 1px solid #0d0d0d; vertical-align: top; } 
	.rr-reponsive-table > tbody > tr > td > span { display: inline-block; vertical-align: top; width:33%} 
	
	@media screen and (max-width:600px) { 
		.rr-reponsive-table > thead > tr > th > span { display: block; width:100% !important; text-align: left !important } 
		.rr-reponsive-table > tbody > tr > td > span { display: block; width:100% !important; text-align: left !important } 
	}
	
/********************************************************************************/
/* Container für Bildersammlungen, vor allem das neue Flex-Layout eingeführt am */
/* 13.06.2025 mit all ihren Sub-Elementen steuern wir nun über Klassen          */ 
/********************************************************************************/
/*Der Grid-Container mit seinen Bild-Elementen */
.rr-gridThumbContainer 	{}
.rr-gridThumbImgDiv 	{ text-align:center; font-size: 85%;}

/*Der Flex-Container mit seinen Bild-Elementen */
.rr-flexThumbContainer 	{ display:flex; flex-flow: row wrap; justify-content: space-around; } 
.rr-flexThumbImgDiv 	{ text-align:center; font-size: 85%; }
.rr-flexThumbImgDiv img { max-width: 100%; height: auto; flex: 1 1 auto; }
/*Wir machen die Bilder kleiner, wenn man ein Smartphone hochkannt nutzt */
@media screen and (max-width:440px) { .rr-flexThumbImgDiv { width:160px; }}
@media screen and (max-width:360px) { .rr-flexThumbImgDiv { width:130px; }}