@charset "utf-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
	height: 100vh;
    background-color: #e7ece8;
}

mark {
 	cursor: pointer;
	border: dashed 1px #586B7A;
	align-content: center;
	align-items: center;
}

mark span {
	display: inline-block;
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
	width: 14px;
	height: 14px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 0;
}
	
body {
	margin: 0;
	font-family: 'ABeeZee', sans-serif;
	color: #586B7A;
	font-weight: 400;
	line-height: 150%;
	background-color: #e7ece8;
	font-size: 0.8vw;
}

h1 {
	font-size:1.7rem;
	font-weight:bold;
	line-height: 1;
}

h2 {
	font-size:1.4rem;
	font-weight:bold;
}

h3 {
	font-size:1rem;
	font-weight:bold;
}

.div_header_container {
	display: flex;
	flex-direction:column;
	background-color: #b4c0b6;
	align-items: center;
	justify-content:center;
	align-content:center;
}

.div_header_container_home {
	background-color: #E7ECE8;
}

.div_header {
	display: flex;
	height: 3vw;
	padding: 1vw;
	width: 90vw;
	background-color: #b4c0b6;
	align-items: center;
	justify-content: space-between;
	background-image: url(images/lettering.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10vw;
	cursor: pointer;
}

.div_studi {
	width: 30vw;
	height: 3vw;
	background-image: url(images/logo.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}

.div_language {
	color: white;
	font: 900 0.7vw Arial, Helvetica, Verdana, Sans-serif;
	letter-spacing: 0.05em;
	text-align: right;
	text-transform: uppercase;	
}

a.div_language:link, a.div_language:visited {
	text-decoration: none;
	color: #586B7A;
}

a.div_language:hover {
	text-decoration: underline;
}

/* homepage */

div.home_contents {
	margin-left: auto;
	margin-right: auto;
	width: 90vw;
	background-color: #D4DAD6;
	font-size: 1rem;
	padding: 1vw;
	padding-top: 1vh;
	padding-bottom: 1vh;
	line-height: 1.5;
}

div.home_separator {
	display: flex;
	padding: 1vw;
	width: 90vw;
	background-color: #b4c0b6;
	align-items: center;
	align-content: center;
	justify-content: center;
	height: 6vw;
	background-image: url(images/home_separator_bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border:0;
	border-top:1px solid #586B7A;
	border-bottom:1px solid #586B7A;
}

.home_images {
	background-image: url(images/homeimg_01.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
    height: 10vw;
    width: 90vw;
    padding: 1vw;
}

#div_score {
	margin: 0px auto;
	background-color: #f2f2f4;
}

.div_buttons_container_home {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
}

.div_button_container_home {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: start;
    align-content: center;
	color: #586B7A;
    background-color: #b4c0b6;
	border:1px solid #586B7A;
    padding: 1vw;
    min-width: 13vw;
    border-radius: 0.5vw;
	cursor:pointer;
	-webkit-transition: background 0.5s 0s ease;
	-moz-transition: background 0.5s 0s ease;
	-o-transition: background 0.5s 0s ease;
	transition: background 0.5s 0s ease;
}

.div_button_container_home_inv {
    background-color: #e8ece8;
}

.div_button_container_home:hover {
    background-color: #586B7A;
	color:white;
}

.div_square_internal {
	width:3vw;
	min-width: 3vw;
	height:3vw;
	min-height: 3vw;
	border-radius:0.3vw;
	border: #586B7A solid 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-right:1vw;
	cursor:pointer;
}

.div_square_home {
	width:3vw;
	height:3vw;
	border: #586B7A solid 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-right:1vw;
	cursor:pointer;
	background-size:70%;
	border-radius:0.3vw;
}

#div_square_home_1 {
	background-color: #f0e5d7;
	background-image: url(images/side_icons/network_icon_grey.png);
}

#div_square_home_2 {
	background-color: #e4d8ca;
	background-image: url(images/side_icons/learn_icon_grey.png);
}

#div_square_home_3 {
	background-color: #d7cbbc;
	background-image: url(images/side_icons/docs_icon_grey.png);
}

