MediaWiki:Common.css

From Dragalia Lost Wiki
Revision as of 21:06, 27 March 2020 by >Eave (allow both width and height to change based on which dimension's max bound is reached first)
Jump to navigation Jump to search

CSS and Javascript changes must comply with the wiki design rules.

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Clear the cache in Tools → Preferences
/*Narrow Font Import*/

@import url('https://fonts.googleapis.com/css?family=BenchNine:700');

.narrowfont {
	font-family: BenchNine;
}

/***********/
/* Layout  */
/***********/

html {
	overflow-y: scroll;
}

body {
    background-color: #f6f6f6;
    background-image: url(/media/9/93/Background-header.png); /* [[File:Background-header.png]] */
    background-repeat: no-repeat;
}

body.page-Dragalia_Lost_Wiki.action-view #firstHeading { display: none; }

#content {
    box-shadow: rgba(0,0,0,0.15) 0 0.05em 0.25em;
}

.mw-body {
    border: 1px solid #71a971;
}

.mw-body-content {
    z-index: 1;
}

a.new:link {
	color: #BA0000;
}

a:link {
	color: #3F56AD;
}

a:visited,
a.external:visited {
	color: #3F56AD;
}

.mw-wiki-logo {
    background-image: url(/media/b/b1/Wiki_main_logo.png); /* [[File:Wiki_main_logo.png]] */
}

#mw-page-base {
	background: transparent;
}

#mw-head-base {
	background: transparent;
}

#left-navigation {
    background: url(/media/5/52/Layout-tabs-background.png); /* [[File:Layout-tabs-background.png]] */
    margin-top: 39px;
}

#right-navigation {
    background: url(/media/5/52/Layout-tabs-background.png); /* [[File:Layout-tabs-background.png]] */
    margin-top: 39px;
    margin-right: 10px;
}

div.vectorTabs,
div.vectorTabs ul li {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;	
}

div.vectorTabs ul {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;	
}

div.vectorTabs span {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;	
}

div.vectorTabs li a,
div.vectorTabs li a:visited {
    color: #ffffff;
}

div.vectorTabs li.selected {
    background: rgba(0,0,0,0) url(/media/7/71/Layout-tabs-background-selected.png) repeat-x scroll center bottom; /* [[File:Layout-tabs-background-selected.png]] */
}

div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited,
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited {
    color: #ffffff !important;
}

div.vectorMenu h3 span {
    color: #ffffff;
}

div#mw-head div.vectorMenu h3,
div.vectorMenu h3 > a {
    background-image: none;
}

#p-sharing-label > a {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/MediaWiki_Vector_skin_action_arrow.svg);
    background-image: -o-linear-gradient(transparent,transparent),url(https://upload.wikimedia.org/wikipedia/commons/f/f1/MediaWiki_Vector_skin_action_arrow.svg);
}

div#simpleSearch {
	max-width: 16em;
}

#mw-panel .portal {
	background-image: url(https://gamepedia.cursecdn.com/dragalialost_gamepedia_en/8/85/Portal-linebreak.png);
	background-position: left top;
	background-repeat: no-repeat;
	direction: ltr;
	margin: 0 0.6em 0 0.7em;
	padding: 0.25em 0;
}

div#mw-panel div.portal h3,
#mw-panel.collapsible-nav .portal h3 a,
#mw-panel.collapsible-nav .portal.collapsed h3 a {
    color: #4d4d4d;
}

#ca-edit,
#ca-ve-edit,
#ca-view {
	margin-left: 3px;
}

div#mw-panel.collapsible-nav div.portal#p-socialProfiles {
        margin: 0 0.6em 0 0.7em;
}

#mw-panel.collapsible-nav .portal h3 {
        padding: 4px 0 3px 20px;
}

div#mw-panel div.portal div.body {
        background-image: none;
}

#p-navigation {
        background-image: none !important;
}

.socialSidebar {
        width: 100%;
}

/* Main page */

body.page-Main_Page h1.firstHeading {
	display: none;
}

.mp-portal-row {
	display: flex;
	flex-flow: row nowrap;
	margin: 0;
	align-items: self-start;
	justify-content: space-around;
	text-align: center;
	font-weight: bold;
	max-width: 100%;
}

.mp-portal-row div {
	flex: 0 1 auto;
	margin: 4px;
}

@media only screen and (max-width: 1000px) {
	.mp-portal-row {
		flex-flow: row wrap;
	}
	
	.mp-portal-row > div {
		max-width: 100px;
	}
}

.mp-portal-icon a img {
	width: 100%;
	min-width: 50px;
	max-width: 150px;
	height: auto;
}

.mp p img {
	height: auto;
}

.mp-menu-item {
	text-align: left;
	width: 165px;
	display: inline-block;
	margin: 5px 15px;
	vertical-align: top;
}

.mp-menu-item-header {
	border-bottom: 1px solid #505050;
	font-size: 120%;
	font-variant: small-caps;
	color: black;
}

.mp-menu-item-body {
	column-count: 1;
	margin-top: 5px;
}

.mp-menu-item-body>ul {
	margin-top: 0;
}

.mp-news-container {
	width: 100%;
    max-height:249px;
    overflow:hidden;
    text-overflow: ellipsis;
    content: "";
    position:relative;
}

.mp-news-container:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 200px, white);
    pointer-events: none;
}

.mp-container-small img,
.mp-container-mid img,
.mp-container-large img {
	height: auto;
}

.mp-container-large,
.mp-container-mid {
	width: 100%;
}

.mp-container-small {
	width: 50%;
}

.mp-container-40 {
	width: 100%;
}

