changes to gallery

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

@@ -73,13 +73,7 @@ display:block;}
 .hideText
 {display:none;}
 
-.lightboxHeading {
-    font-size: 130%;
-    padding: 10px;
-	text-align: center;
-}
-
-#imagesContainer {
+#imagesContainer, #videosContainer, #linksContainer {
 	padding: 10px 14px;
 }
 

itf/static/css/noel/inner.css

@@ -590,6 +590,25 @@ height:100%;}
     margin: 0 auto;
 }
 
+.photoContainer {
+    margin: 8px 0;
+}
+.photoContainer input, .galleryTitle, #youtubeURL, #linkURL {
+    padding: 4px 0;
+}
+
+#addVideos button, #addLinks button {
+    padding: 4px 6px;
+}
+
+.photoContainer input {
+    vertical-align: top;
+}
+
+#addVideos, #addLinks {
+    padding: 10px;
+}
+
 .closinglightbox, .lightboxNext, .lightboxPrev {
 font-size:14px;
 color:#F7BD00;
@@ -606,6 +625,12 @@ left:10px;}
 {position:absolute;
 right:10px;}
 
+.lightboxHeading {
+    font-size: 130%;
+    padding: 10px;
+	text-align: center;
+}
+
 
 #addForm input, #addForm textarea {
 border:1px solid #e3e3e3; 

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 {
@@ -149,6 +150,12 @@ $(function() {
 .deleteItem {
     font-weight: bold;
     cursor: pointer;
+    vertical-align: top;
+
+}
+
+.closinglightbox {
+    padding: 10px;
 }
 
 .section {
@@ -164,10 +171,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 +194,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 +213,9 @@ $(function() {
     </div>
 
     <div id="addLinks" class="section">
-        <h3>Other Links to Online Media</h3>
-        Link: <input type="text" id="linkURL" placeholder="eg. http://flickr.com/xyz" />
-        <button id="addLink">Add</button>
+        <h3 class="orange inlineBlock">Other Links to Online Media</h3>
+        <p>Link: <input type="text" id="linkURL" placeholder="eg. http://flickr.com/xyz" /><button id="addLink">Add</button></p>
+        
 
         <ul id="links">
             {% for link in links %}
@@ -221,6 +228,6 @@ $(function() {
         </ul>
 
     </div>
-
-    <a href="Javascript:close()">Done</a>
+    <br>
+    <a href="Javascript:close()" class="closinglightbox">Done</a>
 {% endblock %}

itf/templates/mediagallery/view.html

@@ -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>