.title { font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; color: #333333 ; font-weight: bold; padding-left:0.3em; padding-bottom: 0.2em}
.header { overflow-wrap: break-word}
.header a {font-family: Geneva, Arial, Helvetica, san-serif; font-size: 1em; color: #0033CC; font-variant: small-caps; padding-left: 0.3em; padding-right: 0.3em }
.header a:visited, .header a:link, .header a:active { color: blue; text-decoration: none; }
.header a:hover { background-color: #CCCCCC; }
.footer {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; color: #000099; text-align:center; }
div.footer {clear: both; border-top: 1px solid #888888; padding: 0.5rem 0 }

.navtitle { font-family: Arial, sans-serif; font-size: 1.1em; font-weight: bold; padding-bottom: 0.3em}
.navbar { font-family: Geneva, Arial, Helvetica, san-serif; font-size: 1em; font-weight: normal; color: #000000; font-variant: small-caps}
.sansserif { font-family: Arial, sans-serif; font-size: 0.8em; color: #333333 }

.sidebar { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; background-color: #DDDDDD; color: #000033; padding-top: 0.4em; padding-bottom: 0.4em }
.subheading {font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; color: #000033}

.pattern table {font-family: Arial;font-stretch:semi-condensed;}
.pattern td {text-align: center}
.pattern p, .pattern ul, .pattern ol { font-family: Merriweather, serif; font-size: 1.1em; color: #333333 }
.pattern h2 {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: bold; color: #333333}
p.pattern-solution { font-weight:bold }
.patternstatus { font-size:1.25em; color:#5A5A5A; }
.pattern pre { background-color: #fffee8; padding: 6 0 6 4; font-size: 1.1em; }
.pattern blockquote { font-family: Merriweather, serif; font-size: 1.1em; color: #666666;  border-left-color: #DDDDDD; border-left-style: solid;   border-left-width: 0.4em; padding-left: 1em; margin-left: 0; }

.caption {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em}
.code {font-family: monospace; font-size: 0.9em}
.newexample { background-color:red; color:yellow;padding: 2px 10px;font-size: 80%; margin-left: 10px; text-decoration: none;}

.bookisout { background-color: #DDEEFF; padding: 0.2em; font-style: italic;}

.tiles { display: flex; flex-wrap: wrap;justify-content: space-between;margin: 5px 0;}
.tiles > div {margin: 7px;min-width: 20em;flex: 1 1 0}
.tiles p { margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em;}
.tiles ul { list-style: none; padding: 0; margin: 0.1em; }
.tiles img { float:left; clear: left; padding-right:5px; }

div.navimg_wrapper { display: block; overflow-x: auto; max-width: none; }

div.main {  }
div.toc { float:right; width:10em; padding-left: 1rem; display: none }
.toc div{ font-family: Arial, Helvetica, sans-serif; font-size: 0.8rem; font-weight: bold; color: #333333; background-color: #CCCCCC; border: 1px solid #333333; padding: 4px; text-align: center}
.toc ul {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7rem; list-style: none; text-decoration: none; padding-left: 0; margin-top: 0}
.toc > ul { border-bottom-style: solid; border-width: 1px; border-color: #000066; }
.toc ul > li {background-color: #000066; padding: 4px 0; text-align: center}
.toc a { text-decoration: none; }
.toc > ul > li { color: white; font-weight: bold; }
.toc > ul > ul > li { color: #333333; background-color: #FFFFFF; text-align: left; border-style: none solid; border-width: 1px; border-color: #000066; padding: 2px; list-style: none; }
.toc > ul > li > a:link, .toc > ul > li > a:visited, .toc > ul > li > a:active { color: white; }
.toc > ul > ul > li > a:link, .toc > ul > ul > li > a:visited, .toc > ul > ul > li > a:active { color: #000066; }
.toc > ul > ul > li:hover { background: #CCCCCC; }
.toc > ul > li > a:hover { color: #CCCCCC; }

.tocheading {font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; color: #FFFFFF; background-color: #333333}
td.tocentry { font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; color: #333333;vertical-align: middle; border: 1px solid #333333; padding: 4px}
td.tocentrytitle { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #333333; vertical-align: middle; border: 1px solid #333333; padding: 4px}

@media screen and (max-width: 800px) {
.pattern pre { display: block; overflow-x: auto; max-width: 95%}
.pattern img { max-width: 95% }
.pattern table { display: block; overflow-x: auto; max-width: 95% }
}

@media screen and (min-width: 801px) {
.pattern pre { display: block; overflow-x: auto; max-width: calc(100vw - 200px) }
div.main {margin-right: 11rem }
div.toc {display: block}
}

@media screen and (max-width: 550px) {
.pattern p, .pattern ul, .pattern ol, .pattern blockquote { font-size: 1.2em }
.pattern h2 { font-size: 1.2em; }
.navtitle { font-size: 1.2em; }
div.navimg_wrapper { max-width: 90vw; }
}

@media screen and (max-width: 800px) {
.hideOnMobile { visibility: hidden; display:none; }
}

.hotspot {
position: absolute;
background-color: white;
font-family: Arial;
font-size: 12px;
padding-bottom: 2px;
padding-left: 1px;
}

div.hotspot a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
padding-left: 1px;
box-sizing: border-box;
}

.hotspot-title {
position: absolute;
background-color: #CCCCCC;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}

div.hotspot-title a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
padding: 3px 3px 0 3px;
box-sizing: border-box;
text-align:center;
line-height: 95%;
}

div.hotspot-title a:link, div.hotspot-title a:visited, div.hotspot-title a:active {
color: black;
}

div.hotspot-title a:hover {
color: #333;
background-color: white;
}

@media screen and (max-width:655px) {
 .hotspot {
font-stretch:semi-condensed;
}
.hotspot-title {
font-stretch:semi-condensed;
}
}

div.hotspot a:link, div.hotspot a:visited, div.hotspot a:active {
color: blue
}

div.hotspot a:hover {
color: #333;
background-color: #CCC;
}