"Резиновая" верстка и изменение стиля.

[mpd-lua.git] / css / general.css

diff --git a/css/general.css b/css/general.css
index 6bb13ccf56f4722e70208045c74e2b7dd39ed6b1..62e4e5642b2807c72e14caa1d6f85f339bb82588 100644 (file)
--- a/css/general.css
+++ b/css/general.css
@@ -1,24 +1,13 @@
-/*
-#525356
-*/
-
-
-
-* {
-       margin:0;
-}
-
 body {
+       margin: 0px;
        text-align: center;
        font-family: arial,sans-serif;
-       margin-top: 15px;
-       margin-bottom: 15px;
-       color: #AEAEAE;
+       color: Snow;
 }
 
 a {
        text-decoration: none;
-       color: #AEAEAE;
+       color: White;
 }
 
 table
@@ -48,154 +37,133 @@ button
        cursor: pointer;
 }
 
-.trackno
-{
-       text-align: right;
-       vertical-align: top;
-       padding: 0px 0px 5px 0px;
-}
-
-#heading_tbl {
-       width: 400px
-}
-
 #frame {
        text-align: left;
-       border: 1px solid #000;
-       width: 400px;
-       background: url(../images/bg.png) no-repeat #251616;
-       margin: 0 auto;
+       border: 1px solid Black;
+       background: DarkSlateGray;
+       margin: 0;
 }
 
-
 #nowplaying_heading {
        font-size: 1.3em;
-       font-wieght: bold;
-       height: 30px;   
-       background: url(../images/control_bg.png) repeat-x;
-       border-bottom: 1px solid #525356;
+       font-weight: bold;
+       padding: 5px;
+       background: linear-gradient(DarkSlateGray,Black);
+       border-bottom: 1px solid Black;
+       border-top: 1px solid Black;
+}
+
+#heading_tbl {
+       width: 100%;
 }
 
 #nowplaying_content {
-       margin: 10px 5px 10px 5px;
+       margin: 10px 10% 10px 10%;
        text-align: center;
-       border: 1px solid #525356;
-       width: 380px;
-       height: 60px;
+       border: 1px solid LightGray;
+       height: 3em;
        padding: 10px 0px 5px 0px;
-       background: url(../images/playing_bg.png);
+       background: SaddleBrown;
        font-weight: bold;
-       color: #fff;    
+       color: White;   
 }
 
 #control_buttons {
        text-align: center;
-       width: 390px;
        margin: 10px 5px 10px 5px;
 }
 
 #control_buttons table {
        margin-left: auto; 
-       margin-right: auto;
+  margin-right: auto;
 }
 
 
 #control_volume {
        text-align: center;
-       width: 390px;
        margin: 10px 5px 10px 5px;
 }
 
 #control_volume table {
        margin-left: auto; 
-       margin-right: auto;
+       margin-right: auto;
 }
 
-#playlist_menu {
-        font-wieght: bold;
-        height: 24px;
-        background: url(../images/control_bg.png) repeat-x;
-        border-top: 2px solid #525356;
-       margin-top: 5px;
-       margin-bottom: 5px;
+.playlist_menu {
+  font-weight: bold;
+  height: 24px;
+       padding: 5px;
+  background: linear-gradient(DarkSlateGray,Black);
+  border-bottom: 1px solid Black;
+  border-top: 1px solid Black;
 }
 
+.home {
+  text-align: left;
+  font-size: 1.0em;
+  font-weight: bold;
+  background: linear-gradient(DarkSlateGray,Black);
+  border-bottom: 2px solid Black;
+  border-top: 2px solid DarkSlateGray;
+}
+
+
 #items_heading {
        text-align: center;
+       width: 100%;
        font-size: 1.0em;
        font-weight:bold;
-       border-bottom: 1px solid #525356;
-       border-top: 1px solid #525356;
-       background-color: #333;
-}
-
-#home {
-       text-align: left;
-        font-size: 1.0em;
-        font-weight: bold;
-       border-bottom: 3px solid #525356;
-        background-color: #251616;
+       border-bottom: 1px solid DimGray;
+       border-top: 1px solid DimGray;
+       background: DarkSlateGray;
 }
 
 #items {
        font-size: 0.9em;
        text-align: center;
-       min-height: 400px;
-        max-height: 600px;
-       background: url(../images/playing_bg.png);
        overflow-y: scroll;
 }
 
 #items table {
-       width: 380px;
-       margin: 0px 5px 0px 5px;
-       border: 1px solid  #525356;
+       border: 1px solid DimGray;
 }
 
-#file {
+.file {
        text-align: left;
        width: 100%;
-
 }
 
 
-#itemEven{
-       background-color: #251616;
-
-}
-
-#itemOdd{
-        background-color: #333;
+.itemEven{
+       background-color: DarkSlateGray;
 }
 
-#itemActive {
-       background: url(../images/playing_bg.png);
-       color: #fff;
+.itemOdd{
+  background-color: DimGray;
 }
 
-#itemActive a {
-       color: #fff;
+.itemActive {
+       background: LightGray;
+       color: DarkSlateGray;
 }
 
-
-#move img {
-       margin: 1px 1px 1px 1px;
+.itemActive a {
+       color: DarkSlateGray;
 }
 
-#remove img {
-        margin: 1px 1px 1px 1px;
+.track_number {
+       text-align: right;
 }
 
-
 #volume_total {
-       width: 100px;
-       border: 1px solid #525356;
-       height: 5px;
+       margin: 10px;
+       width: 200px;
+       border: 1px solid LightGray;
+       height: 0.6em;
 }
 
 
 #volume_actual {
-       background-color: #d9600c;
-       height:5px;
+       background-color: DarkOrange;
+       height: 0.6em;
 }
-