We do our best to give you all information you need. Use the Search menu to search for the page you are looking for. The most used pages are on the side menu or in the Popular Pages page.

Do you miss important stuff or do you have suggestions? Let us know via Discord or in-game. Thank you for using our Wiki!

Difference between revisions of "MediaWiki:Common.css"

From GrinderScape Wiki
Jump to: navigation, search
Line 623: Line 623:
  
 
/* FONT AWESOME */
 
/* FONT AWESOME */
 +
 +
/*!
 +
* Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 +
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 +
*/
 +
.fa,
 +
.fab,
 +
.fad,
 +
.fal,
 +
.far,
 +
.fas {
 +
    -moz-osx-font-smoothing: grayscale;
 +
    -webkit-font-smoothing: antialiased;
 +
    display: inline-block;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    text-rendering: auto;
 +
    line-height: 1
 +
}
 +
 +
.fa-lg {
 +
    font-size: 1.33333em;
 +
    line-height: .75em;
 +
    vertical-align: -.0667em
 +
}
 +
 +
.fa-xs {
 +
    font-size: .75em
 +
}
 +
 +
.fa-sm {
 +
    font-size: .875em
 +
}
 +
 +
.fa-1x {
 +
    font-size: 1em
 +
}
 +
 +
.fa-2x {
 +
    font-size: 2em
 +
}
 +
 +
.fa-3x {
 +
    font-size: 3em
 +
}
 +
 +
.fa-4x {
 +
    font-size: 4em
 +
}
 +
 +
.fa-5x {
 +
    font-size: 5em
 +
}
 +
 +
.fa-6x {
 +
    font-size: 6em
 +
}
 +
 +
.fa-7x {
 +
    font-size: 7em
 +
}
 +
 +
.fa-8x {
 +
    font-size: 8em
 +
}
 +
 +
.fa-9x {
 +
    font-size: 9em
 +
}
 +
 +
.fa-10x {
 +
    font-size: 10em
 +
}
 +
 +
.fa-fw {
 +
    text-align: center;
 +
    width: 1.25em
 +
}
 +
 +
.fa-ul {
 +
    list-style-type: none;
 +
    margin-left: 2.5em;
 +
    padding-left: 0
 +
}
 +
 +
.fa-ul>li {
 +
    position: relative
 +
}
 +
 +
.fa-li {
 +
    left: -2em;
 +
    position: absolute;
 +
    text-align: center;
 +
    width: 2em;
 +
    line-height: inherit
 +
}
 +
 +
.fa-border {
 +
    border: .08em solid #eee;
 +
    border-radius: .1em;
 +
    padding: .2em .25em .15em
 +
}
 +
 +
.fa-pull-left {
 +
    float: left
 +
}
 +
 +
.fa-pull-right {
 +
    float: right
 +
}
 +
 +
.fa.fa-pull-left,
 +
.fab.fa-pull-left,
 +
.fal.fa-pull-left,
 +
.far.fa-pull-left,
 +
.fas.fa-pull-left {
 +
    margin-right: .3em
 +
}
 +
 +
.fa.fa-pull-right,
 +
.fab.fa-pull-right,
 +
.fal.fa-pull-right,
 +
.far.fa-pull-right,
 +
.fas.fa-pull-right {
 +
    margin-left: .3em
 +
}
 +
 +
.fa-spin {
 +
    -webkit-animation: fa-spin 2s linear infinite;
 +
    animation: fa-spin 2s linear infinite
 +
}
 +
 +
.fa-pulse {
 +
    -webkit-animation: fa-spin 1s steps(8) infinite;
 +
    animation: fa-spin 1s steps(8) infinite
 +
}
 +
 +
