Page 004 - Playlist

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{Title}</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <script src="http://static.tumblr.com/01wstkc/mMho526cb/jquery-1.11.3.min.js"></script>
    <style>
        body {
	background-color: #f5f5f5;
	color: #cecece;
	font-family: 'Calibri', sans-serif;
	font-size: 11px;
}

a {
	color: #ffffff;
	text-transform: uppercase;
	-moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

a:hover {
	color: #888888;
}

.clear {
	clear: both;
}

#content {
	overflow: hidden;
    position: relative;
	width: 795px;
	margin: 50px auto;
}


#sidebar {
	float: left;
	height: 100%;
	position: absolute;
    top: 0;
	width: 175px;
	padding: 40px 20px;
	background-color: #1a1a1a;
	text-align: right;
}

h1 {
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	margin-bottom: 0px;
}

#desc {
	margin-top: 10px;
	text-align: justify;
}

ul#list {
	padding: 0;
	text-align: center;
}

ul#list li {
	list-style-type: none;
	padding: 10px;
	text-transform: uppercase;
	width: 100%;
	cursor: pointer;
	border-bottom: 1px solid #313131;
}

ul#list li:last-child {
	border: none;
}

ul#list li:hover {
	background-color: #313131;
}

#container {
	width: 540px;
	background-color: #1a1a1a;
	padding: 15px;
	float: right;
}

#container img {
	width: 540px;
	height: 540px;
	margin-bottom: 10px;
}

#trackinfo {
	float: left;
	width: 410px;
	padding: 10px;
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
}

#trackinfo span {
	display: none;
}

#trackinfo .extra {
	color: #888888;
	text-transform: none;
}

#share {
   	border: none;
    width: 30px;
    background-image: url('http://static.tumblr.com/01wstkc/HQTo5268y/reblog.png');
  }

#np {
	float: left;
	width: 80px;
	color: #888888;
	padding: 10px 0;
	text-transform: uppercase;
}

#player {
	width: 500px;
	padding: 0 20px;
	height: 40px;
}

button, #timeline {
	float: left;
	width: 30px;
	height: 30px;
	margin-top: 5px;
	border: none;
	border-right: 1px solid #313131;
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #1a1a1a;
	cursor: pointer;
	outline: none;
	-moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;

}

button:hover {
	opacity: 0.6;
}

#sButton {
    	background-image: url('http://static.tumblr.com/01wstkc/wkIo526ae/stop.png');
    }

.play {
    	background-image: url('http://static.tumblr.com/01wstkc/2bOo52684/play.png');
    }

.pause {
    	background-image: url('http://static.tumblr.com/01wstkc/Duio5267u/pause.png');
    }

#prev {
    	background-image: url('http://static.tumblr.com/01wstkc/vFBo5268k/previous.png');
    }

#next {
    	border: none;
    	background-image: url('http://static.tumblr.com/01wstkc/6JXo5267i/next.png');
    }

#replay {
    	background-image: url('http://static.tumblr.com/01wstkc/QTDo5269z/replay.png');
    }

#volume {
    	position: relative;
    }

.volume {
    	background-image: url('http://static.tumblr.com/01wstkc/6deo526aq/volume.png');
    }

.mute {
    	background-image: url('http://static.tumblr.com/01wstkc/sTqo52675/mute.png');
    }

#volumecontainer {
	position: absolute;
	top: 0;
	left: 28px;
	width: 108px;
	height: 30px;
	background-color: #1a1a1a;
	color: #cecece;
	font-size: 10px;
	display: none;
	text-align: right;
}

#volumecontainer span {
	line-height: 32px;
}

#volumebar {
	position: absolute;
	margin-top: 13px;
	width: 80px;
	height: 3px;
	background-color: #313131;
}

#volumehead {
	width: 7px;
	height: 7px;
	margin-top: -1px;
	background-color: #cecece;
	border-radius: 100%;
}

button#volume:hover {
	opacity: 1;
}

