/* CSS do strony głównej TBOP */
/*
Opis wykorzystania blokow CSS do layout'u strony TBOP:
Strona sklada się z glownych dwoch blokow/wierszy:
I. blok gorny ( #blok_gorny w CSS ) na którego sklada sie:
1) logo - #logo_gora (CSS),
2) menu horyzontalne rozwijane - #menu.
II. blok glowny strony ( #blok_glowny ), na którym rozpiete sa poszczegolne bloki/kolumny:
1) Lewa kolumna - #lewa_kolumna
2) Prawa kolumna - #prawa_kolumna
3) Srodkowa kolumna - #srodkowa_kolumna
4) Stopka - #blok_dolny

co wazne:
- menu horyzontalne dla poprawnego dzialania w IE5+ wymaga pliku: csshover.htc
i kilku malych poprawek w sekcji <!--[if IE]> w pliku index.html/php, poniewaz
IE nie wspiera zdarzen typu hover, link itp. dla innych znacznikow oprocz znacznika a
- jak sami wiecie kaskadowosc styli to bajecznie fajna zabawka, bo dzieki temu możemy
nawet dla znacznikow z danych sekcji okreslac dane atrybuty i ich warotsci calkiem rozlacznie
w porownaniu z globalnymi wartosciami, czyli np. #srodkowa_kolumna p mowi nam ze wszystkie znaczniki p
w srodkowej kolumnie maja mieć to a to pomimo tego ze znacznik p globalny tez zostal zdefiniowany
ale jest on dla srodkowej kolumny przykryty/niewidoczny.
- w tym problem ze stadard CSSow opracowany przez W3C nie wspierane sa do konca przez przegladarki,
niestety najslabiej wspiera to IE choc już w wersji IE6.0 jest calkiem dobrze, dlatego tez należy robic tzw.
hack'i, czyli oglupic przegladarke wykorzystujac jej slabosci, dzieki temu ze IE ma swietne wsparcie dla
modelu DOMa, można to zrobic bez problemu: jednym z hack'ow dla IE jest:
voice-family: "\"}\"";
voice-family:inherit;
po prostu po tych znacznikach IE nie czyta dalej wartosci atrybutow w danej sekcji.
- należy bezwzglednie zawsze definiowac sobie wszelakie marginesy (czyli margin, padding, border), bo model ramkowy ( model okna przegladarki)
 dla kazdej przegladarki jest niestety inny, chodzi tu szczególnie o Opere która inaczej ma zdefiniowane
 marginesy niż IE i Mozille

 ...

*/


/*selektory proste*/

body
{
    background:#FFFFFF;
    text-align:center;
    margin:0px;
    padding:0;
    font-family: verdana, arial, helvetica;
    font-size: 10px;
    font-weight: normal;
    color:#666666;

}

/* linia pozioma wykorzystana w prawej kolumnie */
hr
{
   margin-left: auto;
   margin-right: auto;
   width:90%;
   margin-bottom:0px;
   padding-bottom:0px;
}


/* znacznik definiujacy grafike */
img
{
    border:0px;
    margin:0px;
    padding:0px;
}

a
{
    margin:0px;
    padding:0px;
    text-decoration:none;
    font-family: verdana, arial, helvetica;
    font-size: 10px;
    font-weight: normal;
}

/* kolejność w jaki należy definiować znacznik a - LoVeHA (link, visited, hover, active) */
a:link
{
       font-weight: normal;
       color: #3333CC;
       text-decoration: none;
}

a:visited
{
       font-weight: normal;
       color: #3333CC;
       text-decoration: none;
}

a:hover
{
       font-weight: normal;
       color: #6666FF;
       text-decoration: underline overline;
}

a:active
{
      font-weight: normal;
      color: #3333CC;
      text-decoration: none;
}

ul
{
      font-weight: normal;
      font-size: 12pt;
      font-family: verdana, arial ce, arial, helvetica;
      margin:0px;
      padding:10px;
}

