<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>

<style type="text/css">
#asf-container {
   width:500px;
   height:500px;
   overflow:hidden;
   background-color:#878787;
   margin:auto;
}
#asf-container ::-webkit-scrollbar-thumb:vertical {
height:7px;
  border-left:3px solid #044142;
  border-right:3px solid #044142;
  background-color:#787878;
  height:75px;
}
#asf-container p {
   text-indent:50px;
}
#asf-container ::-webkit-scrollbar {
  width:10px;
  height:3px;
  background-color:#787878; 
  border-left:4px solid #044142;
  border-right:4px solid #044142;
}
.asf-image {
   width:250px;
   height:500px;
   float:left;
}
.asf-left {
   background-color:#8b9995;
   background-image: url("http://s24.postimg.org/6kulke6et/left.jpg");
   color:#180f0b;
   width:250px;
   float:left;
   text-align:right;
}
.asf-first {
   background-color:#053537;
   color:#b9b9b9;
   text-align:right;
   font-family: calibri;
   font-size:8px;
   text-transform:uppercase;
   letter-spacing:2px;
}
.asf-first a {
   color:#063133;
   text-decoration:none;
   font-style:none;
}
.asf-name {
   font-family:Voga;
   font-size:40px;
   color:#180f0b;
   font-weight:none;
   padding-right:5px;
   letter-spacing: 2px;
   padding-top:100px;
   line-height:90%;
}
.asf-name:first-letter {
   color:#053537;
   font-size:50px;
}
.asf-shipper {
   font-family:verdana; 
   font-size:10px;
   line-height:100%;
   color:#180f0b;
   padding:10px;
   width: 210px;
   margin:auto;
   height:310px;
   margin-top:10px;
}
.asf-content {
   overflow:auto;
   text-align:justify;
   height:287px;
   padding:5px;
      font-size:10px;
}
.asf-content:first-letter {
   font-family:georgia;
   font-style:italic;
   color:#053537;
   font-size:40px;
   float:left;
   padding-top:10px;
   padding-bottom:5px;
   padding-right:5px;
   padding-left:2px;
}
</style>

<div id="asf-container">
   <div class="asf-left">
       <div class="asf-name">pandemonium</div>
       <span class="asf-first"> evil has its winning ways</span>
       <div class="asf-shipper">
           <div class="asf-content">
               Подлинно изумительные и необыкновенные формы порой демонстрируют плоды невероятно изобретательной фантазии бессменного владельца «Химеры». Силой дарованных ему способностей Колм Роше воздействует на легкоуязвимое, податливое сознание каждого из подвластных его воле жителей комплекса, практикуя безграничное многообразие средств и методов достижения собственных целей, кои остаются неизменными на протяжении всего времени существования «Химеры» в её новой, дьявольской ипостаси надёжного поставщика душ нечестивцев.<br><br>  

Вы полагаете, души невинно убиенных, едва освободившись от земных оков, благополучно отправляются прямиком в рай? Вы считаете, статус жертвы предопределяет судьбу оных в загробном мире? Отнюдь — в случае, если вам не посчастливилось распрощаться с жизнью в обстоятельствах, прямо или косвенно связанных со злонамерениями Колма Роше, последующий ваш путь продолжится нигде иначе, как в  стенах ненасытной «Химеры» — в вечном заключении между мирами под непрестанным надзором проклятых сил. 
          </div>
      </div> 
   </div>
   <div class="asf-image">
       <img src="http://s10.postimg.org/60xavkr8p/right1.jpg">
   </div>
</div><br>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style>
.korpus > div, .korpus > input { display: none; }

.korpus {font: normal normal 400 11px/16.5px Verdana;
text-align: center; 
word-spacing: -0.3ex;
color: #1f120d;}

.korpus label {width: 200px;
height: 20px;
text-align: center;
font-family: georgia;
word-spacing: -0.3ex;
font-size: 16px;
display: inline-block;
font-weight: bold;
font-style: italic;
color: #1f120d; }

.korpus label:active{
  color: #003c50;}

.korpus label:hover{
  color: #003c50;}

.content {width: 200px;
height: 20px;
text-align: center;
font-family: georgia;
word-spacing: -0.3ex;
font-size: 16px;
display: inline-block;
font-weight: bold;
font-style: italic;
color: #003c50; }

.content:active{
  color: #1f120d;}

.content:hover{
  color: #1f120d;}

* a {
color: #280038;
text-decoration: none;
}

.colortext {
     color: #800000;
   }

.korpus input[type="radio"]:checked + label { border-bottom: 0px solid #fff; }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) {display: block; text-align: justify;}
</style>