Link - Custom Theme for Relics of Avabur - Stylish

@-moz-document domain("www.avabur.com") {
/* This is a theme for the game Relics of Avabur. I use Stylish, which requires Google Chrome or Firefox. Just install Stylish, then Create New Theme, and then Import Mozilla Format, copy this, paste it, Overwrite Style, save, and go.

Credit also goes to Reltorakii and his Relics of Avabur - Rewamped themes. If it wasn't for his code, this wouldn't even be possible. Link: https://userstyles.org/styles/123685/relics-of-avabur-rewamped


*/

.toprounder, .toprounder15
{
    box-shadow: none !important;
}

/* here be tables like clan member lists and shit */
#accountActivityTable > .row:nth-child(odd), #clanMemberList tr:nth-child(odd), #clanActivityTable>.row:nth-child(odd), #onlineStaff tr:nth-child(odd), #onlinePlayers tr:nth-child(odd), #myClanDonationTable tr:nth-child(odd), #myClanDonationTable tr:nth-child(odd), .marketListings tr:nth-child(odd), .marketListings tr:nth-child(odd), #rankingTable tr, #milestoneTable tr, .marketListings tr, #inventoryTable tr, #accountReferralTable tr, #fameShopPurchaseTable tr, #clan_list tr:nth-child(odd), .bossParticipantList tr:nth-child(odd), .sorted_table tr:nth-child(odd), .full tr:nth-child(odd), td[class^="calendar-day"]:nth-child(odd), .shortActivitySection > .row:nth-child(odd), #confirmButtons > .button.green
{
    background: linear-gradient( to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
    border: 1px rgba(100,220,100,.9) solid !important; /* color 2 */
}
#accountActivityTable > .row:nth-child(even), #clanMemberList tr:nth-child(even), #clanActivityTable>.row:nth-child(even), #onlineStaff tr:nth-child(even), #onlinePlayers tr:nth-child(even), #myClanDonationTable tr:nth-child(even), #myClanDonationTable tr:nth-child(even), .marketListings tr:nth-child(even), .marketListings tr:nth-child(even), #clan_list tr:nth-child(even), .bossParticipantList tr:nth-child(even), .sorted_table tr:nth-child(even), .full tr:nth-child(even), td[class^="calendar-day"]:nth-child(even), .shortActivitySection > .row:nth-child(even)
{
    background: linear-gradient( to right, rgba(20,20,20,.8) 0%, rgba(20,20,20,.8) 100%) !important;
    border: 1px rgba(100,220,100,.9) solid !important; /* color 2 */
}
#myClanDonationTable, #onlineStaff td, #onlinePlayers td, .dataTable thead th, .marketListings td, .marketListings th, #myClanDonationTable td, #myClanDonationTable td, .marketListings td, .marketListings td, .bossParticipantList td, .sorted_table td, .full td, td[class^="calendar-day"]
{
    background: linear-gradient( to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
border: 1px rgba(100,220,100,.9) solid !important; /* color 2 */
}
select option
{
    background: rgba(0,0,0,0.75) !important;
}
#chatMessageListWrapper, #modalBackground /* chat box */
{
    background: transparent -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: transparent -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;

}
#areaWrapper.fatigued
{
    /* fatigue thingy if you have the setting that changes colors if you get fatigued, the first two colors in each line should be color 2 or red (100, 0, 0) */

    background: -moz-linear-gradient(top, rgba(100,220,100, 0.75) 0%, rgba(100,220,100,.5)7%, rgba(255,255,255, 0.5) 8%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(100,220,100, 0.75) 0%, rgba(100,220,100,.5)7%, rgba(255,255,255, 0.5) 8%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(100,220,100, 0.75) 0%, rgba(100,220,100,.5)7%, rgba(255,255,255, 0.5) 8%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
}
.closeModal, .spellCircle, .closeCustomWindow
{
    /* this is the circle for x-ing out open thingies */

    background: -moz-radial-gradient(center, ellipse cover, rgba(100,220,100, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(100,220,100, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(135,188,255, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    border: 1px solid rgba(140,200,120, 0.25) !important; /* color 1 */
    box-shadow: 0px 0px 10px rgba(100,220,100, 0.75) !important;} /* color 2 */

/* event damage bubble */ .badcircle {
    background: -moz-radial-gradient(center, ellipse cover, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    border: 1px solid rgba(255,255,255, 0.25) !important;
    box-shadow: 0px 0px 10px rgba(255,255,255, 0.75) !important;}

/* event healing bubble */ .goodcircle {
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    border: 1px solid rgba(255,255,255, 0.25) !important;
    box-shadow: 0px 0px 10px rgba(255,255,255, 0.75) !important;}

div.day-number {
    background: rgba(0,0,0,0.4);
    border-left: 1px solid  #8C7 !important;  /* color 1, in triple hex */
    border-bottom: 1px solid  #8C7 !important;
    width: 30px;
}

/* these are the headers. all colors not black in the gradients need to be color 1 */
h1, h2, h3, h4, h5, h6, .customWindowContent thead th, #NoAConfig_header {
    background-color: transparent !important;
    font-weight: bold;
    color: rgba(140,200,120, .9) !important; /* color 1 */
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9) !important;
background: -moz-linear-gradient(top, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);
background: linear-gradient(to bottom, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);
}

#confirmBox h1 {
background: -moz-linear-gradient(top, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);
background: linear-gradient(to bottom, rgba(140,200,120,0.9) 0%, rgba(140,200,120,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(140,200,120,.9) 98%, rgba(140,200,120,0.9) 100%);

}
/* shadow color for names in chat I suppose */
#chatMessageList .profileLink {
    text-shadow: 0 0 9px rgba(100,220,100, 0.9) !important; /* color 2 */

}
/* that one stupid teal line in the middle of the house menu that had me stumped for months. */
#houseQuickBuildList li:nth-last-child(2) {
    border-top: 1px rgba(100,220,100,.9) solid !important; /* color 2 */
}
 /* a line in the dungeon map stuff */

#dungeonMap { border-bottom-color: rgba(140,200,120,.9);} /* color 1 */

.chat_invert {
   /* this is the gradient for being @'d, in color 2 */
background: -moz-linear-gradient(top, rgba(100,220,100,1) 0%, rgba(100,220,100,0.65) 4%, rgba(100,220,100,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(100,220,100,0.65) 93%, rgba(100,220,100,0.65) 96%, rgba(100,220,100,1) 100%);
background: -webkit-linear-gradient(top, rgba(100,220,100,1) 0%, rgba(100,220,100,0.65) 4%, rgba(100,220,100,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(100,220,100,0.65) 93%, rgba(100,220,100,0.65) 96%, rgba(100,220,100,1) 100%);
background: linear-gradient(to bottom, rgba(100,220,100,1) 0%, rgba(100,220,100,0.65) 4%, rgba(100,220,100,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(100,220,100,0.65) 93%, rgba(100,220,100,0.65) 96%, rgba(100,220,100,1) 100%);
}


/* I forgot. Just leave it alone */
#helpSection a, .navSection a, #confirmBox p, .customWindowContent .bRight, .customWindowContent tbody, .customWindowContent th {
    border-color: rgba(0,0,0, 0.6) !important;

}

#xpBar {
    border: 1px rgba(140,200,120,.9) solid !important; /* color 1 */
background: transparent !important; }


/* tooltips */
#profileOptionTooltip, #statTooltip, #currencyTooltip, #itemTooltip, #itemEquippedTooltip, #toolTooltip, #gemTooltip, #updateCount, #levelTooltip, #promoActive, .separator {
    background: rgba(0,0,0,.8) !important;
    border: 2px rgba(140,200,120, 0.9) solid !important; /* color 1 */
color: rgba(255,255,255,.9) !important;
text-shadow: 0 0 9px rgba(0,0,0,.9) !important;
}
/* stamina number */
.actionTimer, #autosMaximum, #autosRemaining, #areaWrapper > h5 > div{
    color: rgba(140,200,120, 0.8) !important; /* color 1 */
font-weight: bold !important;
text-shadow: 0 0 6px rgba(0,0,0,.9) !important;
}
 #autosBuffer {
    color: rgba(100,220,100,.9) !important; /* color 2 */
 font-weight: bold !important;
              text-shadow: 0 0 6px rgba(0,0,0,.9) !important; }

/* table headers */
 #rankingTable tr, #milestoneTable tr, .marketListings tr, .marketListings tfoot tr th, .marketListings thead tr th, #inventoryTable tr, .invTypeHeader, #accountReferralTable tr, #fameShopPurchaseTable tr, #myClanDonationTable thead tr th, #myClanDonationTable tfoot tr th, .bossParticipantList tr, #onlinePlayers thead tr th,  #onlineStaff thead tr th, .sorted_table th, #clanMemberList thead th, .bossParticipantList thead tr th, .sorted_table tr {
        border: 1px rgba(100,220,100, 0.9) solid !important; /* color 2 */
               background: rgba(0,0,0,.7) !important;


}

/* major borders */
.border2, .currentPage, #chatMessage, #chatChannel, input[type="button"], input[type="submit"], input[type=text], input[type="password"], input[type="submit"], input[type="email"], input[type="number"], input[type="search"], textarea, .btn-primary, select, .dropdown-menu, .page_link, .milestoneBarWrapper, .xpCircle, #tradeXPBar, #confirmBox, .customWindowContent thead th, #houseXPBar, #eventCountdown, .sorted_table th, #NoAconfig_saveBtn, #NoAconfig_closeBtn {
    background: rgba(0,0,0,.7) !important;
    background: transparent !important;
    border-color: rgba(140,200,120, 0.9) !important; /* color 1 */
}
/* borders and backgrounds */
.bt1, .border2, .ui-element, input[type="button"], input[type="submit"], .page_link, #updateCount, #promoActive, .xpCircle, #confirmBox, #confirmBox p, #modalWrapper, #eventCountdown
{
    background: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.8) 100%) !important;
