/*ここからPC環境の設定
---------------------------------------------------------------------------*/

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { height: 22px; background: #404040; width: 380px;}

/*　再生・停止ボタンの高さ、幅、パディングの指定　*/
.audiojs .play-pause { width: 25px; height: 20px; padding: 0px 8px 0px 0px; }

/*　再生・停止ボタンなどの p 要素　*/
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }

/*　進行状態・ロードの状態を表示する部分　*/
.audiojs .scrubber { background: #5a5a5a; width: 240px; height: 10px; margin: 5px; }

/*　進行状態を表示するバーの部分　*/
.audiojs .progress { height: 10px; width: 0px; background: #ccc; }

/*　ロード状態を表示するバーの部分　*/
.audiojs .loaded { height: 10px; background: #000;}

/*　再生時間の部分　*/
.audiojs .time { border-left: 1px solid #666;
    		 color: #fff;
    		 float: left;
    		 height: 25px;
    		 line-height: 25px;
    		 margin: 0px;
    		 padding: 0px 0px 0px 7px;
    		 text-shadow:none;
}
.audiojs .error-message { height: 24px;line-height: 24px; }

/*　再生している曲の情報　*/
.track-details { clear: both; height: 20px; width: 380px; padding: 1px 6px; background: #eee; color: #222;  font-size: 11px; line-height: 20px;}
.track-details:before { content: '?  Now Playing: '; }

}


/*ここからタブレット用（800px以下）環境の設定
---------------------------------------------------------------------------*/

@media (max-width : 800px){

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { height: 22px; background: #404040; width: 280px;}

/*　再生・停止ボタンの高さ、幅、パディングの指定　*/
.audiojs .play-pause { width: 25px; height: 20px; padding: 0px 8px 0px 0px; }

/*　再生・停止ボタンなどの p 要素　*/
.audiojs p { width: 25px; height: 20px; margin: -3px 0px 0px -1px; }

/*　進行状態・ロードの状態を表示する部分　*/
.audiojs .scrubber { background: #5a5a5a; width: 180px; height: 10px; margin: 5px; }

/*　進行状態を表示するバーの部分　*/
.audiojs .progress { height: 10px; width: 0px; background: #ccc; }

/*　ロード状態を表示するバーの部分　*/
.audiojs .loaded { height: 10px; background: #000;}

/*　再生時間の部分　*/
.audiojs .time { float: left; height: 25px; line-height: 25px; }
.audiojs .error-message { height: 24px;line-height: 24px; }

/*　再生している曲の情報　*/
.track-details { clear: both; height: 20px; width: 280px; padding: 1px 6px; background: #eee; color: #222;  font-size: 11px; line-height: 20px;}
.track-details:before { content: '?  Now Playing: '; }

}


/*ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 480px){

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { height: 22px; background: #404040; width: 140px;}

/*　再生・停止ボタンの高さ、幅、パディングの指定　*/
.audiojs .play-pause { width: 22px; height: 17px; padding: 0px 8px 0px 0px; }

/*　再生・停止ボタンなどの p 要素　*/
.audiojs p { width: 22px; height: 17px; margin: -3px 0px 0px -1px; }

/*　進行状態・ロードの状態を表示する部分　*/
.audiojs .scrubber { background: #5a5a5a; width: 95px; height: 10px; margin: 5px; }

/*　進行状態を表示するバーの部分　*/
.audiojs .progress { height: 10px; width: 0px; background: #ccc; }

/*　ロード状態を表示するバーの部分　*/
.audiojs .loaded { height: 10px; background: #000;}

/*　再生時間の部分　*/
.audiojs .time { float: left; height: 20px; line-height: 20px; }
.audiojs .error-message { height: 19px;line-height: 19px; }

/*　再生している曲の情報　*/
.track-details { clear: both; height: 20px; width: 130px; padding: 1px 6px; background: #eee; color: #222;  font-size: 11px; line-height: 20px;}
.track-details:before { content: '?  Now Playing: '; }

}