body {
  margin: 0px;
  padding:  0px;
  background-color: #061222;
}

html, body {
    min-width:1000px;
    overflow-x:hidden;
}

/* ===========================
    NOWY FIXED BACKGROUND
=========================== */

html,
body
{
    min-height:100%;
}

#ArtworkHelper {
    text-align:center;

    overflow:visible;

    position:relative;

    width:100%;

    min-width:1000px;

    min-height:800px;

    background-position:center center;

    background-repeat:no-repeat;

    background-size:cover;

    background-attachment:fixed;
}

/* container to implement min/max width */
#Bodycontainer {
  text-align: left;
  min-width: 1000px;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: table;
}

#ContentRow {
    position: relative;
    top:0;
    margin-top:155px;
    min-height:1265px;
}

/* "star-HTML-hack" to correct the position of the content row */
* html #ContentRow {
  display: inline-block;
}

#MenuColumn {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 180px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 0px;
  font-family:  Arial, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  line-height: 12pt;
}

#ContentColumn {
  position: relative;
  margin: 0px;
  margin-left: 205px;
  margin-right: 205px;
}

#ThemeboxesColumn {
  overflow:visible;
  text-align:  center;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 180px;
  margin: 0px;
  margin-right: 15px;
  margin-left: 25px;
}

#Footer {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 7pt;
  font-weight: normal;
  text-align: center;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  color: white;
}
* html #Footer {
  padding-bottom: 120px;
  margin-bottom: 50px;
}

/* Footer linkes */
#Footer a:link    { color: white; text-decoration: none; }
#Footer a:visited { color: white; text-decoration: none; }
#Footer a:focus   { color: white; text-decoration: none; }
#Footer a:active  { color: white; text-decoration: underline; }
#Footer a:hover   { color: white; text-decoration: underline; }

/** -------------------------------
 *  Stylesheet declarations for the
 *  HEADER AREA
 *  -------------------------------
 */

#LeftArtwork {
  position: absolute;
  height: 140px;
  width: 166px;
  top: -140px;
  left: 4px;
  background-repeat: no-repeat;
  z-index:5;
}

#LeftArtwork #TibiaLogoArtworkTop {
  position: absolute;
  top: 20px;
  left: 0px;
  height: 82px;
  width: 166px;
  z-index: 5;
  cursor: pointer;
}

#LeftArtwork #TibiaLogoArtworkBottom {
  position: absolute;
  top: 102px;
  left: 0px;
  height: 43px;
  width: 166px;
  z-index: 5;
}

#LeftArtwork #Statue_1{
  position: absolute;
  top: 0px;
  left: 5px;
  height: 30px;
  width: 32px;
  z-index:10;
}

#LeftArtwork #Statue_2 {
  position: absolute;
  top: 0px;
  right: 25px;
  height: 30px;
  width: 32px;
  z-index:10;
}

#LeftArtwork #LogoLink {
  position: absolute;
  bottom: 14px;
  left: 58px;
  height: 14px;
  width: 50px;
  z-index: 99;
  cursor: pointer;
}

#RightArtwork {
  text-align: left;
  position: absolute;
  top: -1px;
  right: 24px;
  width: 132px;
  background-repeat: no-repeat;
  z-index: 90;
}

#RightArtwork #Monster {
  position: absolute;
  height: 80px;
  width: 80px;
  top: -137px;
  left: 8px;
  z-index: 15;
  cursor: pointer;
}

#PedestalAndOnline {
  position: absolute;
  top: -105px;
  width: 132px;
  height: 111px;
}

#RightArtwork #PlayersOnline {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size: 7pt;
  line-height: 8pt;
  text-align: center;
  position: absolute;
  width: 92px;
  bottom: 11px;
  left: 21px;
  color: #cfa600;
  border-bottom: 1px solid #010101;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  LOGINBOX
 *  -------------------------------
 */

#Loginbox {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 42px;
  background-repeat: no-repeat;
}

#Loginbox #LoginTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox #LoginBottom {
  position: absolute;
  top: 52px;
  left: -5px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox .LoginBorder {
  position: absolute;
  top: 0px;
  height: 52px;
  width: 8px;
  background-repeat: repeat-y;
  z-index: 10;
}

#Loginbox #BorderRight {
  right: 9px;
}

#Loginbox .Loginstatus {
  position: relative;
  top: 0px;
  left: 5px;
  height: 13px;
  width: 160px;
}

#Loginbox .LoginstatusText {
  position: absolute;
  top: 1px;
  left: 18px;
  width: 124px;
  height: 11px;
  cursor: pointer;
}

#Loginbox #LoginstatusText_1 {
  top: 2px;
  cursor: default;
}

#Loginbox #LoginstatusText_2_1 {
  visibility: visible;
}

#Loginbox #LoginstatusText_2_2 {
  visibility: hidden;
}

#Loginbox #LoginButtonContainer {
  margin-left: 5px;
  height: 26px;
  width: 160px;
  background-repeat: repeat-y;
}

#Loginbox #LoginButton {
  position: relative;
  top: 1px;
  left: 12px;
  height: 25px;
  width: 135px;
}

#Loginbox #LoginButton .Button {
  position: relative;
  top: 0px;
  left: 0px;
  width: 135px;
  height: 25px;
  visibility: hidden;
}

#Loginbox #LoginButton #ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 22px;
  width: 135px;
  z-index: 15;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  MENU
 *  -------------------------------
 */

#Menu {
  position: relative;
  left: 5px;
  background-repeat: no-repeat;
}

#MenuTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#MenuBottom {
  position: relative;
  left: -5px;
  bottom: 0px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

/* Menuitems */

.MenuButton {
  position: relative;
  height: 32px;
  width: 170px;
  display: block;
  cursor: pointer;
}

.Button {
  position: relative;
  height: 32px;
  width: 170px;
  visibility: hidden;
  display: block;
}

.Extend {
  position: absolute;
  top: 20px;
  right: -2px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
}

.Lights {
  visibility: hidden;
}

