ref-manual, mega-manual: Adjustments to variable context images

Fixes [YOCTO #5601]

Discovered that the solution I had to display a small PNG file
to indicate the context a variable is used in the build system
was not displaying properly in the ref-manual variable glossary
when using the Chrome browser.  The solution was to adjust some
settings in the CSS file and place the image after the term.
This allowed me to dump the webkit stuff that I had inserted
into the CSS file styles to make it work in Mozilla, which
ended up not working in Chrome.

Additionally, I needed to update the 'define-generic.png' file to
have less white space on top as part of the figure.  Note that
this commit adds the figure to Git for tracking as well.

(From yocto-docs rev: 59a1295aeb1c866f330634907ad28642a997cd63)

Signed-off-by: Scott Rifenbark <scott.m.rifenbark@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

documentation/ref-manual/ref-style.css

@@ -203,15 +203,6 @@ div.variablelist dl {
   font-weight: normal;
   width: 0em;
   text-align: right;
-  margin-top: 4em;
-  margin-left: .5em;
-  margin-bottom: 0em;
-    -webkit-column-count: 2; /* Chrome, Safari, Opera */
-    -moz-column-count: 2; /* Firefox */
-    column-count: 2;
-    -webkit-column-gap: 4px; /* Chrome, Safari, Opera */
-    -moz-column-gap: 4px; /* Firefox */
-    column-gap: 4px;
 }
 
 .variablelist dl dt {
@@ -222,6 +213,7 @@ div.variablelist dl {
 .variablelist dl dd {
   margin-top: -3.5em;
   margin-left: 15.5em;
+  margin-bottom: 2em;
 }
 
 .glossary dd p,
@@ -230,7 +222,6 @@ div.variablelist dl {
   margin-bottom: 1em;
 }
 
-
 div.calloutlist table td {
   padding: 0em 0em 0em 0em;
   margin: 0em 0em 0em 0em;