MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* Also see MediaWiki:Gadget-DesignTokens.css */

#pagehistory li.selected {
    color: var(--iopw-sys-palette-gray-70);
}

#pagehistory .selected {
	color: #e7c554;
	background-color: rgba(108, 108, 108, 0.75);
}

#pt-notifications-notice .mw-echo-notifications-badge::before,
#pt-notifications-alert .mw-echo-notifications-badge::before {
	background-color: var(--iopw-sys-palette-gray-99);
}

.mediawiki textarea,
.mediawiki input[type='search'],
.mediawiki input[type='number'],
.mediawiki input[type='text'] {
  color: var(--iopw-sys-palette-on-input);
  background-color: var(--iopw-sys-palette-input);
  &::selection {
    color: var(--iopw-sys-palette-on-primary);
    background-color: var(--iopw-sys-palette-primary);
  }
}

/*Disable section editing */
.mw-editsection { display:none!important; }
.mw-editform .editOptions {
    color: var(--iopw-sys-palette-gray-99);
    background-color: #8a8a8a2b;
}

.mw-message-box {
	text-shadow: none;
}

.mediawiki .wikiEditor-ui-toolbar .page-characters div span {
	height: auto;
	font-size: 1.25rem;
}

.mediawiki #msupload-dropzone {
	height: auto;
}

.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-etnabled .oo-ui-tagMultiselectWidget-handle {
    border: 1px solid #a2a9b138;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
    background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-50) var(--iopw-sys-transparency-75), transparent);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
    background-color: #78787899;
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  color: var(--iopw-sys-palette-gray-90);
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
  color: var(--iopw-sys-palette-gray-80);
}

.oo-ui-tagItemWidget {
  border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-50);
}

.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
	border-style: none;
	border-radius: 15px;
	text-shadow: none;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: var(--iopw-sys-palette-gray-90);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select {
    background-color: color-mix(in srgb, var(--iopw-sys-palette-gray-90) var(--iopw-sys-transparency-75), transparent);
}

.mw-rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--iopw-sys-palette-primary-darker);
    color: var(--iopw-sys-palette-on-primary);
    border: none;
    text-shadow: none;
}

.tabstabber > .tabber ul.tabbernav li a:link {
    background-color: var(--iopw-sys-palette-surface-dim);
    color: var(--iopw-sys-palette-primary);
}

.tocnumber {
  color: var(--iopw-sys-palette-gray-99);
}

.toctogglelabel {
  color: var(--iopw-sys-palette-primary-darker);
}

.references-section h2:last-child {
  display: none;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #83838347;
    border: 1px solid #d1cec842;
}

/* For the background images on T-Doll pages */
.bg-character {
    display: none;
}

.bg-rarity {
    display: none;
}

/** Flowthread Styling **/
#flowthread {
  clear: both;
  margin-top: var(--iopw-sys-size-8);
  color: var(--iopw-comp-comment-font-color);
  border-top: thick solid gray;
  padding-top: 10px;
}

#flowthread,
.comment-container {
  & .comment-body textarea,
  & .comment-preview {
    margin: 0;
    padding: var(--iopw-sys-size-2);
    resize: none;
    width: 100%;
    display: block;
    font-family: var(--iopw-comp-comment-font);
    font-size: var(--iopw-comp-comment-post-font-size);
    line-height: var(--iopw-sys-size-5);
    border-width: var(--iopw-sys-border-width) var(--iopw-sys-border-width) medium;
    border-style: var(--iopw-sys-border-style) var(--iopw-sys-border-style) none;
    border-color: var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-50);
    border-radius: var(--iopw-comp-comment-border-radius);
  }

  & .comment-body textarea {
    background: var(--iopw-sys-palette-input);
    color: var(--iopw-sys-palette-on-input);
    height: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

  & .comment-preview {
    min-height: var(--iopw-sys-size-16);
    padding: var(--iopw-sys-size-4);
    background: color-mix(in srgb, var(--iopw-sys-palette-gray-60) var(--iopw-sys-transparency-75), transparent);
  }

  & .comment-toolbar {
    position: relative;
    height: auto;
    color: var(--iopw-sys-palette-gray-30);
    padding: var(--iopw-sys-size-2);
    font-size: var(--iopw-comp-comment-control-font-size);
    line-height: initial;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-40);
    border-radius: 0px 0px var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
    background: color-mix(in srgb, var(--iopw-sys-palette-gray-40) var(--iopw-sys-transparency-50), transparent);
  }

  & .comment-submit {
    font-family: var(--iopw-comp-comment-font);
    position: absolute;
    height: var(--iopw-sys-size-7);
    text-shadow: none;
    color: var(--iopw-sys-palette-gray-30);
    font-size: var(--iopw-comp-comment-control-font-size);
    font-weight: var(--iopw-sys-font-weight-bold);
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-99);
    transition: all 0.3s ease-out;
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99);
    cursor: pointer;
    margin: 0;
    padding: 0 var(--iopw-sys-size-3);
    border-radius: 0;
    outline: 0;
    background: linear-gradient(0deg, transparent 10%, var(--iopw-sys-palette-primary) 30%, var(--iopw-sys-palette-primary-lighter) 100%),
                repeating-linear-gradient(135deg, var(--iopw-sys-palette-primary) 0px, var(--iopw-sys-palette-primary) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.3rem, var(--iopw-sys-palette-primary-lighter) 0.3rem);
    clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: var(--iopw-sys-size-1);
    width: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    
    &::after {
    	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.2) 90%, rgba(255,255,255,0.8) 100%);
    	content: "";
    	width: 100%;
    	height: 100%;
    	display: block;
    	position: absolute;
    }
  }

  & .comment-submit:hover {
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
  }

  & .comment-submit:active {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99)
  }

  & .flowthread-btn {
    position: static;
    float: none;
    width: var(--iopw-sys-size-6);
    height: var(--iopw-sys-size-6);
    margin: 0;
    padding: 0;
    border-radius: var(--iopw-comp-border-radius);
    outline: 0;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-60);
    background-color: var(--iopw-sys-palette-gray-50);
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-out;
    cursor: pointer;
  }

  & .flowthread-btn::-moz-focus-inner,
  & .comment-submit::-moz-focus-inner {
    border: 0
  }

  & .flowthread-btn:hover {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18);
    background-color: var(--iopw-sys-palette-primary-lighter);
  }

  & .flowthread-btn:active,
  & .flowthread-btn.on {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99);
    background-color: var(--iopw-sys-palette-primary-darker);
  }

  & .flowthread-btn.on:hover {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
  }

  & .flowthread-btn.on:active {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
    box-shadow: 0px 0px 0px white inset, 0 0 0 0 white
  }

  & .flowthread-btn-preview {
  	width: 0;
    margin: 0;
    opacity: 0;
    background-image: url(/extensions/FlowThread/assets/preview.svg?a181a)
  }

  & .flowthread-btn-wikitext {
    background-image: url(/extensions/FlowThread/assets/wikitext.svg?e4407)
  }

  & .flowthread-btn-wikitext.on+.flowthread-btn-preview {
    width: var(--iopw-sys-size-6);
    margin: 0 0 0 var(--iopw-sys-size-1);
    opacity: 1
  }

  & .comment-reply::before,
  & .comment-like::before,
  & .comment-report::before,
  & .comment-delete::before,
  & .comment-recover::before {
    content: "";
    background: transparent url(/extensions/FlowThread/assets/sprites.png?e1980) no-repeat scroll 0% 0%;
    opacity: 0.6;
    display: inline-block;
    width: 0.9375;
    height: 0.625rem;
    transition: opacity 0.15s linear 0s;
    font-size: 0.5625rem;
    vertical-align: middle
  }

  & .comment-reply,
  & .comment-like,
  & .comment-report,
  & .comment-delete {
    margin-left: 0.3125rem;
    cursor: pointer;
    transition: color 0.15s linear 0s
  }

  & .comment-reply:hover,
  & .comment-like:hover,
  & .comment-report:hover,
  & .comment-delete:hover {
    opacity: 1.0;
    color: var(--iopw-sys-palette-gray-30)
  }

  & .comment-reply:hover::before,
  & .comment-like:hover::before,
  & .comment-report:hover::before,
  & .comment-delete:hover::before {
    opacity: 1.0
  }

  & .comment-reply::before {
    background-position: 0px 0px
  }

  & .comment-like::before {
    background-position: 0px -14px
  }

  & .comment-like[liked]::before {
    background-position: 0px -27px
  }

  & .comment-report::before {
    background-position: 0px -50px
  }

  & .comment-report[reported]::before {
    background-position: 0px -62px
  }

  & .comment-delete::before {
    background-position: 0px -40px
  }

  & .comment-avatar img {
    width: var(--iopw-sys-size-12);
    height: auto;
  }

  & .comment-thread>div:not(:first-child) .comment-avatar img {
    width: var(--iopw-sys-size-7);
    height: auto;
  }

  & .comment-thread>div:not(:first-child) .comment-body {
    padding-left: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
  }

  & .comment-thread .comment-replybox {
    margin-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

  & .comment-avatar {
    float: left;
    cursor: pointer
  }

  & .comment-container {
    margin-top: var(--iopw-sys-size-4)
  }

  & .comment-text {
    font-size: var(--iopw-comp-comment-post-font-size);
    line-height: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-2) 0;
    word-wrap: break-word;
    max-width: calc(var(--iopw-sys-size-2) * 70);

    /* Added to guard against malacious position:absolute */
    position: relative;
    overflow: hidden;
    min-height: var(--iopw-sys-size-4);
  }

  & .comment-markchecked {
    margin-left: 0.3125rem
  }

  & .comment-markchecked,
  & .comment-recover {
    margin-left: 0.3125rem;
    cursor: pointer;
    transition: color 0.15s linear 0s
  }

  & .comment-recover::before {
    background-position: 0px 0px
  }

  & .comment-recover:hover::before {
    opacity: 1.0
  }

  & .comment-recover:hover,
  & .comment-markchecked:hover {
    opacity: 1.0;
    color: var(--iopw-sys-palette-gray-50)
  }

  & .comment-selected {
    padding-left: var(--iopw-sys-size-4);
    background: var(--iopw-sys-palette-gray-80);
  }
  
  & .comment-replybox .comments-guideline {
    border-top: 2px solid gray;
    padding: 15px;
    font-size: var(--iopw-comp-comment-control-font-size);
  }

  & .comment-thread {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-30);
  }

  & .comment-post {
    padding: calc(var(--iopw-sys-size-2) + var(--iopw-sys-size-0-5));
  }

  & .comment-body {
    padding-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

  & .comment-user {
  	color: var(--iopw-sys-palette-gray-60);
    font-size: var(--iopw-comp-comment-control-font-size);
    margin-right: var(--iopw-sys-size-2);
  
    &>a {
      color: var(--iopw-sys-palette-primary);
      font-size: inherit;
    }
  }

  & .comment-footer {
    font-size: var(--iopw-comp-comment-control-font-size);
    margin-right: var(--iopw-sys-size-2);
    color: var(--iopw-sys-palette-gray-60);
  }
  
  & .comment-footer span:not(.comment-time) {
    color: var(--iopw-sys-palette-primary);
  	&:hover {
    color: var(--iopw-sys-palette-primary-lighter);
  	}
  }

  & .comment-post .comment-report, .comment-post .comment-delete {
    display: none;
  }

  & .comment-post:hover .comment-report, .comment-report[reported], .comment-post:hover .comment-delete {
    display: initial;
  }

  & .comment-thread .comment-thread {
    margin-left: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
  }

  & .comment-paginator {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
    text-align: right;
    padding: var(--iopw-sys-size-2);
  }

  & .comment-paginator span {
    color: var(--iopw-sys-palette-primary);
    border-radius: var(--iopw-comp-comment-border-radius);
    font-size: var(--iopw-comp-comment-control-font-size);
    margin: 0 0.1875rem;
    padding: 0.125rem 0.3125rem;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) transparent;
    cursor: pointer;
  }

  & .comment-paginator span:hover {
    color: var(--iopw-sys-palette-primary-lighter);
    background-color: var(--iopw-sys-palette-on-primary);
  }

  & .comment-paginator span[current] {
    border: var(--iopw-comp-comment-border);
    color: var(--iopw-sys-palette-on-primary);
    background-color: var(--iopw-sys-palette-primary);
    text-shadow: none;
  }

  & .comment-bannotice {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
    font-size: var(--iopw-comp-comment-post-font-size);
    text-align: center;
    padding: var(--iopw-sys-size-4);
    color: var(--iopw-sys-palette-gray-50);
  }

  & .comment-container-top {
    border: var(--iopw-comp-comment-border);
    border-radius: var(--iopw-comp-comment-border-radius);
  }

  & .comment-container-top[disabled] {
    display: none;
  }

  /* The title bar */
  & .comment-container-top > div:first-child {
    background: color-mix(in srgb, var(--iopw-sys-palette-gray-99) var(--iopw-sys-transparency-50), transparent);
    line-height: var(--iopw-sys-size-6);
    color: var(--iopw-sys-palette-gray-99);
    text-indent: 0;
    font-size: var(--iopw-sys-size-4);
    height: auto;
    text-align: center;
    border-radius: var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius) 0 0;
  }

  & .comment-container-top > div:last-child {
    border-radius: 0 0 var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
  }

  & .comment-container-top:not([disabled]) + .comment-container > div:first-child {
    border-top: 0;
  }
}

