Free CSS for TEFC; Pompous

<center><div style="width:560px;height:40px;background:#000;border:3px solid #000;">
<headers>Title</headers></div><div style="width:560px;height:600px;background-image:url('');border-left:3px solid #000;border-right:3px solid #000;text-display:none">


























</div><div style="width:560px;height:15px;background:#000;padding:3px;"><center><div id="tooltips">Hover<span class="tooltiptext">Here is the tooltip text.</span></div> | <div id="tooltips">Hover<span class="tooltiptext">Here is the tooltip text.</span></div> | <div id="tooltips">Hover<span class="tooltiptext">Here is the tooltip text.</span></div> | <div id="tooltips">Hover<span class="tooltiptext">Here is the tooltip text.</span></div></center></div><div style="width:550px;height:200px;overflow:hidden;background-color:rgba(0, 0, 0, 0.5);padding:5px;font-size:9px;text-align:left;border:3px solid #000;"><div style="width:561px;height:200px;overflow:auto;padding-right:11px;"><i>12.12.12</i>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vestibulum orci. In faucibus orci laoreet nunc aliquam consequat. Etiam sed egestas tellus. Sed bibendum rhoncus ante, at tincidunt nisl fringilla a. Donec nec fringilla diam. Ut quis turpis nec eros fermentum congue gravida vitae sem. Vivamus venenatis venenatis lectus, nec porta sapien blandit ut. Nullam ac magna nunc. Aliquam vel dictum risus. In sit amet rutrum ante, in gravida orci. Suspendisse ultricies facilisis accumsan.

Aliquam erat volutpat. In sagittis laoreet nunc et convallis. Integer id gravida nibh, eu pharetra risus. Ut non nisl a leo tincidunt eleifend at tempus nisi. Curabitur sit amet luctus lorem. Vestibulum rhoncus, turpis mattis tincidunt mollis, leo nisl rutrum arcu, non scelerisque nibh sapien et tellus. Phasellus elementum, justo in maximus ullamcorper, felis dui mollis lacus, eget vestibulum lacus urna in purus. Ut sed neque ipsum. Aliquam erat volutpat. Nunc pretium, leo quis eleifend lobortis, erat augue tincidunt dui, pharetra molestie ligula felis et neque. Fusce nec ipsum ut tellus molestie malesuada. Integer quis arcu nunc. Vivamus tristique molestie magna ultricies interdum. Nunc commodo maximus sapien nec efficitur. Vivamus ut nisl eget nunc porttitor porttitor. Praesent facilisis rutrum urna non rhoncus.

Aenean finibus lorem vel lorem lobortis, ut luctus massa fermentum. Etiam placerat, mauris eget mattis fermentum, sem augue faucibus augue, ut malesuada nibh augue nec leo. Donec eu molestie neque. Ut mattis eros id odio efficitur dictum. Suspendisse a nisl dictum est gravida commodo. Pellentesque posuere varius nisi, sit amet tempus mi hendrerit sit amet. Aliquam nisl tellus, tincidunt sit amet lorem a, interdum elementum sem. Etiam nec mattis quam, quis dignissim ligula. Cras nec dui sed ex vehicula tincidunt nec lobortis massa. Vestibulum eu facilisis augue. Duis sit amet viverra libero. Donec consectetur arcu urna, et placerat nibh molestie consectetur. Aliquam quis lorem non massa mollis pulvinar. Vivamus vitae risus vel ipsum pretium mattis eu ut dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;







</div></div><center><div style="width:560px;height:15px;background:#000;text-align:center;padding:3px;"><a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('depth').style.display='block';"><tabs>One</tabs> </a> | <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('appearance').style.display='block';"><tabs>Two</tabs> </a> | <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('soul').style.display='block';"><tabs>Three</tabs></a> | <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('relationships').style.display='block';"><tabs>Four</tabs></a> | <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('notes').style.display='block';"><tabs>Five</tabs></a></div><div style="width:550px;height:300px;overflow:hidden;background-color:rgba(0, 0, 0, 0.5);padding:5px;font-size:9px;text-align:left;border:3px solid #000;"><div id="depth" class="tab" style="display:block;width:561px;height:300px;overflow:auto;padding-right:11px;">


