/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */
/**
 *
 * LICENSE: GNU General Public License, version 2 (GPLv2)
 * Copyright 2001 - 2013 Ampache.org
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License v2
 * as published by the Free Software Foundation.
 *
 * 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.
 *
 */

/************************************************/
/*    Unify default browsers style rules        */
/************************************************/
h1, h2, h3, h4, h5, h6, pre, code	{ font-size: 1em; line-height: 1em; } /* avoid browser default inconsistent font-sizes */
ol, ul { list-style: none; }
table {	border-collapse: separate; border-spacing: 0; }
caption, th, td {	text-align: left;	font-weight: normal; }
*	{ margin: 0; padding: 0; } /* White space reset */
a img, :link img, :visited img { border: 0; } /* no blue linked image borders */


/************************************************/
/*           General style rules                */
/************************************************/
body { 
	background:#d3d3d3;
	font-family:Arial, Helvetica, Sans-Serif;
	min-width:1000px;
}
p { 
	color: #000;
	margin:1em 0;
}
a, a:visited, a:active{ 
	color: #000; 
	font-family: Verdana, Helvetica, sans-serif; 
}
td { 
	padding: 0 8px;
	color: #000; 
	font:12px Verdana, Helvetica, sans-serif;
}
th {
	padding-right: 10px;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 13px; 
	font-weight: bold;
}
input, select, textarea{
	font: 12px Verdana, Helvetica, sans-serif; 
	background: #ddd; 
	color: #000; 
}
input {
	font-weight: bold;
}

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

/************************************************/
/*         Float Clearer                        */
/************************************************/
/* float clearing for IE6 */
* html .clearfix{ height: 1%; overflow: visible; }
/* float clearing for IE7 */
/**+html .clearfix{ min-height: 1%; }*/
/* float clearing for everyone else */
.clearfix:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }

/************************************************/
/*                XSPF Player                   */
/************************************************/
.xspf_player {
	right: 20px;
	position: absolute;
}

/************************************************/
/*             Main Container                   */
/************************************************/
#maincontainer{}

/************************************************/
/*             Header                           */
/************************************************/
#header { 
	height: 85px;
	padding: 3px 0 0 10px;
}
#headerbox { 
	float: right;
	font-size: 10px;
}
#headerlogo, #headerlogo a{ 
	float: left;
}
.box_headerbox    {display:table;}
.box_headerbox #loginInfo {font-weight:bold;display:block;text-align:right;margin-bottom:.3em;}

#play_type_switch { 
	float:left;
	margin-top:2px;
} 

/************************************************/
/*               Content block                  */
/************************************************/
#content {
	margin: 20px 135px 20px 135px;
}

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

/************************************************/
/*                  Buttons                     */
/************************************************/
.button, input[type=button], input[type=submit] {
	border: 1px solid #f0f0f0;
	border-color: #f0f0f0 #a0a0a0 #a0a0a0 #f0f0f0;
	background: #d0d0d0;
	padding: 0 1px;
	font-size: 11px;
	font-weight:bold;
	text-decoration:none;
	cursor: pointer;
}
a.button{padding:1px 3px;}

/************************************************/
/*                  Sidebar                     */
/************************************************/
#sidebar{
	position:absolute;
	top:100px;
	left:0;
	width:120px;
	padding-top:28px;
	background:#c0c0c0 url(../images/sidebar_top.jpg) no-repeat;
	font-size:0.9em;
}

#sidebar select	{	width: 95%; }
#sidebar input  { vertical-align:middle; background:#fff; }
#sidebar ul     { list-style:none; }
#sidebar a      {	text-decoration:none; } 


/* For sidebar tabs */
/********************/
#sidebar-tabs{
	border-top:1px solid #8b8b8b;
}

#sidebar-tabs li.sb1 {
	float: left;
	padding:2px;
	background: #c0c0c0 ; 
}
#sidebar-tabs li.active { 
	background: #fff url(../images/top.gif) repeat-x 0 0; 
	margin-top:8px;
} 
#sidebar-tabs li.active img{ 
	margin-top:4px;position:relative;z-index:2;
} 

/* Tabs content */
/****************/
#sidebar-page {
	position:absolute;
	left:0;
	top:52px;
	background: #fff url(../images/bottom.gif) 0 100% repeat-x;
	padding-bottom:0.5em;
	border-right:2px solid #c0c0c0;
	font-size: 0.8em;
	width:118px;
} 
#sidebar-page ul.sb2 {
	padding:2px 4px;
}
#sidebar-page ul.sb2 li{
	font-weight:bold;
	margin:1em auto;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #666;
}
#sidebar-page ul.sb2 h4{ padding-bottom: 0.5em; }

