path: root/themes/greysme/templates/default.css

/*

 Copyright (c) 2001 - 2006 Ampache.org
 All rights reserved.

 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 
 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., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.

*/

/***************************************************************/

 Ampache Theme "Greysme"
 by Spocky v1.02 (2007/09/23)
 
 Feel free to modify/reuse, just mention my name _somewhere_
  
/***************************************************************/
/* Theme colors : */
/* ---------------*/
/* Red : 		#8b3e38 (#5a211c was too dark) */
/* Light blue : 	#74718a (#5b596d was too dark) */
/* Dark blue  : 	#2b293d */
/* Black : 		#050505 */
/* Dark grey : 		#111    */
/* Orange:		#e9ad51 */




/************************************************/
/*         General style rules                  */
/************************************************/

body, html, fieldset			{ border: 0; } 
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 */
*					{ margin: 0; padding: 0; } /* White space reset */


html{ font-size: 62.5%; }

body{ 
	font-size: 1.1em;
	font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
	background: #2b293d url(../images/background.jpg) 0 0 repeat-x fixed;
	min-width:90em;
}

ol	{ list-style-type: decimal-leading-zero; }
li	{ list-style-position: inside; }
p 	{ color: #e9ad51; }
a	{ color: #74718a; text-decoration: none; }

td 	{ padding: 0 8px; color: #e9ad51; }
th 	{ }

input, select	{
	font-size:1em;
	color: #e9ad51;
	background-color: #111; 
	border: 1px solid #8b3e38;
	margin:0 0 1px 0;
}

input{
  padding:0 2px;
}

input:focus, select:focus { border-style: dotted; }

textarea { 
	background-color: #111;
	color: #e9ad51; 
}

.link { cursor:pointer; }

/************************************************/
/*             IE6 behaviors                    */
/* - csshover2: :hover support on any element   */
/************************************************/
body { behavior:url("csshover2.htc"); }

/************************************************/
/*             Styles for Site Header           */
/************************************************/

#topbar 	{ padding: 0 0; }
#topbarright  	{ font-size: 0.9em; text-align: right; color: #e9ad51; position: absolute; top: 0px; right: 0; padding: 3px; }
#topbarright b 	{ font-weight: normal }
#topbarright a 	{ color: #e9ad51;}
#topbarleft 	{ text-align: center; background: url(../images/ampache_back.gif) 0 0 repeat-x;}
#topbarleft a 	{ }

/************************************************/
/*                XSPF Player                   */
/************************************************/

.xspf_player {
    right: 20px;
    position: absolute;
}

/************************************************/
/*                Footer                        */
/************************************************/
#footer {
  clear:both;
	text-align:center;
	padding:3px;
	font-size:0.8em;
}

/************************************************/
/*                  Buttons                     */
/************************************************/
.smallbutton {
	border: 0px;
	padding: 0 1px;
	cursor: pointer;
}
input.button, input[type=button], input[type=submit], .text-action a, .text-action span, .smallbutton {
	background:#8b3e38 url(../images/button_back2.png) 0 100% repeat-x !important;
	background:#8b3e38;
	color:#c98d31;
	padding:0px 0.5em; 
	margin:4px 0 0 0; 
	border:none;
}
.text-action span
{
  display:block; cursor: pointer;
}
input.button:hover, input[type=button]:hover, input[type=submit]:hover, div.text-action a:hover, div.text-action span:hover,.smallbutton:hover {
	background:#74718a url(../images/button_back2.png) 0 100% repeat-x !important;
	background:#74718a;
	color:#e9ad51;
}

input[type=checkbox]{border:none;background:none;}

/************************************************/
/*         Tables (songs lists...)              */
/************************************************/

.table-header {
	background: #111;
	vertical-align: top;
}
.table-header td, .table-header th {
	color:#8b3e38; 
	font-variant:small-caps;
	font-weight:normal;
}
.table-header th { 
	border-right:1px solid #000;
}
.table-header td a, .table-header th a {
	color:#8b3e38;
	padding-right:10px;
	background: url(../images/sort_off.gif) 100% 50% no-repeat;
	display:block;
}
.table-header td a:hover, .table-header th a:hover {
	color:#8b3e38;
	background-color:transparent;
	background-image:url(../images/sort_on.gif);
}

.odd, .even				{ background: url(../images/list_back.png) 0 50% repeat-x !important; background-image: none;}
.odd 					{ background-color: #111 !important;}
.even					{ }
.odd:hover, .even:hover 		{ background-color: #2b293d !important;}
/*
.odd td img, .even td img 		{ border: 2px solid transparent; }
.odd:hover td img, .even:hover td img	{ border-color: #e9ad510; }
*/
/* todo : quand col, mettre sur les a:hover de la col action un background-color:none;*/
.odd td a img:hover, .even td a img:hover {opacity:0.5;}

.border 	{ background: #000; }



/************************************************/
/*               Content block                  */
/************************************************/

#content {margin:10px 14em 10px 13.5em;}

/* Center things on supporting browsers */
#content>table,#content>table .box  { margin-left: auto; margin-right: auto; } 

h3#content_title{}		/* Doesn't exist anymore (?) */
h3#content_title span {}	/* Doesn't exist anymore (?) */


/************************************************/
/*                  Rightbar                    */
/************************************************/
#rightbar { 
	width:13em;
	background:#2b293d;
	float:right;
} 
#rightbar ul                      {	list-style:none; }
#rightbar a                       { text-decoration:none; }


/* Rightbar Menu */
#rightbar #rb_action {	
  padding:4px;
}
#rightbar #rb_action li         {	display:inline; }
#rightbar li#rb_add,#rightbar li#pl_add              { position:relative; z-index:10;}
#rightbar li#rb_add:hover, #rightbar li#pl_add:hover { background:#e9ad51; } 
/* Rightbar AddItems SubMenu */
#rightbar li:hover .submenu  {	display:block; } 
#rightbar .submenu { 
  display:none; 	
  position:absolute;
	right:0px;
	top:15px;
  background: #050505 url(../images/button_back.png) 0 100% repeat-x;
	border:2px solid #e9ad51;
	width:15em;
	padding:0.3em;
	font-size:0.8em;
	
}
* html #rightbar .submenu {right:100px;} /* IE6 fix */

#rightbar .submenu a {
 display:block;
 padding:0.1em;
 color:#8b3e38;
 text-decoration:none;
 text-align:right;
}
#rightbar .submenu a:hover,
#rightbar #rb_current_playlist a:hover { color:#e9ad51; }

/* Rightbar playlist */
#rightbar #rb_current_playlist    {
  background: #111;
  padding-bottom:0.5em; 
}
#rightbar #rb_current_playlist li   { position:relative;font-size:0.9em;;line-height:14px; color:#5b5b5b; padding-right:20px;}
#rightbar #rb_current_playlist li a { display:block; padding:0.2em;}
#rightbar .delitem                  { position:absolute;right:0;top:0; }
/************************************************/
/*                  Sidebar                     */
/************************************************/

