/* =====================================================
   RESET B�SICO E CONFIGURA��O GLOBAL
   ===================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    background-color: #061222;
    background-image: url('/layouts/tibiacom/images/Wallpaper/default12.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Remove interfer�ncias de containers antigos */
#MainHelper1,
#MainHelper2,
#ArtworkHelper1,
#ArtworkHelper2,
#Bodycontainer,
#ContentRow {
    margin: 0;
    padding: 0;
}

/* =====================================================
   CONTAINER PRINCIPAL DO SITE (CENTRALIZADO)
   ===================================================== */
#site-wrapper {
    width: 1280px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* =====================================================
   GRID PRINCIPAL (SIDEBAR + CONTE�DO + SIDEBAR)
   ===================================================== */
#layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-top: 5px;
}

/* =====================================================
   SIDEBAR ESQUERDA
   ===================================================== */
.sidebar-left {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   CONTE�DO CENTRAL
   ===================================================== */
/* Reverted Glassmorphism */

/* =====================================================
   SIDEBAR DIREITA
   ===================================================== */
.sidebar-right {
    width: 260px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =====================================================
   ELEMENTOS VISUAIS
   ===================================================== */
.sidebar-left img,
.sidebar-right img {
    max-width: 100%;
    height: auto;
}

.Themebox {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

/* =====================================================
   SHOP / OFERTAS
   ===================================================== */
#offerRot {
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 5px 0 15px;
}

/* =====================================================
   ARTWORK / CAIXAS LATERAIS
   ===================================================== */
#RightArtwork {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#TopLevelBox {
    width: 180px;
    height: 380px;
    margin: 0 auto 20px;
    padding-top: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#TopLevelBox .ThemeboxContent {
    display: flex;
    justify-content: center;
}

/* =====================================================
   OVERLAY ESCURO (EFEITO PROFISSIONAL)
   ===================================================== */

.frags {
    position: absolute;
    right: -20px;
    top: 70px;
    width: auto;
    display: block;
    text-align: center;
    text-decoration: none;

    /* Fonte e cor */
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.1;
    color: #FFD700;
    /* Dourado */

    /* Vertical (cima pra baixo) */
    writing-mode: vertical-rl;
    text-orientation: upright;

    /* Fundo com degradê e borda dourada */
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid red;
    border-radius: 12px;

    /* Sombra pra dar profundidade */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);

    /* Espaço interno */
    padding: 8px 5px;

    /* Transição suave */
    transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.frags,
.frags:link,
.frags:visited,
.frags:hover,
.frags:active {
    color: red !important;
}

/* Efeito ao passar mouse */
.frags:hover {
    /* Clareia um pouco o degradê */
    background: linear-gradient(180deg, #444 0%, #222 100%);
}







.view-button-text {
    position: absolute;
    right: -20px;
    top: 0px;
    width: auto;
    display: block;
    text-align: center;
    text-decoration: none;

    /* Fonte e cor */
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.1;
    color: #FFD700;
    /* Dourado */

    /* Vertical (cima pra baixo) */
    writing-mode: vertical-rl;
    text-orientation: upright;

    /* Fundo com degradê e borda dourada */
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #FFD700;
    border-radius: 12px;

    /* Sombra pra dar profundidade */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);

    /* Espaço interno */
    padding: 8px 5px;

    /* Transição suave */
    transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text,
.view-button-text:link,
.view-button-text:visited,
.view-button-text:hover,
.view-button-text:active {
    color: #FFD700 !important;
}

/* Efeito ao passar mouse */
.view-button-text:hover {
    /* Clareia um pouco o degradê */
    background: linear-gradient(180deg, #444 0%, #222 100%);
}


.view-button-text2 {
    position: absolute;
    right: -20px;
    top: 0px;
    width: auto;
    display: block;
    text-align: center;
    text-decoration: none;

    /* Fonte e cor */
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.1;
    color: #FFD700;
    /* Dourado */

    /* Vertical (cima pra baixo) */
    writing-mode: vertical-rl;
    text-orientation: upright;

    /* Fundo com degradê e borda dourada */
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #FFD700;
    border-radius: 12px;

    /* Sombra pra dar profundidade */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);

    /* Espaço interno */
    padding: 8px 5px;

    /* Transição suave */
    transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text2,
.view-button-text2:link,
.view-button-text2:visited,
.view-button-text2:hover,
.view-button-text2:active {
    color: #FFD700 !important;
}

/* Efeito ao passar mouse */
.view-button-text2:hover {
    /* Clareia um pouco o degradê */
    background: linear-gradient(180deg, #444 0%, #222 100%);
}








.view-button-text3 {
    position: absolute;
    right: -20px;
    top: 70px;
    width: auto;
    display: block;
    text-align: center;
    text-decoration: none;

    /* Fonte e cor */
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.1;
    color: #FFD700;
    /* Dourado */

    /* Vertical (cima pra baixo) */
    writing-mode: vertical-rl;
    text-orientation: upright;

    /* Fundo com degradê e borda dourada */
    background: linear-gradient(180deg, #333 0%, #111 100%);
    border: 1px solid #05ff12;
    border-radius: 12px;

    /* Sombra pra dar profundidade */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);

    /* Espaço interno */
    padding: 8px 5px;

    /* Transição suave */
    transition: all 0.2s ease;
}

/* Forçar cor dourada em todos estados do link */
.view-button-text3,
.view-button-text3:link,
.view-button-text3:visited,
.view-button-text3:hover,
.view-button-text3:active {
    color: #05ff12 !important;
}

/* Efeito ao passar mouse */
.view-button-text3:hover {
    /* Clareia um pouco o degradê */
    background: linear-gradient(180deg, #444 0%, #222 100%);
}







.marketButton {
    display: inline-block;
    cursor: pointer;
    /* o cursor de "mãozinha" ao passar */
    transition: transform 0.3s ease;
    /* se quiser também efeito de sombra ou algo mais, pode adicionar aqui */
}

.marketButton:hover {
    transform: translateY(-5px);
    /* move um pouco pra cima; você pode usar scale(), ou combinar:
     transform: scale(1.05) translateY(-3px); 
  */
}

.itemStrokeBelow {
    color: #FFF;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
        -1px 1px 0 #000, 1px 1px 0 #000;
    position: static !important;
    pointer-events: auto !important;
    padding-top: 0 !important;
}

.boxmarket {
    margin: 3px;
    width: 32px;
    height: 50px;
    /* ou 42, 45... o que achar melhor */
    background: rgba(155, 155, 155, 0.53);
    border-radius: 10px;
    border: 1.5px solid #434040;

}

.xpPotionButton {
    background: linear-gradient(to bottom, #ffcc33 0%, #ff9900 100%) !important;
    border: 1px solid #cc6600 !important;
    border-radius: 5px;
    color: #fff !important;
    font-weight: bold;
    padding: 5px 10px;
    /* Remova margin-left: 5px; */
    cursor: pointer;
    text-shadow: 1px 1px 0 #cc6600;
}

.xpPotionButton:hover {
    background: linear-gradient(to bottom, #ffdb66 0%, #ff9900 100%);
}

.ExpPotionButton {
    background: linear-gradient(to bottom, #32CD32 50%, #00FF00 100%) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #006400 !important;
    border-radius: 5px;
    color: #fff !important;
    font-weight: bold;
    padding: 5px 10px;
    /* Remova margin-left: 5px; */
    cursor: pointer;
    text-shadow: 1px 1px 0 #006400;
}

.ExpPotionButton:hover {
    background: linear-gradient(to bottom, #32CD32 50%, #00FF00 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.search {
    background: linear-gradient(to bottom, #FF4500 50%, #FF8C00 100%) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #FF0000 !important;
    border-radius: 5px;
    color: #fff !important;
    font-weight: bold;
    padding: 5px 10px;
    /* Remova margin-left: 5px; */
    cursor: pointer;
    text-shadow: 1px 1px 0 #FF0000;
}

.search:hover {
    background: linear-gradient(to bottom, #FF4500 50%, #FF8C00 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes piscarBrilho {
    0% {
        /* Vermelho */
        text-shadow: 0 0 6px #ff0000,
            0 0 10px #ff0000,
            0 0 20px #ff0000;
    }

    20% {
        /* Laranja */
        text-shadow: 0 0 6px #ff9900,
            0 0 10px #ff9900,
            0 0 20px #ff9900;
    }

    40% {
        /* Amarelo */
        text-shadow: 0 0 6px #ffff00,
            0 0 10px #ffff00,
            0 0 20px #ffff00;
    }

    60% {
        /* Verde */
        text-shadow: 0 0 6px #00ff00,
            0 0 10px #00ff00,
            0 0 20px #00ff00;
    }

    80% {
        /* Azul */
        text-shadow: 0 0 6px #0000ff,
            0 0 10px #0000ff,
            0 0 20px #0000ff;
    }

    100% {
        /* Roxo */
        text-shadow: 0 0 6px #ff00ff,
            0 0 10px #ff00ff,
            0 0 20px #ff00ff;
    }
}


/* DemoWiki em destaque */
.demoWikiDestacado {
    color: #f6f609;
    text-shadow: 0 0 6px red, 0 0 10px red, 0 0 20px red;
    animation: piscarBrilho 7.0s infinite alternate;

    font-size: 15px;
    /* Aumenta a letra */
    display: inline-block;
    margin: 0;
    /* Remove qualquer espaçamento extra */
    padding: 0;
}

#submenu_demowiki {
    /* Ajuste se quiser tirar recuo extra */
    margin-left: 0;
    padding-left: 0px;
    /* teste 2px, 0px, etc. pra ver o melhor alinhamento */
}





.med {
    line-height: 1.4em;
}

.guild_name a:hover {
    color: #004294;
}

.guild_name a:active {
    color: #004294;
}

.guild_name a:link {
    color: #004294;
}

.guild_name a:visited {
    color: #004294;
}

.titulo_topico {
    color: #5f2800;
    font-size: 11px;
}



.titulo_topico a:hover {
    color: #004294;
    font-size: 11px;
}

.titulo_topico a:active {
    color: #004294;
    font-size: 11px;
}

.titulo_topico a:link {
    color: #004294;
    font-size: 11px;
}

.titulo_topico a:visited {
    color: #004294;
    font-size: 11px;
}

.tcat {
    background: #505050 url(/images/forum/gradient.png) repeat-x scroll 50% 10%;
    color: #FFF !important;
    font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif
}




.explanation {
    background-color: #D4C0A1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefcaf), color-stop(1, #fffeda));
    background-image: -webkit-linear-gradient(top, #D4C0A1, #fffeda);
    background-image: -moz-linear-gradient(top, #D4C0A1, #fffeda);
    background-image: -ms-linear-gradient(top, #D4C0A1, #fffeda);
    background-image: -o-linear-gradient(top, #D4C0A1, #fffeda);
    padding: 6px;
    margin: 0 0 6px;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcaf', endColorstr='#fffeda', GradientType=0);
    border-radius: 7px
}

.explanation a:hover {
    color: #004294;
    font-size: 11px;
}

.explanation a:active {
    color: #004294;
    font-size: 11px;
}

.explanation a:link {
    color: #004294;
    font-size: 11px;
}

.explanation a:visited {
    color: #004294;
    font-size: 11px;
}

.fr {
    float: right
}

a.index {
    background: url(/images/forum/_index.png) no-repeat;
    padding: 2px 5px 1px 20px
}

a.lastpost {
    background: url(/images/forum/lastpost.gif) no-repeat center left;
    padding: 4px;
    border: 0 solid #A8A8A8
}

.destaqueshop {
    color: #5f2800;
    border: 2px dashed #5f4d41;
    background: #fff600;
    width: 96%;
    font-size: 100%;
    border-radius: 2px;
    padding: 1%;
    margin: 0;
    text-align: left;
}

.destaqueshop img {
    float: left;
    padding-right: 10px;
}

.destaqueshop b {
    float: left;
    padding-right: 4px;
    color: brown;
}

.crieumaconta {
    background: url("images/buttons/criar_conta.png");
    height: 43px;
    width: 133px;
    left: 355px;
    margin-top: -43px;
    border: 0;
    outline: 0;
    position: relative;
    -moz-outline: 0;
    cursor: url(/images/cursor_hover.png), auto
}

.crieumaconta:hover {
    background: url("images/buttons/criar_conta_over.png");
}

.crieumaconta:active {
    background: url("images/buttons/criar_conta_over.png");
}

/*-- Novos */
.servertext {
    font-size: 13px;
    text-align: left;
    margin: 14px;
    line-height: 13.5pt
}

.serverip {
    font-size: 13px;
    text-align: center;
    margin: 14px;
    line-height: 13.5pt
}

.button-reflexo-resets {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 105px;
    top: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-reflexo-direita {
    width: 32px;
    height: 32px;
    position: absolute;
    margin-left: 15px;
    margin-top: 35px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.createaccount {
    margin: 0;
    z-index: 1;
    border: 2px solid #5f4d41;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .6);
    padding: 17px 15px 15px 45px;
    font-weight: 600;
    background: #d4c0a1;
}

.characters {
    margin: 0;
    z-index: 1;
    border: 2px solid #5f4d41;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .6);
    padding: 17px 15px 15px 45px;
    font-weight: 600;
    background: #d4c0a1;
}

.DButtonText {
    top: 0;
    height: 25px
}

.DButtonText,
.DButtonTextInputs {
    left: 0;
    z-index: 20;
    position: absolute;
    width: 135px
}

.ButtonTextInputs {
    text-align: center;
    overflow: hidden;
    font: 400 9pt serif;
    color: #f4cc6a;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #530600;
    text-decoration: none;
    display: block;
    border-bottom: 0px solid #af0400;
    height: 22px;
    top: 6px
}

.aviso {
    color: #5f2800;
    border: 2px dashed #5f4d41;
    background: #fff600;
    width: 96%;
    font-size: 100%;
    border-radius: 2px;
    padding: 1%;
    margin: 0;
    text-align: red;
}

.aviso img {
    float: left;
    padding-right: 10px;
}

.aviso b {
    float: left;
    padding-right: 4px;
    color: red;
}

/* Aviso no Create Account */

.infoacc {
    text-align: left;
    color: #5f2800;
    border: 2px dashed #5f4d41;
    background: #d4c0a1;
    width: 96%;
    font-size: 100%;
    border-radius: 2px;
    padding: 1%;
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.infoacc img {
    float: left;
    padding-right: 10px;
    width: 30px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.infoacc b {
    float: left;
    padding-right: 4px;
    color: brown;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}



.methodpay {
    color: #5f2800;
    border: 2px dashed #5f4d41;
    background: #fff600;
    width: 96%;
    font-size: 100%;
    border-radius: 2px;
    padding: 1%;
    margin: 0;
    text-align: left;
}

.methodpay img {
    float: left;
    padding-right: 10px;
}

.methodpay b {
    float: left;
    padding-right: 4px;
    color: brown;
}

.payment-method {
    display: flex;
    align-items: center;
    /* Alinha os itens verticalmente */
    justify-content: flex-start;
    /* Mantém os itens à esquerda */
    border: 2px solid #5f4d41;
    background-color: #fdf5e6;
    width: 95.5% !important;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.payment-method:hover {
    background-color: #f4e3c0;
}

.payment-method img {
    height: 50px;
    width: auto;
    margin-right: 15px;
    /* Espaçamento entre a imagem e o texto */
    vertical-align: middle;
}

.payment-method td {
    display: flex;
    align-items: center;
    /* Centraliza verticalmente os itens na célula */
}

.payment-method .text {
    text-align: center;
    /* Centraliza o texto */
    flex-grow: 1;
    /* Faz o texto ocupar o espaço disponível */

}

.payment-method input[type="radio"] {
    margin-right: 15px;
    vertical-align: middle;
}

.promo-description,
.promo-text {
    font-weight: normal;
}

.inline-image-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.inline-image-text img {
    margin-right: 5px;
}

.highlight-red {
    color: red;
    font-weight: bold;
}

.text-orange {
    color: #FF6700;
}



/* Estilos para a Tabela de Promoções */
.promo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.promo-table th {
    background-color: #00274D;
    /* Cabeçalho azul escuro */
    color: #fff;
    /* Texto branco */
    font-size: 22px;
    /* Tamanho da fonte aumentado */
    text-align: left;
    padding: 10px;
}

.promo-table td {
    background-color: #fdf5e6;
    /* Fundo neutro */
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.promo-description {
    color: #6C757D;
    /* Cinza para descrições */
    font-size: 18px;
}

.promo-text {
    color: #28A745;
    /* Verde vivo para o valor promocional */
    font-weight: bold;
}

.promo-highlight {
    color: #FF6700;
    /* Laranja vibrante para destaques */
    font-weight: bold;
}

/* Estilo de Botão */
.action-button {
    background-color: #DC3545;
    /* Vermelho forte para chamar ação */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.action-button:hover {
    background-color: #c82333;
    /* Tom mais escuro no hover */
}

/* Estilos para métodos de pagamento */
.payment-method {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 2px solid #5f4d41;
    background-color: #fdf5e6;
    width: 96%;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.payment-method:hover {
    background-color: #f4e3c0;
}

.payment-method img {
    height: 50px;
    width: auto;
    margin-right: 15px;
    vertical-align: middle;
}

.payment-method td {
    display: flex;
    align-items: center;
}

.payment-method .text {
    text-align: center;
    flex-grow: 1;
}

.payment-method input[type="radio"] {
    margin-right: 15px;
    vertical-align: middle;
}






.TopGuildsText {
    top: 6px;
    text-align: center;
    font-size: 11pt;
    font-weight: 700;
    color: #fff
}

.TopGuildsText {
    position: relative
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.serverinfo {
    display: block;
    text-align: center;
    font-size: 13px;
    margin: 1px;
    color: #5a2801;
    padding: 11px 0
}

.servertext {
    font-size: 13px;
    text-align: left;
    margin: 14px;
    line-height: 13.5pt
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}

.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
    content: "";
    display: table;
    border-collapse: collapse
}

.ui-helper-clearfix:after {
    clear: both
}

.ui-helper-clearfix {
    min-height: 0
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}

.ui-front {
    z-index: 100
}

.ui-state-disabled {
    cursor: pointer !important;
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none
}

.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle {
    display: none
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}

.ui-resizable-ne {
    cursor: auto;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action: none
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted #000
}

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    margin: 2px 0 0;
    padding: .5em .5em .5em .7em;
    min-height: 0;
    font-size: 100%
}

.ui-accordion .ui-accordion-icons,
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2.2em
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    overflow: visible
}

.ui-button,
.ui-button:active,
.ui-button:hover,
.ui-button:link,
.ui-button:visited {
    text-decoration: none
}

.ui-button-icon-only {
    width: 2.2em
}

button.ui-button-icon-only {
    width: 2.4em
}

.ui-button-icons-only {
    width: 3.4em
}

button.ui-button-icons-only {
    width: 3.7em
}

.ui-button .ui-button-text {
    display: block;
    line-height: normal
}

.ui-button-text-only .ui-button-text {
    padding: .4em 1em
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em
}

input.ui-button {
    padding: .4em 1em
}

.ui-button-icon-only .ui-icon,
.ui-button-icons-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px
}

.ui-button-icons-only .ui-button-icon-primary,
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary {
    left: .5em
}

.ui-button-icons-only .ui-button-icon-secondary,
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary {
    right: .5em
}

.ui-buttonset {
    margin-right: 7px
}

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em
}

button.ui-button::-moz-focus-inner,
input.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em
}

.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
    top: 1px
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker .ui-datepicker-next {
    right: 2px
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    margin: 0 0 .4em
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0
}

.ui-datepicker td {
    border: 0;
    padding: 1px
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    width: auto;
    overflow: visible
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-multi .ui-datepicker-group,
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left
}

.ui-datepicker.ui-datepicker-multi {
    width: auto
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px
}

.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0;
    padding: 1px;
    height: 20px
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: 0 0;
    overflow: auto
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px
}

#MenuBottom,
.ui-slider-vertical .ui-slider-range-min,
.ui-spinner-down {
    bottom: 0
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0
}

.ui-menu .ui-menu {
    position: absolute
}

.ui-menu .ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px .4em;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    min-height: 0;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0
}

.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
    margin: -1px
}

.ui-menu-icons {
    position: relative
}

.ui-menu-icons .ui-menu-item {
    padding-left: 2em
}

.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0
}

.ui-menu .ui-menu-icon {
    left: auto;
    right: 0
}

.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%
}

.ui-progressbar .ui-progressbar-overlay {
    background: url(images/demowiki/animated-overlay.gif);
    height: 100%;
    filter: alpha(opacity=25);
    opacity: .25
}

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px .4em;
    margin: .5em 0 0;
    height: auto;
    border: 0
}

.ui-selectmenu-open {
    display: block
}

.ui-selectmenu-button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.ui-selectmenu-button span.ui-icon {
    right: .5em;
    left: auto;
    margin-top: -8px;
    position: absolute;
    top: 50%
}

.SmallBox .BoxFrameVerticalRight,
.ui-slider-horizontal .ui-slider-range-max {
    right: 0
}

.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: left;
    padding: .4em 2.1em .4em 1em;
    display: block;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ui-slider {
    position: relative;
    text-align: left
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    -ms-touch-action: none;
    touch-action: none
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit
}

.ui-slider-horizontal {
    height: .8em
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0
}

.ui-slider-vertical {
    width: .8em;
    height: 100px
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0
}

.ui-spinner-input {
    border: none;
    background: 0 0;
    color: inherit;
    padding: 0;
    margin: .2em 22px .2em .4em
}

.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: pointer;
    display: block;
    overflow: hidden;
    right: 0
}

.Toplevelbox,
.top_level {
    display: block;
    overflow: visible
}

.top_level1 {
    display: block;
    overflow: visible
}

.ui-spinner a.ui-spinner-button {
    border-top: none;
    border-bottom: none;
    border-right: none
}

.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0
}

.ui-spinner-up {
    top: 0
}

.ui-spinner .ui-icon-triangle-1-s {
    background-position: -65px -16px
}

.ui-tabs {
    position: relative;
    padding: .2em
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: text
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0 0
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa
}

body .ui-tooltip {
    border-width: 2px
}

.ui-widget {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em
}

.ui-widget .ui-widget {
    font-size: 1em
}

.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em
}

.ui-widget-content {
    border: 1px solid #796038;
    background: url(images/demowiki/ui-bg_flat_0_e6ceac_40x100.png) 50% 50% repeat-x #e6ceac;
    color: #5A2800
}

.ui-widget-content a {
    color: #5A2800
}

.ui-widget-header {
    border: 1px solid #796038;
    background: url(images/demowiki/ui-bg_diagonals-thick_10_bc9251_40x40.png) 50% 50% #bc9251;
    color: #fff;
    font-weight: 700
}

.ui-widget-header a {
    color: #fff
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_c8af7e_500x100.png) 50% 50% repeat-x #c8af7e;
    font-weight: 700;
    color: #362a21
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #362a21;
    text-decoration: none
}

.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_f5f0e5_500x100.png) 50% 50% repeat-x #f5f0e5;
    font-weight: 700;
    color: #9c5619
}

.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #9c5619;
    text-decoration: none
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #76644b;
    background: url(images/demowiki/ui-bg_gloss-wave_50_f7ecd6_500x100.png) 50% 50% repeat-x #f7ecd6;
    font-weight: 700;
    color: #623206
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #623206;
    text-decoration: none
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #cca037;
    background: url(images/demowiki/ui-bg_highlight-hard_75_f5f5b5_1x100.png) 50% top repeat-x #f5f5b5;
    color: #060200
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #060200
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #f8893f;
    background: url(layouts/tibiacom/images/demowiki/ui-bg_highlight-hard_65_fee4bd_1x100.png) 50% top repeat-x #fee4bd;
    color: #592003
}

.ui-state-error a,
.ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error a,
.ui-widget-header .ui-state-error-text {
    color: #592003
}

a,
input:focus {
    outline: 0
}

a,
input::-moz-focus-inner {
    border: 0
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: 700
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: 400
}

#MenuColumn,
.Content a,
.Content a:hover,
.Content th,
.top_level {
    font-weight: 700
}

.top_level1 {
    font-weight: 700
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35)
}

.ui-icon {
    width: 16px;
    height: 16px
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/demowiki/ui-icons_c47a23_256x240.png)
}

.ui-widget-header .ui-icon {
    background-image: url(images/demowiki/ui-icons_ffffff_256x240.png)
}

.ui-state-default .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-hover .ui-icon {
    background-image: url(images/demowiki/ui-icons_f08000_256x240.png)
}

.ui-state-active .ui-icon {
    background-image: url(images/demowiki/ui-icons_f35f07_256x240.png)
}

.ui-state-highlight .ui-icon {
    background-image: url(images/demowiki/ui-icons_cb672b_256x240.png)
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/demowiki/ui-icons_ff7519_256x240.png)
}

.ui-icon-blank {
    background-position: 16px 16px
}

.ui-icon-carat-1-n {
    background-position: 0 0
}

.ui-icon-carat-1-ne {
    background-position: -16px 0
}

.ui-icon-carat-1-e {
    background-position: -32px 0
}

.ui-icon-carat-1-se {
    background-position: -48px 0
}

.ui-icon-carat-1-s {
    background-position: -64px 0
}

.ui-icon-carat-1-sw {
    background-position: -80px 0
}

.ui-icon-carat-1-w {
    background-position: -96px 0
}

.ui-icon-carat-1-nw {
    background-position: -112px 0
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}

.ui-icon-arrow-4 {
    background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}

.ui-icon-extlink {
    background-position: -32px -80px
}

.ui-icon-newwin {
    background-position: -48px -80px
}

.ui-icon-refresh {
    background-position: -64px -80px
}

.ui-icon-shuffle {
    background-position: -80px -80px
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

.ui-icon-folder-open {
    background-position: -16px -96px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-note {
    background-position: -64px -96px
}

.ui-icon-mail-closed {
    background-position: -80px -96px
}

.ui-icon-mail-open {
    background-position: -96px -96px
}

.ui-icon-suitcase {
    background-position: -112px -96px
}

.ui-icon-comment {
    background-position: -128px -96px
}

.ui-icon-person {
    background-position: -144px -96px
}

.ui-icon-print {
    background-position: -160px -96px
}

.ui-icon-trash {
    background-position: -176px -96px
}

.ui-icon-locked {
    background-position: -192px -96px
}

.ui-icon-unlocked {
    background-position: -208px -96px
}

.ui-icon-bookmark {
    background-position: -224px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-flag {
    background-position: -16px -112px
}

.ui-icon-calendar {
    background-position: -32px -112px
}

.ui-icon-cart {
    background-position: -48px -112px
}

.ui-icon-pencil {
    background-position: -64px -112px
}

.ui-icon-clock {
    background-position: -80px -112px
}

.ui-icon-disk {
    background-position: -96px -112px
}

.ui-icon-calculator {
    background-position: -112px -112px
}

.ui-icon-zoomin {
    background-position: -128px -112px
}

.ui-icon-zoomout {
    background-position: -144px -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-wrench {
    background-position: -176px -112px
}

.ui-icon-gear {
    background-position: -192px -112px
}

.ui-icon-heart {
    background-position: -208px -112px
}

.ui-icon-star {
    background-position: -224px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-cancel {
    background-position: 0 -128px
}

.ui-icon-plus {
    background-position: -16px -128px
}

.ui-icon-plusthick {
    background-position: -32px -128px
}

.ui-icon-minus {
    background-position: -48px -128px
}

.ui-icon-minusthick {
    background-position: -64px -128px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-closethick {
    background-position: -96px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-lightbulb {
    background-position: -128px -128px
}

.ui-icon-scissors {
    background-position: -144px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-copy {
    background-position: -176px -128px
}

.ui-icon-contact {
    background-position: -192px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-alert {
    background-position: 0 -144px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-notice {
    background-position: -32px -144px
}

.ui-icon-help {
    background-position: -48px -144px
}

.ui-icon-check {
    background-position: -64px -144px
}

.ui-icon-bullet {
    background-position: -80px -144px
}

.ui-icon-radio-on {
    background-position: -96px -144px
}

.ui-icon-radio-off {
    background-position: -112px -144px
}

.ui-icon-pin-w {
    background-position: -128px -144px
}

.ui-icon-pin-s {
    background-position: -144px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-pause {
    background-position: -16px -160px
}

.ui-icon-seek-next {
    background-position: -32px -160px
}

.ui-icon-seek-prev {
    background-position: -48px -160px
}

.ui-icon-seek-end {
    background-position: -64px -160px
}

.ui-icon-seek-first,
.ui-icon-seek-start {
    background-position: -80px -160px
}

.ui-icon-stop {
    background-position: -96px -160px
}

.ui-icon-eject {
    background-position: -112px -160px
}

.ui-icon-volume-off {
    background-position: -128px -160px
}

.ui-icon-volume-on {
    background-position: -144px -160px
}

.ui-icon-power {
    background-position: 0 -176px
}

.ui-icon-signal-diag {
    background-position: -16px -176px
}

.ui-icon-signal {
    background-position: -32px -176px
}

.ui-icon-battery-0 {
    background-position: -48px -176px
}

.ui-icon-battery-1 {
    background-position: -64px -176px
}

.ui-icon-battery-2 {
    background-position: -80px -176px
}

.ui-icon-battery-3 {
    background-position: -96px -176px
}

.ui-icon-circle-plus {
    background-position: 0 -192px
}

.ui-icon-circle-minus {
    background-position: -16px -192px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px
}

.ui-icon-circle-check {
    background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}

.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
    border-top-left-radius: 2px
}

.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
    border-top-right-radius: 2px
}

.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
    border-bottom-left-radius: 2px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
    border-bottom-right-radius: 2px
}

.ui-widget-overlay {
    background: url(images/demowiki/ui-bg_flat_75_796038_40x100.png) 50% 50% repeat-x #796038;
    opacity: .5;
    filter: Alpha(Opacity=50)
}

.ui-widget-shadow {
    margin: -4px 0 0 -4px;
    padding: 4px;
    background: url(images/demowiki/ui-bg_flat_90_7c5b38_40x100.png) 50% 50% repeat-x #7c5b38;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-radius: 4px
}

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

.OptionContainer label {
    vertical-align: middle;
}

/* a,
div,
html,
input,
body,
frame,
iframe,
frameset,
Bodycontainer {
    cursor: url(images/demowiki/cursor.png), auto
} */
a:visited,
a:link,
a:focus,
a:active,
a:hover {
    cursor: url(images/demowiki/cursor_hover.png), auto
}

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

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

#MainHelper1 {
    position: relative;
    text-align: center;
    top: 0px;
    height: 100%;
    min-width: 1000px;
    overflow: visible;
}

#MainHelper2 {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    height: 100%;
    max-width: 1200px;
    overflow: visible;
    padding-top: 155px;
}

#ArtworkHelper1 {
    position: absolute;
    max-width: 1200px;
    text-align: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: visible;
    margin-left: -800px;
}

#ArtworkHelper2 {
    position: absolute;
    text-align: center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: visible;
    width: 1600px;
    margin-right: auto;
    margin-left: 50%;
}

#HeaderArtworkDiv {
    position: absolute;
    text-align: center;
    background-position: top center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    top: 0px;
    height: 800px;
    width: 100%;
}

/* Top - Ranks */

a.topfont,
a:hover.topfont {
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
}

.topleveltext {
    z-index: 99;
    padding: 3px;
    position: absolute;
    height: 24px;
    width: 100%;
    top: 2px;
    left: 7px;
    color: #ffd698;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font: 100 14pt Fondamento, Arial, Times New Roman, sans-serif;
    -ms-user-select: none;
    user-select: none;
    cursor: default
}

.topleveltext1 {
    z-index: 99;
    padding: 3px;
    position: absolute;
    height: 24px;
    width: 100%;
    top: 300px;
    left: 7px;
    color: #ffd698;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font: 100 14pt Fondamento, Arial, Times New Roman, sans-serif;
    -ms-user-select: none;
    user-select: none;
    cursor: default
}

#Footer a:focus,
#Topbar a,
a.topfont,
a:hover.topfont {
    text-decoration: none
}

a.topfont {
    color: #fc3
}

a:hover.topfont {
    color: #fff
}

/* container to implement min/max width */

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

#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 {
    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: 196px;
    z-index: 5;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    border: 0px;
}

#LeftArtwork #LogoLink {
    position: absolute;
    bottom: 12px;
    left: 60px;
    height: 20px;
    width: 40px;
    z-index: 99;
    cursor: url(images/demowiki/cursor_hover.png), auto;
}

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

#RightArtwork #Monster {
    position: absolute;
    height: 80px;
    width: 80px;
    top: -145px;
    left: -9px;
    z-index: 15;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

#PedestalAndOnline {
    position: absolute;
    left: -10px;
    top: -105px;
    width: 153px;
    height: 107px;
}

#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: url(images/demowiki/cursor_hover.png), auto
}

