MediaWiki:Mbhh.css: Difference between revisions

From Corsair Cove Official Wiki
added layout and graphics for Reward card template
fixed a missing hierarchy label
 
(16 intermediate revisions by the same user not shown)
Line 376: Line 376:
margin: 36px 36px 0 36px;
margin: 36px 36px 0 36px;
}
}
.cc-infobox-quest {
float: right;
position: relative;
z-index: 1;
overflow: hidden;
margin-left: 48px;
margin-bottom: 48px;
}
.cc-infobox-quest-background-generic::before,
.cc-infobox-quest-background-notoriety::before,
.cc-infobox-quest-background-empire::before,
.cc-infobox-quest-background-seafaring::before,
.cc-infobox-quest-background-wealth::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 5px; bottom: 0; left: 5px;
background-size: 100% auto;
background-position: bottom center;
}
.cc-infobox-quest-background-generic::before {
background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png");
background-size: 100% 100%;
bottom: -6px;
opacity: 0.3;
}
.cc-infobox-quest-background-notoriety::before {
background-image: url("/images/mbhh_cove/5/5a/T_BG_challenges_Notoriety.png");
}
.cc-infobox-quest-background-empire::before {
background-image: url("/images/mbhh_cove/4/4d/T_BG_challenges_Empire.png");
}
.cc-infobox-quest-background-seafaring::before {
background-image: url("/images/mbhh_cove/d/d3/T_BG_challenges_Sea.png");
}
.cc-infobox-quest-background-wealth::before {
background-image: url("/images/mbhh_cove/f/f0/T_BG_challenges_Wealth.png");
}
.cc-infobox-quest-title {
position: relative;
z-index: 2;
padding: 12px;
margin-left: 2px;
margin-right: 2px;
line-height: 1.1;
font-family: "Alegreya", serif;
font-weight: bold;
}
.cc-infobox-quest-title::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
}
.cc-infobox-quest-title > span {
position: relative;
z-index: 2;
color: black;
}
.cc-infobox-quest-path-banner {
position: relative;
top: -10px;
margin-bottom: -14px;
z-index: 1;
padding-top: 12px;
padding-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
line-height: 1.0;
font-family: "Alegreya", serif;
font-size: 0.9em;
text-align: center;
}
.cc-infobox-quest-path-banner::before {
content: "";
pointer-events: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
}
.cc-infobox-quest-path-banner > span {
position: relative;
z-index: 2;
color: white;
}
.cc-infobox-quest-illustration-well {
position: relative;
}
.cc-infobox-quest-illustration-well::after {
content: "";
position: absolute;
top: -55px; left: 0; right: 0; bottom: 0;
z-index: 2;
background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png");
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.4;
}
.cc-infobox-quest-region {
position: relative;
margin-top: 8px;
text-align: center;
font-family: "Alegreya", serif;
font-weight: bold;
}
.cc-infobox-quest-section-description {
position: relative;
padding: 12px 30px;
line-height: 1.3;
}
.cc-infobox-quest-section-difficulty, .cc-infobox-quest-section-rewards {
position: relative;
text-align: center;
margin: 0 24px 12px;
padding-top: 12px;
padding-bottom: 12px;
}
.cc-infobox-quest-section-difficulty span, .cc-infobox-quest-section-rewards span {
position: relative;
font-family: "Alegreya", serif;
}
.cc-infobox-quest-section-difficulty div, .cc-infobox-quest-section-rewards div {
z-index: 2;
font-family: "Alegreya Sans", sans-serif;
}
.cc-infobox-quest-section-difficulty hr, .cc-infobox-quest-section-rewards hr {
border: none;
background-color: transparent;
height: 6px;
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
background-size: 50% 30%;
background-repeat: repeat-x;
background-position: center;
margin: 0 10% 12px 10%;
}
.cc-infobox-ship {
float: right;
position: relative;
max-width: 360px;
margin-left: 48px;
margin-bottom: 64px;
margin-top: 58px;
padding-bottom: 36px;
background-image: url("/images/mbhh_cove/8/80/T_MainMenuBackGround.png");
background-size: 100% calc(100% + 10px);;
background-position: top center;
background-repeat: no-repeat;
}
.cc-infobox-ship::before {
content: "";
position: absolute;
z-index: 1;
top: -46px; right: 0; bottom: 0; left: 0;
border-image-source: url("/images/mbhh_cove/b/b8/T_BG_PanelLongWithGold.png");
border-image-slice: 50 9 10 9;
border-image-width: auto;
border-image-outset: 4px;
border-image-repeat: stretch;
opacity: 0.2;
}
.cc-infobox-ship hr {
border: none;
background-color: transparent;
height: 6px;
background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
background-size: 50% 30%;
background-repeat: repeat-x;
background-position: center;
margin: 0 10% 12px 10%;
opacity: 0.75;
}
.cc-infobox-ship-header::before {
content: "";
position: absolute;
z-index: 1;
top: -50px; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png");
background-size: 75% auto;
background-position: center 0px;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-tier {
position: absolute;
z-index: 3;
width: 100%;
top: -58px;
text-align: center;
}
.cc-infobox-ship-header-name {
position: relative;
z-index: 2;
padding-top: 4px;
padding-bottom: 10px;
font-family: "Alegreya", serif;
font-weight: bold;
color: black;
text-align: center;
}
.cc-infobox-ship-header-name::before {
content: "";
pointer-events: none;
position: absolute;
top: -6px; right: -6px; bottom: 0; left: -6px;
z-index: -1;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-class {
position: relative;
z-index: 1;
padding-top: 2px;
padding-bottom: 8px;
font-family: "Alegreya", serif;
font-size: 0.9em;
line-height: 1.0;
text-align: center;
}
.cc-infobox-ship-header-class::before {
content: "";
pointer-events: none;
position: absolute;
top: -12px; right: -2px; bottom: 0; left: -2px;
z-index: -1;
background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.cc-infobox-ship-header-icon {
text-align: center;
}
.cc-infobox-ship-header-description {
margin: 12px 36px 0;
font-size: 0.8em;
line-height: 1.3em;
}
.cc-infobox-ship-stats-title,
.cc-infobox-ship-crew-title,
.cc-infobox-ship-construction-title,
.cc-infobox-ship-unlock-title {
text-align: center;
font-family: "Alegreya", serif;
margin-top: 24px;
}
.cc-infobox-ship-stats-fullrow {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10% 6px;
}
.cc-infobox-ship-stats-fullrow div:nth-child(2) {
font-weight: bold;
}
.cc-infobox-ship-stats-row {
display: flex;
justify-content: space-evenly;
align-items: flex-end;
margin: 24px 10% 0;
}
.cc-infobox-ship-stats-row-col {
text-align: center;
line-height: 1.3;
}
.cc-infobox-ship-stats-row-col div:not(:first-child) {
font-weight: bold;
}
.cc-infobox-ship-crew-row {
display: flex;
justify-content: center;
gap: 12px;
}
.cc-infobox-ship-crew-row-col {
text-align: center;
}
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced {
position: relative;
z-index: 1;
}
.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced::after {
content :"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 5;
background-image: url("/images/mbhh_cove/6/66/T_PremiumCrewIndicator.png");
background-size: 100% 100%;
background-position: center center;
}
.cc-infobox-ship-crew-row-col div:first-child {
font-size: 0.8em;
}
.cc-infobox-ship-crew-row-col div:not(:first-child) {
font-weight: bold;
}
.cc-infobox-ship-construction-pier {
text-align: center;
margin-bottom: 16px;
}
.cc-infobox-ship-construction-table {
margin: 0 10%;
}
.cc-infobox-ship-construction-table table {
margin: 0 auto;
width: fit-content;
border-spacing: 3px;
}
.cc-infobox-ship-construction-table-qty {
font-weight: bold;
}
.cc-infobox-ship-unlock-requirements {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10%;
}
.cc-infobox-ship-unlock-requirements-points {
display: flex;
gap: 4px;
}
.cc-infobox-ship-unlock-requirements-points > div {
display: flex;
align-items: center;
gap: 4px;
padding: 0 4px;
}
.cc-infobox-ship-unlock-requirements-points-notoriety {
background-color: #46592d;
}
.cc-infobox-ship-unlock-requirements-points-empire {
background-color: #6f302a;
}
.cc-infobox-ship-unlock-requirements-points-seafaring {
background-color: #334661;
}
.cc-infobox-ship-unlock-requirements-points-wealth {
background-color: #69154a;
}






.cc-reward-card {
.cc-reward-card {
  border: 1px solid red;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   justify-content: space-between;
   justify-content: space-between;
   align-items: center;
   align-items: center;
   width: 96px;
   width: 84px;
   height: 128px;
   height: 116px;
   padding: 10px 6px 4px 6px;
   padding: 10px 6px 4px 6px;
   border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
   border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
Line 393: Line 743:
   font-size: 125%;
   font-size: 125%;
}
}
.cc-quest-page-timeline {
  margin-left: -36px;
  padding: 8px 0 18px 120px;
  background-image: url("/images/mbhh_cove/d/df/T_SubtitleBackground_Edge.png");
  background-size: 100% 100%;
  background-position: -100px center;
  background-repeat: no-repeat;
}
.cc-page-notice-spoiler {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: fit-content;
margin: auto;
padding: 8px 56px 12px;
margin-bottom: 24px;
}
.cc-page-notice-spoiler::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 0; bottom: 0; left: 0;
border-image-source: url("/images/mbhh_cove/a/a6/T_Banner_Medium_scaleable.png");
border-image-slice: 56 56 53 63 fill;
border-image-width: 35px 55px;
border-image-repeat: stretch;
border-image-outset: 24px 2px 16px;
filter: saturate(90%) invert(13%) sepia(90%) saturate(822%) hue-rotate(329deg) brightness(60%) contrast(95%);
}
.cc-page-notice-spoiler img {
position: relative;
background-image: url("/images/mbhh_cove/9/9a/T_warning_BloodStrong.png");
background-size: 100% 100%;
}
.cc-page-notice-spoiler div {
position: relative;
font-family: "Alegreya", serif;
}




Line 494: Line 892:
position: relative;
position: relative;
display: inline-block;
display: inline-block;
border: var(--instance-sized-border-width) solid transparent;
border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
border-image-width: var(--instance-sized-border-width);
border-image-width: var(--instance-sized-border-width);
border-image-slice: 12;
border-image-slice: 12;
border-image-outset: var(--instance-sized-border-width);
border-image-outset: 0;
background-size: 99% 99%;
background-position: center center;
background-repeat: no-repeat;
}
}
.cc-pirate-icon-color-red {
.cc-pirate-icon-color-red {
Line 517: Line 919:
background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
}
}
.cc-producer-icon {
position: relative;
z-index: 1;
display: inline-block;
padding: 4px;
}
.cc-producer-icon::before {
content: "";
pointer-events: none;
position: absolute;
z-index: 0;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url("/images/mbhh_cove/e/e3/T_BG_BlackSmoke_Round.png"), url("/images/mbhh_cove/a/a4/T_ICO_BuildingSign_Shield.png");
background-size: 100% 90%, 110% 100%;
background-position: center center, center center;
background-repeat: no-repeat;
opacity: 0.5;
}
.cc-producer-icon img {
position: relative;
z-index: 1;
}
.cc-ship-tier-icon {
display: inline-block;
width: var(--instance-width);
height: var(--instance-width);
line-height: calc(var(--instance-width) * 0.9);
background-size: 115% 115%;
background-position: center center;
background-repeat: no-repeat;
text-align: center;
font-weight: bold;
font-size: var(--instance-font-size);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
}
.cc-ship-tier-icon.cc-ship-tier-icon-none {
background-image: url("/images/mbhh_cove/4/4e/T_ICO_BuildingSign_ShieldFive.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-notoriety {
background-image: url("/images/mbhh_cove/6/63/T_Flag_Principle_Notoriety_Small.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-empire {
background-image: url("/images/mbhh_cove/2/25/T_Flag_Principle_Empire_Small.png");
background-position: calc(50% + 1px) calc(50% - 1px);
}
.cc-ship-tier-icon.cc-ship-tier-icon-seafaring {
background-image: url("/images/mbhh_cove/d/db/T_Flag_Principle_Sea_Small.png");
}
.cc-ship-tier-icon.cc-ship-tier-icon-wealth {
background-image: url("/images/mbhh_cove/b/b1/T_Flag_Principle_Wealth_small.png");
}
.cc-ship-stat-max {
color: #34ff00;
}
.rotate-180 {
  transform: rotate(180deg);
}

Latest revision as of 03:48, 7 August 2026

/* All CSS here will be loaded for users of the MBHH skin */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');

body {
	background-image: url(/Corsair_Cove/skins/MBHH/resources/images/shade-right.png?9ba42),
	url(/Corsair_Cove/skins/MBHH/resources/images/shade-left.png?30070),
	url(/Corsair_Cove/skins/MBHH/resources/images/shade-bottom.png?ff4a7),
	url(/Corsair_Cove/skins/MBHH/resources/images/game_bgs/COVE_bg.jpg?placeholder);
	font-family: "Alegreya Sans", "Noto Sans", sans-serif;
	font-size: 18px;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body .toctitle h2 {
font-family: "Alegreya", sans-serif;
}h
#mw-site-navigation #site-navigation.sidebar-chunk .sidebar-inner h3,
#mw-site-navigation #site-tools.sidebar-chunk .sidebar-inner h3,
#mw-related-navigation #page-tools.sidebar-chunk .sidebar-inner h3 {
	font-family: "Alegreya", serif;
  font-size: 1.2em;
	font-weight: 300 !important;
	text-transform: unset;
}

input#wpSummary {
	font-family: "Noto Sans", sans-serif;
}
.oo-ui-popupWidget-popup {
	background-color: black;
}

a, a:link, .toctogglelabel {
	color: #f4cf81 !important;
}
a.new {
	color: #f35961 !important;
}

.tabber__tab, a.tabber__tab, a.tabber__tab:visited {
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    justify-content: center;
}

.tabber__tabs {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

#mw-content #toc ul a :not(img) {
	filter:none;
}

.mw-scribunto-normalOutput {
	font-family: monospace;
	color: white;
}



/* ART */



#mw-content {
  background-image: url("/images/mbhh_cove/1/15/T_BG_BlackPaperBackgroundWithCutEdges.png"), linear-gradient(to right, #131315, #0f0f11);
  background-repeat: no-repeat;
}



.mw-body .mw-parser-output h2 {
  color: #f5dcab;
}

.mw-body .mw-parser-output h2::after {
  border-bottom: none;
  background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png");
  background-size: 109% 830px;
  background-position: center -9px;
  background-repeat: no-repeat;
  width: 100%;
  height: 4px;
  overflow: hidden;
  margin-top: 2px;
  padding: 0;
}



.mw-body-content hr {
  border: none;
  background-color: transparent;
  background-image: url("/images/mbhh_cove/8/89/T_Deco_DividerlineWhite.png");
  background-size: 100% 12px;
  height: 12px;
}



.cc-ship-background img {
	display: inline-block;
	background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border-image-source: url("/images/mbhh_cove/4/4e/T_Button_SelectionBorder_Default.png") !important;
	border-image-slice: 12 !important;
	border-image-width: auto !important;
	border-image-outset: 6px !important;
}



.cc-compass-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 0;
	border-radius: 50%;
	background-color: var(--instance-path-color, transparent);
	width: var(--instance-size, 16px);
	height: var(--instance-size, 16px);
}
	.cc-compass-icon::after {
		content: "";
		position: absolute;
		top: 1px; left: 1px; right: 0; bottom: 0;
		background-image: url("/images/mbhh_cove/d/de/T_Button_Compass_Node_Round_Color.png");
		background-position: center;
		background-size: 185% 185%;
	}
	.mw-body-content .cc-compass-icon img {
		position: relative;
		line-height: 0;
		font-size: 0;
		border-radius: 50%;
		z-index: 1;
		width: var(--instance-inner-size) !important;
		height: var(--instance-inner-size) !important;
	}
	.mw-body-content .cc-compass-icon a,
	.mw-body-content .cc-compass-icon span.mw-default-size {
		display: inline-flex;
		margin: 0;
		padding: 0;
		line-height: 0;
	}



