added CSS test / demo

git-svn-id: http://erlydtl.googlecode.com/svn/trunk@19 a5195066-8e3e-0410-a82a-05b01b1b9875

demo/out/test_tags.css

@@ -0,0 +1,220 @@
+#foo {
+    width: 10px;
+}
+
+
+ /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
+
+.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
+	position:relative;
+	border:0;
+	margin:0;
+	padding:0;
+	width:100%;
+	height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
+	height:600px;
+	min-width:560px;
+	z-index: 10;
+}
+
+/* suppress our whole menu when not an interactive mode (when printing, etc.) */
+@media print, projection { .menuminwidth0 { display:none; } }
+
+* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
+	position:relative;  /* we can simulate a minimum width by creating a large */
+	float:left;          /* border in this first div, then placing our content */
+	height: 1px;          /* into a second nested div (see 2nd nested div next */
+	border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
+}
+
+* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
+	position:relative;
+	margin-left:-560px;
+	height: 1px;
+}
+
+#yah {                                    /* the "You are here" label graphic */
+	position:absolute;
+	top:5px;
+	right:99px;
+	width:87px;
+	height:9px;
+}
+
+ /*========================= TOP OF THE MENU CASCADE =========================*/
+
+.menu {
+	position:relative;        /* establish a menu-relative positioning context */
+	float:left;                                     /* play nicely with others */
+	margin:0;
+	padding:0;
+	border:0;
+	height:18px;                                  /* the menu's overall height */
+	width:100%;         /* we always want our menu to fill the available space */
+	background:#f3f3f3;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size:12px;         /* this (and also below) sets the menu's font size */
+	border-bottom:1px solid black;        /* give us a black border underneath */
+}
+
+.menu img {
+	vertical-align: top;      /* prevent images from being pushed down by text */
+}
+
+.menu ul {
+	padding:0;
+	margin:0;
+	border:0;
+	list-style-type:none;          /* we don't want to view the list as a list */
+	line-height:1.5em;           /* globally set the menu's item spacing. note */
+}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
+
+.menu li {
+	float:left;    /* this creates the side-by-side array of top-level buttons */
+	position:relative;    /* create local positioning contexts for each button */
+	margin:0;
+}
+
+.menu ul li table {
+	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
+	margin:0;               /* re-zero the table margins for everyone but IE5 */
+	border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
+	font-size:12px;        /* this sets the base font size for our entire menu */
+}
+
+.drop {
+	display:block;
+	padding:0px 0.33em;	       /* this sets the l/r margins for our menu item */
+	margin:0;
+	text-align:right;   /* this right alignment goes with the float:left below */
+	cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
+	cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
+}
+
+.drop span {        /* this simultaneously left and right aligns the text and */
+	float:left;       /* the >> in the drop-down menus which link to sub-menus */
+}
+
+.rightmenu {
+	position:relative;  /* establish a local positioning context for YAH label */
+	float:right;                  /* and right-align it at the top of our page */
+}
+
+#research {            /* this rightmost "Research" button must be positioned */
+	position:absolute;       /* absolutely so that the YAH (you are here) text */
+	top:0px;               /* label will slide underneath it under Opera v8.54 */
+	left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
+}
+
+/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li ul {
+	display:none;                  /* initially hide the entire list hierarchy */
+	padding:1px;                               /* this is our box border width */
+}
+
+.menu ul li a,
+.menu ul li a:visited {                    /* unselected top-level menu items */
+	display:block;
+	float:left;
+	text-decoration:none;
+	height:18px;
+}
+
+.menu ul li:hover a,
+.menu ul li a:hover {                        /* selected top-level menu items */
+	border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
+	height:16px;
+}
+
+/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul,
+.menu ul li a:hover ul {                           /* 2nd level drop-down box */
+	display:block;
+	position:absolute;
+	margin:0;
+	top:18px;              /* place us just up underneath the top-level images */
+	left:-1px;       /* left-align our drop-down to the previous button border */
+	height:auto;      /* the drop-down height will be determiend by line count */
+	width:13.5em;
+	color:black;                        /* this sets the unselected-text color */
+	background:black;         /* this sets our menu's effective "border" color */
+}
+
+.menu ul li:hover ul.leftbutton,
+.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
+	left:0px;
+}
+
+.menu ul li:hover ul.skinny,
+.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
+	width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
+}
+
+.menu ul.rightmenu li:hover ul,
+.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
+	left:auto;
+	right:0;         /* nudge the right menu right to line up under the border */
+}
+
+* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
+	right:-1px;
+}
+
+.menu ul li:hover ul li a,
+.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
+	border:0;
+	margin:0;
+	padding:0;
+	height:auto;
+	color:#000;               /* this sets the unselected drop-down text color */
+	background:#d8d8d8;       /* this sets the drop-down menu background color */
+	width:13.5em;
+}
+
+.menu ul li:hover ul li:hover a,
+.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
+	color:black;
+	background:white;
+}
+
+.menu ul li:hover ul.skinny li a,
+.menu ul li a:hover ul.skinny li a,
+.menu ul li:hover ul.skinny li a:hover,
+.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
+	width:8.08333em;
+}
+
+/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul li ul,
+.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
+	visibility:hidden;
+}
+     
+.menu ul li:hover ul li:hover ul,
+.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
+	visibility:visible;
+	position:absolute;
+	margin-top:-1px;	      /* bring the top edge of the 3rd level menu up one */
+	top:0;
+	left:8.08333em;
+	width:14em;
+}
+
+.menu ul li:hover ul li:hover ul li a,
+.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
+	width:14em;
+	background:#d8d8d8;
+}
+
+.menu ul li:hover ul li:hover ul li a:hover,
+.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
+	width:14em;
+	background:white;
+}
+
+#text {           /* the Mac's standard Safari browser will not see this code */
+	height:1.215em;#           /* ...  but every other browser will and should */
+} /* Safari barfs on the illegal pound sign (#) after the rule's property val */