@-webkit-keyframes fa-spin {
 +
    0% {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    to {
 +
        -webkit-transform: rotate(1turn);
 +
        transform: rotate(1turn)
 +
    }
 +
}
 +
 +
@keyframes fa-spin {
 +
    0% {
 +
        -webkit-transform: rotate(0deg);
 +
        transform: rotate(0deg)
 +
    }
 +
 +
    to {
 +
        -webkit-transform: rotate(1turn);
 +
        transform: rotate(1turn)
 +
    }
 +
}
 +
 +
.fa-rotate-90 {
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
 +
    -webkit-transform: rotate(90deg);
 +
    transform: rotate(90deg)
 +
}
 +
 +
.fa-rotate-180 {
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
 +
    -webkit-transform: rotate(180deg);
 +
    transform: rotate(180deg)
 +
}
 +
 +
.fa-rotate-270 {
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
 +
    -webkit-transform: rotate(270deg);
 +
    transform: rotate(270deg)
 +
}
 +
 +
.fa-flip-horizontal {
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
 +
    -webkit-transform: scaleX(-1);
 +
    transform: scaleX(-1)
 +
}
 +
 +
.fa-flip-vertical {
 +
    -webkit-transform: scaleY(-1);
 +
    transform: scaleY(-1)
 +
}
 +
 +
.fa-flip-both,
 +
.fa-flip-horizontal.fa-flip-vertical,
 +
.fa-flip-vertical {
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
 +
}
 +
 +
.fa-flip-both,
 +
.fa-flip-horizontal.fa-flip-vertical {
 +
    -webkit-transform: scale(-1);
 +
    transform: scale(-1)
 +
}
 +
 +
:root .fa-flip-both,
 +
:root .fa-flip-horizontal,
 +
:root .fa-flip-vertical,
 +
:root .fa-rotate-90,
 +
:root .fa-rotate-180,
 +
:root .fa-rotate-270 {
 +
    -webkit-filter: none;
 +
    filter: none
 +
}
 +
 +
.fa-stack {
 +
    display: inline-block;
 +
    height: 2em;
 +
    line-height: 2em;
 +
    position: relative;
 +
    vertical-align: middle;
 +
    width: 2.5em
 +
}
 +
 +
.fa-stack-1x,
 +
.fa-stack-2x {
 +
    left: 0;
 +
    position: absolute;
 +
    text-align: center;
 +
    width: 100%
 +
}
 +
 +
.fa-stack-1x {
 +
    line-height: inherit
 +
}
 +
 +
.fa-stack-2x {
 +
    font-size: 2em
 +
}
 +
 +
.fa-inverse {
 +
    color: #fff
 +
}
  
 
.fa-discord:before {
 
.fa-discord:before {

Revision as of 02:39, 13 November 2020

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);

body {
    background: url(https://www.grinderscape.org/assets/images/background.png);
    font-family: Open Sans, sans-serif;
    line-height: 20px;
}

a {
    color: #afafaf!important;
    text-decoration: none!important;
    transition: 200ms;
}

a.new {
    color: #b24040!important;
}

 nav ul {
    list-style-type: none;
    list-style-image: none;
    text-align: center;
    margin: auto;
}

  nav ul li {
    margin: 0;
    display: inline-flex;
}

   nav ul li a {
    margin: 10px;
    padding: 0;
}

header {
    min-width: auto;
}

 div#logo {
    padding: 30px 0;
    margin: auto;
    text-align: center;
}

div#wrap {
    /*min-width: 800px;*/
    min-width:auto !important;
    max-width: 1450px;
    margin: 60px auto;
    /*padding: 30px 30px 0 30px;*/
    box-sizing: border-box;
}

 div#mw-navigation {
    display: none;
}

  div#mw-head {
    position: initial;
}

   div#p-personal {
    position: initial;
    text-align: right;
    padding-bottom: 0;
}

    #p-personal ul {
    padding: 0;
    display: inline-block;
}

     #p-personal ul li {
    float: initial;
    margin: 0;
    display: inline-block;
    padding: 0!important;
    background: none;
}

      #p-personal ul li a {
    margin: 10px;
    padding: 0;
    display: block;
}

   div#mw-head div.vectorMenu h3 {
    display: none;
}

 div#siteNotice {
    margin-bottom: 30px;
    padding: 30px;
    text-align: left;
}

  div#noticeTitle {
    margin-bottom: 10px!important;
    background: url(https://i.imgur.com/3dqF3sx.png) no-repeat;
}

  div#localNotice {
    margin-bottom: 0;
}

   div#localNotice > p {
    margin: 0;
}

 div#pageInfo {
    margin: 0 0 30px 0;
    padding: 30px;
}

  h1#firstHeading {
    background: url(https://i.imgur.com/qpqwLFJ.png) no-repeat;
    padding: 0 0 0 30px;
    line-height: 20px;
    margin: 0;
    border-bottom: none;
    font-size: 13px;
    color: #592c0d;
}

  span.subpages {
    position: relative;
    border-top: 2px solid #161b20;
    padding-top: 10px;
    margin-top: 10px;
}

 div#content-sidebar-wrap {
    display: table;
    width: 100%;
}

  div#mw-panel {
    position: initial;
    width: 350px;
    display: table-cell;
    padding: 0 0 0 30px !important;
    vertical-align: top;
    box-sizing: border-box;
}

   div#p-logo {
    display: none;
}

   div#p-search {
    margin: 0;
    float: initial;
    margin-bottom: 30px;
    padding: 30px;
}

