/* Alapbeállítások */
body {
	font-size: 15px;
    margin: 0;
    padding: 0;
    font-family:  "PT Serif", serif;
	color: #ccba5d;
    background-color: #fbf1d4; /* Világosszürke háttér a teljes oldalnak, a konténer kiemeléséhez */
    display: flex;
    justify-content: center; /* A konténer középre igazítása */
}

.feher-hatter {
    background-color: white; /* Fehér háttér */
    color: #333; /* Sötét szöveg a fehér háttéren */
    border: 1px solid #ddd; /* Világosszürke szegély a fehéreknél */
}


@media screen and (max-width: 1000px) {
	.mainNav {
		text-align: center;
	}
	.OMCE_nev
	{
	font-size: 20px;color:#ccba5d;text-align:center
	}
	.hir_kep {
	   width: 100%;
	}
	.kontener,
	.fejlec,
	.kozep_resz {
        width: 100%;
	}
	
	
	.kepcsik
	{
		width: 100%;
	}
	.kep_csikban
	{
		padding:3px;width: 99%;
	}
	
	.fejlec_bal
	{
		display:none;
	}

	.fejlec_kozep
	{
		width: 100%;height: 50px;
	}

	.fejlec_jobb
	{
		display:none;
	}


	.bal
	{
		width: 100%;
	}
	.kozep
	{
		padding:5px; width: 100%;
	}
	.jobb
	{
		display:none;
	}

}

@media screen and (min-width: 1000px) {
	.OMCE_nev
	{
	font-size: 39px;color:#ccba5d;text-align:center
	}
	.kontener {
    width: 1000px; /* A fő div 1000 pixel széles */
}
	.hir_kep {
	   width: 100%;
	}
	/* A KÉP, AMIT A SZÖVEG KÖRBEÖLEL */
	.hir-kep-float {
    float: left;        /* Ez a kulcs a körbeöleléshez */
    margin-right: 15px; /* Térköz a kép és a szöveg között jobbra */
    margin-bottom: 10px; /* Térköz a kép alatt */
    max-width: 250px;   /* Maximális szélesség a képnek */
    height: auto;
    border: 1px solid #ccc;
    
	
	}

	
	/* Sorok, amelyekben egymás mellett vannak a div-ek */
	.fejlec,
	.kozep_resz {
    display: flex; /* Flexbox használata az egymás melletti elrendezéshez */
    width: 1000px;
	}
	.kepcsik
	{
		width: 1000px;
		border: 3px solid #997b33;
		border-radius: 3px;
		margin-top: -3px;
		
	}
	.kep_csikban
	{
		padding:3px;width: 993px;
		padding-top: 4px;
		padding-bottom: 0px;
	}

	.fejlec_bal
	{
		width: 250px;
	}

	.fejlec_kozep
	{
		width: 500px;
		border: 3px solid #997b33;
		border-radius: 3px;
		border-bottom: none;
	}

	.fejlec_jobb
	{
		width: 250px;
	}


	.bal
	{
		width: 250px;min-height: 500px;
	}
	.kozep
	{
		padding:5px; width: 500px;min-height: 500px;
		border: 3px solid #997b33;
		border-radius: 3px;
		border-top:none;
		margin-top: -3px;
	}
	.jobb
	{
		width: 250px;min-height: 500px;
	}
}








.lablec {
    height: 100px; /* Megadok egy alapértelmezett magasságot a láblécnek */
    text-align: center;
    line-height: 70px; /* Középre igazítja a szöveget vertikálisan */
}





.oldalcim
{
	padding-bottom: 14px;
    display: block;
    font-size: large;
}

.cim
{
	padding-bottom: 5px;
    display: block;
    font-size: large;
}
.datum
{
	padding-bottom: 5px;
    display: block;
    font-size: 12px;
}
.link
{
	padding-bottom: 20px;
    display: block;
    font-size: 14px;
}





/* Általános div stílusok */
.div-negyed,
.div-fel,
.lablec {
    background-color: #fbf1d4; /* Barna háttér (SaddleBrown) az alapértelmezett, kivéve a fehéreket */
    box-sizing: border-box; /* A padding és border beleszámít a szélességbe/magasságba */
    padding: 15px;
    
}


