@charset "UTF-8";

/*
   DMWProjectWorks.css
   v0.8 2020-06-24
   v0.9 2020-07 tweaks for IE, Safari; footer; TVs; column breaks; 
   v1.0rc1 2020-07-18 tweaks for logo; 
*/

/* CSS RESET */
  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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box; 
  }
  
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, main, mark, menu, nav, 
  section, summary, time {
	display: block;
  }
  
  body {
	line-height: 1;
  }
  
  /* ol, ul {
	list-style: none;
  } */
  
  blockquote, q {
	quotes: none;
  }
  
  blockquote:before, blockquote:after,
  q:before, q:after {
	content: '';
	content: none;
  }
  
  table {
	border-collapse: collapse;
	border-spacing: 0;
  }
/* END CSS RESET */


/* VARIABLES */
  :root { /* Gray - blue - maroon scheme */
	--main-bg-color: #bbbbbb;
	--mid-bg-color: #dddddd;
	--alt-bg-color: #ffffff;
	--main-text-color: #000066;
	--mid-text-color: #0000aa;
	--alt-text-color: #0000ff; /* unused */
	--main-splash-color: #770044;
	--mid-splash-color: #992266; /* unused */
	--alt-splash-color: #bb4488; /* unused */
	--contrast-bg-color: var(--main-text-color);
	--contrast-text-color: var(--main-bg-color);
	--heading-font: Impact, "Verdana-Bold", "Futura-CondensedExtraBold", "Arial-BoldMT", "Arial Black", "Arial-Black", "Roboto-Black", sans-serif;
	--body-font: Verdana, Arial, HelveticaNeue, Helvetica, sans-serif;
  }
/* END VARIABLES */