#timeline {
	float: left;
	width: 215px;
	height: 13px;
	margin: 12px 7px 0 7px;
	border: 1px solid #313131;
}

.buffer {
	float: left;
	width: 0%;
	height: 100%;
	background-color: #313131;
}

#playhead {
	position: relative;
	width: 4px;
	height: 13px;
	background-color: #cecece;
	cursor: pointer;
}

#timer {
	float: left;
	height: 30px;
	line-height: 30px;
	margin: 5px 0 0 5px;
	padding: 0 10px;
	font-size: 11px;
	border-left: 1px solid #313131;
	border-right: 1px solid #313131;
}

ul#playlist {
	padding: 0;
	margin: 10px 0 0 -10px;
	width: 100%;
}

ul#playlist li {
	list-style-type: none;
	padding: 15px 10px;
	width: 100%;
	cursor: pointer;
	font-size: 11px;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	-moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

ul#playlist li:hover {
	background-color: #313131;
}

ul#playlist li .extra {
	display: none;
}

.tab img {
	display: none;
}

    </style>
  </head>
  <body>
  <div id="content">
    <div id="sidebar">
      <h1>Page 004</h1>
      <a href="/">Home</a> | <a href="/ask">Message</a> | <a href="/">Link</a> | <a href="http://macfustythemes.tumblr.com/playlistcredit">Credit</a>
      <div id="desc">
      Your description goes here!
      </div>
      <!-- SECTION: Optional multiple playlists. If you only want to include one playlist, just delete this section. -->
      <ul id="list">
          <li data-tab="tab1">Playlist 1</li>
          <li data-tab="tab2">Playlist 2</li>
          <li data-tab="tab3">Playlist 3</li>
      </ul>
      <!-- End of multiple playlists section. -->
  </div>
  <div id="container">
    <img id="main">
  <div id="np">Now Playing:</div>
  <div id="trackinfo"></div>
  <button id="share"></button>
  <div class="clear"></div>
  <div id="player">
    <button id="pButton" class="play"></button>
    <button id="sButton"></button>
    <div id="timeline">
      <div class="buffer"></div>
      <div id="playhead"></div>
    </div>
    <div id="timer">
    <span class="played">00:00</span> /
    <span class="total">00:00</span>
  </div>
    <button id="volume" class="volume"><div id="volumecontainer"><div id="volumebar"><div id="volumehead"></div></div><span>00</span></div></button>
    <button id="replay"></button>
    <button id="prev"></button>
    <button id="next"></button>
  </div>
  <!-- Playlist Section. If you want to include multiple playlists, copy and paste this section and change "tab1" to "tab2", "tab3", etc. -->
  <div class="tab" id="tab1">
  <img src="https://placeholdit.imgix.net/~text?txtsize=51&txt=Your+image+here!+540px+width.&w=540&h=540">
  <ul id="playlist">
        <li data-src="SongURLhere">
          <span>01.</span> Your Track Information here
          <div class="extra">This is an optional extra which will only appear when the track is playing. You might use it for lyrics or quotations.</div>
        </li>
        <li data-src="SongURLhere">
          <span>01.</span> Your Track Information here
          <div class="extra">This is an optional extra which will only appear when the track is playing. You might use it for lyrics or quotations.</div>
        </li>
        <li data-src="SongURLhere">
          <span>01.</span> Your Track Information here
          <div class="extra">This is an optional extra which will only appear when the track is playing. You might use it for lyrics or quotations.</div>
        </li>
        <li data-src="SongURLhere">
          <span>01.</span> Your Track Information here
          <div class="extra">This is an optional extra which will only appear when the track is playing. You might use it for lyrics or quotations.</div>
        </li>
        <li data-src="SongURLhere">
          <span>01.</span> Your Track Information here
          <div class="extra">This is an optional extra which will only appear when the track is playing. You might use it for lyrics or quotations.</div>
        </li>
  </ul>
  </div>
  <!-- End of Playlist Section. -->
</div>
    <script src="http://static.tumblr.com/01wstkc/rJco5r126/playlistmulti.js"></script>
  </body>
</html>