html {
  height: 100%;
}
body {
  background: #dac39a url(/images/bg_strips.png) repeat top left;
  height: 100%;
}

/* *************************** */

#elHeader {
  text-align: center;
  background: #f2d194 url(/images/bg_header.png) repeat-x bottom left;
  height: 360px;
  position: relative;
}

#elHeader > div {
  background: transparent url(/images/content_bg_shadow.png) repeat-y top center;
}

#elHeader > div > img {
  vertical-align: bottom; /* bo robi taki margin na dole..*/
}

#elMainMenu {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 980px; /* elContent.width */
  margin-left: -483px; /* elContent.width / 2 + 7px */
  padding: 0;

  list-style-type: none;
}
#elMainMenu > li {
  float: left;
  background: transparent none no-repeat;
}
#elMainMenu > li > a {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
  height: 68px;
  width: 138px;
  display: block;
  background: transparent none no-repeat;

  /* font-size: 11px; */
  font-size: 0;
  padding: 40px 5px 0; /* czy niedawno nie zmieniałem z 40 na 45? Teraz zmieniłem na 40 */
  line-height: 1;

  color: white;

  text-decoration: none;
}
#elMainMenu > li > a:focus {
  outline: none;
}

#elMainMenu > li.index                { background-image: url(/images/mm_home_pl.png); }
#elMainMenu > li.index     > a:hover  { background-image: url(/images/mm_home_pl_on.png); }
#elMainMenu > li.index.active     > a { background-image: url(/images/mm_home_pl_on.png); }
#elMainMenu > li.pokoje               { background-image: url(/images/mm_pokoje_pl.png); }
#elMainMenu > li.pokoje    > a:hover  { background-image: url(/images/mm_pokoje_pl_on.png); }
#elMainMenu > li.pokoje.active    > a { background-image: url(/images/mm_pokoje_pl_on.png); }
#elMainMenu > li.kulinaria            { background-image: url(/images/mm_kulinaria_pl.png); }
#elMainMenu > li.kulinaria > a:hover  { background-image: url(/images/mm_kulinaria_pl_on.png); }
#elMainMenu > li.kulinaria.active > a { background-image: url(/images/mm_kulinaria_pl_on.png); }
#elMainMenu > li.biznes               { background-image: url(/images/mm_biznes_pl.png); }
#elMainMenu > li.biznes    > a:hover  { background-image: url(/images/mm_biznes_pl_on.png); }
#elMainMenu > li.biznes.active    > a { background-image: url(/images/mm_biznes_pl_on.png); }
#elMainMenu > li.imprezy              { background-image: url(/images/mm_imprezy_pl.png); }
#elMainMenu > li.imprezy   > a:hover  { background-image: url(/images/mm_imprezy_pl_on.png); }
#elMainMenu > li.imprezy.active   > a { background-image: url(/images/mm_imprezy_pl_on.png); }
#elMainMenu > li.atrakcje             { background-image: url(/images/mm_atrakcje_pl.png); }
#elMainMenu > li.atrakcje  > a:hover  { background-image: url(/images/mm_atrakcje_pl_on.png); }
#elMainMenu > li.atrakcje.active  > a { background-image: url(/images/mm_atrakcje_pl_on.png); }
#elMainMenu > li.galeria              { background-image: url(/images/mm_galeria_pl.png); }
#elMainMenu > li.galeria   > a:hover  { background-image: url(/images/mm_galeria_pl_on.png); }
#elMainMenu > li.galeria.active   > a { background-image: url(/images/mm_galeria_pl_on.png); }

