@font-face {
  font-family:'ornated';
  src: url("font/GoudyMediaeval-Regular.woff2");
  font-display: swap;
}
@font-face {
  font-family:'fantasy';
  src: url("font/Cardo-Regular.woff2");
  font-display: swap;
}

html{background-color:#334455;scrollbar-color:#334455 #112233;}
*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;letter-spacing:0.02rem;line-height:1.3;}
body {font-size:18px;-webkit-font-smoothing: antialiased;font-family:sans-serif;}
a {text-decoration:none;}
small {font-size:0.75em;}
big {font-size:1.2em;}
input{background: none;color: inherit;}
button {background: none;color: inherit;cursor:pointer;}
.hytale a {color:#e4ad5b;}
.hytale a:hover {color:#ffffcc;}
.hytale .separator {display:block;}
.hytale hr::before,.hytale .separator::before {content:' ';display:block;padding-top:8px;display:block;border-bottom:1px solid #334455;}
.hytale hr::after,.hytale .separator::after {content:' ';display:block;background-image:url(img/separator.png);background-size:auto 100%;background-position:50% 50%;background-repeat:no-repeat;height:17px;margin-top:-9px;}
.hytale .panel {background-color:#1e2f40;border:1px solid #334455;box-shadow:0px 0px 0px 1px #112233;}
.hytale .panel.itemStack > img {display:block;width:64px;height:64px;}
.hytale a.item:hover > img {filter:brightness(1.4);}
.hytale .pageLogo {padding:64px 0px;display:block;margin-bottom:-8px;}
.hytale .pageLogo > img {display:block;margin:0 auto;height:160px;}
.hytale .pageLogo > span {font-size:32px;color:#e4ad5b!important;font-weight:bold;font-family:"fantasy";text-align:center;text-shadow:1px 1px #000000,-1px -1px #000000,1px -1px #000000,-1px 1px #000000;}
.hytale .navigation {height:48px;background-color:rgba(0,15,30,0.75);}
.hytale .backnav {text-align:center;clear:both;}
.hytale .subnav {font-size:1.2em;font-family:"fantasy";font-weight:bold;}
.hytale .subnav::before {content:'» ';color:#445566;}
.hytale .button {display:inline-block;padding:8px 32px;border:1px solid #334455;color:#bbccdd;font-weight:bold;border-radius:8px;cursor:pointer;background-color:#223344;cursor:pointer;}
.hytale .button:hover {background-color:#334455;color:#ffffff;}
.hytale .button:active {background-color:#445566;color:#ffffff;}
.hytale .width {max-width:1024px;margin:0 auto;}
.hytale > .background {position:fixed;left:0px;top:0px;bottom:0px;right:0px;background-image:url(img/back.jpg);background-position:50% 50%;background-size:cover;z-index:-10;}
.hytale .menubar > ul {list-style-type:none;line-height:2;font-family:"fantasy";font-weight:bold;text-align:center;background-color:rgba(0,15,30,0.88);color:#bbccdd;border-radius:4px;border:2px solid #334455;box-shadow:0px 0px 1px #000000,inset 0px 0px 5px #000000;}
.hytale .menubar > ul > li {display:inline-block;color:#bbccdd;}
.hytale .menubar > ul > li > a {color:#bbccdd;text-decoration:none;line-height:2;display:inline-block;padding:8px 16px;text-align:center;}
.hytale .menubar > ul > li > a:visited {color:#bbccdd;}
.hytale .menubar > ul > li > a:hover {color:#ffffff;}
.hytale .menubar > ul > li.active > a {color:#e4ad5b;}
.hytale .menubar .hotdog {display:none;}
.hytale .breadcrumb {display:block;background:#223344;border-bottom:1px solid #000000;}
.hytale .breadcrumb > ul {list-style-type:none;line-height:2;font-size:1em;font-family:"fantasy";font-weight:bold;text-align:left;color:#bbccdd;padding:0px 16px;white-space:nowrap;overflow-x:hidden;}
.hytale .breadcrumb > ul > li {display:inline-block;text-decoration:none;}
.hytale .breadcrumb > ul > li > .sep::before {Content:'»';}
.hytale .breadcrumb > ul > li > *:visited {color:#bbccdd;}
.hytale .breadcrumb > ul > li:hover > a {color:#ffffff;}
.hytale .breadcrumb > ul > li.active > a {color:#e4ad5b;}
.hytale .wintitle {display:block;background:#223344;border-bottom:1px solid #000000;line-height:2;font-size:1em;font-family:"fantasy";font-weight:bold;text-align:center;color:#bbccdd;padding:4px 4px;white-space:nowrap;overflow-x:hidden;}
.hytale > .wrapper {padding:16px 16px 64px 16px;min-height:100vh;}
.hytale .box {background-color:rgba(0,15,30,0.88);color:#bbccdd;border-radius:4px;border:2px solid #334455;box-shadow:0px 0px 1px #000000,inset 0px 0px 5px #000000;position:relative;margin-top:8px;}
.hytale .box.opaque {background-color:rgba(0,15,30,1);}
.hytale .message {padding:8px;font-size:0.75em;margin-top:8px;}
.hytale .message.alert {color:#ffffff;background-color:#aa1122;font-weight:bold;}
.hytale .box.content > .inner {padding:48px;position:relative;}
.hytale .box.content > .inner > * {margin-top:1em;margin-bottom:1em;}
.hytale .box.content > .inner p {margin-top:1em;margin-bottom:1em;}
.hytale .box.content > .inner h1 {font-size:3em;margin-top:1.4em;margin-bottom:0em;font-family:"ornated";color:#e4ad5b;text-align:center;}
.hytale .box.content > .inner h2 {font-size:1.8em;margin-top:1.2em;margin-bottom:0em;font-family:"fantasy";color:#e4ad5b;font-weight:bold;}
.hytale .box.content > .inner h3 {font-size:1.2em;margin-top:1em;margin-bottom:0em;font-family:"fantasy";color:#e4ad5b;font-weight:bold;}
.hytale .box.content > .inner ul {margin-top:1em;margin-bottom:1em;list-style-position: outside;margin-left:20px;}
.hytale .box.content > .inner h1:first-child {margin-top:0;}
.hytale .box.content > .inner h2:first-child {margin-top:0;}
.hytale .box.content > .inner h3:first-child {margin-top:0;}
.hytale .box.content > .inner > *:first-child {margin-top:0;}
.hytale .box.content > .inner > *:last-child {margin-bottom:0;}
.hytale .box.content > .inner {text-shadow:0px 1px 1px #000000;}
/*.hytale .box.content > .inner .banner {padding-top:16px;overflow:hidden;}
.hytale .box.content > .inner .banner > img {display:block;width:100%;}*/
.hytale .box.content > .bottom {text-align:center;padding-bottom:48px;}
.hytale .box.commands .inner h2 > span {font-size:0.5em;color:#bbccdd;text-transform:uppercase;}
.hytale .box.wiki > .inner .itemGroup {list-style-type:none;margin-left:0px;}
.hytale .box.wiki > .inner .itemGroup > li {margin-top:1em;margin-bottom:1em;}
.hytale .box.wiki > .inner .itemGroup > li > * {display:block;display:flex;align-items:center;}
.hytale .box.wiki > .inner .itemGroup > li > * > * {display: flex;align-items:center;}
.hytale .box.wiki > .inner .itemGroup > li > * > img {margin-right:16px;}
.hytale .box.wikiDetail .article_img {float:right;margin-left:48px;margin-top:0px;display:block;}
.hytale .box.wikiDetail .article_img > div {padding:8px;margin-bottom:8px;}
.hytale .box.wikiDetail .article_img > div > img {display:block;width:360px;}
.hytale .box.wikiDetail .article_img > div > span {padding:4px;text-align:center;display:block;}
.hytale .box.wikiDetail .itemGroup > li {display:inline-block;}
.hytale .box.wikiDetail .inner::after {clear:both;display:block;content:'';}
.hytale .box.news > .inner .itemGroup {list-style-type:none;margin-left:0px;}
.hytale .box.news > .inner .date {font-size:0.8em;color:#e4ad5b;}
.hytale .box.news.newsIndex > .inner .itemGroup > li > a {display:block;position:relative;padding-left:176px;margin-top:1em;margin-bottom:1em;min-height:120px;}
.hytale .box.news.newsIndex > .inner .itemGroup > li > a {color:#bbccdd;}
.hytale .box.news.newsIndex > .inner .itemGroup > li > a > h2 {text-align:left;margin:0;}
.hytale .box.news.newsIndex > .inner .itemGroup > li > a:hover > h2 {color:#ffffcc;}
.hytale .box.news.newsIndex > .inner .itemGroup > li > a > .image {background-size:cover;background-position:50% 50%;width:160px;height:120px;float:left;position:absolute;left:0px;top:0px;}
.hytale .box.news.newsDetail img.banner {display:block;width:100%;}
.hytale .box.intro .inner > * {margin-top:0.8em;margin-bottom:0.8em;}
.hytale .box.intro .inner h1 {font-size:1.5em;margin-top:1.2em;margin-bottom:0.2em;font-family:"fantasy";font-weight:bold;}
.hytale .subBox > div {border:1px solid #334455;padding:16px 32px;}
.hytale .subBox > div > dl > dt {font-weight:bold;color:#e4ad5b;font-family:"fantasy";font-size:1.2em;}
.hytale .subBox {border:1px solid #112233;background-color:#1e2f40;font-size:18px;}
.hytale .serverStatus > .good {color:#66ff88;}
.hytale .serverStatus > .bad {color:#ff7788;}
.hytale .serverStatus > .neutral {color:#667788;}
.hytale .serverStatus {font-family:sans-serif;font-size:0.7em;padding-top:16px;}
.hytale .serverBox {width:fit-content;margin:0 auto;}
.hytale .serverBox > div > dl {padding:8px;}
.hytale .serverBox > div > dl > dt {width:100px;}
.hytale .serverBox > div > dl > * {display:inline-block;}
.hytale .serverBox > div > dl > * > * {display:inline-block;padding:8px;}
.hytale .serverBox input {color:#e4ad5b;text-shadow:inherit;}
.hytale .overlay {position:fixed;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0,0,0,0.5);}
.hytale .overlay > .boxWrapper {max-width:640px;margin:60px auto;box-shadow:0px 8px 16px #000000;}
.hytale .form {background-color:#1e2f40;border:1px solid #334455;box-shadow:0px 0px 0px 1px #112233;padding:20px;}
.hytale .form .row {margin-bottom:16px;}
.hytale .form label {display:block;width:100%;}
.hytale .form input {display:block;width:100%;}
.hytale .form select {display:block;width:100%;}
.hytale .form textarea {display:block;width:100%;height:100px;}
.hytale .form button {padding:16px;cursor:pointer;background-color:#445566;color:#e4ad5b;}
.hytale .form .error {color:#ff3344;font-weight:bold;padding:4px;}

.legal {background-color:rgba(0,15,30,0.88);padding-bottom:2px;margin-bottom:-2px;text-align:center;border-bottom:1px solid #000000;}
.legal > * {font-family:sans-serif;font-size:12px;padding:4px;}
.glossar {cursor:pointer;}
.glossar:hover {color:#ffffff;}
.glossar sup{font-size:0.7em;font-family:sans-serif;vertical-align:top;font-weight:bold;color:#667788;}
@media only screen and (max-width: 799px) {
	.hytale .box.wikiDetail .article_img > div > img {width:240px;}
}
@media only screen and (max-width: 639px) {
	body {font-size:16px;}
	.hytale .wrapper {padding:0px 0px 64px 0px;}	
	.hytale > .wrapper .box {border:none;box-shadow:none;}
	.hytale .subnav {font-size:1.2em;}
	.hytale .box {border-radius:0px;border-top:1px solid #334455!important;}
	.hytale .box.content > .inner {padding:24px;}
	.hytale .box.wikiDetail .article_img {width:auto;float:none;margin:0px auto;}
	.hytale .box.wikiDetail .article_img > div > img {display:block;width:100%;}
	.hytale .box.wikiDetail .inner::after {display:none;}
	.hytale .box.news.newsIndex > .inner .itemGroup > li > a {padding-left:0px;}
	.hytale .box.news.newsIndex > .inner .itemGroup > li > a > h2 {text-align:left;margin:0;}
	.hytale .box.news.newsIndex > .inner  .itemGroup > li > a > .image {position:relative;width:100%;height:auto;margin-bottom:1em;}
	.hytale .box.news.newsIndex > .inner .itemGroup > li > a > .image::after {display:block;content:' ';padding-top:33%;}	
	
	.hytale .box.intro .inner h1 {font-size:1.2em;}
	.hytale .copyable {width:auto;margin:0px;display:block;}
	.hytale .copyable > div {padding:16px 0px;}	
	.hytale .overlay > .boxWrapper {max-width:none;margin:16px;}
	.hytale .menubar > ul {border-radius:0px;border:none;box-shadow:none;border-bottom:1px solid #000000;}
	.hytale .menubar > ul > li {display:inline-block;color:#bbccdd;}
	.hytale .menubar > ul > li > a {padding:8px 8px;}	
}	
@media only screen and (max-width:479px) {
	.hytale .box.content > .inner {padding:16px;}
	.hytale .pageLogo {padding:16px;}
	.hytale .pageLogo > img {height:80px;}
	.hytale .pageLogo > span {font-size:16px;}
	.hytale .serverBox > div > dl > * {display:block;}
	.hytale .serverBox > div > dl > dt > * {padding-bottom:0px;}
	.hytale .serverBox > div > dl > * > * {display:block;}		
	.hytale .breadcrumb .unnecessary {display:none;}	
	.hytale .breadcrumb span {pointer-events:none;}
}
.ornated {font-family:"fantasy";font-size:1.2em;color:#e4ad5b;}
.center {text-align:center!important;}
.bold {font-weight:bold;color:#e4ad5b;}
.strong {color:#e4ad5b;font-weight:bold;}
.pileWrapper {position:relative;}
.pileHolder {position:absolute;left:0px;top:0px;bottom:0px;right:0px;overflow:hidden;}
.pile {width:38px;height:28px;position:absolute;background-image:url(img/pile.png);background-size:100% 100%;position:absolute;left:0px;bottom:0px;margin-left:-19px;}
.pile.animated {transform:translate(0px, 0px);transition:transform 1000ms ease-in;}
.pile.spawn {transform:translate(0px, -360px);}
.pile.animated2 {opacity:1;transition:opacity 1000ms ease;}
.pile.fade {opacity:0;}
.pile.ready:hover {height:32px;}

[data-tooltip]:hover::after {display: block;position: absolute;content: attr(data-tooltip);border: 1px solid #e4ad5b;background: #112233;padding:0.4em;color:#e4ad5b;box-shadow:0px 2px 4px rgba(0,0,0,1);margin-top:4px;}