#main .paging li.active {
    font-size:1.2em;
}

#main #profileform {
    width: 100%
}

#main #profileform #id_info {
    width: 95%;
}

#main .paging li.prev,li.next {
    margin-left:0.5em;
    margin-right:0.5em;
}

#linksform tr:hover {
    background-color: #FFFFC2;
}

p.errorinfo {
    color: #EC3030;
}

ul.errorlist li {
   color: #EC3030;
}

#main .paging li {
    display: inline;
    list-style-type: none;
}

.tagview_1 a {
    font-size:0.8em;
}

.searchpostpreview {
    margin-left:1.5em;
    padding:2px;
    background:#f5f5f5;
    border: 1px solid #E6CEA8;
}

.searchpostpreview p {
    margin-top: 0;
    margin-bottom: 3px;
}

.searchinfo {
    font-style:italic;
}

.tagview_2 a {
    font-size:0.95em;
}

.tagview_3 a {
    font-size:1.12em;
}

.tagview_4 a {
    font-size:1.25em;
}

#main h2 {
    clear:both;
}

#searchform ul {
    margin: 0 !important;
    padding: 0 !important;
}

#searchform li {
    display: inline;
}

div.taglist {
    background:#eee;
    float: right;
    width: 40%;
    border: 1px solid #E6CEA8;
    padding:6px;
    margin-left:6px;
    overflow: hidden;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-top-left-radius:10px;
}

div.taglist p:first-child {
    margin-top: 0;
}

#tagfield {
    width:90%;
}

#tagcloud {
    background-image: url("/static/comment.png");
}

#statistics {
    background-image: url("/static/statistics.png");
}

#lic-info {
    float: right;
    width: 60%;
}

/* Default CVGM Screenshots are 190x190 pixels in size.
You will need to adjust the below Height/Width values to work with your site screenshot sizes. FishGuy876 */
div.screenshot {
    padding: 3px;
    text-align: center;
    margin: 4px;
    float: left;
    height: 200px;
    width: 200px;
}

span.screenshotname {
    font-weight: bold;
    font-style: italic;
}

div.clear {
    clear: both;
}

.profile-theme {
    float: right;
    font-size: 1.2em;
}

div#screenshot-image {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
}

div#songinfo-title {
    font-weight: bold;
    margin-bottom: 5px;
}

div#screenshot-connected li {
    list-style-type: none;
}

div.screenshot:hover {
    background-color: #ddd;
    border: 1px solid #333;
    padding: 2px;
}

.ytvidlink {
    width: 120px;
    border: 1px solid #000;
    text-align: center;
}

.ytvidlink span.yttitle {
    margin: 2px;
    visibility: hidden;
    font-size: 0.8em;
    position:absolute;
    bottom:0;
    left: 0;
    width: 120px;
    color: #fff;
    opacity: 0.5;
}

.ytvidlink span.yttitle:hover {
    background-color: #000;
    opacity: 1.0;
}

