/**
 * @cssdoc            version 1.0-pre
 * @style             Jest to arkusz dla stron tworzonych na GRACE.
 *                    Zawiera ustawienia szerokosci, odstepow dla kolumn, a takze stalych elementow
 *                    takich jak menu, nawigator.
 */

/**
 * @note              Okreslenie minimalnej szerokosci dla ukladow elastycznych
 */
/* ------------------------------------------------------------------------- */
.el {
  min-width: 960px;
}

/**
 * @note              Okreslenie szerokosci dla WASKICH ukladow o sztywnej i
 *                    mieszanej szerokosci, a takze wysrodkowanie ukladow
 *                    na stronie
 */
/* ------------------------------------------------------------------------- */
.szW,
.szW #menu,
.mW #menu,
.mW #nawigator,
.mW #kontent {
  width: 750px;
  margin: 0 auto;
}

/**
 * @note              Okreslenie szerokosci dla SZEROKICH ukladow o sztywnej
 *                    i mieszanej szerokosci, a takze wysrodkowanie ukladow
 *                    na stronie
 */
/* ------------------------------------------------------------------------- */
.szS,
.szS #menu,
.mS #menu,
.mS #nawigator,
.mS #kontent {
  width: 960px;
  margin: 0 auto;
}

/**
 * @note              Okreslenie szerokosci ukladu elastycznego,
 *                    a takze dla ukladow mieszanych WASKICH i SZEROKICH
 */
/* ------------------------------------------------------------------------- */
.el,
.mW,
.mS {
  width: 100%;
}

/**
 * @note              Okreslenie szerokosci KOLUMNY WASKIEJ,
 *                    wystepujacej po lewej i/lub prawej stronie w ukladach
 *                    2 lub 3-kolumnowych
 */
/* ------------------------------------------------------------------------- */
.wl #k3, 
.wp #k3 {
  width: 170px;
}

/**
 * @note              Okreslenie szerokosci KOLUMNY SZEROKIEJ,
 *                    wystepujacej po lewej i/lub prawej stronie w ukladach
 *                    2 lub 3-kolumnowych
 */
/* ------------------------------------------------------------------------- */
.sl #k3,
.sp #k3 {
  width: 310px;
}

/**
 * @section           Szerokosc kolumny z KONTENTEM
 *                    wystepujacej w ukladzie 2-kolumnowym sztywnym i mieszanym,
 *                    z boczna kolumna
 */
/* ------------------------------------------------------------------------- */
/**
 * @subsection        Uklad WASKI z WASKA boczna kolumna
 */
/* ------------------------------------------------------------------------- */
.szW .wl #kontent-glowny,
.szW .wp #kontent-glowny,
.mW .wl #kontent-glowny,
.mW .wp #kontent-glowny {
  width: 590px;
}

/**
 * @subsection        Uklad SZEROKI z WASKA boczna kolumna
 */
/* ------------------------------------------------------------------------- */
.szS .wl #kontent-glowny,
.szS .wp #kontent-glowny,
.mS .wl #kontent-glowny,
.mS .wp #kontent-glowny {
  width: 770px;
}

/**
 * @subsection        Uklad WASKIM z SZEROKA boczna kolumna
 */
/* ------------------------------------------------------------------------- */
.szW .sl #kontent-glowny,
.szW .sp #kontent-glowny,
.mW .sl #kontent-glowny,
.mW .sp #kontent-glowny {
  width: 450px;
}

/**
 * @subsection        Uklad SZEROKI z SZEROKA boczna kolumna
 */
/* ------------------------------------------------------------------------- */
.szS .sl #kontent-glowny,
.szS .sp #kontent-glowny,
.mS .sl #kontent-glowny,
.mS .sp #kontent-glowny {
  width: 630px;
}

/**
 * @subsection        Okreslenie szerokosci kolumny k1 w uklad 1-kolumnowym
 */
/* ------------------------------------------------------------------------- */
#uklad #k1 {
  width: 100%;
}

/**
 * @section           Ukladem 3 kolumnowym SZTYWNY i MIESZANY
 * @note              Ustawienia wspolne dla ukladu sztywnego jak i mieszanego
 */
/* ------------------------------------------------------------------------- */
/**
 * @subsection        Uklad 3 kolumnowy WASKI
 */
