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.js"

From GrinderScape Wiki
Jump to: navigation, search
m (Reverted edits by Maranami (talk) to last revision by Grinder)
Line 1: Line 1:
−
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700);
+
// ***************************** Structure *****************************
−
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
+
−
body {
+
−
    background: url(https://www.grinderscape.org/images/home-bg.jpeg);
+
−
    font-family: Open Sans, sans-serif;
+
−
    line-height: 20px;
+
−
}
+
  
−
a {
+
// Remove unnecessary elements
−
    color: #272525;
+
−
    text-decoration: none;
+
−
}
+
  
−
a.new {
+
$( "div#p-tb" ).remove();
−
    color: #b24040;
+
−
}
+
  
−
/* nav ul {
+
// Wrap the content
−
    list-style-type: none;
+
−
    list-style-image: none;
+
−
    text-align: center;
+
−
    margin: auto;
+
−
}
+
  
−
nav ul li {
+
$( "div#content, div#mw-navigation" ).wrapAll( "<div id='wrap'></div>" );
−
    margin: 0;
+
−
    display: inline-flex;
+
−
} */
+
  
−
header {
+
// Insert the header
−
    min-width: auto;
+
−
}
+
  
−
div#logo {
+
$( "<header><div id='logo'><a href='https://www.grinderscape.org/'><img src='https://www.grinderscape.org/assets/images/logo.png' draggable='false'></a></div><nav><ul><li id='n-Home'><a href='https://www.grinderscape.org/'>Home</a></li><li id='n-Forums'><a href='http://forum.grinderscape.org/'>Forums</a></li><li id='n-Wiki'><a href='/Main_page'>Wiki</a></li><li id='n-Vote'><a href='https://www.grinderscape.org/vote/status'>Vote</a></li><li id='n-Donate'><a href='https://www.grinderscape.org/donate'>Donate</a></li><li id='n-Highscores'><a href='https://www.grinderscape.org/highscores/mode/regular'>Highscores</a></li><li id='n-Download'><a href='https://www.grinderscape.org/download'>Download</a></li></ul></nav></header>" ).insertBefore( "div#wrap" );
−
    padding: 30px 0;
+
−
    margin: auto;
+
−
    text-align: center;
+
−
}
+
  
−
div#main-wrapper {
+
// Insert the footer
−
}
+
  
−
div#mw-navigation {
+
$( "<div id='customFooter'><div style='margin-bottom: 30px; line-height: 0;'><a href='https://www.facebook.com/Grinderscape.org' style='background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #3a589e; border: 1px solid #17274D;'></a><a href='https://twitter.com/grinderscape' style='background: url(https://i.imgur.com/GZzo3yV.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #3A89C4; border: 1px solid #0E3959;'></a><a href='https://www.youtube.com/user/dokenfilm' style='background: url(https://i.imgur.com/wF3Xf61.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #C8312B; border: 1px solid #78130F;'></a></div><p style='margin-bottom: 0;'>Theme developed by Jplayer.<br>GrinderScape is not affiliated with Jagex or RuneScape in any way.</p></div>" ).insertBefore( "ul#footer-places" );
−
    display: none;
+
−
}
+
  
−
div#mw-head {
+
// Organize the elements
−
    position: initial;
+
−
}
+
  
−
div#p-personal {
+
$( "div#mw-navigation" ).insertBefore( "div#content" );
−
    position: initial;
+
$( "div#content" ).wrap( "<div id='content-sidebar-wrap'></div>" );
−
    text-align: right;
+
$( "div#mw-panel" ).insertAfter( "div#content" );
−
    padding-bottom: 0;
+
$( "div#content" ).wrap( "<div id='content-wrap'></div>" );
−
}
+
  
−
#p-personal ul {
+
$( "<div id='navigation'></div>" ).prependTo( "div#content" );
−
    padding: 0 20px;;
+
$( "div#left-navigation" ).appendTo( "div#navigation" );
−
    display: inline-block;
+
$( "div#right-navigation" ).appendTo( "div#navigation" );
−
}
+
  
−
#p-personal ul li {
+
$( "<div id='pageInfo'></div>" ).insertBefore( "div#content" );
−
    float: initial;
+
−
    margin: 0;
+
−
    display: inline-block;
+
−
    padding: 0 !important;
+
−
    background: none;
+
−
}
+
  
−
#p-personal ul li a {
+
$( "div#content" ).wrap( "<div id='content-navigation-wrap'></div>" );
−
    /* margin: 0 10px; */
+
$( "div#siteNotice" ).insertAfter( "div#mw-navigation" );
−
    margin: 10px;
+
$( "ul#footer-info" ).insertAfter( "div#content" );
−
    padding: 0;
+
−
    display: block;
+
−
}
+
  
−
div#mw-head div.vectorMenu h3 {
+
// Set up the page footer info
−
    display: none;
+
−
}
+
  
−
div#siteNotice, .welcomeText, pageText {
+
if ( $( "li#footer-info-credits" ).length > 0 ) {
−
    padding: 30px 30px 0;
+
$( "li#footer-info-credits" ).html( $( "li#footer-info-credits" ).html().replace( /\[/g, "<span style='position: absolute; right: 0;'>" ).replace( /\]/g, "</span>" ).replace( /\{/g, "<p id='contentFooter' style='position: relative;'>" ).replace( /\}/g, "</p>" ) );
−
    text-align:center;
+
$( "p#contentFooter" ).insertBefore( "li#footer-info-credits" );
 +
$( "li#footer-info-credits" ).remove();
 
}
 
}
  
−
#noticeTitle, #welcome_title {
+
// Set up the page title and breadcrumb
−
    margin-bottom: 10px;
+
−
    font-size: 18px;
+
−
    padding: 0 0 10px 30px;
+
−
    color: #592c0d;
+
−
    margin-bottom: 30px;
+
−
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+
−
    overflow: initial;
+
−
}
+
  
−
div#localNotice {
+
var title = $( "h1#firstHeading" ).html().split('/');
−
    margin-bottom: 0;
+
$( "h1#firstHeading" ).html( title[ title.length - 1 ] );
−
}
+
$( "h1#firstHeading" ).appendTo( "div#pageInfo" );
  
−
div#localNotice>p {
+
$( "span.subpages" ).appendTo( "div#pageInfo" );
−
    margin: 0;
