/*
 *  user-interface.css
 *
 *  Virtual Slide Layout Using the Zoomify HTML5 Viewer
 *  Stylesheet
 *  Version 4.2
 *
 *  Copyright (c) 2005-2019. T. Clark Brelje and Robert L. Sorenson. All rights reserved.
 */

 /* ================================================================================
   Body
   ================================================================================ */

body {
	margin: 0;
	width: 100%;
	overflow: hidden;
	color: #000;
	background: #fff;
	font: 400 13px/1.5 'Open+Sans', sans-serif;
}

/* ================================================================================
   Header - Fixed Across Top of the Window
   ================================================================================ */

[class*='header'] a,
[class*='header'] i,
[id*='header'] a,
[id*='header'] i {
    -webkit-transition: color .33s linear, background .33s linear;
    -moz-transition: color .33s linear, background .33s linear;
    -ms-transition: color .33s linear, background .33s linear;
    transition: color .33s linear, background .33s linear;
}

.header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 26px;
	color: #f1f2f3;
	background: #3f3f3f;
	border-bottom: solid 1px #000;
	line-height: 26px;
	overflow: hidden;
	z-index: 10;
	padding: 0 0;
	margin: 0 0;
}

.headerLight {
	color: #3f3f3f;
	background: #eaebec;
	border-bottom: solid 1px #c0c0c0;
}

/* App Menu (left)
======================================== */
.headerAppMenu {
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	background: #6f6f6f;
}

.headerAppMenuLight {
	background: #ccc;
}

/* Chapter (left)
======================================== */
.headerChapter {
	position: absolute;
/* change whether the app menu is present - 34px */
	left: 34px;
	top: 0;
}

.headerChapter a {
	display: inline-block;
	padding: 0 10px;
	color: #f1f2f3; 
	line-height: 26px;
	text-decoration: none;
	cursor: pointer;
}

.headerChapterLight a {
	color: #3f3f3f; 
}

.headerChapter a:hover,
.headerChapter a:active {
	color: #fff;
	background: #0078d7;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}

/* Program Title (center)
======================================== */
.headerTitle,
.headerTitleLight {
	position: absolute;
	color: #b1d2f5;  /* light blue */
	color: #f3f3f3;
	text-align: center;
	width: 100%;
	font: 600 16px/24px 'Open Sans', sans-serif;
	text-shadow: 1px 1px 2px rgba(128, 128, 128, .33);
}

.headerTitleLight {
	color: #3f3f3f;
}

/* Options (right)
======================================== */
.headerOptions {
	position: absolute;
	right: 0;
	top: 0;
}

/* Header Buttons
======================================== */
.headerAppMenu a,
.headerOptions a {
	display: inline-block;
	padding: 0 10px;
	color: #fff;
	line-height: 26px;
	font: 400 13px/26px 'icomoon',sans-serif;
	text-decoration: none;
	cursor: pointer;
}

.headerAppMenuLight a,
.headerOptionsLight a {
	color: #3f3f3f; 
}

.headerAppMenu a:hover,
.headerAppMenu a:active,
.headerOptions a:hover,
.headerOptions a:active {
	color: #fff;
	background: #0078d7;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}

.headerAppMenu a:hover,
.headerAppMenu a:active,
.headerOptions a:hover,
.headerOptions a:active {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: hoverShake;
}

/* ================================================================================
   App Menu - Dropdown Menu with Icons
   ================================================================================ */

.appMenu {
	display: none;
	position: absolute; 
	left: 0;
	top: 0;
	width: 350px;
	margin: 0 0;
	padding: 0 0;
	color: #f1f2f3;
	background: rgba(32, 32, 32, 0.9);
	border-right: solid 1px #000;
	font-size: 13px;
	list-style-type: none;
	overflow-x: hidden;
	z-index: 5500;     	/* Default z-index for the ZoomifyViewer is 2000 */
}

.appMenu img {
	margin: 0 0;
	padding: 0 0;
	margin-bottom: -4px;
}

.appMenu ul {
	list-style-type: none;
	margin: 0 0;
	padding: 0 0;
}

.appMenuLight {
	color: #3f3f3f;
	background: #e1e2e3;
	background: rgba(220, 220, 220, 0.9);
	border-right: solid 1px #c0c0c0;
}

.appMenu a:link,
.appMenu a:visited,
.appMenu a:focus {
	display: block;
	padding: 2px 5px 4px 20px;
	color: #f1f2f3;
	border-bottom: solid 1px #6f6f6f;
	text-decoration: none;
}

.appMenuLight a:link,
.appMenuLight a:visited,
.appMenuLight a:focus {
	display: block;
	padding: 2px 5px 4px 20px;
	color: #3f3f3f;
	border-bottom: solid 1px #c0c0c0;
}

.appMenu a:hover,
.appMenu a:active,
.appMenuLight a:hover,
.appMenuLight a:active {
	color: #fff;
	background: #0078d7;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}

.appMenuText {
	padding-right: 10px;
	font: 400 13px/24px 'Open+Sans', sans-serif;
}

.appMenuIcon {
	padding-right: 10px;
	font: 400 16px/24px 'icomoon',sans-serif;
}

/* ================================================================================
   Slide Info Panel
   ================================================================================ */

 #slideInfoPanel .thumbnail {
	border: solid 1px #999;
	display: block;
	margin: 40px auto;

	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: zoomIn;
}

#slideInfoPanel .left {
	display: block;
	float: left;
	width: 35%;
	margin-bottom: 10px;
}

#slideInfoPanel .right {
	display: block;
	float: left;
	width: 65%;
	margin-bottom: 10px;
}

