/* LESS VARIABLES */
.border-radius (@radius: 5px) {
	border-radius: @radius;
  	-webkit-border-radius: @radius;
  	-moz-border-radius: @radius;
}
.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

#preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 100000;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
	
	.spinner {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -25px 0 0 -25px;
		width: 50px;
		height: 50px;
		background: rgba(0,0,0, 0.9) url(../images/loading.gif) no-repeat center center;
		.border-radius(40px);
	}
}

* {
	padding: 0;
	margin: 0;
}

td {
	vertical-align: top;
}

.clearFix {
	clear: both;
}

body {
}
#wrapper {
	position: relative;
	width: 1240px;
	margin: 0 auto;
	.question-form {
		width: 790px;
		height: 100px;
		border: 2px solid #999;
		background-color: #FDF6ED;
		-webkit-box-shadow: inset 3px 3px 8px 0px rgba(0, 0, 0, 0.2);
		box-shadow: inset 3px 3px 8px 0px rgba(0, 0, 0, 0.2);
		position: absolute;
		margin: -230px 0 0 200px;
		font: 30px/30px Octava;
		padding: 0 20px;
		text-align: center;
	}
}

.gods {
	
	.god-one {
		background: url('../images/1.jpg') no-repeat left top;
		&:hover {
			background: url('../images/1a.jpg') no-repeat left top;
		}
		&.active {
			background: url('../images/1b.jpg') no-repeat left top;
		}
	}
	.god-two {
		background: url('../images/2.jpg') no-repeat left top;
		&:hover {
			background: url('../images/2a.jpg') no-repeat left top;
		}
		&.active {
			background: url('../images/2b.jpg') no-repeat left top;
		}
	}
	.god-three {
		background: url('../images/3.jpg') no-repeat left top;
		&:hover {
			background: url('../images/3a.jpg') no-repeat left top;
		}
		&.active {
			background: url('../images/3b.jpg') no-repeat left top;
		}
	}
	.god-four {
		background: url('../images/4.jpg') no-repeat left top;
		&:hover {
			background: url('../images/4a.jpg') no-repeat left top;
		}
		&.active {
			background: url('../images/4b.jpg') no-repeat left top;
		}
	}
	
	.avatar {
		width: 200px;
		height: 300px;
		background-color: #000;
		cursor: pointer;
	}
	
	.blank {
		width: 8px;
	}
}

.go {
	width: 329px;
	height: 92px;
	background: url(../images/button.jpg);
	cursor: pointer;
	margin: 65px 0 0 460px;
	-moz-transition: background 0.3s ease-out;
	-o-transition: background 0.3s ease-out;
	-webkit-transition: background 0.3s ease-out;
	&:hover {
		background: url(../images/button_hover.jpg);
	}
	&:active {
		margin-top: 67px;
	}
}

.popup {
	width: 680px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin-left: -348px;
	z-index: 10;
	font: 18px/21px Futura;
	text-align: right;
	display: none;
	
	.blank {
		width: 56px;
	}
	
	.question {
		padding: 20px;
		background-color: #B5E3B5;
		border: 8px solid #000;
		.urquest {
			font: italic 28px/33px Octava;
			text-align: left;
			width: 480px;
		}
	}
	.answer {
		padding: 20px;
		background-color: #F7DB3E;
		border: 8px solid #000;
		border-top: none;
		.urans {
			font: 28px/33px Octava;
			text-align: left;
			width: 480px;
		}
	}
	.restart {
		width: 307px;
		height: 75px;
		background: url(../images/b2.png);
		margin: 10px 0 0 186px;
		cursor: pointer;
		&:hover {
			background: url(../images/b2hover.png);
		}
	}
}
.hidden {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 5;
	background-color: rgba(255, 255, 255, .75);
	top: 0;
	left: 0;
	display: none;
}