<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />

<script>
$(function() {
    $('.toggleLink').click(function(e) {
        e.preventDefault();
        $(this).next().slideToggle();
    });
});
</script>

<ul class="tabsInnerRight">
    <li><a href="#calendar">Calendar</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#cast">Cast and Crew</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#buzz">Buzz</a></li>
    <li><a href="#notes">Notes</a></li>
</ul>    

<div id="calendar" class="tab_content">
    <h3>Name of Play</h3>
    <table width="520" border="1" cellspacing="0" cellpadding="0" class="tableCalendar">
      <tr>
        <td>Date</td>
        <td>Time</td>
        <td>Venue, City</td>
        <td class="orangeNoBold">Book Now/Full</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Time</td>
        <td>Venue, City</td>
        <td class="orangeNoBold">Book Now/Full</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Time</td>
        <td>Venue, City</td>
        <td class="orangeNoBold">Book Now/Full</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Time</td>
        <td>Venue, City</td>
        <td class="orangeNoBold">Book Now/Full</td>
      </tr>
    </table>

<a href="" class="toggleLink rightFloat">More&gt;&gt;</a>

</div> <!-- end div calendar -->

<div id="about" class="tab_content">
    
    <h3 class="borderYellow paddingBottom">PRODUCTION NAME</h3>
    
    <div class="paddingTop"><strong>Group: </strong>Group Name</div>
    <div><strong>Languages: </strong>Hindi, English, etc.</div>
    <div>From 2011 to 2013</div>
    <div><strong>No of Shows: </strong>range/number</div>
    <div class="borderYellow">    <a href="" class="toggleLink rightFloat">Book Now>></a>   
    <br /><br />
    </div>
    
    <br />
 
    <div><strong>Writers: </strong> Name (playwright), name (adaptation), name (translation)</div>
    <div><strong>Director: </strong>Hindi, English, etc.</div>
    <div><strong>Credits: name (research), name (music)</strong></div>
    <div class="borderYellow">    <a href="" class="toggleLink rightFloat">See full credits>></a><br /><br /></div>   

    <br />
    
    <div>
        <p>Some copy here that is a synopsis in a paragraph. Some copy here that is a synopsis in a paragraph.
	Some copy here that is a synopsis in a paragraph. Some copy here that is a synopsis in a paragraph.</p>
    </div>
    
        <div class="borderYellow">
            <a href="">Contact</a>
            <div>Group website</div>
        <br />
	</div>
        
        <br />
        
        <div class="borderYellow">
            <h5 class="orangeInnerRight">Awards</h5>
            <div>Name of award, name of awardee, year, link</div>
            <div>Name of award, name of awardee, year, link</div>
            <div>Name of award, name of awardee, year, link</div>
            <div>Name of award, name of awardee, year, link</div>
        <br />
	</div>
        
        <br />
        
        <h5 class="orangeInnerRight">Links</h5>
        <a href="">Link to article</a>
        <div>One line desc</div>
        <br />
        <a href="">Link to article</a>
        <div>One line desc</div>
        <br />
        <a href="">Link to article</a>
         <div>One line desc</div>
         <br />
</div> <!-- end about -->

<div id="cast" class="tab_content">
</div>

<div id="gallery" class="tab_content">
    <h3 class="orange">Please refer to Gallery in Script Archive, with additional information below.</h3>
    
    <h3 class="orange">Links</h3>
    <div><a href="">Link</a></div>
    <div><a href="">Link</a></div>
    <div><a href="">Link</a></div>
    <div><a href="">Link</a></div>
    <a href="" class="rightFloat">More>></a>
</div> <!-- end gallery -->

<div id="buzz" class="tab_content">
       <h3 class="orangeInnerRight">Reviews</h3>
        <a href="">Link to article</a>
        <div>One line desc</div>
        <br />
        <a href="">Link to article</a>
        <div>One line desc</div>
        <br />
        <a href="">Link to article</a>
         <div>One line desc</div>
         <br />
    <a href="" class="rightFloat">More>></a>
    <br />
    <h3 class="orange">Comments</h3>
    <div class="borderYellow">
        <div>Comments Comments Comments Comments Comments Comments</div>
        <div class="rightFloat">-Posted by date, time</div>
        <br /><br />
    </div>

    <div class="borderYellow">
        <br />
        <div>Comments Comments Comments Comments Comments Comments</div>
        <div class="rightFloat">-Posted by date, time</div>
        <br /><br />
    </div>

    <div class="borderYellow">
        <br />
        <div>Comments Comments Comments Comments Comments Comments</div>
        <div class="rightFloat">-Posted by date, time</div>
        <br /><br />
    </div>
    <br />
    <a href="" class="rightFloat">More>></a>

</div> <!-- end buzz -->

<div id="notes" class="tab_content">
    <h3 class="orange">Kindly refer to notes in script archive. But instead of Posted by Name, Date, Time, make it - date, time</h3>
</div> <!-- end notes -->

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