* {}
html {}

body {height: 100%; font-family: 'Raleway', sans-serif;}
.container {background: #fff; border-radius: 10px; width: 800px; height: 600px; margin-top: 50px; padding-left: 0; padding-right: 0;}

.visualizar_twitter, .visualizar_video {cursor:pointer;}

/* ==========================================================================
Topo
========================================================================== */

.container .topo {width: 100%; height: 150px; float: left; border-bottom: 10px solid #da0080;}
.container .topo .logo {float: left; margin-left: 15px; margin-top: 10px;}

.container .topo .title {float: right; margin-top: 46px; margin-right: 30px;}
.container .topo .title p {font-size: 30px; color: #da0080; line-height: 0.8; text-align: right;}
.container .topo .title p span {font-size: 18px;}

/* ==========================================================================
Conteúdo Esquerdo
========================================================================== */

.container .cont-left {float: left; width: 450px; height: 450px; background: #f6f6f6; border-bottom-left-radius: 10px; padding: 25px;}

.container .cont-left .player {width: 400px; height: 90px; background: #fff; border-radius: 10px;}
.only.player {width: 400px; height: 90px; background: #fff; border-radius: 10px;}
.container .cont-left .player .control {width: 106px; height: 90px; float: left; background: #99d039; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.only.player .control {width: 106px; height: 90px; float: left; background: #99d039; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}

.container .cont-left .player .control .button {width: 74px; height: 74px; border-radius: 74px; background: #a6d754; margin: 8px 18px; -moz-box-shadow: 0px 2px 4px #93c060; -webkit-box-shadow: 0px 2px 4px #93c060; box-shadow: 0px 2px 4px #93c060;}
.only.player .control .button {width: 74px; height: 74px; border-radius: 74px; background: #a6d754; margin: 8px 18px; -moz-box-shadow: 0px 2px 4px #93c060; -webkit-box-shadow: 0px 2px 4px #93c060; box-shadow: 0px 2px 4px #93c060;}
.container .cont-left .player .control .button:hover {background: #aee058;}
.only.player .control .button:hover {background: #aee058;}

.container .cont-left .player .control .button a {width: 74px; height: 74px; padding: 30px 10px 30px 10px;}
.only.player .control .button a {width: 74px; height: 74px; padding: 30px 10px 30px 10px;}
.container .cont-left .player .control .button a img {margin: 22px 16px;}
.only.player .control .button a img {margin: 22px 16px;}

.container .cont-left .player .info-streaming { float: left; width: 294px; padding: 10px 20px 0 20px;}
.only.player .info-streaming { float: left; width: 294px; padding: 10px 20px 0 20px;}
.container .cont-left .player .info-streaming p {font-size: 15px; color: #777; line-height: 1.2; margin:0;}
.only.player .info-streaming p {font-size: 15px; color: #777; line-height: 1.2; margin:0;}
.container .cont-left .player .info-streaming p span {font-size: 12px; color: #99d039; font-weight: bold;}
.only.player .info-streaming p span {font-size: 12px; color: #99d039; font-weight: bold;}

.container .cont-left .next-audio { width: 400px; height: 40px; background: #fff; border-radius: 10px;/* padding: 11px 20px;*/ margin-top: 12px;}
.container .cont-left .next-audio p span#nome_next_audio {font-size: 15px; color: #777; font-weight:normal;}
.container .cont-left .next-audio p span {font-size: 13px; font-weight: bold; color:#f00;}

.container .cont-left .twitter {margin-top: 15px}

.container .cont-left .next-audio div {height:40px !important;display:table-cell;vertical-align:middle;}
.container .cont-left .next-audio div.icon-twitter {background:#53ABED;text-align:center;width:60px;border-bottom-left-radius:10px;border-top-left-radius:10px;}
.container .cont-left .next-audio div.title-twitter {text-indent:15px;font-size:14px;color:#53ABED;font-weight: bold;}
.container .cont-left .next-audio div.icon-camera {background:#D7007D;text-align:center;width:60px;border-bottom-left-radius:10px;border-top-left-radius:10px;}
.container .cont-left .next-audio div.title-camera {text-indent:15px;font-size:14px;color:#D7007D;font-weight: bold;}

/* ==========================================================================
Conteúdo Direito
========================================================================== */

.container .cont-right {float: right; width: 350px; height: 450px; background: #ebebeb; border-bottom-right-radius: 10px; padding:25px;}

.container .facebook {widht: 300px;}

.container .anuncio {width: 300px; height: 250px; background: #f1f1f1; margin-top: 20px;}
.container .anuncio {color: #e1e1e1; display: table-cell; font-size: 50px; height: 250px; text-align: center; vertical-align: middle; width: 300px;}

.container .assinatura {width: 300px; padding-left: 54px; margin-top: 15px}
.container .assinatura p {float: left; line-height: 3.6; margin-right: 10px;}
.container .assinatura img {float: left; border: none;}

/* ==========================================================================
Volume
========================================================================== */

.volume-div {float: left; margin-left: 20px; margin-top: 12px}
.volume-div img {float: left; vertical-align:inherit; margin-top: 0; margin-right: 10px; cursor:pointer;}

.volume { width:186px; height:15px; cursor:pointer; background:#e0e0e0; box-shadow:inset 0 0 15px #e0e0e0; margin-top: 1px; margin-left: 24px;}

.vol-box { font-size:12px; font-family: sans-serif;display:block; text-align:right; margin-top:-11px; margin-left:196px;   }
.control-volume { width:93px; height:15px; background:#a9cf4a; }
.knob { height:6px; width:10px; background: #fff; box-shadow:0 0 1px #000; margin-left: 93px; display: block; position:relative;}

/*
Código de Volume Original: http://codepen.io/garethdweaver/pen/euIfz
*/



/* ==========================================================================
Bye
========================================================================== */
.hide {display: none;}