@color_dark: #2d2d2d;
@color_base: #4c4c4c;
@color_light: #cccccc;
@color_bright: #ffffff;
@color_highlight: #f7941e;
@color_error: #BD4932;

/* Fonts */

/*
@font-face { font-family: 'Helvetica Neue'; font-weight: normal; src: url('/fileadmin/template/fonts/Helvetica_Neue_CE_55_Roman.ttf'); } 
@font-face { font-family: 'Helvetica Neue'; font-weight: bold; src: url('/fileadmin/template/fonts/Helvetica_Neue_CE_75_Bold.ttf'); }
@font-face { font-family: 'Helvetica Neue'; font-weight: light; src: url('/fileadmin/template/fonts/Helvetica_Neue_CE_35_Thin.ttf'); }
*/

/* Mixins */

.border-box {
	box-sizing: border-box;
}

.display-box {
	width: 100%;
	
	display: box;
}

.box-flex(@ratio: 1) {
	box-flex: @ratio;
}

.box-orient-vertical {
	box-orient: vertical;
}

.box-orient-horizontal {
	box-orient: horizontal;
}

.box-align-start {
	box-align: start;
}

.box-align-center {
	box-align: center;
}

.box-align-end {
	box-align: end;
}

.glossy-highlight(@height: 16px, @color: rgba(255,255,255,0.1)) {
	@val: inset @color 0px @height 0px;
	
	box-shadow: @val;
}

.rounded-corners(@radius: 8px) {
	border-radius: @radius;
}

.rounded-corners-left(@radius: 8px) {		
	border-top-left-radius: @radius;
	border-bottom-left-radius: @radius;
}

.rounded-corners-right(@radius: 8px) {		
	border-top-right-radius: @radius;
	border-bottom-right-radius: @radius;
}

.background-gradient(@orientation: top, @color1, @color2) {
	background: @color2;
	background: linear-gradient(@orientation, @color1, @color2);
}

.box-shadow(@params: rgba(0,0,0,0.5) 0px 5px 10px) {
	box-shadow: @params;
}

