Rememeber me pwd

under default.aspx
=============
  <div>
    User Name:
    <asp:TextBox ID="txtUname" runat="server"></asp:TextBox>
    <br />
    <br />
    Pwassword:
    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" autocomplete="off" />
    <br />
    <asp:CheckBox ID="chkRemember" runat="server" Text="Remember"  />
    <br />
    <asp:Button ID="btnLogin" runat="server" Text="Login" onclick="btnLogin_Click" />
</div>
under .cs
=========
protected void Page_Load(object sender, EventArgs e)
    {


            if (!IsPostBack)
            {
                if (Request.Cookies["UName"] != null)
                txtUname.Text= Request.Cookies["UName"].Value;
                if (Request.Cookies["PWD"] != null)
                txtPwd.Attributes.Add("value", Request.Cookies["PWD"].Value);
               // txtPwd.Text = Request.Cookies["PWD"].Value;
                if (Request.Cookies["UName"] != null && Request.Cookies["PWD"] != null)
                    chkRemember.Checked = true;
            }
    }



  


    protected void btnLogin_Click(object sender, EventArgs e)
    {
        if (chkRemember.Checked == true)
            {
            Response.Cookies["UName"].Value = txtUname.Text;
            Response.Cookies["PWD"].Value = txtPwd.Text;
            Response.Cookies["UName"].Expires = DateTime.Now.AddMinutes(2);
            Response.Cookies["PWD"].Expires = DateTime.Now.AddMinutes(2);
            Response.Redirect("logout.aspx");
            }
            else
            {
                Response.Cookies["UName"].Expires = DateTime.Now.AddMinutes(-1);
                Response.Cookies["PWD"].Expires = DateTime.Now.AddMinutes(-1);
            Response.Redirect("logout.aspx");
            }



    }

LOG FILE

  public static void WriteLog(string FileName, string sMessage)
        {
            try
            {
                if (FileName == "MTNRBT")
                {
                    if (ConfigurationManager.AppSettings["ENABLE_LOG"] == null || ConfigurationManager.AppSettings["ENABLE_LOG"].ToUpper() != "T") return;
                }


                if (sMessage.ToLower() != "thread was being aborted.")
                {
                    string FilePath = ConfigurationManager.AppSettings["ERRORLOG"] + "\\" + DateTime.Now.ToString("MMM") + DateTime.Now.Year.ToString() + "\\" + DateTime.Now.ToString("ddMMMyyyy");
                    if (!Directory.Exists(FilePath)) Directory.CreateDirectory(FilePath);
                    FilePath = FilePath + "\\" + FileName + ".txt";

                    if (File.Exists(FilePath))
                    {
                        FileInfo sfInfo = new FileInfo(FilePath);
                        if (sfInfo.Length > 524288)
                        {
                            File.Move(FilePath, FilePath.Replace(".txt", "") + "-" + DateTime.Now.ToString("ddMMyyyyhhmmss") + ".txt");
                        }
                        sfInfo = null;
                    }
                    StreamWriter sw;
                    sw = File.AppendText(FilePath);
                    sw.WriteLine("****************" + DateTime.Now.ToString("dd-MMM-yyyy HH:mm:ss") + "**********************");
                    sw.WriteLine(sMessage);
                    sw.WriteLine("");
                    sw.Close();
                    sw = null;
                }
            }
            catch
            {
            }
          
        }

<?xml version="1.0" encoding="utf-8" ?>
<root>
<VALIDATE>
   
    <form action='defaultx.aspx' method='get'>
     
      <table cellpadding='5' cellspacing = '0' class='CBBR' width='100%'  background-color='white'>
       
        <tr>
          <td>
            <b>Name:</b>
          </td>
 
        </tr>
        <tr>
          <td >
            <input style='width:220px; height:18px;border:solid 1px black;' value='!NAMEVALUE!'  name='txtname' label='Name' type='text'/>
            !NAMEREQ! !NAMEALPHANUMARIC!
        </td>
        </tr>
        <tr>
          <td>
            <b>Email Address:</b>
          </td>
  
        </tr>
        <tr>
          <td>
            <input style='width:220px; height:18px;border:solid 1px black;' value='!EMAILIDVALUE!'  name='txtemail' label='Emial Address' type='text'/>
             !NAEMREQ!!NAMEALPHANUMARIC!
          </td>
        
        </tr>
        <tr>
          <td>
            <b>Your Message:</b>
          </td>
   
        </tr>
        <tr>
          <td>
            <textarea style='width:220px;border:solid 1px black;'  name="txtmsg" label="Your Message">!MSGVALUE!</textarea>
             !NAEMREQ!!NAMEALPHANUMARIC!
         
          </td>
        </tr>
        <tr>
          <td>
             <input style="cursor:pointer;" type="image" value="Submit" src='http://m.imimobile.com/commonproxy/Images/submit.gif' alt='*'  data-role="button"  rel="external" data-theme="c" />
          </td>
        </tr>
        <tr>
        <td>
        <input type='hidden' name='typxm' value='Emailinfo'/>
        <input type='hidden' name='dynamic' value='t'/>
        </td>
        </tr>
       
      </table>
     
    </form>
   

</VALIDATE>


</root>

AUTO SLIDE

