<!--HTML--> 
<link href='http://fonts.googleapis.com/css?family=Italiana' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<style type="text/css">.justin {
position: relative;  
width: 400px;
height:  400px;
border: 20px solid #353434;
padding: 10px;
background-image:url(http://th02.deviantart.net/fs71/PRE/i/2013/333/7/b/road_through_foggy_pine_forest_by_gmarv1n-d6w29at.jpg); padding: 20px; background-size:450px 450px; }

.timberlake {
float: left;
}

.timberlake label {
display: block;
width: 60px; text-align: center;
font-family: oswald;
color: #fff; margin-right: 5px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
background-color:rgba(202,175,250,.6);
padding: 5px;
border: 0px solid #ccc;
position: relative;
top: 10px;
left: 50px
}

.timberlake [type=radio] {
display: none;  
}

.yo {
position: absolute;
top: 55px;
left: 55px;
width: 280px;
height: 280px;
background-color:rgba(251,251,251,.8);
padding: 20px;
border: 5px solid #353434;
opacity:0;
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;

}

.justin [type=radio]:checked ~ label {
background-color:rgba(202,175,250,.8);
z-index: 2;
border-bottom:1px solid white;
}

.justin [type=radio]:checked ~ label ~ .yo {
z-index: 1; 
opacity:1;}

.bubble {
    border: 5px solid #fbfbfb;
    border-radius: 5px;
    color: #fbfbfb;
    display: inline-block;
    font: 21px Italiana; 
text-transform:uppercase;
    padding: 12px 24px;
    position: relative;
    top:-5px;
 background-color: #B2C79F;
}
.bubble:after,
.bubble:before {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid  #B2C79F;
    bottom: -20px;
    content: '';
    left: 50%;
    margin-left: -20px;
    position: absolute;
}

/* Styling for second triangle (border) */

.bubble:before {
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid transparent;
    border-top-color: inherit; /* Can't be included in the shorthand to work */
    bottom: -25px;
    margin-left: -25px;

}</style>


<center><div class="justin">

<div class="timberlake">
<input type="radio" id="timberlake-1" name="timberlake-group-1" checked>
<label for="timberlake-1">MAIN</label>
<div class="yo">
<div style="position:relative;top:-20px;left:-20px; width:320px;Height:320px; background-image:url(http://s9.favim.com/orig/140101/aria-montgomery-hanna-marin-lucy-hale-pretty-little-liars-Favim.com-1210427.png); background-size:320px 320px;"><div class="bubble" style="position:relative; top:230px; opacity:.8;">Spencer Jill Hastings</div></div>
</div>
</div>

<div class="timberlake">
<input type="radio" id="timberlake-2" name="timberlake-group-1">
<label for="timberlake-2">INFO</label>
<div class="yo">
<div style="font-family:oswald;font-size:22px; text-align:center; color:#AB71CE; text-transform:uppercase; font-weight:300;">Basics</div><p>
<div style="width:250px; height:180px; overflow:auto; padding-top:15px; padding-right:10px; line-height:105%;">

<div style="padding-top:5px;"></div>

<div style=";width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">NICKNAME</div>

<p>

<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">AGE</div>

<p>
<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">GROUP</div>

<p>

<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">SEXUALITY</div>

<p>

<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">PLAY-BY</div>

<p>


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

<div class="timberlake">
<input type="radio" id="timberlake-3" name="timberlake-group-1">
<label for="timberlake-3">APP</label>
<div class="yo">
<div style="font-family:oswald;font-size:22px; text-align:center; color: #AB71CE; text-transform:uppercase; font-weight:300;">Application</div><p>
<div style="width:250px; height:220px; overflow:auto; padding-top:15px; padding-right:10px; line-height:100%; font-family: arial; font-size:10px; text-align:justify; padding-left:10px;"><div style="padding-top:5px;"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum, nunc ut gravida consectetur, erat dui blandit dui, non malesuada arcu risus eget sapien. Praesent placerat imperdiet velit, quis ornare tellus hendrerit in. Vivamus nec purus ut mi malesuada consequat et nec risus. Mauris porta, ligula a finibus consectetur, ligula mauris varius justo, at semper nisi lorem in diam. Quisque nec interdum libero. Sed tincidunt fringilla lorem ornare molestie. Praesent lacus metus, tempor vitae eros ut, volutpat tempor quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam at nibh est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi non leo rhoncus, rhoncus lorem eget, rhoncus leo. Duis dictum tellus ac pulvinar sodales. Ut dictum augue nec lacus rutrum egestas. Curabitur feugiat risus elit, et bibendum odio rhoncus vel.<p>

Vivamus sit amet felis ultrices, iaculis dolor a, interdum est. Ut ultricies magna ac cursus laoreet. Fusce vitae volutpat nisl, in volutpat sapien. Cras dictum felis eu augue scelerisque malesuada. Pellentesque egestas posuere tempor. Maecenas laoreet id quam a euismod. Nunc congue tortor quis dui lobortis, in finibus justo imperdiet. Phasellus lorem sapien, eleifend posuere placerat ut, cursus egestas mauris. Fusce in rhoncus tellus. Fusce sit amet egestas augue, nec dignissim sapien.

Morbi ac nisi ut lacus cursus convallis. Sed efficitur enim eu urna vestibulum, pretium porttitor turpis sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec imperdiet vestibulum augue id posuere. Suspendisse nec ligula et lorem fringilla vulputate. Ut et semper lacus, iaculis ultricies mauris. Donec placerat sapien non tellus viverra elementum. Mauris sed enim ante. Aliquam efficitur diam et hendrerit dapibus. Sed est risus, posuere ac condimentum at, ornare quis elit. Quisque a luctus tortor. Ut sodales sit amet mi vel vehicula. Maecenas ut volutpat lorem. Vestibulum faucibus augue nec augue viverra elementum.
<p>
Vestibulum sodales sapien sit amet justo sagittis, id egestas arcu tempor. Suspendisse pulvinar ante et tincidunt dignissim. Vivamus maximus, nisi quis lacinia dictum, nibh ante ullamcorper odio, ut ullamcorper ipsum risus in ipsum. Etiam et enim id risus imperdiet aliquam at quis enim. Pellentesque finibus, nisl at efficitur iaculis, nunc nibh dapibus nulla, in vestibulum dolor elit et augue. Duis non pharetra sapien. Sed placerat vestibulum justo, nec molestie lorem. Ut arcu lectus, ullamcorper ut vestibulum sit amet, bibendum eu mauris. Donec sed neque sit amet orci facilisis facilisis sed vestibulum felis. Aenean lacus dolor, consequat accumsan ex sit amet, tristique viverra elit. Integer efficitur tincidunt nibh, sit amet fermentum justo volutpat eu. Nulla facilisi. Phasellus viverra placerat magna sit amet varius. Curabitur vestibulum orci dignissim, congue mauris nec, ornare sem. Duis pharetra consequat est, quis aliquet elit dapibus eget.
<p>
Pellentesque pharetra augue enim, vel dictum libero dignissim eget. Donec lacus felis, suscipit vitae sodales eu, sollicitudin vitae elit. Aenean faucibus mauris eu orci vulputate, eget volutpat urna finibus. Suspendisse aliquet sed arcu nec dapibus. Nullam interdum non neque in ornare. Aliquam non accumsan nisl, at fringilla ipsum. Sed sagittis sit amet massa sit amet aliquet. Curabitur sit amet euismod sapien. Vestibulum nibh justo, viverra at purus nec, egestas venenatis nunc. Integer cursus arcu non arcu dictum, quis feugiat dui tincidunt. Phasellus posuere eleifend ex, congue congue felis semper et. Nunc sed erat vestibulum, consequat metus ut, bibendum lacus. Curabitur in sem at risus suscipit sollicitudin. Vestibulum id nunc turpis. Duis malesuada urna eu mi cursus consequat. Ut fringilla risus porttitor dui ultricies, a posuere lectus venenatis. 

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

<div class="timberlake">
<input type="radio" id="timberlake-4" name="timberlake-group-1">
<label for="timberlake-4">PLAYER</label>
<div class="yo">
<div style="font-family:oswald;font-size:22px; text-align:center; color: #AB71CE; text-transform:uppercase; font-weight:300;">alias</div><p>
<div style="width:250px; height:180px; overflow:auto; padding-top:15px; padding-right:10px; line-height:105%;">


<div style="padding-top:15px;"></div>

<div style=";width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">ALIAS</div>

<p>

<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">AGE</div>

<p>
<div style="width:150px; height:20px; border-bottom: 5px solid #B2C79F; font-family:oswald; font-weight:300; text-align:center; color:#202020;  line-height: 20px; text-transform:uppercase; font-size:12px;">TIMEZONE</div>

<p>



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

</div></center>