/* html { width:100%; height:100%; }  */

html { /* margin:0; padding:0; height:100% */
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body { 	text-align:center; margin:0; padding:0; width:100%; /* height:100%;  */
	font-family:"Arial Unicode MS",Arial,"Trebuchet MS", sans-serif; 
	font-weight:bold; }
		

a { text-decoration:none; }
body.gallery>a img { position: relative; z-index:initial; }  /*  for the index thumbnails     box-shadow:5px 5px 10px 5px #555; */
body.gallery>a:hover img { box-shadow:4px 4px 16px black;  z-index:10; margin:-5px 2px 5px -2px ;}

img{border:0; padding:0; margin:0;} 

/*   CHEVRON usage: <span class="chevron left"></span>
.chevron::before, a.next:after,a.prev:before, a.back-index:before,.back-index a:first-child:before  {
	border-style: solid;
	border-width: 0.22em 0.22em 0 0;
	content: '';
	display: inline-block;
	position: relative;
	transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
	vertical-align: middle;
	height: .6em;
	width: .6em;
	left: 0;
	top: 0;
	margin: 0 .5em;
}
.chevron.right:before, a.next:after { transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); }
.chevron.bottom:before { transform: rotate(135deg) ; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -moz-transform: rotate(135deg); }
.chevron.left:before, a.prev:before { transform: rotate(-135deg); -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -moz-transform: rotate(-135deg);  }
   */
/*   CHEVRON usage: <span class="chevron left"></span>  or add tag.class to the definition below */
/*   uses border to make an upward pointing chevron then rotates it depending on second class (right bottom left) */
/*   if you have a nav element with a class of next you could either give it the chevron class on all your pages or alternatively
     just add it to the (all) chevron code and to the chevron.right code... */
.chevron::before, a.next:after,a.prev:before, a.back-index:before,.back-index a:first-child:before {
	border-style: solid;
	border-width: 0.22em 0.22em 0 0;
	content: '';
	display: inline-block;
	position: relative;
	-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); /*-o-transform: rotate(-45deg); -moz-transform: rotate(-45deg);*/
	    transform: rotate(-45deg); 
	vertical-align: middle;
	height: .6em;
	width: .6em;
	left: 0;
	top: 0;
	margin: 0 .5em;
}
/*  .chevron.right:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
.chevron.bottom:before { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg) ; }
.chevron.left:before { -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
 */
.chevron.right:before, a.next:after  { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.chevron.bottom:before { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg) ; }
.chevron.left:before, a.prev:before { -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }




.back-index { 
	display:block; /* not needed if it's a div, but needed to make a plain anchor tag screen width */
	text-align:left; 
	height:46px; /* make same height as app-button */	
	line-height: 46px; /* make same as bar height to center text vertically */
	}


footer { display:block; text-align:left; }
.back-index a { margin-right:2.5em; } /* space out multilpe links in .back-index div */
.back-index span { margin-right:2em; text-align:center; /* using span around current page (no-link) and showing a circle around it */
	/* elipse */
	display:inline-block; width:2.3em; height:2.3em; line-height:2.3em;
	padding: 0;
	border:1px solid;
	border-radius:50%;
	margin:0 1.15em 0 -1.15em; /* reduce margin to account for circle size */
	box-sizing: content-box;
}

body.gallery { font-size:0; } 
div.viewer { display:inline-block; width:auto; max-width:100%;   /* height:auto; max-height:100%; */
	/* font-size:0 to account for inherant white space with inline blocks -- inline-block to shrink wrap img so that buttons(blocks) size to it */
	/* any container for inline blocks with full specified widths must have either font-size zero OR no white space in the markup between children 
	   div.viewer max height or else phone in landscape can't view the whole image since you can't zoom down below 1x */
	font-size:0; 
	position: relative; 
	}


.viewer>img,.viewer>a>img { display:block; margin:auto; max-width:100%;  }  /* height:auto; max-height:100%; */
	/* margin auto ensures centering in case container div is made too wide by some other element */

.viewer .section { width:100%; position: relative; } /* relative: establish origin bottom/left of img nav */
.viewer .blurb {position: absolute; top:0; left:0; width:100%; } /* must state width here to keep same as pic */
.blurb p { display:inline-block;  margin:auto; width:100%;}

footer img { display:inline-block; vertical-align:middle;}
footer a { padding-right:2em; }


