* {
	box-sizing: border-box;
}

html {
	font-size: 100%;
}





/* BODY.CMS FOR CMS-PAGES AND LOGIN-PAGE */

body.cms {
	display: flex;
	
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #444;
	
	margin: 0;
	padding: 0;
	
	background-color: #f7f7f7;
	
	justify-content: center;
}

body.cms h1, body.cms h2, body.cms h3 {
	margin: 0 0 1em 0;
	
	line-height: 1.5em;
	
	color: #222;
}

body.cms h1 {
	font-size: 1.84em;
}

body.cms h2 {
	font-size: 1.49em;
}

body.cms h3 {
	font-size: 1.17em;
}

body.cms a {
	color: #222;
}

body.cms hr {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	
	margin: 0.75em 0;
}

span.checkmark {
	font-size: 1.25em;
	vertical-align: middle;
	font-weight: bold;
}

summary span.clickable {
	text-decoration: underline;
}

summary span.clickable:hover {
	cursor: pointer;
}



body.cms .container {
	display: block;
	
	width: 842px;
	height: auto;
}

body.login .container {
	width: 555px;
}



body.cms header {
	margin: 0;
	padding: 1.5em 2em;
	
	background-color: transparent;
}

body.cms header a {
	color: #777;
}



body.cms main {
	margin: 0 0 2em 0;
	padding: 2em;
	padding-top: 1.5em;
	
	background-color: #d6d6d6;
	
	border-radius: 1.5em;
}



body.cms form {
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	
	padding: 0;
	margin: 0.5em 0;
}

body.cms form fieldset {
	margin: 1em 0;
	padding: 0.5em 0;
	
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	
	overflow: hidden;
	min-width: 0; /* solves a horizontal scaling problem with fieldsets and their content on smaller screens */
	width: 100%; /* as addition to the above solution for the fieldset issue */
}
body.cms form fieldset:hover:disabled, body.cms form fieldset:hover:disabled * {
	cursor: auto;
}

body.cms form fieldset legend {
	margin: 0 1em;
	padding: 0.25em 0.5em;
	
	font-style: italic;
	font-weight: bold;
}

body.cms form fieldset.markdown_options div {
	width: auto;
	display: inline-block;
	
	vertical-align: baseline; /* text-top */
	
	background-color: #ededed;
	
	border-radius: 0.2em;
	
	margin: 0.25em;
	padding: 0.5em;
}

body.cms form label:hover { /* label only for radiobuttons and checkboxes */
	cursor: pointer;
}

body.cms form label.arrow img {
	/*font-size: 1.5em;*/ /* removed style because of textual representation of direction, instead of using (non-working) arrows */
	height: 1.2em;
	width: auto;
}

body.cms form input, body.cms form select, body.cms form textarea {
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}

body.cms form input[type=text], body.cms form input[type=submit], body.cms form input[type=password], body.cms form input[type=file], body.cms form input[type=number], body.cms form input[type=email] {
	width: 17em;
	height: auto;
	
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	
	margin: 0.25em 0;
	padding: 0.5em 0.75em;
	
	background-color: #fff;
	border: none;
}

body.cms form input[type=password] {
	width: 11em;
}

body.cms form input[type=submit] {
	width: auto;
	
	margin: 1em 0 0 0;
	padding: 0.5em 1em;
	
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.1em;
	
	background-color: #999;
	border-radius: 7px;
}
body.cms form input[type=submit]:hover {
	cursor: pointer;
}

body.cms form input[type=checkbox] {
	margin: 0.5em 0.75em 0.5em 1em;
	transform: scale(1.25);
}

body.cms form input[type=radio] {
	margin: 0.5em 0.75em 0.5em 1em;
	transform: scale(1.25);
}

body.cms form input[type=file] {
	margin: 0.5em 0;
	padding: 0.5em;
	
	width: auto;
	
	background-color: #ededed;
}

body.cms form input[type=number] {
	width: 9em;
}

body.cms form input[type=text]:disabled {
	background-color: #999;
}

body.cms form select {
	margin: 0.5em 0;
	padding: 0.5em;
	
	background-color: #ededed;
	border: none;
}