#div_square_home_4 {
	background-color: #C4B7A7;
	background-image: url(images/side_icons/audio_icon_grey.png);
}

.partners_container {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	padding: 1vw;
}

p.small {
	font-size:0.8rem;
}

.logo {
	width:10vw;
	height:4vw;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	margin-right: 2vw;
}

.logo_home {
	width:8vw;
	height:3vw;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	margin-right: 2vw;
}

.logo_audioinnova {
	width:8vw;
	height:3vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 2vw;
}

#logo_berio {
	width:15vw;
	background-image:url(images/logo_berio.png);
}

#logo_siemens {
	background-image:url(images/logo_siemens.png);
}

#logo_sacher {
	background-image:url(images/logo_sacher.png);
}

#logo_ue {
	background-image:url(images/logo_ue.png);
}

#logo_unimi {
	background-image:url(images/logo_unimi.png);
}

#logo_lim {
	background-image:url(images/logo_lim.png);
}

#logo_audioinnova {
	background-image:url(images/logo-audio-innova-quadrato-png.png);
}

.noStyle {
    color: #344450 !important;
}


#video_home {
	width:92vw;
	border-top:1px solid #586B7A;
	border-bottom:1px solid #586B7A;
	box-sizing:border-box;
}

/* learn */

div.learn_contents {
	margin-left: auto;
	margin-right: auto;
	width: 90vw;
	background-color: #D4DAD6;
	font-size: 1rem;
	line-height: normal;
	padding: 1vw;
}

div.learn_title {
	font-size: 1.5rem;
	text-align: center;
}

/* viewer */

.div_timeline_container {
	position: sticky;
    top: 0;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-around;
	width: 100%;
	background-color: #E7ECE8;
}

.div_squared_buttons {
	position: relative;
	width: 1vw;
	height: 1vw;
	background-color: #E7ECE8;
	border: solid 2px #586B7A;
	cursor: pointer;
	text-align:center;
	color:#586B7A;
	font: 0.5vw Arial, Helvetica, Verdana, Sans-serif;
	font-weight:bold;
	border-radius:0.2vw;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.div_squared_buttons:hover {
	background-color: white;
}

#div_controls {
	position: fixed;
    height: 50px;
    bottom: 0;
    width: 100%;
    padding-left: 50px;
	display:flex;
}

#svg_timeline {
	background-color:#E7ECE8;
	border-bottom:1px solid #b4c0b6;
}

#svg_score {
	width: 100%;
	background-repeat:no-repeat;
	background-size:100%;
	background-position:top left;
	background-color:#f2f2f4;
}

rect {
	cursor: pointer;
}

.rect_nav {
	fill:#E7ECE8;
	stroke:#586b7a;
	stroke-width: 1;
	rx: 3;
}

.rect_nav_full {
	fill:#586b7a;
	stroke:#586b7a;
	stroke-width: 1;
	rx: 3;
	cursor: pointer;
}

.line_nav {
	stroke:#93a4b1;
	stroke-width: 1;
}

#svg_score rect {
	/*stroke: red;*/
	stroke: #586b7a;
	stroke-width: 8;
	stroke-dasharray: 20 10;
	/*fill: rgba(255,0,0,0.5);*/
	fill: rgba(88, 107, 122, 0.3);
	animation-iteration-count: 1;
	animation-duration: 3s;
	opacity: 0;
	rx: 30;
}

.div_icons {
	width:0.9vw;
	height:0.9vw; 
	background-position:center; 
	background-repeat:no-repeat; 
	background-size:cover; 
	margin-bottom:0.2vw;
}

#icon_zoom {
	background-image:url(images/button_search.png); 
}

#icon_pages {
	background-image:url(images/button_document.png); 
}

#icon_audio {
	background-image:url(images/button_audio.png); 
}

#icon_video {
	background-image:url(images/button_video.png); 
}

.cd_cover {
	width:3vw;
	height:3vw;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#586B7A;
	margin:0.2vw;
	border: 2px solid #586B7A;
	border-radius: 0.2vw;
	cursor: pointer;
}

