User:Artrodrig3/common.css

Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.
The accompanying .js page for this skin can be added at User:Artrodrig3/common.js.
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/*
 * Any rules which should not be flipped automatically in right-to-left situations should be
 * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
 * should be prepended with @embed in a comment block.
 *
 * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
 * a rule that makes things work in IE6, and then following it with a rule that begins with
 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
 * "IGNORED BY IE6" comments.
 */

/* Framework */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1em;
}
body {
  background-color: #f3f3f3;
  /* @embed */
  background-image: url(images/page-base.png);
}
/* Content */
div#content {
  margin-left: 10em;
  padding: 1em;
  /* @embed */
  background-image: url(images/border.png);
  background-position: top left;
  background-repeat: repeat-y;
  background-color: white;
  color: black;
  direction: ltr;
}
/* Head */
#mw-page-base {
  height: 5em;
  background-color: white;
  /* @embed */
  background-image: url(images/page-fade.png);
  background-position: bottom left;
  background-repeat: repeat-x;
}
#mw-head-base {
  margin-top: -5em;
  margin-left: 10em;
  height: 5em;
  /* @embed */
  background-image: url(images/border.png);
  background-position: bottom left;
  background-repeat: repeat-x;
}
div#mw-head {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
div#mw-head h5 {
  margin: 0;
  padding: 0;
}
/* Hide empty portlets */
div.emptyPortlet {
    display: none;
}
/* Personal */
#p-personal {
  position: absolute;
  top: 0;
  right: 0.75em;
}
#p-personal h5 {
  display: none;
}
#p-personal ul {
  list-style: none;
  margin: 0;
  padding-left: 10em; /* Keep from overlapping logo */
}
/* @noflip */
#p-personal li {
  line-height: 1.125em;
  float: left;
}
/* This one flips! */
#p-personal li {
  margin-left: 0.75em;
  margin-top: 0.5em;
  font-size: 0.75em;
  white-space: nowrap;
}
/* Navigation Containers */
#left-navigation {
  position: absolute;
  left: 10em;
  top: 2.5em;
}
#right-navigation {
  float: right;
  margin-top: 2.5em;
}
/* Navigation Labels */
div.vectorTabs h5,
div.vectorMenu h5 span {
  display: none;
}
/* Namespaces and Views */
/* @noflip */
div.vectorTabs {
  float: left;
  height: 2.5em;
}
div.vectorTabs {
  /* @embed */
  background-image: url(images/tab-break.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-left: 1px;
}
/* @noflip */
div.vectorTabs ul {
  float: left;
}
div.vectorTabs ul {
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* @noflip */
div.vectorTabs ul li {
  float: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li {
  line-height: 1.125em;
  display: inline-block;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
  /* @embed */
  background-image: url(images/tab-normal-fade.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  white-space:nowrap;
}
/* IGNORED BY IE6 */
div.vectorTabs ul > li {
  display: block;
}
div.vectorTabs li.selected {
  /* @embed */
  background-image: url(images/tab-current-fade.png);
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs li a {
  display: inline-block;
  height: 1.9em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: #0645ad;
  cursor: pointer;
  font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorTabs li > a {
  display: block;
}
div.vectorTabs li.icon a {
  background-position: bottom right;
  background-repeat: no-repeat;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs span a  {
  display: inline-block;
  padding-top: 1.25em;
}
/* IGNORED BY IE6 */
/* @noflip */
div.vectorTabs span > a {
  float: left;
  display: block;
}
div.vectorTabs span {
  display: inline-block;
  /* @embed */
  background-image: url(images/tab-break.png);
  background-position: bottom right;
  background-repeat: no-repeat;
}
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited{
  color: #333333;
  text-decoration: none;
}
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited{
  color: #a55858;
}
/* Variants and Actions */
/* @noflip */
div.vectorMenu {
  direction: ltr;
  float: left;
  /* @embed */
  background-image: url(images/arrow-down-icon.png);
  background-position: 100% 60%;
  background-repeat: no-repeat;
  cursor: pointer;
}
div.vectorMenuFocus {
  /* @embed */
  background-image: url(images/arrow-down-focus-icon.png);
  background-position: 100% 60%;
}
/* @noflip */
body.rtl div.vectorMenu {
  direction: rtl;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
div#mw-head div.vectorMenu h5 {
  float: left;
  /* @embed */
  background-image: url(images/tab-break.png);
  background-repeat: no-repeat;
}
/* This will be flipped - unlike the one above it */
div#mw-head div.vectorMenu h5 {
  background-position: bottom left;
  margin-left: -1px;
}
/* IGNORED BY IE6 */
div#mw-head div.vectorMenu > h5 {
  background-image: none;
}
div#mw-head div.vectorMenu h4 {
  display: inline-block;
  float: left;
  font-size: 0.8em;
  padding-left: 0.5em;
  padding-top: 1.375em;
  font-weight: normal;
  border: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
div.vectorMenu h5 a {
  display: inline-block;
  width: 24px;
  height: 2.5em;
  text-decoration: none;
  /* @embed */
  background-image: url(images/tab-break.png);
  background-repeat: no-repeat;
}
/* This will be flipped - unlike the one above it */
div.vectorMenu h5 a {
  background-position: bottom right;
}
/* IGNORED BY IE6 */
div.vectorMenu h5 > a {
  display: block;
}
div.vectorMenu div.menu {
  position: relative;
  display: none;
  clear: both;
  text-align: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
body.rtl div.vectorMenu div.menu {
  margin-left: 24px;
}
/* IGNORED BY IE6 */
/* @noflip */
body.rtl div.vectorMenu > div.menu {
  margin-left: auto;
}
/* IGNORED BY IE6 */
/* Also fixes old versions of FireFox */
/* @noflip */
body.rtl div.vectorMenu > div.menu,
x:-moz-any-link {
  margin-left: 23px;
}
/* Enable forcing showing of the menu for accessibility */
div.vectorMenu:hover div.menu,
div.vectorMenu div.menuForceShow {
  display: block;
}
div.vectorMenu ul {
  position: absolute;
  background-color: white;
  border: solid 1px silver;
  border-top-width: 0;
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: -1px;
  text-align: left;
}
/* Fixes old versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link {
  min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link,
x:default {
  min-width: 0;
}
div.vectorMenu li {
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 1em;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu li a {
  display: inline-block;
  padding: 0.5em;
  white-space: nowrap;
  color: #0645ad;
  cursor: pointer;
  font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorMenu li > a {
  display: block;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
  color: #333333;
  text-decoration: none;
}
/* Search */
#p-search h5 {
  display: none;
}
/* @noflip */
#p-search {
  float: left;
}
#p-search {
  margin-right: 0.5em;
  margin-left: 0.5em;
}
#p-search form,
#p-search input {
  margin: 0;
  margin-top: 0.4em;
}
div#simpleSearch {
  display: block;
  width: 14em;
  height: 1.4em;
  margin-top: 0.65em;
  position: relative;
  min-height: 1px; /* Gotta trigger hasLayout for IE7 */
  border: solid 1px #AAAAAA;
  color: black;
  background-color: white;
  /* @embed */
  background-image: url(images/search-fade.png);
  background-position: top left;
  background-repeat: repeat-x;
}
div#simpleSearch label {
  /*
   * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
   * this from ever being shown anyways.
  */
  font-size: 13px;
  top: 0.25em;
  direction: ltr;
}
div#simpleSearch input {
  color: black;
  direction: ltr;
}
div#simpleSearch input:focus {
  outline: none;
}
div#simpleSearch input.placeholder {
  color: #999999;
}
div#simpleSearch input::-webkit-input-placeholder {
  color: #999999;
}
div#simpleSearch input#searchInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  margin: 0;
  padding: 0;
  padding-left: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  outline: none;
  border: none;
  /*
   * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
   * this from ever being shown anyways.
  */
  font-size: 13px;
  background-color: transparent;
  direction: ltr;
}
div#simpleSearch button#searchButton {
  position: absolute;
  width: 10%;
  right: 0;
  top: 0;
  padding: 0;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  margin: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div#simpleSearch button#searchButton img {
  border: none;
  margin: 0;
  margin-top: -3px;
  padding: 0;
}
/* IGNORED BY IE6 */
div#simpleSearch button#searchButton > img {
  margin: 0;
}
/* Panel */
div#mw-panel {
  position: absolute;
  top: 160px;
  padding-top: 1em;
  width: 10em;
  left: 0;
}
div#mw-panel div.portal {
  padding-bottom: 1.5em;
  direction: ltr;
}
div#mw-panel div.portal h5 {
  font-weight: normal;
  color: #444444;
  padding: 0.25em;
  padding-top: 0;
  padding-left: 1.75em;
  cursor: default;
  border: none;
  font-size: 0.75em;
}
div#mw-panel div.portal div.body {
  margin: 0;
  padding-top: 0.5em;
  margin-left: 1.25em;
  /* @embed */
  background-image: url(images/portal-break.png);
  background-repeat: no-repeat;
  background-position: top left;
}
div#mw-panel div.portal div.body ul {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
div#mw-panel div.portal div.body ul li {
  line-height: 1.125em;
  padding: 0;
  padding-bottom: 0.5em;
  margin: 0;
  overflow: hidden;
  font-size: 0.75em;
}
div#mw-panel div.portal div.body ul li a {
  color: #0645ad;
}
div#mw-panel div.portal div.body ul li a:visited {
  color: #0b0080;
}
/* Footer */
div#footer {
  margin-left: 10em;
  margin-top: 0;
  padding: 0.75em;
  /* @embed */
  background-image: url(images/border.png);
  background-position: top left;
  background-repeat: repeat-x;
  direction: ltr;
}
div#footer ul {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#footer ul li {
  margin: 0;
  padding: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: #333333;
  font-size: 0.7em;
}
div#footer #footer-icons {
  float: right;
}
/* @noflip */
body.ltr div#footer #footer-places {
  float: left;
}
div#footer #footer-info li {
  line-height: 1.4em;
}
div#footer #footer-icons li {
  float: left;
  margin-left: 0.5em;
  line-height: 2em;
  text-align: right;
}
div#footer #footer-places li {
  float: left;
  margin-right: 1em;
  line-height: 2em;
}
/* Logo */
#p-logo {
  position: absolute;
  top: -160px;
  left: 0;
  width: 10em;
  height: 160px;
}
#p-logo a {
  display: block;
  width: 10em;
  height: 160px;
  background-repeat: no-repeat;
  background-position: center center;
  text-decoration: none;
}

