MediaWiki:FandomMobile.css

/***************************
/* Template example styles *
/***************************/
span.templateexmaple {
  font-family: fixed-width;
}

span.templateexample span.templatelink {
  font-weight: bold;
}

span.templateexample span.paramname {
}

span.templateexample span.paramvalue {
  color: #8a8a66;
  font-style: italic;
}

/********************
/* Notice templates *
/********************/
.topNotice {
  border: 1px solid #ffff99;
  background: #100300;
  color: #c3b073;
  padding: 3px;
}

.topNotice .heading { 
  font-size: 132%;
}

.topNotice.delete {
  border: 1px solid #ff9999;
  background: #100300;
  color: #c3b073;
}

.topNotice.move, .topnotice.merge, .topnotice.split {
  border: 1px solid #ffcc99;
  background: #100300;
  color: #c3b073;
}

.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough {
  border: 1px solid #99ff99;
  background: #100300;
  color: #c3b073;
}

.topNotice.offtopic {
  border: 1px solid #99ffff;
  background: #100300;
  color: #c3b073;
}

/******************
/* Image licenses *
/******************/
div.imageLicense {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  padding: 3px;
}

div.imageLicense table {
}

div.imageLicense p {
}

div.licenseHeading {
  font-size: 150%;
  font-weight: bold;
}

/***********************
/* Flex text link list *
/***********************/
.skin-fandommobile .flextextlinks {
  text-align: center;
}

.skin-fandommobile .flextextlinks ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  text-align: center;
  margin: -2px -10px;
  padding: 0;
}

.skin-fandommobile .flextextlinks ul li {
  display: flex;
  list-style: none;
  flex-flow: column wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  flex: 1 0 15rem;
  margin: 0;
  padding: 2px 10px;
}

@media ( min-width: 30rem ) {
  .skin-fandommobile .flextextlinks ul li {
    flex: 0 0 15rem;
  }
}

.skin-fandommobile .flextextlinks ul li a, 
.skin-fandommobile .flextextlinks ul li a:visited, 
.skin-fandommobile .flextextlinks.plainlinks ul li a,
.skin-fandommobile .flextextlinks.plainlinks ul li a:visited {
  display: flex;
  border-radius: 4px;
  border: 1px soild #5f3f33;
  background: #fbdf11 !important;
  box-shadow: inset 0 0 9px #c82d02;
  color: #3b0000 !important;
  text-shadow: 0 0 2px #ba4a14;
  font-weight: bold;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px !important;
}

/***********************
/* Flex icon link list *
/***********************/
.skin-fandommobile .flexiconlinks {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  text-align: center;
  margin: -10px;
  padding: 0;
}

.flexiconlinks.horizontal {
  margin: -2px -10px;
}

