<!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>Dacas Dashboard</title>

    <meta name="keywords" content="HTML5 Template, CSS3, All Purpose Admin Template, " />

    <meta name="description" content="Responsive Admin Template for e-commerce dashboard">

    <meta name="author" content="Venmond">

    

    <!-- Set the viewport width to device width for mobile -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">    

    

    

    <!-- Fav and touch icons -->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png">

    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png">

    <link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png">

    <link rel="shortcut icon" href="img/ico/favicon.png">

    

    

    <!-- CSS -->

       

    <!-- Bootstrap & FontAwesome & Entypo CSS -->

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

    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--[if IE 7]><link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->

    <link href="css/font-entypo.css" rel="stylesheet" type="text/css">    



    <!-- Fonts CSS -->

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

               

    <!-- Plugin CSS -->

    <link href="plugins/jquery-ui/jquery-ui.custom.min.css" rel="stylesheet" type="text/css">    

    <link href="plugins/prettyPhoto-plugin/css/prettyPhoto.css" rel="stylesheet" type="text/css">

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

    <link href="plugins/pnotify/css/jquery.pnotify.css" media="screen" rel="stylesheet" type="text/css">    

	<link href="plugins/google-code-prettify/prettify.css" rel="stylesheet" type="text/css"> 

   

         

    <link href="plugins/mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

    <link href="plugins/tagsInput/jquery.tagsinput.css" rel="stylesheet" type="text/css">

    <link href="plugins/bootstrap-switch/bootstrap-switch.css" rel="stylesheet" type="text/css">    

    <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css">    

    <link href="plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css">

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



	<!-- Specific CSS -->

	<link href="plugins/introjs/css/introjs.min.css" rel="stylesheet" type="text/css">    

     

    <!-- Theme CSS -->

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

    <!--[if IE]> <link href="css/ie.css" rel="stylesheet" > <![endif]-->

    <link href="css/chrome.css" rel="stylesheet" type="text/chrome"> <!-- chrome only css -->    





        

    <!-- Responsive CSS -->

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



	  

 

 

    <!-- for specific page in style css -->

        

    <!-- 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="dashboard" class="full-layout  nav-right-hide nav-right-start-hide  nav-top-fixed      responsive    clearfix" data-active="dashboard "  data-smooth-scrolling="1">     

<div class="vd_body">

<!-- Header Start -->

  <header class="header-1" id="header">

      <div class="vd_top-menu-wrapper">

        <div class="container ">

          <div class="vd_top-nav vd_nav-width  ">

          <div class="vd_panel-header">

          	<div class="logo">

            	<a href="index.html"><img alt="logo" src="img/logo.png"></a>

            </div>

            <!-- logo -->

            <div class="vd_panel-menu  hidden-sm hidden-xs" data-intro="<strong>Minimize Left Navigation</strong><br/>Toggle navigation size to medium or small size. You can set both button or one button only. See full option at documentation." data-step=1>

            		                	<span class="nav-medium-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Medium Nav Toggle" data-action="nav-left-medium">

	                    <i class="fa fa-bars"></i>

                    </span>

                                		                    

                	<span class="nav-small-button menu" data-toggle="tooltip" data-placement="bottom" data-original-title="Small Nav Toggle" data-action="nav-left-small">

	                    <i class="fa fa-ellipsis-v"></i>

                    </span> 

                                       

            </div>

            <div class="vd_panel-menu left-pos visible-sm visible-xs">

                                 

                        <span class="menu" data-action="toggle-navbar-left">

                            <i class="fa fa-ellipsis-v"></i>

                        </span>  

                            

                              

            </div>

            <div class="vd_panel-menu visible-sm visible-xs">

                	<span class="menu visible-xs" data-action="submenu">

	                    <i class="fa fa-bars"></i>

                    </span>        

                          

                        <span class="menu visible-sm visible-xs" data-action="toggle-navbar-right">

                            <i class="fa fa-comments"></i>

                        </span>                   

                   	 

            </div>                                     

            <!-- vd_panel-menu -->

          </div>

          <!-- vd_panel-header -->

            

          </div>    

          <div class="vd_container">

          	<div class="row">

            	<div class="col-sm-5 col-xs-12">

            		

<div class="vd_menu-search">

  <form id="search-box" method="post" action="#">

    <input type="text" name="search" class="vd_menu-search-text width-60" placeholder="Search">

    <div class="vd_menu-search-category"> <span data-action="click-trigger"> <span class="separator"></span> <span class="text">Category</span> <span class="icon"> <i class="fa fa-caret-down"></i></span> </span>

      <div class="vd_mega-menu-content width-xs-2 center-xs-2 right-sm" data-action="click-target">

        <div class="child-menu">

          <div class="content-list content-menu content">

            <ul class="list-wrapper">

              <li>

                <label>

                  <input type="checkbox" value="all-files">

                  <span>All Files</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="photos">

                  <span>Photos</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="illustrations">

                  <span>Illustrations</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="video">

                  <span>Video</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="audio">

                  <span>Audio</span></label>

              </li>

              <li>

                <label>

                  <input type="checkbox" value="flash">

                  <span>Flash</span></label>

              </li>

            </ul>

          </div>

        </div>

      </div>

    </div>

    <span class="vd_menu-search-submit"><i class="fa fa-search"></i> </span>

  </form>

