/*
 * 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: 0.9rem;
}

* {
   margin: 0;
   padding: 0;
}

body {
   height: 100%;
   margin: 4px;
   font-family: Tahoma, Verdana, Arial;
   color: black;
   background-color: #aaaaaa;
   background-size:100% auto;
   background-attachment: fixed;
}

main {
   margin-top: 0;
   min-width: 400px;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   height: calc(100% - 2.4rem);
}

header {
   height: 40px;
   width: 100%;
   top: 0px;
   padding-left: 1rem;
   text-align: center;
   color: #ffffff;
   border-radius: 1em;
   color: #ffffff;
   background-color: rgba(0,0,255,0.7);
}

h2 {
   font-size: 1.2rem;
   font-weight: bold;
}

hr {
   color: blue;
}

#articles-div {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   flex-wrap: wrap;
}

.article-comments-div {
   display: flex;
   flex-direction: column;
   width: calc(100% - 7rem);
   min-width: 20rem;
   margin: 0rem 2rem 2rem 0rem;
   background-color: white;
   border-radius: 1em;
}

.article-div {
   align-items: stretch;
   border-radius: 1em 1em 0em 0em;
   padding: 0.5rem;
}

.comments-div {
   width: calc(100% - 1rem); /* -1rem wegen padding; sonst wird das gesamte Feld zu breit */
   min-height: 1.2rem;
   padding: 0.5rem;
   background-color: #eeeeee;
   border-radius: 0em 0em 1em 1em;
}

.comment-button {
   color: darkblue;
   background-color: #eeeeee;
   text-decoration: underline;
   padding-bottom: 2px;
   border: 0;
   cursor: pointer;
}

.button {
   margin-top: 4px;
   margin-bottom: 4px;
   background-color: #dddddd;
   padding: 2px;
}

.dlg {
   padding: 2px;
}

.logo-sowas {
   float: left;
   height: 24px;	
   margin: 2px 4px 2px 4px;
}

#caption {
   text-align: center;
}

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

#rightaside {	
   float: right;
   width: 12.1rem;  /* ra-width */
   min-height: calc(100% - 5.0rem);
   padding: 0.1rem;
}

#rightasideContent {
   background-color: #ffffff;
   min-height: calc(100% - 5.0rem);
   padding: 0.5rem;
   border-radius: 1em;
}

.date {
   width: 99%;
   text-align: right;
   font-size: 0.8rem;
}

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

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.2);
    visibility: hidden;
}

#loginDiv {
    float: right;
}

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

.imageText {
	font-size: 0.8rem;
	margin-bottom: 20px;
}

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

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

.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;
}

.imagetext {
	float: right;
	text-align: right;
	font-size: 0.8rem;
}

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

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

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