<!-- DC Tabs CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/tabs/css/tsc_tabs.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Tabs JS -->
<script type="text/javascript" src="dreamcodes/tabs/js/tsc_tabs.js"></script>

          

<!-- DC Gradient Tabs Start -->
<section class="tsc_gradient-tabs" style="width:90%;">
  <input id="grad-tab-1" type="radio" name="radio-set1" class="grad-tab-selector-1" checked="checked" />
  <label for="grad-tab-1" class="grad-tab-label-1">About</label>
  <input id="grad-tab-2" type="radio" name="radio-set1" class="grad-tab-selector-2" />
  <label for="grad-tab-2" class="grad-tab-label-2">Services</label>
  <input id="grad-tab-3" type="radio" name="radio-set1" class="grad-tab-selector-3" />
  <label for="grad-tab-3" class="grad-tab-label-3">Work</label>
  <input id="grad-tab-4" type="radio" name="radio-set1" class="grad-tab-selector-4" />
  <label for="grad-tab-4" class="grad-tab-label-4">Contact</label>
  <div class="clear-shadow"></div>
  <div class="gradtab-content" style="height:270px;">
    
    <!-- Tab 1 Start -->
    <div class="gradtab-content-1">
      <h2>About us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <h3>How we work</h3>
      <p>Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta. Sed semper imperdiet ligula, in gravida enim gravida eget. </p>
    </div>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <div class="gradtab-content-2">
      <h2>Services</h2>
      <p>Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo.</p>
      <h3>Excellence</h3>
      <p>Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero. </p>
    </div>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <div class="gradtab-content-3">
      <h2>Portfolio</h2>
      <p>Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.</p>
      <h3>Examples</h3>
      <p>Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue. </p>
    </div>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <div class="gradtab-content-4">
      <h2>Contact</h2>
      <p>Nullam eget metus quis sapien pharetra feugiat. Fusce sit amet nulla sit amet leo ultrices sodales. Proin eu tortor sapien. Integer at elit non dolor lacinia adipiscing.</p>
      <h3>Get in touch</h3>
      <p>Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <!-- Tab 4 End -->
    
  </div>
</section>
<!-- DC Gradient Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

<!-- DC vGradient Tabs Start -->
<section class="tsc_gradient-vtabs" style="width:90%;">
  <input id="vgrad-tab-1" type="radio" name="radio-set2" class="vgrad-tab-selector-1" checked="checked" />
  <label for="vgrad-tab-1" class="vgrad-tab-label-1">About</label>
  <input id="vgrad-tab-2" type="radio" name="radio-set2" class="vgrad-tab-selector-2" />
  <label for="vgrad-tab-2" class="vgrad-tab-label-2">Services</label>
  <input id="vgrad-tab-3" type="radio" name="radio-set2" class="vgrad-tab-selector-3" />
  <label for="vgrad-tab-3" class="vgrad-tab-label-3">Work</label>
  <input id="vgrad-tab-4" type="radio" name="radio-set2" class="vgrad-tab-selector-4" />
  <label for="vgrad-tab-4" class="vgrad-tab-label-4">Contact</label>
  <div class="clear-shadow"></div>
  <div class="vgradtab-content" style="height:250px;">
    
    <!-- Tab 1 Start -->
    <div class="vgradtab-content-1">
      <h2>About us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in risus nisl. Aenean porta viverra risus, sed pulvinar orci convallis in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <h3>How we work</h3>
      <p>Cras pretium augue ut felis lacinia congue. Phasellus consequat mauris ut sapien sagittis suscipit. Integer ut lacus sit amet eros laoreet porta. Sed semper imperdiet ligula, in gravida enim gravida eget. </p>
    </div>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <div class="vgradtab-content-2">
      <h2>Services</h2>
      <p>Quisque egestas elementum justo, vitae pharetra lorem fermentum sit amet. Ut sodales ipsum quis nunc laoreet condimentum. Aliquam erat volutpat. Integer et tempor leo.</p>
      <h3>Excellence</h3>
      <p>Nullam sapien neque, accumsan sed placerat a, elementum volutpat purus. Proin feugiat, augue et hendrerit dignissim, dolor quam porttitor ligula, a dignissim felis urna id libero. </p>
    </div>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <div class="vgradtab-content-3">
      <h2>Portfolio</h2>
      <p>Nulla nec augue et metus bibendum viverra. Integer neque odio, placerat quis porttitor eget, bibendum eu risus. Suspendisse erat arcu, placerat vitae posuere sit amet, aliquam a enim. Phasellus ullamcorper blandit consequat.</p>
      <h3>Examples</h3>
      <p>Donec velit quam, commodo ac vulputate non, viverra nec massa. Quisque semper convallis sem, a congue nisi posuere a. Ut vel tortor augue. </p>
    </div>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <div class="vgradtab-content-4">
      <h2>Contact</h2>
      <p>Nullam eget metus quis sapien pharetra feugiat. Fusce sit amet nulla sit amet leo ultrices sodales. Proin eu tortor sapien. Integer at elit non dolor lacinia adipiscing.</p>
      <h3>Get in touch</h3>
      <p>Fusce nec nunc arcu. Nam in quam purus. Nullam libero mi, convallis id pellentesque ut, dictum non nulla. Mauris ac quam odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
    <!-- Tab 4 End -->
    
  </div>
