#button {
	height: 115px;
}

#canvas {
	position: fixed;
	top:0;
	left: 0;
	background: #ffffff;

}
#slideout {
	position: fixed;
	top:5px;
	right: 0px;
	width: 40px;
	padding: 12px 0px;
	text-align: center;
	background:rgba(109,173,83,0.5);
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:  5px 0 0 5px;
	-moz-border-radius:  5px 0 0 5px;
	border-radius:  5px 0 0 5px;
	

}
#slideout_label {
	font-size:14px;
	/*rotate by 90 degrees*/
	/* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	
	}
#slideout_inner {

	position: fixed;
	right: -200px;
	top:50;
	overflow:scroll;
	background:rgba(109,173,83,0.5);
	width: 190px;
	padding: 5px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	text-align: left;
	-webkit-border-radius: 0 0 0 5px ;
	-moz-border-radius: 0 0 0 5px ;
	border-radius: 0 0 0 5px ;
	-webkit-overflow-scrolling: touch

}

#slideout_inner textarea {
	width: 200px;
	height: 240px;
	margin-bottom: 6px;
}


#slideout:hoover {
	left: 200px;
}

#slideout:hoover #slideout_inner {
	left: 0;
}



#goal {
	background:rgba(145,193,126,0.75);
	position: absolute;
	width: 50%;
	left: 25%;
	top: 25%;
	visibility: hidden;
	z-index:5;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius:  5px 5px 5px 5px;
	padding: 12px 12px;

}

#success {
	background:rgba(200,200,255,0.95);
	position: absolute;
	left: 40%;
	top: 25%;
	width: 20%;
	visibility: hidden;
	z-index:5;
	border: solid;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius:  5px 5px 5px 5px;


}

#successContent {
	text-align: center;
	padding: 10px;
	}



#alert {
	background:rgba(182,214,169,0.95);
	position: absolute;
	width: 50%;
	left: 25%;
	top: 25%;
	visibility: hidden;
	z-index:5;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius:  5px 5px 5px 5px;
	padding: 12px 12px;

}

#help{
	position: fixed;
	right: 10px;
	bottom: 10px;	
	cursor:help; 
	font-size: 34px;
	width: 34px;
	height: 34px;
	background:rgba(100,100,100,0.2);
	text-align:center;
	color: #444;

	border-color:#aaaaaa;
	border-style:ridge;
	border-width:3px;
	-webkit-border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	border-radius:  20px 20px 20px 20px;
	z-index:6;
	
	 /* http://stackoverflow.com/questions/5442226/css-vertical-align-not-working*/
	  /* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Opera, and Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;
}

#output{
	position: absolute;
	top:10px;
	left: 10px;
}

#warnings{
	position: fixed;
	bottom:0px;
	left: 200px;
	right: 200px;
	margin: auto;
	background:rgba(255,173,173,0.5);
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	padding: 10px;
	z-index: +1;

}

.link {
	color:#000055;
}