* {
	margin: 0;
	padding: 0;
}
body, html {
	width: 100%;
	height: 100%;
	background: @bg;
}

@bg: #eeeeee;
@transition: 1.0s;

@gothic:Gothic725BlkBT;
@mono: MonoCondensed-Bold;

.left {
	float: left;
}

.spacer {
	clear: both;
}

.transition {
	-webkit-transition: all @transition ease;
	-moz-transition: all @transition ease;
	-ms-transition: all @transition ease;
	-o-transition: all @transition ease;
	transition: all @transition ease;
}

#page {
	width: 1200px;
	margin: 0 auto;
	background: @bg;

	#title {
		position: absolute;
		margin-top: 50px;
		margin-left: 0px;
		z-index: 30;
		text-align: center;

		.first {
			padding: 20px 0px 10px 0px;
			text-decoration: underline;
			font-family: @mono;
		}

		.second {
		font-size: 50px;
			padding: 10px 0px 20px 0px;
			font-family: @gothic;
		}

		.third {
			padding: 20px 0px;
			font-family: @mono;
		}

		.fourth {
			padding: 20px 0px;
			font-family: @gothic;

			#start {
				font-family: @mono;
				width: 80px;
				cursor: pointer;
				margin: 0 auto;
				padding: 10px 20px;
				border: #000000 8px solid;

				&:hover {
					background: #ffffff;
					
				}
			}
		}

		.left {
			width: 400px;
		}
	}

	#game {
		top: -100%;
		position: absolute;

		.description {
			font-family: @gothic;
			position: absolute;
			margin-top: 0px;
			margin-left: 150px;
			width: 250px;
			z-index: 90;
			
			div {
				margin-bottom:  20px;
			}
		}

		#map {
			position: absolute;
			margin-left: 400px;
			width: 830px;
			height: 522px;
			background-image: url( "../images/map.jpg" );
			z-index: 10;
			
			.marker {
				display:  none;
				position:  absolute;
				
			}
			
			.real {
				width: 28px;
				height:  50px;
				background-image:  url( "../images/tochka.png" );
				
			}
			
			.user {
				background: rgba(255, 255, 255, .85);
				width:  14px;
				height:  14px;
				border:  red 3px solid;
				
				-moz-border-radius: 100px;
				-webkit-border-radius: 100px;
				border-radius: 100px;
				-khtml-border-radius: 100px;
				
				div {
				font-size: 55px;
				font-family: @gothic;
					position: absolute;
					margin-top:  -50px;
					color: red;
					display: none;
		
				}
			}
		}
	}
	
	#colophon {padding-left: 300px;
		padding-right: 300px;
		position:  absolute;
		top:  -100%;
		width:  600px;
	
		background-color: #eeeeee;
		text-align: center;
		
		
		
		
		
		#share {
			text-align: center;
			
			img {
				cursor:  pointer;
			}
		}
	}
}


.name, .lyrics {
	font-family: @mono;
	font-size: 15px;
}

.about{
	margin-bottom: 50px!important;
}


.lyrics{
	margin-bottom: 60px!important;
}

.title {
	margin-top: 60px;
	font-family: @mono;
	font-size: 30px;
	margin-bottom: 15px;
}

.score {
	font-family: @gothic;
	font-size: 45px;
}

.you{
	margin-top: 35px;
	font-family: @mono;
	font-size: 18px;
	margin-bottom: 55px;
}

#again {
	font-family: @mono;
	width: 170px;
	cursor: pointer;
	margin: 0 auto;
	margin-top:  30px;
	padding: 10px 20px;
	border: #000000 8px solid;

	&:hover {
		background: #ffffff;
		
	}
}