.fsi-skin-black  {
	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-black *{
	box-sizing:content-box!important;
	margin:0px;
}


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

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

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

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

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


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

.fsi-skin-black .fsi-ui-menu-bar {
	white-space:nowrap;
	overflow:hidden;

	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top, #737373 0%, #252525 50%, #000000 50%, #262626 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#737373), color-stop(50%,#252525), color-stop(50%,#000000), color-stop(100%,#262626)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #737373 0%,#252525 50%,#000000 50%,#262626 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #737373 0%,#252525 50%,#000000 50%,#262626 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #737373 0%,#252525 50%,#000000 50%,#262626 100%); /* IE10+ */
	background: linear-gradient(to bottom, #737373 0%,#252525 50%,#000000 50%,#262626 100%); /* W3C */

	height: 1.25em;
	text-align: center;
}

.fsi-skin-black .fsi-ui-menu-bar .fsi-ui-viewer-logo {
	/* the dimension and styles of the logo container */
	left:0.15em;
	line-height:1.1em;
	display:inline-block;
	width:auto;
	height:100%;
	cursor: pointer;
}

.fsi-skin-black .fsi-ui-logo-url {
	/* - remove this class to remove the logo in the menu bar */
	/* - you can specify an URL to any other logo here */
	background-image:url( "resources/logo_fsi_viewer.svg");
}

.fsi-skin-black .fsi-ui-menu-bar .fsi-ui-viewer-logo img {
	/* the dimension and styles of the logo image */
	width:2.7em;
	vertical-align:middle;
}



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


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


.fsi-skin-black .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;
	
	border:1px solid #111;
	border-radius: 4px;

	cursor: pointer;
	overflow:hidden;
}

.fsi-skin-black .fsi-ui-button-hover  {
	border:1px solid #777;
}

.fsi-skin-black .fsi-ui-button-active  {
	background-color:#333;
	background: linear-gradient(to top, #666 0%,#444 50%,#444 50%,#262626 100%); 
	border:1px solid #111;
}


@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-black .fsi-ui-button-icon {
	font-family: "FSI Viewer Icons" !important;
	color: #BBB;
	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-black .fsi-ui-button-icon-hover:before, 
.fsi-skin-black .fsi-ui-button-icon-active:before {
	color: white;
}

.fsi-skin-black .fsi-ui-button-disabled .fsi-ui-button-icon {
	color: #777;
}

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

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

.fsi-skin-black .fsi-ui-menu-bar-disabled .fsi-ui-button-icon{
	color: #777
}


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

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

.fsi-skin-black .fsi-ui-tool-tip b{
	display:inline-block;
	font-size:1.15em;
	margin-bottom: 0.1em;
}

/* select frame */
.fsi-skin-black .fsi-ui-select-frame{
	border-color:#58a8ff;
	background-color: rgba(255, 255, 255, 0.25);
}

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

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


/* navigation window */
.fsi-skin-black .fsi-ui-nav-window {
	background-color: rgba(0,0,0,0.75);
	border-radius: 5px 5px 0px 0px ;
	background: linear-gradient(to bottom, #737373 0%,#252525 50%,#000000 50%,#262626 100%);
	margin-bottom:0em;
	line-height:0.9em;
}

.fsi-skin-black .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-black .fsi-ui-nav-frame {
	border-color: #58a8ff;
	background-color: rgba(88,168,255,0.25);
}

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

/* HotSpots */
.fsi-skin-black .fsi-ui-hotspot {
	position:absolute;
	white-space:nowrap;
	color:#fff;
	font-size:0.6em;
	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-black .fsi-ui-hotspot-hover {
	background-color: rgba(88, 168, 255, 1.0);
}

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


.fsi-skin-black .fsi-ui-hotspot-line-color {
	color: #336699;
}

.fsi-skin-black .fsi-ui-hotspot-line-background-color {
	color: #113399;
}

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

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



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

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

/* info window */

.fsi-skin-black .fsi-ui-info-window {
	color:#333;
	border:0.2em solid #58a8ff;
	border-radius:0.3em;
	background-color:#FFF;
	box-shadow: 0.0em 0.5em 0.25em rgba(0,0,0,0.25);
}

.fsi-skin-black .fsi-ui-info-window h3{
	font-weight:normal;
	font-size:1.1em;
	margin:0px;
}

.fsi-skin-black .fsi-ui-info-window .small{
	font-size:0.8em;
}

.fsi-skin-black .fsi-ui-info-window .fsi-ui-content {
	display:inline-block;

	padding:1em;
	font-size:0.6em;
	overflow:auto;
}

.fsi-skin-black .fsi-ui-info-window .fsi-ui-title {
	font-size:0.65em;
	padding: 0.3em 0.5em 0.4em 0.8em;
	color:white;
	background-color:#58a8ff;
	overflow:hidden;
}