body {
	font-family:		Verdana,sans-serif;
	color:				#444;
	padding:			0;
	margin:				0;
	margin-bottom:		100px;
	background-color:   #fff;
}

#topbanner {
	background-color:		#3a6295;
	max-height:				130px;
}

.bannerpic {
  max-width: 100%;
  max-height: 130px;
}

/*
#topbanner {
	background-repeat:		no-repeat;
	background-position:	center; 
	background-color:		#3a6295;
	text-align:				center;
	height:					130px;
}

@media (max-width: 991px) {
	#topbanner {
		background-image:	url("../images/banner-sky-mobile.jpg");
		height:				232px;
	}
	//body {font-size:		16px;}
}

@media (min-width: 992px) {
	#topbanner {
		background-image:	url("../images/banner-sky.jpg");
		height:				242px;
	}
	//body {font-size:		14px;}
}
*/

#tripgo {
	font-size:			0.8rem;
}

/*
#pagebanner {
	text-align:			center;
	color:				#fff;
	background-color:	#3a6295;
	margin-bottom:		20px;
	margin-top:			0;
	font-size:			1.2rem;
	padding:			8px;
}
*/

#tripbanner {
	text-align:			center;
	font-size:			1.1rem;
	color:				#fff;
	background-color:	#777;
	padding:			8px;
	margin:				10px auto;
	margin-bottom:		0;
	width:				90%;
}

#photobanner {
	text-align:			center;
	font-size:			1.0rem;
	color:				#4e709b;
	background-color:	#eee;
	padding:			8px;
	margin:				10px auto;
	margin-bottom:		0;
	width:				90%;
}

#mainPage {
	text-align:			center;
}

#biline {
	display:			flex;
	flex-direction:		row;
	justify-content:	space-between;
	align-items:		center;
	font-size:			0.9rem;
	margin-top:			0;
	margin-bottom:		8px;
	padding:			6px 10px;
	width:				90%;
	background-color:	#efefef;
}
#biline a {
	color:				#440066;
}
#pg_crumb {
	font-size:			0.8rem;
	font-style:			italic;
}

@media (max-width: 991px) {
	#content { margin:		0 10px; }
	#content img { margin:	5px 0; }
}
@media (min-width: 992px) {
	#content { margin:		40px; }
	#content img { margin:	10px; }
}


.btn {
	cursor:				pointer;
	color:				#fff;
	font-size:			0.8rem;
	text-decoration: 	none;
	background-color:	#4e709b;
	padding:			3px 11px;
	margin:				auto 2px;
	border:				0;
	border-radius:		8px;
}

.mapcontainer {
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	center;
}

#tripselect,#mapselect {
	font-size:			0.9rem;
	color:				#fff;
	background-color:	#3a6295;
	border:				0;
}

#trip_date {
	font-size:			0.9rem;
	font-style:			italic;
}

/* --------------------- overview ---------------------- */
#inpForm {
	display:			flex;
	flex-direction:		row;
	justify-content:	center;
	gap:				12px;
	text-align:			center;
	margin:				10px;
}
#inpForm div {
	padding:			4px 6px;
	background-color:	#f8f8f8;
	border:				1px solid #ddd;
}

#trip_popup {
	display:			none;
	position:			relative;
	top:				-500px;
	padding:			10px;
	margin:				auto;
	width:				40%;
	border:				1px solid #666;
	background-color:	#fff;
	box-shadow:			6px 6px 11px 0px rgba(0,0,0,0.5);
}
path {		/* google map region borders */
  stroke: #7a7;
  stroke-width: 1px;
}

.imgcontainer {
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	center;
}
.ov_img {
	cursor:				pointer;
	padding:			1px;
	max-height:			300px;
}

/* ------------------------ legend & submaps ------------------------ */
#submaps {
	font-size:			0.9rem;
	margin-top:			10px;
}

#legend_expl {
	color:				#777;
	font-style:			italic;
	font-size:			0.75rem;
	margin:				10px;
}

#legend {
	text-align:			center;
	margin:				auto;
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	space-evenly;
}

@media (max-width: 991px) {
	#legend {
		margin-top:			5px;
		width:				90%;
	}
}
@media (min-width: 992px) {
	#legend {
		margin-top:			10px;
		width:				60%;
	}
}

#legend img {
	display:			inline;
	margin-right:		3px;
}

.legendEnt {
	display:			flex;
	flex-direction:		row;
	align-items:		center;
}

.legendEnt div {
	color:				#666;
	font-size:			0.75rem;
	display:			inline;
}

/* ------------------------ Marker content ------------------------ */
.mrkrlinkTrip {
	text-align:			center;
	font-weight:		500;
	color:				#581b7e;
}
.mrkrlinkAlbum {
	text-align:			center;
	font-style:			italic;
	color:				#581b7e;
}
.mrkrlinkJournal {
	text-align:			center;
	font-weight:		bold;
	color:				#581b7e;
}

/* ------------------------ album page, and solo display ------------------------ */
#albumdiv {
	display:			flex;
	flex-direction:		row;
	flex-flow:			wrap;
	align-items:		flex-start;
	justify-content:	center;
}
.albumpic {
	cursor:				pointer;
	max-height:			250px;
	margin:				1px 3px;
	border:				3px solid #fff;
}
.captioned {
	border:				3px solid #3fa94b;
}

/* ------------------------ Journals: could use weeding out! ------------------------ */
.journaltext {
	text-align:			left;
	max-width:			90%;
}

@media (max-width: 991px) {
	.journaltext { margin: 5px auto; }
}
@media (min-width: 992px) {
	.journaltext { margin: 20px auto; }
}

.deemph {
	font-size:			90%;
}

strong {
	font-weight:		bold;
	font-style:			italic;
}

.journalnote {
	margin:				10px auto;
	font-style:			italic;
	font-size:			12px;
	color:				#990000;
	max-width:			750px;
}

.journalpic {
	margin:				0 0 20px 0;
	text-align:			center;
}
.journalpic img {
	max-height:			600px;
}

@media (max-width: 991px) {
	.journalpic img { max-width: 100%; }
}
@media (min-width: 992px) {
	.journalpic img { max-width: 600px; }
}

.piccaption {
	font-size:			0.8rem;
	text-align:			center;
	color:				#004488;
}

.picrow {
	width:				100%;
	text-align:			center;
	margin-bottom:		20px;
}

.picrow div {
	margin:				0 8px 15px 8px;
	display:			inline-block;
}

.picrow img {
	margin:				0;
	max-width:			470px;
}

.hrrow {
	text-align:			center;
	margin:				30px 0 10px 0;
}
.hrrow div {
	border-top:			1px solid #aaa;
	width:				85%;
	margin:				auto;
}

.smallVpic {
	max-height:			480px !important;
}
.smallHpic {
	max-width:			500px !important;
}