.mp-container-20 {
	width: 100%;
}

.mp-new-content-row {
	display:flex;
	justify-content:center;
	font-size:0.9em;
}

#mp-navigation {
	order: 2;
	width: 100%;
}

@media (min-width: 1000px) {
	.mp-container-40 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (min-width: 1200px) {
    .mp-container-large {
	    flex-basis: 66.667%;
	    max-width: 66.667%;
	}
	
	.mp-container-mid {
	    flex-basis: 50%;
	    max-width: 50%;
	}
	
	.mp-container-small {
	    flex-basis: 33.333%;
	    max-width: 33.333%;
	}
	
    .mp-container-40 {
		flex-basis: 39%;
		max-width: 39%;
	}
	.mp-container-20 {
		flex-basis: 22%;
		max-width: 22%;
	}
    
	#mp-navigation {
		order: 0;
		width: initial;
	}
}

/************/
/* Elements */
/************/


/* wikitable */

table.wikitable> :first-child>tr:first-child,
table.wikitable>tbody>tr.heading,
table.wikitable> :first-child>tr:first-child>th,
table.wikitable>tbody>tr.heading>* {
	background-color: #4d905e;
	border-color: #336642;
}

.center {
	width:auto;
}

/*table.wikitable> :first-child>tr:first-child a,*/
table.wikitable>tbody>tr.heading a {
	color: #a7f9be
}

table.wikitable>tbody>tr>th,
table.wikitable>tfoot>tr>th,
table.wikitable>thead>tr>th,
table.wikitable>tbody>tr>th {
	background-color: #4d905e;
	border-color: #336642;
}

table.wikitable>tbody>tr:nth-child(odd),
table.wikitable>tbody>tr:nth-child(odd) {
	background-color: #e3f2ea;
}

table.wikitable {
	border: 0 solid;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .9230769231em;
	text-align: left;
	clear: none;
	position: relative;
	vertical-align: top;
	margin: 10px 0;
	padding: 0;
	max-width: 100%;
}

table.wikitable>caption {
	font-weight: bold
}

table.wikitable>thead,
table.wikitable>tbody {
	border: 0 solid #aaa\0/
}

table.wikitable tr {
	border: 1px solid #aaa\0/;
	text-align: left;
	border-color: #AAA;
}

 :root table.wikitable tr {
	border-top-width: 0;
	border-bottom-width: 0;
}

table.wikitable>*>tr> :first-child {
	border-left: 1px solid #AAA;
}

table.wikitable>*>tr> :last-child {
	border-right: 1px solid #AAA;
}

table.wikitable>tbody>tr:last-child,
table.wikitable>tbody>tr:last-child>*,
table.wikitable>tfoot>tr:last-child>*,
table.wikitable>caption {
	border-bottom: 1px solid #AAA;
}

table.wikitable>tbody:first-child>tr:first-child>th,
table.wikitable>tbody>tr.heading>*,
table.wikitable>thead>tr:first-child>* {
	padding: .5em;
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
}

table.wikitable>tbody>tr>th,
table.wikitable>tbody>tr>td,
table.wikitable>tfoot>tr>th {
	line-height: 1.667em;
	padding: .25em .5em;
}

table.wikitable tr>th,
table.wikitable[class*=center] tr {
	text-align: center;
}

table.wikitable[class*=left] tr {
	text-align: left;
}

table.wikitable[class*=right] tr {
	text-align: right;
}

table.wikitable[class*=middle] tr {
	vertical-align: middle;
}

table.wikitable[class*=top] tr {
	vertical-align: top;
}

table.wikitable[class*=bottom] tr {
	vertical-align: bottom;
}

table.wikitable> :first-child>tr:first-child,
table.wikitable>tbody>tr.heading {
	background-color: #F3F3F3;
/* 	border: 1px solid #aaa; */
}

table.wikitable>tbody>tr>th,
table.wikitable>tfoot>tr>th {
	background-color: #E7E7E7;
	border-color: #AAA;
}

table.wikitable>tbody>tr:nth-child(odd) {
	background-color: #F3F3F3;
	border-color: #AAA;
}

table.wikitable>tbody,
table.wikitable>tbody>tr.heading,
table.wikitable>tbody>tr>[rowspan],
table.wikitable>tbody>tr>[colspan] {
	border: 1px solid #AAA;
}

table.wikitable> :first-child>tr:first-child+tr [rowspan],
table.wikitable> :first-child>tr:first-child+tr [colspan] {
	border-top-width: 0;
}

table.wikitable .line,
table.wikitable .line-bottom {
	border-bottom-width: 1px!important;
	border-bottom-style: solid;
}

table.wikitable .line-top {
	border-top-width: 1px!important;
	border-top-style: solid;
	border-top-color: #AAA;
}

table.wikitable .line-left {
	border-left-width: 1px!important;
	border-left-style: solid;
	border-left-color: #AAA;
}

table.wikitable .line-right {
	border-right-width: 1px!important;
	border-right-style: solid;
	border-right-color: #AAA;
}

table.wikitable table {
	background-color: transparent;
	padding: 0;
	margin: 0;
}

table.borderless>*>tr>td {
	border: none;
}

table.borderless>tbody>tr>[colspan] {
	border: none;
}

table.fullwidth {
	width: 100%;
}

.wikitable>*>tr>th a:visited,
.wikitable>*>tr>th a:link {
	color: #FFFFFF !important;
}

.wikitable th a {
	color: #c7ffff;
}

/* cargoTable */