#flowthread a.pager-disable,
a.pager-disable {
  color: var(--iopw-sys-palette-font-negative);
  cursor: text;
  text-decoration: none
}

/* Category */
#catlinks {
  border: thin solid gray;
  padding: 5px;
}

/* Reference to the main article of an information */
div.hatnote {
  padding-left: 1.6em;
  margin-bottom: 0.5em;
  font-style: italic;
}


/*For Template:DollBG on t-dproll pages*/
#bg-character {
    position: fixed;
    height: 1280px;
    min-height:500px;
    top:10%;
    left:0;
    z-index: -2;
}

#bg-rarity {
    position: fixed;
    top:15%;
    right:5%;
    z-index: -3;
    width:650px;
}



/* Tabs extension*/
.tabs-tabbox {margin:0;}

.tabs-tabbox > .tabs-container {
    border: none;
	padding: 0;
	margin-top: 0;
}


.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: #F0b000;
    border-radius: 15px;
    color:#4E443C;
    border: none;
    text-shadow:none;
    z-index:5;
}


.tabs-tabbox > .tabs-label {
    background-color: #4E443C;
    border-radius: 15px;
    color:#F0b000;
    border: none;
    text-shadow:none;
    z-index:5;
    font-weight: bold;
}

/*gallery tabs*/
.tabs-gallery {	display:inline-block;}
.tabs-gallery > .tabs-container {margin-top: -24px;}
.tabs-gallery > .tabs-label {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.5;
}
.tabs-gallery > .tabs-label:hover {opacity:1;}


/*vertical*/
.verticaltabber {
	display:flex;
	flex-wrap:wrap;
}

.verticaltabber > .tabber {display:flex;}
.verticaltabber > .tabber > .tabbertab {display:flex;}
.verticaltabber > .tabber > .tabbertab > p {margin:0;}

.verticaltabber > .tabber ul.tabbernav {order:2;}
.verticaltabber > .tabber ul.tabbernav li {display:flex;}
.verticaltabber > .tabber ul.tabbernav li a {margin: 0 0 3px 0;width:100%;font-style:italic;}
.verticaltabber > .tabber ul.tabbernav li:first-child a {margin: 0 0 3px 0;width:100%;font-style:normal;}

.verticaltabber > .tabber .tabs {margin:auto;}


.paddedtabber-2px > .tabber {padding:2px;}



/*               tabs styled tabber                 */

/* tab body*/
.tabstabber > .tabber {padding:0;}
.tabstabber > .tabber .tabbertab {padding: 2px;background-color: transparent;}

.tabstabber > .tabber ul.tabbernav {margin: 10px 0 2px 0;}


.tabstabber > .tabber > .tabbertab > p {margin:0;}