#cover_brueggen1967 {
	background-image:url(images/cover_brueggen1967.png); 
}

#cover_brueggen1970 {
	background-image:url(images/cover_brueggen1970.png); 
}

#cover_wiener1982 {
	background-image:url(images/cover_wiener1982.png); 
}

#cover_toffano1984 {
	background-image:url(images/cover_toffano1984.png); 
}

#cover_kelber1985 {
	background-image:url(images/cover_kelber1985.png); 
}

#cover_vanhauwe1988 {
	background-image:url(images/cover_vanhauwe1988.png); 
}

#cover_rose1991 {
	background-image:url(images/cover_rose1991.png); 
}

#cover_whybrow1996 {
	background-image:url(images/cover_whybrow1996.png); 
}

#cover_mense1995 {
	background-image:url(images/cover_mense1995.png); 
}

#cover_izquierdo1997 {
	background-image:url(images/cover_izquierdo1997.png); 
}

.page_num {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/page_icon_grey.png");
	color: #586B7A;
}

#zoom_in {
	background-color: #FFF5E8;
	background-image: url("images/side_icons/zoom_in_grey_icon.png");
	color: #586B7A;
	background-position:center;
	background-repeat:no-repeat;
	background-size:50%;
}

#zoom_out {
	background-color: #FFF5E8;
	background-image: url("images/side_icons/zoom_out_grey_icon.png");
	color: #586B7A;
	background-position:center;
	background-repeat:no-repeat;
	background-size:50%;
}

.nav_item {
	width:2.5vw;
	height:2.5vw;
	background-repeat:no-repeat;
	margin:0.2vw;
	border-radius: 0.2vw;
	cursor: pointer;
	border: 1px solid white;
	background-size:70%;
	background-position:center;
}

#nav_item_home {
	background-color: #FFF5E8;
	background-image: url("images/side_icons/home_icon_grey.png");
}

#nav_item_schema {
	background-color: #F0E5D7;
	background-image: url("images/side_icons/network_icon_grey.png");
}

#nav_item_scores {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/score_icon_grey.png");
}

#nav_item_docs {
	background-color: #D7CBBC;
	background-image: url("images/side_icons/docs_icon_grey.png");
}

#nav_item_perfs {
	background-color: #C4B7A7;
	background-image: url("images/side_icons/audio_icon_grey.png");
}

#nav_item_shrink_enlarge {
	background-color: #FFF5E8;
	background-image: url("images/side_icons/shrink_icon_grey.png");
}

#nav_item_original {
	background-color: #F0E5D7;
	background-image: url("images/side_icons/quill_icon_grey.png");
}

#nav_item_transcription {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/transcription_icon_grey.png");
}

#nav_item_marked {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/marker_icon_grey.png");
}

#nav_item_showintimeline {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/goto_icon_grey.png");
}

#nav_item_history {
	background-color: #E4D8CA;
	background-image: url("images/side_icons/history_icon_grey.png");
}

.side_panel {
	width:4vw; 
	height: 15.5vw;
	background-color:#586B7A; 
	color: #b4c0b6; 
	margin: 0; 
	position: fixed; 
	top: 50%; 
	-ms-transform: translateY(-50%); 
	transform: translateY(-50%); 
	border-radius:0 0.5vw 0.5vw 0; 
	display:flex; 
	flex-direction:row; 
	align-items:center; 
	align-content:center; 
	justify-content:center;
}

.side_panel_inner {
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	align-content:center; 
	justify-content:space-around;
}

#left_panel {
	height:14vw; 
	left: 0;
	border-radius:0 0.5vw 0.5vw 0; 
}

#inner_left_panel {
	width:8vw; 
}

#right_panel {
	right:0; 
	border-radius:0.5vw 0 0 0.5vw; 
}

#inner_right_panel {
	width:8vw; 
}

#audio_player {
	display:block;
	margin: 0; 
	position: fixed;
	top:auto;
	bottom:10px; 
	left: 50%;
	transform: translate(-50%, 0);
}

