/* 
 *  jukebox.css
 *  $Revision: 1.29 $
 *  $Date: 2008/12/16 07:02:08 $
 *
 *  'A little style and a touch of class'
 *  copyright 2006-2008 Jim E Sontag
 *
 *************************************************************/

TABLE { 
  font-size: 12px; width: 100%;
  margin: 0; padding: 0;
  border-collapse: collapse; 
  border-spacing: 4px; 
}

TH { text-align: left;  padding: 0 10px 0 0; font-size: 100%; }
TD { padding: 0; margin: 0; }

BUTTON, INPUT { font-size: 9pt }

/* this is for the playable songs */
.title:hover { text-decoration: underline; cursor: pointer }

/* ************* Class selectors *********** */
.idx  /* the first column in the table */ 
{ 
  width: 4ex;
  text-align: right; 
  padding: 0 1ex 0 0;
}

/* these are for the delete and play icon images */
.icop { width: 16px; height: 16px; cursor: pointer }
.dgif { width: 16px; height: 16px; cursor: pointer; margin-left: 16px; }

/* for the TD cell containing the PLAY graphic */
.pbtn { width: 16px; }

/* gold class is number 1, cannot be promoted */
/* promo class can be promoted */
.gold, .promo 
{ 
  width: 2.5ex;
  text-align: right;
  padding-right: 4px;
}
.promo { font-style: italic; cursor: pointer; padding-left: 4px; }
.mcode { text-align: right }

TD.pnote { 
  width: 18px;
  padding: 0; 
  background-image: url('../img/note16.jpg');
  background-repeat: no-repeat;
}
TD.nonote { width: 18px }

TD.pnote IMG { vertical-align: middle }
TD.val { text-align: right; padding-right: 8px; }
TD { vertical-align: text-bottom; }
 
#banner 
{ 
  width: 100%;
  background-image: url("../img/banner_background2.jpg");
  background-repeat: repeat-x;
}

#songs { margin-left: 14px; margin-right: 14px; }

/* song list - this style is applied to the scrolling tbody */
/* #slist { height: 380px; overflow: scroll; clip: auto; } */ 
 
/* this next line is for internet exploder only because
it takes the height value above, and applies it to each row! 
This is a silly CSS rule, and I am open to suggestions */

#slist TR { height: 1em } 

#requests 
{ 
  padding-left: 0px; 
  background-color: inherit;  /*#eeeeff; */
}

#rlist { 
  float:left; clear: none; 
  width: 50%; 
  padding-top: 0;
  padding-right: 16px; 
  margin-left: 10px;
}

#saveBtn {
  float: right; clear: none; 
  margin: 8px 10px 8px 10px;
}

#msg 
{ 
  float: left; clear: right;
  margin: 0 5px 0 15px;
  width: 40%;
}

#glink SPAN { text-decoration: underline; color: navy; font-style:italic }

#srchFields { border: none;  }
/* #srchFields LABEL { font-size: 80%; font-style: italic; } */
 
#srch { text-align: center; }
#srch { padding: 4px 8px 4px 0; }

#vals { clear: both; display: none; border: none; }
#vals * { display: inline; }

#search { width: 20ex; } 

#firstrow, #total  { text-align: right; }

#ctrl { margin: 10px 0 0 0; }

#nblk, #prev {  margin: 0 12px; }

#prev { 
  float:left; clear:left; 
  /* background-image: url('prev.gif'); */ 
}

#nblk { 
  float:right; clear: right;
  /* background-image: url('next.gif'); */ 
}

#nblk, #prev { margin-top: 16px }

#odo { clear:none; padding: 2px 0 0 0; text-align: center; border: none }

#ctrlBtn { clear: both }

#theader TH 
{
  color: white;
  background-color: navy;
  font-style: italic;
}

#ccol { text-align: right; }

/* these controls are used in the requests div of the page */ 

#newList { float: right; clear: none; margin: 3px 0 2px 0;}

#nametag { float:left; clear: none; margin-top: 4px; }
#prompts { float: left; clear: left;  margin-right: 2ex; }
#nametag, #prompts { border: none; }

#playBtn { float: right; clear: right; margin: 4px; }

#smsg { float: left; clear: none; padding: 10px 0px 0 10px; }
#smsg P { margin: 1.5ex 0 0 0 }

#feature { text-align:center }