@font-face {
    font-family: Andale Mono;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Andale Mono.ttf') format('truetype');
}

@font-face {
    font-family: TeleTekst;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/TeleTekst.ttf') format('truetype');
}

.progress-bar {
	height: 18px;
	background: green;
}

/* Haupt div */
#div {
	width: 904px;
	height: 100%;
	top: 64px; left: 0; bottom: 0; right: 0;
	position: absolute;
	margin: auto;
}

/* HEADER */
#header {
	height: 220px;
	padding: 0;
  margin: 20px 0 0 0;
  text-transform: uppercase;
}

#header > #info p {
  float: left;
}

#info {
	width: 904px;
  padding: 16px 0 0 0;
  margin: -84px 0 0 0;
  height: 48px;
  position: fixed;
  background: hsla(0,0%,0%,1);
  z-index: 999;
  -webkit-padding-before: 35px;
}

#info div {
  float: left;
}

#info .uploads {
  float:left;
  width: 640px;
}

#langDE, #langEN {
  color: hsla(0,0%,0%,1);
  background: hsla(0,0%,100%,1);
  padding: 0 4px;
  cursor: pointer;
}

#info .datum {
  float:right;
}

#info p {
	font-size: 1.1rem;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

#headerBanner {
  width: 904px;
  height: 120px;
  left: 60px;
  margin: 0 0 28px 0;
}

#nav * a {
  text-decoration: none;
  color: hsla(0,0%,100%,1);
}

#nav {
	width: 904px;
}

#nav ul {
}

#nav ul a li {
	float: left;
	width: 301px;
  height: 28px;
  line-height: 28px;
	text-align: center;
	list-style: none;
  background: hsla(120,100%,50%,1);
  background-image: url(../img/navigation/nav_schablone.png);
  vertical-align: middle;
}

#nav ul a:nth-child(2n) li{
  width: 302px;
  background-image: url(../img/navigation/nav_schablone_inverse.png);
}

.clear {clear:both;}

/* GENERATOR */
#generator {
  width: 904px;
  margin: 0 0 140px;
}

#intro {
  width: 904px;
  left: 60px;
  margin: 0 0 24px 0;
}

#intro p {
  line-height: 2rem;
  font-size: 1rem;
  letter-spacing: -0.04rem;
}

#intro p span {
  text-transform: uppercase;
  color: hsla(120,100%,50%,1);

}

#content {
  margin: 0 56px 0 0;
	width: 448px;
  height: 336px;
  float: left;
  /*background-image: url('../img/dragdrop_space.png');*/
}

#buttonReset {
	display: none;
}

.origImageContainer {
	position: relative;
}

.usedImageContainer {
	position: relative;
}

#cropImage {
  width: 448px;
  height: 336px;
  position: absolute;
  z-index: 999;
}

.cropHint {
  margin: 2rem;
  overflow: hidden;
  width: 336px;
  /*height: 224px;*/
  position: absolute;
  z-index: 999;
  text-transform: uppercase;
}

.cropHint p {
  background: hsla(300,100%,50%,.6);
  box-shadow: 4px 2px 0 4px hsla(0,0%,0%,.5);
  color: hsla(0,0%,100%,1);
  font-size: 1.0rem;
  font-weight: bold;
}

.cropHint p span{
  background: hsla(240,100%,50%,.7);
}

#upImage {
}

.upImage, .origImage {
	width: 444px;
  height: 332px;
  border: 2px solid hsla(0,0%,100%,1);
  position: relative;
}

.origImage {
	visibility: hidden;
	display: none;
}

/*.upImage, .thumb {
    image-rendering:optimizeSpeed;             /* Legal fallback                 *
    image-rendering:-moz-crisp-edges;          /* Firefox                        *
    image-rendering:-o-crisp-edges;            /* Opera                          *
    image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) *
    image-rendering:optimize-contrast;         /* CSS3 Proposed                  *
    image-rendering:pixelate;
    -ms-interpolation-mode:nearest-neighbor;
}*/

#upCanvas {
  width: 444px;
  height: 332px;
  border: 2px solid hsla(0,0%,100%,1);
  position: relative;
}