.Light_lu {
  position: absolute;
  top: 2px;
  left: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ru {
  position: absolute;
  top: 2px;
  right: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ld {
  position: absolute;
  height: 2px;
  width: 2px;
  top: 28px;
  left: 3px;
}

.Icon {
  position: absolute;
  height: 32px;
  width: 32px;
  top: 0px;
  left: 8px;
}

.Label {
  position: absolute;
  height: 22px;
  width: 116px;
  top: 6px;
  left: 42px;
}

/* Submenus(items) */

.LeftChain {
  position: absolute;
  top: 0px;
  left: -5px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.RightChain {
  position: absolute;
  top: 0px;
  right: -4px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.Submenu {
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #0D2E2B;
  width: 160px;
}

.Submenuitem {
  position: relative;
  margin: 0px;
  padding: 0px;
}

.ActiveSubmenuItemIcon {
  position: absolute;
  top: 5px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  visibility: hidden;
}

.SubmenuitemLabel {
  margin: 0px;
  border-top: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 15px;
  border-bottom: 1px solid #4b7874;
  overflow: hidden;
}

/* Submenu links */
.Submenu a:link    { color: #d7d7d7; text-decoration: none; }
.Submenu a:visited { color: #d7d7d7; text-decoration: none; }
.Submenu a:focus   { color: #d7d7d7; text-decoration: none; }
.Submenu a:active  { color: white; text-decoration: none; }
.Submenu a:hover   { color: white; text-decoration: none; }

/** -------------------------------
 *  Stylesheet declarations for the
 *  CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent {
  padding: 10px;
}

/* "tanhack" for correction of IE bug */
* html .Content {
  top: -5px;
}

.Content {
  position: relative;
  top: 0px;
  width: 100%;
}

/* "star-HTML-hack" to correct the position of the content area */
* html .Content {
  position: relative;
  top: 796px;
  margin: 20px;
  border: 0px dashed #061222;
  border-right-width: 550px;
}

#ContentHelper {
  position: relative;
}

/* "star-HTML-hack" to to implement min-width in IE */
* html #ContentHelper {
  display: inline-block;
  position: relative;
  top: -800px;
  margin: -20px;
  margin-right: -570px;
}

.Content .Box {
  font-size: 0pt;
  position: relative;
  margin: 5px;
  margin-bottom: 18px;
  color: #5A2800;
  border-left: 2px solid #3a3738;
  border-right: 2px solid #3a3738;
  background-color: #debb9d;
  background-repeat: no-repeat;
  overflow: visible;
}

.Content .BoxContent {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 9pt;
  background-color: #FFF2db;
  color: #5A2800;
  min-height: 395px;
  height: auto !important;
  height: 415px;
}

/* "star-HTML-hack" to correct Box width in IE */
* html .Content .Box {
  width: 100%;
}
/* "star-HTML-hack" to correct BoxContent width in IE */
* html .Content .BoxContent {
  width: 100%;
}

.Content th {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  background-color: #505050;
}

.Content .BoxContent td {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 10pt;
  color: #5A2800;
 }

/* Content Links */

.Content a {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-weight: bold;
  color: #004294;
  text-decoration: none;
}
.Content a:hover {
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-weight: bold;
  text-decoration: underline;
  color: #0063DC;
}
.Content .HelpLink {
  font-size: 7pt;
  cursor: pointer;
}

/* Corners */

.Content .Corner-tl {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-tr {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .BottomCornersHelper {
  position: absolute;
  width: 100%;
}

.Content .CornerWrapper-b {
  position: absolute;
  width:100%;
}

.Content .Corner-bl {
  position: absolute;
  bottom: -4px;
  left: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-br {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

/* Borders */

.Content .Border_1 {
  position: relative;
  height: 6px;
  width: 100%;
  background-repeat: repeat-x;
}

.Content .BorderTitleText {
  position: relative;
  height: 24px;
  background-repeat: repeat-x;
}

.Content .Title {
  position: absolute;
  top: 6px;
  left: 5px;
}

.Content .Border_2 {
  margin: 4px;
  padding: 0px;
  background-color: #793d03;
}

.Content .Border_3 {
  margin: 1px;
  border-top: 1px solid #793d03;
  border-bottom: 1px solid #793d03;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  THEMEBOXES of the Tibia
 *  website
 *  -------------------------------
 */

.Themebox {
  position: relative;
  margin-bottom: 10px;
  top: -4px;
  width: 180px;
  height: 154px;
}
#Themeboxes div {
  font-size: 10pt;
  background-repeat: no-repeat;
}
#Themeboxes .ThemeboxButton {
  position: absolute;
  top: 203px;
  left: 38px;
  height: 25px;
  width: 137px;
  cursor: pointer;
}
#Themeboxes .Bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 12px;
  width: 180px;
}
/* "star-HTML-hack" to correct the position of the bottom element */
* html #Themeboxes .Bottom {
  bottom: -3px;
}
#Themeboxes #PremiumBox {
  height: 164px;
}
#Themeboxes #ScreenshotBox #ScreenshotContent {
  position: relative;
  height: 111px;
  width: 170px;
  top: 31px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  border: 0;
  cursor: pointer;
}
#Themeboxes #CurrentPollBox #CurrentPollText {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  line-height: 11pt;
  color: #5A2800;
  position: absolute;
  height: 90px;
  width: 150px;
  top: 37px;
  left: 15px;
  padding-top: 5px;
  overflow: hidden;
}
#Themeboxes #SkyscraperBanner {
  border: 0;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent td .white {
  color: #EFEFEF;
  visibility: visible;
}

.Content .BoxContent td .whites {
  color: #EFEFEF;
  visibility: visible;
  font-size: 9pt;
}

.Content .BoxContent .white {
  color : #EFEFEF;
  visibility : visible;
}

.Content .BoxContent td .green {
  color : #00BF00;
}

.Content .BoxContent td .yellow {
  color : #FFBB05;
}

.Content .BoxContent td .red {
  color : #EF0000;
}

.Content .BoxContent td .grey {
  color : #808080;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA (forum)
 *  -------------------------------
 */

.Content .BoxContent .ff_info {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 10pt;
  color : #5A2800;
  visibility : visible;
}

.Content .ff_white a {
  color: #FFFFFF;
}

.Content .BoxContent .ff_white {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  color : #EFEFEF;
  visibility : visible;
  font-size : 7pt;
  font-weight: bold;
}

.Content .BoxContent .ff_red {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  color : #EF0000;
  visibility : visible;
  font-size : 8pt;
  font-weight: bold;
}

.Content .BoxContent .ff_whitelarge {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  color : #EFEFEF;
  visibility : visible;
  font-size : 9pt;
  font-weight: bold;
}

.Content .BoxContent .ff_info {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 8pt;
  color : #5A2800;
  visibility : visible;
}

.Content .BoxContent .ff_infotext {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 8pt;
  color : #5A2800;
  visibility : visible;
  line-height: 12pt;
}

.Content .BoxContent .ff_smallinfo {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 7pt;
  color : #5A2800;
  visibility : visible;
}

.Content .BoxContent .ff_large {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 12pt;
  color : #5A2800;
  visibility : visible;
}

.Content .BoxContent .ff_pagetext {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 9pt;
  color : #5A2800;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextgrey {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 9pt;
  color : #505050;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextred {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 9pt;
  color : #F00;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_correct {
  font-family : Verdana, Arial, Times New Roman, sans-serif;
  font-size : 11pt;
  color : #FF0000;
  visibility : visible;
  font-weight: bold;
}

/** --------------------------------------
 *  ### not final versions for tests
 *  ### concerning the new payment process
 *  --------------------------------------
 */

/* new error handling concept tests */

.FormFieldError {
  font-size: 8pt;
  color: red;
}
.SmallBox {
  position: relative;
  font-size: 1px;
}
.SmallBox .ErrorMessage {
  font-size: 8pt;
  position: relative;
  color: red;
  height: 100%;
  background-color: #d4c0a1;
  padding: 5px;
  padding-left: 43px;
}
.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d4c0a1;
  padding: 10px;
}
.SmallBox .ErrorMessage ul {
  padding-left: 15px;
}
.SmallBox .BoxFrameHorizontal {
  position: relative;
  height: 4px;
}
.SmallBox .BoxFrameVerticalRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .BoxFrameVerticalLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .MessageContainer {
  position: relative;
  height: 100%;
}
.SmallBox .BoxFrameEdgeLeftTop {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeLeftBottom {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightTop {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightBottom {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .AttentionSign {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 30px;
  height: 26px;
}


/** ---------------------------------
 *  ### not finished versions for the
 *  ### payment process PROGRESS BAR
 *  ---------------------------------
 */

#ProgressBar #Headline {
  text-align: center;
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 5px;
}
#ProgressBar #MainContainer {
  position: relative;
  top: 10px;
  height: 50px;
  margin-bottom: 25px;
}
#ProgressBar #BackgroundContainer {
  position: relative;
  width: 100%;
}

#ProgressBar #BackgroundContainerLeftEnd {
  position: absolute;
  float: left;
}
#ProgressBar #BackgroundContainerCenter {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 17px;
  width: 100%;
}
#ProgressBar #BackgroundContainerCenterImage {
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  height: 17px;
}
#ProgressBar #BackgroundContainerRightEnd {
  position: absolute;
  right: 0px;
  top: 0px;
  float: right;
}
#ProgressBar #TubeLeftEnd {
  position: absolute;
  left: 25px;
  top: 4px;
}
#ProgressBar #TubeRightEnd {
  position: absolute;
  right: 25px;
  top: 4px;
  z-index: 0;
}
#ProgressBar .Steps {
  position: relative;
  height: 39px;
  font-size: 9px;
  float: left;
  top: -11px;
  margin-left: -1px;
}
#ProgressBar #StepsContainer1 {
  text-align: right;
  margin-left: 92px;
  margin-right: 40px;
  height: 10px;
}
#ProgressBar #StepsContainer2 {
  width: 100%;
  height: 10px;
}
#ProgressBar .TubeContainer {
  position: relative;
  padding-right: 47px;
}
#ProgressBar .Tube {
  position: relative;
  top: 16px;
  left: 0px;
  width: 100%;
  height: 7px;
  background: #FFFFFF none repeat scroll 0%;
}
* html #ProgressBar .Tube {
  top: 13px;
}
#ProgressBar .SingleStepContainer {
  position: absolute;
  top: 0px;
  width: 47px;
  height: 30px;
  right: 0px;
  text-align: center;
}
#ProgressBar #FirstStep .SingleStepContainer {
  left: 45px;
  width: 47px;
  position: absolute;
}
#ProgressBar .StepIcon {
  position: absolute;
  right: 0px;
}
* html #ProgressBar .StepIcon {
  right: -1px;
}
#ProgressBar #FirstStep .StepIcon {
  top: 0px;
  left: 0px;
}
#ProgressBar .StepText {
  top: 40px;
  position: absolute;
  width: 200px;
  right: -77px;
}


