Restyling grafica pagina lettera

Luogo.html

@@ -172,8 +172,6 @@
 								</div>
 							</div>
 
-							<hr />
-
 							<div id="container_references" class="row box-info-container">
 
 								<div id="references" class="container-fluid">

css/lettera.css

@@ -153,8 +153,10 @@ header.masthead {
 }
 
 .btn-text {
-  font-size: 8px;
+  font-size: 10px;
   text-transform: uppercase;
+  padding-top: 4px;
+  margin-bottom: 0;
 }
 
 .img-logo {
@@ -162,12 +164,6 @@ header.masthead {
 	width:auto;
 }
 
-#title {
-  font-weight: bold;
-  font-size:20px;
-  padding: 1.5em 3.5em 0em 3em;
-}
-
 #title a:link {
   color: #000;
   background-color: transparent;
@@ -188,10 +184,20 @@ header.masthead {
   text-decoration: underline;
 }
 
-#container_lettera {
+/* #container_lettera {
   margin-left: 0px;
   margin-right:0px;
   padding: 2em 4em;
+} */
+
+.headInfo h2 {
+  font-size: 25px;
+  font-weight: 400;
+}
+
+.headInfo h3 {
+  font-size: 23px;
+  font-weight: 400;
 }
 
 #info_titolo {
@@ -204,13 +210,17 @@ header.masthead {
   text-align: center;
 }
 
-#info_lettera {
+/* #info_lettera {
   width:50%;
   border:1px solid;
   height: 75vh;
   overflow: scroll;
   background-color: #fff;
   padding-top: 3%;
+} */
+
+.info_lettera_container {
+  margin-top: 20px;
 }
 
 #all_info {
@@ -223,17 +233,17 @@ header.masthead {
   padding:1%;
 }
 
-div#info_lettera>div>div:nth-of-type(odd) {
+/* div#info_lettera>div>div:nth-of-type(odd) {
   background: #ededed;
-}
+} */
 
-#info_trascrizione {
+/* #info_trascrizione {
   margin-left:5px;
   width:50%;
   height: 73vh;
-}
+} */
 
-#trascrizione_titolo {
+/* #trascrizione_titolo {
   min-height: 30px;
   border:1px solid;
   padding: 1.5%;
@@ -241,15 +251,13 @@ div#info_lettera>div>div:nth-of-type(odd) {
   font-size: 16px;
   text-align: center;
   background-color: #fff;
-}
+} */
 
 #trascrizione_id {
-  height: 45vh;
-  overflow: scroll;
-  border:1px solid;
-  padding:3%;
-  text-align:justify;
-  background-color: #fff;
+  max-height: 442px;
+  overflow: auto;
+  border: 1px solid #dee2e6;
+  padding: 16px 20px;
 }
 
 #row_evt {
@@ -257,10 +265,10 @@ div#info_lettera>div>div:nth-of-type(odd) {
 }
 
 #col_antroponimi {
-  width: 50%;
-  height: 25vh;
-  overflow: scroll;
-  border:1px solid;
+  height: 250px;
+  overflow: auto;
+  border: 1px solid #dee2e6;
+  padding: 16px 20px;
   margin-right: 5px;
   background-color: #fff;
 }
@@ -268,11 +276,13 @@ div#info_lettera>div>div:nth-of-type(odd) {
 #col_antroponimi p {
   text-align:center;
   font-weight: 500;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #dee2e6;
 }
 
 #antroponimi {
   list-style-type: none;
+  padding-left: 0;
+  margin-bottom: 0;
 }
 
 #antroponimi li {
@@ -281,6 +291,8 @@ div#info_lettera>div>div:nth-of-type(odd) {
 
 #toponimi {
   list-style-type: none;
+  padding-left: 0;
+  margin-bottom: 0;
 }
 
 #toponimi li {
@@ -288,11 +300,11 @@ div#info_lettera>div>div:nth-of-type(odd) {
 }
 
 #col_toponimi {
