/* fonts */

@font-face {
  font-family: 'sngNav';
}

body {
  font-family: "acumin-pro", Verdana, sans-serif;
  font-size: 16px;
  /*"Trebuchet MS", "Lucida Grande", Lucida, Calibri, Verdana, 
  Arial, "Liberation Sans", FreeSans, sans-serif;*/
}

pre,
code {
  font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

blockquote {
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
/* end fonts */

/* basics */
html, body {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	background-color: rgb(249, 254, 255);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

h1 {
		font-size: 2.5rem;
		margin-top: 0.2rem;
		margin-bottom: 0.4rem;
		color: #B5B5B5;
}

h2 {
		font-size: 1.5rem;
		margin-top: 0.1rem;
		margin-bottom: 0.3rem;
		color: #858585;
}

h3 {
		font-size: 1.2rem;
		margin-top: 0.1rem;
		margin-bottom: 0.2rem;
		margin-block-end: 0px;
		color: #555555;
}

a {
  text-decoration: none;
  color: #4B69A6;
}

a:visited {
  text-decoration: none;
}

a:hover {
	text-decoration: dashed;
}



/* end basics */

/* @media (min-width: 1200px){ */
/* global layout */
	#outer_wrapper {
		display: flex;
		flex: 0 0 100%;
		width: 100%;
		align-items:center;
		flex-direction: column;
	}
		
	#contents {
		display: flex;
		flex-direction: column;
		width: 90%;
		min-height: 400px;
		background-color: white;
		border-left: 1px solid #EEE;
		border-right: 1px solid #EEE;
	}
	
	.fullwidth{
		display: flex;
		flex-direction: column;
	}
	
/* end global layout */	

/* top navigation */
	#mainNavigation {
		background: url(../images/tlh_logo.png) left no-repeat;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 90%;
		height: 60px; 
		background-color: #131127;
	}
	
	#mainNavigationIdBlock {		
		display: block;
		flex-direction: column;
		justify-content: left;
		padding-left: 70px;
		min-width: 180px;
		height: 50px;
	}
	
	#mainNavigation span#sitename {
		display: block;
		font-size: 18px;
		margin-bottom: 7px;
		margin-left: 2px;
		color: white;
		line-height: 1rem;
	}	

	#mainNavigation span#author {
		display: block;
		font-size: 12px;
		line-height: 0;
		margin-left: 2px;
		color: white;
	}

	#mainNavigation span.dot {
		color: #D58A00;
	}
	
	#mainNavigationLinks {
		font-size: 1.2rem;
		display: flex;
		align-items: bottom;
		padding-right: 2rem;
	    flex: 2 0 auto;		
	}
	
	@media (max-width: 1200px){ 
		#mainNavigationLinks {
			font-size: 0.8rem;
			display: flex;
			align-items: bottom;
			padding-right: 1rem;
			flex: 2 0 auto;		
		}
	}
	
	.navListItem, .navLastItem {
		text-decoration: none;
		color: white;
	}
	
	.navselect {
		color: orange;
	}
	
	.navListItem {
		margin-right: 2rem;
	}
	
	.navLastItem {
		margin-left: auto;
	}

/* end top navigation */

/* footer */
	#footer {
		width: 90%;
		display: flex;
		flex-direction: column;
		background-color: #131127;
		height: 120px;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		align-items: center;
		
	}
	
	#footerRow1, 
	#footerRow2 {
		width:95%;
		display: flex;
		flex-direction: row;
		color: white;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		margin: 1em 1em 0 0;
	}
	
	#footer_search span {
		display: block;
	}
	
	#social_block a {
		display: inline-block;
		height: 40px;
		width: 40px;
		text-indent: -9999px;
		outline: none;
		text-align: left;
	}

	#social_block .flickr {
		background: url(../images/float_icons/flickricon.png) right top no-repeat;
	}

	#social_block .twitter {
		background: url(../images/float_icons/twitter.png) right top no-repeat;
	}
	
	#footerCopyright span{
		display: block;
		text-align: right;
	}
/* end footer */