</div>

                </div>

                <div class="col-sm-7 col-xs-12">

              		<div class="vd_mega-menu-wrapper">

                    	<div class="vd_mega-menu pull-right">

            				<ul class="mega-ul">

    <li id="top-menu-1" class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-users"></i></span> 

		<span class="badge vd_bg-red">1</span>        

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 right-xs left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Friend Requests

               <div class="vd_panel-menu">

                     <span data-original-title="Find User" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-search"></i>

                    </span>                 

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-grid column-xs-2 column-sm-3 height-xs-4">	

           <div data-rel="scroll">

               <ul class="list-wrapper">

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                         </a>

                        <div class="menu-text"> Gabriella Montagna

                            <div class="menu-info">

                                <div class="menu-date">San Diego</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                                                                   

                                </div>                                

                            </div>

                        </div> 

                     </li>

                    <li class="warning"> 

                    		<a href="#"> 

                    			<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            </a>                            

                            <div class="menu-text">  Jonathan Fuzzy

                            	<div class="menu-info">

                                    <div class="menu-date">Seattle</div>                                                                         

                                    <div class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-check"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-times"></i>

                                        </span>                                                                            

                                    </div>                                

                            	</div>                            

                            </div> 

                     </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                         </a>    

                        <div class="menu-text">  Sakura Hinata

                            <div class="menu-info">

                                <div class="menu-date">Hawaii</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                             

                                </div>                                

                            </div>                                                     

                        </div> 

                    </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 

                         </a>    

                        <div class="menu-text">  Rikudou Sennin

                            <div class="menu-info">

                                <div class="menu-date">Las Vegas</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                                                        

                        </div> 

                    </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  

                         </a>   

                        <div class="menu-text">  Kim Kardiosun

                            <div class="menu-info">

                                <div class="menu-date">New York</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                                                          

                        </div> 

                     </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div>

                         </a>    

                        <div class="menu-text">   Brad Pita

                            <div class="menu-info">

                                <div class="menu-date">Seattle</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                             

                        </div> 

                    </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 

                         </a>   

                        <div class="menu-text">  Celline Dior

                            <div class="menu-info">

                                <div class="menu-date">Los Angeles</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                             

                                </div>                                

                            </div>                              

                        </div> 

                    </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div>

                         </a>    

                        <div class="menu-text">  Goerge Bruno Marz

                            <div class="menu-info">

                                <div class="menu-date">Las Vegas</div>                                                                         

                                <div class="menu-action">

                                    <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Approve" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-check"></i>

                                    </span> 

                                    <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Reject" data-toggle="tooltip" data-placement="bottom">

                                        <i class="fa fa-times"></i>

                                    </span>                                                                              

                                </div>                                

                            </div>                              

                        </div> 

                    </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>

    <li id="top-menu-2" class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-envelope"></i></span> 

		<span class="badge vd_bg-red">10</span>        

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-5 width-lg-4 right-xs left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Messages

               <div class="vd_panel-menu">

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-list content-image">

           	   <div  data-rel="scroll">	

               <ul class="list-wrapper pd-lr-10">

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text"> Do you play or follow any sports?

                            	<div class="menu-info">

                                    <span class="menu-date">12 Minutes Ago </span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>

                            </div> 

                    </li>

                    <li class="warning"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            <div class="menu-text">  Good job mate !

                            	<div class="menu-info">

                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Read" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye-slash"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                            

                            </div> 

                     </li>    

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text">  Just calm down babe, everything will work out.

                            	<div class="menu-info">

                                    <span class="menu-date">12 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </li>                                     

                    <li>

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 

                            <div class="menu-text">  Euuh so gross....

                            	<div class="menu-info">

                                    <span class="menu-date">19 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                        

                            </div> 

                    </li> 

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  

                            <div class="menu-text">  That's the way.. I like it :D

                            	<div class="menu-info">

                                    <span class="menu-date">20 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                          

                            </div> 

                     </li>

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div> 

                            <div class="menu-text">  Oooh don't be shy ;P

                            	<div class="menu-info">

                                    <span class="menu-date">21 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                             

                            </div> 

                     </li>                                     

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 

                            <div class="menu-text">  Hello, please call my number..

                            	<div class="menu-info">

                                    <span class="menu-date">24 Days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                              

                            </div> 

                    </li> 

                    <li> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div> 

                            <div class="menu-text">  Don't go anywhere, i will be coming soon

                            	<div class="menu-info">

                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Mark as Unread" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-eye"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                              

                            </div> 

                     </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>  

    <li id="top-menu-3"  class="one-icon mega-li"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><i class="fa fa-globe"></i></span> 

		<span class="badge vd_bg-red">51</span>        

      </a>

      <div class="vd_mega-menu-content  width-xs-3 width-sm-4  center-xs-3 left-sm" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           		Notifications 

               <div class="vd_panel-menu">

                     <span data-original-title="Notification Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                   

<!--                     <span class="text-menu" data-original-title="Settings" data-toggle="tooltip" data-placement="bottom">

                        Settings

                    </span> -->                                                              

                </div>

           </div>                 

		   <div class="content-list">	

           	   <div  data-rel="scroll">	

               <ul  class="list-wrapper pd-lr-10">

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class="fa fa-suitcase"></i></div> 

                            <div class="menu-text"> Someone has give you a surprise 

                            	<div class="menu-info"><span class="menu-date">12 Minutes Ago</span></div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class=" fa fa-user"></i></div> 

                            <div class="menu-text">  Change your user profile details

                            	<div class="menu-info"><span class="menu-date">1 Hour 20 Minutes Ago</span></div>

                            </div> 

                    </a> </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 

                            <div class="menu-text">  Your setting is updated

                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 

                            <div class="menu-text">  Added new article

                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Change Profile Pic

                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_red"><i class=" fa fa-cogs"></i></div> 

                            <div class="menu-text">  Your setting is updated

                            	<div class="menu-info"><span class="menu-date">12 Days Ago</span></div>                            

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-book"></i></div> 

                            <div class="menu-text">  Added new article

                            	<div class="menu-info"><span class="menu-date">19 Days Ago</span></div>                              

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Change Profile Pic

                            	<div class="menu-info"><span class="menu-date">20 Days Ago</span></div>                              

                            </div> 

                    </a> </li>                                                                                

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Notifications <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content -->         

    </li>  

     

    <li id="top-menu-profile" class="profile mega-li"> 

        <a href="#" class="mega-link"  data-action="click-trigger"> 

            <span  class="mega-image">

                <img src="img/avatar/avatar.jpg" alt="example image" />               

            </span>

            <span class="mega-name">

                Caroline <i class="fa fa-caret-down fa-fw"></i> 

            </span>

        </a> 

      <div class="vd_mega-menu-content  width-xs-2  left-xs left-sm" data-action="click-target">

        <div class="child-menu"> 

        	<div class="content-list content-menu">

                <ul class="list-wrapper pd-lr-10">

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-user"></i></div> <div class="menu-text">Edit Profile</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-trophy"></i></div> <div class="menu-text">My Achievements</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-envelope"></i></div> <div class="menu-text">Messages</div><div class="menu-badge"><div class="badge vd_bg-red">10</div></div> </a>  </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-tasks

"></i></div> <div class="menu-text"> Tasks</div><div class="menu-badge"><div class="badge vd_bg-red">5</div></div> </a> </li> 

                    <li class="line"></li>                

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-lock