-  width: 50%;
-  height: 25vh;
-  overflow: scroll;
-  border:1px solid;
-  margin-left: 5px;
+  height: 250px;
+  overflow: auto;
+  border: 1px solid #dee2e6;
+  padding: 16px 20px;
+  margin-right: 5px;
   background-color: #fff;
 }
 
@@ -347,11 +359,15 @@ div#info_lettera>div>div:nth-of-type(odd) {
   text-transform: capitalize;
 }
 
-.headInfo .col {
+/* .headInfo .col {
   border:  1px solid;
   text-align: center;
   vertical-align: middle;
   padding:  0%;
+} */
+
+.headInfo {
+  margin-bottom: 20px;
 }
 
 .infoChoice button {
@@ -363,32 +379,32 @@ div#info_lettera>div>div:nth-of-type(odd) {
   padding: 0px;
 }
 
-#infoBox {
+/* #infoBox {
   padding: 2%;
   text-transform: uppercase;
   background-color: #b61924;
   color: #fff;
   border: 1px solid #000;
-}
+} */
 
-#choice_buttons {
+/* #choice_buttons {
   display: flex;
   border-left: 1px solid;
   border-right: 1px solid;
-}
+} */
 
 #choice_buttons .btn {
     flex: 1;
   }
 
-#head_trascrizione .col{
+/* #head_trascrizione .col{
   text-transform: uppercase;
   background-color: #b61924;
   color: #fff;
   border: 1px solid #000;
   text-align: center;
   vertical-align: middle;
-}
+} */
 
 #imageEmb {
   width:100%; 

css/place_people.css

@@ -195,14 +195,6 @@ header.masthead {
   margin-top: 25px;
 }
 
-/* #container_references {
-  margin-left:15px;
-  margin-right:15px;
-  width: 80%;
-  margin-left: auto;
-  margin-right:auto;
-} */
-
 #place_info {
   display: none;
 }

css/styles.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/_global.scss","../scss/_mixins.scss","../scss/_variables.scss","../scss/_navbar.scss","../scss/_forms.scss","../scss/_buttons.scss","../scss/_masthead.scss","../scss/_showcase.scss","../scss/_icons.scss","../scss/_testimonials.scss","../scss/_call-to-action.scss","../scss/_footer.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;ECOE;EDLE;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;ECJE;EDWE;;;AAGJ;EACI,OESU;;AFRV;EACI;;;AAIR;EACI;EACA;;AACA;EAHJ;IAIQ;IACA;;;;AAIR;EACI;EACA;;AACA;EAHJ;IAIQ;IACA;;;;AAKJ;EADJ;IAEQ;;;AAEJ;EAJJ;IAKQ;;;AAEJ;EAPJ;IAQQ;;;;AAIR;EACI;IACI;IACA;IACA;;;AAKR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAII;EACA;EACA;;;AG5JZ;EACI;;;AAIA;EACI;;AAEI;EACI;IACI;IACA;IACA;IACA;IACA;;;AAKR;EACI;IACI;IACA;IACA;IACA;IACA;;;AAGR;EACI,ODMF;;ACHN;EACI;;;AAQA;EADJ;IAEQ;IACA;IACA;IACA;;;;AAMhB;EACI;;;ACnDA;EACI;EACA;;;ACFJ;EACI;EACA;;;AAIR;EACI,kBH4Be;EG3Bf,cH2Be;EG1Bf;;AACA;EACI;EACA;EACA;;;AAIR;EACI;;;ACnBJ;EACE;EACA,kBJQS;EIPT;ELAA;EACA;EACA;EACA;EKDA;EACA;;AACA;EACE;EACA,kBJEO;EIDP;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EAtBF;IAuBI;IACA;;EACA;IACE;;EAEF;IACE;;;;AC5BJ;EACE;;AAEF;EACE;EACA;;AAEF;EACE;IACE;;;;ACTF;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACI;EACA;EACA;;AAGR;EACE;EACA;;AAKF;EACE,ONII;;;AOlCV;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;;;ACbR;EACE;EACA,kBRQS;EQPT;ETAA;EACA;EACA;EACA;ESDA;EACA;;AACA;EACE;EACA,kBREO;EQDP;EACA;EACA;EACA;EACA;;;ACdJ;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA","file":"styles.min.css"}

