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

#online {
    color: orange;
}

#newz a {
    color: orange;
}

table {
    margin: 10px 0 30px 0;
    width: 740px;
    color: orange;
    border-spacing: 1px;
}

.galleryImage {
    max-width: 730px;
}

#myaccountTable tr.yellow td,
#highscoresTable tr.yellow td,
#onlinelistTable tr.yellow td,
#guildsTable tr.yellow td,
#guildViewTable tr.yellow td,
#buypointsTable tr.yellow td,
#shopTable tr.yellow td {
    color: rgb(200, 200, 200);
}

figure {
    width: 64px;
    /*container-width*/
    overflow: hidden;
    /*hide bounds of image */
    margin: 0 -19px 0 0;
    /*reset margin of figure tag*/
}

figure img {
    display: block;
    /*remove inline-block spaces*/
    width: 100%;
    /*make image streatch*/
    margin: -20%;
}


/* #characterprofileTable tr.yellow td, #housesTable tr.yellow td, #guildwarTable tr.yellow td, #guildwarViewTable tr.yellow td, #supportTable tr.yellow td, #deathsTable tr.yellow td, #killersTable tr.yellow td { */


/* color: rgb(200, 200, 200); */


/* } */

table tr:nth-child(odd) {
    background-color: #d4c0a1!important;
}

table tr:nth-child(even) {
    background-color: #f1e0c6!important;
    border: 1px solid #f1e0c6!important;
}

table tr th,
table tr td {
    /* background: #555555; */
    /*color: #FFF; */
    color: skyblue;
    padding: 2px 4px;
    text-align: left;
}

tr.yellow td {
    background: rgb(89, 10, 10);
    padding: 5px 5px;
    text-align: left;
}


/* table tr td {  */


/* background: rgb(212, 192, 161); */


/*color: #FFF; */


/* } */

.stripped tr:nth-child(odd) {
    background-color: #d4c0a1;
}

.stripped tr:nth-child(even) {
    background-color: #f1e0c6;
}


/* flag */

.flag {
    width: 200px;
    height: 200px;
}


/* guild war */

tr.special:hover td {
    background: skyblue;
}

tr.special {
    cursor: pointer;
}

ul.war_list li {
    font-size: 18px;
}

.OptionContainer input {
    vertical-align: middle;
    margin: 0px;
    margin-right: 3px;
}

.OptionContainer label {
    vertical-align: middle;
}

#DeactivationContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 80;
    height: 1300px;
    width: 100%;
    background-color: black;
    filter: alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity: 0.75;
    display: none;
}

#DeactivationContainerThemebox {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 95;
    height: 600px;
    width: 100%;
    display: none;
}

#ArtworkHelper {
    text-align: center;
    background-position: top center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    top: 0px;
    padding-top: 155px;
    width: 100%;
    height: 100%;
    min-width: 1000px;
}


/* container to implement min/max width */

#Bodycontainer {
    text-align: center;
    width: 1200px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    display: table;
}

.Forum #Bodycontainer {
    width: 1200px;
}

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

* html #MenuColumn {
    top: 155px;
    margin-left: -190px;
}

#ContentColumn {
    margin: 0px;
    margin-left: 205px;
    margin-right: 205px;
    text-align: left;
}

* html #ContentColumn {
    width: 790px;
}

#ThemeboxesColumn {
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 180px;
    margin-top: -144px;
    margin-left: 15px;
    margin-right: -190px;
    filter: alpha(opacity=100);
}

* html #ThemeboxesColumn {
    top: 5px;
    height: 1000px;
}

#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: -17px;
    left: -14px;
    height: 158px;
    width: 196x;
    z-index: 5;
    cursor: pointer;
    border: 0px;
}

#RightArtwork {
    text-align: left;
    position: absolute;
    top: 143px;
    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: 153px;
    height: 107px;
    left: -10px;
}

#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: none;
    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_12 {
    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;
}

#Loginbox #LoginButton #ButtonText2 {
    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;
}

.IconTopPlayers {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 0px;
    left: 132px;
}

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

.LabelTopPlayers {
    position: absolute;
    height: 22px;
    width: 116px;
    top: 6px;
    left: -25px;
}


/* 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%;
    z-index: 100;
}


/* "star-HTML-hack" to correct the position of the content area */

* html .Content {
    position: relative;
    top: 796px;
    margin: 20px;
    border: 0px dashed #051122;
    border-right-width: 550px;
}

#ContentHelper {
    position: relative;
}

.expRate td,
.expRate tr,
.expRate th {
    text-align: center;
}


/* "star-HTML-hack" to to implement min-width in IE */

* html #ContentHelper {
    display: inline-block;
    position: relative;
    top: -800px;
    margin: -20px;
    margin-right: -570px;
}

.brownFont {
    color: #5A2800;
}

.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: 367px;
    height: auto !important;
    height: 387px;
}


/* "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;
}

#grey-t {
    background-color: #505050;
}

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

.ContentHighscores {
    padding: 10px;
}

.ContentOnline {
    padding: 6px;
}

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

.Content .BoxContent .yellow td {
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 10pt;
    /*color: #5A2800;*/
    color: rgb(200, 200, 200);
}


