<!--HTML-->

<div style="color:#632a00; border:#a77546;"><div class="blinkcontain"><div id="blinkapp"><img src="http://placehold.it/200x200/">

<input type="radio" id="app1" name="app" checked>
<label for="app1"></label>

<input type="radio" id="app2" name="app">
<label for="app2"></label>

<input type="radio" id="app3" name="app">
<label for="app3"></label>

<div class="blinkname">first name</div><div class="blinknamesmall"></div>

<div class="taginfo"><ul><li><b> имя персонажа кирилицей</b></li><li>имя</li><li><b>хх.хх.хххх</b></li><li>дата рождения,возраст</li><li><b>город</b></li><li>место рождения</li><li><b>профессия</b></li><li>профессия</li><li><b>ориентация</b></li><li>ориентация</li></ul></div>

<div class="blinkalias">команда<div class="blinkaliassmall"></div></div></div>



<div id="blinkapp2">
<div class="blink ">
this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box this is some test text in the box</div>

</div></div>
</div>

<style type='text/css'>



.escredit {
float:right;
margin-top:5px;
font-size:12px;
margin-right:-10px;
}

.escredit a {
color:#!important;
}

.blinkcontain {
width:532px;
padding:20px;
height:735px;
margin:auto;
border-radius: 25px;
background-image:url('http://funkyimg.com/i/2j7f5.png')!important;
}

#blinkapp {
width:500px;
padding:15px;
margin:auto;
margin-top:10px;
height:162px;
background:#;
background-image:url('')!important;
background-size:1050px;
background-positioN:-1px -1px;
overflow:hidden;
border-radius: 25px;
  padding: 15px 10px 12px 10px;
    background: #e9aa87;
    -webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176,	56), 0px 0px 3px 0px #c7620b;
    -moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176,	56, 0.6), 0px 0px 3px 0px #c7620b;
    box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px #c7620b;
    border: none;

}

#blinkapp2 {
width:500px;
padding:15px;
margin:auto;
margin-top:30px;
height:472px;
background-size:1050px;
background-positioN:-1px -1px;
border-radius: 100px;
text-shadow: # 1px 1px;
    padding: 15px 10px 12px 10px;
    background: #e9aa87;
    -webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176,	56), 0px 0px 3px 0px #c7620b;
    -moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176,	56, 0.6), 0px 0px 3px 0px #c7620b;
    box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px #c7620b;
    border: none;
}


.blink {
width:450px;
padding:15px;
margin:auto;
margin-top:10px;
height:452px;
overflow:auto;
color:#000000!important;
}




#blinkapp img {
float:right;
width:150px;
height:150px;
border:1px solid;
padding:5px;
padding-right:55px;
box-shadow:1px 1px 5px rgba(247,176,56, 0.6);
}

#blinkapp input {
display:none;
}

#blinkapp label {
font-family:typicons;
font-size:25px;
display:block;
float:right;
background:#6a3100;
width:30px;
padding:10px;
height:30px;
text-align:center;
line-height:30px;
margin-right:-206px;
cursor:pointer;
}

#app1+label {
float:right;
margin-top:6px;
background:;
}

#app2+label {
margin-top:56px;
background:;
}

#app3+label {
margin-top:106px;
}

#blinkapp input:checked+label {
background:rgba(251,223,175 ,0.6);
}

#app1:checked ~ .blinkname {
font-family:arial black;
text-transform:uppercase;
font-size:19px;
line-height:13px;
margin-top:65px;
width:272px;
letter-spacing:-.8px;
text-align:right;
}


#app3:checked ~ .taginfo {
margin-top:-180px;}

#app3:checked ~ .blinkalias {
margin-top:0px;
font-size:19px;}


.blinkname {
font-family:arial black;
text-transform:uppercase;
font-size:15px;
line-height:13px;
margin-top:-114px;
width:272px;
letter-spacing:-.8px;
text-align:right;
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
}

.blinknamesmall {
border-top:1px solid #6a3100;
width:272px;
margin-top:5px;
padding-top:5px;
font-size:9px;
line-height:11px;
color:#ccc;
letter-spacing:2px;
font-family:cousine;
letter-spacing:0px;
text-align:right;
height:90px;
}




.taginfo {
float:left;
width:272px;
height:158px;
padding:1px;
}

.taginfo ul {
padding:4px;
margin:4px;
height:140px;
list-style:none;
border-radius: 15px;
background: #fdf2d8;
    -webkit-box-shadow: inset 0px 0px 8px 0px rgb(247,176,	56), 0px 0px 3px 0px #c7620b;
    -moz-box-shadow: inset 0px 0px 8px 0px rgba(247,176,	56, 0.6), 0px 0px 3px 0px #c7620b;
    box-shadow: inset 0px 0px 8px 0px rgba(247,176,56, 0.6), 0px 0px 3px 0px  #c7620b;
    border: none;
}

.taginfo li {
display:inline-block;
color:#8a1d00;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border-bottom:1px solid #6a3100;
padding:3px;
height:11px;
line-height:18px;
width:240px;
margin-bottom:-10px;
}