/* home page */
	#contentTop {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(236, 236, 236);
		border-bottom: 8px solid #888;	
	}
	
	#bannerPhoto{
		padding-top: 1rem;
	}
	
	img.homephoto {
		padding: 10px 10px 5% 10px;
		background-color: #F9F9F9;
		border-right: 1px solid silver;
		border-bottom: 1px solid silver;
		border-radius: 3px;
		display: block;
		margin: 0 auto 1em auto;
	}	
	
	#bannerPhotoCaption {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 1rem;
	}
	
	.bannerPhotoTitle{
		display: flex;
		font-size: 150%;
		padding-bottom: 0.5rem;
		color: #666;
		text-shadow: 2px 2px #DADADA;
	}
	
	.bannerPhotoGalleryLink{
		display: flex;
		font-size: 90%;
		color: #AAA;
	}
	
	.bannerPhotoGalleryLink a{
		color: #888;
		margin-left: 0.3em;
	}
	
	#contentBottom {
		display: flex;
		align-items: left;
		justify-content: center;
		background-color: white;
	}
	
	#destinationsContent {
		padding-left: 0.5em;
		padding-bottom: 1em;
	}
	
	#home #tagContainer {
		/* transform: translateY(-90%); */
		padding-left: 2em;
		margin-top: -3em;
		
	}	
	
	#destinationsContent h1
	 {
		margin-bottom: 2rem;
	}
	
	#home .galleryLink {
		text-decoration: none;
		font-size: 2rem;
		color: #B5DDE8;
		font-weight: bold;
	}
	
	#home .galleryLink:not(:last-child)::after {
		content: "\0020\00b7";
	}
	
	#photoDiary, #blogLatest{
		border-top: 5px solid #CCCCCC;	
		padding-left: 0.5em;
		padding-bottom: 1em;
	}
	
	#photoDiaryContent {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		/* display: flex;
		flex-direction: row; */
		/* -ms-overflow-style: none;
		scrollbar-width: none;	 */	
	}
	
	/* #photoDiaryContent::-webkit-scrollbar {
		display: none;
	} */
	

	.diarySummaryItem {
		display: inline-flex;
		width: 140px;
		padding-right: 10px;
	}
	
	.diaryEntryDateHome {
		color: #B5B5B5;
		font-size: 1rem;
		padding-left: 0.7em;
		width: 130px;
		overflow-wrap:break-word;
		height: 7em;
		white-space: normal;
	}
	
	.alldiaries{
		font-size: 50%;
		color: #1C1C1C;
	}
	
	/* versions for Photo Diary page */
	
	.photoDiarySummary {
		display: flex;
		align-items: center;		
		flex-direction: row;
		flex-flow: row wrap;
		background-color: white;
	}
	
	.diaryGridItem {
		display: flex;
		flex: 0 0 50%;
		padding-bottom: 1em;
		/* background-color: indigo; */
	}
	
	.gridContent{
		display: flex;
		flex-direction: row;
		align-items: left;
		/* background-color: indigo; */
	}
	
	.diaryGridAnnotations {
		
		font-size: 2.5em;
		font-weight: bold;
		color: black;
		overflow-wrap:break-word;
		/* background-color: yellow; */
	}
	
	.gridThumbnail{
		display: flex;
		/* background-color: green; */
		padding: 0 1em 0 1em;
	}
	
	.diaryGridEntryDate{
		font-weight: normal;
		color: rgb(112, 112, 112);
	}
	
	.diaryGridEntryDate::before {
		content: "\a";
		white-space: pre;
	}
	
	#photoDiaryIntro {
		max-width: 80em;
	}


	#photoDiary a:hover {
		text-decoration: none;
	}
	
	#blogLatestContent{
		display: flex;
		flex-direction: row; 
	}
	
	#blogLatest #articles,
	#blogLatest #comments {
	
		width: 50%;
	}
	
	#blogLatest .blogListEntry {
		font-size: 1rem;
		margin: 0em 0 0.1em 0em;
		font-style: normal;
	}
	
	#blogLatest .date {
		font-size: 80%;
		color: #777;
	}
	

/* end home page */

/* right column page layout */

	#container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: white;
	}

	#leftcolumn {
		display: flex;
		flex-direction: column;
		width: 80%;
		max-width: 80rem;
		margin: 0.5em 1em 1em 0.5em;
	}
		
	body#pblog #branding {
		background: url(../images/pblog_banner_2016.jpg) no-repeat 
		transparent right top;
		background-color: #B5B5B5;
		height: 80px;
		width: 100%;
	}
	
	body#eve #branding {
		background: url(../images/eve_banner.jpg) no-repeat transparent right top;
		background-color: #B5B5B5;
		height: 80px;
		width: 100%;
	}
	
	body#pdiary #branding {
		background: url(../images/pblog_banner_2016.jpg) no-repeat transparent right top;
		background-color: #B5B5B5;
		height: 80px;
		width: 100%;
	}
	
	body#photogallery #branding {
		background: url(../images/pblog_banner_2016.jpg) no-repeat transparent right top;
		background-color: #B5B5B5;
		height: 80px;
		width: 100%;
	}
	
	body#info #branding {
		background: url(../images/pblog_banner_2016.jpg) no-repeat transparent right top;
		background-color: #B5B5B5;
		height: 80px;
		width: 100%;
	}

	#sidebar {
		display: flex;
		flex-direction: column;
		max-width: 230px;
		background-color: #4B69A6;
		/* background-color: #2d53a78a; */
		padding-left: 1em;
		color:white;
	}
	
	#sidebar a {
		color: #e0f2ff;
	}
	
	.sidebarTitle {
		background-color: #211a6e;
		color: white;
		padding: 0.2em;
		font-size: 90%;
		margin-left: -16px;
		text-transform:uppercase;
	}
	
	.sidebarItem li {
		list-style-type: none;
		margin-bottom: 0.3em;
	}
	
	.sidebarItem ul {
		margin-left: 0em;
		padding-left: 0em;
	}
	
	.sidebarLink {
		font-style: italic;
		padding-top: 1em;
	}

