article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
  margin: 0;
  padding: 0;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before, q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button, input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

html {
  text-align: center;
  /* Source:Transcending CSS, p. 159. */
  font-size: 100%;
}

body {
  width: 100%;
  padding: .5rem;
  margin: 0 auto;
  position: relative;
  /* This is critical. It causes child elements to
     be positioned relative to the body element, rather
     than relative to the view screen. */
  color: #333333;
  background-color: #fff;
  text-align: left;
  vertical-align: top;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5;
}

/* We need to declare these elements as block elements because browsers treat them as 
    inline elements otherwise. (Source: Gauchat, HTML5 for Masterminds, p.49) */
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
  display: block;
}

/* The a.body class defines a link element with a standard body font styles, but
no color change to indicate "visited" and no hover text decoration */
a.body:link, a.body:visited, a.body:active, a.body:hover {
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  text-decoration: none;
  color: #333333;
  cursor: pointer;
}

a.body:visited {
  color: #333333;
}

a.body:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  word-spacing: normal;
  text-transform: none;
  color: blue;
  font-style: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  letter-spacing: normal;
  text-decoration: none;
  margin: 1rem 0 .5rem 0;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: .9rem;
}

h6 {
  font-size: .8rem;
}

div, p, ul, ol, li, dl, dt, dd, table, pre, form, fieldset, blockquote, input {
  color: #000000;
  line-height: 1.5;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  margin: 0;
  padding: 0;
}

div, th, td {
  margin: 0;
  padding: 0;
}

a:link, a:visited, a:active, a:hover {
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  text-decoration: none;
  color: #3333ff;
}

a:visited {
  color: #3333ff;
}

a:hover {
  text-decoration: underline;
}

/* Note that order matters for anchor pseudo-classes.  Above,
    hover follows visited, so color changes as you mouse-over, 
    whether the link has been visited or not. 
    Source: Briggs et al., p. 98. */
ol, ul {
  list-style: none;
  padding-left: 1rem;
}

ul li {
  list-style-type: square;
  font-size: 1rem;
}

ul li li {
  list-style-type: disc;
  font-size: 1rem;
}

ul li li li {
  list-style-type: circle;
  font-size: 1rem;
}

ol li {
  list-style-type: decimal;
  font-size: 1rem;
}

ol ol li {
  list-style-type: lower-alpha;
  font-size: 1rem;
}

ol ol ol li {
  list-style-type: lower-roman;
  font-size: 1rem;
}

ol li ul li {
  list-style-type: square;
  font-size: 1rem;
}

ul, ol {
  list-style-position: outside;
  margin-left: 1rem;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
}

hr {
  height: 1px;
  color: #000000;
  background-color: #000000;
  border: solid 0px #000000;
}

img, fieldset {
  border: 0;
}

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
/* Class to use the honeypot technique for invisible Captcha.  
   See http://www.ngenworks.com/blog/invisible_captcha_to_prevent_form_spam  */
.confirmation-field {
  display: none;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* All screens: Common styles */
a.nav-header {
  text-decoration: none;
  color: blue;
}

a.nav-header:hover {
  color: darkblue;
}

input#nav {
  display: none;
}

nav.header-nav {
  background-color: blue;
  width: 100%;
  text-align: center;
}

