@font-face {
    font-family: "kirupaPixel";
	src: url('/fonts/born2bsportyv2-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}


@font-face {
    font-family: "kirupaCode";
	src: url('/fonts/dmr.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

body {
	font-family: var(--serifFonts);
	padding: 0px;
	margin: 0px;
	text-align: left;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
	background: linear-gradient(180deg, var(--primaryLighter) 0px, var(--pageBackground) 300px);
	background-repeat: no-repeat;
}
.theme_dark body {
	background: linear-gradient(180deg, #000 0px, var(--pageBackground) 300px);
}
.theme_dark #kirupaOrangeLogo {
	filter: drop-shadow(1px 1px 10px #666);
}
#kirupaOrangeLogo {
	width: 64px;
}
.leftCat {
    position: absolute;
    transform: translate(-44px, -44px);
    transition: .2s cubic-bezier(0,.76,.38,1.33) transform;
    z-index: -10;
    image-rendering: pixelated;
}
.pixelated_image {
	image-rendering: pixelated;
}
#myKIRUPALink img {
	border-radius: 50%;
    border: solid 2px var(--mediaBorder);
    margin-left: -3px;
}
.kirupaDialog {
	position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: #2f2f2fe0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: bounding-box;
}
.kirupaDialog:not([open]) {
    display: none;
}
.joinForums {
	border-top: 2px solid var(--structureBorder);
    text-align: center;
    border-bottom: 2px solid var(--structureBorder);
	padding-top: 10px;
    padding-bottom: 10px;
}
.joinForums h4 {
	margin-top: 5px;
}
.joinForums p {
	font-size: 16px;
}
.joinForums a {
	padding: 30px;
	display: inline-block;
	border-radius: 5px;
	background-color: var(--lighter);
}
.joinForums a:hover {
	background-color: var(--light);
}
#themeChooser:hover .leftCat, #searchChooser:hover .leftCat {
	transform: translate(-66px, -71px);
}
#themeChooser, #searchChooser {
    background-color: var(--lighter);
    padding: 20px;
    margin-top: 30px;
    position: relative;
    box-shadow: 0 0 8px -2px var(--primary);
    width: 500px;
    height: fit-content;
    font-family: kirupapixel;
    border: 5px solid var(--mediaBorder);
}
#themeChooser button {
    padding: 9px;
    border: 3px solid #000;
    border-radius: 5px;
    margin: 14px;
    cursor: pointer;
}
#themeChooser button:hover {
	transform: scale(1.3);
}
#themeChooser #theme_blue {
	border-color: #0066af;
    background-color: #ceebff;
}
#themeChooser #theme_yellow {
    border-color: #867e0f;
    background-color: #ffee22;
}
#themeChooser #theme_pink {
	border-color: #ff0767;
    background-color: #ffd9e6;
}
#themeChooser #theme_green {
	border-color: #2E7D32;
    background-color: #81C784;
}
#themeChooser #theme_purple {
    border-color: #6b16a6;
    background-color: #b891d4;
}
#themeChooser #theme_pico8 {
    border-color: #333;
    background-color: #FFCCAA;
}
#themeChooser #theme_black {
    border-color: #666;
    background-color: #CCC;
}
#themeChooser #theme_brown {
    border-color: #67320f;
    background-color: #88634e;
}

#themeChooser .activeTheme {
	box-shadow: 0 0 10px 1px var(--primary);
}
#darkmode {
	
}

#lightmode {
	
}
#themeChooser .themeHeading {
    margin: 0;
    font-size: 1.5em;
    font-family: "kirupaPixel";
}
#themeChooser .bg {
	margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--structureBorder);
}
.modes {
	padding: 10px;
    border: 2px solid var(--structureBorder);
    margin-top: 10px;
    border-radius: 5px;
    font-weight: 100;
    display: block;
    font-size: 1.2em;
}
.modes input {
	margin-right: 7px;
}

.modes:hover {
	background-color: var(--highlighter);
}

#radioContainer {
	color: var(--bodyText);
}

.themeLabel {
	margin-top: 10px;
}

.videoframe {
	padding-bottom: 240px;
    background-image: url("/images/videocaption.png");
    background-repeat: no-repeat;
    background-size: 168px;
    background-position: calc(50% + 65px) calc(100% - 20px);
	margin-left: 5px !important;
    margin-right: 5px !important;
}

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: var(--mediaBorder) solid 5px;
	background-color: var(--mediaBorder);
}
#mobileFooter {
	display: none;
}
#mobileHeader, #navigationSlider {
	display: none;
}
div#mainContent ol li {
	margin-bottom: 20px;
    font-size: 1.2em;
	line-height: 1.75em;
    color: var(--bodyText);
    font-family: var(--serifFonts);
	padding-left: 10px;
}
div#mainContent ol li li {
	font-size: inherit;
	list-style-type: square;
}

#tutorialInformation {
	overflow:hidden;
	margin-bottom: 30px;
	/* margin-right: 30px !important; */
}

.authorImage {
	float: left;
    margin-right: 10px;
    margin-top: 4px;
    width: 51px;
	display: none;
}