lettera.html

@@ -1,343 +1,377 @@
 <!doctype html>
 <html>
+
 <head>
-<meta charset="utf-8">
-<title>MOCKY - Il mockup di RESTORE</title>
-<link href="Untitled1.css" rel="stylesheet">
-<link href="index.css" rel="stylesheet">
-<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
-<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
-<link href="css/lettera.css" rel="stylesheet">
-<link href="css/datafilter.css" rel="stylesheet">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
-<script src="js/lettera_query.js"></script>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="">
+	<meta name="author" content="">
 
+	<title>Restore - Lettera</title>
 
-</head>
-<body>
+	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
+	<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-	  <div class="container-fluid">
-	    <img src="img/Logo.png" style="width:100px;">
-	    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-	      <span class="navbar-toggler-icon"></span>
-	    </button>
-	    <div class="navbar-nav" style="margin-left:auto;">
-	        <a class="button-link" href="index.html"><button class="btn btn-menu" type="button">Home</button></a>
-	        <a class="button-link" href="http://restore.ovi.cnr.it/"><button class="btn btn-menu" type="button">Progetto</button></a>
-	        <a class="button-link" href="ricerca.html"><button class="btn btn-menu" type="button">Ricerca</button></a>
-	        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Indici</button></a>
-	        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Percorsi</button></a>
-	        <a class="button-link" href="standard.html"><button class="btn btn-menu" type="button">Standard</button></a>
-	        <div class="dropdown">
-	          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql
-	          </button>
-	          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-	            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
-	            <a class="dropdown-item" href="sparql.html">Query</a>
-	          </div>
-	        </div>
-	        <a class="button-link" href="download.html"><button class="btn btn-menu" type="button">Download</button></a>
-	        <div class="dropdown">
-	          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni
-	          </button>
-	          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-	            <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/">CKAN</a>
-	            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/">LOD</a>
-	          </div>
-	        </div>
-	      </div>
-	  </div>
-	</nav>
+	<link href="css/lettera.css" rel="stylesheet">
 
-<div id="title">
-</div>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
+	<script src="js/lettera_query.js"></script>
 
