More CSS and selectors cleanup

resources/css/app.css

@@ -433,23 +433,12 @@ div.overlay > div {
 	z-index: 1001;
 }
 
-
-div#screen,
-div#screen canvas#processcanvas {
-	width : 512px;
-	height : 512px;
-	top: 0;
-	margin: 0 auto;
-	position : absolute;
-	z-index : 2000;
-}
-
 .icon-loading {
 	display: inline-block;
 	width: 14px;
 	height: 14px;
 	margin-top: 1px;
-	*margin-right: .3em;
+	margin-right: .3em;
 	line-height: 14px;
 	vertical-align: text-top;
 	background-repeat: no-repeat;
@@ -493,6 +482,8 @@ div#screen canvas#processcanvas {
 .btn-primary {
 	-webkit-animation: pulse-btn 2s infinite alternate;
 	-moz-animation: pulse-btn 2s infinite alternate;
+	-ms-animation: pulse-btn 2s infinite alternate;
+	animation: pulse-btn 2s infinite alternate;
 }
 
 .btn-primary:hover,
@@ -500,7 +491,9 @@ div#screen canvas#processcanvas {
 .btn-primary:active,
 .btn-primary.active {
 	-webkit-animation: none;
+	-ms-animation: none;
 	-moz-animation: none;
+	animation: none;
 	opacity: 1;
 }
 
@@ -512,6 +505,8 @@ div.drag-table-item table tr.selected td {
 .droppable-hover {
 	-webkit-animation: pulse 1s infinite alternate;
 	-moz-animation: pulse 1s infinite alternate;
+	-ms-animation: pulse 1s infinite alternate;
+	animation: pulse 1s infinite alternate;
 	opacity: 0;
 	color: #FFF;
 	background-color: #4966B1;/* Old browsers */
@@ -523,3 +518,7 @@ div.drag-table-item table tr.selected td {
 	background: linear-gradient(to bottom, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
 }
+
+table tbody tr.itemplaying.itempaused td:first-child span {
+	background-image: url('../img/playicon.png');
+}

resources/css/player.css

@@ -1,7 +1,7 @@
 
 body > div.ui-layout-north > div:last-child {
 	margin: 6px auto 0 auto;
-	background: transparent url('../img/player_background.png') repeat-x;
+	background: url('../img/player_background.png') repeat-x left bottom;
 	height: 40px;
 	width: 450px;
 	border: 1px solid #6B6D5E;
@@ -86,7 +86,7 @@ body > .ui-layout-north > div:first-child {
 	margin-left: 25px;
 }
 
-body > .ui-layout-north > div:first-child #buttonPlay {
+body > .ui-layout-north > div:first-child .buttonPlay {
 	float: left;
 	clear: none;
 	display: block;
@@ -96,17 +96,17 @@ body > .ui-layout-north > div:first-child #buttonPlay {
 	margin-right: 4px;
 	background: transparent url('../img/button_play.png') no-repeat left top;
 }
-body > .ui-layout-north > div:first-child #buttonPlay.playing {
+body > .ui-layout-north > div:first-child .buttonPlay.playing {
 	background-image: url('../img/button_pause.png');
 }
 
-body > .ui-layout-north > div:first-child #buttonPlay.stopped {
+body > .ui-layout-north > div:first-child .buttonPlay.stopped {
 	background-image: url('../img/button_stop.png');
 }
 
-body > .ui-layout-north > div:first-child #buttonVolume,
-body > .ui-layout-north > div:first-child #buttonPrev,
-body > .ui-layout-north > div:first-child #buttonNext {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input,
+body > .ui-layout-north > div:first-child .buttonPrev,
+body > .ui-layout-north > div:first-child .buttonNext {
 	float: left;
 	clear: none;
 	display: block;
@@ -115,20 +115,18 @@ body > .ui-layout-north > div:first-child #buttonNext {
 	margin-top: 3px;
 }
 
-body > .ui-layout-north > div:first-child #buttonPrev {
+body > .ui-layout-north > div:first-child .buttonPrev {
 	background: url('../img/button_prev.png') no-repeat left top;
 }
 
-body > .ui-layout-north > div:first-child #buttonNext {
+body > .ui-layout-north > div:first-child .buttonNext {
 	background: url('../img/button_next.png') no-repeat left top;
 }
 
-body > .ui-layout-north > div:first-child #buttonNext:active,
-body > .ui-layout-north > div:first-child #buttonPrev:active,
-body > .ui-layout-north > div:first-child #buttonPlay:active,
-body > .ui-layout-north > div:first-child #buttonNext.disabled:active,
-body > .ui-layout-north > div:first-child #buttonPrev.disabled:active,
-body > .ui-layout-north > div:first-child #buttonPlay.disabled:active {
+body > .ui-layout-north > div:first-child .buttonNext:active,
+body > .ui-layout-north > div:first-child .buttonPrev:active,
+body > .ui-layout-north > div:first-child .buttonPlay:active,
+body > .ui-layout-north > div:first-child .disabled:active {
 	background-position: left bottom;
 }
 
@@ -164,19 +162,19 @@ progress#daaprPlayerProgress span {
 	padding: 0;
 }
 */
-#volumeWrapper {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper {
 	float: left;
 	clear: none;
 	margin-left: 25px;
 	margin-top: 16px;
 }
 
-#volumeWrapper input#buttonVolume {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input {
 	float: left;
 	clear: none;
-	vertical-align: bottom;
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
+	border-radius: 6px;
 	/*background: url('../img/volume_bg.png') repeat-x;*/
 	display: block;
 	height: 6px;
@@ -190,13 +188,14 @@ progress#daaprPlayerProgress span {
 	margin-top: 2px;
 }
 
-#volumeWrapper input#buttonVolume, 
-#volumeWrapper input#buttonVolume span {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input/*,
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span*/ {
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
+	border-radius: 6px;
 }
 /*
-#volumeWrapper progress#buttonVolume span {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span {
 	background: url('../img/volume_fg.png') repeat-x;
 	display: block;
 	height: 6px;
@@ -205,13 +204,12 @@ progress#daaprPlayerProgress span {
 	padding: 0;
 }
 
-#volumeWrapper progress#buttonVolume span a {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span a {
 	display: none;
 }
 */
 
-#volumeWrapper a#buttonVolDown {
-	vertical-align: top;
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:first-child {
 	display:block;
 	float: left;
 	clear: left;
@@ -221,8 +219,7 @@ progress#daaprPlayerProgress span {
 }
 
 
-#volumeWrapper a#buttonVolUp {
-	vertical-align: top;
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:last-child {
 	display:block;
 	float: left;
 	clear: right;
@@ -241,7 +238,3 @@ table tbody tr.itemplaying td:first-child span {
 	height: 12px;
 	line-height: 14px;
 }
-
-table tbody tr.itemplaying.itempaused td:first-child span {
-	background-image: url('../img/playicon.png');
-}

resources/templates/player/layout.html

@@ -1,11 +1,11 @@
 <div>
-	<a id="buttonPrev" class="disabled"></a>
-	<a id="buttonPlay" class="disabled"></a>
-	<a id="buttonNext" class="disabled"></a>
-	<div id="volumeWrapper">
-		<a id="buttonVolDown" class="disabled"></a>
-		<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
-		<a id="buttonVolUp" class="disabled"></a>
+	<a class="buttonPrev disabled"></a>
+	<a class="buttonPlay disabled"></a>
+	<a class="buttonNext disabled"></a>
+	<div class="playerVolumeWrapper">
+		<a class="disabled"></a>
+		<input type="range" minx="0" max="1" step="0.05" value="0" disabled />
+		<a class="disabled"></a>
 	</div>
 	<div class="clearfix"></div>
 </div>