custom.css

/* CSS stylesheet for fuzzingbook */
/* This is applied 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 */

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

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;
    }
}


/* 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, h6 {
	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 {
        { font-size: 18px!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;
}

.container {
    background-color: #F8F8F8!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;
}

h4, h5 {
    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; */
}

/* 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;
}

/* Solutions */
.solution_link {
	/* font-size: 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;
}

/* 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: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;
}