Layout 19 // Not Mine

<style>
@font-face {
 font-family: 'Raleway';
 src: url('https://dl.dropboxusercontent.com/s/i5syov7xapv1zbh/Raleway-Medium.ttf');
}

@font-face {
 font-family: 'Fifth Cursive';
 src: url('https://dl.dropboxusercontent.com/s/g248zxh4p7u1ji8/fifthgradecursive.ttf');
}

@font-face {
 font-family: 'Permanent Marker';
 src: url('https://dl.dropboxusercontent.com/s/hobsqex8n6e0awp/PermanentMarker.ttf');
}

.pfor{display: none;}
#profile{border: 0px; background: transparent;}
/* The Supreme @ RPC */
body{background: #999999 url(http://i.picpar.com/TW0b.png); overflow: hidden;}
#whole{position: fixed; margin: auto; left: 0px; top: 0px; right: 0px; bottom: 0px;}
body, a {cursor: url(http://i.picpar.com/Zhzb.png), progress !important;}

::selection{background: none; color: #ffffff; font-weight: bold;}

::-webkit-scrollbar-thumb {box-shadow: inset #000000 0px 0px 4px; border-right: 5px transparent solid; border-top: 5px transparent solid; border-bottom: 5px transparent solid;}
::-webkit-scrollbar {width: 8px; background-color: transparent;}

#frame{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 838px; height: 438px;
}

.img1, .img2, .stats, .ooc{
position: absolute;
width: 400px; height: 200px;
border: 2px solid #EEEEEE;
background: rgba(60, 60, 60, 0.4) url(http://i.picpar.com/gW0b.png);
overflow: hidden; text-align: left;
box-shadow: #000000 0px 0px 2px;

}

.img1 img, .img2 img, .stats img, .ooc img{position: absolute; width: 400px; height: 200px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; box-shadow: #000000 0px 0px 0px 2px; background: rgba(300, 300, 300, 1)}

.stats img{margin-left: -402px; box-shadow: #ffffff 0px 0px 0px 2px;}
.ooc img{margin-left: 402px; box-shadow: #ffffff 0px 0px 0px 2px;}

.img1{margin-left: 0px; margin-top: 0px; border: #000000 2px solid; background: rgba(60, 60, 60, 0.8);}
.stats{margin-left: 434px; margin-top: 0px;}
.ooc{margin-left: 0px; margin-top: 234px;}
.img2{margin-left: 434px; margin-top: 234px; border: #000000 2px solid; background: rgba(60, 60, 60, 0.8);}

.text, .text2{
position: absolute;
margin-top: 4px; margin-left: 4px;
width: 380px; height: 180px;
padding: 5px; border: 1px solid #ffffff;
background: rgba(0, 0, 0, 0.85);
color: #ffffff;
overflow: auto;
text-align: justify;
font-family: Raleway;
font-size: 10px;
}

.text2{background: rgba(300, 300, 300, 0.70); color: #000000; text-shadow: #000000 0px 0px 0px; border: #000000 1px solid;}
h1{margin-bottom: 5px; margin-top: 0px; font-family: Fifth Cursive; text-shadow: #FFFFFF -1px 1px 0px, #000000 0px 0px 0px;}

.navi{position: fixed; margin: auto; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 20px; height: 20px; text-align: left;}

.navi a{
position: absolute;
width: 18px; height: 18px;
background: rgba(50, 50, 50, 0.2);
border: 1px #ffffff solid;
box-shadow: #000000 0px 0px 1px;
}

.box{
float: left;
width: 380px; height: 180px;
text-align: center;
line-height: 15px;
font-variant: small-caps;
font-size: 12px;
}

strong{color: #999999; text-shadow: #999999 0px 0px 0px;}

.pad{float: left; margin-bottom: 5px; margin-right: 5px; width: 20px; height: 20px;}

.links_vertical, .links_horizontal{position: fixed; margin: auto; left: 0px; top: 0px; right: 0px; bottom: 0px;}

.links_vertical a, .links_horizontal a{
float: left; width: 18px; height: 18px;
background: rgba(50, 50, 50, 0.2);
border: 1px #ffffff solid;
box-shadow: #000000 0px 0px 1px;
opacity: 0;
 -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s;
}

.links_vertical{width: 20px; height: 170px;}
.links_vertical a{margin-bottom: 5px;}

.links_horizontal{width: 170px; height: 20px;}
.links_horizontal a{margin-right: 5px;}

.links_vertical a:hover, .links_horizontal a:hover{background: rgba(50, 50, 50, 0.4); }


#frame:target .img1 img{margin-top: -202px;}
#frame:target .img2 img{margin-top: 202px;}
#frame:target .stats img, #frame:target .ooc img{margin-left: 0px;}
#frame:target .exit{z-index: 1;}

#frame:target .links_vertical a, #frame:target .links_horizontal a{opacity: 1;}

</style>
<div id="whole" oncontextmenu="return false;">
<div id="frame">


<div class="img1">

<div class="text2">
<h1>heading</h1>
text
</div>

<img src="TOP LEFT IMAGE">
</div>


<div class="stats">

<div class="text" style="overflow: hidden;">

<div class="box">

This box doesn't scroll.

</div>

</div>

<img src="TOP RIGHT IMAGE">
</div>


<div class="ooc" style="overflow: hidden;">

<div class="text">
<div class="box">

This box doesn't scroll.

</div>
</div>

<img src="BOTTOM LEFT IMAGE">
</div>


<div class="img2">

<div class="text2">
<h1>heading</h1>
text
</div>

<img src="BOTTOM RIGHT IMAGE">
</div>


<div class="links_vertical">
<a href="LINK HERE" target="_blank" title="visual 1"></a>
<a href="LINK HERE" target="_blank" title="visual 2"></a>
<a href="LINK HERE" target="_blank" title="visual 3"></a>

<div class="pad"></div>
<a href="LINK HERE" target="_blank" title="visual 4"></a>
<a href="LINK HERE" target="_blank" title="visual 5"></a>
<a href="LINK HERE" target="_blank" title="visual 6"></a>
</div>

<div class="links_horizontal">
<a href="LINK HERE" target="_blank" title="audio 1"></a>
<a href="LINK HERE" target="_blank" title="audio 2"></a>
<a href="LINK HERE" target="_blank" title="audio 3"></a>
<div class="pad"></div>
<a href="LINK HERE" target="_blank" title="misc 1"></a>
<a href="LINK HERE" target="_blank" title="misc 2"></a>
<a href="LINK HERE" target="_blank" title="misc 3" style="margin-right: 0px;"></a>
</div>

<div class="navi">
<a href="#" class="exit"></a>
<a href="#frame"></a>
</div>


</div>
</div>

</div>