input[type=button] {
	width: 100px;
	margin: 0 1rem 0 0;
	padding: 10px 0;
	border: none;
	background: hsla(0,0%,0%,.7);
	color: hsla(0,0%,100%,.9);
	font-family: 'Source Sans Pro', sans-serif;
}

form {
	margin: 1rem;
}

input[type=button]:active {
	background: hsla(0,0%,0%,.3);
	color: hsla(0,0%,100%,.7);
}

input[type=button]:disabled {
	background: hsla(0,100%,50%,.3);
	color: hsla(0,0%,100%,.7);
	font-style: italic;
}

/* SLIDER */
#sssliders {
  position: relative;
  width: 384px;
  float: right;
  height: 336px;
}

.cube {
  font-size: 1rem;
  width:384px;
  height:48px;
  padding: 0px 0px 50px 0px;
}

.cube label {
  height: 20px;
  text-transform: uppercase;
  border:none;
}

.cube label span:nth-of-type(2) {
  background: hsla(0,0%,100%,1);
  color: hsla(0,0%,0%,1);
  padding: 2px 8px;
}

.cube label:focus {
  outline:none;
}

.cube div {
  position: relative;
  top:24px;
  margin: 0px;
  z-index:999;
}

.ui-slider {
  z-index: -999;
  height:4px;
  border:none;
  background: hsla(0,0%,100%,1);
  width: 384px;
}

.ui-slider:before, .ui-slider:after {
}

.ui-slider:before {
  top:-1.4rem;
}

.ui-slider:after {
  bottom:-1.4rem;
}

/* "zurückgelegte Strecke" des Sliders */
.ui-slider-range {
}

.ui-slider .ui-slider-handle {
  /* handle Breite */
  padding-left:8px;
  background: hsla(120,100%,50%,1);
  cursor:pointer;
  position: relative;
  top: -8px;
}

#toUploadButton {
  background: url('../img/sssliders/upload.png');
  width: 182px;
  height: 40px;
}

#saveButton {
  height: 32px;
}

#cropButton {
  width: 108px;
  height: 32px;
  bottom: 0;
  background: url('../img/sssliders/save.png');
}

#savedButton {
  width: 134px;
  height: 40px;
  text-transform: uppercase;
}

#facebook, #download, #delete, #newPicture, #goBackButton {
  position: absolute;
  bottom: 0;
}

#delete {
  height: 32px;
  cursor: pointer;
}

#newPicture, #goBackButton {
  height: 40px;
  cursor: pointer;
}

#newPicture {
  bottom: 129px;
}

#download {
  background: url("../img/sssliders/download.png");
  width: 229px;
  height: 40px;
  bottom: 65px;
}

#facebook {
  background: url("../img/sssliders/facebook.png");
  width: 64px;
  height: 53px;
  bottom: 192px;
  cursor: pointer;
}

.sliderButton {
  color: transparent;
  position: absolute;
  bottom: 0;
  border: none;
  cursor: pointer;
}

/* GALLERY */
#galleryBanner {
  width: 100%;
  height: 120px;
  padding: 66px 0 0 0;
  margin: -66px 0 26px 0;
  background-position: bottom;
  background-repeat: no-repeat;
}

#galleryContent {
  margin: 0 0 24px 0;
}

#loadMoreArt {
  cursor: pointer;
  margin: auto;
  margin-top: 48px;
  margin-bottom: 150px;
  /*padding: 0 0 150px 0;*/
  /*width: 313px;*/
  height: 40px;
  /*background: no-repeat url('../img/gallery/loadmoreart.png');*/
}

.thumb {
  cursor: pointer;
  width: 164px;
  height: 123px;
  border: 2px solid hsla(0,0%,100%,1);
  float: left;
  /*background: url('../img/gallery/thumb.png');*/
  margin: 0 16px 16px 0;
}

.thumb img{
  width: 100%;
  height: 100%;
}

.thumb:nth-of-type(5n) {
  margin: 0 0 16px 0;
  }

