/*

	screen.css

	Stylesheet for slide scanning system

	============================================================================
	Author: Alex Wright, © 2019
 */

.shadowBox {
	margin:						20px 10px;
	padding:					10px;
	box-shadow: 				0px 5px 5px #222222;
}


.svgHover {
	cursor: pointer;
}

.svgHover:hover {
	filter: brightness(150%);
}


/*
 	Layout:
	===============================================================================
 */

/* Work Around Default Padding Issues in Browsers: */
* {
	margin:					0px;
	padding:				0px;
	font-family: 			Montserrat, Century Gothic, sans-serif;
	font-weight:			normal;
	color:					#FFFFFF;
}

html,body {

    background-color:           #333333;
    /*background-image:           url(../gfx/bk/whitetile.png);*/
    background-position:        top center;
    background-repeat:          repeat;
    text-align:            		center;
	margin:						0;
	padding:					0;
	height:						100%;

	-webkit-font-smoothing: antialiased;
	font-smooth:			always;
	font-size:				100%;
}

/*
	Popup Stuff
*/

.popUpBox{
    display: 					none;
    background-color: 			#FFFFFF;
	top:						50%;
	left:						50%;
    width: 						600px;
	height: 					400px;
	margin-top: 				-200px; /* Half the height */
	margin-left: 				-300px; /* Half the width */

    z-index: 					1001;
	box-shadow: 				0px 5px 10px #555555;
}



.popUpTitle {
    width: 						100%;
}

.popUpTitleClose{
    float: 						right;
    margin-right: 				5px;
    margin-top: 				5px;
}

.data {
    height: 					auto;
    overflow: 					hidden;
    padding: 					25px;
    width: 						550px;
}

.alertBar {
	width: 						100%;
	text-align: 				center;
	font-size: 					1.5em;
	color: 						#660000;
	background-color: 			#FF6666;
}

.successBar {
	width: 						100%;
	text-align: 				center;
	font-size: 					1.5em;
	color: 						#006600;
	background-color: 			#99FF99;
}

.successBar:hover {
	background-color: 			#CCFFCC;
}


/*
	Main Content
*/

#wrap {
	width:						100%;
	min-height:					100%;
	position:					relative;
}

header {
	padding:					10px;
	width:						auto;
}

nav {
	color:						#FFFFFF;
	padding:					5px 10px;
	width:						auto;
    text-align:            		left;
	/*box-shadow: 				0px 5px 10px #888888;*/
}


#control {
	background-color:			#FFFFFF;
	text-align:					left;
	padding:					10px;
	/*
	float:						left;
	margin-right:				10px;
	width:						20%;
	height:						100%;
	*/

	overflow:					auto;
	position:					absolute;
	display:					block;
	top:						105px;
	left:						10px;
	right:						80%;
	bottom:						80px;

	box-shadow: 				0px 5px 10px #888888;
}

#controlPop {
	background-color:			#FFFFFF;
	text-align:					left;
	float:						left;
	padding:					10px;
	margin-right:				10px;
	left:						21%;
	height:						100%;
	box-shadow: 				0px 5px 10px #888888;

}

#main {

	overflow:					auto;
	position:					absolute;
	display:					block;
	top:						105px;
	right:						10px;
	left:						21%;
	bottom:						80px;

	text-align:					center;
	padding:					10px;

}

.mainContent {
	width: 						auto;
	padding:					10px;
}


.homeScreen {
	overflow:					auto;
	position:					absolute;
	display:					block;
	top:						95px;
	left:						0px;
	right:						0px;
	bottom:						40px;
	padding:					10px;
	text-align:					center;
}

.loginWrap {
	width:						600px;
	margin:						0 auto;
	text-align:					center;
	padding-top: 5em;
}

/*
	Stops JQuery placeholder IE fudge from being black
*/
.placeholder {
	color:						#888888;
}

.homeWrap {
	width:						800px;
	margin:						0 auto;
	text-align:					center;
}



footer {
	color:						#FFFFFF;

	position:					absolute;
	bottom:						0;
	height:						17px;
	padding:					8px 0px 10px 0px;
	width:						100%;

    text-align:            		center;
	font-size:					0.8em;
}

