html, body{height:100%;}
#icerik{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
  background-color:#000;
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
}
#gecmis li a{
    display: block;
    width: 100%;
    color: #fff;
    padding: 10px 0;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}
#player{
  height:50px;
  color:#FFF;
  background:#333;
}

#player.online{
       border-top: 4px solid #de0702;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#player.offline{
    border-top:4px solid #D9534F;
}

#player #bilgiler{
  width:47%;
  float:left; padding-top: 10px;
}

 

#player #bilgiler .radyo{
  color:#FFF;
  margin:2px 0 0 15px;
  display:inline-block;
}

#player.online #bilgiler .radyo{
  -webkit-animation: glowOn .5s infinite alternate;
}

#player.offline #bilgiler .radyo{
  -webkit-animation: glowOff .5s infinite alternate;
}

#player #bilgiler .sarki{
  font-size:12px;
  margin:2px 0 0 15px;
  display:inline-block;
}

#player #bilgiler .sarki strong{
  color:#999;
}

#player #bilgiler .liste, #player #bilgiler .istek {
    width: 32px;
    height: 32px;
    margin: -22px 1px 0 0;
    text-align: center;
    color: #999;
    text-shadow: 0 0 0px #000;
    font-size: 16px;
    line-height: 32px;
    float: right;
    padding: 7px;
}
#player #bilgiler .istek i{
  width:100%;
  height:100%;
  display:block;
  line-height:1.9;
}


#player.online #kontrol:hover, #player.online #bilgiler .liste:hover, #player.online #bilgiler .istek:hover, #player.online #sag .yenile:hover, #player.online #sag .sessiz:hover, #player.online #sosyal li:hover, #player.online #sosyal li:hover > a{
  cursor:pointer;
  background:#de0702;
  color:#FFF;
}

#player.offline #kontrol:hover, #player.offline #bilgiler .liste:hover, #player.offline #bilgiler .istek:hover, #player.offline #sag .yenile:hover, #player.offline #sag .sessiz:hover, #player.offline #sosyal li:hover, #player.offline #sosyal li:hover > a{
  cursor:pointer;
  background:#D9534F;
  color:#FFF;
}

#player #kontrol{
  width:50px;
  height:46px;
  position:absolute;
  left:50%;
  margin-left:-25px;
  background:#de0702;
  text-align:center;
  font-size:24px;
  line-height:2.2;
}

#player.online #kontrol{
  background:#de0702;
}

#player.offline #kontrol{
  background:#D9534F;
}

#player #sag .yenile{
  width:32px;
  height:32px;
  margin:8px 1px 0 70px;
  text-align:center;
  color:#999;
  text-shadow:0 0 0px #000;
  font-size:16px;
  line-height:2.2;
  float:left;
}

#player #sag .sessiz {
    width: 32px;
    height: 32px;
    margin: 10px 1px 6px 4px;
    text-align: center;
    color: #999;
    text-shadow: 0 0 0px #000;
    font-size: 16px;
    line-height: 2.2;
    float: left;
    line-height: 32px;
    padding: 7px;
}
 

.player{
  display:none;
}

@-webkit-keyframes glowOn {
    to {
      text-shadow: 0 0 10px #de0702;
    }
}
@-webkit-keyframes glowOff {
    to {
      text-shadow: 0 0 10px #D9534F;
    }
}

#gecmis.online{
  border:5px solid #de0702;
}
#gecmis.offline{
  border:5px solid #D9534F;
}
#gecmis{
  width:360px;
  height:200px;
  margin:0;
  padding:0;
  background:#333;
  overflow:auto;
  position:absolute;
  left:50%;
  bottom:46px;
  margin-left:-180px;
  display:none;
}

#gecmis li{
  color:#999;
  padding:4px 10px;
  list-style-type:none;
}

#gecmis li:nth-child(odd){
  background:#222;
}

#gecmis li i{
  margin-left:4px;
  margin-right:10px;
}
.modal-title{color:#333;}
*{border-radius:0 !important;}


@media(max-width:768px){#player #bilgiler {
    width: 44%;
    float: left;
    padding-top: 10px;
}}
@media(max-width:500px){#player #bilgiler {
    width: 41%;
    float: left;
    padding-top: 10px;
}}