.cc-infobox-resource {
	background-image: url("/images/mbhh_cove/1/15/T_BG_BlackPaperBackgroundWithCutEdges.png");
	background-size: cover;
	border-radius: 4px;
	padding-top: 0;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 4px;
	margin-left: 40px;
	margin-bottom: 40px;
}
	.cc-infobox-resource ul, p {
		list-style: none;
		margin-left: 8px;
		position: relative;
		z-index: 1;
	}
	.cc-infobox-resource > hr:first-child {
		border: none;
		background-color: transparent;
		height: 12px;
		background-image: url("/images/mbhh_cove/7/74/T_Divider_Small.png");
		background-size: 60% 70%;
		background-repeat: repeat-x;
		background-position: center;
		margin: -4px 20px -4px 20px;
	}
	.cc-infobox-resource-header + hr {
		border: none;
		background-color: transparent;
		height: 4px;
		background-image: url("/images/mbhh_cove/f/f1/T_Divider_Center.png");
		background-size: 60% 50%;
		background-repeat: repeat-x;
		background-position: center;
		margin: 0 30px 0 30px;
	}
	.cc-infobox-resource-header {
		position: relative;
		padding: 12px;
	}
		.cc-infobox-resource-header::before {
			content: "";
			pointer-events: none;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			z-index: 0;
			border-radius: 5px;
			background-image: url("/images/mbhh_cove/4/47/T_StoneMask.png");
			background-size: cover;
			opacity: 0.02;
			mask-image: linear-gradient(to right,  transparent, black 5px, black calc(100% - 5px), transparent),
						linear-gradient(to bottom, transparent, black 5px, black calc(100% - 5px), transparent);
			mask-composite: intersect;
			-webkit-mask-image: linear-gradient(to right,  transparent, black 5px, black calc(100% - 5px), transparent),
								linear-gradient(to bottom, transparent, black 5px, black calc(100% - 5px), transparent);
			-webkit-mask-composite: source-in;
			margin: 0 5px 0 5px;
		}
	.cc-infobox-resource-footer {
		position: relative;
		background-size: cover;
		padding: 8px;
		margin: 12px 4px 4px 4px;
	}
		.cc-infobox-resource-footer::before {
			content: "";
			pointer-events: none;
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			z-index: 0;
			border-image-source: url("https://wiki.hoodedhorse.com/images/mbhh_cove/d/dd/T_BG_ContentBox.png");
			border-image-width: 5px;
			border-image-slice: 10 fill;
			border-image-repeat: stretch;
			border-image-outset: 0;
			opacity: 0.3;
		}
		.cc-infobox-resource-footer-label {
			display: block;
			text-align: center;
			position: relative;
			z-index: 1;
		}
		.cc-infobox-resource-footer > hr {
			border: none;
			background-color: transparent;
			height: 4px;
			background-image: url("/images/mbhh_cove/f/fa/T_unlock_Goldline.png");
			background-size: 60% 30%;
			background-repeat: repeat-x;
			background-position: center;
			margin: 0 4px 0 4px;
		}



