Moved CSS into separate file

components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.type-view/public/css/styles.css

@@ -0,0 +1,61 @@
+/*
+ *  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.circle {
+    background: none repeat scroll 0 0 #191919;
+    border-radius: 50px;
+    height: 50px;
+    padding: 10px;
+    width: 50px;
+    color: #fff;
+}
+.padding-top-double {
+    padding-top: 20px;
+}
+.padding-double {
+    padding: 20px;
+}
+.grey {
+    color: #333;
+}
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #7f7f7f;
+    margin: 1em 0;
+    padding: 0;
+    opacity: 0.2;
+}
+.light-grey {
+    color: #7c7c7c;
+}
+.uppercase {
+    text-transform: uppercase;
+}
+.grey-bg {
+    background-color: #f6f4f4;
+}
+
+.doc-link {
+    background: #11375B;
+    padding: 20px;
+    color: white;
+    margin-top: 0;
+}
+
+.doc-link a {
+    color: white;
+}

components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.type-view/type-view.hbs

@@ -24,28 +24,26 @@
 </div>
 
 <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
-    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Windows"
-                                  target="_blank">[ here ]</a> for latest instructions and troubleshooting.</h4>
+    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Windows" target="_blank">[ here ]</a> for
+                         latest instructions and troubleshooting.</h4>
 </div>
 
 <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
 
     <h3 class="uppercase">What it Does</h3>
-    <hr>
+    <hr />
     <p class="grey margin-top">Connect and manage your Windows device with WSO2 IoT Server.</p>
     <br>
 
     <h3 class="uppercase">What You Need</h3>
     <hr>
     <ul class="list-unstyled">
-        <li class="padding-top-double"><span class="circle">STEP 01</span>&nbsp;&nbsp;&nbsp;Windows
-                                                                          Mobile.
-        </li>
-        <li class="padding-top-double"><span class="circle">STEP 02</span>&nbsp;&nbsp;&nbsp;Go ahead
-                                                                          and click [Enroll Device].
+        <li class="padding-top-double"><span class="circle">STEP 01</span>&nbsp;&nbsp;&nbsp;Windows Mobile.</li>
+        <li class="padding-top-double"><span class="circle">STEP 02</span>&nbsp;&nbsp;&nbsp;Go ahead and click [Enroll
+                                                                          Device].
         </li>
-        <li class="padding-top-double"><span class="circle">STEP 03</span>&nbsp;&nbsp;&nbsp;Proceed
-                                                                          to [Prepare] section.
+        <li class="padding-top-double"><span class="circle">STEP 03</span>&nbsp;&nbsp;&nbsp;Proceed to [Prepare]
+                                                                          section.
         </li>
     </ul>
     <br>
@@ -61,11 +59,8 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double"><span class="circle">01</span> Scan QR code.</li>
-        <li class="padding-top-double"><span class="circle">02</span> Follow instructions in wizard.
-        </li>
-        <li class="padding-top-double"><span class="circle">03</span> Configure your workspace
-                                                                      account
-        </li>
+        <li class="padding-top-double"><span class="circle">02</span> Follow instructions in wizard.</li>
+        <li class="padding-top-double"><span class="circle">03</span> Configure your workspace account</li>
     </ul>
     <br>
 
@@ -100,60 +95,8 @@
     </div>
 </div>
 
-{{#zone "topCss"}}
-    <style type="text/css">
-        .circle {
-            background: none repeat scroll 0 0 #191919;
-            border-radius: 50px;
-            height: 50px;
-            padding: 10px;
-            width: 50px;
-            color: #fff;
-        }
-        .padding-top-double {
-            padding-top: 20px;
-        }
-        .padding-double {
-            padding: 20px;
-        }
-        .grey {
-            color: #333;
-        }
-        hr {
-            display: block;
-            height: 1px;
-            border: 0;
-            border-top: 1px solid #7f7f7f;
-            margin: 1em 0;
-            padding: 0;
-            opacity: 0.2;
-        }
-        .light-grey {
-            color: #7c7c7c;
-        }
-        .uppercase {
-            text-transform: uppercase;
-        }
-        .grey-bg {
-            background-color: #f6f4f4;
-        }
-
-        .doc-link {
-            background: #11375B;
-            padding: 20px;
-            color: white;
-            margin-top: 0;
-        }
-
-        .doc-link a {
-            color: white;
-        }
-    </style>
-{{/zone}}
-
 {{#zone "bottomJs"}}
     <script type="text/javascript">
-
         $(".download-link").click(function () {
             toggleEnrollment();
         });
@@ -163,6 +106,9 @@
             generateQRCode(".modalpopup-content .qr-code");
             showPopup();
         }
-
     </script>
 {{/zone}}
+
+{{#zone "topCss"}}
+    {{css "css/styles.css"}}
+{{/zone}}