#sidebar {
	float:left:
  position:relative;
	width: 13em;
	text-align: left;
	font-size: 0.8em;
	padding-top:29px;
	background:#2b293d url(../images/ampache_menu.gif) 50% 0 no-repeat;
}

/* For supporting browsers *cough*... I mean not IE6... *cough*, fix sidebar position on the left */
*>div#sidebar{ position: fixed; } 

#sidebar select		    { width: 95%; }
#sidebar .smallbutton	{ margin: 0; }
#sidebar ul           { list-style:none; }

/* For sidebar tabs */
/********************/
#sidebar-tabs{
	border-top:1px solid #000;
	background:#111;
}

#sidebar-tabs li.sb1 {
  float: left;
	padding:1px;
  background: #111 ; 
  border-top:0.5em solid #8b3e38;
  border-right:1px solid #000;width:16px;
}
#sidebar-tabs li.active { 
	/*background: #faf url(../images/top.gif) repeat-x 0 0;*/ 
	border-top-color: #e9ad51;
} 
#sidebar-tabs li:hover.sb1
{
  background:#000;
	border-top-color: #e9ad51;
}
/* Tabs content */
/****************/
#sidebar-page {
  position:absolute;
  left:0;
  top:52px;
	background: #111;
	padding-bottom:0.5em;
  width:13em;
  color:#8b3e38;
} 
#sidebar-page ul.sb2 {
  /*padding:2px 4px;*/
}
#sidebar-page ul.sb2 li{
  margin:1em auto;
  padding-bottom: 0.5em;
  /*border-bottom: 1px solid #fff;*/
}
#sidebar-page ul.sb2 h4{
  padding:0.2em 0.5em 0.5em 0;
  font-style:italic; 
  font-weight:normal;
  letter-spacing:0.2em;
  text-align:right;
  border-bottom:1px dotted #e9ad51;
  text-decoration: overline;
  background: url(../images/puce.gif) -8px -8px no-repeat;
  }