border: 1px rgba(140,200,120,.9) solid !important; /* color 1 */
}
/* inputs and stuff */
div.editable, select, .dropdown-menu, input[type=text], input[type="password"], input[type="email"], input[type="number"], #chatChannel, #chatMessage, textarea, .btn-primary, .milestoneBarFillIncomplete {
    background: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
}
/* Account Management etc */
#accountLinks li {
    background: transparent !important;
    border-width: 0px 0 1px 0;
    border-color: rgba(0,0,0, 0.6);
    border-top-color: rgba(0,0,0, 0.75);
    border-bottom-color: rgba(140,200,120,.9); /* color 1 */
}

/* side buttons */
.navSection li, #helpSection li, #gameStatList li {
    background: transparent !important;
    border-top: 1px rgba(0,0,0, 0) solid !important;
}

#moreStatsLinkWrapper {
    background: transparent !important;
    border: 1px rgba(0,0,0,0) solid !important;
}
 #eventCalendarLink {
              background: transparent !important;
              border: 1px rgba(0,0,0,0) solid !important;
          }
/* button hovers */
.navSection a:hover, #helpSection a:hover, #onlineList > li:hover, #moreStatsLinkWrapper:hover, #accountLinks>a>li:hover, #bq_flasher:hover, input[type="button"]:hover, input[type="submit"]:hover, .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover, .dropdown-menu > li > a:hover, .page_cur, a>h5:hover, #eventCalendarLink:hover, #NoAconfig_saveBtn:hover, #NoAconfig_closeBtn:hover, #confirmButtons > .button.green:hover {
    background: linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 100%) !important;