div#p-search div#searchTitle {
    background: url(https://i.imgur.com/X1fC0qz.png) no-repeat;
}

      span.subpages:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    background-color: #afafaf;
    top: -2px;
    left: 0;
}

    form#searchform {
    padding: 0;
    margin: 0;
}

     div#simpleSearch {
    margin: 0;
    padding: 0;
    width: 100%;
    height: initial;
    border: 0;
    background: none;
}

div#simpleSearch #searchInput, input#database_input {
    padding: 10px;
    line-height: 20px;
    font-family: Open Sans,sans-serif;
    background-color: transparent;
    border: 1px solid #161b20;
    outline: none;
}

      div#simpleSearch #searchButton {
    position: initial;
    width: 100%;
    margin-top: 10px!important;
    text-indent: initial;
}

   div#mw-panel div.portal {
    margin: 0;
    padding: 30px;
    margin-bottom: 30px;
}

    div#mw-panel div.portal h3 {
    cursor: initial;
    display: block!important;
}

     div#mw-panel div.portal h3#p-In_the_wiki-label {
    background: url(https://i.imgur.com/7DeMxyz.png) no-repeat;
}

     div#mw-panel div.portal h3#p-Popular_pages-label {
    background: url(https://i.imgur.com/qtaf1a3.png) no-repeat;
}

     div#mw-panel div.portal h3#p-Categories-label {
    background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat;
}

     div#mw-panel div#p-Management{
    display: none;
}

div#mw-panel div.portal h3#p-Management-label {
    background: url(https://i.imgur.com/vcNXF6N.png) no-repeat;
}

div#mw-panel div.portal div.body {
    margin: 0!important;
}

div#mw-panel div.portal div.body ul li {
    line-height: 20px;
    display: flex;
    padding: 10px 0;
    border-bottom:1px solid rgba(0,0,0,0.1);
}

div#mw-panel div.portal div.body ul li:last-child {
    border-bottom:none;
}

  div#content-wrap {
    box-sizing: border-box;
}

   div#content-navigation-wrap {
    margin-bottom: 30px;
    overflow: hidden;
}

    div#navigation {
    display: flex;
    height: 42px;
    position: relative;
    margin-bottom: 60px;
}

    div#navigation:before {
    content: "";
    position: absolute;
    bottom: 0;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    width: 100%;
}
    div#left-navigation {
    margin: 0;
    position: absolute;
}

    div#right-navigation {
    position: absolute;
    right: 0;
    margin: 0;
}
    div.vectorTabs {
    background: none;
    padding: 0;
    height: initial;
}

    div.vectorTabs ul {
    background: none;
}
    div.vectorTabs ul li {
    background: none!important;
    font-size: 0;
}
div.vectorTabs ul li.selected a {
    cursor: initial;
    border-bottom: 2px solid #5C3219;
}
div.vectorTabs span {
    background: none;
}

div.vectorTabs ul li a {
    line-height: 20px;
    padding: 10px;
    font-size: 13px;
    height: initial;
    border-bottom: 2px solid transparent;
}

div.vectorTabs ul li a:hover {
    border-bottom: 2px solid rgba(0,0,0,0.2);
}

h3#p-cactions-label {
    padding: 0;
    margin: 0!important;
}

h3#p-cactions-label span {
    display: none;
}

div.vectorMenu h3 a {
    position: initial;
    display: block;
    width: 46px;
    height: 40px;
    background: url(https://i.imgur.com/l1cW7qY.png) no-repeat center!important;
    background-position: initial;
    outline: none;
}

div.vectorMenu h3 a:hover {
    background:#transparent!important;
}
div.vectorMenu div.menu {
    top: 40px;
    left: initial;
    right: 0;
    border: none;
    background:#c7b07c;
}
div.vectorMenu div.menu li {
    line-height: 20px;
}

div.vectorMenu li:first-child a {
    border-top: 1px solid #151A1E;
}

        div.vectorMenu li a {
    padding: 10px 15px;
    font-size: 12px;
    border-bottom: 1px solid #151A1E;
}

div.vectorMenu li a:hover {
    background:rgba(255,255,255,0.1);
}

    div#content {
    margin: 0;
    padding: 30px;
    border: none;
    background: none;
}

     #contentSub, #contentSub2 {
    margin: 30px 0;
}

    ul#footer-info {
    margin: 0 30px;
    border-top:2px solid rgba(0,0,0,0.2);
}