/** -------------------------------
*  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: url(images/demowiki/cursor_hover.png), auto
}

#Loginbox #LoginstatusText_1 {
    visibility: visible;
}

#Loginbox #LoginstatusText_2 {
    visibility: hidden;
}

#LoginBox #LoginButtonContainer {
    position: relative;
    height: 39px;
    width: 160px;
    left: 5px;
    background-repeat: repeat-y;
    z-index: 99;
}

#PlayNowContainer {
    position: absolute;
    width: 150px;
    height: 37px;
    top: 1px;
    left: 5px;
}

#PlayNowContainer form {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.BigBoldText {
    font-weight: bold;
    font-size: 7pt;
}

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

#Eyes {
    position: absolute;
    height: 13px;
    width: 57px;
    top: -400px;
    left: -466px;
    z-index: 15;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

.buttontextt,
.menufonts {
    text-align: center;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none
}

.menufonts {
    padding: 3px;
    position: absolute;
    height: 24px;
    width: 116px;
    top: 5px;
    left: 38px;
    color: #ffd698;
    font-family: Fondamento, cursive;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font-weight: 400;
    font-size: 18px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#Menu {
    position: relative;
    left: 5px;
    top: 0px;
    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: url(images/demowiki/cursor_hover.png), auto
}

.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: #161616;
    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 #3c3c3c;
    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;
}

/* "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 #a43c06;
    border-right: 2px solid #a43c06;
    background-color: transparent !important;
    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;
}

.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: url(images/demowiki/cursor_hover.png), auto
}

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

.Color-Success {
    color: rgb(51, 201, 90);
}

.Content .Div-Right {
    position: absolute;
    top: 12px;
    right: 0px;
    text-align: right;
    margin: 0;
    font-family: Helvetica, Verdana, Arial;
    z-index: 999;
}

.Content .Div-Right p {
    position: absolute;
    color: white;
    font-size: 12px;
    margin: 0 15px;
    padding: 0;
    top: 0;
}

.Content .Div-Right p a {
    color: #ccc !important;
    font-family: Helvetica, Verdana, Arial;
    font-weight: normal;
}

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

.content_box {
    z-index: 99;
    padding: 3px;
    position: absolute;
    height: 24px;
    width: 100%;
    top: 3px;
    text-align: left;
    left: 1%;
    color: #ffd698;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #2c2c2c, -1px 1px 0 #000, 1px 1px 0 #000;
    font: 100 15pt Fondamento, Arial, Times New Roman, sans-serif;
    -ms-user-select: none;
    user-select: none;
    cursor: default
}

.Content .ScrollableTextBox {
    height: 125px;
    padding: 3px;
    margin-right: 5px;
    overflow-y: scroll;
    font-family: Courier New;
    border: 1px solid grey;
    font-weight: normal !important;
    background-image: url("/TibiaWebsite_refactoring/html/images/demowiki/global/content/scroll.gif");
}

.Content .BoxContent .ScrollableTextBox td {
    font-family: Courier New;
}

/** -------------------------------
*  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: url(images/demowiki/cursor_hover.png), auto
}

#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: url(images/demowiki/cursor_hover.png), auto
}

#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;
    text-align: center;
}

#Themeboxes #FansiteBox {
    position: relative;
    height: 188px;
    text-align: center;
}

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

#Themeboxes #FansiteLogo {
    position: relative;
    height: 100px;
    width: 150px;
    top: 8px;
    border: 0;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

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

#Themeboxes #NetworksBox {
    position: relative;
    height: 354px;
}

#Themeboxes #NetworksBox #FacebookBlock {
    position: relative;
    top: 92px;
    height: 113px;
}

#Themeboxes #NetworksBox #FacebookLikeBox {
    position: relative;
    left: 27px;
    top: 30px;
    height: 60px;
    width: 115px;
    overflow: hidden;
}

#Themeboxes #NetworksBox #FacebookLikeBox div {
    position: relative;
    left: -1px;
    top: 10px;
}

#Themeboxes #NetworksBox #FacebookSendBox {
    position: absolute;
    left: 92px;
    top: 14px;
    width: 50px;
}

#Themeboxes #NetworksBox #FacebookLikes {
    position: relative;
    left: 14px;
    top: 10px;
    width: 155px;
    left: 13px;
    overflow: hidden;
}

#Themeboxes #NetworksBox #FacebookLikes div {
    position: relative;
    left: -69px;
}

#Themeboxes #NetworksBox #TwitterBlock {
    position: relative;
    top: 42px;
    text-align: center;
}

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

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

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

#BrowserIssuesBox #DownloadClientContainer {
    float: right;
    text-align: center;
    margin-right: 5px;
}

#BrowserIssuesBox #DownloadClientContainer img {
    height: 45px;
}

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

.CaptionContainer .CaptionInnerContainer {
    position: relative;
    background-color: #5f4d41;
    width: 100%;
    height: 100%;
    padding-top: 3px;
    padding-bottom: 4px;
}

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

.CaptionContainer .CaptionEdgeLeftTop {
    position: absolute;
    width: 5px;
    height: 5px;
    top: -2px;
    left: -2px;
    z-index: 50;
}

.CaptionContainer .CaptionEdgeRightTop {
    position: absolute;
    width: 5px;
    height: 5px;
    top: -2px;
    right: -2px;
    z-index: 50;
}

.CaptionContainer .CaptionEdgeLeftBottom {
    position: absolute;
    width: 5px;
    height: 5px;
    left: -2px;
    bottom: -3px;
    z-index: 50;
}

.CaptionContainer .CaptionEdgeRightBottom {
    position: absolute;
    width: 5px;
    height: 5px;
    right: -2px;
    bottom: -3px;
    z-index: 50;
}

.CaptionContainer .CaptionBorderTop {
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0px;
    top: -1px;
}

.CaptionContainer .CaptionBorderBottom {
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0px;
    bottom: -2px;
}

.CaptionContainer .CaptionVerticalLeft {
    position: absolute;
    height: 100%;
    width: 3px;
    left: -1px;
    top: 0px;
}

.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;
    padding-left: 3px;
}

.TableContainer .Table4 .InnerTableContainer {
    width: 100%;
    position: relative;
    margin-top: 3px;
}

.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.TableContainer .RowInnerTableDataBorders td {
    border: 1px solid #faf0d7;
}

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

.TableShadowRightTop {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 4px;
    height: 5px;
    z-index: 98;
}

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

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

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

.Submenuitem {
    background-image: url('../images/menu/submenu-background.gif');
    background-repeat: no-repeat;
    /* Determine proper size or other properties if needed */
}

