body { font-family: 'Trebuchet Ms', Verdana, Arial, sans-serif; background-color: #cce699; }

/* Layout */
html, body { margin: 3px; padding: 0; }
html { height: 92%; }
body { height: 100%; }
#leftcol, #rightcol { width: 49%; height: 100%; }
#leftcol { float: left; }
#rightcol { float: right; }
#editor, #generated-source { white-space: pre; } /* Fix for IE8 */
#editor, #static-view, #generated-source, #dynamic-view { width: 100%; height: 46%; }

/* Header */
header { margin-bottom: 4px; }
header h1 { display: inline; font-size: 1.1em; background: #cce699 url('../images/logo.png') no-repeat left center; padding-left: 114px; }
header span { color: #5c7a1f; }
header nav { display: inline; float: right; }

/* Sections */
h2 { display: inline; font-size: 1em; color: #5c7a1f; }
nav { margin-left: 1em; display: inline; }
nav span { font-size: 0.8em; color: #5c7a1f; }
#editor, #generated-source { margin-bottom: 6px; }
#editor, #static-view, #generated-source, #dynamic-view { border: solid 1px gray; border-radius: 2px; background-color: white; margin-top: 1px; }

/* Footer */
footer { clear: both; background-color: #cce699; text-align: right; font-size: 0.8em; }

/* Buttons */
#previous-button, #index-button, #next-button, #about-button, #show-instructions, #show-solution, #apply-solution { 
    display: inline-block; padding: 1px; margin-bottom: -6px; width: 18px; text-indent: -1000px; overflow: hidden; 
    background-color: #d6ebad; border-radius: 4px;
    background-repeat: no-repeat; background-position: center center; 
}
#previous-button:hover, #index-button:hover, #next-button:hover, #about-button:hover, #show-instructions:hover, 
#show-solution:hover, #apply-solution:hover { 
    background-color: #5c7a1f; 
}
#previous-button { background-image: url('../images/back.png'); }
#index-button { background-image: url('../images/eject.png'); }
#next-button { background-image: url('../images/forward.png'); }
#about-button { background-image: url('../images/information.png'); }
#show-instructions { background-image: url('../images/help.png'); }
#show-solution { background-image: url('../images/lightbulb.png'); }
#apply-solution { background-image: url('../images/lightning.png'); }

span.modelAttribute span, span.modelAttribute a { font-size: 1em; font-weight: bold; text-decoration: none; color: brown; }
span.modelAttribute a:hover { color: white; background-color: burlywood; }

/* Dialogs */
#instructions, #about { font-size: 0.8em; }
#instructions h1, #about h1 { font-size: 1.2em; }
.dialog .ui-widget-header { background-color: #cce699; background-image: none; }