html, body {
	/* damit der footer ganz unten sein kann auch wenn die Seite selbst wenig content hat */
	height: 100%;	
	margin: 0;
  	padding: 0;
}

body{
	color: #333;
	--max-total-width: 2500px;	/* on extremly wide screens the page should not expand more than this */
}

#main-page-wrapper {
	display: flex;
  	flex-direction: column;
	min-height: 100%;		/* Necessary to let the footer stay on the bottom if content needs less space than the full height */
}

#main-content-wrapper {
	flex: 1;	/* On short pages, this stretches the content-container (div between header and footer), so the footer is on the bottom of the browser window */

	/* The only solution I found to stretch amray over the full main content wrapper was to use flex 
	 (setting the main content wrapper to full width / height and also amray_root didi not work)
	 The only way I managed to do it were these 3 flex lines and setting flex:1 on the iframe (have to test without iframe)
	 */
	display: flex;
    flex-direction: column;
    justify-content: stretch;

	/* Necessary to let canvases (eg amalyzer) shrink on a space-reducing resize */
	min-height: 0;

	/* I don't restrict the main-page-wrapper to this, as I want the footer and header
	 to expand completely (not their content, but their background) */
	max-width: var(--max-total-width);

}

#main-content-wrapper>.row {
	flex: auto;	/* On short pages, this stretches the content-container */
}

/* css for ads is in ads.css! */