<!--HTML-->
<div class="postcolor"> 
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic|Playfair+Display+SC" rel="stylesheet" type="text/css">
<style type="text/css">
#mccontainer { width: 500px; height: 500px; position: relative; overflow: hidden; background-image: url('http://savepic.net/6650862.png'); }
.mctabs { position: absolute; clear: both; top: 0px; left: 0px; width: 500px; height: 500px; }
.mctab { float: left; target: inherit; } 
.mctab label[for=charone] { position: absolute; top: 50px; height: 30px; width: 150px; left: 175px; background-color: black; color: white; z-index: 99; text-align: center; font-family: calibri, sans serif; font-size: 7.5px; text-transform: uppercase; line-height: 30px; letter-spacing: 3px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; cursor: pointer; }
.mctab input[type=checkbox] { display: none; }
.mccontent { position: absolute; height: 500px; width: 500px; left: 0; right: 0; bottom: 0; top: 500px; background-color: white; -webkit-transition: all 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; }
.mctab input[type=checkbox]:checked ~ label[for=charone] ~ .mccontent { top: 0; opacity: 1; height: 500px; z-index: 1; }
.mctab input[type=checkbox]:checked ~ label[for=charone] { position: absolute; left: 20px; top: 14px; color: white; height: 20px; background-color: black; width: 70px; border: 1px solid #FFF; text-align: center; font-family: calibri; font-size: 7.5px; line-height: 20px; letter-spacing: 5px; z-index: 999; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
#topbar { display: block; width: 500px; height: 50px; background-color: #000; z-index: 102; position: absolute; top: 0; left: 0; }

/* SECOND TABS */

.stutabs { position: relative; height: 500px; clear: both; }
.stutab { float: left; }
.stutab label { position: absolute; color: white; cursor: pointer; top: 0; width: 150px; height: 50px; line-height: 50px; z-index: 1000; color: white; background-color: black; text-align: center; font-family: arial; font-size: 9px; text-transform: lowercase; letter-spacing: 2px; }

.stutab [type=radio] { display: none; }
.stucontent { position: absolute; top: 50px; left: 0; background-color: #FFF; right: 0; bottom: 0; padding: 20px; color: #000; width: 500px; height: 410px; z-index: 1; opacity: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }

.stutabs [type=radio]:checked ~ label { background-color: black; color: #8ebcea; z-index: 1000; }

.stutabs [type=radio]:checked ~ label[for=policy] ~ .stucontent { z-index: 1001; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
.stutabs [type=radio]:checked ~ label[for=codes] ~ .stucontent { z-index: 1001; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
.stutabs [type=radio]:checked ~ label[for=skins] ~ .stucontent { z-index: 1001; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
.stutabs [type=radio]:checked ~ label[for=resources] ~ .stucontent { z-index: 1001; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }


.codes { width: 300px; height: 350px; position: absolute; top: 50px; left: 100px; text-align: justify; overflow: auto; }
.codes b { font-weight: 400; letter-spacing: 3px; display: block; background-color: #bfc9da; padding: 5px 10px 5px 10px; margin: 1px; font-family: calibri; font-size: 11px; text-transform: uppercase; float: center; }
.codes a { font-family: times, serif; font-style: italic; letter-spacing: 2px; color: white; background-color: #bfc9da; padding: 5px 10px 5px 10px; display: block; margin: 1px; text-transform: lowercase; font-size: 7px; float: left; }
.codes a:visited { color: #FFF !important; }
.codes p { padding-top: 20px; font-family: arial; font-size: 10px; letter-spacing: 0px; text-transform: lowercase; font-style: italic; text-align: center; line-height: 0.8em;}

.mainpolicy { width: 400px; height: 270px; position: absolute; top: 90px; text-align: justify; left: 50px; color: black; overflow: hidden; }
.mainpolicy span { font-family: times; }
.mainpolicy p { margin-top: 15px; padding-top: 20px; font-family: arial; font-size: 10px; letter-spacing: 0px; text-transform: lowercase; font-style: italic; }

</style><center><div id="mccontainer">

<div class="mctabs"><div class="mctab"><input type="checkbox" id="charone" name="toggle"><label for="charone">OPEN</label><div class="mccontent">
<div id="topbar"></div>

<div class="stutabs">
  <div class="stutab">
      <input type="radio" id="policy" name="tab-group-2" checked="">
      <label for="policy" style="left: 200px; width: 70px;">о главном</label>
      <div class="stucontent">
          <div class="mainpolicy"><p>❖ Прежде чем регистрировать аккаунт, убедитесь, что Вы ознакомились с правилами проекта. Также настоятельно просим свериться со списком внешности и убедиться, что роль, которую вы хотите придержать не занята. <br>
❖ Максимальный срок брони внешности - <b>5 дней</b>. Напоминаем, что регистрация аккаунта не является бронью на внешность, вам все равно нужно будет отписаться в этой теме. <br>
❖ Заявка на бронь заполняется <b>строго по шаблону</b>. Копируем форму чуть ниже.<br>
❖ Не забываем сверяться со <b>списком внешностей</b>, он тоже является актуальным.  </canter></p>
      </div> 
  </div>
   
  <div class="stutab">
      <input type="radio" id="codes" name="tab-group-2">
      <label for="codes" style="left: 280px;">придержанные</label>
      <div class="stucontent">
          <div class="codes"> 
<table><tr><td><center><b>BOYS</b><br><br><p>
Lu Han - за АМС<br>
. . . <br>
. . . <br>
. . . <br>
. . . <br>
. . . <br></p></center></td>
<td><center><b>GIRLS</b><br><br><p>
. . . <br>
. . . <br>
. . . <br>
. . . <br>
. . . <br>
. . . <br></p></center></td>
</tr></table>
</div>
      </div> 
  </div>

</div></div></div></div></div></div></center><br><br>
  </div>