/* ------------------------------------------------------------------------- */
#kontener.szW #uklad.wl div.wl #kontent-glowny,
#kontener.szW #uklad.wl div.wp #kontent-glowny,
#kontener.szW #uklad.wp div.wp #kontent-glowny,
#kontener.szW #uklad.wp div.wl #kontent-glowny,
#kontener.szW #uklad.wl div.sl #kontent-glowny,
#kontener.szW #uklad.wl div.sp #kontent-glowny,
#kontener.szW #uklad.wp div.sp #kontent-glowny,
#kontener.szW #uklad.wp div.sl #kontent-glowny,
#kontener.szW #uklad.sl div.wp #kontent-glowny,
#kontener.mW #uklad.wl div.wl #kontent-glowny,
#kontener.mW #uklad.wl div.wp #kontent-glowny,
#kontener.mW #uklad.wp div.wp #kontent-glowny,
#kontener.mW #uklad.wp div.wl #kontent-glowny,
#kontener.mW #uklad.wl div.sl #kontent-glowny,
#kontener.mW #uklad.wl div.sp #kontent-glowny,
#kontener.mW #uklad.wp div.sp #kontent-glowny,
#kontener.mW #uklad.wp div.sl #kontent-glowny,
#kontener.mW #uklad.sl div.wp #kontent-glowny {
  width: 580px;
}

/**
 * @subsection        Uklad 3 kolumnowy SZEROKI
 */
/* ------------------------------------------------------------------------- */
#kontener.szS #uklad.wl div.wl #kontent-glowny,
#kontener.szS #uklad.wl div.wp #kontent-glowny,
#kontener.szS #uklad.wp div.wp #kontent-glowny,
#kontener.szS #uklad.wp div.wl #kontent-glowny,
#kontener.szS #uklad.wl div.sl #kontent-glowny,
#kontener.szS #uklad.wl div.sp #kontent-glowny,
#kontener.szS #uklad.wp div.sp #kontent-glowny,
#kontener.szS #uklad.wp div.sl #kontent-glowny,
#kontener.szS #uklad.sl div.wp #kontent-glowny,
#kontener.mS #uklad.wl div.wl #kontent-glowny,
#kontener.mS #uklad.wl div.wp #kontent-glowny,
#kontener.mS #uklad.wp div.wp #kontent-glowny,
#kontener.mS #uklad.wp div.wl #kontent-glowny,
#kontener.mS #uklad.wl div.sl #kontent-glowny,
#kontener.mS #uklad.wl div.sp #kontent-glowny,
#kontener.mS #uklad.wp div.sp #kontent-glowny,
#kontener.mS #uklad.wp div.sl #kontent-glowny,
#kontener.mS #uklad.sl div.wp #kontent-glowny {
  width: 750px;
}

/**
 * @subsection        Uklad 3 kolumnowy WASKI
 */
/* ------------------------------------------------------------------------- */
#kontener.szW #uklad.sl div.wl #kontent-glowny,
#kontener.szW #uklad.sl div.sl #kontent-glowny,
#kontener.szW #uklad.sp div.sp #kontent-glowny,
#kontener.szW #uklad.sl div.sp #kontent-glowny,
#kontener.szW #uklad.sl div.wp #kontent-glowny,
#kontener.szW #uklad.sp div.wl #kontent-glowny,
#kontener.mW #uklad.sl div.wl #kontent-glowny,
#kontener.mW #uklad.sl div.sl #kontent-glowny,
#kontener.mW #uklad.sp div.sp #kontent-glowny,
#kontener.mW #uklad.sl div.sp #kontent-glowny,
#kontener.mW #uklad.sl div.wp #kontent-glowny,
#kontener.mW #uklad.sp div.wl #kontent-glowny {
  width: 440px;
}

/**
 * @subsection        Uklad 3 kolumnowy SZEROKI
 */
