Cleaned up classic theme a bit

1 files changed, 344 insertions, 422 deletions

diff --git a/themes/classic/templates/default.css b/themes/classic/templates/default.css
index 55db23f0..07588165 100644
--- a/themes/classic/templates/default.css
+++ b/themes/classic/templates/default.css
@@ -1,4 +1,3 @@
-<!--
 /*
 
  Copyright (c) 2001 - 2006 Ampache.org
@@ -18,278 +17,170 @@
  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 
 */
--->
+
+
+/************************************************/
+/*    Unify default browsers style rules        */
+/************************************************/
+:link,:visited { text-decoration:underline; }
+h1, h2, h3, h4, h5, h6, pre, code	{ font-size: 1em; line-height: 1em; } /* avoid browser default inconsistent font-sizes */
+a img, :link img, :visited img { border: none; } /* no blue linked image borders */
+ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } /* White space reset */
+
+
+/************************************************/
+/*           General style rules                */
+/************************************************/
+body { 
+	background:#d3d3d3;
+	font-family:Arial, Helvetica, Sans-Serif;
+}
 p { 
-	color: #000000;
+	color: #000;
+	margin:1em 0;
 }
-
-a { 
-	color: #000000; 
+a, a:visited, a:active{ 
+	color: #000; 
 	font-family: Verdana, Helvetica, sans-serif; 
 }
-a:visited 
-	{ 
-	color: #000000; 	
-	font-family: Verdana, Helvetica, sans-serif; 
-	}
-a:active  { 
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
+td { 
+	padding: 0 8px;
+	color: #000; 
+	font:12px Verdana, Helvetica, sans-serif; 
 }
-.text-box {
-	display: table-cell;
-	padding-left:5px;
-	padding-top:5px;
-	padding-right:5px;
-	margin-bottom:10px;
-	background-color: #bbbbbb;
-	border-right:2px solid #000000;
-	border-bottom:2px solid #000000;
-	border-left:2px solid #000000;
-	border-top:2px solid #000000;
+th {
+	padding-right: 10px;
 }
-.selected_button {
-	background-color: black;color:white;
+input, select, textarea{
+	font: 12px Verdana, Helvetica, sans-serif; 
+	background: #ddd; 
+	color: #000; 
 }
-.unselected_button {
-	/* there really isn't anything for this */
+input {
+	font-weight: bold;
+  margin: 2px 2px 2px 0;
 }
-.display {}
 
-#mpdpl td {
-	padding: 0px 2px 0px 2px;
-	text-align: left;
+
+/************************************************/
+/*             Header                           */
+/************************************************/
+#topbar { 
+	height: 80px;
+	padding: 3px 0 0 10px;
 }
-table.tabledata {}
-td { 
-	padding: 0px 8px 0px 8px;
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
-	font-size: 12px;
+#topbarright { 
+	float: right;
+	font-size: 10px;
 }
-th {
-	padding-right: 10px;
+#topbarleft, #topbarleft a{ 
+	float: left;
 }
-input {
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
-	font-size: 12px; 
-	font-weight: bold; 
-	background-color: #dddddd; 
-	margin: 2px 2px 2px 2px;
+
+
+/************************************************/
+/*                Footer                        */
+/************************************************/
+#footer {
+	margin: 0 0 10px 150px;
 }
-select	{ 
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
-	font-size: 12px; 
-	background-color: #dddddd; 
+#footer p {
+	color:#999;
+	font-size:10px;
 }
-textarea { 
-	background-color: #dddddd;
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
-	font-size: 12px; 
+
+
+/************************************************/
+/*                  Buttons                     */
+/************************************************/
+.selected_button {
+	background: #000;
+  color: #fff;
 }
+.unselected_button {
+}
+.smallbutton {
+	border:0;
+	padding: 0 1px;
+	font-size: 11px;
+	cursor: pointer;
+}
+
+
+/************************************************/
+/*         Tables (songs lists...)              */
+/************************************************/
 .table-header {
 /*	background: url(../images/ampache-light-bg.gif) #dddddd repeat-x; */
 	background: #a0a0a0;
 	vertical-align: top;
 	text-align:center;
 }
-    .header1 
-    { 
-	color: #000000; 
-	font-family: Verdana, Helvetica, sans-serif; 
-	font-size: 18px; 
-	font-weight: 900;
-    }
-    .header2
-    {
-    	color: #000000;
-	font-family: Verdana, Helvetica, sans-serif;
-	font-size: 14px;
-	font-weight: 900;
-    }
-	.headrow 
-		{
-		background:#cccccc;
+.odd {
 		font-size: 12px;
-		}
-	.odd 
-		{
-		background:#bbbbbb;
+		background:#bbb;
+}
+.even {
 		font-size: 12px;
-		}
-	.even
-		{
-		background:#dddddd;
+		background:#ddd;
+}
+.headrow {
 		font-size: 12px;
-		}
+    background:#ccc;
+}
 .blank {
 	background: #fff;
 }
 .border { 
-	background:#000000; 
+	background: #000; 
 }
 .header { 
 	font-size: 12px; 
 }
-.error { 
-	color: #990033; 
-}
-.fatalerror {
-	padding-top: 3px;
-	padding-left: 3px;
-	padding-right: 3px;
-	display: table-cell;
-	padding-bottom: 3px;
-	color: #990033;
-	font-weight:bold;
- 	border-right:2px solid #990033;
-	border-bottom:2px solid #990033;
-	border-left:2px solid #990033;
- 	border-top:2px solid #990033;		
-}
-#container div.fatalerror {
-	background:none;
-	height:auto;
-	padding:5px;
-	margin:10px;
-	display:block;
-}
-.disabled {
-	text-decoration: line-through;
-}
-.smallbutton {
-	border:0px;
-	padding-left:1px;
-	padding-right:1px;
-	font-size: 11px;
-	cursor: pointer;
-}
-	
-/* ////////////////////////////////////////////////////////////////*/	
-/* De aqui pa'bajo, ros esta creando una hoja de estilos unica para todo Ampache  */
-
-/* General style rules  */
-body{ 
-	padding-top: 0px;
-	margin-top: 0px;
-	margin-left: 0px;
-	margin-right: 0px; 
-	background-color:#d3d3d3;
-	font-family:Arial, Helvetica, Sans-Serif;
-}
 
-#maincontainer{
-	margin: 0px;
-}
-
-.alphabet { 
-	margin: 10px;
-	font-size: 10px; 
-	font-weight: normal; 
-}
-
-/* Content block */
+/************************************************/
+/*               Content block                  */
+/************************************************/
 #content {
 	top:90px;
 	float: none;
-	margin-top:7px;
-	margin-left:135px;
-	/*float:left;  use for horizontal menu; comment out otherwise */
-	/* background:#fff url("../images/bg_content.gif") repeat-y right top; */
+	margin:7px 0 0 135px;
+	/* background:#fff url(../images/bg_content.gif) repeat-y right top; */
 }
-
 h3#content_title{
-	font-family:Arial,Helvetica,Sans-Serif;
-	font-size:12px;
-	line-height:32px;
+	font: 12px/32px Arial,Helvetica,Sans-Serif;
+	background:#8b8b8b url(../images/content_corner.gif) no-repeat right top;
 	color:#fff;
-	margin:0px;
-	padding:0px;
-	background:#8B8B8B url("../images/content_corner.gif") no-repeat right top;
 }
-
 h3#content_title span {
 	text-align:left;
 }
