canvas { 
		display: inline-block;
background: #202020;

height: 100%;
box-shadow: 0px 0px 10px #23662d;
margin-bottom: 15px;
	}
	.top-head {
		position:absolute;
		left: 50%;
		top:20px;
		width:700px;
		margin-left:-350px;
		display:none;
		
		
		
	}
	#controls {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		
	}
	#record { height: 15vh; }
	#record.recording { 
		background: red;
		background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
		background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
		background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
	}
	#save, #save img { height: 10vh; }
	.save_inactive { opacity: 0.25;}
	.save_active { opacity: 1;}
	
	#viz {
		height: 80%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	@media (orientation: landscape) {
		body { flex-direction: row;}
		#controls { flex-direction: column; height: 100%;}
		#viz { height: 100%; width: 90%;}
	}
	
	.timer{
		background: #202020;
width: 100%;

box-shadow: 0px 0px 10px #23662d;
margin-bottom: 15px;
padding: 15px 10px 15px 10px;

}
	
	
	
	@import "bourbon";

$color_purple: #5133AB;
$color_red: #AC193D;
$color_orange: #DC572E;
$color_green: #00A600;
$color_blue: #2672EC;

$base_font_size: 14px;
$base_line_height: 1.5em;
$text_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$display_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

body {
	font-family: $text_font_family;
	font-size: $base_font_size;
	line-height: $base_line_height;
	font-weight: 400;
}

p, span, a, ul, li, button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

strong {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $display_font_family;
	line-height: $base_line_height;
	font-weight: 300;	
}

strong {
  font-weight: 400;
}

body {
  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  font-weight: 400;
}

p, span, a, ul, li, button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5em;
  font-weight: 300;
}

strong {
  font-weight: 400;
}

.tile {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
}
.tile .title {
  margin-top: 0px;
}
.tile.ALL, .tile.AFTERNOON, .tile.red, .tile.MORNING, .tile.green {
  color: #fff;
}
.tile.ALL {
  background: #5133AB;
}
.tile.ALL:hover {
  background: #3e2784;
}
.tile.red {
  background: #AC193D;
}
.tile.red:hover {
  background: #7f132d;
}
.tile.green {
  background: #00A600;
}
.tile.green:hover {
  background: #007300;
}
.tile.AFTERNOON {
  background: #2672EC;
}
.tile.AFTERNOON:hover {
  background: #125acd;
}
.tile.MORNING {
  background: #DC572E;
}
.tile.MORNING:hover {
  background: #b8431f;
}
.tile.blue {
  background: #2672EC;
}
.tile.blue:hover {
  background: #125acd;
}
.tile.orange {
  background: #DC572E;
}
.tile.orange:hover {
  background: #b8431f;
}
.tile.purple {
  background: #5133AB;
}
.tile.purple:hover {
  background: #3e2784;
}
.tile.white {
  background: #EEEEEE;
  color:#000000;
}
.tile.purple:hover {
  background: #FFFFFF;
}
.tile.white {
  background: #66666;
    color:#000000;

}
.tile.purple:hover {
  background: #777777;
}
.tile.yellow {
  background: #66666;
    color:#000000;

}
.container {

    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.board {
   
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.board div {
  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.board .front {
 backface-visibility: hidden;
}
.board .back {
  position: absolute;
top: 0px;
left: 0px;
width: 100%;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.board.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
	 backface-visibility: hidden;
}

.btn span.glyphicon {    			
	opacity: 0;				
}
.btn.active span.glyphicon {				
	opacity: 1;				
}


/* draggable targets */
[data-draggable="target"]
{
    float:left;
    list-style-type:none;
    
    width:100%;
    height:7.5em;
    overflow-y:auto;
    
    margin:0 0.5em 0.5em 0;
    padding:0.5em;
    
    border:2px solid #888;
    border-radius:0.2em;
    
    background:#ddd;
    color:#555;
	height: 300px;
	
}

/* drop target state */
[data-draggable="target"][aria-dropeffect="move"]
{
    border-color:#68b;

    background:#fff;
}

/* drop target focus and dragover state */
[data-draggable="target"][aria-dropeffect="move"]:focus,
[data-draggable="target"][aria-dropeffect="move"].dragover
{
    outline:none;
    
    box-shadow:0 0 0 1px #fff, 0 0 0 3px #68b;
}

/* draggable items */
[data-draggable="item"]
{
    display:block;
    list-style-type:none;
    
    margin:0 0 2px 0;
    padding:0.2em 0.4em;
    
    border-radius:0.2em;
    
    line-height:1.3;
}

/* items focus state */
[data-draggable="item"]:focus
{
    outline:none;
    
    box-shadow:0 0 0 2px #68b, inset 0 0 0 1px #ddd;
}

/* items grabbed state */
[data-draggable="item"][aria-grabbed="true"]
{
    background:#8ad;
    color:#fff;
}

.hide
{
	display: none;
	
}

.script {
background-color: #FFF;
font-size: 22px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
height: 600px;
width: 100%;
color: #000;
padding: 10px;
line-height: 27px;
overflow:scroll;
}
#wavedisplay {

font-size: 47px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
height:300px;
width: 100%;

padding: 10px;

}
.buttons { 

padding-top: 36px;
}
.buttons a {

display:inline-block;
padding:15px;	
	
}

#PRODUCT_TITLE
{
	


    font-size: 27px;
    text-align: left;

    padding-bottom: 24px;


	
	
}
.fresh-table.full-color-orange {
    background: #ffb33b;
    background: -moz-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ff5221), color-stop(100%, #ffb33b));
    background: -webkit-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%);
    background: -o-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%);
    background: -ms-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%);
    background: radial-gradient(ellipse at center, #ff5221 0%, #ffb33b 100%);
    background-size: 250% 250%;
}

.fresh-table.full-color-blue {
    background: #ffb33b;
    background: -moz-radial-gradient(center, ellipse cover, #AA2BFF 0%, #898FFF 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #AA2BFF), color-stop(100%, #898FFF));
    background: -webkit-radial-gradient(center, ellipse cover, #AA2BFF 0%, #898FFF 100%);
    background: -o-radial-gradient(center, ellipse cover, #AA2BFF 0%, #898FFF 100%);
    background: -ms-radial-gradient(center, ellipse cover, #AA2BFF 0%, #898FFF 100%);
    background: radial-gradient(ellipse at center, #AA2BFF 0%, #898FFF 100%);
    background-size: 250% 250%;
}


.fresh-table {
    margin-top: 45px;
    box-shadow: -15px 27px 69px rgba(0,0,0,.30);
    margin-bottom: 50px;
}
.fresh-table {
    background-color: #FFFFFF;
    border-radius: 10px;
    color: #FFF;
}
.online { background-color:#009F03; }
.offline { background-color:#CF0003; }
audio {
	width: 258px;
height: 18px;	
}