@viewport {
	width: device-width;
	zoom: 1;
}

@media (min-width: 750px) { /* Desktop o. Tablet */
	#top
	{
		height: 300px;
		border-right: solid 0px #000;
		border-left: solid 0px #000;
		color:#2A3C22;
		width: 700px;
	}

	body
	{
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 20px;
		background-color: #fff;
		background-image: url(images/bg.jpg);
		background-repeat: repeat-x
	}
	
	.maintable
	{
		width: 728px;
	}
	
	#sp1
	{
		text-align: justify;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 40px;
		padding-bottom: 30px;
		background-color: #;
		width: 100%;
		height: 700px;
	}
}

@media (max-width: 750px) { /* Mobile Device */
	#top
	{
		height: 200px;
		border-right: solid 0px #000;
		border-left: solid 0px #000;
		color:#2A3C22;
		width: 100%;
		background-position: bottom;
	}
	
	body
	{
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 20px;
		background-color: #fff;
	}

	.maintable
	{
		width: 100%;
	}	

	#sp1
	{
		text-align: left;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 40px;
		padding-bottom: 30px;
		background-color: #;
		width: 100%;
		height: 700px;
	}	
}

table,td
{
	font-size: 100%;
	line-height: 125%;
	font-family: arial, helvetica, tahoma, verdana, sans-serif;
	color: #000;
}

h2
{
	font-family: "Trebuchet MS", arial, helvetica, verdana, tahoma, sans-serif;
	color: #000;
	margin-bottom: 20px;
	letter-spacing: 1px;
	font-size: 125%;
	border-bottom: solid 0px #746b64;
	padding-bottom: 4px;
}

.li
{
	width: 14px;
	background-image: url(images/ra1.jpg);
	background-repeat: repeat-x;
	vertical-align: top;
}

.re
{
	width: 14px;
	background-image: url(images/ra2.jpg);
	background-repeat: repeat-x;
}

#main
{
	border-right: solid 0px #000;
	border-left: solid 0px #000;
}

#hpname
{
	padding-left: 0px;
	padding-bottom: 0px;
	text-align: left;
	color: #f1f4fb;
	letter-spacing: 1px;
	font-size: 24px;
	line-height: 50px;
}

#hpname_sw
{
	padding-left: 0px;
	padding-bottom: 0px;
	text-align: left;
	color: #000;
	letter-spacing: 1px;
	font-size: 24px;
	line-height: 50px;
}

.buleiste
{
	background-color: #000;
	-moz-opacity: 0.50;
	_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	opacity: 0.50;
	height: 36px;
}

#menu2 a, #menu2 a:visited, #menu2 a:active
{
	display: block;
	color: #fff;
	text-decoration: none;
	font-family: verdana, sans-serif;
	font-size: 10pt;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #fff;
	border-top: solid 1px #fff;
	line-height: 40px;
	text-align: center;
	white-space:nowrap;
}

#menu2 a:hover
{
	background-color: #fff;
	color: #000;
	text-decoration: none;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #fff;
	border-top: solid 1px #fff;
	-moz-opacity: 0.80;
	_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	opacity: 0.80;
	font-style: italic;
	white-space:nowrap;
}

#fussb
{
	font: normal 12px verdana, sans-serif;
	color: #000;
	height: 36px;
	text-align: center;
	background-color: #;
}

body
{
	scrollbar-arrow-color: #737b66;
	scrollbar-base-color: #F5F8F3;
	scrollbar-highlight-color: #737b66;
	scrollbar-shadow-color: #ffffff;
	scrollbar-track-color: #e6e6e6;
}

a:link, a:visited, a:active
{
	font-size: 98%;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	color: #000;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
	background-color: #bfd5fc;
	color: #000;
}
	
/* Gästebuch */

.smileybox
{
	border: 1px black dotted;
	font-size: 11px;
}

.kommentar
{
	vertical-align: top;
	width: 78%;
	border-bottom: dotted 1px gray;
	padding-bottom: 10px;
	padding-top: 10px;
}

.autor
{
	vertical-align: top;
	width: 20%;
	padding-bottom: 10px;
	padding-top: 10px;
}

/* Blog */

.markiert
{
	background-color: #FFFF99;
}

.zitat
{
	display: block;
	border: 1px black dotted;
	padding: 5px;
	margin-left: 10px;
	margin-right: 10px;
}

/* Admintools */

.hd { /* Helles Grau */
	background-color:#DEDFDE;
}

.dh { /* Dunkles Grau */
	// background-color:#CECFCE;
}

/* Dark Mode oder Windows High Contrast */
@media (prefers-color-scheme: dark), (forced-colors: active) {

	@media (min-width: 750px) { /* Desktop o. Tablet */
		#top
		{
			border-right: solid 0px #e4e4e4;
			border-left: solid 0px #e4e4e4;
		}

		body
		{
			background-color: #292929;
			background-image: none;
		}
	}
		
	@media (max-width: 750px) { /* Mobile Device */
		#top
		{
			border-right: solid 0px #e4e4e4;
			border-left: solid 0px #e4e4e4;
		}
		
		body
		{
			background-color: #292929;
		}
	}

	table,td
	{
		color: #e4e4e4;
	}

	h2
	{
		color: #e4e4e4;
	}

	.li
	{
		border-right: solid 2px #e4e4e4;
		background-image: none;
	}

	.re
	{
		border-left: solid 2px #e4e4e4;
		background-image: none;
	}

	#main
	{
		border-right: solid 0px #e4e4e4;
		border-left: solid 0px #e4e4e4;
	}

	.buleiste
	{
		background-color: #e4e4e4;
	}

	#menu2 a, #menu2 a:visited, #menu2 a:active
	{
		color: #000;
		border-left: solid 1px #000;
		border-bottom: solid 1px #000;
		border-top: solid 1px #000;
	}

	#menu2 a:hover
	{
		background-color: #000;
		color: #e4e4e4;
		border-left: solid 1px #000;
		border-bottom: solid 1px #000;
		border-top: solid 1px #000;
	}
		
	#fussb
	{
		color: #e4e4e4;
	}

	a:link, a:visited, a:active
	{
		color: #e4e4e4;
	}

	a:hover
	{
		color: #292929;
		background-color: #c2c5cc;
	}
	
	img {
		filter: grayscale(30%);	
	}
}