.cc-infobox-building {
	background-image: url("/images/mbhh_cove/0/03/T_MainMenuBackGroundWithContent.png");
	background-size: 177% auto;
	background-position: center 0px;
	margin-top: 48px;
	margin-left: 48px;
	margin-bottom: 48px;
	padding-bottom: 48px;
}
	.cc-infobox-building-header {
		position: relative;
		margin-top: 2px;
		padding: 8px 0 12px;
		background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
		background-size: 100% 100%;
		color: black;
	}
		.cc-infobox-building-header > p {
			margin: 0;
			text-align: center;
			font-family: "Alegreya", serif;
			line-height: 1.1em;
		}
		.cc-infobox-building-header > p:first-of-type {
			font-size: 1.35em;
		}
		.cc-infobox-building-header-icon {
			position: absolute;
			z-index: 3;
			top: 0;
			transform: translateY(-100%);
			width: 100%;
			height: 40px;
			background-image: url("/images/mbhh_cove/4/48/T_PanelRoundTop.png");
			background-size: 100% auto;
			background-position: center 0px;
			background-repeat: no-repeat;
			text-align: center;
		}
			.cc-infobox-building-header-icon::before {
				content: "";
				position: absolute;
				z-index: 1;
				top: 0; left: 0; right: 0; bottom: 0;
				width: 100%;
				background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png");
				background-size: contain;
				background-position: center 0px;
				background-repeat: no-repeat;
			}
				.cc-infobox-building-header-icon img {
					position: relative;
					z-index: 3;
					width: 48px;
					height: 48px;
					top: -14px;
				}
		.cc-infobox-building-header-theme-well {
			position: relative;
			z-index: 1;
			height: 115px;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
		}
			.cc-infobox-building-header-theme-generic {
				background-image: url("/images/mbhh_cove/c/c8/T_PanelBanner_Placeholder.png");
			}
			.cc-infobox-building-header-theme-camp {
				background-image: url("/images/mbhh_cove/1/18/T_StructureBanner_PirateCamp.png");
			}
			.cc-infobox-building-header-theme-galley {
				background-image: url("/images/mbhh_cove/a/a3/T_StructureBanner_galley.png");
			}
			.cc-infobox-building-header-theme-tavern {
				background-image: url("/images/mbhh_cove/a/ae/T_StructureBanner_tavern.png");
			}
			.cc-infobox-building-header-theme-pier {
				background-image: url("/images/mbhh_cove/f/fa/T_StructureBanner_pier.png");
			}
			.cc-infobox-building-header-theme-defense {
				background-image: url("/images/mbhh_cove/7/71/T_StructureBanner_defense_towers.png");
			}
			.cc-infobox-building-header-theme-notoriety {
				background-image: url("/images/mbhh_cove/7/75/T_StructureBanner_notoriety.png");
			}
			.cc-infobox-building-header-theme-empire {
				background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_empire.png");
			}
			.cc-infobox-building-header-theme-seafaring {
				background-image: url("/images/mbhh_cove/f/f9/T_StructureBanner_sea.png");
			}
			.cc-infobox-building-header-theme-wealth {
				background-image: url("/images/mbhh_cove/4/4e/T_StructureBanner_wealth.png");
			}
			.cc-infobox-building-header-theme-well::after {
				content: "";
				position: absolute;
				top: -40px; left: -2px; right: -2px; bottom: 0;
				z-index: 2;
				background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png");
				background-size: 100% 100%;
				background-position: center center;
				background-repeat: no-repeat;
				opacity: 0.45;
			}
	.cc-infobox-building-description {
		padding: 16px;
		text-align: left;
	}
	.cc-infobox-building-section {
		margin-top: 36px;
	}
		.cc-infobox-building-section hr {
			border: none;
			background-color: transparent;
			height: 4px;
			background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
			background-size: 50% 30%;
			background-repeat: repeat-x;
			background-position: center;
			margin: 0 10% 12px 10%;
		}
		.cc-infobox-building-section-production-table {
			margin: 36px 36px 0 36px;
		}



