* Updated CSS to improve compatibiliy and make appearance more consistant (Thx Spocky)

* Fixed some issues with the Amazon Album art gathering created when I re-wrote it

3 files changed, 231 insertions, 137 deletions

diff --git a/themes/burgundy/templates/default.css b/themes/burgundy/templates/default.css
index 28083590..d9b666c2 100644
--- a/themes/burgundy/templates/default.css
+++ b/themes/burgundy/templates/default.css
@@ -183,7 +183,7 @@ body{
 	postion:absolute;
 	float: left;
 	clear: both;
-	margin-left:15px;
+	margin-left:135px;
 	/*float:left;  use for horizontal menu; comment out otherwise */
 	/* background:#fff url("../themes/classic/images/bg_content.gif") repeat-y right top; */
 }
@@ -236,30 +236,31 @@ div#Header{
 	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.
  */
- 
-div#sidebar{
+
+#sidebar{
 	clear:both;
 	position:absolute;
 	left:5px;
-	top:20px;
-	background:url("../themes/classic/images/bg_navigation.gif") repeat-y left;	
+	top:87px;
+}
+
+#sidebar select	{
+	width: 95%; 
 }
 
 #sidebar h3 {
-	border:0px; 
+	border:0; 
 	width: 120px; 
 	height: 28px; 
-	margin:0px;
-	padding:0px; 
-	background: transparent url("../themes/classic/images/sidebar_top.jpg") no-repeat left; 
-
+	margin:0;
+	padding:0; 
+	background: transparent url(../images/sidebar_top.jpg) no-repeat left; 
 }
 	
 #sidebar h3 span {
@@ -267,62 +268,71 @@ div#sidebar{
 }
 
 #sidebar ul {
-	margin: 0px;
 	list-style: none;
 	font-family:Arial, Helvetica, Sans-Serif;
-	font-size:10px;
-	padding: 0px;
-	line-height: 1.0;
-	background-color:#320000;
+	font-size: 10px;
+	margin: 0;
+	padding: 0;
+	line-height: 1em;
+}
+   
+#sidebar ul.subnavside {
+    display: none;
+    position: absolute;
+    width: 9em;
+    top: -1px;
+    left: 11.5em;
+    font-size: 1em;
+    z-index: 1;		
 }
 
 #sidebar li {
-    margin: 0;
     float: left;
-    display: block;
+    clear: both;
+    display: inline;	/* IE6 Patch */
+    position: relative;
+    width: 12em;
+    width: /**/10.5em; /* Only IE5.5 can't see this */
+    margin: 0;
+    padding: .5em 0 .5em 1em;
     border-bottom: 1px solid #8B8B8B;
     border-left: 1px solid #8B8B8B;
-    border-right: 1px solid #8B8B8B;
+    border-right: 4px solid #B4B4B4;
     border-top: 1px solid #8B8B8B;
-    padding: 5px 0px 5px 10px;
-    width: 10.5em;
-    background-color:#320000;
+    background:#320000;
 }
 
-#sidebar a, .navbutton {
-    display: block;  /*Not sure why this is neccesary, but it is for IE*/
-    text-decoration: none;
+#sidebar ul.subnavside li { 
+    border-right: 1px solid #B4B4B4;
 }
 
-#sidebar li:hover, #sidebar li.sfhover {
-	color: #000000;
-       background-color: #8f0000;
+#sidebar a, #sidebar .navbutton {
+    display: block;
+    position: relative;
+    text-decoration: none;
 }
 
-#sidebar li:active {
-	background-color:#320000;
-	z-index:30;
+#sidebar li:hover ul.subnavside, #sidebar li.sfhover ul.subnavside {
+    display:block;
 }
-   
-#sidebar li ul {
-    float: left;
-    position: absolute;
-    width: 9em;
-/*	margin: -1.5em 0 0 10.5em; /* for vertical menu; comment out otherwise */
-	margin: 0.5em 0 0 -1.1em;  /* for horizontal menu;  comment out otherwise */ 
-    left: -999em;  /* this -999em puts the submenu item way off to the left until it's called back by a hover (below) */
-	z-index:30;
+
+#sidebar li:hover, #sidebar li.sfhover,  #sidebar li.activetopmenu {
+    color:#000;
+    background-color:#8f0000;
 }
 
-#sidebar li:hover ul, #sidebar li.sfhover ul {
-	left: auto;  /* this calls the submenu back when the parent li is hovered. */
-       background-color: #8f0000;
+#sidebar li.hover:active {
+    background-color:#8f0000;
+    z-index:30;
 }
 
-#navlist ul li:hover {
-       background-color: #8f0000;
+/* For horizontal menu */
+.horizontal_menu #content {margin:0em 0 0 2em;}
+.horizontal_menu #sidebar { width: auto; top: 50px;}
+.horizontal_menu #sidebar h3 { display: none; }
+.horizontal_menu #sidebar li { clear: none; border:1px solid #8b8b8b}
+.horizontal_menu #sidebar ul.subnavside  { left: 0; top: 2em; }
 
