/* 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;
	}
	
	
	.banner .logo {
		float: left;
		height: 72px;
		margin-right: 14px;
		border-bottom: 1px solid #444444;
	}
	
	
	.mhs_backref {
		float: right;
		background: #555;
		color: #ddd;
		padding: 10px 14px;
		text-align: center;
		font-style: italic;
		font-size: 14px;
		border-radius: 6px 6px;
		-moz-border-radius: 6px 6px;
		-webkit-border-radius: 6px 6px;
	}
	
	.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 {
	}
	
	.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: 350;
		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%;
	}
	
	/* font -sizes */
	.transcript_text.size1 { font-size: 12px;	}
	.transcript_text.size2 { font-size: 14px;	}
	.transcript_text.size3 { font-size: 16px;	}
	.transcript_text.size4 { font-size: 18px;	}
	.transcript_text.size5 { font-size: 20px;	}


	.transcript_text .trans_pb a[name] {
		padding-top: 86px;
	}
	
	.transcript_text,
	.transcript_text * {
		-webkit-touch-callout:text;
		-webkit-user-select: text;
		-moz-user-select: text;
		user-select: text;
	}
	
	.transcript_text .backToTop {
		float: right;
		color: #222 !important;
		font-size: 11px;
		font-family: Arial, sans-serif;
		background: white; 
		padding: 2px 6px;
		border-radius: 3px 3px;
		border: 1px solid #999999;
	}
	
	.transcript_text .backToTop:hover {
		text-decoration: none;
		background: #222;
		color: #bbb !important;
	}

	.transcript_text,
	.transcript_text * {
		-webkit-touch-callout:text;
		-webkit-user-select: text;
		-moz-user-select: text;
		user-select: text;
	}
	
	
	/*dual mode only */
	#transcription_text {
		overflow: visible;
	}
	
	
	.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%;
	}
	
	
	
	
	.transcript_text {
		background: #f9f9f9;
		margin-left: auto;
		margin-right: auto;
		clear: both;
		padding: 28px;
		max-width: 800px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	
	
	
		
	.transcript_text .lb_symbol {
		padding: 10px 10px 10px 14px;
		font-size: 11px;
		color: #888;
		background: url(/database/graphics/lb.gif) 4px 8px no-repeat;
	}
	
	
	body.transcript .transcript_text .lb_symbol  {
		display: none;
	}
	body.transcript.dual .transcript_text .lb_symbol  {
		display: inline;
	}
	
	body.transcript.dual .transcript_text.no_lb .lb_symbol {
		display: none;
	}
	
	




	
/* 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;
	}
	
	
	
	
	@media (max-width: 600px) {
		
		.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;
		}

	}