"></i></div> <div class="menu-text">Privacy</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-cogs"></i></div> <div class="menu-text">Settings</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class="  fa fa-key"></i></div> <div class="menu-text">Lock</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-sign-out"></i></div>  <div class="menu-text">Sign Out</div> </a> </li>

                    <li class="line"></li>                

                    <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-question-circle"></i></div> <div class="menu-text">Help</div> </a> </li>

                    <li> <a href="#"> <div class="menu-icon"><i class=" glyphicon glyphicon-bullhorn"></i></div> <div class="menu-text">Report a Problem</div> </a> </li>              

                </ul>

            </div> 

        </div> 

      </div>     

  

    </li>               

       

    <li id="top-menu-settings" class="one-big-icon hidden-xs hidden-sm mega-li" data-intro="<strong>Toggle Right Navigation </strong><br/>On smaller device such as tablet or phone you can click on the middle content to close the right or left navigation." data-step=2 data-position="left"> 

    	<a href="#" class="mega-link"  data-action="toggle-navbar-right"> 

           <span class="mega-icon">

                <i class="fa fa-comments"></i> 

            </span> 

<!--            <span  class="mega-image">

                <img src="img/avatar/avatar.jpg" alt="example image" />               

            </span> -->           

			<span class="badge vd_bg-red">8</span>               

        </a>              

       

    </li>

	</ul>

<!-- Head menu search form ends -->                         

                        </div>

                    </div>

                </div>



            </div>

          </div>

        </div>

        <!-- container --> 

      </div>

      <!-- vd_primary-menu-wrapper --> 



  </header>

  <!-- Header Ends --> 

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

<div class="content">

  <div class="container">

   <?php include('nav.html'); ?>  

    <!-- 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 class="active">Dashboard</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> Dashboard</h1>

              <small class="subtitle"></small>

              <div class="vd_panel-menu  hidden-xs">

  <div class="menu no-bg vd_red" data-original-title="Start Layout Tour Guide" data-toggle="tooltip" data-placement="bottom" onClick="javascript:introJs().setOption('showBullets', false).start();"> <span class="menu-icon font-md"><i class="fa fa-question-circle"></i></span> </div>

  <!-- menu -->

  

  <div class="menu">

    <div data-action="click-trigger"> <span class="menu-icon mgr-10"><i class="fa fa-filter"></i></span>Filter <i class="fa fa-angle-down"></i> </div>

    <div class="vd_mega-menu-content width-xs-2 left-xs" 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">Filter User</div> </a> </li>

            <li> <a href="#"> <div class="menu-icon"><i class=" fa fa-calendar"></i></div> <div class="menu-text">Filter Date</div> </a> </li>

          </ul>

        </div>

      </div>

    </div>

  </div>

  <!-- menu --> 

</div>

<!-- vd_panel-menu --> 

            </div>

            <!-- vd_panel-header --> 

          </div>

          <!-- vd_title-section -->

          

          <div class="vd_content-section clearfix">

            <div class="row">

              <div class="col-lg-3 col-md-6 col-sm-6 mgbt-sm-15">

                <div class="vd_status-widget vd_bg-green widget">

    <div class="vd_panel-menu">

  <div data-action="refresh" data-original-title="Refresh" data-rel="tooltip" class=" menu entypo-icon smaller-font"> <i class="icon-cycle"></i> </div>

</div>

<!-- vd_panel-menu --> 

                                 

    <a class="panel-body" href="#">

            <div class="clearfix">

                <span class="menu-icon">

                    <i class="icon-network"></i>

                </span>

                <span class="menu-value">

                    1,2M

                </span>  

            </div>   

            <div class="menu-text clearfix">

                Total Visitors

            </div>                                                               

    </a>        

</div>                </div>

              <div class="col-lg-3 col-md-6 col-sm-6 mgbt-sm-15">

                <div class="vd_status-widget vd_bg-red  widget">

    <div class="vd_panel-menu">

  <div data-action="refresh" data-original-title="Refresh" data-rel="tooltip" class=" menu entypo-icon smaller-font"> <i class="icon-cycle"></i> </div>

</div>

<!-- vd_panel-menu --> 

                                 

    <a class="panel-body" href="#">                                

        <div class="clearfix">

            <span class="menu-icon">

                <i class="icon-bars"></i>

            </span>

            <span class="menu-value">

               12

            </span>  

        </div>   

        <div class="menu-text clearfix">

          Total Faculty

        </div>  

     </a>                                                                

</div>                </div>

              <div class="col-lg-3 col-md-6 col-sm-6 mgbt-xs-15">

                <div class="vd_status-widget vd_bg-blue widget">

    <div class="vd_panel-menu">

  <div data-action="refresh" data-original-title="Refresh" data-rel="tooltip" class=" menu entypo-icon smaller-font"> <i class="icon-cycle"></i> </div>

</div>

<!-- vd_panel-menu --> 

                                  

    <a class="panel-body"  href="#">                                  

        <div class="clearfix">

            <span class="menu-icon">

                <i class="fa fa-comments"></i>

            </span>

            <span class="menu-value">

                14

            </span>  

        </div>   

        <div class="menu-text clearfix">

           Total Department

        </div>

     </a>                                                                  

</div>               </div>

              <div class="col-lg-3 col-md-6 col-sm-6 mgbt-xs-15">

                <div class="vd_status-widget vd_bg-yellow widget">

    <div class="vd_panel-menu">

  <div data-action="refresh" data-original-title="Refresh" data-rel="tooltip" class=" menu entypo-icon smaller-font"> <i class="icon-cycle"></i> </div>

</div>

<!-- vd_panel-menu --> 

                                  

    <a class="panel-body"  href="#">                                

        <div class="clearfix">

            <span class="menu-icon">

                <i class="icon-users"></i>

            </span>

            <span class="menu-value">

                250

            </span>  

        </div>   

        <div class="menu-text clearfix">

            Users

        </div>  

     </a>                                                                

