@font-face {
    font-family: 'Francois One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/francois-one-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Francois One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/francois-one-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Francois One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/francois-one-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
header,
nav,
section,
article,
aside,
footer,
hgroup {
    display: block
}
ol,
ul {
    list-style: none outside none
}
* {
    border: 0;
    padding: 0;
    margin: 0
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
a {
	text-decoration: none;
	color:#8d0404;
}
a:hover {
	text-decoration: underline;
}
html {
    background: black;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif
}
body {
    background: url("../img/background.jpg?v=2") top center no-repeat;
    min-width: 960px
}
body>.netbarslot {
    position: relative;
    z-index: 1100;
    height: 34px;
    background: url("../img/ui/netbarslot.png") top center repeat-x
}
body>header[role="banner"] {
    position: relative;
    height: 300px;
    z-index: 100;
    min-width: 960px
}
body>header>h1.logo {
    position: relative;
    z-index: 200;
    height: 408px;
    text-indent: -9999px;
    margin-bottom: -408px
}
body>header>.container {
    height: 305px;
    margin-bottom: -293px
}
body>header>.ui.container {
    z-index: 300;
    overflow: visible;
    background: url("../img/ui/header.png") no-repeat scroll 153px 183px transparent
}
body>header>.ui.container.loggedin {
    background: url("../img/ui/header-loggedin.png") no-repeat scroll 153px 183px transparent
}
body>header>.ui.container>a.playfree {
    position: absolute;
    height: 122px;
    width: 653px;
    font-size: 24px;
    line-height: 50px;
    font-weight: bold;
    text-decoration: none;
    color: #fffabd;
    text-shadow: 1px 1px black;
    text-transform: uppercase;
    top: 182px;
    left: 153px;
    text-align: center;
    padding: 32px 0
}
body>header>.ui.container>.userinfo {
    color: #fffabd;
    font-family: "Francios One";
    font-size: 13px;
    height: 54px;
    left: 221px;
    position: absolute;
    text-decoration: none;
    text-shadow: 1px 1px black;
    top: 217px;
    width: 497px
}
body>.container,
body>*>.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    z-index: 100;
    padding-bottom: 31px;
}
footer[role="contentinfo"] {
    position: relative;
    clear: both;
    height: 419px;
    padding-top: 278px;
    z-index: 99;
    background: black;
    /* the logo baked into footer.jpg sits 49px left of the image centre: the footer script re-measures and refines this */
    background: url("../img/footer.jpg") calc(50% + 49px) top no-repeat
}
footer[role="contentinfo"]>.container {
    position: relative;
    width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 84px 260px 0;
    text-align: center;
    font-size: 10px;
    line-height: 11px;
    color: #e0c0a9
}
a.pegi {
    position: absolute;
    top: 68px;
    left: 15px;
    display: block;
    width: 186px;
    height: 78px;
    border: 1px solid white;
    overflow: hidden;
    padding: 2px
}
a.pegi>img {
    float: left;
    margin: 2px;
    vertical-align: top
}
a.usk {
    position: absolute;
    top: 67px;
    right: 126px
}
a.safeplay {
    position: absolute;
    top: 66px;
    right: 50px
}
footer[role="contentinfo"]>.container>a.sitenotice {
    color: inherit
}
a.sitenotice,
a.termsconditions,
a.privacy {
    color: #ae9467;
    text-decoration: none
}
a.sitenotice:hover,
a.termsconditions:hover,
a.privacy:hover {
    text-decoration: underline
}
a.termsconditions:before,
a.termsconditions:after {
    content: "|";
    font-size: 8px;
    padding: 0 8px
}
a.gameforge4d {
    position: absolute;
    width: 150px;
    height: 60px;
    top: 43px;
    left: 547px;
    text-indent: -9999px
}
div[role="navigation"] {
    float: left;
    width: 182px;
	min-height: 500px;
    margin: 0 6px;
	margin-top: -50px;
}
nav {
    background: url("../img/ui/nav.png") top right repeat-y;
    margin-bottom: 26px;
    padding: 1px 0
}
nav:before {
    content: url("../img/ui/nav-before.png");
    display: block;
    margin-bottom: -5px;
    margin-top: -22px
}
nav:after {
    content: url("../img/ui/nav-after.png");
    display: block;
    margin-top: -8px;
    margin-bottom: -20px
}
h1,
h2,
h3,
h4,
h5,
h6,
nav>ul>li>a,
article>header,
a.playfree {
    font-family: "Francios One", "Georgia", "Times New Roman", "Palatino", "Hoefler Text", "Baskerville", serif
}
nav>ul {
    list-style: none;
    width: 162px;
    margin: 0 auto
}
nav a {
    position: relative;
    font-size: 12px;
    line-height: 15px;
    display: block;
    text-decoration: none;
    color: #f4cc6a;
    padding: 0 10px
}
nav>ul>li {
    background: url("../img/ui/nav-list-item.png") center 23px no-repeat
}
nav>ul>li>a {
    font-weight: bold;
    font-size: 16px;
    color: #fffabd;
    height: 24px;
    line-height: 22px;
    margin-bottom: 5px
}
nav a.selected,
nav a:hover {
    color: white;
    background: url("../img/ui/nav-selected.png") center left no-repeat
}
nav a.selected:before,
nav a:hover:before {
    content: url("../img/ui/nav-selected-before.png");
    display: block;
    position: absolute;
    top: -1px;
    left: -17px
}
nav>ul>li>a.selected:before,
nav>ul>li>a:hover:before {
    top: 3px;
    left: -15px
}
nav li ul {
    list-style: none;
    margin-bottom: 6px
}
nav li li {
    margin: 2px
}
div[role="navigation"]:after,
body>.container>div.secondary:after {
    content: url("../img/ui/navigation-after.png");
    display: block;
    margin: -26px 0 -200px 3px
}
body>.container>div[role="main"] {
    float: left;
    width: 585px;
    margin-left: -7px;
    margin-top: 5px;
    margin-bottom: -230px;
    padding: 20px 28px 0 28px;
    font-size: 12px;
    background: url("../img/ui/main-container.png") center repeat-y
}
div[role="main"] h1,
div[role="main"] h2,
div[role="main"] h3,
div[role="main"] h4,
div[role="main"] h5,
div[role="main"] strong {
    color: #7b1325;
    font-weight: bold
}
div[role="main"] h2 {
    font-size: 18px;
    background: url("../img/ui/main-heading.png") top left no-repeat;
    padding-top: 32px;
    margin-top: -20px;
    margin-left: -20px;
    padding-left: 20px;
    margin-bottom: 10px
}
div[role="main"] li,
div[role="main"] p {
    font-size: 13px;
    line-height: 20px
}
div[role="main"] div.content {
    margin-left: 12px
}
div[role="main"]:after {
    bottom: -25px;
    content: url("../img/ui/main-after.png");
    display: block;
    left: -47px;
    position: relative
}
article {
    margin: 0 25px 20px
}
article.trailer {
    width: 476px;
    height: 268px;
    margin: 0 auto 20px;
    border: 1px solid #f7e3bb;
    box-shadow: black 0 2px 4px;
    background: black
}
article.nesnemarket {
    width: 476px;
    height: 168px;
    margin: 0 auto 20px;
    border: 1px solid #f7e3bb;
    box-shadow: black 0 2px 4px;
    background: black;
}
article.mini-gallery {
    width: 497px;
    height: 135px;
    padding: 3px;
    margin: 20px 16px;
    background: url("../img/ui/article-mini-gallery.jpg") top left no-repeat
}
article.mini-gallery img {
    display: block;
    float: left;
    border: 1px solid #edd9b1;
    box-shadow: black 0 2px 4px;
    margin: 18px 0 0 22px;
    width: 135px;
    height: 90px
}
body>.container>div.secondary {
    float: right;
    width: 181px;
    margin: 0 3px
}
body>.container>.secondary>aside {
    background: url("../img/ui/secondary-aside.png") top right repeat-y;
    margin-bottom: 31px;
    padding: 1px 0
}
body>.container>.secondary>aside:before {
    content: url("../img/ui/secondary-aside-before.png");
    display: block;
    margin-bottom: -5px;
    margin-top: -19px
}
body>.container>.secondary>aside:after {
    content: url("../img/ui/secondary-aside-after.png");
    display: block;
    margin-top: -5px;
    margin-bottom: -20px
}
.secondary>aside>h2 {
    font-weight: bold;
    font-size: 16px;
    color: #fffabd;
    height: 24px;
    line-height: 22px;
    margin-bottom: 5px;
    padding: 0 19px 0 20px;
    background: url("../img/ui/nav-list-item.png") center 23px no-repeat
}
.secondary>aside.download>a,
.secondary>aside.itemshop>a,
.secondary>aside.mobile_pay>a,
.secondary>aside.recruiting>a {
    position: relative;
    display: block;
    width: 129px;
    height: 60px;
    margin: 0 auto;
    text-indent: -9999px
}
.secondary>aside.recruiting>a {
    background-image: url("../img/ui/secondary-aside-recruiting.png")
}
.secondary>aside.recruiting>a:hover {
    background-image: url("../img/ui/secondary-aside-recruiting-hover.png")
}
.secondary>aside.itemshop>a {
    background: url("../img/ui/secondary-aside-itemshop.png") 129px 0
}
.secondary>aside.mobile_pay>a {
    background: url("../img/mobile_icon.png") 129px 0
}
.secondary>aside.mobile_pay>a:hover {
    background: none 129px 0
}
.secondary>aside.itemshop>a:hover {
    background: url("../img/ui/secondary-aside-itemshop-hover.png") 129px 0
}
.secondary>aside.download>a {
    background: url("../img/ui/secondary-aside-download.png") 0 0
}
.secondary>aside.itemshop>a:hover {
    background-position: 129px -60px
}
.secondary>aside.download>a:hover {
    background-position: 0 -60px
}
.secondary>aside.highscore {
    font-weight: bold;
    font-size: 11px
}
.secondary>aside.highscore select.world {
    display: block;
    width: 141px;
    height: 20px;
    margin: 8px auto;
    background: #cdb78b;
    border: 1px solid #997c47;
    border-bottom-width: 2px
}
.secondary>aside.highscore table {
    width: 159px;
    margin: 0 auto
}
.secondary>aside.highscore table tr {
    height: 20px
}
.secondary>aside.highscore table tr.alt {
    background: url("../img/ui/aside-highscore-alt.png") center center no-repeat
}
.secondary>aside.highscore table td {
    vertical-align: middle
}
.secondary>aside.highscore td.position {
    color: #dab353;
    text-align: right;
    width: 20px
}
.secondary>aside.highscore td.name>a {
    color: #9b713f;
    text-decoration: none;
    padding: 0 5px
}
.secondary>aside.highscore td.name>a:hover {
    color: #dfbf8b;
    text-decoration: underline
}
.secondary>aside.highscore td.faction {
    width: 39px
}
.secondary>aside.highscore td.faction>img {
    border: 1px solid #624f32
}
.secondary>aside.highscore>.tab>a {
    display: block;
    width: 129px;
    height: 20px;
    padding-right: 17px;
    margin: 10px auto;
    background: url("../img/ui/aside-highscore-tab.gif") top left no-repeat;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    color: #dfbf8b;
    text-decoration: none
}
.secondary>aside.highscore>.tab>a:hover {
    text-decoration: underline
}
.secondary>aside ul.tabcontrols {
    list-style: none;
    width: 159px;
    height: 40px;
    background: url("../img/ui/secondary-aside-tabcontrols.png") 0 28px no-repeat;
    margin: 0 auto;
    overflow: hidden
}
.secondary>aside ul.tabcontrols>li {
    float: left;
    width: 78px;
    height: 40px;
    background: url("../img/ui/secondary-aside-tabcontrols.png") right bottom no-repeat
}
.secondary>aside ul.tabcontrols>li:first-child {
    margin-right: 3px
}
.secondary>aside ul.tabcontrols>li.selected {
    width: 78px;
    height: 40px;
    background: url("../img/ui/secondary-aside-tabcontrols.png") left bottom no-repeat
}
.secondary>aside ul.tabcontrols a {
    display: block;
    width: 100%;
    height: 100%
}
.secondary>aside ul.tabcontrols a>img {
    display: block;
    margin: 2px auto
}
.secondary>aside div.tab {
    position: relative;
    display: none
}
.secondary>aside div.tab.selected {
    display: block
}
/* the shared form box is 430px wide with a 25px left gutter; fit it to the 159px ranking column */
.secondary>aside.highscore .inner-form-border {
    width: auto;
    margin: 12px 0 4px;
    border: 1px solid #624f32;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
}
.secondary>aside.highscore .inner-form-box {
    width: auto;
    padding: 14px 8px;
    border-color: #c6ab74;
    text-align: center;
    font-size: 11px;
    line-height: 15px
}
.welcome-text {
    color: #fef6aa;
    font-size: 14px;
    font-weight: bold
}
.welcome-text-left {
    float: left;
    padding-left: 15px;
    width: 200px
}
.right {
    float: right
}
.nav-box-btn {
    color: #fef6aa;
    display: block;
    float: left;
    font-size: 13px;
    height: 32px;
    line-height: 17px;
    margin: -1px 0 0 0;
    padding: 11px 5px 0 32px;
    text-align: center;
    text-decoration: none;
    width: 173px
}
.nav-box-btn-1 {
    background-image: url("../img/ui/nav-box-btn-1.png");
    margin-left: -4px
}
.nav-box-btn-1:hover {
    background-image: url("../img/ui/nav-box-btn-1-hover.png")
}
.nav-box-btn-2 {
    background-image: url("../img/ui/nav-box-btn-2.png");
    width: 159px;
    margin-left: 8px
}
.nav-box-btn-2:hover {
    background-image: url("../img/ui/nav-box-btn-2-hover.png")
}
.nav-box-btn-3 {
    background-image: url("../img/ui/nav-box-btn-3.gif")
}
.nav-box-btn-4 {
    background-image: url("../img/ui/nav-box-btn-4.png");
    width: 160px
}
.nav-box-btn-4:hover {
    background-image: url("../img/ui/nav-box-btn-4-hover.png")
}
.header-box-nav-container {
    border: 0;
    height: 42px;
    margin: 4px 0 0 6px;
    overflow: hidden;
    padding: 3px 0 0 0;
    width: 516px
}
.header-box-nav-container li {
    list-style: none
}
.container {
    margin: 0 auto;
    position: relative;
    width: 930px
}
.content h2 {
    background-image: url("../img/ui/content-h2.jpg");
    background-repeat: no-repeat;
    color: #7b1300;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    margin: 11px 0 0;
    padding: 7px 0 7px 33px
}
.content {
    background-image: url("../img/ui/content-top.jpg");
    background-repeat: repeat-y;
    margin: 0;
    width: 507px
}
.content .content-bg {
    background: url("../img/ui/content-bg.jpg") no-repeat
}
.content .content-bg-download1 {
    background: none no-repeat
}
.content .content-bg-download2 {
    background: none no-repeat
}
.content .content-bg-download3 {
    background: none no-repeat
}
.content .content-bg-download4 {
    background: none no-repeat
}
.content .content-bg-mobile {
    background: none no-repeat
}
.content .content-bg-bottom {
    background: url("../img/ui/content-bg-bottom.jpg") no-repeat 0 100%;
    overflow: hidden;
    padding: 0 0 0 11px;
    width: 492px;
    position: relative
}
.box-foot {
    background-image: url("../img/ui/box-foot.jpg");
    height: 10px;
    margin-bottom: 12px;
    width: 481px
}
#news_compact ul {
    padding-bottom: 0;
    margin-top: 12px;
    text-align: left
}
#news_compact li {
    padding-bottom: 12px;
    list-style: none
}
#news_compact li a {
    color: #7b1300
}
#news_compact li h4 {
    float: right;
    font-weight: normal;
    color: #7b1300;
    margin-left: 10px
}
#news_compact li h3 {
    display: inline;
    margin-top: 0
}
#news_compact li p {
    padding-bottom: 0;
    padding-top: 2px
}
#news_compact li a.news_link {
    text-decoration: none
}
#news_compact img.thumbnail {
    width: 100px;
    float: right
}
#news_compact img.full {
    width: 480px
}
#news a {
    color: #7b1300
}
#news td {
    padding: 8px 12px 30px;
    background: url("../img/ui/gallery-news-box-bg.jpg") no-repeat top left
}
#news h3 {
    margin: 0 0 8px;
    text-align: left
}
#news p.message {
    padding-bottom: 6px
}
#news p.author {
    padding-bottom: 0;
    color: #7b1300
}
#news a.comment_link {
    display: block;
    float: right;
    margin-right: 12px;
    text-align: right
}
#news a.first_link {
    margin-right: 0;
    display: block;
    float: right;
    text-align: right
}
#news p.date {
    padding-bottom: 0;
    color: #7b1300
}
#news img {
    display: none;
    margin-top: 8px;
    width: 100px
}
#news div {
    display: none;
    margin: 0;
    padding: 0
}
#news div ul {
    margin: 0
}
#news div ul li {
    margin: 12px 0 0;
    padding: 0 8px 0 20px
}
#news div ul h5 {
    display: inline;
    margin-bottom: 2px;
    color: #7b1300
}
#news div ul h6 {
    float: right;
    font-weight: normal;
    color: #7b1300
}
#news div ul p {
    margin: 0;
    padding: 0;
    overflow: hidden
}
#news #browse {
    width: 100%;
    margin-top: 20px;
    height: 33px;
    background-image: url("../img/ui/page-heading-bg.jpg")
}
#news #browse td {
    width: 50%;
    background: transparent;
    padding: 1px 0 0
}
#news #browse a {
    margin: 6px auto;
    padding: 3px 0 0;
    width: 106px;
    color: #dfbf8b
}
#news #browse a#next {
    background: url("../img/ui/news-browse-next.jpg") no-repeat top right
}
#news #browse a#next span {
    padding-right: 17px
}
#news #browse a#prev {
    background: url("../img/ui/news-browse-prev.jpg") no-repeat top left
}
#news #browse a#prev span {
    padding-left: 17px
}
.content .tabs-nav {
    height: 40px;
    width: 481px
}
.content .tabs-nav li,
.content .tabs-nav li a {
    color: #7b1300;
    display: block;
    font: bold 12px/26px Arial, Helvetica, sans-serif;
    height: 30px;
    text-align: center;
    text-decoration: none
}
.content .tabs-nav li {
    float: left;
    height: 34px;
    list-style-type: none;
    padding: 3px
}
.content .tabs-nav li a:hover {
    text-decoration: underline
}
.content .tabs-nav li.selected a {
    text-decoration: none!important;
    cursor: text!important
}
.content .tabs4 li {
    background: transparent url("../img/ui/tabs4.png") no-repeat;
    width: 114px
}
.content .tabs4 li a {
    width: 114px
}
.content .tabs4 #tab1 {
    background-position: 0 -40px
}
.content .tabs4 #tab2 {
    background-position: -120px -40px
}
.content .tabs4 #tab3 {
    background-position: -240px -40px
}
.content .tabs4 #tab4 {
    background-position: -360px -40px;
    width: 115px
}
.content .tabs4 #tab1.selected {
    background-position: 0 0
}
.content .tabs4 #tab2.selected {
    background-position: -120px 0
}
.content .tabs4 #tab3.selected {
    background-position: -240px 0
}
.content .tabs4 #tab4.selected {
    background-position: -360px 0
}
.content .tabs4-big {
    height: 52px
}
.content .tabs4-big li {
    background: transparent url("../img/ui/tabs4-big.jpg") no-repeat;
    width: 114px;
    height: 46px;
    display: table;
    padding-top: 0
}
.content .tabs4-big li a {
    width: 114px;
    line-height: 15px;
    display: table-cell;
    vertical-align: middle
}
.content .tabs4-big #tab1 {
    background-position: 0 -52px
}
.content .tabs4-big #tab2 {
    background-position: -120px -52px
}
.content .tabs4-big #tab3 {
    background-position: -240px -52px
}
.content .tabs4-big #tab4 {
    background-position: -360px -52px;
    width: 115px
}
.content .tabs4-big #tab1.selected {
    background-position: 0 0
}
.content .tabs4-big #tab2.selected {
    background-position: -120px 0
}
.content .tabs4-big #tab3.selected {
    background-position: -240px 0
}
.content .tabs4-big #tab4.selected {
    background-position: -360px 0
}
.content .tabs3 li {
    background: transparent url("../img/ui/tabs3.png") no-repeat;
    width: 154px
}
.content .tabs3 li a {
    width: 154px
}
.content .tabs3 #tab1 {
    background-position: 0 -40px
}
.content .tabs3 #tab2 {
    background-position: -160px -40px
}
.content .tabs3 #tab3 {
    background-position: -320px -40px;
    width: 155px
}
.content .tabs3 #tab1.selected {
    background-position: 0 0
}
.content .tabs3 #tab2.selected {
    background-position: -160px 0
}
.content .tabs3 #tab3.selected {
    background-position: -320px 0
}
.content .tabs2 li {
    background: transparent url("../img/ui/tabs2.png") no-repeat;
    width: 234px
}
.content .tabs2 li a {
    width: 234px
}
.content .tabs2 #tab1 {
    background-position: 0 -40px
}
.content .tabs2 #tab2 {
    background-position: -240px -40px;
    width: 235px
}
.content .tabs2 #tab1.selected {
    background-position: 0 0
}
.content .tabs2 #tab2.selected {
    background-position: -240px 0
}
.firststepsbox-1,
.firststepsbox-2,
.firststepsbox-3 {
    min-height: 155px;
    padding: 7px 190px 7px 9px
}
.firststepsbox-1 {
    background: url("../img/ui/firststepsbox-1.jpg") no-repeat
}
.firststepsbox-2 {
    background: url("../img/ui/firststepsbox-2.jpg") no-repeat
}
.firststepsbox-3 {
    background: url("../img/ui/firststepsbox-3.jpg") no-repeat
}
.firststeps-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.firststeps-inner-content h4 {
    background: url("../img/ui/heading-underline.png") no-repeat bottom left;
    color: #7b1300;
    font-size: 12px;
    padding-bottom: 8px;
    margin: 1px 0 0 0
}
.firststeps-inner-content p {
    margin: 5px 0 9px 0
}
.firststeps-login-screenshot {
    height: 130px;
    margin-left: 12px;
    margin-top: 18px;
    width: 166px
}
.firststeps-inner-content .tutorialsbox {
    background: url("../img/ui/firststeps-inner-content-tutorialsbox.jpg") no-repeat;
    min-height: 155px;
    padding: 7px 190px 7px 9px
}
.firststeps-inner-content .tutorial-btn {
    background: transparent url("../img/ui/firststeps-inner-content-tutorial-btn.png") no-repeat;
    color: #f1e6a6;
    display: block;
    font-size: 11px;
    height: 20px;
    margin: 10px 0 0;
    padding: 3px 20px 0 10px;
    text-decoration: none
}
.firststeps-inner-content .tutorial-btn:hover {
    text-decoration: underline
}
.firststeps-inner-content .community {
    background: url("../img/ui/creation-not-allowed.jpg") no-repeat;
    min-height: 155px;
    padding: 7px 190px 7px 9px;
    width: 481px
}
.aboutbox-1,
.aboutbox-2,
.aboutbox-3,
.aboutbox-4,
.aboutbox-5 {
    min-height: 169px;
    padding: 7px 190px 7px 9px
}
.aboutbox-1 {
    background: url("../img/ui/aboutbox-1.jpg") no-repeat
}
.aboutbox-2 {
    background: url("../img/ui/aboutbox-2.jpg") no-repeat
}
.aboutbox-3 {
    background: url("../img/ui/aboutbox-3.jpg") no-repeat
}
.aboutbox-4 {
    background: url("../img/ui/aboutbox-4.jpg") no-repeat
}
.aboutbox-5 {
    background: url("../img/ui/aboutbox-5.jpg") no-repeat
}
.about-inner-content h4 {
    background: url("../img/ui/heading-underline.png") no-repeat bottom left;
    color: #7b1300;
    font-size: 11px;
    padding-bottom: 8px;
    margin: 1px 0 0 0
}
.about-inner-content p {
    margin: 5px 0 9px 0
}
.about-inner-content .aboutbox-5 p {
    width: 462px
}
.about-inner-content .aboutbox-5 h4,
.about-inner-content p.first-content {
    width: 280px
}
.about-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.empires-content {
    margin: 9px 0 0 0;
    padding: 0;
    position: relative
}
.empires-content .empires-map {
    background: url("../img/ui/empires-content-empires-map.png") no-repeat;
    height: 341px;
    position: relative;
    width: 481px
}
.empirebox-2,
.empirebox-3 {
    display: none
}
.empirebox-1,
.empirebox-2,
.empirebox-3 {
    background: url("../img/ui/empirebox-1.jpg") no-repeat;
    min-height: 169px;
    padding: 7px;
    position: relative;
    width: 467px
}
.empires-content h4 {
    background: url("../img/ui/heading-underline.png") no-repeat bottom left;
    color: #7b1300;
    font-size: 11px;
    padding-bottom: 8px;
    margin: 1px 0 0 0
}
.empires-content .empire-crest {
    background: url("../img/ui/empirebox-1.jpg") no-repeat;
    height: 87px;
    position: absolute;
    top: 0;
    left: 345px;
    width: 136px
}
.empires-content .empirebox-1 .empire-crest {
    background: url("../img/ui/empires-content-empirebox-1-empire-crest.png") no-repeat 0 0
}
.empires-content .empirebox-2 .empire-crest {
    background: url("../img/ui/empires-content-empirebox-1-empire-crest.png") no-repeat 0 -87px
}
.empires-content .empirebox-3 .empire-crest {
    background: url("../img/ui/empires-content-empirebox-1-empire-crest.png") no-repeat 0 -174px
}
.empires-content p {
    margin: 5px 0 9px 0;
    width: 320px
}
.empires-content .empires-map img {
    position: absolute;
    top: 0
}
.empires-content #empire-img {
    position: relative
}
.empires-content .empire-1 {
    background: url("../img/ui/empires-content-empire-1.png") no-repeat 0 -196px;
    height: 145px;
    left: 0;
    top: 196px;
    width: 345px
}
.empires-content .empire-2 {
    background: url("../img/ui/empires-content-empire-1.png") no-repeat 0 0;
    height: 160px;
    left: 0;
    top: 0;
    width: 200px
}
.empires-content .empire-3 {
    background: url("../img/ui/empires-content-empire-1.png") no-repeat -291px 0;
    height: 225px;
    left: 291px;
    width: 190px
}
#wallpaper a,
#screenshots a {
    background: url("../img/ui/wallpaper.gif") no-repeat;
    float: left;
    margin: 4px;
    padding: 4px
}
#wallpaper a.first,
#screenshots a.first {
    background: url("../img/ui/screenshots-gallery-list.jpg") no-repeat
}
.gallerybox {
    background: url("../img/ui/gallery-news-box-bg.jpg") no-repeat;
    margin-bottom: 9px;
    height: auto;
    padding-top: 7px;
    padding-left: 12px;
    width: 476px
}
.gallerybox-small {
    background-image: url("../img/ui/gallerybox-small.jpg");
    min-height: 133px
}
.gallerybox-middle {
    background-image: url("../img/ui/gallery-news-box-bg.jpg");
    min-height: 193px;
    margin-bottom: 30px
}
.gallery-inner-content h4 {
    color: #7b1300;
    font-size: 12px;
    height: 34px;
    margin: 1px 0 0 9px;
    width: 290px
}
.gallery-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.gallery-image {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px
}
.screenshots-gallery-list {
    margin: 4px 0 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}