/* inactive tab */
.tabstabber > .tabber ul.tabbernav li a:link {
    background-color: #4E443C;
    border-radius: 15px;
    color:#F0b000;
    border: none;
    text-shadow:none;
    font-weight: bold;    
	padding: 3px 6px;
	margin: 2px;
}
.tabstabber > .tabber ul.tabbernav li:first-child a:link {margin-left: 10px;}
/* active tab */
.tabstabber > .tabber ul.tabbernav li.tabberactive a, .tabstabber > .tabber ul.tabbernav li.tabberactive a:link {background-color: #F0b000;color:#4E443C;}


/*gradient divs*/
.gradientDivs {
	width:100%;	
}
.gradientDivs > div{
	background: -moz-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* FF3.6-15 */
	background: -webkit-radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(at left top,rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 10%, transparent 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 1em;
	overflow: hidden;
	max-width: 800px;
}

.gradientDivs > h4 {
	background-color: rgba(255,255,255,0.25);
	display: table;
	padding: 3px 6px 3px 6px;
	margin-left: 0.25em;
}
.gradientDivs > h4 > .mw-editsection {display:none;}
.gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}	
.gradientDivs > div > p {width:75%;text-align:right;}

/* Stats Graph */
line.emphased {
  stroke-width: 3pt
}

line.radial {
  stroke: #333;
  stroke-width: 4pt;
}

svg {
  fill: none;
  stroke: #777;
  stroke-opacity: 1;
  stroke-width: 1pt;
}

text {
  fill: white;
  font-size: 2.5em;
  font-weight: normal;
  stroke: none;
  text-anchor: middle;
}


polygon {
  stroke-width: 3pt;
  fill-opacity: var(--iopw-sys-transparency-50);
}
.graph-orange {
  stroke: #ff7733;
  fill: orange;
}
.graph-red {
  stroke: #bd0b0b;
  fill: red;
}
.graph-green {
  stroke: #007f00;
  fill: green;
}
.graph-blue {
  stroke: #00007f;
  fill: blue;
}

/* Charactertabber */
.charactertabber {
  width: 100%;
  border-bottom: var(--iopw-ref-border-width-thick) var(--iopw-ref-border-style) var(--iopw-sys-palette-gray-50);
}

.charactertabber td {
  padding: 0.5rem;
  background-color: var(--iopw-sys-palette-gray-50);
  font-weight: bold;
  opacity: 0.45;
  white-space: nowrap;
}

.charactertabber td:hover {
  opacity: 1;
}

.charactertabber td.active {
  background-color: var(--iopw-sys-palette-primary);
  font-weight: var(--iopw-sys-font-weight-bold);
  color: var(--iopw-sys-palette-on-surface);
  opacity: 1;
}

.charactertabber td.filler {
  width: 100%;
  opacity: 0;
}

/* HOC Matrix styling */
.hoc-matrix {
	display: inline-block;
}

.hoc-matrix .hoc-matrix-row {
	display: block;
	line-height: 0.1;
	white-space: nowrap;
}

.hoc-matrix .hoc-matrix-element {
	display: inline-block;
	height: 15px;
	width: 15px;
	border: thin solid #4a4a4a;
}

.hoc-matrix .hoc-matrix-element.hoc-matrix-element-type-0 {
  background-color: var(--iopw-sys-palette-gray-50);
}

.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-1 {
  background-color: var(--gfl-sys-palette-hoc-chip-blue);
}
.hoc-matrix.chipcolor-blue .hoc-matrix-element.hoc-matrix-element-type-2 {
  background-color: var(--gfl-sys-palette-hoc-chip-blue-alt);
}

.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-1 {
  background-color: var(--gfl-sys-palette-hoc-chip-orange);
}
.hoc-matrix.chipcolor-orange .hoc-matrix-element.hoc-matrix-element-type-2 {
  background-color: var(--gfl-sys-palette-hoc-chip-orange-alt);
}

/* Stattable (The one with digimind upgrade tabs) */
.upgradeablestattable {
  max-width: 1040px;
  min-width: 510px;
  display: flex;
  flex-direction: column;
}

.upgradeablestattable .header {
  color: var(--iopw-sys-palette-on-primary);
  font-size: 110%;
  background-color: var(--iopw-sys-palette-primary);
  text-align: center;
  padding: 5px;
  text-shadow: none;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}

.upgradeablestattable .stattabcontainer {
  display: flex;
  flex-flow: wrap;
}

.upgradeablestattable .stattabcontainer .tabbertab {
  display: flex;
  flex-flow: wrap;
  background-color: rgba(100, 100, 100, 0.3);
}

.obtain-panel {
	display: grid;
	grid: auto / minmax(auto, max-content) 1fr;
	grid-gap: 0.3rem;
	
	& .obtainflagcontainer {
	  color: var(--iopw-sys-palette-gray-00);
	  text-shadow: none;
	  display: flex;
	  gap: 0.3rem;
	  align-items: flex-start;
	  flex-wrap: wrap;
	  /* Remove in the future: */
	  float: none;
	  width: none;
	}

	& .obtainflag {
	  border-radius: 0.2rem;
	  padding-left: 0 0.2rem;
	  white-space: nowrap;
	  /* Remove in the future: */
	  border: none;
	  clear: both;
	}
}

.obtainflagcontainer {
  float: left;
  color: black;
  text-shadow: none;
  display: inline-block;
  width: 150px;
}

.obtainflag {
  border: 1px solid transparent;
  border-radius:2px;
  margin-right:2px;
  padding-left: 2px;
  padding-right: 2px;
  clear: both;
}

.obtainflag.obtain-normal { background:green;  }
.obtainflag.obtain-heavy  { background:orange; }
.obtainflag.obtain-drop   { background:yellow; }
.obtainflag.obtain-reward { background:salmon; }
.obtainflag.obtain-gacha { background:pink; }
.obtainflag.obtain-hoc-fragments { background: #f9d988; }
.obtainflag.obtain-assimilation { background-color: #8abfee; }
.obtainflag.notpossible   { opacity: 0.25;     }

/* TileGrid */
.tilegridtable {
  background: rgba(62, 62, 62);
  padding: 10px;
}
.tilegridtable td {
  background: rgba(0, 0, 0, 0.5);
}
.tilegridtable td.standing {
  background: rgba(255, 255, 255, 1);
}
.tilegridtable td.buff {
  background: rgba(0, 255, 222, 1);
}

.gamebanner {
  display: inline-block;
  margin-right: 20px;
}

/* Fairies */
.fairy-sidebar-profile {
	position: absolute;
	margin-top: -25px;
	margin-left: -56px;
}

/* HOC named card */
.profile-card { position: relative; display:inline-block; height:190px; width:128px;}
.profile-card .profileimage { position: absolute; top: 21px; left: 5px; width:118px }
.profile-card .profilebackground { transform:scaleX(-1); position: absolute; top: 0; left: 0;  }
.profile-card .namefield { position: absolute; top: 139px; right: 5px; overflow:hidden; width:119px}
.profile-card .classificationsymbol { position: absolute; top: 5px; right: 5px;}
.profile-card .cardtitle { position: absolute; text-decoration: none; color: black; top: 138px; left: 8px; font-size: 125%; text-shadow: none; color: black; font-weight: bold; font-family: "Times New Roman",Times,serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.profile-card .range { background-image: url('/images/b/b1/HOC_Range.png'); background-size: 13px 13px; background-repeat: no-repeat; padding-left: 14px; padding-right: 2px; position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: bold; color: orange; background-color: black; line-height: 14px; }
.profile-card .indexnumber { position: absolute; bottom: 5px; left: 80px; color: white;}

.entity-name {
	display: inline-block;
	
	& .entity-icon {
		width: 1rem;
    	display: inline-block;
    	height: 1rem;
    	vertical-align: text-bottom;
    	background-size: contain;
    	background-position: center;
    	margin-right: 0.1rem;
	}
}

/** GFL1 Fairy name */
.gfl-name-fairy {
	&.fairy-battle {
		color: var(--gfl-sys-unit-fairy-battle);
		text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-battle);
	}
	&.fairy-strategy {
		color: var(--gfl-sys-unit-fairy-strategy);
		text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-strategy);
	}
}

/** GFL1 Equipment name */
.gfl-name-equip {
	&.rarity-2 {
		color: var(--gfl-sys-rarity-2star);
		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-2star);
	}
	&.rarity-3 {
		color: var(--gfl-sys-rarity-3star);
		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-3star);
	}
	&.rarity-4 {
		color: var(--gfl-sys-rarity-4star);
		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-4star);
	}
	&.rarity-5 {
		color: var(--gfl-sys-rarity-5star);
		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-5star);
	}
}

/* Equipment named card */
.equipmentnamedcard {
  width: 5rem;
  text-align: center;
  display: inline-block;
  margin-right: 1rem;
  vertical-align: top;
}

.equipmentnamedcard .equipmentcard {
  margin-left: 0.3125rem;
  margin-right: 0.3125rem;
}

.equipmentnamedcard .equipname {
  font-size: 0.9em;
}

.equipmentnamedcard .equipname small {
  display: none;
}

/* Equipment cards */
.equipmentcard {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: var(--iopw-sys-palette-gray-20);
  border: 2px solid var(--iopw-sys-palette-gray-80);
  width: 4rem;
  height: 3.75rem;
  
  background-repeat: no-repeat;
  background-size: auto 0.45rem, contain;
  background-position: top right, top left;
  
  &.rarity2 { background-image: url(/images/2/25/2Stars.png), url(/images/9/96/2starE.png); }
  &.rarity3 { background-image: url(/images/d/dd/3Stars.png), url(/images/9/91/3starE.png); }
  &.rarity4 { background-image: url(/images/4/41/4Stars.png), url(/images/2/2e/4starE.png); }
  &.rarity5 { background-image: url(/images/8/81/5Stars.png), url(/images/d/d4/5starE.png); }

  & .overlay-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  & .type {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.6rem;
  }
  
  & .equipimage {
    position: absolute;
    margin-top: 3px;
    top: 0;
    left: 0;
  }
}


.event-node-difficulties .tabs-content {
	width: 100%;
}

.event-map-summary {
	float: right;
	width: 450px;
	max-width: 450px;
}

.event-map-overview {
	float: right;
}

.enemylist-entry {
  display: inline-block;
  overflow: hidden;
  width: 130px;
  height: 190px;
  padding: 5px;
  position: relative;
}