.authorText {
	 margin-top: 10px;
}

.authorText h1 {
	font-size: 6em;
    font-weight: 100;
    line-height: 1;
    font-family: kirupaPixel;
    text-rendering: geometricPrecision;
    text-shadow: 2px 2px var(--logoTextShadow);
    color: var(--primary);
    -moz-osx-font-smoothing: none;
    -webkit-font-smoothing: none;
    margin-left: -5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.authorText h1.compact {
	font-size: 4.5em;
}

.theme_yellow_dark .authorText h1 {
	color: var(--headerText);
}
.horizontal_line {
	margin-top: 20px;
    margin-bottom: 30px;
    border-bottom: 2px var(--structureBorder) solid;
}
.inlineCode {
	color: var(--bodyText);
    font-family: var(--monoFonts);
    font-size: 85%;
    background-color: rgba(244, 244, 244, 0.2);
    border-radius: 3px;
    padding: 2px 5px;
    margin: 0px 1px;
	border: 1px solid rgb(216 216 216 / 50%);
}
.theme_dark .inlineCode {
	border: 1px solid rgba(244, 244, 244, 0.2);
}
h1, h2, h3, h4, h5 {
	color: var(--headerText);
	font-weight: bold;
	line-height: 1;
	font-family: 'kirupapixel';
    color: var(--headerText);
    font-weight: 100;
    -webkit-font-smoothing: none;
	text-wrap: balance;
}
h1 {
	font-size: 3.5em;
    color: var(--headerText);
    margin-top: -5px;
    line-height: 60px;
	text-shadow: 1px 1px var(--highlighterThree);
}
.sectionH1 {
	background-image: none !important;
}
h2 {
  font-size: 3.5em;
  margin-bottom: -14px;
  text-shadow: 1px 1px var(--highlighter);
}

#mainContent h2 {
	border-top: 1px solid var(--structureBorder);
    margin-top: 35px;
    padding-top: 25px;
    line-height: 1;
    margin-bottom: 0px;
}

#mainContent ul.navigationContent li h2 {
  border-top: 0px solid var(--structureBorder);
  margin-top: 0;
  padding-top: 0;
}
#mainContent ul li {
	line-height: 1.75;
    margin-bottom: 1em;
    color: var(--bodyText);
    font-size: 1.2em;
}

h3 {
    font-size: 2.5em;
    margin-bottom: -5px;
    padding-bottom: 10px;
    text-shadow: 1px 1px var(--highlighterThree);
    border-bottom: 1px solid var(--structureBorder);
}
h4 {
	font-size: 2em;
	margin-bottom: -14px;
	text-shadow: 1px 1px var(--highlighterTwo);
}

h5 {
	font-size: 18px;
	margin-bottom: -14px;
	text-shadow: 1px 1px var(--highlighterTwo);
}

.videoCallout {
  padding: 20px;
  display: block;
  background-color: var(--highlighter);
  padding-left: 50px;
  background-image: url(https://www.kirupa.com/icon/1f4fa.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 15px calc(50% - 2px);
  color: var(--darkText);
}
.videoCallout:hover {
	background-color: var(--highlighterThree);
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 50%;
}

  @media all and (max-width: 800px) {
	.column {
	  flex: 100%;
	}
  }

.fixedArticles .column {
	flex: 100%;
}

.tutorialInfo {
	color: #9eaab5;
	margin-bottom: 0;
	margin-top: 15px;
	margin-left: 0px;
	font-family: 'kirupapixel';
    font-size: 1.5em;
    -webkit-font-smoothing: none;
    font-weight: 100;
    text-rendering: geometricPrecision;
}
.tutorialInfo a {
	color: var(--darkText);
	text-decoration: none;
}
.tutorialInfo a:hover {
	text-decoration: underline;
}
.yellowEmphasis {
	color: #8c6f00;
	background-color: #FFFF99;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
a.yellowEmphasis:hover {
	border-style: none none dotted none;
	border-width: 1px;
}
p {
    font-family: var(--serifFonts);
    font-size: 1.2em;
    line-height: 1.75em;
    color: var(--bodyText);
}

.centerImage {
	text-align: center;
}
.centerIframe {
	display: block;
	margin: 0 auto;
}

.centerImageNoBorder {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
}
.centerImageNoBorder img {
	border-radius: 10px;
	padding: 10px;
}
iframe.centerImage, video.centerImage, .centerImage iframe, .centerImage video {
    border: 5px solid var(--mediaBorder);
    margin: 0 auto;
    display: inline-block;
}
.centerImageNoBorder iframe {
	display: inline-block;
}
p.kCaption {
    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    text-align: center;
}
div#mainContent p.grayEmphasis {
	display: none;	
}

a:link {
	text-decoration: none;
}

.greenEmphasis {
	background-color: #ECFFB3;
	color: #336600;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
a.greenEmphasis {
	background-color: #FFF;
	border-style: none none dotted none;
	border-width: 1px;

}
a.greenEmphasis:hover {
	background-color: #ECFFB3;
}
.grayEmphasis {
    background-color: var(--primaryLightest);
    color: var(--bodyText);
    padding: 2px;
    border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
.grayEmphasis:hover {
	background-color: var(--primaryLighter);
}

a.blueEmphasis {
  text-decoration: none;
  border-radius: 2px;
  /* border-style: none none dotted none; */
  /* border-width: 1px; */
  transition: background-color .2s cubic-bezier(0, 1.1, 0, 1.09);
  padding: 2px;
  background-color: var(--linkBackground);
  border-radius: 5px;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--linkForeground);
  filter: var(--linkFilter);
}

a.extraEmphasis:hover {
	background-color: #CBE7F3;
}
a.blueEmphasis:hover {
  background-color: var(--linkHoverBackground);
  color: var(--linkHoverForeground);
  filter: var(--linkFilterHover);
}
.blueEmphasis {
	background-color: #EEF7FB;
	color: #0890ff;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
.redEmphasis {
	background-color: #FFCACA;
	color: #990000;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}

#rightContents h4 {
	font-size: 16px;
    font-weight: bold;
    border-top: var(--structureBorder) solid 1px;
    padding-top: 30px;
}

#rightNewsletter p {
	font-size: 16px;
}

#tutorialInformation div.tags p {
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	margin-right: 5px;
	line-height: 1;
	display: inline-block;
}

#tutorialInformation div.tags a {
	background-color: #c5e8ff;
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
    color: #2196f3;
    line-height: 0;
}

