Surface lock icon explanations in the DevTools Security panel.

Source/devtools/front_end/security/securityPanel.css

Index: Source/devtools/front_end/security/securityPanel.css
diff --git a/Source/devtools/front_end/security/securityPanel.css b/Source/devtools/front_end/security/securityPanel.css
index 3742ebf3145804b05fdb4fe94daf8016931a0bf1..335d7685435897b0a31fb7142b8d87bc98d56159 100644
--- a/Source/devtools/front_end/security/securityPanel.css
+++ b/Source/devtools/front_end/security/securityPanel.css
@@ -14,6 +14,11 @@
     vertical-align: middle;
 }
 
+.security.panel .security-state {
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
 .security.panel .lock-icon {
     width: 16px;
     height: 16px;
@@ -63,3 +68,23 @@
         background-image: url(Images/securityStateSecure_2x.png);
     }
 }
+
+.security.panel .security-explanation {
+    margin: 16px 0px;
+}
+
+.security.panel .security-explanation .lock-icon {
+    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;
+}