CSS GOES HERE--->

#profile-container{background: none; height: 100%;}
body{background: #fff; overflow: hidden;}

::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-track-piece{background: #fff;}
::-webkit-scrollbar-thumb{background: #000;}


#mainBox{
 width: 415px;
 height: 603px;
 background: #7989ad;
 border: 1px solid #444;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -302.5px 0px 0px -208.5px;
 box-shadow: 5px 5px 3px 2px #999;
 overflow: hidden;
}

.inBox{
 width: 405px;
 height: 593px;
 background-image: url("http://i.imgur.com/hWejgrr.png");
 background-size: 405px;
 box-shadow: 0px 0px 0px 3px #000 inset;
 float: left;
 margin-left: 5px;
 margin-top: 5px;
 transition: width 0.5s 0.5s ease-out, background-position 0.5s 0.5s ease-out;
}

#mainBox:hover > .inBox{
 width: 50px;
 background-position: -160px 0px;
 transition: all 0.5s ease-out;
}

.inboxOne{
 float: left;
 width: 173px;
 height: 255px;
 margin-top: 5px;
 margin-left: 5px;
 background: #fff;
 box-shadow: 0px 0px 0px 3px #000 inset;
 opacity: 0;
 transition: all 0.5s ease-in;
}

.inboxOneA{
 width: 163px;
 height: 245px;
 overflow: hidden;
 padding-right: 0px;
 background: none;
 float: left;
 margin-left: 5px;
 margin-top: 5px;
 text-align: center;
 font-size: 12px;
 font-family: Trebuchet MS;
 color: #000;
 opacity: 1;
}

.z{
 font-family: Times New Roman;
 font-size: 11px;
 width: 100%;
 padding-left: 5px;
 height: 13px;
 background: #111;
 color: #fff;
 text-align: left;
}

#mainBox:hover > .inboxOne{
 opacity: 1;
 transition: all 0.5s 0.5s ease-out;
}

.inboxTwo{
 float: left;
 width: 350px;
 height: 333px;
 margin-top: 5px;
 margin-left: 5px;
 background: #fff;
 box-shadow: 0px 0px 0px 3px #000 inset;
 opacity: 0;
 transition: all 0.5s ease-in;
}

.inboxTwoA{
 width: 330px;
 height: 323px;
 overflow: auto;
 padding-right: 10px;
 background: none;
 float: left;
 margin-left: 5px;
 margin-top: 5px;
 text-align: Left;
 font-size: 12px;
 font-family: Trebuchet MS;
 color: #000;
 opacity: 1;
}

#mainBox:hover > .inboxTwo{
 opacity: 1;
 transition: all 0.5s 0.5s ease-out;
}

.inboxThree{
 float: left;
 width: 173px;
 height: 294px;
 margin-top: 5px;
 margin-left: 5px;
 background: #fff;
 box-shadow: 0px 0px 0px 3px #000 inset;
 opacity: 0;
 transition: all 0.5s ease-in;
}

#mainBox:hover > .inboxThree{
 opacity: 1;
 transition: all 0.5s 0.5s ease-out;
}

CSS END-->

<div id="mainBox">
<div class="inBox">&nbsp;</div>
<div class="inboxOne">
<div class="inboxOneA">
<div class="z">NAME</div>
Lucien Whiteguard
<div class="z">SEX</div>
Male
<div class="z">ORIENTATION</div>
Hetero
<div class="z">AGE</div>
Twenty Four
<div class="z">RACE</div>
Human
<div class="z">PROFESSION</div>
Paladin
<div class="z">MAGIC TYPE</div>
Holy Magic
<div class="z">ALIGNMENT</div>
Lawful Evil</div>
</div>
<div class="inboxOne">
<div class="inboxOneA">
<div class="z">INVENTORY:</div>
<div style="text-align: justify; margin-left: 5px; margin-top: 3px; margin-right: 5px; font-family: Arial; font-size: 10px;">WIP.</div>
</div>
</div>
<div class="inboxTwo">
<div class="inboxTwoA">
<div style="margin-top: 0px;" class="z">BACKSTORY</div>
WIP.<br /><br /><br />
<div style="margin-top: 10px;" class="z">OOC</div>
Still a wip. Sorry.</div>
</div>
</div>