diff --git a/src/main/webapp/WEB-INF/ng.html b/src/main/webapp/WEB-INF/ng.html
index 2d915d2..ade1e31 100644
--- a/src/main/webapp/WEB-INF/ng.html
+++ b/src/main/webapp/WEB-INF/ng.html
@@ -59,11 +59,16 @@
       max-width: 275px;
       overflow: hidden;
     }
-    img.picture {
+    img.imagepic {
       box-shadow: 5px 5px 5px #777;
       -webkit-box-shadow: 5px 5px 5px #777;
       -moz-box-shadow: 5px 5px 5px #777;
     }
+    img.dirpic {
+      box-shadow: 5px 5px 2px #aa4;
+      -webkit-box-shadow: 5px 5px 2px #aa4;
+      -moz-box-shadow: 5px 5px 2px #aa4;
+    }
     div.imgborder {
        margin: 10px;
     }
diff --git a/src/main/webapp/assets/render.js b/src/main/webapp/assets/render.js
index 67f400a..0d588c2 100644
--- a/src/main/webapp/assets/render.js
+++ b/src/main/webapp/assets/render.js
@@ -43,7 +43,7 @@ $(function() {
 			var gridDiv = $("<div class=\"grid\">\n"
 				            + "   <span class=\"name\">" + entry.name + "</span><br/>\n"
 				            + "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + entry.path + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
-				            + "<img class=\"picture\" src=\"/photo/album" + (entry.thumbtype == "movie" ? entry.path + ".frame" : entry.path) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
+				            + "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? entry.path + ".frame" : entry.path) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
 				            + "</div>\n");
 
             var captionP = $("<p id=\"" + entry.name + "\" class=\"caption\"></p>\n");