.screenshots-gallery-list li {
    background: url("../img/ui/screenshots-gallery-list.jpg") no-repeat;
    display: inline;
    float: left;
    list-style: none;
    height: 83px;
    margin: 0 4px 4px 0;
    padding: 4px 0 0 4px;
    width: 108px
}
.wallpaper-links {
    float: left;
    line-height: 18px;
    margin-right: 8px;
    text-align: center;
    width: 108px
}
.wallpaper-links a {
    color: #4a1e00;
    font-size: 11px;
    text-decoration: underline
}
.characterclasses {
    min-height: 155px;
    padding: 7px 190px 7px 9px
}
.charclass-1 {
    background: url("../img/ui/charclass-1.jpg") no-repeat
}
.charclass-2 {
    background: url("../img/ui/charclass-2.jpg") no-repeat
}
.charclass-3 {
    background: url("../img/ui/charclass-3.jpg") no-repeat
}
.charclass-4 {
    background: url("../img/ui/charclass-4.jpg") no-repeat
}
.charclass-8 {
    background: url("../img/ui/charclass-8.jpg") no-repeat
}

.characterclasses h4 {
    font-size: 12px
}
.charclass-8 h4 a,
.charclass-8 h4 a:visited {
    color: #7b1325;
    text-decoration: none
}
.charclass-8 h4 a:hover {
    text-decoration: underline
}
.download-inner-column-left {
    background-image: url("../img/ui/download-inner-column-left.jpg");
    float: left;
    overflow: hidden;
    width: 301px
}
.download-inner-column-right {
    width: 180px;
    float: left
}
.download-inner-column-right p {
    width: 174px;
    margin: 12px 0 16px 1px
}
.download-inner-column-right p a {
    color: #7b1300;
    font-weight: bold;
    text-decoration: none
}
.download-inner-column-right p a:hover {
    color: #af4e3c
}
.download-button {
    background-image: url("../img/ui/download-button.jpg");
    display: block;
    height: 63px;
    width: 174px
}
.download-button:hover {
    background-image: url("../img/ui/download-button-hover.jpg")
}
.downloadbox {
    background: url("../img/ui/downloadbox.jpg") no-repeat;
    margin-bottom: 9px;
    min-height: 209px;
    padding-top: 7px;
    padding-left: 12px;
    width: 289px
}
.download-inner-content h4 {
    color: #7b1300;
    font-size: 12px;
    height: 34px;
    margin: 1px 0 0 0;
    width: 290px
}
.download-inner-column-left p {
    margin: 5px 0 9px 0;
    width: 286px
}
.download-image {
    margin-bottom: 16px
}
.download-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.downloadbox caption {
    caption-side: inherit;
    font-weight: bold;
    font-size: 12px;
    height: 20px;
    text-align: left
}
.downloadbox table {
    margin-bottom: 20px;
    width: 281px
}
.left_td {
    background: url("../img/ui/administration-inner-content.gif") no-repeat 0 0;
    height: 23px;
    padding-left: 20px;
    width: 69px
}
.download-box-foot {
    background-image: none;
    clear: both;
    height: 10px;
    margin-bottom: 12px;
    width: 481px
}
.download-content-teaser {
    float: right;
    width: 178px
}
#download h3 {
    background: 0;
    color: #4a1e00;
    font-size: 25px;
    line-height: 25px;
    margin: 0 15px;
    text-shadow: 1px 1px #ecd4ba
}
#download a#requirements {
    background: url("../img/ui/download-requirements.gif") no-repeat scroll 0 0 transparent;
    color: #8d0404;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: bold;
    height: 13px;
    line-height: 12px;
    margin: 15px 30px;
    text-decoration: none;
    text-shadow: 1px 1px #ecd4ba
}
#downloadText {
    font-size: 12px;
    margin: 15px auto;
    width: 445px
}
#download a#requirements:hover {
    text-decoration: underline
}
#download h4:hover {
    background-position: 0 -13px
}
#download .download-button {
    margin: 15px auto
}
#required {
    width: 300px;
    margin: 0 auto;
    display: none
}
#required caption {
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 10px
}
#download .resourceTable {
    margin: 15px auto;
    width: 350px
}
.securitybox {
    background: url("../img/ui/empirebox-1.jpg") no-repeat scroll 0 0 transparent;
    min-height: 90px;
    padding: 7px;
    position: relative;
    width: 482px
}
.securitybox p {
    width: 467px
}
.securitybox ul {
    list-style-type: square;
    padding-left: 15px
}
.administration-inner-content h4 {
    color: #7b1300;
    font-size: 11px;
    height: 22px;
    margin: 1px 0 0 9px;
    width: 290px
}
.administration-inner-content p {
    font-size: 11px;
    margin: 0 5px 0 12px
}
.administration-inner-content {
    margin: 9px 0 0;
    padding: 0
}
.administration-inner-content ul {
    font-size: 11px;
    margin: 9px 0 0 12px;
    padding: 0;
    text-align: left
}
.administration-inner-content ul li {
    background: url("../img/ui/administration-inner-content.gif") no-repeat;
    list-style: none;
    padding: 0 0 13px 20px;
    width: 260px
}
.long-li {
    overflow: visible;
    width: 440px!important
}
.long-li-code {
    background-position: 0 5px!important;
    line-height: 23px;
    padding-bottom: 0
}
.administration-box {
    line-height: 18px;
    margin-bottom: 14px;
    margin-left: 12px;
    padding: 0 13px;
    width: 500px
}
.administration-box p {
    color: #4a1e00;
    margin-left: 6px
}
.administration-box a {
    float: left;
    margin: 0 7px 0
}
.delete-code {
    background-color: #cdb78b;
    border: 1px solid #997c47;
    color: #7b1300;
    font: 14px bold normal;
    height: 15px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 3px
}
.load-link {
    color: #7b1300;
    font-weight: bold;
    text-decoration: none
}
.load-link:hover {
    text-decoration: underline
}
.load-link:visited {
    color: #943b00
}
.input-data-box {
    background: url("../img/ui/input-data-box.jpg") no-repeat;
    min-height: 129px;
    padding-top: 9px;
    width: 481px
}
.input-data-box p a {
    color: #943b00;
    text-decoration: none
}
.input-data-box p a:hover {
    text-decoration: underline
}
.input-data-box .box-img {
    float: right;
    height: 130px;
    width: 180px
}
.recruitbox-1,
.recruitbox-2,
.recruitbox-4,
.recruitbox-5 {
    min-height: 155px;
    padding: 7px 190px 7px 9px;
    width: 481px
}
.recruitbox-3 {
    min-height: 155px;
    padding: 7px 190px 7px 9px;
    width: 480px
}
.recruitbox-1 {
    background: url("../img/ui/recruitbox-1.jpg") no-repeat
}
.recruitbox-2 {
    background: url("../img/ui/recruitbox-2.jpg") no-repeat
}
.recruitbox-3 {
    background: url("../img/ui/recruitbox-3.jpg") no-repeat
}
.recruitbox-4 {
    background: url("../img/ui/recruitbox-4.jpg") no-repeat
}
.recruitbox-5 {
    background: url("../img/ui/recruitbox-5.jpg") no-repeat
}
.recruit-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.recruit-inner-content h4 {
    background: url("../img/ui/heading-underline.png") no-repeat bottom left;
    color: #7b1300;
    font-size: 12px;
    padding-bottom: 8px;
    margin: 1px 0 0 0
}
.recruit-inner-content p {
    margin: 5px 0 9px 0
}
.recruit-inner-content label {
    display: block;
    font-size: 1.1em;
    font-weight: bold
}
.recruit-inner-content input {
    width: 280px;
    display: transparent;
    border: 0;
    height: 24px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    background: url("../img/ui/recruit-inner-content.png") no-repeat
}
.recruit-inner-content textarea {
    width: 280px;
    display: transparent;
    border: 0;
    height: 100px;
    padding-left: 3px;
    padding-top: 2px;
    background: url("../img/ui/recruit-inner-content-2.png") no-repeat;
    overflow: hidden
}
#recruitMailForm #submitBtn,
#recruitMailForm #sendMailBtn {
    background: url("../img/ui/recruit-mail-form-submit-btn.png") no-repeat;
    border: 0;
    color: #fff;
    cursor: pointer;
    height: 48px;
    width: 248px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .01em;
    margin: 0 auto;
    text-align: center;
    display: block;
    background-position: 0 7px
}
.recruit-status-th {
    height: 26px;
    background: none no-repeat
}
.recruit-status-th th,
.recruit-status-tr td {
    vertical-align: middle;
    text-align: center
}
.recruit-status-tr {
    height: 25px;
    background: url("../img/ui/recruit-status-tr.png") no-repeat
}
.recruit-inviteLink {
    width: 280px;
    height: 24px;
    display: block;
    border: 0;
    padding-left: 3px;
    padding-top: 0;
    background: url("../img/ui/recruit-inner-content.png") no-repeat
}
#recruitSocialForm #inviteLink {
    background: 0;
    width: 270px;
    overflow: hidden;
    height: 22px
}
.recruit-facebook {
    display: block;
    background: url("../img/ui/recruit-facebook.png") no-repeat;
    width: 29px;
    height: 29px;
    margin-top: 5px;
    margin-right: 15px;
    float: left
}
.recruit-twitter {
    display: block;
    background: url("../img/ui/recruit-twitter.png") 20% no-repeat;
    width: 29px;
    height: 29px;
    margin-top: 5px;
    float: left
}
.recruit-headline {
    position: relative;
    top: 60px;
    left: 140px;
    width: 192px;
    height: 30px;
    text-align: center;
    font-weight: bold;
    color: #600;
    font-size: 18px
}
.recruit-code {
    position: relative;
    top: 50px;
    left: 140px;
    width: 185px;
    height: 34px;
    background: url("../img/ui/recruit-code.png") no-repeat;
    text-align: center;
    font-weight: bold;
    padding-left: 2px;
    padding-top: 3px
}
#recruitCode {
    color: #000;
    font-size: 13px;
    font-weight: bold;
    background: 0;
    text-align: left;
    width: 169px
}
.recruit-inner-content th,
.recruit-inner-content td {
    padding-right: 10px
}
.recruit-del {
    background: url("../img/ui/recruit-del.png") no-repeat;
    width: 21px;
    height: 21px;
    display: block
}
#hiddenMails {
    display: none
}
.btn {
    background: url("../img/ui/button.png") no-repeat;
    color: #dfbf8b;
    display: block;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    line-height: 12px;
    margin: 4px 0 0;
    padding: 3px 14px 0 0;
    text-align: center;
    text-decoration: none;
    width: 130px
}
.btn:hover {
    background: url("../img/ui/button-hover.png") no-repeat;
    text-decoration: underline
}
input.btn-login {
    background: transparent url("../img/ui/btn-login.png") no-repeat scroll 50% 0!important;
    border-style: none;
    margin: auto;
    margin-bottom: 5px;
    padding: 0;
    width: 151px;
    height: 54px;
    color: #fffabd;
    font-family: Francios One;
    font-size: 16px;
    text-shadow: 1px 1px black;
    font-weight: bold
}
input.btn-login:hover {
    background: transparent url("../img/ui/btn-login-hover.png") no-repeat scroll 50% 0!important;
    text-decoration: none
}
.form-login {
    margin: 6px 0 0 14px;
    overflow: hidden;
    padding: 0;
    width: 151px
}
.form-login label {
    color: #fffabd;
    font-size: 11px;
    line-height: 14px;
    font-family: Francios One
}
.form-login .input {
    background: url("../img/ui/form-login.png") no-repeat;
    height: 25px;
    margin: 2px 0 0;
    padding: 0 0 4px;
    width: 151px
}
.form-login .input input {
    border: 0;
    background: 0;
    font: 11px/13px Arial, Helvetica, sans-serif;
    margin: 4px 0 0 4px;
    width: 121px
}
.agbok {
    color: #ecd4a8;
    display: block;
    font-size: 12px;
    margin: 8px 8px 6px;
    text-decoration: none;
    width: 128px
}
.agbok a {
    color: #f4670b;
    font-size: 11px;
    line-height: 11px;
    text-decoration: none
}
.agbok a.password {
    text-align: left
}
.agbokinput {
    margin-bottom: 0
}
.agbok2 {
    margin: 0 0 0 12px!important
}
.agbokbtn {
    margin: 0 0 0 62px!important
}
.password {
    color: #58220e;
    display: block;
    font-size: 9px;
    line-height: 12px;
    margin: 8px 0 6px;
    text-align: center;
    text-decoration: none;
    width: 151px
}
.password:hover {
    text-decoration: underline
}
#screenshots div {
    width: 116px;
    float: left;
    text-align: center
}
#screenshots.comic a {
    color: #fff;
    position: relative;
    line-height: 25px
}
#screenshots.comic span {
    background: url("../img/ui/screenshots-comic.png") no-repeat;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    display: block;
    height: 25px;
    position: absolute;
    top: 55px;
    left: 4px;
    text-align: center;
    width: 100px
}
#screenshots a {
    text-decoration: none
}
#screenshots img {
    max-height: 90px;
    max-width: 135px
}
.smfaqunderline {
    background: url("../img/ui/heading-underline.png") no-repeat scroll left bottom transparent;
    color: #7b1300;
    font-size: 11px;
    margin: 2px 0 0;
    padding-bottom: 8px
}
.smfaqbox {
    background: url("../img/ui/smfaqbox.jpg") no-repeat scroll 0 0 transparent;
    min-height: 169px;
    padding: 7px 9px 7px 9px;
    width: 465px;
    font-size: 11px
}
.smfaqlinks {
    background: url("../img/ui/smfaqlinks.png") no-repeat scroll -3px 3px transparent;
    margin-left: 9px;
    padding-left: 24px
}
.smserverselect {
    position: relative;
    float: left
}
.smserverselect a {
    margin-bottom: 10px
}
.smserverselect a:hover {
    text-decoration: none
}
.smserverselectold1 {
    position: absolute;
    color: black;
    text-align: center;
    width: 130px;
    left: 10px;
    top: 10px
}
.smserverselectold2 {
    position: absolute;
    color: black;
    text-align: center;
    width: 130px;
    left: 10px;
    top: 23px
}
.smserverselectold3 {
    position: absolute;
    color: black;
    text-align: center;
    width: 130px;
    left: 10px;
    top: 36px
}
.smserverselectold4 {
    position: absolute;
    color: black;
    text-align: center;
    width: 130px;
    left: 10px;
    top: 49px
}
.smserverselectnew1 {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: #fef6aa;
    left: 175px;
    top: 30px
}
.input-data-box {
    background: url("../img/ui/input-data-box.jpg") no-repeat;
    min-height: 129px;
    padding-top: 9px;
    width: 481px
}
.input-data-box p a {
    color: #943b00;
    text-decoration: none
}
.input-data-box p a:hover {
    text-decoration: underline
}
.input-data-box .box-img {
    float: right;
    height: 130px;
    width: 180px
}
.login-inner-content h4,
.pass-lost-inner-content h4 {
    color: #7b1300;
    font-size: 11px;
    height: 22px;
    margin: 1px 0 0 9px;
    width: 290px
}
.login-inner-content p,
.pass-lost-inner-content p {
    font-size: 11px;
    margin: 5px 0 10px 12px;
    width: 275px
}
.login-inner-content,
.pass-lost-inner-content {
    margin: 9px 0 0 0;
    padding: 0
}
.pass-lost-box {
    background: url("../img/ui/pass-lost-box.jpg") no-repeat;
    margin-left: 11px;
    overflow: hidden;
    padding-top: 10px;
    width: 275px
}
.pass-lost-box-small {
    background: url("../img/ui/pass-lost-box-small.jpg") no-repeat;
    float: left;
    height: auto;
    margin-left: 11px;
    margin-top: 12px;
    min-height: 143px;
    padding-top: 10px;
    width: 275px
}
.change-password .pass-lost-box-small {
    padding-top: 5px
}
.login-inner-content .pass-lost-box-small {
    background: url("../img/ui/login-inner-content-pass-lost-box-small.jpg") no-repeat
}
.pass-lost-box-big {
    height: 315px
}
.pass-lost-box-small p {
    width: 250px
}
.pass-lost-box-inner-content {
    margin-left: 10px;
    width: 253px
}
.pass-lost-box label {
    color: #4a1e00;
    font-weight: bold;
    font-size: 11px
}
.pass-lost-box input {
    border: 0;
    background-color: transparent;
    font: 11px/13px Arial, Helvetica, sans-serif;
    margin: 1px 0 0 4px;
    width: 245px
}
.pass-lost-box input.btn-center-input {
    margin-top: 5px!important
}
.pass-lost-box-small label {
    color: #4a1e00;
    font-weight: bold;
    font-size: 11px
}
.pass-lost-box-small input {
    background: 0;
    border: 0;
    font: 11px/13px Arial, Helvetica, sans-serif;
    margin: 1px 0 0 4px;
    width: 245px
}
#highscore table {
    border-collapse: separate;
    width: 481px
}
*+html #highscore table {
    border-collapse: inherit;
    width: 481px
}
#highscore td,
#highscore th {
    border-color: #fae5d0 #b79647 #b39164 #fae5d0;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    vertical-align: middle;
    text-align: center
}
#highscore tr.zebra {
    background: url("../img/ui/guild-highscore-zebra.jpg")
}
#highscore td img {
    display: inline
}
#highscore .rank-th-1 {
    border-left: 1px solid #81602d;
    width: 55px
}
#highscore .rank-th-2 {
    padding-left: 13px;
    text-align: left;
    width: 110px
}
#highscore .rank-th-3 {
    width: 40px
}
#highscore .rank-th-4 {
    width: 56px
}
#highscore .rank-th-5 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right;
    width: 104px
}
#highscore .rank-td-1-1 {
    border-left: 1px solid #81602d;
    font-weight: bold;
    text-align: center
}
#highscore .rank-td-1-2 {
    padding-left: 13px;
    text-align: left
}
#highscore .rank-td-1-5 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right
}
#highscore .rank-td-2-1 {
    border-left: 1px solid #81602d;
    font-weight: bold;
    text-align: center
}
#highscore .rank-td-2-2 {
    padding-left: 13px;
    text-align: left
}
#highscore .rank-td-2-5 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right
}
#guildHighscore .content-bg-bottom {
    width: 501px;
    padding: 0 10px
}
#guildHighscore table {
    border-collapse: separate;
    width: 481px
}
*+html #guildHighscore table {
    border-collapse: inherit;
    width: 481px
}
#guildHighscore td,
#guildHighscore th {
    border-color: #fae5d0 #b79647 #b39164 #fae5d0;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    vertical-align: middle
}
#guildHighscore tr.zebra {
    background: url("../img/ui/guild-highscore-zebra.jpg")
}
#guildHighscore td img {
    display: inline
}
#guildHighscore .guildrank-th-1 {
    border-left: 1px solid #81602d;
    width: 35px
}
.guildrank-th-2 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-th-3 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-th-4 {
    width: 50px
}
.guildrank-th-5 {
    width: 45px
}
#guildHighscore .guildrank-th-6 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right;
    width: 60px
}
#guildHighscore .guildrank-td-1-1 {
    border-left: 1px solid #81602d;
    font-weight: bold;
    text-align: center;
    width: 50px
}
.guildrank-td-1-2 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-td-1-3 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-td-1-4 {
    text-align: center;
    width: 50px
}
.guildrank-td-1-5 {
    text-align: center;
    width: 50px
}
#guildHighscore .guildrank-td-1-6 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right;
    width: 60px
}
#guildHighscore .guildrank-td-2-1 {
    border-left: 1px solid #81602d;
    font-weight: bold;
    text-align: center;
    width: 50px
}
.guildrank-td-2-2 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-td-2-3 {
    padding-left: 13px;
    text-align: left;
    width: 120px
}
.guildrank-td-2-4 {
    text-align: center;
    width: 50px
}
.guildrank-td-2-5 {
    text-align: center;
    width: 50px
}
#guildHighscore .guildrank-td-2-6 {
    border-right: 1px solid #81602d;
    padding-right: 13px;
    text-align: right;
    width: 60px
}
.ranks-nav {
    height: 33px;
    float: left;
    font-weight: bold;
    padding: 8px 10px 0 10px;
    cursor: pointer;
}
.ranks-nav a {
    color: #8d0404;
    font-size: 10px;
    cursor: help;
    text-decoration: none
}
.ranks-nav a:hover {
    cursor: help;
    text-decoration: underline
}
.prev {
    background-image: url("../img/ui/prev.jpg");
    text-align: left;
    width: 241px
}
.next {
    background-image: url("../img/ui/next.jpg");
    text-align: right;
    width: 240px
}
.prev-top {
    background-image: url("../img/ui/prev-top.jpg");
    padding: 9px 10px 0
}
.next-top {
    background-image: url("../img/ui/next-top.jpg");
    padding: 9px 10px 0
}
.ranks-update-time {
    color: #4a1e00;
    height: 15px;
    font-size: 11px;
    margin-top: 10px;
    text-align: right;
    width: 475px
}
.ranks-inner-content h5 {
    color: #4a1e00;
    font-size: 11px;
    font-weight: bold;
    margin: 7px 34px 14px 9px
}
.ranks-inner-content p {
    color: #4a1e00;
    font-size: 11px;
    margin: 0 9px 15px 9px
}
.ranks-inner-content th {
    color: #8d0404;
    font-size: 11px;
    font-weight: bold;
    height: 43px;
    padding-top: 20px
}
.ranks-inner-content td {
    color: #8d0404;
    font-size: 11px;
    height: 29px;
    padding-top: 8px
}
.ranks-dropdowns-box {
    background-image: url("../img/ui/ranks-dropdowns-box.jpg");
    height: 56px;
    margin: 0 0 15px 8px;
    width: 466px
}
.ranks-dropdowns-box select {
    background-color: #cdb78b;
    border: 1px solid #997c47;
    color: #4a1e00;
    font-size: 13px;
    margin: 0 0 0 4px;
    padding: 0;
    width: 120px
}
.ranks-dropdowns-box input {
    background: 0;
    border: 0;
    color: #4a1e00;
    font-size: 13px;
    margin: 0 0 0 4px;
    padding-top: 2px;
    width: 110px
}
.ranks-dropdowns-box label {
    color: #671000;
    font-weight: bold;
    font-size: 13px
}
.ranks-select-box {
    height: 45px;
    float: left;
    margin-right: 7px;
    margin-left: 4px;
    margin-top: 10px;
    width: 120px
}
.ranks-select-box-btn {
    height: 45px;
    float: left;
    margin-top: 19px;
    width: 30px
}
.ranks-input {
    background-image: url("../img/ui/ranks-input.jpg");
    height: 20px;
    width: 119px
}
.ranks-input-noservers {
    background-image: url("../img/ui/ranks-input.jpg");
    color: #4a1e00;
    font-size: 13px;
    height: 17px;
    padding-left: 4px;
    padding-top: 3px;
    width: 115px
}
.small-btn {
    background: url("../img/ui/small-button.gif") no-repeat;
    color: #dfbf8b;
    display: block;
    font-weight: bold;
    font-size: 10px;
    height: 20px;
    line-height: 12px;
    margin: 4px 0 0;
    padding: 3px 14px 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 65px
}
.small-btn:hover {
    text-decoration: underline
}
.back-btn {
    background: transparent url("../img/ui/back-button.gif") repeat scroll 0 0;
    margin: 30px 0 22px 145px;
    padding-left: 28px;
    width: 129px
}
#progressTracker {
    height: 100px;
    margin: 0 auto;
    padding-left: 10px;
    width: 420px
}
#progressTracker .step {
    background: url("../img/ui/progress-tracker-step.gif") no-repeat scroll 0 -45px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    margin: 5px 0 0 -6px;
    text-align: center;
    text-shadow: 1px 1px #dfd1ac;
    width: 45px
}
#progress1,
#progress2 {
    background: url("../img/ui/progress-bar.gif") repeat-x scroll 0 20px;
    float: left;
    position: relative;
    width: 177px
}
#progress3 {
    position: relative
}
#progressTracker .progress-text {
    font-size: 11px;
    font-weight: bold;
    left: -32px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 100px
}
#progressTracker .inactive .progress-text,
#progressTracker .inactive .step {
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5
}
#progressTracker .inactive .progress-text {
    color: #4a1e00
}
#progressTracker .inactive .progress-text a {
    color: #4a1e00
}
#progress3 {
    float: left;
    width: 45px
}
#progressTracker .passed {
    background: url("../img/ui/progress-tracker-passed.gif") repeat-x scroll 0 20px
}
#progressTracker .active .step {
    background-position: 0 0;
    color: #4a1e00;
    font-size: 25px;
    height: 45px;
    line-height: 45px;
    margin: 0 0 0 -3px;
    width: 45px
}
#progressTracker .inactive .step {
    background-position: 0 -45px
}
.inner-form-border {
    border: 1px solid #aa8551;
    margin: 15px 0 20px 25px;
    width: 430px
}
.inner-form-box {
    background: transparent url("../img/ui/popup-bg.jpg") repeat scroll 0 0;
    border: 1px solid #c6ab74;
    color: #4a1e00;
    padding: 15px
}
.inner-form-box h3 {
    background: none repeat scroll 0 0 transparent;
    color: #4a1e00;
    font-size: 18px;
    height: 33px
}
.trenner {
    background: url("../img/ui/trenner.jpg") no-repeat;
    border-top: 1px solid #b28a45;
    height: 8px;
    margin: 0 auto;
    width: 380px
}
#pwlostForm,
#lostPasswordCodeForm,
#changepwForm,
#emailChangeForm,
#resendactivForm,
#loginForm,
#registerForm,
#captchaForm {
    margin: 15px auto;
    width: 265px
}
#pwlostForm div,
#lostPasswordCodeForm div,
#changepwForm div,
#emailChangeForm div,
#resendactivForm div,
#loginForm div,
#registerForm div,
#captchaForm div {
    margin-bottom: 15px;
    position: relative;
    width: 287px;
}
#pwlostForm div input:focus,
#lostPasswordCodeForm div input:focus,
#changepwForm div input:focus,
#emailChangeForm div input:focus,
#resendactivForm div input:focus,
#loginForm div input:focus,
#registerForm div input:focus,
#captchaForm div input:focus {
    background-position: 0 -30px;
    border: 1px solid #8d0404;
    color: #4a1e00
}
#pwLost .inner-form-box h3,
#lostPasswordCode .inner-form-box h3,
#changePw .inner-form-box h3,
#emailChange .inner-form-box h3,
#resendActiv .inner-form-box h3,
#login .inner-form-box h3,
#register .inner-form-box h3,
#captcha .inner-form-box h3 {
    color: #4a1e00;
    font-size: 18px;
    height: 33px
}
.inner-form-box a {
    color: #8d0404;
    text-decoration: none
}
.inner-form-box a:hover {
    text-decoration: underline
}
#toAdmin,
#topwLost,
#toLogin {
    background: url("../img/ui/to-admin.gif") no-repeat scroll 0 0 transparent;
    color: #dfbf8b;
    float: right;
    font-size: 10px;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    padding: 0 20px 0 0;
    text-align: center;
    width: 130px
}
#checkerror span,
#checktransfer label {
    font-size: 11px;
    font-weight: normal
}
.inner-form-box label {
    display: block;
    color: #4a1e00;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px
}
#pwLost .inner-form-box input,
#lostPasswordCode .inner-form-box input,
#changePw .inner-form-box input,
#emailChange .inner-form-box input,
#resendActiv .inner-form-box input,
#login .inner-form-box input,
#register .inner-form-box input,
#captcha .inner-form-box input {
    background: url("../img/ui/input-bg.gif") repeat-x;
    border: 1px solid #622400;
    color: #534236;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 32px;
    padding: 5px 10px;
    width: 265px
}
#login #checkerror input,
#register #checkerror input,
#register #checktransfer input,
#captcha #checkerror input {
    border: 0;
    height: 15px;
    float: left;
    margin: 2px 5px 20px;
    width: 15px
}
#pwField .invalid {
    background-position: 0 -16px
}
#pwField .valid-icon {
    background: url("../img/ui/page-valid-icon.gif");
    display: inline;
    float: left;
    height: 16px;
    margin: 0 0 5px 10px;
    width: 16px
}
#changePw #submitBtn,
#emailChange #submitBtn,
#resendActiv #submitBtn,
#pwLost #submitBtn,
#lostPasswordCode #submitBtn,
#login #submitBtn,
#register #submitBtn,
#captcha #submitBtn,
#subscribe .btn-big,
a.btn-big,
.contest-inner-content #submitBtn {
    background: url("../img/ui/submit-button.jpg") no-repeat scroll 0 0 transparent;
    border: 0;
    color: #dfbf8b;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    letter-spacing: .01em;
    margin: 0 auto 25px;
    text-align: center;
    text-shadow: -1px -1px #000;
    width: 287px
}
#changePw #submitBtn:hover,
#emailChange #submitBtn:hover,
#resendActiv #submitBtn:hover,
#pwLost #submitBtn:hover,
#lostPasswordCode #submitBtn:hover,
#login #submitBtn:hover,
#subscribe .btn-big:hover,
#register #submitBtn:hover,
#captcha #submitBtn:hover,
a.btn-big:hover,
.contest-inner-content #submitBtn:hover {
    background-position: 0 -38px;
    color: #FFF;
    text-decoration: none
}
#subscribe .btn-big {
    line-height: 38px
}
.char-list-content {
    color: #86280f;
    font-weight: bold;
    margin-bottom: 10px;
    width: 480px
}
.char-list-content .pagerWrapper {
    background: transparent url("../img/ui/page-heading-bg.jpg") no-repeat;
    height: 32px;
    margin-top: 10px;
    padding: 7px;
    width: 465px
}
.char-list-content .pagerWrapper .sort-char-list {
    float: left;
    width: 300px
}
.char-list-content .pagerWrapper .sellabel {
    float: left;
    line-height: 20px
}
.char-list-content .pagerWrapper .charselect {
    border: 1px solid #997c47;
    float: left;
    height: 18px;
    margin-left: 3px;
    overflow: hidden;
    width: 125px
}
.char-list-content .pagerWrapper select {
    background-color: #cdb78b;
    color: #4a1e00;
    font-size: 13px;
    height: 22px;
    margin: -2px 0 0 -2px;
    width: 129px
}
.char-list-content .pagerWrapper .pager {
    background: url("../img/ui/char-list-content-pager-wrapper-pager.jpg") no-repeat;
    float: right;
    height: 20px;
    text-align: right;
    width: 110px
}
.char-list-content .pagerWrapper .prev {
    background: url("../img/ui/news-browse-prev.jpg") no-repeat
}
.char-list-content .pagerWrapper .next {
    background: none no-repeat
}
.char-list-content .pagerWrapper div.pager-prev,
.char-list-content .pagerWrapper a.pager-prev {
    display: block;
    float: left;
    height: 20px;
    width: 18px
}
.char-list-content .pagerWrapper div.pager-next,
.char-list-content .pagerWrapper a.pager-next {
    display: block;
    float: left;
    height: 20px;
    width: 20px
}
.char-list-content .pagerWrapper .bg-none {
    background: 0;
    float: left;
    height: 20px;
    width: 20px
}
.char-list-content .pagerWrapper .pager-middle {
    color: #fff;
    float: left;
    font-weight: normal;
    height: 20px;
    line-height: 19px;
    text-align: center;
    width: 70px
}
.char-list-content .charList {
    background: url("../img/ui/char-list-content-char-list.jpg") no-repeat;
    height: 100px;
    padding: 2px;
    width: 476px;
    font-size: 12px
}
.char-list-content .charList .charimg {
    background: url("../img/ui/char-list-content-char-list-charimg.jpg") no-repeat 3px 3px;
    float: left;
    height: 72px;
    margin-right: 5px;
    width: 56px
}
.char-list-content .charList .charimg img {
    border: 1px solid #000;
    padding: 1px;
    margin: 6px
}
.char-list-content .charList .charuser div {
    height: 30px;
    line-height: 30px
}
.char-list-content .charList .charuser .charname {
    font-size: 16px;
    float: left;
    width: 276px
}
.char-list-content .charList .charuser .charrank {
    text-align: right
}
.char-list-content .charList .charlevel,
.char-list-content .charList .charclass,
.char-list-content .charList .charkingdom,
.char-list-content .charList .chartime,
.char-list-content .charList .charserver,
.char-list-content .charList .charposition {
    float: left;
    height: 20px;
    line-height: 20px;
    width: 250px
}
.char-list-content .charList .charlevel,
.char-list-content .charList .charclass {
    width: 160px
}
.char-list-content .charList .charposition {
    width: 410px
}
.char-list-content .charList .charlabel {
    color: #86280f;
    display: block;
    float: left;
    font-weight: bold;
    width: 70px
}
.char-list-content .charList .chardata {
    color: #000;
    font-weight: bold
}
.char-list-content .charList .charrow td {
    height: 20px
}
.char-list-content .charList .charend td {
    padding-bottom: 13px
}
.clearfloat {
    font-size: 1px;
    clear: both;
    height: 0
}
#activateAccount #bigDownload {
    background: url("../img/ui/activate-account-big-download.jpg") no-repeat scroll 0 0 transparent;
    color: #fff9c7;
    display: block;
    font-size: 27px;
    font-weight: bold;
    height: 100px;
    line-height: 34px;
    margin: 0 auto 15px;
    padding: 20px 0 0 120px;
    text-align: left;
    text-decoration: none;
    text-shadow: 2px 2px 5px black;
    width: 400px
}
#activateAccount #bigDownload:hover {
    background-position: 0 -108px;
    color: #FFF
}
#creation div.inner-content {
    margin: 4px 15px 0 0
}
#creation h3 {
    font-size: 14px;
    padding: 11px;
    text-align: center;
    color: #7b1300;
    height: 33px;
    background: url("../img/ui/page-heading-bg.jpg") no-repeat
}
#creation div.inner-content.notAllowed {
    background: url("../img/ui/creation-not-allowed.jpg") no-repeat;
    min-height: 155px;
    padding: 7px 190px 7px 9px;
    width: 282px;
    margin: 9px 25px 0 0
}
#creation div.inner-content.notAllowed h3 {
    background: 0;
    padding: 0;
    text-align: left;
    font-size: 12px;
    height: auto;
    margin: 10px 0
}
#creation #progressTracker {
    height: 90px;
    margin: 16px auto 0;
    width: 420px;
    padding: 0
}
#creation #progressTracker a.step {
    display: block;
    color: #4a1e00;
    text-decoration: none
}
#creation div.jobs {
    overflow: auto
}
#creation div.jobs div.job {
    float: left;
    height: 87px;
    width: 114px;
    margin: 0 0 0 2px
}
#creation div.jobs div.job0 {
    background: url("../img/ui/creation-jobs-job0.png") no-repeat
}
#creation div.jobs div.job1 {
    background: url("../img/ui/creation-jobs-job1.png") no-repeat
}
#creation div.jobs div.job2 {
    background: url("../img/ui/creation-jobs-job2.png") no-repeat
}
#creation div.jobs div.job3 {
    background: url("../img/ui/creation-jobs-job3.png") no-repeat
}
#creation div.jobs div.job p {
    margin: 52px 1px 0;
    font-size: 14px;
    padding: 3px 0 4px;
    text-align: center;
    color: #bbb;
    border-top: solid 1px #bbb;
    background: url("../img/ui/creation-jobs-job.png")
}
#creation div.jobs div.job.active p {
    font-weight: bold;
    color: white
}
#creation div.jobDescription p {
    display: none
}
#creation div.jobDescription p.active {
    display: block;
    margin: 20px 20px 0;
    min-height: 100px
}
#creation div.genders div {
    display: none
}
#creation div.genders div.active {
    display: block;
    overflow: auto
}
#creation div.genders div img {
    display: none
}
#creation div.genders div img.active {
    display: inline
}
#creation div.genders a {
    float: left;
    width: 232px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    color: black;
    font-weight: bold
}
#creation div.serverAndName {
    background: 100% 100% no-repeat;
    min-height: 370px;
    width: 470px;
    padding: 20px 0 0 0
}
#creation div.completed div {
    background: 100% 100% no-repeat;
    min-height: 350px;
    padding: 40px 0 0 0;
    width: 470px
}
#creation div.serverAndName.job0,
#creation div.completed.job0 div {
    background-image: url("../img/ui/creation-server-and-name-job0.png")
}
#creation div.serverAndName.job1,
#creation div.completed.job1 div {
    background-image: url("../img/ui/creation-server-and-name-job1.png")
}
#creation div.serverAndName.job2,
#creation div.completed.job2 div {
    background-image: url("../img/ui/creation-server-and-name-job2.png")
}
#creation div.serverAndName.job3,
#creation div.completed.job3 div {
    background-image: url("../img/ui/creation-server-and-name-job3.png")
}
#creation div.serverAndName.job4,
#creation div.completed.job4 div {
    background-image: url("../img/ui/creation-server-and-name-job4.png")
}
#creation div.serverAndName.job5,
#creation div.completed.job5 div {
    background-image: url("../img/ui/creation-server-and-name-job5.png")
}
#creation div.serverAndName.job6,
#creation div.completed.job6 div {
    background-image: url("../img/ui/creation-server-and-name-job6.png")
}
#creation div.serverAndName.job7,
#creation div.completed.job7 div {
    background-image: url("../img/ui/creation-server-and-name-job7.png")
}
#creation div.serverAndName h4,
#creation div.completed h4 {
    float: left;
    padding: 10px 10px 0 40px;
    min-width: 150px
}
#creation div.serverAndName p.check,
#creation div.completed p.check {
    background: url("../img/ui/creation-server-and-name-check.gif") 0 7px no-repeat;
    margin: 0 0 0 10px;
    padding: 10px 0 20px 0;
    line-height: 14px
}
#creation div.completed p {
    margin: 0 10px
}
#creation div.completed p.small {
    background: 0;
    width: 220px;
    margin: 35px 0 0 10px;
    text-align: left
}
#creation div.completed a {
    background: url("../img/ui/submit-button.jpg") no-repeat;
    border: 0;
    color: #dfbf8b;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    letter-spacing: .01em;
    line-height: 36px;
    margin: 10px 0 25px 8px;
    text-align: center;
    text-shadow: -1px -1px #000;
    width: 287px;
    text-decoration: none
}
#creation div.completed a:hover {
    background-position: 0 -38px;
    color: #fff
}
#creation div.serverAndName form {
    margin: 60px 0 0 10px
}
#creation div.serverAndName label {
    color: #4a1e00;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px
}
#creation div.server,
#creation div.name {
    margin: 10px 0
}
#creation div.serverAndName select {
    background: url("../img/ui/input-bg.gif") repeat-x;
    width: 208px;
    height: 22px;
    border: solid 1px #622400;
    color: #534236;
    font-size: 16px;
    font-weight: bold;
    height: 32px;
    padding: 5px 10px;
    width: 286px
}
#creation div.serverAndName input {
    background: url("../img/ui/input-bg.gif") repeat-x;
    width: 208px;
    height: 22px;
    border: solid 1px #622400;
    color: #534236;
    font-size: 16px;
    font-weight: bold;
    height: 32px;
    padding: 5px 10px;
    width: 285px
}
#creation #submit {
    background: url("../img/ui/submit-button.jpg") no-repeat;
    border: 0;
    color: #dfbf8b;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    letter-spacing: .01em;
    line-height: normal;
    margin: 25px 0;
    text-align: center;
    text-shadow: -1px -1px #000;
    width: 287px
}
#creation #submit:hover {
    background-position: 0 -38px;
    color: #fff;
    text-decoration: none
}
div#mmoGamesOverviewToggle h4 {
    width: 140px
}
#crosspromo {
    width: 120px;
    height: 600px;
    position: absolute;
    top: 18px;
    right: -130px;
    z-index: 100;
    overflow: hidden
}
#maintenance h1 {
    text-align: center
}
#maintenance img {
    margin: 0 auto 30px;
    display: block
}
span.version {
    color: #555
}