/*.thumb:nth-of-type(5n):active,
.thumb:nth-of-type(5n+1):active,
.thumb:nth-of-type(5n+2):active,
.thumb:nth-of-type(5n+3):active,
.thumb:nth-of-type(5n+4):active {
  width: 532px;
  height: 409px;
  position: absolute;
}*/

/*.thumb:nth-of-type(5n):active .thumbBig,
.thumb:nth-of-type(5n+1):active .thumbBig,
.thumb:nth-of-type(5n+2):active .thumbBig,
.thumb:nth-of-type(5n+3):active .thumbBig,
.thumb:nth-of-type(5n+4):active .thumbBig {
  visibility: visible;
  position: absolute;
}*/

.thumbBig {
  z-index: 0;
  width: 532px;
  height: 409px;
  position: absolute;
  margin: -129px 0 0 -2px;
  border: 2px solid hsla(0,100%,100%,1);
}

.thumb:nth-of-type(1) .thumbBig{
  margin: -129px 0 0 -2px;
}

.thumb:nth-of-type(2) .thumbBig{
  margin: -129px 0 0 -186px;
}

.thumb:nth-of-type(3) .thumbBig{
  margin: -129px 0 0 -186px;
}

.thumb:nth-of-type(4) .thumbBig{
  margin: -129px 0 0 -186px;
}

.thumb:nth-of-type(5) .thumbBig{
  margin: -129px 0 0 -370px;
}

.thumb:nth-of-type(5n+6) .thumbBig{
  margin: -272px 0 0 -2px;
}

.thumb:nth-of-type(5n+7) .thumbBig{
  margin: -272px 0 0 -186px;
}

.thumb:nth-of-type(5n+8) .thumbBig{
  margin: -272px 0 0 -186px;
}

.thumb:nth-of-type(5n+9) .thumbBig{
  margin: -272px 0 0 -186px;
}

.thumb:nth-of-type(5n+10) .thumbBig{
  margin: -272px 0 0 -370px;
}

.thumb:nth-last-of-type(5) .thumbBig{
  margin: -415px 0 0 -2px;
}

.thumb:nth-last-of-type(4) .thumbBig{
  margin: -415px 0 0 -186px;
}

.thumb:nth-last-of-type(3) .thumbBig{
  margin: -415px 0 0 -186px;
}

.thumb:nth-last-of-type(2) .thumbBig{
  margin: -415px 0 0 -186px;
}

.thumb:nth-last-of-type(1) .thumbBig{
  margin: -415px 0 0 -370px;
}

/*.thumb:nth-of-type(5n+1):active ~ .thumb:nth-of-type(5) {
  left: 380px;
}*/

/*.thumb:nth-of-type(5n+3):active {
  left: 184px;
}

.thumb:nth-of-type(5n):active,
.thumb:nth-of-type(5n+4):active {
  left: 368px;
}

}*/

/*
.thumb:nth-of-type(5n):active,
.thumb:nth-of-type(5n+1):active,
.thumb:nth-of-type(5n+2):active,
.thumb:nth-of-type(5n+3):active,
.thumb:nth-of-type(5n+4):active {
  width: 532px;
  height: 409px;
}

.thumb:nth-of-type(5n):active {
  margin: 0 0 0 0;
}

.thumb:nth-of-type(5n+1):active + .thumb:nth-of-type(5n){
  margin: 0 16px 0 0;
}

.thumb:nth-of-type(5n):active {
  margin: 0 0 0 0;
}

.thumb:nth-of-type(5n):active {
  margin: 0 0 0 0;
}

.thumb:nth-of-type(5n):active {
  margin: 0 0 0 0;
}*/

.scrollDiv {
  float:left;
  clear:both;
  margin: -495px 0 0 0;
}

#ausstellung {
  padding-top: 160px;
  margin-top: -160px;
}

#ausstellung h1 {
  width: 30%;
  line-height: 2.2rem;
  margin: auto;
  margin-bottom: 1.6rem;
  color: hsla(180,0%,0%,1);
  background: hsla(180,100%,50%,1);;
}

#ausstellung * a {
  text-decoration: none;
}

#hintergrund {
  color: hsla(60,100%,50%,1);
}

