/*
mobile device responsive stylesheet
2017/10 Diego Puga

common changes:
	- change baseline font size (body),
	- increase width of floating images,
	- express width of content, footer and text portion of menu
	  as a % of viewport (body & html are %100 of this)
additional changes for phones in portrait orientation:
	- reduce font size of menu relative to baseline (body)
	- prevent overflow of text portion of menu
	- reduce horizontal padding between menu elements
	- ignore submenu
*/

/*
0-375px (e.g. iphone 6) portrait
*/
@media only screen and (max-width: 375px) and (orientation: portrait) {
body {
	font-size: 13pt
}
img.floatsmall {
	width: 30%
}
img.floatmedium {
	width: 56%
}
#content, #footer, #menu ul {
	max-width: 95%
}
#menu {
	font-size: 90%
}
#menu ul {
	overflow: hidden
}
#menu li {
	padding: 0 0.4em 0 0
}
#menu li:hover ul {
	display: none
}
}

/*
0-375px (e.g. iphone 6) landscape
*/
@media only screen and (max-width: 375px) and (orientation: landscape) {
body {
	font-size: 9pt
}
img.floatsmall {
	width: 20%
}
img.floatmedium {
	width: 44%
}
#content, #footer, #menu ul {
	max-width: 95%
}
}

/*
376-767px (e.g. iphone 6 plus) portrait
*/
@media only screen and (min-width: 376px) and (max-width: 767px) and (orientation: portrait) {
body {
	font-size: 12pt
}
img.floatsmall {
	width: 30%
}
img.floatmedium {
	width: 50%
}
#content, #footer, #menu ul {
	max-width: 95%
}
#menu {
	font-size: 110%
}
#menu ul {
	overflow: hidden
}
#menu li {
	padding: 0 0.6em 0 0
}
#menu li:hover ul {
	display: none
}
}

/*
376-767px (e.g. iphone 6 plus) landscape
*/
@media only screen and (min-width: 376px) and (max-width: 767px) and (orientation: landscape) {
body {
	font-size: 12pt
}
img.floatsmall {
	width: 18%
}
img.floatmedium {
	width: 42%
}
#content, #footer, #menu ul {
	max-width: 95%
}
}

/*
768-1023px (e.g. ipad) portrait
*/
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
body {
	font-size: 15pt
}
img.floatsmall {
	width: 20%
}
img.floatmedium {
	width: 44%
}
#content, #footer, #menu ul {
	max-width: 90%
}
}

/*
768-1023px (e.g. ipad) landscape
*/
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
body {
	font-size: 15pt
}
img.floatsmall {
	width: 16%
}
img.floatmedium {
	width: 40%
}
#content, #footer, #menu ul {
	max-width: 85%
}
}

/*
1024-1279px (e.g. ipad pro) portrait
*/
@media only screen and (min-width: 1024px) and (max-width: 1279px) and (orientation: portrait) {
body {
	font-size: 14pt
}
img.floatsmall {
	width: 18%
}
img.floatmedium {
	width: 42%
}
#content, #footer, #menu ul {
	max-width: 80%
}
}

/*
1024-1279px (e.g. ipad pro) landscape
*/
@media only screen and (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
body {
	font-size: 14pt
}
img.floatsmall {
	width: 14%
}
img.floatmedium {
	width: 38%
}
#content, #footer, #menu ul {
	max-width: 75%
}
}