/* Tabs bevel highlight (only when .InnerTableTab has .Active or aria-selected=true) */
.InnerTableTab {
    position: relative;
    border-radius: 18px;
}
.InnerTableTab.Active::after, .InnerTableTab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.15));
    pointer-events: none;
}
.InnerTableTab.Active, .InnerTableTab[aria-selected="true"] {
    box-shadow: 0 0 14px rgba(212,175,55,0.6), 0 0 0 1px rgba(0,0,0,0.35) inset;
    animation: TabsPulseGold 1.8s ease-in-out infinite;
}
@keyframes TabsPulseGold {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(212,175,55,0.35)); }
    50% { filter: drop-shadow(0 0 10px rgba(212,175,55,0.7)); }
}

.MediumButtonText {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 37px;
    width: 150px;
    z-index: 20;
}

.MediumButtonBackground {
    position: relative;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 37px;
    z-index: 10;
}

.MediumButtonOver {
    position: relative;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 37px;
    visibility: hidden;
    z-index: 15;
}

.MediumButtonForm {
    margin: 0px;
    padding: 0px;
}

.BigButton {
    position: relative;
    width: 135px;
    height: 25px;
    z-index: 10;
}

.BigButtonOver {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 135px;
    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: url(images/demowiki/cursor_hover.png), auto
}

