.sp-slideshow {
      position: relative;
   margin: 10px auto;
   max-width: 700px;
   min-width: 260px;
   height: 350px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.sp-content {
      background: url(../images/grid.png) repeat scroll 0 0;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.sp-parallax-bg {
      background: url(../images/map.png) repeat-x scroll 0 0;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.sp-slideshow input {
      position: absolute;
   bottom: 15px;
   left: 50%;
   width: 9px;
   height: 9px;
   z-index: 1001;
   cursor: pointer;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
}

.sp-slideshow input + label {
      position: absolute;
      bottom: 15px;
   left: 50%;
      width: 6px;
   height: 6px;
   display: block;
   z-index: 1000;
   border: 3px solid #fff;
   border: 3px solid rgba(255,255,255,0.9);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-transition: background-color linear 0.1s;
      -moz-transition: background-color linear 0.1s;
      -o-transition: background-color linear 0.1s;
      -ms-transition: background-color linear 0.1s;
      transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
   background-color: #fff;
      background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
      margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
      margin-left: -18px;
}

.sp-selector-4, .button-label-4 {
      margin-left: 18px;
}

.sp-selector-5, .button-label-5 {
      margin-left: 36px;
}

.sp-arrow {
      position: absolute;
   top: 50%;
   width: 28px;
   height: 38px;
   margin-top: -19px;
   display: none;
   opacity: 0.8;
   cursor: pointer;
   z-index: 1000;
   background: transparent url(../images/arrows.png) no-repeat;
   -webkit-transition: opacity linear 0.3s;
      -moz-transition: opacity linear 0.3s;
      -o-transition: opacity linear 0.3s;
      -ms-transition: opacity linear 0.3s;
      transition: opacity linear 0.3s;
}
.sp-arrow:hover{
   opacity: 1;
}
.sp-arrow:active{
   margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
      right: -60px;
   display: block;
   background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
      left: -60px;
   display: block;
   background-position: top left;
}

.Z input:checked ~ .sp-content {
      -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
      -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
      -o-transition: background-position linear 0.6s, background-color linear 0.8s;
      -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
      transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
      -webkit-transition: background-position linear 0.7s;
      -moz-transition: background-position linear 0.7s;
      -o-transition: background-position linear 0.7s;
      -ms-transition: background-position linear 0.7s;
      transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
      background-position: 0 0;
   background-color: #727b7f;
}
input.sp-selector-1:checked ~ .listbottoms #listi1 img {
      opacity:0.8;
   background-color: #727b7f;
}
input.sp-selector-2:checked ~ .sp-content {
      background-position: -100px 0;
   background-color: #7f7276;
}
input.sp-selector-2:checked ~ .listbottoms #listi2 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content {
      background-position: -200px 0;
   background-color: #737f72;
}

input.sp-selector-3:checked ~ .listbottoms #listi3 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-4:checked ~ .sp-content {
      background-position: -300px 0;
   background-color: #79727f;
}

input.sp-selector-4:checked ~ .listbottoms #listi4 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
      background-position: 0 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
      background-position: -200px 0;
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
      background-position: -400px 0;
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
      background-position: -600px 0;
}

.sp-slider {
      position: relative;
   left: 0;
      width: 500%;
   height: 100%;
   list-style: none;
      margin: 0;
   padding: 0;
      -webkit-transition: left ease-in 0.8s;
      -moz-transition: left ease-in 0.8s;
      -o-transition: left ease-in 0.8s;
      -ms-transition: left ease-in 0.8s;
      transition: left ease-in 0.8s;   
}

.sp-slider > li {
   color: #fff;
   width: 20%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
      float: left;
   text-align: center;
   opacity: 0.4;
      -webkit-transition: opacity ease-in 0.4s 0.8s;
      -moz-transition: opacity ease-in 0.4s 0.8s;
      -o-transition: opacity ease-in 0.4s 0.8s;
      -ms-transition: opacity ease-in 0.4s 0.8s;
      transition: opacity ease-in 0.4s 0.8s;   
}
.sp-slider > li img{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
      left: 0;
}

input.sp-selector-1:checked ~ .#listi1 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
      left: -100%;
}

input.sp-selector-2:checked ~ #listi2 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
      left: -200%;
}

input.sp-selector-3:checked ~ #listi3 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
      left: -300%;
}

input.sp-selector-4:checked ~ #listi4 img {
      opacity:0.8;
   background-color: #7f7276;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
   opacity: 1;
}
@media screen and (max-width: 700px){
   .sp-slideshow { height: 345px; }
}
@media screen and (max-width: 700px){
   .sp-slideshow { height: 285px; }
}
@media screen and (max-width: 700px){
   .sp-slideshow { height: 235px; }
}
@media screen and (max-width: 700px){
   .sp-slideshow { height: 158px; }
}

