/*########################################################################################
 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:#333333; 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 #666666; 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 5px 0px 40px; float:left;}
header div.logo a		{padding:0px; margin:18px 10px 0px 0px; display:inline-block; font-size:36px; font-weight:bold; color:#666666; float:left; text-decoration:none; border:none}
header div.logo img 	{padding:0px; margin:16px 16px 0px 0px; display:inline-block; width:60px;}
header div#mobile		{display:none;}

header nav#navi		{padding:0px; margin:0px 40px 0px 0px; color:#cccccc; font-size:20px; float:right;}
header nav#navi a		{display:inline-block; padding:0px; margin:34px 2px 0px 2px; font-size:18px; font-weight:400; color:#333333; text-decoration:none;}
header nav#navi a.active	{color:#333333; font-weight:bold}
header nav#navi a:hover	{color:#ff9933; text-decoration:underline}

main		{padding:120px 0px 0px 0px; margin:0px auto; width:1200px; border-left:1px solid #cccccc; z-index:300}
main h1		{padding:10px 0px 10px 40px; margin:0px; font-size:30px; font-weight:bold; color:#666666}
main h2		{padding:10px 10px 10px 40px; margin:0px; font-size:26px; font-weight:bold; color:#666666}
main h3		{padding:10px 10px 0px 40px; margin:0px; font-size:22px; font-weight:bold; color:#666666}
main h4		{padding:10px 10px 0px 40px; margin:0px; font-size:20px; font-weight:bold; color:#333333}
main h3 a		{font-weight:500;}
main p		{padding:10px 40px 5px 40px; margin:0px; font-size:16px; font-weight:normal; line-height:24px}
main ul,ol		{padding:10px 10px 5px 40px; margin:0px 0px 0px 0px;}
main li		{padding:0px; margin:8px 0px 0px 30px; font-size:16px; color:#333333; font-weight:normal; line-height:24px}
main hr		{padding:0px; margin:30px 40px 30px 40px; border:none; border-top:1px solid #cccccc}
main br.clearfl	{clear:both}
main blockquote	{font-style:italic; margin-bottom: 0px;}
main img.rightimg	{padding:0px; margin:10px 40px 0px 0px;float:right; width:auto; min-width:400px; max-width:450px; border:1px solid #cccccc}
main img.leftimg	{padding:0px; margin:10px 0px 0px 20px;float:left; width:auto; min-width:300px; max-width:350px; border:1px solid #cccccc}
main small			{font-weight:normal; font-size: 14px;}
main .redalert		{color:#990000}

main a		{color:#1a73e8; text-decoration:underline}
main a:hover	{color:#ff9933; text-decoration:underline}
main a:active 	{color:#ff9933; text-decoration:underline}
main a[target='_blank'] 		{background-position:center right; background-repeat:no-repeat; padding-right:15px; background-image:url(../../images/extlink.png)}
main a[target='_blank'].imglink 	{padding:0px; background-image: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}

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

noscript		{display:none}

/* laptop size */
@media (max-width: 1200px) {
	header div.head		{width: 100%;}
	header div.logo a		{margin:16px 0px 0px 0px;font-size:32px; font-weight:700}
	header nav#navi a		{margin:32px 0px 0px 0px; font-size:15px;}
	main				{width: 100%; border:none}
	footer div			{width: 100%;}
}

/* tablet size */
@media (max-width: 1020px) {
	header			{height:60px;}
	header div.logo		{margin:0px 0px 0px 20px; float:none;}
	header div.logo a		{margin:12px 0px 0px 0px; font-size:28px; float:none}
	header div#mobile		{display:inline-block; position:absolute; right:20px; top:17px; 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:normal; color:#333333; border-bottom: 1px solid #cccccc; text-decoration:none}

	main img.rightimg	{float:left; margin:20px 0px 20px 40px; width:88%;}
	main .col1		{width:100%;}
	main .col2		{width:100%;}
}

/* smart phone size */
@media (max-width: 860px) {
	main		{padding:90px 0px 0px 0px; width:100%; border:none}
	main h1		{padding:15px 5px 10px 20px; font-size:26px;}
	main h2		{padding:15px 5px 10px 20px; font-size:24px}
	main h3		{padding:15px 5px 0px 20px; font-size:22px}
	main h4		{padding:15px 5px 0px 20px; font-size:18px}
	main p		{padding:10px 20px 5px 20px; font-size:16px; line-height:24px}
	main ul,ol		{padding:10px 10px 5px 20px;}
	main li		{margin:5px 10px 0px 20px; font-size:16px; line-height:24px}
	main hr		{margin:20px 20px 15px 20px;}
	main .col2		{padding-top:20px;}
	main img.rightimg	{margin:20px 0px 20px 20px; min-width:auto;}

	footer p		{padding:10px 10px 0px 10px; margin:0px; font-size:16px}
	footer p.version	{float:none; text-align:center; display:block}
	footer p.legal		{float:none; text-align:center; display:block; margin-bottom:20px}

	noscript		{position:fixed; top:0px; right:0px; padding:10px; margin:0px;; display:inline-block; text-align:center; border:1px solid #cccccc; background:#ffffff; z-index: 600}
	noscript a		{display:inline-block; padding:0px; margin:0px; font-size:14px; color:#333333; border:none; text-decoration:none}
}

/* iphone 5,SE */
@media (max-width: 320px) {
	header div.logo a		{font-size:24px;}
	main img.rightimg	{margin:5px 0px 0px 20px; width:80%;}
}

/* print view */
@media print {
	header   			{position:absolute; background:none;}
	header nav#navi		{display:none;}
	header div#mobile		{display:none;}
	noscript		{display:none}
}