.ytvidlink span.overlay {
    position:absolute;
    bottom:1px;
    right:1px;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.youtube-link {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #eee;
}

.editbar {
    padding-left: 10px;
}

.editButton {
    padding: 2px;
}

.ytpopupdesc {
    font-size: 0.95em;
    padding: 5px;
    padding-top: 0;
}

.ytpopupdata {
    text-align: center;
    margin-top: 10px;
    margin-right: 5px;
}

.messageholder {
    opacity: .9;
    padding: 0.2em;
    font-size:14px;
    background-color: #D1EFC3;
    cursor: pointer;
}

.messageholder:hover {
    opacity: 1;
    background-color: #E1FFD3;
}

.messagetitle {
    background-color: #8FC7FF;
    padding: 2px;
    padding-right: 1em;
    padding-left: 1em;
    cursor: pointer;
}

.message-display-settings {
    cursor: pointer;
}

.message-display-settings:hover {
    color: #5A5A5A;
}

.messagebox {
    width: 100%;
    position:fixed;
    top:0;
    left:0;
}

.messagetime,.messagecat {
    padding-right: 1em;
    font-size:70%;
}

.messagefadeborder {
    float: right;
    width: 50px;
    height: 6px;
    border: 1px solid #000;
}

.messagefade {
    width: 100%;
    background-color: #0F5979;
    height: 100%;
    right: 0;
    margin-left: auto;
}

.messagesettingsbox {
    position:fixed;
    top: 45%;
    left: 50%;
    width: 350px;
    margin-left: -175px;
    background-color: #ffF;
    border: 1px solid #000;
}

.messagesettings div {
    padding: 0.5em;
}

.messagesettings label {
    padding-right: 0.5em;
}

.messagesetting-save,.messagesetting-cancel {
    padding: 1em;
    border: 1px solid #000;
    margin: 1em;
    float:left;
    cursor: pointer;
}

.message_toggle {
    width: 50%;
    margin:auto;
    cursor: pointer;
    border-bottom: 2px solid #6DC94C;
}

.message-disabled-true {
    border-bottom: 2px solid #C44D37;
}

.messagecat {
    min-width: 4.5em;
    display: inline-block;
}

.messagetitle-flash {
    background-color: #fff;
}

.message-remove  {
    float: right;
    cursor: pointer;
}

.linkform {
    display:inline;
}

.starview {
    min-height: 28px;
}

/* Stars drawn as text, filled to --pct (macro/display.html stars() and
   song_vote()). Themes set the colours: --star-empty, --star-fill and
   --star-hover (the vote being chosen, before it's clicked; red like the
   old star-red.png, user 2026-09-30). */
.stars {
    position: relative;
    display: inline-block;
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--star-empty, #cfcfcf);
    user-select: none;
}

.stars::after {
    content: "★★★★★";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pct, 0%);
    overflow: hidden;
    color: var(--star-fill, #f0b030);
}

.vote-stars {
    font-size: 24px;
    cursor: pointer;
}

.vote-stars.choosing::after {
    color: var(--star-hover, #fb1f00);
}

.vote-label {
    font-size: 80%;
    margin-left: 0.4em;
    vertical-align: middle;
}

/* "Remove vote" on the song page: a button that looks like a small link. */
.vote-remove {
    font: inherit;
    font-size: 75%;
    margin-left: 0.8em;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    vertical-align: middle;
    cursor: pointer;
    opacity: 0.75;
}

.vote-remove:hover, .vote-remove:focus {
    opacity: 1;
}

.ajax-working {
    opacity:0.4;
}

.onelinertime {
    color: #777;
    float: right;
    margin: auto;
    text-align: right;
}

#mainlogo {
    overflow:hidden;
}

.smileybox-holder {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.theme {
    float: left;
    padding: 1em;
    height:220px;
}

.theme_shot {
    float: left;
}

.activetheme {
    border: 1px solid #000;
    height:218px;
}

.themeimage_large {
    float: right;
}

.smileybox {
    border: 1px solid #000;
    background-color: #BFBFBF;
    position: fixed;
    top: 30%;
    max-height: 60%;
    overflow: auto;
    left: 50%;
    padding: 1em;
    width: 500px;
    margin-left: -250px;
}

.smileybox-smiley {
    float: left;
    padding: 5px;
    
}

.smileybox-smiley:hover {
    border: 2px solid #000;
    padding: 3px;
    background-color: #ddd;
}

.onelinertools > span {
    margin-right: 4px;
}

.onelinertools:before {
    content:"Link: ";
}

.onelinertools {
    height: 1.2em;
}

.clicker {
    cursor: pointer;
}

.edit_inline {
    cursor: pointer;
}

#djrandom-options {
    padding-top: 7px;
}

#djrandom-quote-nick {
    color: #77eeff;
}

#users_overview, #top_voters, #top_uploaders, #top_oneliners, #top_taggers, #top_requesters,
#top_commentators, #top_posters, #top_user_country {
    display: inline-block;
}

/*
 * Search box and suggestions (static/js/search-suggest.js).
 * Themes set the colours by overriding these variables in their own CSS
 * (loaded after this file); a theme that sets none gets the system colours.
 */
:root {
    --suggest-bg: Canvas;               /* drop-down background */
    --suggest-fg: CanvasText;           /* text */
    --suggest-border: #888;             /* outline and the line above "All results" */
    --suggest-active-bg: Highlight;     /* highlighted row (keyboard or mouse) */
    --suggest-active-fg: HighlightText;
    --suggest-shadow: 0 3px 8px rgba(0, 0, 0, .35);
    --suggest-radius: 3px;
}
.menu-search input[type=search] { width: 90%; box-sizing: border-box; }
.search-suggest { position: absolute; left: 0; top: 100%; z-index: 1000; min-width: 100%; width: max-content; max-width: min(420px, 90vw);
    margin: 2px 0 0; padding: 2px 0; list-style: none; background: var(--suggest-bg); color: var(--suggest-fg);
    border: 1px solid var(--suggest-border); border-radius: var(--suggest-radius); box-shadow: var(--suggest-shadow); text-align: left; }
.search-suggest li { display: block; padding: 3px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none; color: inherit; }
.search-suggest li.active, .search-suggest li[data-url]:hover { background: var(--suggest-active-bg); color: var(--suggest-active-fg); }
.search-suggest .type { display: inline-block; min-width: 6.5em; font-size: 85%; opacity: .7; }
.search-suggest .extra { margin-left: .6em; font-size: 85%; opacity: .7; }
.search-suggest li.all { border-top: 1px solid var(--suggest-border); font-style: italic; }
.search-suggest li.none { cursor: default; opacity: .7; }