+
$( "span.subpages" ).html( $( "span.subpages" ).children() );
−
}
+
$( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
 +
$( "<span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>" ).insertAfter( "span.subpages > a" );
  
−
div#pageInfo {
+
// Set up the page title
−
    margin: 0 0 30px 0;
+
−
    padding: 30px;
+
−
}
+
  
−
h1#firstHeading {
+
document.title = title[ title.length - 1 ] + " - GrinderScape Wiki";
−
    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 {
+
// Set up the announcement
−
    position: relative;
+
−
    border-top: 2px solid #161b20;
+
−
    padding-top: 10px;
+
−
    margin-top: 10px;
+
−
}
+
  
−
div#content-sidebar-wrap {
+
$( "<div id='noticeTitle'>Notice</div>" ).prependTo( "div#siteNotice" );
−
    display: table;
+
−
    width: 100%;
+
−
}
+
  
−
div#mw-panel {
+
// Remove href from selected tabs
−
    position: initial;
+
−
    width: 220px;
+
−
    display: table-cell;
+
−
    vertical-align: top;
+
−
    box-sizing: border-box;
+
−
    border-left: 1px solid rgba(0,0,0,0.1);
+
−
}
+
  
−
div#p-logo {
+
$.each( $( "div.vectorTabs li.selected" ), function() {
−
    display: none;
+
$( this ).find( "a" ).removeAttr( "href" );
−
}
+
});
  
−
div#p-search {
+
// Remove title from links
−
    margin: 0 auto;
+
−
    float: initial;
+
−
    padding: 30px;
+
−
    width:45%;
+
−
}
+
  
−
div#p-search div#searchTitle {
+
$( "a" ).removeAttr( "title" );
−
    background: url(https://i.imgur.com/X1fC0qz.png) no-repeat;
+
−
}
+
  
−
span.subpages:before {
+
// Set up the search box
−
    content: "";
+
−
    position: absolute;
+
−
    height: 2px;
+
−
    width: 20px;
+
−
    background-color: #afafaf;
+
−
    top: -2px;
+
−
    left: 0;
+
−
}
+
  
−
form#searchform {
+
$( "div#p-search" ).prependTo( "div#mw-panel" );
−
    padding: 0;
+
$( "<div id='searchTitle'>Search</div>" ).insertBefore( "form#searchform" );
−
    margin: 0;
+
$( "input#searchInput" ).val( "Search..." ).removeAttr( "placeholder" ).attr( "onfocus", "if (this.value == 'Search...') {this.value = '';}" ).attr( "onblur", "if (this.value == '') {this.value = 'Search...';}" );
−
}
+
  
−
div#simpleSearch {
+
// Set up the edit box
−
    margin: 0;
+
−
    padding: 0;
+
−
    width: 100%;
+
−
    height: initial;
+
−
    border: 0;
+
−
    background: none;
+
−
}
+
  
−
div#simpleSearch #searchInput,
+
function wrapText( elementID, openTag, closeTag ) {
−
input#database_input {
+
var textArea = $( "#" + elementID );
−
    padding: 10px;
+
var len = textArea.val().length;
−
    line-height: 20px;
+
var start = textArea[0].selectionStart;
−
    font-family: Open Sans, sans-serif;
+
var end = textArea[0].selectionEnd;
−
    background-color: transparent;
+
var selectedText = textArea.val().substring( start, end );
−
    border: 1px solid #161b20;
+
var replacement = openTag + selectedText + closeTag;
−
    outline: none;
+
textArea.val( textArea.val().substring( 0, start ) + replacement + textArea.val().substring( end, len ) );
 
}
 
}
  
−
div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton {
+
$( "input#wpWatchthis" ).prop( "checked", false );
−
    text-indent: initial;
+
−
    width: 4.65em;
+
−
}
+
  
−
div#mw-panel div.portal {
+
$( "<div class='customButton' id='CB-Nowiki' style='background: url(https://i.imgur.com/Fx2AsCt.png);' title='Ignore wiki formatting'></div>" ).appendTo( "div#toolbar" );
−
    margin: 0;
+
$( "#CB-Nowiki" ).click( function() {
−
    padding: 15px 30px;
+
wrapText( "wpTextbox1", "<nowiki>", "</nowiki>" );
−
    margin-bottom: 30px;
+
});
−
    background-image:none;
+
−
}
+
  
−
div#mw-panel div.portal h3 {
+
$( "<div class='customButton' id='CB-Heading2' style='background: url(https://i.imgur.com/8uajyYO.png);' title='Level 2 heading'></div>" ).prependTo( "div#toolbar" );
−
    cursor: initial;
+
$( "#CB-Heading2" ).click( function() {
−
    display: block !important;
+
wrapText( "wpTextbox1", "<h2>", "</h2>" );
−
}
+
});
  
−
div#mw-panel div.portal h3#p-In_the_wiki-label {
+
$( "<div class='customButton' id='CB-Heading1' style='background: url(https://i.imgur.com/jKOOZnF.png);' title='Level 1 heading'></div>" ).prependTo( "div#toolbar" );
−
    background: url(https://i.imgur.com/7DeMxyz.png) no-repeat;
+
$( "#CB-Heading1" ).click( function() {
−
}
+
wrapText( "wpTextbox1", "<h1>", "</h1>" );
 +
});
  
−
div#mw-panel div.portal h3#p-Popular_pages-label {
+
$( "<div class='customButton' id='CB-Italic' style='background: url(https://i.imgur.com/zdPfv0X.png);' title='Italic text'></div>" ).prependTo( "div#toolbar" );
−
    background: url(https://i.imgur.com/qtaf1a3.png) no-repeat;
+
$( "#CB-Italic" ).click( function() {
−
}
+
wrapText( "wpTextbox1", "<i>", "</i>" );
 +
});
  
−
div#mw-panel div.portal h3#p-Categories-label {
+
$( "<div class='customButton' id='CB-Bold' style='background: url(https://i.imgur.com/lyqhAM9.png);' title='Bold text'></div>" ).prependTo( "div#toolbar" );
−
    background: url(https://i.imgur.com/Lnp5kiv.png) no-repeat;
+
$( "#CB-Bold" ).click( function() {
−
}
+
wrapText( "wpTextbox1", "<b>", "</b>" );
 +
});
  
−
div#mw-panel div#p-Management {
+
// Remove auto correct from text boxes
−
    display: none;
+
−
}
+
  
−
div#mw-panel div.portal h3#p-Management-label {
+
$( "textarea#wpTextbox1, input#searchInput, input#database_input" ).attr( "spellcheck", "false" );
−
    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 {
+
// ***************************** Indices *****************************
−
    background: none;
+
−
    padding: 0;
+
−
    height: initial;
+
−
}
+
  
−
div.vectorTabs ul {
+
$.each( $( "div.timestamp" ), function() {
−
    background: none;
+
var str = $( this ).html();
−
}
+
var year = str.substr( 0, 4 );
 +
var month = str.substr( 4, 2 );
 +
if ( month == 01 ) { month = " January " }
 +
else if ( month == 02 ) { month = " February " }
 +
else if ( month == 03 ) { month = " March " }
 +
else if ( month == 04 ) { month = " April " }
 +
else if ( month == 05 ) { month = " May " }
 +
else if ( month == 06 ) { month = " June " }
 +
else if ( month == 07 ) { month = " July " }
 +
else if ( month == 08 ) { month = " August " }
 +
else if ( month == 09 ) { month = " September " }
 +
else if ( month == 10 ) { month = " October " }
 +
else if ( month == 11 ) { month = " November " }
 +
else if ( month == 12 ) { month = " December " }
 +
var day = str.substr( 6, 2 );
 +
$( this ).html( "Last modified on " + day + month + year + "." );
 +
if ( str == "" ) {
 +
$( this ).html( "This page is under construction." );
 +
}
 +
});
 +
$.each( $( "div.link > a" ), function() {
 +
var link = $( this ).html().split( "/" );
 +
$( this ).html( link[ link.length - 1 ].replace( /\_/g, " " ) );
 +
});
  
−
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 {
+
// ***************************** Databases *****************************
−
    background: #transparent !important;
+
−
}
+
  
−
div.vectorMenu div.menu {
+
function commaSeparateNumber( val ){
−
    top: 40px;
+
while ( /(\d+)(\d{3})/.test( val.toString() ) ) {
−
    left: initial;
+
val = val.toString().replace( /(\d+)(\d{3})/, '$1' + '.' + '$2' );
−
    right: 0;
+
};
−
    border: none;
+
return val;
−
    background: #c7b07c;
+
};
−
}
+
  
−
div.vectorMenu div.menu li {
+
$( "button#database_button" ).click( function() {
−
    line-height: 20px;
+
searchDatabase();
−
}
+
});
  
−
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 {
+
// ***************************** Close *****************************
−
    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#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,
 
−
div#mw-panel div.portal div.body ul li a:visited,
 
−
a:visited,
 
−
.mw-body a.external,
 
−
.mw-body a.external:visited {
 
−
    color: #272525;
 
−
}
 
  
−
a:hover, a:focus, .mw-body a.external:hover {
 
−
    text-decoration: none;
 
−
    color: #5c3219;
 
−
}
 
−
div.portal h3:before,
 
−
div#searchTitle: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 {
 
−
    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;
 
−
}
 
  
−
div.editButtons span a:hover, div.editButtons input[type="submit"]:hover {
 
−
    background-color: #bca674;
 
−
    color: #593018;
 
−
}
 
  
−
a#mw-editform-cancel:hover {
 
−
    background-color: #bca674;
 
−
}
 
  
 +
// Remove the loader
  
−
 
+
setTimeout( function() {
−
/* New Site Design */
+
$( "div#mw-head-base" ).fadeOut( 500 );
−
 
+
$( "div#mw-page-base" ).fadeOut( 500 );
−
/* Base Classes */
+
}, 600 );
−
 
+
−
div,
+
−
table,
+
−
tr,
+
−
th,
+
−
td,
+
−
figure,
+
−
th,
+
−
video,
+
−
audio,
+
−
h1,
+
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6,
+
−
aside,
+
−
canvas,
+
−
section,
+
−
header,
+
−
footer,
+
−
nav,
+
−
span,
+
−
p,
+
−
small,
+
−
big,
+
−
a,
+
−
b,
+
−
strong,
+
−
img,
+
−
hr,
+
−
pre,
+
−
button,
+
−
input,
+
−
textarea,
+
−
optgroup,
+
−
ul,
+
−
li,
+
−
ol,
+
−
select,
+
−
option,
+
−
blockquote,
+
−
nav {
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    outline: none;
+
−
    border: none;
+
−
    text-decoration: none;
+
−
    list-style-type: none
+
−
}
+
−
 
+
−
ul {
+
−
    margin-bottom: 0
+
−
}
+
−
 
+
−
.dFlx {
+
−
    display: -webkit-box;
+
−
    display: -moz-box;
+
−
    display: -ms-flexbox;
+
−
    display: -webkit-flex;
+
−
    display: flex
+
−
}
+
−
 
+
−
.u_w_100 {
+
−
    width:100%;
+
−
}
+
−
 
+
−
/* Header */
+
−
 
+
−
.container {
+
−
    max-width: 1600px;
+
−
    margin: auto
+
−
}
+
−
 
+
−
header {
+
−
    position: relative;
+
−
    width: 100%
+
−
}
+
−
 
+
−
.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;
+
−
    display:inline-flex;
+
−
}
+
−
 
+
−
.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;
+
−
    display: inline-flex;
+
−
}
+
−
 
+
−
.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;
+
−
    padding: 2px;
+
−
}
+
−
 
+
−
.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: 5.75%;
+
−
    position: relative;
+
−
    display:inline-flex;
+
−
}
+
−
 
+
−
.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(https://www.grinderscape.org/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
+
−
}
+
−
 
+
−
/* Body */
+
−
 
+
−
#main-wrapper {
+
−
    overflow: hidden
+
−
}
+
−
 
+
−
#main-wrapper .container {
+
−
    position: relative;
+
−
    padding: 0 20px;
+
−
    box-sizing: border-box
+
−
}
+
−
 
+
−
#main-wrapper .container::before {
+
−
    position: absolute;
+
−
    content: '';
+
−
    background: url(https://www.grinderscape.org/images/left-sidebar.png);
+
−
    background-repeat: repeat-y;
+
−
    width: 110px;
+
−
    height: 100%;
+
−
    left: -60px;
+
−
    z-index: 99;
+
−
    top: 0;
+
−
    background-size: 100%
+
−
}
+
−
 
+
−
#main-wrapper .container::after {
+
−
    position: absolute;
+
−
    content: '';
+
−
    background: url(https://www.grinderscape.org/images/right-sidebar.png);
+
−
    background-repeat: repeat-y;
+
−
    width: 110px;
+
−
    height: 100%;
+
−
    right: -60px;
+
−
    z-index: 99;
+
−
    top: 0;
+
−
    background-size: 100%
+
−
}
+
−
 
+
−
.main-top-cstm {
+
−
    background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y;
+
−
    background-size: 100%;
+
−
    background-color: #9f895a;
+
−
    padding: 0 70px;
+
−
}
+
−
 
+
−
.main-content-cstm {
+
−
    box-sizing: border-box;
+
−
    padding: 42px 40px;
+
−
    padding-bottom: 30px;
+
−
    box-sizing: border-box;
+
−
    background: #ab915a;
+
−
    background: linear-gradient(180deg, rgba(171, 145, 90, 0.28335084033613445) 0%, rgba(171, 145, 90, 0) 95%)
+
−
}
+
−
 
+
−
#content-sidebar-wrap {
+
−
    display: -webkit-box;
+
−
    display: -moz-box;
+
−
    display: -webkit-flex;
+
−
    display: -ms-flexbox;
+
−
    display: flex;
+
−
    justify-content: space-between;
+
−
    position: relative;
+
−
    background: url(https://www.grinderscape.org/images/middle-cover-bg.png) repeat-y;
+
−
    background-size: 100%;
+
−
    padding: 65px 35px;
+
−
    padding-bottom: 5px;
+
−
    box-sizing: border-box
+
−
}
+
−
 
+
−
#content-sidebar-wrap::before {
+
−
    content: '';
+
−
    position: absolute;
+
−
    background: url(https://www.grinderscape.org/images/middle-cover-top-bg.png) repeat-x;
+
−
    height: 7px;
+
−
    bottom: -6px;
+
−
    width: 100%;
+
−
    left: 0;
+
−
    top: -4px
+
−
}
+
−
 
+
−
#content-sidebar-wrap::after {
+
−
    content: '';
+
−
    position: absolute;
+
−
    background: url(https://www.grinderscape.org/images/middle-cover-foot-bg.png) repeat-x;
+
−
    height: 7px;
+
−
    width: 100%;
+
−
    left: 0;
+
−
    bottom: -6px
+
−
}
+
−
 
+
−
#content-sidebar-wrap::before {
+
−
    box-sizing: border-box
+
−
}
+
−
 
+
−
/* Footer */
+
−
 
