"Let's Fête Codification"

Lazy loading of HTML select via Ajax

noreply@blogger.com (Jay Chapani) — Wed, 17 Apr 2013 18:42:00 +0530

In the web application sometimes HTML select drop down holds large number of data which impact the performance of the webpage. Due large data page gets heavier. Work around to this problem is Lazy Loading of select drop down via Ajax.

Working Demo

Example: In the below example additional data is loaded on click of more via Ajax request.

<select id="mySelect" 
         onChange="updateOptionList(this.value,this.selectedIndex)">
    <option value="1">--1--</option>
    <option value="2">--2--</option>
    <option value="3">--3--</option>
    <option value="4">--4--</option>
    <option value="5">--5--</option>
    <option value="6">--6--</option>
    <option value="7">--7--</option>
    <option value="8">--8--</option>
    <option value="9">--9--</option>
    <option value="10">--10--</option>
    <option value="more">more</option>
</select>

JavaScript:

var data = {
    json: $.toJSON({
        array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    })
}
var elmt;
var num = 1;

function updateOptionList(value, index) {
    if (value == 'more') {
        elmt = document.getElementById("mySelect");
        elmt.remove(elmt.selectedIndex);
        /*Ajax request to load data*/
        $.ajax({
            url: "/echo/json/",
            data: data,
            type: "POST",
            success: function (response) {
                $.each(response.array, function (index, value) {
                    opt = document.createElement("option");
                    opt.value = num * 10 + value;
                    opt.innerHTML = '--' + (num * 10 + value) + '--';
                    elmt.appendChild(opt);
                });
                opt1 = document.createElement("option");
                opt1.value = 'more';
                opt1.innerHTML = 'more';
                elmt.appendChild(opt1);
                num++;
            }
        });
    }
}

ORDER BY Column not in GROUP BY

noreply@blogger.com (Jay Chapani) — Tue, 7 Aug 2012 13:20:00 +0530

Consider the following data given in the below table

Table Name: mytable

Problem: group by the table data by column1 and column2 but final out put should be ordered by column3

Answer:

SELECT column1, column2
    FROM mytbl
GROUP BY column1, column2
ORDER BY MAX (column3)

Lagrange's four-square theorem implementation code in JAVA

noreply@blogger.com (Jay Chapani) — Thu, 18 Aug 2011 14:15:00 +0530

Lagrange's four-square theorem : any natural number can be represented as the sum of four integer squares

p = a₀² + a₁² + a₂² + a₃²

where the four numbers a0, a1, a2, a3 are integers. For illustration, 3, 31 and 310 can be represented as the sum of four squares as follows:

3 = 1² + 1² + 1² + 0²
31 = 5² + 2² + 1² + 1²
310 = 17² + 4² + 2² + 1².

 int n, t1, t2, t;  
           n = 23;//Your number  
           for (int i = (int) Math.sqrt(n / 4); i * i <= n; i++) {  
                t1 = n - i * i;  
                for (int j = (int) Math.sqrt(t1 / 3); j <= i && j * j <= t1; j++) {  
                     t2 = t1 - j * j;  
                     for (int k = (int) Math.sqrt(t2 / 2); k <= j && k * k <= t2; k++) {  
                          t = (int) Math.sqrt(t2 - k * k);  
                          if (t <= k && t * t == t2 - k * k) {                                
                               System.out.println("(" + i + "^2) + (" + j + "^2) + ("+ k + "^2) + ("+ t +"^2)");  
                          }  
                     }  
                }  
           }

Prevent copy paste on input : allow only numeric values jQuery

noreply@blogger.com (Jay Chapani) — Thu, 4 Aug 2011 11:51:00 +0530

The following example won't allow values other than numeric.

From keyboard (even copy paste)
From drag drop
From mouse (copy paste)

