body{
margin:0;
padding:0;
font-family: Verdana, sans-serif;
background-color: #fff;
}

#panel {

width:215px;
position:absolute;
font-weight: bold;
font-size: 8pt;
margin-left:785px;
background-color:#e1e6e9;
width: auto;
height:auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
z-index:6;
margin-top: 4px;
border-radius: 0px 0px 3px 3px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
border-bottom: 1px solid #f8f9fa;
border-top: 1px solid #e5eaeb;
}
#panel a {
margin-bottom:9px;
color: #000;
float:left;
text-decoration:none;
padding-left: 3px;

}

#panel a:hover {

color:#ff5400;

}


#bg {
background-image:url(images/header_bg.jpg);
height: 183px;
background-repeat: repeat-x;
position:relative;
width: auto;

}


#logo {
background-image:url(images/logo.png);
width: 367px;
height: 70px;
background-repeat:no-repeat;
float:left;
margin-top: 26px;
margin-left:15px;

}

#programek_layer {
background-image:url(images/programek_bg.png);
background-repeat:no-repeat;
width: 584px;
height: 183px;
margin-left:350px;
position:absolute;
z-index: 0;





}


#header {
width: 1000px;
margin: 0 auto;
padding: 0;


}

#menu {
width: 1000px;
height:39px;
z-index: 2;
position: absolute;
margin-top: 120px;
overflow: hidden;






}






#menu .atext a {
background-image:url(images/menu_bg.png);
height:39px;
background-repeat:repeat-x;
float:left;
font-size: 14px;
padding-left:16px;
padding-right:16px;
color: #fff;
padding-top: 9.5px;
text-decoration: none;
text-shadow: 1px 1px 0px #c8430a;
border-radius: 5px 5px 0px 0px;
margin-right: 1px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
filter: dropshadow(color=#c8430a,offX=1,offY=1);


}





#menu .atext a:hover {
background-image:url(images/menu_hoverbg.png);
height:39px;
background-repeat:repeat-x;
float:left;
font-size: 14px;
color: #000;
padding-top: 9.5px;
text-decoration: none;
text-shadow: 1px 1px 0px #ffed45;
filter: dropshadow(color=#ffed45,offX=1,offY=1);
font-weight: bold;

}








#links {
padding-top: 5px;
font-size: 10pt;
clear:both;
padding-left:15px;
position: absolute;
margin-top: 158px;
z-index: 3;
overflow: hidden;
width: 1000px;




}

#links a {


padding-right:25px;
text-decoration: none;
color: #000;


}

#links a:hover {


text-decoration: underline;
color: #000;


}

#content {
margin: 0 auto;
width: 1000px;
overflow:hidden;
margin-top:5px;
}

#menuleft {
width: 222px;
float:left;
margin-right: 7px;
}

#news {
width: 531px;
float:left;
background-color:#fff;
border: 1px solid #3c3c3c;
}

#program {
width: 530px;
border: 1px solid #ffaf00;
word-wrap:break-word;
position:relative;
z-index: 5;
background-color: #fff;
border-radius: 5px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
float:left;
}


#program .header {
font-family:tahoma;
font-size:14px;
font-weight: bold;
padding: 5px;
}

#program .description {

width:280px;
padding:10px;
font-size: 12px;
font-family:tahoma;
text-align:left;
float:left;

}

#program .right {

float:left;
font-size: 20px;
overflow:hidden;
padding-top:10px;
width:211px;
padding-bottom:10px;
}

#program .data {

background-color:#eef9fb;
border: 1px solid #c8f2fc;
padding:3px;
margin-top:5px;
font-family:tahoma;
font-size:12px;
}


#news .programname_header {
background-image:url(images/programname_header.png);
width: 530px;
height: 29px;
background-repeat: no-repeat;
position:relative;
z-index: 5;
}











#menuright {
width: 222px;
float:left;
margin-left: 7px;
position:relative;
z-index:3;
}
#menu_navi  {
background-color:#ffba3e;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:3px;
height:auto;


}

#menu_navi .link {
padding-top: 7px;
}

#menu_navi .link a  {
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
color: #000;
font-weight: bold;
padding-left:35px;
text-decoration:none;
width:100%;
font-family:tahoma;
float:left;
}

#menu_navi .link a:hover  {
background-color: #fd7200;
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
color: #fff;
font-weight: bold;
text-decoration:none;
background-image:url(images/arrow.png);
background-repeat:no-repeat;
background-position: 5px;
width:100%;
padding-left:35px;
float:left;
width:186px;
}

