/* Default */
* {
 margin: 0;
 padding: 0;
 font-family: verdana, arial, sans;
 text-align: justify;
}

html {
 min-height: 101%;
}

body {
  padding: 0;
}

.center {
  display: block;
  text-align: center;
}

acronym {
  border-bottom: 1px dotted gray;
}


.topHeader, .from {
  display:none;
}

/* Content */
.content {
  margin: 1em;
  line-height: 130%;
  display: block;
}

.mainContent {
  float: left;
  width: 75%;
}

.mainSide {
  float: right;
  width: 20%;
}

.content * {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding: 0.2em 0 0.2em 0;
}

.frontContent {
  float: left;
  width: 60%;
}

.frontSide {
  float: right;
  width: 35%;
  background-color: whitesmoke;
}

.frontSide * {
  background-color: whitesmoke;
}

.frontSide .frontTitle {
  display: block;
  margin: 0.5em 1em 0 1em;
  font-weight: bold;
}

.frontSide li {
  margin-right: 1em;
}

.frontSide .miniScreenshot {
  width: 90%;
  margin: 0.5em 0 0.5em 0;
  border: 1px solid #888;
  padding: 0;
}

.frontSide .divider {
  margin: 0 1em 0 1em;
  border-bottom: 2px solid gray;
}

.frontSide .download {
  margin: 0.5em 1em 0.5em 0;
  padding-left: 80px;
}

.download {
  font-size: 100%;
  padding-left: 80px;
  background-image: url('../images/pdf_icon.gif');
  background-repeat: no-repeat;
  background-position: 1em center;
  height: 50px;
  text-align: left;
  cursor: hand;
}

.frontSide .word {
  background-image: url('../images/word_icon.gif');
}

.frontSide .download a {
  text-decoration: none;
  padding: 0;
  font-weight: bold;
}



.content h1 {
  font-size: 150%;
  margin-bottom: 0.5em;
}

.content h2 {
  font-size: 120%;
  margin-left: 1em;
  margin-bottom: 0.3em;
}

.content h3 {
  font-size: 100%;
  margin-left: 2em;
}

.content p, li {
  font-size: 90%;
  margin-left: 3em;
}

.frontContent ul {
  margin: 0 0 1.5em 2em;
}

.content p {
  margin-bottom: 1.3em;
}

.break {
  display: block;
  margin-left: -10em;
  padding: 15em;
  clear: both;
}

.anchor {
  clear: both;
}

.alert {
  border: 5px dashed crimson;
  
  background-color: mistyrose;
  
  margin: 2em;
  padding: 1.5em 1.5em 0em 1.5em;
}

.alert p, .alert h2 {
  margin-left: 0;
}

.alert .keydesc {
  font-size: 120%;
  color: lightcoral;
}

.alert .keydesc strong {
  color: firebrick;
} 

/* Header */
.header {
  padding-top: 2em;
  background-color: black;
  clear: both;
  position: relative;
  border-bottom: 1px solid white;
}

.header img {
  border: none;
  padding: 0;
  margin: 0 5px 0 5px;;
  vertical-align: middle;
  z-index: 200;
}

.wow {
  position: absolute;
  color: whitesmoke;
  top: 3.5em;
  right: 3em;
  font-style: italic;
  padding-right: 58px;
  line-height: 48px;
  background: no-repeat top right;
}

.wow a {
  color: whitesmoke;
}

.wow a:hover {
  text-decoration: none;
}


/* Hints */

.default {
  padding-right: 0px;
}

.widget {
  background-image: url('../images/widget.gif');
}

.widget2 {
  background-image: url('../images/widget2.gif');
}

.mic {
  background-image: url('../images/microphone.gif');
}

.mail {
  background-image: url('../images/envelope.gif');
}

.rubiks {
  background-image: url('../images/rubiks-cube.gif');
}

.php {
  background-image: url('../images/php_icon.gif');
}

.pdf {
  background-image: url('../images/pdf_icon.gif');
}

/* Tabs */
.tabs {
  text-align: right;
  margin-right: 3em;
  margin-bottom: 0.15em;
  top: -1.35em;
  z-index: 1000;
}

.tabs a {
  padding: 0.2em 0.7em 0.14em 0.7em;
  border: 2px solid black;
  border-bottom: none;
  text-decoration: none;
  background-color: white;
  vertical-align: bottom;
  color: black;
}

.tabs a sup {
    color: firebrick;
}

.tabs a.selected {
  border: 2px solid silver;
  border-bottom: 2px solid white;
  text-decoration: none;
  font-size: 110%;
  color: black;
}

.tabs a:hover {
  border: 2px solid silver;
  border-bottom: 2px solid white;
  background-color: white;
}

.headerLine {
  border-bottom: 2px solid black;
  margin: 0; x: 1em 0 1em; 
}

/* Contact Form */
form {
  margin-left: 3em;
}

form .pair {
  clear: both;
}

form .pair span {
  float: left;
  margin-right: 0.4em;
}

form .pair textarea {
  width: 65%;
  height: 20em;
}

form label {
  display: block;
  float: left;
  width: 30%;
}

input {
  width: 65%;
}

.button {
  width: auto;
  text-align: center;
}


/* Footer */
#footer p {
  text-align: center;
  font-size: 70%;
  margin: 0;
  padding-top: 5em;
  padding-bottom: 15em;
  clear: both;
}