table.cargoTable> :first-child>tr:first-child,
table.cargoTable>tbody>tr.heading,
table.cargoTable> :first-child>tr:first-child>*,
table.cargoTable>tbody>tr.heading>* {
	background-color: #4d905e;
	border-color: #336642;
}

table.cargoTable> :first-child>tr:first-child a,
table.cargoTable>tbody>tr.heading a {
	color: #a7f9be
}

table.cargoTable>tbody>tr>th,
table.cargoTable>tfoot>tr>th,
table.cargoTable>thead>tr>th,
table.cargoTable>tbody>tr>th {
	background-color: #4d905e;
	border-color: #336642;
}

table.cargoTable>tbody>tr:nth-child(odd),
table.cargoTable>tbody>tr:nth-child(odd) {
	background-color: #e3f2ea;
}

table.cargoTable {
	border: 0 solid;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .9230769231em;
	text-align: left;
	clear: none;
	position: relative;
	vertical-align: top;
	margin: 10px 0;
	padding: 0;
	max-width: 100%;
	width: 100%;
}

table.cargoTable>caption {
	font-weight: bold
}

table.cargoTable>thead,
table.cargoTable>tbody {
	border: 0 solid #aaa\0/
}

table.cargoTable tr {
	border: 1px solid #aaa\0/;
	text-align: left;
	border-color: #AAA;
	text-align: center;
}

 :root table.cargoTable tr {
	border-top-width: 0;
	border-bottom-width: 0;
}

table.cargoTable>*>tr> :first-child {
	border-left: 1px solid #AAA;
}

table.cargoTable>*>tr> :last-child {
	border-right: 1px solid #AAA;
}

table.cargoTable>tbody>tr:last-child,
table.cargoTable>tbody>tr:last-child>*,
table.cargoTable>tfoot>tr:last-child>*,
table.cargoTable>caption {
	border-bottom: 1px solid #AAA;
}

table.cargoTable>tbody:first-child>tr:first-child>*,
table.cargoTable>tbody>tr.heading>*,
table.cargoTable>thead>tr:first-child>* {
	padding: .5em;
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
}

table.cargoTable>tbody>tr>th,
table.cargoTable>tbody>tr>td,
table.cargoTable>tfoot>tr>th {
	line-height: 1.667em;
	padding: .25em .5em;
}

table.cargoTable tr>th,
table.cargoTable[class*=center] tr {
	text-align: center;
}

table.cargoTable[class*=left] tr {
	text-align: left;
}

table.cargoTable[class*=right] tr {
	text-align: right;
}

table.cargoTable[class*=middle] tr {
	vertical-align: middle;
}

table.cargoTable[class*=top] tr {
	vertical-align: top;
}

table.cargoTable[class*=bottom] tr {
	vertical-align: bottom;
}

table.cargoTable> :first-child>tr:first-child,
table.cargoTable>tbody>tr.heading {
	background-color: #EEE;
	border: 1px solid #aaa;
}

table.cargoTable>tbody>tr>th,
table.cargoTable>tfoot>tr>th {
	background-color: #E7E7E7;
	border-color: #AAA;
}

table.cargoTable>tbody>tr:nth-child(odd) {
	background-color: #F3F3F3;
	border-color: #AAA;
}

table.cargoTable>tbody,
table.cargoTable>tbody>tr.heading,
table.cargoTable>tbody>tr>[rowspan],
table.cargoTable>tbody>tr>[colspan] {
	border: 1px solid #AAA;
	vertical-align: middle;
}

table.cargoTable> :first-child>tr:first-child+tr [rowspan],
table.cargoTable> :first-child>tr:first-child+tr [colspan] {
	border-top-width: 0;
}

table.cargoTable .line,
table.cargoTable .line-bottom {
	border-bottom-width: 1px!important;
	border-bottom-style: solid;
}

table.cargoTable .line-top {
	border-top-width: 1px!important;
	border-top-style: solid;
	border-top-color: #AAA;
}

table.cargoTable .line-left {
	border-left-width: 1px!important;
	border-left-style: solid;
	border-left-color: #AAA;
}

table.cargoTable .line-right {
	border-right-width: 1px!important;
	border-right-style: solid;
	border-right-color: #AAA;
}

table.cargoTable table {
	background-color: transparent;
	padding: 0;
	margin: 0;
}

table.borderless>*>tr>td {
	border: none;
}

table.borderless>tbody>tr>[colspan] {
	border: none;
}

table.fullwidth {
	width: 100%;
}

.cargoTable>*>tr>th a:visited,
.cargoTable>*>tr>th a:link {
	color: #FFFFFF !important;
}

.cargoTable th a {
	color: #c7ffff;
}

table.lightblue > * > tr > th {
    background-color: #e6f7ff !important;
    border-color: skyblue !important;
}
table.lightblue>tbody:first-child>tr:first-child>th,
table.lightblue>tbody>tr.heading>*,
table.lightblue>thead>tr:first-child>* {
	color: #000;
	text-shadow: none;
}

table.darkred > * > tr > th {
    background-color: #550000 !important;
    border-color: #1f0101 !important;
}

table.darkpurple > * > tr > th {
    background-color: #6204a0 !important;
    border-color: #1f0101 !important;
}


/* Panel */

.panel {
	border: 1px solid #5a5a5a;
	margin: 2px;
}

.panel-heading {
	position: relative;
	text-align: center;
	font-weight: bold;
	color: #1f4c1f;
	margin: 5px;
	font-size: 1.5em;
	font-variant-caps: small-caps;
}

.panel-body {
	position: relative;
    padding: 5px 15px;;
}