a.arrow:link, a.arrow:visited {
	display:block;
	text-decoration:none;
	color:#b4c0b6;
}

a.arrow:hover {
	color:#E7ECE8;
}

#arrow_left_panel {
	height:13.5vw;
	line-height:13.5vw;
	border-left: 1px solid #697885;
}

#arrow_right_panel {
	height:22.5vw;
	line-height:22.5vw;
	border-right: 1px solid #697885;
}


/* documents */

.header_docs {
	background-image: url("images/header_docs.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
    height: 5vw;
    width: 90vw;
    padding: 1vw;
}

a.normal:link, a.normal:visited {
	text-decoration:none;
	color:#586B7A;
}

a.normal:hover {
	color:#E7ECE8;
}

#div_letters_container {
	display: flex; 
	align-content: center; 
	align-items: center; 
	justify-content: flex-start; 
	flex-direction: row; 
	flex-wrap: wrap;
}

#div_letter_transcription {
	background-color: white; 
	padding:0.5vw; 
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
	font-size: 0.8em;
}

#l1a {
	background-image:url("letters/thumbnails/l1a.jpg"); 
}

#l2 {
	background-image:url("letters/thumbnails/l2.jpg"); 
}

#l3 {
	background-image:url("letters/thumbnails/l3.jpg"); 
}

#l4 {
	background-image:url("letters/thumbnails/l4.png"); 
}

#l5 {
	background-image:url("letters/thumbnails/l5.jpg"); 
}

#l6 {
	background-image:url("letters/thumbnails/l6-1.jpg"); 
}

#lue1 {
	background-image:url("letters/thumbnails/lue1.png"); 
}

#lue2b {
	background-image:url("letters/thumbnails/lue2b.png"); 
}

#lbla_1964 {
	background-image:url("letters/thumbnails/lbla_1964.png"); 
}

#lalb_1965 {
	background-image:url("letters/thumbnails/lalb_1965.jpg"); 
}

#lalb_1966 {
	background-image:url("letters/thumbnails/lalb_1966.jpg"); 
}

#instructions_I1 {
	background-image:url("instructions/thumbnails/I1.png"); 
}

#instructions_I2 {
	background-image:url("instructions/thumbnails/I2.png"); 
}

#instructions_I3 {
	background-image:url("instructions/thumbnails/I3_a.jpg"); 
}

#instructions_I4_en {
	background-image:url("instructions/thumbnails/I4_en_1.jpg"); 
}

#instructions_I4_de {
	background-image:url("instructions/thumbnails/I4_de_1.jpg"); 
}

#instructions_I_br {
	background-image:url("instructions/thumbnails/I_br.jpg"); 
}

#RegUE_pf {
	background-image:url("registry/thumbnails/UE_R_01.jpg"); 
}

#RegUE_pb1 {
	background-image:url("registry/thumbnails/UE-VB1.jpg"); 
}

#RegUE_pb2 {
	background-image:url("registry/thumbnails/UE_VB_03.jpg"); 
}

#contract_UE {
	background-image:url("contracts/thumbnails/UE-C-1.jpg"); 
}

#vinyl_telemann {
	background-image:url("images/thumbnails/telemann.png"); 
}

#program {
	background-image:url("other_docs/thumbnails/program_01.jpg"); 
}

#article_brueggen {
	background-image:url("images/thumbnails/article_1966.jpg"); 
}

#review {
	background-image:url("other_docs/thumbnails/review_fb.png"); 
}

#score_panni {
	background-image:url("images/thumbnails/score_panni.png"); 
}

#score_sv {
	background-image:url("images/thumbnails/score_sv.png"); 
}

#score_pd {
	background-image:url("images/thumbnails/score_pd.png"); 
}

#score_ue_1 {
	background-image:url("images/thumbnails/score_ue_1.png"); 
}

#score_ue_2 {
	background-image:url("images/thumbnails/score_ue_2.png"); 
}

#score_pre {
	background-image:url("images/thumbnails/score_pre.png"); 
}

#score_bru {
	background-image:url("images/thumbnails/score_bru.png"); 
}