Demo : Try demo here

 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
           <title>jQuery UI Example Page</title>  
           <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>  
           <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>  
      </head>  
      <body>  
           <input type="text" id="textBox" class="numericOnly" />  
      </body>  
      <script type="text/javascript">  
           $(function(){  
                $(".numericOnly").bind('keypress',function(e){  
                          if(e.keyCode == '9' || e.keyCode == '16'){  
                                return;  
                           }  
                           var code;  
                           if (e.keyCode) code = e.keyCode;  
                           else if (e.which) code = e.which;   
                           if(e.which == 46)  
                                return false;  
                           if (code == 8 || code == 46)  
                                return true;  
                           if (code < 48 || code > 57)  
                                return false;  
                     }  
                );  
                $(".numericOnly").bind("paste",function(e) {  
                     e.preventDefault();  
                });  
                $(".numericOnly").bind('mouseenter',function(e){  
                      var val = $(this).val();  
                      if (val!='0'){  
                           val=val.replace(/[^0-9]+/g, "")  
                           $(this).val(val);  
                      }  
                });  
           });  
      </script>  
 </html>

Override Invalid value for field [fieldName] message in Struts2

noreply@blogger.com (Jay Chapani) — Tue, 2 Aug 2011 10:11:00 +0530

The default field error message in struts 2 is Invalid field value for field "[fieldName]".

To override this message you need to create a property file with a file name pattern [ClassName].properties under the package of the Action class.

If you are getting error message like : Invalid field value for field "birthDate". You can override this by adding a line in properties file like,

invalid.fieldvalue.birthDate = Birthdate is invalid

So now your message is : "Birthdate is invalid"

Preserve TimeStamp value in Struts2

noreply@blogger.com (Jay Chapani) — Wed, 15 Jun 2011 10:23:00 +0530

Problem Definition : After page is submitted the value of TimeStamp is not preserve in page. As an additional requirement is that I want TimeStamp value in "MM/dd/yyyy hh:mm:ss a" format on my jsp pages..

File : xwork-conversion.properties

 java.sql.Timestamp = com.myApp.util.MyTimeStampConverter

Create java file i.e. Class MyTimeStampConverter

Code:

 public class MyTimeStampConverter extends  
     StrutsTypeConverter {  
   private static final SimpleDateFormat sdf =  
     new SimpleDateFormat("MM/dd/yyyy hh:mm:ss a");  
   @Override  
   public Object convertFromString(Map context,  
       String[] values, Class toClass)  
       throws TypeConversionException {  
     try {  
       if (values == null || values.length == 0) {  
         return null;  
       }  
       return new java.sql.Timestamp(sdf  
           .parse(values[0]).getTime());  
     } catch (Exception e) {  
       throw new TypeConversionException(e);  
     }  
   }  
   @Override  
   public String convertToString(Map context,  
       Object object)  
       throws TypeConversionException {  
     try {  
       if (object instanceof Timestamp) {  
         return sdf.format(  
             new Date((Timestamp) object).getTime()));  
       }  
       return "";  
     } catch (Exception e) {  
       throw new TypeConversionException(e);  
     }  
   }  
 }

How to know which application is using desired port in windows

noreply@blogger.com (Jay Chapani) — Thu, 7 Apr 2011 12:44:00 +0530

Just go to command prompt and type

netstat -o -n -a | findstr 0.0:80

output is like

TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 1656

The number at the end (1656, in this case) is a process ID.

Open Task Manager and click View -> Select Columns. Check the box next to PID (Process Identifier). You can then find the process ID returned by netstat and determine which process is using the port.

Style Preecedencr in CSS : Specificity, Inheritance and Cascade

noreply@blogger.com (Jay Chapani) — Thu, 24 Mar 2011 09:21:00 +0530

CSS rule applies to a given html element is controled by

Specificity Calculations
Inheritance
The Cascade

Specificity Calculations

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

An id is more specific than a class is more specific than an element.
It’s also important to note that 0,0,1,0 is more specific than 0,0,0,15.

Let’s look at the example

div p.bio {font-size: 14px} - (0,0,1,2)
#sidebar p {font-size: 12px} - (0,1,0,1)

The second has the higher specificity and thus takes precedence.
Importance trumps specificity, When you mark a css property with !important you’re overriding specificity rules and so

div p.bio {font-size: 14px !important}
#sidebar p {font-size: 12px}

means the first line of css above takes precedence instead of the second. !important is still mostly a hack around the basic rules and is something you should never need if you understand how the rules work.

Inheritance

Elements inherit styles from their parent container. If you set the body tag to use color: red then the text for all elements inside the body will also be red unless otherwise specified.

