body
 {
   padding-left:       25px;
   padding-right:      25px;
   padding-top:        25px;
   padding-bottom:     25px;
   margin:             0px 0px 0px 0px;
 }
 h1, h2, h3, h4, h5, h6
 {
   font-family: Arial, sans-serif;
   font-weight: normal;
   color:       #0050B2;
   background:  transparent;
 }
 h1
 {
   text-align: center;
 }
 h2.center
 {
   text-align: center;
 }
 h3.center
 {
   text-align: center;
 }

div.content
{
   position:         relative;
   display:          flex;
   flex-direction:   column;
   background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#ECE4D3),color-stop(100%,#FDFDFC));
   background-image: -webkit-linear-gradient(#ECE4D3, #FDFDFC);
   background-image: -moz-linear-gradient(#ECE4D3, #FDFDFC);
   background-image: -o-linear-gradient(#ECE4D3, #FDFDFC);
   background-image: linear-gradient(#ECE4D3, #FDFDFC);
   -pie-background:  linear-gradient(#ece4d3, #fdfdfc);
   filter:           progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorstr='#fdfdfc',endColorstr='#ece4d3');
   -webkit-box-shadow: #CCC 0 0 8px;
   -moz-box-shadow:  #cccccc 0 0 8px;
   box-shadow:       #CCC 0 0 8px;
   border: 1px solid white;
   border-width:          1px;
   border-style:          solid;
   border-color:          #000000;
   -moz-border-radius:    15px;
   -webkit-border-radius: 15px;
   -o-border-radius:      15px;
   border-radius:         15px;
   padding-top:           .25in;
   padding-left:          5%;
   padding-right:         5%;
   padding-bottom:        .13in;
   font-size:             x-large;
   height:                90vh;
   min-width:             90%;
   min-height:            7in;
   overflow:              auto;
}

.title
{
   align-items:           center;
}

embed.icon
{
    width:        22px;
    position:     relative;
    top:          3px;
    margin-right: 3px;
}

div.canvasFigure
{
  width:        320px;
  margin-left:  auto;
  margin-right: auto;
  text-align:   center;
}

div.figure
{
  margin-left:  auto;
  margin-right: auto;
}

div.figure p
{
  font-style: italic;
  font-size:  smaller;
  text-align: center;
}

span.lowerLeftCoordinate
{
  float: left;
}

span.lowerRightCoordinate
{
  float: right;
}

div.centered img, div.centered object
{
  display:      block;
  margin-left:  auto;
  margin-right: auto;
  border-style: none;
  padding:      0px;
}

div.left object
{
  display:       block;
  float:         left;
  padding-right: 10px;
  border-style:  none groove none none;
}

div.leftBlock
{
    display:     inline-block;
    text-align:  left;
}


.inner
{
   float:         left;
   padding:       1% 1% 1% 1%;
   border-width : 1px;
   border-style:  solid;
   margin-right:  2%;
   display:       inline;
}

dl
{
    padding: 0.5em;
}
dt
{
    float: left;
    clear: left;
    width: 33%;
    text-align: right;
    font-weight: bold;
    color: green;
}

dt::after
{
    content: ":";
}

dd
{
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}

table 
{
  border-collapse: collapse;
  margin-top:      0.5rem;
  margin-bottom:   0.5rem;
}

th, td
{
  border:        1px solid #999;
  padding-left:  0.5rem;
  padding-right: 0.5rem;
}

td.numeric
{
  text-align:    right;
}

 .caption
 {
   font-style:   italic;
 }

figure figcaption, table caption
{
  font-size:  smaller;
  font-style: italic;
  text-align: center;
}

 p
 {
   color:     #000066;
 }
 .floatleft
 {
   float:         left;
   padding:       1% 1% 1% 1%;
   margin-right:  2%;
 }

 .floatRight
 {
   float:         right;
   padding:       1% 1% 1% 1%;
   margin-left:   2%;
 }

 .bottom
 {
     margin-top:      auto;
 }

figure img
{
  margin-right: auto;
  margin-left:  auto;
}

figure
{
  text-align: center;
}

.navigation
{
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    font-size:       medium;
    margin-top:      auto;
    padding-top:     25px;
    padding-bottom:  25px;
    padding-right:   0;
    padding-left:    0;
    align-self:      flex-end;
    width:           100%;
}

.navigation a
{
   display:               block;
   width:                 5em;
   color:                 #FFF;
   background-color:      #036;
   padding:               .2em 0;
   text-align:            center;
   text-decoration:       none;
   border-radius:         15px;
   -moz-border-radius:    15px;
   -webkit-border-radius: 15px;
}

.navigation a:hover
{
   color:            #FFF;
   background-color: #69C;
}

svg
{
   margin:           0px 0px -4px 0px;
   padding:          0px 0px 0px 0px;
}

.example
{
   margin-left:       2%;
}

div.codeExample
{
    max-height:        60vh;
    overflow:          auto;
    background-color:  transparent;
}

div.codeFragment
{
   max-height:        4.0in;
   margin-bottom:     55px;
   overflow:          auto;
   background-color:  transparent;
}

.codeIllustration
{
   position:           absolute;
   right:              10%;
   bottom:             25%;
   z-index:            5;
   opacity:            0.3;
   transition:         opacity 0.5s linear;
   -webkit-transition: opacity 0.5s linear;
   -moz-transition:    opacity 0.5s linear;
   -ms-transition:     opacity 0.5s linear;
   -o-transition:      opacity 0.5s linear;
}
.codeIllustration:hover
{
   opacity:           1.0;
}

pre.prettyprint
{
    border: none;
}

.changed
{
   border-left-style: ridge;
}

td
{
   font-size:         x-large;
}

/* Source code styles */
.ST0
{
   color:            #969696;
   font-family:      Monospaced;
   font-weight:      bold;
}

.comment
{
   color:            #969696
}

.line-number
{
   background-color: #e9e8e2
}

.keyword-directive
{
   color:            #0000e6
}

blockquote
{
    color:     #000066;
}

cite, blockquote footer
{
    padding-top: .5em;
    display:     block;
    text-align:  right;
}

#slider
{
    margin:  0;
    podding: 0;
    width:   300px;
}