.pm_heading {
height:17px;
}
.applaunchmain {
position:fixed;
overflow-y:scroll;
width:100%;
height:100%;
z-index:999;
}
.appbg {
position:fixed;
width:100%;
height:100%;
background:#000;
background:rgba(0,0,0,0.4);
z-index:999;
}
.launchapp {
width:100%;
z-index:999;
overflow-y:scroll;
position:fixed;
padding-bottom:45px;
}
.padding-topbottom {
padding-top:40px;
padding-bottom:50px;
}
.oapplauncher {
cursor:default !important;
width:700px !important;
background:#5A5A5A;
background:rgba(0,0,0,0.6);
padding:8px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow:0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.5);
}
.iapplauncher {
align:left!important;
background:#FFF;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
position:relative;
box-shadow:0px 0px 3px #000;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
}
.applaunchname {
text-align:left;
padding-left:25px;
padding-top:5px;
}
.applaunchscreen {
width:650px;
}
.appsliders{
width:100%
}
.screen.b1 {
display:inline-block;
}
.paddinglr {
padding-left:25px;
padding-right:25px;
}
.listbottoms {
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border:1px solid #B3B3B3;
height:110px;
align:left !important;
-moz-box-shadow: inset 0 0 3px #888;
-webkit-box-shadow: inset 0 0 3px#888;
   box-shadow:0px 0px 3px rgba(0,0,0,0.5) inset;
margin-bottom:5px;
}
.list.i1 img {
padding-top:5px;
padding-bottom:5px;
border:1px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
.list.i1 {
display:inline-block;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
width:150px;
opacity:0.5;
-moz-transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.list.i1:hover{
opacity:1.0;
cursor:pointer;
}
.list.i1.active {
border-radius:5px;
opacity:0.8;
}
#bscreen1,#bscreen2,#bscreen3,#bscreen4 {
display:none;
}
.appcover img {width:48px; height:48px;}
.appcover {
   float:right;
   display:inline-block;
   position:relative;
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   overflow:hidden;
   font-size:0px;
}
.appcover:after {
   border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   position:absolute;
   display:block;
   top:0px;
   bottom:0px;
   left:0px;
   right:0px;
   content:"";
   box-shadow:0px 0px 3px rgba(0,0,0,0.5) inset;
}

<div class="applauncherdata"><div class="applaunchname">Fireboy & Watergirl</div><a href="javascript:;" onclick="closeapplaunch();" style="display: block; font-size: 0px; position: absolute; top: -3px; right: -3px; z-index: 100;"><img src="/images/close_popup.png" alt="X"></a><div class="applaunchscreen"> <div class="appsliders"><div class="sp-slideshow"> <input id="button-1" name="radio-set" class="sp-selector-1" checked="checked" type="radio"> <label for="button-1" class="button-label-1"></label> <input id="button-2" name="radio-set" class="sp-selector-2" type="radio"> <label for="button-2" class="button-label-2"></label> <input id="button-3" name="radio-set" class="sp-selector-3" type="radio"> <label for="button-3" class="button-label-3"></label> <input id="button-4" name="radio-set" class="sp-selector-4" type="radio"> <label for="button-4" class="button-label-4"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <div class="sp-content"> <div class="sp-parallax-bg"></div> <ul class="sp-slider clearfix"> <li><img src="http://moyaset.3dn.ru/_sf/0/20195270.jpg" alt="image01" height="350" width="650"></li> <li><img src="http://moyaset.3dn.ru/_sf/0/99174483.png" alt="image02" height="350" width="650"></li> <li><img src="http://moyaset.3dn.ru/_sf/0/25583147.jpg" alt="image03" height="350" width="650"></li> <li><img src="http://moyaset.3dn.ru/_sf/0/81001231.jpg" alt="image04" height="350" width="650"></li> </ul> </div><!-- sp-content --> </div><!-- sp-slideshow --></div></div><br>Очень интересная игра в жанре “бродилки” под названием Приключения Мальчика огня и Девочки воды. Игра рассчитана на двух человек. Управление первого осуществляется с помощью указательных клавиш (стрелок) , второго буквами w - прыжок, a - влево, d - вправо. Цель игры дойти до двери собирая по пути бонусы.<div class="applaunchscreens"><div class="paddinglr"><div class="listbottoms"> <div id="listi1" class="list i1" onclick="listshow1();"><img src="http://moyaset.3dn.ru/_sf/0/20195270.jpg" alt="Изображение 1" height="100" width="150"></div> <div id="listi2" class="list i1" onclick="listshow2();"><img src="http://moyaset.3dn.ru/_sf/0/99174483.png" alt="Изображение 2" height="100" width="150"></div> <div id="listi3" class="list i1" onclick="listshow3();"><img src="http://moyaset.3dn.ru/_sf/0/25583147.jpg" alt="Изображение 3" height="100" width="150"></div> <div id="listi4" class="list i1" onclick="listshow4();"><img src="http://moyaset.3dn.ru/_sf/0/81001231.jpg" alt="Изображение 4" height="100" width="150"></div></div></div></div><div class="button_panel" style="height:25px;"><input style="float:right;" class="g-button" onclick="launchappconf('Fireboy & Watergirl','http://moyaset.3dn.ru/stuff/prikljuchenija/fireboy_watergirl/1-1-0-1');" value="Запустить игру" type="button"> <div style="padding-right:2px;"><span class="appcover"><img style="width:25px; height:25px;" src="http://moyaset.3dn.ru/_sf/0/1.png" alt=""></span> </div></div></div>