/*
	THS.css	1.0	02/01/2025
	Copyright © 2024, 2025 Tukwila Historical Society. All Rights Reserved.
*/

/*
	Tukwila Historical Society website CSS file. Dependent on
	Principal_StyleControl.css being loaded.

	Author: Ed Hougardy
	Last modified: JUN 18, 2025
*/

/* Main page/body selectors */
html {
  overflow-y: scroll; /* Adds a vertical scrollbar */
}


body.default{background-color:var(--color--THS-primary-background);color:var(--color--primary-text);font:var(--font--primary-text);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);}

body.layout{
	align-items:flex-start;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;height:64px;
	justify-content:flex-start;
	min-width:840px;
	margin-top:0px;
	padding-top:0px;
}


div.layout_left {
	flex-grow:10;order:1;min-width:6px;
	min-height:700px;

}

div.layout_middle {
	flex-grow:0;order:2;min-width:840px;
	max-width:840px;
	min-height:700px;
	/*overflow-x: scroll;*/
}


div.layout_right {
		flex-grow:10;order:3;min-width:6px;
		min-height:700px;
}

#pcHeader{display:block}
#phoneHeader{display:none}

/* <header> element/child selectors */
header.fixed-header{position:fixed;top:0px;min-width:840px;
}

div.headercontent{align-items:flex-start;
background-color:var(--color--header-fill);
display:flex;
flex-direction:row;
flex-wrap:nowrap;height:64px;
justify-content:flex-start;
margin-top:0px;
max-height:64px;
min-height:64px;padding-top:0px;
position:fixed;
top:0px;
min-width:840px;
max-width:840px;

}




div.headerspace{flex-grow:0;min-width:8px;order:1;padding-left:0px;}
div.headerlogo{background-image:url("images/thsLogoHeader.png");background-position-y:3px;background-repeat:no-repeat;flex-grow:0;min-height:58px;min-width:70px;order:2;padding-left:0px;padding-top:5px;}
div.headertitle{color:var(--color--primary-text);flex-grow:3;font:var(--font--header-title);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);order:3;padding-top:4px;text-align:left;text-shadow:var(--text-shadow--header-title);}

div.headermenu{flex-grow:0;min-width:28px;order:4;padding-top:4px;width:28px;}
span.hamburgermenu{color:var(--color--primary-text);cursor:pointer;}

#hamburgerMenu{height:340px}

/* hamburgermenu dialog element/child selectors */
div.ui-widget-content{background-color:var(--color--THS-primary-background);color:var(--color--primary-text);}
div.ui-widget-header{background-color:var(--color--ui-widget-header-fill);color:var(--color--primary-text);}
span.ui-dialog-title{font:var(--font--ui-dialog-title);font-variation-settings:var(--font-variation-settings--primary-text);}
p.menulink{cursor:pointer;font:var(--font--menulink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;}



div.menulinkbar{font:var(--font--menulink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;color:var(--color--header-menu-link-bar)}
div.menulink{cursor:pointer;font:var(--font--menulink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;}


/* <main> element/child selectors */
main.main_content{} /* placeholder selector */
#spacer_section{min-height:68px;height:68px;max-height:68px;}
section.section_content{padding-top:190px} /* placeholder selector */
h2.section_h2{} /* placeholder selector */
div.heading{color:var(--color--primary-text);font:var(--font--heading);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);padding-top:10px;text-align:left;text-shadow:var(--text-shadow--heading);}
div#sectiontitle{text-align:center;}

div.para{font:var(--font--primary-text);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);padding-top:8px;text-align:left;}
div.parai{font:var(--font--primary-text);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);padding-top:8px;text-align:left;font-style:italic!important}
span.ths{color:var(--color--ths);font:var(--font--ths);font-variation-settings:var(--font-variation-settings--primary-text);font-size:var(--font-size--section-title);}
span.officertitle{color:var(--color--officers);font-size:14px;font-style:italic;font-variant:small-caps;font-weight:600;}
span.link{color:var(--color--para-link);cursor:pointer;font:var(--font--primary-text);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);font-weight:var(--font-weight--link)}
div.photocaption{color:var(--color--photo-caption);font-family:Montserrat;font-size:12px;font-weight:700;padding-top:0px;text-align:center;}

#golfphoto{
border:black 2px solid;
height:400px;
width:auto;
}

#buildingphoto{
border:black 2px solid;
height:auto;
width:840px;
}


#nelsenhouse{
border:black 2px solid;
height:auto;
width:840px;
}


#officersphoto{
border:black 2px solid;
height:400px;
width:auto;
}

#thsmap{
border:black 2px solid;
height:300px;
width:auto;
}

#anniversary {
height:auto;
width:840px;
}

#trickortreat {
height:auto;
width:840px;
}


#iSlide1{
border:black 2px solid;
height:260px;
width:auto;
}

#iSlide2{
border:black 2px solid;
height:260px;
width:auto;
}

#iSlide3{
border:black 2px solid;
height:260px;
width:auto;
}