#ausstellung, #hintergrund {
  text-align: center;
}

#ausstellung p:last-child, #hintergrund p {
  margin: auto;
  margin-bottom: 80px;
  padding: 0 0 0 0;
  width: 80%;
}

#ausstellung p {
  padding: 0 0 24px 0;
  width: 600px;
  margin: auto;
}

#ausstellung p:nth-of-type(1),
#ausstellung p:nth-of-type(1) a {
  color: hsla(300,100%,50%,1);
  margin: auto;
}

#ausstellung p:nth-of-type(2),
#ausstellung p:nth-of-type(2) a {
  color: hsla(120,100%,50%,1);
}

#ausstellung p:nth-of-type(3),
#ausstellung p:nth-of-type(3) a {
  color: hsla(60,100%,50%,1);
}

#ausstellung p:nth-of-type(4),
#ausstellung p:nth-of-type(4) a {
  color: hsla(180,100%,50%,1);
}

#hintergrund p {
  padding: 0 0 120px 0;
}

#ard {
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin: auto;
  padding: 60px 0 100px 0;
}

#ard p {
  font-size: 1.2rem;
}

#ard p:nth-of-type(1){color:hsla(300,100%,50%,1);}
#ard p:nth-of-type(2){color:hsla(180,100%,50%,1);}
#ard p:nth-of-type(3){
  color:hsla(060,100%,50%,1);
  padding: 0 0 40px 0;
}

#ardLogo {
  margin: auto;
  width: 254px;
  height: 43px;
  margin-bottom: 16px;
  background: url('../img/footer/ard.png');
}

#plazz {
  color: hsla(0,100%,50%,1);
  margin: auto;
  margin-bottom: 16px;
  text-align: center;
  vertical-align: middle;
}

#plazzPara {
  line-height: 2rem;
}

#plazzLogo {
  background: url("../img/footer/plazz.png");
  width: 98px;
  height: 24px;
  margin: auto;
  margin-bottom: 100px;
}

#impressum {
  text-align: center;
  padding: 0 0 100px 0;
}

#impressum p:nth-child(1) {
  text-transform: uppercase;
  line-height: 3rem;
  cursor: pointer;
}

#impressum p:nth-child(1):hover {
  color: hsla(300,100%,50%,1);
}


#impressum p:nth-child(2) {
  width: 50%;
  margin: auto;
}

/* typo */
h1 {
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 4rem;
}

p {
  font-size: .85rem;
  line-height: 1.8rem;
}

a {
  text-decoration: none;
  border: none;
}

.credits a {
  position:relative;
  display:inline-block;
  color:#529e0e;
  text-decoration:none;
}
.credits a:after {
  content:'';
  position:absolute;
  left:-1.5%;
  bottom:-1px;
  width:0%;
  height:1px;
  background:#529e0e;
  -webkit-transition:width 0.1s;
  -moz-transition:   width 0.1s;
  -o-transition:     width 0.1s;
  transition:        width 0.1s;
}
.credits a:hover::after {
  width:103%;
}

#divv {
}

/* base */
html, body {
  height:100%;
  color: hsla(0,0%,100%,.9);
  /*background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.08)), to(rgba(0,0,0,0.08)));
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.08));
  background-image:   -moz-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.08));
  background-image:     -o-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.08));
  background-image:        linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.08));*/
  background-color: hsla(0,0%,0%,1);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:0% 0%;
  font-family: 'Andale Mono', Roman;
  letter-spacing: 0;
  font-size: 1.1rem;
  font-weight: bolder;
}

* {
  margin:0px;
  padding:0px;
}


/* jQuery UI ... */
.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: .2em;
  outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
  padding: .4em 1em;
  position: relative;
}
.ui-dialog .ui-dialog-title {
  float: left;
  margin: .1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: .3em;
  top: 50%;
  width: 21px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: .5em 1em;
  background: none;
  overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: .5em;
  padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em .4em .5em 0;
  cursor: pointer;
}
.ui-dialog .ui-resizable-se {
  width: 12px;
  height: 12px;
  right: -5px;
  bottom: -5px;
  background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}