@charset "UTF-8";


body {

background-image: url(/Bilder/Hintergrund/hintergrund16.jpg);
text-align: center; /* Hiermit wird alles zentriert (wichtig für IE)*/
}

#container { /* Ist daf𲠧edacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz auࠥn am Fenster ist. */

  font-size: 0.8em; /* Ein Kompromiss 𢥲 den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgr򟥠f𲠺u gro߬ wissen aber nicht wie man das 寤ert. */
  border: 2px solid #aaa; /* Eine kleine optische Abgrenzung. */
  border-top: 0; /* Ganz oben allerdings w𲤥 es mit dem grauen komisch aussehen, deshalb weg damit. */
  background: #FFFFE0; /* grau: e2e2e2     gelb: #ffffcc*   blau: 87CEFA   cyan: E0FFFF*/

  margin: auto; /* Hiermit zentrieren wir unsere Seite. */

  width: 980px;
}


/* Das Stralsund-Bild*/
#hptitel {
background: url(/Bilder/Stralsund/HST32.jpg);
height:250px;
width: 100%;
}

/* der Stralsund-Text */
#hptitel td {
color:white;
text-align:left;
font-size:2em;
padding:0.4em 0 0 0.4em;
}

/* Menü über dem Stralsund-Foto */
/* ------------------------------------------------------------------------------ */

/* zuerst werden Breite, Höhe und Rahmen definiert */
#Menue_top {
width: 100%;
height: 10px;
padding: 0px;
margin: 0px 0px 0px 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#Menue1000_top ul {
width: 100%;
height: 18px;
padding: 0px;
margin: 0px;
float: left;
list-style-type:none;
padding: 0px;
margin: 0;
background-color: #FFFFFF;

}

/* die Listenelementen des Navigationsbereiches werden nebeneinander angeordnet*/
#Menue1000_top li {
display: inline; /* li nebeneinander anzeigen */
list-style-type: none; /* ohne Aufzählungspunkte */
}

/* Einrücken und Definieren der Ankerelemente über dem Stralsund-Bild*/
#menue1000_top a, #menue1000_top a:visited {
display: inline; /* li nebeneinander anzeigen */
list-style-type: none; /* ohne Aufzählungspunkte */
float: left;
width: 120px;
/*height: 12px;*/
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;

background-color: #FFFFFF;
border-right: 1px solid #000000;
}

/* id="menue1000_top Eigenschaften span und span: visited werden definiert (das ist NUR das Datum über dem Stralsund-Bild*/
#menue1000_top span, #menue1000_top span:visited {
float: right;
width: 205px;
height: 13px;
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 11px;
font-weight: normal;
text-align: right;
text-decoration: none;
color: #000000;
padding: 4px 0px 0px 4px;

border-right: 1px solid #FFFFFF;
}
/* hier endet das Menü über dem Stralsund-Foto */
/* ------------------------------------------------------------------------------ */

/* Altes Menü: Hier beginnt das Menü unter dem Foto */
/* ------------------------------------------------------------------------------ */
#Menue {
width: 100%;
height: 25px;
padding: 0px;
margin: 0px 0px 0px 0px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

#Menue1000 ul {
width: 100%;
padding: 0px;
margin: 0px;
float: left;
list-style-type:none;
padding: 0px;
margin: 0;
background-color: #FFE237;
}

/* die Listenelementen des Navigationsbereiches werden nebeneinander angeordnet*/
#Menue1000 li {
display: inline; /* li nebeneinander anzeigen */
list-style-type: none; /* ohne Aufzählungspunkte */
}

#menue1000 a, #menue1000 a:visited {
float: left;
width: 111px;													// 120 ist die Breite der Menü-Felder unter dem HST-Foto
height: 21px;
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px 0px 0px 4px;
background-color: #FFE237;
border-right: 1px solid #FFFFFF;
}

#menue1000 span, #menue1000 span:visited {
float: left;
width: 50px;												    // 140 ist die Breite des ganz linken, bisher leeren Menü-Feldes
height: 21px;
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px 0px 0px 4px;
background-color: #FFE237;
border-right: 1px solid #FFFFFF;
}

#menue1000 a:hover {
background-color: #5CA316;
color: #FFFFFF;
text-decoration: none; /* none: Links nicht unterstrichen     underline: unterstrichen  ;*/
}

/* Inhaltstabelle */
#Inhalt {
width: 95%;
margin: auto;
font-size: 14px;
text-align:left; /* Hiermit wird der Text wieder aus der Zentrierung "entlassen"*/
text-decoration: none;
}

/* für Tabellen-Darstellung der Tagebuchseiten*/
#Tabelle_Design {
margin-bottom: 50px;			/* Abstand des unteren Tabellen-Endes zum Seitenende  ;*/
}


#Tabelle_Design td {
    height: 28px;
}

#Tabelle_Design table {
    border-collapse: seperate;

}

/* für Tabellen-Darstellung, Abstand zum unteren Ende */
#Tabelle_Abstand_unten {
margin-bottom: 50px;
WIDTH="100%;
}