li
{
     font-weight: normal;
     font-size: 12pt;
     font-family: verdana, arial ce, arial, helvetica;
     margin:0px;
     padding:0px;
}

p
{
    font-family: verdana, arial, helvetica;
    font-size: 10px;
    font-weight: normal;
}

b
{
    font-family: verdana, arial, helvetica;
    font-size: 10px;
    font-weight: bold;
}

/* klasy */
/* naglowki wyszarzone w kolumnie prawej i lewej np. Polecamy, Przydatne */
.commonmenu
{
           background-color: #EFF0F0;
           height: 17px;
           width:100%;
           text-align: center;
           font-size: 12px;
           font-weight: bold;
           margin:0px;
           padding-top:5px;
           z-index:6;
}

/* naglowki wyszarzone w kolumnie srodkowej np. Aktualnosci */
.commonmenu2
{
           background-color: #EFF0F0;
           height: 17px;
           margin-left: 150px;
           width:59%;
           text-align: center;
                       font-size: 12px;
           font-weight: bold;
           margin-top:10px;
           padding-top:5px;
           z-index:5;
}

/* na potrzeby formularzy */
/*formularz - Poleć nas znajomym*/
.forminput1
{
           float: left;
           text-align: left;
           border: 1px solid black;
           margin-left:0px;
           margin-top:1px;
           padding:0px;
           background-color: #5BA1F3;
           width:135px;
}

/*formularz - Poleć nas znajomym*/
.formsubmit1
{
       
        text-align: center;
       border: 1px solid black;
       margin-top:2px;
        margin-left: auto;
        margin-right: auto;
        width:70px;
}

/* formularz - google */
.forminput2
{
       position:static;
       margin-top:65px;
        text-align: left;
       border: 1px solid black;
        background-color: #5BA1F3;
        width:180px;
        z-index:999;
}

/* przyciski radio w google pierwszy (1) i (2)*/
.formradio1
{
        margin-top:5px;
        margin-left: 150px;
        border: 0px;
        background-color: #FFFFFF;
}

.formradio2
{

        margin-left: 10px;
        border: 1px solid black;
        margin-left:10px;
        border: 0px;
        background-color: #FFFFFF;
}

/* formularz - google */
.formsubmit2
{
        position:static;
       margin-top:5px;
        text-align: center;
       border: 1px solid black;
        width:60px;
}


/*wlasne selektory*/

/*ramka google*/
#ramka_google
{
        position:relative;
        font-size:12px;
        border:0px dotted;
        background:#FFF repeat-y top left;
        margin-top:0;
        margin-bottom:0;
        padding:0px;
        /*float:left;*/
        margin-left:auto;
        margin-right:auto;
        height:180px;
        width: 400px;  /*IE5+/WIN */
        voice-family: "\"}\"";
        voice-family:inherit;
        height:180px; /* actual value */
        width: 400px;
}

/* ramka adres-siedziba */
#ramka_adres
{
        position:relative;
        font-size:10px;
        border:1px dotted; 
        background:#FFFFFF;
        margin-top:15px;
        margin-bottom:5px;
        margin-left:auto;
        margin-right:auto;
        padding:0px;
        z-index:7777;
        height:50px;
        width: 400px;  /*IE5+/WIN */
        voice-family: "\"}\"";
        voice-family:inherit;
        height:50px; /* actual value */
        width: 400px;
        text-align:center;
}

#ramka_adres p
{
    margin:0px;
    padding:0px;
}

#ramka2
{

    float: right;
    border:1px green;
    margin:0px;
    padding:0px;
    width:50px;
    height:20px;
}

/*do ustawienia header (logo TBOP) i belki nawigacyjnej horyzontalnej*/
#blok_gorny
{
       position:relative;
       text-align:left;
       width:100%;
       background:#FFF repeat-y top right;
       z-index:888;
       margin-top:0;
       margin-bottom:10px;
       margin-left:0;
       margin-right:0;
       margin-bottom:10px;
       
}

