/* 
 Main site styles                                                                              
*/

/* CSS Version: V2_2501282050

When the CSS is updated, change the color code for the StyleVersionMark style to the next acceptable color +
AND update the suffix on the version number of each page that uses the stylesheet to the indicator for the syle color code */

	.StyleVersionMark {
		vertical-align: middle;
      height: 8px;
      width: 8px;
		background-color: Gold;
      border-radius: 50%;
      display: inline-block;
      }

/* Allowable Style Version Color Codes
	see https://www.w3schools.com/cssref/css_colors.asp
	DodgerBlue 
	Gold 
	LimeGreen 
	Plum 
	Salmon 

*/

   body {
		min-height:2000px;
		padding-top: 0px; 
		margin-top: 0px; 
		background-color: #333333; 
		color: #CCCCCC; 
		font-size:12pt; 
		font-family:verdana; 
		font-weight:normal;
		}
		
	p  {
		display: block;
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 0;
		margin-right: 0; 
		}

	h1  {
		color:#FFFFFF;
		padding-bottom: 0px; 
		font-size:18pt; 
		font-family:verdana; 
		font-weight:bold;
		}
	h2 {
		color:#FFFFFF; 
		font-size:12pt; 
		font-style: italic;
		}
	h3 {
		color:#FFFFFF; 
		font-size:12pt; 
		font-weight:normal;
		}
	hr {
		height:2px; 
		border-width:0; 
		/* color:#FFFFFF; */
		 background-color:#FFFFFF; 
		}
		
	a:link {
		color: #49baff;
		}
	a:visited {
		color: #49baff;
		}
	a:active {
		color: #49baff;
		} 
	a:hover {
		color: #8fea66;
		}
		
	mark { 
		background-color: yellow;
		color: black;	
	}

	.footer {
		position: relative;
		left: 0;
		bottom: 0;
		margin-top: 200px;
		border: 1px #4d4d4d;
 		border-style: solid none none none;
  		Padding: 10px;

		width: 100%;
		color: #CCCCCC;
		font-size:8pt;
		text-align: center;
		}
	
	.indentedbody { 
		margin-left: 45px; 
		margin-right: 45px;
	}
	
	.hide-on-big-scrn {
		/* Hides element on big screen, but displays on small and med screens  */ 
		display:none;
	}
	.show-on-big-scrn { 
		/* Displays element on big screen only  */
		display:inline-block;
	}
	.show-on-med-scrn {
		/* Displays element on medium screen only  */ 
		display:none;
	}
	.show-on-small-scrn { 
		/* Displays element on small screen only  */
		display:none;
	}
	
	/* Id for use with long bulleted lists */
	#longlist { 
		margin-left: 45px;
		margin-right: 45px;
	}
	#longlist ul { 
		padding-bottom:10px;
		padding-top:5px;
	}
	#longlist li { 
		padding-top:10px;
	}
	#longlist  ul > ul { 
		color:  #a6a6a6; 
		font-size:11.5pt;
		font-style: italic;
	}
		
	#sitequote {
		/* This style will only apply to elements with id="sitequote" */
		font-size:10.5pt;
		/* color: #CCCCCC; */
		font-style: italic;
		margin-left: 75px;
		margin-right: 75px;
		line-height: 25px;
		}
	
	/* Styles for trip log tables (triplogtable) */
	#triplogtable table { 
		font-size: 10pt;
		text-align: left;
		margin-left: 45px;
		}
	#triplogtable td {
		width: 80px;
		padding: 5px;
		} 
	#triplogtable th { 
		padding: 5px;
		}
	#triplogtable tr:nth-child(even){
		background-color: #D9D9D9; color: black;
		}
	#triplogtable tr:nth-child(odd){
		background-color: #F2F2F2; color: black;
		}
	
		
	/* Styles for chronology page */
	#chronology li {
		margin-top: 16pt;
		}
	
	#chronology ul {
		margin-top: 8pt; 
		}
	
	
	/* Styles for floating inline photos & text boxes */
	#inlinephoto { 
		Float: right; 
		text-align: center; 
		font-size: 9pt; 
		/*	color must be specified using a class */
	}
	#inlinephoto img { 
		width: 450px; 
		height: auto;
	}
	#inlinephoto ul { 
		margin-left: 45px;
		text-align: left; 
	}
	#inlinephoto_small { 
		Float: right; 
		text-align: center; 
		font-size: 9pt; 
		/*	color must be specified using a class */
	}	
	#inlinephoto_small img { 
		width: 275px; 
		height: auto;
	}
	#inlinephoto_small ul { 
		margin-left: 45px;
		text-align: left; 
	}
	#inlinetextbox { 
		Float: right; 
		width: 300px;
		text-align: left; 
		font-size: 11pt;
		padding: 15px; 
		border: solid; 
		/*	color must be specified using a class */
	}


	/* Styles for Mountain Conditions Color Scheme */
	#mtnconditions h1 {
		color: #CCCCCC;
	}
	#mtnconditions h2 {
		color: #CCCCCC;
	}
	#mtnconditions h3 {
		color:#CCCCCC; 
		}
	#mtnconditions hr {
		background-color: #CCCCCC;
	}
	
	#mtnconditions .color1 {
		color: #003399;
	}
	#mtnconditions .bckg1 { 
		background-color: #003399; 
		}
	#mtnconditions .color2 {
	 	color:#3366CC;
	}
	#mtnconditions .bckg2 { 
		background-color: #3366CC; 
		}
	#mtnconditions .color3 {
		color: #6699FF;
	}
	#mtnconditions .bckg3 { 
		background-color: #6699FF; 
		}
	#mtnconditions .color4 {
		color: #FF9966;
	}
	#mtnconditions .bckg4 { 
		background-color: #FF9966; 
		}
	
	/* Styles for mountaineering Color Scheme */
	#mountaineering h1 {
		color: #6699FF;
		}
	#mountaineering h2 {
		color: #6699FF;
		}
	#mountaineering h3 {
		color:#6699FF; 
		}
	#mountaineering hr {
		background-color: #3366CC;
		}
	
	#mountaineering .color1 {
		color: #003399;
		}
	#mountaineering .bckg1 { 
		background-color: #003399; 
		}
	#mountaineering .color2 {
	 	color:#3366CC;
		}
	#mountaineering .bckg2 { 
		background-color: ##3366CC; 
		}
	#mountaineering .color3 {
		color: #6699FF;
		}
	#mountaineering .bckg3 { 
		background-color: #6699FF9; 
		}
	#mountaineering .color4 {
		color: #FF9966;
		}
	#mountaineering .bckg4 { 
		background-color: #FF9966; 
		}

	/* Styles for motorcycling Color Scheme */
	#motorcycling h1 {
		color: #CC6666;
		}
	#motorcycling h2 {
		color: #CC6666;
		}
	#motorcycling h3 {
		color:#CC6666; 
		}
	#motorcycling hr {
		background-color: #993333;
		}
	#motorcycling .color1 {
		color: #660000;
		}
	#motorcycling .bckg1 { 
		background-color: #660000; 
		}
	#motorcycling .color2 {
		color: #993333;
		}
	#motorcycling .bckg2 { 
		background-color: #993333; 
		}
	#motorcycling .color3 {
		color: #CC6666;
		}
	#motorcycling .bckg3 { 
		background-color: #CC6666; 
		}
	#motorcycling .color4 {
		color: #FFCC99;
		}
	#motorcycling .bckg4 { 
		background-color: #FFCC99; 
		}

	/* Styles for travel Color Scheme */
	#travel h1 {
		color: #FF9966;
		}
	#travel h2 {
		color: #FF9966;
		}
	#travel h3 {
		color:#FF9966; 
		}
	#travel hr {
		background-color: #CC6633;
		}
	#travel .color1 {
		color: #993300;
		}
	#travel .bckg1 { 
		background-color: #993300; 
		}
	#travel .color2 {
		color: #CC6633;
		}
	#travel .bckg2 { 
		background-color: #CC6633; 
		}
	#travel .color3 {
		color: #FF9966;
		}
	#travel .bckg3 { 
		background-color: #FF9966; 
		}
	#travel .color4 {
		color: #8CB3D9;
		}
	#travel .bckg4 { 
		background-color: #8CB3D9; 
		}

			
	/* Styles for 3 column Link Galleries - these styles will only apply to images in elements with id="pagegallery" */
	#pagegallery {
		/* line-height:0; */
		column-count:3;
		Column-gap:10px;
		}
	#pagegallery img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;  /* to match column gap */
		}
	#pagegallery figure {
		border: 1px #FFFFFF solid; 
		padding: 5px;
		margin: 0px;
		font-size:10pt;
		Float:center;
		} 
	#pagegallery figcaption {
		text-align: center;
		margin-bottom: 10px;
		}	
	#pagegallery figure:hover {
		border: 2px #FDBA12 solid;
		color: #FDBA12;
		}
	#pagegallery img:hover {
		filter: sepia(100%) contrast(75%);
		}


	/* Styles for 4 column photo Galleries - these styles will only apply to images in elements with id="photogallery" */
	#photogallery {
		column-count:4; 
		Column-gap:10px;
		column-width: 175px;
		}
	#photogallery img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;  /* to match column gap */
		/* filter: grayscale(100%);   makes images grayscale */
		}
	#photogallery figure {
		border: 1px #CCCCCC solid; 
		padding: 0px;
		margin: 0px; 
		font-size:10pt;
		Float:center;
		}
	#photogallery figcaption {
		/* background-color: black; */
		/* color: white; */
		/* font-style: italic; */
		/* padding: 5px; */
		text-align: center;
		margin-bottom: 10px;
		}	
	#photogallery figure:hover {
		border: 2px #FDBA12 solid;
		color: #FDBA12;
		}
	#photogallery img:hover {
		filter: sepia(100%) contrast(75%);
		}
		
	.linkicon { 
		height: 40px;
		Float: left;
		Padding-top:2px;
		}
	
	.linktext { 
		/* padding-top: 12px; 
		Padding-bottom: 5px; */
		/*padding-left: 47px; */
		padding-left: 0px;
		font-weight: bold;
		text-align: left;
		text-indent: 0%;
		}

	.constructionicon { 
		height: 40px;
		Float: left;
		Padding-top:0px;
		margin-left: 20px;
		}

	.constructiontext { 
		text-align: left;
		width: 600px;
		margin-left: 75px;  
		border-style: solid; 
		border-color: #585858; 
		border-left-width: 10px; 
		border-left-color: #3366CC; 
		background-color: #6699FF; 
		color: black; 
		padding: 10px;
		}

	/* The iframegallery id is no longer used 
	
	#iframegallery {
		column-count:3; 
		column-gap:10px;
		column-width: 675px;
		}
	#iframegallery img {
		width: 650px;
		height: auto;
		margin-bottom: 10px;  
		}		
	#iframegallery iframe {
		border: 1px #CCCCCC solid;
		padding: 0px;  
		width: 650px;
		height: 706px; 
		margin-bottom: 10px;
		}
	#iframegallery figure {
		padding: 10px;
		border: none;
		margin-top: 20px; 
		font-size:10pt;
		text-align:center;
		display:inline-block;
		width:650px;
		}
	#iframegallery figcaption {
		text-align: left;
		margin-bottom: 10px;
		vertical-align: bottom;
		}	  

	*/
		
		
	/* Classes for iframes in Mountain Conditions pages */
	
	.iframegallery {
		column-count:3; 
		column-gap:10px;
		column-width: 675px;
		}
	img.iframegallery  {
		width: 650px;
		height: auto;
		margin-bottom: 10px;  
		}		
	iframe.iframegallery {
		border: 1px #CCCCCC solid;
		padding: 0px;  
		width: 650px;
		height: 706px; 
		margin-bottom: 10px;
		}
	figure.iframegallery {
		padding: 10px;
		border: none;
		margin-top: 20px; 
		font-size:10pt;
		/* Float: center; */
		text-align:center;
		display:inline-block;
		width:650px;
		/*height: 760px;  */
		}
	figcaption.iframegallery {
		text-align: left;
		margin-bottom: 10px;
		vertical-align: bottom;
		}	  


	/* make the pagegallery and photogallery reduce to 1 column in screens < 700px wide */
	@media (max-width: 850px) {
		#photogallery {
			column-count: 2;
		}
		#inlinephoto img { 
			width: 250px; 
			height: auto;
		}
		#inlinephoto_small img { 
			width: 250px; 
			height: auto;
		}
		.indentedbody { 
			margin-left: 3px; 
			margin-right: 3px;
		}
		.show-on-big-scrn { 
			/* Displays element on big screen only  */
			display:none;
		}
		.show-on-med-scrn {
			/* Displays element on medium screen only  */ 
			display:inline-block;
		}
		.show-on-small-scrn { 
			/* Displays element on small screen only  */
			display:none;
		}
	}

	@media (max-width: 700px) {
	
		.hide-on-small-scrn {
			/* Hides element on small screen, but displays on big and med screens  */
			display:none;
		}
		.hide-on-big-scrn { 
			/* Hides element on big screen, but displays on small and med screens  */
			display:inline-block;
		}		
		.show-on-big-scrn {
			/* Displays element on big screen only  */ 
			display:none;
		}
		.show-on-med-scrn {
			/* Displays element on medium screen only  */ 
			display:none;
		}
		.show-on-small-scrn { 
			/* Displays element on small screen only  */
			display:inline-block;
		}
		#longlist { 
			margin-left: 5px;
			margin-right: 3px;
		}
		#pagegallery {
			column-count: 1;
		}
		#photogallery {
			column-count: 1;
		}
		.indentedbody { 
			margin-left: 3px; 
			margin-right: 3px;
		}
		#inlinephoto ul { 
			margin-left: 10px; 
		}
		#inlinephoto_small ul { 
			margin-left: 10px; 
		}
		#inlinetextbox { 
			/* Float: right; */
			width: 200px;
			/* text-align: left; 
			font-size: 11pt; */
			padding: 5px; 
			/* border: solid; */
			/*	color must be specified using a class */
			}

		/* The iframegallery id is no longer used
		
		#iframegallery {
			column-count:1; 
			column-gap:10px;
			column-width: 300px;
			}
		#iframegallery img {
			width: 275px;
			height: auto;
			margin-bottom: 5px;  
			}
		#iframegallery iframe {
			border: 1px #CCCCCC solid;  
			width: 275px;
			height: 328px;
			margin-bottom: 5px;
			}
		#iframegallery figure {
			padding: 5px;
			border: none;
			margin: 0px; 
			font-size:10pt;
			width: 300px;
			height: auto;
			text-align:center;
			display:inline-block;
			}
			
		*/
			
	/* Classes for iframes in Mountain Conditions pages */
	
	.iframegallery {
		column-count:1; 
		column-gap:10px;
		column-width: 300px;
		}
	img.iframegallery  {
		width: 275px;
		height: auto;
		margin-bottom: 5px;  
		}		
	iframe.iframegallery {
		border: 1px #CCCCCC solid;
		width: 275px;
		height: 328px; 
		margin-bottom: 5px;
		}
	figure.iframegallery {
		padding: 5px;
		border: none;
		margin: 0px; 
		font-size:10pt;
		width: 300px;
		height: auto;
		/* Float: center; */
		text-align:center;
		display:inline-block;
		}
			
		.linkicon { 
			display: none;
			}
	
		.linktext { 
			padding-left: 0px;
			font-weight: normal;
			text-align: left;
			}
		.constructionicon { 
			/*height: 40px;
			Float: left;
			Padding-top:0px; */
			margin-left: 5px;
			}

		.constructiontext { 
			width: 220px; 
			margin-left: 65px;
			font-size:10pt;  
			/* text-align: left;
			border-style: solid; 
			border-color: #585858; 
			border-left-width: 10px; 
			border-left-color: #3366CC; 
			background-color: #6699FF; 
			color: black; 
			padding: 10px; */
			}

		
	}