/* 
 *
* {
 * */
.mapa *, #header *, #header_2 *, #leva *, form * {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: small;
  width: 800px;
  margin: 0 auto;
  padding: 0;
}
/*
td {
  vertical-align: top;
}
  */
li {
  list-style-position: inside;
}

div.error , div.warning , div.message {
  font-size: x-small;
  margin: 0;
  padding: 0 0 0 1em;
}
div.error   { color: white; background: #600; }
div.warning { color: black; background: yellow; }
div.message { color: green; background: white; }

/*
 * ============== common rules =================
 * */

a       { text-decoration: none; }
a:hover { text-decoration: underline; }

a img {
  border: none;
}

/*
 * Obrazek 'SALMO - Performance Fishing Lures' na samej górze.
 * W kodzie to jest to co zawiera cały nagłówek.
 * */
div#header {
  margin: 0;
  padding: 0;
  position: relative;
  height: 150px;
}
div#header_2 {
  position: relative;
  top: 0;
  left: 0;
  min-height: 1em;
}
/*
 * big_black_logo
 * */
a#to_index {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 200px;
}
a#to_index img {
}

div#header_2 div#navbar {
  position: absolute;
  right: 0;
  top: 1px;
}
#navbar a {
  padding: 0 3px;
  font-size: x-small;
}
#navbar a img {
  position: relative;
  top: 3px;
}
#navbar span.pages a {
  background: white url(pic/vertical_separator.png) no-repeat center left;
}
#navbar span.pages a:first-child {
  background: white;
}
#navbar a.target {
  font-weight: bold;
}

div#header_2 div#navbar a#to_map {
  background: transparent url(pic/map_arrows.png) no-repeat left center;
  padding-left: 15px;
  font-size: small;
}
div#header_2 div#langs {
  position: absolute;
  top: 0;
  left: 0;
}

div#header div {
  position: absolute;
  top: 0;
  left: 200px;
  height: 150px;
  width: 600px;
  background: white no-repeat left top;
}

h1 {
  font-size: large;
  font-weight: bold;
}
div#header_2 h1 {
  margin: 5px 5em 5px 200px;
  padding-left: 15px;
  color: #a76245;
  font-style: italic;
  background: transparent url(pic/dot_brown.png) no-repeat left center;
}
/*
 * Container for both columns of the contents
 * */
div#columns {
  position: relative;
  background: #e2decd url(pic/faux_bg_light.png) repeat-y left top;
}
div#columns.light {
  background-image: url(pic/faux_bg_light.png);
}
div#columns.dark {
  background-image: url(pic/faux_bg.png);
}

div#columns:after {
  content: "";
  height: 1px;
  display: block;
  clear: both;
}
/* The generated contents.
 *
 * It is styled by salmo_edit.css
 * */
div#page {
  width: 598px;
  margin: 0;
  padding: 0;
  position: relative; /* bez tego cała lista zjeżdżała na dół strony (w IE) */
  float:right;
}

/*
 * The (possibly) left column with (usually) the page menu
 * */
div#leva {
  width: 200px;
  margin: 0;
  padding: 0;
  float: left;
}

/*
 * A menu, this time in the left (probably left) column
 * */
div#leva ul.menu {
  padding-top: 9px;
  padding-bottom: 9px;
  background: #e2decd url(pic/menu_separator.png) repeat-x left top;
}
div#leva ul.menu:first-child  {
  background: #e2decd;
}

div#leva ul.menu li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: inside;
  background: #e2decd url(pic/dot_gray.png) no-repeat 10px center;
  position: relative; /* will catch the floating submenus */
}
div#leva ul.menu a {
  display: block;
  margin: 0;
  padding: 3px 30px 3px 34px;
  min-height: 11px;
  background: transparent url(pic/menu_li_bg_nosub.png) no-repeat right top;
}
div#leva ul.menu li:first-child > a { /* IE nie kuma. Czy on kuma + albo coś więcej niż klasę? */
  background: transparent;
}
div#leva ul.menu li:first-child > a.hassub { /* IE nie kuma. Czy on kuma + albo coś więcej niż klasę? */
  background: transparent url(pic/menu_li_bg_first.png) no-repeat right top;
}

div#leva ul.menu a.hassub {
  background-image: url(pic/menu_li_bg.png);
}
div#leva ul.menu div.submenu_1 a {
  background-image: url(pic/menu_li_bg_nosub.png);
}

div#leva ul.menu div.submenu_1 li:first-child > a { /* IE nie kuma. Czy on kuma + albo coś więcej niż klasę? */
  background-image: none;
}

div#leva ul.menu li.hilite ,
div#leva ul.menu li:hover {
  background-color: #dbd5b8;
}

div#leva ul.menu a {
  color: #4d4d4d;
  font-weight: bold;
}
div#leva ul.menu a:hover {
  text-decoration: none;
}

