TEFc CSS Template 3

<div class="topbar"><div class="topmenu"><a href="http://endlessforest.org/community/">Home</a> | <a href="http://endlessforest.org/community/tracker">Recent</a> | <a href="http://endlessforest.org/community/current-map-forest">Map</a> | <span class="tooltip">Credit<span class="tooltiptext" style="line-height:15px;">CSS and Layout by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a> with base snippets from <a href="http://endlessforest.org/community/node/85739">Unplugged</a>.</span></span> | <span class="tooltip">Disclaimer<span class="tooltiptext" style="line-height:15px;">{disclaimer text here}</span></span></div><div class="updater">
    <div class="tab"><input id="tab-update" type="checkbox" name="tabs"> <label for="tab-update"> » Updates « </label><div class="tab-content">
<div class="pmestatus"><span class="tooltip">Tooltip 1<span class="tooltiptext">{tooltip 1 text}</span></span> | <span class="tooltip">Tooltip 1<span class="tooltiptext">{tooltip 2 text}</span></span> | <span class="tooltip">Tooltip 3<span class="tooltiptext">{tooltip 3 text}</span></span></div>
<div class="thot">" . . . "</div>
<div class="events">[b]DATE —[/b]

Events.</div>
</div></div></div></div><div class="bigimg"><div class="bigtitle">Title Here</div></div><div class="bio"><div class="bio1"><sh1>Basics</sh1>

<div class="celloverflow1">Hidden scrollbars everywhere!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</div></div><div class="bio2"><div class="accordion">
    <div class="tab"><input id="tab-one" type="radio" name="tabs" checked> <label for="tab-one">Label One</label><div class="tab-content">
<div class="celloverflow2"><p>[b]Be careful using these tabs! The max and min heights of tab-content class in the accordion code have to be changed if you add any other tabs, change the height of the div it's in, etc. in order to keep the look it has right now![/b]

Circumnavigated concept of the number one tesseract bits of moving fluff. Colonies of brilliant syntheses extraplanetary tendrils of gossamer clouds globular star cluster explorations white dwarf vastness is bearable only through love, not a sunrise but a galaxyrise, hearts of the stars birth ship of the imagination hydrogen atoms ship of the imagination birth? Quasar? Another world realm of the galaxies Hypatia? At the edge of forever, white dwarf Rig Veda rich in mystery, prime number dispassionate extraterrestrial observer, hearts of the stars realm of the galaxies, billions upon billions realm of the galaxies cosmos kindling the energy hidden in matter bits of moving fluff star stuff harvesting star light!

Laws of physics a still more glorious dawn awaits billions upon billions a still more glorious dawn awaits. Realm of the galaxies network of wormholes how far away, circumnavigated the sky calls to us! Hearts of the stars, billions upon billions the only home we've ever known, Rig Veda, of brilliant syntheses realm of the galaxies hearts of the stars finite but unbounded a billion trillion, are creatures of the cosmos Euclid Sea of Tranquility, corpus callosum. Rich in heavy atoms, kindling the energy hidden in matter rich in mystery gathered by gravity realm of the galaxies a still more glorious dawn awaits of brilliant syntheses two ghostly white figures in coveralls and helmets are soflty dancing vanquish the impossible paroxysm of global death, explorations.

Vanquish the impossible from which we spring descended from astronomers kindling the energy hidden in matter. Cosmic fugue, emerged into consciousness a still more glorious dawn awaits with pretty stories for which there's little good evidence at the edge of forever! Hydrogen atoms from which we spring hydrogen atoms explorations laws of physics. Corpus callosum. Rings of Uranus across the centuries vanquish the impossible kindling the energy hidden in matter. Galaxies cosmos. Orion's sword, two ghostly white figures in coveralls and helmets are soflty dancing, paroxysm of global death, prime number, hundreds of thousands preserve and cherish that pale blue dot another world billions upon billions! Dream of the mind's eye vanquish the impossible realm of the galaxies astonishment are creatures of the cosmos science and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p></div>
</div></div><div class="tab"><input id="tab-two" type="radio" name="tabs"><label for="tab-two">Label Two</label><div class="tab-content">
<div class="celloverflow2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div>
</div></div><div class="tab"> <input id="tab-three" type="radio" name="tabs"><label for="tab-three">Label Three</label><div class="tab-content">
<div class="celloverflow2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div>
</div></div><div class="tab"><input id="tab-four" type="radio" name="tabs"><label for="tab-four">Label Four</label><div class="tab-content">
<div class="celloverflow2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div>
</div></div></div></div></div>






<div style="display:none;">

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

