.fsi-skin-webinterface  {
	font-family:sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor:default;
	line-height:normal;
	letter-spacing:normal;
}

.fsi-skin-webinterface *{
	box-sizing:content-box!important;
	margin:0px;
}


.fsi-skin-webinterface .fsi-ui-info {
	content:'{"baseSize":8, "floatingMenuBar":false, "floatingNavWindow":false}';
}


.fsi-skin-webinterface .fsi-ui-cursor-wait {
	content:"progress";
}

.fsi-skin-webinterface .fsi-ui-cursor-zoom {
	content:"../_cursors/zoom.cur";
}

.fsi-skin-webinterface .fsi-ui-cursor-pan {
	content:"../_cursors/pan.cur";
}

.fsi-skin-webinterface .fsi-ui-cursor-rotate {
	content:"../_cursors/rotate.cur";
}

.fsi-skin-webinterface :focus {
	outline: none;
}

.fsi-skin-webinterface .fsi-ui-menu-bar {
	white-space:nowrap;
	overflow:hidden;
	background: #333;
	height: 1.65em;
	text-align: center;
}

.fsi-skin-webinterface .fsi-ui-menu-bar-disabled {
}


.fsi-skin-webinterface .fsi-ui-button-container{
	white-space:nowrap;
	overflow:hidden;
	display: inline-block;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	line-height:1.55em;
}


.fsi-skin-webinterface .fsi-ui-button  {
	display: inline-block;
	vertical-align:middle;

	margin-left: 0.1em;
	margin-right: 0.1em;
	
	width:1em;
	height:1em;
	line-height:0.85em;
	
	cursor: pointer;
	border:1px solid #666;
	overflow:hidden;
}

.fsi-skin-webinterface .fsi-ui-button-hover  {
	border:1px solid #3399ff;
}

.fsi-skin-webinterface .fsi-ui-button-active  {
	background-color:#333;
	background: #3399ff; 
	border:1px solid #3399ff;
}

@font-face {
	/* IMPORTANT: you need to change "font-family" when using a custom font */
	font-family: 'FSI Viewer Icons';
	src: 
	url('resources/_fonts/FSI Viewer Glyph.woff2') format('woff2'), 
	url('resources/_fonts/FSI Viewer Glyph.woff') format('woff');

	font-weight: normal; 
	font-style: normal;
}


