Free CSS: 3 Shades of Grey

<center><div style="width:750px;height:780px;background:grey;border:5px solid #000000;color:#FFFFFF;border-radius:30px;overflow:hidden"><h4>&#8195; Name or Title here</h4>
<div id="updates"><h4><a class="info">Physical<span>Hey!</span></a> / <a class="info">Mental<span>Hey!</span></a> / <a class="info">Emotional<span>Hey!</span></a> / <a class="info">Note<span>Hey!</span></a></h4><div style="width:520px;height:111px;overflow:auto;padding:5px;font-size:10px;line-height:100%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus eros magna, in congue odio facilisis quis. Nam sed fermentum libero. Sed ac varius est, nec vestibulum ex. Curabitur mauris eros, egestas quis posuere vitae, varius quis nisi. Maecenas blandit porttitor massa, vitae ornare diam pharetra a. Nunc in feugiat dolor. Vestibulum dignissim sagittis arcu, in tincidunt sem ornare ut. Nunc lacinia dictum lorem tempor lobortis. Aenean varius tempor aliquam. Etiam pretium pellentesque diam sit amet euismod.

Nullam dignissim augue et molestie pretium. Nam eros dui, commodo eu dolor non, mollis elementum mauris. Mauris dapibus orci purus, nec lobortis risus luctus sed. Nam molestie blandit velit laoreet consequat. Vivamus vel metus mi. Fusce mollis ipsum mattis diam tincidunt consequat. Donec maximus lobortis diam, in ullamcorper ante imperdiet sed. Vivamus sit amet massa eget lectus convallis sagittis. Fusce gravida, mi id eleifend condimentum, sapien purus malesuada lorem, id luctus ante odio sit amet libero. Cras fringilla in leo nec sodales.</div>
</div><div id="basics"><div style="width:180px;height:390px;overflow:auto;padding:5px;font-size:10px;line-height:100%"><basic>Name</basic>: ...

<basic>Nicknames</basic>: ...

<basic>Gender</basic>: ...

<basic>Age</basic>: ...

<basic>Species</basic>: ...

<basic>Size</basic>: ...

<basic>Scent</basic>: ...

<basic>Diet</basic>: ...

<basic>Voice</basic>: ...

<basic>Reference</basic>: ...

<basic>In-Forest Set</basic>: ...
</div></div><div id="infobox"><div style="width:522px;height:390px;overflow:auto;padding:5px;"><span id="1" class="tab" style="display:inline"><a href="">Link</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ex volutpat neque vehicula scelerisque. Ut vehicula ut lorem commodo ornare. Vestibulum libero enim, pellentesque laoreet metus ut, dignissim congue erat. Donec ullamcorper mi vitae tortor volutpat, id cursus velit ultrices. Vivamus eu ante ut magna tempor venenatis. Praesent eu enim eget diam auctor gravida in at ex. Fusce ac pulvinar justo. Etiam a orci id nibh pulvinar ultricies ac faucibus mi. Fusce consequat, erat vel condimentum volutpat, mi ante posuere lacus, sed laoreet felis purus id lorem. Proin non cursus eros, non egestas ipsum. Donec eget velit quis lacus pharetra facilisis. Nam placerat sapien semper, tincidunt tellus eu, efficitur mauris. Morbi malesuada eu tortor vitae convallis.

Mauris blandit, libero at condimentum vulputate, ligula augue tristique mauris, et convallis nunc ex vitae diam. In ac neque felis. Donec luctus ante nisi, sit amet maximus ipsum eleifend finibus. Donec venenatis enim in metus aliquet commodo. Aenean ac arcu imperdiet, pretium purus in, cursus enim. Aliquam vitae erat purus. Pellentesque pretium, est vehicula ultrices facilisis, ligula diam fringilla justo, eu malesuada augue metus non nulla. Mauris tristique, quam ut pulvinar ornare, odio nisl malesuada dui, vitae dictum ipsum sem vel tellus. Curabitur sit amet vulputate massa, interdum laoreet lacus. Donec et ultrices elit, id egestas dui. Nullam a auctor ante. Nullam at lorem dictum, volutpat risus vitae, tempus massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.

Nulla ullamcorper lorem velit, sed congue mauris dictum eu. Nulla venenatis quis quam eu suscipit. Suspendisse porttitor orci ligula, tempor tempus justo dignissim vel. Mauris id libero eget massa vehicula pharetra. Fusce eu velit ipsum. Etiam fringilla vulputate ullamcorper. Vivamus erat quam, euismod eget tortor et, tincidunt rutrum nulla.

Mauris viverra metus felis, eget mollis tortor tristique vel. Mauris et lobortis sapien. Sed venenatis blandit sapien, vel rutrum mi. Aliquam convallis neque commodo luctus rhoncus. Pellentesque sed eros egestas erat egestas congue. Nulla facilisi. Duis metus purus, maximus ut dictum quis, fringilla vitae neque. Praesent vestibulum vel neque id tempus. Ut vulputate massa nec lorem ultricies, at egestas quam aliquet. Quisque hendrerit quam id ipsum finibus, et fermentum mi sollicitudin. Fusce tellus nunc, iaculis ut turpis id, consequat elementum ante.