under .aspx
============

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IMImobile </title>
  
    <link href="xmls/stylesheet/hdr_320.css" type="text/css" rel="stylesheet" />

    <link href="css/pms.css" rel="stylesheet" type="text/css" />
   

  <script src="scripts/BasicCarousel.js" type="text/javascript"></script>
    <link href="css/BasicCarousel.css" rel="stylesheet" type="text/css" />
 


    <script src="jscript/Search.js" type="text/javascript"></script>



    <meta content="width=device-width, user-scalable=yes, target-densitydpi=device-dpi" name="viewport" />
   


   <script type="text/javascript" language="javascript">


       var selectedCount = 0;
       var element;

        var dimages = new Array();
        var numImages = 5;
        for (i = 0; i < numImages; i++) {
            dimages[i] = new Image();
            dimages[i].src = "../AACAROSAL/images/image" + (i + 1) + ".jpg";
        }
        var curImage = -1;

        function swapPicture() {

         
            if (document.images) {
                var nextImage = curImage + 1;
                if (nextImage >= numImages)
                    nextImage = 0;
                if (dimages[nextImage] && dimages[nextImage].complete) {
                    var target = 0;
                    if (document.images.myImage)
                        target = document.images.myImage;
                    if (document.all && document.getElementsByTagName("img"))
                        target = document.getElementsByTagName("img");
                 
                   
                    document.getelementsbyname
                    // make sure target is valid
                    if (target) {
                        document.myImage.src = dimages[nextImage].src;
                        curImage = nextImage;
                    }
                    setTimeout("swapPicture()", 3000);
                }
                else {
                    setTimeout("swapPicture()", 3000);
                }
            }
        }
        setTimeout("swapPicture()", 3000);

    </script>