</div>                </div>

            </div>

            

              <!-- .col-md-4 --> 

            </div>

            <div class="row">

			<div class="col-md-6">

                <div class="panel widget">

                  <div class="panel-body-list  table-responsive">

                    <table class="table no-head-border table-striped">

                      <thead class="vd_bg-blue vd_white">

                        <tr>

                          <th><i class="fa fa-search append-icon"></i>Departments</th>

                          <th style="width:20px">Courses</th>

                          <th style="width:140px">Resources</th>

                        </tr>

                      </thead>

                      <tbody>

                        <tr>

                          <td>Pan</td>

                          <td class="text-center">4</td>

                          <td class="text-center">20</td>

                        </tr>

                        <tr>

                          <td>Fork</td>

                          <td class="text-center">1</td>

                          <td class="text-center">5</td>

                        </tr>

                        <tr>

                          <td>Big Bowl</td>

                          <td class="text-center">7</td>

                          <td class="text-center">23</td>

                        </tr>

                        <tr>

                          <td>Cooking Utensils</td>

                          <td class="text-center">2</td>

                          <td class="text-center">1</td>

                        </tr>

                        <tr>

                          <td>Ketchup Bottle</td>

                          <td class="text-center">3</td>

                          <td class="text-center">12</td>

                        </tr>

                      </tbody>

                    </table>

                  </div>

                </div>

                <div class="panel widget">

                  <div class="panel-body-list  table-responsive">

                    <table class="table no-head-border table-striped">

                      <thead class="vd_bg-blue vd_white">

                        <tr>

                          <th><i class="fa fa-search append-icon"></i>Faculty</th>

                          <th style="width:20px">Results</th>

                          <th style="width:140px">Number of Uses</th>

                        </tr>

                      </thead>

                      <tbody>

                        <tr>

                          <td>Pan</td>

                          <td class="text-center">4</td>

                          <td class="text-center">20</td>

                        </tr>

                        <tr>

                          <td>Fork</td>

                          <td class="text-center">1</td>

                          <td class="text-center">5</td>

                        </tr>

                        <tr>

                          <td>Big Bowl</td>

                          <td class="text-center">7</td>

                          <td class="text-center">23</td>

                        </tr>

                        <tr>

                          <td>Cooking Utensils</td>

                          <td class="text-center">2</td>

                          <td class="text-center">1</td>

                        </tr>

                        <tr>

                          <td>Ketchup Bottle</td>

                          <td class="text-center">3</td>

                          <td class="text-center">12</td>

                        </tr>

                      </tbody>

                    </table>

                  </div>

                </div>

              </div>

              <!-- col-md-6 --> 

              

              <div class="col-md-6">

                <div class="row">

                  <div class="col-md-12">

                    <div class="tabs widget">

        <ul class="nav nav-tabs widget">

          <li class="active">

          <a data-toggle="tab" href="#home-tab">

              <span class="menu-icon"><i class="fa fa-comments"></i></span>

              Recent Reviews 

              <span class="menu-active"><i class="fa fa-caret-up"></i></span>

          </a></li>

          <li>

          <a data-toggle="tab" href="#posts-tab">

              <span class="menu-icon"><i class="fa fa-rocket"></i></span>

              Activities

              <span class="menu-active"><i class="fa fa-caret-up"></i></span>

          </a></li>

          <li>

          <a data-toggle="tab" href="#list-tab">

              <span class="menu-icon"><i class="fa fa-user"></i></span>

              New Users

              <span class="menu-active"><i class="fa fa-caret-up"></i></span>

          </a></li>

        </ul>

        <div class="tab-content">

          <div id="home-tab" class="tab-pane active">                                         

           <div class="content-list content-image menu-action-right">

           <div  data-rel="scroll" data-scrollheight="550">

               <ul class="list-wrapper pd-lr-15">

                    <li>  

                        <div class="menu-icon"><a href="#"><img alt="example image" src="img/avatar/avatar.jpg"></a></div> 

                        <div class="menu-text"> 

                            This product is so good that i manage to buy it 1 for me and 3 for my families. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidtation ullamco laboris nisi ut aliquip ex tris. 

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">Samsung Galaxy S4</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>                                                	  

                    </li>

                    <li>                                            

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidtation ullamco. 

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">LG G2</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>  

                    </li>    

                    <li>  

                            <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text"> 

                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidtation ullamco. Consectetur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidtation ullamco.

                            </div>                                               

                            <div class="menu-text">

                                <div class="menu-info">

                                    in <a href="#">Sony Experia Z10</a> - 



                                    <span class="menu-date">12 Minutes Ago </span> - 

                                    <span class="menu-rating vd_yellow"><i class="icon-star"></i></span>

                                                                                                   

                                </div>

                            </div>

                            <div class="menu-action">  

                                <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                    <i class="fa fa-check"></i>

                                </div>                                                            

                                <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                    <i class="fa fa-times"></i>

                                </div>                                                                                                                                       

                            </div>  

                    </li>                                     

                    <li>  

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-4.jpg"></div> 

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidtation ullamco. Ipsum dolor sit amet, consectetur adipisicing elit !!!

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">Nokia Lumia</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>

                    </li> 

                    <li> 

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-5.jpg"></div>  

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">Samsung Galaxy Note 8</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>

                    </li>

                    <li>  

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-6.jpg"></div> 

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">LG L3</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>

                    </li>                                     

                    <li> 

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-7.jpg"></div> 

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit xorem ipsum dolor sit amet, consectetur adipisicing elit.

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">Motorola Moto-X</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div> 

                    </li> 

                    <li>  

                        <div class="menu-icon"><img alt="example image" src="img/avatar/avatar-8.jpg"></div> 

                        <div class="menu-text"> 

                            Lorem ipsum dolor sit amet, consectetur adipisicing elit xorem ipsum dolor sit amet, consectetur adipisicing elit.

                        </div>                                               

                        <div class="menu-text">

                            <div class="menu-info">

                                in <a href="#">Monitor Asus</a> - 



                                <span class="menu-date">12 Minutes Ago </span> - 

                                <span class="menu-rating vd_yellow"><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></span>

                                                                                               

                            </div>

                        </div>

                        <div class="menu-action">  

                            <div class="menu-action-icon vd_green"  data-original-title="Approve" data-rel="tooltip-bottom">

                                <i class="fa fa-check"></i>

                            </div>                                                            

                            <div class="menu-action-icon vd_red"   data-original-title="Reject" data-rel="tooltip-bottom">

                                <i class="fa fa-times"></i>

                            </div>                                                                                                                                       

                        </div>

                    </li>     

               </ul>

               </div>

               <div class="closing text-center">

                    <a href="#">See All Recent Reviews <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                                                            

           </div>                              



          </div>

          <div id="posts-tab" class="tab-pane sidebar-widget">

               <div class="content-list">	

                                                                                     

               </div>                              

          </div>

             

     

        </div>

</div> <!-- tabs-widget -->                  </div>

                  <!-- col-md-12 --> 

                </div>

                <!-- row --> 

                

              </div>

              <!-- col-md-6 -->

              

            </div>

            <!-- .row --> 

          </div>

          <!-- .vd_content-section --> 

          

        </div>

        <!-- .vd_content --> 

      </div>



























</div>

















