Style seperated and pomenNum in podpomen

view.xsl

@@ -2,13 +2,18 @@
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output method="html"/>
     
+    <!-- ********************************
+         Javascript logic goes here
+         Please dont polute xslt with it
+         ******************************** -->
+         
     <xsl:variable name="global_script">
     <script type='text/javascript'>
         var more_txt = "▼ more";
         var less_txt = "▲ less";
         $(document).ready(function() {
             $(".morelessbutton").click(function() {
-                var examples_div = $(this).parent().parent().find('.hidden').first();
+                var examples_div = $(this).parent().parent().find('.hideable').first();
                 console.log(examples_div.is(":visible"));
                 if(examples_div.is(":hidden")) {
                     $(this).text(less_txt);
@@ -21,14 +26,40 @@
     </script>
     </xsl:variable>
     
-    <xsl:variable name="button">
+    <!-- ********************************
-        
+         Here go css styles
+         Please dont polute xslt with it
+         ******************************** -->
+         
+    <xsl:variable name="global_style">
+    <style>
+        xslt-clanek {
+            font-family: Verdana, sans-serif; 
+            font-size: 1rem; 
+            line-height: 1.5em;
+        }
+        xslt-iztocnica {
+            font-size: 1.15em; 
+            color: #cc3366; 
+            font-weight: bold;
+        }
+        xslt-besedna-vrsta {
+            color: #666666; 
+            font-style: italic;
+        }
+    </style>
     </xsl:variable>    
-        
+    
+    <!-- ********************************
+        Here are all of xslt rules
+        Please dont polute xslt with it
+        ******************************** -->
     
     <xsl:template match="clanek">
         <xsl:copy-of select="$global_script" />
-        <div style="font-family: Verdana, sans-serif; font-size: 1rem; line-height: 1.5em;">
+        <xsl:copy-of select="$global_style" />
+        
+        <div class="xslt-clanek">
             <xsl:apply-templates/>
         </div>
     </xsl:template>
@@ -41,7 +72,7 @@
 
     <xsl:template match="iztocnica">
         <xsl:text xml:space="preserve"> </xsl:text>
-        <span style="font-size: 1.15em; color: #cc3366; font-weight: bold;">
+        <span class="xslt-iztocnica">
             <xsl:apply-templates/>
         </span>
         <xsl:text xml:space="preserve"> </xsl:text>
@@ -49,7 +80,7 @@
 
     <xsl:template match="besedna_vrsta">
         <xsl:text xml:space="preserve"> </xsl:text>
-        <span style="color: #666666; font-style: italic;">
+        <span class="xslt-besedna-vrsta">
             <xsl:apply-templates/>
         </span>
         <xsl:text xml:space="preserve"> </xsl:text>
@@ -84,7 +115,7 @@
                         <div style="padding: 0.5em 0;">
                             <a class="morelessbutton"  href="javascript:void(null)">▼ more</a>
                         </div>
-                        <div class="hidden" style="display: none">
+                        <div class="hideable" style="display: none">
                             <xsl:apply-templates select="skladenjske_skupine | skladenjske_zveze | stalne_zveze | frazeoloske_zveze"/>
                         </div>
                     </xsl:when>
@@ -110,7 +141,12 @@
     </xsl:template>
 
     <xsl:template match="podpomen">
+        <xsl:variable name="pomenNum">
+            <xsl:number count="pomen" level="any"/>
+        </xsl:variable>
+    
         <div style="margin-bottom: 0.5em;">
+            <xsl:value-of select="$pomenNum"/>.<xsl:number/>
             <xsl:apply-templates/>
         </div>
     </xsl:template>