MediaWiki:Foreground.css

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

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=latin-ext');

html,
body,
.mw-body,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-body a,
.mw-body p {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a,
a:visited,
li a,
li a:visited,
.mw-body a.text,
.mw-body a.text:visited,
.mw-body a.external,
.mw-body a.external:visited,
div.vectorMenu li a,
div.vectorMenu li a:visited,
div.vectorTabs li a,
div.vectorTabs li a:visited,
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited,
a.new,
a.new:visited,
#p-personal a.new:visited,
div#mw-panel div.portal div.body ul li a,
div#mw-panel div.portal div.body ul li a:visited {
    color: #566d31;
}
a:hover {
    color: #566d31;
    text-decoration: underline;
}

p {
   margin-bottom:1.1em;
   margin-top:0.8em;
}

div#mw-panel div.portal div.body ul li {
    font-size: 0.8em;
}
body,
#mw-page-base {
    background: #FFF;
}
ul {
    list-style-image: none;
}

nav.top-bar,
nav.top-bar-section {
    background: #f5f7f1;
    color: #000000;
}

.mw-search-result-data {
    color: #636363;
    font-size: 90%;
}
.mw-body {
    border-color: #919191;
    border-top: 0;
    margin-top: 12px;
    padding-top: 0;
}
div.vectorMenu {
    background: #fff;
}
div.vectorTabs {
    background-image: none;
    border-left: 0;
}
div.vectorTabs ul {
    background-image: none;
}
div.vectorTabs ul li {
    background-image: none;
    background-color: transparent;
    background: #fff;
}
div.vectorTabs span,
div#mw-head div.vectorMenu h3 {
    background-image: none;
    border-right: 0;
}
div.vectorTabs li.selected span {
    border-bottom: 2px solid #566d31;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background-color: #566d31;
    border-color: #566d31;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: #2e391c;
    border-color: #2e391c;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
    background-color: #2e391c;
    border-color: #2e391c;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
    border-color: #2e391c;
    box-shadow: inset 0 0 0 1px #566d31,inset 0 0 0 2px #fff;
}
.fa {
color: #2e391c;
}

.btn {
border-color: grey;
}

div.title-name div.title-name {
  display: none !important;
}

.top-bar-section ul li {
  background: transparent;
}
.top-bar-section ul li > a,
.top-bar-section li.active:not(.has-form) a:not(.button) {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #566d31;
  background: transparent;
  font-weight: 700;
}
.top-bar-section ul li > a:hover,
.top-bar-section ul li > a:active,
.top-bar-section ul li > a:visited,
.top-bar-section ul li > a:focused,
.top-bar-section li.active:not(.has-form) a:hover:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
  color: #566d31;
  background: #FFFFFF;
}
.top-bar-section ul li > a > .fa {
  color: #566d31;
}
@media only screen and (min-width: 40.0625em) {
.top-bar-section .has-form {
  background: transparent;
}
.top-bar-section .has-dropdown > a {
  padding: 0 0.9375rem !important;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
  color: #566d31;
  background: #FFFFFF;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  color: #FFFFFF !important;
  background: #566d31;
  font-weight: 400;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button),
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button):hover,
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
  color: #FFFFFF !important;
  background: #2e3a1c;
  font-weight: 400;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) .fa {
  color: #FFFFFF;
}
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button) {
  color: #566d31;
  background: #FFFFFF;
}
}
.top-bar .toggle-topbar a,
.top-bar .toggle-topbar.menu-icon a {
  color: #566d31;
}
.top-bar .toggle-topbar.menu-icon a span::after {
  box-shadow: 0 0 0 1px #566d31, 0 7px 0 1px #566d31, 0 14px 0 1px #566d31;
}
.top-bar.expanded .title-area {
  background: #f5f7f1;
}
@media only screen and (max-width: 640px) {
  .top-bar-section .divider, .top-bar-section [role="separator"] {
    border-color: #d1d1d1;
  }
  .top-bar-section ul,
  #personal-tools-dropdown {
    border-top: 1px solid #d1d1d1;
  }
  .top-bar-section ul {
    border-bottom: 1px solid #d1d1d1;
  }
  .top-bar-section ul:first-child {
    border-top: 0;
  }
}
button, .button, a.button {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #566d31;
  border-color: #566d31;
  color: #FFFFFF !important;
}
button:hover, button:focus, .button:hover, .button:focus, a.button:hover, a.button:focus {
  background-color: #566d31;
  border-color: #566d31;
  color: #FFFFFF !important;
}
button.radius, .button.radius, a.button {
  border-radius: 30px;
}
.fa .show-for-medium-up {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
footer.row {
  background-color: #556d32;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #9db577;
  max-width: 100%;
}
footer.row a {
  color: #9db577;
}
.top-bar .button.search {
  border-radius: 0 20px 20px 0;
  font-size: 12px;
  margin-left: -4px;
}
.top-bar input[type="search"] {
  border-radius: 20px 0 0 20px;
  border: 1px solid #566d31;
  box-shadow: none;
  font-size: 12px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1#firstHeading {
  font-weight: 300;
}
input[type="submit"] {
  background: #566d31;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
}
.top-bar {
  padding: 5px 0;
}
.label {
  background-color: #e7e7e7;
  color: #000000;
}
.toctogglelabel {
  color: #566d31;
}
.text-center #footer-left {
  float: left !important;
}
.text-center #footer-left li {
  float: left;
  margin-right: 2rem;
}
#footer-right-icons {
  float: right;
  width: auto;
  text-align: right;
  font-size: 90%;
}
#footer-right-icons #poweredby {
  font-size: 90%;
}
h5 {
    font-size: 1rem;
}
.mw-ui-button.mw-ui-progressive,.mw-ui-button.mw-ui-progressive:hover {
  background: #566d31;
  border: 0;
  border-radius: 20px;
}

.roadmapcircle{
   display:block;
   width:100px;
   height:100px;
   border-radius:50px;
   color:#fff;
   text-align:center;
   text-decoration:none;
}
.roadmapcircle-darkgreen {
   background:#566d31;
}
.roadmapcircle-lightgreen {
   background:#789050;
}
.roadmapcircle-yellow {
   background:#ba9c53;
}
.roadmapcircle-purpleish {
   background:#763b36;
}
.roadmapcircle-grey {
   background:#919191;
}

.roadmapcircle:hover{
   color:#ccc;
   text-decoration:none;
   background:#333;
}

.roadmapcircle .fa {
color: #fff;
padding-top: 16px;
}

/* vertical line */
.outer {
  width: 1px;
  height: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
  width:100%;
  height: 40%;
  background: grey;
  top: 30%;
  box-shadow: 0px 0px 30px 20px grey;
}

.callout.note {
  background: red;
}