Radio page changes

Moved login button to top right corner.
Changed background image.

airtime_mvc/application/views/scripts/index/index.phtml

@@ -9,6 +9,13 @@
         echo "<a href='#' class='logo'><img src='data:image/png;base64," . $this->stationLogo . "'></a>";
     } ?>
 
+    <div class="login-btn">
+        <a href="/login" target="_parent">
+        <span>Login</span>
+        <span class="login-img"></span>
+        </a>
+    </div>
+
     <div id="tab-1" class="schedule tab_content current">
         <iframe id="schedule_iframe" height="400px" scrolling="no" frameborder="0" src=<?php echo $this->stationUrl."embed/weekly-program?style=premium"?>></iframe>
     </div>
@@ -36,12 +43,11 @@
     $(document).ready(function(){
 
         $("#player_iframe").load(function () {
-            $("#player_iframe").contents().find('.bottom_bar').append("<a class='login_btn button' target='_parent' href='/login'></a>");
             $("#player_iframe").contents().find('.bottom_bar').append("<div class='about_us_btn button' data-tab='tab-2'></div>");
             $("#player_iframe").contents().find('.bottom_bar').append("<div class='schedule_btn button current' data-tab='tab-1'></div>");
 
 
-            $("#player_iframe").contents().find('.bottom_bar .button').not('.login_btn').click(function(){
+            $("#player_iframe").contents().find('.bottom_bar .button').click(function(){
                 var tab_id = $(this).attr('data-tab');
 
                 $("#player_iframe").contents().find('.bottom_bar .button').removeClass('current');

airtime_mvc/public/css/radio-page/radio-page.css

@@ -1,5 +1,5 @@
 html {
-    background: url("img/background.png") no-repeat center center fixed;
+    background: url("img/background-testing-2.jpg") no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
@@ -26,6 +26,34 @@ body {
     margin: 40px 0px 0px 60px;
 }
 
+.login-btn {
+    float: right;
+    margin-right: 60px;
+    margin-top: 40px;
+    display:inline-block;
+    background-color: #000000;
+    opacity: 0.5;
+    padding: 10px;
+}
+
+.login-btn a {
+    color: #459B8F;
+    text-decoration: none;
+}
+
+.login-btn span {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+span.login-img {
+    background: url('img/login-small.png') no-repeat center -25px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 25px;
+    height: 25px;
+}
+
 #schedule_iframe, .tab_content {
     color: #fff;
     text-align: center;
@@ -134,6 +162,19 @@ input[type="submit"]:hover {
         margin: 20px 0px;
     }
 
+    .login-btn {
+        float: right;
+        margin-right: 0px;
+        margin-top: 0px;
+        position: absolute;
+        top: 15px;
+        right: 5px;
+    }
+
+    span.login-img {
+        display:none;
+    }
+
     .tab_content {
         margin-top: 0px;
         width: auto;