/*BASIC ELEMENTS*/

body, html {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  text-align:center;
  font-size:1.5em;
}


.desktop {
  display:none;
}


.print {
  display:none;
}

a, a:active {

}

a:hover {
  text-decoration:none;
}


img {
  border: 0;
  vertical-align: middle;
}


h1 a:link, h1 a:active, h1 a:focus, h1 a:visited {
  text-decoration:underline;
}

h1 a:hover {
  text-decoration:none;
}

h2, h2 a {
  font-size: 1.1em;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration:none;
}

h3, h3 a {
  font-family : Verdana,Arial,sans-serif;
  margin: 15px 0 0 0;
  padding:0;
  text-decoration:none;
}

h4, h4 a {
  font-family : Verdana,Arial,sans-serif;
  font-size : .95em;
  margin: 25px 0 3px 0;
  padding:0;
  text-decoration:none;
}

h5, h6 {
  font-family : Verdana,Arial,sans-serif;
  font-size: .90em;
  margin: 15px 0 0 0;
  padding: 0;
}


/* MENUS - SUBMENU */
.submenu a:hover, .submenu2 a:hover {

}


.submenu ul {
  margin-bottom:10px;
}



a.tooltip, a.tooltipR {
  position: relative;
  text-decoration: none;
}
a.tooltip:before, a.tooltipR:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  opacity: 0;
  bottom:90%;
  margin-bottom:10px;
}

a.tooltip:before {
  margin-left:-8px;
  left: 30%;
}
a.tooltipR:before {
  right: 30%;
}

a.tooltip:hover:before, a.tooltipR:hover:before {
  bottom: 70%;
}

a.tooltip:after, a.tooltipR:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  padding: 5px 15px;
  color: black;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  margin-bottom:10px;
}

a.tooltip:after {
  margin-left:-5px;
  left: 20%;
}

a.tooltipR:after {
  right: 20%;
}

a.tooltip:hover:after, a.tooltipR:hover:after {
  bottom: 100%;
}

a.tooltip:hover:after, a:hover:before, a.tooltipR:hover:after {
  opacity: 1;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  min-width: 400px;
  padding: 12px 16px;
  margin-top:15px;
  z-index: 1;
  font-size:0.85em;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown-content div:first-child {
  font-weight: bold;
  font-family:Verdana;
  font-size:0.85em;
  margin-bottom:15px;
}


/*FRAMEWORK - LINKLINE*/
ul.lil {
  margin: 5px 0;
  padding: 0;
}
.lil li {
  display: inline;
  margin-right:1px;
}
.lil h1 {
  font-size: .85em;
  font-weight:normal;
  font-style: italic;
  line-height:1.5;
  display:inline;
  margin: 0 5px 0 5px;
}


/*FRAMEWORK - HEADER*/
#header {
  background-position:left top;
  background-repeat:no-repeat;
  clear: both;
  min-height: 0;
  margin: 5px 0 10px 0;
  padding: 0;
  position: relative;
  width:100%

}
#header:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}


#logo {
  height:150px;
  margin:0;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 10;
}



/*FRAMEWORK - HEADERMENU*/
#headermenu {
  border-top:0;
}

#headermenu table {
  height:100%;
  margin:0;
  margin-right:1px;
  padding:0;
  width:100%;
  border-spacing:0;
}

#headermenu td {
  text-align:center;
  vertical-align:middle;
  border-collapse:collapse;
  padding:0;
  margin:0;
  border-style:solid;
  border-width: 0 1px 0 0;
  width:11%;
}

#headermenu td:hover {

}

#headermenu td:hover a, #headermenu a:hover {

}

#headermenu td a {
  font-family: 'Arimo', Verdana;
  font-size:.85em;
  letter-spacing: 2px;
  text-decoration:none;
  display: block;
  font-weight:bold;
  width:100%;
  vertical-align:middle;
}

#headermenu td span, #headermenu td div {
  vertical-align:middle;
  padding: 7px 0;
  display:block;
}

