diff --git a/src/data/Web_Visually.css b/src/data/Web_Visually.css
index ef8acbce9..986064941 100644
--- a/src/data/Web_Visually.css
+++ b/src/data/Web_Visually.css
@@ -126,7 +126,7 @@ h3 {
     border-bottom: double 4px #5D835F;
 }
 h4 {
-    font:normal 1.2em/1.2em serif;
+    font: normal 1.2em/1.2em serif;
     color: #FFF;
     margin-top: .3cm;
     padding:.2em 0 .2em 20px;
@@ -327,7 +327,7 @@ div#alphabet ul {
     height:24px;
     margin:0;
     padding: 0px 0px 0px 16px;
-    border-width: 2px 0px 4px 0px;
+    border-width: 1px 0px 1px 0px;
     border-style: solid;
     border-color: #5D835F;
 }
@@ -342,7 +342,7 @@ div#alphabet ul li a {
     display:block;
     padding: 4px 8px 4px 8px;
     float:left;
-    font:bold 16px/100% sans;
+    font: normal 16px/100% sans;
     margin:0;
     text-decoration:none;
     color: #000;
@@ -682,18 +682,18 @@ div#EventList table.alphaevent tbody tr td.ColumnPerson span.mother:before {
     content:"+ ";
 }
 div#EventDetail h3 {
-    font-size: xxx-large;
+    font-size: 28px;
 }
-div#EventDetail h3:first-lettr {
-    color: #5D835F;
+div#EventDetail h3:first-letter {
+    color: #903;
 }
 div#EventDetail table.eventlist {
-    margin: .5cm 0 .3cm 1.5cm;
-    width: 800px;
+    width: 100%;
+}
+div#EventDetail table.eventlist tbody tr {
+    border-top: dashed 1px #5D835F;
 }
 div#EventDetail table.eventlist tbody tr td.ColumnAttribute {
-    border-top: solid 1px #5D835F;
-    font-weight: bold;
     text-transform: uppercase;
     width: 20%;
 }
@@ -701,6 +701,9 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
     background-color: #D8F3D6;
     border-top: solid 1px #5D835F;
 }
+div#EventDetail table.eventlist tbody tr td.ColumnPerson {
+    background-color: #D8F3D6;
+}
     
 /* Gallery
 ----------------------------------------------------- */
@@ -787,13 +790,18 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
     border-width: 2px 0 1px 0;
     border-color: #5D835F;
 }
-table.exifdata tr td.ColumnAttribute {
-    border-top: solid 1px #5D835F;
-    width:60%;
+#GalleryDetail table.exifdata {
+    margin: .2em 0 .2em 0;
+    width: 100%;
 }
-table.exiflist tr td.ColumnValue {
-    border-top:solid 1px #5D835F;
-    width:45%;
+#GalleryDetail table.exifdata tbody tr {
+    border-top: solid 1px #5D835F;
+}
+#GalleryDetail table.exifdata tbody tr td.ColumnExifKeys {
+    width: 60%;
+}
+#GalleryDetail table.exifdata tbody tr td.ColumnMetaData {
+    width: 40%;
 }
 
 /* Contact
diff --git a/src/plugins/webreport/NarrativeWeb.py b/src/plugins/webreport/NarrativeWeb.py
index 544be4ea4..b9096e968 100644
--- a/src/plugins/webreport/NarrativeWeb.py
+++ b/src/plugins/webreport/NarrativeWeb.py
@@ -2330,8 +2330,8 @@ class EventListPage(BasePage):
                     Html("th", label, class_ = "Column" + colclass, inline = True)
                     for (label, colclass) in [
                         [THEAD,    "Type"],
-                        [GRAMPSID, "GRAMPSID"],
                         [DHEAD,    "Date"],
+                        [GRAMPSID, "GRAMPSID"],
                         [_PERSON,  "Person"] ]
                     ) 
 
@@ -2342,10 +2342,7 @@ class EventListPage(BasePage):
                 for (evt_type, datalist) in sort_event_types(db, event_types, event_handle_list):
                     first_event = True
 
-                    # sort the datalist by gramps id, date, and event handle
-                    datalist.sort()
-
-                    for (gid, date, event_handle) in datalist:
+                    for (date, gid, event_handle) in datalist:
                         event = db.get_event_from_handle(event_handle)
 
                         trow = Html("tr")
@@ -2362,11 +2359,6 @@ class EventListPage(BasePage):
                         else:
                             tcell += " " 
 
-                        # GRAMPS ID
-                        trow += ( Html("td", class_ = "ColumnGRAMPSID") +
-                            self.event_grampsid_link(event_handle, gid, None)
-                            )
-
                         # event date
                         tcell = Html("td", class_ = "ColumnDate", inline = True)
                         trow += tcell
@@ -2375,6 +2367,11 @@ class EventListPage(BasePage):
                         else:
                             tcell += " "   
 
+                        # GRAMPS ID
+                        trow += ( Html("td", class_ = "ColumnGRAMPSID") +
+                            self.event_grampsid_link(event_handle, gid, None)
+                            )
+
                         # Person
                         if evt_type in ["Divorce", "Marriage"]:
                             handle_list = db.find_backlink_handles(event_handle, 
@@ -6090,7 +6087,7 @@ def sort_event_types(db, event_types, event_handle_list):
         # add (gramps_id, date, handle) from this event
         if etype in event_dict:
             event_dict[etype].append(
-                (event.gramps_id, event.get_date_object(), handle)
+                (event.get_date_object(), event.gramps_id, handle)
                 )
 
     for tup_list in event_dict.values():