﻿

* {
	-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 */
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
    -ms-touch-action: none; /* Disable touch behaviors, like pan and zoom */
}


body
{
	color:#FFF;
	background-color:#000;
	margin: 0 0;
	padding: 0 0;
	font-family:helvetica, arial sans-serif;
    max-height:700px;
    -ms-overflow-style:none;
    overflow:hidden;
    background-position:0 0;
    background-repeat:no-repeat;
}

@media screen and (-ms-view-state: snapped) {
    body {
        margin-top:80px;
        background-position:50% 0;
        background-repeat:no-repeat;

    }
}

#screen {
    margin: 12px 12px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    position:absolute;
    height:100%;
    width:100%;
}

#canvasHolder
{
    margin:16px auto;
    /* background:Blue; */
    flex-basis:200px;
}

#controlDiv {
    /* margin:16px auto; */
    /* background:Green; */
    flex-basis: 64px;
    width:100%;
}

#tempoSlider {
    width:100%;
    border:2px #8e1137 solid;
    /* margin:16px auto; */
    border-radius:8px;
    /* background:Red; */
    flex-basis:32px;
    height:32px;
}

#thumbGrip {
    position:relative;
    width:64px;
    height:100%;
    background-color:#770e2e;
    border-radius:0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin:0px 0;
}
