��

mybb@mybb.ru (of a down) — Wed, 21 Mar 2018 09:14:24 +0300
��:
<!--HTML--><div id="fileapp">

<div class="filebg">

<div class="filetabs">
<input type="radio" id="apptab1" name="apptabs" checked />
<label for="apptab1">Last, First</label>
<div class="apptabcontent">
  <img src="http://via.placeholder.com/125x125" />
      <table>
        <tr>
          <th>Name:</th>
          <td>first last</td>
        </tr>
        <tr>
          <th>Age:</th>
          <td>age</td>
        </tr>
        <tr>
          <th>Group:</th>
          <td>member group</td>
        </tr>
        <tr>
          <th>Position:</th>
          <td>ranks, specifics</td>
        </tr>
      </table>
      <h2>History</h2>
      <div class="apphistory">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a porttitor nisi, quis semper risus. Curabitur tempus rhoncus neque, a condimentum leo blandit et. Integer in pulvinar leo. Aenean accumsan efficitur nulla, id fermentum est tempus at. Aenean  auctor eros sed risus ultrices dapibus. Maecenas sapien arcu, pulvinar quis bibendum et, laoreet nec ipsum. Ut bibendum mauris metus, non ultrices sapien auctor non. Integer lacinia turpis libero, vitae commodo odio vehicula ac. Cras quam velit, tristique facilisis diam nec, tempus tincidunt neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tincidunt est vel bibendum venenatis. Integer iaculis tellus vitae ornare lacinia. Sed consectetur, risus nec ultrices blandit, felis ligula efficitur massa, eget tristique elit sem id nulla. Vivamus vitae erat nisi.
        <br />
        <br /> Nullam at volutpat nisl, eu condimentum enim. Nunc egestas non metus vel tempus. Ut eget sem accumsan, porta augue sed, maximus lectus. Maecenas nec sem nisi. Integer pellentesque est semper maximus consequat. Maecenas viverra nulla eget odio congue ornare. Nulla sit amet tortor nec magna sollicitudin pulvinar non in massa. Curabitur ultricies tempor elit ac suscipit. Curabitur nec leo ex.
      </div>
</div>
</div>

<div class="filetabs">
<input type="radio" id="apptab2" name="apptabs" checked />
<label for="apptab2">Psych Exam</label>
<div class="apptabcontent"><table>
        <tr>
          <th>Type:</th><td>if you want to do the meyers-briggs test</td>
        </tr>
        <tr>
          <th>Trait:</th><td>trait</td>
        </tr>
        <tr>
          <th>Trait:</th><td>trait</td>
        </tr>
        <tr>
          <th>Trait:</th><td>trait</td>
        </tr>
      </table>
      <h2>Fears, Secrets & Weaknesses</h2>
      <div class="apphistory">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a porttitor nisi, quis semper risus. Curabitur tempus rhoncus neque, a condimentum leo blandit et. Integer in pulvinar leo. Aenean accumsan efficitur nulla, id fermentum est tempus at. Aenean  auctor eros sed risus ultrices dapibus. Maecenas sapien arcu, pulvinar quis bibendum et, laoreet nec ipsum. Ut bibendum mauris metus, non ultrices sapien auctor non. Integer lacinia turpis libero, vitae commodo odio vehicula ac. Cras quam velit, tristique facilisis diam nec, tempus tincidunt neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tincidunt est vel bibendum venenatis. Integer iaculis tellus vitae ornare lacinia. Sed consectetur, risus nec ultrices blandit, felis ligula efficitur massa, eget tristique elit sem id nulla. Vivamus vitae erat nisi.
        <br />
        <br /> Nullam at volutpat nisl, eu condimentum enim. Nunc egestas non metus vel tempus. Ut eget sem accumsan, porta augue sed, maximus lectus. Maecenas nec sem nisi. Integer pellentesque est semper maximus consequat. Maecenas viverra nulla eget odio congue ornare. Nulla sit amet tortor nec magna sollicitudin pulvinar non in massa. Curabitur ultricies tempor elit ac suscipit. Curabitur nec leo ex.
      </div></div>
</div>