/** -------------------------------
 *  Stylesheet declarations for the
 *  NEW TABLES
 *  -------------------------------
 */

.TableContainer {
  border: 1px solid black;
  position: relative;
  width: 100%;
  font-size: 1px;
}
.TableContainer .Odd {
  background-color: #f1e0c6;
}
.TableContainer .Even {
  background-color: #d5c0a1;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 1pt;
  background-color: #5f4d41 !important;
  height: 100%;
  width: 100%;
  text-align: left;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
  background-color: #5f4d41;
  width: 100%;
  height: 100%;
  padding-top: 3px;
  padding-bottom: 4px;
}
.TableContainer .CaptionContainer .Text {
	font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  left: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  right: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	left: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	right: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionBorderTop {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  top: -1px;
}
.TableContainer .CaptionContainer .CaptionBorderBottom {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  bottom: -2px;
}
.TableContainer .CaptionContainer .CaptionVerticalLeft {
  position: absolute;
  height: 100%;
  width: 3px;
  left: -1px;
  top: 0px;
}
.TableContainer .CaptionContainer .CaptionVerticalRight {
  position: absolute;
  height: 100%;
  width: 3px;
  right: -1px;
  top: 0px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
  right: -3px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  right: -3px;
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionBorderBottom {
  bottom: -3;
}
* html .TableContainer .CaptionContainer .CaptionVerticalRight {
  right: -2px;
}
/* TABLE CONTENT */
.TableContentContainer {
  border: 1px solid #5F4D41;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d4c0a1;
  padding: 0px;
}
.TableContent {
  width: 100%;
  border-collapse: collapse;
}
.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}
/* INNERLYOUT 1 */
.TableContainer .Table1 {
  width: 100%;
  background-color: #d4c0a1;
  border: 2px solid #55636c;
}
.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}
/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}
.TableContainer .Table2 td {
  padding: 0px;
  margin: 0px;
}
.TableContainer .Table2 .InnerTableContainer {
  margin-top: 1px;
}
.TableContainer .Table2 .InnerTableContainer table {
  border-collapse: collapse;
}
.TableContainer .Table2 .InnerTableContainer td {
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 2px;
  padding-right: 5px;
  border: 1px solid #faf0d7;
}
/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
}
.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #faf0d7;
}
/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
}
.TableContainer .Table4 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 3px;
}
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* INNERLYOUT 5 */
.TableContainer .Table5 {
  width: 100%;
  border: 2px solid #55636c;
  background-color: #f1e0c5;
}
.TableContainer .Table5 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* SHADOWS */
.TableShadowContainerRightTop {
  position: relative;
  top: 0px;
  right: 3px;
  margin-right: 0px;
  font-size: 1px;
  float: right;
  z-index: 99;
}
.TableShadowRightTop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 5px;
  z-index: 99;
}
.TableContentAndRightShadow {
  position: relative;
  background-repeat: repeat-y;
  background-position: top right;
  margin-right: 3px;
  font-size: 1px;
}
.TableShadowContainer {
  position: relative;
  widht: 100%;
  margin-right: 5px;
}
.TableBottomShadow {
  position: relative;
  font-size: 1px;
  height: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.TableBottomLeftShadow {
  position: relative;
  height: 5px;
  width: 4px;
  float: left;
  padding: 0px;
  margin: 0px;
}
.TableBottomRightShadow {
  position: relative;
  float: right;
  right: -2px;
  top: 0px;
  height: 5px;
  width: 4px;
}
/* LABELS */
.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}
.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #d5c0a1;

}
.LabelH td {
  background-color: #d5c0a1;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* BUTTONS */
.InnerTableButtonRow {
  width: 100%;
  padding-left: 1px;
  padding-right: 0px;
  padding-bottom: 4px;
  border: 0px;
}
.InnerTableButtonRow td {
  padding-right: 4px;
}
.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
}
.BigButtonOver {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 137px;
  height: 25px;
  visibility: hidden;
  z-index: 15;
}
.ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 135px;
  z-index: 20;
}
.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}
* html .TopButtonContainer {
  right: 27px;
}
.TopButtonContainer .TopButton {
  position: absolute;
  right: 0px;
  z-index: 55;
}
.Content .BoxContent .Odd {
  background-color: #D4C0A1;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #F1E0C6;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #D4C0A1;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #F1E0C6;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}
.Content .BoxContent .Odd {
  background-color: #D4C0A1;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #F1E0C6;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

/* News Ticker */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
}

.Content #NewsTicker .BoxContent .Row {
  position: relative;
  width: 100%;
}

.Content #NewsTicker .NewsTickerIcon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 20px;
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 7pt;
  position: absolute;
  top: 0px;
  float: left;
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 85px;
  height: 14px;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 85px;
  margin-right: 20px;
  display: none;
}

.Content #NewsTicker .NewsTickerExtend {
  position: relative;
  right: 0px;
  top: 1px;
  right: 1px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
  z-index: 10;
}

/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position:relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

#ContentHelper #FeaturedArticle:first-child .BoxContent {
  padding: 10px;
}

.Content #FeaturedArticle #TeaserText {
  height: 100px;
  overflow: hidden;
  z-index: 0;
}

.Content #FeaturedArticle #Link {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 89 165 0 0;
  z-index: 99;
}

.Content #FeaturedArticle .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.Content #FeaturedArticle .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float:left;
}

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: relative;
  top: 8px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News */

.Content #News .BoxContent {
  min-height: 100px;
  height: auto !important;
  height: 110px;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.Content #News .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #News .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 10px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #News .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News Archive */

.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.Content #NewsArchive .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #NewsArchive .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #NewsArchive .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

.module-one-top-left {
	width: 21px;
	height: 22px;
	background: url('images/module_1/top-left.png') no-repeat;
}

.module-one-top {
	width: 144px;
	height: 22px;
	background: url('images/module_1/top.png') no-repeat;
}

.module-one-top-right {
	width: 21px;
	height: 22px;
	background: url('images/module_1/top-right.png') no-repeat;
}

.module-one-left {
	width: 21px;
	background: url('images/module_1/left.png') repeat-y;
}

.module-one-background {
	width: 144px;
	background: url('images/module_1/background.png');
}

.module-one-right {
	width: 21px;
	background: url('images/module_1/right.png') repeat-y;
}

.module-one-bot-left {
	width: 21px;
	height: 20px;
	background: url('images/module_1/bot-left.png') no-repeat;
}

.module-one-bot {
	width: 144px;
	height: 20px;
	background: url('images/module_1/bot.png') no-repeat;
}

.module-one-bot-right {
	width: 21px;
	height: 20px;
	background: url('images/module_1/bot-right.png') no-repeat;
}




.module-sec-top-left {
	width: 21px;
	height: 21px;
	background: url('images/module_2/top-left.png') no-repeat;
}

.module-sec-top {
	width: 331px;
	height: 21px;
	background: url('images/module_2/top.png') no-repeat;
}

.module-sec-top-right {
	width: 20px;
	height: 21px;
	background: url('images/module_2/top-right.png') no-repeat;
}

.module-sec-left {
	width: 21px;
	background: url('images/module_2/left.png') repeat-y;
}

.module-sec-background {
	width: 331px;
	background: url('images/module_2/background.png');
}

.module-sec-right {
	width: 20px;
	background: url('images/module_2/right.png') repeat-y;
}

.module-sec-bot-left {
	width: 21px;
	height: 20px;
	background: url('images/module_2/bot-left.png') no-repeat;
}

.module-sec-bot {
	width: 331px;
	height: 20px;
	background: url('images/module_2/bot.png') no-repeat;
}

.module-sec-bot-right {
	width: 20px;
	height: 20px;
	background: url('images/module_2/bot-right.png') no-repeat;
}


.module-fourth {
	float: left;
}

.module-third {
	float: right;
}

.module-second {
	float: left;
}

.module-first {
	float: right;
}

.module-thi-top-left {
	width: 10px;
	height: 10px;
	background: url('images/module_3/top-left.png') no-repeat;
}