</head>
<body data-role="page">
    <div data-role="page">
        <div id="divHeader">
            <div style="vertical-align: middle;" class="TAB">
                <div style="vertical-align: middle;" class="">
                    <span align="left" class="MBL">
                        <img border="0" src="images/Section/img_logo_08082012105304.jpg" /></span><span align="left"
                            class="MBR"><img border="0" src="images/Section/home_icon_Small_08082012105317.gif" /></span></div>
            </div>
            <div class="SP">
            </div>
            <div style="vertical-align: middle;" class="TAB">
                <div style="width=100%; vertical-align: top;">
                    <div id="RSS0" width="100%">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="10%" align="left">
                                    <a style="border: none; cursor: pointer;" onclick="return MoveCarousel(5,0,'BULLET00');">
                                        <img  src="jscript/carouselR.jpg" border="0" onclick="return MoveCarousel(5,0,'BULLET00');" /></a>
                                </td>
                                <td width="80%" align="left" style="vertical-align: top">
                                    <div style="text-align: left;">
                                        <img id="myImage" NAME="myImage" src="images/Event/test12345/sport_320_07082012113756.gif" class="GE01" /><span><a
                                            href="?low=h">Articel1</a></span></div>
                                </td>
                                <td width="10%" align="right">
                                    <a onclick="return MoveCarousel(5,1,'BULLET00');" style="border: none; cursor: pointer;">
                                        <img src="jscript/carouselL.jpg" onclick="return MoveCarousel(5,1,'BULLET00');" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                        <div style="text-align: center; padding-bottom: 8px;">
                            <a style="border: none; cursor: pointer" onclick="return MoveCarousel(5,0,'BULLET00');">
                                <img border="0" id="BULLET00" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,0,'BULLET00');" /></a><a
                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,1,'BULLET11');"><img
                                        border="0" id="BULLET11" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,1,'BULLET11');" /></a><a
                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,2,'BULLET22');"><img
                                                border="0" id="BULLET22" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,2,'BULLET22');" /></a><a
                                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,3,'BULLET33');"><img
                                                        border="0" id="BULLET33" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,3,'BULLET33');" /></a><a
                                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,4,'BULLET44');"><img
                                                                border="0" id="BULLET44" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,4,'BULLET44');" /></a></div>
                    </div>

                    <script type="text/javascript">MoveCarousel(5,'0','BULLET000')</script>

                    <div id="RSS1" width="100%">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="10%" align="left">
                                    <a style="border: none; cursor: pointer;" onclick="return MoveCarousel(5,0,'BULLET01');">
                                        <img src="jscript/carouselR.jpg" border="0" onclick="return MoveCarousel(5,0,'BULLET01');" /></a>
                                </td>
                                <td width="80%" align="left" style="vertical-align: top">
                                    <div style="text-align: left;">
                                        <img   id="myImage1" src="images/Event/test12345/gesamer_320_07082012113820.gif" class="GE01" /><span><a
                                            href="?low=h">Articel2</a></span></div>
                                </td>
                                <td width="10%" align="right">
                                    <a onclick="return MoveCarousel(5,2,'BULLET01');" style="border: none; cursor: pointer;">
                                        <img src="jscript/carouselL.jpg" onclick="return MoveCarousel(5,2,'BULLET01');" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                        <div style="text-align: center; padding-bottom: 8px;">
                            <a style="border: none; cursor: pointer" onclick="return MoveCarousel(5,0,'BULLET00');">
                                <img border="0" id="BULLET00" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,0,'BULLET00');" /></a><a
                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,1,'BULLET11');"><img
                                        border="0" id="BULLET11" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,1,'BULLET11');" /></a><a
                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,2,'BULLET22');"><img
                                                border="0" id="BULLET22" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,2,'BULLET22');" /></a><a
                                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,3,'BULLET33');"><img
                                                        border="0" id="BULLET33" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,3,'BULLET33');" /></a><a
                                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,4,'BULLET44');"><img
                                                                border="0" id="BULLET44" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,4,'BULLET44');" /></a></div>
                    </div>

                    <script>MoveCarousel(5,'0','BULLET000')</script>

                 <div id="RSS2" width="100%">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="10%" align="left">
                                    <a style="border: none; cursor: pointer;" onclick="return MoveCarousel(5,1,'BULLET02');">
                                        <img src="jscript/carouselR.jpg" border="0" onclick="return MoveCarousel(5,1,'BULLET02');" /></a>
                                </td>
                                <td width="80%" align="left" style="vertical-align: top">
                                    <div style="text-align: left;">
                                        <img  src="images/Event/test12345/les_320_07082012113830.gif" class="GE01" /><span><a
                                            href="?low=h">Articel3</a></span></div>
                                </td>
                                <td width="10%" align="right">
                                    <a onclick="return MoveCarousel(5,3,'BULLET02');" style="border: none; cursor: pointer;">
                                        <img src="jscript/carouselL.jpg" onclick="return MoveCarousel(5,3,'BULLET02');" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                        <div style="text-align: center; padding-bottom: 8px;">
                            <a style="border: none; cursor: pointer" onclick="return MoveCarousel(5,0,'BULLET00');">
                                <img border="0" id="BULLET00" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,0,'BULLET00');" /></a><a
                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,1,'BULLET11');"><img
                                        border="0" id="BULLET11" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,1,'BULLET11');" /></a><a
                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,2,'BULLET22');"><img
                                                border="0" id="BULLET22" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,2,'BULLET22');" /></a><a
                                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,3,'BULLET33');"><img
                                                        border="0" id="BULLET33" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,3,'BULLET33');" /></a><a
                                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,4,'BULLET44');"><img
                                                                border="0" id="BULLET44" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,4,'BULLET44');" /></a></div>
                    </div>

                    <script>MoveCarousel(5,'0','BULLET000')</script>

                    <div id="RSS3" width="100%">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="10%" align="left">
                                    <a style="border: none; cursor: pointer;" onclick="return MoveCarousel(5,2,'BULLET03');">
                                        <img src="jscript/carouselR.jpg" border="0" onclick="return MoveCarousel(5,2,'BULLET03');" /></a>
                                </td>
                                <td width="80%" align="left" style="vertical-align: top">
                                    <div style="text-align: left;">
                                        <img   src="images/Event/test12345/meteo_320_07082012113840.gif" class="GE01" /><span><a
                                            href="?low=h">Articel4</a></span></div>
                                </td>
                                <td width="10%" align="right">
                                    <a onclick="return MoveCarousel(5,4,'BULLET03');" style="border: none; cursor: pointer;">
                                        <img src="jscript/carouselL.jpg" onclick="return MoveCarousel(5,4,'BULLET03');" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                        <div style="text-align: center; padding-bottom: 8px;">
                            <a style="border: none; cursor: pointer" onclick="return MoveCarousel(5,0,'BULLET00');">
                                <img border="0" id="BULLET00" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,0,'BULLET00');" /></a><a
                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,1,'BULLET11');"><img
                                        border="0" id="BULLET11" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,1,'BULLET11');" /></a><a
                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,2,'BULLET22');"><img
                                                border="0" id="BULLET22" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,2,'BULLET22');" /></a><a
                                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,3,'BULLET33');"><img
                                                        border="0" id="BULLET33" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,3,'BULLET33');" /></a><a
                                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,4,'BULLET44');"><img
                                                                border="0" id="BULLET44" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,4,'BULLET44');" /></a></div>
                    </div>

                    <script>MoveCarousel(5,'0','BULLET000')</script>

                    <div id="RSS4" width="100%">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                                <td width="10%" align="left">
                                    <a style="border: none; cursor: pointer;" onclick="return MoveCarousel(5,3,'BULLET04');">
                                        <img src="jscript/carouselR.jpg" border="0" onclick="return MoveCarousel(5,3,'BULLET04');" /></a>
                                </td>
                                <td width="80%" align="left" style="vertical-align: top">
                                    <div style="text-align: left;">
                                        <img  src="images/Event/test12345/Growth_320_07082012113848.gif" class="GE01" /><span><a
                                            href="?low=h">Articel5</a></span></div>
                                </td>
                                <td width="10%" align="right">
                                    <a onclick="return MoveCarousel(5,4,'BULLET04');" style="border: none; cursor: pointer;">
                                        <img src="jscript/carouselL.jpg" onclick="return MoveCarousel(5,4,'BULLET04');" border="0" /></a>
                                </td>
                            </tr>
                        </table>
                        <div style="text-align: center; padding-bottom: 8px;">
                            <a style="border: none; cursor: pointer" onclick="return MoveCarousel(5,0,'BULLET00');">
                                <img border="0" id="BULLET00" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,0,'BULLET00');" /></a><a
                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,1,'BULLET11');"><img
                                        border="0" id="BULLET11" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,1,'BULLET11');" /></a><a
                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,2,'BULLET22');"><img
                                                border="0" id="BULLET22" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,2,'BULLET22');" /></a><a
                                                    style="border: none; cursor: pointer" onclick="return MoveCarousel(5,3,'BULLET33');"><img
                                                        border="0" id="BULLET33" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,3,'BULLET33');" /></a><a
                                                            style="border: none; cursor: pointer" onclick="return MoveCarousel(5,4,'BULLET44');"><img
                                                                border="0" id="BULLET44" class="TE010" src="jscript/dot_2.png" onclick="return MoveCarousel(5,4,'BULLET44');" /></a></div>
                    </div>

                    <script>MoveCarousel(5,'0','BULLET000')</script>

                </div>
            </div>
            <div class="SP">
            </div>
       
          
            <div class="SP">
            </div>
         
        </div>
    </div>
</body>
</html>
<%--http://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htm--%>

Menu control

==================ravi=================

script.cs
==========

$(function() {

    var st = $('<style type="text/css" />');
    st.text("#main_nav.make_menu_room { margin-bottom: " + $('#main_menu').height() + "px; } ");

    $('head').append(st);

    //set no_auto behavior on top nav
    $('#top_nav .menuItem.dropdown.no_auto > a').click(function() {

        $(this).parents('.menu').children('.menuItem .menu').hide();

        $(this).siblings('.menu').toggle();
    });


    $('#search').click(function() {

        if ($('#main_menu').css('display') != 'none') {
            toggleMenu($('#main_menu'));
        }

        toggleSearch();

    });


    $('#menu, #close_main_menu').click(function() {
      
        toggleMenu();

    });

    function toggleMenu() {
        $('#main_menu').toggle(50);
        $('#main_nav').toggleClass('make_menu_room');

        $('#menu_button').toggleClass('active');
    }

    function toggleSearch() {
       
        $('#main_nav').toggleClass('make_room');

      
    }
  
});