/* 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: 17pt;
    cursor: pointer;
}

.TableHeadlineNavigation {
    margin-top: 4px;
    font-size: 8px;
    float: right;
}

.TableHeadlineNavigation a {
    color: white;
}

.TableHeadlineNavigation a:hover {
    color: white;
}


/* 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: 140px;
    width: 180px;
    height: 154px;
}

#Themeboxes div {
    font-size: 10pt;
    background-repeat: no-repeat;
}

#Themeboxes .ThemeboxButton {
    position: absolute;
    bottom: 20px;
    left: 22px;
    height: 25px;
    width: 135px;
    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 #NewcomerBox .ThemeboxButton {
    bottom: 15px;
}

#Themeboxes #PremiumBox {
    height: 164px;
}

#Themeboxes #JobBox {
    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: 70px;
    width: 150px;
    top: 37px;
    left: 15px;
    padding-top: 5px;
    overflow: hidden;
}

#Themeboxes #FansiteBox {
    position: relative;
    height: 188px;
}

#Themeboxes #FansiteLogoFrame {
    position: relative;
    top: 31px;
    width: 180;
    height: 145px;
}

#Themeboxes #FansiteLogo {
    position: relative;
    height: 100px;
    width: 150px;
    top: 8px;
    border: 0;
    cursor: pointer;
}

#Themeboxes #FansiteBox .ThemeboxButton {
    bottom: 19px;
}


/** -------------------------------
 *  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;
}

.Content .BoxContent td .orange {
    color: #FF9712;
}


/** -------------------------------
 *  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;
}


/** ------------------------------
 *  new payment and error handling
 *  ------------------------------
 */

.PaymentOrderTypeImage {
    width: 81px;
    height: 80px;
    margin-right: 5px;
}

.PaymentMethodBrandingSmall {
    width: 48px;
    height: 30px;
}

.PaymentMethodBrandingBig {
    width: 103px;
    height: 65px;
}

.PaymentResultImage {
    float: left;
    margin-right: 8px;
    margin-top: 3px;
    width: 62px;
    height: 60px;
}

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


/** ----------------
 *  new process bars
 *  ----------------
 */

#ProgressBar #Headline {
    text-align: center;
    font-size: 14pt;
    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;
    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;
}


/* HEADLESS CONTENT TABLE */

.HeadlessTable {
    border: 0px;
    border-style: solid;
    border-color: #656565;
    border-top-width: 1px;
    border-top-color: white;
    border-left-width: 1px;
    border-left-color: white;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-right-color: #656565;
    margin-left: 15px;
}


/* LABELS */

.LabelV {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
}

.LabelV150 {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
    width: 150px;
}

.LabelV200 {
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    vertical-align: top;
    width: 200px;
}

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

.TopButtonContainerInnerTable {
    position: absolute;
    right: 4px;
    top: 2px;
    z-index: 60;
}

* html .TopButtonContainer {
    right: 27px;
}

.TopButtonContainer .TopButton {
    position: absolute;
    right: 0px;
    z-index: 55;
}

#world_list_tr td {
    text-align: left;
}

.OptionContainer {
    text-align: center;
}

label {
    cursor: pointer;
}

.InputIndicator {
    position: relative;
    top: 5px;
    left: 218px;
    height: 12px;
    width: 12px;
    background-repeat: no-repeat;
}

* html .InputIndicator {
    left: 0px;
}

.sortarrow {
    width: 10px;
    height: 10px;
}


/* FORUM - general post format */

.ForumPost {
    position: relative;
    height: 100%;
    width: 798px;
    margin: -5px;
}

.PostUpper {
    clear: both;
}

.PostLower {
    clear: both;
    border-top: 1px solid #fff0d9;
    height: 50px;
    padding: 4px 0px;
}

.PostSeparatorV {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff0d9;
    left: 185px;
}

* html .PostCharacterText {
    width: 185px;
}

.PostCharacterText {
    width: 175px;
    float: left;
    padding: 5px;
}

.PostText {
    position: relative;
    min-height: 150px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    width: 600px;
    word-wrap: break-word;
    padding: 5px;
}

.PostDetails {
    width: 175px;
    float: left;
    padding: 0px 5px;
    font-size: 7pt;
}

.PostActions {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    word-wrap: break-word;
    font-size: 8pt;
    padding: 10px;
    padding-right: 0px;
    margin-left: 180px;
    width: 600px;
}

.PostActions .AdditionalBox {
    float: right;
    white-space: nowrap;
    text-align: right;
    margin: 4px 4px 0px 0px;
}


/* FORUM - CipSoft post format */

.CipPost .CipBorder {
    font-size: 1px;
    position: absolute;
    width: 798px;
    height: 3px;
    z-index: 99;
}

.CipPost .CipBorderBottom {
    position: absolute;
}

.CipPost .CipBorderBottom .CipBorder {
    bottom: 0px;
}

.CipPost .CipBorder .CipBorderCornerL {
    position: absolute;
    width: 3px;
    height: 3px;
    top: 0px;
    left: 0px;
    z-index: 99;
}