#slideInfoPanel .text {
	display: block;
	float: left;
	margin-top: 10px;
}

/* ================================================================================
   Author Panel
   ================================================================================ */

/* ================================================================================
   Preferences Panel
   ================================================================================ */

#settingsPanel label {
	clear: both;
	display: block;
	padding: 2px 0;
}

#settingsPanel input {
	margin-right: 10px;
	white-space: nowrap;	
}

#settingsPanel .selectlabel {
	display: block;
	float: left;
	clear: both;
	padding: 2px 0;
	margin-left: 30px;
	width: 125px;
}

#settingsPanel .left30 {
	margin-left: 30px;
}

#settingsPanel .left60 {
	margin-left: 60px;
}

/* Also need to change the sizes in TCB-library.js for showing the font sizes
   in the settings panel.

var DEFAULT_FONT_SIZE = [ '12px', '13px', '15px' ];
*/

#settingsPanel .fontSmaller {
	font-size: 12px;
	line-height: 1.5;
}
#settingsPanel .fontNormal {
	font-size: 13px;
	line-height: 1.5;
}
#settingsPanel .fontLarger {
	font-size: 15px;
	line-height: 1.5;
}

/* ================================================================================
   Help Panel
   ================================================================================ */

/* ================================================================================
   Zoomify HTML5 Viewer
   ================================================================================ */

/* -- Positioned in the Lower Left Corner -- */
#zoomify-viewer {
	position: absolute;
	top: 27px;
	bottom: 0;
	left: 0;
	right: 400px;
}

.pointerIcon {
	font: 400 12px/24px 'icomoon',sans-serif;
}

/* ================================================================================
   Sidebar - 400px Width and Right-Aligned
   ================================================================================ */

#sidebar {
	position: absolute;
	top: 27px;
	bottom: 0;
	right: 0;
	width: 400px;
	color: #3f3f3f;
	background: #eaebec;
	border-left: solid 1px #d0d0d0;
	z-index: 105;
	/* Needed for fullscreen animation */
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

#sidebar h2 {
	color: #000;
	font: 700 15px/1.33 'Open+Sans', sans-serif;
	margin-top: 36px;
	margin-bottom: 8px;
	text-align: center;
}

#sidebar .image-center {
	display: block;
	margin: 10px auto;
	padding: 0 0;
	outline: none;
}

#sidebar .color-buttons {
	text-align: center;
	margin-bottom: 15px;
}

#sidebar .left-margin {
	margin-left: 10px;
}

/* Title
======================================== */
.sidebarTitle {
	position: absolute;
		left: 0;
	top: 0;
	right: 0;
	height: 27px;
	margin: 0;
	color: #ffffff;
	background: #8f8f8f;
	font: 600 14px/23px 'Open+Sans', sans-serif;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .85);
	text-align: center;
	text-overflow: ellipsis;
}

/* Container (one or more pages)
======================================== */
.sidebarContainer {
	position: absolute;
	overflow: hidden;
	top: 26px;
	bottom: 26px;
	width: 400px;
	border: 0;
}

