merged

itf/static/css/noel/inner-details.css

@@ -73,20 +73,28 @@ display:block;}
 .hideText
 {display:none;}
 
-#lightbox h1 {
+#imagesContainer, #videosContainer {
-    font-size: 120%;
-    padding: 10px;
-}
-
-#imagesContainer {
 	padding: 10px 14px;
 }
 
-#imagesContainer h3 {
+#linksContainer {
+	padding: 10px 14px 30px 14px;
+}
+
+#imagesContainer h3, #videosContainer h3, #linksContainer h3 {
 	font-family: 'Arial Regular', Arial, Helvetica, sans-serif;
 	font-size: 110%;
 }
 
+#linksList a {
+	color: #FF8400;
+	text-decoration: none;
+}
+
+#linksList a:hover {
+	text-decoration: underline;
+}
+
 /* FORMS FOR E-RANG */
 #comment_form {
     margin-top: 24px;

itf/static/css/noel/inner.css

@@ -580,7 +580,43 @@ margin-top:6px}
 {position:relative;
 height:100%;}
 
-.lightboxNext, .lightboxPrev {
+
+.closinglightbox {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+}
+
+.photoContainer {
+    margin: 8px 0;
+}
+.photoContainer input, .galleryTitle, #youtubeURL, #linkURL {
+    padding: 4px;
+    border-radius: 8px;
+    box-shadow: inset 2px 2px 6px #D7D7D7;
+    border: 1px solid #ddd;
+}
+
+#addVideos button, #addLinks button {
+    padding: 4px 6px;
+}
+
+.photoContainer input {
+    vertical-align: top;
+}
+
+#addVideos, #addLinks {
+    padding: 10px;
+}
+
+#links li {
+	padding-bottom: 10px;
+}
+
+.closinglightbox, .lightboxNext, .lightboxPrev {
 font-size:14px;
 color:#F7BD00;
 font-weight:bold;
@@ -596,6 +632,12 @@ left:10px;}
 {position:absolute;
 right:10px;}
 
+.lightboxHeading {
+    font-size: 130%;
+    padding: 10px;
+	text-align: center;
+}
+
 
 #addForm input, #addForm textarea {
 border:1px solid #e3e3e3; 
@@ -649,7 +691,8 @@ border-top:1px solid #d3d3d3;
 border-bottom:1px solid #d3d3d3;
 -moz-box-shadow:2px 3px 16px #252425;
 -webkit-box-shadow:2px 3px 16px #252425;
-box-shadow:2px 3px 16px #252425;}
+box-shadow:2px 3px 16px #252425;
+position: relative;}
 
 
 #searchContent {	

itf/static/css/noel/main.css

@@ -14,6 +14,10 @@ strong
     display: block;
 }
 
+.inlineBlock {
+	display: inline-block;
+}
+
 #header
 {width:960px;
 height:140px;

itf/templates/mediagallery/upload.html

@@ -139,6 +139,7 @@ $(function() {
     min-width: 400px;
     min-height: 300px;
     max-width: 50%;
+    padding: 10px;
 }
 
 .progressBar {
@@ -146,9 +147,20 @@ $(function() {
     background: #00f;
 }
 
-.deleteItem {
+.deleteItem, .deleteLink {
     font-weight: bold;
     cursor: pointer;
+    vertical-align: top;
+
+}
+
+.deleteItem {
+    padding-top: 6px;
+    display: inline-block;
+}
+
+.closinglightbox {
+    padding: 10px;
 }
 
 .section {
@@ -164,10 +176,10 @@ $(function() {
 {% endblock %}
 
 {% block main_content %}
-    Gallery Title: <input class="galleryTitle" value="{{ gallery.title }}" />
+    <h1 class="lightboxHeading inlineBlock">Gallery Title:</h1> <input class="galleryTitle" value="{{ gallery.title }}" />
 
     <div id="uploadImages" class="section">
-        <h3>Upload Images</h3>
+        <h3 class="orange inlineBlock">Upload Images</h3>
         <input type="file" id="uploadImageFiles" multiple />
         
         <ul id="photosContainer">
@@ -187,7 +199,7 @@ $(function() {
     </div>
 
     <div id="addVideos" class="section">
-        <h3>Add Youtube Videos</h3>
+        <h3 class="orange inlineBlock">Add Youtube Videos</h3>
         <div id="addYoutubeVideos">
             Youtube Share Link: <input type="text" id="youtubeURL" placeholder="eg. http://youtu.be/Wo_mFYW-jLU" />
             <button id="addYoutubeVideo">Add</button>
@@ -206,9 +218,9 @@ $(function() {
     </div>
 
     <div id="addLinks" class="section">
-        <h3>Other Links to Online Media</h3>
+        <h3 class="orange inlineBlock">Other Links to Online Media</h3>
-        Link: <input type="text" id="linkURL" placeholder="eg. http://flickr.com/xyz" />
+        <p>Link: <input type="text" id="linkURL" placeholder="eg. http://flickr.com/xyz" /><button id="addLink">Add</button></p>
-        <button id="addLink">Add</button>
+        
 
         <ul id="links">
             {% for link in links %}
@@ -221,6 +233,6 @@ $(function() {
         </ul>
 
     </div>
-
+    <br>
-    <a href="Javascript:close()">Done</a>
+    <a href="Javascript:close()" class="closinglightbox">Done</a>
 {% endblock %}

itf/templates/mediagallery/view.html

@@ -19,7 +19,7 @@
 </div>
 <div id="lightbox"></div>
 
-<h1>{{ title }}</h1>
+<h1 class="lightboxHeading">{{ title }}</h1>
 {% if photos %}
 <div id="imagesContainer">
     <h3 class="orange">Photos</h3>
@@ -38,7 +38,7 @@
 
 {% if videos %}
     <div id="videosContainer">
-        <h3>Videos</h3>
+        <h3 class="orange">Videos</h3>
         {% for v in videos %}
             <img src="{{ v.thumbnail }}" class="youtubeLink thumbsDetails" title="{{ v.title }}" data-iframe='{{ v.iframe }}' /> 
         {% endfor %}
@@ -47,7 +47,7 @@
 
 {% if links %}
     <div id="linksContainer">
-        <h3>Links</h3>
+        <h3 class="orange">Links</h3>
         <ul id="linksList">
         {% for l in links %}
             <li>
@@ -59,6 +59,6 @@
 
 {% endif %}
 
-<a href="Javascript:window.close()">Close</a>
+<a href="Javascript:window.close()" class="closinglightbox">Close</a>
 
 {% endblock %}