/*
 *
 * The following code is highly modified from monobook. It would be nice if the
 * preftoc id was more human readable like preferences-toc for instance,
 * howerver this would require backporting the other skins.
 */

/* Preferences */
#preftoc {
  /* Tabs */
  width: 100%;
  float: left;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  /* @embed */
  background-image: url(images/preferences-break.png);
  background-position: bottom left;
  background-repeat: no-repeat;
}
  #preftoc li {
    /* Tab */
    float: left;
    margin: 0;
    padding: 0;
    padding-right: 1px;
    height: 2.25em;
    white-space: nowrap;
    list-style-type: none;
    list-style-image: none;
    /* @embed */
    background-image: url(images/preferences-break.png);
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  /* Sadly, IE6 won't understand this */
  #preftoc li:first-child {
    margin-left: 1px;
  }
  #preftoc a,
  #preftoc a:active {
    display: inline-block;
    position: relative;
    color: #0645ad;
    padding: 0.5em;
    text-decoration: none;
    background-image: none;
    font-size: 0.9em;
  }
  #preftoc a:hover,
  #preftoc a:focus {
    text-decoration: underline;
  }
  #preftoc li.selected a {
    /* @embed */
    background-image: url(images/preferences-fade.png);
    background-position: bottom;
    background-repeat: repeat-x;
    color: #333333;
    text-decoration: none;
  }
