body { background:#eee; text-align:justify; }
#main { margin:0 auto 5em auto; max-width:60em; 
        border-left:1px solid #aab; border-right:2px solid #aab; border-bottom:2px solid #aab; 
        padding:1em 4em; background:white; }
h1   { font-size: 200%; color: #ddf; background: #23e; 
       text-align: center; padding-top: 0.5em; padding-bottom: 0.5em; margin-bottom:0; 
       border-right:1px solid #228; border-bottom:1px solid #228; }
h2   { font-size: 175%; color: #248; background: #bcf; padding:0.3em; }
h3   { font-size: 125%; color: #162; margin-top: 2em; }
h4   { font-size: 120%; color: #128; margin-left: 0.5em; }
p    { margin-left: 3%; margin-right: 3%; }
.code {  border: 1px solid black; background: #eef; padding: 0.3em; margin-left: 5%; margin-right: 10%; color: #e33; font-family: monospace;font-size: 110%; }
ul { margin-top: -0.1em; margin-bottom: 0.1em; }
li { margin-left: 3%; margin-top: 0.1em; margin-right: 6%; }
tt { color: #e33; }
.com { color: #234; };
.warn { margin-left: 4%; margin-right: 4%; color: #f11; background: #fee; 
        padding: 0.3em; border: 1px solid; }
.note { margin-left: 4%; margin-right: 4%; color: #000; background: #eef; 
        padding: 0.3em; border: 1px solid; }
.ex { border: 1px solid black; background: #eef; padding: 0.3em; margin: 1em; }

.framed { background:#ffa; padding: 1ex 1ex; border: 1px dashed #fa3;   }