#sidebar-page ul.sb2 li:hover h4{
  background-color:#000;
}

#sidebar-page ul.sb3, #sidebar-page div.sb3 {
  color:#8b3e38;
}
#sidebar-page .sb3 a{ color:#8b3e38; }
#sidebar-page ul.sb3 li{
  margin:0;
  padding:0;
  border:none;
  font-weight:normal;
  background: #111 url(../images/button_back.png) 0 100% repeat-x;
  border-bottom: 1px solid #000;
}
* html #sidebar-page ul.sb3 li{display:inline;background:#111;} /* fix ie6 */
#sidebar-page .sb3 a, #sidebar-page .sb3 div{ 
  padding:0.2em 0.6em;
  border-left: .5em solid #8b3e38;
}
#sidebar-page .sb3 a:hover{ 
  border-left-color: #e9ad51;
}

#sidebar-page a{
  display:block;
}
#sidebar-page a:hover{
  background:#000;
  color:#e9ad51;
}

/* SIDEBAR : Home */
/******************/

/* SIDEBAR : Browse */
/********************/
.alphabet { 
  background:transparent; /* fix ie bug */
  /*font-size:0.95em;*/
	/*font-weight:normal;*/
	margin: 0.3em auto;
	/*color:#5b5b5b;*/
}
.alphabet span.link { 
	cursor: pointer;
	margin: 0;
	padding:3px 5px;
	font-family: monospace, Courier, Georgia;
} 
.alphabet span.active{ color:#e9ad51; }
.alphabet span.link:hover { 
	background: #8b3e38;
	color:#111;
} 

/* SIDEBAR : Localplay */
/***********************/

.active_instance { 

} 

/* SIDEBAR : Preferences */
/*************************/

/* SIDEBAR : Admin */
/*******************/
#sb_admin_catalogs li.sb_admin_catalogs_ctrls img {margin:0;}
#sb_admin_catalogs li.sb_admin_catalogs_ctrls a{
  display:inline; 
  padding:0; 
  border:none; 
}


/************************************************/
/*          Albums of the moment                */
/************************************************/

.random_album
{
  position:relative;
  float:left;
  padding:8px;
}

.random_album .play_album
{
  position:absolute;
  top:10px;
  right:0;
}
/************************************************/
/*          Styles for Now Playing              */
/************************************************/

#nowplaying{
	clear: both;
}
#np_container1{
	height: 18px;
}
#np_container1 h1{
	font-weight: bold;
	padding: 2px;
}
#np_container2{
	border-width: 1px;
	border-style: solid;
	border-color:#ddd #999 #999 #ccc;
	padding: 6px;
	color: #000;
}

.np_row {
	padding-top: 3px;
	padding-bottom: 3px;
	display: block;
}
.np_cell {
	margin: 10px;
}

/************************************************/
/*                Footer                        */
/************************************************/
#footer {
	margin-left: 150px;
	margin-bottom: 10px;
}

#footer p {
	color:#999;
	font-size:10px;
}


/************************************************/
/*        Styles for the star ratings           */
/************************************************/
.star-rating {
  position:relative;
  display:inline;
}

