Difference between revisions of "MediaWiki:Common.css"

/* CSS placed here will be applied to all skins */

@import url("http://wiki.spheredev.org/extra/league-gothic/stylesheet.css");
@import url("http://wiki.spheredev.org/extra/mgopen-modata/stylesheet.css");


/* Mobile */
@media (max-width: 768px) {
  .mw-body {
    margin-left: 0;
  }
  div#mw-panel {
    position: static;
    top: 0;
    width: 100%;
  }
  #p-search {
    float: right;
  }
  #right-navigation {
    float: none;
    margin-top: 5em;
  }
  #left-navigation {
    float: none;
    margin-left: 0;
    margin-top: 3em;
  }
  #p-personal ul {
    padding-left: 0;
  }
}




/* Everything else */


.sph-cf:before,
.sph-cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.sph-cf:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.sph-cf {
    *zoom: 1;
}

h1, #toc h2, .toc h2, h3, h4	{font-family:"MgOpen Modata",MgOpenModata,sans-serif;}
div#content h1, div#content h2, div#content #firstHeading	{font-family:"MgOpen Modata",MgOpenModata,sans-serif;}
h1  {font-weight:normal;}
h2	{font-family:"League Gothic",LeagueGothic,sans-serif; font-weight:normal;}

#mw-content-text h2 {font-size:200%;}
#toc h2, .toc h2	{font-weight:bold; text-transform:uppercase; font-size:100%;}

.editsection    {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}
.rellink, .dablink  {font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em;}

#mw-head, #mw-panel, #footer, input,
    .mw-search-result-heading   {font-family:"MgOpen Modata",MgOpenModata,sans-serif;}

.sph-section	{border-style:solid; border-width:1px; padding:4px; background-color:#eee; border-color:#999;}
.sph-section .sph-section-title	{padding:5px; font-weight:bold; background-color:#999; color:#fff;}
	div#content .sph-section .sph-section-title	{margin-top:0;}
.sph-section h3.sph-section-title	{font-weight:normal;}
.sph-section .sph-section-content	{}

.sph-section-green	{background-color:#efe; border-color:#9c9;}
.sph-section-green .sph-section-title	{background-color:#393; color:#fff;}

.sph-section-red	{background-color:#fee; border-color:#fcc;}
.sph-section-red .sph-section-title	{background-color:#c00; color:#fff;}

.sph-section-blue	{background-color:#eef; border-color:#abd;}
.sph-section-blue .sph-section-title	{background-color:#039; color:#fff;}

.sph-section-yellow	{background-color:#ffe; border-color:#dba;}
.sph-section-yellow .sph-section-title	{background-color:#cc3; color:#fff;}

.sph-disambig   {text-align:center;}
.sph-disambig .sph-section-content   {font-style:italic;}

.sph-usage  {background:#eee; border:1px solid #999; text-align:center; padding:8px 4px; font-size:150%; border-radius:8px;}
.sph-section .sph-usage {background:none; border:0; padding:0; margin:1em auto;}

.sph-latest {text-align:center;}

.sph-aside  {border:solid rgb(167,215,249); border-width:1px 0; margin:1em auto;}
.sph-aside>.floatleft	{margin-top:0.25em;}
.sph-aside h4   {font-weight:normal; font-style:italic;}

.sph-front-topnav   {
	text-align:center; font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-size:120%;
	background:#e8e8e8; border:1px solid #888; border-radius:4px;
	padding:1em;
}
.sph-front-topnav .sph-front-topnav-list    {margin:8px auto;}

.sph-directory, .sph-filepath   {}
.sph-directory .sph-filepath    {}

.nmbox  {background:#F6F9ED; border:1px solid rgb(167,215,249); clear:both; font-size:85%; margin: 0.5em 0;}
.nmbox .mbox-image  {background:#EEF3E2; white-space: nowrap; padding: 4px 1em; border-right: 1px solid #aaaaaa;}
.nmbox .mbox-text   {padding:4px 1em;}
.nmbox.sph-cf>.mbox-text   {float:left;}
.nmbox.sph-cf>.mbox-image {float:left;}

.sph-notice {
	background:#F8EABA; border-bottom:1px solid #C0C090;
	margin:1em auto; padding:0.5em 0; width:80%;
	clear:both; text-align:center; font-weight:bold;
}

.mus	{font-family:Symbola;}
b.mus   {line-height:1; font-weight:normal;}
b b.mus, strong b.mus {font-weight:inherit;}

.gist table.highlight   {font-weight:normal;}

/**** GESHI-RELATED STYLES ****/
.mw-geshi.mw-code   {overflow:auto; position:relative;}
.mw-geshi a[href]>.kw10   {text-shadow:0 1px 0 #808080; text-shadow:0 1px 0 rgba(0,0,0,0.5);}
.mw-geshi a[href]:hover>.kw10   {text-shadow:0 0 2px #806000; text-shadow:0 0 2px rgba(128,112,0,0.5);}
.mw-geshi>.javascript:before	{
    display:block; content:"JavaScript";
    font-family:"MgOpen Modata",MgOpenModata,sans-serif; font-weight:bold; line-height:1;
    position:absolute; top:0; right:0;
    border:solid #aaa; border-width:0 0 1px 1px; border-radius:0 0 0 8px;
    padding:4px; opacity:0.50;
}
.mw-geshi:hover>.javascript:before  {opacity:1.0;}

/**** NAVBOX-RELATED STYLES ****/
/* Style for horizontal lists (separator following item).
   Note: hlist formatting will break if the resulting HTML lacks a breakable character
   between list items. This happens when the following conditions are true:
   1) The list is made using wiki markup (where HTML is built by parser.php)
   2) HTMLTidy is disabled or unavailable (such as on Special: pages)
   In such cases, building lists with .hlist using HTML instead of wiki markup
   will work around this problem. See also [[Bugzilla:39617]].
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   Last updated: January 24, 2013
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @maintainer: [[User:Edokter]]
   @revision: 3.1
*/
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
    line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline and make them nowrap */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
    white-space: nowrap;
}
/* Allow wrapping for list items (in tight spaces) */
.hlist.hwrap dd,
.hlist.hwrap dt,
.hlist.hwrap li {
    white-space: normal;
}
/* Display nested lists inline and allow them to wrap */
.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;
    white-space: normal;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ":";
}
.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;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-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;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ")";
    font-weight: normal;
}
/* Put numbers in front of ordered list items */
.hlist.hnum ol {
    counter-reset: list-item;
}
.hlist.hnum ol > li {
    counter-increment: list-item;
}
.hlist.hnum ol > li:before {
    content: counter(list-item) " ";
}
.hlist.hnum dd ol > li:first-child:before,
.hlist.hnum dt ol > li:first-child:before,
.hlist.hnum li ol > li:first-child:before {
    content: "(" counter(list-item) " ";
}
/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    border: 1px solid #aaa;
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
.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: #fdfdfd;      /* Background color */
}
.navbox-list {
    line-height: 1.8em;
    border-color: #fdfdfd;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #ccccff;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.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 */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

/* Default styling for Navbar template */
.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}
.navbar ul {
    display: inline;
    white-space: nowrap;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li span {
  font-variant: small-caps;
}
/* 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;
    width: 6em;
}

/* '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;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
    width: 6em;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}
.navbox .mw-collapsible-toggle {
    width: 6em;
}
/* Lists in data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
    /* @noflip */
    text-align: left;
}
/* ...unless they also use the hlist class */
.wikitable.hlist td ul,
.wikitable.hlist td ol,
.wikitable.hlist td dl {
    text-align: inherit;
}