====================.css==================

body, body * {
    margin: 0; padding: 0;
}

body {
    font-family: "Helvetica Neue",Helvetica,arial;
    -webkit-text-size-adjust: none;
}

a {
    text-decoration: none;
}
a img{ border:0;}

fieldset {
    border: 0;
}

.center {
    text-align: center;
}


#wrapper {
    margin: 0 auto;
}











#menu_button.active > a {
    box-shadow: inset 2px 4px 20px #230e30;
}




#main_nav.menu.l1 {
    background: url(../images/mainMenu_Bg.png) left top repeat-x;
    height: 45px;
    box-shadow: 0px 3px 10px #D1D1D1;
    display: inline;
    width: 100%;
}

#main_nav.menu.l1 > li {
    line-height: 45px;
    /*
    background: url(../images/menuDivider.jpg) right top repeat-y;
    */
    border-right: 1px solid #230e30;
    box-shadow: 1px 0 0 #653c7f;
   
    left: 10px;
    display: inline-block;
}

#main_nav.menu.l1 > li.dropdown  {
    /*
    background: url(../images/menuDivider.jpg) right top repeat-y,
                url(../images/dropdown.png) right center no-repeat;
    */
    background: url(../images/dropdown.png) right center no-repeat;

}

#main_nav.menu.l1 > li.dropdown a {
    /*
    padding-right: 24px;
    */
}



#main_nav.menu.l1 > li.dropdown.active {
    background-color: #3a015d;
}

#main_nav.menu.l1 #home {
    display: none;
    /*
    text-indent: -9999px;
    display: inline-block;
    width: 20px;
    height: 100%;
    background: url(../images/home_Icon.png) center center no-repeat;
    */
}




#main_nav.menu.l1 #xsearch_icon {
    display: none;
    /*
    text-indent: -9999px;
    display: inline-block;
    height: 100%;
    width: 29px;
    background: url(../images/search_menu_item.png) center center no-repeat;
    */
}

#main_nav.menu.l1  #search_button.active #search_icon {
    visibility: hidden;
}







#main_nav.make_room {
    margin-bottom: 46px;
}

#main_nav {
    border-top: 1px solid #230e30;
    border-bottom: 1px solid #230e30;
   
}

#main_nav .menuItem a {
    font-weight: 600;
}



#main_nav .menuItem.active {
    background-color: #3a015d;
    box-shadow: inset 0px 4px 10px #330033;
}

#main_nav .menu.l2 .menuItem a {
    padding-left: 10px;
}

#main_menu {
    width: 100%;
    background: #542671;
    top: 46px;
    border-left: 1px solid #3a194f;
    border-right: 1px solid #3a194f;
}

#main_menu .menuItem {
    width: 100%;
    border: 1px solid #3a194f;
   
    background: url(../images/fm_arrow_down.jpg) right center no-repeat;
}

#main_menu .menuItem.last {
    background: #4a2263;
   
}

#main_menu .menuItem.m1 {
    background: url(../images/fm_arrow.jpg) right center no-repeat;
}

#main_menu .menuItem.last a {
    background: url(../images/arrow_up.png) center center no-repeat !important;
}




/* menu */

.menu {
    list-style: none;
}

.menu .menu {
    display: none;
}

.menuItem.dropdown:hover > .menu,
.l1 > .menuItem.dropdown.active > .menu{
    display: block;
}

.menuItem.dropdown.no_auto:hover > .menu {
    display: none;
}

.#mainMennu .menu.l1 > .menuItem.dropdown:hover > .menu {
    display: none;
}



.menu.l1 .menuItem {
    display: block;
    float: left;
}

.menu.l2 .menuItem {
   
}




.menuItem .pointer {
    display: none;
}

.menuItem:hover > a .pointer, .l1 > .menuItem.active > a .pointer  {
    display: block;
}

.menu.l1, .menu.l2, .menu.l3 {
    float: left;
}

.menu.l1 {
    position: relative;
    width: 100%;
}

.menu.l2 {
    position: absolute;
    left: 0;
}

.menu.l3 {
    position: absolute;
    z-index: 100;
    left: 0;
}