.download-inner-content h3 {
    background: 0;
    color: #4a1e00;
    font-size: 25px;
    line-height: 25px;
    margin: 0 15px;
    text-shadow: 1px 1px #ecd4ba;
}

.alert {
    background: transparent url("../img/ui/popup-bg.jpg") repeat scroll 0 0;
    border: 1px solid #8f7747;
    color: #800707;
    padding: 15px;
    width: 90%;
	    margin: 0px auto;
    font-weight: bold;
}

.hata {
    background: transparent url("../img/ui/popup-bg.jpg") repeat scroll 0 0;
    border: 1px solid #8f7747;
    color: #800707;
    padding: 15px;
    width: 90%;
	    margin: 0px auto;
    font-weight: bold;
}

select
{
	background: url("../img/ui/input-bg.gif") repeat-x;
    border: 1px solid #622400;
    color: #534236;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 32px;
    padding: 5px 10px;
    width: 265px;
}

.unuttum-td1
{
	width: 65%;
    height: 200px;
    border-right: 1px solid #D0D0D0;
    vertical-align: top;
    padding-right: 20px;
    text-align: center;
    background: transparent url(../img/ui/popup-bg.jpg) repeat scroll 0 0;
    border: 1px solid #aa8551;
	border-right:0px;
    color: #4a1e00;
    padding: 15px;
}