#tutorialInformation div.tags a:hover {
	background-color: #006bb3;
    color: #FFF;
}

.bookContent {
	display: grid;
    grid-template-columns: 175px 1fr;
    align-items: start;
	padding-top: 30px;
    border-top: 1px solid #EEE;
}

.bookContent h4 {
	margin-top: 0px;
}

#arrayBookContent {
	grid-template-columns: 135px 1fr;
}

p.centerImage img {
	border: 2px solid var(--mediaBorder);
}
div #mainContent ol {
	list-style-type: lower-roman;
    color: var(--bodyText);
    line-height: 1.75em;
}
table.data p {
	margin: -5px;
}
#tutorialBox {
	display: none;
	background-color: #F8F8F8;
	margin-top: 10px;
}

#bookBannerContent {
  margin-top: 0px;
  padding-bottom: 1px;
  margin-bottom: 20px;
  padding-right: 10px;
  margin-left: -5px;
}
#bookBannerContent img {
	margin-left: 32px;
	margin-top: -10px;
	margin-bottom: 30px;
}

#bookBannerContent li {
	margin-bottom: 15px;
	margin-left: 0px;
	list-style: none;
	padding-left: 75px;
	padding-top: 5px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 3px 5px;
	line-height: 20px;
	padding-bottom: 15px;
	background-size: 60px;
}
#bookBannerContent li:hover {
	background-size: 63px;
	background-position: 0px 3px;	
}
#bookBannerContent ul  {
	padding: 0;
	margin-left: 5px;
	margin-top: 5px;
}

#bookBannerContent ul ul.buyNowRight li {
	padding: 0;
	margin: 0;
}

#bookBannerContent ul ul.buyNowRight {
	padding: 0;
	margin: 0;
}


#bookBannerContent .bookLink:hover {
    text-decoration: none;
}


#bookBannerContent .bookLink {
	color: var(--darkText);
    font-size: 14px;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 5px;
    background-position: 0 3px;
	margin-top: 0px;
	line-height: 1.5em;
	display: inline-block;
}


#bookBannerContent .bookLink:hover {
	text-decoration: underline;
}

#bookBannerContent li.animationRight {
	background-image: url("https://www.kirupa.com/book/images/anim2.svg");
  background-size: 70px;
  background-position: -4px 0;
}

#bookBannerContent li.arraysBookRight {
	background-image: url(https://www.kirupa.com/book/images/arraysRight.png);
    background-size: 60px;
    background-position: 4px 0;
}

#bookBannerContent li.js101Right {
	background-image: url("https://www.kirupa.com/book/images/js101_2.svg");
  background-size: 70px;
  background-position: -4px 0;
}

#bookBannerContent li.learningReactRight {
	background-image: url("https://www.kirupa.com/book/images/react_book.svg");
  background-size: 70px;
  background-position: -4px 0;
}


#bookBannerContent li.canvasRight {
	background-image: url("https://www.kirupa.com/images/canvas_book_small.png");
	background-size: 60px;
}

#bookBannerContent .lessemphasis {
	color: var(--darkText);
}

#downwardCurvedArrow {
	position: absolute;
    transform: translate(160px, -75px);
}

#kirupaBio {
	display: grid;
    grid-template-columns: 30px 121px calc(100% - 150px) 30px;
    padding-left: 10px;
    padding-right: 30px;
    align-items: center;
    font-style: italic;
	margin-bottom: 40px;
}

#kirupaBio .kirupaPixel {
	border-radius: 50%;
    border: 4px solid var(--mediaBorder);
    width: 90px;
    height: 90px;
}