#preferences {
  float: left;
  width: 100%;
  margin: 0;
  margin-top: -2px;
  clear: both;
  border: solid 1px #cccccc;
  background-color: #f9f9f9;
  /* @embed */
  background-image: url(images/preferences-base.png);
}
#preferences fieldset {
  border: none;
  border-top: solid 1px #cccccc;
}
#preferences fieldset.prefsection {
  border: none;
  padding: 0;
  margin: 1em;
}
#preferences legend {
  color: #666666;
}
#preferences fieldset.prefsection legend.mainLegend {
  display: none;
}
#preferences td {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
#preferences td.htmlform-tip {
  font-size: x-small;
  padding: .2em 2em;
  color: #666666;
}
#preferences div.mw-prefs-buttons {
  padding: 1em;
}
#preferences div.mw-prefs-buttons input {
  margin-right: 0.25em;
}

/**
 * The following code is slightly modified from monobook
 */
div#content {
  line-height: 1.5em;
}
#bodyContent {
  font-size: 0.8em;
}

.editsection {
  float: right;
}

ul {
  /* @embed */
  list-style-image: url(images/bullet-icon.png);
}

pre {
  line-height: 1.3em;
}

/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
  font-size: 0.8em;
}
#firstHeading {
  padding-top: 0;
  margin-top: 0;
  padding-top: 0;
  font-size: 1.6em;
}
div#content a.external,
div#content a.external[href ^="gopher://"] {
  /* @embed */
  background: url(images/external-link-ltr-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href ^="https://"],
