/*
===================================================================================================
Fonty
===================================================================================================
*/
@font-face 
{
  font-family: Insula;
  src: url(Fonts/insula.ttf) format("truetype");
}

@font-face 
{
  font-family: Morpheus;
  src: url(Fonts/morpheus.ttf) format("truetype");
}

@font-face 
{
  font-family: Skurri;
  src: url(Fonts/skurri.ttf) format("truetype");
}

/*
===================================================================================================
Animace
===================================================================================================
*/ 
@keyframes redPulse
{
  0% { text-shadow: 0px 0px 5px red, 0px 0px 5px red; }
  50% { text-shadow: 0px 0px 15px red, 0px 0px 15px red; }
  100% { text-shadow: 0px 0px 5px red, 0px 0px 5px red; }
}

@keyframes borderGoldPulse
{
  0% { box-shadow: 0px 0px 5px gold, 0px 0px 5px gold; }
  50% { box-shadow: 0px 0px 20px gold, 0px 0px 20px gold, 0px 0px 20px gold, 0px 0px 20px gold; }
  100% { box-shadow: 0px 0px 5px gold, 0px 0px 5px gold; }
}

@keyframes borderGreenPulse
{
  0% { box-shadow: 0px 0px 5px lime, 0px 0px 5px lime; }
  50% { box-shadow: 0px 0px 20px lime, 0px 0px 20px lime, 0px 0px 20px lime, 0px 0px 20px lime; }
  100% { box-shadow: 0px 0px 5px lime, 0px 0px 5px lime; }
}

@keyframes borderRedPulse
{
  0% { box-shadow: 0px 0px 5px red, 0px 0px 5px red; }
  50% { box-shadow: 0px 0px 20px red, 0px 0px 20px red, 0px 0px 20px red, 0px 0px 20px red; }
  100% { box-shadow: 0px 0px 5px red, 0px 0px 5px red; }
}

@keyframes borderPurplePulse
{
  0% { box-shadow: 0px 0px 5px purple, 0px 0px 5px purple; }
  50% { box-shadow: 0px 0px 20px purple, 0px 0px 20px purple, 0px 0px 20px purple, 0px 0px 20px purple; }
  100% {  box-shadow: 0px 0px 5px purple, 0px 0px 5px purple; }
}

@keyframes borderBluePulse
{
  0% { box-shadow: 0px 0px 5px blue, 0px 0px 5px blue; }
  50% { box-shadow: 0px 0px 20px blue, 0px 0px 20px blue, 0px 0px 20px blue, 0px 0px 20px blue; }
  100% {  box-shadow: 0px 0px 5px blue, 0px 0px 5px blue; }
}

@keyframes borderWhitePulse
{
  0% { box-shadow: 0px 0px 5px white, 0px 0px 5px white; }
  50% { box-shadow: 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white; }
  100% {  box-shadow: 0px 0px 5px white, 0px 0px 5px white; }
}

@keyframes borderLightBluePulse
{
  0% { box-shadow: 0px 0px 5px cadetblue, 0px 0px 5px cadetblue; }
  50% { box-shadow: 0px 0px 20px cadetblue, 0px 0px 20px cadetblue, 0px 0px 20px cadetblue, 0px 0px 20px cadetblue; }
  100% {  box-shadow: 0px 0px 5px cadetblue, 0px 0px 5px cadetblue; }
}