.star-rating ul,
.star-rating a:hover,
.star-rating .current-rating{
  background: url(../images/ratings/star_rating.gif) left -1000px repeat-x;
}
.star-rating ul{
  position:relative;
  width:80px;
  height:15px;
  overflow:hidden;
  list-style:none;
  margin:0;
  padding:0;
  background-position: left top;
}
.star-rating li{
  display: inline;
}
.star-rating a, .star-rating span,  
.star-rating .current-rating{
  position:absolute;
  top:0;
  left:0;
  text-indent:-1000em;
  height:15px;
  line-height:15px;
  outline:none;
  overflow:hidden;
  border: none;
}
.star-rating .one-stars  { width:20%; z-index:6; }
.star-rating .two-stars  { width:40%; z-index:5; }
.star-rating .three-stars { width:60%; z-index:4; }
.star-rating .four-stars { width:80%; z-index:3; }
.star-rating .five-stars { width:100%; z-index:2; }
.star-rating .current-rating { z-index:1; background-position: left bottom; }

.star-rating a.zero-stars {
  left:80px;
  width:16px;
  background: url(../images/ratings/x_off.gif) left top;
}

/* hovering effect only for dynamic star rating */
#content .dynamic-star-rating a:hover{
  background-position: left center;
  background-color:transparent;
}
.dynamic-star-rating a:hover.zero-stars {
  background: url(../images/ratings/x.gif) left top;
}



/************************************************/
/*              Box Related Styles              */
/************************************************/
.box-title { 
	display:block;
	color:#8b3e38;
	padding:3px 3px 0 18px;
	background: url(../images/puce.gif) 0 50% no-repeat;
	font-size: 1.1em;
	font-variant:small-caps;
	border-bottom:1px solid #8b3e38;
	letter-spacing:0.1em;
	margin: 0 10px;
}
.box-title:first-letter{font-style:italic;}

.box-list { 
	padding-right: 10px;
}

/* Enclosing Boxes Styles */

.box, .info-box { 
	margin-top: 5px;
	margin-right: 3px;
	background: #050505 url(../images/back-box.gif) 0 0 no-repeat;
	font-size : 0.9em;
	border: 1px solid #8b3e38;
	float:left;
  clear:left;
	height:1%; /* IE6 : Holly Hack comes to rescue once again */
}
/* Hovering effects on links */
.box a:hover, .info-box a:hover { background-color: #8b3e38; color: #e9ad51;}

.box-inside { 
	background: url(../images/right.gif) top right repeat-y;
}
.box-content {
	padding:8px 15px;
}

.box-top { 
	position:relative;
}
.box-left-top { 
	background: url(../images/punaise-tl.gif) no-repeat;
	height:16px;
	width:16px;
	position:relative;left:0;top:0;
}
.box-right-top {
	background: url(../images/curl.gif) no-repeat;
	height:16px;
	width:20px;
	position:absolute;right:0;top:0;
}
* html .box-right-top {right: expression(-this.parentNode.offsetWidth%2+"px");} /* Fixes an IE6 rounding error */
.box-bottom { 
	position:relative;clear:both;
}
.box-left-bottom {
	background: url(../images/punaise-bl.gif) no-repeat;
	height:18px;
	width:16px;
	position:relative;left:0;top:0;
}
.box-right-bottom { 
	background: url(../images/punaise-br.gif) no-repeat;
	height:18px;
	width:20px;
	position:absolute;right:0;top:0;
}
* html .box-right-bottom {right: expression(-this.parentNode.offsetWidth%2+"px");} /* Fixes an IE6 rounding error */

/* Specific boxes */
.box_newest_albums  {}
.box_newest_artists {clear:none;}
.box_newest_genres  {clear:none;}
.box_topbarright    {display:table;}
.info-box th {color:#8b3e38;}

/************************************************/
/*             List Header Styles               */
/************************************************/

.list-header { 
	text-decoration: none;
} 

.list-header:hover { 
	color:#071fd4;
}


/************************************************/
/*             Text Action Styles               */
/************************************************/

.text-action {
	border-top:1px dotted #8b3e38; 
}
.text-action, .text-action li {
	margin: 10px 0 5px 0;
	list-style: none;
	padding: 1px 0 0 0;
	text-wrap: none;
}

/* See input.button class */
/*
.text-action a, .text-action span {
	background: #111;
	border: 1px solid #000;
 	padding-left: 2px;
	padding-right: 2px;
	text-decoration: none;
	text-wrap: none;
}
*/

.text-action #pt_active {
	background: #000;
	color: #fff;
	border: 1px solid #ddd;
	text-wrap: none;
}


/************************************************/
/*            Tabs (for preferences)            */
/************************************************/

#tablist {
        padding: 4px 0;
        margin: 12px 0 0 0;
}

