@import 'borderbody.css';
@import 'loader.css';
@import 'defaults.css';
@import 'speech.css';
body {
   min-width:1921px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1920px;            /* As IE6 ignores !important it will set width as 1000px; */
height:100%;
overflow:hidden; 
 /*
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
  */

/*background-image:url(imagesrc);
background-image:url(http://djreason.de/NEU/images/bg2bec.png); */
background-image:url(http://djreason.de/NEU/images/XXXbg_turn_blurred.jpg);  
background-attachment:no-scroll; background-repeat:no-repeat;
background-size: cover ;
/*background-position:0%  480px ;*/
background-position:center top;
bottom:20px;
background-color:#AFAFAF; /*#98838F*/

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#610060+0,98838f+2,98838f+100 */
/*
background: rgb(97,0,96);  
background: -moz-linear-gradient(top,  rgba(97,0,96,1) 0%, rgba(152,131,143,1) 2%, rgba(152,131,143,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(97,0,96,1) 0%,rgba(152,131,143,1) 2%,rgba(152,131,143,1) 100%); 
background: linear-gradient(to bottom,  rgba(97,0,96,1) 0%,rgba(152,131,143,1) 2%,rgba(152,131,143,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#610060', endColorstr='#98838f',GradientType=0 );  

font-family: "Amsterdam";
src: local("Amsterdam Graffiti, Normal"), url("http://djreason.de/ttf/amsterdam.ttf") format("TrueType");
/*ont-family : Helvetica, Helv;*/
font-family: "Philly Sans";
src: local("Philly Sans, Regular"), url("http://djreason.de/ttf/PhillySans-Regular.otf") format("OpenType");
color : white;
font-size:28px;
link:white;
text-decoration : none;
text-align : center;
/*text-shadow:1px 2px black;*/
height:100%;
min-height: 100%;
 
z-index:2;/*
animation:example 5s
transition: all 1.5s linear;*/
-ms-user-select: None;
-webkit-user-select: None;
-moz-user-select: None;
-o-user-select: None;
}

.wsf, @font-face {
font-family: "WildBasic";
src: local("Wildbasic"), url("http://djreason.de/ttf/WildBasic_free.ttf") format("TrueType");

}
span:hover {color:#800080;}
img.vrtt {
position:absolute;
top:128px;
right:15%;
filter:blur(2px);
animation:shake 1s ease-out infinite;
transition: all .2s ease-in-out;
}
.vrtt:hover {
filter: hue-rotate(3.142rad);
 transform: scale(1.5);width:350px;
}
img.tooltip ~ div {display:none;position:absolute;}
img.tooltip:hover ~ div {display:block;position:absolute; width:64px;height:64px;background-color:black;border-radius:24px;color:white;z-index:+999;}

.sticker:hover{animation:shake 1s ease-out infinite;max-width:192px;}
.hvr:hover { animation:shake 1s ease-out infinite; max-width:92px;}
.sticker {transition: top 2.5s linear;}

@keyframes shake {
    0% { transform:rotate(0deg); }
    33%   { transform:rotate(5deg);width:340px;filter:blur(0px);
 }
    66% { transform:rotate(-5deg);width:320px;filter:blur(2px);
  }
 100% { transform:rotate(0deg); }

}


#lnxweb {position:fixed;bottom:10px;left:10px;}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.main {
    position:relative;
    /*height:150px;
    width:auto;*/
 top:350px;
}

.main img {
    position:absolute;
    right:0;
    top:0;
    filter:saturate(55%);
     width:85%;
}
 #main, .main {
  background-image:url(/NEU/images/bg2bec.png);   /**/
    background-size: cover;
background-attachment:no-scroll;
background-repeat:no-repeat;
background-size: 100% ;
/*background-position:0%  480px ;*/
background-position:center 350px;
bottom:20px;

        -webkit-animation:fadein 2s linear;  
       -moz-animation:fadein 2s linear; 
        -ms-animation:fadein 2s linear;  
         -o-animation:fadein 2s linear; 
            animation:fadein 2s linear;/**/
transition:2s; 
 
}

/**/
 