html[lang|='en'] #elMainMenu > li.index                { background-image: url(/images/mm_home_en.png); }
html[lang|='en'] #elMainMenu > li.index     > a:hover  { background-image: url(/images/mm_home_en_on.png); }
html[lang|='en'] #elMainMenu > li.index.active     > a { background-image: url(/images/mm_home_en_on.png); }
html[lang|='en'] #elMainMenu > li.pokoje               { background-image: url(/images/mm_pokoje_en.png); }
html[lang|='en'] #elMainMenu > li.pokoje    > a:hover  { background-image: url(/images/mm_pokoje_en_on.png); }
html[lang|='en'] #elMainMenu > li.pokoje.active    > a { background-image: url(/images/mm_pokoje_en_on.png); }
html[lang|='en'] #elMainMenu > li.kulinaria            { background-image: url(/images/mm_kulinaria_en.png); }
html[lang|='en'] #elMainMenu > li.kulinaria > a:hover  { background-image: url(/images/mm_kulinaria_en_on.png); }
html[lang|='en'] #elMainMenu > li.kulinaria.active > a { background-image: url(/images/mm_kulinaria_en_on.png); }
html[lang|='en'] #elMainMenu > li.biznes               { background-image: url(/images/mm_biznes_en.png); }
html[lang|='en'] #elMainMenu > li.biznes    > a:hover  { background-image: url(/images/mm_biznes_en_on.png); }
html[lang|='en'] #elMainMenu > li.biznes.active    > a { background-image: url(/images/mm_biznes_en_on.png); }
html[lang|='en'] #elMainMenu > li.imprezy              { background-image: url(/images/mm_imprezy_en.png); }
html[lang|='en'] #elMainMenu > li.imprezy   > a:hover  { background-image: url(/images/mm_imprezy_en_on.png); }
html[lang|='en'] #elMainMenu > li.imprezy.active   > a { background-image: url(/images/mm_imprezy_en_on.png); }
html[lang|='en'] #elMainMenu > li.atrakcje             { background-image: url(/images/mm_atrakcje_en.png); }
html[lang|='en'] #elMainMenu > li.atrakcje  > a:hover  { background-image: url(/images/mm_atrakcje_en_on.png); }
html[lang|='en'] #elMainMenu > li.atrakcje.active  > a { background-image: url(/images/mm_atrakcje_en_on.png); }
html[lang|='en'] #elMainMenu > li.galeria              { background-image: url(/images/mm_galeria_en.png); }
html[lang|='en'] #elMainMenu > li.galeria   > a:hover  { background-image: url(/images/mm_galeria_en_on.png); }
html[lang|='en'] #elMainMenu > li.galeria.active   > a { background-image: url(/images/mm_galeria_en_on.png); }

html[lang|='de'] #elMainMenu > li.index                { background-image: url(/images/mm_home_de.png); }
html[lang|='de'] #elMainMenu > li.index     > a:hover  { background-image: url(/images/mm_home_de_on.png); }
html[lang|='de'] #elMainMenu > li.index.active     > a { background-image: url(/images/mm_home_de_on.png); }
html[lang|='de'] #elMainMenu > li.pokoje               { background-image: url(/images/mm_pokoje_de.png); }
html[lang|='de'] #elMainMenu > li.pokoje    > a:hover  { background-image: url(/images/mm_pokoje_de_on.png); }
html[lang|='de'] #elMainMenu > li.pokoje.active    > a { background-image: url(/images/mm_pokoje_de_on.png); }
html[lang|='de'] #elMainMenu > li.kulinaria            { background-image: url(/images/mm_kulinaria_de.png); }
html[lang|='de'] #elMainMenu > li.kulinaria > a:hover  { background-image: url(/images/mm_kulinaria_de_on.png); }
html[lang|='de'] #elMainMenu > li.kulinaria.active > a { background-image: url(/images/mm_kulinaria_de_on.png); }
html[lang|='de'] #elMainMenu > li.biznes               { background-image: url(/images/mm_biznes_de.png); }
html[lang|='de'] #elMainMenu > li.biznes    > a:hover  { background-image: url(/images/mm_biznes_de_on.png); }
html[lang|='de'] #elMainMenu > li.biznes.active    > a { background-image: url(/images/mm_biznes_de_on.png); }
html[lang|='de'] #elMainMenu > li.imprezy              { background-image: url(/images/mm_imprezy_de.png); }
html[lang|='de'] #elMainMenu > li.imprezy   > a:hover  { background-image: url(/images/mm_imprezy_de_on.png); }
html[lang|='de'] #elMainMenu > li.imprezy.active   > a { background-image: url(/images/mm_imprezy_de_on.png); }
html[lang|='de'] #elMainMenu > li.atrakcje             { background-image: url(/images/mm_atrakcje_de.png); }
html[lang|='de'] #elMainMenu > li.atrakcje  > a:hover  { background-image: url(/images/mm_atrakcje_de_on.png); }
html[lang|='de'] #elMainMenu > li.atrakcje.active  > a { background-image: url(/images/mm_atrakcje_de_on.png); }
html[lang|='de'] #elMainMenu > li.galeria              { background-image: url(/images/mm_galeria_de.png); }
html[lang|='de'] #elMainMenu > li.galeria   > a:hover  { background-image: url(/images/mm_galeria_de_on.png); }
html[lang|='de'] #elMainMenu > li.galeria.active   > a { background-image: url(/images/mm_galeria_de_on.png); }