.menu.l1 > li > a, .menu.l2 > li > a {
    color: #fff;
    /*
    padding: 0 10px;
    */
   


==============================.aspx=================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Nagrajusir_Menu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>STC Mall</title>
   
       
       
        <link href="indexhtml/style.css" rel="stylesheet" type="text/css" />
       

        <script src="scripts/jquery-1.6.1.js" type="text/javascript"></script>
   
        <script src="scripts/arabicscript.js" type="text/javascript"></script>
   

   
   
       
       
        <!--  slide script -->
   
   
       
           
   
    </head>
    <body>
   
            <div id="header">
           
                <ul id="main_nav" class="nav menu l1">
                   
                    <li id="menu_button" class="menuItem dropdown no_auto" style="width: 39.5%">
                        <a href="#" id="menu">&nbsp;<img src="images/menu_menuitem.png" alt="Menu" style="max-width: 15%;" />&nbsp;Menu</a>
                        <ul class="menu l2" id="main_menu">
                            <li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?Siteid=66&LinkId=0">Deeni Yaqini</a></li>
                            <li class="menuItem m1"><a href="http://www.m3com.com.sa/en/news">News</a></li>
                            <li class="menuItem m1"><a href="sports.html">Sports</a></li>
                            <li class="menuItem m1"><a href="http://www.intigral-csms.net/cftWap/Forms/WapHome.aspx?SITEID=353&LINKID=47049">Women</a></li>
                            <li class="menuItem m1"><a href="http://www.m3com.com.sa/en/tube/invision">Invision</a></li>
                            <li class="menuItem m1"><a href="http://stcgames.com">Games</a></li>
                            <li class="menuItem m1"><a href="#">Kids</a></li>
                            <li class="menuItem m1"><a href="#">STC Services</a></li>
                            <li class="menuItem m1"><a href="http://stcappshop.com">App Shop</a></li>
                            <li class="menuItem m1"><a href="http://forum.m3com.com.sa/">Forums</a></li>
                            <li class="menuItem m1 last"><a href="#" id="close_main_menu">&nbsp;</a></li>
                        </ul>
                    </li>
                   
                       
                   
                </ul> <!-- /#main_nav -->
            </div> <!-- /#header -->
           
      
        <img src="images/news/arab_news_item.jpg" width="100%" />
      
    </body>
</html>

accordian mobile

http://mwancloud.com/stcmall/mobile/#


<?xml version="1.0"?>
   
<main>


<meta>
        <item>
            <link href="JScript/accordian.css" rel="stylesheet" type="text/css" />
        </item>

                <item>
            <script language="javascript" type="text/javascript" src="JScript/jquery-1.6.1.js"></script>
        </item>
                <item>
            <script language="javascript" type="text/javascript" src="JScript/accordianscript.js"></script>
        </item>
       
</meta>

<root level="H">

<div id="wrapper">
                   
            <div id="footer">
                <ul >
               
                <li class="right_arrow"><a href="!ACCTITLEHREF!"><h4>!ACCTITLE!</h4></a></li>
                </ul>
               
                <div class="accordion">               
                    <h4>!HEADERTITLE!</h4>
                   
                    <div>
                    <ul >
                        <li class="right_arrow"><span><a href="HREF">!LNKTITLE!</a></span></li>
                       
                    </ul>
                   
                    </div>
                                 </div>

                            </div>
 </div>
       

</root>
</main>

Ref url:
http://mwancloud.com/stcmall/mobile/#


accordian.css
================

body, body * {
    margin: 0; padding: 0;
}

body {
    font-family: "Helvetica Neue",Helvetica,arial;
    -webkit-text-size-adjust: none;
}

a {
    text-decoration: none;
}
a img{ border:0;}

fieldset {
    border: 0;
}

.center {
    text-align: center;
}




#loginPanel {
    position: absolute;
    /*right: 0;*/
    left: 0;
   
    top: 45px;
   
    width: 100%;
   
    box-shadow: 0px 2px 4px #311d3d;
   
    background-color: #542671 ;
    color: #fff;
    /*
    padding: 10px;
    */
    z-index: 200;
}

#loginPanel form, .loginForm {
    margin: 20px;
}

.loginForm #username,  .loginForm #password {
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    width: 100%;
    line-height: 34px;
    height: 34px;
}

.loginForm #loginButton {
    width: 100%;
}

.loginForm .button {
    background: url(../images/button_Bg.jpg) repeat-x;
    border: 1px solid #230E30;
    border-radius: 4px;
    color: white;
    padding: 0 4px;
    cursor: pointer;
    float: left;
    margin-right: 4px;
    line-height: 30px;
    height: 30px;
}











/* menu */



.clear {
    clear: both;
    visibility: hidden;
}
/** footer **/
#footer{
background:#431e5b;
}
#footer  ul{
list-style:none;
}
#footer  ul li{

border-top:1px solid #3a194f;
height:45px;
}
#footer  ul li a{
color: #FFFFFF;
display: block;
height: 100%;
line-height: 45px;
margin-left: 16px;
font-size: 14px;
font-weight: bold;
}
.right_arrow{
background:url(../images/fm_arrow.jpg) no-repeat center right #542671;
padding-right:10px;
}

/**  column clopase **/

.accordion h1{
 margin-left:20px;
 font-size:16px;
 font-weight:bold;
 color:#ffff;
}
.accordion h4 {
    background: #431e5b url(../images/arrows.gif) no-repeat right -30px;
    padding: 0px 15px;
    margin: 0;
    font-size:14px;
    font-weight:bold;
    border-top: solid 1px #3A194F;
    cursor: pointer;
    color:#fff;
    height:45px;
    line-height:45px;
}

.accordion h4.active {
    background-position: right 22px;
    background-color:#542671;
    color:#fff;
}
.accordion h4   a{
    color:#fff;
}
.accordion h4.active  a{
    color:#fff;
}
.accordion h4  a:hover{
    color:#fff;
}

.accordion p {
    margin: 0;
    padding: 10px 5px 20px 5px;
}




images: arrows.gif,button_Bg.jpg,fm_arrow.jpg

accordianscritp.js
==================

$(function() {

    $(".accordion div").hide();
    $(".accordion h4").click(function() {
        $(this).next(".accordion>div").slideToggle("slow")
                    .siblings(".accordion>div:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h4").removeClass("active");
    });



});

XML BLOGER VIEW AND MVC IN 7DAYS

MVC IN 7 DAYS
=============



http://www.codeproject.com/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7#OtherParts


http://tools.dottoro.com/services/highlighter/xml.php( xml bloger view link)

xml bloger supporting  scripts
==============================

 <link rel="stylesheet" type="text/css" href="http://tools.dottoro.com/public/highlighter/dottoro-highlighter-v3.css" />
 <script type="text/javascript" src="http://tools.dottoro.com/public/highlighter/dottoro-highlighter-v3.js"></script>

AJAXEXTENDER CONTROL

CSS
========================================


body
{
    scrollbar-arrow-color:#333333;   
    scrollbar-face-color:#E4E6E9;
    scrollbar-highlight-color:#333333;
}

