/* Based on this framework https://codepen.io/Cheesetoast/pen/KFAaq */
/* 4/29/2020 font-size: 0.875em https://www.woorank.com/en/edu/seo-guides/mobile-font-size */

body { 
  font-family: 'Open Sans', sans-serif; color: #333333; background-color: #cccccc;
}



/* STRUCTURE */

.stairlift_img {border: 3px outset; max-width:95%}

img.reflow, .reflow {max-width: 100%; max-height: 100%;}

h3 {margin-bottom: 2px;}

#pagewrap {
	padding: 0px;
	width: 805px;
	margin: auto;
	background-color: #ffffff;
	border: 3px outset;
}

/* to crop image, does not like float: left */
#header {
	clear: both;
	height: 160px;
	overflow:hidden;
}


#TopNav a, #TopNav a:link, #TopNav a:visited {text-decoration: none; color:#666666;}
#TopNav a:hover {text-decoration: none; color:#000000;}


.rt_nav tr td {font-size: 0.875em;}

#content {
	width: 326px;
	float: left;
	padding: 0 0 0 5;
	border-left: solid 3px #ffffff;
}

.accesor {
	max-width: 450px;
	float: left;
	margin-right:10px;
	margin-bottom:20px;
    font-size: 0.875em;
}

.accesor img {float: left; margin-right:5px;}


#contentAbout {
	max-width: 510px;
	float: left;
	display:inline-block;
	padding: 0 15 0 20;
	font-size:115%;
}

#middle {
	width: 222px; /* Account for margins + border values */
	float: left;
	margin: 0px 0px 0px 0px;
	background-color: #FFFFCC;
	font-style: italic;
}

#sidebar {
	width: 220px;
	float: right;
	padding-right: 10px;
}
#sidebar a, #sidebar a:link, #sidebar a:visited {text-decoration: none; color:#20206a;}

#footer {
	clear: both;
	background-color: #020156;
	overflow:hidden;
}

hr {visibility: hidden;}


.ImageResizes {max-width: 100%;}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 800px) {

	#pagewrap {
		width: 94%;
	}
	#content, #contentAbout {
		width: auto;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}

/* for 590px or less */
@media screen and (max-width: 590px) {

	#content, #contentAbout {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

	.stairlift_img {max-width:90%;}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}

}


#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

/* DEBUGGING 
#pagewrap, #header, #content, #middle, #sidebar, #footer, img {
	border: solid 1px #ff0000;
*/
}