/* TermDescription */
.dt-term {
    display: inline-block;
    width: 120px;
    text-align: right;
    padding: 3px 8px 3px 0;
    margin: 0 -6px 0 0;
    border-right: 3px #528e52 solid;
    font-weight: bold;
    vertical-align: top;
}

.dd-description {
    display: inline-block;
    width: 150px;
    text-align: left;
    padding: 3px 0 3px 6px;
    border-left: 1px #528e52 solid;
    vertical-align: top;
}

/* Ambox */
.ambox {
	background-color: #f8f9fa;
	border-bottom-color: #383838;
	border-right-color: #383838;
	border-top-color: #383838;
	border-collapse: collapse;
	margin: 0 auto 6px auto;
	width: 80%;
}

.ambox tr {
	border: 1px solid #a2a9b1;
}

.ambox-gray {
	border-left-color: #383838;
}

.ambox.ambox-tiny {
	font-size: 90%;
	margin: 2px 0;
	width: auto;
}

.ambox+.ambox {
	margin-top: -2px;
}

.ambox-text-title {
	font-weight: 700;
}

.ambox-text {
	padding: 0.25em 1em;
}

.ambox-image {
	padding: 0;
	text-align: center;
	width: 80px;
}

.ambox-tiny .ambox-image {
	padding: 2px 0.5em;
	text-align: left;
	width: auto;
}


/* Ambox colors */

.ambox-blue {
	border-left: 10px solid #1e90ff;
}

.ambox-red {
	border-left: 10px solid #b22222;
}

.ambox-orange {
	border-left: 10px solid #f28500;
}

.ambox-yellow {
	border-left: 10px solid #f4c430;
}

.ambox-purple {
	border-left: 10px solid #9932cc;
}

.ambox-gray {
	border-left: 10px solid #bba;
}

.ambox-green {
	border-left: 10px solid #228b22;
}


/* Ambox small text */

.amsmalltext {
	font-size: smaller;
	margin-top: 0.5em;
}


/* Blockquote */

blockquote {
	font-size: 14pt;
	width: 60%;
	margin: auto;
	font-family: Catamaran;
	font-style: italic;
	color: #555555;
	padding: 1.2em 30px 1.2em 75px;
	border-left: 8px solid #336699;
	line-height: 1.3;
	position: relative;
	background: #EDEDED;
}

blockquote::before {
	font-family: Arial;
	content: "\201C";
	color: #336699;
	font-size: 4em;
	position: absolute;
	left: 10px;
	top: -10px;
}

blockquote::after {
	content: '';
}

blockquote span {
	display: block;
	color: #333333;
	font-style: normal;
	font-weight: bold;
	margin-top: 1em;
}

/* Image tile */
.image-tile {
    position: relative;
    height: 44px;
    width: 120px;
    margin: 5px;
    display: inline-block;
    overflow: hidden;
}

.image-tile.selectable {
    opacity: 0.4;
}

.image-tile.selectable:hover {
    opacity: 0.85;
}