.CipPost .CipBorder .CipBorderH {
    position: absolute;
    width: 792px;
    height: 3px;
    top: 0px;
    left: 3px
}

.CipPost .CipBorder .CipBorderCornerR {
    position: absolute;
    width: 3px;
    height: 3px;
    top: 0px;
    right: 0px;
    z-index: 99;
}

.CipPost .CipBorderLeft {
    font-size: 1px;
    width: 3px;
    position: absolute;
    top: 0px;
    height: 100%;
    z-index: 0;
}

.CipPost .CipBorderLeft .CipBorderV {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3px;
    height: 100%;
}

.CipPost .CipBorderRight .CipBorderV {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 3px;
    height: 100%;
}

.CipPost .CipPostIcon {
    position: relative;
    top: 7px;
    left: 12px;
    width: 60px;
    height: 60px;
}

.PostDetailsHelper {
    position: relative;
}


/* Znote FORUM */


/* Znote FORUM */


/* Znote FORUM */


/* Znote FORUM */

.adminTable {
    margin: 0px;
    padding: 0px;
    position: relative;
    display: block;
    top: -34px;
}

.adminTable tr td {
    width: 210px;
    max-height: 35px;
}

.adminTable tr td form,
.adminTable tr td form input {
    width: 174px;
    height: 35px;
}

.postButton {
    margin: 0px;
    padding: 0px;
    position: relative;
    display: block;
    float: left;
    top: -34px;
}

.editThread {
    margin: 0px;
    padding: 0px;
    position: relative;
    display: block;
    float: left;
    top: -36px;
}

.editThread tr,
.editThread tr td,
.editThread tr td form,
.editThread tr td form input {
    margin: 0px;
    padding: 0px;
    height: 20px;
}

.updateTable tr td input {
    width: 500px;
}


/* ///////////\/\\\\\\\\\\\
   //  Znote YOUTUBE BB  \\
   ///////////\/\\\\\\\\\\\ */

div.youtube {
    width: 100%;
    max-width: 560px;
}

div.aspectratio {
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    position: relative;
}

div.aspectratio>iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.signBgrnd {
    background-image: url('eq/outfit-light.png');
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-left: 22px;
    padding: 10px;
    height: 121px;
    width: 86px;
    border: 1px #D4C0A1 solid;
    z-index: 2;
}


/* Weapon */

.signBgrnd .wep {
    position: absolute;
    top: 37px;
    left: 2px;
    width: 32px;
    height: 32px;
}

.signBgrnd .wep img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* Armor */

.signBgrnd .arm {
    position: absolute;
    top: 37px;
    left: 37px;
    width: 32px;
    height: 32px;
}

.signBgrnd .arm img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* Helmet */

.signBgrnd .helm {
    position: absolute;
    top: 2px;
    left: 37px;
    width: 32px;
    height: 32px;
}

.signBgrnd .helm img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}

