ui: Fix top margin for content containers

Currently, when a message is shown at the top or in users and groups page, The
top margin is too short. Increase it to 25px from 5px. Also:

- Don't use the .thumbnail class for containers as this does not match the
  semantics. Create and use class .contain-container.

- Also create class .card-container for all container containing cards. Unused
  for now.

- Indentation fixes.

- Remove duplicated rule.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>

plinth/modules/help/templates/help_index.html

@@ -22,8 +22,8 @@
 {% load firstboot_extras %}
 {% load static %}
 
-{% block content %}
+{% block content-container %}
-<div id="container-wrapper" class="container thumbnail">
+  <div class="container content-container">
     <h2>{% trans "Help" %}</h2>
 
     <p>

plinth/templates/base.html

@@ -219,7 +219,7 @@
   </div>
 
   {% block container %}
-    <div id="container-wrapper" class="container thumbnail">
+    <div class="container content-container">
         {% block content_row %}
             {% block subsubmenu %}
               {% if subsubmenu %}

plinth/templates/cards.html

@@ -30,7 +30,7 @@
     </div>
   </div>
 
-  <div class="container-fluid">
+  <div class="container-fluid card-container">
     <div class="row">
       <div class="card-list">
 
@@ -54,12 +54,7 @@
     </div>
   </div>
 
-  <div id="container-wrapper" class="container">
+  {% block content-container %}
-
-        {% block content %}
-        {# main content goes here #}
   {% endblock %}
 
-  </div>
-
 {% endblock %}

plinth/templates/index.html

@@ -71,7 +71,7 @@
   </div>
 
   {% if shortcuts %}
-    <div id="container-wrapper" class="container-fluid">
+    <div class="container-fluid card-container">
       <div class="row">
         <div class="card-list">
           {% for shortcut in shortcuts %}

plinth/templates/service-subsubmenu.html

@@ -24,7 +24,7 @@
 {% load static %}
 
 {% block container %}
-  <div id="container-wrapper" class="container thumbnail">
+  <div class="container content-container">
     {% block content_row %}
 
       {% include 'messages.html' %}

static/themes/default/css/plinth.css

@@ -176,8 +176,11 @@ html {
   max-width: 1000px;
 }
 
-.container.thumbnail {
+.content-container {
-    padding: 5px 50px 50px;
+    padding: 25px 50px 50px;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
 }
 
 footer {
@@ -371,10 +374,6 @@ a.menu_link_active {
     font-size: 80px;
 }
 
-.container.thumbnail {
-  padding: 5px 50px 50px;
-}
-
 /* Button table - Tables with a list of actions as buttons on top */
 .button-table > .button-row + .table {
     margin-top: 10px;