/** 
 * Seite        : smartphone-layout.css
 * Zweck        : Definition des Seitenlayouts für die Url
 *                www.osterroenfelder-tsv.de
 * Autor        : Hans Wolter
 * Erstellt ab  : April 2011
 * Angepasst ab : Oktober 2021, Umstellung auf Responsive Design
 */

*
{
	/* Um das neue alternative Box-Modell von CSS3 zu unterstützen,
		ist es notwendig für die einzelnen Browser mit den nachfolgenden
		Angaben darauf hinzuweisen.
	*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-box-sizing: border-box;

	/* 
		Die Browser verwenden unterschiedliche Default-Angaben
		für die Angaben von margin, border und padding. Deshalb erfolgt
		erstmal für alle Elemente die Vorgabe des Wertes 0. 
		Die gewünschten Angaben für margin, border und padding sind dann
		an den einzelnen Elementen vorzugeben.
	*/
	margin: 0;
	border: 0;
	padding: 0;
}

body
{
	width: 98%;
	border: 2px solid blue;
	margin: 5px;
}

header 
{
	border: 2px solid #0056A4; /* blauer Rahmen */
	text-align: center;
	height: 25%;
}

#topnav 
{ 
  position: absolute;
  top: 10px;
  right: 10px;
	text-align: right;
}

:root
{
  --white: #f9f9f9;
  --blue: #0056A4;
  --yellow: #FFF522;
} 

.navigationWrapper
{
  box-shadow: 1px 1px 5px 0px var(--gray);
  position: sticky;
  top: 0;
  width: 100%;
	height: 30px;
  border: 2px solid blue;
}

.Logo
{
  display: inline-block;
}

.navigation
{
  width: 100%;
  height: 80%;
  position: fixed;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease-out;
}

.navigation-menu a
{
  display: block;
  padding: 6px;
	width: 100px;
	border: 1px solid blue;  /* - Breite des Rahmens um Listenelement 
																	- Durchgehender Rahmen 
																	- Rahmenfarbe hellgrau */
	text-decoration: none;        /* Keine Formatierung des Textes */
	text-align: center;           /* Ausrichten des Textes */
}

.hamburger
{
  cursor: pointer;
  float: right;
  padding: 10px 10px;
}

.hamburger-line 
{
  background: var(--white);
  display: block;
  height: 2px;
  position: relative;
  width: 24px;
}

