/* THIS IS NOT BEAUTYFUL CSS, I KNOW! */

body, img {
  padding: 0;
  margin: 0;
  border: none;
  border-width: 0;
  background-color: black;
}

body.blackBackdrop {
  background-color: black;
}

body {
  overflow: hidden;
  overflow-y: scroll;
  position: fixed;
}

h1 {
  color: white;
  font-size: 52px;
  font-family: 'EurostileBoldExtendedTwo', Verdana, sans-serif;
  margin: 0 0 30px 0;
}

h2 {
  font-size: 22px;
  font-family: 'EurostileBoldExtendedTwo', Verdana, sans-serif;
  margin: 0 0 5px 0;
}

h3 {
  font-size: 17px;
  font-family: 'EurostileExtendedTwo', Verdana, sans-serif;
  margin: 0 0 5px 0;
}

p, ul {
  margin: 0 0 5px 0;
}

body, .testbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: black;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 150%;
}

/*body:not(.blackBackdrop) {*/
/*  background-color: #eaeaea;*/
/*  background-image: -moz-linear-gradient(top, white, #bbb); /* FF3.6 */*/
/*  background-image: -webkit-gradient(linear, left bottom, left top, from(0, white), to(1, #81a8cb)); /* Safari 4+, Chrome 2+ */*/
/*  background-image: -webkit-linear-gradient(top, white, #bbb); /* Safari 5.1+, Chrome 10+ */*/
/*  background-image: -o-linear-gradient(top, white, #bbb); /* Opera 11.1+ */*/
/*  background-image: -ms-linear-gradient(top, white, #bbb); /* IE10+ */*/
/*  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#B0B0B0'); /* IE6,IE7 */*/
/*  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#B0B0B0')"; /* IE8+ */*/
/*  background-image: linear-gradient(top, white, #bbb);*/
/*  background-attachment: fixed;*/
/*}*/

body.frontpage {
  cursor: pointer;
}

.testbox {
  width: 100px;
  height: 100px;
}

#outerbox {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
}

#middlebox {
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
  text-align: center;
  width: 1000px;
  height: auto;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
}

#middlebox.visible {
  opacity: 1;
}

#logobox {
  margin: 0 auto;
  width: 481px;
  height: 516px;
}

article {
  position: relative;
  background-color: rgba(222,222,222,0.5);
  border-radius: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0,0,0,0.1);
  padding: 10px 20px 5px 20px;
  margin: 20px 0;
}

#luc_at_card {
  margin: 0 auto;
  background: url(/gfx/luc.at_white.png) center center no-repeat;
  width: 478px;
  height: 256px;
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.2, transparent), to(rgba(255,255,255,0.5)));
  -webkit-box-reflect: below 1px -webkit-linear-gradient(top, transparent, transparent 20%, rgba(255,255,255,0.5) );
  -moz-box-reflect: below 1px -moz-linear-gradient(top, transparent, transparent 20%, rgba(255,255,255,0.5) ); /* we can hope for it ... */
}

#adressbox {
  color: white;
  width: 100%;
  text-align: center;
  margin-top: 28px;
}

#counter {
  font-size: 7px;
  color: #111;
}

#menubox,
.contentbox {
  position: absolute;
  text-align: center;
  width: 100%;
  left: 0;
  top: 50px;
}

a,
.divider {
  text-decoration: none;
  color: #b00;
}

a:visited {
  color: #500;
}

a:hover {
  color: #FF6600;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bulleted>li:before { content: '• '; } /* hack for centered bullet list! */

.ci-icon, .macupdate_bletschn + div { display: inline-block; position: relative; overflow: visible; }
.ci-icon { width: 128px; height: 128px; }
.ci-icon::before, .macupdate_bletschn + div::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: transparent;
  background-image: -webkit-radial-gradient(
    50% 50%,
    ellipse closest-side,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 70%,
    transparent
  );
  background-image: -moz-radial-gradient(
    50% 50%,
    ellipse closest-side,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 70%,
    transparent
  );
  width: 100%;
  height: 10%;
  z-index: -1;
}

.darkback {
  background: url(/gfx/luc2.png) center center no-repeat;
  display: block;
}

.darkback:hover {
  background-position: center center;
}

.lightback {
  display: block;
  position: relative;
  width: 1215px;
  height: 516px;
  margin: 0 auto;
}

.ext {
  font-family: 'EurostileExtendedTwo', Verdana, sans-serif;
}

.extb {
  font-family: 'EurostileBoldExtendedTwo', Verdana, sans-serif;
}

