/****** IMPORTS ******/


/****** START RESETS ******/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, strong, i, ol, ul, li,
fieldset, form, label, legend,
table, tbody, tfoot, thead, tr, th, td {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0px;
}
a, a:hover {
    text-decoration: none;
}
a img {
    border: none;
}
hr {
    border: 0px;
    margin: 0px;
}
/****** END RESETS ******/


/****** START CONTENT ELEMENTS ******/
body {
    font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 13px;
    color: #000;
    background: #7C7761 url("../gui/help/background-main.png") no-repeat center top;
}
.right-to-left {
    direction: rtl;
}
    .right-to-left #nav,
    #town-map div {
        float: right !important;
    }
    .right-to-left #content {
        float: left;
    }
    .right-to-left .article {
        padding: 0px 47px 25px 39px;
    }
    .right-to-left .article h2 {
        margin: 0px -47px 25px -39px;
        padding: 14px 85px 14px 33px;
        background-position:left -71px;
    }
        .right-to-left .article a.bullet {
                left: 45px;
                right: inherit;
        }
        .right-to-left .article span.ornament {
                right: -13px;
            background: url("../gui/help/article-sprite.png") no-repeat -96px top;
        }
        .right-to-left .article span.shape {
                left: inherit;
                right: 47px;
        }
    .right-to-left #town-map {
        margin:0px 0px 0px 13px;
    }
        .right-to-left .town-map li:after {
            right: 59px;
        }
    .right-to-left .town-info h3 {
        padding: 9px 15px 9px 45px;
    }
    .right-to-left .race-img.race1 {
            background: url("../gui/help/race-img-sprite-rtl.jpg") no-repeat left top;
        }
    .right-to-left .race-img.race2 {
        background: url("../gui/help/race-img-sprite-rtl.jpg") no-repeat left -143px;
    }
    .right-to-left .tabs {
        left: inherit;
        right: -1px;
    }
    .right-to-left .tabs li {
        margin: 0px 0px 0px 3px;
    }
    .right-to-left .tabs li:last-child {
        margin-left: 0px;
    }
    .right-to-left #content #game-speed {
        right: inherit;
        left: -1px;
    }
    .right-to-left #content ul ul,
    .right-to-left #content ul ul ul {
            margin: 5px 35px 0px 0;
    }
    .right-to-left #to-top {
            right: inherit;
        border-left: 1px solid #863718;
        border-right: 0px;
    }
    .right-to-left .currently-selected em {
        background-position: top left;
    }
    .right-to-left .pretty-select a.currently-selected em img,
    .right-to-left .pretty-select .flag {
        float: right;
    }
.arabic .race-img,
.arabic #game-speed {
    display: none;
}
#wraper {
    width: 977px;
    margin: 0px auto;
    padding: 50px 0px 15px 0px;
}
#nav {
    position: fixed;
    float: left;
    width: 160px;
}
    #menu {
        margin-bottom: 4px;
    }
    #menu a {
        display: block;
        line-height: 24px;
        padding:0px 8px;
        font-size: 14px;
        text-decoration: none;
        color: #863718;
        border-bottom: 1px solid #863718;
        background-color: #D1BF98;
    }
    #menu a:last-child {
        border-bottom: 1px solid #95886A;
    }
    #menu a:hover, 
    #menu a.active {
        background-color: #863718;
        color: #FFF;
    }
#content {
    position: relative;
    float: right;
    width: 731px;
    padding: 0px 35px 10px 35px;
    line-height: 16px;
    border: 1px solid #863718;
    background: #D7C49A url("../gui/help/background-content.jpg") repeat-y;
    box-shadow: 2px 10px 20px #333;
}
    #content strong {
        font-weight: bold;
    }
    #content p {
        margin-bottom: 20px;
    }
    #content p.last{
        margin-bottom: 0px;
    }
    #content p.start{
        margin-top: 15px;
    }
    #content a {
        color: #863718;
        text-decoration: underline;
    }
    #content a:hover {
        text-decoration: none;
    }
    #content ul {
        margin-left: 35px;
        list-style: square inside;
    }
        #content ul.start {
            margin-left: 0px;
        }
        #content ul.inside {
            list-style-position: inside;
        }
        #content li {
            padding-bottom: 20px;
        }
        #content li.last {
            padding-bottom: 0px;
        }
        #content li.none {
            list-style-type: none;
        }
        #content ul ul {
            margin: 5px 0px 0px 35px;
            list-style: disc outside;
        }
        #content ul ul ul {
            margin: 5px 0px 0px 35px;
            list-style: circle outside;
        }
    #content table {
        width: 100%;
    }
        #content tr.odd {
            background: url("../gui/help/table-bg.png");
        }
        #content th {
            padding: 5px;
            color: #863718;
            vertical-align: middle;
        }
            #content th .icon {
                display: none;
                width: 56px;
                height: 41px;
                margin: 0px auto;
                background-image: url("../gui/help/units-sprite.png");
            }
            #content th .icon.attack  { background-position: -56px 0px; }
            #content th .icon.points  { background-position: -112px 0px; }
            #content th .icon.cspeed  { background-position: -168px 0px; }
            #content th .icon.speed   { background-position: 0px -41px; }
            #content th .icon.upkeep  { background-position: -56px -41px; }
            #content th .icon.carry   { background-position: -112px -41px; }
            #content th .icon.pillage { background-position: -168px -41px; }
        #content td {
            padding: 5px;
            text-align: center;
            border-top: 2px solid #863718;
            vertical-align: middle;
        }
    #content table.third-stack {
        float: left;
        width: 32%;
        margin-right: 1%;
        margin-bottom: 10px;
    }
    #content table.third-stack.row {
        width: 34%;
        margin-right: 0%;
    }
    #to-top-right {
        float: right;
        width: 29px;
        margin-right: -64px;
    }
        .right-to-left #to-top-right {
            float: left;
            margin: 0px 0px 0px -64px;
        }
    #to-top {
        position: fixed;
            bottom: 15px;
        display: none;
        width: 30px;
        height: 60px;
        line-height: 70px;
        font-size: 24px;
        color: #863718;
        text-align: center;
        border: 1px solid #863718;
        border-left: none;
        background: #E7D2A5;
        cursor: pointer;
    }
        #to-top:hover {
            color: #000;
        }
