Fibonacci Bio Code for TEFc -- Free for Anyone to Use

<div id="primarybox"><div id="firstsmallouter" class="outer"><div id="firstsmallinner" class="inner"><div id="firstsmalltext" class="textbox">TEXT INSIDE THE TOP LEFT BOX.</div></div></div><div id="secondsmallouter" class="outer"><div id="secondsmallinner" class="inner"><div id="secondsmalltext" class="textbox">TEXT INSIDE THE SMALL BOX NOT ON THE TOP</div></div></div><div id="mediumouter" class="outer"><div id="mediuminner" class="inner"><div id="mediumtext" class="textbox">TEXT INSIDE THE TOP RIGHT BOX</div></div></div><div id="bigouter" class="outer"><div id="biginner" class="inner"><div id="bigtext" class="textbox"><a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('one').style.display='inline';">Tab ONE</a> - <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('two').style.display='inline';">Tab TWO</a> - <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('three').style.display='inline';">Tab THREE</a> - <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('four').style.display='inline';">Tab FOUR</a> - <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('five').style.display='inline';">Tab FIVE</a>

<span id="one" class="tab" style="display:inline;">TEXT INSIDE THE BOTTOM BOX' DEFAULT JAVASCRIPT TAB.</span><span id="two" class="tab" style="display:none;">TEXT INSIDE THE SECOND TAB</span><span id="three"class="tab" style="display:none;">TEXT INSIDE THE THIRD TAB</span><span id="four"class="tab" style="display:none;">TEXT INSIDE THE FOURTH TAB</span><span id="five"class="tab" style="display:none;">TEXT INSIDE THE FIFTH TAB</span></div></div></div><style>/* --Hello! I'm AlisonRobin and this is the CSS I made for anyone on the TEFc site to use and edit as they please. Have fun!-- *//*the main container*/ #primarybox {width:620px;height:1020px;border: 1px solid #000000;background:#303030;color:#000000;} /*links inside the main container*/ #primarybox a {color:#000000;text-decoration:underline;} /*next three IDs are for the big box, its inner part, and the invisible scrolls.*/ #bigouter {width:600px;height:600px;position:absolute;margin-top:410px;margin-left:10px;} #biginner {width:580px;height:580px;margin-top:10px;margin-left:10px;} #bigtext {width:577px;height:577px;padding:10px;text-align:center;} /*next three IDs are for the medium box, its inner part, and the invisible scrolls.*/ #mediumouter {width:400px;height:400px;position:absolute;margin-top:10px;margin-left:210px;} #mediuminner {width:380px;height:380px;margin-top:10px;margin-left:10px;} #mediumtext {width:377px;height:377px;padding:10px;} /*next three IDs are for the top small box, its inner part, and the invisible scrolls.*/ #firstsmallouter {width:200px;height:200px;position:absolute;margin-top:10px;margin-left:10px;} #firstsmallinner {width:180px;height:180px;margin-top:10px;margin-left:10px;} #firstsmalltext {width:177px;height:177px;padding:10px;text-align:right;} /*next three IDs are for the bottom small box, its inner part, and the invisible scrolls.*/ #secondsmallouter {width:200px;height:200px;position:absolute;margin-top:210px;margin-left:10px;} #secondsmallinner {width:180px;height:180px;margin-top:10px;margin-left:10px;} #secondsmalltext {width:177px;height:177px;padding:10px;text-align:right;} /*the class for all the outside parts of boxes*/ .outer {background:#8C8C8C;border:1px solid #000000;} /*the class for all the insides of the boxes*/ .inner {background:#cccccc;border: 1px solid #000000;overflow:hidden;} /*this keeps the text boxes regular regardless of how much text you have in them.*/ .textbox {overflow:scroll;}</style>