/* variables */

:root {
	/* colors */
	--background-color: #333333;
	--contentBackground-color: #b0c5b1;
	--text-color: #000000;
	
	--titleTextSelected-color: #ffffff;
	
	--menuTextLink-color: #aaccaa;
	--menuTextLinkHover-color: #bbffbb;
	--menuBackground-color: #444444;
	
	--contentBackground-color: #b0c5b1;
	--contentHeadline-shadow: 2px 2px 4px #282828;
	--contentHeadline-fontFamily: sans-serif, Georgia;
	
	--imageContainer-background: #97aa99;
	
	--badge-color: #f94228;
}

body {
	background-color:var(--background-color);
	color:var(--text-color);
}

/* !Title / breadcrumps */
.titlebar {
	position: absolute;
	top: 10px;
	right: 20px;
	padding: 0;
	font-family: sans-serif;
	font-size: large;
	background-color: inherit;
	color:var(--titleTextSelected-color);
}
.titlebar a {
	border: none;
	color: var(--menuTextLink-color);
	background-color: inherit;
}
.titlebar a:link { 
	text-decoration: none; 
}
.titlebar a:visited { 
	text-decoration: none; 
}
.titlebar a:hover{ 
	color:var(--menuTextLinkHover-color);
	background-color: inherit;
	border-bottom: 1px dashed;
}

/* !Menu on the left */
.menubar {
	position: fixed;
	left: 1.5%;
	top: 63px;
	width: 7em;
	padding-top: 1em;
	border-radius: 3px;
	background-color: var(--menuBackground-color);
	font-family: sans-serif, Georgia;
	text-align: center;
}
.menubar img {
	padding-bottom: 20px;
}
.menubar h1 {
	padding-top: 1%;
	margin: 0%;
	font-size: 16px;
	font-weight: bold;
}
.menubar h2 {
	padding: 1%;
	margin: 0%;
	font-size: 12px;
}
.menubar a {
	color: var(--menuTextLink-color);
}
.menubar a:link { 
	text-decoration: none; 
}
.menubar a:visited { 
	text-decoration: none; 
}
.menubar a:hover{ 
	color:var(--menuTextLinkHover-color);
	border-bottom: 1px dashed;
}

/* !Main text / page content */
#content {
	border-radius: 3px;
	min-width: 400px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	position: absolute;
	left: 10em;
	right: 1.5%;
	top: 64px;
	padding: 1%;
	background-color: var(--contentBackground-color);
	font-size: 2ex;
}
#content h1 {
	font-size: x-large;
	padding-top:1ex;
	text-shadow: var(--contentHeadline-shadow);
	font-family: var(--contentHeadline-fontFamily);
}
#content h3 {
	font-size: large;
	padding-top:1ex;
	text-shadow: var(--contentHeadline-shadow);
	font-family: var(--contentHeadline-fontFamily);
}
#content h2 {
	font-size: large;
	padding-top:1ex;
	text-shadow: var(--contentHeadline-shadow);
	font-family: var(--contentHeadline-fontFamily);
}
#content a {
	text-decoration: none;
	border-bottom: none;
	color: var(--text-color)
}
#content a:link, a:visited, a:hover {
	border-bottom: 1px dashed;
}
#content a:hover {
	color: #0080ff;
}
#content a:active {
	color: #ff0000;
}
#content li {
	padding:3px;
}
#content ul {
   padding-left: 1em;
}
#content td {
	padding:4px;
}

.appStoreBadge {
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 2em;
	padding-bottom: 2em;
}
.appStoreBadge a, a:link, a:visited, a:hover {
	border-bottom: none !important;
}
.appStoreBadge table {
/* 	center table */
	margin-left: auto;
	margin-right: auto;
}
.appStoreBadge table td {
	text-align: center;
}

.center {
	width: 70%;
	margin: 0 auto;
}

/* container for showing an image left with text to the right within content */
.imagePlusText-container {
	margin-left: em;
	margin-right: 1em;
	padding: 1em;
	margin-bottom: 3px;
	background-color: var(--imageContainer-background);
	border-radius: 6px;
	max-width: 800px;
	min-width: 300px;
    display: flex;
	align-items: center;
    &__image {
        object-fit: contain;
        align-self: flex-start;
        max-height: 100px;
    }
    &__text {
        flex: 1 1 auto;
    }
}

.imagePlusText-container img {
	height: 250px;
}

.imagePlusText-container-large {
	margin-left: 1em;
	margin-right: 1em;
	padding: 1em;
	margin-bottom: 3px;
	background-color: var(--imageContainer-background);
	border-radius: 6px;
	max-width: 800px;
	min-width: 300px;
    display: flex;
	align-items: center;
    &__image {
        object-fit: contain;
        align-self: flex-start;
        max-height: 100px;
    }
    &__text {
        flex: 1 1 auto;
    }
}

.imagePlusText-container-large img {
	height: 450px;
}

/* spacer to be used between image and text in imagePlusText-container */
.spacer {
	padding: 10px;
}

/* display a white number in a red circle */
.numberCircle {
	width: 16px;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	text-align: center;
	display: flex;
	background-color: var(--badge-color);
	color: #ffffff;
}

/* special font */
.remark {
	font-size: smaller;
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
}

/* superscript */
.super{
	vertical-align: super;
	font-size: smaller
}