From 444ca52221e173897c4a4158d37d4f12ea4c2f1a Mon Sep 17 00:00:00 2001
From: Angeliki <diakaggel@gmail.com>
Date: Wed, 5 Jun 2019 20:09:49 +0200
Subject: [PATCH] reshuffle, imrpoved titles

---
 amplification (copy).php | 157 +++++++++++++++++++++++++++++++++++++++
 amplification.php        | 101 ++++++++++++++++++++++---
 diary.php                |  38 ++++++++++
 index.php                |  35 +++++----
 player.php               |  46 ++++++++----
 podcast1.php             |  49 ++++++++----
 podcast2.php             |  41 ++++++----
 podcast3.php             |  41 ++++++----
 podcast4.php             |  41 ++++++----
 styles/stylesheet.css    |  63 ++++++++++++++--
 texts/dear_listener.txt  |   2 +-
 thesis-angeliki.php      |  73 ++++++++++--------
 12 files changed, 554 insertions(+), 133 deletions(-)
 create mode 100644 amplification (copy).php
diff --git a/amplification (copy).php b/amplification (copy).php
new file mode 100644
index 0000000..ad18a6e
--- /dev/null
+++ b/amplification (copy).php	
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+
+
+<html>
+<head>
+  <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
+  <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
+  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="js/jquery.ui.touch-punch.min.js"></script>
+<script src="js/draggable.js"></script>
+<script src="js/main.js"></script>
+<title>Amplification</title>
+</head>
+<body>
+	
+
+
+<!--   <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
+ -->
+
+<!-- draggable archive -->
+<!-- div vowels -->
+
+  <div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
+
+  <div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
+
+  <div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div>
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 116px; left: 1176px;"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 156px; left: 1216px;"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div>
+  
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 196px; left: 1256px;"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div>
+  
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 236px; left: 1296px;"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
+ 
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 276px; left: 1336px;"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div>
+  
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 316px; left: 1376px;"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div>
+  
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 356px; left: 1416px;"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div>
+ 
+
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 396px; left: 1456px;"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
+  
+  <div id="img" class="draggable  ui-draggable-handle" style="top: 436px; left: 1496px;"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
+
+
+
+
+
+<!-- div extracts -->
+<div>
+  <div class="draggable ui-draggable-handle" style="top: 1300px; left: 900px; line-height: 0 !important;"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
+
+  <div class="draggable ui-draggable-handle" style="top: 1400px; left: 1000px; line-height: 0 !important;"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
+
+  <div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
+</div>
+
+<!-- div images -->
+<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 264px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 100px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 125px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 385px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 16px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 228px;z-index: -1;"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 337px; left: 506px;"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 140px; left: 206px;"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable  ui-draggable-handle" style="top: 310px; left: 560px;"><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
+
+<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
+
+
+<div id="img" class="draggable  ui-draggable-handle" style="top: 410px; left: 430px;"><a href="images/meeting-20190508_leeszaal.jpg" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></a></div>
+
+<div id="img" class="draggable  ui-draggable-handle" style="top: 440px; left: 200px;"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
+
+
+
+
+<!-- draggable menu-->
+<div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;">
+  <h2><a class="active" href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+    <?php include 'texts/amplification.txt'; ?>
+</div>
+</div>
+
+<div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
+  <h2 ><a href="player.php">Player</a></h2> 
+  <div class="drag-content">
+   (audio archive)
+  </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
+  <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (main page)
+  </div>
+  </div>
+
+<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
+  <h2 ><a href="podcast4.php">Podcast4</a></h2> 
+</div>
+
+<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
+  <h2 ><a href="podcast1.php">Podcast1</a></h2> 
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
+  <h2 ><a href="podcast2.php">Podcast2</a></h2> 
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
+  <h2 ><a href="podcast3.php">Podcast3</a></h2> 
+</div>
+
+
+<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
+  <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div>
+</div>
+
+<!-- end draggable -->
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/amplification.php b/amplification.php
index d747571..9da47ae 100644
--- a/amplification.php
+++ b/amplification.php
@@ -4,6 +4,7 @@
 <html>
 <head>
   <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