.tooltip .tooltiptext {
    visibility: hidden;
    border-radius: 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    font-family: Verdana, sans-serif;
    position: absolute;
    left: 42px;
    top: -20px;
    z-index: 99;
    background: #333333;
    border: 2px solid #111111;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    padding: 0.1em;
    /* Szerzej i z oddechem - przy rzadkich przedmiotach dymek niesie nazwe
       z przedrostkiem, statystyki i opis dodatku, a 100px lamalo to na sieczke. */
    width: auto;
    min-width: 190px;
    max-width: 320px;
    white-space: normal;
    line-height: 1.45;
    display: block;
    padding: 8px 10px;
    opacity: 0.95;
    filter: alpha(opacity=95);
    z-index: 150;
    font-size: 12px;
    color: #ffffff;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Rynek: podglad przedmiotu po najechaniu na obrazek.
   Wlasny zestaw klas zamiast .tooltip, bo tamten nie ustawia position:relative
   na rodzicu i dymek uciekalby do krawedzi tabeli. */
.rynek-item {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.rynek-item img {
    transition: transform 0.12s ease;
}

.rynek-item:hover img {
    transform: scale(1.7);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}

.rynek-dymek {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
    position: absolute;
    left: 46px;
    top: -12px;
    z-index: 200;
    width: max-content;
    min-width: 170px;
    max-width: 300px;
    background: #333333;
    border: 2px solid #111111;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.45;
    color: #ffffff;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

.rynek-item:hover .rynek-dymek {
    visibility: visible;
    opacity: 1;
}

.rynek-dymek .naglowek {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
}

/* Kolor dziedziczymy z dymka, zeby przy rzadkim przedmiocie CALA jego tresc byla
   w barwie tieru. Wlasny kolor na .linia wygrywalby z dziedziczeniem i rozbijal
   to na dwa kolory. Drugorzedne wiersze wyrozniamy przezroczystoscia. */
.rynek-dymek .linia {
    display: block;
    color: inherit;
    opacity: 0.82;
}

/* przy ostatnich kolumnach dymek po lewej, zeby nie wychodzil poza strone */
.rynek-item.z-lewej .rynek-dymek {
    left: auto;
    right: 46px;
}

@media (prefers-reduced-motion: reduce) {
    .rynek-item img,
    .rynek-dymek {
        transition: none;
    }
}

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

.element::before {
    content: attr(data-title);
    position: absolute;
    order-radius: 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    font-family: Verdana, sans-serif;
    position: absolute;
    left: 42px;
    top: -20px;
    z-index: 99;
    background: #333333;
    border: 2px solid #111111;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    padding: 0.1em;
    width: 100px;
    display: block;
    padding: 5px;
    opacity: 0.95;
    filter: alpha(opacity=95);
    z-index: 150;
    font-size: 12px;
    color: #ffffff;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    opacity: 0;
    /* Początkowo ustaw opację na 0, aby był niewidoczny */
    pointer-events: none;
    /* Zapobiega aktywowaniu zdarzeń na pseudo-elemencie */
    transition: opacity 0.3s ease;
    /* Dodaj płynny efekt przejścia */
}

.element:hover::before {
    opacity: 1;
    /* Po najechaniu myszką, ustaw opację na 1, aby był widoczny */
}


/* legs */

.signBgrnd .legs {
    position: absolute;
    top: 72px;
    left: 37px;
    width: 32px;
    height: 32px;
}

.signBgrnd .legs img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* boots */

.signBgrnd .boots {
    position: absolute;
    top: 106px;
    left: 37px;
    width: 32px;
    height: 32px;
}

.signBgrnd .boots img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* ring */

.signBgrnd .ring {
    position: absolute;
    top: 72px;
    left: 2px;
    width: 32px;
    height: 32px;
}

.signBgrnd .ring img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* amulet */

.signBgrnd .amulet {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 32px;
    height: 32px;
}

.signBgrnd .amulet img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* backpack */

.signBgrnd .backpack {
    position: absolute;
    top: 2px;
    left: 72px;
    width: 32px;
    height: 32px;
}

.signBgrnd .backpack img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* shield */

.signBgrnd .shield {
    position: absolute;
    top: 37px;
    left: 72px;
    width: 32px;
    height: 32px;
}

.signBgrnd .shield img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}


/* arrow */

.signBgrnd .arrow {
    position: absolute;
    top: 72px;
    left: 72px;
    width: 32px;
    height: 32px;
}

.signBgrnd .arrow img {
    background-image: url('eq/bg-light.png');
    max-width: 100%;
}

.textMenu {
    font-size: 14px;
    position: absolute;
    top: 3px;
    text-align: center;
    width: 112px;
    color: #e0dfde;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font-family: 'Cinzel Decorative', cursive;
}

.sidebar {
    position: relative;
    top: 45px;
    font-size: 11px;
    text-align: left;
}

.topPlayers {
    width: 80%;
    margin: auto;
    padding: 3px;
    /* height: 50px; */
}

.textMenuTopPlayers {
    font-size: 14px;
    position: absolute;
    top: 8px;
    left: 35px;
    text-align: center;
    width: 112px;
    color: #e0dfde;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font-family: 'Cinzel Decorative', cursive;
}

.topPlayersCount1,
.topPlayersCount2,
.topPlayersCount3,
.topPlayersCount4,
.topPlayersCount5 {
    /* background-color: #505050;  */
    background-repeat: no-repeat;
    /* color: white; 
    border: #333 1px solid;  */
    padding: 8px 15px;
    margin-left: 5px;
    position: absolute;
    left: 10px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 900;
}

.topPlayersCount1 {
    background-image: url('http://108.181.196.114/layout/images/top1.gif');
}

.topPlayersCount2 {
    background-image: url('http://108.181.196.114/layout/images/top1.gif');
    filter: grayscale(90%);
}

.topPlayersCount3 {
    background-image: url('http://108.181.196.114/layout/images/top1.gif');
    filter: grayscale(40%);
}

.countPlayersSpan {
    position: absolute;
    left: 8px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
}

.topPlayersOutfit {
    position: relative;
    top: -14px;
    left: -40px;
}

.topPlayersLink {
    margin-left: 15px;
    text-decoration: none;
}

#topPlayersA:hover {
    text-decoration: none;
    color: #9d9ea0!important;
}

.topPlayersVocLvl {
    color: white;
    font-size: 10px;
    font-weight: 900;
    text-shadow: 0.1em 0.1em #333
}

.itemPromoThemebox {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
}

.networksLinks:hover {
    opacity: 0.5;
}
/* Obrazki strojow generowane z naszego Tibia.dat maja jednolite plotno 64x64,
   wiec pokazujemy je w naturalnym rozmiarze - tak samo jak sekcja Addons na
   profilu postaci. Rozmiaru nie narzucamy: skoro plotno jest jednolite, wiersze
   tabel i tak sie nie rozjezdzaja, a skalowanie odbieraloby tylko ostrosc. */
.outfitColumn img,
figure img[src*="outfit.php"],
.topPlayersOutfit img,
img[src*="outfit.php"] {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	vertical-align: middle;
	/* Zaden margines. Byl tu margin-top: -20px, zeby obrazek nie rozpychal
	   wiersza - ale plotno ma 64x64 i podciagniety stroj byl obcinany od gory.
	   Miejsce daje komorka (regula nizej), a nie przesuwanie obrazka. */
	margin: 0;
}

/* Komorka na stroj ma miec pelne 64x64. Bez tego przegladarka sciska ja do
   szerokosci tekstu obok, a obrazek jest przycinany albo nachodzi na sasiada.
   Wysokosc podana wprost trzyma rowna wysokosc wierszy w calej tabeli. */
.outfitColumn,
td.outfitColumn {
	width: 64px;
	min-width: 64px;
	height: 64px;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	overflow: visible;
}

.outfitColumn figure {
	margin: 0;
	padding: 0;
	width: 64px;
	height: 64px;
	line-height: 64px;
}

/* Marginesy strojow.
 *
 * Nowe stroje (looktype od 368 w gore) maja plotno przesuniete w kazda strone,
 * wiec dostaja margines ze wszystkich stron. Klasyczne z 7.6 (128-142) sa
 * rysowane inaczej i potrzebuja podciagniecia wylacznie od gory - margines
 * boczny przesuwalby je w kolumnie.
 *
 * Rozrozniamy je po numerze stroju w adresie obrazka, bo oba zakresy sa
 * rozlaczne. Kazdy numer ma dwa selektory: gdy po nim ida kolejne parametry
 * (&addons=...) i gdy konczy adres - inaczej "id=128" zlapaloby tez "id=1280". */
/* Sam figure widgetu "Top Players" NIE dostaje marginesu - jego pozycje
   trzyma position/top/left ustawione wyzej, a margines na kontenerze
   przesuwalby caly wiersz razem z nazwa gracza. Margines dotyczy wylacznie
   obrazka w srodku (regula na koncu tej sekcji). */
.topPlayersOutfit img,
.outfitColumn img,
figure img[src*="outfit.php"],
img[src*="outfit.php"] {
	margin: -20px;
}

/* Kazdy selektor ma DWA warunki na tym samym elemencie. To nie ozdobnik:
   w bloku wyzej jest "figure img[src*=...]", a obrazki w rankingach siedza
   wlasnie w <figure>. Tamten selektor liczy sie wyzej niz pojedynczy
   "img[src*=...]" i wygrywal mimo, ze stoi przed tym blokiem - przez co
   klasyczne stroje dostawaly margines ze wszystkich stron. Dwa warunki
   na img podnosza wage ponad "figure img" i sprawa jest rozstrzygnieta
   bez uciekania sie do !important. */
img[src*="outfit.php"][src*="?id=128&"], img[src*="outfit.php"][src$="?id=128"],
img[src*="outfit.php"][src*="?id=129&"], img[src*="outfit.php"][src$="?id=129"],
img[src*="outfit.php"][src*="?id=130&"], img[src*="outfit.php"][src$="?id=130"],
img[src*="outfit.php"][src*="?id=131&"], img[src*="outfit.php"][src$="?id=131"],
img[src*="outfit.php"][src*="?id=132&"], img[src*="outfit.php"][src$="?id=132"],
img[src*="outfit.php"][src*="?id=133&"], img[src*="outfit.php"][src$="?id=133"],
img[src*="outfit.php"][src*="?id=134&"], img[src*="outfit.php"][src$="?id=134"],
img[src*="outfit.php"][src*="?id=136&"], img[src*="outfit.php"][src$="?id=136"],
img[src*="outfit.php"][src*="?id=137&"], img[src*="outfit.php"][src$="?id=137"],
img[src*="outfit.php"][src*="?id=138&"], img[src*="outfit.php"][src$="?id=138"],
img[src*="outfit.php"][src*="?id=139&"], img[src*="outfit.php"][src$="?id=139"],
img[src*="outfit.php"][src*="?id=140&"], img[src*="outfit.php"][src$="?id=140"],
img[src*="outfit.php"][src*="?id=141&"], img[src*="outfit.php"][src$="?id=141"],
img[src*="outfit.php"][src*="?id=142&"], img[src*="outfit.php"][src$="?id=142"] {
	margin: 0;
	margin-top: -20px;
}

/* Prawe menu, widget "Top Players" - tam stroje maja mniej miejsca niz
   w tabelach, wiec podciagamy je o polowe mniej.
   Selektor musi wazyc wiecej niz reguly wyzej: "figure.topPlayersOutfit img"
   bije zarowno "figure img[src*=...]", jak i klasyczne "img[...][...]",
   dzieki czemu dotyczy tak samo strojow nowych i tych z 7.6. */
figure.topPlayersOutfit img[src*="outfit.php"],
figure.topPlayersOutfit img {
	margin: -10px;
}

/* Widget "Top Players" - stroj dostaje takie samo pudelko 64x64 jak komorki
   w tabelach, zeby cala sylwetka byla widoczna.
   Wczesniej siedzial w kontenerze 1x1 piksela i byl z niego wyciagany ujemnym
   top/left, przez co przy plotnie 64x64 gora i bok byly przycinane.
   Odznaka z numerem jest pozycjonowana bezwzglednie (left: 10px), wiec pudelko
   stawiamy obok niej, a tekst odsuwamy za nie. */
/* Profil postaci.
 *
 * Ujemny margines ma sens WYLACZNIE w zakladce Addons: tam stroje stoja w gestej
 * liscie i bez podciagniecia rozpychalyby wiersze. Glowny stroj u gory profilu
 * ma wlasne miejsce w ukladzie, wiec zaden margines go nie dotyczy - inaczej
 * wjezdzalby na dane postaci.
 *
 * "#addon-show" to kontener zakladki (characterprofile.php:1412). Identyfikator
 * wazy wiecej niz cokolwiek wyzej, wiec regula jest pewna niezaleznie od tego,
 * czy stroj jest nowy, czy klasyczny. */
/* Zakladka Addons nie ma juz wlasnych wymiarow. Stroj siedzi teraz w
   <td class="outfitColumn"><figure>, dokladnie tak jak na topaddonmakers.php,
   wiec obowiazuja go te same reguly co wszedzie indziej: pudelko 64x64
   i margines -20px z reguly ogolnej. Wczesniej byla tu osobna komorka 72x60
   z marginesem -26px, przez co ta jedna zakladka wygladala inaczej niz reszta
   strony. Numer pozycji przeniesiony do wlasnej komorki (characterprofile.php). */

.outfit img[src*="outfit.php"] {
	margin: 0;
}

/* Tabela "Characters" na profilu postaci - to samo, co wyzej w zakladce Addons.
   Tam obrazek mial ujemny margines ze wszystkich stron, tu bylo gorzej: siedzial
   na inline position:absolute, czyli w ogole poza ukladem, wiec komorka nie miala
   z czego wziac rozmiaru i stroj wychodzil na sasiednie pola. Inline stylu nie da
   sie nadpisac arkuszem, wiec zostal usuniety z characterprofile.php, a geometria
   jest tutaj. */
#characterprofileTable td.ContentOnline:first-child {
	width: 72px;
	min-width: 72px;
	height: 60px;
	padding: 2px 4px;
	text-align: center;
	vertical-align: middle;
}