-}
 
 /* Styles for Now Playing */
 
diff --git a/themes/classic/templates/default.css b/themes/classic/templates/default.css
index e9c2ff89..3ead2b0b 100644
--- a/themes/classic/templates/default.css
+++ b/themes/classic/templates/default.css
@@ -167,9 +167,6 @@ textarea {
 	font-size: 11px;
 	cursor: pointer;
 }
-/* These three lines make a menu vertical */
- #sidebar li { float: none; }
- #sidebar li ul { margin: -1.5em 0 0 9em; }
 	
 /* ////////////////////////////////////////////////////////////////*/	
 /* De aqui pa'bajo, ros esta creando una hoja de estilos unica para todo Ampache  */
@@ -260,21 +257,24 @@ div#Header{
  * Make padding apply to the li, not just an a.  Moving padding: to li throws off the dropdown menu alignment.
  */
 
-div#sidebar{
+#sidebar{
 	clear:both;
 	position:absolute;
 	left:5px;
 	top:87px;
 }
 
+#sidebar select	{
+	width: 95%; 
+}
+
 #sidebar h3 {
-	border:0px; 
+	border:0; 
 	width: 120px; 
 	height: 28px; 
-	margin:0px;
-	padding:0px; 
-	background: transparent url("../images/sidebar_top.jpg") no-repeat left; 
-
+	margin:0;
+	padding:0; 
+	background: transparent url(../images/sidebar_top.jpg) no-repeat left; 
 }
 	
 #sidebar h3 span {
@@ -282,65 +282,99 @@ div#sidebar{
 }
 
 #sidebar ul {
-	margin: 0px;
 	list-style: none;
 	font-family:Arial, Helvetica, Sans-Serif;
-	font-size:10px;
-	padding: 0px;
-	line-height: 1.0;
+	font-size: 10px;
+	margin: 0;
+	padding: 0;
+	line-height: 1em;
+}
+   
+#sidebar ul.subnavside {
+    display: none;
+    position: absolute;
+    width: 9em;
+    top: -1px;
+    left: 11.5em;
+    font-size: 1em;
+    z-index: 1;		
 }
 
 #sidebar li {
+    float: left;
+    clear: both;
+    display: inline;	/* IE6 Patch */
+    position: relative;
+    width: 13em;
+    width: /**/11.5em; /* Only IE5.5 can't see this */
     margin: 0;
-    display: block;
     border-bottom: 1px solid #8B8B8B;
     border-left: 1px solid #8B8B8B;
     border-right: 4px solid #B4B4B4;
     border-top: 1px solid #8B8B8B;
-    /* float: left; /* use for horizontal menu; comment out otherwise */
-    padding: 5px 0px 5px 10px;
-    width: 10.5em;
-    background-color:#FFFFFF;
+    background:#fff;
 }
 
 #sidebar ul.subnavside li { 
     border-right: 1px solid #B4B4B4;
 }
 
-#sidebar a, .navbutton {
-    display: block;  /*Not sure why this is neccesary, but it is for IE*/
+#sidebar a, #sidebar .navbutton {
+    display: block;
+    position: relative;
     text-decoration: none;
+    padding: .5em 0 .5em 1em;
 }
 
-#sidebar li:hover, #sidebar li.sfhover {
-	color:#000000;
-	background-color:#DDDDDD;
+#sidebar li:hover ul.subnavside, #sidebar li.sfhover ul.subnavside {
+    display:block;
 }
 
-#sidebar li.hover:active {
-	background-color:#CCCCCC;
-	z-index:30;
-}
-   
-#sidebar li ul {
-    float: left;
-    position: absolute;
-    width: 9em;
-	margin: -1.5em 0 0 10.5em; /* for vertical menu; comment out otherwise */
-/*	margin: 0.5em 0 0 -1.1em;  /* for horizontal menu;  comment out otherwise */
-    left: -999em;  /* this -999em puts the submenu item way off to the left until it's called back by a hover (below) */
-	z-index:30;
+#sidebar li:hover, #sidebar li.sfhover,  #sidebar li.activetopmenu {
+    color:#000;
+    background-color:#ddd;
 }
 
-#sidebar li:hover ul, #sidebar li.sfhover ul {
-	left: auto;  /* this calls the submenu back when the parent li is hovered. */
-}
+#sidebar li.hover:active {
+    background-color:#ccc;
+    z-index:30;
+}
+
+/* For horizontal menu */
+.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 ul.subnavside  { left: 0; top: 2em; }
+
+
+/* Menu Elements Display (icons, visibility...) */
+#sidebar_home a 	{ }
+#sidebar_admin a 	{ }
+#sidebar_prefs a 	{ }
+#sidebar_browse a 	{ }
+#sidebar_plists a 	{ }
+#sidebar_stats a 	{ }
+#sidebar_search a 	{ }
+#sidebar #sidebar_subsearch  	{ }
+#sidebar_random a 	{ }
+#sidebar_form  		{ }
+#sidebar_localplay a 	{ }
+#sidebar_localplay_ctrl	{ }
+#sidebar_logout a 	{ }
+
+#sidebar_admin_users a		{ }
+#sidebar_admin_mail_users a	{ }
+#sidebar_admin_catalog a	{ }
+#sidebar_admin_config a 	{ }
+#sidebar_admin_access_list a	{ }
+
+#sidebar_browse_albums a	{ }
+#sidebar_browse_artists a	{ }
+#sidebar_browse_genre a		{ }
+#sidebar_browse_song_title a	{ }
+#sidebar_browse_lists a		{ }
 