.cc-infobox-quest {
	float: right;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-left: 48px;
	margin-bottom: 48px;
}
	.cc-infobox-quest-background-generic::before, 
	.cc-infobox-quest-background-notoriety::before, 
	.cc-infobox-quest-background-empire::before, 
	.cc-infobox-quest-background-seafaring::before, 
	.cc-infobox-quest-background-wealth::before {
		content: "";
		pointer-events: none;
		position: absolute;
		z-index: 0;
		top: 0; right: 5px; bottom: 0; left: 5px;
		background-size: 100% auto;
		background-position: bottom center;
	}
		.cc-infobox-quest-background-generic::before {
			background-image: url("/images/mbhh_cove/d/d8/T_BG_JourneyComplete.png");
			background-size: 100% 100%;
			bottom: -6px;
			opacity: 0.3;
		}
		.cc-infobox-quest-background-notoriety::before {
			background-image: url("/images/mbhh_cove/5/5a/T_BG_challenges_Notoriety.png");
		}
		.cc-infobox-quest-background-empire::before {
			background-image: url("/images/mbhh_cove/4/4d/T_BG_challenges_Empire.png");
		}
		.cc-infobox-quest-background-seafaring::before {
			background-image: url("/images/mbhh_cove/d/d3/T_BG_challenges_Sea.png");
		}
		.cc-infobox-quest-background-wealth::before {
			background-image: url("/images/mbhh_cove/f/f0/T_BG_challenges_Wealth.png");
		}
	.cc-infobox-quest-title {
		position: relative;
		z-index: 2;
		padding: 12px;
		margin-left: 2px;
		margin-right: 2px;
		line-height: 1.1;
		font-family: "Alegreya", serif;
		font-weight: bold;
	}
		.cc-infobox-quest-title::before {
			content: "";
			pointer-events: none;
			position: absolute;
			z-index: 1;
			top: 0; right: 0; bottom: 0; left: 0;
			background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
			background-size: 100% 100%;
		}
		.cc-infobox-quest-title > span {
			position: relative;
			z-index: 2;
			color: black;
		}
	.cc-infobox-quest-path-banner {
		position: relative;
		top: -10px;
		margin-bottom: -14px;
		z-index: 1;
		padding-top: 12px;
		padding-bottom: 4px;
		margin-left: 4px;
		margin-right: 4px;
		line-height: 1.0;
		font-family: "Alegreya", serif;
		font-size: 0.9em;
		text-align: center;
	}
		.cc-infobox-quest-path-banner::before {
			content: "";
			pointer-events: none;
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			z-index: 0;
			background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
			background-size: 100% 100%;
		}
		.cc-infobox-quest-path-banner > span {
			position: relative;
			z-index: 2;
			color: white;
		}
	.cc-infobox-quest-illustration-well {
		position: relative;
	}
		.cc-infobox-quest-illustration-well::after {
			content: "";
			position: absolute;
			top: -55px; left: 0; right: 0; bottom: 0;
			z-index: 2;
			background-image: url("/images/mbhh_cove/2/2c/T_BannerGlow.png");
			background-size: 100% 100%;
			background-position: center center;
			background-repeat: no-repeat;
			opacity: 0.4;
		}
	.cc-infobox-quest-region {
		position: relative;
		margin-top: 8px;
		text-align: center;
		font-family: "Alegreya", serif;
		font-weight: bold;
	}
	.cc-infobox-quest-section-description {
		position: relative;
		padding: 12px 30px;
		line-height: 1.3;
	}
	.cc-infobox-quest-section-difficulty, .cc-infobox-quest-section-rewards {
		position: relative;
		text-align: center;
		margin: 0 24px 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
		.cc-infobox-quest-section-difficulty span, .cc-infobox-quest-section-rewards span {
			position: relative;
			font-family: "Alegreya", serif;
		}
		.cc-infobox-quest-section-difficulty div, .cc-infobox-quest-section-rewards div {
			z-index: 2;
			font-family: "Alegreya Sans", sans-serif;
		}
		.cc-infobox-quest-section-difficulty hr, .cc-infobox-quest-section-rewards hr {
			border: none;
			background-color: transparent;
			height: 6px;
			background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
			background-size: 50% 30%;
			background-repeat: repeat-x;
			background-position: center;
			margin: 0 10% 12px 10%;
		}



.cc-infobox-ship {
	float: right;
	position: relative;
	max-width: 360px;
	margin-left: 48px;
	margin-bottom: 64px;
	margin-top: 58px;
	padding-bottom: 36px;
	background-image: url("/images/mbhh_cove/8/80/T_MainMenuBackGround.png");
	background-size: 100% calc(100% + 10px);;
	background-position: top center;
	background-repeat: no-repeat;
}
	.cc-infobox-ship::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: -46px; right: 0; bottom: 0; left: 0;
		border-image-source: url("/images/mbhh_cove/b/b8/T_BG_PanelLongWithGold.png");
		border-image-slice: 50 9 10 9;
		border-image-width: auto;
		border-image-outset: 4px;
		border-image-repeat: stretch;
		opacity: 0.2;
	}
	.cc-infobox-ship hr {
		border: none;
		background-color: transparent;
		height: 6px;
		background-image: url("/images/mbhh_cove/7/72/T_Deco_DividerlineGoldWide.png");
		background-size: 50% 30%;
		background-repeat: repeat-x;
		background-position: center;
		margin: 0 10% 12px 10%;
		opacity: 0.75;
	}
	.cc-infobox-ship-header::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: -50px; right: 0; bottom: 0; left: 0;
		background-image: url("/images/mbhh_cove/2/2e/T_Deco_Panel.png");
		background-size: 75% auto;
		background-position: center 0px;
		background-repeat: no-repeat;
	}
		.cc-infobox-ship-header-tier {
			position: absolute;
			z-index: 3;
			width: 100%;
			top: -58px;
			text-align: center;
		}
		.cc-infobox-ship-header-name {
			position: relative;
			z-index: 2;
			padding-top: 4px;
			padding-bottom: 10px;
			font-family: "Alegreya", serif;
			font-weight: bold;
			color: black;
			text-align: center;
		}
			.cc-infobox-ship-header-name::before {
				content: "";
				pointer-events: none;
				position: absolute;
				top: -6px; right: -6px; bottom: 0; left: -6px; 
				z-index: -1;
				background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
				background-size: 100% 100%;
				background-position: center;
				background-repeat: no-repeat;
			}
		.cc-infobox-ship-header-class {
			position: relative;
			z-index: 1;
			padding-top: 2px;
			padding-bottom: 8px;
			font-family: "Alegreya", serif;
			font-size: 0.9em;
			line-height: 1.0;
			text-align: center;
		}
			.cc-infobox-ship-header-class::before {
				content: "";
				pointer-events: none;
				position: absolute;
				top: -12px; right: -2px; bottom: 0; left: -2px; 
				z-index: -1;
				background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
				background-size: 100% 100%;
				background-position: center;
				background-repeat: no-repeat;
			}
		.cc-infobox-ship-header-icon {
			text-align: center;
			}
			.cc-infobox-ship-header-description {
			margin: 12px 36px 0;
			font-size: 0.8em;
			line-height: 1.3em;
		}
	.cc-infobox-ship-stats-title, 
	.cc-infobox-ship-crew-title, 
	.cc-infobox-ship-construction-title,
	.cc-infobox-ship-unlock-title {
		text-align: center;
		font-family: "Alegreya", serif;
		margin-top: 24px;
	}
		.cc-infobox-ship-stats-fullrow {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 10% 6px;
		}
			.cc-infobox-ship-stats-fullrow div:nth-child(2) {
				font-weight: bold;
			}
		.cc-infobox-ship-stats-row {
			display: flex;
			justify-content: space-evenly;
			align-items: flex-end;
			margin: 24px 10% 0;
		}
			.cc-infobox-ship-stats-row-col {
				text-align: center;
				line-height: 1.3;
			}
				.cc-infobox-ship-stats-row-col div:not(:first-child) {
					font-weight: bold;
				}
		.cc-infobox-ship-crew-row {
			display: flex;
			justify-content: center;
			gap: 12px;
		}
			.cc-infobox-ship-crew-row-col {
				text-align: center;
			}
				.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced {
					position: relative;
					z-index: 1;
				}
					.cc-infobox-ship-crew-row-col .cc-infobox-ship-crew-row-col-advanced::after {
						content :"";
						position: absolute;
						top: 0; right: 0; bottom: 0; left: 0;
						z-index: 5;
						background-image: url("/images/mbhh_cove/6/66/T_PremiumCrewIndicator.png");
						background-size: 100% 100%;
						background-position: center center;
					}
				.cc-infobox-ship-crew-row-col div:first-child {
					font-size: 0.8em;
				}
				.cc-infobox-ship-crew-row-col div:not(:first-child) {
					font-weight: bold;
				}
		.cc-infobox-ship-construction-pier {
			text-align: center;
			margin-bottom: 16px;
		}
		.cc-infobox-ship-construction-table {
			margin: 0 10%;
		}
			.cc-infobox-ship-construction-table table {
				margin: 0 auto;
				width: fit-content;
				border-spacing: 3px;
			}
				.cc-infobox-ship-construction-table-qty {
					font-weight: bold;
				}
		.cc-infobox-ship-unlock-requirements {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 10%;
		}
			.cc-infobox-ship-unlock-requirements-points {
				display: flex;
				gap: 4px;
			}
				.cc-infobox-ship-unlock-requirements-points > div {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 0 4px;
				}
					.cc-infobox-ship-unlock-requirements-points-notoriety {
						background-color: #46592d;
					}
					.cc-infobox-ship-unlock-requirements-points-empire {
						background-color: #6f302a;
					}
					.cc-infobox-ship-unlock-requirements-points-seafaring {
						background-color: #334661;
					}
					.cc-infobox-ship-unlock-requirements-points-wealth {
						background-color: #69154a;
					}



