1 files changed, 63 insertions, 32 deletions

diff --git a/docs/portfolio/index.css b/docs/portfolio/index.css
index caf9524..7395dc6 100644
--- a/docs/portfolio/index.css
+++ b/docs/portfolio/index.css
@@ -1,33 +1,37 @@
-
 @font-face {
-  font-family: 'Crimson';
-  src: url('fonts/CrimsonText-Bold.ttf') format('truetype');
+  font-family: "Crimson";
+  src: url("fonts/CrimsonText-Bold.ttf") format("truetype");
   font-weight: bold;
 }
 @font-face {
-  font-family: 'Crimson';
-  src: url('fonts/CrimsonText-BoldItalic.ttf') format('truetype');
+  font-family: "Crimson";
+  src: url("fonts/CrimsonText-BoldItalic.ttf") format("truetype");
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
-  font-family: 'Crimson';
-  src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
+  font-family: "Crimson";
+  src: url("fonts/CrimsonText-Regular.ttf") format("truetype");
 }
 @font-face {
-  font-family: 'Crimson';
-  src: url('fonts/CrimsonText-Italic.ttf') format('truetype');
+  font-family: "Crimson";
+  src: url("fonts/CrimsonText-Italic.ttf") format("truetype");
   font-weight: normal;
   font-style: italic;
 }
 
-* { box-sizing: border-box; }
-html,body {
-  margin: 0; padding: 0;
-  width: 100%; height: 100%;
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
 }
 body {
-  font-family: 'Crimson', serif;
+  font-family: "Crimson", serif;
   font-size: 1.2em;
   transition: background-color 100ms;
   background-color: #fff;
@@ -72,7 +76,7 @@ h3 {
 h3 + small {
   display: inline-block;
   font-size: 1.2em;
-  font-style: italic;
+  /*font-style: italic;*/
 }
 ul {
   list-style-type: none;
@@ -110,30 +114,44 @@ li::before {
   height: 1.2em;
 }
 
-.icon.notes { background-image: url(img/notes.svg);}
-.icon.note { background-image: url(img/note.svg);}
-.icon.grid { background-image: url(img/grid.svg);}
-.icon.graph { background-image: url(img/graph.svg);}
+.icon.notes {
+  background-image: url(img/notes.svg);
+}
+.icon.note {
+  background-image: url(img/note.svg);
+}
+.icon.grid {
+  background-image: url(img/grid.svg);
+}
+.icon.graph {
+  background-image: url(img/graph.svg);
+}
 .playing .icon.audio,
-.icon.pause { background-image: url(img/pause.svg);}
+.icon.pause {
+  background-image: url(img/pause.svg);
+}
 .icon.audio,
-.icon.play { background-image: url(img/play.svg); background-size: 80% 80%;}
+.icon.play {
+  background-image: url(img/play.svg);
+  background-size: 80% 80%;
+}
 
 .player {
   position: fixed;
-  bottom: 0; left: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   max-width: 720px;
   padding-right: 40px;
-  box-shadow: 0 0 2px rgba(0,0,0,0.3);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
   background: white;
-  transition: 0.2s cubic-bezier(0,0,1,1);
-  transform: translate3d(0,110%,0);
+  transition: 0.2s cubic-bezier(0, 0, 1, 1);
+  transform: translate3d(0, 110%, 0);
   display: flex;
   flex-direction: column;
 }
 .player.active {
-  transform: translate3d(0,0%,0);
+  transform: translate3d(0, 0%, 0);
 }
 .player .icon {
   cursor: pointer;
@@ -179,7 +197,8 @@ li::before {
 .player .track {
   pointer-events: none;
   position: absolute;
-  top: 50%; left: 0;
+  top: 50%;
+  left: 0;
   margin-top: -1px;
   height: 2px;
   background: #333;
@@ -188,7 +207,8 @@ li::before {
 .player .dot {
   pointer-events: none;
   position: absolute;
-  top: 50%; left: 0;
+  top: 50%;
+  left: 0;
   margin-top: -6px;
   width: 12px;
   height: 12px;
@@ -291,10 +311,21 @@ body {
 .buttons {
   margin: 0 0 10px 0;
 }
-label { display: flex; flex-direction: row; margin-bottom: 10px; } 
-label > span { display: block; min-width: 80px; }
-#recording_msg { display: none; }
-.recording #recording_msg { display: inline; }
+label {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+}
+label > span {
+  display: block;
+  min-width: 80px;
+}
+#recording_msg {
+  display: none;
+}
+.recording #recording_msg {
+  display: inline;
+}
 #cases {
   margin-top: 10px;
   height: 60px;