<style type="text/css">
 
 #container {
    background:  #E9EFED; 
    /*margin-top: 5px;*/
  
 }
 body {
  background-color:  #E9EFED;
  font-family: "trebuchet ms";
  font-size: 13px!important;
  color: #808080;
}
  @font-face {
    font-family: Acrom; /* Имя шрифта */
    src: url(fonts/Acrom.otf); /* Путь к файлу со шрифтом */
     font-family: Acrom Bold; /* Имя шрифта */
    src: url(fonts/AcromBold.otf); /* Путь к файлу со шрифтом */
  
       
       font-family: Roboto-Regular; /* Имя шрифта */
    src: url(../fonts/Roboto-Regular.ttf); /* Путь к файлу со шрифтом */
    
    
     font-family: Roboto; /* Имя шрифта */
    src: url(fonts/Roboto-Light.ttf); /* Путь к файлу со шрифтом */
    
   font-family: Acrom ExtraBold; /* Имя шрифта */
    src: url(fonts/AcromExtraBold.otf); /* Путь к файлу со шрифтом */
    
   }
 

 #artist_name {
  z-index: 18;
  color:#fff;
  left: 65px;
   width: 100%;
  font-weight:600;
  font-size: 15px!important;
  text-align: center;
  padding: 5px;
  /*border-radius: 7px 7px 0 0;*/
 
}

 #pict_style_gal {
  position: absolute;
  border-radius: 250px;
  z-index: 10; 
   width: 55px; 
  height: 55px;
   object-fit: cover;
  border-color: white;
  border-style: solid;
  border-width: 2px;
    -webkit-box-shadow: 3px 3px 9px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 9px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 9px 0px rgba(0,0,0,0.75);
  margin-top: -25px;
  margin-left:  15px;
  
} 
 #pict_style_info {
  position: absolute;
  border-radius: 250px;
  z-index: 15; 
   width: 25px; 
  height: 25px;
  background-image: url(images/zvezdochka2_sm.png);
  border-color:#FFCC00 ;
  border-style: solid;
  border-width: 2px;
 
  margin-top: 15px;
  margin-left: 120px;
  
}  

#pict_style_info_txt {
    position: absolute;
    z-index: 222;
   top: 3px;
 left: 4px;
} 
 

 #aver_reit {
    
 }
  .myreit1 {
    font-weight: normal;
    color:  #626060;
    font-size: 13px!important;
  
    font-weight: bold;
 }
  #reited1 {
  	
 left:  170px;
 top:-3px;
 position: absolute;
 z-index:  8;
 }
 #reited {
      width: 57px;
 margin-left:  170px;
 margin-top: -23px;
 position: absolute;
 z-index:  7;
 width: 56px;
 }
 
    @font-face {
      font-family: 'fontello';
      src: url('font/fontello.eot?83966232');
      src: url('font/fontello.eot?83966232#iefix') format('embedded-opentype'),
           url('font/fontello.woff?83966232') format('woff'),
           url('font/fontello.ttf?83966232') format('truetype'),
           url('font/fontello.svg?83966232#fontello') format('svg');
        
    }
     
     
     
    .demo-icon4
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      text-align: center;
      font-size: small!important;
      color: #434242;
 display: inline-block;
 position: relative;
 left:  0px;
   top: -3px;
    }
    .demo-icon2
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      text-align: center;
      font-size: small!important;
      color:  #434242;
  display: inline-block;
   position: relative;
 left: 0px;
   top:0px;
    } 
    
     .demo-icon3
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      text-align: center;
      font-size: small!important;
      
       color:  #434242;
  display: inline-block;
   position: relative;
left:  0px;
 top: -2px;
    }
    
    #ribbon_place {
    position: absolute;
    z-index: 30; 
left: 33px!important;
 top: 7px;
 
    
} 
 #art_txt {
    text-align: left!important;
    margin-top: 5px;
   text-wrap:none;
   font-weight: bold!important;
   font-family: "trebuchet ms";
   font-size: 14px!important;
 }

#desc {
 width:100%;
 float:left;
 background:#ffffff;  
    border-bottom-color: #E2E0E0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: left;
    
}
 #ribbon_place {
    position: absolute;
    z-index: 30; 
    margin-left: 142px!important;
    margin-top: 0px;
    
}
/*#style_tags {
      position: relative;
      margin-left: 5px;
      display: inline-block;
      background: #E9EFED;
      padding: 1px 18px;
      border-radius:5px ;
      margin-top: 7px;
      border-style: solid;
      border-color: #A4A2A2;
      border-width: 1px;
      color: black!important;
}*/

.style_tags1 {
      position: relative;
      margin-left: 5px;
      display: inline-block;
      background: #E9EFED;
      padding: 1px 18px;
      border-radius:5px ;
      margin-top: 7px;
      border-style: solid;
      border-color: #A4A2A2;
      border-width: 1px;
      color: black!important;
}