first div

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium augue nec massa posuere finibus. Vivamus rutrum orci non dolor congue, id ornare ex consectetur. Aliquam nec diam quis tellus dignissim maximus. Pellentesque consectetur fringilla nulla eget fermentum. Aenean sagittis cursus facilisis. Etiam sed lacus et justo finibus egestas. Quisque auctor erat vestibulum quam posuere, sit amet auctor erat ultricies. Aliquam a libero ac tellus finibus condimentum. Vivamus ut quam venenatis, tempus nulla non, porta nisi. In suscipit aliquet pretium.

Sed turpis augue, tempor ac facilisis vitae, lacinia id ligula. Ut blandit, eros at molestie commodo, lorem libero tincidunt metus, non venenatis mauris erat bibendum ipsum. Aliquam aliquet ipsum eu auctor rutrum. Vestibulum id dictum nulla. Curabitur ultrices fringilla lacus, eu pulvinar orci. Quisque rutrum nulla varius neque congue elementum. Vestibulum mollis et arcu in aliquet. Quisque volutpat dui arcu, id consequat tellus viverra eget.

Cras eu lorem sit amet turpis ultrices varius. Ut fringilla a quam sit amet elementum. Etiam tincidunt felis at dolor pulvinar viverra. Ut porta mollis mauris eu posuere. Nam placerat turpis ut volutpat dapibus. Curabitur ipsum augue, rutrum at volutpat sit amet, pretium eget magna. Integer gravida odio est, non cursus augue accumsan vel. Sed euismod orci et magna pellentesque, ut tincidunt eros tempus. Nunc nunc sapien, cursus et turpis nec, consequat sodales metus. Proin sed fermentum sem, et hendrerit nisl. Etiam bibendum purus sem, ac convallis ligula finibus at. Morbi tortor ante, placerat sed ultrices ut, interdum eu erat. Donec pulvinar volutpat eleifend. Nunc facilisis sapien in pretium efficitur.

Phasellus eleifend pellentesque sem id tempor. Aliquam scelerisque vehicula maximus. Nunc et ex feugiat, congue arcu in, finibus leo. Cras faucibus enim velit, vitae facilisis ante auctor in. Vivamus porttitor lacinia nisi, nec ultrices risus rutrum eu. Integer ligula neque, scelerisque at augue quis, varius rhoncus sapien. Nullam interdum euismod justo, ut dapibus risus vehicula eget. Mauris condimentum ligula sit amet enim condimentum, eget blandit magna sodales. Donec risus sapien, pharetra at iaculis vitae, posuere sed odio. Mauris ut odio non metus viverra vulputate. Praesent in nisl sit amet eros maximus fringilla. Phasellus ac tellus nisl. Fusce ipsum nibh, tempor vel nulla eget, lobortis pellentesque nisl. Cras sed velit vel erat aliquam lacinia non nec elit. Aliquam ut ultricies purus.

Duis eget justo rutrum, faucibus ante in, porttitor libero. Vestibulum vel mollis dolor. Suspendisse aliquam nibh eu arcu tincidunt, sed vehicula purus varius. Phasellus dui enim, iaculis vitae lacus laoreet, dictum fermentum orci. Aliquam at venenatis lacus. Integer hendrerit mauris ut vehicula tincidunt. Morbi feugiat est id lobortis condimentum. Donec sed commodo enim.


</div><div id="appearance" class="tab" style="display:block;width:561px;height:300px;overflow:auto;padding-right:11px;">

second div


</div><div id="soul"class="tab" style="display:block;width:561px;height:300px;overflow:auto;padding-right:11px;">

third div

</div><div id="relationships"class="tab" style="display:block;width:561px;height:300px;overflow:auto;padding-right:11px;">

fourth div


</div><div id="notes"class="tab" style="display:block;width:561px;height:300px;overflow:auto;padding-right:11px;">


fifth div





</div></div><div style="width:560px;height:15px;background:#000;padding:3px;text-align:center;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="wmode" value="transparent"> <param name="FlashVars" value="mp3=URLHERE" /></object> <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="wmode" value="transparent"> <param name="FlashVars" value="mp3=URLHERE" /></object> <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="wmode" value="transparent"> <param name="FlashVars" value="mp3=URLHERE" /></object> </div></center>