.fsi-skin-webinterface .fsi-ui-button-icon {
	font-family: "FSI Viewer Icons" !important;
	color: #999;
	font-size: 1em;
	line-height: 1em;

	display: inline-block;	
	overflow:hidden;
	vertical-align:middle;
	
	width:100%;
	height:100%;
	
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fsi-skin-webinterface .fsi-ui-button-icon-hover:before, .fsi-skin-webinterface .fsi-ui-button-icon-active:before {
	color: white;
}

.fsi-skin-webinterface .fsi-ui-button-disabled .fsi-ui-button-icon {
	color: #999;
}

.fsi-skin-webinterface .fsi-ui-button-hover .fsi-ui-button-icon {
}

.fsi-skin-webinterface .fsi-ui-button-active .fsi-ui-button-icon {
}

.fsi-skin-webinterface .fsi-ui-menu-bar-disabled .fsi-ui-button-icon{
	color: #999;	
}

/* select frame */
.fsi-skin-webinterface .fsi-ui-select-frame{
	border-color:#3399ff;
	background-color: rgba(255, 255, 255, 0.25);
}

/* progress bar */
.fsi-skin-webinterface .fsi-ui-progressbar{
	color:#333;
	background-color:rgba(255,255,255,0.5);
	border-color:#333;
}

.fsi-skin-webinterface .fsi-ui-progressbar-text{
	color:#FFF;
}


/* tool tips */
.fsi-skin-webinterface .fsi-ui-tool-tip {
	color:#333;
	font-size:0.75em;
	margin:0px!important;
	padding:0.3em;
	background-color:#EEE;
	border:1px solid #999;
	box-shadow: 4px 4px 2px rgba(0,0,0,0.5);
}

.fsi-skin-webinterface .fsi-ui-tool-tip-arrow {
	width:1px;
	left:12px;
	border-top: 7px solid #999;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
}

.fsi-skin-webinterface .fsi-ui-tool-tip b{
	display:inline-block;
	font-size:1.10em;
	margin-bottom: 0.3em;
}


/* navigation window */
.fsi-skin-webinterface .fsi-ui-nav-window {
	background: #333;
	margin-bottom:0em;
	line-height:0.9em;
}

.fsi-skin-webinterface .fsi-ui-nav-window-image {
	background-color: white;
	margin:0.1em 0.1em 0px 0.1em;
	border:1px solid #000;
	border-left-color:#000;
	border-top-color:#000;
	border-right-color:#666;
	border-bottom-color:#666;

	cursor: move;
	color:red;
}

.fsi-skin-webinterface .fsi-ui-nav-frame {
	border-color: #3399ff;
	background-color: rgba(88,168,255,0.25);
}

.fsi-skin-webinterface .fsi-ui-nav-window-zoom-text{
	white-space:nowrap;
	overflow:hidden;
	letter-spacing: normal;
	text-align: center;
	
	width:100%;
	height:1.5em;
	color:#ccc;
	font-size:0.75em;
	line-height:1.5em;
	cursor:default;
}

/* HotSpots */
.fsi-skin-webinterface .fsi-ui-hotspot {
	position:absolute;
	white-space:nowrap;
	color:#fff;
	font-size:0.75em;
	padding:0.3em;
	border:1px solid rgba(255,255,255, 1.0);
	border-radius: 2px;
	background-color: rgba(88, 168, 255, 0.85);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	cursor:pointer;
	text-align:center;
}

.fsi-skin-webinterface .fsi-ui-hotspot-hover {
	border-width:2px;
	background-color: rgba(88, 168, 255, 1.0);
}

.fsi-skin-webinterface .fsi-ui-hotspot-active {
	background-color: rgba(88, 168, 255, 1.0);
}

.fsi-skin-webinterface .fsi-ui-hotspot-mobile {
}

.fsi-skin-webinterface .fsi-ui-hotspot-mobile-small {
}


/* individual button */
.fsi-skin-webinterface .fsi-ui-button.zoomin {
	margin-right: 0.8em;
}


/* individual button icons */
.fsi-skin-webinterface .fsi-ui-button.reset .fsi-ui-button-icon:before{
	content: "\0061";
}
.fsi-skin-webinterface .fsi-ui-button.zoomout .fsi-ui-button-icon:before {
	content: "\0062";
}
.fsi-skin-webinterface .fsi-ui-button.zoomin .fsi-ui-button-icon:before {
	content: "\0063";
}
.fsi-skin-webinterface .fsi-ui-button.mousemode_0 .fsi-ui-button-icon:before {
	content: "\0064";
}
.fsi-skin-webinterface .fsi-ui-button.mousemode_1 .fsi-ui-button-icon:before {
	content: "\0065";
}
.fsi-skin-webinterface .fsi-ui-button.mousemode_2 .fsi-ui-button-icon:before {
	content: "\0066";
}
.fsi-skin-webinterface .fsi-ui-button.mousemode_3 .fsi-ui-button-icon:before {
	content: "\0067";
}
.fsi-skin-webinterface .fsi-ui-button.maxzoom .fsi-ui-button-icon:before {
	content: "\0071";
}
.fsi-skin-webinterface .fsi-ui-button.hotspots .fsi-ui-button-icon:before {
	content: "\0068";
}
.fsi-skin-webinterface .fsi-ui-button.fullscreen .fsi-ui-button-icon:before {
	content: "\0072";
}
.fsi-skin-webinterface .fsi-ui-button.fullscreen .fsi-ui-button-icon-active:before {
	content: "\0073";
}
