.preload-images {
	background: url(Images/schelpopen.png) no-repeat -9999px -9999px;
	background: url(Images/schelpopen.png) no-repeat -9999px -9999px,
		    url(Images/schelpopen.png) no-repeat -9999px -9999px;
	}

    html, body {
        height: 100%;
        margin: 0px;
    }

* {

	-webkit-user-modify: none;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */	
	
}
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html { 
  background: url(Images/background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ol, ul {
	list-style: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*
#bg {
	position: absolute;
	z-index:-1;
	background :url(Images/background.png) no-repeat;
	-webkit-background-size:100%;
	width:1024px;
	height:768px;
	left:0;
	top:0;
}
*/
.box_gradient {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999)); /* Saf4+, Chrome */
}

#colorwheel {
	position: relative;
	height: 550px;
	width: 550px;
	background-image: url(Images/seastar.png);
	background-repeat: no-repeat;
	top:0;
	z-index:999;
	margin:auto;
	position:relative;
	-webkit-transition: -webkit-transform 1.5s ease-out;
}
#colorwheel:active {
	-webkit-transform: rotate(360deg);
	-webkit-transition: -webkit-transform 0.8s ease-out;

}
#scene {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
}

#schelp {
	position: absolute;
	left: 40%;
	height: 145px;
	width: 215px;
	background-image: url(Images/schelpdicht.png);
	bottom:0;
	z-index:990;
}
#schelp:active {
	background-image: url(Images/schelpopen.png);
	-webkit-transform: rotate(360deg);
}
#crab {
	position: absolute;
	right: 10px;
	height: 135px;
	width: 200px;
	background-image: url(Images/crab.png);
	bottom:50px;
	z-index: 199;
}

#clowfish {
	position: absolute;
	left: 1050px;
	height: 87px;
	width: 117px;
	background-image: url(Images/clownfish.png);
	top:20px;
	z-index: 202;
}
.clowfish {
	-webkit-animation-name: clowfish;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: 50;
}
 @-webkit-keyframes clowfish {
 from {
 left: 1100px;
}
to {
	left: -300px;
}
}


.seahorse {
	position: absolute;
	right: 20px;
	height: 189px;
	width: 118px;
	background-image: url(Images/seahorse.png);
	top:40%;
	z-index: 1000;
	-webkit-transform-origin-x: 0px;
}

	-webkit-transition: -webkit-transform 0.2s ease-out;}
/*.seahorse:active {
	-webkit-animation-duration: 3s;
	-webkit-transform: scale(2);
	-webkit-transition: all 2s ease-in-out;
	-webkit-transform-origin-x: 100%;
}*/
#fishes {
	position: absolute;
	left: 1400px;
	height: 74px;
	width: 439px;
	background-image: url(Images/fishes.png);
	top:200px;
	z-index:5!important;
}
.fishes {
	-webkit-animation-name: fishes;
	-webkit-animation-duration: 25s;
	-webkit-animation-iteration-count: 50;
}
 @-webkit-keyframes fishes {
 from {
 left: 1400px;
 top: 200px;
}
to {
	left: -400px;
	top: 200px;
}
}
#plants {
	position: absolute;
	left: 0px;
	height: 100%;
	width: 100%;
	background-image: url(Images/plants.png);
    background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	top:0;
	z-index:200;
	pointer-events: none;
}
.ui-widget-content {
	background-color: rgba(255,255,255,0.1);
	color:#222222;
}
.ui-corner-all {

	-webkit-border-radius:11px;
}
#slider-blue {
	background-color: rgba(255,255,255,0.3);
	position:relative;
	z-index:0;
	height:0.8em;

	-webkit-border-radius:11px;
	top:0!important;
	position:relative!important;
}
#slider {
	position:relative;
	z-index: 1000;
}
#slide_container {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:999;
	width:100%;
}
 @-webkit-keyframes fade {
 0% {
opacity: 0;
}
 10% {
opacity: 0.8;
}
 100% {
opacity: 0;
}
}
 @-webkit-keyframes fall {
 from {
bottom: -10px;
}
to {
	top: 0;
}
}
 @-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(-180deg) translate(0px, 0px);
}
 100% {
-webkit-transform: rotate(180deg) translate(10px, 75px);
}
}
#snow div {
	position: absolute;
	top: 768px;
	-webkit-animation-name: fall, fade, spin;
	-webkit-animation-iteration-count: infinite; /* use 0 to infinite */
	-webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
	-webkit-animation-timing-function: ease-in;
}
.snowflake {
	color: #fff;
	font-size: 2em;
	position: absolute;
	background-image: url(Images/bub.png);
	background-repeat:no-repeat;
	width:51px;
	height:48px;
	opacity:1;
	z-index:1010
}
.snowflake.f1 {
	left: 40px;
	-webkit-animation-duration: 5s;	/* set duration indivisually */
}
.snowflake.f2 {
	font-size: 1.8em;
	left: 120px;
	-webkit-animation-duration: 7s;
	-webkit-background-size: 30px;
}
.snowflake.f3 {
	left: 200px;
	-webkit-animation-duration: 8s;
	-webkit-background-size: 20px;
}
.snowflake.f4 {
	font-size: 1.5em;
	left: 280px;
	-webkit-animation-duration: 6s;
	-webkit-background-size: 10px;
}
.snowflake.f5 {
	left: 640px;
	-webkit-animation-duration: 12s;	/* set duration indivisually */
}
.snowflake.f6 {
	font-size: 1.8em;
	left: 720px;
	-webkit-animation-duration: 10s;
	-webkit-background-size: 30px;
}
.snowflake.f7 {
	left: 800px;
	-webkit-animation-duration: 11s;
	-webkit-background-size: 20px;
}
.snowflake.f8 {
	font-size: 1.5em;
	left: 880px;
	-webkit-animation-duration: 8s;
	-webkit-background-size: 10px;
}

