/*
 * Bei Änderungen der Breite eines Elements nach allen Kommentaren mit den Wert nach dem Doppelpunkt suchen!
 *
 * left-aside width: la-width
 * right-aside width: ra-width
 */
html {
   height: 100%;
	font-size: 1rem;
}

* {
   margin: 0;
   padding: 0;
}

body {
   height: 100%;
   font-family: Tahoma, Verdana, Arial;
   color: black;
   background-image: url(../images/background.jpg); 
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

article {
	float: left;
   min-height: calc(100% - 5.0rem);
   width: calc(100% - 0.4rem);  /* la-width + ra-width + horizontalSiteSpacer */
   padding: 0.1rem;
}

main {
	margin-top: 0.2rem;
   min-width: 600px;
	max-width: 1200px;
	margin-left: auto;
 	margin-right: auto;
   height: calc(100% - 2rem);
}

header {
   height: 32px;
   width: 100%;
   top: 0px;
   text-align: center;
   color: #ffffff;
   background-color: rgba(27,46,139,0);   /* mit opacity = 0 auf Startseite unsichtbar gemacht */
}

ul {
   list-style-position: outside;
   padding-left: 30px;
}
	
.logo-sowas {
	float: left;
	height: 24px;	
   margin: 2px 4px 2px 4px;
}

.comment-button {
	cursor: pointer;
}

#leftaside {	
	float: left;
	width: 0px;  /* la-width */
   min-height: calc(100% - 7.1rem);
}

#loginDlg {
   position: absolute;
   top: 2rem;
   right: 0.2rem;
   background-color: #222222;
}

#loginButton {
   width: fit-content;
   height: fit-content;
   margin-top: 2px;
}

#menuDiv {
   display: none;
   position: absolute;
   top: 3rem;
   right: 2.4rem;
   width: 9rem;
   padding: 0.3rem;
   border-radius: 0.4rem;
   background-color: rgba(255, 255, 255, 0.96);
}

#rightaside {	
	float: right;
	width: 0rem;  /* ra-width */
   min-height: 2rem;
   padding: 0rem;
	background-color: rgba(255, 255, 255, 0.7);
}

footer {
   clear: both;
   height: 28px;
   width: 100%;
   margin-bottom: 8px;
   font-size: 0.8rem;
   text-align: center;
   color: white;
   background-color: rgba(27,46,139,0.3);
}

.clickable-image {
   cursor: pointer;
   padding-left: 6%; 
   height: 220px; 
}

.padding-left-image {
   padding-left: 6%;
}

.small-clickable-image {
   cursor: pointer;
   height: 72px; 
}

.doma-clickable-image {
   cursor: pointer;
}

.edit {
	display: none;
}

.editButton {
	float: right;
	display: none;
}

.setCommentButton {
	float: right;
	display: none;
}

.appSpacer {
	float: left;
	width: calc(99%/2 - 9*16px - 110px);  /* 7 = Anzahl Apps; 16 = (24+2*4)/2; 106 = width vom Logo */
	height: 28px;	
}

.horizontalSiteSpacer {
	width: 1.2rem;
}

.verticalSiteSpacer {
    clear: both;
	height: 1.2rem;
}

.app {
	float: left;
	width: 24px;
	height: 24px;	
   margin: 2px 4px 2px 4px;
	font-size: 18px;
   background-color: #cccccc;
	cursor: pointer;
}

/* ------------------------ media ----------------------------- */

/* ------------ PC ---------------*/
@media all and (max-resolution: 230dpi) {
}

/* ------------ Mobile ---------------*/
@media all and (min-resolution: 230dpi) {
}