<?php include('footer.php'); ?>

<!-- Footer END -->

  <div class="vd_chat-menu hidden-xs">

      <div class="vd_mega-menu-wrapper">

          <div class="vd_mega-menu">

             <ul class="mega-ul">

    <li class="one-icon mega-li mgl-10"> 

      <a class="mega-link vd_bg-green" href="javascript:void(0);"  data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-cloud"></i>

            </span>

            <span class="badge vd_bg-red">

                10

            </span>

      </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-5 width-md-6  center-xs-6 open-top" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Server Status

               <div class="vd_panel-menu">

                     <span data-original-title="Find Server" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-search"></i>

                    </span>                 

                     <span data-original-title="Message Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-grid column-md-3 column-sm-2 column-xs-1 height-xs-auto height-sm-4">	

           <div data-rel="scroll">

               <ul class="list-wrapper">

                    <li><a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-green badge">Online</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li> <a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li> <a>

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>



                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>

                    <li><a> 

           		            <div class="menu-icon">

                				<i class="fa fa-cloud"></i>

           				    </div>

                            <div class="menu-text"> Venmond.com

                            	<div class="menu-info">

                                    <span class="menu-date vd_bg-grey badge">Offline</span>

                                    <div class="menu-status  text-left">

                                    	<span class="text">Disk Usage</span>

                                        <span class="value pull-right vd_black">4.35/140 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:15%" class="progress-bar progress-bar-info"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                     

                                    <div class="menu-status  text-left">

                                    	<span class="text">BW Usage</span>

                                        <span class="value pull-right vd_black">1600/2500 GB</span>

                                    </div>

                                    <div class="menu-info">

                                        <div class="progress">

                                            <div style="width:65%" class="progress-bar  progress-bar-warning"> 

                                            </div>

                                        </div>                                                   

                                    </div>                                                                                                               

                                    <span class="menu-action">

                                        <span class="menu-action-icon vd_green vd_bd-green" data-original-title="Reboot Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-refresh"></i>

                                        </span> 

                                        <span class="menu-action-icon vd_red vd_bd-red" data-original-title="Stop Server" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-stop"></i>

                                        </span>

                                    </span>                                

                            	</div>

                            </div> 

                    </a></li>                                                                                                                         

                    

               </ul>

               </div> <!-- data-rel="scroll" -->

               <div class="closing text-center" style="">

               		<a href="#">See All Requests <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>

    <li class="one-big-icon mega-li mgl-10"> 

        <a class="mega-link" href="javascript:void(0);"   data-action="click-trigger">

            <span class="mega-icon">

                <i class="fa fa-tasks"></i>

            </span>

            <span class="badge vd_bg-red">

                8

            </span>

        </a>

      <div class="vd_mega-menu-content width-xs-3 width-sm-4 width-md-4 center-xs-4 open-top" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   You have 8 pending tasks

               <div class="vd_panel-menu">

                     <span data-original-title="Task Setting" data-toggle="tooltip" data-placement="bottom" class="menu">

                        <i class="fa fa-cog"></i>

                    </span>                                                                              

                </div>

           </div>                 

		   <div class="content-list content-image">	

           <div data-rel="scroll">

               <ul class="list-wrapper pd-lr-10">

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 

                            <div class="menu-text"> Electricity Problem

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:85%" class="progress-bar progress-bar-info"> 

                                        	85%

                                        </div>

                                    </div>                                                                                                    

                            	</div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class="fa fa-code"></i></div>  

                            <div class="menu-text">  Finish coding jquery plugin

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 

                                        	20%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>    

                    <li> <a> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text"> Client: Zoe Project

                            	<div class="menu-info">

                                    <span class="menu-date">Make a call</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-phone"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><i class=" fa fa-magic"></i></div>  

                            <div class="menu-text">  Final error check on new templates

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:95%" class="progress-bar progress-bar-success"> 

                                        	95%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_green"><i class=" fa fa-camera"></i></div>  

                            <div class="menu-text">  Update product image

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:50%" class="progress-bar progress-bar-warning"> 

                                        	50%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_blue"><i class="fa fa-bolt"></i></div> 

                            <div class="menu-text"> Electricity Problem

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:85%" class="progress-bar progress-bar-info"> 

                                        	85%

                                        </div>

                                    </div>                                                                                                    

                            	</div>

                            </div> 

                    </a> </li>

                    <li> <a href="#"> 

                    		<div class="menu-icon vd_yellow"><i class=" fa fa-code"></i></div>  

                            <div class="menu-text">  Finish coding jquery plugin

                            	<div class="menu-info">

                                    <div class="progress progress-sm">

                                        <div style="width:20%" class="progress-bar progress-bar-danger"> 

                                        	20%

                                        </div>

                                    </div>                                                                                                    

                            	</div>                           

                            </div> 

                    </a> </li>    

                    <li> <a> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-3.jpg"></div> 

                            <div class="menu-text"> Client: Zoe Project

                            	<div class="menu-info">

                                    <span class="menu-date">Make a call</span>                                                                         

                                    <span class="menu-action">

                                        <span class="menu-action-icon" data-original-title="Call" data-toggle="tooltip" data-placement="bottom">

                                            <i class="fa fa-phone"></i>

                                        </span>                                                                            

                                    </span>                                

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                                                                                                                       

                    

               </ul>

               </div>

               <div class="closing text-center" style="">

               		<a href="#">See All Tasks <i class="fa fa-angle-double-right"></i></a>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>  

    <li class="one-big-icon mega-li mgl-10"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><img alt="example image" src="img/avatar/avatar.jpg"></span> 

		<span class="badge vd_bg-red">10</span>        

      </a>

      <div class="vd_mega-menu-content  open-top width-xs-4 width-md-5 width-lg-4 center-xs-4" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Jessyline <i>(online)</i>

               <div class="vd_panel-menu">

                     <div  data-rel="tooltip"  data-original-title="Make a Call" class="menu entypo-icon smaller-font">

                        <i class="icon-phone"></i>

                    </div>               

                     <div  data-rel="tooltip"  data-original-title="Video Call" class="menu">

                        <i class="fa fa-video-camera"></i>

                    </div>               

                     <div  data-rel="tooltip"  data-original-title="Message Setting" class="menu smaller-font entypo-icon">

                        <i class="icon-cog"></i>

                    </div>   

                     <div data-rel="tooltip"  data-original-title="Close" class="menu entypo-icon">

                        <i class="icon-cross"></i>

                    </div>                                                                                                 

                </div>

           </div>                 

		   <div class="content-list content-image content-menu">

           	<div data-rel="scroll">	

               <ul class="list-wrapper pd-lr-10">

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text"> Do you play or follow any sports?

                            	<div class="menu-info">

                                    <span class="menu-date">12 Minutes Ago </span>                                                                                                        

                            	</div>

                            </div> 

                    </a> </li>

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            <div class="menu-text">  Good job mate !

                            	<div class="menu-info">

                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         

                              

                            	</div>                            

                            </div> 

                    </a> </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Just calm down babe, everything will work out.

                            	<div class="menu-info">

                                    <span class="menu-date">12 Days Ago</span>                                                                         

                               

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                    <li  class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Euuh so gross....

                            	<div class="menu-info">

                                    <span class="menu-date">19 Days Ago</span>                                                                         

                               

                            	</div>                                                        

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div>  

                            <div class="menu-text">  That's the way.. I like it :D

                            	<div class="menu-info">

                                    <span class="menu-date">20 Days Ago</span>                                                                         

                               

                            	</div>                                                          

                            </div> 

                    </a> </li>

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Oooh don't be shy ;P

                            	<div class="menu-info">

                                    <span class="menu-date">21 Days Ago</span>                                                                                                       

                            	</div>                             

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Hello, please call my number..

                            	<div class="menu-info">

                                    <span class="menu-date">24 Days Ago</span>                                                                         

                               

                            	</div>                              

                            </div> 

                    </a> </li> 

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Don't go anywhere, i will be coming soon

                            	<div class="menu-info">

                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                                                      

                            	</div>                              

                            </div> 

                    </a> </li>                                                                                          

                    

               </ul>

               </div>

               <div class="closing chat-area">

               	   <div class="chat-box">

                   	<input type="text" placeholder="chat here.." />

                   </div>

                   <div class="vd_panel-menu">

                         <div  data-rel="tooltip"  data-original-title="Insert Picture" class="menu">

                            <i class="icon-camera"></i>

                        </div>               

                         <div  data-rel="tooltip"  data-original-title="Emoticons" class="menu">

                            <i class="fa fa-smile-o"></i>

                        </div>                                                                                  

                    </div>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content --> 

    </li>  

    <li class="one-big-icon mega-li mgl-10"> 

      <a href="index.html" class="mega-link" data-action="click-trigger">

    	<span class="mega-icon"><img alt="example image" src="img/avatar/avatar-10.jpg"></span> 

		<span class="badge vd_bg-red">3</span>        

      </a>

      <div class="vd_mega-menu-content  open-top width-xs-4 width-md-5 width-lg-4 center-xs-4" data-action="click-target">

        <div class="child-menu">  

           <div class="title"> 

           	   Jessyline <i>(online)</i>

               <div class="vd_panel-menu">

                     <div  data-rel="tooltip"  data-original-title="Make a Call" class="menu entypo-icon smaller-font">

                        <i class="icon-phone"></i>

                    </div>               

                     <div  data-rel="tooltip"  data-original-title="Video Call" class="menu">

                        <i class="fa fa-video-camera"></i>

                    </div>               

                     <div  data-rel="tooltip"  data-original-title="Message Setting" class="menu smaller-font entypo-icon">

                        <i class="icon-cog"></i>

                    </div>   

                     <div data-rel="tooltip"  data-original-title="Close" class="menu entypo-icon">

                        <i class="icon-cross"></i>

                    </div>                                                                                                 

                </div>

           </div>                 

		   <div class="content-list content-image content-menu">	

           <div   data-rel="scroll">

               <ul class="list-wrapper pd-lr-10" >

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text"> Do you play or follow any sports?

                            	<div class="menu-info">

                                    <span class="menu-date">12 Minutes Ago </span>                                                                                                        

                            	</div>

                            </div> 

                    </a> </li>

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div>  

                            <div class="menu-text">  Good job mate !

                            	<div class="menu-info">

                                    <span class="menu-date">1 Hour 20 Minutes Ago </span>                                                                         

                              

                            	</div>                            

                            </div> 

                    </a> </li>    

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Just calm down babe, everything will work out.

                            	<div class="menu-info">

                                    <span class="menu-date">12 Days Ago</span>                                                                         

                               

                            	</div>                                                     

                            </div> 

                    </a> </li>                                     

                    <li  class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Euuh so gross....

                            	<div class="menu-info">

                                    <span class="menu-date">19 Days Ago</span>                                                                         

                               

                            	</div>                                                        

                            </div> 

                    </a> </li> 

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div>  

                            <div class="menu-text">  That's the way.. I like it :D

                            	<div class="menu-info">

                                    <span class="menu-date">20 Days Ago</span>                                                                         

                               

                            	</div>                                                          

                            </div> 

                    </a> </li>

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Oooh don't be shy ;P

                            	<div class="menu-info">

                                    <span class="menu-date">21 Days Ago</span>                                                                                                       

                            	</div>                             

                            </div> 

                    </a> </li>                                     

                    <li> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar.jpg"></div> 

                            <div class="menu-text">  Hello, please call my number..

                            	<div class="menu-info">

                                    <span class="menu-date">24 Days Ago</span>                                                                         

                               

                            	</div>                              

                            </div> 

                    </a> </li> 

                    <li class="align-right"> <a href="#"> 

                    		<div class="menu-icon"><img alt="example image" src="img/avatar/avatar-2.jpg"></div> 

                            <div class="menu-text">  Don't go anywhere, i will be coming soon

                            	<div class="menu-info">

                                    <span class="menu-date">1 Month 2 days Ago</span>                                                                                                      

                            	</div>                              

                            </div> 

                    </a> </li>                                                                                          

                    

               </ul>

               </div>

               <div class="closing chat-area">

               	   <div class="chat-box">

                   	<input type="text" placeholder="chat here.." />

                   </div>

                   <div class="vd_panel-menu">

                         <div  data-rel="tooltip"  data-original-title="Insert Picture" class="menu">

                            <i class="icon-camera"></i>

                        </div>               

                         <div  data-rel="tooltip"  data-original-title="Emoticons" class="menu">

                            <i class="fa fa-smile-o"></i>

                        </div>                                                                                  

                    </div>

               </div>                                                                       

           </div>                              

        </div> <!-- child-menu -->                      

      </div>   <!-- vd_mega-menu-content -->         

    </li>  

     

    <li class="profile mega-li pdlr-15 bordered"> 

        <a class="mega-link" href="#"  data-action="click-trigger"> 

            <span class="menu-name">

                <i class="fa fa-comments append-icon"></i> Chat

            </span>

        </a> 

      <div class="vd_mega-menu-content  width-xs-3  center-xs-3 open-top" data-action="click-target">

        <div class="child-menu"> 

        	<div class="content-list  content-image">

            <div data-rel="scroll">

                <ul class="list-wrapper pd-lr-10">

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar.jpg" alt="example image"></div> 

                                <div class="menu-text">Jessylin

	                                <div class="menu-info">

                                    	<span class="menu-date">Administrator </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li>

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-2.jpg" alt="example image"></div> 

                                <div class="menu-text">Rodney Mc.Cardo

	                                <div class="menu-info">

                                    	<span class="menu-date">Designer </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 

                        </a>

                    </li>

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-3.jpg" alt="example image"></div> 

                                <div class="menu-text">Theresia Minoque

	                                <div class="menu-info">

                                    	<span class="menu-date">Engineering </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li>

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-4.jpg" alt="example image"></div> 

                                <div class="menu-text">Greg Grog

	                                <div class="menu-info">

                                    	<span class="menu-date">Developer </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-grey">&nbsp;</span></div> 

                        </a>

                    </li> 

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-5.jpg" alt="example image"></div> 

                                <div class="menu-text">Stefanie Imburgh

	                                <div class="menu-info">

                                    	<span class="menu-date">Dancer</span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li> 

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-6.jpg" alt="example image"></div> 

                                <div class="menu-text">Matt Demon

	                                <div class="menu-info">

                                    	<span class="menu-date">Musician </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li>

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-7.jpg" alt="example image"></div> 

                                <div class="menu-text">Jeniffer Anastasia

	                                <div class="menu-info">

                                    	<span class="menu-date">Senior Developer </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li>                    

                    <li>  

                        <a href="#"> 

                                <div class="menu-icon"><img src="img/avatar/avatar-8.jpg" alt="example image"></div> 

                                <div class="menu-text">Daniel Dreamon

	                                <div class="menu-info">

                                    	<span class="menu-date">Sales Executive </span>                                                         

                            		</div>

                                </div>

                                <div class="menu-badge"><span class="badge status vd_bg-green">&nbsp;</span></div> 

                        </a>

                    </li>                                                                                                                  

                </ul>

                </div>

            </div> 

        </div> 

      </div>     

  

    </li>  

    <li class="profile border-left mega-li"> 

        <a class="mega-link pd-10" href="javascript:void(0);" data-action="chat-close"> 

            <span class="mega-icon">

                <i class="fa fa-sign-out"></i>

            </span>

        </a> 

    </li>                      