@keyframes example {
    from {background-color: black;}
    to {background-color: #AFAFAF;}
}

@font-face{
font-family: "Amsterdam";
src: local("Amsterdam Graffiti, Normal"), url("http://djreason.de/ttf/amsterdam.ttf") format("TrueType");
}
@font-face{
 font-family: "Sketch Block";
src: local("Sketch Block"), url("/ttf/Sketch_Block.ttf") format("TrueType");
}
@font-face {
font-family: "Velino Poster";
src: url("/ttf/VelinoPoster-Regular.otf") format("opentype");
}
@font-face {
font-family: "Philly Sans";
src: url("/ttf/PhillySans-Regular.otf") format("opentype");
}

.sketch {
   font-family: "Sketch Block";
src: local("Sketch Block"), url("/ttf/Sketch_Block.ttf") format("TrueType");
  position:absolute;
  z-index:3;
  top:0px;
}

.mltw {
font-family: "Velino Poster";
src: url("/ttf/VelinoPoster-Regular.otf") format("opentype");
  position:absolute;
  z-index:3;

}

.mltw:hover {  color:#3E2153;text-shadow:1px 2px 3px #EB1FD1;}

.audico {padding:4px;
margin:4px;
}
.audico:hover {  
background: -moz-radial-gradient(center, ellipse cover, rgba(235,31,209,1) 0%, rgba(125,185,232,0) 70%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(235,31,209,1) 0%,rgba(125,185,232,0) 70%);
background: radial-gradient(ellipse at center, rgba(235,31,209,1) 0%,rgba(125,185,232,0) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb1fd1', endColorstr='#007db9e8',GradientType=1 ); 
  background-blend-mode: multiply; 
  mix-blend-mode: multiply;
/*  box-shadow: #222 0.2em 0.2em 1em;*/
   filter:           brightness(135%)
          contrast(120%);
transition:all .5s linear;

}

#grayout {
   position:fixed; 
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
    background: black; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(black, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(black, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(black, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(black, transparent); /* Standard syntax */
   opacity: 0.9;
   z-index: 20;
}

#grayout {
   filter: alpha(opacity=90);
}
 
* html #grayout {
   position: absolute;/**/
}

#ajcontent {
 background: url('/NEU/images/sketchbook.png');
overflow-y: scroll:
position:absolute;
background-repeat:no-repeat;
/*  background-color:gray;*/
/*  border:.1px solid #00FFFF;*/
   padding-top:99px;
padding-left:80px;
padding-right:80px;
  display: block;
  margin-left: auto;
  margin-right: auto; 
 margin: auto;
width:1280px;
height:939px;
/*
max-width:1280px;
max-height:939px;
min-width:1280px;
min-height:939px;*/
color:#0b0b0b;
background-size: 100%;
/*  border-radius:20px;*/
background-position: center;
/*  box-shadow:10px 10px  10px black;*/
filter: drop-shadow(10px 10px 0.75rem white);
z-index:+2;
}
.modalaudio {left:2px;padding:4px;}
.modalaudio:hover {background: rgba(112,128,144, .7)}
.td {
text-align : center;
margin-left : auto;
margin-right : auto;
text-color:gray;
}
input[type="submit"] {
  /*color:white;*/
  background:url(../images/.png) }
input[type="submit"].hover { 
  color:black;
  background:url(../images/.png) }
  select,option,submit{
	color:white;
        background-color:black;  
	border-radius: 15px 15px 15px 15px;
     
  }
#tblhov tr:hover, tr:hover #tblhov, #tblhov:hover{
  background-color: #00FFFF;
}

area.rothov:hover , #idv:hover, area:hover .rothov:hover, #rotate:hover , area:hover, .rothov:hover, .rotate:hover, map:hover{
  
    -webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
  
}
  
.button{ 
  color:black;
  background:url(../images/.png); 
	color:white;
        background-color:black;  
	border-radius: 15px 15px 15px 15px;
     
  }  
  
  input {

    color: white;
    background-color: black;
    font-family: monospaced;
    border-radius: 15px 15px 15px 15px;
    border: 0.1px solid white;
}

