body {
    font-family: "Arial", Gadget, sans-serif;

    font-size: 12px;
    font-weight: normal;
    color: #FFF;
    background-color: #0B0B12;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a, a:hover, a:visited, a:active {
    color: inherit;
}

div {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* The div that contains everything in the game. */
.gameContainer {
    position: absolute;
    width: 1024px;
    top: 10px;
    margin-left: -512px;
    left: 50%;
    height: 718px;
}

.pauseButtonContainer {
    position:absolute;
    right: 0;
    top:0;
    text-align:center;

    padding:3px;
    width: 55px;
    height: 20px;
}

.gameTitleContainer {
    position: absolute;
    top: 1px;
    right: 60px;
    width: 220px;
    height: 20px;
    padding-top:3px;
    padding-right:5px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.sectionTitle {
    font-weight: bold;
    text-align: left;
}

.centeredElement {
    margin-left: auto;
    margin-right: auto;
}

.scrollingContainer {
    overflow-y: scroll;
}

.borderedContainer {
    border: 1px solid #2B2B32;
}

.topMargin {
    margin-top: 3px;
}

.leftRightMargin {
    margin-left: 3px;
    margin-right: 3px;
}

.lockedSpanText {
    display: block;
    margin-top:10px;
    margin-left: 10px;
}

/* **************************************************************************************** */
/*                                     BUTTONS                                              */
/* **************************************************************************************** */

.upgradeButton {
    padding:3px;
    border: 1px solid #3AA5E6;
    /*text-align: center;*/
    cursor: pointer;
}

.upgradeButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.upgradeButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.disabledUpgradeButton {
    padding:3px;
    border: 1px solid #2B2B32;
    /*text-align: center;*/
    /*background-color: #222;*/
    cursor: default;
    color:#AAA;
}

.ownedUpgradeButton {
    padding:3px;
    border: 1px solid #FA0;
    /*border: 2px solid #3AA5E6;*/
    /*text-align: center;*/
    background-color: #0B0B12;
    cursor: default;
}

/* **************************************************************************************** */
/*                                     TAB MENU                                             */
/* **************************************************************************************** */

.tabMenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
}

.tabMenu ul {
    position: absolute;
    bottom: 0;
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
}

.tabMenu li {
    float: left;

    /* Make the tabs lie directly on top of the container. (eliminate a 1 pixel gap) */
    position: relative;
    top: 1px;
    border: 1px solid #2B2B32;
    border-bottom-width: 0;
    margin: 0 0 0 4px;
}

.tabMenu a {
    text-decoration: none;
    display: block;
    padding: 4px 10px;
    text-align: center;
    cursor: pointer;
    /*background-color: #2B2B32;*/
}

.tabMenu a:hover {
    background-color: #3AA5E6;
}

.tabMenu .selectedTab {
    position: relative;
    top: 1px;
    border: 1px solid #2B2B32;
}

.tabMenu .selectedTab a {
    background-color: #2B2B32;
    /*color: #FFF;*/
}

.tabContent {
    border-top: 1px solid #2B2B32;
    position: absolute;
    top: 30px;
    right: 0;
    left: 0;
    bottom: 0;
}

.tabContainer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.mainTabContainer {
    border-left: 1px solid #2B2B32;
    border-right: 1px solid #2B2B32;
    border-bottom: 1px solid #2B2B32;
}

.tabMenu .tabHighlighted a {
    background-color: #3AA5E6;
}


/* **************************************************************************************** */
/*                                PARTY CREATION TAB                                        */
/* **************************************************************************************** */

.partyCreationIntroductionPanel {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 92px;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.partySelectionHeaderContainer {
    position: absolute;
    top: 116px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.selectedCharactersHeaderContainer {
    position: absolute;
    top: 116px;
    height: 19px;
    left: 513px;
    width: 220px;
    padding: 5px;
}

.partySelectionHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    margin: 2px 0 0;
    padding: 4px 7px;
    width:120px;
    text-align: center;
}

.partySelectionPanel {
    position: absolute;
    top: 140px;
    left: 3px;
    width: 500px;
    height: 490px;
    overflow-y: auto;
    border: 1px solid #2B2B32;
}

.selectedCharactersPanel {
    position: absolute;
    top: 140px;
    left: 513px;
    width: 500px;
    height: 490px;
    overflow-y: auto;
    border: 1px solid #2B2B32;
}

.partySelectionNameWarning {
    position: absolute;
    height: 25px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #FA0;
    color: #FA0;
}

.partySelectionTable {
    border-spacing: 5px;
    margin:3px;
}

.partySelectionTable td {
    padding: 3px;
}

.lockedCharacterSelectionTable {
    border: 1px solid #2B2B32;
    background-color: #111;
    cursor: default;
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
    height: 76px;
}

.characterSelectionButton {
    border: 1px solid #3AA5E6;
    cursor: pointer;
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
}
.characterSelectionButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.deselectCharacterButton {
    position:absolute;
    padding:3px;
    top: 3px;
    width: 13px;
    right: 3px;
    height: 12px;
    border: 1px solid #3AA5E6;
    background-color: #0B0B12;
    text-align:center;
    z-index: 200;
}

.deselectCharacterButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.deselectCharacterButton:active {
    top: 4px;
    cursor: pointer;
}

.moveUpButton {
    position:absolute;
    padding:3px;
    top: 3px;
    width: 13px;
    right: 52px;
    height: 12px;
    border: 1px solid #3AA5E6;
    text-align: center;
    background-color: #0B0B12;
    z-index: 200;
}

.moveUpButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.moveUpButton:active {
    top: 4px;
    cursor: pointer;
}

.disabledMoveUpButton {
    position:absolute;
    padding:3px;
    top: 3px;
    width: 13px;
    right: 52px;
    height: 12px;
    text-align: center;
    border: 1px solid #2B2B32;
    background-color: #222;
    cursor: default;
}

.moveDownButton {
    position:absolute;
    padding:3px;
    top: 3px;
    width: 16px;
    right: 26px;
    height: 12px;
    border: 1px solid #3AA5E6;
    text-align: center;
    background-color: #0B0B12;
    z-index: 200;
}

.moveDownButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.moveDownButton:active {
    top: 4px;
    cursor: pointer;
}

.disabledMoveDownButton {
    position:absolute;
    padding:3px;
    top: 3px;
    width: 13px;
    right: 26px;
    height: 12px;
    text-align: center;
    border: 1px solid #2B2B32;
    background-color: #222;
    cursor: default;
}


.selectedCharacterContainer {
    position:relative;
}

.selectedCharacterSelectionTable {
    border: 1px solid #FA0;
    border-collapse: separate;
    border-spacing: 3px;
}
.errorSelectedCharacterSelectionTable {
    border: 1px solid #F00;
    border-collapse: separate;
    border-spacing: 3px;
}
.disabledCharacterSelectionButton {
    border: 1px solid #2B2B32;
    background-color: #222;
    cursor: default;
    border-collapse: separate;
    border-spacing: 3px;
}

.partyConfirmationPanel {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 48px;
}

/* **************************************************************************************** */
/*                                     GAME TAB                                             */
/* **************************************************************************************** */

.gameTabTopLeftPanel {
    position: absolute;
    top: 3px;
    left: 3px;
    height: 450px;
    width: 740px;
    border: 1px solid #2B2B32;
    z-index: -1;
}

.encounterNotificationPanel {
    position: absolute;
    top: 415px;
    left: 3px;
    width: 740px;
    text-align: center;
    font-weight: bold;
    z-index: 100; /* Make the notification be above the canvas. */
    display:none;
}

.dungeonNotificationDiv {
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #2B2B32;
    opacity: 0.8;
    display:inline-block; /* Make the div behave like a line element so that it shrinks to fit the content. */
    border: 1px solid #2B2B32;
}

.encounterNotificationDiv {
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #2B2B32;
    opacity: 0.8;
    display:inline-block; /* Make the div behave like a line element so that it shrinks to fit the content. */
    border: 1px solid #2B2B32;
}

.bossEncounterNotificationDiv {
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #3AA5E6;
    color: black;
    display:inline-block; /* Make the div behave like a line element so that it shrinks to fit the content. */
    border: 1px solid #2B2B32;
}

.gameTabLootButtonPanel {
    position: absolute;
    top: 10px;
    right: 290px;
    height: 54px;
    width: 180px;
    z-index: 100; /* Make the notification be above the canvas. */
}

.lootButton {
    padding:3px;
    border: 1px solid #3AA5E6;
    background-color: #0B0B12;
    opacity: 0.9;
    text-align: center;
    cursor: pointer;
}

.lootButton:hover {
    background-color: #2B2B32;
    opacity: 0.9;
    cursor: pointer;
}

.lootButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.lootButtonDisabled {
    padding:3px;
    border: 1px solid #2B2B32;
    text-align: center;
    background-color: #222;
    opacity: 0.9;
    cursor: default;
}


.gameTabScrollButtonContainer {
    position: absolute;
    top: 456px;
    left: 2px;
}

.gameTabScrollButtonContainer td {
    padding-top:0;
    padding-bottom:0;
}

.scrollButton {
    padding:2px;
    width: 116px;
    border: 1px solid #3AA5E6;
    text-align: center;
    cursor: pointer;
    background-color: #0B0B12;
}

.scrollButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.scrollButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.scrollButtonDisabled {
    padding:2px;
    width: 116px;
    border: 1px solid #2B2B32;
    text-align: center;
    cursor: default;
    color: #AAA;
}


.potionCellDiv {
    position:absolute;
    /*height: 53px;*/
    width: 180px;
}

.potionContentContainer {
    position:absolute;
    top: 0;
    left: 0;
    height: 43px;
    width: 192px;
    /*
    height: 55px;
    width: 192px;
    */
    /*
    height: 53px;
    width: 180px;
    */
}


.dropPotionButton {
    position:absolute;
    padding:3px;
    top: 2px;
    width: 13px;
    right: 2px;
    height: 12px;
    border: 1px solid #3AA5E6;
    text-align: center;
    background-color: #0B0B12;
    z-index: 200;
}

.dropPotionButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.dropPotionButton:active {
    top: 3px;
    cursor: pointer;
}

.potionButton {
    display: block;
    position:absolute;
    padding:3px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;

    border: 1px solid #3AA5E6;
    text-align: left;
    cursor: pointer;
    background-color: #0B0B12;
}

.potionButtonActive {
    display: block;
    position:absolute;
    padding:3px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;

    border: 1px solid #FA0;
    text-align: left;
    cursor: default;
    background-color: transparent;
    z-index: 100;
}

.potionButtonDisabled {
    display: block;
    position:absolute;
    padding:3px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    border: 1px solid #2B2B32;
    text-align: left;
    cursor: default;
    color: #AAA;
}

.potionButtonLocked {
    display: block;
    position:absolute;
    padding:3px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    border: 1px solid #2B2B32;
    text-align: left;
    cursor: default;
    background-color: #111;
    color: #AAA;
}

.potionButtonProgressSlider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #FA0;
    opacity: 0.4;
    width: 0;
    display: none;
    cursor: default;
}

.potionButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.potionButton:active {
    top: 1px;
    bottom: -1px;
    cursor: pointer;
}



.dungeonNotificationPanel {
    position: absolute;
    top: 10px;
    left: 3px;
    width: 740px;
    text-align: center;
    font-weight: bold;
    z-index: 100; /* Make the notification be above the canvas. */
    display:none;
}

.gameTabRightPanel {
    position: absolute;
    top: 3px;
    left: 748px;
    bottom: 3px;
    right: 3px;
}

.gameTabRightCurrencyPanel {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:25px;

    border: 1px solid #2B2B32;

    text-align: right;
    font-weight: bold;
    font-size: 14px;
}

.gameTabRightAdventurePointsPanel {
    position:absolute;
    top: 30px;
    left:0;
    right:0;
    height:25px;

    border: 1px solid #2B2B32;

    text-align: right;
    font-weight: bold;
    font-size: 14px;
}

.gameTabBlankAdventurerInfo {
    height: 33px;
    border: 1px solid #2B2B32;
    margin-right: 7px;
    width: 622px;
    margin-top: 2px;
}

.gameTabLockedAdventurerInfo {
    height: 33px;
    border: 1px solid #2B2B32;
    margin-right: 7px;
    width: 622px;
    margin-top: 2px;
    background-color: #111;
}

.adventurerInfoTable td {
    padding: 0;
}

.gameTabRightPanelUpgradeButtonContainer {
    position:absolute;
    top:57px;
    left:0;
    right:0;
    bottom:187px;

    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border: 1px solid #2B2B32;
    margin-top: 3px;

    overflow-y: scroll;
}


.gameTabBottomPanel {
    position: absolute;
    top: 498px;
    left: 3px;
    bottom: 3px;
    width: 640px;
}

.gameTabPotionPanel {
    position: absolute;
    top: 499px; /* 510px;*/
    left: 630px;
    bottom: 3px;
    right: 3px;
}

.gameTabItemDiv {
    padding: 3px;
    margin-bottom: 3px;
    border: 1px solid #2B2B32;
}

.gameTabAdventurerInfo {
    position:absolute;
    /*width: 630px;*/
    /*height: 40px;*/
    /*border:1px solid blue;*/
}

.gameTabAdventurerIconCell {
    vertical-align: top;
    width:54px;
    /*height:34px;*/
}

.gameTabAdventurerSliderCell {
    width:75px;position:relative;
}

.gameTabAdventurerSliderDiv {
    /*border:1px solid #2B2B32;*/
    position:absolute;top:0;left:0;width:100%;
    /*height:15px;*/
    /*height: 100%;*/
    /*height:13px;*/
    margin-top:2px;
}

.gameTabAdventurerHealthSlider {
    background-color: #F00;
    height:15px;
    /*height: 100%;*/
    /*height:13px;*/
    position:absolute;
    top:0;
    left:0;
}

.gameTabAdventurerSpiritPointsSlider {
    background-color: #00F;
    height:15px;
    /*height: 100%;*/
    /*height:13px;*/
    position:absolute;
    top:0;
    left:0;
}

.gameTabAdventurerSliderOverlay {
    position:absolute;text-align: right;
    height:100%;
    top:0;left:0;width:70px;z-index: 10;

    /*padding-top:3px;*/
    padding-top:2px;
}

.gameTabAdventurerInfoHpAc {
    width:40px;text-align:right;
}

.gameTabAdventurerInfoEffect {
    width:29px;
    /*width:32px;*/
    text-align:center;
    border:1px solid #2B2B32;
    /*margin: 1px;*/
    margin-left: 2px;
    height: 29px;
    /*height: 31px;*/
}

.gameTabAdventurerInfoTurn {
    width:150px;text-align:left;
}

.gameTabCharacterDiv {
    width: 345px;
    float: left;
    margin-top: 3px;
    margin-left: 3px;
    border: 1px solid #2B2B32;
}

.characterImage {
    width: 54px;
    height: 54px;
}

.terrainImage {
    width: 54px;
    height: 54px;
}

.itemImage {
    width: 32px;
    height: 32px;
}
.potionImage {
    width: 32px;
    height: 32px;
}

.killsImage {
    width: 32px;
    height: 22px;
    border: 1px solid #2B2B32;
}

/* **************************************************************************************** */
/*                                 INVENTORY TAB                                            */
/* **************************************************************************************** */

.inventoryTabContents {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.inventoryTabEquippedItemsHeaderContainer {
    position: absolute;
    top: 0;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.inventoryTabEquippedItems {
    position: absolute;
    top: 30px;
    left: 3px;
    right: 3px;
    height: 225px;
    border: 1px solid #2B2B32;
}

.inventoryTabInventoryHeaderContainer {
    position: absolute;
    top: 267px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.inventoryTabInventoryList {
    position: absolute;
    top: 297px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    overflow-y: scroll;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.equippedItemSlotDiv {
    margin: 3px;
    padding: 3px;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.equipButtonDiv {
    padding:3px;
    width:90px;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
    text-align: center;
    cursor: pointer;
}

.equipButtonDiv:hover {
    background-color: #2B2B32;
    color: #EEE;
    cursor: pointer;
}

.equipButtonDiv:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.itemValueBetter {
    color: #0F0;
    /*color: #008800;*/
}

.itemValueWorse {
    color: #F00;
    /*color: #BF3030;*/
}

.equipAllButtonContainer {
    position: absolute;
    top: 258px;
    height: 26px;
    right: 3px; /*165*/
    width: 150px;
    padding: 5px;

    /*border: 1px solid #888;*/
}
/*
.discardAllButtonContainer {
    position: absolute;
    top: 258px;
    height: 26px;
    right: 3px;
    width: 150px;
    padding: 5px;
}
*/

.equipAllButton {
    padding:3px;
    width:200px;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
    text-align: center;
    cursor: pointer;
}

.equipAllButton:hover {
    background-color: #2B2B32;
    color: #EEE;
    cursor: pointer;
}

.equipAllButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}

.disabledEquipAllButton {
    padding:3px;
    width:200px;
    border: 1px solid #2B2B32;
    text-align: center;
    color: #AAA;
    background-color: #2B2B32;
    cursor: default;
}

.itemRarityCommon {
    color: #FFF;
}
.itemRarityUncommon {
    color: #AF0;
}
.itemRarityRare {
    color: #08F;
}
.itemRarityHistoric {
    color: #E4E;
}
.itemRarityAncient {
    color: #EF8;
}

/*.itemQualityEmpty {*/
    /*color: #6A6A6A;*/
/*}*/

/*.itemQualityWretched {*/
    /*color: #AAA;*/
/*}*/
/*.itemQualityGarbage {*/
    /*/!*color: #470;*!/*/
    /*color: #AF0;*/
/*}*/
/*.itemQualityPathetic {*/
    /*color: #F85;*/
    /*/!*color: #804;*!/*/
/*}*/
/*.itemQualityFlawed {*/
    /*color: #A8F;*/
    /*/!*color: #208;*!/*/
/*}*/
/*.itemQualityLesser {*/
    /*color: #8FF;*/
    /*/!*color: #004;*!/*/
/*}*/
/*.itemQualityInferior {*/
    /*color: #8F8;*/
    /*/!*color: #090;*!/*/
/*}*/
/*.itemQualityPlain {*/
    /*color: #E4E;*/
/*}*/
/*.itemQualityCommon {*/
    /*color: #F85;*/
    /*/!*color: #964;*!/*/
/*}*/
/*.itemQualityStandard {*/
    /*color: #099;*/
/*}*/
/*.itemQualityRefined {*/
    /*color: #88F;*/
    /*/!*color: #449;*!/*/
/*}*/
/*.itemQualityPremium {*/
    /*color: #C8A;*/
    /*/!*color: #705;*!/*/
/*}*/
/*.itemQualitySuperior {*/
    /*color: #AF0;*/
    /*/!*color: #490;*!/*/
/*}*/
/*.itemQualityPristine {*/
    /*color: #08A;*/
/*}*/
/*.itemQualityPerfect {*/
    /*color: #B60;*/
    /*/!*color: #A40;*!/*/
/*}*/
/*.itemQualityFlawless {*/
    /*color: #99E;*/
    /*/!*color: #44A;*!/*/
/*}*/
/*.itemQualityHeroic {*/
    /*color: #098;*/
/*}*/
/*.itemQualityHistoric {*/
    /*color: #F8D;*/
    /*/!*color: #907;*!/*/
/*}*/
/*.itemQualityFabled {*/
    /*color: #68F;*/
    /*/!*color: #24D;*!/*/
/*}*/
/*.itemQualityMythical {*/
    /*color: #994;*/
/*}*/
/*.itemQualitySublime {*/
    /*color: #FAA;*/
    /*/!*color: #A66;*!/*/
/*}*/
/*.itemQualitySacred {*/
    /*color: #0A4;*/
/*}*/
/*.itemQualityGlorious {*/
    /*color: #E0F;*/
    /*/!*color: #80E;*!/*/
/*}*/
/*.itemQualityDivine {*/
    /*color: #F80;*/
/*}*/

/*.itemQualityGodlike {*/
    /*color: #EF8;*/
    /*/!*color: #490;*!/*/
    /*/!*background-color: #212;*!/*/
    /*/!*background-color: #FEF;*!/*/
/*}*/
/*.itemQualityImmortal {*/
    /*color: #ADF;*/
    /*/!*color: #04A;*!/*/
    /*/!*background-color: #220;*!/*/
    /*/!*background-color: #FFA;*!/*/
/*}*/
/*.itemQualityEternal {*/
    /*color: #FAF;*/
    /*/!*color: #D4D;*!/*/
    /*/!*background-color: #121;*!/*/
    /*/!*background-color: #CFC;*!/*/
/*}*/
/*.itemQualityEthereal {*/
    /*color: #8FF;*/
    /*/!*color: #0CC;*!/*/
    /*/!*background-color: #123;*!/*/
    /*/!*background-color: #CFE;*!/*/
/*}*/
/*.itemQualityAstral {*/
    /*color: #F87;*/
    /*/!*color: #C07;*!/*/
    /*/!*background-color: #124;*!/*/
    /*/!*background-color: #CEF;*!/*/
/*}*/
/*.itemQualityCelestial {*/
    /*color: #6F8;*/
    /*/!*color: #580;*!/*/
    /*/!*background-color: #113;*!/*/
    /*/!*background-color: #EEF;*!/*/
/*}*/
/*.itemQualityCosmic {*/
    /*color: #AAF;*/
    /*/!*color: #00A;*!/*/
    /*/!*background-color: #220;*!/*/
    /*/!*background-color: #FFC;*!/*/
/*}*/
/*.itemQualityGalactic {*/
    /*color: #CFF;*/
    /*/!*background-color: #311;*!/*/
    /*/!*background-color: #A00;*!/*/
/*}*/
/*.itemQualityTranscendent {*/
    /*color: #FFD;*/
    /*/!*background-color: #121;*!/*/
    /*/!*background-color: #4A4;*!/*/
/*}*/

/*.itemQualityUnique {*/
    /*color: #FFC;*/
    /*background-color: #422;*/
    /*/!*background-color: #500;*!/*/
/*}*/


/* **************************************************************************************** */
/*                                  MONSTERS TAB                                            */
/* **************************************************************************************** */

.monsterUpgradesHeaderContainer {
    position: absolute;
    top: 43px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.monsterUpgradesHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    /*padding: 5px;*/
    margin: 2px 0 0;
    padding: 4px 7px;
    /*padding: 4px 7px;*/
    width:120px;
    text-align: center;
}

.monsterUpgradesKillCount {
    padding:3px;
    width:200px;
    text-align: right;
    margin-top: 5px;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.monsterKillCountDiv {
    padding:3px;
    width:200px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.monsterUpgradeLinkMiddle {
    height:15px;
    width: 50%;
    border-right: 1px solid #888;
}

.monsterUpgradesContainer {
    position: absolute;
    top: 73px;
    /*height: 610px;*/
    bottom: 3px;
    left: 3px;
    width: 232px;
    /*border: 1px solid #888;*/
}

.monsterUpgradeButtonsContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 395px;
    overflow-y: scroll;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.monsterUpgradeValuesContainer {
    position: absolute;
    height: 210px;
    width: 232px;
    bottom: 0;
    padding: 0;
    margin:0;
    /*border: 1px solid #888;*/
    border: 1px solid #2B2B32;
}

.monsterUpgradeValuesContainer .upgradeName {
    padding-left: 5px;
    text-align: left;
}
.monsterUpgradeValuesContainer .upgradeValue {
    padding-right: 5px;
    text-align: right;
}

.monstersTabContainer {
    position: absolute;
    top: 43px;
    /*top: 3px;*/
    bottom: 3px;
    left: 238px;
    right: 3px;
    padding: 3px;
    /*border: 1px solid #888;*/
}

.monstersTableContainer {
    position: absolute;
/*
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
*/

    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow-y: scroll;
    padding: 0;
    /*padding: 3px;*/
    /*border: 1px solid #888;*/
}
/*
.monstersTableContainer {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 238px;
    right: 3px;
    overflow-y: scroll;
    padding: 3px;
    border: 1px solid #888;
}
*/

.monsterTable {
    padding: 0;
    margin: 0;
    border-spacing: 0;
    /*border-left: 1px solid #888;*/

    /*border-left: 1px solid #2B2B32;*/
    width: 100%;
}

.monsterTable th {
    /*border-right: 1px solid #2B2B32;*/
    border-bottom: 1px solid #2B2B32;
    /*border-top: 1px solid #2B2B32;*/
    text-align: left;
    font-weight: normal;
    padding-left: 5px;
    /*padding: 6px 6px 6px 6px;*/
    /*background: #EAEAF0;*/
}

.monsterTable td {
    text-align: left;
    /*border-right: 1px solid #2B2B32;*/
    /*border-bottom: 1px solid #2B2B32;*/
    padding-left: 5px;
    /*background: #fff;*/
    /*padding: 5px;*/
    /*color: #345;*/
}

/* **************************************************************************************** */
/*                                 ADVENTURERS TAB                                          */
/* **************************************************************************************** */

.partyExperiencePointsDiv {
    padding:3px;
    width:200px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    border: 1px solid #2B2B32;
}

.adventurerLevelUpContainer {
    position: absolute;
    top: 73px;
    bottom: 3px;
    left: 3px;
    padding-left: 3px;
    padding-right: 3px;
    width: 240px;
    border: 1px solid #2B2B32;
}

.adventurerSkillTabContainer {
    position: absolute;
    top: 43px;
    bottom: 3px;
    left: 254px;
    right: 3px;
    padding: 3px;
}

.adventurerSkillTreeTable {
    width:100%;
}

.adventurerSkillTreeTable td {
    padding-left:3px;
    padding-right:3px;
    vertical-align: middle;
}

/* **************************************************************************************** */
/*                                   DUNGEONS TAB                                           */
/* **************************************************************************************** */

.dungeonsTableContainer {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow-y: scroll;
    padding: 0;
    border: 1px solid #2B2B32;
}

.dungeonTabContainer {
    position: absolute;
    top: 43px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    padding: 3px;
}

/* **************************************************************************************** */
/*                                    CASTLES TAB                                           */
/* **************************************************************************************** */

.castleTable {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: 350px;

    overflow-y: scroll;
    padding: 0;
    border: 1px solid #2B2B32;
}

.castleMap {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 660px;
    left: 358px;

    padding: 0;
}

/* **************************************************************************************** */
/*                                    POINTS TAB                                            */
/* **************************************************************************************** */

.achievementsContainer {
    position: absolute;
    top: 73px;
    bottom: 3px;
    width: 639px;
    right: 3px;

    border: 1px solid #2B2B32;
    overflow-y: scroll;

    padding: 0;
}

.adventurePointsDiv {
    padding:3px;
    width:200px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    border: 1px solid #2B2B32;
}

.achievementsHeaderContainer {
    position: absolute;
    top: 44px;
    height: 19px;
    left: 377px;
    width: 160px;
    padding: 5px;
}

.achievementsHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    margin: 2px 0 0;
    padding: 4px 7px;
    /*width:120px;*/
    text-align: center;
}

.pointsBreakdownHeaderContainer {
    position: absolute;
    top: 44px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.pointsBreakdownHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    margin: 2px 0 0;
    padding: 4px 7px;
    width:120px;
    text-align: center;
}

.pointsBreakdownContainer {
    position: absolute;
    top: 73px;
    bottom: 230px;
    width: 360px;
    left: 3px;

    border: 1px solid #2B2B32;
    /*overflow-y: scroll;*/

    padding: 5px;
}


.pointUpgradesHeaderContainer {
    position: absolute;
    top: 455px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.pointUpgradesHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    margin: 2px 0 0;
    padding: 4px 7px;
    width:120px;
    text-align: center;
}

.pointUpgradesContainer {
    position: absolute;
    top: 485px;
    bottom: 3px;
    width: 360px;
    left: 3px;

    border: 1px solid #2B2B32;
    overflow-y: scroll;

    padding: 5px;
}

.pointsTable {
    /*margin-top:10px;*/
    width:100%;
}

.pointsTableLabel {
    text-align:right;
    width: 120px;
}


/* **************************************************************************************** */
/*                                 CHARACTER TAB                                            */
/* **************************************************************************************** */

.characterLevelUpContainer {
    position: absolute;
    top: 3px;
    height: 60px;
    left: 3px;
    width: 240px;
    padding: 0;
}

.characteristicsHeaderContainer {
    position: absolute;
    top: 73px;
    height: 19px;
    left: 3px;
    width: 220px;
    padding: 5px;
}

.characteristicsHeaderSpan {
    background-color: #2B2B32;
    color: #FFF;
    margin: 2px 0 0;
    padding: 4px 7px;
    width:120px;
    text-align: center;
}

.characterPropertiesContainer {
    position: absolute;
    top: 103px;
    bottom: 3px;
    left: 3px;
    padding-left: 3px;
    padding-right: 3px;
    width: 190px;
    border: 1px solid #2B2B32;
}

.characterTabContainer {
    position: absolute;
    top: 73px;
    bottom: 3px;
    left: 204px;
    right: 3px;
    padding: 3px;
}

.characteristicsTable {
    margin-top:10px;
    width:100%;
}

.characteristicsTableLabel {
    text-align:right;
    width: 110px;
}




/* **************************************************************************************** */
/*                                     INFO TAB                                             */
/* **************************************************************************************** */

.infoTabGameCredits {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 310px;
    height: 80px;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabMinmaxiaLinks {
    position: absolute;
    bottom: 99px;
    left: 3px;
    right: 310px;
    height: 100px;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabGameOptions {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 292px;
    height: 196px;
    overflow-y: scroll;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabRecentChanges {
    position: absolute;
    top: 228px;
    left: 3px;
    right: 505px;
    height: 232px;

    overflow-y: scroll;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabInfo {
    position: absolute;
    top: 228px;
    width: 487px;
    right: 3px;
    height: 232px;

    overflow-y: scroll;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabSaveLoadContainer {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 350px;
    /*right: 250px;*/
    height: 210px;

    overflow-y: scroll;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.infoTabStatisticsContainer {
    position: absolute;
    top: 3px;
    width: 333px;
    /*width: 233px;*/
    right: 3px;
    height: 210px;

    overflow-y: scroll;

    padding: 5px;
    border: 1px solid #2B2B32;
}

.statisticsTable {
    margin-top:10px;
    width:100%;
}

.statisticsTableLabel {
    text-align:right;
    width: 120px;
}


/* **************************************************************************************** */
/*                                     GAME OVER                                            */
/* **************************************************************************************** */

.gameOverContentsDiv {
    position:absolute;
    top:115px;
    left:45px;
    right:45px;
    bottom:45px;
    /*border:1px solid green;*/
}

.gameOverTableTopRow {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 39px;
}
.gameOverTableBottomRow {
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 39px;
}

.gameOverHeading {
    font-size: 18px;
    width: 300px;
    padding: 10px;
    margin: 5px auto;
    color: yellow;
}

.gameOverSubHeading {
    font-size: 16px;
    width: 300px;
    padding: 10px;
    margin: 5px auto;
}

.gameOverBlurb {
    padding: 10px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gameOverBonus {
    color: #3AA5E6;
}


/* **************************************************************************************** */
/*                                         OFFLINE TAB                                      */
/* **************************************************************************************** */

.offlineHeader {
    position:absolute;
    top: 125px;
    left: 0;
    height: 55px;
    width: 100%;
    text-align: center;
    /*border:1px solid blue;*/
}

.offlineTitleText {
    font-size: 15px;
}
.offlineSubHeader {
    font-size: 13px;
}
.offlineSubHeader {
    font-size: 13px;
}

.offlineProgressBarContainer {
    position:absolute;
    top: 200px;
    left: 0;
    height: 55px;
    width: 100%;
}

.offlineProgressBar {
    border: 1px solid #FA0;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 100%;
}

.offlineProgressSlider {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #FA0;
    /*opacity: 0.4;*/
    width: 0;
}

.offlineProgressStatsContainer {
    position:absolute;
    /*border: 1px solid #2B2B32;*/
    top: 270px;
    left: 0;
    height: 150px;
    width: 100%;
}

.offlineCancelButtonContainer {
    position:absolute;
    top: 450px;
    left: 0;
    height: 55px;
    width: 100%;
}

.offlineCancelButton {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
    width: 300px;
    border: 1px solid #3AA5E6;
    text-align: center;
    cursor: default;
    background-color: transparent;
    z-index: 100;
}

.offlineCancelButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.offlineCancelButton:active {
    top: 1px;
    bottom: -1px;
    cursor: pointer;
}


/* **************************************************************************************** */
/* Save Button                                                                              */
/* **************************************************************************************** */

.buttonNoteDiv {
    padding: 5px;
    font-weight: normal;
    text-align: center;
    float: left;
}

.saveButtonContainer {
    overflow: hidden; /* make the div respect the height of the floating upgrade buttons. */
    padding:2px;
    margin:0;
}

.exportImportSaveContainer {
    display: none;
    padding: 5px;
    margin:0;
    overflow: hidden; /* make the div respect the height of the floating upgrade buttons. */
}

.saveButton {
    padding:3px;
    border: 1px solid #3AA5E6;
    text-align: center;
    cursor: pointer;
    width: 100px;
}

.saveButton:hover {
    background-color: #2B2B32;
    cursor: pointer;
}

.saveButton:active {
    position: relative;
    top: 1px;
    cursor: pointer;
}