#style_tags1 {
      position: relative;
      margin-left: 5px;
      display: inline-block;
      background: red;
      padding: 1px 18px;
      border-radius:5px ;
      margin-top: 7px;
      color: white;
}


#rt {
    position: relative;
    z-index: 22;
    left: 170px;
    top: -14px;
}
#tags_g {
    width:100%;
    float:left;
    border-top-color:  #eee; 
    border-top-width: 1px;
    border-top-style: solid;
      border-bottom-color: #eee;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: left;
    padding: 5px;
} 
#container {
    /*margin-top: 60px;*/
}
#filters {
    /*position: absolute;*/
  z-index: 1;
  /*top: 65px;*/
   
}

.remove2 {
    position: relative;
    z-index: 92; 
    left: 12px;
    cursor: default;
    font-weight: bolder;
    
}
#red_point {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background-color: red;
    margin-top: -14px;
    margin-left: -13px;
}
.red_point {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background-color: red;
    margin-top: -14px;
    margin-left: -13px;
}



.tooltip {
    width: 240px;
    padding: 5px;
    position: absolute;
    height: 70px;
    background: #4A7241;
    top:-80px;
    left: -18px;
    display: none;
    border-radius:5px;
    font-family: trebuchet ms!important;
    font-size: 12px!important;
    color: white;
     -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

}
  .tooltip::after, .tooltip::before {
    content: '';
    position: absolute;
    background: #4A7241; 
    left: 4px;
    top: 75px;
    width: 10px; height: 10px;
    box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
    z-index: -1; /* Прячем за основным блоком */
    transform: rotate(45deg); /* Поворачиваем на 45? */
    -webkit-transform: rotate(45deg);
   }
   .tooltip::before {
    z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */
    box-shadow: none; /* Прячем тень */
   }
 
 #unviz {
    display: none;
 }
  #viz {
    display: inline-block;
    
 }
 	.thumb {
 -webkit-transition: all 400ms ease;
 -moz-transition: all 400ms ease;
 -o-transition: all 400ms ease;
 transition: all 400ms ease;
 -webkit-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
 -moz-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
 transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
 opacity: 0;
}
.thumb.appeared{
 -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
 -moz-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
 transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
 opacity: 1;
} 
</style>
      
 

<!-- Динамические стили -->
 <style type="text/css">
<?php
		include 'connect.inc';
    	$qr = mysql_query("SELECT * FROM artwork ");
        $num1 = mysql_num_rows($qr);
        while ($row  = mysql_fetch_array($qr)){
            $id_art=$row['id']; 
?>

	#reit<?print $id_art?>
    {
           display: none;
           text-align: left!important;
           
    }
    	#reiting1<?print $id_art?>
    {
           display: none;
           text-align: left!important;
          
          
    }
   #artname<?print $id_art?> {
  width:100%;
  height:30px;
   float:left;
   background:#fff;
   margin-top:  0px; 
   text-wrap:none;
   opacity:1;
   cursor: pointer;
   z-index: 3;
   font-weight: bold;
    color:  #7e786d; 
    border-bottom-color: #fff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: left!important;
} 



  
 
   #art_txt_rt<?print $id_art?> {
    position: relative;
    text-align: left!important;
   top: 6px;
   word-break: break-all;
   font-weight: bold!important;
   font-family: "trebuchet ms";
   font-size: 14px!important;
   color:gray;
   width: 160px;
   white-space: nowrap;
   overflow: hidden;
   
 }
 li:hover #reit<?print $id_art?>{
    display: block;
}
  li:hover #ulgal<?print $id_art?>{
  display: block;
}
   #ulgal<?print $id_art?> { 
	width: 250px; 
    height: 31px;
	background: url(images/stars.png); 
    border-bottom-color: #D1CDCD;
    border-bottom-width: 3px;
    border-bottom-style: sodid;
    position: relative;
    top:0px;
    opacity:1;
    z-index: 152;
    display: none;
}
  li:hover #artname<?print $id_art?>{
 display: none;
}
 #picthold {
      border-radius:10px 10px 0 0 ;
      height: 100%;
      width: 280px!important; 
      margin-left: -3px;
       margin-top: -3px;
 }
 
 

<?php
	};
?>
 
 

 
 
 #modal_like {
    width: 150px;
    
    padding: 20px;
    position: absolute;
    z-index: 500000;
    background:  #fff;
    margin-left: 600px;
    margin-top: -120px;
    
       box-shadow: 0 0 7px #bbbccc; 
    border-style: solid;
       border-color: red;
       border-width: thin;
       display: none;
 }
  #modal_mess {
    text-align: center;
    font-family: trebuchet ms;
    font-size: 15px;
  
    color: #363333;
  }
   #ekran1{
    width:100% ;
    height: 100%;
    background-color: black;
    position: absolute;
    top: -100px;
    z-index: 100;
    opacity: 0.8;
   display: none;;
   }   
    