div#footer {
    margin: 0;
    padding: 0;
    min-width: auto;
}

 div#customFooter {
    margin: 0;
    background: #252525;
    margin-top: 30px;
    padding: 30px;
    text-align: center;
}

  div#customFooter div a {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 5px!important;
}

ul#footer-places, ul#footer-icons, li#ca-unwatch, li#ca-watch, div#jump-to-nav, span#wpSummaryLabel, input#wpSummary, div.editCheckboxes, div#editpage-copywarn {
    display: none;
}

div#siteNotice, div#pageInfo, div#content-navigation-wrap, div#p-search, div#mw-panel div.portal{
    background: #bca674 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
div#noticeTitle, div#searchTitle, div#mw-panel div.portal h3 {
    position: relative;
    font-size: 13px;
    padding: 0 0 10px 30px;
    color: #592c0d;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    overflow: initial;
}
body, .mw-body p, p, a:hover, div#mw-panel div.portal div.body ul li a, span.subpages a, div#simpleSearch #searchInput, div.vectorTabs ul li a, table, .mw-body-content, .mw-body pre, textarea#wpTextbox1, #contentSub, #contentSub2, input#database_input {
    color:#000 !important;
}
div.portal h3:before, div#searchTitle:before, div#noticeTitle:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 20px;
    background-color:#5c3219;
    bottom: -2px;
    left: 0;
}
div.editButtons input[type="submit"], div#simpleSearch #searchButton, div.editButtons span a, div#customFooter div a, button#database_button {
    border-radius: 3px;
    color: #afafaf;
    border: 1px solid #5c3219;
    background-color: #5c3219;
    background-image: linear-gradient( transparent,rgba(0, 0, 0, 0.15));
    padding: 10px;
    margin: 0;
    font-family: Open Sans,sans-serif;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    outline: none;
}







/* New Site Design */

/* Header */

.container {
    max-width: 1600px;
    margin: auto
}

header {
    position: relative;
    width: 100%
}

header .entire-header {}

.header-top {
    padding: 14px 0;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background: #110901
}

.header-top .container {
    justify-content: space-between
}

.header-top .logo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 380px;
    width: 380px;
    z-index: 99
}

