<!--HTML--><style type="text/css">.app-container { position: relative;  width: 320px; height: 450px; border-left: 180px solid #2c1219; padding: 0px; font-family: 'Alice', serif; }
.tab { float: left; }
.app-container2 {position: relative; height: 450px; width: 300px;}
.tab label { display: block; width: 100px; cursor: pointer; background: #601004; color: #c8c1c3; padding: 10px; text-transform: uppercase; text-align: right; margin-left: -1px; position: absolute; top: 120px; left: -119px; }
.tab [type=radio] { display: none;  }
.app-ooc { min-width: 120px; max-width: 120px; padding: 10px; position: absolute; text-align: right; left: -145px; bottom: 20px; color: #c8c1c3; font-style: italic; font-size: 13px; line-height: 1; text-transform: uppercase; }
.app-name { position: absolute; bottom: 30px; background-color: #601004; color: #c8c1c3; padding: 15px; text-transform: uppercase; text-align: center; width: 210px; font-size: 19px; left: 30px; opacity: 0; }
.app-intro { position: absolute; width: 220px; opacity: 0; top: 110px; margin-left: 35px; }
.app-intro3 { background-color: #601004; color: #c8c1c3; padding: 4px; text-transform: uppercase; text-align: center; width: 220px; font-size: 12px; margin-bottom: 3px; }
.app-freestyle { opacity: 0; position: absolute; top: 5px; left: 5px; right: 5px; color: #1b0309; background-color: rgba(255,255,255,.7); padding: 4px; font-size: 14px; line-height: .9; letter-spacing: 1px; height: 430px; text-align: justify; }
.app-title { text-transform: uppercase; text-align: left; font-size: 20px; font-style: italic; }
.app-bar { background-color: #763a4a; width: 10px; height: 35px; }
[type=radio]:checked ~ label { background-color: #763a4a; color: #c8c1c3; z-index: 2; }
[type=radio]:checked ~ label ~ .app-freestyle { z-index: 1; opacity: 1; }
[type=radio]:checked ~ .app-name { z-index: 1; opacity: 1; }
[type=radio]:checked ~ .app-intro { z-index: 1; opacity: 1; }
.app-shimmer { width: 480px; text-align: right; margin-top: -4px; font-size: 11px; text-transform: lowercase; }</style>

<center><div class="app-container" style="background: url(http://forumstatic.ru/files/000c/90/79/23737.gif);"><div class="app-container2">

<div class="app-ooc">
AND MAY THE ODDS BE EVER IN YOUR FAVOR
</div>

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">GUEST</label>
<div class="app-name">
RESONANCE
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-top: 50px;">INFO</label>
<div class="app-intro">
<br><br><br><br><br><br><br><br><br><br><br><br><div class="app-intro3">антиутопия </div>
<div class="app-intro3">NC-21 </div>
<div class="app-intro3">эпизодическая игра </div>
<div class="app-intro3">смешанный мастеринг </div>

</div>
</div>


<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3" style="margin-top: 100px;">HOLD</label>
<div class="app-freestyle">
<table><td><div class="app-bar"></div></td><td><div class="app-title">hold</div></td></table>
<div style="overflow: auto; height: 385px; margin-top: 5px;"><br>
<br><u> 1. На какое время я могу придержать роль/внешность? </u><br>
<br> - Бронь держим 3 суток. У Вас есть возможность продлить бронь ещё на 3 суток, попросив об этом в гостевой.  <br>
<br><u>2. Что требуется для этого сделать? </u><br>
<br> - Заполнить шаблон, находящийся ниже.<br>
<br><u>3. Кто уже придержан?? </u><br>
<br> <table> 
<tr>
        <td><fc1><b>Персонажи </b> </fc1></td>
<td><fc1><b>Внешности</b> </fc1></td></tr> 
<tr> <td>
----

</td>
        
 <td>
<!---внешности--->
Andreja Pejic 
</td>
      </tr> 
</table>  
</div>
</div>
</div>

</div></div>
<br><div class="app-shimmer"></div></center>