.colors {
  color: #2e2626; /* near black */
  color: #473738; /* deep brown */
  color: #95c2c0; /* turquoise */
  color: #c5eaff; /* light blue */
  color: #fffedf; /* off-white */
}


/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }

/* Typography */

body { 
  background: #c5eaff; /* light blue */
  color: #2e2626;
  font-size: 14px;
  line-height: 18px; /* All elements should be a multiple of this value. */
  margin: 18px;
}

/* Common Accents */

.small   { font-size: 10px; margin-bottom: 18px; }
.large   { font-size: 14px; line-height:36px; }
.quiet   { color: #666; }
.caps { 
  font-variant: small-caps; 
  letter-spacing: 1px; 
  text-transform: lowercase; 
  font-size:1.2em;
  line-height:1%;
}


/* Fonts */

h1,h2,h3,
h4,h5,h6  { font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif; font-weight: bold; }
body      { font-family: Frutiger, Univers, "Helvetica Neue", "Lucida Grande", Calibri, Helvetica, Verdana, sans-serif; } 
pre       { font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; } 
code      { font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Monaco, Courier, monospace; } 


/* Headings */

h1,h2,h3,h4,h5,h6 { 
  color: #111; 
  clear: both; 
}

h1 { font-size: 30px; line-height:36px; padding:0 0 18px 0; }
h2 { font-size: 20px; line-height:36px; }
h3 { font-size: 16px; line-height:36px; }
h4 { font-size: 14px; font-weight:bold; }
h5 { font-size: 12px; font-weight:bold; }
h6 { font-size: 12px; }


/* Text elements */

p           { margin: 0 0 18px 0; }
p.last      { margin-bottom:0; }

a           { color: #125AA7; text-decoration: underline; }
a:hover     { color: #125AA7; }
a:visited   { color: #5f12a7; text-decoration: underline; }

ul, ol      { margin: 0 0 18px 18px; }
ul          { list-style-type: circle; }
ol          { list-style-type: decimal; }
dl          { margin: 0 0 18px 0; }
dl dt       {
  font-weight: bold;
  float: left;
  margin-left: 2em;
  width: 9em;
}

blockquote  { margin: 0 0 15px 0; color: #666; font-style: italic; }
cite        { font-style: normal }
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 18px; background: #eee; border:1px solid #ddd; padding:16px; }

hr {
  background: #B2CCFF; 
  color: #B2CCFF;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 0 0 16px 0;
  border: none; 
}

input {
  border: 1px solid #999999;
  background-color: #dcdad5;
  font-family: Frutiger, Univers, "Helvetica Neue", "Lucida Grande", Calibri, Helvetica, Verdana, sans-serif;
  font-size: 12px;
}

/* Tables */

table   { margin-bottom: 16px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
th,td   { height: 13px; padding:2px 4px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
th      { font-weight:bold; }

div.body {
  margin: 0 auto;
  width: 768px;
}

/* navigation */
div.navigation {
  float: left;
  margin-right: 28px;
  width: 250px;
}
div.navigation ul {
  margin: 0;
  padding: 0;
}
div.navigation li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


div.content {
  float: left;
  margin-bottom: 30px;
  width: 480px;
}

div.footer {
  clear: both;
  border-top: 1px solid #473738;
  margin-top: 30px;
  padding-top: 8px;
}
div.footer p {
  margin-bottom: 3px;
}