@font-face {
    font-family: MyriadProRegular;
    src: url('../fonts/MyriadPro-Regular.otf');
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: MyriadProRegular, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}


img {
	display:block;
}

.desc {
	margin-top:20px;
	font-size:18px;
	text-align: center;
}


#horizontal {
	background-image: url("../img/bg.png");
	height:248px;
	width:1080px;
}

	.left {
		float:left;
		height:100%;
		width:30%;
	}

	.center {
		float:left;
		height:100%;
		width:40%;
	}

	.right {
		float:right;
		height:100%;
		width:30%;
	}


.buttons.hor {
	height:58%;
	width:100%;
}

	#navigation-barrier, #navigation-classic {
		height:100%;
		width:100%;
	}

		.btn.hor.left {	
			width:48%;
			height:90%;
			float:left;
		}

		.btn.hor.center {	
			width:32%;
			height:90%;
			float:left;
		}

		.btn.hor.center.barrier {	
			width:100%;
			height:48%;
			
		}

		.btn.hor.right {	
			width:100%;
			height:90%;
			float:left;
		}
		.btn.hor.right.barrier {	
			width:48%;
			height:90%;

		}

		#home img {
			margin: 30px auto 0;
			height:55px;
			width:62px;
		}

		#refresh img {
			margin: 30px auto 0;
			height:55px;
			width:62px;
		}

		#arrows {
			padding: 0px;
			width:75%;
		}

		#back img {
			height:54px;
			width:46px;
			margin: 30px auto 0;
		}

		#forward img {
			height:54px;
			width:46px;
			margin: 30px auto 0;
		}

		#up img {
			height:46px;
			width:54px;
			margin: 10px auto 0;
		}

		#down img {
			height:46px;
			width:54px;
			margin: 30px auto 0;
		}


		#zoom-in img {
			display:block;
			height:55px;
			width:62px;
			margin: 30px auto 0;
		}

		#zoom-out img {
			height:55px;
			width:62px;
			margin: 30px auto 0;
		}

	.info.hor {		
		height:40%;
		width:100%;
	}

		#time.hor {
			margin-left:20%;
    		height:100%;
			font-size: 70px;
			line-height:100px;
		}

		#date.hor {
			text-align: center;
    		height:100%;
			font-size: 45px;
			line-height:110px;
		}

		#kiwilogo.hor {
			margin:15px auto;
			display: block;			
			height:60%;
		}





#vertical {
	background-color: #EEE;
	height:100%;
	width:240px;
	float:left;
}

	.logo.vert {
		height:25%;
		width:100%;
		
	}
		#logo-client.vert {
			margin:10% auto;
			display: block;			
			width:70%;
			
			
		}

	.buttons.vert {
		height:43%;
		background-color: #EEE;

	}
		.btn.vert {
			width:50%;
			height:32%;
			float:left;
		}

		#home.vert img {
			margin: 20% auto 10%;
			height:55px;
			width:62px;
		}

		#refresh.vert img {
			margin: 20% auto 10%;
			height:55px;
			width:62px;
		}

		#back.vert img {
			margin: 20% auto 10%;
			height:54px;
			width:46px;
		}

		#forward.vert img {
			margin: 20% auto 10%;
			height:54px;
			width:46px;
		}

		#zoom-in.vert img {
			margin: 20% auto 10%;
			height:55px;
			width:62px;
		}

		#zoom-out.vert img {
			margin: 20% auto 10%;
			height:55px;
			width:62px;
		}

	.info.vert {
		height:20%;
	}

		#date.vert {
			height:35%;
			line-height:200%;
			font-size: 35px;
			text-align: center;
		}

		hr.styled.vert {
		    border: 0;
		    height: 0;
		    width:90%;
		    border-top: 1px solid rgba(0, 0, 0, 0.1);
		    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
		}

		#time.vert {
			height:45%;
			line-height:180%;
			font-size: 65px;
			text-align: center;
    		
		}

	.logo-our.vert {
		height:8%;
		width:100%;
		
	}

		#kiwilogo.vert {
			margin:28% auto 0;
			display: block;
			width:50%;
		}

	
hr.styled {
    border: 0;
    height: 0;
    width:97%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}



.highlight {
    -webkit-animation: btn-color 0.5s;
    -moz-animation: btn-color 0.5s;
    -ms-animation: btn-color 0.5s;
    -o-animation: btn-color 0.5s;
    animation: btn-color 0.5s;
}

@-webkit-keyframes btn-color { 
	0% {background-color: none;}
    25% {background-color: #BCBCBC;} 
    100% {background-color: none;} 
}
@-moz-keyframes btn-color { 
	0% {background-color: none;}
    25% {background-color: #BCBCBC;} 
    100% {background-color: none;} 
}
@-ms-keyframes btn-color { 
	0% {background-color: none;}
    25% {background-color: #BCBCBC;} 
    100% {background-color: none;} 
}
@-o-keyframes btn-color { 
	0% {background-color: none;}
    25% {background-color: #BCBCBC;} 
    100% {background-color: none;} 
}
@keyframes btn-color { 
	0% {background-color: none;}
    25% {background-color: #BCBCBC;} 
    100% {background-color: none;} 
}