/* Ask Forums Right Content */
.askForumSigContainer {
	position: relative;
}
.askForumSig {
	position: absolute;
	right: -272px;
	transform: translateY(-340px);
	display: flex;
}
.forumSigLinks {
	width: 200px;
	margin-top: 30px;
	background-image: url(https://www.kirupa.com/pixel_icons/smiley-happy.gif);
	image-rendering: pixelated;
	background-repeat: no-repeat;
	background-position: 117px 71px;
	background-size: 24px;
}
.forumSigLinks p {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 20px;
}
.forumSigHeader {
	font-size: 16px;
	font-family: kirupapixel;
	-webkit-font-smoothing: none;
}
.forumSigBody {
	font-size: 2em;
	font-family: kirupapixel;
	-webkit-font-smoothing: none;
	line-height: 28px;
}
/* ---------------------------- */
#sigNewsletter {
	margin: 60px;
	display: grid;
    justify-content: center;
}

#sigNewsletter .newsletterContainer {
	width: 550px;
    text-align: center;
}

#sigNewsletter #birdNewsletter {
	position: absolute;
    transform: translate(560px, -7px) scale(1.05);
}

#sigNewsletter h4 {
	margin: 0;
    font-size: 3em;
    font-weight: bold;
}
#sigNewsletter p {
	margin: 0;
    font-size: 1em;
    font-weight: 400;
}
.strikethrough {
	text-decoration: line-through;
}



#sigNewsletter .greenButton {
    margin-top: 15px;
    margin-bottom: 15px;
    background-image: url(https://www.kirupa.com/pixel_icons/mail.gif);
    background-size: 32px;
    background-position: 16px center;
    padding-left: 53px;
    padding-right: 21px;
    image-rendering: pixelated;
}

.articleActions {
	margin-left: 71px;
}
.articleActions div {
	display: inline-block;
	position: relative;
}

.articleActions a {
	font-size: 14px;
	font-weight: bold;
	padding: 10px;
	color: #222;
	background-repeat: no-repeat;
	padding-left: 22px;
	margin-left: 10px;
	background-position: left center;
	background-size: 19px;
	position: relative;
	z-index: 10;
}
.articleActions .articleRead:hover {
	background-color: var(--highlighterTwo);
}
.articleActions .articleRead a {
	background-image: url(https://www.kirupa.com/images/menu.svg);
}
.articleActions .articleRead svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1;
}
.articleActions .articleDiscuss:hover {
	background-color: var(--highlighterThree);
}
.articleActions .articleDiscuss a {
	background-image: url(https://www.kirupa.com/images/message.svg);
}
.articleActions .articleDiscuss svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1;
}
.articleList li {
    list-style-type: none;
	
	  margin-bottom: 20px;
	  padding-bottom: 0px;
	  margin-right: 50px;
	  border-radius: 5px;
}
#mainContent .articleList li {
  padding-bottom: 20px;
}
#mainContent .articleList li {
    line-height: 1.75;
    font-size: 18px;
    margin-bottom: 40px;
    color: #585858;
    /* border-bottom: #EEE 1px solid; */
    padding-bottom: 10px;
	/* transition: all .2s cubic-bezier(0,.66,0,.98); */
}
#mainContent ul li:last-of-type {
  border-bottom: none;
}
.articleList {
    padding: 0;
    margin-top: 40px;
	position: relative;
    z-index: 100;
}
.articleList li > a {
    padding: 10px;
    padding-left: 75px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 45px;
    background-position: 12px 12px;
}

#mainContent .articleList li > a:hover {
    background-color: var(--lighter);
    box-shadow: var(--primaryLighter) 0px 0px 50px;
}
.articleList li p {
    color: var(--bodyText);
    margin-left: 5px;
    margin-bottom: 2px;
    margin-top: 3px;
}
.articleList li:hover p {
	
}


#mainContent p sup {
	vertical-align: top;
    position: relative;
    top: -0.5em;
}

body div#mainContent p.inlineCode.standalone {
	background-color: #f8f8f8 !important;
    padding: 1em;
    overflow: auto;
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.75;
    font-size: 16px;
}

	  #mainContent .theTopics .articleList li {
		  margin-bottom: 20px;
		  padding-bottom: 0px;
		  margin-right: 30px;
	  }

      .theTopics .articleList li > a {
		padding-left: 75px;
		background-position: 15px center;
		background-size: 43px;
		width: calc(100% - 69px);
	    border-radius: 5px;
	    border: 1px dotted var(--structureBorder);
		color: var(--darkText);
		font-weight: lighter;
	    padding-top: 24px;
        padding-bottom: 24px;
	    font-family: 'kirupapixel';
    	font-size: 24px;
	  }
      .theTopics .articleList {
		  margin: 0;
	  }
	  .theTopics h3 {
		  padding-top: 20px;
		  margin-bottom: 20px;
		  border-top: 2px solid var(--structureBorder);
	  }
      .theArticles ul.articleList li > a {
		  background-position: 15px center;
	  }
	#mainContent .theArticles ul.articleList li > a {
		background-size: 30px;
		padding-left: 60px;
		color: var(--darkText);
		font-weight: lighter;
		font-family: "kirupaCode";
		font-size: 16.5px;
		-webkit-font-smoothing: none;
	}

