/* Външен CSS, който стилизира страницата, съдържаща iframe-а */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Задължително: html и body трябва да заемат целия екран */
    width: 100%;
    overflow: hidden; /* Предотвратява появата на скрол барове */
}

body {
	background-image: url("../icons/compass.png");
	background-repeat: repeat;
	font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
#main-container {
    display: flex; /* Активира Flexbox */
    flex-direction: column; /* Вертикално подреждане */
    height: 100vh; /* Контейнерът заема цялата височина на екрана */
    width: 100%;
}

#top-header {
    /* Този елемент заема само толкова място, колкото е необходимо (напр. 150px) */
    flex-shrink: 0; /* Не му позволяваме да се свива */
    padding: 10px;
    background-color: #f0f0f0;
    /* Задайте му височина, която да съответства на 25% от екрана */
    /* Ако искате 25% от екрана за надписите: */
    height: 25vh;
}
#map {
    height: 100%; /* Ключово: 100% от body на map.html */
    width: 100%;
    z-index: 1;
}
#myIframe {
    /* Този елемент заема останалото свободно място (100vh - 25vh = 75vh) */
    flex-grow: 1; /* Позволява му да заеме цялото останало пространство */
    width: 100%;
    border: none;
	display: block;
}

/* ------------------------------------------- */
/* Адаптация за Мобилни устройства (max-width: 600px) */
/* ------------------------------------------- */
@media (max-width: 600px) {
    #myIframe {
        /* Увеличаваме височината на картата на мобилен екран, 
           за да оставим по-малко място за надписите, които обикновено
           са по-малко важни или се скриват в меню. */
        height: 90vh; /* Картата заема 90% от височината на изгледа */
    }
    
    /* Допълнителни корекции: Ако навигацията над iframe-а е проблем, 
       може да се наложи да скриете или намалите размера ѝ тук. */
    .main-navigation-header {
        height: auto; /* Позволява на хедъра да се свие */
        font-size: 0.9em;
    }
}


h1 {
	-webkit-text-stroke: 2px black;
	text-shadow: 0 0 2px black;
	color: red;
	font-size: 70px;
	text-align: center;
	line-height: normal;
}

h2 {
        -webkit-text-stroke: 1px black;
        text-shadow: 0 0 1px black;
	color: red;
	font-size: 30px;
	text-align: center;
	line-height: normal;
}

nav {
/* 	margin: 100px auto; 
	text-align: center;
*/
	position: absolute;
}

nav ul {
/*	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
*/	list-style: none;
	position: absolute;
	display: inline-table;
}

nav ul:after {
	content: ""; clear: both; display: block;
}

nav ul li {
	float: left;
	margin-left:10px;
}

nav ul li:hover {
/*	background: #4b545f;
	background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
*/}

nav ul li:hover > ul {
	display: block;
/* 	ширина на падащото меню */
	width:150px;
/*	margin-left:10px;
*/}

nav ul li:hover a {
/*	color: #fff;
*/}
		
nav ul li a {
	display: block;
	text-decoration: none;
/*	padding: 25px 40px;
	color: #757575;
*/}


nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
/*	background: #5f6975;
	border-radius: 0px; padding: 0;
*/}

nav ul ul li {
	float: none; 
	position: relative;
/*	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
*/}

nav ul ul li a {
	padding: 5px 5px 5px 5px;
/*	padding: 15px 40px;
	color: #fff;
*/}	

nav ul ul li a:hover {
/* 	цвят на посочения линк */
	color: green;
/*	background: #4b545f;
*/}
		
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

nav ul li ul li a {
	color: red;
	text-align: left;
}