/*########################################################################################
 Simple Web Template, (c) 2025 webapps@cjpj, P. Janko
 MIT License: https://www.cjpj.de/contact.htm#terms
 https://github.com/cjpjwa/simple-web-template
########################################################################################*/

/* ########## basic page settings - big screen size ##########  */
body			{padding:0px; margin:0px; background:#ffffff; color:#000000; font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: none;}

header				{position:fixed; top:0px; left:0px; padding:0px; margin:0px; background:#eeeeee; height:90px; width:100%; border-top:10px solid #337ab7; border-bottom:1px solid #cccccc; z-index:500}
header div.head		{padding:0px; margin:0px auto; width:1200px;}
header div.logo		{padding:0px; margin:0px; display:inline-block;}
header div.logo a	{padding:0px; margin:10px 20px 0px 40px; display:inline-block; font-size:44px; font-weight:bold; color:#333333; float:left; text-decoration:none; border:none}
header div#mobile	{display:none;}

header nav#navi			{padding:0px; margin:0px 30px 0px 0px; color:#666666; font-size:18px; float:right;}
header nav#navi a		{display:inline-block; padding:0px; margin:30px 10px 0px 10px; font-size:20px; font-weight:600; color:#000000; text-decoration:none}
header nav#navi a.active	{color:#2F70A7;}
header nav#navi a:hover		{color:#2F70A7;}

main			{padding:120px 0px 0px 0px; margin:0px auto; width:1200px; border-left:1px solid #cccccc; z-index:300}
main h1,h2		{padding:25px 40px 0px 40px; margin:0px; font-size:26px; font-weight:500;}
main h3			{padding:10px 40px 0px 40px; margin:0px; font-size:24px; font-weight:500;}
main h4			{padding:10px 40px 0px 40px; margin:0px; font-size:20px; font-weight:500;}
main p			{padding:10px 40px 10px 40px; margin:0px; font-size:16px; line-height:24px}
main ul			{padding:10px 40px 10px 40px; margin:0px 0px 0px 20px;}
main li			{padding:0px; margin:0px 0px 0px 10px; font-size:16px; line-height:24px}
main hr			{padding:0px; margin:10px 40px 0px 40px; border:none; border-top:1px solid #cccccc}
main samp		{padding:0px; margin:0px; font-family:monospace; font-size:14px;}
main pre		{padding:10px; margin:15px 40px 0px 40px; background:#eeeeee; border:1px solid #cccccc; border-radius:5px; overflow:auto}
main code		{font-family:monospace; background:#eeeeee; color:#c7254e; font-size:14px}
main br.clearfl	{clear:both}
main div.center	{text-align:center}

main small			{display:inline-block; font-size:14px; line-height:20px}
main #maintop 		{position:fixed; right:20px; bottom:20px; padding:0px 12px 6px 12px; margin:0px; background:#337ab7; color:#ffffff; font-family:monospace; font-weight:normal; font-size:22px; text-decoration:none; border:1px solid #337ab7; border-radius:26px;opacity: 0.7}
main #maintop:hover	{background:#337ab7; color:#ffffff;}

main a			{color:#1a73e8; text-decoration:underline dotted 1px; -webkit-text-decoration:underline;}
main a:hover	{color:#333333; text-decoration:underline}
main a:active 	{color:#333333; text-decoration:underline}
main a[target='_blank'] 	{background-position:center right; background-repeat:no-repeat; padding-right:15px; background-image:url(../images/extlink2.png)}

main .textred	{color:#990000;}
main blockquote	{border-left:10px solid #eeeeee;}

main table.app		{padding:0px; margin:40px 20px 20px 40px; width:528px; border-collapse:separate; border:1px solid #cccccc; border-radius:5px}
main table.app th	{padding:8px; font-size:14px; font-weight:bold;   text-align:left; background:#eeeeee; border-bottom:1px solid #cccccc}
main table.app td	{padding:5px 2px 5px 4px; font-size:14px; font-weight:normal; text-align:left; vertical-align:top; border-bottom:1px solid #cccccc}
main table.app tr:last-child td {border-bottom:none}

main .col0		{box-sizing:border-box; padding:0px; margin:0px; width:100%; float:left; border:0px solid blue}
main .col1		{box-sizing:border-box; padding:0px; margin:0px; width:50%; float:left; border:0px solid lime}
main .col2		{box-sizing:border-box; padding:0px; margin:0px; width:50%; float:left; border:0px solid red}

main .colx		{padding:0px; margin:0px 20px 0px 40px; background:#eeeeee; height:200px; overflow:auto; border:1px solid #cccccc}

div#subnav 			{font-size:15px; z-index:400}
div#subnav button	{padding:8px 15px 8px 15px; margin:10px 0px 0px 40px; background:#337ab7; font-size:15px; color:#ffffff; border:1px solid #eeeeee; border-radius:5px; cursor:pointer;}
div#subnav ul		{display:none; position:absolute; top:160px; padding:0px 0px 0px 0px; margin:5px 0px 0px 40px; width:280px; background: #ffffff; border:1px solid #cccccc; border-radius:5px; box-shadow: 1px 1px 10px 1px #cccccc;}
div#subnav li		{padding:5px 5px 5px 5px; margin:0px; list-style-type:none;}
div#subnav li.sepa	{padding:0px 0px 0px 0px; margin:0px; list-style-type:none; border-bottom:1px solid #cccccc}
div#subnav li:hover	{background:#eeeeee}
div#subnav a		{display:block; padding:0px 0px 0px 0px; margin:0px; font-size:15px; font-weight:normal; color:#1a73e8; text-decoration:none}

footer 			{padding:0px; margin:0px; border-top:1px solid #cccccc;}
footer div		{padding:0px; margin:0px auto; width: 1200px;}
footer p		{padding:15px 40px 10px 40px;  margin:0px 0px 25px 0px; font-size:16px}
footer p.version	{float:left; padding-right:0px;}
footer p.legal		{float:right; padding-left:0px;}
footer a			{color:#1a73e8; text-decoration:none; white-space:nowrap;}
footer a:hover		{color:#333333; text-decoration:underline}
footer a:active 	{color:#333333; text-decoration:underline}

/* laptop size */
@media (max-width: 1200px) {
	header				{height:70px; background:#eeeeee}
	header div.head		{width: 100%;}
	header div.logo a	{margin:12px 20px 0px 40px; font-size:32px;}
	header nav#navi		{margin:0px 35px 0px 0px;}
	header nav#navi a	{margin:25px 5px 0px 5px; font-size:17px;}
	main				{padding:100px 0px 0px 0px; width: 100%; border:none}
	main table.app		{margin:40px 20px 20px 40px; width:auto}
	div#subnav ul		{top: 140px;}
	footer div			{width: 100%;}
}

/* tablet size */
@media (max-width: 1020px) {
	main .col0		{width:100%; float:left;}
	main .col1		{width:100%; float:left;}
	main .col2		{width:100%; float:left;}
	main .colx		{padding:0px; margin:0px; width:100%; height:auto; float:left;}
	main table.app	{margin:40px auto;}
}

/* smart phone size */
@media (max-width: 800px) {
	header					{height:50px; background:#eeeeee}
	header div.head			{width: 100%;}
	header div.logo a		{margin:6px 20px 0px 20px; font-size:28px; float:none}
	header div#mobile		{display:inline-block; position:absolute; right:20px; top:12px; padding:0px; margin:0px; font-size:42px; line-height:26px; font-weight:normal; color:#333333; cursor:pointer;}
	header nav#navi			{margin:-500px 0px 0px 0px; background:#eeeeee; float:none}
	header nav#navi span	{display:none}
	header nav#navi a		{display:block; padding:10px 10px 10px 20px; margin:0px; font-size:16px; font-weight:bold; color:#333333; border-bottom: 1px solid #cccccc; text-decoration:none}

	main		{padding:80px 0px 0px 0px; width: 100%; border: none}
	main h1,h2	{padding:25px 20px 0px 20px; font-size:24px;}
	main h3		{padding:10px 20px 0px 20px; font-size:22px;}
	main h4		{padding:10px 20px 0px 20px; font-size:18px;}
	main p		{padding:10px 20px 10px 20px;}
	main ul		{padding:10px 20px 10px 10px;}
	main hr		{margin:10px 20px 5px 20px;}
	main pre		{margin:25px 20px 0px 20px;}
	main table.app	{margin:20px}
	main #maintop 	{bottom:10px;}

	div#subnav button	{margin:10px 0px 0px 20px;}
	div#subnav ul		{top: 120px; margin:5px 0px 0px 20px;}

	footer div		{width: 100%;}
	footer p		{padding:10px 20px 0px 20px; margin:0px; font-size:15px}
	footer p.version	{float:none; text-align:center; display:block; padding-right:20px;}
	footer p.legal		{float:none; text-align:center; display:block; padding-left:20px; margin-bottom:20px}
}

/* print view */
@media print {
	header				{position:absolute; background:none;}
	header nav#navi		{display:none;}
	header div#mobile	{display:none;}
	div#subnav 			{display:none;}
	main #maintop 		{display:none;}
	main .colx			{background:none; height:auto;}
}