#clear {
	clear:						both;
}

#conditionalClear {
	clear:						none;
}

/*

	List ItemRenderers

	===========================================================================
*/

/* Home Links to main parts of the site */

.homeList {
	clear:						left;
	float:						left;
	list-style:					none;
	margin:						0px;
	padding:					0px;
	text-align:					center;
}

.runList {
	clear:						left;
	float:						left;
	list-style:					none;
	margin:						0px;
	padding:					0px;
	text-align:					center;
}

.loginItem {
	background-color:			#FFFFFF;
	text-align:					left;
	float:						left;
	padding:					0px;
	margin:						40px auto;
	width:						600px;
	/*box-shadow: 				0px 5px 10px #888888;*/
}


.projectItem {
	text-align:					centre;
	padding:					0px;
	margin:						20px;
	width:						740px;
	/*box-shadow: 				0px 5px 10px #888888;*/
}

/* ========================================================================== */


.runWrap {
	width:						100%;
	max-width:					1200px;
	min-width: 					800px;
	margin:						0 auto;
	text-align:					center;
}

.runItem {
	background-color:			#FFFFFF;
	text-align:					centre;
	padding:					0px;
	margin:						0px;
	width:						100%;
	/*box-shadow: 				0px 5px 10px #888888;*/
}


.feedFrame {
	padding:					10px 0px 20px 0px;
	margin:						10px;
	/*width:						55%;*/

	width: 						700px;
	/*min-width: 					700px;*/
	float: 						left;
	/*background-color:			#FFFFFF;*/
	/*box-shadow: 				0px 5px 10px #888888;*/
}

.detailFrame {
	padding:					10px 0px 20px 0px;
	margin:						10px;
	/*width:						42%;*/
	width: 						450px;
	float: 						left;
	/*background-color:			#FFFFFF;*/
	/*box-shadow: 				0px 5px 10px #888888;*/
}



.runWrapVert {
	width:						100%;
	max-width:					700px;
	min-width: 					700px;
	margin:						0 auto;
	text-align:					center;
}

.feedFrameVert {
	padding:					10px 0px;
	margin:						10px 0px;
	/*width:						55%;*/

	width: 						100%;
	/*min-width: 					700px;*/
	/*background-color:			#FFFFFF;*/
	/*box-shadow: 				0px 5px 10px #888888;*/
}

.detailFrameVert {
	padding:					10px 0px 20px 0px;
	margin:						10px;
	/*width:						42%;*/
	width: 						700px;
	/*background-color:			#FFFFFF;*/
	/*box-shadow: 				0px 5px 10px #888888;*/
}


/* ========================================================================== */


.homeContent {
	margin: 10 auto;
	width: 100%;
	max-width: 600px;
	padding:20px;
}

.secret {
	border: 5px dashed #888888;
}

.existingUsers {
	width: 90%;
	max-width: 100%;
	font-size: 1.2em;
	padding: 10px;
	margin: 8px 0;
	color: #000000;
}

.projectItemInner {
	padding:	 				10px;
}

.projectSelect {
	margin:						10px 0px;
	width: 						100%;
	font-size:					1.5em;
}

.projectOption {
	width: 						100%;
	font-size:					1.5em;

}

.homeItem {
	background-color:			#FFFFFF;
	text-align:					left;
	float:						left;
	padding:					10px;
	margin:						20px;
	width:						340px;
	/*box-shadow: 				0px 5px 10px #888888;*/
}


.homeList {
	list-style-type:			none;
}

.homeRenderer {
	margin:						5px 0px;
	padding:					5px;
	/*border-bottom:				2px solid #6600CC;*/
}



/*

	Manage TMAs
	===========================================================================
*/



/* List ItemRenderers */

.tmaList {
	list-style-type:			none;
}

.tmaRenderer {
	margin:						10px 5px;
	padding:					10px;
	border-top:					2px solid #339933;
	/*box-shadow: 				0px 5px 10px #888888;*/
}

#addTMA {
	display:					none;
	padding:					10px;

}

