<body id="riverstyx">
<header>
<div id="bannerimg">
<div class="headtxt">
<span>There is a <b>radio tower</b> in the middle of Hell.</span>
<span>There is a great, <b>all seeing eye</b> in a dollar bill.</span>
<span>There is an imposter, a <b>shapeshifter</b> wearing human skin.</span>
<span>There is a dead body hanging from the rope of an <b>arbiter</b>.</span>
<span>There is a <b>messenger</b> delivering how you died once.</span>
</div>
</div>
<div class="nows-bannertxt">
<h3>the Darkworld beckons to you on</h3>
<h1>WALKER<br>STREET,</h1>
<div class="reply">
<h3>will you heed the call? </h3>
<ul>
<li><a>login</a></li>
<li>/</li>
<li><a>register</a></li>
</ul>
</div>
</div>
<div class="end-rip"></div>
</header>
<div id="nows-table" class="header-table">
<div class="infotable">
<section id="table-leftcontent">
<ul id="infotable-nav">
<li data-styx="rs-welcome" class="active"><a>welcome</a></li>
<li data-styx="rs-setting"><a>setting</a></li>
<li data-styx="rs-updates"><a>updates</a></li>
<li data-styx="rs-credits"><a>credits</a></li>
</ul>
<div id="rs-welcome" class="infotable-content active">
<section class="welcomehead">
<h3>WELCOME TO</h3>
<h2><span>G◬STIN,</span> RED HILLS, ARKANSAS, U.S.A.</h2>
</section>
<p><b>NIGHT ON WALKER STREET</b> is a M-rated, 18+ interactive survival urban horror mystery and post-by-post roleplay. Taking place in the fictional city of <b>GASTIN, U.S.A.</b>, the storyline follows the lives of several residents tormented by the ominous presence of unexplained paranormal phenomena and the threat of an impending apocalypse known only as "World's End." Players are encouraged to develop their narratives through interactions with the Darkworld, a strange space caught between this dimension and the heavenly, the fiendish, plane that follows it alongside enjoying Gastin's greater plot as it unravels.</p>
</div>
<div id="rs-setting" class="infotable-content">
setting
</div>
<div id="rs-updates" class="infotable-content">
updates
</div>
<div id="rs-credits" class="infotable-content">
credits
</div>
</section>
<section id="table-rightcontent">
<div class="quicklinks">quick links</div>
<ul>
<li>
<dl>
<dt>lore</dt>
<dd><a href="lihttp://nightonwalkerstreet.jcink.net/index.php?act=Pages&pid=1nk">norm's guide</a>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showtopic=59&view=findpost&p=104">getting started?</a>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showtopic=63&view=findpost&p=118">mechanics faq</a>
</dl>
</li>
<li>
<dl>
<dt>character creation</dt>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showtopic=43&view=findpost&p=75">how-to-apply</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showtopic=37&view=findpost&p=54">directory</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showtopic=38&view=findpost&p=57">faces</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=8">claims</a></dd>
</dl>
</li>
<li>
<dl>
<dt>roleplay jump</dt>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=32">north side</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=33">west side</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=34">east side</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=35">south side</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=37">multiverse</a></dd>
<dd><a href="http://nightonwalkerstreet.jcink.net/index.php?showforum=36">timewarp</a></dd>
</dl>
</li>
</ul>
</section>
</div>
</div>
<div id="charon">
<div id="category1-wrapper">
<div class="start-rip"></div>
<div id="category-1">
<div class="categoryheader">
<div class="category-img"></div>
<h2>Make Some Noise</h2>
</div>
<div class="board-51">
<section>
<h4><a>001. fresh blood</a></h4>
<div style="text-align: center;">Everyone was a Norm once-upon-a-time, and so our delightful narrator
plans to take you on a wild journey down Wonderland's rabbit hole. The nature of Gastin, its hidden world under the concrete jungle, revealed! Hold your applause until the end; the magic's only just begun.</div>
<center>
<div style="line-height: 45px; text-indent: 0px; padding-top: 15px;"><a href="/index.php?act=Pages&pid=9" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">RULES</a> <a href="/index.php?act=Pages&pid=1" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">IN-GAME GUIDE</a> <a href="/index.php?showtopic=36" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">FAQ</a> <a href="/index.php?showtopic=52" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">NEED HELP?</a></div>
</center>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="nows icon">
</div>
</div>
<div class="board-4">
<section>
<h4><a>002. REGISTRY</a></h4>
Please file all pending and work-in-progress summation threads within the registry.
<center>
<div style="line-height: 45px; padding-top: 15px;"><a href="/index.php?showtopic=43" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">HOW-TO-APPLY</a> <a href="/index.php?showtopic=43&view=findpost&p=75" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">SUMMATION</a> <a href="/index.php?showtopic=38" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">FACECLAIMS</a> <a href="/index.php?showforum=54" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">TEMPLATES</a> <a href="/index.php?showtopic=41" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">NOTIFICATION</a> <a href="/index.php?showtopic=39" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">SUBCLASSES</a> <a href="/index.php?showtopic=37" style="background-color: #262525; padding: 3px; font-size: 22px; color: #fff!important; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">DIRECTORY</a></div>
</center>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</li>
</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png">
</div>
</div>
<div class="board-52">
<section>
<h4><a>003. HELP DESK</a></h4>
The Help Desk handles all information pertinent to you. (Like the DMV, except navigable, and not likely to end in flames and tears.) We deal in announcements, suggestions, minor and major changes to site info, and other important minutia. We ask that our members be aware of updates, please and thank you!
<div class="reverse-help">
<div style="width: 100px; border-left: 2px solid #ca3a42; font-size: 45px; padding-left: 25px; letter-spacing: 4px; display: block; line-height: 50px; font-family: 'Playfair Display', serif; color: #262525; font-weight: bold; margin-left: 180px; margin-top: 25px;"><a href="/index.php?showforum=3" style="line-height: 50px; font-family: 'Playfair Display', serif; color: #262525; font-weight: bold; font-size: 45px;">
ANN
OUNCE
MENTS</a></div>
<div style="width: 100px; font-size: 45px; padding-left: 25px; letter-spacing: 4px; display: block; line-height: 50px; font-family: 'Playfair Display', serif; color: #262525; font-weight: bold; margin-left: 54px; text-align: left!important; margin-top: -200px; transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1);"> <a href="/index.php?showforum=9" style="line-height: 50px; font-family: 'Playfair Display', serif; color: #262525; font-weight: bold; font-size: 45px;">SUP
PORT</a></div>
</div>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-5">
<section>
<h4><a>GASTIN RECORDS</a></h4>
<div class="subforums">
<a href="/">
KIDDIE POOL
</a>
<a href="/">
MIDLIFE CRISIS
</a>
<a href="/">
OLDIES
</a>
</div>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
</div>
<div class="end-rip"></div>
</div>
<div id="category2-wrapper">
<div id="blessallyehere">
<svg width="300" height="300">
<circle cx="150" cy="150" r="115"/>
<path id="blessye" fill="transparent" d="M25,150
A100,100 0 1,1 275,150"/>
<path id="allhere" fill="transparent" d="M0,150
A100,100 0 1,0 300,150"/>
<text width="300" height="300">
<textPath xlink:href="#blessye" class="blesstxt1" fill="white">
BLESS ALL YE HERE
</textPath>
<textPath startOffset="20" xlink:href="#allhere" class="blesstxt2" fill="white">
THE WICKED & THE DIVINE
</textPath>
</text>
</svg>
<div class="blesscircle"></div>
</div>
<div id="category-2">
<div class="categoryheader">
<div class="category-img"></div>
<h2>On the Scene</h2>
</div>
<div class="board-10">
<section>
<h4><a>004. RELATIONS</a></h4>
All character-related shippers and other tools are handled within this board. Please remember that <b>we enforce using certain pre-made templates</b> and <b>kindly ask that members treat plotting as a give-and-take.</b> If another player has replied to your thread, then courteously do the same in their's.
<div style="margin-bottom: 2px; margin-top: -48px; margin-left: 101px; float: left; text-align: right; line-height: 35px;">
<a style="font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; background-color: #262525!important; padding-left: 4px; padding-right: 5px;">SUB</a>
<a style="font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; background-color: #262525!important; padding-left: 4px; padding-right: 5px;">FOR</a>
<a style="font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; background-color: #262525!important; padding-left: 4px; padding-right: 5px;">UMS</a>
<a style="background-color: #262525!important; font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; padding-left: 4px; padding-right: 5px;">INSIDE:</a>
</div>
<div style="margin-bottom: 2px; margin-top: -88px; margin-right: 9px; float: right; text-align: left; line-height: 35px;">
<a href="/index.php?showforum=13" style="font-size: 18px!important; color: #262525!important; font-weight: bold!important; letter-spacing: 2px; background-color: #fff!important; padding-left: 4px; padding-right: 5px;">WANTED</a>
<a href="/index.php?showforum=14" style="font-size: 18px!important; color: #262525!important; font-weight: bold!important; letter-spacing: 2px; background-color: #fff!important; padding-left: 4px; padding-right: 5px;">TRACKERS</a>
<a href="/index.php?showforum=15" style="font-size: 18px!important; color: #262525!important; font-weight: bold!important; letter-spacing: 2px; background-color: #fff!important; padding-left: 4px; padding-right: 5px;">GROUP PLOTTING</a>
<a href="/index.php?showforum=55" style="font-size: 18px!important; color: #262525!important; font-weight: bold!important; letter-spacing: 2px; background-color: #fff!important; padding-left: 4px; padding-right: 5px;">PLOT HOOKS</a>
</div>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="cat2-boardside"></div>
<div class="board-11">
<section>
<h4><a>005. EVOLUTION</a></h4>
For plot progression and communications in the Underground. Uniquely unseen, a blitz of garbled text messages and mechanical voices, characters may post <b>via anonymous accounts</b> to expand on the odd dimension that is Gastin, Arkansas.
<center><div style="line-height: 35px; padding-top: 15px;"><a href="/index.php?act=Pages&pid=13" style="background-color: #262525!important; padding: 3px; font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">GRAFFITTI</a> <a href="/index.php?act=Pages&pid=12" style="background-color: #262525!important; padding: 3px; font-size: 18px!important; color: #fff!important; font-weight: bold!important; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">1-800-HOTLINE</a></div>
<div style="margin-top: -57px;"> <i class="cp cp-phone" style="font-size: 105px; margin-right: 15px;"></i> <i class="cp cp-chat" style="font-size: 105px;"></i></div></center>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<h5 class="category2-deco">See, even <em>the dead</em> have friends!</h5>
</div>
</div>
<div id="category3-wrapper">
<div class="start-rip"></div>
<div id="category-3">
<div class="categoryheader">
<div class="category-img"></div>
<h2>A Disc Scratch</h2>
</div>
<div class="board-56">
<section>
<h4><a>FILE #█████: EYE IN THE SKY</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-32">
<section>
<h4><a>THE NORTH SIDE</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-33">
<section>
<h4><a>THE WEST SIDE</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-34">
<section>
<h4><a>THE EAST SIDE</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-35">
<section>
<h4><a>THE SOUTH SIDE</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
</div>
<div class="end-rip"></div>
</div>
<div id="category4-wrapper">
<div id="category-4">
<div class="categoryheader">
<div class="category-img"></div>
<h2>The Beat Back</h2>
</div>
<div class="board-37">
<section>
<h4><a>MULTIVERSE</a></h4>
At least nine-tenths of all the original reality ever created lies outside the multiverse, and since the multiverse by definition includes absolutely everything that is anything, this puts a bit of a strain on things. Outside the boundaries of the universe lie the raw realities ... — Terry Pratchett
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-36">
<section>
<h4><a>TIMEWARP</a></h4>
In Einstein's equation, time is a river. It speeds up, meanders, and slows down. The new wrinkle is that it can have whirlpools and fork into two rivers. So, if the river of time can be bent into a pretzel, create whirlpools and fork into two rivers, then time travel cannot be ruled out. — Michio Kaku
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
</div>
</div>
<div id="category5-wrapper">
<div class="start-rip"></div>
<div id="category-5">
<div class="categoryheader">
<div class="category-img"></div>
<h2>Peace Out</h2>
</div>
<div class="board-21">
<section>
<h4><a>Archives</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-40">
<section>
<h4><a>VIP Room</a></h4>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
<div class="board-39">
<section>
<h4><a>006. Advertise</a></h4>
Here we part ways with onlookers and the ones too frightened to wander into the unknown. A fond farewell from the wacky land of the Underground, and we wish you good tidings out there with the normies.
<center><div style="line-height: 35px; padding-top: 15px;"><a href="/index.php?showtopic=46" style="background-color: #262525; padding: 3px; font-size: 12px; color: #fff; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">OUR AD</a> <a href="/index.php?showtopic=47" style="background-color: #262525; padding: 3px; font-size: 12px; color: #fff; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">AFFILATE</a> <a href="/index.php?showtopic=62" style="background-color: #262525; padding: 3px; font-size: 12px; color: #fff; font-weight: bold; letter-spacing: 2px; padding-left: 7px; padding-right: 4px;">OUR BANNER</a></div></center>
</section>
<div class="last-poster">
<span><a>002. Mechanics FAQ</a> by <a href="mainprofile.html">The Shock Jock</a> @ MAY 5 2021, 11:10 AM</span>
<img src="https://i.postimg.cc/RVGGVtdq/playeravatar.png" alt="all seeing eye">
</div>
</div>
</div>
<div class="end-rip"></div>
</div>
<div id="boardstats-wrapper">
<div id="board-stats">
</div>
</div>
</div>
</body>@font-face {
font-family: "kristopher";
src: url("https://vvvaporwaves.github.io/fonts/kristopher/Kristopher-Regular.woff2")
format("woff2"),
/* Modern Browsers */
url("https://vvvaporwaves.github.io/fonts/kristopher/Kristopher-Regular.otf")
format("opentype"); /* Safari, Android, iOS */
font-style: normal;
font-weight: bold;
text-rendering: optimizeLegibility;
font-display: swap;
}
:root {
--white: 227, 227, 227;
--red: 191, 48, 47;
--darkRed: 162, 50, 50;
--black: 0, 0, 0;
--gray: 37, 37, 37;
}
body {
background: url(https://assets.codepen.io/4400499/RBG1.png) fixed;
padding: 0;
margin: 0;
font-family: news cycle, sans-serif;
color: rgba(var(--white));
}
a,
a:link {
text-decoration: none;
font-family: "kristopher", georgia, serif;
color: rgba(var(--red));
font-weight: bold;
}
h1,
h2,
h3 {
font-family: "kristopher", georgia, serif;
}
.end-rip {
background: url(https://assets.codepen.io/4400499/rip3.png);
width: 100%;
height: 93px;
position: absolute;
bottom: -93px;
}
.start-rip {
background: url(https://assets.codepen.io/4400499/rip4.png);
width: 100%;
height: 93px;
position: absolute;
left: 0;
top: -93px;
}
header {
width: calc(100vw - (100vw - 100%));
margin: 0;
display: grid;
background: url(https://assets.codepen.io/4400499/bg2b.png);
position: relative;
}
#bannerimg {
width: 1000px;
height: 557px;
background: url(https://assets.codepen.io/4400499/ban4.png) top center /
contain no-repeat;
margin: auto;
mix-blend-mode: difference;
position: relative;
pointer-events: none;
display: flex;
justify-content: center;
}
.headtxt {
color: black;
padding-top: 1.5em;
font-size: 0.7rem;
line-height: 1.2rem;
text-transform: lowercase;
text-align: center;
place-self: start center;
opacity: 0.8;
letter-spacing: 1px;
margin-left: 1.5rem;
position: absolute;
top: 0;
opacity: 0.5;
}
.headtxt span {
display: block;
}
.headtxt b {
color: rgba(var(--white));
}
.nows-bannertxt {
margin: -8rem 26rem 0 0;
place-self: center;
}
.nows-bannertxt h1 {
font-size: 8rem;
line-height: 0.9em;
margin: 0;
text-stroke: 1px rgba(var(--white));
background: url(https://assets.codepen.io/4400499/whitebg.svg) 0 / 512px;
background-clip: text;
text-fill-color: transparent;
position: relative;
}
.nows-bannertxt h3 {
letter-spacing: 2px;
font-size: 1.1rem;
color: rgba(var(--white));
}
.reply {
display: grid;
grid: auto / 1fr 0.8fr;
gap: 18px;
color: rgba(var(--white));
font-family: kristopher;
}
.reply ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
align-items: center;
}
.reply li {
margin: 0 18px 0 0;
padding: 0;
}
.reply a {
color: #bf302f;
padding: 5px;
font-family: kristopher, georgia;
cursor: pointer;
background: #e3e3e3;
}
#nows-table {
width: 1000px;
margin: 120px auto 0;
position: relative;
padding: 1.5em 0;
}
.infotable {
display: grid;
grid: auto / 1fr 0.5fr;
gap: 15px 50px;
box-sizing: border-box;
position: relative;
}
#table-leftcontent {
display: grid;
}
#table-leftcontent ul {
grid-area: 1/1/2/2;
}
.infotable ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
.infotable li {
margin-left: 15px;
}
.infotable li a {
background: rgba(var(--white));
padding: 5px;
cursor: pointer;
transition: 0.5s ease;
}
.infotable li.active a {
background: rgba(var(--gray));
}
.infotable p {
padding: 1rem 1rem 1rem 0;
margin: 0;
text-align: justify;
}
.infotable-content {
grid-area: 2/1/3/2;
opacity: 0;
transition: 0.5s ease;
position: relative;
}
.infotable-content.active {
opacity: 1;
z-index: 3;
}
.infotable dl {
margin: 0;
padding: 0;
}
.quicklinks {
font-size: 2rem;
font-family: "kristopher", georgia, serif;
line-height: 1em;
font-weight: bold;
color: rgba(var(--black));
}
#table-rightcontent ul {
display: grid;
grid: auto / 1fr 1fr;
}
#table-rightcontent ul li {
margin: 0;
}
#table-rightcontent ul li:nth-of-type(2) {
grid-row: 2/3;
}
#table-rightcontent ul li:nth-of-type(3) {
grid-area: 1/2/3/3;
}
#table-rightcontent dt {
margin-top: 15px;
font-size: 1rem;
font-family: "kristopher", georgia, serif;
font-weight: bold;
color: rgba(var(--black));
}
#table-rightcontent dd {
margin: 0;
padding: 0;
}
#table-rightcontent dl a {
background: rgba(var(--white));
padding: 3px;
font-size: 0.9rem;
}
.welcomehead {
pointer-events: none;
}
.welcomehead h3 {
text-transform: lowercase;
font-size: 3em;
margin: -45px 0 0;
padding: 0;
color: rgba(var(--black));
pointer-events: none;
}
.welcomehead h2 {
margin: 0 0 -15px 0;
padding-top: 0;
font-size: 2.5rem;
line-height: 0.7em;
display: flex;
align-content: flex-start;
align-items: flex-start;
text-transform: lowercase;
color: rgba(var(--black));
}
.welcomehead h2 span {
display: inline-block;
text-stroke: 1px rgba(var(--black), 1);
background: url(https://assets.codepen.io/4400499/blackbg_2.svg) 0 / 512px;
background-clip: text;
text-fill-color: transparent;
font-size: 6rem;
line-height: 1em;
margin-right: 25px;
margin-top: -5px;
text-transform: uppercase;
}
/* BOARDS */
#charon {
padding-top: 75px;
}
.last-poster {
background: rgba(var(--black), 0.2);
margin: 50px -50px -50px;
place-self: stretch;
padding: 50px;
gap: 15px;
display: grid;
text-transform: lowercase;
grid: auto / auto 75px;
box-sizing: border-box;
place-self: end stretch;
}
.last-poster a {
background: rgba(var(--black));
padding: 0 5px;
}
.last-poster span {
place-self: center;
}
.last-poster img {
display: block;
width: 75px;
height: 75px;
border-radius: 100%;
}
/* multi section */
div[class*="board-"] h4 {
margin: 0 0 1.33rem 0;
}
div[class*="board-"] h4 a {
font: 1.75rem kristopher, georgia;
color: rgba(var(--red));
padding: 5px;
cursor: pointer;
text-decoration: none;
background: rgba(var(--white));
text-transform: lowercase;
}
div[class*="board-"] {
display: grid;
font-size: 1.1rem;
}
.board-51 div a[style], .board-4 div a[style], .board-11 div a[style] {
font-family: kristopher;
text-transform: lowercase;
font-size: 1rem !important;
text-decoration: none;
font-weight: normal !important;
letter-spacing: 1px !important;
background-color: rgba(var(--gray)) !important;
padding-right: 7px !important;
color: rgba(var(--red)) !important;
}
/* CATEGORY 1 - MAKE SOME NOISE */
#category1-wrapper, #category3-wrapper, #category5-wrapper {
width: 100%;
background: url(https://assets.codepen.io/4400499/bg2b.png);
position: relative;
padding-bottom: 150px;
}
#category-1 {
width: 1000px;
margin: auto;
display: grid;
grid: auto / 1fr 1fr;
}
#category-1 .categoryheader {
place-self: center;
display: flex;
align-items: center;
grid-area: 1/1/2/3;
}
#category-1 .category-img {
background: url(https://assets.codepen.io/4400499/makesomenosie3.png) 0 /
contain no-repeat;
height: 300px;
width: 300px;
}
#category-1 h2 {
text-transform: uppercase;
color: rgba(var(--white));
font-size: 3rem;
width: 400px;
line-height: 0.9em;
transform: rotate(5deg);
margin-left: -3rem;
font-weight: bold;
}
.board-51 {
grid-column: 1/3;
grid: auto / auto 200px;
gap: 25px;
background: url(https://assets.codepen.io/4400499/makesomenoiseboard1c.png) 0
80% / cover no-repeat,
url(https://assets.codepen.io/4400499/RBG1.png) fixed;
background-blend-mode: hard-light;
border: 1px solid rgba(var(--white));
padding: 50px;
position: relative;
color: rgba(var(--white));
font-size: 1.1rem;
}
.board-51 section {
place-self: center start;
}
.board-51 div[style] {
text-align: left !important;
}
.board-51 .last-poster {
margin: -50px -50px -50px 0;
background: rgba(var(--black), 0.5);
padding: 50px;
position: relative;
display: grid;
text-transform: lowercase;
grid: unset;
height: unset;
place-self: unset;
}
.board-51 .last-poster span {
display: block;
text-align: center;
}
.board-51 .last-poster span a {
color: rgba(var(--red));
font-family: kristopher, georgia;
text-transform: lowercase;
cursor: pointer;
background: unset;
padding: unset;
}
.board-51 .last-poster img {
border-radius: 100%;
width: 125px;
height: 125px;
place-self: end center;
margin-top: 15px;
}
.board-51 .last-poster:after {
content: " ";
position: absolute;
right: 0;
top: 0;
display: block;
background: rgba(var(--black), 0.5);
backdrop-filter: blur(100px);
backdrop-filter: blur(100px);
z-index: 5;
}
.board-4,
.board-52,
.board-5 {
background: url(https://assets.codepen.io/4400499/RBG1.png) fixed;
padding: 50px;
place-self: stretch;
border: 1px solid rgba(var(--white));
border-top: 0;
border-right: 0;
font-size: 1.1rem;
color: rgba(var(--white));
grid: minmax(361px, auto) auto / auto;
display: grid;
}
.board-4 .last-poster img,
.board-52 .last-poster img {
place-self: center end;
}
.board-4 center div[style], .board-39 center div[style] {
text-align: left;
line-height: 2em !important;
}
.board-4 div a[style], .board-39 div a[style] {
font-family: kristopher;
text-transform: lowercase;
font-size: 1rem !important;
text-decoration: none;
font-weight: normal !important;
letter-spacing: 1px !important;
background-color: rgba(var(--gray)) !important;
padding-right: 7px !important;
}
.board-52 {
border-right: 1px solid rgba(var(--white)) !important;
}
.reverse-help {
display: grid;
grid: auto / 1fr 1fr;
padding-top: 27px;
}
.reverse-help div[style]:first-of-type {
width: auto !important;
border-left: 1px solid rgba(var(--white)) !important;
font-size: 1rem !important;
padding-left: 15px !important;
letter-spacing: 0px !important;
line-height: 1em !important;
font-family: kristopher, georgia, serif !important;
color: #262525;
font-weight: normal !important;
margin-left: 0px !important;
margin-top: 0px !important;
text-align: left;
transform: scale(-1, 1);
}
.reverse-help div[style]:last-of-type {
width: auto !important;
border-left: 0px !important;
font-size: 1rem !important;
padding-left: 15px !important;
padding-top: 17px;
letter-spacing: 0px !important;
line-height: 1em !important;
font-family: kristopher, georgia, serif !important;
color: #262525;
font-weight: normal !important;
margin-left: 0px !important;
margin-top: 0px !important;
transform: unset !important;
}
.reverse-help div a[style] {
line-height: 0.8em !important;
font-family: kristopher, georgia, serif !important;
color: #262525;
font-weight: normal !important;
font-size: 2.7rem !important;
}
.board-5 {
padding: unset;
grid-column: 1/3;
grid: unset;
border-right: 1px solid rgba(var(--white));
background: url(https://assets.codepen.io/4400499/gastinrecordsbg2.png) 0 /
cover;
}
.board-5 h4 {
margin: 50px!important;
place-self: center;
}
.board-5 section {
display: grid;
grid: auto / auto 615px;
}
.board-5 .subforums {
display: grid;
grid: auto / repeat(3, 205px);
place-items: center stretch;
}
.board-5 .subforums a {
display: flex;
justify-content: center;
align-items: center;
height: 205px;
position: relative;
color: rgba(var(--white));
overflow: hidden;
font-size: 2rem;
line-height: 0.9em;
padding: 0 1rem;
text-align: center;
transition: 0.5s ease;
background: rgba(var(--black), 0.3);
}
.board-5 .subforums a:hover {
background: rgba(var(--black), 0.7);
}
.board-5 .subforums a:before {
font-family: "cappuccicons";
position: absolute;
font-size: 10rem;
pointer-events: none;
opacity: 0.3;
z-index: -1px;
color: rgba(var(--white));
}
.board-5 .subforums a:first-of-type:before {
content: "\ea30";
}
.board-5 .subforums a:nth-of-type(2):before {
content: "\ecea";
}
.board-5 .subforums a:nth-of-type(3):before {
content: "\ec7c";
}
.board-5 .last-poster {
padding: 15px 0 0;
background: none;
grid: unset;
margin: 0;
line-height: 0.9em;
font-weight: normal;
}
.board-5 .last-poster span a {
background: rgba(var(--black));
padding: 0 5px;
font-size: 1rem;
}
.board-5 .last-poster img {
display: none;
}
/* CATEGORY 2 - ON THE SCENE */
#category2-wrapper {
width: 100%;
padding-bottom: 100px;
}
#blessallyehere {
display: flex;
justify-content: center;
position: relative;
z-index: 5;
margin-bottom: 40px;
margin-top: -100px;
}
.blesstxt1 {
font: 2.3rem kristopher;
}
.blesstxt2 {
font: 2.1rem kristopher;
}
.blesscircle {
position: absolute;
top: 2.2rem;
width: 230px;
height: 230px;
border-radius: 100%;
background: url(https://assets.codepen.io/4400499/wickeddivinebg.png) 0 0 /
500px;
border: 1px solid rgba(var(--white));
}
#category-2 {
width: 1000px;
margin: auto;
display: grid;
grid: auto / 1fr 1px 1fr;
padding-bottom: 100px;
}
#category-2 .categoryheader {
display: grid;
grid: auto / 1.5fr 1fr;
place-items: center;
grid-column: 1/4;
}
#category-2 .category-img {
width: 100%;
height: 1px;
background: rgba(var(--white));
place-self: center stretch;
}
#category-2 h2 {
margin: 0 0 0 25px;
padding: 0;
text-transform: uppercase;
font-size: 3rem;
color: rgba(var(--black));
}
.cat2-boardside {
grid-area: 2/2/4/3;
width: 1px;
padding-top: 28px;
height: 100%;
background: rgba(var(--white));
margin-top: -28px;
}
.board-10 {
margin-top: -28px;
background: url(https://assets.codepen.io/4400499/relationsbg.png) 0 -100px/700px;
padding: 79px 50px 50px;
border: 1px solid rgba(var(--white));
border-right: 0;
border-top: 0;
}
.board-10 section div {
display: none;
}
.board-11 {
grid-area: 2/3/4/4;
background: url(https://assets.codepen.io/4400499/evolutionbg.png) 0 0/900px;
border: 1px solid rgba(var(--white));
border-left: 0;
padding: 50px;
margin-top: 50px;
}
.board-11 section div[style]:last-of-type {
margin-top: 15px!important;
}
h5.category2-deco {
margin: 25px 0 0;
padding: 0 75px;
text-align: center;
font-size: 2.25rem;
font-family: kristopher, georgia, serif;
color: rgba(var(--black));
}
h5.category2-deco em {
text-stroke: 1px rgba(var(--white));
background: url(https://assets.codepen.io/4400499/whitebg.svg) 0 / 1000px;
background-clip: text;
text-fill-color: transparent;
}
h5.category2-deco:before, h5.category2-deco:after {
font-family: "honeybee" !important;
display: block;
}
h5.category2-deco:after {
content: "\eca6";
margin-top: 10px;
}
h5.category2-deco:before {
content: "\eca8";
margin-bottom: 5px;
}
/* category 4 - a disc scratch */
#category3-wrapper {
padding-bottom: 50px;
}
#category-3 {
width: 1000px;
margin: auto;
display: grid;
grid: 1fr repeat(4,0.5fr) / repeat(8, 1fr);
padding-top: 75px;
}
#category-3 .categoryheader {
grid-area: -2/4/-4/6;
background: url(https://assets.codepen.io/4400499/bg2b.png);
position: relative;
z-index: 5;
width: 200px;
height: 200px;
margin: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
border: 1px solid rgba(var(--white));
}
#category-3 div[class*="board-"] {
padding: 50px;
border: 1px solid rgba(var(--white));
border-top: 0;
}
#category-3 .last-poster, #category-5 .last-poster {
background: unset;
margin: unset;
padding: 0;
place-self: start;
}
#category-3 .last-poster span {
margin-right: 15px;
}
#category-3 div.board-32, #category-3 div.board-34 {
padding: 50px 100px 50px 50px;
border-right: 0;
}
#category-3 div.board-33, #category-3 div.board-35 {
padding: 50px 50px 50px 100px;
text-align: right;
}
#category-3 div.board-33 .last-poster, #category-3 div.board-35 .last-poster {
grid: "img ." auto / 70px auto;
}
#category-3 div.board-33 .last-poster img, #category-3 div.board-35 .last-poster img {
grid-area: img;
}
.board-32 {
grid-area: 2/1/4/5;
background: url(https://i.postimg.cc/K83cszff/board-records-2.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
.board-33 {
grid-area: 2/5/4/9;
background: url(https://i.postimg.cc/L6b6Tfth/board-records-3.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
.board-34 {
grid-area: 4/1/6/5;
background: url(https://i.postimg.cc/PqGfGjFj/board-records-4.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
.board-35 {
grid-area: 4/5/6/9;
background: url(https://i.postimg.cc/wBhqgGSs/board-records-5.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
#category-3 div.board-56 {
grid-column: 1/-1;
grid-row: 1/2;
border-top: 1px solid rgba(var(--white));
background: url(https://i.postimg.cc/Y9Mp9xHD/board-records-6.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
#category-3 div.board-56 section h4 {
margin: 0;
}
#category-3 div.board-56 section {
place-self: end start;
}
#category4-wrapper {
padding: 175px 0 150px;
}
#category-4 {
width: 1000px;
margin: auto;
display: grid;
grid: auto / 1fr 1fr;
}
#category-4 .categoryheader {
grid-column: 1 / 2;
}
#category-4 .categoryheader h2 {
font-size: 3rem;
text-transform: uppercase;
line-height: 0.8em;
padding: 1em 1em 0 4em;
margin: 0;
height: 100px;
background: url(https://assets.codepen.io/4400499/backbeat3.png) 50px 0 / 300px no-repeat;
}
#category-4 div[class*="board-"] {
padding: 50px;
background: url(https://assets.codepen.io/4400499/bg2b.png);
}
.board-37 {
border: 1px solid rgba(var(--white));
border-right: 0;
position: relative;
}
.board-37:after {
content: " ";
position: absolute;
bottom: -1px;
right: -1px;
width: 1px;
height: 120px;
background: rgba(var(--white));
}
.board-36 {
border: 1px solid rgba(var(--white));
grid-area: 1/2/3/3;
place-self: start;
}
#category5-wrapper {
padding: 50px 0;
}
#category-5 {
width: 1000px;
margin: auto;
display: grid;
grid: auto / 1fr 1fr;
}
#category-5 .categoryheader {
grid-column: 1 / span 2;
}
#category-5 .categoryheader h2 {
font-size: 3rem;
text-transform: uppercase;
text-align: center;
margin: 0 0 1em 0;
}
#category-5 div[class*="board-"] {
padding: 50px;
}
.board-21 {
border: 1px solid rgba(var(--white));
border-right: 0;
background: url(https://i.postimg.cc/Pf6tXZFK/archives-1.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
.board-40 {
border: 1px solid rgba(var(--white));
background: url(https://i.postimg.cc/CLzwz130/vip-room-1.png) 0/cover, url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
.board-39 {
grid-column: auto / span 2;
border: 1px solid rgba(var(--white));
border-top: 0;
background: url(https://assets.codepen.io/4400499/RBG1.png) fixed;
}
#boardstats-wrapper {
padding-top: 150px;
}
#board-stats {
width: 1000px;
margin: auto;
}
@media screen and (max-width: 1000px) {
body {
wiixed0vw;
}
#bannerimg {
width: 100vw;
height: 257px;
margin: auto;
}
.headtxt {
font-size: 7px;
margin-left: 1em;
}
.nows-bannertxt {
margin: unset;
text-align: center;
}
.nows-bannertxt h1 {
font-size: 4.7rem;
}
.nows-bannertxt h3 {
letter-spacing: 2px;
font-size: 1.1rem;
}
.reply {
padding: 0 1rem;
}
.reply h3,
.reply li a {
font-size: 0.9rem;
}
#nows-table {
width: unset;
padding: 1rem;
margin: 90px 0 0;
}
.infotable {
grid: unset;
}
.infotable ul {
justify-content: center;
}
#infotable-nav {
margin: 0 0 1rem 0;
}
.welcomehead h3 {
font-size: 2.2em;
margin: 0;
}
.welcomehead h2 {
margin: 0.5rem 0 0;
font-size: 1.45rem;
display: block;
text-transform: uppercase;
}
.welcomehead h2 span {
display: block;
font-size: 3.5rem;
margin-right: 10px;
}
#table-rightcontent dl {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#table-rightcontent dt {
margin-top: unset;
}
#table-rightcontent dl * {
margin-right: 10px;
}
/* BOARDS */
#category-1 {
width: 100vw;
grid: unset;
}
#category-1 .categoryheader {
display: grid;
grid: auto / 50% 50%;
grid-area: unset;
}
#category-1 .category-img {
background: url(https://assets.codepen.io/4400499/makesomenosie3.png) 0 /
contain no-repeat;
height: 30vw;
width: 30vw;
aspect-ratio: 1/1;
place-self: start end;
}
#category-1 h2 {
width: unset;
font-size: clamp(1.5rem, 2vw, 3rem);
word-break: break-word;
}
.board-51 {
grid-area: unset;
grid: auto auto / 1fr;
}
.board-51 .last-poster {
margin: 0 -50px -50px;
}
.board-4,
.board-52 {
grid: unset;
}
.last-poster {
font-size: 1.3rem;
line-height: 1.5em;
}
.board-5 {
grid-column: unset;
background: url(https://assets.codepen.io/4400499/gastinrecordsbg.png) 0 /
cover;
}
.board-5 section {
grid-area: 1/1/3/3;
grid: unset;
}
.board-5 .subforums {
grid: unset;
}
.board-5 .subforums a {
}
}
// header table by rafaela lucas @ codepen
var tabLinks = document.querySelectorAll("#infotable-nav li");
var tabContent = document.querySelectorAll(".infotable-content");
tabLinks.forEach(function(el) {
el.addEventListener("click", openTabs);
});
function openTabs(el) {
var btnTarget = el.currentTarget;
var styx = btnTarget.dataset.styx;
tabContent.forEach(function(el) {
el.classList.remove("active");
});
tabLinks.forEach(function(el) {
el.classList.remove("active");
});
document.querySelector("#" + styx).classList.add("active");
btnTarget.classList.add("active");
}
// inserts
$(".board-5 h4").append($(".board-5 .last-poster"));
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.