.module-thi-top {
	width: 166px;
	height: 10px;
	background: url('images/module_3/top.png') no-repeat;
}

.module-thi-top-right {
	width: 10px;
	height: 10px;
	background: url('images/module_3/top-right.png') no-repeat;
}

.module-thi-left {
	width: 10px;
	background: url('images/module_3/left.png') repeat-y;
}

.module-thi-background {
	width: 156px;
	padding: 5px;
	background: url('images/module_3/background.png');
}

.module-thi-right {
	width: 10px;
	background: url('images/module_3/right.png') repeat-y;
}

.module-thi-bot-left {
	width: 10px;
	height: 10px;
	background: url('images/module_3/bot-left.png') no-repeat;
}

.module-thi-bot {
	width: 166px;
	height: 10px;
	background: url('images/module_3/bot.png') no-repeat;
}

.module-thi-bot-right {
	width: 10px;
	height: 10px;
	background: url('images/module_3/bot-right.png') no-repeat;
}







.module-fou-top-left {
	width: 21px;
	height: 22px;
	background: url('images/module_4/top-left.png') no-repeat;
}

.module-fou-top {
	width: 724px;
	height: 22px;
	background: url('images/module_4/top.png') repeat-x;
}

.module-fou-top-right {
	width: 21px;
	height: 22px;
	background: url('images/module_4/top-right.png') no-repeat;
}

.module-fou-left {
	width: 21px;
	background: url('images/module_4/left.png') repeat-y;
}

.module-fou-background {
	width: 724px;
	padding: 5px;
	background: url('images/module_4/background.png');
}

.module-fou-right {
	width: 21px;
	background: url('images/module_4/right.png') repeat-y;
}

.module-fou-bot-left {
	width: 21px;
	height: 20px;
	background: url('images/module_4/bot-left.png') no-repeat;
}

.module-fou-bot {
	width: 724px;
	height: 20px;
	background: url('images/module_4/bot.png') repeat-x;
}

.module-fou-bot-right {
	width: 21px;
	height: 20px;
	background: url('images/module_4/bot-right.png') no-repeat;
}

.module-fo-bot-right {
	width: 21px;
	height: 20px;
	background: url('images/module_4/bot-right.png') no-repeat;
}

element.style {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#AA5900 url(images/header-3.gif) repeat-x scroll center top;
color:#FFFFFF;
}


.lightBorder {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EAD194 url(images/backgrounds/header-1.gif) repeat-x scroll center top;
}

.vdarkBorder {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#AA5900 url('images/header-3.gif') repeat-x scroll center top;
}

.darkBorder {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#DBB96A url(images/backgrounds/header-2.gif) repeat-x scroll center top;
}

/*=========================
      TRANSLATOR
=========================*/

#TranslatorWidget{

    position:absolute;

    top:135px;

    left:33px;

    width:135px;

    z-index:500;

}

#LanguageButton{

    position:relative;

    height:34px;

    width:155px;

    box-sizing:border-box;

    line-height:20px;

    background:#3b2812;

    border:2px solid #b9953d;

    color:#ffe17c;

    font-weight:bold;
	
	text-shadow:1px 1px 2px #000;

    font-size:14px;

    cursor:pointer;

    padding-left:32px;

    border-radius:5px;

    user-select:none;

}

#LanguageButton:hover{

    border-color:#ffd75a;

    box-shadow:0 0 6px rgba(255,215,90,0.4);

}

#LanguageMenu{

    display:none;

    width:155px;

    box-sizing:border-box;

    background:#2d1b09;

    border:2px solid #b9953d;

    border-top:none;

}

.LangItem{

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px 10px;

    color:#ffe17c;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    text-shadow:1px 1px 2px #000;

}

.LangItem:hover{

    background:#5c3d14;

    color:#FFF3B0;

    text-shadow:0px 0px 6px #FFD75A;

}

#google_translate_element{

    position:absolute;

    left:-9999px;

}

.goog-te-banner-frame{

    display:none!important;

}

body{

    top:0!important;

}

#GlobeIcon{

    width:32px;

    height:32px;

    position:absolute;

    left:0px;

    top:-1px;

}

#ArrowIcon{

    width:32px;

    height:32px;

    position:absolute;

    right:2px;

    top:-3px;

}

#CurrentLanguage{

    display:inline-block;

    width:82px;
	
	position: relative;
    
	left: -10px;
    
	top: 3px;

    text-align:left;

    font-size:16px;

    font-weight:bold;

    color:#FFE17C;

    text-shadow:1px 1px 2px #000;

}

.FlagIcon{

    width:18px;

    height:12px;

    vertical-align:middle;

    margin-right:8px;

    margin-top:-2px;

}