/* nav -buttons- */
.back-index, .prev, .next, footer 	{ padding:1em;  border:1px solid transparent; }
							footer	{ border-top:1px solid #777; }
.back-index	{ padding:0 1em; }
							
.prev, .next 						{ display:inline-block; width:49.98%; box-sizing: border-box; -moz-box-sizing: border-box; }
.prev:link:hover,.next:link:hover, .prev:visited:hover,.next:visited:hover, .back-index:hover, footer:hover { border:1px solid #777; background-color:#555; }
 /* a.prev:before   { padding-right:1em; content:"\3008"; } left arrow */
/* a.next:after    { padding-left:1em; content:"\25Be"; }  right arrow */
 /* a.next:after    { padding-left:1em; content:"\3009"; } right arrow 203a 3009*/
/* a.back-index:before,.back-index a:first-child:before { content:"\25B2\00a0\00a0";}  up arrow */

/* PREV/NEXT image navigation with chevron css */


/* STYLE   -- note that .section has no real size since .blurb inside is positioned absolute to maintain same width of image above 
			fontsize of nav controls made larger on small devices through screensize query below */
	.justify {text-align:justify; }  /* think I have this specifically for desert page.  */
.blurb p, .textleft { text-align:left; }
.blurb header p, .centertext { text-align:center; }

.viewer *, .gallery *  { font-size:18px; }
.viewer .blurb * { font-size:18px; }
.viewer>a, .gallery>a, .back-index *, div.back-index { font-size:x-small; }
.viewer h1, .viewer .blurb h1 { font-size:40px; }
.viewer h2, .viewer .blurb h2 { font-size:32px; }
.viewer h3, .viewer .blurb h3 { font-size:26px; }
.viewer h1,.viewer h2,.viewer h3,.viewer h4,.viewer p , .viewer ol { margin:7px 0; padding:0 10px; }
.viewer p { line-height:130%; }
.viewer>p:last-child { margin-bottom:2em; }  /* for some f'ed up css reason this also hits the last grandchild of every div, ie header... */
.viewer header h1+p { margin:0 0 1em; }
.blurb { padding-bottom:2em; } /* needs to be real padding and not just margin I think since it is pos absolute -- don't want padding below prev next when there is no blurb or heading... */

/* COLORS */

body	{ background-color:#333; color:#888; font-size:x-small; }
a  { color:inherit; } 	/* non link */
a:link, a:visited { color:#fff; }
		/* a:link:hover, a:link:active, a:visited:hover, a:visited:active  { color:#fc0; } */
.back-index { background-color:inherit; }

/* footer, footer a { color:#777; }
footer a:link, footer a:visited { color:#aaa; } */
/* p and h1... set in style
.section-number, .note { color:#999; }
div.figureleft p, div.figureright p {color:#999;} */



/* APP MENU (3-BARS)    */
	#app-menu-button {
		display:inline-block;
		position:absolute;
		top:0; right:0;
		height:48px; /* make same height as header (.back-index) that way app-menu-button doesn't have to be contained by back-menu (simple case just a-tag) */
		width:50px;
		/* border: 1px transparent;   */
		cursor:pointer ;
		-moz-box-sizing: content-box; box-sizing: content-box;
}
	#app-menu-button .app-menu-icon-bar {
		/* three app bars to create icon.    background: none repeat scroll 0% 0% white; */
		background-color: white;
		border:0;
		display: block;
	    width: 24px;
	    height: 3px;
	    margin: 15px auto 0;
	    border-radius:2px;
}
	#app-menu-button .app-menu-icon-bar + .app-menu-icon-bar {
	    margin-top: 5px;
}
	#app-menu-button:hover .app-menu-icon-bar, #app-menu-button:active .app-menu-icon-bar {
		box-shadow: 0 0 4px #fff;

}
	#app-menu-nav {
		display:none;
		border-bottom:3px solid  #fff;
		background-color:#2E69A6; /* js for app-button will take this color and apply it to button when showing menu */	
		background:#2E69A6 url('../common/images/aam-logo-watermark-lighterback.png') left top / contain no-repeat; 
}
	#app-menu-nav a {
		display:block;
		/* border-bottom: 1px solid #777; */
		padding: 5px;
		color: white;
		text-align:right;
		font-size:18px;
}
	#app-menu-nav a+a {
		border-top: 1px solid #4278AF;
}
	#app-menu-nav a:after    { padding-left:1em; content:"\3009"; }  /* right arrow */

	#app-menu-nav a:hover, #app-menu-nav a:active {
		background-color:#555;
		color:white;
}		
	#app-menu-nav span.separator {
		display:block;
		padding: 0 1em 0 0;
		text-align:right;
		color: #2E69A6;
		background-color: #4278AF; 
		font-size:13px;
		height:12px;
		line-height:10px;
}
	#app-menu-footer {
		position:fixed;
		display:none;
		bottom: 0;
		right:0;
		padding: 5px;
		text-align:center;
		/* font-family:"Arial Narrow","Arial Unicode MS",Arial,"Trebuchet MS", sans-serif; 
		font-style:italic;
		color: #aaa;
		background-color: rgba(255,255,255,.8); */
		color: white;
		background-color:#2E69A6; 
		background-color: rgba(46,105,166,.7); 
		font-size:18px;
		z-index:2;
		cursor:pointer;
}
	a#app-menu-footer:after { padding:0 1.7em; content:"x"; font-size:xx-small; vertical-align:top;}  /* right arrow */



/* show a 'notes' indicator through javascript if an annotation id is present and on small (mobile) screen:  */
.show-by-js { 
	display:none; 
}

@media all and (max-width: 751px) {
	body, .viewer *, .gallery * , .viewer>a, .gallery>a, .back-index * { font-size:small; }
	/* .prev, .next {  border:1px solid #555; */

	body.gallery>a img { margin:7px; } 
	body.gallery>a:hover img { margin:7px; box-shadow:none; z-index:initial; }

	/* .show-by-js { background-color:rgba(60,60,60,.3); display:inline-block; position:fixed; bottom:0; right:0; padding:.5em; } */
	.show-by-js { background-color:rgba(60,60,60,.3); position:fixed; bottom:1em; right:1em;  
		width:4em; height:4em; text-align: center; display:table; border-radius:2em;}
	.show-by-js a {   display: table-cell;  vertical-align: bottom; }
}