demo/out/test_tags.html

@@ -1,33 +1,220 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Test variable</title>								 
-  </head>
-  <body>
-	before
-	
-<object id="myvideo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
-	<param name="movie" value="/static/mediaplayer.swf">
-    <param name="allowfullscreen" value="true">
-    <param name="menu" value="false">
-    <param name="flashvars" value="file=/static/myvideo.mp4&image=/static/mypreview.jpg">
-    <!--[if !IE]>-->
-    <object type="application/x-shockwave-flash" data="/static/mediaplayer.swf" width="800" height="620">
-    <param name="allowfullscreen" value="true">
-    <param name="menu" value="false">
-    <param name="flashvars" value="file=/static/myvideo.mp4&image=/static/mypreview.jpg">
-    <!--<![endif]-->
-    <h2>To view the Video:</h2>
-    <p>
-    	<a href="http://www.adobe.com/go/getflashplayer">
-        	<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"alt="Get Adobe Flash player">
-    	</a>
-    </p>
-    <!--[if !IE]>-->
-    </object>
-    <!--<![endif]-->
-</object>
-	after
-  </body>
-</html>
+#foo {
+    width: 10px;
+}
+
+
+ /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
+
+.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
+	position:relative;
+	border:0;
+	margin:0;
+	padding:0;
+	width:100%;
+	height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
+	height:600px;
+	min-width:560px;
+	z-index: 10;
+}
+
+/* suppress our whole menu when not an interactive mode (when printing, etc.) */
+@media print, projection { .menuminwidth0 { display:none; } }
+
+* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
+	position:relative;  /* we can simulate a minimum width by creating a large */
+	float:left;          /* border in this first div, then placing our content */
+	height: 1px;          /* into a second nested div (see 2nd nested div next */
+	border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
+}
+
+* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
+	position:relative;
+	margin-left:-560px;
+	height: 1px;
+}
+
+#yah {                                    /* the "You are here" label graphic */
+	position:absolute;
+	top:5px;
+	right:99px;
+	width:87px;
+	height:9px;
+}
+
+ /*========================= TOP OF THE MENU CASCADE =========================*/
+
+.menu {
+	position:relative;        /* establish a menu-relative positioning context */
+	float:left;                                     /* play nicely with others */
+	margin:0;
+	padding:0;
+	border:0;
+	height:18px;                                  /* the menu's overall height */
+	width:100%;         /* we always want our menu to fill the available space */
+	background:#f3f3f3;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size:12px;         /* this (and also below) sets the menu's font size */
+	border-bottom:1px solid black;        /* give us a black border underneath */
+}
+
+.menu img {
+	vertical-align: top;      /* prevent images from being pushed down by text */
+}
+
+.menu ul {
+	padding:0;
+	margin:0;
+	border:0;
+	list-style-type:none;          /* we don't want to view the list as a list */
+	line-height:1.5em;           /* globally set the menu's item spacing. note */
+}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
+
+.menu li {
+	float:left;    /* this creates the side-by-side array of top-level buttons */
+	position:relative;    /* create local positioning contexts for each button */
+	margin:0;
+}
+
+.menu ul li table {
+	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
+	margin:0;               /* re-zero the table margins for everyone but IE5 */
+	border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
+	font-size:12px;        /* this sets the base font size for our entire menu */
+}
+
+.drop {
+	display:block;
+	padding:0px 0.33em;	       /* this sets the l/r margins for our menu item */
+	margin:0;
+	text-align:right;   /* this right alignment goes with the float:left below */
+	cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
+	cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
+}
+
+.drop span {        /* this simultaneously left and right aligns the text and */
+	float:left;       /* the >> in the drop-down menus which link to sub-menus */
+}
+
+.rightmenu {
+	position:relative;  /* establish a local positioning context for YAH label */
+	float:right;                  /* and right-align it at the top of our page */
+}
+
+#research {            /* this rightmost "Research" button must be positioned */
+	position:absolute;       /* absolutely so that the YAH (you are here) text */
+	top:0px;               /* label will slide underneath it under Opera v8.54 */
+	left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
+}
+
+/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li ul {
+	display:none;                  /* initially hide the entire list hierarchy */
+	padding:1px;                               /* this is our box border width */
+}
+
+.menu ul li a,
+.menu ul li a:visited {                    /* unselected top-level menu items */
+	display:block;
+	float:left;
+	text-decoration:none;
+	height:18px;
+}
+
+.menu ul li:hover a,
+.menu ul li a:hover {                        /* selected top-level menu items */
+	border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
+	height:16px;
+}
+
+/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul,
+.menu ul li a:hover ul {                           /* 2nd level drop-down box */
+	display:block;
+	position:absolute;
+	margin:0;
+	top:18px;              /* place us just up underneath the top-level images */
+	left:-1px;       /* left-align our drop-down to the previous button border */
+	height:auto;      /* the drop-down height will be determiend by line count */
+	width:13.5em;
+	color:black;                        /* this sets the unselected-text color */
+	background:black;         /* this sets our menu's effective "border" color */
+}
+
+.menu ul li:hover ul.leftbutton,
+.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
+	left:0px;
+}
+
+.menu ul li:hover ul.skinny,
+.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
+	width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
+}
+
+.menu ul.rightmenu li:hover ul,
+.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
+	left:auto;
+	right:0;         /* nudge the right menu right to line up under the border */
+}
+
+* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
+	right:-1px;
+}
+
+.menu ul li:hover ul li a,
+.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
+	border:0;
+	margin:0;
+	padding:0;
+	height:auto;
+	color:#000;               /* this sets the unselected drop-down text color */
+	background:#d8d8d8;       /* this sets the drop-down menu background color */
+	width:13.5em;
+}
+
+.menu ul li:hover ul li:hover a,
+.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
+	color:black;
+	background:white;
+}
+
+.menu ul li:hover ul.skinny li a,
+.menu ul li a:hover ul.skinny li a,
+.menu ul li:hover ul.skinny li a:hover,
+.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
+	width:8.08333em;
+}
+
+/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul li ul,
+.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
+	visibility:hidden;
+}
+     
+.menu ul li:hover ul li:hover ul,
+.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
+	visibility:visible;
+	position:absolute;
+	margin-top:-1px;	      /* bring the top edge of the 3rd level menu up one */
+	top:0;
+	left:8.08333em;
+	width:14em;
+}
+
+.menu ul li:hover ul li:hover ul li a,
+.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
+	width:14em;
+	background:#d8d8d8;
+}
+
+.menu ul li:hover ul li:hover ul li a:hover,
+.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
+	width:14em;
+	background:white;
+}
+
+#text {           /* the Mac's standard Safari browser will not see this code */
+	height:1.215em;#           /* ...  but every other browser will and should */
+} /* Safari barfs on the illegal pound sign (#) after the rule's property val */