/*FRAMEWORK*/
#container {
/*  font-size:1em;*/
  margin-left:auto;
  margin-right:auto;
  padding: 0 15px 15px 15px;
  text-align: left;
  max-width:1280px;
  min-width:780px;
}

/*FRAMEWORK - SITECONTENT*/
.indexcontent, .sitecontent {
  margin-bottom:10px;
  padding:0 10px 0 10px;
/*now in desktop.css  text-align:justify;      */
 /*overflow: auto;   auskommentiert 2024*/
}


.indexcontent {
  font-size:0.85em;
}


.sitecontenthead {
  background-repeat:repeat-x;
  margin:0 -10px 5px -10px;
  padding:5px;
  text-align:center;
}

.sitecontenthead div:nth-child(1) {
  float:left;
}

.sitecontenthead div:nth-child(2) {
  float:right;
}

.sitecontenthead h2 {
  text-align: center;
}

.sitecontenthead:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

.sitecontentbody:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

.sitecontentfoot {
  min-height:20px;
  color:#000;
  margin:35px -10px 0 -10px;
  padding:5px;
  text-align:center;
  font-size:0.8em;
}

.sitecontentfoot div {
  margin:auto;
}

.sitecontentfoot div:nth-child(1) {
  float:left;
  width:38%;
  text-align:left;
}
.sitecontentfoot div:nth-child(2) {
  float:right;
  width:20%;
  text-align:right;
}

.sitecontentfoot div:nth-child(3) {
  width:38%;
  text-align:center;
}

.sitecontentfoot a {
margin-left:10px;
}
.sitecontentfoot a:first-child {
margin-left:0;
}


/*FRAMEWORK - FOOTER*/
#footer {
  clear:both;
  min-height:150px;
  margin : 5px 0 0 0;
  }

#footer ul {
  list-style-type: none;
}

#footer li, #footer a {
  font-family : Verdana,Arial,Helvetica,sans-serif;
  font-size: 10pt;
}


#footer a {
  font-weight:bold;
  text-decoration : none;
}

#footer div:nth-child(1) {
  float:left;
  margin:0 20px 0 5px;
}



#footer div:nth-child(2) {
  float:right;
  height:100%;
  margin:20px 20px 0 20px;
}


#footer div:nth-child(3) {
  text-align:center;
  vertical-align:top;
  padding:5px;
}

#footermenu {
  margin-top:10px;
}

#footermenu div {
  float:left;
  margin-right:10px;
}

#footermenu div b {
  margin:10px 0 0 20px;
  font-family:Verdana;
}

#footermenu div img {
  margin:10px 0 0 20px;
}

#footermenu a, #footermenu {
   font-family:Verdana;
   font-size: 10pt;
}


.eyecatcher {
  float:right;
  width:310px;
}

.eyecatcher > div {
  margin-bottom:10px;
  border-radius: 5px;
}



.twitter {
  background-repeat:repeat-x;
  padding:0 5px 0 5px;
}

.youtube, .tumblr {
  font: normal normal 14px/1.4 Helvetica,Roboto,"Segoe UI",Calibri,sans-serif;
}

.youtube div, .tumblr div {
  padding:5px 5px 5px 15px;
}

.youtube a, .tumblr  a {
  text-decoration:none;
}
.youtube div a, .tumblr div a {
  text-decoration:none;
}
.youtube div span, .tumblr div span {
  font-size:1.5em;
}



/*eyecatcher*/
.youtube {
  width:305px;
  height:189px;
}

.tumblr {
  width:305px;
}


.tumblr p {
  margin:0;
  padding:5px 15px 5px 15px;
  font-size:0.95em;
}

.tumblr p span {
  float:right;
}

.eyecatcher a {
  font-weight:bold:
}

/*yt main page*/
.indexyoutube {
  object-fit: contain;
  min-height:300px;
}


/*FOR Tomb Raider Games Overview - RelicRun-GO switch*/
.gamechanger {
   position: relative;
   margin: auto;
}

.gamechanger div {
  width: 310px;
  text-align: center;
}

