site.css

/*

 Rhythmweb - a web site for your Rhythmbox.
 Copyright (c) 2012 fossfreedom and Taylor Raack
 Copyright (C) 2007 Michael Gratton.

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along
 with this program; if not, write to the Free Software Foundation, Inc.,
 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.

*/

html, body {
  color: WindowText;
  background: Window;
  font: caption;
}

#player {
  margin: 16px auto;
  margin-bottom: auto;
  border: 1px solid ThreeDShadow;
  padding: 2px;
  color: WindowText;
  background: Window;
}

#window-title { 
  margin: 0px;
  padding: 4px 2px;
  font-weight: normal;
  font-size: 1em;
  color: HighlightText;
  background: Highlight;
}

#toolbar { 
  margin: 0px;
  overflow: auto;
  border-top: 1px solid ThreeDShadow;
  border-bottom: 1px solid ThreeDShadow;
  line-height: 1em;
  text-align: right;
}

#play,
#pause,
#stop,
#previous-track,
#next-track,
#toggle-repeat,
#toggle-shuffle,
#toggle-playlist-view {
  float: left;
}

#toggle-playlist-view {
  margin-top: 8px;
}

#playing {
  margin: 8px 2px;
}

#not-playing,
#title {
  font-size: 1.4em;
}

#playlist {
  width: 100%;
}

#playlist tr.alt td {
  background: #ecf6fc;
}

#playlist tr.over td {
  background: #bcd4ec;
}

#playlist tr.selected td {
  background: ButtonFace;
}

#footer {
  margin-top: 24px;
}

#footer p {
  margin: 0px;
  text-align: center;
  font-size: 0.8em;
}

#main {
  margin-top: 8px;
}

#titlePane {
  background: white;
}

#loading {
  text-align: center;
}

table {
  border-collapse: separate;
  border-spacing: 0px;
  padding: 1px;
}

table thead th {
  border-top: 1px solid ThreeDHighlight;
  border-left: 1px solid ThreeDShadow;
  border-bottom: 1px solid ThreeDShadow;
  padding: 4px;
  font-size: 1em;
  text-align: left;
  color: ButtonText;
  background: ButtonFace;
}

table thead th:first-child {
  border-left: 0px;
}

table tbody td {
  padding: 4px;
  color: ButtonText;
  font-size: small;
}

img { 
  border: 0px;
}

button {
  margin: 2px;
  border: 2px solid Window;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding: 0px;
  background: Window;
}

button:hover,
button.active:hover {
  border-top: 2px solid ButtonHighlight;
  border-left: 2px solid ButtonHighlight;
  border-bottom: 2px solid ButtonShadow;
  border-right: 2px solid ButtonShadow;
  background: Window;
}

button.active,
button.active:active,
button:active {
  border-top: 2px solid ButtonShadow;
  border-left: 2px solid ButtonShadow;
  border-bottom: 2px solid ButtonHighlight;
  border-right: 2px solid ButtonHighlight;
  background: ButtonShadow;
}
 
button img {
  margin: 2px;
  padding: 0px;
  vertical-align: middle;
}

cite {
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
}

#trackbox,#playlistbox {
    border: 1px solid;
}
 
#playlistbox {
    background-color: #FFF;
    border-color: #BCD;
    display: none;
}

#playlistbox .selected {
  background: ButtonFace;
}

#trackbox {
    border-color: #CDC;
}
 
.use-sidebar #trackbox {width: 79%;}
.use-sidebar #playlistbox {
    display: block;
    width: 20%;
}
 
.use-sidebar.sidebar-at-left #trackbox, .use-sidebar.sidebar-at-right #playlistbox {float: right;}
.use-sidebar.sidebar-at-right #trackbox, .use-sidebar.sidebar-at-left #playlistbox {float: left;}

.clearer {
    clear: both;
}