.sidebarCarousel {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.sidebarPage {
	position: absolute;
	display: none;
	top: 0;
	bottom: 0;
	left: 0;
	width: 400px;
	background: #eaebec;
}

.sidebarPage h2 {
	color: #000;
	font: 700 15px/1.33 'Open+Sans', sans-serif;
	margin-top: 0 !important;
	margin-bottom: 0.5em;
	text-align: center;
}

.sidebarPage .image-center {
	display: block;
	margin: 1em auto;
	padding: 0 0;
	outline: none;
}

.sidebarPage .preview-image {
	display: block;
	margin: 1em 0;
	padding: 0 0;
	outline: none;
}

.sidebarPage ul {
	list-style-type: none;
	/* unclear why this is non-zero? */
	margin: 0 0;
	/* padding includes space for character and its margin */
	padding-left: 1.5em;
  }

.sidebarPage ul li:before {
	color: #7f7f7f;
	font: 400 20px/20px 'Open+Sans', sans-serif;
	content: '\2022';
	/* right margin defines spacing between bullet and text */
	margin-right: 0.4em;
	/* negative left margin pushes back to the edge of the parent <ul> */
	margin-left: -0.4em;
}

.sidebarPage ul li {
	/* negative text indent brings first line back inline with the others */
  	text-indent: -.75em;
  	/* set to 0.55em by an inline style? */ 
	margin-bottom: 0.25em !important;
}

.sidebarPage p {
	/* unclear why this is non-zero? */
	margin-top: 0.66em;
  	/* set to 0.55em by an inline style? */ 
	margin-bottom: 0 !important;
}

.sidebarPage a {
    -webkit-transition: color .5s linear, background .5s linear;
    -moz-transition: color .5s linear, background .5s linear;
    -ms-transition: color .5s linear, background .5s linear;
    transition: color .5s linear, background .5s linear;
}

.sidebarPage a:link,
.sidebarPage a:visited,
.sidebarPage a:focus {
	color: #324fe1;  /* blue */
	text-decoration: none;
	outline: none;
}

.sidebarPage a:hover,
.sidebarPage a:active {
	color: #ff322e;  /* orange */
	outline: none;
}

#hidden {
	display: none;
}

.sidebarPage .response {
	display: none;
	margin-bottom: 6px;
	padding: 3px 10px 3px 10px;
	color: #3f3f3f;
	border: solid 1px #ffcc00;
	border: solid 1px #ecdf64;
	border-radius: 5px;
	background: #ffffcc;
	background: #fffad4 ;
}

.sidebarPage .response-list {
	display: none;
	margin: 0 0;
	padding: 3px 10px 0px 10px;
	border: solid 1px #ffcc00;
	border-radius: 5px;
	background: #ffffcc;
	color: #3f3f3f;
}

.sidebarPage .response-image {
	display: block;
	margin: 0 0;
	padding: 0 0;
	outline: none;
}

.sidebarPage label:hover {
	color: #ff322e;  /* orange */
}

.sidebarPage .vertical-3px {
	height: 3px;
}

/* -- Table within guide for connective tissue -- */
.guide-table1 {
	margin: 15px auto;
	border-collapse: collapse;
	border-spacing: 0;
}
.guide-table1 td {
	width: 90px;
	text-align: center;
}
.guide-table1 .header_row {
	border: 1px solid #f1f2f3;
	color: #3f3f3f;
	background: #d0d0d0;
}
.guide-table1 .header_column {
	border: 1px solid #f1f2f3;
	color: #3f3f3f;
	background: #d0d0d0;
}
.guide-table1 .hilight {
	color: #3f3f3f;
	background: #fff;
}
.guide-table1 .hilight_disabled {
	color: #aaa;
	background: #fff;
}
.guide-table1 .disabled {
	color: #aaa;
}

/* Footer
======================================== */

.footer {
	position: absolute;
	left: 0;
	height: 22px;
	bottom: 0;
	padding: 2px 0;
	color: #f1f2f3;
	background: #3f3f3f;
	font-size: 13px;
	line-height: 21px;
	text-align: center;
	width: 100%;
}

.footerLight {
	background: #7f7f7f;
}

/* ================================================================================
   MixIns
   ================================================================================ */

.disableSelection {
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* supported by Chrome and Opera */
}