@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);
    background: url("../img/bg.png");
    overflow: hidden;
}

img.vert {
	display:block;
}

a {
    text-decoration: none;
    margin: 5px 10px 5px 10px;
    color: #777;
}

a:hover, .tap:hover {
    cursor: pointer;
}


.desc {
	margin-top:5%;
	text-align: center;
}



.content-wrap {
	width:88%;
	height:100%;
	text-align: center;
	float:left;
}

#home-content {
	width:100%;
	height:100%;
	/*display:none;*/
}

#home-heading {
	margin: 8% auto 5%;
	display: block;
	font-size: 3vw;
	color: #298F10;

}

#doc-hrefs {
	width: 80%;
	height: 20%;
	margin: 0 auto;
}

#doc-hrefs a {
	display: inline-block;
	width:25%;
	margin: 0 3% 0 3%;
	border-radius: 5px;
	box-shadow: 0px 0px 9px 2px rgba(128,128,128,0.75);
}
#doc-hrefs a:hover {
	background-color: rgba(128,128,128,0.2);
}

#doc-hrefs a img {
	margin-top: 15%;
	width: 60%;
	height: auto;
}

#doc-hrefs a .desc {
	margin-bottom: 15%;
	font-size: 1.2vw;
}

.selected {
	background-color: rgba(21, 175, 57, 0.9);
	color:white;
}

.selected img {
	-webkit-filter:brightness(10.9);
}

#home-desc {
	margin: 15% auto;
	display:block;
	width: 70%;
	height:20%;
	background:white;
	border-radius: 5px;
	box-shadow: 0px 0px 9px 2px rgba(128,128,128,0.75);
}

#home-desc-img, #home-desc-text {
	float:left;
	margin:2% 0 0 0;
}

#home-desc-text {
	text-align:left;
}

#home-desc-img img {
	width:60%;
	height: auto;
	margin: 0 auto;
}

#home-desc-text {
	width:65%;
}

#home-desc-text div:nth-child(1) {
	font-size:2vw;
	color:rgba(41, 143, 16, 0.9);
}

#home-desc-text div:nth-child(2) {
	font-size: 1vw;
	margin-top:3%;
}


#viewer-content {
	height:100%;
	width:100%;
	display:none;
}

#viewer-heading {
	width:99%;
	height:8%;
	text-align:left;
	font-size:2vw;
	background: rgba(41, 143, 16, 0.9);
	border-radius:10px;
	margin:0.5%;
}

#viewer-heading-text {
	display:block;
	padding: 1.5%;
	color:white;
}

#viewer-miniatures {
	position:relative;
	height:87%;
	width:12%;
	background: rgba(255,255,255,0.8);
	float:left;
	overflow-y:auto;
	overflow-x:hidden;
	color:#888;
	padding-top: 1%;
}

#viewer-view {
	position: relative;
	height: 87%;
	width: 88%;
	background: rgba(128,128,128,0.5);
	float: left;
	overflow-y: auto;
	padding-top: 2%;
}

.miniature {
	border: 2px solid rgba(41, 143, 16, 0.1);
	border-radius: 5px;
}

.miniature:hover {
	cursor: pointer;
	background: rgba(41, 143, 16, 0.3);
}

.miniature-selected {
	border: 2px solid rgba(41, 143, 16, 0.9);
}

.navi-vertical {
	position:fixed;
	margin:0;
	left:3.6%;
	display:block;
	z-index: 100;
	height: 24px;
	width: 48px;
}

.navi-horizontal {
	position:fixed;
	margin:0;
	display:block;
	z-index: 100;
	height: 80px;
	width: 40px;
	top: 45%;
}

#navi-up {
	background:url("../img/navi-up.png");
	top:9.5%;
}

#navi-down {
	background:url("../img/navi-down.png");
	bottom:1.8%;
}

#navi-left {
	background:url("../img/navi-left.png");
	left:10.8%;
}

#navi-right {
	background:url("../img/navi-right.png");
	right:13%;
}


#vertical {
	background-color: rgba(255,255,255,0.5);
	height: 100%;
	width: 12%;
	float: right;
}

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

	.buttons.vert {
		height:43%;
		background-color: rgba(255,255,255,0.5);

	}
		.btn.vert {
			width:50%;
			height:20%;
			float:left;
		}
		
		.btn.vert.full-row {
			width:100%;
		}

		#home.vert img {
			margin: 10% auto;
			
			width:auto;
		}

		#refresh.vert img {
			margin: 10% auto;
			
			width:auto;
		}

		#up.vert img {
			margin: 20% auto;
			
			width:auto;
		}

		#back.vert img {
			margin: 20% auto;
			
			width:auto;
		}

		#forward.vert img {
			margin: 20% auto;
			
			width:auto;
		}

		#down.vert img {
			margin: 2% auto;
			
			width:auto;
		}

		#zoom-in.vert img {
			margin: 10% auto;
			
			width:auto;
		}

		#zoom-out.vert img {
			margin: 10% auto;
			
			width:auto;
		}

.info {
		height:15%;
        margin-top: 30%
	}

		#date.vert {
			height:28%;
			max-width:90%;
			margin: 10% auto;
			text-align: center;
		}

			#date div {
				margin:1% 1% 1% 4%;				
			}

		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:40%;
			text-align: center;   		
		}

			#time div {
				margin:3% 1% 1% 4%;

			}

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

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