demo/templates/test_tags.css

@@ -0,0 +1,5 @@
+#foo {
+    width: 10px;
+}
+
+{% menu %}

priv/tags/menu.css

@@ -0,0 +1,219 @@
+{# Pure CSS menu
+                                              
+   menu() 
+#}
+ /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
+
+.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
+	position:relative;
+	border:0;
+	margin:0;
+	padding:0;
+	width:100%;
+	height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
+	height:600px;
+	min-width:560px;
+	z-index: 10;
+}
+
+/* suppress our whole menu when not an interactive mode (when printing, etc.) */
+@media print, projection { .menuminwidth0 { display:none; } }
+
+* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
+	position:relative;  /* we can simulate a minimum width by creating a large */
+	float:left;          /* border in this first div, then placing our content */
+	height: 1px;          /* into a second nested div (see 2nd nested div next */
+	border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
+}
+
+* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
+	position:relative;
+	margin-left:-560px;
+	height: 1px;
+}
+
+#yah {                                    /* the "You are here" label graphic */
+	position:absolute;
+	top:5px;
+	right:99px;
+	width:87px;
+	height:9px;
+}
+
+ /*========================= TOP OF THE MENU CASCADE =========================*/
+
+.menu {
+	position:relative;        /* establish a menu-relative positioning context */
+	float:left;                                     /* play nicely with others */
+	margin:0;
+	padding:0;
+	border:0;
+	height:18px;                                  /* the menu's overall height */
+	width:100%;         /* we always want our menu to fill the available space */
+	background:#f3f3f3;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size:12px;         /* this (and also below) sets the menu's font size */
+	border-bottom:1px solid black;        /* give us a black border underneath */
+}
+
+.menu img {
+	vertical-align: top;      /* prevent images from being pushed down by text */
+}
+
+.menu ul {
+	padding:0;
+	margin:0;
+	border:0;
+	list-style-type:none;          /* we don't want to view the list as a list */
+	line-height:1.5em;           /* globally set the menu's item spacing. note */
+}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
+
+.menu li {
+	float:left;    /* this creates the side-by-side array of top-level buttons */
+	position:relative;    /* create local positioning contexts for each button */
+	margin:0;
+}
+
+.menu ul li table {
+	margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
+	margin:0;               /* re-zero the table margins for everyone but IE5 */
+	border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
+	font-size:12px;        /* this sets the base font size for our entire menu */
+}
+
+.drop {
+	display:block;
+	padding:0px 0.33em;	       /* this sets the l/r margins for our menu item */
+	margin:0;
+	text-align:right;   /* this right alignment goes with the float:left below */
+	cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
+	cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
+}
+
+.drop span {        /* this simultaneously left and right aligns the text and */
+	float:left;       /* the >> in the drop-down menus which link to sub-menus */
+}
+
+.rightmenu {
+	position:relative;  /* establish a local positioning context for YAH label */
+	float:right;                  /* and right-align it at the top of our page */
+}
+
+#research {            /* this rightmost "Research" button must be positioned */
+	position:absolute;       /* absolutely so that the YAH (you are here) text */
+	top:0px;               /* label will slide underneath it under Opera v8.54 */
+	left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
+}
+
+/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li ul {
+	display:none;                  /* initially hide the entire list hierarchy */
+	padding:1px;                               /* this is our box border width */
+}
+
+.menu ul li a,
+.menu ul li a:visited {                    /* unselected top-level menu items */
+	display:block;
+	float:left;
+	text-decoration:none;
+	height:18px;
+}
+
+.menu ul li:hover a,
+.menu ul li a:hover {                        /* selected top-level menu items */
+	border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
+	height:16px;
+}
+
+/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul,
+.menu ul li a:hover ul {                           /* 2nd level drop-down box */
+	display:block;
+	position:absolute;
+	margin:0;
+	top:18px;              /* place us just up underneath the top-level images */
+	left:-1px;       /* left-align our drop-down to the previous button border */
+	height:auto;      /* the drop-down height will be determiend by line count */
+	width:13.5em;
+	color:black;                        /* this sets the unselected-text color */
+	background:black;         /* this sets our menu's effective "border" color */
+}
+
+.menu ul li:hover ul.leftbutton,
+.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
+	left:0px;
+}
+
+.menu ul li:hover ul.skinny,
+.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
+	width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
+}
+
+.menu ul.rightmenu li:hover ul,
+.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
+	left:auto;
+	right:0;         /* nudge the right menu right to line up under the border */
+}
+
+* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
+	right:-1px;
+}
+
+.menu ul li:hover ul li a,
+.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
+	border:0;
+	margin:0;
+	padding:0;
+	height:auto;
+	color:#000;               /* this sets the unselected drop-down text color */
+	background:#d8d8d8;       /* this sets the drop-down menu background color */
+	width:13.5em;
+}
+
+.menu ul li:hover ul li:hover a,
+.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
+	color:black;
+	background:white;
+}
+
+.menu ul li:hover ul.skinny li a,
+.menu ul li a:hover ul.skinny li a,
+.menu ul li:hover ul.skinny li a:hover,
+.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
+	width:8.08333em;
+}
+
+/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
+
+.menu ul li:hover ul li ul,
+.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
+	visibility:hidden;
+}
+     
+.menu ul li:hover ul li:hover ul,
+.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
+	visibility:visible;
+	position:absolute;
+	margin-top:-1px;	      /* bring the top edge of the 3rd level menu up one */
+	top:0;
+	left:8.08333em;
+	width:14em;
+}
+
+.menu ul li:hover ul li:hover ul li a,
+.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
+	width:14em;
+	background:#d8d8d8;
+}
+
+.menu ul li:hover ul li:hover ul li a:hover,
+.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
+	width:14em;
+	background:white;
+}
+
+#text {           /* the Mac's standard Safari browser will not see this code */
+	height:1.215em;#           /* ...  but every other browser will and should */
+} /* Safari barfs on the illegal pound sign (#) after the rule's property val */

