Override styles for MediaWiki's default "Vector" theme

mediawiki.css

/**
 * Explicit fonts
 */
div,
td,
li,
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h1 a,
h2 a,
h3 a,
h4 a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
text-decoration: none;
}

h1, h2, h3, h4 {
margin-left: -0.5em;
padding-left: 0.3em;
}

/**
 * MediaWiki in general has a problem differentiating the header levels enough
 */

h1 {
font-weight: 600;
font-size: 180%;
}

h2 {
font-weight: 700;
border-bottom: 1px dashed darkGray;
font-size: 150%;
}

h3 {
font-weight: 700;
font-size: 120%;
color: black;
}

h4 {
color: black;
font-weight: 600;
text-decoration: underline;
font-size: 100%;
}

h1.firstHeading {
color: black;
font-size: 230%;
}

/**
 * Link colors
 */

a,
a.external,
a:active,
a:visited {
color: hsl(212, 80%, 40%);
text-decoration: none;
}

a.external:hover,
a:hover {
color: hsl(212, 75%, 70%);
text-decoration: none;
}

/**
 * Links for non-existent pages
 */

a.new {
color: hsl(0, 50%, 40%);
}

a.new:hover {
color: hsl(0, 50%, 60%);
}

/**
 * Add underlines for external links
 */

a.external,
a.external:hover {
text-decoration: underline;
}

/**
 * Transitions
 */

#mw-content-text img,
a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
   -moz-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
    -ms-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
     -o-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
        transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
   -moz-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
    -ms-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
     -o-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
        transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
}

#mw-content-text img:hover,
a:hover {
-webkit-transition: all 100ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
   -moz-transition: all 100ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
    -ms-transition: all 100ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
     -o-transition: all 100ms cubic-bezier(0.455, 0.030, 0.515, 0.955); 
        transition: all 100ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
   -moz-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
    -ms-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
     -o-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
        transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
}

/**
 * Bolds in PREs dont look good
 */

b {
color: hsl(0, 0%, 0%);
}

pre {
font-weight: 400;
color: hsl(0, 0%, 40%);
}

/**
 * Edit links are bold
 */

.editsection > a {
font-weight: 400;
font-style: italic;
}

/**
 * Put the term and definition from definition lists on the same line, e.g.:
 *
 * term1: definition1
 * term2: definition2
 */

dl {
clear: both;
overflow: auto;
}

dt,
dd {
display: inline-block;
float: left;
}

dt {
clear: both;
}

dt:after {
content: ": ";
margin-right: 0.5em;
}

dd {
margin-left: 0;
}

/**
 * Add decorative border to the images inside the article; add hover effect
 */

#mw-content-text img {
border: 1px dotted hsl(0, 0%, 70%);
padding: 3px;
margin: 1em;
}

#mw-content-text img:hover {
border-style: solid;
border-color: hsl(0, 100%, 40%);
background-color: hsl(0, 100%, 90%);
}