.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 .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: 80px;
    height: 80px;
}

.PostDetailsHelper {
    position: relative;
}

.HNCContainer {
    position: absolute;
    margin-top: -10px;
}

* html .HNCContainer {
    margin-left: -10px;
}

.ThreadClassificationNumberContainer {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 7px;
}

* html .ThreadClassificationNumberContainer {
    margin-left: 0px;
}

#BoardView td {
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 3px;
}

#BoardView .CipPost {
    position: relative;
    height: 100%;
}

.ThreadTitleHeadline {
    position: relative;
    height: 100%;
    width: 798px;
    margin-top: -2px;
}

.ThreadClassificationNumber {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 7px;
    border: 0px;
}

.ThreadTitleHeadline .ThreadClassificationNumber {
    margin-left: -1px;
    margin-top: 3px;
}

.BoardThreadLine {
    margin-left: -61px;
    margin-top: -3px;
    margin-bottom: 0px;
    min-height: 47px;
}

* html .BoardThreadLine {
    margin-top: 0px;
}

* html .BoardThreadLine {
    height: 47px;
}

.BoardThreadLine .CipBorderRight .CipBorderV {
    left: 734px;
}

.Text {
    margin-top: 3px;
    margin-left: 4px;
    margin-bottom: 2px;
    padding: 3px;
    padding-top: 3px;
}