border: 1px rgba(100,220,100,.9) solid !important; /* color 2 */
color: rgba(140,200,120,.9) !important; /* color 1 */
}

/* just XP bars. I wouldn't touch this. */
#xpFill, #tradeskillXPFill, .PlayerHPFill, .milestoneBarFillComplete, #tradeXPFill, #houseXPFill {
    background: linear-gradient(to right, rgba(65, 65, 65, .90) 0%, rgba(55,55,55, .80) 100%) !important;
}

/* links, of course */
a, a:link, a:visited, #NoAConfig_resetLink, #NoAConfig_resetLink:link, #NoAConfig_resetLink:visited {
    color: #ffffff !important;
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9) !important;
}
/* link hovering... */
a:active, a:hover, #NoAConfig_resetLink:hover, #NoAConfig_resetLink:active {
    color: rgba(140,200,120,.9) !important; /* color 1 */
}

/* the actual background */
body {
    background: url(https://i.imgur.com/EozNXZt.png) no-repeat center center fixed !important;
    background-color: rgba(0,0,0, 1) !important;
    -webkit-background-size: cover;
    /* For WebKit*/
    -moz-background-size: cover;
    /* Mozilla*/

    -o-background-size: cover;
    /* Opera*/

    background-size: cover;
    /* Generic*/
color: #FFFFFF;
text-shadow: 0 0 9px rgba(0,0,0,.95);
    --scrollbar-color: rgba(100,220,100, 0.65) !important; /*color 2 */
    --scrollbar-background: rgba(100,220,100, 0.1) !important; /*color 2 */

}
/* this is the background for the top stats list and stuff. I recomment leaving this alone. This is just to make it transparent. */
#statsAndStuff { background: transparent }

#statsTable, #resourcesTable, #tradesTable, #attrTable, #skillTable { background: transparent !important;}
}