.image-tile-text {
position: absolute;
    width: 100%;
    text-align: center;
    top: 46%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    color: #000;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* mw ui button tweaks */

.mw-ui-button-group {
	display: inline-flex;
}
.mw-ui-button-group > * {
	min-width: 38px;
	float: none;
}

.mw-ui-button-group > *:last-child {
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mw-ui-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/***********/
/* Tooltip */
/***********/

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted #aaa;
	line-height: 1.3;
}

.tooltiptext {
	visibility: hidden;
	min-width: 150px;
	padding: 12px 14px;
	text-align: center;
	position: absolute;
	left: 50%;
	bottom: calc(20px + 100%);
	z-index: 99999;
	background: #fff;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
	border: 1px solid #a2a9b1;
	border-radius: 2px;
	font-weight: normal;
    color: black;
    text-shadow: none;
}

.tooltiptext-long {
	min-width: 350px;
}

.tooltiptext:after,
.tooltiptext:before {
	content: '';
	position: absolute;
	left: 50%;
	border-style: solid;
}

.tooltiptext:after {
	top: 100%;
	bottom: auto;
	width: 20px;
	height: 20px;
	background: #fff;
	margin-top: -10px;
	margin-left: -10px;
	box-shadow: 1px 1px 0px #a2a9b1;
	transform: rotate(45deg);
	border-width: 0;
}

.tooltiptext:before {
	top: 100%;
	bottom: auto;
	border-width: 18px;
	margin-left: -18px;
	border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
	pointer-events: none;
}

.tooltip .tooltip .tooltiptext {
	bottom: auto;
	top: 195%;
}

.tooltip .tooltip .tooltiptext:after {
	top: auto;
	bottom: 100%;
	border-width: 15px;
	margin-left: -15px;
	border-color: transparent transparent white transparent;
	width: 0;
	height: 0;
	box-shadow: none;
	background: none;
	transform: none;
}

.tooltip .tooltip .tooltiptext:before {
	top: auto;
	bottom: 100%;
	border-width: 16px;
	margin-left: -16px;
	border-color: transparent transparent #888 transparent;
	transform: translate(-50%,0);
}

.tooltiptext hr {
	margin: 10px 0 12px;
	position: relative;
	background: none;
}

.tooltiptext hr:after {
	content: '';
	display: block;
	width: 100%;
	height: 1px !important;
	position: absolute;
	left: -14px;
	background: #a2a9b1;
	padding: 0 14px;
}

.tooltip:hover>.tooltiptext {
	visibility: visible;
}

.tooltiptext {
	opacity: 0;
	transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
	transform: translate(-50%,8px);
}

.tooltip .tooltip .tooltiptext {
	transform: translateY(-8px);
}

.tooltip:hover>.tooltiptext {
	opacity: 1;
	transition-delay: 0s;
	transform: translate(-50%,0);
}


/* MISC */

.character-grid-entry {
    width: 150px;
    text-align: center;
    border: 1px solid #bbb;
    padding: 10px 5px;
    margin: 8px;
    transition: opacity 1s linear;
}

.character-grid-entry-title {
    font-size: 120%;
    font-weight: bold;
    line-height: 1.2;
}

.character-grid-entry-subtitle {
	font-size: 0.85em;
    margin-bottom: 5px;
}

.character-grid-entry-icon {
	margin: 2px;
}

.wyrmprint-grid-entry {
    text-align: center;
    margin: 10px -15px;
}

.wyrmprint-grid-image {
	
}

.wyrmprint-grid-title {
    margin-top: 4px;
    font-size: smaller;
    font-weight: bold;
}

.weapon-grid-entry {
    text-align: center;
    margin: 10px;
    width: 130px;
}

.weapon-grid-image {
	
}

.weapon-grid-title {
    margin-top: 4px;
    font-size: smaller;
    font-weight: bold;
}

.skill-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.enemy-container {
	width: 900px;
	margin: auto;
}

table.skill-table {
	position: relative;
	width: 268px;
    border-spacing: 0px;
    border: 1px solid skyblue;
    margin: 2px;
}

table.skill-table th {
    padding: 5px 10px;
    background-color: #e6f7ff;
    border-bottom: 1px solid skyblue;
    white-space: nowrap;
}

table.skill-table td {
    font-weight: bold;
    padding: 5px 10px;
    font-size: .8em;
    vertical-align: top;
    height: 74px;
}

table.mana-circle-table {
	width: 185px;
    border-spacing: 0px;
    margin: 2px;
}

table.mana-circle-table th {
    padding: 5px 10px;
    font-size: .85em;
}

table.mana-circle-table td {
    font-weight: bold;
    padding: 5px 10px;
    vertical-align: top;
    height: 90px;
    font-size: .8em;
}

.block-center {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Tabber styling */
.wyrmprints .tabberlive,
.wyrmprints .tabberlive .tabbertab,
.enemy-container .tabberlive,
.enemy-container .tabberlive .tabbertab,
.adv-portrait .tabberlive,
.adv-portrait .tabberlive .tabbertab,
.portrait-container .tabberlive,
.portrait-container .tabberlive .tabbertab,
.skill-levels .tabberlive,
.skill-levels .tabberlive .tabbertab,
.mana-circle .tabberlive,
.mana-circle .tabberlive .tabbertab {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: none !important;
    padding: 2px !important;
}

.wyrmprints ul.tabbernav,
.enemy-container ul.tabbernav,
.skill-levels ul.tabbernav,
.adv-portrait ul.tabbernav,
.portrait-container ul.tabbernav,
.mana-circle ul.tabbernav {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border-bottom: none !important;
}

.quest-container ul.tabbernav {
	text-align: center;
}

.wyrmprints ul.tabbernav li a,
.wyrmprints ul.tabbernav li a:link,
.enemy-container ul.tabbernav li a,
.enemy-container ul.tabbernav li a:link,
.skill-levels ul.tabbernav li a,
.skill-levels ul.tabbernav li a:link,
.adv-portrait ul.tabbernav li a,
.adv-portrait ul.tabbernav li a:link,
.portrait-container ul.tabbernav li a,
.portrait-container ul.tabbernav li a:link,
.mana-circle ul.tabbernav li a,
.mana-circle ul.tabbernav li a:link {
    background-color: #fff;
    color: #000 !important;
}

.wyrmprints ul.tabbernav li a:hover,
.enemy-container ul.tabbernav li a:hover,
.skill-levels ul.tabbernav li a:hover,
.adv-portrait ul.tabbernav li a:hover,
.portrait-container ul.tabbernav li a:hover,
.mana-circle ul.tabbernav li a:hover {
    background-color: #e4e4e4 !important;
}

.wyrmprints ul.tabbernav li.tabberactive,
.skill-levels ul.tabbernav li.tabberactive,
.adv-portrait ul.tabbernav li.tabberactive,
.portrait-container ul.tabbernav li.tabberactive,
.mana-circle ul.tabbernav li.tabberactive {
    border: none !important;
}

.enemy-container ul.tabbernav li.tabberactive {
    border: none !important;
    margin: 1em 0;
    display:inline-block;
}

.wyrmprints ul.tabbernav li.tabberactive a,
.wyrmprints ul.tabbernav li.tabberactive a,
.enemy-container ul.tabbernav li.tabberactive a,
.enemy-container ul.tabbernav li.tabberactive a,
.skill-levels ul.tabbernav li.tabberactive a,
.skill-levels ul.tabbernav li.tabberactive a,
.adv-portrait ul.tabbernav li.tabberactive a,
.adv-portrait ul.tabbernav li.tabberactive a,
.portrait-container ul.tabbernav li.tabberactive a,
.portrait-container ul.tabbernav li.tabberactive a,
.mana-circle ul.tabbernav li.tabberactive a,
.mana-circle ul.tabbernav li.tabberactive a {
    background-color: #ffffff;
    color: #000000 !important;
    border: 1px solid black !important;
}

.wyrmprints-details ul.tabbernav li a, 
.wyrmprints-details ul.tabbernav li a:link,
.skill-details ul.tabbernav li a, 
.skill-details ul.tabbernav li a:link {
	font-size: 0.9em;
	border-radius: 8px;
}

.skill-levels ul.tabbernav li a, 
.skill-levels ul.tabbernav li a:link {
	font-size: 0.8em;
}

ul.tabbernav li a {
    border: 1px solid #e0e0e0 !important;
}


/* font toggle for stories */

/* NOTE that the styles in this section here can be changed,
however the pointer cursor MUST be kept for functionality. */

div.fontToggleContainer {
    border: 1px solid black;
    display: inline-block;
    padding: 3px;
}

div.fontSizeButton {
    border: 1px solid blue;
    display: inline-block;
    padding: 3px;
    cursor: pointer;
}

div#smallText {
    font-size: 0.875em;
}

div#mediumText {
    font-size: 1.125em;
}

