/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-italic - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-serif-v21-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-serif-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-serif-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-serif-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-serif-v21-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-serif-700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/noto-sans-v27-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v27-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v27-latin-italic.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* kalam-regular - latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kalam-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kalam-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kalam-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kalam-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kalam-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kalam-v16-latin-regular.svg#Kalam') format('svg'); /* Legacy iOS */
}

/* kalam-700 - latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kalam-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kalam-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kalam-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kalam-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kalam-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kalam-v16-latin-700.svg#Kalam') format('svg'); /* Legacy iOS */
}

html {
    zcolors = ['#05386B', '#F5E297', '#5CDB95', '#8EE4AF', '#EDF5E1'];
    background-image: linear-gradient(135deg, #EDF5E1 0%, #5CDB95 100%);
    background-repeat: no-repeat;
}

body {
    font-size: 1.0em;
    line-height: 1.6;
    font-family: "Noto Serif", serif;
    zfont-family: "Times New Roman", Times, serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Noto Sans",sans-serif;
    zfont-family: Arial, Helvetica, sans-serif;
    color: #05386B;
}

h1 {
    border-bottom: 3px solid gray;
}

h2 {
    border-bottom: 1px solid gray;
}

div.row {
  display: table;
  width: 100%;
  height: 10vh;
  border: 3px solid gray;
}

div#one {
  background-color: #05386B;
  display: table-cell;
}

div#two {
  background-color: #F5E297;
  display: table-cell;
}

div#three {
  background-color: #5CDB95;
  display: table-cell;
}

div#four {
  background-color: #8EE4AF;
  display: table-cell;
}

div#five {
  background-color: #EDF5E1;
  display: table-cell;
}

a {
    color: #05386B;
}

a:visited {
    color: #F5E297;
}

a:hover {
    background-color: #5CDB95;
}

figure {
    margin: 0;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    max-height: 80vh;
    image-orientation: from-image;
}

img.intext {
    display: inline;
    vertical-align: middle;
    max-height: 3em;
}

#pichome {
    border-radius: 10%;
}

a > img {
    display: inline-block;
}

#TOC + main {
    max-width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 1% 2%;
    margin: 1% 2%;
    background: #EDF5E1;
    overflow: auto;
}

.level1 {
    max-width: 100%;
    zfloat: left;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 1% 1%;
    margin: 1% 1%;
    background: #EDF5E1;
}

.level1:first-of-type {
    max-width: 100%;
}

.level1:nth-of-type(2) {
    max-width: 100%;
}

li::marker {
    color: #05386B;
}

#NAV {
    font-family: "Noto Sans",sans-serif;
}

#NAV > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #05386B;
}

#NAVLIST li {
    float: left;
}

#NAVLIST li a {
    display: inline-block;
    color: #EDF5E1;
    ztext-align: center;
    padding: 1em 1em;
    text-decoration: none;
}

#NAVLIST li a:hover {
    background-color: #8EE4AF;
}

#NAVLIST li .active {
    background-color: #8EE4AF;
}

#index {
    padding: 0.5em 0.5em !important;
    height: 2.6em;
}

#index img {
    height: 100%;
}

#TOC {
    position: static;
    width: 100%;
    max-width: 100%;
    padding: 1% 1%;
    margin: 1% 1%;
    top: 10px;
    overflow: auto;
    line-height: 30px;
    float: left;
}

#TOC > ul {
    padding-right: 10px;
}

#TOC ul {
    list-style: none;
    padding-left: 20px;
}

#TOC ul li a {
    text-decoration: none;
    color: black;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

blockquote:hover {
    box-shadow: 1px 1px 5px #999,
                2px 2px 6px #999,
                3px 3px 7px #999;
}

blockquote {
    margin-left: 10px;
    margin-right: 10px;
    padding: 0px 10px 0px 10px;
    position: relative;
    display: block;
    background-image: linear-gradient(135deg, #EDF5E1 0%, #8EE4AF 100%);
    background-repeat: no-repeat;
    border-radius: 10px;
    text-align: left;

    box-shadow: 1px 1px 2px #999,
                2px 2px 3px #999,
                3px 3px 4px #999;
    transition-duration: .5s;

    font-family: 'Kalam', cursive;
    background-color: #8EE4AF;
}

.attribution {
    text-align: right;
    font-family: "Noto Serif", serif;
    font-size: 0.8em;
}

@media only screen and (min-width: 768px) {
    /* For mobile phones: */
    body {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.3em;
    }

    header {
        max-width: 1400px;
    }

    #TOC {
        position: sticky;
        max-height: 100vh;
        max-width: 25%;
    }

    #TOC + main {
        max-width: 67%;
    }

    header + main {
        display: flex;
        flex-wrap: wrap;
    }

    main > .level1 {
        width: 100%;
    }

    .level1:first-of-type {
        max-width: 30%;
        width: 30%;
    }

    .level1:nth-of-type(2) {
        max-width: 62%;
    }

    blockquote::before {
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
        content: "\201C";
        font-size: 120px;
        color: #05386B;
        line-height: 1.0;
        font-family: "Noto Serif", serif;
    }

    blockquote {
        margin-left: 40px;
        margin-right: 40px;
        padding: 40px 30px 0px 70px;
    }
}