/* performances */

.header_perf {
	background-image: url(images/header_perf.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
    height: 5vw;
    width: 90vw;
    padding: 1vw;
}

.div_buttons_container_perf {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	margin-top:1vw;
	padding: 1vw;
    margin-left: -1vw;
    margin-right: -1vw;
}

.div_button_container_perf {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: start;
    align-content: center;
	color: #586B7A;
	font-size:1rem;
    background-color: #b4c0b6;
	border:1px solid #586B7A;
	margin:0;
	margin-right:1.2vw;
	margin-bottom:1.2vw;
    padding: 0.5vw;
    width: 20vw;
    border-radius:0.5vw;
	cursor:pointer;
	-webkit-transition: background 0.5s 0s ease;
	-moz-transition: background 0.5s 0s ease;
	-o-transition: background 0.5s 0s ease;
	transition: background 0.5s 0s ease;
}

.div_button_container_squared {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: start;
    align-content: center;
	color: #586B7A;
	font-size:0.8vw;
    background-color: #b4c0b6;
	border:1px solid #586B7A;
	margin:0;
	margin-right:0.55vw;
	margin-bottom:0.55vw;
    padding: 0.5vw;
    width: 12vw;
	height: 4vw;
    border-radius:0.5vw;
	cursor:pointer;
	-webkit-transition: background 0.5s 0s ease;
	-moz-transition: background 0.5s 0s ease;
	-o-transition: background 0.5s 0s ease;
	transition: background 0.5s 0s ease;
}

.div_button_container_perf:hover, .div_button_container_squared:hover {
    background-color: #586B7A;
	color:white;
}

div.div_button_container_perf span, div.div_button_container_squared span {
	line-height: 1.1;
	width: 14.5vw;
}

div.div_button_container_perf div.div_square_home, div.div_button_container_squared div.div_square_home {
	margin-right: 0.5vw;
	border-radius: 0.5vw;
}

div.div_button_container_squared div.small_text {
	width: 5vw;
	font-size: 0.8rem;
    text-align: center;
    line-height: 1.2;
}

.emoji {
	font-family: 'Noto Emoji', sans-serif;
}

div.docs_column_container {
	display: flex;
	align-content: center;
	justify-content: space-between;
	align-items: flex-start;
}

div.docs_column {
	display: flex;
	flex-direction: column;
	color: #586B7A;
	font-size: 1rem;
    background-color: #b4c0b6;
	border: 1px solid #586B7A;
	margin: 0;
	border-radius: 0.5vw;
	width: 21vw;
	padding: 0.5vw;
	box-sizing: border-box;
}

div.docs_column_content {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    align-content: center;
    color: #586B7A;
    font-size: 1rem;
	padding: 0.5vw;
	cursor: pointer;
    -webkit-transition: background 0.5s 0s ease;
    -moz-transition: background 0.5s 0s ease;
    -o-transition: background 0.5s 0s ease;
    transition: background 0.5s 0s ease;
}

div.docs_column_content:nth-child(even) {
	background-color: #AAB3AA;
}

div.docs_column_content:nth-child(odd) {
	background-color: #B6C0B7;
}

div.docs_column_content:hover {
    background-color: #586B7A;
	color:white;
}

div.docs_column_content span {
	line-height: 1.1;
	width: 14.5vw;
}

div.audio_player_performances {
	display:flex;
	align-items:center;
	align_content:center;
	justify-content:space-between;
	margin-top: 2vw;
}

#audio_player_performances {
	width: 30vw;
	padding-right: 1vw;
}

#audio_current_performance {
	width: 68vw;
	font-size: 1rem;
}

div#div_preview {
	position: fixed;
	width: 150px;
	height: 100px;
	top: 100px;
	left: 100px;
	background-position: center left;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	display: none;
}

.explain {
	line-height: 1.5;
	font-size: 0.9rem;
}

p.explain {
	min-height: 3rem;
}

#searchInput {
	margin-bottom: 1vw;
	font-family: 'ABeeZee', sans-serif;
	font-size: 1rem;
	font-weight: normal;
}