stripe layout, pet image circle, no stats

<!-- layout divs -->
<div id="stripe"></div><div id="innerstripe"></div>

<!-- navigation -->
<div id="navpos">
<a class="navtab" id="tab1" href="#one">I.</a>
<a class="navtab" id="tab2" href="#two">II.</a>
<a class="navtab" id="tab3" href="#three">III.</a>
<a class="navtab" id="tab4" href="#pet_treasure">IV.</a>
<a class="navtab" id="tab5" href="#credits">V.</a>
</div>



<!-- first content box -->
<div id="one">
Lorem ipsum dolor sit amet, modo accusam erroribus quo id. Summo virtute eam eu, et nec regione ancillae. Commune fabellas ad cum, agam paulo persius et mel. Ei feugiat evertitur eum, mel te regione neglegentur, offendit fabellas consetetur ex duo. Legere atomorum consequat sed no, ius causae tractatos an. An nam sumo malorum necessitatibus.
<p>
Sea honestatis consectetuer delicatissimi ut, id debet nostrum sit. Vis ut fierent deterruisset, no qualisque definitionem sed. Eu quo cetero alterum quaestio, commune inciderint ne ius, graece latine omittam vim ne. Eum no choro explicari, duo justo intellegam ea, etiam cotidieque pri no.
<p>
Mea et falli scripta, omnes posidonium ad vel. Cu vix mundi fabulas graecis, mea id diam repudiare definitionem. Ne legendos maluisset definiebas sea. An sed labores molestie, an mutat gubergren complectitur qui.
<p>
Iriure expetenda reformidans eum ad, et putant posidonium duo. Reque possim eum ei, vix ei inani falli. Vim et aeque nihil, in sea solet erroribus. Et ornatus definitionem ius, eum quas ludus feugiat ei. Eam ad atqui petentium.
<p>
Mazim phaedrum te cum, eu sea purto iisque apeirian. Ignota quaestio ea eum, cu dicunt repudiare cum. Ne vel postulant argumentum ullamcorper, maiorum dignissim incorrupte eum te, velit nemore nostrum ad vel. Diam natum detracto at eum. Ei duo quis augue, te decore omnium veritus cum. Aeterno philosophia mediocritatem nec ea, equidem quaestio id pri, pro vidit error nostrud at.

</div>



<!-- second content box -->
<div id="two">
<h2>h2</h2> ___<br>
<h2>h2</h2> ___<br>
<h2>h2</h2> ___<br>
<h2>h2</h2> ___<br>
<div class="hr"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</div>



<!-- third content box -->
<div id="three">

<div class="friendleft"><a href="/pets/PETNAME"><img src="https://img.subeta.net/pets/hipottu.png"><h3>PETNAME</h3></a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</div>
<br>

<div class="friendright"><a href="/pets/PETNAME"><img src="https://img.subeta.net/pets/bhakoru.png"><h3>PETNAME</h3></a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</div>
<br>

<div class="friendleft"><a href="/pets/PETNAME"><img src="https://img.subeta.net/pets/ontra.png"><h3>PETNAME</h3></a><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</div>

</div>



<!-- credits -->
<div id="credits"><center>
Profile template by [user=Lea].
</center>

</div>


