/*

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;

}