.sitecontentbody, .wt {
  margin: 20px;
  text-align:justify;
  font-size:1em;
}



.sitecontentbody {
 font-family:  'Open Sans', 'Verdana';
  font-size: 0.8em;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}

.gameheadline {
  border:1px solid #737E8D;
  background-color:#BDC5CF;
  color:#4B586B;
  padding:5px;
  margin-bottom:7px;
  font-weight:bold;
}    /*for h4*/

.gameheadline img {
  margin:-5px 0 -5px 0px;
}





/*.index1 > div:nth-child(1) {
  float:right;
  width:30%;
  margin-left:20px;
}

.index1 > div:nth-child(1):after {
  clear:both;
}*/







.gameoverview p {
  margin: 0 0 7px 0;
}



.wt {
  font-family:'Josefin Sans', 'Open Sans';

}


.wt a {
  text-decoration:none;
}




/*INFOBOXES*/


/*IN-WT*/

.hintBox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.hintBox:target {
  opacity:1;
  pointer-events: auto;
}

.hintBox a {
  background: #BDC5CF;
}

.hintBox > div {
  width:50%;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  border:3px solid #660000;
  background: #c6ced9;
}

.hintBox > div h2 {
  background: #808897;
  background: -moz-linear-gradient(#c6ced9, #808897);
  background: -webkit-linear-gradient(#c6ced9, #808897);
  background: -o-linear-gradient(#c6ced9, #808897);
  padding:5px;
  color:#000;
}

.hintBox > div:after {
  clear:both;
  content: "";
  display: block;
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #660000;
  color: #fff;
 }






[Box] {
  background-color: #bdc5cf;
  border : 1px solid #4b586b;
  margin-top : 10px;
  margin-bottom : 10px;
  padding : 7px;
}

/*new*/
[Box=task] {
  margin-right : 0;
  margin-left : 0;
  border-width : 2px;
  padding : 20px;
  text-align : justify;
  font-size : .75em;
  font-family : Verdana, sans-serif;
}
[Box=task] b {
  display: block;
  margin-top : 10px;
}
[Box=task] b:first-child {
  margin-top : 0;
}
[Box] a {
  text-decoration:underline;
}

[Box=help], [Box=controls] {
  margin-right : 0.5cm;
  margin-left : 0.5cm;
}

[Box=sidequest], [Box=cleanup] {
  border : 2px solid #4b586b;
  margin-top : 15px;
  margin-bottom : 15px;
  margin-right : 0.5cm;
  margin-left : 0.5cm;
  padding: 4px;
/*  display: block;*/
}

[Box=cleanup] > div:first-child, [Box=sidequest] > div:first-child {
  margin:-4px -4px 5px -4px;
  padding:5px;
  background-color:#4b586b;
  color:#FFF;
  font-weight:bold;
}



[Box=secret] {
  border-color: #acb2bb;
  margin-top : 5px;
  margin-bottom : 5px;
  margin-right : 1cm;
  margin-left : 1cm;
  padding: 4px;
  display: block;
}
/* Versuch mit <img src="/styles/monolith.png" class="icon" />[Box=secret] img.icon {
        position:relative;
        left:-70px;
}*/
[Box=secretwithImg] {
  display:flex;
}
[Box=secretwithImg]:after {
  clear: both;
  content: "";
  display: block;
}

[Box=secret] > span:first-child, [Box=secretwithImg] div span:first-child {
  font-style: normal;
  display: block;
  font-weight: bold;
}

[Box=mission], [Box=crypt], [Box=challengetomb], [Box=multisecret] {
  border-color: #acb2bb;
  margin-top : 15px;
  margin-bottom : 15px;
  margin-right : 0.5cm;
  margin-left : 0.5cm;
  padding: 4px;
  display: block;
}

[Box=mission] > span:first-child, [Box=crypt] > span:first-child, [Box=challengetomb] > span:first-child, [Box=multisecret] > span:first-child, [Box=cleanup] > span:first-child {
  font-style: normal;
  display: block;
  font-weight: bold;
}

[Box=mission] > div, [Box=crypt] > div, [Box=challengetomb] > div, [Box=multisecret] > div, [Box=cleanup] > div {
  margin-right : 0.5cm;
  margin-left : 0.5cm;
}



[Box=help] > div:first-child, [Box=controls] > div:first-child {
  margin:-7px -7px 5px -7px;
  padding:5px;
  background-color:#4b586b;
  color:#FFF;
  font-weight:bold;
}


[Box=comicinfo] {
  font-size : .8em;
}

/*old*/





.taskBox {
  background-color: #bdc5cf;
  border: 2px solid #4b586b;
  margin:10px 0 10px 0;
  padding: 20px;
  text-align: justify;
  font-size: .75em;
  font-family: Verdana, sans-serif;
}
.taskBox b {
  display: block;
  margin-top:10px;
}
.taskBox b:first-child {
  margin-top:0;
}
.taskBox a {
  text-decoration:underline;
}





.secretBox, .secretBoxwithImg div {
  background-color: #bdc5cf;
  border: 1px solid #acb2bb;
  margin: 5px 1cm 5px 1cm;
  padding: 4px;
  display: block;
}
.secretBoxwithImg {
  display:flex;
}
.secretBoxwithImg:after {
  clear: both;
  content: "";
  display: block;
}


.secretBox > span:first-child, .secretBoxwithImg div span:first-child {
  font-style: normal;
  display: block;
  font-weight: bold;
}


/*bugs, cuts, quotes, vehicle help, puzzle help...*/
.helpBox, .helpBoxfloat, .quoteBox, .quoteBoxfloat, .altwayBoxfloat {
  background-color:#bdc5cf;
  border : 1px solid #4b586b;
  margin: 10px;
  padding:7px;
}

.helpBox > div:first-child, .helpBoxfloat > div:first-child, .altwayBoxfloat > div:first-child {
  margin:-7px -7px 5px -7px;
  padding:5px;
  background-color:#4b586b;
  color:#FFF;
  font-weight:bold;
}

.helpBoxfloat, .quoteBoxfloat {
  float:right;
  margin-bottom:0;
  margin-left:10px;
  width:20%;
}


.helpBox table, .helpBoxfloat table, .helpBox tr, .helpBoxfloat tr, .helpBox th, .helpBoxfloat th, .helpBox td, .helpBoxfloat td {
  border : 1px solid #000;
  border-collapse:collapse;
}

.helpBox table th, .helpBoxfloat table th {
  background-color:#737E8D;
}
.helpBox table td, .helpBoxfloat table td {
  padding:3px;
}





.altwayBoxfloat {
  float:right;
  margin: 25px 0 15px 15px;
  width:40%;
}
.altwayBoxfloat h4 {
  margin: 0;
}

.quoteBox, .quoteBoxfloat {
  font-style:italic;
}



/*extern*/

div.infoBox {
  background-color:#bdc5cf;
  border : 1px solid #737e8d;
  margin-bottom:15px;
}

div.infoBoxfloat {
  float:right;
  margin-bottom:0;
  margin-left:10px;
}


div.infoBox > div,
div.infoBoxfloat > div {
  padding:5px;
}

div.infoBox > div:first-child,
div.infoBoxfloat > div:first-child {
  background-color:#4b586b;
  color:#FFF;
  font-weight:bold;
  height:15px;
  clear:both;
}


div.infoBox > div:first-child > div:first-child,
div.infoBoxfloat > div:first-child > div:first-child {
  float:left;
}
div.infoBox > div:first-child > div:nth-child(2),
div.infoBoxfloat > div:first-child > div:nth-child(2) {
  float:right;
}

div.infoBox > div:nth-child(2),
div.infoBoxfloat > div:nth-child(2) {
}

div.infoBox > div:nth-child(2) > div:first-child,
div.infoBoxfloat > div:nth-child(2) > div:first-child {
  float:left;
  margin-right:20px;
}


div.infoBox > div:nth-child(2) > div:first-child object,
div.infoBoxfloat > div:nth-child(2) > div:first-child object {
  width:320px;
  height:180px;
}


div.infoBox > div:nth-child(2) > div:nth-child(2),
div.infoBoxfloat > div:nth-child(2) > div:nth-child(2) {
  padding:7px;
  margin-left:280px;
}

div.infoBox > div:nth-child(3),
div.infoBox > div:nth-child(3) {
  background-color:#ACB2BB;
  height:15px;
  clear:both;
}

div.infoBox > div:nth-child(3) > div:first-child,
div.infoBoxfloat > div:nth-child(3) > div:first-child {
  float:left;
}
div.infoBox > div:nth-child(3) > div:nth-child(2),
div.infoBoxfloat > div:nth-child(3) > div:nth-child(2) {
  float:right;
}



table.infoBox, table.cheatsBox, table.movesBox, table.savesBox {
  margin:7px 0 7px 0;
  padding:15px;
  border : 1px solid #000;
  border-collapse:collapse;
  font-family: Verdana, sans-serif;
  font-size:small;
}

.infoBox th, .cheatsBox th, .movesBox th, savesBox th {
  background-color:#4b586b;
  color:#FFF;
  padding:5px;
  border : 1px solid #000;
}

.infoBox th a, .cheatsBox th a, .movesBox th a, savesBox th a {
  color:#FFF;
  text-decoration:none
}

.infoBox td, .cheatsBox td, .movesBox td, savesBox td {
  background-color:#bdc5cf;
  padding:5px;
  border : 1px solid #000;
  border-collapse:collapse;
}

.infoBox td a, .infobox td a, .movesBox td a, savesBox td a {
  text-decoration:none
}







.comicsBox {
  font-face: Verdana, sans-serif;
  border:1px solid #660000;
  border-collapse:collapse;
  margin-left:20px;
  background-color:#c6ced9;
  width:225px;
}
.comicsBox img {
  width:225px;
}

.comicsBox td, .comicsBox th {
  border:1px solid #660000;
  vertical-align: top;
  object-fit: contain;
}
.comicsBox td {
  padding:5px;
}
.comicsBox tr td:first-child {
  font-weight:bold;
}

.comicsBox th {
  text-align: center;
  background-color:#737e8d;
}
























/*INFOBOX ENDE*/





































/*Colours walkthrough BEGIN*/

.goodies {
  margin-bottom: 25px;
}

.goodies > div {
  margin-bottom:12px;
}

.goodies > div:last-child {
  margin-bottom:0px;
}

.goodies > div > div {
  margin-bottom:3px;
}

.goodies > div > div:last-child {
  margin-bottom:0px;
}


[region] {
   width:100%;
   text-align:right;
   font-size: 1.5em;
   border-bottom:1px solid #600;
}

[level] {
   width:25%;
   text-align:right;
   float:right;
   font-size: 1.2em;
   /*border:1px dotted #600;*/
}



[wtitem] {
  background-color:#bdc5cf;
  font-style:italic;
}


[wtitem] a {
  text-decoration:underline;
  color:inherit;
}

/*in Xbox green*/
[wtitem=achievement] {
  color: #107c10;
  font-weight:bold;
  text-shadow: 1px 1px #FFF;
}
/*in hopefully playstation blue... no corporate design guidelines found*/
[wtitem=trophy] {
  color: #0068bf;
  font-weight:bold;
  text-shadow: 1px 1px #FFF;
}

[wtitem=secret], [wtitem=cache], [wtitem=document], [wtitem=relic], [wtitem=amulet], [wtitem=ring], [wtitem=artefact], [wtitem=artifact], [wtitem=treasure], [wtitem=monolith], [wtitem=map], [wtitem=coincache], [wtitem=survivalcache], [wtitem=photo], [wtitem=strongbox], [wtitem=codex], [wtitem=challengetomb], [wtitem=crypt], [wtitem=skill] {
  color:#5204BB;
  font-weight:bold;
}



[wtitem=challenge], [wtitem=mural], [wtitem=lang], [wtitem=langgreek], [wtitem=langmong], [wtitem=langrus], [wtitem=language], [wtitem=conversation] {
  color:#5204BB;
}

[wtitem=langgreek] {
  padding-left:15px;
  background-image:url("/styles/langgreek.png");
  background-repeat: no-repeat;
  background-position: left;
}

[wtitem=langmong] {
  padding-left:18px;
  background-image:url("/styles/langmong.png");
  background-repeat: no-repeat;
  background-position: left;
}

[wtitem=langrus] {
  padding-left:15px;
  background-image:url("/styles/langrus.png");
  background-repeat: no-repeat;
  background-position: left;
}

[wtitem=weapon]{
  color:#FF0000;
  font-weight: bolder;
}

[wtitem=weaponsupgrade], [wtitem=weaponspart] {
  color:#FF0000;
  font-weight: bold;
}






[wtitem=ammo]  {
  color:#FF0000;
}

[wtitem=baddy] {
  color:#800000;
  font-weight:bold;
}

[wtitem=trap] {
  color:#800000;
}

[wtitem=obstacle] {
  color:#804e00;
}

[wtitem=key], [wtitem=torch], [wtitem=tool], [wtitem=gear] {
  color:#0000FF;
  font-weight:bold;
}

[wtitem=trigger] {
  color:#0000FF;
}

[wtitem=mission]
 {
  color:#0000FF;
  font-weight:bold;
}

[wtitem=basecamp] {
  color:#00bb00;
  font-weight:bold;
}


[wtitem=health] {
  color:#00bb00;
}

[wtitem=savecrystal] {
  color:#3e84e4;
}

[wtitem=xp] {
  color:#016d01;
  font-weight:bold;
}
[wtitem=salvage], [wtitem=gem], [wtitem=resource], [wtitem=powerup], [wtitem=coins], [wtitem=gift], [wtitem=focus] {
  color:#016d01;
}

[wtitem=comment], [wtitem=remark], [wtitem=control] {
  color:#B7005B;
  background-color:transparent;
}

[wtitem=quote] {
  color:#333;
  font-weight:bold;
  background-color:transparent;
}


[wtitem=control] {
  font-style:normal;
}

/*Colours walkthrough END*/






/*WALKTHROUGH IMAGES*/
.wtfimgright, .wtfimgleft {
  background-color:#BDC5CF;
  padding:5px;
  text-align: center;
}

.wtfimgright {
  float:right;
  margin:0 0 5px 15px;
  overflow: hidden;
}

.wtfimgrflex {
  float:right;
  margin:0 0 5px 15px;
/*  overflow: hidden;*/
  width:20%;
}

.wtfimgrflex a, .wtfimgrflex img {
  object-fit: contain;
  height:100%;
  width: 100%;
}

.wtfimgleft {
  float:left;
  margin: 0 15px 5px 0;
  overflow: hidden;
}

.wtfimgleft span, .wtfimgright span, .wtfimgcenter span {
  display:block;
  font-size:95%;
  margin-top:5px;
  font-family:Verdana;
  font-size:0.65em;
}

.wtfimgcenter {
  padding:0.5%;
/*  background-color:#BDC5CF;*/
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.wtfimgcenter img {
  border:5px solid #BDC5CF;
}





.centerimages {
  margin-top:15px;
  margin-right: auto;
  margin-bottom:15px;
  margin-left: auto;
  text-align:center;
}

.centerimages:after {
  clear:both;
  content: "";
  display: block;
}
.centerimages img {
  width:100%;
}

.ci4s {
  max-width:1100px;
  width:100%;
}

.ci4s > div {
  float:left;
  max-width:240px;
  width:24%;
  margin:0.5%;
}

.ci4t {
  max-width:680px;
  width:100%;
}

.ci4t > div {
  float:left;
  max-width:150px;
  width:24%;
  margin:0.5%;
}

.ci3s {
  max-width:775px;
  width:100%;
}

.ci3s > div {
  float:left;
  max-width:240px;
  width:31%;
  margin:0.5%;
}

.ci3t {
  max-width:480px;
  width:100%;
}

.ci3t > div {
  float:left;
  max-width:150px;
  width:31%;
  margin:0.5%;
}

.ci2s {
  max-width:520px;
  width:100%;
}

.ci2s > div {
  float:left;
  max-width:240px;
  width:48%;
  margin:0.5%;
}

.ci2t {
  max-width:330px;
  width:100%;
}

.ci2t > div {
  float:left;
  max-width:150px;
  width:48%;
  margin:0.5%;
}

/*WT IMAGES ENDE*/




.happybug {
  float:right;
  margin: 5px 0px 5px 10px;
}






/*HIDDEN CONTENT*/


.onbutton {
width:100px;
height:20px;
color:white;
background-color:#737e8d;
padding:5px;
outline:none;
cursor:pointer;
}


.offbutton {
width:100px;
height:20px;
color:white;
background-color:#737e8d;
padding:5px;
outline:none;
cursor:pointer;
}

.hidden{
display:none;
}

.onbutton:focus + .hidden{
display:block;
}

.offbutton:focus + .hidden{
display:block;
}