.enemylist-entry .enemylist-entry-box {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  height: 190px;
}

.enemylist-entry .enemylist-entry-name {
  position: absolute;
  left: 10px;
  top: 144px;
  z-index: 4;
  text-align: left;
  font-size: 125%;
  text-shadow: none;
  color: black;
  font-weight: bold;
  font-family: "Times New Roman",Times,serif;
  display: block;
  width: 116px;
  height: 26px;
  background-position-x: -10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2px;
}

.enemylist-entry .enemylist-entry-name.sangvisferri {
  background-image: url('/images/e/ee/Infobox_name_sangvisferri.png');
}

.enemylist-entry .enemylist-entry-name.kcco {
  background-image: url('/images/5/52/Infobox_name_kcco.png');
}

.enemylist-entry .enemylist-entry-name.paradeus {
  background-image: url('/images/3/32/Infobox_name_paradeus.png');
}

.enemylist-entry .enemylist-entry-name.collab {
  background-image: url('/images/c/c0/Infobox_name_EXTRAstar.png');
}

.enemylist-entry .enemylist-entry-name.other {
  background-image: url('/images/c/ce/Infobox_name_other.png');
}

.enemylist-entry .enemylist-entry-profile {
  position: absolute;
  width: 118px;
  top: 25px;
  left: 10px;
}

.enemylist-entry .enemylist-entry-faction {
  position: absolute;
  top: 164px;
  left: 12px;
  opacity: 0.5;
}

.enemylist-entry .enemylist-entry-classification-boss {
  position: absolute;
  top: 13px;
  left: 20px;
  height: 18px;
}

.enemylist-entry .enemylist-entry-frame {
  position: absolute;
}

