Minimalist Villager Profile v1 (alxq #9085)

/* Minimalist Villager Profile v1 by alxq #9085

THINGS YOU'D NEED:
+ a background image url, preferably at least 2000 x 2000 pixels
- make sure your image url ends in .jpeg , .jpg , or .png and that it doesnt' have ? in its url
- right click on your image, select "copy image url" or "copy image address" to get the url
+ a villager background image url, size is best if 675 pixels width and 410 pixels height exactly
+ three colors to complement your background (in RGB form)
- color one, the MAIN color, will be denoted as ###
- color two, the COMPLIMENTARY color, will be denoted as ***
- color three, the DARKER VERSION of COLOR TWO, will be denoted as %%%

OPTIONAL THINGS:
- if your main color is LIGHT, as in very light pink or yellow:
    - please change all lines that have "color: #fff;" into "color: #000;" or some other
dark color for readability on your profile

- if your main color is DARK, as in very dark blue or red:
    - you can change all lines that have "color: #fff;" into some other light color
or you can leave it alone

- logos (big on top, small on bottom), the icons and villagers on the bottom are all
optional. if you'd like to keep the default images, you can simply take off the code
that asks for the img urls (that doesn't ask for the BACKGROUND URL, you want that to stay because
thats the code for your profile bg).
i.e. "background: url('PETS IMAGE URL HERE');"

- you may take out hovers if you like, or adjust them accordingly. make sure that the
code youre modifying corresponds to the right one! (i.e. .villager-data-info:hover takes
care of the villager info hover effect).

- if you have a hover (i.e. the hover on your villager info) and its too short/too
long of a wait time, you can just change the max-height information on the hovers.
make sure that you're changing the max-height under the code that has :hover in it
(i.e. .villager-data-info:hover { } )!

YOU MAY:
- edit to hell and back
- use snippets to make your own frankenstein with appropriate credit
- credit minor edits done by you as long as you credit me for the base code
- share with friends

YOU MAY NOT:
- claim it (fully) as your own
- use the base code/snippets of it as an entry in a css contest
- SELL EDITS OF THIS CODE

RGB form should look something like this (xxx,xxx,xxx)
there will be parts where the form is rgba(xxx,xxx,xxx,@@@)
in this case, just replace the first three xxx with their
respective rgb code and leave @@@ alone (unless you know what
you're doing)
here's a site to find rgb values of a color:
http://www.javascripter.net/faq/hextorgb.htm

if you are unsure about something, please message #9085 on Furvilla
thanks to msjanny #7302 for helping clean up the code! */

/* UNIVERSAL TRANSITIONS */
a .fa {
    transition: none;
}
* {
   transition: 1s;
}

/*  SEMIOPAQUE BACKGROUND */
.report a,
.widget-content,
.user-comments .user-comment,
.content .textarea + .btn,
.content .textarea,
.gallery-header .btn-link,
.panel,
.villagers-list,
.user-data,
.alert.success,
.alert.alert,
.alert,
.notifications .btn,
.recent-posts .forum-posts li:nth-child(odd),
.user-panel.clearfix {
    background: rgba(###,###,###,0.8);
}

/* OPAQUE BACKGROUND */
.report a:hover,
.content .textarea + .btn:hover,
.gallery-header .btn-link:hover,
.notifications .btn,
.search-form .input,
.widget-header h3,
.dropdown-menu,
#logo+:nth-child(2) {
    background: rgb(###,###,###);
}
.content .active span,
.table tr:hover td,
.dropdown-menu .multi-column-dropdown li .fa p,
.dropdown-menu .multi-column-dropdown li a {
    background: rgb(###,###,###) !important;
}

/* WHITE TEXT */
div.bottom,
.widget-content,
.user-info h4,
.content .pagination > .disabled > span,
.content .pagination > .disabled > span:hover,
.content .pagination > .disabled > span:focus,
.content .pagination > .disabled > a,
.content .pagination > .disabled > a:hover,
.content .pagination > .disabled > a:focus,
.content .textarea,
.content,
.search-form .input,
.dropdown-menu .multi-column-dropdown li a,
.content h1.clearfix,
.user-comments .user-comment .footer,
.widget .forum-posts p {
    color: #fff;
}
.content .pagination a,
.gallery-header .btn-link,
.alert.success,
.alert.alert,
.alert,
.dropdown-menu .multi-column-dropdown li a {
    color: #fff !important;
}

/* WEBPAGE BACKGROUND */
/* do NOT delete this if you want a custom bg image */
.content:after {
    background: url('BACKGROUND URL HERE');
    height: 100%;
    background-size: cover;
    position: fixed;
    top: 0;
    z-index: -1;
}

/* UNIVERSAL LINK */
a,
.user-comments .user-comment .footer a,
.widget .forum-posts p a {
    color: rgb(***,***,***);
}
a:hover, a:focus, a:active,
.user-comments .user-comment .footer a:hover,
.widget .forum-posts p a:hover {
    color: rgb(%%%,%%%,%%%);
    text-decoration: none;
}

/* LOGO IMAGE (BIG) */
/* you can remove this section if you don't */
/* want to change the big logo on top */
#logo a {
    background: url('LOGO IMAGE HERE') no-repeat;
}

/* SEARCH FORM */
.search-form .input {
    border: none;
}

/* DROPDOWN MENU */
.dropdown-menu .multi-column-dropdown li a:hover {
   transition: 0.5s all !important;
   background: #fff !important;
   color: rgb(###,###,###) !important;
}
.dropdown-menu .multi-column-dropdown li a {
   transition: 0.5s all !important;
   color: #fff !important;
}

/* USER PANEL NAV */
.user-panel.clearfix {
    border-radius: 0 0 10px 10px;
}
header .user-panel,
header .user-panel a {
color: rgb(***,***,***) !important;
}
header .user-panel a:hover {
color: rgb(%%%,%%%,%%%) !important;
}

/* WEBPAGE GENERAL CSS */
.content {
    background: none;
    margin-bottom: 100px;
    padding: 20px;
}

/* NOTIFICATIONS TABLE */
.table tr:nth-child(even) td,
.table tr:nth-child(odd) td {
    background: none;
    border: none;
    padding: 10px 13px;
}

/* NOTIFICATIONS BUTTONS*/
.notifications .btn {
    text-transform: uppercase;
    font-size: 11px;
}

/* NOTIFICATIONS TEXT (NON LINKS) */
tbody b {
    font-weight: normal;
}

/* TOP BANNER AD */
.left-column .text-center.margin-10px {
    display: none;
}

/* HOME >> TOWNHALL >> VILLAGER */
.breadcrumbs {
    margin: 0 0 20px 0;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
    text-transform: uppercase;
    background: rgba(###,###,###,0.8);
}

.breadcrumbs a {
   font-weight: normal;
   transition: none;
}

.breadcrumbs li:after {
    color: #fff !important;
}

/* VILLAGER: NAME > BUTTONS */
.content h1.clearfix {
    color: rgb(***,***,***);
}

.header-right-toolbar-buttons .btn {
   width: 160px;
   text-transform: uppercase;
   text-shadow: none;
   font-size: 12px;
   background: rgba(###, ###, ###, 0.8);
   color: rgb(***,***,***) !important;
}
.header-right-toolbar-buttons .btn:hover {
   background: rgba(###,###,###,1);
}

/* HEADERS */
.content h2,
h3 {
    font-size: 16px;
    text-transform: uppercase;
    color:  #fff !important;
    text-align: center;
}

/* VILLAGER AVATAR + BG */
/* recommended size is 675 px width and 410 px height */
.villager-data-avatar {
    background: url('VILLAGER BACKGROUND IMAGE URL HERE') no-repeat;
    border-radius: 20px;
    left: 20px;
    margin-bottom: 20px !important;
}

.villager-data-wrapper {
   background: none;
}

/* MINIPET BOX */

.villager-data-minipet {
    background: none;
    border: none;
    height: 110px;
    position: absolute;
    top: 120px;
    width: 125px;
    right: 5px;
    overflow: hidden;
}

.villager-data-minipet:hover {
    height: 200px;
    width: 125px;
    background: rgba(###,###,###,1);
}

.villager-data-minipet i.fa.fa-exclamation-circle.red {
    display: none;
}

/* CAREER BOX */
.villager-data .villager-career {
    border: none;
    position: absolute;
    top: 0px;
    right: 5px;
    width: 125px;
}

.villager-data .villager-career h3,
.villager-data .villager-career hr,
.villager-data .villager-career p {
    display: none;
}

/* FANCY BOX */
.villager-data .villager-fancy {
    background: none;
    border: none;
    height: 110px;
    position: absolute;
    top: 230px;
    width: 125px;
    right: 5px;
    overflow: hidden;
    margin: 0px;
}

.villager-data .villager-fancy:hover {
    height: 165px;
    width: 125px;
    background: rgba(###,###,###,1);
}

/* KEEPSAKE BOX */
.villager-data .villager-keepsake {
    background: none;
    border: none;
    height: 110px;
    position: absolute;
    top: 287px;
    width: 150px;
    right: 200px;
    overflow: hidden;
    margin: 0;
}

/* VILLAGER INFO (name, id, etc) */
.villager-data .villager-general {
    border: none;
    border-radius: 20px;
    padding: 10px;
    background: rgba(###,###,###,0.8);
    top: 20px;
    left: 60px;
    overflow: hidden;
    position: absolute;
    height: 35px;
    width: 200px;
    z-index: 1;
}

.villager-data-info-box.villager-general:hover {
    border: none;
    border-radius: 20px;
    padding: 10px;
    background: rgba(###,###,###,1);
    position: absolute;
    height: 360px;
    width: 50%;
}

/* ABANDON VILLAGER LINK */
.mute {
    opacity: 1;
}

/* PAINTIE BOX */
.villager-paintie .report-paintie {
    color: #a94442;
}

.villager-data .villager-paintie {
    background: rgba(###,###,###,0.8);
    border: none;
    border-radius: 20px;
    width: 710px;
}

.villager-data .villager-paintie .label-primary,
.villager-data .villager-paintie .label-warning,
.villager-data .villager-paintie .label-default,
.villager-data .villager-paintie .label-success {
   background-color: rgb(***,***,***) !important;
}

.villager-paintie .report a {
    position: fixed !important;
    bottom: 70px;
}

/* VILLAGER DESC */
.villager-description {
   padding: 15px;
   border: none;
   width: 710px;
   border-radius: 20px;
   background: rgba(###,###,###,0.8);
}

/* TROPHIES */
.villager-data-info-wide.villager-trophies.clearfix {
    padding: 15px;
    border: none;
    width: 710px;
    border-radius: 20px;
    background: rgba(###,###,###,0.8);
}

/* COMMENT FORM */
.content .textarea {
    border: none;
}

/* POST BUTTON */
.content .textarea + .btn {
    text-transform: uppercase;
}

/* USER COMMENTS */
.user-comments {
    height: 300px;
    overflow: auto;
}

/* USER COMMENTS BODY */
.user-comments .user-comment {
    width: 550px;
    border: none;
}
.user-comments .user-comment .footer {
    width: 515px;
   color: #fff !important;
}
.user-comments .user-comment:after,
.user-comments .user-comment:before {
    border-right-color: rgba(###,###,###,0.5);
}

/* USER COMMENTS AVATARS */
.user-avatar-wrapper img {
    margin: 10px;
    border-radius: 47px;
    width: 60px;
}

/* PAGINATION */
.content .pagination a {
    background: rgba(###,###,###,0.5) !important;
    border: 0 !important;
}
.content .pagination a:hover {
    background: rgba(###,###,###,0.7) !important;
}
.content .active span {
    z-index: 3;
    border: 0 !important;
}
.content .pagination > .disabled > span,
.content .pagination > .disabled > span:hover,
.content .pagination > .disabled > span:focus,
.content .pagination > .disabled > a,
.content .pagination > .disabled > a:hover,
.content .pagination > .disabled > a:focus {
    background-color: rgba(###,###,###,0.2) !important;
    border: 0 !important;
}

/* "HI, USERNAME" */
.user-info h4 {
    text-transform: uppercase;
/* you may choose a different font family for this */
    font: 13px 'Helvetica';
    padding-top: 5px;
    padding-bottom: 5px;
}

/* USER PANEL BODY TEXT */
.right-column .widget .user-info p {
    text-transform: uppercase;
/* you may choose a different font family for this */
    font: 11px 'Helvetica';
}

/* WIDGET BODY */
.widget-content {
    border-radius: 0 0 20px 20px;
}

/* WIDGET HEADER (blue border) */
.content .widget-header {
    border-bottom: none;
}

/* WIDGET HEADER */
.widget-header h3 {
    border-radius: 20px 20px 0 0;
    margin: 0;
    padding: 10px 0 5px;
    text-align: center;
    text-shadow: none;
    font-weight: normal;
    color: rgb(***,***,***);
    padding: 10px 0px;
    text-transform: uppercase;
/* you may choose a different font family for this */
    font: 12px 'Helvetica';
    border-bottom: 1px dotted #fff;
}

/* VIEW MORE BUTTONS */
.right-column .btn-link {
    color: rgb(***,***,***) !important;
}
.right-column .btn-link:hover {
    color: rgb(%%%,%%%,%%%) !important;
}

/* RECENT ACTIVITY */
.recent-posts .widget-content {
    padding-bottom: 5px;
}
.recent-posts .forum-posts li:nth-child(even) {
    background: none;
}
.widget .forum-posts p {
   color: #fff !important;
}

.widget .forum-posts li {
   border-bottom: 1px solid #fff;
}

/* USER PANEL ICON */
.right-column .text-center img {
    border-radius: 20px;
}

/* LOGO IMAGE (SMALL, BOTTOM) */
/* you may comment/delete this section if you like */
.logo-small {
    width: 110px;
    overflow: hidden;
    padding-left: 110px;
    background: url('SMALL LOGO IMAGE URL HERE') center no-repeat !important;
}

/* VILLAGER IMAGE (BOTTOM) */
/* you may comment/delete this section if you like */
.pets {
    width: 269px;
    overflow: hidden;
    padding-left: 269px;
    background: url('PETS IMAGE URL HERE');
}

/* SOCIAL MEDIA ACCOUNTS LINKS (BOTTOM) */
/* you may comment/delete this section if you like*/
.social a {
    width: 44px;
    height: 44px;
    display: inline-block;
}
.social img {
    display: none;
}
.social a:first-child {
    background: url('FACEBOOK ICON IMAGE URL HERE');
}
.social a:nth-child(2) {
    background: url('TWITTER ICON IMAGE URL HERE');
}
.social a:last-child {
    background: url('TUMBLR ICON IMAGE URL HERE');
}

/* BOTTOM LINKS FOOTER */
footer .bottom {
    background-color: rgba(###,###,###,0.8);
    border-radius: 20px;
    padding: 5px;
}

p.copyright.align-center {
    background: url(https://i.imgur.com/GvXx9k5.png) no-repeat;
}

/* FLOATING REPORT USER PROFILE */
.report a {
    position: fixed;
    bottom: 30px;
    left: 30px;
    color: rgb(169, 68, 66);
    border-radius: 5px;
    padding: 5px;
}
.report a:hover {
    color: #ed1c24;
}

/* TOOLTIPSTER (dotted border under timestamp) */
span.tooltipster {
   border-bottom: 1px dashed rgb(***,***,***);
}