ul.header-nav {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

a.header-nav {
  text-decoration: none;
  display: block;
  color: white;
}

/* Large screen basic: Generated content */
@media (min-width: 851px) {
  a.nav-header:after {
    content: ": XSS Defense Made Easy";
  }
}
/* Smaller screens basic: Generated content */
@media (max-width: 850px) {
  a.nav-header:after {
    content: "";
  }
}
/* Small and medium screens */
@media (max-width: 850px) {
  /* Basic */
  header.nav-header {
    text-align: center;
  }

  a.nav-header {
    font-size: 2.3rem;
  }

  label#menu {
    display: none;
  }

  nav.header-nav {
    display: block;
  }

  ul.header-nav {
    background-color: blue;
  }

  a.header-nav {
    font-size: 1.1rem;
    line-height: 2.333333;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  a.header-nav:hover {
    background-color: deepskyblue;
  }

  /* Enhanced */
  .flexbox.flexwrap {
    /* Checkbox hack */
    /* Ordinary style rules  */
  }
  .flexbox.flexwrap nav.header-nav {
    display: none;
  }
  .flexbox.flexwrap input#nav:checked ~ nav.header-nav {
    display: block;
  }
  .flexbox.flexwrap a.nav-header {
    color: white;
    font-size: 1.4rem;
    line-height: 2.3333333;
  }
  .flexbox.flexwrap header.nav-header {
    width: auto;
    background-color: blue;
    color: white;
    line-height: 2.333333;
    text-align: left;
    padding-left: 1.5rem;
  }
  .flexbox.flexwrap label#menu {
    display: block;
    width: auto;
    background-color: blue;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2.333333;
    text-align: center;
    cursor: pointer;
  }
  .flexbox.flexwrap label#menu:hover {
    background-color: darkblue;
  }
  .flexbox.flexwrap ul.header-nav {
    background-color: deepskyblue;
  }
  .flexbox.flexwrap a.header-nav:hover {
    background-color: darkblue;
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:hover {
    background-color: darkblue;
  }
}
/* Small screen: Enhanced */
@media (max-width: 500px) {
  /* Enhanced */
  .flexbox.flexwrap {
    /* Flexbox properties */
    /* Generated label content*/
    /* hamburger icon */
    /* x icon */
  }
  .flexbox.flexwrap div.header-nav {
    display: flex;
    flex-wrap: wrap;
  }
  .flexbox.flexwrap header.nav-header {
    flex: 1 1 auto;
  }
  .flexbox.flexwrap label#menu {
    flex: 0 0 90px;
  }
  .flexbox.flexwrap label#menu:before {
    content: "\2630";
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:before {
    content: "X";
  }
}
/* Medium screen: */
@media (min-width: 501px) and (max-width: 850px) {
  /* Enhanced */
  .flexbox.flexwrap {
    /* Flexbox properties */
    /* Generated label content*/
    /* unicode down arrow */
    /* unicode up arrow */
  }
  .flexbox.flexwrap div.header-nav {
    display: flex;
    flex-wrap: wrap;
  }
  .flexbox.flexwrap header.nav-header {
    flex: 1 1 auto;
  }
  .flexbox.flexwrap label#menu {
    flex: 0 0 140px;
    font-weight: normal;
  }
  .flexbox.flexwrap label#menu:before {
    content: "Menu \25BC";
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:before {
    content: "Menu \25B2";
  }
}
/* Large screen: Basic */
@media (min-width: 851px) {
  div.header-nav {
    display: block;
    background-color: white;
  }

  header.nav-header {
    display: block;
    padding: 1rem 0;
    width: 100%;
    background-color: white;
    color: blue;
    text-align: center;
  }

  a.nav-header {
    font-size: 2.8rem;
    background-color: white;
  }

  label#menu {
    display: none;
  }

  nav.header-nav {
    display: block;
    height: 3.5rem;
  }

  ul.header-nav {
    background-color: blue;
    max-width: 980px;
  }

  ul.header-nav li {
    display: inline-block;
  }

  a.header-nav {
    font-size: 1.4rem;
    line-height: 2.5;
    padding: 0 1rem;
  }

  a.header-nav:hover {
    background-color: deepskyblue;
  }
}
/* Large screen: Enhanced  */
@media (min-width: 851px) {
 /* Menu items equally spaced
.flexbox.flexwrap { 
    ul.header-nav { display:flex; justify-content:space-around; }
} */
  /* One item to the right */
  .flexbox.flexwrap ul.header-nav {
    display: flex;
  }
  .flexbox.flexwrap ul.header-nav li:last-child {
    margin-left: auto;
  }
}
/* ul li:last-child { background-color: darkblue; } */
/* Common basic styles */
footer {
  background-color: white;
}

nav.footer-nav {
  background-color: blue;
  width: 100%;
  text-align: center;
}

ul.footer-nav {
  list-style: none;
  background-color: blue;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
}

.footer-nav li {
  display: inline-block;
}

a.footer-nav {
  display: inline-block;
  text-decoration: none;
  color: white;
  line-height: 3;
}

a.footer-nav:hover {
  background-color: deepskyblue;
}

div.footer-details {
  max-width: 980px;
  margin: 1rem auto;
  text-align: center;
}

/* Small screens */
@media (max-width: 500px) {
  /* Basic */
  a.footer-nav {
    font-size: 1rem;
    padding: 0 .5rem;
  }
}
/* Medium screens */
@media (min-width: 501px) and (max-width: 850px) {
  /* Basic */
  a.footer-nav {
    font-size: 1.1rem;
    padding: 0 1.5rem;
  }
}
/* Large screens */
@media (min-width: 851px) {
  /* Basic */
  a.footer-nav {
    font-size: 1.2rem;
    padding: 0 2rem;
  }
}
/* Common enhanced styles */
.flexbox.flexwrap ul.footer-nav {
  display: flex;
  justify-content: space-around;
}