#tablist li {
        list-style: none;
        display: inline;
}

#tablist li a {
        padding: 0 0.5em;
        margin-left: 3px;
        color: #000;
       	background: #8b3e38 url(../images/button_back.png) 0 100% repeat-x !important;
        background: #8b3e38;

}

#tablist li a:hover {
        border-top: 2px solid #e9ad51;
        color: #e9ad51;
}

#tablist li a#current {
        padding: 5px 0.5em;
        color: #8b3e38;
        background: #111;
        background: #111 !important;
        border:none;
}

/************************************************/
/*            Styles for Header                 */
/*(for ampache admin : installation, update...) */
/************************************************/

div#Header {
	height: 80px;
	margin-bottom: 3px;
	padding: 0px;
}

#Header h1 { 
	background: transparent url(../themes/classic/images/bg_login_0.jpg) no-repeat top left; 
	border: 0; 
	width: 439px; 
	height: 84px; 
	float: left;
}
	
#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;
}

/************************************************/
/* User Online/Offline style, used in users.php */
/************************************************/
td.user_online{
	background:#0f0;
}
td.user_offline {
	background:#7f0000;
}
td.user_disabled {
	background:#ccc;
}

/************************************************/
/*         Styles for Login template            */
/************************************************/

#container {
	margin: 100px auto 0px auto;
	text-align:center;	
}
#container h1 {
  background:url(../images/ampache_back.gif) 0 0 repeat-x;
}
#container h1 span {
	background: url(../images/ampache.gif) 50% 0 no-repeat;
	height: 120px;
	margin-bottom: 8px;
	display:block;
	text-indent:-9000px;
}
#container div {
  width:340px;
  margin:auto;
}
#loginp_0 {
	color:#111;
	font-size:0.8em;
	font-style:italic;
	margin: 0 0 2em 0;
}
.loginp_1 {
	text-align:right;
	padding-right:100px;
}
.loginp_1 span {
	font-weight:bold;
}
.loginp_1 input {
	border:1px solid #74718a;
}
input.text_input {
	width:12em;
}
.loginp_1 input.check_input {
	margin-left:5px;
}



/************************************************/
/*                Misc                          */
/************************************************/

.text-box {
	display: table-cell;
	padding:5px;
	margin:0 0 10px 0;
	background-color: #111;
}

.confirmation-box {
	padding: 5px 5px 0 5px;
	margin-bottom: 10px;
	display: table-cell;
	background-color: #111;
	border: 2px solid #000;
}

.alphabet { 
	margin: 10px;
	font-size: 0.9em; 
	font-weight: normal; 
}

.display {}

#ajax-loading {
        position: absolute;
        right: 0px;
        top: 0px;
        float: right;
        z-index: 100;
        background: #99ccff;
        display: none;
        padding: 3px 25px 5px 25px;
        border: 1px solid #000;
}

#mpdpl td {
	padding: 0 2px 0 2px;
	text-align: left;
}

/*table.tabledata {width:100%}*/

.header1 { 
	color: #8b3e38;
  background: #111 url(../images/button_back.png) 0 100% repeat-x !important;
	background: #111;
	font-size: 1.4em; 
	font-variant:small-caps;
	display:block;
	padding:2px 5px;
}
.header2 {
 	color: #8b3e38;
	font-size: 1.1em;
	text-align:center;
	font-weight: bold;
	border-bottom:1px solid #8b3e38;
	padding:1em;
}

.error {
	color: #990033; 
}

.fatalerror {
	padding: 3px;
	display: table-cell;
	color: #990033;
	font-weight:bold;
 	border:2px solid #990033;		
}

#container div.fatalerror {
	background:none;
	height:auto;
	padding:5px;
	margin:10px;
	display:block;
}

.disabled { text-decoration: line-through; }


#maincontainer{}

.info-box .album_art {float:left;margin-right:10px;}
#information_actions ul { list-style:none; }
#information_actions h3 { color:#8b3e38; font-size:1.2em; margin:0.2em; }