/*  CSS dla pokładu OPISY (bez spisu)  -  2004.04.14 # 2009.04.23 # 2012.11.08 # 2015.04.8 / 2023.04.15-08.11 # 2024.04.02 */

:root
{--wys_gl: 110px;
 --szr_rk: 132px;
 --txt_rk:  20px;
 --_skala: 1;
 --txt_sr:  80px;
 --tskala: 1;
}

body
{ color: black;
}

a, table.mtab span 
{ font-family: Arial, Gulim, Iwona, sans-serif;
  color: black;
  text-decoration: none; background: transparent;
}

p
{ margin: 0.5em 2pt;
  padding: 0.5em 0;
}


/*  Lewe sub-Menu, ... */
div.lewybox
{ width: 82pt;
}

/*  Menu lewe  */
.spismenu
{ border-bottom: 3pt solid #D00;
  padding: 0 0 6pt;
  background-color: #A22;
  text-align: left;
}
.spismenu p
{ font-family: Arial, Gulim, Iwona, sans-serif;
  margin: 2pt 0 4pt; padding: 2pt 0;
  border: 2.2pt solid peru;
  color: #DB8; background-color: #904;
  font-size: 14pt; font-size: 1.28rem;
  font-weight: bold;
  letter-spacing: 3pt;
  text-align: center;
}
.spismenu .razem div
{ margin: 0; padding: 2pt 0 2pt 5pt;
  color: #DB8;
  font-family: Arial, Gulim, Iwona, sans-serif;
  font-size: 11pt; font-size: 1rem;
  font-weight: bold;
  line-height: 1.1em;
  letter-spacing: 0.8pt;
}
.spismenu .razem div.prawo
{ margin: 0; padding: 0 4pt 2pt 2pt;
  font-size: 8pt; font-size: 0.7rem;
  text-align: right;
  letter-spacing: normal;
}
.spismenu a
{ margin: 0; padding: 0.8pt 1.4pt;
  border-bottom: 0.8pt solid #A22;
  color: ivory;
  text-decoration: none; 
  font-size: 9pt; font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.1em;
}
.spismenu a.bopis
{ display: block;
  margin: 0; padding: 1.4pt 0 0.8pt 5pt;
  border-bottom: 0.8pt solid #A22;
  font-size: 11pt; font-size: 1rem;
  font-weight: bold;
  line-height: 1.2em;
  letter-spacing: 0.8pt;
}
.spismenu a:hover
{ border-bottom: 0.8pt solid #FDA;
  color: #FDA; background-color: #E40;
  text-decoration: none; 
}
.spismenu a.bopis:hover
{ padding: 1.4pt 2pt 0.8pt 8pt;
}
.spismenu a span
{ font-family: "Lucida Console", "Andale Mono", monospace;
  color: #DB8;
}

/*  Inne  */
.piszbox span
{ font-size: 9.6pt;
}


/*  Menu dolne  */
table.mtab
{ margin: 2pt auto 8pt; padding: 0;
  border-top: 3pt solid peru;
  border-left: 3pt solid peru;
  outline: #A22 solid 2px;
  background-color: #FDA;
  font-size: 11pt; font-weight: bold;
  line-height: 20pt;
  letter-spacing: 2pt;
}
table.mtab td
{ border-bottom: 3pt solid peru;
  border-right: 3pt solid peru;
  padding: 1px;
}
table.mtab a, table.mtab span
{ display: block;
  margin: 0; padding: 0 6pt 0 8pt;
  color: ivory; background-color: #A22;
  text-shadow: 1pt 1pt 0 #583000;
}
table.mtab a:hover
{ color: #FDA; background-color: #E40;
}
table.mtab span
{ color: #DB8;
}

.odcinki_dol
{ display: inline-block;
  margin: 4pt auto 8pt; padding: 1.4pt;
  border: #A22 solid 1pt;
  box-shadow: 0 0 16pt #A22; x: rgba(160,40,32,95);
  background-color: peru;
  background-color: rgba(240,150,40,.6);
  text-align: center;
}
.odcinki_dol b
{ display: inline-block;
}
.odcinki_dol a, .odcinki_dol span
{ display: inline-block;
  margin: 1.4pt; padding: .6ex 1ex .4ex 1.1ex;
  border: 0.6pt solid #FDA;
  border-radius: 4pt;
  box-shadow: inset -1pt -1pt 2.8pt rgba(40,10,0,.8), inset 1pt 1pt 2.8pt rgba(250,250,240,.8);
  color: ivory; background-color: #A22;
  font-family: Arial, Gulim, Iwona, sans-serif;
  font-size: 11pt; font-size: 1rem;
  font-weight: bold;
  letter-spacing: .28ex;
  text-shadow: 1pt 1pt 0 #583000;
}
.odcinki_dol a:hover
{ color: #FDA; background-color: #E40;
}
.odcinki_dol span
{ color: #DB8;
}


