html {
width:100%;
height: 100%;
color:#eee;
background-color:black;
font-family: "MedievalSharp", sans-serif;
}
body {
width:100%;
/*min-height: 100%;*/
margin: 0;
padding: 0px;
}
p {
margin-top:0;
margin-bottom:0.5em;
line-height: 1.5em;
}
a {
color:#ddd;
}
a:hover {
color: #fff;
}
table { 
border-collapse:collapse;
}
img{
vertical-align:middle;
border:0;
}
input, textarea, select{
padding:6px;
background:#ddd;
border:#555 2px;
border-style: inset;
border-radius:4px;
}

/* GUI */

#GuiPageMargin100{
margin-left:100px;
}

#GuiPageMargin200{
margin-left:200px;
}

.GuiPageToRead600{
width:600px;
margin:auto;
}

.GuiPageToRead800{
width:800px;
margin:auto;
}

#GuiPageTitle{
position:relative;
text-align:center;
width:256px;
margin:auto;
margin-bottom:8px;
color:#ffffff;
font-size:20px;
font-weight:bold;
background-color:#333333;
padding:12px 24px 12px 24px;
border-style: solid;
border-color: #444444;
border-width:4px;
border-top-width:0px;
border-radius:8px;
border-top-left-radius:0px;
border-top-right-radius:0px;
}

.GuiPageSubTitle{
position:relative;
width:256px;
margin-bottom:8px;
color:#ffffff;
font-size:16px;
font-weight:bold;
background-color:#333333;
padding:12px 24px 12px 24px;
border:4px solid #444444;
border-radius:8px;
}

#GuiMenu{
position:fixed;
top:0px;
left:0px;
bottom:0px;
z-index:100;
overflow-y:scroll;
overflow-x:hidden;
}

#GuiSave{
position:fixed;
bottom:0px;
right:0px;
z-index:100;
}

#GuiQuit{
position:fixed;
top:0px;
right:0px;
z-index:100;
}

.GuiBlockFrame{
position:relative;
display:inline-block;
vertical-align:top;
border:4px solid #444444;
border-radius:8px;
background-color:#333333;
padding:8px;
margin:4px;
}
.GuiBlockTitle{
color:#ffffff;
font-weight:bold;
font-size:18px;
margin:4px;
}
.GuiBlockText{
color:#ffffff;
font-size:0.8em;
margin:4px;
max-width:256px;
text-align:justify;
}


.GuiButtonFrame{
position:relative;
display:inline-block;
vertical-align:top;
height:32px;
text-align:left;
background-color:#777777;
border:2px solid #999999;
border-radius:4px;
cursor:pointer;
margin:4px;
white-space: nowrap;
}
.GuiButtonFrame:hover{
-webkit-filter: brightness(130%);
filter: brightness(130%);
}
.GuiButtonFrame img{
display:inline-block;
width:32px;
heitght:32px;
border-radius:4px;
}
.GuiButtonText{
display:inline-block;
vertical-align:middle;
font-size:18px;
color:#ffffff;
margin-left:4px;
margin-right:4px;
}
.GuiButtonMenu{
display:block;
width:184px;
}

.GuiItemFrame{
position:relative;
display:inline-block;
vertical-align:top;
background-color:#333333;
border:2px solid #444444;
border-radius:16px;
white-space: nowrap;
}
.GuiItemFrame img{
display:inline-block;
vertical-align:middle;
width:32px;
height:32px;
padding:4px;
border-radius:8px;
}
.GuiItemTitle{
display:inline-block;
vertical-align:middle;
font-size:20px;
font-weight:bold;
padding:4px;
}
.GuiItemVal{
display:inline-block;
vertical-align:middle;
padding:8px;
font-size:20px;
font-weight:bold;
background-color:#555555;
border-radius:16px;
}

.GuiIllu64{
display:inline-block;
vertical-align:top;
width:64px;
height:64px;
border-radius:4px;
margin:2px;
border: 1px solid black;
}

.GuiIllu128{
display:inline-block;
vertical-align:top;
width:128px;
height:128px;
border-radius:8px;
margin:4px;
border: 1px solid black;
}