.callout {
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    border-color: var(--highlighter);
    margin: 0;
    padding-left: 10px;
}




.kirupaInput {
	background-color: var(--inputBackground);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 7px center;
	padding: 3px;
	padding-left: 10px;
	height: 30px;
	border-radius: 0px;
	-webkit-appearance: none;
	border: 3px solid  var(--inputBorder);
	font-size: 16px;
}
.kirupaInput:focus {
  background-color: var(--lighter);
  border-color: var(--primary);
  /* box-shadow: 0px 0px 10px 0px #ffd500; */
  outline: 0 none;
}

.greenButton, .kirupaButton {
background-color: var(--primary);
    font-size: 1.5em;
    color: var(--textOnPrimary);
    border: 0;
    border-radius: 5px;
    padding: 13px;
    background-repeat: no-repeat;
    text-align: right;
    background-position: -7px center;
    background-size: 60px;
    line-height: 1em;
    display: inline-block;
    font-family: kirupapixel;
    padding-top: 18px;
}

.greenButton a,  .kirupaButton a {
  color: var(--textOnPrimary);
  font-weight: bold;
  text-decoration: none;
}
.greenButton:hover, .kirupaButton:hover {
	background-color: var(--primaryDarker);
	cursor: pointer;
}

#tutorialInformation .tags {
	display: none;
}

#mainHeader .kirupaButton {
  background-image: url(https://www.kirupa.com/images/comment_bubble.svg);
	margin-right: 10px;
	justify-self: end;
	width: 90px;
	background-size: 48px;
}

.kirupaButtonSmall {
	font-size: 12px;
	padding: 5px;
}

#mainHeader {
    margin: 0 auto;
    margin-bottom: 100px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1.25fr 200px 200px 200px 200px 0px 1fr 75px 75px;
    color: #444;
    align-items: center;
    padding: 15px;
    position: relative;
    /* border-bottom: 2px solid var(--structureBorder); */
    white-space: nowrap;
	text-transform: uppercase;
	font-size: 2em;
	margin-top: 10px;
	
	font-family: "kirupaPixel";
	-webkit-font-smoothing: none;
}

#kirupaOrangeLogo {
	position: fixed;
    margin-left: 25px;
	z-index: 100;
}

#mainHeader .headerLink {
    justify-self: center;
    margin-left: 0px;
    margin-right: 0px;
    color: var(--darkText);
	padding-left: 40px;
    image-rendering: pixelated;
	background-repeat: no-repeat;
    background-position: 5px 4px;
    background-size: 24px;
}
#mainHeader .headerLink:hover {
	/* background-color: var(--light); */
	border-bottom: 8px solid var(--darkText);
	margin-bottom: -8px;
}
#mainHeader #bookHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/book.gif");
}
#mainHeader #tutorialsHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/parachutedrop.gif");
	background-size: 26px;
	background-position: 0 2px;
    padding-left: 30px;
}
#mainHeader #videosHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/TV7.gif");
	padding-left: 37px;
    background-position: 6px 2px;
}
#mainHeader #codingHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/smiley-happy.gif");
	padding-left: 37px;
    background-position: 6px 2px;
}

#mainHeader .headerLink span {
	/*padding: 0px;
    padding-left: 2px;
    padding-right: 2px;*/
}
#mainHeader .articles {
	/* background-color: var(--primaryLightest); */
	/* border-bottom: var(--headerUnderline, 5px) solid var(--primary); */
	border-bottom: 4px solid var(--darkText);
	margin-bottom: -4px;
}

#mainHeader .headerIcons {
	justify-self: center;
	width: 20px;
	margin-left: 5px;
    margin-right: 5px;
	margin-top: 5px;
	transition: transform .1s ease-out;
}

#mainHeader .headerIcons:hover {
	transform: scale(1.2);
}

#mainHeader .headerDivider {
	justify-self: center;
}

#mainHeader .miniheadericons {
	text-align: center;
	padding: 5px;
}

#mainHeader .miniheadericons img {
	width: 32px;
	image-rendering: pixelated;
}

#mainHeader .miniheadericons img:hover {
	transform: scale(1.2, 1.2);	
}

#backgroundHeader {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    z-index: -1;
	image-rendering: pixelated;
	overflow: hidden;
}

#backgroundHeader .clouds {
	position: absolute;
}

.theme_dark #backgroundHeader {
	opacity: 0.5;
}
#mainBody {
	width: min-content;
    margin: 0 auto;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 250px 770px 250px;
}


#mainContent {
	/* padding: 25px; */
	border-radius: 0px;
	padding-top: 0px;
	/* border-left: 2px solid var(--structureBorder); */
	/* border-right: 2px solid var(--structureBorder); */
	/* padding-left: 75px; */
	/* padding-right: 75px; */
}

#mainContent > * {
    margin-left: 75px;
    margin-right: 75px;
}
#mainContent > .centerImage {
    margin-left: 0px;
    margin-right: 0px;
	margin-top: 25px;
    margin-bottom: 25px;
}
#mainContent > .centerImageNoBorder {
    margin-left: 0px;
    margin-right: 0px;
	margin-top: 25px;
    margin-bottom: 25px;
}

