/*
 * Default screen-based style sheet
 * ================================
 */

/* Global effects */

body, p, div, th, td {
  font-family: "Tahoma", "Homerton", "Arial", sans-serif;
}

body, div {
  margin:  0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  min-width: 640px;
  color: #123;
  font-size: 11.5pt;
  background-color: #f5f7fb;
}

p {
  margin: 0 0 11.5pt 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #456;
  text-shadow: #fff 1px 1px 1px;
  font-weight: bold;
  margin: 0 0 11.5pt 0;
}

h1 {
  font-size: 22pt;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h2 {
  font-size: 18pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 21pt;
}

h3 { font-size: 14pt; }
h4 { font-size: 13pt; color: #567; }
h5 { font-size: 12pt; color: #567; }
h6 { font-size: 11pt; color: #567; }

tt, pre, code {
  font-size: 90%;
  font-family: "Andale Mono", "Courier New", "Corpus", monospace;
}

a > img {
  border: none; /* Firefox insists on adding borders by default - ugly */
}

img[border="1"] {
  border: 1px solid black; /* ...but add them if asked to */
}

/* Header area */

div#header_background {
  height: 160px;
  background: url( /images/mountains/header_background_slice.jpg ) top left repeat-x;
  border-bottom: 1px solid #bbb;
}

div#header_foreground {
  height: 160px;
  background: url( /images/mountains/header_background.jpg ) top right no-repeat;
}

a#header_home_link {
  text-decoration: none;
}

img#header_logo {
  margin: 20px;
  float: left;
  border: none;
}

div#header_title_text,
div#header_subtitle_text {
  text-shadow: #fff 0 1px 1px;
}

div#header_title_text {
  display: inline-block;
  margin-top: 33px;
  white-space: nowrap;
  font-size: 20pt;
  font-weight: bold;
  color: #4991bc;
}

div#header_subtitle_text {
  line-height: 0.8;
  font-size: 14pt;
  color: #728b9a;
}

div#header_navigation {
  margin-top: 12px;
  padding: 9px 15px 10px 15px;
  font-size: 11.5pt;
  color: #ccc;
  background: url( /images/mountains/translucent_white_40.png );
}

div#header_navigation span.current_page {
  color: #4991bc;
  font-weight: bold;
}

div#header_navigation a {
  text-decoration: none;
  color: #728b9a;
  text-shadow: #fff 0 1px 1px;
}

div#header_navigation a:hover {
  text-decoration: underline;
  color: #2397db;
  text-shadow: none;
}

/* General content area */

div#content {
  padding-bottom: 100px; /* Push footer away from content */
  margin: 40px 7% 0 7%;
}

/* Floated sidebar */

div#sidebar {
  max-width: 35%;
  margin-left: 7%;
  float: right;
}

div#sidebar div.other_files div.curvy,
div#sidebar div.related_links div.curvy {
  padding: 10px;
}

div#sidebar ul {
  list-style-type: circle;
  padding-left: 18px;
}

div#sidebar > div {
  margin-bottom: 40px;
}

div#sidebar > div:last-child {
  margin-bottom: 80px;
}

div#sidebar span.subdesc {
  font-style: italic;
  font-size: 9pt;
}

/* Link customisation for sidebar and main content areas */

div#main a:link,
div#sidebar div.curvy a:link {
  color: #4991bc;
  text-decoration: none;
}

div#main a:visited,
div#sidebar div.curvy a:visited {
  color: #598baa;
  text-decoration: none;
}

div#main a:hover,
div#sidebar div.curvy a:hover {
  color: #63c5ff;
  text-decoration: underline;
}

/* Main content */

div#main ul {
  margin: 0 0 11.5pt 0;
}

div#main li {
  margin-top: 5px;
  text-shadow: #fff 0 1px 1px;
}

/* Footer area */

div#above_footer {
  min-height: 100%; /* Forces footer to at least bottom of visible window */
}

div#footer_background {
  clear: both;
  position: relative;
  height: 51px;
  border-top: 1px solid #bbb;
  margin-top: -72px; /* Must be negative element total ("outer") height */
}

div#footer_foreground {
  height: 31px;
  padding: 20px;
  background-color: #dfe2e4;

  white-space: nowrap;
  font-size: 11.5pt;
  color: #4991bc;
  text-shadow: #fff 0 1px 1px;
}

div#footer_foreground a {
  text-decoration: none;
  color: #728b9a;
  text-shadow: #fff 0 1px 1px;
}

div#footer_foreground a:hover {
  text-decoration: underline;
  color: #2397db;
  text-shadow: none;
}

div#footer_site_seal {
  float: left;
  margin-top: -10px;
  margin-left: -10px;
  padding-right: 10px;
}

div#footer_compliance {
  float: left;
}

div#footer_updated {
  float: left;
  margin-left: 10px;
}

