/* css/mobile.css - phone & tablet layout
 * Loaded only below 980px wide (media attribute in includes/templates/head.php), so the desktop design is untouched.
 * Several rules use !important because the page content has inline styles from the original design.
 * Colors match the desktop images: frame #585959, menu #2c2b29, brand blue #0f87ba, page #1c1b19.
 */

/* {{{ page */
html, body { height: auto; }
body { font-size: 14px; -webkit-text-size-adjust: 100%; }
div#mainContainer { width: auto; }
img { max-width: 100%; }
/* }}} */

/* {{{ header */
#top_line { padding: 6px 0px; min-height: 0px; overflow: hidden; }
#top_line a, #top_line a:visited { padding: 0px 12px; }

#header > a img { display: block; width: 100%; height: auto; }

#header_top { min-height: 0px; height: auto !important; background: #585959; padding: 0px 0px 8px 0px; }
#top_nav { display: none; }

#mobile_nav {
	display: flex;
	flex-wrap: wrap;
	background-color: #2c2b29;
	border-top: 1px solid #000;
}
#mobile_nav a, #mobile_nav a:visited {
	flex: 1 1 33%;
	box-sizing: border-box;
	padding: 13px 6px;
	color: #fff;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	border-right: 1px solid #1c1b19;
	border-bottom: 1px solid #1c1b19;
}
#mobile_nav a.on { background-color: #0f87ba; }

#top_images { display: flex; gap: 6px; padding: 8px 8px 0px 8px; }
#top_img1, #top_img2, #top_img3 { position: static; flex: 1 1 0px; min-width: 0px; }
#top_images img { display: block; width: 100%; height: auto; box-sizing: border-box; }
/* }}} */

/* {{{ content frame */
#contentAreaContainer, #contentAreaContainerTopGate, #contentContainer,
#contentAreaContainerHome, #contentAreaContainerTopGateHome, #contentContainerHome { background: none; }

#contentAreaContainer, #contentAreaContainerHome { background-color: #585959; padding: 8px; margin-top: 8px; }

#contentContainer {
	background-color: #fff;
	padding: 15px;
	min-height: 0px;
	height: auto !important;
}
#contentContainer h1 { font-size: 20px; border-bottom-width: 10px; }

#contentContainer img, #contentContainerHome img { height: auto; }
#contentContainer p[style*="justify"] { text-align: left !important; }
/* }}} */

/* {{{ columns -> one column */
#contentContainer .col1, #contentContainer .x2col_col2, #contentContainer .x3col_col2 {
	float: none;
	width: auto;
	margin: 0px 0px 15px 0px;
}

/* side photo strips become a row of three */
#contentContainer .col1:not(:has(p)) { display: flex; gap: 6px; }
#contentContainer .col1:not(:has(p)) > img { flex: 1 1 0px; min-width: 0px; margin: 0px; }
#contentContainer .col1 > br { display: none; }

/* contact pages: building photo was absolutely positioned beside the address */
#contentContainer .col1 img[style*="absolute"] { position: static !important; display: block; margin: 0px; max-width: 350px; width: 100%; }

/* contact pages: email address is 10px on desktop - too small to tap */
#contentContainer .col1 span[style*="10px"] { font-size: 13px !important; }

/* floor-plan sidebar repeats the thumbnails below the text, so it is hidden on small screens */
#contentContainer .col3 { display: none; }

/* floor-plan thumbnails: stacked, picture left / name right */
#contentContainer table, #contentContainer tbody, #contentContainer tr, #contentContainer td { display: block; width: auto !important; }
#contentContainer table { margin: 15px 0px 0px 0px !important; }
#contentContainer td { text-align: left !important; overflow: hidden; margin: 0px 0px 12px 0px; }
#contentContainer td img { margin: 0px 12px 0px 0px; width: 120px; }

/* amenities lists */
#contentContainer ul[style] { float: none !important; width: auto !important; margin: 0px 0px 0px 20px !important; }
/* }}} */

/* {{{ home page */
#contentContainerHome { padding: 0px; min-height: 0px; height: auto !important; }
/* taller than desktop's 480px: on desktop the long third block can run past the panel unseen */
#features_home { float: none; margin: 0px auto 8px auto; min-height: 560px; background-color: #585959; }
.home_main { float: none !important; width: auto !important; padding: 0px !important; background: none !important; }
.home_main_inner { min-height: 0px !important; height: auto !important; padding: 12px !important; }
/* }}} */

/* {{{ contact form */
#contact-form input.cf-text, #contact-form select, #contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px; /* 16px stops iPhones from zooming in on the field */
}
#contact-form .cf-submit { width: 100%; padding: 12px; font-size: 16px; }
/* }}} */

/* {{{ footer */
#footer { padding: 14px 10px 24px 10px; font-size: 12px; text-align: center; }
#footer #copyright { float: none; }
#footer_nav { display: block; margin: 8px 0px 0px 0px; }
#footer #copyright a, #footer #copyright a:visited { color: #9a9a9a; }
/* }}} */