#mon
{
       font-size: 12px;
       margin-left: 20px;

}

/* logo TBOP */
#logo_gora
{
       background-image:url(http://www.tbop.org.pl/images/logozw.jpg);
       background-position:center center;
       background-repeat:no-repeat;
       height:109px;
       padding:0px;
       margin:0;
       color:#FFFFFF;
}

/* logo TBOP */
#logo_gora a
{
        background-image:url(http://www.tbop.org.pl/images/logo.jpg);
        background-position:center center;
        background-repeat:no-repeat;
       height:109px;
       padding:10px;
       color:#FFFFFF;
}


/* główny blok/kolumna strony na ktorej rozpiete sa poszczegolne kolumny: lewa, srodkowa, prawa */
#blok_glowny
{
       position:relative;
        margin-left: auto;
        margin-right: auto;
        padding-top:20px;
       padding-right:0px;
       padding-left:0px;
       padding-bottom:0px;
       width:800px;
       border: 0px solid black;
       z-index:111;
}

/* lewa kolumna */
#lewa_kolumna {
       position:relative;
       top:0px;
       left:3px;
       float:left;
       margin:0px;
       padding:0px;
       width:110px;  /* for IE5/WIN */
       voice-family: "\"}\"";
       voice-family:inherit;
       width:150px; /* actual value */
       background:#FFFFFF;
       /*border: 1px dotted #2020ff;*/
       z-index:555;
}

html>#lewa_kolumna
{
   z-index:666;
}

#lewa_kolumna div#main
{
   z-index:666;
}

#lewa_kolumna ul
{
left:0px;
margin-left: 10px;
margin-top:0px;
margin-bottom:0px;
padding-left: 0px;
text-align:left;
list-style-type: none;
}

#lewa_kolumna a
{
font-weight: normal;
font-size: 12px;
font-family: verdana, arial ce, arial, helvetica;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
padding-top:20px;
}

#lewa_kolumna li a
{
font-weight: normal;
font-size: 12px;
font-family: verdana, arial ce, arial, helvetica;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
padding-top:10px;
color:green;
}

#lewa_kolumna html>#main li a
{
   z-index:666;
}

#lewa_kolumna div#main li a
{
   z-index:666;
}

/* kolejność w jaki należy definiować znacznik a - LoVeHA (link, visited, hover, active) */
/*
#lewa_kolumna a:link
{
       font-weight: normal;
       color:#000000;
       text-decoration: none;
}

#lewa_kolumna a:visited
{
       font-weight: normal;
       color: #346698;
       text-decoration: none;
}

#lewa_kolumna a:hover
{
       font-weight: normal;
       : #FF0000;
       text-decoration: underline overline;
}

#lewa_kolumna a:active
{
      font-weight: normal;
      color: #346698;
      text-decoration: none;
}
*/

/* prawa kolumna */       
#prawa_kolumna
{
       position:relative;
       top:0px;
       right:3px;
       float:right;
       width:130px;  /*IE5+/WIN */
       voice-family: "\"}\"";
       voice-family:inherit;
       width:170px; /* actual value */
       margin:0px;
       padding:0px;
       background:#FFFFFF;
       /*border: 1px dotted #2020ff;*/
       z-index:666;
}

html>#prawa_kolumna
{
   z-index:666;
}

       
/* kącik webmasterski */
#webmas, #webmas a, #webmas p
{
       font-size:10px;
       border:0px dotted;
       background:#FFF repeat-y top left;
       margin:0px;
       margin-left:auto;
       margin-right:auto;
       margin-top:15px;
       padding:0px;
       height:20px;
       width: 120px;  /*IE5+/WIN */
       voice-family: "\"}\"";
       voice-family:inherit;
       height:20px; /* actual value */
       width: 120px;
}

/* środkowa kolumna */
#srodkowa_kolumna
{

       margin-bottom: 0px;
               margin-top: 0px;
               margin-right: 35px;
               margin-left: 10px;
       padding:0px;
       font-family: verdana, arial, helvetica;
       font-size: 18px;
       font-weight: bold;
       text-align:left;
       z-index:444;
}

html>#srodkowa_kolumna
{
   z-index:444;
}

/* kolor linków środkowej kolumny */
/*
#srodkowa_kolumna a
{
        margin-left:30px;
       padding:0px;
       color:#FF0000;
}  */

#srodkowa_kolumna ul
{
       margin-left:180px;
       padding:0px;
       font-size: 11px;
       color:#000;
        list-style-type: none;
        list-style-position: outside;
}

#srodkowa_kolumna li 
{
font-weight: normal;
font-size: 11px;
font-family: verdana, arial ce, arial, helvetica;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
padding-top:0px;
list-style-position: outside;
}

#srodkowa_kolumna li a
{
       color:#006600;
}

#srodkowa_kolumna p
{
        margin:0px;
        margin-left:10px;
       padding:0px;
       color:#660;
}
       
/* stopka */
#blok_dolny
{
       position:relative;
       background:#FFFFFF;
       width:90%;
       clear:both;
        margin-left: auto;
        margin-right: auto;
        margin-top:20px;
       padding:0;
       text-align:center;
       border: 0px dotted #2020ff;
       z-index:8;
}



/*****************************************/       
/* Menu horyzontalne - belka nawigacyjna */
/*****************************************/
#menu
{
position:relative;
margin-left: auto;
margin-right: auto;
padding-top:0px;
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
left:1%;
width:750px;
top:109px;
z-index:999;
}

#menu a, #menu h2{
font:bold 10px verdana,helvetica,arial,sans-serif;
display:block;
height:15px;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb; /*obramowania menu*/
white-space:nowrap;
margin:0px;
padding:0px 0px 0px 12px;
}

