@charset "utf-8";

/*!
 * Sort it - (c)2016 Markus von der Wehd <mvdw@mwin.de>, Michael Blinzler <michaelblinzler@yahoo.de>
 */

html {
	height: 100%;
}
body {
	padding:20px;
	background-color: #150527;
	/* background: linear-gradient(150deg, #2e2d95, #070722); */
	color:#f8f8f8;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
}

/* globales überschreiben von tags ist eigentlich schlecht, wenn man mehrere solcher tags benutzt */
/* also wenn mehrere tabellen benutzt werden, lieber eine Klasse auf die Tabelle und die Klasse stylen */
table {
	border-collapse: collapse;
	width: 100%;
}
table td {
	vertical-align: top;
	/* text-align: left; */
	padding: 6px 0 6px 0;
	padding-right: 16px;
}
table td:first-child {
	padding-right: 16px;
}

p {
	padding: 0;
	margin: 0 0 8px 0;
	text-align: justify;
}
hr {
	border: 0 none;
	border-top: 1px solid #cccccc;
	padding: 0;
	margin: 12px 0 12px 0;
}
.hrTop {
	border-color: #eb9311;
}
.hrBottom {
	border-color: #888888;
}

button {
	font-family: Arial, Helvetica, sans-serif;
	outline: none; /* chrome focus marker, firefox disabled by background-color/border */
}

/* buttons */
.eventAction {
	cursor: pointer;
}

/* links */
.eventActionLink,
.eventActionLink:visited,
.eventActionLink:active {
	color: #aab7ff;
	text-decoration: none;
}
.eventActionLink:hover {
	color: #5e8af8;
	text-decoration: underline;
}

.clear {
	clear: both;
}

a.eventAction,
a.eventAction:active {
	color: #a0ffff;
}
a.eventAction:visited {
	color: #50c0c0;
}
a.eventAction:hover {
	color: #00ffff;
}

.monospace {
	font-family: "Courier", "Courier New", monospace;
}

.spacer8 {
	height: 8px;
}
.spacer16 {
	height: 16px;
}

.devVersionHint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #38bbb9;
}

.pageContainer {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}
.page {
}
.pageHeadline {
	color: #eb9311;
	font-size: 24px;
	margin: 0 0 12px 0;
	text-align: center;
}
.pageContentTitleSpacer {
	height: 16px;
}
.pageContentTitle {
	color: #e7bf40;
	font-weight: bold;
	padding: 8px 0 0 0;
	text-align: left;
}
.pageContentTitleItem { /* JS selector */
}
.pageContentContainer {
	/* background-color: #FFFFFF; */
	width: 720px;
	/* height: 480px; */
	margin: 0 auto;
	padding: 12px 0 12px 0;
	cursor: default;
}
.pageContent {
	/* largest page height, except pagePlayGame */
	/* height: 329px; */
	/* must be the same width as .pageContentContainer */
	width: 720px;
}

/* ---------- universal page buttons -------------------------------------------------- */

.pageButton {
	background-color: #dddddd;
	border: 1px solid #e6e6e6;
	border-radius: 9px;
	margin: 0;
	width: 200px;
	/* must use height/vertical-align instead of padding/line-height
		to define height, else <sup> destroys layout */
	/* padding: 3px; */
	/* line-height: 24px; */
	/* height: 24px; */
	vertical-align: bottom;
	font-size: 14px;
}
/* distance to fa icons */
.pageButtonText { /* JS selector */
    padding: 0 8px 0 0;
}
.eventAction.pageButton:hover {
	background-color: #eeeeee;
	border-color: #f4f4f4;
}
.pageButtonBack {
	background-color: #7a7a7a;
	border-color: #9c9c9c;
}
.eventAction.pageButtonBack:hover {
	background-color: #878787;
	border-color: #a6a6a6;
}
.pageButton:disabled {
	background-color: #240e36;
	border-color: #43384d;
	color: #554762;
}
.pageButtonLeft {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 75px;
}
.pageButtonMid {
	border-radius: 0;
	border-left: none;
	width: 45px;
}
.pageButtonRight {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
	width: 45px;
}