.ombox,
table.ombox,
.ombox.ombox-notice {
	border: 2px solid #929292;
	background-color: #5151511f;
	background-image: radial-gradient(#727272 5%, transparent 5%), radial-gradient(#727272 5%, transparent 5%);
	background-size: 6px 6px;
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
}

/*image*/

.mediawiki .thumb .thumbimage {
	width: 100%;
	height: 100%;
}

div.thumbinner {
    border: 0;
    background-color: rgba(255,255,255,0.25);
}

.layout-image {
	display: block;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
}

.gfl-doll-card {
	width: 8rem;
	height: 14.25rem;
	position: relative;
	border: thin solid var(--iopw-sys-palette-gray-99);
	background-size: 8rem 14.25rem;
	display: inline-block;
	
	background-image: url(/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png);
	/* Background calc until Infobox gets rid of its shadow */
	background-size: calc(100% + 10px);
	background-position: -5px calc(-0.75rem - 5px);


  & .doll-image {
	background-size: contain;
	background-position-y: 0.8rem;
  }

  & .rarity-class {
	position: absolute;
	top: 0;
	left: 0;
	background-position: 0.075rem 0.075rem;
	pointer-events: none;
  }

  & .index {
	bottom: 0.165rem;
	width: 100%;
	font-size: 1.0rem;
	letter-spacing: -0.1875rem;
	padding-right: 0.35rem;
	line-height: 1rem;
	text-shadow: none;
	text-align: right;
	color: white;
	font-family: var(--iopw-sys-typeface-mono),var(--iopw-sys-typeface-mono-alt),var(--iopw-sys-typeface-mono-fallback);
	position: absolute;
	left: 0;
	user-select: none;
  }

  & .card-frame {
	width: 100%;
	background: url("/images/thumb/2/2c/Infobox_border.png/128px-Infobox_border.png") top left no-repeat;
	height: 100%;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
  }

  & > .plainlinks.card-frame > .external.text {
	color: transparent;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
  }

  & .name {
	top: 11rem;
	font-size: 1rem;
	width: 100%;
	padding: 0.1rem;
	background-repeat: no-repeat;
	background-size: contain;
	line-height: 1.5rem;
	background-position: center;
	text-align: left;
	text-shadow: none;
	color: black;
	font-weight: var(--iopw-sys-font-weight-bold);
	font-family: var(--iopw-sys-typeface-fancy);
	text-overflow: ellipsis;
	white-space: nowrap;
	left: 0;
	position: absolute;
	overflow: hidden;
	user-select: none;
  }

  &.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
  &.doll-rarity-3 .name { background-image: url("/images/c/c1/Infobox_name_3star.png"); }
  &.doll-rarity-4 .name { background-image: url("/images/8/81/Infobox_name_4star.png"); }
  &.doll-rarity-5 .name { background-image: url("/images/2/26/Infobox_name_5star.png"); }
  &.doll-rarity-6 .name { background-image: url("/images/a/a0/Infobox_name_6star.png"); }
  &.doll-rarity-EXTRA .name { background-image: url("/images/c/c0/Infobox_name_EXTRAstar.png"); }
}

.card-bg {
  background-image:url("/images/5/5a/Infobox_bg.png");
  width:auto;
  height:456px;
  padding:10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.withborders{
  border:grey 2px solid;
}

/* For compatibility. Move to card-bg class if possible. */
.profiletable .card-bg {
  height:auto;
  margin: 0;
  display: inline-block;
}

.card-bg .raritystars {
  position: absolute;
  top: 11px;
  right: 15px;
  z-index: 3;
}

.card-bg .raritystars.rarityEXTRA {
  top: inherit;
  bottom: 120px;
}

.card-bg .dollname {
  position: absolute;
  margin-left: 2px;
  z-index: 4;
  text-align: left;
  font-size: 250%;
  text-shadow: none;
  color: black;
  font-weight: bold;
  font-family: times new roman;
  bottom: 50px;
}

.card-bg .indexnumber {
  position: absolute;
  bottom: 3px;
  width: 66px;
  z-index: 4;
  font-size: 245%;
  text-shadow: none;
  color: white;
  font-family: courier new;
  letter-spacing: -6px;
  text-align: center;
  right: 8px;
  line-height: 1;
}

.card-bg .namefield {
  position: absolute;
  z-index: 3;
  bottom: 52px;
}

.card-bg .classificationsymbol {
  position: absolute;
  margin-left: 1px;
  margin-top: 1px;
  z-index: 3;
}

.card-bg .profilebackground {
  position: absolute;
  z-index: 2;
}

.card-bg .dollprofileimage {
  margin-top: 21px;
  min-width: 256px;
  margin-bottom: 94px;
}


.card-bg-small {
	background-image:url("/images/thumb/5/5a/Infobox_bg.png/138px-Infobox_bg.png");
	width:128px;
	height:228px;
	padding:5px;
	display:inline-block;
}

.card-bg-small.unreleased,
.unreleased {
  opacity: 0.25;
}

.card-bg-small .pad {
	position:absolute;
	z-index:5
}

.card-bg-small .name {
	position:absolute;
	margin-left:2px;
	margin-top:178px;
	z-index:4;
	text-align:left;
	font-size:125%;
	text-shadow:none;
	color: black;
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
	text-overflow: ellipsis;
    width: 126px;
    white-space: nowrap;
    overflow: hidden;
}

.card-bg-small .index {
	position:absolute;
	margin-top:206px;
	width:128px;
	z-index:4;
	font-size:110%;
	text-shadow:none;
	text-align:right;
	color: white;
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	letter-spacing: -3px
}

.card-bg-small .rarity-stars {
	position:absolute;
	margin-top:178px;
	z-index:3
}

.card-bg-small .rarity-class {
	position:absolute;
	margin-left:1px;
	margin-top:1px;
	z-index:3
}

.card-bg-small .infobox-border {
	position:absolute;
	z-index:2
}

.card-bg-small .doll-image {
	margin-top:10px;
	height:167px;
	display: inline-block;
}


.icon-bg-2star-small {
	background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
	padding: 0.3125rem;
	display: inline-block;
	width: 3.125rem;
	height: 3.125rem;
	background-size: contain;
	
	& img {
		height: 100%;
		width: 100%;
	}
}

.gfl-item {
	display: flex;
	padding: 0.3125rem;
	position: relative;
	
	& h3 {
		display: none;
	}
	
	& .container {
		background-color: rgba(0, 0, 0, 0.5);
		width: 21.25rem;
		padding: 0.625rem 0.625rem 1.875rem 0.625rem;
	}
	
	& .item-background {
		background-image: url("/images/thumb/7/72/BG_2star_S.png/60px-BG_2star_S.png");
		background-size: cover;
		padding: 0.3125rem;
		float: left;
		margin-right: 1.25rem;
		width: 3.125rem;
		height: 3.125rem;
		
		& img {
			height: 100%;
			width: 100%;
		}
	}
	
	& .item-name {
		background: rgba(127, 127, 127, 0.4);
		display: flex;
		padding: 0.1rem 0.3125rem
	}
	
	& .item-desc {
		border: 1px darkgrey solid;
		width: 100%;
		margin-bottom: 0.5rem;
		padding: 0.5rem;
		text-align: justify;
	}
	
	& .item-addon {
		position: absolute;
		left: 1rem;
		bottom: 1rem;
	}
}


	.variable-columns {
		-ms-column-width: 450px;
		-moz-column-width: 450px;
		-webkit-column-width: 450px;
		column-width: 450px;
	}

li.gallerybox div.thumb {
  background-color: #f9f9f91a;
  backdrop-filter: blur(var(--iopw-sys-size-1));
}

.chibiAnimationContainer {
  height: 300px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  max-height: 260px;
  max-width: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.chibiAnimationContainer .chibiScreenshotButton {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url('/images/8/8e/Screencap.png');
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

.chibi-costume-switcher {
  width: 240px;
}

.profiletable {
  overflow: hidden;
}

.profiletable .tdoll_chibi,
.profiletable .chibiAnimationContainer,
.chibiAnimationContainer.commander-chibi {
  background: repeating-linear-gradient(-55deg,#22222266,#22222266 10px,#33333366 10px,#33333366 20px);
}

.profiletable .tdoll_chibi .chibiAnimation,
.profiletable .chibiAnimationContainer .chibiAnimation {
  margin-top: 80px;
}

.profiletable .tdoll_chibi .chibiAnimationClickArea,
.profiletable .chibiAnimationContainer .chibiAnimationClickArea {
  height: 260px;
}

.tdoll_chibi .chibiAnimation,
.chibiAnimationContainer .chibiAnimation {
    flex-shrink: 0;
    pointer-events: none;
}

.commander-chibi-container {
	display: inline-block;
}

.commander-chibi-container .chibiAnimationClickArea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.commander-chibi-container .chibiAnimation {
	position: absolute;
}


.notification {
  margin-bottom: 10px;
  display: inline-block;
  font-size: 0.8em;
  font-style: italic;
  color: #71fdff;
}

.profiletable.boss {
  background-image: url('/images/f/fc/Boss_Skull_Icon.png');
  background-repeat: no-repeat;
  background-position-x: 5px;
  background-position-y: 5px;
}

.gf-table.stattable {
  display: inline-block;
  vertical-align: top;
}
.gf-table.stattable + .gf-table.stattable {
  margin-left: 10px;
}
.gf-table.stattable .statlabel {
  background:rgba(127, 127, 127, 0.2);
}
.gf-table.stattable .statlabel.statlabelgradient  {
  background: linear-gradient(135deg, rgba(127, 127, 127, 0.4) 85%, rgba(0, 0, 0, 0.5) 85%);
}
.gf-table.stattable .statvalue {
  background:rgba(0, 0, 0, 0.25);
  padding-left:10px;
  padding-right:10px;
  text-align:center
}
.gf-table.stattable .statcomment {
  font-style: italic;
}

/* for color inversion */
.invertcolor{-webkit-filter:invert(1);filter:invert(1)}
.invertcolor-50{-webkit-filter:invert(1);filter:invert(0.5)}

/*For construction tables*/

.multi-column-table tbody {display:block;}
.multi-column-table tr {display:table;}
.multi-column-table td {display:table-cell;}
.multi-column-table tbody, .multi-column-table tr {min-width:100%;}
.multi-column-table table {width: 100%; max-width: 100%;}


.multi-column-table tbody {
    column-width:450px;
    -moz-column-width:450px;
    -webkit-column-width:450px;
}

.multi-column-200px tbody {
	-ms-column-width: 200px;
    -moz-column-width:200px;
    -webkit-column-width:200px;
    column-width:200px;
}

.multi-column-300px tbody {
	-ms-column-width: 300px;
    -moz-column-width:300px;
    -webkit-column-width:300px;
    column-width:300px;
}


@media only screen and (max-width: 820px) {
	div#mw-panel {display:none;}
	div#left-navigation{margin-left:0;}
	.mw-body {margin-left:0;}
}


.floatright {
	margin: 0;
	float: right;
}
.floatleft {
	margin: 0;
	float: left;
}


/* plain links*/

.plainlinks {
	padding:0;
	background:none;
}

/* Spoiler Text */
.spoiler {
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
    filter: blur(3px);
}

.spoiler:hover {
    filter:	none;
}

div.spoiler {
	display: inline-block;	
}

.gfwiki-message-box {
	padding: 4px;
	min-height: 75px;
	border: thin solid gray;
	background: #323232;
	background: rgba(50,50,50,0.5);
	overflow: auto;
}
.gfwiki-message-box + .gfwiki-message-box {
	margin-top: 1rem;
}

.darken {filter:brightness(30%);}


/* Tables */
.mw-templatedata-doc-wrap .mw-templatedata-doc-params th,
.gf-table th,
.cargoTable th,
.gf-table.testcasetable th.testcasedescription {
	color: var(--iopw-sys-palette-on-primary);
	font-size: var(--iopw-sys-size-4);
	background-color: var(--iopw-sys-palette-primary);
	padding: var(--iopw-sys-size-2);
	text-align: center;
	text-shadow: none;
}

.gf-table th a {color: #875e00}

.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > td,
.gf-table > tbody > tr > td,
.cargoTable > tbody > tr > td {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 5px;
}

.gf-table-borders {
	border: grey 2px solid;
	border-collapse: collapse;
}

.gf-table-borders td {
	border: grey 1px solid;
}

.gf-table-lightcell > tbody > tr > td {
	background: rgba(0, 0, 0, 0.3);
}

.gf-table-layered > tbody > tr > td {
	background: rgba(0, 0, 0, 0.3);
	color:rgb(200,200,200);
}

.gf-table-layered > tbody > tr > th {
	color:white;
	background: rgba(0, 0, 0, 0.6);
}

.gf-table-darkcell > tbody > tr > td {
	background: rgba(0, 0, 0, 0.6);
}

.mw-templatedata-doc-wrap .mw-templatedata-doc-params {
    color: white;
    color: rgba(250,250,250,1);
    text-shadow: 0 0 0.2em black,0 0 0.2em black;
}

.mw-templatedata-doc-wrap table.wikitable {
    border: none;
    border-collapse: separate;
    background-color: transparent;
}
.mw-templatedata-doc-wrap table.wikitable > * > tr > th,
.mw-templatedata-doc-wrap table.wikitable > * > tr > td {
	border: none;
}
.mw-templatedata-format {
	font-weight: normal;
}

/* General button style */
button.gf-button {
  padding: 3px 6px;
  margin: 2px 2px;
  border-radius: 15px;
  border: thin solid transparent;
  text-shadow:none;
  font-family: arial;
  font-weight: bold;
  font-size: 1em;
  background-color: #4E443C;
  color:#F0b000;

  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  opacity:0.5;
}

button.gf-button.enabled {
  border: thin solid #F0b000;
  opacity:0.75;
}

button.gf-button.active {
  color:#4E443C;
  background-color: #F0b000;
  border-radius: 15px;
  border: none;
  text-shadow:none;
  opacity:1;
}

button.gf-button:hover {
  opacity:1;
}

button.gf-button:disabled,
button.gf-button:disabled:hover {
  color: #a2a2a2;
  opacity:0.75;
}

/*equipment*/
.greenrow > td {color:green}
.redrow > td {color:red}





/* picture preview*/

.mw-mmv-image img.gif, .mw-mmv-image img.png, .mw-mmv-image img.svg, .mw-mmv-image img.tiff, .mw-mmv-image img.tif {
    background: none;
}

.mw-mmv-image img.gif:hover, .mw-mmv-image img.png:hover, .mw-mmv-image img.svg:hover, .mw-mmv-image img.tiff:hover, .mw-mmv-image img.tif:hover {
    background: url(/extensions/MultimediaViewer/resources/mmv/ui/checker.png?bdcf5) repeat;
}


.mw-mmv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    opacity: 0.73;
}
body.mediawiki.mw-mmv-lightbox-open #mw-page-base,
body.mediawiki.mw-mmv-lightbox-open #mw-head-base,
body.mediawiki.mw-mmv-lightbox-open #mw-navigation,
body.mediawiki.mw-mmv-lightbox-open #content,
body.mediawiki.mw-mmv-lightbox-open #footer,
body.mediawiki.mw-mmv-lightbox-open #globalWrapper {
    display: inherit;
}
body.mediawiki.mw-mmv-lightbox-open > *  {
    display: inherit;
}
body.mediawiki.mw-mmv-lightbox-open > script,
body.mediawiki.mw-mmv-lightbox-open > style {
    display: none;
}
body.mediawiki.mw-mmv-lightbox-open {
    overflow: hidden;
}
body .mw-mmv-wrapper {
    position: fixed;
}
/* mutilmediaViewer 信息栏修复 */
.mw-mmv-image-metadata {
	margin-top: 0;
}
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
    width: 30%;
}
.mw-mmv-image-metadata-column.mw-mmv-image-metadata-links-column {
    width: 70%;
    max-width: 70%;
}
ul.mw-mmv-image-links li {
    float: left;
    padding: .3em 1em;
}
div.mw-mmv-image-desc-div,
div.mw-mmv-image-links-div{
    display:block
}
div.metadata-panel-is-closed .mw-mmv-image-links li.mw-mmv-license-li {
    height:inherit;
    line-height:inherit;
}

/* fading effects*/

.hover-button { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.75;
}

.hover-button:hover { 
	opacity:1;
}

.hover-button50 { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	opacity:0.5;
}

.hover-button50:hover { 
	opacity:1;
}



/*                     main page                    */


/*MAIN PAGE CONTENTS*/

@keyframes glowing {
 0% {
  box-shadow: 0px 0px 10px #000;
  border-color:grey;
  }
 45% {
  box-shadow:0 0 10px #c40400;
  border-color:red;
  }
 55% {
  box-shadow:0 0 10px #c40400;
  border-color:red;
  }
 100% {
  box-shadow: 0px 0px 10px #000;
  border-color:grey;
 }
}
.button-glow {
 animation:glowing 3000ms infinite
}



.rightcol, .leftcol {
    max-width: 800px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.leftcol {
    float: left;
    position: relative;
    margin-bottom:5px;
}

.rightcol{
	float:left;
	height:auto;
}

#timerwidgets{float:left}

#flexible-panel{width:100%;display:none}

.mainpage{
	margin-left:auto;
	margin-right:auto;	/*Mediawiki max space for 1080p is some 1600px*/
    padding:0;
}

/* small screen less than 800px content width*/
@media only screen and (max-width: 1040px) {
	.mainpage{
		width:100%;
	}
	#timerwidgets{width:240px;float:left;}
	#newestadditions{width:auto;margin-left:0;}
	#twitter-widget-0{height:267px!important;}
	.updates{max-height:136.833px;}
	.promotions{max-height:120.133px;}
}
/* over 800px, not resize for page necessary*/
@media only screen and (min-width: 1040px) {
	.mainpage{width:800px;}
	#timerwidgets{width:345px;float:left;}
	#newestadditions{width:450px;float:left;margin-left:5px;}
	#twitter-widget-0{height:373px!important;}
	#aboutgame{width:800px;}
	#aboutwiki{width:800px; margin-left: 0.5em;}
	.updates{max-height:198.25px;}
	.promotions{max-height:164px;}
}


@media only screen and (min-width: 1360px) {
	.mainpage{width:1068px;}
	.rightcol{width:240px;margin-left:2em;}
	#timerwidgets{width:240px;}
	#newestadditions{width:240px;margin-left:0;min-height: 0;max-height: 479px;margin-bottom:5px;}
	#twitter-widget-0{height:479px!important;}
	.updates{max-height:136.833px;}
	.promotions{max-height:120.133px;}
	
}

@media only screen and (min-width: 1480px) {
	.mainpage{width:1188px;}
	.rightcol{width:360px;margin-left:2em;}
	#timerwidgets{width:360px;}
	#newestadditions{width:360px;margin-left:0px;min-height: 0;max-height: 361px;}
	#twitter-widget-0{height: 361px !important;}
	.updates{max-height:217.017px;}
	.promotions{max-height:170.267px;}
}


@media only screen and (min-width: 1600px) {
	.mainpage{width:1308px;}
	.rightcol{width:480px;}
	#timerwidgets{width:235px;}
	#newestadditions{width:240px;margin-left:5px;min-height: 269px;max-height: 269px;}
	#twitter-widget-0{height:269px!important;}
	#aboutgame,#aboutwiki{width:480px;margin-left:2em;}
	.updates{max-height:133.917px;}
	.promotions{max-height:118.05px;}
}

@media only screen and (min-width: 1720px) {
	.mainpage{width:1428px;}
	.rightcol{width:600px;}
	#timerwidgets{width:295px;}
	#newestadditions{width:300px;min-height: 0;max-height: 329px;}
	#twitter-widget-0{height:329px!important;}
	#aboutgame,#aboutwiki{width:600px;}
	.updates{max-height:169px;}
	.promotions{max-height:143.117px;}
}

.homepage-panel{
	background-color: rgba(150,150,150,0.8);
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
}

#aboutgame,#aboutwiki,#newestadditions{
	padding:0.5em;
	background-color: #3f3f3f;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	background-image:url("/images/1/10/Aboutgame.png");
	background-repeat: no-repeat;	
	background-position: -1.5em -0.2em,left top;
	overflow:hidden;
	display:inline-block;
	box-sizing:border-box;
}

#newestadditions {
	width:100%;
	overflow:auto;
	white-space:nowrap;
}

#newestadditions h4{
  margin: 0;
  padding: 0;
  border-bottom: thin solid gray;
}

.newestadditiongroup {
  display: inline-block;
  width: 47%;
  margin-top: 5px;
}

.newestadditiongroup table {
  width: 100%;
}

.newestadditiongroup td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}

