vfield.css

section.examples
{
  overflow:      auto;
  width:         100%;
}

section.examples div.example
{
  width:         50%;
  padding-left:  5%;
  padding-right: 5%;
  margin:        0%;
}

div.steppedExample div.step
{
  width:         100%;
  overflow:      auto;
}

div.step div.explanation
{
  overflow:      hidden;
}

table.explanation
{
  margin-right:     auto;
  margin-left:      auto;
  font-family:      verdana, arial, sans-serif;
  color:            #000066;
  border-width:     1px;
  border-color:     #666666;
  border-collapse:  collapse;
}

table.explanation th
{
  border-width:     1px;
  padding:          8px;
  border-style:     solid;
  border-color:     #666666;
  background-color: #dedede;
}

table.explanation td
{
  text-align:       left;
  border-width:     1px;
  padding:          8px;
  border-style:     solid;
  border-color:     #666666;
}

figure canvas
{
  max-width: 100%;
}

/*
@media (min-width: 1150px)
{
  div.step pre.prettyprint
  {
    float:         left;
    margin-right:  5%;
    margin-top:    0;
  }
}
*/

/* Calls out the association between the description and the code. */
/*div.step:hover
{
  filter:         drop-shadow(4px 4px 2px #bbb);
  -webkit-filter: drop-shadow(4px 4px 2px #bbb);
  -moz-filter:    drop-shadow(4px 4px 2px #bbb);
  -o-filter:      drop-shadow(4px 4px 2px #bbb);
  -ms-filter:     drop-shadow(4px 4px 2px #bbb);
}*/

/* 
 * A Kludge allowing me to put the content on a new line.
 *  Turn off border for Google prettyprint
 */
pre.prettyprint
{
  margin:        -1.0em auto;
  border:        none !important;
}

@media (max-width: 400px)
{
  figure
  {
    margin-left:  10px;
    margin-right: 10px;
  }

  .optional
  {
    display: none;
  }

  pre.prettyprint
  {
    overflow-x:    scroll;
  }
}