.head-article {
    margin-bottom: 24px;
    padding: 0px 39px 25px 47px;
    background: url("../gui/help/article-bg.png");
}
    .head-article h1 {
        margin: 0px -39px 0px -47px;
        padding: 19px 39px 18px 47px;
        font-size: 22px;
        line-height: 22px;
        color: #FFF;
        text-align: center;
        word-wrap: break-word;
        background: #863718;
    }
    .head-article.bg h1 {
        background: #863718 url("../gui/help/head-article-bg.jpg") no-repeat;
    }
    .head-article h1 span {
        display: block;
        margin-top: 5px;
        font-size: 16px;
    }
    .head-article img {
        max-width: 646px;
        margin-bottom: 15px;
    }
.article {
    position: relative;
    margin-top: 10px;
    padding: 0px 39px 25px 47px;
}
    .article:target h2 {
        color:#E7D2A5;
    }
    #glossary .article:target p {
        padding: 10px;
        background: url("../gui/help/article-text-box-bg.png");
    }
    .article h2 {
        margin: 0px -39px 25px -47px;
        padding: 14px 33px 14px 85px;
        font-size: 18px;
        color: #FFF;
        background: #863718 url("../gui/help/article-sprite.png") no-repeat right -27px;
    }
    .article a.bullet {
        position: absolute;
            top: 14px;
            right: 45px;
        display: block;
        width: 16px;
        height: 17px;
        background: url("../gui/help/article-sprite.png") no-repeat left top;
    }
    .article span.ornament {
        position: absolute;
            top: 44px;
            left: -13px;
        display: block;
        width: 51px;
        height: 27px;
        background: url("../gui/help/article-sprite.png") no-repeat -44px top;
    }
    .article span.shape {
        position: absolute;
            top: 10px;
            left: 47px;
        display: block;
        width: 26px;
        height: 25px;
        background: url("../gui/help/article-sprite.png") no-repeat -17px top;
    }
    #content .article .town-map {    
        margin: 50px 0px 17px 0px;
        list-style-type: none;
    }
    #content .article .town-map li {
        position: relative;
        display: inline-block;
        padding: 0px 5px;
        padding-bottom: 0px;
        margin-right: 5px;
        line-height: 15px;
        font-size: 12px;
    }
    .article .town-map li:hover,
    .article .town-map li.active {
        background: #863718;
    }
    
    .town-map li:after {
        content: "|";
        position: absolute;
            top: -1px;
            right: -6px;
        display: inline-block;
    }
    .town-map li.last:after {
        content: "";
    }
    #content .town-map a {
        text-decoration: none;
        color: #000;
    }
    #content .town-map li.active a,
    #content .town-map li:hover a {
        color: #FFF;
    }
    #town-map {
        position: relative;
        display: inline-block;
        width: 390px;
        height: 202px;
        margin-right: 13px;
        vertical-align: top;
    }
        #town-map div {
            position: absolute;
            display: block;
            width: 390px;
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
        #town-map area {
            display: block;
            cursor: pointer;
        }
        #town-map #div2 {
            display: none;
        }
    .town-info {
        display: inline-block;
        *display: inline;
        zoom: 1;
        max-width: 238px;
    }
        .town-info div {
            display: none;
            max-height: 250px;
            overflow-y: auto;
        }
        .town-info p {
            margin-left: 10px;
        }
        .town-info h3 {
            display: inline-block;
            margin-bottom: 15px;
            padding: 9px 45px 9px 15px;
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            background: #863718;
        }
    #modal-bg {
        position: fixed;
            top: 0px;
            left: 0px;
            z-index: 9000;
        display: none;
        width: 100%;
        height: 100%;
        background: url("../gui/help/modal-bg.png");
    }
    .modal {
        box-shadow: 4px 4px 40px #000;
        direction: ltr;
        position: absolute;
            top: 150px;
            left: 167px;
            z-index: 9001;
        display: none;
        width: 465px;
        background: #D7C49A url("../gui/help/background-content.jpg") repeat-y;
    }
        .modal-header {
            position: relative;
            height: 80px;
            background: url("../gui/help/modal-footer-bg.png");
        }
            .modal-header h1 {
                position: absolute;
                    top: 6px;
                    left: 9px;
                width: 446px;    
                height: 67px;
                background: url("../gui/help/modal-sprite.png") no-repeat 0px -28px;
            }
        .modal h2 {
            position: relative;
            margin: 7px 28px 15px 30px;
            padding: 12px 28px 16px 44px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #FFF;
            background: #863718;
        }
        .modal h2 span.ornament-l {
            position: absolute;
                top: 37px;
                left: -21px;
            width: 51px;
            height: 27px;
            background: url("../gui/help/modal-sprite.png") no-repeat;
        }
        .modal h2 span.ornament-r {
            position: absolute;
                top: 39px;
                right: -19px;
            width: 41px;
            height: 27px;
            background: url("../gui/help/modal-sprite.png") no-repeat -53px 0px;
        }
        .modal .content {
            padding: 0px 55px 0px 74px;
            color: #000;
        }
        .modal a {
            color: #F7CF8A !important;
            text-decoration: underline;
        }
        .modal a:hover {
            text-decoration: none;
        }
        .modal-footer {
            height: 33px;
            text-align: center;
            background: url("../gui/help/modal-footer-bg.png");
        }
        .modal-footer button {
            display:inline-block;
            margin-top: 7px;
            padding:0px 18px;
            height: 20px;
            line-height: 21px;
            font-size: 13px;
            font-weight: bold;
            color: #FFF;
            text-transform: uppercase;
            border: 0px;
            border-bottom: 1px solid #995332;
            background: #863718;
            cursor: pointer;
        }
    #dictionary {
        margin: 20px 0px 35px 0px !important;
        list-style: none !important;
        text-align: center;
        font-size: 0;
        border-bottom: 3px solid #863718;
    }
        #dictionary li {
            position: relative;
            display: inline-block;
            margin: 0px 1px;
            padding-bottom: 0px !important;
            border: 1px solid transparent;
        }
        #dictionary li:hover, 
        #dictionary li.active {
                -webkit-border-top-left-radius: 2px;
                -webkit-border-top-right-radius: 2px;
                -moz-border-radius-topleft: 2px;
                -moz-border-radius-topright: 2px;
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
            background: #863718;
            border: 1px solid #863718;
        }    
        #dictionary a {
            display: inline-block;
            width: 14px;
            padding: 19px 2px 10px 2px;
            text-decoration: none;
            font-size: 16px;
            color: #000;
        }
        #dictionary li:hover a,
        #dictionary li.active a {
            color: #FFF;
        }
        #dictionary span {
            display: none;
        }
        #dictionary li.active span,
        #dictionary li:hover span {
            position: absolute;
                top: 4px;
                left: 6px;
            display: block;
            width: 6px;
            height: 6px;
            background: #D2BF97;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }
    .text-box {
        display: none;
        margin-bottom: 10px;
        padding: 10px;
        font-size: 13px;
        background: url("../gui/help/article-text-box-bg.png");
    }
        .text-box.last {
            margin: 10px 0px 0px 0px;
        }
        .text-box-collapse {
            display: inline-block;
            margin: 5px 0px;
            font-size: 14px;
        }
            .text-box-collapse.start {
                margin-top: 0px;
            }
            .text-box-collapse.last {
                margin-bottom: 0px;
            }
            #content a.underline {
                text-decoration: none;
                color: #000;
            }
    .race-img {
        height: 143px;
        margin: 32px 0px 20px 0px;
    }
        .race-img.race1 { background: url("../gui/help/race-img-sprite.jpg") no-repeat left top; }
        .race-img.race2 { background: url("../gui/help/race-img-sprite.jpg") no-repeat left -143px; }
    #content .tabs {
        position: absolute;
            top: -26px;
            left: -1px;
        margin: 0px;
        font-size: 0px;
        list-style-type: none;
    }
        .tabs li {
            display: inline-block;
            margin-right: 3px;
        }
        .tabs li:last-child {
            margin-right: 0px;
        }
            #content .tabs a {
                display: inline-block;
                height: 24px;
                line-height: 24px;
                padding: 0px 15px;
                text-decoration: none;
                font-size: 14px;
                color: #863718;
                border: 1px solid #863718;
                background: #D7C49A url("../gui/help/background-content.jpg") repeat-y;
            }
            #content .tabs a.active {
                padding-bottom: 1px;
                color: #000;
                border-bottom: none;
            }
    #content #game-speed {
        display: none;
        position: absolute;
            top: -27px;
            right: -1px;
        margin: 0px;
        font-size: 0;
        list-style-type: none;
    }
        #game-speed li, 
        #content #game-speed a {
            display: inline-block;
            height: 26px;
            line-height: 26px;
            padding-bottom: 0px;
            font-size: 12px;
            text-decoration: none;
            color: #CFBD95;
            background: #662A12;
        }
        #content #game-speed a {
            padding: 0px 6px;
            border-left: 1px solid #55230F;
        }
        #content #game-speed a:first-letter {
            font-size: 10px;
        }
        #game-speed li.label {
            padding: 0px 8px;
        }
        #content #game-speed .active a{
            text-decoration: underline;
            color: #FFF;
        }
        #content #game-speed a:hover {
            color: #FFF;
        }
    .clear:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
    * html .clear             { zoom: 1; } /* IE6 */
    *:first-child+html .clear { zoom: 1; } /* IE7 */