* html .Text {
    margin-top: 0px;
    margin-left: 4px;
}

.BoardThreadLine .Text {
    margin-left: 11px;
    padding-left: 50px;
    padding-top: 13px;
    padding-bottom: 10px;
}

* html .BoardThreadLine .Text {
    padding-left: 55px;
}

.PostReplyLink {
    float: right;
    margin-top: 3px;
}

.HintBox {
    width: 100%;
    margin-top: -3px;
}

.HintBox p {
    margin-top: 0px;
}

.HintBox .BoxButtons {
    width: 135px;
    float: right;
}

#PremiumBoxSpecialOfferHorizontal {
    position: absolute;
    top: 70px;
    left: 13px;
    width: 150px;
    height: 14px;
}

.Container1_PaymentMethod {
    height: 88px;
    width: 165px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px;
    cursor: url(images/demowiki/cursor_hover.png), auto
}

.Container2_PaymentMethod {
    top: 2px;
    left: 2px;
    height: 80px;
    width: 157px;
    background-color: #d5c0a1;
    margin: 2px;
    padding: 2px;
}

/* fixed orphan rules */
/* .some-class { color: red; cursor: help !important; } */

/* helper div */
.HelperDivIndicator {
    position: relative;
    cursor: help;
}

#HelperDivContainer {
    display: none;
    pointer-events: none !important;
    position: absolute;
    width: 225px;
    z-index: 1000;
    color: #5A2800;
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 9pt;
    text-align: left;
    padding: 10px;
    border: 1px double #5A2800;
    margin-left: 8px;
}