.skin-fandommobile .flexiconlinks .iconlink {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border-radius: 4px;
  border: 1px soild #5f3f33;
  background: #fbdf11;
  box-shadow: inset 0 0 9px #c82d02;
  color: #3b0000;
  text-shadow: 0 0 2px #ba4a14;
  font-weight: bold;
  margin: 10px;
  padding: 5px 10px;
  flex: 0 0 8rem;
  min-width: 128px;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink {
  margin: 2px 10px;
  padding: 10px;
}

.skin-fandommobile .flexiconlinks.iconsize24 .iconlink {
  flex: 0 0 1.5rem;
  min-width: 24px;
}

.skin-fandommobile .flexiconlinks.linksize24 .iconlink {
  flex: 0 0 1.5rem;
  min-width: 24px;
}

.skin-fandommobile .flexiconlinks.iconsize64 .iconlink {
  flex: 0 0 4rem;
  min-width: 64px;
}

.skin-fandommobile .flexiconlinks.linksize64 .iconlink {
  flex: 0 0 4rem;
  min-width: 64px;
}

.skin-fandommobile .flexiconlinks.iconsize96 .iconlink {
  flex: 0 0 6rem;
  min-width: 96px;
}

.skin-fandommobile .flexiconlinks.linksize96 .iconlink {
  flex: 0 0 6rem;
  min-width: 96px;
}

.skin-fandommobile .flexiconlinks.iconsize128 .iconlink {
  flex: 0 0 8rem;
  min-width: 128px;
}

.skin-fandommobile .flexiconlinks.linksize128 .iconlink {
  flex: 0 0 8rem;
  min-width: 128px;
}

.skin-fandommobile .flexiconlinks.iconsize192 .iconlink {
  flex: 0 0 12rem;
  min-width: 192px;
}

.skin-fandommobile .flexiconlinks.linksize192 .iconlink {
  flex: 0 0 12rem;
  min-width: 192px;
}

.skin-fandommobile .flexiconlinks.iconsize256 .iconlink {
  flex: 0 0 16rem;
  min-width: 256px;
}

.skin-fandommobile .flexiconlinks.linksize256 .iconlink {
  flex: 0 0 16rem;
  min-width: 256px;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink {
  flex-flow: row nowrap;
  align-items: flex-start;
  flex: 1 0 15rem;
  box-sizing: border-box;
}

@media ( min-width: 30rem ) {
  .skin-fandommobile .flexiconlinks.horizontal .iconlink {
    flex: 0 0 15rem;
  }
}

.skin-fandommobile .flexiconlinks .iconlink .icon {
  display: flex;
  flex-flow: column nowrap;
  justify-content: stretch;
  min-width: 128px;
  width: 128px;
  height: 128px;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
}

.skin-fandommobile .flexiconlinks.linksize24 .iconlink .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
}

.skin-fandommobile .flexiconlinks.linksize64 .iconlink .icon {
  min-width: 64px;
  width: 64px;
  height: 64px;
}

.skin-fandommobile .flexiconlinks.linksize96 .iconlink .icon {
  min-width: 96px;
  width: 96px;
  height: 96px;
}

.skin-fandommobile .flexiconlinks.linksize128 .iconlink .icon {
  min-width: 128px;
  width: 128px;
  height: 128px;
}

.skin-fandommobile .flexiconlinks.linksize192 .iconlink .icon {
  min-width: 192px;
  width: 192px;
  height: 192px;
}

.skin-fandommobile .flexiconlinks.linksize256 .iconlink .icon {
  min-width: 256px;
  width: 256px;
  height: 256px;
}

.skin-fandommobile .flexiconlinks.iconsize64 .iconlink .icon {
  min-width: 64px;
  width: 64px;
  height: 64px;
}

.skin-fandommobile .flexiconlinks.iconsize96 .iconlink .icon {
  min-width: 96px;
  width: 96px;
  height: 96px;
}

.skin-fandommobile .flexiconlinks.iconsize128 .iconlink .icon {
  min-width: 128px;
  width: 128px;
  height: 128px;
}

.skin-fandommobile .flexiconlinks.iconsize192 .iconlink .icon {
  min-width: 192px;
  width: 192px;
  height: 192px;
}

.skin-fandommobile .flexiconlinks.iconsize256 .iconlink .icon {
  min-width: 256px;
  width: 256px;
  height: 256px;
}

.skin-fandommobile .flexiconlinks .iconlink .icon a {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 100%;
  margin: -5px -10px 0 -10px;
  padding: 5px 10px 0 10px;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink .icon a {
  margin: -10px 0 -10px -10px;
  padding: 10px 0 10px 10px !important;
}

.skin-fandommobile .flexiconlinks .iconlink .text {
  color: #3b0000;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  width: 100%;
  text-align: center;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink .text {
  flex-grow: 1;
  width: auto;
  text-align: left;
}

.skin-fandommobile .flexiconlinks .iconlink .text a,
.skin-fandommobile .flexiconlinks .iconlink .text a:visited {
  display: block;
  color: #3b0000 !important;
  width: auto;
  margin: 0 -10px -5px -10px;
  padding: 0 10px 5px 10px !important;
}

.skin-fandommobile .flexiconlinks.horizontal .iconlink .text a,
.skin-fandommobile .flexiconlinks.horizontal .iconlink .text a:visited {
  margin: -10px -10px -10px 0;
  padding: 10px 10px 10px 0.5rem !important;
}

/*******************************
/* Responsive flex page layout *
/*******************************/
.skin-fandommobile .rfpelements {
  width: 100%;
  overflow: hidden;
}

.skin-fandommobile .rfpblock {
  margin: 5px;
  padding: 3px 6px;
  text-align: left;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible .heading a {
  display: block;
  padding: 0 0 0 15px;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible .heading a:hover, 
.skin-fandommobile .rfpblock.rfpmobilecollapsible .heading .imageheading a:active {
  text-decoration: none;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible.collapsed .heading {
  border: none;
  margin-bottom: -4px;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible.collapsed .body {
  display: none;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible.expanded .body {
  display: block;
}

.skin-fandommobile .rfpblock img {
  max-width: 100%;
  height: auto;
}

/****************************
/* Responsive flex specials *
/****************************/
.skin-fandommobile .rfptwitter:not(.collapsed),
.skin-fandommobile .rfptwitter.expanded {
  display: flex;
  flex-flow: column nowrap;
}

.skin-fandommobile .rfptwitter:not(.collapsed) .body,
.skin-fandommobile .rfptwitter:not(.collapsed) .body .twitter-timeline-wrapper,
.skin-fandommobile .rfptwitter.expanded .body,
.skin-fandommobile .rfptwitter.expanded .body .twitter-timeline-wrapper {
  display: flex;
  flex-flow: column nowrap;
  flex: 0 0 410px;
}

.skin-fandommobile .rfptwitter:not(.collapsed) .body .twitter-timeline-wrapper iframe,
.skin-fandommobile .rfptwitter.expanded .body .twitter-timeline-wrapper iframe {
  width: auto !important;
  height: auto !important;
  flex: 0 0 400px;
}

/******************************
/* Responsive flex appearance *
/******************************/
.skin-fandommobile .rfpbox,
.skin-fandommobile .rfpmobilebox {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  margin: 5px;
  padding: 3px 6px;
}

.skin-fandommobile .rfpblock .heading {
  font-family: serif;
  font-weight: bold;
  color: #f7aa54;
  font-size: 132%;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible.collapsed .heading a {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%227%22%20viewBox%3D%220%200%205%207%22%3E%3Cg%20fill%3D%22%23ce6c28%22%3E%3Ctitle%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3Eleft%20arrow%3C%2Ftitle%3E%3Cpath%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M1%200%20L1%207%20L5%203.5%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left center no-repeat;
}

.skin-fandommobile .rfpblock.rfpmobilecollapsible.expanded .heading a {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%224%22%20viewBox%3D%220%200%207%204%22%3E%3Cg%20fill%3D%22%23ce6c28%22%3E%3Ctitle%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3Edown%20arrow%3C%2Ftitle%3E%3Cpath%20xmlns%3Adefault%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20d%3D%22M0%200%20L7%200%20L3.5%204%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left center no-repeat;
}

/******************************************
/* Responsive flex documentation examples *
/******************************************/
.rfpdoclabel {
  border: 1px solid #341f17;
  padding: 3px 6px;
  text-align: center;
}

.rfpdocexample {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  margin: 0 0 10px 0;
}

.rfpdocnarrow {
  border: 1px solid #341f17;
  padding: 3px 0 0 0;
  width: 16.666667%;
  box-sizing: border-box;
}

.rfpdocmedium {
  border: 1px solid #341f17;
  padding: 3px 0 0 0;
  width: 33.333333%;
  box-sizing: border-box;
}

.rfpdocwide {
  border: 1px solid #341f17;
  padding: 3px 0 0 0;
  width: 50%;
  box-sizing: border-box;
}

.rfpdocelements {
  display: flex;
  flex-flow: row wrap;
}

.rfpdocshelf,
.rfpdocstack {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rfpdocblock {
  margin: 5px;
  padding: 3px 6px;
  flex: 0 0 calc( 100% - 10px );
  max-width: calc( 100% - 10px );
  text-align: center;
  box-sizing: border-box;
}

.rfpdocstack .rfpdocstack,
.rfpsdoctack .rfpdocshelf,
.rfpdocshelf .rfpdocshelf,
.rfpdocshelf .rfpdocstack {
  flex: 1 0 auto;
  max-width: 100%;
}

.rfpdocstack .rfpdocblock,
.rfpdocshelf .rfpdocblock {
  flex: 1 0 auto;
  max-width: calc( 100% - 10px );
}

.rfpdocstack .rfpdocnoresize {
  flex: 0 0 auto;
}

.rfpdocmedium .rfpdoc100-50-67size,
.rfpdocmedium .rfpdoc100-50-50size,
.rfpdocmedium .rfpdoc100-50-33size {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocmedium .rfpdocblock.rfpdoc100-50-67size,
.rfpdocmedium .rfpdocblock.rfpdoc100-50-50size,
.rfpdocmedium .rfpdocblock.rfpdoc100-50-33size {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdoc100-100-67size,
.rfpdocwide .rfpdoc100-50-67size {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-67size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-67size {
  flex: 0 0 calc( 66.666667% - 10px );
  max-width: calc( 66.666667% - 10px );
}

.rfpdocwide .rfpdoc100-100-50size,
.rfpdocwide .rfpdoc100-50-50size {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-50size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-50size {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdoc100-100-33size,
.rfpdocwide .rfpdoc100-50-33size {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.rfpdocwide .rfpdocblock.rfpdoc100-100-33size,
.rfpdocwide .rfpdocblock.rfpdoc100-50-33size {
  flex: 0 0 calc( 33.333333% - 10px );
  max-width: calc( 33.333333% - 10px );
}

.rfpdocwide .rfpdocshelf {
  flex-flow: row wrap;
}

.rfpdocwide .rfpdocshelf > .rfpdocstack {
  flex: 0 0 50%;
  max-width: 50%;
}

.rfpdocwide .rfpdocshelf > .rfpdocblock {
  flex: 0 0 calc( 50% - 10px );
  max-width: calc( 50% - 10px );
}

.rfpdocwide .rfpdocshelf > .rfpdocstack.rfpdockeepwide {
  flex: 0 0 100%;
  max-width: 100%;
}

.rfpdocwide .rfpdocshelf > .rfpdocblock.rfpdockeepwide {
  flex: 0 0 calc( 100% - 10px );
  max-width: calc( 100% - 10px );
}

/*********************
/* Front page styles *
/*********************/
.fpcolumns {
  min-width: auto !important;
  width: auto !important;
  max-width: auto !important;
}

.fpouter {
  padding: 0;
  margin: 10px -10px 0 -10px;
}

table.fprow {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px;
  margin: -10px 0 0 0;
  padding: 0;
  width: 100%;
}

.fpcolleft {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.fpcolcenter {
  float: left;
  margin: 0;
  padding: 0;
}

.fpcolright {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

.fpbox {
  border: 1px solid #341f17;
  background: transparent;
  color: #c3b073;
  vertical-align: top;
  padding: 3px;
}

.fpbanner {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  padding: 3px;
}

.fpbannertable {
  display: table; 
  width: 100%; 
}

.fpbannercell {
  display: table-cell; 
  text-align: center; 
  vertical-align: middle;
}

.fpbannerblock {
  display: inline-block;
  text-align: center;
  width: 100%; 
}

.fpinnerbox {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  padding: 3px;
}

.fpinnerbox ul {
  margin-left: 0;
  padding-left: 0;
}

.fpinnerbox ul li:before {
  content: "·";
  float: left;
  display: block;
  margin-left: -0.7em;
}

.fpinnerbox ul li {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 1em;
}

.fpinnerbox .columns {
  margin: 0;
  padding: 0;
}

.fpinnerbox .columns .leftcol {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.fpinnerbox .columns .centercol {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.fpinnerbox .columns .rightcol {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

div#content .fpinnerbox .columns .leftcol > *, div#content .fpinnerbox .columns .centercol > *, div#content .fpinnerbox .columns .rightcol > * {
  margin: 0;
  padding: 0;
}

div#content .fpinnerbox .columns .leftcol > ul, div#content .fpinnerbox .columns .centercol > ul, div#content .fpinnerbox .columns .rightcol > ul {
  margin: 0;
  padding: 0;
}

div#content .fpinnerbox .columns .leftcol .column > *, div#content .fpinnerbox .columns .centercol .column > *, div#content .fpinnerbox .columns .rightcol .column > * {
  margin: 0;
  padding: 0;
}

.fpbox.highlight {
  border: 2px solid #341f17;
  background: #0e0200;
}

.fpcolleft .fpbox {
  margin: 0;
}

.fpcolcenter .fpbox {
  margin: 0;
}

.fpcolright .fpbox {
  margin: 0;
}

.fpbox .inlineHeading {
  display: inline-block;
  font-weight: bold;
}

.fpbox .inlineBody {
  width: auto;
}

.fpbox .heading {
  font-family: serif;
  font-size: 150%; 
  font-weight: bold;
  color: #f7aa54;
}

.fpbox .body {
  height: 100%;
}

.fpplainbox {
  padding: 4px;
  margin: 0;
  vertical-align: top;
}

/******************
/* Infobox styles *
/******************/
.stdinfobox {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  vertical-align: top;
  width: 90%;
  margin: 0 auto;
  padding: 3px;
}

.stdinfobox2 {
  clear: right;
}

.stdinfobox .title {
  font-family: serif;
  font-size: 150%;
  font-weight: bold;
  color: #f7aa54;
  text-align: center;
  overflow: auto;
}

.stdinfobox img {
}

.stdinfobox .caption {
  border: 1px solid #341f17;
  background: transparent;
  font-size: 94%;
  text-align: center;
}

.stdinfobox .body {
}

.stdinfobox .image {
  text-align: center;
}

.stdinfobox .image .image {
}

.stdinfobox .image img {
}

.stdinfobox .image .image img {
}

.stdinfobox div.imagerequest {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  text-align: center;
}

.stdinfobox table {
  width: 100%;
}

.stdinfobox table tr th {
  border: 1px solid #341f17;
  background: #0e0200;
  color: #f7aa54;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  width: 1%;
}

.stdinfobox table tr td {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  text-align: left;
  vertical-align: center;
}

.stdinfobox table tr td.subtitle {
  font-size: 132%;
  font-weight: bold;
  text-align: center;
}

.stdinfobox table tr td.listlabel {
  font-size: 116%;
  font-weight: bold;
  text-align: center;
}

.stdinfobox table tr td.listentries {
  text-align: center;
}

/*********************
/* Navigation tables *
/*********************/
table.nav {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  cell-spacing: 0;
  margin: 0 auto 10px auto;
  padding: 0;
  clear: both;
}

table.nav th, table.nav tr th, table.nav > tr > th, table.nav > * > tr > th {
  border: 1px solid #341f17;
  background: #030200;
  color: #c3b073;
  font-family: serif;
  font-size: 116%;
  text-align: center;
  vertical-align: top;
  margin: 0;
  padding: 0 5px 5px 5px;
}

table.nav td, table.nav tr td, table.nav > tr > td, table.nav > * > tr > td {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  text-align: left;
  vertical-align: top;
  margin: 0;
  padding: 3px 11px 8px 11px;
}

table.nav td.list, table.nav tr td.list, table.nav > tr > td.list, table.nav > * > tr > td.list {
  padding: 0;
}

table.nav td .item {
  display: inline-block;
  border-right: 1px solid #341f17;
  margin: 3px 0 6px 0;
  padding: 0 11px 2px 11px;
}

table.nav td .item:last-child {
  border: none;
}

/*******************
/* Dialogue styles *
/*******************/
div.dialogue {
  border: 1px solid #341f17;
  background: #100300;
  color: #ffffff;
  padding: 3px 3px 3px 2em;
}

div.dialogue div.name {
  margin: 0 0 1em -2em;
  color: #f7aa54;
  font-weight: bold;
}

div.dbranches {
  border-left: 1px solid #341f17;
  margin: -1em 0 0 2em;
  padding: 1em 0 0 2em;
}

div.dbranches hr {
  border: none;
  border-bottom: 1px solid #341f17;
  margin-left: -2em;
  padding-top: 1em;
}

div.dbranches hr:first-child {
  padding-top: 0;
}

span.name {
  font-weight: bold;
}

div.contentbox span.name {
  color: #8a8a66;
}

div.quote span.name {
  color: #8a8a66;
}

/**********************
/* Walkthrough styles *
/**********************/
div.walkthrough {
  padding: 0 0 0 3em;
}

div.walkthrough div.step {
  float: left;
  width: auto;
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  margin-left: -3em;
  margin-top: 2em;
  padding: 0 3px 3px 3px;
  overflow: auto;
}

div.walkthrough div.step:first-child {
  margin-top: 0;
}

/***********************
/* Item quality styles *
/***********************/
div#content span.gray, div#content span.gray a, div#content span.gray a:link, div#content span.gray a:visited, div#content span.junk, div.tooltip span.junk, div#content span.junk a, div#content span.junk a:link, div#content span.junk a:visited {
  color: #888888;
}

div#content span.white, div#content span.white a, div#content span.white a:link, div#content span.white a:visited, div#content span.common, div.tooltip span.common, div#content span.common a, div#content span.common a:link, div#content span.common a:visited {
  color: #ffffff;
}

div#content span.green, div#content span.green a, div#content span.green a:link, div#content span.green a:visited, div#content span.uncommon, div.tooltip span.uncommon, div#content span.uncommon a, div#content span.uncommon a:link, div#content span.uncommon a:visited {
  color: #aaff33;
}

div#content span.blue, div#content span.blue a, div#content span.blue a:link, div#content span.blue a:visited, div#content span.rare, div#content span.rare a, div.tooltip span.rare, div#content span.rare a:link, div#content span.rare a:visited {
  color: #33bbff;
}

div#content span.purple, div#content span.purple a, div#content span.purple a:link, div#content span.purple a:visited, div#content span.epic, div.tooltip span.epic, div#content span.epic a, div#content span.epic a:link, div#content span.epic a:visited {
  color: #bb66ff;
}

div#content span.questitem, div.tooltip span.questitem, div#content span.questitem a, div#content span.questitem a:link, div#content span.questitem a:visited {
  color: #cc9900;
}

/******************
/* Tooltip styles *
/******************/
div.tooltipwrapper {
  width: auto;
  overflow: hidden;
}

div.tooltip {
  width: 25em;
  line-height: 1.2em;
  padding: 3px;
}

div.tooltip.power {
  width: 20.15em;
}

div.tooltiphover {
  font-size: 0.8em;
}

div.tooltipleft {
  float: left;
  margin: 0 20px 10px 0;
}

div.tooltipright {
  float: right;
  margin: 0 0 10px 20px;
}

div.tooltip div.top {
  width: 100%;
  margin: 0;
  padding: 0;
}

div.tooltip div.tlcorner {
}

div.tooltip div.trcorner {
}

div.tooltip div.tedge {
  overflow: hidden;
}

div.tooltip div.content {
  border: 1px solid #cccccc;
  background: #000000;
  color: #ffffff;
  width: auto;
}

div.tooltip div.bottom {
}

div.tooltip div.blcorner {
}

div.tooltip div.brcorner {
}

div.tooltip div.bedge {
}

div.tooltip div.title {
  font-size: 120%;
  padding-bottom: 15px;
}

div.tooltip.power div.title {
  float: left;
  font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
  font-size: 120%;
  font-variant: small-caps;
  font-weight: bold;
  color: #ffcc66;
  width: 65%;
  padding-bottom: 15px;
}

div.tooltip.power div.topright {
  float: right;
  text-align: right;
  width: 35%;
}

div.tooltip div.slot {
  background: transparent url("/media/neverwinter.gamepedia.com/f/f6/Empty_enchantment_icon.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip div.slotted {
  background: transparent url("/media/neverwinter.gamepedia.com/f/fa/Filled_enchantment_slot.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip div.aeslot {
  background: transparent url("/media/neverwinter.gamepedia.com/d/de/Empty_enhancement_icon.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip div.aeslotted {
  background: transparent url("/media/neverwinter.gamepedia.com/1/16/Filled_enhancement_slot_icon.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip div.runeslot {
  background: transparent url("/media/neverwinter.gamepedia.com/f/f6/Empty_enchantment_icon.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip div.runeslotted {
  background: transparent url("/media/neverwinter.gamepedia.com/f/fa/Filled_enchantment_slot.png") no-repeat left top;
  line-height: 17px;
  min-height: 20px;
  padding-left: 25px;
}

div.tooltip .right {
  text-align: right;
}

div.tooltip .orange {
  color: #aa5511;
}

div.tooltip .green {
  color: #aaff33;
}

div.tooltip .blue {
  color: #33bbff;
}

div.tooltip .slate {
  color: #6688aa;
}

div.tooltip .gold {
  color: #ffcc00;
}

div.tooltip .gray {
  color: #445566;
}

div.tooltip .beige {
  color: #775533;
}

div.tooltip .olive {
  color: #447744;
}

div.tooltip .darkgreen {
  color: #006600;
}

div.tooltip .red {
  color: #cc3333;
}

div.tooltip .violet {
  color: #2222dd;
}

div.tooltip .pink {
  color: #ff55ff;
}

/******************
/* General styles *
/******************/
.contentbox {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  overflow: auto;
  padding: 3em;
}

div#content .contentbox h1, div#content .contentbox h2, div#content .contentbox h3, div#content .contentbox h4, div#content .contentbox h5, div#content .contentbox h6 { 
}

span.bullet {
  font-size: 1%;
}

span.bullet:after {
  font-size: 10000%;
  content: "•";
}

.dablink {
  padding: 3px 3em 10px 3em;
  font-style: italic;
}

.floatimagerequest {
  border: 1px solid #341f17;
  background: #100300;
  color: #c3b073;
  text-align: center;
  padding: 3px;
}

.floatimagerequest.firleft {
  float: left;
  clear: left;
}

.floatimagerequest.firright {
  float: right;
  clear: right;
}

.itemname {
  font-weight: bold;
}

span.ghost {
  color: #8a8a66; /* For any text that appear fainter for some reason */
}

.columns {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.columns .leftcol {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .centercol {
  float: left;
  margin: 0;
  padding: 0;
}

.columns .rightcol {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .column {
  margin-left: 10px;
  margin-right: 10px;
}

div#content .columns .leftcol > *, div#content .columns .centercol > *, div#content .columns .rightcol > * {
  margin-left: 10px;
  margin-right: 10px;
}

div#content .columns .leftcol > ul, div#content .columns .centercol > ul, div#content .columns .rightcol > ul {
  margin-left: 15px;
  padding-left: 15px;
  margin-right: 10px;
}

div#content .columns .leftcol .column > *, div#content .columns .centercol .column > *, div#content .columns .rightcol .column > * {
  margin-left: 0;
  margin-right: 0;
}

.hideeditsection h1 .editsection, .hideeditsection h2 .editsection, .hideeditsection h3 .editsection, .hideeditsection h4 .editsection, .hideeditsection h5 .editsection, .hideeditsection h6 .editsection {
  display: none;
}