/*
	Douban Radio(JS) Demo
	by Mockee Kaavie
	mockee@gmail.com
	www.ctba.cn
*/

/* reset */
html { color: #111; background: #fff }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
vol-upress, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit }
del, ins { text-vol-downoration: none }
li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
q:before, q:after { content: '' }
abbr, acronym { border: 0; font-variant: normal }
sup { vertical-align: baseline }
sub { vertical-align: baseline }
legend { color: #000 }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit }
input, button, textarea, select { *font-size: 100% }

/* clear both */  
#inner:after,
.vol:after,
.vol ul:after,
.panel:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
#inner,
.vol,
.vol ul,
.panel { zoom: 1; display: inline-block; _height: 1px }
*html #inner,
*html .vol,
*html .vol ul,
*html .panel,
*+html #inner,
*+html .vol,
*+html .vol ul,
*+html .panel { height: 1% }

/* font face  */
@font-face { font-family: radiotime; src: url('../font/04B_03B.TTF') }

/* css sprite  */
#wrapper,
.amp,
.vol .vol-down,
.vol .vol-up,
.power,
.panel-off,
.love,
.love-off,
.love-active,
.option .ban,
.option .next,
.option .ban-off,
.option .next-off { background: url(../img/radio-sprite.png) no-repeat top left }

#wrapper { position: absolute; width: 420px; height: 186px; margin: -93px 0 0 -210px; top: 50%; left: 50%; background-position: 0 -324px; -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 5px #aaa; -moz-border-radius: 6px; -moz-box-shadow: 0 0 5px #aaa }
#inner { padding: 20px 0 0 20px }
.cover { float: left; margin-right: 20px; padding-top: 12px; width: 144px; height: 132px; text-align: center }
.cover img { -webkit-box-shadow: 1px 1px 3px #777; -moz-box-shadow: 1px 1px 3px #777 }
.amp { background-position: 0 -24px }
.vol { float: left; display: inline; _font-size: 0; width: 180px; padding: 3px 20px 0 0 }
.vol .vol-down { margin-right: 2px }
.vol .vol-down,
.vol .vol-up { float: left; height: 9px; width: 9px; text-align: center; line-height: 9px; background-position: 2px -527px  }
.vol .vol-up { background-position: 2px -12px }
.vol .vol-down:hover,
.vol .vol-up:hover { cursor: pointer; color: #fff; background-position: 0 -515px }
.vol .vol-up:hover { background-position: 0 0 }
.vol ul { float:left; height: 7px; padding-top: 2px }
.vol ul li { float: left; display: inline; height: 5px; width: 2px; margin-right: 3px; background: #deeee2 }
.vol ul li.null { background: #b6b9bc }
.power { float: left; cursor: pointer; _font-size: 0; width: 12px; height: 13px; background-position: 0 -860px }
.power:hover { background-position: 0 -842px }
.panel,
.panel-off { float: left; padding: 6px 7px; color: #606160; width: 199px; height: 30px; margin-top: 6px; border-top: 1px solid #a9b7ad; border-right: 1px solid #f2f2f3; border-bottom: 1px solid #f2f2f3; border-left: 1px solid #a9b7ad; background-color: #deeee2; -webkit-border-radius: 3px; -moz-border-radius: 3px }
.panel-off { background-position: 60px -795px }
.last-time { float: left; font-family: radiotime }
.bug { float: right; margin: -1px -2px 0 0; color: #aaa; font: 12px Arial, Helvetica, sans-serif; display: none }
.bug:hover { cursor: pointer; padding: 2px; margin: -3px -4px 0 0; color: #fff; background: #d2d8d4 }
.title { clear: both; font: 12px Arial, Helvetica, sans-serif; padding-top: 4px }
.love,
.love-active,
.love-off { float: left; margin-top: 12px; width: 22px; height: 19px; cursor: pointer; background-position: 0 -611px }
.love:hover { background-position: 0 -587px }
.love-active { background-position: 0 -563px }
.love-active:hover { background-position: 0 -539px }
.option { float: left; width: 215px; margin-top: 10px }
.option .ban,
.option .next,
.option .ban-off,
.option .next-off { float: right; width: 46px; height: 46px; margin-left: 10px; cursor: pointer }
.option .ban,
.option .ban-off { background-position: 1px -274px }
.option .ban:hover { background-position: 0 -224px }
.option .ban:active { background-position: 0 -173px }
.option .next,
.option .next-off { background-position: 1px -736px }
.option .next:hover { background-position: 0 -686px }
.option .next:active { background-position: 0 -635px }
.love-off,
.option .ban-off,
.option .next-off{ cursor: default }