.GuiIllu256{
display:inline-block;
vertical-align:top;
width:256px;
height:256px;
border-radius:16px;
margin:4px;
border: 1px solid black;
}


/*.GuiBtn{
position:relative;
display: inline-block;
cursor: pointer;
vertical-align: top;
background-color: #cacaca;
padding:6px;
color:#000000;
margin:2px;
}
.GuiBtn:hover{
background-color: #fdfdfd;
}
.GuiBtn img{
background-color:#000000;
}
.GuiBtn div{
background-color:#999999;
}*/

.GuiPanel{
border:4px solid #444444;
vertical-align:top;
display:inline-block;
border-radius:8px;
margin:4px;
color:#ffffff;
padding:8px;
background-color:#333333;
}
.GuiPanelTitle{
font-weight:bold;
font-size:1.2em;
margin:4px;
}
.GuiPanelText{
color:#ffffff;
font-size:0.8em;
margin:4px;
max-width:260px;
}


                

/*.GuiBtnFrame{
position:relative;
display:inline-block;
vertical-align:top;
z-index:2;
}
.GuiBtn{
position:absolute;
cursor:pointer;
z-index:2;
}
.GuiBtnIllu{
position:absolute;
z-index:1;
background-color:black;
}
.GuiBtnIllu:hover{
-webkit-filter: brightness(130%);
filter: brightness(130%);
}





.GuiItem{
position:relative;
display:inline-block;
vertical-align:top;
color:#ffffff;
background-color:#333333;
border-style: solid;
border-color: #777777;
}
.GuiItem .GuiItemTxt{
position:absolute;
color:white;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/**************************************************** WINDOWS ***************************************************/

.GuiWindowFrame{
position:fixed;
color:#111111;
background-color:#dddddd;
}
.GuiWindowWrapper{
position:relative;
overflow:auto;
height:100%;
}
.GuiWindowContent{
position:relative;
margin:20px;
}
.GuiWindowClose {
position:absolute;
top:0px;
right:0px;
cursor:pointer;
width:24px;
height:24px;
z-index:4;
background-image: url("img/window_close.png");
}
.GuiWindowClose:hover{
-webkit-filter: brightness(130%);
filter: brightness(130%);
}

.GuiWindowButton{
position:absolute;
width:128px;
height:128px;
cursor:pointer;
}
.GuiWindowButton:hover{
filter: brightness(130%);
}




/*

#GuiPagination400{
width:400px;
margin:auto;
}

#GuiPagination700{
width:700px;
margin:auto;
}

#GuiPagination900{
width:900px;
margin:auto;
}
#GuiPagination1100{
width:1100px;
margin:auto;
}
#GuiPagination1300{
width:1300px;
margin:auto;
}



/**************************************************** GUI ***************************************************/

/*
#GuiCornerTopLeft{
position:fixed;
top:0px;
left:0px;
z-index:100;
}
#GuiCornerTopRight{
position:fixed;
top:0px;
right:0px;
z-index:100;
}
#GuiCornerBotLeft{
position:fixed;
bottom:0px;
left:0px;
z-index:100;
}
#GuiCornerBotRight{
position:fixed;
bottom:0px;
right:0px;
z-index:100;
}

*/





/**************************************************** TOOLTIP **************************************************/

/*
.WdrTooltipBox{
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.WdrAnchor{
position: absolute;
width:0px;
height:0px;
}
.WdrTooltipPanel{
position: absolute;
visibility: hidden;
background-color: #ccc;
border-radius: 6px;
padding: 6px;
z-index:999;
overflow:hidden;
color:black;
text-align:left;
}
.WdrTooltipBox:hover .WdrTooltipPanel {
visibility: visible;
}



.tpframe{
position:relative;
}
.tpclickarea {
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.tpclickarea .tptext {
visibility: hidden;
background-color: grey;
border-radius: 6px;
padding: 4px;
position: absolute;
z-index:999;
overflow:hidden;
}
.tpclickarea:hover .tptext {
visibility: visible;
}

*/