@font-face {
    font-family:'puppy'; 
    src:url('fonts/puppy-webfont.eot'); 
    src:url('fonts/puppy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/puppy-webfont.woff') format('woff'),
         url('fonts/puppy-webfont.ttf') format('truetype'),
         url('fonts/puppy-webfont.svg#04b03regular') format('svg'); 
    font-weight:normal; 
    font-style:normal; 

}

@font-face {
    font-family: 'titilliumlight';
    src: url('fonts/titillium-light-webfont.eot');
    src: url('fonts/titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/titillium-light-webfont.woff') format('woff'),
         url('fonts/titillium-light-webfont.ttf') format('truetype'),
         url('fonts/titillium-light-webfont.svg#titilliumlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

	/* fonts */

	.menu-link, .menu ul li a, .menu ul li .selected, #puppyContent nav, nav#debug, #console { 
		font-family:'puppy'; text-transform:uppercase; font-weight:normal; color:#fff;  }

	header * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
   
	header { display:table; width:100%; background:linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%); text-align:left}


	/* assume tablet landscape, 1024 width monitor - override with rules later if poss
	
	h1, h2, h3, h4, h5, #hiscoreTables blockquote p:first-of-type, #home #games > p {text-shadow:0 0 0.5em #ffb37b }
	h1 { font-size:3.0em; line-height:0.75em; padding:0; margin:0 0 0.25em;}
	h2, .blog #respond h3 { font-size:2.0em; line-height:0.85em; margin:0 0 0.5em; padding:0; }
	h3 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h4 { font-size:1.25em; line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h5 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	
	strong {color:#fff;font-weight:normal}
	 */	
	
	header p, header li { margin:0 0 0.75em 0; max-width:35em; font-size:0.9em;line-height:1.5em}
	
	header ol, header ul {padding-left:1.25em;margin:0 0 0.75em 0;}
	header li {padding-left:0.5em}
	header li li, header p li, header li p {font-size: 100%;}
	
	
	header a { color:#d2c7b8 }
	header a:hover { color:rgba(255, 255, 255, 1); }

	#headerPuppy { float:left; width:16vw; max-width:8em;margin-top:0.1em;height:100%; position:relative; }
	#headerPuppy img {position:absolute;z-index:1000;width:100%; }
	#headerText { height:100%; width:auto; margin-top:0.5em; float:left; }
	#headerText img { width:24vw; min-width:16em; max-width:50em; opacity:0.75; top:0.5em; position:absolute;}





/* MENU NAV */

	nav a {text-decoration:none !important}
	
	.menu-link { display:none; float:right; text-decoration:none; padding:0.15em 0.4em 0.65em 0.5em; font-size:2em; line-height:0.25em;background:#000; }
	
	.menu { float:right; margin:0 0.25em 0 0; font-size:1.625vw; }
	.menu ul { padding:0; margin:0; list-style:none; position:relative; display:inline-table; }
	.menu li { margin:0; padding:0 }
	
	.menu ul:after { content:""; clear:both; display:block; }
	/* .menu ul li {  background-color:rgba(255, 0, 0, 0); } */
	.menu > ul > li { display:inline-block; }
	.menu ul li a, .menu ul li .selected { display:block; text-decoration:none; color:#fff; font-size:1em; }
	.menu ul li > a, .menu ul li .selected { padding:0.75em 0.625em 0.625em; }
	
	
	.menu li.has-submenu a, .menu ul li .selected { cursor:default; }
	.menu li.has-submenu a { background:none;  }
	.menu li.has-submenu ul a  { cursor:pointer;  }
	 
	.menu ul ul { display:block; height:0; overflow:hidden; position:absolute;  z-index:10000; min-width:12em; top:100%; background:#000  }
	
	.menu ul li:hover > ul { display:block; height:auto; }
	
	.menu ul ul > li { position:relative; opacity:0; background:none;
		transition:opacity 0.25s ease-out; }
	
	.menu ul ul > li a { padding:0.25em 1em; height:auto; }
	.menu ul li:hover ul li a, .menu ul li ul li .selected { padding:0.75em 1em !important;}
	.menu ul li:hover ul li  { opacity:1 }
	
	.menu ul li.has-submenu:hover > a, .menu-link:hover, a.menu-link.active { background:#000  }
	.menu ul li:hover > a{ background:#f70; } 
	
	.menu ul li a, .menu ul li .selected, a.menu-link {color:#a69d90; transition:background 0.25s ease-out, color 0.25s ease, padding 0.125s ease-out}
	.menu ul ul li a, .menu ul ul li .selected {color:#a69d90;}
	.menu ul li a:hover, .menu ul > li:hover > a, .menu ul li a.active, a.menu-link:hover {color:#fff}
	
	.menu ul li .selected   { color:#fff !important; text-shadow:0 0 0.5em #ffb37b }
	.menu ul ul li .selected { padding-left:1em; }

	.menu ul li a.imgLink {width:2.2em;position:relative;}
	.menu ul li a.imgLink span {position:absolute;height:80%;width:100%;top:0;left:0;right:0;bottom:0;margin:auto;}
	.menu ul li a.imgLink img {position:absolute;width:100%;height:100%;opacity:0; transition:opacity 0.25s ease-out; -webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
	.menu ul li a.imgLink:hover {background:none}
	.menu ul li a.imgLink:hover img {opacity:1;} 

/* smaller menu 

@media screen and (max-width:53em) { 
	
	a.menu-link { display:block; z-index:1000; }

	.menu { background-color:rgba(0, 0, 0, 1); 
		transition:all 0.25s ease-in; 
		max-width:0em !important; position:absolute; right:0; top:100%; z-index:900; height:auto; opacity:0
	}
	
	.menu, .menu > ul ul { overflow:hidden; height:0; width:100%; max-width:100%; }
	.menu > li > ul { padding:0px; border:none; }
	.menu ul li:hover > ul { display:block; height:0; top:0; }

	.menu li.has-submenu a { cursor:pointer; }

	.menu ul ul > li { opacity:1; }

	.menu.active, .menu > ul ul.active, .menu ul li:hover > ul.active { height:auto; top:0; }
	.menu.active {right:0; top:100%;max-width:18em !important;opacity:1}

	.menu ul { display:inline; }

	.menu li, .menu > ul > li { display:block; }
	.menu li a { color:#000; display:block; padding: 1em !important; border:1px solid #333; border-width:1px 0 0; position:relative; }
	.menu li.has-submenu > a:after { content:'+'; position:absolute; top:0; right:0; display:block; font-size:2em; padding:0.4em 0.5em; }
	.menu li.has-submenu > a.active:after { content:"-"; }

	.menu ul ul { display:inherit; position:relative; border:none; }

	.menu ul li a, .menu ul li .selected {color:#a69d90;}

	.menu ul li a, .menu ul li:hover ul li a { padding:0.625em 1em !important; }
	.menu ul ul li a, .menu ul li:hover ul li a, .menu ul li .selected { border:none; padding:0.625em 1em 0.625em 1.5em !important; }
	
	.menu ul li.has-submenu:hover > a {background:#000}
	.menu ul li.has-submenu > a:hover {background:#333}

}
*/
	
/* tablet or phone probably 
	
@media all and (max-width:53em) {
	body { border-color:orange; }
	#page {text-align:center;}
	#puppyContent { margin:1.5em auto; padding:0; width:30em;max-width:90%;position:static;right:auto}
	
	section:before { width:100%; left:0; margin:0 }

	#headerText { width:35vw; min-width:10em;  }

	.menu { font-size:1em}

	#puppyContent h1  { position:relative; width:100%; right:auto; padding:0; text-align:left; margin:0.5em 0 0.25em; font-size:3em} 
	#puppyContent > img:first-child {position:relative;float:right;right:auto;top:auto;margin:-3em 0 0;}


 	h2, h3 { clear:both}

	article aside, section aside {position:relative; margin:1em 0 6em; right:auto; float:right; clear:both; width:100%; bottom:auto; max-width:25em} 

	footer ul li { display:inline-block; list-style-type:none; margin:0 1.618em 0 0; }
	footer ul img { display:block; float:none; margin:0 0 0.75em; outline:medium none; padding:0; width:70%; }
	footer { clear:both; padding:0; }
	
	body footer h1 { float:right; padding-left:1.618em; width:auto; }
	
	.other-articles { display:table; margin:auto; padding:0 0; }
	.other-articles li { display:table-cell; padding:0 0.75em; width:auto; }
}
*/

/*  phone portrait */	
/*  this is the smallest - will inherit rules from above, and then reduce margins, decrease line height, and indented bulleted lists etc. 

@media all and (max-width:20em) {
	body { border-color:red;  }
	h1 { font-size:2.5em;}
	h2 { margin-bottom:0.618em; padding-left:0.618em; padding-right:0.618em; }
	nav { margin-bottom:1em; margin-left:1em; }
	aside img { padding-left:1em; }
	p { line-height:1.4em; margin-bottom:1.4em;  }
	ul { padding-left:2em; }
	
	#puppyContent, header {font-size:5vw; line-height:1.4em; }
	
	footer ul li {float:left;clear:left}
	footer ul img { display:none; }
	footer h1 { margin-bottom:1.4em; }
	footer { }
}
*/
@media all and (min-width:53em) {
	
}

/* hires tablet landscape, 1368 width monitor */	
/* start scaling up various elements relative to the viewport size using VW units. */

@media all and (min-width:75em) {
	body { border-color:green}
	.menu li { font-size:0.85em}
	body  {font-size:1.3vw; line-height:1.618em; }
	h1 {font-size:4vw;}
}

/* 1920 width monitor */	
/* body text starts to get uncomfortably large at 90em so use rem units to keep it at a comfortable reading size while the other elements scale around it */	
	
@media all and (min-width:90em) {
	.menu ul { font-size:0.85em}
	.menu li li { font-size:0.95em}
	body { border-color:cyan}
	body {font-size:1.1875rem; line-height:1.618em; }
}