Aria Quinn Code

<style type="text/css">
.pfor {display: none;}
#profile {background-color: transparent;}
#profile {border: 0px;}
</style>




<style type="text/css">

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
 font-family: 'FontAwesome', sans-serif;
 position: fixed;
 z-index: 1;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track-piece { background-color:#fffeff; }
::-webkit-scrollbar-thumb:vertical {
 width: 10px;
 background-color: #a4a6b7;
}

body {
 background-color: #000;
 background-image: url(http://static.tumblr.com/kllbcnj/tjcnrqgad/techtheme4.gif); /** The background image. Paste your background image link in between the brackets. **/
 background-attachment: fixed;
 margin: 0;
 word-wrap: break-word;
}
a { text-decoration:none; }

#main {
 width: 900px;
 height: 450px;
 margin: 130px auto;
 padding: 10px;
 border: 1px solid #cccccc; /** main container border **/
 background-color: #ffffff; /** main container background **/
}

.maint {
 color: #cc4400; /**blog title text colour**/
 text-shadow: -2px 0 0 #b3c6ff; /**blog title text shadow**/
 letter-spacing: 5px;
 font-family: courier new;
 font-size: 30px;
 position: absolute;
 width: 900px;
 text-align: right;
 text-transform: uppercase;
 margin: -50px 0;
}

.pic {width: 300px;height: 450px;float: left;}

.info {
 position: absolute;
 width: 300px;
 overflow: hidden;
 margin: 255px 0;
 transition: 0.8s;
 -moz-transition: 0.8s;
 -webkit-transition: 0.8s;
 -o-transition: 0.8s;
}

.name, .age, .country, .sex, .ort, .occu, .status, .extra1, .extra2, .extra3, .extra4, .extra5 {
 font-family: consolas;
 font-size: 9px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #000000;
 padding: 3px 10px;
 margin-bottom: 5px;
 opacity: 0;
 background-color: #eee; /** info bars background **/
 border-right: 10px solid #000000; /** info name borders **/
 border-left: 10px solid #000000; /** info name borders **/
 transition: 0.8s;
 -moz-transition: 0.8s;
 -webkit-transition: 0.8s;
 -o-transition: 0.8s;
}
.age {
 border-right: 10px solid #000000; /** info age borders **/
 border-left: 10px solid #000000; /** info age borders **/
}
.country {
 border-right: 10px solid #000000f; /** info country borders **/
 border-left: 10px solid #000000; /** info country borders **/
}
.sex {
 border-right: 10px solid #000000; /** info sex borders **/
 border-left: 10px solid #000000; /** info sex borders **/
}
.ort {
 border-right: 10px solid #000000; /** info ort borders **/
 border-left: 10px solid #000000; /** info ort borders **/
}
.occu {
 border-right: 10px solid #000000; /** info occu borders **/
 border-left: 10px solid #000000; /** info occu borders **/
}
.status {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}

.extra1 {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}
.extra2 {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}

.extra3 {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}

.extra4 {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}

.extra5 {
 border-right: 10px solid #000000; /** info status borders **/
 border-left: 10px solid #000000; /** info status borders **/
}
.name b,strong { color: #6666ff; } /** info 'NAME:' colour **/
.age b,strong { color: #4d4dff; } /** info 'AGE:' colour **/
.country b,strong { color: #3333ff; } /** info 'COUNTRY:' colour **/
.sex b,strong { color: #1a1aff; } /** info 'sex:' colour **/
.ort b,strong { color: #0000ff; } /** info 'ort:' colour **/
.occu b,strong { color: #0000e6; } /** info 'occu:' colour **/
.status b,strong { color: #0000cc; } /** info 'status:' colour **/
.extra1 b,strong { color: #0000cc; } /** info 'status:' colour **/
.extra2 b,strong { color: #0000cc; } /** info 'status:' colour **/
.extra3 b,strong { color: #0000cc; } /** info 'status:' colour **/
.extra4 b,strong { color: #0000cc; } /** info 'status:' colour **/
.extra5 b,strong { color: #0000cc; } /** info 'status:' colour **/

#yi, #er, #san {width:300px;height:450px;float:left;overflow:hidden;}

#yi:hover .info { margin: 170px 0; }
#yi:hover .name { opacity: 1; }
#yi:hover .age { opacity: 1; transition-delay: 0.2s; }
#yi:hover .country { opacity: 1; transition-delay: 0.4s; }
#yi:hover .sex { opacity: 1; transition-delay: 0.6s; }
#yi:hover .ort { opacity: 1; transition-delay: 0.8s; }
#yi:hover .occu { opacity: 1; transition-delay: 1s; }
#yi:hover .status { opacity: 1; transition-delay: 1.2s; }
#yi:hover .extra1 { opacity: 1; transition-delay: 1.4s; }
#yi:hover .extra2 { opacity: 1; transition-delay: 1.6s; }
#yi:hover .extra3 { opacity: 1; transition-delay: 1.8s; }
#yi:hover .extra4 { opacity: 1; transition-delay: 2.0s; }
#yi:hover .extra5 { opacity: 1; transition-delay: 2.2s; }

.bio {
 color: #888888; /** bio text colour **/
 width: 240px;
 height: 390px;
 padding: 10px 20px;
 overflow: auto;
 font-family: georgia;
 font-size: 10px;
 text-align: justify;
 position: absolute;
 margin: 10px;
 opacity: 0;
 z-index: 10;
 transition: 1.2s;
 -moz-transition: 1.2s;
 -webkit-transition: 1.2s;
 -o-transition: 1.2s;
}

.bio a { color: #b55c7a; /** bio links colour **/ }
.bio a:hover { color: #cccccc; } /** bio links colour hover **/
.bio b,strong { color: #3d8291; } /** bio bold colour **/
.bio i,em { color: #3f8f7b; } /** bio italic colour **/

.ichi, .ni, .san, .shi, .oi, .vie {
 background-color: #fff; /** bio background **/
 opacity: 0.8;
 width: 50px;
 height: 450px;
 float: left;
 position: absolute;
 z-index: 9;
 height: 0;
 transition: 1.2s;
 -moz-transition: 1.2s;
 -webkit-transition: 1.2s;
 -o-transition: 1.2s;
}
.ni { margin-left: 50px; }
.san { margin-left: 100px; }
.shi { margin-left: 150px; }
.oi { margin-left: 200px; }
.vie { margin-left: 250px; }

#er:hover .ichi { height: 450px; }
#er:hover .ni { height: 450px; transition-delay: 0.2s; }
#er:hover .san { height: 450px; transition-delay: 0.4s; }
#er:hover .shi { height: 450px; transition-delay: 0.6s; }
#er:hover .oi { height: 450px; transition-delay: 0.8s; }
#er:hover .vie { height: 450px; transition-delay: 1.0s; }
#er:hover .bio { opacity: 1; }

#one, #two, #three, #four{
 background-color: #ffffff; /** right column: interests background **/
 color: #666666; /** right column: interests text **/
 font-family: georgia;
 font-size: 8.5px;
 letter-spacing: 0px;
 position: absolute;
 padding: 20px 10px 10px 10px;
 width: 150px;
 margin: 15px -20px;
 height: 65px;
 overflow: auto;
 opacity: 0;
 text-align: justify;
 transition: 0.8s;
 -moz-transition: 0.8s;
 -webkit-transition: 0.8s;
 -o-transition: 0.8s;
}
#two { margin: 127px 50px; }
#three { margin: 240px -20px; }
#four { margin: 354px 50px; }

#san:hover #one { opacity: 1; margin: 15px; }
#san:hover #two { opacity: 1;transition-delay:0.2s; margin: 127px 15px; }
#san:hover #three { opacity:1;transition-delay:0.4s;margin: 240px 15px; }
#san:hover #four { opacity:1;transition-delay:0.6s; margin: 354px 15px; }

.onet {
 background-color: #000000; /**right column: interests header background**/
 color: #ffffff; /**right column: interests header text colour**/
 letter-spacing: 1px;
 font-family: consolas;
 font-size: 8px;
 position: absolute;
 text-align: center;
 width: 170px;
 padding: 3px 0 3px 10px;
 margin: -20px -20px 10px -20px;
 text-transform: uppercase;
}

#navigate {margin: -45px 50px;position: absolute;}
#navigate a { color: #888888; } /** navigation icon colour **/

#nava {
 background-color: #fff; /** navigation icon background **/
 overflow: hidden;
 float: left;
 margin-right: 30px;
 font-size: 12px;
 width: 25px;
 height: 25px;
 line-height: 25px;
 border-radius: 100px;
 transition: 0.6s;
 -moz-transition: 0.6s;
 -webkit-transition: 0.6s;
 -o-transition: 0.6s;
}

.navicon {
 position: fixed;
 width: 25px;
 margin: 0 -6px;
 text-align: center;
 transition: 0.6s;
 -moz-transition: 0.6s;
 -webkit-transition: 0.6s;
 -o-transition: 0.6s;
}

#nava:hover .navicon {
 color: #ffffff; /** navigation icon hover colour **/
}
#nava:hover .navicon {margin: -25px -6px;}

.shield1, .shield2, .shield3 {
 background-color: #fcc142; /** navigation icon hover background **/
 margin-top: -25px;
 width: 25px;
 height: 25px;
 transition: 0.6s;
 -moz-transition: 0.6s;
 -webkit-transition: 0.6s;
 -o-transition: 0.6s;
}
.shield2 { background-color: #546ecc; } /** nav icon hover background 2 **/
.shield3 { background-color: #5dc9b6; } /** nav icon hover background 3 **/
#nava:hover .shield1, #nava:hover .shield2, #nava:hover .shield3 {margin-top: 0;}

.navt {
 background-color: #fff; /**navigation text background**/
 color: #888888; /**navigation text colour**/
 z-index: 1;
 font-family: consolas;
 text-transform: uppercase;
 letter-spacing: 1px;
 position: absolute;
 margin: 0px 10px;
 text-align: center;
 line-height: 14px;
 opacity: 0;
 font-size: 0;
 transition: 0.6s;
 -moz-transition: 0.6s;
 -webkit-transition: 0.6s;
 -o-transition: 0.6s;
}

#nava:hover .navt {
 font-size: 8px;
 opacity: 1;
 width: 50px;
 margin: -55px -10px;
}

.tri {
 color: #fff; /**navigation text background**/
 z-index: 1;
 font-size: 0px;
 position: absolute;
 margin: -5px 12px;
 transition: 0.6s;
 -moz-transition: 0.6s;
 -webkit-transition: 0.6s;
 -o-transition: 0.6s;
}

#nava:hover .tri {
 margin: -50px 5px;
 font-size: 16px;
}
{CustomCSS}

</style>


<div id="main">

<div class="maint">The Fortune Hacker</div>

<div id="navigate">



<a href="cccc"><div id="nava">
<div class="shield1"></div>
<span class="navt">xxxx</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

<a href="xxxxx"><div id="nava">
<div class="shield2"></div>
<span class="navt">XXXX</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

<a href="cccccc"><div id="nava">
<div class="shield3"></div>
<span class="navt">XXX</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

<a href="xxxx"><div id="nava">
<div class="shield1"></div>
<span class="navt">xxxxx</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

<a href="xxxxx"><div id="nava">
<div class="shield2"></div>
<span class="navt">xxxx</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

<a href="http://yukoki.tumblr.com"><div id="nava">
<div class="shield3"></div>
<span class="navt">credit</span>
<span class="tri">?</span>
<div class="navicon"></div>
</div></a>

</div>

<div id="yi">


<img class="pic" src="http://i.imgur.com/2DY4oII.png">



<div class="info">
<div class="name"><b>name:</b>Aria Leanne Quinn</div>
<div class="age"><b>nicknames:</b> Ari, Quinn</div>
<div class="country"><b>age:</b> 17</div>
<div class="sex"><b>gender:</b> Female</div>
<div class="ort"><b>birthday:</b> October 18th</div>
<div class="occu"><b>height+weight:</b> 5ft //130lbs</div>
<div class="status"><b>year:</b> eleven </div>
<div class="extra1"><b>specialty + deck:</b>Archetypes// Luna lights</div>
<div class="extra2"><b>recruitment:</b> Volunteer </div>
<div class="extra3"><b>amalgam bonded + manifestation:</b> Luna-Light Blue Cat {Still working on the other part}</div>
<div class="extra4"><b>orientation:</b> Bisexual</div>
<div class="extra5"><b>status:</b> Single/Uninterested</div>
</div>

</div>


<div id="er">


<img class="pic" src="http://i.imgur.com/K5efZzt.png">

<div class="bio">
<b>Info</b><Br>
<p>Aria's the only child of the Quinn family. Her father having a background in mechanical engineering, and her mother having a background in Computer science among other things. The two were crazy college kids when they first met. And would eventually what started as a partnership for a mutual class, they ended up hitting it off. Then they dated, and then married. And maybe over the course of their time together they would start the prototype for what would be later known as a duel runner. Yes the motor cycle in which card games are played.</p>

<p>Her mother and father would develop the idea almost all her life. Finally when they had a solid prototype, the engineer and computer tech would show their product and sell to Kaiba corp. The rights and patent for the dual runner or D-runner. Leaving it up to them to perfect the device. And what came with it. </p>

<p>Aria's parents would take the funding for the sale and open up their own business after buying their first home. Well owned home. The business that of an auto mechanic shop. Aria's mom works in the back doing the programming if needed, and the for newer models of cars. this was becoming a more common occurrence after all. Her aunt and uncle helped as well. her uncle working as a mechanic with her father and her aunt working as the book keeper.</p>

<p>She does not seem like she has much going for her as a person, aside from her ability with computers. She's not athletic, infact she has rather below average stamina, and she often suffers from back issues due to her large bossom. This is usually what prevents her from doing most things that would put her on the spot. Believe it or not she is nervous about sticking out any more than she already does.</p>

<p>However when she will be given the Chance Aria will take to D-wheel/Duel Runner for a drive she actually will. She's got a fairly good grasph on the use and ride one. This was more or less from the shop needing to test out custom ones they've been known to build, and while her father often would be the one to test it when shew as much younger, eventually Aria got the chance and it would fall under her to test out the functionality of the devices. </p>
<p>Aria isn't entirely open about it but she wants to actually want to pursue in the up and coming sport (thing) of Turbo dueling. However as of right now, it's a bit too dangerous for most. Only due to the kinks still being worked out still.</i>
Ontop of that Aria is a hacking genius. She's good with computers and stuff. She is rather well adverse at programming and the different languages that run with them too. She's also a skilled hacker, but while she's capable of it, she'd only usually go as far as to do so to pull a prank. And even then. She's more white hat/grey heat then black. Aka she won't do it to harm someone or steal their information, or could be called a 'moral' hacker. Doesn't make it any better though in some folks' eyes. It has landed her in a heep of trouble in the past. She ended up with a record for it. But nothing massive or threatening.
</div>

<div class="ichi"></div><div class="ni"></div><div class="san"></div><div class="shi"></div><div class="oi"></div><div class="vie"></div>
</div>

<div id="san">


<img class="pic" src="http://i.imgur.com/r4cbc2d.png">



<div id="one">
<div class="onet">Rules/OOC:</div>
00. YGO TDoaN Screen name: Blinky
01. PM Friendly 99.9999% of the time.<br>
02. Anywhere from one liner to paragraphs. <br>
03. Be civil that's all I ask.<br>
</div>

<div id="two">
<div class="onet">More Rules:</div>
04. Godmod and Metagaming will not be tolerated.<Br>
05. Roleplays are fun. Romance is not, nor will it ever be priority.<Br>
06. Artwork is not mine<br>
07. Skype is Reserved for friends.</div>

<div id="three">
<div class="onet">Even More Rules:</div>
08. Yugioh Roleplays get priority.<Br>
09. I have the right to say no.<Br>
10. Story driven over Smut.<Br>
11. I do not One on one on skype.<BR>
12. IC =/= OOC. </div>

<div id="four">
<div class="onet">Disclaimer:</div>
The profile code was created by YUKOKI on tumblr and was modified by myself to fit RPC. If you wish to get the code, please visit her page. It's the credit link at the top.<br>
None of the art is mine either. </div>
</div>

</div>

<div style="position: fixed; bottom: 50px; left: 36px; background-color: transparent;">
<img src="http://i.imgur.com/TMqhwGn.png" height="70%">
<div style="position: fixed; bottom: 50px; right: 150px; background-color: transparent;">
<img src="http://i.imgur.com/WcCCllc.png" height="75%">