@import url(reset.css); /* so that things that should line up do */ /* The web site consists of only three pages so all styles are kept in this one style sheet. There are a set of common styles and then a set of styles for each page, identified with a class on the body tag. For example, the installation.html page will have the tag . */ /* common styles */ body { font-family: "Optima", sans-serif; font-weight: 100; line-height: 1.3em; margin: 0 auto; /* center the page */ margin-bottom: 1em; /* when scrolling to the bottom of the page, ensure there is a nice gap below the last content of the page */ width: 800px; /* a fixed width page (we are not responsive at this time) */ /* links */ /* use the same header styles on all pages */ /* standard lists */ /* lists with a big dot instead of the standard small one */ /* big dot ordered lists numbered with a, b, c, etc. */ /* vertical lists that use images for bullets; this is a 'base class' - images need to be added in sub-classes */ /* horizontal lists that use images for bullets; this is a 'base class' - images need to be added in sub-classes */ /* a horizontal menu and a horizontal line at the top of the page */ /* a box to display code samples */ /* a horizontal line and copyright notice at the bottom of each page */ } body a, body a:link, body a:hover, body a:visited, body a:active { color: #0000cc; text-decoration: none; /* no text decoration ... */ } body a:hover, body a:link:hover, body a:hover:hover, body a:visited:hover, body a:active:hover { text-decoration: underline; /* ... until you hover over them */ } body header { text-align: center; /* center headers horizontally on the page */ } body h1 { display: inline-block; /* force width to fit so that the image appears immediately to the left */ font-family: "Palatino", serif; font-size: 200%; font-weight: bold; letter-spacing: 0.08em; margin-top: 1.5em; margin-bottom: 2em; position: relative; /* needed so that child h1:before element can use absolute position */ } body h1:before { content: ""; height: 1.3em; left: -1.8em; position: absolute; /* absolutely positioned relative to the associated h1 */ top: -0.4em; width: 1.3em; } body h2 { color: #996; font-family: "Palatino", serif; font-size: 120%; font-weight: light; letter-spacing: 0.1em; margin-bottom: 0.8em; text-align: center; } body ul.standard { list-style: disc outside none; margin-left: 2em; /* indent the bullets so that they are not up against the left margin */ margin-right: 2em; /* same indent on the right side to keep it balanced */ margin-top: 0.4em; /* set off the list a bit from whatever is above it */ text-align: left; } body ul.standard li { margin-bottom: 0.4em; /* a bit of a gap between list items so that they do not run together */ } body ul.big-dot, body ol.big-dot { line-height: 1.3em; list-style-type: none; /* we'll do it ourselves using li:before */ margin-left: 0em; /* content of li aligns with left border of page; the a, b, c, ... appear in the left margin */ } body ul.big-dot > li, body ol.big-dot > li { margin-bottom: 4em; position: relative; /* needed so that child li:before element can use absolute position */ } body ul.big-dot > li p, body ol.big-dot > li p { margin-bottom: 0.6em; /* a bit of space between paragraphs in an li element */ } body ul.big-dot > li:before, body ol.big-dot > li:before { /* the big dot is added separately (the original one was clobbered with list-style-type: none) */ background-color: #001faa; border: 0; /* hide the border as it didn't look smooth in safari */ border-radius: 50%; /* create a circle */ color: white; content: ""; font-family: "Lucida Console", Monaco5, monospace; font-size: 1.5em; height: 1.2em; /* need to specify the (same) width and height so that we get a circle, not an oval */ left: -3em; /* put the circles out in the left margin */ line-height: 1.1; /* bumps the letters down into the center of the circle (vertical-align had no effect) */ padding: 0.3em; /* allow space between the letter and the edges of the circle */ position: absolute; /* absolutely positioned relative to the associated li */ text-align: center; top: 0em; width: 1.2em; /* same as height so that we get a circle, not an oval */ } body ol.big-dot { counter-reset: li-counter; /* every new list should start counting from 'a' */ } body ol.big-dot > li:before { /* this is the circle with a, b, c, ... inside */ content: counter(li-counter,lower-alpha); /* use letters instead of numbers, i.e. a, b, c, ... */ counter-increment: li-counter; /* otherwise we'll get a, a, a, ... */ } body ul.v-images, body ol.v-images { line-height: 1.3em; list-style-type: none; /* we'll do it ourselves using li:before */ margin-left: 0em; /* content of li aligns with left border of page; the a, b, c, ... appear in the left margin */ } body ul.v-images > li, body ol.v-images > li { margin-bottom: 4em; position: relative; /* needed so that child li:before element can use absolute position */ } body ul.v-images > li:before, body ol.v-images > li:before { height: 2.6em; /* keep the width and height the same, just to be consistent */ left: -4.5em; /* put the images out in the left margin */ position: absolute; /* absolutely positioned relative to the associated li */ top: 0em; width: 2.6em; /* same as height, to be consistent */ } body ul.h-images, body ol.h-images { list-style-type: none; /* we'll do it ourselves using li:before */ } body ul.h-images > li, body ol.h-images > li { display: inline-block; /* list menu items horizontally */ margin-left: 4em; /* take into account the bullet image */ position: relative; /* needed so that child li:before element can use absolute position */ width: 6em; /* to be adjusted in sub-classes */ } body ul.h-images > li:before, body ol.h-images > li:before { height: 2.6em; /* keep the width and height the same, just to be consistent */ left: -3.2em; /* put the images out in the left margin */ position: absolute; /* absolutely positioned relative to the associated li */ top: -0.8em; width: 2.6em; /* same as height, to be consistent */ } body nav.common ul { border-bottom: 1px solid #eee; /* a fine horizontal line */ color: #999; /* dim the menu items as they are not the focus of the page */ margin-top: 0.8em; /* gap between top of page and menu item texts */ margin-bottom: 2em; /* gap between the menu and top-of-page content */ padding-bottom: 0.4em; /* space between bottom of menu items and horizontal separator line (bottom border of ul) */ text-align: right; /* all menu items are on the right side (except the first one, the home link) */ } body nav.common ul li { display: inline-block; /* display the li items horizontally rather than vertically */ font-size: 90%; /* shrink it as it is not the focus of the page */ margin-left: 2em; /* spacing between menu items; use -left so that the rightmost item does not have a right margin */ } body nav.common ul li:nth-child(1) { /* all menu items will be on the right side except the first one */ float: left; /* the first menu item, the home link, on the left */ margin-left: 0em; /* first item does not need a left margin, so counter-act margin-left: 2em in li {} above */ } body nav.common ul a, body nav.common ul a:link, body nav.common ul a:hover, body nav.common ul a:visited, body nav.common ul a:active { color: inherit; } body nav.common ul .version { font-size: 70%; margin-left: 0.4em; } body pre.code { border: 1px solid #ddd; /* a delicately raised box with a whisper of shadow */ box-shadow: 0px 0px 6px #eee; font-family: monospace; font-size: 90%; line-height: 1.3; /* make it a bit easier to read */ margin-top: 0.8em; /* a nice gap above and below the border+shadow */ margin-bottom: 0.8em; overflow: auto; /* make it easier to select code with mouse for copy & paste */ padding: 0.8em; /* space between the border and the contents */ text-align: left; /* in case the parent is not left-aligned */ } body pre.code span.dim { color: #aaa; /* dim contextual code that is otherwise not of interest */ } body footer { margin: 0 auto; /* horizontally center the line */ text-align: center; /* horizontally center the copyright text */ width: 30%; /* a short line seems to look better than one the full width of the page */ } body footer article { border-top: 1px solid #eee; /* a fine horizontal line */ color: #999; /* dim it so that it is not distracting */ font-size: 75%; /* shrink it as it is not the focus of the page */ margin-top: 7em; /* gap between the bottom-of-page content and the copyright notice */ padding-top: 0.4em; /* gap between top of copyright notice and horizontal line */ } /* index.html styles */ body.index { text-align: center; /* horizontally center all main content on the page */ /* navigation links that are part of the main page content */ } body.index article { margin-bottom: 3em; /* leave lots of space so that it does not look crowded */ } body.index article pre.code { margin: 0 auto; /* center the pre box on the page */ display: inline-block; /* so that the width adjusts to fit its contents */ } body.index nav.index { /* keep the links the same color as the rest of the text; it is obvious that they are links */ } body.index nav.index ul.h-images { margin-top: 2.6em; /* adjusted by eye */ margin-left: 3em; /* adjusted by eye */ /* the images to use for the list bullets; each bullet has its own image */ } body.index nav.index ul.h-images li { text-align: left; /* to counter-act the text-align: center; of the body tag */ } body.index nav.index ul.h-images li.install:before { content: url("install.svg"); } body.index nav.index ul.h-images li.tutorial:before { content: url("tutorl.svg"); } body.index nav.index ul.h-images li.reference:before { content: url("book.svg"); } body.index nav.index ul.h-images li.source:before { content: url("source.svg"); } body.index nav.index a, body.index nav.index a:link, body.index nav.index a:hover, body.index nav.index a:visited, body.index nav.index a:active { color: inherit; } /* installation.html styles */ body.installation { text-align: center; /* horizontally center all main content on the page */ } body.installation h1:before { content: url("install.svg"); } body.installation article { margin-bottom: 3em; /* some extra space between installation options */ } body.installation article ul.standard { display: inline-block; /* so that the width adjusts to fit its contents */ } body.installation article pre.code { margin: 0 auto; /* center the pre box on the page */ display: inline-block; /* so that the width adjusts to fit its contents */ } /* tutorl.html styles */ body.tutorial h1:before { content: url("tutorl.svg"); } body.tutorial article { margin-left: 4.5em; /* keep the bullets from going beyond the left page margin */ } body.tutorial article aside { /* sometimes we note the purpose of a tutorial step, e.g. 'demonstrates throws()' */ display: inline; font-size: 96%; font-style: italic; } /* reference.html styles */ body.reference { /* the title links to itself to make it easy to save links to a particular item, but leaving the link text in the link color looks a bit garish */ } body.reference h1:before { content: url("book.svg"); } body.reference nav.referencelinks { margin-bottom: 3em; /* puts some space below the list so that it stands out */ text-align: center; /* center the list horizontally */ } body.reference nav.referencelinks ul { list-style-type: none; /* no bullets */ } body.reference nav.referencelinks ul li { display: inline-block; /* list links horizontally */ margin-left: 1em; /* spread the items out horizontally */ margin-right: 1em; } body.reference article { border-top: 1px solid #eee; margin-top: 2em; margin-bottom: 4em; padding-top: 0.6em; padding-left: 1.6em; padding-right: 1.6em; /* make the title, which is the usage (e.g. args(arg [, arg, ...]) ), stand out */ } body.reference article h2 { margin-bottom: 2em; } body.reference article p { margin-top: 1em; /* a bit of space between paragraphs */ } body.reference article p.error { font-size: 90%; font-style: italic; margin-left: 5em; margin-right: 5em; } body.reference article p.usage { font-family: "Lucida Console", Monaco5, monospace; font-size: 110%; font-weight: bold; margin-bottom: 1em; } body.reference a, body.reference a:link, body.reference a:hover, body.reference a:visited, body.reference a:active { color: inherit; }