/* @group Mixins */

	.animated (@time: 0.3s) {
		-webkit-transition-property: all;
		-webkit-transition-duration: @time;
		-webkit-transition-timing-function: ease;

		-moz-transition-property: all;
		-moz-transition-duration: @time;
		-moz-transition-timing-function: ease;
	}

	/* @group CSS3 Generalizers */

		._border-radius (@params) {
		  border-radius: @params;
		  -webkit-border-radius: @params;
		  -moz-border-radius: @params;
		}

		._transform (@params) {
			transform: @params;
			-webkit-transform: @params;
			-moz-transform: @params;
		}

		._box-shadow (@params) {
			box-shadow: @params;
			-webkit-box-shadow: @params;
			-moz-box-shadow: @params;
		}

	/* @end */
/* @end */


body {
	margin: 0px;

	color: #555;
	font-style: normal;
	font-weight: 300;
	font-size: 12px;

	background-image: url(../images/background.jpg);

	overflow: hidden;
}

a {
	outline: none;
}

.static_content_section {
	display: none;
}

.content {
	position: relative;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.image_view {
	position: absolute;
	top: 0px;
	bottom: @footer_height + @thumg_drawer_peek_height - 5;
	left: 0px;
	right: 0px;

	.next, .previous {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 30%;

		.animated;
		border: none;

		opacity: 0;

		&:hover {
			opacity: 1;
		}

		&:before {
			content: '';

			display: block;
			position: absolute;
			top: 0px;
			bottom: 0px;
			width: 30px;

			margin: 30px;

			background-position: center center;
			background-repeat: no-repeat;
		}
	}
	.next {
		right: 0px;

		&:before {
			right: 0px;
			background-image: url(../images/icon_arrow_right.png);
		}
	}
	.previous {
		left: 0px;

		&:before {
			left: 0px;
			background-image: url(../images/icon_arrow_left.png);
		}
	}

	.image_pane {
		position: absolute;

		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;

		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0.3s;
		-webkit-transition-timing-function: ease;

		-moz-transition-property: opacity;
		-moz-transition-duration: 0.3s;
		-moz-transition-timing-function: ease;

		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}
}

.contact_view {
	position: absolute;
	top: 0px;
	bottom: @footer_height + @thumg_drawer_peek_height - 5;
	left: 0px;
	right: 0px;

	padding-top: 70px;

	overflow: auto;

	background-image: url(../images/bg_contact.jpg);
	background-position: center center;
	background-size: cover;

	input, textarea {
		padding: 3px;
		border: solid 1px #555;
		._box-shadow(2px 2px 0px #555);
	}

	.form-all, * {
		font-family: inherit;
	}

	.form-sub-label {
		text-align: center;
	}

	.form-radio-item input {
		margin-bottom: 5px;
	}

	@header_height: 60px;
	#cid_1 .form-header-group {
		@height: @header_height;

		position: relative;
		line-height: @height;
		font-size: 1.7em;
		text-transform: uppercase;

		padding: 0px;
		border-bottom: dashed 2px #555;
		background-color: transparent;

		.contact_info {
			position: absolute;
			top: 0px;
			right: 0px;

			padding-top: 15px;

			text-align: right;
			font-size: 0.7em;
			line-height: normal;

			a {
				color: #555;
				text-decoration: none;

				&:hover {
					// text-decoration: underline;
				}
			}
		}
	}

	.form-line{
		width: 100%;
		padding: 0px;
	    padding-top: 10px;
	}

	.form-line-error, .form-line-active {
		background-color: transparent;
	}

	#id_9 {
		position: absolute;
		top: @header_height + 2;
		right: 0px;
		width: auto;

		label {
			display: none;
		}

		#input_9 {
			width: 300px;
			height: 228px;
			margin-top: 10px;
			font: inherit;
			resize: none;
		}
	}

	#input_2 {
		padding: 5px;
		padding-left: 20px;
		padding-right: 20px;
		color: #555;
		font: inherit;
		font-size: 1.2em;
		font-weight: bold;
		text-transform: uppercase;
		._box-shadow(2px 2px 0px #555);
		border: solid 1px #555;
		background-color: #fff;

		cursor: pointer;

		&:hover {
			background-color: #eee;
		}
	}
}

