/****************** CSS Template for stefan.bracher.info*************
/* Author: 	Stefan Bracher
/* Date: 	01.01.2023
/* Used by some - replaced by style.css for others
*********************************************************************/


/************* Main HTML Tags ******************************************************/
body 		{ 
			background-color: #fafafa; 
			margin: 0px; 
			padding: 0px; 
			width: 100%; 
			height: 100%; 
			overflow: hidden; 
			font-family: Arial;
			}
			
big 		{ 
			font-size: large; 
			font-weight: bold; 
			text-align : center;
			}
			

div 		{
			font-size: 1em;
			color: #3B3B3B;
			padding: 0px;
			text-align : justify;  	
			font-weight: normal; 
			font-style: normal; 	
			width: 97%; 
			margin: auto;
			} 
			
p  		{ 
			margin-top: 0px;
			margin-bottom: 5px;
			}
			
i 			{ 
			font-style: italic; 			
			}

img 		{
			border-radius: 5px;
			}
			
strong 	{ 
			font-weight: bold; 
			text-align : center;
			}
			

h1			{ 
			font-size: 1.5em; 
			font-weight: bold; 
			font-style: normal; 
			text-align : center;
		  	border-bottom: 1px solid silver; 
		  	border-top: 1px solid silver; 
		  	clear: both;
		  	}
		  	
h2			{ 
			font-size: 1.2em; 
			font-weight: bold; 
			font-style: normal; 
			text-align : left; 
		  	border-bottom: 1px solid silver; 
		  	clear: both; 
		  	padding-top: 0px;
		  	}
		  
		  
h3			{ font-size: 1em; font-weight: bold; font-style: normal; text-align : left;}
h4		{ font-size: 1em; font-weight: normal; font-style: normal; text-align : center;}
h5		{ font-size: 1em; font-weight: bold; font-style: normal; text-align : right;}
h6		{ font-size: 1em; font-weight: bold; font-style: normal; text-align : left;}

a		{ font-size: 1em; font-weight: bold; color: black; text-align: left; font-style : normal; text-decoration : none; outline: none; }
A:Visited  	{ font-weight: bold; font-style: normal; color: black; text-align: left; text-decoration : none;}

A:Active  {
	font-family : Arial;
	font-weight : bold;
	font-style : normal;
	color : black;
	text-align : left;
	text-decoration : none;
}

A:Hover  {
	font-family : Arial;
	font-weight : bold;
	font-style : normal;
	color : black;
	text-align : left;
	text-decoration : none;
}

	
html	{
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

/*************** IDs ********************************************************/
#main		{
		background-color: white;
		position: relative;
		border: 1px solid silver;
		border-radius: 5px;
		width: 97%;
		height: 97%;
		margin-left: auto; 
		margin-right: auto;
		margin-top: 5px;
		margin-bottom: 0%; 
		overflow: hidden;
		}
		
#leftcolumn	{	
		position: absolute; 
		top: 20px;
		left: 5px;
		padding: 5px;
		border: 1px solid silver;
		width: 450px;
		background-color: white;
		color: #3B3B3B;
		}	
#leftcolumn a { color: blue;}

#rightcolumn	{	
		position: absolute; 
		top: 20px;
		right: 5px;
		padding: 5px;
		border: 1px solid silver;
		width: 450px;
		background-color: white;
		color: #3B3B3B;
		}	
#rightcolumn a { color: blue;}

#myname		{
		font-size: 24px;
		font-weight: 600;
		margin: 0px;
		}
#subtitle	{
		font-size: 12px;
		margin: 0px;
		}
		
.subtitle	{
		font-size: 12px;
		margin: 0px;
		}		
		

/*********** General Classes *******************************************************/
.abstract	{ font-weight: bold; font-style: italic;}	
.article { 
		    border: 1px solid silver;
		    border-radius: 5px;
		    padding: 5px;
		    padding-top: 0px;
		    margin-top: 10px;
		    box-shadow: 2px 2px 2px silver;
	  }
.bottom { position: absolute; bottom: 5px;}

