BabePedia WideScreen Compact v.5 by janvier56

/* ==UserStyle==
@name        BabePedia WideScreen Compact v.5
@namespace   babepedia.com"
@version     5.00.0

@include       https://www.babepedia.com/*


@author        janvier56
@description   BabePedia: larger and compact
@homepage      https://greasyfork.org/fr/users/7434-janvier56
@license       unlicense
==/UserStyle== */

@-moz-document domain("babepedia.com") {

/* ==== X BabePedia WideScreen Compact v.5 (new5) - DEV in CHROME  ==== */

/* SUPP */
.thumbshot.thumb-hot::after {
    display: none !important;
}

#content h2 {
    padding: 2px 0 !important;
    font-size: 17px !important;
color: #dc6600;
}

/* (new4) TOP HEADER - QUICK JUMP */
#quickjump {
	position: fixed !important;
	display: inline-block !important;
	top: 3vh !important;
	margin: 0 0 0 1000px !important;
	z-index: 5000 !important;
}

#quickjump + .separate {
	display: block !important;
	float: none!important;
	clear: none !important;
}
.separate #biography{
	float: left !important;
	clear: none !important;
    width: 49% !important;
border: 1px solid #f69444!important;
}

/* (new5) BIO - NO SMALL IMG AT RIGHT HEADSOT */
#biography:not(:has(#profselect)) #profbox {
    margin-right: 4px !important;
    min-width: 322px !important;
	max-width: 322px !important;
border: 1px solid #f69444 !important;
}
#biography:not(:has(#profselect)) #profbox #profimg {
    min-width: 322px !important;
	max-width: 322px !important;
    height: 350px;
border: 1px solid #f69444 !important;
}
#biography:not(:has(#profselect)) #profbox #profimg img {
    min-width: 322px !important;
	max-width: 322px !important;
    object-fit: contain !important;
border: none!important;
}


.separate:first-of-type {
    width: 100%;
	clear: none !important;
border: 1px solid yellow !important;
}

#babename {
    font-size: 25px !important;
    font-family: roboto slab,Verdana,sans-serif;
}
#bioarea h2#aka {
    font-size: 17px !important;
}

#profselect {
    padding-right: 5px !important;
}
#biography #bioarea   {
	float: left !important;
	clear: none !important;
    width: 100% !important;
    min-width: 51% !important;
    max-width: 51% !important;
	padding: 0px 5px 0px 5px !important;
border-left: 1px solid red !important;
}
#biography #bioarea > div {
    display: inline-block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
.hint.label {
    display: none  !important;
}
#biography #bioarea > div:first-of-type {
    display: inline-block !important;
    width: 100% !important;
    min-width: 95% !important;
    max-width: 95% !important;
}

/* ALIAS LIST */
#biography #bioarea > #aliasinfo {
    display: inline-block !important;
    height: auto !important;
    max-height: 11.5vh !important;
	padding: 0px 5px 5px 5px !important;
	margin: -5px 0 -5px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/*  (new4) OTHER INFOS */

.separate.babebanner:not(:empty) ~ .separate  {
    width: 50% !important;
	float: right !important;
	clear: none !important;
	margin: 0 0px 0 0px !important;
border: 1px solid #f69444 !important;
}
.babebanner.separate:not(:empty) + .separate  + .separate {
    width: 50% !important;
	float: right !important;
	clear: none !important;
	margin: 0 0px 0 0px !important;
    border: 1px solid #f69444 !important;
}
.babebanner.separate + .separate {
    width: 50% !important;
	float: right !important;
	clear: both !important;
	margin: 0 0px 0 0px !important;
border: 1px solid #f69444!important;
}


/* RIGHT SIDEBAR */
.sidebar aside.right_side.sticky .sidebar_block li {
	height: 3vh !important;
    line-height: 3vh !important;
border: 1px solid #EA9A59!important;
}


aside a {
    color: peru;
    text-decoration: none;
}
.sidebar li:hover {
    color: white !important;
    background: #ab520b !important;
}
.sidebar li:hover a {
    color: white !important;
}

aside a:visited {
    color: tomato;
    text-decoration: none;
}
li:not(:hover) .thumbnail:not(:hover) span {
    visibility: visible !important;
}
li:not(:hover) .thumbnail span:not(:first-of-type) {
    display: none !important;
}