#sidebar-page ul.sb3, #sidebar-page div.sb3 {
	font-size:0.9em;
	margin-left:2px;
	font-weight:normal;
	color:#5b5b5b;
}
#sidebar-page div.sb3 input[type=radio] { 
	margin-left:2px; 
} 

#sidebar-page ul.sb3 li{
	margin:0;
	padding:0;
	border:none;
	font-weight:normal;
}
* html #sidebar-page ul.sb3 li{display:inline;} /* fix ie6 */

#sidebar-page .sb3 a{
	padding:0.1em;
	border-bottom:1px dotted #c0c0c0;
	color:#5b5b5b;
}


#sidebar-page a{
	display:block;
}
#sidebar-page a:hover{
	background:#99ccff;
	color:#fff;
}

/* 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:0 5px;
	font-family: monospace, Courier, Georgia;
} 
.alphabet span.active{ background:#5b5b5b; color:#fff; }
.alphabet span.link:hover { 
	background: #99ccff;
	color:#fff;
} 

#multi_alpha_filter { 
	width:40px; 
	margin-bottom:4px;
} 

/* SIDEBAR : Localplay */
/***********************/
.active_instance {
	background:#99ccff; 
}

/* 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; 
}


/************************************************/
/*                  XSPF Player                 */
/************************************************/
#xspf_player { 
	width:400px;
	float: left;
	background:#fff;
	font-family: Verdana,Helvetica,sans-serif;
} 

/************************************************/
/*                  Rightbar                    */
/************************************************/
#rightbar { 
	width:120px;
	background:#fff;
	padding-top:28px;
	background:#c0c0c0 url(../images/rightbar_top.jpg) no-repeat;
	float:right;
	font-family: Verdana,Helvetica,sans-serif;
	clear:both;
} 
#rightbar ul                      {	list-style:none; }
#rightbar a                       { text-decoration:none; }


/* Rightbar Menu */
#rightbar #rb_action {	
	border-top:1px solid #8b8b8b; 
	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:#99ccff; } 
/* Rightbar AddItems SubMenu */
#rightbar li:hover .submenu {	display:block; } 
#rightbar .submenu  { 
	display:none; 	
	position:absolute;
	right:0px;
	top:18px;
	background:#fff;
	border:2px solid #c0c0c0;
	width:120px;
	font-size:0.7em;
	padding:0.3em;
}
* html #rightbar .submenu {right:100px;} /* IE6 fix */

#rightbar .submenu a {
	display:block;
	padding:0.1em;
	border-bottom:1px dotted #c0c0c0;
	color:#5b5b5b;
	text-decoration:none;
	text-align:right;
}

#rightbar .submenu a:hover,
#rightbar #rb_current_playlist a:hover { background:#99ccff; color:#fff; }

/* Rightbar playlist */
#rightbar #rb_current_playlist    {
	background: #fff url(../images/bottom.gif) 0 100% repeat-x;
	padding-bottom:0.5em; 
	border-left:2px solid #c0c0c0;
	border-right:2px solid #c0c0c0;
}
#rightbar #rb_current_playlist li   { position:relative; font-size:0.6em;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; }

/* Rightbar Localplay Controls */
#rightbar #localplay-control { 
	padding-left: 5px;
} 
#localplay-control span { 
	cursor: pointer; 
} 


/************************************************/
/*        Styles for the star ratings           */
/************************************************/
.star-rating {
	position:relative;
}
.dynamic-star-rating{
	width:95px;
}
.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 .star1 { width:20%; z-index:6; }
.star-rating .star2 { width:40%; z-index:5; }
.star-rating .star3 { width:60%; z-index:4; }
.star-rating .star4 { width:80%; z-index:3; }
.star-rating .star5 { width:100%; z-index:2;}
.star-rating .current-rating { z-index:1; background-position: left bottom; }

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

/* hovering effect only for dynamic star rating */
.dynamic-star-rating a:hover{
	background-position: left center;
}
.dynamic-star-rating a:hover.star0 {
	background: url(../../../images/ratings/x.gif) left top;
}
.dynamic-star-rating ul {
	left:16px;
}

/************************************************/
/*              Box Related Styles              */
/************************************************/

.box-title { 
	border-bottom: solid 1px #000;
	font-size: 1.05em;
	font-weight: bold;
	margin: 0 10px;
}
.box-list { 
	padding-right: 10px;
}

/* Enclosing Boxes Styles */

