/* ******************* */
/* Lab Report Homepage */

#labReportDisplay .experimentTakeAways {


}

#labReportDisplay .experimentTakeAways .experiment{
	width:304px;	
	height:172px;
	float:left;

	margin-bottom:15px;
	margin-top:0px !important;

	-webkit-transition-property:opacity, -webkit-transform;
	-webkit-transition-timing-function:ease-out, ease-out;
	-webkit-transition-duration:0.2s, 0.2s;

	-moz-transition-property:opacity, -moz-transform;
	-moz-transition-timing-function:ease-out, ease-out;
	-moz-transition-duration:0.2s, 0.2s;
	
	transition-property:opacity, transform;
	transition-timing-function:ease-out, ease-out;
	transition-duration:0.2s, 0.2s;

	-webkit-transform:scale(0.5);
	-moz-transform:scale(0.5);
	transform:scale(0.5);

	opacity:0;
}

#labReportDisplay .experimentTakeAways.visible .experiment {
	opacity:1;
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	transform:scale(1);	
}

#labReportDisplay .experimentTakeAways .experiment:nth-of-type(1) {
	-webkit-transition-delay:0.1s;
	-moz-transition-delay:0.1s;
	transition-delay:0.1s;	
}
#labReportDisplay .experimentTakeAways .experiment:nth-of-type(2) {
	-webkit-transition-delay:0.2s;
	-moz-transition-delay:0.2s;
	transition-delay:0.2s;	
}
#labReportDisplay .experimentTakeAways .experiment:nth-of-type(3) {
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	transition-delay:0.3s;	
}
#labReportDisplay .experimentTakeAways .experiment:nth-of-type(4) {
	-webkit-transition-delay:0.4s;
	-moz-transition-delay:0.4s;
	transition-delay:0.4s;	
}

#labReportDisplay .experimentTakeAways .experiment:nth-of-type(even) {
	margin-left:24px;	
}

#labReportDisplay .experimentTakeAways .experiment .title { 
	width:100%;
	height:28px;
	text-align:left;
}

#labReportDisplay .experimentTakeAways .experiment .title .weblabIcon {
	float:left;
	width:30px;
	height:30px;	
	margin-top:-8px;
	margin-right:8px;
} 

#labReportDisplay .experimentTakeAways .experiment .title .weblabIcon.orchestra {
	height:27px;
	width:24px;
}

#labReportDisplay .experimentTakeAways .experiment .title .weblabIcon.periscopes {
	width:51px;
	height:20px;
	margin-top:-1px;
}

#labReportDisplay .experimentTakeAways .experiment .title .weblabIcon.robots {
	width:35px;
	height:20px;	
	margin-top:-2px;
}

#labReportDisplay .experimentTakeAways .experiment .title .weblabIcon.visualiser {
	width:26px;
	height:31px;
	margin-top:-13px;
}