src/demo/erlydtl_demo.erl

@@ -34,7 +34,10 @@
 -author('rsaccon@gmail.com').
 
 %% API
--export([compile_templates/0, compile_test_template/1, render_html/0]).
+-export([compile_templates/0, 
+    compile_test_template/1, 
+    compile_test_template/2, 
+    render_all/0]).
 
 %%====================================================================
 %% API
@@ -47,24 +50,35 @@
 compile_templates() ->
     DocRoot = filename:join([filename:dirname(code:which(?MODULE)),"..", "demo", "templates"]),
     filelib:fold_files(DocRoot,
-        "\.html$",
+        "\.html$|\.css$",
         true,
         fun(Path, _Acc) ->
             Name = filename:rootname(filename:basename(Path)),
             erlydtl_server:compile(Path, Name, DocRoot)
         end,
         []).
- 
+
+
 %%--------------------------------------------------------------------
 %% @spec (string()) -> any()
 %% @doc 
 %% compiles the template to beam files
 %% @end 
-%%--------------------------------------------------------------------       
+%%--------------------------------------------------------------------        
 compile_test_template(Name) ->
+     compile_test_template(Name, ".html").
+      
+      
+%%--------------------------------------------------------------------
+%% @spec (string(), string()) -> any()
+%% @doc 
+%% compiles the template to beam files
+%% @end 
+%%--------------------------------------------------------------------       
+compile_test_template(Name, Ext) ->
     DocRoot = filename:join([filename:dirname(code:which(?MODULE)),"..", "demo", "templates"]),
     Name2 = "test_" ++ Name,
-    Path = filename:join([DocRoot, Name2 ++ ".html"]),
+    Path = filename:join([DocRoot, Name2 ++ Ext]),
     erlydtl_server:compile(Path, Name2, DocRoot).
 
                        
@@ -73,12 +87,13 @@ compile_test_template(Name) ->
 %% @doc renders the templete to a file
 %% @end 
 %%--------------------------------------------------------------------
-render_html() ->
+render_all() ->
     OutDir = filename:join([filename:dirname(code:which(?MODULE)),"..", "demo", "out"]),
     render(OutDir, test_variable, ".html", ["foostring"]),
     render(OutDir, test_extend, ".html", ["bar1string", "bar2string"]),
     render(OutDir, test_comment, ".html"),
-    render(OutDir, test_tags, ".html").
+    render(OutDir, test_tags, ".html"),
+    render(OutDir, test_tags, ".css").
 
               
 %%====================================================================