tester by 21kkn

/* ==UserStyle==
@name           www.goatlings.com - 10/12/2022, 12:46:44 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("www.goatlings.com") {
   body { margin: 0; background: url("https://i.imgur.com/YWXS7RL.png"); font-family: Arial; font-size: 12px; color: #604325;}

table, tr, td { font-size: 12px;}



#wrapper { position: relative; padding: 0; margin: 0 auto; width: 940px; background: #ffffcd; }

#sidebar { position: relative; float: left; margin-right: 30px; width: 100px; padding: 5px;}

#content { position: relative; float: left; background: #FFF; width: 760px; border-radius: 4px 4px 4px 4px; margin: 5px; padding: 10px; min-height: 500px;}

.reset { clear: both; }

.navlink { margin: 2px;}

#user-info { float: left; width: 500px; }

#user-info-points { float: right; }

#user-info-wrap { padding: 10px; }

.search-mid { background: url("../images/layout/search_m.png"); width: 128px; color: #FFF; text-align: center;}

#footer { text-align: center; padding: 5px;}

.small-text { font-size: 10px; }

a { text-decoration: none; color: #1aa0e3; font-weight: bold; }

.center { text-align: center; }

a:hover { color: #a6d8f1;} 
.profile-box{ position: relative;height: 260px; }
.page-title { border-bottom: 1px solid #ccc5bd;}

.mystuff { display: inline-block; margin: 4px; }

.item-invent { display: inline-block; margin: 4px; text-align: center;}

.item-invent-view { border-radius: 4px 4px 4px 4px; border: 1px solid #ccc5bd; width: 500px; display: inline-block; margin-top: 50px; padding: 5px;} 

.flash_data { border-radius: 4px 4px 4px 4px; border: 1px solid #ccc5bd; padding: 5px;}

.mypets-pet { display: inline-block; border-radius: 4px 4px 4px 4px; border: 1px solid #ccc5bd; padding: 5px; text-align: center; margin: 5px; }

.habase { display: inline-block; margin: 5px; }

.mail-message { border-radius: 4px 4px 4px 4px; border: 1px solid #000; padding: 5px; margin: 5px; }

.event { border-radius: 4px 4px 4px 4px; border: 1px solid #ccc5bd; padding: 5px; margin: 5px; }

#header { position: relative; }

#active_pet_image { position: absolute; right: 10px; top: 0px; }

.explore-area { display: inline-block; margin: 5px; }

.table { border: 1px solid #000; padding: 4px; margin: 4px; width: 100%; }

hr { border: none; border-top: 1px solid #633E19;}



/*** Avatat System ***/