.WarButton{
    display:inline-block;
    padding:6px 16px;

    background:linear-gradient(to bottom,#7b7b7b,#4e4e4e);

    border:1px solid #8f8f8f;
    border-radius:4px;

    color:#ffe17c;
    font-weight:bold;
    text-decoration:none;
    font-family:Verdana, Arial, sans-serif;

    text-shadow:1px 1px 1px #000;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 1px 3px rgba(0,0,0,.45);

    cursor:pointer;
    user-select:none;
    outline:none;
    transition:all .18s ease;
}

.WarButton:hover{
    background:linear-gradient(to bottom,#a5a5a5,#727272);

    border-color:#d5d5d5;

    color:#fff4b5 !important;

    text-shadow:1px 1px 1px #000;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 0 8px rgba(255,255,255,.25);
}

.WarButtonIcon{
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-right:6px;
    margin-top:-2px;
    pointer-events:none;
}

.cities-page                        /* NEW Cities NEW Towns */
{
text-align:center;
}


.cities-title
{
font-size:32px;
color:#d4af37;

text-shadow:
2px 2px 5px black;

font-family:Georgia,serif;

margin-bottom:30px;
}



.city-box
{
width:780px;

margin:0 auto 45px auto;

background-image:url('/images/cartographer_table02.png') !important;
background-repeat:no-repeat !important;
background-size:100% 100% !important;
background-position:center !important;

background:
rgba(30,20,10,0.85);

border:4px solid #8b6b2e;

border-radius:15px;

padding:20px;

box-shadow:
0 0 25px black;

}



.city-box h2
{
color:#ffd85c;

font-size:28px;

font-family:Georgia,serif;

text-shadow:
2px 2px 3px black;

}



.city-map
{
width:745px;
height:700px;
display:block;
border-radius:10px;
}



.city-box h3
{
color:#ffd85c;

font-size:22px;

}



.monster-list
{
	position:relative;
    
	display:grid;

    grid-template-columns:
    repeat(6,90px);

    justify-content:center;

    gap:23px;

    padding:20px 18px;

    box-sizing:border-box;
	
	transform:translateX(-2px);
}

.monster-list::before
{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:120%;
    height:140%;

    transform:translate(-50%,-50%);

    background:
    radial-gradient(
        ellipse at center,
        rgba(255,220,120,0.12) 0%,
        rgba(255,220,120,0.06) 35%,
        rgba(255,220,120,0.02) 55%,
        transparent 75%
    );

    filter:blur(18px);

    pointer-events:none;

    z-index:0;
}



.monster
{
	position:relative;
    z-index:1;
    width:90px;
    height:105px;

    background:
    linear-gradient(
    180deg,
    #4b3318,
    #24160a);

    border:2px solid #8c6a2d;

    border-radius:10px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:0.20s;
}



.monster img
{
    width:64px;

    height:64px;

    transition:0.2s;
}

.monster:hover
{
    transform:translateY(-4px);

    border-color:#ffd85c;

    box-shadow:
    0 0 18px rgba(255,216,92,0.7);
}



.monster:hover img
{
    transform:scale(1.20);

    filter:
    drop-shadow(0 0 8px gold);
}

.monster-tooltip
{

position:absolute;

bottom:80px;

left:50%;


transform:
translateX(-50%);


width:180px;


background:
linear-gradient(
180deg,
#3b260e,
#140b04
);



border:2px solid #d4af37;


border-radius:10px;


padding:10px;


color:#fff0a0;


font-size:13px;


font-family:Georgia,serif;


text-align:center;


box-shadow:
0 0 15px black;


opacity:0;


visibility:hidden;


transition:
0.25s;


z-index:100;

}



.monster-tooltip h4
{

margin:0 0 8px 0;


font-size:18px;


color:#ffd85c;


text-shadow:
1px 1px 3px black;

}



.monster-tooltip p
{

margin:5px 0;

}



.monster:hover .monster-tooltip
{

opacity:1;


visibility:visible;


bottom:95px;

}

.monster-panel
{
    width:730px;
	
	box-sizing:border-box;

    margin:25px auto;

    padding:20px;

    background-image:url('/images/cartographer_table04.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center;

    border:2px solid #7b5a1d;

    border-radius:12px;

    box-shadow:
    inset 0 0 25px rgba(255,220,120,0.08),
    0 0 15px black;
}

.city-map-wrapper
{
    position:relative;

    width:745px;
    height:700px;

    margin:auto;
	
	display:inline-block;

    padding:8px;

    background:#B8860B;

    border:4px solid #d4af37;

    border-radius:16px;

    box-shadow:
        0 0 0 2px #6e4e1b,
        0 0 0 4px #e3c76a,
        0 0 20px rgba(0,0,0,.8);

    overflow:visible
}


.map-monster
{
    position:absolute;

    width:44px;
    height:44px;

    z-index:5;

    cursor:pointer;

    filter:
    drop-shadow(0 0 5px black);

    transition:0.2s;
}

.map-monster:hover
{
    transform:scale(2);

    filter:
    drop-shadow(0 0 10px gold);
}

.map-monster
{
    transition:0.25s;
}

.map-monster.highlight
{
    transform:scale(1.35);

    filter:
        drop-shadow(0 0 6px gold)
        drop-shadow(0 0 14px yellow)
        drop-shadow(0 0 24px orange);

    z-index:999;
}

.monster-numbers
{
    margin-top:8px;

    color:#ffd85c;

    font-size:14px;

    font-weight:bold;

    letter-spacing:3px;

    text-shadow:
    1px 1px 3px black;
}

.monster-box
{
    width:780px;

    margin:0 auto 45px auto;

    background-image:url('/images/cartographer_table.png') !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    background-position:center !important;

    border:4px solid #8b6b2e;

    border-radius:15px;

    padding:20px;

    box-shadow:
    0 0 25px black;
}

.map-monster-wrapper
{
    position:absolute;
}

.map-monster
{
    cursor:pointer;
}

.map-tooltip
{
    display:none;
    position:absolute;

    bottom:100%;
    left:50%;

    transform:translateX(-50%);

    background:rgba(20,15,10,0.95);
    color:#d4af37;

    border:2px solid #8b6b2e;
    border-radius:4px;

    padding:4px 8px;

    font-family:Georgia,serif;
    font-size:14px;

    white-space:nowrap;

    z-index:9999;

    pointer-events:none;
}

.map-monster-wrapper:hover .map-tooltip
{
    display:block;
}

.cities-banner
{
    width:780px;

    margin:0 auto 30px auto;

    text-align:center;
}


.cities-banner img
{
    width:100%;

    height:auto;

    display:block;

    margin:auto;

    filter:
    drop-shadow(0 0 8px black);
}

.monsters-title
{
    margin:35px 0 25px 0;

    color:#FFFF00 !important;

    font-family:Georgia,serif;

    font-size:30px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:5px;

    text-align:center;

    text-shadow:
    2px 2px 4px black,
    0 0 10px rgba(255,216,92,0.6);
}

/* TANK SYSTEM */

/* ===========================
        TANK SYSTEM
=========================== */

.tank-system
{
    width:720px;

    margin:25px auto;

    padding:100px 25px 100px 25px;
	
	position:relative;

    overflow:hidden;

    text-align:center;

    background:
    url(/images/headers/tank_system_background.png) center center no-repeat,
    rgba(20,15,10,0.25);

    background-size: 100% 100%;

    border:2px solid #8b6b2e;

    border-radius:12px;

    box-shadow:
        inset 0 0 20px rgba(255,220,120,0.08),
        0 0 15px black;
		
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

cursor:default;
}

.tank-system::before
{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:120%;
    height:140%;

    transform:translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,220,120,.08) 0%,
            rgba(255,220,120,.03) 45%,
            transparent 80%
        );

    filter:blur(20px);

    pointer-events:none;
}

.tank-system > *
{
    position:relative;
    z-index:1;
}

.tank-title
{
    margin-bottom:25px;

    color:#d4af37;

    font-family:Georgia,serif;

    font-size:42px;

    font-weight:bold;

    letter-spacing:4px;

    text-transform:uppercase;

    text-shadow:
        2px 2px 4px black,
        0 0 12px rgba(255,215,0,.45);
}



.tank-description
{
    color:#f4e7b5;

    font-size:20px;

    line-height:1.7;

    text-shadow:
        1px 1px 2px black;
}



.tank-description b
{
    color:#ffd85c;
}



.tank-example
{
    margin-top:25px;

    color:#8fb7ff;

    font-size:18px;

    line-height:1.6;

    text-shadow:
        1px 1px 2px black;
}



.tank-benefits
{
    margin-top:35px;

    color:#f4e7b5;

    font-size:20px;

    line-height:2;

    text-shadow:
        1px 1px 2px black;
}



.tank-benefits b
{
    color:#ffd85c;

    font-size:24px;
}

.tank-commands
{
    display:flex;

    justify-content:center;

    gap:18px;

    margin:35px 0;

    flex-wrap:wrap;
}



.tank-command
{
    min-width:140px;

    padding:12px 22px;

    background:
        linear-gradient(
        180deg,
        #3b260e,
        #1a1007);

    border:2px solid #8b6b2e;

    border-radius:10px;

    color:#7CFC00;

    font-size:24px;

    font-weight:bold;

    font-family:Georgia,serif;

    text-align:center;

    cursor:default;

    text-shadow:
        1px 1px 3px black;

    box-shadow:
        inset 0 0 12px rgba(255,220,120,.08),
        0 0 8px rgba(0,0,0,.8);

    transition:.25s;
}



.tank-command:hover
{
    transform:translateY(-3px) scale(1.05);

    border-color:#ffd85c;

    color:#b8ff6d;

    box-shadow:
        0 0 15px rgba(255,215,0,.5),
        inset 0 0 18px rgba(255,220,120,.15);
}

.tank-benefits
{
    margin-top:40px;
}



.tank-benefits-title
{
    margin-bottom:22px;

    color:#ffd85c;

    font-size:30px;

    font-family:Georgia,serif;

    font-weight:bold;

    letter-spacing:4px;

    text-shadow:
        2px 2px 4px black,
        0 0 12px rgba(255,215,0,.45);
		
		position:relative;

        display:inline-block;

        overflow:hidden;
}

.tank-benefits-title::after
{
    content:"";

    position:absolute;

    top:-45%;

    left:-40%;

    width:40px;

    height:220%;

    pointer-events:none;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,245,180,.15),
        rgba(255,255,255,.95),
        rgba(255,220,120,1),
        rgba(255,255,255,.95),
        rgba(255,245,180,.15),
        rgba(255,255,255,0)
    );

    filter:blur(3px);

    transform:rotate(24deg);

    animation:tankMagicShine 8s linear infinite;
}

.tank-benefits-title::before
{
    content:"✦ ✧ ✦";

    position:absolute;

    left:-30%;

    top:48%;

    transform:translateY(-50%);

    color:#ffe58c;

    font-size:13px;

    letter-spacing:10px;

    white-space:nowrap;

    text-shadow:
        0 0 4px gold,
        0 0 10px gold,
        0 0 18px rgba(255,215,0,.7);

    opacity:0;

    pointer-events:none;

    animation:tankMagicSparkles 8s linear infinite;
}



.tank-bonus
{
    width:560px;

    margin:14px auto;

    padding:14px 18px;

    display:flex;
    align-items:center;
    gap:18px;

    color:#f5e7b2;

    font-size:20px;

    text-align:left;

    background:
        linear-gradient(
            to right,
            rgba(35,22,10,.65),
            rgba(70,45,20,.85),
            rgba(35,22,10,.65));

    border-top:1px solid rgba(255,220,120,.18);
    border-bottom:1px solid rgba(255,220,120,.18);

    border-left:none;
    border-right:none;

    border-radius:6px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 -1px 0 rgba(0,0,0,.35);

    transition:.25s;
}

.tank-bonus:hover
{
    transform:translateX(6px);

    background:
        linear-gradient(
            to right,
            rgba(255,215,0,.06),
            rgba(120,80,35,.38),
            rgba(255,215,0,.06));

    border-top:1px solid rgba(255,220,120,.45);
    border-bottom:1px solid rgba(255,220,120,.45);

    color:#fff8d5;

    box-shadow:
        0 0 10px rgba(255,215,0,.15),
        inset 0 0 10px rgba(255,220,120,.08);
}

.tank-bonus img
{
    width:32px;

    height:32px;

    image-rendering:auto;

    filter:
    drop-shadow(0 0 3px rgba(255,215,0,.7));
}

.tank-exp-icon
{
    width:40px !important;
    height:40px !important;

    image-rendering:auto;

    margin-left:-4px;
    margin-right:-4px;

    filter:
    drop-shadow(0 0 5px gold);
}

.tank-banner
{
    width:780px;

    margin:0 auto 30px auto;

    text-align:center;
}

.tank-banner img
{
    width:100%;

    display:block;

    margin:auto;

    filter:
        drop-shadow(0 0 10px black);
}

@keyframes tankMagicShine
{
    0%
    {
        left:-35%;
        opacity:0;
    }

    5%
    {
        opacity:1;
    }

    15%
    {
        left:125%;
        opacity:0;
    }

    100%
    {
        left:125%;
        opacity:0;
    }
}

@keyframes tankMagicSparkles
{
    0%
    {
        left:-25%;
        opacity:0;
    }

    6%
    {
        opacity:1;
    }

    15%
    {
        left:120%;
        opacity:0;
    }

    100%
    {
        left:120%;
        opacity:0;
    }
}

/* ===========================
        SERVER INFO
=========================== */

.server-info
{
    width:720px;

    margin:30px auto;

    padding:25px 0 40px 0;

    text-align:center;

background:
    linear-gradient(
        rgba(0,0,0,.20),
        rgba(0,0,0,.20)
    ),
    url(../../images/serverinfo/background01.png);

background-repeat:repeat;
background-position:center top;
background-size:auto;

    border:2px solid rgba(212,175,55,.65);

    border-radius:12px;

    box-shadow:
        0 0 25px rgba(0,0,0,.8),
        inset 0 0 35px rgba(0,0,0,.9),
        0 0 12px rgba(212,175,55,.25);
}

.server-title
{
    font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;

    font-size:34px;

    font-weight:bold;

    color:#FFD700;

    text-align:center;

    letter-spacing:1px;

    text-shadow:
        2px 2px 3px #000,
        0 0 8px rgba(255,215,0,.35);

    margin-bottom:14px;
}

.server-description
{
    font-family: Trebuchet MS, Verdana, sans-serif;

    font-size:20px;

    font-weight:bold;

    color:#F5E6C8;

    line-height:1.8;

    text-align:center;

    text-shadow:
        1px 1px 2px #000,
        0 0 4px rgba(0,0,0,.45);

    max-width:760px;

    margin:0 auto 18px;
	
	padding:0 35px;
}

.server-section
{
    width:620px;

    margin:35px auto;

    padding:18px 0 22px 0;

    background:
linear-gradient(
    rgba(25,18,10,.42),
    rgba(45,30,15,.42)
);

    border:1px solid rgba(212,175,55,.25);

    border-radius:10px;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.7);
}

