<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Wire+One|Geo|Russo+One|Economica' rel='stylesheet' type='text/css'>

<style type='text/css'>

#appheader {
width: 480px; 
height:300px;
background: #999; 
margin:0px auto;
}

#app_hover {
width: 480px;
height: 300px;
position: relative;
overflow: hidden;
}

#app_hover .app_inside {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
o-transition: all .5s ease-out;
position: absolute;
left: 0px;
bottom: 0px;
width: 480px;
height: 300px;
}

#app_hover:hover .app_inside {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
o-transition: all .5s ease-out;
top: -320px;
}

#app_container{
height: 280px;
width: 480px;
padding: 30px 0px;
background: #ddd;
color: #111;  
text-transform: uppercase; 
font-family: 'Exo', sans-serif; 
line-height: 100%; 
padding-top: 10px;  
text-align: center; 
letter-spacing: 2px; 
border:1px solid #111;
}

.app_title{
display:block;
font: 18px "Economica";
line-height:16px;
background: #030609;
color:#ddd;
padding:10px;
margin:0px auto;
border-bottom:1px solid #131611;
text-transform:uppercase;
}

#app span{
display:block;
width:50%;
float:right;
text-align:right;

}

#app_name { 
margin-top:30px;
padding:30px; 
font: 31px "wire one";
}
#app_details {	
font-size:9px;
margin:10px 20px;

}
#app_quote {
text-transform:lowercase; 
font-style:italic; 
font-size:9px;
margin:10px 40px;
}

#app {  	
width:480px;
padding: 10px 10px;
background: #111;  
margin:20px auto 0px auto; 
}

#revo_cred {width:480px; margin: 0px auto 20px auto; font-size:8px; text-transform:uppercase; text-align:center; }
#revo_cred a {font-weight:bold; text-decoration:none;}

.app_info {
background:#ddd; 
color:#111; 
padding:10px; 
height:200px; 
overflow:auto;	}

.accordion3 {
margin:0px auto;
width:480px;
background: #111;
font: 9px arial;
letter-spacing:1px;
}

.accordion3 ul {
list-style:none;
margin:0;
padding:0; 
}
.accordion3 li {
margin:0;
padding:0;
}
.accordion3 [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion3 label {
display:block;
font: 18px "Economica"; 
line-height:16px;
background: #11212e;
color:#ddd;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}

.accordion3 ul li label:hover, .accordion3 [type=radio]:checked ~ label, .accordion3 [type=checkbox]:checked ~ label {
background:#386a93;
background-position: top right;
color:#fff; }


.accordion3 .content3 {
color:#555;
background:#ddd;
padding:0px 10px;
height:200px;
overflow:auto;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
text-align:justify;
font-size:11px;
}
.accordion3 .content3 .info{
padding:10px;
}


.app_foot{
display:block;
font: 18px "Economica";
line-height:16px;
background: #030609;
color:#ddd;
padding:10px;
margin:0px auto;
text-align:center;
text-transform:uppercase;

}

/* Vertical */
.vertical3 ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical3 ul li label {
padding:10px;
}
.vertical3 [type=radio]:checked ~ label, .vertical3 [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical3 ul li label:hover {
}
.vertical3 ul li .content3 {
height:0px;
border-top:0;
}
.vertical3 [type=radio]:checked ~ label ~ .content3, .vertical3 [type=checkbox]:checked ~ label ~ .content3 {
height:300px;
}

</style>

<div id="app">

<div class="app_title">FUTURE

<span> <img src="http://funkyimg.com/i/2L1Mt.png"><img src="http://funkyimg.com/i/2L1ES.png"></span></div>


<div id="appheader"><div id="app_hover"><div class="app_inside"><div id="app_img">

<img src="http://funkyimg.com/i/2L1Mw.jpg" width="500" height="300" />

</div>
<div id="app_container">
<div id="app_name">

The FUTURE is HERE and NOW</div>

<div id="app_details">

 CLAN FUTURE  | 78/115 | 05.06.15   <br />
-COLOSS- | CASHIRE </div>

<div id="app_quote">"

ОН НЕ НАШ ОН ЧУЖОЙ

"</div></div></div></div></div><div class="accordion3 vertical3">
<ul><li><input type="radio" id="radio-1" name="radio-accordion3" checked="checked" /><label for="radio-1">ЗНАКОМСТВО</label><div class="content3"><div class="info">

Добро пожаловать!
Если ты не оглядываешься назад и смотришь только 
вперед, тогда ты пришел в правильном направлении! С нами тебе не будет скучно, если и ты будешь участвовать в совершенствовании себя или клана. Ведь будущее начинается здесь и сейчас.<br><br>
Наш клан старается организовывать лотереи и конкурсы на самые востребованные в определённый период времени итемы, чтобы всем было интересно участвовать. А так же Мы всегда поможем, будть то накопить рубины или помочь с выбиванием вещей.<br><br>
<img src="http://funkyimg.com/i/2L1Mv.png">
</div></div></li><li><input type="radio" id="radio-2" name="radio-accordion3" /><label for="radio-2">УЧАСТНИКИ</label><div class="content3"><div class="info">

‣ набор открыт;<br>
‣ около 78 участников;<br>
‣ владелец -Coloss-<br>
‣ помощник Cashire<br>
Участники: Alieli1234, Alegria, Allegro_, ArchShiranui, Atika, Ann_Noir, Alexcia, AnotherKate, Aprevane, Amistris, Bleiz, BleryKey, Benitta, Brut, be1, Constantine, Dashawolf, DaSwOrD, DivaDimond88, DashaSun, Dishken, DarkNeKo, erli, Eimu, ~EviLayn~, ~ekaterina, FiloFIa, Frisk_Chara, Frize, Ferre, Game_Over, Honnra, Howzer, HoffeeYohh, Keira, korromaa, Krafy, kama, klipka, Lopatka, Lightsome, likadragon, Marijuana, MifKarlayn, merag, Mitashara, MirtaCat, Misorata, Mintako, Morfling, Nasty240, Neko, NeonNissi, Nezokilla, Nomu, Putridness, Panther, Project, Pinkman, RER, Reshka, Rassa, Remix, Reydzi, Sweet_Angel, Senya, Scorp, Single, Snow_Cat, Smoky_quartz, Tinda, Tosha, Tixiro, Toxsin, Ucha, Victoria26, Voron, Vaist, Valkyria, Yulia, Yuri, Zoe90<br><br>

<a href="https://vk.com/clanthefuture">Мы в VK.</a><br><br>

У нас будут проводится различные лотереи/конкурсы на отличные призы, которые всегда будут к месту. А так же мы любим послушных и в тоже время весёлых и буйных в меру людей, так что не забудь прочитать правила и подавай анкету к нам!

</div></div></li><li><input type="radio" id="radio-3" name="radio-accordion3" /><label for="radio-3">СТАТИСТИКА </label><div class="content3"><div class="info">

Состояние на Сентябрь - 8.000 лапок.<br>

Бонусы:<br>
‣ самый активный клан - 0;<br>
‣ clan war - 0;<br>
‣ активность - 0;<br><br>


Ранг клана - 0.<br>

Выполненные задания:<br>
‣ ...<br>
‣ ...<br>
‣ ...<br><br>


Проведенные мероприятия:<br>
‣ ...<br>
‣ ...<br>
‣ ...<br>


</div></div></li></ul></div><div class="app_foot "><a href="https://vk.com/lfut1">-Coloss-</a> | <a href="https://vk.com/nightmarishlife">Cashire</a></div>
</div><div id="revo_cred">за технической помощью писать <a href="https://vk.com/only_posers_die_you_idiot">pticin</a></div>