/****** END CONTENT ELEMENTS ******/


/****** START MEDIA QUERIES ******/
@media all and (max-width : 1000px), all and (max-device-width: 1000px) {
    .right-to-left #content {
        float: none;
        margin: 0px 170px 0px 33px;
        padding: 12px 15px 25px 24px;
    }
    .right-to-left #nav,
    #town-map div {
        float: none !important;
    }
    .right-to-left #content {
        float: none;
        padding: 12px 15px 25px 24px;
    }
    .right-to-left .article h2 {
        margin: 0px -19px 25px -27px;
    }
    .right-to-left #nav {
        position: absolute;
            left: inherit;
            right: 2px;
    }
    .right-to-left .article h2 {
        margin: 0px -47px 25px -39px;
    }
    .right-to-left .article span.shape {
        left: inherit;
        right: 47px;
    }
    .right-to-left .article span.ornament {
        left: inherit;
        right: -13px;
    }
    
    #wraper {
        width: 100%;
        padding-top: 28px;
    }
    #content {
        float: none;
        width: auto;
        margin: 0px 33px 0px 170px;
        padding: 12px 24px 25px 15px;
    }
    #nav {
            left: 5px;
        float: none;
        width: 160px;
    }
    .head-article {
        padding: 0px 19px 32px 27px;
    }
        .head-article h1 {
            margin: 0px -19px 0px -27px;
            padding: 15px 19px 22px 27px;
        }
        .head-article img {
            width: 100%;
        }
    .article {
        padding: 0px 19px 35px 27px;
    }
        .article h2 {
            margin: 0px -19px 25px -12px;
        }
        .article span.shape {
            left: 63px;
        }
        .article span.ornament {
            left: 2px;
        }
    .town-info {
        display: block;
        margin-top: 10px;
        max-width: none;
    }
    #to-top-right {
        width: 40px;
    }
}
@media all and (max-width : 800px), all and (max-device-width: 800px) {
    #wraper {
        padding-top: 10px;
    }
    #nav,
    .right-to-left #nav {
        position: static;
            left: 0px;
        width: auto;
        margin: 0px 2px;
        padding-bottom: 41px;
    }
    #menu {
        float: none;
        width: auto;
    }
    #content {
        margin-left: 2px;
    }
    .right-to-left #content {
        margin: 0px 2px 0px 33px;
    }
    #content th {
        padding: 0px;
        font-size: 0px !important;
    }
    #content th .icon {
        display: block;
    }
    #content td {
        padding: 5px 0px;
    }
    #content .resource-wood,
    #content .resource-iron    {
        width: auto;
    }
}
/****** END MEDIA QUERIES ******/