/* end right column page layout */

/* blog */

	 
	.blogDescription {
		color: #CEDDF1;
		padding: 10px 0 0 10px;
		text-align: left;
		opacity: 0.8;
		font-size: 120%;
		text-shadow: 0.1em 0.1em #808080;
	}
	
	.blogDescriptionBlog {
		color: white;
		font-size: 140%;
		font-weight: bold;
	}
	
	.blogDate,
	.tagline {
		font-size: 90%;
		margin-left: 1em;
		border-bottom: 1px solid silver;
	}
	
	.blogBody,
	#comments {
		margin-left: 1em;
	}
	
	.blogBody img {
		display: block;	
   		margin: auto;
		padding-bottom: 0px;
		border: 1px solid gray;
		max-width: 90%;
	}

	#leftcolumn img.noborder {
		border: none;
	}

	#leftcolumn img.photo {
		border: 15px solid #EEEFEE;
		margin-bottom: 0.5em;
		border-radius: 4px;
	}
	
	.entry h2{
		font-style: italic;
		margin-left: 2em;
		margin-top: -1em;
	}
	
	.entry {
		border-bottom: 8px solid #888;
	}
	
	.entry_list {
		border-bottom: 2px solid #888;
	}
	.endplate {
		margin-top: 1em;
		margin-bottom: 1em;
	}

	.endimage {
		padding: 20px 0 20px 0;
		display: block;
   		height: auto;
   		margin: auto;
		border: none;
	}
	
	.commentHeading {
		margin-bottom: 1em;
	}
	
	.commentAuthor {
		display:block;
		font-size: 90%;
		margin-left: 1em;
	}
	
	.commentBody {
		margin: 1em 0 2em 1em;
	}
	
	#comments fieldset {
		border: none;
		display: flex;
		flex-direction: column;
	}
	
	 #comments #commenter_info input{
		display: block;
	} 
	
	#comments #commenter_info, #comment_captcha {
		margin-top: 2em;
		font-size: 90%;
	}
	
	#comments textarea {
		width: 90%;
		height: 10em;
		margin-bottom: 1em;
	}
	
	#comments #options {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 90%;
	}
	
	.checkbox{	
		font-size: 80%;
	}
	
	.submit {
		font-size: 1em;
		margin: 1em;
	}
	
	#comment_captcha input{
		height: 2em;
		font-size: 100%;
		width: 135px;
	}
	
	.captcha{
		width: 140px;
		display: block;
	}
	
	.sidebarTag{
		text-decoration:none;
	}
	
	.sidebarTag:not(:last-child)::after {
		content: "\0020\00b7";
	}
	
	p.caption, p.blogcaption {
		font-size: 80%;
		font-style: italic;
		font-weight: bold;
		margin-bottom: 1em;
		padding-left: 16px;
		padding-bottom: 0.2em;
		color: #333;
		display: block;
		background-color: #F0F0B2;
}

/* end blog */

/* galleries */
	.portfolio {
		display: flex;
		align-items: center;		
		flex-direction: row;
		flex-flow: row wrap;
		align-items: center;
		justify-content: left;
	}
	
	.portfolioItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* flex: 0 0 50%; */
		padding: 1em;
	}
	
	.portfolioItemTitle::before{
		content: "\a";
	}
	
 	.portfolioItemTitle a{
		
		text-decoration: none;
	}
	
	#photoGallery {
		display: flex;
		flex-direction: row;
	}
	
	#thumbnailsDescription {
		max-width: 15%;
		min-width: 200px;
		margin: 1em;
		color: #AAA;
	}
	
	#thumbnails {s
		padding: 1em 0 2em 2em;
	}
	
	#thumbnails a:hover, a:focus, a:active{
		text-decoration: none;
		outline: 0;
  		border: none;
	}

/* end galleries */

/* publications */
	#publicationsWrapper {
		max-width: 800px;
	}

/* common */

	img.photoThumbnail {
		margin: 10px 5px 2px 10px;
		padding: 8px 8px 14px 8px;
		background-color: #F2F2F2;
		border-right: 1px solid silver;
		border-bottom: 1px solid silver;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	img.photoThumbnailLarge {
		padding: 10px 10px 3% 10px;
		background-color: #F9F9F9;
		border-right: 1px solid silver;
		border-bottom: 1px solid silver;
		border-radius: 3px;
		/* display: block; */
		margin: 0 auto 1em auto;
	}

/* end common */
	
/* } */ // end min-width: 1200px