/************ FONTS ************/ @font-face { font-family: 'Roboto Condensed Bold'; src: url('webfonts/Roboto_Condensed/RobotoCondensed-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Roboto Condensed'; src: url('webfonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('webfonts/Roboto_Regular/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto Italic'; src: url('webfonts/Roboto_Regular/Roboto-Italic.ttf') format('truetype'); font-weight: normal; font-style: normal; } /*new import font*/ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap'); /***************** EMERGENCY BUTTON AND MOCKUPS****************/ div#backend-data-button, div#container-backend-data-button { max-width: 365px !important; min-height: 48px !important; font-family: 'Roboto Condensed Bold', sans-serif; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; color: #ffffff; cursor: pointer; background-color: var(--blue-blue); border-radius: 6px; margin: 0 auto; display: flex; align-items: center; justify-content: center; margin-top: 20px; } img.placeholder-style, .placeholder-style { width: 100%; } div#container-backend-data-button a{ text-decoration: none; } div#backend-data-button span{ color: #FFFFFF; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; text-transform: uppercase; } img.artwork-mockuppage{ width: 80%; padding: 0 10%; } /************ LAYOUT ************/ :root { --black: #000000; --blue-blue: #1b42d8; --white: #fdfdfd; --brown-grey: #7f7f7f; --very-light-pink: #e9e9e9; } html { margin:0; padding:0; height: 100vh; width: 100vw; font-family: 'Roboto', sans-serif; font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { font-family: Roboto; font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: var(--black); margin: 0; padding: 0; } body i { font-family: 'Roboto'; font-weight: normal; font-style: italic; } /*Header*/ div#header{ width: 100%; background-color: #FFFFFF; height: 134px; border-bottom: 3px solid #000; display: flex; width: 100%; } div#header-top{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #000; } #title-nav{ width: 100%; } div#animatedlogo{ display: flex; } div#animatedlogo img{ width: auto; max-height: 130px; justify-self: center; } div#header-title{ font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; font-size: 25px; line-height: 35px; letter-spacing: 1.88px; } div#header-title a:link, div#header-title a:visited { text-decoration: none; color: #000000; } div#header-keyword-search span { font-size: 20px; font-weight: bold; padding: 2px 10px; } div#header-top div#header-keyword-search input[type=text]{ background-color: #e9e9e9; color: #7f7f7f; font-size: 18px; line-height: 38px; letter-spacing: 1px; font-family: 'Roboto Condensed', sans-serif; width: 257px; height: 43px; border: none; padding: 2px 2px 2px 12px; } div#header-top div#header-keyword-search:after { display: inline-block; content: ' '; background-image: url('Icons/icn_search.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 0px 16px 0px -32px; } div#header-top, div#navigation{ width: 100%; height: 67px; padding-right: 80px; } div#navigation{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; } #nav-left { display: flex; flex-direction: row; } #nav-right { display: flex; flex-direction: row; } #nav-left div, #nav-right div { padding: 0px 24px; } #nav-left div:first-child, #nav-right div:first-child{ padding-left: 0px; } #nav-right div:last-child { padding-right: 0px; } div#navigation a{ font-family: 'Roboto Condensed', sans-serif; text-decoration: none; font-weight: normal; color: var(--black); font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320))); line-height: 26px; /* line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 320))); */} div#navigation a:hover { text-decoration: underline; } div#navigation a:active { color: #1b42d8; text-decoration: none; } /*Footer*/ div#footer{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; padding: 55px 80px; width: 100%; bottom: 0; background-color: black; color:white; } .footer-left, .footer-right { display: flex; flex-direction: row; width: 100%; } .footer-left{ flex-wrap: nowrap; justify-content: start;} .footer-right{ flex-wrap: wrap; justify-content: end; flex-wrap: nowrap; margin: 0px 0px 0px 56px; } #footer-credit , #footer-funds { display: flex; flex-direction: column; flex-wrap: nowrap; } #footer-credit, #footer-socials{ padding: 0px 56px 0px 0px; } #footer-socials-links { display: flex; flex-direction: column; flex-wrap: nowrap; } div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{ text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.5; letter-spacing: 1.5px; color: var(--brown-grey); } div#footer-img-br img{ width: 70px; height: auto; padding-top: 20px; margin-left: -8px; } div#footer-img-br figcaption{ font-family: 'Roboto', sans-serif; font-size: 16px; margin: 0; padding: 0; line-height: 26px; font-style: normal; font-weight: normal; white-space: nowrap; margin-top: -8px; } div#footer-img-others{ display: flex; flex-direction: row; flex-wrap: nowrap; padding-top: 26px; } div#footer-img-lottery{ padding-left: 60px; } div#footer-img-lottery img{ width: 124px; height: auto; } div#footer-img-wiki img{ width: 56px; height: auto; } div#footer-socials-links a{ text-decoration: none; color:#FFFFFF; font-family: 'Roboto', sans-serif; font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 28.4px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; } div#contactform{ display: flex; align-items: center; justify-content: center; } #contactform span, a.footer-contact { text-decoration: none; /* color:#FFFFFF;*/ } div#contactform:hover { color: white; background-color: var(--blue-blue); } #footer-contact-form { width: 100%; max-width: 365px; } @media screen and (min-width:0px) and (max-width: 1000px) { div#footer{ flex-wrap: wrap; } .footer-left{ justify-content: space-between;} .footer-right{ justify-content: space-between; margin: 0px;} #footer-title-others, #footer-title-contact {text-align: right;} #footer-contact-form {margin: 30px 0px 0px 0px;} #footer-credit, #footer-socials{ padding: 0px; } } @media screen and (min-width:0px) and (max-width: 768px) { #footer-title-others {text-align: right;} #footer-title-contact {text-align: left;} #footer-socials {width: 100%; } #footer-socials-links{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; } div#contactform {width: 100%; max-width: none;} #footer-contact-form { width: 100%; max-width: none;} .footer-left, .footer-right { width: 100%; } .footer-right { flex-wrap: wrap; } #footer-credit, #footer-socials{ padding: 0px; } #footer-right { margin: 0px; } #footer-socials, #footer-contact-form {margin: 30px 0px 0px 0px;} } /*Titles all pages*/ /*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */ div.pagetitle, .mw-parser-output h1{ margin: 60px 80px 30px 80px; font-size: 25px; font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1.88px; line-height: 35px; } /******************************************************/ /************ BROWSING SEARCHING INDEXING ************/ /****************************************************/ /************ INDEXES ************/ table, th, td { border-bottom: 1px solid black; border-collapse: collapse; text-align: left; } #artistsindex-table_wrapper{ overflow-x:auto; } #artistsindex-table, #publishersindex-table, #zinesindex-table, #selfpublishedindex-table { width: 100%; } #artistsindex-table_wrapper, #publishersindex-table_wrapper, #selfpublishedindex-table_wrapper, #zinesindex-table_wrapper {background-color: #E9E9E9;} table {background-color: #fdfdfd} thead tr th:first-child { padding: 0px 0px 0px 80px } thead tr th:last-child { padding: 0px 80px 0px 0px } tr { padding: 10px 80px 10px 80px; } th { padding: 16px; } thead tr th{ text-transform: uppercase; color:#7f7f7f; font-size: 16px; letter-spacing: 1.5px; line-height: 24px; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; border-bottom: black 3px solid; } tbody tr th{ font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 26px; font-family: 'Roboto', sans-serif; font-weight: normal; } tbody tr th a{ text-decoration: none; color: #000000; } .idnumber { padding: 16px 0px 16px 80px; min-width: 56px; max-width: 128px; /*56px * 2 + 16*/ } .label a { font-family: Roboto Condensed Bold, sans-serif; font-weight: bold; min-width: 128px; max-width: 272px;/*56px * 4 + 16 * 3*/ color: #000000; } .altaliases { min-width: 128px; max-width: 272px;/*56px * 4 + 16 * 3*/ } .description { padding: 16px 80px 16px 0px; min-width: 128px; max-width: 560px;/*56px * 8 + 16 * 7*/ } .idnumber, .label, .altaliases, .description{ vertical-align: top;} #artistsindex-table_paginate{ background-color: #E9E9E9; } .dataTables_paginate { display: flex; flex-direction: row; justify-content: space-between; align-content: baseline; margin-left: auto; margin-right: auto; padding-top: 42px; padding-bottom: 52px; font-family: Roboto Condensed; font-size: 14px; line-height: 48px; font-weight: bold; font-stretch: condensed; min-height: 48px; max-width: 376px; } .dataTables_paginate > span { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } a.current { height: 36px; width: 36px; border-radius: 6px; background-color: #1B42D8; color: white; display: flex; align-content: baseline; margin-top: 6px; align-items: center; justify-content: center; cursor: pointer; } .paginate_button { cursor: pointer; } a.paginate_button.previous, a.paginate_button.next{ display: flex; flex-direction: row; font-size: 0; } a.paginate_button.previous:before { display: inline-block; content: ' '; background-image: url('Icons/icn_arrow_left.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 16px 16px 0px 0px; } a.paginate_button.next:after { display: inline-block; content: ' '; background-image: url('Icons/icn_arrow_right.svg'); background-size: 16px 16px; height: 16px; width: 16px; margin: 16px 0px 0px 16px; } /************ TEXT STYLES************/ .title { /* width: 200px; height: 26px;*/ font-family: Roboto Condensed; font-size: 18px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: 1.44; letter-spacing: 0.9px; color: var(--black); } .date { font-family: Roboto; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: var(--black); } /************ BUTTONS ************/ .primary-button { max-width: 365px; min-height: 48px; font-family: 'Roboto Condensed Bold', sans-serif; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; color: #ffffff; cursor: pointer; background-color: var(--blue-blue); border-radius: 6px; } .secondary-button { max-width: 365px; min-height: 48px; font-family: 'Roboto Condensed Bold', sans-serif; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); line-height: 16px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; text-align: center; text-decoration: none; cursor: pointer; background-color: #ffffff; color: var(--blue-blue); border: solid 1px var(--blue-blue); border-radius: 6px; } .artwork-button { width: 76px; height: 24px; font-family: Roboto; font-size: 16px; font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.5; letter-spacing: 1.5px; text-align: center; color: var(--black); cursor: pointer; } /************ HOME & Browse Archive Layout ************/ /*Home Top div*/ div#home-top-div{ height: 75vh; /* 661px;*/ width: 100%; overflow: hidden; position: relative; border-bottom: solid black 3px; background-color: #e9e9e9; } .heading_A { font-family: Roboto Condensed; font-size: 40px; font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.45; letter-spacing: normal; color: var(--black); margin-left: 150px; margin-bottom: 26px; } #home-top-div .heading_A { position: relative; max-width: 634px; z-index: 99; } #home-top-div p { margin-bottom: 0px; } #home-top-div #wrapper-bt-vid { display: flex; flex-direction: row; justify-content: space-between; position: relative; z-index: 99; } #home-top-div #wrapper-vid { margin: 0px 150px 0px 0px; width: 50%; } #home-top-div #wrapper-bt{ margin: 36px 26px 0px 150px; width: 50%; } #home-top-div #wrapper-vid video { max-width: 600px; width: 100%; height: auto; position: relative; z-index: 99; } #home-top-div #wrapper-top-buttons{ display: flex; align-items: center; justify-content: center; margin-bottom: 26px; } #home-top-div .primary-button a, #home-top-div .primary-button a:visited { color: #fdfdfd; text-decoration: none; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); } #home-top-div .primary-button:hover, #home-top-div .primary-button a:hover { color: white; background-color: black; } #home-top-div .secondary-button a, #home-top-div .secondary-button a:visited { color: var(--blue-blue); text-decoration: none; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); } #home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover { color: white; background-color: var(--blue-blue); } #home-top-div img { position: absolute; width: 100%; z-index: 0; max-width: 400px; left: -600px; padding-right: 60px; padding-left: 60px; animation-name: move; animation-duration: 40s; animation-iteration-count: infinite; /* or infinite*/ animation-fill-mode: forwards; animation-direction: normal; animation-timing-function: linear; /* or ease*/ opacity: 0.4; /* 0.3 */ } #home-top-div img:nth-of-type(even) { } #home-top-div img:nth-of-type(odd) { } #home-top-div img:nth-of-type(2n+1) { } /*#home-top-div img:nth-of-type(1)*/ .banner-image-0 { animation-delay: 0s; padding-top: 200px; } /*#home-top-div img:nth-of-type(2) */ .banner-image-1 { animation-delay: 6s; padding-top: -60px; } /*#home-top-div img:nth-of-type(3) */ .banner-image-2 { animation-delay: 12s; padding-top: 430px; } /*#home-top-div img:nth-of-type(4)*/ .banner-image-3 { animation-delay: 18s; padding-top: 100px; } /*#home-top-div img:nth-of-type(5) */ .banner-image-4 { animation-delay: 26s; padding-top: -60px; } /*#home-top-div img:nth-of-type(6)*/ .banner-image-5 { animation-delay: 34s; padding-top: 300px; } /*#home-top-div img:nth-of-type(7)*/ .banner-image-6{ animation-delay: 40s; } /*#home-top-div img:nth-of-type(8)*/ .banner-image-7 { animation-delay: 46s; } /*#home-top-div img:nth-of-type(9) */ .banner-image-8 { animation-delay: 52s; } /*#home-top-div img:nth-of-type(10) */ .banner-image-9 { animation-delay: 58s; } /*#home-top-div img:nth-of-type(11)*/ .banner-image-10 { animation-delay: 64s; } /*#home-top-div img:nth-of-type(12) */ .banner-image-11 { animation-delay: 70s; } .banner-image-6, .banner-image-7, .banner-image-8, .banner-image-9, .banner-image-10, .banner-image-11 { display: none; } @keyframes move { 0% { -webkit-transform: translateX(0vw); -ms-transform: translateX(0vw); -moz-transform: translateX(0vw); transform: translateX(0vw); } 100% { -webkit-transform: translateX(200vw); /* 250vw*/ -ms-transform: translateX(200vw); -moz-transform: translateX(200vw); transform: translateX(200vw); } } @-webkit-keyframes move{ 0% { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(1650px); /* 250vw*/ -ms-transform: translateX(1650px); -moz-transform: translateX(1650px); transform: translateX(1650px); } } /* ARCHIVE PREVIEW */ img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs { width: 100%; } div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items { font-size: 16px; font-family: 'Roboto Condensed', sans-serif; margin: 0 auto; display: flex; flex-direction: column; /* align-content: start; center;*/ justify-content: space-between; height: 100%; } div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a { font-size: 18px; line-height: 26px; font-family: 'Roboto Condensed Bold', sans-serif; color: #000000; text-decoration: none; /* display: flex; justify-content: left;*/ } /*div.home-recent-items span, div.browsethearchive-items span { display: flex; justify-content: left; } */ div.home-recent-items-top, div.browsethearchive-items-top, div.selfpublishedindex-items-top, div.zinesindex-items-top { display: flex; flex-direction: column; margin: auto; } div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { display: flex; flex-direction: column; flex-shrink: 0; flex-basis: 140px; justify-content: flex-start; } div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom, div.zinesindex-items-bottom { padding: 20px 0px 0px 0px; } div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, div#zinesindex-grid { width: 100%; padding: 0px 80px; display: grid; /*text-align: center;*/ grid-gap: 1rem; } div.home-show-wrapper{ width: 100%; margin: 60px auto; display: flex; align-items: center; justify-content: center; } div.home-show-wrapper a{ display: flex; align-items: center; justify-content: center; width: 100%; } div.home-show-wrapper a:hover { color: white; background-color: black; } @media (min-width: 768px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1400px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } } /************ ABOUT & TEXT TEMPLATES ************/ .mw-parser-output { width: 100%; padding: 0px 80px 60px 80px; display: grid; row-gap: 0rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); } .mw-parser-output h1, .mw-parser-output h2 { grid-column-start: 1; grid-column-end: 18; } .mw-parser-output h1 { margin: 60px 0px 30px 0px; } .mw-parser-output h1, .Heading_B { font-family: Roboto Condensed Bold; font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320))); font-weight: bold; font-stretch: condensed; font-style: normal; text-transform: uppercase; line-height: 35px; letter-spacing: 1.13px; color: var(--black); } .mw-parser-output blockquote{ grid-column-start: 1; grid-column-end: 8; grid-row-start: 2; grid-row-end: 2; margin: 0 !important; } .mw-parser-output blockquote p { font-family: Roboto Condensed; font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.56; letter-spacing: normal; color: var(--blue-blue); } .mw-parser-output blockquote + p { grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .mw-parser-output p { margin: 0px 0px 30px 0px; } /*.mw-parser-output h2 { font-family: Roboto Condensed; font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; letter-spacing: 1.13px; color: var(--black); margin: 0px 0px 30px 0px; }*/ h2:nth-of-type(1), .Heading_C, .mw-parser-output h2, h2 { font-family: Roboto Condensed; font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 40px; letter-spacing: 1.13px; color: var(--black); margin: 0px 0px 30px 0px; } h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 { font-family: Roboto Condensed; font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 35px; letter-spacing: 1.13px; color: var(--black); } .Heading_E { font-family: Roboto Condensed; font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; text-transform: uppercase; font-style: normal; line-height: 20px; letter-spacing: 1.13px; color: var(--black); } .mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 { grid-column-start: 4; grid-column-end: 15; } .mw-parser-output ul { font-family: Roboto; font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: var(--black); margin: 0; padding: 0; list-style-type: circle; margin: 0px 0px 30px 56px; } .mw-parser-output p img { width: 100%; height: auto; } .mw-parser-output img { font-family: Roboto ; font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); text-decoration: none; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: var(--black); } .mw-parser-output a { font-family: Roboto ; font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: #163adc; } a:hover , .mw-parser-output a:hover { color: var(--black); } /************ BROWSE THE ARCHIVE Pagination ************/ .current { background-color: #1b42d8; } #browsethearchive-pagin li.current a, #zinesindex-pagin li.current a, #selfpublishedindex-pagin li.current a{ color: #FFFFFF; font-weight: bold; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; } #browsethearchive-pagin li a, #zinesindex-pagin li a, #selfpublishedindex-pagin li a { color: #000000; font-weight: bold; text-decoration: none; font-family: 'Roboto Condensed', sans-serif; } ul#browsethearchive-pagin, ul#zinesindex-pagin, ul#selfpublishedindex-pagin { display: flex; flex-direction: row; justify-content: center; /*space-around */ align-content: baseline; margin-left: auto; margin-right: auto; padding-top: 42px; padding-bottom: 52px; padding-left: 80px; padding-right: 80px; font-family: Roboto Condensed; font-size: 14px; line-height: 48px; font-weight: bold; font-stretch: condensed; /*min-height: 48px; max-width: 376px;*/ } #browsethearchive-pagin li, #zinesindex-pagin li, #selfpublishedindex-pagin li { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; } div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedindex-pagination { width: 100%; background-color: #e9e9e9; border-top: black solid 3px; height: 139px; text-align: center; } /************ BROWSE BY CATEGORY ************/ div#browsebycategory-listcategories{ margin: 0px 80px 60px 80px; } div.browsebycategory-categories{ margin: 22px 0px; padding: 16px; border-radius: 6px; background-color: var(--blue-blue); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } div.browsebycategory-categories a { font-family: 'Roboto Condensed Bold', sans-serif; color: #ffffff; text-decoration: none; font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320))); } div.browsebycategory-categories:hover { color: white; background-color: black; } /************ SEARCH TOOLS ************/ /*********************************************/ /************ PERSON ************/ /*******************************************/ /************ ARTWORK ************/ .artwork-box span { width: 100%; display: flex; align-items: center; justify-content: center; } .artwork-box { font-family: Roboto Condensed; font-size: 16px; font-weight: normal; font-stretch: condensed; font-style: normal; line-height: 1.5; letter-spacing: 1.5px; text-align: center; color: var(--black); border: solid 1px var(--black); margin: 30px 80px 0px 80px; padding: 6px 10px; max-width: 96px; } .artwork-title { margin: 20px 80px 30px 80px; font-size: 25px; font-family: 'Roboto Condensed Bold', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 1.88px; line-height: 35px; } .artwork-intro { font-family: Roboto; font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.63; letter-spacing: normal; color: var(--black); margin: 20px 80px 30px 80px; } .artwork-nav { display: flex; flex-direction: row; width: 100%; justify-content: space-evenly; border-bottom: 3px solid #000; } .artwork-nav-label, .label-item { margin: 25px 0 12px 1px; font-family: Roboto Condensed; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); font-weight: normal; font-stretch: condensed; font-style: normal; line-height: normal; letter-spacing: 1.5px; color: var(--brown-grey); } .artwork-nav .active { color: var(--blue-blue); } .artwork-nav-label a, .artwork-nav-label a:visited{ text-decoration: none; color: var(--brown-grey); } .artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper { width: 100%; display: grid; row-gap: 0rem; column-gap: 1rem; grid-template-columns: repeat(18, 1fr); } .artwork-about{ padding: 30px 80px 60px 80px; } .artwork-copieswrapper, .artwork-relatedwrapper { border-top: solid 3px var(--black); padding: 30px 80px 30px 80px; } .artwork-leftcolumn { grid-column-start: 1; grid-column-end: 8; grid-row-start: 1; grid-row-end: 1; margin: 0 !important; } .artwork-rightcolumn { grid-column-start: 9; grid-column-end: 18; grid-row-start: 1; grid-row-end: 1; margin: 0 !important; display: grid; } .artwork-about-img img { width: 100%; } .artwork-about-bottom{ grid-column-start: 9; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .artwork-rightcolumn-top-contributors { grid-column-start: 9; grid-column-end: 14; grid-row-start: 1; grid-row-end: 1; } .artwork-rightcolumn-top-date { grid-column-start: 15; grid-column-end: 18; grid-row-start: 1; grid-row-end: 1; } .artwork-rightcolumn-top-publishers { grid-column-start: 15; grid-column-end: 18; grid-row-start: 2; grid-row-end: 2; } .artwork-copiesincollection { grid-column-start: 4; grid-column-end: 7; border-right: solid 0.5px var(--black); display: flex; flex-direction: column; justify-content: center; } .artwork-copiesincollection-title-div { text-align: center; } .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C { grid-column-start: 1; grid-column-end: 3; writing-mode: sideways-lr; margin-top: auto; margin-bottom: auto; max-height: 120px; text-align: center; align-self: center; } .artwork-copiesincollection-img-div { max-width: 55px; align-self: center; } .artwork-copiesincollection-img-div img { width: 100%; } .metadata-link, .metadata-link a, .metadata-link a span { font-family: Roboto Condensed Bold; font-size: 18px; font-weight: bold; font-stretch: condensed; font-style: normal; line-height: 1.44; letter-spacing: 0.9px; color: var(--blue-blue); } .metadata-link, .metadata-link a, .metadata-link a span:hover { color: black; } .artwork-about-bottom .mw-parser-output { width: 100%; padding: 30px 0px 0px 0px; display: inherit; } /*************************************/ /************ WIKI PAGES ************/ /***********************************/ /************ TUTORIALS ************/ div#tutorials-intro{ text-align: center; padding-top: 5em; } div#tutorials-intro h3, div#tutorials-intro p { text-align: center; width: 50%; margin: auto; }