responsive tabs with dynamic content outside the tabs

Trying to hack on a layout for a friend.

by matt_bernhardt

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ftp.greggtehennepe.com/jkl_editing_ref/js/jquery-ui-1.10.4.min.js"></script>
<script src="http://ftp.greggtehennepe.com/jkl_editing_ref/js/jquery.responsiveTabs.js"></script>
<script src="http://fonts.googleapis.com/css?family=News+Cycle|Antic+Didone|Roboto+Condensed:300"></script>
<body>
    <!--open WRAPPER - CONTAINS ALL ELEMENTS EXCEPT FOOTER-->
    <div class="wrapper">
        <!--INSERT JQUERY SHOW/HIDE MENU HERE for mobile use - see script above - rootnav - expandable show/hide from side tab - 7 main section pages-->
        <div class="panel">
            <!--open mainsection1-->
            <div class="currentrootnav">
                <div class="mainsection1" style="background-color:#f0f0f0; color:#999933; cursor: default">MAINSECTION1</div>
            </div>
            <!--close mainsection1-->
            <!--open mainsection2-->	<a class="mainsection2" href="mainsection2.html">MAINSECTION2</a>

            <!--close mainsection2-->
            <!--open mainsection3-->	<a class="mainsection3" href="mainsection3.html">MAINSECTION3</a>

            <!--close mainsection3-->
            <!--open mainsection4-->	<a class="mainsection4" href="mainsection4.html">MAINSECTION4</a>

            <!--close mainsection4-->
            <!--open mainsection5-->	<a class="mainsection5" href="mainsection5.html">MAINSECTION5</a>

            <!--close mainsection5-->
            <!--open mainsection6-->	<a class="mainsection6" href="mainsection6.html">MAINSECTION6</a>

            <!--close mainsection6-->
            <!--open mainsection7-->	<a class="mainsection7" href="mainsection7.html">MAINSECTION7</a>

            <!--close mainsection7-->
        </div>	<a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

        <!--close JQUERY SHOW/HIDE MENU-->
        <!--open CONTENT class-->
        <div class="content">
            <!--open LOGO AND LOGO-ACCENT-->
      ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     body: 100%;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
 }
 body {
     line-height: 1;
 }
 ol, ul {
     list-style: none;
 }
 blockquote, q {
     quotes: none;
 }
 blockquote:before, blockquote:after, q:before, q:after {
     content:'';
     content: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 /* end reset */
 /* --------------------------------------------------
SHARED ATTRIBUTES
-------------------------------------------------- */
 .body, .logo, .logo-homepage, .logo-accent, .textheading, .rootnav, .rootnav-homepage, #footer, #footer-homepage {
     overflow: visible;
 }
 a.logo:link, a.logo:visited, a.logo:active, .textheading, .rootnav, .rootnav-homepage, .mainsection1, .mainsection2, .mainsection3, .mainsection4, .mainsection5, .mainsection6, .mainsection7, .mainsection1-home, .mainsection2-home, .mainsection3-home, .mainsection4-home, .mainsection5-home, .mainsection6-home, .mainsection7-home, #footer, #footer-homepage, .address, .tel, .tel:visited, .tel:hover, .tel:focus, .email {
     color: #282828;
 }
 .logo, .logo-homepage, .logo-accent, .textheading, .sectiontext {
     width: 40%;
 }
...