.hamburger-line::before,
.hamburger-line::after
{
  background: var(--white);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.hamburger-line::before
{
  top: 5px;
}

.hamburger-line::after
{
  top: -5px;
}

.side-menu 
{
  display: none;
}

.side-menu:checked ~ nav
{
  max-height: 100%;
}

.side-menu:checked ~ .hamburger .hamburger-line 
{
  background: transparent;
}

.side-menu:checked ~ .hamburger .hamburger-line::before 
{
  transform: rotate(-45deg);
  top:0;
}

.side-menu:checked ~ .hamburger .hamburger-line::after 
{
  transform: rotate(45deg);
  top:0;
}

#wrapper
{
	/* display: table; */
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-direction: -webkit-column;
	flex-direction: -ms-column;
	flex-direction: row;
}

main
{
	margin: 0;
	padding: 2% 2%;
	border: 2px solid #0056A4;
}

#main_and_aside 
{
	width: 75%;
	/* display: table-cell; */
}

#main_and_aside_2 
{
	width: 25%;
	/* display: table-cell; */
}

#main_only 
{
	width: 100%;
	/* display: table-cell; */
}

#sidebar 
{
	background: white;
	color: black;
	margin: 5;
	padding: 2% 2%;
	border: 2px solid #0056A4;
	width: 25%;
	/* display: table-cell; */
}

#sidebar ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#sidebar ul li a
{
	display: block;
	background: #FFF522; /* yellow */
	color: #0056A4; /* Blau */
	border: 2px solid lightgray;
	text-decoration: none;
	text-align: center;
	font-size:1em;
	font-weight:bold;
	margin:0;
	padding:0.5em 0.8em 0.5em 0.8em;
}

#sidebar ul li a:focus,
#sidebar ul li a:hover,
#sidebar ul li a:active  
{ 
	background:#eee; 
	color:#333; 
	text-decoration:none; 
	outline: 0 none; 
}

#sidebar_2 
{
	background: white;
	color: black;
	margin: 5;
	padding: 2% 2%;
	border: 2px solid #0056A4;
	width: 75%;
	/* display: table-cell; */
}

#table_properties
{
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
}

#td_properties1
{
	border: 2px solid lightgray;
	background-color: lightgray;
}

#td_properties2
{
	border: 2px solid lightgray;
}

#th_width_1
{
	width: 19%;
	border: 2px solid lightgray;
	background-color: lightgray;
} 

#th_width_2
{
	width: 25%;
	border: 2px solid lightgray;
	background-color: lightgray;
} 

#th_width_3
{
	width: 56%;
	border: 2px solid lightgray;
	background-color: lightgray;
} 

#th_width_4
{
	width: 34%;
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	background-color: #0056A4; /* Blau */
	color: #FFF522; /* yellow */
} 

#th_width_5
{
	width: 33%;
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	background-color: #0056A4; /* Blau */
	color: #FFF522; /* yellow */
} 

#th_width_6
{
	width: 33%;
	border-top: 1px solid lightgray;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	background-color: #0056A4; /* Blau */
	color: #FFF522; /* yellow */
} 

article
{
	font-family: Georgia, Times, serif;
	font-size: 1.2em;
}

#imgTrainer
{
	max-width: 100%;
	height: auto;
}

.clear { clear: both; }
.clearRight
{
	clear: right;
}

.clearLeft
{
  clear: left;	
}

footer 
{
	border: 2px solid #0056A4;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align:center;
	background: #0056A4;
	color: #FFF522; /* yellow */
	// font-family: cursive, sans-serif;
	font-size: 1.2em;
}

#thumbnail
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 600px;
	float: left;
	overflow: auto;
	background-color: #0056A4; /* Blau */
}

#thumbnail li
{
	list-style: none;
}

#thumbnail a
{
	display: block;
	color: white;
	background-color: #0056A4; /* Blau */
	width: 100%;
	/*
	width: 188px;
	*/
	padding: 6px;
	text-align: center;
}

#thumbnail li a:hover
{
	background-color: silver;
}

#thumbnail img
{
	border: 1px solid white;
}

#fullframe
{
	margin: 0;
	padding: 0;
	/* margin-left: 120px; */
	width: 100%;
	height: 588px;
	overflow: hidden;
	background-color: #0056A4; /* Blau */
}

#fullframe li
{
	list-style: none;
}

#fullframe li a
{
	display: block;
}

#fullframe li img
{
	display: block;
	margin: auto;
	border: 1px solid white;
}

.leftFloat
{
	float: left;
}

.rightFloat
{
	float: right;
}

@media only screen and (orientation: landscape)
{
	#topnav 
	{ 
		right: 20px;
	}
}

@media only screen and (min-width: 800px)
{
	#topnav 
	{ 
		top: 15px;
		right: 40px;
	}
	
	header 
	{
	  font-size: 1.2em;
	}
	
  .navigation
	{
    max-height: none;
    top: 0;
    position: relative;
    float: right;
    width: fit-content;
    background-color: transparent;
  }
  
  .navigation-menu li
	{
    float: left;
  }

	.navigation-menu li a /* Listenelement mit Verweis auf ein Dokument */
	{
		width: 120px;
		display: block;               /* Listenelement als Block betrachten */
		border: 1px solid blue;  /* - Breite des Rahmens um Listenelement 
																		- Durchgehender Rahmen 
																		- Rahmenfarbe hellgrau */
		text-decoration: none;        /* Keine Formatierung des Textes */
		text-align: center;           /* Ausrichten des Textes */
		background: #FFF522; /* yellow */
		color:#0056A4; /* Schriftfarbe Blau */
		font-weight:bold;
		font-size: 0.7em;
		padding:0.2em 0.5em 0.4em 0.5em;
	}
	
  .navigation-menu a:hover
	{
    background-color: transparent;
    color: var(--gray);
  }

  .hamburger
	{
		display: none;
  }
}