.unuttum-label
{
	display: block;
    color: #4a1e00;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px;
    float: left;
}

.unuttum-td2
{
	width: 35%;
    vertical-align: top;
    padding-left: 20px;
    text-align: center;
    background: transparent url(../img/ui/popup-bg.jpg) repeat scroll 0 0;
    border: 1px solid #aa8551;
    color: #4a1e00;
    padding: 15px;
}

.unuttum-input
{
	background: url(../img/ui/input-bg.gif) repeat-x;
    border: 1px solid #622400;
    color: #534236;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 32px;
    padding: 5px 10px;
    width: 265px;
    float: left;
    margin-bottom: 10px;
}

.unuttum-btn
{
	background: url(../img/ui/submit-button.jpg) no-repeat scroll 0 0 transparent;
    border: 0;
    color: #dfbf8b;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    letter-spacing: .01em;
    margin: 0 auto 25px;
    text-align: center;
    text-shadow: -1px -1px #000;
    width: 287px;
    margin-top: 90px;
    float: left;
}

textarea{
	    background: linear-gradient(to top,#c9ae81,#ab895c);
    border: 1px solid #622400;
    color: #534236;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 139px;
    padding: 5px 10px;
    width: 265px;
}

footer ul {
    text-align: center;
    margin: 0px auto;
    margin-top: 25px;
    margin-bottom: -55px;
    float: none;
    display: inline-block;
}

footer ul li {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

footer ul li img {
    height: 25px;
    opacity: .6;
}

footer ul li img:hover {
    opacity: 1;
}

#mmonetbar .mmoBoxMiddle {
    background: transparent none repeat-x 0 -36px;
    color: #d0b88c !important;
    float: left;
    height: 24px;
    line-height: 22px;
    text-align: left;
    white-space: nowrap;
    position: relative;
    z-index: 10000;
}

#mmonetbar #mmoNews, #mmonetbar #mmoUsers, #mmonetbar #mmoGame, #mmonetbar .nojsGame {
    margin: 4px 4px 0 1px !important;
	width: initial !important;
}

