/***********************************************************************
 * Author:  Ben Trahan                                                 *
 *          design@bentrahan.com                                       *
 *          http://www.math.utah.edu/~trahan/                          *
 * Version: 1.0 9/23/2010                                              *
 * License: This file is licensed under the BEER-WARE LICENSE.  As     *
 *          long as you retain this header you can do whatever you     *
 *          want with this stuff.  If we meet some day, and you think  *
 *          this stuff is worth it, you can buy me a beer in return.   *
 ***********************************************************************/

/* This line pulls the font from Google's font servers. */
/* @import url(http://fonts.googleapis.com/css?family=Vollkorn&subset=latin); */

/* This line, on the other hand, imports Vollkorn and a hand-rolled smallcap
 * version thereof. */
@import url(http://www.math.utah.edu/~trahan/fonts/vollkorn.css);

/***********************************************************************
 Some preliminaries.

 The two-column format is handled as a collection of floats; the left 
 column floats left, and the right column floats right.  This format has
 the advantage of being relatively content-independent, and of looking 
 fairly consistent across browsers.  It's also a bit of a hassle to code.

 There are four important lengths to consider if you want to tweak your
 horizontal positioning:
 |                         | |<-- right col width: 26 em ------------------->|
 |                 monkeys | | capuchin, rhesus    |<-- right padding 6em -->|
 |<-- l. col width 12em -->|                                                 |
 |<--------------------------- body width: 45 em --------------------------->|
 To expand the column gap, just increase the body width.  To expand the left
 column, expand it and the body width by the same amount.  You may then need
 to optically recenter everything by increasing or decreasing the right
 padding.  Don't change the right column width unless you've changed the
 typeface.  I've collected the length declarations below; note that when you 
 change them for the <h1> tag, you'll need to divide by 2.

 Check the sample file at
   http://www.math.utah.edu/~trahan/index_test.shtml
 in order to see how to use this stylesheet.
 
 Note also that this stylesheet is only designed to handle small, simple
 pages.  If you try to make it do something else it will probably barf
 Gigeresque acid barf all over you.
 ************************************************************************/

/***********************
 * Length Declarations *
 ***********************/

/* Full width elements */
body {
  width: 45em;
}

/* Right column width elements */
.contents {
  /* This width is calibrated to the Vollkorn face.  Optimal column width
     is about 65 characters, which is roughly what this works out to.
     If you change typefaces, change this. */
  width: 26em;
  /* This line is a bit odd.  You may need to find and tweak all of the
     "padding-right: 6em" lines if you have a lot of very long (or very
     short) stuff in your left column.  This thing is a kind of hack to
     get everything optically centered. */
  padding-right: 6em;
}
h1 {
  width: 13em; /* Have to set this one separately b/c of font size 200% */
  padding-right: 3em;
}

/* Left column width elements */
.infopoint .title, .section h2 {
  /* This just lines up the column.  A width of 12em (a shade less than
     half the width of the body column) seems to work best.  Empirically,
     I mean. */
  width: 12em;
}

/**********************
 * Style Declarations *
 **********************/

body {
  /* The fallback font is Georgia, since it is part of Webcore and has
     old-style text figures */
  font-family: "VollkornRegular", "Georgia", serif;
  /* Webkit and Gecko understand this.  The other option is optimizeSpeed,
     which will skip lots of ligatures and kerning. */
  text-rendering: optimizeLegibility;
  font-size: 20px;
  /* If you change your typeface you may need to tweak this. Vollkorn
     really needs a bit of extra leading.  This also helps to keep
     line spacing from looking ugly when there's a superscript. */
  line-height: 1.2;
  /* This centers the body in the page. */
  margin-left: auto;
  margin-right: auto;
  /* I've put padding on the bottom because I think it looks nice.  If you
     have a small page, and you want everything centered vertically, you
     may (will) have to hand-center it.  Do something like:
       <body style="padding-top: 2em; padding-bottom: 6em;"> 
     Or just screw around until it looks nice.  Or e-mail me.  You can
     also look at the source for my web page (URL in header) for an
     example. */
  margin-top: auto;
  padding-bottom: 4em; /* 4 em because the padding atop the h1 is 2em. */
  margin-bottom: 4em;
}
h1 {
  /* Since all document sizes are in em, and 1em is the height of the font,
     all lengths in this section need to be *half* of the lengths elsewhere.
     Since the font size is 200%. */
  font-size: 200%;
  /* I spent a lot of time balancing things optically.  Change this if you
     want, but don't say I didn't warn you.  (Actually it won't do anything
     with this typeface, but if you change faces you'll probably want 
     this).*/
  font-weight: lighter;
  /* All of this nonsense lines the columns up correctly. See comments 
     on the section stuff for details. */
  float: right;
  margin: 0em;
  margin-top: 2em;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  margin-bottom: 0.2em;
  vertical-align: top;
  padding-left: 0em;
}

/* HTML supports "acronym" and "abbr" tags for accessibility reasons.  Later,
   when I've made a Vollkorn small cap font, I'll set these to render
   acronyms in small caps.  The simulated small caps in browsers look
   terrible so for now they do nothing. 
   
   For now, the Ben Style Guide says to put your acronyms (pronouncable, 
   like NATO) and abbreviations (unpronouncable, like NSF) into abbr and
   acronym tags in the correct case for the sentence:
     <abbr>Omg</abbr>, <abbr>wtf</abbr>, man?!
   The stylesheet will handle putting them in the correct case (small cap
   if available, all uppercase otherwise). */
acronym, abbr {
	border: none;
	/*text-transform: uppercase;*/
  /*font-variant: small-caps;*/
  font-family: "VollkornSmallcap", "Georgia", serif;
  text-transform: lowercase;
}
acronym.forced, abbr.forced {
  /*font-variant: small-caps;*/
  font-family: VollkornSmallcap;
  text-transform: lowercase;
  /* Webkit can't mix small caps and optimizeLegibility.  Argh!  Good 
     thing AM and PM aren't kerned pairs. */
}

/* th, st, &c.  This really fucks with your baselines and drives you nuts
   in Firefox, so it might be a good idea to avoid using it. */
sup.th {
  font-size: 65%;
}

/**********************************************************************
 This stuff handles normal sections.  To make everything work nice you
 should structure your code like this:
   <div class=section>
     <h2> section title </h2>
     <div class=contents>
       <p> contents contents contents </p>
     </div>
   </div>
 Because of the way I'm handling the columns, you really need to wrap
 your sections and contents.  To enforce this, your <h2> will look 
 absurd unless it's in a <div class=section>.  Also note that I don't
 support <h3> or greater yet since I haven't considered how to make
 it look nice.
 **********************************************************************/
.section {
  clear: both;
  margin: 0em;
  padding: 0em;
}
.section h2 {
  font-size: 100%;
  font-weight: normal;
  color: #00781e;
  vertical-align: top;
  /* Your text in the left column shouldn't be very long.  If it is
     too long, it will overflow and fail to wrap.  This will look
     weird, but less weird than if it *did* wrap.  Solve it by changing
     your section title. */
  text-align: right;
  white-space: nowrap;
  overflow: visible;

  padding: 0em;
  margin: 0em;
  padding-right: 0em;
  float: left;
  text-transform: lowercase;
}
.section .contents {
  vertical-align: top;
  float: right;
  padding-left: 0em;
}
.section p {
  margin-top: 0em;
}

/*********************************************************************
 This stuff handles the info table.  It's a hack to allow you to
 display a series of information points (name, phone number, office)
 without space between them.  It should look like this:
 <div class=infotable>
   <div class=infopoint>
     <div class=title>
       phone number
     </div>
     <div class=contents>
       555-555-5555
     </div>
   </div>
 </div>
 The reason I've set it up this way is so that later you can use
 "display: table;" in your CSS and transparently change it to an
 honest-to-god table if you so desire, ditching this stylesheet
 entirely.
 *********************************************************************/
.infotable {
  padding-bottom: 0.8em;
  float: left;
  width: 45em;
}
.infopoint {
  clear: both;
  margin-bottom: 0.8em;
}
.infopoint .title {
  color: #00781e;
  vertical-align: top;
  text-align: right;
  overflow: visible;
  padding-right: 0em;
  float: left;
  text-transform: lowercase;
}
.infopoint .contents {
  vertical-align: top;
  float: right;
  padding-left: 0em;
}
.infopoint p {
  margin-top: 0em;
}
a {
  color: #00781e;
  text-decoration: none;
}
a:hover {
  color: #00781e;
  text-decoration: underline;
}
a:visited {
  color: #008;
}