/* Kontroli edycji głównego menu - są zdefiniowane tutaj, blisko, bo korzystają z podobnych obrazków */

#page_menu_position ,
#page_menu_position > option {
  background: white none no-repeat left center;
  color: black;
  height: 29px;
  line-height: 2 !important;
  padding: 3px 0 3px 60px;
  margin-left: 3px;
  border-color: #ccc;
}

#page_menu_position.home     , #page_menu_position > option[value='home']      { background-image: url(/images/mm_home_mini.png); }
#page_menu_position.pokoje   , #page_menu_position > option[value='pokoje']    { background-image: url(/images/mm_pokoje_mini.png); }
#page_menu_position.kulinaria, #page_menu_position > option[value='kulinaria'] { background-image: url(/images/mm_kulinaria_mini.png); }
#page_menu_position.biznes   , #page_menu_position > option[value='biznes']    { background-image: url(/images/mm_biznes_mini.png); }
#page_menu_position.imprezy  , #page_menu_position > option[value='imprezy']   { background-image: url(/images/mm_imprezy_mini.png); }
#page_menu_position.atrakcje , #page_menu_position > option[value='atrakcje']  { background-image: url(/images/mm_atrakcje_mini.png); }
#page_menu_position.galeria  , #page_menu_position > option[value='galeria']   { background-image: url(/images/mm_galeria_mini.png); }

/* -- i koniec edycji kontrolek */


#elContent {
  display: block;
  width: 980px; /* elContent.width */
  padding: 0 11px;

  margin: 0 auto;

  min-height: 600px; /* na oko */

  position: relative;
  overflow: hidden; /* HACK - łapiemy floats */

  color: black;
  background: transparent url(/images/content_bg.png) repeat-y top center;
  z-index: 1;
}

#elPage ,
#elPage_before ,
#elPage_after {
  display: block;
  width: 674px; /* elPage.width = elContent.width - elBoxes.width - elPage.margins */
  margin-right: 8px; /* elPage.margins */
  position: relative;
  float: right;

  background: white url(/images/page_bg.png) repeat-y top left;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
  border: none;
}

#elPage {
  padding: 0 10px;
  min-height: 3em;
}

#elPage_before ,
#elPage_after {
  height: 10px;
  background: transparent url(/images/page_bg_edges.png) repeat-y top left;
}

#elPage_before {
  margin-top: 8px;
}

#elPage_after {
  margin-bottom: 8px;
  background-position: bottom left;
}

.wide > #elPage ,
.wide > #elPage_before ,
.wide > #elPage_after {
  width: 964px; /* elContent.width - elPage.margins */
}
.wide > #elPage {
  background-image: url(/images/page_bg_wide.png);
}
.wide > #elPage_before ,
.wide > #elPage_after {
  background-image: url(/images/page_bg_edges_wide.png);
}

/* ************************** *
 * Strona specjalna: index    *
 *      - bez tła             *
 * ************************** */

.index#elPage_before ,
.index#elPage ,
.index#elPage_after {
  background: transparent;
}


/* ************************************* *
 * Box na newsy                          *
 * i box na promocje                     *
 *         - oba wyglądają jak #elPage   *
 * ************************************* */
.Box_in ,
.Box_before ,
.Box_after {
  display: block;
  position: relative;
  width: 100%;

  background: white url(/images/newsbox_bg.png) repeat-y top left;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
  border: none;
}


.Box_in {
  padding: 0 1em;
}

.Box_before ,
.Box_after {
  height: 10px;
  background: transparent url(/images/newsbox_bg_edges.png) repeat-y top left;
}

.Box_before {
  margin-top: 8px;
}

.Box_after {
  margin-bottom: 8px;
  background-position: bottom left;
}


/* odmiany: */

