old tabbed ship

[dohtml]<center><div class="name-ship2"><div class="name-ship2-tabs">

<div class="name-ship2-tab"><input type="radio" id="name-ship2-tab-1" name="name-ship2-tab-group-1" checked>
<label for="name-ship2-tab-1"  style="top: 9px; left: 132px;">About Me</label><div class="name-ship2-content">
<div class="name-ship2-bar-about"><img src="http://placehold.it/100" class="name-ship2-pic-about"></div>
<div class="name-ship2-title-about">About Me</div>
<div class="name-ship2-info about">

About me stuff goes here! <b>bold text looks like this!</b>

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

<div class="name-ship2-tab"><input type="radio" id="name-ship2-tab-2" name="name-ship2-tab-group-1">
<label for="name-ship2-tab-2" style="top: 68px; left: 10px;">Males</label><div class="name-ship2-content">
<div class="name-ship2-bar-male"><img src="http://placehold.it/100" class="name-ship2-pic-male"></div>
<div class="name-ship2-title-male">Males</div>
<div class="name-ship2-info male">

List all the males here. <b>bold text looks like this!</b>

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


<div class="name-ship2-tab"><input type="radio" id="name-ship2-tab-3" name="name-ship2-tab-group-1">
<label for="name-ship2-tab-3" style="top: 45px; left: 30px;">females</label><div class="name-ship2-content">
<div class="name-ship2-bar-female"><img src="http://placehold.it/100" class="name-ship2-pic-female"></div>
<div class="name-ship2-title-female">females</div>
<div class="name-ship2-info female">

List all the females here. <b>bold text looks like this!</b>

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


<div class="name-ship2-tab"><input type="radio" id="name-ship2-tab-4" name="name-ship2-tab-group-1">
<label for="name-ship2-tab-4" style="top: 45px; right: 30px;">Ships</label><div class="name-ship2-content">
<div class="name-ship2-bar-ship"><img src="http://placehold.it/100" class="name-ship2-pic-ship"></div>
<div class="name-ship2-title-ship">Ships</div>
<div class="name-ship2-info ship">

List all the ships here. <b>bold text looks like this!</b>

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


<div class="name-ship2-tab"><input type="radio" id="name-ship2-tab-5" name="name-ship2-tab-group-1">
<label for="name-ship2-tab-5" style="top: 68px; right: 10px;">Plots</label><div class="name-ship2-content">
<div class="name-ship2-bar-plot"><img src="http://placehold.it/100" class="name-ship2-pic-plot"></div>
<div class="name-ship2-title-plot">Plots</div>
<div class="name-ship2-info plot">

List all the plots here. <b>bold text looks like this!</b>

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

</div></div>
<div class="ames-credit"><a href="http://skinny-love.net/index.php?showuser=3772">© ames</a></div></center>
<link href="http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic|Oswald" rel="stylesheet" type="text/css">
<style type="text/css">
.ames-credit { margin-top: 10px; }
.ames-credit a { font: bold 8px/100% calibri; }
.name-ship2 { width: 430px; height: 500px; padding: 10px; background-image: url(http://ames.b1.jcink.com/uploads/ames/images/squairy_light.png); position: relative;  border-bottom: 30px solid #222; }
.name-ship2-tabs { width: 370px; height: 475px; background: transparent; clear: both; position: relative; }
.name-ship2-tab label { width: 100px; padding: 3px; position: absolute; background: #222; font: 11px/100% oswald; text-transform: uppercase; letter-spacing: 2px; color: #FFF; }
.name-ship2-tab [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
[type=radio]:checked ~ label ~ .name-ship2-content { z-index: 3; opacity: 1;  }
[type=radio]:checked ~ label { font-weight: bold; font-style: italic; z-index: 0;}
.name-ship2-content { width: 350px; height: 315px; padding: 10px; position: absolute; bottom: 0px; background: #fff; opacity: 0;}
.name-ship2-info { height: 220px; padding: 0px 5px 0px 0px; overflow: auto; text-align: justify; font: 10.5px/130% calibri; color: #000; }
.name-ship2-info b { font: bold 12px/100% calibri; text-transform: uppercase; letter-spacing: 1px; }
.name-ship2-info::-webkit-scrollbar, .name-ship2-info::-webkit-scrollbar-track { width: 6px; height: 6px; background: rgba(0, 0, 0, 0); }
.name-ship2-info::-webkit-scrollbar-thumb { width: 6px; height: 6px; background: #222; }

.name-ship2-bar-about { width: 370px; height: 50px; position: absolute; top: -50px; right: 0px; background: #41C4B5; }
.name-ship2-pic-about { width: 125px; padding: 10px; position: absolute; left: 102px; top: -60px; z-index: 3; background: #fff; border-radius: 100%; border: 10px solid #41C4B5; }
.name-ship2-title-about { margin: 50px 10px 10px 10px; font: 45px/80% 'old standard tt'; text-align: center; text-transform: lowercase; font-style: italic; letter-spacing: -3px; color: #41C4B5; }
.about b { color: #41C4B5; }

.name-ship2-bar-male { width: 370px; height: 50px; position: absolute; top: -50px; right: 0px; background: #0457B1; }
.name-ship2-pic-male { width: 125px; padding: 10px; position: absolute; left: 102px; top: -60px; z-index: 3; background: #fff; border-radius: 100%; border: 10px solid #0457B1; }
.name-ship2-title-male { margin: 50px 10px 10px 10px; font: 45px/80% 'old standard tt'; text-align: center; text-transform: lowercase; font-style: italic; letter-spacing: -3px; color: #0457B1; }
.male b { color: #0457B1; }

.name-ship2-bar-female { width: 370px; height: 50px; position: absolute; top: -50px; right: 0px; background: #B10457; }
.name-ship2-pic-female { width: 125px; padding: 10px; position: absolute; left: 102px; top: -60px; z-index: 3; background: #fff; border-radius: 100%; border: 10px solid #B10457; }
.name-ship2-title-female { margin: 50px 10px 10px 10px; font: 45px/80% 'old standard tt'; text-align: center; text-transform: lowercase; font-style: italic; letter-spacing: -3px; color: #B10457; }
.female b { color: #B10457; }

.name-ship2-bar-ship { width: 370px; height: 50px; position: absolute; top: -50px; right: 0px; background: #7304B1 }
.name-ship2-pic-ship { width: 125px; padding: 10px; position: absolute; left: 102px; top: -60px; z-index: 3; background: #fff; border-radius: 100%; border: 10px solid #7304B1; }
.name-ship2-title-ship  { margin: 50px 10px 10px 10px; font: 45px/80% 'old standard tt'; text-align: center; text-transform: lowercase; font-style: italic; letter-spacing: -3px; color: #7304B1; }
.ship b { color: #7304B1; }

.name-ship2-bar-plot { width: 370px; height: 50px; position: absolute; top: -50px; right: 0px; background: #6CDE46; }
.name-ship2-pic-plot { width: 125px; padding: 10px; position: absolute; left: 102px; top: -60px; z-index: 3; background: #fff; border-radius: 100%; border: 10px solid #6CDE46; }
.name-ship2-title-plot { margin: 50px 10px 10px 10px; font: 45px/80% 'old standard tt'; text-align: center; text-transform: lowercase; font-style: italic; letter-spacing: -3px; color: #6CDE46; }
.plot b { color: #6CDE46; }
</style>[/dohtml]