/* Global */
body {
	font: 110%/1.3 Calibri, Roboto, Verdana, Arial, Helvetica, sans-serif;
	background: linear-gradient(to bottom right, #139bad, #002e34 80%, black);
	text-align: justify;
	margin: 0;
	padding: 0;
	color: black;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	left: 0;
	top: 0;
}

img.globalback {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: fixed;
	z-index: -1;
}

img.ext {
	border-style:none;
	vertical-align:middle;
	margin-right:3px;
}

img.left {
	float: left;
}

img.right {
	float: right;
}

.righttext{
	text-align:right;
}

img.margined{
	margin: 15px 15px 15px 15px;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}

/* Links */
a img { 
	border: none;
}

a:link {
	color: #008293;
	text-decoration: underline;
}
a:visited {
	color: #008293;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.zitat {
	margin-left: 40px;
	margin-right: 40px;
	font-style: italic;
	background-color: #EEEEEE;
}

/* Container */
.container {
	width: 96%;
	min-width: 950px;
	background: white;
	margin: 2% auto; 
}

/* PicContainer */
.piccontainer {
	width: 98%;
	min-width: 950px;
	background: transparent;
	margin: 1% auto; 
}

/* Header */
.header {
	background: linear-gradient(to right, #efa700, #efa700 220px, #b98100);
	height: 85px;
	overflow:hidden;
}

.header p {
	display: inline-block;
	margin-top: 13px;
	vertical-align: top;
}

img.headernav {
	margin-left: 10px;
}

img.fullstretch {
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
}

a.navdir{
	width:70px;
	height:71px;
	display:inline-block;
	vertical-align:top;
	margin-top:13px;
	margin-left:0px;
	margin-right:0px;
	text-decoration: none;
}

a.navdir:hover, a.navdir:active, a.navdir:focus{
	background-position: -70px 0;
}

.navleft {
	background: url(/images/leftbi.png);		
}

.navright {
	background: url(/images/rightbi.png);
}

a.navmid{
	width:106px;
	height:71px;
	display:inline-block;
	vertical-align:top;
	margin-top:13px;
	margin-left: 0px;
	margin-right: 0px;
	text-decoration: none;
}

a.navmid:hover, a.navmid:active, a.navmid:focus{
	background-position: -106px 0;
}

a.navpic{
	width:106px;
	height:71px;
	display:inline-block;
	vertical-align:top;
	margin-top:13px;
	margin-left:10px;
	text-decoration: none;
}

a.navpic:hover, a.navpic:active, a.navpic:focus{
	background-position: -106px 0;
}

.navbericht {
	background: url(/images/berichtbi.png);	
}

.navfotos{
	background: url(/images/fotosbi.png);
}

.navsoftware{
	background: url(/images/softwarebi.png);
}

.navprojekte{
	background: url(/images/projektebi.png);
}

.navlinks{
	background: url(/images/linksbi.png);
}

/* Year Links */

a.year {
	width:90px;
	height:36px;
	color: white;
	font-size:26px;
	font-weight:lighter;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	text-decoration: none;
	background: url(/images/background_year.png);
}

a.year:hover, a.year:active, a.year:focus {
	color: #009DB2;
}

/* Navbar */
a.navhead{
	width:216px;
	height:36px;
	display:inline-block;
	vertical-align:top;
	margin-left:2px;
	margin-top:15px;
	margin-bottom:10px;
	text-decoration: none;
}

a.navhead:hover, a.navhead:active, a.navhead:focus{
	background-position: -216px 0;
}

.headfotos{
	background: url(/images/headfotosbi.png);
}

.headsoftware{
	background: url(/images/headsoftwarebi.png);
}

.headprojekte{
	background: url(/images/headprojektebi.png);
}

.headlinks{
	background: url(/images/headlinksbi.png);
}

.sidebar {
	float: left;
	width: 220px;
	margin-right: -100%;
	background: linear-gradient(to bottom, #efa700, #c08500);
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	padding-bottom: 100px;
}

.sidebar img{
	margin-left:2px; 
	margin-top:20px; 
	margin-bottom:10px;	
}

.sidebar li img{
	margin: 0px;
	vertical-align: middle;
	padding: 0px;
}

.sidebar ul{
	list-style: none;
	margin-bottom: 15px;
}

.sidebar ul li {
	text-align:center;
	font-weight:bold;
}

.sidebar ul ul{
	list-style: none;
	border-top: 1px solid #005B67;
	margin-bottom: 15px;
}

.sidebar ul ul li {
	text-align:left;
	font-size: 80%;
	font-weight:normal;
	border-bottom: 1px solid #005B67; 
}

 .sidebar ul ul a, .sidebar ul ul a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
	color: white;
}

.sidebar ul ul a:hover, .sidebar ul ul a:active, .sidebar ul ul a:focus { 
	color: #009DB2;
}

/* Download, Picinfo */
.download, .picinfo {
	padding: 10px;
	margin: 20px;
	float: right;
	background-color: #ffe197;
	color: black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;	
}

.picinfo {
	margin-top: 0px;
	margin-right: 10px;
}

.download img, .picinfo img {
	margin-right: 10px;
}

.picinfo img {
	float: left;
}

.picinfo span {
	background-color: rgba(255, 255, 255, .25);
	border: 1px solid #139bad;
	border-radius: 5px;
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
	margin: 3px;
	width: 75px;
	height: 32px;
	line-height:: 32px;
	display: inline-block;
	text-align: center;
}

.picture {
	text-align: center;
}

/* Picture Content */
.piccontent {
	padding: 10px 0;
	background: transparent;
	text-align: center;
}

.piccontent img {
	width: 100%;
	position: relative;	
}

span.infotext {
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.5);
	position: absolute;
	color: white;
	left: 15%;
	top: 200px;
	right: 15%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	border-radius: 10px;
	padding: 10px;
	visibility: hidden;
}

span.infotext img{
	width: auto;
}

span.infotext a, span.infotext a:visited{
	color: white;
}

span.aussen:hover span.infotext {
	visibility:visible;
}

/* Content */
.content {
	padding: 10px 0;
	list-style-image : url(/images/bullet.png);
}

.content li li {
	list-style-image : url(/images/bullet2.png);	
}

.content table {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

.withsidebar {
	margin-left: 220px;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

/* ~~ Fußzeile ~~ */
.footer {
	font-size:small;
	text-align: center;
	color: #EFA700; 
	background: linear-gradient(to right, #906400, #442F00);
	border-color: #aa7700;
	border-style: solid;
	border-width: 2px;
	padding: 10px 0;
	position: relative;
	clear: both;
}

.footer a, .footer a:visited{
	color: #EFA700; 
	text-decoration: underline;
}

.footer a:hover, .footer a:active, .footer a:focus { 
	text-decoration: none;
}

/* Fotos addons */
.previewline {
	width: 100%;
	padding: 10px;
}

.previewpic {
	width: 300px;
	height: 300px;
	background: url(/images/background_pic.png) no-repeat;
	background-position: center;
	display: table-cell;
	text-align:center;
	vertical-align:middle;
}

.previewtext {
	display: table-cell;
	vertical-align:middle;
	padding-left: 10px;
	padding-right: 25px;
}

@media (prefers-color-scheme: dark) 
{
body {
	color: rgba(255,255,255,0.87);
	background: linear-gradient(to bottom right, #0e6c79, #002e34 80%, black);
}

a:link, a:visited {
	color: rgba(0,226,255,0.87);
}

.sidebar {
	background: linear-gradient(to bottom, #d39300, #b27b00);
}

.sidebar img {
	filter: saturate(80%) brightness(90%);
}

.header {
	background: linear-gradient(to right, #d39300, #d39300 220px, #b27b00);		
}

.header img {
	filter: brightness(89%);
}

.container {
	background-color: #121212;
}

.download, .picinfo {
	background-color: #b99743;
}

.picinfo img {
	filter: saturate(80%) brightness(90%);
}

.zitat {
	background-color: #323232;
}

}