div#largeText {
    font-size: 1.875em;
}

/********************
/* Navbox templates *
/********************/
table.navbox {
  border: 2px solid #c2e4ea;
  background: transparent;
  color: #565656;
  clear: both;
  font-size: 88%;
  margin: auto;
  padding: 1px;
  text-align: center;
  width: 100%; 
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
  margin-top: -1px;
}

.navbox-title, .navbox-abovebelow,
table.navbox th {
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
}

.navbox-group {
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
}

/* Base background */
.navbox, .navbox-subgroup {
  background: transparent;
}

.navbox-list {
  background: transparent; /* Must match background color */
}

/* Level 1 color */
.navbox-title,
table.navbox th {
  border: 1px solid #9cc7ea;
  background: #d9f6ff;
  font-weight: bold;
}

/* Level 2 styling */
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
  background: #d9f6ff;
}

/* Level 3 styling */
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
  background: transparent;
}

/* Even row striping */
.navbox-even {
  background: rgba(255, 255, 255, 0.5);
  color: #565656;
}

/* Odd row striping */
.navbox-odd {
  background: rgba(223, 223, 223, 0.5);
  color: #565656;
}
 
.collapseButton {
  font-weight: normal;
  width: auto;
}

.navbox .collapseButton {
  width: 6em;
}
 
.navbar {
  font-size: 88%;
  font-weight: normal;
}

.navbox .navbar {
  font-size: 100%;
}
 
table.collapsed tr.collapsible {
  display: none;
}

/* end font toggle for stories*/

div.flexwrap {
	display: flex;
	flex-wrap: wrap;
}

/** banner sizing from [[Template:EventQuestHeader]], [[Template:Event]], [[Template:EventBannerTextOverlay]], [[Template:Mercurial Header]] **/
@media screen and (min-width: 850px) {
	.banner-heading img, .event .panel > .panel-heading img, .battle-banner img, .mercurial-heading img {
		max-width: 600px;
		max-height: 141px;
		width: auto;
		height: auto;
	}
	.eventStoryBanner img {
		width: 500px;
		height: auto;
	}
}
@media screen and (max-width: 849px) {
	.banner-heading img, .event .panel > .panel-heading img, .battle-banner img, .eventStoryBanner img, .mercurial-heading img {
		width: 100%;
		height: auto;
	}
}

/** [[Template:TLNotableWrap]], [[Template:TL]] **/
.notable-wrap {
	box-sizing: border-box;
}
.TLnotable-wrap {
	display: flex;
	flex-wrap: wrap;
}
.TLnotable-wrap > .notable {
	width: 350px;
}
.TierListBox {
	display:inline-block;
}
/*desktop medium-large*/
@media screen and (min-width: 1601px) and (max-width: 1920px) {
	.TLnotable-wrap {
		display: grid;
		grid-column-gap: 5px;
		grid-template-columns: 250px 250px 250px 250px 250px;
	}
	.TLnotable-wrap > .notable {
		width: 250px;
	}
	.TierListBox img {
		width: 45px;
		height: auto;
	}
}
/*desktop medium*/
@media screen and (min-width: 1367px) and (max-width: 1600px) {
	.TLnotable-wrap {
		display: grid;
		grid-column-gap: 30px;
		grid-template-columns: 350px 350px 350px;
	}
	.TierListBox img {
		width: 60px;
		height: auto;
	}
}
/*desktop small*/
@media screen and (min-width: 1000px) and (max-width: 1366px) {
	.TLnotable-wrap {
		display: grid;
		grid-column-gap: 30px;
		grid-template-columns: 350px 350px;
	}
}
/*mobile*/
@media screen and (max-width: 999px) {
	.TLnotable-wrap > .notable {
		width: 100%;
	}
}
@media screen and (min-width: 450px) and (max-width: 999px) {
	.TierListBox img {
		width: 70px;
		height: auto;
	}
}
/*mobile small*/
@media screen and (min-width: 350px) and (max-width: 449px) {
	.TierListBox img {
		width: 55px;
		height: auto;
	}
}
/*mobile extra small*/
@media screen and (max-width: 349px) {
	.TierListBox img {
		width: 45px;
		height: auto;
	}
}

/** [[Template:DragonTierListRowInfo]], [[Template:Event info card]] **/
.dragonTLskill {
	white-space: nowrap;
}
/*desktop only*/
@media screen and (min-width: 650px) {
	.dragonTLiconbox {
		display: inline-block;
		width: 25%;
		vertical-align: top;
	}
	.dragonTLabilitywrap {
		display: inline-block;
		width: 70%;
		vertical-align: top;
	}
	.panel.info-card > .panel-heading img {
		width: 500px;
		height: 117px;
	}
}
/*mobile only*/
@media screen and (max-width: 649px) {
	.dragonTLiconbox {
		display: block;
		width: 100%;
		vertical-align: top;
	}
	.dragonTLabilitywrap {
		display: block;
		width: 100%;
		vertical-align: top;
	}
	.panel.info-card > .panel-heading img {
		width: 100%;
		height: auto;
	}
}

