demo.css

/*
Note: No style in this css is required for jmx.js to work. This file has styles intended only for the demo page.
It does use some styles from jmx.js.css, however, to style the references to the controls in the help balloon.
*/
body{
	background-color: lightyellow;
}

h1 { 
	font-size: 28px;
	margin:0;
	color: #f5c320;
}
#header{ 
	text-align: center;
	margin-bottom: 20px;

	/*height:10%;*/
}

#header > p { padding: 0; margin:0;}
#body {
	/*height:85%;*/
}

#footer	{
	/*height: 10%;*/
	clear:both;
	padding:10px;
}

.col1{
	float:left;
	width: 60%;

	border:5px solid #f5c320;
	border-radius:25px;
	box-shadow: 5px 5px 5px #cccccc;
}

.col2{
	float: right;
	text-align: left;
	width: 35%;
	padding: 5px;
}

#editor {
	padding: 10px;
}

/* From http://cssarrowplease.com/ */
.help {
	position: relative;
	background: #ffff66;
	border: 4px solid #f5c320;
}
.help:after, .help:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.help:after {
	border-color: rgba(237, 230, 36, 0);
	border-right-color: #ffff66;
	border-width: 30px;
	margin-top: -30px;
}
.help:before {
	border-color: rgba(245, 195, 32, 0);
	border-right-color: #f5c320;
	border-width: 36px;
	margin-top: -36px;
}