.cc-reward-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 84px;
  height: 116px;
  padding: 10px 6px 4px 6px;
  border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
  border-image-slice: 11 fill;
  border-image-width: 4;
  font-size: 125%;
}



.cc-quest-page-timeline {
  margin-left: -36px;
  padding: 8px 0 18px 120px;
  background-image: url("/images/mbhh_cove/d/df/T_SubtitleBackground_Edge.png");
  background-size: 100% 100%;
  background-position: -100px center;
  background-repeat: no-repeat;
}



.cc-page-notice-spoiler {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: auto;
	padding: 8px 56px 12px;
	margin-bottom: 24px;
}
	.cc-page-notice-spoiler::before {
		content: "";
		pointer-events: none;
		position: absolute;
		z-index: 0;
		top: 0; right: 0; bottom: 0; left: 0;
		border-image-source: url("/images/mbhh_cove/a/a6/T_Banner_Medium_scaleable.png");
		border-image-slice: 56 56 53 63 fill;
		border-image-width: 35px 55px;
		border-image-repeat: stretch;
		border-image-outset: 24px 2px 16px;
		filter: saturate(90%) invert(13%) sepia(90%) saturate(822%) hue-rotate(329deg) brightness(60%) contrast(95%);
	}
	.cc-page-notice-spoiler img {
		position: relative;
		background-image: url("/images/mbhh_cove/9/9a/T_warning_BloodStrong.png");
		background-size: 100% 100%;
	}
	.cc-page-notice-spoiler div {
		position: relative;
		font-family: "Alegreya", serif;
	}