/* ------------------------------------------------------------------------- */
#kontener.szS #uklad.sl div.wl #kontent-glowny,
#kontener.szS #uklad.sl div.sl #kontent-glowny,
#kontener.szS #uklad.sp div.sp #kontent-glowny,
#kontener.szS #uklad.sl div.sp #kontent-glowny,
#kontener.szS #uklad.sl div.wp #kontent-glowny,
#kontener.szS #uklad.sp div.wl #kontent-glowny,
#kontener.mS #uklad.sl div.wl #kontent-glowny,
#kontener.mS #uklad.sl div.sl #kontent-glowny,
#kontener.mS #uklad.sp div.sp #kontent-glowny,
#kontener.mS #uklad.sl div.sp #kontent-glowny,
#kontener.mS #uklad.sl div.wp #kontent-glowny,
#kontener.mS #uklad.sp div.wl #kontent-glowny{
  width: 615px;
}

/**
 * @subsection        Ustawienia kolumny k1 dla roznych kombinacji ukladow
 *                    2-kolumnowych
 */
/* ------------------------------------------------------------------------- */
#kontener.szW #uklad.sl div.sl #k1,
#kontener.szW #uklad.sp div.sl #k1,
#kontener.mW #uklad.sl div.sl #k1,
#kontener.mW #uklad.sp div.sl #k1 {
  width: 140px;
  float: right;
}

#kontener.szS #uklad.sl div.sl #k1,
#kontener.szS #uklad.sp div.sl #k1,
#kontener.mS #uklad.sl div.sl #k1,
#kontener.mS #uklad.sp div.sl #k1 {
  width: 301px;
  float: right;
}

#kontener.szW #uklad.sp div.sp #k1,
#kontener.szW #uklad.sl div.sp #k1,
#kontener.mW #uklad.sp div.sp #k1,
#kontener.mW #uklad.sl div.sp #k1 {
  width: 140px;
  float: left;
}

#kontener.szS #uklad.sp div.sp #k1,
#kontener.szS #uklad.sl div.sp #k1,
#kontener.mS #uklad.sp div.sp #k1,
#kontener.mS #uklad.sl div.sp #k1 {
  width: 285px;
  float: left;
}

#kontener.szW #uklad.wl div.wl #k1,
#kontener.szW #uklad.wp div.wl #k1,
#kontener.mW #uklad.wl div.wl #k1,
#kontener.mW #uklad.wp div.wl #k1 {
  width: 420px;
  float: right;
}

#kontener.szS #uklad.wl div.wl #k1,
#kontener.szS #uklad.wp div.wl #k1,
#kontener.mS #uklad.wl div.wl #k1,
#kontener.mS #uklad.wp div.wl #k1 {
  width: 555px;
  float: right;
}

#kontener.szW #uklad.wl div.wp #k1,
#kontener.szW #uklad.wp div.wp #k1,
#kontener.mW #uklad.wl div.wp #k1,
#kontener.mW #uklad.wp div.wp #k1 {
  width: 420px;
  float: left;
}

#kontener.szS #uklad.wl div.wp #k1,
#kontener.szS #uklad.wp div.wp #k1,
#kontener.mS #uklad.wl div.wp #k1,
#kontener.mS #uklad.wp div.wp #k1 {
  width: 555px;
  float: left;
}

#kontener.szW #uklad.wl div.sl #k1,
#kontener.szW #uklad.sl div.wl #k1,
#kontener.szW #uklad.wp div.sl #k1,
#kontener.szW #uklad.wp div.sp #k1,
#kontener.szW #uklad.sp div.wl #k1,
#kontener.mW #uklad.wl div.sl #k1,
#kontener.mW #uklad.sl div.wl #k1,
#kontener.mW #uklad.wp div.sl #k1,
#kontener.mW #uklad.wp div.sp #k1,
#kontener.mW #uklad.sp div.wl #k1 {
  width: 280px;
  float: right;
}

#kontener.szS #uklad.wl div.sl #k1,
#kontener.szS #uklad.sl div.wl #k1,
#kontener.szS #uklad.wp div.sl #k1,
#kontener.szS #uklad.wp div.sp #k1,
#kontener.szS #uklad.sp div.wl #k1,
#kontener.mS #uklad.wl div.sl #k1,
#kontener.mS #uklad.sl div.wl #k1,
#kontener.mS #uklad.wp div.sl #k1,
#kontener.mS #uklad.wp div.sp #k1,
#kontener.mS #uklad.sp div.wl #k1 {
  width: 415px;
  float: right;
}