#menu_navi .header {
background-image:url(images/header_navi.png);
width:222px;
height:43px;
background-repeat:no-repeat;
background-color:#fff;

}

.header .text {
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 0px #fdde9e;
padding-left: 37px;
padding-top: 11px;
font-family: tahoma;
}




#headerstat  {
background-color:#fff;
border-right: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:3px;
height:auto;
background-image:url(images/bg_stats.png);
background-repeat:no-repeat;
background-position: 0px 35px;


}
#headerstat ul, ul li {
list-style-type: none;
padding-left:10px;
}

#headerstat li {
line-height: 18px;
}

#headerstat p {
padding-left:10px;
}

#headerstat .content {
font-family:tahoma;
font-size: 12px;
padding-top:40px;
padding-bottom:5px;
border-left:1px solid #eaeaea;
}

#headerstat .content b {
color: #0c7fb6;
}

#headerstat .headerstat {
background-image:url(images/header_stats.png);
width:222px;
height:38px;
background-repeat:no-repeat;
background-color:#fff;
float:left;


}

#headerstat .content b a {
color: #000;
text-decoration: none;
}

#headerstat .facebook {
text-align:center;


}




.textstat {
font-weight: bold;
font-size: 14px;
padding-left: 37px;
padding-top: 10px;
font-family: tahoma;

}



#headerhelp  {
background-image:url(images/help_bg.png);
border-right:1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:5px;
height:275px;
background-repeat:no-repeat;
background-position: 0px 35px;
background-color: #fff;


}
#headerhelp .rss a {
color: #000;
text-decoration: none;
padding-left:5px;
padding-bottom:3px;
background-image:url(images/rss.png);
background-position: 0px 0px 15px;
background-repeat:no-repeat;
padding-left:25px;
color: #000;
}

#headerhelp a:hover {
color: #000;
text-decoration: underline;
}

#headerhelp .content {
font-family:tahoma;
font-size: 12px;
padding-top:40px;
padding-bottom:5px;
padding-left: 10px;
padding-top: 50px;
padding-right:10px;
}

#headerhelp .headerhelp {

background-image:url(images/header_help.png);
width:222px;
height:38px;
background-repeat:no-repeat;
background-color:#fff;
float:left;
border: 0px;



}




.texthelp {
font-weight: bold;
font-size: 14px;
padding-left: 37px;
padding-top: 10px;
font-family: tahoma;
}




#headerhelp .input  {

border: 1px solid #dadada;
font-family: tahoma;
font-size: 12px;
padding: 5px;
color: #b1b1b1;
float:left;
}


#headerhelp .submit  {

width: 26px;
height: 26px;
background-repeat: no-repeat;
background-image:url(images/submit.png);
border: 0px;
float:left;
}

#headerhelp ul, ul li {
list-style-type: none;
padding-left:10px;
}

#headerhelp li {
line-height: 18px;
font-size: 12px;
}






















#headersponsor  {
background-image:url(images/bg_stats.png);
border-right: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;

float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:3px;
height:auto;
background-repeat:no-repeat;
overflow:hidden;
background-position: 0px 35px;
background-color: #fff;


}

#headersponsor .content {
font-family:tahoma;
font-size: 12px;
padding-top:35px;
padding-bottom:5px;
padding-left: 10px;
padding-right:10px;


}

#headersponsor .headersponsor {
background-image:url(images/header_help.png);
width:222px;
height:38px;
background-repeat:no-repeat;
background-color:#fff;
float:left;



}


.textsponsor {
font-weight: bold;
font-size: 14px;
padding-left: 10px;
padding-top: 10px;
font-family: tahoma;

}




#headersponsor .banner {
padding-left:17px;
padding-top:50px;
padding-bottom:10px;
border-left: 1px solid #eaeaea;


}
































#boxr  {
background-image:url(images/bg_stats.png);
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:3px;
height:auto;
background-repeat:no-repeat;
overflow:hidden;
background-position: 0px 35px;
background-color: #fff;


}

#boxr .content {
font-family:tahoma;
font-size: 12px;
padding-top:40px;
padding-bottom:5px;
padding-left: 10px;
padding-top: 50px;
padding-right:10px;
border-left: 1px solid #eaeaea;
}

#boxr .boxr {

