IdleHeroes Wiki
mNo edit summary
mNo edit summary
Line 298: Line 298:
 
}
 
}
 
/*Testing to adjust spacing for faction and role*/
 
/*Testing to adjust spacing for faction and role*/
.pi-horizontal-group-no-labels {
+
.portable-infobox.pi-theme-abyss .pi-horizontal-group-no-labels .pi-data-value {
 
padding-right: 5px;
 
padding-right: 5px;
 
padding-top: 0px;
 
padding-top: 0px;

Revision as of 10:04, 27 October 2019

/* hide all "Add a photo to this gallery" buttons */
.wikia-photogallery-add {
    display: none !important;
}

/* IMPORTANT FOR TOOLTIPS */

.WikiaArticle{overflow:visible !important;}

/* CSS FOR SPECIAL FONT */

@font-face { font-family: 'Poetsen';
             src: url('https://vignette.wikia.nocookie.net/idleheroes/images/b/b6/Poetsenone-regular.ttf') format('truetype'); }

/* CSS FOR MENU ELEMENTS */

.mborder {
    border-radius: 5px 5px 5px 5px;
    background-color: #002D58;
    width: 100%;
    padding: 5px;
    overflow: hidden;
    margin: 0px 0 10px 0;
    box-sizing: border-box;
}

.mheadline {
    padding: 5px;
    color: #FFDB82;
    font-family: Poetsen;
    font-size: 16px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.mcontent {
    box-sizing: border-box;
    border-radius: 5px 5px 5px 5px;
    background-color: rgba( 255, 255 , 255, .9);
    width: 100%;
    padding: 10px;
    overflow: hidden;
    margin-top: 5px;
    text-align: justify;
}

.mcontent div.ajax-poll {
    border: none;
    margin: 0px;
    padding: 0px 20px 10px 10px;
}

/* CSS FOR SLIDING DIVS */

.menuBox {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    width: 120px;
    height:120px;
    border: solid 1px black; box-shadow: 0px 0px 2px 2px Grey;
    margin: 5px;
}

.menuBox .slideIn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* top: 120px; */
    opacity: 0;
    width: 120px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFF298;
    text-align: center;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    padding: 10px;
    box-sizing: border-box;
    font-family: Poetsen;
    font-size: 18px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
    left: 0px;
}
.menuBox:hover .slideIn {
    /* top: 0px; */
    opacity: 1;
}

/* CSS FOR TOOLTIP */

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

.ttparent .ttchild {
    visibility: hidden;
    border: solid 2px DimGray;
    background-color: Gainsboro;
    color: DimGray;
    text-align: left;
    border-radius: 6px;
    padding: 3px 5px;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 100%;
    margin-left: 15px;
    margin-top: -17px;
    opacity: 0;
    transition: opacity 0.5s;
    box-shadow: 3px 3px 10px DarkGray;
    white-space: nowrap;
}

.ttparent:hover .ttchild {
    visibility: visible;
    opacity: 1;
}

.ttparent::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent DimGray transparent transparent;
	visibility: hidden;
    opacity: 0;
    transition: opacity .5s;
    z-index: 999;
}

.ttparent:hover::after {
    visibility: visible;
    opacity: 1;
}

/* CSS FOR TRANSPARENT TOOLTIP */

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

.tttparent .tttchild {
    visibility: hidden;
    text-align: left;
    position: absolute;
    z-index: 999;
    left: 100%;
    margin-left: 15px;
    opacity: 0;
    transition: opacity 0.5s;
    width: 400px;
}

.tttparent:hover .tttchild {
    visibility: visible;
    opacity: 1;
}

/* begin Hero infobox css */
.portable-infobox[class*="pi-theme-abyss"] .pi-border-color,
.portable-infobox[class*="pi-theme-fortress"] .pi-border-color,
.portable-infobox[class*="pi-theme-light"] .pi-border-color,
.portable-infobox[class*="pi-theme-forest"] .pi-border-color,
.portable-infobox[class*="pi-theme-shadow"] .pi-border-color {
    border-width:1px;
}
 
.portable-infobox.pi-theme-abyss {
    border-style: ridge;
    border-width: 5px;
    border-left-color:#C30; 
    border-bottom-color:#C30; 
    border-radius:7px; 
    background-color:#D5D4D4; /*#100;*/  
}
.portable-infobox.pi-theme-fortress {
    border-style: ridge;
    border-width: 5px; 
    border-left-color:#09F; 
    border-bottom-color:#09F;
    border-radius:7px; 
    background-color:#D5D4D4;/*#001*/ 
}
.portable-infobox.pi-theme-light {
    border-style: ridge;
    border-width: 5px; 
    border-left-color:#FF0; 
    border-bottom-color:#FF0;
    border-radius:7px; 
    background-color: #D5D4D4;/*#180900*/ 
}
.portable-infobox.pi-theme-forest,
.portable-infobox.pi-theme-Forest{
    border-style: ridge;
    border-width: 5px; 
    border-left-color:#090; 
    border-bottom-color:#090;
    border-radius:7px; 
    background-color:#D5D4D4; /*#010*/
}
.portable-infobox.pi-theme-shadow {
    border-style: ridge;
    border-width: 5px; 
    border-left-color:#666; 
    border-bottom-color:#666;
    border-radius:7px; 
    background-color: #D5D4D4;/*#000*/ 
}
.portable-infobox.pi-theme-abyss {
    border-right-color:#C30; 
    border-top-color:#C30; 
    color:#F33;  
}
.portable-infobox.pi-theme-fortress {
    border-right-color:#09F; 
    border-top-color:#09F; 
    color:#3CF;
}
.portable-infobox.pi-theme-light {
    border-right-color:#FF0; 
    border-top-color:#FF0; 
    color:#FF0;  
}
.portable-infobox.pi-theme-forest,
.portable-infobox.pi-theme-Forest {
    border-right-color:#090; 
    border-top-color:#090; 
    color: #090;/*#3F3*/  
}
.portable-infobox.pi-theme-shadow {
    border-right-color:#666; 
    border-top-color:#666; 
    color:#888;
}
.portable-infobox.pi-theme-abyss .pi-title,.portable-infobox.pi-theme-abyss .pi-header {
    background-color:#600; 
	color:#D5D4D4;
    text-align:center; 
    font-size:larger; 
    font-weight:bold;
}
 
.portable-infobox.pi-theme-fortress .pi-title,.portable-infobox.pi-theme-fortress .pi-header {
    background-color:#006; 
	color:#D5D4D4;
    text-align:center; 
    font-size:larger; 
    font-weight:bold;
}
 
.portable-infobox.pi-theme-light .pi-title,.portable-infobox.pi-theme-light .pi-header {
    background-color:#750; 
	color:#D5D4D4;
    text-align:center; 
    font-size:larger; 
    font-weight:bold;
}
 
.portable-infobox.pi-theme-forest .pi-title,
.portable-infobox.pi-theme-forest .pi-header,
.portable-infobox.pi-theme-Forest .pi-title,
.portable-infobox.pi-theme-Forest .pi-header {
    background-color:#060; 
	color:#D5D4D4;
    text-align:center; 
    font-size:larger; 
    font-weight:bold;
}
 
.portable-infobox.pi-theme-shadow .pi-title,.portable-infobox.pi-theme-shadow .pi-header {
    background-color:#333; 
	color:#D5D4D4;
    text-align:center; 
    font-size:larger; 
    font-weight:bold;
}
 .pi-theme-abyss .pi-image-collection{
   	border-bottom: 1px solid #C30;
	border-top: 1px solid #C30;  
 }
 .portable-infobox.pi-theme-abyss .pi-image-collection-tabs li {
  background-color: transparent;
  font-size:x-small;
  padding: 2px;
}

 /* Adds a border between faction and role.pi-item[data-item-name=faction]*/
  .pi-horizontal-group-item:first-of-type {
    border-right: 2px solid var(--border-color) !important; 
    }
 /*Testing to adjust spacing for faction and role*/
  .portable-infobox.pi-theme-abyss .pi-horizontal-group-no-labels .pi-data-value {
    padding-right: 5px;
    padding-top: 0px;
    padding:5px;
    line-height: 15px !important;
   /* align-items: right !important;*/
  }
 /*Adds a bottom border under all the skills in the collapsable group skills*/
    .pi-theme-abyss .pi-data.pi-item[data-item-name=skills], .pi-theme-abyss .pi-horizontal-group.pi-item[data-item-name=skills] {
	border-bottom: 1px solid #C30;
	/*border-top: 1px solid #C30;*/
    }
    /*Changes the stats(health, atk etc) labels so they are on the one line*/
    .pi-theme-abyss .pi-smart-group-item.pi-item[data-source=stats], 
    .pi-theme-abyss .pi-smart-data-label, .pi-theme-abyss .pi-smart-data-value{
	border-left: 1px solid #C30;
	border-right: 1px solid #C30;
	border-top: 1px solid #C30;
	text-align:center !important;
	padding: 1px !important;
}
    .pi-smart-group-item.pi-item[data-source=stats], 
    .pi-theme-forest .pi-smart-data-label, .pi-theme-forest .pi-smart-data-value,
    .pi-smart-group-item.pi-item[data-source=stats], 
    .pi-theme-Forest .pi-smart-data-label, .pi-theme-forest .pi-smart-data-value{
	border-left: 1px solid var(--border-color);/*#090*/
	border-right: 1px solid var(--border-color);/*#090*/
	border-top: 1px solid var(--border-color);/*#090*/
	border-bottom: 1px solid var(--border-color);/*#090*/
	text-align:center !important;
	padding: 1px !important;
    }
/*Changes the size of the skills header to a narrow bar*/
    .pi-theme-abyss .pi-collapse .pi-item[data-item-name=skills],
    .pi-theme-forest .pi-collapse .pi-item[data-item-name=skills],
    .pi-theme-Forest .pi-collapse .pi-item[data-item-name=skills]{
    font-size: x-small !important;
    line-height: 10px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/*Fix it so the skills data labels are on the one line.*/
    .pi-theme-abyss .pi-data.pi-item[data-item-name=skills] .pi-data-label,
    .pi-theme-Abyss .pi-data.pi-item[data-item-name=skills] .pi-data-label,
    .pi-theme-forest .pi-data.pi-item[data-item-name=skills] .pi-data-label,
    .pi-theme-Forest .pi-data.pi-item[data-item-name=skills] .pi-data-label{
        flex-basis: 100px !important;
        -webkit-flex-basis: 100px !important;
        -moz-flex-basis: 100px !important;
        -ms-flex-preferred-size: 100px !important;
        flex-wrap: nowrap;
       }
 /* .portable-infobox.pi-theme-abyss .pi-section-navigation/*, .portable-infobox.pi-theme-abyss .pi-section-label {
    background-color: transparent ;
    color:#D5D4D4;
 }
    .portable-infobox.pi-theme-abyss .pi-item .pi-panel .pi-border-color {
    border-top-color: #C30; 
   border-style: solid;
    border-width: 2px; 
 }/*pi-section-content*/
    .portable-infobox.pi-theme-abyss .pi-panel-scroll-wrapper.pi-section-navigation ,
    .portable-infobox.pi-theme-abyss .pi-section-navigation,
    .portable-infobox.pi-theme-abyss .pi-section-tab,
    .portable-infobox.pi-theme-abyss .pi-section-label {
       padding: 0px !important; 
       font-size: small !important;
       margin: 0px 5px 0px 5px !important;
       align-items: center;
        height: 25px !important;
       /* display:inline;*/
        text-align: center;
    }
 
  .portable-infobox.pi-theme-abyss .pi-section-tab.pi-section-active {
   background-color: #CC0000;
    color:#F33;
   font-size: x-small !important;
    border:1px solid #C30; 
 }
 /* Horizontal and smart group value/label styling */
/*.portable-infobox.pi-theme-abyss .pi-horizontal-group-item ,
.portable-infobox.pi-theme-abyss .pi-horizontal-group-item.pi-data-value,
.portable-infobox.pi-theme-abyss .pi-horizontal-group-item.pi-data-label,
.portable-infobox.pi-theme-abyss .pi-smart-group-body .pi-smart-data-label,
.portable-infobox.pi-theme-abyss .pi-smart-group-body .pi-smart-data-value {
	border-color:#D95757 ;
	border-width: 1px !important;
	text-align:center !important;
}
  /* Horizontal group header styling */
/*.portable-infobox.pi-theme-abyss .pi-horizontal-group .pi-header, 
.portable-infobox.pi-theme-abyss .pi-smart-group .pi-header, 
.portable-infobox.pi-theme-abyss .pi-smart-group .pi-border-color,
.portable-infobox.pi-theme-abyss .pi-smart-group-head .pi-smart-data-label {
	border-color:#600; 
	border-width: 1px;
	text-align:center; 
}

 /* Normal value/label styling */
.portable-infobox[class*="pi-theme-abyss"] .pi-data-value,
.portable-infoox[class*="pi-theme-fortress"] .pi-data-value,
.portable-infobox[class*="pi-theme-light"] .pi-data-value,
.portable-infobox[class*="pi-theme-forest"] .pi-data-value,
.portable-infobox[class*="pi-theme-shadow"] .pi-data-value,
.portable-infobox[class*="pi-theme-abyss"] .pi-data-value a,
.portable-infobox[class*="pi-theme-fortress"] .pi-data-value a,
.portable-infobox[class*="pi-theme-light"] .pi-data-value a,
.portable-infobox[class*="pi-theme-forest"] .pi-data-value a,
.portable-infobox[class*="pi-theme-shadow"] .pi-data-value a {
	color:#000;
}
.portable-infobox[class*="pi-theme-abyss"] .pi-data-value a,
.portable-infobox[class*="pi-theme-fortress"] .pi-data-value a,
.portable-infobox[class*="pi-theme-light"] .pi-data-value a,
.portable-infobox[class*="pi-theme-forest"] .pi-data-value a,
.portable-infobox[class*="pi-theme-shadow"] .pi-data-value a {
	text-decoration:underline;
}
.portable-infobox[class*="pi-theme-abyss"] .pi-data-value a:hover,
.portable-infobox[class*="pi-theme-fortress"] .pi-data-value a:hover,
.portable-infobox[class*="pi-theme-light"] .pi-data-value a:hover,
.portable-infobox[class*="pi-theme-forest"] .pi-data-value a:hover,
.portable-infobox[class*="pi-theme-shadow"] .pi-data-value a:hover {
	color:#FFF;
}
.portable-infobox[class*="pi-theme-abyss"] .pi-image-thumbnail,
.portable-infobox[class*="pi-theme-fortress"] .pi-image-thumbnail,
.portable-infobox[class*="pi-theme-light"] .pi-image-thumbnail,
.portable-infobox[class*="pi-theme-forest"] .pi-image-thumbnail,
.portable-infobox[class*="pi-theme-shadow"] .pi-image-thumbnail {
	width: 100px;/*100px*/
	height: auto;
	padding: 5px;
}
.portable-infobox[class*="pi-theme-abyss"] .pi-image-thumbnail .pi-item[data-item-name=img],
.portable-infobox[class*="pi-theme-fortress"] .pi-image-thumbnail .pi-item[data-item-name=img],
.portable-infobox[class*="pi-theme-light"] .pi-image-thumbnail .pi-item[data-item-name=img],
.portable-infobox[class*="pi-theme-forest"] .pi-image-thumbnail .pi-item[data-item-name=img],
.portable-infobox[class*="pi-theme-shadow"] .pi-image-thumbnail .pi-item[data-item-name=img] {
	width: 200px !important;
	padding: 2px;
}



/*Themes for the Factions - These are the Varibles used to define the theme colours for the infobox*/

/*Shadow - #c9ffff -Faction Icon skull colour, #09595A -Faction Icon bg colour  */
.pi-theme-Shadow, .pi-theme-shadow{
    --text-color: #888; 
    --bg-color: #961724;
    --link-color: #f5b1d2;
    --border-color:#666; /* or #00696B*/
    --heading-color:#BAFDFD; /*or #AFDDDD*/
    --link-color-hover: #FFF;/*link text colour on hover of mouse*/
}

/*Fortress - #85ECFF -Faction Icon cross colour, #003A8F -Faction Icon bg colour (taken from darkest part)*/
.pi-theme-Fortress, .pi-theme-fortress {
    --text-color: #3CF; 
    --bg-color: #006; 
    --link-color: #edabff; 
    --border-color:#09F;  /* ro #004DAB*/
    --heading-color: ;
    --link-color-hover: #FFF;/*link text colour on hover of mouse*/
}

/*Abyss - #FAB08D - Faction Icon swirl colour, #9B221A - Faction Icon bg colour (taken from darkest part)  */
.pi-theme-Abyss, .pi-theme-abyss{
    --text-color: #F33; /*Text colour for the standard txt within infobox including the active selected tab*/
    --bg-color: #600; /*Background colour for the title, headings and text colour for navigation*/
    --link-color: #000000;  /*General link colour*/
    --border-color: #C30; /*Border colour for the main infobox and cells*/
    --heading-color: #D5D4D4; /*Text colour for the Title and Headings*/
    --label-color: #F33; /*Text colour for the data labels*/
    --tab-color: #CC0000;/* Tab background colour for the selected active tabs*/
	--link-color-hover: #FFF;/*link text colour on hover of mouse*/
}

/*Forest - #E2EFB7 - Faction Icon leaf colour, #19610D - Faction Icon bg colour (taken from darkest part)  */
.pi-theme-Forest, .pi-theme-forest  {
    --text-color: #090; /*#3F3*/ 
    --bg-color: #00134d;
    --link-color: #debd88;
    --border-color:#090;/* or #00660C  */
    --heading-color:#BBD3A0;/* or #7DECFD*/
    --label-color: ; /*Text colour for the data labels*/
    --tab-color: #CC0000;/* Tab background colour for the selected active tabs*/
    --link-color-hover: #FFF;/*link text colour on hover of mouse*/
}

 /*Dark - #CEAAE4 - Faction Icon fork colour, #410087 - Faction Icon bg colour (taken from darkest part)  */
.pi-theme-Dark, .pi-theme-dark  {
    --text-color: white;
    --bg-color: ;
    --link-color: #f5b1d2;
    --border-color:#6202B5;
    --heading-color:#DFCCE8;/* or #C1A5D5*/
    --link-color-hover: #FFF;/*link text colour on hover of mouse*/
}

/*Light - #FFEB91 - Faction Icon flame colour, #BA5304 - Faction Icon bg colour (taken from darkest part)  */
.pi-theme-Light, .pi-theme-light  { 
    --text-color: #FF0;
    --bg-color: #ae6838;
    --link-color: #debd88;
    --border-color:#FF0;/* or #C05D12*/
    --heading-color: #750;/* or #FFF0A0 or #F49F23*/
    --link-color-hover: #FFF;/*link text colour on hover of mouse*/
}




/* end Hero infobox css */






/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 8 (2016-05-21)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}
/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}
/**
 * Note hlist style usage differd in
 * the Minerva skin. Remember .hlist is a class defined in core as well! Please check Minerva desktop (and Minerva.css) when changing
 * See https://phabricator.wikimedia.org/T213239
 */
