body{font-family: Verdana, Arial, Helvetica, sans-serif;}

a {
text-decoration: none;
color:#ffffff;}
a:hover {color:#A0A0A0;}
img {border:none;}

button:hover {cursor:pointer;}
.anylink{
position:absolute;
border-top:1px solid #606060;
line-height:20px;
z-index:100;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color:#ff0000;
filter:alpha(opacity=90); /* IE's opacity*/
-moz-opacity:.90;
opacity:.90;
}

.anylink a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #606060;
background-color:#303030;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 1px 0;
}

.anylink a:hover{ /*hover background color*/
background-color:#ff6600;
color:#000000;
}
.anylink img{margin-top:2px; margin-left:10px; float:left;}
#op
{
  position:relative;
  font-family: verdana;
  color: white;
  font-size: small; 
  word-break:break-word;
 /* min-height:1500px;*/
}

.log{
height:18px;
width:60px;
background-color:#000000;
color:#ffffff;
border: solid 1px #444;
font-weight: bold;
font-size:9pt;
}
#koment{
border-top:1px solid #444;
padding-top:6px;
padding-bottom:6px;
}
.tabela div{float:left; border-bottom:1px solid #404040; height:24px; padding-top:8px;}
.tabela a{padding:2;}
#spc
{
clear:both !important;
width:100%;
border:none;
overflow:hidden;
padding:0px;
margin:0px;
height:0px;
}


 #logowanie{
 color:#ffffff;
 height:21px;

 font-weight: normal;
 float:right;
 padding-right:20px;
 overflow:hidden;
 }
 
/* css do glównej. index.html. Do Ĺźadnej innej zakladki */
body{background:#4c4c4c;}

#kontener {
background: url(./images/tlo.jpg)
left top repeat-x;
font-family: verdana;
color: white;
font-size: small;
width:1000px;
margin:0 auto;
border:0px solid red;
height:auto;
}

/* Pole z nazwą, logiem strony */
#naglowek1{ height: 78px;}

/* Div nawigacyjny- główne menu - wewnątrz div z polem logowania*/
#naglowek2{ padding-left:30px;padding-top:5px;
width: auto; height: 25px;
border-bottom:solid 1px #000000;
border-top:solid 1px #A0A0A0; }

/* LEWA KOLUMNA Ostatnie komentarze, posty ets */
#kolumna1{
float: left;
margin-top:15px;
margin-left: 15px;
width:  24%;
height: auto;
}

/*PRAWA KOLUMNA na głównej */
#kolumna2{
float:left;
width:calc(74% - 40px);
margin-top:15px;
margin-left:15px;
height:auto;
}

/* informacja specjalna w kolorowej ramce */
#admina a:hover{color:#ffffff;}
#admina{ float:left; width:calc(100% - 20px); padding:5px 10px; margin:20px 0; text-align: left;
background:#787878;
border-top: 1px solid#ff6600;
border-bottom: 1px solid #ff6600;
box-shadow: -2px -2px 10px #080808;
}


/* KONKURSOWA I WYRÓŻNIONA */ 
.main-grid
{
  float: left;
    width: 45%;
    margin: 0 2.5%;
    position: relative;
}
.main-grid>div
{
  position: relative !important;
}
.grid-all,.grid-no-ani,.main-grid>div
{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: absolute;
    opacity: 1;
    z-index: 10;
}
.grid-all{animation:grid-slider 16s infinite;}
.grid-all>div,.grid-no-ani>div
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.main-a
{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: -3px -3px 10px #080808;
}
.grid-no-ani:hover .grid-hover,.grid-all:hover .grid-hover
{
    opacity:1;
}
.grid-hover
{   padding:5 0 0 10px;
  box-sizing: border-box;
    opacity:0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    transition: all .3s ease-in-out;
    background: #00000080;
}

@keyframes grid-slider
{
    1%,50%
    {
        z-index:10;
        opacity:1;
    }
    51%,100%
    {
        z-index:1;
        opacity:0;
    }
}
.delay
{
    opacity: 0;
    z-index: 1;
    animation-delay: 8s !important;
}


/* div z napisem prace ostatnio dodane */
#title_bar, #title_bar_maly
{
  display:block;
  margin-bottom:20px;
  width:100%;
}
#title_bar{ font-family: verdana;  font-size: large;}
#title_bar_maly{ font-family: verdana;  font-size: 10pt;}

/* ramka na 3 lub 4 pozycjonery */
#ramka_min { width:100%; float:left;}

 /* pozycjonery miniatur */
 #miniatura3 {width: 33.3%;} /* pozycjoner miniatury na glownej - 3 sztuki*/
 #miniatura4 {width: 25%;} /* pozycjoner miniatury w galerii - 4 sztuki*/
 #miniatura3,#miniatura4{float: left; height: 280px;}
 #miniatura3 a:hover,#miniatura4 a:hover{color:#ffffff;} /*dzialanie linka w pozycjonerach*/

  /* div tła miniatury oraz opis jego aktywnego obramowania */

  #miniatura_tlo:hover div
  {
      opacity:1;
  }
  #miniatura_tlo>div
  {
      opacity:0;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 25;
      transition: all .3s ease-in-out;
      background: #000000a0;
    }
   
 #miniatura_tlo:hover{box-shadow: -3px -3px 10px #C0C0C0;}
 #miniatura_tlo{position: relative; float: none; margin: auto; width: 200px; height: 200px; box-shadow: -3px -3px 10px #080808;}