#characterprofileTable .outfit {
	width: 64px;
	height: 60px;
	margin: 0 auto;
	line-height: 60px;
	overflow: visible;
}

/* Ujemny margines tylko od gory - identyfikator wazy wiecej niz regula
   ".outfit img[...]" wyzej, ktora zerowala marginesy. Ta jedna liczba reguluje
   wysokosc stroju w komorce, tak samo jak w zakladce Addons. */
#characterprofileTable .outfit img[src*="outfit.php"] {
	margin: -26px 0 0 0;
	vertical-align: middle;
}

/* Blok "Top 3 Best Fraggers" na fraggers.php. Kontener nie mial zadnych regul -
   figure bylo bez rozmiaru, wiec stroj dostawal ujemny margines z reguly ogolnej
   i byl przycinany. Dajemy mu pelne pudelko 64x64, tak samo jak komorkom tabel. */
.topFragsContainer figure {
	margin: 0;
	padding: 0;
	width: 64px;
	height: 64px;
	line-height: 64px;
	text-align: center;
}

.topFragsContainer img[src*="outfit.php"] {
	margin: 0;
	vertical-align: middle;
}

/* Ramka ma tylko 180 px szerokosci i tlo, ktore sie NIE powtarza (#Themeboxes div
   ustawia background-repeat: no-repeat). Skoro wysokosc jest teraz zalezna od
   tresci, tlo musi sie powtarzac w pionie - inaczej ponizej wysokosci obrazka
   ramka bylaby przezroczysta. */