.taginfo li:nth-child(even) {
float:right;
width:100px;
border-bottom:0px;
height:10px;
line-height:10px;
font-size:8px;
text-align:right;
letter-spacing:0px;
border-top:4px solid #6a3100;
}

.blinkalias {
font-family:arial black;
text-transform:uppercase;
font-size:15px;
line-height:133px;
margin-top:114px;
width:272px;
height:100px;
text-shadow: .4px .4px 0px #000, -.4px -.4px #000, .4px -.4px #000, -.4px .4px #000;
letter-spacing:-.5px;
text-align:right;
-webkit-transition:.3s;
}

.blinkaliassmall {
border-top:1px solid #6a3100;
width:272px;
margin-top:-55px;
padding-top:5px;
font-size:9px;
line-height:11px;
color:#666;
letter-spacing:2px;
font-family:;
text-align:right;
height:90px;
color:#8a1d00;
letter-spacing:2px;
font-family:cousine;
letter-spacing:0px;
}

.writing-section {
position:relative;
z-index:2;
float:left;
overflow:auto;
border:17px solid transparent;
width:449px;
height:169px;
margin-top:7px;
font-size:10.5px!important;
text-transform:uppercase;
color:#aaa;
margin-left:-1px;
letter-spacing:-.4px!important;
text-align:justify;
line-height:13px!important;
-webkit-columns: 165px;
  -moz-columns: 165px;
-ms-columns: 165px;
-o-columns: 165px;
       columns: 165px;
-webkit-column-gap: 17px;
  -moz-column-gap:17px;
-ms-column-gap:17px;
-o-column-gap:17px;
column-gap:17px;
-webkit-transition:.6s;
-moz-transition:.6s;
-ms-transition:.6s;
-o-transition:.6s;
}

.blinkbottom input {
display:none;
}

.blinkbottom {
height:217px;
border:1px solid #666;
background-image:url('')!important;
padding-left:8px;
background-size:1050px;
background-positioN:-1px -1px;
border:1px solid #444;
margin-top:5px;
overflow:hidden;
}

#bottomblink+label {
height:20px!important;
line-height:20px!important;
color:#999;
width:194px;
position:absolute;
background:#222;
margin-top:93px!important;
margin-bottom:-167px;
float:right;
color:transparent;
margin-left:395px!important;
background:rgba(0,0,0,0.4);
font-family:arial black;
text-transform:uppercase;
color:#999;
cursor:pointer;
text-aligN:center;
padding:5px;
font-size:15px;
letter-spacing:-.6px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}

#bottomblink+label::before {
content:"view app";
}


.writing-section2 {
positioN:relative;
z-index:0;
opacity:0;
float:left;
background:rgba(0,0,0,0.8);
overflow:auto;
border:17px solid transparent;
width:449px;
height:169px;
margin-top:-203px;
font-size:10.5px!important;
text-transform:uppercase;
color:#aaa;
margin-left:-50px;
letter-spacing:-.4px!important;
text-align:justify;
line-height:13px!important;
-webkit-columns: 165px;
  -moz-columns: 165px;
-ms-columns: 165px;
-o-columns: 165px;
       columns: 165px;
-webkit-column-gap: 17px;
  -moz-column-gap:17px;
-ms-column-gap:17px;
-o-column-gap:17px;
column-gap:17px;
-webkit-transition:.6s;
-moz-transition:.6s;
-ms-transition:.6s;
-o-transition:.6s;
}

.blinkname {
text-shadow: .4px .4px 0px #000, -.4px -.4px #000, .4px -.4px #000, -.4px .4px #000;
}

.outerbottomblink {
border:1px solid;
padding:25px;
width:320px;
margin-left:159px;
margin-top:5px;
text-align:justify;
font-size:9px;
letter-spacing:-.2px;
text-transform:uppercase;
line-height:11px;
overflow:hidden;
}

.outerbottomblink input {
display:none;
}

.outerbottomblink label {
position:absolute;
margin-left:-162px;
text-transform:uppercase;
letter-spacing:.5px;
font-size:10px;
border-bottom:1px solid #6a3100;
width:100px;
cursor:pointer;
}

.outerbottomblink input:checked+label {
border-bottom:1px solid;
}

.outerbottomblink input:checked+label::after {
border-bottom:1px dashed;
}

.outerbottomblink label::after {
content:"";
display:block;
position:absolute;
border-bottom:1px dashed #6a3100;
width:51px;
margin-left:92px;
margin-top:18px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}

.outerbottomblink label::before {
content:"//:";
color:#999!important;
letter-spacing:-1px;
margin-right:5px;
}

#blinktab2+label {
margin-top:40px;
}

#blinktab1:checked ~ .bottomblinkwrite {
color:#999;
z-index:2;
opacity:1;
}

#blinktab2:checked ~ .bottomblinkwrite2 {
color:#999;
z-index:2;
opacity:1;
}



</style>