@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
    --white: #ffffff;
	--offw: #f9f9f9;
    --black: #0F0F0F;
    --grey: #a7a5a5;
	--dkg: #444444;
	--ltg: #ececec;
	--primary: #d95303;
	--secondary: #a10804;
	--cream: #ede8e2;
	--f-name: 'Quicksand', sans-serif;
	--f-light: 300;
	--f-regular: 400;
	--f-medium: 500;
	--f-bold: 600;
	--f-heavy: 700;

} /* variables*/

/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {font-size: calc(15px + 0.390625vw);}

body, html {height: 100%;}

body{
    background-color:var(--offw);
	font-family: var(--f-name);
	color: var(--black);
}
.mob-show{display: none;}
.mob-hide {display: block;}

a{
    text-decoration: none;
	outline: none;
}
ul{
    list-style: none;
}
img {max-width: 100%;height: auto;}
section {
	margin-bottom: 55px;
}
.dropmar {
	margin: 0;
	padding: 0;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
	z-index: 1;
  top: 0px;
  width: 97%;
  background: var(--offw);
  border-bottom: 4px double var(--black);
}
.sticky + #site-body {
  padding-top: 154px;
}

#container {
	width:100%;
	margin: 0 auto;
	height: 100%;
}
#wrapper {
	width: 97%;
	margin: 0 auto 10px;
}

#main-logo {
	display: inline-block;
	padding-top:10px;
}
#header-info {
	margin: 0;
	padding: 0;
}
#topbar {
	background: var(--dkg);
	height: 45px;
	padding: 5px 0 0 0;
	margin-top:0;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}
#topbar a {
	font-size: .7rem;
	color: var(--white);
	font-weight: var(--f-bold);
	padding-top:5px;
}
#topbar a img {
	display: inline-block;
	padding-right: 10px;
}
#company{
	font-size: .7rem;
	font-weight: var(--f-medium);
	text-align: right;
	padding: 8px 20px 0 0;
	color: var(--white);
}

nav ul#main-nav  {
	margin: 0 0 0 -20px;;
	padding: 0;
	font-weight:  var(--f-heavy);
	text-transform:uppercase;
	font-size: 0.8rem;
}

nav ul#main-nav li {
	display: inline-block;
	text-align: center;
	margin-top:10px;
}

nav ul#main-nav li a {
	display: inline-block;
	width:100%;
	color: var(--black);
	text-decoration: none;
}
nav ul#main-nav li a:hover{color:var(--primary);}

div#weather {
	margin: -20px 0 0;
	padding: 0;
}
div#weather a.weatherwidget-io {
	padding: 0;
	margin-bottom:-5px;
}


main#site-body {
	margin-top:15px;
}

div#news-feed h3 {display:none;}
div#news-feed h2 {font-size: 1.2rem;font-weight: var(--f-heavy);margin-bottom: 10px;}
div#news-feed h2 span {display: inline-block;font-size: .7rem;margin-left:30px;}
div#news-feed h4.feed-item-title {font-weight: var(--f-bold); font-size: .7rem;}
div#news-feed h4.feed-item-title a {color:var(--black);}
div#news-feed h4.feed-item-title a:hover {color: var(--secondary);}
div#news-feed p.feed-item-desc {font-weight: var(--f-regular); font-size: .6rem;margin-bottom: 10px;padding-bottom: 5px; border-bottom: 1px solid var(--grey);}
div#news-feed div {display: none}


section#today-up {
	border:1px solid var(--primary);
	padding: 2px 2px 15px 2px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom:10px;
}
section#today-up table {width:100%;margin: 0;}
section#today-up th {background:var(--primary);color:var(--white);-webkit-border-radius: 6px 0 0 0px;border-radius: 6px 0 0 0px;}
section#today-up th {
	font-size: .85rem;
	font-weight: var(--f-heavy);
	padding: 4px 14px 5px 0px;
}
section#today-up th#up-date {font-size: .6rem;width:30%;-webkit-border-radius: 0 6px 0px 0;border-radius: 0 6px 0px 0;}
section#today-up td {
	font-size: .75rem;
	font-weight: var(--f-medium);
	padding:8px 0px 8px 25px;
}
section#today-up td:first-of-type {padding-top:15px;}

div#left-col aside:first-of-type {height:140px;margin-bottom: 10px;text-align: center;}
div#left-col aside img {
	display: inline-block;
	margin:auto;
	text-align: center;
}
.sqAd img, .smBan img, .bgBan img {
	display: inline-block;
	margin-bottom: 10px;
	border:2px solid var(--grey);
	z-index: 1000;
}
section#week-up {
	border:1px solid var(--secondary);
	padding: 2px 2px 15px 2px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom:10px;
}
section#week-up h3 {
	background:var(--secondary);
	color:var(--white);
	font-size:.85rem;
	font-weight: var(--f-heavy);
	padding: 4px 5px 5px 14px;
	-webkit-border-radius: 6px 6px 0 0px;
	border-radius: 6px 6px 0 0px;
}
section#week-up h4 {
	font-size: .7rem;
	padding:5px;
}
section#week-up p {
	font-size: .6rem;
	padding:6px;	
}