@keyframes borderPinkPulse
{
  0% { box-shadow: 0px 0px 5px #ff00dc, 0px 0px 5px #ff00dc; }
  50% { box-shadow: 0px 0px 20px #ff00dc, 0px 0px 20px #ff00dc, 0px 0px 20px #ff00dc, 0px 0px 20px #ff00dc; }
  100% {  box-shadow: 0px 0px 5px #ff00dc, 0px 0px 5px #ff00dc; }
}

@keyframes borderOrangePulse
{
  0% { box-shadow: 0px 0px 5px orange, 0px 0px 5px orange; }
  50% { box-shadow: 0px 0px 20px orange, 0px 0px 20px orange, 0px 0px 20px orange, 0px 0px 20px orange; }
  100% {  box-shadow: 0px 0px 5px orange, 0px 0px 5px orange; }
}

@keyframes borderYellowPulse
{
  0% { box-shadow: 0px 0px 5px yellow, 0px 0px 5px yellow; }
  50% { box-shadow: 0px 0px 20px yellow, 0px 0px 20px yellow, 0px 0px 20px yellow, 0px 0px 20px yellow; }
  100% {  box-shadow: 0px 0px 5px yellow, 0px 0px 5px yellow; }
}

@keyframes borderGrayPulse
{
  0% { box-shadow: 0px 0px 5px #555555, 0px 0px 5px #555555; }
  50% { box-shadow: 0px 0px 20px #555555, 0px 0px 20px #555555, 0px 0px 20px #555555, 0px 0px 20px #555555; }
  100% {  box-shadow: 0px 0px 5px #555555, 0px 0px 5px #555555; }
}
/*
===================================================================================================
Vlastní
===================================================================================================
*/

body
{
	display: block;
    
    background-color: black;
    text-align: center;
    font: 13.5px Insula;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;

    /* No select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none; 
}

optgroup
{
	color:white; 
	text-align:center;
    font: 13.5px Insula;
    
	border: 1px solid #d3d3d3;
}

option
{
	color:white; 
	text-align:center;
    font: 13.5px Insula;
}

p 
{
    display: block;
    -webkit-margin-before: 16px;
    -webkit-margin-after: 16px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

select
{
	color:white; 
	background-color: black;
	border:0px; 
	outline:0px; 
}

::-webkit-scrollbar 
{
    height: 12px;
	width: 12px;
	background: #000;
}

::-webkit-scrollbar-thumb 
{
    background: rgba(255, 0, 0, 0.4);
    -webkit-border-radius: 10px;
}

::-webkit-scrollbar-corner 
{
    background: #000;
}


/*
===================================================================================================
===================================================================================================
Styly
===================================================================================================
===================================================================================================
*/
#compassCanvas
{
    float:left;
}


#contentEndBar
{
	margin-top: 20px;
	margin-bottom: 20px;
}

.panelText
{
    width:100%;
    height:auto;
	
	margin-top: 5px;
	margin-bottom: 5px;
	
	color:white; 
	text-align:center;
    vertical-align:middle;
    font: 13.5px Insula;
}

.panelHeader
{
    width:100%;
    height:auto;
	margin: 0px;
	
	color:white; 
	text-align:center;
    font: 13.5px Insula;
    
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
    background-color: rgba(255, 0, 0, 0.40);
}

.paddedPanelHeader
{
    margin-top: 5px;
    margin-bottom: 0px;
    width:100%;
    height:auto;
	
	color:white; 
	text-align:center;
    font: 13.5px Insula;
    
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
    background-color: rgba(255, 0, 0, 0.40);
}

/*
===================================================================================================
Hlavní panel
===================================================================================================
*/
.RightPanel
{
	width:300px; 
	height:600px;
	
	display:inline-block;
	vertical-align: top;
	
	background-color: black;
	color:white;
	
	border:1px solid white; 
}

.RightInnerPanel
{
    height: 100%;
    width: 300px;
}

.LeftPanel
{
	width: 220px; 
	height:600px;
	
	display:inline-block;
	vertical-align: top;
	
	background-color: black;
	color:white;
	
	border:1px solid white; 
}

.LeftPanelTable
{
    table-layout:fixed;
    width: 100%;
}

.LeftPanelTableCell
{
    vertical-align:top;
    margin:0px;
    padding: 0px;
}

.statusPanel
{
	display: inline-block;
	text-align: center;
	margin: 0px;
	width:180px;
	word-break: break-all;
}

.panelRowHeader
{
    width:100%;
    height:auto;
    float:left;
	margin: 0px;
	
	color:white; 
	text-align:center;
    font: 13.5px Insula;
    
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
    background-color: rgba(255, 0, 0, 0.40);
}

/*
===================================================================================================
Modální okna
===================================================================================================
*/

#ModalStatusPanel
{
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    color:white;
    background-color: black;/*rgb(115, 15, 15);*/
    border-bottom: solid 1px white;
    border-top: solid 1px white;
}

.modal 
{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: -30px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modalContainer
{
    animation: borderGoldPulse 5s linear infinite;

    background-color: black;
    color: white;
    margin: auto;
    border: 1px solid white;
    width: 90%;
    text-align: right;
}

.close 
{
    color: #aaaaaa;
    font-weight: bold;
    margin-right: 5px;
}

.close:hover,
.close:focus 
{
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.modalHeader
{
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: rgba(255, 0, 0, 0.40);
}
#modalHeaderText
{
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    margin: 20px;
}

.modalContent
{
    margin: 0px;
    padding:  0px;
}

.modalFooter
{
    margin-top: -6px;
    padding:  0px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: rgba(255, 0, 0, 0.40);
}

#modalFooterText
{
    margin-left: 10px;
    text-align: left;
    font-style:italic;
    font-size: 14px;
}


#ActionInventoryContainer, #ActionAttackContainer
{
    text-align:left;
}

/*
===================================================================================================
Inventář
===================================================================================================
*/
#InventoryTable
{
    width:100%;
    table-layout:fixed;
    height: 407px;
}

.InventoryFixedTableCollumn
{
    min-width:300px;
    vertical-align:top;
}

.InventoryFillTableCollumn
{
    width:100%;
    vertical-align:top;
}

#MainInventoryList 
{
    display: inline-block;
    overflow-y: auto;
    width: 100%;
    height: 407px;
    border-right:solid 1px white;
    border-bottom:solid 1px white;
}

#LootInventoryList 
{
    display: inline-block;
    overflow-y: auto;
    width: 100%;
    height: 407px;
    border-left:solid 1px white;
    border-bottom:solid 1px white;
}

.InventoryListItem
{
    padding:5px;
    text-align:left;
    border:solid 1px gray;
}

.InventoryListItemEquiped
{
    padding:5px;
    text-align:left;
    border:solid 1px gray;
    /*background-color: rgba(57, 255, 0, 0.40);*/
}

.InventoryListItem:hover, .InventoryListItem:focus, .InventoryListItemEquiped:hover, .InventoryListItemEquiped:focus
{
    background-color: #222222;
}

.InventoryListItemEquiped .InventoryListItemIcon
{
    animation: borderGreenPulse 5s linear infinite alternate;
}

.InventoryListItemIcon
{
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:middle;
}

.InventoryListItemContent
{
    word-break: keep-all;
    width:200px;
    padding-left: 10px;
    display:inline-block;
    vertical-align:middle;
}

.InventoryListItemName
{
    font-size: 16px;
    text-decoration: underline;
}

.InventoryListItemDescription
{
    font-size: 14px;
    margin:0px;
    font-style:italic;
}

.InventoryListItemFloatInfo 
{
    display: none;
    width: 100%;
}

.InventoryListItem:hover .InventoryListItemFloatInfo, .InventoryListItemEquiped:hover .InventoryListItemFloatInfo
{
    display:block;
}

.InventoryListItemFloatInfoAttribute
{
    margin:0px;
    padding-left:75px;
    color:wheat;
    direction:ltr;
}

.InventoryListItemFloatInfoAttributePositive
{
    margin:0px;
    padding-left:75px;
    color: green;
}

.InventoryListItemFloatInfoAttributeNegative
{
    margin:0px;
    padding-left:75px;
    color:red;
}

#InventoryContent
{
    display: inline-block;
    height: 407px;
    width: 100%;
}


#LootLogContainer
{
    overflow-y: auto;
    width: 100%;
    height: 404px;
}

.InventoryEquipTextIcon
{
    color: lime;
}

/*
===================================================================================================
Vybrané pole
===================================================================================================
*/

.SelectedTileActionTable
{
    width: 100%;
    text-align: center;
}

.SelectedTileActionTableCell
{
    text-align: center;
}

.SelectedTileActionButton
{
    margin-top: 5px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
  	color: white;
  	background-color: #222222;
  	border: solid white 1px;
}

.SelectedTileActionButton:hover
{
  	background-color: #555555;
}

.SelectedTileInfo
{
	display: inline-block;
    height: 252px;
    width: 300px; 
}

#EntityList 
{
    display: inline-block;
    overflow: auto;
    width: 100%;
    height: 100%;
    margin-top: 0px;
}

.EntityListItem
{
    padding:5px;
    text-align:left;
    border:solid 1px gray;
}

.EntityListItem:hover, .EntityListItem:focus
{
    background-color: #222222;
}

.EntityListItemIcon
{
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:middle;
}

.EntityListItemContent
{
    word-break: keep-all;
    width:195px;
    padding-left: 10px;
    display:inline-block;
    vertical-align:middle;
}

.EntityListItemName
{
    font-size: 16px;
    text-decoration: underline;
}

.EntityListItemDescription
{
    font-size: 14px;
    margin:0px;
    font-style:italic;
}

.EntityListItemFloatInfo 
{
    display: none;
    width: 100%;
}

.EntityListItem:hover .EntityListItemFloatInfo
{
    display:block;
}

.neutralSpan
{
    color: cadetblue;
}

.friendlySpan
{
    color: green;
}

.hostileSpan
{
    color: red;
}

/*
===================================================================================================
Nápověda
===================================================================================================
*/
#HelpContainer
{
    overflow-y:scroll;
    height: 400px;
    text-align:center;
    margin-bottom: 5px;
}

/*
===================================================================================================
Příběhy
===================================================================================================
*/
#ActionStoryContainer
{
    text-align:center;
    overflow-y:scroll;
    height: 400px;
    margin-bottom: 5px;
}

#ActionStoryText
{
}

#ActionStoryImage
{
    width:500px;
    height:300px;
}

.BookStoryName
{
    text-align:left;
    text-decoration:underline;
    font-size: 20px;
    color: white;
    margin-left: 30px;
  	direction: ltr;
}

.BookStoryText
{
    text-align:left;
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 16px;
    color: white;
    margin-left: 30px;
  	direction: ltr;
}

/*
===================================================================================================
Panel vlastností
===================================================================================================
*/

.tableAttributes
{
    table-layout:fixed;
    width: 100%;
}
.tableAttributesCell
{
    width: 73px;
    text-align:center;
    font-size: 18px;
}

.healthSpan
{
	color:red;
}

.manaSpan
{
	color:blue;
}

.staminaSpan
{
	color:green;
}

.attackSpan
{
	color:orange;
}

.defenseSpan
{
	color:purple;
}

.moneySpan
{
	color:gold;
}

.youSpan
{
    font-size:20px;
    color: red;
}

.itSpan
{
    font-size:20px;
    color: lime;
}

/*
===================================================================================================
Panel rychlých akcí
===================================================================================================
*/

#ActionBarList
{
    display: inline-block;
    overflow: auto;
    width: 100%;
    height: 389px;
    margin-top: 0px;
    direction: ltr;
}

.ActionBarListItem
{
    padding:5px;
    text-align:left;
    border:solid 1px gray;
    cursor:pointer;
    direction: ltr;
}

.ActionBarListItemChecked
{
    padding:5px;
    text-align:left;
    border:solid 1px gray;
    direction: ltr;
    background-color: #222222;
    margin-top: 10px;
}

.ActionBarListItem:hover, .ActionBarListItem:focus
{
    background-color: #222222;
}

.ActionBarListItemIcon
{
    width: 40px;
    height: 40px;
    display:inline-block;
    vertical-align:middle;
    direction: ltr;
}

.ActionBarListItemHeader
{
    padding-left: 10px;
    display:inline-block;
    vertical-align:middle;
    font-size: 18px;
    direction: ltr;
}

/*
===================================================================================================
Systém soubojů
===================================================================================================
*/
#BattleTable
{
    width:100%;
    table-layout:fixed;
    height: 407px;
}

.BattleFixedTableCollumn
{
    min-width:300px;
    vertical-align:top;
}

.BattleFillTableCollumn
{
    width:100%;
    vertical-align:top;
}

.BattleTabs
{
    border-bottom: solid 1px white;
    text-align:center
}

#BattleActions
{
    width:100%;
    height: 407px;
    border-right: solid 1px white;
}

#BattleContent
{
    width: 100%;
    height: 407px;
}

#BattleEnemyInfo
{
    width:100%;
    height: 407px;
    border-left: solid 1px white;
}

.BattleEnemyInfoParameter
{
    display:inline-block;
    color: wheat;
    padding-top:5px;
    padding-left:20px;
    font-size: 16px;
    width: 180px;
}

.BattleEnemyInfoParameterFull
{
    display: block;
    color: wheat;
    font-size: 16px;
    min-width: 180px;
    text-align:center;
}

#BattleEnemyInfoPanel
{
    padding:5px;
    text-align:left;
    border-bottom:solid 1px gray;
}

#BattleEnemyIcon
{
    width: 90px;
    height: 90px;
    display:inline-block;
    vertical-align:middle;
}

#BattleEnemyContent
{
    word-break: keep-all;
    width: 180px;
    padding-left: 10px;
    display: inline-block;
    vertical-align: middle;
}


#BattleInventoryList, #BattleActionList
{
    overflow-y: auto;
    width: 100%;
    height: 362px;
}

#BattleActionList
{
    overflow-y: auto;
    width: 100%;
    height: 362px;
}

#BattleLogContainer
{
    overflow-y: auto;
    width: 100%;
    height: 404px;
}


.BattleLogLine
{
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom:solid 1px white;
}

.damageSpan
{
    font-size:20px;
    color:red;
}

.blockSpan
{
    font-size:20px;
    color:green;
}

#damageBarContainer
{ 
    display:none;
    overflow: auto;
    height: 320px;
    /*
    background-image: url("Images/GUI/sword_background.png");
	background-size: 1100px 250px;
    background-repeat: no-repeat;
    background-position: center;
    */
}

#damageBarBox
{
    overflow: auto;

    text-align: center; 
    margin-left:auto; 
    margin-right:auto;

    border-bottom: solid 1px white;

}

#damageMeterInfo
{
    margin-bottom: 25px;
}

#damageMeterValue
{
    margin-top: 25px;
}

#damageBar
{
    text-align: center; 
    margin-left:auto; 
    margin-right:auto;
    
    width: 480px;
    height: 38px;
    border: solid white 1px;

    /* Použít pro nastavení bonusových zón - ovládání z Css*/
    background: linear-gradient(
    to right, 
    yellow, yellow
  );
}

#damageMeter
{
    float:left;
}

.tableMagic
{
    margin-top: 10px;
    text-align: center; 
    margin-left:auto; 
    margin-right:auto;
    table-layout:fixed;
}

#magicBarContainer
{
    display:none;
    text-align: center; 
}

#PerformMagicAttack
{
    margin-top: 20px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
  	color: white;
  	background-color: #222222;
  	border: solid white 1px;
}

#PerformMagicAttack:hover
{
  	background-color: #555555;
}


.tableMagicCheck
{
    display: none;
}

.tableMagicLabel
{
    display:block;
    width: 80px;
    height: 80px;

    margin: 5px;

    text-align: center;


	background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center;
}

.labelMagicCell_0_0 {background-image: url("Images/Icons/Rune_0_0.png");}
.labelMagicCell_0_1 {background-image: url("Images/Icons/Rune_0_1.png");}
.labelMagicCell_0_2 {background-image: url("Images/Icons/Rune_0_2.png");}

.labelMagicCell_1_0 {background-image: url("Images/Icons/Rune_1_0.png");}
.labelMagicCell_1_1 {background-image: url("Images/Icons/Rune_1_1.png");}
.labelMagicCell_1_2 {background-image: url("Images/Icons/Rune_1_2.png");}

.labelMagicCell_2_0 {background-image: url("Images/Icons/Rune_2_0.png");}
.labelMagicCell_2_1 {background-image: url("Images/Icons/Rune_2_1.png");}
.labelMagicCell_2_2 {background-image: url("Images/Icons/Rune_2_2.png");}

.tableMagicCheck:checked + .labelMagicCell_0_0 {animation: borderBluePulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_0_1 {animation: borderGreenPulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_0_2 {animation: borderWhitePulse 5s linear infinite alternate;}

.tableMagicCheck:checked + .labelMagicCell_1_0 {animation: borderYellowPulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_1_1 {animation: borderPinkPulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_1_2 {animation: borderLightBluePulse 5s linear infinite alternate;}

.tableMagicCheck:checked + .labelMagicCell_2_0 {animation: borderGrayPulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_2_1 {animation: borderRedPulse 5s linear infinite alternate;}
.tableMagicCheck:checked + .labelMagicCell_2_2 {animation: borderOrangePulse 5s linear infinite alternate;}

.grimoireRunes {animation: borderPurplePulse 5s linear infinite alternate;}
/*
===================================================================================================
Nastavení
===================================================================================================
*/

#labelControls
{
	margin-top: 40px;
}

#labelControlsAttack, #labelControlsMove, #labelControlInventory, #labelControlInspect, #labelControlMagicInspect, #labelControlSleep
{
	margin-top: 20px;
	margin-bottom: 20px;
}

.tableControls
{
	margin-top: 10px;
    text-align: center; 
    margin-left:auto; 
    margin-right:auto;
}

.tableControlCell
{
    width:50px;
    height:50px;
    text-align: center; 
}

.tableControlChar
{
    font: 35px Insula;
    text-align: center; 
}

/*
===================================================================================================
MapCanvas
===================================================================================================
*/
#mapCanvasContainer
{
    display: inline-block;
    color: black; 
    border: 1px solid #d3d3d3;
    position:relative;
}

.mapCanvasFiery
{
	box-shadow: 0 0 10px red,0 0 10px red,0 0 20px red;
    cursor:pointer; 
    position:relative;
}

#mapCanvasOverlap
{
    position:absolute;
    top:0px;
    left:0px;
}

/*
===================================================================================================
Tlačítka
===================================================================================================
*/
.settingButton
{
	float: left;
	margin-left: 5px;
}

.settingButton:hover
{
	border-radius: 50%;
	box-shadow: 0 0 20px gold, inset 0 0 5px gold;
}
/*
===================================================================================================
Záložky
===================================================================================================
*/

.tabsTable
{
    table-layout:fixed;
	margin-top: 5px;
    width: 100%;
}

.tabsTableCell
{
    width: 350px;
    vertical-align:top;
}

.tabs
{
    text-align: center;
}

.contents
{
  	/*border: solid white 1px;*/
  	color: white;	
}

.content
{
  	display: none;
  	text-align: center;	
}

.tab
{
	display: inline-block;
  	cursor: pointer;
  	padding: 8px;
  	color: white;
  	background-color: #222222;
  	border: solid white 1px;
}

.tab:hover
{
  	background-color: #555555;
}

.tabRadio
{
	display: none;
}

.tabRadio:checked + .content
{
	display: block;
}

/*
===================================================================================================
Systém knih
===================================================================================================
*/

#storyInfo
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.storyBook
{
	background-image: url("Images/GUI/storyBook.png");
	background-size: 800px 600px;
    background-repeat: no-repeat;
    background-position: center; 
	height: 600px;
}

/* Story system */

.diary
{
	display:inline-block;
	background-image: url("Images/GUI/diary.png");
	background-size: 300px 100px;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px; 
	height: 100px;
	margin-top: 70px;
	margin-bottom: -20px;
}

.diary:Hover
{
    cursor: pointer;
	height: 150px;
	
	margin-top: 20px;
	
	background-image: url("Images/GUI/diaryOut.png");
	background-size: 300px 150px;
    
    box-shadow: 0 0 20px gold, inset 0 0 5px gold;
    
    -webkit-transition: all 0.5s;
    
    transition: all 0.5s;

    animation: redPulse 5s linear infinite alternate;
}

.diary[title]:after
{
  	position: absolute;
	content: attr(title);
    font: 30px Insula;
	margin-top: 40px;
	color: gold;
}


#inputDiary:checked ~ .diary
{
	background-image: url("Images/GUI/diaryOut.png");
	background-size: 300px 150px;
	height: 150px;
	margin-top: 0px;
	
	/* Záře */
    animation: redPulse 5s linear infinite alternate;

    box-shadow: 0 0 20px gold, inset 0 0 5px gold;
    -webkit-transition: box-shadow linear 1s;
    transition: box-shadow linear 1s;
}

.grimoare
{
	display: inline-block;
	
	width: 300px; 
	height: 100px;
	
	margin-top: 70px;
	margin-left: 20px;
	margin-bottom: -20px;
	
	background-image: url("Images/GUI/grimoare.png");
	background-size: 300px 100px;
    background-repeat: no-repeat;
    background-position: center;
}

.grimoare:Hover
{
    cursor: pointer;
	height: 150px;
	
	margin-top: 20px;
	
	background-image: url("Images/GUI/grimoareOut.png");
	background-size: 300px 150px;
    
    box-shadow: 0 0 20px gold, inset 0 0 5px gold;
    
    -webkit-transition: all 0.5s;
    
    transition: all 0.5s;
    
    animation: redPulse 5s linear infinite alternate;
}


.grimoare[title]:after
{
  	position: absolute;
	content: attr(title);
    font: 30px Insula;
	margin-top: 40px;
	color: gold;
}

#inputGrimoare:checked ~ .grimoare
{
	background-image: url("Images/GUI/grimoareOut.png");
	background-size: 300px 150px;
	height: 150px;
	margin-top: 0px;
	
	/* Záře */
    animation: 5s linear 0s infinite alternate redPulse;
  	
    box-shadow: 0 0 20px gold, inset 0 0 5px gold;
    -webkit-transition: box-shadow linear 1s;
    transition: box-shadow linear 1s;
}

.tabRadioBook
{
	display: none;
}

#diaryBook
{
	display: none;
}

#inputDiary:checked ~ #diaryBook
{
	display: block;
}

#grimoareBook
{
	display: none;
}

#inputGrimoare:checked ~ #grimoareBook
{
	display: block;
}


.storyPageLeft
{
	width: 350px;
	height: 525px;
	display: inline-block;
  	/*border: solid white 1px;*/
  	overflow-y: auto;
  	margin-right: 10px;
  	margin-top: 35px;
  	
  	text-shadow: 0 0 10px gray;
}
.storyPageRight
{
	width: 350px;
	height: 525px;
	display: inline-block;
  	/*border: solid white 1px;*/
  	overflow-y: auto;
  	direction: rtl;
  	margin-left: 10px;
  	margin-top: 35px;
  	
  	text-shadow: 0 0 10px gray;
}


/*
===================================================================================================
Životy a mana
===================================================================================================
*/
.fullHearts
{
	margin: 0px;
	display: inline;
	color:red; 
	font-size:18px;
}

.brokenHearts
{
	margin: 0px;
	
	display: inline;
	color:gray; 
	font-size:18px;
}

.fullMana
{
	margin: 0px;
	
	display: inline;
	color:blue; 
	font-size:18px;
}
.brokenMana
{
	margin: 0px;
	
	display: inline;
	color:gray; 
	font-size:18px;
}

/*
===================================================================================================
Systém předmětů
===================================================================================================
*/

.itemJunk
{
	text-align: left;
	color:gray;
}

.itemCommon
{
	text-align: left;
	color:white;
}

.itemUncommon
{
	text-align: left;
	color:green;
}

.itemRare
{
	text-align: left;
	color:blue;
}

.itemLegendary
{
	text-align: left;
	color:purple;
}

/*
===================================================================================================
Defaulty
===================================================================================================
*/
html 
{
	display: block;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
blockquote,
th,
td 
{
	margin: 0;
	padding: 0;
}

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

fieldset,
img 
{
	border: 0;
}

address,
button,
caption,
cite,
code,
dfn,
em,
input,
select,
strong,
textarea,
th,
var 
{
    font:inherit;
}

del,
ins 
{
	text-decoration: none;
}

li 
{
	list-style: none;
}

caption,
th 
{
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 
{
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after 
{
	content: '';
}

abbr,
acronym 
{
	border: 0;
	font-variant: normal;
}

sup 
{
	vertical-align: baseline;
}

sub 
{
	vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend 
{
	color: #000;
}