new use case graphics and slightly larger font

7 files changed, 54 insertions, 21 deletions

diff --git a/help/ConfigBasic.md b/help/ConfigBasic.md
index f4796a1b7..1df1e264b 100644
--- a/help/ConfigBasic.md
+++ b/help/ConfigBasic.md
@@ -27,7 +27,7 @@ The language selector shows that YaCy is built for an international audience. Th
 
 ## Page Architecture
 
-The page is organized as a setup checklist. Language is first because it affects the whole user interface. Use case comes next because it changes YaCy's network and index-sharing behavior. Peer name and port define how this peer identifies itself and how it is reached.
+The page is organized as a setup checklist. Language is first because it affects the whole user interface. Use case comes next because it changes YaCy's network and index-sharing behavior. Each use-case option is shown as a card containing its radio button, name, illustration, and description. Peer name and port define how this peer identifies itself and how it is reached.
 
 | Control | Meaning | Valid values |
 | --- | --- | --- |
diff --git a/htroot/ConfigBasic.html b/htroot/ConfigBasic.html
index 7d3f470eb..3a555c55a 100644
--- a/htroot/ConfigBasic.html
+++ b/htroot/ConfigBasic.html
@@ -4,6 +4,38 @@
     <meta charset="UTF-8" />
     <title>YaCy '#[clientname]#': Access Configuration</title>
     #%env/templates/metas.template%#
