@import url("layout.css");
:root
{
	--start_color: rgba(205,26,120,1);
	--end_color: rgba(249,139,11,1);
	--body_width: 100vw;
	--body_height: 100vh;
	--masthead_height: 120px;
	--masthead_image_height: 130px;
	--footer_height: 35px;
	--nav_height: calc(var(--body_height) - var(--masthead_height) - var(--footer_height));
	--transition: 0.25s;
	--border_radius: 5px;
	--nav_width: 318px;
	--nav_menu_width: 295px;
	--nav_menu_arrow_width: 25px;
	--nav_height_adjust: 20px;
	--content_backround_image_url: url("/images/Mural.jpg");
	
	--nav_menu_close_width_adjust: 36px;
	--nav_menu_open_width_adjust: 8px;
}
body 
{
	background-color: var(--end_color);
	width: var(--body_width);
}
.container 
{
	margin: 10px auto;
	width: var(--body_width);
	height: 100%;
}
.masthead 
{
	display: block;
	width: var(--body_width);
	max-width: var(--body_width);
	height: var(--masthead_height);
	max-height: var(--masthead_height);
	background-image: linear-gradient(var(--start_color), var(--end_color));
	margin-bottom: 12px;
}
.gluten
{
	font-family: "Gluten", cursive;
	font-optical-sizing: auto;
	font-weight: 400;/*100 - 900;*/
	font-style: normal;
	font-variation-settings: "slnt" 0;
}
.playwrite-gb-s
{
	font-family: "Playwrite GB S", cursive;
	font-optical-sizing: auto;
	font-weight: 100;/*100 - 400*/
	font-style: normal;
}
.playwrite-gb-j
{
	font-family: "Playwrite GB J", cursive;
	font-optical-sizing: auto;
	font-weight: 100;/*100 - 400*/;
	font-style: normal;
}
.masthead_cell_heading
{
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	/*width: 790px;*/
	height: var(--masthead_image_height);
	padding-left: 5px;
	padding-right: 5px;
}
.masthead_cell_image_left
{
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	padding-right:5px;
}
.masthead_cell_image1,
.masthead_cell_image2
{
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	/*width: 790px;*/
	height: var(--masthead_image_height);
	padding-left: 5px;
	padding-right: 5px;
}
.masthead_cell_image1
{
	display: inline-block;
}
.masthead_cell_image2
{
	display: inline-block;
}
/* Masthead Styles */
.title_table
{
	border-style: solid;
	border-width: medium;
	border-color: white;
	border-radius: 3px;
	padding: 5px;
	width: 100%;
}
.masthead h1 
{
	color: white;
	font-weight: 500;
	font-size: 98px;
	margin: 0px;
	border-style: none;
	border-width: thin;
	padding-left: 5px;
	line-height: 0.89em;
}
.masthead h3 
{
	color: white;
	font-weight: 500;
	font-size: xx-large;
	margin: 0px;
	border-style: none;
	border-width: thin;
	padding-left: 5px;
	line-height: 0.89em;
}
.masthead_image
{
	display: inline-block;
	border-style: solid;
	border-width: thin;
	border-color: white;
	border-radius: var(--border_radius);
	overflow: hidden;
	height: var(--masthead_image_height);
}
.below_masthead
{
	display: block;
	width: 100%;
	height: calc(var(--body_height) - var(--masthead_height));
	margin-top: 5px;
}
.acknowledgment
{
	padding: 10px;
	border-radius: var(--border_radius);
	background-color: rgba(255, 227, 158, 1);
	width: 600px;
	border-style: solid;
	border-width:thin;
	border-color: var(--end_color);
}
.content 
{
	display: inline-block;
	position: relative;
	left: -10px;
	width: calc(var(--body_width) - var(--nav_width));
	max-height: var(--nav_height);
	margin: 0px;
	margin-top: 10px;
	margin-left: 10px;
	padding: 10px;
	border: 2px solid var(--start_color);
	background-color: white;
	transition: var(--transition);
	border-radius: 0px var(--border_radius) var(--border_radius) 0px;
	overflow: auto;
}
.navigation
{
	display: inline-block;
	float: left;
	width: var(--nav_arrow_width);
	height: calc(var(--nav_height) + var(--nav_height_adjust));
	max-height: calc(var(--nav_height) + var(--nav_height_adjust));
	margin-left: 10px;
	margin-top: 10px;
	background-color: /*white*/color-mix(in srgb, var(--end_color), white 40%);
	padding: 0px;
	white-space: nowrap;
	border-style: solid;
	border-width: 2px;
	border-color: var(--start_color);
	transition: var(--transition);
	border-radius: var(--border_radius) 0px 0px var(--border_radius);
	overflow: hidden;
}
.nav_image
{
	display: block;
	position: relative;
	margin: 5px;
}
.navigation_menu
{
	display: none;
	position: relative;
	top: 0px;
	height: calc(var(--nav_height) + var(--nav_height_adjust));
	max-height: calc(var(--nav_height) + var(--nav_height_adjust));
	width: 0%;
	overflow: auto;
	margin: 0px;
	border-style: none;
	transition: var(--transition);
	background-color: color-mix(in srgb, var(--start_color), white 80%);
}
.span_menu_text
{
	font-family: "Gluten", cursive;
  	font-optical-sizing: auto;
  	font-weight: 400;/*100 - 900;*/
  	font-style: normal;
  	font-variation-settings: "slnt" 0;
  	font-size: large;
	color: white;
}
.hamburger
{
	font-size: x-large;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
}
.navigation_arrow
{
	display: inline-block;
	position: relative;
	left: 0px;
	background-color: var(--start_color);
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align: center;
	vertical-align: middle;
	height: calc(var(--nav_height) + var(--nav_height_adjust));
	max-height: calc(var(--nav_height) + var(--nav_height_adjust));
	width: var(--nav_arrow_width);
	padding: 2px;
	margin: 0px;
	overflow: hidden;
	
	border-style: none;
	border-color: lime;
	border-width: medium;
}
.navigation_arrow span:hover
{
	background-color: var(--start_color);
	color: silver;
	cursor: pointer;
}
.page_heading
{
	font-family: "Gluten", cursive;
	font-optical-sizing: auto;
	font-weight: 300;/*100 - 900;*/
	font-style: normal;
	font-variation-settings: "slnt" 0;
	color: var(--start_color);
	font-size: 50px;
	font-weight: bold;
}
.content h1,
.form h1,
.content h2,
.form h2,
.content h3,
.form h3,
.content h4,
.form h4,
.content h5,
.form h5,
.content h6,
.form h6
{
	font-family: "Gluten", cursive;
	font-optical-sizing: auto;
	font-weight: 600;/*100 - 900;*/
	font-style: normal;
	font-variation-settings: "slnt" 0;
	color: var(--start_color);	
}
.content h1,
.form h1
{
	font-size: xx-large;
}
.content h2,
.form h2
{
	font-size: x-large;
}
.content h3,
.form h3
{
	font-size: large;
}
.content h4,
.form h4
{
	font-size: medium;
}
.content h5,
.form h5
{
	font-size: x-small;
}
.content h6,
.form h6
{
	font-size: xx-small;
}
.addvert_table_cell
{
	width: 200px;
}
.time_table_header_cell
{
	background-color:var(--end_color);
}
.time_table_body_cell
{
	width: 120px;
}
/* Navigation Styles */
.navigation ul 
{
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
.navigation li 
{
	display: block;
	margin: 0;
	padding: 0;
}
.navigation a
{
	color: var(--end_color);
	text-decoration: none;
	display: block;
	padding: 5px;
	
	font-family: "Gluten", cursive;
  	font-optical-sizing: auto;
  	font-weight: 400;/*100 - 900;*/
  	font-style: normal;
  	font-variation-settings: "slnt" 0;

	font-size: medium;
	font-weight: bold;
}
.navigation ul a:hover 
{
	color: var(--end_color);
	text-decoration: none;
	border: 1px solid var(--end_color);
	background-color: var(--start_color);
}
.donation_span
{
	color: black;
	font-family: "Gluten", cursive;
  	font-optical-sizing: auto;
  	font-weight: 400;/*100 - 900;*/
  	font-style: normal;
  	font-variation-settings: "slnt" 0;

	font-size: small;
	font-weight: normal;	
}
.donation_span a
{
	display: inline;
	font-size: small;
	font-weight: normal;
	color: Green;
}
.donation_span a:hover
{
	color: Olive;
}
.submenu_item
{
	
}
.submenu_item a
{
	font-size: small;
	font-weight: normal;
	padding-left: 15px;
	color: var(--start_color);
}
.content p,
.content caption,
.content td,
.content th,
.content li,
.content b,
.content pre,
.footer p,
.footer pre,
.footer a,
.PageContentsItem,
.footer_table_cell
{
	font-family: "Playwrite GB J", cursive;
	font-optical-sizing: auto;
	font-weight: 300;/*100 - 900*/
	font-style: normal;
	font-size: medium;
}
.content b
{
	font-weight: 600;/*100 - 900*/;
}
/* Footer Styles */
.blink
{
	animation: flash 1.5s infinite;
}
@keyframes flash 
{
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.footer_middle_cell
{
	width: 550px;
}
.footer 
{
	position: relative;
	top: 0px;	
	text-align: center;
	clear: both;
	width: calc(var(--body_width) - 8px);
	height: var(--footer_height);
	margin-left: 10px;
	padding-top: 8px;
	background-color: var(--start_color);
}
.footer_table_cell
{
	padding-left: 30px;
	padding-right: 30px;
	font-size: small;
	font-weight: bold;
	color: white;
}
.footer_pc_row
{
	display: block;
}
.footer_mobile_row
{
	display: none;
}
.footer_web_admin
{
	font-size: small;
}
.footer p 
{
	margin-top: 5px;
}
.footer a 
{
	font-weight: 600;/*100 - 900;*/
	font-style: normal;
	color: var(--end_color);
	text-decoration: underline;
}
.footer a:hover 
{
	color: var(--end_color);
	text-decoration: none;
}
.PageContentsItem
{
  	font-weight: 600;/*100 - 900;*/
	color: var(--start_color);

}
.PageContentsItem:hover
{
	cursor: pointer;
}
.form
{
	background-color: #E1E1E1;
	border-style: outset;
	border-width: 2px;
	width: 700px;
	padding: 20px;
	border-radius: 5px;
}
.form table
{
	border-style: none;
	border-collapse: collapse;
	border-width: medium;
	border-color: black;
}
.form td
{
	text-align: left;
	vertical-align: middle;
	padding-bottom: 10px;
	padding-right: 5px;
}
.form input[type=submit],
.form input[type=button],
.form input[type=reset]
{
	border-style: outset;
	border-radius: 3px;
	border-width: 2px;
	background-color: silver;
	text-align: center;
	color: black;
	font-weight: bold;
	padding:10px;
	border-top-color:#CCCCCC;
	border-left-color:#CCCCCC;
	border-bottom-color: #D2D2D2;
	border-right-color: #D2D2D2;
	
	font-family: "Playwrite GB J", cursive;
	font-optical-sizing: auto;
	font-weight: 600;/*100 - 900*/;
	font-style: normal;
	font-size: small;
}
.form textarea,
.form select,
.form input[type=text],
.forminput[type=password]
{
	width: 40ch;
	border-style: inset;
	resize: none;
	border-radius: 3px;
	border-width: 2px;
	border-bottom-color:#CCCCCC;
	border-right-color:#CCCCCC;
	border-top-color: #D2D2D2;
	border-left-color: #D2D2D2;
	
	font-family: "Playwrite GB J", cursive;
	font-optical-sizing: auto;
	font-weight: 300;/*100 - 900*/;
	font-style: normal;
	font-size: small;
}
.form label
{
	font-weight: bold;
	font-size: small;
}
.style_bold 
{
	font-weight: bold;
}
.style_italic 
{
	font-style: italic;
}
.donate_image
{
	width: 50px;
}

.contents_cell			
{
	background-color: var(--end_color);
	border-radius: 10px;
	vertical-align: middle;
	width: 100px;
}	

.contents_cell a
{
	color: var(--start_color);
}

.table_cell
{
	vertical-align: top;
	padding-left: 10px;
	padding-right: 10px;
	width: 50%;
}

.table_cell a
{
	text-decoration-color: var(--start_color);
}

.table_cell a:hover
{
	text-decoration-color: var(--start_color);
	color: inherit;
}

.link_image
{
	width: 500px;
}