#waves {
	height: 115px;
	background-image: url(Images/water.png);
	background-position: 0% 0%;
	-webkit-animation-name: moveIt;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	position:absolute;
	top:0;
	width:100%;
	overflow:hidden;
}
@-webkit-keyframes moveIt {
     0% {
          background-position: 0% 0%;
     }
     100% {
          background-position: -110% 0%;
     }
}
@-webkit-keyframes moveItUp {
     0% {
          top:0%;
     }
     100% {
          top: 100%;
     }
}



#bigfish {
	position: absolute;
	left: 0px;
	height: 148px;
	width: 217px;
	background-image: url(Images/bigfish.png);
	top:20%!important;
	
		z-index:10;


}

#bigfish:active  {
-webkit-transition: -webkit-transform 0.6s ease-out;
}

#kwal {
	position: absolute;
	z-index:9;
	left: 100px;
	height: 182px;
	width: 84px;
	background-image: url(Images/kwal.png);
	top:220px;
	-webkit-animation-name: moveItUp;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	
}
#kwal:active {
 -webkit-transform:scale(1.2);
	-webkit-transition: -webkit-transform 0.2s ease-out;
}
div#info {
	position: absolute;
	right: 15px;
	height: 24px;
	width: 24px;
	background-image: url(Images/info.png);
	top:25px;
	z-index:1000px;


}



#about {
	opacity:0;
	-webkit-transition: opacity 1s linear;
	-webkit-border-radius:32px;
	-webkit-box-shadow: 10px 10px 5px #9dc4e3; padding: 5px 5px 5px 15px;
	width:600px;
	height:450px;
	background-color:#56afe2;
	position:absolute;
	top:100px;
	color:#FFF;
	left:-1000px;
}

.highlight {
	opacity: 1!important;
	-webkit-transition: opacity 1s linear;
	z-index:1001;
	visibility:visible!important;
	left:200px!important;	
	-webkit-animation-name: bounce; 
	-webkit-animation-duration: 2s; 
	-webkit-animation-iteration-count: 1; 
	-webkit-animation-direction: alternate;
}
.highlightout {
	opacity: 1!important;
	-webkit-transition: opacity 1s linear;
	z-index:1001;
	visibility:visible!important;
	left:-1000px!important;	
	-webkit-animation-name: bounceout; 
	-webkit-animation-duration: 2s; 
	-webkit-animation-iteration-count: 1; 
	-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {  from {    left: -1000px;  }  to {    left: 200px;  } } 
@-webkit-keyframes bounceout {  from {    left: 200px;  }  to {    left: -1000px;  } } 
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 11.5px 23px;
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   border-radius: 24px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 18px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.banner {z-index:9999;height:70px;width:50%;background-color:#87C3E9;position:absolute;left:25%;bottom:0;padding:10px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

}

.ui-slider-horizontal {
    height: 0!important;
}