#mapDragTarget {

	display:					block;
	position:					absolute;
	top:						170px;
	bottom:						20px;
	left:						20px;
	right:						20px;

	background-color:           #EEEEEE;
    background-image:           url(gfx/bk/whitetile.png);
    background-position:        top center;
    background-repeat:          repeat;
	box-shadow:         		inset 0px 5px 10px #888888;


	border: 					5px solid #EEEEEE;
}
#mapDragTarget:hover {
	border: 					5px solid #339933;
}


#addSlide {
	display:					none;
	padding:					10px;


}

#slideCanvas {
	background-color:           #EEEEEE;
    background-image:           url(gfx/bk/whitetile.png);
    background-position:        top center;
    background-repeat:          repeat;
    text-align:            		center;

	display:					block;

	box-shadow:         		inset 0px 5px 10px #888888;
}



/*

	Video Rotation

	===========================================================================
*/

.rotateVid {
	-moz-transform:		rotate(180deg);
	-webkit-transform:	rotate(180deg);
	-o-transform:		rotate(180deg);
	-ms-transform:		rotate(180deg);
	transform:			rotate(180deg);
}


/*

	Login Formatting

	===========================================================================
*/

.loginForm {
	padding:					20px 40px;
	margin:						20px auto;
	width:						400px;
	/*box-shadow: 				0px 5px 10px #222222;*/
}






/*

	Text

	===========================================================================
*/

h1 {
	text-align:					left;
	color:						#FFFFFF;
	padding:					0px;
}

h1 a {
	text-align:					left;
	color:						#FFFFFF;
	padding:					0px;
	text-decoration:			none;
}

h2 {
	padding:					5px;
}

h3 {
	margin:						0px;
	padding:					5px;
}

h3 a{
	cursor:						pointer;
	font-weight:				bold;
	text-decoration:			none;
}

h3 a:hover{
	font-weight:				bold;
	text-decoration:			underline;
}

p {
	padding:					5px;
}

p a {
	color:						#FFFFFF;
	font-weight:				normal;
	text-decoration:			none;
}

a p {
	color:						#FFFFFF;
	font-weight:				normal;
	text-decoration:			none;
}

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

p a.navlink {
	font-weight:				bold;
}

.homeHead {
	text-align:					center;
	color:						#000000;
	padding:					30px 0px;
}





.note {
	font-size:					0.8em;
	font-style:					italic;
	text-align:					center;
	color:						#888888;
}

strong {
	font-weight:				bold;
}

.nav {
	color:						#FFFFFF;
	padding:					0px;
}


.centre {
	text-align:					center;
}

.left {
	text-align:					left;
}


.bold{
	font-weight:				bold;
}

/*

	Buttons

	===========================================================================
*/

button {

	margin:						0px 10px;
	cursor:						pointer;
	font-size:					1em;
	/*font-weight:				bold;*/
	padding:					5px 10px 5px 10px;
	color: 						#FFFFFF;
	border-style: 				none;

	border-radius:				5px;
	-moz-border-radius:			5px;
	box-shadow: 				0px 3px 5px #222222;

	/*background-color:			#DD6666;*/
}

.linkButton {
	width:						80%;
	margin:						10px auto;
	padding:					10px;
	font-size:					1.5em;
	/*font-weight:				bold;*/
}





button.loginButton {
	font-size:					1.5em;
	margin:						20px 0px 10px 0px;
	width:						100%;
	padding:					10px;
}

button.addButton {
	font-size:					1.5em;
	margin:						10px 0px 25px 0px;
	padding:					10px 20px;
	background-color:			#339933;
	box-shadow: 				0px 3px 5px #112211;
}

button.addButton:hover {
	background-color:			#66CC66;
}


button.deleteButton {
	font-size:					1.5em;
	margin:						10px 0px 25px 0px;
	padding:					10px 20px;
	background-color:			#993333;
	box-shadow: 				0px 3px 5px #221111;
}

button.deleteButton:hover {
	background-color:			#CC6666;
}

/*
	Mini Buttons
*/

button.addButtonMini {
	font-size:					1em;
	margin:						10px 0px 5px 0px;
	padding:					5px 0px;
	width: 						100%;
	background-color:			#339933;
	box-shadow: 				0px 3px 5px #112211;
}