/* --------------------------------------------------------------------------------- */
/* Definition der 6 Spalten für die Darstellung der Berichte auf den Tagebuch-Seiten */
/* Spalte_1: Zähler   Spalte_2:Datum    Spalte_3: Ereignis     Spalte_4: Button "Bericht"   Spalte_5: Button "Bla Bla"   Spalte_6: counter für Kommentare*/
#spalte_1 {
	width: 3%;
}
#spalte_2 {
	width: 14%;
}
#spalte_3 {
	width: 64%;
}
#spalte_4 {
	width: 9%;
}
#spalte_5 {
	width: 9%;
}
#spalte_6 {
	width: 1%;
}
/* --------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------- */
/*nachfolgend werden styles für die Tagebuch-Seiten vorgenommen*/

/* Spalte1: berichtcounter gibt die fortlaufende Nummer des Berichtes an (siehe auch Dateinamen */
#berichtcounter {

	font-style:italic;
	font-size:xx-large;
	padding-left:3px;
	color:grey;
}

/*Spalte 2: tabledatum gibt das reale Datum eines Sportereignisses wider, tabledatum ist der Jahrgang (in rot) in der ersten Zeile*/
#tabledatum {
    font-weight:bold;
    align: left;
    padding-left:5px;
}

#tabledatum1 {
    font-weight:bold;
    align: left;
    padding-left:5px;
	/* hier stand mal die rote Farbe color:red;*/

}

/*Spalte 3: "event" gibt den realen Namen eines Sportereignisses wider, "Tagebuch_alles" ist der Schriftzug des kompletten Tagebuches in der ersten Zeile*/
#Tagebuch_alles {
	height: 24px;
	font-size: 16px;
	font-weight:bold;
	font-style:normal;
	padding-left:5px;
	/* hier stand mal die rote Farbe color:red;*/
}

/* event ist das Tabellenfeld mit dem Namen des Sportereignisses */
#event {
    font-weight:bold;
    padding-left:5px;
}

/* In Label1 wird der Counterstand der Kommentare sichtbar gemacht */
#label1 {
    font-weight:bold;
	padding-left:3px;
	padding-right:3px;
}

/* --------------------------------------------------------------------------------- */

/* th = table header = Tabellenkopf */
#Inhalt th {
font-size: 16px;
color: #000000;
text-align: center;
font-weight: bold;
border: 1;
}

/* td = table data = Tabellendaten */
#Inhalt td {
font-size: 14px;
/*color: #000000;*/
}

#Inhalt h1 {
font-size: 35px;
/*color: #4F4F4F;*/
}

#Inhalt h2 {
font-size: 30px;
/*color: #4F4F4F;*/
}

#Inhalt h3{
font-size: 25px;
font-family: Comic Sans MS,sans-serif,Arial;
}

#Inhalt p {
font-size: 15px;
color: #000000;
}

#Inhalt a, #Inhalt a:visited {
font-size: 14px;
color: #000fff;
font-weight: bold;
text-decoration: underline;  Links nicht unterstrichen     text-decoration: underline;*/
}

#Inhalt a:hover {
color: #000000;
text-decoration: none; /* Links nicht unterstrichen     text-decoration: underline;*/
}

/* hier werden alle Bilder, die sich auf den Seiten befinden, transfromiert (beim überfahren vergrößert) */
#Inhalt img:hover {
    -webkit-transform: scale(1.45);
    -moz-transform: scale(1.45);
    -ms-transform: scale(1.45);
    -o-transform: scale(1.45);
    transform: scale(1.45);
}

.Menue_lokal {

 width: 70px; /* Breite des Buttons */
 height: 18px; /* Höhe des Buttons */
 border: 1px solid #aaa; /* Rahmen */
 border-radius: 5px; /* Abgerundete Ecken */
 background: #eee; /* Hintergundfarbe für ältere Browser */
 background-image: linear-gradient(#cdffbc, #6ec153); /* Farbverlauf */
 display: inline-block; /* Für horizontale Darstellung: display: inline-block; */
 text-align: center; /* Horizontale Text-Ausrichtung */
 padding-top: 5px; /* OPTIONAL: Vertikale Text-Ausrichtung */
 text-decoration: none; /* Links nicht unterstrichen */
 color: #333; /* Textfarbe */
}

.Menue_lokal:hover {
 background: #ccc; /* Alternative Hintergrundfarbe beim Überfahren */
 background-image: linear-gradient(#d3d3ff, #5656d8); /*Farbverlauf*/
}


/* Definitionen für die Berichte */
#Bericht
{
font-size: 14px;
font-family: Comic Sans MS,sans-serif,Arial;

}

/* Definitionen für den Text der Startseite */
#Startseiten_Text
{
font-size: 15px;
font-family: Comic Sans MS,sans-serif,Arial;
text-align: center;

}


/* Neues Menü 2020: Hier beginnt das Menü unter dem Foto */
/* ------------------------------------------------------------------------------ */
#cssmenu {
  background: #CD5C5C ;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}

#cssmenu ul li img {
     float: left;
     width: 16px;
     height: 16px;
     margin: -8px 5px;
     padding: 6px;
     background: #999;
     -webkit-border-radius: 25px;
     -moz-border-radius: 25px;
     border-radius: 25px;
}

@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}