#kontener.szW #uklad.wl div.sp #k1,
#kontener.szW #uklad.wp div.sp #k1,
#kontener.szW #uklad.sp div.wp #k1,
#kontener.szW #uklad.sl div.wp #k1,
#kontener.mW #uklad.wl div.sp #k1,
#kontener.mW #uklad.wp div.sp #k1,
#kontener.mW #uklad.sp div.wp #k1,
#kontener.mW #uklad.sl div.wp #k1{
  width: 280px;
  float: left;
}

#kontener.szS #uklad.wl div.sp #k1,
#kontener.szS #uklad.wp div.sp #k1,
#kontener.szS #uklad.sp div.wp #k1,
#kontener.szS #uklad.sl div.wp #k1,
#kontener.mS #uklad.wl div.sp #k1,
#kontener.mS #uklad.wp div.sp #k1,
#kontener.mS #uklad.sp div.wp #k1,
#kontener.mS #uklad.sl div.wp #k1{
  width: 415px;
  float: left;
}

/**
 * @section           Ustawienia kolumny k2 dla ukladu SZTYWNEGO 3-kolumnowego
 */
/* ------------------------------------------------------------------------- */
div#kontent.wl #k2,
div#kontent.wp #k2,
div#kontent.sp #k2,
div#kontent.sl #k2 {
  display: block;
  width: 200px;
}

#uklad.sl div.sl #k2,
#uklad.sp div.sl #k2,
#uklad.wp div.sl #k2,
#uklad.wl div.sl #k2 {
  width: 314px;
  float: left;
}

#uklad.sp div.sp #k2,
#uklad.sl div.sp #k2,
#uklad.wl div.sp #k2,
#uklad.wp div.sp #k2 {
  width: 314px;
  float: right;
}

/**
 * @section           Ustawienia kolumny k3 dla roznych kombinacji ukladow
 *                    SZTYWNYCH 3-kolumnowych
 */
/* ------------------------------------------------------------------------- */
#uklad.wl div.sl #k3,
#uklad.wp div.sl #k3,
#uklad.wl div.sp #k3,
#uklad.wp div.sp #k3 {
  width: 174px;
}

/**
 * @subsection        Ustawienia ostepow w k1 w <div class="blok"> dla
 *                    ukladow 3-kolumnowych
 */
/* ------------------------------------------------------------------------- */
#uklad.wp div.wl #k1 .blok,
#uklad.wp div.sl #k1 .blok,
#uklad.sp div.wl #k1 .blok {
  margin: 0 15px 0 15px;
}


/**
 * @section           LAYOUTY ELASTYCZNE
 */
/* ------------------------------------------------------------------------- */
/**
 * @subsection        2-kolumnowe
 */
/* ------------------------------------------------------------------------- */
/**
 * @subsubsection     Ustawienia kontentu w ukladzie elastycznym 2 kolumnowym
 */
/* ------------------------------------------------------------------------- */
.el .wl #kontent {
  padding: 0 0 0 174px;
}

.el .wp #kontent {
  padding: 0 194px 0 0;
}

.el .sl #kontent {
  padding: 0 0 0 332px;
}

.el .sp #kontent {
  padding: 0 332px 0 0;
}

/**
 * @subsubsection     Ustawienia kolumny k3 w ukladzie elastycznym 2 kolumnowym
 */
/* ------------------------------------------------------------------------- */
.el .wl #k3 {
  margin-left: -174px; 
}

.el .wp #k3 {
  margin-right: -174px; 
}

.el .sl #k3 {
  margin-left: -310px; 
}

.el .sp #k3 {
  margin-right: -310px; 
}

/**
 * @subsection        3-kolumnowy
 */
/* ------------------------------------------------------------------------- */
/**
 * @subsubsection     Ustawienia rozmiarow kontentu w ukladzie elastycznym
 *                    3-kolumnowym
 */
/* ------------------------------------------------------------------------- */
#kontener.el #uklad.wl div.wl {
  padding: 0 10px 0 385px;
}

#kontener.el #uklad.wl div.wp {
  padding: 0 220px 0 185px;
}

#kontener.el #uklad.wl div.sl,
#kontener.el #uklad.sl div.wl {
  padding: 0 0 0 460px;
}

#kontener.el #uklad.wl div.sp {
  padding: 0 300px 0 170px;
}

#kontener.el #uklad.wp div.wl {
  padding: 0 190px 0 200px;
}

#kontener.el #uklad.wp div.wp {
  padding: 0 405px 0 0;
}