</ul>

<!-- Head menu search form ends -->  

          </div>   

      </div>      

  </div>



</div>



<!-- .vd_body END  -->

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



<!--

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



<!-- Javascript =============================================== --> 

<!-- Placed at the end of the document so the pages load faster --> 

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

<!--[if lt IE 9]>

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

<![endif]-->

<script type="text/javascript" src="js/bootstrap.min.js"></script> 

<script type="text/javascript" src='plugins/jquery-ui/jquery-ui.custom.min.js'></script>

<script type="text/javascript" src="plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>



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

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



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

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

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



<script type="text/javascript" src="plugins/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript" src="plugins/tagsInput/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="plugins/bootstrap-switch/bootstrap-switch.min.js"></script>

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

<script type="text/javascript" src="plugins/pnotify/js/jquery.pnotify.min.js"></script>



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

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

 

<!-- Specific Page Scripts Put Here -->

<!-- Flot Chart  -->

<script type="text/javascript" src="plugins/flot/jquery.flot.min.js"></script>

<script type="text/javascript" src="plugins/flot/jquery.flot.resize.js"></script>

<script type="text/javascript" src="plugins/flot/jquery.flot.pie.min.js"></script>

<script type="text/javascript" src="plugins/flot/jquery.flot.categories.min.js"></script>

