body {
  color: #ffff99;
  background-color: #000000;
  background-image: url(images/star_bg.jpg);
  background-attachment: fixed;

}

@font-face {
  font-family: RoundStyleMiddle;
  src: url(fonts/RoundStyleMiddle.ttf);

}

@font-face {
  font-family: NovaRound;
  src: url(fonts/NovaRound.ttf);

}

@font-face {
  font-family: Railway;
  src: url(fonts/Railway.otf);

}

p {
  color: #ffff99;
  font-family: Railway, sans-serif;
  font-style: normal;
  font-size: 100%;
  text-align: justify;
  text-shadow: 0px 0px 6px #000000;

}

p.quote {
  font-family: NovaRound, serif;
  font-variant: small-caps;
  font-style: italic;
  font-size: 100%;

}

p.important {
  font-family: NovaRound, sans-serif;
  font-size: 115%;
  font-weight: bold;
  text-shadow: 0px 0px 6px #ffff99;

}

p.legal {
  color: #ffcc66;
  font-family: Railway, sans-serif;
  font-size: 80%;

}

p.error {
  color: #ffcc66;
  font-family: RoundStyleMiddle, sans-serif;
  font-size: 200%;
  font-weight: bold;
  text-shadow: 0px 0px 12px #ffcc66;

}

span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;

}

a {
  color: #ffffad;
  font-weight: bold;
  text-decoration: none;
  border: none;
  outline: none;

}

a:hover {
  color: #ffd685;
  font-weight: bold;
  text-decoration: none;
  border: none;
  outline: none;

}

div.backbox {
  background: rgba(26, 26, 15, 0.7);
  -webkit-border-radius: 16px 16px 16px 16px;
  -moz-border-radius: 16px 16px 16px 16px;
  border-radius: 16px 16px 16px 16px;
  margin: 24px;
  padding: 6px 14px 12px 14px;
  -webkit-box-shadow: 0px 0px 24px #cccc7a;
  -moz-box-shadow: 0px 0px 24px #cccc7a;
  box-shadow: 0px 0px 24px #cccc7a;

}

img.header {
  display: block;
  margin: 0px auto;

}

div.navtable {
  display: table;
  margin: 0px auto;

}

#navbar {
  padding: 0px;
  list-style: none;

}

#navbar li {
  float: left;
  margin: 0px;

}

#navbar li a, #navbar li span {
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 64px;

}

#navbar li a {
  font-size: 0;

}

#navbar li#navleft span {
  background: url(images/navbg.png) 0px 0px;
  width: 120px;

}

#navbar li#index a {
  background: url(images/navcrystals.png) 0px 0px, url(images/navbg.png) -119px 0px;
  width: 72px;

}

#navbar li#ueber a {
  background: url(images/navcrystals.png) -71px 0px, url(images/navbg.png) -191px 0px;
  width: 72px;

}

#navbar li#buch a {
  background: url(images/navcrystals.png) -143px 0px, url(images/navbg.png) -263px 0px;
  width: 72px;

}

#navbar li#downloads a {
  background: url(images/navcrystals.png) -215px 0px, url(images/navbg.png) -335px 0px;
  width: 72px;

}

#navbar li#navright span {
  background: url(images/navbg.png) -407px 0px;
  width: 120px;

}

#navbar li#index a:hover {
  background: url(images/navcrystals.png) 0px -63px, url(images/navbg.png) -119px 0px;

}

#navbar li#ueber a:hover {
  background: url(images/navcrystals.png) -71px -63px, url(images/navbg.png) -191px 0px;

}

#navbar li#buch a:hover {
  background: url(images/navcrystals.png) -143px -63px, url(images/navbg.png) -263px 0px;

}
#navbar li#downloads a:hover {
  background: url(images/navcrystals.png) -215px -63px, url(images/navbg.png) -335px 0px;

}

div.socialbox {
  position: fixed;
  left: 0%;
  bottom: 0%;

}

#social {
  background: rgba(204, 204, 122, 0.7);
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  margin: 0px;
  padding: 1px 0px;
  list-style: none;
  -webkit-box-shadow: 0px 0px 8px #cccc7a;
  -moz-box-shadow: 0px 0px 8px #cccc7a;
  box-shadow: 0px 0px 8px #cccc7a;

}

#social li {
  margin: 2px;

}

#social li a {
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  width: 24px;
  height: 24px;
  font-size: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  opacity: 0.6;

}

#social li a:hover {
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  transition: opacity 0.5s ease-in;
  opacity: 1.0;

}

#social li#rss a {
  background: url(images/social-rss.png);

}

#social li#googleplus a {
  background: url(images/social-googleplus.png);

}

#social li#twitter a {
  background: url(images/social-twitter.png);

}

#social li#linkedin a {
  background: url(images/social-linkedin.png);

}

#social li#xing a {
  background: url(images/social-xing.png);

}

.tooltip {}

.tooltip:after {
  color: #ffff99;
  background: rgba(0, 0, 0, 0.7);
  font-family: Railway, sans-serif;
  font-size: 85%;
  border: 1px solid #80804c;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  margin: -24px 0px;
  padding: 5px 11px;
  position: absolute;
  content: attr(text);
  -webkit-box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  box-shadow: 0px 0px 6px #000000;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden;

}

