/* The menu and button styles are from: */
/* Credits: Dynamic Drive CSS Library */
/* URL: http://www.dynamicdrive.com/style/ */

/* Modify core HTML elements. */

/* Ajust the body. */
body
  {
  /* Don't scroll the body. */
  overflow: hidden;

  /* Make the text a nice dark green. */
  color: #004400;

  /* Use a nice, tight font. */
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 12px;
  font-style: normal;
  text-align: left;
 
  /* IE leaves blank spaces due to scrollbar bugs. It also renders
     background colors differently than gif colors. Therefore, I have
     to use a background gif image instead of any background colors. */
  background: url(images/background.gif) repeat-x top left;
  background-color: #ffffcc;
  }

/* I like my rules at 80%. */
hr
  {
  width: 80%;
  }

/* Turn off image borders. */
img
  {
  border: none;
  }

/* Links. */
a
  {
  /* Make the text a nice sea green. */
  color: #006644;
  }

/* Hover links. */
a:hover
  {
  /* Use a brigher green for this one. */
  color: #00aa00;
  }

/* Active links. */
a:active
  {
  /* Make the text a nice dark green. */
  color: #004400;

  /* While the button is pressed, keep the underline and press the link. */
  text-decoration: underline;
  border-width: 1px;
  border-style: inset;
  border-color: inherit;
  }

/* Custom header styles. */
h1
  {
  font-size: 160%;
  font-weight: bold;
  }

h2
  {
  font-size: 120%;
  font-weight: bold;
  }

h3
  {
  font-size: 100%;
  font-weight: bold;
  font-style: italic;
  }

/* Define my classes. */

/* Header area. */
.header
  {
  /* Put the header right at the top. */
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 

  /* Allow enough room for the Etresoft logo and menu. */
  height: 80px; 

  /* No scrollbars. */
  overflow: hidden; 
  }

/* The logo. */
.logo
  {
  /* Space it nicely. */
  margin: 10px;
  }

/* Main content. */
.content
  {
  /* Snuggle it up under the header. */
  position: absolute;
  top: 80px; 
  left: 0px;
  right: 0px;
  bottom: 60px;

  /* Space it nicely. */
  padding-left: 10px;
  padding-right: 10px;

  /* I want scrollbars here. */
  overflow: auto; 
  }

/* Footer area. */
.footer
  {
  /* Make it look like a footer. */
  display: block;
  width: 100%;

  /* Put the footer at the bottom. */
  position: absolute;
  bottom: 1px;
  height: 55px;

  /* Make the text a muted green. */
  color: #88aa88;

  /* Center this important information. */
  text-align: center;

  /* Well, it's not that important. */
  font-size: 10px;

  /* Clear any floating. */
  clear: both;

  /* Separate it from the text. */
  border-top: solid;
  border-width: 1px;
  border-color: #cccccc;
  }

/* Adjust the footer text for IE. */
.footer p
  {
  margin-top: 8px;
  }
  
/* Footer links. */
.footer a
  {
  /* Make the text a muted green. */
  color: #88aa88;
  
  /* Make sure it is boldface. */
  font-weight: bold;
  }

/* Footer hover links. */
.footer a:hover
  {
  /* Use a brigher green for this one. */
  color: #00aa00;
  }

/* Menu area. */
.menu
  {
  /* Make it sit on top of the content. */
  position: absolute;
  top: 50px;
  right: 0px;

  /* Don't let it get too small. */
  min-width: 500px;

  /* A pleasant font. */
  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  }

/* The menu list itself. */
.menu ul
  {
  /* Turn off the bullet. */
  list-style-type: none;

  /* Adjust alignment for the <span> trick to enable two background
     images. */
  margin: 0;
  margin-left: 0px; 
  padding: 0;
  }

/* A single menu item. */
.menu li
  {
  display: inline;
 
  /* No extra space. */
  margin: 0;
  padding: 0;
  }