.server-section-title
{
    margin-bottom:0;
	
	flex:1;

    color:#ffd85c;

    font-size:28px;

    font-family:Georgia,serif;

    font-weight:bold;

    letter-spacing:3px;

    text-align:center;

    text-shadow:
        2px 2px 4px black,
        0 0 10px rgba(255,215,0,.35);
}

.server-section-header
{
    display:flex;

    align-items:center;

    width:560px;

    margin:0 auto 18px auto;

    cursor:pointer;

    user-select:none;
}



.server-section-arrow
{
    width:35px;

    color:#FFD700;

    font-size:26px;

    font-family:Georgia,serif;

    font-weight:bold;


    text-shadow:
        0 0 5px #000,
        0 0 8px rgba(255,215,0,.8),
        0 0 14px rgba(255,215,0,.45);


    transition:
        transform .35s ease,
        filter .35s ease;


    flex-shrink:0;


    filter:
        drop-shadow(0 0 4px rgba(255,215,0,.6));
}



.server-section-count
{
    min-width:34px;

    height:26px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin-left:10px;


    background:
        linear-gradient(
            to bottom,
            rgba(120,80,25,.75),
            rgba(35,22,10,.95)
        );


    border:1px solid rgba(255,215,0,.75);


    border-radius:6px;


    color:#FFD700;


    font-size:16px;


    font-family:Verdana,sans-serif;

    font-weight:bold;

    line-height:1;


    text-shadow:
        1px 1px 3px black,
        0 0 5px rgba(255,215,0,.5);



    box-shadow:

        inset 0 0 6px rgba(0,0,0,.8),

        0 0 8px rgba(255,215,0,.25);


    flex-shrink:0;
}

.server-section.open
.server-section-count
{
    box-shadow:

        0 0 12px rgba(255,215,0,.55),

        inset 0 0 8px rgba(255,215,0,.15);
}



.server-section-content
{
    overflow:hidden;
}

.server-section-content
{
    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:
        max-height .35s ease,
        opacity .25s ease;
}


.server-section.open
.server-section-content
{
    opacity:1;
}


.server-section.open
.server-section-arrow
{
    transform:rotate(90deg) scale(1.15);

    filter:
        drop-shadow(0 0 8px gold);
}

.server-section.open
.server-section-arrow
{
    animation:
        serverArrowGlow 1.8s infinite alternate;
}



@keyframes serverArrowGlow
{
    from
    {
        filter:
            drop-shadow(0 0 7px gold);
    }


    to
    {
        filter:
            drop-shadow(0 0 18px gold);
    }
}

/* ===========================
        ACTIVE SECTION GLOW
=========================== */


.server-section.open
{
    border-color:
        rgba(255,215,0,.85);


    box-shadow:

        inset 0 0 20px rgba(0,0,0,.85),

        0 0 18px rgba(255,215,0,.45),

        0 0 35px rgba(255,215,0,.22);
}

.server-section.open
.server-section-header
{
    text-shadow:

        2px 2px 3px black,

        0 0 8px rgba(255,215,0,.75),

        0 0 16px rgba(255,215,0,.45);
}

.server-row
{
    display:flex;

    justify-content:space-between;

    align-items:center;

    width:560px;

    margin:12px auto;

    padding:12px 18px;

    background:
        linear-gradient(
            to right,
            rgba(35,22,10,.35),
            rgba(70,45,20,.55),
            rgba(35,22,10,.35));

    border-top:1px solid rgba(255,220,120,.20);

    border-bottom:1px solid rgba(255,220,120,.20);

    border-left:none;

    border-right:none;

    border-radius:6px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 -1px 0 rgba(0,0,0,.35);

    transition:.25s;

    cursor:default;

    user-select:none;
}

.server-row:hover
{
    transform:translateX(6px) scale(1.01);

    background:
        linear-gradient(
            to right,
            rgba(255,215,0,.06),
            rgba(120,80,35,.40),
            rgba(255,215,0,.06));

    border-top:1px solid rgba(255,220,120,.45);

    border-bottom:1px solid rgba(255,220,120,.45);

    box-shadow:
        0 0 10px rgba(255,215,0,.15),
        inset 0 0 10px rgba(255,220,120,.08);
}

.server-label
{
    width:190px;

    display:flex;

    align-items:center;

    gap:12px;
	
	white-space:nowrap;

    color:#f4e7b5;

    font-size:20px;

    text-shadow:
        1px 1px 2px black;

    flex-shrink:0;
}

.server-icon
{
    image-rendering:auto;

    flex-shrink:0;

    filter:drop-shadow(0 0 3px rgba(255,215,0,.40));
}

.server-value
{
    flex:1;

    color:#7CFC00;

    font-size:22px;

    font-weight:bold;

    text-shadow:
        1px 1px 3px black;

    text-align:right;

    padding-right:10px;
	
	white-space:nowrap;
}

.copy-command
{
	position:relative;
    
	width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    user-select:none;

    transition:.20s;
}

.copy-icon
{
    width:36px;

    height:36px;
	
	object-fit:contain;

    transition:.20s;

    filter:
        drop-shadow(0 0 3px rgba(255,215,0,.30));
}