/* opisy pod miniaturą*/
  #min_opis{ float: none; margin: 5px auto; width: 200px;}

  /*#komentarz a:hover,#komentarz_moda a:hover {color:#ffffff;}*/
  
#komentarz,#komentarz_moda
{
float:left;
margin: 8px 0px;
padding:  5px 10px;
width: calc(100% - 20px); height: auto;
box-shadow: -2px -2px 10px #080808;
overflow-wrap: break-word;
}
#info
 {min-height: 134px; 
  float:left;
  margin: 8px 0px;
  padding:  5px 10px;
  width: calc(100% - 20px); height: auto;
  overflow-wrap: break-word;
}

#komentarz{background:#9797a6;}
#komentarz_moda{background:#6a8b85;}



/* elementy formularza w STOPKA2, np forum i komentarze */
#komentarz textarea{width:100%;}
#komentarz textarea,#komentarz input,#upload{
  border:solid 1px #000000;
  background:#E0E0E0;  color:black;
  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 9pt;  font-weight: normal;
  resize:none;}
#komentarz button{
Background:#ccc;
border-left:solid 1px #ddd;
border-top:solid 1px #eee;
border-right:solid 1px #666;
border-bottom:solid 1px #222;
color:black;
}
#komentarz button:hover{color:#ffffff;}