div#footer_licence {
  text-align: right;
}

div#footer_licence img {
  float: right;
  margin-left: 10px;
}

/* Curved corner containers */

div.curvy {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;

  padding: 8px 5px 5px 5px;

  border: 1px solid #bbb;
  background-color: #dfe2e4;

  box-shadow: #888 0 0 5px;
  -moz-box-shadow: #888 0 0 5px;
  -webkit-box-shadow: #888 0 0 5px;
}

/* Artwork thumbnails and example images */

div.examples {
  text-align: center;
  margin-bottom: -3px;
}

div.examples img {
  background-color: #fff;
  margin: 5px;
  padding: 5px;
}

/* Audio track listings */

img.audio_thumb {
  float: left;
}

div.audio_download {
  float: left;
  margin: 2px 8px 0 12px;
}

div.audio_download img {
  margin-bottom: 2px;
}

div.audio_info {
  margin-left: 114px;
}

div.audio_separator {
  clear: left;
  padding: 10px;
}

/* Buttons */

div.button {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;

  margin-bottom: 11.5pt;
  text-align: center;

  border: 2px solid #888;
  background-color: #888;
}

div.button a {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;

  text-decoration: none;
  font-size: 12pt;
  font-weight: bold;

  display: block;
  padding: 9px 10px 10px 10px;
}

div.button.download {
  margin-top: 8px;
}

div.button.download a {
  color: #040;
  text-shadow: #fff 0 1px 4px;
  background: #68c810 url( /images/mountains/download_overlay.png ) top left repeat-x;
}

div.button.download a:hover {
  color: #090;
  background: #73eb06 url( /images/mountains/download_overlay_hover.png ) top left repeat-x;
}

div.button.download a:active {
  color: #000;
  text-shadow: #ddd 0 1px 4px;
  background: #4e9f04 url( /images/mountains/download_overlay_active.png ) top left repeat-x;
}

/* Outlined thumbnails */

.outlined {
  border: 1px solid #bbb;
}

.outlined:hover {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 4px;
  box-shadow: #888 0 1px 5px;
  -moz-box-shadow: #888 0 1px 5px;
  -webkit-box-shadow: #888 0 1px 5px;
}

/* "E-mail me" contact shoutout highlighted sidebar text */

div.contact_shoutout {
  font-size: 10pt;
  text-shadow: #fff 0px 1px 1px;
}

/* Specifications for software components */

div#specification.approved {
  background: url( /images/mountains/dsa.png ) top right no-repeat;
}

div#specification h3 {
  margin-top: 0; /* Override "div#sidebar h3" set earlier */
}

table#specification_table tr {
  vertical-align: top;
}

table#specification_table th {
  font-size: 11pt;
  font-weight: normal;
  white-space: nowrap;
  color: #728b9a;
  text-align: right;
  text-shadow: #fff 0 1px 1px;
  padding-bottom: 5px;
}

table#specification_table td {
  font-size: 10pt;
  padding: 1px 0 0 10px;
}

table#specification_table tr:last-child th {
  padding-bottom: 0;
}

/* Mac / Universal and OSI logos */

div.mac_universal {
  text-align: center;
  padding:    34px 0 0 0;
}

img.osi {
  float: right;
  margin: 0 10px 20px 20px;
}

/* Hipposoft logo */

div.hippologo {
  text-align: center;
}

img.hippologo {
  border: 3px solid black;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: #888 0 1px 5px;
  -moz-box-shadow: #888 0 1px 5px;
  -webkit-box-shadow: #888 0 1px 5px;
}

/* Illustrations */

div.illustration {
  text-align: center;
}

div.illustration img {
  margin: 0 0 11.5pt 0;
}

div.illustration.bordered img {
  border: 1px solid black;
}

div.illustration.captioned {
  margin-bottom: 11.5pt;
}

div.illustration.captioned img {
  margin-bottom: 4pt;
}

/* Floated / hanging objects */

.left_hang {
  float: left;
  margin: 0 10px 11.5pt 0;
}

.right_hang {
  float: right;
  margin: 0 0 11.5pt 10px;
}

.left_clear {
  clear: left;
}

.right_clear {
  clear: right;
}

.both_clear {
  clear: both;
}

/* Auto-generated contents table back-links */

a.TOCBackLink
{
  display: block;
  float: right;
  font-size: 9px;
  text-transform: lowercase;
}

/* Gallery panels */

div#gallery {
  margin-bottom: 40px;
}

div#gallery div {
  text-align: center;
}

div#gallery img {
  padding: 3px;
  background: #fff;
  margin: 5px;
  border: 1px solid #888;
}

/* Feature strips */

div.feature {
  padding: 11.5pt;
}

div.feature.odd {
  background-color: #eee;
}

div.feature.even {
  background-color: #fff;
}