.newsBox {
  float: left;
  width: 460px; /* newsBox.width */
  margin-left: -16px;
}


.promoBox {
  float: right;
  width: 214px;
  margin-right: -10px; /* elPage.margin */
}

.promoBox > .Box_in {
  background-image: url(/images/promobox_bg.png);
}


.promoBox > .Box_before ,
.promoBox > .Box_after {
  background-image: url(/images/promobox_bg_edges.png);
}

/* **************************** *
 *        Boxy na newsy         *
 * **************************** */

.promoItem ,
.newsItem {
  position: relative;
  overflow: hidden; /* hack to catch floats */
  margin-top: 1em;
}
.promoItem:first-child ,
.newsItem:first-child {
  margin-top: 0;
}

.newsTitle {
  font-size: inherit;
  font-weight: normal;

  color: #27c; /* a.color */
  text-decoration: underline;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.3em;
}

.newsTitle > strong {
  font-weight: bolder;
}

.Box_in p.more {
  text-align: right;
  margin-top: 1em;
  margin-bottom: 0;
}



/* *************************** *
 * Nagłówek strony             *
 * *************************** */



#elHeaderShadow {
  display: block;
  margin:  0 0 -216px;
  height:       216px;
  border: none;
  background: transparent url(/images/bg_header_shadow.png) repeat-x top left;
}

#elFooterShadow {
  display: block;
  margin: -21px 0 0;
  height:  21px;
  border: none;
  background: transparent url(/images/bg_footer_shadow.png) repeat-x top left;
}

#elFooterSection {
  background: #f3d49c url(/images/bg_footer.png) repeat-x top left;
  display: block;
}

#elFooter {
  width: 1002px; /* elContent.width + background shadows (11px) */
  margin: 0 auto;
  padding: 0 20px;
  background: transparent url(/images/content_bg_shadow.png) repeat-y top center;
  color: white;
  min-height: 3em;
  position: relative;
  overflow: hidden;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
}



#elBoxes {
  width: 274px; /* elBoxes.width */
  float: left;
  margin: 8px 0 8px 8px;
}
.wide > #elBoxes {
  display: none; /* w tym wypadku przeglądarki z CSS mają gorzej ;-) */
}

#elBoxes > div {
  background: transparent url(/images/box_bg.png) no-repeat bottom left;
  margin: 0 0 11px;
  padding: 0 8px 8px;
  position: relative;
}
#elBoxes > div#elSearch:before {
  height: 7px;
  font-size: 0;
  content: url(/images/box_top_plain.png);
  display: block;
  margin: 0 -8px;
}

#elBoxes > div > h1 {
  background: red url(/images/box_top_red.png) no-repeat top left;
  color: white;
  font-size: larger;
  text-align: left;
  margin: 0 -8px;
  padding: 5px 15px 0;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
  height: 35px;
  overflow: hidden;
  font-weight: bold;
}
#elBoxes > div.red > h1 {
  background-color: #bd3450;
  background-image: url(/images/box_top_red.png);
}
#elBoxes > div.brown > h1 {
  background-color: #86603b;
  background-image: url(/images/box_top_brown.png);
}

/* **************************** *
 * Formatka szukania            *
 * **************************** */

#elSearch > form > p > input {
  vertical-align: middle;
  width: 210px;
  background: #F5EEE4;
  border-color: #ba8;
}
#elSearch > form > p > button {
  vertical-align: middle;
  border: none;
  font-size: 0;
  height: 29px;
  width: 29px;
  background: transparent url(/images/search_button.png) no-repeat;
  margin-left: 5px;
}

/* **************************** *
 * Formatka rezerwacji          *
 * **************************** */

#elReserve {
  font-size: smaller;
}

#elReserve li {
  margin-bottom: 0.5em;
}
#elReserve label {
  min-width: 90px;
  margin-right: 5px;
}
#elReserve input ,
#elReserve select {
  min-width: 150px;
  width: 150px;
  background: #F5EEE4;
  border-color: #ba8;

  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
}
  html.lang_en #elReserve label[for='reservation_phone'] {
    min-width: 110px; /* tłumaczenie jest zbyt długie.. */
  }
  html.lang_en #elReserve #reservation_phone {
    width: 130px;
    min-width: 130px;
  }

