/* object [img and trans] style */
	
	
	body {
		color: #333;
		background: #eeeeee;
	}
	
	
	
	a:link,
	a:visited,
	a:hover,
	a:active {
		color: #0084ff; /*  #a91e26; */
		text-decoration: none;
	}
	
	
	.banner {
		background: #eeeeee;
	}
	
	.hereBox {
		background: black;
		color: white;
		float: left;
		min-height: 65px;
		font-size: 16px;
		margin: 0 1rem 0 0;
		font-family: "Helvetica", "Arial", sans-serif;
	}
	
	.hereBox h1 {
		padding: .4rem 1rem;
		font-size: 15px;
	}
	
	.hereBox h1 b {
		display: block;
	    font-size: 36px;
	}

	.backref h1 {
		font-size: 22px;
	}
	
	.backref h1 b {
		display: inline;
		font-size: inherit;
	}
	
	
	.mhs_backref {
		background: #484848;
		color: #ddd;
		padding: 10px 14px;
		text-align: center;
		font-style: italic;
		font-size: 14px;
	}
	
	.mhs_backref a:link,
	.mhs_backref a:visited {
		font-style: normal;
		color: #6bbcff; /* #ffdd66; */
	}
	
	
	
	
	.navigation {
		padding: 7px 7px 0 7px;
		font-family: Arial, sans-serif;
		font-size: 16px;
		background: #eeeeee;
		min-height: 65px;
	
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
	
	
	.navigation h2 {
		margin-bottom: 7px;
		line-height: 1.2;
		font-family: "Miller Headline", "Times New Roman", serif;
		font-size: 16px;
	}
	
	.real_title {
		font-style: italic;
	}
	
	.view_choices {
		padding-bottom: .35rem;
	}
	
	.view_choices * {
		display: inline-block;
		font-size: 14px;
		vertical-align: baseline;
	}
	
	.view_choices h3 {
		font-size: 14px;
	}
	
	.view_choices label {
		padding-right: 10px; display: none;
	}
	
	.view_choices a:link,
	.view_choices a:visited {
		color: #222;
		background: white; 
		padding: 3px 6px;
		border-radius: 3px 3px;
		border: 1px solid #999999;
		display: inline-block;
	}
	
	.view_choices a:hover {
		color: #ddd;
		background: #444; 
		padding: 3px 6px;
		border-radius: 3px 3px;
		border: 1px solid #000000;
	}
	
	.chosen a {
		background: #444444;
		padding: 3px 6px;
		border-radius: 3px 3px;
		border: 1px solid #000000;
		color: #ddd;
	}
	
	.nav_modes .chosen {
		display: none;
	}
	
	
	.sequence_pages {
		padding: 0 10px;
		line-height: 1.4;
	}
	
	.sequence_pages h3 {
		padding: 0 10px;
		font-size: 14px;
		font-family: "Helvetica", sans-serif;
		color: #333;
	}
	
	
	.jump_form {
		display: inline-block;
		min-width: 7rem;
		margin: 0;
	}
	
	
	.jump_form input {
		display: inline-block;
		margin: 0;
		padding: 2px 4px;
		line-height: 1;
		font-size: 16px;
		vertical-align: middle;
	}
	
	.jump_form input[name="img_step"] {
		border: 1px solid #555555;
		background: white;
		color: #222;
		width: 2em;
		-webkit-touch-callout:text;
		-webkit-user-select: text;
		-moz-user-select: text;
		user-select: text;
	}
	
	.jump_form input[type="submit"] {
		color: white;
		background: #0084ff;
		padding: 4px 6px;
		border-radius: 3px 3px;
		border: none;
		color: #222;
		background: white; 
		padding: 2px 6px;
		border-radius: 3px 3px;
		border: 1px solid #999999;
	}
	
	
	/* buttons hijacked and inserted to viewer */
	
	.prevButOnViewer,
	.nextButOnViewer {
		position: absolute;
		top: 50%;
		background: #0084ff;
		padding: 7px 0 5px 0;
	}
	
	.prevButOnViewer {
		left: 0;
		border-top-right-radius: 9px;
		border-bottom-right-radius: 9px;
		-webkit-border-top-right-radius: 9px;
		-webkit-border-bottom-right-radius: 9px;
	}
	
	.nextButOnViewer {
		position: absolute;
		top: 50%;
		right: 0;
		border-top-left-radius: 9px;
		border-bottom-left-radius: 9px;
		-webkit-border-top-left-radius: 9px;
		-webkit-border-bottom-left-radius: 9px;
	}




	.captionWithImage {
		font-family: Arial, sans-serif;
		font-style: normal;
		padding-top: 12px;
		display: inline;
		position: relative;
	}
	
	.captionWithImage h2 {
		font-size: 14px;
		padding: 3px 0px 8px 16px;
		font-weight: normal;
		display: inline;
	}
	
	#controls .captionWithImage h2 { color: #ccc;}
	
	.captionWithImage .hoverSpot,
	.captionWithImage .hoverSpotOn {
		padding-left: 12px;
		font-size: 15px;
		color: #0084ff;
		cursor: pointer;
		padding-right: 14px;
		background: url(/images/smgraphics/open-close-blue-arrow.png) no-repeat 100% 3px;
	}
	
	.captionWithImage .hoverSpotOn {
		background: url(/images/smgraphics/open-close-blue-arrow.png) no-repeat 100% -14px;
	}
	
	#fullCaption {
		left: 0;
		min-width: 300px;
		position: absolute;
		background: #e5e5e5;
		color: #111;
		font-size: 14px;
		padding: 7px;
		line-height: 1.3;
		z-index: 500;
		display: none;
		box-shadow: 0 1px 4px rgba(0,0,0,.35);
	}
	
	.captionWithImage.open #fullCaption {
		display: block;
	}

	.captionWithImage.placeLeft #fullCaption {
		left: auto;
		right: 0;
	}
		
	.meta-n-nav .meta-data {
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		color: #222;
		font-family: Arial, sans-serif;
	}
	
	.meta-n-nav .meta-data .complete_title {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 12px;
		margin-bottom: 7px;
	}

	#seq_note, #seq_note_toggle {
		color: black;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
	}

	#seq_note_toggle {
		color: #0084ff;
		cursor: pointer;
		padding-right: 14px;
		background: url(/images/smgraphics/open-close-blue-arrow.png) 100% 2px no-repeat;
	}
	#seq_note_toggle.open {
		background: url(/images/smgraphics/open-close-blue-arrow.png) 100% -12px no-repeat;
	}
	
	#seq_note_toggle #seq_note {
		position: absolute;
		background: #e5e5e5;
		color: #111;
		font-size: 12px;
		padding: 7px;
		line-height: 1.3;
		z-index: 200;
		display: none;
		border: 1px solid #777;
	}
	
	#seq_note_toggle.open #seq_note {
		display: block;
	}