.gamechanger table {
   position: absolute;
}

.gamechanger table:nth-child(1) {
   opacity: 1;
   z-index: 100;
   animation: xfade 10s 5s infinite;
}

.gamechanger table:nth-child(2) {
   opacity: 1;
   z-index: 0;
   animation: xfade 10s 0s infinite;
}

@keyframes xfade {
   0% {
      z-index: 100;
      opacity: 1;
   }
   40% {
      z-index: 100;
      opacity: 1;
   }
   50% {
      z-index: 0;
      opacity: 0;
   }
   90% {
      z-index: 0;
      opacity: 0;
   }
   100% {
      z-index: 100;
      opacity: 1;
   }
}

/*TYPE = NEWS*/
.indexcontent .news {

}

.indexcontent .news a {
  text-decoration:underline;
}

.indexcontent .news > div:nth-child(1) {
  margin-top: 0px;
  margin-bottom: 5px;
  font-size:1.0em;
  width:100%;
}

.indexcontent .news > div:nth-child(1):after {
/*bild und content*/
  clear: both;
  content: "";
  display: block;
  height: 0;

}

.indexcontent .news > div:nth-child(1) > div:nth-child(1) {
  float:left;
  margin-right: 15px;
  min-height:200px;

}

.indexcontent .news > div:nth-child(1) > div:nth-child(1)  img {
  object-fit: contain;
  height:100%;
}

.indexcontent .news > div:nth-child(1) > div:nth-child(2) {
/*headline*/
  margin: 20px 0 20px 0;
  text-align:center;
}


.indexcontent .news > div:nth-child(1) > div:nth-child(3) {
/*text*/
}

.indexcontent .news > div:nth-child(1) > div:nth-child(3) div {
/*continue reading*/
  margin-top:15px;
  text-align:right;
}

.indexcontent .news > div:nth-child(2):before {
/*foot*/
  clear:both;
}

.indexcontent .news > div:nth-child(2) {
  padding:7px;
  margin-bottom:15px;
/*foot*/
}

.indexcontent .news > div:nth-child(2) a {
/*foot*/
}

.indexcontent .news > div:nth-child(2) > div:nth-child(1) {
  float:right;
}

.indexcontent .news > div:nth-child(2) > div:nth-child(2) {
}
/*TYPE = NEWS ENDE*/





.fancyquote {
  font-family: 'Indie Flower';
}



.comicindex {
  width:100%;
}
.comicindex td {
  width:33%;
  text-align:center;
}
.comicindex table {
  text-align:center;
  margin:auto;
}

.comicindex table td {
  height:300px;
  width:215px;
  text-align:center;
  vertical-align:top;
}
.comicindex table th {
  height:20px;
  text-align:center;
}



.img3changer {
   position: relative;
   margin: auto;
}

.img3changer div {
  position: absolute;
  object-fit: contain;
  height:100%;
  width: 100%;
}

.img3changer div:nth-child(1) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 10s infinite;
}

.img3changer div:nth-child(2) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 5s infinite;
}

.img3changer div:nth-child(3) {
   opacity: 1;
   z-index: 0;
   animation: xfade3 15s 0s infinite;
}


@keyframes xfade3 {
   0% {
      z-index: 100;
      opacity: 1;
   }
   28% {
      z-index: 100;
      opacity: 1;
   }
   33% {
      z-index: 0;
      opacity: 0;
   }
   95% {
      z-index: 0;
      opacity: 0;
   }
   100% {
      z-index: 100;
      opacity: 1;
   }
}


/*index Hot Topic*/
.indexHT img {
  object-fit: contain;
  height:100%;
  width: 100%;
  border:0;
}
/*needed to span the div*/

/*INDEX END*/

/*FOR Hot Topic switch*/

.HT, .HTchanger {
  position: relative;
  margin: auto;
}

.HTchanger input {
  display: none;
}

.HTchanger input + div {
  position: absolute;
  display: none;
  z-index: 2;
 /* top: -1px;*/
}