#new_reservation button,
#elReserve button {
  background: transparent url(/images/button_round.png) no-repeat center center;
  color: white;
  border: none;
  width: 109px;
  height: 27px;
}

#elReserve fieldset.buttons {
  text-align: center;
}

#new_reservation fieldset.buttons {
  margin-bottom: 1em;
}

#elReserve p.notice {
  color: green;
  font-weight: bolder;
}

#elReserve > .errorExplanation > h2,
#elReserve > .errorExplanation > p {
  display: none;
}

/* ******************** *
 * date_select          *
 * ******************** */

select.date {
  min-width: 45px;
  width: auto;
  padding-left: 0.2em;
}

select.date[id$='_3i'] {
  text-align: center;
}
select.date[id$='_2i'] {
  margin-left: 2px;
  width: 100px;
}



#elReserve select.date {
  min-width: 40px;
  width: auto;
  padding-left: 0.2em;
}

#elReserve select.date[id$='_3i'] {
  text-align: center;
}
#elReserve select.date[id$='_2i'] {
  margin-left: 2px;
  /*width: 100px; -- uparli się, żeby wcisnąć tu rok. trzeba zwęzić selecty. */
}

/* **************************** *
 * Menu boczne                  *
 * **************************** */

.elMenu {
  list-style-type: none;
  margin-bottom: 8px;
  padding: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #BBB; /* taki sam jak w newsach (#DDD) był zbyt mało widoczny - tam tło było białe */
}

.elMenu ol {
  list-style-type: none;
  padding: 0;
  padding-left: 18px;
}

.elMenu li > a {
  display: block;
  height: 35px;

  font-size: 15px;
  line-height: 2;
  padding: 0 0 0 15px;
  background: transparent url(/images/btl_rolloff.png) no-repeat top right;

  overflow: hidden;
  position: relative;
  white-space: nowrap; /* tak, chowamy zbyt długie opcje. */

  font-weight: bold;
  color: white;
}
.elMenu li li > a {
  background-image: url(/images/bts_rolloff.png);
}

.elMenu li.inPath > a {
  background-image: url(/images/btl_rollon.png);
}

.elMenu li li.isKid > a ,
.elMenu li li.isBrother > a ,
.elMenu li li.inPath > a {
  background-image: url(/images/bts_rollon.png);
}

.elMenu li.selected > a ,
.elMenu li > a:hover {
  text-decoration: none;
  background-image: url(/images/btl_rollover.png);
}

.elMenu li li.selected > a ,
.elMenu li li > a:hover {
  background-image: url(/images/bts_rollover.png);
}

.elMenu li > a:focus {
  outline: none; /* browser's default css */
}

.elMenu li > a > .hasKids {
  background: transparent url(/images/bt_plusminus.png) no-repeat top left;
  height: 11px;
  width:  11px;
  top:   10px;
  right: 10px;
  display: block;
  position: absolute;
}
.elMenu li.inPath   > a > .hasKids ,
.elMenu li.selected > a > .hasKids {
  background-position: top right;
}

/* **************************** *
 * Mapa serwisu                 *
 * **************************** */

.siteMap {
  list-style-type: inside;
  padding: 0;
  margin-left: 3em;
}
#siteMap {
  border-bottom: 1px solid #ccc;
}

.siteMap > li {
  border-top: 1px solid #ccc;
  position: relative;
}

.siteMap > li > a:empty {
  border: 1px dashed yellow;
  border-left-width: 3em;
}

.siteMap > li > .icons {
  position: absolute;
  top: 0;
  right: 0;
}
.siteMap > li > .icons > a {
  margin-left: 5px;
}
.siteMap > li > .icons > span.placeholder {
  padding-left: 14px; /* on jest empty */
  margin-left: 5px;
}

.siteMap > li > .index {
  font-size: smaller;
  color: #999;
  margin-left: 1em;
}

/* ************************* *
 * Ikonki edycji na stronach *
 * ************************* */

.elEditIcons ,
.elFotoIcons ,
.elPageIcons {
  position: absolute;
  top: 0;
  right: 0;
}
.elEditIcons > a ,
.elFotoIcons > a ,
.elPageIcons > a {
  margin-right: 5px;
  opacity: 0.4;
}

