custom.css

/* 
    CSS stylesheet for fuzzingbook

    This is used both for the HTML version 
    as well as for the Jupyter Notebook version.

    To apply this on local Jupyter notebook sessions, copy it to
    ~/.jupyter/custom/custom.css
*/

/* Loading fonts in Jupyter */
@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700|Patua+One|Open+Sans|Source+Code+Pro);


/* Fonts */
h1, h2, h3, h4, h5 {
	font-family: 'Patua One', Helvetica, Arial, sans-serif;
}

body {
  font-family: 'Open Sans', sans-serif;
}

code, kbd, pre, samp {
  font-family: 'Fira Mono', 'Source Code Pro', monospace;
}

.CodeMirror pre {
  font-family: 'Fira Mono', 'Source Code Pro', monospace;
}

/* Font sizes */
/* We use somewhat smaller fonts for small devices and print */

p, li, summary {
	font-size: 16px;
	line-height: 26px;
}
@media only screen and (max-width: 600px) {
    p, li, summary {
    	font-size: 14px;
    	line-height: 24px;
    }
}
@media print {
    p, li, summary {
    	font-size: 12px;
    	line-height: 18px;
    }
}

code, kbd, pre, samp {
  font-size: 14px;
  line-height: 18px;
}
.CodeMirror pre {
  font-size: 14px;
  line-height: 18px;
}
/* Code size must be extra small to fit on screen */
@media only screen and (max-width: 600px) {
    code, kbd, pre, samp {
      font-size: 12px;
      line-height: 18px;
    }
    .CodeMirror pre {
      font-size: 12px;
      line-height: 18px;
    }
}
@media print {
    code, kbd, pre, samp {
      font-size: 10px !important;
      line-height: 14px;
    }
    .CodeMirror pre {
      font-size: 10px !important;
      line-height: 14px;
    }
}


/* Titles */

/* Book title */
/* Patua One looks better in normal weight */
section > h1 {
	font-size: 48px!important;
    font-weight: normal!important;
}

/* Chapter title */
h1 {
	font-size: 38px!important;
    font-weight: normal!important;
}

/* Section */
h2 {
	font-size: 28px!important;
    font-weight: normal!important;
}

/* Subsection */
h3 {
	font-size: 24px!important;
    font-weight: normal!important;
}

/* More sections */
h4, h5 {
	font-size: 20px!important;
    font-weight: normal!important;
}


/* Small screens */
@media only screen and (max-width: 600px) {
    section > h1 { font-size: 36px!important; }
    h1 { font-size: 32px!important; }
    h2 { font-size: 26px!important; }
    h3 { font-size: 22px!important; }
    h4, h5, h6, summary {
        { font-size: 18px!important; }
    };
}
/* Print */
@media print {
    section > h1 { font-size: 32px!important; }
    h1 { font-size: 26px!important; }
    h2 { font-size: 22px!important; }
    h3 { font-size: 18px!important; }
    h4, h5, h6, summary {
        { font-size: 14px!important; }
    };
}



/* Exercises */
/* Some color tweaks to exercise2 buttons */
.onoffswitch-label {
    border: 2px solid #ffffff!important;
}

/* Show solution */
.onoffswitch-inner:after {
    background-color: #B03A2E!important; 
    color: #ffffff!important;
}

/* Hide solution */
.onoffswitch-inner:before {
    background-color: #F1948A!important; 
    color: #000000!important;
}




/* Jupyter Table of Contents */
/* See https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css */
#toc-wrapper .toc-item-num {
    font-family: 'Patua One', Helvetica, Arial, sans-serif!important;
    /* font-family: 'Open Sans', sans-serif!important; */
}

#toc-wrapper li > span:hover {
  background-color: #F1948A!important;
}
.toc-item li { 
    font-size: 14px!important; 
    /* font-family: 'Patua One', Helvetica, Arial, sans-serif!important; */
    font-weight: normal!important;
}
#toc-wrapper .header {
  font-size: 20px!important;
  color: #B03A2E;
  font-family: 'Patua One', Helvetica, Arial, sans-serif;
  font-weight: normal!important;
}



/* Colors */
/* We want white code boxes on a light grey background */
body {
    background-color: #F0F0F0;
}
/* But not when it's print */
@media print {
    background-color: white;
}

.container {
    background-color: #F8F8F8!important;    
}
@media print {
    background-color: white!important;
}


.input_area, .output_area {
    background-color: white!important;    
}

/* Regular outputs come in blue, errors in red */
.output_area pre {
    color: darkblue!important;
/*  font-weight: bold; */
}

.output_stderr pre {
    color: #B03A2E!important;
}

/* Headers are dark red, too */
h1, h2, h3 {
    color: #B03A2E!important;
}

h4, h5, h6, summary {
    color: black;
}


/* And links also come in shades of red */
a:link { /* unvisited link */
    color: #A93226;
    /* text-decoration: none!important; */
}

