/* Default.css */

@import "Reset.css";
summary {cursor: pointer;}
summary > * {display: inline;}

:root {
	--divider_color: #7E1414;
	--header_bg_color: #DECFA6;
	--content_bg_color: #FFEFBF;
	--text_color_default: #000000;

	--item_hover_bg_color: #99FF99;

	--faint_divider_color: rgba(0, 0, 0, 0.05);

	--text_color_main_menu: #FFEFBF;
	--bg_color_main_menu: var(--divider_color);
	--text_color_main_menu_hover: #FFFFFF;
	--bg_color_main_menu_hover: #000055;

	--bg_color_sidebar: var(--header_bg_color);
	--sidebar_width: 180px;

	--footer_padding: 10px 10px 0 10px;
}

/* Layout ------------------------------------------------------------------- */

html {height: 100%;}

body {
	color: var(--text_color_default);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
	
#header {
	display: flex;
	padding: 10px;
	background-color: var(--header_bg_color);
	flex-wrap: wrap;
}

.header_extras {
	margin-left: auto;
	align-self: center;
}

#mainmenu {
	color: var(--text_color_main_menu);
	background-color: var(--bg_color_main_menu);
	font-weight: bold;
	display: flex;
	width: 100%;
}

.user_menu {margin-left: auto;}

#container {
	flex: 1 0 auto;
	width: 100%;
	background-color: var(--content_bg_color);
	display: flex;
	margin-bottom: auto;
	overflow: hidden;
}

#sidebar {
	min-width: var(--sidebar_width);
	max-width: var(--sidebar_width);
	font-size: 90%;
	text-align: center;
	background-color: var(--bg_color_sidebar);
	padding: 10px;
}

.sidebar_fit_width {
	width: var(--sidebar_width);
}

#content {padding: 10px; width: 100%; display: flex; flex-direction: column;}

#footer {
	display: flex;
	border-top: 2px var(--divider_color) solid;
	background-color: var(--content_bg_color);
	font-size: 75%;
}

#status_area {
	min-width: var(--sidebar_width);
	max-width: var(--sidebar_width);
	background-color: var(--bg_color_sidebar);
	text-align: center;
	padding: var(--footer_padding);
}

.content_title_line {
	display: flex;
	gap: 20px;
	align-items: center;
}

#message_area {padding: var(--footer_padding);}

#copyright_area {padding: var(--footer_padding); margin-left: auto;}

/* ^^^^^^^^^^^^ Clean ^^^^^^^^^^^^^^^^^^^^^^^ */

/* Text and Links --------------------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, caption {font-family: Verdana, Arial, Helvetica, sans-serif;}

#header h1 {margin: 10px; padding: 0; font-size: 1.5em; float: left;}

a			{text-decoration: none}
a:link		{color: #000CCC}
a:visited	{color: #00600C}
a:active	{color: #990099}
a:hover		{color: #CC1414; text-decoration: underline}

a.anchor	{text-decoration: none;}

h2:target {text-decoration: underline;}

.page_title {
	padding-top: 8px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 125%;
	font-weight: bold;
	margin-right: auto;
}

.title_line {
	margin-left: auto;
}

.page_subtitle {
	margin: 0px 0  10px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.section_title {
	margin-top: 20px;
	margin-bottom: 4px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	}

.section_subtitle {
	margin-top: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
	}

hr {
	color: var(--divider_color);
	background-color: var(--divider_color);
	border: 0;
	height: 1px;
}

/* Status Link --------------------------------------------------------------------------- */

a.status_link {
	margin: -5px 10px;
	/*border-radius: 10px;*/
	display: block;
	padding: 5px 5px 5px 5px;
	color: inherit;
}

a.status_link:hover {
	color: #FFFFFF;
	background-color: #003C5D;
	text-decoration: none;
}


/* Menu - Horizontal ------------------------------------------------------- */

ul.menu_horz {
	margin: 0 10px;
	display: flex;
	flex-wrap: wrap;
}

ul.menu_horz li {
	padding: 10px 5px;
}

ul.menu_horz li a {
	padding: 10px;
	color: inherit;
}

ul.menu_horz li.inactive {
	color: #CDBE95;
}

ul.menu_horz li.section {
	font-style: italic;
}

ul.menu_horz li a:hover	{
	color: var(--text_color_main_menu_hover);
	background-color: var(--bg_color_main_menu_hover);
	text-decoration: none;
}

ul.menu_horz li.divider {
	width: 1px;
	margin: 0 5px 0 5px;
	padding: 5px 0 5px 0;
	background-color: #CDBE95;
}

ul.menu_horz li.divider:before {content: '\00A0';}	/* Trick to give empty <li> width */


/* Menu - Vertical --------------------------------------------------------- */

ul.menu_vert {
	/*
	margin: 0px;
	padding: 0px;
	*/
	width: 100%;
	color: #000000;
	display: flex;
	flex-direction: column;
	align-items: center;
}

ul.menu_vert li {
	width: 100%;
	display: flex;
	flex-direction: column;
}

ul.menu_vert li a {
	padding: 5px 5px 5px 5px;
	color: inherit;
}

ul.menu_vert li.inactive {
	padding: 5px 5px 5px 5px;
	color: #666666;
	}

ul.menu_vert li.section {
	/*font-style: italic;*/
}

ul.menu_vert li a:hover {
	color: #FFFFFF;
	background-color: #003C5D;
	text-decoration: none;
}

ul.menu_vert li.label {
	padding: 5px 5px 5px 5px;
}

ul.menu_vert li.divider {
	border-top: 1px #003C5D solid;
	margin: 5px 0 5px 0;
}

ul.menu_vert li.label_divider {
	font-weight: 600;
	margin: 5px 0 5px 0;
}


/* Other ------------------------------------------------------------------- */

span.phone_number {white-space: nowrap;}

p.logo {
	font-size: 200%;
	font-weight: bolder;
	margin: 0;
	padding: 0;
}

p.logo a, p.logo a:link, p.logo a:visited, p.logo a:active, p.logo a:hover {color: #000000; text-decoration: none}

div.dog_logo {
	font-size: 60%;
	margin-right: 10px;
	float: left;
	}

div.dog_logo img {
	max-width: 200px;
}

img.whoops {width: 200px; float: left; padding-right: 20px;}

.print_only {display: none;}

.no_print {} /* Include for compound classes to work correctly */


/* Announcements ---------------------------------------- */

div.announcement {
	width: 100%;
	margin-top: 10px;
	border-top: 1px #000000 solid;
	padding: 10px 0 4px 0;
}

div.announcement p.announcement_title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

p.more_announcements {
	font-size: large;
	text-align: right;
	margin-bottom: 0;
	padding: 8px 0 0 0;
	clear: both;
}

.expand_collapse_menu {text-align: right; font-size: 80%; margin: 0; align-self: flex-end;}

.expand_collapse {padding: 4px;}
.expand_collapse:hover    {color: var(--bg_color_main_menu_hover);}
.expand_collapse:link		{color: inherit}
.expand_collapse:visited	{color: inherit}
.expand_collapse:active	{color: inherit}

.expand_collapse:hover {
	color: #FFFFFF;
	background-color: var(--bg_color_main_menu_hover);
	cursor: pointer;
	text-decoration: none;
}

.expand_collapse_disable:hover,
.expand_collapse_disable {
	color: #AAAAAA;
	text-decoration: none;
	padding: 4px;
}

.expand_collapse_hidden {
	display: none;
}