From 1de7e2d705714cdb9588c149bb70b68a0aa27e5c Mon Sep 17 00:00:00 2001
From: Karen <karen.menezes@gmail.com>
Date: Sat, 17 Sep 2011 00:30:17 +0530
Subject: [PATCH] added tabs for meeting for inner details

---
 itf/static/css/modules/tabsinnerright.css   | 57 +++++++++++++++++++++
 itf/static/css/noel/inner-details.css       |  3 +-
 itf/templates/modules/festival/meeting.html | 43 ++++++++++++++++
 3 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 itf/static/css/modules/tabsinnerright.css
 create mode 100644 itf/templates/modules/festival/meeting.html

diff --git a/itf/static/css/modules/tabsinnerright.css b/itf/static/css/modules/tabsinnerright.css
new file mode 100644
index 0000000..641feed
--- /dev/null
+++ b/itf/static/css/modules/tabsinnerright.css
@@ -0,0 +1,57 @@
+
+ul.tabsInnerRight {
+/*float: left;*/
+list-style: none;
+height: 32px; /*--Set height of tabs--*/
+border-bottom: 1px solid #e0e0e0;
+border-left: 1px solid #e0e0e0;
+width: 100%;
+margin:0 auto;
+}
+
+
+ul.tabsInnerRight li {
+float: left;
+height: 31px; /*--Subtract 1px from the height of the unordered list--*/
+line-height: 31px; /*--Vertically aligns the text within the tab--*/
+border: 1px solid #e0e0e0;
+border-left: none;
+margin-bottom: -1px; /*--Pull the list item down 1px--*/
+overflow: hidden;
+position: relative;
+background: #FFF;
+}
+
+ul.tabsInnerRight li a {
+text-decoration: none;
+color: #FFB80F;
+display: block;
+font-size: 14px;
+padding: 0 20px;
+border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
+outline: none;
+}
+
+ul.tabsInnerRight li a:hover {
+background: #f2f2f2;
+}
+
+html ul.tabsInnerRight li.active, html ul.tabsInnerRight li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
+background: #fff;
+border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
+}
+
+.tab_container {
+border:1px solid #e0e0e0;
+border-top: none;
+overflow: hidden;
+clear: both;
+float: left; 
+width: 100%;
+background: #fff;
+}
+
+.tab_content {
+padding: 20px;
+font-size: 14px;
+}
diff --git a/itf/static/css/noel/inner-details.css b/itf/static/css/noel/inner-details.css
index 13ea90b..37e3679 100644
--- a/itf/static/css/noel/inner-details.css
+++ b/itf/static/css/noel/inner-details.css
@@ -13,7 +13,8 @@ margin-top:20px;
 border-radius:8px;
 -moz-box-shadow:2px 3px 20px #252425;
 -webkit-box-shadow:2px 3px 20px #252425;
-box-shadow:2px 3px 20px #252425;}
+box-shadow:2px 3px 20px #252425;
+overflow:auto;}
 
 .itfInfoSub
 {color:#f7bd00;
diff --git a/itf/templates/modules/festival/meeting.html b/itf/templates/modules/festival/meeting.html
new file mode 100644
index 0000000..0f820a6
--- /dev/null
+++ b/itf/templates/modules/festival/meeting.html
@@ -0,0 +1,43 @@
+<link rel="stylesheet" href="../static/css/modules/tabsinnerright.css" type="text/css" />
+
+<ul class="tabsInnerRight">
+    <li><a href="#tab1">Tab1</a></li>
+    <li><a href="#tab2">Tab2</a></li>
+    <li><a href="#tab3">Tab3</a></li>
+    <li><a href="#tab4">Tab4</a></li>
+    <li><a href="#tab5">Tab5</a></li>
+    <li><a href="#tab6">Tab6</a></li>    
+</ul>
+
+<div class="tab_container">
+    <div id="tab1" class="tab_content">
+       Organised 50 years after the original Drama Seminar in 1957, the Not the Drama Seminar (NTDS) brought together theatre practitioners from all across the country to convene at Ninasam, Heggodu in March 2008. This seminar meditated on the nature of theatre in India today, on how we got to where we are. The attempt was to understand 'Indian Theatre' in all its multiplicity and diversity, bringing these several faces of Indian theatre face to face, and problemetize the issues that arise therein. These ideas were exchanged through a series of presentations and discussions over five days, and each day ended with a performance. <!--Content-->
+    </div>
+    <div id="tab2" class="tab_content">
+      b <!--Content-->
+    </div>
+</div>
+
+<script type="text/javascript">
+$(document).ready(function() {
+
+	//When page loads...
+	$(".tab_content").hide(); //Hide all content
+	$("ul.tabsInnerRight li:first").addClass("active").show(); //Activate first tab
+	$(".tab_content:first").show(); //Show first tab content
+
+	//On Click Event
+	$("ul.tabsInnerRight li").click(function() {
+
+		$("ul.tabsInnerRight li").removeClass("active"); //Remove any "active" class
+		$(this).addClass("active"); //Add "active" class to selected tab
+		$(".tab_content").hide(); //Hide all tab content
+
+		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
+		$(activeTab).fadeIn(); //Fade in the active ID content
+		return false;
+	});
+
+
+});
+</script>