/* second level of menu */
div#leva ul.menu div.submenu_1 ,
div#leva ul.menu div.submenu_2 {
  display: none;
}

div#leva ul.menu li:hover div.submenu_1 ,
div#leva ul.menu li.hover div.submenu_1 {
  display: block;
  position: absolute;
  top: -9px; /* equal to ul.menu top-margin */
  border: 1px solid #e2decd;
  border-left: 1px solid #fffafa;
  left: 200px;
  width: 220px;
}

/*
 * Other items in leva column
 */
div#leva h2, div#leva p {
  margin-left: 10px;
}
div#leva form.logout {
  text-align: center;
  margin: 0.5em;
}
/*
 * The menu, included somewhere in the page
 */
div#page ul.menu {
  margin: 1em 1em 1em 3em;
}

/*
 * The menu-tree as seen on mapa.php
 *
 * The structure is:
 * ol || ul
 *   li
 *     div
 *       a
 *       span.icons
 *     ul
 *       li
 *         ...
 * */

.mapa { /* ol | ul */
  margin: 1em 1em 1em 3em;
  padding: 0 0 3px;
  background: #d3cdb2 url(pic/mapa_li_bg.gif) repeat-x bottom right;
}
.mapa ul {
  margin-left: 2em;
}
.mapa li {
  background: #d3cdb2 url(pic/mapa_li_bg.gif) repeat-x top right;
  padding: 1px 0 0 0;
  margin: 1px 0 0 0;
  list-style-type: decimal;
  list-style-position: outside;
}
.mapa ul li    { list-style-type: disc; list-style-image: url(pic/level_down.gif); }
.mapa ul ul li { list-style-type: circle; }
    /*
     * Blok ikonek:
     * Wrapper (div) jest mi po to, żeby blok ikon wyrównać do dolnej krawędzi tekstu, czego nie mogę
     * zrobić samym elementem <li> bo <li> może zawierać <ul> następnego poziomu. Jego dolna krawędź
     * będzie wtedy daleeeeeko w dole.
     *
     * Jeśli użyję 'float' wrapper będzie zbędny, ale jakoś mi ten float spada w dół. Musze pogrzebać
     * za wyjasnieniem w wolnej chwili.
     * */
.mapa div {
  position: relative;
}
.mapa span.icons {
  display: block;
  height: 11px;
  width: 70px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: xx-small; /* odstępy są fontem rysowane? */
}
/* FIXME: Dlaczego IE mając bottom: x przesuwa mi WSZYSTKIE ikonki tak na dół
* strony(!), jakoś tak nadal wyrównane...? */
* html .mapa span.icons { top: 0; }

.mapa span.icons img {
  margin-left: 3px;
}

/*
 * Copyright and inline menu
 * */
div#stopka {
  clear: both;
  border-top: 1px solid #999;
  position: relative;
  font-size: x-small;
}

/*
 * simple text
 * */
div#stopka .copyright {
  display: block;
  margin: 0;
  text-align: center;
  padding: 0.5em 0 0 3em;
}

div#validators {
  /* Something for the crazy ones. Like me. ;-)
   * It has a h2 and some links
   * */
  font-size: xx-small;
  text-align: left;
  margin-top: 3em;
}
div#validators h2 {
  display: none;
}
div#validators a {
  color: #aaa;
}

div.zajawka {
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f2f0e8;
  text-align: left;
}
div.dark  { background-color: #c2bca2; }
div.light { background-color: #d3cdb2; }

div.zajawka h2 {
  font-size: medium;
  color: white;
  margin: 0 1em 0 70px;
  text-align: left;
}
div.zajawka h2.admin strong.notready {
  color: red;
}
div.more {
  text-align: right;
  margin-right: 4em;
}
div.more a {
  color: #8a2e08;
  background: transparent url(pic/triangle.gif) no-repeat left center;
  padding-left: 10px;
  text-decoration: underline;
}



/*
 * Under-page menu of submenus from all menuitems which point to current page.
 */

ul.underpage {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  list-style-type: none;
}
ul.underpage * {
  margin: 0;
  padding: 0;
}
ul.underpage li {
  display: block;
  float: left;
  position: relative;
  top: 0;
  left: 0;
  margin: 10px 15px;
  padding: 0;

  /*
   * * Dla trzech kolumn trzeba by wyodrębnić klasę.. albo wyliczyć szerokość obrazków.
  margin: 10px 0;
  width: 49%;
  text-align: center;
  */
}

ul.underpage li a {
  color: black;
  font-weight: 900;
  font-size: large;
}

/*
 * Blok, w który pakuję zawartośc strony, żeby mi użytkownik nie wyjeżdżał z pozycjonowanymi elementami.
 */
div#page_wrapper {
  position: relative;
  padding: 20px;
}