/* 
 reference.css

 Copyright 2011-2021 Morgan McGuire 
 All rights reserved

 morgan@casual-effects.com

 For the syntax of styles targetted at specific devices, see
 http://mislav.uniqpath.com/2010/04/targeted-css/ 
*/


/** Define a font for use in the input boxes*/
/*
@font-face { 
    font-family: 'input';
    src: url('Helvetica-Neue-Ultra-Light-local.otf'); 
}
*/

/* Make all browsers follow the same rules for default font scaling.  Setting this to 'none' on
   desktop causes weird problems with font sizes being ignored.  (http://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten) */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}


body {
    top:           0px;
    left:          0px;
    bottom:        0px;
    right:         0px;
    display:       block;
    padding:       0px 0px 0px 0px; 
    margin:        0px 0px 0px 0px;

    /* Turning on optimizeLegibility doesn't seem to increase quality a
       lot, but makes layout 2x slower */
    /* text-rendering: optimizeLegibility;*/

    font-family:   Palatino, 'Times New Roman', Times, serif;
    font-size:     100%;
    color:         #505050;

    counter-reset: section;
    background:    #FFF;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


ul {
   padding-left: 2em;
}

ul li, ol li {
   padding-bottom: 0.6em;
}

p {
  /* Bring closer to section titles */
  padding-top: 0px;
  margin-top: 0.1em;
}

/* equivalent to LaTex section */
h2:before {
   counter-increment: section;       
/* Uncomment the following line to show section numbers */
/*   content: counter(section) ". "; */
}

/* Section title */
h2 {
   font-family:    Helvetica, sans-serif;
   font-size:      21px;
   height:         1em;
   font-weight:    bold;
   padding-bottom: 0.35em;
   margin-top:     1.7em; 
   color:          #000;
   margin-left:    0px;
   border-bottom:  solid 3px #222;
   margin-bottom:  0.5em;
   vertical-align: baseline;
   clear: both;
}

.dliEdition h2 {
    font-family: DINPro, Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 25px;
    border-bottom: none;
}

/* Separated from the h2 to make it easy to add a shadow*/
h7:after {
  content: '';
  position: relative;
  display: block;
  left: 0px;
  right: 5px;
  top: -1px;
  border-bottom:  solid 3px #444;
  height: 0px;
  /*box-shadow:     1px 3px 6px rgba(0,0,0,0.12); */
}

h3 {
   font-family:    Helvetica, sans-serif;
   font-weight:    bold;
   font-size:      18px;
   margin-top:     1.7em;
   margin-bottom:  0.1em;
   padding-bottom: 0em;
   color:          #000;
   clear:          both;
}

.dliEdition h3 {
    font-family: DINPro, Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 21px;
}


/*
h2, h3 {
   text-shadow: rgba(0,0,0,0.12) 1px 3px 6px;

}
*/


div.inlineExercise {
   border: 1px solid #666;
   background: #DDD;
   padding: 10px; 
   margin-bottom: 15px; 
   margin-top: 10px;
}

.caption {
   margin-top:   0em;
   margin-left:  auto;
   margin-right: auto;
   text-align:   left;
   font-style:   italic;
   display: inline-block;
   white-space: normal;
}


/* The actual page showing content.  This is inside the scroll object. */
#page {
    /* This should size to its children (using inline-block).
       We will artificially limit its size in javascript later.*/
    /*    display: inline-block;*/

    padding: 14px 20px 20px 20px; 
    background-color: #FFF; 
    
    margin-bottom: 0px; 
}

/* The loading screen for the pageFrame */
#pageLoadingScreen {
    /* Intentionally no background: let the actual page show through in the background. */
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
    height: 100%; 
    z-index: 9; 
    position: absolute; 
    display: block; 
    top: 0px;
    left: 0px; 
    right: 0px; 
}

span.keywords {
   display: none; 
   visibility: hidden;
   width: 1px; 
   height: 1px;
}

#pageLoadingScreen > #loadingImage {
    position:    absolute; 

    top:         50%; 
    left:        50%;

    /* create negative margins of 1/2 the object width to get centering on
       the page from an absolute positioned object */
    margin-left: -32px; 
    margin-top:  -32px; 

}

hr {
   width:             100%;
   border:            0px;
   border-radius:     2px;
   color:             #CCC;
   background-color:  #CCC;
   height:            2px;
   margin-top:        1.5em;
   margin-bottom:     1.5em;
}