.header-top .login {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.header-top .login li {
    margin-right: 10px
}

.header-top .login li:last-child {
    margin-right: 0
}

.header-top .login li:last-child a:hover {
    text-decoration: underline
}

.play-link {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.play-link li {
    margin-right: 15px
}

.play-link li a {
    color: #fff;
    text-shadow: 0 3px 15px rgba(0, 0, 0, .75);
    font-size: 22px
}

.play-link li a:hover {
    color: #ff8936;
    text-shadow: 0 3px 15px rgba(0, 0, 0, .75)
}

.login a {
    color: #90b41a;
    text-transform: uppercase;
    font-size: 15px
}

.header-bottm {
    padding: 30px 0;
    box-sizing: border-box;
    width: 100%;
    background: #060402;
    background: linear-gradient(90deg, rgba(6, 4, 2, 0.6026785714285714) 0%, rgba(38, 26, 6, 0.45) 10%, rgba(38, 26, 6, 0.45) 90%, rgba(6, 4, 2, 0.6) 100%)
}

.header-bottm .main-nav {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row
}

.header-bottm .main-nav li {
    margin-right: 6%;
    position: relative
}

.header-bottm .main-nav li:last-child {
    margin-right: 0
}

.header-bottm .main-nav li:nth-child(4) {
    margin-right: 32.41%
}

.header-bottm ul li a {
    text-transform: uppercase;
    color: #fe9826;
    font-size: 17px;
    display: block;
    transition: .2s all ease-in-out;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3)
}

.header-bottm ul li.acitve a {
    color: #90b41a;
    text-shadow: 0 2px 28px #ffaa0a
}

.header-bottm ul li a:hover {
    color: #90b41a;
    text-shadow: 0 2px 28px #ffaa0a
}

.header-bottm ul li::after {
    position: absolute;
    content: '';
    background: url(../images/menu-after-icon.png) no-repeat;
    width: 16px;
    height: 16px;
    right: -50px;
    top: 5px
}

.header-bottm .main-nav li:nth-child(4)::after {
    position: absolute;
    content: '';
    background: 0 0;
    width: 0;
    height: 0;
    margin: 0;
    right: 0
}

.header-bottm ul li:last-child::after {
    position: absolute;
    content: '';
    background: 0 0;
    width: 0;
    height: 0;
    margin: 0;
    right: 0
}

.mobile-logo {
    display: none
}





/* FONT AWESOME */

/*!
 * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
 .fa,
 .fab,
 .fad,
 .fal,
 .far,
 .fas {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     display: inline-block;
     font-style: normal;
     font-variant: normal;
     text-rendering: auto;
     line-height: 1
 }

 .fa-lg {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em
}

.fa-xs {
    font-size: .75em
}

.fa-sm {
    font-size: .875em
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-6x {
    font-size: 6em
}

.fa-7x {
    font-size: 7em
}

.fa-8x {
    font-size: 8em
}

.fa-9x {
    font-size: 9em
}

.fa-10x {
    font-size: 10em
}

.fa-fw {
    text-align: center;
    width: 1.25em
}

.fa-ul {
    list-style-type: none;
    margin-left: 2.5em;
    padding-left: 0
}

.fa-ul>li {
    position: relative
}

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit
}

.fa-border {
    border: .08em solid #eee;
    border-radius: .1em;
    padding: .2em .25em .15em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left,
.fab.fa-pull-left,
.fal.fa-pull-left,
.far.fa-pull-left,
.fas.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right,
.fab.fa-pull-right,
.fal.fa-pull-right,
.far.fa-pull-right,
.fas.fa-pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite
}

.fa-pulse {
    -webkit-animation: fa-spin 1s steps(8) infinite;
    animation: fa-spin 1s steps(8) infinite
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.fa-flip-vertical {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical,
.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

:root .fa-flip-both,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270 {
    -webkit-filter: none;
    filter: none
}

.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em
}

.fa-stack-1x,
.fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #fff
}

.fa-discord:before {
    content: "\f392"
}

.fa-facebook:before {
    content: "\f09a"
}

.fa-facebook-f:before {
    content: "\f39e"
}

.fa-facebook-messenger:before {
    content: "\f39f"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-youtube-square:before {
    content: "\f431"
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../webfonts/fa-brands-400.eot);
    src: url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-brands-400.woff2) format("woff2"), url(../webfonts/fa-brands-400.woff) format("woff"), url(../webfonts/fa-brands-400.ttf) format("truetype"), url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
    font-family: "Font Awesome 5 Brands"
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../webfonts/fa-regular-400.eot);
    src: url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-regular-400.woff2) format("woff2"), url(../webfonts/fa-regular-400.woff) format("woff"), url(../webfonts/fa-regular-400.ttf) format("truetype"), url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

.fab,
.far {
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../webfonts/fa-solid-900.eot);
    src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

.fa,
.far,
.fas {
    font-family: "Font Awesome 5 Free"
}

.fa,
.fas {
    font-weight: 900
}








div#mw-page-base {
    background: #151515 url(https://www.grinderscape.org/assets/images/background.png);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999;
}

div#mw-head-base {
position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999;
    margin: -75px 0 0 -75px;
    border: 16px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 5px rgba(0,0,0,0.7), inset 0 0 5px rgba(0,0,0,0.7);
    border-radius: 50%;
    border-top: 16px solid #627924;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



















/* Specific Pages */

form#editform {
    border: 1px solid rgba(0,0,0,0.3);
}

 div#toolbar {
    padding: 10px 5px;
    background: #5c3219;
    border-bottom: 1px solid #161b20;
    line-height: 0;
}

  div#toolbar > div {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin: 0 5px;
}

   div#mw-editbutton-bold, div#mw-editbutton-italic, div#mw-editbutton-headline, div#mw-editbutton-nowiki {
    display: none!important;
}

   div#mw-editbutton-link {
    background: url(https://i.imgur.com/Wrs4VMn.png);
}

  div#mw-editbutton-extlink {
    background: url(https://i.imgur.com/HKLvTBX.png);
}

   div#mw-editbutton-hr {
    background: url(https://i.imgur.com/J9is2iW.png);
}

 textarea#wpTextbox1 {
    resize: vertical;
    outline: none;
    background:rgba(0,0,0,0.1);
    font-family: monospace;
    line-height: 16px;
    font-size: 12px;
    border: none;
    padding: 10px;
}

 .editOptions {
    border: none;
    padding: 10px 5px;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.2);
}

  .editButtons {
    display: flex;
}

   span.cancelLink {
    margin: 0;
    display: flex;
}

   div.editButtons input[type="submit"], div.editButtons span a {
    margin: 0 5px;
}

 .mw-editTools, .templatesUsed, .hiddencats, .limitreport, span.editHelp, span.mw-editButtons-pipe-separator {
    display: none;
}