/****** DROP DOWN MENU ******/
.pretty-select {
    background-color: #D1BF98;
    line-height: 16px;
    position: relative;
}
    .pretty-select ul {
        position: absolute;
            top: 16px;
            left: 0px;
            z-index: 1200;
        display: none;
        width: 100%;
        padding: 0px;
        margin: 0px;        
        border-top: 1px solid #95886A;
        background-color: #D1BF98;
    }
    .pretty-select a {
        display: block;
        font-size: 12px;
        font-weight: normal;
        color: #5B3021;
        text-decoration: none;
    }
    .pretty-select a:hover {
        text-decoration: none;
    }
    .pretty-select .flag {
        display: block;
        float: left;
        margin: 2px;
        vertical-align: top;
        width: 18px;
        height: 12px;
        overflow: hidden;
        background-image: url("../gui/flag-matrix.png");
        background-repeat: no-repeat;
    }
    .pretty-select li {
        display: block;
    }
    .pretty-select li a:hover {
        color: #FFF;
        background-color: #863718;
    }
.currently-selected {
    position: relative;
    display: block;
    font-weight: normal;
    
}
    .currently-selected em {
        font-style: normal;
        display: block;
        background: url("../gui/help/nav-arrow-down.png") no-repeat top right;
    }
    .pretty-select a.currently-selected em img {
        float: left;
    }
    .currently-selected em.opened {
        background-image: url("../gui/help/nav-arrow-up.png");
    }