#HelperDivContainer .HelperDivArrow {
    position: absolute;
    top: -1px;
    left: -8px;
    width: 8px;
    height: 13px;
}

#HelperDivContainer #HelperDivHeadline {
    font-size: 12pt;
    font-weight: bold;
}

#HelperDivContainer #HelperDivHeadline {
    position: relative;
    white-space: normal;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 15px;
}

#HelperDivContainer .Ornament {
    width: 220px;
}

#HelperDivContainer #HelperDivText {
    text-align: justify;
}

#HelperDivContainer #HelperDivText ul {
    padding-left: 20px;
}

#SuggestCharacterName {
    font-size: 7pt;
    margin-top: -5px;
}

.FB_Identification {
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: none repeat scroll 0 0 #526DA4;
    color: #D8DFEA;
    border: gray;
    font-size: 11px;
    font-weight: bold;
    padding: 2px;
    height: 25px;
    border: 1px solid blue;
}

.FB_Identification div {
    position: relative;
    float: left;
    margin-right: 4px;
}

#FB_ProfileWindow {
    width: 23px;
    height: 23px;
    border: 1px solid blue;
    overflow: hidden;
}

#FB_ProfileWindow img {
    height: 50px !important;
}

#FB_Name {
    top: 5px;
}

#FB_Button {
    top: 1px;
    float: right;
}

