/* Everything*/ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); * { border: 0px black solid; } body { overflow: scroll; font-size: .8em; } .container-fluid { overflow: hidden; } .bg { height: 100%; width: 100%; } .bg::before { content: ""; background-image: url("/static/images/crop_above.png"); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.4; filter: blur(10px); opacity: } /*Main areas*/ #title_website { font-family:'Walter Turncoat', cursive; font-style: italic; color: #d81159 !important; font-size: 30px; margin-left: 50px; margin-top: 15px; } /*resize thesis*/ #noflex { display: block; } .map_area { margin-right: 10px; margin-left: 20px; position: relative; /*border-top: 1px dashed #d81159;*/ } .media_area { margin-top: 10px; padding-right: 20px; height:100%; } .media_area img { width: 400px; } /* Audio in background */ .audioBG { margin-left: 50px; margin-top: -2px; font-size: 20px!important; } button { background-color: #fff0f000; } #dur1 { margin-top: -2px; } .audio-button { background: transparent; color:inherit; } .audio-button:hover { background: grey; cursor: pointer; } .main_audio { position: relative; } /* Node styling */ .group2 { fill: #ffbc42; font-size: 16px; font-family: 'Vesper Libre', serif; z-index: 2; } .group1 { fill: #d81159; font-size: 16px; font-family: 'Vesper Libre', serif; z-index: 1; } .group4 { fill: #73d2de; font-family: 'Vesper Libre', serif; font-size: 16px; z-index: 4; } .group3 { fill: #218380; font-family: 'Vesper Libre', serif; font-size: 16px; z-index: 3; } svg{ width:100%; height:100%; margin-left: 30px; margin-top: 10px; z-index: 1; position: relative; box-shadow: 20px 2px 15px 0px white; /*border-top: 2px solid #d81159;*/ } path{ fill: transparent; stroke: #000; stroke-dasharray:6px; } #map_div{ position:absolute; top:20px; left:0; right:0; margin:auto; height:500px; width:700px; } a { text-decoration: none; color: #d81159 } a :hover { text-decoration: none; } /* map legend */ #box1 { height: 15px; width: 15px; margin-left : 58px; margin-top: 5px; display: inline-block; color: #d81159; margin-bottom: 20px; } #box2 { height: 15px; width: 15px; margin-left : 10px; margin-top: 5px; color: #ffbc42; display: inline-block; } #box3 { height: 15px; width: 15px; margin-left : 10px; margin-top: 5px; color: #218380; display: inline-block; } #box4 { height: 15px; width: 15px; margin-left : 10px; margin-top: 5px; display: inline-block; color: #73d2de; } #box1:hover { cursor: pointer; } #box2:hover { cursor: pointer; } #box3:hover { cursor: pointer; } #box4:hover { cursor: pointer; } .map_legend p { padding-left: 5px; font-family: 'Vesper Libre', serif; display: inline; font-size: 0.9em; } #closeall { display: none; } /* text area */ /* with position:fixed and svg {position:relative} the text can overlay the map */ .thesis { text-align: left !important; display: none; overflow-y: scroll; max-height: 400px; max-width: 50%; scroll-behavior: smooth; font-size: .9em; border: 1px black solid; padding: 1.5em; margin-right: 10px; margin-top: 20px; line-height: 1.6em; font-family: 'Vesper Libre', serif; font-size: 16px; scrollbar-color: #d87fa0 #dbf6f9; position: relative; z-index:4; background: transparent; left: 2px; top: 10%; opacity: 0.4; -webkit-overflow-scrolling: touch; } .thesis:hover { opacity: 1; background-color: white; } .scaleable-wrapper { padding: 0.8%; padding-bottom: 0.8%; resize: both; position: relative; } /* #resizable { } */ .ui-resizable-se { width: 10px; height: 10px; position: absolute; bottom: 0; right: 0; } .scrollable { overflow-y: scroll; scroll-behavior: smooth; overflow: hidden; } h1 { font-size: 1.4em !important; } h2 { font-size: 1.2em !important; } /* background audio */ .play-stop { /* position: absolute; */ /* bottom: 1em; */ z-index: 1; padding-left: 2em; /* margin-left: calc( 50% - 1.8em ); margin-top: 5em; */ overflow: hidden; font-size: .8em; font-weight: bold; font-family:'Walter Turncoat', cursive; /* color: #AEB10A; */ color: #d81159; cursor: pointer; } /* circles */ .draggable { position: absolute; cursor: move; /* cursor: all-scroll; */ } /* .scaleable-wrapper { resize: both; overflow: auto; position:relative; } */ .draggable iframe { padding: 1em; } #transcriptWrapper { overflow: hidden; } #transcript > div { transition: all 0.8s ease; list-style-type: disc; } .speaking { font-weight: bold; } /* pop up */ #showvideo { /* display: none; */ right: 6%; top:10%; padding: 0.5%; background-color: transparent; z-index: 5; border: 1px black solid; opacity: 0.4; } #showvideo:hover { opacity: 1; } #showbio { /* display: none; */ right: 10%; top:50%; left: 60%; bottom: 10%; padding: 2%; background-color: transparent; z-index: 5; border: 1px black solid; overflow-y: scroll; scroll-behavior: smooth; max-height: 300px; max-width: 700px; scrollbar-color: #d87fa0 #dbf6f9; opacity: 0.4; font-family: 'Vesper Libre', serif; font-size: 16px; } #showbio:hover { background-color: white; opacity: 1; } #closeall { font-family:'Walter Turncoat', cursive; cursor: pointer; color: #d81159; font-size: 20px; padding-left: 50%; } /* .bio{ margin-bottom: 1.2em; margin-top: 2em; font-family:'Vesper Libre', serif; font-size: .8em; padding-left: 1em; z-index: 5; background-color: white; border:1px black solid; } */ /* Style the close button */ .topleft { float: right; cursor: pointer; font-size: 16px; color: black; } .thesisX { position: absolute; z-index:5; left: 96%; top: 8%; float: right; cursor: pointer; font-size: 16px; color: black; } #nothesis { display: none; } /* about and colophon */ #menu { margin-top: 15px; } #about, #colophon, #how { font-family:'Walter Turncoat', cursive; color: #d81159; font-size: 16px; } /*#colophon { position: absolute; left: 50px; bottom:30px; z-index: 5; } #how { position: absolute; right: 50px; bottom:30px; z-index: 5; } #about { position: absolute; right: 50px; top:30px; <<<<<<< HEAD } */ ======= }*/ #about a { text-decoration: none; color: #d81159; } #colophon a { text-decoration: none; color: #d81159; } #how a { text-decoration: none; color: #d81159; } #showabout, #showcolophon, #showhow { display: none; /* background-image: url("../images/poster1.png"); */ background-color: white; word-wrap: break-word; background-size: 100%; width: 50%; max-height: 500px; border: 1px solid black; padding: 2%; z-index: 5; font-family: 'Vesper Libre', serif; font-size: 16px; overflow-y: scroll; scrollbar-color: #d87fa0 #dbf6f9; scroll-behavior: smooth; } #showcolophon { left: 30%; top:10%; } #showhow { left: 40%; top:20%; } #showabout { left: 20%; } /*d3 map*/ .link { stroke: #c46666; } .node text { font: 1em sans-serif; } .node text:hover { cursor: pointer; font-style: italic; } .active { background-color: RGBA(190,219,187, 0.6); display: inline; /* box-shadow: 5px 0 0px 0px #bedbbb, -5px 0 0px 0px #bedbbb; */ } /*media*/ @media (max-width: 770px) { #menu { text-align: center; } .map_legend p { font-size: 0.8em; } #box1, #box2, #box3, #box4 { display: block; } #box1 { margin-left: 10px; } } .logo { width: 60px; display: inline-block; } @media (max-width: 550px) { .map_legend p { font-size: 0.5em; } }