diff --git a/html/Ocean.std-theme/ocean.css b/html/Ocean.std-theme/ocean.css
index 2376ab511ff5dda02ac68fa3edab932ac7e79eb7..fdcd367bb94aba14b709e9fc64919a93dbbf818a 100644
--- a/html/Ocean.std-theme/ocean.css
+++ b/html/Ocean.std-theme/ocean.css
@@ -270,49 +270,47 @@ div#style-menu-holder {
 
 #synopsis {
   position: fixed;
-  right: -21.5em;
+  right: 0;
   font-size: 90%;
-  width: 22em;
   height: 80%;
-  top: 5em;
+  top: 10%;
   padding: 0;
-  background-color: #fff2b2;
 }
 
-#synopsis:hover {
-  right: 0;
-  background: none;
+#synopsis .caption {
+  text-align: right;
+  float: left;
+  width: 29px;
+  color: rgba(255,255,255,0);
+  height: 110px;
+  margin: 0;
+  font-size: 1px;
+  padding: 0;
+}
+
+#synopsis p.caption.collapser,
+#synopsis p.caption.expander {
+  background: url(synopsis.png) no-repeat 0 -8px;
 }
 
-#synopsis .caption,
 #synopsis ul,
 #synopsis ul li.src {
-  background-color: #fff2b2;
+  background-color: #f9f8db;
   white-space: nowrap;
 }
 
-#synopsis > * {
-  margin: 0 0 0 8px;
-  border-left: 1px solid rgb(196,69,29); 
-}
-
-#synopsis .caption {
-  border-top: 1px solid rgb(196,69,29);
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  text-align: center;
-}
-
-#synopsis ul {
+#synopsis ul.collapser,
+#synopsis ul.expander {
+  background-image: none;
   list-style: none;
+  width: 22em;
   height: 100%;
   overflow: auto;
-  border-bottom: 1px solid rgb(196,69,29);
-  padding-left: 0.5em;
+  padding: 0.5em;
+  margin: 0;
 }
 
 #synopsis ul ul {
-  border: none;
   overflow: hidden;
 }
 
diff --git a/html/Ocean.std-theme/synopsis.png b/html/Ocean.std-theme/synopsis.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a52b20995d8813d09dc5eda49b7917fedc7eca7
Binary files /dev/null and b/html/Ocean.std-theme/synopsis.png differ
diff --git a/src/Haddock/Backends/Xhtml.hs b/src/Haddock/Backends/Xhtml.hs
index eb06e499ffb3c1b758b764999e464c00046740f7..eae90bd461568454e80c22584d82b67446fac90c 100644
--- a/src/Haddock/Backends/Xhtml.hs
+++ b/src/Haddock/Backends/Xhtml.hs
@@ -504,10 +504,10 @@ ifaceToHtml maybe_source_url maybe_wiki_url iface unicode
       | no_doc_at_all = noHtml
       | otherwise
       = divSynposis $
-            sectionName << "Synopsis" +++
+            paragraph ! collapser "syn" "caption" << "Synopsis" +++ 
             shortDeclList (
                 mapMaybe (processExport True linksInfo unicode) exports
-            )
+            ) ! ([identifier "syn"] ++ collapser "syn" "hide")
 
         -- if the documentation doesn't begin with a section header, then
         -- add one ("Documentation").