.floatbox { 
		    float: left; 
		    padding: 5px; 
		    margin: 5px;
		    width: 280px;
		    height: 210px;  
		    overflow: hidden;
		    text-align : center;
		    border: 1px solid silver;
			border-radius: 5px;
		    background-color: white;
		    font-size: x-small;
	  }




@media (min-width: 600px) 
{
.floatright { float: right; margin: 5px; padding-left: 5px; max-width: 400px; text-align : right;}
.floatleft { float: left; margin: 5px; max-width: 400px;}
}

@media (max-width: 600px) 
{
.floatright { float: none; padding-left: 5px; margin: 5px; max-width: 400px; text-align : right;}
.floatleft { float: none; margin: 5px; max-width: 400px; text-align : right;}
}

.floatright p { font-size: x-small;}
.floatright a { font-size: x-small;}
.clear { clear: both;}
.relative { position: relative;}
.right { position: absolute; right: 0px; }
.noborder { border: 0px solid black;}
.selected { background-color: #f4ff7c;}
.unselected { background-color: silver;}
.submenu_show 		{
			position: absolute;
			top: 100px;
			right: 0px;
			width: 100%;
			z-index: 3;
			border-bottom: 1px solid silver;
			background-color: white;
			padding-top: 5px;
			padding-right: 5px;
			opacity:0.9;
		}
		
.submenu_hidden		{ display: none; }

.de	{ font-style : normal; }
.en	{ font-style : italic; }
.fr	{ font-style : normal; }
.it	{ font-style : italic; }
.mylanguage { float: left; font-size: 12px;}

img.right { float: right;}
img.left { float: left;}

a.title	{ font-size: large; font-weight : normal;}
a.block	{ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; text-align: right;}


div.item { position: relative; border: 0px solid black; border-bottom: 1px solid black; margin: 0px; padding: 0px; padding-bottom: 5px; padding-top: 5px; width: 100%; min-height: 210px;}
div.item:Hover { background-color: #eae9cf;}
div.item p	{ max-width: 80%;}
   
/************ DIVS ************************************************************/
/*...General....*/ 



/*...Footer....*/
div.footer {
position: absolute; 
bottom: 0px; 
left: 5%;
width: 90%;
margin: auto; 
text-align: center;
font-size: small; 
background: rgb(210, 210, 210); 
opacity:0.9;
border: 0px solid #33302d;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}


div.footer a {
font-size: x-small; 
}

/*...Head....*/
div.head {
position: absolute; 
top: 5px;
left: 5px;
text-align: left;
border: 0px solid black;
margin: 0px;
padding: 0px;
}

/*...Inhalt....*/
div.inhalt {
position: absolute; 
top: 100px;
bottom: 0px;
left: 5px;
right: 5px;
width: 98%;
overflow: auto;
padding-right: 1%;
margin: 0px;
padding-top: 10px;
font-size: small;
}

/*...Menu....*/
div.menu 	{
		position: absolute; 
		top: 5px;
		right: 5px;
		border: 0px solid red;
		}
		
div.menuitem 	{	
		float: right;
		position: relative;
		z-index: 2;
		width: 75px;
		height: 85px;
		overflow: hidden;
		border: 1px solid #4A4A4A;
		border-radius: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
		}
		
		
div.menuitem a 	{
		display: block; 
		position: absolute;
		top: 0px;
		left: 0px;
		padding-left: 5px;
		font-size: 12px; 
		width: 100%;
		height: 85px;
		z-index: 1000;
		}
		
		
div.menuitem img	{ 
		position: absolute;
		left: 0px;
		top: 0px;
		border: 0px solid black;
		z-index: -1;
		opacity:0.5;
		}

div.menuitem:Hover {
background-color: #edebad; 
}
/*********************************************************************/

/************ Language Buttons*********************************************/
.lang-button-group {
  margin: 0.5em 0 1em;
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
}

.lang-toggle {
  background: none;
  border: none;
  padding: 0.2em 0.4em;
  font-size: 1em;
  font-family: inherit;
  color: #444; /* Classy gray */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: color 0.2s;
}

.lang-toggle:hover {
  color: #000; /* Even darker on hover */
  text-decoration: underline;
}

.lang-toggle.active {
  font-weight: bold;
  color: #000; /* Black for active */
  text-decoration: underline;
}