.elEditIcons > a:hover ,
.elFotoIcons > a:hover ,
.elPageIcons > a:hover {
  opacity: 1;
}

.elFotoThumbs > span > .elFotoIcons {
  top: -4px;
}

.Box_in > .elPageIcons {
  top: -16px;
}


/* ************************* *
 * Miniaturki zdjęć          *
 * ************************* */

.elFotoThumbs {
  margin-top: 2em;
  position: relative;
  overflow: hidden;
}
.elFotoThumbs > span {
  display: block;
  float: left;
  margin: 6px;
  position: relative;
  text-align: center;
  width: 200px; /* img ma 180 */
  padding-top:  6px;
  height:     194px;

  background: transparent url(/images/gallery_thumb_bg.png) no-repeat center center;
}

.elFotoThumbs > span.right {
  float: right;
}

.elFotoThumbs > span > a  {
  vertical-align: middle;
  line-height: 180px;
}

.elFotoThumbs > span > a > img {
  vertical-align: inherit;
}

.elFotoThumbs > span > em {
  display: block;
  margin: -12px auto 0;
  width: 7em;
  background: white;
  text-align: center;
  font-style: italic;
  font-weight: normal;
}

/* ************************* *
 *          Zdjęcia          *
 * ************************* */

.elFoto {
  position: relative;
  text-align: center;
}

.elFoto > p {
  margin-top: 1em;
  text-align: center;
}

/* ************************* *
 *       Lokalizator         *
 * ************************* */

.elLokalizator {
  position: absolute;
  top: -9px;
  left: 10px;
  font-size: smaller;
  color: #999;
}
.elLokalizator > a {
  color: inherit;
}

/* ********************************************************* *
 *              Forms  -  fieldset                           *
 * ********************************************************* */

fieldset {
  clear: left;
  border: 1px none silver; /* inna reguła włączy border-style, albo i nie włączy */
  background: transparent; /* CLEARING */
  line-height: 1.8; /* defaultowa 1.4 to chyba za mało - inputy mają tu ramki. */
}

legend {
  font-size: larger;
  font-weight: bolder;
}

/* ********************************************************* *
 *              Forms  -  fieldset  -  ol                    *
 * ********************************************************* */


fieldset > ol {
  padding-left: 0; /* niweluję domyślną regułę dla list */
  list-style-type: none;
  margin-top: 1em;
}

fieldset > ol > li {
  clear: left;
  margin-bottom: 1em;
}

  fieldset > legend[id^='fold_'] {
    background: transparent url(/images/edit_minus.png) no-repeat center left;
    padding-left: 18px;
  }
  fieldset > legend.folded {
    background-image: url(/images/edit_plus.png);
  }
  fieldset > legend.folded + ol { /* JavaScript nadaje i usuwa tę klasę po kliknięciu */
    display: none;
  }

/* ********************************************************* *
 *              Forms  -  fieldset  -  ol  - label           *
 * ********************************************************* */


fieldset > ol > li > label ,
fieldset > ol > li > .fieldWithErrors > label {
  float: left;
  width: auto;
  min-width: 15em;
  margin-right: 1em;

  text-align: left;
}
fieldset > ol > li > .fieldWithErrors > label {
  background: yellow;
}

span.required {
  color: red;
  float: left;
  width: 1em;
  margin-left: -1em;
  font-weight: bolder;
}
legend span.required {
  float: none;
  margin: 0;
}
em.required {
  font-style: normal;
  color: red;
  font-weight: bolder;
}

/* ********************************************************* *
 *              Forms  -  fieldset  -  ol  - inputs          *
 * ********************************************************* */

fieldset > ol > li > select {
  min-width: 15em;
}

fieldset > ol > li > select[size] {
}


#page_catnames > option {
  padding-left: 1em;
}
#page_catnames > option[value=''] {
  color: #999;
}
#page_catnames > option[value='']:checked {
  /* -- i tak nie działa. OS wymusza pewnie standardowy kolor.
  color: white !important;
  background-color: #666 !important;
  */
}



fieldset > ol > li > .mceEditor,
fieldset > ol > li > textarea {
  display: block;
  clear: left;
  width: 100%;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
}
.mceLayout {
  width: inherit !important;
}