ul#index {
    margin-left: 0;
}

 ul#index li {
    display: flex;
}

 ul#index li:not(:last-child) {
    padding-bottom: 10px;
    border-bottom:1px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

  div.img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

  ul#index li div.img img {
    max-height: 40px;
    max-width: 40px;
}























/* General */

body, div#mw-panel div.portal div.body ul li a, div#simpleSearch #searchButton, div#simpleSearch #searchInput, div#siteNotice, .mw-body p, table, .mw-body-content, #contentSub, #contentSub2, #p-personal ul li, nav ul li, input#database_input {
    font-size: 12px;
    line-height: 20px;
}

 div#mw-panel div.portal div.body ul li a:hover, span.subpages a:hover, div.vectorTabs ul li.selected a, div.vectorTabs ul li a:hover, th, span.cancelLink a:hover {
    color:#593018!important;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
    font-family: Open Sans, sans-serif!important;
    color: #afafaf;
    line-height: 20px;
    font-weight: normal!important;
    margin: 30px 0!important;
    font-size: 13px;
}

.mw-body img {
    max-width: 100%;
}

.mw-body p, p {
    margin: 30px 0;
    line-height: 20px;
}

.mw-body h1 {
    border-bottom: 1px solid #161b20;
    padding-bottom: 10px;
}

.mw-body h2 {
    border-bottom: none;
}

span.mw-editsection {
    display: none;
}

table {
    margin: 30px 0!important;
    background:rgba(0,0,0,0.2)!important;
    border-collapse: collapse;
}

 td, th {
    padding: 10px!important;
    border: 1px solid #161b20!important;
}

  th {
    background: #1f272f!important;
    font-weight: normal;
    text-align: left!important;
}

.mw-body pre {
    background-color: rgba(0,0,0,0.1);
    line-height: 16px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px;
    margin: 30px 0;
}

hr {
    background-color: #161b20;
    margin: 30px 0;
}

.mw-body .external {
    padding: 0;
    background: none;
}

.mw-body ul {
    margin: 30px 0px 30px 10px;
    list-style-position: inside;
    list-style-image: none;
}

 .mw-body ul li {
    margin: 0;
}

  .mw-body ul li ul {
    margin: 10px 0 10px 30px;
}
div#customFooter, nav {
    background:#5C3219 !important;color:#bca674!important;
}
div#mw-head a {color:#bca674 !important;}
div#customFooter p{color:#bca674!important;}
div#customFooter a{color:#fff!important;}
#wrap a{color:#5c3219 !important;}
fieldset {border: 1px solid rgba(0,0,0,0.2) !important;}
.mw-changeslist-legend {border:1px solid #97855d !important;}
input[type="submit"], input[type="checkbox"], select {background: #5c3219 !important;border-color:#5c3219 !important;}
::-webkit-input-placeholder {color: #717171; }
:-moz-placeholder { color: #717171; }
::-moz-placeholder { color: #717171; }
:-ms-input-placeholder { color: #717171; }


/* 28-12-2016 */
nav ul li{
display:inline-block !important;
padding:10px 0 !important;
}
nav ul li a:hover {
 color: #fff !important;
}
#mw-watchlist-resetbutton > input {
 color: #afafaf !important;
}
#mw-watchlist-options input {
 color: #afafaf !important;
}
.namespaceselector {
  color: #afafaf !important;
}
.mw-submit {
  color: #afafaf !important;
}
.namespaceselector {
  margin-left: 5px !important;
}
.mw-month-selector {
  color: #fdfdfd !important;
}

#index li{
list-style:none !important;
}

.sicon1{
background:url(https://i.imgur.com/DeOQfOs.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #3a589e !important;

}

#customFooter > div > a:nth-child(1){
background:url(https://i.imgur.com/DeOQfOs.png) no-repeat center !important;
background-color:#3a589e !important;
color:#fff !important;
}

#customFooter > div > a:nth-child(2){
background:url("https://i.imgur.com/GZzo3yV.png") no-repeat center !important;
background-color:#3a89c4 !important;
color:#fff !important;
}
#customFooter > div > a:nth-child(3){
background:url("https://i.imgur.com/wF3Xf61.png") no-repeat center !important;
background-color:#c8312b !important;
color:#fff !important;
}
.mw-headline{
color:#000 !important;  
}

#mw-history-search > input {
  color: #999 !important;
}
.historysubmit.mw-history-compareselectedversions-button {
  color: #fdfdfd !important;
}
#toc, .toc, .mw-warning, .toccolours {
  background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important;
  border: medium none !important;
}
.diff-currentversion-title {
  color: #222 !important;
}
#toctitle > h2 {
  color: #222;
}
td.diff-context {
  background: rgba(254,254,254,0.3) !important;

}
td.diff-addedline .diffchange {
  background: rgba(237,237,237,0.5) !important;
}