-			
-/* Styles for Header */
-div#Header{
-	height:80px;
-	margin-bottom:3px;
-	padding:0px;
-}
 
-#Header h1 { 
-	background: transparent url("../images/bg_login_0.jpg") no-repeat top left; 
-	border:0px; 
-	width: 439px; 
-	height: 84px; 
-	float: left;
-	margin:0px;
-	padding:0px;
-}
-	
-#Header h1 span {
-	display:none
-}
-
-#Header h2 { 
-	background: transparent url(001/h2.gif) no-repeat top left; 
-	margin-top: 75px;  
-	width: 200px; 
-	height: 18px; 
-	float: right;
-}
-
-#Header h2 span {
-	font-size:10px;
-	margin-left:10px;
-}
-
-
-/* Sidebar */
-/**
- * Experimental for menus (Thx Sigger)
- * TO DO: Fill in 1px border around menus & submenu items
- * Make padding apply to the li, not just an a.  Moving padding: to li throws off the dropdown menu alignment.
- */
 
+/************************************************/
+/*                  Sidebar                     */
+/************************************************/
 #sidebar{
 	clear:both;
 	position:absolute;
 	left:5px;
 	top:87px;
 }
-
 #sidebar select	{
 	width: 95%; 
 }
-
 #sidebar h3 {
