diff --git a/+++/lestyle.css b/+++/lestyle.css
index e59a0f5..49733ee 100644
--- a/+++/lestyle.css
+++ b/+++/lestyle.css
@@ -47,16 +47,26 @@ table td img {
 	border: 2px grey ridge;
 }
 
+.lst p mat {
+	margin-left: : 2em;
+}
+
 .lst ul li { display: inline; }
 
 .lst ul li desc {
-	bborder: 10px grey ridge;
 	margin: 2em;
 	margin-bottom: 1em;	
 	width: 985;
 	display: block;
 }
 
+.lst ul li desc img {
+	border: 10px grey ridge;
+	margin: 0em;
+	margin-bottom: 2em;
+	width: 985;
+	display: block;
+}
 
 .lst ul li img {
 	border: 10px grey ridge;
@@ -72,6 +82,44 @@ table td img {
 	width: 450;
 }
 
+.lst ul li sound {
+	display: inline-block;
+	border: 10px grey ridge;
+	margin: 2em;
+	width: 440;
+	padding: 10;
+}
+
+.lst ul li sound track {
+	display: block;
+	margin-top: 0.3em;
+	margin-bottom: 0.3em;
+}
+
+.lst ul li sound info {
+	width: 100%;
+}
+
+.lst ul li sound audio {
+	width: 100%;
+	margin-top: 0.5em;
+}
+
+.lst ul li lo img {
+	border: none;
+	margin: 1em;
+	margin-top: 0.5em;
+	max-width: 300;
+}
+
+.lst ul li la img {
+	border: none;
+	margin: 1em;
+	margin-top: 0.5em;
+	max-width: 100;
+	max-height: 100;
+}
+
 address {
 	margin: 20px;
 }
diff --git a/.gitignore b/.gitignore
index be8fcf2..c1b8efb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 +++/*.jpg
++++/*.jpeg
 +++/*.pdf
-+++/Screen-Shot-2014-05-26-at-20.40.24-b.png
\ No newline at end of file
++++/Screen-Shot-2014-05-26-at-20.40.24-b.png
++++/bb15.png
\ No newline at end of file
diff --git a/gen.py b/gen.py
index d3a57ee..0ebb464 100644
--- a/gen.py
+++ b/gen.py
@@ -49,13 +49,37 @@ def translate(txt, dirname):
 def escape_date(dirname):
 	return re.sub('^20\d{2}?.', '', dirname)
 
-def emit_img(file):
+def emit_img(file, data_dir):
 	return '<a href="' + file + '"><img src="' + file + '" /></a>'
 
-def emit_video_mp4(file):
+def emit_video_mp4(file, data_dir):
 	return '<video controls><source src="' + file + '" type="video/mp4"</video>'
 
-def default(file):
+def emit_audio(file, data_dir):
+	# an '.audio' file is a json file with a list of audio elements
+	# which need to be bundles as a type of list in a single <li>
+	filename = os.path.join(data_dir, file);
+	with open(filename) as f:
+		audio = json.loads(f.read())
+		out = "<sound>\n"
+		for a in audio:
+			out += "<track>\n"
+			out += "<info>\n"
+			out += "<name>" + a["name"] + "</name>\n"			
+			#out += "<duration>" + a["length"] + "</duration>\n"
+			out += "</info>\n"
+			out += "<audio controls preload>\n"
+			out += '<source src="' + a["file"] + '" type="audio/' + a["type"] + '">'
+			out += "</audio>\n"
+			out += "</track>\n"
+
+		out += "</sound>\n"
+
+		return out
+
+	return "to do to do to do"
+
+def default(file, data_dir):
 	return None;
 
 content_map = {
@@ -63,6 +87,7 @@ content_map = {
 	'.jpg': emit_img,
 	'.m4v': emit_video_mp4,
 	'.mov': emit_video_mp4,
+	'.audio': emit_audio,
 	'.html': default,
 	'.txt': default
 };
@@ -118,9 +143,10 @@ def index_content(dir_name, data_dir, index_txt, desc_txt, template):
 		
 		for j in files:
 			x, ext = os.path.splitext(j);
-			element = content_map[ext](j);
-			if element:
-				content += "<li>" + content_map[ext](j) + "</li>" + "\n";
+			if ext in content_map:
+				element = content_map[ext](j, data_dir);
+				if element:
+					content += "<li>" + element + "</li>" + "\n";
 
 	#print content
 
diff --git a/index_apache_template.html b/index_apache_template.html
index dc03b95..3fa794c 100644
--- a/index_apache_template.html
+++ b/index_apache_template.html
@@ -1,6 +1,7 @@
 <html>
 	<head>
-		<title>Index of /gauthiier.info/2014.waveforms</title>
+		<meta charset="utf-8">
+		<title>Index of /gauthiier.info/[[dir]]</title>
 		<link rel="stylesheet" type="text/css" href="../+++/lestyle.css"/>
 		<meta name="keywords" content="david gauthier, gauthiier, davidgauthier, dviid">
 	</head>
diff --git a/index_template.html b/index_template.html
index 5bfeef9..efbc215 100644
--- a/index_template.html
+++ b/index_template.html
@@ -1,6 +1,6 @@
-<html lang="en">
+<html>
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta charset="utf-8">
 	<meta name="keywords" content="david gauthier, gauthiier, davidgauthier, dviid">
 	<meta name="description" content="David Gauthier (b.1979, CA) - selected index of work.">
 	<link rel="icon" href="+++/jules-henri.ico" type="image/x-icon">	