/* Up to 599px: Phones and defaults */
  body {
	color: var(--main-text-color);
	background-color: black; 
  }

  a {
	color: var(--mid-text-color);
  }

  a:hover {
    	font-weight: bold;
  }

  footer {
	min-height: 2em;
	padding: 0.6em 0;
	background-color: var(--contrast-bg-color); 
	color: var(--contrast-text-color); 
	border-top: var(--main-splash-color) solid 0.2em;  
	border-bottom: var(--main-splash-color) solid 0.2em;  
  }

  footer p {
	font-size: 0.5em;
	text-align: center;
  }

  footer p + p {
	font-size: 0.3em;
  }

  h1 {
	font-size: 2em;
	font-family: var(--heading-font);
	padding-bottom: 0.5em;
  }

  h2 {
	font-size: 1.5em;
	font-family: var(--heading-font);
	font-style: italic;
	margin: 1em 0 0.5em 0;
	border-bottom: var(--main-splash-color) solid 2px;
  }
  
  h2::before {  /* Realigns links below fixed header */
	display: block; 
	content: " "; 
	margin-top: -130px; 
	height: 135px; 
	visibility: hidden; 
	pointer-events: none;
  }

  h3 {
	clear: both;
	color: var(--main-splash-color);
	font-size: 1.1em;
	font-family: var(--heading-font);
	padding: 1em 0 0.5em 0;
  }

  h3 + p {
	padding-left: 1em;
  }

  header {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	height: 100px; 
	width: 100%;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: var(--contrast-bg-color); 
	color: var(--contrast-text-color); 
	border-top: var(--main-splash-color) solid 0.2em;
  }

  img {
  }

  main {
	background-color: var(--mid-bg-color);
	background-image: linear-gradient(var(--main-bg-color), var(--alt-bg-color));
	color: var(--main-text-color);
	padding: 2em 1em 1em;
  }

  nav {
	position: -webkit-sticky; /* Safari */
	position: sticky; 
	top: 100px; 
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--contrast-bg-color);
	color: var(--contrast-text-color);
	border-bottom: var(--main-splash-color) solid 0.2em;
  }

  nav:hover .navlink {
	display: block;
  }

  nav a {
	text-decoration: none;
  }
  
  nav a:hover {
  	font-weight: normal;
  }

  p, li {
	font-family: var(--body-font); 
	line-height: 1.5;
	padding-bottom: 0.5em;
  }

  ul {
	margin-left: 1.5em;
	padding: 0.5em 0 0.5em 0.5em;
  }

  .bannerlogo {
	width: 80%;
  }

  .bold {
  	font-weight: bold;
  }

  .burger {
	background-color: var(--contrast-text-color);
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .burger-condiment {
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .burger-box {
	width: 30px;
	height: 30px;
	margin: 0 0 0 1em;
  }

  .columns {
	column-count: 1;
	column-width: 100%;
  }

  .h1b {
	line-height: 1.1;
	padding-bottom: 0.2em;
	margin-bottom: 1em;
	break-after: avoid;
	font-size: 1.8em;
	font-family: var(--heading-font);
	font-weight: normal;
	border-bottom: var(--main-splash-color) solid 0.2em;
  }

  .icon {
	width: 25%;
	max-width: 8em;
  }

  .left {
	float: left;
}

  .link-up {
	font-size: 80%;
	text-align: right;
  }

  .navlink {
	display: none;
	padding: 10px;
	margin: 5px;
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
	font-family: var(--heading-font);
	font-size: 100%;
	border: 1px solid var(--main-bg-color);
  }

  .navlink:hover {
	background-color: var(--alt-bg-color);
	color: var(--mid-text-color);  }

  .no-break {
	break-inside: avoid;
  }

  .page {
	background-color: var(--main-bg-color);
  }

  .quote-attrib {
	margin: 0 1em 1em 50%;
	font-style: italic;
	text-align: right;
  }

  .right {
	float: right;
  }

  .tagline {
	font-size: 80%;
	font-style: italic;
	font-weight: bold;
	text-align: right;
  }
/* End Up to 599px */

/* IE up to 599px */
  @media only screen and (-ms-high-contrast: active),  
	 only screen and (-ms-high-contrast: none) {
    body { color: #000066; }
    a { color: #0000aa; }
    footer { background-color: #000066; color: #bbbbbb; 
	border-top: #770044 solid 0.2em; border-bottom: #770044 solid 0.2em; }
    h1 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif; }
    h2 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border-bottom: #770044 solid 2px; }
    h2::before { height: auto; 
	margin-top: 0; }
    h3 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	color: #770044; }
    header { position: static;
	background-color: #000066; 
	color: #bbbbbb; 
	border-top: #770044 solid 0.2em; }
    main { background-color: #dddddd;
	background-image: linear-gradient(#bbbbbb, #ffffff);
	color: #000066; }
    nav { position: static;
	background-color: #000066;
	color: #bbbbbb;
	border-bottom: #770044 solid 0.2em; }
    p, li { font-family: Verdana, Arial, Helvetica, Helv, sans-serif; }
    .burger { background-color: #bbbbbb; }
    .h1b { border-bottom: #770044 solid 0.2em; }
    .navlink { background-color: #bbbbbb;
	color: #000066;
	font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border: 1px solid #bbbbbb; }
    .navlink:hover { background-color: #ffffff;
	color: #0000aa; }
    .page { background-color: #bbbbbb; }
 } /* End IE up to 599px */

/* Kindle and Kindle Fire up to 599px */
  @media only amzn-mobi, 
         only amzn-kf8 /* and (device-aspect-ratio:1280/800) */ { 
    body { color: #000066; }
    a { color: #0000aa; }
    footer { background-color: #000066; color: #bbbbbb; 
	border-top: #770044 solid 0.2em; border-bottom: #770044 solid 0.2em; }
    h1 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif; }
    h2 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border-bottom: #770044 solid 2px; }
    h2::before { height: auto; 
	margin-top: 0; }
    h3 { font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	color: #770044; }
    header { position: static;
	background-color: #000066; 
	color: #bbbbbb; 
	border-top: #770044 solid 0.2em; }
    main { background-color: #dddddd;
	background-image: linear-gradient(#bbbbbb, #ffffff);
	color: #000066; }
    nav { position: static;
	background-color: #000066;
	color: #bbbbbb;
	border-bottom: #770044 solid 0.2em; }
    p, li { font-family: Verdana, Arial, Helvetica, Helv, sans-serif; }
    .burger { background-color: #bbbbbb; }
    .h1b { border-bottom: #770044 solid 0.2em; }
    .navlink { background-color: #bbbbbb;
	color: #000066;
	font-family: Impact, "Arial Black", "Arial-Black", sans-serif;
	border: 1px solid #bbbbbb; }
    .navlink:hover { background-color: #ffffff;
	color: #0000aa; }
    .page { background-color: #bbbbbb; }
  } /* End Kindle and Kindle Fire to 599px */


/* 600-899px: Landscape phones, portrait tablets */
  @media only screen and (min-width: 600px) {
  
    header {
	border-bottom: 0.2em solid var(--main-splash-color);
    }

    li {
	break-inside: avoid;
    }
    
    main {
	margin-left: 20%; 
    }
    
    nav {
	float: left; 
	width: 20%;
	height: 100%;
	background-color: var(--main-bg-color); 
	border-bottom: none;
    }

    .bannerlogo {
	width: 50%
  }

    .burger {
	display: none;
    }
    
    .burger-box {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
    }
    
    .columns {
	column-count: 1;
	column-width: 100%;
    }
    
    .navlink {
	display: block;
	background-color: var(--mid-bg-color);
    }
    
    .tagline {
	font-size: 100%;
	text-align: right;
    }
  } /* End 600-899px */

  /* IE 600-899px */
  @media only screen and (min-width: 600px) and (-ms-high-contrast: active), 
	 only screen and (min-width: 600px) and (-ms-high-contrast: none) {
    header { border-bottom: 0.2em solid #770044; }
    nav { background-color: #bbbbbb; }
    .navlink { background-color: #dddddd; }
    .tagline { line-height: 0.2em; }
  } /* End IE 600-899px */


/* 900-1199px: Landscape tablets, portrait PCs */
  @media only screen and (min-width: 900px) {

    nav {
	clear: left;
    }

    ul {
	column-count: 2;
	column-width: 50%;
    }

    .bannerlogo {
	width: 35%;
	float: left;
    }

    .columns {
	column-count: 1;
	column-width: 100%;
    }

    .quote-attrib {
	margin-bottom: 2em;
    }

    .tagline {
	padding-top: 2em;
	font-size: 120%;
    }
  } /* End 900-1199px */

  /* IE 900-1199px */
  @media only screen and (min-width: 900px) and (-ms-high-contrast: active), 
	 only screen and (min-width: 900px) and (-ms-high-contrast: none) {
  } /* End IE 900-1199px */


/* 1200-1999px: Landscape PCs */
  @media only screen and (min-width: 1200px) {

    footer {
	left: 10%;
   }
  
    nav {
	width: 20%;
    }

    .columns {
	column-count: 2;
	column-width: 50%;
    }
    
    .page {
	margin: 0 10%;
	max-width: 1600px;
    }
  } /* End 1200-1999px */

  /* IE 1200-1999px */
  @media only screen and (min-width: 1200px) and (-ms-high-contrast: active), 
	 only screen and (min-width: 1200px) and (-ms-high-contrast: none) {
    footer { width: 100%; }
    .page { background-color: #bbbbbb; }
  } /* End IE 1200+px */


/* 2000px up: Landscape TVs */
  @media only screen and (min-width: 2000px) {
  } /* End 2000+px */