Praesent posuere et tortor quis ornare. Nunc condimentum, elit id tincidunt rhoncus, nunc tellus iaculis nisl, vel aliquet felis neque vitae turpis. Donec non odio vel nunc viverra rhoncus. Suspendisse nisl diam, accumsan eu neque sagittis, mollis dignissim tortor. Morbi odio odio, vehicula ut metus ut, ultrices semper nunc. Suspendisse eu ligula maximus, mattis ante nec, volutpat nisi. Praesent mi risus, lobortis id congue vehicula, sollicitudin eu nibh. Curabitur aliquam quam magna, a tincidunt lorem tempus id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ex volutpat neque vehicula scelerisque. Ut vehicula ut lorem commodo ornare. Vestibulum libero enim, pellentesque laoreet metus ut, dignissim congue erat. Donec ullamcorper mi vitae tortor volutpat, id cursus velit ultrices. Vivamus eu ante ut magna tempor venenatis. Praesent eu enim eget diam auctor gravida in at ex. Fusce ac pulvinar justo. Etiam a orci id nibh pulvinar ultricies ac faucibus mi. Fusce consequat, erat vel condimentum volutpat, mi ante posuere lacus, sed laoreet felis purus id lorem. Proin non cursus eros, non egestas ipsum. Donec eget velit quis lacus pharetra facilisis. Nam placerat sapien semper, tincidunt tellus eu, efficitur mauris. Morbi malesuada eu tortor vitae convallis.

Mauris blandit, libero at condimentum vulputate, ligula augue tristique mauris, et convallis nunc ex vitae diam. In ac neque felis. Donec luctus ante nisi, sit amet maximus ipsum eleifend finibus. Donec venenatis enim in metus aliquet commodo. Aenean ac arcu imperdiet, pretium purus in, cursus enim. Aliquam vitae erat purus. Pellentesque pretium, est vehicula ultrices facilisis, ligula diam fringilla justo, eu malesuada augue metus non nulla. Mauris tristique, quam ut pulvinar ornare, odio nisl malesuada dui, vitae dictum ipsum sem vel tellus. Curabitur sit amet vulputate massa, interdum laoreet lacus. Donec et ultrices elit, id egestas dui. Nullam a auctor ante. Nullam at lorem dictum, volutpat risus vitae, tempus massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.

Nulla ullamcorper lorem velit, sed congue mauris dictum eu. Nulla venenatis quis quam eu suscipit. Suspendisse porttitor orci ligula, tempor tempus justo dignissim vel. Mauris id libero eget massa vehicula pharetra. Fusce eu velit ipsum. Etiam fringilla vulputate ullamcorper. Vivamus erat quam, euismod eget tortor et, tincidunt rutrum nulla.

Mauris viverra metus felis, eget mollis tortor tristique vel. Mauris et lobortis sapien. Sed venenatis blandit sapien, vel rutrum mi. Aliquam convallis neque commodo luctus rhoncus. Pellentesque sed eros egestas erat egestas congue. Nulla facilisi. Duis metus purus, maximus ut dictum quis, fringilla vitae neque. Praesent vestibulum vel neque id tempus. Ut vulputate massa nec lorem ultricies, at egestas quam aliquet. Quisque hendrerit quam id ipsum finibus, et fermentum mi sollicitudin. Fusce tellus nunc, iaculis ut turpis id, consequat elementum ante.

Praesent posuere et tortor quis ornare. Nunc condimentum, elit id tincidunt rhoncus, nunc tellus iaculis nisl, vel aliquet felis neque vitae turpis. Donec non odio vel nunc viverra rhoncus. Suspendisse nisl diam, accumsan eu neque sagittis, mollis dignissim tortor. Morbi odio odio, vehicula ut metus ut, ultrices semper nunc. Suspendisse eu ligula maximus, mattis ante nec, volutpat nisi. Praesent mi risus, lobortis id congue vehicula, sollicitudin eu nibh. Curabitur aliquam quam magna, a tincidunt lorem tempus id.
</span><span id="2" class="tab" style="display:none">fb
</span><span id="3" class="tab" style="display:none">g
</span><span id="4" class="tab" style="display:none">h
</span><span id="5" class="tab" style="display:none">j
</span></div></div><div id="tab1">
<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('1').style.display='inline';">
<font style="font-size:100px;color:#FFFFFF">B</font></a>
</div><div id="tab2">
<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('2').style.display='inline';">
<font style="font-size:100px;color:#FFFFFF">S</font></a>
</div><div id="tab3">
<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('3').style.display='inline';">
<font style="font-size:100px;color:#FFFFFF">R</font></a>
</div><div id="tab4">
<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('4').style.display='inline';">
<font style="font-size:100px;color:#FFFFFF">H</font></a>
</div><div id="tab5">
<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('5').style.display='inline';">
<font style="font-size:100px;color:#FFFFFF">E</font></a>
</div><div id="picto"><embed src="http://tale-of-tales.com/TheEndlessForest/register/symbol.swf?word=" bgcolor="#808080" height="150" width="191"></embed>
</div><div id="disclaimer">CSS by Kamaya, you can contact me at KamayaTEF<i></i>@outlook.<i></i>com or add me on Skype (skymails888) if you need help with the CSS.
Add your disclaimer here.
</div></div></center>

