TEFc CSS Template 5 (BoxOnly)

<div class="biotitle">Character</div>
<div class="biobox"><div class="biopic1"></div>

<div class="bioupdates"><tabTtl>UPDATES — Jan.01.3018</tabTtl>

<span class="tooltip">Tooltip 1<span class="tooltiptext">{ Tooltip 1 Text }</span></span> | <span class="tooltip">Tooltip 2<span class="tooltiptext">{ Tooltip 2 Text }</span></span> | <span class="tooltip">Tooltip 3<span class="tooltiptext">{ Tooltip 3 Text }</span></span>

<div class="events">[b]RECENTLY —[/b]

Current events go here.</div></div>

<div class="bioinfo"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1">BASICS</label><div class="tabcontent"><tabTtl>Tab 1 Title</tabTtl>

Tab 1 text.
</div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2" id="t2">APPEARANCE</label><div class="tabcontent"><tabTtl>Tab 2 Title</tabTtl>

Tab 2 text.
</div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3" id="t3">PERSONA</label><div class="tabcontent"><tabTtl>Tab 3 Title</tabTtl>

Tab 3 text.
</div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4" id="t4">RELATIONS</label><div class="tabcontent"><tabTtl>Tab 4 Title</tabTtl>

Tab 4 text.
</div></span><span class="tab"><input type="radio" id="tab5" name="tabs"><label for="tab5" id="t5">OTHER</label><div class="tabcontent"><tabTtl>Tab 5 Title</tabTtl>

Tab 5 text.
</div></span><span class="tab"><input type="radio" id="tab6" name="tabs"><label for="tab6" id="t6">EXTRA</label><div class="tabcontent"><tabTtl>Tab 6 Title</tabTtl>

Tab 6 text.

You can get rid of this tab if you don't need it by removing everything from (and including) [code]<span class="tab">[/code] to [code]</span>[/code].
</div></span></div>
<div class="credits"><span class="tooltip">Credit<span class="tooltiptext">CSS by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>.</span></span> • <span class="tooltip">Disclaimer<span class="tooltiptext">{ Disclaimer text. }</span></span></div></div>





<div id="CSS-Sycamorre" style="display:none;">

<!---- CSS BELOW ---->

-- FONTS
<link href="https://dl.dropbox.com/s/9safe3b500ygy23/pale_blue_eyes.css?dl=0" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bahiana|Caesar+Dressing|Crushed|Oxygen|Titillium+Web|Amatic+SC|Averia+Sans+Libre|Bellefair|BenchNine|Chelsea+Market|Economica|Frijole|Handlee|Mallanna|Montez|Neucha|Poiret+One|Rock+Salt" rel="stylesheet">

-- BIO BOX
<style>.biotitle{position:relative; z-index:5; width:750px; margin:100px auto 0 auto; font-size:90px; text-align:center; font-family:'Frijole'; text-shadow:0 0 10px #000;} .biobox{position:relative; z-index:4; width:750px; height:1100px; margin:auto; color:#a98;} .biopic1{position:absolute; top:0; left:0; width:750px; height:250px; box-sizing:border-box; overflow:hidden; background-image:url('https://dl.dropbox.com/s/1531xwz9w1uhmxo/widepreviewsepia.png?dl=0');} .bioinfo{position:absolute; top:250px; left:0; width:375px; height:850px; box-sizing:border-box; border:2px solid #000; background:rgba(0,0,0,0.7);} .bioupdates{position:absolute; top:250px; right:0; width:375px; height:500px; box-sizing:border-box; padding:10px; border:2px solid #000; border-left:none; background:rgba(0,0,0,0.7); text-align:center;}</style>

-- TABS
<style>.bioinfo input[type=radio] {display: none;} .bioinfo label {cursor:pointer; color:#765; background:rgba(0,0,0,0.3); padding:10px; position:absolute; margin-left:373px; font-size:25px; line-height:30px; top:505px; min-width:200px; font-family:'Chelsea Market'; letter-spacing:2px; transition:all 0.5s;} .bioinfo label:hover{letter-spacing:4px; min-width:250px;} .tabcontent{position:absolute; top:0; left:0; width:375px; height:840px; padding:10px; box-sizing:border-box; overflow:auto; opacity:0; transition:all 1s;} input[type=radio]:checked ~ label {background:#532; color:#dcb; min-width:250px; letter-spacing:4px;} input[type=radio]:checked ~ .tabcontent {z-index: 2; opacity:1;} #t2{top:560px;} #t3{top:615px} #t4{top:670px} #t5{top:725px} #t6{top:780px}</style>

-- MISC
<style>tabTtl{font-family:'Chelsea Market'; font-size:30px;} .events{position:absolute; bottom:0; width:350px; padding-top:10px; height:390px; margin:auto; overflow:auto; border-top:1px solid #321; text-align:left;} .credits{position:absolute; left:0; bottom:-20px;} .biobox a:link, .biobox a:visited{color:#854; transition: all 0.7s} .biobox a:link:hover, .biobox a:visited:hover{color:#a98; text-decoration:none;}</style>

-- TOOLTIPS
<style>.tooltip {position:relative; display: inline-block; cursor: pointer; color:#854;} .tooltip .tooltiptext {opacity:0; transition:all 0.4s; visibility: hidden;width: 250px; background:rgba(250,240,222,0.7); color: #111; padding: 5px; border-radius: 6px; position:absolute; z-index:8; margin: 20px 0 0 -125px; text-align:center; font-family:'Mallanna'; font-size:15px; line-height:15px; text-shadow:none;} .tooltip:hover .tooltiptext{opacity: 1; visibility: visible;}</style>

--INVISIBLE SCROLLBARS
<style>#center ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000;} #center ::-webkit-scrollbar{width: 0px; background-color: #000;} #center ::-webkit-scrollbar-thumb{background-color: #000000; border: 2px solid #555555;}</style>

</div>