/* NARROW SCREEN */
html {
    background-color : #07262C;
    background-image: linear-gradient(to right, #324271, #1c3f66, #063a59, #00354b, #002f3d, #02303c, #04303b, #06313a, #043945, #034152, #04495e, #08516b);
    overflow  : scroll;    
}
table{
    border:3px;
    color:#00BFFF;
    font-family: Arial, Helvetica, sans-serif;

}
body {
    background-color : #07262C;
    margin    : 0px;
    margin    : 0px;
    padding   : 0px;
}

#preload {
    display   : none;
}

img.preload {
    width: 0px;
}

hr{
    color: #eee;

}

.global-styles, 
.chat-pop-up:not(.chat-visible) {
  z-index: -1 !important;
}
.backbutton1{
    position: absolute;
    top:183px;
    right:3px;
    background-color: #444444; /* A grey background */
    border: inset; /* Remove default link/button border */
    color: #fff; /* White text color */
    padding: 5px 2px; /* Space between text and border */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove the default underline */
    display: inline-block; /* Allows padding/margin and alignment */
    font-size: 16px; /* Increase font size */
    margin: 4px 2px; /* Add some space around the "button" */
    cursor: pointer; /* Change cursor to a hand icon on hover */
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Add a hover effect */
.backbutton1:hover {
  background-color: #666666; /* A slightly darker grey on hover */
}


#content {
    position        : absolute;
    padding-top     : 60px;
    padding-bottom  : 95px;
    padding-left    : 10px;
    width           : 100%;
    background-color : #07262C;
    background-image: linear-gradient(to right, #324271, #1c3f66, #063a59, #00354b, #002f3d, #02303c, #04303b, #06313a, #043945, #034152, #04495e, #08516b);
    z-index: -2;
}


#mainpage{
    position        : absolute;
    top             : 600px;
    padding-bottom  : 95px;
    padding-left    : 1px;
    width           : 100%;
    height          : 1100px; 
    background-color : #07262C;
    background-image: linear-gradient(to right, #324271, #1c3f66, #063a59, #00354b, #002f3d, #02303c, #04303b, #06313a, #043945, #034152, #04495e, #08516b);
    z-index: -1;
}

.bannerdiv{
    margin-left:-40px;
    font-family:arial;
    color:#ccc;
    font-weight:bold;
    font-size:1.8vh;
    width:400px;
}
.banner{
    width:400px;
}

.FB{
    width:325px;
    display:none;
    vertical-align:top;
}
.PL{
    width:50%;
    vertical-align:top;

}

.DS{
    display:none;
    width:25%;
    vertical-align:top;
    
}

#contentcover {
    position        : absolute;
    padding-top     : 160px;
    padding-bottom  : 95px;
    padding-left    : 1px;
        height: auto; 
    width           : 100%;
    background-color : #07262C;
    background-image: linear-gradient(to right, #324271, #1c3f66, #063a59, #00354b, #002f3d, #02303c, #04303b, #06313a, #043945, #034152, #04495e, #08516b);
    z-index: -1;
} 

#facebook {  /* Hide this */
    position: absolute;
    display:none;
    left    : 10px;
    top     : 760px;
    width   : 100%;
    height  : 500px;
}

.fb-page1{
    transform: scale(0.77); 
    display:none;
    transform-origin: 0 0; 
    width: 100%;    
    prefers-color-scheme: dark;
}

#discord {  /* Hide This */
    position: absolute;
    display:none;
    left   : 2px;
    top     : 560px;
    width   : 100%;
    height  : 500px;
}

#playerview {  /* container */
    position: absolute;
    left    : 2px;
    top     : 560px;
    width   : 100%;
        height: auto; 
    background-color:#07262C;
    background-image: linear-gradient(to right, #324271, #1c3f66, #063a59, #00354b, #002f3d, #02303c, #04303b, #06313a, #043945, #034152, #04495e, #08516b);
}

#newplaying{  /* BODJR DJ Box */
    position: absolute;
    top     : 13px;
    transform: scale(1.0); 
    transform-origin: 0 0; 
    width   : 100%; 
    height:1600px;
     
}

#NowPlaying{  /* NEW BODJR DJ Box */
    position: absolute;
    left    : 3px;
    top     : 3px;
    transform: scale(0.8); 
    transform-origin: 0 0; 
    width   : calc(130% - 480px);
    height: 1600px;
}

#chatroom{
    position: absolute;
    width : 100%;
    top     : 564px;
}
#gcal{
    position: absolute;
    transform: scale(0.5); 
    transform-origin: 0 0; 
    width   : 98%;
    top     : 584px;
}
.ibody{
    position: absolute;
    width : 100%;
    top     : 564px;
}
#ibody{
    position: absolute;
    width : 100%;
    top     : 564px;
}

#stafflist{
    position: absolute;
    width : 100%;
    top     : 554px;
}
.staffinfo{
    position: absolute;
    width : 100%;
    top     : 554px;
}
/* FOOTER */
#footer {
    position: fixed;
    bottom  : 0px;
}
.lh{
    line-height: .7;
}
iframe#footer {
    width     : 100%;
    height    : 100px;
    box-shadow: 0px 5px 20px;
    border    : 0px;
}