:root{
    --vilagos: #abcabc;
    --vilagosabb: #55dd55;
    --megvilagosabb: #77ff77;
    --sotet: #678678;
    --background: #234234;
    --fontcolor: #66ff66;
    --mezo: 33px;
    --cim: 30px;
    --keret: calc( ( 100vh - 200px ) * 0.027 ) !important;
    --betuk: calc( ( 100vh - 200px ) * 0.023 );
}
@font-face {
  font-family: panpizza;
  src: url(panpizza.ttf);
}
body
{
	background-color: var(--background);
	color: var(--fontcolor);
	margin: 10px auto;
	font-family: 'Verdana', 'sans-serife';
	font-size: 12px;
}
ul, li
{
    color: black;
    text-align: left;
    background-color: #346745;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 5px;
}
li img
{
    margin-bottom: -2px;
}
#menu
{
    width: 180px;
}
#usr_menu
{
    width: 120px;
}
#menu, #usr_menu
{
    text-align: center;
    padding: 1px 4px;
    height: 20px;
    border-bottom: 4px solid #ffff66;
    background-color: #346745;
}
#login_reg_form table
{
    min-width: 312px;
}
li p
{
    margin: 0;
}
ul span
{
    position: relative;
    top: 4px;
}
li
{
    position: relative;
    top: 8px;
}
li:hover
{
    background-color: #ffff66;
}
ul:hover li, ul>li:hover li
{
    visibility: visible;
}
ul li, li ul
{
    visibility: hidden;
}
#head, #foot
{
	padding: 5px;
	text-align: left;
}
#head, #foot, #page, #sakkos
{
    margin-left: calc( ( 75vw - var(--keret) * 31 ) / 2 );
    margin-right: calc( ( 75vw - var(--keret) * 31 ) / 2 );
}
#sakkos table, #head table, #page table
{
    margin: auto;
}
#head_img
{
	background-image: url('img/na/sh.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#head_img:hover
{
	background-image: url('img/sakkkos3.png');
}
#tabla
{
    min-width: calc( var(--keret) * 31 );
}
#tabla td
{
    width: var(--keret);
    height: var(--keret);
    font-size: var(--betuk);
}
#babok img, .eloleptet img
{
    width: 6vh;
}
.button
{
    min-width: 60px;
    max-width: 10vw;
    text-align: center;
    padding: 1px 4px;
    height: 20px;
    border-top: 1px solid #ffff66;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid #ffff66;
    background-color: #346745;
}
option:hover
{
    background-color: #346745;
    color: var(--font);
}
form td
{
    height: 2.2em;
}
#head form td
{
    height: 1em;
    text-align: left;
}
.button:hover, .mezo, .babok, #reg_load, #back, #logout_button, #login_button, #login_min_button, ul
{
    cursor: pointer;
}
.sec
{
    font-size: smaller;
}
.eloleptet
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}#sotettisztek div
{
    position: absolute;
    left: 30vh;
    top: 60vh;
}
#vilagostisztek div
{
    position: absolute;
    left: 30vh;
    top: 5vh;
}
#babok
{
    position: absolute;
    left: 10px;
    top: 10px;
}
.babok
{
	border: 2px solid;
	border-color: #666666;
	margin: 1.5px;
	background: #666666;
}
.mezo
{
	border:2px solid;
	padding:0;
	background-image: url('img/pieces4/ures.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hmezo
{
    width: var(--mezo);
    height: var(--mezo);
	font-size: var(--cim);
	border:2px solid;
	padding:0;
	text-align: center;
	font-family: panpizza;
    color: black;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hmezo:hover
{
	color: var(--font);
}
.vilagos
{
	border-color: var(--vilagos);
	background-color: var(--vilagos);
}
.sotet
{
	border-color: var(--sotet);
	background-color: var(--sotet);
}
.aktualis
{
	border-color: green;
}
.sotetlehetoseg
{
	border-color: var(--vilagosabb);
	background-color: var(--vilagosabb);
}
.vilagoslehetoseg
{
	border-color: var(--megvilagosabb);
	background-color: var(--megvilagosabb);
}
.sor, .vonal
{
	text-align: center;
}
#console
{
	padding: 5px;
	font-size: calc( 8px + 1.5vh ) !important;
	color: yellow;
}
@media only screen and (max-height: 600px)
{
    #sakkos
    {
        visibility: collapse;
    }
    #tabla td
    {
        width: 10px;
        height: 10px;
        font-size: 8px;
    }
    #tabla
    {
        min-width: 312px;
    }
    #head, #foot, #page
    {
        margin-left: calc( ( 75vw - 312px ) / 2 );
        margin-right: calc( ( 75vw - 312px ) / 2 );
    }
}
/*
@media only screen and (orientation: landscape) and (min-aspect-ratio: 12/7)
{
    #page, #head, #foot
    {
        position: absolute;
        width: 80vh;
    }
    #page
    {
        left: calc( ( 100vw - 170vh ) / 2 );
        right: auto;
    }
    #head, #foot
    {
        right: calc( ( 100vw - 170vh ) / 2 );
        left: auto;
    }
    #foot
    {
        top: 200px;
    }
}
@media only screen and (orientation: landscape) and (max-aspect-ratio: 12/7), (orientation: portrait) and ( min-aspect-ratio: 9/10 )
{
    #page, #head, #foot
    {
        position: absolute;
        left: calc( 30vw - 100px );
        width: 80vw;
    }
    #page
    {
        top: 18vh;
    }
    #menu
    {
        width: 140px !important;
        max-width: 140px !important;
    }
}
@media only screen and (orientation: portrait) and ( max-aspect-ratio: 9/10 )
{
    #sotettisztek div
    {
        left: 30vw;
        top: 120vw;
    }
    #vilagostisztek div
    {
        left: 30vw;
        top: 45vw;
    }
    #tabla td
    {
        width: 3vw;
        height: 3vw;
        font-size: 2vw;
    }
    .hmezo
    {
        width: 9vw;
        height: 9vw;
    	font-size: 7vw;
    }
    #babok img, .eloleptet img
    {
        width: 9vw;
    }
    #page, #head, #foot
    {
        position: absolute;
        left: auto;
        right: auto;
        width: calc( 100% - 20px );
    }
}*/