/* Ramka pokazuje CALY obrazek topexpboxNone.gif, 180x221, bez powtarzania.
   Ten plik jest samowystarczalny: ma ciemna krawedz u gory (y 0-2), pergamin
   w srodku i wlasne wykonczenie na dole (y 214-220). Dlatego doklejany pasek
   box-bottom.gif zostal usuniety z rightside.php - dublowal to, co obrazek
   juz ma.

   Wczesniej tlo bylo powtarzane w pionie (repeat-y) z zapasem padding-bottom,
   bo wiersze mialy po 64 px i piec pozycji przekraczalo 221 px. Po przebudowie
   wiersza pozycja zajmuje okolo 35 px, wiec naglowek plus trzy wiersze mieszcza
   sie w obrazku z zapasem i nie ma czego powtarzac. */
#TopPlayersBox {
	background-repeat: no-repeat;
	height: 221px;
	/* overflow MUSI byc widoczne. Plotno stroju siega 64 px w gore od dolu
	   wiersza, wiec przy pierwszej pozycji wychodzi ponad gorna krawedz listy -
	   przy overflow:hidden ramka scinala czubek glowy. Wysokosc jest sztywna,
	   ale tresc i tak sie miesci (5 wierszy po ~33 px liczac od 38 px konczy sie
	   na 203 przy 221 px ramki), wiec nie ma czego chowac. */
	overflow: visible;
}

