* { margin-left: 0; margin-top: 0; }
html, body { width: 100%; height: 100%; font-family: Verdana, Geneva, Tahoma, sans-serif; }
@keyframes fadeIn { 0% { opacity: 0%; } 100% { opacity: 100%; } }
.modalContainer { display: none; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.0); }
.postContent { position: relative; top: 5px; left: 88px; margin: 5% auto; width: 820px; height: 400px; background: url("../images/newPostBg.png") repeat; padding: 2em; border-radius: 8px; border: 1px solid #cccccc; display: grid; grid-template-columns: 400px auto 50px; grid-template-rows: 50px 40px 300px; }
.modalContainer:target { display: block; z-index: 100; }
.newPostHeader { grid-column-start: 1; grid-row-start: 1; }
.newPostCloser { grid-column-start: 3; grid-row-start: 1; align-self: center; }
.newPostUser { grid-column-start: 1; grid-row-start: 2; font-family: "Century Gothic", Verdana, Tahoma; font-size: 18px; font-weight: bold; color: #FFFFFF; text-shadow: 1px 1px 3px #000000; }
#newPostForum { grid-column-start: 1; grid-row-start: 3; display: grid; }
.newPostField { grid-column-start: 1; grid-row-start: 3; width: 800px; height: 270px; max-width: 1200px; max-height: 540px; border-radius: 4px; border: solid #CCCCCC; border-width: 1px; }
.newPostSubmit { background: url("../images/postBtn.png") no-repeat; margin-top: 10px; grid-column-start: 1; grid-row-start: 4; width: 86px; height: 51px; justify-self: end; border: none; }
#ShowcaseIframe { min-height: 2160px; display: grid; grid-template-columns: 120px 150px 1400px 170px 140px; grid-template-rows: 1080px 200px auto; }
#DiscussionForum { grid-column-start: 1; grid-column-end: 6; grid-row: 3 / 5; display: grid; grid-template-columns: 150px 71px 1220px 250px 290px; grid-template-rows: 88px 80px 30px auto; } /* When changing the row sizes, you have to match these values with the #DiscPage Style in authentic.css */
#Disc3D { grid-column-start: 1; height: 100vh; }
#DiscArtTitle { position: relative; left: 70px; grid-column: 3; grid-row-start: 1; font-family: "Century Gothic", Verdana, Tahoma; display: grid; grid-template-columns: auto 160px; justify-content: start; max-height: 64px; }
.noCurrentTitle { grid-column-start: 1; align-content: center; background: url("../images/chapterTitleBG.png") repeat-x; height: 64px; font-size: 20pt; padding-left: 10px; padding-right: 50px; margin-right: 10px; }
.currentTitle { grid-column-start: 1; align-content: center; background: url("../images/chapterTitleBG.png") repeat-x; height: 64px; font-size: 20pt; padding-left: 10px; padding-right: 50px; margin-right: 10px; }
.addingPost { grid-column-start: 2; height: 64px; }
.lockedForum { grid-column-start: 2; height: 64px; }
#DiscPostOrder { grid-column-start: 3; grid-column-end: 3; grid-row-start: 1; justify-self: start; align-self: center; z-index: 10; }
.loadForum { margin-left: 20px; }
#forumStatus { display: grid; grid-template-columns: max-content 20px max-content; margin-bottom: 15px; margin-left: 70px; }
.forumInfo { font-family: "Century Gothic", Verdana, Tahoma; font-size: 20px; background-color: #FFFFFF; border: solid #666666; border-width: 0px 0px 0px 5px; padding: 0.2em; z-index: 1; width: max-content; }
.postCount { grid-column: 1; border-width: 0px 0px 0px 5px; }
.status { grid-column: 3; border-width: 0px 0px 0px 5px; }
#CurrentDiscussion { grid-column-start: 2; grid-column-end: 4; grid-row: 3 / 5; z-index: 100; }
#DiscComicArt { grid-column-start: 4; grid-row-start: 1; }
#ShowDetails { grid-column-start: 1; display: grid; grid-template-rows: 40px auto 40px 20px 40px 100px; min-height: 1080px; }
p.YouAre { grid-row-start: 1; height: 100%; text-align: center; color: #CC9A56; font-size: 10pt; }
p.ShowTitle { grid-row-start: 2; margin-top: 10px; margin-bottom: 10px; padding-left: 9px; color: #CC9A56; font-family: Impact; font-size: 20pt; writing-mode: vertical-lr; text-orientation: upright; text-transform: uppercase; justify-self: center; }
a.ShowTimer { margin-bottom: 10px; grid-row-start: 3; height: 100%; text-align: center; color: #CC9A56; font-size: 10pt; text-decoration: none; font-family: Impact; }
a.TheatreMode { grid-row-start: 5; height: 100%; text-align: center; color: #CC9A56; font-size: 10pt; text-decoration: none; font-family: Impact; }
#prevPage { grid-column-start: 2; display: grid; grid-template-rows: auto; min-height: 1080px; }
.PrevArrow { text-align: right; place-content: center; }
.lArrow { background: url("../images/leftArrow.png") no-repeat; width: 47px; height: 70px; border: none; }
.lArrow:hover { background: url("../images/leftArrowUp.png") no-repeat; width: 47px; height: 70px; border: none; }
#Showcase { grid-column-start: 3; display: grid; min-height: 1080px; }
.currentArt { margin: 3px; height: 100%; width: 100%; }
#nextPage { grid-column-start: 4; display: grid; grid-template-rows: auto; min-height: 1080px; }
.NextArrow { place-content: center; }
.rArrow { background: url("../images/rightArrow.png") no-repeat; width: 47px; height: 70px; border: none; }
.rArrow:hover { background: url("../images/rightArrowUp.png") no-repeat; width: 47px; height: 70px; border: none; }
#userPostSection { display: grid; grid-template-columns: 110px 1px 128px auto 64px 8px 48px; grid-template-rows: 8px 8px 32px auto 26px 1px; margin-right: 3px; margin-bottom: -10px; font-family: "Century Gothic", Verdana, Tahoma; } /* Note: Omitting grid start numbers makes them stack in the html */
#newPostHeader { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; width: 110px; height: 114px; background: url("../images/newPostHeader.png") no-repeat; display: grid; grid-template-columns: 40px 48px 22px; grid-template-rows: 28px 39px 48px; }
#npUserEmblem { grid-column: 2; grid-row: 2; }
#npUserEmblem img { width: 49px; height: 39px; max-width: 49px; max-height: 39px; }
#userAvatar { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; height: 141px; width: 120px; z-index: 2; }
#userAvatar img { clip-path: polygon(1px 0px, 1px 110px, 25px 126px, 121px 126px, 121px 0px, 1px 0px); }
#npTopBorder { grid-column-start: 2; grid-column-end: 6; grid-row-start: 2; height: 8px; background: url("../images/npTopWhiteBorder.png") repeat-x; z-index: 3; }
#npBG { grid-column-start: 2; grid-column-end: 6; grid-row-start: 2; grid-row-end: 5; background: url("../images/npBG.png") repeat; }
#npUserName { grid-column-start: 4; grid-row-start: 3; font-weight: bold; }
#npPostArea { grid-column-start: 4; grid-row-start: 4; display: grid; grid-template-rows: max-content max-content; max-width: 700px; padding-bottom: 10px; padding-right: 10px; padding-left: 20px; }
#npReplyQuote::first-line { font-weight: bold; }
#npReplyQuote { grid-row: 1; padding: 0.4em; background-color: #CCCCCC; border-radius: 8px; width: max-content; max-width: 825px; font-style: italic; white-space: pre-wrap; }
#npUserPostQuoted { grid-row: 2; margin-top: 40px; white-space: pre-wrap; }
#npUserPost { grid-column-start: 4; grid-row-start: 4; padding-bottom: 10px; padding-right: 10px; padding-left: 20px; white-space: pre-wrap; }
#npEditPost { grid-column: 1; justify-self: end; margin-right: 10px; font-family: "Century Gothic", Verdana, Tahoma; font-size: 12px; }
#npEditPost a { color: #647464; color: blue; }
#npUserDate { grid-column: 2; justify-self: end; margin-right: 10px; font-weight: bold; font-style: italic; font-size: 12px; }
#npBtmCorner { grid-column-start: 2; grid-column-end: 5; grid-row-start: 5; height: 26px; width: 144px; background: url("../images/npBtmCorner.png") repeat-x; z-index: 1; }
#npBtmBorder { grid-column-start: 4; grid-row-start: 5; height: 26px; background: url("../images/npBtmBorder.png") repeat-x; z-index: 2; display: grid; grid-template-columns: max-content max-content max-content; justify-content: end;}
#npVoteResults { grid-column-start: 5; grid-row-start: 1; grid-row-end: 6; display: grid; grid-template-columns: 64px; grid-template-rows: 8px 8px 32px 33px 55px; align-content: end; }
#blueRes { font-weight: bold; grid-column-start: 1; grid-row: 3; height: 32px; width: 64px; background-color: #69B5FF; color: #ffffff; text-align: center; align-content: center; }
#redRes { font-weight: bold; grid-column-start: 1; grid-row: 4; height: 32px; margin-top: 1px; width: 64px; background-color: #FF6E48; color: #ffffff; text-align: center; align-content: center;}
#submitForum { grid-column-start: 1; grid-row-start: 1; grid-row-end: 6; display: grid; grid-template-columns: 64px; grid-template-rows: 8px 8px 32px 33px 55px; align-content: end; }
#submitBtn { grid-column-start: 1; grid-row-start: 5; height: 55px; width: 64px; background: url("../images/replyArrow.png") no-repeat; border: none; cursor: pointer; z-index: 1; }
#npVoteCorner { grid-column-start: 6; grid-row-start: 1; grid-row-end: 6; display: grid; grid-template-columns: 8px; grid-template-rows: 0px 8px auto; }
#npVoteCornerTop { grid-column-start: 1; grid-row-start: 1; grid-row-end: 3; height: 16px; width: 8px; background: url("../images/npVoteTc.png") no-repeat; z-index: 5; }
#npVoteBG { grid-column-start: 1; grid-row-start: 3; grid-row-end: 4; width: 8px; margin-bottom: 10px; background: url("../images/npVoteCornerBG.png") repeat-y; }
#npVcolors { grid-column-start: 1; grid-row-start: 3; height: 128px; width: 8px; background: url("../images/npVcolors.png") no-repeat; background-position: 0px 0px; align-self: end; z-index: 1; }
#npVoteSection { grid-column-start: 7; grid-row-start: 1; grid-row-end: 6; display: grid; grid-template-columns: 48px; grid-template-rows: auto 32px 33px 53px 10px; }
#npForumVoteBlue { grid-column: 1; grid-row: 2; width: 48px; height: 32px; border: none; }
#npForumVoteRed { grid-column: 1; grid-row-start: 3; width: 48px; height: 33px; border: none; }
#npVSWhiteTop { grid-column-start: 1; grid-row-start: 1; grid-row-end: 5; width: 48px; margin-bottom: 10px; background: url("../images/npVoteWhiteTop.png") repeat-y; }
#npBlueVote { grid-column-start: 1; grid-row-start: 2; width: 48px; height: 32px; background: url("../images/BluePlus.png") no-repeat; border: none; }
#npRedVote { grid-column-start: 1; grid-row-start: 3; width: 48px; height: 33px; background: url("../images/RedMinus.png") no-repeat; margin-bottom: 50px; border: none; }
#npBlackNotice { grid-column-start: 1; grid-row-start: 4; width: 48px; height: 55px; background: url("../images/BlackNotice.png") no-repeat; background-position: 0px -2px; }
#npVSBtm { grid-column-start: 1; grid-row-start: 5; width: 48px; height: 10px; background: url("../images/npVoteBtm.png") no-repeat; }
#replyPostSection { display: grid; grid-template-columns: 141px 20px 112px auto 48px 8px 8px 8px 40px 8px; grid-template-rows: 8px 30px auto 26px; margin-right: 3px; margin-left: -8px; margin-top: -9px; font-family: "Century Gothic", Verdana, Tahoma; }
#rpHeader { grid-column-start: 1; grid-row-start: 1; width: 141px; height: 114px; background: url("../images/replyHeader.png") no-repeat; display: grid; grid-template-columns: 70px 49px 22px; grid-template-rows: 28px 39px 47px; }
#rpUserEmblem { grid-column: 2; grid-row: 2; }
#rpUserEmblem img { width: 49px; height: 39px; max-width: 49px; max-height: 39px; }
#rpUserAvatar { grid-column-start: 2; grid-row-start: 2; grid-row-end: 4; width: 112px; height: 96px; z-index: 10; }
#rpUserAvatar img { clip-path: polygon(1px 1px, 1px 95px, 25px 120px, 141px 120px, 141px 0px, 0px 0px); }
#rpBG { grid-column-start: 2; grid-column-end: 6; grid-row-start: 2; grid-row-end: 4; background: url("../images/npBG.png") repeat; }
#rpUserName { grid-column-start: 4; grid-row-start: 2; font-weight: bold; }
#rpReplyArea { grid-column-start: 4; grid-row-start: 3; display: grid; grid-template-rows: max-content max-content; margin-left: 20px; }
#rpReplyQuote::first-line { font-weight: bold; }
#rpReplyQuote { grid-row: 1; padding: 0.4em; background-color: #CCCCCC; border-radius: 8px; width: max-content; max-width: 825px; font-style: italic; white-space: pre-wrap; }
#rpUserPostQuoted { grid-row: 2; margin-top: 40px; white-space: pre-wrap; }
#rpUserPost { grid-column-start: 4; grid-row-start: 3; margin-left: 20px; white-space: pre-wrap; }
#rpEditPost { grid-column: 1; justify-self: end; margin-right: 10px; font-family: "Century Gothic", Verdana, Tahoma; font-size: 12px; }
#rpEditPost a { color: #647464; color: blue; }
#rpUserDate { grid-column: 2; justify-self: end; margin-right: 10px; font-weight: bold; font-style: italic; font-size: 12px; }
#rpBtmCorner { grid-column-start: 2; grid-column-end: 4; grid-row-start: 4; height: 26px; background: url("../images/rpBtmCorner.png") no-repeat; }
#rpBtmBorder { grid-column-start: 3; grid-column-end: 5; grid-row-start: 4; height: 26px; margin-left: 10px; background: url("../images/npBtmBorder.png") repeat-x; display: grid; grid-template-columns: max-content max-content max-content; justify-content: end;}
#rpVoteResults { grid-column-start: 5; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 48px; grid-template-rows: 8px 32px 33px 41px; align-self: end; }
#rpBlueRes { grid-column-start: 1; grid-row-start: 2; height: 32px; width: 48px; background-color: #69B5FF; color: #ffffff; text-align: center; align-content: center; }
#rpRedRes { grid-column-start: 1; grid-row-start: 3; height: 33px; width: 48px; background-color: #FF6E48; color: #ffffff; text-align: center; align-content: center; }
#rSubmitForum { grid-column-start: 1; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 48px; grid-template-rows: 8px 32px 33px 41px; align-self: end; }
#rSubmitBtn { grid-column-start: 1; grid-row-start: 4; height: 41px; width: 48px; background: url("../images/rpReplyArrow.png") no-repeat; border: none; cursor: pointer; z-index: 1; }
#rpVoteCorner { grid-column-start: 6; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 8px; grid-template-rows: 8px auto 114px; }
#rpVoteCornerTop { grid-column-start: 1; grid-row-start: 1; height: 16px; background: url("../images/rpVcTc.png") no-repeat; z-index: 1; }
#rpVoteBG { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; margin-bottom: 5px; background: url("../images/rpVcBG.png") repeat-y; }
#rpVcColors { grid-column-start: 1; grid-row-start: 3; width: 8px; height: 114px; background: url("../images/rpVcolors.png") no-repeat; z-index: 1; }
#rpVoteRise { grid-column-start: 7; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 8px; grid-template-rows: 8px auto 114px; z-index: 1; }
#rpVoteRiseTop { grid-column-start: 1; grid-row-start: 1; background: url("../images/rpVoteRiseWhite.png") no-repeat; }
#rpVoteRiseBG { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; margin-bottom: 10px; background: url("../images/rpVoteRiseWhite.png") repeat-y; }
#rpVRColors { grid-column-start: 1; grid-row-start: 3; height: 114px; background: url("../images/rpVRcolors.png") no-repeat; align-self: end; }
#rpVoteCornerDown { grid-column-start: 8; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 8px; grid-template-rows: 8px auto 114px; }
#rpVCDownTop { grid-column-start: 1; grid-row-start: 1; height: 16px; background: url("../images/rpVcdTc.png") no-repeat; z-index: 1; }
#rpVCDownBG { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; margin-bottom: 10px; background: url("../images/rpVcdBG.png") repeat-y; }
#rpVCDColors { grid-column-start: 1; grid-row-start: 3; width: 8px; height: 114px; background: url("../images/rpVcdColors.png") no-repeat; z-index: 1; }
#rpVoteSection { grid-column-start: 9; grid-row-start: 1; grid-row-end: 5; display: grid; grid-template-columns: 40px; grid-template-rows: 8px auto 32px 33px 41px; }
#rpForumVoteBlue { grid-column: 1; grid-row: 3; width: 40px; height: 32px; border: none; }
#rpForumVoteRed { grid-column: 1; grid-row: 4; width: 40px; height: 33px; border: none; }
#rpVSBG { grid-column-start: 1; grid-row-start: 2; grid-row-end: 6; margin-bottom: 5px; background: url("../images/rpVSWhiteTop.png") repeat-y; }
#rpVSWhiteTop { grid-column-start: 1; grid-row-start: 2; height: 8px; background: url("../images/rpVSWhiteTop.png") no-repeat; }
#rpBlueMini { grid-column-start: 1; grid-row-start: 3; width: 40px; height: 32px; background: url("../images/BluePlusMini.png") no-repeat; border: none; }
#rpRedMini { grid-column-start: 1; grid-row-start: 4; width: 40px; height: 33px; background: url("../images/RedMinusMini.png") no-repeat; border: none; }
#rpBlackNotice { grid-column-start: 1; grid-row-start: 5; height: 41px; background: url("../images/BlackNoticeMini.png") no-repeat; }