/**  
* $Id: officialchart.css,v 1.5 2009/05/06 03:39:22 florawang Exp $
*  
*  for tpl_officialchart_top100.html , tpl_officialchart_top100_history.html 
*  
**/

#doc{width:720px; margin:0 auto; }
#bd{ width:720px;}
.clearfix{zoom:1; clear:both;}

#bd-top{width:720px; margin:0 0 10px 0; text-align:center;background:transparent url(/img/bd_top_bg.gif) repeat-x scroll 0 0; border:1px solid #bababa; }
#bd-top .tab-contents{ text-align:center; width:720px; }
#bd-top .tab-nav{ list-style-image:none;list-style-position: outside; list-style-type:none; text-align:center; margin:0; padding:0; width:510px; height:50px; font-size:12px; white-space:nowrap;overflow:hidden;}
#bd-top .tab-nav li{list-style-position: outside;margin:17px 0 0 0;padding:0 0 0 0;float:left; width:45px; height:33px; line-height:33px;white-space:nowrap;overflow:hidden; }
#bd-top .tab-nav li a{ line-height:33px; color:#FFFFFF; }
#bd-top .tab-nav li.subtitlebar_selected {color:#000000; font-weight:bold;background-color: #ffffff; }
#bd-top .tab-nav li.subtitlebar_unselected {}
#bd-top .tab-nav li.subtitlebar_selected a{color:#000000; font-weight:bold;}
#bd-top .tab-subnav{ list-style-image:none;list-style-position:outside;list-style-type:none; margin:0; padding:0;width:440px; font-size:12px; white-space:nowrap;overflow:hidden;}
#bd-top .tab-subnav li{ margin:0;padding:0;float:left; width:120px; height:24px;white-space:nowrap;overflow:hidden;  background:transparent url(/img/subnav_bg.gif) repeat-x scroll 0 0; }
#bd-top .tab-subnav li a{ color:#818181; line-height:24px;}
#bd-top .tab-subnav li.subtitlebar_selected a{color:#000000; font-weight:bold; }
#bd-top h2{text-align:left;padding:0;margin:0;font-size:15px;line-height:30px;}
#bd-main{ margin:0 auto;}
/*
.officialchart-type-bar{width:100%; height:30px;text-align:center; }
.officialchart-type-bar span.subtitlebar_selected a{color:#ffffff; font-weight:bold;line-height:23px;background:transparent url(/img/officialchart_rank_on.gif) repeat-x scroll 0 0; width:116px;display:block;float:left;margin-right:10px; }
.officialchart-type-bar span.subtitlebar_unselected a{color:#525252; line-height:23px; background:transparent url(/img/officialchart_rank_off.gif) repeat-x scroll 0 0; width:116px; display:block;float:left; margin-right:10px;}
*/
#prev-officialchart{ float:left; width:15%; height:23px; line-height:20px; margin:2px 0;text-align:left;}
#next-officialchart{float:left;width:10%;height:23px; line-height:20px; margin:2px 0; text-align:right;}
#prev-officialchart a{background:transparent url(/img/prev_next.gif) no-repeat scroll -4px -42px;padding: 0 0 0 15px;}
#next-officialchart a{background:transparent url(/img/prev_next.gif) no-repeat scroll 34px -12px;padding:0 15px 0 0;}
.officialchart-type-bar{ float:left;width:75%; text-align:center}
.officialchart-type-bar span{display:block;float:left;margin:3px 10px;width:116px;}
.officialchart-type-bar span.subtitlebar_selected a{color:#ffffff; font-weight:bold;line-height:23px;background:transparent url(/img/officialchart_rank_on.gif) repeat-x scroll 0 0; display:block;}
.officialchart-type-bar span.subtitlebar_unselected a{color:#525252; line-height:23px; background:transparent url(/img/officialchart_rank_off.gif) repeat-x scroll 0 0; display:block;}


.section{width: 100%;margin-bottom:10px;}
.section h2 {background:transparent url(/img/round.gif) no-repeat scroll 0 0;color:#000000; text-align:left; padding:0 0 0 20px;font-size: 16px; margin:0 0 5px 0;}
.section .contents{border:1px solid #B9B9B9; background-color:#FFFFFF; width:718px;}
.contents table{ text-align:center; font-size:12px; line-height:140%; color:#acacac;}
.contents tr.title-fields{ color:#000000;font-weight:bold;height:41px; text-align:center;background-color:#bbbbbb; }
.contents tr.title-fields td{  border-right:1px solid #FFFFFF;}
.contents tr.first-row td{ background-color:#ffffff; height: 160px;}
.contents tr.bg-blue-top20 td{ background-color:#eef4f6; height: 105px;}
.contents tr.bg-white-top20 td{ background-color:#ffffff; height: 105px;}
.contents tr.bg-blue-top100 td{ background-color:#eef4f6; height: 70px;}
.contents tr.bg-white-top100 td{ background-color:#ffffff; height: 70px;}
.highlight-no{ color:#FF6600;font-weight:bold;}
.rank-prev{ color:#474747;font-weight:bold;}
.rank-now{color:#b67cee ; font-weight:bold; font-size:18px}
.rank-equal-text{color:#999999; }
.rank-up-text{color:#FF0000;font-weight:bold}
.rank-down-text{color:#0000FF;font-weight:bold}
.rank-return-text{color:#009900;font-weight:bold}
.explain-wording{line-height:150%;font-size:12px; text-align:center;border:1px solid #bbbbbb; background-color:#FFFFFF;padding:10px 0; width:auto;}
img.small-album-cover{ width:80px;height:80px;border:1px solid #999999;}
img.album-cover{ width:140px;height:140px;border:1px solid #999999;}
#search_date{ margin-left:10px; font-size:12px;font-weight:normal}
#dateinput{ font-family:Arial, Helvetica, sans-serif}
/* datepicker css*/
.ui-datepicker-header-month .ui-datepicker-title select.ui-datepicker-year { margin: 0 auto; float:none;}
.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-calendar .ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-datepicker-calendar .ui-widget-content .ui-state-focus { border: 1px solid #999999; background: #ffffff none 50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; }
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-widget-content .ui-state-active{ background-color:#FFFF99;background-image:none;}
.ui-datepicker-calendar .ui-state-disabled .ui-state-default ,
.ui-datepicker-calendar .ui-state-disabled .ui-state-active,
.ui-datepicker-buttonpane .ui-datepicker-close{ border: 1px solid #d3d3d3; background-color: #e6e6e6 ; font-weight: normal; color: #555555; outline: none; }
.ui-datepicker-buttonpane .ui-state-hover{  background-image: none;}
.ui-datepicker-calendar .ui-state-hover-week .ui-state-default,
.ui-datepicker-calendar .ui-state-hover-week .ui-widget-content .ui-state-default { border:1px solid #AAAAAA;color:#212121; background-color:#FFFFFF; background-image:none; }
.ui-datepicker-calendar .ui-state-active-hover-week .ui-state-default,
.ui-datepicker-calendar .ui-state-active-hover-week .ui-widget-content .ui-state-default { border:1px solid #AAAAAA;color:#212121;background-color:#FFFF99;background-image:none;}