/**
* APP PALCO MP3
*
* Estilos utilizados em todas as interfaces do PalcoMP3
*
* @project   App do Facebook Palco MP3
* @version   3.0
* @author    Izabela Bittencourt
* @copyright 2012 Studio Sol Comunicação LTDA.
*
*/


/**
* NORMALIZAÇÃO
*
* Valores padrões para normalização do estilo
*
*/
    html,body,div,h1,h2,h3,h4,h5,h6,p,b,ol,ul,li,img,form,input,label,select,legend,fieldset,textarea,table,th,tr,td,thead,tbody,tfoot,blockquote,iframe,hr,button {margin:0; padding:0; border:0; word-wrap:break-word}
    header,section,article,footer,nav,aside {display:block}
    li {list-style:none}
    img {border:none; overflow:hidden; color:#fafafa; background:#fafafa}
    input,textarea,button,a {outline:none; z-index:0}
    button {border:0; cursor:pointer}
    button::-moz-focus-inner:active {border:0}
    a {cursor:pointer}
    a:focus,input:focus {outline:0}
    body{font-family: Helvetica, Arial, sans-serif; font-size: 12px}
    section:focus{outline: 0}

    @font-face  {
        font-family: 'MontSerrat-Regular';
        src: url('../font/montserrat-regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    a {text-decoration:none; color:#C30; transition:color 0.1s; -webkit-transition:color 0.1s; -moz-transition:color 0.1s; -o-transition:color 0.1s; -ms-transition:color 0.1s}
    a:hover, a:focus {text-decoration:underline}



/**
* SPRITES
*
* Chamadas dos sprites
*
* @section sprites
*/
    .header,.bt, .player_topo, #player .mask_vol{background-image: url(../img/gradient.png)}
    .logomarca, .link_install, .cifras_por a, .letras_por a, .ico_config, .modal_opt i, .mod_tit .close, .install i, .cnt_mod_troca i{background-image: url(../img/sprite.png)}
    .p_prog_slider a, #player .player_controles button, #player .p_vol_slider a{background-image:url(../img/sprite_player.png)}


/**
* GRID
*
*
* @section grid
*/
    .g_809{width: 809px; margin: auto; position: relative}
    .player_colunas{overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.25); border:solid 1px #EEE; border-top: 0; border-radius: 0 0 3px 3px; position: relative}
    .player_colunas .c_sep{display: block; width: 1px; position: absolute; left: 313px; top: 0; bottom:0; background: #CCC; box-shadow: 0 0 3px rgba(153,153,153,0.5)}
    .freeze{display:none; background: url(../img/bg_b.png); position: absolute; left: 0; right: 0; z-index: 3; border-radius: 0 0 3px 3px}
/**
* BOTÕES
*
* BOTÕES UTILIZADOS NO APP
*
* @section Topo
*/
    .bt {display:inline-block; vertical-align:middle; height:27px; line-height:27px; padding:0 10px; font-weight:bold; text-decoration: none; cursor:pointer; border-radius:3px; text-align:center; -webkit-background-clip:padding-box; box-shadow:0 1px 3px rgba(0,0,0,0.3)}
    input.bt,button.bt {cursor:pointer; line-height:25px}

    .bt:hover {text-decoration:none}

    .bt_v {border:1px solid #9C2300; background-color:#BF2D00; background-position:0 -41px; color:#fff; text-shadow:0 -1px 0 #932300}
        .bt_v:hover, .bt_v:focus {background-color:#D04416; background-position:0 -69px; color:#fff}
        .bt_v:active {background:#B42700; box-shadow:0 1px 2px rgba(0,0,0,0.3) inset; text-shadow:0 -1px 0 #871D00}

    .bt_p {border:1px solid #000; background-color:#444; background-position:0 -223px; color:#fff}
        .bt_p:hover, .bt_p:focus {background-color:#575757; background-position:0 -251px; color:#fff}
        .bt_p:active, .bt_p.active {background: #333; text-shadow: 0 -1px 0 #242424; box-shadow: 0 1px 2px rgba(0,0,0,0.6) inset}

    /* Botão branco */
    .bt_b {border:1px solid #DBDBDB; background-color:#FAFAFA; background-position:0 -279px; color:#C30; box-shadow:none}
    .bt_b:hover, .bt_b:focus {border-color:#DBDBDB #CECECE #c9c9c9; box-shadow:0 1px 1px #E3E3E3, 0 1px 1px #FFF inset}
    .bt_b:active {border-color:#c9c9c9 #CECECE #CECECE; box-shadow:0 1px 1px #DCDCDC inset}

    .bt_disabled, .bt_disabled:hover, .bt_disabled:active, .bt:disabled {border: 1px solid #ccc;background-position:0 -279px; background-color: #fafafa; font-weight: normal;color: #ccc;text-shadow: none;cursor: default;box-shadow: none}

    .ico_config{display: inline-block; width: 17px; height: 18px; background-position: -117px -87px; margin-top: 5px}

/**
* TOPO
*
* TOPO DO APP
*
* @section Topo
*/
    .header{height: 40px; border:solid 1px #000; border-radius: 3px 3px 0 0; box-shadow: 0 1px 0 #5E5E5E inset; position: relative}
    .header .cnt_bt{display: block; font-size: 0; position: absolute; top: 5px; right: 12px}
    .header .bt_v{font: 11px/27px Tahoma, sans-serif}
    .header .bt+.bt{margin-left: 5px; padding: 0 5px}

	.logomarca{display: block; width: 99px; height: 14px; line-height: 150px; overflow: hidden; top: 14px; left: 11px; position: absolute}
    .modal_opt{display: none; background: #FFF; width: 134px; position: absolute; right: 2px; top: 46px; z-index: 1; border:solid 1px #C5C5C5; border-bottom: solid 2px #c5c5c5; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.3)}
    .modal_opt.on{display: block}
    .modal_opt ul{border-radius: 3px}
    .modal_opt i{display: block; width: 21px; height: 14px; background-position: -117px -107px; position: absolute; top: -11px; right: 14px}
    .modal_opt a{display: block; line-height: 31px; font: 12px/31px Arial, Helvetica, sans-serif; color: #686868;  border-bottom: solid 1px #e9e9e9; padding: 0 10px}

    .ie7 .modal_opt{z-index: 10}
/**
* CAPA DO APP
*
* Estilos para capa do aplicativo visto por usuário e por banda
*
* @section capa
*/
    .capa{height: 270px; background: #000}

    .add_capa{background: url(../img/bg_capa.jpg); padding: 82px 0 0 30px; height: 188px; position: relative}
    .add_capa .t1{display: block; width: 400px; font:24px/1.3 'Cabin-Regular', Arial, sans-serif; color: #999; margin-bottom: 10px}
    .add_capa .msg{font:11px Tahoma, sans-serif; color: #999}
    .add_capa .msg.erro{color: #C00}
    .add_capa .bt{margin-right: 10px}
    .add_capa .f_top{height: 42px; top: -42px; border-radius: 3px 3px 0 0}
    .add_capa .f_bottom{height: 117px; bottom: -127px; text-align: right; padding-top: 10px}
    .add_capa .f_bottom a{color: #FFF; margin-right: 17px}
    .add_capa .f_bottom a.disabled{color: #666}

    .add_capa .img_controll{display: none; height: 270px; overflow: hidden; position: absolute; top:0; left: 0; right: 0; overflow: hidden}

    .add_capa.move .img_controll, .add_capa.move .freeze{display: block}
    .add_capa .bt_move{display: block; background: #000; background: rgba(0,0,0,0.7); color: #FFF; font: bold 11px/28px Arial, Helvetica, sans-serif; position: absolute; top: 50%; left: 50%; border:solid 1px #FFF; border:solid 1px rgba(255,255,255,0.7); box-shadow: 0px 0px 0px 1px rgb(0,0,0,0.7); border-radius: 3px; padding: 0 10px; margin:-15px 0 0 -105px}

    .add_capa .progress {display:inline-block;margin-right:10px;width:210px;height:8px;border-radius:10px;background: url('../img/sprite_adm.01.png') 0 -79px no-repeat;}
    .add_capa .progress b {width:0;display:block;height:8px;background: url('../img/sprite_adm.01.png') 0 -70px no-repeat;border-radius: 10px;}

    .ie7 .add_capa{z-index: 1}

/**
* PLAYER
*
* Estilos para o player gigante do app
*
* @section player
*/
    /* Topo */
    .player_topo{height: 116px; background-position: 0 -97px; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset; border:solid 1px #000; border-radius: 0 0 3px 3px; padding-left: 178px; position: relative; padding-top: 9px}

    .p_thumb{display: block; width: 156px; height: 117px; background: #000; border-radius: 3px; padding: 2px; overflow: hidden; position: absolute; top: 2px; left: 2px}
        .p_thumb img{width: 156px; height: 117px}

    .player_topo .p_musica{display: block; font: 26px/1.2 'Cabin-Regular', sans-serif; color: #FFF; text-decoration: none; margin-bottom: 4px; width: 545px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
    .player_topo .p_artista{color: #999}
    .plays{font:9px Tahoma, sans-serif; color: #666; position: absolute; right: 15px; top: 15px}

    .p_prog{width: 646px; height: 6px; background: #232323; border-top: 1px solid #1b1b1b; border-bottom: 1px solid #383838; box-shadow: 0 1px 0 #151515 inset; position: relative; left: -16px; top: 14px}
    .p_prog_play {height: 5px; background: #CA2B00; border-top: 1px solid #D65C33;border-bottom: 1px solid #000; position: absolute; top: -1px}
    .p_prog_slider { position: absolute; left: 0; right: 15px; top: 0; bottom: 0 }
    .p_prog_slider a {width: 15px; height: 10px; background-position: -68px -93px; position: absolute; top: -3px; box-shadow: 0 0 2px rgba(0,0,0,0.8); z-index: 1; border-radius: 10px}
    #player .p_prog_load {height: 6px;  background: #444; border-top: 1px solid #363636; border-bottom: 1px solid #232323; position: absolute; top: -1px}

    /* Botões do player */
    #player .player_controles {position:absolute; top: 87px; left: 162px; width: 646px}
    #player.full .player_controles {background-position: 0 -612px; padding-top:8px; height:45px}
    #player .player_controles button {background-color:transparent; display:inline-block; line-height: 150px; overflow:hidden; position: relative; z-index: 1; vertical-align: middle}
    #player .p_play,#player .p_pause {width:29px; height:30px}


    #player .p_play {background-position:0 0;margin-left: 3px}
    #player .p_play:hover {background-position:0 -31px}
    #player .p_play:active {background-position:0 -62px}

    #player .p_pause {background-position:-30px 0; margin-left: 3px}
    #player .p_pause:hover {background-position:-30px -31px}
    #player .p_pause:active {background-position:-30px -62px}

    #player .p_voltar,#player .p_avancar {width:25px; height:26px}

    #player .p_voltar {background-position:-60px 0; margin-left:5px}
    #player .p_voltar:hover {background-position:-60px -27px}
    #player .p_voltar:active {background-position:-60px -54px}

    #player .p_avancar {background-position:-86px 0; margin-left: 3px}
    #player .p_avancar:hover {background-position:-86px -27px}
    #player .p_avancar:active {background-position:-86px -54px}

    #player .p_repetir {width:16px; height:17px; background-position:-138px -85px; margin-left:20px; margin-top:1px}
    #player .p_repetir:hover {background-position:-155px -85px}
    #player .p_repetir.on {background-position:-172px -85px}
    #player .p_repetir.on_one {background-position:-189px -85px}

    #player .p_volume {width:21px; height:18px; background-position:-42px -110px; margin-left:24px}
    #player .p_volume:hover {background-position:-63px -110px}
    #player .p_volume.low {background-position:0 -110px}
    #player .p_volume.low:hover {background-position:-21px -110px}
    #player .p_volume.off {background-position:-84px -110px}

    #player .p_vol {height:3px; width:100px; border:1px solid #000; border-bottom:1px solid #393939; position:absolute; top:13px; left: 83px; border-radius:4px; box-shadow:0 1px 0 #151515 inset}
    #player .p_cnt_vol{display: inline-block; width: 100px; padding: 7px 0}
    #player .p_show .p_vol{left:187px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -transition: all 0.2s linear}
    #player .p_hide .p_vol{left:83px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -transition: all 0.5s ease-in-out}

    #player .p_vol_level {height:3px; background:#CA2B00; border-radius:3px; box-shadow:0 1px 0 #D65C33 inset}
    #player .p_vol_slider {width: 92px; position:absolute; top:0}
    #player .p_vol_slider a {width:9px; height:9px; background-position: -80px -81px; position:absolute; top:-3px; box-shadow:0 0 2px rgba(0,0,0,0.5)}
    #player .p_vol_slider a:hover {box-shadow:0 0 2px #fff; border-radius:9px}
    #player .p_vol_slider a:before {content:''; width:15px; height:15px; position:absolute; top:-3px; left:-3px}
    #player .mask_vol{display:block; height: 33px; width: 105px; background-position: 0 -184px;position: absolute;top: 0;left: 81px}

    #player .p_tempo {font-size: 11px; color: #fff; position: absolute; right: 15px; top: 9px; text-shadow: 0 -1px 0 #000;cursor: default}
    #player .p_tempo i{color: #666; font-style: normal}

/**
* LISTA DE MUSICAS
*
* Estilos para listagem de músicas
*
* @section musicas
*/
    .player_playlist{width: 313px; float: left; overflow: hidden; position: relative}
    /* COm mais de 20 músicas */
    .player_playlist.max, .p_letra.max{height: 629px}

    .player_playlist li{position: relative}
    .player_playlist .playlist_btn{display: none}
    .player_playlist .p_musica{display: block; font-size:12px; color:#666; text-decoration: none; padding:7px 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border-bottom: solid 1px #E7E7E7}
    .player_playlist .p_musica:hover{background: #F6f6f6}

    .player_playlist .on{background: #F6F6F6}
    .player_playlist .on .playlist_btn{display: block; position: absolute; bottom: 10px; left: 10px}
    .player_playlist .on .p_musica{height: 45px}


    .player_playlist .bt_s, .player_playlist .bt_disabled {display: inline-block; position: relative; padding: 3px 5px; color: #F6F6F6;text-align: center;border-radius: 3px;border: 1px solid #ddd;font-size: 11px;color: #666;background: #F6F6F6; vertical-align: top}
    .player_playlist .bt_s:hover {border-color: #999; color: #666; box-shadow: 0 1px 1px #ccc}
    .player_playlist .bt_disabled {color: #b2b2b2}

    .player_playlist .sep {padding: 2px 0; position: relative; vertical-align: top; top: 3px; margin-right: 4px; margin-left: 3px; border-style: solid; border-width: 0 1px; border-color: #FFF #FFF #FFF #DDD}
    .pl_like{display: inline-block; vertical-align: top; height: 21px; overflow: hidden}

/**
* LETRA DA MÚSICA
*
* Estilos para listagem de músicas
*
* @section letra
*/
    .p_letra{width: 450px; padding: 16px 22px 22px; float: left}
    .p_letra .titulo{display: block; font: 28px 'Cabin-Regular', Arial, sans-serif; color: #c30}
    .p_letra .compositor{font:13px Helvetica, Arial, sans-serif; color: #999}
    .p_letra p{font-size: 16px; line-height: 1.3; color: #666; margin-top: 17px}

    .p_letra .exibindo_letra, .p_letra .carregando_letra, .p_letra .sem_letra { display: none }
    .p_letra .sem_letra{width: 350px; color: #999; font-size: 13px; line-height: 1.3; text-align: center; padding: 101px 50px; display: none}

    .p_letra .sem_letra.on, .p_letra .exibindo_letra.on, .p_letra .carregando_letra.on { display: block }
    .p_letra .carregando_letra img{ margin-left: 209px; margin-top: 5px }

/**
* RODAPE
*
* Estilos para listagem de músicas
*
* @section rodape
*/
    .footer{padding:21px 22px 0 19px; font:11px Tahoma, sans-serif; color: #999; line-height: 1.6}
    .link_install{display:inline-block; width: 158px; height: 41px; background-position: 0 -15px; color: #FFF; font:11px/1.2 Tahoma, Arial, sans-serif; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); padding-top: 30px; margin-right: 17px; vertical-align: top}
    	.link_install b{display: block; font:bold 12px/1.2 Arial, Helvetica, sans-serif}
        .link_install:hover{background-position: 0 -193px; text-decoration: none}
        .link_install:active{background-position: 0 -266px}

    .dados {display: inline-block; width: 330px; vertical-align: top}
    .dados strong{font-weight: normal; color: #666; display: block}
    .dados .fb-like{display: block; margin-top: 12px}
    .cifras_por, .letras_por{color: #CCC; display: inline-block; vertical-align: top}
    .cifras_por a, .letras_por a{display: block; line-height: 300px; overflow: hidden; margin-top: 2px}
    .cifras_por a{width: 116px; height: 52px; background-position: 0 -87px; margin-right: 7px}
    .letras_por a{width: 121px; height: 52px; background-position: 0 -140px}
    .f_like{display: inline-block; height: 26px; overflow: hidden; margin-top: 5px}

/**
* SCROLL
*
* Estilos para scrollpane
*
* @section scroll
*/
    .jspPane { position: absolute; width: 313px !important }
    .jspVerticalBar {opacity: 0; width: 8px; position: absolute; top: 0; right: 5px}
    .jspTrack, .jspDrag { border-radius: 8px}
    .jspTrack { position: relative; background: transparent}
    .jspDrag { position: relative; cursor: pointer; background: #666}
    .jspDrag:hover, .jspActive {background: #333}
    .jspScrollable:hover .jspVerticalBar{opacity: 1}

/**
* MODAIS
*
* Estilos para os modais utilizados no app
*
* @section modais
*/
    /* Modal para trocar banda */
    .cnt_mod_troca.on{display: block; width: 809px; height: 438px; position: absolute; top: 0; left: 0; border-radius: 3px}
    .mod{width: 424px; background: #FFF; border:solid 1px #C5C5C5;  border-bottom: solid 2px #CCC; box-shadow: 0 1px 5px rgba(0,0,0,0.5); position: absolute; top: 94px; left: 191px; border-radius: 3px; overflow: hidden}
    .mod_tit{color: #333; font: bold 16px/35px 'Cabin-Regular', sans-serif; border-bottom: solid 1px #E8E8E8; padding: 0 10px}
    .mod_tit .close{display: block; width: 13px; height: 13px; background-color: transparent; background-position: -135px -87px; position: absolute; right: 11px; top: 11px; line-height: 100px; overflow: hidden}
    .mod_cnt{padding: 10px}
    .mod_cnt span{display: block; font:13px Arial, Helvetica, sans-serif; color: #333; margin-bottom: 15px}
    .mod_cnt input, .input_text{width: 382px; height: 37px; font-size: 20px; color: #666; border:solid 1px #D2d2d2; padding: 0 10px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset}
    .mod_cnt span.tit {display: inline-block; font:20px Arial, Helvetica, sans-serif; color: #666; margin: -5px 6px 0 0; vertical-align: middle}
    .mod_cnt input.suabanda { width:236px;}
    .mod_bts{height: 36px; background: #F8F8F8; box-shadow: 0 -1px 0 #FFF inset; border-top: solid 1px #e8e8e8; text-align: right; padding: 8px 10px 0}
    .mod_bts a{font: 11px Tahoma, sans-serif; color: #666}
    .mod_bts .bt{margin-left: 10px}
    .mod_cnt .error{display: block; margin: 5px 0; font: 11px Tahoma, sans-serif; color: #c00}

/**
* INSTALAÇÃO DO APP
*
* Estilo para instalação do app
*
* @section instalação
*/
    .install {background: url(../img/bg_install.jpg) no-repeat; text-align: center; padding-top: 360px; height: 225px; position: relative}
    .page_tab{width: 557px; height: 194px; background: #FFF; border:solid 1px #CCC; position: absolute; top: 324px; left:126px}
    .install .titulo{display: block; font:26px/1.3 'Cabin-Regular', sans-serif; color: #395998; margin-bottom: 8px}
    .install .texto{display: block; padding: 0 50px; color: #999; font: 16px/1.3 'Cabin-Regular', sans-serif; margin-bottom: 15px}
    .install .input_text{width: 288px; height: 32px; vertical-align: middle; margin-right: 6px}
    .cnt_text {position: relative}
    .cnt_text span{display: inline-block; font:20px Arial, Helvetica, sans-serif; color: #666; margin-right: 6px; vertical-align: middle}
    label{display: none; position: absolute; left: 256px; top: 30px; height: 39px; font: 11px Tahoma, sans-serif; line-height: 39px}
    .sucess, .error{display: block}
    .sucess i{display: inline-block; width: 13px; height: 11px; background-position: -143px -119px; margin-top: 14px}
    .error i{display: inline-block; width: 12px; height: 13px; background-position: -143px -104px; margin:-2px 6px  0 0; vertical-align: middle}
    .error {color: #C00}
    .validate_error, .mod_cnt .validate_error{border:1px solid #cc3300}
    .validate_ok, .mod_cnt .validate_ok {border:1px solid #009900}