* {
    box-sizing: border-box;
}

body {
	background-image: url(images/tilePergamin.jpg);
	background-repeat: repeat;
}

/* Górny pasek */
.top-frame {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
    height: 50px;

    background-image: url("images/tileScarlet.jpg");
    background-repeat: repeat-x;

    z-index: 20;
}

/* Lewy pasek */
.left-frame {
    position: fixed;
    top: 50;
    left: 0;
    width: 202px;
    height: calc(100vh - 40px);

    background-image: url("images/BackgroundLeftColumn.png");
    background-repeat: repeat-y;

	overflow-y: auto;
    overflow-x: hidden;
	
	padding-bottom: 50px;
	
    z-index: 30;
}

/* Główna treść */
.content {
    margin-left: 202px;
    margin-top: 50px;
    padding: 20px;

    min-height: calc(100vh - 40px);
}

/* Przykładowe style menu */
.left-frame nav ul {
    list-style: none;
    margin: 50px 0 0 0;
    padding: 0;
}

.left-frame nav li {
    margin: 0;
    padding: 0;
}

.left-frame nav a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}

.left-frame nav a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Przykładowy styl nagłówka */
.top-frame h1 {
    margin: 0;
    padding: 8px 15px;
    font-size: 20px;
    color: white;
}

.styleRed12 {
	font-family: "Bookman Old Style";
	font-weight: bold;
	font-style: italic;
	font-size: 12px;
	color: #7c1e1c;

   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleRed20 {
	font-family: "Bookman Old Style";
	font-weight: bold;
	font-style: italic;
	font-size: 20px;
	color: #7c1e1c;

   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleTitle20 {
	font-family: "Calibri";
	font-weight: bold;
	font-size: 20px;
	color: #000000;
	text-align: center;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleBlack18 {
	font-size: 18px;
	color: #000000;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleDown14JustifyLeft {
	font-size: 14px;
	color: #000000;
	text-align: justify;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleTableNarrow {
	font-family: "Arial Narrow";
	font-size: 14px;
	color: #000000;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleTableNarrowGreen {
	font-family: "Arial Narrow";
	font-size: 14px;
	color: #056F05;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}
.styleTableNarrowBlue {
	font-family: "Arial Narrow";
	font-size: 14px;
	color: #0000CC;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Starsze wersje Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera i Firefox */
}


.left-button {
    display: block;
    width: 145px;
    height: 78px;

    margin-left: 26px;
    margin-right: auto;
    margin-top: 20px;

    text-indent: -9999px;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 145px 78px;
}

.o-mnie-button {background-image: url("buttons/buttonOMnieBlack.png");}
.o-mnie-button:hover {background-image: url("buttons/buttonOMnieRed.png");}

.drzewa-rodowe-button {background-image: url("buttons/buttonDrzewaRodoweBlack.png");}
.drzewa-rodowe-button:hover {background-image: url("buttons/buttonDrzewaRodoweRed.png");}

.dna-button {background-image: url("buttons/buttonDNABlack.png");}
.dna-button:hover {background-image: url("buttons/buttonDNARed.png");}

.geneza-nazwiska-button {background-image: url("buttons/buttonGenezaNazwiskaBlack.png");}
.geneza-nazwiska-button:hover {background-image: url("buttons/buttonGenezaNazwiskaRed.png");}

.gniazda-rodowe-button {background-image: url("buttons/buttonGniazdaRodoweBlack.png");}
.gniazda-rodowe-button:hover {background-image: url("buttons/buttonGniazdaRodoweRed.png");}

.geneza-herbu-button {background-image: url("buttons/buttonGenezaHerbuBlack.png");}
.geneza-herbu-button:hover {background-image: url("buttons/buttonGenezaHerbuRed.png");}

.biografie-button {background-image: url("buttons/buttonBiografieBlack.png");}
.biografie-button:hover {background-image: url("buttons/buttonBiografieRed.png");}

.dwory-i-palace-button {background-image: url("buttons/buttonDworySzlacheckieBlack.png");}
.dwory-i-palace-button:hover {background-image: url("buttons/buttonDworySzlacheckieRed.png");}

.mapy-button {background-image: url("buttons/buttonMapyBlack.png");}
.mapy-button:hover {background-image: url("buttons/buttonMapyRed.png");}

.miejsca-spoczynku-button {background-image: url("buttons/buttonMiejscaSpoczynkuBlack.png");}
.miejsca-spoczynku-button:hover {background-image: url("buttons/buttonMiejscaSpoczynkuRed.png");}

.varia-button {background-image: url("buttons/buttonVariaBlack.png");}
.varia-button:hover {background-image: url("buttons/buttonVariaRed.png");}

.kontakt-ze-mna-button {background-image: url("buttons/buttonKontaktZeMnaBlack.png");}
.kontakt-ze-mna-button:hover {background-image: url("buttons/buttonKontaktZeMnaRed.png");}


.left-button2 {
    display: block;
    width: 67px;
    height: 38px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;

    text-indent: -9999px;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 67px 38px;
}

.pl-button {background-image: url("buttons/buttonPLBlack.png");}
.pl-button:hover {background-image: url("buttons/buttonPLRed.png");}

.usa-button {background-image: url("buttons/buttonUSABlack.png");}
.usa-button:hover {background-image: url("buttons/buttonUSARed.png");}
 		 
.ua-button {background-image: url("buttons/buttonUABlack.png");}
.ua-button:hover {background-image: url("buttons/buttonUARed.png");}

.fr-button {background-image: url("buttons/buttonFRBlack.png");}
.fr-button:hover {background-image: url("buttons/buttonFRRed.png");}

.de-button {background-image: url("buttons/buttonDEBlack.png");}
.de-button:hover {background-image: url("buttons/buttonDERed.png");}

.ru-button {background-image: url("buttons/buttonRUBlack.png");}
.ru-button:hover {background-image: url("buttons/buttonRURed.png");}