/* <footer> element/child selectors */
footer.fixed-footer{bottom:0px;position:fixed;top:0px;width:100%;}
div.footerlinkcontainer{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-evenly;}
div.footerlink{cursor:pointer;flex-grow:0;font:var(--font--footerlink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;}
div.footerlink1{order:1;}
div.footerlink2{order:2;}
div.footerlink3{order:3;}
div.footerlink4{order:4;}
div.copyright{font:var(--font--copyright);font-variation-settings:var(--font-variation-settings--primary-text);padding-top:8px;text-align:center;}

ul.no-bullets {
  list-style-type: none;
}

li.space {
	padding-bottom:8px;
	color:var(--color--para-link);cursor:pointer;font:var(--font--primary-text);font-variation-settings:var(--font-variation-settings--primary-text);letter-spacing:var(--letter-spacing--primary-text);font-weight:var(--font-weight--link)
}

div.indentcontent {
  margin-left:60px;
  padding-bottom:12px;
}

		div.menu_button_container{align-items:center;
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;height:100px;
			justify-content:center;
			margin-top:64px;
			max-height:100px;
			min-height:100px;padding-top:0px;
			min-width:840px;
			max-width:840px;
			background-color:var(--color--THS-primary-background);
		}

		.ui-button {
			background: var(--color--header-menu-link-fill)!important; /* Green */
			color: white !important;
			font:var(--font--button) !important;
			font-variation-settings:var(--font-variation-settings--primary-text)!important;
		}
		.ui-state-hover{}
		.ui-state-active{}

		div.menu_links_container{
			align-items:center;
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;height:20px;
			justify-content:space-between;
			margin-top:0px;
			max-height:40px;
			min-height:40px;padding-top:0px;
			min-width:840px;
			max-width:840px;
			background-color:var(--color--header-menu-link-fill);
		}
		div.menulink{
			cursor:pointer;font:var(--font--menulink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;
			font-size:var(--font-size--28px);
			font-variation-settings: "wdth" 20;
		}
		div.menulinkbar{
		 font:var(--font--menulink);font-variation-settings:var(--font-variation-settings--primary-text);text-align:left;color:var(--color--header-menu-link-bar);
		 font-size:var(--font-size--28px);
		}
		section.section_content{padding-top:160px} /* placeholder selector */

		div.carousel{
			align-items:center;
			display:flex;
			flex-direction:row;
			flex-wrap:nowrap;height:20px;
			justify-content:space-between;
			max-height:260px;
			min-height:260px;padding-top:6px;
			min-width:840px;
			max-width:840px;
			padding-bottom:6px;
		}



/*
	++++++++++++++++++++++++++++++++++++++++++++
	RESPONSIVE DESIGN FOR MOBILE DEVICES
	++++++++++++++++++++++++++++++++++++++++++++
*/
@media only screen and (max-width:600px){

	#pcHeader{display:none}
	#phoneHeader{display:block}

	#menu_button_container{display:none}



	div.layout_left{display:none}
	div.layout_middle{max-width:350px;width:350px;padding-top:0px;a}
	div.layout_right{display:none}

	body.layout{max-width:350px;display:block;}
	#main_content{width:350px;max-width:350px;margin-left:14px;}

	section.section_content{padding-top:110px}

	div.headercontent{background-color:var(--color--header-fill);display:block;height:84px;margin-top:0px;max-height:84px;max-width:350px;min-height:84px;padding-top:0px;position:fixed;top:0px;width:350px;}
	div.headerspace{display:none;}
	div.headerlogo{background-image:url("images/thsLogoHeader.png");background-position-x:center;background-position-y:3px;background-repeat:no-repeat;background-size:14%;display:block;width:inherit;}
	div.headertitle{color:var(--color--primary-text);
		display:block;font:var(--font--header-title);
		font-variation-settings:var(--font-variation-settings--primary-text);
		font-size:26px;letter-spacing:var(--letter-spacing--primary-text);
		max-width:350px;
		padding-top:0px;position:fixed;
		text-align:center;text-shadow:var(--text-shadow--header-title);top:42px;width:350px;}

	div.headermenu{display:block;
		flex-grow:0;left:330px;min-width:28px;order:3;padding-top:0px;position:fixed;
		top:6px;width:28px;
	}

	h2.section_h2{font-size:0px;}

	#spacer_section{min-height:86px;height:86px;max-height:86px;}

	#MAPS{display:block!important}
	#partnerslogos{display:block !important;}

	#golfphoto{
		height:auto;
		max-width:350px;
		width:100%;
	}
	#buildingphoto{
		height:auto;
		max-width:250px;
		width:100%;
	}
	#nelsenhouse{
		height:auto;
		max-width:250px !important;
		width:100%;
	}

	#thsmap{
		height:auto;
		max-width:250px;
		width:100%;
	}
	#officersphoto{
		height:auto;
		max-width:350px;
		width:100%;
	}

	#partner-citylogo{
		height:auto;
		max-width:250px;
		width:100%;
	}
	#partner-4culture{
		height:auto;
		max-width:250px;
		width:100%;
	}

	#trickortreat {
		height:auto;
		max-width:350px;
		width:100%;
	}

	div.indentcontent {
  margin-left:30px;
  padding-bottom:12px;
}



	div.footerlinkcontainer{max-width:350px;width:350px}
	div.copyright{max-width:350px;width:350px}



#iSlide1{
border:black 2px solid;
height:auto;
max-width:250px;
width:100%;
}

#iSlide2{
border:black 2px solid;
height:auto;
max-width:250px;
width:100%;
}

#iSlide3{
border:black 2px solid;
height:auto;
max-width:250px;
width:100%;
}
		div.carousel{
			align-items:center;
			display:flex;
			flex-direction:column;
			flex-wrap:nowrap;height:20px;
			justify-content:space-between;
			padding-top:6px;
			min-width:350px;
			max-width:350px;
			padding-bottom:6px;
			min-height: 800px;
		}




}