:root {
	--bbgold : #d4aa47;
	--bbbg : #111;
	--bbblue : #005884;
	--bbteal : #18BC9C;
	--bbired : #E74C3C;
	--bbiblue : #3498DB;
	--bbiorange : #F39C12;
	--bbiteal : #0f7864;
	--content-height : auto;
	--bbdarkblue : #000022;
	--menuAbout : var(--bbblue);
	--menuPresenters : #C74C3C;
	--menuHub : #c49d10;
	--menuContact : #C35C02;
	--menuSchedule : var(--bbiteal);
	--menuCatchup : #1294c7;
	--menuPanto : #c49d10;
	--menuSounds : #734173;
    --menuImages : #E76C5C;
    --menuShop : #437D20;
}




@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}


html,body {
	font-family: 'Varela Round';
	margin : 0;
	line-height: 1.5;
	scrollbar-color : var(--bbgold);
	scrollbar-width: thin;
	background-color : var(--bbbg);
	color : white;
	--breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    margin-top : 0;
    overflow-y : hidden;
}



@font-face {
  font-family: 'Varela Round';
  src: url('../fonts/VarelaRound-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@media (min-width: 576px) {
.container, .container-sm {
}

body {
	font-size : 1.2em;
}

}




@media (min-width: 1200px) {
.container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1180px;
}

body {
	font-size : 1em;
}
}

a {
    color: var(--bbgold);
    	text-decoration : none;
}

a:hover, a:focus {
    color: var(--bbgold);
}


.jumbotronWrapper {
}

.jumbotron {
	background-color : black;
	border : 1px solid var(--bbgold);
	border-bottom : 0;
	border-radius : 5px 5px 0 0;
	margin-top : 1vh;
	width : 98%;
	height : 13%;
	max-height : 13%;
	padding : 1%;
	margin-left : auto;
	margin-right : auto;
}

#headerLeft {
	width : 15%;
}

#headerMiddle {
	width : 66%;
	background-image : url(/images/toplogo.png);
	background-size : contain;
	background-repeat : no-repeat;
	background-position : center;
}

#headerRight {
	text-align : right;
	width : 15%;
	background-image : url(/images/globe.gif);
	background-size : contain;
	background-repeat : no-repeat;
	background-position : center;
}

span.formlabel {
	min-width : 8em;
	display : inline-block;
}

#scrollmarqueeWrapper {
	height : 4vh;
}


#nownextwrapper {
	padding : 0;
	margin-bottom : 0.4vh;
	width : 98%;
	margin-left : auto;
	margin-right : auto;
}


#footer { 
	margin : 0;
	margin-top : 0.2vh;
	clear : both;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    height : 100%;
    align-items: stretch;
    animation: fadeIn ease 0.01s;
}



#listenLive {
	width : 100%;
	max-height : 2em;
	text-align : center;
	font-size: 2vh;
	border-radius : 0 0 5px 5px;
	margin-top : 0.2vh;
	margin-bottom : 0.2vh;	
}

#listenLive a {
	color : white;
}

.ll {
	display : inline-block;
	
}

.ll a {
	color : white;
}

#ll1 {
	max-width : 90%;
	margin-right : 5%;
}


#ll2 {
	afloat : right;
	max-width : 90%;
	marin-left : 5%;
}

#ll2 a {
	color : red;
}



#content-block {
    overflow-y : scroll;
    width : 100%;
    scrollbar-color : var(--bbgold);
	scrollbar-width: thin;
	background-color : black;
	border-radius : 5px;
	flex : 1;
}


h1 {
		color : var(--bbgold);
}

h2 {
		color : var(--bbblue);
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


#listenLivePlayButton {
		vertical-align : middle;
		margin-top : 0.1%;
		margin-bottom : 0.1%;
		height : 50%;
		max-width : 12%;
};




#listenLive a:hover, a:visited, a:link, a:active {
	text-decoration : none;
}



.hyperlink {
    cursor : pointer;
}


#menu {
	display : flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}


.menuItem {
	width : 19.6%;
	text-align : center;
	white-space: nowrap;
	border-radius : 10px 10px 0px 0px;
	cursor : pointer;
}

.menuItem a {
	color : var(--bbbg);
}

.menuItem a:hover {
	color : white;
}

#menuSchedule {
	background-color : var(--menuSchedule);
}

#menuPresenters {
	background-color : var(--menuPresenters);
}

#menuHub {
	background-color : var(--menuHub);
}

#menuContact {
	background-color : var(--menuContact);
}

#menuAbout {
	background-color : var(--menuAbout);
}

#menuCatchup {
	background-color : var(--menuCatchup);
}

#menuPanto {
	background-color : var(--menuPanto);
}

#menuSounds {
	background-color : var(--menuSounds);
}

#menuImages {
	background-color : var(--menuImages);
}

#menuShop {
	background-color : var(--menuShop);
}


/* Vertical Scrollers */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--bbgold);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: var(--bbgold); 
}




/* Spinner animations - not used but cool. Create a div and add class stage. Put an img in it
   and ass class spinner
*/


.stage {
    margin: 1em auto;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
}

 /* WebKit and Opera browsers */
   
@-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
}

  /* all other browsers */
@keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
}


.spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

h1 { font-size : 2.3em;}
h2 { font-size : 1.8em;}
h3 { font-size : 1.5em;}
h4 { font-size : 1.4em;}

/* schedule table */

table.week {
	border : 0;
	border : 1px solid var(--bbgold);
}

.dowHeader {
	color : #3498DB;
	height : 2em!important;
}

.timeslotheader {
	color : var(--bbiteal);
}

