body{
	font-family: verdana, arial, sans-serif;
	text-align: center;
	font-size: 1em;
	background: url('backblue.jpg') repeat-x;
}

a img{border: 0;}

.clear{
	margin-top: -10px;
	clear: both;
}

#top img{
	margin-top: 10px;
}

#top h1{
	visibility: hidden;
	display: none;
}

#logo{
	max-width: 310px;
	width: 100%;
}

#indhold{
	text-align: left;
	width: 90%;
	margin: 0 auto;
}
@media only screen and (max-width: 768px) {
	#indhold{ width: 89.84%; }
 }
@media only screen and (min-width: 769px) and (max-width: 857px) {
	#indhold{ width: calc(86.51% + 25px); }
 }
@media only screen and (min-width: 858px) and (max-width: 942px) {
	#indhold{ width: calc(81.17% + 71px); }
 }
@media only screen and (min-width: 943px) and (max-width: 1023px) {
	#indhold{ width: calc(75.3% + 126px); }
 }
@media only screen and (min-width: 1024px) and (max-width: 1101px) {
	#indhold{ width: calc(70.51% + 175px); }
 }
@media only screen and (min-width: 1102px) and (max-width: 1177px) {
	#indhold{ width: calc(61.84% + 271px); }
 }
@media only screen and (min-width: 1178px) and (max-width: 1321px) {
	#indhold{ width: calc(53.47% + 369px); }
 }
@media only screen and (min-width: 1322px) and (max-width: 1391px) {
	#indhold{ width: calc(44.28% + 490px); }
 }
@media only screen and (min-width: 1392px) and (max-width: 1459px) {
	#indhold{ width: calc(36.76% + 595px); }
 }
@media only screen and (min-width: 1460px) and (max-width: 1526px) {
	#indhold{ width: calc(29.85% + 696px); }
 }
@media only screen and (min-width: 1527px) and (max-width: 1592px) {
	#indhold{ width: calc(24.24% + 782px); }
 }
@media only screen and (min-width: 1593px) and (max-width: 1657px) {
	#indhold{ width: calc(20% + 849px); }
 }
@media only screen and (min-width: 1658px) and (max-width: 1722px) {
	#indhold{ width: calc(13.84% + 951px); }
 }
@media only screen and (min-width: 1723px) and (max-width: 1788px) {
	#indhold{ width: calc(9.09% + 1033px); }
 }
@media only screen and (min-width: 1789px) and (max-width: 1854px) {
	#indhold{ width: calc(4.54% + 1114px); }
 }
@media only screen and (min-width: 1855px) and (max-width: 1920px) {
	#indhold{ width: calc(1.51% + 1170px); }
 }

#frontImage{
	width: 300px;
	max-width: 40%;
	float: right;
	margin: 8px;
}

#menu a, #submenu a, #subsubmenu a{color: #fff;}

#menu, #submenu, #subsubmenu{
	list-style: none;
	padding: 4px 0 4px 0;
	margin: 0px;
	border-radius: 4px;
	box-shadow: 0 2px 2px #555;
}
#menu{background: #666;}
#submenu{background: #777;}
#subsubmenu{background: #999;}

#menu li:hover, #menu .visiting{background: #777;}
#submenu li:hover, #submenu .visiting{background: #999;}
#subsubmenu li:hover, #subsubmenu .visiting{background: #aaa;}

.button{
	background-color: #66f;
	border-radius: 4px;
	padding: 8px;
	color: #fff;
}

#menu li, #submenu li, #subsubmenu li{
	display: inline-block;
	padding: 4px 12px 4px 12px;
	margin: 0;
	border-radius: 3px;
}

h1{
	color: #777;
	font-weight: normal;
	border-bottom: 1px solid #999;
}

h2{
	color: #777;
	font-size: 1.2em;
}

h3{font-size: 1.1em;}
h4{font-size: 1.0em; margin-bottom: -10px; color: #777; }

.imagebox, .extensionbox {
	clear: both;
	padding: 10px;
	margin-bottom: 16px;
	box-shadow: 0 3px 6px rgba(0,0,0, 0.2);
	background: #f2f1ff;
	border-radius: 10px;
}

.examplebox img{
	float: left;
}

.imagebox h3, .extensionbox h3{
	margin-top: 0px;
}

.innerimagebox{padding-left: 208px;}
.innerextensionbox{padding-left: 42px;}
.innerexamplebox{padding-left: 178px;}

.imagebox img, .examplebox img, .extensionbox img{
	float: left;
	margin-right: 10px;
}

.innerextensionbox img{
	float: none;
	vertical-align: middle;
	margin-right: 0px;
}

@media only screen and (max-width: 640px) {
	.innerimagebox, .innerexamplebox{
		padding-left: 10px;
	}

	.imagebox img, .examplebox img{
		float: none;
		width: 100%;
		height: 168px;
		object-fit: cover;
	}

	#frontImage{
		width: 100%;
		max-width: 100%;
		max-height: 200px;
		float: none;
		margin: 0;
		object-fit: cover;
		object-position: 0% 20%;
	}

}

.left{float: left; margin-right: 20px;}
.right{float: right; margin-left: 20px;}

.spotlight{
	width: 49%;
}

.spotlight img{
	float: left;
	margin-right: 10px;
}

.zoomimage{
	display: block;
	margin: 0 auto 0 auto;
	cursor: pointer;
	max-width: 400px;
}

.code{
	white-space: pre;
	font-family: monospace;
	background: #eee;
	padding: 8px;
}

iframe{
	border: 1px solid #000;
	background: #ffffff;
	width: 100%;
	height: 200px;
	margin-bottom: 16px;
}

table{background: #000;}
table td, table th{background: #fff; padding: 2px;}
table th{font-weight: bold;}

.infotable, .infotable td, .infotable th{background: transparent;}
.infotable th{width: 100px; text-align: left;}
.infotable td span{color: #777;}

#side-bund{
	clear: both;
	height: 32px;
}

#slideshow{
	width: 168px;
	height: 168px;
	background: #fff;
}

#slideshow  img{
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	top: 0px;
	left: 0px;
	visibility: hidden;
	display: none;
	background: #fff;
}

a[href$=".zip"]{
	background: url(images/icons/disk.png) no-repeat;
	padding-left: 20px;
}

a[href$=".mfa"]{
	background: url(images/icons/mfa.png) no-repeat;
	padding-left: 20px;
}

a[href$=".exe"]{
	background: url(images/icons/application_put.png) no-repeat;
	padding-left: 20px;
}

a[href*="search.php"]{
	background: url(images/icons/magnifier.png) no-repeat;
	padding-left: 20px;
}

a[href*="/demos/"]{
	background: url(images/icons/flash_small.png) no-repeat;
	padding-left: 20px;
}

a[href*="_source.zip"], a[href*="github.com"]{
	background: url(images/icons/page_white_cplusplus.png) no-repeat;
	padding-left: 20px;
}

/* =======PRINT CSS========*/

@media print{
	#indhold{
		text-align: left;
		width: 100%;
		min-width: 0;
	}
	#menu, #submenu{ display: none; visibility: hidden; }
	h1{margin-top: 0;}
	#side-bund{display: none; visibility: hidden;}
}