edu-python.css

/*

Online Python Tutor
Copyright (C) 2010-2011 Philip J. Guo (philip@pgbovine.net)
https://github.com/pgbovine/OnlinePythonTutor/

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

*/


/*
Color scheme ideas: 

Current scheme: pastel blue and yellow with a hint of red:
  http://colorschemedesigner.com/#3N32mmmuew0w0

Primary Color:
  3D58A2    41507A    142B69    6F89D1    899CD1
Secondary Color A:
  EBF048    B1B456    989C17    F4F776    F5F798
Secondary Color B:
  F15149    B55B56    9D1E18    F87D76    F89D99


Alternates:

pastel green, yellow, and purple:
  http://colorschemedesigner.com/#2P32PbX--w0w0

  Primary Color:
    A0FFA0    8ABF8A    34A634    B8FFB8    CBFFCB
  Secondary Color A:
    FFEFA0    BFB68A    A69234    FFF3B8    FFF6CB
  Secondary Color B:
    BFABFF    9B90BF    5237A6    CFC0FF    DCD1FF


pastel blue and yellow:
  http://colorschemedesigner.com/#0W21TjruJw0w0

Primary Color:
  F5C260    B89B64    9F741F    FAD388    FADEA6
Complementary Color:
  4A67A4    49597B    18326A    7C97D1    93A7D1


*/


body {
  background-color: white;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
}

a {
  color: #3D58A2;
}

a:visited {
  color: #3D58A2;
}

a:hover {
  color: #3D58A2;
}

span {
  padding: 0px;
}

.codeInputPane {
  font-size: 12pt;
  font-family: Andale mono, monospace;
  /*font-weight: bold;*/
  padding: 8px;
  margin-top: 5px;
}

#pyInputPane {
  text-align: center;
  margin-bottom: 20px;
}

td#stack_td,
td#heap_td {
  vertical-align:top;
  font-size: 12pt;
}

table#pyOutputPane {
  padding: 15px;
}

#dataViz {
  margin-left: 30px;
}

table.frameDataViz {
  border-spacing: 0px;
  font-size: 12pt;
  margin-top: 5px;
  margin-left: 15px;
  background-color: #dddddd;
  padding: 5px;
}

table.frameDataViz td.varname {
  text-align: right;
  padding: 5px;
  padding-right: 8px;
  border-right: 1px dashed #888888;
}

table.frameDataViz td.val {
  padding-left: 8px;
  padding-right: 5px;

  padding-top: 8px;
  padding-bottom: 8px;
}

div#pyCodeOutputDiv {
  max-width: 550px;
  max-height: 620px;
  overflow: auto;
  /*margin-bottom: 4px;*/
}

table#pyCodeOutput {
  font-family: Andale mono, monospace;
  font-size:12pt;
  line-height:1.1em;
  border-spacing: 0px;
  border-top: 1px solid #999999;
  padding-top: 3px;
  border-bottom: 1px solid #999999;
  margin-top: 6px;
}

/* don't wrap lines within code output ... FORCE scrollbars to appear */
table#pyCodeOutput td {
  white-space: nowrap;
}

table#pyCodeOutput .lineNo {
  background-color:#FFFFFF;
  color:#AAAAAA;
  margin:0;
  padding:0.2em;
  padding-right:0.5em;
  text-align:right;
  width:2.1em;
}

table#pyCodeOutput .cod {
  /*font-weight: bold;*/
  margin-left: 3px;
  padding-left: 7px;
  text-align: left; /* necessary or else doesn't work properly in IE */
}

div#editCodeLinkDiv {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 4px;
}

#editCodeLinkOnError {
  color: #142B69;
}


#errorOutput {
  background-color: #F87D76;
  font-size: 12pt;
  padding: 2px;
  line-height: 1.5em;
  margin-bottom: 4px;
}

button.bigBtn {
  font-size: 14pt;
  padding: 3px;
}