.HTchanger input:checked + div {
  display: block;
}

.HTchanger img {
  object-fit: contain;
  height:100%;
  width: 100%;
}

.HT label {
  position: absolute;
  top:0;
  height:100%;
  object-fit: contain;
}

.HT label img {
  height:100%;
  object-fit: contain;
  z-index: 4;
}

.HT label:nth-child(1) {
  left: 0;
}

.HT label:nth-child(2) {
  right: 0;
}

.HT label:nth-child(3) {
  left: 0;
}

@font-face {
  font-family: 'NotoEmojiRegular';
  src: url('/styles/fonts/NotoEmoji-Regular.eot');
  src: url('/styles/fonts/NotoEmoji-Regular.woff') format('woff'),
       url('/styles/fonts/NotoEmoji-Regular.ttf') format('truetype'),
       url('/styles/fonts/NotoEmoji-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.trophyB, .trophyS, .trophyG, .trophyP {
  font-family:'NotoEmojiRegular';
  text-shadow: 2px 2px #000;
}

.trophyB {
  color:#cd7f32;
}

.trophyS {
  color:silver;
}

.trophyG {
  color:gold;
}

.trophyP {
  color:#E5E4E2;
}

.slogan {
    position:absolute;
    top: 117px;
    right:10px;
    background-color: rgba(255, 255, 255, 0.4);
    font-weight:bold;

}









/*GALLERY OLD - noch überarbeiten*/
.trggallery {
  font-size:1em;

}

.trggallery table {
  margin:2px;
  background-color:#BDC5CF;
}

.trggallery table td {
  height:155px;
  width:175px;
  text-align:center;
/*  vertical-align:middle;*/
}

.trggallery table th {
  height:20px;
  text-align:center;
}

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

.sitecontentbody, .wt {
  margin: 20px;
/*now in desktop.css  text-align:justify;      */
  font-size:1em;
}

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

.wt a {
  text-decoration:none;
}



.gameheadline {
  padding:5px;
  margin-bottom:7px;
  font-weight:bold;
}    /*for h4*/

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



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


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

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

.wtfimgrflex {
  float:right;
  margin:0 0 5px 15px;
  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%;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.wtfimgcenter img {

}

.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*/






/*INFOBOXES*/


/*IN-WT*/


.trophyBox thead tr th {
  /*not working, overflow or height problem with parent element???*/
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  top: 0;
}



.hintBox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  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 {
}

.hintBox > div {
  width:75%;
  position: relative;
  /*margin: 10% auto;  */
  margin: 50px auto;
  border-radius: 10px;
}

.hintBox > div {
  padding:10px;
}

.hintBox h2 {
  margin:-10px -10px 10px -10px;
}

.hintBoxScroll {
  overflow-y: scroll;
  /*adds scrollbar but does not work
  */
  height:300px;
  padding: 5px 20px 13px 20px;
}


.hintBox > div h2 {
  padding:5px;
}

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

.close {
  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;
}

.close:hover {
 }






[Box] {
  margin-top : 10px;
  margin-bottom : 10px;
  padding : 7px;
}

[Box=task] {
  margin-right : 0;
  margin-left : 0;
  border-width : 2px;
  padding : 20px;
/*now in desktop.css  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] {
  margin-top : 15px;
  margin-bottom : 15px;
  margin-right : 0.5cm;
  margin-left : 0.5cm;
  padding: 4px;
}

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

[Box=secret]{
  margin-top : 5px;
  margin-bottom : 5px;
  margin-right : 1cm;
  margin-left : 1cm;
  padding: 4px;
  display: block;
  overflow: hidden;
}


[Box=secret]:after {
  clear: both;
  content: "";
  display: block;
}


/*DAMIT DIE BILDER KEINEN RAND HABEN UND DEN KASTEN UNNÖTIG GROß MACHEN*/
[Box=secret] > div {
  margin:-20px 0 0 7px;
 }

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



[Box=mission], [Box=crypt], [Box=challengetomb], [Box=multisecret] {
  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;
  font-weight:bold;
}


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


/*extern*/

div.infoBox {
  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 {

  /*
  font-weight:bold;
  note that DESKTOP has other values */
  height:30px;
  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) {
  height:30px;
  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-collapse:collapse;
  font-family: Verdana, sans-serif;
  font-size:small;
}

.infoBox th, .cheatsBox th, .movesBox th, savesBox th {
  padding:5px;
}

.infoBox th a, .cheatsBox th a, .movesBox th a, savesBox th a {
  text-decoration:none
}

.infoBox td, .cheatsBox td, .movesBox td, savesBox td {
  padding:5px;
  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-collapse:collapse;
  margin-left:20px;
  width:225px;
}
.comicsBox img {
  width:225px;
}

.comicsBox td, .comicsBox th {
  vertical-align: top;
  object-fit: contain;
}

.comicsBox td {
  padding:5px;
}
.comicsBox tr td:first-child {
  font-weight:bold;
}

.comicsBox th {
  text-align: center;
}

/*INFOBOX ENDE*/




/*For [Box], with a margin left and right, e.g. secret, goodies*/

.marginicon {
  position: relative;
  left:10px;
  top:7px;
  overflow: visible;
  width:0;
  height:0;
}

/*For general content, with h4, without margin, so it needs to be negative*/


.marginiconh {
  position: relative;
  left:-27px;
  top:25px;
  overflow: visible;
  width:0;
  height:0;
}

.margintrophy:before {
  content: "\1F3C6";
}

.marginchallenge:before {
    content: "\1F3CB";
}

.marginhint:before {
    content: "\1F4A1";
}
/*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;
}

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



[wtitem] {
  font-style:italic;
}


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


[wtitem=achievement] {
  font-weight:bold;
}

[wtitem=trophy] {
  font-weight:bold;
}

[wtitem=secret], [wtitem=cache], [wtitem=document], [wtitem=relic], [wtitem=amulet], [wtitem=ring], [wtitem=artefact], [wtitem=treasure], [wtitem=monolith], [wtitem=map], [wtitem=coincache], [wtitem=survivalcache], [wtitem=strongbox], [wtitem=codex], [wtitem=challengetomb], [wtitem=crypt], [wtitem=flare] {
  font-weight:bold;
}



[wtitem=challenge], [wtitem=mural], [wtitem=lang], [wtitem=langgreek], [wtitem=langmong], [wtitem=langrus], [wtitem=conversation] {

}

[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]{
  font-weight: 900;
}

[wtitem=weaponsupgrade], [wtitem=weaponspart] {
  font-weight: 600;
}

[wtitem=ammo]  {

}

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

[wtitem=trap] {

}

[wtitem=obstacle] {

}

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

[wtitem=trigger] {

}

[wtitem=mission] {
  font-weight:bold;
}

[wtitem=basecamp] {
  font-weight:bold;
}


[wtitem=health] {

}

[wtitem=savecrystal], [wtitem=crystal] {

}

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

}

[wtitem=comment], [wtitem=remark], [wtitem=control] {
}

[wtitem=quote] {
  font-weight:bold;
}


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

/*Colours walkthrough END*/


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






/*HIDDEN CONTENT*/


.onbutton {
  width:100px;
  height:20px;
  padding:5px;
  outline:none;
  cursor:pointer;
}


.offbutton {
  width:100px;
  height:20px;
  padding:5px;
  outline:none;
  cursor:pointer;
}

.hidden {
  display:none;
}

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

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




fieldset {
  margin: 10px 0;
  padding: 5px 13px 10px 13px;
  display: block;
  margin-bottom: 10px;
}

fieldset:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

fieldset legend {
  margin: 0 0 0 -5px;
  padding: 0 5px;
  font-weight:bold;
}

fieldset fieldset {
  margin-bottom: 5px;
}

fieldset p, fieldset div {
  margin: 8px 0 0 0;
  padding: 0;
}

legend {
  font-size: 1em;
  margin: 0 10px;
  padding: 0 4px;
}