body.cms form textarea {
	width: 100%;
	height: 17em;
	
	margin: 0.25em 0;
	padding: 0.5em 0.75em;
	
	background-color: #fff;
	border: none;
}



body.cms div.tabs {
	overflow: hidden;
	
	width: 100%;
	
	margin: 2em 0 0 0;
}

body.cms div.tabs>a {
	display: inline-block;
	
	margin: 0 0.25em 0 0;
	padding: 0.5em 1.25em;
	
	color: #666;
	
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
	
	
	border-bottom: 0;
	border-radius: 0.5em 0.5em 0 0;
}

body.cms div.tabs a.active {
	color: #444;
	line-height: 1.84em;
	
	background: 0;
	
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 0;
	
	text-decoration: none;
}

body.cms div.colorswatch {
	padding: 0.5em 0;
}

body.cms div.colorswatch > div {
	 display: inline-block;
	 
	 width: 1.5em;
	 height: 1.5em;
}





/* SEPARATE CLASSES FOR CMS-BAR AND CMS-BUTTONS */

div.cms_bar, div.cms_button {
	font-family: "Verdana", sans-serif;
	font-size: 1rem; /* use rem to keep the cms button the same size, when the fonts change (with their own font-size/line-height) */
	line-height: 1.5rem;
	color: #555;
	
	background-color: #d6d6d6;
}



div.cms_bar {
	/*
	position: fixed;
	top: 0;
	*/
	
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	
	opacity: 0; /* use 'opacity' for toggling between visible/hidden cms bar when hovering */
	
	width: 100%; /* 842px */
	/*height: 11px; *//* hover area when cms bar is toggled hidden (height of cms bar becomes 'auto' on hovering and when visible) */
	
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	
	margin: 0 0 1em 0;
	padding: 0.25em 0.75em;
	
	border-radius: 0 0 0.5em 0.5em;
	border: 1px solid #777;
	border-top: none;
}

div.cms_bar a, div.cms_bar span {
	margin-right: 1em;
	
	color: #444;
}

div.cms_bar span {
	margin-left: -1em; /* to undo margin from hyperlink, if there is text next to link */
}

div.cms_bar a.right_from_here {
	margin-left: auto; /* positions certain flex-items at the far right, flexbox needs auto-margins for this */
}

div.cms_bar a:last-child {
	margin-right: 0;
}

div.cms_bar:hover {
	opacity: 1; /* use 'opacity' for toggling between visible/hidden cms bar when hovering */
}



div.cms_button {
	display: inline-block;
	
	width: auto;
	height: auto;
	
	/* minimum size of the empty button that is the default */
	/*
	min-width: 2em;
	min-height: 1.5em;
	*/
	
	margin: 0.25em;
	padding: 0.25em 0.75em;
	
	border-radius: 0 0.5em 0.5em 0;
	border: 1px solid #777;
}
div.cms_button a {
	color: #444;
}





/* CLASS FOR ERROR MESSAGES ('DIE WITH GRACE') */

.error {
	background-color: #000;
}

.error .container {
	background-color: #777;
}





/* CLASS FOR (SUCCESS) ALERT MESSAGES */
/* !!! COMBINE ALERT-CLASS WITH CMS_BAR AND CMS_BUTTON CLASS !!! */
div#alert {
	width: 100%;
	overflow: hidden;
	
	padding: 0.5em;
	
	background-color: transparent;
	
	text-align: center;
}

div#alert div.cms_button {
	/*border: 1px dashed #555;*/
	border: 1px dashed #666;
	border-radius: 0.5em;
	
	font-style: italic;
	
	animation: softrise 1.1s ease-out; /* animated alert buttons */
}
@keyframes softrise {
	50% {
		background-color: rgba(255, 255, 255, 0.69);
	}
}





/* CLASSES FOR CHECKERED BACKGROUND BEHIND PNG IMAGES WITH TRANSPARENCY */

.checkered {
	display: inline-block;
	width: auto;
	
	background: url(checkered-bgr.png);
	background-repeat: repeat;
}