/* base.css | v0.1 (10172009) | Thierry Koblentz
 *
 * The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
 */

/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
 */
html {
  height: 100%;
  overflow-y: scroll;
}
/* not all browsers set white as the default background color
 * color is set to create not too much contrast with the background color
 * line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line)
 */
body {
  height: 100%;
  background: #fff;
  color: #444;
  line-height: 1.4;
}

/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing makes the font a bit more legible
 */
body {
  font-family: "Calibri", Freeserif, serif;
  letter-spacing: .05em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "DejaVu Serif", Georgia, serif;
  letter-spacing: .1em;
}
pre, code, var {
  font-family: "Courier New", Courier, monospace;
}

/* These should be self explanatory
 */
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}

h1, h2, h3 {font-weight: normal;}

/* styling for links and visited links as well as for links in a hovered, focus and active state
 * make sure to keep these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :active is to avoid the sticky outline when a user clicks on a link, but choose to not follow it
 * note that the last rule does not do anything in IE as this browser does not support "outline" (besides, it treats :active and :focus the same)
 */
a:link,
	a:visited {
	color: #aaa;
}
a:hover,
	a:focus {
	text-decoration: none;
	color: #eee;
}
a:focus,:focus {outline: 1px dotted #eee;}
a:active {outline: none;}

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it
 */
body, p, dl, dt, dd, ul, li, h1, h2 {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
  vertical-align: bottom;
}

ul li {list-style-type: none;}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;}

abbr,
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
}

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
 * rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
 */
h2, p, ul {margin-top: 1.2em;}