@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

a {
	color: #175992;
}
a:hover {
	text-decoration: none;
	color: #003060;
}
html {
    transform-origin: left top;
    height: 100%;
    overflow-y: scroll;
}
body {
	padding-top: 50px;
	min-width: 510px;
    background-image: url(../img/background.png);
    background-size: 200px;
}
textarea {
	resize: vertical;
}
.page-part {
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    background-color: rgba(255,255,255, 0.7);
}
.main-page,
.prev-page {
	min-width: 480px;
	padding: 15px;
}
.ap {
	padding-left: 10px;
}
.navigation{
	padding: 0 15px;
	margin-bottom: 10px;
}
.navigation > div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.left-column {
	margin-right: 5%;
	padding: 0;
}
@media (max-width: 767px)
{
	.left-column {
		margin-right:0px;
		margin-bottom: 30px;
	}
	.navigation > * {
		width: 50%;
		float: left;
	}
	.main-page,
	.prev-page {
		clear: both;
	}
	.page-options a {
	    float: left;
	}
}
.navigation a {
	color: inherit;
}
.navigation .ap {
	padding-left: 20px;
}
.navigation .hp-bar {
	margin-left: 20px;
}
.prev-page {
	margin-bottom: 20px;
	display: none;
}
.prev-page button {
	margin-top: -16px;
    margin-right: -13px;
}
.page-options {
	float: right;
	margin-bottom: 10px;
}
.page-options img {
	width: 20px;
	opacity: 0.4;
}
.page-options .active img {
	opacity: 1;
}
.footer {
	padding: 40px 0px;
	background-color: #222;
    margin-top: 100px;
	color: #FFF;
}
.footer > .container > a{
	color: #FFF;
	margin-right: 10px;
}
.footer .dropdown-menu {
	bottom: 0;
	margin-left: 3px;
	margin-bottom: -12px;
	display:block;
}
.footer .dropup:not(:hover) *{
	background: none;
	border: none;
	box-shadow: none;
}
.footer .dropup li {
	display: none;
}
.footer .dropup:hover li {
	color: #333;
	display: list-item;
}
.footer .dropup .active {
	display: list-item;
}
.footer .dropup a {
    padding-left: 5px;
}
.footer .dropup img {
    height: 20px;
    margin-right: 5px;
    margin-bottom: 2px;
}
a.main{
	font-weight:bold;
}
.nav-tabs {
	border-color: #ccc;
}
.nav-tabs > li.active > a{
	background-color: rgba(255,255,255,0.6);
}
.nav-item,
a.sub{
	padding-left:10px;
}
a.important{
	color: #ea0000;
}
.character {
	height: 105px;
	padding: 10px;
	margin: 15px 0;
	border-color: black;
	border-style: solid;
    border-width: 2px;
	border-radius: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.town-option:hover,
.character:hover {
    background-color: rgba(243, 108, 108, 0.47);
}
.character.new {
	font-size: 70px;
	text-align: center;
	padding: 0px;
}
.mana-bar,
.exp-bar,
.hp-bar {
	border-radius: 3px;
    border: #555555 solid 1px;
	text-align: center;
	margin-bottom: 5px;
}
.skill-overview .exp-bar {
	width: 200px;
}
.mana-bar > div,
.exp-bar  > div,
.hp-bar > div {
	height: 20px;
	margin-bottom: -20px;
	background-color: #c30000;
	border-radius: 2px;
}
.mana-bar > div {
    background: linear-gradient(-70deg, #758dfb, #5252cc);
}
.exp-bar > div {
    background: linear-gradient(-70deg, #ffee00, #ffcc00);
}
.hp-bar > div {
    background: linear-gradient(-70deg, #ff2f00, #c30000);
}
.mana-bar > span {
	opacity: 0.99;
}
.mana-bar.show-new > #mana-base {
	animation: blink 1s;
	animation-iteration-count: infinite;
}
.exp-bar > span {
	position: relative;
}
.skill-overview,
.skill-overview > a{
	color: #333;
}
.skill-overview {
    background-color: rgba(255, 255, 255, 0.52);
    border: black 1px solid;
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
}
.skill-overview.missing {
    color: gray;
    border: gray 1px dashed;
}
.skill-overview .headline {
	font-weight: bold;
	display: inline;
}
.skill-overview .desc {
	display: none;
}
.skill-overview:hover .desc {
	display: block;
}
.skill-overview span {
	white-space: nowrap;
	padding: 0 1px;
    border-radius: 5px;
    background: rgba(0,0,0,0.1);
    border: rgba(0,0,0,0.4) 1px solid;
}
.skill-overview span.mana {
    background: rgba(0,0,200,0.1);
    border: rgba(0,0,200,0.4) 1px solid;
}
.skill-overview.inactive {
	color: #808080;
	border-color: #808080;
}
.skill-overview.inactive .status {
	background-color: #b3b3b3;
}
.skill-overview.can-learn .status.learn {
	display: none;
}
.skill-overview.can-learn:hover .status.learn {
	display: inline;
}
.skill-overview.can-learn:hover .status.available {
	display: none;
}
.skill-overview.learned .status {
	background-color: #008000;
}
.skill-overview .skill-option {
	float: right;
}

.skill-tree-table {
	width: 100%;
}
.skill-tree-lvl td{
	vertical-align: top;
}
.skill-tree-lvl td:not(:first-child){
	width: 45%;
}
.skill-tree-lvl .status {
	float: right;
}

.alert:last-child {
    margin-bottom: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(249, 249, 249, 0.55);
}
tr .css-tooltip
{
	display:none;
	position:absolute;
	z-index: 10;
}
tr:hover .css-tooltip
{
	display:block;
}
.table-item {
	width: 100%;
}
table.merchant > tbody > tr > td{
	vertical-align: middle;
}
table.smith th:first-child {
	width: 80%;
}
.gold {
	width: 20px;
	margin: -4px 0;
}

.battle-background {
	position: relative;
	float: left;
	margin-right: 20px;
	margin-bottom: 30px;
	max-width: 449px;
	max-height: 500px;
	overflow: auto;
}
.battle-background .additional-layer {
	position: absolute;
	top: 0;
	left: 0;
}
.battle-background .battle-pic {
	position: absolute;
}
.battle-background .battle-pic.target img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}
.battle-background .battle-pic .hp-bar-small{
    border-bottom: rgba(0, 255, 0, 0.78) solid 3px;
    margin-bottom: -3px;
    position: absolute;
}
.battle-background .battle-pic.ally .hp-bar-small{
    border-color: rgba(0, 255, 0, 0.78);
}
.battle-background .battle-pic.enemy .hp-bar-small{
    border-color: rgba(255, 0, 0, 0.78);
}
.battle-background #grid {
	position:absolute;
	z-index: 100;
}
.battle-background td > div {
    border: rgba(0, 0, 0, 0.32) 1px solid;
	height: 100%;
}
.battle-background td {
    width: 32px;
	min-width: 32px;
    height: 32px;
	position: relative;
	vertical-align: top;
}
.battle-background td a{
	display: block;
    height: 100%;
    margin-top: -1px;
    margin-left: -1px;
}
.battle-background td.selectable > div {
	background-color: rgba(0, 0, 255, 0.4);
}
.battle-background td.selectable:hover > div {
	background-color: rgba(0, 0, 150, 0.6);
}
.battle-background td.attack > div, 
.battle-background td.attack:hover > div {
	background-color: rgba(150, 0, 0, 0.6);
}
.battle-background td.attack.selectable > div, 
.battle-background td.attack.selectable:hover > div {
	background-color: rgba(150, 0, 150, 0.6);
}	
.battle-background-pic {
	margin-bottom: 1px;
	margin-right: 1px;
}
.player-info {
    display: none;
    border: black 1px solid;
    border-radius: 4px;
    position: fixed;
    pointer-events: none;
    padding: 5px;
	z-index:5;
}
.player-info.ally {
    background-color: #00ff00;
}
.player-info.enemy {
    background-color: #ff0000;
}
td:hover .player-info:first-child {
	display: block;
}

.battle-options {
	float:left;
	min-width: 180px;
    margin-right: 20px;
    margin-bottom: 30px;
}
.battle-options .actions .action{
    display: table-cell;
}
.battle-options .actions .action div{
    width: 15px;
    display: inline-block;
}
.battle-options .actions .action div:first-child {
    border-top: black 10px solid;
    border-left: transparent 2px solid;
}
.battle-options .actions .action div:last-child {
    border-bottom: black 10px solid;
    border-right: transparent 2px solid;
}
.battle-options .actions .action:first-child div:first-child {
    border-left: none;
}
.battle-options .actions .action:last-child div:last-child {
    border-right: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.battle-options .actions .action.used div:first-child{
	border-top-color: rgba(136, 136, 136, 0.5);
}
.battle-options .actions .action.used div:last-child{
	border-bottom-color: rgba(136, 136, 136, 0.5);
}
.battle-options .actions .action.animate-use div:first-child{
	animation: blink 1s;
	animation-iteration-count: infinite;
}
.battle-options .actions .action.animate-use div:last-child{
	animation: blink 1s;
	animation-iteration-count: infinite;
}
.battle-options .list-group-item {
	padding: 7px 15px;
}
.battle-options .skill,
.battle-options .item {
	margin-left: 10px;
	border-radius: 0;
}
.battle-options a.selected {
    background-color: #cecece;
}
.battle-text {
	clear: both;
}
.battle-text > div {
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    border: rgba(0, 0, 0, 0.39) 1px solid;
    border-radius: 5px;
}
.battle-text > div:first-child {
    display: none;
}
.battle-finished-row {
	border-bottom: black 1px solid;
	margin: 10px;
	padding-bottom: 10px;
}
.battle-finished-row:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.link-option {
	border-radius: 3px;
    border: #555555 solid 2px;
	margin: 10px;
	padding: 10px;
	color: #333;
	display: inline-block;
}
.link-option.disabled {
	border-color: #BBBBBB;
	color: #999;
	background-color: rgba(230,230,230,0.5);
	cursor: not-allowed;
}
.link-option:hover {
    background: rgba(150,150,150,0.3);
}
.recipe .input,
.recipe .output,
.smith-item {
    background-color: rgba(255, 255, 255, 0.52);
    border: black 1px solid;
    border-radius: 5px;
    padding: 5px;
    margin: 0 -5px;
}
.input .table, 
.output .table {
    margin-bottom: 0;
}
.smith-item .exp-bar {
	display: none;
}
.craft-icon {
	float: left;
	padding: 0;
}
.craft-icon div{
	margin: auto;
	display: block;
	white-space: nowrap;
	width: min-content;
}
.craft-icon div a{
	padding: 5px;
}
.craft-icon div a:not(:last-child) {
	border-top-right-radius: 0;
}
.craft-icon div a:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
	margin-top: -38px;
}
.craft-icon  a img.craft-img{
	width: 60px;
}
.craft-icon  a img.delete-img{
	width: 20px;
}
.recipe thead {
	display: none;
}
.recipe tr:first-child td {
	border-top: none;
}

#effect-description {
	margin-left: 20px;
	margin-bottom: 20px;
}
.character-stats tr td {
	padding: 1px 5px;
}
.character-stats .stat-name {
    text-align: right;
}
.level-up {
	color: #00b100;
    padding-left: 2px;
}
.messages .unread {
	font-weight: bold;
}
.message-from {
	margin-right: 30px;
}
.chat .text {
	height: 400px;
	overflow-y: scroll;
}
.chat .text .time {
	width: 17%;
	float: left;
}
.chat .text .name {
	width: 13%;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.chat .text .msg {
	width: 70%;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
}
.chat .line {
	clear: both;
}
form.chat-message div {
	width: 100%;
}
form.chat-message input.form-control {
	width: 80%;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	float: left;
}
form.chat-message button.btn {
	width: 20%;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	float: left;
}
.bottom-line {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: gray 1px solid;
}
.bottom-line:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}
.news-message .subject {
	font-weight: bold;
}
.news-message .text {
	margin-bottom: 10px;
}
.news-message .time {
	float: left;
}
.news-message .source {
	float: left;
	margin-left: 10px;
}
.quest {
    margin-bottom: 10px;
    background-color: rgba(200,200,200,0.4);
    padding: 5px;
    border: rgba(100,100,100,0.4) 1px solid;
    border-radius: 5px;
}
.quest.accepted {
	background-color: rgba(100,200,200,0.4);
}
.quest.complete {
	background-color: rgba(100,200,100,0.4);
}
.quest .quest-option {
	float: right;
}
.quest .quest-target-option {
	float: right;
}
.group-invite {
	border-bottom: black 1px solid;
    margin-bottom: 5px;
    padding-bottom: 5px;
}