#locale-ac .flag,
.locale-ac .flag {
    background-position: 0px -24px;
}
#locale-ad .flag,
.locale-ad .flag {
    background-position: 0px -36px;
}
#locale-ae .flag,
.locale-ae .flag {
    background-position: 0px -48px;
}
#locale-af .flag,
.locale-af .flag {
    background-position: 0px -60px;
}
#locale-ag .flag,
.locale-ag .flag {
    background-position: 0px -72px;
}
#locale-ai .flag,
.locale-ai .flag {
    background-position: 0px -96px;
}
#locale-al .flag,
.locale-al .flag {
    background-position: 0px -132px;
}
#locale-am .flag,
.locale-am .flag {
    background-position: 0px -144px;
}
#locale-an .flag,
.locale-an .flag {
    background-position: 0px -156px;
}
#locale-ao .flag,
.locale-ao .flag {
    background-position: 0px -168px;
}
#locale-aq .flag,
.locale-aq .flag {
    background-position: 0px -192px;
}
#locale-ar .flag,
.locale-ar .flag {
    background-position: 0px -204px;
}
#locale-as .flag,
.locale-as .flag {
    background-position: 0px -216px;
}
#locale-at .flag,
.locale-at .flag {
    background-position: 0px -228px;
}
#locale-au .flag,
.locale-au .flag {
    background-position: 0px -240px;
}
#locale-aw .flag,
.locale-aw .flag {
    background-position: 0px -264px;
}
#locale-ax .flag,
.locale-ax .flag {
    background-position: 0px -276px;
}
#locale-az .flag,
.locale-az .flag {
    background-position: 0px -300px;
}
#locale-ba .flag,
.locale-ba .flag {
    background-position: -18px 0px;
}
#locale-bb .flag,
.locale-bb .flag {
    background-position: -18px -12px;
}
#locale-bd .flag,
.locale-bd .flag {
    background-position: -18px -36px;
}
#locale-be .flag,
.locale-be .flag {
    background-position: -18px -48px;
}
#locale-bf .flag,
.locale-bf .flag {
    background-position: -18px -60px;
}
#locale-bg .flag,
.locale-bg .flag {
    background-position: -18px -72px;
}
#locale-bh .flag,
.locale-bh .flag {
    background-position: -18px -84px;
}
#locale-bi .flag,
.locale-bi .flag {
    background-position: -18px -96px;
}
#locale-bj .flag,
.locale-bj .flag {
    background-position: -18px -108px;
}
#locale-bm .flag,
.locale-bm .flag {
    background-position: -18px -144px;
}
#locale-bn .flag,
.locale-bn .flag {
    background-position: -18px -156px;
}
#locale-bo .flag,
.locale-bo .flag {
    background-position: -18px -168px;
}
#locale-br .flag,
.locale-br .flag,
#locale-br2.flag,
.locale-br2.flag {
    background-position: -18px -204px;
}
#locale-bs .flag,
.locale-bs .flag {
    background-position: -18px -216px;
}
#locale-bt .flag,
.locale-bt .flag {
    background-position: -18px -228px;
}
#locale-bv .flag,
.locale-bv .flag {
    background-position: -18px -252px;
}
#locale-bw .flag,
.locale-bw .flag {
    background-position: -18px -264px;
}
#locale-by .flag,
.locale-by .flag {
    background-position: -18px -288px;
}
#locale-bz .flag,
.locale-bz .flag {
    background-position: -18px -300px;
}
#locale-ca .flag,
.locale-ca .flag {
    background-position: -36px 0px;
}
#locale-cc .flag,
.locale-cc .flag {
    background-position: -36px -24px;
}
#locale-cd .flag,
.locale-cd .flag {
    background-position: -36px -36px;
}
#locale-cf .flag,
.locale-cf .flag {
    background-position: -36px -60px;
}
#locale-cg .flag,
.locale-cg .flag {
    background-position: -36px -72px;
}
#locale-ch .flag,
.locale-ch .flag {
    background-position: -36px -84px;
}
#locale-ci .flag,
.locale-ci .flag {
    background-position: -36px -96px;
}
#locale-ck .flag,
.locale-ck .flag {
    background-position: -36px -120px;
}
#locale-cl .flag,
.locale-cl .flag {
    background-position: -36px -132px;
}
#locale-cm .flag,
.locale-cm .flag {
    background-position: -36px -144px;
}
#locale-cn .flag,
.locale-cn .flag {
    background-position: -36px -156px;
}
#locale-co .flag,
.locale-co .flag {
    background-position: -36px -168px;
}
#locale-cp .flag,
.locale-cp .flag {
    background-position: -36px -180px;
}
#locale-cr .flag,
.locale-cr .flag {
    background-position: -36px -204px;
}
#locale-cs .flag,
.locale-cs .flag {
    background-position: -36px -216px;
}
#locale-cu .flag,
.locale-cu .flag {
    background-position: -36px -240px;
}
#locale-cv .flag,
.locale-cv .flag {
    background-position: -36px -252px;
}
#locale-cx .flag,
.locale-cx .flag {
    background-position: -36px -276px;
}
#locale-cy .flag,
.locale-cy .flag {
    background-position: -36px -288px;
}
#locale-cz .flag,
.locale-cz .flag {
    background-position: -36px -300px;
}
#locale-de .flag,
.locale-de .flag {
    background-position: -54px -48px;
}
#locale-dg .flag,
.locale-dg .flag {
    background-position: -54px -72px;
}
#locale-dj .flag,
.locale-dj .flag {
    background-position: -54px -108px;
}
#locale-dk .flag,
.locale-dk .flag {
    background-position: -54px -120px;
}
#locale-dm .flag,
.locale-dm .flag {
    background-position: -54px -144px;
}
#locale-do .flag,
.locale-do .flag {
    background-position: -54px -168px;
}
#locale-dz .flag,
.locale-dz .flag {
    background-position: -54px -300px;
}
#locale-ea .flag,
.locale-ea .flag {
    background-position: -72px 0px;
}
#locale-ec .flag,
.locale-ec .flag {
    background-position: -72px -24px;
}
#locale-ee .flag,
.locale-ee .flag {
    background-position: -72px -48px;
}
#locale-eg .flag,
.locale-eg .flag {
    background-position: -72px -72px;
}
#locale-eh .flag,
.locale-eh .flag {
    background-position: -72px -84px;
}
#locale-er .flag,
.locale-er .flag {
    background-position: -72px -204px;
}
#locale-es .flag,
.locale-es .flag {
    background-position: -72px -216px;
}
#locale-et .flag,
.locale-et .flag {
    background-position: -72px -228px;
}
#locale-eu .flag,
.locale-eu .flag {
    background-position: -72px -240px;
}
#locale-fi .flag,
.locale-fi .flag {
    background-position: -90px -96px;
}
#locale-fj .flag,
.locale-fj .flag {
    background-position: -90px -108px;
}
#locale-fk .flag,
.locale-fk .flag {
    background-position: -90px -120px;
}
#locale-fm .flag,
.locale-fm .flag {
    background-position: -90px -144px;
}
#locale-fo .flag,
.locale-fo .flag {
    background-position: -90px -168px;
}
#locale-fr .flag,
.locale-fr .flag {
    background-position: -90px -204px;
}
#locale-fx .flag,
.locale-fx .flag {
    background-position: -90px -276px;
}
#locale-ga .flag,
.locale-ga .flag {
    background-position: -108px 0px;
}
#locale-en .flag,
.locale-en .flag,
#locale-gb .flag,
.locale-gb .flag {
    background-position: -108px -12px;
}
#locale-gd .flag,
.locale-gd .flag {
    background-position: -108px -36px;
}
#locale-ge .flag,
.locale-ge .flag {
    background-position: -108px -48px;
}
#locale-gf .flag,
.locale-gf .flag {
    background-position: -108px -60px;
}
#locale-gg .flag,
.locale-gg .flag {
    background-position: -108px -72px;
}
#locale-gh .flag,
.locale-gh .flag {
    background-position: -108px -84px;
}
#locale-gi .flag,
.locale-gi .flag {
    background-position: -108px -96px;
}
#locale-gl .flag,
.locale-gl .flag {
    background-position: -108px -132px;
}
#locale-gm .flag,
.locale-gm .flag {
    background-position: -108px -144px;
}
#locale-gn .flag,
.locale-gn .flag {
    background-position: -108px -156px;
}
#locale-gp .flag,
.locale-gp .flag {
    background-position: -108px -180px;
}
#locale-gq .flag,
.locale-gq .flag {
    background-position: -108px -192px;
}
#locale-gr .flag,
.locale-gr .flag {
    background-position: -108px -204px;
}
#locale-gs .flag,
.locale-gs .flag {
    background-position: -108px -216px;
}
#locale-gt .flag,
.locale-gt .flag {
    background-position: -108px -228px;
}
#locale-gu .flag,
.locale-gu .flag {
    background-position: -108px -240px;
}
#locale-gw .flag,
.locale-gw .flag {
    background-position: -108px -264px;
}
#locale-gy .flag,
.locale-gy .flag {
    background-position: -108px -288px;
}
#locale-hk .flag,
.locale-hk .flag {
    background-position: -126px -120px;
}
#locale-hm .flag,
.locale-hm .flag {
    background-position: -126px -144px;
}
#locale-hn .flag,
.locale-hn .flag {
    background-position: -126px -156px;
}
#locale-hr .flag,
.locale-hr .flag {
    background-position: -126px -204px;
}
#locale-ht .flag,
.locale-ht .flag {
    background-position: -126px -228px;
}
#locale-hu .flag,
.locale-hu .flag {
    background-position: -126px -240px;
}
#locale-ic .flag,
.locale-ic .flag {
    background-position: -144px -24px;
}
#locale-id .flag,
.locale-id .flag {
    background-position: -144px -36px;
}
#locale-ie .flag,
.locale-ie .flag {
    background-position: -144px -48px;
}
#locale-il .flag,
.locale-il .flag {
    background-position: -144px -132px;
}
#locale-im .flag,
.locale-im .flag {
    background-position: -144px -144px;
}
#locale-in .flag,
.locale-in .flag {
    background-position: -144px -156px;
}
#locale-io .flag,
.locale-io .flag {
    background-position: -144px -168px;
}
#locale-iq .flag,
.locale-iq .flag {
    background-position: -144px -192px;
}
#locale-ir .flag,
.locale-ir .flag,
#locale-fa2 .flag,
.locale-fa2 .flag {
    background-position: -144px -204px;
}
#locale-is .flag,
.locale-is .flag {
    background-position: -144px -216px;
}
#locale-it .flag,
.locale-it .flag {
    background-position: -144px -228px;
}
#locale-je .flag,
.locale-je .flag {
    background-position: -162px -48px;
}
#locale-jm .flag,
.locale-jm .flag {
    background-position: -162px -144px;
}
#locale-jo .flag,
.locale-jo .flag {
    background-position: -162px -168px;
}
#locale-jp .flag,
.locale-jp .flag {
    background-position: -162px -180px;
}
#locale-ke .flag,
.locale-ke .flag {
    background-position: -180px -48px;
}
#locale-kg .flag,
.locale-kg .flag {
    background-position: -180px -72px;
}
#locale-kh .flag,
.locale-kh .flag {
    background-position: -180px -84px;
}
#locale-ki .flag,
.locale-ki .flag {
    background-position: -180px -96px;
}
#locale-km .flag,
.locale-km .flag {
    background-position: -180px -144px;
}
#locale-kn .flag,
.locale-kn .flag {
    background-position: -180px -156px;
}
#locale-kp .flag,
.locale-kp .flag {
    background-position: -180px -180px;
}
#locale-kr .flag,
.locale-kr .flag {
    background-position: -180px -204px;
}
#locale-kw .flag,
.locale-kw .flag {
    background-position: -180px -264px;
}
#locale-ky .flag,
.locale-ky .flag {
    background-position: -180px -288px;
}
#locale-kz .flag,
.locale-kz .flag {
    background-position: -180px -300px;
}
#locale-la .flag,
.locale-la .flag {
    background-position: -198px 0px;
}
#locale-lb .flag,
.locale-lb .flag {
    background-position: -198px -12px;
}
#locale-lc .flag,
.locale-lc .flag {
    background-position: -198px -24px;
}
#locale-li .flag,
.locale-li .flag {
    background-position: -198px -96px;
}
#locale-lk .flag,
.locale-lk .flag {
    background-position: -198px -120px;
}
#locale-lr .flag,
.locale-lr .flag {
    background-position: -198px -204px;
}
#locale-ls .flag,
.locale-ls .flag {
    background-position: -198px -216px;
}
#locale-lt .flag,
.locale-lt .flag {
    background-position: -198px -228px;
}
#locale-lu .flag,
.locale-lu .flag {
    background-position: -198px -240px;
}
#locale-lv .flag,
.locale-lv .flag {
    background-position: -198px -252px;
}
#locale-ly .flag,
.locale-ly .flag {
    background-position: -198px -288px;
}
#locale-ma .flag,
.locale-ma .flag {
    background-position: -216px 0px;
}
#locale-mc .flag,
.locale-mc .flag {
    background-position: -216px -24px;
}
#locale-md .flag,
.locale-md .flag {
    background-position: -216px -36px;
}
#locale-me .flag,
.locale-me .flag {
    background-position: -216px -48px;
}
#locale-mg .flag,
.locale-mg .flag {
    background-position: -216px -72px;
}
#locale-mh .flag,
.locale-mh .flag {
    background-position: -216px -84px;
}
#locale-mk .flag,
.locale-mk .flag {
    background-position: -216px -120px;
}
#locale-ml .flag,
.locale-ml .flag {
    background-position: -216px -132px;
}
#locale-mm .flag,
.locale-mm .flag {
    background-position: -216px -144px;
}
#locale-mn .flag,
.locale-mn .flag {
    background-position: -216px -156px;
}
#locale-mo .flag,
.locale-mo .flag {
    background-position: -216px -168px;
}
#locale-mp .flag,
.locale-mp .flag {
    background-position: -216px -180px;
}
#locale-mq .flag,
.locale-mq .flag {
    background-position: -216px -192px;
}
#locale-mr .flag,
.locale-mr .flag {
    background-position: -216px -204px;
}
#locale-ms .flag,
.locale-ms .flag {
    background-position: -216px -216px;
}
#locale-mt .flag,
.locale-mt .flag {
    background-position: -216px -228px;
}
#locale-mu .flag,
.locale-mu .flag {
    background-position: -216px -240px;
}
#locale-mv .flag,
.locale-mv .flag {
    background-position: -216px -252px;
}
#locale-mw .flag,
.locale-mw .flag {
    background-position: -216px -264px;
}
#locale-mx .flag,
.locale-mx .flag {
    background-position: -216px -276px;
}
#locale-my .flag,
.locale-my .flag {
    background-position: -216px -288px;
}
#locale-mz .flag,
.locale-mz .flag {
    background-position: -216px -300px;
}
#locale-na .flag,
.locale-na .flag {
    background-position: -234px 0px;
}
#locale-nc .flag,
.locale-nc .flag {
    background-position: -234px -24px;
}
#locale-ne .flag,
.locale-ne .flag {
    background-position: -234px -48px;
}
#locale-nf .flag,
.locale-nf .flag {
    background-position: -234px -60px;
}
#locale-ng .flag,
.locale-ng .flag {
    background-position: -234px -72px;
}
#locale-ni .flag,
.locale-ni .flag {
    background-position: -234px -96px;
}
#locale-nl .flag,
.locale-nl .flag {
    background-position: -234px -132px;
}
#locale-no .flag,
.locale-no .flag {
    background-position: -234px -168px;
}
#locale-np .flag,
.locale-np .flag {
    background-position: -234px -180px;
}
#locale-nr .flag,
.locale-nr .flag {
    background-position: -234px -204px;
}
#locale-nu .flag,
.locale-nu .flag {
    background-position: -234px -240px;
}
#locale-nz .flag,
.locale-nz .flag {
    background-position: -234px -300px;
}
#locale-om .flag,
.locale-om .flag {
    background-position: -252px -144px;
}
#locale-pa .flag,
.locale-pa .flag {
    background-position: -270px 0px;
}
#locale-pe .flag,
.locale-pe .flag {
    background-position: -270px -48px;
}
#locale-pf .flag,
.locale-pf .flag {
    background-position: -270px -60px;
}
#locale-pg .flag,
.locale-pg .flag {
    background-position: -270px -72px;
}
#locale-ph .flag,
.locale-ph .flag {
    background-position: -270px -84px;
}
#locale-pk .flag,
.locale-pk .flag {
    background-position: -270px -120px;
}
#locale-pl .flag,
.locale-pl .flag {
    background-position: -270px -132px;
}
#locale-pm .flag,
.locale-pm .flag {
    background-position: -270px -144px;
}
#locale-pn .flag,
.locale-pn .flag {
    background-position: -270px -156px;
}
#locale-pr .flag,
.locale-pr .flag {
    background-position: -270px -204px;
}
#locale-ps .flag,
.locale-ps .flag {
    background-position: -270px -216px;
}
#locale-pt .flag,
.locale-pt .flag {
    background-position: -270px -228px;
}
#locale-pw .flag,
.locale-pw .flag {
    background-position: -270px -264px;
}
#locale-py .flag,
.locale-py .flag {
    background-position: -270px -288px;
}
#locale-qa .flag,
.locale-qa .flag {
    background-position: -288px 0px;
}
#locale-re .flag,
.locale-re .flag {
    background-position: -306px -48px;
}
#locale-ro .flag,
.locale-ro .flag {
    background-position: -306px -168px;
}
#locale-rs .flag,
.locale-rs .flag {
    background-position: -306px -216px;
}
#locale-ru .flag,
.locale-ru .flag {
    background-position: -306px -240px;
}
#locale-rw .flag,
.locale-rw .flag {
    background-position: -306px -264px;
}
#locale-sa .flag,
.locale-sa .flag {
    background-position: -324px 0px;
}
#locale-sb .flag,
.locale-sb .flag {
    background-position: -324px -12px;
}
#locale-sc .flag,
.locale-sc .flag {
    background-position: -324px -24px;
}
#locale-sd .flag,
.locale-sd .flag {
    background-position: -324px -36px;
}
#locale-se .flag,
.locale-se .flag {
    background-position: -324px -48px;
}
#locale-sg .flag,
.locale-sg .flag {
    background-position: -324px -72px;
}
#locale-sh .flag,
.locale-sh .flag {
    background-position: -324px -84px;
}
#locale-si .flag,
.locale-si .flag {
    background-position: -324px -96px;
}
#locale-sj .flag,
.locale-sj .flag {
    background-position: -324px -108px;
}
#locale-sk .flag,
.locale-sk .flag {
    background-position: -324px -120px;
}
#locale-sl .flag,
.locale-sl .flag {
    background-position: -324px -132px;
}
#locale-sm .flag,
.locale-sm .flag {
    background-position: -324px -144px;
}
#locale-sn .flag,
.locale-sn .flag {
    background-position: -324px -156px;
}
#locale-so .flag,
.locale-so .flag {
    background-position: -324px -168px;
}
#locale-sr .flag,
.locale-sr .flag {
    background-position: -324px -204px;
}
#locale-st .flag,
.locale-st .flag {
    background-position: -324px -228px;
}
#locale-sv .flag,
.locale-sv .flag {
    background-position: -324px -252px;
}
#locale-sy .flag,
.locale-sy .flag {
    background-position: -324px -288px;
}
#locale-sz .flag,
.locale-sz .flag {
    background-position: -324px -300px;
}
#locale-ta .flag,
.locale-ta .flag {
    background-position: -342px 0px;
}
#locale-tc .flag,
.locale-tc .flag {
    background-position: -342px -24px;
}
#locale-td .flag,
.locale-td .flag {
    background-position: -342px -36px;
}
#locale-tf .flag,
.locale-tf .flag {
    background-position: -342px -60px;
}
#locale-tg .flag,
.locale-tg .flag {
    background-position: -342px -72px;
}
#locale-th .flag,
.locale-th .flag {
    background-position: -342px -84px;
}
#locale-tj .flag,
.locale-tj .flag {
    background-position: -342px -108px;
}
#locale-tk .flag,
.locale-tk .flag {
    background-position: -342px -120px;
}
#locale-tl .flag,
.locale-tl .flag {
    background-position: -342px -132px;
}
#locale-tm .flag,
.locale-tm .flag {
    background-position: -342px -144px;
}
#locale-tn .flag,
.locale-tn .flag {
    background-position: -342px -156px;
}
#locale-to .flag,
.locale-to .flag {
    background-position: -342px -168px;
}
#locale-tp .flag,
.locale-tp .flag {
    background-position: -342px -180px;
}
#locale-tr .flag,
.locale-tr .flag {
    background-position: -342px -204px;
}
#locale-tt .flag,
.locale-tt .flag {
    background-position: -342px -228px;
}
#locale-tv .flag,
.locale-tv .flag {
    background-position: -342px -252px;
}
#locale-tw .flag,
.locale-tw .flag {
    background-position: -342px -264px;
}
#locale-tz .flag,
.locale-tz .flag {
    background-position: -342px -300px;
}
#locale-ua .flag,
.locale-ua .flag {
    background-position: -360px 0px;
}
#locale-ug .flag,
.locale-ug .flag {
    background-position: -360px -72px;
}
#locale-uk .flag,
.locale-uk .flag {
    background-position: -360px -120px;
}
#locale-um .flag,
.locale-um .flag {
    background-position: -360px -144px;
}
#locale-us .flag,
.locale-us .flag {
    background-position: -360px -216px;
}
#locale-uy .flag,
.locale-uy .flag {
    background-position: -360px -288px;
}
#locale-uz .flag,
.locale-uz .flag {
    background-position: -360px -300px;
}
#locale-va .flag,
.locale-va .flag {
    background-position: -378px 0px;
}
#locale-vc .flag,
.locale-vc .flag {
    background-position: -378px -24px;
}
#locale-ve .flag,
.locale-ve .flag {
    background-position: -378px -48px;
}
#locale-vg .flag,
.locale-vg .flag {
    background-position: -378px -72px;
}
#locale-vi .flag,
.locale-vi .flag {
    background-position: -378px -96px;
}
#locale-vn .flag,
.locale-vn .flag {
    background-position: -378px -156px;
}
#locale-vu .flag,
.locale-vu .flag {
    background-position: -378px -240px;
}
#locale-wf .flag,
.locale-wf .flag {
    background-position: -396px -60px;
}
#locale-ws .flag,
.locale-ws .flag {
    background-position: -396px -216px;
}
#locale-ye .flag,
.locale-ye .flag {
    background-position: -432px -48px;
}
#locale-yt .flag,
.locale-yt .flag {
    background-position: -432px -228px;
}
#locale-yu .flag,
.locale-yu .flag {
    background-position: -432px -240px;
}
#locale-za .flag,
.locale-za .flag {
    background-position: -450px 0px;
}
#locale-zm .flag,
.locale-zm .flag {
    background-position: -450px -144px;
}
#locale-zr .flag,
.locale-zr .flag {
    background-position: -450px -204px;
}
#locale-zw .flag,
.locale-zw .flag {
    background-position: -450px -264px;
}