div.titlebar {
   position:          absolute;
   top:               0px; 
   left:              0px;
   width:             100%;
   height:            50px;

   background-color:  #fff;
   padding:           0;
   color:             #050505;
   font-family:       Helvetica, sans-serif;
   text-align:        center;
   border-bottom:     1px solid #28374a;
   box-shadow:        0px -2px 12px 4px rgba(0,0,0,0.2);
   z-index:           10;
}

.dliEdition div.titlebar {
   box-shadow:        0px -2px 12px 4px rgba(0,0,0,0.35);
}


#contentsButton {
   position:          absolute; 
   display:           none; /* changed to block in app.js */
   top:               0px; 
   left:              0px;
   /* Made wide target for easy click */
   width:             70px;
   height:            51px;
   cursor:            pointer;
   background-image:  url("toolbar/index.png");
   background-size:   20px 20px;
   background-repeat: no-repeat;
   background-position: center center;
   /* border:            solid 1px; */
}

.dliEdition #contentsButton {
   background-image: url('toolbar/index-dli.png');
   background-size:   20px 20px;
   background-repeat: no-repeat;
   background-position: center center;
}

/*#contentsButton:active, contentsButtonActive {
   background-color:  rgba(10,10,0,0.5);
}
*/

/* The equation/figure/table label at the top of the page, above the page title */
.titleLabel {
   position:          relative;
   top:               4px;
   text-align:        center;
   color:             #333;
   font-size:         11px;
   font-weight:       100;
   line-height:       11px;
   letter-spacing:   -0.07em;
}

.dliEdition .titleLabel {
    visibility: hidden;
    display: none;
}

body.iOSEdition .titleLabel {
    /* Move out of the way of the clock on iOS 7 */
    margin-left: 45%;
}

/* Page title at the top of the screen */
.title {
   position:          absolute;
   text-align:        center;
   left:              35px;
   right:             30px;
   cursor:            default;
   /* border: solid 1px #000;  */

   /* text-shadow:       0px -1px 0px rgba(0,0,0,0.5); */
   line-height:       40px;
   font-size:         22px;

   font-weight:       500;
   letter-spacing:    0.0em;
   top:               10px;
   height:            40px;
   overflow-y:        hidden;
}

.dliEdition .title {
    top: 5px;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 1px;
}


#dliBranding {
    font-family: DINPro, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: #000000;
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 15px;
    z-index: 100;
    color: #76b900;
    border-top: 2px solid;
    padding-top: 2px;
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Shrink title text on narrow screens */

@media only screen and (max-width: 320px) {
   .title {
       font-weight:       normal;
       letter-spacing:   -0.035em;
   }
}


#theGraphicsCodexTitle {
   position:   absolute; 
   width:      100%; 
   text-align: center; 
   top:        5px;
}

.dliEdition #mainMenuTitlebar, .dliEdition #searchBar {
    background: #000;
}

#mainMenuTitleBar > .title {
   left:              0px;
   right:             0px;
}


div.toolbar {
   display:             block;
   position:            absolute;
   width:               100%;
   /* Start at zero height as "hidden". The true height is 45px */
   /*   height:              0px;*/
   height:              45px;
   border-top:          1px solid #d6d5d7; 
   bottom:              0px;
   left:                0px;

   background:          url("toolbar/toolbar-background.png") repeat-x;
   background-color:    #6c83a2;

   z-index:             8;
   text-align:          center;
   overflow:            hidden;

   box-shadow:          0px 0px 6px 1px rgba(0,0,0,0.1);
}

body.dliEdition div.toolbar {
    bottom: 16px;
}

/* Transitions for iPad3+ and desktop */
/*
@media only screen and (min-device-width: 768px) and (-webkit-device-pixel-ratio: 2),
       only screen and (min-device-width: 1200px) {
div.toolbar {
   -moz-transition-property: height;
   -moz-transition-delay: 0s; 
   -moz-transition-duration: 0.4s; 

   -webkit-transition-property: height; 
   -webkit-transition-delay:    0.0s; 
   -webkit-transition-duration: 0.4s; 
}
}
*/

/** Base class for buttons */
.button {
   font-size:           0.7em;
   font-family:         Helvetica, Arial, sans-serif;
   text-align:          center;
   color:               #3698f9;
   font-weight:         100;
   display:             inline-block;
   cursor:              pointer;
}

body.dliEdition .button {
  color: #76b900;
}


