body {
margin: 0px;
padding: 0px;
background:#000;
font-family: 'Roboto Condensed', sans-serif;
}

h1, h2, h3, h4, h5, h6, h7{
	font-family: 'Homenaje', sans-serif;
}

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

p, li {
	font-size: 0.95em;
}

#titlediv {
position: absolute;
z-index: 2;
width: 100%;
top: -30px;
text-align: center;
min-width: 800px;
}

#titlediv h1 {
font-size:1.5em;
color: #fff;
margin: 0;
padding: 0;
}

#notification {
	color:#fff;
	text-align: center;
}

#notification a {
	color: #aaa;
}

#eventsdiv {
position: absolute;
z-index: 2;
right: 0;
height: 60px;
overflow: hidden;
-webkit-mask-image: -webkit-gradient(linear, 0 90%, 0 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
margin: 1em;
}

#eventsdiv ul {
list-style-type: none;
color: #fff;
opacity: 0.9;
text-shadow: 0px 0px 5px #000;
padding-right: 1em;
margin: 0;
}

#eventsdiv ul li {

}

#infodiv {
min-width: 800px;
position: absolute;
top: 50%;
width: 100%;
}

.sicon {
	width: 32px;
	margin-left: 5px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px #444;
    -o-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-khtml-transition: color 0.5s linear;
	-webkit-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
	background-color: #222;
}

.sicon:hover {
	box-shadow: 0px 0px 20px #6F00FF;
}

#info-left {
position: absolute;
text-align: right;
left: 50%;
margin-left: -320px;
top: 50%;
margin-top: -15px;
z-index: 1000;
}

#info-right {
position: absolute;
top: 50%;
left: 50%;
margin-left: 130px;
z-index: 1000;
margin-top: -15px;
}

.playBtn {
	font-size:50px;
	cursor:pointer;
	color: #fff;
	text-shadow: 0px 0px 20px #222;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:none;
    -o-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-khtml-transition: color 0.5s linear;
	-webkit-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
	margin-top: -25px;
}

.playBtn:hover {
	color: #fff;
	text-shadow: 0px 0px 20px #6F00FF;
}

/* hexa */

canvas {
border: 0 none;
}

#maindiv {
position:absolute;
top: 50%;
float:left;
margin-top:-160px;
width:100%;
height:320px;
background:#6F00FF;
}

#container {
margin:0 auto;
/*margin-top:50px;
width:400px;
height:100%;*/
text-align: center;
}

.kineticjs-content {
background-image: url(/img/rakenne_tp.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}

.rakenne {
background-image: url(/img/rakenne_tp.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}

/* cloud */

	#viewport {
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-o-perspective: 1000;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		/*background: rgba(111,0,255,1);*/

	}

	#world {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -256px;
		margin-top: -256px;
		height: 512px;
		width: 512px;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
	}

	#world div {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
	}

	.cloudBase {
		position: absolute;
		left: 256px;
		top: 256px;
		width: 20px;
		height: 20px;
		margin-left: -10px;
		margin-top: -10px;
	}

	.cloudLayer {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 256px;
		height: 256px;
		margin-left: -128px;
		margin-top: -128px;
	}

/* svg */

#svgholder {
	position:relative;
	width:100%;
	margin-top: -320px
}

#svg {
	width:100%;
}