<style>
@import url(https://fonts.googleapis.com/css?family=Lemon);

/* fonts
       ------------------------------------------ */

.pet_name{font-family: 'Lemon', trebuchet ms;
font-size: 40px;
font-weight: normal}
.pet_name::first-letter{font-size: 45px}
td, p, body, div{font-size: 12px;
font-family: 'Tahoma', sans-serif}
h2{font-size: 13px !important;
line-height: 13px}
.navtab{font-family: 'Lemon';
font-size: 15px}

/* backgrounds and colors
       ------------------------------------------ */

body{background-repeat: repeat;
background-image: url("http://static.colourlovers.com/images/patterns/5721/5721640.png");
background-color: #c4c4c4}


#stripe{background-color: #d8d8d8;
border-color: #a9a9a9}
#stripe, #pet_image, #pet_treasure{box-shadow: 0 0 7px rgba(0, 0, 0, 0.25)}
#innerstripe{background-color: #f7f7f7}

#pet_info{color: #555555;
text-shadow: 1px 1px rgba(0, 0, 0, 0.25)}
h2{color: #aaaaaa;
text-shadow: 1px 1px rgba(0, 0, 0, 0.15)}
a:link, a:active, a:visited{color: #777777}
a:hover{color: #999999}

#column_3 ul li:nth-child(1), #column_3 ul li:nth-child(7){color: #686868}
#column_3 ul li:nth-child(2), #column_3 ul li:nth-child(6){color: #7b7b7b}
#column_3 ul li:nth-child(3), #column_3 ul li:nth-child(5){color: #8d8d8d}
#column_3 ul li:nth-child(4){color: #a0a0a0}

.icon.heart{color: #ffffff}
.icon.heart.red{color: #ffffff !important}
.icon.heart:hover{color: #f0f0f0}

.pet_name{color: #ffffff;
3px 3px rgba(0, 0, 0, 0.25)}

.hr{background: -webkit-linear-gradient(left, transparent, #d8d8d8, transparent)}

#pet_minion, #pet_minion img{background-color: rgba(255, 255, 255, 0.75);
border-color: #b0b0b0}

.navtab{text-shadow: 1px 1px #ffffff;
background-color: #f7f7f7;
border-color: #ffffff;
box-shadow: 0 0 0 1px #b0b0b0}

#tab1, #tab2, #tab3, #tab4, #tab5{color: #999999}


::-webkit-scrollbar-thumb{background: -webkit-linear-gradient(top, #d8d8d8, #f7f7f7, #d8d8d8);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
border: 1px solid #999999}
::-webkit-scrollbar-track{background-color: #f7f7f7;
border: 1px solid #e3e3e3}

.friendleft a h3, .friendright a h3{border-bottom-color: #f0f0f0}


/* navigation
       ------------------------------------------ */
#navpos{position: fixed;
top: 175px;
left: 635px;
z-index: 2}
.navtab{position: relative;
top: 0px;
padding: 10px 20px 25px 20px;
border-width: 1px;
border-style: solid;
text-align: center;
border-radius: 25px 25px 0px 0px;
margin-right: 10px}
.navtab:hover{position: relative;
top: -5px}


/* unsorted
       ------------------------------------------ */

#stripe{height: 195px;
width: 100%;
position: fixed;
top: 250px;
left: 0px;
border-width: 5px 0px 5px 0px;
border-style: solid;
z-index: 1}

#innerstripe{height: 105px;
width: 100%;
position: fixed;
top: 300px;
left: 0px;
z-index: 2}

#one, #two, #three, #pet_treasure, #credits{position: fixed;
top: 200px;
left: 600px;
height: 300px;
width: 400px;
overflow: auto;
background: #ffffff;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
z-index: 4}
#one{z-index: 5}
#one:target, #two:target, #three:target, #credits:target, #pet_treasure:target{z-index: 6}

.pet_spotlight{height: 95px;
width: 110px;
position: fixed;
top: 307px;
left: 400px;
border-radius: 20px;
z-index: 4;
margin: 0px;
text-transform: lowercase}
.pet_spotlight img{border-radius: 10px}

/* transitions
       ------------------------------------------ */
a, a:hover, .icon.heart, .icon.heart:hover{transition: all 1s ease}
.navtab, .navtab:hover{transition: all .5s ease}
#pet_minion, #pet_minion:hover{transition: all .5s ease}


/* pet info
       ------------------------------------------ */
#pet_image{height: 300px;
width: 300px;
border-radius: 50%;
background-color: #ffffff;
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: 200px;
left: 10px;
z-index: 3}

.pet_name{position: fixed;
top: 255px;
left: 300px;
width: 300px;
height: 50px;
line-height: 50px;
z-index: 5}

.pet_color_info, .owner{position: fixed;
left: 305px;
width: 290px;
z-index: 3}
.pet_color_info{top: 407px}
.owner{top: 436px}

.pet_like{position: fixed;
top: 422px;
left: 305px;
width: 290px;
margin: 0px;
font-size: 15px;
z-index: 4}

#pet_minion{position: fixed;
top: 455px;
left: 380px;
padding: 10px;
overflow: hidden;
margin-top: -106px;
width: 130px;
height: 116px;
box-sizing: border-box;
border-radius: 0px 0px 20px 20px;
border-style: solid;
border-width: 0px 1px 1px 1px}
#pet_minion:hover{margin-top: 0px}
#pet_minion img{border-radius: 10px;
border-width: 1px;
border-style: solid;
margin-top: -15px}

#pet_stats{display: none}

/* friends
       ------------------------------------------ */
.friendright img{float: right;
padding-left: 10px}
.friendleft img{float: left;
padding-right: 10px}
.friendright img, .friendleft img{height: 120px;
width: 120px}
.friendright, .friendleft{height: 120px;
padding: 5px}

.friendright a h3, .friendleft a h3{border-bottom-width: 1px;
border-bottom-style: dashed;
text-align: center;
width: 210px;
padding-bottom: 2px;
margin-bottom: 5px}

/* treasure chest
       ------------------------------------------ */
.treasure_item_name{display: block;
font-size: 10px}
.treasure_item{margin: 5px;
height: 120px;
width: 100px;
padding-top: 5px}
.treasure_item:hover{pointer-events: none}



/* misc
       ------------------------------------------ */
#pet_minion b{font-weight: normal}

::-webkit-scrollbar{width: 10px}
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb{border-radius: 8px}

.rightimg{float: right;
padding-left: 5px}
.leftimg{float: left;
padding-right: 5px}

.pet_color_info, .owner{text-transform: lowercase}

td, p, body, div{line-height: 13px}
li{line-height: 14px}

.hr{width: 100%;
margin-top: 15px;
margin-bottom: 15px;
height: 1px}

.icon.heart{opacity: 1}
.icon.heart.red{opacity: 0.5}

h2{display: inline-block;
font-weight: normal;
padding-right: 2px}
h3{display: inline-block;
font-weight: bold;
margin: 0px;
font-size: 14px !important}


/* removing the main site layout
       ------------------------------------------ */

#postcards, #menu, #sidebar, #rightbg, #bookmarks, #footer, #column_2 h2, #column_1 h2, #column_3 h2, .statbar, .pet_wco_info_date, .pet_age_info_date, #header, #stat_books_read, #stat_food_eaten, #pet_employment, #column_3 a, .statbar, #pet_friends, .hustler, .owner img, #pet_treasure h2{display: none}
#page, #header-lrc, #header-ban, #header-ban-main, #header-rrc, html{background: transparent}
#pet_minion{text-indent: -9999px}
#pet_info a:hover{text-decoration: none}
#main-content{background-image: none}
#content{overflow: hidden;
background: transparent}

body{overflow: hidden}

</style>