/* 
	getrtv/style.css, 21 Feb 18 
	Include everything needed for this site here so it is easily portable to cloud
	Any styling to match other sites should be easy enough to reproduce
	Only the main app really needs to work on mobile
*/

/***********/
/* General */
/***********/

body {
	font: 90% Verdana, Arial, Helvetica, sans-serif; 
}

h1 {
	line-height: 1em;
	color: #484;
	margin: .5em 0em;
}

/* Show AJAX result */
.res-area {
	font-size:small;
	background-color: #ccc;
	border-radius: 3px;
}

/* Datasheets */

table.dsc {
	width: auto;
	margin-bottom: .4em;
}

table.dsc td {
	border-style: hidden;
	padding-right: 15px;
}

/*
.dsc button {
	width: fit-content;
}
*/

.dsc button img {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

div.dsc {
	display: flex;
	flex-flow: row wrap;
	margin: 2px -2px 2px -2px;				/* Match margin in contained divs, with a bit more at the bottom */
	align-items: baseline;
}

div.dsc > div {
	margin: 2px;
}	

div.dsc > div > button, input {
	margin: 2px;
}	

table.p-data,
table.d-set {
	width: 100%;
	border-collapse: collapse;
}

table.p-data td,
table.d-set td {
	padding: .1em .5em;
	vertical-align: top; 
	color: #000;
	font-size: .8em;
	border: #444 solid 1px;
}

tr.hdr td {
	font-weight:bolder;
}

/* Menu */

div.menu {
	margin-bottom: .3em;
}

div.menu a {
	line-height: 1.9;
	margin: .1em .7em .5em 0;
	font-size: .8em;
	border-radius: 5px;
	font-weight: bold;
	text-decoration: none;	
	padding: .2em .6em;
	background-color: #8f8;
	color: #00f;
	white-space: nowrap;
}

/************/
/* Main app */
/************/

/* Some styling of ids which should ideally be replaced with classes */

/* Tag dropdown selectors */

div.tag select { 
	width: 150px; 
	margin: .2em .7em;
	background-color: #eee; 			/* Contrast with background */
}

/* Search expression display, operators and controls */

div#srch {
	margin: .4em 0;
	padding: .5em;
	line-height: 2.5;
	border-radius: 5px;
	background-color: #ff0; 
}

div#srch button {
	margin: 1px 8px;
}

/* Search result message */
#srch_res {
	margin: .4em;
}

/* Large hovering programme summary for 10' interface. Only on PC. Needs attention */
#sumry {
	font-size: 150%;		/* Tune this for sitting room */
	display: none;
	position: absolute;
	background-color: #eef;
	border: solid 2px gray;
	border-radius: 3px;
	padding: 5px;
}

/* Large programme play button for 10' interface. See getrtv.js for use */

/* Original method using a css trick which I don't understand */

.playb_orig:hover {
	border-left: 30px solid #ff0;
}

.playb_orig {
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid #000;
	cursor: pointer;
}

/* SVG version. Method of changing colour is even weirder than css trick above. See https://codepen.io/sosuke/pen/Pjoqqp */

.playb:hover {
	filter: invert(89%) sepia(57%) saturate(564%) hue-rotate(359deg) brightness(96%) contrast(95%);
}

.playb {
	width: 30px; 
	height: 30px; 
}