-	border:0; 
 	width: 120px; 
 	height: 28px; 
-	margin:0;
-	padding:0; 
 	background: transparent url(../images/sidebar_top.jpg) no-repeat left; 
 }
-	
 #sidebar h3 span {
 	display:none
 }
-
 #sidebar ul {
 	list-style: none;
-	font-family:Arial, Helvetica, Sans-Serif;
-	font-size: 10px;
-	margin: 0;
-	padding: 0;
-	line-height: 1em;
+	font: 10px/1em Arial, Helvetica, Sans-Serif;
 }
-   
 #sidebar ul.subnavside {
     display: none;
     position: absolute;
@@ -299,7 +190,6 @@ div#Header{
     font-size: 1em;
     z-index: 1;		
 }
-
 #sidebar li {
     float: left;
     clear: both;
@@ -307,44 +197,36 @@ div#Header{
     position: relative;
     width: 13em;
     width: /**/11.5em; /* Only IE5.5 can't see this */
-    margin: 0;
-    border-bottom: 1px solid #8B8B8B;
-    border-left: 1px solid #8B8B8B;
-    border-right: 4px solid #B4B4B4;
-    border-top: 1px solid #8B8B8B;
+    border: 1px solid #8b8b8b;
+    border-right: 4px solid #b4b4b4;
     background:#fff;
 }
-
 #sidebar ul.subnavside li { 
-    border-right: 1px solid #B4B4B4;
+    border-right-width: 1px;
 }
-
 #sidebar a, #sidebar .navbutton {
     display: block;
     position: relative;
     text-decoration: none;
     padding: .5em 0 .5em 1em;
 }
-
 #sidebar li:hover ul.subnavside, #sidebar li.sfhover ul.subnavside {
     display:block;
 }
-
 #sidebar li:hover, #sidebar li.sfhover,  #sidebar li.activetopmenu {
     color:#000;
-    background-color:#ddd;
+    background:#ddd;
 }
-
 #sidebar li.hover:active {
-    background-color:#ccc;
+    background:#ccc;
     z-index:30;
 }
 
 /* For horizontal menu */
-.horizontal_menu #content {margin:3em 0 0 2em;}
+.horizontal_menu #content { margin:3em 0 0 2em; }
 .horizontal_menu #sidebar { width: auto; top: 85px;}
 .horizontal_menu #sidebar h3 { display: none; }
-.horizontal_menu #sidebar li { clear: none; border:1px solid #8b8b8b}
+.horizontal_menu #sidebar li { clear: none; border:1px solid #8b8b8b; }
 .horizontal_menu #sidebar ul.subnavside  { left: 0; top: 2em; }
 
 
@@ -376,18 +258,18 @@ div#Header{
 #sidebar_browse_lists a		{ }
 
 
-/* Styles for Now Playing */
+/************************************************/
+/*          Now Playing Styles                  */
+/************************************************/
 #nowplaying{
 	clear: both;
-	width: 625px;
+	width: 600px;
 }
 
 #np_container1{
 	width: 260px;
 	height: 18px;
-	padding: 0px;
-	margin: 0px;
-	background: #fff url("../images/tb_tab.jpg") no-repeat top left;
+	background: #fff url(../images/tb_tab.jpg) no-repeat top left;
 }
 
 #np_container1 h1{
@@ -397,97 +279,99 @@ div#Header{
 }
 
 #np_container2{
-	border-width: 1px 1px 1px 1px;
-	border-style: solid;
+	border: 1px solid #999;
 	border-color:#ddd #999 #999 #ccc;
 	padding: 6px;
-	font-family: Verdana, sans-serif;
-	font-size: 10px;
-	line-height: 12px;
+	font: 10px/12px Verdana, sans-serif;
+	background: #d6d6d4 url(../images/bg_row.jpg) repeat top left;
 	color: #000;