textarea {
  /*text-shadow:1px 2px black;*/
  background-color: 	#F0FFFF;
  -moz-box-shadow: 0 0 5px 5px #00FFFF;
-webkit-box-shadow: 0 0 5px #00FFFF;
box-shadow: 0 0 5px 5px #00FFFF;
opacity: .8;
-moz-opacity:.8;
-webkit-opacity:.8;
-khtml-opacity:.8;
/*background:gray;*/
-ms-border-radius: 20px;
-moz-border-radius:20px; /* Firefox */
-webkit-border-radius:20px; /* Safari and chrome */
-khtml-border-radius:20px; /* Linux browsers */
border-radius:20px 1em; /* CSS3 */ 
font-family: monospaced;
}
.relbut{
  position:relative;
  bottom:0px;
  right:0px;
}
.date {
position:absolute;
buttom:0px;
font-size:18px;
color:#778899;
vertical-align : bottom;
text-align : center;

  background-color:gray;
  border:.1px solid #00FFFF;
  margin:10px;
  padding:10px;
  border-radius:20px;
  box-shadow:10px 10px  10px black;

  
}
.contentbody {

}
div.content {
  padding:5px;
  text-shadow:1px 2px black;
  background-color:gray;
  -moz-box-shadow: 0 0 5px 5px #00FFFF;
-webkit-box-shadow: 0 0 5px #00FFFF;
box-shadow: 0 0 5px 5px #00FFFF;
  filter:Alpha(opacity=80, finishopacity=40, style=0, startx=1, starty=1, finishx=200, finishy=200 );
z-index:100;
opacity: .8;
-moz-opacity:.8;
-webkit-opacity:.8;
-khtml-opacity:.8;
/*background:gray;*/
-ms-border-radius: 20px;
-moz-border-radius:20px; /* Firefox */
-webkit-border-radius:20px; /* Safari and chrome */
-khtml-border-radius:20px; /* Linux browsers */
border-radius:20px 1em; /* CSS3 */ 
height:100%;
z-index:5;
}
.content:hover , {
 
  
}
a, .a,  a:link , a:visited, a:focus{
text-decoration:none; 
color:#800080;
/*color:white;*/
}
.links:hover {
/*  background:#505050;*/
/*  color:#505050;*/
color:#800080;
text-shadow:0px 0px 4px #00FFFF;
}
.tbl1 {

}
.dashed{
/*border-right:0.1px dashed #cccccc;*/
}
img {
	opacity: 1.8;
	-moz-opacity:1.8;
	display: inline;
	margin-left: auto;
	margin-right: auto;
	border: 0;
  
}
.bottom
{
position:absolute;
bottom:0px;
z-index:1;
}

.overlay {
  position:absolute;
  overflow:hidden;
  background-image:url("http://djreason.de/NEU/images/bg-rotatescrollared.png");
  width:300px;
  height:300px;
display:block; 
z-index:+4;
}
.carousel {
position: absolute; width: 1200px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0;  
}

.wirewars {
  top:50px;
  right:-100px;
  position:fixed;
    width:250px;
  height:227.5px;
display:block; 
z-index:+5;
/*
opacity: .8;
-moz-opacity:.8;
-webkit-opacity:.8;
-khtml-opacity:.8;
  filter: darken(50%);
 background-blend-mode: darken; 
    mix-blend-mode:darken;
      filter: grayscale(100%);
 background-blend-mode: grayscale; 
    mix-blend-mode:grayscale;*/
}

.copicpen {
  top:100px;
  left:-75px;
  position:absolute;
  filter: darken(50%);
 background-blend-mode: darken; 
   /* mix-blend-mode:darken;*/
      filter: grayscale(100%);
 background-blend-mode: grayscale; 
 /*   mix-blend-mode:grayscale;*/
    width:426px;
  height:640px;
display:block; 
z-index:2;
opacity: .8;
-moz-opacity:.8;
-webkit-opacity:.8;
-khtml-opacity:.8;
}

.fader {
  top:25px;
  left:00px;
  position:absolute;
    width:500px;
  height:299px;
display:block; 
z-index:2;
  filter: darken(50%);
 background-blend-mode: darken; 
    mix-blend-mode:darken;
      filter: grayscale(100%);
 background-blend-mode: grayscale; 
    mix-blend-mode:grayscale;
}

.pagecurl {
  bottom:0px;
  right:0px;
  position:fixed;
    width:150px;
  height:150px;
display:block; 
z-index:2;
}
.pagecurl:hover {
  display:hidden;
  bottom:0px;
  right:0px;
  position:fixed;
    width:150px;
  height:150px;
z-index:2;
}
.lap {
  bottom:90px;
  left:0px;
  position:absolute;
    width:150px;
  height:150px;
display:block; 
z-index:2;
}

.mididrum {
  top:10px;
  right:10px;
  position:fixed;
    width:32px;
  height:32px;
display:block; 
z-index:+5;
opacity: .8;
-moz-opacity:.8;
-webkit-opacity:.8;
-khtml-opacity:.8;
}


@keyframes fade {
  from {
/*    margin-top: -100%;*/
top: -100%;

opacity:0.0;
-moz-opactiy:0.0;
filter: alpha(opacity=00); /* internet explorer */
-khtml-opacity: 0.0;      /* khtml, old safari */
-webkit-opacity: 0.0;

    
  }
 
  to {
top: 45%;

/*margin-top: 20%;*/
opacity:0.9;

-moz-opactiy:0.9;
filter: alpha(opacity=90); /* internet explorer */
-khtml-opacity: 0.9;      /* khtml, old safari */
-webkit-opacity: 0.9;
  }
}