background-image:url(images/header_help.png);
width:222px;
height:38px;
background-repeat:no-repeat;
background-color:#fff;
float:left;




}


.textboxr {
font-weight: bold;
font-size: 14px;
padding-left: 10px;
padding-top: 10px;
font-family: tahoma;
}

#boxr .linkforum {
padding-bottom: 5px;
}

#boxr .tags {
line-height: 17px;
}











#boxr2  {
background-image:url(images/bg_stats.png);
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
float:left;
width:221px;
word-wrap: break-word;
border-radius: 0px 0px 3px 3px;
margin-bottom:5px;
height:auto;
background-repeat:no-repeat;
overflow:hidden;
background-position: 0px 35px;
background-color: #fff;


}

#boxr2 .content {
font-family:tahoma;
font-size: 12px;
padding-top:40px;
padding-bottom:5px;
padding-left: 10px;
padding-right:10px;
border-left:1px solid #eaeaea;
}

#boxr2 .boxr2 {
background-image:url(images/most_downloaded.png);
width:222px;
height:36px;
background-repeat:no-repeat;
float:left;
border-bottom:1px solid #eaeaea;



}

.textboxr2 {
font-weight: bold;
font-size: 14px;
padding-left: 45px;
padding-top: 10px;
font-family: tahoma;
color: #fff;
text-shadow: 1px 1px 0px #a52413;
border-radius: 5px 5px 0px 0px;
filter: dropshadow(color=#a52413,offX=1,offY=1);


}

#boxr2 .link a {

font-size: 12px;
font-weight: bold;
color: #000;
text-decoration:none;
line-height: 15px;



}

#boxr2 .link a:hover {

font-size: 12px;
font-weight: bold;
color: #000;
text-decoration:underline;



}

#boxr2 .link a b{

font-size: 12px;
font-weight: bold;
color: #ff6b26;
text-decoration:none;




}

#bottomboxlinks {
background-image:url(images/bottom_box.png);
width:1200px;
height: 144px;
background-repeat:no-repeat;
margin: 0 auto;
padding:0;
}

#bottomboxlinks .copyright{
font-size: 10px;
font-family: tahoma;
color: #fff;
clear:both;
padding-top: 20px;
margin: 0 auto;
padding-left: 80px;
}


#bottomboxlinks .menu {

float:left;
padding-top:45px;
}


#bottombox {

background-image:url(images/bg_bottom.png);
height:144px;
background-repeat:repeat-x;
}


.menu .link1 a {

font-family: tahoma;
font-size: 10px;
color: #fff;
text-decoration:none;
padding-left:110px;

}

.menu .link2 a {

font-family: tahoma;
font-size: 10px;
color: #fff;
text-decoration:none;
padding-left:68px;

}

.menu .link3 a {

font-family: tahoma;
font-size: 10px;
color: #fff;
text-decoration:none;
padding-left:103px;

}



u {

color:#ffea00;
text-decoration:none;
}

#bottombox .advert {
width: 504px;
height: 68px;
background-repeat:no-repeat;
padding-left:590px;
padding-top:25px;
}


#partners_bg {

background-image:url(images/bg_partners.png);
height:74px;
background-repeat:repeat-x;
width: auto;

}

#partners {
width: 1200px;
margin: 0 auto;
overflow:hidden;
}

#partners .text {

font-family:tahoma;
font-size: 11px;
color: #3c3c3c;
text-align:center;
padding-top:15px;

}

#partners .img {

padding-right:15px;

}

.partnerstext {
padding-top:15px;
padding-left:10px;
float:left;
}


#news2 {
width: 531px;
float:left;
background-color:#fff;
border: 1px solid #cbf0f6;
background-color:#eff9fa;
border-radius: 5px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
position:relative;
z-index:5;

}

#news2 .header1 {
background-image:url(images/news_header1.png);
background-repeat:no-repeat;
width:40px;
height:36px;
float:left;
}

#news2 .headerbg2 {
background-image:url(images/news_headerbg2.png);
width:451px;
height: 36px;
background-repeat:repeat-x;
font-size: 16px;
color:#fff;
font-family:tahoma;
text-shadow: 1px 1px 0px #2387a1;
filter: dropshadow(color=#2387a1,offX=1,offY=1);
float:left;
padding-top:8px;
font-weight: bold;


}

