{% extends 'noel/base.html' %}

{% block title %}India Theatre Forum: Home {% endblock %}

{% block extra_head %}
	<link rel="stylesheet" type="text/css" href="/static/css/noel/home.css" />
    <script type="text/javascript" src="/static/js/frontpage.js"></script>
{% endblock %}

{% block content %}
<div id="center">
	<div id="woodPng">
	</div>  
    
  <div id="centerContent" class="centerContent">
   	<div id="shadow">
   	</div>
    
    <div id="image">
   	  <img src="/static/images/noel/banner.jpg" width="469" height="282"alt="banner-image" id="banner">
      <p id="textTop">Welcome to the India Theatre Forum </p>
      <p id="textBottom"> A place where you can come and get, give, share, exchange all sorts of information, ideas, resources and more. </p>
      <div id="buttonBanner">
        <div id="buttonOne" class="buttons buttonsSelected"></div>
        <div id="buttonTwo" class="buttons buttonsSelected"></div>
        <div id="buttonThree" class="buttons buttonsSelected"></div>
      </div>
    </div>
    
    <div id="news" class="tab">
      <h3 class="tabHeader">NEWS</h3>
      <div id="newsTwitter">
      	<ul id="selection">
			<li class="newsTwitterTab selected">Twitter</li>
			<li class="newsTwitterTab selected">Website Updates</li>
	  	</ul>

	  <div id="contentTab">
	  	<ul>
            {% for t in tweets %}
                <li>{{ t.text }}</li>
            {% endfor %}
<!--
    		<li>@dootah there's a new play this weekend. <span>bit.ly/xYr3dD</span></li>
    		<li>@dootah there's a new play this weekend. <span>bit.ly/xYr3dD</span></li>
    		<li>@dootah there's a new play this weekend. <span>bit.ly/xYr3dD</span></li>
    		<li>@dootah there's a new play this weekend. <span>bit.ly/xYr3dD</span></li>
    		<li>@dootah there's a new play this weekend. <span>bit.ly/xYr3dD</span></li>
-->
        </ul>
      </div>
      
      <div id="triangle">
      	<div id="triangleUp">&#x25B2</div>
        <div id="triangleDown">&#x25BC</div>
      </div>
	</div>
</div>
	
    	<div id="events" class="tab">
      		<h3 class="tabHeader">EVENTS</h3>
    	</div>
    
    <div id="slider">
    	<img src="/static/images/noel/arrow-left.png" width="28" height="42" alt="arrow-left" id="arrowLeft">
 		<img src="/static/images/noel/arrow-right.png" width="28" height="42" alt="arrow-right" id="arrowRight">     
  <ul id="sliderTabs">
    {% for b in boxes %}
        <li class="tab" style="background-image:url('{{b.image.url}}');background-position:0px {{b.imageTop}}px;">
            <h4 class="tabHeader">{{ b.title }}</h4>
            <div class="textTab">
                <p><span class="boldText">{{ b.boldText }}</span> {{ b.normalText }}</p>
            </div>
            <a href="{{ b.url }}" class="buttonTab"> Learn more </a>
        </li>

    {% endfor %}
<!--
        	<li id="scriptArchive" class="tab">
          		<h3 class="tabHeader"> SCRIPT <span>ARCHIVE</span> </h3>
          		<div class="textTab">
            		<p><span>Browse for scripts and share yours,</span> pick the license that suits you.</p>
          		</div>
        		<a href="" class="buttonTab"> Learn more </a>
            </li>
        	<li id="bibliography" class="tab">
          		<h3 class="tabHeader"> BIBLIOGRAPHY </h3>
          		<div class="textTab">
            		<p><span>Reference material,</span> documents and links related to theatre and theatre practice.</p>
          		</div>
          		<a href="" class="buttonTab"> Learn more </a>
            </li>
            <li id="itfProjects" class="tab">
          		<h3 class="tabHeader"> ITF <span>PROJECTS</span> </h3>
          		<div class="textTab">
            		<p><span>What we're about and everything we do.</span> In excruciating detail.</p>
          		</div>
          		<a href="" class="buttonTab"> Learn more </a> 
            </li>
        	<li id="eRang" class="tab">
          	<h3 class="tabHeader"> E-<span>RANG</span> </h3>
          	<div class="textTab">
            	<p><span>Our fortnightly theatre e-newsletter.</span> Read, subscribe and contribute!</p>
            </div>
          	<a href="" class="buttonTab"> Learn more </a> 
            </li>
        	<li id="surveys" class="tab">
          	<h3 class="tabHeader"> SURVEYS</span> </h3>
            <div class="textTab">
            	<p><span>Fill out our surveys,</span> and help us consolidate theatre data from around India.</p>
          	</div>
          	<a href="" class="buttonTab"> Learn more </a> 
            </li>
        	<li id="offersNeeds" class="tab">
          	<h3 class="tabHeader"> OFFERS/<span>NEEDS</span> </h3>
          	<div class="textTab">
            	<p><span>Get, give, exchange and share</span> all sorts of information, ideas, resources and more.</p>
          	</div>
          	<a href="" class="buttonTab"> Learn more </a> 
            </li>
       		<li id="bestPractice" class="tab">
            <h3 class="tabHeader"> BEST <span>PRACTICE</span> </h3>
            <div class="textTab">
            	<p><span>Unsure about a situation?</span> Need to know the best way to proceed? Here are some stories & guidelines to help you.</p>
            </div>
            <a href="" class="buttonTab"> Learn more </a> </li>
-->
      </ul>
    </div>
  </div>
</div>

{% endblock %}