section { display: block; } .menu { background-color: #FFE6EA !important; } .underline { color: black; text-decoration: underline !important; } a:hover, .underline:hover { font-weight: bold; } a { color: #FF00FF; text-decoration: none; } s { color: #A19696; } .active { color: red; font-size: 125% ; } .active-draggable{ width: 30% !important; font-size: 130%; } a img { line-height: 0px; } .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: 135%; margin: 5px; margin-bottom: 10px; color: red; } h2 a { text-decoration: none; color: purple; } h2 a:hover { color: red; } h2 a:hover .hover-icon { opacity: 1; } h2 a:hover .hover-icon-speaker { opacity: 1; } li a { text-decoration: none; color: purple; } li a:hover { color: red; } .hover-icon { transition: .5s ease; opacity: 0; position: absolute; top:20px; left:-7%; } .hover-icon img{ width: 20%; } .hover-icon-speaker { transition: .5s ease; opacity: 0; position: absolute; top:20px; left:-60%; } .hover-icon-speaker img{ width: 5%; } h3 { font-size: 95%; text-align: center; } button { width: 100px; } .short-description { margin-left: 40%; margin-right: 40%; text-align: center; } .internet { font-weight: regular; font-size: 70%; 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: 100%; } .dropbtn { font-family: "Old Standard TT"; font-weight: bold; font-size: 24px; color: black; padding: 16px; border: none; cursor: pointer; } #overlay{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; display: none; } #overlay.show{ display: block; } .show { 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; } /*hover of images and transcriptions style*/ .tooltip-wrap { position: relative; display: inline; } .no-pink { background-color: white !important; } .tooltip-wrap { margin-bottom:4rem; } .fa { margin-bottom:.5rem; } /*.tooltip-wrap:hover { background-color: lightgrey; }*/ .no-underline { text-decoration: none !important; } .tooltip-wrap .tooltip-content-down { display: none; position: absolute; z-index: 1; top: 75%; /*bottom: 100%;*/ left: 10%; /*right: 100%;*/ padding: 0.2em; background-color: white; /*background-color: rgba(255, 255, 255, 0.8);*/ border: 1px; border-style: solid; border-color: black; text-align: left; min-width:300%; font-size: 80%; } .content-transcription { left: -1000% !important; top: 175% !important; min-width:5500% !important; } .fa-file { width:80rem !important; } .tooltip-wrap .tooltip-content-up { display: none; position: absolute; z-index: 1; /*top: 100%;*/ bottom: 100%; /*right: 100%;*/ padding: 0.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 0.8s ease; list-style-type: disc; } .speaking { font-weight: bold; } #transcriptWrapper3 { overflow: hidden; } #transcript3 > div { transition: all 0.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: 20%; } /* 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: 80%; width: 30%; } /* 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: 50%; } .tabpink button { background-color: inherit; border: 1px solid black; outline: none; cursor: pointer; padding: 12px; transition: 0.3s; font-size: 10%; width: 50%; } .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: 40%; z-index: 1; background-color: white; top: 5px; } /* Style the close button */ .topleft { float: right; cursor: pointer; font-size: 2rem; } .container .rowcircle { margin: 25px; text-align: center; } .container .rowcircle span { margin: 0 200px; /*margin-right: 90px;*/ } .full-width { width: 100% !important; } .draggable-circle { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); background-color: white; cursor: all-scroll; position: absolute !important; width: 20%; display: inline; } .draggable-circle p { text-align: center; color: #A19696; } #img { line-height: 0 !important; } .drag-content { /*float: right;*/ font-weight: normal !important; padding: 0.8%; padding-bottom: 0.8%; text-align: center; } .scaleable-wrapper { padding: 0.8%; padding-bottom: 0.8%; resize: both; position: relative; /*height: 400px;*/ /*min-height: 100px; */ } .ui-resizable-se { width: 10px; height: 10px; /*background: pink;*/ position: absolute; bottom: 0; right: 0; } #show1, #show2, #show3, #show4 { display: none; left: 20%; width: 23% !important; } #box-title { color: #A19696; position: absolute; font-weight: bold; } /*for thesis html*/ #maintext { width: 120%; margin-top: 2%; } .toc_title { font-weight: 700; text-align: center; } #toc_container li, #toc_container ul, #toc_container ul li { list-style: outside none none !important; } li, #angela, #judith, #laurie, #dana, #katalin { border-bottom: 1px dashed; list-style: none; border-color: #d0caca; color: #A19696; } .group_photos { width:20%; } .box_metadata { background: white none repeat scroll 0 0; border: 1px solid #aaa; display: table; font-size: 95%; margin-bottom: 1em; padding: 20px; width: 20%; left: 0px; position: absolute; } #metadata-thesis { width:50%; } /*# sourceMappingURL=stylesheet.css.map */ .status { color: red; } /*#button_upload { background-color: pink; padding: 10px; font-size: 20px; }*/ #saved_msg { color: red; font-size: 100%; } /*reshuffle piles*/ .group_vowels { position:absolute; } .group_photos { position:absolute; } .group_extracts { position:absolute; } .group_metadata { position:absolute; } .audio-tag { width: 100%; } .left_col { float:left; margin-left: 0.8%; border-right: 1px dashed grey; width:49%; } .right_col { float:right; width:49%; } /*players in circle*/ .ciclegraph { position: relative; width: 50%; height: 30%; top: 200px; left: 30% } .ciclegraph:before { content: ""; position: absolute; top: 0; left: 0; /* width: calc( 100% - 2px * 2); height: calc( 100% - 2px * 2 );*/ } .ciclegraph .circle { position: absolute; top: 50%; left: 50%; width: 20%; /*height: 100px;*/ } .ciclegraph .circle:hover { z-index:1; } /*}*/ @media screen and (min-width: 300px){ body { background: #F6F5F5; /*background: #fcf4f6;*/ font-family: "Old Standard TT"; font-size: 1em; line-height: 1.3; letter-spacing: 1px; padding: 1em; } h1 { font-size: 2em; font-style: italic; text-align: center; letter-spacing: 5px; color:black; animation: color-change 1s infinite; animation-name: example; animation-duration: 4s; animation-play-state: running; } @keyframes example { /* from {color: #FF00FF;} to {color:purple;}*/ 0% {color: #FF00FF;} 25% {color: #ff00bf;} 50% {color: #ffd6e0;} 75% {color: #fedf2e;} 100% {color:#e600e6;} } .draggable { box-shadow: 5px 5px rgba(255,0,255,0.5); background-color: white; cursor: all-scroll; position: absolute !important; display: inline; /* transform: scale(20);*/ /*min-height: 100px;*/ border: none; text-align: left; max-width: 60%; border: 1px solid black; padding: 0.8em; z-index: 1; font-size: 1.2em; } .tooltip-wrap .tooltip-content-right { display: none; position: absolute; z-index: 1; /*top: 100%;*/ /*bottom: 100%;*/ left: 1.5rem; /*right: 100%;*/ top: 20%; padding: 0.6em; background-color: white; border: none; text-align: left; min-width: 20em; border: 1px solid black; font-weight: normal !important; font-style: normal !important; text-align: left !important; letter-spacing: 0px !important; word-wrap: break-word; box-shadow: 5px 5px rgba(255,0,255,0.5); } /*radioactive */ .radioactive td { overflow: auto; max-width: 2%; border: 1px solid black; padding: 2%; vertical-align: top; } table, th { vertical-align: top; text-align: left; border-collapse: separate; padding:20px; } /*.radioactive { width: 100% !important; }*/ .radioactive audio{ width: 40%; } .radioactive button, .recorder input { background-color: #F6F5F5; border: 1px solid black; padding: 20px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 2px 2px; cursor: pointer; width:300px; font-size: 1em; border-radius: 25px; } .popup { background-color: #fedf2e; } } @media screen and (min-width: 1000px){ body { background: #F6F5F5; /*background: #fcf4f6;*/ font-family: "Old Standard TT"; font-size: 1.4em; line-height: 1.3; letter-spacing: 1px; padding: 20px; } h1 { font-size: 2em; font-style: italic; text-align: center; letter-spacing: 5px; color:black; animation: color-change 1s infinite; animation-name: example; animation-duration: 4s; animation-play-state: running; } @keyframes example { /* from {color: #FF00FF;} to {color:purple;}*/ 0% {color: #FF00FF;} 25% {color: #ff00bf;} 50% {color: #ffd6e0;} 75% {color: #fedf2e;} 100% {color:#e600e6;} } .draggable { box-shadow: 5px 5px rgba(255,0,255,0.5); background-color: white; cursor: all-scroll; position: absolute !important; display: inline; /* transform: scale(20);*/ /*min-height: 100px;*/ border: none; text-align: left; max-width: 50%; border: 1px solid black; padding: 0.8em; z-index: 1; font-size: 1.2em; } .tooltip-wrap .tooltip-content-right { display: none; position: absolute; z-index: 1; /*top: 100%;*/ /*bottom: 100%;*/ left: 1.5rem; /*right: 100%;*/ top: 20%; padding: 0.6em; background-color: white; border: none; text-align: left; min-width: 20em; border: 1px solid black; font-weight: normal !important; font-style: normal !important; text-align: left !important; letter-spacing: 0px !important; word-wrap: break-word; box-shadow: 5px 5px rgba(255,0,255,0.5); } /*radioactive */ .radioactive td { overflow: auto; max-width: 20%; height: 200px; border: 1px solid black; padding: 2%; vertical-align: top; } table, th { vertical-align: top; text-align: left; border-collapse: separate; padding:20px; } /*.radioactive { width: 100% !important; }*/ .radioactive audio{ width: 40%; } .radioactive button, .recorder input { background-color: #F6F5F5; border: 1px solid black; padding: 20px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 2px 2px; cursor: pointer; width:300px; font-size: 1em; border-radius: 25px; } .popup { background-color: #fedf2e; } }