+
+/* Styling for In-Line Web-Search Form Fields
+ * ==========================================
+ * Derived from Juri Wornowitski's DuckDuckGo search widget implementation,
+ * version 3.0, as described at https://www.plainlight.com/ddg
+ */
+form.search
+{ /* Let the search box fill the entire width of its containing
+ * element, with 0.3em spacing above and below; (thus, when two
+ * search boxes are placed together, they will be separated by
+ * 0.6em vertical space).
+ */
+ width: 100%; margin: 0.3em auto;
+}
+form.search input
+{ /* Establish styling attributes for the keywords input field,
+ * which fills the search box from its left-hand side, most of
+ * the way across to the right...
+ */
+ display: block; outline: none; box-sizing: border-box;
+ border: 1px solid #003366; border-right: none; border-radius: 7px 0 0 7px;
+ height: 30px; width: calc( 100% - 60px ); padding: 0.6em;
+ font-size: 0.8em; background-color: #f3f3ff;
+}
+form.search button
+{ /* ...with a search button occupying the rightmost 60px.
+ */
+ float: right; height: 30px; width: 60px; font-size: 1em;
+ border: 1px solid #003366; border-left: none; border-radius: 0 7px 7px 0;
+ cursor: pointer; color: #336699; background-color: #ccccff;
+}
+form.search button:active, form.search button:hover
+{ /* Invert search button colours, when the mouse is placed
+ * over it, or while a search is in progress.
+ */
+ color: #ccccff; background-color: #6699cc;
+}
+form.search button:focus
+{ /* Do not outline the button, even when it has the focus.
+ */
+ outline:none;
+}
+