.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
	content: ")";
	font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}
.hlist ol > li {
	counter-increment: listitem;
}
.hlist ol > li:before {
	content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) "\a0";
}

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none none;
	margin: 0;
}
.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
	box-sizing: border-box;
	border: 3px ridge #002D58/*#955636/*#a2a9b1*/;
	width: 100%;
	clear: both;
	color: #000/*#D5D4D4*/;
	font-size:larger;	
	text-align: center;
	padding: 0px;
	margin: 0em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
.navbox a {
	color: #000;/*#D5D4D4*/
    /*font-family: Poetsen;*/
	white-space:nowrap;
}
.navbox .abyss a {
	color:#600/*#F33*/;
}
.navbox .blue a {
	color:#3CF;
}
.navbox .yellow a {
	color:#FF0;
}
.navbox .green a {
	color:#3F3;
}
.navbox .black a {
	color:#888;
}
.navbox .heroes a {
	color: #FFDB82;
    font-family: Poetsen;
}

.navbox th .mw-collapsible-toggle,
.navbox th .ve,
.navbox td {
	font-size:x-small;
}
.navbox th .ve {
	float:left;
	width: 4em;
}
.navbox .mw-collapsible-toggle {
	width: 5em;
}
.navbox .navbox {
	margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox + .navbox {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 0.25em 1em;      /* Title, group and above/below styles */
	line-height: 1.5em;
	text-align: center;
}
th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
.navbox,
.navbox-subgroup {
	background-color: #B07459; /* Background color */
}
.navbox-list {
	line-height: 1.5em;
	border-color: #B07459;    /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px ridge #B07459; /* Must match background color */
}
.navbox th,
.navbox-title {
	background-color: #002D58/*#ccccff*/;      /* Level 1 color */
	color: #FFDB82;
    font-family: Poetsen;
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: #ddddff;      /* Level 2 color */
	
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
	background-color: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
/* Fraction Navbox styling*/
.navbox-heroes {
	border-color: #955636/*#80F*/
}
/* header bg */
.navbox-heroes th {
	background-color: #002D58/*#306*/;
}
/* body bg */
.navbox-heroes td {
	background-color: #080016;
}
.navbox-abyss {
	border-color:#C30
}
.navbox-abyss th {
	background-color: #600;
}
.navbox-abyss td {
	background-color: #FF0;
	background-color: rgba( 255, 255 , 255, .9);
}
.navbox .abyss .hlist td dl,
.navbox .abyss .hlist td ul,
.navbox .abyss td.hlist dl,
.navbox .abyss td.hlist ul, 
.navbox .abyss ul {
    list-style-image: url("File:Abyss.png");
}
.navbox-blue {
	border-color:#09F
}
.navbox-blue th {
	background-color: #006;
}
.navbox-blue td {
	background-color: #001;
}
.navbox-yellow {
	border-color:#FF0
}
.navbox-yellow th {
	background-color: #750;
}
.navbox-yellow td {
	background-color: #180900;
}
.navbox-green {
	border-color:#090
}
.navbox-green th {
	background-color: #060;
}
.navbox-green td {
	background-color: #010;
}
.navbox-black {
	border-color:#666
}
.navbox-black th {
	background-color: #333;
}
.navbox-black td {
	background-color: #000;
}
/* end navbox css */



/* Default styling for Navbar template */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}
.navbar ul {
	display: inline;
	white-space: nowrap;
}
.mw-body-content .navbar ul {
	line-height: inherit;
}
.navbar li {
	word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
	font-variant: small-caps;
	border-bottom: none;
	text-decoration: none;
	cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
	font-size: 100%;
}
.navbox .navbar {
	display: block;
	font-size: 100%;
}
.navbox-title .navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: 0.5em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
	/* @noflip */
	float: right;
	font-weight: normal;
	/* @noflip */
	margin-left: 0.5em;
	/* @noflip */
	text-align: right;
	width: auto;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle {
	font-weight: normal;
	/* @noflip */
	text-align: right;
	padding-right: 0.2em;
	padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
}