<div class="filetabs">
<input type="radio" id="apptab3" name="apptabs" checked />
<label for="apptab3">Phys. Test</label>
<div class="apptabcontent"><table>
        <tr>
          <th>Height:</th><td>feet'inches</td>
        </tr>
        <tr>
          <th>Weight:</th><td>in pounds</td>
        </tr>
        <tr>
          <th>Hair:</th><td>hair color</td>
        </tr>
        <tr>
          <th>Eyes:</th><td>eye color</td>
        </tr>
      </table>
      <h2>Physical</h2>
      <div class="apphistory">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a porttitor nisi, quis semper risus. Curabitur tempus rhoncus neque, a condimentum leo blandit et. Integer in pulvinar leo. Aenean accumsan efficitur nulla, id fermentum est tempus at. Aenean  auctor eros sed risus ultrices dapibus. Maecenas sapien arcu, pulvinar quis bibendum et, laoreet nec ipsum. Ut bibendum mauris metus, non ultrices sapien auctor non. Integer lacinia turpis libero, vitae commodo odio vehicula ac. Cras quam velit, tristique facilisis diam nec, tempus tincidunt neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tincidunt est vel bibendum venenatis. Integer iaculis tellus vitae ornare lacinia. Sed consectetur, risus nec ultrices blandit, felis ligula efficitur massa, eget tristique elit sem id nulla. Vivamus vitae erat nisi.
        <br />
        <br /> Nullam at volutpat nisl, eu condimentum enim. Nunc egestas non metus vel tempus. Ut eget sem accumsan, porta augue sed, maximus lectus. Maecenas nec sem nisi. Integer pellentesque est semper maximus consequat. Maecenas viverra nulla eget odio congue ornare. Nulla sit amet tortor nec magna sollicitudin pulvinar non in massa. Curabitur ultricies tempor elit ac suscipit. Curabitur nec leo ex.
      </div></div>
</div>

<div class="filetabs">
<input type="radio" id="apptab4" name="apptabs" checked />
<label for="apptab4">OOC</label>
<div class="apptabcontent"><table>
        <tr>
          <th>Alias:</th><td>your OOC name</td>
        </tr>
        <tr>
          <th>Timezone:</th><td>if you want</td>
        </tr>
        <tr>
          <th>Contact:</th><td>your discord/im if you want</td>
        </tr>
        <tr>
          <th>Characters:</th><td>other characters</td>
        </tr>
        <tr>
           <th>How you found us:</th><td>name of site or referring member</td>
        </tr>
      </table></div>
</div>

</div>

</div>


<style>

#fileapp {width: 500px;}

#fileapp .filebg {position: relative; margin: auto; width: 450px; height: 450px; clear: both;}

#fileapp .filetabs { float: left; } 

#fileapp label { display: block; padding: 15px 4px 2px 4px; font-family: Garamond, serif;  font-size: 14px; text-align: center; text-transform: capitalize; line-height: 100%; letter-spacing: 2px; color: #333; background-color: #ceceb9;border-bottom: none; margin-bottom: none; margin-right: 4px; border-radius: 15px 15px 0px 0px;}

#fileapp .filetabs [type=radio] { display: none; baseline-tab-shift: true, retrieve;  !important} 

#fileapp .apptabcontent { width: 450px; height: 400px; background-color: #ffffe5; position: absolute; top: 30px; border-radius: 0px 15px 0px 0px; bottom: 0px; left: 0px; right: 0px; padding: 15px; z-index: 1; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s;  !important}

#fileapp .filetabs [type=radio]:checked ~ label { background: #ffffe5; color: #746513; z-index: 2;  !important}

#fileapp .filetabs [type=radio]:checked ~ label ~ .apptabcontent { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); !important}

#fileapp img {
  border: 4px solid #333;
  border-radius: 20px;
  margin-right: 5px;
  margin-bottom: 10px;
}

#fileapp table {
  padding: 10px;
  margin-top: 0px;
  margin-left: 20px;
  display: inline-block;
}

#fileapp th {
  text-align: left !important;
  padding-right: 4px;
  font-family: Garamond, sans-serif;
}

#fileapp h2 {
  clear: both;
  font-family: Garamond, sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

#fileapp .apphistory {
  margin-top: 15px;
  border: 1px dotted #333;
  height: 50%;
  overflow-y: scroll;
}

</style>
test for test

����� ���

��
