/*This is the base for custom Splatnet CSS. Make sure to read the tutorial!*/



/* onionring.js is made up of four files - onionring-widget.js, onionring-index.js, onionring-variables.js and onionring.css (this one!)
// it's licensed under the cooperative non-violent license (CNPL) v4+ (https://thufie.lain.haus/NPL.html)
// it was originally made by joey + mord of allium (蒜) house, last updated 2020-10-24 */

/* === ONIONRING.CSS === */
/* this file affects the style of the widget. remember to replace all instances of #webringid with whatever value you have for ringID in the onionring-widget.js file. make sure it still has the # at the front, though! probably easiest to use find+replace to do it */

#Splatnet table {
  background-image: url("https://boothworldindustries.neocities.org/WR/Splatnet/Styles/SquidSisPattern.jpg"); /*CHANGE BACKGROUND COLOR*/
  background-size: cover;
  margin: 0; /* Centers the widget */
  width: 200px; /*CHANGE WIDTH OF WIDGET*/
  height: 200px; /*CHANGE HEIGHT OF WIDGET*/
  border: 3px outset black; /*EDIT BORDER STYLE*/
}


/*THIS BELOW HERE IS CODE FOR USING A CUSTOM IMAGE INSTEAD OF A SQAURE! LISTEN CAREFULLY:
1. Delete the entire above code (All of "#Splatnet table)"
2. Delete the first two and last two characters of the above code. All this greyed out code is invisible code the CSS isn't acknowledging. By deleting the slash and the dot you're making it visible to it!
3. Read "CUSTOM BG INSTRUCTIONS"*/

/*#Splatnet table {
  background-image: url("");
  background-size: 255px 270px;
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 255px;
  height: 260px;
}*/

/*CUSTOM BG INSTRUCTIONS:
background image: Put URL of background here
background-size: Edit width and height of background. First is width, second is height!
background-repeat/margin: Don't mess with this
width: Change width of whole widget
height: Change height of whole widget*/

#rightarrow{
height: 20px; /*< CHANGE ARROW HEIGHT!*/
width: 20px; /*< CHANGE ARROW WIDTH!*/
content: url("https://boothworldindustries.neocities.org/WR/Splatnet/Styles/BlackRight.png");
}

#leftarrow{
height: 20px; /*< CHANGE ARROW HEIGHT!*/
width: 20px; /*< CHANGE ARROW WIDTH!*/
content: url("https://boothworldindustries.neocities.org/WR/Splatnet/Styles/BlackLeft.png")
}

#chibi {
 height: 30px; /*< CHANGE HEIGHT!*/
 width: 40px; /*< CHANGE WIDTH!*/
content: url("https://boothworldindustries.neocities.org/WR/Splatnet/Styles/SquidSistersSymbol.png")
}

#chara {
 height: 180px; /*< CHANGE HEIGHT!*/
 width: 180px; /*< CHANGE WIDTH!*/
content: url("https://boothworldindustries.neocities.org/WR/Splatnet/Styles/SquidSisters.png")
}

#splatlogo {
 height: 25px; /*< CHANGE HEIGHT!*/
 width: 95px; /*< CHANGE WIDTH!*/
/*content: url("YOURSPLATNETLOGO")*/
}



/*BE CAREFUL EDITING THESE!*/
#Splatnet table tr td {
  padding: 13px; /* Creates some space between the links and text inside the widget */
}

#Splatnet {
  margin: 0;
  padding: 10px; /* creates some space around the widget */
}

#Splatnet .webring-prev {
  text-align:right;
}

#Splatnet .webring-info {
   text-align:center;
}

#Splatnet .webring-links {
  font-size:small;
  color: white;
}

#Splatnet .webring-next {
  text-align:right;
}

#Splatnet .webring-prev {
  text-align:left;
}