.mainpage-link-collection {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.mainpage-link-collection .mainpage-link-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
    padding-top: 2.3em;
    margin-right: 0;
    margin-bottom: 10px;
}

.mainpage-link-collection .mainpage-link-section-title {
    position: absolute;
    top: 0;
    left: 5px;
    font-size: 1.5em;
    margin: 0;
	padding: 0;
}

.mainpage-link-collection .mainpage-link-group {
	border: 3px solid rgb(150, 150, 150);
	padding: 0.5em;
	min-width: 300px;
	position: relative;
	background-color:#3f3f3f;
	box-shadow: 0px 0px 10px#000;
	background-image: url("/images/1/10/Aboutgame.png");
	background-repeat: no-repeat;
	background-position: -1.5em -0.2em,left top;
	margin-right: 10px;
}

.mainpage-link-collection .mainpage-link-group-title {
    margin: 0;
    padding: 0;
    border-bottom: thin solid gray;
}

.mainpage-link-collection .mainpage-link-group li {
	list-style: none;
}

#mainmenu{
	background-image:url("/images/8/86/BG_homescreen.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin-top:5px;
	max-width:800px;
	height:300px;
	position:relative;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000
}

.GamesThumbContainer{
	display:inline-block;
	width:230px;
	height:125px;
	padding:2px;
}

.GameThumb{
	display:flex; 
	position:absolute; 
	justify-content:center; 
	width:230px; 
	height:125px; 
	flex-direction:column; 
	text-align:center; 
	background-color: rgba(0,0,0,0.5);
	font-size:1.5em; 
	text-shadow: 0px 0px 5px #000000;
}

.GameThumb a{
	margin:2px;
}

.game-thumb-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iopw-sys-size-2);
  justify-content: center;

  & .game-thumb {
    position: relative;
    width: 14.375rem;
    height: 7.8125rem;
  }

  & .game-thumb-img {
    position: absolute;
    filter: brightness(50%);
    transition: 0.35s ease-in-out;
    & .mw-file-element {
	  object-fit: cover;
	  width: 100%;
	  height: 100%;
	}
  }

  & .game-thumb:hover .game-thumb-img {
    filter: brightness(90%);
  }

  & .game-thumb .game-thumb-link a {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--iopw-sys-size-5);
    padding: 1rem;
  }
}

#directory{
	background-image:url("/images/e/e8/BG_main_directory.png");
	background-color: #3f3f3f;
	border: rgb(150,150,150);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
	margin-top:5px;
	max-width:800px;
	position:relative;
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	padding:0.5em;
}


.banners{
	max-width:800px;
	max-height:198px;
	width:auto;
	height:auto; 
	border: rgb(150,150,150);
	border-width: 0.25em;
	border-style: solid;
	box-shadow: 0 0 10px #000;
	visibility:hidden;
	position:absolute;
}

.banners .jcarousel-item {
  max-height: 200px;
}

.banners .jcarousel-item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.updates{
	background-image: url("/images/thumb/6/6f/BG_factory.png/395px-BG_factory.png");
	background-repeat: no-repeat;
	background-size: cover;
	width:360px;
	width:auto;
	border: rgb(150,150,150);
	border-width: 3px;
	border-style: solid;
	box-shadow: 0px 0px 10px #000;
	margin-bottom:5px;
	visibility:hidden;
	position:absolute;
}

#banner-blank {
	visibility:visible;
	position:inherit;
}

#update-blank {
	visibility:visible;
	position:inherit;
}

.promotions {
	max-width:360px;
	height:auto;
	width:auto;
	overflow:hidden;
	background-color:#232323;
	border: rgb(150,150,150);
	border-width: 0.25em;
	border-style: solid;
	box-shadow: 0 0 10px #000;
	margin-bottom:5px;
	visibility:hidden;
	position:absolute;
}

#promotion-blank {
	visibility:visible;
	position:inherit;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index:3;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    text-decoration: none;
    display: block;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.dropdown-content a:hover {opacity:0;}