.backColorDark
{
    background-color :#D4D4D4;     
}
.backColorlight
{
    background-color:#7686a7;
}
.foreColorDark
{
    color:#D4D4D4;
   
}
.headerBottomBorder
{
    border-bottom : 2px solid #D4D4D4;
}
.Hdrtext
{
    /*background-color :#f2f2f2;*/
    background:url(../../images/bg_chart.png) repeat-x;
    color: Black ;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
    padding:5px 0px 5px 0px;
    margin-top:5px;       
    margin-bottom:5px;
    border-bottom:5px solid #fff;
    /*border:solid 1px #000;*/
}
.Hdrtext_BreadCrumb
{
    /*background-color :#f2f2f2;*/
    background:url(../../images/bg_chart.png) repeat-x;
    color: Black ;
    font-weight:normal;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
    padding:5px 0px 5px 0px;
    margin-top:5px;       
    margin-bottom:5px;
    border-bottom:5px solid #fff;
    /*border:solid 1px #000;*/
}
.Hdrtext_New
{
    /*background-color :#f2f2f2;*/
    background:url(../../images/bg_chart.png) repeat-x;
    color: Black ;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
    padding:3px 0px 3px 0px;
    margin-top:3px;       
    margin-bottom:3px;
    border-bottom:3px solid #fff;
    /*border:solid 1px #000;*/
}
.HdrtextR
{
    background-color : #D4D4D4;   
    color: white;
    font-weight: bold;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: right;
}
.Hdrtexthome
{
    background-color : #D4D4D4;   
    color: white;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: center;
}
.HdrtextBlack
{
    background-color : #D4D4D4;
    color: #333333;
    font-weight: bold;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
}
.aStyle
{
    FONT-WEIGHT: bold;
    FONT-SIZE:  10px;
    COLOR: #ffffff;
    FONT-FAMILY: verdana,Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
}
.labelStyle
{
    color: #333333;
    font-weight: normal;
    font-size: 11px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
}
.labelStyleB
{
    color: #333333;
    font-weight: normal;
    font-size: 10px;
    font-weight:bold;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left;
}
.loginBorder
{
    background-color:#333333;
}
.sessiontimedout
{
    border-right: #333333 1px solid;
    border-top: #333333 1px solid;
    font-weight: bold;
    font-size: 11px;
    border-left: #333333 1px solid;
    color: white;
    border-bottom: #333333 1px solid;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #333333;
}
.txtField
{
    border-right: #666666 1px solid;
    border-top: #666666 1px solid;
    font-weight: normal;
    font-size: 9px;
    border-left: #666666 1px solid;
    color: #000000;
    border-bottom: #666666 1px solid;
    font-family: Verdana,Arial;
    text-decoration: none;
}
.txtFieldWatermark
{
    background-color:#E4E6E9;
    border-right: #666666 1px solid;
    border-top: #666666 1px solid;
    font-weight: normal;
    vertical-align: middle;
    font-size: 9px;
    height:20px;
    border-left: #666666 1px solid;
    color: #000000;
    border-bottom: #666666 1px solid;
    font-family: Verdana,Arial;
    text-decoration: none;   
}
.txtFieldAuto
{
    border-right: #666666 1px solid;
    border-top: #666666 1px solid;
    font-weight: bold;   
    vertical-align:middle;   
    height:20px;
    font-size: 10px;
    border-left: #666666 1px solid;
    color: #000000;
    border-bottom: #666666 1px solid;
    font-family: Verdana,Arial;
    text-decoration: none;
}
.txtBold
{
    border: #666666 1px solid;
    font-weight: bold;
    font-size: 10px;
    background-color: #E4E6E9;   
    border:1px;
    font-family: Verdana,Arial;
    padding-top:2px;
    padding-bottom:2px;
}
.bold_text_more
{
    font-weight: bold;
    font-size: 11px;   
    color: #003366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
   
}
.normalText
{
    font-weight: normal;
    font-size: 10px;
    color: #333333;
    text-align: left;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.linkbutn
{
    color: #333333;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration : none;
}
.hdrlinkbutn
{
    color: #333333;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-size: 11px;
    font-weight: normal;
    text-decoration : none;
}
.hdrlinkbutnW
{
    color: #ffffff;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-size: 11px;
    font-weight: normal;
    text-decoration : none;
}
.linkRed
{
    color:Maroon;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-style:italic;
    font-size: 10px;
    font-weight: bold;
    text-decoration : none;
    cursor:pointer;
}
.linkbutnwhite
{
    color: white;
    vertical-align: middle;
    font-family: Verdana,Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration : none;
}
.alternateText
{
    font-weight: normal;
    font-size: 10px;
    color: #333333;
    text-align: left;
    background-color: #F7F6F4;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.criticalText
{
    font-weight:bold;
    font-style:italic;
    font-size: 10px;
    color: #333333;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.criticalText1
{
    font-weight:bold;   
    font-style:italic;
    font-size: 10px;
    color: red;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.criticalTextRed
{
    font-weight:bold;   
    font-size: 10px;
    color: red;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.updatePortalBackground
{   
    background-color:#F7F6F4;   
    border-top:1px solid silver;
    border-bottom:1px solid silver;
    height:40px;
}

.noteBackground
{       
    background-color:#F7F6F4;   
    border:1px solid silver;
    height:28px;
    margin-top:8px;
    margin-bottom:8px;   
}
.noteText
{   
    font-weight:normal;
    font-size: 11px;
    color: #333333;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;   
}
.gridHead
{
    background-color: #ccc;
    font-weight: bold;
    color: Black ;
    font-size: 10px;
    font-family: Verdana,Arial;
    text-align: center;
    vertical-align: middle;
    margin-top:5px;
    margin-bottom:5px;   
    padding:5px 0px 5px 0px;
}
.gridPager
{
    background-color: #D4D4D4;
    font-weight: bold;
    color: White;
    font-size: 10px;
    font-family: Verdana,Arial;
    text-align: right;
    vertical-align: middle;
}
.butText
{
    border-right: #003366 1px solid;
    border-top: #003366 1px solid;
    font-weight: normal;
    font-size: 11px;
    background-image: url(../../Images/but_bg.gif);
    border-left: #003366 1px solid;
    color: #003366;
    border-bottom: #003366 1px solid;
    font-family: Verdana,Arial, Helvetica, sans-serif;
}
.norText
{
    font-weight: normal;
    font-size: 10px;
    color: #333333;
    font-family: verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.HighLightRow
{
    background-color:lightgoldenrodyellow;
}
.configPopup
{
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight:bold;
    color:#222222;
    /*background-image: url(../../Images/graybutton_bg.gif);*/
    background-image: url(../../Images/gridHeaderbg.gif);   
    border: #D4D4D4 1px solid;
    height:20px;   
}
.configPopupClick
{
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight:bold;
    /*color:#000000;*/
    /*background-image: url(../../Images/button_bg.gif);*/
    color:#ffffff;
    background-image: url(../../Images/bg_subheader.png);   
    border-bottom: #D4D4D4 0px solid;   
    height:20px;
}
.configPopupArrow
{
    height:10px;   
    background:url(../../Images/sub_d.gif);
    background-repeat:no-repeat;
    background-position:top;   
}
.configPopupNoArrow
{
    height:10px;   
}
.calendar
{
    TABLE-LAYOUT: fixed;
    BACKGROUND-IMAGE: url(../../Images/cal.gif);
    WIDTH: 16px;
    CURSOR: hand;
    BORDER-TOP-STYLE: none;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    HEIGHT: 16px;
    BACKGROUND-COLOR: transparent;
    BORDER-BOTTOM-STYLE: none;
}
#progressBackgroundFilter
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:hidden;
    padding:0;
    margin:0; 
    background-color:#000;
    filter:alpha(opacity=30);
    opacity:0.5;
    z-index:10000;
}
#processMessage {
    position:absolute;
    top:30%;
    left:43%;
    padding:10px;
    width:14%;
    z-index:10001;
    background-color:#fff;
    border:solid 1px #000;
}

/*
    Date Added : 21-Apr-2007
    Author : Subbarao.TTV
    Module : MenuTempate.cs
    These classes are used generate dynamic menus.
*/

.imidiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */

BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
border-bottom: 1px solid #ccc;
font-weight:bold;
font-size: 10px;
font-family: Arial;
vertical-align: middle; 
z-index: 0;
}
   
.imidiv ul li{
background: #D4D4D4;
position: relative;
border-left-style:none;
border-right-style : none;
vertical-align :middle;
border-bottom : 1px;
}
   
/*Sub level menu items */
.imidiv ul li ul
{
margin: 0;
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
border-left: 1px solid #ccc;
visibility: hidden;
z-index: 0;
vertical-align :middle;
}

/* Sub level menu links style */
.imidiv ul li a{
display: block;
cursor:hand;
/*
font-weight: bold;
font-size: 10px;
*/
font-weight: normal;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;

overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
/*background: #D4D4D4, #fff;*/
background: #D4D4D4;
padding: 0px 5px;
border: 1px solid #ccc;
border-bottom: 1px;
border-right:0;
border-left: 0px;
vertical-align: middle;
}

.imidiv ul li a:visited{
color: white;
}

.imidiv ul li a:hover
{
height : 25;
background-color: #7686a7;
text-decoration: none;
}

.imidiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

   
/* Holly Hack for IE \*/
* html .imidiv ul li { float: left; height: 1%; }
* html .imidiv ul li a { height: 1%; }
/* End */

/* --------------------------------------- end -------------------------- */
/*
    Date Added : 08-Feb-2008
    Author : Ravi Kumar.P
    Module : Ajax Related (progress)
    These classes are used Ajax progress etc.
*/
#progressBackgroundFilter
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:hidden;
    padding:0;
    margin:0;
    background-color:#000;
    filter:alpha(opacity=30);
    opacity:0.5;
    z-index:10000;
}

#processMessage {
    position:absolute;
    top:30%;
    left:43%;
    padding:10px;
    width:14%;
    z-index:10001;
    background-color:#fff;
    border:solid 1px #000;
}

/* end Ajax progress  */

.DropShadow
{
 border-radius:6px;
 -moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
 box-shadow:2px 4px 20px grey;
 -moz-box-shadow:2px 4px 20px grey;
-webkit-box-shadow:2px 4px 20px grey;
-khtml-box-shadow:2px 4px 20px grey;           
}
           
/* tabs starts */

.shadetabs
{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 10px Verdana;
    list-style-type: none;
    color: #623C02;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li
{
    display: inline;
    margin: 0;
}

.shadetabs li a
{
    text-decoration: none;
    position: relative;
    z-index: -0;
    padding: 3px 4px;
    margin-right: 0px;
    border: 1px solid #333333;
    color: #623C02;
    background-image: url(../../images/shade.gif);
}

.shadetabs li a:visited
{
    color: #623C02;
}

.shadetabs li a:hover
{
    text-decoration: NONE;
    color: #660000;
}

.shadetabs li a.selected
{
    /*selected main tab style */
    position: relative;
    top: 1px;
    border-top: 2px solid #D4D4D4;
    border-bottom: 0px;
    color: #660000;
    border-bottom-color: white;
    background-image: url(../../images/middle.png);
}

.shadetabs li a.selected:hover
{
    /*selected main tab style */
    text-decoration: none;
    color: #660000;
}
/* tabs end */

/* XP IE7 theme - Backgrounds */
.visoft__tab_xpie7 .ajax__tab_header                    { background:url(../../images/tab-line.gif) repeat-x bottom; }
.visoft__tab_xpie7 .ajax__tab_outer                        { background:url(../../images/tab-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_inner                        { background:url(../../images/tab-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_tab                        { background:url(../../images/tab.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer    { background:url(../../images/tab-hover-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner    { background:url(../../images/tab-hover-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab        { background:url(../../images/tab-hover.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer    { background:url(../../images/tab-active-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner    { background:url(../../images/tab-active-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab        { background:url(../../images/tab-active.gif) repeat-x; }

/* XP IE7 theme - Other Styles */
.visoft__tab_xpie7 .ajax__tab_header                     { font-family:verdana,tahoma,helvetica;font-size:11px; }
.visoft__tab_xpie7 .ajax__tab_outer                        { height:29px; }
.visoft__tab_xpie7 .ajax__tab_inner                        { padding-left:3px; }
.visoft__tab_xpie7 .ajax__tab_tab                        { padding:8px 40px;margin:0; }
.visoft__tab_xpie7 .ajax__tab_body                        { font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; background-image:url(../../Images/bg_main.gif); }

/* tabs end */


/* Auto Complete */
/* flyout */
.autocomplete_completionListElement
{ 
    visibility : hidden;
    margin : 0px!important;   
    background-color : inherit;
     color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    cursor : hand;
    overflow : auto;
    height : 200px;
    text-align : left;
    list-style-type : none;
    padding:0px;
}

/* item */
.autocomplete_listItem
{
    margin : 0px;
    background-color : white;
    color : #030303;
    padding : 2px;
    line-height:2em;   
    border-bottom:1px solid silver;   
}

/* highlighted item */
.autocomplete_highlightedListItem
{
    margin : 0px;
    background-color : #F7F6F4;   
    font-weight:bold;   
    padding: 2px;
    line-height:2em;
    border-bottom:1px solid silver;
}
/* End Auto Complete */



/* RSS FEED READER*/
.tableft
{
    text-align: right;
    padding: 5px 10px 5px 5px;
    width: 15%;
}
.txtBoxWid
{
    width: 250px;
}
.ddlBoxWid
{
    width: 130px;
}
.errortext
{
    font-weight: bold;
    font-style: italic;
    font-size: 10px;
    color: #ff4900;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    text-decoration: none;
}


/*TreeView*/
.AspNet-TreeView
{
    width: 200px;
    color: #000;
}
.AspNet-TreeView a
{
    font-size: 10px;
    font-family: Verdana;
    color: #000;
}
.AspNet-TreeView td
{
    padding: 2px 3px;
}
.titlered
{
    color: #c62a3b;
    font-weight: 700;
}

.gvManage
{
    color: #000;
}
.gvManageAnc
{
    color: #103e8e;
    font-weight: 700;
    text-decoration: underline;
}
.editgvmanage
{
    color: #103e8e;
    font-weight: 700;
    text-decoration: underline;
}

.createFeed
{
    color: #103e8e;
    text-decoration: underline;
    font-size: 10px;
    float: right;
}


/* Popup*/


.jqlightbox
{
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 9999;
    width: 800px;
    height: 450px;
    margin: -200px 0 0 -250px;
   
    text-align: left;
}

.jqlightboxCenter
{
    position: absolute;
    top: 32%;
    left: 73%;
    z-index: 9999;
    width: 800px;
    height: 450px;
    margin: -200px 0 0 -250px;
   
    text-align: left;
}

.jqoverlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: #444;
    -moz-opacity: 0.4;
    opacity: .40;
    filter: alpha(opacity=40);
}
/* RSS FEED READER*/

/* Quick Links Popup */
#popitmenu{
position: absolute;
background-color: white;
border:1px solid #D4D4D4;
font: normal 10px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
background-color: white;
color: #D4D4D4;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #E4E6E9;
}
/* End Quick Links Popup*/

/* Modal Popup */
.ModelPopup
{
position: absolute;
top: 30%;
left: 43%;
padding:0px;
z-index: 10001;
background-color:#F7F6F4;
}

.ModelPopupBG
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #cccccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=50) ;
opacity: 0.5;
z-index: 10000;
}
/* End Modal Popup */



========================================

UNDER .CS
---------

 [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> GetCountries(string prefixText)
    {
      DataTable dt = new DataTable();
        dt.Columns.Add("CountryName");
        DataRow dr = dt.NewRow();
        dr["CountryName"] = "India";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CountryName"] = "Pakistan";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CountryName"] = "America";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["CountryName"] = "Australia";


        dt.Rows.Add(dr);

      
    
       // dt = dv;

        List<string> CountryNames = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            if (dt.Rows[i][0].ToString().ToUpper().Trim().StartsWith(prefixText.ToUpper().Trim()))
                CountryNames.Add(dt.Rows[i][0].ToString());
        }

        return CountryNames;
    }



=============================================================================


UNDER .ASPX

=-------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ajax AutoCompleteExtender without Webservice</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">


</style>
</head>
<body>
<form id="form1" runat="server">




<div>



    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<asp:TextBox ID="txtCountry" CssClass="txtFieldAuto"  runat="server"></asp:TextBox>

    <cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
     TargetControlID="txtCountry" BehaviorID="AutoCompleteEx" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries">
       <Animations>
                                                    <OnShow>
                                                        <Sequence>
                                                            <%-- Make the completion list transparent and then show it --%>
                                                            <OpacityAction Opacity="0" />
                                                            <HideAction Visible="true" />
                                                           
                                                            <%--Cache the original size of the completion list the first time
                                                                the animation is played and then set it to zero --%>
                                                            <ScriptAction Script="
                                                                // Cache the size and setup the initial size
                                                                var behavior = $find('AutoCompleteEx');
                                                                if (!behavior._height) {
                                                                    var target = behavior.get_GetCountries();
                                                                    behavior._height = target.offsetHeight - 2;
                                                                    target.style.height = '0px';
                                                                }" />
                                                           
                                                            <%-- Expand from 0px to the appropriate size while fading in --%>
                                                            <Parallel Duration=".4">
                                                                <FadeIn />
                                                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                                                            </Parallel>
                                                        </Sequence>
                                                    </OnShow>
                                                    <OnHide>
                                                        <%-- Collapse down to 0px and fade out --%>
                                                        <Parallel Duration=".4">
                                                            <FadeOut />
                                                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                                                        </Parallel>
                                                    </OnHide>
                                                        </Animations>
    
     </cc1:AutoCompleteExtender>
    

</div>
</form>
</body>
</html>