+  <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
@@ -13,12 +14,26 @@
 </head>
 <body>
 	
-
+<button onclick="piles()">piles</button> 
+<button onclick="groups()">groups</button> 
 
 <!--   <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
  -->
 
 <!-- draggable archive -->
+<!-- metadata for each workshop -->
+<div class="draggable scaleable-wrapper box_metadata">
+  <li>Actions:<li>
+    <ul>
+      <li>Reading extracts</li>
+      <li>Discussion on public voice</li>
+      <li>Transcribing vowels</li>
+    </ul>
+  <li>Outcome: Score of vowels<li>
+  <li>Date: 23/5/2019<li>
+  <li>Location: Leeszaal<li>
+</div>
+
 <!-- div vowels -->
 
   <div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
@@ -101,44 +116,106 @@
 
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="width: 500px; top: 20px; right: 0px;">
-  <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;">
+  <h2><a class="active" href="amplification.php">Amplification of female voices</a></h2> 
   <div class="drag-content">
     <?php include 'texts/amplification.txt'; ?>
 </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; right: 200px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1200px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
   <h2 ><a href="player.php">Player</a></h2> 
+  <div class="drag-content">
+   (audio archive)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 860px; right: 335px;">
+<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
   <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (main page)
+  </div>
   </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
+<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1420px; left: 150px;">
+<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1320px; left: 380px;">
+<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
+<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div>
 </div>
 
 <!-- end draggable -->
 