/* ---- PROGRAMMING ---- */

#program-tbl {
	width: 100%;
	font-size: .7rem;
}
#program-tbl th {
	background:var(--grey);
	border: 1px solid var(--offw);
}
#program-tbl th,#program-tbl td {
	width:13.2%;
	height: 35px;
}
#program-tbl td {
	font-weight:var(--f-medium);
	text-align: center;
	border:1px solid var(--grey);
}
#program-tbl td span {
	font-weight: var(--f-regular);
	font-size: .55rem;
	display: inline-block;
	margin-left:20px;
}
#program-tbl th:first-of-type, #program-tbl td:first-of-type {
	width:6%;
	font-weight: var(--f-bold);
	text-align: center;
	font-size: .6rem;
}
#progleg-tbl {
	width:50%;
	margin: auto;
	text-align: center;
	margin-top: 5px;
	font-size:.7rem;
}
#progleg-tbl td {
	width:33%;
	border:1px solid var(--grey);
}
#progleg-tbl td.syn, #program-tbl td.syn {background:rgba(255,198,249,1.00);}
#progleg-tbl td.loc, #program-tbl td.loc {background:rgba(253,255,162,1.00);}
#progleg-tbl td.mus, #program-tbl td.mus {background:rgba(185,218,255,1.00)}

p.prog-notes {
	font-size: .7rem;
	font-weight: var(--f-medium);
	text-align: center;
	margin: 10px;
}

section#sports-prog {
	border:1px solid var(--secondary);
	padding: 2px 2px 15px 2px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom:10px;
}
section#sports-prog h3 {
	background:var(--secondary);
	color:var(--white);
	font-size:.85rem;
	font-weight: var(--f-heavy);
	padding: 4px 5px 5px 14px;
	-webkit-border-radius: 6px 6px 0 0px;
	border-radius: 6px 6px 0 0px;
}
section#sports-prog p {
	font-size: .75rem;
	padding:6px;
	text-align: center;
}
section#sports-prog ul.hs-teams {
	font-size: .65rem;
	text-align: center;
}


/* ----  ABOUT  ---- */
p.about-p {
	font-size: .75rem;
	margin-bottom: 15px;
}

section#staff {
	border:1px solid var(--primary);
	padding: 2px 2px 15px 2px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom:10px;
}
section#staff h3 {
	background:var(--primary);
	color:var(--white);
	font-size:.85rem;
	font-weight: var(--f-heavy);
	padding: 4px 5px 5px 14px;
	-webkit-border-radius: 6px 6px 0 0px;
	border-radius: 6px 6px 0 0px;
}
section#staff p {
	font-size: .75rem;
	padding:6px;
	text-align: center;
}

#staff-tbl {
	text-align: center;
	width: 100%;
	margin-top:10px;
}
#staff-tbl td {
	font-weight: var(--f-bold);
	font-size: .7rem;
	width:50%;
	padding:5px 0 10px 0;
}
#staff-tbl td span {
	font-weight: var(--f-regular);
	display: block;
	font-size: .6rem;
}


/* ----  CONTACT  ---- */

p.about-p {
	font-size: .75rem;
	margin-bottom: 15px;
}

section#advertise {
	border:1px solid var(--secondary);
	padding: 2px 2px 15px 2px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom:10px;
}
section#advertise h3 {
	background:var(--secondary);
	color:var(--white);
	font-size:.85rem;
	font-weight: var(--f-heavy);
	padding: 4px 5px 5px 14px;
	-webkit-border-radius: 6px 6px 0 0px;
	border-radius: 6px 6px 0 0px;
}
section#advertise p {
	font-size: .75rem;
	padding:6px;
	text-align: center;
}

.contact-p {
	font-size: .9rem;
	font-weight: var(--f-medium);
	line-height: 1.8;
	text-align: center;
	margin-bottom: 40px;
}


footer {
	height: 250px;
	margin-bottom: 15px;
	background:var(--cream);
	text-align: center;
	padding:15px 0;
}
footer div#station-menu a {
	display: inline-block;
	padding:0 30px;
	font-size: .8rem;
	font-weight: var(--f-medium);
	color: var(--black);
}
footer div#copy {
	font-size: .65rem;
	font-weight: var(--f-medium);
}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */

.mob-hide {display: none;}
.mob-show {display:block;}	

#container {
	width:100%;
	margin: 0 auto;
	height: 100%;
}
#wrapper {
	width: 97%;
	margin: 0 auto 10px;
}
	header {height: 100px;}
	
	div#weather {
	margin: 0 0 0;
	padding: 0;
}
	.contact-p {
		margin-top:-15px;
	}
}