/* Naglowek "Top Players" jest pozycjonowany bezwzglednie i konczy sie okolo
   32 px, wiec globalne top:45px z .sidebar zostawialo niepotrzebna dziure.
   Przy pieciu pozycjach ten zapas decydowal o tym, czy ostatnia sie zmiesci:
   5 wierszy po ~33 px to 165 px, wiec od 38 px konczymy na 203 przy dolnym
   wykonczeniu obrazka zaczynajacym sie na 214. */
#TopPlayersBox .sidebar {
	top: 38px;
}

/* Boosted Creatures korzysta z TEGO SAMEGO obrazka co Top Players, ale mial
   wpisane na sztywno height:150px, wiec obcinal go w polowie - dolne
   wykonczenie (y 214-220) nigdy nie bylo widoczne, a ramka konczyla sie
   plaskim scieciem. Ta sama wysokosc co wyzej pokazuje caly plik. */
#BoostedBox {
	background-repeat: no-repeat;
	height: 221px;
	/* Tak samo jak w Top Players - plotno potwora wychodzi ponad wiersz
	   i overflow:hidden scinalby mu gore. */
	overflow: visible;
	/* Dwa wpisy w ramce na 221 px zostawialy sporo pustego miejsca u dolu.
	   Centrujemy je w pionie flexem zamiast dobierac odstep recznie - przy
	   zmianie liczby wpisow albo wysokosci wiersza nie trzeba nic przeliczac.
	   Gorny padding robi miejsce na naglowek (jest pozycjonowany bezwzglednie,
	   wiec nie zajmuje miejsca w ukladzie), dolny - na wykonczenie obrazka. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 32px;
	padding-bottom: 14px;
	box-sizing: border-box;
}

/* Globalne top:45px przesuwaloby tresc w dol i psulo centrowanie liczone
   przez flex, wiec w tym panelu je zdejmujemy.
   padding-left odsuwa oba wpisy od lewej krawedzi - razem z sylwetka, bo
   przesuwa cala kolumne, a nie sam tekst. */
#BoostedBox .sidebar {
	position: static;
	top: auto;
	width: 100%;
	padding-left: 8px;
	box-sizing: border-box;
}

/* Wiersz Top Players przepisany na uklad z panelu Top Experience na kaldrox.com.
 *
 * Sedno tamtego rozwiazania: wysokosc wiersza wyznacza TEKST, a nie stroj.
 * Plotno stroju ma 64x64, ale jest wyjete z ukladu i zakotwiczone stopami do
 * dolu wiersza, wiec nadmiar wychodzi w gore zamiast rozpychac wiersz. Dzieki
 * temu pozycja zajmuje okolo 32 px zamiast 64 i trzy mieszcza sie w ramce.
 *
 * Numer pozycji nie ma juz wlasnej odznaki obok stroju - stoi w linii przed
 * nazwa jako "1- ", a medal top1.gif pojawia sie tylko przy pierwszym miejscu.
 * Reguly .topPlayersCount1..5 i .countPlayersSpan wyzej w pliku sa od tej pory
 * martwe: widget nie wypisuje juz tych klas. Zostaja nietkniete, bo nalezA do
 * motywu, a nie do tego widgetu. */
.topPlayers {
	position: relative;
	display: flex;
	align-items: flex-start;
	width: auto;
	margin: 0 0 3px 0;
	padding: 2px 4px 2px 2px;
}

/* Bez przecierek - wiersze sa przezroczyste i widac samo tlo panelu.
   Klasy zostaja, bo widget je wypisuje i przydadza sie, gdyby naprzemienne
   tlo mialo kiedys wrocic. */
.topPlayersRowOdd,
.topPlayersRowEven {
	background-color: transparent;
}

/* Waska kolumna na stroj. Sam stroj jest w niej pozycjonowany bezwzglednie,
   wiec kolumna nie ma wlasnej wysokosci - to ona pozwala wierszowi zwezic sie
   do wysokosci tekstu. */
.topPlayersOutfitBox {
	position: relative;
	flex: 0 0 38px;
	width: 38px;
	align-self: stretch;
}

/* left:50% + margin-left to ustawienie plotna 64 px wzgledem kolumny 38 px.
   Samo wysrodkowanie wypadloby na -32px; przesuniecie w lewo jest ustawiane
   nizej, osobno dla strojow klasycznych i nowych - maja rozne plotna i nie
   siadaja w tym samym miejscu.
   background-position: center bottom stawia sylwetke stopami na dole - bez tego
   postac wisialaby w gornej czesci plotna, bo wiekszosc kadru jest przezroczysta. */
.topPlayersOutfit {
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 64px;
	height: 64px;
	top: auto;
	background-repeat: no-repeat;
	background-position: center bottom;
	pointer-events: none;
	/* Stroj ma byc nad wszystkim. Wiersze sa position:relative bez wlasnego
	   z-index, wiec nie tworza kontekstu ukladania i ta wartosc liczy sie
	   wzgledem calego panelu - sylwetka wychodzi nad naglowek i nad wiersz
	   powyzej, zamiast chowac sie pod nimi. */
	z-index: 10;
}

/* Klasyczne stroje z 7.6 (looktype 128-134 i 136-142) - klase nadaje widget. */
.topPlayersOutfitClassic {
	margin-left: -42px;
}