/*  Główny blok  */
.rama
{ min-width: 160pt;
  margin: 0 4pt 8pt 88pt; padding: 0;
}
div.glownybox
{ margin: 0; padding: 8pt 0;
  border: 4.8pt double firebrick;
  background-color: #DEFFBF;
  text-align: left;
}


/*  Główka opisów  */

div.czego_dotyczy_opis
{ display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  box-sizing: border-box;
  border: 1.62pt solid #caf0aa;
  margin: 0 1% 8pt;
  margin: 0 min(8pt,1.1%) 8pt;
  padding: 4pt;
  background-color: #e8ffca;
  text-align: center;
}

div.czego_dotyczy_opis > div:first-child img
{ display: block;
  box-sizing: border-box;
  cursor: wait;
}

div.czego_dotyczy_opis > div > p
{ display: table-cell;
  height: calc( var(--wys_gl) * var(--_skala) );
  margin: 0;
  padding: 0 4pt;
  vertical-align: middle;
}

div.czego_dotyczy_opis > div:nth-child(2) > p
{ font-family: "Franklin Gothic Book", Arial, Tahoma, sans-serif;
  font-size: calc( var(--txt_sr) * var(--tskala) );
  font-weight: 600;
  letter-spacing: 0.15em; line-height: 1em;
  text-shadow: 0 0 6pt #698000;
}

div.czego_dotyczy_opis > div:last-child
{ flex-basis: calc( var(--szr_rk) * var(--_skala) );
}
div.czego_dotyczy_opis > div:last-child > p
{ width: calc( var(--szr_rk) * var(--_skala) );
  color: #E8FFCA; background-color: #D22;
  font-family: "Comic Sans MS", Forte, Verdana, Arial, sans-serif;
  font-size: calc( var(--txt_rk) * var(--_skala) );
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: .8pt;
}
div.czego_dotyczy_opis > div:last-child > p span
{ font-size: 1.4em;
}


/*  Serie  */

h3, div.cojest
{ margin: 4pt min( 12pt, 2% );
  padding: 0;
}

h3
{ margin-top: 24pt;
  font-size: 15pt; font-size: 1.363rem;
  font-weight: 300;
}
h3 > b
{ border-bottom: 1.6pt dotted #F22;
  padding: 0 4pt 1pt;
  letter-spacing: 1pt;
}
h3 > span
{ font-family: Tahoma, Arial, Verdana, sans-serif;
  font-size: 11.5pt; font-size: 1.045rem;
  letter-spacing: 1pt;
}


div.cojest
{ margin-bottom: 10pt;
}
div.cojest > p
{ margin: 0 0 0.6em;
  padding: 0;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 12.8pt; font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
}
div.cojest > p:first-child
{ text-indent: 2em;
}

div.cojest > p > a
{ font-family: "Comic Sans MS", Forte, Verdana, Arial, Helvetica, sans-serif;
  font-size: 12.8pt; font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
}
div.cojest > p > a:hover
{ background-color: rgba(255,255,255,.75);
  font-size: inherit;
}


div.ieopis
{ width: 98%; margin: 0 auto;
}

.opis, .opisl
{ clear: right;
  margin: 2pt 6pt 12pt;
  font-size: 1rem;
  line-height: 1.4em;
}
.opisl
{ clear: left;
}

.opis a, .opisl a
{ font-family: "Comic Sans MS", Forte, Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt; font-size: 1.1rem;
  font-weight: 200;
}
.opis a.link
{ font-size: inherit; font-weight: normal;
  font-style: italic;
}

.npol, .nang
{ font-family: Tahoma, Arial, Verdana, sans-serif;
  letter-spacing: 1pt;
}
.npol
{ color: #111;
  font-size: 12pt; font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 0.8pt dotted #880;
  padding: 0 4pt 1pt;
}
.nang
{ font-size: 10pt; font-size: 0.91rem;
}

img.op, img.ole
{ float: right;
  display: block;
  padding: 0; margin: 1pt 2pt 4pt 6pt;
  border: 2pt ridge gold; outline: #FFD700 ridge 1.8pt;
  background-color: gold;
}
img.ole
{ float: left;
  margin: 1pt 6pt 4pt 2pt;
}

.obrazki
{ width: 96%;
  margin: 4pt auto 12pt;
  text-align: center;
}
.obrazki img
{ min-width: 80pt; max-width: 94%;
  padding: 0; margin: 4pt;
  border: 2pt ridge gold; outline: #FFD700 ridge 2pt;
  box-shadow: 2px 2px 10px #440;
  background-color: gold;
}