.clear-fix {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Reusables */

img {
	border: 0px none;
}

.page-row {
	width: 100%;
}

.center-block {
	width: 960px;	

	margin: 0px auto;
}

a {
	color: @color_highlight;
	text-decoration: none;
	
	&:hover {
		color: @color_highlight + #333
	}
	
	&:visited {
		color: @color_highlight - #333;
	}
}

.candybar {
	display: inline-block;
		
	margin: 32px 0px 0px 0px;
	padding: 0px;
	
	list-style: none;
	
	font-size: 0px;
	line-height: 0px;
			
	a {
		display: inline-block;
		
		margin: 0px;
		padding: 6px 16px;
		
		color: @color_light;
		text-decoration: none;
		
		.background-gradient(top, @color_dark, @color_dark - #111);
					
		.glossy-highlight(12px);
		
		&:hover {
			color: @color_bright;
		}
		
		&.active {
			color: @color_bright;
			
			.background-gradient(top, @color_highlight, @color_highlight - #333);
		}
	}
	
	li {			
		display: inline-block;
				
		margin: 0px;
		padding: 0px;
		
		font-size: 12px;
		line-height: 12px;
		
		border-right: 1px solid @color_dark;
		border-left: 1px solid @color_base;
		
		&:first-child {
			border-left: 1px solid transparent;
			
			a {
				.rounded-corners-left(8px);
			}
		}
		
		&:last-child {
			border-right: 1px solid transparent;
			
			a {
				.rounded-corners-right(8px);
			}
		}
	}
}

.frame {
	padding: 8px;

	background: @color_bright;

	.box-shadow(rgba(0, 0, 0, 0.5) 2px 4px 8px);
}

h1 {
	font-family: Times New Roman, Times, serif;
	/*font-family: 'Helvetica Neue', sans-serif;*/
	font-weight: normal;
	font-size: 2em;
	line-height: 1.5em;
	color: @color_base;
}

form {
	label {
		display: block;
		
		margin: 16px 0px 4px 0px;
	}
	
	input, textarea {
		.border-box;
	
		width: 100%;
	
		margin: 0px;
		padding: 6px 4px;
		
		color: @color_base;
		
		border: 2px solid @color_base;
			
		.rounded-corners(4px);
		
		background: @color_bright;
		
		outline-width: 0px;
		
		&:focus {
			border: 2px solid @color_highlight;
		}
	}
	
	.processing {
		background: url(/fileadmin/template/images/layout/loading-highlight.gif) no-repeat top center @color_highlight;
	
		&:hover {
			background: url(/fileadmin/template/images/layout/loading-highlight.gif) no-repeat top center @color_highlight;
		}
	
		.label {
			visibility: hidden;
		}
	}
}

.response-container {
	display: none;
	
	margin: 0px;
	padding: 32px;

	color: @color_bright;

	&.error {
		border: 4px solid @color_error;
		
		background: @color_error + #333;
	}
	
	&.success {
		border: 4px solid @color_highlight - #333;
		
		background: @color_highlight;
	}
}

.display-group {
	.display-box;
	
	.fbox1 {
		width: 100px;
		
		.box-flex(1);
		
		padding-left: 32px;
		padding-right: 32px;
		
		&:first-child {
			padding-left: 0px;
		}
		
		&:last-child {
			padding-right: 0px;
		}
	}
}

button, .button {
	padding: 8px 16px;

	font-size: 16px;
	line-height: 16px;
	
	.glossy-highlight(16px);
	
	color: @color_bright !important;
		
	.background-gradient(top, @color_highlight, @color_highlight - #333);
	
	.rounded-corners(8px);
	
	border: none;
	
	cursor: pointer;
	
	&:hover {
		.background-gradient(top, @color_highlight, @color_highlight - #222);
	}
}

.loading {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 32px;
	height: 32px;

	margin-top: -16px;
	margin-left: -16px;

	background: url(/fileadmin/template/images/layout/loading-dark.gif) no-repeat;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-justify {
	text-align: justify;
}

.align-right {
	text-align: right;
}

.margin-none-top {
	margin-top: 0px;
}

.margin-big-top {
	margin-top: 32px;
}

h1.candy {
	padding: 32px;
	
	font-size: 3em;
	line-height: 16px;
	
	.glossy-highlight(40px);
	
	color: @color_bright !important;
		
	.background-gradient(top, @color_highlight, @color_highlight - #333);
	
	.rounded-corners(8px);
}

h1.glassy {
	padding: 32px;
	
	font-size: 3em;
	line-height: 16px;
	
	.glossy-highlight(40px);
	
	color: @color_bright !important;
		
	.background-gradient(top, @color_dark + #111, @color_dark - #111);
	
	.rounded-corners(8px);
}

h1.classy {
	padding: 32px;
	
	font-size: 3em;
	line-height: 16px;
		
	color: @color_base !important;
	text-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px;
		
	background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(/fileadmin/template/images/layout/paper-base.jpg);
	
	.rounded-corners(8px);
	
	.box-shadow(inset rgba(0, 0, 0, 0.5) 0px 4px 8px);
}


article {
	padding: 64px 0px;

	.display-box;
	
	background: url(/fileadmin/template/images/layout/seperator.jpg) no-repeat;
	
	&:first-child {
		background: transparent;
	}
	
	section {
		width: 100px;
		
		.box-flex(3);
		
		padding-right: 32px;
		
		h1 {
			color: @color_base;
		}
	}
	
	aside {
		width: 100px;
	
		.box-flex(1);
		
		a {
			padding: 0px 0px 4px 0px;
		
			background: @color_dark;
			
			&:hover {
				background: @color_highlight;
			}
		}
	}
}

.vignette {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100%;
	height: 100%;
	
	.box-shadow(inset rgba(0, 0, 0, 0.5) 0px 2px 8px);
	
	z-index: 2;
	
	pointer-events: none;
}

/* Markups */

html {
	position: relative;
	
	width: 100%;
	min-height: 100%;
	
	margin: 0px;
	padding: 0px;
}

body {
	position: relative;
	
	width: 100%;
	min-height: 100%;
	
	margin: 0px;
	padding: 0px;
	
	font-size: 16px;
	font-family: Arial, sans-serif;
	line-height: 1.6em;
	color: @color_light - #222;
		
	background: @color_dark;
	background: url(/fileadmin/template/images/layout/watermark.png) no-repeat bottom right, url(/fileadmin/template/images/layout/paper-dark.jpg);
}

#page-navigation {	
	position: relative;

	background: @color_dark;
	
	/*.box-shadow(#000 0px 4px 8px);*/

	z-index: 2;

	a {
		display: inline-block;
	
		padding: 8px 16px;
	
		color: @color_light;
		text-decoration: none;
				
		&:hover {
			color: @color_bright;
			
			background: @color_base;
		}
		
		&.active {
			color: @color_bright;
		}
	}

	ul {		
		padding: 0px;
	
		list-style: none;
		
		font-size: 0px;
		line-height: 0px;
		
		li {
			position: relative;
		
			display: inline-block;
			
			padding: 0px;
			
			font-size: 16px;
			line-height: 16px;
		}
	}
}

#portfolio-navigation {	
	display: block;

	position: relative;
	
	.box-shadow(inset #000 0px 4px 8px);

	z-index: 1;
		
	.center-block {
		padding-bottom: 32px;
	}
		
	#crumbs {
	
	}
	
	#years {
		margin-top: 32px;
		
		ul {
			.display-box;
				
			margin: 0px;
			padding: 0px;
			
			list-style: none;
			
			font-size: 0px;
			line-height: 0px;
					
			a {			
				display: inline-block;
				
				width: 100%;
				
				padding: 32px 0px;
			
				color: @color_light;
				text-decoration: none;
				
			}
			
			li {			
				.box-flex(1);
										
				margin: 0px;
				padding: 0px;
				
				font-size: 16px;
				line-height: 16px;
				text-align: center;
				
				.background-gradient(top, @color_dark, @color_dark - #111);
				
				border-right: 1px solid @color_dark - #222;
				border-left: 1px solid @color_base;
				
				&:hover {
					.background-gradient(top, @color_dark + #111, @color_dark);
				}
				
				&:first-child {
					border-left: 1px solid transparent;
					
					.rounded-corners-left(8px);
				}
				
				&:last-child {
					border-right: 1px solid transparent;
					
					.rounded-corners-right(8px);
				}
			}
		}
	}
	
	#projects {
		margin-top: 32px;
	
		ul {
			display: block;
			
			margin: 0px;
			padding: 0px;
			
			list-style: none;
			
			&:after {
				.clear-fix;
			}
			
			a {
				display: block;
				width: 64px;
				height: 64px;
				
				padding: 0px 0px 4px 0px;
			
				background: transparent;
				
				&:hover {
					background: @color_highlight;
				}
				
				&.active {
					background: @color_highlight;
				}
				
				img {
					width: 64px;
					height: 64px;
				}
			}
			
			li {
				display: block;
				
				width: 64px;
				height: 68px;
							
				margin: 0px 16px 16px 0px;
				padding: 0px;
							
				float: left;
			}
		}
	}
}

#content-container {
	position: relative;

	padding: 32px 0px;
	
	/*.box-shadow(#000 0px 4px 8px);*/
	
	background: url(/fileadmin/template/images/layout/bokeh-03.jpg) no-repeat center @color_dark;
	background-size: cover;
	
	z-index: 0;
	
	#content {
		position: relative;	
		
		.border-box;		
			
		padding: 32px;
					
		background: @color_bright;
		
		.box-shadow(rgba(0, 0, 0, 0.5) 0px 4px 8px);
			
		z-index: 1;
			
		#portfolio-full-container {	
			position: relative;
					
			width: 960px - 64px;
			
			#gallery-navigation {						
				position: absolute;
				top: 0px;
				left: 0px;
				
				z-index: 2;
				
				ul {
					position: absolute;
										
					margin: 0px;
					padding: 0px;
				
					list-style: none;
					
					z-index: 2;
					
					li {
						display: inline-block;
					
						position: absolute;
						top: 220px;
						
						width: 64px;
						height: 64px;
						
						background: @color_bright;
											
						.rounded-corners(8px);
						
						.box-shadow(rgba(0, 0, 0, 0.5) 0px 4px 8px);
												
						cursor: pointer;
																	
						&.previous {
							left: -16px;
						}
						
						&.next {
							left: 960px - 128px + 16px;
						}
						
						.arrow {
							position: absolute;
						
							display: block;
							
							width: 0px;
							height: 0px;
							
							overflow: hidden;
							
							line-height: 0px;
							font-size: 0px;		
															
							border-style: solid;
							border-width: 8px;
							
							&.left {
								top: 24px;
								left: 18px;
							
								border-color: transparent @color_dark transparent transparent;
							}
							
							&.right {
								top: 24px;
								left: 28px;
								
								border-color: transparent transparent transparent @color_dark;
							}
						}
					}
				}
			}
			
			#portfolio-full {	
				position: relative;
					
				min-height: 504px;
				
				line-height: 0px;
				text-align: center;
				
				background: @color_dark;
				
				z-index: 1;
				
				img {			
					border: none;
				}
				
				.error {
					padding: 32px;
					
					h1 {
						color: @color_error;
					}
				}
			}
			
			#portfolio-title {
				
				.border-box;
				
				width: 960px - 64px;
				min-height: 64px;
				
				padding: 8px 16px;
				
				font-size: 16px;
				color: @color_light;
				line-height: 2em;
				
				background: @color_dark;
				
				border-top: 4px solid @color_highlight;
			}
		}	
		
		#portfolio-overview {
			padding: 32px;
		
			.background-gradient(top, @color_dark + #111, @color_dark);
			
			.rounded-corners(8px);
			
			&:after {
				.clear-fix;
			}
					
			.item {
				.border-box;
			
				width: 276px;
			
				margin: 0px;
				padding: 16px;
				
				font-size: 12px;
				line-height: 2em;
				text-align: center;
				
				float: left;
				
				.thumbnail {
					display: inline-block;
				
					position: relative;
							
					margin: 0px;
					padding: 0px;
				
					font-size: 0px;
					line-height: 0px;
																				
					img {
						position: relative;
						
						z-index: 1;
					}
				}
				
				.description {
					height: 160px;
				
					margin-top: 32px;
				
					text-align: justify;
					
					h1 {
						color: @color_light;
					}
				}
			}
		}
		
		#featured {
			.description {
				height: 160px;
			}
		
			#featured-main {
				padding: 32px;
			
				.background-gradient(top, @color_dark + #111, @color_dark);
				
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				
				border-bottom: 1px solid @color_dark - #222;
				
				.thumbnail {
					position: relative;
					
					display: inline-block;
					
					font-size: 0px;
					line-height: 0px;
					
					img {
						position: relative;
						
						z-index: 1;
					}
				}
				
				.description {
					margin-top: 32px;
				
					text-align: justify;
					
					h1 {
						color: @color_light;
					}
				}
			}
		
			#featured-thumbs {
				border-top: 1px solid @color_base;
			
				.fbox1 {
					margin: 0px;
					padding: 16px;
					
					font-size: 12px;
					line-height: 2em;
					text-align: center;
					
					.background-gradient(top, @color_dark, @color_dark - #111);
					
					border-right: 1px solid @color_dark - #222;
					border-left: 1px solid @color_base;
					
					&:first-child {
						border-left: 1px solid transparent;
						
						border-bottom-left-radius: 8px;
					}
					
					&:last-child {
						border-right: 1px solid transparent;
						
						border-bottom-right-radius: 8px;
					}
					
					.thumbnail {
						position: relative;
						
						display: inline-block;
						
						font-size: 0px;
						line-height: 0px;
						
						img {
							position: relative;
							
							z-index: 1;
						}
					}
					
					.description {
						margin-top: 32px;
					
						text-align: justify;
						
						h1 {
							color: @color_light;
						}
					}
				}
			}
		}
	}
}

footer {
	.center-block {
		padding: 0px 0px 32px 0px;
	}
	
	color: @color_base;	
	
	.box-shadow(inset #000 0px 4px 8px);
	
	#copyright {
		margin: 0px;
		padding: 32px 0px 0px 0px;
	
		font-size: 12px;
		line-height: 1.6em;
		
		.align-center;
	}
	
	#contact-form {
		.display-group {
			
			section {			
				padding-left: 16px;
				padding-right: 16px;
				
				&:first-child {
					padding-left: 0px;
				}
				
				&:last-child {
					padding-right: 0px;
				}
			}
		}
	}
}