<script type="text/javascript" src="plugins/flot/jquery.flot.animator.min.js"></script>



<!-- Vector Map -->

<script type="text/javascript" src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>

<script type="text/javascript" src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>





<!-- Intro JS (Tour) -->

<script type="text/javascript" src='plugins/introjs/js/intro.min.js'></script>









<script type="text/javascript">

$(window).load(function() 

	{

	

		"use strict";

	

		$(window).on("resize", function(){

			plot.resize();

			plot.setupGrid();

			plot.draw();

		});

				



		$.fn.UseTooltip = function () {

			var previousPoint = null;

			 

			$(this).bind("plothover", function (event, pos, item) {        

					if (item) {

						if (previousPoint != item.dataIndex) {

		

							previousPoint = item.dataIndex;

		

							$("#tooltip").remove();

							var x = item.datapoint[0].toFixed(2),

							y = item.datapoint[1].toFixed(2);

		

							showTooltip(item.pageX, item.pageY,

								"<p class='vd_bg-green'><strong class='mgr-10 mgl-10'>" + Math.round(x)  + " NOV 2013 </strong></p>" +

								"<div style='padding: 0 10px 10px;'>" +

								"<div>" + item.series.label +": <strong>"+ Math.round(y)  +"</strong></div>" +

								"<div> Profit: <strong>$"+ Math.round(y)*7  +"</strong></div>" +

								"</div>"

							);

						}

					} else {

						$("#tooltip").remove();

						previousPoint = null;            

					}

			});

		};

		 

		function showTooltip(x, y, contents) {

			$('<div id="tooltip">' + contents + '</div>').css({

				position: 'absolute',

				display: 'none',

				top: y + 5,

				left: x + 20,    

				size: '10',  

//				'border-top' : '3px solid #1FAE66',

				'background-color': '#111111',

				color: "#FFFFFF",

				opacity: 0.85

			}).appendTo("body").fadeIn(200);

		}





/* REVENUE LINE CHART */



	var d2 = [ [1, 250],

            [2, 150],

            [3, 50],

            [4, 200],

            [5,50],

            [6, 150],

            [7, 150],

            [8, 200],

            [9, 100],

            [10, 250],

            [11,250],

            [12, 200],

            [13, 300]			



];

	var d1 = [

			[1, 650],

            [2, 550],

            [3, 450],

            [4, 550],

            [5, 350],

            [6, 500],

            [7, 600],

            [8, 450],

            [9, 300],

            [10, 600],

            [11, 400],

            [12, 500],

            [13, 700]					

			

];

	var plot = $.plotAnimator($("#revenue-line-chart"), [

			{  	label: "Revenue",

				data: d2, 	

				lines: {				

					fill: 0.4,

					lineWidth: 0,				

				},

				color:['#f2be3e']

			},{ 

				data: d1, 

				animator: {steps: 60, duration: 1000, start:0}, 		

				lines: {lineWidth:2},	

				shadowSize:0,

				color: '#F85D2C'

			},{

				label: "Revenue",

				data: d1, 

				points: { show: true, fill: true, radius:6,fillColor:"#F85D2C",lineWidth:3 },	

				color: '#fff',				

				shadowSize:0

			},

			{	label: "Cost",

				data: d2, 

				points: { show: true, fill: true, radius:6,fillColor:"#f2be3e",lineWidth:3 },	

				color: '#fff',				

				shadowSize:0

			}

		],{	xaxis: {

		tickLength: 0,

		tickDecimals: 0,

		min:2,



				font :{

					lineHeight: 13,

					style: "normal",

					weight: "bold",

					family: "sans-serif",

					variant: "small-caps",

					color: "#6F7B8A"

				}

			},

			yaxis: {

				ticks: 3,

                tickDecimals: 0,

				tickColor: "#f0f0f0",

				font :{

					lineHeight: 13,

					style: "normal",

					weight: "bold",

					family: "sans-serif",

					variant: "small-caps",

					color: "#6F7B8A"

				}

			},

			grid: {

				backgroundColor: { colors: [ "#fff", "#fff" ] },

				borderWidth:1,borderColor:"#f0f0f0",

				margin:0,

				minBorderMargin:0,							

				labelMargin:20,

				hoverable: true,

				clickable: true,

				mouseActiveRadius:6

			},

			legend: { show: false}

		});



 		$("#revenue-line-chart").UseTooltip();		







/* REVENUE DONUT CHART */

	

		var data2 = [],

			series = 3;

		var data2 = [

			{ label: "Men",  data: 35},

			{ label: "Women",  data: 65}

		];

		var revenue_donut_chart = $("#revenue-donut-chart");

		

		$("#revenue-donut-chart").bind("plotclick", function (event, pos, item) {

			if (item) {

				$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);

				plot.highlight(item.series, item.datapoint);

			}

		});

		$.plot(revenue_donut_chart, data2, {

			series: {

				pie: { 

					innerRadius: 0.4,

					show: true

				}

			},

			grid: {

				hoverable: true,

				clickable: true,

			},

			colors: ["#1FAE66", "#F85D2C "]				

		});

		

		

/* REVENUE BAR CHART */	

	

		var bar_chart_data = [ ["Jan", 10], ["Feb", 8], ["Mar", 4], ["Apr", 13], ["May", 17], ["Jun", 9], ["Jul", 10], ["Aug", 8], ["Sep", 4], ["Oct", 13], ["Nov", 17], ["Dec", 9] ];

		

        var bar_chart = $.plot(

        $("#revenue-bar-chart"), [{

            data: bar_chart_data,

 //           color: "rgba(31,174,102, 0.8)",

 			color: "#F85D2C" ,

            shadowSize: 0,

            bars: {

                show: true,

                lineWidth: 0,

                fill: true,

                fillColor: {

                    colors: [{

                        opacity: 1

                    }, {

                        opacity: 1

                    }]

                }

            }

        }], {

            series: {

                bars: {

                    show: true,

                    barWidth: 0.9,

					align: "center"

                }

            },

            grid: {

                show: true,

                hoverable: true,

                borderWidth: 0

            },

            yaxis: {

                min: 0,

                max: 20,

				show: false

            },

			xaxis: {

				mode: "categories",

				tickLength: 0,

				color: "#FFFFFF",				

			}			

        });

		

	   var previousPoint2 = null;

       $("#revenue-bar-chart").bind("plothover", function (event, pos, item) {

            $("#x").text(pos.x.toFixed(2));

            $("#y").text(pos.y.toFixed(2));

            if (item) {

                if (previousPoint2 != item.dataIndex) {

                    previousPoint2 = item.dataIndex;

                    $("#tooltip").remove();

                    var x = item.datapoint[0] + 1,

                        y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, 

								"<p class='vd_bg-green'><strong class='mgr-10 mgl-10'>" + x + " - 2013 </strong></p>" +

								"<div style='padding: 0 10px 10px;'>" +

								"<div> Sales: <strong>"+ Math.round(y)*17  +"</strong></div>" +

								"<div> Profit: <strong>$"+ Math.round(y)*280  +"</strong></div>" +

								"</div>"										

					);

                }

            }

        });



        $('#revenue-bar-chart').bind("mouseleave", function () {

            $("#tooltip").remove();

        });







