.page { width:42em; margin: 0 auto; margin-top: 5em; margin-bottom: 5em; }

h2 { font-family:sans-serif; font-size:1.3em; border-bottom:1px solid #BBB; }

.zeropoint { z-index: 10; }
.viewport { height:500px; width:800px; overflow:hidden; border:1px #CCC solid; text-align:center; }

.working { text-align:center; }
.proof { display:inline-block; white-space:nowrap; padding-left: 2.4em; padding-top:0.5em; padding-bottom:0.3em;margin-top:0.5em;margin-bottom:0.4em;}
.proof table { width:100%; border-collapse:collapse; margin: auto; }
.proof td { padding:0; border:0; margin:0; text-align:center; }
.proof .sibling { display: inline-block; vertical-align:bottom; }
.proof .tagBox { font-size: 0.8em; color: #444; vertical-align: top; width: 2.1em; padding-left:0.3em; padding-right:0.6em; }
.proof .tagBox .tag { position:relative; top:-0.7em;}
.proof .inference { border-top: 1px solid #000; }
.proof .junct:hover { background: #DDF; cursor:pointer; }
.proof .turnstile:hover { background: #FDD; cursor:pointer; }
.proof .junct:hover .primaryConnective { background: #005; color: #FFF; }
.proof .primaryExpr:hover { background: #005; color: #FFF; cursor:pointer; }
.proof .expand { font-size: 0.6em; color: #999; }
.proof .expand:hover { background: #005; color: #FFF; cursor:pointer; }

/* hat tip http://petewilliams.info/blog/2010/04/display-html-olul-list-as-comma-separated-sentence/ */
.commaList { display: inline; list-style: none; margin: 0; padding: 0; }
.commaList li { display: inline; }
.commaList li:after { content: ', '; }
.commaList li:last-child:after { content: ''; }

/* hat tip http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow */
.relMark {position:relative; width:0; height:0; display:inline;}
.offsetBox {position:absolute; z-index:1; top:0.2em; left:-1em; background-color:#FFF; border:1px solid #CCC;padding:2px; overflow:hidden; width:15em;}
.offsetInner {font-size:0.7em; text-align:left; }
.offsetBox input {border:1px solid #999; background:#FFF;}

.error, .errorStyle {margin-top:-0.5em; border:1px solid #900; padding:0.4em 2em; background: #F99; }
.error input, .errorStyle input {border:0; background:transparent; text-decoration:underline; color:#900; cursor:pointer;}

.rules {margin:1em auto;}
.centerTable {margin:1em auto;}

.proofIsDone .proof {background:#CFC;}
.green {background:#CFC;}
.proofIsPending .proof {background:#FCFCBB;}
.proofIsIncomplete .proof {}

.explained {border-bottom:dotted 1px #444;}
.proof .explained{border-bottom:0;}

sub {font-size:0.6em;}