@charset "utf-8";
/*##########################################################################################################################################*/
/*				LOGGED-USER Message																											*/
/*##########################################################################################################################################*/
	aside#LOGGEDUSER {top:9.5px; right:10px; left:auto; width:165px; height:38px; z-index:1001;}
	p#LOGGEDTEXT {margin:0; font-size:9pt; color:#dbdada;}
	p#LOGGEDNAME {margin:0; font-size:14pt; color:#dbdada; font-weight:bold;}
	@media (max-width: 767px) {aside#LOGGEDUSER {top:4.5px; height:33px;} }
	@media (max-width: 370px) { aside#LOGGEDUSER {right:0; width:160px;} p#LOGGEDNAME {font-size:11pt;} }

	aside#FREEUSER {top:9.5px; right:10px; left:auto; width:165px; height:38px; z-index:1001;}
	p#FREENAME {margin:0; font-size:9pt; color:#dbdada;}
	p#FREETEXT {margin:0; font-size:14pt; color:#dbdada; font-weight:bold;}
	@media (max-width: 767px) { aside#FREEUSER {top:4.5px; height:33px;} }
	@media (max-width: 370px) { aside#FREEUSER {right:0; width:160px;} p#FREETEXT {font-size:11pt;} }
	@media (max-width: 300px) { aside#LOGGEDUSER {display:none;} aside#FREEUSER {display:none;} }

/*##########################################################################################################################################*/
/*				ONLINE USER																													*/
/*##########################################################################################################################################*/
	span#o_5401387 {position:fixed; top:56.5px; right:10px; left:auto; width:165px; height:14px; text-align:center; z-index:1001;}
	span#o_5401387 a {display:block; font-weight:bold; font-size:9pt; color:#dbdada;}
	@media (max-width: 767px) { span#o_5401387 {top:41.5px;} }
	@media (max-width: 370px) { span#o_5401387 {right:0; width:160px;} }
	@media (max-width: 300px) { span#o_5401387 {display:none;} }

/*##########################################################################################################################################*/
/*				BILSDCHIRM AUFLÖSUNG																										*/
/*##########################################################################################################################################*/
	/*aside#dimension {position:fixed; top:9.5px; right:10px; left:auto; width:165px; height:38px; z-index:1001;}
	/*p.text {margin:0; font-style:italic; font-size:9pt; color:#dbdada; text-align:center;} /* padding:0 0 5px 0; */
	/*p.look {margin:0; font-style:italic; font-size:9pt; color:#dbdada; text-align:center; font-weight:bold;} /* padding:5px 0 0 0; */
	/*@media screen and (max-width: 767px) {aside#dimension {top:4.5px; height:33px;} } /* p.text {padding:0 0 2px 0;} p.look {padding:2px 0 0 0;} */
	
	aside#dimension {top:86px; left:auto; width:185px; height:38px; z-index:100;}
	p.text {font-size:9pt; color:#ccc;} /* padding:0 0 5px 0; */
	p.look {font-size:9pt; color:#ccc;} /* padding:5px 0 0 0; */
	@media (max-width: 767px) {aside#dimension {top:66px;padding:0;} /* p.text {padding:0 0 2px 0;} p.look {padding:2px 0 0 0;} */ }
	@media (max-width: 449px) {aside#dimension {top:60px; height:17px;}
		p.text, p.look {display:inline-block; width:50%; font-size:9pt;}
		p.text {text-align:right;}
		p.look {text-align:left; color:#333;}
	}
	
/*##########################################################################################################################################*/
/*				OVERLAY-LOADER																														*/
/*##########################################################################################################################################*/
	article#overlayLoader {z-index:1500; position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(51,51,51,0.5);}
	section#overlayloading.overlay-wrapper {display:block; position:fixed; top:calc(50% - 113px); right:0; left:0; background-color:rgba(255,255,255, 0.95);}
	div.overlay-container {padding:4em;}
	div.overlay-container .loading-heading {position:relative; padding:0 0 30px; font-weight:600; font-size:150%; color:#0072c6; text-align:center;}
	/* div.overlay-container .loading-animation {position:relative; width:40px; height:40px; margin:0 auto; background:url("/static/images/ProgressRing_Blue40x40.gif") no-repeat;} */
	div.overlay-container .loading-animation {position:relative; width:120px; height:120px; padding:0 0 30px; border:16px solid #f3f3f3; /* Light grey */ border-top:16px solid #3498db; /* Blue */ border-radius:50%; animation:spin 2s linear infinite;}
	@keyframes spin { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }
	section#overlayControl {z-index:1550;position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(51,51,51,0.1);}

/*##########################################################################################################################################*/
/*				LOGIN-MODAL UBER ANMELDE-BUTTON																								*/
/*##########################################################################################################################################*/
	#pageSignin.signin-modal {position:fixed; top:80px; right:0; bottom:0; left:0; padding:0 !important;}
	/* #pageSignin.modal {top:80px; right:0; bottom:0; left:80px; padding:0 !important;} */
	/* @media screen and (max-width:1071px) {#pageSignin.modal {left:0;}} */
	@media (max-width: 767px) {#pageSignin.signin-modal {top:60px;}}
	#pageSignin .modal-content {height:100%; min-height:445px; padding:30px 0; background-clip:border-box; background-color:#ececec; border:0; border-radius:0; box-shadow:none;}
	#pageSignin .modal-content .container {position:absolute; top:30px; right:0; bottom:30px; left:0;}
	#pageSignin .modal-content .modal-body.pageSignin {height:calc(100% - 0px);} /* top:0; bottom:0; width:calc(100% - 0px); background:aquamarine; */
	
	#pageSignin .modal-content .close-modal {position:absolute; top:auto; bottom:30px; width:75px; height:75px; cursor:pointer;}
	#pageSignin .modal-content .close-modal:hover {opacity:0.5;}/* height:75px; */
	#pageSignin .modal-content .close-modal * {position:absolute; background-color:#222; transform:rotate(45deg);}
	#pageSignin .modal-content .close-modal .lr {left:2px; width:1px; height:75px; margin-left:35px;}
	#pageSignin .modal-content .close-modal .rl {top:37px; width:75px; height:1px;}
	@media (min-height:  1px) and (max-height: 475px) {
		#pageSignin .modal-content {min-height:335px;}
		#pageSignin .modal-content .close-modal {top:6px; right:10px; left:auto; width:38px; height:38px;}
		#pageSignin .modal-content .close-modal .lr {left:0; width:1px; height:38px; margin-left:20px;}
		#pageSignin .modal-content .close-modal .rl {top:19px; width:38px; height:1px;}
	}
		.demo_info {position:relative; right:0; left:0; max-width:720px; margin:0 auto; text-align: center; font-size:12pt; border:0px solid gray;}
		@media (max-width: 767px) {.demo_info {max-width:640px;}}
		.demo_info:before {font-weight:bold; white-space:pre-wrap; content:"Logge dich ein um auf mehr Ressourcen zugreifen zu können. \A \A";}
		/* .demo_info:after  {white-space:pre-wrap; content:"- für Demo Zwecke logge dich mit User: 'demo' und dem Passwort: 'demo' ein \A - wähle ein Buch ( links im Menü ) ... der Inhalt dieses Buches wird angezeigt \A - klick auf 'Buch bearbeiten' ... alle Monster werden als editierbar angezeigt \A - klick auf das zu ändernde Monster ... nur noch dieses Monster wird als editierbar angezeigt \A - ändere im 'Editier-Fenster' deinen neuen Status des Monsters ( 'hab ich' bzw 'Rang' des Monsters ) \A - mit Klick auf 'Save' überträgst du dann deine Änderung an den Server \A \A V i e l S p a ß";} */
	
		.logintext {position:fixed; top:370px; left:250px; width:80px; height:65px; font-size:14px; font-weight:bold; line-height:1.5em; border:0px solid red;}
	
		.loginlogo {position:relative; top:15px; right:0; left:0; width:189px; height:107px; margin:0 auto; background-image:url(/static/images/login.gif); background-repeat:no-repeat; border:0px solid red;}
		.login {position:relative; right:0; left:0; width:220px; height:120px; margin:0 auto; font-size:10.5pt; font-weight:bold; background-color:lightgrey; border:1px solid #ddd; border-radius:10px; box-shadow:3px 3px 5px lightgrey;}
		.login form {height:100%;}
		div#username {position:relative; top:20px; left:50%; padding:0 5px; text-align:center; transform:translate(-49%,0%);}
		div#password {position:relative; top:30px; left:50%; padding:0 5px; text-align:center; transform:translate(-49%,0%);}
		#username input, #password input {text-align:center; background-color:#fff; border:2px inset lightgray; border-radius:5px;}
		input#login {position:relative; top:50px; left:50%; padding:0 10px; background-color:#ececec; transform:translate(-49%,0%); border:2px outset lightgray; border-radius:10px;}
		input#login:focus, input#login:active, input#login:hover {background-color:#b2ffd7; border: 2px inset lightgray;}
		input#id_username, input#id_password {height: 20px;}

/*##########################################################################################################################################*/
/*				FOR ALL PAGES																												*/
/*##########################################################################################################################################*/
	#close-open a {color:#336699;}
	#close-open a:focus, #close-open a:hover {color:#FF0033;}
	#close-open span {font-size:13.5pt;}

	.gold		{background-image:url(/static/images/gold.png), url(/static/images/all/gold.png);}
	.futter		{background-image:url(/static/images/futter.png), url(/static/images/all/futter.png);}
	.goldstar	{background-image:url(/static/images/goldstar.png), url(/static/images/all/goldstar.png);}
	.bluestar	{background-image:url(/static/images/bluestar.png), url(/static/images/all/bluestar.png);}
	.time		{background-image:url(/static/images/zeit.png), url(/static/images/all/zeit.png);}
	.gem		{background-image:url(/static/images/gem.png), url(/static/images/all/gem.png);}

/*##########################################################################################################################################*/
/*				LIGHTBOX																													*/
/*##########################################################################################################################################*/
	#lightbox {position:absolute; left:0; width:100%; line-height:0; text-align:center; z-index:100;}
	#lightbox img {width:auto; height:auto;}
	#lightbox a img {border:none;}
	#outerImageContainer {position:relative; width:250px; height:250px; margin:0 auto; background-color:#fff;}
	#imageContainer {padding:10px;}
	#loading {position:absolute; top:40%; left:0; height:25%; width:100%; line-height:0; text-align:center;}
	#hoverNav {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}
	#imageContainer > #hoverNav {left:0;}
	#hoverNav a {outline:none;}
	#prevLink, #nextLink {display:block; width:49%; height:100%; background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */}
	#nextLink {right:0; float:right;}
	#prevLink {left:0; float:left;}
	#prevLink:hover, #prevLink:visited:hover {background:url(/images/prevlabel.gif) left 15% no-repeat;}
	#nextLink:hover, #nextLink:visited:hover {background:url(/images/nextlabel.gif) right 15% no-repeat;}
	#imageDataContainer {width:100%; margin:0 auto; font:10px Verdana, Helvetica, sans-serif; line-height:1.4em; background-color:#fff; overflow:auto;}
	#imageData {padding:0px 10px; color:#666;}
	#imageData #imageDetails {width:70%; text-align:left; float:left;}
	#imageData #caption {font-weight:bold;}
	#imageData #numberDisplay {display:block; padding-bottom:1.0em; clear:left;}
	#imageData #bottomNavClose {width:66px; padding-bottom:0.7em; outline:none; float:right;}
	#overlay {position:absolute; top:0px; left:0; width:100%; height:500px; background-color:#000; z-index:90;}

/*##########################################################################################################################################*/
/*				Custom Radio Button																													*/
/*##########################################################################################################################################*/
	/*  http://code.iamkate.com/html-and-css/styling-checkboxes-and-radio-buttons/  */
	input[type=radio] {
	/*  width            : 1em;	*/
	/*  height           : 1em;	*/
	/*  margin           : -0.15em; */
	  border           : 0.0625em solid rgb(177,181,210);
	  border-radius    : 0.5em;
	  background       : rgb(177,181,210);
	  background-image :    -moz-linear-gradient(rgb(177,181,210),rgb(177,181,210));
	  background-image :     -ms-linear-gradient(rgb(177,181,210),rgb(177,181,210));
	  background-image :      -o-linear-gradient(rgb(177,181,210),rgb(177,181,210));
	  background-image : -webkit-linear-gradient(rgb(177,181,210),rgb(177,181,210));
	  background-image :         linear-gradient(rgb(177,181,210),rgb(177,181,210));
	}
	
/*##########################################################################################################################################*/
/*				Custom Checkbox Button																													*/
/*##########################################################################################################################################*/
	/*  http://code.iamkate.com/html-and-css/styling-checkboxes-and-radio-buttons/  
	input[type=checkbox] {
	  content     : '✓';
	  display     : block;
	  width       : 1em;
	  color       : rgb(95,115,255);
	  font-size   : 1em;
	  line-height : 1em;
	  text-align  : center;
	  text-shadow : 0 0 0.0714em rgb(95,115,255);
	  font-weight : bold;
	  background-image :    -moz-linear-gradient(rgb(95,115,255),rgb(95,115,255));
	  background-image :     -ms-linear-gradient(rgb(95,115,255),rgb(95,115,255));
	  background-image :      -o-linear-gradient(rgb(95,115,255),rgb(95,115,255));
	  background-image : -webkit-linear-gradient(rgb(95,115,255),rgb(95,115,255));
	  background-image :         linear-gradient(rgb(95,115,255),rgb(95,115,255));
	  vertical-align   : middle;
	}
	*/