/****** UNITS TABLE ******/
.units-list {
    text-align: center;
}
    #content .units-list th {
        font-size: 12px;
    }
    .units-list th:first-child {
        width: 42px;
    }
    .units-list td:first-child div:after {
        content: "?";
        position: absolute;
            top: 1px;
            left: 3px;
        display: block;
        font-size: 10px;
        color: #FFF;
    }
    .right-to-left .units-list td:first-child div:after {
        left: inherit;
        right: 3px;
    }
    .units-list td:first-child {
        cursor: help;
    }
    .units-list td img {
        width: 40px;
        height: 40px;
        display: block;
        border: 1px solid #000;
    }
.resource-wood,
.resource-iron {
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: 30px !important;
    text-align: right !important;
}

#content .resource-wood {
    width: 70px;
    background-image: url("../images/icons/r_wood.png");
}#content .resource-iron {
    width: 70px;
    background-image: url("../images/icons/r_iron.png");
}
.race-1 {
    background: url("../images/units/42x42/1.png") no-repeat;
}
.arabic .race-1 {
    background: url("../images/units/42x42/1arabic.png") no-repeat;
}
.race-2 {
    background: url("../images/units/42x42/2.png") no-repeat;
}
.race-1.unit-c1, .race-2.unit-c1 {
    background-position: 0 0;
}
.race-1.unit-c2, .race-2.unit-c2 {
    background-position: -39px 0;
}
.race-1.unit-c3, .race-2.unit-c3 {
    background-position: -78px 0;
}
.race-1.unit-c4, .race-2.unit-c4 {
    background-position: -117px 0;
}
.race-1.unit-ct, .race-2.unit-ct {
    background-position: -156px 0;
}
.race-1.unit-k1, .race-2.unit-k1 {
    background-position: -195px 0;
}
.race-1.unit-k2, .race-2.unit-k2 {
    background-position: 0 -39px;
}
.race-1.unit-k3, .race-2.unit-k3 {
    background-position: -39px -39px;
}
.race-1.unit-ks, .race-2.unit-k4 {
    background-position: -78px -39px;
}
.race-1.unit-m1, .race-2.unit-k5 {
    background-position: -117px -39px;
}
.race-1.unit-m2, .race-2.unit-ks {
    background-position: -156px -39px;
}
.race-1.unit-m3, .race-2.unit-m1 {
    background-position: -195px -39px;
}
.race-1.unit-p1, .race-2.unit-m2 {
    background-position: 0 -78px;
}
.race-1.unit-p2, .race-2.unit-p1 {
    background-position: -39px -78px;
}
.race-1.unit-p3, .race-2.unit-p2 {
    background-position: -78px -78px;
}
.race-1.unit-s1, .race-2.unit-s1 {
    background-position: -117px -78px;
}
.race-1.unit-s2, .race-2.unit-s2 {
    background-position: -156px -78px;
}
.race-1.unit-s3, .race-2.unit-s3 {
    background-position: -195px -78px;
}


/****** TOOLTIP ******/
.tooltip-message {
    position: absolute;
        z-index: 8000;
    padding: 10px;
    line-height: 15px;
    font-size: 12px;  
    color: #fff; 
    background: #863718;
    overflow: visible;
    pointer-events: none;
}
.right-to-left .tooltip-arrow {
    display: none !important;
}
.tooltip-arrow {
    position: absolute;
        top: 12px;
        left: -14px !important;
        z-index: -1;
    width: auto !important; 
    height: 0px; 
    font-size: 0px;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #863718; 
    border-right: 7px solid #863718; 
}