/* Lonnmorecipes Style Sheet
	with responsive design
	References: 
	https://meyerweb.com/eric/tools/css/reset/
	https://www.w3schools.com/html/html_responsive.asp
	https://developers.google.com/web/fundamentals/design-and-ux/responsive/
	https://www.w3schools.com/html/html_responsive.asp
	https://internetingishard.com/html-and-css/responsive-design/
	https://sleetmagazine.com/css/sleet_0290.css

*//*  

	Colors :  Background:   
		   Header, Subhead, Nav Text: 
		   border rule: dark text  

		   Article, h4, h5,h6,p: 
		   Background:   
		   Header, Footer and Nav Text background: 
		   Text Background: 
*//*
	*//* *** Sequence *** *//*

B01. meyer style reset, v2.0 2011-01-26, modified

B02. Site Styles, default and custom

*/

/* B01 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   Modified 3/26/18 R Solomon
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	background : #ffffff ;
  	width : 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-family : serif, "Times New Roman", Georgia ;
	font-size: 100%;
	font-weight : normal;
	font-style : normal;
	font-variant : normal;
	text-shadow : none;
	text-align : left;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	color :  #000037;
	font: inherit;
	vertical-align: baseline;
	line-height : 1.1em;
}

html, body, nav, article, footer {
	/*background : #79836f url("../images/lonnmorecipe_image.png") scroll top left repeat;*/
}
img {width : auto;}

@media screen and (max-width : 375px) and (orientation : portrait){
/* iPhone 6-X */
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav {
	background : #ffffdd;
	width : auto;
	margin: 0 0 .3em 0;
	padding: 0;
	border: 0;
	font-size: 110%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;
   }
}
@media screen and (min-width : 376px) and (max-width : 768px) and (orientation : portrait){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav {
	background : #ffddff;
	width : auto;
	margin: 0 0 .3em 0;
	padding: 0;
	border: 0;
	font-size: 110%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;
   }
}
@media screen and (min-width : 769px) and (max-width : 800px) and (orientation : portrait){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav {
	background : #ffddff;
	width : auto;
	margin: 0 0 .3em 0;
	padding: 0;
	border: 0;
	font-size: 120%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;

   }
}
@media screen and (min-width : 801px) and (orientation : portrait){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav {
	background : #ddddff;
	width : auto;
	margin: 0 20% .3em 20%;
	padding: 0;
	border: 0;
	font-size: 125%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.3em;

   }
}
@media screen and (max-width : 374px) and (orientation : landscape){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav{
	background : #ddddbb;
	width : auto;
	margin: 0 0 .3em 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.1em;
	}
}
@media screen and (min-width : 375px) and (max-width : 800px) and (orientation : landscape){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav{
	background : #ddbbdd;
	width : auto;
	margin: 0 0 .3em 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.1em;
	}
}

@media screen and (min-width : 801px) and (orientation : landscape){
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, caption, aside, figcaption, nav{
	background : #ddddff;
	width : auto;
	margin: 0 20% .3em 20%;
	padding: 0;
	border: 0;
	font-size: 100%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.1em;
	}
}

/* B02.02  Lists : also see navs */
ol,ul,li { list-style: circle inside; list-style-image: none; width : inherit; }
ul, ol {width : inherit; margin-left : 0; margin-right : 0; padding: 2px;}
ol { list-style-type : decimal; }

@media screen and (orientation : portrait) { ol,ul,li {width : inherit; margin : 0; padding : 0 0; line-height : 1.2em;}}
@media screen and (orientation : landscape){ ol,ul,li {width : inherit; margin : 0; padding : 0 0; line-height : 1em;}}

/* B02.05  some IE dot hacks */
.ie6 legend, .ie7 legend { margin-left : -7px; }
/* Bicubic resizing for non-native sized IMG :
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
  /* fails validation at w3.org */
.ie7 img { -ms-interpolation-mode : bicubic; }



/* B02.06  Normalize monospace sizing :
en.wikipedia.org/wiki/MediaWiki_talk :Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family : monospace, sans-serif; }
pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  /* fails validation at w3.org */
	white-space :pre; 
	white-space :pre-wrap; 
	word-wrap :break-word; 
	padding :15px;
}


/* HTML5 basic styles and display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background-color : #ffffff;
	color : #000037;
}
 ol, ul {
	display : inline;
	list-style: none;
}
nav	{
	display : block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
em{display : inline; font-size:100%; font-style : italic;}
strong{font-weight : bold;}

h1 { font-size : 120%; font-weight : bold; line-height: 1.2em;}
h2 { font-size : 110%; line-height: 1.2em;}
h3 { font-size : 105%; line-height: 1.05em;}

@media screen and (orientation : portrait) {
h1 { font-size : 120%; font-weight : bold; line-height: 1.2em;}
h2 { font-size : 110%; line-height: 1.2em;}
h3 { font-size : 105%; line-height: 1.05em;}
}
@media screen and (orientation : landscape) {
h1 { font-size : 120%; font-weight : bold; line-height: 1.2em;}
h2 { font-size : 110%; line-height: 1.2em;}
h3 { font-size : 105%; line-height: 1.05em;}
}

/* C01.01  Site-specific features */

.embed {
	background : #ffffdd;
	width : auto;
	margin: 0 5% .3em 5%;
	padding: 0;
	border: 0;
	font-size: 110%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;
}
@media screen and (orientation : portrait) {
	.embed{
	background : #ffffdd;
	width : auto;
	margin: 0 5% .3em 5%;
	padding: 0;
	border: 0;
	font-size: 110%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;
	}
}
@media screen and (orientation : landscape) {
	.embed{
	background : #ffffdd;
	width : auto;
	margin: 0 15% .3em 15%;
	padding: 0;
	border: 0;
	font-size: 110%;
	text-indent : 0;
	letter-spacing : 0;
	word-spacing : 0;
	line-height : 1.2em;
	}
}