.toc {
	border: none;
	background-color: transparent;
}
	.toc::before {
		content: "";
		display: block;
		width: 100%;
		height: 64px;
		background-image: url("/images/mbhh_cove/2/21/T_Divider_Top.png");
		background-position: center;
		background-size: 80% 60%;
		background-repeat: repeat-x;
	}
	.toc::after {
		content: "";
		display: block;
		width: 100%;
		height: 4px;
		background-image: url("/images/mbhh_cove/f/f1/T_Divider_Center.png");
		background-position: center;
		background-size: 70% 70%;
		background-repeat: repeat-x;
		margin-top: 16px;
	}
	.toc > .toctitle {
		border: none;
	}
		.toc > .toctitle::after {
			content: "";
			display: block;
			width: 100%;
			height: 12px;
			background-image: url("/images/mbhh_cove/7/74/T_Divider_Small.png");
			background-position: center;
			background-size: 70% 70%;
			background-repeat: repeat-x;
			margin-top: 12px;
		}



table.cc-flow-diagram {
	display: inline-block;
	border-collapse: collapse; 
	border-spacing: 0; 
	line-height: 0; 
	font-size: 0;
}
table.cc-flow-diagram td {
	padding: 0;
}


.cc-panel-banner {
	position: relative;
	display: inline-block;
	padding: 12px;
	min-width: 200px;
	line-height: 1.1;
	font-family: "Alegreya", serif;
}
	.cc-panel-banner::before {
		content: "";
		pointer-events: none;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 0;
		background-image: url("/images/mbhh_cove/c/c3/T_BG_PanelHeader03.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
		.cc-panel-banner > span {
			position: relative;
			z-index: 1;
		}
	.cc-panel-recolor-gray::before{
		filter: brightness(0) saturate(100%) invert(4%) sepia(1%) saturate(1309%) hue-rotate(314deg) brightness(110%) contrast(75%);
	}
	.cc-panel-recolor-notoriety::before {
		filter: brightness(0) saturate(100%) invert(22%) sepia(35%) saturate(545%) hue-rotate(43deg) brightness(97%) contrast(96%);
	}
	.cc-panel-recolor-empire::before {
		filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(822%) hue-rotate(329deg) brightness(92%) contrast(90%);
	}
	.cc-panel-recolor-seafaring::before {
		filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(755%) hue-rotate(176deg) brightness(91%) contrast(88%);
	}
	.cc-panel-recolor-wealth::before {
		filter: brightness(0) saturate(100%) invert(11%) sepia(76%) saturate(1604%) hue-rotate(292deg) brightness(97%) contrast(105%);
	}



.cc-pirate-icon {
	position: relative;
	display: inline-block;
	border: var(--instance-sized-border-width) solid transparent;
	border-image-source: url("/images/mbhh_cove/0/0e/T_Button_ChoiceCard_Default.png");
	border-image-width: var(--instance-sized-border-width);
	border-image-slice: 12;
	border-image-outset: 0;
	background-size: 99% 99%;
	background-position: center center;
	background-repeat: no-repeat;
}
	.cc-pirate-icon-color-red {
		background-image: url("/images/mbhh_cove/d/dd/T_PopulationBackground_Red.png");
	}
	.cc-pirate-icon-color-yellow {
		background-image: url("/images/mbhh_cove/0/0b/T_PopulationBackground_Yellow.png");
	}
	.cc-pirate-icon-color-green {
		background-image: url("/images/mbhh_cove/f/f0/T_PopulationBackground_Green.png");
	}
	.cc-pirate-icon-color-purple {
		background-image: url("/images/mbhh_cove/0/05/T_PopulationBackground_Pink.png");
	}
	.cc-pirate-icon-color-blue {
		background-image: url("/images/mbhh_cove/a/a4/T_PopulationBackground_Blue.png");
	}
	.cc-pirate-icon-color-gray {
		background-image: url("/images/mbhh_cove/7/76/T_PopulationBackground_Gray.png");
	}



.cc-producer-icon {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 4px;
}
	.cc-producer-icon::before {
		content: "";
		pointer-events: none;
		position: absolute;
		z-index: 0;
		top: 0; right: 0; bottom: 0; left: 0;
		background-image: url("/images/mbhh_cove/e/e3/T_BG_BlackSmoke_Round.png"), url("/images/mbhh_cove/a/a4/T_ICO_BuildingSign_Shield.png");
		background-size: 100% 90%, 110% 100%;
		background-position: center center, center center;
		background-repeat: no-repeat;
		opacity: 0.5;
	}
	.cc-producer-icon img {
		position: relative;
		z-index: 1;
	}



.cc-ship-tier-icon {
	display: inline-block;
	width: var(--instance-width);
	height: var(--instance-width);
	line-height: calc(var(--instance-width) * 0.9);
	background-size: 115% 115%;
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
	font-weight: bold;
	font-size: var(--instance-font-size);
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
}
	.cc-ship-tier-icon.cc-ship-tier-icon-none {
		background-image: url("/images/mbhh_cove/4/4e/T_ICO_BuildingSign_ShieldFive.png");
	}
	.cc-ship-tier-icon.cc-ship-tier-icon-notoriety {
		background-image: url("/images/mbhh_cove/6/63/T_Flag_Principle_Notoriety_Small.png");
	}
	.cc-ship-tier-icon.cc-ship-tier-icon-empire {
		background-image: url("/images/mbhh_cove/2/25/T_Flag_Principle_Empire_Small.png");
		background-position: calc(50% + 1px) calc(50% - 1px);
	}
	.cc-ship-tier-icon.cc-ship-tier-icon-seafaring {
		background-image: url("/images/mbhh_cove/d/db/T_Flag_Principle_Sea_Small.png");
	}
	.cc-ship-tier-icon.cc-ship-tier-icon-wealth {
		background-image: url("/images/mbhh_cove/b/b1/T_Flag_Principle_Wealth_small.png");
	}



.cc-ship-stat-max {
	color: #34ff00;
}



.rotate-180 {
  transform: rotate(180deg);
}