.dropdown:hover .dropdown-content {
    bottom: 100%;
    display: block;
    left:1em;
}

#serverTabSpan {
    position: absolute;
    margin: -6px 0 0 6px;
}

.serverTabLinks:hover {
    opacity: 0.8;
}
.serverTabLinks {
    border: none;
    border-radius: 1px;
    border: none;
    text-shadow: none;
    z-index: 5;
    padding: 3px 6px;
    margin: 2px 2px;
    font-weight: bold;
    font-size: 40%;
    transition: all .2s ease-in;
    opacity: 0.5;
}

.serverTabLinks-active {
    opacity: 0.9!important;
}



.tabButtonLane {
	display: flex;
  padding-top:1px
}
.tabButtonLane > button {
background-color: rgba(100,100,100,0.3);
color: white;
font-weight: bold;
display: inline-block;
padding: 4px 10px;
margin-left: 3px;
border: none;
text-shadow: 0 0 0.2em black,0 0 0.2em black;
font-size: 1em;
cursor: pointer;
}

.tabButtonLane > button:hover {
	    background-color: rgba(100,100,100,0.45);
}

.tabButtonLane > .tabButton-active {
	    background-color: rgba(100,100,100,0.7)!important;
}


.gf-droplist {
	background-color:rgba(250,250,250,0.9);
	text-align:center;
	border: none;
	color: rgb(63,63,63);
}


/* For droplists on T-Doll pages */
.skill {
	background-color: #f0b000;
	width:60px;
	height:21px;
	text-align:center;
	border:none;
	color:rgb(63,63,63);
}

/* Tile Search Engine */
div.tileSearchDiv {
  display: inline-block;
  margin-right: 15px;
}

table.userselectiongridtable td {
  height: 20px;
  width: 20px;
  border: thin solid gray;
}
table.userselectiongridtable td.active {
  background-color: cyan;
}

table.userselectionpositiontable td {
  height: 20px;
  width: 20px;
  border: thin solid gray;
}
table.userselectionpositiontable td.active {
  background-color: white;
}

table.minigridtable td {
  height: 3px;
  width: 3px;
  background-color: rgba(0,0,0,0.5);
}
table.tilesearchdolls tr[data-tile1="1"] table.minigridtable tr:nth-child(3) td:nth-child(1),
table.tilesearchdolls tr[data-tile2="1"] table.minigridtable tr:nth-child(3) td:nth-child(2),
table.tilesearchdolls tr[data-tile3="1"] table.minigridtable tr:nth-child(3) td:nth-child(3),
table.tilesearchdolls tr[data-tile4="1"] table.minigridtable tr:nth-child(2) td:nth-child(1),
table.tilesearchdolls tr[data-tile5="1"] table.minigridtable tr:nth-child(2) td:nth-child(2),
table.tilesearchdolls tr[data-tile6="1"] table.minigridtable tr:nth-child(2) td:nth-child(3),
table.tilesearchdolls tr[data-tile7="1"] table.minigridtable tr:nth-child(1) td:nth-child(1),
table.tilesearchdolls tr[data-tile8="1"] table.minigridtable tr:nth-child(1) td:nth-child(2),
table.tilesearchdolls tr[data-tile9="1"] table.minigridtable tr:nth-child(1) td:nth-child(3)    {
  background-color: cyan;
}
table.tilesearchdolls tr[data-tile1="0"] table.minigridtable tr:nth-child(3) td:nth-child(1),
table.tilesearchdolls tr[data-tile2="0"] table.minigridtable tr:nth-child(3) td:nth-child(2),
table.tilesearchdolls tr[data-tile3="0"] table.minigridtable tr:nth-child(3) td:nth-child(3),
table.tilesearchdolls tr[data-tile4="0"] table.minigridtable tr:nth-child(2) td:nth-child(1),
table.tilesearchdolls tr[data-tile5="0"] table.minigridtable tr:nth-child(2) td:nth-child(2),
table.tilesearchdolls tr[data-tile6="0"] table.minigridtable tr:nth-child(2) td:nth-child(3),
table.tilesearchdolls tr[data-tile7="0"] table.minigridtable tr:nth-child(1) td:nth-child(1),
table.tilesearchdolls tr[data-tile8="0"] table.minigridtable tr:nth-child(1) td:nth-child(2),
table.tilesearchdolls tr[data-tile9="0"] table.minigridtable tr:nth-child(1) td:nth-child(3) {
  background-color: white;
}

table.tilesearchdolls>tbody>tr { display: none; }
table.tilesearchdolls>tbody>tr.works { display: inherit; }

/* Documentational stuff */
.testcasetable {
  width: 100%;
}

.testcasetable th,
.gf-table.testcasetable th {
  background: rgba(50,50,50,0.5);
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  color: lightgray;
}

.testcasetable > tr >td,
.testcasetable > tbody > tr >td {
  width: 100%;
}

.testcasetable .testcasedescription {
	width: 100%;
}

.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > td.mw-templatedata-doc-param-status-required,
table > tbody > tr > td.cell-yes,
table > tbody > tr > td.cell-no {
  color: white;
  vertical-align: middle;
  text-align: left;
}

.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > .mw-templatedata-doc-param-type + td.mw-templatedata-doc-param-status-required,
table > tbody > tr > td.cell-yes {
  background-color: #AB8C63;
}

.mw-templatedata-doc-wrap .mw-templatedata-doc-params > tbody > tr > .mw-templatedata-doc-param-type + td,
table > tbody > tr > td.cell-no {
  background-color: #67718A;
}

.mw-templatedata-doc-wrap dt {
  float: left;
  clear: left;
  margin-right: 5px;
}

.navbox {
  position: relative;
  border: thin solid lightgray;
  width: 100%;
  margin: 1em auto 0;
  background: rgba(0,0,0,0.5);
  box-sizing: border-box;
}

.navbox + .navbox {
    margin-top: -1px;
}

/* Only style the navbox headers, not the childs of childs */
.navbox>tr>th,
.navbox>tbody>tr>th,
.navbox>thead>tr>th {
  background: rgba(255,255,255,0.5);
  border: none;
  color: white;
}

.navbox th .navboxpopularizer {
  float: right;
  padding: 0 1em;
}

.navbox .navboxlist {
  border: none;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0,0,0,0.5);
}

.navboxlist table,
.navboxlist-table {
  border: none;
  width: 100%;
  background: rgba(0,0,0,0.0);
}

.navboxlist table .navboxlist-oddrow,
.navboxlist-table .navboxlist-oddrow {
  background: linear-gradient(115deg,rgba(100,100,100,0.2) 0%, transparent 100%);
}

/* Definition for tooltips */
.tooltip {
  position: relative;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: gray;
}

.tooltip .tooltipcontainer {
    visibility: hidden;
    width: 300px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;

    bottom: 100%;
    left: 50%;
    margin-left: -150px; /* Use half of the width, to center the tooltip */
}

.tooltip .tooltiptext {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #222222;
  background-clip:content-box;
  color: lightgray;
  padding: 17px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext .tooltiptext-content {
  margin: 17px;
  margin-bottom: 20px;
}
.tooltiptext-corners {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhoCnuyTOgAAAqpJREFUWMPFmL2O00AUhc/4J469kDjJFlQ0CIUCiQeg5BXS0RDyCLwCEmIlXgBRpSZbUNDvNjQ020UrSkSklTYbR0mcxT+XImPixDOOvRs7I0WR7LHn073n3LljBvHQAJj8v9TBBNdqHIRwgBEHUgHYAEIccLBYigzHcd6HYXib9eGrq6thu90+BaBkiHwuoIcA5kQU5Hl44jinDdt+x6Mbf+dcAjXfBXsv8eqK0ur3+891XVezzA+CgDHGdkaoyQXsbEVomUHYIX/H3gwgddP5+c8/Jycfm6qqluo2aapMs9q4uPhBlYpRqsuUlHsHqUMFVWLKUYc3n9GKgTkWQC24T6SeBVDPD8QYcDNTSOZeIoJtgYFtAx1xKJlKfABOfqCbmULX33814UomGMCzN+bYcw2WrBA2ACcldf7dIgSXRz+UVCbfB1AVpE0FUE+FuruGQsB63b4+0gK2LaGa9ZetFq1LoEypnuJADwaDwavRaOT3er1PAJ7sYjrWAqaboST+AeRQFgCPz5EDqZ1OZwhA6Xa7i/04LuBCNgVOjFIXZC6MexquMBJrKLVsICaMxBpqsycsASiCmkiWi8oBlQkULTWR2F39L/5t23ur0raP7YMJRW7XxvS4AYsSpZwAhEKg6v1hbGk0XjxaVF4+dWllfSprt9f4Lynks0vLO7u0vHiaSnCZ2NLJzdTP1aAVDMUOURjzQ4k05GVdy6ovyUycAULMPcYCn7agpsIUraFWJ3hNcDcTECnA8PPvlqgfar9tjeHH+yHi+9lUUg6inqaW32VVnfDlW3156zFh41zRiGmeLoiFtqMX8gFM8wMZOrEPX1tu+qwZk/dC6VAFiTpIWVQVtCOluCwNypI6r2Db+xJnyctBwUC7eqEkVAnfECMoS3KiNTY+G/0Dnsrgv/SoxVYAAAAASUVORK5CYII='),  url('data:image/png;base64,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'),  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhgL1QZJHAAAAaVJREFUOMu1lT1P20AYx39nX5xLAlYxEgtDkceCxEC7MvIl+jEy8JXoABII9WN0QWJgapTBDBGBAOnFL7kOdlKH+BIS1L90Op3l5+fn5Z7HIgy/PFCpBMiw6eDgG5eXZ97F+fn303b7l9dqpf1+P42iKJXgAW6FWRN4BMYs0mazydHhYc0oVet2uzqKotSBJ4uhAbaWQoda8xjHGGOmzxwQQJ98f6sx4FsiyfWqNfedDs4sdLI9W8A1QBWez4ezEwT+8clJ8PuuY7KnPCoRhmGpUB7QsvgUA6/T0/7+V3N19SOYnIUQYkO6n17STDjzhsNqpvCK4lnlvKSZKIVflq42UUCzDjRYpgqoAB5m89sooHWg0bDldxF0Ah7+81CVPTagtheCpf17Ol/alpFwVU8/pv8ClUkSr2WYJIm2Qm9ubufbxCwpb/6WtR4yjvX1LNCYIAiOpZR7a0Y/AtgDPpfWbq/X+2lWVFGfbUDIYmh65XQppbw1PDTF5TaiGJpTua5LlmUjIF2F6Pt+fTAYPE9aZ+uDN0gU42v0jo56380C/rz9mf0F/562M0QxvvYAAAAASUVORK5CYII='),   url('data:image/png;base64,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');
    background-attachment: local;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom right, bottom left;
    }