-	background: #D6D6D4 url("../images/bg_row.jpg") repeat top left;
 }
-
-	
-/* Styles for Login template  */
-#container{
-	margin:100px auto 0px auto;
-	width:437px;
-	font-size: 12px;
-	text-align:center;
-}
-#container h1{
-	background:url("../images/bg_login_0.jpg") no-repeat;
-	height:81px;
-	margin-bottom:8px;
-}
-#container h1 span{
-	display:none;
-}
-#container div{
-	background:url("../images/bg_login_1.jpg") no-repeat;
-	height:285px;
-}
-#loginp_0{
-	color:#333;
-	margin-top:0px;
-	padding-top:60px;
-}
-.loginp_1{
-	text-align:right;
-	padding-right:100px;
+.np_row {
+	padding: 3px 0;
 }
-.loginp_1 span{
-	font-weight:bold;
+.np_cell {
+	margin: 10px;
 }
-.loginp_1 input{
-	border:1px solid #999;
+
+
+/************************************************/
+/*        Styles for the star ratings           */
+/************************************************/
+.star-rating{
+        position: relative;
+        list-style:none;
+        width: 80px;
+        height: 15px;
+        background: url(../../../images/ratings/star_rating.gif) top left repeat-x;
 }
-input.text_input {
-width:12em;
+.star-rating li{
+        float: right;
 }
-.loginp_1 input.check_input {
-margin-right:5em;
-} 
-/* Footer */
-#footer {
-	margin-left: 150px;
-	margin-bottom: 10px;
+li.current-rating{
+        display: block;
+        position: absolute;
+        height: 15px;
+        background: url(../../../images/ratings/star_rating.gif) left bottom;
+        text-indent: -9000px;
+        z-index: 1;
 }
-
-#footer p {
-	color:#999999;
-	font-size:10px;
+.star-rating li span{
+        position: absolute;
+        display:block;
+        width:16px;
+        height: 15px;
+        text-decoration: none;
+        text-indent: -9000px;
+        z-index: 20;
 }
-#topbar { 
-	height: 80px;
-	padding-top:3px;
-	padding-left:10px;
+.star-rating li span:hover{
+        background: url(../../../images/ratings/star_rating.gif) left center;
+        z-index: 2;
+        left: 0;
 }
-#topbarright { 
-	float: right;
-	font-size: 10px;
+li.zero-stars span:hover {
+        display: block;
+        left: 80px;
+        height: 15px;
+        background: url(../../../images/ratings/x.gif);
 }
-#topbarleft, #topbarleft a{ 
-	float: left;
+span.zero-stars {
+        display: block;
+        left: 80px;
+        height: 15px;
+        background: url(../../../images/ratings/x_off.gif);
 }
-
-/* Box Related Styles */
+span.one-stars        { left: 0px; }
+span.one-stars:hover  { width:16px; }
+span.two-stars        { left:16px; }
+span.two-stars:hover  { width: 32px; }
+span.three-stars      { left: 32px; }
+span.three-stars:hover{ width: 48px; }
+span.four-stars       { left: 48px; }
+span.four-stars:hover { width: 64px; }
+span.five-stars       { left: 64px; }
+span.five-stars:hover { width: 80px; }
+
+
+/************************************************/
+/*              Box Related Styles              */
+/************************************************/
 .box { 
-	padding:0px;
 	background: #f7f7f7;
 }
 .box-title { 
-	border-bottom: solid 1px #000000;
+	border-bottom: solid 1px #000;
 	font-size: 1.05em;
 	font-weight: bold;
 }
+
+/* Enclosing Boxes Styles */
 .box-left-top { 
 	background: url(../images/topleft.gif) no-repeat;
 	height:16px;
 }
 .box-left-bottom {
-        background: url(../images/bottomleft.gif) no-repeat;
+  background: url(../images/bottomleft.gif) no-repeat;
 	height:18px;
 }
 .box-left { 
@@ -509,7 +393,11 @@ margin-right:5em;
 .box-top { 
 	background: url(../images/top.gif);
 }
-/* List Header Styles */
+
+
+/************************************************/
+/*             List Header Styles               */
+/************************************************/
 .list-header { 
 	text-decoration: none;
 } 
@@ -518,185 +406,219 @@ margin-right:5em;
 }
 
 
-.confirmation-box {
-	padding-left:5px;
-	padding-top:5px;
- 	padding-right:5px;
-	margin-bottom:10px;
-	display: table-cell;
-	background-color: #bbbbbb;
-	border-right:2px solid #000000;
-	border-bottom:2px solid #000000;
-	border-left:2px solid #000000;
-	border-top:2px solid #000000;}
+/************************************************/
+/*             Text Action Styles               */
+/************************************************/
 .text-action, .text-action li {
-	margin-top:5px;
 	list-style: none;
-	margin-bottom:5px;
+	margin:5px 0;
 	padding-left:0px;
 }
 .text-action a, .text-action span {
-	background: #dddddd;
-	border:1px solid #000000;
- 	padding-left:2px;
-	padding-right:2px;
+ 	padding: 0 2px;
+	background: #ddd;
+	border:1px solid #000;
 	text-decoration: none;
 }
 .text-action #pt_active {
-	background: #000000;
-	color: #ffffff;
-	border:1px solid #dddddd;
-}
-#nowplaying {
-	width:600px;
-}
-.np_row {
-	padding-top: 3px;
-	padding-bottom: 3px;
-}
-.np_cell {
-	margin: 10px;
+	background: #000;
+	color: #fff;
+	border:1px solid #ddd;
 }
 
-/* 'Tab' Preferences, used by preferences.php */
 
+/************************************************/
+/*            Tabs (for preferences)            */
+/************************************************/
 #tablist {
         padding: 3px 0;
         margin: 12px 0 0 0;
         font: bold 12px Verdana, sans-serif;
 }
-
 #tablist li {
         list-style: none;
-        margin: 0;
         display: inline;
 }
-
 #tablist li a {
         padding: 3px 0.5em;
         margin-left: 3px;
-        border: 1px solid #cccccc;
+        border: 1px solid #ccc;
         border-bottom: none;
-        background: #dddddd;
+        background: #ddd;
         text-decoration: none;
 }