#news2 .header3 {
background-image:url(images/news_header3.png);
background-repeat:no-repeat;
width:40px;
height:36px;
float:left;
}

#news2 .wiecej a {

border-radius: 3px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
background-color: #3ec3ee;
font-size: 11px;
font-weight: bold;
color:#002e3e;
padding-right: 10px;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
float:right;
text-decoration:none;
font-family: tahoma;
margin:5px;


}

#news2 .description {

color:#047aa0;
font-size: 11px;
font-family: tahoma;
float:left;
padding:5px;

}


#news3 {

width: 531px;
float:left;
border: 1px solid #e4e4e4;
background-color:#efefef;
border-radius: 5px;
/* behavior: url(PIE/PIE.htc); - plik nie istnial, usuniete */
position:relative;
z-index:5;
margin-bottom:2px;
margin-top:5px;
}

#news3 .header {

font-size: 15px;
color: #000;
font-family: tahoma;
background-color: #f6f6f6;
padding-left:31px;
padding-top:3px;
padding-bottom:3px;
background-image:url(images/article3.png);
background-repeat:no-repeat;
background-position: 1px;


}


#news3 .description {

color:#000;
font-size: 10px;
font-family: tahoma;
float:left;
padding-left:5px;


}



#centre {
width: 531px;
float:left;
}


#news3 .readallarticle {
background-image:url(images/readallarticle.png);
width:122px;
height:19px;
background-repeat:no-repeat;
float:right;
padding:0px;
margin-top:5px;
}


#google {

width: auto;
margin-top:35px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
font-size:12px;
background-color:#edece9;
padding-left:230px;
padding-top:50px;
padding-bottom:50px;
clear:both;

}

.download {
background-image:url(images/download.png);
width:171px;
height:37px;
background-repeat:no-repeat;
margin:5px;
border:0px;
float:left;

}

.comment {
background-image:url(images/comment.png);
width:131px;
height:37px;
background-repeat:no-repeat;
margin:5px;
border:0px;

}

/* =========================================================================
   POPRAWKI UKŁADU I RESPONSYWNOŚĆ
   Dopisane przy modernizacji. Reguły powyżej zostały nietknięte —
   wszystko, co poniżej, tylko je nadpisuje.
   ========================================================================= */

/* --- Zmienne: jedno miejsce na szerokości kolumn --------------------------- */
:root {
    --szer-strony: 1000px;
    --szer-boczna: 222px;
    --odstep-kolumn: 7px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* KLUCZOWE: #panel, #menu, #links i #programek_layer mają position:absolute.
   Bez position:relative na #header kotwiczyły się do #bg, który zajmuje całą
   szerokość okna — przez co na szerokich ekranach nagłówek „uciekał" w lewo
   względem wyśrodkowanego logo. */
#header { position: relative; }

#panel { margin-left: 0; right: 15px; left: auto; }

#bg, #partners_bg, #bottombox { overflow: hidden; }

#logo a {
    display: block; width: 100%; height: 100%;
    text-indent: -9999px; overflow: hidden;
}

/* --- Wyszukiwarka w nagłówku ---------------------------------------------- */
#szukajka { float: right; padding-right: 15px; }

#szukajka input[type="text"] {
    width: 190px; padding: 4px 8px;
    border: 1px solid #c9c9c9; border-radius: 3px;
    font-size: 12px; font-family: inherit;
}

#szukajka input[type="submit"] {
    padding: 4px 12px; cursor: pointer;
    border: 1px solid #c9c9c9; border-radius: 3px;
    background: #f4f6f8; font-family: inherit; font-size: 12px;
}

/* --- Formularze ------------------------------------------------------------ */
table.form { width: 100%; font-size: 12px; }
table.form td { padding: 4px 6px; vertical-align: top; }

table.form input[type="text"], table.form input[type="url"],
table.form input[type="email"], table.form input[type="password"],
table.form input:not([type]), table.form textarea, table.form select {
    width: 100%; max-width: 420px;
    padding: 4px; font-family: inherit; font-size: 12px;
}

table.form input[type="checkbox"], table.form input[type="radio"] { width: auto; }

/* --- Komunikat ------------------------------------------------------------- */
.komunikat {
    max-width: 700px; margin: 40px auto; padding: 20px;
    background: #fff; border: 1px solid #ffaf00; border-radius: 5px;
    font-family: tahoma, Verdana, sans-serif; font-size: 13px;
}

.reklama { margin: 10px 0; text-align: center; clear: both; }