#menu h2{
color:#FFFFFF; /*kolor czcionki belki zawsze widocznej*/
background:#5BA1F3 no-repeat 100% 100%; /*kolor tła belki zawsze widocznej*/
text-transform:uppercase;
text-align:center;
}

#menu a{
color: #000;
background:#EEEEEE; /*kolor tła - menu rozwijane*/
text-decoration:none;
}

/*strzalki do podkategorii*/
#menu a.root
{
background:#eeeeee url(../images/rightarrow.gif) center right no-repeat;
}

#menu a.root:hover
{
background:#999999 url(../images/rightarrow.gif) center right no-repeat;
}


#menu a, #menu a:visited{
color:#000000; /*kolor tekstu - menu rozwijane*/
}

#menu a:hover{ /*menu rozwijane podswietlone*/
color: #000000; /*kolor tekstu*/
background:#999999; /*kolor tła*/
}

#menu a:active{
color:#000000;
background:#cccccc;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em;
}

#menu li{
position:relative;
height:15px;
}

#menu ul ul{
position:absolute;
z-index:500;
left: 0px;
top:auto;
display:none;
}

#menu ul ul ul
{
      top:0;
      left:100%;
      display:block;
}



#menu h2:hover
{
      background:#000099 no-repeat;
}

#menu li:hover
{
      cursor:pointer;
      z-index:100;
}

/* drugi poziom bloku - wladze, itp */
 /*
#menu ul li ul li:hover ul li,
#menu ul li ul li:hover ul li li,
#menu ul li ul li:hover ul li li li
{
display:none;
}
   */
   
#menu li:hover ul ul,
#menu li li:hover ul ul,
#menu li li li:hover ul ul,
#menu li li li li:hover ul ul
{
display:none;
}
   

#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li li li li:hover ul
{
display:block;
}

/*
html {z-index:1;}
body {z-index:2;}
div#blok_glowny {position:absolute; z-index:3;}
div#prawa_kolumna {position:absolute; z-index:4;}
div#srodkowa_kolumna {position:absolute; z-index:5;}
div#menu {z-index:6;}
div#webmas {z-index:7;}
div#lewa_kolumna {position:absolute:z-index:8;}
*/