/* CSS Document */

@import "fonts.css";
@import "colours.css";

body { font-family: Ubuntu, "Segoe UI", Tahoma, Geneva, sans-serif; font-size: 10pt; 
	margin: 0; padding: 0; color: #444; color: rgba(0, 0, 0, 0.87); 
}

body.fixed ::-webkit-scrollbar { width: 12px; }
body.fixed ::-webkit-scrollbar-track { background: #FFF; border: 2px solid #fff; margin-left: 2px }
body.fixed ::-webkit-scrollbar-thumb { background: #DDD; border-radius: 6px; 
	border: 3px solid #FFF; }
body.fixed ::-webkit-scrollbar-thumb:hover { background: #999; border-color: #999; }
	
h2 { font-size: 18pt; margin: 0 0 10px; letter-spacing: -1px; font-weight: normal; }
h3 { font-size: 10pt; background: #607d8b; padding: 10px; margin: 40px 0 10px; color: white; }
h3:first-child { margin-top: 0; }
h4 { font-size: 14pt; font-weight: normal; margin: 20px 0 -10px; }
h4:first-child { margin-top: 0; }
p { }

dt { display: block; font-size: 90%; text-transform: uppercase; }
dd { display: block; margin: 0 0 10px; padding: 0; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

#header { background: #00bcd4; color: white; 
	/*background: linear-gradient(#667, #335); */
	height: 48px; overflow: hidden; 
	/*position: fixed; top: 0; left: 0; width: 100%; */}
#header h1 { padding: 10px; font-size: 18pt; margin: 0; font-weight: normal; }
#header h1 a { color: white; text-decoration: none; }
#header h1 sub { font-size: 8pt; font-weight: lighter; letter-spacing: -0px; vertical-align: baseline }
#header h1 span.short { font-weight: lighter; color: rgba(255, 255, 255, 0.8); font-size: 82%; vertical-align: text-bottom; }
#header #menu { float: right; margin: 0; padding: 0; }
#header #menu li { display: inline-block; margin: 0; padding: 0; }
#header #menu a { display: inline-block; padding: 16px 14px 20px; 
	border-left: 1px solid #69F; border-left-color: rgba(255, 255, 255, 0.4); color: white; 
	text-decoration: none; }
#header #menu a:hover { background: rgba(255, 255, 255, 0.6); color: black; }
body.fixed #header { position: fixed; top: 0; left: 0; width: 100%; }

#content { box-sizing: border-box; padding: 10px; }
body.fixed #content { position: fixed;
	top: 48px; left: 0; width: 100%; height: calc(100% - 48px); overflow: auto; }
body.fixed #content.director { height: calc(100% - 96px); }

#footer { 
	/*position: fixed; top: calc(100% - 24px); height: 24px; width: 100%; left: 0; overflow: hidden;*/
	box-sizing: border-box; 
	padding: 10px; background: #DDD; color: #888; 
}
#footer * { margin: 10px 0 0; }
#footer h5 { font-size: 180%; font-weight: normal; }
body.fixed #footer { display: none; }

input, select, textarea { font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; 
	background: #EEE; border: 1px solid #EEE; padding: 4px 2px; }
input[type="submit"], input[type="button"], input.button, button, a.button {
	display: inline-block; border: 1px solid #bbb; background: #bbb; color: #444; padding: 6px 16px; 
	min-width: 75px; margin: 0 10px 0 0; 
}
input[type="submit"], input[type="button"].submit, button.submit, a.button.submit { 
	background: #259b24; border-color: #259b24; color: white; } 
a.button { text-decoration: none; cursor: default; }
input[type="submit"]:hover, input[type="button"]:hover, input.button:hover, button:hover, a.button:hover { 
	box-shadow: inset 20px 100px 4px rgba(255, 255, 255, 0.25); 
	border-color: rgba(0, 0, 0, 0.1); }
select { width: 100%; }
textarea { width: 100%; height: 120px; box-sizing: border-box; }
input:-webkit-autofill { background: #EEE; color: #666; }
input:focus, textarea:focus, select:focus { color: #000; border-color: #BBB; }

div.padder { box-sizing: border-box; padding: 10px 0; }
div.pad-x { box-sizing: border-box; padding: 0 10px; }
div.block { padding: 10px 10px 1px; background: #DDD; }
div.block.padder { margin: 10px; }

form, div.form { display: block; width: 100%; margin: 0 0 10px; }
form div.input, div.form div.input { display: block; margin: 0 0 10px; width: 100%; }
form div.input label, div.form div.input label { font-size: 8.25pt; display: block; color: #607d8b; margin: 0 0 2px; }
form div.input i, div.form div.input i { display: block; width: 100%; }
form div.input input, div.form div.input input { display: block; width: 100%; box-sizing: border-box; }
form div.submit input, div.form div.submit input { }
form div.input.textarea label, div.form div.input.textarea label { width: 100%; margin: 0 0 4px 0; }
form div.input.checkbox, div.form div.input.checkbox { padding: 4px 0; }
form div.input.checkbox, div.form div.input.checkbox label,
form div.input.time label, div.form div.input.time label,
form div.input.number label, div.form div.input.number label { 
	display: inline-block; width: 120px; overflow: hidden; 
	white-space: nowrap; text-overflow: ellipsis; margin-right: 10px; font-size: 100%; 
	vertical-align: middle; }
form div.input.checkbox input, div.form div.input.checkbox input { width: auto; padding: 0; vertical-align: middle; display: inline-block; }
form div.input.time input, div.form div.input.time input,
form div.input.number input, div.form div.input.number input { display: inline-block; width: 100px; }

div.flexbox { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; 
	margin: 0 -10px; }
div.flexbox div.column { flex-grow: 6; min-width: 250px; width: 25px; max-width: 100%; 
	margin: 0 10px 20px; }
div.flexbox div.small.column { flex-grow: 3; }
div.flexbox div.column.flipwide { order: 2; }
div.flexbox div.column.third { min-width: 100px; flex-grow: 4 }
div.flexbox div.column.twothird { flex-grow: 8; min-width: 400px; max-width: 100%; }
div.flexbox div.column.quart { flex-grow: 3; }

div.prompt, div.error, div.warning, div.info { display: block; margin: 10px 0; padding: 10px 10px 10px 52px; 
	background: #C30 url('../img/icons/error.png') no-repeat 10px 10px; color: white; color: white; }
div.warning { background-color: #DC2; color: #333; background-image: url('../img/icons/warning.png'); }
div.info { background-color: #04B; background-image: url('../img/icons/info.png'); }
div.prompt { background-color: #F4EED0; color: #444; background-image: url('../img/icons/info.png'); background-position: 10px 2px; }
div.error h4, div.warning h4, div.info h4 { margin: 0 0 10px; font-size: 160%; }
div.error p, div.warning p, div.info p { margin: 0 0 10px; }
div.error p:last-child, div.warning p:last-child, div.info p:last-child { margin: 0 }
div.prompt.hide { display: none; }

div#lightbox { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
div#lightbox div.lightbox_container { display: block; position: absolute; height: 75%; max-height: 90%; min-height: 200px; 
	margin: auto; width: 90%; padding: 0 5%; background: white; top: 0; bottom: 0; left: 0; right: 0;
	overflow: hidden }
div#lightbox div.lightbox_content { display: block; position: absolute; left: 0; top: 0;
	width: 100%; height: calc(100% - 48px); overflow: auto; padding: 0 5%; 
	box-sizing: border-box; }
div#lightbox div.flexbox { margin-right: 0;  }
div#lightbox div.flexbox div.column { min-width: 200px; margin: 0; padding: 0 10px; }
div#lightbox div.lightbox_buttons,
div#dialog div.lightbox_buttons { text-align: right; position: absolute; 
	top: calc(100% - 48px); height: 48px; padding-top: 8px;  overflow: hidden; width: 90%; left: 5%; 
	z-index: 100; background: white; box-sizing: border-box; }
div#lightbox div.lightbox_buttons :last-child,
div#dialog div.lightbox_buttons :last-child { margin-right: 0; }

div#lightbox h3 { background: transparent; color: #000; font-size: 140%; font-weight: normal; 
	padding: 0; }
div#lightbox h3:first-child { margin-top: 0; }

div#lightbox div.subdialog,
div#dialog { position: fixed; z-index: 1000; 
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5); }
div#lightbox div.subdialog div.content,
div#dialog div.content { position: fixed; z-index: 1001; 
	background: white; top: 10%; height: 80%; left: 20%; width: 60%; 
	overflow: auto; box-sizing: border-box; padding: 20px; 
	border: 1px solid #BBB; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
div#lightbox div.subdialog div.lightbox_buttons,
div#dialog div.lightbox_buttons { width: calc(100% - 40px); left: 20px; }
div#lightbox div.subdialog div.form,
div#dialog div.form { position: absolute; 
	width: calc(100% - 20px); height: calc(100% - 106px); overflow: hidden; 
	box-sizing: border-box; padding-right: 8px; overflow-y: scroll;
}

#director
{
	display: block; position: fixed; top: calc(100% - 48px); height: 48px; width: 100%; 
	overflow: hidden; box-sizing: border-box; background: #444; color: #EEE; }
#director span label { color: #999; }
#director a { width: 48px; overflow: hidden; padding: 8px 0; background: no-repeat center center; 
	 background-size: 32px; }
#director a label { visibility: hidden; width: 1px; }
#director a, #director span { padding: 14px; background-color: #333; display:inline-block; 
	box-sizing: border-box; vertical-align: top; margin-right: 4px; }
#director a label , #director span label { white-space: nowrap; display: inline-block; overflow: hidden; }
#director a#nextitem { background-image: url('../img/actions/director_next.png'); }
#director a#previtem { background-image: url('../img/actions/director_back.png'); }
#director a#jumpto { background-image: url('../img/actions/director_jump.png'); }
#director a.valid:hover { cursor: pointer; background-color: #F90; }

#director #nowtime { float: right; padding: 4px; margin-right: 0; }
#director #nowtime time { font-size: 40px; margin-top: -4px; display: inline-block; padding: 0 10px; }
#director span label { vertical-align: middle; }
#director span time { display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 120%;  }
#director span span { padding: 0; font-size: 90%; vertical-align: middle; margin-left: 10px; }

div.box { /* border: 1px solid #BBB; border-color: rgba(0, 0, 0, 0.2); 
	box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px; */ margin: 0px 0px 20px; }
	
#lefthalf h2, #righthalf h2 { padding: 4px 0px; }
#lefthalf h2.colour, #righthalf h2.colour { padding: 4px 10px; }
h2 span.segment-live { display: block; float: right; margin: 2px -2px 0 -40px; 
	background: red; color: white; 
	text-transform: uppercase; font-size: 60%; padding: 4px ; 
	box-shadow: 0 0 4px white; }
	
ul.itemlist { margin: 0 0 10px; padding: 0; }
ul.itemlist li { padding: 0px; list-style: none; border-bottom: 1px solid #DDD; }
ul.itemlist li:hover { background: #69C; color: white; cursor: pointer; }
ul.itemlist li.noitems { padding: 10px; color: #BBB; font-size: 90%; }
ul.itemlist li.noitems:hover { background: transparent; color: #BBB; cursor: default; }
ul.itemlist li a { display: block; padding: 10px; text-decoration: none; color: #333; }
ul.itemlist li:hover a, ul.itemlist li:hover span.description { color: white; }
ul.itemlist li a.action { float: right; padding: 9px; max-height: 19px; overflow: hidden; border-left: 1px solid white; }
ul.itemlist li span.description { color: #607d8b; display: block; margin-top: -6px; padding: 0 10px 10px }
ul.itemlist li:last-child { border-bottom: none; }
ul.itemlist li span.col { display: inline-block; width: 100px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; margin-bottom: -2px;
}
ul.itemlist li span.col.bool { width: 50px; }
ul.itemlist li span.col.main { width: 200px; }
ul.itemlist.actions { margin-top: 20px; }

ul.segments { display: block; list-style: none; margin: -1px 0 0; padding: 0; }
ul.segments li { display: block; margin: 0; padding: 10px; border-right: 8px solid #fff; 
	border-radius: 2px 0px 0px 2px; border-top: 1px solid white; border-bottom: 1px solid white; 
	position: relative; }
ul.segments li.sequence { border-right-color: #607d8b;
	margin-bottom : 0; margin-top: 0; border-bottom: none;  }
ul.segments li.sequence.first { border-radius: 2px 10px 0px 2px; margin-top: 4px; }
ul.segments li.sequence.last { border-radius: 2px 0px 10px 2px; border-bottom: 1px solid white; margin-bottom: 4px; }
ul.segments li.sequence.first.last { border-radius: 2px 10px 10px 2px;  }
ul.segments li span { margin-right: 4px; display: inline; }
ul.segments li span.segment-session { font-weight: bold; }
ul.segments li span.segment-source { background: black; color: white; padding: 6px 10px; font-weight: bold; }
ul.segments li a.edit { display: inline-block; background: #CCC; color: white; float: right; padding: 2px 8px; }
ul.segments li a.edit:hover { background: #777; cursor: pointer; }
ul.segments li.selected:before { content: '>'; position: absolute; left: -10px; 
	background: #607d8b; color: white; padding: 10px 3px 10px 2px; top: 0; width: 6px; 
	border-radius: 8px 0 0 8px; }
ul.segments li.noitem { background: #EEE; color: #888; font-size: 80%; }
ul.segments li.notready { color: white; background: black; font-size: 90%; padding: 6px 14px; text-transform: uppercase; font-weight: 100; margin: 12px -4px 2px; }
ul.segments li span.segment-live { display: block; float: right; margin: -2px -2px 0 -40px; background: red; color: white; 
	text-transform: uppercase; font-size: 80%; padding: 4px ; }
ul.segments li span.duration { float: right; font-size: 90%; margin-right: 40px; }
ul.segments li.happened { padding: 2px 10px; font-size: 90%; background: #EEE; color: #BBB}
ul.segments li.happened.selected:before { padding: 1px 3px 3px 2px; }
ul.segments li div.discontinuity { display: block; background: black; color: white; padding: 4px 10px; margin: 10px -10px -10px; 
	font-weight: bold; text-transform: uppercase; font-size: 80%; border-top: 2px solid white; }
ul.segments li.happened div.discontinuity { background: #DDD; margin-top: 2px; margin-bottom: -2px; border-top-width: 1px; }

ul.segments.dragdrop_running { margin-top: -10px; padding-top: 10px; padding-bottom: 10px;
	background: #FE8; }
ul.segments li.dragover.before { border-top: 6px groove black; margin-top: -2px; padding-top: 6px; }
ul.segments li.dragover.after { border-bottom: 6px groove black; margin-bottom: 0; padding-bottom: 6px; }
ul.segments li.dragging { opacity: 0.25; }

body.fixed.layout-horiz div.segmentviewer { position: absolute; top: 0px; left: -110%; width: 100%; 
	height: 100%; /*calc(100% - 48px); */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); background: white; z-index: 10; 
	box-sizing: border-box; padding: 10px 10px 10px 15px; overflow: auto; 
	transition: left 0.7s; }
body.fixed.layout-vertical div.segmentviewer {
	position: fixed; top: 64px; left: 0px; width: 100%; height: calc(100% - 128px); 
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); background: white; z-index: 10;
	box-sizing: border-box; padding: 10px; overflow: auto;
}
div.segmentviewer h2 { padding: 4px 10px; margin-right: 48px; }
div.segmentviewer div.tools { margin: 10px 0; }
div.segmentviewer div.box { padding: 10px; margin: 32px 0 10px 0; background: #EEE; clear: both;  }
div.segmentviewer a.button { display: block; float: right; font-size: 8.25pt; 
	color: #000; background: #FFF;
	padding: 6px 12px; min-width: 0; margin: 0 0 0 10px; }
div.segmentviewer[data-ready="true"] a.ready { background-color: #6C3; }
div.segmentviewer a.action { float: right; margin: 0 0 0 10px; cursor: pointer; }
div.segmentviewer a.button:hover { background: #3C6; color: #FFF; cursor: pointer; }
div.segmentviewer h4 { margin: 0 0 10px; font-size: 140%; }
div.segmentviewer p { margin: 0 0 10px; }
div.segmentviewer :last-child { margin-bottom: 0; }

div.times { font-weight: lighter; font-size: 9pt; text-transform: lowercase; opacity: 0.8; }
div.times span { display: inline-block; margin-right: 10px; }

div.segment { padding: 0px; font-size: 120%; }
div.segment ul { padding: 0; margin-top: 10px; }
div.segment ul li { display: block; background: #EEE; padding: 10px; margin-bottom: 10px; }
div.segment ul li.blankspace { background: transparent; }

i.square { display: inline-block; width: 16px; height: 16px; overflow: hidden; margin: 0 8px -3px 0; }

.action { background: #BBB no-repeat center center; padding: 9px; }
.action.right { float: right !important; margin-left: 10px !important; margin-right: 0 !important; }
.action.left { float: left !important; margin-left: 0 !important; margin-right: 10px !important; }
.action:hover { background-color: #6C3; }
.action label { visibility: hidden; width: 20px; display: inline-block; overflow: hidden; white-space: nowrap; }
.action.edit { background-image: url('../img/actions/edit.png'); }
.action.delete { background-image: url('../img/actions/delete.png'); }
.action.delete:hover { background-color: #C30; }
.action.ready { background-image: url('../img/actions/ready.png'); }
.action.add { background-image: url('../img/actions/add.png'); }
.action.minus { background-image: url('../img/actions/minus.png'); }
.action.new { background-image: url('../img/actions/new.png'); }
.action.close { background-image: url('../img/actions/close.png'); background-color: transparent; background-position: 7px center; }
.action.close:hover { padding: 7px; border: 2px solid #BBB; background-position: -43px center; }
.action.jumpto { background-image: url('../img/actions/jumpto.png'); }
.action.sendto { background-image: url('../img/actions/sendto.png'); }
.action.actions { background-image: url('../img/actions/actions.png'); }


.runningorder h2 { padding: 4px 10px; }
.runningorder h2 span { display: block; font-size: 12px; font-weight: normal; }
.runningorder div.times { background: #DDD; color: #444; padding: 4px 10px; margin: -10px 0 10px; 
	font-size: 120%; }
.runningorder div.times label { display: inline-block; margin-right: 40px; font-size: 90%; width: 200px; }
.runningorder div.times time { margin-left: 20px; color: #222; }
.runningorder p { margin: 0 10px 10px; font-size: 120%; }
.runningorder div.current { border-left: 10px solid #F90; border-right: 10px solid #F90; margin: 0 -10px; }
.runningorder div.segment { margin-bottom: 40px; }
.runningorder div.notready { opacity: 0.5; }

div.sessiontag { display: block; padding: 8px 10px; font-size: 12px; 
	margin: 10px 0 10px; }


div.tips { width: 100%; font-size: 8.25pt; box-sizing: border-box; padding-right: 20px; }

table.segment.import { width: 100%; border-collapse: collapse; margin-bottom: 10px; 
	table-layout: fixed; }
table.segment.import td, table.segment.import th { padding: 4px 10px 4px 4px; }
table.segment.import th { background: #BBB; font-weight: normal; text-align: left; 
	color: white; padding-top: 10px; padding-bottom: 4px; white-space: nowrap; }
table.segment.import td { border-bottom: 1px solid #EEE; width: 1px; }
table.segment.import td span { display: block; overflow: hidden; text-overflow: ellipsis; 
	white-space: nowrap; }
table.segment.import td sup { display: inline-block; color: #FFF; vertical-align: initial; font-size: 100%; 
	background: #F90; padding: 0px 4px; border-radius: 10px; cursor: help}
table.segment.import tbody tr:nth-child(even) td { background: #F4F4F4; }

body.fixed.layout-horiz #lefthalf, body.fixed.layout-horiz #righthalf {
	width: 50%; position: absolute; height: 100%; overflow: hidden;
	left: 0; top: 0; box-sizing: border-box; padding: 10px; margin: 0;
}
body.fixed.layout-horiz #righthalf { left: 50%; }
body.fixed.layout-horiz #content { overflow: hidden; }
body.fixed.layout-horiz #righthalf ul.segments {
	position : absolute; top: 56px; height: calc(100% - 65px); width: 100%;  
	overflow: auto; left: 0; box-sizing: border-box; padding: 0 10px; 
}
body.fixed.layout-horiz #lefthalf ul.segment {
	position: absolute; top: 88px; height: calc(100% - 108px); width: 100%; 
	overflow: auto; left: 0; box-sizing: border-box; padding: 0 10px; 
}
body.fixed.layout-vertical #lefthalf, body.fixed.layout-vertical #righthalf {
	width: 100%; margin-right: 0; 
}

table.listview { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
table.listview th { background: #DDD; font-weight: normal; text-align: left; padding: 8px 10px 6px 4px; 
	border-right: 1px solid white; font-size: 90%; }
table.listview th:last-child { border-right: none; }
table.listview td { padding: 4px 10px 4px 4px; }
table.listview td:last-child { padding-right: 4px; }
table.listview tr:hover td { background: #EEE; }
table.listview.settings tbody td { cursor: pointer; }
table.listview td.actions { text-align: right; padding-right: 0; }
table.listview td.actions a.action { padding: 5px; position: relative; top: -2px; }