@font-face { font-family: 'Roboto'; src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'RobotoMedium'; src: url('../fonts/Roboto-Medium.ttf') format('truetype'); }

/* ====================================================================*/
	/*RESET CSS*/
/* ====================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after{ content: ''; content: none; }
table{	border-collapse: collapse; border-spacing: 0; }

/* ====================================================================*/
	/*RESET CSS*/
/* ====================================================================*/

body{ font-family: 'Roboto', sans-serif; overflow: hidden; }
.show{ display: block !important; }
.hide{ display: none !important; }
.img-thumbnail { padding: 3px; line-height: 1.42857143; background-color: #fff; border: 1px solid #fff; border-radius: 0 4px 4px 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; display: inline-block; max-width: 100%; height: auto; }

.player{ width: 300px; height: 125px; background: #17164e;}
.player .header{ width: 290px; height: 15px; background: #2273b9; margin-bottom: 5px; padding: 5px; }
.player .header.error{ background: rgba(255, 0, 0, 0.7); }
.player .header .inHeader{ height: 16px; overflow: hidden; }
.player .header .inHeader .radioName{ font-family: 'RobotoMedium';}
.player .header .inHeader .radioLive{ color: #fff; }
.player .corps{ width: 100%; height: 86px; background: #fff; box-shadow: 0 4px 2px -2px gray; }
.player .corps .logo{ width: 86px; float: left; border-radius: 0 4px 0 0; cursor: pointer; }
.player .corps .right{ width: 213px; height: 100%; float: left; background: #fff;}
.player .corps .right .playlist{ width: 209px; height: 44px; background: #17164e; padding-left: 5px; }
.player .corps .right .playlist ul { overflow: hidden; white-space: nowrap; height: 37px; width: 123px; float: left;}
.player .corps .right .playlist ul li{ width: 37px; height: 37px; border-radius: 4px; margin: 0 2px; float: left;}
.player .corps .right .playlist ul li img{ border-radius: 4px; }
.player .corps .right .playlist input{ float:left; width: 107px; height: 32px; margin-right: 2px; padding: 0 5px; font-size: 16px; border-radius: 4px;}
.player .corps .right .playlist .action{ float: left; border-radius: 4px; background: #2273b9; margin: 0 2px; width: 37px; height: 37px; text-align: center; line-height: 37px; color: #fff; cursor: pointer; }
.player .corps .right .control{ width: 95px; height: 43px; float: left;}
.player .corps .right .control span{ width: 32px; border: none; background: none; color: #2273b9; margin: 5px 5px; cursor: pointer;}
.player .corps .right .control .playPause{ float: left; }
.player .corps .right .control .ic-spinner{ display: none; float: left;}
.player .corps .right .radioline{ width: 118px; height: 31px; float: left; margin-top: 5px; }
.player .corps .right .radioline a{ display: block; }