/** [[Template:EventOverview]] **/
@media screen and (min-width: 800px) {
	.event-banner img {
		width: 600px;
		height: auto;
	}
}
@media screen and (max-width: 799px) {
	.event-banner img {
		width: 100%;
		height: auto;
	}
}

/** [[Template:CastleStoriesMP]] **/
@media screen and (min-width: 550px) {
	.CastleStoriesMP img {
		width: 500px;
		height: auto;
	}
}
@media screen and (max-width: 549px) {
	.CastleStoriesMP img {
		width: 100%;
		height: auto;
	}
}

/** [[Castle Stories]] **/
@media screen and (min-width: 1200px) {
	.castlestories-table table img {
		max-width: 500px;
		height: auto;
	}
}

@media screen and (max-width: 1199px) {
	.castlestories-table table img {
		max-width: 50vw;
		height: auto;
	}
}
/** [[Template:Notable]] 
.notable,
.notable * {
	box-sizing: border-box;
}

.notable {
	display: flex;
	flex-direction: column;
	margin: 1em;
}

.notable > .notable-header {
	background-color: rgb(77, 144, 94);
	color: white;
	text-shadow: rgba(0, 0, 0, 0.75) 0 0 0.25em;
	font-weight: bold;
	padding: 0.2em 0.5em;
	border: 1px solid rgb(51, 102, 66);
	text-align: center;
}

.notable > .notable-content {
	background-color: #f8f9fa;
	padding: 0.2em 0.5em;
	border-right: 1px solid rgb(170, 170, 170);
	border-left: 1px solid rgb(170, 170, 170);
	border-bottom: 1px solid rgb(170, 170, 170);
	color: rgb(34, 34, 34);
}**/

/** [[Template:NotableWrap]] **/
.notable-wrap {
	box-sizing: border-box;
}
.notable-wrap {
	display: flex;
	flex-wrap: wrap;
}
/*desktop*/
@media screen and (min-width: 1000px) {
	.notable-wrap > .notable {
		width: 350px;
	}
}
/*mobile*/
@media screen and (max-width: 999px) {
	.notable-wrap > .notable {
		width: 100%;
	}
}

.mc-node-overview-notable {
	text-align: left;
}

.mc-node-overview-notable .notable-header {
    background-color: lightblue;
	border: 1px solid #6caec4;
	color: black;
    text-shadow: none;
    text-align: center;
}

.mana-circle .notable-wrap {
	justify-content: center;
}

@media screen and (min-width: 1600px) {
    .VersionUpdate img {
        width: 300px;
        height: auto;
    }
}
@media screen and (max-width: 1599px) {
    .VersionUpdate img {
        width: 100%;
        height: auto;
    }
}
.np-container-50 img {
	height: auto;
}

.np-container-50 {
	width: 100%;
}
@media (min-width: 800px) {
	.np-container-50 {
	    flex-basis: 50%;
	    max-width: 50%;
    }
}

/* CSS For No History Tabber (Template:Tab) */
.oo-ui-widget.oo-ui-selectWidget {
  background-color: initial;
  text-align: center;
}

.oo-ui-optionWidget {
  color: black;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 3px .5em;
}
.oo-ui-optionWidget:hover {
  background-color: #e4e4e4 !important;
}
.oo-ui-optionWidget.oo-ui-widget-enabled {
  border: 1px solid #e0e0e0;
}
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  border: 1px solid black;
  cursor: pointer;
}
.oo-ui-tabOptionWidget .oo-ui-labelElement-label {
  border: 0 !important;
  margin: 0;
  padding: 0;
  line-height: normal;
}
/* End of No History Tabber CSS*/

/* IMPORTED FROM CSS EXTENSION, START */

/* Template: AdventurerStories
.adventurer-dialogue div > p {
    display: flex;
    margin-bottom: 1em;
    margin-top: 1.5em;
}
.adventurer-dialogue div > p > span,
.adventurer-dialogue div > p > a {
    margin-right: 1em;
    margin-top: -.5em;
    flex-shrink: 0;
}
*/

/* Template:CampaignQuestHeader
.CQH-thumbnail {
    position: relative;
    top: 0px;
    left: 0px;
}
.CQH-thumbnail img {
    max-width:70vw;
    height:auto;
}
.story-dialogue div > p {
    display: flex;
    margin-bottom: 1em;
    margin-top: 1.5em;
}
.story-dialogue div > p > span,
.story-dialogue div > p > a {
    margin-right: 1em;
    margin-top: -.5em;
    flex-shrink: 0;
}
*/

/* Template:CastleStories
.castlestory-dialogue div > p {
    display: flex;
    margin-bottom: 1em;
    margin-top: 1.5em;
}
.castlestory-dialogue div > p > span,
.castlestory-dialogue div > p > a {
    margin-right: 1em;
    margin-top: -.5em;
    flex-shrink: 0;
}
*/
/* Template:CharacterListFilter
.character-filters {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mw-ui-button {
    padding: 5px 10px;
}
.mw-ui-button.avail {
    padding: 10px;
}
*/

/* Tempalte:DragaliaLifeIssueMP
@media screen and (min-width: 1600px) {
    .DragaliaLifeIssueMP img {
        width: 300px;
        height: auto;
    }
}
@media screen and (max-width: 1599px) {
    .DragaliaLifeIssueMP img {
        width: 100%;
        height: auto;
    }
}
*/