Not all css properties are inherited, though. For example margins and paddings are non-inherited properties. If you set a margin or padding on a div, the paragraphs inside that div do not inherit the margin and padding you set on the div. The paragraph will use the default browser margin and padding until you declare otherwise.

You can explicitly set a property to inherit styles from it’s parent container, though. For example you could declare

p {margin: inherit; padding: inherit}

and your paragraph would then inherit both from it’s containing element.

The Cascade

At the highest level the cascade is what controls all css precedence and works as follows.

Find all css declarations that apply to the element and property in question.
Sort by origin and weight. Origin refers to the source of the declaration (author styles, user styles, browser defaults) and weight refers to the importance of the declaration. (author has more weight than user which has more weight than default. !importance has more weight than normal declarations)
Calculate specificity
If two rules are equal in all of the above, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html

#3 above is likely the one you’ll need to pay attention to most.
#2 just understand that your styles will override how a user sets their browser unless they set their rules to be important.

Play with Matrix using JavaScript

noreply@blogger.com (Jay Chapani) — Wed, 9 Mar 2011 12:13:00 +0530

Demo : Play with Matrix using JavaScript

JSP Implicit Objects

noreply@blogger.com (Jay Chapani) — Fri, 4 Mar 2011 10:00:00 +0530

Implicit objects in jsp are the objects that are created by the container automatically.Since these objects are created automatically by the container and are accessed using standard variables; hence, they are called implicit objects. The implicit objects are parsed by the container and inserted into the generated servlet code. They are available only within the jspService method and not in any declaration. Implicit objects are used for different purposes. Our own methods (user defined methods) can't access them as they are local to the service method and are created at the conversion time of a jsp into a servlet. But we can pass them to our own method if we wish to use them locally in those functions.

Objebt	Class
application	javax.servlet.ServletContext
config	javax.servlet.ServletConfig
exception	java.lang.Throwable
out	javax.servlet.jsp.JspWriter
page	java.lang.Object
PageContext	javax.servlet.jsp.PageContext
request	javax.servlet.ServletRequest
response	javax.servlet.ServletResponse
session	javax.servlet.http.HttpSession

Application: These objects has an application scope. These objects are available at the widest context level, that allows to share the same information between the JSP page's servlet and any Web components with in the same application.
Config: These object has a page scope and is an instance of javax.servlet.ServletConfig class. Config object allows to pass the initialization data to a JSP page's servlet. Parameters of this objects can be set in the deployment descriptor (web.xml) inside the element . The method getInitParameter() is used to access the initialization parameters.
Exception: This object has a page scope and is an instance of java.lang.Throwable class. This object allows the exception data to be accessed only by designated JSP "error pages."
Out: This object allows us to access the servlet's output stream and has a page scope. Out object is an instance of javax.servlet.jsp.JspWriter class. It provides the output stream that enable access to the servlet's output stream.
Page: This object has a page scope and is an instance of the JSP page's servlet class that processes the current request. Page object represents the current page that is used to call the methods defined by the translated servlet class. First type cast the servlet before accessing any method of the servlet through the page.
Pagecontext: PageContext has a page scope. Pagecontext is the context for the JSP page itself that provides a single API to manage the various scoped attributes. This API is extensively used if we are implementing JSP custom tag handlers. PageContext also provides access to several page attributes like including some static or dynamic resource.
Request: Request object has a request scope that is used to access the HTTP request data, and also provides a context to associate the request-specific data. Request object implements javax.servlet.ServletRequest interface. It uses the getParameter() method to access the request parameter. The container passes this object to the _jspService() method.
Response: This object has a page scope that allows direct access to the HTTPServletResponse class object. Response object is an instance of the classes that implements the javax.servlet.ServletResponse class. Container generates to this object and passes to the _jspService() method as a parameter.
Session: Session object has a session scope that is an instance of javax.servlet.http.HttpSession class. Perhaps it is the most commonly used object to manage the state contexts. This object persist information across multiple user connection.

Database : May I help u????

noreply@blogger.com (Jay Chapani) — Thu, 3 Mar 2011 14:59:00 +0530

Select Top N records..........

Microsoft SQL Server

