@charset "UTF-8";
/* CSS Document */

/*-----------------------------
Phone Styles
-------------------------------*/

body {
	background-image: none;
}

#wrapper{
	width: 400px;
}

/* 5/14/2026 RES: hide_phone wasn't working. CoPilot thinks container_12 was overriding hide_phone. (This doesn't explain why hide_phone wasn't working for the JPGs in venue.html.)
.container_12.hide_phone works, !important worked too but it's bad form. "outline: 3px solid red !important" showed hide_phone was being triggered, but somehow display: none was
getting overridden. If .container_12.hide_phone works in index.html, venue.html may still have a problem.
*/
/*.hide_phone {
    outline: 3px solid red !important;
}*/
/* original -- !important was a CoPilot suggestion which worked but it warned it was a poor solution.
I finally used it because it was the only thing that worked for venue.html. */
.hide_phone {
	display: none !important;
}

/* from CoPilot
img.hide_phone,
.hide_phone img {
    display: none;
}
 */
 
/* from CoPilot */
.container_12.hide_phone {
    display: none;
}

#top {
	display: none;
}

/* 7/25/2025 RES: footer now displays on phone as well as desktop */
#footer {
	/*display:none;*/
	margin-top: 0;
}

#main_footer {
    display:none !important;
}

/* mobile class is used to display things only on phone. It can be used more than once in a file (e.g. venue.html) so it is a class not an ID */
.mobile {
	display: block;
	padding-top: 10px;
}

#mobile_menu_top {
	display: block;
	padding-top: 10px;
}

#mobile_menu_bottom {
	display: block;
	padding-top: 10px;
}

.mobile-logo {
	display: block;
    width: 83.33%;
    margin: 0 auto;
}

.mobile-logo img {
    width: 100%;
    height: auto;
}

/* 8/29/2024 RES: new green color scheme
color: white text color shows as #222 (see main.css line 18)
even with !important text color is still #222
-- actually I think it's #4e4950, a.color, non-hover for links
-- see fix below */
.button {
	font-family:georgia, serif;
	font-size: 1.4em;
	text-align:center;
	background-color: #0a4228;	/* green */
	color: white;
	padding: 20px 0px;
	margin: 8px 0px;
	clear:both;
}

/* 9/17/2024 RES: I think this fixes our mobile button text problem,
but doesn't it also make all non-hover links white for mobile? */
.mobile a {
	color: white;
}

#mobile_menu_top a {
	color: white;
}

#mobile_menu_bottom a {
	color: white;
}

.mobile img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

#mobile_menu_top img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

#social-mobile img {
     padding: 10px 10px 10px 10px;
     width:50px;
     margin-left:auto;
     margin-right:auto;
     text-align: center;
}

/* =====================================================================================================
   MAIN CONTENT — Left column + right-column hero photo
   -- main is for single column text, both desktop and phone
   -- customized main-index for index.html, main-photo for pages that want 2 columns (text-photo or photo-text)
		(e.g. venue.html, bio pages). They are customized in phone.css.
	   -- main-index does not show at all on phone (index.html is menu-only in portrait orientation)
	   -- main-photo is designed for 2 columns on desktop, with content-left and content-right sections.
			On phone this will display as a single full width column.
   ===================================================================================================== */
   
#main-index {
    display: none;
}

#main-photo {
    display: block;
}

#main-photo #content-left {
    width: auto;
}

#main-photo .content-section {
    display: block;
}

#main-photo .content-text {
    display: block;
    width: auto;
}

#orchestra,
#chorus {
    float: none;
    width: auto;
}

#indDonors1,
#indDonors2 {
    float: none;
    width: 100%;
}