MediaWiki:Common.css

/* Alternate Colouring for Tables */ table.sortable { border: 1px solid #fff; }

.sortable th, .unsortable th { color: #ffffff; }

.sortable tr:nth-child(2n+1), .pyjama tr:nth-child(2n+1) { background: none repeat scroll 0 0 #ECEFF6; }

.sortable tr:nth-child(2n), .pyjama tr:nth-child(2n) { background: none repeat scroll 0 0 #D5D8DF; }

/* To make images responsive */ .res-img img { max-width:100%; height:auto; }

/* this CSS governs the responsive 2 column main page layout */

.fpcontent { width: 100%; overflow: hidden; z-index: 1; }

.fpmaybecols { overflow: hidden; margin: -5px 0 -5px 0; }

.fpmaybecols + .fpmaybecols { margin: 0 0 -5px 0; }

.fpbox { background: rgba(255, 255, 255,0); color: #000; /* change for hydra (light) wikis */ margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; }

.fpbox2 { background: rgba(255,255,255,.75); color: #000; /* change for hydra (light) wikis */ margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; border: 2px solid #DFC668; }

.fpboxcell { border: 2px solid #CDB88A; }

.fpplainbox { padding: 5px 8px 10px 8px; margin: 0 5px 10px 5px; vertical-align: top; }

.fpbox .welcome { border-bottom: 2px solid #1B1823; color: #000; /* change for hydra (light) wikis */ font-size: 150%; margin: 0 0 10px 0; padding: 0 0 5px 0; text-transform: uppercase; }

.fpbox .heading { border-bottom: 1px solid #505050; color: #000; /* change for hydra (light) wikis */ font-size: 132%; font-variant: small-caps; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading .smalllink { color: #000; /* change for hydra (light) wikis */ font-size: 75%; font-weight: bold; }

.fpbox hr { border: none; border-bottom: 2px solid #1B1823; }

div#content hr { background-color: #1B1823; color: #1B1823; }

.fplinks { margin: -5px; }

.fplinks .linkslabel { background: rgba(255,255,255,.75); border-bottom: 2px solid #1B1823; font-weight: bold; margin: 15px 5px 5px 5px; padding: 0 0 5px 0; }

.fplink { display: inline-block; vertical-align: middle; width: 100%; }

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */ .fplink .box { border-collapse: separate; border-spacing: 5px; display: table; width: 100%; }

.fplink .box .row { display: table-row; }

.fplink .box .row .cell { background: rgba(255,255,255,.75); color: #000; /* change for hydra (light) wikis */ display: table-cell; font-weight: bold; position: relative; vertical-align: middle; }

.fplink.wide .box .row .cell { padding: 0 5px; }

height: 114px;{ width: 114px; }
 * 1) fptopsection .fplink.image,
 * 2) fpflexsection .fplink.image,
 * 3) fpbottomsection .fplink.image

.fplink.image .box .row .cell { height: 100px; width: 100px; vertical-align: bottom; }

.fplink.image .box .row .cell .image img { height: 100px; width: 100px; }

@media (min-width: 470px) { .fplink { width: 50%; }

.fplink.wide { width: 100%; } }

@media (min-width: 580px) { .fplink { width: 33.333%; }

.fplink.wide { width: 66.666%; } }

@media (min-width: 690px) { .fplink { width: 25%; }

.fplink.wide { width: 50%; } }

@media (min-width: 800px) { .fplink { width: 20%; }

.fplink.wide { width: 40%; } }

@media (min-width: 910px) { .fplink { width: 16.666%; }

.fplink.wide { width: 33.333%; } }

@media (min-width: 990px) { .fpcontent { padding-right: 520px; width: auto; }

#fptopsection { float: left; width: 100%; }

#fpflexsection { float: right; width: 520px; margin-right: -520px }

#fpbottomsection { float: left; width: 100%; margin-top: -5px; }

#fptopsection .fplink, #fpbottomsection .fplink { width: 50%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 100%; }

#fpflexsection .fplink { width: 25%; }

#fpflexsection .fplink.wide { width: 50%; } }

@media (min-width: 1100px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 33.333%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 66.666%; } }

@media (min-width: 1210px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 25%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 50%; } }

@media (min-width: 1320px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 20%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 40%; } }

@media (min-width: 1430px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 16.666%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 33.333%; }

.fplink a { padding: 3px 5px; } }

@media (min-width: 1540px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 14.285%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 28.571%; }

#fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox { background-image: none; }

.fpmaybelcol { float: left; width: 50%; }

#fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 20%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 40%; }

.fpmaybercol { float: right; width: 50%; }

#fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink { width: 50%; }

#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide { width: 100%; } }

@media (min-width: 1650px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 12.5%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 25%; } }

@media (min-width: 1697px) { #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 16.666%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 33.333%; } }

@media (min-width: 1760px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 11.111%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 22.222%; } }

@media (min-width: 1850px) { #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 14.285%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 28.571%; } }

@media (min-width: 1870px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 10%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 20%; }

#fptopsection .fplink.image, #fpbottomsection .fplink.image { width: 134px; height: 134px; }

#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell { width: 120px; height: 120px; }

#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img { width: 120px; height: 120px; } }

@media (min-width: 1918px) { #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink { width: 33.333%; }

#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide { width: 66.666%; } }

@media (min-width: 1980px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 9.09%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 18.181%; } }

@media (min-width: 2006px) { #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 12.5%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 25%; } }

@media (min-width: 2090px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 8.33%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 16.666%; } }

@media (min-width: 2161px) { #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 11.111%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 22.222%; } }

@media (min-width: 2200px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 7.692%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 15.384%; } }

@media (min-width: 2296px) { #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink { width: 25%; }

#fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide { width: 50%; } }

@media (min-width: 2310px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 7.142%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 14.285%; } }

@media (min-width: 2316px) { #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink { width: 10%; }

#fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide { width: 20%; } }

@media (min-width: 2420px) { #fptopsection .fplink, #fpbottomsection .fplink { width: 6.666%; }

#fptopsection .fplink.wide, #fpbottomsection .fplink.wide { width: 13.333%; }

.fplink a { padding: 5px 5px; }

#fptopsection .fplink.image, #fpbottomsection .fplink.image { width: 164px; height: 164px; }

#fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell { width: 150px; height: 150px; }

#fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img { width: 150px; height: 150px; } }

.fplink.image .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 75%; z-index: 1; }

.fplink.image a { z-index: 2; }

.fplink a { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; padding: 1px 5px; }

.fplink.image .image a { padding: 0; }

.fplink.image .link a { background: rgba(255,255,255,.75); border-top: 2px solid #505050; }

.fplink.wide a { margin: 0 -5px; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; }

.fpvideo { display: inline-block; margin: 0 5px; }

/* Infoboxes */

.infoboxtable { float: right; background: #e3d8c5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 400px; padding: 5px 5px 5px 5px; }

.infoboxname { background:#63514b; color: #fff; font-size: 115%; }

.infoboxlabel { width: 50%; background:#1433838; color: #000 ; border: 1px solid #433838; border-radius:5px; padding: 0.5px 7px; text-align: right;

}

.infoboxcelltitle { background:#7C6151; color: #fff; border: 1px solid #7C6151; border-radius: 5px; text-align: left; padding-left: 5px; }

.infoboxdetails { padding-right: 5px; }

/* Job Infoboxes */

.jinfoboxtable { background: #e3d8c5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width:100%; height:auto; padding: 5px 5px 5px 5px; }

.jinfoboxname { background: #63514b; color: #fff; font-size: 115%; }

.jinfoboxlabel { width: 50%; background:#1433838; color: #000 ; border: 1px solid #433838; border-radius:5px; padding: 0.5px 7px; text-align: right;

}

.jinfoboxcelltitle { background:#8d7765; color: #fff; border: 1px solid #8d7765; border-radius: 5px; text-align: left; padding-left: 5px; }

.jinfoboxdetails { padding-right: 5px; }

/* Story Box */ .storybox { text-align: left; background: rgba(227, 219, 204,.5); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width: 600px; margin: 5px 5px 5px 5px; padding: 5px 10px 10px 10px; border: 2px solid #63514b; }

/* Newer Navbox template style */ table.navbox { border: 1px solid #67676; clear: both; font-size: 88%; margin: auto; padding: 1px; text-align: center; width: 100%; }

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

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

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

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

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

/* Level 1 color */ .navbox-title, table.navbox th { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Level 2 styling */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Level 3 styling */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: #000; border: 1px solid #6C98BC; color: #fff; }

/* Even row striping */ .navbox-even { background: #202020; color: #fff; }

/* Odd row striping */ .navbox-odd { background: transparent; } .collapseButton { font-weight: normal; width: auto; }

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

.navbox .navbar { font-size: 100%; } table.collapsed tr.collapsible { display: none; } /* End of new Navbox styling */

/* Header Tabs Styling */

background: #FFF linear-gradient(to bottom,rgba(130, 106, 98,1) 0%,rgba(61, 49, 45,1) 100%) repeat scroll 0 0 !important; border: none; }
 * 1) headerTabs .ui-widget-header {


 * 1) headerTabs.ui-widget-content { background: none; border: none; }

background: #8c6b57 linear-gradient(to bottom,rgba(161, 129, 101,1) 0%,rgba(125, 95, 76,1) 100%) repeat scroll 0 0; border-color: #e3d8c5; }
 * 1) headerTabs .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: none; border-color: #e3d8c5; }
 * 2) headerTabs .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #FFF; }
 * 3) headerTabs .ui-state-default a:hover { color: #FFF; }
 * 4) headerTabs .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {

border-bottom: none; background: #8c6b57 linear-gradient(to bottom,rgba(161, 129, 101,1) 0%,rgba(125, 95, 76,1) 100%) repeat scroll 0 0; color: #FFF;
 * 1) headerTabs .ui-state-hover,
 * 2) headerTabs .ui-widget-content .ui-state-hover,
 * 3) headerTabs .ui-widget-header .ui-state-hover,
 * 4) headerTabs .ui-state-focus,
 * 5) headerTabs .ui-widget-content .ui-state-focus,
 * 6) headerTabs .ui-widget-header .ui-state-focus {

}
 * 1) headerTabs.large .ui-widget-content a { color: #000; }

/* Tabber Styling */

/* This will style each tab's content area. */ body .tabberlive .tabbertab { border:none; }

/* This is the box that surrounds all the tabs. */ body ul.tabbernav { border:none; }

/* This is the style for the tabs, parts of this can be overridden for the current tab with the next selector */ body ul.tabbernav li a, body ul.tabbernav li a:link, body ul.tabbernav li a:visited, body ul.tabbernav li a:hover { border-radius: .4em; border: #e3d8c5; background: #69554e; color: #fff; font: bold 13px Verdana,sans-serif; }

/* This is the style for the currently selected tab */ body ul.tabbernav li.tabberactive a, body ul.tabbernav li.tabberactive a:link, body ul.tabbernav li.tabberactive a:visited, body ul.tabbernav li.tabberactive a:hover { background: #a18165; border: 2px solid #a18165; }

/* Weapon Tabber Styling */

.weapon-tabber .tabberlive { }

.weapon-tabber ul.tabbernav li { padding-top: 0.3em; padding-bottom: 0.3em; }

/* Large Tabber Style */

.large-tabber .tabberlive { }

/* This will style each tab's content area. */ .large-tabber .tabberlive .tabbertab { }

/* This is the box that surrounds all the tabs. */ .large-tabber ul.tabbernav { padding: 0px 0px 8px 1px; background: #FFF linear-gradient(to bottom,rgba(130, 106, 98,1) 0%,rgba(61, 49, 45,1) 100%) repeat scroll 0 0 !important; border-radius: 3px; }

/* This is a box that surrounds each of the tabs. */ .large-tabber ul.tabbernav li {

}

/* This is the style for the tabs, parts of this can be overridden for the current tab with the next selector */ .large-tabber ul.tabbernav li a, .large-tabber ul.tabbernav li a:link, .large-tabber ul.tabbernav li a:visited, .large-tabber ul.tabbernav li a:hover { font: normal 14px Verdana,sans-serif; padding: .5em 1em; border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom: none; border: 1px solid #e3d8c5; background: none; }

/* This is the style for the currently selected tab */ .large-tabber ul.tabbernav li.tabberactive a, .large-tabber ul.tabbernav li.tabberactive a:link, .large-tabber ul.tabbernav li.tabberactive a:visited, .large-tabber ul.tabbernav li.tabberactive a:hover { border: 1px solid #e3d8c5; border-bottom: none; background: #8c6b57 linear-gradient(to bottom,rgba(161, 129, 101,1) 0%,rgba(125, 95, 76,1) 100%) repeat scroll 0 0; }

/* Story Table */

.storytable { background: rgba(227, 219, 204,.5); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 3px 3px 3px 3px; }

.storytitle { background:#69554e; color: #fff; font-size: 125%; font-weight: bold; text-align: center; }

.storycharacter { background:#69554e; color: #fff; font-weight: bold; text-align: center; border-radius: 2px; padding: 0px 5px; font-stretch: condensed; }

.storycell { background:#8f705e; color: #000; text-align: center; padding: 3px; border-radius: 2px; }

.storyspan { background:#8f705e; color: #000; text-align: center; padding: 3px; border-radius: 2px; }

.nolinkcell { background:#919191; color: #d7d7d7; text-align: center; padding: 3px; border-radius: 2px; }

.storytable a, .storytitle a, .storycharacter a, .storycell a { color: #fff; }

/* Link block */ span.linkblock { background: #69554e; color: #fff; padding: 3px 10px 3px 10px; border: 1px solid #69554e; border-radius: 5px; } span.linkblock a { color: #fff; }

/* Link box */ .linkbox { text-align: left; background: rgba(227, 219, 204,.5); padding: 0px 8px 3px 8px; border: 1.5px solid #63514b; }

/* Link header */ .linkheader { border-bottom: 1px solid #3d312d; color: #3d312d; font-variant: small-caps; padding: 5px 0 0 0; }

/* Inline Banner */ .inline-banner img { max-width: 100%; height: auto; border: 2px solid #63514b; border-radius: 4px; background-color: #e3d8c5; padding: 2px; }

/* Icon Box */ .iconbox { text-align: center; background: none; width: 105px; display:inline-block; padding: 0px 5px 0px 5px; }

/* Separate Content Box */ .separatecontentbox { background: none; }

/* Inline Block Box */ .inlineblockbox { display: inline-block; vertical-align: top; }