/* display boxes */

	.content {position: relative;}



/* TRANSCRIPTION STYLES */
	
	body.transcript .content { background: #999; padding-top: 72px;}
	
	body.transcript .banner {
		position: fixed;
		top: 0 ;left: 0; z-index: 50;
		width: 100%;
	}
	
	
	
	.t_controls {
		position: fixed;
		right: 5px;
		top: 73px;
		z-index: 50;
		padding-top: 7px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
	
	
	.t_controls .txButtons {
		box-sizing: border-box;
		color: white;
		cursor: pointer;
		display: inline-block;
		padding: 6px 5px 3px 5px;
		border-radius: 3px;
		min-height: 30px;
		vertical-align: top;
		background: #1188ff;
		width: 28px;
		text-align: center;
		line-height: 1;
	}
	
	.t_controls #txShowBR {
		font-size: 12px;
		width: 50px;
		padding-top: 8px;
	}

	.t_controls.view_controls .smallerText {
		font-size: 75%;
	}
	
	.t_controls.view_controls .largerText {
		font-size: 125%;
	}
	
	
	
	

	
/* DUAL MODE TWEAKS */

	body.dual .banner {
		z-index: 50;
	}
	
	body.dual #transcription_text {
		position: absolute;
		left: auto;
		right: 0;
		margin-right: 0;
		width: 40%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		border-left: 2px solid #2069b0;
	}
	
	body.dual #osd_viewer {
		position: fixed;
		width: 60%;
		left: 0;
		top: 72px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	
	body.dual .backToTop {
		display: none;
	}

	#dualDragger {
		background: #157de4 url(/database/graphics/dual-drag-grip.png) no-repeat;
		background-position: -1px;
		display: block;
		position: absolute;
		height: 58px;
		width: 9px;
		top: 124px; right: 0px;
		z-index:  350;
		cursor: url('/database/graphics/pane-divider.png') 12 4, default;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border: 1px solid #006DDA;
		border-top: 1px solid #49A4FF;
		border-left: 1px solid #49a4ff;
		box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
	}
	
	#dualDragBar {
		top: 0;
		right: 0;
		width: 4px;
		height: 100%;
		z-index:  349;
		cursor: url('/database/graphics/pane-divider.png') 12 4, default;
		background: #157de4;
		display: block;
		position: absolute;
	}

	
	body.paneDragging {
		cursor: url('/database/graphics/pane-divider.png'), default;
	}


	.sharing-icons {
		display: block;
		float: right;
	}
	
	
	.view_choices .sharing-icon:link {
		background: none;
		border: none;
		padding: 0;
		
	}
	
	.sharing-icon svg {
		height: 22px;
		width: 33px;
	}
	
	
	
	@media (max-width: 600px) {
		
		.hereBox {
			float: none;
			margin: 0;
		}
		
		
		.transcript .banner {
			position: relative !important;
		}
		
		.transcript .content {
			padding-top: 0 !important;
		}
		
		.view_choices * {
			font-size: 12px;
		}
		
		.view_choices h3 {
			font-size: 12px;
		}

		.sequence_pages h3 {
			font-size: 14px;
		}
		
		.dualChoice {
			display: none !important;
		}

	}