</section>
<!-- DC vGradient Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

<!-- DC Flat Tabs Start -->
<div class="tsc_flat_tab_main_container" style="width:90%;">

    <ul class="flat_tabs">
        <li><a href="#ftab1">Vision</a></li>
        <li><a href="#ftab2">Integrity</a></li>
        <li><a href="#ftab3">Persistence</a></li>
        <li><a href="#ftab4">Luck</a></li>

    </ul>
    <div class="tsc_flat_tab_subcontainer" style="height:290px;">
        
        <!-- Tab 1 Start -->
        <div id="ftab1" class="tsc_flat_tab_content">
            <h2>Vision</h2>
            <br /><a href="#"><img src="http://pimg.co/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
	          <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 1 End -->
        
        <!-- Tab 2 Start -->
        <div id="ftab2" class="tsc_flat_tab_content">
            <h2>Integrity</h2>
            <br /><a href="#"><img src="http://pimg.co/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
	          <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 2 End -->
        
        <!-- Tab 3 Start -->
        <div id="ftab3" class="tsc_flat_tab_content">
            <h2>Persistence</h2>
            <br /><a href="#"><img src="http://pimg.co/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
	          <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 3 End -->
        
        <!-- Tab 4 Start -->
        <div id="ftab4" class="tsc_flat_tab_content">
            <h2>Luck</h2>
            <br /><a href="#"><img src="http://pimg.co/p/150x80" /></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque, tortor vel aliquam elementum, lectus urna accumsan orci, eget venenatis ligula nisl quis orci. Integer rhoncus venenatis aliquam. Nullam iaculis vehicula nunc et imperdiet. Nullam gravida nunc libero. </p>
	          <p>Donec lacinia, odio nec lacinia feugiat, mauris sem condimentum velit, sollicitudin malesuada velit ante quis quam. Fusce non scelerisque augue. Cras volutpat risus a metus fermentum placerat. Nulla adipiscing arcu sed odio semper lobortis. </p>
        </div>
        <!-- Tab 4 End -->
    </div>
</div>
<!-- DC Flat Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

<!-- DC Vertical Tabs Start -->
  <dl class="tsc_tabs_type_1" style="width:90%; height:370px;">
    
    <!-- Tab 1 Start -->
    <dt class="current">Vertical Tab One</dt>
    <dd class="current">
      <h2>TemplateAccess</h2>
      <p>Crafting Beautiful Templates.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <dt>Vertical Tab Two</dt>
    <dd>
      <h2>Nunc quis turpis quis libero 2</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <div class="one_third">
        <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
      <div class="one_third column-last">
        <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
      </div>
    </dd>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <dt>Vertical Tab Three</dt>
    <dd>
      <h2>Nunc quis turpis quis libero</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <dt>Vertical Tab Four</dt>
    <dd>
      <h2>Nunc quis turpis quis libero 2</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <div class="one_third">
        <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
      <div class="one_third column-last">
        <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
      </div>
    </dd>
    <!-- Tab 4 End -->
    
    <!-- Tab 5 Start -->
    <dt>Vertical Tab Five</dt>
    <dd>
      <h2>Nunc quis turpis quis libero</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 5 End -->
    
  </dl>