/* div z ostatnim postem w hydePark. W nim - div z tytułem tego diva */
.inv{color:#000000; text-decoration:none;}
.inv:hover {color:#ffffff; }

.inv2{color:#ffffff; text-decoration:none;}
.inv2:hover {color:#000000;}

.inv3{color:#fff; text-decoration:none;}
.inv3:hover {color:#fff; text-decoration:none;}

/* koniec strony */
#stopka a:hover {color:#ffffff;}
#stopka{
height: auto;
margin: 25px 0;
padding:5px 0;
width:100%;
float:left;
text-align: center;
background-color: #606060;
border-top:1px solid #989898;
border-bottom:1px solid #989898;
}

/* style dodatkowe */
#galerylinks{
padding:5px;
width: calc(100% - 10px);
height: auto;
background: linear-gradient(to left, #606060, black,#606060);
float: left;
}

#forum{ width:calc(100% - 50px); padding:25px; float:left;} /* marginesy lewo-prawo dla forum */
#tytul{
  width:100%; float:left; overflow-wrap: anywhere; margin-bottom:10px;} /* spinacz do justowania textu lewo-prawo wraz z #right*/
#right{ float:right; text-align:right; font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 9pt;  font-weight: normal; }

#katalog{float:left; margin:0; width:100%; height: auto; }
#katalog_naglowek{
float:left;padding:5px;padding-left:20px; width:calc(100% - 25px);
text-align: left; margin:10px 0;
background-color:black;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
overflow-wrap: anywhere;
}

#about{ position:relative; margin:15px 25px;
background:url(./images/about_back.jpg);
width:950px; height:430px;}

#about > div{position:absolute; background-color:rgba(0,0,0,0.5);}

#gauge     {right:10;  top:230;   width:158px; height:178px;
            background:url(./images/gauge.png);
            padding:5px;
           }
#gauge >div{position:absolute;}

#avatar    {left:10;   top:10;    width:150px; height:100px; opacity:none;}
#o_autorze {right:10;  top:10;    width:calc(100% - 195px); height:90px;padding:5px;overflow-wrap: break-word;}
#linka     {left:10;   bottom:10; width:calc(100% - 20px);  height:20px;font-weight:bold; font-size:10pt;}
#linka a{color:silver;}
#linka a:hover{color:#ffffff;}

#nick      {left:175;  top:195;   width:calc(100% - 185px); height:20px;font-weight:bold; font-size:11pt; color:white;}
#nick2     {left:175;  top:195;   width:calc(100% - 185px);  height:20px;font-weight:bold; font-size:11pt; color:white;}
#alert     {left:175;  top:195;   width:calc(100% - 195px);  height:20px; font-size:11pt; color:white;
            padding:5px; border-top:solid 1px #ff6600; border-bottom:solid 1px #ff6600;}

#menu      {left:10;   top:125;   width:150px; height:293px; padding-top:5px;}
#menu2     {left:175;  top:230;  width:150px; height:188px; padding-top:5px;}

#menu hr,#menu2 hr{height:8px;border:none;margin:0;padding:0;}

#menu div,#menu wybrany,#menu2 div,#menu2 wybrany{padding-left:10px;}
#wybrany{background-color:#ff6600;}


#menu a:before, #menu2 a:before,#linka a:before
{
content:"";
height: 11px;
width: 14px;
display:inline-block;
background-repeat:no-repeat;
background-size:contain;
background-image:url("./images/link.gif");
background-position:left;
}

#wybrany a:before
{
content:"";
background-image:url("./images/link_b.gif");
}

.alert
{
  animation: blink 0.5s infinite;
}
@keyframes blink
{
  0{color:#ffffff;}
  1%{color:#ff6600;}
  50%{color:#ff6600;}
  51%{color:#ffffff;}
  100%{color:#ffffff;}
}
.alert1
{
  animation: blink 1.5s infinite;
}
@keyframes blink
{
  50%{color:#ff6600;}
  100%{color:#ffffff;}
}

#txt{padding:10px; text-align:left;}
#kolumna_l_upload,#kolumna_r_upload{
float: left;
margin-top:10px;
margin-left: 10px;
height: auto;
}
#kolumna_l_upload{width:  calc(33% - 10px); border:0px solid #ff0000;}
#kolumna_r_upload{width:  calc(66% - 10px); border:0px solid #00ff00;}

/* div wewnętrzy z tytułem: Hyde Park najnowszy post */
#stopka1{
margin: 2px;
width: 200px;
height: 20px;
background: linear-gradient(to left, gray, black,gray);
float: left;
border: 0px;
}

#stopka3{
margin: 2px;
width: 235px;
height: 20px;
background: linear-gradient(to left, gray, black,gray);
float: left;
border: 0px solid black;
}

.menu_zak
{ width:100%;
  position:absolute;
  left:0; top:0;
  background:#555;
}
.menu_zak div
{ box-sizing:border-box;
  padding-top:2px;
  float:left;
  height: 24px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
.kmain
{ position:relative;
    overflow: hidden;
    padding: 8 0 22 0;
}
.cell,.cell_death
{
    color: white !important;
    border: none;
    float: left;
    height: 30px;
    background-color: black !important;
    width: calc( 100% / 19);
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: solid white 1px  !important;
    box-sizing: border-box;
    position: relative;
}
.cell_death{    background-color: rgb(85, 85, 85) !important;}
.cell-inner
{
    top: 0;
    z-index: 20;
    left:-90px;
    display: none;
    width: calc(600% + 6px);
    height: 100px;
    position: absolute;
}
.cell-center
{ background-color: #ff880090; }

.cell-right
{ background-color: #2caf0090; }

.cell-center,.cell-right,.cell-left
{ float: left;
  width: calc(100% / 3);
  height: 100%;
}
.cell:focus, .cell_death:focus
{
  outline: none;
}
.cell-helper
{ top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
}
#notes
{
  background:#9797a6;
  background-image:url(./images/Lnote.gif);
  background-repeat: no-repeat;
  margin-top:20px;
  width:240px;
  height:200px;
  box-shadow: -1px -3px 10px #080808;
}
#info_tlo{position: relative; display:inline-block;}
#info_tlo:hover div { opacity:1;  }

.info_link,.info_link2{color:#ff6600; text-decoration:none; cursor: pointer;}
.info_link:hover {color:#fff;}
.info_link2:hover {color:#fff;}

#info_tlo>div
 { padding-top:5px;
   width: calc(100% - 40px); min-height: 134px;
   margin-left: 20px;;
   opacity:0;
   position: absolute;
   bottom: 0;
   transition: all .3s ease-in-out;
   background: #0009;
 }
.info_glosy
{
  width:170px;
  position:absolute; top:40px; left:-10px;
  z-index:1;
  background:#555; padding:15;
  box-shadow: -1px -3px 10px #080808;
}

.info_exif
{
  padding-top:5px;
  width: 100%; min-height: 134px;
  position: absolute;
  bottom: 0;
}
.info_b
 { float:left; min-width:80px; text-align: right; padding-right:15px; height:19px;}
 .info_b2
 { float:left; min-width:100px; text-align: right; padding-right:10px; height:19px;}

 .info_c
 { float:left; text-align: right; height:19px;} 
 .info_c2
 { float:left; text-align: left;max-width:85%;}

 .info_d
 {width:30px; float:left; height:19px; position:relative;}

.info_d img {right:8px; position:absolute; top:50%; transform:translateY(-8px); }
.foto_add{ min-width:262px; margin-top:3px;}
.under{height:10px;width:100%;}

.user,.user_blok,.user_new,.len,.panel_up,.super
{
  width:(100%);
  padding:5px;
  border-bottom: solid 1px #000000;
}
.panel_up{ background-color:#333; margin-bottom: 5px;}
.user_blok{ background-color:#c66;}
.user_new{ background-color:#6b6;}
.len{ background-color:#888}
.super {background-color:#000}
 .s111,.s222,.s333,.s444,.s11,.s22,.s33,.s44
  { padding-left:10px; float:left; height:50px; border-right:solid 1px #666;}
 .s11,.s22,.s33,.s44 
  {height:15px;} 
  .s111,.s11 {width:295px; padding:0;}
  .s222,.s22 {width:60px;}
  .s333,.s33 {width:215px;}
  .s444,.s44 {width:290px;}

.emoji{font-size:16px;}