SELECT TOP 10 column FROM table

MySQL

SELECT column FROM table LIMIT 10

Oracle

SELECT column FROM table WHERE ROWNUM <= 10

DB2

SELECT column FROM table
FETCH FIRST 10 ROWS ONLY

IE Rendering Modes

noreply@blogger.com (Jay Chapani) — Wed, 16 Feb 2011 09:49:00 +0530

IE=5
- <meta http-equiv="X-UA-Compatible" content="IE=5" />
- This forces IE 8 to render the page in “Quirks” mode.
IE=7
- <meta http-equiv="X-UA-Compatible" content="IE=7" />
- This forces IE 8 to render the page using IE 7 Strict mode.
IE=EmulateIE7
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
IE=8
- <meta http-equiv="X-UA-Compatible" content="IE=8" />
- This forces IE 8 to display the page in Internet Explorer Standards mode.
IE=EmulateIE8
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
- This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
IE=edge
- <meta http-equiv="X-UA-Compatible" content="edge" />
- This forces Internet Explorer 8 to render in the most recent mode. For instance; currently this would behave like using a value of IE=8, but when IE 9 is available that will be the mode that IE=edge will render in.

Keyboard Tab Navigation - Menu

noreply@blogger.com (Jay Chapani) — Tue, 14 Dec 2010 13:34:00 +0530

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Keyboard Tab Navigation - Menu</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <script>

    //initialise plugins
    $(function(){

        $(".parent").focusin(function(e) {
            show(e);
        });

        function show(e){
            var dv = $($(e.target).parent()).children("div");
            $(dv).css("visibility", "visible");

            var sib = $($(e.target).parent()).siblings();
            var di = $(sib).children("div");
            walk(di);
        }

        $("a").focusin(function(e) {

            var sib = $($(e.target).parent()).siblings();
            var di = $(sib).children("div");
            walk(di);

            if($($(this).parents('ul:eq(0)')).hasClass("menu")){

                var sp = $(this).children("span");
                $(sp).css("color","#3a3a3a");
                $(sp).css("background","url(images/selected-left-sub.png) no-repeat 0 -3px");
                $(sp).css("_background-image","url(images/selected-left-sub.gif)");
                $(this).css("background","url(images/selected-right-sub.png) no-repeat right -1px");
                $(this).css("_background-image","url(images/selected-right-sub.gif)");

                var anc = $(sib).children("a");
                var spn = $(anc).children("span");

                $(spn).css("color","#FFFFFF");
                $(spn).css("background","");
                $(spn).css("_background-image","");
                $(anc).css("background","");
                $(anc).css("_background-image","");
            }
        });

        function walk(children) {
            children.each(function(){
            var child = $(this);
            if (child.children().size() > 0) {
                walk(child.children());
            }
            if(child.is("div")){
                $(this).css("visibility", "hidden")
            }
        })
        }



$("a:first").keypress(function(e) {

           if(e.shiftKey){
               var di = $($(e.target).parent()).children("div");
               walk(di);

               var anc = $($(e.target).parent()).children("a");
               var spn = $(anc).children("span");

               $(spn).css("color","#FFFFFF");
               $(spn).css("background","");
               $(spn).css("_background-image","");
               $(anc).css("background","");
               $(anc).css("_background-image","");
           }

       });

       $("a:last").keypress(function(e) {

           if(!e.shiftKey){
               var di = $($(".parent").parent()).children("div");
               walk(di);

               var anc = $(".parent");
               var spn = $(anc).children("span");

               $(spn).css("color","#FFFFFF");
               $(spn).css("background","");
               $(spn).css("_background-image","");
               $(anc).css("background","");
               $(anc).css("_background-image","");
           }

       });

    });

    </script>


<style type="text/css">
*{ margin:0;
    padding:0;
}

body { background:#171717; }
div#menu {
    margin:30px auto;
    width:80%;
}

</style>

</head>
<body>

<div id="menu">
    <ul class="menu">
        <li><a id="home" href="#" class="parent"><span>Item 1</span></a>
            <div>
            <ul>
                <li><a href="#" class="parent" id="SubItem1"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent" id="SubItem1.1"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent" id="SubItem1.7"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent" id="ProductInfo"><span>Item 2</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
        <li><a href="#"><span>Item 3</span></a></li>
        <li class="last"><a href="#"><span>Item 4</span></a></li>
    </ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