#leftContents {
    margin-right: 11px;
    margin-top: 0px;
    margin-left: 13px;
}
#rightContents {
	margin-left: 18px;
}

#mainFooter {
	margin: 0 auto;
	width: 1250px;
	background-color: var(--headerBackground);
	border-radius: 5px;
	padding: 20px;
	display: grid;
	grid-template-columns: 400px 1fr;
	align-items: center;
	margin-bottom: 18px;
}

#mainFooter p {
  margin: 0;
  color: var(--bodyText);
  font-size: 16px;
  line-height: 26px;
}

#mainFooter a {
  color: var(--bodyText);
  font-weight: 700;
}

#mainFooter img {
  width: 20px;
  padding: 15px
}

#mainFooter div {
  text-align: right;
}

div.sectionMainHeader {
	margin-top: 10px;
}

nav.navigationBoxes {
  border-radius: 5px;
  padding: 5px;
}
#leftContents nav.navigationBoxes {
	background-color: var(--lighter);
	/* margin-top: -6px; */
}

#leftContents nav.navigationBoxes.generic ul a {
	font-weight: normal;
	padding-left: 50px;
	padding-left: 50px;
    background-position: 10px center;
	margin: 5px;
	font-size: 16px;
}
#leftContents nav.navigationBoxes.generic ul li:last-of-type {
	border-top: 1px solid var(--structureBorder);
}


nav.navigationBoxes ul {
  margin: 0;
  list-style: none;
  padding: 0;
  font-size: 16px;
}

#leftContents nav.navigationBoxes li img {
	width: 24px;
	margin-right: 15px;
}

#leftContents #personalizeList {
	border-top: 2px var(--structureBorder) solid;
    margin-top: 10px;
    margin-bottom: 0;
}
#leftContents #personalizeLink {
	margin-top: 10px;
}

.articleNavigation {
	margin-top: 50px;
}
.articleNavigation ul {
    display: flex;
    justify-content: space-between;
	padding: 0;
	list-style: none;
}

.articleNavigation ul a {
	display: flex;
    align-items: center;
	border-radius: 5px;
	align-content: center;
}

/*
.articleNavigation ul a:hover {
	background-color: var(--light);
}
*/

.articleNavigation ul a svg {
	display: inherit;
	transform: scale(.5);
	padding: 5px;
}
.articleNavigation ul .navText {
	padding: 5px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

#previousArticle {
	margin-left: 0px;
}
#previousArticle .navText {
	padding-right: 10px;
}

#nextArticle {
	margin-right: 0px;
}
#nextArticle .navText {
	padding-left: 10px;
}
.leftNavContainer {
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	margin-bottom: 380px;
}
.leftNavContainer svg {
	margin-left: 40px;
}
.leftNavContainer .relatedSVG {
    position: relative;
    transform: translate(-36px, 5px);
    z-index: 10;
}
.leftNavContainer .birdSVG {
	position: absolute;
    transform: translate(230px, -144px) rotate(-12deg);
    width: 50px;
    image-rendering: pixelated;
}

.leftNav {
    align-self: baseline;
    top: 0;
    height: 300px;
    overflow-y: auto;
	overflow-x: hidden;
	scroll-padding: 30%;
	transform: translateX(3.5px);
    border-radius: 0px;
	margin-bottom: 20px;
	width: 100%;
    scrollbar-width: none;
    transition: scrollbar-color .2s ease-out;
	position: fixed;
    top: 0px;
    left: 0;
    width: 350px;
    height: 100vh;
	background: linear-gradient(90deg, rgba(var(--leftNavLight), .5) 0%, rgba(var(--leftNavLight), .5) 99%, var(--darkStructureBorder) 100%);
	backdrop-filter: blur(5px);
    transform: translate(-1px, 0);
}

.leftNavContents {
    overflow-y: auto;
    margin-top: 215px;
    height: calc(100vh - 215px);
    direction: rtl;
    border-top: 1.5px var(--leftNavLine) dashed;
}

.leftNav::-webkit-scrollbar {
  transition: scrollbar-color .2s ease-out;
  width: 5px;
}

.leftNav::-webkit-scrollbar-track {
  background: transparent;
}

.leftNav::-webkit-scrollbar-thumb {
  transition: scrollbar-color .2s ease-out;
  background-color: var(--structureBorder);
}
.leftNav:hover::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}
.leftNav h3 {
	font-size: 24px;
    margin-left: 24px;
    text-shadow: none;
    border-bottom: none;
	direction: ltr;
}
.leftNav .articleList li {
    margin-right: 0px;
    width: 100%;
}
.leftNav li {
	margin-bottom: 0px;
}
.leftNav li a {
    background-size: 23px;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 9px;
    color: var(--darkTextSecondary);
    background-position: 10px 9px;
	width: -moz-available;
    width: -webkit-fill-available;
    background-size: 0;
    line-height: 24px;
	font-family: kirupaCode;
    font-size: 15px;
	border-left: 5px solid hsla(0, 100%, 50%, 0.00);
	direction: ltr;
}
.leftNav li a:hover {
	background-color: var(--pageBackground);
    outline: 2px solid var(--darkStructureBorder);
}
.leftNav .articleList {
	margin-top: 20px;
}

