/* basic layout
 * author : stakr GbR
 * version: 2008-09-10
 */

/****************************************************************************** 
 * STANDARD FONTS & SIZES
 ******************************************************************************/

html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62.5%;           /* 62.5% => 1em = 10px */
}

h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }

code, kbd, pre, samp, tt { font-family: Courier, "Courier New", monospace; }

body {
  font-size: 1.2em;																/* Standard font size 12px */
  line-height: 1.5em;
}

blockquote, div, dd, dl, dt, fieldset, form, hr, li, noscript, 
ol, p, pre, table, tbody, td, tfoot, th, thead, tr, ul {
  font-size: 1em;
  line-height: 1.5em;
}

/****************************************************************************** 
 * STANDARD MARGINS
 ******************************************************************************/

dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noscript, ol, p, pre, 
table, ul {
  margin: 0 0 1.5em 0;
}

fieldset { 
  padding-top: 1.5em;
}

dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {
  margin-bottom: 0;           /* no margin if nested */
}

/****************************************************************************** 
 * STANDARD INTEND
 ******************************************************************************/

blockquote, fieldset {
  padding-left: 2.2em;
  padding-right: 2.2em;
}

dd, li {
  margin-left: 2.2em;         /* looks fine at uls */
}

/****************************************************************************** 
 * HEADINGS
 ******************************************************************************/

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

h1 {
  /* Level-one heading */
  font-size: 1.1667em;        /* 14px */
  line-height: 1.286em;
  margin-bottom: 1.072em;
}

h2 {
  /* Level-two heading */
  font-size: 1em;             /* 12px */
  line-height: 1.5em;
  margin-top: 2.25em;
  margin-bottom: 0.75em;
}

h3 {
  /* Level-three heading */
  font-size: 1em;             /* 12px */
  line-height: 1.5em;
  margin-bottom: 0;           /* no bottom margin */
}

h4, h5, h6 {
  /* unused by now -> acts like paragraph */
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 0 1.5em 0;
}


/****************************************************************************** 
 * BLOCK ELEMENTS
 ******************************************************************************/

blockquote {
  /* Block quotation */
}

caption {
  /* Table caption */
  font-style: italic;
  text-align: center;
}

div{
  /* Generic block-level container */
}

dd {
  /* Definition description */
}

dl {
  /* Definition list */
}

dt {
  /* Definition term */
  font-weight: bold;
}

fieldset{
  /* Form control group */
  border: 0.1em solid;
}

form {
  /* Interactive form */
}

hr {
  /* Horizontal rule */
  border: none;
  border-bottom: 0.1em solid;
  height: 0;
  margin-top: -0.1em;
}

legend {
  /* Fieldset legend */
  font-weight: bold;
  margin-left: -0.5em;
  padding: 0 0.5em;
}

li {
  /* List item */
}

noscript {
  /* Alternate script content */
}

ol {
  /* Ordered list */
  list-style-type: decimal;
}
ol ol { 
  /* nested lists */
  list-style-type: lower-alpha; 
}

p {
  /* Paragraph */
}

pre {
  /* Preformatted text */
  /* Hide last empty line */
  margin-bottom: 0;
}

table {
  /* Table */
}

tbody {
  /* Table body */
}

td {
  /* Table data cell */
}

tfoot {
  /* Table foot */
  font-style: italic;
}

th {
  /* Table header cell */
  font-weight: bold;
  text-align: left;
}

thead {
  /* Table head */
}

tr {
  /* Table row */
}

ul {
  /* Unordered list */
  list-style-type: disc;
}
ul ul { 
  /* nested lists */
  list-style-type: circle; 
}

/****************************************************************************** 
 * INLINE ELEMENTS
 ******************************************************************************/

a {
  /* Anchor */
  color: blue;
}
a:link {}
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; color: red; }

abbr {
  /* Abbreviation */
}
abbr[title] { 
  /* dotted if title set */
  border-bottom: 0.1em dotted; 
}

acronym {
  /* Acronym */
  font-variant:	small-caps;
}
acronym[title] { 
  /* dotted if title set */
  border-bottom: 0.1em dotted; 
}

b {
  /* Bold text */
  font-weight: bold;
}

bdo {
  /* BiDi override */
}

big {
  /* Large text */
  font-size: 1.25em;
  line-height: 1em;
}

button {
  /* Button */
  margin: -0.25% 0;
}

br {
  /* Line break */
}

cite {
  /* Citation */
  font-style: italic;
}

code {
  /* Computer code */
}

del {
  /* Deleted text */
  text-decoration: line-through;
}

dfn {
  /* Defined term */
  font-style: italic;
}

em {
  /* Emphasis */
  font-style: italic;
}

i {
  /* Italic text */
  font-style: italic;
}

img {
  /* Inline image */
  /* Images with 14px height fit in line with 12px fonts */
  vertical-align: text-bottom;
}

input {
  /* Form input */
  /* TODO: fix height */
  margin: -0.25% 0;
}

ins {
  /* Inserted text */
  text-decoration: underline;
}

kbd {
  /* Text to be input */
}

label {
  /* Form field label */
  font-weight: bold;
}

map {
  /* Image map */
}

q {
  /* Short quotation */
}

object {
  /* Object */	
}

samp {
  /* Sample output */
}

script {
  /* Client-side script */
}

select {
  /* Option selector */
  /* TODO: fix height */
  margin: -0.25% 0;
}

small {
  /* Small text */
  font-size: 0.75em;
  line-height: 2em;
}

span {
  /* Generic inline container */
}

strong {
  /* Strong emphasis */
  font-weight: bold;
}

sub {
  /* Subscript */
  font-size: 0.75em;
  line-height: 0.833em;
  vertical-align: sub;
}

sup {
  /* Superscript */
  font-size: 0.75em;
  line-height: 0.833em;
  vertical-align: super;
}

textarea {
  /* Multi-line text input */
  /* TODO: fix height */
}

tt {
  /* Teletype text */
}

var {
  /* Variable */
  font-style: italic;
}

/****************************************************************************** 
 * PSEUDO ELEMENTS
 ******************************************************************************/

:focus {}

/****************************************************************************** 
 * USEFUL CLASSES
 ******************************************************************************/

.small { 
  font-size: 0.75em; 
  line-height: 2em;
}

.hide { 
  display: none;
}

.highlight {
  background: #ff0;
}

.top {
  margin-top: 0; 
  padding-top: 0;
}

.bottom {
  margin-bottom: 0; 
  padding-bottom: 0;
}