-<div class = "row" id="container_lettera">
-  <div class = "col-5 container">
-  	<div class="row headInfo">
-  		<div class="col" id="infoBox"> 
-	  			Informazioni
-	  	</div>
-  	</div>
-  	
-		<div class="row btn-group" id="choice_buttons" role="group">
-  		<div class="col infoChoice"> 
-	  			<button type="button" class="btn btn-outline-secondary active" onClick="show_OVI()">OVI</button>
-	  	</div>
-	  	<div class="col infoChoice"> 
-	  			<button type="button" class="btn btn-outline-secondary" onClick="show_ASPO()">ASPO</button>
-	  	</div>
-	  </div>
-		  
-  	<div class="row">
-  		<div class="col" id="info_lettera">
-  			<div id="OVI_info">
-				  	<div class="row">
-				  		<div class="col">
-				  			Mittente: 
-				  		</div>
-						<div id="mittente_id" class="col-6"></div>
-						<div id="mittente_btn" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Destinatario: 
-				  		</div>
-						<div id="destinatario_id" class="col-6"></div>
-						<div id="destinatario_btn" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Descrizione: 
-				  		</div>
-				  		<div id="descrizione_id" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Luogo di partenza: 
-				  		</div>
-						<div id="luogo_partenza_id" class="col-6"></div>
-						<div id="luogo_partenza_btn" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Luogo di arrivo: 
-				  		</div>
-						<div id="luogo_arrivo_id" class="col-6"></div>
-						<div id="luogo_arrivo_btn" class="col-2"></div>
-					</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Data di partenza: 
-				  		</div>
-				  		<div id="data_partenza_id" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Data di arrivo: 
-				  		</div>
-				  		<div id="data_arrivo_id" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Sigla OVI: 
-				  		</div>
-				  		<div id="sigla_OVI" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Segnatura: 
-				  		</div>
-						<div id="segnatura_id" class="col-6"></div>
-						<div id="segnatura_btn" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Lingua: 
-				  		</div>
-				  		<div id="lingua_id" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Area linguistica: 
-				  		</div>
-				  		<div id="area_linguistica_id" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Edizione: 
-				  		</div>
-						<div id="edizione_id" class="col-6"></div>
-						<div id="edizione_btn" class="col-2"></div>
-				  	</div>
-				  </div>
-
-				  <div id="ASPO_info" style="display:none;">
-				  	<div class="row">
-				  		<div class="col">
-				  			Mittente: 
-				  		</div>
-						<div id="mittente_id_ASPO" class="col-6"></div>
-						<div id="mittente_btn_ASPO" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Destinatario: 
-				  		</div>
-						<div id="destinatario_id_ASPO" class="col-6"></div>
-						<div id="destinatario_btn_ASPO" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Luogo di partenza: 
-				  		</div>
-						<div id="luogo_partenza_id_ASPO" class="col-6"></div>
-						<div id="luogo_partenza_btn_ASPO" class="col-2"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Luogo di arrivo: 
-				  		</div>
-						<div id="luogo_arrivo_id_ASPO" class="col-6"></div>
-						<div id="luogo_arrivo_btn_ASPO" class="col-2"></div>
-					</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Data di partenza: 
-				  		</div>
-				  		<div id="data_partenza_id_ASPO" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Data di arrivo: 
-				  		</div>
-				  		<div id="data_arrivo_id_ASPO" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Segnatura: 
-				  		</div>
-						<div id="segnatura_id_ASPO" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Materiale: 
-				  		</div>
-						<div id="consistenzaASPO" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Dimensione: 
-				  		</div>
-						<div id="dimensioneASPO" class="col-8"></div>
-				  	</div>
-				  	<div class="row">
-				  		<div class="col">
-				  			Ente responsabile: 
-				  		</div>
-						<div id="ownerASPO" class="col-8"></div>
-				  	</div>
-				  </div>
+	<link href="css/styles.min.css" rel="stylesheet">
+</head>
 
-			  </div>
+<body>
+	<header class="sticky-top">
+		<nav class="navbar navbar-expand-lg navbar-light bg-white">
+			<div class="container-fluid">
+				<div class="navbar-brand">
+					<img src="img/Logo.png" width="100" alt="Restore" />
+				</div>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" href="index.html">Home</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
+						</li>
+						<li class="nav-item active">
+							<a class="nav-link" href="ricerca.html">Ricerca</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Indici</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Percorsi</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="standard.html">Standard</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
+								<a class="dropdown-item" href="sparql.html">Query</a>
+							</div>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="download.html">Download</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
+								<a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/" target="_blank">CKAN</a>
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/" target="_blank">LOD</a>
+							</div>
+						</li>
+					</ul>
+				</div>
 			</div>
-  </div>
+		</nav>
+	</header>
 
