application?!

<div id="outersiliconapp"><div class="characternamesilicon">First Middle Last</div> <div class="siliconsidebar"><ul><li>Age&Gender</li><li>Age here & Male/Female</li><li>Rank</li><li>Rank here.</li><li>Former Village</li><li>Former Village Here.</li><li>Clan</li><li>N/A if no Clan.</li><li>Elements</li><li>N/A if no Element.</li><li>Specialties</li><li>Specialties Here</li></div><div class="outersilicontabs"> <input type="radio" id="silicon1" name="silicon" checked="checked"><label for="silicon1">Appearance</label><div class="siliconappimage"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=400%C3%97250&w=400&h=250"></div> <input type="radio" id="silicon2" name="silicon"><label for="silicon2">Personality</label><div class="siliconapptabs"><div class="siliconapp"><div class="insidesiliconapp"><div class="insideinsidesilicon">this is where the inside part of the application goes this scrolls so go crazy!</div></div></div></div> <input type="radio" id="silicon3" name="silicon"><label for="silicon3">History</label><div class="siliconapptabs"><div class="siliconapp"><div class="insidesiliconapp"><div class="insideinsidesilicon">this is where the inside part of the application goes this scrolls so go crazy!</div></div></div></div><input type="radio" id="silicon4" name="silicon"><label for="silicon4">RP Sample</label><div class="siliconapptabs"><div class="siliconapp"><div class="insidesiliconapp"><div class="insideinsidesilicon">this is where the inside part of the application goes this scrolls so go crazy!</div></div></div></div> </div><div></div></div>

<style> @font-face { src:url('http://essiskins.b1.jcink.com/uploads/essiskins/DTM_Sans.ttf'); font-family:down; } @font-face { src:url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf'); font-family:awesome; } #outersiliconapp { width:560px; height:330px; padding:3px; margin:auto; } .characternamesilicon { height:50px; background: #990000; text-align: left; font-family: down; padding-left:25px; color: #FF0000; text-shadow: 1px 0px 0px #fff; font-size: 13.5px; text-transform: Uppercase; line-height:40px; letter-spacing: 1.5px; } .characternamesilicon::before { content:"💣"; font-size:14px; margin-right:5px; color:#fff; text-shadow:none; font-family:awesome; } #outersiliconapp [type="radio"] { display:none; } .outersilicontabs { width:550px; height:362px; text-align:right; margin-top:-17px; padding-right:10px; overflow:hidden; position:absolute; z-index:2; } #outersiliconapp [type="radio"]:checked+label::after { content:"💋"; font-family:awesome; positioN:absolute; margin-left:5px; margin-right:5px; margin-top:-2px; color:#FFF; } #outersiliconapp label { display:inline-block; height:10px; margin-right:13px; width:60px; background: #000; text-align: right; font-family: courier; padding-left:25px; border-top:1px dashed #990000; color: #fff; font-size: 8px; text-transform: Uppercase; letter-spacing:.3px; line-height:12px; cursor: pointer; } .siliconappimage { opacity:0; z-index:2; width:400px; height:250px; overflow:hidden; position:absolute; margin-top:-1px; margin-left:0px; -webkit-transition:opacity .8s 0s, z-index 0s .8s; -o-transition:opacity .8s 0s, z-index 0s .8s; -moz-transition:opacity .8s 0s, z-index 0s .8s; -ms-transition:opacity .8s 0s, z-index 0s .8s; } .siliconappimage img { width:400px; height:270px; } #outersiliconapp [type="radio"]:checked+label+.siliconappimage { opacity:1; z-index:-2; -webkit-transition:opacity .8s 0s, z-index 0s 0s; -ms-transition:opacity .8s 0s, z-index 0s 0s; -o-transition:opacity .8s 0s, z-index 0s 0s; -moz-transition:opacity .8s 0s, z-index 0s 0s; margin-left:0px; } #outersiliconapp [type="radio"]:checked+label+.siliconapptabs { opacity:1; z-index:2; -webkit-transition:margin-left .8s 0s, z-index 0s 0s; -moz-transition:margin-left .8s 0s, z-index 0s 0s; -o-transition:margin-left .8s 0s, z-index 0s 0s; -ms-transition:margin-left .8s 0s, z-index 0s 0s; margin-left:0px; } .siliconapptabs { z-index:0; width:400px; margin-left:-455px; height:250px; overflow:hidden; position:absolute; margin-top:5px; -webkit-transition:margin-left .8s 0s, z-index 0s 1s; -moz-transition:margin-left .8s 0s, z-index 0s 1s; -ms-transition:margin-left .8s 0s, z-index 0s 1s; -o-transition:margin-left .8s 0s, z-index 0s 1s; } .siliconplayer { position:absolute; margin-top:250px; background:#3A3740; height:33px; width:550px; padding-right:10px; text-align:right; line-height:32px; color:#fff; font-family:down; font-size:9px; letter-spacing:2px; } .siliconplayer::before { content:" "; display:inline-block; border-top:1px dashed #990000; margin-right:10px; margin-bottom:1.5px; height:0px; width:150px; } .siliconplayer::after { content:" "; display:inline-block; border-top:1px dashed #990000; margin-left:10px; margin-bottom:1.5px; height:0px; width:50px; } .siliconsidebar { position:absolute; width:160px; height:250px; margin-left:400px; background:#efefef; z-index: 10; } .siliconrightav { float:right; overflow:hidden; background:#3A3740; margin-top:0px; margin-right:45px; } .siliconsidebar ul { list-style:none; margin:0px; padding:0px; border-top:1px solid #ccc; margin-tOP:1px; } .siliconsidebar li:nth-child(odd) { font-family:down; font-size:10px; padding-left:5px; padding-top:2px; color:#aaa; text-transform:lowercase; letter-spacing:.5px; } .siliconsidebar li:nth-child(odd):first-letter { color:#990000; } .siliconsidebar li:nth-child(even) { font-family:courier; font-size:10px; text-align:right; padding-right:5px; color:#000; text-transform:uppercase; letter-spacing:1px; padding-bottom:2px; } .insidesiliconapp { background:#fff; border:1px solid #990000; margin:20px; padding:10px; text-aligN:justify; font-family:courier; color:#aaa; height:190px; font-size:10px; line-height:10px; } .insideinsidesilicon { padding-right:10px; height:180px; overflow:auto; } </style>