html, body{
      background-color: #758067;
      margin: 0px;
      padding: 0px;
      text-align: center;
      font-family: verdana, sans-serif;
      font-size : 12px;
      letter-spacing: 0px;
      color: #000000;
    }
    table{
      font-size: 12px; /*bo IE nie qma, że jak jest w body to i wszędzie...*/
    }
    p{
      text-align: justify;
    }
    abbr{
      border-bottom : 1px dotted black;
      cursor : help;
    }
    img{
      border: 0px solid;
    }
    hr{
      height: 2px;
      color: #b0c396;
      background-color: #b0c397;
      border-color: #b0c398;       /* kolory zmienione o +1, bo validator się pluł */
    }
    h1{
      margin : 0px;
      padding : 0px;
      font-size : 20px;
      font-weight: normal;
    }
    h2{
      margin : 0px;
      padding : 0px;
      font-size : 14px;
    }
    h3{
      margin : 0px;
      padding : 0px;
      font-size : 12px;
    }
    ul, ol{
      margin-top: 0px;
    }

    #container{
      background: #a6b88e url('pict/layout/back.gif') repeat-y;
      color: #000;
      width : 980px;
      margin : 0 auto;
    }
    #top{
      background : #758067 url('pict/layout/top.gif') no-repeat;
      color: #000;
      width : 980px;
      height: 50px;
    }
    #menu{
      width : 160px;
      background-color: #a6b88e;
      color: #000;
      float: left;
    }
    #menu p{
      text-align: center;
      margin: 0px;
      padding-top: 10px;
      font-weight: bold;
    }
    #menuup{
      width : 160px;
      height: 35px;
      background : #a6b88e url('pict/layout/menuup.gif') no-repeat;
      color: #000;
      float: left;
    }
    #menumiddle{
      width : 160px;
      background : #a6b88e url('pict/layout/menumiddle.gif') repeat-y;
      color: #000;
      float: left;
      text-align: left;
    }
    #menumiddle ul{
      margin: 5px 0px 5px 0px;
      list-style-type: none;
      padding-left: 20px;
    }
    #menumiddle ul li a{
      text-decoration: none;
      color: #204000;
      background-color: #a6b88e;
    }
    #menumiddle ul li a:visited{
      text-decoration: none;
      color: #204000;
      background-color: #a6b88e;
    }
    #menumiddle ul li a:hover, #menumiddle ul li a:active{
      text-decoration: underline;
      color: #002010;
      background-color: #a6b88e;
    }
    #menugoogleadd{
      margin: 5px 0px 5px 0px;   
      padding-left: 20px;  
    }
    #menulicznik{
      width : 160px;
      height: 36px;
      background : #a6b88e url('pict/layout/menulicznik.gif') no-repeat;
      color: #000;
      float: left;
    }
    #menubuttony{
      width : 160px;
      background : #a6b88e url('pict/layout/menumiddle.gif') repeat-y;
      color: #000;
      float: left;
      text-align: center;
      padding: 8px 0px 0px 0px;
    }
    #menudown{
      width : 160px;
      height: 12px;
      background : #a6b88e url('pict/layout/menudown.png') no-repeat;
      color: #000;
      float: left;
      font-size : 1px;  /*bo w IE się krzaczyło i rozciągało tego diva*/
    }
    #main{
      width : 820px;
      background-color : #a6b88e;
      color: #000;
      float: right;
    }
    /*#main p{
      text-align: justify;
    }*/     /*zostawiony na wszelki wypadek, gdyby jednak się coś posypało, ale nie wygląda na to*. Zamiast tego jest styl do p  text-align: justify*/
    #mainup{      /*tu jest tytuł każdej strony*/
      width : 820px;
      height: 35px;
      background : #a6b88e url('pict/layout/mainup.gif') no-repeat;
      color: #000;
      float: right;
    }
    #mainup p{
      margin: 0px;
      padding: 10px 0px 0px 25px;
      font-weight: bold;
    }
    #mainup a{
      font-weight: normal;
    }
    #mainnav{     /*tu są przyciski nawigacji*/
      width : 820px;
      height: 40px;
      background : #a6b88e url('pict/layout/mainnav.gif') no-repeat;
      color: #000;
      float: right;
    }
    #mainnav img{
      margin-top: 8px;
      width: 21px;
      height: 21px;
    }
    /* klasy do rollover przyciskow nawigacyjnych */
    a#back img{
      background: url('pict/buttons/back.gif') top left no-repeat;
    }
    a#back:hover img{
      background: url('pict/buttons/back-hover.gif') top left no-repeat;
    }
    a#up img{
      background: url('pict/buttons/up.gif') top left no-repeat;
    }
    a#up:hover img{
      background: url('pict/buttons/up-hover.gif') top left no-repeat;
    }
    a#home img{
      background: url('pict/buttons/home.gif') top left no-repeat;
    }
    a#home:hover img{
      background: url('pict/buttons/home-hover.gif') top left no-repeat;
    }
    a#next img{
      background: url('pict/buttons/next.gif') top left no-repeat;
    }
    a#next:hover img{
      background: url('pict/buttons/next-hover.gif') top left no-repeat;
    }
    /* rollover przycisku do góry */
    a.do_gory img{
      width: 61px;
      height: 12px;
      background: url('pict/buttons/do_gory.gif') top left no-repeat;
    }
    a.do_gory:hover img{
      width: 61px;
      height: 12px;
      background: url('pict/buttons/do_gory-hover.gif') top left no-repeat;
    }
    
    
    #data_dodania{
      display: inline;
      position: relative;
      left: -266px;
      top: 11px;
      font-weight: bold;
    }
    #wiadomosc{
      display: inline;
      position: relative;
      left: 0px;
      top: 11px;
      font-weight: bold;
    }
    #maincontent{ /*tu jest treść strony*/
      width : 820px;
      background : #a6b88e url('pict/layout/mainmiddle.gif') repeat-y;
      color: #000;
      text-align: center;
      float: right;
    }
    #zdjecie{
      margin: 5px 0px 5px 0px;
      position: relative;
      left: -5px
    }
    .zdjecie_w_relacji{ /*pojedyńcze zdjęcie w relacji z danego szlaku*/
      width: 760px; 
      text-align: center; 
      overflow: auto;
      margin: 10px 0px 0px 0px;
    }
    .panorama_w_relacji{/*pojedyńcza panorama w relacji z danego szlaku, stąd wysokość 545 pixeli, bo IE nie wie, że wysokość powinien ustawić tak, aby suwak się zmieścił razem ze zdjęciem*/
      width: 760px; 
      height: 545px; 
      text-align: center; 
      overflow: auto;
      margin: 10px 0px 0px 0px;
    }
    .podpis_zdjecia{
      font-weight: bold; 
      margin: 5px 0px 10px 0px; 
      text-align: center;
    }
    #maindown{
      width : 820px;
      height: 35px;
      background : #a6b88e url('pict/layout/maindown.gif') no-repeat;
      color: #000;
      text-align: right;
      float: right;
    }
    #mailme{
      margin: 10px 35px 0px 0px;
    }
    #footer{
      width : 980px;
      height: 10px;
      background : #758067 url('pict/layout/footer.gif') no-repeat;
      color: #000;
      clear: both;
    }
    a{
      font-family: verdana, sans-serif;
      font-size : 12px;
      text-decoration: none;
      letter-spacing: 0px;
      margin-bottom:  0px;
      color: #204000;
      background-color: #a6b88e;
    }
    a:visited{
      text-decoration: none;
      color: #204000;
      background-color: #a6b88e;
    }
    a:hover, a:active{
      text-decoration: none; /*było underline*/
      color: #002010;
      background-color: #a6b88e;
    }
    a.link_w_tekscie{
      font-family: verdana, sans-serif;
      font-size : 12px;
      text-decoration: underline;
      letter-spacing: 0px;
      margin-bottom:  0px;
      color: #204000;
      background-color: #a6b88e;
    }
    ul a:hover{
      background-color: #b7cb9d;
    }
    /*potrzebne, bo kolory cytatu jest inne niż reszty i trzeba je dopasować, aby się nie wyróżniały*/
    .cytat a.link_w_tekscie{
      color: #204000;
      background-color: #b0c397;
    }
    .cytat a:visited.link_w_tekscie{
      color: #204000;
      background-color: #b0c397;
    }
    .cytat a:hover.link_w_tekscie, .cytat a:active.link_w_tekscie{
      color: #002010;
      background-color: #becea9;/*#b6ca9c;*/
    }
    /*to po to, aby w nagłówkach h2 z hiperlaczami był font=14px*/
    h2 a.link_w_tekscie{
      font-size : 14px;
    }
    a:visited.link_w_tekscie{
      text-decoration: underline;
      color: #204000;
      background-color: #a6b88e;
    }
    a:hover.link_w_tekscie, a:active.link_w_tekscie{
      text-decoration: underline;
      color: #002010;
      background-color: #b7cb9d;
    }
    a#tytul_strony{
      vertical-align: 25px;
      font-family: verdana, sans-serif;
      font-size : 16px;
      text-decoration: none;
      font-weight: 100;
      letter-spacing: 0px;
      margin-bottom:  0px;
      color: #204000;
      background-color: #a6b88e;
      position: relative;
      top: 16px;
      left: 75px
    }
    a:visited#tytul_strony{
      text-decoration: none;
      color: #204000;
      background-color: #a6b88e;
    }
    a:hover#tytul_strony, a:active#tytul_strony{
      text-decoration: underline;
      color: #002010;
      background-color: #a6b88e;
    }
    .cytat{
      text-align: justify;
      color: #000000;
      background-color: #b0c397;
      margin: 10px 25px 10px 25px;
      padding: 5px 20px 5px 20px;
      border: 1px solid #758067;
    }
    .miniaturki{         /*jakby rząd w tabeli z divów przeznaczony na miniaturki*/
      text-align: center;
      width: 760px;
      padding: 0px;
      margin: 5px auto;
      position: relative;
      left: -5px;
    }
    .img_miniaturki{     /*pojedyncze obrazki - miniaturki*/
      vertical-align: middle;
      margin: 4px;
    }
    table.table_tutoriale{
      width: 760px;
      text-align: left;
      vertical-align: middle;
      border-style: solid;
      border-width: 1px 0px 1px 0px;
      border-color: #b0c396;
      border-collapse: collapse;
    }
    td.td_tutoriale{
      border-style: solid;
      border-width: 2px 0px 1px 0px;
      border-color: #b0c396;
      padding: 10px 0px 10px 0px;
    }
    td.td_tutoriale p{
      padding: 0px 10px 0px 0px;
    }
    img.img_tutoriale{
      float: right;
      clear: right;
      margin: 0px 0px 15px 15px;
    }
    
    .table_skroty_klawiszowe{
      border-style: solid;
      border-width: 3px;
      border-color: #000000;
      border-collapse: collapse;
    }
    .table_skroty_klawiszowe td{
      border-style: solid;
      border-width: 2px;
      border-color: #000000;
       padding: 2px 30px 2px 5px;
     }

    .container_content{ /*czyli kontener dla każdej logicznej całości na stronach, jak opis jednej wycieczki czy jednego tutka, lecz także zawiera się w nim cały tutorial wraz z tabelką*/
      width: 760px;
      padding: 10px 0px 10px 0px;
      margin: 0px auto;
      position: relative;
      left: -5px;
      text-align: left;
      border-bottom: 2px #b0c397 solid;
    }
    .container_content_no_border{ /*jak wyżej, ale nie ma dolnego bordera, stosowane jako ostatni div na stronie, gdzie dolna ramka jest zbędna*/
      width: 760px;
      padding: 10px 0px 10px 0px;
      margin: 0px auto;
      position: relative;
      left: -5px;
      text-align: left;
    }
    .lewa_kolumna_newsy{    /*lewa kolumna na stronie index.php, z datami ukazania się newsów*/
      width: 150px;
      padding-bottom: 5px;
      text-align: center;
      vertical-align: top;
    }
    .prawa_kolumna_newsy{   /*prawa kolumna na stronie index.php, z treścią newsów*/
      text-align: justify;
      padding-bottom: 5px;
      vertical-align: top;
    }
    .lewa_kolumna_content{  /*lewa kolumna (miniaturka) na stronach z listą tutoriali lub wycieczek*/
      float: left;
      width: 150px;         /*150px przy założeniu, że tyle będą miały miniatury ilustrujące dany temat*/
      text-align: center;
    }
    .miniaturki_do_tutoriali{  /*to są miniaturki znajdujące się przy opisie tutków na stronie tutoriale.php*/
      width: 150px;
      height: 113px;
    }
    .miniaturki_do_wycieczek{  /*to są miniaturki znajdujące się przy opisie wycieczek na stronach jak koszalin.php*/
      width: 150px;
    }
    .kliknij_miniaturke{    /*napis pod miniaturkami*/
      font-size: 10px;
      font-weight: bold;
    }
    .prawa_kolumna_content{
      float: right;
      width: 595px; /*595px przy założeniu, że padding (którego nie nadałem, jest dziura po prostu) = 15px, a miniaturka 150px*/
    }
    .clear_both{ /*div "dociągający" zawartość container_content do dołu*/
      height: 1px;   /*1px, bo ponoć IE czasem ma problemu z divami bez wymiarów*/
      font-size: 1px; /*idiotyzm, ale dzięki temu IE nie zostawia miejsca na tekst o domyślnej wielkości czcionki, czyli u mnie 12px*/
      clear: both;
    }