html {
	overflow-y: scroll;
}

@font-face {
    font-family: 'HuelicBold';
    src: url('fonts/huelic_b-webfont.eot');
    src: url('fonts/huelic_b-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/huelic_b-webfont.woff') format('woff'),
         url('fonts/huelic_b-webfont.ttf') format('truetype'),
         url('fonts/huelic_b-webfont.svg#HuelicBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@background: #FFFFFF;
@highlight: #81C6D7;
@highlighttrans: rgba(129,198,215,0.8);
@altbg: #11323D;
@dark: #101F24;

/*
	colours:
	#101F24
	#6CB1C4
	#9FDDEB
	#11323D
	#81C6D7

*/

.rounded-top (@radius: 3px) {
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
}

.rounded-bottom (@radius: 3px) {
	border-bottom-left-radius: @radius;
	border-bottom-right-radius: @radius;
	-moz-border-radius-bottomleft: @radius;
	-moz-border-radius-bottomright: @radius;
}

.no-highlight () {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

body {
	background-color: @background;
	font-family: Lucida Sans Unicode,Lucida Grande,Verdana,Arial,sans-serif;
	font-size: 14px;
}

p {
	margin-bottom: 1em;
}

a {
	color: @dark;
	text-decoration: none;
	font-weight: bold;
	&:hover {
		text-decoration: underline;
	}
}

div#header {
	background-color: @dark;
	border-bottom: 3px solid @highlight;
	padding: 0px 0px 15px 0px;
	
	div.user_bar {
		font-size: 0.9em;
		text-align: right;	
		padding: 5px;
		background: @highlight;
		color: @dark;
		.rounded-bottom;
		
		a {
			margin-left: 10px;
		}
		
		a:last-child {
			margin-right: 10px;
		}
	}
}

div.logo {
	margin-bottom: 10px;
}

div.screenshot_filter {
	z-index: 900;
	display: none;
	margin: 20px 0px 20px 0px;
	padding: 0px 5px 5px 0px;
	background: @dark;	
	position: relative;
	height: auto;
	overflow: auto;
	
	div {
		.no-highlight;
		cursor: pointer;
		background: @background;
		color: @dark;
		float: left;
		margin: 5px 0px 0px 5px;
		padding: 5px 10px 5px 10px;
	}
	
	div.active {
		background: @highlight;
		color: @background;
	}
}

div.menuhidden {
	height: 32px;
	overflow: hidden;
}

div#screenshot_container {
	width: 960px;
	position: absolute;
	top: 185px;
	padding-bottom: 250px;

	div.grid_4 {
		div.screenshot_cont {
			width: 298px;
			height: 222px;
		
			div.screenshot {
				width: 298px;
				height: 222px;
			}
		}
	}
	
	div.grid_2 {
		div.screenshot_cont {
			width: 138px;
			height: 100px;
		
			div.screenshot {
				width: 138px;
				height: 100px;
			}
		}
	}
	
	div.grid_2:last-child:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	div.screenshot_cont {
		cursor: pointer;
		background-image: url('/img/loader.gif');
		background-repeat: no-repeat;
		background-position: 50% 50%;
		margin-bottom: 20px;
		border: 1px solid @dark;
		
		div.screenshot {
			display: none;
			
			div.hover {
				.no-highlight;
				background-color: @highlighttrans;
				color: @background;
				bottom: 0px;
				padding: 5px;
				text-shadow: 1px 1px 0px @dark;
				border-bottom: 1px solid @dark;
				
				div.title {
					font-weight: bold;
				}
			}
		}
	}
}

div.footer {
	z-index: 50;
	position: fixed;
	bottom: 0px;
	width: 100%;
	
	a {
		color: @highlight;
		font-weight: normal;
	}
	
	div.footer_controller {
		border-bottom: 5px solid @highlight;
		
		div.footer_button {
			.rounded-top;
			cursor: pointer;
			font-weight: bold;
			width: 55px;
			padding: 3px 5px 3px 5px;
			margin-left: 15px;
			background-color: @highlight;
			color: @dark;
		}
	}
	
	div.footer_contents {
		background-color: @dark;
		color: @background;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.9em;
	}
	
	div.copyright {
		color: desaturate(@highlight, 30%);
	}
}

div.screenshot_tone {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 9900;
	background-color: rgba(0,0,0,0.7);
}

div.screenshot_viewer {
	display: none;
	
	z-index: 9999;
	position: fixed;
	top: 50px;
	left: 50px;
	
	border: 1px solid @dark;
	background: @background;
	background-image: url('/img/loader.gif');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	-moz-box-shadow: 0 0 2px 2px @highlight;
	-webkit-box-shadow: 0 0 2px 2px @highlight;
	box-shadow: 0 0 2px 2px @highlight;
}