#kontener.el #uklad.wp div.sl {
  padding: 0 190px 0 300px;
}

#kontener.el #uklad.wp div.sp,
#kontener.el #uklad.sp div.wp {
  padding: 0 505px 0 0;
}

#kontener.el #uklad.sl div.wp {
  padding: 0 160px 0 310px;
}

#kontener.el #uklad.sl div.sl {
  padding: 0 0 0 610px;
}

#kontener.el #uklad.sp div.sl,
#kontener.el #uklad.sl div.sp {
  padding: 0 300px 0 310px;
}

#kontener.el #uklad.sp div.wl {
  padding: 0 332px 0 200px;
}

#kontener.el #uklad.sp div.wp {
  padding: 0 470px 0 0;
}

#kontener.el #uklad.sp div.sp {
  padding: 0 610px 0 0;
}

/**
 * @subsubsection     Ustawienia kolumny k1 w ukladzie elastycznym 3 kolumnowym
 */
/* ------------------------------------------------------------------------- */
#kontener.el #uklad.sl div.sl #k1,
#kontener.el #uklad.sl div.wl #k1,
#kontener.el #uklad.wl div.wl #k1,
#kontener.el #uklad.wl div.sl #k1,
#kontener.el #uklad.wp div.wl #k1,
#kontener.el #uklad.wp div.sl #k1,
#kontener.el #uklad.sp div.wl #k1,
#kontener.el #uklad.sp div.sl #k1{
  float: right;
}

/**
 * @subsubsection     Ustawienia kolumny k2 w ukladzie elastycznym 3 kolumnowym
 */
/* ------------------------------------------------------------------------- */
#kontener.el #uklad.wl div.wl #k2,
#kontener.el #uklad.sl div.wl #k2,
#kontener.el #uklad.wp div.wl #k2,
#kontener.el #uklad.sp div.wl #k2 {
  width: 200px;
  margin-left: -200px;
}

#kontener.el #uklad.wp div.sl #k2,
#kontener.el #uklad.wl div.sl #k2,
#kontener.el #uklad.sl div.sl #k2,
#kontener.el #uklad.sp div.sl #k2 {
  width: 300px;
  margin-left: -300px;
}

#kontener.el #uklad.wp div.wp #k2,
#kontener.el #uklad.wl div.wp #k2,
#kontener.el #uklad.sl div.wl #k2,
#kontener.el #uklad.sl div.wp #k2,
#kontener.el #uklad.sp div.wp #k2{
  width: 200px;
  margin-right: -200px;
}

#kontener.el #uklad.wl div.sl #k2,
#kontener.el #uklad.sl div.sl #k2,
#kontener.el #uklad.sl div.sp #k2,
#kontener.el #uklad.wl div.sp #k2,
#kontener.el #uklad.wp div.sp #k2,
#kontener.el #uklad.sp div.sp #k2 {
  width: 300px;
  margin-right: -300px;
}

#kontener.el #uklad.sp div.sl #k2 {
  width: 300px;
  margin-left: -310px;
}

/**
 * @subsubsection     Ustawienia kolumny k3 w ukladzie elastycznym 3 kolumnowym
 */
/* ------------------------------------------------------------------------- */
#kontener.el #uklad.wl div.wl #k3 {
  width: 174px;
  margin-left: -385px;
}

#kontener.el #uklad.wp div.wl #k3,
#kontener.el #uklad.wl div.sp #k3,
#kontener.el #uklad.wl div.wp #k3 {
  width: 174px;
  margin-left: -170px; 
}

#kontener.el #uklad.wl div.sl #k3 {
  width: 160px;
  margin-left: -470px;
}

#kontener.el #uklad.wp div.wp #k3 {
  width: 174px;
  margin-right: -385px;
}

#kontener.el #uklad.wp div.sl #k3 {
  width: 174px;
  margin-right: -174px;
}

#kontener.el #uklad.wp div.sp #k3 {
  width: 174px;
  margin-right: -489px;
}

#kontener.el #uklad.sl div.wl #k3 {
  width: 300px;
  margin-left: -470px;
}

#kontener.el #uklad.sl div.sl #k3 {
  width: 300px;
  margin-left: -610px;
}