--- UNPLUGGED'S BASE
<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:absolute;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px; padding:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none; padding:0} tbody{border-top:none} #wrapper #container #center{position:static;top:0px} #wrapper #container #header {height: 0px;} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}#wrapper #container #center .right-corner .left-corner{width:100%;} .node{padding:0 50px 0 50px} body{overflow-x:hidden}</style>
<style>body{background:#000;} .comment.odd,tr.odd,.comment.even,tr.even{background:#111} .comment{border:none} body{color: #333; font:12px verdana} a:link, a:visited, ul.pager a{color:#666; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color:#888; text-decoration:none} .new{color:#333} .comment div.links{background:none} span.submitted{color:#000} #squeeze{margin:auto;padding:0;} .left-corner {padding:10px;}</style>

-- FONTS
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Dosis:200|Kanit:200|Megrim" rel="stylesheet">
<link href="https://dl.dropbox.com/s/ed9yc9beleutt0q/tweaky.css?dl=0" rel="stylesheet">

--- BLOG WIDTH/COLORS AND BG COLOR
<style>#wrapper #container #center .right-corner .left-corner {width:950px; background:#0f0f0f; padding:10px; border:2px solid #030303; border-top: none; padding-top:0; box-shadow: 0 0 50px #000;} body{background:#1f1f1f; color:#888; background-image:url('https://dl.dropbox.com/s/5meyd0ntd51juby/tree_bark_dark.png?dl=0'); background-attachment:fixed;}</style>

-- LINK COLORS
<style>a:link, a:visited, ul.pager a{color: #ec8; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color: #753; text-decoration:none}</style>

-- COMMENT ADJUSTMENTS AND COLORS
<style>.comment,.comment.odd,tr.odd,.comment.even,tr.even{background:#0a0a0a; color:#555;} .comment .picture {margin-left:-10px;} .comment .content {margin:10px 0 10px 120px;} .comment .submitted{color:#333; border-bottom:1px dashed #222;}</style>

-- MISC EDITS
<style>ul.primary {position:absolute; margin-left:-125px;} .node{padding:0; margin-top:0;}</style>


-- MENU/UPDATES BAR
<style>.topbar{position:sticky; z-index:10; margin: 0 auto 0 14px; top:0; height: 50px; width:920px; color:#111; border:1px solid #000; transition:all 1s;} .topbar:hover{box-shadow: 0 0 15px 3px #000;} .topmenu{width:350px; background:#332;padding-left:20px;line-height:50px;float:left;}</style>

-- UPDATES TAB
<style>.updater {margin:-15px 0 0 0; padding: 0; width:550px; float:right;} .updater .tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden;} .updater input { position: absolute; opacity: 0; z-index: -1;} .updater label { position: relative; display: block; padding: 0 0 0 1em; background: #332; vertical-align:center; line-height: 50px; cursor: pointer; color:#aaa; font-size:30px; text-align:center; font-family: 'Megrim', cursive;} .updater .tab-content { max-height: 0; overflow: hidden; -webkit-transition: max-height 0s; transition: max-height 0s;  color:#ccc; background:#443;} .updater .tab-content p { margin: 1em;} .updater input:checked ~ .tab-content { max-height: 400px; min-height: 400px;} .updater label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align:center; -webkit-transition: all 0s; transition: all 0s;} .updater input[type=checkbox] + .updater label::after { content: "+";} .updater input[type=radio] + .updater label::after { content: "\25BC";} .updater input[type=checkbox]:checked + .updater label::after { -webkit-transform: rotate(315deg); transform: rotate(315deg);} .updater input[type=radio]:checked + .updater label::after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }</style>

-- INSIDE UPDATES TAB
<style>.pmestatus, .thot{width:520px; padding:0 5px 0 5px; margin:auto; font-size:20px; text-align:center; background:rgba(0,0,0,0.5); font-family: 'Dosis', sans-serif; line-height:30px;} .events{width:520px; height:275px; overflow:auto; margin:auto; padding:5px; background:rgba(0,0,0,0.5);}</style>

-- BIG IMG
<style>.bigimg{position:relative; width:920px; height:600px; border:1px solid #000; border-bottom:0; margin:auto; background-image:url('https://dl.dropbox.com/s/sunvv7588mvbpge/ruinpreview.png?dl=0');}</style>

-- TITLE
<style>.bigtitle{font-family: 'Megrim', cursive; color:#fff; font-size:60px; position:absolute; bottom:0; left:10px;}</style>

-- BIO DIV
<style>.bio{position:relative; z-index:2; width:900px;padding: 10px; height:715px; border:1px solid #000; margin:auto; background:#333;} .bio1{position:relative; z-index:3; width:350px; padding:10px; height:695px; float:left; background:#111; border:1px solid #000;} .bio2{position:relative; z-index:2; width:520px; height:715px; float:right; background:#111; border:1px solid #000;}</style>

-- MISC
<style>sh1{font-family: 'Dosis', sans-serif; color:#554; font-size:30px; font-weight:bold;}</style>

-- BIO ACCORDION
<style>.accordion {margin:-15px 0 0 0; padding: 0; width:100%;} .tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden;} .accordion input { position: absolute; opacity: 0; z-index: -1;} .accordion label { position: relative; display: block; padding: 0 0 0 1em; background: #332; vertical-align:center; line-height: 40px; cursor: pointer; color:#aaa; font-size:30px; text-align:center; font-family: 'Megrim', cursive;} .tab-content { width:100%; max-height: 0; overflow: hidden; -webkit-transition: max-height 0; transition: max-height 0;  color:#888;} .tab-content p { margin: 1em;} .accordion input:checked ~ .tab-content { max-height: 46em; min-height: 46em;} .accordion label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all 0; transition: all 0;} .accordion input[type=checkbox] + .accordion label::after { content: "+";} .accordion input[type=radio] + accordion label::after { content: "\25BC";} .accordion input[type=checkbox]:checked + .accordion label::after { -webkit-transform: rotate(315deg); transform: rotate(315deg);} .accordion input[type=radio]:checked + .accordion label::after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }</style>

--CELL OVERFLOW
<style>.celloverflow1{max-height:650px;overflow:auto} .celloverflow2{max-height:540px;overflow:auto}</style>

-- TOOLTIPS
<style>.tooltip {position: relative; display: inline-block; cursor: pointer; color:#879E7B} .tooltip .tooltiptext {opacity:0; transition:all 1s; visibility: hidden;width: 250px; background:rgba(0,0,0,0.7); color: #aaa;padding: 5px; border-radius: 6px;position: absolute; z-index: 1;margin: 35px 0 0 -125px; text-align:center;} .tooltip:hover .tooltiptext{opacity: 1; visibility: visible;} .tooltip:hover .tooltiptext2{opacity: 1; visibility: visible;}</style>

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