/* Toolbar buttons ********************************/
div.toolbarButton {
   width:               15%; /* 16% made them disappear on portrait iPhone */
   height:              45px;
   vertical-align:      bottom;
   text-align:          center;
   /* text-shadow:         0px -1px 1px rgba(0,0,0,.8); */
   line-height:         1.3;
   padding-top:         4px;
   /* We don't set the cursor property here because it must be overriden for disabled buttons */
}


/* Show when button is pressed.  The pseudo-selector doesn't work well on iOS--it gets stuck. */
/* .toolbarButton:active {
    background:         rgba(10,10,0,0.5);
}*/


div.mainToolbarButton {
   width:               24%;
}

/* Hyperlinks in regular text */
a {
  text-decoration:      none;
  color: #3086dc;
}

body.dliEdition a {
  color: #76b900;
}

/* External links */
a[href^="http://"], a[href^="https://"]{
  padding-right: 14px;
  background: url(toolbar/link-external.png) no-repeat center right;
  background-size: 12px;
}

body.dliEdition a[href^="http://"], body.dliEdition  a[href^="https://"]{
  background: url(toolbar/link-external-dli.png) no-repeat center right;
  background-size: 12px;
}

a[href$=".pdf"]{
  padding-right: 14px;
  background: url(toolbar/link-pdf.png) no-repeat center right;
  background-size: 12px;
}

a[href$="=pdf"]{
  padding-right: 14px;
  background: url(toolbar/link-pdf.png) no-repeat center right;
  background-size: 12px;
}

/* Mail links */
a[href^="mailto:"] {
  padding-right: 14px;
  background: url(toolbar/link-mail.png) no-repeat center right;
  background-size: 12px;
}

body.dliEdition a[href^="mailto:"] {
  background: url(toolbar/link-mail-dli.png) no-repeat center right;
  background-size: 12px;
}

/* Pressed link */
a:active {
  color: #FFF;
  background: #1154a4;
}

/*********************** coderef ********************************/
span.coderef {
  font-family:          sans-serif;
  font-size:            0.8em;
  border-style:         solid; 
  border-radius:        4px; 
  border-width:         1px;
  padding-right:        3px;
  letter-spacing:       -0.07em;
}

.coderef > a {
  text-decoration:      none;
  color:                inherit;
  /* Remove the external link icon */
  background:           none;

  /* Make the click region larger than the label itself */
  padding:          12px;
  margin:          -12px;
  border-radius:    10px;
}

/* Any API name */
.apiName {
  margin-right:         3px;
  padding-right:        3px;
  padding-left:         3px;
  color:                #FFF;
  letter-spacing:       -0.12em;
}

.G3D {
  border-color:         #FC7;
  color:                #D92;
}

.G3D .apiName {
  background-color:     #FC7;
  color:                #FFF;
}

.cpp {
  border-color:         #333;
  color:                #333;
}

.cpp .apiName {
  background-color:     #333;
  color:                #FFF;
}

.Java {
  border-color:         #e54d43;
  color:                #e54d43;
}

.Java .apiName {
  background-color:     #e54d43;
  color:                #FFF;
}

.JavaScript {
  border-color:         #e54d43;
  color:                #e54d43;
}

.JavaScript .apiName {
  background-color:     #e54d43;
  color:                #FFF;
}

.codeheart {
  border-color:         #fd764a;
  color:                #fd764a;
}

.codeheart .apiName {
  background-color:     #fd764a;
  color:                #FFF;
}

.GLSL, .OpenGL {
  border-color:         #ADE;
  color:                #6BD;
}

.GLSL .apiName, .OpenGL .apiName {
  background-color:     #ADE;
  color:                #FFF;
}


.Mitsuba {
  border-color:         #AED;
  color:                #6DA;
}

.Mitsuba .apiName {
  background-color:     #AEC;
  color:                #FFF;
}

.Unity {
  border-color:         #BBB;
  color:                #999;
}

.Unity .apiName {
  background-color:     #AAA;
  color:                #EEE;
}


.HLSL, .DirectX {
  border-color:         #D7D7D7;
  color:                #AAA;
}

.HLSL .apiName,  .DirectX .apiName {
  background-color:     #D7D7D7;
  color:                #FFF;
}


.LWJGL {
  border-color:         #DD8;
  color:                #AA5;
}

.LWJGL .apiName {
  background-color:     #DD8;
  color:                #FFF;
}


.PBRT {
  border-color:         #FFEE66;
  color:                #BB0;
}

.PBRT .apiName {
  background-color:     #FFEE66;
  color:                #BB0;
}


/***************************************/

