<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>SwagMag HTML Theme</title>
    
	<link rel="stylesheet" href="style.css" type="text/css" /> <!-- the main structure and main page elements style --> 
    
    <link rel="stylesheet" href="js/js.css" type="text/css" media="screen" /> <!-- styles for the various jquery plugins -->
    
    <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie7.css" />
    <![endif]-->
    
    <!--[if IE 8]>
            <link rel="stylesheet" type="text/css" href="css/ie8.css" />
    <![endif]-->
    
    <!--[if gt IE 8]>
            <link rel="stylesheet" type="text/css" href="css/ie9.css" />
    <![endif]-->  
	    
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
	
</head>

<body> 	

	<?php include("inc/demo-panel.php"); //get the dmeo panel ?>
	
	<div id="top-menu-wrapper"> <!-- begin top menu -->
    
    	<div id="top-menu">
            
            <div class="container mid">
            
				<div class="menu">
                    <ul>
                        <li><a href="page-jquery-extras.php">jQuery Extras</a>
                            <ul>
                                <li><a href="page-jquery-extras.php">Sliders</a></li>
                                <li><a href="page-jquery-extras.php">Toggles</a></li>
                                <li><a href="page-jquery-extras.php">Tabs</a></li>
                            </ul>
                        </li>
                        <li><a href="page-fancy-boxes.php">Styled Goodies</a>
                            <ul>
                                <li><a href="page-fancy-boxes.php">Fancy Boxes</a></li>
                                <li><a href="page-styled-lists.php">Styled Lists</a>
                                	<ul>
                                    	<li><a href="#">Sample Menu Item</a></li>
                                        <li><a href="#">Sample Menu Item</a></li>
                                        <li><a href="#">Sample Menu Item That Is Really Really Really Super Long!</a></li>
                                    </ul>
                                </li>
                                <li><a href="page-buttons.php">Buttons</a></li>
                                <li><a href="page-columns.php">Columns</a></li>
                            </ul>
                        </li>
                        <li><a href="404.php">Custom 404 Page</a></li>
                        <li><a href="page-full-width.php">Full-Width page</a></li>
                    </ul>                            
				</div> 
                
            </div>
            
            <!-- social links -->
            
            <div id="top-widget">
                                        
                <div class="top-social">
                
                    <a href="#" class="rss">&nbsp;</a>
                    
                    <a href="http://www.facebook.com/pages/Outer-Spice-Web-Company/144008024120" class="facebook">&nbsp;</a>
                    
                    <a href="http://twitter.com/outerspice" class="twitter">&nbsp;</a>
                
                </div>
                                
            </div>     
                        
            <div id="search">
            
                <div class="wrapper">
                
                    <div class="inner">
            
                        <!-- SEARCH -->  
                        <form method="get" id="searchform" action="search.php">                             
                            <input type="text" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}" name="s" id="s" />          
                        </form>                       
                        
                    </div>
                    
                </div>
            
            </div>
                        
            <br class="clearer" />
        
        </div>
    
    </div>
    
    <div id="top-menu-shadow">&nbsp;</div> <!-- end top menu -->
    
    <div id="page-highlight">&nbsp;</div> <!-- the subtle white highlighat at the top of the page background-->
	
	<div id="page-wrapper"> <!-- everything below the top menu should be inside the page wrapper div -->
    	    
        <div id="main-menu-wrapper"> <!-- begin main menu --> 
        
            <div id="main-menu">
            
                <a href="index.php" class="left-cap">&nbsp;</a>
                
                <ul>
                	<li><a href="index-full-width.php">Full-Width Homepage</a></li>                	
                    <li><a href="page-contributors.php">Contributors Page</a>
                    	<ul>
                        	<li><a href="#">Sub Menu Item</a></li>
                            <li><a href="#">Sub Menu Item</a>
                            	<ul>
                                	<li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Sub Menu Item</a></li>
                        </ul>
                    </li>
                    <li><a href="search.php">Search Listing</a></li>
                    <li><a href="single-post.php#comments">Stylish Comments</a></li>
                </ul>  
                                  
                <div class="right-cap">&nbsp;</div>
                
            </div>
            
            <br class="clearer" />
            
        </div> <!-- end main menu -->
        
		<div id="logo-bar"> <!--begin the main header logo area-->
        
        	<div id="logo-wrapper">
            
            	<div id="logo"><!--logo and section header area-->
        
					<a href="index.php">
                        <img id="site-logo" alt="Swagger" src="images/swagger-logo.png" />
                    </a>
                                        
                </div>
                
                <br class="clearer" />
                
                <div class="subtitle"></div>
                
            </div>  
            
            <div id="ad-header">  <!--header ad--> 
                <a href="http://themeforest.net/?ref=outerspice"><img src="http://demos.brianmcculloh.com/continuum/files/2011/03/ad-top.png" alt="ad" /></a>        
            </div>
                        
            <br class="clearer" />
            
		</div> <!--end the logo area -->
        
        <div id="content-wrapper-top">&nbsp;</div> <!--the top rounded edge of the main white content area-->
        
        <div id="content-wrapper"> <!--begin main white content wrapper-->
            
        	<div id="cat-menu-wrapper">
            
                <div id="cat-menu-top-left">&nbsp;</div> <!--round the top left corner-->
                
                <div id="cat-menu-top-right">&nbsp;</div> <!--round the top right corner-->
            
                <div id="cat-menu-inner">
                
                	<div class="left-cap">&nbsp;</div>
                
                    <div id="cat-menu" class="cat-menu">
                
						<ul>
                        	<li><a href="archive-a.php">Layouts</a>
                            	<ul>
                                	<li><a href="archive-a.php">2-panel Grid with Sidebar</a></li>
                                    <li><a href="archive-b.php">Vertical Blog Listing with Sidebar</a></li>
                                    <li><a href="archive-c.php">3-panel Grid with Sidebar</a></li>
                                    <li><a href="archive-d.php">3-panel Full-Width Grid</a></li>
                                    <li><a href="archive-e.php">4-panel Full-Width Grid</a></li>
                                </ul>
                            </li>
                            <li><a href="single-post.php">Single Blog Post</a></li>
                            <li><a href="single-review-numbers.php">Single Reviews</a>
                            	<ul>
                                	<li><a href="single-review-numbers.php">Number Ratings</a></li>
                                    <li><a href="single-review-percentages.php">Percentage Ratings</a></li>
                                    <li><a href="single-review-stars.php">Star Ratings</a></li>
                                    <li><a href="single-review-letter-grades.php">Letter Grade Ratings</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Drop Down Menu</a>
                            	<ul>
                                	<li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Second Level Drop Down</a>
                                    	<ul>
                                        	<li><a href="#">Sub Menu Item</a></li>
                                            <li><a href="#">Sub Menu Item</a></li>
                                            <li><a href="#">Sub Menu Item</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                    <li><a href="#">Sub Menu Item</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Menu Item</a></li>
                            <li><a href="#">Menu Item</a></li>
						</ul>                             
                       
                        <div id="last-item">&nbsp;</div> <!--add the last border to round out the menu item separation-->
                        							
                        <div id="random-article">
                    
                            <a title="Random Article" href="#"><img alt="Random Article" src="images/random-article.png" /></a>
                        
                        </div>
						                    
                    </div> 
                    
                    <div class="right-cap">&nbsp;</div>
                    
                    <br class="clearer" />
                                    
                </div>
                
                <div id="cat-menu-bottom-left">&nbsp;</div> <!--round the bottom left corner-->
                
                <div id="cat-menu-bottom-right">&nbsp;</div> <!--round the bottom right corner-->
            
            </div>
            
            <br class="clearer" />

			<br />    