-
-#tablist li a:link { color: #222222; }
-#tablist li a:visited { color: #000000; }
-
+#tablist li a:link { color: #222; }
+#tablist li a:visited { color: #000; }
 #tablist li a:hover {
-        color: #000000;
-        background: #bbbbbb;
-        border-color: #000000;
+        color: #000;
+        background: #bbb;
+        border-color: #000;
 }
-
 #tablist li a#current {
-        color: #000000;
-        background: #bbbbbb;
-        border-color: #000000;
-        border-bottom: 1px solid #000000;
+        color: #000;
+        background: #bbb;
+        border-color: #000;
+        border-bottom: 1px solid #000;
 }
 
 
-
-/* TV Page Related Styles */
-#tv_np {
-	float:right;
+/************************************************/
+/*            Styles for Header                 */
+/*(for ampache admin : installation, update...) */
+/************************************************/
+div#Header{
+	height:80px;
+	margin-bottom:3px;
 }
-#tv_left { 
+#Header h1 { 
+	width: 439px; 
+	height: 84px; 
 	float: left;
-	clear: right;
+	border:0; 
+	background: transparent url(../images/bg_login_0.jpg) no-repeat top left; 
 }
-#tv_playlist {
-	clear: both;
+#Header h1 span {
+	display:none
 }
-/* User Online/Offline style, used in users.php */
-td.user_online {
-	background-color: green;
+#Header h2 { 
+	float: right;
+	margin-top: 75px;  
+	width: 200px; 
+	height: 18px; 
+	background: transparent url(001/h2.gif) no-repeat top left; 
 }
-td.user_offline {
-	background-color: #7f0000;
+#Header h2 span {
+	font-size: 10px;
+	margin-left: 10px;
 }
-td.user_disabled {
-	background-color: gray;
+
+
+/************************************************/
+/*         Styles for Login template            */
+/************************************************/
+#container{
+	margin:100px auto 0 auto;
+	width:437px;
+	font-size:12px;
+	text-align:center;
 }