<div style="position:fixed;top:270px; left:6%;height:100px; width:200px;background:#000000;background-color:transparent;text-align:left"><center>[url=http://endlessforest.org/community/]home[/url] &#183;  [url=http://endlessforest.org/community/tracker]recent[/url] &#183; [url=http://endlessforest.org/community/current-map-forest]map[/url]

<a href="javascript:;" onmousedown="if(document.getElementById('disclaimer2').style.opacity == '0') { document.getElementById('disclaimer2'). style.opacity = '1'; } else { document.getElementById('disclaimer2'). style.opacity = '0'; }">Disclaimer</a>
<div id="disclaimer2" style="opacity:0;">Your disclaimer text goes here!

<small>Tab JS by AlisonRobin.
CSS template and various other codes from Unplugged.
CSS layout by Shey.
Best viewed in Google Chrome, 1920x1080.</small>
</div>

</div><div style="display:none;">

***********************************CSS***********************************


<style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;}#wrapper #container #center{float:none;position:absolute;top:0px}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px} .comment .content{margin-left:20px} .comment{margin:20px 0px} .comment .picture{opacity:0.5;}  .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none} tbody{border-top:none} <br />
#wrapper #container #center{position:absolute;top:0px} .node .links, .comment .links{text-align:center}</style>

HEADERS
<style>headers{font-variant:small-caps;font-family:times;font-size: 40px;letter-spacing:10px;font-weight:100;color:#ddc296}</style>

TABS
<style>tabs {font-variant:small-caps;font-family:times;font-size: 15px;letter-spacing:5px;font-weight:100;color:#ddc296;text-decoration:none;transition all 1s;}</style>
TABS HOVER
<style>tabs:hover {text-decoration:none;text-decoration-color:rgba(0,0,0,0);font-variant:small-caps;font-family:times;font-size: 15px;letter-spacing:5px;font-weight:100;color:#ddc296;transition all 1s;}</style>

BASIC FONT
<style>basic {font-variant:small-caps;font-family:times;font-size: 12px;letter-spacing:5px;font-weight:100;color:#ddc296;text-decoration:none;}</style>

BLOG WIDTH + BLOG BG COLOR
<style>#wrapper #container #center .right-corner .left-corner{width:700px;background-color:rgba(0, 0, 0, 0);}</style>

MAIN BG COLOR/IMAGE
<style>body{background:#0f0f0f;}</style>

COMMENT BG COLOR
<style>.comment.odd,tr.odd,.comment.even,tr.even{background-color:rgba(0, 0, 0, 0.3);border:3px solid #000;} .comment .submitted{color:#bca98b;}</style>

COMMENT BORDER
<style>.comment{border:3px #000}</style>

TEXT COLOR
<style>body{color:#59554e;font-size:9px;}</style>

LINK COLOR
<style>a:link, a:visited, ul.pager a{color:#bca98b;letter-spacing: 1px;font-variant:small-caps;text-decoration:none;text-decoration-color:rgba(0,0,0,0);}</style>
LINK HOVER COLOR
<style>a:link:hover, a:visited:hover,
ul.pager a:hover{color:#ddc296;text-decoration:none;text-decoration-color:rgba(0,0,0,0);}</style>

NEW COLOR
<style>.new{color:#ddc296}</style>

EDIT + REPLY BACKGROUND
<style>.comment div.links{background:none}</style>

UPDATE BOX STYLING
<style>div.status{background:none;border:1px solid #000000;color:#000}</style>

SCROLLBAR
<style> ::-webkit-scrollbar {width: 0.1em;} -webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);} ::-webkit-scrollbar-thumb {background-color: black;outline: 1px solid slategrey;}</style>

HOVERS
<style>#tooltips{display:inline-block; position:relative;color:#ddc296;} #tooltips .tooltiptext{width:250px; position:absolute; padding:5px; z-index:25; top: 100%; left:50%; margin-left: -130px; background: rgba(0,0,0,0.5); color: #ffffff; opacity:0; transition: all 0.3s; text-align: center; visibility:hidden} #tooltips:hover .tooltiptext{opacity: 1; visibility:visible}</style>>
</style>

DISCLAIMER
<style> #disclaimer2{width:200px; text-align:left; padding:20px; font-size:10px; transition:all 1s} </style></div>