<div class="demo-wrapper">
    
    <div class="hide-demo" title="Click to hide demo settings." onclick="hidedemo()">&nbsp;</div>
    
    <div class="show-demo" title="Click to show demo settings." onclick="showdemo()">&nbsp;</div>
        
    <div class="demo">
    
        <div class="content">
        
            <div class="header">Demo Settings</div>
            
            <div id="colorSelector"><div style="background-color:#F9F9FF"></div></div>
            
            <div class="label" style="width:75px;margin-left:5px;">Color<br /><span class="note">combine with textures below</span></div>
               
            <div class="label">Textures</div>
            
            <br class="clearer" />    
            
            <a id="brick1" class="bg" onclick="changebg('brick1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-brick1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="brick2" class="bg" onclick="changebg('brick2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-brick2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="brick3" class="bg" onclick="changebg('brick3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-brick3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a> 
            <a id="brick4" class="bg last" onclick="changebg('brick4','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-brick4.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>             
            
            <a id="wood1" class="bg" onclick="changebg('wood1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wood1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wood2" class="bg" onclick="changebg('wood2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wood2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wood3" class="bg" onclick="changebg('wood3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wood3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wood4" class="bg last" onclick="changebg('wood4','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wood4.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="metal1" class="bg" onclick="changebg('metal1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-metal1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="metal2" class="bg" onclick="changebg('metal2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-metal2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="metal3" class="bg" onclick="changebg('metal3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-metal3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="leaf1" class="bg last" onclick="changebg('leaf1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-leaf1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="pave1" class="bg" onclick="changebg('pave1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-pave1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="pave2" class="bg" onclick="changebg('pave2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-pave2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="pave3" class="bg" onclick="changebg('pave3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-pave3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="pave4" class="bg last" onclick="changebg('pave4','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-pave4.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="pave5" class="bg" onclick="changebg('pave5','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-pave5.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="rock1" class="bg" onclick="changebg('rock1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-rock1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="rock2" class="bg" onclick="changebg('rock2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-rock2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="rock3" class="bg last" onclick="changebg('rock3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-rock3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>  
            
            <a id="surface1" class="bg" onclick="changebg('surface1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-surface1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                              
            <a id="wallpaper1" class="bg" onclick="changebg('wallpaper1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wallpaper1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wallpaper2" class="bg" onclick="changebg('wallpaper2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-wallpaper2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="textile1" class="bg last" onclick="changebg('textile1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-textile1.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="textile2" class="bg" onclick="changebg('textile2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-textile2.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="textile3" class="bg" onclick="changebg('textile3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-textile3.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="textile4" class="bg" onclick="changebg('textile4','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-textile4.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>   
            <a id="textile5" class="bg last" onclick="changebg('textile5','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-texture-textile5.png','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                 
            
            <br class="clearer" />
            
            <div class="divider">&nbsp;</div>

            <div class="label">Designs*<br /><span class="note">(color agnostic)</span></div>
            
            <br class="clearer" />
            
            <a id="stripe1" class="bg" onclick="changebg('stripe1','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-stripe-light.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="stripe2" class="bg" onclick="changebg('stripe2','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-stripe-blue.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="stripe3" class="bg" onclick="changebg('stripe3','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-stripe-cream.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="stripe4" class="bg last" onclick="changebg('stripe4','repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-stripe-red.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="wave1" class="bg" onclick="changebg('wave1','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-rays-blue.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>                
            <a id="wave2" class="bg" onclick="changebg('wave2','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-rays-green-yellow.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave3" class="bg" onclick="changebg('wave3','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-rays-orange-green.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave4" class="bg last" onclick="changebg('wave4','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-rays-pink.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave5" class="bg" onclick="changebg('wave5','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-grunge-blue-grey.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave6" class="bg" onclick="changebg('wave6','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-grunge-green.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave7" class="bg" onclick="changebg('wave7','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-grunge-purple-red.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="wave8" class="bg last" onclick="changebg('wave8','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-wave-grunge-purple.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            
            <a id="abstract1" class="bg" onclick="changebg('abstract1','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-blue.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract2" class="bg" onclick="changebg('abstract2','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-green.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract3" class="bg" onclick="changebg('abstract3','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-dark.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract4" class="bg last" onclick="changebg('abstract4','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-light.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="abstract5" class="bg" onclick="changebg('abstract5','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-green-yellow.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract6" class="bg" onclick="changebg('abstract6','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-green-orange.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract7" class="bg" onclick="changebg('abstract7','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-blue-red.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="abstract8" class="bg last" onclick="changebg('abstract8','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-abstract-blue-yellow.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            
            <a id="vintage1" class="bg" onclick="changebg('vintage1','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-black.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="vintage2" class="bg" onclick="changebg('vintage2','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-blue.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>                
            <a id="vintage4" class="bg" onclick="changebg('vintage4','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-green.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="vintage5" class="bg last" onclick="changebg('vintage5','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-red.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="vintage6" class="bg" onclick="changebg('vintage6','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-purple.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="vintage3" class="bg" onclick="changebg('vintage3','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-light.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="vintage7" class="bg" onclick="changebg('vintage7','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-brown.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="vintage8" class="bg last" onclick="changebg('vintage8','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-vintage-wallpaper-gold.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a> 
            
            <a id="grunge1" class="bg" onclick="changebg('grunge1','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-grunge-1.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="grunge2" class="bg" onclick="changebg('grunge2','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-grunge-2.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="grunge3" class="bg" onclick="changebg('grunge3','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-grunge-3.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            <a id="grunge4" class="bg last" onclick="changebg('grunge4','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-grunge-4.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>               
            
            <a id="squares1" class="bg" onclick="changebg('squares1','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-squares-light.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="squares2" class="bg" onclick="changebg('squares2','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-squares-pastel.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="squares3" class="bg" onclick="changebg('squares3','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-squares-3d.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo.png')">&nbsp;</a>
            <a id="squares4" class="bg last" onclick="changebg('squares4','no-repeat','http://www.brianmcculloh.com/demos/html/Swagger/images/backgrounds/bg-squares-dark.jpg','http://www.brianmcculloh.com/demos/html/Swagger/images/swagger-logo-light-main.png')">&nbsp;</a>
            
            <br class="clearer" /><br />
            
            <span class="note">*There are 12 additional designs not pictured</span>
            
            <div class="divider">&nbsp;</div>  
            
            <div class="label">Headers</div>                 
           
            <div class="floatleft">
                <a id="lightheader" class="bg" onclick="changeheaders('lightheader','')">&nbsp;</a>
                <a id="darkheader" class="bg" onclick="changeheaders('darkheader','dark')">&nbsp;</a> 
            </div> 
            
            <br class="clearer" />            
            
        </div>
    
    </div>
    
</div>