-/* styles for the star ratings */
-.star-rating{
-        list-style:none;
-        margin: 0px;
-        padding:0px;
-        width: 80px;
-        height: 15px;
-        position: relative;
-        background: url(../../../images/ratings/star_rating.gif) top left repeat-x;
+#container h1{
+	background:url(../images/bg_login_0.jpg) no-repeat;
+	height:81px;
+	margin-bottom:8px;
 }
-.star-rating li{
-        padding:0px;
-        margin:0px;
-        float: right;
+#container h1 span{
+	display:none;
 }
-.star-rating li span{
-        display:block;
-        width:16px;
-        height: 15px;
-        text-decoration: none;
-        text-indent: -9000px;
-        z-index: 20;
-        position: absolute;
-        padding: 0px;
+#container div.fatalerror {
+	display:block;
+	height:auto;
+	padding:5px;
+	margin:10px;
+	background:none;
 }
-.star-rating li span:hover{
-        background: url(../../../images/ratings/star_rating.gif) left center;
-        z-index: 2;
-        left: 0px;
+#container div{
+	background:url(../images/bg_login_1.jpg) no-repeat;
+	height:285px;
 }
-li.zero-stars span:hover {
-        background: url(../../../images/ratings/x.gif);
-        height: 15px;
-        left: 80px;
-        display: block;
+#loginp_0{
+	color:#333;
+	margin-top:0;
+	padding-top:60px;
 }
-span.zero-stars {
-        background: url(../../../images/ratings/x_off.gif);
-        height: 15px;
-        left: 80px;
-        display: block;
+.loginp_1{
+	text-align:right;
+	padding-right:100px;
 }
-span.one-stars{
-        left: 0px;
+.loginp_1 span{
+	font-weight:bold;
 }
-span.one-stars:hover{
-        width:16px;
+.loginp_1 input{
+	border:1px solid #999;
 }
-span.two-stars{
-        left:16px;
+input.text_input{
+width:12em;
 }
-span.two-stars:hover{
-        width: 32px;
+.loginp_1 input.check_input{
+margin-right:5em;
+} 
+
+
+/************************************************/
+/*         TV Page Related Styles               */
+/************************************************/
+#tv_np{
+	float:right;
 }
-span.three-stars{
-        left: 32px;
+#tv_left{ 
+	float:left;
+	clear:right;
 }
-span.three-stars:hover{
-        width: 48px;
+#tv_playlist{
+	clear:both;
 }
-span.four-stars{
-        left: 48px;
+
+
+/************************************************/
+/* User Online/Offline style, used in users.php */
+/************************************************/
+td.user_online{
+	background:#0f0;
 }
-span.four-stars:hover{
-        width: 64px;
+td.user_offline {
+	background:#7f0000;
 }
-span.five-stars{
-        left: 64px;
+td.user_disabled {
+	background:#ccc;
 }
-span.five-stars:hover{
-        width: 80px;
+
+
+/************************************************/
+/*                Misc                          */
+/************************************************/
+.text-box, .confirmation-box {
+	display:table-cell;
+	padding:5px 5px 0 5px;
+	margin-bottom:10px;
+	background:#bbb;
+	border:2px solid #000;
 }
-li.current-rating{
-        background: url(../../../images/ratings/star_rating.gif) left bottom;
-        position: absolute;
-        height: 15px;
-        display: block;
-        text-indent: -9000px;
-        z-index: 1;
+.alphabet { 
+	margin:10px;
+	font-size:10px; 
+	font-weight:normal; 
+}
+#mpdpl td {
+	padding:0 2px 0 2px;
+	text-align:left;
+}
+.header1 { 
+	color:#000; 
+	font:bold 18px Verdana, Helvetica, sans-serif; 
+}
+.header2 {
+  color:#000;
+	font:bold 14px Verdana, Helvetica, sans-serif;
+}
+.error { 
+	color:#903; 
+}
+.fatalerror {
+	display:table-cell;
+	padding:3px;
+	color: #903;
+	font-weight:bold;
+ 	border:2px solid #903;
+}
+.disabled {
+	text-decoration:line-through;
 }
+#maincontainer{}
+table.tabledata {}
+.display {}
+
+
+
+
+	
+