@charset "UTF-8";

/* d09.css: styles for Senate District 9's pages, moved from their <style> blocks (CSS plan, Phase 3).
   Each page sets $page_class (on <body>) and lists this file in $page_css; :where() scopes a rule to its page
   without adding specificity. No media attribute: like the <style> blocks, these rules apply in print too. */

/* == == casework.php only == == */

:where(.pg_casework) div.nlform {
	width: 90%;
}

:where(.pg_casework) div.nlform input[type="text"] {
	width: 95%;
	margin: auto;
	margin-bottom: 1em;
}

:where(.pg_casework) div.nlform input[type="email"] {
	width: 95%;
	margin: auto;
	margin-bottom: 1em;
}

:where(.pg_casework) div.nlform input[type="date"] {
	width: 25%;
	margin: auto;
	margin-bottom: 1em;
}

:where(.pg_casework) div.nlform fieldset {
	box-sizing: border-box;
	min-inline-size: auto;
	width: 96%;
	margin: 0;
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

:where(.pg_casework) div.nlform fieldset legend {
	background-color: #eee;
	padding: .4em;
	border: 1px solid #000;
}

:where(.pg_casework) div.nlform label {
	font-weight: bold;
	line-height: normal !important;
	font-size: 1em;
}

@media (max-width: 740px) {
	:where(.pg_casework) div.nlform input[type="date"] {
		width: 95%;
		margin: auto;
		margin-bottom: 1em;
	}
}

/* == == _extras.inc only (member page, member.php?d=9) == == */

@media (min-width: 741px) {
	/* DESKTOP STYLES */
	:where(.pg_member) div.bio {
		padding-top: 2em; /* push bio down; member office request */
	}

	:where(.pg_member) div.meminfo {
		padding-top: 1.75em;
	}

	:where(.pg_member) div.meminfo p {
		line-height: 200%;
	}

	:where(.pg_member) div.nlform {
		width: 89%;
		margin: auto;
		background-color: #e2f1f0;
		border: 2px solid #bcd0d1;
	}

	:where(.pg_member) div.nlform fieldset {
		width: 60%;
		box-sizing: border-box;
		margin: auto;
		margin-top: .3em;
		margin-bottom: .2em;
	}

	:where(.pg_member) div.nlform fieldset input {
		margin-left: 20%;
	}

	:where(.pg_member) div.nlform input[type="text"], :where(.pg_member) div.nlform input[type="email"] {
 			width: 100%;
 			box-sizing: border-box;
 			margin-bottom: .5em;
	}

	:where(.pg_member) div.nlform input[type="submit"] {
 			display: flex;
 			justify-content: center;
 			width: 60%;
 			box-sizing: border-box;
 			margin: auto;
 			text-align: center;
 			margin-bottom: .2em;
	}

	:where(.pg_member) div.memmailsd9 {
		margin-top: 25px;
		margin-bottom: 25px;
	}

	:where(.pg_member) div.mem_rcol_top_sd9 {
		background-color: #fff;
		border: 2px solid #bcd0d1;
		padding: 8px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 5px;
		box-sizing: border-box;
	}
}

@media (max-width: 740px) {
	/* MOBILE STYLES */
	:where(.pg_member) div.nlform {
		width: 89%;
		margin: auto;
		background-color: #e2f1f0;
		border: 2px solid #bcd0d1;
	}

	:where(.pg_member) div.nlform fieldset {
		width: 98%;
		box-sizing: border-box;
		margin-top: .3em;
		margin-bottom: .2em;
	}

	:where(.pg_member) div.nlform fieldset input {
		margin-left: 15%;
	}

	:where(.pg_member) div.nlform input[type="text"], :where(.pg_member) div.nlform input[type="email"] {
 			width: 98%;
 			box-sizing: border-box;
 			margin-bottom: .5em;
	}

	:where(.pg_member) div.nlform input[type="submit"] {
 			display: flex;
 			justify-content: center;
 			width: 50%;
 			box-sizing: border-box;
 			margin: auto;
 			text-align: center;
 			margin-bottom: .5em;
	}

	:where(.pg_member) div.memmailsd9 {
		margin-top: 25px;
		margin-bottom: 25px !important;
	}

	:where(.pg_member) div.mem_rcol_top_mob_sd9 {
		background-color: #fff;
		border: 2px solid #bcd0d1;
		padding: 8px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 5px;
		height: 140px !important;
	}
}