#labReportDisplay .experimentTakeAways .experiment .title h4 {	
	height:17px;
	overflow: hidden;	
	margin-left:10px;
	border-bottom:1px solid #3E4544;
	font-weight: normal;
	-webkit-text-stroke: 0.2px #3E4544;
	letter-spacing:0px;
	line-height:15px;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails {
	width:304px;
	height:125px;	
	text-align:left;
	overflow: hidden;

	position: absolute;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail{
	width:147px;
	height:115px;

	text-align: center;
	cursor:pointer;
	position: absolute;

	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	transition:opacity 0.5s;

	pointer-events:none;

	opacity: 0;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.visible {
	opacity:1;		
	pointer-events:auto;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.loading {
	opacity:0.2;		
	pointer-events:none;
}
#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.loading:nth-of-type(2) {
	left:152px;
}


#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.staticImage.border {
	width:141px;
	height:109px;
	border:3px solid white;
	overflow: hidden;
}
/*#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.staticImage.border { margin-left:3px;}*/
/*#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.staticImage.border:nth-of-type(even) { margin-left:161px;}*/

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail img {
	width:141px;
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	transition:opacity 0.2s;
	opacity:0;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.loaded img {
	opacity: 1;
}

#labReportDisplay .experimentTakeAways .experiment#periscopes .thumbnails .thumbnail img {
	width:auto;
	height:115px;
}


#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.visible img:hover { opacity:0.8; }

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.border {
	
	background: #FAFAFA; /* Old browsers */
	/* @alternate */ background: -moz-linear-gradient(top,  #FAFAFA 0%, #f0f2f2 100%); /* FF3.6+ */
	/* @alternate */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#f0f2f2)); /* Chrome,Safari4+ */
	/* @alternate */ background: -webkit-linear-gradient(top,  #FAFAFA 0%, #f0f2f2 100%); /* Chrome10+,Safari5.1+ */
	/* @alternate */ background: -o-linear-gradient(top,  #FAFAFA 0%, #f0f2f2 100%); /* Opera 11.10+ */
	/* @alternate */ background: -ms-linear-gradient(top,  #FAFAFA 0%, #f0f2f2 100%); /* IE10+ */
	/* @alternate */ background: linear-gradient(top,  #FAFAFA 0%, #f0f2f2 100%); /* W3C */

}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail img.vectorDrawing:hover {
	opacity: 0.5;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail img.experimentDataVisualiser {
	height: 115px;
	width: auto;

} 


#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail:nth-of-type(even) {
	/*margin-left:5px;*/
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty.prompt {
	text-align:center;
	border:none;
	background-image: url("../../images/common/xbox-grey-noDiag.svg");
}
#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty .promptHolder { display:none; }

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty.prompt .promptHolder {
	display:inline-table;	
	width:100%;
	height:100%;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty .prompt {
	width:120px;
	display:table-cell;
	vertical-align:middle;
	top:51%;

	padding:10px;
	margin:auto;	
	margin-top:15px;

	opacity:0;

	-webkit-transition:opacity 0.1s;	
	-webkit-transition-delay:0s;
	-moz-transition:opacity 0.1s;
	-moz-transition-delay:0s;	
	transition:opacity 0.1s;
	transition-delay:0s;
	
}
#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty .prompt p {
	opacity: 1 !important;

	color: #5C6665 !important;

	margin: 0px !important;
	-webkit-text-stroke:0px #5C6665 !important;

	-webkit-transition: none 0.4s ease-out 0.2s !important;
	-moz-transition: none 0.4s ease-out 0.2s !important;

	-webkit-transform: translateY(0px) !important;
	-moz-transform: translateY(0px) !important;
	transform: translateY(0px) !important;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty:hover .prompt {
	opacity: 1;	
	-webkit-transition:opacity 0.5s;	
	-webkit-transition-delay:0.1s;
	-moz-transition:opacity 0.5s;
	-moz-transition-delay:0.1s;	
	transition:opacity 0.5s;
	transition-delay:0.1s;
}



#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .mask {
	position: absolute;
	width:145px;
	height:51%;
	overflow: hidden;

	-webkit-transition:height 0.2s;
	-moz-transition:height 0.2s;
	transition:height 0.2s;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .mask .placeholderBoxContent {
	position: absolute;
	top:0px;
	left:-1px;
	background-image: url("/files/images/common/xbox-grey-diagonals.svg");	
	background-position:top left;
	width:147px;
	height:115px;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail.empty:hover .mask {
	height:20%;	
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .mask.top {
	top:0px;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .mask.bottom {
	bottom:0px;
	background-position:bottom left;
}
#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .mask.bottom .placeholderBoxContent{
	bottom:0px;
	top:auto;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .processingPrompt {
	/*width:144px;
	height:113px;*/
	width:140px;
	height:110px;

	/*border:1px solid #77807F;*/

	display:table;

	margin:auto;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .processingPrompt.orchestra {
	background:url("/files/images/common/labReport/videoProcessing-orchestra.jpg");
}
#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .processingPrompt.sketchbots {
	background:url("/files/images/common/labReport/videoProcessing-sketchbots.jpg");
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .processingPrompt h6 {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-left:10px;
	padding-right:10px;
	font-size:12px;

	color:#EEEEEE;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .processingPrompt .mask {
	height:48px;
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .playButton {
	position: absolute;
	top:0px;
	width:100%;
	height:100%;

	background-image:url("/files/images/common/labReport/thumbnail-video-playButton.svg");
	background-repeat:no-repeat;
	background-position:50% 50%;

	background-color:rgba(0,0,0,0.3);

	-webkit-transition-property:-webkit-transform, opacity;
 	-webkit-transition-duration:0.2s, 0.1s;

 	-webkit-transform:scale(1);
	
}

#labReportDisplay .experimentTakeAways .experiment .thumbnails .thumbnail .playButton:hover {
	-webkit-transform:scale(1.05);
}

#labReportDisplay .experimentTakeAways .experiment .nav {
	position: absolute;
	right:0px;
	top:151px;
}

#labReportDisplay .experimentTakeAways .experiment .nav button {
	width:18px;
	height:18px;
	padding:0px;

	float:right;
	background-color:white;
	background-image:url("/files/images/common/back-forward-arrows.png");
	background-repeat:no-repeat;
	background-position:0px -18px;

	opacity: 0.7;

	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	transition:opacity 0.2s;
}

#labReportDisplay .experimentTakeAways .experiment .nav button:hover {
	opacity: 1;		
}

#labReportDisplay .experimentTakeAways .experiment .nav button.forward { background-position:-17px -18px; }
#labReportDisplay .experimentTakeAways .experiment .nav button.inactive.forward { background-position: -17px 0px; }
#labReportDisplay .experimentTakeAways .experiment .nav button.back { background-position:0px -18px; margin-right:5px; }
#labReportDisplay .experimentTakeAways .experiment .nav button.back.inactive { background-position:0px 0px; }
#labReportDisplay .experimentTakeAways .experiment .nav button.inactive { pointer-events:none; }


#labReportDisplay .experimentTakeAways .experiment .spinnerLayer {
	position: absolute;
	width: 100%;
	top: 72px;

	opacity: 0;

	-webkit-transition-property:opacity, -webkit-transform;
	-webkit-transition-duration:0.5s;
	-moz-transition-property:opacity, -moz-transform;
	-moz-transition-duration:0.5s;
	transition-property:opacity, transform;
	transition-duration:0.5s;

	-webkit-transform:scale(0.5);
	-moz-transform:scale(0.5);
	transform:scale(0.5);

	pointer-events:none;
}

#labReportDisplay .experimentTakeAways .experiment .spinnerLayer.visible {
	opacity:1;

	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	transform:scale(1);
}

#labReportDisplay .experimentTakeAways .experiment .spinner {

}

#labReportDisplay .footer {
	margin:auto;
	margin-top:20px;
	width:100%;

	-webkit-transition-property:opacity, margin-top;
	-webkit-transition-duration:0.5s;
	-moz-transition-property:opacity, margin-top;
	-moz-transition-duration:0.5s;
	transition-property:opacity, margin-top;
	transition-duration:0.5s;

	opacity:0;
	
	pointer-events:none;
	display:table;
}


#labReportDisplay .footer.visible {
	pointer-events:auto;
	opacity:1;
	margin-top:10px;
}

#labReportDisplay .footer .social {	
	/*width:542px;*/
	display:table-cell;
	vertical-align: top;
	padding-right:8px;
} 


#labReportDisplay .footer .social .link{
	float:left;
}

#labReportDisplay .footer #deleteAllContent {
	display: table-cell;
	vertical-align: middle;	
	padding-top:14px;
	/*width:90px;	*/
	text-align: right;
	padding-right:8px;
}

#labReportDisplay .footer .deleteAllContainer {
	height:30px;
}

#labReportDisplay .footer .deleteAllContainer:hover button.delete {
	background-image: url("/files/images/common/labReport/trash_small_rollover.svg");
}

#labReportDisplay .footer #deleteAllContent a {
	float:left;	
	margin-right:-10px;
	/*width:60px;*/
}
#labReportDisplay .footer #deleteAllContent a p{
	padding-top:1px;
	/*margin-left:10px;*/
}
#labReportDisplay .footer .deleteAllContainer:hover a {
	color: #3e4544;
}

.otherUser #labReportDisplay .footer #deleteAllContent {
	display:none;

}