.base_area { width: 200px; border: 2px solid #faf497; border-radius: 4px 4px 4px 4px; padding: 5px; margin: 5px;}

.item_area { width: 730px; border: 2px solid #faf497; padding: 5px; border-radius: 4px 4px 4px 4px; margin: 5px;}

.button { border: 1px solid #60513d; background: #897558; padding: 4px; color: #FFF; border-radius: 4px 4px 4px 4px; cursor: pointer;}

.button:hover{ background: #756349; color: #FFF; }

.closetItem { display: inline-block; width: 90px; margin: 5px; vertical-align: top;}

.closetItemImg { cursor: pointer; }

.addBorder { border: 1px solid #000;}



.cs-nav { padding: 5px; border: 1px solid #000; border-radius: 4px 4px 4px 4px; width: 97%; margin-bottom: 10px; text-align: center; }

.cs-area { padding: 5px; border: 1px solid #000; border-radius: 4px 4px 4px 4px;}

.cs-item { display: inline-block; vertical-align: top; margin: 3px; text-align: center;}

.cs-item a { color: #3c8db6;}

.cs-item a:hover { color: #6bb3d7;}



.book-cat { display: inline-block; vertical-align: top; margin: 5px;}

.admin-section { display: inline-block; width: 350px; margin: 5px;}

.doll-info { display: inline-block; border-radius: 4px 4px 4px 4px; border: 1px solid #ccc5bd; padding: 5px; text-align: center; margin: 5px; }

.shopItem {  position: relative; display: inline-block; margin: 4px; text-align: center; width: 100px; vertical-align: top; }

.shopItemA {  position: relative; display: inline-block; margin: 4px; text-align: center; width: 140px; vertical-align: top; }

.table-header { background: #f9e49c; padding: 5px; }



.profile-info { border-radius: 4px 4px 4px 4px; border: 1px solid #cfd093; padding: 5px; width: 720px; margin: 3px; }

.profile-part-one { float: left; margin-right: 5px; width: 550px; }

.profile-part-two { float: left; }



.forum-post { margin: 5px; width: 700px; border-radius: 4px 4px 4px 4px; border: 1px solid #ae8960;}

.forum-post-info { float: left; margin: 2px; padding: 5px; width: 150px; border-right: 1px solid #ae8960;}

.forum-post-message { float: left; margin: 2px; padding: 5px; width: 520px;}

.forum-post-message-bar { text-align: right; width: 510px;}

.forum-reply { padding: 5px; text-align: center;}



.forum-post-small { margin: 5px; width: 540px; border-radius: 4px 4px 4px 4px; border: 1px solid #ae8960;}

.forum-post-message-small { float: left; margin: 2px; padding: 5px; width: 320px;}

.forum-post-message-bar-small { text-align: right; width: 320px;}



#livechat { float: left; width: 570px; }

.livechat-msg { margin: 5px; border-radius: 4px 4px 4px 4px; padding: 5px; border:1px solid #ccac55; width: 550px; float: left; }

#livechat-online { float: left; vertical-align: top; margin: 5px; border-radius: 4px 4px 4px 4px; padding: 5px; border:1px solid #ccac55; width: 150px; }

.pet-profile-box { position: relative; border-radius: 4px 4px 4px 4px; border: 1px solid #cfd093; padding: 5px; width: 200px; float: left; margin: 3px; text-align: center; }

.pet-profile-box-two { position: relative;border-radius: 4px 4px 4px 4px; border: 1px solid #cfd093; padding: 5px; width: 500px; float: left; margin: 3px; }
.pet-profile-box-three { position: relative; border-radius: 4px 4px 4px 4px; border: 1px solid #cfd093; padding: 5px; margin: 3px;  }



.favitem { display: inline-block; margin: 5px; text-align: center;}

.shoparea { display: inline-block; margin: 5px; text-align: center;}

.itema { display: inline-block; margin: 5px; text-align: center;}

.item-hover { display: none; position: absolute; top: -70px; left: -190px; background: #FFF; border: 1px solid #000; border-radius: 4px 4px 4px 4px; width: 200px; padding: 5px;}

.news-post { margin: 5px; width: 750px; border-radius: 4px 4px 4px 4px; border: 1px solid #ae8960; padding: 5px;}

.news-post-who { height: 70px;}

.floatleft { float: left; margin: 2px;}

.bank-area { border-radius: 4px 4px 4px 4px; border: 1px solid #ae8960; padding: 5px;}

.bank-options { float: left; margin: 5px; padding: 5px; width: 300px; }

.HP { color: #d72626;}

#battle_log { border: 1px solid #ae8960; border-radius: 4px 4px 4px 4px;}

.table { border-radius: 4px 4px 4px 4px; border: 1px solid #ccbc85;}





.random_event { margin: 5px; border-radius: 4px 4px 4px 4px; border: 1px solid #392b0d; width: 600px; padding: 5px;}

.random_event_image { float: left; width: 90px; }

.random_event_text { float: left; text-align: center; width: 510px;}



.itemcollect { width: 110px; display: inline-block; border: 1px solid #000; vertical-align: top; padding: 5px; text-align: center; margin: 5px;}



.club-sidebar { border: 2px solid #f48181; padding: 5px; background: #FFFFFF; width: 150px; float: left; margin: 5px; text-align: center;}

.club-area { border: 2px solid #f48181; padding: 5px; background: #FFFFFF; width: 550px; min-height: 300px; float: left; margin: 5px;}

.club-name { background: #f4d881; padding: 5px; text-align: center; font-weight: bold;}

.club-join { background: #f4d881; padding: 5px; text-align: center; font-weight: bold; }



.trade { position: relative; width: 720px; padding: 5px; border-radius: 4px 4px 4px 4px; border: 1px solid #000; margin: 5px; }

.trade-item-a { position: relative;  display: inline-block; vertical-align: top; margin: 5px; width: 110px; }



.support-reply { border: 1px solid #000; margin: 5px; padding: 5px;}

.treasure-tile { display: inline-block; width: 50px; height: 50px; }

.treasure { width: 500px; text-align: center;}

.ss-area { display: inline-block; margin: 10px; width: 100px; vertical-align: top;}



.hp_wrapper { padding: 5px; background: #FFF; border-radius: 4px; border: 1px solid #000; height: 10px; width: 150px; text-align: left; }

.hp_filler { height: 10px; background: #E32044; width: 100px; border-radius: 4px; }



.like-button {

        

        -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;

        -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;

        box-shadow:inset 0px 1px 0px 0px #ffe0b5;

        

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));

        background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);

        background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);

        background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);

        background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);

        background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);

        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);

        

        background-color:#fbb450;

        

        -moz-border-radius:7px;

        -webkit-border-radius:7px;

        border-radius:7px;

        

        border:1px solid #c97e1c;

        

        display:inline-block;

        color:#ffffff;

        font-family:Trebuchet MS;

        font-size:12px;

        font-weight:bold;

        padding:6px 11px;

        text-decoration:none;

        

        text-shadow:0px 1px 0px #8f7f24;

        

    }

    .like-button:hover {

        

        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));

        background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);

        backgro...