/* Menu link. */
.menu a
  {
  /* Try to make the cursor look nice. */
	cursor: pointer; 
	cursor: hand; 

  /* Display the top left part of the tab image. */
  float: left; 
  background: url(images/tab-left.gif) no-repeat left top;
  margin: 0;
  margin-right: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 9px;

  /* Make the text a nice dark green. */
  color: #004400;

  /* No underline. */
  text-decoration: none;

  /* Turn off the top-level border. */
  border-style: none;
  }

/* Text area in menu item. */
.menu a span
  {
  /* Display the top right part of the tab image. */
  float: left; 
  display: block;
  background: url(images/tab.gif) no-repeat right top;

  /* Make the text a muted green. */
  color: #88aa88;

  /* Adjust the spacing so it looks nice. */
  padding-top: 10px;
  padding-left: 8px;
  padding-bottom: 3px;
  padding-right: 16px;
  }

/* Selected menu item. */
.menu #current a
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 0 -50px; 
  }

/* Selected menu text. */
.menu #current a span
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 100% -50px; 

  /* Make the text a nice dark green. */
  color: #004400;
  }

/* Hover menu item. */
.menu a:hover 
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 0% -55px; 

  /* No underline. */
  text-decoration: none;
  }

/* Hover menu text. */
.menu a:hover span
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 100% -55px; 

  /* Make the text a nice dark green. */
  color: #004400;

  /* Move the text up a bit too. */
  padding-top: 5px;
  padding-bottom: 8px;
  }

/* Hover selected menu item. */
.menu #current a:hover 
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 0% -55px; 
  }

/* Hover selected menu text. */
.menu #current a:hover span
  { 
  /* Shift background image up to start of 2nd tab image. */
  background-position: 100% -55px; 

  /* Move the text up a bit too. */
  padding-top: 5px;
  padding-bottom: 8px;
  }

/* A software overview box. */
a.softwarebox
  {
  /* Create a square box. */
  display: block;
  height: 170px;
  width: 150px;
  margin: 10px;
  padding: 5px;

  float: left;

  /* Center the text. */
  text-align: center;

  border-style: dashed;
  border-width: 1px;
  border-color: #cccccc;
  }

/* Make the software box act like a button */
a.softwarebox:hover
{
  border-style: outset;
}

a.softwarebox:active
{
  border-style: inset;
}

/* Turn off underline. */
a.softwarebox,
a.softwarebox:hover,
a.softwarebox:active,
a.softwarebox:visited
  {
  text-decoration: none;
  }

/* The privacy table. */
.privacy th
  {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color:#88aa88;
  }

.privacy td
  {
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  border-bottom-color:#88aa88;
  }

/* Align big icons nicely. */
.bigicon
  {
  margin-bottom: -15px;
  }

/* A software details box. */
.detailsbox
  {
  /* Create a nicely spaced box. */
  display: block;
  margin: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;

  /* Put it on the right hand side of the window. */
  float: right;

  /* Put a muted border around it. */
  border-style: dashed;
  border-width: 1px;
  border-color: #cccccc;
  }

/* A fancy download button. */
.downloadbutton 
  {
  /* Try to make the cursor look nice. */
	cursor: pointer; 
	cursor: hand; 

  /* Fancy CSS button logic. */
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
	background: url(images/download-left.gif) no-repeat left top;
  display: block;

  padding-left: 11px;
  margin-left: 5px;
  margin-bottom: 10px;

  /* Use my dark green text. */
  color: #004400;
  }

.downloadbutton span 
  { 
  float: left;
  display: block;
	background: url(images/download-right.gif) repeat-x right top;

  padding-right: 25px;
  }

a.downloadbutton,
a.downloadbutton:hover,
a.downloadbutton:active,
a.downloadbutton:visited
  {
  text-decoration: none;

  border: none;
  }

/* Hover state CSS */
a.downloadbutton:hover
  { 
  background-position: left bottom;
  }

/* Hover state CSS */
a.downloadbutton:hover span
  { 
  background-position: right bottom;
  }

/* A wider button. */
.widebutton
  {
  width: 285px;
  }
  
.content .footer
  {
  visibility: hidden;
  width: 80%;
  }