/* GENERIC */
* {
	margin : 0;
  padding : 0;
  font-family : "Lucida Console", "Monaco", "monospace";
}
a {
  cursor : pointer;
}
.hidden {
  display : none;
}
.object {
  margin : 0 auto;
  text-align : center;
}
.object img {
  height : 100%;
}
.map .object, .arena .object {
  position : absolute;
}
.map .weight, .map .cost {
  display : none;
}
.map .inventory .cost, .map .inventory .weight {
  display : block;
}
.roundedCorners {
  border-radius : 4px;
}
.grayArea {
  background-color : #474747;
  border : 1px solid #f1f1f1;
  color : #f1f1f1;
}
.grayArea.active {
  box-shadow : 0px 0px 10px #f1f1f1;
}
.whiteArea {
  background-color : #f1f1f1;
  border : 1px solid #474747;
  color : #474747;
}
.keyboardKey {
  box-shadow: inset 6px 4px 20px 10px #e1e1e1;
  width: 27px;
  height: 27px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 5px 0 0 5px;
  float: left;
  margin: 0 10px 0 0;
  background-color: #fff;
  color : #474747;
  position : relative;
}
.button {
  padding : 2px 5px;
  font-size : 13px;
}
.object .level {
  border-radius : 15px;
  font-size : 10px;
  width : 15px;
  height : 12px;
  position : absolute;
  top : 5px;
  left : 5px;
  text-align : center;
  padding : 3px 0 0;
  z-index : inherit;
}
/* GAME */
.preloader {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  background-color : #474747;
  text-align : center;
  z-index : 2;
}
.preloader p {
  background-image : url(../images/preloader.gif);
  background-repeat : no-repeat;
  background-position : center 30px;
  margin : 150px 0 0;
  height : 120px;
  color : #f1f1f1;
}
.game {
  margin : 20px auto 0;
}
.game > div {
  float : left;
  width : 300px;
  height : 600px;
}
.game > div.gameArea {
  width : 600px;
}
/* CHARACTER SELECT */
.characterSelect {
  padding : 10px 0 0;
}
.characterSelect .name {
  margin : 0 20px 10px;
  padding : 20px;
}
.characterSelect .name label {
  font-size : 22px;
  color : #9c9c9c;
  margin : 0 10px 0 20px;
  position : relative;
  top : 2px;
}
.characterSelect .name input {
  width : 280px;
  padding : 5px;
  color : #9c9c9c;
  font-size : 16px;
}
.characterSelect .name input.error {
  color : #ff0000;
}
.characterSelect .name p {
  font-size : 28px;
  text-align : center;
}
.characterSelect .player {
  height : 428px;
  position : relative;
}
.characterSelect .player .object {
  height : 100%;
  width : auto;
}
.characterSelect .player.confirmed {
  margin : 0 20px;
  height : 386px;
}
.characterSelect .player.confirmed .lore {
  display : none;
  font-size : 14px;
  padding : 50px 20px 0 120px;
  text-align : justify;
}
.characterSelect .player.confirmed .object.class {
  float : right;
}
.characterSelect .player.confirmed .button {
  position : absolute;
  bottom : 10px;
}
.characterSelect .player.confirmed .button.showAbilities {
  left : 110px;
}
.characterSelect .player.confirmed .button.showLore {
  left : 200px;
}
.characterSelect .player .level {
  display : none;
}
.characterSelect .player .name {
  position : absolute;
  font-size : 48px;
  padding : 10px;
  text-shadow : 0px 0px 4px #f1f1f1;
  top : 200px;
}
.characterSelect .player .next, .characterSelect .player .previous {
  display : block;
  position : absolute;
  height : 100px;
  top : 150px;
}
.characterSelect .player .next {
  right : 10px;
}
.characterSelect .player .previous {
  left : 10px;
}
.characterSelect .classes {
  width : 206px;
  height : 62px;
  margin : 0 auto;
}
.characterSelect .classes li {
  list-style-type : none;
  float : left;
  margin : 0 0 0 10px;
}
.characterSelect .classes li:first-child {
  margin : 0;
}
.characterSelect .classes li .level {
  display : none;
}
.characterSelect .statistics {
  height : 100px;
  margin : 10px 20px;
}
.characterSelect .statistics .bars {
  border : none;
}
.bars {
  margin : 10px 10px 10px 20px;
  float : left;
}
.bar {
  height : 18px;
  text-align : center;
  margin : 5px 0 0;
  position : relative;
  width : 300px;
}
.bar div {
  position : absolute;
  height : 100%;
}
.bar p {
  font-size : 12px;
  padding : 5px 0 0;
  position : relative;
  z-index : 2;
}
.health div {
  background-color : #990000;
}
.mana div {
  background-color : #699EDB;
}
.stamina div {
  background-color: #4AC615;
}
.playButton {
  background: #4c4c4d;
  width : 194px;
  height : 60px;
  text-align : center;
  font-size : 50px;
  display : block;
  float : left;
  margin : 14px 20px 10px 10px;
  padding : 10px 0 0;
}
/* ABILITIES */
.abilityList {
  width : 280px;
  border : 1px solid #000;
  padding : 10px;
  text-align : left;
}
.characterSelect .player .abilityList {
  position : absolute;
  left : 100px;
  border : none;
}
.characterSelect .player .abilityList .classTypeName {
  display : none;
}
.abilityList.opponentAbilityList {
  margin : 0 0 0 310px;
}
.abilityList p {
  font-weight : bold;
  margin : 10px 0 5px;
}
.abilityList p.classTypeName span {
  display : block;
  font-size : 12px;
}
.abilityList p:first-child {
  margin-top : 0;
}
.equipped .object {
  width : 30px !important;
  height : 30px !important;
  float : left;
  margin : 10px;
  position : relative;
  top : 0 !important;
  left : 0 !important;
}
.equipped .object .level {
  top : -5px;
  left : -5px;
}
.equipped .object .cost, .equipped .object .weight {
  display : none;
}
.abilityList ul {
  margin : 0 0 0 10px;
}
.abilityList ul li {
  list-style-type : none;
  font-size : 14px;
}
.abilityList ul li span {
  font-size : 12px;
}
.ability {
  position : relative;
  text-align : left;
  clear : both;
}
.ability .health {
  margin : 0;
  color : #990000;
  background-color : transparent;
}
.ability .mana {
  color : #699EDB;
  background-color : transparent;
}
.ability .stamina {
  color: #4AC615;
  background-color : transparent;
}
.ability p span {
  font-weight : normal;
}
.ability p span.description {
  font-size : 12px;
}
.ability p {
  text-decoration : none;
  font-weight : bold;
  font-size : 14px;
}
.ability .costIndicator {
  position : absolute;
  top : 0px;
  right : 0px;
  color : #f1f1f1;
  width : 25px;
  height : 25px;
  font-size : 12px;
  padding : 5px 0 0 5px;
  border : 1px solid #474747;
}
.player.confirmed .abilityList p {
  margin : 10px 0 0;
}
.confirmed.player .abilityList .ability {
  clear : both;
}
.confirmed.player .abilityList .ability.potion {
  display : none;
}
.keyboardKey .cooldown {
  width : 100%;
  height : 24px;
  position : absolute;
  top : -1px;
  left : -1px;
  background-color : #474747;
  padding : 8px 0 0;
  opacity : 0.9;
  text-align : center;
}
/* MAP */
.caveSeparator {
  width : 600px;
  height : 600px;
  background-color : #000;
  position : absolute;
}
.map, .cave {
  position : relative;
}
.map .fog {
  width : 60px;
  height : 60px;
  background-color : #000;
  z-index : 11 !important;
}
.map .fog.clear {
  background-color : transparent;
}
.map .fog.discovered {
  opacity : 0.6;
}
.map .fog.semi {
  opacity : 0.4;
}
.console {
  height : 100%;
  width : 100%;
  padding : 5%;
  font-size : 12px;
  font-family : courier;
  background-color : #474747;
  color : #f1f1f1;
}
.map .speech {
  position : absolute;
  z-index : 11;
  bottom : 10px;
  left : 10px;
  width : 560px;
  padding : 10px;
}
.map .speech p {
  padding : 0 0 10px 0;
}
.map .speech ul li {
  list-style-type : none;
}
.map .inventory .object .weight {
  display : block;
  position : absolute;
  left : 70px;
  top : 12px;
  background-image : url(../images/miscellaneous/inventory-weight.png);
  background-repeat : no-repeat;
  background-size : 13px;
  width : 22px;
  text-align : right;
}
.map .inventory .object.selected .weight, .map .inventory .object:hover .weight,
.map .inventory .object.selected .cost, .map .inventory .object:hover .cost {
  color : #474747;
}

