diff --git a/layouts/listing.html b/layouts/listing.html
index dfef5fb..c93ecb1 100644
--- a/layouts/listing.html
+++ b/layouts/listing.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title><%= @item[:title] %></title>
-  <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
-  <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
+  <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
+  <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
   <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAOgyewQJRALbOFE6pebbIGxT86vvqu6OnXxNObPf8e1JU6DVn3hS0DkeXsUXWU5ycqtFtNgmG_7fV2g"></script>
diff --git a/output/css/style.css b/output/css/style.css
index e035a66..945e545 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -182,9 +182,32 @@ ul#menu li {
   border-top: none;
   padding-top: 1em;
 }
-.column abbr {
+abbr.date {
   display: block;
-  font-size: 0.8em;
+  width: 30px;
+  height: 60px;
+  float: left;
+  padding-right: 0.5em;
+}
+abbr.date span {
+  display: block;
+  text-align: center;
+}
+abbr.date .day {
+  font-size: 14px;
+  font-weight: bold;
+}
+abbr.date .month {
+  text-transform: uppercase;
+  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
+  font-size: 10px;
+}
+abbr.date .year {
+/*  border: 1px solid red;*/
+/*  -webkit-transform-origin: bottom right;
+  -webkit-transform: rotate(-90deg);*/
+  font-size: 9px;
+  font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif;
 }
 
 /* Flickr thumbnails */