<!-- DC Vertical Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

<!-- DC Horizontal Tabs Start -->
  <dl class="tsc_tabs_type_2" style="width:90%;">
    
    <!-- Tab 1 Start -->
    <dt class="current">Tab One</dt>
    <dd class="current">
      <h2>Amazing Designs</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <dt>Tab Two</dt>
    <dd>
      <h2>Nunc quis turpis quis libero 2</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <div class="one_third">
        <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
      </div>
    </dd>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <dt>Tab Three</dt>
    <dd>
      <h2>Nunc quis turpis quis libero</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <dt>Tab Four</dt>
    <dd>
      <h2>Nunc quis turpis quis libero 2</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <div class="one_third">
        <p>Donec ullamcorper nulla non metus auctor firgilla. Cum sociis natoque penatibus et magnis dis parturient montees nascetur ridicuklus mus. Cras justo odio., dapibus ac faiclisis in egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Conec ullamcorper nulla non metus auctor fringila. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur riduculus mus. Craas justo odion, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
      <div class="one_third">
        <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rididulus mus. Ctas justo odio, dapobus ac facilisis in, egestas eget quam.</p>
      </div>
    </dd>
    <!-- Tab 4 End -->
    
    <!-- Tab 5 Start -->
    <dt>Tab Five</dt>
    <dd>
      <h2>Nunc quis turpis quis libero</h2>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
      <p>Aenean pellentesque auctor enim id ultricies. Cum sociis natoque penatibus el magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facukusus ubm egestas eet qyan. Nullam id dolor id nibh ultricies vehicula ut od elit. Donec ullamcorper nulla non metus auctor fringiall. Sed posuere consctetur est at labortis. Aenean lacinia bibendum nulla sed consectetur.</p>
    </dd>
    <!-- Tab 5 End -->
    
  </dl>
<!-- DC Horizontal Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

<!-- DC Google Tabs Start -->
<div class="tsc_tabs_type_3_container" style="width:90%;">
  <ul id="tsc_tabs_type_3">
    <li><a href="#" name="#gtab1">One</a></li>
    <li><a href="#" name="#gtab2">Two</a></li>
    <li><a href="#" name="#gtab3">Three</a></li>
    <li><a href="#" name="#gtab4">Four</a></li>
  </ul>
  <div id="tsc_tabs_type_3_content" style="height:290px;">
    
    <!-- Tab 1 Start -->
    <div id="gtab1">
      <h2>Lorem ipsum sit amet</h2>
      <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>
      <h3>Pellentesque habitant</h3>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
    </div>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <div id="gtab2">
      <h2>Vivamus fringilla suscipit justo</h2>
      <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
      <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <div id="gtab3">
      <h2>Phasellus non nibh</h2>
      <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
      <h3>Duis pulvinar nibh vel urna</h3>
      <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <div id="gtab4">
      <h2>Cum sociis natoque penatibus</h2>
      <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
      <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
      <h3>Imperdiet sem interdum nec</h3>
      <p>Mauris rhoncus tincidunt libero quis fringilla.</p>
    </div>
    <!-- Tab 4 End -->
    
  </div>
</div>
<!-- DC Google Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->
 
<!-- DC Google Tabs Settings -->
  <script type="text/javascript">