.link-https {
  /* @embed */
  background: url(images/lock-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href ^="mailto:"],
.link-mailto {
  /* @embed */
  background: url(images/mail-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href ^="news:"] {
  /* @embed */
  background: url(images/news-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href ^="ftp://"],
.link-ftp {
  /* @embed */
  background: url(images/file-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href ^="irc://"],
div#content a.external[href ^="ircs://"],
.link-irc {
  /* @embed */
  background: url(images/talk-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
.link-audio {
  /* @embed */
  background: url(images/audio-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
.link-video {
  /* @embed */
  background: url(images/video-icon.png) center right no-repeat;
  padding-right: 13px;
}
div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
.link-document {
  /* @embed */
  background: url(images/document-icon.png) center right no-repeat;
  padding-right: 13px;
}

/* Icon for Usernames */
#pt-userpage,
#pt-anonuserpage,
#pt-login {
  /* @embed */
  background: url(images/user-icon.png) left top no-repeat;
  padding-left: 15px !important;
  text-transform: none;
}

.redirectText {
  font-size: 140%;
}

.redirectMsg img {
  vertical-align: text-bottom;
}

#bodyContent {
  position: relative;
  width: 100%;
}
#mw-js-message {
  font-size: 0.8em;
}
div#bodyContent {
  line-height: 1.5em;
}

/* Watch/Unwatch Icon Styling */
#ca-unwatch.icon a,
#ca-watch.icon a {
  margin: 0;
  padding: 0;
  outline: none;
  display: block;
  width: 26px;
  /* This hides the text but shows the background image */
  padding-top: 3.1em;
  margin-top: 0;
  /* Only applied in IE6 */
  margin-top: -0.8em !ie;
  height: 0;
  overflow: hidden;
  /* @embed */
  background-image: url(images/watch-icons.png);
}
#ca-unwatch.icon a {
  background-position: -43px 60%;
}
#ca-watch.icon a {
  background-position: 5px 60%;
}
#ca-unwatch.icon a:hover,
#ca-unwatch.icon a:focus {
  background-position: -67px 60%;
}
#ca-watch.icon a:hover,
#ca-watch.icon a:focus {
  background-position: -19px 60%;
}
#ca-unwatch.icon a.loading,
#ca-watch.icon a.loading {
  /* @embed */
  background-image: url(images/watch-icon-loading.gif);
  background-position: 5px 60%;
}
#ca-unwatch.icon a span,
#ca-watch.icon a span {
  display: none;
}
div.vectorTabs ul {
  /* @embed */
  background-image:url(images/tab-break.png);
  background-position:right bottom;
  background-repeat:no-repeat;
}

/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
.tipsy {
  font-size: 0.8em;
}