/* 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: "TrebuchetMS", Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  text-align: left;
  line-height: 18px;
  
  /* 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;
  }

/* 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. */

.page
  {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  }
  
/* Header area. */
.header
  {
  }

/* The logo. */
.logo
  {
  float: left;
  width: 165px;
  height: 68px;
  }

/* The language option control. */
#language_menu
  {
  position: fixed;
  z-index: 2000;
  display: block;
  height: 50px;
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  }

.language_option
  {
  width: 70px;
  height: 38px;

  float: right;
  text-align: center;
  
  border: 1px dashed #aaccaa;
  background-color: #bbeebb;
  border-radius: 5px;
  }
  
.language_option a
  {
  font-weight: bold;
  color: #88aa88;
  line-height: 1.4em;
  text-decoration: none;
  }
  
.language_option a:hover,
.language_option a:active
  {
  text-decoration: underline;
  }
  
/* Main content. */
.content
  {
  clear: both;
  
  position: fixed;
  width: 650px;
  top: 90px;
  bottom: 10px;
  z-index: 1000;
  
  /* Space it nicely. */
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 65px;

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

/* Footer area. */
.footer
  {
  width: 650px;
  margin-left: auto;
  margin-right: auto;

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

  /* Put the footer at the bottom. */
  position: absolute;
  bottom: 1px;
  height: 65px;
  z-index: 2000;

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

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

  /* Well, it's not that important. */
  font-size: 12px;
  line-height: 14px;

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

  /* Fancy background to let people know there is more content. */
  background:
    -webkit-gradient(
      linear,
      center top,
      center bottom,
      from(rgba(255,255,204,0.0)),
      color-stop(15%, rgba(255,255,204,.5)),
      color-stop(30%, rgba(255,255,204,1.0)),
      to(rgba(255,255,204,1.0)));
  }

/* 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. */
  float: right;
  clear: right;
  height: 68px;
  width: 450px;
  position: relative;
  
  /* A pleasant font. */
  font-family: "TrebuchetMS-Bold", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  }

/* The menu list itself. */
.menu ul
  {
  /* Turn off the bullet. */
  list-style-type: none;
  position:absolute;
  bottom: 0px;
  right: 0px;

  /* 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 img
  {
  display: none;
  }

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

  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  
  border: 2px solid #d8d8b5;
  background: #ccffcc;
  border-radius: 7px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: 1px solid #d8d8b5;

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

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

.menu a
  {
  -webkit-transition: padding-top .2s;
  }
  
.menu a span
  {
  -webkit-transition: top .2s;
  }
  
/* Selected menu item. */
.menu #current a
  { 
  /* Make the text a nice dark green. */
  color: #004400;

  background: #ffffcc;

  padding-bottom: 3px;
  border-bottom: none;
  }

/* Selected menu text. */
.menu #current a span
  { 
  /* Make the text a nice dark green. */
  color: #004400;
  }

/* Hover menu item. */
.menu a:hover 
  { 
  /* No underline. */
  text-decoration: none;

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

  background: #ffffcc;
  padding-top: 6px;
  }

/* Hover menu text. */
.menu a:hover span
  {
  position: relative;
  top: -4px;
  }

/* Hover selected menu item. */
.menu #current a:hover 
  { 
  padding-top: 2px;
  }

/* Hover selected menu text. */
.menu #current a:hover span
  { 
  top: 0px;
  }

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

  float: left;

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

  border-style: dashed;
  border-width: 1px;
  border-color: #aaaaaa;
  border-radius: 10px;
  
  -webkit-transition: box-shadow .5s;
  -webkit-transition: background-color .5s;
  }

/* Make the software box act like a button. */
a.softwarebox:hover
  {
  border-color: transparent;
  background-color: #eeeebb;
  box-shadow: inset 0px 0px 2px 2px transparent;
  box-shadow: inset 0px 0px 2px 2px #aaa;
  }

a.softwarebox:active
  {
  border-color: transparent;
  background-color: #eeeebb;
  box-shadow: inset 0px 0px 2px 2px transparent;
  box-shadow: inset 0px 0px 2px 2px #aaa;
  }

/* 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;
  margin-right: 15px;
  }

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

  text-align: center;
  
  /* 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;
  }

/* Add some space. */
.detailsbox img
  {
  margin: 10px;
  }
  
/* Tighten things up. */
.detailsbox h2
  {
  font-size: 1.1em;
  margin: 5px;
  }
  
/* Set the size of the Mac App Store badge. */
.macappstorebadge
  {
  height: 50px;
  width: 153px
  }
  
/* A fancy download button. */
.downloadbutton 
  {
  /* Try to make the cursor look nice. */
	cursor: pointer; 
	cursor: hand; 

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

  padding-left: 11px;

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

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

  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;
  }