button.medBtn {
  font-size: 12pt;
  padding: 3px;
}


/* VCR control buttons for stepping through execution */

#vcrControls {
  margin-top: 10px;
  margin-bottom: 15px;
}

#vcrControls button {
  margin-left: 5px;
  margin-right: 5px;
}

#pyStdout {
  border: 1px solid #999999;
  font-size: 12pt;
  padding: 4px;
  font-family: Andale mono, monospace;
}


.vizFrame {
  margin-bottom: 20px;
  padding-left: 8px;
  border-left: 2px solid #cccccc;
}


/* Python data value rendering */

.nullObj {
  color: #555555;
}

.numberObj {
}

.boolObj {
}

.stringObj {
  /* don't add a color since strings need to be rendered against various backgrounds */
  font-family: Andale mono, monospace;
}

.keyObj {
}

.customObj {
  font-family: Andale mono, monospace;
  /*font-style: italic;*/
  font-size: 10pt;
}


.retval,
.returnWarning {
  font-size: 9pt;
}

.returnWarning {
  padding-top: 10px;
  color: #9d1e18;
}


table.listTbl {
  border: 0px solid black;
  background-color: #F5F798;
  border-spacing: 0px;
}

table.tupleTbl {
  background-color: #dddddd; /* must match .frameDataViz background-color */
  border-spacing: 0px;
  color: black;

  border-bottom: 1px solid #555555; /* must match td.tupleHeader border */
  border-top: 1px solid #555555; /* must match td.tupleHeader border */
  border-right: 1px solid #555555; /* must match td.tupleHeader border */
}

table.listTbl td.listHeader,
table.tupleTbl td.tupleHeader {
  padding-left: 5px;
  padding-top: 3px;
  font-size: 8pt;
  color: #666666;
  text-align: left;
  border-left: 1px solid #555555;
}

table.listTbl td.listElt {
  border-bottom: 1px solid #555555; /* must match td.listHeader border */
  border-left: 1px solid #555555; /* must match td.listHeader border */
}

table.tupleTbl td.tupleElt {
  border-left: 1px solid #555555; /* must match td.tupleHeader border */
}

table.listTbl td.listElt,
table.tupleTbl td.tupleElt {
  padding-top: 0px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: bottom;
}

table.setTbl {
  border: 1px solid black;
  /*background-color: #F4F776;*/ /*slightly brighter than #F5F798 */
  background-color: #F5F798;
  border-spacing: 0px;
  text-align: center;
}

table.setTbl td.setElt {
  padding: 8px;
}


table.dictTbl {
  border-collapse: collapse;
  border-spacing: 2px;
}

table.dictTbl tr.dictEntry {
  border: 1px #111111 solid;
}

table.dictTbl td.dictKey {
  background-color: #41507A;
}

table.dictTbl,
table.dictTbl td.dictVal {
  background-color: #899CD1;
}


table.classTbl {
  background-color: #dddddd;
  border-collapse: collapse;
  border-spacing: 2px;
}

table.classTbl tr.classEntry {
  border: 1px #777777 solid;
}

table.classTbl td.classKey {
  background-color: #222222;
}

table.classTbl td.classVal {
  background-color: #ffffff;
}


table.instTbl {
  border-collapse: collapse;
  border-spacing: 2px;
}

table.instTbl tr.instEntry {
  border: 1px #111111 solid;
}

table.instTbl td.instKey {
  background-color: #41507A;
  color: #ffffff;
}

table.instTbl,
table.instTbl td.instVal {
  background-color: #FFFFDD; /* must match color of table.instTbl */
}

table.dictTbl td.dictKey,
table.classTbl td.classKey,
table.instTbl td.instKey {
  color: #dddddd;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 8px;
  text-align: right;
  vertical-align: center;
}

table.dictTbl td.dictVal,
table.classTbl td.classVal,
table.instTbl td.instVal {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 8px;
  vertical-align: center;
}