+
−
footer {
+
−
    position: relative;
+
−
    padding: 25px 25px 30px;
+
−
    box-sizing: border-box;
+
−
    background: #282013;
+
−
    background: linear-gradient(180deg, rgba(40, 32, 19, 0.8267506831834296) 0%, rgba(39, 31, 16, 0.6754901789817489) 7%, rgba(36, 27, 9, 1) 25%, rgba(30, 21, 4, 1) 50%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 100%);
+
−
    background: url(https://grinderscape.org/images/total-futr.png) no-repeat;
+
−
    background-position: 100% 50%;
+
−
    background-size: cover
+
−
}
+
−
 
+
−
footer::after {}
+
−
 
+
−
.footer-top {
+
−
    border-bottom: 1px solid #140e01;
+
−
    position: relative;
+
−
    z-index: 9;
+
−
    justify-content: space-between;
+
−
    padding-bottom: 40px;
+
−
    padding-top: 30px;
+
−
    max-width: 82%;
+
−
    margin: auto
+
−
}
+
−
 
+
−
.footer-top .cw-30 {
+
−
    width: 29%
+
−
}
+
−
 
+
−
.footer-top .cw-70 {
+
−
    width: 65%
+
−
}
+
−
 
+
−
.footer-top .cw-70 .cw-33 {
+
−
    width: 31%;
+
−
    margin-right: 4%
+
−
}
+
−
 
+
−
.footer-top .cw-70 .cw-33:last-child {
+
−
    margin-right: 0
+
−
}
+
−
 
+
−
.footer-top li {
+
−
    display:flex;
+
−
}
+
−
 
+
−
.footer-top li a,
+
−
.footer-top p {
+
−
    color: #f6e6c2;
+
−
    font-family: pt sans caption, sans-serif;
+
−
    font-weight: 400;
+
−
    font-size: 15px;
+
−
}
+
−
 
+
−
.footer-top li a:hover {
+
−
    color: #fe9826
+
−
}
+
−
 
+
−
.footer-top p {
+
−
    line-height: 1.7
+
−
}
+
−
 
+
−
.footer-top li a {
+
−
    line-height: 1.9
+
−
}
+
−
 
+
−
.footer-top h5 {
+
−
    font-family: pt sans caption, sans-serif;
+
−
    font-weight: 700;
+
−
    color: #fff;
+
−
    font-size: 20px;
+
−
    position: relative;
+
−
    margin-bottom: 26px
+
−
}
+
−
 
+
−
.footer-top h5::before {
+
−
    content: '';
+
−
    position: absolute;
+
−
    height: 3px;
+
−
    background: #fff;
+
−
    width: 30px;
+
−
    top: -14px
+
−
}
+
−
 
+
−
.footer-btm {
+
−
    width: 100%;
+
−
    box-sizing: border-box;
+
−
    flex-flow: column;
+
−
    justify-content: center;
+
−
    position: relative;
+
−
    z-index: 9;
+
−
    padding: 50px 0 0
+
−
}
+
−
 
+
−
.footer-btm .footer-logo {
+
−
    width: 63px;
+
−
    margin: auto;
+
−
    margin-bottom: 40px
+
−
}
+
−
 
+
−
.footer-btm p {
+
−
    text-align: center;
+
−
    color: #fff
+
−
}
+
−
 
+
−
/* END MAIN */
+
−
 
+
−
 
+
−
 
+
−
/* 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-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(../resources/fonts/fa-brands-400.eot);
+
−
    src: url(../resources/fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-brands-400.woff2) format("woff2"), url(../resources/fonts/fa-brands-400.woff) format("woff")
+
−
}
+
−
 
+
−
.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(../resources/fonts/fa-regular-400.eot);
+
−
    src: url(../resources/fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-regular-400.woff2) format("woff2"), url(../resources/fonts/fa-regular-400.woff) format("woff")
+
−
}
+
−
 
+
−
.fab,
+
−
.far {
+
−
    font-weight: 400
+
−
}
+
−
 
+
−
@font-face {
+
−
    font-family: "Font Awesome 5 Free";
+
−
    font-style: normal;
+
−
    font-weight: 900;
+
−
    font-display: block;
+
−
    src: url(../resources/fonts/fa-solid-900.eot);
+
−
    src: url(../resources/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../resources/fonts/fa-solid-900.woff2) format("woff2"), url(../resources/fonts/fa-solid-900.woff) format("woff")
+
−
}
+
−
 
+
−
.fa,
+
−
.far,
+
−
.fas {
+
−
    font-family: "Font Awesome 5 Free"
+
−
}
+
−
 
+
−
.fa,
+
−
.fas {
+
−
    font-weight: 900
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* MOBILE */
+
−
@media(max-width:1680px) {
+
−
    body {
+
−
        font-size: 16px
+
−
    }
+
−
 
+
−
    .container {
+
−
        max-width: 1370px
+
−
    }
+
−
 
+
−
    .header-top .logo, .header-top .logo img {
+
−
        max-width: 330px;
+
−
        width: 330px
+
−
    }
+
−
 
+
−
    .header-top {
+
−
        padding: 11px 0 9px
+
−
    }
+
−
 
+
−
    .header-bottm {
+
−
        padding: 24px 0
+
−
    }
+
−
 
+
−
    .header-bottm ul li a {
+
−
        font-size: 16px
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav li {
+
−
        margin-right: 5.44%;
+
−
        position: relative
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:1440px) {
+
−
    body {
+
−
        font-size: 14px
+
−
    }
+
−
 
+
−
    .container {
+
−
        max-width: 1200px
+
−
    }
+
−
 
+
−
    .header-bottm ul li::after {
+
−
        right: -35px;
+
−
    }
+
−
 
+
−
    .header-top .logo, .header-top .logo img {
+
−
        max-width: 310px;
+
−
        width: 310px
+
−
    }
+
−
 
+
−
    .header-top {
+
−
        padding: 9px 0;
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav li {
+
−
        margin-right: 4.9%
+
−
    }
+
−
 
+
−
    .header-bottm ul li a {
+
−
        font-size: 15px
+
−
    }
+
−
 
+
−
    .header-bottm {
+
−
        padding: 20px 0
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:1200px) {
+
−
    .container {
+
−
        max-width: 96%
+
−
    }
+
−
 
+
−
    .header-top {
+
−
        padding: 7px 0;
+
−
    }
+
−
 
+
−
    .header-top .logo, .header-top .logo img {
+
−
        max-width: 285px;
+
−
        width: 285px
+
−
    }
+
−
 
+
−
    .header-bottm ul li a {
+
−
        font-size: 14px
+
−
    }
+
−
 
+
−
    .login a {
+
−
        font-size: 14px
+
−
    }
+
−
 
+
−
    .header-bottm {
+
−
        padding: 14px 0
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav li {
+
−
        margin-right: 4.8%
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:1080px) {
+
−
    .header-bottm .main-nav li {
+
−
        margin-right: 4.5%
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:1024px) {
+
−
 
+
−
   
+
−
    .mobile-menu {
+
−
        width: 40px;
+
−
        height: 38px;
+
−
        position: relative;
+
−
        float: right;
+
−
        -webkit-transform: rotate(0deg);
+
−
        -moz-transform: rotate(0deg);
+
−
        -o-transform: rotate(0deg);
+
−
        transform: rotate(0deg);
+
−
        -webkit-transition: .5s ease-in-out;
+
−
        -moz-transition: .5s ease-in-out;
+
−
        -o-transition: .5s ease-in-out;
+
−
        transition: .5s ease-in-out;
+
−
        cursor: pointer;
+
−
        overflow: hidden
+
−
    }
+
−
 
+
−
    .mobile-menu span {
+
−
        display: block;
+
−
        position: absolute;
+
−
        height: 5px;
+
−
        width: 100%;
+
−
        background: #fff;
+
−
        border-radius: 9px;
+
−
        opacity: 1;
+
−
        left: 0;
+
−
        -webkit-transform: rotate(0deg);
+
−
        -moz-transform: rotate(0deg);
+
−
        -o-transform: rotate(0deg);
+
−
        transform: rotate(0deg);
+
−
        -webkit-transition: .25s ease-in-out;
+
−
        -moz-transition: .25s ease-in-out;
+
−
        -o-transition: .25s ease-in-out;
+
−
        transition: .25s ease-in-out
+
−
    }
+
−
 
+
−
    .mobile-menu span:nth-child(1) {
+
−
        top: 0
+
−
    }
+
−
 
+
−
    .mobile-menu span:nth-child(2) {
+
−
        top: 11px
+
−
    }
+
−
 
+
−
    .mobile-menu span:nth-child(3) {
+
−
        top: 22px
+
−
    }
+
−
 
+
−
    .mobile-menu.open span:nth-child(1) {
+
−
        top: 18px;
+
−
        -webkit-transform: rotate(135deg);
+
−
        -moz-transform: rotate(135deg);
+
−
        -o-transform: rotate(135deg);
+
−
        transform: rotate(135deg)
+
−
    }
+
−
 
+
−
    .mobile-menu.open span:nth-child(2) {
+
−
        opacity: 0;
+
−
        left: -60px
+
−
    }
+
−
 
+
−
    .mobile-menu.open span:nth-child(3) {
+
−
        top: 18px;
+
−
        -webkit-transform: rotate(-135deg);
+
−
        -moz-transform: rotate(-135deg);
+
−
        -o-transform: rotate(-135deg);
+
−
        transform: rotate(-135deg)
+
−
    }
+
−
 
+
−
    ul.main-menu {
+
−
        display: none
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav {
+
−
        flex-flow: column
+
−
    }
+
−
 
+
−
    .header-bottm .container {
+
−
        position: relative
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav {
+
−
        opacity: 0
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav {
+
−
        position: absolute;
+
−
        z-index: 999;
+
−
        width: 100%;
+
−
        top: 42px;
+
−
        left: -100%;
+
−
        -webkit-transition: all .4s ease-in-out;
+
−
        -o-transition: all .4s ease-in-out;
+
−
        transition: all .4s ease-in-out;
+
−
        -moz-transition: all .4s ease-in-out;
+
−
        -ms-transition: all .4s ease-in-out
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav.side-open {
+
−
        left: 0;
+
−
        display: block;
+
−
        opacity: 1;
+
−
        height: 100vh;
+
−
        background: #5a2f02;
+
−
        z-index: 999;
+
−
        margin-top: 1em;
+
−
    }
+
−
 
+
−
    .header-bottm .container .mobile-menu {
+
−
        position: absolute;
+
−
        right: 0
+
−
    }
+
−
 
+
−
    .header-bottm ul li::after {
+
−
        content: '';
+
−
        background: 0 0;
+
−
        width: 0;
+
−
        height: 0;
+
−
        right: 0
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav li {
+
−
        margin-right: 0;
+
−
        display:block;
+
−
    }
+
−
 
+
−
    .header-bottm .main-nav li:nth-child(4) {
+
−
        margin-right: 0
+
−
    }
+
−
 
+
−
    .header-bottm ul li a {
+
−
        padding: 1em;
+
−
        display: block;
+
−
        text-align: center;
+
−
        background-color: #5a2f02;
+
−
        border-bottom: 1px solid #222;
+
−
        font-size: 1.5em;
+
−
    }
+
−
 
+
−
    .header-bottm {
+
−
        padding: 10px 0;
+
−
        min-height: 50px
+
−
    }
+
−
 
+
−
    .middle-bx-middle .img-wrp {
+
−
        padding-bottom: 30px;
+
−
        max-width: 70%;
+
−
        margin: auto
+
−
    }
+
−
 
+
−
    .container {
+
−
        max-width: 96%
+
−
    }
+
−
 
+
−
   
+
−
}
+
−
 
+
−
@media(max-width:768px) {
+
−
    .mobile-menu span {
+
−
        height: 3px
+
−
    }
+
−
 
+
−
    .mobile-menu span:nth-child(2) {
+
−
        top: 10px
+
−
    }
+
−
 
+
−
    .mobile-menu span:nth-child(3) {
+
−
        top: 21px
+
−
    }
+
−
 
+
−
    .mobile-menu.open span:nth-child(1) {
+
−
        top: 16px
+
−
    }
+
−
 
+
−
    .mobile-menu.open span:nth-child(3) {
+
−
        top: 16px
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:680px) {
+
−
    .header-top .logo, .header-top .logo img {
+
−
        max-width: 240px;
+
−
        width: 240px
+
−
    }
+
−
    .header-top {
+
−
        padding: 7px 0 1px
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:480px) {
+
−
    .header-top .logo {
+
−
        display: none
+
−
    }
+
−
 
+
−
    .header-top .mobile-logo, .header-top .mobile-logo img {
+
−
        display: block;
+
−
        position: absolute;
+
−
        top: 0;
+
−
        right: 0;
+
−
        left: 0;
+
−
        margin: auto;
+
−
        z-index: 99;
+
−
        max-width: 180px;
+
−
        width: 180px
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:414px) {
+
−
    .header-top .mobile-logo, .header-top .mobile-logo img {
+
−
        max-width: 160px;
+
−
        width: 160px
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:380px) {
+
−
    .header-top .mobile-logo, .header-top .mobile-logo img {
+
−
        max-width: 152px;
+
−
        width: 152px
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:375px) {
+
−
    .header-top .container {
+
−
        justify-content: space-between;
+
−
        max-width: 98%
+
−
    }
+
−
}
+
−
 
+
−
@media(max-width:320px) {
+
−
    .header-top .mobile-logo, .header-top .mobile-logo img {
+
−
        max-width: 120px;
+
−
        width: 120px
+
−
    }
+
−
}
+
−
/* END MOBILE */
+
−
 
+
−
/* END NEW DESIGN CSS */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
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;
+
−
}
+
−
 
+
−
#index li div.img img {
+
−
    max-height: 40px;
+
−
    max-width: 40px;
+
−
}
+
−
 
+
−
/* New #index */
+
−
 
+
−
 
+
−
 
+
−
#index {
+
−
    margin-left: 0;
+
−
}
+
−
 
+
−
#index .homepage-list {
+
−
    display: flex;
+
−
    padding: 10px;
+
−
}
+
−
 
+
−
#index .homepage-list:not(:last-child) {
+
−
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
−
}
+
−
 
+
−
#index .img img {
+
−
    max-height: 40px;
+
−
    max-width: 40px;
+
−
}
+
−
 
+
−
.homepage-list:hover {
+
−
    background-color: rgba(0,0,0,0.1);
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* 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 {
+
−
    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;
+
−
}
+
−
 
+
−
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;
+
−
    border-color: #5c3219;
+
−
}
+
−
 
+
−
::-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: #272525 !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 #272525 !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: #272525 !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;
+
−
}
+
−
 
+
−
.bgLight {
+
−
    background-color: rgba(247,219,166,.2);
+
−
}
+
−
 
+
−
/*HOMEPAGE*/
+
−
 
+
−
.gs-flex {
+
−
    display:flex;
+
−
    flex-flow:row wrap;
+
−
    margin-bottom: 20px;
+
−
}
+
−
 
+
−
.tile-half:not(:last-child) {
+
−
    margin-right: 9px;
+
−
}
+
−
 
+
−
.tile-half {
+
−
    flex: 1;
+
−
}
+
−
 
+
−
.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: rgba(247,219,166,.2);
+
−
    padding: 12px 10px;
+
−
    border-bottom-left-radius: 5px;
+
−
    border-bottom-right-radius: 5px;
+
−
    align-self: end;
+
−
    min-height: 5vw;
+
−
    border: 1px solid #bda062;
+
−
}
+
−
 
+
−
.tile-date {
+
−
    margin: 0 !important;
+
−
    font-size: 0.8em !important;
+
−
    color: #999 !important;
+
−
    line-height: 14px !important;
+
−
 
+
−
}
+
−
 
+
−
.tile-title {
+
−
    margin-bottom: 5px;
+
−
    font-size: 1.4em;
+
−
    color: #272525;
+
−
}
+
−
 
+
−
.tile-info {
+
−
    line-height: 1.4em;
+
−
    color: #272525;
+
−
}
+
−
 
+
−
.click-to-view {
+
−
    font-size: 0.85em;
+
−
    color: #e01818;
+
−
}
+
−
 
+
−
.tile-half:hover>.tile-bottom {
+
−
    background-color: #e8dcbe;
+
−
}
+
−
 
+
−
.mainpage-left {
+
−
    flex: 2;
+
−
    display: flex;
+
−
    flex-flow: column wrap;
+
−
    margin-right: 0.9rem;
+
−
}
+
−
 
+
−
.mainpage-right {
+
−
    flex: 1;
+
−
    display: flex;
+
−
    flex-flow: column wrap;
+
−
}
+
−
 
+
−
.mainpage-social {
+
−
    margin-bottom: 20px;
+
−
}
+
−
 
+
−
.mainpage-social .social-tile {
+
−
    display: flex;
+
−
    align-items: center;
+
−
    background: #7289da;
+
−
    padding: 1em 1.75em;
+
−
}
+
−
 
+
−
.mainpage-social .fa-social-icon {
+
−
    color: #fff;
+
−
    font-size: 40px;
+
−
    margin-right: 15px;
+
−
}
+
−
 
+
−
.mainpage-social .server-name {
+
−
    color: #ffffff;
+
−
    font-weight: bold;
+
−
    font-size: 1.25em;
+
−
    margin: 0.5em 0 -0.15em;
+
−
}
+
−
 
+
−
.mainpage-social .server-tagline {
+
−
    color: rgba(255,255,255,0.9);
+
−
    margin: 0.5em 0;
+
−
}
+
−
 
+
−
.mainpage-social .social-tile-bottom {
+
−
    background: #697ec4;
+
−
    border: none;
+
−
    padding: 1em 1.75em;
+
−
}
+
−
 
+
−
.mainpage-social .social-tile-bottom p {
+
−
    color: #ffffff;
+
−
    font-weight: bold;
+
−
    font-size: 0.9em;
+
−
    text-align: center;
+
−
    text-transform: uppercase;
+
−
    letter-spacing: 0.03em;
+
−
    margin: 0;
+
−
}
+
−
 
+
−
/* Social Specific Styles */
+
−
 
+
−
.mainpage-social .discord-tile {
+
−
    background: #7289da;
+
−
}
+
−
 
+
−
.mainpage-social .discord-tile-bottom {
+
−
    background: #697ec4;
+
−
}
+
−
 
+
−
.mainpage-social .youtube-tile {
+
−
    background: #FF0000;
+
−
}
+
−
 
+
−
.mainpage-social .youtube-tile-bottom {
+
−
    background: #282828;
+
−
}
+
−
 
+
−
.mainpage-social .facebook-tile {
+
−
    background: #4267B2;
+
−
}
+
−
 
+
−
.mainpage-social .facebook-tile-bottom {
+
−
    background: #282828;
+
−
}
+
−
 
+
−
 
+
−
.hp_categories {
+
−
    margin-bottom: 20px;
+
−
    padding: 20px;
+
−
    border-radius: 3px;
+
−
    border: 1px solid #bda062;
+
−
}
+
−
 
+
−
/* 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;
+
−
    }
+
−
 
+
−
    .main-categories .tile-half {
+
−
        margin-right: 9px;
+
−
        margin-bottom: 20px;
+
−
        flex: 30%;
+
−
    }
+
−
 
+
−
    .main-categories .tile-top {
+
−
        margin: 10% 5% 20%;
+
−
    }
+
−
 
+
−
    .tile-top {
+
−
        height: 20vw;
+
−
        max-height: 20em;
+
−
    }
+
−
}
+
−
 
+
−
@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 */
+

Revision as of 08:19, 29 December 2020

// ***************************** Structure *****************************

// Remove unnecessary elements

$( "div#p-tb" ).remove();

// Wrap the content

$( "div#content, div#mw-navigation" ).wrapAll( "<div id='wrap'></div>" );

// Insert the header

$( "<header><div id='logo'><a href='https://www.grinderscape.org/'><img src='https://www.grinderscape.org/assets/images/logo.png' draggable='false'></a></div><nav><ul><li id='n-Home'><a href='https://www.grinderscape.org/'>Home</a></li><li id='n-Forums'><a href='http://forum.grinderscape.org/'>Forums</a></li><li id='n-Wiki'><a href='/Main_page'>Wiki</a></li><li id='n-Vote'><a href='https://www.grinderscape.org/vote/status'>Vote</a></li><li id='n-Donate'><a href='https://www.grinderscape.org/donate'>Donate</a></li><li id='n-Highscores'><a href='https://www.grinderscape.org/highscores/mode/regular'>Highscores</a></li><li id='n-Download'><a href='https://www.grinderscape.org/download'>Download</a></li></ul></nav></header>" ).insertBefore( "div#wrap" );

// Insert the footer

$( "<div id='customFooter'><div style='margin-bottom: 30px; line-height: 0;'><a href='https://www.facebook.com/Grinderscape.org' style='background: url(https://i.imgur.com/DeOQfOs.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #3a589e; border: 1px solid #17274D;'></a><a href='https://twitter.com/grinderscape' style='background: url(https://i.imgur.com/GZzo3yV.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #3A89C4; border: 1px solid #0E3959;'></a><a href='https://www.youtube.com/user/dokenfilm' style='background: url(https://i.imgur.com/wF3Xf61.png) no-repeat center, linear-gradient( transparent,rgba(0, 0, 0, 0.15)), #C8312B; border: 1px solid #78130F;'></a></div><p style='margin-bottom: 0;'>Theme developed by Jplayer.<br>GrinderScape is not affiliated with Jagex or RuneScape in any way.</p></div>" ).insertBefore( "ul#footer-places" );

// Organize the elements

$( "div#mw-navigation" ).insertBefore( "div#content" );
$( "div#content" ).wrap( "<div id='content-sidebar-wrap'></div>" );
$( "div#mw-panel" ).insertAfter( "div#content" );
$( "div#content" ).wrap( "<div id='content-wrap'></div>" );

$( "<div id='navigation'></div>" ).prependTo( "div#content" );
$( "div#left-navigation" ).appendTo( "div#navigation" );
$( "div#right-navigation" ).appendTo( "div#navigation" );

$( "<div id='pageInfo'></div>" ).insertBefore( "div#content" );

$( "div#content" ).wrap( "<div id='content-navigation-wrap'></div>" );
$( "div#siteNotice" ).insertAfter( "div#mw-navigation" );
$( "ul#footer-info" ).insertAfter( "div#content" );

// Set up the page footer info

if ( $( "li#footer-info-credits" ).length > 0 ) {
	$( "li#footer-info-credits" ).html( $( "li#footer-info-credits" ).html().replace( /\[/g, "<span style='position: absolute; right: 0;'>" ).replace( /\]/g, "</span>" ).replace( /\{/g, "<p id='contentFooter' style='position: relative;'>" ).replace( /\}/g, "</p>" ) );
	$( "p#contentFooter" ).insertBefore( "li#footer-info-credits" );
	$( "li#footer-info-credits" ).remove();
}

// Set up the page title and breadcrumb

var title = $( "h1#firstHeading" ).html().split('/');
$( "h1#firstHeading" ).html( title[ title.length - 1 ] );
$( "h1#firstHeading" ).appendTo( "div#pageInfo" );

$( "span.subpages" ).appendTo( "div#pageInfo" );
$( "span.subpages" ).html( $( "span.subpages" ).children() );
$( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
$( "<span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>" ).insertAfter( "span.subpages > a" );

// Set up the page title

document.title = title[ title.length - 1 ] + " - GrinderScape Wiki";

// Set up the announcement

$( "<div id='noticeTitle'>Notice</div>" ).prependTo( "div#siteNotice" );

// Remove href from selected tabs

$.each( $( "div.vectorTabs li.selected" ), function() {
	$( this ).find( "a" ).removeAttr( "href" );
});

// Remove title from links

$( "a" ).removeAttr( "title" );

// Set up the search box

$( "div#p-search" ).prependTo( "div#mw-panel" );
$( "<div id='searchTitle'>Search</div>" ).insertBefore( "form#searchform" );
$( "input#searchInput" ).val( "Search..." ).removeAttr( "placeholder" ).attr( "onfocus", "if (this.value == 'Search...') {this.value = '';}" ).attr( "onblur", "if (this.value == '') {this.value = 'Search...';}" );

// Set up the edit box

function wrapText( elementID, openTag, closeTag ) {
	var textArea = $( "#" + elementID );
	var len = textArea.val().length;
	var start = textArea[0].selectionStart;
	var end = textArea[0].selectionEnd;
	var selectedText = textArea.val().substring( start, end );
	var replacement = openTag + selectedText + closeTag;
	textArea.val( textArea.val().substring( 0, start ) + replacement + textArea.val().substring( end, len ) );
}

$( "input#wpWatchthis" ).prop( "checked", false );

$( "<div class='customButton' id='CB-Nowiki' style='background: url(https://i.imgur.com/Fx2AsCt.png);' title='Ignore wiki formatting'></div>" ).appendTo( "div#toolbar" );
$( "#CB-Nowiki" ).click( function() {
	wrapText( "wpTextbox1", "<nowiki>", "</nowiki>" );
});

$( "<div class='customButton' id='CB-Heading2' style='background: url(https://i.imgur.com/8uajyYO.png);' title='Level 2 heading'></div>" ).prependTo( "div#toolbar" );
$( "#CB-Heading2" ).click( function() {
	wrapText( "wpTextbox1", "<h2>", "</h2>" );
});

$( "<div class='customButton' id='CB-Heading1' style='background: url(https://i.imgur.com/jKOOZnF.png);' title='Level 1 heading'></div>" ).prependTo( "div#toolbar" );
$( "#CB-Heading1" ).click( function() {
	wrapText( "wpTextbox1", "<h1>", "</h1>" );
});

$( "<div class='customButton' id='CB-Italic' style='background: url(https://i.imgur.com/zdPfv0X.png);' title='Italic text'></div>" ).prependTo( "div#toolbar" );
$( "#CB-Italic" ).click( function() {
	wrapText( "wpTextbox1", "<i>", "</i>" );
});

$( "<div class='customButton' id='CB-Bold' style='background: url(https://i.imgur.com/lyqhAM9.png);' title='Bold text'></div>" ).prependTo( "div#toolbar" );
$( "#CB-Bold" ).click( function() {
	wrapText( "wpTextbox1", "<b>", "</b>" );
});

// Remove auto correct from text boxes

$( "textarea#wpTextbox1, input#searchInput, input#database_input" ).attr( "spellcheck", "false" );










// ***************************** Indices *****************************

$.each( $( "div.timestamp" ), function() {
	var str = $( this ).html();
	var year = str.substr( 0, 4 );
	var month = str.substr( 4, 2 );
		if ( month == 01 ) { month = " January " }
		else if ( month == 02 ) { month = " February " }
		else if ( month == 03 ) { month = " March " }
		else if ( month == 04 ) { month = " April " }
		else if ( month == 05 ) { month = " May " }
		else if ( month == 06 ) { month = " June " }
		else if ( month == 07 ) { month = " July " }
		else if ( month == 08 ) { month = " August " }
		else if ( month == 09 ) { month = " September " }
		else if ( month == 10 ) { month = " October " }
		else if ( month == 11 ) { month = " November " }
		else if ( month == 12 ) { month = " December " }
	var day = str.substr( 6, 2 );
	$( this ).html( "Last modified on " + day + month + year + "." );
	if ( str == "" ) {
		$( this ).html( "This page is under construction." );
	}
});
$.each( $( "div.link > a" ), function() {
	var link = $( this ).html().split( "/" );
	$( this ).html( link[ link.length - 1 ].replace( /\_/g, " " ) );
});









// ***************************** Databases *****************************

function commaSeparateNumber( val ){
	while ( /(\d+)(\d{3})/.test( val.toString() ) ) {
		val = val.toString().replace( /(\d+)(\d{3})/, '$1' + '.' + '$2' );
	};
	return val;
};

$( "button#database_button" ).click( function() {
	searchDatabase();
});








// ***************************** Close *****************************










// Remove the loader

setTimeout( function() {
	$( "div#mw-head-base" ).fadeOut( 500 );
	$( "div#mw-page-base" ).fadeOut( 500 );
}, 600 );
Retrieved from "https://wiki.grinderscape.org/index.php?title=MediaWiki:Common.js&oldid=10173"