#mmonetbar #mmoContent {
    padding-left: 109px;
}

div#mmoGamesOverviewToggle {
    width: 168px;
    padding: 4px 0 4px 414px;
}

div#mmoGamesOverviewToggle h4 {
    height: 25px!important;
    position: relative;
    background: none repeat-x 0 -36px;
    top: 0px;
    padding: 3px 0px!important;
    line-height: 25px;
    -moz-box-sizing: content-box;
	border-radius: 5px !important;
}

div#mmoGamesOverviewToggle h4 a {
    display: block;
    width: 116px;
    height: 16px;
    line-height: 18px!important;
    text-align: left;
    font-weight: normal;
    outline: none;
    color: #d0b88c !important;
    font-size: 11px !important;
    position: relative;
    border: none!important;
    padding: 0 0 0 10px!important;
    background: none!important;
    -moz-box-sizing: content-box;
}

#mmonetbar .mmoBoxMiddle {
    line-height: 24px !important;
}

div#TanitimBtn {
    background: url(../img/landing_button.png);
	width: 300px;
    height: 183px;
    float: right;
    position: absolute;
    right: -86px;
    top: -232px;
}

.detay-btn
{
    margin-top: 0px;
    width: 100%;
	text-decoration:none !important;
    color: white;
    background: linear-gradient(to top,#5e0601,#bb5835);
    padding: 3px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 3px;
    border: 1px solid #e4c97a;
    box-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black;
}

.detay-btn:hover
{
	background: linear-gradient(to top,#a21300,#e36600);
}

.left_icon {
    background: url("../img/ui/administration-inner-content.gif") center left no-repeat;
    height: 23px;
    padding-left: 20px;
    width: 100%;
    line-height: 23px;
    padding-top: 2px;
}

.android-4 {
    background: none no-repeat;
}
.android-5 {
    background: none no-repeat;
}
.android-6 {
    background: none no-repeat;
}

.swal2-popup
{
    display: none;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    width: 32em;
    max-width: 100%;
    padding: 1.25em;
    border: solid;
    border-color: #000;
    border-radius: 11px;
    background: #d0b37b;
    font-family: cursive;
    font-size: 1rem;
    background: transparent url("../img/ui/popup-bg.jpg") repeat scroll 0 0;
}

.swal2-styled.swal2-confirm
{
    background: url("../img/ui/submit-button.jpg") no-repeat scroll 0 0 transparent;
    border: 0;
    color: #dfbf8b;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    height: 38px;
    letter-spacing: .01em;
    margin: 0 auto 25px;
    text-align: center;
    text-shadow: -1px -1px #000;
    width: 287px
}

.swal2-styled.swal2-confirm:hover
{
    background: url("../img/ui/submit-button.jpg") no-repeat scroll 0 0 transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    height: 38px !important;
    letter-spacing: .01em !important;
    margin: 0 auto 25px !important;
    text-align: center !important;
    text-shadow: -1px -1px #000 !important;
    width: 287px !important;
    background-position: 0 -38px !important;
    color: #FFF !important;
    text-decoration: none !important;
    background-color: none !important;
}

.swal2-content
{
    display: block;
    color: #4a1e00;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 5px;
}

.swal2-title
{
    position: relative;
    max-width: 100%;
    margin: 0 0 .4em;
    padding: 0;
    color: #4a1e00;
    font-family: cursive;
    font-size: 1.375em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
}

.swal2-icon.swal2-error
{
    border-color: #6e572b;
    color: #2c2010;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line]
{
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: .3125em;
    border-radius: .125em;
    background-color: #6e572b;
}

.swal2-icon.swal2-success .swal2-success-ring
{
    position: absolute;
    z-index: 2;
    top: -.25em;
    left: -.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: .25em solid rgb(86 63 6);
    border-radius: 50%;
}

.swal2-icon.swal2-success [class^=swal2-success-line]
{
    display: block;
    position: absolute;
    z-index: 2;
    height: .3125em;
    border-radius: .125em;
    background-color: #6c561f;
}

.swal2-icon.swal2-warning
{
    border-color: #4a1e00;
    color: #502a08;
}

.swal2-styled.swal2-cancel
{
    border: 0 !important;
    border-radius: 34px !important;
    background: initial !important;
    background-color: #2a1e0e !important;
    color: #dfbf8b !important;
    font-size: 1.0625em !important;
    margin: 0 auto 25px !important;
    font-family: cursive;
    height: 43px;
    text-decoration: underline;
}

.swal2-close
{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s ease-out;
    border: none;
    border-radius: 5px;
    background: 0 0;
    color: #502a08;
    font-family: serif;
    font-size: 2.5em;
    line-height: 1.2;
    cursor: pointer;
}

.swalInput:focus
{
    outline: none;
}

.nav-toggle,
.nav-backdrop,
.nav-drawer-head,
.nav-sub-toggle,
nav li.nav-mobile-only {
    display: none;
}

/* Wider than the 1920px background art: a blurred full-width copy fills the sides, the sharp copy fades into it */
@media (min-width: 1921px) {
    body {
        position: relative;
        background: none;
    }
    body:before,
    body:after {
        content: "";
        position: absolute;
        top: 0;
        z-index: -1;
        pointer-events: none;
        background: url("../img/background.jpg?v=2") top center no-repeat;
    }
    body:before {
        left: 0;
        width: 100%;
        height: 56.25vw;
        background-size: 100% 100%;
        filter: blur(6px);
    }
    body:after {
        left: 50%;
        width: 1920px;
        height: 1080px;
        margin-left: -960px;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 1760px, transparent 1920px);
        mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 1760px, transparent 1920px);
    }
}

/* ============================================================
   Responsive layout (tablet / mobile)
   The desktop skin below this point is a fixed 960px sprite
   design with no fluid breakpoints; this section reflows it
   into a single stacked column, with a toggle-able nav.
   ============================================================ */
@media (max-width: 1024px) {
    /* clip, not hidden: hidden turns body into a scroll container and breaks the sticky menu bar */
    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }
    body {
        min-width: 0;
        background-size: 1300px auto;
    }
    body>.netbarslot,
    body>header>h1.logo,
    #TanitimBtn {
        display: none;
    }
    nav li.nav-mobile-only {
        display: block;
    }
    body>header,
    body>header>.container {
        height: auto;
        min-width: 0;
        margin-bottom: 0;
        padding: 0;
        background: none;
    }
    /* logo and pagoda are painted by the body background; leave room for them */
    body>header[role="banner"] {
        min-width: 0;
        padding: 150px 12px 0;
    }
    body>header>.ui.container,
    body>header>.ui.container.loggedin {
        position: static;
        width: 100%;
        height: auto;
        background: none;
    }
    body>header>.ui.container>a.playfree {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        max-width: 420px;
        margin: 0 auto;
        padding: 12px 0;
        font-family: Georgia, "Times New Roman", serif;
        background: linear-gradient(to bottom, #86c653 0%, #55a02d 48%, #3b8120 52%, #2f6a18 100%);
        border: 2px solid #1d3a0c;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #b6e585, 0 2px 6px #000;
    }
    body>header>.ui.container>.userinfo {
        position: static;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        padding: 10px 12px;
        background: rgba(20, 8, 2, 0.8);
        border: 1px solid #997c47;
        border-radius: 4px;
    }
    .welcome-text-left {
        float: none;
        width: auto;
        padding-left: 0;
        margin-bottom: 6px;
    }
    .right {
        float: none;
    }
    .header-box-nav-container {
        width: 100%;
        height: auto;
        overflow: visible;
        margin: 6px 0 0;
    }
    .header-box-nav-login {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .nav-box-btn {
        position: static;
        width: auto;
        flex: 1 1 auto;
        height: auto;
        margin: 0;
        padding: 10px 8px;
        text-align: center;
        background-image: none !important;
        background-color: #611200;
        border: 1px solid #997c47;
        border-radius: 3px;
    }

    body>.container,
    body>*>.container {
        width: 100%;
        padding: 0 12px 20px;
    }

    /* mobile nav: sticky menu bar + off-canvas drawer */
    .nav-toggle {
        position: sticky;
        top: 8px;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 50px;
        margin: 14px 0;
        padding: 0 16px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #fffabd;
        text-shadow: 1px 1px #000;
        cursor: pointer;
        background: linear-gradient(to bottom, #4a220c 0%, #2a1208 100%);
        border: 1px solid #997c47;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #5c3414, 0 4px 12px rgba(0, 0, 0, 0.7);
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle:active {
        background: linear-gradient(to bottom, #3a1a09 0%, #220e06 100%);
    }
    .nav-toggle-icon {
        position: relative;
        width: 24px;
        height: 18px;
    }
    .nav-toggle-icon span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #f4cc6a;
        border-radius: 2px;
        box-shadow: 0 1px 1px #000;
    }
    .nav-toggle-icon span:nth-child(1) { top: 0; }
    .nav-toggle-icon span:nth-child(2) { top: 8px; width: 70%; }
    .nav-toggle-icon span:nth-child(3) { top: 16px; }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(8, 3, 1, 0.72);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        transition: opacity 0.25s ease, visibility 0.25s;
    }
    html.nav-locked .nav-backdrop {
        visibility: visible;
        opacity: 1;
    }
    html.nav-locked,
    html.nav-locked body {
        overflow: hidden;
    }

    div[role="navigation"] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        float: none;
        width: min(340px, 86vw);
        min-height: 0;
        margin: 0;
        visibility: hidden;
        transform: translateX(-100%);
        background: linear-gradient(to bottom, #2e150a 0%, #170904 100%);
        border-right: 1px solid #997c47;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.8);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.28s;
    }
    div[role="navigation"].nav-open {
        visibility: visible;
        transform: none;
    }
    div[role="navigation"]:after {
        content: none;
    }
    .nav-drawer-head {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 0 10px 0 20px;
        background: linear-gradient(to bottom, #4a220c 0%, #2a1208 100%);
        border-bottom: 1px solid #997c47;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }
    .nav-drawer-title {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #fffabd;
        text-shadow: 1px 1px #000, 0 0 12px rgba(244, 204, 106, 0.35);
    }
    .nav-close {
        position: relative;
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid #997c47;
        border-radius: 50%;
    }
    .nav-close:before,
    .nav-close:after {
        content: "";
        position: absolute;
        top: 19px;
        left: 11px;
        width: 16px;
        height: 2px;
        background: #f4cc6a;
        border-radius: 2px;
        transform: rotate(45deg);
    }
    .nav-close:after {
        transform: rotate(-45deg);
    }

    nav {
        flex: 1;
        margin: 0;
        padding: 6px 0 calc(24px + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: none;
    }
    nav:before,
    nav:after {
        content: none;
    }
    nav>ul {
        width: 100%;
    }
    nav>ul>li {
        position: relative;
        background: none;
        border-bottom: 1px solid rgba(153, 124, 71, 0.2);
    }
    nav a {
        -webkit-tap-highlight-color: transparent;
    }
    nav>ul>li>a {
        display: flex;
        align-items: center;
        height: 52px;
        margin: 0;
        padding: 0 60px 0 20px;
        font-size: 17px;
        line-height: 52px;
        color: #fffabd;
        border-left: 3px solid transparent;
    }
    nav li ul {
        display: none;
        margin: 0;
        padding: 4px 0 8px;
        background: rgba(0, 0, 0, 0.28);
        box-shadow: inset 0 6px 8px -6px rgba(0, 0, 0, 0.8);
    }
    nav>ul>li.is-open>ul {
        display: block;
    }
    nav li li {
        margin: 0;
    }
    nav li li a {
        position: relative;
        padding: 11px 20px 11px 42px;
        font-size: 14px;
        line-height: 18px;
        color: #dfbf8b;
        border-left: 3px solid transparent;
    }
    nav li li a:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 24px;
        width: 5px;
        height: 5px;
        margin-top: -3px;
        background: #7a5a2e;
        transform: rotate(45deg);
    }
    nav a:hover,
    nav a.selected {
        text-decoration: none;
        background: rgba(153, 124, 71, 0.12);
    }
    nav a.selected:before,
    nav a:hover:before,
    nav>ul>li>a.selected:before,
    nav>ul>li>a:hover:before {
        content: none;
    }
    nav li li a:hover:before,
    nav li li a.current:before {
        content: "";
        background: #f4cc6a;
    }
    nav a.current {
        color: #fff;
        background: linear-gradient(to right, rgba(244, 204, 106, 0.2), rgba(244, 204, 106, 0));
        border-left-color: #f4cc6a;
    }
    nav>ul>li.nav-section>a.current {
        background: none;
        border-left-color: transparent;
    }
    .nav-sub-toggle {
        position: absolute;
        top: 6px;
        right: 8px;
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: none;
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-sub-toggle:before {
        content: "";
        position: absolute;
        top: 14px;
        left: 15px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #f4cc6a;
        border-bottom: 2px solid #f4cc6a;
        transform: rotate(45deg);
        transition: transform 0.2s ease, top 0.2s ease;
    }
    nav>ul>li.is-open>.nav-sub-toggle:before {
        top: 18px;
        transform: rotate(-135deg);
    }
    nav>ul>li.is-open>a {
        color: #f4cc6a;
    }

    body>.container>div[role="main"] {
        float: none;
        width: 100%;
        margin: 0 0 16px;
        padding: 16px;
        background: #f6ecd8;
        border: 1px solid #c6ab74;
        border-radius: 4px;
    }
    div[role="main"]:after {
        content: none;
    }
    div[role="main"] h2 {
        background: none;
        padding: 0 0 8px;
        margin: 0 0 12px;
        border-bottom: 2px solid #7b1325;
    }

    /* sidebar panels: dark framed boxes like the desktop skin, grid on tablets */
    body>.container>div.secondary {
        float: none;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 14px;
        align-items: start;
    }
    body>.container>div.secondary:after {
        content: none;
    }
    body>.container>.secondary>aside {
        margin: 0;
        padding: 14px 16px 16px;
        background: linear-gradient(to bottom, #3a1c0b 0%, #22100a 100%);
        border: 1px solid #997c47;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #4a2c11, 0 3px 8px rgba(0, 0, 0, 0.6);
    }
    body>.container>.secondary>aside:before,
    body>.container>.secondary>aside:after {
        content: none;
    }
    .secondary>aside>h2 {
        height: auto;
        margin: 0 0 12px;
        padding: 0 0 8px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        line-height: 22px;
        color: #fffabd;
        text-shadow: 1px 1px #000;
        background: none;
        border-bottom: 1px solid #997c47;
    }

    .form-login {
        width: 100%;
        margin: 0;
    }
    .form-login label {
        display: block;
        margin: 0 0 4px;
        font-size: 13px;
        color: #dfbf8b;
    }
    .form-login .input {
        display: block;
        width: 100%;
        height: 42px;
        margin: 0 0 12px;
        padding: 0 12px;
        font-size: 16px;
        color: #3a1c0b;
        background: #f3e2bd;
        border: 1px solid #997c47;
        border-radius: 3px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .form-login .input:focus {
        outline: none;
        border-color: #fffabd;
    }
    input.btn-login {
        display: block;
        width: 100%;
        height: 46px;
        margin: 4px 0 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 18px;
        cursor: pointer;
        background: linear-gradient(to bottom, #86c653 0%, #55a02d 48%, #3b8120 52%, #2f6a18 100%) !important;
        border: 2px solid #1d3a0c;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #b6e585, 0 2px 6px #000;
    }
    input.btn-login:hover {
        background: linear-gradient(to bottom, #96d661 0%, #62b034 48%, #448f26 52%, #36781c 100%) !important;
    }
    .agbok {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
        width: auto;
        margin: 14px 0 0;
    }
    .agbok a,
    .agbok a.password {
        display: inline;
        font-size: 12px;
        line-height: 18px;
        color: #f0a35a;
    }

    /* the desktop sprite buttons become text buttons */
    .secondary>aside.download>a {
        display: block;
        width: 100%;
        height: auto;
        padding: 14px 10px;
        text-indent: 0;
        text-align: center;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 17px;
        font-weight: bold;
        color: #3a1c0b;
        text-decoration: none;
        background: linear-gradient(to bottom, #f6d27a 0%, #e0a83e 50%, #c98a24 100%);
        border: 1px solid #6b4212;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #fbe6ac, 0 2px 6px #000;
    }
    .secondary>aside.download>a:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: -3px 10px 0 0;
        vertical-align: middle;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2304' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M6.5 9.5 12 15l5.5-5.5M4 17v3h16v-3'/%3E%3C/svg%3E") center / contain no-repeat;
        filter: drop-shadow(0 1px 0 rgba(255, 240, 190, 0.7));
    }
    .secondary>aside.download>a:hover {
        background: linear-gradient(to bottom, #fbdc8c 0%, #e8b24a 50%, #d4952c 100%);
    }

    /* item shop: same gold button family, big cart icon above the label */
    .secondary>aside.itemshop>a.btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 14px 10px 12px;
        text-indent: 0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 17px;
        font-weight: bold;
        line-height: 20px;
        color: #3a1c0b;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6);
        background: linear-gradient(to bottom, #f6d27a 0%, #e0a83e 50%, #c98a24 100%);
        border: 1px solid #6b4212;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #fbe6ac, 0 2px 6px #000;
    }
    .secondary>aside.itemshop>a.btn:before {
        content: "";
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2304' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.3 1.3 0 0 0 1.3 1h8.6a1.3 1.3 0 0 0 1.3-1l1.6-7.2H6.2'/%3E%3Cpath d='M9.2 10.3h8.4M9.8 12.9h7.2'/%3E%3Ccircle cx='9.6' cy='19.4' r='1.4'/%3E%3Ccircle cx='17' cy='19.4' r='1.4'/%3E%3C/svg%3E") center / 34px no-repeat, radial-gradient(circle at 40% 35%, rgba(255, 246, 210, 0.9) 0%, rgba(240, 190, 90, 0.6) 60%, rgba(201, 138, 36, 0) 72%);
        filter: drop-shadow(0 1px 0 rgba(255, 240, 190, 0.7));
    }
    .secondary>aside.itemshop>a.btn:hover {
        text-decoration: none;
        background: linear-gradient(to bottom, #fbdc8c 0%, #e8b24a 50%, #d4952c 100%);
    }

    .secondary>aside.highscore {
        font-size: 13px;
    }
    .secondary>aside ul.tabcontrols {
        display: flex;
        gap: 6px;
        width: 100%;
        height: auto;
        margin: 0 0 12px;
        background: none;
    }
    .secondary>aside ul.tabcontrols>li,
    .secondary>aside ul.tabcontrols>li.selected {
        flex: 1;
        width: auto;
        height: 40px;
        margin: 0;
        background: #1a0b04;
        border: 1px solid #4a2c11;
        border-radius: 3px;
        opacity: 0.6;
    }
    .secondary>aside ul.tabcontrols>li.selected {
        background: #4a2c11;
        border-color: #997c47;
        opacity: 1;
    }
    .secondary>aside ul.tabcontrols a {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .secondary>aside ul.tabcontrols a>img {
        margin: 0;
    }
    .secondary>aside.highscore table {
        width: 100%;
    }
    .secondary>aside.highscore table tr {
        height: 30px;
        border-bottom: 1px solid #3a2310;
    }
    .secondary>aside.highscore table tr.alt {
        background: rgba(153, 124, 71, 0.12);
    }
    .secondary>aside.highscore td.position {
        width: 32px;
        text-align: center;
    }
    .secondary>aside.highscore td.name>a {
        color: #dfbf8b;
    }
    .secondary>aside.highscore .inner-form-border {
        margin: 0;
        border: 1px dashed #4a2c11;
        border-radius: 3px;
        box-shadow: none;
    }
    .secondary>aside.highscore .inner-form-box {
        padding: 18px 8px;
        font-size: 13px;
        color: #b99a68;
        background: rgba(0, 0, 0, 0.25);
        border: 0;
    }
    .secondary>aside.highscore>.tab>a {
        width: 100%;
        height: auto;
        margin: 12px 0 0;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        background: #1a0b04;
        border: 1px solid #997c47;
        border-radius: 3px;
    }
    .secondary>aside.highscore>.tab>a:after {
        content: "\00A0\203A";
    }

    footer[role="contentinfo"] {
        height: auto;
        padding: 24px 12px;
        background: #2b1608;
    }
    footer[role="contentinfo"]>.container {
        width: 100%;
        height: auto;
        padding: 0;
        color: #e0c0a9;
    }

    /* fixed-width content boxes/panels that only fit inside the old 585px column */
    .content,
    .content .content-bg-bottom,
    .box-foot,
    #news_compact img.full,
    .content .tabs-nav,
    .smfaqbox,
    .ranks-update-time,
    .ranks-dropdowns-box,
    .inner-form-border,
    article.trailer,
    article.nesnemarket,
    #progressTracker,
    #highscore .content-bg-bottom,
    #guildHighscore .content-bg-bottom {
        width: auto !important;
        max-width: 100%;
    }
    article.mini-gallery {
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: #2b1608;
    }
    article.mini-gallery img {
        float: none;
        margin: 8px;
    }
    div[role="main"] img,
    .content img,
    article img {
        max-width: 100%;
        height: auto;
    }
    div[role="main"] iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    /* desktop pins the trailer frame to 268px; let it follow the 16:9 video */
    article.trailer {
        height: auto;
    }
    div[role="main"] table,
    .content table {
        max-width: 100%;
    }
    .ranks-inner-content,
    #highscore .content-bg-bottom,
    #guildHighscore .content-bg-bottom,
    .calendar-section {
        overflow-x: auto;
    }
    #highscore table,
    #guildHighscore table {
        width: 100%;
        min-width: 480px;
    }
    #rankingsTable {
        width: 100% !important;
        min-width: 480px;
    }
}

/* ============================================================
   Responsive inner pages: the 481-507px sprite boxes become
   fluid parchment cards, sprite tabs become flex tabs.
   ============================================================ */
@media (max-width: 1024px) {
    div[role="main"] div.content {
        margin-left: 0;
    }
    .content,
    .content .content-bg,
    .content .content-bg-bottom {
        padding: 0;
        background: none;
    }
    .content h2 {
        padding: 8px 0;
        background: none;
    }
    .box-foot,
    .download-box-foot {
        display: none;
    }

    /* art boxes: text area + portrait share one 481px image; scale it to 130px high on the
       right and float a spacer over the portrait so the text wraps around it like on desktop */
    .characterclasses,
    .aboutbox-1,
    .aboutbox-2,
    .aboutbox-3,
    .aboutbox-4,
    .aboutbox-5,
    .firststepsbox-1,
    .firststepsbox-2,
    .firststepsbox-3,
    .firststeps-inner-content .tutorialsbox,
    .firststeps-inner-content .community {
        position: relative;
        z-index: 0;
        width: auto !important;
        min-height: 0;
        margin-bottom: 14px;
        padding: 12px 14px;
        background-position: right top;
        background-size: auto 130px;
        background-color: #efdfbb;
        border: 1px solid #c6ab74;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #fbf4e2, 0 1px 3px rgba(74, 30, 0, 0.25);
        overflow: hidden;
    }
    .characterclasses:before,
    .aboutbox-1:before,
    .aboutbox-2:before,
    .aboutbox-3:before,
    .aboutbox-4:before,
    .aboutbox-5:before,
    .firststepsbox-1:before,
    .firststepsbox-2:before,
    .firststepsbox-3:before,
    .firststeps-inner-content .tutorialsbox:before,
    .firststeps-inner-content .community:before {
        content: "";
        float: right;
        width: 140px;
        height: 118px;
        margin: 0 -14px 6px 10px;
    }
    /* on wide cards the scaled image ends mid-card; fade its edges into the card colour (below the text) */
    .characterclasses:after,
    .aboutbox-1:after,
    .aboutbox-2:after,
    .aboutbox-3:after,
    .aboutbox-4:after,
    .aboutbox-5:after,
    .firststepsbox-1:after,
    .firststepsbox-2:after,
    .firststepsbox-3:after,
    .firststeps-inner-content .tutorialsbox:after,
    .firststeps-inner-content .community:after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        height: 130px;
        background: linear-gradient(to right, #efdfbb calc(100% - 360px), rgba(239, 223, 187, 0) calc(100% - 250px)), linear-gradient(to bottom, rgba(239, 223, 187, 0) 70%, #efdfbb 100%);
    }
    .characterclasses>h4,
    .aboutbox-1>h4,
    .aboutbox-2>h4,
    .aboutbox-3>h4,
    .aboutbox-4>h4,
    .aboutbox-5>h4,
    .firststepsbox-1>h4,
    .firststepsbox-2>h4,
    .firststepsbox-3>h4,
    .firststeps-inner-content .tutorialsbox>h4,
    .firststeps-inner-content .community>h4 {
        /* own formatting context: the heading and its underline stop beside the portrait spacer */
        display: flow-root;
        width: auto !important;
        font-size: 16px;
        line-height: 20px;
    }

    .securitybox,
    .empirebox-1,
    .empirebox-2,
    .empirebox-3,
    .gallerybox,
    .input-data-box {
        width: auto !important;
        min-height: 0;
        margin-bottom: 12px;
        padding: 12px 14px;
        background: linear-gradient(to bottom, #f7ecd4 0%, #efdfbb 100%);
        border: 1px solid #c6ab74;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #fbf4e2, 0 1px 3px rgba(74, 30, 0, 0.25);
    }
    /* content images with inline desktop sizing (e.g. account page: max-width:455px; margin-left:6px) */
    div[role="main"] img[style*="max-width"] {
        display: block;
        max-width: 100% !important;
        height: auto;
        margin: 6px auto 0 !important;
    }

    /* gallery thumbnails: centered wrap instead of left floats */
    #screenshots,
    #wallpaper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    #screenshots a,
    #wallpaper a {
        float: none;
    }
    .gallerybox:after,
    .input-data-box:after {
        content: "";
        display: block;
        clear: both;
    }
    .about-inner-content .aboutbox-5 p,
    .about-inner-content .aboutbox-5 h4,
    .about-inner-content p.first-content,
    .securitybox p,
    .empires-content p,
    .download-inner-column-left p,
    .download-inner-column-right p,
    .administration-inner-content ul li,
    #downloadText,
    #required {
        width: auto;
    }
    .download-inner-content h4,
    .gallery-inner-content h4,
    .administration-inner-content h4 {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    /* sprite tabs -> equal flex tabs; !important beats the per-#tabN sprite offsets */
    .content .tabs-nav {
        display: flex;
        gap: 4px;
        width: auto;
        height: auto;
        margin: 0 0 12px;
        border-bottom: 2px solid #7b1325;
    }
    .content .tabs-nav li {
        display: flex;
        flex: 1 1 0;
        float: none;
        width: auto !important;
        height: auto;
        min-height: 40px;
        padding: 0;
        background: linear-gradient(to bottom, #e7d3a6 0%, #d4b981 100%) !important;
        border: 1px solid #b0915a;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
    }
    .content .tabs-nav li.selected {
        background: linear-gradient(to bottom, #8d1a2c 0%, #7b1325 100%) !important;
        border-color: #7b1325;
    }
    .content .tabs-nav li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: auto;
        padding: 8px 4px;
        font-size: 12px;
        line-height: 15px;
        text-align: center;
    }
    .content .tabs-nav li.selected a {
        color: #fffabd;
    }

    /* download page */
    .download-inner-column-left,
    .download-inner-column-right {
        float: none;
        width: auto;
        background-image: none;
    }
    #download table {
        width: 100% !important;
        margin-left: 0 !important;
        table-layout: auto !important;
    }
    .left_td {
        width: auto;
    }

    /* empires: the image map keeps its 481px coordinates and is scaled down below */
    .empires-content .empires-map {
        margin: 0 auto;
        transform-origin: 0 0;
    }
    .empires-content .empire-crest {
        position: static;
        float: right;
        margin: 0 0 6px 8px;
    }

    /* ranking pages (DataTables); #highscore #rankingsTable outranks the inline <style> column widths */
    #highscore #rankingsTable {
        width: 100% !important;
        min-width: 0;
        border-collapse: collapse;
        border: 1px solid #997c47;
        box-shadow: 0 1px 4px rgba(74, 30, 0, 0.3);
    }
    #highscore #rankingsTable th,
    #highscore #rankingsTable td {
        width: auto;
        height: auto;
        padding: 9px 5px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        vertical-align: middle;
        border: 0;
    }
    #highscore #rankingsTable thead th {
        padding: 11px 5px;
        white-space: nowrap;
        color: #f4cc6a;
        text-shadow: 1px 1px #000;
        background: linear-gradient(to bottom, #4a220c 0%, #2a1208 100%);
        border-bottom: 2px solid #997c47;
    }
    #highscore #rankingsTable thead th:before,
    #highscore #rankingsTable thead th:after {
        display: none;
    }
    #highscore #rankingsTable tbody td {
        color: #4a1e00;
        background: #f7ecd4;
        border-bottom: 1px solid #e2cfa6;
    }
    #highscore #rankingsTable tbody tr:nth-child(even) td {
        background: #efdfbb;
    }
    #highscore #rankingsTable tbody td:first-child {
        font-weight: bold;
        white-space: nowrap;
    }
    #highscore #rankingsTable tbody td:nth-child(2) {
        font-weight: bold;
        color: #7b1325;
        word-break: break-word;
    }
    #highscore #rankingsTable td img {
        width: 26px;
        height: auto;
        vertical-align: middle;
        border: 1px solid #624f32;
    }
    /* top three: warm row + gold / silver / bronze medal before the rank */
    #highscore #rankingsTable tbody tr.rank-top td {
        background: #f6e3ae;
    }
    #highscore #rankingsTable tbody tr.rank-top td:first-child:before {
        content: "";
        display: inline-block;
        width: 11px;
        height: 11px;
        margin: -2px 5px 0 0;
        vertical-align: middle;
        border-radius: 50%;
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.4);
    }
    #highscore #rankingsTable tbody tr.rank-top-1 td:first-child:before {
        background: radial-gradient(circle at 35% 35%, #fff3b0 0%, #d4a017 60%, #9a6f00 100%);
    }
    #highscore #rankingsTable tbody tr.rank-top-2 td:first-child:before {
        background: radial-gradient(circle at 35% 35%, #ffffff 0%, #b8b8b8 60%, #7a7a7a 100%);
    }
    #highscore #rankingsTable tbody tr.rank-top-3 td:first-child:before {
        background: radial-gradient(circle at 35% 35%, #ffd9b0 0%, #c07a3a 60%, #7a4a1e 100%);
    }

    #highscore .dataTables_filter {
        float: none;
        margin: 0 0 12px;
        text-align: left;
    }
    #highscore .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 13px;
        font-weight: bold;
        color: #4a1e00;
    }
    #highscore .dataTables_filter input {
        flex: 1;
        width: auto !important;
        height: 38px;
        margin: 0;
        padding: 0 10px;
        font-size: 16px;
        color: #3a1c0b;
        background: #fff8e6;
        border: 1px solid #997c47;
        border-radius: 3px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    /* compact prev/next buttons side by side (a.paginate_button > div.ranks-nav, with or without a ul wrapper) */
    #highscore .dataTables_paginate,
    #highscore .dataTables_paginate ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
        float: none;
        margin: 14px 0 0;
        padding: 0;
    }
    #highscore .dataTables_paginate ul {
        margin: 0;
    }
    #highscore .dataTables_paginate * {
        background-image: none;
    }
    #highscore .dataTables_paginate li {
        list-style: none;
    }
    #highscore .dataTables_paginate a {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        text-decoration: none;
    }
    /* the legacy .prev / .next sprites pin these to 241px / 240px */
    #highscore .ranks-nav {
        float: none;
        width: auto;
        height: auto;
        padding: 7px 12px;
        text-align: center;
        white-space: nowrap;
        line-height: 16px;
        font-size: 11px;
        color: #f4cc6a !important;
        background: linear-gradient(to bottom, #4a220c 0%, #2a1208 100%) !important;
        border: 1px solid #997c47;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px #5c3414;
    }
    #highscore .disabled .ranks-nav {
        opacity: 0.4;
    }

    /* forms (login, register, account) */
    .inner-form-border {
        margin: 0 0 16px;
        border-color: #c6ab74;
        border-radius: 4px;
    }
    /* same parchment card as the other boxes instead of the darker textured jpg */
    .inner-form-box {
        background: linear-gradient(to bottom, #f7ecd4 0%, #efdfbb 100%);
        border-color: #fbf4e2;
        border-radius: 3px;
    }
    .trenner {
        width: auto;
        height: 1px;
        margin: 4px 0 16px;
        background: linear-gradient(to right, rgba(178, 138, 69, 0), #b28a45 15%, #b28a45 85%, rgba(178, 138, 69, 0));
        border: 0;
    }
    .inner-form-box form,
    .inner-form-box form div {
        width: auto !important;
        max-width: 100%;
    }
    .inner-form-box input[type="text"],
    .inner-form-box input[type="password"],
    .inner-form-box input[type="email"],
    .inner-form-box input[type="number"] {
        width: 100% !important;
        max-width: 100%;
    }
    div[role="main"] #submitBtn {
        max-width: 100%;
    }
    .administration-box {
        width: auto;
        margin-left: 0;
        padding: 0;
    }
}

