docs: refresh and improve the "named data" sphinx theme

Change-Id: I6c04bb94e33191a2b0d32e0d7bc61ab44af9d84d
diff --git a/docs/named_data_theme/static/foundation.css b/docs/named_data_theme/static/foundation.css
index ff1330e..9024410 100644
--- a/docs/named_data_theme/static/foundation.css
+++ b/docs/named_data_theme/static/foundation.css
@@ -123,10 +123,10 @@
 ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }
 
 /* Blockquotes ---------------------- */
-blockquote, blockquote p { line-height: 1.5; }
+blockquote, blockquote p { line-height: 1.5; color: #6f6f6f; }
 
-blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; }
-blockquote cite { display: block; font-size: 13pt; color: #555555; }
+blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
+blockquote cite { display: block; font-size: 13px; color: #555555; }
 blockquote cite:before { content: "\2014 \0020"; }
 blockquote cite a, blockquote cite a:visited { color: #555555; }
 
@@ -786,3 +786,26 @@
 .flex-video.widescreen { padding-bottom: 57.25%; }
 .flex-video.vimeo { padding-top: 0; }
 .flex-video iframe, .flex-video object, .flex-video embed, .flex-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } }
+
+/* Microformats ---------------------- */
+ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px; }
+ul.vcard li { margin: 0; display: block; }
+ul.vcard li.fn { font-weight: bold; font-size: 15px; font-size: 1.5rem; }
+
+p.vevent span.summary { font-weight: bold; }
+p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
+
+/* Progress Bar ---------------------- */
+div.progress { padding: 2px; margin-bottom: 10px; border: 1px solid #cccccc; height: 25px; /* meter */ /* border radii */ }
+div.progress .meter { background: #fd7800; height: 100%; display: block; width: 50%; }
+div.progress.secondary .meter { background: #e9e9e9; }
+div.progress.success .meter { background: #5da423; }
+div.progress.alert .meter { background: #c60f13; }
+div.progress.radius { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
+div.progress.radius .meter { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
+div.progress.round { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
+div.progress.round .meter { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
+
+ul li p { display: inline; }