#pagehistory li.selected {
  background-color: rgba(254, 254, 254, 0.5) !important;
  border: 1px dashed #000 !important;
  padding: 5px !important;
}
#pagehistory li {
  border: 1px solid #222 !important;
  padding: 5px !important;
}
.results-info {
  color: #222 !important;
}
.mw-ui-input {
  background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important;
  border: medium none !important;
  padding: 6px !important;
}
#mw-searchoptions {
  background: rgba(254, 254, 254, 0.3) none repeat scroll 0 0 !important;
}
#mw-searchoptions h4 {
  color: #222 !important;
}
.ipsDataItem, .ipsDataList.ipsDataList_zebra > .ipsDataItem{
border:none !important;
}
.wikitable th {
  color: #fff !important;
}
.ipsPad_half{
text-align:center !important;
}
#mw-history-search > input {
  background: rgba(254, 254, 254, 0.2) none repeat scroll 0 0 !important;
  color: #000 !important;
}
.mw-search-profile-tabs {
  background-color: rgba(254,254,254,0.2) !important;
  border: none !important;
}
.highlight-hover{background-color:#b39f71;}
.highlight {font-weight:normal;}

/*HOMEPAGE*/
.tile-half{
    flex: 1;
    margin-right: 9px;
}
.tile-top{
    display: flex;
    align-items: center;
    background-color: #5C6168;
    overflow: hidden;
    padding: 0;
    height: 13vw;
    max-height: 12em;
    transition: 0.4s ease-out;
}
.tile-bottom{
    background-color: #ECE6D8;
    padding: 12px 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    align-self: end;
    min-height: 5vw;
}
.tile-date {
    margin:0!important;
    font-size: 0.8em!important;
    color: #999!important!important;
    line-height: 14px!important;

}
.tile-title {
    margin-bottom: 5px;
    font-size: 1.4em;
    color: #000;
}
.tile-info {
    line-height: 1.4em;
    color: #000;
}
.click-to-view {
    font-size: 0.85em;
    color: #e01818;
}
.tile-half:hover > .tile-bottom {
    background-color: #e8dcbe;
}
/* 28-12-2016 */




/* 28-12-2016 responsive layout */
@media screen and (max-width:991px){
#content-sidebar-wrap > div {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
}
div#content-sidebar-wrap {
  display: block !important;
}
}

@media screen and (max-width:767px){
#content-sidebar-wrap {
  display: block !important;
}
div#mw-panel {
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}
.mw-contributions-form {
  overflow: auto;
  width: 100% !important;
}
#mw-history-search {
  line-height: 30px !important;
}
.ipsDataItem, .ipsDataList.ipsDataList_zebra > .ipsDataItem{
border-top:none !important;
border-bottom:none !important;
}
}
@media screen and (max-width:450px){
div#right-navigation {
  margin-top: 40px;
  position: static;
  display: block !important;
}
}

/* 28-12-2016 responsive layout */
Retrieved from "https://wiki.grinderscape.org/index.php?title=MediaWiki:Common.css&oldid=9294"