.box, .info-box { 
	background: #f7f7f7 url(../images/left.gif) top left repeat-y;
	float:left;
	clear:left;
	height:1%; /* IE6 : Holly Hack comes to rescue once again */
}
.box-inside { 
	background: url(../images/right.gif) top right repeat-y;
}
.box-content {
	padding:8px 15px;
}

.box-top { 
	background: url(../images/top.gif) 0 0 repeat-x;
	position:relative;
}
.box-left-top { 
	background: url(../images/topleft.gif) no-repeat;
	height:16px;
	width:16px;
	position:relative;left:0;top:0;
}
.box-right-top {
	background: url(../images/topright.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 { 
	background: url(../images/bottom.gif) 0 0 repeat-x;
	position:relative;clear:both;
}
.box-left-bottom {
	background: url(../images/bottomleft.gif) no-repeat;
	height:18px;
	width:16px;
	position:relative;left:0;top:0;
}
.box-right-bottom { 
	background: url(../images/bottomright.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 to Info Boxes */
.info-box { float:left;margin-right:10px; }
.album_art { float:left; margin-right:10px; } 
#information_actions { margin-left:5px; font-size:0.7em; float:left; } 
#information_actions h3 { font-size:1.2em; margin:0.2em; }

/* Specific boxes */
.box_newest_albums  {}
.box_newest_artists {clear:none;}
.box_newest_genres  {clear:none;}
.box_popular_album  {}
.box_popular_artists {clear:none;}
.box_popular_genres {clear:none;}
.box_preferences h4 {color:#000;font:bold 14px Verdana, Helvetica, sans-serif;padding:0.8em 0;}


/************************************************/
/*         Tables (songs lists...)              */
/************************************************/
.tabledata .th-top, .tabledata .th-bottom {
	font-size:1.1em;
	vertical-align: top;
	text-align:center;
}

.tableform select { 
	width: 150px; 
} 

/* table rows */
.tabledata .odd, .tabledata .odd td,
.tabledata .even, .tabledata .even td, .row-highlight {
	font-size: 12px;
	border-bottom:1px dotted #c0c0c0;
}
.tabledata .even:hover, .tabledata .odd:hover { 
	background:#9cf;
} 
.row-highlight:hover { 
	background:#c33;
} 
	

/* Misc */
.border 	{ background: #000; }
.tabledata input, .tabledata select{ margin:2px 0;}

/* specific cells */
td.cel_cover{padding:6px;}
.cel_select, .cel_action, .cel_date, .cel_applytoall, .cel_level {text-align:center;}
/* specific cells : users login state */
.user_online{background:#0f0;}
.user_offline{background:#7f0000;}
.user_disabled{background:#ccc;}

/* specific tables */
#recently_played .th-bottom {display:none;}
.box_preferences .th-bottom {display:none;}

/* Inline Editing Tables */
.inline-edit input, .inline-edit select {
	font-size: 0.8em; 
} 

/************************************************/
/*          Song details                        */
/************************************************/
dl.song_details{font-size:0.8em;}
.song_details dt {
	float:left;
	clear:both;
	width:20%;
	min-width:20%; /*Ie bugfix*/
	font-weight:bold;
}
.song_details dd {
	float:left;
	width:79%;
	min-width:79%; /*Ie bugfix*/
	margin:0 0 0.2em .3em;
	padding-left:.2em;
}
dt + dd {border-bottom:1px dotted #c0c0c0;}
dt:hover, dt:hover + dd {background:#9cf;}

/************************************************/
/*          Albums of the moment                */
/************************************************/
.random_album{
	position:relative;
	float:left;
	padding:8px;
	width:80px;
}

.random_album .play_album{
	display:none;
}

/************************************************/
/*          Now Playing                         */
/************************************************/
#now_playing{
}

.np_row {
	padding: 3px;
	float:left;
	font-size:0.75em;
	display:block;
	
}
.np_cell {
	padding-left:5px;
	margin-left:5px;
}

.np_row label {
	display:block;
	font-weight:bold;
	margin:2px 0 0 -5px;
}

.np_group {
	float:left;
	padding-right:15px;
}

.np_row a {
	font-size:0.8em;
}

/************************************************/
/*               Shoutbox                       */
/************************************************/

#shoutbox {
	font-size:0.8em;
} 

#shoutbox div.shout {
	padding-top:0.5em; 
	margin:10px 5px 0 0;
	border-top:1px dotted #c0c0c0;
} 
#shoutbox div.shout:hover{border-top:1px solid #9cf;}

#shoutbox span.information {}
#shoutbox .shouttext{display:block;font-size:.9em;margin-top:.5em;}
img.shoutboximage {	margin:0 3px;}

#shoutbox div.odd{margin-right:20%;text-align:left;}
#shoutbox div.even{margin-left:20%;text-align:right;}
#shoutbox .odd img.shoutboximage {float:left;}
#shoutbox .even img.shoutboximage {float:right;}

/************************************************/
/*             List Header                      */
/************************************************/
.list-header{margin:7px 0; padding:0 4em; text-align:center; font-size: 0.8em;position:relative;} 
.list-header .prev{position:absolute; top:0; left:0;}
.list-header .next{position:absolute; top:0; right:0;}
.list-header .selected{background: #e0e0e0;}
.list-header .page-nb{padding:1px;border: 1px solid #ccc;text-decoration: none;}
.list-header .page-nb:hover{background: #d0d0d0;}

/************************************************/
/*             Errors                           */
/************************************************/
.error { 
	color:#903; 
}

.fatalerror {
	display:table-cell;
	padding:3px;
	color:#903; 
	font-weight:bold;
	font-size:1.2em;
}


/************************************************/
/*             LocalPlay                        */
/************************************************/
.lp_box_ctrl, .lp_box_vol {
	text-align: center; /*for compatibility, may be controlled by themers now*/
}

td.lp_current a { 
	font-weight:bold;
	text-decoration:none;
} 

/************************************************/
/*             HTML5 Player                     */
/************************************************/
#html5_player #playlist
{
	overflow-x: hidden;
	overflow-y: scroll;
	position: absolute;
	top: 105px;
	left: 210px;
	right: 5px;
	bottom: 5px;
}

/************************************************/
/*         Styles for Login template            */
/************************************************/
#loginPage #maincontainer{
	margin:100px auto 0 auto;
	width:437px;
	font-size:12px;
	text-align:center;
}
#loginPage #header{
	padding:0;
}

#loginPage #loginbox{
	background:url(../images/bg_login.jpg) no-repeat;
	height:292px;
}
#loginPage h2{
	color:#333;
	padding-top:60px;
	font-weight: normal;
}
.loginfield{
	text-align:right;
	padding-right:100px;
	margin: 1em 0;
}
.loginfield input.text_input{
	width:12em;
	border:1px solid #999;
}
.loginfield label{
	font-weight:bold;
}
.loginfield #rememberme{
	margin-right:5em;
	background:none;
} 

#loginPage div.fatalerror {
	padding:5px;
	margin:10px;
}

#motd { 
	margin:0 auto 0 auto;
	width: 437px;
}

/************************************************/
/*      Styles for Registration template        */
/************************************************/
/* taken direcly from install.css */

#registerPage {
	background: #FFFFFF url(../../../images/top_bg.jpg) repeat-x top left;
}

#registerPage #header {
	width: 90%;
	min-height: 85px;
	height: 85px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	font-size: smaller;
	display: block;
}

#registerPage #header h1 {
	margin: 0;
	padding-top: 16px;
	color: #000;
	font-weight: bold;
	font-size: large;
}
#registerPage h3 {
	margin-left: 50px;
}