/* Template:DragonTierListRow
.dragonTLrow {
    max-width: 450px;
    border: 1px solid gray;
    padding: 2px;
}
<!--Mobile Only-->
@media screen and (max-width: 649px) {
    .dragonTLquery {
        text-align: center;
    }
    .dragonTLquery-lg {
        display: none;
    }
    .dragonTLrow {
        display: block;
    }
}
<!--Desktop Only-->
@media screen and (min-width: 650px) {
    .dragonTLrow {
        display: inline-block;
        min-width: 10em;
    }
    .dragonTLquery {
        display: none;
    }
}
.dragonTLwriteuphead {
    font-weight: bold;
    line-height: 1.6;
}
.dragonTLwriteupcontent {
    border: 1px solid gray;
    padding: 2px;
}
*/

/* Template:EventOverview
.mw-collapsible .mw-collapsible-toggle {
    float:left;
    margin-right: 1em;
}
*/

/* Template:EventsMP
@media screen and (min-width: 550px) {
    .EventsMP img {
        width: 400px;
        height: 93px;
    }
}
@media screen and (max-width: 549px) {
    .EventsMP img {
        width: 100%;
        height: auto;
    }
}

/* Template:EventStoryHeader
.ESH-thumbnail {
    position: relative;
    top: 0px;
    left: 0px;
}
.ESH-thumbnail img {
    max-width:70vw;
    height:auto;
}
.event-dialogue div > p {
    display: flex;
    margin-bottom: 1em;
    margin-top: 1.5em;
}
.event-dialogue div > p > span,
.event-dialogue div > p > a {
    margin-right: 1em;
    margin-top: -.5em;
    flex-shrink: 0;
}
*/

/* Template:MaintenanceNoticesMP
@media screen and (min-width: 550px) {
    .MaintenanceNoticesMP img {
        width: 300px;
        height: auto;
    }
}
@media screen and (max-width: 549px) {
    .MaintenanceNoticesMP img {
        width: 100%;
        height: auto;
    }
}
*/

/* Template:SecondaryEventsMP
@media screen and (min-width: 550px) {
    .SecondaryEventsMP img {
        width: 300px;
        height: 158px;
    }
}
@media screen and (max-width: 549px) {
    .SecondaryEventsMP img {
        width: 100%;
        height: auto;
    }
}
*/

/* Template:STDialogue
p.stdialogue-intro {
    text-align: center;
    border: rgba(0,0,0,.3) 5px solid;
	border-left: none;
	border-right: none;
	background: rgba(240,240,240,.9);
	padding: .5em;"
}
span.stdialogue-intro-text {
	font-weight: bold;
	font-size: smaller
}
span.stdialogue-intro-char {
    color: #fff;
	text-shadow:
        -1px -1px 1px #000000,
		1px -1px 1px #000000,
		-1px 1px 1px #000000,
		1px 1px 1px #000000;
}
p.stdialogue-end {
    text-align: center;
	background: #000;
	color: #fff;
	padding: .5em;
}
*/

/* Template:SummonShowcaseMP
@media screen and (min-width: 450px) {
    .SummonShowcaseMP img {
        width: 320px;
        height: auto;
    }
}
@media screen and (max-width: 449px) {
    .SummonShowcaseMP img {
        width: 100%;
        height: auto;
    }
}
*/

/* Template:WyrmprintTooltipIcon
.wpttic {
    text-align: center;
    margin: 4px;
    width: 7em;
    height: 9em;
}
*/

/* Dragalia Lost Wiki/Latest Events
.latest-events-mp .tabberlive,
.latest-events-mp .tabberlive .tabbertab {
    <!--border: none !important;-->
}
.latest-events-mp .tabberlive .tabbertab {
    padding-top: 15px;
}
.latest-events-mp .tabbernav {
    <!--border-bottom: none !important;-->
    display: flex;
    justify-content: space-between;
}
.latest-events-mp .tabbernav li {
    padding-top: 0;
    width: 100%;
}
.latest-events-mp .tabbernav li a,
.latest-events-mp .tabbernav li a:link {
    background-color: #fff;
    border: 1px solid #1f4c1f !important;
    color: #000;
    display: block;
    <!--margin: 0;-->
    padding: 6px;
    font-size: 1.1em;
}
.latest-events-mp .tabbernav li a:hover {
    background-color: #e4e4e4 !important;
}
.latest-events-mp .tabbernav li.tabberactive a {
    <!--Remove the !important here if you want the active tab to also change color on hover-->
    background-color: #1f4c1f !important;
    color: #fff !important;
}
*/

/* Dragalia Lost Wiki/News
.news-mp .tabberlive,
.news-mp .tabberlive .tabbertab {
    <!--border: none !important;-->
}
.news-mp .tabberlive .tabbertab {
    padding-top: 15px;
}
.news-mp .tabbernav {
    <!--border-bottom: none !important;-->
    display: flex;
    justify-content: space-between;
}
.news-mp .tabbernav li {
    padding-top: 0;
    width: 100%;
}
.news-mp .tabbernav li a,
.news-mp .tabbernav li a:link {
    background-color: #fff;
    border: 1px solid #1f4c1f !important;
    color: #000;
    display: block;
    <!--margin: 0;-->
    padding: 6px;
    font-size: 1.1em;
}
.news-mp .tabbernav li a:hover {
    background-color: #F5F5F5 !important;
}
.news-mp .tabbernav li.tabberactive a {
    <!--Remove the !important here if you want the active tab to also change color on hover-->
    background-color: #CCF2FF !important;
}
*/

/* IMPORTED FROM CSS EXTENSION, END */
Retrieved from "https://dlwiki.cherrymint.live/index.php?title=MediaWiki:Common.css&oldid=358354"