.copy-command:hover .copy-icon
{
    transform:scale(1.15);

    filter:
        drop-shadow(0 0 6px gold);
}

.copy-tooltip
{
    position:absolute;

    top:100%;
    left:50%;

    transform:translateX(-50%);

    margin-top:-5px;

    opacity:0;

    color:#FFFFFF;
    text-shadow:0 0 6px rgba(255,0,0,.6);

    font-size:12px;

    font-weight:bold;

    white-space:nowrap;

    pointer-events:none;

    transition:.20s;
}

.server-icon-box
{
    width:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;
}

/* ===========================
        SERVER CONTROLS
=========================== */


.server-controls
{
    display:flex;

    justify-content:center;

    gap:20px;

    margin:25px auto 35px auto;
}



.server-control-button
{
    width:180px;

    height:42px;


    display:flex;

    align-items:center;

    justify-content:center;


    gap:8px;



    background:

        linear-gradient(
            to bottom,
            rgba(130,90,35,.85),
            rgba(35,22,10,.95)
        );



    border:

        1px solid rgba(255,215,0,.75);



    border-radius:10px;



    color:#FFD700;



    font-family:Georgia,serif;



    font-size:18px;



    font-weight:bold;



    letter-spacing:1px;



    text-shadow:

        2px 2px 3px black,

        0 0 6px rgba(255,215,0,.45);



    cursor:pointer;



    box-shadow:

        inset 0 0 12px rgba(0,0,0,.85),

        0 0 10px rgba(255,215,0,.25);



    transition:

        transform .20s ease,

        box-shadow .20s ease,

        background .20s ease;
}



.server-control-button:hover
{
    transform:

        translateY(-2px)
        scale(1.05);



    background:

        linear-gradient(
            to bottom,
            rgba(180,130,45,.95),
            rgba(70,40,15,1)
        );



    box-shadow:

        0 0 18px rgba(255,215,0,.55),

        inset 0 0 15px rgba(255,215,0,.15);
}

.server-control-button:active
{
    transform:

        scale(.96);


    box-shadow:

        inset 0 0 15px black;
}

/* ===========================
      SECTION HEADER ICON
=========================== */


.server-section-icon
{
    height:50px;
    width:auto;

    object-fit:contain;

    margin-right:10px;

    filter:
        drop-shadow(0 0 4px rgba(255,215,0,.55));

    flex-shrink:0;

    transition:.25s;
}



.server-section.open
.server-section-icon
{
    filter:

        drop-shadow(0 0 10px gold);
}


/* ===================================
  USTAWIENIA pod Telefon/Tablet itd
===================================== */
/* Urządzenia mobilne / dotykowe - zachowaj proporcje tła */

@media (pointer: coarse)
{

    html, body {
        min-width:0;
    }


    #ArtworkHelper {

        min-width:0;

        width:100%;

        min-height:0;

        background-position:center center;

        background-size:cover;

        background-repeat:no-repeat;
		
		background-attachment:fixed;

        /* tutaj NIC o background-attachment */

    }


    #Bodycontainer {

        min-width:0;

        width:100%;

    }

}

/* ===========================
        VERBANIA LOGO
=========================== */

#VerbaniaLogo
{
    position:fixed;

    top:-60px;
    left:50%;

    transform:translateX(-50%);

    text-align:center;

    z-index:10;

    pointer-events:none;
}

#VerbaniaLogo .verbania-logo-img
{
    width:480px;
    height:auto;
    display:block;

    filter:
    drop-shadow(0 1px 0 rgba(255,255,220,0.45))
    drop-shadow(0 -1px 0 rgba(120,70,0,0.55))
    drop-shadow(1px 2px 2px rgba(0,0,0,0.45))
    drop-shadow(0 0 3px rgba(255,215,0,0.55))
    drop-shadow(0 0 8px rgba(255,190,40,0.25));

    transition: filter .4s ease;
	
	animation:
    logoBreathing 6s ease-in-out infinite;
}

#VerbaniaLogo.logo-magic-active
.verbania-logo-img
{
    filter:
    drop-shadow(0 1px 0 rgba(255,255,220,.55))
    drop-shadow(0 -1px 0 rgba(120,70,0,.55))
    drop-shadow(0 0 5px rgba(255,215,0,.7))
    drop-shadow(0 0 15px rgba(255,190,40,.35));
}

#VerbaniaLogo:hover img
{
    filter:
        drop-shadow(0 1px 0 rgba(255,255,230,0.65))
        drop-shadow(0 -1px 0 rgba(150,90,0,0.65))
        drop-shadow(1px 3px 3px rgba(0,0,0,0.55))
        drop-shadow(0 0 5px rgba(255,215,0,0.75))
        drop-shadow(0 0 12px rgba(255,190,40,0.35));
}

#ArtworkHelper
{
    position:relative;
}

#Bodycontainer
{
    position:relative;
    z-index:20;
}

/* ===========================
        VERBANIA LAYERS
=========================== */
/* ===========================
        EFEKT ODDYCHANIA
=========================== */

@keyframes logoBreathing
{
    0%,
    100%
    {
        filter:
        drop-shadow(0 1px 0 rgba(255,255,220,0.45))
        drop-shadow(0 -1px 0 rgba(120,70,0,0.55))
        drop-shadow(1px 2px 2px rgba(0,0,0,0.45))
        drop-shadow(0 0 3px rgba(255,215,0,0.55))
        drop-shadow(0 0 8px rgba(255,190,40,0.25));
    }


    50%
    {
        filter:
        drop-shadow(0 1px 0 rgba(255,255,220,0.65))
        drop-shadow(0 -1px 0 rgba(120,70,0,0.65))
        drop-shadow(1px 2px 3px rgba(0,0,0,0.45))
        drop-shadow(0 0 8px rgba(255,215,0,0.85))
        drop-shadow(0 0 18px rgba(255,190,40,0.45));
    }
}

/* ===========================
        EFEKT ENERGI PULS
=========================== */

@keyframes logoEnergyPulse
{
    0%,
    55%,
    100%
    {
        opacity:0;
        transform:scale(0.96);
    }


    70%
    {
        opacity:0.85;
        transform:scale(1.04);
    }


    80%
    {
        opacity:0.55;
        transform:scale(1.02);
    }


    90%
    {
        opacity:0.15;
        transform:scale(1);
    }
}

/* ===========================
        MAGIC SPARKS
=========================== */

.logo-shimmer
{
    position:relative;
    display:inline-block;
	width:480px;
    height:auto;
}

.spark
{
    position:absolute;

    width:18px;
    height:18px;

    opacity:0;

    pointer-events:none;

    z-index:30;

    transform-origin:center center;

    filter:
    drop-shadow(0 0 4px rgba(255,220,120,.75))
    drop-shadow(0 0 8px rgba(255,190,40,.45));

    animation-name:sparkGlow;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}


/* ===========================
        MAGIC SPARKS
=========================== */

.spark1
{
    top:78px;
    left:82px;

    width:14px;
    height:14px;

    animation-duration:6s;
    animation-delay:0s;

    --moveX:8px;
    --moveY:-10px;
}


.spark2
{
    top:102px;
    left:205px;

    width:20px;
    height:20px;

    animation-duration:7.5s;
    animation-delay:1.8s;

    --moveX:-10px;
    --moveY:-14px;
}


.spark3
{
    top:90px;
    left:340px;

    width:16px;
    height:16px;

    animation-duration:6.8s;
    animation-delay:3.2s;

    --moveX:12px;
    --moveY:-8px;
}


.spark4
{
    top:140px;
    left:350px;

    width:13px;
    height:13px;

    animation-duration:8s;
    animation-delay:2.5s;

    --moveX:-8px;
    --moveY:-12px;
}


.spark5
{
    top:140px;
    left:220px;

    width:15px;
    height:15px;

    animation-duration:7s;
    animation-delay:4.5s;

    --moveX:10px;
    --moveY:-15px;
}