li:not(:hover) .thumbnail span {
	position: absolute !important;
	display: inline-block !important;
    width: 30px !important;
	min-height: 3vh !important;
	max-height: 3vh !important;
	right: 0 !important;
    padding: 0px !important;
    text-decoration: none;
	margin: 0vh 0 0 0 !important;
	overflow: hidden !important;
color: #000000;	
background-color: floralwhite;
border: none !important;
}
/* HOVER */
li:hover .thumbnail span {
	z-index: 50000 !important;
color: #000000;	
background-color: #f69444 !important;
border: 1px solid green !important;
}

li:not(:hover) .thumbnail span img {
	position: absolute !important;
	min-width: 25px !important;
    max-width: 25px !important;
	height: 3vh !important;
	left: 0 !important;
    padding: 0px !important;
	border-radius: 100% !important;
    text-decoration: none;
	object-fit: cover !important;
	object-position: center 7px !important;
	transform: scale(3) !important;
	z-index: 0 !important;
color: #000000;	
background-color: floralwhite;
border: none !important;
}

/* (new5) EMPTY */
.sidebar + #content:has(.separate.babebanner) #quickjump + .separate + .babebanner.separate:empty  {
    display: none  !important;
}

.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate #biography {
    float: left !important;
    clear: left !important;
    width: 48% !important;
	margin: 0 0px 0 0px !important;
border: 1px solid #EA9A59!important;
}

.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate #biography #bioarea {
    float: right !important;
    clear: none !important;
    width: 100% !important;
    min-width: 50% !important;
    max-width: 50% !important;
	padding:  0vh 5px 0 5px !important;
border-left: 1px solid red !important;
}
.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate #biography #bioarea #biolist>li {
    display: block !important;
    float: left !important;
    clear: both !important;
    width: 100% !important;
    min-width: 59% !important;
    max-width: 59% !important;
    font-size: 11pt;
}

.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate + .babebanner.separate:empty + .separate {
    width: 50% !important;
	float: right !important;
	clear: both !important;
	margin: 0 0px 0 0px !important;
/*border: 4px dashed pink!important;*/
}
.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate + .babebanner.separate:empty ~ .separate  {
    width: 50% !important;
	float: right !important;
	clear: none !important;
	margin: 0 0px 0 0px !important;
/*border: 4px dashed fuchsia !important;*/
}
.sidebar + #content:has(.separate.babebanner:empty) #quickjump + .separate + .babebanner.separate:empty + .separate  + .separate {
    width: 50% !important;
	float: right !important;
	clear: none !important;
	margin: 0 0px 0 0px !important;
/*border: 4px dashed green !important;*/
}


/* (new4) ABOUT */
.babebanner.separate:not(:empty) {
	position: absolute !important;
	display: inline-block !important;
    width: 18% !important;
	height: 0vh !important;
	left: 11% !important;
	margin: 0 0px 0 0px !important;
	padding:  3vh 0 0 0 !important;
	overflow: hidden auto !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}
.babebanner.separate:not(:empty):hover {
	position: absolute !important;
	display: inline-block !important;
    width: 18% !important;
	height: auto !important;
	max-height: 40vh !important;
	left: 11% !important;
	margin: 0 0px 0 0px !important;
	overflow: hidden auto !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}

.babebanner.separate h2 {
	position: absolute !important;
	display: inline-block !important;
	margin: -3.1vh 0 0 0 !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}
.babebanner.separate:not(:empty) h2:after {
	content: "▼" !important;
	position: absolute !important;
	display: inline-block !important;
	margin: 0vh 0 0 20px !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}


/* (new4) MORE LIKE STARS */
.separate:has(#morelikethumbs) {
	position: absolute !important;
	display: inline-block !important;
    width: 18% !important;
	height: 0vh !important;
	left: 71% !important;
	margin: 0 0px 0 0px !important;
	padding:  3vh 0 0 0 !important;
	overflow: hidden auto !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}
.separate:has(#morelikethumbs):hover {
	position: absolute !important;
	display: inline-block !important;
    min-width: 40% !important;
	max-width: 40% !important;
	height: auto !important;
	max-height: 90vh !important;
	left: 49% !important;
	overflow: hidden auto !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}

.separate:has(#morelikethumbs) h2 {
	position: absolute !important;
	display: inline-block !important;
	margin: -3.1vh 0 0 0 !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}
.separate:has(#morelikethumbs) h2:after {
	content: "▼" !important;
	position: absolute !important;
	display: inline-block !important;
	margin: 0vh 0 0 20px !important;
	color: white !important;
background: #EA7728  !important;
border: 1px solid #f69444 !important;
}

#morelikethumbs.thumbsblock > .thumbshot:not(.menuthumb) {
    float: left !important;
    height: 140px !im...