/* None of the centring scripts work without this at each page top: replacing BLUE - HEX #00004a; RGB 34,34,34; CMYK 0,0,0,87 LIGHT GREY - HEX #f2f2f2; RGB: 242,242,242; CMYK 0,0,0,0.055 CANDY APPLE RED - HEX #ff0800; RGB:255,8,0; CMYK: 0,97,100,0 . = class # = ID /* =============MAIN PAGE SETTINGS=======================*/ html, body { background-color: #f2f2f2; font-family: "2XS", arial, sans-serif; color:#00004a;} ::-webkit-scrollbar { display: none;} /* .grayscale-100 { -webkit-filter: grayscale(40%); -moz-filter: grayscale(40%); -ms-filter: grayscale(40%); filter: grayscale(100%); }*/ /*================= FONT AND TEXT STUFF==============*/ @font-face { font-family: "2XS"; src: url('/fonts/Armata-Regular.ttf'); src: local('?'), url('/fonts/Armata-Regular.ttf') format('truetype'), } a:link, a:visited {color:#ff0800; text-decoration:none;} a:hover {color:#ff0800; text-decoration:underline;} /*============= MAIN PAGE POSITIONING ================*/ @media (max-width:700px){#container{margin-top:3%; margin-left: auto; margin-right: auto; width:100%; height:auto; /* The height is fixed by pixels*/}} @media (min-width:701px){#container {margin-top:1%; margin-left: auto; margin-right: auto; width:95%; height:auto; /* The height is fixed by pixels*/}} /*============= HEADER TIME/SONG ================*/ @media (max-width:700px){ .header{ width:100%; text-align: center; font-size:1.2vh; height:3.2vh; }} @media (min-width:701px){ .header{ width:100%; text-align: center; font-size:2vw; height:5.5vw; }} /* ====== SIDENAV Hamburger MENU ========================== */ .sidenav { height: 80%; width: 0; position: fixed; z-index: 1000; top: 0; left: 0; background-color: #f2f2f2; overflow-x: hidden; transition: 0.5s;} @media (max-width:700px){ .sidenav {padding-top: 25px;} .sidenav a {padding: 8px 8px 8px 15px; display: block; transition: 0.3s; font-size: 4vw;}} @media (min-width:701px){ .sidenav {padding-top: 10px;} .sidenav a {padding: 6px 8px 8px 10px; display: block; transition: 0.3s; font-size: 2vw;}} .sidenav a:hover { color: #00004a;} .sidenav .closebtn { position: absolute; top: 0; right: 2px; font-size: 2vw; margin-left: 10%;} /*======= Now playing image overlay =========== */ @media (max-width:700px) { .overlay{ position: relative; text-align: center; font-size:6vw; color: #00004a; } .overlay-top { position: absolute; background-color: #f2f2f2bb; top: 2.7vh; left: 10%; right: 10%; } } @media (min-width:701px){ .overlay {position: relative; text-align: center; font-size: 3.1vw; color: #00004a;} .overlay-top { position: absolute; background-color: #f2f2f2bb; top: 10%; left: 10%; right: 10%; } } /* ======= spin =========== */ imgSpin{ width: 300px; animation: rotation 3s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*======= Video overlay =========== */ .vid_overlay { position: absolute; }.vid_overlay-image{ position: relative; top: -000px; left: 0%; right: 0%; } /*======= TUNER AUDIO BUTTONS =========== */ #audioControl img { } #pause { display: none; } .squareSongImage { height:auto; max-width:100%; } *, :before, :after { box-sizing: border-box; } /*======= CLOCK =========== */ .clock { left: 0; position: fixed; top: 0; width: 20%; } /* ====== HIDE/SHOW why are these the wrong way round???====== */ @media (max-width:700px){.hide-small{display:none!important}} @media (min-width:701px){.hide-large{display:none!important}} /* ============== GRIDS AND COLUMNS ==================== */ /* ========== TOP SECTION =========================== */ .gridTop {display:grid; grid-template-columns:1fr 4.75fr 1fr; grid-gap:0px; border-radius:8px; margin-left:0px; margin-right:0px;} @media (max-width:700px){.columnTop padding:0; margin:0; main{text-align:left; font-size:6vw;} detail{text-align:left; font-size:4vw; border-radius:4px}} @media (min-width:701px){.columnTop padding:0; margin:0; main{text-align:left; font-size:4vw;} detail{text-align:left; font-size:2vw; border-radius:8px}} @media (max-width:700px){.columnTop img {border-radius:0px; width:100%; margin-left:0%; margin-right:0%;}} @media (min-width:701px){.columnTop img {border-radius:0px; width:80%; margin-left:10%; margin-right:10%;}} @media (max-width:700px){.columnTop header {text-align:center; font-size:5vw; color:#ff0800}} @media (min-width:701px){.columnTop header {text-align:center; font-size:3vw; color:#ff0800}} @media (max-width:700px){.columnTop detail {text-align:center; font-size:2.5vw;}} @media (min-width:701px){.columnTop detail {text-align:center; font-size:1.75vw;}} .gridNowPlaying {display:grid; grid-template-columns:1fr 1fr; grid-gap:0px; border-radius:8px; background-color: #6B6B6B;} @media (max-width:700px){.gridRadioTuner {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:4px; border-radius:8px;}} @media (min-width:701px){.gridRadioTuner {display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap:8px; border-radius:8px;}} @media (max-width:700px){.columnNowPlaying img {float:left; width:100%; height:auto; display:block; margin-left:2px; margin-right:2px; border-radius:2px;}} @media (min-width:701px){.columnNowPlaying img {margin-right:20px; width:100%; height:auto; border-radius:8px;}} /* ==================== PAGES ====================*/ @media (max-width:700px){.frontPageLogo img {width:100%; height:auto; display:block; margin-left:2px; margin-right:2px; border-radius:2px;}} @media (min-width:701px){.frontPageLogo img {width:100%; height:auto; border-radius:8px;}} @media (max-width:700px){.pageImageHeader img {width:100%; height:auto; margin-left:0px; margin-right:0px; border-radius:2px;}} @media (min-width:701px){.pageImageHeader img {width:100%; height:auto; margin-left:0%; margin-right:0%; border-radius:8px;}} @media (max-width:700px){.gridPages {display:grid; grid-template-columns:1fr 1fr; grid-gap:1px; border-radius:4px}} @media (min-width:701px){.gridPages {display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:5px; border-radius:8px}} @media (max-width:700px){.gridTeam {display:grid; grid-template-columns:1fr; grid-gap:0px; border-radius:4px}} @media (min-width:701px){.gridTeam {display:grid; grid-template-columns:1fr 2fr; grid-gap:5px; border-radius:8px}} @media (max-width:700px){.columnPages {padding:0px; margin:0; border-radius:4px;}} @media (min-width:701px){.columnPages {padding:0px; margin:0; border-radius:8px;}} @media (max-width:700px){.columnPages header {text-align:left; font-size:6vw;}} @media (min-width:701px){.columnPages header {text-align:left; font-size:3vw;}} @media (max-width:700px){.columnPages main {text-align:left; font-size:4vw;}} @media (min-width:701px){.columnPages main {text-align:left; font-size:2.2vw;}} @media (max-width:700px){.centerText {text-align:center; font-size:4vw;}} @media (min-width:701px){.centerText {text-align:center; font-size:2.2vw;}} @media (max-width:700px){.columnPages mainCenter {text-align:left; font-size:4vw;}} @media (min-width:701px){.columnPages mainCenter {text-align:left; font-size:2.2vw;}} @media (max-width:700px){.columnPages detail {text-align:left; font-size:3vw;}} @media (min-width:701px){.columnPages detail {text-align:left; font-size:1.7vw;}} @media (max-width:700px){.columnPages img {float:left; width:100%; height:auto; display:block; margin-left:0px; margin-right:0px; border-radius:2px;}} @media (min-width:701px){.columnPages img { margin-right:0px; width:100%; height:auto; margin-left:0px; margin-right:0px; border-radius:8px;}} @media (max-width:700px){.columnPages imgSmall {float:left; width:10%; height:auto; display:block; margin-left:0px; margin-right:0px; border-radius:2px;}} @media (min-width:701px){.columnPages imgSmall { margin-right:0px; width:10%; height:auto; margin-left:0px; margin-right:0px; border-radius:8px;}} /* ========== OTHER PAGES SMALLER IMAGES ========*/ @media (max-width:700px){.columnSmall {padding:1px; margin:0; border-radius:4px;}} @media (min-width:701px){.columnSmall {padding:5px; margin:0; border-radius:8px;}} @media (max-width:700px){.columnSmall header {text-align:left; font-size:5vw;}} @media (min-width:701px){.columnSmall header {text-align:left; font-size:3vw;}} @media (max-width:700px){.columnSmall main {text-align:left; font-size:4vw;}} @media (min-width:701px){.columnSmall main {text-align:left; font-size:2.5vw;}} @media (max-width:700px){.columnSmall detail {text-align:left; font-size:3vw;}} @media (min-width:701px){.columnSmall detail {text-align:left; font-size:1vw;}} @media (max-width:700px){.columnSmall img {float:left; width:50%; height:auto; display:block; padding:2px; margin-left:2px; border-radius:2px;}} @media (min-width:701px){.columnSmall img {float:left; width:25%; height:auto; display:block; padding:5px; margin-left:2px; border-radius:8px;}} /* ======== JUST FOR THE HEROES PIC GRID =================*/ @media (max-width:700px){ .gridMenu {display:grid; grid-template-columns:repeat(6, 2fr); grid-gap:2px; border-radius:2px; border-radius:4px; padding:2px; margin:0px;}} @media (min-width:701px){ .gridMenu {display:grid; grid-template-columns:repeat(12, 1fr); grid-gap:2px; border-radius:4px; border-radius:8px; padding:2px; margin:0px;}} @media (max-width:700px){ .columnIndex img {width:99%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:2px;}} @media (min-width:701px){ .columnIndex img {width:99%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:8px;}} /* ======== JUST FOR THE SPL PAGES ============*/ @media (max-width:700px){.gridPagesSPL {display:grid; grid-template-columns:1fr; grid-gap:0px; background-color: #f2f2f2; color:#00004a; border-radius:8px; padding:2px;}} @media (min-width:701px){.gridPagesSPL {display:grid; grid-template-columns:1fr 1fr; grid-gap:5px; background-color: #f2f2f2; color:#00004a; border-radius:8px padding:2px;}} @media (max-width:700px){.gridPagesSPL img {width:100%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:2px;}} @media (min-width:701px){.gridPagesSPL img {width:100%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:8px;}} @media (max-width:700px){.gridPagesSPL header {text-align:left; font-size:5vw;}} @media (min-width:701px){.gridPagesSPL header {text-align:left; font-size:3.2vw;}} @media (max-width:700px){.gridPagesSPL main {text-align:left; font-size:4vw;}} @media (min-width:701px){.gridPagesSPL main {text-align:left; font-size:3vw;}} @media (max-width:700px){.gridPagesSPL detail {text-align:left; font-size:3.5vw;}} @media (min-width:701px){.gridPagesSPL detail {text-align:left; font-size:2.6vw;}} /* ======== JUST FOR FRONT MENU GRID =================*/ @media (max-width:700px){ .frontMenu {display:grid; grid-template-columns:repeat(5, 2fr); grid-gap:2px; border-radius:2px; border-radius:4px; padding:2px; margin:0px;}} @media (min-width:701px){ .frontMenu {display:grid; grid-template-columns:repeat(10, 1fr); grid-gap:2px; border-radius:4px; border-radius:8px; padding:2px; margin:0px;}} @media (max-width:700px){ .frontColumnIndex padding:2px; margin:0px; border-radius:4px}} @media (min-width:701px){ .frontColumnIndex padding:5px; margin:0px; border-radius:8px;}} @media (max-width:700px){ .frontColumnIndex img {width:99%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:2px;}} @media (min-width:701px){ .frontColumnIndex img {width:99%; height:auto; display: block; margin-left:auto; margin-right:auto; border-radius:8px;}}