/*
	Weblab Icons

	@author Owen Hindley
*/


/* All icons */
.weblabIcon {	
	background-repeat:no-repeat;	
	background-position:center;	
	-webkit-background-size: 100% auto;
}

/* Experiment icons */
.weblabIcon.orchestra { background-image:url("/files/images/orchestra/orchestra-logo.svg"); }
.weblabIcon.labtags { background-image:url("/files/images/labtags/labtags-icon.svg"); }
.weblabIcon.robots { background-image:url("/files/images/robots/robots-icon.svg"); }
.weblabIcon.visualiser { background-image:url("/files/images/visualiser/visualiser-icon.svg"); }
.weblabIcon.periscopes { background-image:url("/files/images/scopes/periscopes-icon.svg"); }

.weblabIcon.outlineIcon.orchestra { background-image:url("/files/images/home/orchestra-icon-outline.svg"); }
.weblabIcon.outlineIcon.labtags { background-image:url("/files/images/home/labtags-icon-outline.svg"); }
.weblabIcon.outlineIcon.robots { background-image:url("/files/images/home/sandrobots-icon-outline.svg"); }
.weblabIcon.outlineIcon.visualiser { background-image:url("/files/images/home/visualiser-icon-outline.svg"); }
.weblabIcon.outlineIcon.periscopes { background-image:url("/files/images/home/periscopes-icon-outline.svg"); }
/* OHNOTE other icons to go in here */


/* General icons */
.weblabIcon.live { 
	/*background-image:url("/files/images/orchestra/live-icon.svg"); */
	display:block;
	width:20px;
	height:15px;

}

.weblabIcon.soundBars {
	background-image:url("/files/images/common/icons/soundBarsIcon.svg");
	width:11px;
	height:10px;	
	display:block;
	float:left;
	margin-right:8px;
	margin-left: 2px;
}


/* Collaboration icons */
.weblabIcon.collaborationIcon { 
	background-image:url("/files/images/common/icons/collaborationIcon.png");
}

/* Avatar icons */

/* Spinner */
.spinner {
    width: 38px;
    height: 38px;
	margin:auto;

	pointer-events:none;
    
    -webkit-animation: animateSpinner .79s steps(24, end) infinite;
    -moz-animation: animateSpinner .79s steps(24, end) infinite;
    animation: animateSpinner .79s steps(24, end) infinite;

    background-image: url("/files/images/common/spinner-white.png");   
}

.spinner.inactive {
	-webkit-animation:none;
	-moz-animation:none;	
	animation:none;
}

.white .spinner, .spinner.black {
	 background-image: url("/files/images/common/spinner-grey.png");
}


.spinnerSmall {
    width: 28px;
    height: 28px;
	margin:auto;

	pointer-events:none;
    
    -webkit-animation: animateSpinnerSmall .79s steps(24, end) infinite;
    -moz-animation: animateSpinnerSmall .79s steps(24, end) infinite;
    animation: animateSpinnerSmall .79s steps(24, end) infinite;

    background-image: url("/files/images/common/spinner-white-small.png");
}

.spinnerSmall.inactive {
	-webkit-animation:none;
	-moz-animation:none;	
	animation:none;
}

.white .spinnerSmall, .spinnerSmall.black {	
	background-image: url("/files/images/common/spinner-grey-small.png");
}




@-webkit-keyframes animateSpinner {
    from { background-position: 0px; }
    to { background-position: -912px; }
}

@-moz-keyframes animateSpinner {
    from { background-position: 0px; }
    to { background-position: -912px; }
}

@-webkit-keyframes animateSpinnerSmall {
    from { background-position: 0px; }
    to { background-position: -672px; }
}

@-moz-keyframes animateSpinnerSmall {
    from { background-position: 0px; }
    to { background-position: -672px; }
}