body { background-color: #fcf7e8; padding-top: 120px; padding-left: 120px; padding-right: 120px } .grid-container { display: inline-grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: 10px; grid-auto-flow: dense; position: relative; top: 60%; width: 96%; height: auto; left:2%; text-align: : center; z-index: 5; } .grid-container > div { position: relative; text-align: left; z-index: 5; } .img { display: inline-block; border-style: hidden hidden solid hidden; border-color: #5ce0db; height: 500px; } .title { display:block; font-family: 'Work Sans', sans-serif; font-size: large; font-weight: 700; } .tooltiptext { display:block; font-weight: normal; } .metatext { display: inline-block; width: 300px; border-style: hidden; } .thumbborder { position: relative; max-width: 100%; max-height: 100%; } /*links*/ a:link { text-decoration: none; color: black; } a:visited { text-decoration: none; color: black; } .metatext:hover a { color: white; } a:hover { text-decoration: underline; } .metatext:hover { background-color: #5ce0db; color: white; } h1 { position: fixed; right:0%; top:3%; text-align: right; background-color: #5ce0db; padding: 3px 30px 3px 10px; z-index: 10; color: white; font-size: 32px; } h2{ position: fixed; right: 0%; top: 15%; text-align: left; background-color: grey; color: black; padding: 3px 3px 3px 30px; z-index: 10; font-size: 20px; } /*.indexlist { position: absolute; top:20%; }*/ .viewnav { position: fixed; top:0%; right:0%; background-color: red ; width: 40%; z-index: 10; opacity: 0.7; } .collapsible2 { background-color: #777; color: white; cursor: pointer; padding: 0px; width: 100%; height: px; border: none; text-align: left; outline: none; font-size: 40px; z-index: 10; margin-top: 0px; } .active, .collapsible2:hover { background-color: #555; } .content2 { position: relative; padding: 0px 18px; max-height: 0; overflow: hidden; width: 50%; transition: max-height 0.2s ease-out; background-color: grey; color: white; z-index: 10; text-align: left; } /* Grid buttons */ .header { position: absolute; text-align: center; padding: 32px; top: 30%; right: 0%; z-index: 9; width: auto; height: auto; background-color: pink; } p { display: block; position: relative; } .btn { border: none; outline: none; width: 110px; text-align: center; padding: 12px 0px; background-color: grey; cursor: pointer; font-size: 18px; margin-right: 5px; z-index: 9; } .btn:hover { background-color: black; color: blue; } .btn:active { background-color: black; color: white; } .metadata{ position: fixed; top:5%; left:0%; background-color: ; width: 40%; z-index: 10; opacity: 0.7; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 10%; height: auto; border: none; text-align: right; outline: none; font-size: 15px; z-index: 10; margin-top: 10px; } .active, .collapsible:hover { background-color: #555; } .content { position: relative; padding: 0px 18px; max-height: 0; overflow: hidden; width: 90%; transition: max-height 0.2s ease-out; background-color: grey; color: white; z-index: 10; text-align: right; } a.content:link { color:white; } .metadata_links { display: block; width: 100%; position: relative; right: 0%; padding: 10px; text-align: left; /*background-color: blue;*/ font-size: 18px; } .metadata_organization { font-size: 14px; } .fbtn { font-style: italic; } .smw-template-furtherresults { display: none; } .indexlink { position: fixed; bottom:0%; right:3%; background-color: white; z-index: 10; font-size: 30px; } .timelinelink { position: fixed; bottom:0%; right:10%; background-color: white; z-index: 10; font-size: 30px; } .orglink { position: fixed; bottom:0%; left:10%; background-color: white; z-index: 10; font-size: 30px; } .orglink:hover .hiddentext { visibility: visible; } .hiddentext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; }