<style>#updates {width:530px;height:150px;background:#646464;border:2px solid black;position:relative;top:-14px;left:-100px;overflow:hidden;text-align:justify} #picto {width:80px;height:150px;background:transparent;border:2px solid black} #basics {width:190px;height:400px;background:#646464;border:2px solid black;position:relative;left:-270px;top:-10px;overflow:hidden;text-align:justify;font-size:10px;line-height:100%} #infobox {width:532px;height:400px;background:#646464;border:2px solid black;position:relative;left:100px;top:-414px;overflow:hidden;text-align:justify;font-size:10px;line-height:100%} #picto {width:191px;height:150px;background:transparent;border:none;position:relative;left:270px;top:-1506px;} #disclaimer {width:750px;height:60px;background:#646464;border-top:2px solid black;position:relative;left-280px;top:-970px;top-line:2px black;text-align:justify;font-size:10px;padding:5px;line-height:100%}</style>

<style>#tab1 {width:96px;height:96px;background:url('http://i35.servimg.com/u/f35/16/57/54/31/simple10.jpg');border:5px solid #000000;border-radius:100px;position:relative;left:-280px;top:-405px;text-align:center} #tab2 {width:96px;height:96px;background:url('http://i35.servimg.com/u/f35/16/57/54/31/simple11.jpg');border:5px solid #000000;border-radius:100px;position:relative;left:-140px;top:-510px;text-align:center} #tab3 {width:96px;height:96px;background:url('http://i35.servimg.com/u/f35/16/57/54/31/simple12.jpg');border:5px solid #000000;border-radius:100px;position:relative;left:0px;top:-615px;text-align:center} #tab4 {width:96px;height:96px;background:url('http://i35.servimg.com/u/f35/16/57/54/31/simple13.jpg');background-size:96px 96px;border:5px solid #000000;border-radius:100px;position:relative;left:140px;top:-721px;text-align:center} #tab5 {width:96px;height:96px;background:url('http://i35.servimg.com/u/f35/16/57/54/31/simple14.jpg');background-size:96px 96px;border:5px solid #000000;border-radius:100px;position:relative;left:280px;top:-827px;text-align:center}</style>

<style>::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 2px rgba(50,50,50,1);background-color:rgba(50,50,50,1);} ::-webkit-scrollbar{width: 8px;background-color:rgba(0,0,0,1);} ::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);background-color: #000000;}</style>

<style>h4 {background:#000000;color:#FFFFFF;text-align:left;font-family:Dawning of a New Day;font-size:12pt;padding:5px} basic {color:#000000;text-shadow:0px 0px 5px;font-family:Dawning of a New Day;font-size:12px}</style>

<style>a:link, a:visited, ul.pager a{color:#2C2C2C; font-family:Dawning of a New Day;font-weight:normal;!important;-webkit-transition: all 0.5s ease-in-out!important; -moz-transition: all 0.5s ease-in-out!important; } a:link:hover, a:visited:hover, ul.pager a:hover{color:#000000; text-decoration:none; !important;-webkit-transition: all 0.5s ease-in-out!important; -moz-transition: all 0.5s ease-in-out!important; text-shadow: 0px 0px 10px}</style>

<style> a.info { position:relative; z-index:24; text-decoration: none; color: #FFFFFF; font-size:10px;font-family:Dawning of a New Day} a.info:hover { z-index:25; background-color:grey; color: #FFFFFF} a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:0em; width:100px; color: #FFFFFF; border:none; background-color:#000000; font-family:Verdana; padding: 5px; border-radius: 20px;text-align:justify}</style>

<style>.node .links {text-align:center;} .node {border-bottom:none} .comment.odd,tr.odd {background:grey;width:45%; margin-left:0px; margin:0px auto; margin-top:8px; margin-bottom:0px;color:#FFFFFF;border-radius:30px} .comment.even,tr.even{background:#646464;width:45%; margin-left:0px; margin:0px auto; margin-top:8px; margin-bottom:0px;color:#FFFFFF;border-radius:30px} .comment{border:5px solid black} span.submitted {color:#000000} .comment div.links{border-radius:20px 20px 0px 0px} .new {color:#000000;text-shadow:0px 0px 5px}</style>