.info {
	width: 0px;
	margin: 0 auto;

}
.info2{

}

.info {
top: -100%;
margin-top: -100%; 
   animation:fade 6s /* infinite*/ ; 
  animation-timing-function: ease-in-out;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	/*
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;*/
	animation-fill-mode: forwards;
 /* top: -100%; */

  text-align:justify;
text-justify:inter-word;

 -moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
 
-moz-column-width: 240px;
-webkit-column-width: 240px;
column-width: 240px;
  
 
  font-size:12px;
  font-family:Helvetica;
  text-shadow:1px 1px black; 
padding:10px;
background:gray;
/*width:20%;
 *  position:relative;
*/
opacity:.9;
-moz-opactiy:.9;
filter: alpha(opacity=90); /* internet explorer */
-khtml-opacity: 0.9;      /* khtml, old safari */
-webkit-opacity: 0.9;
/*
border: .1px dashed #FFDEAD;

*/
border-style: solid;
border-width: 18px;
-moz-border-image: url("http://djreason.de/NEU/images/window.png") 18 repeat;
-webkit-border-image: url("http://djreason.de/NEU/images/window.png") 18 repeat;
-o-border-image: url("http://djreason.de/NEU/images/window.png") 18 repeat;
border-image: url("http://djreason.de/NEU/images/window.png") 18 fill repeat;

text-shadow:1px 2px black; 
-moz-box-shadow: 0 0 5px 5px #00FFFF;
-webkit-box-shadow: 0 0 5px #00FFFF;
box-shadow: 0 0 5px 5px #00FFFF;
 position:fixed;
  top:45%;/**/
  left:45%;
  /* display:none;
background: url("../images/window.png");background-repeat:no-repeat; background-position:- 0px - 0px;
 */
  width:724px;
  height:452px;
  margin-left:-362px;
 margin-top:-226px; 
 z-index:6;
}
#me {
    -moz-animation: rotation 6s infinite linear;
    animation: rotation 6s infinite linear;
     -webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
}

#me:hover {
  -webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);transform: rotate(359deg);}
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-keyframes rotation {
    from {transform: rotate(0deg);transform: rotate(0deg);}
    to   {transform: rotate(359deg);transform: rotate(359deg);}
}

a.tooltip
{
  position: relative;
  text-decoration: none;
  text-decoration:none;
}
	
a.tooltip span
{
  display: none;
  color:#800080;
}

a.tooltip:hover span
{
	  opacity:1.0;
  position: absolute;
  display: block;
 
  border: 1px solid white;
  background-color:gray;
  padding: 0.2em;
  -moz-border-radius:20px;
  border-radius:20px;
  z-index:7;
}

.highlight{
  color: 	#00FFFF;
}

.bottomMenu {
  
    display: none;
    position: fixed;
    bottom: 0;
    right:0;
    width: 40px;
    height: 40px;
 
    /*background: red;*/
    opacity:0.5;
    -moz-opacity:0.5;
    z-index: 300;
    background-blend-mode: lighten;
}
.bottomMenu:hover {
     opacity:1;
    -moz-opacity:1;
    background-blend-mode: lighten;
  
}

.ttp {
box-shadow:10px 10px  10px black;
  position:fixed;
  right:10px;
  -moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

transform: rotate(45deg);
  
}

.booking {
  display:none;
}

img.thumb {filter:blur(3px);filter:sepia(100%);}

img.thumbs:hover {filter:blur(0px);filter:sepia(0%);
     	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}

.css3badge {
  -moz-border-radius: 140px / 75px;
  border-radius: 140px / 75px;

  -webkit-box-shadow: -8px 4px  rgba(197, 81, 17,.6);
  -moz-box-shadow: -8px 4px  rgba(197, 81, 17,.6);
  box-shadow: -8px 4px  rgba(197, 81, 17,.6);

  -moz-transform: rotate(-14deg);
  -webkit-transform: rotate(-14deg);
  -o-transform: rotate(-14deg);
  transform: rotate(-14deg);

  background-color: rgba(197, 81, 17,1);
  color: #fff;
  height: 100px;
  padding: 20px 0;
  width: 260px;
}
.css3badge p {
  font-family: 'Lobster', Helvetica, Arial, sans-serif;
  font-size: 20px;
  padding: 5px 0 0 50px;
}

.css3badge a {
  color: #fff;
  text-decoration: none;
}