<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">.tabody {
position: relative;
width: 500px;
height: 555px;
margin-top: -30px;
border-left: 1px dotted #222;
border-right: 1px dotted #222;
border-bottom: 1px dotted #222;
}
.tabbz {
float: left;
}
.tabbz label {
background: #90A0B9;
padding: 10px;
border: 1px dotted #fff;
position: relative;
left: 45px;
top:-5px;
color: white;
font-family: lato;
text-transform: uppercase;
line-height: 100%;
letter-spacing: 2px;
font-size: 8px;
margin: 0px 20px;
}
.tabbz [type=radio] {
display: none;
}
.everything {
position: absolute;
top: 28px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
padding: 20px;
}
.tabbz [type=radio]:checked ~ label {
background: white;
border: 1px dotted #222;
color: #90A0B9;
z-index: 2;
}
.tabbz [type=radio]:checked ~ label ~ .everything {
z-index: 1;
}
.group1 { width:210px; height: 49px; background-color: #fff; border-bottom: 1px dotted #222;font-family: lato; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; line-height:49px; color: #222; text-align: center; }
.group2 { width:210px; height: 41px; background-color: #fff; border-bottom: 1px dotted #222;font-family: lato; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; line-height:41px; color: #222; text-align: center; }
.group3 { width:210px; height: 61px; background-color: #fff; border-bottom: 1px dotted #222;font-family: lato; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; line-height:61px; color: #222; text-align: center; }
.texting { width:445px; height: 210px; padding:10px; text-align: justify; font-family: arial; font-size: 11px; line-height:95%; overflow: auto; color: #222; }
</style>
<center>
<div style="width:502px; height:50px; background-image: url(http://i.imgur.com/oi5ErJB.png); background-position: right center;"></div>
<div class="tabody">
<div class="tabbz">
<input type="radio" id="tabbz-1" name="tabbz-group-1" checked>
<label for="tabbz-1">Pre-Choosing</label>
<div class="everything">
<table border="0" style="border-collapse:collapse; border: 0px solid #000; color:#000000;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="width:250px; height: 250px; background-image: url(http://placehold.it/250x250);"></div>
</td>
<td>
<div class="group1" style="height:48px; line-height: 48px; border-top: 1px dotted #222;">NAME</div>
<div class="group1">AGE/BIRTHDATE</div>
<div class="group1">FORMER FACTION</div>
<div class="group1">CURRENT FACTION</div>
<div class="group1">OCCUPATION</div>
</td>
</tr>
</table>
<div style="width:5px; height:5px;"></div>
<div class="texting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu faucibus turpis, id blandit erat. Nam lobortis non risus quis mattis. Nunc varius tellus eget nisl interdum, at consectetur nunc tempor. Integer accumsan vel dui vel faucibus. Duis fermentum erat sit amet eros egestas tincidunt. Ut scelerisque dolor eu libero consectetur, eu tincidunt odio lobortis. Suspendisse eu tellus lorem. Etiam vitae ante posuere, feugiat tellus eu, dignissim odio. Vivamus sed lobortis lacus.
<p>
Vivamus tincidunt erat ante, sed elementum nisi iaculis non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor urna sit amet lacus auctor, id sagittis urna porta. Etiam elementum ornare sagittis. Nulla facilisi. Nunc sed nisl tincidunt, dapibus diam sed, porttitor erat. Maecenas ornare mattis hendrerit. Nam enim metus, iaculis eu purus at, bibendum suscipit ipsum. Nulla sed vulputate lectus. Phasellus eros dolor, porttitor non orci nec, tincidunt feugiat turpis. Aliquam et elementum felis. Sed pretium, lorem ac porttitor gravida, massa lacus dignissim ligula, cursus mattis dui mauris vitae est. Sed bibendum felis justo, sed tempor massa mattis non. Cras vitae velit mi.
<p>
Sed non consectetur nisi, et commodo est. Pellentesque eu nibh a purus tincidunt ultrices quis eu justo. Maecenas lacus urna, laoreet eu hendrerit nec, laoreet at tellus. Nunc ac tempor leo, eget dapibus nibh. Maecenas quis facilisis urna. Aenean vitae sapien elit. Aenean rutrum, elit vitae gravida vestibulum, justo felis fringilla mauris, quis eleifend est quam quis nulla. Aliquam scelerisque nunc velit, at maximus sem tincidunt in. Praesent lacus ex, imperdiet laoreet dolor sed, congue blandit felis. Praesent at felis lacus. Nulla hendrerit nulla cursus velit ullamcorper tempor. Nullam cursus ut dolor ac finibus. Vestibulum ipsum nulla, elementum vitae quam id, sodales rhoncus ex. Integer in dignissim libero. Ut eu dolor egestas, tincidunt turpis vel, dictum nulla.
<p>
Maecenas consectetur risus arcu, quis pharetra felis viverra convallis. Proin ut arcu facilisis, gravida orci et, fermentum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum blandit egestas. Vivamus vel odio blandit, suscipit leo eget, elementum nibh. In hac habitasse platea dictumst. Aenean semper viverra justo, vitae suscipit risus. Proin eget lectus ex. Curabitur massa erat, lobortis id vestibulum quis, ornare nec nulla. Mauris sed porttitor ligula. Vivamus velit dui, pulvinar luctus augue ac, dapibus elementum nisl. Duis porttitor congue bibendum. Sed accumsan placerat orci, at tempus est pellentesque porttitor. Aenean vehicula semper felis eu pellentesque. Praesent facilisis semper neque sit amet blandit. Duis malesuada malesuada finibus.
<p>
Curabitur eu dapibus urna. Suspendisse at tristique justo, non fermentum magna. In a elementum neque. Pellentesque risus sem, aliquam vel metus vitae, scelerisque vehicula elit. Aliquam erat volutpat. Cras finibus dapibus luctus. Aliquam consectetur sem vitae lacus accumsan tempor. Nullam id nunc quis tortor faucibus blandit. Vivamus finibus, risus tincidunt aliquam tempus, arcu ante pretium dolor, at pretium orci nulla in mi. In gravida diam magna, eget ornare nibh congue a.
</div>
</div>
</div>
<div class="tabbz">
<input type="radio" id="tabbz-2" name="tabbz-group-1">
<label for="tabbz-2">Choosing</label>
<div class="everything">
<table border="0" style="border-collapse:collapse;color:#000000;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="width:250px; height: 250px; background-image: url(http://placehold.it/250x250);"></div>
</td>
<td>
<div class="group2" style="height:38px; line-height: 38px; border-top: 1px dotted #222;">PARENTS</div>
<div class="group2">SIBLINGS</div>
<div class="group2">RELATIONSHIPS</div>
<div class="group2">TRAIT</div>
<div class="group2">TRAIT</div>
<div class="group2">TRAIT</div>
</td>
</tr>
</table>
<div style="width:5px; height:5px;"></div>
<div class="texting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu faucibus turpis, id blandit erat. Nam lobortis non risus quis mattis. Nunc varius tellus eget nisl interdum, at consectetur nunc tempor. Integer accumsan vel dui vel faucibus. Duis fermentum erat sit amet eros egestas tincidunt. Ut scelerisque dolor eu libero consectetur, eu tincidunt odio lobortis. Suspendisse eu tellus lorem. Etiam vitae ante posuere, feugiat tellus eu, dignissim odio. Vivamus sed lobortis lacus.
<p>
Vivamus tincidunt erat ante, sed elementum nisi iaculis non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor urna sit amet lacus auctor, id sagittis urna porta. Etiam elementum ornare sagittis. Nulla facilisi. Nunc sed nisl tincidunt, dapibus diam sed, porttitor erat. Maecenas ornare mattis hendrerit. Nam enim metus, iaculis eu purus at, bibendum suscipit ipsum. Nulla sed vulputate lectus. Phasellus eros dolor, porttitor non orci nec, tincidunt feugiat turpis. Aliquam et elementum felis. Sed pretium, lorem ac porttitor gravida, massa lacus dignissim ligula, cursus mattis dui mauris vitae est. Sed bibendum felis justo, sed tempor massa mattis non. Cras vitae velit mi.
<p>
Sed non consectetur nisi, et commodo est. Pellentesque eu nibh a purus tincidunt ultrices quis eu justo. Maecenas lacus urna, laoreet eu hendrerit nec, laoreet at tellus. Nunc ac tempor leo, eget dapibus nibh. Maecenas quis facilisis urna. Aenean vitae sapien elit. Aenean rutrum, elit vitae gravida vestibulum, justo felis fringilla mauris, quis eleifend est quam quis nulla. Aliquam scelerisque nunc velit, at maximus sem tincidunt in. Praesent lacus ex, imperdiet laoreet dolor sed, congue blandit felis. Praesent at felis lacus. Nulla hendrerit nulla cursus velit ullamcorper tempor. Nullam cursus ut dolor ac finibus. Vestibulum ipsum nulla, elementum vitae quam id, sodales rhoncus ex. Integer in dignissim libero. Ut eu dolor egestas, tincidunt turpis vel, dictum nulla.
<p>
Maecenas consectetur risus arcu, quis pharetra felis viverra convallis. Proin ut arcu facilisis, gravida orci et, fermentum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum blandit egestas. Vivamus vel odio blandit, suscipit leo eget, elementum nibh. In hac habitasse platea dictumst. Aenean semper viverra justo, vitae suscipit risus. Proin eget lectus ex. Curabitur massa erat, lobortis id vestibulum quis, ornare nec nulla. Mauris sed porttitor ligula. Vivamus velit dui, pulvinar luctus augue ac, dapibus elementum nisl. Duis porttitor congue bibendum. Sed accumsan placerat orci, at tempus est pellentesque porttitor. Aenean vehicula semper felis eu pellentesque. Praesent facilisis semper neque sit amet blandit. Duis malesuada malesuada finibus.
<p>
Curabitur eu dapibus urna. Suspendisse at tristique justo, non fermentum magna. In a elementum neque. Pellentesque risus sem, aliquam vel metus vitae, scelerisque vehicula elit. Aliquam erat volutpat. Cras finibus dapibus luctus. Aliquam consectetur sem vitae lacus accumsan tempor. Nullam id nunc quis tortor faucibus blandit. Vivamus finibus, risus tincidunt aliquam tempus, arcu ante pretium dolor, at pretium orci nulla in mi. In gravida diam magna, eget ornare nibh congue a.
</div>
</div>
</div>
<div class="tabbz">
<input type="radio" id="tabbz-3" name="tabbz-group-1">
<label for="tabbz-3">Post-Choosing</label>
<div class="everything">
<table border="0" style="border-collapse:collapse;color:#000000;" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="width:250px; height: 250px; background-image: url(http://placehold.it/250x250);"></div>
</td>
<td>
<div class="group3" style="height:62px; line-height: 62px; border-top: 1px dotted #222;">PLAYER</div>
<div class="group3">AGE</div>
<div class="group3">FACE CLAIM</div>
<div class="group3">CONTACT INFO</div>
</td>
</tr>
</table>
<div style="width:5px; height:5px;"></div>
<div class="texting">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu faucibus turpis, id blandit erat. Nam lobortis non risus quis mattis. Nunc varius tellus eget nisl interdum, at consectetur nunc tempor. Integer accumsan vel dui vel faucibus. Duis fermentum erat sit amet eros egestas tincidunt. Ut scelerisque dolor eu libero consectetur, eu tincidunt odio lobortis. Suspendisse eu tellus lorem. Etiam vitae ante posuere, feugiat tellus eu, dignissim odio. Vivamus sed lobortis lacus.
<p>
Vivamus tincidunt erat ante, sed elementum nisi iaculis non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor urna sit amet lacus auctor, id sagittis urna porta. Etiam elementum ornare sagittis. Nulla facilisi. Nunc sed nisl tincidunt, dapibus diam sed, porttitor erat. Maecenas ornare mattis hendrerit. Nam enim metus, iaculis eu purus at, bibendum suscipit ipsum. Nulla sed vulputate lectus. Phasellus eros dolor, porttitor non orci nec, tincidunt feugiat turpis. Aliquam et elementum felis. Sed pretium, lorem ac porttitor gravida, massa lacus dignissim ligula, cursus mattis dui mauris vitae est. Sed bibendum felis justo, sed tempor massa mattis non. Cras vitae velit mi.
<p>
Sed non consectetur nisi, et commodo est. Pellentesque eu nibh a purus tincidunt ultrices quis eu justo. Maecenas lacus urna, laoreet eu hendrerit nec, laoreet at tellus. Nunc ac tempor leo, eget dapibus nibh. Maecenas quis facilisis urna. Aenean vitae sapien elit. Aenean rutrum, elit vitae gravida vestibulum, justo felis fringilla mauris, quis eleifend est quam quis nulla. Aliquam scelerisque nunc velit, at maximus sem tincidunt in. Praesent lacus ex, imperdiet laoreet dolor sed, congue blandit felis. Praesent at felis lacus. Nulla hendrerit nulla cursus velit ullamcorper tempor. Nullam cursus ut dolor ac finibus. Vestibulum ipsum nulla, elementum vitae quam id, sodales rhoncus ex. Integer in dignissim libero. Ut eu dolor egestas, tincidunt turpis vel, dictum nulla.
<p>
Maecenas consectetur risus arcu, quis pharetra felis viverra convallis. Proin ut arcu facilisis, gravida orci et, fermentum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam fermentum blandit egestas. Vivamus vel odio blandit, suscipit leo eget, elementum nibh. In hac habitasse platea dictumst. Aenean semper viverra justo, vitae suscipit risus. Proin eget lectus ex. Curabitur massa erat, lobortis id vestibulum quis, ornare nec nulla. Mauris sed porttitor ligula. Vivamus velit dui, pulvinar luctus augue ac, dapibus elementum nisl. Duis porttitor congue bibendum. Sed accumsan placerat orci, at tempus est pellentesque porttitor. Aenean vehicula semper felis eu pellentesque. Praesent facilisis semper neque sit amet blandit. Duis malesuada malesuada finibus.
<p>
Curabitur eu dapibus urna. Suspendisse at tristique justo, non fermentum magna. In a elementum neque. Pellentesque risus sem, aliquam vel metus vitae, scelerisque vehicula elit. Aliquam erat volutpat. Cras finibus dapibus luctus. Aliquam consectetur sem vitae lacus accumsan tempor. Nullam id nunc quis tortor faucibus blandit. Vivamus finibus, risus tincidunt aliquam tempus, arcu ante pretium dolor, at pretium orci nulla in mi. In gravida diam magna, eget ornare nibh congue a.
</div>
</div>
</div>
</div></center>
