TEFc CSS Template 5 (BwnCamo)

<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>

<div class="creditbx"><a href="http://endlessforest.org/community/">Home</a>
<a href="http://endlessforest.org/community/tracker">Tracker</a>
<a href="http://endlessforest.org/community/node/102262">Map</a>
<span class="tooltip">Credit<span class="tooltiptext" style="margin-left:-325px;">CSS by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>.</span></span>
<span class="tooltip">Disclaimer<span class="tooltiptext" style="margin-left:-370px;">{ Disclaimer Text. }</span></span></div>




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

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

-- SETTING UP
<style>.preview{border:none; background:none; padding:0;} body{background-image:none;} #header, #sidebar-left, #header-region, .breadcrumb {display:none; margin:auto;} #tabs-wrapper{position:absolute; border:none; padding:0; opacity:0.5; transition:all 1s;}  #tabs-wrapper:hover{opacity:1;} #wrapper #container #center {float:none; top:0px; margin:auto; position:static;margin-bottom:-16px;} body.sidebar-left #squeeze{padding:0; margin:0;} #wrapper #container #center .right-corner .left-corner {margin:0 auto; max-width:none; padding:0;} .node .picture, .node .submitted{display:none} .node{border-bottom: none;margin:0; padding:0;} .node .content{margin:0;} .links{padding:10px;} .with-tabs{display:none;} .comment{border:none; padding:20px 20px 25px 10px; margin:10px auto 0 auto} .comment div.links{background:none; padding-top:10px;} #comments{margin:0;} tbody{border:none; margin:0; padding:0px;} #squeeze h2{display:none;} .comment .content{margin-top:5px;} div.status{display:none;}</style>

-- 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">

-- COLORS
<style>body{background:#000;} #wrapper #container #center .right-corner {min-width:1000px; padding-bottom: 50px; background-repeat:no-repeat; background-size:100% 100%; background-image:url('https://dl.dropbox.com/s/5lkrlcvm9zdezri/chocolate-diamond2.png?dl=0'); background-attachment:fixed;} #wrapper #container #center .right-corner .left-corner {background:rgba(0,0,0,0.5); color:#a98; border:3px double #000;} a:link, a:visited{color:#854; transition: all 0.7s} a:link:hover, a:visited:hover{color:#a98; text-decoration:none;} .comment.odd, tr.odd, tr.info, tr.even, .comment.even{background:rgba(0,0,0,0.7);}</style>

-- BLOG EDITS
<style>#wrapper #container #center .right-corner .left-corner {width:800px; padding:0 10px 100px 10px; border-radius:0 0 100px 100px; margin-bottom:20px; font-family:'Mallanna'; font-size:15px;}</style>

-- 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;} .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;} .creditbx{position:fixed; z-index: 7; top:100px; font-size:30px; border-left:2px solid #000; padding-left:5px; line-height:35px; font-family:'Economica'; margin-left:820px; text-shadow:0 0 2px #000;}</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>