button.addButtonMini:hover {
	background-color:			#66CC66;
}



button.deleteButtonMini {
	font-size:					0.8em;
	margin:						0px;
	padding:					5px;
	background-color:			#993333;
	box-shadow: 				0px 3px 5px #221111;
}

button.deleteButtonMini:hover {
	background-color:			#CC6666;
}



button.disabled {
	cursor:						default;
	color: 						#888888;
	background-color:			#555555;
}

button.disabled:hover {
	background-color:			#555555;
}



/*

	Form items

	===========================================================================
*/



input {
	background-color: 			#222222;
	color:						#AAAAAA;
	border-radius: 				4px;
}


input.login {
	font-size:					1.5em;
	width:  					100%;
	margin:						10px 0px;
	padding:					5px;
	background-color: 			#222222;
	color:						#AAAAAA;
}

input.form {
	font-size:					1.5em;
	width:  					60%;
	margin:						20px 10px 10px 10px;
	padding:					5px;
}

select.form {
	font-size:					1.5em;
	width:  					60%;
	margin:						20px 10px 10px 10px;
	padding:					5px;
}

span.form {
	font-size:					1.5em;
	margin:						20px 0px 10px 0px;
	padding:					5px 0px;
}


input.data {
	font-size:					1.2em;
	width:  					98%;
	margin:						10px 0px;
	padding:					5px;
}


select {
	font-size:					1.5em;
	width:  					100%;
	margin:						10px 0px;
	padding:					5px;
	background-color: 			#222222;
	color:						#AAAAAA;
}





hr {
	border-style:			solid;
	height:					1px;
	margin:					10px;
}
hr.title {
	margin: 20px 10px 10px 10;
}





.LABref {
    color:                  #AAAAAA;
    font-size:              1.2em;
	padding:				5px;
}

.LABrefVert {
    color:                  #AAAAAA;
    font-size:              1.2em;
	padding:				5px;
	margin: 0 auto;
}

.LABrefForm {
    color:                  #AAAAAA;
    font-size:              0.9em;
	padding:				2px;
    width:                  70%;
	text-align:center;
}


.dEbox {
	width: 60%;
	font-size: 2em;
	margin: 0 auto;
	/*box-shadow: 0px 5px 10px #888888;*/
	/*border: 3px solid #FFFFFF;*/
}

.dE_redBox {
    color:                  #663333;
    background-color:       #FF9999;
}

.dE_amberBox {
    color:                  #555533;
    background-color:       #FFFF99;
}

.dE_greenBox {
    color:                  #336633;
    background-color:       #99FF99;
}



.videoFeedHide {
	display: none;
}

.debugHide {
	display: none;
}



.graphBox {
	width: 90%;
	font-size: 2em;
	margin: 0 auto;
	/*box-shadow: 0px 5px 10px #888888;
	border: 3px solid #FFFFFF;*/
}

.canvasjs-chart-credit {
	display: none!important;
}

.canvasjs-chart-tooltip {
	padding: 					3px;
}

.ttipText {
	font-size:					0.8em;
	color:						#AAAAAA;
	padding: 					3px;
	margin:						0;
}


/*

	History Table

	===========================================================================

*/

th {
	border-bottom: 2px solid #AAAAAA;
}

.homeContentHistory {
	width: 1200px;
	margin: 0 auto;
}

.history {
	width: 100%;
	/*border: 5px solid #555555;*/
	border-collapse: collapse;
}

.history_header {

}

.history_header_cell {
	padding: 5px;
	border-bottom: 3px solid #AA88FF;
	font-weight: bold;
}

.history_cell {
	padding: 5px;
}

.deltaEcell {
	font-weight: bold;
}

.colourcell {
	margin: 10px;
	width: 50px;
	border-bottom: 5px solid #333333;
}

.cellLeft {
	text-align: left;
}

.cellRight {
	text-align: right;
}

.cellMid {
	text-align: center;
}

.numberCell {
	width: 85px;
}

.rgbCell {
	width: 65px;
}