/* __ obrazki __ */
.obrazki-flex
{ display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  box-sizing: border-box;
  margin: 10pt 4pt 24pt;
}
.flex-fotka
{ box-sizing: border-box; 
  padding: 5pt;
  margin: 0;
  text-align: center;
} 
.flex-fotka > picture
{ display: inline-block;
  box-sizing: border-box; 
  max-width: 100%;
  border: 4pt solid #ff2810;
  outline: 1pt solid #841;
  box-shadow: 3pt 3pt 6pt #503820;
  border-radius: 2pt;
}
.flex-fotka > picture > img
{ display: inline-block;
  box-sizing: border-box; 
  max-width: 100%;
}


.dopobrania, .dopobrania p, .dopobrania a
{ font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 12.5pt; font-size: 1.14rem;
}
.dopobrania
{ clear: both; width: 96%;
  margin: 14pt auto 2pt; padding-top: 14pt;
  border-top: 3pt solid #E00000;
}
.dopobrania p
{ margin: 8pt 12pt; padding: 0;
}
.dopobrania img
{ vertical-align: baseline;
}
.dopobrania a
{ margin: 0; padding: 2pt 4pt;
  color: #004000; background-color: #CFEFAF;
  font-weight: 600;
}
.dopobrania a:hover
{ color: #CFFFAF; background-color: #006000;
}


.branie
{ clear: both; width: 96%;
  margin: 14pt auto 2pt; padding-top: 14pt;
  line-height: 1.15em;
  border-top: 3pt solid #E00000;
}
.branie p
{ margin: 0 12pt 2pt; padding: 0;
  font-size: 18pt; font-size: 1.7rem;
  line-height: 1.15em;
}

.branie img
{ vertical-align: baseline;
}

.branie a
{ margin: 0; padding: 2pt 4pt;
  color: #004000; background-color: #CFEFAF;
  font-size: 11pt; font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5em;
}
.branie a:hover
{ color: #CFFFAF; background-color: #006000;
}


/*  Ksiazki  */

ul.knigi
{ margin: 8pt 10pt; padding: 2pt 0 2pt 8pt;
}
ul.knigi li
{ padding-bottom: 2.2pt;
  font-family: Georgia, "Book Antiqua", "Times New Roman", serif;
  color: #211;
  font-size: 11pt; font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1pt;
}

div.glownybox .cent img
{ padding: 0; margin: 2pt;
  border: 2px ridge gold; outline: #FFD700 ridge 2px;
  background-color: gold;
}


/*  Liryki  */

.spiew
{ padding: 8pt; 
  font-size: 14pt; font-size: 1.28rem;
  text-align: center; 
  line-height: 1.28em;
}
.spiew b
{ display: inline-block; 
}

.centclr
{ clear: both;
  text-align: center;
}
.centclr img
{ max-width: 98%;
  box-shadow: 0 0 5pt #397060;
}

.opsi
{ clear: right;
  margin: 2pt 6pt;
  padding-top: 6pt;
  line-height: 1.4em;
}

div.blok-wew
{ max-width: 98%; width: 568pt;
  margin: 12pt auto; border: 0; padding: 0;
  text-align: left;
}

div.txt-prawy, div.txt-lewy
{ float: right;
  width: 280pt;
  margin: 4pt 0;padding: 0;
  border: 1pt solid #F0FFFF;
  border-bottom-color: #888;
  border-right-color: #AAA;
  background-color: #DAE8FF;
  box-shadow: 0 0 5pt #397060;
}
div.txt-lewy
{ float: left;
}

div.blok-wew p
{ margin: 6pt 4pt 6pt 1em;
  font-size: 10pt; font-size: 0.91rem;
  line-height: 1.28em;
}

div.blok-wew h1
{ font-family: Arial, Gulim, Iwona, sans-serif;
  padding: 0.35em 2pt 0.25em 0.8em;
  margin: 6pt; border: 0;
  color: white; background-color: #004072;
  font-size: 12pt; font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.25ex;
  text-shadow: 2pt 2pt 1pt #002, -2pt -2pt 1pt #002, -2pt 2pt 1pt #002, 2pt -2pt 1pt #002;
}


/*
||
||  Mniejsze  Ekrany  [!]
||
*/

@media (max-width: 800pt)
{
 :root{ --tskala: .8; }
}