/* --- Prawa kolumna: komunikat o pustym boksie ------------------------------ */
.pusty-boks {
    padding: 8px 10px; font-size: 11px; color: #667;
    line-height: 1.5; font-family: tahoma, Verdana, sans-serif;
}

.ocena {
    color: #fd7200; font-weight: bold; font-size: 11px;
}

/* --- Sponsor: logo KomputerPuls -------------------------------------------- */
#headersponsor .banner { text-align: center; padding: 10px 8px; }
#headersponsor .banner a { text-decoration: none; display: block; }

.logo-sponsora {
    max-width: 190px; width: 100%; height: auto; display: block; margin: 0 auto 6px;
}

.haslo-sponsora {
    display: block; font-size: 11px; color: #3c3c3c;
    font-family: tahoma, Verdana, sans-serif; line-height: 1.4;
}

#headersponsor .banner a:hover .haslo-sponsora { color: #fd7200; }

/* --- Pasek partnerów -------------------------------------------------------- */
#partners { width: 100%; max-width: var(--szer-strony); }

#partners .text {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 18px;
    padding: 12px 15px; text-align: left;
}

#partners .img {
    max-height: 40px; width: auto; padding-right: 0;
    vertical-align: middle; flex: 0 0 auto;
}

#partners a.partner { display: inline-flex; align-items: center; }
#partners a.partner:hover { opacity: .8; }

.partnerstext { padding: 0; float: none; font-weight: bold; flex: 0 0 auto; }

/* --- Nagłówek newsa: środkowy pasek rozciąga się, kapsle zostają ---------- */
#news2 .headerbg2 {
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#news2 .description { width: 100%; box-sizing: border-box; }

/* --- Stopka ---------------------------------------------------------------
   Nagłówki kolumn („NA SKRÓTY" itd.) są wtopione w grafikę tła o szerokości
   1200 px, a odstępy linków (padding-left 110/68/103 px) były dobrane pod nią.
   Poniżej 1240 px grafika przestałaby się pokrywać z tekstem, więc zamiast niej
   wstawiamy prawdziwe nagłówki tekstowe i układ na flexie.
   ------------------------------------------------------------------------- */
#bottomboxlinks {
    width: 100%;
    max-width: 1200px;
}

#bottombox .advert { display: none; }

@media (max-width: 1239px) {
    /* Tło stopki to pionowy pasek gradientu o wysokości 144 px. Przy wyższej
       stopce tafelkowanie w pionie powtarzało jaśniejszą kreskę w połowie
       treści. Rozciągamy gradient na całą wysokość zamiast go powielać. */
    #bottombox {
        height: auto;
        background-repeat: repeat-x;
        background-size: 2px 100%;
    }
    #bottomboxlinks {
        background-image: none;
        height: auto;
        padding: 22px 16px 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    #bottomboxlinks .menu {
        float: none;
        padding-top: 0;
        flex: 1 1 160px;
        min-width: 140px;
    }

    #bottomboxlinks .menu::before {
        display: block;
        margin-bottom: 8px;
        font-family: tahoma, Verdana, sans-serif;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        letter-spacing: .5px;
    }
    #bottomboxlinks .menu:nth-of-type(1)::before { content: "NA SKR\00D3TY"; }
    #bottomboxlinks .menu:nth-of-type(2)::before { content: "TWOJE MENU"; }
    #bottomboxlinks .menu:nth-of-type(3)::before { content: "PROGRAMEK.PL"; }

    /* odstępy dobrane pod grafikę przestają być potrzebne */
    .menu .link1 a, .menu .link2 a, .menu .link3 a {
        padding-left: 0;
        display: inline-block;
        padding-bottom: 3px;
    }

    #bottomboxlinks .copyright {
        flex: 1 1 100%;
        padding-left: 0;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .18);
        margin-top: 4px;
    }
}

/* --- Pasek partnerów: wysokość ma iść za treścią -------------------------- */
#partners_bg { height: auto; min-height: 74px; }


/* --- Przycisk pobierania (tło to grafika) ---------------------------------- */
.download {
    text-indent: -9999px; overflow: hidden; cursor: pointer;
    color: transparent; font-size: 0;
}

/* --- Karta programu --------------------------------------------------------- */
#program form { clear: both; }
#program .description, #program .right { box-sizing: border-box; }


