<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->	<html><!--<![endif]-->

<!-- Specific Page Data -->
<!-- End of Data -->

<head>
    <meta charset="utf-8" />
    <title>Ecommerce Add Product HTML Template - Responsive Multipurpose Admin Templates | Vendroid</title>
    <meta name="keywords" content="HTML5 Template, CSS3, All Purpose Admin Template, Vendroid" />
    <meta name="description" content="Ecommerce Add Product - Responsive Admin HTML Template">
    <meta name="author" content="Venmond">
    
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    
    
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/ico/favicon.png">
    
    
    <!-- CSS -->
       
    <!-- Bootstrap & FontAwesome & Entypo CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]><link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
    <link href="css/font-entypo.css" rel="stylesheet" type="text/css">    

    <!-- Fonts CSS -->
    <link href="css/fonts.css"  rel="stylesheet" type="text/css">
               
    <!-- Plugin CSS -->
    <link href="plugins/jquery-ui/jquery-ui.custom.min.css" rel="stylesheet" type="text/css">    
    <link href="plugins/prettyPhoto-plugin/css/prettyPhoto.css" rel="stylesheet" type="text/css">
    <link href="plugins/isotope/css/isotope.css" rel="stylesheet" type="text/css">
    <link href="plugins/pnotify/css/jquery.pnotify.css" media="screen" rel="stylesheet" type="text/css">    
	<link href="plugins/google-code-prettify/prettify.css" rel="stylesheet" type="text/css"> 
   
         
    <link href="plugins/mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
    <link href="plugins/tagsInput/jquery.tagsinput.css" rel="stylesheet" type="text/css">
    <link href="plugins/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css">    
    <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css">    
    <link href="plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css">
    <link href="plugins/colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css">            

	<!-- Specific CSS -->
	<link href="plugins/dataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"><link href="plugins/dataTables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"><link href="plugins/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet" type="text/css"><link href="plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" type="text/css">    
     
    <!-- Theme CSS -->
    <link href="css/theme.min.css" rel="stylesheet" type="text/css">
    <!--[if IE]> <link href="css/ie.css" rel="stylesheet" > <![endif]-->
    <link href="css/chrome.css" rel="stylesheet" type="text/chrome"> <!-- chrome only css -->    


        
    <!-- Responsive CSS -->
        	<link href="css/theme-responsive.min.css" rel="stylesheet" type="text/css"> 

	  
 
 
    <!-- for specific page in style css -->
    		<style>
	
						.form-wizard .nav > li > a{padding: 10px; margin-right:0; text-align: left; color:#888888;}
                        .tab-right{margin-left:-30px; margin-top:-1px; }
						.tab-right .panel {margin-right:-30px;}
						.tab-right .vd_panel-menu {right: 28px; top: -15px;}	
						.tab-right h3{border-bottom:1px solid #EEEEEE;}	
						table .vd_radio label:after{top:0;}		 
	 
	 	
		</style>
	    
    <!-- for specific page responsive in style css -->
    		<style>
	
						@media (max-width: 767px) {
							.tab-right{margin-left:0; margin-top:0;}
							.tab-right .panel{margin-right: 0;}

						}	
		
		</style>
	    
    
    <!-- Custom CSS -->
    <link href="custom/custom.css" rel="stylesheet" type="text/css">



    <!-- Head SCRIPTS -->
    <script type="text/javascript" src="js/modernizr.js"></script> 
    <script type="text/javascript" src="js/mobile-detect.min.js"></script> 
    <script type="text/javascript" src="js/mobile-detect-modernizr.js"></script> 
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type="text/javascript" src="js/html5shiv.js"></script>
      <script type="text/javascript" src="js/respond.min.js"></script>     
    <![endif]-->
    
</head>    

<body id="pages" class="full-layout  nav-right-hide nav-right-start-hide  nav-top-fixed      responsive    clearfix" data-active="pages "  data-smooth-scrolling="1">     
<div class="vd_body">
<!-- Header Start -->
  <header class="header-1" id="header">
      <div class="vd_top-menu-wrapper">
        <div class="container ">
          <div class="vd_top-nav vd_nav-width  ">
          <div class="vd_panel-header">
          	<div class="logo">
            	<a href="index.html"><img alt="logo" src="img/logo.png"></a>
            </div>
            <!-- logo -->
            <div class="vd_panel-menu  hidden-sm hidden-xs" data-intro="<strong>Minimize Left Navigation</strong><br/>Toggle navigation size to medium or small size. You can set both button or one button only. See full option at documentation." data-step=1>
            		                	<span class="nav-medium-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Medium Nav Toggle" data-action="nav-left-medium">
	                    <i class="fa fa-bars"></i>
                    </span>
                                		                    
                	<span class="nav-small-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Small Nav Toggle" data-action="nav-left-small">
	                    <i class="fa fa-ellipsis-v"></i>
                    </span> 
                                       
            </div>
            <div class="vd_panel-menu left-pos visible-sm visible-xs">
                                 
                        <span class="menu" data-action="toggle-navbar-left">
                            <i class="fa fa-ellipsis-v"></i>
                        </span>  
                            
                              
            </div>
            <div class="vd_panel-menu visible-sm visible-xs">
                	<span class="menu visible-xs" data-action="submenu">
	                    <i class="fa fa-bars"></i>
                    </span>        
                          
                        <span class="menu visible-sm visible-xs" data-action="toggle-navbar-right">
                            <i class="fa fa-comments"></i>
                        </span>                   
                   	 
            </div>                                     
            <!-- vd_panel-menu -->
          </div>
          <!-- vd_panel-header -->
            
          </div>    
          <div class="vd_container">
          	<div class="row">
            	<div class="col-sm-5 col-xs-12">
            		
<div class="vd_menu-search">
  <form id="search-box" method="post" action="#">
    <input type="text" name="search" class="vd_menu-search-text width-60" placeholder="Search">
    <div class="vd_menu-search-category"> <span data-action="click-trigger"> <span class="separator"></span> <span class="text">Category</span> <span class="icon"> <i class="fa fa-caret-down"></i></span> </span>
      <div class="vd_mega-menu-content width-xs-2 center-xs-2 right-sm" data-action="click-target">
        <div class="child-menu">
          <div class="content-list content-menu content">
            <ul class="list-wrapper">
              <li>
                <label>
                  <input type="checkbox" value="all-files">
                  <span>All Files</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox" value="photos">
                  <span>Photos</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox" value="illustrations">
                  <span>Illustrations</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox" value="video">
                  <span>Video</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox" value="audio">
                  <span>Audio</span></label>
              </li>
              <li>
                <label>
                  <input type="checkbox" value="flash">
                  <span>Flash</span></label>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <span class="vd_menu-search-submit"><i class="fa fa-search"></i> </span>
  </form>
</div>
                </div>
                <div class="col-sm-7 col-xs-12">
              		<div class="vd_mega-menu-wrapper">
                    	<div class="vd_mega-menu pull-right">
            				<ul class="mega-ul">
    <li id="top-menu-1" class="one-icon mega-li"> 
      <a href="index.html" class="mega-link" data-action="click-trigger">
    	<span class="mega-icon"><i class="fa fa-users"></i></span> 
		<span class="badge vd_bg-red">1</span>        
      </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 right-xs left-sm" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Friend Requests
               <div class="vd_panel-menu">
                     <span data-original-title="Find User" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-search"></i>
                    </span>                 
                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-grid column-xs-2 column-sm-3 height-xs-4">	
           <div data-rel="scroll">
               <ul class="list-wrapper">
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                         </a>
                        <div class="menu-text"> Gabriella Montagna
                            <div class="menu-info">
                                <div class="menu-date">San Diego</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                                                                   
                                </div>                                
                            </div>
                        </div> 
                     </li>
                    <li class="warning"> 
                    		<a href="#"> 
                    			<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  
                            </a>                            
                            <div class="menu-text">  Jonathan Fuzzy
                            	<div class="menu-info">
                                    <div class="menu-date">Seattle</div>                                                                         
                                    <div class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-check"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-times"></i>
                                        </span>                                                                            
                                    </div>                                
                            	</div>                            
                            </div> 
                     </li>    
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                         </a>    
                        <div class="menu-text">  Sakura Hinata
                            <div class="menu-info">
                                <div class="menu-date">Hawaii</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                             
                                </div>                                
                            </div>                                                     
                        </div> 
                    </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 
                         </a>    
                        <div class="menu-text">  Rikudou Sennin
                            <div class="menu-info">
                                <div class="menu-date">Las Vegas</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                              
                                </div>                                
                            </div>                                                        
                        </div> 
                    </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  
                         </a>   
                        <div class="menu-text">  Kim Kardiosun
                            <div class="menu-info">
                                <div class="menu-date">New York</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                              
                                </div>                                
                            </div>                                                          
                        </div> 
                     </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div>
                         </a>    
                        <div class="menu-text">   Brad Pita
                            <div class="menu-info">
                                <div class="menu-date">Seattle</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                              
                                </div>                                
                            </div>                             
                        </div> 
                    </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 
                         </a>   
                        <div class="menu-text">  Celline Dior
                            <div class="menu-info">
                                <div class="menu-date">Los Angeles</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                             
                                </div>                                
                            </div>                              
                        </div> 
                    </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div>
                         </a>    
                        <div class="menu-text">  Goerge Bruno Marz
                            <div class="menu-info">
                                <div class="menu-date">Las Vegas</div>                                                                         
                                <div class="menu-action">
                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-check"></i>
                                    </span> 
                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">
                                        <i class="fa fa-times"></i>
                                    </span>                                                                              
                                </div>                                
                            </div>                              
                        </div> 
                    </li>                                                                                
                    
               </ul>
               </div>
               <div class="closing text-center" style="">
               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>
    <li id="top-menu-2" class="one-icon mega-li"> 
      <a href="index.html" class="mega-link" data-action="click-trigger">
    	<span class="mega-icon"><i class="fa fa-envelope"></i></span> 
		<span class="badge vd_bg-red">10</span>        
      </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 width-lg-4 right-xs left-sm" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Messages
               <div class="vd_panel-menu">
                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-list content-image">
           	   <div  data-rel="scroll">	
               <ul class="list-wrapper pd-lr-10">
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text"> Do you play or follow any sports?
                            	<div class="menu-info">
                                    <span class="menu-date">12 Minutes Ago </span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>
                            </div> 
                    </li>
                    <li class="warning"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  
                            <div class="menu-text">  Good job mate !
                            	<div class="menu-info">
                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Read" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye-slash"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                            
                            </div> 
                     </li>    
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                            <div class="menu-text">  Just calm down babe, everything will work out.
                            	<div class="menu-info">
                                    <span class="menu-date">12 Days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                     
                            </div> 
                    </li>                                     
                    <li>
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 
                            <div class="menu-text">  Euuh so gross....
                            	<div class="menu-info">
                                    <span class="menu-date">19 Days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                        
                            </div> 
                    </li> 
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  
                            <div class="menu-text">  That's the way.. I like it :D
                            	<div class="menu-info">
                                    <span class="menu-date">20 Days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                          
                            </div> 
                     </li>
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div> 
                            <div class="menu-text">  Oooh don't be shy ;P
                            	<div class="menu-info">
                                    <span class="menu-date">21 Days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                             
                            </div> 
                     </li>                                     
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 
                            <div class="menu-text">  Hello, please call my number..
                            	<div class="menu-info">
                                    <span class="menu-date">24 Days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                              
                            </div> 
                    </li> 
                    <li> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div> 
                            <div class="menu-text">  Don't go anywhere, i will be coming soon
                            	<div class="menu-info">
                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-eye"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                              
                            </div> 
                     </li>                                                                                
                    
               </ul>
               </div>
               <div class="closing text-center" style="">
               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>  
    <li id="top-menu-3"  class="one-icon mega-li"> 
      <a href="index.html" class="mega-link" data-action="click-trigger">
    	<span class="mega-icon"><i class="fa fa-globe"></i></span> 
		<span class="badge vd_bg-red">51</span>        
      </a>
      <div class="vd_mega-menu-content  width-xs-3 width-sm-4  center-xs-3 left-sm" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           		Notifications 
               <div class="vd_panel-menu">
                     <span data-original-title="Notification Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                   
<!--                     <span class="text-menu" data-original-title="Settings" data-toggle="tooltip" data-placement="bottom">
                        Settings
                    </span> -->                                                              
                </div>
           </div>                 
		   <div class="content-list">	
           	   <div  data-rel="scroll">	
               <ul  class="list-wrapper pd-lr-10">
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_yellow"><i class="fa fa-suitcase"></i></div> 
                            <div class="menu-text"> Someone has give you a surprise 
                            	<div class="menu-info"><span class="menu-date">12 Minutes Ago</span></div>
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_blue"><i class=" fa fa-user"></i></div> 
                            <div class="menu-text">  Change your user profile details
                            	<div class="menu-info"><span class="menu-date">1 Hour 20 Minutes Ago</span></div>
                            </div> 
                    </a> </li>    
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 
                            <div class="menu-text">  Your setting is updated
                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 
                            <div class="menu-text">  Added new article
                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Change Profile Pic
                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 
                            <div class="menu-text">  Your setting is updated
                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 
                            <div class="menu-text">  Added new article
                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Change Profile Pic
                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              
                            </div> 
                    </a> </li>                                                                                
                    
               </ul>
               </div>
               <div class="closing text-center" style="">
               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content -->         
    </li>  
     
    <li id="top-menu-profile" class="profile mega-li"> 
        <a href="#" class="mega-link"  data-action="click-trigger"> 
            <span  class="mega-image">
                <img src="img/avatar/avatar.jpg" alt="example image" />               
            </span>
            <span class="mega-name">
                Caroline <i class="fa fa-caret-down fa-fw"></i> 
            </span>
        </a> 
      <div class="vd_mega-menu-content  width-xs-2  left-xs left-sm" data-action="click-target">
        <div class="child-menu"> 
        	<div class="content-list content-menu">
                <ul class="list-wrapper pd-lr-10">
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-user"></i></div> <div class="menu-text">Edit Profile</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-trophy"></i></div> <div class="menu-text">My Achievements</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-envelope"></i></div> <div class="menu-text">Messages</div><div class="menu-badge"><div class="badge vd_bg-red">10</div></div> </a>  </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-tasks
"></i></div> <div class="menu-text"> Tasks</div><div class="menu-badge"><div class="badge vd_bg-red">5</div></div> </a> </li> 
                    <li class="line"></li>                
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-lock
"></i></div> <div class="menu-text">Privacy</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-cogs"></i></div> <div class="menu-text">Settings</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class="  fa fa-key"></i></div> <div class="menu-text">Lock</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-sign-out"></i></div>  <div class="menu-text">Sign Out</div> </a> </li>
                    <li class="line"></li>                
                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-question-circle"></i></div> <div class="menu-text">Help</div> </a> </li>
                    <li> <a href="#"> <div class="menu-icon"><i class=" glyphicon glyphicon-bullhorn"></i></div> <div class="menu-text">Report a Problem</div> </a> </li>              
                </ul>
            </div> 
        </div> 
      </div>     
  
    </li>               
       
    <li id="top-menu-settings" class="one-big-icon hidden-xs hidden-sm mega-li" data-intro="<strong>Toggle Right Navigation </strong><br/>On smaller device such as tablet or phone you can click on the middle content to close the right or left navigation." data-step=2 data-position="left"> 
    	<a href="#" class="mega-link"  data-action="toggle-navbar-right"> 
           <span class="mega-icon">
                <i class="fa fa-comments"></i> 
            </span> 
<!--            <span  class="mega-image">
                <img src="img/avatar/avatar.jpg" alt="example image" />               
            </span> -->           
			<span class="badge vd_bg-red">8</span>               
        </a>              
       
    </li>
	</ul>
<!-- Head menu search form ends -->                         
                        </div>
                    </div>
                </div>

            </div>
          </div>
        </div>
        <!-- container --> 
      </div>
      <!-- vd_primary-menu-wrapper --> 

  </header>
  <!-- Header Ends --> 
<div class="content">
  <div class="container">
    <div class="vd_navbar vd_nav-width vd_navbar-tabs-menu vd_navbar-left  ">
	<div class="navbar-tabs-menu clearfix">
			<span class="expand-menu" data-action="expand-navbar-tabs-menu">
            	<span class="menu-icon menu-icon-left">
            		<i class="fa fa-ellipsis-h"></i>
                    <span class="badge vd_bg-red">
                        20
                    </span>                    
                </span>
            	<span class="menu-icon menu-icon-right">
            		<i class="fa fa-ellipsis-h"></i>
                    <span class="badge vd_bg-red">
                        20
                    </span>                    
                </span>                
            </span>
            <div class="menu-container">
            	<div class="vd_mega-menu-wrapper">
                	<div class="vd_mega-menu"  data-intro="<strong>Tabs Menu</strong><br/>Can be placed for dropdown menu, tabs, or user profile. Responsive for medium and small size navigation." data-step=3>
        				<ul class="mega-ul">
    <li id="home" class="one-icon mega-li"> 
      <a class="mega-link  vd_bg-blue" href="javascript:void(0);"  data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-cloud"></i>
            </span>
            <span class="badge vd_bg-red">
                10
            </span>
      </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-5 width-md-6   right-xs " data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Server Status
               <div class="vd_panel-menu">
                     <span data-original-title="Find Server" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-search"></i>
                    </span>                 
                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-grid column-md-3 column-sm-2 column-xs-1 height-xs-auto height-sm-4">	
           <div data-rel="scroll">
               <ul class="list-wrapper">
                    <li><a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-green badge">Online</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li> <a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li> <a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li><a> 
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>                                                                                                                         
                    
               </ul>
               </div> <!-- data-rel="scroll" -->
               <div class="closing text-center" style="">
               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>
    <li id="tabs-menu-tasks" class="one-icon mega-li"> 
        <a class="mega-link  vd_bg-green" href="javascript:void(0);"   data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-tasks"></i>
            </span>
            <span class="badge vd_bg-red">
                8
            </span>
        </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 right-xs" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   You have 8 pending tasks
               <div class="vd_panel-menu">
                     <span data-original-title="Task Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-list content-image">	
           <div data-rel="scroll">
               <ul class="list-wrapper pd-lr-10">
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 
                            <div class="menu-text"> Electricity Problem
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:85%" class="progress-bar progress-bar-info"> 
                                        	85%
                                        </div>
                                    </div>                                                                                                    
                            	</div>
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_yellow"><i class="fa fa-code"></i></div>  
                            <div class="menu-text">  Finish coding jquery plugin
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 
                                        	20%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>    
                    <li> <a> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                            <div class="menu-text"> Client: Zoe Project
                            	<div class="menu-info">
                                    <span class="menu-date">Make a call</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-phone"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><i class=" fa fa-magic"></i></div>  
                            <div class="menu-text">  Final error check on new templates
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:95%" class="progress-bar progress-bar-success"> 
                                        	95%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><i class=" fa fa-camera"></i></div>  
                            <div class="menu-text">  Update product image
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:50%" class="progress-bar progress-bar-warning"> 
                                        	50%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 
                            <div class="menu-text"> Electricity Problem
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:85%" class="progress-bar progress-bar-info"> 
                                        	85%
                                        </div>
                                    </div>                                                                                                    
                            	</div>
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_yellow"><i class=" fa fa-code"></i></div>  
                            <div class="menu-text">  Finish coding jquery plugin
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 
                                        	20%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>    
                    <li> <a> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                            <div class="menu-text"> Client: Zoe Project
                            	<div class="menu-info">
                                    <span class="menu-date">Make a call</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-phone"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                                                                                                                       
                    
               </ul>
               </div>
               <div class="closing text-center" style="">
               		<a href="#">See All Tasks <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>  
    <li id="test-2" class="one-icon mega-li"> 
        <a class="mega-link vd_bg-yellow " href="javascript:void(0);" data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-pencil"></i>
            </span>
        </a>     
         <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 center-xs-3 right-sm pd-0" data-action="click-target">
            <div class="child-menu">  

                	<textarea class="no-bd" rows="3" placeholder="What are you doing?" ></textarea>
                    <div class="vd_textarea-menu vd_bg-yellow vd_bd-yellow" >
                    	<ul class="nav nav-pills ">
                        <li class="one-icon">
                            <a data-toggle="tab-post" href="javascript:void(0);">
                                <span class="menu-icon">
                                    <i class="fa fa-user fa-fw"></i>
                                </span>
                            </a>
                        </li>
                        <li class="one-icon">
                            <a data-toggle="tab-post" href="javascript:void(0);">
                                <span class="menu-icon">
                                    <i class="fa fa-camera fa-fw"></i>
                                </span>
                            </a>
                        </li>   
                        <li class="one-icon">
                            <a data-toggle="tab-post" href="javascript:void(0);">
                                <span class="menu-icon">
                                    <i class="fa fa-smile-o fa-fw"></i>
                                </span>
                            </a>
                        </li>  
                        <li class="pull-right">
                            <a data-toggle="tab-post" href="javascript:void(0);" style="border-left:1px solid rgba(255,255,255,.3)">
                                <span class="menu-icon">
                                    <i class="fa fa-check fa-fw"></i>
                                </span>                             
                                <span class="menu-text">
                                	Post
                                </span>                              
                            </a>
                        </li>  
                                                                    
                        </ul>

                </div>
                                          
            </div> <!-- child-menu -->                      
          </div>   <!-- vd_mega-menu-content -->                               
         
    </li>  
    <li id="test" class="one-icon mega-li"> 
        <a class="mega-link vd_bg-red" href="javascript:void(0);" data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-plus"></i>
            </span>
        </a>
        <div class="vd_mega-menu-content  width-xs-2  center-xs-2" data-action="click-target" >
                <div class="child-menu"> 
                    <div class="content-list content-menu">
                        <ul class="list-wrapper pd-lr-10">
                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-user"></i></span> <span class="menu-text">Write Article</span> </a> </li>
                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-trophy"></i></span> <span class="menu-text">Write News</span> </a> </li>
                            <li> <a href="#"> <span class="menu-icon"><i class=" fa fa-flask"></i></span> <span class="menu-text">Add Product</span> </a>  </li>
                                       
                        </ul>
                    </div> 
                </div> 
           </div>   <!-- vd_mega-menu-content  -->      
    </li>      
</ul>                        	
                    </div>                
                </div>
            </div>                                                   
    </div>
	<div class="navbar-menu clearfix">
        <div class="vd_panel-menu hidden-xs">
            <span data-original-title="Expand All" data-toggle="tooltip" data-placement="bottom" data-action="expand-all" class="menu" data-intro="<strong>Expand Button</strong><br/>To expand all menu on left navigation menu." data-step=4 >
                <i class="fa fa-sort-amount-asc"></i>
            </span>                   
        </div>
    	<h3 class="menu-title hide-nav-medium hide-nav-small">UI Features</h3>
        <div class="vd_menu">
        	 <ul>
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-dashboard"></i></span> 
            <span class="menu-text">Dashboard</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="index.html">
                        <span class="menu-text">Default Dashboard</span>  
                    </a>
                </li>              
                <li>
                    <a href="index-ecommerce.html">
                        <span class="menu-text">E-Commerce Dashboard</span>  
                    </a>
                </li> 
                <li>
                    <a href="index-analytics.html">
                        <span class="menu-text">Analytics Dashboard</span>  
                    </a>
                </li> 
                <li>
                    <a href="index-blogging.html">
                        <span class="menu-text">Blogging Dashboard</span>  
                    </a>
                </li>  
                <li>
                    <a href="index-event-management.html">
                        <span class="menu-text">Event Management Dashboard</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>
                    </a>
                </li>                                                                                                  
            </ul>   
      	</div>
    </li>  
 	<li>
    	<a href="templates/email.html">
        	<span class="menu-icon"><i class="fa fa-envelope"></i></span> 
            <span class="menu-text">Email</span>  
            <span class="menu-badge"><span class="badge vd_bg-red">78</span></span>
       	</a> 
    </li>       
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="icon-palette"> </i></span> 
            <span class="menu-text">Skin Playground</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>  
                <li>
                    <a href="skin-clean-minimalist.html">
                        <span class="menu-text">Clean Minimalist Nav</span>  
                    </a>
                </li> 
                <li>
                    <a href="skin-nav-medium-profile-dark.html">
                        <span class="menu-text">Dark Medium Navbar</span>  
						<span class="menu-badge"><span class="badge vd_bg-red">Hot</span></span>                                    
                    </a>
                </li>                                                                                               
            </ul>   
      	</div>
    </li> 
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon entypo-icon"><i class="icon-bookmark"> </i></span> 
            <span class="menu-text">Starting Layouts</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>  
                <li>
                    <a href="layouts-simple.html">
                        <span class="menu-text">Layout Simple</span>  
                    </a>
                </li> 
                <li>
                    <a href="layouts-simple-medium-profile.html">
                        <span class="menu-text">Layout Simple Medium Profile</span>                                      
                    </a>
                </li>                                
                <li>
                    <a href="layouts-double-sidenav.html">
                        <span class="menu-text">Layout Double SideNav</span>                                      
                    </a>
                </li> 
                <li>
                    <a href="layouts-hide-rightnav.html">
                        <span class="menu-text">Layout Hide RightNav</span>  
                    </a>
                </li>
                <li>
                    <a href="layouts-medium-no-header.html">
                        <span class="menu-text">Layout Medium No Header</span>                                      
                    </a>
                </li>                
                <li>
                    <a href="layouts-right-nav.html">
                        <span class="menu-text">Layout RightNav</span>  
                    </a>
                </li>  
                <li>
                    <a href="layouts-menu-tab.html">
                        <span class="menu-text">Layout Menu Tab</span>  
                    </a>
                </li>   
                <li>
                    <a href="layouts-without-subtitle.html">
                        <span class="menu-text">Layout Without Subtitle</span>  
                    </a>
                </li>                
                <li>
                    <a href="layouts-middle.html">
                        <span class="menu-text">Layout Middle</span>  
                    </a>
                </li>                
                <li>
                    <a href="layouts-boxed.html">
                        <span class="menu-text">Layout Boxed</span>  
                    </a>
                </li> 
                <li>
                    <a href="layouts-full-no-responsive.html">
                        <span class="menu-text">Layout Full No Responsive</span>  
                    </a>
                </li>
                <li>
                    <a href="layouts-middle-no-responsive.html">
                        <span class="menu-text">Layout Middle No Responsive</span>  
                    </a>
                </li>
                <li>
                    <a href="layouts-boxed-no-responsive.html">
                    	<span class="menu-text">Boxed No Responsive</span>  
                    </a>
                </li> 
                <li>
                    <a href="layouts-boxed-custom-width-no-responsive.html">
                    	<span class="menu-text">Boxed Custom Width No Responsive</span>  
                    </a>
                </li>                                               
                <li>
                    <a href="layouts-fixed-nav.html">
                        <span class="menu-text">Layout Fixed Nav</span>  
                    </a>
                </li>
                <li>
                    <a href="layouts-no-header-fixed-nav.html">
                        <span class="menu-text">No Header Fixed Nav</span>  
                    </a>
                </li>                                                                                                                                                                                                               
            </ul>   
      	</div>
    </li>               
    <li>
    	<a href="javascript:void(0);"   data-action="click-trigger">
            <span class="menu-icon"><i class="fa fa-sitemap"> </i></span>
            <span class="menu-text">Nav Variations</span>
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>            
        </a>
      	<div class="child-menu"   data-action="click-target">
            <ul class="clearfix">
                <li> 
                	<a href="javascript:" data-action="click-trigger"> 
                    	<span class="menu-text">Side Navigation</span> 
            			<span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
                    </a> 
                    <div class="child-menu"   data-action="click-target">
                        <ul class="clearfix">
                            <li> <a href="nav-side-large-menu-tab.html"> 
                            		<span class="menu-text">Large Menu Tab</span> 
                                 </a>   
                            </li>
                            <li> <a href="nav-side-large-tabs-tab.html"> 
                            		<span class="menu-text">Large Tabs Tab</span> 
                                 </a>   
                            </li>
                            <li> <a href="nav-side-large-profile-tab.html"> 
                            		<span class="menu-text">Large Profile Tab</span> 
                                 </a>   
                            </li>
                            <li> <a href="nav-side-large-no-tab.html"> 
                            		<span class="menu-text">Large No Tab</span> 
                                 </a>   
                            </li> 
                            <li> <a href="nav-side-large-chat-content.html"> 
                            		<span class="menu-text">Large Chat Content</span> 
                                 </a>   
                            </li>
                            <li> <a href="nav-side-large-email.html"> 
                            		<span class="menu-text">Large Email</span> 
                                 </a>   
                            </li>                                                                                   
                            <li> <a href="nav-side-medium-menu-tab.html"> 
                            		<span class="menu-text">Medium Menu Tab </span>
                                 </a>                                     
                            </li>                            
                            <li> <a href="nav-side-medium-tabs-tab.html"> 
                            		<span class="menu-text">Medium Tabs Tab</span>
                                 </a>                                     
                            </li>
                            <li> <a href="nav-side-medium-profile-tab.html"> 
                            		<span class="menu-text">Medium Profile Tab </span>
									<span class="menu-badge"><span class="badge vd_bg-red">HOT</span></span>     
                                 </a> 
                            </li>
                            <li> <a href="nav-side-medium-no-tab.html"> 
                            		<span class="menu-text">Medium No Tab </span>  
                                 </a> 
                            </li>                            
                            <li> <a href="nav-side-small-menu-tab.html"> 
                            		<span class="menu-text">Small Menu Tab</span>
                             	  </a> 
                            </li>
                            <li> <a href="nav-side-small-tabs-tab.html"> 
                            		<span class="menu-text">Small Tabs Tab</span>
                             	 </a> 
                            </li>
                            <li> <a href="nav-side-small-profile-tab.html"> 
                            		<span class="menu-text">Small Profile Tab</span>
                            	</a> 
                            </li>
                            <li> <a href="nav-side-small-no-tab.html"> 
                            		<span class="menu-text">Small No Tab</span>
                            	</a> 
                            </li>                            
                        </ul>
                    </div>               
                </li>
                <li> 
                	<a href="javascript:" data-action="click-trigger"> 
                    	<span class="menu-text">Top Navigation</span> 
            			<span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
                    </a> 
                    <div class="child-menu"   data-action="click-target">
                        <ul class="clearfix">
                            <li> <a href="nav-top-search.html">Search </a> </li>
                            <li> <a href="nav-top-menu.html">Mega Menu </a> </li>
                            <li> <a href="nav-top-clean-style.html"> Clean Style </a> </li>                            
                        </ul>
                    </div>              
                </li>
                <li> 
                	<a href="javascript:" data-action="click-trigger"> 
                    	<span class="menu-text">Bottom Navigation</span> 
            			<span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
                    </a> 
                    <div class="child-menu"   data-action="click-target">
                        <ul class="clearfix">
                            <li> <a href="nav-bottom-widget.html"> Chat Widget </a> </li>
                            <li> <a href="nav-bottom-clean-menu.html"> Clean With Menu </a> </li>
                            <li> <a href="nav-bottom-clean-center.html"> Clean Center Text </a> </li>
                        </ul>
                    </div>               
                </li>                                 
            </ul>
      	</div>
    </li>
    <li>
    	<a href="templates/functions-index.html">
        	<span class="menu-icon"><i class="fa fa-code"></i></span> 
            <span class="menu-text">Custom Functions</span>  
            <span class="menu-badge"><span class="badge vd_bg-yellow"><i class="fa fa-star"></i></span></span>
       	</a>
    </li>    
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-th-list"></i></span> 
            <span class="menu-text">Forms</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="templates/forms-elements.html">
                        <span class="menu-text">Form Elements</span>  
                    </a>
                </li>              
                <li>
                    <a href="templates/forms-layouts.html">
                        <span class="menu-text">Form Layouts</span>  
                    </a>
                </li>                
                <li>
                    <a href="templates/forms-wizard.html">
                        <span class="menu-text">Form Wizard</span>  
                    </a>
                </li> 
                <li>
                    <a href="templates/forms-validation.html">
                        <span class="menu-text">Form Validation</span>  
                    </a>
                </li>                   
                <li>
                    <a href="templates/forms-sliders.html">
                        <span class="menu-text">Form Slider</span>  
                    </a>
                </li>                 
                <li>
                    <a href="templates/forms-multiple-file-upload.html">
                        <span class="menu-text">Form Multiple File Upload</span>  
                    </a>
                </li>                                                                                      
                <li>
                    <a href="templates/forms-inline-editing.html">
                        <span class="menu-text">Form Inline Editing</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>
                    </a>
                </li>                 
            </ul>   
      	</div>
    </li>  
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon entypo-icon"><i class="icon-tools"></i></span> 
            <span class="menu-text">UI Elements</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="ui-panels.html">
                        <span class="menu-text">Panels</span>  
                    </a>
                </li>    
                <li>
                    <a href="ui-panels-draggable.html">
                        <span class="menu-text">Panels Draggable</span>  
                    </a>
                </li>                              
                <li>
                    <a href="ui-buttons.html">
                        <span class="menu-text">Buttons</span>  
                    </a>
                </li>                
                <li>
                    <a href="ui-typography.html">
                        <span class="menu-text">Typography</span>  
                    </a>
                </li> 
                <li>
                    <a href="ui-icons.html">
                        <span class="menu-text">Icons</span>  
                    </a>
                </li>  
                <li>
                    <a href="ui-tabs-accordion.html">
                        <span class="menu-text">Tabs and Accordion</span>  
                    </a>
                </li>
                <li>
                    <a href="ui-alert-notifications.html">
                        <span class="menu-text">Alert and Notifications</span>  
                    </a>
                </li>                
                <li>
                    <a href="ui-pricing-tables.html">
                        <span class="menu-text">Pricing Tables</span>  
                    </a>
                </li>                                                                                                                                                                              
            </ul>   
      	</div>
    </li>        
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-table"></i></span> 
            <span class="menu-text">List &amp; Tables</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="listtables-tables-variation.html">
                        <span class="menu-text">Tables Variation</span>  
                    </a>
                </li>              
                <li>
                    <a href="listtables-data-tables.html">
                        <span class="menu-text">Data Tables</span>  
                    </a>
                </li> 
                <li>
                    <a href="listtables-small-list.html">
                        <span class="menu-text">Small List</span>  
                    </a>
                </li>
                <li>
                    <a href="listtables-medium-list.html">
                        <span class="menu-text">Medium List</span>  
                    </a>
                </li>   
                <li>
                    <a href="listtables-blog-small-list.html">
                        <span class="menu-text">Blog Small List</span>  
                    </a>
                </li>
                <li>
                    <a href="listtables-blog-large-list.html">
                        <span class="menu-text">Blog Large List</span>  
                    </a>
                </li>                
                <li>
                    <a href="listtables-grid-list.html">
                        <span class="menu-text">Grid List</span>  
                    </a>
                </li>                                                                                                                                                
            </ul>   
      	</div>
    </li>
        <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-signal"></i></span> 
            <span class="menu-text">Charts</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="templates/charts-morris.html">
                        <span class="menu-text">Morris Chart</span>  
                    </a>
                </li>              
                <li>
                    <a href="templates/charts-flot.html">
                        <span class="menu-text">Flot Chart</span>  
                    </a>                
                </li>                                                                                 
                <li>
                    <a href="templates/charts-sparkline.html">
                        <span class="menu-text">Sparkline Chart</span>  
                    </a>
                </li>                 
            </ul>   
      	</div>
    </li>
        <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-map-marker"></i></span> 
            <span class="menu-text">Maps</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="maps-vector.html">
                        <span class="menu-text">Vector Map</span>  
                    </a>
                </li>              
                <li>
                    <a href="maps-google.html">
                        <span class="menu-text">Google Map</span>  
                    </a>                
                </li>                                                                                                 
            </ul>   
      	</div>
    </li> 
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-picture-o"></i></span> 
            <span class="menu-text">Gallery</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="templates/gallery-page.html">
                        <span class="menu-text">Gallery Page</span>  
                    </a>
                </li>   
                <li>
                    <a href="templates/gallery-masonry.html">
                        <span class="menu-text">Gallery Masonry</span>  
                    </a>
                </li>      
                <li>
                    <a href="templates/gallery-text-filter.html">
                        <span class="menu-text">Gallery Text Filter</span>  
                        <span class="menu-badge"><span class="badge vd_bg-red">HOT</span></span>                           
                    </a>
                </li>                                    
            </ul>   
      	</div>
    </li>         
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon entypo-icon"><i class="icon-newspaper"></i></span> 
            <span class="menu-text">Extra Pages</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="pages-custom-product.html">
                        <span class="menu-text">Custom Product Form</span>
                        <span class="menu-badge"><span class="badge vd_bg-red">HOT</span></span>     
                    </a>
                </li> 
                <li>
                    <a href="pages-essay.html">
                        <span class="menu-text">Essay Form</span>  
                    </a>
                </li> 
                <li>
                    <a href="pages-invoice.html">
                        <span class="menu-text">Invoice</span>  
                    </a>
                </li>                 
                <li>
                    <a href="pages-user-profile-form.html">
                        <span class="menu-text">User Profiles Form</span>  
                    </a>
                </li>  
                <li>
                    <a href="pages-user-profile.html">
                        <span class="menu-text">User Profiles Page</span>  
                    </a>
                </li>  
                <li>
                    <a href="pages-timeline.html">
                        <span class="menu-text">Timeline</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>                        
                    </a>
                </li>  
                <li>
                    <a href="pages-calendar.html">
                        <span class="menu-text">Calendar</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>                        
                    </a>
                </li>    
                <li>
                    <a href="pages-ecommerce-products.html">
                        <span class="menu-text">Ecommerce Products List</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>                        
                    </a>
                </li>  
                <li>
                    <a href="pages-ecommerce-product-add.html">
                        <span class="menu-text">Ecommerce Product add</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>                        
                    </a>
                </li>                                                                                                                                                      
                <li>
                    <a href="pages-login.html">
                        <span class="menu-text">Login Page</span>  
                    </a>
                </li>
                <li>
                    <a href="pages-forget-password.html">
                        <span class="menu-text">Forget Password Page</span>  
                    </a>
                </li>                
                <li>
                    <a href="pages-register.html">
                        <span class="menu-text">Register Page</span>  
                    </a>
                </li>  
                <li>
                    <a href="pages-logout.html">
                        <span class="menu-text">Log Out Page</span>  
                    </a>
                </li> 
                <li>
                    <a href="pages-lockscreen.html">
                        <span class="menu-text">Lock Screen</span>  
                        <span class="menu-badge"><span class="badge vd_bg-yellow">NEW</span></span>                        
                    </a>
                </li>                                              
                <li>
                    <a href="pages-404-error.html">
                        <span class="menu-text">404 Error</span>  
                    </a>
                </li>
                <li>
                    <a href="pages-500-error.html">
                        <span class="menu-text">500 Error</span>  
                    </a>
                </li>
                                                                                                                              
            </ul>   
      	</div>
    </li>  
    <li>
    	<a href="javascript:void(0);" data-action="click-trigger">
        	<span class="menu-icon"><i class="fa fa-desktop"></i></span> 
            <span class="menu-text">Front End</span>  
            <span class="menu-badge"><span class="badge vd_bg-black-30"><i class="fa fa-angle-down"></i></span></span>            
       	</a>
     	<div class="child-menu"  data-action="click-target">
            <ul>
                <li>
                    <a href="templates/front-1.html">
                        <span class="menu-text">Flat Theme</span>  
                    </a>
                </li> 
                <li>
                    <a href="templates/front-2.html">
                        <span class="menu-text">Layer Slider</span>  
                    </a>
                </li>
                <li>
                    <a href="templates/front-blog.html">
                        <span class="menu-text">Front Blog</span>  
                    </a>
                </li>     
                <li>
                    <a href="templates/front-blog-content.html">
                        <span class="menu-text">Front Blog Content</span>  
                    </a>
                </li>                                                                                                                       
            </ul>   
      	</div>        
    </li>  
    <li>
    	<a href="http://themeforest.net/item/vendroid-super-flexible-multipurpose-admin-theme/7717536?ref=Venmond">
        	<span class="menu-icon"><i class="fa fa-shopping-cart"></i></span> 
            <span class="menu-text">Buy This Theme</span>  
            <span class="menu-badge"><span class="badge vd_bg-red"><i class="fa fa-exclamation"></i></span></span>
       	</a>
    </li>   
                 
</ul>
<!-- Head menu search form ends -->         </div>             
    </div>
    <div class="navbar-spacing clearfix">
    </div>
    <div class="vd_menu vd_navbar-bottom-widget">
        <ul>
            <li>
                <a href="pages-logout.html">
                    <span class="menu-icon"><i class="fa fa-sign-out"></i></span>          
                    <span class="menu-text">Logout</span>             
                </a>
                
            </li>
        </ul>
    </div>     
</div>    <div class="vd_navbar vd_nav-width vd_navbar-chat vd_bg-black-80 vd_navbar-right   ">
	<div class="navbar-tabs-menu clearfix">
			<span class="expand-menu" data-action="expand-navbar-tabs-menu">
            	<span class="menu-icon menu-icon-left">
            		<i class="fa fa-ellipsis-h"></i>
                    <span class="badge vd_bg-red">
                        20
                    </span>                    
                </span>
            	<span class="menu-icon menu-icon-right">
            		<i class="fa fa-ellipsis-h"></i>
                    <span class="badge vd_bg-red">
                        20
                    </span>                    
                </span>                
            </span>  
            <div class="menu-container">               
        		 <div class="navbar-search-wrapper">
    <div class="navbar-search vd_bg-black-30">
        <span class="append-icon"><i class="fa fa-search"></i></span>
        <input type="text" placeholder="Search" class="vd_menu-search-text no-bg no-bd vd_white width-70" name="search">
        <div class="pull-right search-config">                                
            <a  data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle" ><span class="prepend-icon vd_grey"><i class="fa fa-cog"></i></span></a>
            <ul role="menu" class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>                                    
        </div>
    </div>
</div>  
            </div>        
                                                 
    </div>
	<div class="navbar-menu clearfix">
    	<div class="content-list content-image content-chat">
            <ul class="list-wrapper no-bd-btm pd-lr-10">
                <li class="group-heading vd_bg-black-20">FAVORITE</li>
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar.jpg" alt="example image"></div> 
                            <div class="menu-text">Jessylin
                                <div class="menu-info">
                                    <span class="menu-date">Administrator </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                    </a>
                </li>
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-2.jpg" alt="example image"></div> 
                            <div class="menu-text">Rodney Mc.Cardo
                                <div class="menu-info">
                                    <span class="menu-date">Designer </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 
                    </a>
                </li>
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-3.jpg" alt="example image"></div> 
                            <div class="menu-text">Theresia Minoque
                                <div class="menu-info">
                                    <span class="menu-date">Engineering </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                    </a>
                </li>
                <li class="group-heading vd_bg-black-20">FRIENDS</li>                                                                                                                                 
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-4.jpg" alt="example image"></div> 
                            <div class="menu-text">Greg Grog
                                <div class="menu-info">
                                    <span class="menu-date">Developer </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 
                    </a>
                </li> 
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-5.jpg" alt="example image"></div> 
                            <div class="menu-text">Stefanie Imburgh
                                <div class="menu-info">
                                    <span class="menu-date">Dancer</span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="vd_grey font-sm"><i class="fa fa-mobile"></i></span></div> 
                    </a>
                </li> 
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-6.jpg" alt="example image"></div> 
                            <div class="menu-text">Matt Demon
                                <div class="menu-info">
                                    <span class="menu-date">Musician </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="vd_grey font-sm"><i class="fa fa-mobile"></i></span></div> 
                    </a>
                </li>
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-7.jpg" alt="example image"></div> 
                            <div class="menu-text">Jeniffer Anastasia
                                <div class="menu-info">
                                    <span class="menu-date">Senior Developer </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                    </a>
                </li>                    
                <li>  
                    <a href="#"> 
                            <div class="menu-icon"><img src="img/avatar/avatar-8.jpg" alt="example image"></div> 
                            <div class="menu-text">Daniel Dreamon
                                <div class="menu-info">
                                    <span class="menu-date">Sales Executive </span>                                                         
                                </div>
                            </div>
                            <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                    </a>
                </li> 

            </ul>
        </div>

            
    </div>
    <div class="navbar-spacing clearfix">
    </div>
</div>    
    <!-- Middle Content Start -->
    
    <div class="vd_content-wrapper">
      <div class="vd_container">
        <div class="vd_content clearfix">
          <div class="vd_head-section clearfix">
            <div class="vd_panel-header">
              <ul class="breadcrumb">
                <li><a href="index.html">Home</a> </li>
                <li><a href="pages-custom-product.html">Pages</a> </li>
                <li class="active">Ecommerce Add Product</li>
              </ul>
              <div class="vd_panel-menu hidden-sm hidden-xs" data-intro="<strong>Expand Control</strong><br/>To expand content page horizontally, vertically, or Both. If you just need one button just simply remove the other button code." data-step=5  data-position="left">
    <div data-action="remove-navbar" data-original-title="Remove Navigation Bar Toggle" data-toggle="tooltip" data-placement="bottom" class="remove-navbar-button menu"> <i class="fa fa-arrows-h"></i> </div>
      <div data-action="remove-header" data-original-title="Remove Top Menu Toggle" data-toggle="tooltip" data-placement="bottom" class="remove-header-button menu"> <i class="fa fa-arrows-v"></i> </div>
      <div data-action="fullscreen" data-original-title="Remove Navigation Bar and Top Menu Toggle" data-toggle="tooltip" data-placement="bottom" class="fullscreen-button menu"> <i class="glyphicon glyphicon-fullscreen"></i> </div>
      
</div>
            </div>
          </div>
          <div class="vd_title-section clearfix">
            <div class="vd_panel-header">
              <h1>Add Product</h1>
              <small class="subtitle">Ecommerce Pages: Add Product</small>
              <div class="vd_panel-menu hidden-xs">
                <div class="menu">
                  <div> <span class="menu-icon mgr-10"><i class="fa fa-search"></i></span>Preview </div>
                </div>
                <div class="menu">
                  <div> <span class="menu-icon mgr-10"><i class="fa fa-copy"></i></span>Duplicate </div>
                </div>
                <div class="menu">
                  <div> <span class="menu-icon mgr-10"><i class="fa fa-money"></i></span>Product Sales </div>
                </div>
                <div class="menu">
                  <div> <span class="menu-icon mgr-10"><i class="fa fa-trash-o"></i></span>Delete </div>
                </div>
                <div class="menu">
                  <div> <span class="menu-icon mgr-10"><i class="fa fa-support"></i></span>Help </div>
                </div>
              </div>
              <div class="vd_panel-menu visible-xs">
                <div class="menu">
                  <div data-action="click-trigger"> <span class="menu-icon mgr-10"><i class="fa fa-bars"></i></span>Menu <i class="fa fa-angle-down"></i> </div>
                  <div data-action="click-target" class="vd_mega-menu-content width-xs-2 left-xs" style="display: none;">
                    <div class="child-menu">
                      <div class="content-list content-menu">
                        <ul class="list-wrapper pd-lr-10">
                          <li> <a href="#">
                            <div class="menu-icon"><i class="fa fa-search"></i></div>
                            <div class="menu-text">Preview</div>
                            </a> </li>
                          <li> <a href="#">
                            <div class="menu-icon"><i class="fa fa-copy"></i></div>
                            <div class="menu-text">Duplicate</div>
                            </a> </li>
                          <li> <a href="#">
                            <div class="menu-icon"><i class="fa fa-money"></i></div>
                            <div class="menu-text">Product Sales</div>
                            </a> </li>
                          <li> <a href="#">
                            <div class="menu-icon"><i class="fa fa-trash-o"></i></div>
                            <div class="menu-text">Delete</div>
                            </a> </li>
                          <li> <a href="#">
                            <div class="menu-icon"><i class="fa fa-support"></i></div>
                            <div class="menu-text">Help</div>
                            </a> </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- menu --> 
              </div>
            </div>
          </div>
          

          <div class="vd_content-section clearfix" id="ecommerce-product-add">
            <div class="row">
              <div class="col-sm-3 col-md-4 col-lg-3">
                <div class="form-wizard condensed mgbt-xs-20">
                  <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#tabinfo" data-toggle="tab"> <i class="fa fa-info-circle append-icon"></i> Information </a></li>
                    <li><a href="#tabprice" data-toggle="tab"> <i class="fa fa-money append-icon"></i> Prices </a></li>
                    <li><a href="#tabseo" data-toggle="tab"> <i class="fa fa-book append-icon"></i> SEO </a></li>
                    <li><a href="#tabship" data-toggle="tab"> <i class="fa fa-truck append-icon"></i> Shipping</a></li>
                    <li><a href="#tabasso" data-toggle="tab"> <i class="fa fa-link append-icon"></i> Association </a></li>
                    <li><a href="#tabimage" data-toggle="tab"> <i class="fa fa-picture-o append-icon"></i> Images </a></li>
                    <li><a href="#tabquantities" data-toggle="tab"> <i class="fa fa-folder-open append-icon"></i> Quantities</a></li>
                    <li><a href="#tabattach" data-toggle="tab"> <i class="fa fa-paperclip append-icon"></i> Attachment</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-9 col-md-8 col-lg-9 tab-right">
                <div class="panel widget panel-bd-left light-widget">
                  <div class="panel-heading no-title"> </div>
                  <div  class="panel-body">
                    <div class="tab-content no-bd mgbt-xs-20">
                      <div id="tabinfo" class="tab-pane active">
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a  data-toggle="modal" data-target="#myModal" class="btn btn-default btn-sm"><i class="fa fa-times append-icon"></i> Cancel Changes</a> </div>
                          </div>
                          <h3 class="mgtp-15 mgbt-xs-20"> Product Information</h3>
                          <div class="form-group">
                            <label  class="control-label col-lg-3" ><span data-toggle="tooltip" class="label-tooltip" data-original-title="Product type"> Type </span></label>
                            <div class="col-lg-9">
                              <div class="vd_radio radio-success">
                                <input type="radio" checked=""  value="0" name="type_product" id="simple_product">
                                <label for="simple_product">Standard product</label>
                              </div>
                              <div class="vd_radio radio-success">
                                <input type="radio"  value="0" name="type_product" id="pack_product">
                                <label for="pack_product">Pack of product</label>
                              </div>
                              <div class="vd_radio radio-success">
                                <input type="radio"  value="2" name="type_product" id="virtual_product">
                                <label for="virtual_product">Virtual product (services, booking, downloadable products, etc.)</label>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="name_1" class="control-label col-lg-3 required"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="The public name for this product. Invalid characters &lt;&gt;;=#{}"> Name </span> </label>
                            <div class="col-lg-5">
                              <div class="row mgbt-xs-0">
                                <div class="col-sm-9">
                                  <input type="text" required value="Tight Long Jeans" name="name_1" class="  updateCurrentText " id="name_1" >
                                </div>
                                <div class="col-sm-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="code_1" class="control-label col-lg-3 required"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Product reference number (SKU-10423, etc.)"> Code </span> </label>
                            <div class="col-lg-3">
                              <input type="text" required value="REF-0102392" name="code_1" class="  updateCurrentText " id="code_1" >
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="enable_1" class="control-label col-lg-3 required"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Enable product" > Enable </span> </label>
                            <div class="col-lg-3">
                              <input id="enable_1" name="enable_1"  type="checkbox" data-rel="switch" data-wrapper-class="inverse" data-size="small" data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>"  checked>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="description_short_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Appears in the product list(s), and at the top of the product page."> Short description </span> </label>
                            <div class="col-lg-8 mgbt-xs-10 mgbt-lg-0">
                              <textarea name="description_short_1" id="description_short_1" data-rel="ckeditor" rows="1" ></textarea>
                            </div>
                            <div class="col-lg-1">
                              <button tabindex="-1" data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                              <ul class="dropdown-menu pull-right">
                                <li> <a href="#">English (English)</a> </li>
                                <li> <a href="#">Español (Spanish)</a> </li>
                                <li> <a href="#">Français (French)</a> </li>
                                <li> <a href="#">Italiano (Italian)</a> </li>
                                <li> <a href="#">Deutsch (German)</a> </li>
                                <li> <a href="#">Dutch</a> </li>
                                <li> <a href="#">Polish</a> </li>
                                <li> <a href="#">Russian</a> </li>
                                <li> <a href="#">Portuguese</a> </li>
                              </ul>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="description_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Appears in the body of product detail."> Description </span> </label>
                            <div class="col-lg-8 mgbt-xs-10 mgbt-lg-0">
                              <textarea name="description_1" id="description_1" data-rel="ckeditor" rows="1" ></textarea>
                            </div>
                            <div class="col-lg-1">
                              <button tabindex="-1" data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                              <ul class="dropdown-menu pull-right">
                                <li> <a href="#">English (English)</a> </li>
                                <li> <a href="#">Español (Spanish)</a> </li>
                                <li> <a href="#">Français (French)</a> </li>
                                <li> <a href="#">Italiano (Italian)</a> </li>
                                <li> <a href="#">Deutsch (German)</a> </li>
                                <li> <a href="#">Dutch</a> </li>
                                <li> <a href="#">Polish</a> </li>
                                <li> <a href="#">Russian</a> </li>
                                <li> <a href="#">Portuguese</a> </li>
                              </ul>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="tags_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Each tag has to be followed by a comma. The following characters are forbidden: !&lt;;&gt;;?=+#&quot;°{}_$%"> Tags </span> </label>
                            <div class="col-lg-8 mgbt-xs-10 mgbt-lg-0">
                              <div class="row">
                                <div class="col-lg-9 mgbt-xs-10 mgbt-lg-0">
                                  <input type="text" value="" name="tags_1"  id="tags_1" data-rel="tags-input">
                                </div>
                                <div class="col-lg-2">
                                  <button data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                        </form>
                      </div>
                      <!-- #tabinfo -->
                      <div id="tabprice" class="tab-pane">
                        <div class="vd_panel-menu">
                          <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                        </div>
                        <h3 class="mgtp-15 mgbt-xs-20"> Product Price</h3>
                        <form class="form-horizontal">
                          <div class="form-group">
                            <label for="wholesale_price" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="The wholesale price is the price you paid for the product. Do not include the tax.">Wholesale price</span> </label>
                            <div class="col-lg-2">
                              <div class="input-group"> <span class="input-group-addon">$ </span>
                                <input type="text" onchange="this.value = this.value.replace(/,/g, '.');" value="4.95" id="wholesale_price" name="wholesale_price" maxlength="14">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="priceTE" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="The pre-tax retail price is the price for which you intend sell this product to your customers. It should be higher than the pre-tax wholesale price: the difference between the two will be your margin.">Retail price</span> </label>
                            <div class="col-lg-2">
                              <div class="input-group "> <span class="input-group-addon">$ </span>
                                <input type="hidden" value="16.510000" name="price" id="priceTEReal">
                                <input type="text" onkeyup="$('#priceType').val('TE'); $('#priceTEReal').val(this.value.replace(/,/g, '.')); if (isArrowKey(event)) return; calcPriceTI();" onchange="noComma('priceTE'); $('#priceTEReal').val(this.value);" value="16.510000" name="price_displayed" id="priceTE" maxlength="14" size="11">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="id_tax_rules_group" class="control-label col-lg-3"> Tax rule </label>
                            <div class="col-lg-8">
                              <div class="row">
                                <div class="col-lg-6">
                                  <select id="id_tax_rules_group" name="id_tax_rules_group" onchange="javascript:calcPrice(); unitPriceWithTax('unit');">
                                    <option value="0">No Tax</option>
                                    <option value="2"> US-AK Rate (0%) </option>
                                    <option selected="selected" value="1"> US-AL Rate (4%) </option>
                                    <option value="4"> US-AR Rate (6%) </option>
                                    <option value="3"> US-AZ Rate (6.6%) </option>
                                    <option value="5"> US-CA Rate (8.25%) </option>
                                  </select>
                                </div>
                                <div class="col-lg-5"> <a href="#"> <i class="fa fa-plus append-icon"></i> Create new tax <i class="fa fa-external-link font-xs"></i></a> </div>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="unit_price" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="When selling a pack of items, you can indicate the unit price for each item of the pack. For instance, &quot;per bottle&quot; or &quot;per pound&quot;.">Unit price</span> </label>
                            <div class="col-lg-4">
                              <div class="input-group"> <span class="input-group-addon">$ </span>
                                <input type="text" onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.'); unitPriceWithTax('unit');" maxlength="14" value="0.00" name="unit_price" id="unit_price">
                                <span class="input-group-addon">per</span>
                                <input type="text" onchange="unitySecond();" onkeyup="if (isArrowKey(event)) return ;unitySecond();" maxlength="10" value="" name="unity" id="unity">
                              </div>
                            </div>
                          </div>
                          <br/>
                          <h3 class="mgtp-15 mgbt-xs-20"> Specific Price </h3>
                          <a class="btn vd_btn btn-sm vd_bg-green" href="#" data-toggle="modal" data-target="#addPriceModal"><i class="fa fa-plus append-icon"></i> Add Price </a>
                          <table class="table table-condensed table-striped mgtp-10" id="specific_price_table">
                            <thead class="vd_bg-dark-blue vd_white">
                              <tr>
                                <th>Combination</th>
                                <th>Price</th>
                                <th>Enabled</th>
                                <th>Action</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>S - Grey</td>
                                <td>$20</td>
                                <td class="text-center"><i class='fa fa-check vd_green'></i></td>
                                <td class="menu-action"><a class="btn menu-icon vd_green" data-placement="top" data-toggle="tooltip" data-original-title="Disabled"> <i class="fa fa-power-off"></i> </a> <a class="btn menu-icon vd_yellow" data-placement="top" data-toggle="tooltip" data-original-title="edit"> <i class="fa fa-pencil"></i> </a> <a class="btn menu-icon vd_red" data-placement="top" data-toggle="tooltip" data-original-title="delete"> <i class="fa fa-times"></i> </a></td>
                              </tr>
                              <tr>
                                <td>S - Blue</td>
                                <td>$20</td>
                                <td class="text-center"><i class='fa fa-times vd_grey'></i></td>
                                <td class="menu-action"><a class="btn menu-icon vd_grey" data-placement="top" data-toggle="tooltip" data-original-title="Enabled"> <i class="fa fa-power-off"></i> </a> <a class="btn menu-icon vd_yellow" data-placement="top" data-toggle="tooltip" data-original-title="edit"> <i class="fa fa-pencil"></i> </a> <a class="btn menu-icon vd_red" data-placement="top" data-toggle="tooltip" data-original-title="delete"> <i class="fa fa-times"></i> </a></td>
                              </tr>
                              <tr>
                                <td>M - Grey</td>
                                <td>$15</td>
                                <td class="text-center"><i class='fa fa-check vd_green'></i></td>
                                <td class="menu-action"><a class="btn menu-icon vd_green" data-placement="top" data-toggle="tooltip" data-original-title="Disabled"> <i class="fa fa-power-off"></i> </a> <a class="btn menu-icon vd_yellow" data-placement="top" data-toggle="tooltip" data-original-title="edit"> <i class="fa fa-pencil"></i> </a> <a class="btn menu-icon vd_red" data-placement="top" data-toggle="tooltip" data-original-title="delete"> <i class="fa fa-times"></i> </a></td>
                              </tr>
                            </tbody>
                          </table>
                        </form>
                      </div>
                      <!-- #tab-price -->
                      <div id="tabseo" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Search Engine Optimization</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label for="meta_title_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Meta title </span> </label>
                            <div class="col-lg-8">
                              <div class="row mgbt-xs-0">
                                <div class="col-lg-9  mgbt-xs-10 mgbt-lg-0">
                                  <div class="input-group"> <span class="input-group-addon" id="meta_title_1_counter">70</span>
                                    <input type="text" data-maxchar="70"  value="" name="meta_title_1" class=" " id="meta_title_1">
                                  </div>
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="meta_description_1" class="control-label col-lg-3"> <span title="This description will appear in search engines. You need a single sentence, shorter than 160 characters (including spaces)." data-toggle="tooltip" class="label-tooltip"> Meta description </span> </label>
                            <div class="col-lg-8">
                              <div class="row mgbt-xs-0" style="display: block;">
                                <div class="col-lg-9 mgbt-xs-10 mgbt-lg-0">
                                  <div class="input-group"> <span class="input-group-addon" id="meta_description_1_counter">160</span>
                                    <input type="text" data-maxchar="160" onblur="updateLinkRewrite();" onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" value="" name="meta_description_1" class=" " id="meta_description_1">
                                  </div>
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-xs btn-default dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="link_rewrite_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="This is the human-readable URL, as generated from the product's name. You can change it if you want."> Friendly URL </span> </label>
                            <div class="col-lg-6  mgbt-xs-10 mgbt-lg-0">
                              <div class="row mgbt-xs-0" style="display: block;">
                                <div class="col-lg-9 mgbt-xs-10 mgbt-lg-0">
                                  <input type="text" onblur="updateLinkRewrite();" onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" value="tight-jeans" name="link_rewrite_1" class=" " id="link_rewrite_1">
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="col-lg-2">
                              <button onmousedown="updateFriendlyURLByName();" id="generate-friendly-url" class="btn btn-default" type="button"><i class="icon-random"></i> Generate</button>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-lg-9 col-lg-offset-3">
                              <div class="alert alert-warning translatable-field lang-1" style="display: block;"> <i class="fa fa-link"></i> The product link will look like this<br>
                                <strong>http://bo.demo.prestashop.com/lang/1-<span id="friendly-url_1">faded-short-sleeve-tshirts</span>.html</strong> </div>
                            </div>
                          </div>
                        </form>
                      </div>
                      <!-- tabseo -->
                      
                      <div id="tabship" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Shipping</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label for="width" class="control-label col-lg-3"> Package width</label>
                            <div class=" col-lg-2">
                              <div class="input-group"> <span class="input-group-addon">in</span>
                                <input type="text" onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.');" value="0.000000" name="width" id="width" maxlength="14">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="height" class="control-label col-lg-3"> Package height</label>
                            <div class="col-lg-2">
                              <div class="input-group"> <span class="input-group-addon">in</span>
                                <input type="text" onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.');" value="0.000000" name="height" id="height" maxlength="14">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="depth" class="control-label col-lg-3"> Package depth</label>
                            <div class="col-lg-2">
                              <div class="input-group"> <span class="input-group-addon">in</span>
                                <input type="text" onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.');" value="0.000000" name="depth" id="depth" maxlength="14">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="weight" class="control-label col-lg-3"> Package weight</label>
                            <div class="col-lg-2">
                              <div class="input-group"> <span class="input-group-addon">lb</span>
                                <input type="text" onkeyup="if (isArrowKey(event)) return ;this.value = this.value.replace(/,/g, '.');" value="0.000000" name="weight" id="weight" maxlength="14">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="weight" class="control-label col-lg-3">Carriers</label>
                            <div class="col-lg-9">
                              <div class="row">
                                <div class="col-sm-6">
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="checkbox-1" value="DHL">
                                    <label for="checkbox-1"> DHL </label>
                                  </div>
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="checkbox-2" value="Fedex">
                                    <label for="checkbox-2"> Fedex </label>
                                  </div>
                                </div>
                                <div class="col-sm-6">
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="checkbox-3" value="My Courier">
                                    <label for="checkbox-3"> My Courier </label>
                                  </div>
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="checkbox-4" value="Post">
                                    <label for="checkbox-4"> Post </label>
                                  </div>
                                </div>
                              </div>
                              <a href="#"> <i class="fa fa-plus append-icon"></i> Add Courier <i class="fa fa-external-link font-xs"></i></a> </div>
                          </div>
                        </form>
                      </div>
                      <div id="tabasso" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Associations</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label for="manufactures_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Product Manufactures"> Manufactures </span> </label>
                            <div class="col-lg-8">
                              <div class="row mgbt-xs-0">
                                <div class="col-lg-5  mgbt-xs-10 mgbt-lg-0">
                                  <select id="manufactures_1" name="manufactures_1">
                                    <option value="Sony">Sony</option>
                                    <option value="Samsung"> Samsung </option>
                                    <option selected="selected" value="LG"> LG </option>
                                  </select>
                                </div>
                                <div  class="col-lg-5"> <a href="#"> <i class="fa fa-plus append-icon"></i> Add manufactures <i class="fa fa-external-link font-xs"></i></a> </div>
                                <!-- col-lg-9 --> 
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          <div class="form-group">
                            <label  class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Product Categories"> Categories </span> </label>
                            <div class="col-lg-5">
                              <div class="categories" data-rel="scroll" data-scrollheight="200" style="border-bottom:1px solid #CCCCCC;">
                                <ul class="vd_li" style="margin-left:-15px;">
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-cat-1" value="My Courier">
                                      <label for="checkbox-cat-1"> Electronics </label>
                                    </div>
                                    <ul class="vd_li">
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-2" value="My Courier">
                                          <label for="checkbox-cat-2"> Tablet </label>
                                        </div>
                                      </li>
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-3" value="My Courier">
                                          <label for="checkbox-cat-3"> Smartphone </label>
                                        </div>
                                      </li>
                                    </ul>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-cat-4" value="My Courier">
                                      <label for="checkbox-cat-4"> Apparel </label>
                                    </div>
                                    <ul class="vd_li">
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-5" value="My Courier">
                                          <label for="checkbox-cat-5"> Jeans </label>
                                        </div>
                                      </li>
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-6" value="My Courier">
                                          <label for="checkbox-cat-6"> Clothes </label>
                                        </div>
                                      </li>
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-7" value="My Courier">
                                          <label for="checkbox-cat-7"> Jacket </label>
                                        </div>
                                      </li>
                                      <li>
                                        <div class="vd_checkbox checkbox-success">
                                          <input type="checkbox" id="checkbox-cat-8" value="My Courier">
                                          <label for="checkbox-cat-8"> Dress </label>
                                        </div>
                                      </li>
                                    </ul>
                                  </li>
                                </ul>
                              </div>
                              <div  class="mgtp-10"> <a href="#"><i class="fa fa-plus append-icon"></i> Add Categories <i class="fa fa-external-link font-xs"></i></a> </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          <div class="form-group">
                            <label for="related_1" class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Related products will be appeared on people also see this widget"> Related Products </span> </label>
                            <div class="col-lg-5">
                              <div class="input-group mgbt-xs-10">
                                <input id="related_1" name="related_1" type="text" placeholder="Search">
                                <div class="input-group-btn">
                                  <button class="btn vd_bg-blue vd_white" type="button"><i class="fa fa-search"></i></button>
                                </div>
                                <!-- /btn-group --> 
                              </div>
                              <div class="categories" data-rel="scroll" data-scrollheight="200" style="border-bottom:1px solid #CCCCCC;">
                                <ul class="vd_li" style="margin-left:-15px;">
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-1" value="My Courier">
                                      <label for="checkbox-rel-1"> Samsung Galaxy Tab </label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-2" value="My Courier">
                                      <label for="checkbox-rel-2"> Skirt Short</label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-3" value="My Courier">
                                      <label for="checkbox-rel-3"> Short Pants</label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-4" value="My Courier">
                                      <label for="checkbox-rel-4"> Trousers Long with Tail</label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-5" value="My Courier">
                                      <label for="checkbox-rel-5"> Vooodo Doll</label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-6" value="My Courier">
                                      <label for="checkbox-rel-6"> Belt Gold with Mark</label>
                                    </div>
                                  </li>
                                  <li>
                                    <div class="vd_checkbox checkbox-success">
                                      <input type="checkbox" id="checkbox-rel-7" value="My Courier">
                                      <label for="checkbox-rel-7"> Jacket Long Sleeves</label>
                                    </div>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                      <!-- tab-pane -->
                      <div id="tabimage" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Images</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label class="control-label col-lg-3 file_upload_label"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Format JPG, GIF, PNG. Filesize 8.00 MB max."> Add a new image to this product </span> </label>
                            <div class="col-lg-9"> <span class="btn vd_btn vd_bg-green fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files...</span> 
                              <!-- The file input field used as target for the file upload widget -->
                              <input type="file" multiple name="files[]" id="fileupload">
                              </span> <br>
                              <br>
                              <!-- The global progress bar -->
                              <div id="progress" class="progress">
                                <div class="progress-bar progress-bar-success"></div>
                              </div>
                              <!-- The container for the uploaded files -->
                              <div id="files" class="files"></div>
                              <br>
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="control-label col-lg-3"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Invalid characters &lt;&gt;;=#{}"> Caption </span> </label>
                            <div class="col-lg-9">
                              <div class="translatable-field row lang-1">
                                <div class="col-lg-6">
                                  <input type="text" value="Faded Short Sleeve T-shirts" name="legend_1" id="legend_1">
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="j#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <table id="imageTable" class="table table-dragable">
                            <thead>
                              <tr class="nodrag nodrop">
                                <th style="width:20px"></th>
                                <th class="fixed-width-lg" style="width:80px"><span class="title_box">Image</span></th>
                                <th class="fixed-width-lg"><span class="title_box">Caption</span></th>
                                <th class="fixed-width-xs" style="width:20px"><span class="title_box">Position</span></th>
                                <th class="fixed-width-xs"><span class="title_box">Cover</span></th>
                                <th></th>
                                <!-- action --> 
                              </tr>
                            </thead>
                            <tbody id="imageList">
                              <tr id="1">
                                <td><i class="fa fa-arrows vd_soft-grey"></i></td>
                                <td><a data-rel="prettyPhoto" href="img/products/01.jpg"> <img src="img/products/01.jpg" style="width:60px" alt="product image"> </a></td>
                                <td>Hard Disk</td>
                                <td class="pointer text-center" id="td_1"> 1 </td>
                                <td class="cover"><div class="vd_radio radio-success">
                                    <input type="radio" id="yes" name="optionyes" value="0" checked>
                                    <label for="yes">&nbsp;</label>
                                  </div></td>
                                <td><a class="delete_product_image pull-right btn vd_btn vd_bg-yellow btn-sm" href="#"> <i class="icon-trash append-icon"></i> Delete this image </a></td>
                              </tr>
                              <tr id="2">
                                <td><i class="fa fa-arrows vd_soft-grey"></i></td>
                                <td><a data-rel="prettyPhoto" href="img/products/02.jpg"> <img src="img/products/02.jpg" style="width:60px" alt="product image"> </a></td>
                                <td>iMac</td>
                                <td class="pointer text-center" id="td_2"> 2 </td>
                                <td class="cover"><div class="vd_radio radio-success">
                                    <input type="radio" id="yes2" name="optionyes" value="1">
                                    <label for="yes2">&nbsp;</label>
                                  </div></td>
                                <td><a class="delete_product_image pull-right btn vd_btn vd_bg-yellow btn-sm" href="#"> <i class="icon-trash append-icon"></i> Delete this image </a></td>
                              </tr>
                              <tr id="3">
                                <td><i class="fa fa-arrows vd_soft-grey"></i></td>
                                <td><a data-rel="prettyPhoto" href="img/products/03.jpg"> <img src="img/products/03.jpg" style="width:60px" alt="product image"> </a></td>
                                <td>iPad</td>
                                <td class="pointer text-center" id="td_3"> 3 </td>
                                <td class="cover"><div class="vd_radio radio-success">
                                    <input type="radio" id="yes3" name="optionyes" value="2">
                                    <label for="yes3">&nbsp;</label>
                                  </div></td>
                                <td><a class="delete_product_image pull-right btn vd_btn vd_bg-yellow btn-sm" href="#"> <i class="icon-trash append-icon"></i> Delete this image </a></td>
                              </tr>
                              <tr id="4">
                                <td><i class="fa fa-arrows vd_soft-grey"></i></td>
                                <td><a data-rel="prettyPhoto" href="img/products/04.jpg"> <img src="img/products/04.jpg" style="width:60px" alt="product image"> </a></td>
                                <td>Galaxy Note 8</td>
                                <td class="pointer text-center" id="td_4"> 4 </td>
                                <td class="cover"><div class="vd_radio radio-success">
                                    <input type="radio" id="yes4" name="optionyes" value="3">
                                    <label for="yes4">&nbsp;</label>
                                  </div></td>
                                <td><a class="delete_product_image pull-right btn vd_btn vd_bg-yellow btn-sm" href="#"> <i class="icon-trash append-icon"></i> Delete this image </a></td>
                              </tr>
                            </tbody>
                          </table>
                        </form>
                      </div>
                      <!-- tab-pane -->
                      
                      <div id="tabquantities" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Quantities</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Small - Black </span> </label>
                            <div class="col-lg-2">
                              <input type="number"  value="235" name="number_1" class=" " id="number_1">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Small - Blue </span> </label>
                            <div class="col-lg-2">
                              <input type="number"   value="102" name="number_2" class=" " id="number_2">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Medium - Black </span> </label>
                            <div class="col-lg-2">
                              <input type="number"  value="32" name="number_3" class=" " id="number_3">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Medium - Blue </span> </label>
                            <div class="col-lg-2">
                              <input type="number"   value="45" name="number_4" class=" " id="number_4">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Large - Black </span> </label>
                            <div class="col-lg-2">
                              <input type="number"  value="76" name="number_5" class=" " id="number_5">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="number_1" class="control-label col-lg-5"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Public title for the product's page, and for search engines. Leave blank to use the product name."> Tight Jeans - Large - Blue </span> </label>
                            <div class="col-lg-2">
                              <input type="number"   value="12" name="number_6" class=" " id="number_6">
                            </div>
                          </div>
                          <h3 class="mgtp-15 mgbt-xs-20"> Other Options</h3>
                          <div class="form-group" id="when_out_of_stock">
                            <label class="control-label col-lg-3">When out of stock</label>
                            <div class="col-lg-9">
                              <div class="vd_radio radio-success">
                                <input checked="" value="0" name="out_of_stock_options" id="out_of_stock_1" type="radio">
                                <label for="out_of_stock_1">Deny orders</label>
                              </div>
                              <div class="vd_radio radio-success">
                                <input value="0" name="out_of_stock_options" id="out_of_stock_2" type="radio">
                                <label for="out_of_stock_2">Allow orders</label>
                              </div>
                              <div class="vd_radio radio-success">
                                <input value="2" name="out_of_stock_options" id="out_of_stock_3" type="radio">
                                <label for="out_of_stock_3">Default:Deny orders - <a href="#">as set in the Products Preferences page</a></label>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                      <div id="tabattach" class="tab-pane">
                        <h3 class="mgtp-15 mgbt-xs-20"> Attachment</h3>
                        <form class="form-horizontal">
                          <div class="vd_panel-menu">
                            <div> <a class="btn vd_btn vd_bg-blue btn-sm save-btn"><i class="fa fa-save append-icon"></i> Save Changes</a> <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal"><i class="fa fa-times append-icon"></i> Cancel Changes</a></div>
                          </div>
                          <div class="form-group">
                            <label for="attachment_name_1" class="control-label col-lg-3 required"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Maximum 32 characters."> <span class="vd_red">*</span> Filename </span> </label>
                            <div class="col-lg-9">
                              <div class="translatable-field row mgbt-xs-0">
                                <div class="col-lg-9">
                                  <input type="text" onblur="updateLinkRewrite();" onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" value="" name="attachment_name_1" class=" " id="attachment_name_1">
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label for="attachment_name_2" class="control-label col-lg-3 required"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="File Description"> Description </span> </label>
                            <div class="col-lg-9">
                              <div class="translatable-field row mgbt-xs-0">
                                <div class="col-lg-9">
                                  <input type="text" onblur="updateLinkRewrite();" onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" value="" name="attachment_name_2" class=" " id="attachment_name_2">
                                </div>
                                <div class="col-lg-2">
                                  <button tabindex="-1" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button"> en <span class="caret"></span> </button>
                                  <ul class="dropdown-menu">
                                    <li> <a href="#">English (English)</a> </li>
                                    <li> <a href="#">Español (Spanish)</a> </li>
                                    <li> <a href="#">Français (French)</a> </li>
                                    <li> <a href="#">Italiano (Italian)</a> </li>
                                    <li> <a href="#">Deutsch (German)</a> </li>
                                    <li> <a href="#">Dutch</a> </li>
                                    <li> <a href="#">Polish</a> </li>
                                    <li> <a href="#">Russian</a> </li>
                                    <li> <a href="#">Portuguese</a> </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label class="control-label col-lg-3 file_upload_label"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Format JPG, GIF, PNG. Filesize 8.00 MB max."> File </span> </label>
                            <div class="col-lg-9"> <span class="btn vd_btn vd_bg-green fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files...</span> 
                              <!-- The file input field used as target for the file upload widget -->
                              <input type="file" multiple name="files[]" id="fileupload2">
                              </span> </div>
                          </div>
                          <!-- form-group -->
                          
                          <div class="form-group">
                            <label class="control-label col-lg-3 file_upload_label"> <span title="" data-toggle="tooltip" class="label-tooltip" data-original-title="Check to use which uploaded files you want to use"> Uploaded Files </span> </label>
                            <div class="col-lg-9">
                              <div class="row">
                                <div class="col-sm-6">
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="attach-1" value="DHL" checked>
                                    <label for="attach-1"> My_Things.zip </label>
                                  </div>
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="attach-2" value="Fedex">
                                    <label for="attach-2"> Second.zip </label>
                                  </div>
                                </div>
                                <div class="col-sm-6">
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="attach-3" value="My Courier">
                                    <label for="attach-3"> Third.zip </label>
                                  </div>
                                  <div class="vd_checkbox checkbox-success">
                                    <input type="checkbox" id="attach-4" value="Post">
                                    <label for="attach-4"> Fourth.zip </label>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- form-group -->
                          
                        </form>
                      </div>
                    </div>
                    <!-- tab-content --> 
                    
                  </div>
                  <!-- panel-body --> 
                  
                  <!-- form-horizontal --> 
                </div>
                <!-- Panel Widget --> 
              </div>
              <!-- col-sm-12--> 
            </div>
            <!-- row --> 
            
          </div>
          <!-- .vd_content-section --> 
          
        </div>
        <!-- .vd_content --> 
      </div>
      <!-- .vd_container --> 
    </div>
    <!-- .vd_content-wrapper --> 
    
    <!-- Middle Content End --> 
    
  </div>
  <!-- .container --> 
</div>
<!-- .content -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header vd_bg-blue vd_white">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
        <h4 class="modal-title" id="myModalLabel">Cancel Changes</h4>
      </div>
      <div class="modal-body">
        <h5>Are you sure you want to cancel your changes?</h5>
      </div>
      <div class="modal-footer background-login">
        <button type="button" class="btn vd_btn vd_bg-grey" data-dismiss="modal">Yes</button>
        <button type="button" class="btn vd_btn vd_bg-green"  data-dismiss="modal">No</button>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>
<!-- /.modal -->

<div class="modal fade" id="addPriceModal" tabindex="-1" role="dialog" aria-labelledby="priceModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header vd_bg-blue vd_white">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
        <h4 class="modal-title" id="priceModalLabel">Add Price for Combination</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-4 control-label">Combination</label>
            <div class="col-sm-7 controls">
              <select class="width-40" id="option-combination">
                            <option value="S - Grey">S - Grey</option>
                            <option value="S - Blue">S - Blue</option>
                            <option value="M - Grey">M - Grey</option>
              </select>
              
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label">Price</label>
            <div class="col-sm-7 controls">
              <input class="input-border-btm width-40" type="number" id="price-combination">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label">Enabled</label>
            <div class="col-sm-7 controls">
              <input  type="checkbox" data-rel="switch" data-wrapper-class="inverse" data-size="small" data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>" id="enable-combination">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer background-login">
        <button type="button" class="btn vd_btn vd_bg-grey" data-dismiss="modal">Close</button>
        <button type="button" class="btn vd_btn vd_bg-green" id="add-price-btn"><i class="fa fa-plus append-icon"></i> Add Price</button>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>
<!-- /.modal -->

<!-- Footer Start -->
  <footer class="footer-1"  id="footer">      
    <div class="vd_bottom ">
        <div class="container">
            <div class="row">
              <div class=" col-xs-12">
                <div class="copyright">
                  	Copyright &copy;2014 Venmond Inc. All Rights Reserved 
                </div>
              </div>
            </div><!-- row -->
        </div><!-- container -->
    </div>
  </footer>
<!-- Footer END -->
  <div class="vd_chat-menu hidden-xs">
      <div class="vd_mega-menu-wrapper">
          <div class="vd_mega-menu">
             <ul class="mega-ul">
    <li class="one-icon mega-li mgl-10"> 
      <a class="mega-link vd_bg-green" href="javascript:void(0);"  data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-cloud"></i>
            </span>
            <span class="badge vd_bg-red">
                10
            </span>
      </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-5 width-md-6  center-xs-6 open-top" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Server Status
               <div class="vd_panel-menu">
                     <span data-original-title="Find Server" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-search"></i>
                    </span>                 
                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-grid column-md-3 column-sm-2 column-xs-1 height-xs-auto height-sm-4">	
           <div data-rel="scroll">
               <ul class="list-wrapper">
                    <li><a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-green badge">Online</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li> <a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li> <a>
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>
                    <li><a> 
           		            <div class="menu-icon">
                				<i class="fa fa-cloud"></i>
           				    </div>
                            <div class="menu-text"> Venmond.com
                            	<div class="menu-info">
                                    <span class="menu-date vd_bg-grey badge">Offline</span>
                                    <div class="menu-status  text-left">
                                    	<span class="text">Disk Usage</span>
                                        <span class="value pull-right vd_black">4.35/140 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:15%" class="progress-bar progress-bar-info"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                     
                                    <div class="menu-status  text-left">
                                    	<span class="text">BW Usage</span>
                                        <span class="value pull-right vd_black">1600/2500 GB</span>
                                    </div>
                                    <div class="menu-info">
                                        <div class="progress">
                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 
                                            </div>
                                        </div>                                                   
                                    </div>                                                                                                               
                                    <span class="menu-action">
                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-refresh"></i>
                                        </span> 
                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-stop"></i>
                                        </span>
                                    </span>                                
                            	</div>
                            </div> 
                    </a></li>                                                                                                                         
                    
               </ul>
               </div> <!-- data-rel="scroll" -->
               <div class="closing text-center" style="">
               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>
    <li class="one-big-icon mega-li mgl-10"> 
        <a class="mega-link" href="javascript:void(0);"   data-action="click-trigger">
            <span class="mega-icon">
                <i class="fa fa-tasks"></i>
            </span>
            <span class="badge vd_bg-red">
                8
            </span>
        </a>
      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-4 center-xs-4 open-top" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   You have 8 pending tasks
               <div class="vd_panel-menu">
                     <span data-original-title="Task Setting" data-toggle="tooltip" data-placement="bottom" class="menu">
                        <i class="fa fa-cog"></i>
                    </span>                                                                              
                </div>
           </div>                 
		   <div class="content-list content-image">	
           <div data-rel="scroll">
               <ul class="list-wrapper pd-lr-10">
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 
                            <div class="menu-text"> Electricity Problem
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:85%" class="progress-bar progress-bar-info"> 
                                        	85%
                                        </div>
                                    </div>                                                                                                    
                            	</div>
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_yellow"><i class="fa fa-code"></i></div>  
                            <div class="menu-text">  Finish coding jquery plugin
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 
                                        	20%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>    
                    <li> <a> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                            <div class="menu-text"> Client: Zoe Project
                            	<div class="menu-info">
                                    <span class="menu-date">Make a call</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-phone"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><i class=" fa fa-magic"></i></div>  
                            <div class="menu-text">  Final error check on new templates
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:95%" class="progress-bar progress-bar-success"> 
                                        	95%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_green"><i class=" fa fa-camera"></i></div>  
                            <div class="menu-text">  Update product image
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:50%" class="progress-bar progress-bar-warning"> 
                                        	50%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 
                            <div class="menu-text"> Electricity Problem
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:85%" class="progress-bar progress-bar-info"> 
                                        	85%
                                        </div>
                                    </div>                                                                                                    
                            	</div>
                            </div> 
                    </a> </li>
                    <li> <a href="#"> 
                    		<div class="menu-icon vd_yellow"><i class=" fa fa-code"></i></div>  
                            <div class="menu-text">  Finish coding jquery plugin
                            	<div class="menu-info">
                                    <div class="progress progress-sm">
                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 
                                        	20%
                                        </div>
                                    </div>                                                                                                    
                            	</div>                           
                            </div> 
                    </a> </li>    
                    <li> <a> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 
                            <div class="menu-text"> Client: Zoe Project
                            	<div class="menu-info">
                                    <span class="menu-date">Make a call</span>                                                                         
                                    <span class="menu-action">
                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">
                                            <i class="fa fa-phone"></i>
                                        </span>                                                                            
                                    </span>                                
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                                                                                                                       
                    
               </ul>
               </div>
               <div class="closing text-center" style="">
               		<a href="#">See All Tasks <i class="fa fa-angle-double-right"></i></a>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>  
    <li class="one-big-icon mega-li mgl-10"> 
      <a href="index.html" class="mega-link" data-action="click-trigger">
    	<span class="mega-icon"><img alt="example image" src="img/avatar/avatar.jpg"></span> 
		<span class="badge vd_bg-red">10</span>        
      </a>
      <div class="vd_mega-menu-content  open-top width-xs-4 width-md-5 width-lg-4 center-xs-4" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Jessyline <i>(online)</i>
               <div class="vd_panel-menu">
                     <div  data-rel="tooltip"  data-original-title="Make a Call" class="menu entypo-icon smaller-font">
                        <i class="icon-phone"></i>
                    </div>               
                     <div  data-rel="tooltip"  data-original-title="Video Call" class="menu">
                        <i class="fa fa-video-camera"></i>
                    </div>               
                     <div  data-rel="tooltip"  data-original-title="Message Setting" class="menu smaller-font entypo-icon">
                        <i class="icon-cog"></i>
                    </div>   
                     <div data-rel="tooltip"  data-original-title="Close" class="menu entypo-icon">
                        <i class="icon-cross"></i>
                    </div>                                                                                                 
                </div>
           </div>                 
		   <div class="content-list content-image content-menu">
           	<div data-rel="scroll">	
               <ul class="list-wrapper pd-lr-10">
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text"> Do you play or follow any sports?
                            	<div class="menu-info">
                                    <span class="menu-date">12 Minutes Ago </span>                                                                                                        
                            	</div>
                            </div> 
                    </a> </li>
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  
                            <div class="menu-text">  Good job mate !
                            	<div class="menu-info">
                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         
                              
                            	</div>                            
                            </div> 
                    </a> </li>    
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Just calm down babe, everything will work out.
                            	<div class="menu-info">
                                    <span class="menu-date">12 Days Ago</span>                                                                         
                               
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                    <li  class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Euuh so gross....
                            	<div class="menu-info">
                                    <span class="menu-date">19 Days Ago</span>                                                                         
                               
                            	</div>                                                        
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div>  
                            <div class="menu-text">  That's the way.. I like it :D
                            	<div class="menu-info">
                                    <span class="menu-date">20 Days Ago</span>                                                                         
                               
                            	</div>                                                          
                            </div> 
                    </a> </li>
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Oooh don't be shy ;P
                            	<div class="menu-info">
                                    <span class="menu-date">21 Days Ago</span>                                                                                                       
                            	</div>                             
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Hello, please call my number..
                            	<div class="menu-info">
                                    <span class="menu-date">24 Days Ago</span>                                                                         
                               
                            	</div>                              
                            </div> 
                    </a> </li> 
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Don't go anywhere, i will be coming soon
                            	<div class="menu-info">
                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                                                      
                            	</div>                              
                            </div> 
                    </a> </li>                                                                                          
                    
               </ul>
               </div>
               <div class="closing chat-area">
               	   <div class="chat-box">
                   	<input type="text" placeholder="chat here.." />
                   </div>
                   <div class="vd_panel-menu">
                         <div  data-rel="tooltip"  data-original-title="Insert Picture" class="menu">
                            <i class="icon-camera"></i>
                        </div>               
                         <div  data-rel="tooltip"  data-original-title="Emoticons" class="menu">
                            <i class="fa fa-smile-o"></i>
                        </div>                                                                                  
                    </div>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content --> 
    </li>  
    <li class="one-big-icon mega-li mgl-10"> 
      <a href="index.html" class="mega-link" data-action="click-trigger">
    	<span class="mega-icon"><img alt="example image" src="img/avatar/avatar-10.jpg"></span> 
		<span class="badge vd_bg-red">3</span>        
      </a>
      <div class="vd_mega-menu-content  open-top width-xs-4 width-md-5 width-lg-4 center-xs-4" data-action="click-target">
        <div class="child-menu">  
           <div class="title"> 
           	   Jessyline <i>(online)</i>
               <div class="vd_panel-menu">
                     <div  data-rel="tooltip"  data-original-title="Make a Call" class="menu entypo-icon smaller-font">
                        <i class="icon-phone"></i>
                    </div>               
                     <div  data-rel="tooltip"  data-original-title="Video Call" class="menu">
                        <i class="fa fa-video-camera"></i>
                    </div>               
                     <div  data-rel="tooltip"  data-original-title="Message Setting" class="menu smaller-font entypo-icon">
                        <i class="icon-cog"></i>
                    </div>   
                     <div data-rel="tooltip"  data-original-title="Close" class="menu entypo-icon">
                        <i class="icon-cross"></i>
                    </div>                                                                                                 
                </div>
           </div>                 
		   <div class="content-list content-image content-menu">	
           <div   data-rel="scroll">
               <ul class="list-wrapper pd-lr-10" >
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text"> Do you play or follow any sports?
                            	<div class="menu-info">
                                    <span class="menu-date">12 Minutes Ago </span>                                                                                                        
                            	</div>
                            </div> 
                    </a> </li>
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  
                            <div class="menu-text">  Good job mate !
                            	<div class="menu-info">
                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         
                              
                            	</div>                            
                            </div> 
                    </a> </li>    
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Just calm down babe, everything will work out.
                            	<div class="menu-info">
                                    <span class="menu-date">12 Days Ago</span>                                                                         
                               
                            	</div>                                                     
                            </div> 
                    </a> </li>                                     
                    <li  class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Euuh so gross....
                            	<div class="menu-info">
                                    <span class="menu-date">19 Days Ago</span>                                                                         
                               
                            	</div>                                                        
                            </div> 
                    </a> </li> 
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div>  
                            <div class="menu-text">  That's the way.. I like it :D
                            	<div class="menu-info">
                                    <span class="menu-date">20 Days Ago</span>                                                                         
                               
                            	</div>                                                          
                            </div> 
                    </a> </li>
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Oooh don't be shy ;P
                            	<div class="menu-info">
                                    <span class="menu-date">21 Days Ago</span>                                                                                                       
                            	</div>                             
                            </div> 
                    </a> </li>                                     
                    <li> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 
                            <div class="menu-text">  Hello, please call my number..
                            	<div class="menu-info">
                                    <span class="menu-date">24 Days Ago</span>                                                                         
                               
                            	</div>                              
                            </div> 
                    </a> </li> 
                    <li class="align-right"> <a href="#"> 
                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 
                            <div class="menu-text">  Don't go anywhere, i will be coming soon
                            	<div class="menu-info">
                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                                                      
                            	</div>                              
                            </div> 
                    </a> </li>                                                                                          
                    
               </ul>
               </div>
               <div class="closing chat-area">
               	   <div class="chat-box">
                   	<input type="text" placeholder="chat here.." />
                   </div>
                   <div class="vd_panel-menu">
                         <div  data-rel="tooltip"  data-original-title="Insert Picture" class="menu">
                            <i class="icon-camera"></i>
                        </div>               
                         <div  data-rel="tooltip"  data-original-title="Emoticons" class="menu">
                            <i class="fa fa-smile-o"></i>
                        </div>                                                                                  
                    </div>
               </div>                                                                       
           </div>                              
        </div> <!-- child-menu -->                      
      </div>   <!-- vd_mega-menu-content -->         
    </li>  
     
    <li class="profile mega-li pdlr-15 bordered"> 
        <a class="mega-link" href="#"  data-action="click-trigger"> 
            <span class="menu-name">
                <i class="fa fa-comments append-icon"></i> Chat
            </span>
        </a> 
      <div class="vd_mega-menu-content  width-xs-3  center-xs-3 open-top" data-action="click-target">
        <div class="child-menu"> 
        	<div class="content-list  content-image">
            <div data-rel="scroll">
                <ul class="list-wrapper pd-lr-10">
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar.jpg" alt="example image"></div> 
                                <div class="menu-text">Jessylin
	                                <div class="menu-info">
                                    	<span class="menu-date">Administrator </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li>
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-2.jpg" alt="example image"></div> 
                                <div class="menu-text">Rodney Mc.Cardo
	                                <div class="menu-info">
                                    	<span class="menu-date">Designer </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 
                        </a>
                    </li>
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-3.jpg" alt="example image"></div> 
                                <div class="menu-text">Theresia Minoque
	                                <div class="menu-info">
                                    	<span class="menu-date">Engineering </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li>
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-4.jpg" alt="example image"></div> 
                                <div class="menu-text">Greg Grog
	                                <div class="menu-info">
                                    	<span class="menu-date">Developer </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 
                        </a>
                    </li> 
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-5.jpg" alt="example image"></div> 
                                <div class="menu-text">Stefanie Imburgh
	                                <div class="menu-info">
                                    	<span class="menu-date">Dancer</span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li> 
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-6.jpg" alt="example image"></div> 
                                <div class="menu-text">Matt Demon
	                                <div class="menu-info">
                                    	<span class="menu-date">Musician </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li>
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-7.jpg" alt="example image"></div> 
                                <div class="menu-text">Jeniffer Anastasia
	                                <div class="menu-info">
                                    	<span class="menu-date">Senior Developer </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li>                    
                    <li>  
                        <a href="#"> 
                                <div class="menu-icon"><img src="img/avatar/avatar-8.jpg" alt="example image"></div> 
                                <div class="menu-text">Daniel Dreamon
	                                <div class="menu-info">
                                    	<span class="menu-date">Sales Executive </span>                                                         
                            		</div>
                                </div>
                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 
                        </a>
                    </li>                                                                                                                  
                </ul>
                </div>
            </div> 
        </div> 
      </div>     
  
    </li>  
    <li class="profile border-left mega-li"> 
        <a class="mega-link pd-10" href="javascript:void(0);" data-action="chat-close"> 
            <span class="mega-icon">
                <i class="fa fa-sign-out"></i>
            </span>
        </a> 
    </li>                      
</ul>
<!-- Head menu search form ends -->  
          </div>   
      </div>      
  </div>

</div>

<!-- .vd_body END  -->
<a id="back-top" href="#" data-action="backtop" class="vd_back-top visible"> <i class="fa  fa-angle-up"> </i> </a>

<!--
<a class="back-top" href="#" id="back-top"> <i class="icon-chevron-up icon-white"> </i> </a> -->

<!-- Javascript =============================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script type="text/javascript" src="js/jquery.js"></script> 
<!--[if lt IE 9]>
  <script type="text/javascript" src="js/excanvas.js"></script>      
<![endif]-->
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src='plugins/jquery-ui/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src="plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="js/caroufredsel.js"></script> 
<script type="text/javascript" src="js/plugins.js"></script>

<script type="text/javascript" src="plugins/breakpoints/breakpoints.js"></script>
<script type="text/javascript" src="plugins/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="plugins/prettyPhoto-plugin/js/jquery.prettyPhoto.js"></script> 

<script type="text/javascript" src="plugins/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="plugins/tagsInput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap-switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="plugins/blockUI/jquery.blockUI.js"></script>
<script type="text/javascript" src="plugins/pnotify/js/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="custom/custom.js"></script>
 
<!-- Specific Page Scripts Put Here -->
<script type="text/javascript" src='plugins/tagsInput/jquery.tagsinput.min.js'></script>
<script type="text/javascript" src='plugins/bootstrap-timepicker/bootstrap-timepicker.min.js'></script>
<script type="text/javascript" src='plugins/daterangepicker/moment.min.js'></script>
<script type="text/javascript" src='plugins/daterangepicker/daterangepicker.js'></script>
<script type="text/javascript" src='plugins/colorpicker/colorpicker.js'></script>
<script type="text/javascript" src='plugins/ckeditor/ckeditor.js'></script>
<script type="text/javascript" src='plugins/ckeditor/adapters/jquery.js'></script>
<script type="text/javascript" src="plugins/bootstrap-wysiwyg/js/wysihtml5-0.3.0.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap-wysiwyg/js/bootstrap-wysihtml5-0.0.2.js"></script>
<script type="text/javascript">
$(window).load(function() 
{
	"use strict";



	//CKEDITOR.replace( $('[data-rel^="ckeditor"]') );
	$( '[data-rel^="ckeditor"]' ).ckeditor();


	$( '#imageTable tbody' ).sortable({
		placeholder: "warning",
		helper: function(e, ui) {
			ui.children().each(function() {
				$(this).width($(this).width());
				$(this).css('background','rgba(255,255,255,.6)');
			});
			return ui;
		},				
		stop: function(e, ui) {
			$( '#imageTable tbody' ).children().each(function() {
				var object=$(this);
				object.children('.pointer').html(object.index()+1);
			});

		}
		}).disableSelection();
		

	
	$('.save-btn').click(function(e) {
		var object= $(this);
		object.addClass('disabled');
        object.prepend('<i id="save-spinner" class="fa fa-spinner fa-spin append-icon"></i>');	
		object.children('.fa-save').remove();
		setTimeout(function(){
			object.children('.fa-spinner').remove();
			object.removeClass('disabled');
			object.prepend('<i class="fa fa-save append-icon"></i>');
			notification('topright', 'success', 'fa fa-check-circle vd_green', 'Save Successfully', 'Your has setting is saved successfully')			
			},2000)	 
		; 
    });
	
	$('#add-price-btn').click(function(e) {
		var option_value = $("#addPriceModal #option-combination").val();
		var price_value = $("#addPriceModal #price-combination").val();		
		var check_value = $('#addPriceModal #enable-combination').bootstrapSwitch('state') ? '<i class="fa fa-check vd_green"></i>' : '<i class="fa fa-times vd_grey"></i>';	
		var menu_value = $('#addPriceModal #enable-combination').bootstrapSwitch('state') ? 	'<a data-original-title="Disabled" data-toggle="tooltip" data-placement="top" class="btn menu-icon vd_green"> <i class="fa fa-power-off"></i> </a>' : '<a data-original-title="Enabled" data-toggle="tooltip" data-placement="top" class="btn menu-icon vd_grey"> <i class="fa fa-power-off"></i> </a>'
		$('#specific_price_table tbody').append('<tr>' + '<td>' + option_value +'</td>\
                                <td>$' + price_value + '</td>\
                                <td class="text-center">' + check_value + '</td>\
                                <td class="menu-action">' + menu_value + ' <a data-original-title="edit" data-toggle="tooltip" data-placement="top" class="btn menu-icon vd_yellow"> <i class="fa fa-pencil"></i> </a> <a data-original-title="delete" data-toggle="tooltip" data-placement="top" class="btn menu-icon vd_red"> <i class="fa fa-times"></i> </a></td>\
                              </tr>' + '</tr>');
		$('[data-toggle^="tooltip"]').tooltip();							  
							  
		$('#addPriceModal').modal('hide');							  
		
	});
	
	// count down on meta keyword/description text size
	
	function countDown($source, $target) {
		var max = $source.attr("data-maxchar");
		$target.html(max-$source.val().length);
	
		$source.keyup(function(){
			$target.html(max-$source.val().length);
		});
	}
	

	
		countDown($("#meta_title_1"), $("#meta_title_1_counter"));
		countDown($("#meta_description_1"), $("#meta_description_1_counter"));

})
</script>

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="plugins/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */

$(function () {
    'use strict';

    var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'plugins/jquery-file-upload/server/php/',
        uploadButton = $('<button/>')
            .addClass('btn vd_btn vd_bg-blue')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
            }); 
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index, file) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
		

});
</script>
<script type="text/javascript">

</script>
<!-- Specific Page Scripts END -->




<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->

<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script> 

</body>
</html>