/* gradient */

	.orig {
		background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
		background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
		background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
		background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
		background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.28, rgb(69,132,180)),
			color-stop(0.64, rgb(31,71,120))
		);
	}

	.sky {

		background-image: url(/img/bgsky.png);
	/*
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(10, 39, 88)),
			color-stop(0.5, rgb(146, 172, 182)),
			color-stop(1, rgb(10, 37, 88))
		);
		background-image: -o-linear-gradient(bottom, rgb(10, 39, 88) 0%, rgb(146, 172, 182) 50%, rgb(10, 37, 88) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(10, 39, 88) 0%, rgb(146, 172, 182) 50%, rgb(10, 37, 88) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(10, 39, 88) 0%, rgb(146, 172, 182) 50%, rgb(10, 37, 88) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(10, 39, 88) 0%, rgb(146, 172, 182) 50%, rgb(10, 37, 88) 100%);
		background-image: linear-gradient(to bottom, rgb(10, 39, 88) 0%, rgb(146, 172, 182) 50%, rgb(10, 37, 88) 100%);
	*/
	}

	.spring {

		background-image: url(/img/bgspring.png);
	/*
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(97, 137, 67)),
			color-stop(0.5, rgb(11, 32, 37)),
			color-stop(1, rgb(109, 150, 27))
		);
		background-image: -o-linear-gradient(bottom, rgb(97, 137, 67) 0%, rgb(11, 32, 37) 50%, rgb(109, 150, 27) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(97, 137, 67) 0%, rgb(11, 32, 37) 50%, rgb(109, 150, 27) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(97, 137, 67) 0%, rgb(11, 32, 37) 50%, rgb(109, 150, 27) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(97, 137, 67) 0%, rgb(11, 32, 37) 50%, rgb(109, 150, 27) 100%);
		background-image: linear-gradient(to bottom, rgb(97, 137, 67) 0%, rgb(11, 32, 37) 50%, rgb(109, 150, 27) 100%);
	*/
	}

	.autumn {

		background-image: url(/img/bgautumn.png);
	/*
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(171, 34, 0)),
			color-stop(0.5, rgb(238, 205, 145)),
			color-stop(1, rgb(171, 34, 0))
		);
		background-image: -o-linear-gradient(bottom, rgb(171, 34, 0) 0%, rgb(238, 205, 145) 50%, rgb(171, 34, 0) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(171, 34, 0) 0%, rgb(238, 205, 145) 50%, rgb(171, 34, 0) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(171, 34, 0) 0%, rgb(238, 205, 145) 50%, rgb(171, 34, 0) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(171, 34, 0) 0%, rgb(238, 205, 145) 50%, rgb(171, 34, 0) 100%);
		background-image: linear-gradient(to bottom, rgb(171, 34, 0) 0%, rgb(238, 205, 145) 50%, rgb(171, 34, 0) 100%);
	*/
	}

	.sunset {

		background-image: url(/img/bgsunset.png);
	/*
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(48, 38, 110)),
			color-stop(0.5, rgb(255, 57, 13)),
			color-stop(1, rgb(48, 38, 110))
		);
		background-image: -o-linear-gradient(bottom, rgb(48, 38, 110) 0%, rgb(255, 57, 13) 50%, rgb(48, 38, 110) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(48, 38, 110) 0%, rgb(255, 57, 13) 50%, rgb(48, 38, 110) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(48, 38, 110) 0%, rgb(255, 57, 13) 50%, rgb(48, 38, 110) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(48, 38, 110) 0%, rgb(255, 57, 13) 50%, rgb(48, 38, 110) 100%);
		background-image: linear-gradient(to bottom, rgb(48, 38, 110) 0%, rgb(255, 57, 13) 50%, rgb(48, 38, 110) 100%);
	*/
	}

	.winter {

		background-image: url(/img/bgwinter.png);
	/*
		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(99, 131, 168)),
			color-stop(0.5, rgb(245, 249, 227)),
			color-stop(1, rgb(98, 130, 166))
		);
		background-image: -o-linear-gradient(bottom, rgb(99, 131, 168) 0%, rgb(245, 249, 227) 50%, rgb(98, 130, 166) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(99, 131, 168) 0%, rgb(245, 249, 227) 50%, rgb(98, 130, 166) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(99, 131, 168) 0%, rgb(245, 249, 227) 50%, rgb(98, 130, 166) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(99, 131, 168) 0%, rgb(245, 249, 227) 50%, rgb(98, 130, 166) 100%);
		background-image: linear-gradient(to bottom, rgb(99, 131, 168) 0%, rgb(245, 249, 227) 50%, rgb(98, 130, 166) 100%);
	*/
	}