/* =========================================================================
   BREAKPOINT 1: poniżej 1040px — układ przestaje mieścić się w oknie
   ========================================================================= */
@media (max-width: 1039px) {

    #bg { height: auto; padding-bottom: 8px; background-size: auto 100%; }

    #header { width: 100%; max-width: var(--szer-strony); padding: 0 12px; }

    /* Nagłówek przestaje być pozycjonowany absolutnie — elementy układają się
       jeden pod drugim, więc nic na siebie nie nachodzi. */
    #panel, #menu, #links, #programek_layer { position: static; }

    #programek_layer { display: none; }

    #panel {
        width: auto; margin: 0 0 6px; padding: 4px 10px;
        display: flex; justify-content: flex-end; gap: 10px; align-items: center;
    }
    #panel a { float: none; margin-bottom: 0; }

    #logo {
        float: none; margin: 10px auto; max-width: 100%;
        background-size: contain; background-position: center;
    }

    #menu {
        width: 100%; height: auto; margin-top: 10px;
        display: flex; flex-wrap: wrap; gap: 2px; overflow: visible;
    }
    #menu .link { flex: 0 0 auto; }
    #menu .atext a, #menu .atext a:hover {
        float: none; display: block; height: auto;
        padding: 9px 12px; font-size: 13px;
        border-radius: 4px 4px 0 0;
    }
    #menu .aleft, #menu .aright { display: none; }

    #links {
        width: 100%; margin-top: 10px; padding-left: 0;
        display: flex; justify-content: flex-end;
    }
    #szukajka { float: none; padding-right: 0; display: flex; gap: 6px; }
    #szukajka input[type="text"] { width: 220px; }

    /* Treść: dwie kolumny — nawigacja + treść, prawa kolumna schodzi pod spód */
    #content {
        width: 100%; max-width: var(--szer-strony);
        padding: 0 12px; overflow: visible;
    }

    #menuleft  { width: 30%; margin-right: var(--odstep-kolumn); }
    #news      { width: calc(70% - var(--odstep-kolumn)); }
    #menuright {
        width: 100%; margin-left: 0; margin-top: 14px;
        display: flex; flex-wrap: wrap; gap: 10px; float: none; clear: both;
    }

    #menu_navi, #headerhelp, #headerstat, #adminbox { width: 100%; }
    #headerhelp { height: auto; padding-bottom: 12px; }

    #headersponsor, #boxr, #boxr2 {
        width: calc(50% - 5px); float: none; margin-bottom: 0;
    }

    /* Nagłówki boksów to obrazki o stałej szerokości — niech się nie rozjeżdżają */
    #menu_navi .header, #headerstat .headerstat, #headerhelp .headerhelp,
    #headersponsor .headersponsor, #boxr .boxr, #boxr2 .boxr2 {
        width: 100%; background-size: cover;
    }

    #program, #news2, #news .programname_header { width: 100%; }
    #program .description { width: 100%; float: none; }
    #program .right { width: 100%; float: none; text-align: center; }
    #program .data { text-align: left; }
}


/* =========================================================================
   BREAKPOINT 2: poniżej 760px — tablety i duże telefony, jedna kolumna
   ========================================================================= */
@media (max-width: 759px) {

    #logo { height: 56px; }

    /* Na wąskim ekranie tytuł newsa ma się zawijać, a nie urywać wielokropkiem */
    #news2 .headerbg2 {
        height: auto;
        min-height: 36px;
        white-space: normal;
        text-overflow: clip;
        line-height: 1.3;
        padding-bottom: 8px;
        font-size: 14px;
    }
    #news2 .header1, #news2 .header3 { min-height: 36px; height: auto; }

    #menu { gap: 1px; }
    #menu .atext a, #menu .atext a:hover { padding: 8px 10px; font-size: 12px; }

    #links { justify-content: stretch; }
    #szukajka { width: 100%; }
    #szukajka input[type="text"] { width: 100%; flex: 1 1 auto; }

    /* Treść idzie na całą szerokość, nawigacja ląduje POD treścią —
       na telefonie najpierw ma być to, po co użytkownik przyszedł. */
    #menuleft {
        width: 100%; margin-right: 0; order: 2;
        display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
    }
    #news { width: 100%; order: 1; }
    #menuright { order: 3; }

    #content { display: flex; flex-direction: column; }

    #menu_navi, #headerhelp, #headerstat, #adminbox { width: 100%; float: none; }

    #headersponsor, #boxr, #boxr2 { width: 100%; }

    /* Listy plików budowane na tabelach — niech się zawijają */
    #news table { width: 100%; }
    #news table td[width="100"] { width: 80px; }

    .komunikat { margin: 20px 12px; }
}


