Untitled

<html>
   <head>
            <script type="text/javascript">
<!--
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>

<script language="javascript">document.title=("tab title here.")</script><title>tab title here.</title>
 <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic" rel="stylesheet" type="text/css">

<style type="text/css">

.logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text,
.nc_profile, #left_container, #profilephoto, #flash_close_butt,
#start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .yellow_but,
.bottombar, .byline, .top-links { visibility: hidden !important; display: none !important;}

a:link {color: #000000;
background: #000000;}
a:visited {color:#000000;}
a:hover {color: #000000;
background: #ffffff;}
a:active {color:#000000;}


::selection {
background:#e0e0e0;
}

::-moz-selection {
background:#e0e0e0;
}

::-webkit-scrollbar {background-color: #000000; height:8px; width:8px; border:3px solid #00001;}
::-webkit-scrollbar-thumb:vertical {background-color:#000000; border:1px solid #202020; height:50px;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000000; border:1px solid #202020; height:8px;}

body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}

body{
background-image: url('http://www.wallpaper-inc.com/product_files/rf3526/rf3526.jpg') !important; background-repeat:repeat !important; background-position:top-center!important;
background-color: #000000;
font:14px Times New Roman;
color:#00FF00";
margin:0px;
height:0px;
width:0px;
}

h1 {
color: #fff;
font-family: ms ui gothic;
font-size: 14px;
}

pre {
background: #a0a0a0;
color: #fff;
text-align: center;
font-family: consolas;
font-size: 10px;
letter-spacing: 2px;
}

b, strong {
color: #a0a0a0;
letter-spacing: 1px;
font-size: 8px;
}

i, em {
color: #c0c0c0;
}

#header {
position: fixed;
top: 0px;
left: 0px;
width: 100px;
height: 100%;
background: #663300;
border-bottom: 1px solid #fff;
}

#container {
position: fixed;
top: 150px;
left: 150px;
width: 875px;
height: 425px;
background: #663300;
border: 1px solid #a0a0a0;
}

#box {
background-image: url('');
background-position: top-left;
position:fixed;
left: 175px;
top: 175px;
width: 400px;
height: 350px;
font-family: Corbel;
font-size: 10px;
color: #FFFFFF;
border: 1px solid #a0a0a0;
overflow: auto;
z-index:99;
padding:10px;
}

#desc {
position: fixed;
text-align: left;
left:615px;top:25px;
width: 400px;
height: 100px;
color: #000000;
font-family: calibri;
font-size: 14px;
background: #663300;
border: 1px solid #000000;
padding: 5px;
overflow: auto;
}

#desc img {
margin-left: 10px;
}

#desc a {
background: none;
}

#block1 {
margin-left: -10px;
width: 100px;
height: 97px;
padding: 2px 15px 2px 2px;
border-right: 1px dotted #000000;
}

#block1 img {
height: 90px;
width: 90px;
padding: 2px;
border: 1px solid #00001;
}

#block2 {
font-family: calibri;
font-size: 12px;
color: #000000;
margin-top: -100px;
margin-left: 115px;
height: 90px;
padding: 2px;
overflow: auto;
}

#block3 {
position: fixed;
top: 330px;
left: 207px;
height: 150px;
width: 210px;
padding: 2px;
border: 1px solid #00001;
}

#block3 img {
height: 150px;
width: 210px;
}


#icon {
    top: 25px; /* use to position the box */
    left: 325px; /* use to position the box */
    overflow: hidden;
    position: fixed;
    width: 100px; /* use to change the size of the box */
    height: 100px; /* use to change the size of the box */
    border-radius: 90px;
    border: 10px solid #00001;
    background-color: #fff;
}

#icon img {
    margin-top: 30px;
    margin-left: -23px;
    position: fixed;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

#icon:hover img {
    margin-top: 30px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

#player {
    margin-top: 40px;
    margin-left: -2px;
    overflow: hidden;
    opacity: 0;
    width: 100px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

#icon:hover #player {
    opacity: 0.5;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

.box img {
margin-left: 0px;
margin-bottom: 10px;
}


#smallbox {
position: absolute;
text-align: justified;
margin: 325px 0 0 94px;
padding: 2px;
width: 300px;
height: 110px;
background: #fff;
border: 1px solid #990000;
padding: 2px;
font-family: calibri;
color: #ffffff;
font-size: 10px;
overflow: auto;
}

#sideimg {position:absolute;
width: 275px;
height: 375px;
padding: 0px;
border: 0x solid #a0a0a0;
padding: 0px;
margin: 25px 0 0 475px;
}

#sideimg img {
width: 375px;
height: 375px;
}

#navi {position: absolute;left: 0px;
top: 10px; width: 80px;
height: 40px; border-right: 0px solid #fff; border-left: 0px solid #fff;padding: 3px;
}