.leftNav li a.currentArticle {
	background-color: var(--pageBackground);
    outline: 2px solid var(--darkStructureBorder);
}

.leftNavLast {
	border-bottom: var(--structureBorder) 2px solid;
	padding-bottom: 10px;
}

.leftQuestion {
	text-align: center;
	border-top: 1.5px var(--leftNavLine) dashed;
	margin-bottom: 30px;
	margin-top: 100px;
}
.leftQuestion .greenButton {
	margin-top: 100px;
	direction: ltr;
	
	margin-top: 100px;
    background-image: url(https://www.kirupa.com/pixel_icons/smiley-rambo.gif);
    background-size: 32px;
    background-position: 16px center;
    padding-left: 53px;
    padding-right: 21px;
    image-rendering: pixelated;
	
	font-size: 24px;
}

nav.navigationBoxes ul ul {
	border-top: var(--structureBorder) 2px solid;
	border-bottom: var(--structureBorder) 2px solid;
	font-size: 16px;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

nav.navigationBoxes ul a {
	color: var(--darkText);
    text-decoration: none;
    padding: 10px;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 1px center;
    display: flex;
    border-radius: 5px;
    margin-bottom: 0px;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

nav.navigationBoxes hr {
	border: 0;
    height: 2px;
    background: var(--structureBorder);
}

nav.navigationBoxes ul a:hover {
  background-color: var(--light);
}

nav.navigationBoxes ul li li a:hover {
  text-decoration: underline;
  background-color: unset;
  color: var(--darkText);
}

nav.navigationBoxes ul ul a {
	background-size: 16px;
    background-position: 15px center;
    font-weight: 500;
    padding-left: 45px;
}

#leftContents nav.navigationBoxes ul ul a {
    font-weight: 400;
    padding-left: 36px;
}

#leftContents nav.navigationBoxes li svg {
    height: 18px;
    position: absolute;
    transform: translate(-26px, 2px);
	fill: var(--navigationLinkColor);
}

#rightContents nav.navigationBoxes ul ul a {
	background-position-y: 12px;
    font-size: 1em;
    font-weight: 100;
    color: var(--darkText);
    line-height: 1.5em;
    font-family: 'kirupapixel';
    -webkit-font-smoothing: none;
}

.theme_dark #rightContents nav.navigationBoxes ul ul a {
	filter: drop-shadow(1px 1px 1px #777777FF);
}

#rightContents nav.navigationBoxes .oneBoxOnly ul {
  border-bottom: none;
  padding-bottom: 0px;
  image-rendering: pixelated;
}

#rightContents .newForum p, .leftNavContainer p {
 font-family: "kirupapixel";
 font-size: 20px;
 line-height: 1.2em;
}

#rightContents .newForum .blockBorder {
	position: absolute;
    left: -35px;
    top: -20px;
}

#rightContents nav {
	position: relative;
}

#rightContents nav .fresh_caption {
	z-index: 20;
    position: relative;
    margin-left: 52px;
    top: 4px;
	margin-bottom: 20px;
}

#rightContents nav .fresh_background {
	position: absolute;
    top: -20px;
	left: 0px;
    margin-bottom: 0px;
    z-index: 10;
    width: 240px;
}

#rightContents nav.newForum .fresh_caption {
    margin-left: 41px;
    top: 4px;
    margin-bottom: 10px;
}

#rightContents nav.newForum .fresh_background {
    top: 7px;
    left: 32px;
    width: 176px;
    height: 18px;
}

#navMobile {
	display: none;
}

/* mobile stuff */ 
	@media all and (max-width: 1700px) {
		#mainHeader {
			grid-template-columns: minmax(350px, 1.25fr) 200px 200px 200px 200px 0px 1fr 75px 75px;
		}
		body #newFooter {
			margin-left: 350px;
		}
	}
	
	@media all and (max-width: 1560px) {
		#rightContents, .askForumSigContainer {
			display: none;
		}
		#mainBody {
			grid-template-columns: 470px 760px;
			width: 100%;
   		 }
		#newFooter {
			grid-template-columns: unset;
			width: 100%;
		}
	}
