SPOILER (click to toggle)
<style>
html:not(.cufon-ready) * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
, , , -bubble-wrapper, ,
, , , h2 { display: none; }
body {
background-image: url(http://i.imgur.com/MbX0dpG.png);
background-repeat: repeat-y; background-position: 100px 0;
background-color: ;
font-family: Palatino, serif; font-size: 12px;
}
{
background: url(http://i.imgur.com/SqLB8Gx.png)
no-repeat transparent !important;
min-height: 650px;
margin-left: 100px !important;
}
h1, h2, a { font-family: Palatino, serif; }
a, a:link, a:visited { color: ; }
a:hover { color: ; text-decoration: none; }
, , .container-fluid, , .pet_spotlight,
, , {
width: auto; height: auto !important;
margin: 0; padding: 0;
background: transparent;
}
{
position: relative;
margin-left: 70px; padding: 150px 0 0 30px;
width: 460px; min-width: 0;
}
, {
position: absolute; left: -154px;
width: 0;
padding: 0 0 0 27px; margin: 0 0 0 125px; overflow: hidden;
background: ; border-radius: 1em 0 0 1em;
border: 1px solid ; box-shadow: 0 0 1px ;
color: ;
-webkit-transition: width 1s 1s, margin 1s 1s, height 1s, max-height 1s;
-moz-transition: width 1s 1s, margin 1s 1s, height 1s, max-height 1s;
-o-transition: width 1s 1s, margin 1s 1s, height 1s, max-height 1s;
transition: width 1s 1s, margin 1s 1s, height 1s, max-height 1s;
}
:hover, :hover {
width: 125px; margin: 0;
-webkit-transition: width 1s, margin 1s, height 1s 1s, max-height 1s 1s;
-moz-transition: width 1s, margin 1s, height 1s 1s, max-height 1s 1s;
-o-transition: width 1s, margin 1s, height 1s 1s, max-height 1s 1s;
transition: width 1s, margin 1s, height 1s 1s, max-height 1s 1s;
}
h2, h2 {
display: block; -webkit-transform: rotate(-90deg);
position: absolute; left: -20px;
}
{ top: 200px; z-index: 1; height: 143px; }
:hover { height: 200px; }
h2 { top: 60px; }
br { display: none; }
{ margin: 10px 4px 7px 0; text-align: right; }
li { width: 121px; line-height: 1.5em; }
.statbar {
display: inline-block;
width: 42px; height: 9px !important;
margin: -5px 0 0 1px; vertical-align: middle;
border-color: ; background-color: ;
}
.stat { height: 9px; background-color: ; }
{ margin-bottom: 4px; }
, ,
{ text-align: center; }
a:nth-child(5) { display: none; }
{
top: 360px; z-index: 0;
min-height: 143px; max-height: 143px;
}
:hover { max-height: 1000px; }
h2 { width: 100px; left: -35px; top: 55px; }
.friend_div { height: auto; margin: 12px 0 0 5px; padding-bottom: 0; }
:hover .friend_div:last-child { padding-bottom: 13px; }
{ position: relative; left: 60px; }
img, a[href^='/users/'] img { vertical-align: baseline; }
{ position: absolute; right: 30px; top: 280px; width: 143px; }
img { margin: 1em; }
{ float: right; width: 20px; height: 80px; }
{ margin-top: 2.5em; }
ul { padding: 0; }
li { line-height: 1.5em; }
{
position: absolute; top: 620px; left: 567px;
width: 140px;
}
.treasure_item:nth-child(2n) { margin: 0 12px 12px 0; }
</style>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum lacus in augue scelerisque, nec viverra tortor adipiscing. Quisque convallis nulla viverra ipsum sodales, non pulvinar leo faucibus. Aliquam at lacinia erat, sed pulvinar nisl. Donec ac dignissim odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur lobortis leo ac leo lobortis auctor. Nam ut feugiat arcu. Duis mollis rhoncus elit non rhoncus. Ut sed odio vel enim adipiscing molestie. In semper risus ac purus pharetra gravida a in arcu. Vestibulum augue ligula, porttitor et diam a, pretium tempus nisi. Donec fermentum, urna eget tristique lobortis, nisi erat mattis sem, porttitor luctus quam lorem feugiat libero. Donec tincidunt nunc lectus, sed consequat magna eleifend in. Morbi tincidunt venenatis felis vitae dictum.
Quisque tempor arcu eu orci commodo malesuada. Suspendisse orci mauris, ornare ut aliquam sed, luctus eget libero. Phasellus varius leo a nulla tincidunt pretium. Aliquam aliquam dignissim tempus. Donec et semper neque. In consequat sit amet eros sit amet iaculis. Quisque eget nisi massa. Donec auctor, ante vitae malesuada gravida, tortor eros auctor lorem, a bibendum nisl eros et neque. Aenean ut lectus placerat, condimentum libero ut, sodales metus. Nulla varius convallis ipsum, id feugiat dui convallis vitae. Nulla non posuere justo. Vestibulum ac scelerisque massa, quis ullamcorper ligula. Nam auctor tristique nunc, a luctus arcu dapibus eget.
Aliquam mollis viverra erat ut ullamcorper. Proin lacinia nunc sit amet sollicitudin scelerisque. Vestibulum id hendrerit nibh, eu convallis est. Praesent vel tellus risus. Aliquam elementum hendrerit mattis. Sed et luctus metus. Etiam condimentum sit amet nibh nec cursus. Sed tellus augue, euismod quis volutpat nec, pretium quis quam. Nunc vestibulum nulla vitae mi commodo vulputate. Vivamus eu lectus ut nulla aliquam dapibus. Integer sagittis nisi quis nunc consequat ultricies nec at leo. Aenean sollicitudin eros ac interdum vestibulum.
Nam non varius tortor. Morbi dignissim ante a augue semper, non rutrum orci hendrerit. Cras feugiat magna augue, id facilisis elit fringilla a. Fusce lacinia orci nibh, vel sollicitudin odio dignissim quis. Sed cursus gravida sapien vel rhoncus. Cras pulvinar vitae elit ac facilisis. Nulla eu pulvinar massa. Quisque dignissim massa sit amet eleifend auctor. Suspendisse accumsan ante quis laoreet euismod. Fusce ac ipsum elit.
Phasellus vitae condimentum arcu. Vestibulum et quam sit amet elit condimentum tincidunt. Duis at porta quam, ac bibendum quam. Donec ultricies nibh sapien, nec bibendum mi feugiat vel. Ut volutpat sagittis magna. Nunc sit amet eleifend magna. Sed tortor diam, aliquet ac venenatis mattis, lacinia eu dolor. Vestibulum dapibus nulla eu molestie luctus. Ut quis mollis ligula.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Nunc non nulla eget tortor dictum pulvinar quis sed odio.
- Sed sit amet dolor egestas, venenatis sem in, viverra odio.
I've edited (and split) your image, so you'll want to rehost the new versions. Let me know if you want any changes—the tabs are a little more complicated than you asked for; it's the best way I could think of to use the space. Sorry about the long turnaround time.
: Just put your text in the 'Update Description' form, right after your styling (or right before, doesn't matter). Everything that goes in there shows up in the description area on the pet's profile.
: Find the place in your CSS where it says [font=Courier] {[/font]. You have [font=Courier]top: 315px; left: -70px;[/font]—you want [font=Courier]top: 277px; left: -74px;[/font]. Then, add the line [font=Courier] img { margin-top: -17px; }[/font].
The positioning'll hide the box on the minion well enough, since its edges are inside the circle. The pet is a little harder—those boxes are there because the pet and minion images have white backgrounds; you can't get rid of them just with CSS. What you can do is use Photoshop or an image editing program to give the image a transparent background, then use that as an overlay in the usual way.
;){kind=link}
;){kind=link}
