/*  CSS dla pokładu KOMIKS  -  2005.10.29 # 2007.9.19 # 31.3.2015 # 31 VIII Y3  */

div.prawybox
{ margin: 0 0 16pt 112pt; padding: 0;
}

.wstep-in
{ padding: 2.4pt 4.8pt;
  text-align: center;
}
.wstep1
{ text-align: center;
}
.wstep1 img
{ max-width: 100%;
}
.wstep2
{ margin: 2pt 0; padding: 3pt;
  border: 4.8pt double #393;
  border-radius: 12pt;
  text-align: center; color: #00FF00;
}
.wstep2 p
{ margin: 0; padding: 8pt;
  border-radius: 6pt;
  color: gold; background-color: #511;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: justify;
}
.wstep2 a
{ color: #F0B088;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
}
.wstep2 a:hover, .wstep2 a:active
{ color: #F02040; text-decoration: underline;
}


.wersje
{ max-width: 51rem;
  margin: 2rem auto .8rem; padding: 1pt 2ex;
  border: 1pt solid #264;
  background-color: rgba(28,120,40,.60);
}
.wersje p
{ margin: .4em 0; padding: 0 0 0 1.8ex;
  color: white;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4em;
  text-indent: -1.8ex;
}

/* __ obrazki __ */
.obrazki-flex
{ display: flex;
  flex-flow: row wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: 4pt;
}
.obrazki-flex > div
{ margin: 1rem; padding: 2pt 6pt 4pt 2pt;
  border-top: .25rem solid rgba(28,120,40,.60);
  border-left: .75rem solid rgba(28,120,40,.60);
  border-radius: .25rem 0;
  text-align: center;
}
.obrazki-flex > div > h3
{ margin: 0; padding: .5ex;
  color: gold;
  background-color: #393;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.28rem;
  font-weight: bold;
}
.obrazki-flex > div img
{ display: inline-block;
  box-sizing: border-box; 
  max-width: 100%;
  max-height: 300px;
}
.obrazki-flex > div > div
{ width: 8.8rem;
  margin: .6rem auto; padding: .6ex;
  border: .1pt solid #393;
  border-radius: 50% 20% / 10% 40%;
}
.obrazki-flex > div > div > a
{ display: block;
  border-radius: 50% 20% / 10% 40%;
  border: 1pt solid #A04020; 
  padding: .6ex .2ex .6ex .4ex;
  color: gold; background-color: #903020;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
}
.obrazki-flex > div > div > a:hover
{ border: 1pt solid white;
  padding: .6ex .4ex .6ex .2ex;
  color: white; background-color: #C02040;
}
.obrazki-flex > div > p
{ min-width: 11rem;
  margin: 2pt; padding: 0;
  font-family: "Fira Sans", Verdana, Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
.obrazki-flex > div > p > span
{ padding: 2.4pt 4.4pt;
  border-bottom: 1pt solid gold;
  color: #E0D0D0;
  background-color: black;
}


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

@media (max-width: 780px)
{ body { max-width: 780px; }
}
@media (max-width: 700px)
{
 body { max-width: 700px; }
}

@media (max-width: 600pt)
{
 .wersje { max-width: auto; margin: 12pt 2pt 4pt; }
}

@media (max-width: 500pt)
{

 div.prawybox
 { margin-left: 111pt;
 }
 
 .wstep2
 { padding: 2pt;
   border: 2.8pt solid #393;
   border-radius: 10pt;
 }
 .wstep2 p
 { margin: 0; padding: 0.75ex;
   border-radius: 5pt;
   font-size: 1rem;
 }
 .wstep2 a
 { font-size: 1rem;
 }

 .wersje
 { font-size: 0.91rem;
 }

 .obrazki-flex
 { margin: 4pt 2pt;
 }
 .obrazki-flex > div
 { margin: .8rem .4rem;
 }
 .obrazki-flex > div > p
 { min-width: 10.2rem;
   font-size: .88rem;
 }

}

@media (max-width: 440pt)
{

 div.prawybox
 { margin-left: 99pt;
 }

}

@media (max-width: 340pt)
{

 div.prawybox
 { margin: 0;
 }
 .wstep-in
 { padding: 2.4pt 1.6pt;
   text-align: center;
 }
 .wstep2
 { padding: 1pt;
   border: 1.8pt solid #393;
 }

}

/*  The End  */