@media all and (max-width: 1420px) {
    #rightContents {
        display: none;
    }
	.leftNav {
		display: none;
	}
	#kirupaOrangeLogo {
		position: relative;
		margin-left: 25px;
		z-index: 100;
	}
	#mainHeader {
        grid-template-columns: 1fr 1.25fr 200px 200px 200px 200px 0px 1fr 75px 75px;
    }
	body #newFooter {
		margin-left: auto;
	}
    #mainBody {
        grid-template-columns: 270px 760px;
        width: 100%;
    }
    #mainContent {
        border-right: none;
        
    }
    #mainHeader {
        width: unset;
    }
    #mainContent > * {
        margin-left: 75px;
        margin-right: 75px;
    }
    #sigNewsletter .newsletterContainer {
        width: 100%;
    }
}
@media all and (max-width: 1200px) {
    body {
        margin: 0;
    }
    /*
    #mainHeader {
        grid-template-columns: 56px 1fr 35px 35px auto;
        width: unset;
    }
    */
    .askForumSigContainer {
        display: none;
    }
    .leftNav {
        /* display: none; */
    }
    
    .articleNavigation ul {
        flex-direction: column;
    }
    
    #previousArticle {
        margin-left: 0;
    }
    #nextArticle {
        margin-right: 0;
    }
    
    #mainContent img {
        max-width: calc(100% - 40px);
            height: auto;
    }
    #mainContent > * {
        margin-left: 10px;
        margin-right: 10px;
    }

    #leftContents {
        /* display: none; */
    }
    #mainHeader .wideOnly {
        /* display: none; */
    }
    #mainBody {
        grid-template-columns: none;
        width: calc(100% - 35px);
    }
    div#mainContent #pageComments {
        background-position-x: calc(50% - 120px);
    }
    #mainFooter p {
        margin-bottom: 18px;
    }
    #pageCommentsImage {
        display: none;
        padding-left: 0;
    }
    .authorText h1, h1 {
        font-size: 4em;
        line-height: 1;
        margin-left: 0px;
    }
    h2 {
        font-size: 28px;
        line-height: 1.5;    
    }
    h3 {
        font-size: 24px;
        line-height: 1.5;    
    }
    h4 {
        font-size: 20px;
        line-height: 1.5;    
    }
    #navigationSlider.hidden {
        opacity: 0;
    }
    body {
        padding: 0px;
    }

    
    .syntaxhighlighter {
      font-size: 16px !important; 
    }
  
    #rightContents {
        display: none;
    }
    
    #mainContent iframe {
        width: 95% !important;
    }
    
    #mainContent {
        width: 100%;
        margin: 0;
        border: 0;
        padding: 0;
        max-width: 700px;
        margin: 0 auto;
    }
    
    #mainBody {
        display: flex;
    }

    #adArea {
        border-bottom: 1px var(--structureBorder) solid;
    }

    #footer, #bottomFooterLinks {
        display: none;
    }
    #theHorizontalLine {
        width: 100%;
    }
    
    .authorImage {
        display: none;
    }
    
    #tutorialBox {
        display: none;
    }
    
    .tutorialInfo {
        margin-top: 5px;
    }
    
    div#mainContent p {
        padding-right: 0px;
    }

    
    #mainFooter {
        width: calc(100% - 70px);
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
    }
    #sigNewsletter {
        padding-right: 0px;
        background-image: none;
    }
    #sigNewsletter #mce-EMAIL {
        width: calc(100% - 40px);
      }
    #birdNewsletter, #downwardCurvedArrow, .leftBracket, .rightBracket {
        display: none;
    }
    #kirupaBio {
        display: grid;
        grid-template-columns: unset;
        padding-left: 0px;
        padding-right: 0px;
        justify-items: center;
        font-style: italic;
        margin-bottom: 40px;
        padding-top: 30px;
        border-top: 2px solid var(--structureBorder);
    }
    iframe.centerImage, video.centerImage {
    margin-left: 0px;
    }

    .centerImageNoBorder img {
        margin-left: 0px;
    }

    p.centerImage img {
        margin-left: 0px;
    }
}

@media all and (max-width: 1200px) {
    #leftContents {
        display: none;
    }
    #mainHeader .wideOnly {
        display: none;
    }
    #mainHeader {
        grid-template-columns: 56px 1fr 35px 35px 35px auto;
        width: unset;
    }
    .leftNav, .leftNavContainer {
        display: none;
    }
}



/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+jsx&plugins=line-highlight+line-numbers */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: "kirupaCode";
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.75;
  font-size: 16.5px;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f8f8f8;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre[data-line] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: rgba(158, 158, 158, 0.10);

	pointer-events: none;

	line-height: inherit;
	white-space: pre;
}

	.line-highlight:before,
	.line-highlight[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		background-color: hsla(24, 20%, 50%,.4);
		color: hsl(24, 20%, 95%);
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		box-shadow: 0 1px white;
	}

	.line-highlight[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
	content: none;
}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #CCC;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #CCC;
			display: block;
			padding-right: 0.8em;
			text-align: right;
      transform: translateY(-5px);
		}


div.askForums a {
	background-color: var(--highlighter);
    padding: 15px;
    display: block;
    color: var(--darkText);
}
div.askForums a:hover {
	background-color: var(--highlighterTwo);
	text-decoration: underline;
}
div.askForums a span {
	font-weight: bold;
}

.smileysTable {
	border: 2px solid var(--structureBorder);
	border-collapse: collapse;
	width: -webkit-fill-available;
	font-size: 16px;
}
.smileysTable th {
	font-weight: bold;
	font-size: 18px;
	background-color: var(--primaryLighter);
}
.smileysTable td {
	border: 1px solid var(--structureBorder);
	padding: 10px;
	color: var(--bodyText);
}
.smileysTable th {
	border: 1px solid var(--structureBorder);
	padding: 10px;
}