-#play_type_switch {
-    font-size: 0.9em;
-    position: relative;
-    left: -2px;
-}
 
 /* Styles for Now Playing */
 #nowplaying{
@@ -519,6 +553,7 @@ margin-right:5em;
 .np_row {
 	padding-top: 3px;
 	padding-bottom: 3px;
+	display: block;
 }
 .np_cell {
 	margin: 10px;
diff --git a/themes/greyblock/templates/default.css b/themes/greyblock/templates/default.css
index fbdf3399..14719793 100644
--- a/themes/greyblock/templates/default.css
+++ b/themes/greyblock/templates/default.css
@@ -185,20 +185,106 @@
 		font-size: 11px;
 		cursor: pointer;
 		}
-	.sidebar 
-		{
-		margin-left:0px;
-		margin-top:0px;
-		margin-right:0px;
-		padding-right:0px;
-		padding-top: 0px;
-		padding-left: 0px;
-		}
-/* These three lines make a menu vertical */
+
 #content { 
 	float: none; 
 	background-color: #8B8B8B;
 }
+
+
+/* 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{
+	clear:both;
+	position:absolute;
+	left:5px;
+	top:87px;
+}
+
+#sidebar select	{
+	width: 95%; 
+}
+
+#sidebar h3 {
+	display:none;
+}
+	
+#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;
+}
+   
+#sidebar ul.subnavside {
+    display: block; /*none;*/
+    position: static; /*absolute;*/
+    width: 100%; /*9em;*/
+    top: 0; /*-1px;*/
+    left: 0; /*11.5em;*/
+    font-size: 1em;
+    z-index: 1;		
+}
+
+#sidebar li {
+    float: left;
+    clear: both;
+    display: inline;	/* IE6 Patch */
+    position: relative;
+    width: 12em;
+    width: /**/10.5em; /* Only IE5.5 can't see this */
+    margin: 0;
+    padding: .5em 0 .5em 1em;
+    border-bottom: 1px solid #607080;
+    border-left: none;
+    border-right: 1px solid #607080;
+    border-top: none;
+    background:#D4D4D4;
+}
+
+#sidebar ul.subnavside li { 
+    border-right: 1px solid #B4B4B4;
+}
+
+#sidebar a, #sidebar .navbutton {
+    display: block;
+    position: relative;
+    text-decoration: none;
+}
+
+#sidebar li:hover ul.subnavside, #sidebar li.sfhover ul.subnavside {
+    display:block;
+}
+#sidebar ul.subnavside{
+    margin-left:0.5em;
+}
+#sidebar ul.subnavside li{
+    width: 11.5em;
+    width: /**/10em; /* Only IE5.5 can't see this */
+}
+
+#sidebar li:hover, #sidebar li.sfhover,  #sidebar li.activetopmenu {
+    color:#000;
+    background-color:#7f7f7f;
+}
+
+#sidebar li.hover:active {
+    background-color:#ccc;
+    z-index:30;
+}
+
+
 /**
  * Div Definitions
  * These define how the page is layed out, be careful with these as changes to them
@@ -206,11 +292,6 @@
  */
 .text-action a,.text-action li { background: #D4D4D4; } 
 
-#sidebar h3 { display: none; } 
-
-#sidebar li:hover { 
-	background-color: #7f7f7f;
-}
 
 .box-left-top { display: none; }
 .box-left-bottom { display: none; }
@@ -222,40 +303,8 @@
 .box-top { display: none; }
 .box { background: #D4D4D4; margin: 10px; }
 
-#sidebar li {
-  /* float: left; Uncomment for horizontal */
-  margin: 0;
-  border-right: 1px solid #607080;
-  border-bottom: 1px solid #607080;
-  display: block;
-  background: #D4D4D4;
-  padding: 5px 0px 5px 10px;
-  width: 10.5em;
-}
-
-#sidebar li ul { 
-	left: auto; 
-	margin: 0;
-	display: block;
-	float: left;
-	width: 10em;
-	position: absolute;
-}
-
-#sidebar li:hover ul, #sidebar li.sfhover ul { 
-	left: auto;
-}
 
-#navlist ul li { 
-       background-color: #d6d6d6;
-       margin-left:.5em;
-       width: 10em;
-       display: block;
 	
-}
-
-#sidebar li:active { background-color: #FFFFFF; } 
-	#sidebar { background-color: #8b8b8b; } 
 	#maincontainer
 		{
 			margin: 0px;