* { margin-left: 0; margin-top: 0; }
html, body { width: 100%; height: 100%; }
@keyframes showLogin { 0% { opacity: 0%; } 100% { opacity: 100%; } }
@keyframes hideLogin { 0% { opacity: 100%; } 100% { opacity: 0%; } }
@keyframes home2Show { 0% { transform: translateX(0); } 100% { transform: translateX(-1919px); } }
@keyframes home2Disc { 0% { transform: translate(0, 0); } 100% { transform: translate(-1919px, -1080px); } }
@keyframes home2Profile { 0% { transform: translateX(0); } 100% { transform: translateX(-3838px); } }
@keyframes home2About { 0% { transform: translateX(0); } 100% { transform: translateX(-3838px); } }
@keyframes show2Home { 0% { transform: translateX(-1919px); } 100% { transform: translateX(0); } }
@keyframes show2Disc { 0% { transform: translate(-1919px, 0px); } 100% { transform: translate(-1919px, -1080px); } }
@keyframes show2Profile { 0% { transform: translateX(-1919px); } 100% { transform: translateX(-3838px); } }
@keyframes show2About { 0% { transform: translateX(-1919px); } 100% { transform: translateX(-3838px); } }
@keyframes disc2Home { 0% { transform: translate(-1919px, -1080px); } 100% { transform: translate(0px, 0px); } }
@keyframes disc2Show { 0% { transform: translate(-1919px, -1080px); } 100% { transform: translate(-1919px, 0px); } }
@keyframes disc2Profile { 0% { transform: translate(-1919px, -1080px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes disc2About { 0% { transform: translate(-1919px, -1080px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes profile2Home { 0% { transform: translateX(-3838px); } 100% { transform: translateX(0px); } }
@keyframes profile2Show { 0% { transform: translateX(-3838px); } 100% { transform: translateX(-1919px); } }
@keyframes profile2Disc { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-1919px, -1080px); } }
@keyframes profile2About { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes profile2Artist { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes artist2Profile { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes about2Home { 0% { transform: translateX(-3838px); } 100% { transform: translateX(0px); } }
@keyframes about2Show { 0% { transform: translateX(-3838px); } 100% { transform: translateX(-1919px); } }
@keyframes about2Disc { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-1919px, -1080px); } }
@keyframes about2Profile { 0% { transform: translate(-3838px, 0px); } 100% { transform: translate(-3838px, 0px); } }
@keyframes showPage { 0% { opacity: 0.0; } 100% { opacity: 1.0; z-index: 10; } }
@keyframes hidePage { 0% { opacity: 1.0; } 100% { opacity: 0.0; z-index: 0; } }
#SiteGroup { display: grid; overflow: hidden; place-items: center; }
.modalContainer { display: none; position: fixed; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.0); /* give the last value 0 - 1 for alpha change */ z-index: 10; }
.modalContainer:target { display: block; }
.BlogRead { font-family: "Century Gothic", Verdana, Tahoma; position: relative; margin-top: 40px; margin-left: 380px; width: 1500px; height: 1008px; background: rgba(255, 255, 255, 1); border-radius: 8px; border: 1px solid #ffffff; }
.artBlogRead { font-family: "Century Gothic", Verdana, Tahoma; position: relative; margin-top: 40px; margin-left: 380px; width: 1500px; height: 1008px; background: rgba(255, 255, 255, 1); border-radius: 8px; border: 1px solid #ffffff; }
iframe#BlogReadingFrame { border-radius: 8px; border: none; width: 1500px; height: 1010px; }
iframe#BlogPageFrame { border-radius: 8px; border: none; width: 1500px; height: 1010px; }
iframe#artBlogPageFrame { border-radius: 8px; border: none; width: 1500px; height: 1010px; }
.showUserInfo { position: relative; left: 63px; top: 10px; width: 1836px; height: 1053px; border-radius: 8px; border: none; }
.showUserFriends { font-family: "Century Gothic", Verdana, Tahoma; position: relative; left: 483px; top: 90px; width: 1380px; height: 903px; background-color: #ffffff; border-radius: 8px; border: none; animation: showLogin 1.0s ease forwards; }
.showArtistFriends { font-family: "Century Gothic", Verdana, Tahoma; position: relative; left: 483px; top: 90px; width: 1380px; height: 903px; background-color: #ffffff; border-radius: 8px; border: none; animation: showLogin 1.0s ease forwards; }
.showMessages { position: relative; left: 483px; top: 90px; width: 1380px; height: 903px; background-color: #ffffff; border-radius: 8px; border: none; animation: showLogin 1.0s ease forwards; }
#UserInfoGrid { display: grid; grid-template-columns: 85px 75px 1676px; grid-template-rows: 66px max-content max-content max-content; background: url('../images/UserUpdateBG.png') repeat-y; width: 1836px; max-width: 1821px; min-height: 1053px; height: max-content; border-radius: 8px; font-family: "Century Gothic", Verdana, Tahoma; align-content: start; }
#closeWindow { grid-column: 1; grid-row: 1 / 4; position: relative; top: 500px; background: url('../images/SaveInfoBtn.png') no-repeat; width: 138px; height: 140px; }
#userUpdateTitleBar { position: relative; top: -7px; left: 75px; justify-self: start; grid-column-start: 1; grid-row: 1; background: url("../images/updatePageTitleBar.png") no-repeat; width: 1741px; height: 66px; }
#userUpdateContent { grid-column: 2 / 4; grid-row-start: 2; border-radius: 8px; justify-self: start; display: grid; grid-template-columns: 25px 100%; grid-template-rows: 5px 100%; align-items: start; }
#uuContent { grid-column-start: 2; grid-row-start: 2; width: 1600px; height: 400px; display: grid; grid-template-columns: 225px 225px 225px 225px 225px 225px 225px; grid-template-rows: 70px 70px 70px 70px 70px max-content; }
#uuContent input { width: 200px; }
#uuContent label { font-weight: bold; }
.uiProfile { grid-column: 3; grid-row: 3; z-index: 10; }
#uiAvatar { grid-column: 3; grid-row: 4; }
#uiAvatarPic { grid-column: 1; grid-row: 1; height: 400px; }
.uiArtEmblem { grid-column: 3; grid-row: 5; }
.uiUploadEmblem { grid-column: 3; grid-row: 6; height: max-content; align-self: center; width: max-content; }
.uiEmblemPic { grid-column: 1; grid-row: 1 / 3; width: 100px; height: 100px; justify-self: start; align-self: start; z-index: 1; }
.uiName { grid-column-start: 3; grid-row-start: 1; }
.uiPass { grid-column-start: 4; grid-row-start: 1; }
.uiArtName { grid-column-start: 3; grid-row-start: 2; }
.uiEmail { grid-column-start: 4; grid-row-start: 2; }
.uiAbout { grid-column: 4 / 6; grid-row: 3 / 5; z-index: 2; }
#aboutMe { width: 430px; max-width: 650px; min-width: 430px; height: 200px; max-height: 500px; min-height: 200px; white-space: pre-wrap; border-radius: 8px; z-index: 11; }
.uiFirstName { grid-column: 5; grid-row: 1; }
.uiLastName { grid-column: 5; grid-row: 2; }
.uiFriendsOnlyPage { grid-column: 6; grid-row: 1; }
.uiFriendsOnlyMsg { grid-column: 6; grid-row: 2; }
.uiAllowFriends { grid-column: 6; grid-row: 3; }
.uiAutoFriends { grid-column: 6; grid-row: 4; }
.uiAllowAdmirers { grid-column: 6; grid-row: 5; }
.uiDelete { grid-column: 7; grid-row: 1; }
.uiDeleteBox { grid-column: 7; grid-row: 1; }
.uiValidPass { grid-column: 7; grid-row: 2; }
.uiSubmit { grid-column: 7; grid-row: 3; background: url("../images/userSaveBtn.png") no-repeat; width: 131px; height: 73px; border: none; background-position: center; z-index: 2; }
#blogs { background: url("../images/blogHeder.png") no-repeat; grid-column-start: 3; grid-row-start: 3; justify-self: start; display: grid; grid-template-columns: 30px 800px 500px 300px; grid-template-rows: 60px max-content 75px; }
#blogs #newEntryBtn { grid-column: 3; grid-row-start: 2; display: grid; grid-template-columns: 120px 300px; z-index: 10; }
#blogs #newEntryBtn input[type="checkbox"] { display: none; }
#blogs #newEntryBtn input[type="checkbox"] + label { background-color: RGBA(200, 200, 200, 0.5); margin-top: 15px; height: 20px; }
#blogs #newEntryBtn input[type="checkbox"] + label:hover { border: solid #555555; border-width: 0px 5px 0px 0px; }
#blogs #newEntryBtn input[type="checkbox"]:checked + label { background-color: RGBA(200, 200, 200, 0.5); border: solid #888888; border-width: 0px 0px 5px 0px; height: 20px; font-weight: bold; }
#blogs #newEntryBtn input[type="checkbox"]:checked + label + div.addBlog { display: block; }
#blogs #newEntryBtn .addBlog { display: none; position: relative; top: 60px; left: -120px; width: max-content; height: max-content; padding: 0.5em; background-color: RGBA(200, 200, 200, 0.5); border-radius: 8px; border: solid silver; }
#blogs #newEntryBtn .addBlog label { font-weight: bold; }
#bTitle { width: 300px; }
#blogPost { width: 650px; height: 150px; max-width: 755px; max-height: 265px; min-width: 200px; min-height: 50px;}
#blogs #newEntryBtn .nBlogBtn { font-family: "Century Gothic", Verdana, Tahoma; background-color: #cccccc; padding: 5px; border: none; }
#blogs #blogDisplay { grid-column: 2 / 5; grid-row-start: 2; display: grid; grid-template-columns: 110px 385px 400px; }
#blogs #blogDisplay .formBlog { padding-top: 20px; grid-column: 2; }
#blogs #blogDisplay .formBlog select { font-family: "Century Gothic", Verdana; width: 265px; border: none; }
#blogAddEditForm { grid-column: 3; width: 900px; justify-self: start; }
#editBlog { grid-column: 2; align-self: start; }
#editBlog label { font-weight: bold; }
#galleries { grid-column: 2 / 4; grid-row: 4; justify-self: center; }
.addEditGallery { grid-column-start: 1; grid-row-start: 2; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; }
.addEditGalleryHead { grid-column-start: 1; grid-row-start: 1; }
.addEditGalleryRow { grid-column-start: 1; grid-row-start: 2; display: grid; grid-template-columns: auto auto; }
.addEditGalleryImg { grid-column-start: 1; }
.addEditGalleryInfo { grid-column-start: 2; }
iframe#UpdateInfoFrame { border: none; width: 1836px; height: 1053px; }
iframe#UserFriendsFrame { border: none; width: 1380px; height: 903px; }
iframe#ArtistFriendsFrame { border: none; width: 1380px; height: 903px; }
iframe#UserMessagesFrame { border: none; width: 1380px; height: 903px; }
.editBlog { position: relative; margin: 5% auto; width: 400px; height: 400px; padding: 2em; background: rgba(255, 255, 255, 1); border-radius: 8px; border: 1px solid #cccccc; }
span:has(input[class="HomeToShow"]:checked) { animation: home2Show 2.3s ease forwards; }
span:has(input[class="HomeToShow"]:checked) #DiscLinks { animation: hidePage 1.5s ease forwards; }
span:has(input[class="HomeToProfile"]:checked) { animation: home2Profile 2.3s ease forwards; }
span:has(input[class="HomeToDisc"]:checked) { animation: home2Disc 2.3s ease forwards; }
span:has(input[class="HomeToAbout"]:checked) { animation: home2About 2.3s ease forwards; }
span:has(input[class="ShowToHome"]:checked) { animation: show2Home 2.3s ease forwards; }
span:has(input[class="ShowToProfile"]:checked) { animation: show2Profile 2.3s ease forwards; }
span:has(input[class="ShowToDisc"]:checked) { animation: show2Disc 2.3s ease forwards; }
span:has(input[class="ShowToDisc"]:checked) #DiscLinks { animation: showPage 3.3s ease forwards; }
span:has(input[class="ShowToArtist"]:checked) { animation: show2Profile 2.3s ease forwards; }
span:has(input[class="ShowToAbout"]:checked) { animation: show2About 2.3s ease forwards; }
span:has(input[class="DiscToHome"]:checked) { animation: disc2Home 2.3s ease forwards; }
span:has(input[class="DiscToShow"]:checked) { animation: disc2Show 2.3s ease forwards; }
span:has(input[class="DiscToShow"]:checked) #DiscLinks { animation: hidePage 1.5s ease forwards; }
span:has(input[class="DiscToProfile"]:checked) { animation: disc2Profile 2.3s ease forwards; }
span:has(input[class="DiscToAbout"]:checked) { animation: disc2About 2.3s ease forwards; }
span:has(input[class="ProfileToHome"]:checked) { animation: profile2Home 2.3s ease forwards; }
span:has(input[class="ProfileToShow"]:checked) { animation: profile2Show 2.3s ease forwards; }
span:has(input[class="ProfileToShow"]:checked) #DiscLinks { animation: hidePage 1.5s ease forwards; }
span:has(input[class="ProfileToDisc"]:checked) { animation: profile2Disc 2.3s ease forwards; }
span:has(input[class="ProfileToAbout"]:checked) { animation: profile2About 2.3s ease forwards; }
span:has(input[class="AboutToHome"]:checked) { animation: about2Home 2.3s ease forwards; }
span:has(input[class="AboutToShow"]:checked) { animation: about2Show 2.3s ease forwards; }
span:has(input[class="AboutToShow"]:checked) #DiscLinks { animation: hidePage 1.5s ease forwards; }
span:has(input[class="AboutToDisc"]:checked) { animation: about2Disc 2.3s ease forwards; }
span:has(input[class="AboutToProfile"]:checked) { animation: about2Profile 2.3s ease forwards; }
span:has(input[class="ShowToArtist"]) > div#ArtistPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ShowToArtist"]:checked) > div#ArtistPage { display: grid; }
span > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="AboutToProfile"]:checked) > div#ProfilePage { animation: showPage 2.3s ease forwards; display: grid; }
span:has(input[class="AboutToProfile"]:checked) > div#AboutPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="HomeToProfile"]:checked) > div#ProfilePage { animation: showPage 2.3s ease forwards; display: grid; }
span:has(input[class="ShowToProfile"]:checked) > div#ProfilePage { animation: showPage 2.3s ease forwards; display: grid; }
span:has(input[class="DiscToProfile"]:checked) > div#ProfilePage { animation: showPage 2.3s ease forwards; display: grid; }
span:has(input[class="HomeToAbout"]:checked) > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ShowToArtist"]:checked) > div#ArtistPage { animation: showPage 2.3s ease forwards; }
span:has(input[class="ShowToAbout"]:checked) > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="DiscToAbout"]:checked) > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ProfileToAbout"]:checked) > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ProfileToAbout"]:checked) > div#AboutPage { animation: showPage 2.3s ease forwards; }
span:has(input[class="HomeToProfile"]:checked) > div#AboutPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ShowToProfile"]:checked) > div#AboutPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="DiscToProfile"]:checked) > div#AboutPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="HomeToAbout"]:checked) > div#AboutPage { animation: showPage 2.3s ease forwards; }
span:has(input[class="ShowToAbout"]:checked) > div#AboutPage { animation: showPage 2.3s ease forwards; }
span:has(input[class="DiscToAbout"]:checked) > div#AboutPage { animation: showPage 2.3s ease forwards; }
span:has(input[class="ArtistToProfile"]:checked) { animation: artist2Profile 2.3s ease forwards; }
span:has(input[class="ArtistToProfile"]:checked) > div#AboutPage { display: none; }
span:has(input[class="ArtistToProfile"]:checked) > div#ProfilePage { animation: showPage 2.3s ease forwards; }
span:has(input[class="ArtistToProfile"]) > div#ArtistPage { animation: hidePage 2.3s ease forwards; }
span:has(input[class="ProfileToArtist"]:checked) { animation: profile2Artist 2.3s ease forwards; }
span:has(input[id^="fellowArtist"]:checked) > div#ArtistPage { display: grid; animation: showPage 2.3s ease forwards; }
span:has(input[id^="fellowArtist"]:checked) > div#ProfilePage { animation: hidePage 2.3s ease forwards; }
#PageGroup { grid-column-start: 1; display: grid; grid-template-columns: 1920px 1920px 1920px; grid-template-rows: 1080px 1080px 200px; min-height: 2160px; }
#HomePage { grid-column-start: 1; grid-row-start: 1; background: url("../images/Home.png") no-repeat; min-width: 1920px; min-height: 2160px; display: grid; grid-template-columns: 30px 1545px 235px 140px; grid-template-rows: 35px 220px 255px auto; }
#ShowPage { grid-column-start: 2; grid-row-start: 1; background: url("../images/ShowcaseDiscussion.png") no-repeat; min-width: 1920px; min-height: 2160px; display: grid; grid-template-columns: 120px 170px 1320px 170px 140px; grid-template-rows: 1080px 200px auto; }
#DiscPage { grid-column-start: 1; grid-column-end: 6; grid-row-start: 3; display: grid; grid-template-columns: 150px 71px 1220px 231px 290px; grid-template-rows: 88px 80px 30px auto; /* When changing the row sizes, you have to match these values with the #DiscussionForum Style in authenticForum.css */ }
#pseudoD3D { grid-column-start: 1; height: 100vh; }
#pseudoDTITLE { grid-column-start: 3; grid-column-end: 3; grid-row-start: 2; }
#pseudoDPO { grid-column-start: 3; grid-column-end: 3; grid-row-start: 3; justify-self: end; }
#CurrentDiscussion { grid-column-start: 2; grid-row: 2 / 5; z-index: 20; }
#pseudoDCA { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; height: 100vh; }
#DiscExtend { position: relative; top: 682px; right: 45px; grid-column-start: 2; grid-row-start: 4; width: 1682px; height: 100%; background: url("../images/DiscBG.png") repeat-y; }
#ProfilePage { grid-column-start: 3; grid-row-start: 1; background: url("../images/ProfileBG.png") no-repeat; min-width: 1920px; min-height: 2160px; display: grid; grid-template-columns: 120px 280px 1296px 190px; grid-template-rows: 34px auto 10px auto 75px; align-content: start; }
.frameNoScript { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; }
iframe#profileFrame { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; border: none; }
#profileAvatar { grid-column-start: 2; grid-row-start: 2; }
#AboutUser { grid-column-start: 3; grid-row-start: 2; grid-row-end: 5; }
#userBlog { position: relative; top: 560px; grid-row-start: 2; grid-column-start: 2; z-index: 3; width: 250px; height: 43px; }
#userBlog input[type="checkbox"] { display: none; }
.blogPic { display: inline-block; background: url("../images/blogUser.png") no-repeat; width: 250px; height: 43px; }
#userBlog input[type="checkbox"] + label + div#showBlogIframe { display: none; }
#userBlog input[type="checkbox"]:checked + label + div#showBlogIframe { display: inline-block; }
#userBlog input[type="checkbox"]:checked + label.blogPic { background: url("../images/blogUserExp.png") no-repeat; }
iframe#userBlogFrame { height: 800px; border: none; }
#userGallery { /* For some odd reason the userGallery does not place itself directly under the profileFrame grid due to using auto (auto makes the profileFrame grid expand to fill up the remaining space I think) so you have to make the userGallery position relative and move it up some, which is why top is -150 */ position: relative; top: -150px; grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 5; justify-items: center; align-items: center; text-align: center; z-index: 2; }
#userGalleryTag { background: url("../images/galleryUser.png") no-repeat; width: 949px; height: 71px; margin-bottom: 50px; }
#sizeFrame { padding-top: 30px; height: 100%; align-content: end; }
iframe#userGalleryFrame { width: 1610px; height: 1000px; border: none; }
#ArtistPage { grid-column-start: 3; grid-row-start: 1; background: url("../images/ProfileBG.png") no-repeat; min-width: 1920px; min-height: 2160px; display: grid; grid-template-columns: 120px 280px 1296px 190px; grid-template-rows: 34px auto 10px auto 75px; align-content: start; }
.artFrameNoScript { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; }
iframe#artProfileFrame { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; border: none; }
#artProfileAvatar { grid-column-start: 2; grid-row-start: 2; }
#artAboutUser { grid-column-start: 3; grid-row-start: 2; grid-row-end: 5; }
#artUserBlog { position: relative; top: 560px; grid-row-start: 2; grid-column-start: 2; z-index: 3; width: 250px; height: 43px; }
#artUserBlog input[type="checkbox"] { display: none; }
.artBlogPic { display: inline-block; background: url("../images/blogUser.png") no-repeat; width: 250px; height: 43px; }
#artUserBlog input[type="checkbox"] + label + div#artShowBlogIframe { display: none; }
#artUserBlog input[type="checkbox"]:checked + label + div#artShowBlogIframe { display: inline-block; }
#artUserBlog input[type="checkbox"]:checked + label.artBlogPic { background: url("../images/blogUserExp.png") no-repeat; }
iframe#artUserBlogFrame { height: 800px; width: 600px; border: none; }
#artUserGallery { position: relative; top: -150px; grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 5; justify-items: center; align-items: center; text-align: center; z-index: 2; }
#artUserGalleryTag { background: url("../images/galleryUser.png") no-repeat; width: 949px; height: 71px; margin-bottom: 50px; }
#artSizeFrame { padding-top: 30px; height: 100%; align-content: end; }
iframe#artUserGalleryFrame { width: 1610px; height: 1000px; border: none; }
#NewsHeader { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; padding: 5px 0px 0px 15px; }
#NewsHeader p.headerStyle { font-family: 'Agency FB', Consolas; font-size: 12pt; color: #647464; }
#NewsHeader a { text-decoration: none; padding: 5px 0px 0px 5px; }
#NewsHeader a:hover { color: orange; }
#HomeMain { padding-top: 5px; grid-column-start: 2; grid-row-start: 2; display: grid; grid-template-columns: 830px 370px 500px; grid-template-rows: auto auto auto auto auto; }
#LCDScreen { background: url("../images/LCDScreenGeneric.png") no-repeat; grid-column-start: 2; grid-row-start: 2; width: 366px; height: 206px; display: grid; grid-template-rows: 42px 160px; }
#LCDScreen:hover { background: url("../images/LCDScreenGenericLit.png") no-repeat; }
#LCDScreen:hover #userLogin { background: url("../images/LCDScreenTopBGGenericLit.png") no-repeat; }
#LCDScreen:hover #userLogin #logUserPassArea, #LCDScreen:hover #userLogin #logUserPassArea .userPass, #LCDScreen:hover #userLogin #logUserPassArea .userLog { background-color: #EAECE8; }
#LCDScreen #userLogin { position: relative; left: 4px; top: 3px; font-family: "Agency FB", Verdana, Tahoma; background: url("../images/LCDScreenTopBGGeneric.png") no-repeat; grid-row-start: 1; width: 354px; height: 42px; display: grid; grid-template-columns: 35px 65px 250px; }
#userLogin #logoutForm { position: relative; top: 7px; left: -6px; grid-column: 2; }
#userLogin .logoutBtn { font-family: "Agency FB", Verdana, Tahoma; font-size: 16pt; font-weight: bold; border: none; background-color: RGBA(0, 0, 0, 0); color: #4b7079; }
#userLogin .logoutBtn:hover { color: #394045; }
#userLogin #loginLabel { position: relative; top: 8px; grid-column: 2; font-weight: bold; color: #4b7079; font-size: 16pt; }
#userLogin #loginLabel:hover { color: #394045; }
#userLogin input[type="checkbox"] { grid-column: 2; display: none; }
#userLogin input[type="checkbox"]:checked + label div#logUserPassArea { display: grid; grid-template-rows: 50px 50px 50px; left: -35px; top: 5px; width: 355px; height: 160px; }
#userLogin input[type="checkbox"] + label div#logUserPassArea { position: relative; z-index: 10; background-color: #D4D9CF; }
.userName { position: relative; top: 8px; grid-column: 3; font-size: 16pt; text-transform: uppercase; font-weight: bold; text-align: end; padding: 0px 10px 0px 0px; align-content: top; color: #4b7079; }
#userLogin input[type="checkbox"] + label div#logUserPassArea #userLPform { display: none; }
#userLogin input[type="checkbox"]:checked + label div#logUserPassArea #userLPform { display: grid; grid-template-columns: 10px 120px 240px; grid-template-rows: 5px 60px 60px 36px; }
#userLPform .userLogLabel { grid-column: 2; grid-row: 2; background: url("../images/usernameBtn.png") no-repeat; width: 120px; }
#userLPform input:focus { outline: none; box-shadow: 0px 5px 0px 0px rgba(155, 155, 155, 0.5); }
#userLPform .userLog { grid-column: 3; grid-row: 2; font-family: "Agency FB", Verdana, Tahoma; font-size: 20px; color: #666666; caret-shape: block; width: 200px; height: 25px; border: solid #cccccc; border-width: 0px 0px 1px 0px; background-color: #D4D9CF; }
#userLPform .userPassLabel { grid-column: 2; grid-row: 3; background: url("../images/passwordBtn.png") no-repeat; width: 120px; }
#userLPform .userPass { grid-column: 3; grid-row: 3; font-family: "Agency FB", Verdana, Tahoma; font-size: 20px; color: #666666; caret-shape: block; width: 200px; height: 25px; border: solid #cccccc; border-width: 0px 0px 1px 0px; background-color: #D4D9CF; }
#userLPform .logUserIn { grid-column: 1/4; grid-row: 4; background: url("../images/loginBtn.png") no-repeat; width: 101px; height: 28px; border: none; justify-self: center; }
#userStatus { position: relative; top: 3px; left: 10px; grid-column: 1 / 4; grid-row: 2; font-family: "Agency FB", Verdana, Tahoma; color: #4b7079; display: grid; grid-template-columns: 20px 90%; grid-template-rows: repeat (4, 40px); }
#userStatus .uBlock { position: relative; left: 6px; top: 3px; grid-column: 1; grid-row: 1; width: 10px; height: 13px; background-color: #4b7079; }
#userStatus .uStatus { grid-column: 2; grid-row: 1; text-transform: uppercase; }
#userStatus .uBlog { position: relative; left: 8px; grid-column: 1 / 3; grid-row: 2; }
#userStatus .uGallery { position: relative; left: 8px; grid-column: 1 / 3; grid-row: 3; }
#userStatus .uMisc { position: relative; left: 8px; grid-column: 1 / 3; grid-row: 4; }
#HomeCategories { grid-column-start: 2; grid-row-start: 3; display: grid; grid-template-columns: 1500px 420px; grid-template-rows: 255px; }
#searchBG { grid-column-start: 1; grid-row-start: 1; display: grid; grid-template-columns: 2px 468px 345px 405px 225px; grid-template-rows: 20px max-content; }
#addOptions { position: relative; top: -3px; grid-column: 1 / 6; grid-row: 1; height: 30px; display: grid; grid-template-columns: 496px 187px 645px 75px; }
.miscAllBtn { grid-column: 2; display: grid; grid-template-columns: 104px 83px; }
.miscAllBtn input[type="checkbox"] { display: none; }
.miscAllBtn input[type="checkbox"] + label > p { font-size: 12px; color: #666666; }
.miscAllBtn input[type="checkbox"] + label.miscOptBtn > p { font-family: "Century Gothic", Verdana, Tahoma; position: relative; top: 3px; left: 40px; width: max-content; }
.miscAllBtn input[type="checkbox"] + label { display: inline-block; background: url("../images/miscAllBtn.png") no-repeat; }
.miscAllBtn input[type="checkbox"]:checked + label { background: url("../images/MiscAllBtnOn.png") no-repeat; }
.miscAllBtn input[type="checkbox"] + label.miscOptBtn { grid-column: 1; width: 104px; height: 33px; background-position: 0px 0px; }
.miscAllBtn input[type="checkbox"]:checked + label.miscOptBtn { width: 104px; height: 33px; background-position: 0px 0px; }
.miscAllBtn input[type="checkbox"] + label.AllOptBtn > p { font-family: "Century Gothic", Verdana, Tahoma; position: relative;top: 3px; left: 20px; width: max-content; }
.miscAllBtn input[type="checkbox"] + label.AllOptBtn { grid-column: 2; width: 83px; height: 33px; background-position: -104px 0px; }
.miscAllBtn input[type="checkbox"]:checked + label.AllOptBtn { grid-column: 2; width: 83px; height: 33px; background-position: -104px 0px; }
.resetBtnDiv { position: relative; top: -4px; grid-column: 4; }
.resetBtn { font-family: "Century Gothic", Verdana, Tahoma; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; width: 123px; height: 34px; padding-left: 25px; background: url("../images/resetBtn.png") no-repeat; border: none; }
.resetBtn:hover { font-weight: bold; }
#genreOptions { grid-row: 2; display: grid; grid-template-columns: 232px 236px; grid-template-rows: 67px 50px 50px 53px; }
#genreOptions .gOpt1 { grid-column: 1; grid-row: 1; z-index: 3; }
#genreOptions .gOpt2 { grid-column: 2; grid-row: 1; z-index: 3; }
#genreOptions .gOpt3 { grid-column: 1; grid-row: 2; z-index: 3; }
#genreOptions .gOpt4 { grid-column: 2; grid-row: 2; z-index: 2; }
#genreOptions .gOpt5 { grid-column: 1; grid-row: 3; z-index: 2; }
#genreOptions .gOpt6 { grid-column: 2; grid-row: 3; z-index: 2; }
#genreOptions .gOpt7 { grid-column: 1; grid-row: 4; z-index: 1; }
#genreOptions .gOpt8 { grid-column: 2; grid-row: 4; z-index: 1; }
.searchGenre { font-family: "Century Gothic", Verdana, Tahoma, Georgia; font-weight: medium; font-size: 20px; width: 468px; height: 220px; grid-column-start: 2; grid-row-start: 2; padding: 1px 0px 0px 1px; }
.searchGenre label > p { text-transform: uppercase; letter-spacing: 0.3em; font-size: 15px; width: 200px; height: 30px; color: #696969; }
.searchGenre input[type="checkbox"] { display: none; }
.searchGenre input[type="checkbox"] + label { background: url("../images/genreOptions.png") no-repeat; }
.searchGenre input[type="checkbox"]:checked + label { background: url("../images/genreOptionsOn.png") no-repeat; }
.searchGenre input[type="checkbox"] + label.genreOpt1 > p { position: relative; top: 24px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt1 { display: inline-block; width: 234px; height: 68px; background-position: 0px 0px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt1 { display: inline-block; width: 232px; height: 67px; background-position: 0px 0px; }
.searchGenre input[type="checkbox"] + label.genreOpt2 > p { position: relative; top: 24px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt2 { display: inline-block; width: 236px; height: 67px; background-position: -232px 0px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt2 { display: inline-block; width: 236px; height: 67px; background-position: -232px 0px; }
.searchGenre input[type="checkbox"] + label.genreOpt3 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt3 { display: inline-block; width: 232px; height: 50px; background-position: 0px -67px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt3 { display: inline-block; width: 232px; height: 50px; background-position: 0px -67px; }
.searchGenre input[type="checkbox"] + label.genreOpt4 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt4 { display: inline-block; width: 236px; height: 50px; background-position: -232px -67px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt4 { display: inline-block; width: 236px; height: 50px; background-position: -232px -67px; }
.searchGenre input[type="checkbox"] + label.genreOpt5 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt5 { display: inline-block; width: 232px; height: 50px; background-position: 0px -117px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt5 { display: inline-block; width: 232px; height: 50px; background-position: 0px -117px; }
.searchGenre input[type="checkbox"] + label.genreOpt6 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt6 { display: inline-block; width: 236px; height: 50px; background-position: -232px -117px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt6 { display: inline-block; width: 236px; height: 50px; background-position: -232px -117px; }
.searchGenre input[type="checkbox"] + label.genreOpt7 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt7 { display: inline-block; width: 232px; height: 53px; background-position: 0px -167px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt7 { display: inline-block; width: 232px; height: 53px; background-position: 0px -167px; }
.searchGenre input[type="checkbox"] + label.genreOpt8 > p { position: relative; top: 8px; left: 20px; }
.searchGenre input[type="checkbox"] + label.genreOpt8 { display: inline-block; width: 236px; height: 53px; background-position: -232px -167px; }
.searchGenre input[type="checkbox"]:checked + label.genreOpt8 { display: inline-block; width: 236px; height: 53px; background-position: -232px -167px; }
.searchMusic { grid-column-start: 3; grid-row-start: 2; width: 345px; height: 220px; display: grid; grid-template-columns: 176px 170px; grid-template-rows: 19px 38px 35px 36px 36px 38px 19px; padding: 4px 0px 0px 5px; }
.searchMusic label > p { font-family: "Century Gothic", Verdana, Tahoma; text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; width: 200px; height: 30px; color: #8C8C8C; }
.searchMusic input[type="checkbox"] { display: none; }
.searchMusic .musicTopBorder { grid-column: 1 / 3; grid-row: 1; width: 345px; height: 19px; }
.searchMusic input[type="checkbox"] + label { background: url("../images/musicOptions.png") no-repeat; }
.searchMusic input[type="checkbox"]:hover + label, .searchMusic input[type="checkbox"]:checked + label { background: url("../images/musicOptionsOn.png") no-repeat; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt1 > p { position: relative; top: 9px; left: 75px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt1 { display: inline-block; grid-column: 1; grid-row: 2; background-position: 0px -19px; width: 176px; height: 38px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt1, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt1 { display: inline-block; grid-column: 1; grid-row: 2; background-position: 0px -19px; width: 176px; height: 38px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt2 > p { position: relative; top: 9px; left: 20px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt2 { display: inline-block; grid-column: 2; grid-row: 3; background-position: -176px -19px; width: 170px; height: 38px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt2, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt2 { display: inline-block; grid-column: 2; grid-row: 3; background-position: -176px -19px; width: 170px; height: 38px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt3 > p { position: relative; top: 9px; left: 73px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt3 { display: inline-block; grid-column: 1; grid-row: 3; background-position: 0px -57px; width: 176px; height: 35px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt3, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt3 { display: inline-block; grid-column: 1; grid-row: 3; background-position: 0px -57px; width: 176px; height: 35px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt4 > p { position: relative; top: 9px; left: 30px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt4 { display: inline-block; grid-column: 2; grid-row: 3; background-position: -176px -57px; width: 170px; height: 35px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt4, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt4 { display: inline-block; grid-column: 2; grid-row: 3; background-position: -176px -57px; width: 170px; height: 35px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt5 > p { position: relative; top: 9px; left: 65px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt5 { display: inline-block; grid-column: 1; grid-row: 4; background-position: 0px -92px; width: 176px; height: 36px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt5, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt5 { display: inline-block; grid-column: 1; grid-row: 4; background-position: 0px -92px; width: 176px; height: 36px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt6 > p { position: relative; top: 9px; left: 45px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt6 { display: inline-block; grid-column: 2;grid-row: 4; background-position: -176px -92px; width: 170px; height: 36px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt6, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt6 { display: inline-block; grid-column: 2; grid-row: 4; background-position: -176px -92px; width: 170px; height: 36px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt7 > p { position: relative; top: 9px; left: 80px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt7 { display: inline-block; grid-column: 1; grid-row: 5; background-position: 0px -128px; width: 176px; height: 36px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt7, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt7 { display: inline-block; grid-column: 1; grid-row: 5; background-position: 0px -128px; width: 176px; height: 36px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt8 { display: inline-block; grid-column: 2; grid-row: 5; background-position: -176px -128px; width: 170px; height: 36px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt8 > p { position: relative; top: 9px; left: 30px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt8, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt8 { display: inline-block; grid-column: 2; grid-row: 5; background-position: -176px -128px; width: 170px; height: 36px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt9 > p { position: relative; top: 9px; left: 105px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt9 { display: inline-block; grid-column: 1; grid-row: 6; background-position: 0px -164px; width: 176px; height: 45px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt9, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt9 { display: inline-block; grid-column: 1; grid-row: 6; background-position: 0px -164px; width: 176px; height: 45px; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt10 > p { position: relative; top: 9px; left: 20px; width: max-content; height: max-content; }
.searchMusic input[type="checkbox"] + label.musicGenreOpt10 { display: inline-block; grid-column: 2; grid-row: 6; background-position: -176px -164px; width: 170px; height: 45px; }
.searchMusic input[type="checkbox"]:hover + label.musicGenreOpt10, .searchMusic input[type="checkbox"]:checked + label.musicGenreOpt10 { display: inline-block; grid-column: 2; grid-row: 6; background-position: -176px -164px; width: 170px; height: 45px; }
.searchMusic .musicBtmBorder { grid-column: 1 / 3; grid-row: 7; width: 345px; height: 19px; }
.searchType { grid-column-start: 4; grid-row-start: 2; display: grid; grid-template-columns: 126px 123px 141px; grid-template-rows: 73px 63px 83px; width: 390px; height: 220px; padding: 10px 0px 0px 5px; }
.searchType label { display: inline-block; text-align: center; place-content: start; font-family: "Century Gothic", Verdana; font-size: 12px; }
.searchType input[type="checkbox"] { display: none; }
.searchType input[type="checkbox"] + label.type1 { background: url("../images/typeOptions.png") no-repeat; width: 126px; height: 73px; background-position: 0px 0px; }
.searchType input[type="checkbox"]:checked + label.type1 { background: url("../images/typeOptionsOn.png") no-repeat; width: 126px; height: 73px; background-position: 0px 0px; }
.searchType input[type="checkbox"] + label.type2 { background: url("../images/typeOptions.png") no-repeat; width: 123px; height: 73px; background-position: -126px 0px; }
.searchType input[type="checkbox"]:checked + label.type2 { background: url("../images/typeOptionsOn.png") no-repeat; width: 123px; height: 73px; background-position: -126px 0px; }
.searchType input[type="checkbox"] + label.type3 { background: url("../images/typeOptions.png") no-repeat; width: 141px; height: 73px; background-position: -249px 0px; }
.searchType input[type="checkbox"]:checked + label.type3 { background: url("../images/typeOptionsOn.png") no-repeat; width: 141px; height: 73px; background-position: -249px 0px; }
.searchType input[type="checkbox"] + label.type4 { background: url("../images/typeOptions.png") no-repeat; width: 126px; height: 63px; background-position: 0px -73px; }
.searchType input[type="checkbox"]:checked + label.type4 { background: url("../images/typeOptionsOn.png") no-repeat; width: 126px; height: 63px; background-position: 0px -73px; }
.searchType input[type="checkbox"] + label.type5 { background: url("../images/typeOptions.png") no-repeat; width: 123px; height: 63px; background-position: -126px -73px; }
.searchType input[type="checkbox"]:checked + label.type5 { background: url("../images/typeOptionsOn.png") no-repeat; width: 123px; height: 63px; background-position: -126px -73px; }
.searchType input[type="checkbox"] + label.type6 { background: url("../images/typeOptions.png") no-repeat; width: 141px; height: 63px; background-position: -249px -73px; }
.searchType input[type="checkbox"]:checked + label.type6 { background: url("../images/typeOptionsOn.png") no-repeat; width: 141px; height: 63px; background-position: -249px -73px; }
.searchType input[type="checkbox"] + label.type7 { background: url("../images/typeOptions.png") no-repeat; width: 126px; height: 83px; background-position: 0px -136px; }
.searchType input[type="checkbox"]:checked + label.type7 { background: url("../images/typeOptionsOn.png") no-repeat; width: 126px; height: 83px; background-position: 0px -136px; }
.searchType input[type="checkbox"] + label.type8 { background: url("../images/typeOptions.png") no-repeat; width: 123px; height: 83px; background-position: -126px -136px; }
.searchType input[type="checkbox"]:checked + label.type8 { background: url("../images/typeOptionsOn.png") no-repeat; width: 123px; height: 83px; background-position: -126px -136px; }
.searchType input[type="checkbox"] + label.type9 { background: url("../images/typeOptions.png") no-repeat; width: 141px; height: 83px; background-position: -249px -136px; }
.searchType input[type="checkbox"]:checked + label.type9 { background: url("../images/typeOptionsOn.png") no-repeat; width: 141px; height: 83px; background-position: -249px -136px; }
.searchResults { font-family: "Century Gothic", Verdana, Tahoma; height: max-content; grid-column-start: 5; grid-row-start: 2; display: grid; grid-template-columns: 200px; grid-template-rows: 30px 45px 70px; padding: 22px 0px 0px 5px; justify-items: center; }
.artSearch { background: url("../images/artistSearch.png") no-repeat; width: 230px; height: 27px; grid-column-start: 1; grid-row-start: 1; }
.artSearcher input:focus { outline: none; box-shadow: 0px 1px 0px 0px rgba(155, 155, 155, 0.5); }
.artSearcher input { text-transform: uppercase; font-family: "Agency FB", Verdana, Tahoma; font-size: 20px; color: #666666; caret-shape: block; background: url("../images/artistSearcherFieldGeneric.png") no-repeat; width: 220px; height: 35px; padding-left: 5px; grid-column-start: 1; grid-row-start: 2; border: none; }
.ipr { width: 232px; height: 64px; grid-column-start: 1; grid-row-start: 3; padding: 0px 0px 0px 5px; display: grid; grid-template-columns: 78px 62px 90px; justify-self: bottom; }
.ipr input[type="radio"] { display: none; }
.ipr input[type="radio"] + label.box3 > p { position: relative; top: 17px; left: 50px; text-align: center; font-family: "Century Gothic", Verdana, Tahoma; width: max-content; }
.ipr input[type="radio"] + label.box3 { grid-column: 1; display: inline-block; background: url("../images/imgPerRowField.png") no-repeat;background-position: 0px 0px; width: 78px; height: 64px; }
.ipr input[type="radio"]:checked + label.box3 { font-weight: bold; color: orange; }
.ipr input[type="radio"] + label.box4 > p { position: relative; top: 17px; left: 33px; text-align: center; font-family: "Century Gothic", Verdana, Tahoma; width: max-content; }
.ipr input[type="radio"] + label.box4 { grid-column: 2; display: inline-block; background: url("../images/imgPerRowField.png") no-repeat; background-position: -78px 0px; width: 62px; height: 64px; }
.ipr input[type="radio"]:checked + label.box4 { font-weight: bold; color: orange; }
.ipr input[type="radio"] + label.box8 > p { position: relative; top: 17px; left: 30px; text-align: center; font-family: "Century Gothic", Verdana, Tahoma; width: max-content; }
.ipr input[type="radio"]:checked + label.box8 { font-weight: bold; color: orange; }
.ipr input[type="radio"] + label.box8 { grid-column: 3; display: inline-block; background: url("../images/imgPerRowField.png") no-repeat; background-position: -140px 0px; width: 90px; height: 64px; }
.artSearchBtn { text-transform: uppercase; font-family: "Century Gothic", Verdana, Tahoma; font-size: 14px; background: url("../images/searchButton.png") no-repeat; width: 196px; height: 39px; border: none; padding-bottom: 10px; text-align: center; }
.artSearchBtn:hover { font-weight: bold; }
#HomeGallery { grid-column-start: 2; grid-row-start: 4; display: grid; grid-auto-flow: column; max-width: 1545px; }
iframe.homeFrame { border: none; height: 100%; width: 1545px; max-width: 1545px; }
#HomeLinks { grid-column-start: 3; display: grid; grid-template-rows: 5px 130px 130px 130px 130px 130px; justify-items: center; }
#HomeLinks input[type="radio"] { display: none; }
#HomeLinks input[type="radio"] + label { background: url('../images/HomeNavigationIcons.png') no-repeat; cursor: pointer; }
#HomeLinks input[type="radio"]:hover + label { background: url('../images/HomeNavigationIconsHover.png') no-repeat; cursor: pointer; }
#HomeLinks input[type="radio"] + label.hthLabel { display: block; grid-column: 1; grid-row: 2; background-position: 0px 0px; width: 128px; height: 130px; }
#HomeLinks input[type="radio"] + label.htsLabel { display: block; grid-column: 1; grid-row: 3; background-position: 0px -143px; width: 128px; height: 130px; }
#HomeLinks input[type="radio"] + label.htdLabel { display: block; grid-column: 1; grid-row: 4; background-position: 0px -286px; width: 128px; height: 130px; }
#HomeLinks input[type="radio"] + label.htpLabel { display: block; grid-column: 1; grid-row: 5; background-position: 0px -429px; width: 128px; height: 130px; }
#HomeLinks input[type="radio"] + label.htaLabel { display: block; grid-column: 1; grid-row: 6; background-position: 0px -572px; width: 128px; height: 130px; }
#ShowLinks { grid-column-start: 5; display: grid; grid-template-rows: 40px 130px 130px 130px 130px 130px; justify-items: center; z-index: 51; }
#ShowLinks input[type="radio"] { display: none; }
#ShowLinks input[type="radio"] + label { background: url('../images/showNavigationIcons.png') no-repeat; cursor: pointer; }
#ShowLinks input[type="radio"]:hover + label { background: url('../images/showNavigationIconsHover.png') no-repeat; cursor: pointer; }
#ShowLinks input[type="radio"] + label.sthLabel { display: block; grid-row: 2; background-position: 0px 0px; width: 76px; height: 62px; }
#ShowLinks input[type="radio"] + label.stdLabel { display: block; grid-row: 3; background-position: 0px -116px; width: 76px; height: 48px; }
#ShowLinks input[type="radio"] + label.staLabel { display: block; grid-row: 4; background-position: 0px -210px; width: 76px; height: 47px; }
#ShowLinks input[type="radio"] + label.stpLabel { display: block; grid-row: 5; background-position: 0px -290px; width: 76px; height: 56px; }
#ShowLinks input[type="radio"] + label.stabLabel { display: block; grid-row: 6; background-position: 0px -385px; width: 76px; height: 58px; }
#DiscLinks { grid-column-start: 5; grid-row-start: 1; display: grid; grid-template-rows: 62px 174px 138px 126px 137px 138px; place-items: center; z-index: 51; }
#DiscLinks input[type="radio"] { display: none; }
#DiscLinks input[type="radio"] + label { background: url('../images/DiscNavigationIcons.png') no-repeat; cursor: pointer; }
#DiscLinks input[type="radio"]:hover + label { background: url('../images/DiscNavigationIconsHover.png') no-repeat; cursor: pointer; }
#DiscLinks input[type="radio"] + label.dthLabel { display: block; grid-column: 1; grid-row: 2; background-position: 0px 0px; width: 120px; height: 123px; }
#DiscLinks input[type="radio"] + label.dtsLabel { display: block; grid-column: 1; grid-row: 3; background-position: 0px -174px; width: 120px; height: 96px; }
#DiscLinks input[type="radio"] + label.dtdLabel { display: block; grid-column: 1; grid-row: 4; background-position: 0px -296px; width: 120px; height: 110px; }
#DiscLinks input[type="radio"] + label.dtpLabel { display: block; grid-column: 1; grid-row: 5; background-position: 0px -430px; width: 120px; height: 116px; }
#DiscLinks input[type="radio"] + label.dtaLabel { display: block; grid-column: 1; grid-row: 6; background-position: 0px -552px; width: 120px; height: 138px; }
#ArtistProfileLinks { grid-column-start: 4; grid-row-start: 2; display: grid; grid-template-rows: 17px 176px 132px 127px 130px 130px; justify-items: center; }
#artRibbonBG { background: url('../images/DrawnRibbon.png') no-repeat; width: 142px; height: 653px; }
#ArtistProfileLinks input[type="radio"] { display: none; }
#ArtistProfileLinks input[type="radio"] + label { background: url('../images/aboutNavigationIcons.png') no-repeat; cursor: pointer; }
#ArtistProfileLinks input[type="radio"]:hover + label { background: url('../images/aboutNavigationIconsHover.png') no-repeat; cursor: pointer; }
#ArtistProfileLinks input[type="radio"] + label.artPthLabel { display: block; grid-row: 2; background-position: 0px 0px; width: 107px; height: 120px; }
#ArtistProfileLinks input[type="radio"] + label.artPtsLabel { display: block; grid-row: 3; background-position: 0px -176px; width: 107px; height: 77px; }
#ArtistProfileLinks input[type="radio"] + label.artPtdLabel { display: block; grid-row: 4; background-position: 0px -307px; width: 107px; height: 85px; }
#ArtistProfileLinks input[type="radio"] + label.artPtpLabel { display: block; grid-row: 5; background-position: 0px -434px; width: 107px; height: 114px; }
#ProfileLinks { grid-column-start: 4; grid-row-start: 2; display: grid; grid-template-rows: 17px 176px 132px 127px 130px 130px; justify-items: center; }
#ribbonBG { background: url('../images/DrawnRibbon.png') no-repeat; width: 142px; height: 653px; }
#ProfileLinks input[type="radio"] { display: none; }
#ProfileLinks input[type="radio"] + label { background: url('../images/profileNavigationIcons.png') no-repeat; cursor: pointer; }
#ProfileLinks input[type="radio"]:hover + label { background: url('../images/profileNavigationIconsHover.png') no-repeat; cursor: pointer; }
#ProfileLinks input[type="radio"] + label.pthLabel { display: block; grid-row: 2; background-position: 0px 0px; width: 107px; height: 120px; }
#ProfileLinks input[type="radio"] + label.ptsLabel { display: block; grid-row: 3; background-position: 0px -176px; width: 107px; height: 77px; }
#ProfileLinks input[type="radio"] + label.ptdLabel { display: block; grid-row: 4; background-position: 0px -307px; width: 107px; height: 85px; }
#ProfileLinks input[type="radio"] + label.ptaLabel { display: block; grid-row: 5; background-position: 0px -434px; width: 107px; height: 114px; }
#AboutPage { grid-column-start: 3; grid-row-start: 1; background: url("../images/AboutBG.png") no-repeat; min-width: 1920px; min-height: 2160px; display: grid; grid-template-columns: 120px 280px 1296px 190px; grid-template-rows: 34px max-content max-content max-content; font-family: "Century Gothic", Verdana, Tahoma; }
#ArtAvatar { grid-column-start: 2; grid-row-start: 2; }
#AboutPage #MissionStatement { grid-column: 3; grid-row: 2; white-space: pre-wrap; }
#AboutPage #MissionStatement .aboutHeader { color: #ffffff; font-size: 25pt; font-weight: bold; text-shadow: 1px 1px 3px #555555; }
#SiteFAQ { grid-column: 3; grid-row: 3; white-space: pre-wrap; }
#joinArt { grid-column: 3; grid-row: 4; }
#joinArt .joinForm { background-color: #cccccc; }
#AboutLinks { grid-column-start: 4; grid-row-start: 2; display: grid; grid-template-rows: 17px 176px 132px 127px 130px 130px; justify-items: center; }
#aboutRibbonBG { background: url('../images/DrawnRibbon.png') no-repeat; width: 142px; height: 653px; }
#AboutLinks input[type="radio"] { display: none; }
#AboutLinks input[type="radio"] + label { background: url('../images/aboutNavigationIcons.png') no-repeat; cursor: pointer; }
#AboutLinks input[type="radio"]:hover + label { background: url('../images/aboutNavigationIconsHover.png') no-repeat; cursor: pointer; }
#AboutLinks input[type="radio"] + label.athLabel { display: block; grid-row: 2; background-position: 0px 0px; width: 107px; height: 120px; }
#AboutLinks input[type="radio"] + label.atsLabel { display: block; grid-row: 3; background-position: 0px -176px; width: 107px; height: 77px; }
#AboutLinks input[type="radio"] + label.atdLabel { display: block; grid-row: 4; background-position: 0px -307px; width: 107px; height: 85px; }
#AboutLinks input[type="radio"] + label.atpLabel { display: block; grid-row: 5; background-position: 0px -434px; width: 107px; height: 114px; }