body
{
margin: 0;
font: 300 18px/1.5 "Helvetica Neue", Arial, sans-serif;
letter-spacing: .5px;
}

header span
{
visibility: hidden;
}

strong
{
font-weight: 700;
}

a
{
color: inherit;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-bottom: 1px solid;
-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;
}

a:hover
{
color: #fff;
}

h1
{
width: 100%;
height: 100px;
margin: 0;
font-stretch: condensed;
line-height: 1.8;
font-size: 3em;
text-align: center;
}

#yayblueprint
{
font-stretch: condensed;
line-height: 1;
font-size: 2.5em;
font-weight: bold;
}

#welcome
{
height: 500px;
background: #f2dc4e url(illust-1.jpg) no-repeat 9% center;
}

header
{
position: relative;
left: 25%;
bottom: -70%;
width: 225px;
height: 225px;
-webkit-border-radius: 230px;
border-radius: 225px;
background: rgba(188, 204, 77, 0.8) url(title.png) no-repeat 25px center;
}

.content
{
padding: 4%;
}

section
{
padding-bottom: 9%;
}

#welcome .content
{
position: absolute;
width: 36%;
right: 9%;
top: 18%;
padding: 2em;
font-size: 24px;
line-height: 1.4;
word-spacing: -.5px;
background-color: #bccc4d;
color: #edfff8;
}

#intro, #cameos
{
background-color: #f8741c;
}

#intro h1, #cameos h1
{
background-color: #f4b23a;
color: #ed5011;
}

#intro .content
{
width: 45%;
margin: 9% 0 0 9%;
background-color: #ed5011;
color: #f2dc4e;
}

#illust-2
{
width: 500px;
height: 800px;
background-image: url(illust-2.png);
position: absolute;
left: 58%;
margin-top: 500px;
}

#profile
{
font-size: .7em;
margin-left: -18%;
margin-bottom: 4em;
}

#profile dt
{
font-weight: bold;

}

#profile dd
{
margin-top: -1.5em;
margin-left: 330px;
}

.conversion
{
border-bottom: 1px dotted;
}

#profile img
{
display: block;
float: left;
margin-right: 1.5em;
}

#profile div
{
background-color: #f8741c;
width: 85%;
margin-left: 15%;
padding: .5em 4em;
}

#looks, #appendix
{
background-color: #bccc4d;
}

#looks h1, #appendix h1
{
background-color: #d4a839;
color: #ed5011;
}

#looks .content
{
background-color: #72bb3a;
color: #f9f35c;
margin: 9%;
width: 74%;
min-height: 460px;
position: relative;
}

#illust-3
{
width: 100%;
height: 573px;
background: url(illust-3.jpg) no-repeat center center;
margin: -10% auto;
}

#turnaround
{
width: 468px;
height: 422px;
float: left;
background-image: url(turnaround.jpg);
position: absolute;
}

#turnaround a
{
position: absolute;
display: block;
border: 3px solid #f9f35c;
width: 55px;
height: 55px;
border-radius: 55px;
cursor: help;
text-decoration: none;
opacity: 0;
-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;
}

#turnaround a:hover
{
opacity: 1;
}

#turnaround a#face1
{
left: 187px;
top: 26px;
}

#turnaround a#face2
{
left: 48px;
top: 26px;
}

#turnaround a#tattoo
{
left: 187px;
top: 65px;
}

#turnaround a#arm1
{
left: 82px;
top: 105px;
}

#turnaround a#arm2
{
left: 293px;
top: 105px;
}

#turnaround a#crotch
{
left: 48px;
top: 151px;
}

#turnaround a#vents1
{
left: 188px;
top: 203px;
}

#turnaround a#vents2
{
left: 177px;
top: 284px;
}

#turnaround a#skates1
{
left: 10px;
top: 327px;
}

#turnaround a#skates2
{
left: 87px;
top: 327px;
}

#turnaround a#skates3
{
left: 178px;
top: 327px;
}

#turnaround a#skates4
{
left: 285px;
top: 327px;
}

#turnaround a#skates5
{
left: 364px;
top: 327px;
}

#turnaround a#back
{
left: 325px;
top: 64px;
}

.slickbox
{
display: none;
position: absolute;
margin-left: 468px;
margin-right: 4%;
}

.slickbox#default
{
display: block;
}

#personality
{
background-color: #f2dc4e;
position: relative;
}

#personality h1
{
background-color: #dcd54d;
color: #72bb3a;
}

#personality .content
{
background-color: #bccc4d;
color: #edfff8;
margin: 9%;
width: 45%;
}

#personality #part1
{
position: absolute;
top: 4.5%;
right: 0;
}

#personality #part2
{
margin-top: -4.5%;
position: relative;
z-index: 10000;
}

blockquote
{
font-style: italic;
}

#illust-4
{
width: 450px;
height: 596px;
background-image: url(illust-4.jpg);
margin: 14% 9% 9% 3%;
left: 0;
}

#illust-5
{
position: absolute;
right: 0;
bottom: 0;
width: 500px;
height: 1104px;
background-image: url(illust-5.jpg);
}

#cameos .content
{
background-color: #ed5011;
color: #f2dc4e;
margin: 9%;
}

#cameos #idle
{
float: right;
margin-left: 1.5em;
}

#cameos #gally
{
float: left;
margin-top: -9%;
margin-right: 1.5em;
}

#appendix
{position: absolute;}

#appendix .content
{
background-color: #72bb3a;
color: #f9f35c;
margin: 9% 9% 0 9%;
width: 45%;
position: relative;
}

#illust-6
{
position: absolute;
right: 0;
bottom: 0;
width: 450px;
height: 901px;
background-image: url(illust-6.jpg);
}

.conversion, .infotip
{
cursor: help;
}

 /* .infotip q, .infotip span
{
display: none;
} */

.infotip
{
font-size: 1.2em;
line-height: 0;
color: #fff;
margin: 0 -2px;
width: 50px;
}

.infotip q, .infotip span
{
opacity: 0;
display: inline-block;
position: absolute;
margin-top: 1em;
white-space: pre;
font-style: italic;
line-height: 1;
padding: .5em;
background-color: #fff;
color: #72bb3a;
font-weight: bold;
font-size: .6em;
z-index: 1000;
-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;
}

.infotip q:hover, .infotip span:hover
{
opacity: 0 !important;
cursor: text !important;
}

.infotip:hover q, .infotip:hover span
{
opacity: 1;
}

.slashversions
{
text-align: center;
}

.slashversions img
{
margin: .5em;
}

.banners a
{
border-bottom: none;
}