Css File :

div#menu {
    height: 46px;
    padding-left: 10px;
    background: url(images/left.png) no-repeat;
    _background-image: url(images/left.gif);
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 10px;
    background: url(images/right.png) no-repeat right 0;
    _background-image: url(images/right.gif);
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 36px;
    left: 0;
    visibility: hidden;
    width: 187px;
    padding: 0 0 11px 7px;
    background: url(images/submenu-bottom.png) no-repeat 7px bottom;
    _background-image: url(images/submenu-bottom.gif);
    margin: 0px 0 0 -4px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a:focus>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right: 5px;
    text-align: center;
}
div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 30px 0 0;
    line-height: 40px;
    height: 46px;
    margin-right: 5px;
    _margin-right: 1px;
    background: none;
}
div#menu span {
    margin-top: 2px;
    padding-left: 30px;
    color: #fff;
    font: bold 11px Trebuchet MS,Arial,san-serif;
    background: none;
    line-height: 40px;
}
div#menu a:focus,
div#menu a.over {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}

div#menu a:hover,
div#menu a.over {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}

div#menu a:focus span,
div#menu a.over span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}

div#menu a:hover span,
div#menu a.over span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}

div#menu li.current a,
div#menu ul.menu>li:focus>a {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}

div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}

div#menu li.current a span,
div#menu ul.menu>li:focus>a span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}

div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}

div#menu ul.menu>li:focus>a span {
    color: #3a3a3a;
}

div#menu ul.menu>li:hover>a span {
    color: #3a3a3a;
}
div#menu li { }
div#menu li.last { background: none; }

div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:focus,
div#menu.js-active a:focus span,
div#menu.js-active a,
div#menu.js-active span {
    background:none;
}

div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:hover,
div#menu.js-active a:hover span,
div#menu.js-active a,
div#menu.js-active span {
    background:none;
}

div#menu.js-active ul.menu>li:focus>a,
div#menu.js-active ul.menu>li:focus>a span {
    background:none;
}

div#menu.js-active ul.menu>li:hover>a,
div#menu.js-active ul.menu>li:hover>a span {
    background:none;
}
div#menu li.current a.over {
    background: url(images/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a.over span {
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(images/selected-left-sub.gif);
}
div#menu a.over span {
    color: #3a3a3a;
}

/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
}
div#menu ul ul {
    padding-top: 10px;
}
div#menu ul ul a {
    padding: 0;
    height: auto;
    float: none;
    display: block;
    line-height: 26px;
    font-size: 11px;
    color: #ffffff;
    z-index: -1;
    padding-left: 5px;
    white-space: normal;
    width: 160px;
    margin: 0 5px;
    text-transform: none;
}

div#menu ul ul a span {
    padding: 0 15px;
    line-height: 26px;
    font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background:none;
}

div#menu ul ul a:focus {
    background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}

div#menu ul ul a:hover {
    background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}

div#menu ul ul a:focus span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}

div#menu ul ul a:hover span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}

div#menu ul ul a.parent {
    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {
    background: url(images/submenu-pointer-top.png) no-repeat 0 0;
}

div#menu ul ul a.parent:focus {
    background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}

div#menu ul ul a.parent:hover {
    background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}

div#menu ul ul a.parent:focus span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}

div#menu ul ul a.parent:hover span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul div {
    width: 180px;
    padding: 15px 0px 8px 0px;
    margin: -44px 0 0 169px !important;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background-image: url(images/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {
    padding: 0 4px 5px 1px;
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    _background-image: url(images/submenu-bottom.gif);
}
div#menu ul ul div li {
    position:relative;
    top:-5px;
}

/* lava lamp */
div#menu li.back {
    background: url(images/lavalamp-left.png) no-repeat 0 0;
    _background-image: url(images/lavalamp-left.gif);
    width: 10px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0;
}

div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(images/lavalamp-right.png) no-repeat right 0;
    _background-image: url(images/lavalamp-right.gif);
    height: 46px;
    margin: 0 5px 0 10px;
    _margin-right: 2px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}