@keyframes sparkGlow
{

    0%
    {
        opacity:0;

        transform:
        translate(0,0)
        scale(.35)
        rotate(0deg);
    }


    12%
    {
        opacity:1;

        transform:
        translate(calc(var(--moveX) * .3),calc(var(--moveY) * .3))
        scale(1.25)
        rotate(35deg);
    }


    30%
    {
        opacity:.75;

        transform:
        translate(calc(var(--moveX) * .6),calc(var(--moveY) * .6))
        scale(1)
        rotate(80deg);
    }


    50%
    {
        opacity:.35;

        transform:
        translate(var(--moveX),var(--moveY))
        scale(.75)
        rotate(140deg);
    }


    70%
    {
        opacity:0;

        transform:
        translate(calc(var(--moveX) * 1.2),calc(var(--moveY) * 1.2))
        scale(.35)
        rotate(200deg);
    }


    100%
    {
        opacity:0;

        transform:
        translate(0,0)
        scale(.35)
        rotate(360deg);
    }

}

/* ===========================
    AMBIENT MAGIC PARTICLES
=========================== */

#AmbientParticles
{
    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    pointer-events:none;

    z-index:5;

    overflow:hidden;
}

.ambient-particle
{
    position:absolute;

    width:var(--size);
    height:var(--size);

    border-radius:50%;

    background:radial-gradient(
    circle,
    var(--particle-color) 0%,
    rgba(255,220,90,.55) 45%,
    rgba(255,190,40,.20) 70%,
    rgba(255,190,40,0) 100%
);

    opacity:0;

    pointer-events:none;

    will-change:transform,opacity;

    filter:
        drop-shadow(0 0 2px rgba(255,220,120,.45))
        drop-shadow(0 0 5px rgba(255,200,80,.25));

    animation:
        ambientFloat var(--duration) linear 1,
        ambientPulse 4s ease-in-out infinite;

    animation-delay:
        var(--delay),
        calc(var(--delay) * .35);
		
		animation-fill-mode:forwards;
}

.ambient-star
{
    border-radius:0;

    transform:rotate(45deg);

    box-shadow:
    0 0 6px rgba(255,235,140,.9),
    0 0 12px rgba(255,235,140,.35);
}

.ambient-star
{
    clip-path:polygon(
        50% 0%,
        62% 38%,
        100% 50%,
        62% 62%,
        50% 100%,
        38% 62%,
        0% 50%,
        38% 38%
    );

    background:radial-gradient(
        circle,
        rgba(255,255,220,1) 0%,
        rgba(255,235,120,.95) 45%,
        rgba(255,210,80,.25) 100%
    );
}

@keyframes ambientFloat
{
    0%
    {
        opacity:0;

        transform:
            translateY(30px)
            translateX(0px)
            scale(.45);
    }

    12%
    {
        opacity:var(--opacity);
    }

    40%
    {
        opacity:calc(var(--opacity) * .9);

        transform:
            translateY(-40px)
            translateX(calc(var(--drift) * .35))
            scale(.9);
    }

    70%
    {
        opacity:calc(var(--opacity) * .65);

        transform:
            translateY(-95px)
            translateX(var(--drift))
            scale(1);
    }

    100%
    {
        opacity:0;

        transform:
            translateY(-150px)
            translateX(calc(var(--drift) * 1.4))
            scale(.35);
    }
}



@keyframes ambientPulse
{
    0%,
    100%
    {
        filter:
            drop-shadow(0 0 2px rgba(255,220,120,.35))
            drop-shadow(0 0 5px rgba(255,190,40,.15));
    }

    50%
    {
        filter:
            drop-shadow(0 0 4px rgba(255,235,160,.65))
            drop-shadow(0 0 10px rgba(255,210,80,.35));
    }
}

.ambient-bright
{
    filter:
        drop-shadow(0 0 4px rgba(255,235,150,.8))
        drop-shadow(0 0 10px rgba(255,210,80,.45));
}

.ambient-rare
{
    width:calc(var(--size) * 1.8);
    height:calc(var(--size) * 1.8);

    filter:
        drop-shadow(0 0 5px rgba(255,245,180,1))
        drop-shadow(0 0 14px rgba(255,210,80,.75))
        drop-shadow(0 0 25px rgba(255,190,40,.35));
}

.logo-aura
{
    filter:
        drop-shadow(0 0 5px rgba(255,230,130,.8))
        drop-shadow(0 0 12px rgba(255,200,60,.45));

    animation-duration:calc(var(--duration) * .8);
}

.logo-aura.logo-pulse
{
    filter:
        drop-shadow(0 0 8px rgba(255,245,170,.95))
        drop-shadow(0 0 18px rgba(255,210,80,.75))
        drop-shadow(0 0 30px rgba(255,180,40,.45));

    animation:
        logoParticlePulse 1.5s ease-in-out;
}


@keyframes logoParticlePulse
{
    0%
    {
        transform:scale(.8);
        opacity:.4;
    }

    50%
    {
        transform:scale(1.5);
        opacity:1;
    }

    100%
    {
        transform:scale(1);
        opacity:.5;
    }
}

.legendary-spark
{
    width:14px;
    height:14px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,220,1) 0%,
        rgba(255,230,120,.95) 40%,
        rgba(255,180,40,.4) 70%,
        transparent 100%
    );


    filter:
    drop-shadow(0 0 6px rgba(255,245,180,1))
    drop-shadow(0 0 18px rgba(255,210,80,.8))
    drop-shadow(0 0 30px rgba(255,180,40,.45));


    animation:
    legendaryPulse 2s ease-in-out infinite;
}



@keyframes legendaryPulse
{
    0%,
    100%
    {
        transform:scale(.8);
    }


    50%
    {
        transform:scale(1.4);
    }
}

/* ===========================
    EQ ITEM NAME TOOLTIP
=========================== */

#vt-tooltip
{
    position:fixed;

    display:none;

    z-index:99999;
}

/* ===================================
   VERBANIA ITEM TOOLTIP SECTIONS
=================================== */


.vt-tooltip
{
    line-height:1.4;

    background:url(../../images/tooltip_texture.png) repeat;

    background-color:#111;

    border:2px solid #b88a3b;

    border-radius:4px;

    box-shadow:0 0 12px rgba(212,175,55,.25);

    padding:14px;
}

/* Nazwa itemu */

.vt-title
{
    font-size:20px;

    font-weight:bold;

    color:#d4af37;

    margin-bottom:10px;

    text-align:center;
}


/* Każda sekcja tooltipa */

.vt-section
{
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid rgba(255,255,255,0.15);
}


/* Pierwsza sekcja bez odstępu */

.vt-section:first-of-type
{
    margin-top: 0;
    padding-top: 0;

    border-top: none;
}


/* Nagłówki sekcji */

.vt-header
{
    font-size:18px;
    font-weight:bold;

    margin-bottom:8px;

    color:#d4af37;
}


/* Linie tekstu */

.vt-line
{
    margin:4px 0;

    color:#e0e0e0;

    font-size:15px;
}

/* ===================================
   VERBANIA TOOLTIP RPG COLORS
=================================== */


/* Zwykły tekst */

.vt-line
{
    color:#e0e0e0;
}


/* =========================
   BONUSES
========================= */

.vt-bonuses .vt-line
{
    color:#d8f5c8;
}


/* =========================
   PROTECTION
========================= */

.vt-protection .vt-line
{
    color:#b8d9ff;
}


/* =========================
   REGENERATION
========================= */

.vt-regeneration .vt-line
{
    color:#a8ffb0;
}


/* =========================
   WEAPON INFO
========================= */

.vt-weapon .vt-line
{
    color:#ffe7a3;
}


/* =========================
   DESCRIPTION
========================= */

.vt-description
{
    color:#888;
}


.vt-description-text
{
    color:#B8860B;

    font-family: Georgia, "Times New Roman", serif;

    font-size:13px;

    font-style:italic;

    line-height:1.5;

    margin-top:8px;
	
	max-width:260px;
    white-space:normal;
    overflow-wrap:break-word;
}

/* ===================================
   ITEM HOVER CURSOR
=================================== */

.vt-item {
    cursor: pointer;
}

/* ===================================
   VERBANIA ITEM TOOLTIP ICONS
=================================== */

.vt-header {
    display:flex;
    align-items:center;
    gap:6px;
}

/* Ikony Sekcji */

.vt-header-icon {
    width:54px;
    height:54px;
    object-fit:contain;
    vertical-align:middle;
}

/* Ikony wewnątrz wierszy */

.vt-inline-icon {
    width:32px;
    height:32px;
    vertical-align:-3px;
    margin-right:5px;
}