html {
  height: 100%;
}

body {
	min-height: 100%;
	position: relative;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	/*margin: 0 0 100px;*/ /* bottom = footer height */
	
	padding: 5px;
	color:#333; 
	max-width: 960px; 
	margin: 0 auto;
	/*margin-bottom: 40px;*/
	padding-bottom: 40px;
	border-bottom: 10px #67a029 solid;
}
body, pre { font: 16px Arial,Helvetica,sans-serif; }
h1, h2, h3 { font-weight: normal; }
h1, h2 { color: #67a029; }
h2 { margin-top: 40px; }
h3 { margin-top: 36px; }
pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	
	line-height: 24px;
}
form { max-width: 100%; position: relative; }
form textarea { width: 100%; min-height: 208px; clear: both; }

.CodeMirror { background-color: #F7F7F7; /*height: 250px; defaults to 300px */ clear: both; }
.CodeMirror pre { line-height: 20px; }
form.small .CodeMirror { height: 208px; }
form.large .CodeMirror { height: 400px; }

form button { margin: 6px 0; }
form button[type=submit] { float: right; }

.todo,.question { color: red; }
.foot {
	font-size: 14px; 
	color: #bbb; 
	margin-bottom: 0;
    position: absolute;
    left: 1px;
    bottom: 0;
    height: 18px;
    width: 100%;
}

.green { color: #67a029; }


/* Slideshow Mode */

body.slideshow > * {
	display: none;
}

body.slideshow > .current-slide, body.slideshow .foot  {
	display: block;
}

body.slideshow > h1.current-slide, body.slideshow > h2.current-slide  {
    font-size: 48px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
}

body.slideshow > h3 {
    margin-top: 16px;
}

body.slideshow, body.slideshow  pre {
	font-size: 18px;
}

body.slideshow  pre {
	line-height: 24px;
}

body.slideshow form button { position: absolute; right: 50px; top: -36px; }
body.slideshow form button[type=submit] { right: 0; }

body.slideshow form.small .CodeMirror { /*height: 300px;*/ }
/*form.large .CodeMirror { height: 400px; }*/

body.slideshow .CodeMirror { background-color: #e9e9e9; border: 1px #ccc solid; }


div.CodeMirror span.CodeMirror-matchingbracket {
    color: #ff0000; font-weight: bold;
}