condense display vertically

static/base.css

@@ -125,8 +125,8 @@ object#player {
 
 section.song {
 	background-color: #111;
-	padding: 15px 20px;
-	margin-top: 10px;
+	padding: 10px 15px;
+	margin-top: 7px;
 	position: relative; /* for remove */
 }
 section.song div.info {
@@ -135,6 +135,7 @@ section.song div.info {
 }
 section.song div.user {
 	float: right;
+	margin-right: 8px;
 }
 section.song div.remove {
 	position: absolute;
@@ -145,7 +146,7 @@ section.song div.remove {
 }
 section.song div.thumb {
 	float: left;
-	width: 150px;
+	width: 140px;
 	height: 90px;
 	overflow: hidden;
 }
@@ -154,7 +155,7 @@ section.song div.thumb img {
 }
 section.song canvas, section.song > img {
 	position: relative;
-	top: 20px;
+	left: 10px;
 }
 section.song > img[src$='pause.png'] {
 	display: none;

static/script.js

@@ -171,15 +171,14 @@ function add(id, title) {
 function drawAdd(s) {
 	$('article').append('\
 		<section class="song" id="' + s.yid + '">\
+			<div class="thumb">\
+				<img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\
+			</div>\
 			<div class="info">\
 				<a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\
 			</div>\
 			<div class="user">' + s.user + '</div>\
 			<div class="remove" onclick="remove(\'' + s.yid + '\')">×</div>\
-			<br class="clear">\
-			<div class="thumb">\
-				<img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\
-			</div>\
 			<canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\
 			<br>\
 			<img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\