#FB_Button div {
    display: inline;
}

.FacebookButtonText {
    position: absolute;
    color: white;
    left: 20px;
    width: 112;
    top: 5px;
    font-size: 11px;
    text-align: center;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    z-index: 15;
}

#FB_LoginButton {
    position: relative;
    width: 68px;
    height: 22px;
    float: right;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    color: #ffffff;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

#FB_LoginButton span {
    position: absolute;
    left: 28px;
    top: 4px;
}

.ButtonText:hover {
    margin-top: 1px;
    margin-left: 1px;
}

#LoginCreateAccountBox p {
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
}

.Toplevelbox {
    top: -4px;
    position: relative;
    margin-bottom: 10px;
    width: 280px;
    height: 200px;
    -ms-user-select: none;
    user-select: none;
}

.Toplevelbox1 {
    top: -4px;
    position: relative;
    margin-bottom: 10px;
    width: 280px;
    height: 200px;
    -ms-user-select: none;
    user-select: none;
}

.top_level {
    position: absolute;
    top: 29px;
    left: 6px;
    height: 290px;
    width: 168px;
    z-index: 20;
    text-align: center;
    padding-top: 6px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 9.2pt;
    color: black;
    font-weight: bold;
    text-align: right;
    text-decoration: inherit;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
    -ms-user-select: none;
    user-select: none;
}

.top_level1 {
    position: absolute;
    margin-top: 0px;
    left: 6px;
    height: 290px;
    width: 168px;
    z-index: 20;
    text-align: center;
    padding-top: 6px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 9.2pt;
    color: black;
    font-weight: bold;
    text-align: right;
    text-decoration: inherit;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.50), 1px -1px 0 rgba(0, 0, 0, 0.50), -1px 1px 0 rgba(0, 0, 0, 0.50), 1px 1px 0 rgba(0, 0, 0, 0.50);
    -ms-user-select: none;
    user-select: none;
}

