new templates plugged in

itf/boxes/views.py

@@ -10,7 +10,10 @@ import json
 
 def mainPage(request):
 	d = {'title': 'India Theatre Forum'}
-	return render_to_response("noel/home.html", d)
+	return render_to_response("noel/index.html", d)
+
+def innerPage(request):
+	return render_to_response("noel/bestpractices.html")
 
 def getPage(request):
   '''

itf/static/css/noel/home.css

@@ -0,0 +1,308 @@
+#center
+{width:100%;
+height:680px;
+background:url(/static/images/noel/wooden1.jpg) repeat;} 
+
+.centerContent
+{width:960px;
+height:680px;
+margin-right:auto;
+margin-left:auto;} 
+
+#image
+{position:relative;
+float:left;}
+
+#banner
+{-moz-border-radius:8px;
+-webkit-border-radius:8px;
+border-radius:8px;
+margin-top:16px;
+margin-left:9px;
+-moz-box-shadow:2px 3px 20px #252425;
+-webkit-box-shadow:2px 3px 20px #252425;
+box-shadow: 2px 3px 20px #252425;}/*FF showing top image borders, because of FF 3.6 bug*/
+
+#textTop
+{width:300px;
+font-size:30px; /*character limit? also break in text to be considered*/
+color:#FFF;
+line-height:40px;
+text-align:left;
+position:absolute;
+top:116px;
+padding-left:30px;
+z-index:4;} 
+
+#textBottom
+{width:356px;
+font-size:16px; /*character limit to be specified in js*/
+line-height:1.4;
+color:#000;
+padding:4px 18px;
+background-color:rgb(234, 234, 234); /*fallback for old browsers*/
+background-color:rgba(234, 234, 234, 0.8);
+position:absolute;
+bottom:20px;
+margin-left:9px;
+z-index:4;} 
+
+#buttonBanner
+{position:absolute;
+left:438px;
+bottom:24px;}
+
+.buttons 
+{width:12px;
+height:12px;
+background-color:transparent !important; /*is this right?*/
+opacity:0.6;
+z-index:4;
+margin-top:8px;
+border:2px inset #FFF;
+cursor:pointer;} 
+
+.buttons:hover 
+{opacity:0.9;}
+
+.buttonsSelected 
+{background-color:#e3e2e0;
+opacity:0.6;}
+
+.tab
+{width:230px;
+height:282px;
+background-color:#FFF;
+position:relative;
+-moz-border-radius:8px; 
+-webkit-border-radius:8px; 
+border-radius:8px; 
+margin-left:9px;
+-moz-box-shadow:2px 3px 20px #252425;
+-webkit-box-shadow:2px 3px 20px #252425;
+box-shadow:2px 3px 20px #252425;}
+
+#news, #events
+{margin-top:16px;
+float:left;}
+
+#newsTwitter
+{margin-left:12px;
+font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
+font-size:14px;
+color:#ff8400;
+text-align:justify;
+margin-top:10px;}
+
+#newsTwitter li
+{list-style:none;
+float:left;
+padding:4px;}
+
+#newsTwitter li a
+{text-decoration:none;} /*Sanj, this is for dynamic links generated from Twitter feeds.*/
+
+#selection
+{padding-left:12px;}
+
+.newsTwitterTab 
+{-moz-border-radius-topright:8px; 
+-webkit-border-top-right-radius:8px;
+border-top-right-radius:8px; 
+-moz-border-radius-topleft:8px; 
+-webkit-border-top-left-radius:8px; 
+border-top-left-radius:8px;
+border-top:1px solid #ececec;
+-moz-box-shadow:-8px 0px 19px #e0dfdf;
+-webkit-box-shadow:-8px 0px 19px #e0dfdf;
+box-shadow:-8px 0px 19px #e0dfdf;
+color:#ffb80f;
+cursor:pointer;
+margin-right:6px;}
+
+.selected
+{-moz-border-radius-topright:8px; 
+-webkit-border-top-right-radius:8px;
+border-top-right-radius:8px; 
+-moz-border-radius-topleft:8px; 
+-webkit-border-top-left-radius:8px; 
+border-top-left-radius:8px;
+border:1px solid #ececec;
+padding:2px 6px;
+color:#ffb80f;
+-moz-box-shadow:-3px -1px 12px #c6c6c6;
+-webkit-box-shadow:-3px -1px 12px #c6c6c6;
+box-shadow:-3px -1px 12px #c6c6c6;
+cursor:pointer;
+margin-right:6px;
+font-weight:bold;}
+
+#contentTab 
+{padding:6px 26px 10px 6px;
+clear:both;}
+
+#contentTab ul li span
+{color:#0024ff;}
+
+#contentTab li
+{list-style:none;}
+
+#triangle
+{font-size:12px;
+color:#929292;
+position:relative;}/*not showing in IE*/
+
+#triangleUp
+{position:absolute;
+right:12px;
+bottom:0px;
+cursor:pointer;}
+
+#triangleDown
+{position:absolute;
+top:180px;
+right:12px;
+cursor:pointer;}
+
+#slider
+{width:960px;
+height:296px;
+clear:both;
+margin-left:auto;
+margin-right:auto;
+padding-top:37px;
+overflow-y:hidden;
+clear:both;
+position:relative;}
+
+#arrowLeft
+{position:absolute;
+top:49%;
+z-index:5;
+left:10px;}
+
+#arrowRight
+{position:absolute;
+top:49%;
+z-index:5;
+right:10px;}
+
+
+#sliderTabs /*at 800 res, we have different probs in different browsers with the tabs, ok to give position absolute to the ul?*/
+{width:4000px;} 
+
+ul#sliderTabs li
+{float:left;}
+
+.tabHeader
+{font-size:24px;
+color:#ffb400;
+text-align:center;
+margin-top:10px;
+position:relative;
+z-index:1;}
+
+.tabHeader span
+{font-weight:bold;}
+
+.textTab
+{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
+font-size:12px;
+color:#3c3c3c;
+text-align:justify;
+padding-left:20px;
+padding-right:20px;
+position:absolute;
+top:178px;}
+
+a.buttonTab 
+{width:90px; 
+font-size:14px; /*if someone increases their font size, then what?*/
+color:#FFF;
+text-align:center;
+text-decoration:none;
+padding:2px 3px 5px 3px;
+background-color:#feb200; /*fallback for old browsers*/
+background:-moz-linear-gradient(top, #e77400 0%, #feb200);
+background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200)); /*w/o prefix not mentioned here for a reason???*/
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+-moz-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
+-webkit-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
+box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
+text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
+position:absolute;
+bottom:20px;
+right:20px;
+cursor:pointer;
+z-index:3;}/*looks poor in IE*/
+
+a.buttonTab:link, a.buttonTab:visited
+{text-decoration:none;
+color:#FFF;}
+
+a.buttonTab:hover
+{width:90px;
+font-size:14px;
+color:#FFF;
+text-decoration:none;
+padding:2px 3px 5px 3px;
+text-align:center;
+background-color:#e77400; /*fallback for old browsers*/
+background:-moz-linear-gradient(top, #feb200 0%, #e77400);
+background:-webkit-gradient(linear, left top, left bottom, from(#feb200), to(#e77400));
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+-moz-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
+-webkit-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
+box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
+text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
+position:absolute;
+bottom:20px;
+right:20px;
+cursor:pointer;}/*needs to made into a link, looks poor IE*/
+
+a.buttonTab:active 
+{text-decoration:none;
+color:#FFF;}
+
+.textTab p span
+{font-weight:bold;}
+
+#scriptArchive
+{background-image:url(/static/images/noel/script-tab.jpg);
+background-repeat:no-repeat;
+background-position:0px 30px;}
+
+#bibliography
+{background-image:url(/static/images/noel/bibliography-tab.jpg);
+background-repeat:no-repeat;
+background-position:0 43px;}
+
+#itfProjects
+{background-image:url(/static/images/noel/itf-tab.jpg);
+background-repeat:no-repeat;}
+
+#eRang
+{background-image:url(/static/images/noel/erang-tab.jpg);
+background-repeat:no-repeat;
+background-position:0 43px;}
+
+#surveys
+{background-image:url(/static/images/noel/surveys-tab.jpg);
+background-repeat:no-repeat;
+background-position:0 33px;}
+
+#offersNeeds
+{background-image:url(/static/images/noel/offers-needs-tab.jpg);
+background-repeat:no-repeat;
+background-position:0 43px;}
+
+#bestPractice
+{background-image:url(/static/images/noel/best-tab.jpg);
+background-repeat:no-repeat;
+background-position:0 43px;}
+
+

itf/static/css/noel/inner.css

@@ -0,0 +1,252 @@
+#centerInner
+{background:url(/static/images/noel/wooden1.jpg) repeat;
+width:100%;}
+
+.centerInnerContent
+{width:960px;
+margin-right:auto;
+margin-left:auto;
+position:relative;} 
+
+#leftColumn
+{width:306px;
+height:620px; /*SANJ to change height in JS according to screen*/
+background-color:#FFF;
+margin-top:-8px; /*had to give this because of shadow*/
+margin-bottom:20px;
+-moz-border-radius:8px; 
+-webkit-border-radius:8px; 
+border-radius:8px;
+-moz-box-shadow:2px 3px 20px #252425;
+-webkit-box-shadow:2px 3px 20px #252425;
+box-shadow:2px 3px 20px #252425;  
+position:relative;
+float:left;}
+
+#topText
+{font-size:24px;
+color:#ffb400;
+padding-top:7px;
+padding-left:66px;}
+
+#topTextSpan
+{font-weight:bold;}
+
+#plus
+{font-size:24px;
+color:#ffb400;
+position:absolute;
+right:34px;
+top:6px;
+cursor:pointer;} 
+
+#plusTooltip /*SANJ, this is the basic CSS for your javascript tooltip; no element exists in the HTML doc*/
+{background-color:#f7bd00;
+color:#FFF;
+cursor:pointer;} 
+
+#searchInner 
+{position:absolute;
+right:5px;
+top:11px;
+cursor:pointer;}
+
+#tabsInner /*tabs not touching because i would prefer not to give fixed width, shadow, etc.*/
+{font-size:14px;
+color:#ff8400;
+margin-top:6px;}
+
+#tabsInner li 
+{list-style:none;
+text-align:center;
+padding-left:12px;
+padding-right:12px;
+float:left;}
+
+#selection
+{padding-left:6px;}
+
+.tabCategory 
+{-moz-border-radius-topright:8px; 
+-webkit-border-top-right-radius:8px;
+border-top-right-radius:8px; 
+-moz-border-radius-topleft:8px; 
+-webkit-border-top-left-radius:8px; 
+border-top-left-radius:8px;
+border-top:1px solid #ececec;
+-moz-box-shadow:-3px 0px 6px #e0dfdf;
+-webkit-box-shadow:-3px 0px 6px #e0dfdf;
+box-shadow:-3px 0px 6px #e0dfdf;
+background-color:#FFF;
+color:#ffb80f;
+cursor:pointer;
+margin-right:6px;}
+
+.innerSelected /*SANJ this is the extra class for the selected tabs*/
+{-moz-border-radius-topright:8px; 
+-webkit-border-top-right-radius:8px;
+border-top-right-radius:8px; 
+-moz-border-radius-topleft:8px; 
+-webkit-border-top-left-radius:8px; 
+border-top-left-radius:8px;
+border:1px solid #ececec;
+padding:2px 6px;
+background-color:#f7bd00;
+color:#FFF;
+-moz-box-shadow:-3px -0px 6px #e0dfdf;
+-webkit-box-shadow:-3px -0px 6px #e0dfdf;
+box-shadow:-3px -0px 6px #e0dfdf;
+cursor:pointer;}
+
+#contentTabsInner
+{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
+font-size:13px;
+color:#3b3b39;
+text-align:justify;
+padding:10px;
+clear:both;}
+
+#listLeft
+{position:relative;}
+
+#listLeft ul
+{color:#f7bd00;
+list-style-type:disc;
+list-style-position:inside;
+padding-left:4px;
+overflow:hidden; /*this prevents the box shadow from sticking out on the right*/}
+
+#listLeft ul span
+{color:#898989;
+font-weight:bold;}
+
+#listLeft ul li
+{border-top:1px solid #cac9c9;
+-moz-box-shadow:4px 0px 6px #b8b8b8;
+-webkit-box-shadow:4px 0px 6px #b8b8b8;
+box-shadow:4px 0px 6px #b8b8b8;
+padding-top:6px;
+padding-bottom:6px;
+cursor:pointer;
+} 
+
+#listLeft ul li a, #listLeft ul li a:link, #listLeft ul li a:visited, #listLeft ul li a:active 
+{color:#898989;
+text-decoration:none;}
+
+#listLeft ul li:hover
+{text-decoration:underline;
+color:#898989;}
+
+#listLeftSelected
+{border-bottom:1px solid #eece98;
+border-top:1px solid #eece98;
+-moz-box-shadow:inset -6px 0px 18px #eece98;
+-webkit-box-shadow:inset -6px 0px 18px #eece98;
+box-shadow:inset -6px 0px 18px #eece98;
+cursor:pointer;}
+
+#triangleUp
+{font-size:10px;
+color:#f7bd00;
+position:absolute;
+right:8px;
+top:-14px;
+cursor:pointer;} /*unicode not showing in IE*/
+
+#triangleDown
+{font-size:10px;
+color:#f7bd00;
+position:absolute;
+right:8px;
+bottom:-0px;
+cursor:pointer;} /*SANJ, see what happens to the list when i do ctrl minus, and the triangles as well*/
+
+#rightColumn
+{width:618px;
+height:100%; /*necessary, right?*/
+margin-top:-8px;
+margin-left:36px;
+margin-bottom:20px;
+float:left;
+}
+
+#topRight
+{width:610px;
+height:228px;
+background-color:#FFF;
+-moz-border-radius:8px; 
+-webkit-border-radius:8px; 
+border-radius:8px;
+-moz-box-shadow:2px 3px 20px #252425;
+-webkit-box-shadow:2px 3px 20px #252425;
+box-shadow:2px 3px 20px #252425;}
+
+#imageLeft
+{width:280px;
+height:210px; /*width and height for placeholder ok?*/
+background-image:url(/static/images/noel/image-left.jpg);
+background-repeat:no-repeat;
+-moz-border-radius:8px; 
+-webkit-border-radius:8px; 
+border-radius:8px;
+float:left;}
+
+#textRight
+{width:306px;
+color:#f7bd00;
+font-size:50px;
+text-align:right;
+padding-top:20px;
+padding-right:14px;
+float:left;}
+
+#twitter
+{width:54px;
+padding-top:38px;
+margin-left:164px;
+float:left;}/*WHAT'S HAPPENING IN SAFARI, doesn't show until you hover?? hard to custmoise these ones, on hover*/
+
+#fb
+{width:62px;
+font-size:12px;
+color:#fff;
+padding-top:36px;
+float:left;}
+
+#fb a
+{text-decoration:none;
+color:#fff;
+background-color:#3b5998;
+-moz-border-radius:3px;
+-webkit-border-radius:3px;
+border-radius:3px; 
+}/*problem customising these*/
+
+#download
+{padding-top:38px;
+cursor:pointer;
+margin-left:4px;
+clear:both;}
+
+#bottomRight
+{width:570px;
+height:100%; /*IS THIS REQUIRED??*/
+background-color:#FFF;
+color:#3b3b39;
+font-size:12.5px;
+font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
+padding:20px;
+margin-top:20px;
+-moz-border-radius:8px; 
+-webkit-border-radius:8px; 
+border-radius:8px;
+-moz-box-shadow:2px 3px 20px #252425;
+-webkit-box-shadow:2px 3px 20px #252425;
+box-shadow:2px 3px 20px #252425;}
+
+#sectionTitle
+{color:#f7bd00;}
+
+#clearBoth
+{clear:both;}

itf/static/css/noel/main.css

@@ -1,10 +1,10 @@
-
+html
-html, body
+{width:100%;} 
-{height:100%;
-width:100%;} /*font-squirrel font to be added*/
 
 body
-{font-family:'Century Gothic', Helvetica, Arial, 'DejaVu Sans', sans-serif;}/*helvetica put as second font*/
+{width:100%;
+height:100%;
+font-family:'Century Gothic', Helvetica, Arial, 'DejaVu Sans', sans-serif;}/*they want helvetica as second font, font-squirrel font to be added if required*/
 
 #header
 {width:960px;
@@ -14,42 +14,58 @@ margin-right:auto;
 position:relative;}
 
 #logo
-{position:absolute;
+{font-family:'Century Gothic', Helvetica, Arial, 'DejaVu Sans', sans-serif;
-top:21px;
+font-size:30px;
-left:4px;}
+position:absolute;
+top:36px;
+left:4px;
+z-index:-1;
+color:#8a8a8a;}
+
+#logo span
+{font-size:36px;}
+
+#logo span span
+{font-weight:bold;
+color:#f7bd00;}
 
 #search 
 {width:114px;
 position:absolute;
-right:0px;
+right:4px;
 top:11px;
-border:1px solid #f8f8f8;
+border:1px solid #f0f0f0; 
 background:url(/static/images/noel/search-icon.png) no-repeat right; 
-padding:2px;
+padding:2px 2px 2px 4px;
 font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif; 
 font-size:12px;
-color:#7d7d7d;-moz-border-radius:8px; 
+color:#7d7d7d;
+-moz-border-radius:8px; 
 -webkit-border-radius:8px; 
 border-radius:8px;
 -moz-box-shadow:inset 2px 2px 6px #d7d7d7;
 -webkit-box-shadow:inset 2px 2px 6px #d7d7d7;
-box-shadow:inset 2px 2px 6px #d7d7d7;}  /*webkit browsers giving a border on active need to remove. placeholder input text supported by html5 for FF3.7 and webkit, add a shiv? also, search box is sooper light in IE*/
+box-shadow:inset 2px 2px 6px #d7d7d7;}  /*placeholder input text supported by html5 for FF3.7 and webkit, add a shiv? also*/
+
+#search:focus
+{outline:none;} /*to remove outline in webkit-browsers*/
 
 #homeIcon
 {display:block;
 position:absolute;
-left:391px;
+left:413px;
 top:69px;
 cursor:pointer;}
 
 #navMenu 
 {background-color:#FFF; 
-font-size:17px;
+font-size:16px;
 position:absolute;
 top:64px;
 right:0px;
 z-index:30;
-cursor:pointer;}
+cursor:pointer;
+text-align:left;}
 	
 #navMenu, #navMenu ul 
 {list-style:none;
@@ -64,31 +80,38 @@ color:#737373;
 text-decoration:none;
 padding:0px 15px;}
 	
-#navMenu li 
+#navMenu>li /*browser compatibility????*/
 {padding:0;
-float:left;}
+float:left;
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+}
  
 #navMenu ul 
-{width:200px;
+{width:180px;
+font-size:14px;
 line-height:24px;
 margin:0;
 position:absolute;
 left:-999em;
-height:auto;}
+height:auto;
+text-align:left;}
 	
 #navMenu li li 
-{width:200px;
+{width:180px;
 border-bottom:1px solid #e0e0e0;
-text-align:justify;}
+text-align:left;}
 	
 #navMenu li li a 
-{padding:4px 10px;
+{padding:2px 10px;
 color:#737373;} /*menu may break in IE, add JS hack and one for navigation by keyboard*/
 	
 #navMenu li li:hover 
 {background-color:#e77400;
-background:-moz-linear-gradient(top, #e77400 0%, #feb200);
+background:-moz-linear-gradient(top, rgba(231,116,0, 0.7) 0%, rgba(254,178,0,0.9));
-background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200));}  /*w/o prefix not mentioned here for a reason?*/
+background:-webkit-gradient(linear, left top, left bottom, from(rgba(231,116,0, 0.7)), to(rgba(254,178,0,0.9)));
+background:linear-gradient(top, rgba(231,116,0, 0.7) 0%, rgba(254,178,0,0.9));}
 	
 #navMenu li ul li:hover a, #navMenu li ul li li:hover a, #navMenu li ul li li li:hover a, #navMenu li ul li li li:hover a 
 {color:#ebe9e9;}
@@ -104,24 +127,24 @@ background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#fe
 
 #navMenu li:hover ul, #navMenu li li:hover ul, #navMenu li li li:hover ul, #navMenu li li li li:hover ul, #navMenu li.sfhover ul, #navMenu li li.sfhover ul, #navMenu li li li.sfhover ul, #navMenu li li li li.sfhover ul 
 {left:auto;
-background-color:#FFF;}
+background-color:#FFF;
+}
 
 #navMenu li:hover, #navMenu li.sfhover 
 {background-color:#e77400;
 background:-moz-linear-gradient(top, #e77400 0%, #feb200);
 background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200));
-} /*w/o prefix not mentioned here for a reason???*/
+background:linear-gradient(top, #e77400 0%, #feb200);} 
-
 
 #loginMenu 
 {list-style:none;
 background-color:#FFF;
-font-size:13px; /*font list ok?, will break if user increases font size?*/
+font-size:13px; /*font list ok?, will break if user increases font size???*/
 color:#ff8400;
 font-weight:normal;
 position:absolute;
 bottom:5px;
-right:0px;
+right:6px;
 cursor:pointer;
 z-index:2;
 clear:both;}
@@ -129,7 +152,7 @@ clear:both;}
 #loginMenu li 
 {display:inline;
 background-color:#FFF;
-padding:2px 4px 2px 4px;
+padding:2px 4px;
 border:1px solid #e7e7e7;
 -moz-border-radius-topright:8px; 
 -webkit-border-top-right-radius:8px;
@@ -141,16 +164,32 @@ border-top-left-radius:8px;
 -webkit-box-shadow:0px -1px 3px #d4d4d4;
 box-shadow:0px -1px 3px #d4d4d4;}/*not converted to links*/
  
-#loginMenu li:hover 
+#loginMenu li a, #loginMenu li a:link, #loginMenu li a:visited, #loginMenu li a:hover, #loginMenu li a:active 
+{text-decoration:none;
+color:#ff8400;}
+
+#loginMenu li a:hover 
 {font-weight:bold;
 -moz-box-shadow:-4px -2px 8px #d4d4d4;
 -webkit-box-shadow:-4px -2px 8px #d4d4d4;
 box-shadow:-4px -2px 8px #d4d4d4;}
 
-#center
+#woodPng
-{width:100%;
+{width:40%;
-height:680px;
+height:30%;
-background:url(img/wood.jpg) repeat;}  /*looks different from the PSD*/
+position:absolute;
+left:0;
+right:0;
+margin:0 auto;
+top:400px;
+background-color:#989898;
+opacity:0.4; /*plz add JS to detect if browser does not support opacity*/
+-moz-border-radius:60px;
+-webkit-border-radius:60px;
+border-radius:60px;
+-moz-box-shadow: 0px 0px 100px 100px #989898;
+-webkit-box-shadow:0px 0px 100px 100px #989898;
+box-shadow: 0px 0px 100px 100px #989898;} /*please add moderniser for IE to detect and remove this opacity and shadow;*/
 
 #shadow
 {width:960px;
@@ -159,191 +198,6 @@ height:8px;
 -webkit-box-shadow:10px -20px 40px #cccaca;
 box-shadow:10px -20px 40px #cccaca;}/*shadow looks darker in safari and of course, doesn't show in IE*/
 
-.centerContent
-{width:960px;
-height:680px;
-margin-right:auto;
-margin-left:auto;
-position:relative;} 
-
-#image
-{position:relative;
-float:left;}
-
-img#bannerImage
-{-moz-border-radius:8px;
--webkit-border-radius:8px;
-border-radius:8px;
-margin-top:16px;
-margin-left:9px;
--moz-box-shadow:2px 3px 20px #252425;
--webkit-box-shadow:2px 3px 20px #252425;
-box-shadow: 2px 3px 20px #252425;}/*FF showing top image borders, because of FF 3.6 bug*/
-
-#textTop
-{width:300px;
-font-size:30px; /*character limit? also break in text to be considered*/
-color:#FFF;
-line-height:40px;
-text-align:left;
-position:absolute;
-top:116px;
-padding-left:30px;
-z-index:3;} /*z-index required?*/
-
-#textBottom
-{width:356px;
-font-size:16px; /*character limit to be specified in js*/
-line-height:1.4;
-color:#000;
-padding:4px 18px;
-background-color:rgb(234, 234, 234); /*fallback for old browsers*/
-background-color:rgba(234, 234, 234, 0.7);
-position:absolute;
-bottom:20px;
-margin-left:9px;
-z-index:4;} /*z-index required?*/
-
-#buttonBanner
-{position:absolute;
-left:438px;
-bottom:24px;}
-
-.buttons 
-{width:12px;
-height:12px;
-background-color:transparent !important; /*is this right?*/
-opacity:0.6;
-z-index:4;
-margin-top:8px;
-border:2px inset #FFF;
-cursor:pointer;} 
-
-.buttons:hover 
-{opacity:0.9;}
-
-.buttonsSelected 
-{background-color:#e3e2e0;
-opacity:0.6;}
-
-.tab
-{width:230px;
-height:282px;
-background-color:#FFF;
-position:relative;
--moz-border-radius:8px; 
-border-radius:8px; /*ok if i don't use webkit prefix? because it works without it on safari/chrome.*/
-margin-left:9px;
--moz-box-shadow:2px 3px 20px #252425;
--webkit-box-shadow:2px 3px 20px #252425;
-box-shadow:2px 3px 20px #252425;}
-
-#news, #events
-{margin-top:16px;
-float:left;}
-
-#slider
-{width:960px;
-height:296px;
-clear:both;
-margin-left:auto;
-margin-right:auto;
-padding-top:37px;
-overflow:hidden;
-clear:both;}
-
-#sliderTabs /*at 800 res, we have different probs in different browsers with the tabs, ok to give position absolute to the ul?*/
-{width:4000px;} 
-
-ul#sliderTabs li
-{float:left;}
-
-.tabHeader
-{font-size:24px;
-color:#ffb400;
-text-align:center;
-margin-top:10px;
-position:relative;
-z-index:1;}
-
-.tabHeader span
-{font-weight:bold;}
-
-.textTab
-{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
-font-size:12px;
-color:#000;
-text-align:justify;
-padding-left:20px;
-padding-right:20px;
-position:absolute;
-top:178px;}
-
-a.buttonTab 
-{width:90px; 
-font-size:14px; /*if someone increases their font size, then what?*/
-color:#FFF;
-text-align:center;
-text-decoration:none;
-padding:2px 3px 5px 3px;
-background-color:#feb200; /*fallback for old browsers*/
-background:-moz-linear-gradient(top, #e77400 0%, #feb200);
-background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200)); /*w/o prefix not mentioned here for a reason???*/
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
--moz-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
--webkit-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
-text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
-position:absolute;
-bottom:20px;
-right:20px;
-cursor:pointer;
-z-index:3;}/*looks poor in IE*/
-
-a.buttonTab:link, a.buttonTab:visited
-{text-decoration:none;
-color:#FFF;}
-
-a.buttonTab:hover
-{width:90px;
-font-size:14px;
-color:#FFF;
-text-decoration:none;
-padding:2px 3px 5px 3px;
-text-align:center;
-background-color:#e77400; /*fallback for old browsers*/
-background:-moz-linear-gradient(top, #feb200 0%, #e77400);
-background:-webkit-gradient(linear, left top, left bottom, from(#feb200), to(#e77400));
--moz-border-radius:10px;
--webkit-border-radius:10px;
-border-radius:10px;
--moz-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
--webkit-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
-text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
-position:absolute;
-bottom:20px;
-right:20px;
-cursor:pointer;}/*needs to made into a link, looks poor IE*/
-
-a.buttonTab:active 
-{text-decoration:none;
-color:#FFF;}
-
-#scriptArchive
-{background-image:url(img/script-tab.jpg);}
-
-#itfProjects
-{background-image:url(img/itf-tab.png);}
-
-#eRang
-{background-image:url(img/erang-tab.jpg) no-repeat;}
-
-#bestPractice
-{background-image:url(img/best-tab.jpg) no-repeat;}
-
 #footer
 {width:960px;
 margin-left:auto;
@@ -380,3 +234,5 @@ color:#ffb400;
 text-align:left;
 padding-left:22px;
 clear:both;}
+
+

itf/templates/noel/base.html

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>{% block title %} {% endblock %}</title>
+<link rel="stylesheet" href="/static/css/reset.css" type="text/css" />
+<link rel="stylesheet" href="/static/css/noel/main.css" type="text/css" />
+<script type="text/javascript" src="/static/js/jquery.js"></script>
+{% block extra_head %}
+
+{% endblock %}
+</head>
+	<body>
+	<div id="header"> 
+		<div id="logo">
+		INDIA<br>
+		<span>THEATRE <span>FORUM</span></span>
+		</div>
+		<form>
+			<input type="text" placeholder="search" name="field" id="search"/>
+		</form>      
+		<a href=""><img src="/static/images/noel/home.png" width="16" height="17" alt="home" id="homeIcon"></a>
+		
+		<ul id="navMenu">
+			<li><a href="">Resources</a>
+				<ul>
+					<li><a href="">Script Archive</a></li>
+					<li><a href="">Guidelines for Best Practice</a></li>
+				</ul>
+			</li>
+			<li><a href="">Read</a>
+				<ul>
+					<li><a href="">Bibliography</a></li>
+					<li><a href="">eRang</a></li>
+					<li><a href="">Publications</a></li>
+				</ul>
+			</li>
+			<li><a href="">Participate</a>
+				<ul>
+					<li><a href="">Surveys</a></li>
+					<li><a href="">Offers/Needs</a></li>
+					<li><a href="">Make a suggestion</a></li>
+				</ul>
+			</li>
+			<li class><a href="">About ITF</a>
+				<ul>
+					<li><a href="">India Theatre Forum</a></li>
+					<li><a href="">Projects</a></li>
+					<li><a href="">Events</a></li>
+				</ul>
+			</li>
+			<li><a href="">Support ITF</a>
+				<ul>
+					<li><a href="">Make a donation</a></li>
+					<li><a href="">Volunteer</a></li>
+					<li><a href="">Contribute to eRang</a></li>
+				</ul>
+			</li>
+		</ul>
+	  
+	  <ul id="loginMenu">
+		<li><a href="">Login</a></li>
+		<li><a href="">Register</a></li>
+		<li><a href="">Contact Us</a></li>
+	  </ul>
+	</div>
+
+	{% block content %}
+	{% endblock %}
+	
+	<div id="footer">
+  <ul id="resources" class="footerList">
+    <a href="">Resources</a>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Script Archive</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Guidelines for Best Practice</a></li>
+  </ul>
+  
+  <ul id="read" class="footerList">
+    <a href="">Read</a>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bibliography</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eRang</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Publications</a></li>
+  </ul>
+  
+  <ul id="participate" class="footerList">
+    <a href="">Participate</a>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;surveys</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offers/needs</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;make a suggestion</a></li>
+  </ul>
+  
+  <ul id="aboutItf" class="footerList">
+    <a href="">About ITF</a>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;India Theatre Forum</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;projects</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events</a></li>
+  </ul>
+  
+  <ul id="supportItf" class="footerList">
+    <a href="">Support ITF</a>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;make a donation</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volunteer</a></li>
+    <li><a href="">- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contribute to eRang</a></li>
+  </ul>
+  
+  <p id="copyright">&copy; 2011 India Theatre Forum. All Rights Reserved.</p>
+</div>
+
+</body>

itf/templates/noel/bestpractices.html

@@ -0,0 +1,115 @@
+{% extends 'noel/base.html' %}
+
+{% block title %} ITF: Best Practices {% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="/static/css/noel/inner.css" type="text/css" />
+{% endblock %}
+
+
+{% block content %}
+<div id="centerInner">
+	<div id="woodPng">
+	</div>  
+    
+  <div class="centerInnerContent">
+   	<div id="shadow">
+   	</div>
+    
+    <div id="leftColumn">
+    	
+        <h3 id="topText">BEST <span id="topTextSpan">PRACTICE </span><span id="plus">&#43</span></h3>
+        
+        <img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" id="searchInner">
+		
+        <div id="tabsInner">
+	  		<ul id="selection">
+				<li class="tabCategory innerSelected">Info</li>
+				<li class="tabCategory innerSelected">Stories</li>
+            	<li class="tabCategory innerSelected">FAQs</li>
+            	<li class="tabCategory innerSelected">Guidelines</li>
+	  		</ul>
+
+	    	<div id="contentTabsInner">
+	  	Lorem Ipsum A well known theatre group had auditions for casting lead characters in their play for which over 150 actors auditioned. A television film director happened to see the recording of the auditions and obtained a copy. 
+      		</div>
+	    </div>
+      
+        <div id="listLeft">
+      		<ul>
+        		<li><a href=""><span>The Mystery of vanishing rights<span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+            	<li><a href=""><span>Name of Play</span></a></li>
+  	        </ul>
+        
+      		<div id="triangleUp">&#x25B2</div>
+        	<div id="triangleDown">&#x25BC</div>
+                
+        </div>
+
+    </div>
+    
+    <div id="rightColumn">
+   		<div id="topRight">
+    		<div id="imageLeft">
+        	</div>
+      		<p id="textRight">
+            The Mystery of vanishing rights
+        	</p>
+         
+        	<p id="twitter">     	
+<script type="text/javascript">
+tweetmeme_style = "compact";
+</script>
+<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
+        	</p>
+        	
+            <p id="fb">
+<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; border:1px solid #3b5998; height:15px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; background:#3b5998 no-repeat top right; z-index:5; text-decoration:none;} </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
+                    
+			</p>
+        	
+            <img src="/static/images/noel/download.jpg" width="16" height="16" alt="download" id="download">
+          	
+    	</div>
+        
+    <div id="bottomRight">
+    	<p><span id="sectionTitle">Story 1:</span> A well known theatre group had auditions for casting lead characters in their play for which over 150 actors auditioned. A television film director happened to see the recording of the auditions and obtained a copy. Two months later, a few actors who had auditioned were horrified to see themselves in a television comedy show. Snippets of the recording had obviously been used!</p><br/> 
+
+		<p><span id="sectionTitle">Actors:</span> Not on! If you like our acting, you hire us! Not use our improvisations for another purpose and that too by someone else! We'll sue the television show producer and the theatre group.</p><br/>   
+
+		<p><span id="sectionTitle">Story 2:</span> Neha Bhasin, a play back singer went for an audition. Months later, she heard the piece on a radio channel and realized that it had been used without her permission. She also found that her name was mentioned as the background vocalist and the producer of the movie was credited as the lead vocalist.</p><br/> 
+
+		<p><span id="sectionTitle">Neha Bhasin:</span> That's my voice…that's my name on the CD but I'm not the background vocalist!!! I'll sue the film producer! The music director: Hmmm not so! We didn't even want to use your voice. It was a recording mistake! The Court: A costly mistake. You've used her voice, now pay up royalty! And recall all the CDs with her voice.</p><br/>
+
+		<p><span id="sectionTitle">Law:</span> Do actors have special rights? Under the Indian Copyright law, actors, singers, musicians, dancers, et al are called performers</p><br/>
+                
+        <p><span id="sectionTitle">Actors:</span> Not on! If you like our acting, you hire us! Not use our improvisations for another purpose and that too by someone else! We'll sue the television show producer and the theatre group.</p><br/>   
+
+		<p><span id="sectionTitle">Story 2:</span> Neha Bhasin, a play back singer went for an audition. Months later, she heard the piece on a radio channel and realized that it had been used without her permission. She also found that her name was mentioned as the background vocalist and the producer of the movie was credited as the lead vocalist.</p><br/> 
+
+		<p><span id="sectionTitle">Neha Bhasin:</span> That's my voice…that's my name on the CD but I'm not the background vocalist!!! I'll sue the film producer! The music director: Hmmm not so! We didn't even want to use your voice. It was a recording mistake! The Court: A costly mistake. You've used her voice, now pay up royalty! And recall all the CDs with her voice.</p><br/>
+
+		<p><span id="sectionTitle">Law:</span> Do actors have special rights? Under the Indian Copyright law, actors, singers, musicians, dancers, et al are called performers</p><br/>
+    		
+    </div>
+  </div>
+  <div id="clearBoth"></div>
+ </div>
+
+</div>
+
+{% endblock %}

itf/templates/noel/index.html

@@ -0,0 +1,116 @@
+{% 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" />
+
+{% 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>
+    		<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">
+        	<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 %}

itf/urls.py

@@ -41,6 +41,7 @@ urlpatterns = patterns('',
 #    (r'x0erang/', 'itfcore.views.erang'),
 #    (r'x0profile/', 'itfcore.views.profile'),
 	(r'finalTest/', 'boxes.views.mainPage'),
+	(r'finalInner/', 'boxes.views.innerPage'),
     (r'googlehostedservice.html', 'itfcore.views.googlehosted'),
    
     (r'emailsignuplist', 'festival.views.email_signups'),