@import url(https://fonts.googleapis.com/css?family=Lobster|PT+Sans+Narrow&subset=latin,cyrillic);


.title{
	font-family: 'Lobster', cursive;
	text-shadow: 0 1px #ccc, 1px 0 #ccc;
	letter-spacing: 1px;
	color:#e33423;
	font-weight:400;
	font-size:2.3em;
}
.stitched {
  position: relative;
   padding: 10px;
   width: 310px;
   background: #ff0030;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

body{
	background: url(/images/gradient.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
	width:100%;
	height:100%;
	margin:0px;
	overflow-x:hidden;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:1.2em;
}
html, h1, h2, h3, h4, p, img{
	margin:0;
	padding:0;
}

#vogelZwartRechtsNaarLinks {
    display: none;
    height: 60px;
    left: 9px;
    position: absolute;
    top: 165px;
    width: 52px;
    z-index: 70;
}
#vogelZwartLinksNaarRechts {
    display: none;
    height: 60px;
    left: 2px;
    position: absolute;
    top: 119px;
    width: 52px;
    z-index: 70;
}
#vogelWitLinksNaarRechts {
    display: none;
    height: 60px;
    left: 18px;
    position: absolute;
    top: 87px;
    width: 47px;
    z-index: 70;
}
#vogelWitRechtsNaarLinks {
    display: none;
    height: 60px;
    left: 33px;
    position: absolute;
    top: 14px;
    width: 47px;
    z-index: 70;
}

#gras {
    bottom: 0;
    height: 150px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 60;
    background-image: url("/images/gras.png");
}

#wolk1 {
    height: 106px;
    left: 293px;
    position: absolute;
    top: 381px;
    width: 159px;
    z-index: 3;
}
#wolk2 {
    height: 98px;
    left: 264px;
    position: absolute;
    top: 642px;
    width: 165px;
    z-index: 3;
}
#wolk3 {
    height: 111px;
    left: 932px;
    position: absolute;
    top: 485px;
    width: 150px;
    z-index: 3;
}
#wolk4 {
    height: 128px;
    left: 602px;
    position: absolute;
    top: 104px;
    width: 214px;
    z-index: 3;
}
#wolk5 {
    height: 117px;
    left: -4px;
    position: absolute;
    top: 754px;
    width: 159px;
    z-index: 3;
}


html, h1, h2, h3, h4, p, img {
    margin: 0;
    padding: 0;
}
#filter {
	/*background-image: url("/images/filter.png");*/
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 11;
}
#katastrofa{
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 62; /* > 60 to cover grass */
	background:#FF0000;
	opacity:0;	
}
#zon {
	left: 900px;
	position: absolute;
	top: -70px;
	width: 317px;
	height: 317px;
	z-index: 2;
	background-image: url("/images/zon.png");
}



.spotStart{	

	z-index:100;
	position:absolute;
	top:17%;
	width:888px;
	height: 400px;
	margin-left:50%;
	left:-400px;
	border-right:10px solid #CBC6B9;
	border-bottom:10px solid #CBC6B9;
	background:url(/images/bg-panel.jpg);
	border-radius:50px;
}
.spotStart h1{
	text-align:center;
	margin:10px 0;
}
.spotStart ol li{
	padding-bottom:5px;
}
.spotStart ol{
	width:55%;
	float:left;
	margin-top:0px;
}
.spotImagePreview{
	float:right;
	margin-right:25px;
	border:5px solid #fff;
	border-radius:15px;
}

.playButton{
	clear:both;
	position:absolute;
	bottom:20px;
	width:150px;
	display: block;
	right:10px;
	margin-right: 30px;
	text-align:center;
	background-color:#008000;
	text-shadow: -1px -1px #005800;
	box-shadow: 0 0 0 4px #008000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	cursor:pointer;
}





.spotAreaOne{
	position:relative;
	width:623px;
	height:470px;
	background:url(/images/picture1.jpg) left top no-repeat;
	float:left;
	border-left:5px solid #fff;
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.spotAreaTwo{
	position:relative;
	width:623px;
	height:470px;
	background:url(/images/picture2.jpg) left top no-repeat;
	float:right;
	border-right:5px solid #fff;
	border-top:5px solid #fff;
	border-bottom:5px solid #fff;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;	
}
.spotArea{
	width:1256px;
	margin-left:25px;
	margin-top:30px;
	border-radius:40px;
	height:480px;
}
.spotGame{
	z-index:100;
	position:absolute;
	top:10%;
	width:1300px;
	height: 600px;
	margin-left:50%;
	left:-650px;
	border-right:10px solid #CBC6B9;
	border-bottom:10px solid #CBC6B9;
	background:url(/images/bg-panel.jpg);
	border-radius:50px;
	top:-1000px;
}

.spotData{
	background:#fff;
	border-radius:20px;
	clear:both;
	width:1250px;
	margin-left:25px;
	margin-top:10px;
	height:65px;
}
#spotFound, #spotTime{
	display:inline-block;
	line-height:65px;
	padding-left: 40px;
	padding-right: 80px;
}
#spotFound span, #spotTime span{
	font-size:30px;
	color:#0E7A42;
	float:left;
}
#spotFound i.title, #spotTime i.title{
	color:#038FAE;
	font-size:35px;
	position:absolute;
}
#spotTime i.title.alarm{
	color:#e33423;
}
.diff.processed{
	background:url(/images/done.png) center center no-repeat; 
}
.socials{
	position:absolute;
	width:650px;
	height:32px;
	bottom:32px;
	left:40px;
}


#boo{
	display:none;
	z-index:1000;
	position:fixed;
	width:100%;
	height:100%;
	background:url(/images/scary.jpg) center center no-repeat #000;
}