body {
  background-color: #000;
background-image: url(images/bg.gif);
  background-repeat: repeat;
  overflow: hidden;
  image-rendering: pixelated;
}

@font-face {
    font-family: 'hp1pixels';
    src: url('hp1pixels.woff2') format('woff2'),
         url('hp1pixels.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#wrapper {
  width: 480px;
  margin: auto;
}

.mainheader {
  margin: 50px auto 60px auto;
  width: 257px;
  height: 29px;
  background-image: url(images/designenhund.png);
  background-repeat: no-repeat;
  background-size: 257px 29px;
  background-position: center;
}
.brb {
  margin: 0 auto;
  text-align: center;
  width: 257px;
  height: 29px;
  color: #fff; font-family: hp1pixels, verdana; 
  font-size: 80px; -webkit-font-smoothing: none; 
  -moz-osx-font-smoothing: grayscale; 
  letter-spacing: 0.1;
}


.mainheader a {
  display: block;
  width: 257px;
  height: 29px;
}

.mainheader-beta::before {
  width: 57px;
  height: 23px;
  content: url('images/betaheader.png');
  position: absolute;
  margin-top: -17px;
  margin-left: 164px;
}

#sekken {
  width: 30px;
  height: 28px;
  position: absolute;
  margin-top: 130px;
  margin-left: 380px;
}

#sekken:hover {
  cursor: pointer;
}

#seasons {
  width: 500px;
  height: 290px;
  margin: auto;
  z-index: -10 !important;
  position: relative;
}

.snapshot {
  display: none;
} 
#arrows {
  position: absolute;
  margin-top: -80px;
  width: 490px;
  cursor: pointer;
  user-select: none;
  z-index: 15 !important;
}
.next {
  right: 0;
  position: absolute;
}
.prev {
  left: 0;
}
.prev:hover, .next:hover {
  opacity: 0.7;
}

.switch {
-webkit-animation-name: switch;
-webkit-animation-duration: 1s;
animation-name: switch;
animation-duration: 1s;
}
    
#pelsfargen {
  z-index: -10 !important;
  position: absolute;
  margin-top:131px;
  margin-left:231px;
  width: 35px;
  height: 15px;
}

#hundeskygge {
  z-index: 5 !important;
  position: absolute;
  margin-top:133px;
  margin-left: 235px;
  width: 31px;
  height: 13px;
}
#bubble_border {
  z-index: 5 !important;
  position: absolute;
  margin-top: 85px;
  margin-left: 250px;
  width: 120px;
  height: 37px;
}
#bubble {
  z-index: 2 !important;
  position: absolute;
  margin-top: 43.5px;
  margin-left: 126px;
  width: 116px;
  height: 33px;
}
#hp_font {
  z-index: 10 !important;
  position: absolute;
  margin-top: 95.5px;
  margin-left: 257.5px;
  width: 94px;
  height: 10px;
}

#fargevelger { position: relative; height: 142px; width: 490px; margin: 0;}
#fargevelger table {padding-bottom: 15px; width: 150px; font-family: hp1pixels, hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1;  }
#fargevelger th { font-weight: normal; color: #fff; }
#fargevelger table input { width: 6em; height: 20px; color: #FFF; border: 1px solid #999; background: #262626; padding: 2px 5px; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; letter-spacing: 0.1;}
#fargevelger table input:focus { border-color: #FFF !important; color: #FFF !important; }
#fargevelger table input.short { width: 3em; text-align: center !important; }
#fargevelger button { width: 150px; height: 30px; border: 0px; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1; }

#fargevelger .panel {position: absolute; width: 150px;}

#fargevelger .panel.left { left: 0; width: 140px; }
#fargevelger .panel.center { height: 71px; bottom: 0; left: 50%; margin-left: -75px; }
#fargevelger .panel.right { right: 0; }

button:hover {
  cursor: pointer;
}

input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1;
}
input[type="text"]::-moz-placeholder { /* Firefox 19+ */
  color: #fff; opacity: 1; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1;
}
input[type="text"]:-ms-input-placeholder { /* IE 10+ */
  color: #fff; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1;
}
input[type="text"]:-moz-placeholder { /* Firefox 18- */
  color: #fff; font-family: hp1pixels, verdana; font-size: 20px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1;
}

button:focus {outline:0;}
input:focus {outline:0;}

::-webkit-scrollbar {
display: none;
}