/* PIE CHART */



		var pie_placeholder = $("#pie-chart");



		var pie_data = [];

		

		pie_data[0] = {

			label: "IE",

			data: 10

		}

		pie_data[1] = {

			label: "Safari",

			data: 8

		}	

		pie_data[2] = {

			label: "Opera",

			data: 8

		}				

		pie_data[3] = {

			label: "Chrome",

			data: 13

		}	

		pie_data[4] = {

			label: "Firefox",

			data: 17

		}	

		pie_data[5] = {

			label: "Other",

			data: 3

		}					

		$.plot(pie_placeholder, pie_data, {

			series: {

				pie: { 

					show: true,

					label:{

						show: true,

						radius: .5,

						formatter: labelFormatter,

						background: {

							opacity: 0

						}

					},



				}

			},

			grid: {

				hoverable: true,

				clickable: true

			},

			colors: ["#FCB660", "#ce91db", "#56A2CF", "#52D793", "#FC8660", "#CCCCCC"]

		});



		pie_placeholder.bind("plothover", function(event, pos, obj) {

			if (!obj) {

				return;

			}

			var percent = parseFloat(obj.series.percent).toFixed(2);

			$("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");

		});



		pie_placeholder.bind("plotclick", function(event, pos, obj) {

			if (!obj) {

				return;

			}

			percent = parseFloat(obj.series.percent).toFixed(2);

			alert(""  + obj.series.label + ": " + percent + "%");

		});



	function labelFormatter(label, series) {

		return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";

	}

		







		

// Notification

	  setTimeout(function() { notification("topright","notify","fa fa-exclamation-triangle vd_yellow","Welcome to Vendroid","Click on <i class='fa fa-question-circle vd_red'></i> Question Mark beside filter to take a view layout tour guide"); },1500)	 ; 

	  



});

</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>