fieldset > ol > li > input[type='text'] ,
fieldset > ol > li > input[type='password'] {
  width: 30em; /* to są te długie pola - spokojnie 60 się zmieści */
}
fieldset > ol > li > input[type='checkbox'] {

}
fieldset > ol > li > input[type='radio'] {

}

input[size='3'] { width: 3em !important; }
input[size='5'] { width: 5em !important; }
input[size='20'] { width: 20em !important; }

input ,
select,
textarea {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: inherit !important;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing:     border-box;
  box-sizing:         border-box;
  border: 1px solid black;
}
input[readonly] ,
textarea[readonly] {
  background-color: #ccc;
  border-color: black;
  color: #333;
}


fieldset.publish {
  font-size: larger;
  line-height: 1;
  color: #600;
  margin-right: 2em;
}
fieldset.publish > ol {
  float: right;
}
fieldset.publish > ol > li > label {
  text-align: right;
}


.fieldWithErrors > input ,
.fieldWithErrors > select ,
.fieldWithErrors > textarea {
  outline: 1px solid yellow;
}

/* ******************************* *
 *      Error messages in edit     *
 * ******************************* */

.errorExplanation {
}

.errorExplanation > p {
  margin-left: 1em;
}

.errorExplanation > ul {
  list-style-type: none;
  color: red;
  font-weight: bold;
  margin-left: 2em;
}

.fieldWithErrors {
  display: inline;
}

p.errorExplanation {
  color: red;
  font-weight: bolder;
  font-size: larger;
  margin: 1em;
}

p.flashMessage {
  color: green;
}

/* ******************************* *
 *             Buttons             *
 * ******************************* */

button {
  background: #ededed;
  border: 1px solid #7f7f7f;
  color: black;

  cursor: pointer;
  font-size: x-small;

  min-width: 9em;
  padding: 0.6px;
  margin: 0 1em;

  text-align: center;
  line-height: 1.4 !important; /* browser has default with !important */
}
button:hover {
  background: #d4d4d4;
}

fieldset.buttons {
  text-align: left;
}


/* ******************************* *
 *           Login form            *
 * ******************************* */

#loginForm {
}

#elLogged {
}

#elLogged > p {
  margin: 1em;
}

#elLogged > form {
  text-align: center;
}

/* ******************************* *
 *         Wyniki szukania         *
 * ******************************* */

.searchResults > .page {
  margin: 1em 0;
}

.searchResults > .page > h2 {
  font-size: inherit;
  font-weight: bolder;

  color: #27c; /* a.color */
  text-decoration: underline;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.3em;
}

/* ******************************* *
 *         Rezerwacje              *
 * ******************************* */
.reservations {
  border-collapse: collapse;
}
.reservations th ,
.reservations td {
  border: 1px solid #ccc;
  padding: 3px 5px;
}
.reservations th.hidden ,
.reservations td.hidden {
  display: none;
}

/* ************************** *
 * Button "Wirtualny Spacer"  *
 * ************************** */
#virTourBtn {
  position: absolute;
  left: 50%;
  top: 150px;
  margin-left: 265px;

  height: 91px;
  width: 179px;

  background: transparent url(/images/tour_btn_en.png) no-repeat top right;
  color: white;
  text-indent: -100em;
  overflow: hidden;
}

html[lang|='pl'] #virTourBtn {
  background-image: url(/images/tour_btn_pl.png);
}

html[lang|='en'] #virTourBtn {
  background-image: url(/images/tour_btn_en.png);
}

html[lang|='de'] #virTourBtn {
  background-image: url(/images/tour_btn_de.png);
}

/* ************************** *
 *        Flagi języków       *
 * ************************** */
#elLanguages {
  position: absolute;
  left: 50%;
  top: 7px;

  height: 20px;
  width: 480px;
}
#elLanguages > a {
  float: right;
  height: 14px;
  width: 22px;
  color: white;
  background: transparent url(/images/flag_en.png) no-repeat top right;
  text-indent: -100em;
  overflow: hidden;
  margin-left: 4px;
}
#elLanguages > a.en {
  background-image: url(/images/flag_en.png);
}
#elLanguages > a.pl {
  background-image: url(/images/flag_pl.png);
}
#elLanguages > a.de {
  background-image: url(/images/flag_de.png);
}
#elLanguages > a.ru {
  background-image: url(/images/flag_ru.png);
}