/* =========================================================================
   BREAKPOINT 3: poniżej 480px — telefony
   ========================================================================= */
@media (max-width: 479px) {

    body { font-size: 9pt; }

    #header, #content { padding: 0 10px; }

    #panel { justify-content: center; font-size: 11px; flex-wrap: wrap; }

    #logo { height: 48px; margin: 8px auto; }

    /* Menu jako siatka dwukolumnowa — kciukiem trafia się bez celowania */
    #menu { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
    #menu .link { width: 100%; }
    #menu .atext a, #menu .atext a:hover {
        width: 100%; text-align: center; padding: 10px 6px;
        font-size: 12px; border-radius: 4px; margin-right: 0;
    }

    /* Karta programu: zrzut ekranu nad opisem */
    #program .header { font-size: 13px; padding: 8px 6px; }
    #news .programname_header { height: auto; min-height: 29px; background-size: cover; }

    /* Miniaturki na listach */
    #news table td[width="100"] { width: 64px; }
    #news table td[width="100"] img { max-width: 60px; }

    /* Tabele formularzy: etykieta nad polem */
    table.form, table.form tbody, table.form tr, table.form td {
        display: block; width: 100%;
    }
    table.form td { padding: 3px 0; }
    table.form input, table.form textarea, table.form select { max-width: 100%; }

    /* Stopka: kolumny jedna pod drugą */
    #bottombox .menu { width: 100%; float: none; padding-bottom: 10px; }
    #bottomboxlinks { padding: 20px 12px 26px; gap: 18px; }
    #bottomboxlinks .copyright {
        position: static;
        padding-top: 16px;
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.5;
    }

    #partners .text { justify-content: center; gap: 12px; padding: 10px; }
    #partners .img { max-height: 32px; }

    /* Chmura tagów bywa gęsta — daj jej oddychać */
    .tags a { line-height: 2; }
}


/* =========================================================================
   Ekrany bardzo szerokie — nie rozciągaj treści w nieskończoność
   ========================================================================= */
@media (min-width: 1600px) {
    #bg { background-size: auto 183px; }
}


/* =========================================================================
   Drobiazgi dostępności i druku
   ========================================================================= */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #fd7200;
    outline-offset: 1px;
}

@media print {
    #menu, #links, #panel, #menuleft, #menuright,
    #partners_bg, #bottombox, .download { display: none !important; }
    #content, #news { width: 100% !important; }
    body { background: #fff; }
}

/* =========================================================================
   Nowe elementy: okruszki, tabela nowości, link RSS
   ========================================================================= */

.okruszki {
    font-family: tahoma, Verdana, sans-serif;
    font-size: 11px;
    color: #667;
    padding: 6px 2px 10px;
    line-height: 1.6;
}

.okruszki a { color: #0D76AD; text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }
.okruszki i { color: #b6bfc6; font-style: normal; padding: 0 2px; }
.okruszki span { color: #3c3c3c; font-weight: bold; }

table.nowosci {
    width: 100%;
    border-collapse: collapse;
    font-family: tahoma, Verdana, sans-serif;
    font-size: 12px;
    margin-bottom: 6px;
}

table.nowosci th {
    text-align: left;
    padding: 6px 8px;
    background: #f2f8fa;
    border-bottom: 2px solid #cbf0f6;
    font-size: 11px;
    text-transform: uppercase;
    color: #047aa0;
}

table.nowosci td {
    padding: 7px 8px;
    border-bottom: 1px solid #eceff1;
    vertical-align: top;
}

table.nowosci tr:hover td { background: #f7fbfc; }
table.nowosci small { color: #8a949c; font-size: 10px; }
table.nowosci a { font-weight: bold; }

.rss-link {
    display: inline-block;
    padding: 6px 12px 6px 30px;
    background: #fff4e6 url(images/rss.png) no-repeat 8px center;
    border: 1px solid #ffd9a6;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
}

.rss-link:hover { background-color: #ffe9cc; }

@media (max-width: 479px) {
    table.nowosci th:nth-child(2),
    table.nowosci td:nth-child(2) { display: none; }
    .okruszki { font-size: 10px; }
}