.tooltip:hover:after {
  -webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;

}

.navtooltip {}

.navtooltip:after {
  color: #ffff99;
  background: rgba(0, 0, 0, 0.7);
  font-family: RoundStyleMiddle, serif;
  font-size: 110%;
  text-shadow: 0px 0px 6px #ffff99;
  border: 3px ridge #80804c;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  margin: 0px 27px;
  padding: 6px 14px;
  position: absolute;
  content: attr(text);
  -webkit-box-shadow: 0px 0px 12px #000000;
  -moz-box-shadow: 0px 0px 12px #000000;
  box-shadow: 0px 0px 12px #000000;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden;

}

.navtooltip:hover:after {
  -webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;

}

.imgtooltip {}

.imgtooltip:after {
  color: #ffff99;
  background: rgba(0, 0, 0, 0.7);
  font-family: Railway, sans-serif;
  font-size: 85%;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
  border: 3px ridge #80804c;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  margin: 0px 27px;
  padding: 6px 14px;
  width: 260px;
  height: 430px;
  position: absolute;
  content: attr(text);
  -webkit-box-shadow: 0px 0px 12px #000000;
  -moz-box-shadow: 0px 0px 12px #000000;
  box-shadow: 0px 0px 12px #000000;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden;

}

.imgtooltip:hover:after {
  -webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;

}

.imgtooltip#coverfront:after {
  background: url(images/book-front-400.png) no-repeat center center, rgba(0, 0, 0, 0.7);

}

.imgtooltip#coverback:after {
  background: url(images/book-back-400.png) no-repeat center center, rgba(0, 0, 0, 0.7);

}

.thumbtooltip {}

.thumbtooltip:after {
  color: #ffff99;
  background: rgba(0, 0, 0, 0.7);
  font-family: Railway, sans-serif;
  font-size: 85%;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
  border: 3px ridge #80804c;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  margin: 0px 27px;
  padding: 6px 14px;
  width: 160px;
  height: 160px;
  position: absolute;
  content: attr(text);
  -webkit-box-shadow: 0px 0px 12px #000000;
  -moz-box-shadow: 0px 0px 12px #000000;
  box-shadow: 0px 0px 12px #000000;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden;

}

.thumbtooltip:hover:after {
  -webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;

}

.thumbtooltip#steka:after {
  background: url(downloads/ask-steka-thumb-160.png) no-repeat center center, rgba(0, 0, 0, 0.7);

}

.thumbtooltip#asklogo:after {
  background: url(downloads/askendum-logo-600dpi-alpha-thumb-160.png) no-repeat center center, rgba(0, 0, 0, 0.7);

}

.thumbsheettooltip {}

.thumbsheettooltip:after {
  color: #ffff99;
  background: rgba(0, 0, 0, 0.7);
  font-family: Railway, sans-serif;
  font-size: 85%;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
  border: 3px ridge #80804c;
  -webkit-border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  border-radius: 8px 8px 8px 8px;
  margin: 0px 27px;
  padding: 6px 14px;
  width: 388px;
  height: 320px;
  position: absolute;
  content: attr(text);
  -webkit-box-shadow: 0px 0px 12px #000000;
  -moz-box-shadow: 0px 0px 12px #000000;
  box-shadow: 0px 0px 12px #000000;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden;

}

.thumbsheettooltip:hover:after {
  -webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
  opacity: 1;
  visibility: visible;

}

.thumbsheettooltip#us2wp:after {
  background: url(downloads/us2wp-thumbs.png) no-repeat center center, rgba(0, 0, 0, 0.7);

}

.bottombanner {
  border: 2px inset #66663d;
  -webkit-border-radius: 12px 12px 12px 12px;
  -moz-border-radius: 12px 12px 12px 12px;
  border-radius: 12px 12px 12px 12px;
  padding: 10% 0px 0px 0px;
  height: 0px;
  -webkit-box-shadow: 0px 0px 6px #66663d;
  -moz-box-shadow: 0px 0px 6px #66663d;
  box-shadow: 0px 0px 6px #66663d;

}

#indexbanner {
  background: url(images/banner-index.png) no-repeat center center;
  background-size: 100%;

}

#ueberbanner {
  background: url(images/banner-ueber.png) no-repeat center center;
  background-size: 100%;

}

#buchbanner {
  background: url(images/banner-buch.png) no-repeat center center;
  background-size: 100%;

}

#downloadsbanner {
  background: url(images/banner-downloads.png) no-repeat center center;
  background-size: 100%;

}

.errorbox {
  background: rgba(0, 0, 0, 0.7);
  border: 5px ridge #80804c;
  -webkit-border-radius: 16px 16px 16px 16px;
  -moz-border-radius: 16px 16px 16px 16px;
  border-radius: 16px 16px 16px 16px;
  margin: 24px;
  padding: 6px 14px;
  -webkit-box-shadow: 0px 0px 24px #000000;
  -moz-box-shadow: 0px 0px 24px #000000;
  box-shadow: 0px 0px 24px #000000;

}