/* !FILE BASE IMPORTING
---------------------------------------------- */
@import "base/boilerplate";
@import "base/mixins";
@import "base/settings";
@import "base/calculations";
/* @import "base/font-face"; */
@import "base/base";

//-------------------------------- end ------


/* ! ---------------------------------------------------------------------
----------------------------------------------- */
::-moz-selection { background: @complementary; color: #fff; text-shadow: none; }
::selection { background: @complementary; color: #fff; text-shadow: none; }

html { 
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(left,  #f9f9f9 0%, #e7e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f9f9f9), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #f9f9f9 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #f9f9f9 0%,#e7e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #f9f9f9 0%,#e7e7e7 100%); /* IE10+ */
background: linear-gradient(left,  #f9f9f9 0%,#e7e7e7 100%); /* W3C */
	
}

body {
/* 	background: url(../../img/test.png) no-repeat left bottom fixed; */
	padding: 0 @gutter;
	padding-bottom: @row * 2;
}

h1 {
	@fontratio: 1;
	
	font-size: @fontsize;
	line-height: @row;		
	margin: @row * 2 0 @row;
	font-family: @subtitles;
	font-style: italic;
	font-family: utopia-std;
	text-align: center;
	color: @secondary;
		
}

h2 {
	@fontratio: 1.3;

	line-height: @row * 2;	
	font-size: @fontsize;
	margin-bottom: @row * 2;
	letter-spacing: .01em;
	color: lighten(@primary, 20%);
/* 	text-transform: uppercase; */
		
}

h3 {
	@fontratio: 1.1;
	
	line-height: @row;
	font-size: @fontsize;
	margin-top: -3px;
	margin-bottom: @row;
	color: @complementary;
/* 	border-bottom: 3px double desaturate(lighten(@complementary, 40%), 20%) ; */
}

h4 {
	@fontratio: .75;
	
	line-height: @row;
	font-size: @fontsize;
	margin-bottom: 0;
	text-transform: uppercase;
	color: darken(@primary, 10%);
}

p {
/*
	@fontratio: 1.25;
	
	color: @primary;
	line-height: @row;
	font-size: @fontsize;
*/
	letter-spacing: .01em;
}

/* !Primary Elements ---------------------------------------------------------------------
----------------------------------------------- */

h1.primary {
	@columns: 2;
	@parentpadding: 4;
	
	width: @width;
	position: fixed;
	top: 0;
	margin-top: @row * .25;
	
	img { width: 100%; margin-bottom: @row; }
}

nav.primary {
	@columns: 7;
	@spacer: 2;
	@parentpadding: 4;
	
	width: @width;
	position: fixed;
	left: 0;
	margin-left: @spacing + @gutters * 1.5;
	padding-right: @row;
	z-index: 10;
	border-bottom: 1px solid lighten(@primary, 30);
	

		.transparency(245,245,245,.8,73ffffff);
	
	a {
/*
		@columns: 2;
		@parentcolumns: 6;
*/
		@fontratio: .9;
/* 		@parentpadding: 0; */
		
		position: relative;
		font-size: @fontsize;
		float: left;
/* 		width: @width; */
/* 		padding: 0 @row; */
		text-align: center;
		line-height: @row * 2.75;
		text-transform: uppercase;
		color: darken(@primary, 10%);
		border-top: @row * .25 solid transparent;
	
	+ a {
		margin-left: @row;		
	}
	
	&:hover {
		border-color: darken(@primary, 10%);
	}
	
	&.active {
		color: @secondary;
		border-color: @secondary;
		}
	}
	
}

section.primary {
	@columns: 7;
	@spacer: 2;
	
	width: @width;
	position: relative;
	padding-top: @row * 6.125;
	left: @spacing + @gutters;
	clear: both;
	border-bottom: 1px solid lighten(@primary, 40%);
	overflow: hidden;
	
	> h2 {
		@parentcolumns: 7;
		@columns: 6;
		
		width: @width; }
		
	> img {
		position: relative; 
		z-index: -1; 
		opacity: .3; }

	> p { 
		@parentcolumns: 7;
		@columns: 5;
		
		width: @width;
		overflow: hidden; }
		
	> ul {
		margin-top: @row * 2; }
	
	> aside {
		@columns: 2;
		@parentcolumns: 7;
		
		position: relative;
		float: right;
		width: @width;
			background: white; 
		text-align: center;		
		padding-bottom: @row * .25;
			border: white @row * .25 solid;
		
		img {
			width: 100%;
			position: relative;
			margin-bottom: @row * .25;
			outline: 1px solid gray;
		}
		
		h4 { 
			@fontratio: .75;
		
			display: inline;
			color: @complementary; 
			padding: @row * .25;
			line-height: @row * .5;
			top: @row * .5;
		
/*
		&:before {
			content: "";
			position: absolute;
			height: 0;
			border-top: 1px white solid;
			bottom: @row * .25;
			width: 100%;
			left: 0;
			z-index: -1;
			}
*/
		}
	}
}

footer.primary {
	@columns: 7;
	@spacer: 2;
	@parentpadding: 4;
	
	width: @width;
	position: fixed;
	left: 0;
	margin-left: @spacing + @gutters * 1.5;
	padding: @row * .5 0;
	padding-right: @row;
	z-index: 10;
	border-top: 1px solid lighten(@primary, 40%);
	bottom: 0;
	height: @row;

	.transparency(245,245,245,.8,#73f6f6f6);
	
	span, a {
		@columns: 2;
		@parentcolumns: 7;
		@parentpadding: 0;
		@fontratio: .6;
		
		font-size: @fontsize;
		width: @width;
		line-height: @row * .5;
		display: block;
		float: left;
		margin-right: @gutter;
		padding-left: @gutter;
		border-left: 1px solid lighten(@primary, 40%);
		margin-left: -1px;

	&:first-child {
		margin-right: @gutters;
		padding-left: 0;
		border-left: none;
	}
			
	&.copyright {
		@columns: 1;
			
			width: @width + @gutters;
			color: lighten(@primary, 20%);
			float: right;
			margin-right: -@gutters;
			padding-left: 0;
			border: 0;
	}
	&.address {
			color: @complementary;
			border-top: @row * .125 solid transparent;
			text-decoration: none;
			height: @row * 1.5;
			padding-top: @row * .5;
		margin-top: -@row * .625;
		margin-right: 0;
		padding-right: @gutters;

		
	&:hover {
		border-top-color: darken(@primary, 10%);
		background: white;
		}
	}
	&.phone {
		@fontratio: 1.4;

		color: @secondary;			
		font-size: @fontsize;
		line-height: @row * 2;
		margin-top: -@row * .5;
		letter-spacing: .02em;		
		
		b { color: lighten(@primary, 20%); }
	}
	
	&.email {
		@fontratio: 1.4;
		
		font-size: @fontsize;
		line-height: @row * 2;
		margin-top: -@row * .625;
		text-decoration: none;
		color: darken(@primary, 10%);
		border-top: @row * .125 solid transparent;
		
	&:hover {
		border-top-color: darken(@primary, 10%);
		background: white;
		}
	}
	}

	
}

#expertise section {
	@columns: 3;
	@parentcolumns: 7;
	
	width: @width;
	float: left;
	
		margin-right: @gutters;
	
/* 	&:last-child */
}

#experiences {
	ul {
		@columns: 5;
		@parentcolumns: 7;
		
		width: @width;
		padding-left: @row * 1.6;
		list-style: none;
		
		li { position: relative; margin-bottom: @row; margin-top: -2px; }
		
		h3 {
			@fontratio: 1;
			
			display: inline;
			font-size: @fontsize;
			line-height: @row;
			border: 0;
			margin-top: 0;
		}
		h5 { display: inline; padding: 0 @row * .25; }
		
		h4 { border-top: 1px solid lighten(@primary, 30%); }
		
		.date {
			@fontratio: .7;
			
			font-size: @fontsize;
			line-height: @row * .5;
			color: white;
			position: absolute;
			display: block;
			width: @row * 1.25;
			top: 0;
			left: -@row * .8;
			margin-left: -@row * .75;
			margin-top: @row * .2;
			padding: @row * .35 0;

			background: lighten(@primary, 38%);
			height: @row;
			text-align: center;
		}
	}
}

#services, #clientele {
	ul {
		@columns: 6;
		@parentcolumns: 7;
		
		list-style: none;
		padding: 0;
		width: @width;

		-moz-column-count: 2;
		-moz-column-gap: 0;

		li {
			@columns: 7;
			@fontratio: .925;
	
			font-size: @fontsize;
			color: @complementary;
			line-height: @row;
			padding: @row * .25 0;
			text-indent: @row;
			
		&:nth-child(odd) {
			background-color: lighten(@primary, 46%);
			}
		&:nth-child(even) {
/* 			float: right; */
/* 			border-left: 1px solid @primary; */
			}
		}
	}
}

#profil {
	img { 
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.name { text-transform: uppercase; letter-spacing: 0; font-size: 1.1em; font-weight: normal; color: @complementary; }

mark {
	position: relative;
	display: inline-block;
	color: lighten(@primary, 10%);
	background: none;
	border-bottom: dashed 1px @complementary;
	padding: 0 @row * .125;
	margin: 0 -@row * .125;

	margin-bottom: -1px;
	
	.transition(background);
	
&:hover {
	background: lighten(@primary, 45%);
	color: lighten(@complementary, 35%);
	border-bottom: none;
	margin-bottom: 0;	
	cursor: help;

/* 	.border_radius_top(10px); */

	
	.definition { opacity: 1; }
}
}

.definition {
	@fontratio: .4;
	@parentfont: 1.25;

	font-size: @fontsize;
	position: absolute;
	bottom: 115%;
	left: 0;
	color: gray;
	display: block;
	opacity: 0;
	line-height: @row * .5;
	width: 25em;
	border-top: 1px solid white;
	border-bottom: 1px solid lighten(@primary, 35%);
	background: lighten(@primary, 45%);
	padding: @row * .125 @row * .25;
	font-weight: 100;
	cursor: text;
	text-transform: none;
/* 	.box_shadow(0,1px,1px,0,fadeout(@primary, 80%)); */

	.transition();
	

/* 	.border_radius_right(20px); */
	
	&:after {
		content: "";
		display: block;
		position: absolute;
		bottom: -.65em;
		left: @row * .125;

		height: 0;
		width: 0;
		border-left: 0.75em solid transparent;
		border-top: .75em solid lighten(@primary, 45%);
		border-bottom: 0;
		border-right: 0.75em solid transparent;
		}
	
	&:before {
/*
		@fontratio: .8;
		@parentfont: 1.25 *.4;
*/
		
/* 		font-size: @fontsize; */
		content: attr(title);
		position: absolute;
		top: -@row * .65;
		line-height: @row * .5;
		padding: @row * .05 0;
		text-align: left;
		left: 0;
		width: 100%;
		display: block;
		border-top: 1px solid lighten(@primary, 46%);
		text-transform: uppercase;
		color: @primary;
		text-indent: @row * .25;
		background: lighten(@primary, 48%);
/* 		.transparency(255,255,255,.9,#c0ffffff); */
		
		}
	
	dfn {
		font-style: normal;
		color: @complementary;
	}
}


/* !SUPPORT AND ADDITIONAL FILES IMPORTING
----------------------------------------------- */
@import "additional/ie-specifics";
@import "additional/media-queries";