+<!-- reshuffle -->
+<script>
+var distance=100
+groups()
+piles()
+
+
+function piles(){
+ var pile1_position=[20,100]
+$(".pile1").each(function(i){
+    $(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]})
+})
+
+var pile2_position=[600,200]
+$(".pile2").each(function(i){
+    $(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
+})
+
+var pile3_position=[300,300]
+$(".pile3").each(function(i){
+    $(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
+})
+
+ }
+
+function groups(){
+ 
+  var group_vowels_position=[20,100]
+  $(".group_vowels").each(function(i){
+      $(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]})
+  })
+
+  var group_photos_position=[300,100]
+  $(".group_photos").each(function(i){
+      $(this).css({"top":i*distance+group_photos_position[1],"left":i*distance+group_photos_position[0]})
+  })
+
+  var group_extracts_position=[300,100]
+  $(".group_extracts").each(function(i){
+      $(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
+  })
+
+  var group_metadata_position=[300,100]
+  $(".group_metadata").each(function(i){
+      $(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
+  })
+
+}
+</script>
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/diary.php b/diary.php
index bc04159..57586c0 100644
--- a/diary.php
+++ b/diary.php
@@ -15,6 +15,44 @@
 
   <body>
 
+<!-- draggable menu-->
+<div class="draggable scaleable-wrapper" style="width: 500px; top: 20px; right: 0px;">
+  <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+</div>
+
+<div class="draggable scaleable-wrapper active-draggable" style="top: 1270px; right: 200px;">
+  <h2 ><a class="active" href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+    <?php include 'texts/diary.txt'; ?>
+</div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
+  <h2 ><a href="player.php">Player</a></h2> 
+</div>
+<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
+  <h2 ><a href="index.php">About</a></h2> 
+  </div>
+
+<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
+  <h2 ><a href="podcast4.php">Podcast4</a></h2> 
+</div>
+
+<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
+  <h2 ><a href="podcast1.php">Podcast1</a></h2> 
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
+  <h2 ><a href="podcast2.php">Podcast2</a></h2> 
+</div>
+<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
+  <h2 ><a href="podcast3.php">Podcast3</a></h2> 
+</div>
+
+
+<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
+  <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+</div>
+
+<!-- end draggable menu-->
 
 <div class="draggable" style="position:absolute; top:6%; left:5%;width:1800px;">
   <audio controls >
diff --git a/index.php b/index.php
index 7393a8d..782a4a8 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,6 @@
 <html lang="en">
 <head>
-
+<style type="text/css"></style>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -30,44 +30,44 @@
 
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:12%;left:55%;width: 500px;">
+<div class="draggable scaleable-wrapper" style="top:12%;left:55%;width: 500px;">
   <div  class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 4px; right: 1500px;width: 300px; font-size: 20px;">
+<div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 300px; font-size: 20px;">
   <h2 style="font-size: 26px;"><a href="podcast1.php" >Podcast1</a></h2>
   <div class="drag-content">
     <?php include 'texts/podcast1.txt'; ?>
   </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px">
+<div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px">
   <h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2>
   <div class="drag-content">
     <?php include 'texts/amplification.txt'; ?>
   </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 680px; right: 300px;width: 300px; font-size: 20px;">
+<div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 300px; font-size: 20px;">
   <h2 style="font-size: 26px;"><a href="podcast2.php" >Podcast2</a></h2>
   <div class="drag-content">
     <?php include 'texts/podcast2.txt'; ?>
 </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 820px; right: 700px;width: 300px; font-size: 20px;">
+<div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 300px; font-size: 20px;">
   <h2 style="font-size: 26px;"><a href="podcast3.php" >Podcast3</a></h2>
   <div class="drag-content">
     <?php include 'texts/podcast3.txt'; ?>
 </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 920px; right: 510px;width: 300px; font-size: 20px;">
+<div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 300px; font-size: 20px;">
   <h2 style="font-size: 26px;"><a href="podcast4.php" >Podcast4</a></h2>
   <div class="drag-content">
     <?php include 'texts/podcast4.txt'; ?>
 </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;">
-  <h2 style="font-size: 20px;"><a href="player.php" >Diary of West Rotterdam</a></h2>
+<div class="draggable scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;">
+  <h2 style="font-size: 20px;"><a href="diary.php" >Diary of West Rotterdam</a></h2>
   <div class="drag-content">
     <?php include 'texts/diary.txt'; ?>
 </div></div>
@@ -75,21 +75,30 @@
 
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:70px;left:810px">
+<div class="draggable scaleable-wrapper"style="top:8%;left:35%">
   <h2 ><a href="player.php" >Player</a></h2>
   <div class="drag-content">
     <?php include 'texts/player.txt'; ?>
   </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:18%;left:6%;width: 800px; font-size: 24px" >
-  <h2 style="font-size: 44px"><a href="index.php" >About</a></h2>
+<div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" >
+  <h2 style="font-size: 44px"><a class="active" href="index.php" >About</a></h2>
   <div class="drag-content">
     <?php include 'texts/about.txt'; ?>
   </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:64%;left:25%;" >
+<!-- colophon -->
+<div class="draggable scaleable-wrapper box_metadata">
+    <h2>Colophon</h2>
+    <li>This work has been produced in the context of the graduation research of Angeliki Diakrousi from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</li>
+    <li>XPUB is a two year Master of Arts in Fine Art and Design that focuses on the intents, means and consequences of making things public and creating publics in the age of post-digital networks.</li>
+    <li>https://xpub.nl</li>
+    <li>This publication is based on the graduation thesis <em>Let's Talk About Unspeakable Things</em>, written under the supervision of Steve Rushton.</li><li>Special thanks to my tutors, Alex for his enormous help in XPUB comrades and all my friends with whom I had interesting discussions that pushed my research further.</li>
+</div>
+
+<div class="draggable scaleable-wrapper" style="top:64%;left:25%;" >
   <h2 ><a href="thesis-angeliki.php" >"Let's Talk About Unspeakable Things"</a></h2>
   <div class="drag-content">
     <?php include 'texts/thesis-summary.txt'; ?>
diff --git a/player.php b/player.php
index cbf9660..5c9464a 100644
--- a/player.php
+++ b/player.php
@@ -2,6 +2,7 @@
 <head>
 <meta charset="utf-8">
 <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
+<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="js/draggable.js"></script>
@@ -25,7 +26,8 @@
 
 
 <!-- links -->
-<div class="draggable" id="box_metadata" style="width: 500px !important">
+<div class="draggable box_metadata" style="width: 500px !important">
+  <h2>Online Sources</h2>
   <li id="angela">
    <a href="#" >Angela Davis @Occupy Wall Street</a>
   </li>
@@ -433,44 +435,56 @@ Oh, I hear children in the background crying</div>
 
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px">
+<div class="draggable scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
-</div>
-
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 316.833px; left: 10;">
-  <h2 ><a href="player.php">Player</a></h2> 
   <div class="drag-content">
-    <?php include 'texts/player.txt'; ?>
-</div>
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
+
+<div class="draggable scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
   <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (main page)
+  </div>
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px">
+<div class="draggable scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;">
+<div class="draggable scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 260px; left: 120px;">
+<div class="draggable scaleable-wrapper" style="top: 260px; left: 120px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 150px;">
+<div class="draggable scaleable-wrapper" style="top: 920px; left: 150px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 820px; left: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 820px; left: 80px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 316.833px; left: 10;">
+  <h2 ><a class="active" href="player.php">Player</a></h2> 
+  <div class="drag-content">
+    <?php include 'texts/player.txt'; ?>
+</div>
+</div>
 <!-- end draggable -->
 
 
diff --git a/podcast1.php b/podcast1.php
index d0ebec4..bb1ad81 100644
--- a/podcast1.php
+++ b/podcast1.php
@@ -17,44 +17,63 @@
 </h3>  
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
+<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
+<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
   <h2 ><a href="player.php">Player</a></h2> 
-</div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
-  <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (audio archive)
   </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
+  <h2 ><a href="index.php">About</a></h2>
+  <div class="drag-content">
+   (main page)
+  </div> 
+</div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
-  <h2 ><a href="podcast1.php">Podcast1</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+  <h2 ><a class="active" href="podcast1.php">Podcast1</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast1.txt'; ?>
 </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
+<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
-  <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
+  <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
+  <div class="drag-content">
+   (thesis)
+  </div>  
 </div>
 
 <br><br><br><br><br><br>
-<table><tr>
+<table>
+<tr>
+  <b>Episodes</b>
+</tr>
+<tr>
 <td><img src="images/headphones_logo.png" width="40px"></td>
 <?php 
 $files = glob("podcasts/podcast1/*.mp3"); 
diff --git a/podcast2.php b/podcast2.php
index 4abecbb..d4065cb 100644
--- a/podcast2.php
+++ b/podcast2.php
@@ -18,40 +18,55 @@
 </h3>  
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
+<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
+<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
   <h2 ><a href="player.php">Player</a></h2> 
-</div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
-  <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (audio archive)
   </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
+  <h2 ><a href="index.php">About</a></h2>
+  <div class="drag-content">
+   (main page)
+  </div> 
+</div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
-  <h2 ><a href="podcast2.php">Podcast2</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+  <h2 ><a class="active" href="podcast2.php">Podcast2</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast2.txt'; ?>
 </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
+<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
+<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div> 
 </div>
 
 <br><br><br><br><br><br>
diff --git a/podcast3.php b/podcast3.php
index 4be2047..ae9bf7f 100644
--- a/podcast3.php
+++ b/podcast3.php
@@ -18,40 +18,55 @@
 </h3>  
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
+<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
+<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
   <h2 ><a href="player.php">Player</a></h2> 
-</div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
-  <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (audio archive)
   </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
+  <h2 ><a href="index.php">About</a></h2>
+  <div class="drag-content">
+   (main page)
+  </div> 
+</div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
-  <h2 ><a href="podcast3.php">Podcast3</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+  <h2 ><a class="active" href="podcast3.php">Podcast3</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast3.txt'; ?>
 </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
+<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
+<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div> 
 </div>
 
 <br><br><br><br><br><br>
diff --git a/podcast4.php b/podcast4.php
index 067737a..fd57e39 100644
--- a/podcast4.php
+++ b/podcast4.php
@@ -18,40 +18,55 @@
 </h3>  
 
 <!-- draggable menu-->
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
+<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
+<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
   <h2 ><a href="player.php">Player</a></h2> 
-</div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
-  <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (audio archive)
   </div>
+</div>
+<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
+  <h2 ><a href="index.php">About</a></h2>
+  <div class="drag-content">
+   (main page)
+  </div> 
+</div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
-  <h2 ><a href="podcast4.php">Podcast4</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
+  <h2 ><a class="active" href="podcast4.php">Podcast4</a></h2> 
   <div class="drag-content">
     <?php include 'texts/podcast4.txt'; ?>
 </div>
 </div>
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
+<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
 
 
-<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
+<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
   <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+  <div class="drag-content">
+   (thesis)
+  </div> 
 </div>
 
 <br><br><br><br><br><br>
diff --git a/styles/stylesheet.css b/styles/stylesheet.css
index e970714..e677bbe 100644
--- a/styles/stylesheet.css
+++ b/styles/stylesheet.css
@@ -14,8 +14,19 @@ section {
 }
 
 a {
-  font-weight: normal;
+  /*font-weight: normal;*/
   text-decoration: none;
+  color: #A19696;
+}
+
+.active {
+  color: red;
+  font-size: 40px ;
+}
+
+.active-draggable{
+  width: 800px !important; 
+  font-size: 24px;
 }
 
 a img {
@@ -44,6 +55,8 @@ h2 {
   font-size: 26px;
   margin: 5px;
   margin-bottom: 10px;
+  color: red;
+
 }
 
 h3 {
@@ -80,9 +93,7 @@ button {
   display: block;
 }
 
-li {
-  list-style: none;
-}
+
 
 .list {
   padding-top: 10px;
@@ -589,22 +600,29 @@ input[type=checkbox]:checked ~ aside {
   list-style: outside none none !important;
 }
 
-#dashed, #angela, #judith, #laurie, #dana, #katalin {
+li, #angela, #judith, #laurie, #dana, #katalin {
   border-bottom: 1px dashed;
+  list-style: none;
+  color: #A19696;
 }
 
-#box_metadata {
+
+
+.box_metadata {
   background: white none repeat scroll 0 0;
   border: 1px solid #aaa;
   display: table;
   font-size: 95%;
   margin-bottom: 1em;
   padding: 20px;
-  width: 1000px;
+  /*width: 1000px;*/
   left: 0px;
   position: absolute;
 }
 
+#metadata-thesis {
+  width:1000px;
+}
 /*# sourceMappingURL=stylesheet.css.map */
 
 .status {
@@ -620,4 +638,35 @@ input[type=checkbox]:checked ~ aside {
 #saved_msg {
   color: red;
   font-size: 20px;
+}
+
+
+/*reshuffle piles*/
+.group_vowels {
+  width:200px;
+  height:400px;
+  border-style:solid;
+  position:absolute;
+}
+
+.group_photos {
+  width:200px;
+  height:400px;
+  border-style:solid;
+  position:absolute;
+}
+
+
+.group_extracts {
+  width:200px;
+  height:400px;
+  border-style:solid;
+  position:absolute;
+}
+
+.group_metadata {
+  width:200px;
+  height:400px;
+  border-style:solid;
+  position:absolute;
 }
\ No newline at end of file
diff --git a/texts/dear_listener.txt b/texts/dear_listener.txt
index 7eab6ff..1eaa65b 100644
--- a/texts/dear_listener.txt
+++ b/texts/dear_listener.txt
@@ -1,4 +1,4 @@
 <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">   
 <p>Dear listener,</p>
-you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice messages. <p>Maximum duration: 1 min</p>
+you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice message. Amplification can happen through multiplication, through the gathering of multiple individual voices. <p>Maximum duration: 1 min</p>
 
diff --git a/thesis-angeliki.php b/thesis-angeliki.php
index 58825c1..2af4aac 100644
--- a/thesis-angeliki.php
+++ b/thesis-angeliki.php
@@ -4,6 +4,7 @@
   <title>Let' s Talk About Unspeakable Things</title>
 </head>
 <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
+<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="js/jquery.ui.touch-punch.min.js"></script>
@@ -20,7 +21,7 @@
 
 <div align="center"><br><br><span style="font-size: 30px;" ><b>Let' s Talk About Unspeakable Things</b></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:pink;">by Angeliki Diakrousi</span></div><br><br>
 <div style="width:1800px; margin:0 auto;">
-<div class="draggable" style="width: 700px !important;right: 100px;top: 200px;">
+<div class="draggable scaleable-wrapper" style="width: 700px !important;right: 100px;top: 200px;">
   <div>
   <p class="toc_title">Contents</p>
   <ul class="toc_list">
@@ -50,37 +51,49 @@
 </div>
 
 <!-- draggable menu-->
-<div class="draggable" style="top: 740px; right: 300px;">
+<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
   <h2><a href="amplification.php">Amplification of female voices</a></h2> 
+  <div class="drag-content">
+   (workshops)
+  </div>
 </div>
 
-<div class="draggable" style="top: 948.6px; right: 30px;">
-  <h2 ><a href="">Diary of West Rotterdam</a></h2> 
+<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
+  <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> 
+  <div class="drag-content">
+   (first experiments)
+  </div>
 </div>
-<div class="draggable" style="top: 848.533px; right: 5px;">
+<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
   <h2 ><a href="player.php">Player</a></h2> 
+  <div class="drag-content">
+   (audio archive)
+  </div>
 </div>
-<div class="draggable" style="top: 540px; right: 1900px;">
+<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
   <h2 ><a href="index.php">About</a></h2> 
+  <div class="drag-content">
+   (main page)
   </div>
+</div>
 
-<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;">
+<div class="draggable scaleable-wrapper" style="top: 270px; right: 1300px;z-index: 1;">
   <h2 ><a href="podcast4.php">Podcast4</a></h2> 
 </div>
 
-<div class="draggable" style="top: 220px; right: 10px;">
+<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
   <h2 ><a href="podcast1.php">Podcast1</a></h2> 
 </div>
-<div class="draggable" style="top: 320px; right: 100px;">
+<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
   <h2 ><a href="podcast2.php">Podcast2</a></h2> 
 </div>
-<div class="draggable" style="top: 420px; right: 80px;">
+<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
   <h2 ><a href="podcast3.php">Podcast3</a></h2> 
 </div>
 
 
-<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;">
-  <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
+<div class="draggable scaleable-wrapper active-draggable" style="top: 30%; left: 5%; z-index: 9;">
+  <h2 ><a class="active" href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> 
   <div class="drag-content">
     <?php include 'texts/thesis-summary.txt'; ?>
   </div>
@@ -88,63 +101,63 @@
 
 <!-- draggable images -->
 
-<div class="draggable" style="top: 2713px;left: 147px;"><div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/carson-list.jpg"><img src="images/carson-list.jpg" width="800px"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like
+<div class="draggable scaleable-wrapper" style="top: 2713px;left: 147px;"><div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/carson-list.jpg"><img src="images/carson-list.jpg" width="800px"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like
 </div></div></div></div>
 
 
-<div class="draggable" style="top: 3000px;left: 1247px;">
+<div class="draggable scaleable-wrapper" style="top: 3000px;left: 1247px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/katalin.jpg"><img src="images/katalin.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 2: Vocal performance of Katalin Ladik
 </div></div></div></div>
 
-<div class="draggable" style="top: 3468px; left: -6px;">
+<div class="draggable scaleable-wrapper" style="top: 3468px; left: -6px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/miss-triggs.jpg"><img src="images/miss-triggs.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 3: Cartoon from Riana Dunkan
 </div></div></div></div>
 
-<div class="draggable" style="top: 3980px; left: -33px;">
+<div class="draggable scaleable-wrapper" style="top: 3980px; left: -33px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"> <a target="_blank" href="images/gonzalo.jpg"><img src="images/gonzalo.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 4: Cartoon from Gonzalo Rocha
 </div></div></div></div>
 
-<div class="draggable" style="top: 4150px;left: 1482px;">
+<div class="draggable scaleable-wrapper" style="top: 4150px;left: 1482px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/laurie.jpg"><img src="images/laurie.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 5: Performance from Laurie Anderson
 </div></div></div></div>
 
-<div class="draggable" style="top: 5836px; left: 32px;">
+<div class="draggable scaleable-wrapper" style="top: 5836px; left: 32px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/occupy-davis-butler.jpg"><img src="images/occupy-davis-butler.jpg" width="1000px"></a><div class="tooltip-content-right"><div>Figure 6: Speeches of Angela Davis and Judith Butler in Occupy Wall Street
 </div></div></div></div>
 
-<div class="draggable" style="top: 6463px; left: 1513px;">
+<div class="draggable scaleable-wrapper" style="top: 6463px; left: 1513px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/mikrofoniki.jpg"><img src="images/mikrofoniki.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 7: 'Mikrophoniki' demonstration in Athens
 </div></div></div></div>
 
-<div class="draggable" style="top: 6721px; left: 40px;">
+<div class="draggable scaleable-wrapper" style="top: 6721px; left: 40px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/feminists.JPG"><img src="images/feminists.JPG" width="500px"></a><div class="tooltip-content-right"><div>Figure 8: Speech Matters: Violence and the Feminist Voice
 </div></div></div></div>
 
 
-<div class="draggable" style="top: 7805px; left: 1407px;">
+<div class="draggable scaleable-wrapper" style="top: 7805px; left: 1407px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/broadcastcart.jpg"><img src="images/broadcastcart.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 9: 'The Broadcast Cart' of Miranda Zúñiga transmitting
 </div></div></div></div>
 
-<div class="draggable" style="top: 9343px;left: -22px;">
+<div class="draggable scaleable-wrapper" style="top: 9343px;left: -22px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/twomouths.jpg"><img src="images/twomouths.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 10: A sculpture of Baubo, goddess of sacred and sexual humor
 </div></div></div></div>
 
 
 
-<div class="draggable" style="top: 8565px; left: 1442px;">
+<div class="draggable scaleable-wrapper" style="top: 8565px; left: 1442px;">
 <div  class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/liveoccupy.jpg"><img src="images/liveoccupy.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 11: Live streaming from Occupy Wall Street
 </div></div></div></div>
 
 <!-- end of draggable images -->
 
 
-<div id="box_metadata" class="draggable" style="z-index:1;">
-  <p></p><p></p><p id="dashed">Name: Angeliki Diakrousi<br />
-  </p><p id="dashed">Title: Let's Talk About Unspeakable Things<br />
-  </p><p id="dashed">Student number: 0956090<br />
-  </p><p id="dashed">Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.<br />
-  </p><p id="dashed">Adviser: Steve Rushton<br />
-  </p><p id="dashed">Second Reader: Kate Briggs</p><p>Word count: 8380</p><p>  </p><p></p><p>  </p>
+<div class="draggable scaleable-wrapper box_metadata" id="metadata-thesis" >
+  <p></p><p></p><p>Name: Angeliki Diakrousi<br />
+  </p><p>Title: Let's Talk About Unspeakable Things<br />
+  </p><p>Student number: 0956090<br />
+  </p><p>Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.<br />
+  </p><p>Adviser: Steve Rushton<br />
+  </p><p>Second Reader: Kate Briggs</p><p>Word count: 8380</p><p>  </p><p></p><p>  </p>
 </div>
 
 <div id="maintext">