-  <div class = "col container" id="info_trascrizione">
-  		<div class="row" id="head_trascrizione">
-	  		<div class="col box_title" id="trascrizione_titolo"> 
-	  			Trascrizione
-	  		</div>
-	  	</div>
-  		<div class="row">
-	  		<div class="col" id="trascrizione_id"> 
-	  		</div>
-	  	</div>
-	  	<div class="row align-items-center" id="row_evt">
-	  		<div id="evt_button" class="col" style="text-align:center;">
-	  			
-	  		</div>
-	  		<div class="col" style="text-align:center;">
-	  			<button type="button" class="btn btn-secondary" onclick="loadPageLOD()">Button LOD</button> 
-	  		</div>
-	  	</div>
-	  	<div class="row" id="row_pl">
-	  		<div class="col" id="col_antroponimi">
-	  			<p>Antroponimi</p>
-	  			<ul id="antroponimi">
-	  			</ul>
-	  		</div>
-	  		<div class="col" id="col_toponimi">
-	  			<p>Toponimi</p>
-	  			<ul id="toponimi">
-	  			</ul>
-	  		</div>
-	  	</div>
-  </div>
-</div>
+	<main>
+		<section>
+			<div class="w-content section-small">
+				<div class="box-info">
+					<div class="container-fluid">
+						<div class="row box-info-title">
+							<div class="col">
+								<h1 id="title" class="box-info-main-title"></h1>
+							</div>
+						</div>
+						<div class="row box-info-container">
+							<div class="col" id="container_lettera">
+								<div class="headInfo">
+									<h2 id="infoBox">Informazioni</h2>
+								</div>
 
-<!-- Modal -->
-<div id="myModal" class="modal">
+								<ul class="nav nav-tabs" id="choice_buttons">
+									<li class="nav-item infoChoice">
+										<button type="button" class="nav-link active" onClick="show_OVI()">OVI</button>
+									</li>
+									<li class="nav-item infoChoice">
+										<button type="button" class="nav-link" onClick="show_ASPO()">ASPO</button>
+									</li>
+								</ul>
+				
+								<div class="info_lettera_container">
+									<div class="col" id="info_lettera">
+										<div id="OVI_info">
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Mittente:</span>
+												</div>
+												<div id="mittente_id" class="col"></div>
+												<div id="mittente_btn" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Destinatario:</span>
+												</div>
+												<div id="destinatario_id" class="col"></div>
+												<div id="destinatario_btn" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Descrizione:</span>
+												</div>
+												<div id="descrizione_id" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Luogo di partenza:</span>
+												</div>
+												<div id="luogo_partenza_id" class="col"></div>
+												<div id="luogo_partenza_btn" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Luogo di arrivo:</span>
+												</div>
+												<div id="luogo_arrivo_id" class="col"></div>
+												<div id="luogo_arrivo_btn" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Data di partenza:</span>
+												</div>
+												<div id="data_partenza_id" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Data di arrivo:</span>
+												</div>
+												<div id="data_arrivo_id" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Sigla OVI:</span>
+												</div>
+												<div id="sigla_OVI" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Segnatura:</span>
+												</div>
+												<div id="segnatura_id" class="col"></div>
+												<div id="segnatura_btn" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Lingua:</span>
+												</div>
+												<div id="lingua_id" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Area linguistica:</span>
+												</div>
+												<div id="area_linguistica_id" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Edizione:</span>
+												</div>
+												<div id="edizione_id" class="col"></div>
+												<div id="edizione_btn" class="col-auto"></div>
+											</div>
+										</div>
+				
+										<div id="ASPO_info" style="display:none;">
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Mittente:</span>
+												</div>
+												<div id="mittente_id_ASPO" class="col"></div>
+												<div id="mittente_btn_ASPO" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Destinatario:</span>
+												</div>
+												<div id="destinatario_id_ASPO" class="col"></div>
+												<div id="destinatario_btn_ASPO" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Luogo di partenza:</span>
+												</div>
+												<div id="luogo_partenza_id_ASPO" class="col"></div>
+												<div id="luogo_partenza_btn_ASPO" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Luogo di arrivo:</span>
+												</div>
+												<div id="luogo_arrivo_id_ASPO" class="col"></div>
+												<div id="luogo_arrivo_btn_ASPO" class="col-auto"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Data di partenza:</span>
+												</div>
+												<div id="data_partenza_id_ASPO" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Data di arrivo:</span>
+												</div>
+												<div id="data_arrivo_id_ASPO" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Segnatura:</span>
+												</div>
+												<div id="segnatura_id_ASPO" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Materiale:</span>
+												</div>
+												<div id="consistenzaASPO" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Dimensione:</span>
+												</div>
+												<div id="dimensioneASPO" class="col"></div>
+											</div>
+											<div class="row mb-2">
+												<div class="col-sm-4">
+													<span class="label">Ente responsabile:</span>
+												</div>
+												<div id="ownerASPO" class="col"></div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
 