.tooltiptext-borders-l {
  position: absolute;
  top: 30px;
  bottom: 40px;
  left: 0;
  width: 20px;
  background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAACCAYAAACt+Hc7AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhowVjvCugAAAChJREFUCNdjZGBgEGRABZyfP39eePHiTeO4uDAGLPIkAyYsYmwMVAYAIvkHb69H/GoAAAAASUVORK5CYII=');
  background-repeat: repeat-y;
  background-position: top left;
}
.tooltiptext-borders-r {
  position: absolute;
  top: 30px;
  bottom: 20px;
  left: 0;
  right: 0;
  background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAACCAYAAACt+Hc7AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhof/er/4wAAACpJREFUCNdjVFJS+s9AOXi/aNEqBn199bO8vLzxDAwM35ElmRioD9jQBQDWZwcb/aOfmQAAAABJRU5ErkJggg==');
  background-repeat: repeat-y;
  background-position: top right;
}
.tooltiptext-borders-t {
  position: absolute;
  top: 0;
  left: 36px;
  right: 103px;
  height: 38px;
  background:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAnCAYAAAAy9QloAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhoP4F3vhwAAAOhJREFUOMu1lMsNwjAQRJ9NSFAACVIBpAIOtJQKqCHVUBsRB5QPEjaHxJCP7RwQK/n2tLszO7IA9nhKMlO/AwGgvUCe5ycfILTWpbdDll1qb4c0TYu/y0xsk4Gb6aA6K/pPAbEBKkfzCIiR0AClE+qWdEM9FQ22cSOZVafACRh5wmfUEHI4KT77BG6TO+ClhOcSNUJf0b7QicPxXIw3H1xTCk170cIK9VQk1oCPZO4mkJzy0Vzk1kA4l8kNsDTA0wJoYAuESHjghlbI72FsRi3MDgq4zxllh0YqVG9c+wJ7DsrBD+NIVFtvbtw4Rw1j9KMAAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: top left;
}
.tooltiptext-borders-b {
  position: absolute;
  bottom: 1px;
  left: 130px;
  right: 20px;
  height: 20px;
  background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAYAAABPPm7SAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4gkQDhkdOMnNDAAAALdJREFUOMvNlMsOwiAQRQ+1Nmo0UT+hS7/f7yJojFaI4qKQaMPQNmy8GxZMztx5gGrbkyYpB7wYUw0NsEhcbQADvLOACi5CkAf2fUgeoDKZPLAOpwiAHvII51ANsBMhX/4scBPyLIHtGCBC7gKkCeVkAQDPUE5KkwAAnQDxwPGnH5kZSU2NkFVcJEkK0KObWFGoYkDtnC0CKGOuusiBtd25yEGYyRTF5+mHgMOMhD7xocx2/Gd78AFOSyj+CS+viAAAAABJRU5ErkJggg==');
  background-repeat: repeat-x;
  background-position: top left;
}

/* New Tooltip engine */
#tooltip {
	position: absolute;
	z-index: 999;
	font-size: 0.875em;
	line-height: 1.6;
}

.tooltip-inline .tooltip-content.uninitialized {
	display: none;
}

@-moz-document url-prefix() {
	.skill, .gf-droplist{
		-moz-appearance: none;
		text-indent: -5px;	
		text-overflow: "";
		background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);	
		background-position: calc(100% - 10px) calc(0.5em + 2px), calc(100% - 5px) calc(0.5em + 2px), calc(100% - 2.5em) 0.5em;
		background-size: 5px 5px, 5px 5px, 1px 1.5em;
		background-repeat: no-repeat;
	}
}

#description {
	overflow-y:auto;	
}

.loading .chibiAnimationClickArea,
.loading {
    background-image: url('/images/8/88/gfloading.gif');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: bottom right;
    background-size: 50px;
}

.loading2 {
  background-image: url("/images/5/5e/gf_loading2.gif");
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: bottom right;
  background-size: 18px;
}

.lazy-img {
  background-image: url("/images/5/5e/gf_loading2.gif");
  background-repeat: no-repeat;
  background-position: center;
}

.enemyname {
  color: #FF0012;
  text-shadow: 0px 0px 3px #EC5151;
  display: inline-block;
}

.enemyname.boss {
  /* background-image: url('/images/1/1e/Boss_Icon_Small.png');*/ 
  background-image: url('/images/f/fc/Boss_Skull_Icon.png');
  background-size: 12px;
  background-repeat: no-repeat;
  padding-left: 14px;
  background-position-y: 3px;
  background-position-x: 0;
}

/* PNC specifics =========================== */

/* Character index */
.pnc-index-entry {
	position: relative;
	display: inline-block;
	height: 250px;
	width: 126px;
	overflow: hidden;
	margin-right: 20px;
	border-radius: 5px;
}
.pnc-index-entry .file {
	position: absolute;
	top: 0;
	left: 0;
}
.pnc-index-entry .card {
	position: absolute;
	top: 14px;
	left: 2px;
	width: 124px;
}
.pnc-index-entry .back {
	position: absolute;
	bottom: -30px;
}
.pnc-index-entry .hero {
	position: absolute;
}
.pnc-index-entry .front {
	position: absolute;
	bottom: -28px;
}
.pnc-index-entry .company {
	position: absolute;
	top: 12px;
	left: 40px;
	width: 120px;
	opacity: 20%;
}
.pnc-index-entry .rarity {
	position: relative;
	top: 190px;
	left: 4px;
}
.pnc-index-entry .name {
	position: absolute;
	bottom: 10px;
	left: 8px;
	width: 120px;
	color: lightgray;
	font-size: 17px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.pnc-index-entry .heroclass {
	position: absolute;
	top: 15px;
	left: 4px;
	width: 16px;
}

/* Template:hero name */
.heroname {
  background-size: 9px;
  background-repeat: no-repeat;
  padding-left: 11px;
  /*white-space:wrap;*/
}

.heroname.star1 {
	color:#2999F3;
	text-shadow: 0px 0px 3px #2999F3; 
}

.heroname.star2 {
	color:#B470E1;
	text-shadow: 0px 0px 3px #B470E1; 
}

.heroname.star3 {
	color:#FC8C10;
	text-shadow: 0px 0px 3px #FC8C10; 
}

.heroname.medic {
  background-image: url('/images/3/30/Icon_PNC_Hero_Class_white_Medic.png')
}

.heroname.guard {
  background-image: url('/images/8/80/Icon_PNC_Hero_Class_white_Guard.png')
}

.heroname.warrior {
  background-image: url('/images/f/f8/Icon_PNC_Hero_Class_white_Warrior.png')
}

.heroname.specialist {
  background-image: url('/images/8/8a/Icon_PNC_Hero_Class_white_Specialist.png')
}

.heroname.sniper {
  background-image: url('/images/8/87/Icon_PNC_Hero_Class_white_Sniper.png')
}

/* Hide tagline */
.heading-holder .tagline {
	display:none;
}