+    <style type="text/css">
+      .usecase-options {
+        border-collapse: separate;
+        border-spacing: 8px 0;
+        margin: 8px -8px 0;
+      }
+      .usecase-option {
+        background-color: #384757;
+        color: #ffffff;
+        vertical-align: top;
+        width: 374px;
+      }
+      .usecase-option label {
+        color: inherit;
+        cursor: pointer;
+      }
+      .usecase-option-heading {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 0;
+        padding: 12px;
+      }
+      .usecase-option-image,
+      .usecase-option-image img {
+        display: block;
+        margin: 0;
+      }
+      .usecase-option-description {
+        display: block;
+        padding: 12px;
+      }
+    </style>
     <script type="text/javascript">
       <!--
       function element_clicked(element){
@@ -74,23 +106,24 @@
           ::<div class="alert alert-warning" role="alert"><p>One or more remote Solr instances are attached.</p> 
           <p>Please be sure you want to expose the indexed documents in this new mode. You may want to disconnect or change the remote Solr instance(s) attached (see the <a href="IndexFederated_p.html">Index Sources &amp; Targets</a> page).</p></div>
           #(/switchWarning)#
-          <table border="0">
-          <tr>
-            <td style="width: 256px;"><input type="radio" name="usecase" value="freeworld" id="usecaseFreeworld" #(freeworldChecked)#::checked="checked"#(/freeworldChecked)# /><label for="usecaseFreeworld">Community-based web search</label></td>
-              <td style="width: 256px;"><input type="radio" name="usecase" value="portal" id="usecasePortal" #(portalChecked)#::checked="checked"#(/portalChecked)# /><label for="usecasePortal">Search portal for your own web pages</label></td>
-              <td><input type="radio" name="usecase" value="intranet" id="usecaseIntranet" #(intranetChecked)#::checked="checked"#(/intranetChecked)# /><label for="usecaseIntranet">Intranet Indexing</label></td>
-          </tr>
-          <tr>
-            <td><label for="usecaseFreeworld"><img src="env/grafics/usecase_freeworld.png" alt="Usecase Freeworld" /></label></td>
-            <td><label for="usecasePortal"><img src="env/grafics/usecase_webportal.png" alt="Usecase Portal" /></label></td>
-            <td><label for="usecaseIntranet"><img src="env/grafics/usecase_intranet.png" alt="Usecase Intranet" /></label></td>
-          </tr>
-          <tr>
-            <td valign="top"><label for="usecaseFreeworld">Join and support the global network 'freeworld', search the web with an uncensored user-owned search network</label></td>
-            <td valign="top"><label for="usecasePortal">Your YaCy installation behaves independently from other peers and you define your own web index by starting your own web crawl. This can be used to search your own web pages or to define a topic-oriented search portal.</label></td>
-            <td valign="top"><label for="usecaseIntranet">Create a search portal for your intranet or web pages or your (shared) file system. URLs may be used with http/https/ftp and a local domain name or IP, or with an URL of the form file:///&lt;path&gt; or smb://&lt;server&gt;/&lt;path&gt;<br/>            
-            </td>
-          </tr>
+          <table class="usecase-options" border="0">
+            <tr>
+              <td class="usecase-option">
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="freeworld" id="usecaseFreeworld" #(freeworldChecked)#::checked="checked"#(/freeworldChecked)# /> <label for="usecaseFreeworld">Community-based web search</label></div>
+                <label class="usecase-option-image" for="usecaseFreeworld"><img src="env/grafics/usecase_freeworld.png" width="374" height="350" alt="Usecase Freeworld" /></label>
+                <label class="usecase-option-description" for="usecaseFreeworld">Join and support the global network 'freeworld', search the web with an uncensored user-owned search network</label>
+              </td>
+              <td class="usecase-option">
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="portal" id="usecasePortal" #(portalChecked)#::checked="checked"#(/portalChecked)# /> <label for="usecasePortal">Search portal for your own web pages</label></div>
+                <label class="usecase-option-image" for="usecasePortal"><img src="env/grafics/usecase_webportal.png" width="374" height="350" alt="Usecase Portal" /></label>
+                <label class="usecase-option-description" for="usecasePortal">Your YaCy installation behaves independently from other peers and you define your own web index by starting your own web crawl. This can be used to search your own web pages or to define a topic-oriented search portal.</label>
+              </td>
+              <td class="usecase-option">
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="intranet" id="usecaseIntranet" #(intranetChecked)#::checked="checked"#(/intranetChecked)# /> <label for="usecaseIntranet">Intranet Indexing</label></div>
+                <label class="usecase-option-image" for="usecaseIntranet"><img src="env/grafics/usecase_intranet.png" width="374" height="350" alt="Usecase Intranet" /></label>
+                <label class="usecase-option-description" for="usecaseIntranet">Create a search portal for your intranet or web pages or your (shared) file system. URLs may be used with http/https/ftp and a local domain name or IP, or with an URL of the form file:///&lt;path&gt; or smb://&lt;server&gt;/&lt;path&gt;</label>
+              </td>
+            </tr>
           </table>
           </fieldset>
         </li>
diff --git a/htroot/env/base.css b/htroot/env/base.css
index fcc73311a..b618d9ab2 100644
--- a/htroot/env/base.css
+++ b/htroot/env/base.css
@@ -76,7 +76,7 @@ dl {
 }
 
 body, table, textarea {
-  font-size: 12px;
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smooth: always;
@@ -595,7 +595,7 @@ a.MenuItemLink {
   margin-top:1px;
   margin-bottom:1px;
   padding:4px 10px 3px 18px;
-  font-size:1.1em;
+  font-size:14px;
 }
 
 a.MenuItemLink.lock {
diff --git a/htroot/env/grafics/usecase_freeworld.png b/htroot/env/grafics/usecase_freeworld.png
index 622a666e7..b41fa7694 100644
--- a/htroot/env/grafics/usecase_freeworld.png
+++ b/htroot/env/grafics/usecase_freeworld.png
diff --git a/htroot/env/grafics/usecase_intranet.png b/htroot/env/grafics/usecase_intranet.png
index 6423150a9..d3e04dbd4 100644
--- a/htroot/env/grafics/usecase_intranet.png
+++ b/htroot/env/grafics/usecase_intranet.png
diff --git a/htroot/env/grafics/usecase_webportal.png b/htroot/env/grafics/usecase_webportal.png
index dbdb62a3d..90bd1d4cf 100644
--- a/htroot/env/grafics/usecase_webportal.png
+++ b/htroot/env/grafics/usecase_webportal.png
diff --git a/skins/pdblue.css b/skins/pdblue.css
index b9791b5cc..d002e1297 100644
--- a/skins/pdblue.css
+++ b/skins/pdblue.css
@@ -206,7 +206,7 @@ form.search.small h2 {
 }
 
 .searchresults h4 a {
-  font-size:1.3em;
+  font-size:1.2em;
   font-weight:normal;
   color:#2840A8;
   text-decoration: none;