a:visited {
    color: #A93226;
    /* text-decoration: none!important; */
}

a:hover, a:focus {
    color: #F1948A;
    /* text-decoration: none!important; */
    /* font-weight: bolder!important; */
}

a:active {
    color: red;
    /* text-decoration: none!important; */
}

svg a {
    text-decoration: none!important;
}



/* Make selections yellow; easier to see in classroom */
::selection {
    background: #ffff50;
}
::-moz-selection { /* Code for Firefox */
    background: #ffff50;
}


/* Imprint */
.imprint {
	font-size: 12px;
    line-height: 16px;
    margin-top: 1cm;
}
@media print {
    .imprint {
    	font-size: 9px;
        line-height: 12px;
    }
}

/* Synopsis */
.synopsis {
    border-style: dotted;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
}

/* Quizzes */
.quiz {
    border-style: dotted;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    background: cornsilk;
}



/* Details */
/* See https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal?noredirect=1&lq=1 */
/* TODO: Closing details is not animated yet; not sure whether this is possible in CSS - AZ*/

details[open] summary ~ * {
  animation: sweep-in .5s ease-in-out;
}
details:not([open]) summary ~ * {
  animation: sweep-out .5s ease-in-out;
}

@keyframes sweep-in {
  0%    {opacity: 0; margin-top: -30px}
  100%  {opacity: 1; margin-top: 0px}
}

@keyframes sweep-out {
  0%    {opacity: 1; margin-top: 0px}
  100%  {opacity: 0; margin-top: -30px}
}

details {
    border-style: dashed;
    border-color: gray;
    border-width: 1px;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    outline: none !important;
}

summary {
    outline: none !important;
}



/* Solutions */
.solution_link {
	/* font-size: 12px; */
    font-style: italic;
}
@media print {
    .solution_link {
    	font-size: 9px;
        line-height: 12px;
        font-style: italic;
    }
}


/* Beta warning */
.beta {
    background: #ffff50;
    padding: 3px;
    font-style: italic;
    color: #000000;
    padding: 5px;
}

/* Current page in menu */
#cssmenu a.this_page {
    font-weight: bold;
    color: #ffffff;
}

/* Page not public yet in menu */
#cssmenu a.not_public {
    color: #a0a0a0;
}


/* Notebook page in menu */
#cssmenu a.edit_as_notebook {
    font-weight: bold;
    color: #ffffff;
}

/* More coming in menu */
.more_coming {
    font-style: italic!important;
}

/* New chapter indicator in menu */
.new_chapter {
    font-weight: bold;
    font-size: 100%;
    /* color: aqua; */
    color: #F1948A;
}

/* Part number in menu */
.part_number {
	float: left;
    text-align: left;
    width: 22px;
}


/* Chapters in menu */
.chapters {
    /* font-style: italic!important; */
}

/* Chapter numbers in menu */
.chnum {
    /* font-weight: bold; */
}


/* Imports */
a.import {
    text-decoration: underline;
    color: blue;
}

a.import[href]:after {
    content: "" !important;  /* Avoid adding links for imports */
}

a.import:visited {
    color: darkblue;
}

a.import:hover, a.import:focus {
    color: cornflowerblue;
}

a.import:active {
    color: red!important;
}


/* Main content */
article {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

/* Have links show up at a nice offset */
/* See https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors */
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

/* On small screens, have menu text disappear, leaving only icons */
@media screen and (max-width: 900px) { span.menu_5 { display: none;} }
@media screen and (max-width: 850px) { span.menu_4 { display: none;} }
@media screen and (max-width: 800px) { span.menu_3 { display: none;} }
@media screen and (max-width: 750px) { span.menu_2 { display: none;} }
@media screen and (max-width: 700px) { span.menu_1 { display: none;} }

/* On small screens, use whatever width that is there */
@media only screen and (max-width: 600px) {
  .container {
    width: auto;
  }
}


/* CSS Menu */
#cssmenu,
#cssmenu ul,
#cssmenu ol,
#cssmenu li,
#cssmenu a {
  border: none;
  line-height: 1;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  cursor: pointer;
}
#cssmenu {
  height: 37px;
  display: block;
  border: 1px solid;
  /* border-radius: 5px; */
  width: 100%;
  border-color: #660000;
  position: fixed;
  z-index: 5000;
  transition: opacity 1s;
  margin: 0;
  padding: 0;
}

#cssmenu > ul,
#cssmenu > ol {
  list-style: inside none;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > li,
#cssmenu > ol > li {
  list-style: inside none;
  float: left;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu.align-center > ul,