/* Tabs 3 */
    function resetTabs(){
        $("#tsc_tabs_type_3_content div").hide(); //Hide all content
        $("#tsc_tabs_type_3 a").attr("id",""); //Reset id's      
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab


    (function(){
        $("#tsc_tabs_type_3_content div").hide(); // Initially hide all content
        $("#tsc_tabs_type_3 li:first a").attr("id","current"); // Activate first tab
        $("#tsc_tabs_type_3_content div:first").fadeIn(); // Show first tab content
        
        $("#tsc_tabs_type_3 a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tsc_tabs_type_3 li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
        }
    })()
    
  </script>

          

<!-- DC Opera Tabs Start -->
<div class="tsc_tabs_type_4_container" style="width:90%;">  
  <ul id="tsc_tabs_type_4">
    <li><a href="#" title="red-tab1">One</a></li>
    <li><a href="#" title="red-tab2">Two</a></li>
    <li><a href="#" title="red-tab3">Three</a></li>
    <li><a href="#" title="red-tab4">Four</a></li>
  </ul>
  <div id="tsc_tabs_type_4_content" style="height:240px;">
    
    <!-- Tab 1 Start -->
    <div id="red-tab1">
      <h2>Lorem ipsum sit amet</h2>
      <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>
      <h3>Pellentesque habitant</h3>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
    </div>
    <!-- Tab 1 End -->
    
    <!-- Tab 2 Start -->
    <div id="red-tab2">
      <h2>Vivamus fringilla suscipit justo</h2>
      <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
      <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <!-- Tab 2 End -->
    
    <!-- Tab 3 Start -->
    <div id="red-tab3">
      <h2>Phasellus non nibh</h2>
      <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
      <h3>Duis pulvinar nibh vel urna</h3>
      <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <!-- Tab 3 End -->
    
    <!-- Tab 4 Start -->
    <div id="red-tab4">
      <h2>Cum sociis natoque penatibus</h2>
      <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
      <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
      <h3>Imperdiet sem interdum nec</h3>
      <p>Mauris rhoncus tincidunt libero quis fringilla.</p>
    </div>
    <!-- Tab 4 End -->
    
  </div>
</div>  
<!-- DC Opera Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

<!-- DC Opera Tabs Settings -->
<script type="text/javascript">
/* Tabs 4 */
$(document).ready(function() {
	$("#tsc_tabs_type_4_content div").hide(); // Initially hide all tsc_tabs_type_4_content
	$("#tsc_tabs_type_4 li:first").attr("id","current"); // Activate first tab
	$("#tsc_tabs_type_4_content div:first").fadeIn(); // Show first tab tsc_tabs_type_4_content
    
    $('#tsc_tabs_type_4 a').click(function(e) {
        e.preventDefault();        
        $("#tsc_tabs_type_4_content div").hide(); //Hide all tsc_tabs_type_4_content
        $("#tsc_tabs_type_4 li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show tsc_tabs_type_4_content for current tab
    });
})();
</script>

          

<!-- DC Sliding Tabs CSS -->
<link rel="stylesheet" href="dreamcodes/tabs/css/coda-slider-2.0.css" type="text/css" media="screen" />

<!-- DC Sliding Tabs JS -->
<script type="text/javascript" src="dreamcodes/jquery.easing.js"></script> 
<script type="text/javascript" src="dreamcodes/tabs/js/jquery.coda-slider-2.0.js"></script> 

<!-- DC Sliding Tabs Settings -->
<script type="text/javascript">
$().ready(function() {
       $('#coda-slider-1').codaSlider({
           dynamicArrows: false, // show side tab arrows
           dynamicTabs: true,
           autoHeight: true, // adjust height of tab automatically
           autoSlide: true, // autoslide tabs
           autoSlideInterval: 3000, // 3000 = 3 seconds
           firstPanelToLoad: 1 // panel to load onstartup
       });
   });
		 </script>
  <style type="text/css">
#coda-slider-1, #coda-slider-1 .panel { width: 666px; }	/* width of tab container */
</style>

<!-- DC Sliding Tabs Start -->
  <div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-1">
      
      <!-- Tab 1 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
        </div>
      </div>
      <!-- Tab 1 End -->
      
      <!-- Tab 2 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 2</h2>
          <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
        </div>
      </div>
      <!-- Tab 2 End -->
      
      <!-- Tab 3 Start -->
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 3</h2>
          <p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
        </div>
      </div>
      <!-- Tab 3 End -->
      
      <!-- Tab 4 Start -->      
      <div class="panel">
        <div class="panel-wrapper">
          <h2 class="codatitle">Tab 4</h2>
          <p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
        </div>
      </div>
      <!-- Tab 4 End -->
      
    </div>
  </div>
<!-- DC Sliding Tabs End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->