.typeLabel {
  font-size: 8pt;
  color: #222222;
  margin-bottom: 1px;
}

td.dictKey .typeLabel {
  color: #eeeeee;
}

.circRefLabel {
  font-size: 10pt;
  color: #222222;
}

#footer {
  text-align: center;
  color: #666666;
  font-size: 9pt;
  max-width: 700px;
  border-top: 1px solid #bbbbbb;
  padding-top: 5px;
  margin-top: 5px;
}


/* new stuff added for Online Python Tutor "2.0" release */

div#stack {
  float: left;
  padding-left: 10px;
  padding-right: 30px;
  border-right: 1px dashed #bbbbbb;
}

div.stackFrame {
  background-color: #ffffff;
  margin-bottom: 15px;
  padding: 2px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  font-size: 11pt;
  border-left: 1px solid #999999;
}

/* apply to the currently selected stack frame (e.g., on mouse hover) */
div.selectedStackFrame {
  background-color: #dddddd;
}

div.topStackFrame {
  border-left: 1px solid #F15149;
}

div.stackFrameHeader {
  font-family: Andale mono, monospace;
  font-size: 10pt;
  margin-top: 4px;
  margin-bottom: 3px;
}

div.inactiveStackFrameHeader {
  /* simulate a hyperlink */
  text-decoration: underline;
  color: #3D58A2;
  cursor: pointer;
}

td.stackFrameVar {
  text-align: right;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
}

td.stackFrameValue {
  text-align: left;
  border-bottom: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;

  padding-top: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
}

.stackFrameVarTable tr {

}

.stackFrameVarTable {
  text-align: right;
  padding-top: 3px;

  /* right-align the table */
  margin-left: auto;
  margin-right: 0px;
}

div#heap {
  float: left;
  padding-left: 30px;
}

div.heapObject {
  margin-bottom: 15px;
  padding-left: 7px; /* leave some room for connector endpoints */
}

div#stackHeader {
  margin-bottom: 15px;
  text-align: right;
}

div#heapHeader {
  margin-top: 2px;
  margin-bottom: 13px;
}

div#stackHeader,
div#heapHeader {
  color: #333333;
  font-size: 10pt;
}


/* styles for Online Python Tutor questions site */

#questionsHeaderPane {
  text-align: left;
  margin-bottom: 15px;
  width: 650px;
  border-bottom: 1px solid #bbbbbb;
}

.questionsHeaderStmt {
  margin-bottom: 5px;
}

.questionsHeaderTitle {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 12pt;
}

#submittedCodeRO {
  font-size: 10pt;
  font-family: Andale mono, monospace;
  padding: 4px;
  margin-top: 5px;
}

table#gradeMatrix {
  margin-top: 12px;
}

table#gradeMatrix thead {
  font-weight: bold;
  border: solid;
}

table#gradeMatrix thead td.statusCell {
  padding-left: 18px; /* to line up with smiley faces */
}

table#gradeMatrix td.testInputCell,
table#gradeMatrix td.testOutputCell {
  padding-right: 25px;
  padding-bottom: 10px;
  vertical-align: middle;
}

table#gradeMatrix tbody td.statusCell,
table#gradeMatrix tbody td.expectedCell {
  padding-left: 12px;
  padding-bottom: 10px;
  vertical-align: middle;
}
 
td.testInputVarnameCell,
td.testOutputVarnameCell {
  padding-right: 2px;
  text-align: right;
}

td.testInputValCell,
td.testOutputValCell {
  padding-right: 5px;
}

pre#submittedCodePRE {
  font-size: 10pt;
  font-family: Andale mono, monospace;
  background-color: #dddddd;
  padding: 5px;
}

div#submittedSolutionDisplay {
  width: 650px; /* to line up with questionsHeaderPane */
  text-align: left;
  font-size: 12pt;
  margin-bottom: 20px;
}

#gradeSummary {
  margin-top: 12px;
}

#pyGradingPane {
  margin-bottom: 20px;
}