.blocky {
  width: 666px;
  text-align: center;
  margin: 40px auto;
}

.small {
  font-size: 70%;
  line-height: 125%;
}

#bottomnote,
.bottomnote {
  position: absolute;
  bottom: 0;
  width: 500px;
  left: 50%;
  margin-left: -250px;
  z-index: 10;
}

.alert {
  color: #d40;
}

.macupdate_bletschn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mirror, .macupdate_bletschn + div {
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.7)));
  -webkit-box-reflect: below 1px -webkit-linear-gradient(top, transparent, transparent 50%, rgba(255,255,255,0.7) );
  -moz-box-reflect: below 1px -moz-linear-gradient(top, transparent, transparent 50%, rgba(255,255,255,0.7) ); /* still waiting ...*/
}

.macupdate_bletschn > a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.blocky.small {
  display: none;
}

/* macupdate rating has crazy inline styles*/
div[style*="badge_bg.png"] {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hundred {
  display: inline-block;
  margin-bottom: 40px;
  position: relative;
  width: 100px;
  height: 100px;
}

.footshadow {
  background: transparent -webkit-gradient(radial, center center, 0, center center, 60, from(rgba(0,0,0,.7)), to(transparent));
  background: transparent -moz-radial-gradient(center, circle 60px, rgba(0,0,0,.7), transparent);
  width: 120%;
  height: 100%;
  position: absolute;
  left: -10px;
  bottom: -50px;
  z-index: -1;
  -webkit-transform: scaleY(.1);
}

.burning {
  width: 100%;
}

#bottom {
  position: fixed;
  bottom: 0px;
  width: 1000px;
}

@font-face {
  font-family: Mammamia;
  src: url("/fnt/Diavlo_II_37/Diavlo_MEDIUM_II_37.otf") format("opentype");
}

@font-face {
  font-family: 'EurostileExtendedTwo';
  src: url("/fnt/Euros/EurosExtTwo.eot");
  src: url('/fnt/Euros/EurosExtTwo.eot?#iefix') format('embedded-opentype'),
  url('/fnt/Euros/EurosExtTwo.woff') format('woff'),
  url('/fnt/Euros/EurosExtTwo.ttf') format('truetype'),
  url('/fnt/Euros/EurosExtTwo.svg#Eurostile-ExtendedTwo') format('svg');
}

@font-face {
  font-family: 'EurostileBoldExtendedTwo';
  src: url('/fnt/Euros/EurosBolExtTwo.eot');
  src: url('/fnt/Euros/EurosBolExtTwo.eot?#iefix') format('embedded-opentype'),
  url('/fnt/Euros/EurosBolExtTwo.woff') format('woff'),
  url('/fnt/Euros/EurosBolExtTwo.ttf') format('truetype'),
  url('/fnt/Euros/EurosBolExtTwo.svg#Eurostile-BoldExtendedTwo') format('svg');
}

.dekoElement {
  position: fixed;
/*  width: 200px;*/
/*  height: 200px;*/
  border-radius: 100px;
/*  margin: -100px;*/
  z-index: -10;
  background-color: transparent;
}

ul.sample li {
  width: 200px;
  height: 200px;
  padding: 9px;
  border: 1px solid rgba(0,0,0,0.5);
  background-color: transparent; /*rgba(255,255,255,0.3);*/
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
  border-radius: 10px;
  float: left;
  margin-right: 26px;
  margin-bottom: 26px;
}

ul.sample li:last-child {
  margin-right: 0;
}
ul.sample li:nth-child(4) {
  margin-right: 0;
}

ul.sample li img {
  width: 200px;
  height: 125px;
  box-shadow: 0 3px 7px rgba(0,0,0,0.4);
  margin-bottom: 10px;
}

article:after {
  content: '-';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.kulerSetName {
  margin: 10px;
  color: #333;
}

@media screen and (max-device-width: 480px) {
  #middlebox {
    width: 300px;
    opacity: 1;
    -webkit-transition: none;
  }

  h1 {
    font-size: 26px;
  }
  
  #logobox {
    margin: 0 auto;
    width: 300px;
    height: 322px;
  }
  
  #luc_at_card {
    margin: 0 auto;
    background: url(/gfx/luc.at_white.png) center center no-repeat;
    width: 300px;
    height: 156px;
    background-size: 100%;
    -webkit-box-reflect: none;
  }
  
  .bottomnote {
    width: 300px;
    margin-left: -150px;
    top: 190px;
  }
article {
border-radius: 7px;
background-color: rgba(255,255,255,0.9);
}
}