code:
html {
	background: #1e1e20;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	font-size:7vw; /*font-size:2vw;*/
	color: #ffffff;
	overflow:hidden;
	cursor:default;
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

body{
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

div {
    width: 100%;
	margin:0;
    padding: 0;
	background-color: transparent;
	-webkit-user-select: none;
}

p{
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

table{
	width:90vw;
	padding:0;
	margin:0;
	border:0;
	border-collapse:collapse;
}
h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}

.full{
	display: flex;
	flex-flow: column;
	height: calc(100% - 100vw);
}

.attribute-container{
	position:relative;
	box-sizing:border-box;
	background-color:#19191a;
	border-radius: 5px;
	padding:4px;
	margin:0 0 8px 0;
}
.attribute-container.effects{
	-webkit-flex: 1 1;
	-webkit-column-fill: auto;
	overflow-y: scroll;
}
.attribute-container-inner {
	box-sizing:border-box;
	border-radius: 5px;
	background: #1B1B1D;
	padding:4px;
	-webkit-flex: 1;
	-webkit-column-fill: auto;
	overflow-y: scroll;
}

.character-name{
	vertical-align: middle;
	text-align: center;
	font-size:1.4em;
	margin:0;
	-webkit-user-select: none;
}

.full-width-container{
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:0;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.half-width-container{
	position:relative;
	float:left;
	width:50%;
	padding:0;
	margin:0;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.quarter-width-container{
	position:relative;
	float:left;
	width:25%;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.three-quarter-width-container{
	position:relative;
	float:left;
	width:75%;
	-webkit-user-select: none;
	box-sizing: border-box;
}

.icon {
	position:relative;
	float:left;
	width:14.66%;
	padding:0;
	margin:1%;
	border-radius: 5px;
	background-color: #333333;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.icon.small {
	width:10%;
}
.icon.effect {
	width:12.28%;
}
.icon-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
.icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.timer-background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	-webkit-user-select: none;
	opacity:0.5;
}

.barBackgroundExp{
	width:90vw;
	height:2vw;
	background:#222222;
	float:left;
	margin:0 2vw 2vw 2vw;
	border-radius: 2px;
}
.barBackgroundAtt{
	width:65vw;
	height:5vw;
	background:#222;
	float:left;
	margin:3vw 0 4vw 0;
	border-radius: 2px;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}
.overlay:hover{
	background-color:#fff;
	opacity:0.20;
	border-radius:5px;
}
.overlay-alt {
	width: 100%;
	height: auto;
	position: relative;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	cursor: pointer;
}
.overlay-alt:hover{
	background-color:#555;
	border-radius:5px;
}

/***********************************************************/
/*EVENT LOG*/

.event-log {
	word-wrap: break-word;
	box-sizing:border-box;
	display: flex;
	flex-flow: column;
	float:left;
	background-color:#19191a;
	width:100%;
	height:100vw;
	margin:0;
	padding:4px;
	bottom:32px;
	border-radius:5px;
	-webkit-user-select: none;
}

.event-log-inner {
	box-sizing:border-box;
	border-radius: 5px;
	background: #1B1B1D;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	width:100%;
	overflow-y: scroll;
	-webkit-flex: 1;
	-webkit-column-fill: auto;
}

.event-log-entry {
	position:relative;
	box-sizing:border-box;
	border-radius: 5px;
	padding:4px;
	width:100%;
}

/***********************************************************/
/*MAP*/

.map-container{
	float:left;
	display:inline-block;
	background-color:#19191a;
	width:100%;
	margin:0;
	padding:0;
	bottom:8px;
	border-radius:5px;
	-webkit-user-select: none;
}
.map-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.place-icon{
	position:absolute;
	float:left;
	margin:15%;
	width:70%;
	padding:0;
	-webkit-user-select: none;
}
.place-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.map-tile{
	position: relative;
	float:left;
	padding:0;
	margin:1%;
	border-radius:5px;
	background-color:#808080;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.map-tile:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.map-tile-content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.map-tile.blank{
	background-color:transparent;
	-webkit-user-select: none;
}
.map-tile.player{
	background-color:#CCC;
}
.map-tile.dangerous{
	background: repeating-linear-gradient(
		  135deg,
		  #333,
		  #333 10px,
		  #444 10px,
		  #444 20px
		);
}
.map-tile.player.dangerous{
	background-color:#404040;
}

.map-tile.movement{
	border-style: solid;
	background-color:#CCC;
	border-color:#6163DB;
}
.map-tile.movement.dangerous{
	background-color:#404040;
	border-color:#E74663;
}
.map-tile.movement:hover{
	cursor:pointer;
	border-color:#9798e7;
	-webkit-user-select: none;
}
.map-tile.movement.dangerous:hover{
	cursor:pointer;
	border-color:#e74696;
	-webkit-user-select: none;
}

.npc-icon{
	position:absolute;
	height:33%;
	width:33%;
	top:2px;
	left:2px;
}
.npc-home-icon{
	position:absolute;
	height:33%;
	width:33%;
	bottom:2px;
	left:2px;
}

.item-icon{
	position:absolute;
	height:33%;
	width:33%;
	bottom:2px;
	left:2px;
}

.hotkey-icon{
	position:absolute;
	float:left;
	width:100%;
	height:100%;
	right:2px;
	top:2px;
	font-size:10px;
	line-height:12px;
	pointer-events: none;
	-webkit-user-select: none;
	text-align: right;
	color: #555;
}
.hotkey-icon.dangerous{
	color: #BBB;
	-webkit-user-select: none;
}
.hotkey-icon.disabled{
	color: #444;
	-webkit-user-select: none;
}

/***********************************************************/
/*INVENTORY VIEW*/

.inventory-equipped{
	float:left;
	display:inline-block;
	background-color:#19191a;
	width:66.666%;
	margin:0;
	padding:0;
	border-radius:5px;
	-webkit-user-select: none;
}
.inventory-equipped:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.inventory-item-slot {
	display:inline-block;
	background-color: #333333;
	position:relative;
	float:left;
	border-radius: 5px;
	width:23%;
	margin:1%;
	-webkit-box-sizing: border-box;
}

.inventory-equipped.accessories{
	float:left;
	background-color:#19191a;
	text-align: center;
	width:33.333%;
	margin:0;
	padding:0;
	border-radius:5px;
	-webkit-user-select: none;
}

.inventory-item-slot.secondary{
	width:14.67%;
}
.inventory-item-slot.unequipped{
	width:11.5%;
	margin:0.5%;
}
.inventory-item-slot:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.inventory-item-slot.disabled, .inventory-item-slot.piercing.disabled {
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
}
.inventory-item-slot.disabled-light, .inventory-item-slot.piercing.disabled-light{
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #292929 10px,
	  #292929 20px
	);
}
.inventory-item-slot.concealed, .inventory-item-slot.piercing.concealed {
	background: #222;
}
.inventory-icon-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.overlay-inventory {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}
.overlay-inventory:hover{
	background-color:#fff;
	opacity:0.20;
	border-radius:5px;
	cursor:pointer;
}
.overlay-inventory.no-pointer{
	cursor:default;
}

.femininityIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.cummedIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.displacedIcon{
	position:absolute;
	width:40%;
	height:40%;
	left:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.concealedIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.scarIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.raceBlockIcon{
	position:absolute;
	width:75%;
	height:75%;
	margin:12.5%;
	pointer-events: none;
	-webkit-user-select: none;
}
.watchHand{
	width:100%;
	height:100%;
	-webkit-user-select: none;
}

.empty {
	background-color:#242424;
}
.transparent {
	background-color:transparent;
}
.unknown {
	background-color:#252527;
}
.unknown:hover{
	background-color:#3e3e41;
}
.common {
	background-color:#4b4b4e;
}
.common:hover{
	background-color:#646468;
}
.uncommon {
	background-color:#3D5C47;
}
.uncommon:hover{
	background-color:#5A8767;
}
.rare {
	background-color:#4b4b6c;
}
.rare:hover{
	background-color:#5e5e87;
}
.epic {
	background-color:#523455;
}
.epic:hover{
	background-color:#6b446f;
}
.legendary {
	background-color:#4b4b33;
}
.legendary:hover{
	background-color:#6a6a48;
}
.quest {
	background-color:#344C4B;
}
.quest:hover{
	background-color:#486A69;
}
.jinxed {
	background-color:#694b4e;
}
.jinxed:hover{
	background-color:#865f63;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}


code:
html {
	background: #fcfcfc;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	font-size:7vw; /*font-size:2vw;*/
	color: #262626;
	overflow:hidden;
	cursor:default;
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

body{
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

div {
    width: 100%;
	margin:0;
    padding: 0;
	background-color: transparent;
	-webkit-user-select: none;
}

p{
	margin:0;
	padding:0;
	-webkit-user-select: none;
}

table{
	width:90vw;
	padding:0;
	margin:0;
	border:0;
	border-collapse:collapse;
}
h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
	-webkit-user-select: none;
}

.full{
	display: flex;
	flex-flow: column;
	height: calc(100% - 100vw);
}

.attribute-container{
	position:relative;
	box-sizing:border-box;
	background-color:#F0F0F0;
	border-radius: 5px;
	padding:4px;
	margin:0 0 8px 0;
}
.attribute-container.effects{
	-webkit-flex: 1 1;
	-webkit-column-fill: auto;
	overflow-y: scroll;
}
.attribute-container-inner {
	box-sizing:border-box;
	border-radius: 5px;
	background: #cacaca;
	padding:4px;
	-webkit-flex: 1;
	-webkit-column-fill: auto;
	overflow-y: scroll;
}

.character-name{
	vertical-align: middle;
	text-align: center;
	font-size:1.4em;
	margin:0;
	-webkit-user-select: none;
}

.full-width-container{
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:0;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.half-width-container{
	position:relative;
	float:left;
	width:50%;
	padding:0;
	margin:0;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.quarter-width-container{
	position:relative;
	float:left;
	width:25%;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.three-quarter-width-container{
	position:relative;
	float:left;
	width:75%;
	-webkit-user-select: none;
	box-sizing: border-box;
}

.icon {
	position:relative;
	float:left;
	width:14.66%;
	padding:0;
	margin:1%;
	border-radius: 5px;
	background-color: #ccc;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.icon.small {
	width:10%;
}
.icon.effect {
	width:10.5%;
}
.icon-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
.icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.timer-background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	-webkit-user-select: none;
	opacity:0.5;
}

.barBackgroundExp{
	width:90vw;
	height:2vw;
	background:#ddd;
	float:left;
	margin:0 2vw 2vw 2vw;
	border-radius: 2px;
}
.barBackgroundAtt{
	width:65vw;
	height:5vw;
	background:#ddd;
	float:left;
	margin:4vw 0 0 0;
	border-radius: 2px;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}
.overlay:hover{
	background-color:#fff;
	opacity:0.20;
	border-radius:5px;
}
.overlay.alt:hover{
	background-color:#fff;
	opacity:0.10;
	border-radius:5px;
}

/***********************************************************/
/*EVENT LOG*/

.event-log {
	word-wrap: break-word;
	box-sizing:border-box;
	display: flex;
	flex-flow: column;
	float:left;
	background-color:#F0F0F0;
	width:100%;
	height:100vw;
	margin:0;
	padding:4px;
	bottom:32px;
	border-radius:5px;
	-webkit-user-select: none;
}

.event-log-inner {
	box-sizing:border-box;
	border-radius: 5px;
	background: #ddd;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	width:100%;
	overflow-y: scroll;
	-webkit-flex: 1;
	-webkit-column-fill: auto;
}

.event-log-entry {
	position:relative;
	box-sizing:border-box;
	border-radius: 5px;
	padding:4px;
	width:100%;
}

/***********************************************************/
/*MAP*/

.map-container{
	float:left;
	display:inline-block;
	background-color:#F0F0F0;
	width:100%;
	margin:0;
	padding:0;
	bottom:8px;
	border-radius:5px;
	-webkit-user-select: none;
}
.map-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.place-icon{
	position:absolute;
	float:left;
	margin:15%;
	width:70%;
	padding:0;
	-webkit-user-select: none;
}
.place-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.map-tile{
	position: relative;
	float:left;
	padding:0;
	margin:1%;
	border-radius:5px;
	background-color:#8f8f8f;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.map-tile:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.map-tile-content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.map-tile.blank{
	background-color:transparent;
	-webkit-user-select: none;
}
.map-tile.player{
	background-color:#CCC;
}
.map-tile.dangerous{
	background: repeating-linear-gradient(
		  135deg,
		  #ccc,
		  #ccc 10px,
		  #bbb 10px,
		  #bbb 20px
		);
}
.map-tile.player.dangerous{
	background-color:#bababa;
}

.map-tile.movement{
	border-style: solid;
	background-color:#CCC;
	border-color:#6163DB;
}
.map-tile.movement.dangerous{
	background-color:#bababa;
	border-color:#E74663;
}
.map-tile.movement:hover{
	cursor:pointer;
	border-color:#9798e7;
	-webkit-user-select: none;
}
.map-tile.movement.dangerous:hover{
	cursor:pointer;
	border-color:#e74696;
	-webkit-user-select: none;
}

.npc-icon{
	position:absolute;
	height:33%;
	width:33%;
	top:2px;
	left:2px;
}
.npc-home-icon{
	position:absolute;
	height:33%;
	width:33%;
	bottom:2px;
	left:2px;
}

.item-icon{
	position:absolute;
	height:33%;
	width:33%;
	bottom:2px;
	left:2px;
}

.hotkey-icon{
	position:absolute;
	float:left;
	width:100%;
	height:100%;
	right:2px;
	top:2px;
	font-size:10px;
	line-height:12px;
	pointer-events: none;
	-webkit-user-select: none;
	text-align: right;
	color: #555;
}
.hotkey-icon.dangerous{
	color: #BBB;
	-webkit-user-select: none;
}
.hotkey-icon.disabled{
	color: #aaa;
	-webkit-user-select: none;
}

/***********************************************************/
/*INVENTORY VIEW*/

.inventory-equipped{
	float:left;
	display:inline-block;
	background-color:#F0F0F0;
	width:66.666%;
	margin:0;
	padding:0;
	border-radius:5px;
	-webkit-user-select: none;
}
.inventory-equipped:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.inventory-item-slot {
	display:inline-block;
	background-color: #ccc;
	position:relative;
	float:left;
	border-radius: 5px;
	width:23%;
	margin:1%;
	-webkit-box-sizing: border-box;
}

.inventory-equipped.accessories{
	float:left;
	background-color:#ccc;
	text-align: center;
	width:33.333%;
	margin:0;
	padding:0;
	border-radius:5px;
	-webkit-user-select: none;
}

.inventory-item-slot.secondary{
	width:14.67%;
}
.inventory-item-slot.unequipped{
	width:11.5%;
	margin:0.5%;
}
.inventory-item-slot:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.inventory-item-slot.disabled, .inventory-item-slot.piercing.disabled {
	background: repeating-linear-gradient(
	  135deg,
	  #555,
	  #555 10px,
	  #ddd 10px,
	  #ddd 20px
	);
}
.inventory-item-slot.disabled-light, .inventory-item-slot.piercing.disabled-light {
	background: repeating-linear-gradient(
	  135deg,
	  #aaa,
	  #aaa 10px,
	  #ddd 10px,
	  #ddd 20px
	);
}
.inventory-item-slot.concealed, .inventory-item-slot.piercing.concealed {
	background: #555;
}
.inventory-icon-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.overlay-inventory {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}
.overlay-inventory:hover{
	background-color:#fff;
	opacity:0.20;
	border-radius:5px;
	cursor:pointer;
}
.overlay-inventory.no-pointer{
	cursor:default;
}

.femininityIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.cummedIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.displacedIcon{
	position:absolute;
	width:40%;
	height:40%;
	left:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.concealedIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.scarIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.raceBlockIcon{
	position:absolute;
	width:75%;
	height:75%;
	margin:20%;
	pointer-events: none;
	-webkit-user-select: none;
}
.watchHand{
	width:100%;
	height:100%;
	-webkit-user-select: none;
}

.empty {
	background-color:#D1D1D1;
}
.transparent {
	background-color:transparent;
}
.unknown {
	background-color:#AFAFB6;
}
.unknown:hover{
	background-color:#C9C9CF;
}
.common {
	background-color:#BDBDC1;
}
.common:hover{
	background-color:#CFCFD3;
}
.uncommon {
	background-color:#3D5C47;
}
.uncommon:hover{
	background-color:#5A8767;
}
.rare {
	background-color:#B4D0EE;
}
.rare:hover{
	background-color:#C1DAF1;
}
.epic {
	background-color:#DDC1E2;
}
.epic:hover{
	background-color:#ECDCEF;
}
.legendary {
	background-color:#F1DEA7;
}
.legendary:hover{
	background-color:#F7EAC5;
}
.quest {
	background-color:#BEE4E4;
}
.quest:hover{
	background-color:#E0F1F1;
}
.jinxed {
	background-color:#E3B5B5;
}
.jinxed:hover{
	background-color:#F3E3E3;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}

repo_name: klorpa/Pedo

license: unknown


code:
html {
	background: #1e1e20;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	font-size:7vw; /*font-size:2vw;*/
	color: #ffffff;
	overflow:hidden;
	cursor:default;
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

div {
    width: 100%;
	margin:0;
    padding: 0;
	background-color: transparent;
}

p{
	margin:0;
	padding:0;
}

table{
	width:90vw;
	padding:0;
	margin:0;
	border:0;
	border-collapse:collapse;
}
td{
	font-size:1em;
	margin:0;
	padding:2 2 2 2;
	/*background:#000000;*/
}
tr{
	padding:0 0 8 0;
	margin:0;
}

h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.quarterContainer{
	position:relative;
	float:left;
	width:20%;
	height:100%;
	-webkit-user-select: none;
}

.button {
	position:relative;
	width:30px;
	height:30px;
	padding:0;
	margin-left: auto;
    margin-right: auto;
	border-radius: 5px;
	/*background-color: #333333;*/
	-webkit-user-select: none;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#555),
		color-stop(0.50, #444),
		color-stop(0.92, #333),
		to(#222));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.button.highlight{
	/*background: #ffdf80;*/
	-webkit-user-select: none;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffecb3),
		color-stop(0.50, #ffdf80),
		color-stop(0.92, #ffd966),
		to(#ffd24d));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.button.disabled{
	background:#333333;
	cursor:default;
}
.button:hover{
	background:#666666;
	cursor:pointer;
}
.button.disabled:hover{
	background:#333333;
	cursor:default;
}
.button.highlight:hover{
	background:#fff2cc;
	cursor:pointer;
}
.button.highlight.disabled:hover{
	background: #ffdf80;
	cursor:default;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}

.disabledLayer{
	position:absolute;
	left:0;
	top:0;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.5;
	border-radius:5px;
}


code:
html {
	background: #fcfcfc;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	font-size:7vw; /*font-size:2vw;*/
	color: #262626;
	overflow:hidden;
	cursor:default;
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
}

div {
    width: 100%;
	margin:0;
    padding: 0;
	background-color: transparent;
}

p{
	margin:0;
	padding:0;
}

table{
	width:90vw;
	padding:0;
	margin:0;
	border:0;
	border-collapse:collapse;
}
td{
	font-size:1em;
	margin:0;
	padding:2 2 2 2;
	/*background:#000000;*/
}
tr{
	padding:0 0 8 0;
	margin:0;
}

h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.quarterContainer{
	position:relative;
	float:left;
	width:20%;
	height:100%;
	-webkit-user-select: none;
}

.button {
	position:relative;
	width:30px;
	height:30px;
	padding:0;
	margin-left: auto;
    margin-right: auto;
	border-radius: 5px;
	/*background-color: #333333;*/
	-webkit-user-select: none;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ddd),
		color-stop(0.50, #ccc),
		color-stop(0.92, #bbb),
		to(#aaa));
	text-shadow:
		1px 1px 2px rgba(444,444,444,0.7),
		0px 1px 0px rgba(444,444,444,0.4);
}
.button.highlight{
	/*background: #ffdf80;*/
	-webkit-user-select: none;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#FFE085),
		color-stop(0.50, #FFC824),
		color-stop(0.92, #FABB00),
		to(#CC9900));
	text-shadow:
		1px 1px 2px rgba(444,444,444,0.7),
		0px 1px 0px rgba(444,444,444,0.4);
}
.button.disabled{
	background:#ccc;
	cursor:default;
}
.button:hover{
	background:#888;
	cursor:pointer;
}
.button.disabled:hover{
	background:#ccc;
	cursor:default;
}
.button.highlight:hover{
	background:#FFE89E;
	cursor:pointer;
}
.button.highlight.disabled:hover{
	background: #ffdf80;
	cursor:default;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
}

.disabledLayer{
	position:absolute;
	left:0;
	top:0;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:#fff;
	opacity:0.5;
	border-radius:5px;
}


code:
html {
	background: #1e1e20;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	color: #eeeeee;
	padding: 0;
	border:0;
    margin: 0;
	overflow:hidden;
}

body{
	padding:0;
	margin:0;

	 -webkit-animation-name: fadeIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.3s;
}

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

div {
	float:left;
    padding: 0;
	border: 0;
    margin: 0;
	border-radius:5px;
}

h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

/******************************************************/
/*GENERIC FOR ALL*/

.title{
	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:22px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(100% - 16px);
}
.subTitle{
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:4px;

	box-sizing: border-box;
	width: calc(100% - 16px);
}
.subTitle-third{
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:4px;

	box-sizing: border-box;
	width: calc(33.3% - 16px);
}

.subTitle-half{
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(50% - 16px);
}
.subTitle-half.body{
	height:50px;
}

.subTitle-picture{
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:8px;
	width:calc((352px/3)*2 - 32px);
	min-height:calc(352px/3 - 32px);
}
.picture{
	position:relative;
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#19191a;

	margin:8px 8px 0 8px;
	padding:8px;
	width:calc(352px/3 - 32px);
	height:calc(352px/3 - 32px);
}
.picture.full{
	width:calc(352px - 32px);
	height:calc(352px - 32px);
	background-color:#19191a;
}

.description{
	margin:8px 8px 0 8px;
	padding:8px;
	height:106px;
	background-color:#19191a;

	box-sizing: border-box;
	width: calc(100% - 16px);
}
.description-half{
	margin:8px 8px 0 8px;
	padding:8px;
	height:66px;
	background-color:#19191a;

	box-sizing: border-box;
	width: calc(100% - 16px);
}
.description-small{
	text-align:center;
	margin:8px 8px 0 8px;
	padding:8px;
	height:46px;
	background-color:#19191a;

	box-sizing: border-box;
	width: calc(100% - 16px);
}

/******************************************************/
/*NEW*/

.container-full-width {
	position:relative;
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(100% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-full-width.inner {
	background:#222;
}
.container-half-width{
	position:relative;
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(50% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-half-width.inner {
	background:#222;
}
.container-quarter-width {
	position:relative;
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(25% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-quarter-width.inner {
	background:#222;
}
.item-image {
	background:#19191a;
	position:relative;
	float:left;
	border-radius: 5px;
	width:calc(33.3% - 16px);
	margin:1%;
	-webkit-box-sizing: border-box;
}
.item-image:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.item-image-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.titular {
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
}

.center {
	text-align:center;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}
.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin:0;
	padding:0;
	cursor:pointer;
}


code:
html {
	background: #e6e6e6;
	font-family: Calibri, Carlito, sans-serif;
	font-size:11pt;
	color: #262626;
	padding: 0;
	border:0;
    margin: 0;
	overflow:hidden;
}

body{
	padding:0;
	margin:0;

	 -webkit-animation-name: fadeIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.3s;
}

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

div {
	float:left;
    padding: 0;
	border: 0;
    margin: 0;
	border-radius:5px;
}

h1{
	font-size:2.5em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h2{
	font-size:2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h3{
	font-size:1.8em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h4{
	font-size:1.6em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h5{
	font-size:1.4em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
h6{
	font-size:1.2em;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

/******************************************************/
/*GENERIC FOR ALL*/

.title{
	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:20px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(100% - 16px);
}

.subTitle{
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(100% - 16px);
}
.subTitle-third{
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(33.3% - 16px);
}
.subTitle-third.combatValue{
	height:16px;
	margin:4px 8px 0 8px;
}
.subTitle-half{
	font-size:1.1em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;

	box-sizing: border-box;
	width: calc(50% - 16px);
}
.subTitle-half.body{
	height:40px;
}
.subTitle-half.combatValue{
	line-height:16px;
}

.subTitle-picture{
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;
	width:calc((352px/3)*2 - 32px);
	min-height:calc(352px/3 - 32px);
}
.picture{
	position:relative;
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	line-height:18px;
	background-color:#fcfcfc;

	margin:8px 8px 0 8px;
	padding:8px;
	width:calc(352px/3 - 32px);
	height:calc(352px/3 - 32px);
}
.picture.full{
	width:calc(352px - 32px);
	height:calc(352px - 32px);
	background-color:#fcfcfc;
}

.description{
	margin:8px 8px 0 8px;
	padding:8px;
	width:calc(352px - 32px);
	height:90px;
	background-color:#fcfcfc;
}
.description-half{
	margin:8px 8px 0 8px;
	padding:8px;
	width:calc(352px - 32px);
	height:50px;
	background-color:#fcfcfc;
}
.description-small{
	text-align:center;
	margin:8px 8px 0 8px;
	padding:8px;
	width:calc(352px - 32px);
	height:30px;
	background-color:#fcfcfc;
}

/******************************************************/
/*NEW*/

.container-full-width {
	position:relative;
	float:left;
	background:#fcfcfc;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(100% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-full-width.inner {
	background:#ccc;
}
.container-half-width{
	position:relative;
	float:left;
	background:#fcfcfc;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(50% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-half-width.inner {
	background:#ccc;
}
.container-quarter-width {
	position:relative;
	float:left;
	background:#fcfcfc;
	border-radius:5px;

	padding:4px;
	margin:4px 8px 4px 8px;

	width: calc(25% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-quarter-width.inner {
	background:#ccc;
}
.item-image {
	background:#fcfcfc;
	position:relative;
	float:left;
	border-radius: 5px;
	width:calc(33.3% - 16px);
	margin:1%;
	-webkit-box-sizing: border-box;
}
.item-image:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.item-image-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.titular {
	font-size:16px;
	font-weight: bold;
	text-align:center;
	line-height:18px;
}

.center {
	text-align:center;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}
.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin:0;
	padding:0;
	cursor:pointer;
}


code:
html {
	background: #1e1e20;
	font-family: Calibri, Carlito, sans-serif;
	font-size:18px; /*font-size:2vw;*/
	line-height:24px;
	color: #DDDDDD;
	margin:0;
	padding:0;
}

body{
	margin:0 auto;
	padding:0;
	float: none;

}

div {
    padding: 0;
    margin: 0;
	background-color: transparent;
}
#main-content{
	display: flex;
	-webkit-flex-flow: column;
	height: 100%;
	width:100%;
	cursor:default;
}
#header-content{
    -webkit-animation-duration: 0s;
}
#text-content{
	-webkit-animation-name: fadeIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;
}

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

.div-center{
	margin: 8px auto 8px auto;
	overflow-x:hidden;
	width:100%;
	max-width:1200px;
	padding:16px;

	display: flex;
	flex-flow: column;
	box-sizing:border-box;
	-webkit-flex: 1;
	-webkit-column-fill: auto;
}
.inner-text-content{
	margin:8px auto 8px auto;
	max-width:1200px;
}
.content-title{
	width:100%;
	max-width:1200px;
	-webkit-box-sizing: border-box;
	height:56px;
	padding:8px;
	margin:0 auto 0 auto;
	border-radius:5px;
	background:#19191a;
}

p{
	margin:0;
	padding:8px;
}

hr{
	height:2px;
	border-width:0;
	background-color:#434347;
}

list{
	margin:0 auto;
	padding:8px;
}
li{
	font-weight: bold;
	margin:0 auto;
	padding:8px;
	list-style: none;
}
li:before {
    /*content: '-';*/
}
ul{
	margin:0 auto;
	padding:2px 8px 2px 32px;
	list-style: none;
}
ul:before {
	font-weight: bold;
    content: "- ";
}

h1{
	font-size:32px;
	line-height:36px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
}
h2{
	font-size:30px;
	line-height:34px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
	max-width:800px;
}
h3{
	font-size:28px;
	line-height:32px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
}
h4{
	font-size:26px;
	line-height:30px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
}
h5{
	font-size:24px;
	line-height:28px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
}
h6{
	font-size:22px;
	line-height:26px;
	font-weight: bold;
	margin:0 auto;
	padding:8px;
}

details{
	margin:8px auto 8px auto;
	padding:8px;

	background:#19191a;
	border-radius:5px;
}
summary{
	font-weight: bold;
	text-align:center;

	margin:8px auto 8px auto;
	padding:8px;
	width: calc(100% - 16px);

	background:#333;
	border-radius:5px;
	outline:none;
}
summary:hover {
	cursor:pointer;
	background:#444;
}

td, th{
	text-align:center;
}

input {
	background:#333;
	font-family: Calibri, Carlito, sans-serif;
	font-size:18px; /*font-size:2vw;*/
	line-height:24px;
	color: #DDDDDD;
	border: 2px solid #666;
    border-radius: 4px;
}
input:focus {
	background:#444;
}

.center {
	text-align:center;
}

/***********************************************************/
/*GENERAL*/

.container-full-width {
	position:relative;
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:8px;

	width: calc(100% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-full-width.inner {
	background:#222;
}
.container-full-width.light {
	background:#292929;
}
.container-half-width{
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:8px;

	width: calc(50% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-half-width.inner {
	background:#222;
}
.container-half-width.light {
	background:#292929;
}
.container-quarter-width {
	position:relative;
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:4px;
	margin:8px;

	width: calc(25% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;
}
.container-quarter-width.inner {
	background:#222;
}

.square-button {
	display:inline-block;
	background-color: #333333;
	position:relative;
	border-radius: 5px;
	width:18%;
	margin:1%;
	border:solid 2px #444;
	width: calc(18% - 4px);
	-webkit-box-sizing: border-box;
	cursor:pointer;
}
.square-button:hover{
	background-color: #444;
	border-color:#666;
	cursor:pointer;
}
.square-button:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.square-button.selected {
	background-color: #444;
	border:solid 2px #BD0061;
	cursor:default;
}
.square-button.round {
	border-radius: 50%;
}
.square-button.small {
	width:8%;
	margin:1%;
}
.square-button.medium {
	width:10%;
	margin:1%;
}
.square-button.saveIcon {
	width:20%;
	margin:1% 6.5% 1% 6.5%;
}
.square-button.big {
	width:25%;
	margin:1% 4% 1% 4%;
}
.square-button.huge {
	width:32%;
	margin:2% 8% 2% 8%;
}
.square-button.solo {
	width:40%;
	margin:2% 30% 2% 30%;
}
.square-button.max {
	width:80%;
	margin:2% 8% 2% 8%;
}
.square-button.disabled {
	background-color: #222;
	border-color:#333;
}
.square-button.disabled:hover {
	cursor:default;
	background-color: #222;
	border-color:#333;
}
.square-button-content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.normal-button{
	display:inline-block;
	background-color: #333333;
	position:relative;
	border-radius: 5px;
	width:8.33%;
	border:solid 2px #444;
	margin: 2px 0 0 0;
	-webkit-box-sizing: border-box;
	cursor:pointer;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#555),
		color-stop(0.50, #444),
		color-stop(0.92, #333),
		to(#222));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.normal-button:hover{
	background: #666;
}
.normal-button.selected{
	background: #444;
	border:solid 2px #666;
}
.normal-button.selected:hover{
	background: #777;
}
.normal-button.disabled{
	background: #333;
	color: #444;
	cursor:default;
}
.normal-button.disabled:hover{
	background: #333;
}

.normal-button.hour{
	opacity: 0.8;
}
.normal-button.hour:hover{
	opacity: 1;
}
.normal-button.hour.selected{
	opacity: 0.8;
}
.normal-button.hour.selected:hover{
	opacity: 1;
}
.normal-button.hour.disabled{
	opacity: 0.3;
}
.normal-button.hour.disabled:hover{
	opacity: 0.4;
}

/***********************************************************/
/*PHONE*/

.quest-title{
	font-size:1.4em;
	font-weight: bold;
	text-align:center;
	line-height:30px;

	width:88vw;
	height:30px;

	margin:8px auto 8px auto;
	padding:8px;
	width: calc(100% - 16px);

	background:#333;
	border-radius:5px;
}
.quest-title:hover{
	cursor:pointer;
	background:#444;
}
.quest-title.main:hover{
	cursor:auto;
	background:#444;
}
.quest-box{
	position:relative;
	text-align:center;

	padding:4px;
	margin:8px;
	width: calc(100% - 16px);
	-webkit-user-select: none;
	box-sizing: border-box;

	background-color:#222222;
	border-radius:5px;
}

.quest-extra{
	top:8px;
	position:absolute;
	width:40%;
	height:18px;
	font-size:16px;
	line-height:12px;
}

.quest-extra.level{
	left:8px;
	text-align: left;
}

.quest-extra.experience{
	right:8px;
	text-align: right;
}

.encyclopedia-container{
	box-sizing:border-box;

	float:right;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:18px;
	line-height:22px;

	padding:1%;
	margin:1%;
	width:40%;
	-webkit-user-select: none;
}

.lvlup-container{
	margin:0 0 8px 0;
	padding:8px 0 8px 0;

	width:100%;

	background:#19191a;
	border-radius:5px;

	-webkit-user-select: none;
	cursor:default;
}
.lvlup-title{
	font-size:1.4em;
	font-weight: bold;
	text-align:center;
	line-height:20px;

	width:96%;
	height:20px;

	margin:auto;
	padding:8px;

	background:#333;
	border-radius:5px;

	-webkit-user-select: none;
	cursor:default;
}
.lvlup-box{
	position:relative;
	text-align:center;

	height:132px;
	width:96%;
	margin: 8px auto 8px auto;
	padding:8px;

	background:#222;
	border-radius:5px;
	cursor:default;
}
.lvlup-attribute{
	text-align:center;
	float:left;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	width:31%;
	margin:1%;
	padding:0 0 8px 0;
}
.lvlup-attribute-innerContainer{
	margin:0;

	border-radius:5px;
	padding:8px;

	-webkit-user-select: none;
	cursor:default;
}
.lvlup-button{
	margin:0;
	padding:0;
	width:24px;
	height:24px;
	text-align:center;
	line-height:24px;
	cursor:pointer;

	background-color: #333;
	border-radius:5px;

	-webkit-user-select: none;
}
.lvlup-button.disabled{
	color: #444;
	cursor:default;
}
.lvlup-button:hover{
	background-color: #666;
}
.lvlup-button.disabled:hover{
	background-color: #333;
}

.perkTable{
	border-collapse: separate;
	border-spacing: 8px;
}
.perkCell{
	position:relative;
	width:32px;
	height:32px;
	margin:0;
	padding:0;

	border-radius:5px;
}
.perkCell.owned{
	background-color:#222;
}
.perkCell.owned:hover{
	cursor:pointer;
	background-color:#333;
}
.perkCell.unlocked{
	background-color:#222;
}
.perkCell.unlocked:hover{
	cursor:pointer;
	background-color:#333;
}
.perkCell.locked{
	background-color:#222;
}
.perkCell.locked:hover{
	cursor:pointer;
	background-color:#333;
}
.arrowCell{
position:relative;
	width:32px;
	height:16px;
	margin:0;
	padding:0;

	background-color:transparent;
	border-radius:5px;
}

/***********************************************************/
/*COSMETICS*/

.cosmetics-container{
	float:left;
	background:#19191a;
	border-radius:5px;

	padding:0px;
	margin:0px 0px 1% 0px;

	width:100%;
	-webkit-user-select: none;
}
.cosmetics-inner-container{
	float:left;
	background:#19191a;
	border-radius:5px;
	text-align:center;

	padding:1%;
	margin:1%;
	width:46%;
	-webkit-user-select: none;
}
.cosmetics-inner-container.left{
	width:36%;
}
.cosmetics-inner-container.right{
	float:right;
	width:56%;
}
.cosmetics-inner-container.full{
	width:96%;
}
.cosmetics-button {
	display:inline-block;

    white-space: nowrap;

	text-align:center;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 16px;

	border-radius: 5px;
	min-width:100px;
	/*width:18%;*/
	margin:4px;
	padding:4px;
	border:1px;
	border-style:solid;
	border-color:#333;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#555),
		color-stop(0.50, #444),
		color-stop(0.92, #333),
		to(#222));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.cosmetics-button:hover{
	background:#555555;
	cursor:pointer;
}
.cosmetics-button.active{
	border:1px;
	border-style:solid;
	border-color:#999;
}
.cosmetics-button.disabled{
	background:#222;
}
.cosmetics-button.disabled:hover{
	background:#222;
	cursor:default;
}

/***********************************************************/
/*FETISHES*/

.fetish-container{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 8px 4px 8px;
	padding:8px;
	width:92vw;
	max-width:768px;
	-webkit-user-select: none;
}
.fetish-container-half{
	box-sizing:border-box;

	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	padding:1%;
	margin:1%;
	width:48%;
	max-width:400px;
	-webkit-user-select: none;
}
.fetish-icon {
	display:inline-block;
	background-color: #333333;
	position:relative;
	float:left;
	border-radius: 5px;
	width:8%;
	margin:1%;
	-webkit-box-sizing: border-box;
}
.fetish-icon.double{
	width:16%;
	margin:2%;
}
.fetish-icon.full{
	width:96%;
	margin:2%;
}
.fetish-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.fetish-icon-content {
  position: absolute;
  width: 100%;
  height: 100%;
}
.fetish-icon.owned{
	background-color:#222;
}
.fetish-icon.owned:hover{
	cursor:pointer;
	background-color:#333;
}
.fetish-icon.unlocked{
	background-color:#222;
}
.fetish-icon.unlocked:hover{
	cursor:pointer;
	background-color:#333;
}
.fetish-icon.locked{
	background-color:#222;
}
.fetish-icon.locked:hover{
	cursor:pointer;
	background-color:#333;
}

/***********************************************************/
/*COMBAT*/
.combat-header-info{
	width:100%;
	border-radius:5px;
	margin: 0;
	padding:0;
	background-color:#252527;
	min-height:180px;
	border-radius:5px;
	overflow: auto;
	height: auto;
}
.combat-display{
	font-size:18px;
	line-height:24px;
	width:28%;
	margin:1%;
	padding:0;
	background-color:#333;
	border-radius:5px;
}
.combat-display.left{
	float:left;
}
.combat-display.right{
	float:right;
}
.combat-description{
	width:36%;
	margin:1%;
	padding:1%;
	float:left;
	border-radius:5px;
}
.combat-container{
	position:relative;
	float:left;
	width:96%;
	padding:0;
	margin:0;
}
.combat-container.name{
	width:100%;
}
.combat-container.attribute{
	width:25%;
}

.combat-inner-container{
	display:inline-block;
	background-color:#19191a;
	border-radius: 5px;
	width:94%;
	margin:2%;
	padding:1%;
	-webkit-user-select: none;
	cursor:default;
}
.combat-inner-container.status-effects{
	min-height: 34px;
	text-align: center;
}

.combatant-title{
	text-align: center;
	margin:0;
	padding:0;
	max-width: 100%;
	-webkit-user-select: none;
	cursor:default;
}
.combatant-title.name{
	font-size:1.4em;
}
.combatant-title.level{
	font-size:1em;
}

.combat-resource{
	position:relative;
	float:left;
	border-spacing:0;
    width:96%;
	margin:2%;
	padding:0;
}
.combat-resource-icon {
	float:left;
	width:20px;
	height:20px;
	background:#333;
	border-radius: 5px;
}
.combat-resource-bar{
	float:left;
	width:calc(100% - 50px);
	height:10px;
	margin:5px;
	background:#222222;
	border-radius: 2px;
}
.combat-resource-number{
	float:left;
	width:20px;
	height:20px;
	border-radius: 5px;
	text-align:center;
}

.combat-status-effect {
	position:relative;
	float:left;
	width:30px;
	height:30px;
	padding:0;
	margin:2px;
	border-radius: 5px;
	background-color: #333333;
}
.combat-status-effect.negativeCombat {
	width:26px;
	height:26px;
	border:2px;
	border-style: solid;
	border-color: #FF4D4D;
}
.combat-status-effect.positiveCombat {
	width:26px;
	height:26px;
	border:2px;
	border-style: solid;
	border-color: #85C6FF;
}
.basic-image{
	float:left;
	width:20px;
	height:20px;
	padding:0;
}
.basic-image.bordered{
	float:left;
	width:18px;
	height:18px;
	padding:0;
}

/***********************************************************/
/*INVENTORY VIEW*/

.inventory-container {
	float:left;
	position:relative;
	display: inline-block;
	width:49.5%;
	background-color:#19191a;
	padding:8px;
	margin: 0;
	border-radius: 5px;
	box-sizing: border-box;
}
.inventory-container.left{
	margin-right:0.5%;
}
.inventory-container.right{
	margin-left:0.5%;
}
.inventory-container.full{
	width:98%;
	margin:0 1%;
}
/*This is for aspect ratio*/
.inventory-container:after {
	padding-top: 40%;
	display: block;
	content: '';
}

.inventory-equipped {
	position: relative;
	float:left;
	background-color:#19191a;
	border-radius: 5px;
	text-align:center;
	width:60%;
	-webkit-user-select: none;
}
.inventory-item-slot {
	display:inline-block;
	background-color: #333333;
	position:relative;
	float:left;
	border-radius: 5px;
	width:14.66%;
	margin:1%;
	-webkit-box-sizing: border-box;
}
.inventory-item-slot :hover {
	opacity:1;
}
.inventory-item-slot.piercing{
	width:23%;
	margin:1%;
}
.inventory-item-slot.weapon{
	width:46%;
	margin:2%;
}
.inventory-item-slot.unequipped{
	width:11.5%;
	margin:0.5%;
}
.inventory-item-slot:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.inventory-item-slot.disabled{
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
}
.inventory-icon-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.inventory-accessories {
	position: relative;
	float:left;
	background-color:#19191a;
	border-radius: 5px;
	text-align:center;
	width:50%;
	padding-left:8px;
	-webkit-user-select: none;
	box-sizing: border-box;
}
.inventory-not-equipped {
	position: relative;
	float:left;
	background-color:#19191a;
	border-radius: 5px;
	text-align:center;
	width:100%;
	padding:4px 0 0 0;
	margin:4px 0 0 0;
	-webkit-user-select: none;
	box-sizing: border-box;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}
.item-count{
	font-size:14px;
	line-height:14px;
	position:absolute;
	text-align: right;
	right:2px;
	top:0;
	pointer-events: none;
	text-shadow: 2px 0 0 #19191a, -2px 0 0 #19191a, 0 2px 0 #19191a, 0 -2px 0 #19191a, 1px 1px #19191a, -1px -1px 0 #19191a, 1px -1px 0 #19191a, -1px 1px 0 #19191a;
}
.item-price{
	font-size:14px;
	line-height:14px;
	position:absolute;
	text-align: right;
	right:2px;
	bottom:0;
	pointer-events: none;
	text-shadow: 2px 0 0 #19191a, -2px 0 0 #19191a, 0 2px 0 #19191a, 0 -2px 0 #19191a, 1px 1px #19191a, -1px -1px 0 #19191a, 1px -1px 0 #19191a, -1px 1px 0 #19191a;
}

/***********************************************************/
/*INDIVIDUAL ITEM VIEW*/
.inventoryImage {
	position:relative;
	float:right;
	background-color: #4b4b4e;
	border-radius: 5px;
	margin:4px 4px 0 0;
	width: calc(25% - 4px);
}
.inventoryImage:after{
	content: "";
	display: block;
	padding-bottom: 100%;
}
.inventoryImage:hover{
	cursor:default;
}
.inventoryImage-content {
	position: absolute;
	width: 100%;
	height: 100%;
}

/***********************************************************/
/*PHONE VIEW*/
.subTitle{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 1%;
	padding:8px;
	width:98%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
/*EXTRA ATTRIBUTE SPECIFIC*/
.extraAttribute-third{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 1%;
	padding:8px;
	width:31.3%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.extraAttribute-third.type{
	width:38%;
}
.extraAttribute-third.damage{
	width:28%;
}
.extraAttribute-third.resist{
	width:28%;
}
.extraAttribute-two-thirds{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 1%;
	padding:8px;
	width:64.6%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.extraAttribute-quarter{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:18px;
	font-weight: bold;
	text-align:center;
	line-height:22px;

	margin:4px 1%;
	padding:8px;
	width:23%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.extraAttribute-half{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 1%;
	padding:8px;
	width:48%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.extraAttribute-half.doubleHeight{
	min-height:48px;
}
.extraAttribute-half.bonus{
}
.extraAttribute-sixth{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:4px 1%;
	padding:8px;
	width:14.66%;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
/*ITEM VIEW SPECIFIC*/
.phone-item-colour {
	position:relative;
	float:left;
	width:20px;
	height:20px;
	padding:0;
	margin:2px;
	border-radius: 5px;
	background-color: #333333;
	-webkit-user-select: none;
}

/***********************************************************/
/*KEY BINDINGS*/

.bindingButton{
	float:left;
	border-radius: 5px;
	background-color: #333333;
	min-width:140px;
	cursor:pointer;
}
.bindingButton:hover{
	background-color:#555;
}
.bindingButton.active{
	background-color: #335933;
	cursor:default;
}
.bindingButton.active:hover{
	background-color:#335933;
}

.bindingClearButton{
	float:left;
	border-radius: 5px;
	width:20px;
	height:20px;
	background-color:#4a1c1c;
	text-align:center;
	cursor:pointer;
}
.bindingClearButton:hover{
	background-color:#813131;
}
.bindingClearButton.empty{
	color:#666;
	background-color:#3d2929;
	cursor:default;
}
.bindingClearButton.empty:hover{
	background-color:#3d2929;
}

/***********************************************************/
/*GENDER PREFERENCES*/

.preference-button{
	margin:0;
	padding:0;
	width:80px;
	height:24px;
	text-align:center;
	line-height:24px;
	cursor:pointer;

	float:left;
	margin-right:8px;
	background-color: #333;
	border-radius:5px;

	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.preference-button:hover{
	background-color: #666;
}
.preference-button.selected{
	background-color: #444;
	border:2px solid;
	border-color: #BD0061;
}
.preference-button.selected:hover{
	background-color: #777;
	border:2px solid;
	border-color: #BD0061;
}
.preference-button.disabled{
	color: #444;
	cursor:default;
}
.preference-button.disabled:hover{
	background-color: #333;
}

/***********************************************************/
/*SAVE/LOAD*/

.saveLoadButton{
	float:left;
	border-radius: 5px;
	background-color: #333;
	min-width:100px;
	cursor:pointer;
}
.saveLoadButton:hover{
	background-color:#444;
}
.saveLoadButton.disabled{
	background-color: #222;
	color:#777;
}
.saveLoadButton.disabled:hover{
	background-color:#222;
	cursor:default;
}
.deleteSaveButton{
	float:left;
	border-radius: 5px;
	background-color: #4A2121;
	min-width:100px;
	cursor:pointer;
}
.deleteSaveButton:hover{
	background-color:#8A3D3D;
}

/***********************************************************/
/*CRAFTING*/

.enchant-button-add{
	font-size:3vw;
	line-height:3vw;
	margin:8px auto 0 auto;
	padding: 4px 0 4px 0;
	width:90%;
	border-radius:5px;
	text-align:center;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#555),
		color-stop(0.50, #444),
		color-stop(0.92, #333),
		to(#222));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.enchant-button-add:hover{
	background:#555555;
	cursor:pointer;
}
.enchant-button-add.disabled{
	background: #333;
	color:#777;
}
.enchant-button-add.disabled:hover{
	background: #333;
	color:#777;
	cursor:default;
}

.enchanting-text{
	font-size:3vw;
	line-height:3vw;
	margin:0;
	padding:0;
}

.essence-inline{
	background-color: #333333;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:3vw;
	height:3vw;
	padding:0;
	margin:0;
	vertical-align: middle;
}
@media screen and (min-width: 800px) {
	.essence-inline {
		width:24px;
		height:24px;
	}
}
@media screen and (min-width: 666px) {
	.enchanting-text{
		font-size:20px;
		line-height:20px;
	}
	.enchant-button-add{
		font-size:20px;
		line-height:20px;
	}
}

.enchanting-essence-title{
	text-align: center;
	display:block;
	margin:0 auto;
	padding:8px 0 8px 0;

	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	width:100%;
}
.enchanting-essence-main{
	margin:0 auto;
	padding:8px 0 8px 0;

	background-color: transparent;
	border-radius:5px;

	width:100%;

	display: -ms-flex; display: -webkit-flex; display: flex;
}
.enchanting-essence-main>.enchanting-essence-inner-left>.enchanting-essence-inner-right { flex:1; }
.enchanting-essence-inner-left{
	float:left;
	margin:0 auto;
	padding:8px 0 8px 0;

	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	width:20%;
}
.enchanting-essence-inner-right{
	float:left;
	margin:0 auto;
	padding:8px 0 8px 0;

	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	width:80%;
}
.enchanting-ingredient {
	display:inline-block;
	background-color: #333333;
	position:relative;
	border-radius: 5px;
	width:90%;
	margin:0 5% 0 5%;
	-webkit-box-sizing: border-box;
}
.enchanting-ingredient:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.enchanting-ingredient-content {
	position: absolute;
	width: 100%;
	height: 100%;
}
.enchanting-ingredient-count {
	width:18px;
	position:absolute;
	text-align: right;
	right:8px;
	top:0;
	pointer-events: none;
	text-shadow: 2px 0 0 #19191a, -2px 0 0 #19191a, 0 2px 0 #19191a, 0 -2px 0 #19191a, 1px 1px #19191a, -1px -1px 0 #19191a, 1px -1px 0 #19191a, -1px 1px 0 #19191a;
}
.enchanting-modifier {
	display:inline-block;
	background-color: #333333;
	position:relative;
	border-radius: 5px;
	width:40%;
	margin:8px 5% 0 5%;
	-webkit-box-sizing: border-box;
}
.enchanting-modifier:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.enchanting-modifier-content {
  position: absolute;
  width: 100%;
  height: 100%;
}
/*Right panel:*/
.modifier-container{
	float:left;
	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	font-size:20px;
	font-weight: bold;
	text-align:center;
	line-height:24px;

	margin:0;
	padding:8px;
	width:100%;
	max-width:768px;
	-webkit-user-select: none;
	-webkit-box-sizing: border-box;
}
.modifier-icon {
	display:inline-block;
	background-color: #333333;
	position:relative;
	float:left;
	border-radius: 5px;
	width:9%;
	margin:0.5%;
	-webkit-box-sizing: border-box;
}
.modifier-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.modifier-icon-content {
  position: absolute;
  width: 100%;
  height: 100%;
	border-radius: 5px;
}
.enchanting-essence-effect {
	text-align: center;
	display:block;
	margin:0 auto;
	padding:8px 0 8px 0;

	background-color: transparent;
	background:#19191a;
	border-radius:5px;

	width:100%;
}
.empty {
	background-color:#242424;
}
.transparent {
	background-color:transparent;
}

/***********************************************************/
/*SLAVE MANAGEMENT*/

.SM-title {
	float:left;
	padding:0;
	margin: 0;
}
.SM-title-container {
	position:relative;
	display: inline-block;
	float:left;
	margin: 0 0 4px 0;
	width:100%;
}

.SM-container {
	position:relative;
	display: inline-block;
	float:left;
	width:100%;
	background-color:#333333;
	padding:8px;
	margin: 4px 0 4px 0;
	border-radius: 5px;
	box-sizing: border-box;
}
.SM-inner-container {
	position:relative;
	display: inline-block;
	float:left;
	width:100%;
	background-color:#222;
	padding:8px;
	margin: 4px 0 4px 0;
	border-radius: 5px;
	box-sizing: border-box;
}
.SM-stats-box {
	position:relative;
	display: inline-block;
	float:left;
	width:18%;
	background-color:#19191a;
	padding:4px;
	margin: 0 1% 0 1%;
	border-radius: 5px;
	box-sizing: border-box;
}
.SM-button {
	position:relative;
	display: inline-block;
	float:left;
	padding:4px;
	margin: 0 1% 0 1%;
	width:18%;
	border-radius:5px;
	text-align:center;
	box-sizing: border-box;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#555),
		color-stop(0.50, #444),
		color-stop(0.92, #333),
		to(#292929));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.7),
		0px 1px 0px rgba(000,000,000,0.4);
}
.SM-button:hover{
	background:#555555;
	cursor:pointer;
}
.SM-button.disabled{
	color:#777;
}
.SM-button.disabled:hover{
	color:#777;
	cursor:default;
}

/***********************************************************/
/*OTHER*/

.special-text{
	font-weight:normal;
    color: #F5A8FF;
    text-shadow: 2px 2px 5px #8d3193;

	/*HALLOWEEN
	color: #FF9970;
    text-shadow: 2px 2px 5px #CC3A00;*/
}

.option-disabled{
	color: #777777;
}

.characterInfoPanel{
	float:right;
	min-width:150px;
	width:20vw;
    max-width:200px;
    height:328px;
    background-color: #333333;
    border-radius: 5px;
    margin:0 8px 8px 8px;
    padding:8px;
	font-size:16px;
	line-height:22px;
}

.speech{
    /*display:block;
    margin:16px 0 16px 0;*/
}
.speech:before {
    content: '"';
}
.speech:after {
    content: '"';
}

.thoughts{
   font-style: italic;
}
.thoughts.masculine {
	color:#00c1ff;
}
.thoughts.feminine {
	color:#ffc1ff;
}
.thoughts.androgynous {
	color:#c6c1ff;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin:0;
	padding:0;
	cursor:pointer;
}
.overlay.dark{
	border-radius:5px;
	background-color:#000;
	opacity:0.40;
}
.overlay.disabled{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
	opacity:0.60;
}
.overlay.disabled-dark{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #1a1a1a,
	  #1a1a1a 10px,
	  #000 10px,
	  #000 20px
	);
	opacity:0.80;
}
.overlay.disabled:hover{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
	opacity:0.60;
}
.overlay.disabled-dark:hover{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #1a1a1a,
	  #1a1a1a 10px,
	  #000 10px,
	  #000 20px
	);
	opacity:0.80;
}
.overlay.no-pointer{
	cursor:default;
}
.overlay.no-highlight:hover{
	background:transparent;
	opacity:1;
}
.overlay:hover{
	background-color:#fff;
	opacity:0.20;
	border-radius:5px;
}

.title-button{
	position:absolute;
	left:4px;
	top:4px;
	width:20px;
	height:20px;
	border-radius:5px;
	background:#292929;
	cursor:pointer;
}
.title-button.no-select{
	cursor:default;
}
.title-button.no-select:hover{
	background:#292929;
}
.title-button.no-select:active {
	background:#292929;
}
.title-button:hover{
	background:#333;
}
.title-button:active {
	background:#8fefbf;
}

@-webkit-keyframes demo {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	25% {-webkit-transform: scale(1, 1);}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
#bottom-text{
	position:absolute;
	bottom:120px;
	margin:0 auto 16px auto;
	width:400px;
	left:0;
	right:0;
	text-align:center;
	font-size:24px;
	opacity: 0.0;
	text-shadow: 2px 0 0 #19191a, -2px 0 0 #19191a, 0 2px 0 #19191a, 0 -2px 0 #19191a, 1px 1px #19191a, -1px -1px 0 #19191a, 1px -1px 0 #19191a, -1px 1px 0 #19191a;
	pointer-events: none;
}
.demo {
	-webkit-animation: demo 2s ease-out;
    -webkit-animation-iteration-count: 2;
}

/***********************************************************/
/*INVENTORY*/

/* Made for 9:16 ratio
   Height = 1.7777 * width
 */

/*LEFT PANEL*/
.equipped{
	position: relative;
	float:left;
	background-color:#19191a;
	border-radius: 10px;
	text-align:center;
	padding: 2vw;
	margin:0;
	height:96vw;
	width:58vw;
	-webkit-user-select: none;
}
.display{
	position: relative;
	margin:0;
	background-color:#19191a;
	border-radius: 5px;
	text-align:center;
	width:58vw;
	height:19.2vw;
	padding:0;
	-webkit-user-select: none;
}
.equipSlot {
	position:relative;
	padding:0;
	margin:0.6vw;
	position:relative;
	border-radius: 5px;
    background-color:#333;
    color:white;
	float:left;
    width: 18vw;
	height: 18vw;
	-webkit-user-select: none;
}

/*RIGHT PANEL*/
.accessories{
	float:right;
	background-color:#19191a;
	border-radius: 10px;
	text-align:center;
	padding: 2vw;
	margin:0;
	width:32vw;
	/*height:164vw;*/
	height:96vw;
	-webkit-user-select: none;
}
.display.weapons{
    width:32vw;
	height:16vw;
	-webkit-user-select: none;
}
.display.piercings{
	width:32vw;
	height:58vw;
	-webkit-user-select: none;
}
.display.extra{
	width:32vw;
	height:14vw;
	-webkit-user-select: none;
}
.weapon-spacer{
	height:4vw;
	-webkit-user-select: none;
}
.equipSlot.weapon {
	margin:1vw;
	width:14vw;
	height:14vw;
	-webkit-user-select: none;
}
.equipSlot.small {
	margin:1vw 2vw 1vw 2vw;
	width:12vw;
	height:12vw;
	-webkit-user-select: none;
}

.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	cursor:pointer;
}
.overlay.disabled{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
	opacity:0.60;
	cursor:default;
}
.overlay.disabled:hover{
	border-radius:5px;
	background: repeating-linear-gradient(
	  135deg,
	  #333,
	  #333 10px,
	  #222 10px,
	  #222 20px
	);
	opacity:0.60;
}

/*INVENTORY BOX*/
.inventoryWrapper{
	position: relative;
	float:left;
	background-color:#19191a;
	border-radius: 10px;
	text-align:center;
	margin: 2vw 6vw 0 6vw ;
	padding: 2vw;
	/*height:164vw;*/
	height:56vw;
	width:84vw;
	/*width:145px;
	height:275px;*/
	-webkit-user-select: none;
}

.display.inventory{
	background-color:#19191a;
	border-radius: 5px;
	text-align:center;
	/*height:74vw;*/
	height:56vw;
    width:84vw;
	/*overflow-y:scroll;*/
	-webkit-user-select: none;
}
.invSlot {
	padding:0;
	margin:1vw;
	position:relative;
	width:12vw;
	height:12vw;
	border-radius: 5px;
    background-color:#101010;
    color:white;
	float:left;
	-webkit-user-select: none;
}
.invSlot:hover{
	background-color:#566070;
	cursor:pointer;
	-webkit-user-select: none;
}

#encumbered{
    color:red;
	-webkit-user-select: none;
}

.femininityIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.cummedIcon{
	position:absolute;
	width:40%;
	height:40%;
	right:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.displacedIcon{
	position:absolute;
	width:40%;
	height:40%;
	left:0;
	bottom:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.jinxedIcon{
	position:absolute;
	width:40%;
	height:40%;
	left:0;
	pointer-events: none;
	-webkit-user-select: none;
}
.raceBlockIcon{
	position:absolute;
	width:60%;
	height:60%;
	margin:20%;
	pointer-events: none;
	-webkit-user-select: none;
}
.watchHand{
	width:100%;
	height:100%;
	-webkit-user-select: none;
}

.iconImage{
	pointer-events: none;
	-webkit-user-select: none;
}

/******************** RESPONSES ********************/

.response-full-container{
	background-color:#19191a;
	padding:0;
	margin:0 auto 0 auto;
	border-radius: 5px;
	width:100%;
	max-width:1200px;
	overflow:hidden;
	-webkit-user-select: none;
}
.response-switcher{
	position:relative;
	float:left;
	width:3%;
	height:94px;
	padding:0;
	border-radius: 5px;
	background-color: #333333;
	text-align: center;
	line-height:94px;
	-webkit-user-select: none;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#666),
		color-stop(0.50, #555),
		color-stop(0.92, #444),
		to(#333));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.4),
		0px 1px 0px rgba(000,000,000,0.1);
}
.response-switcher.left{
	margin:4px 0 4px 1%;
	-webkit-user-select: none;
}
.response-switcher.right{
	margin:4px 1% 4px 0;
	-webkit-user-select: none;
}
.response-switcher.disabled{
	cursor: default;
	background: #222222;
	color: #444;
	-webkit-user-select: none;
}
.response-switcher:hover{
	cursor: pointer;
    background: #444;
	-webkit-user-select: none;
}
.response-switcher.disabled:hover{
	cursor: default;
	background-color: #222222;
	-webkit-user-select: none;
}
.response-container{
	display:inline-block;
	float:left;
	background-color:#19191a;/*1e1e20*/
	padding:4px 0.5% 0 0.5%;
	margin:0;
	border-radius: 5px;
	width:92%;
	overflow:hidden;
	-webkit-user-select: none;
	white-space: nowrap;
	box-sizing:border-box;
}
.response-container.tabs{
	background-color:transparent;
	width:100%;
}
.hotkey-icon{
	position:absolute;
	width:50%;
	height:18px;
	font-size:10px;
	line-height:12px;
	right:2px;
	top:1px;
	pointer-events: none;
	-webkit-user-select: none;
	text-align: right;
	color: #777777;
}
.hotkey-icon.disabled{
	color: #444;
	-webkit-user-select: none;
}
.response-box {
	position:relative;
	float:left;
	width:19%;
	height:28px;
	padding:0;
	margin:0 0.5% 4px 0.5%;
	border-radius: 5px;
	background-color: #333333;
	text-align: center;
	-webkit-user-select: none;
	box-sizing:border-box;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#444),
		color-stop(0.50, #373737),
		color-stop(0.92, #333),
		to(#2a2a2a));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.4),
		0px 1px 0px rgba(000,000,000,0.1);
}
.response-box:hover{
	cursor: pointer;
    background: #444444;
}
.response-box.tab{
	border-radius: 5px 5px 0 0;
	margin:0 0.5% 0 0.5%;
	height:22px;
}
.response-box.disabled{
	cursor: default;
	-webkit-user-select: none;
	background: #222;
}
.response-box.selected{
	box-sizing:border-box;
	border-style: solid;
	border-width: 1px;
	border-color:#999;
}
.response-box.disabled.selected{
	box-sizing:border-box;
	border-style: solid;
	border-width: 1px;
	border-color:#555;
}

.response-tab {
	position:relative;
	float:left;
	width:19%;
	height:22px;
	padding:0;
	margin:0 0.5% 0 0.5%;
	border-radius: 5px 5px 0 0;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-color:#19191a;
	background-color: #333333;
	text-align: center;
	-webkit-user-select: none;
	box-sizing:border-box;

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#333),
		color-stop(0.50, #272727),
		color-stop(0.92, #19191a),
		to(#19191a));
	text-shadow:
		1px 1px 2px rgba(000,000,000,0.4),
		0px 1px 0px rgba(000,000,000,0.1);
}
.response-tab:hover{
	cursor: pointer;
    background:  -webkit-gradient(
		linear, left top, left bottom,
		from(#444),
		color-stop(0.50, #373737),
		color-stop(0.92, #333),
		to(#2a2a2a));
	border-radius: 5px 5px 0 0;
}
.response-tab.selected{
	background: -webkit-gradient(
			linear, left top, left bottom,
			from(#444),
			color-stop(0.50, #373737),
			color-stop(0.92, #333),
			to(#2a2a2a));

	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-color:#333;
}

.response-text{
	padding: 4px 4px 4px 4px;
	margin:0;
	font-size:1em;
	line-height:24px;
	-webkit-user-select: none;
}
.response-text.selected{
	line-height:20px;
}

.response-icon-leftTop{
	position:absolute;
	height:11px;
	width:11px;
	bottom:2px;
	left:2px;
}
.response-icon-leftBottom{
	position:absolute;
	height:11px;
	width:11px;
	top:2px;
	left:2px;
}
.response-icon-rightBottom{
	position:absolute;
	height:11px;
	width:11px;
	bottom:2px;
	right:2px;
}

.option-disabled{
	color: #777777;
	-webkit-user-select: none;
}

.item-inline{
	background-color: transparent;
	position:relative;
	display:inline-block;
	border-radius: 5px;
	width:20px;
	height:20px;
	padding:0;
	margin:0 0 2px 0;
	vertical-align: middle;
}

/******************** MAP ********************/

.map-icon {
	display:inline-block;
	position:relative;
	float:left;
	border-radius: 5px;
	width:9%;
	margin:0.5%;
	-webkit-box-sizing: border-box;
}
.map-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.map-icon-content {
  position: absolute;
  width: 100%;
  height: 100%;
	-webkit-box-sizing: border-box;
}
.map-icon.dangerous{
	background: repeating-linear-gradient(
		  135deg,
		  #333,
		  #333 5px,
		  #444 5px,
		  #444 10px
		);
}
.overlay.map-player {
	border-radius:5px;
    opacity: 0;
    background-color:yellow;
    -webkit-animation-name: flashColour;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
}

.npc-icon{
	position:absolute;
	height:33%;
	width:33%;
	top:2px;
	left:2px;
}
.npc-home-icon{
	position:absolute;
	height:33%;
	width:33%;
	bottom:2px;
	left:2px;
}

@-webkit-keyframes flashColour {
    0%   {opacity:0.4;}
    50%  {opacity:0.95;}
    100% {opacity:0.4;}
}