/*
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(../font/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../font/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(../font/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}

html { font-size:100%; } 

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 300;
    font-size: 15px;
    height: 100%;
    /* Disables long keypress */
    -webkit-touch-callout: none !important;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    color:#000;
    background:#fff;
	
	overflow: hidden;
	
	margin:0;
	padding:0;
}

.pt-perspective {
}

.app-ui{
    position:absolute;

    width: 100%;
    height: 100%;
    text-align:center;
	
		margin:0;
		padding:0;
}

.dial-section{
	position: absolute;	
	top: 30%;
	left:0;
	width:100%;
	height:70%;
	}
.dial-section #rotation{
	background-image: url('../img/compass_rotation.png');
	
	width: 100%;
	height:100%;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	/*
	-webkit-transition: all 0.7s ease-out;
	-webkit-transform: rotate(0deg);
	*/
	-moz-transition: all 0.7s ease-out;
	-moz-transform: rotate(0deg);
}

.dial-section #overlayrotation{
	background-image: url('../img/compass_rotation_overlay.png');
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	/*
	-webkit-transition: all 0.7s ease-out;
	-webkit-transform: rotate(0deg);
	*/
	-moz-transition: all 0.7s ease-out;
	-moz-transform: rotate(0deg);
	z-index:999;
}

.dial-section #overlaylevel{
	background-image: url('../img/level_overlay.png');
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	-moz-transition: all 0.7s ease-out;
	z-index:99;
}

.dial-section #overlaylevel{
	/*
	background-image: url('../img/overlay.png');
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	z-index:9;
	*/
}


.data-section{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:30%;
		margin:0;
		padding:0;
	}

.data-section .top{
	height:70%;
	position:relative;
	}

.data-section .bottom{
	height:30%;
	position:relative;
	}
	

.data-section .top .left{
	position:absolute;
	left:0;
	width:60%;
	height:100%;
	text-align: right;
	display:table;
	}

.data-section .top .left #angle{
	font-size: 55pt;
	display:table-cell; 
	vertical-align:middle;
}

.data-section .top .right{
	position:absolute;
	left:60%;
	width:40%;
	height: 100%;	
	text-align: left;
	display:table;
}

.data-section .top .right #direction{
	position:absolute;
	top:0;
	left:0;
	font-size: 30pt;
	height:50%;
	width:100%;
	display:table-cell; 
	vertical-align:middle;
}
.data-section .top .right #beta{
	position:absolute;
	top:50%;
	width:100%;
	left:0;
	height:25%;
	}
.data-section .top .right #gamma{
	position:absolute;
	top:75%;
	width:100%;
	left:0;
	height:25%;
	}