.hir-bejegyzés {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

/* CÍM_HU: nagybetűs, nagy méretű */
.hir-cim {
    font-size: 15px; /* Nagy betűméret */
    color: #333;
    margin-bottom: 5px;
    text-transform: uppercase; /* Bár a PHP-ban is nagybetűsítve lett */
}

/* MIKOR: kicsi betűméret */
.hir-datum {
    font-size: 0.8em; /* Kicsi betűméret */
    color: #666;
    margin-bottom: 15px;
    display: block; /* Biztosítja, hogy új sorban legyen */
}


/* A szöveg körbefolyik, mivel a kép "lebeg" (float: left) */
.hir-tartalom {
    overflow: auto; /* Ez is segíthet a float megfelelő kezelésében */
}

.hir-szoveg {
    /* A html_hu tartalma */
    line-height: 1.6;
    text-align: justify;
}


/* KÉP KICSINYÍTVE */
.hir-kep-float.kep-kicsinyitve {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    width: 200px; /* Fix szélesség: 200px */
    height: auto; /* Magasság arányos */
    border: 1px solid #ccc;
    padding: 3px;
    cursor: pointer; /* Jelezzük, hogy kattintható */
    transition: transform 0.2s; /* Animáció a hoverre */
}

.hir-kep-float.kep-kicsinyitve:hover {
    transform: scale(1.02); /* Kicsit nagyobb lesz hoverre */
}

/* -------------------- MODAL (LEBEGŐ ABLAK) STÍLUSAI -------------------- */
.modal {
    display: none; /* Alapértelmezetten rejtett */
    position: fixed; /* Fix pozíció a képernyőn */
    z-index: 1000; /* Legfelül legyen */
    padding-top: 50px; /* Hely a bezáró gombnak */
    left: 0;
    top: 0;
    width: 100%; /* Teljes szélesség */
    height: 100%; /* Teljes magasság */
    overflow: auto; /* Görgessen, ha a kép túl nagy */
    background-color: rgba(0,0,0,0.9); /* Sötét, áttetsző háttér */
}

/* A modal tartalmának (a kép) stílusa */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Max szélesség a képernyő 90%-a */
    max-height: 80vh; /* Max magasság a viewport magasság 80%-a */
    object-fit: contain; /* Tartsa meg az arányokat és férjen bele */
}

/* A bezáró gomb stílusa */
.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

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

/* KÉPALÁÍRÁS (OPCIONÁLIS) */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.kottatar-kontener {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #eee;
}

/* Kereső stílusa */
.kereso-form {
    display: flex;
    margin-bottom: 25px;
}

.kereso-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
}

.kereso-gomb {
    padding: 10px 15px;
    background-color: #997b33;
    color: white;
    border: none;
    cursor: pointer;
}

/* Lista elem stílusa */
.kottatar-elem {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    transition: background-color 0.3s;
}

.kottatar-elem:hover {
    background-color: #f0deac; /* Kiemelés, ha rámutatnak */
}

.fajl-link {
    display: block; /* Hogy az egész blokk kattintható legyen */
    text-decoration: none;
    color: inherit;
    padding: 15px;
}

/* CÍM: NAGY BETŰVEL */
.elem-cim {
    font-size: 1.5em;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* SZÖVEG: CÍM ALATT KICSIVEL */
.elem-szoveg {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}

.megnyitas-jelzo {
    display: block;
    font-size: 0.8em;
    color: #007bff;
    font-weight: bold;
    border-top: 1px dashed #ccc;
    padding-top: 5px;
}

.mainNav2 { height: auto; min-height: 21px; padding-bottom: 3px; }

.mainNav {
    display: block;
    text-decoration: none;
    color: #015033;
    font-size: 15px;
    height: 21px;
    background-color: #f0deac;
    line-height: 16px;
    border-radius: 3px;
    margin-bottom: -6px;
    padding-left: 12px;
    padding-top: 6px;
 }
 .mainNav:hover{
	 background-color: #997b33;
	 color: #fffefc;
}

.kereso-form {
    display: flex;
    gap: 10px; /* Térköz a mezők között */
    margin-bottom: 25px;
}
.kereso-input {
    flex-grow: 1;
    padding: 8px;
    /* ... */
}
.kereso-gomb, .kereses-torles {
    padding: 8px 12px;
    white-space: nowrap; /* Ne törjön sort */
    /* ... */
}
.kereses-torles {
    text-decoration: none;
    background-color: #f4f4f4;
    color: #666;
    border: 1px solid #ccc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.4);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}