Akita Onigiri -- FIN ♥

---- middle box ----

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script');

::selection {color: grey; background-color:none;}
::-moz-selection {color: #ce938f; background-color:grey;}

::-webkit-scrollbar {
width: 10px; }

::-webkit-scrollbar { width: 5px; height:0px; }
::-webkit-scrollbar-thumb:vertical {
background-color: #866666; border: none; }

body {
background-color: #C9BFDA;
background-image: url('http://i.picpar.com/L47c.jpg');
background-size: 35% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position:  889 0;
cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), progress !important;}

b, strong { color: #bdbdbd; }
i, strong { color: #dcd1cb;}

a:active, a:link, a:visited {
color: #99B2BA;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in; cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress; }

a:hover {
color: #FFF;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress; }

#icon1 {
position:fixed;
left: 175px;
top: 150px;
width: 475px;
height: 475px;
background-image: url('http://i.picpar.com/N47c.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position: cover;
background-attachment:absolute;
background-color:white;
border: solid 10px #7d7789;
border-radius: 50%;
z-index: 3; }

.tabz {
position: absolute;
top: 125px;
height: 20px;
width: 20px;
background: black;
border-radius: 50%;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 99; }

.tabz:hover {
background: grey; }

#tab1 {top: 400px; left: 165px; border: solid 5px #7d7789; z-index: 99; }
#tab2 {top: 441px; left: 172px; border: solid 5px #7d7789; z-index: 99; }
#tab3 {top: 480px; left: 185px; border: solid 5px #7d7789; z-index: 99; }
#tab4 {top: 515px; left: 205px; border: solid 5px #7d7789; z-index: 99; }
#tab5 {top: 547px; left: 231px;border: solid 5px #7d7789; z-index: 99; }

.content {
background-color: transparent;
height: 200px;
left:0px;
opacity:0;
position:fixed;
top: 0px;
width: 1px;
border-radius: 50%; }

.content:target {
opacity:1;
z-index:5;
left: 1px; }

.floof {
 position:fixed;
 margin:0 auto;
top: 160px;
left: 185px;
height: 475px;
width: 475px;
background-color: #382b2e;
border: 0px solid #fff;
border-radius: 50%;
 overflow: auto;
 z-index: 2;
-moz-transition: all 1.0s ease-out;
-ms-transition: all 1.0s ease-out;
-o-transition: all 1.0s ease-out;
transition: all 1.0s ease-out; }

.floof div {
 position: absolute;
 top: 18%;
left: 15.1%;
 color: #FFF;
 margin:0 auto;
 font-size: 12px;
 background-color: #382b2e;
 background-image:url();
font-family:georgia;
 font-weight: none;
 text-align: justify;
 width: 310px;
 height: 280px;
line-height: 14px;
 padding: 10px;
 overflow: auto;
 z-index: 99; }

#name {
position:fixed;
top: 50px;
left: 300px;
height: 30px;
width: 350px;
text-align: left;
font-family: 'Comfortaa', cursive;
font-size: 45px;
color: #ae989d;
z-index: 99; }

#title {
position:fixed;
top: 100px;
left: 335px;
height: 30px;
width: 350px;
text-align: left;
font-family: 'Petit Formal Script', cursive;
font-size: 25px;
color: #9c888d;
z-index: 99; }

h2 {
 font-family:georgia;
 font-size: 15px;
 text-transform: uppercase;
 padding-left:8px;
 padding-right:8px;
 border-bottom:2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
 padding-top:5px;
 padding-bottom:5px;
 text-align:right;
 color:#ffefef;
line-height: 2px;
 background-color:#5d5154;}

#music-bg {
position: fixed;
top: 225px;
left: 591px;
height: 30px;
width: 30px;
background-color: #212121;
border: solid 5px #7d7789;
border-radius: 50%;
z-index: 99; }

#sound {
position:absolute;
background-image:
url('http://i.picpar.com/d97c.png');
background-repeat: no-repeat;
background-size: 20px;
width: 25px;
height: 25px;
z-index:0;
left:  601px;
top: 234px;
overflow:hidden;
z-index: 99; }

img.grayscale{
 filter: grayscale(100%);
border: 1px solid #333333;
 -webkit-filter: grayscale(100%);
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;}

img.grayscale:hover{
 filter: grayscale(0%);
 -webkit-filter: grayscale(0%);
 filter: none;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;}

---- the above goes in the middle box ----

---- below goes into the bottom box ----


<div id="akita-bg"></div>
<div id="icon1"></div>

<a href="#01"><div id="tab1" class="tabz"></div></a>
<a href="#02"><div id="tab2" class="tabz"></div></a>
<a href="#03"><div id="tab3" class="tabz"></div></a>
<a href="#04"><div id="tab4" class="tabz"></div></a>
<a href="#"><div id="tab5" class="tabz"></div></a>

<div id="01" class="content">
<div class="floof"><div>
<h2>Header</h2>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>
<b><font style=float:left>Stat:</font></b> <font style=float:right> Info.</span></font><br>


</div></div></div>

<div id="02" class="content">
<div class="floof"><div>
<h2>Header</h2>
Donec rhoncus euismod tellus, at rhoncus leo sagittis et. Etiam viverra eu neque a imperdiet. Aenean eget lorem sit amet erat dignissim malesuada. Morbi elementum ex ut aliquet molestie. Quisque tempus convallis libero eget semper. Nulla sodales mauris vel massa sollicitudin, at rutrum nibh dignissim. Donec lacus tellus, lobortis porttitor quam quis, aliquam finibus tellus. Vivamus venenatis urna a dapibus mollis. Donec vehicula odio felis, ut tempor ipsum aliquam sit amet. Phasellus sapien magna, tempor vel suscipit eu, sagittis eget lorem. In ante purus, facilisis id vehicula in, tempor sollicitudin turpis. Nullam ullamcorper ante turpis, id imperdiet dui sollicitudin ut. <br><br>

Donec rhoncus euismod tellus, at rhoncus leo sagittis et. Etiam viverra eu neque a imperdiet. Aenean eget lorem sit amet erat dignissim malesuada. Morbi elementum ex ut aliquet molestie. Quisque tempus convallis libero eget semper. Nulla sodales mauris vel massa sollicitudin, at rutrum nibh dignissim. Donec lacus tellus, lobortis porttitor quam quis, aliquam finibus tellus. Vivamus venenatis urna a dapibus mollis. Donec vehicula odio felis, ut tempor ipsum aliquam sit amet. Phasellus sapien magna, tempor vel suscipit eu, sagittis eget lorem. In ante purus, facilisis id vehicula in, tempor sollicitudin turpis. Nullam ullamcorper ante turpis, id imperdiet dui sollicitudin ut.
</div></div></div>

<div id="03" class="content">
<div class="floof"><div>
<h2>Header</h2>
<a target="_blank" href="PROFILEURL" target="_blank" title="Words about them here. "><img src="IMGURL" align="left" height="70" width="70" border="1px solid #D7DF01"></a>

</div></div></div>

<div id="04" class="content">
<div class="floof"><div>
<h2>Header</h2>
Words. 4
</div></div></div>

<div id="name">MiMi Kana</div>
<div id="title">Akita Onigiri</div>

<div id="music-bg"></div>

<div id="sound">
<div style="margin-top:4px;">
<audio controls style="opacity: 0;">
<source src="http://k003.kiwi6.com/hotlink/rnnnb1l4cp/BABYMETAL_-_KARATE_OFFICIAL_.mp3">
</audio>

--- this above goes in the bottom box ---