#Topbar a {
    text-decoration: none;
    cursor: url(images/demowiki/cursor_hover.png), auto;
    -ms-user-select: none;
    user-select: none;
}

#warcastle {
    text-decoration: none;
    text-align: center;
    cursor: url(images/demowiki/cursor_hover.png), auto;
}


/* Tooltip */
#Tooltip {
    position: absolute;
    background: url('../images/content/scroll.gif') center center;
    padding: 8px;
    z-index: 1000;
    color: #5A2800;
    border: 1px double #5A2800;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 220px !important;
    width: auto;
}

#TooltipArrow {
    background: url('../images/content/helper-div-arrow.png');
    position: absolute;
    top: -1px;
    left: -8px;
    width: 8px;
    height: 13px;
}

#TooltipOrnament {
    position: relative;
    width: 220px;
    height: 30px;
    margin: 0 auto;
}

#TooltipOrnament img {
    width: 220px;
}

.TooltipTitle {
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
}

.TooltipDescription {
    margin-top: 5px;
    font-size: 12px !important;
    text-align: justify;
}

/* Donate Rewards */
.BigButtonText {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 135px;
    height: 25px;
    margin: 0;
    padding: 0;
    background: 0 0;
    border: none;
    text-align: center;
    color: #ffd18c;
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-size: 12px;
    font-weight: 400;
    z-index: 20;
    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}

.BigButtonText:hover {
    top: 1px;
    left: 1px;
}

.OptionsContainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-height: 470px;
    overflow-y: scroll;
}

.ServiceID_Icon_Container {
    position: relative;
    float: left;
    width: 156px;
    height: 156px;
    margin: 5px;
}

.ServiceID_Icon_Container_Background {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 3px;
    left: 3px;
}

.ServiceID_Icon_Container label {
    font-size: 8pt;
}

.ServiceID_Icon {
    position: relative;
    float: left;
    width: 150px;
    height: 150px;
    text-align: center;
    background-repeat: no-repeat;
    color: white;
    cursor: pointer;
}

.ServiceID_Icon_New {
    position: absolute;
    left: 10px;
    top: 48px;
    height: 64px;
    width: 128px;
}

.ServiceID_Icon .ServiceID_Deactivated {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 398;
    pointer-events: none;
}

.ServiceID_Icon .ServiceID_Icon_Selected {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 401;
    pointer-events: none;
}

.ServiceID_Icon .ServiceIDLabelContainer {
    position: absolute;
    left: 0;
    display: table;
    top: 5px;
    height: 40px;
    width: 130px;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 99;
}

.ServiceID_Icon .ServiceIDLabel {
    display: table-cell;
    vertical-align: middle;
}

.ServiceIDLabel input {
    display: none;
}

.ServiceID_Icon .ServiceIDPriceContainer {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 140px;
    margin-left: 5px;
    margin-right: 5px;
    z-index: 99;
}

.ServiceID_Icon .ServiceIDSpecialOffer {
    position: absolute;
    left: 0;
    top: -5px;
    z-index: 100;
}

.ServiceID_Icon .ServiceID_Icon_Over {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 402;
    pointer-events: none;
}

.ServiceID_Icon .ServiceID_HelperDiv {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 399;
    cursor: pointer;
    pointer-events: none !important;
}

.HelperDivIndicator {
    cursor: pointer;
}

.ServiceID_Icon .RibbonNewProduct {
    position: absolute;
    top: -4px;
    left: -4px;
    height: 58px;
    width: 58px;
    z-index: 199;
}

.ServiceID_Icon .RibbonLastChance {
    position: absolute;
    top: -4px;
    left: 96px;
    height: 58px;
    width: 58px;
    z-index: 199;
}

.ServiceID_Icon .ServiceID_Icon_Animation_1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    display: none;
    z-index: 95;
}

.ServiceID_Icon .ServiceID_Icon_New_Animation_1 {
    position: absolute;
    top: 48px;
    right: 12px;
    width: 128px;
    height: 64px;
    display: none;
    z-index: 95;
}

.CharactersContainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.CharactersContainer .CharacterContainer {
    height: 140px;
    border: 1px solid #411809;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    background-color: #fef0d9;
    box-shadow: 3px 3px 2px #875f3e;
    opacity: 0.7;
}

.CharactersContainer .CharacterContainer:hover {
    opacity: 1;
}

.CharactersContainer .Selected {
    opacity: 1;
    background-color: #59ff4c7a;
}

.CharactersContainer .CharacterContainer .CharacterOutfit {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.CharactersContainer .CharacterContainer .CharacterOutfit>img {
    margin-left: -32px;
    margin-top: -32px;
}

.CharactersContainer .CharacterContainer .CharacterInfo {
    border-top: 1px solid #411809;
    width: 100%;
}

.CharactersContainer .CharacterContainer .CharacterInfo .CharacterName {
    margin: 0;
    padding: 4px;
    text-align: center;
    background-color: #f9c078;
}

.CharactersContainer .CharacterContainer .CharacterInfo .CharacterLevel {
    margin: 0;
    padding: 2px;
    text-align: center;
    background-color: #793315;
    color: #fef0d9;
}

/* Shop Fixes */
.InnerTableTab {
    float: left;
    position: relative;
    margin-right: 2px;
}

.InnerTableTabLabel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    pointer-events: none;
}

/* Global Pointer Fix */
a,
input,
select,
textarea,
button,
label,
[onclick],
[onmouseover],
.MenuButton,
.MenuOverlay,
.Submenuitem,
.menuitem,
.Button,
.DButtonText,
#LoginstatusText,
.LoginstatusText,
.MediumButtonBackground,
.MediumButtonOver,
.TableContainer,
.CaptionContainer,
.TableContent,
.Table1,
.Table2,
.Table3,
.Table4,
.ServiceID_Icon {
    cursor: pointer !important;
}

/* Button Fixes */
.MediumButtonBackground,
.MediumButtonOver {
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Shop Item Icons - Cenralizar e Aumentar */
.ShopExtras {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 96px;
    object-fit: contain;
    z-index: 90;
}

.ShopOutfits {
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    object-fit: contain;
    z-index: 90;
}

.ShopOutfits.left {
    left: 15%;
    transform: translateY(-50%);
}

.ShopOutfits.right {
    right: 15%;
    transform: translateY(-50%);
}

/* NOTE: transform:scale was removed because it shifts click areas away from visual positions */


.top_level {
    position: relative;
    z-index: 1;
    background-image: url('/var/www/html/layouts/tibiarl/images/headertoplevel.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}