body { color: #333; background: white; margin-left: +30%; width: 50%; /* body is 50% of screen width */ padding: 0.5em; /* this will make a difference if I decide to have the background a different colour */ /* I can't decide on font: Optima's always nice, but Gill looks agreeably intense. Helvetica's a decent fallback. */ font-family: "Helvetica Neue", Helvetica, "Gill Sans", gill, sans-serif; /* font-family: Optima, "Gill Sans", gill, Helvetica, sans-serif; */ /* font-family: "Gill Sans", gill, Helvetica, sans-serif; */ /* I seem to have used 11pt at some point in the past, but this is far too big -- did I ever have a reason for that, or is it just due to browser changes? */ font-size: 10pt; line-height: 150%; } /* adapt to wider screens */ @media screen and (min-width: 700pt) { body { margin-left: 210pt; width: 350pt; } } /* The following appears not to work in Safari or Chrome -- don't know why, yet. @media print { @page :right { size: auto; body { margin-top: 2cm; margin-bottom: 3cm; margin-left: 10%; width: 60%; margin-right: 30%; color: #d33; } } @page :left { size: auto; body { margin-top: 2cm; margin-bottom: 3cm; margin-left: 30%; width: 60%; margin-right: 10%; color: #33d; } } } */ div.topsidebar { float: right; width: 50%; /* ...of the body width (ie, 50% x 50% of screen) */ font-size: smaller; margin-left: 1em; padding-left: 1em; border-left: solid thin #AAA; } /* On wider screens, move the sidebar out to the right hand side */ /* This uses CSS3 media queries: http://www.w3.org/TR/css3-mediaqueries/ */ @media screen and (min-width: 700pt) and (max-width: 850pt) { body { margin-left: 210pt; width: 350pt; /* 50% of 700pt */ margin-right: auto; } div.topsidebar { position: absolute; /* I feel this size should be 595pt (350 + 210 + 0.05*700), but that's clearly not right -- I don't think I understand what the -5% in the h1 spec below is actually 5% of! */ left: 570pt; width: auto; margin-left: 0pt; padding-left: 0pt; border: none; } } /* On still-wider screens, expand the left-margin, keeping the sidebar attached to the right-hand edge. When the screen is 850pt wide (expanding from the @media case above), the left margin will be 210pt, the width 350pt, and the right margin therefore 290pt.*/ @media screen and (min-width: 850pt) { body { margin-right: 290pt; /* 290 = 850-(210+350) */ width: 350pt; margin-left: auto; /* ...takes up the slack */ } div.topsidebar { position: absolute; width: 290pt; /* same 290pt as above */ left: auto; right: 0%; padding-left: 0pt; border: none; } } code, pre { font-family: Monaco, fixed; font-size: 9pt; } a { text-decoration: none; } a:link { color: #66C; } a:visited { color: #669; } a[href]:hover { background: #EEE; } div.abstract { font-style: oblique; text-align: left; } div.abstract em { font-style: normal; } div.abstract code { font-style: normal; font-size: 80%; } /* a span/div style for attracting attention */ .attention { color: #822; } h1, h2, h3, h4, h5, h6 { color: #822; font-weight: 100; /* few fonts have ultra-light weights */ line-height: 100%; /* no need to spread out titles */ } h1 { margin-left: -40%; margin-right: -5%; padding: 0.5em; border: solid thin #666; text-align: right; } h2 { margin-left: -40%; margin-right: -5%; padding: 0.2em; border-top: solid thin #666; clear: both; } h2.appendices { margin-top: 10ex; border-top: double medium #666; } h3 { margin-left: -30%; float: left; width: 25%; display: block; text-align: right; vertical-align: bottom; padding-top: 0pt; padding-right: 0.5em; margin-top: 0pt; line-height: 120%; } /* h4 { color: #C66; } */ pre, table { background: #dde; } pre { padding: 1em; line-height: 130%; } table { font-size: smaller; } td { padding: 0.5ex; } Q:before { content: "“"; } Q:after { content: "”"; } img.smallimage { float: right; margin: 24pt; margin-right: -30%; } div.signature { margin-left: -40%; margin-right: -5%; margin-top: 4ex; text-align: right; border: solid thin #666; padding: 0.3em; clear: both; } /* ============================================================ * Some other curiosities of my one-time formatting for web pages */ .doc-history { font-size: xx-small; background: #eee; line-height: 100%; } div.subtoc, div.subsubtoc { display: none; } /* ============================================================ * Special formatting for ToC */ /* If there's significant amount of text in front of the first subsection, then the following are good to put in the per-document stylesheet: width: 25%; float: right; */ div#toc { color: #888; padding: 0; font-size: smaller; text-align: right; } div#toc a:link { color: #888; } div#toc > ul { padding: 0pt; margin: 0pt; list-style: none; } div#toc li { padding: 0pt; display: inline-block; } div#toc li:before { content: "§ "; margin-left: 1em; } /* the following elements aren't currently generated by structure.lx */ div#toc li ul { padding-left: 1em; margin-left: 0; font-style: italic; display: inline; } div#toc li ul:before { content: "( "; } div#toc li ul:after { content: " ) "; } div#toc li li { padding-left: 0pt; } div#toc li li:after { content: "; "; }