.map .inventory .object .cost {
  display : block;
  position : absolute;
  top : 12px;
  right : 10px;
  background-image : url(../images/miscellaneous/inventory-cost.png);
  background-repeat : no-repeat;
  background-size : 13px;
  width : 22px;
  text-align : right;
}

.inventory, .journal {
  margin : 0 auto;
  opacity : 0.95;
  top : 50px !important;
  left : 50px !important;
}
.journal .list {
  position : relative;
}
.inventory .noItems {
  text-align : center;
  padding : 170px 0 0;
}
.inventory .header, .journal .header {
  font-size : 30px;
  text-align : center;
  margin : 20px 0;
}
.inventory .items, .inventory .selectedItem, .inventory .equippedItem, .journal .list, .journal .selectedQuest {
  float : left;
  padding : 10px;
  width : 180px;
  height : 180px;
  border : 1px solid #f1f1f1;
  border-radius : 4px;
  margin : 0 0 0 33px;
}
.inventory .equippedItem {
  width : 63px;
  height : 63px;
  margin-top : 10px;
}
.inventory .items, .journal .list, .journal .selectedQuest {
  overflow : auto;
  height : 368px;
}
.inventory .equippedItem.money p {
  background-image : url(../images/miscellaneous/inventory-cost.png);
  background-repeat : no-repeat;
  background-size : 25px;
  background-position : top center;
  padding : 35px 0 0;
  font-size : 16px;
}
.inventory .carryWeight {
  position : absolute;
  bottom : 10px;
  left : 160px;
  font-size : 16px;
  background-image : url(../images/miscellaneous/inventory-weight.png);
  background-repeat : no-repeat;
  background-size : 16px;
  padding : 0 0 0 20px;
}
.inventory .object {
  position : relative;
  z-index : 101;
  border-radius : 4px;
  cursor : pointer;
  top : 0 !important;
  left : 0 !important;
}
.inventory .items .object, .journal .list .object {
  width : auto !important;
  height : 30px !important;
  padding : 5px;
  text-align : left;
  position : relative;
  border-radius : 4px;
}
.journal .list .object.completed {
  text-decoration : line-through;
}
.inventory .items .object .level {
  left : 45px;
  top : 11px;
}
.inventory .items .object:hover, .inventory .object.selected, .journal .list .object.selected {
  background-color : #f1f1f1;
  color : #474747;
}
.journal .list .object.selected p {
  position : relative;
  top : 7px;
}
.inventory .selectedItem {
  position : relative;
}
.inventory .selectedItem p, .journal .selectedQuest p {
  color : #f1f1f1;
  font-size : 12px;
}
.inventory .selectedItem p span, .journal .selectedQuest p span, .store .addDetailContainer p span {
  display : block;
}
.inventory .selectedItem p .name, .journal .selectedQuest p .name, .store .addDetailContainer p .name {
  font-size : 16px;
}
.inventory .selectedItem p .description, .journal .selectedQuest p .description, .store .addDetailContainer p .description {
  font-style : italic;
}
.journal .selectedQuest ul {
  font-size: 12px;
  margin : 10px 0 0;
  list-style-type : disc;
  list-style-position : inside;
}
.journal .selectedQuest ul li {
  text-decoration : line-through;
}
.journal .selectedQuest ul li:last-child {
  text-decoration : none;
}
.journal .selectedQuest.completed ul li:last-child {
  text-decoration : line-through;
}
.inventory .selectedItem .button {
  position : absolute;
  bottom : 10px;
  left : 105px;
}
.inventory .selectedItem .button.equip {
  left : 45px;
}
.inventory.equippedItem {
  position : relative;
}
.inventory .equippedItem p {
  font-size : 12px;
  color : #f1f1f1;
  text-align : center;
  padding : 0 0 5px 0;
}
.inventory .equippedItem .object {
  width : 45px !important;
  height : 45px !important;
  margin : 0 auto;
  float : none;
}
.inventory .equippedItem .object .cost, .inventory .equippedItem .object .weight {
  display : none;
}
.inventory .equippedItem .object img {
  width : 100%;
  height : 100%;
}
.arena .passives {
  top : 488px;
  left : 241px;
  width : 322px;
}
.arena .abilityDescription {
  width : 300px;
  padding : 10px;
  top : 265px;
  left : 240px;
}
.arena .abilityDescription.opponentAbilityDescription {
  top : 165px;
  left : 40px;
}
.arena {
  position : relative;
}
.arena > div {
  position : absolute;
}
.arena .object {
  width : 150px !important;
  height : 300px !important;
  background-size : 150px auto;
  top : 280px !important;
  left : 55px !important;
}
.arena .object.opponent {
  width : 100px !important;
  height : 100px !important;
  top : 60px !important;
  left : 390px !important;
  background-size : auto 100%;
}
.arena .passives .object {
  position : static;
  width : 310px !important;
  height : auto !important;
  padding : 5px;
}
.arena .passives .object .rounds {
  float: left;
  background-color : #333;
  padding : 5px;
  border-radius : 15px;
  width : 15px;
  height : 15px;
  margin : 4px 0 0 5px;
  border : 1px solid #222;
}
.arena .passives .object p.description {
  font-size : 12px;
  padding : 5px 0 0;
}
.arena .ability.object {
  width : 280px !important;
  height : auto !important;
  left : 250px !important;
  padding : 10px;
  top : 290px !important;
}
.arena .ability.object.opponent {
  top : 160px !important;
  left : 50px !important;
}
.arena .bars {
  top : 350px;
  left : 220px;
  padding : 10px;
}
.arena .bars.opponentBars {
  top : 20px;
  left : 20px;
}
.arena .bars p {
  margin : 0 0 10px 0;
}
.arena .roundIndicator {
  bottom : 10px;
  right : 10px;
  position : absolute;
  padding : 10px;
  font-weight: bold;
  color: #f1f1f1;
}
.store .header {
  font-size : 30px;
  text-align : center;
  margin : 20px 0;
}
.store .addDetailContainer {
  padding : 10px;
  float : right;
  width : 256px;
  height : 180px;
  border : 1px solid #f1f1f1;
  border-radius : 4px;
  margin : 0 11px 0 11px;
  position: relative;
}
.store .addDetailContainer a.buy {
  bottom : 10px;
  left: 119px;
  position : absolute;
}
.store .items {
  padding : 10px;
  float : right;
  width : 256px;
  height : 284px;
  border : 1px solid #f1f1f1;
  border-radius : 4px;
  margin : 11px;
}
.store .items a.button {
  margin : 11px;
}
.store .listContainer {
  padding : 10px;
  width : 256px;
  float : right;
  height : 247px;
  margin : 11px;
  position : absolute;
  top : 330px;
}
.store .listContainer div.object {
  position: relative;
  width : auto !important;
  height : 30px !important;
  padding : 5px;
  text-align : left;
  border-radius: 4px;
  cursor: pointer;
}
.store .listContainer .object:hover, .listContainer .object.selected {
  background-color: #f1f1f1;
}
.store .listContainer .object .level {
  left : 67px;
  top : 11px;
}
.store .listContainer .object .weight {
  display : block;
  position : absolute;
  left : 120px;
  top : 12px;
  background-image : url(../images/miscellaneous/inventory-weight.png);
  background-repeat : no-repeat;
  background-size : 13px;
  width : 22px;
  text-align : right;
}
.store .listContainer .object .cost {
  display : block;
  position : absolute;
  top : 12px;
  right : 20px;
  background-image : url(../images/miscellaneous/inventory-cost.png);
  background-repeat : no-repeat;
  background-size : 13px;
  width : 22px;
  text-align : right;
}
.store .listContainer .armor .cost {
  display : block;
  position : absolute;
  top : 12px;
  right : 20px;
  background-image : url(../images/miscellaneous/inventory-cost.png);
  background-repeat : no-repeat;
  background-size : 13px;
  width : 35px;
  text-align : right;
}
.store .listContainer .object.selected .weight,
.store .listContainer .object:hover .weight,
.store .listContainer .object.selected .cost,
.store .listContainer .object:hover .cost {
  color : #474747;
}