changes for details in inner pages

itf/static/css/noel/inner.css

@@ -236,7 +236,13 @@ margin-top:-8px;
 margin-left:36px;
 margin-bottom:20px;
 float:left;
-}
+position:relative;}
+
+#pin
+{position:absolute;
+left:18px;
+top:-24px;
+z-index:60;}
 
 #topRight
 {width:610px;
@@ -250,38 +256,70 @@ border-radius:8px;
 box-shadow:2px 3px 20px #252425;}
 
 #imageLeft
-{width:280px;
+{width:170px;
-height:210px; /*width and height for placeholder ok?*/
+height:223px; /*width and height for placeholder ok?*/
-background-image:url(/static/images/noel/image-left.jpg);
+background-image:url(/static/images/noel/image-holder.png);
 background-repeat:no-repeat;
--moz-border-radius:8px; 
+/*-moz-border-radius:8px; 
 -webkit-border-radius:8px; 
-border-radius:8px;
+border-radius:8px;*/
-float:left;}
+float:left;
+position:relative;
+z-index:40;
+margin-left:14px;
+margin-top:2px;
+-moz-transform: rotate(-4deg);
+-o-transform: rotate(-4deg);
+-webkit-transform: rotate(-4deg);
+transform: rotate(-4deg);}
+
+#imageInside
+{width:142px;
+height:150px;
+position:absolute;
+left:14px;
+top:12px;
+background-color:purple;
+z-index:50;}
 
 #textRight
 {width:306px;
+height:159px;
+overflow:hidden;
 color:#f7bd00;
 font-size:50px;
 text-align:right;
 padding-top:20px;
 padding-right:14px;
-float:left;}
+float:right;}
+
+.socialIcons
+{position:relative;
+clear:both;}
+
+.twitter
+{position:absolute;
+bottom:2px;
+right:89px;}
 
 .twitter-share-button
-{padding-top:35px;
+{/*padding-top:35px;
 margin-left:164px;
 margin-right:20px;
-float:left;}/*WHAT'S HAPPENING IN SAFARI, doesn't show until you hover?? hard to custmoise these ones, on hover*/
+float:left;*/
+}
 
-#fb
+.fb
 {width:62px;
 font-size:12px;
 color:#fff;
-padding-top:35px;
+/*padding-top:35px;
-float:left;}
+float:left;*/
+position:absolute;
+bottom:2px;
+right:20px;}
 
-#fb a
+.fb a
 {text-decoration:none;
 color:#fff;
 background-color:#3b5998;
@@ -290,35 +328,13 @@ background-color:#3b5998;
 border-radius:3px; 
 }/*problem customising these*/
 
-#download
+.download
-{padding-top:39px;
+{cursor:pointer;
-cursor:pointer;
+position:absolute;
-margin-left:4px;
+bottom:6px;
-clear:both;}
+right:10px;
-
+/*padding-top:39px;
-#bottomRight
+clear:both;*/}
-{width:570px;
-height:100%; /*IS THIS REQUIRED??*/
-background-color:#FFF;
-color:#3b3b39;
-font-size:14px;
-line-height:16px;
-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;}
-
-.itfInfoSub
-{color:#f7bd00;
-font-weight:bold;}
-
-.itfInfo p
-{padding-bottom:8px;}
 
 #clearBoth
 {clear:both;}

itf/templates/noel/insidepage.html

@@ -4,6 +4,7 @@
 
 {% block extra_head %}
 <link rel="stylesheet" href="/static/css/noel/inner.css" type="text/css" />
+<link rel="stylesheet" href="/static/css/noel/inner-details.css" type="text/css" />
 <script type="text/javascript" src="/static/js/insidepage.js"></script>
 {% endblock %}
 
@@ -89,27 +90,38 @@
     </div>
     
     <div id="rightColumn">
+ 
    		<div id="topRight">
+            <img src="/static/images/noel/pin.png" width="46" height="58" alt="pin" id="pin">
+ 
     		<div id="imageLeft">
+                <div id="imageInside">
+                </div>
+ 
         	</div>
       		<p id="textRight">
 
         	</p>
-         <!--
+         
-        	<p id="twitter">
+        	<div class="socialIcons">
-				<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="http://twitter.com/#!/indtheatreforum">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>     	
+                <p class="twitter">
-        	</p>
+                    <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="http://twitter.com/#!/indtheatreforum">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>     	
+                </p>
         	
-            <p id="fb">
+                <p class="fb">
-<iframe src="http://www.facebook.com/plugins/like.php?href=www.theatreforum.in&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
+    <iframe src="http://www.facebook.com/plugins/like.php?href=www.theatreforum.in&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
                     
-			</p>
+                </p>
-        	-->
+        	
-            <img src="/static/images/noel/download.jpg" width="16" height="16" alt="download" id="download">
+                <img src="/static/images/noel/download.jpg" width="18" height="18" alt="download" class="download">
-          	
+          	</div>
     	</div>
         
     <div id="bottomRight">
+        
+        <div class="thumbsGallery">
+            <img src="" alt="" class="thumbsDetails">
+        </div>
         <!--
     	<p><span class="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/>