<!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>Layout Middle HTML Template - Responsive Multipurpose Admin Templates | Vendroid</title>
    <meta name="keywords" content="HTML5 Template, CSS3, All Purpose Admin Template, Vendroid" />
    <meta name="description" content="Layout Middle - 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 -->
	    
     
    <!-- 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 -->
        
    <!-- for specific page responsive in style css -->
        
    
    <!-- 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="layouts" class="middle-layout  no-nav-right  nav-top-fixed vd_bg-grey     responsive    clearfix" data-active="layouts "  data-smooth-scrolling="1">     
<div class="vd_body">
<!-- Header Start -->
  <header class="header-4" 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">
            		            		                   
            </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>              
                                       
            </div>                                     
            <!-- vd_panel-menu -->
          </div>
          <!-- vd_panel-header -->
            
          </div>    
          <div class="vd_container">
          	<div class="row">
                <div class="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-big-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-big-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-big-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>               
    </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>        
    <!-- 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="layouts-simple.html">Layouts</a> </li>
                <li class="active">Layout Middle</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>
          <!-- vd_head-section -->
          
          <div class="vd_title-section clearfix">
            <div class="vd_panel-header">
              <h1>Layout Middle</h1>
              <small class="subtitle">Layouts put the content in the middle</small> </div>
          </div>
          <!-- vd_title-section -->
          
          <div class="vd_content-section clearfix">
          

            <p>Just by configuring our config.html, you can change whatever style you want. Also can do in html files just by adding specific class, all described in documentation.<br/><br/></p>
            <pre class="prettyprint pd-20">// Specific Configuration for Simple Layouts
$footer  = 'footer-2';   // Navigation Footer Clean Style 
$header  = 'header-4';   // Navigation Footer Clean Style
$medium_nav_toggle = 0; // 1= visible, 0 = none
$small_nav_toggle = 0; // 1= visible, 0 = none
$navbar_right_config = 0; // no navbar right
$layout = 'middle-layout'; // middle-layout
$background = 'vd_bg-grey';</pre>

          </div>
          <!-- .vd_content-section --> 
          
        </div>
        <!-- .vd_content --> 
      </div>
      <!-- .vd_container --> 
    </div>
    <!-- .vd_content-wrapper --> 
    
    <!-- Middle Content End --> 
   
   
    
  </div>
  <!-- .container --> 
</div>
<!-- .content -->

<!-- Footer Start -->
  <footer class="footer-2"  id="footer">      
    <div class="vd_bottom ">
        <div class="container">
            <div class="row">
              <div class=" col-xs-12">
                <div class="copyright text-center">
                  	Copyright &copy;2014 Venmond Inc. All Rights Reserved 
                </div>
              </div>
            </div><!-- row -->
        </div><!-- container -->
    </div>
  </footer>
<!-- Footer END -->

</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/google-code-prettify/prettify.js"></script>
<script type="text/javascript" >
	"use strict";
	jQuery(document).ready(function($){prettyPrint();});
</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>