/* Large screens: Optional added content */
@media (min-width: 501px) {
  ul.footer-nav li:nth-child(1) a:after {
    content: " bio";
  }

  ul.footer-nav li:nth-child(2) a:after {
    content: " us";
  }

  ul.footer-nav li:nth-child(3) a:after {
    content: " and conditions";
  }
}
div.main-std {
  width: 100%;
  margin-bottom: 2rem;
}

.main-std div.row1 {
  text-align: left;
  margin: 1rem auto;
  max-width: 980px;
  padding: 0 1rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

div.main-std p, div.main-std li {
  margin: 1rem 0;
  color: black;
}

p.label1 {
  font-weight: bold;
  color: #555;
}

/* Small screen: Basic */
@media (max-width: 850px) {
  html {
    font-size: .9rem;
  }

  .main-std div.row1 {
    padding: 0 1rem;
  }
}
.main-std div.row5 {
    background-color: dodgerblue;
    max-width: 100%;
    padding: 1rem 0;
    margin-top: 2rem;
}

.row5 h2 {
  text-align: center;
}

.row5 h2, .row5 p.toc1, .row5 p.toc2, .row5 p, .row5 li.white {
  color: white !important;
}

.ErrorMsg {
  color: crimson;
  text-align: center;
  margin: 2rem auto;
  font-weight: bold;
  font-size: 1.2rem;
}

div.email {
  width: 100%;
  margin: 0 auto;
}

div.comment {
  width: 100%;
  margin: 0 auto;
}

.txtEmail {
  border: solid 1px black;
  width: 100%;
  padding: 0 1rem;
  width: 270px;
  height: 40px;
}

.txtComment {
  border: solid 1px black;
  width: 100%;
  padding: 0 1rem;
  height: 150px;
  min-width: 270px;
}

#CaptchaContainer {
  text-align: center;
  margin-bottom: 2rem;
}

#imgHtmlCap {
  height: 61.364px;
  width: 270px;
  display: block;
  margin: 0 auto 1rem auto;
}

.txtSecurityCheck {
  text-align: center;
  height: 61.364px;
  width: 270px;
  font-size: 1.2rem;
  margin: 1rem 0;
  display: block;
  margin: 0 auto 1rem auto;
}

.btnSend {
  padding: 0 2rem;
  color: white;
  border-radius: .4rem;
  background-color: green;
  font-size: 1.5rem;
  border: none;
  height: 68px;
  display: block;
  margin: 0 auto 1rem auto;
}

/* Large screen: Enhanced captcha */
@media (min-width: 851px) {
  div.email {
    width: 90%;
  }

  div.comment {
    width: 90%;
  }

  /* One item to the right */
  .flexbox.flexwrap #CaptchaContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    align-items: flex-start;
  }
  .flexbox.flexwrap #imgHtmlCap {
    height: 61.364px;
    width: 270px;
    margin: 0;
  }
  .flexbox.flexwrap .txtSecurityCheck {
    text-align: center;
    height: 61.364px;
    width: 270px;
    flex: 0 0 270px;
    font-size: 1.2rem;
    margin: 0;
  }
  .flexbox.flexwrap .btnSend {
    padding: 0 2rem;
    color: white;
    border-radius: .4rem;
    background-color: green;
    font-size: 1.5rem;
    border: none;
    height: 61.364px;
    margin: 0;
  }
}
.div-download-button {
  text-align: center;
  padding: 1rem 0;
}

.btnDownload {
  padding: 0 2rem;
  color: white;
  border-radius: .4rem;
  background-color: green;
  font-size: 1.5rem;
  border: none;
  height: 68px;
}

div.book-desc {
  display: block;
  margin-left: 0;
}

div.book-img {
  margin-top: 1.5rem;
}

img#book {
  display: none;
  max-width: 270px;
  height: auto;
  width: 100%;
}

img#book2 {
  display: block;
  max-width: 270px;
  height: auto;
  width: 100%;
  margin: 0 auto;
}

/* Large screen: Enhanced default page */
@media (min-width: 701px) {
  /* book image */
  .flexbox.flexwrap img#book {
    display: block;
    width: 270px;
  }
  .flexbox.flexwrap img#book2 {
    display: none;
  }
  .flexbox.flexwrap div.book-wrapper {
    display: flex;
  }
  .flexbox.flexwrap div.book-desc {
    margin-left: 2rem;
    align-self: center;
  }
}
ul.faq {
  padding-left: 0;
  margin-left: 0;
}