/* ---------- blinzi.de specific -------------------------------------------------- */

.pageBlinzi {
	text-align: justify;
}

a.pageButton,
a.pageButton:active,
a.pageButton:visited {
	display: inline-block;
	color: #000000;
	text-decoration: none;
	text-align: center;
	padding: 3px 8px 3px 8px;
	font-weight: bold;
	margin: 12px 0 12px 0;
}
a.pageButton:hover {
	color: #000088;
	text-decoration: none;
	font-weight: bold;
}

.alignLeft {
	text-align: left;
}
.alignCenter {
	text-align: center;
}

.logoAdjust {
	margin: -2px 0 0 0px;
}

.picAdjust {
	margin: 0 0 0 0;
	height: 165px;
	border: 2px solid #e6e6e6;
	border-color: #222288;
	border-radius: 16px;
	/* kein link mehr, cursor muss extra angegeben werden */
	cursor: pointer;
	/* spart das <br> tag :-) */
	/* der Abstand zum text kann pixelgenau angegeben werden */
	display: block;
    margin: 0 0 2px;
}

/* kleine Bilder, Galerie */

.thumbnailsContainer {
	position: relative;
	padding: 0 30px 0 30px;
}
.thumbnailsArrow {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 32px;
	cursor: pointer;
	opacity: 0.7;
}
.thumbnailsArrow:hover {
	opacity: 1;
}
.thumbnailsArrowLeft {
	left: 0;
	/* 62px because middle of image, total height = image height + image caption height */
	background: no-repeat center 62px url("../arrow_left_small.png");
}
.thumbnailsArrowRight {
	right: 0;
	/* 62px because middle of image, total height = image height + image caption height */
	background: no-repeat center 62px url("../arrow_right_small.png");
}
.thumbnailsMask {
	position: relative;
	width: 660px;
	height: 192px;
	overflow-y: hidden;
	overflow-x: scroll;
}
.thumbnailsList {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	/* quite dirty solution together with float:left to avoid extra space by line breaks, see below */
	width: 3300px;
}
.thumbnail {
	display: inline-block;
	margin: 0;
	text-align: center;
	width: 220px;
	/* quite dirty solution together with width:3300px to avoid extra space by line breaks, see above */
	float: left;
}
.thumbnailPicture {
	height: 152px;
	border: 2px solid #222288;
	border-radius: 16px;
	cursor: pointer;
    margin: 0 auto;
	display: block;
}
.thumbnailCaption {
	display: inline-block;
	padding: 2px 0 0 0;
}

/* grosses Bild */

.pageContentPictureBar {
	overflow-x: scroll;
	white-space: nowrap;
}
.pageContentPictureBar table td {
	text-align: center;
}

.pictureMask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.75;
}
.pictureContainer {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: table;
}
.pictureContainerContent {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.pictureBigBox {
	background-color: #240E36;
	border: 1px solid #765C8C;
	display: inline-block;
	position: relative;
}
.pictureBigBoxMask {
	position: relative;
	width: 790px;
	height: 614px;
	overflow: hidden;
}
.pictureBigBoxList {
	position: absolute;
	left: -790px;
	top: 0;
	width: 2370px; /* 3x big image */
}
.pictureBig {
	float: left;
}
.pictureBigLeft {
}
.pictureBigMid {
}
.pictureBigRight {
}
.pictureClose {
	position: absolute;
	top: -10px;
	right: -52px;
	width: 48px;
	height: 48px;
	cursor: pointer;
	background: no-repeat center url("../close.png");
	opacity: 0.7;
}
.pictureClose:hover {
	opacity: 1;
}
.pictureArrow {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 64px;
	cursor: pointer;
	opacity: 0.7;
}
.pictureArrow:hover {
	opacity: 1;
}
.pictureArrowLeft {
	left: -56px;
	background: no-repeat center url("../arrow_left.png");
}
.pictureArrowRight {
	right: -56px;
	background: no-repeat center url("../arrow_right.png");
}
.pictureImg {
}
.pictureCaption {
	background-color: #765C8C;
    padding: 4px 8px;
	color: #ffffff;
	font-weight: bold;
}