#registerPage input, radio, select, textarea {
	border: 1px solid #ddd;
	background: #f2f2f2;
	font: 11px verdana, sans-serif;
	color: #443;
	padding: 2px;
	outline: none;
}
#registerPage input:hover,
textarea:hover,
input:focus,
textarea:focus{ 
	border: 1px solid #aaa; 
}

#registerPage .registerfield {
	text-align:left;
	margin: 1em 0;
	margin-left: 50px;
}

#registerPage .registerfield.require .asterix {
	color: red;
	text-align: right;
}

#registerPage .registerfield .error {
	font-size: 13px;
	right: 0px;
}

#registerPage label {
	font-weight:bold;
	float: left;
	width: 150px;
	font-size: 13px;
}

#registerPage #registerbox {
	width: 700px;
}

#registerPage .registerInformation {
	font-size: 13px;
	color: red;
	margin-left: 200px;
}

#registerPage .registerButtons {
	margin-top: 10px;
	margin-left: 200px;
}


/************************************************/
/*                Misc                          */
/************************************************/
.formValidation{
	margin-top:1em;
	text-align:center;
}

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

#ajax-loading { 
	position: absolute;  
	top:42px;
	left:345px; 
	width:43px;
	height:11px;
	z-index:100;
	background: url(../images/ajax-loader.gif) no-repeat;
	display: none;
	text-indent:-9999em;
} 

.information,.information a { 
	font-size: 0.9em; 
	font-style: italic; 
	color: #c0c0c0; 
} 