@media (max-width: 700pt)
{

 :root{ --_skala: .9;  --tskala: .65; }

 Xbody { max-width: 700pt; }
 .odcinki_dol a, .odcinki_dol span { font-size: 0.91rem; }

 div.czego_dotyczy_opis > div:first-child img { height: calc( var(--wys_gl) * var(--_skala) ); }
 div.czego_dotyczy_opis > div:nth-child(2) > p { letter-spacing: 0.1em; }

 div.blok-wew  { width: 525pt; }
 div.txt-prawy, div.txt-lewy { width: 260pt; }
 div.blok-wew p  { font-size: 0.85rem; }
 div.blok-wew h1 { font-size: 1rem; }
 
}

@media (max-width: 640pt)
{

 :root{ --_skala: .85;  --tskala: .6; }

 .obrazki-flex { flex-flow: column wrap;  margin: 8pt 2pt 16pt; }
 .flex-fotka { max-width: 100%; }

}

@media (max-width: 580pt)
{

 :root{ --_skala: .73;  --tskala: .48; }

 div.cojest > p, div.cojest > p > a
 { font-size: 1.24rem;
   font-weight: 300;
 }

}

@media (max-width: 500pt)
{

 :root{ --_skala: .67;  --tskala: .38; }

 div.czego_dotyczy_opis
 { padding: 3pt;
 }

 .rama
 { margin-left: 86pt;
 }
 div.glownybox
 { border-width: 4pt;
   padding: 4pt 0;
 }

 .opis, .opisl
 { margin: 2pt 6pt 12pt;
   font-size: 0.91rem;
 }
 .opis a, .opisl a, .npol
 { font-size: 1rem;
 }
 .nang
 { font-size: 0.85rem;
 }

 .obrazki
 { width: 100%;
 }

 .odcinki_dol a, .odcinki_dol span
 { font-size: 0.91rem;
 }

 div.blok-wew { width: auto; }
 div.txt-prawy, div.txt-lewy
 { float: none;
   margin: 5pt auto;
 }

}

@media (max-width: 440pt)
{

 :root{ --_skala: .6;  --tskala: .33; }

 div.czego_dotyczy_opis > div:nth-child(2) > p { letter-spacing: 0.1ex; }

 div.lewybox
 { width: 80pt;
 }

 .rama
 { margin: 0 2pt 8pt 84pt;
 }

 div.ieopis
 { width: 99%;
 }

 img.op
 { margin-right: 0;
 }
 img.ole
 { margin-left: 0;
 }

 div.blok-wew  { width: auto; }
 div.txt-prawy, div.txt-lewy
 { width: 240pt; max-width: 99.5%;
 }
 div.blok-wew p
 { margin: 5pt 3pt 6pt 1ex;
 }
 div.blok-wew h1
 { margin: 4pt; border: 0;
 }

 .dopobrania p
 { margin: 0 10pt 4pt;
 }

}

@media (max-width: 400pt)
{

 :root{ --_skala: .55;  --tskala: .28; }

}

@media (max-width: 340pt)
{

 :root{ --_skala: .45;  --tskala: .26; }

 div.lewybox
 { width: 99%;
   margin: 0 auto;
 }

 .spismenu .razem
 { display: inline-block;
 }
 .spismenu .razem a.bopis, .spismenu .razem div
 { display: inline-block;
 }
 .spismenu a.bopis
 { padding: 0.8pt 2pt 0.8pt 4pt;
 }
 .spismenu a.bopis:hover
 { padding: 0.8pt 4pt 0.8pt 2pt;
 }
 .spismenu .razem div.prawo
 { margin-right: 4pt;
   padding: 0 2pt 2pt 0;
 }

 div.rama
 { margin: 0 1pt;
 }

 div.glownybox
 { border: 1.4pt solid firebrick;
   padding-top: 2pt;
 }

 .obrazki img
 { margin: 4pt 0;
   outline-width: 0;
 }

 img.op, img.ole
 { float: none;
   display: block;
   max-width: 97%;
   margin: 4pt auto;
   outline-width: 0;
 }

 .dopobrania, .dopobrania > p, .dopobrania a
 { font-size: 10pt;
 }
 .dopobrania > p
 { margin: 2.4pt;
 }

 .branie p
 { margin: 0 2pt 2pt;
   font-size: 1.2rem;
 }
 .branie a
 { padding: 1.2pt 3pt;
   font-size: 1rem;
 }

 .spiew
 { padding: 5pt;
   font-size: 1.2rem;
 }
 div.txt-prawy, div.txt-lewy
 { width: 218pt;
 }
 div.blok-wew p
 { margin: 5pt 2.4pt 6pt 3pt;
 }
 div.blok-wew h1
 { margin: 4pt; border: 0;
 }

}

@media (max-width: 200pt)
{

 :root{ --_skala: .42;  --tskala: .175; }

}

/*  The End  */