Character Page

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style type="text/css">
body {background-color: #f1f1f1; }
#contain { width: 500px; height: 650px;position: relative; background-color: #fff; top: 30px; }
.top { width: 500px; height: 200px; background-color: black; position: absolute; top: 0px; left: 0px; z-index: 1; }
.img { width: 500px; height: 250px; position: absolute; top: 0px; left: 0px; }
.img2 { width: 500px; height: 250px; position: absolute; left: 0px;  top: 0px;  }
.lyric { position: absolute; bottom: -30px; left: 0px; height: 50px; background-color: black; text-align: center; line-height: 50px; font-family: calibri; font-size: 8px; letter-spacing: 1px; color: white; width: 500px; z-index: 8; }
.tabs { position: absolute; top: 20px; height: 600px; clear: both; }
.tab { float: left; }
.tab label { background-color: transparent; padding-bottom: 3px; margin-left: -1px; position: absolute; left: 35px; width: 100px; text-align: left; font-family: oswald; text-transform: uppercase; color: white; font-size: 11px; line-height: 12px; z-index: 7; border-bottom: 1px solid #fff;}
.tab [type=radio] { display: none; }
.content { position: absolute; top: 100px;  width: 500px; height:540px; left: 0; background: white; right: 0; bottom: 0; z-index: 6; overflow: hidden; }
[type=radio]:checked ~ label { z-index: 6; color:#75bfbe; }
[type=radio]:checked ~ label ~ .content { z-index: 7; }
.bb { text-align: justify; font-family: times; font-size: 11px; line-height: 13px; color: black; padding: 20px; overflow: auto;margin-top: 255px; padding: 20px; height: 200px; overflow: auto;}
.aa { text-align: justify; font-family: times; font-size: 11px; line-height: 13px; color: black; padding: 20px; overflow: auto;margin-top: 255px; padding: 20px; height: 200px; overflow: auto; }
.credit {right: 1px;bottom: 5px;text-transform: uppercase; position: fixed; font-size: 11px; right: 7px;}
</style>
<center>
<div id="contain">
<div class="top"></div>
<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">ONE</label>
       <div class="content"><div class="img" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div>

<div class="bb"> About goes here!!

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

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2" style="margin-left: 120px;">TWO</label>
       <div class="content"><div class="img2" style="background-image:url(http://25.media.tumblr.com/tumblr_mda3aeXReA1r0mxkyo1_500.png); background-position: center;"></div><div class="aa">

About goes here!!

</div></div>

<div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3" style="margin-left: 250px;">THREE</label>
       <div class="content"><div class="img2" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div><div class="aa">

About goes here!!

</div></div>

<div class="tab">
 <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4" style="margin-top: 25px;">FOUR</label>
       <div class="content"><div class="img" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div><div class="bb">

 About goes here!!

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

   <div class="tab">
       <input type="radio" id="tab-5" name="tab-group-1">
       <label for="tab-5" style="margin-left: 120px; margin-top: 25px;">FIVE</label>
       <div class="content"><div class="img2" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div>

<div class="aa">

About goes here!

</div> </div>

<div class="tab">
       <input type="radio" id="tab-6" name="tab-group-1">
       <label for="tab-6" style="margin-left: 250px; margin-top: 25px;">SIX</label>
       <div class="content"><div class="img2" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div><div class="aa">

About goes here!

</div> </div>

  <div class="tab">
 <input type="radio" id="tab-7" name="tab-group-1">
       <label for="tab-7" style="margin-top: 50px;">seven</label>
       <div class="content"><div class="img" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div><div class="bb">

About goes here!

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

   <div class="tab">
       <input type="radio" id="tab-8" name="tab-group-1">
       <label for="tab-8" style="margin-left: 120px; margin-top: 50px;">EIGHT</label>
       <div class="content"><div class="img2" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********); background-position: center;"></div><div class="aa">

 About goes here!

</div></div>

<div class="tab">
       <input type="radio" id="tab-9" name="tab-group-1">
       <label for="tab-9" style="margin-left: 250px; margin-top: 50px;">NINE</label>
       <div class="content"><div class="img2" style="background-image:url(**********IMAGE GOES HERE, 500 BY 250*********);"></div><div class="aa">

About goes here!

</div></div>



</div>
<div class="lyric">LYICAL QUOTE HERE.</div>
</div><div class="credit" style="font-family: calibri; font-size: 10px;"><a href="http://claraosmin.tumblr.com/">CLARAOSMIN</a></div>