@media (max-width: 540px) {
    .empires-content .empires-map {
        transform: scale(0.8);
        margin: 0 0 -68px calc((100% - 385px) / 2);
    }
}

@media (max-width: 440px) {
    .empires-content .empires-map {
        transform: scale(0.64);
        margin: 0 0 -123px calc((100% - 308px) / 2);
    }
}

@media (max-width: 480px) {
    .input-data-box .box-img {
        display: none;
    }
    /* player Exp / guild leader columns drop so the rest fits without side scrolling */
    #highscore #rankingsTable .col-optional {
        display: none;
    }
    #highscore #rankingsTable th,
    #highscore #rankingsTable td {
        padding-left: 3px;
        padding-right: 3px;
    }
    #highscore .ranks-nav {
        padding-left: 8px;
        padding-right: 8px;
    }
    body {
        background-size: 1000px auto;
    }
    body>header[role="banner"] {
        padding-top: 115px;
    }
    body>header>.ui.container>a.playfree {
        font-size: 20px;
    }
    div[role="main"] {
        padding: 12px;
    }
    div[role="main"] h2 {
        font-size: 15px;
    }
    .header-box-nav-login {
        flex-direction: column;
    }
    .nav-box-btn {
        width: 100%;
    }
}

/* ============================================================
   Responsive: logged-in header box and account page
   ============================================================ */
