title: Vertical align text with icon with shaded box and corner on top only
body: <p>I've a button already created and this is how HTML appear as below:</p>
  
  <pre><code>&lt;div class="blue_text"&gt;&lt;button class="blue_small" id="blue_small"&gt;&lt;/button&gt; View this video instead.&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS as below.</strong> The text to align vertically without changing the existing markup:</p>
  
  <pre><code>#blue_text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
  </code></pre>
  
  <p>Used this to vertical align the button without changing the existing mark up.</p>
  
  <pre><code>​button {
  vertical-align:middle;
  }
  </code></pre>
  
  <p>The button CSS in total:</p>
  
  <pre><code>.blue_small {
   height: 40px;
  width: 40px;
  margin-left:16px;
  margin-bottom:1px;
  background-color:#fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #fff;
  background:url(../images/index_video_small2.svg) no-repeat 5px 7px;
  -webkit-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);  
  -moz-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
  box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
  color:#48c4d2; font-size:15px;
      font-family:opensansitalic;}
  </code></pre>
  
  <p>I'd like to combine all of the above into CSS as below with cyan colour shading box? I've never tried this. </p>
  
  <p><a href="http://www.kerrydeaf.com/shade2.png" rel="nofollow noreferrer" title="tooltip">align top http://www.kerrydeaf.com/shade2.png</a></p>
  
  <p>UPDATE: I have this &lt; div >&lt; /div > at the bottom of another container but there is gap visible  and tried to close the gap without success? I'm using a current &lt; div >&lt; /div > as below.</p>
  
  <pre><code>&lt;div class="blue_text"&gt;&lt;button class="blue_small" id="blue_small"&gt;&lt;/button&gt; View this video instead.&lt;/div&gt;
  </code></pre>
  
  <p>This is a gap visible as below:</p>
  
  <p><a href="http://www.kerrydeaf.com/shade4.png" rel="nofollow noreferrer" title="tooltip">align top http://www.kerrydeaf.com/shade4.png</a></p>
  
  <p>I'm hoping to use this <strong>&lt; div class="blue_text" > View this video instead.&lt; /div ></strong> to close the gap as below with margin '0'.</p>
  
  <p><a href="http://www.kerrydeaf.com/shade3.png" rel="nofollow noreferrer" title="tooltip">align top http://www.kerrydeaf.com/shade3.png</a></p>
  
  <p>UPDATE FRIDAY 2pm: Thank you it worked a treat. It went to a bottom of a browser window. I'm hoping that the blue box to close in between DIV tags for example with this DIV tag as below. This <strong>div class="toogle_wrap"</strong> is one DIV container where I've highlighted a gap to close as below. There will be at least five <strong>div class="toogle_wrap"</strong>, this is one <strong>div class="toogle_wrap"</strong> below so the gap need to close on each of them.</p>
  
  <pre><code>      &lt;div class="toogle_wrap"&gt;
      &lt;div class="trigger"&gt;&lt;a href="#"&gt;&lt;span class="trig"&gt;1.&lt;/span&gt; Deaf person's attention&lt;/a&gt;&lt;/div&gt;
      &lt;div class="toggle_container"&gt; 
      &lt;ul class="lists"&gt;
      &lt;li&gt;Learn &lt;span class="bold"&gt;how to get&lt;/span&gt; a Deaf person's attention.&lt;/li&gt;
      &lt;li&gt;Take a step-by-step process.&lt;/li&gt;
      &lt;li&gt;Approaching a Deaf and your approach may suggest your intention to communicate.&lt;/li&gt;
      &lt;li&gt;You can also &lt;span class="bold"&gt;wave&lt;/span&gt; to get eye contact or &lt;span class="bold"&gt;tap&lt;/span&gt; the person gently on the shoulder.&lt;/li&gt;
      &lt;!--&lt;li&gt;&lt;span class="bold"&gt;Watch a video instead:&lt;/span&gt; &lt;span class="typicons"&gt;Z&lt;/span&gt;  &lt;span class="typicn"&lt;h5&gt;Z&lt;/h5&gt;&lt;/span&gt; &lt;/li&gt;--&gt;
      &lt;/ul&gt;
      &lt;div class="blue_text"&gt;&lt;button class="blue_small" id="blue_small"&gt;&lt;/button&gt; Available in video.&lt;/div&gt;
              &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; The gap is here to close here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.
              &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; The gap is here to close here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.
              &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; The gap is here to close here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.
              &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; The gap is here to close here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.
              &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; The gap is here to close here &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE Friday 10pm. Here is the example of DIV. Which DIV is <strong>position: relative</strong> should go in?</p>
  
  <p><a href="http://www.kerrydeaf.com/div.png" rel="nofollow noreferrer" title="tooltip">align top http://www.kerrydeaf.com/div.png</a></p>