/* vim: set shiftwidth=4 tabstop=4 autoindent noexpandtab copyindent: */

@import url(sil-fonts.css);
@import url(vera-fonts.css);

body { font-family: "Gentium Basic", serif; font-size-adjust: 0.4541;
       background: white; color: black; }

body.slide { font-size: 40px; }
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3, h4, h5, h6 { font-size: 1em; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }

pre, code { font-family: "Bitstream Vera Sans Mono", sans-serif; }

html, body { margin: 0; padding: 0; }
@media screen, projection {
h1 { background: #400; color: white; padding: 0.3em; }
}

pre { margin: 0; }

.highlight { background: yellow; color: black; }

h1 > span#nav { float: right; }
span#nav > a, span#nav > span { text-decoration: none; color: inherit; border: 0.1em solid silver; margin: 0 0.1em; }
span#nav > span.none { visibility: hidden; }
span#nav > a:hover, span#nav > span { background: #900; }

.headrow > h1 { margin: 0; font-size: 1.2em; }

/* Make percentage heights inside slide body work */
html { height: 100%; }
body.slide { display: table; width: 100%; height: 100%; }
.headrow { display: table-row; }
.bodycell { display: table-cell; height: 100%; }
.bodyrel { position: relative; height: 100%; width: 100%; }
.bodyabs { position: absolute; top: 1.5%; left: 1.5%; height: 97%; width: 97%; }

/* for particular examples */
table.rowstripes { color: black; border-spacing: 0; margin: 1em auto; }
table.rowstripes > tbody > tr > td { padding: 0.08em 0.24em; }
table.rowstripes > tbody > tr:nth-child(odd) { background: #ddd; }
table.rowstripes > tbody > tr:nth-child(even) { background: #fff; }
.fakelink { color: blue; text-decoration: underline; cursor: pointer; }

td .download-windows,
td .download-linux,
td .download-osx-uni {
        background-repeat: no-repeat;
        background-position: left;
        padding: 2px 0 2px 18px;
        display: block;
}
td .download-windows { background-image: url(ico-win.png); }
td .download-linux   { background-image: url(ico-tux.png); }
td .download-osx-uni { background-image: url(ico-osx-uni.png); }

#opacity-example { background: url(stripes-6.png); }
#opacity-example div { background: lime; margin: 0.25em; padding: 0.25em; }
#opacity-example h2 { background: red; margin: 0; padding: 0; }
#opacity-example-1 div { opacity: 0.5; }
#opacity-example-2 div, #opacity-example-3 div { background: rgba(0, 255, 0, 0.5); }
#opacity-example-3 h2 { background: rgba(255, 0, 0, 0.5); }

/* example says 22em, but use something different for the slides */
@media (min-width: 900px) {
  div#mqnav { float: left; width: 10em; }
  div#mqnav .item { display: block; }
  div#mqmain { margin-left: 11em; }
}