/*
 * 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%;
   margin: 4px;
   font-family: Tahoma, Verdana, Arial;
   color: black;
   background-color: rgba(222, 222, 222, 1.0);
/*    background-image: url("../images/background.jpg");  */
   background-size: cover;
}

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%;
   max-width: 1200px;
   top: 0px;
   padding-left: 1rem;
   text-align: center;
   color: #ffffff;
   border-radius: 1em;
   background-color: rgba(255, 172, 0, 1.0);
   background-image: linear-gradient(rgba(222, 222, 222), rgb(164, 164, 164));
}

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

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

h3 {
   font-size: 1.0rem;
   font-weight: bold;
}

hr {
   color: blue;
}

ul {
   list-style-position: outside;
   padding-left: 30px;
}

code {
   color: rgb(200, 106, 0);
}

#buttonNewerArticles {
   display: none;
}

#buttonOlderArticles {
   display: none;
}

#loginDiv {
   float: right;
}

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

#caption {
   text-align: center;
}

#showHideButtonRightAside {
   display: none;
}

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

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

#rightaside {	
   float: right;
   width: 0rem;  /* ra-width */
   min-height: 36rem;
   /*padding: 0.1rem;*/
}

#rightasideContent {
   background-color: #ffffff;
   min-height: 36rem;
   padding: 0.5rem;
   border-radius: 1em;
}

#topicCaptionTable {
   display: none;
}

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

#article-comments-div-0 {
   width: calc(100% - 26rem);
   min-width: 22rem;
}

#article-comments-div-1 {
   width: 22rem;
   min-width: 22rem;
}

.article-comments-div {
   display: flex;
   flex-direction: column;
   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;
}

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

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

.keywords {
 	font-size: 80%;
	background-color: #f6f6f6;
}

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

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

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