.toolbarButton a {
   text-decoration:     none;
   color:               #FFF;
   text-shadow:         0 -1px 0 rgba(0,0,0,0.5);
}

/**************************************************/

/* A float that layout has embedded in the middle of the page */
.floatCenter {
  text-align: center; 
  margin-left: auto; 
  margin-right: auto;
  padding-top:  1em;
  padding-bottom:  1em;

  /* Don't let center floats be wider than the page */
  max-width: 100%;

  /* This makes the float auto-size */
  display: inline-block;
}

/* A float that layout has put on the right */
.floatRight {
  float: right;
  margin-left: 2em;
}

/**************************************************/

/* Put this around the frame to make it the right size */
div.pane {
   position:           absolute; 
   z-index:            2;
   top:                50px; 
   bottom:             0px;
   left:               0%;
   width:              100%;
   background:         #fff;
   overflow:           hidden;
}


div#bibliographyPane, div#indexPane {
   /* Bibliography goes all of the way to the bottom of the app */
   bottom: 0px;
}

#pageFrame {
   position:   absolute; 
   border:     none;
   left:       0px;
   top:        0px;
   width:      100%;
   height:     100%;
   background: #eee;
   z-index:    1;
   overflow: auto;
}

/* A scroll pane's outer container */
.scrollViewport {
  position:     absolute; 
  z-index:      1;

  top:          0px;
  left:         0px;
  right:        0px;
  bottom:       0px;
  width:        100%;
  background:   #fff;
  display:      block;

  -webkit-overflow-scrolling: touch;
  overflow:     auto; 
}


/* The single pane immediately inside the scroll control.  Its
   children may stick out of it. */ 
.scrollContent {
   position:           absolute;
   top:                0px;
   left:               0px;

   -webkit-touch-callout:none;
   -webkit-tap-highlight-color:rgba(0,0,0,0);

   display:            inline-block;

   padding:            0px 0px 0px 0px;

   /* Eliminate the text select cursor */
   cursor:             default;

   /* Do not specify width; it confuses firefox */

   /* Must match marginFraction in app.js changeFontSize() */
   margin-left:        5%;
   margin-right:       5%; 
}



/* For displaying an equation by itself. */
.paddedEquation {
   text-align:         center;
   transform:          scale(1.1);
   -moz-transform:     scale(1.1);
   -webkit-transform:  scale(1.1);
   -o-transform:       scale(1.1);
   -ms-transform:      scale(1.1);
   line-height:        250%;
   padding-top:        10px;
   padding-bottom:     15px;
}

table tr {
    text-align: left;
}

table.dataTable {
    margin: 0px;
    border: none; 
    display: table; 
    border-collapse: collapse;
    margin-right: 20px;
    line-height:  1.1em;
}

table.dataTable tr:nth-child(2n) {
    background: #F5F5F5;
}

tr {
    vertical-align: baseline;
}

td.dataTableCell {
    display: table-cell;
    padding-left:   5px; /* make table cells relatively flush */ 
    padding-right: 15px; 
    padding-bottom: 9px;
    padding-top:    10px;
    margin-right:  15px;
    margin-bottom: 10px;
}

/* Table header */
tr.header { 
  color:         #000;
  font-weight:   bold;
  border-bottom: solid 1px #000;
  background:    #FFF;
}

/* Remove the bottom padding on header rows */
tr.header td {
  padding-bottom: 2px;
  margin-bottom:  0px;
}

/**************************************************/

/* Format citations in small, condensed font */
.cite {
   font-size:        11px;
   font-family:      Helvetica, Verdana, Arial, sans-serif;
   letter-spacing:   -0.05em;
   vertical-align:   0.1em;
   color:            #555;
}

.cite a {
   text-decoration:  none;
   color:            inherit;
}



/* Format references condensed with visible links */
.ref {
   cursor:           pointer;
   
   /* Make the click region larger than the label itself */
   padding:          12px;
   margin:          -12px;
   border-radius:    10px;
}

.refBody, .cite a, a.label {
   border-radius:    4px;

/*   padding-left:     0.3em;*/
/*   padding-right:    0.175em; */
   padding-top:      2px;
   padding-bottom:   2px;
   font-weight:      normal;
   text-decoration:  none;
   color:            #3086dc;
}

body.dliEdition .refBody, body.dliEdition .cite a, body.dliEdition a.label {
   color: #76b900;
}

/* Used for links to labels */
.refSmall {
   font-size:        13px;
   letter-spacing:  -0.1em;
}