/*
 * Member card: opens on a member's name (static/js/usercard.js,
 * webview/usercard/card.html). Themes set the look by overriding these
 * variables; a theme that sets none follows its search drop-down colours.
 * Each card also has a role class (.usercard-admin, .usercard-staff,
 * .usercard-user, .usercard-inactive-user, .usercard-hidden) for themes that
 * want to tell roles apart.
 */
:root {
    --usercard-bg: var(--suggest-bg);          /* card background */
    --usercard-fg: var(--suggest-fg);          /* text */
    --usercard-border: var(--suggest-border);  /* outline and the line under the header */
    --usercard-shadow: var(--suggest-shadow);
    --usercard-radius: 4px;
    --usercard-head-bg: transparent;           /* header strip (avatar, name, info line) */
    --usercard-head-fg: inherit;
    --usercard-role: inherit;                  /* "(Admin)" after the name */
    --usercard-infoline: inherit;              /* the member's info line */
    --usercard-label: inherit;                 /* statistic names */
    --usercard-value: inherit;                 /* statistic numbers */
    --usercard-avatar-size: 48px;
    --usercard-width: 260px;
}
.usercard { position: absolute; z-index: 1100; width: var(--usercard-width); max-width: calc(100vw - 8px); box-sizing: border-box;
    background: var(--usercard-bg); color: var(--usercard-fg); border: 1px solid var(--usercard-border);
    border-radius: var(--usercard-radius); box-shadow: var(--usercard-shadow); overflow: hidden; text-align: left;
    font-size: 11px; line-height: 1.35; }
.usercard[hidden] { display: none; }
.usercard-inner { display: block; }
.usercard-head { display: flex; gap: 8px; align-items: center; padding: 6px 8px;
    background: var(--usercard-head-bg); color: var(--usercard-head-fg); }
.usercard-head:not(:last-child) { border-bottom: 1px solid var(--usercard-border); }
.usercard-avatar { flex: none; width: var(--usercard-avatar-size); height: var(--usercard-avatar-size); object-fit: cover;
    border-radius: calc(var(--usercard-radius) - 1px); }
.usercard-title { min-width: 0; }
.usercard-name { font-size: 115%; overflow-wrap: anywhere; }
.usercard-name img { vertical-align: middle; }
.usercard-role { color: var(--usercard-role); }
.usercard-infoline { margin-top: 2px; font-style: italic; color: var(--usercard-infoline); overflow-wrap: anywhere; }
.usercard-location { margin-top: 1px; font-size: 90%; opacity: .75; }
.usercard-section { padding: 6px 8px; }
.usercard-section + .usercard-section { border-top: 1px solid var(--usercard-border); }
.usercard-note { padding: 6px 8px; font-style: italic; opacity: .8; }
.usercard-stats { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; margin: 0; }
.usercard-stats dt { color: var(--usercard-label); }
.usercard-stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--usercard-value); }

/* Members' overview page (webview/overview.html). Row colours come from each
   theme's table.songlist rules; this is layout only. */
.overview-stats li {
    margin-bottom: 0.3em;
}

table.overview-list {
    width: 100%;
    margin-bottom: 1.5em;
}

table.overview-list tr td {
    padding: 6px 8px;
    vertical-align: middle;
}

table.overview-list .ov-song {
    width: 28%;
}

table.overview-list .ov-user {
    width: 14%;
    white-space: nowrap;
}

table.overview-list .ov-when {
    width: 12%;
    text-align: center;
}

table.overview-list .ov-vote {
    width: 14%;
    white-space: nowrap;
}

.ov-rating {
    display: block;
    font-size: 85%;
    opacity: 0.75;
}

/* Overview note for a member who hides their profile */
.overview-hidden-note {
    margin: 1em 0;
    padding: 0.6em 1em;
    border-left: 3px solid var(--star-fill, #f0b030);
}

.hidden-user {
    font-style: italic;
    opacity: 0.75;
}

/* "Sign in with SceneID" under Log In / Register in the User Menu: no menu
   icon, and no wider than a screenshot thumbnail (THUMB_DISPLAY_WIDTH) */
#rightside ul li#sceneid-menu {
    background-image: none;
    padding-left: 0;
    margin-top: 6px;
}
#rightside li#sceneid-menu a {
    margin-left: 0;
}
#rightside li#sceneid-menu img {
    display: block;
    width: 128px;
    max-width: 100%;
    height: auto;
}

/*
 * YouTube thumbnails in [yt] links (static/js/ytthumbs.js). Their widths are
 * settings (YOUTUBE_THUMB_WIDTH_*), set on the image by the script; here they
 * only shrink to fit a narrow column, keeping 16:9.
 */
a[data-ytid] .ytthumb { display: inline-block; vertical-align: top; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-width: 100%; margin: 3px 0; border: 0; }