@media (max-width: 1024px) {
    body>header>.ui.container>.userinfo {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 12px;
        max-width: 460px;
        margin: 0 auto;
        padding: 12px 14px 14px;
        background: linear-gradient(to bottom, rgba(58, 28, 11, 0.94) 0%, rgba(26, 11, 4, 0.94) 100%);
        border: 1px solid #997c47;
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px rgba(244, 204, 106, 0.12), 0 4px 14px rgba(0, 0, 0, 0.6);
    }
    .welcome-text-left {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 14px;
        color: #dfbf8b;
    }
    .welcome-name {
        font-size: 16px;
        font-weight: bold;
        color: #fffabd;
    }
    body>header>.ui.container>.userinfo .right {
        flex: none;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 6px;
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
        color: #f4cc6a;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid #7a5a2e;
        border-radius: 999px;
    }
    body>header>.ui.container>.userinfo .right:before {
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #fff3b0 0%, #d4a017 60%, #9a6f00 100%);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    }
    .ep-label {
        display: none;
    }
    .ep-amount:after {
        content: " EP";
        color: #dfbf8b;
    }
    body>header>.ui.container>.userinfo .header-box-nav-container {
        flex: 1 0 100%;
        margin: 2px 0 0;
    }
    body>header>.ui.container>.userinfo .header-box-nav-login {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    body>header>.ui.container>.userinfo .header-box-nav-login li {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }
    body>header>.ui.container>.userinfo .nav-box-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        padding: 0 6px;
        font-size: 13px;
        font-weight: bold;
        line-height: 15px;
        text-align: center;
        text-decoration: none;
        color: #fffabd;
        background: linear-gradient(to bottom, #6a1a10 0%, #45100a 100%) !important;
        border: 1px solid #997c47;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px rgba(255, 220, 160, 0.12);
    }
    /* the buy-EP button stands out, logout stays quiet */
    body>header>.ui.container>.userinfo .nav-box-btn-1 {
        color: #3a1c0b;
        text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6);
        background: linear-gradient(to bottom, #f6d27a 0%, #e0a83e 50%, #c98a24 100%) !important;
        border-color: #6b4212;
        box-shadow: inset 0 0 0 1px #fbe6ac;
    }
    body>header>.ui.container>.userinfo .nav-box-btn-4 {
        color: #dfbf8b;
        background: rgba(0, 0, 0, 0.3) !important;
        border-color: #5c4424;
        box-shadow: none;
    }

    /* account page: key/value rows + tappable action cards */
    .administration-inner-content .input-data-box>h4 {
        margin: 0 0 8px;
        font-size: 16px;
    }
    .administration-inner-content .input-data-box>ul {
        margin: 0 0 16px;
        padding: 0;
        font-size: 13px;
        background: rgba(255, 250, 235, 0.6);
        border: 1px solid #d9c190;
        border-radius: 4px;
    }
    .administration-inner-content .input-data-box>ul>li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        width: auto;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 18px;
        color: #6b4a2a;
        background: none;
        border-bottom: 1px solid #e6d3a8;
    }
    .administration-inner-content .input-data-box>ul>li:last-child {
        border-bottom: 0;
    }
    .administration-inner-content .input-data-box>ul>li>b {
        min-width: 0;
        overflow-wrap: anywhere;
        text-align: right;
        color: #4a1e00;
    }
    .administration-box {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 8px;
        padding: 8px 36px 8px 8px;
        line-height: 18px;
        background: rgba(255, 250, 235, 0.6);
        border: 1px solid #d9c190;
        border-radius: 4px;
    }
    .administration-box:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 2px solid #997c47;
        border-right: 2px solid #997c47;
        transform: rotate(45deg);
    }
    .administration-box a.btn {
        position: static;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        width: 84px;
        height: 34px;
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #f4cc6a;
        text-decoration: none;
        background: linear-gradient(to bottom, #6a1a10 0%, #45100a 100%);
        border: 1px solid #997c47;
        border-radius: 4px;
    }
    /* the whole card taps the button */
    .administration-box a.btn:before {
        content: "";
        position: absolute;
        inset: 0;
    }
    .administration-box p {
        flex: 1;
        margin: 0;
        font-size: 14px;
        color: #4a1e00;
    }
    .administration-box:active {
        background: rgba(244, 204, 106, 0.25);
    }
}

/* ============================================================
   Item shop full-screen overlay (screens below 1060px, see dashboard.blade.php)
   ============================================================ */
.shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    flex-direction: column;
    background: #140804;
}
.shop-overlay.is-open {
    display: flex;
    animation: shopOverlayIn 0.22s ease-out;
}
@keyframes shopOverlayIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
html.shop-open,
html.shop-open body {
    overflow: hidden;
}
.shop-overlay-bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: env(safe-area-inset-top) 8px 0 16px;
    background: linear-gradient(to bottom, #4a220c 0%, #2a1208 100%);
    border-bottom: 1px solid #997c47;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.shop-overlay-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fffabd;
    text-shadow: 1px 1px #000, 0 0 12px rgba(244, 204, 106, 0.35);
}
.shop-overlay-close {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #997c47;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.shop-overlay-close:before,
.shop-overlay-close:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 11px;
    width: 16px;
    height: 2px;
    background: #f4cc6a;
    border-radius: 2px;
    transform: rotate(45deg);
}
.shop-overlay-close:after {
    transform: rotate(-45deg);
}
.shop-overlay-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #000;
}

/* download page: keep the label centred on the button sprite */
#download #highscore .btn-giris {
	box-sizing: border-box;
	height: 20px;
	padding: 0;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
}

/* download page: the links table must fit the phone/tablet column instead of forcing 480px */
@media (max-width: 1024px) {
	#download #highscore table {
		width: calc(100% - 20px) !important;
		min-width: 0 !important;
		table-layout: auto !important;
		margin-left: 10px !important;
	}
	#download #highscore th,
	#download #highscore td {
		padding: 8px 4px;
		font-size: 11px;
		word-break: break-word;
	}
	#download #highscore td:last-child {
		text-align: center !important;
	}
	/* the 129x20 button sprite is stretched to the narrower button so both end caps show */
	#download #highscore .btn-giris {
		display: inline-block;
		width: 72px !important;
		min-width: 0 !important;
		margin: 0 !important;
		background-size: 100% 100%;
		font-size: 11px;
	}
}