.delCell {
	text-align: center;
	width: 30px;
	padding-left: 10px;
}


.graphBoxRecent {
	width: 600px;
	font-size: 2em;
	margin: 0 auto;
	/*box-shadow: 0px 5px 10px #888888;
	border: 3px solid #FFFFFF;*/
	padding-bottom: 20px;
}



/*

	screen sizes

	===========================================================================
*/

@media (max-width: 1080px) {

	.homeList {
		padding:				0px;
	}

	#conditionalClear {
		clear:					both;
	}

}



/*

	Toggle slider

	===========================================================================
*/

.labRefTable {
	width: 90%;
	margin: 20px auto;
}

.labrefNameInput {
	font-size: 1.5em;
	margin: 0;
	padding:5px;
	width: 100%;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #222222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgba(255,255,255, 0.8);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #AA88FF;
}

input:focus + .slider {
  box-shadow: 0 0 1px #AA88FF;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}



/*


*/


.devForm {
    color:                  #AAAAAA;
    font-size:              0.9em;
	padding:				2px 5px;
	text-align:				right;
}

.devFormSettings{
    color:                  #AAAAAA;
    font-size:              0.9em;
	padding:				2px 5px;
	text-align:				right;
}

.devFormCircle {
    color:                  #AAAAAA;
    font-size:              0.9em;
	padding:				2px 5px;
	text-align:				left;
}

.devInput {
	color:                  #AAAAAA;
    font-size:              0.9em;
	padding:				2px;
	text-align:				center;
}




/*



*/

.boxArea {
	width: 100%;
	margin: 0 auto;
}

.boxInner {
	text-align: center;
}


.testBoxOuter {
	display:				inline-block;
	wdith: auto;
}

.testBox {
	background-color: 		#333333;
	color: 					#333333;
	margin: 				5px;
    font-size:              230px;
	font-family: 			Arial;
	font-weight:			bold;
}


.LABref {
    color:                  #AAAAAA;
    font-size:              1.2em;
	padding:				5px;
}

.answerForm {
    color:                  #AAAAAA;
    font-size:              1.2em;
	padding:				5px 0px;
	margin: 				0 auto;
	width: 100%;
	text-align: center;
}

.answerBox {
	display:				inline-block;
    color:                  #AAAAAA;
    font-size:              1.2em;
	padding:				2px 0px;
	margin: 				5px;
	text-align:center;
}

button.answerButton {
	font-size:					1.5em;
	margin:						20px 0px 10px 0px;
	width:						700px;
	padding:					10px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.devBox {
	display:				inline-block;
	background-color: 		#292929;
	color: 					#FFFFFF;
	margin: 				5px;
	text-align: center;
	padding: 10px;
}

.statsTable {
	width: 					90%;
	margin: 				10 auto;
}


.devText {
	font-size:              0.95em;
	font-family: 			Consolas, "Courier new", monospace;
}

.devText.right {
	text-align: right;
}

.browserStatsTable {
	/*width: 					90%;*/
	margin: 				10 auto;
}

.statsColourBoxContainer {
	font-size:              0.95em;
	font-family: 			Consolas, "Courier new", monospace;
	margin: 				10 auto;

}

.statsColourBox {
	/*border: 			1px solid #292929;*/
	/*padding: 			10px;*/
	background-color: 	#222222;
	width: 				700px;
	margin: 			10 auto;
}



.homeMenu {
	width: 700px;
}

.homeMenuHalf {
	float: left;
	width: 50%;
}

.homeMenuHalfInner {
	margin: 10px;
}

.token {
	font-size: 1.8em;
}



.profileCell {
	font-size: 1.5em;
	padding: 5px 10px 5px 5px;
	text-align: right;
	color: #AAAAAA;
}


.smpteBox{
	width: 7cm;
	height: 7cm;
	display: 				table-cell;
	vertical-align:			middle;
}

.smpteBoxInner{
	width: 					5cm;
	height: 				5cm;
	margin: 0 auto;
}

.codeText {
	font-family: Consolas,"courier new", monospace;
	/*text-transform: uppercase;*/
	font-size: 1.1em;
}