/* Highlight links when clicked */
.ref:active, .coderef > a:active, .refActive {
    background: -webkit-linear-gradient(top, #058cf5, #015fe6);
}

.indexActive {
    background: -webkit-linear-gradient(top, #058cf5, #015fe6);
}

#pageScrollViewport {
    /** Put the background behind the pageScrollContent to avoid it jumping under resize roundoff */
    background: -webkit-linear-gradient(left, #F4F4F4, #FFFFFF 4%, #FFFFFF 96%, #F4F4F4);
}

#pageScrollContent {
 /* position:relative; display:inline-block; */

   /* Increase line spacing to look more like a textbook */
   line-height:        170%;

   font-size:          16px;
   font-family:        Palatino, 'Times New Roman', Times, serif;
   text-align:         justify;
}


div.mainToolBackground {
   background:        url("toolbar/main-toolbar-background.jpg") repeat-x;
}


/* Page-curl shadow.  Only use with relative or absolute positioning */
.curlShadow {
    border: 1px solid #efefef;
    background: #fff;
    box-shadow: 
    0 2px 4px 1px rgba(0, 0, 0, 0.15), /* all-around shadow */
    0 70px 15px -55px rgba(255, 255, 255, 0.45), /* erase center shadows */
    0 60px 25px -40px rgba(255, 255, 255, 0.45), /* erase center shadows */
    0 9px 12px -2px rgba(0, 0, 0, 0.35); /* corner shadows */
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right:3px;
}

/* **************************************** */

.bibliography {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.bibitem {
  line-height: 130%;
  padding: 4px; 
}

.bibitemBody {
   padding-left: 25px; 
   padding-top: 0px; 
   margin-top: 0px; 
   top: 0px; 
   padding-bottom: 8px;
   text-align: left; 
   border-bottom: solid 1px #CCC; 
}

.bibitemBody a {
    word-break: break-all;
}

/* **************************************** */

/* Much faster than auto layout because it only considers the first row's columns*/
.fixedTableLayout {
    table-layout: fixed;
}


/* **************************************** */

/* MathJax note colors.  MathJax 1.0 does not support \definecolor, so
   I use CSS and \class instead of \color to abstract them. 

   Do not allow MJUNITSCOLOR to override note colors.
*/
.MJUNITSCOLOR { color: #aa9988; }

/* Prevent units from overriding note color when inside it */
.MJNOTECOLOR,  .MJNOTECOLOR  .MJUNITSCOLOR { color: #bf6b3b !important; }
.MJNOTECOLOR2, .MJNOTECOLOR2 .MJUNITSCOLOR { color: #a1ca48 !important; }
.MJNOTECOLOR3, .MJNOTECOLOR3 .MJUNITSCOLOR { color: #48a1ca !important; }
.MJNOTECOLOR4, .MJNOTECOLOR4 .MJUNITSCOLOR { color: #ca48a1 !important; }


/* **************************************** */

div.chapterIcon {
    width: 125px; 
    height: 125px; 
    background-size: contain;
    border: solid 1px #999; 
    border-radius: 15px;
    box-shadow: #999 1px 4px 5px -2px;
}

div.chapterTitle {
    font-family: 'Myriad Pro', 'Helvetica', 'Arial'; 
    font-size: 160%; font-weight: bold;
    padding-bottom: 5px;
}

.dliEdition div.chapterTitle {
    color: #76b900;
}

div.chapterSections {
  line-height: 100%; 
  font-size: 70%; 
  text-align: justify; 
  font-style: italic; 
  color: #555;
}

div.diagram {
    margin-bottom: 10px;
}

.diagram .copyright {
    -webkit-transform: rotate(-90deg) scale(0.6); 
    -moz-transform: rotate(-90deg) scale(0.6); 
    -o-transform: rotate(-90deg) scale(0.6); 
    -ms-transform: rotate(-90deg) scale(0.6); 
    transform: rotate(-90deg) scale(0.6); 

    display: inline-block; 
    position: relative; 
    color: #999; 
    width: 1em; 
    vertical-align:text-top; 
    text-align: left; 
    line-height: 1.1em; 
    margin-left: 0.5em;
}


/* Drop cap */
p.intro:first-child:first-letter, .dropcap {  
    float: left; color: #9b4911; 
    font-size: 95px; line-height: 60px; 
    padding-top: 8px; padding-right: 4px;
    padding-left: 0px; font-family: Georgia, "Times New Roman", Palatino, serif;
}

.dliEdition p.intro:first-child:first-letter, .dliEdition .dropcap {
    color: #76b900;
}