#cssmenu.align-center > ol {
  text-align: center;
  font-size: 0;
}
#cssmenu.align-center > ul > li,
#cssmenu.align-center > ol > li {
  float: none;
  display: inline-block;
}
#cssmenu.align-center ul ul,
#cssmenu.align-center ol ol,
#cssmenu.align-center ol ul,
#cssmenu.align-center ul ol {
  text-align: left;
}
#cssmenu.align-center > ul > li:first-child > a,
#cssmenu.align-center > ol > li:first-child > a {
  /* border-radius: 0; */
}
#cssmenu > ul > li > a,
#cssmenu > ol > li > a {
  outline: none;
  display: block;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: 700;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  border-right: 1px solid #660000;
  color: #ffffff;
  padding: 12px 20px;
}
#cssmenu > ul > li:first-child > a,
#cssmenu > ol > li:first-child > a {
  /* border-radius: 5px 0 0 5px; */
}
#cssmenu > ul > li > a:after,
#cssmenu > ol > li > a:after {
  content: "";
  position: absolute;
  border-right: 1px solid;
  top: -1px;
  bottom: -1px;
  right: -2px;
  z-index: 5010;
  border-color: #cc0000;
}
#cssmenu ul li.has-sub:hover > a:after,
#cssmenu ol li.has-sub:hover > a:after {
  top: 0;
  bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before,
#cssmenu > ol > li.has-sub > a:before {
  content: "";
  position: absolute;
  top: 18px;
  right: 6px;
  border: 5px solid transparent;
  border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before,
#cssmenu > ol > li.has-sub:hover > a:before {
  top: 19px;
}
#cssmenu > ul > li.has-sub:hover > a,
#cssmenu > ol > li.has-sub:hover > a {
  padding-bottom: 14px;
  z-index: 5020;
  border-color: #3f3f3f;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > ol,
#cssmenu ol li.has-sub:hover > ul,
#cssmenu ol li.has-sub:hover > ol {
  display: block;
}
#cssmenu > ul > li.has-sub > a:hover,
#cssmenu > ul > li.has-sub:hover > a,
#cssmenu > ol > li.has-sub > a:hover,
#cssmenu > ol > li.has-sub:hover > a {
  background: #3f3f3f;
  border-color: #3f3f3f;
}
#cssmenu ul li.has-sub:focus-within > ul,
#cssmenu ul li.has-sub:focus-within > ol,
#cssmenu ol li.has-sub:focus-within > ul,
#cssmenu ol li.has-sub:focus-within > ol {
  display: block;
}
#cssmenu > ul > li.has-sub > a:focus-within,
#cssmenu > ul > li.has-sub:focus-within > a,
#cssmenu > ol > li.has-sub > a:focus-within,
#cssmenu > ol > li.has-sub:focus-within > a {
  background: #3f3f3f;
  border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > ol,
#cssmenu ol li > ul,
#cssmenu ol li > ol {
  display: none;
  width: auto;
  position: absolute;
  top: 38px;
  background: #3f3f3f;
  /* border-radius: 0 0 5px 5px; */
  z-index: 5020;
  padding: 10px 0;
  transition: all 0.5s ease;
  transition-duration: 0.5s;
}
#cssmenu ul li > ul,
#cssmenu ul li > ol {
  width: 250px;
}
#cssmenu ul ul ul,
#cssmenu ul ul ol,
#cssmenu ul ol ul,
#cssmenu ul ol ol {
  position: absolute;
}
#cssmenu ul ul li:hover > ul,
#cssmenu ul ul li:hover > ol,
#cssmenu ul ol li:hover > ul,
#cssmenu ul ol li:hover > ol {
  left: 100%;
  top: -10px;
  /* border-radius: 5px; */
}
#cssmenu ul li > ul li,
#cssmenu ul li > ol li,
#cssmenu ol li > ul li,
#cssmenu ol li > ol li {
  display: block;
  list-style: inside none;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu ul li > ul li a,
#cssmenu ul li > ol li a,
#cssmenu ol li > ul li a,
#cssmenu ol li > ol li a {
  outline: none;
  display: block;
  position: relative;
  font: 10pt Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 8px 20px;
}
#cssmenu,
#cssmenu ul ul > li:hover > a,
#cssmenu ul ul li a:hover {
  background: #bb0000;
  /*
  background: -moz-linear-gradient(top, #cc0000 0%, #990000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cc0000), color-stop(100%, #990000));
  background: -webkit-linear-gradient(top, #cc0000 0%, #990000 100%);
  background: -o-linear-gradient(top, #cc0000 0%, #990000 100%);
  background: -ms-linear-gradient(top, #cc0000 0%, #990000 100%);
  background: linear-gradient(top, #cc0000 0%, #990000 100%);
  */
}
#cssmenu > ul > li > a:hover {
  background: #bb0000;
  color: #ffffff;
}
#cssmenu ul ul a:hover,
#cssmenu ul ol a:hover {
  background: #bb0000;
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
  border-top: 5px solid #ffffff;
}

/* On print, do not show the menu */
@media print {
    #cssmenu {
        height: 0px;
        display: none;
    }
    #cssmenu > ul {
        display: none;
    }
    #cssmenu > ol {
        display: none;
    }
}