body {
	-moz-user-select: none;
	-webkit-user-select: none;
	background-color: white;
}
/* Disable default touch events on elements (Windows 8)*/
.upper-canvas, #protein-wrapper, #dragzone, #dropzone, .help-text {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: none;
}
.transparent {
   opacity: .5;
}
.hidden {
    display: none;
   /* opacity: .5;*/
}
.wide {
    width: 90%;
}
*:focus{
    outline: none;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
#content {
    position: absolute;
    width: 870px;
    height: 535px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /*display: none;*/
}
#canvas-wrapper {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
#canvas {
    position: absolute;
	border: 1px solid #00869F;
}
#canvasTop {
    position: absolute;
    top: 0px;
    right: 0px;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
#canvasBottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
#canvasGraph {
    position: absolute;
    bottom: 0px;
    right: 0px;
	z-index: 10;
	border: 1px solid #00869F;
	margin: 10px;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
	display: none;
}
#ui-blocker {
    position: absolute;
	background-color: white;
	opacity: .5;
    top: 140px;
    left: 0px;
    width: 150px;
    height: 255px;
    z-index: -100;
}
#ui-blocker2 {
    position: absolute;
	background-color: white;
	opacity: .5;
    bottom: 8px;
    left: 180px;
    width: 190px;
    height: 55px;
    z-index: -100;
}
#ui-wrapper {
    position: absolute;
    bottom: -2px;
    left: 0px;
}
.button-wrapper {
	width: 150px;
	text-align: center;
	background-color: #EFEFEF;
	border-radius: .5em;
	padding-bottom: 5px;
}
.button-wrapper h5 {
	margin: 0;
	padding-top: 5px;
	text-transform: uppercase;
}
#protein-wrapper {
    position: relative;
	width: 150px;
	height: 248px;
	background-color: #EFEFEF;
	border-radius: .5em;
	margin: 5px 0px;
}
#spacerA {
    height: 15px;
	width: 100%;
	text-align: center;
	padding-top: 5px;
}
#spacerP {
    height: 16px;
	width: 100%;
	text-align: center;
	padding-top: 6px;
}
#flipLeft, #flipRight {
	position: relative;
	top: -45px;
    height: 0px;
	width: 32px;
	z-index: 10;
	cursor: pointer;
	opacity: .5;
}
#flipLeft {
	left: 47px;
}
#flipRight {
	left: 120px;
}
#flipLeft:hover, #flipRight:hover {
	opacity: 1;
}
.protein {
	display:inline-block;
	width: 50%;
	margin: 0;
	padding: 0;
	text-align: center;	
	font-size: 11px;
	font-weight: bold;
}
.protein div {
	position: relative;
	height: 80px;
	margin: 0 auto;
	cursor: move;
	z-index: 1;
}
 .protein img {
	margin-top: 5px;
	padding: 0;
}
.protein p {
	margin-top: 4px;
	margin-bottom: 4px;
}
#dragzone {
    position: absolute;
    top: 145px;
    left: 0px;
	width: 870px;
	height: 250px;
	z-index: -1;
}
#dropzone {
    position: absolute;
    top: 0px;
    left: 170px;
	width: 700px;
	height: 535px;
	z-index: 0;
	cursor: move;
}
#btnGroup {
    position: absolute;
    top: 472px;
	left: 242px;
}
#resumeButton, #pauseButton {
    position: absolute;
    top: 472px;
	left: 180px;
	padding: 1px 0px;
	height: 50px;
	width: 50px;
}
#speedBtns {
	position: relative;
	top: 10px;
    float: left;
	width: 140px;
	padding: 0;
	margin: 0;
	display: none;
}
#graph {
	float: left;
}
#reset {
    position: absolute;
	top: 5px;
	left: 183px;
}
#help {
	position: absolute;
    top: 5px;
	right: 10px;
}
/*Help message text box*/
.help-text {
    border: 1px #999 solid;
    background-color:#FFFFE5;
    padding:12px 16px 16px 16px;
    border-radius: 8px;
    font: 14px Arial, Helvetica, sans-serif;
    text-align: left;
    z-index: 1000;
    cursor: move;
	-webkit-transform: translate3d(0, 0, 0);
	display: none;
}
#message-pt, #message-at, #message-ct  {
    position: absolute;
	top: 13px;
	left: 430px;
    width: 300px;
	z-index: 1000;
}
#messageDragIcon {
	position: absolute;
	top: 2px;
	right: 3px;
	border: none;
	opacity: 0.6;
	margin: 3px;
	height: 28px;
	width: 22px;
}