.friends_view {
	position: absolute;
	top: 0px;
	bottom: @footer_height + @thumg_drawer_peek_height - 5;
	left: 0px;
	right: 0px;

	padding-top: 70px;

	overflow: auto;

	background-image: url(../images/bg_friends.jpg);
	background-position: center bottom;
	background-size: cover;

	@header_height: 60px;
	.form-header-group {
		@height: @header_height;

		position: relative;
		line-height: @height;
		font-size: 1.7em;
		text-transform: uppercase;

		padding: 0px;
		border-bottom: dashed 2px #555;
		background-color: transparent;
	}

	.friends_table {
		margin-left: auto;
		margin-right: auto;
	}

	.friends_right {
		padding-left: 50px;
	}

	.sub_title {
		padding-top: 10px;
		font-weight: bold;
		font-size: 1.1em;
		line-height: 20px;
	}

	a {
		color: #555;
		line-height: 20px;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.friends_view, .contact_view {
	.content {
		z-index: 1;
	}
}

@thumg_drawer_peek_height: 10px;
.thumb_drawer {
	@trigger_height: 65px;
	@content_height: 65px;
	@peek_height: @thumg_drawer_peek_height;
	@padding: 10px;

	position: absolute;
	bottom: @footer_height - @footer_top_margin - (@content_height);
	left: 0px;
	right: 0px;
	height: @content_height - @padding * 2 + @padding;

	padding-bottom: @padding;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: @trigger_height + @peek_height;

	.animated;

	background-image: url(../images/themes/purple/thumb_drawer_background.png);
	background-position: left bottom;
	background-repeat: repeat-x;

	overflow: hidden;

	&:hover {
		bottom: @footer_height - @footer_top_margin;
	}

	&.locked {
		bottom:  @footer_height - @footer_top_margin - (@content_height);
	}

	.scroller {
		.inner {
			position: absolute;
			left: 30px;
			.animated;

			a {
				@border_width: 0px;

				display: block;
				float: left;
				width: @content_height - @padding;
				height: @content_height - @padding;

				margin-left: 5px;
				margin-right: 5px;

				.animated;
				._box-shadow(inset 0px 1px 2px #000);

				background-position: center center;
				background-size: cover;

				opacity: 0.7;

				&:hover {
					opacity: 0.85;
				}

				&.selected {
					opacity: 1;
				}
			}
		}
	}

	a.scroll_left, a.scroll_right {
		position: absolute;
		top: @trigger_height + @peek_height;
		bottom: 6px;
		width: 40px;

		background-position: center center;
	}
	a.scroll_left {
		left: 0px;
		background-image: url(../images/thumb_left.png);
	}
	a.scroll_right {
		right: 0px;
		background-image: url(../images/thumb_right.png);
	}
	a.toggle_slideshow {
		position: absolute;
		top: @trigger_height + @peek_height;
		bottom: 6px;
		right: 32px;
		width: 47px;

		background-image: url(../images/pause.png);
		background-position: right center;

		&.paused {
			background-image: url(../images/play.png);
		}
	}
}

@footer_height: 90px;
@footer_top_margin: 5px;
.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: @footer_height;

	padding-right: 25px;

	text-shadow: 0px 1px 0px #fff;
	font-size: 1.3em;

	background-image: url(../images/footer_background.png);

	.footer_inner_for_map {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;

		background-image: url(../images/bg_map.png);
		background-position: 185px bottom;
		background-repeat: no-repeat;
	}

	p {
		position: absolute;
		bottom: 10px;
		right: 20px;

		margin: 0px;
		font-size: 0.7em;

		color: #777;
	}

	a {
		@bottom_padding: 22px;

		display: block;
		height: @footer_height - @footer_top_margin - @bottom_padding;

		float: right;

		margin-top: @footer_top_margin;
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: @bottom_padding;

		color: #661a3b;
		line-height: @footer_height - @bottom_padding;
		text-decoration: none;
		text-transform: uppercase;

		&:hover {
			// text-decoration: underline;
		}
	}
	a.logo {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 10px;
		width: 119px;

		background-image: url(../images/themes/purple/logo.png);
		background-position: center;
		background-repeat: no-repeat;

		opacity: 1;
	}
}

.menu_wrapper {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;

	background-image: url(../images/menu_wrapper_bg.png);

	.menu {
		position: absolute;
		bottom: @footer_height - 10;

		padding-top: 3px;
		padding-bottom: 3px;

		._border-radius(5px);
		._box-shadow(0px 1px 2px #000);
		border: solid 1px #fff;

		background-image: url(../images/menu_background.png);

		&:after {
			content: '';

			@height: 21px;

			display: block;
			position: absolute;
			bottom: -@height - 1;
			left: 0px;
			right: 0px;
			height: @height;

			background-image: url(../images/menu_arrow.png);
			background-position: center center;
			background-repeat: no-repeat;
		}

		a {
			@height: 22px;

			display: block;
			height: @height;

			padding-left: 10px;
			padding-right: 10px;

			color: #fff;
			line-height: @height;
			text-align: center;
			text-decoration: none;
			font-size: 1.1em;
		}
	}
}

.loading_wrapper {
	position: absolute;
	bottom: 200px;
	left: 200px;
	right: 200px;

	.animated;

	opacity: 0;

	.loading {
		@size: 200px;
		position: relative;
		width: @size;
		height: @size*0.4;

		margin-left: auto;
		margin-right: auto;

		._border-radius(20px);
		background-color: #000;
		background-image: url(/images/ajax-loader.gif);
		background-position: center center;
		background-repeat: no-repeat;

		opacity: 0.7;
	}

	&.show {
		opacity: 1;
	}
}