li.faq {
  list-style-type: none;
}

p.Qfaq {
  color: darkred !important;
}

p.Afaq {
  padding-left: 1rem;
}

.div-buy-button {
  text-align: center;
  padding: 1rem 0;
}

.btnBuy {
  padding: 0 2rem;
  color: white;
  border-radius: .4rem;
  background-color: green;
  font-size: 1.5rem;
  border: none;
  height: 68px;
}

.toc1 {
  padding-left: 1rem;
  font-weight: bold;
}

.toc2 {
  padding-left: 2rem;
}

/* Large screen: Enhanced default page */
@media (min-width: 551px) {
  /* Table of contents */
  .flexbox.flexwrap .divToc {
    display: flex;
    justify-content: space-around;
  }
  .flexbox.flexwrap .tocColumn1, .flexbox.flexwrap .tocColumn2 {
    margin: 0 1rem;
  }
}
div.user-guide-wrapper {
  display: block;
}

div.user-guide-description {
  display: block;
  margin-left: 0rem;
}

div.user-guide-image1 {
  display: block;
  margin: 1rem auto;
}

div.user-guide-image2 {
  display: none;
  margin: 1rem auto;
}

img#imgUser-Guide1 {
  width: 270px;
}

h2.h2UserGuide {
  text-align: center;
}

div.div-buy-book {
  text-align: center;
}

a.btn-buy-book {
  padding: 1rem 2rem;
  color: white;
  border-radius: .4rem;
  background-color: green;
  font-size: 1.5rem;
  border: none;
  display: inline-block;
  text-decoration: none;
}

/* Large screen: Enhanced */
@media (min-width: 701px) {
  /* book image */
  .flexbox.flexwrap div.user-guide-wrapper {
    display: flex;
  }
  .flexbox.flexwrap div.user-guide-image1 {
    display: none;
    margin: 1rem auto;
  }
  .flexbox.flexwrap div.user-guide-image2 {
    display: block;
    margin: 1rem 0 0 0;
    order: -1;
  }
  .flexbox.flexwrap img#imgUser-Guide2 {
    max-width: 270px;
    height: auto;
    flex: 0 0 auto;
  }
  .flexbox.flexwrap div.user-guide-description {
    margin-left: 2rem;
    align-self: center;
  }
  .flexbox.flexwrap div.div-buy-book {
    margin: 0;
  }
  .flexbox.flexwrap a.btn-buy-book {
    display: inline-block;
  }
}
div.template-wrapper {
  display: block;
}

div.template-description {
  display: block;
  margin-left: 0rem;
  margin-top: -.5rem;
}

img#template-image {
  display: none;
  max-width: 270px;
  height: auto;
  width: 100%;
}

img#template-image1 {
  display: block;
  min-width: 270px;
  max-width: 350px;
  height: auto;
  width: 100%;
  margin: 0 auto;
}

a.user-guide {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* Large screen: Enhanced */
@media (min-width: 701px) {
  /* book image */
  .flexbox.flexwrap img#template-image {
    display: block;
    min-width: 270px;
    max-width: 350px;
    height: auto;
  }
  .flexbox.flexwrap img#template-image1 {
    display: none;
  }
  .flexbox.flexwrap div.template-wrapper {
    display: flex;
    align-items: center;
  }
  .flexbox.flexwrap div.template-description {
    margin-right: 2rem;
    flex: 1 1 600px;
  }
}
.download ul li {
  color: white;
}

div.features {
  display: block;
}

div.feature {
  text-align: center;
  margin: 2rem 1rem;
}

img.feature {
  max-width: 250px;
  height: auto;
}

h2.feature {
  text-align: center;
}

div.feature p {
  max-width: 270px;
  margin: 0 auto;
}

/* Enhanced: template features */
.flexbox.flexwrap div.features {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 2rem 0rem;
}

div.errata-wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #ddd;
  border: 1px solid #bbb;
}

div.errata {
  padding-left: 1rem;
  margin: 0;
  padding-right: .5rem;
}

div.errata:nth-child(even) {
  background-color: #eee;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

div.errata:nth-child(odd) {
  background-color: #ddd;
}

ul.errata {
  padding-left: 1rem;
  margin: 0;
}

p.indent1 {
  padding-left: 1rem;
}