#kontener.el #uklad.sl div.wp #k3,
#kontener.el #uklad.sl div.sp #k3 {
  width: 300px;
  margin-left: -310px;
}

#kontener.el #uklad.sp div.wl #k3 {
  width: 310px;
  margin-right: -310px;
}

#kontener.el #uklad.sp div.wp #k3 {
  width: 300px;
  margin-right: -470px;
}

#kontener.el #uklad.sp div.sl #k3 {
  width: 300px;
  margin-right: -300px;
}

#kontener.el #uklad.sp div.sp #k3 {
  width: 300px;
  margin-right: -610px;
}

/**
 * @subsubsection     Elastyczna szerokosc bocznej kolumny dla ukladu
 *                    2 kolumnowego
 */
/* ------------------------------------------------------------------------- */
#kontener.el #uklad.ekW #kontent,
#kontener.el #uklad.ekS #kontent {
  padding: 0;
}

#kontener.el #uklad.wl.ekW #kontent-glowny,
#kontener.el #uklad.wp.ekW #kontent-glowny {
  width: 84%;
  margin: 0;
}

#kontener.el #uklad.sl.ekS #kontent-glowny,
#kontener.el #uklad.sp.ekS #kontent-glowny {
  width: 70%;
  margin: 0;
}

#kontener.el #uklad.wl.ekW #k3,
#kontener.el #uklad.wp.ekW #k3 {
  width: 16%;
  margin: 0;
}

#kontener.el #uklad.sl.ekS #k3,
#kontener.el #uklad.sp.ekS #k3 {
  width: 30%;
  margin: 0;
}
/* koniec elastycznego layoutu */

.szS #uklad.wl #kontent-glowny,
.mS #uklad.wl #kontent-glowny,
.szS #uklad.sl #kontent-glowny,
.mS #uklad.sl #kontent-glowny {
  padding-right: 20px;
}

.szS #uklad.wp #k3,
.mS #uklad.wp #k3,
.szS #uklad.sp #k3,
.mS #uklad.sp #k3 {
  padding-right: 20px;
}

#kontener.szS #uklad.wl div.wl #kontent-glowny,
#kontener.mS #uklad.wl div.wl #kontent-glowny,
#kontener.szS #uklad.wl div.wp #kontent-glowny,
#kontener.mS #uklad.wl div.wp #kontent-glowny {
  width: 755px;
}

#kontener.szS #uklad.wp div.wl #kontent-glowny,
#kontener.mS #uklad.wp div.wl #kontent-glowny,
#kontener.szS #uklad.wp div.wp #kontent-glowny,
#kontener.mS #uklad.wp div.wp #kontent-glowny {
  width: 770px;
}

#kontener.szS #uklad.wp div.wl #k1,
#kontener.mS #uklad.wp div.wl #k1 {
  width: 570px;
}

#kontener.szS #uklad.wp div.sp #k1,
#kontener.mS #uklad.wp div.sp #k1,
#kontener.szS #uklad.wl div.sp #k1,
#kontener.mS #uklad.wl div.sp #k1{
  width: 420px;
  float: left;
}

#kontener.szS #uklad.wl div.sl #k1,
#kontener.mS #uklad.wl div.sl #k1,
#kontener.szS #uklad.wp div.sl #k1,
#kontener.mS #uklad.wp div.sl #k1 {
  width: 435px;
}


#kontener.el #uklad.blank #kontent.wl,
#kontener.szS #uklad.blank #kontent.wl {
  padding: 0 20px 0 200px;
}

#kontener.el #uklad.blank #kontent.wl #k2,
#kontener.szS #uklad.blank #kontent.wl #k2 {
  width: 200px;
  margin-left: -200px;
}

#kontener.el #uklad.blank #kontent.wl #k3,
#kontener.szS #uklad.blank #kontent.wl #k3 {
  display: none;
}

#kontener.el #uklad.blank #kontent.wl #k1,
#kontener.szS #uklad.blank #kontent.wl #k1 {
  float: right;
}

#kontener.el #uklad.wp #kontent #k3 .blok,
#kontener.el #uklad.wp #kontent.wl #k3 .blok {
  width: 170px;
}

#kontener.el #uklad.sl #kontent #k3 {
  margin-left: -332px;
}

#kontener.el #uklad.sl #kontent #k1 .blok {
  margin: 0 20px 0 0;
}