/* Stroje doklejone z 8.6 stoja na szerszym plotnie, wiec ida o 10 px dalej. */
.topPlayersOutfitNew {
	margin-left: -52px;
}

/* min-width: 0 jest konieczne - domyslnie element flex nie zwezy sie ponizej
   swojej tresci i dluga nazwa rozepchnelaby wiersz poza ramke 180 px. */
.topPlayersLink {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 0;
	padding-top: 0;
	line-height: 13px;
	overflow-wrap: anywhere;
}

/* Nazwa: ciemny braz na pergaminie, jak we wzorze. Kolor online/offline
   przenosi sie na kropke obok, wiec sama nazwa ma juz staly kolor. */
.topPlayersName,
a#topPlayersA.topPlayersName {
	display: block;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #5f4d41 !important;
	text-decoration: none;
	text-shadow: none;
}

a#topPlayersA.topPlayersName:hover {
	color: #4e3131 !important;
	text-decoration: none;
}

.topPlayersRank {
	font-size: 10px;
	margin-left: -1px;
}

/* Kropki stanu online/offline zostaly usuniete - widget ich juz nie wypisuje.
   We wzorze jest w tym miejscu ikonka postaci z Font Awesome, zielona albo
   czerwona; u nas rysowalismy ja czystym CSS, ale czerwone kropki przy
   wylogowanych postaciach zdominowaly caly panel.
   Razem z nimi znika sygnal, kto jest online - jesli ma wrocic, najlepiej
   przez kolor nazwy, a nie osobny znacznik. */

/* Druga linia: poziom i profesja. Nadpisuje bialy kolor z motywu - biel
   z czarnym cieniem byla dobrana pod ciemne tlo, a ten panel jest pergaminowy. */
.topPlayersVocLvl {
	clear: right;
	color: #5a2800;
	font: 100 10px Verdana, Arial, "Times New Roman", sans-serif;
	font-weight: 400;
	text-shadow: none;
}

/* Medal tylko przy pierwszym miejscu. Ujemny gorny margines wciaga go w linie
   nazwy, tak jak we wzorze - inaczej rozpychalby druga linie. */
.topPlayersMedal {
	float: left;
	width: 11px;
	height: 10px;
	margin-top: -14px;
	margin-left: -2px;
	margin-right: 2px;
}

/* --- Boosted Creatures: ten sam uklad wiersza co w Top Players ---------------
 *
 * Caly wpis jest odnosnikiem, wiec zamiast divow uzywamy spanow z display:flex -
 * <div> w <a> jest niepoprawny w HTML4/XHTML, a ten szablon nie jest HTML5.
 * Wysokosc wiersza wyznacza tekst; plotno 64x64 jest wyjete z ukladu. */
.boostedRow {
	display: flex;
	align-items: flex-start;
	position: relative;
	/* Duzo wiekszy odstep niz w Top Players: tam wierszy jest piec i licza sie
	   jako lista, tu sa dwa i maja byc wyraznie rozsuniete - jeden wysoko,
	   drugi nisko. Cala para zostaje wysrodkowana w pionie, bo centrowanie
	   liczy flex na #BoostedBox, wiec odstep rozjezdza je symetrycznie. */
	margin: 0 0 46px 0;
	padding: 2px 4px 2px 2px;
	text-decoration: none;
}

/* Bez tego ostatni odstep przesuwalby caly blok w gore wzgledem srodka. */
.boostedRow:last-child {
	margin-bottom: 0;
}

.boostedOutfitBox {
	position: relative;
	flex: 0 0 38px;
	width: 38px;
	align-self: stretch;
}

/* margin-left: -42px, czyli tyle samo co stroje klasyczne w Top Players -
   dzieki temu sylwetki w obu panelach stoja w jednej linii pionowej.
   Potwory nie dziela sie na klasyczne i nowe, wiec jest tu jedna wartosc. */
.boostedOutfit {
	position: absolute;
	left: 50%;
	margin-left: -42px;
	bottom: -4px;
	width: 64px;
	height: 64px;
	background-repeat: no-repeat;
	background-position: center bottom;
	image-rendering: pixelated;
	pointer-events: none;
	z-index: 10;
}

/* padding-left odsuwa SAM tekst od sylwetki. Poszerzenie kolumny stroju
   daloby ten sam efekt wizualnie, ale przesunieoby tez potwora, bo jest on
   pozycjonowany wzgledem srodka tej kolumny (left:50%). */
.boostedInfo {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 12px;
	line-height: 13px;
	overflow-wrap: anywhere;
}

/* Ta sama typografia co w Top Players - oba panele stoja na tym samym
   pergaminie, wiec zlota nazwa z czarnym konturem odstawala od reszty. */
.boostedName {
	display: block;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #5f4d41;
	text-shadow: none;
}

.boostedRow:hover .boostedName {
	color: #4e3131;
}

.boostedBonus {
	display: block;
	color: #5a2800;
	font: 400 10px Verdana, Arial, "Times New Roman", sans-serif;
	text-shadow: none;
}

.boostedPusto {
	padding: 8px 10px;
	font-size: 11px;
	color: #5a2800;
}