body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1; letter-spacing: 1px;} section {margin-bottom: 50px;margin-top: 20px;} a {font-weight: normal; text-decoration: none; } .navbar { letter-spacing: 4px; text-align: center; } .navbar a:hover { background-color: #ddd; color: black; font-weight: thin; } .navbar a.active { font-size: 50px; font-weight: bold;} h2 { text-align: center; letter-spacing: 4px; font-size: 28px;} h3{ font-size: 20px; } table, th, td {vertical-align: top; text-align: left; border-collapse: separate; padding: 6px;} button {width: 100px;} .short-description{ margin-left: 40%; margin-right: 40%; text-align: center; } .internet {font-weight: regular; font-size: 18px; text-decoration: none; } .list a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .list { padding-top: 10px; padding-bottom: 10px; padding-left: 0; list-style: none; border-top: 1px solid #47505e; } /* .mini-player { background-size: 100% 100%; background-image: url(/project/images/player.png); cursor: pointer; }*/ .audio-mini { width: 50px; } .dropbtn { font-family: "Old Standard TT"; font-weight: bold; font-size: 24px; color: black; padding: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: pink; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 1900px; overflow: auto; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: none;} .show {display: block;} /*style internet sources*/ .dropbtn2 { font-family: "Old Standard TT"; font-weight: regular; font-size: 24px; color: black; padding: 16px; cursor: pointer; background-color: rgba(255, 255, 255, 0.9); border:1px; border-style:solid; border-color:black; } .dropbtn2:hover, .dropbtn2:focus { background-color: pink; } .dropdown2 { position: absolute; display: inline-block; } .dropdown-content2 { display: none; position: absolute; background-color: white; min-width: 1000px; overflow: auto; z-index: 1; border:1px; border-style:solid; border-color:black; right: 5px; } .dropdown-content2 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown2 a:hover {background-color: none;} .show2 {display: block;} /*style list of podcasts*/ .dropbtn3 { font-family: "Old Standard TT"; font-weight: regular; font-size: 24px; color: black; padding: 16px; border: none; cursor: pointer; } .dropbtn3:hover, .dropbtn3:focus { background-color: pink; } .dropdown3 { position: relative; display: inline-block; } .dropdown-content3 { display: none; position: absolute; background-color: white; min-width: 1000px; overflow: auto; z-index: 1; } .dropdown-content3 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown3 a:hover {background-color: none;} .show3 {display: block;} /* Make the clips use as much space as possible, and * also show a scrollbar when there are too many clips to show * in the available space */ .sound-clips { flex: 1; overflow: auto; } /*section, article { display: block; }*/ .clip { padding-bottom: 1rem; } /*audio { width: 100%; display: block; margin: 1rem auto 0.5rem; }*/ .clip p { display: inline-block; font-size: 1rem; } .clip button { font-size: 1rem; } button.delete { background: #f00; padding: 0.5rem 0.75rem; font-size: 0.8rem; } /* Checkbox hack to control information box display */ /*label { font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; }*/ input[type=checkbox] { position: absolute; top: -100px; } /*aside { position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(100%); transition: 0.3s all ease-out; background-color: #efefef; padding: 1rem; } aside p { font-size: 1.2rem; margin: 0.5rem 0; } aside a { color: #666; } */ /* Toggled State of information box */ input[type=checkbox]:checked ~ aside { transform: translateX(0); } /* Cursor when clip name is clicked over */ .clip p { cursor: pointer; } /* Adjustments for wider screens */ @media all and (min-width: 800px) { /* Don't take all the space as readability is lost when line length goes past a certain size */ /*.wrapper { width: 90%; max-width: 1000px; margin: 0 auto; }*/ } /*hover of images and transcriptions style*/ .tooltip-wrap { position: relative; } .tooltip-wrap .tooltip-content-down { display: none; position: absolute; z-index:1; top: 100%; /*bottom: 100%;*/ left: 2%; /*right: 100%;*/ padding: .2em; background-color: rgba(255, 255, 255, 0.8) ; border:1px; border-style:solid; border-color:black; text-align: left; } .tooltip-wrap .tooltip-content-right { display: none; position: absolute; z-index:1; top: 100%; /*bottom: 100%;*/ left: 2%; /*right: 100%;*/ padding: .2em; background-color: pink; border:none; text-align: left; min-width: 400px;} .tooltip-wrap .tooltip-content-up { display: none; position: absolute; z-index:1; /*top: 100%;*/ bottom: 100%; left: 2%; /*right: 100%;*/ padding: .2em; background-color: rgba(255, 255, 255, 0.93) ; border:1px; border-style:solid; border-color:black; text-align: left; } .tooltip-wrap:hover .tooltip-content-down { display: block; } .tooltip-wrap:hover .tooltip-content-up { display: block; } .tooltip-wrap:hover .tooltip-content-right { display: block; } /*.tooltip-wrap:hover { background-color: pink; } */ /*transcript wrapper,text following audio style*/ #transcriptWrapper { overflow: hidden; } #transcript > div { transition: all .8s ease; list-style-type: disc; } .speaking { font-weight:bold } #transcriptWrapper3 { overflow: hidden; } #transcript3 > div { transition: all .8s ease; list-style-type: disc; } .speaking3 { font-weight:bold } /*one image next to the other*/ .column { float: left; width: 30%; } /* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; } /* Style the tab */ .tab { overflow: hidden; width:100px; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; border: 1px solid black; outline: none; cursor: pointer; padding: 12px; transition: 0.3s; font-size: 20px; width: 150px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } .tabpink { overflow: hidden; width:100px; } .tabpink button { background-color: inherit; border: 1px solid black; outline: none; cursor: pointer; padding: 12px; transition: 0.3s; font-size: 20px; width: 150px; } .tabpink button:hover { background-color: pink; } /* Create an active/current tablink class */ .tabpink button.active { background-color: pink; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid black; float: left; position: absolute; width: 800px; z-index: 1; background-color: white; top: 5px; } /* Style the close button */ .topleft { float: left; cursor: pointer; font-size: 28px; } .container .rowcircle { margin: 25px; text-align: center; } .container .rowcircle span { margin: 0 200px; /*margin-right: 90px;*/ } .draggable { width: 400px; padding: 0.8em; box-shadow: 5px 5px 10px rgba(0,0,0,.2); background-color: rgba(255, 255, 255, 1) ; /* border:1px; border-style:solid; border-color:black;*/ cursor: all-scroll; position: absolute !important; } .drag-content { font-size: 22px; /*float: right;*/ font-weight: normal !important; } #main-note { /*background-color: #FFE6EA !important;*/ border:1px; border-style:solid; border-color:black; }