Surface lock icon explanations in the DevTools Security panel.

Source/devtools/front_end/security/securityPanel.css

 /* Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .security.panel {
     margin: 1em;
 }
 
 .security.panel .lock-icon,
 .security.panel .security-state {
     display: inline-block;
     margin: 0.2em;
     vertical-align: middle;
 }
 
+.security.panel .security-state {
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
 .security.panel .lock-icon {
     width: 16px;
     height: 16px;
     border-radius: 2px;
     background-size: cover;
 }
 
 .security.panel .lock-icon-unknown {
     background-image: url(Images/securityStateHttp.png);
 }
@@ skipping 29 matching lines @@
     }
 
     .security.panel .lock-icon-warning {
         background-image: url(Images/securityStateWarning_2x.png);
     }
 
     .security.panel .lock-icon-secure {
         background-image: url(Images/securityStateSecure_2x.png);
     }
 }
+
+.security.panel .security-explanation {
+    margin: 16px 0px;
+}
+.security.panel .security-explanation .lock-icon {

[dgozman, 2015/06/18 10:50:49]

Blank lines between rules.

[lgarron, 2015/06/18 18:16:18]

Done.

+    display: inline-block;
+    vertical-align: bottom;
+}
+.security.panel .security-explanation .explanation-title {
+    display: inline-block;
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-left: 4px;
+}
+.security.panel .security-explanation .explanation-text {
+    margin: 4px 0px;
+}