-</div>
+						<div class="row box-info-container">
+							<div class="col" id="container_lettera_1">
+								<div id="info_trascrizione">
+									<div class="headInfo" id="head_trascrizione">
+										<h2 id="trascrizione_titolo">Trascrizione</h2>
+									</div>
+									<div id="trascrizione_id"></div>
+									<div class="row align-items-center justify-content-end" id="row_evt">
+										<div id="evt_button" class="col-auto"></div>
+										<div class="col-auto">
+											<button type="button" class="btn btn-secondary" onclick="loadPageLOD()">Button LOD</button>
+										</div>
+									</div>
 
+									<div class="row" id="row_pl">
+										<div class="col-12 col-sm mb-4 mb-sm-0">
+											<div class="headInfo">
+												<h3>Antroponimi</h3>
+											</div>
+											<div  id="col_antroponimi">
+												<ul id="antroponimi"></ul>
+											</div>
+										</div>
+										<div class="col-12 col-sm">
+											<div class="headInfo">
+												<h3>Toponimi</h3>
+											</div>
+											<div id="col_toponimi">
+												<ul id="toponimi"></ul>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
 
-<div class="row" id="form_aspo">
-	<div id="imageASPO" class="col">
-		<!--<embed id="imageEmb" src="http://datini.archiviodistato.prato.it/la-ricerca/imageView/ASPO00000277/">-->
-	</div>
-</div>
+		<div class="row" id="form_aspo">
+			<div id="imageASPO" class="col">
+				<!--<embed id="imageEmb" src="http://datini.archiviodistato.prato.it/la-ricerca/imageView/ASPO00000277/">-->
+			</div>
+		</div>
+	</main>
 
+	<!-- Modal -->
+	<div id="myModal" class="modal"></div>
 
-<div id="footer">
-    <footer class="footer bg-dark">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
-          <ul class="list-inline mb-2">
-            <li class="list-inline-item">
-              <a href="#">About</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Contact</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Terms of Use</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Privacy Policy</a>
-            </li>
-          </ul>
-          <p class="text-muted small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
-        </div>
-        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
-          <ul class="list-inline mb-0">
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/CNR.png" />
-              </a>
-            </li>
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/RegioneToscana.jpg" />
-              </a>
-            </li>
-            <li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/European-Union.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/RepubblicaItaliana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/GiovaniSi.png" />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</div>
-<script src="js\lettera.js"></script>
-<!-- Bootstrap core JavaScript -->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+	<footer id="footer" class="footer">
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-7 h-100 text-center text-lg-left my-auto">
+					<ul class="list-inline mb-2">
+						<li class="list-inline-item">
+							<a href="#">About</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Contact</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Terms of Use</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Privacy Policy</a>
+						</li>
+					</ul>
+					<p class="small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
+				</div>
+				<div class="col-lg-5 h-100 text-center my-auto">
+					<ul class="partner-list list-inline mb-0">
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/CNR.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RegioneToscana.jpg" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/European-Union.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RepubblicaItaliana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">
+								<img class="img-logo" src="img/GiovaniSi.png" />
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</footer>
+
+	<script src="js\lettera.js"></script>
+	<!-- Bootstrap core JavaScript -->
+	<script src="vendor/jquery/jquery.min.js"></script>
+	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
 </body>
+
 </html>

scss/_global.scss

@@ -150,9 +150,11 @@ a {
         border-bottom: 2px solid transparent;
         &:hover,
         &:focus,
-        &:active {
+        &:active,
+        &.active {
             border-bottom: 2px solid $theme-color;
             outline: none;
+            color: black;
         }
     }
 }