#navi a{
margin-left: 0px;
width: 80px;
height: 35px;
line-height: 30px;
font-family: calibri;
font-size: 12px;
color: #FFFFFF;
background: #000000;
border: 1px solid #FFFFFF;
display: inline-block;
text-align: center;
z-index:99;
}

#navi a:hover {
background: #663300;
text-decoration: none;
border: 1px solid #000000;
color: #000000;
-webkit-transform: none;
 -moz-transform: none;
-o-transform: none ;
 -ms-transform: none;
 transform: none ;
 -webkit-transition: 1s ease-in-out;
 -moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
z-index: 9999999999999999999;
}

.tabs{
margin-top: 0px;
height: 35px;
width: 80px;
line-height: 30px;
font-family: Times New Roman;
font-size: 14px;
color: #FFFFFF;
background: #000000;
border: 1px solid #FFFFFF;
display: block;
text-align: center;
z-index:99;
}

.tabs:hover {
background: #663300;
text-decoration: none;
color: #000000;
border: 1px solid #000000;
-webkit-transform: none;
 -moz-transform: none;
-o-transform: none ;
 -ms-transform: none;
 transform: none ;
 -webkit-transition: 1s ease-in-out;
 -moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
z-index: 9999999999999999999;
}

.tab4 img {
width: 66px;
height: 65px;
margin-left: 5px;
margin-bottom: 5px;
border: 3px solid #663300;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

.tab4 img:hover {
border-radius: 30px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}


.tab4 a {
color: none;
background: none;
}

.tab4 a:hover {
color: none;
background: none;
}

.tab5 a {
border-radius: 70px;
margin-left: 10px;
margin-bottom: 5px;
padding: 20px 2px 2px 2px;
width: 80px;
height: 30px;
color: #00001;
background-color: #990000;
font-family: consolas;
font-size: 14px;
text-align: center;
letter-spacing: 1px;
display: inline-block;
border: 5px solid #663300;
}

.tab5 a:hover {
background: #663300;
color: #663300;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#tab3, #tab4, #tab5 {
display:none;
}

</style>
</head>
<body>
<div id="header">
<div id="navi">

<a href="http://quibii.weebly.com/">Quibii <br> New Tab</a><br><br>
<a href="http://ugnn.weebly.com/">UGNN <br> New Tab</font></a>
<br><br>
<span class="tabs" style="cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-all/cuteasdf19.gif'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation  ('tab3')">03.</span>
 <br>
<span class="tabs" style="cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-all/cuteasdf19.gif'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation  ('tab4')">04.</span>
<br>
<span class="tabs" style="cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-all/cuteasdf19.gif'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation  ('tab5')">05.</span>
</div></div>

<div id="container">
<div id="sideimg"><img src="http://oi66.tinypic.com/4hy5qw.jpg"></div>

<div id="box">
<h1>Greetings and Salutations</h1>
<div class="box">
Welcome to my little corner of the internet. Here you'll find a number of ramblings, ideas, concepts and general creations spawned from yours truly. If it is not your cup of tea, then simply exit from the tab. For those of you that do find interest in my creations and thoughts, then awesome. Why don't we discuss and converse about them?
<br><br>
In the mean time, read on through the different tabs, and do enjoy your stay in my little plane of Oblivion."
<br><br>
</div>
</div>

<script>function changeNavigation(id) {document.getElementById('box').innerHTML=document.getElementById(id).innerHTML}</script>

<div id="tab3">
<h1>Title</h1>
<div class="box">Tab 3</div>
</div>

<div id="tab4">
<h1>Title</h1>
<div class="box">Tab 4</div>
</div>

<div id="tab5">
<h1>Title</h1>
Tab 5
</div>
</div>

<div id="icon">
<center><img src="http://media.tumblr.com/tumblr_m1zdnvBEN71r3we0y.gif"></center>
<div id="player"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="105" height="25">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=https://ia601501.us.archive.org/17/items/TheElderOneThemeDragonAgeInquisitionSoundtrack/The%20Elder%20One%20Theme%20-%20Dragon%20age-%20Inquisition%20Soundtrack.mp3&amp;width=155&amp;height=25&amp;autoplay=1&amp;loop=1&amp;showvolume=1&amp;showslider=0&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttoncolor=000000" />
</object></div></div>
<div id="desc">
<div id="block1"><img src="http://i.imgur.com/tf2msjq.png">
</div>
<div id="block2"><li>Quibii "Queen Bee"</li>
<li>Seventeen</li>
<li>Author, Mythologist, Collector.</li>
<p align="right">
Beta v.078</p></div>
</div>
</div>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<script type="text/javascript">
    var divs = ["tab3", "tab4", "tab3", "tab4", "tab5"];
    var visibleDivId = null;

    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }

      hideNonVisibleDivs();
    }

    function hideNonVisibleDivs() {
      var i, divId, div;

      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);

        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
      </script>
   </body>
</html>