#extra-header {
	width : 100%;
	min-height : 4%;
	height : 4%;
	background-color : var(--bbblue);
	text-align : center;
	font-size: 2.5vh;
}

.scheduleRepeat {
	color : var(--bbblue);
}

.scheduleInfo {
	display : none;
}

.scheduleMoreInfo {
	font-size : 1vw;
}

#scheduleTable {
	background-color : black;
}

table.week {
	width : 100%;
}

table.week tr th {
	text-align : center;
	border-bottom : 1px dotted var(--bbgold);
	border-right : 1px dotted var(--bbgold);
font-size :  0.7em;
}


table.week tr td {
	padding : 0.2vw;
	text-align : center;
	width : calc(100% /7.5);
	border-bottom : 1px dotted var(--bbgold);
	border-right : 1px dotted var(--bbgold);
}

.scheduleThumbnailImage {
	width : 100%;
	color : white;
	text-align : center;
	vertical-align : center;
	background-size : 100% 100%;
	background-repeat : no-repeat;
	background-position : center;

}


.clearDiv {
	width : 100%;
	height : 5vw;
}

.contentTitleDiv {
	width : 100%;
}

.contentLeftDiv {
	width : 76%;
	display : inline-block;
	scrollbar-color : red;
	scrollbar-width: thin;
}

.contentRightDiv {
	float : right;
	width : 20%;
	vertical-align : middle;
}

.contentImage {
	max-width : 80%;	
}

.contentTitle {
	text-align : left;		
}


.contentTitle h1 {
	font-size : 1.5em;
}

.contentTagLine {
	font-size : 0.9em;
	color : var(--bbblue);
}

.contentContent {
	font-size : 1em;
	color : white;
}

.presentersTable {
	width : 100%;	
}

.presentersCell  {
	min-width : 33%;
	width : 33%;
	padding : 2%;
	text-align : center;
	font-size : 2em;
}

.presentersCell a {
	color : white;	
}

.presentersImage {
	max-width : 50%;
	max-height : 4em;
}

.presentersImage a:link {
	text-decoration : none;
}

.ceefaxHeader {
	width : 100%;
	tab-size: 20;
	text-align : justify;
	white-space : pre;
	letter-spacing: 2px;
}

.ceefaxHeaderCell {
	display : inline-block;
	width : 25%;
	text-align : center;
}

#ceefaxTime {
	color : yellow;
	display : inline-block;
}

#ceefaxSecs {
	color : yellow;
	display : inline-block;
	text-align : left;
	min-width : 1.2em;
}


#nownext {
	vertical-align: text-top;
}

#nowNextTable {
	width :100%;
	min-height : 100%;
	max-height : 100%;
	max-width : 100%;
	padding : 0;
	margin : 0;
}

.nowNextHeader {
	color : #3498DB;
	font-size : 1.5vh;
}

.nowNextBox {
	border : 1px solid var(--bbgold);
	border-radius : 0 0 5px 5px;
	border-top : 0;
	float : left;
	width : 49%;
	padding-left : 0.5vw;
	padding-right : 0.5vw;
	background-color : black;
	margin-bottom : 1vh;
}

.nowNextThumb { 
	width : 15%;
	height : 4vw;
	width : 6vw;
	max-height : 4vh;
	border : 1px solid var(--bbblue);
	border-radius : 4px;
	}

.nowNextText{
	width : 70%;
	text-overflow : ellipsis;
	font-size : 1.4vh;	 	
}


.socialButtonsDiv {
float : right;
}

.contentBlog {
	font-family: 'Varela Round';
	padding-left : 2em!important;
	height : auto!important;
	max-width : 100%;
	font-size : 1.5em!important;
}


.contentBlogImage {
	max-width : 20vh;
	float : left;
}


.scrollmarquee {
	color : white;
	font-size : 1.7vh;
	height : 100%;
	margin-top : 0.5vh;
}





#clock {
	transform: scaleX(-1);	
}




.bbfont  {
font-family: 'Varela Round', sans-serif;
color : var(--bbgold);
}

hr {
	border : 1px solid var(--bbgold);
	margin-left : 20%;
	margin-right : 20%;
	margin-top : 4em;
	margin-bottom : 4em;
}

.extendedGuide {
	background-color : var(--bbbg);
	opacity : 0.7;
	border-radius : 5px solid var(--bbgold);
	color : white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size : 0.75em;
	max-height : 4vh;
	text-align : center;
}

.hubAvatar {
	max-width : 20%;
	min-width : 20%;
	float : left;
	margin-right : 1em;
	margin-bottom: 0.5em;
	

}

.contentHub {
	font-family: 'Varela Round';
	padding-left : 2em!important;
	height : auto!important;
	max-width : 100%;
}

.hubPlayerDiv {
	color : var(--bbired);
	margin-left : 5%;
	max-width : 30%;
	height : 2em;
}

.hubPlayer {
	filter: sepia(100%);
	color : --var(bbgold);
	max-width : 100%;
	height : 100%;
}

.hubLinks {
	clear : both;
}

.hubLinkDiv {
	background-color : var(--bbired);
	border-radius : 5px;
	float : right;
	color : white;	
	padding : 0.2em;
	margin-right : 5%;
}

.hubLinkDiv a {
	color : white;
}

.rerunThumb {
}

.catchupBut {
	width : 80%;
}

#gallery {
	max-width : 80%;
	margin-top : 2vh;
	margin-left : auto;
	margin-right : auto;
	max-height : 45%;
	overflow-y : scroll;
}

.catchupThumb {
	cursor : pointer;
	width : 10vmin;
	height : 5vmin;
  	background-repeat: no-repeat;
  	background-size: 100% 100%;
	display : inline-block;
	border : 2px solid #222;
}