/*** IE6 bis IE8 ************************************/
html.ie6 #wrapper,
html.ie7 #wrapper,
html.ie8 #wrapper {
	width: 97.40518962%;												/* 976px / 1002px */	
	width: 61em;														/* 976px / 16px */								
}

html.ie6 #image-container,
html.ie7 #image-container,
html.ie8 #image-container {
	width: 99.79508197%;												/* 974px / 976px */													
}

	html.ie6 #images,
	html.ie7 #images,
	html.ie8 #images,
	html.ie6 #description,
	html.ie7 #description,
	html.ie8 #description {
		margin: 0 0 0 .2049180328%;										/* 2px / 976px */
		width: 49.79508197%;											/* 486px / 976px */
	}

	html.ie6 #images,
	html.ie7 #images,
	html.ie8 #images {
		float: left;
		overflow: hidden;
	}
	
	html.ie6 #description,
	html.ie7 #description,
	html.ie8 #description {
		float: right;
	}

html.ie6 #portfolio-container li,
html.ie7 #portfolio-container li,
html.ie8 #portfolio-container li {
	float: left;
	margin: 0 0 .125em .2049180328%;
	width: 24.79508197%;
}

html.ie6 #about,
html.ie7 #about,
html.ie8 #about,
html.ie6 #contact,
html.ie7 #contact,
html.ie8 #contact {
	float: left;
	margin: 0 0 .125em .2049180328%;									/* 2px / 16px, 2px / 746px */
	width: 49.7950819728%;												/* 371px / 746px */
}

/*** 1. General ************************************/

body {
	background: url('../img/bg.jpg') #111;
	color: #e8e8e8;
	font: normal 100% 'TitilliumText22LLight', Arial, sans-serif;
}

h1 {
	font: normal 1.5em/1em 'WisdomScriptAIRegular';							/* Size: 24px / 16px, Line-Height: 24px */
}

h2 {
	font: normal 1.5em/1em 'TitilliumText22LMedium', Arial, sans-serif;		/* Size: 24px / 16px, Line-Height: 24px */
}

h3,
h4 {
	font: normal 2em/1em 'TitilliumText22LLight', Arial, sans-serif;		/* Size: 32px / 16px, Line-Height: 24px */
}

p,
li {
	line-height: 1.4em;
}

a {
	color: #a8a8a8;
	text-decoration: none;
}

a.active {
	color: red;
}

a:hover,
a.active:hover {
	color: #fff;
}

/*** 3. Layout *************************************/

#wrapper {
	margin: 0 auto 2.5em auto;												/* 40px / 16px */
	width: 93.75%;															/* 300px / 320px */
}

#header h1 {
	background-image: url('../img/bg-branding.png');
	height: 50px;
	margin: 0 auto 1em auto;
	padding: 45px 40px 35px 40px;
	text-align: center;
	width: 124px;
}

#nav-main {
	margin: 0 auto;
	overflow: auto;
	width: 290px;
}

	#nav-main li {
		float: left;
		margin: 0 0 0 16px;
		width: 86px;
	}
	
	#nav-main li.first {
		margin: 0;
	}
	
	#nav-main li a {
		background-image: url('../img/buttons-sprite.png');
		color: #aaa;
		display: block;
		height: 56px;
		padding: 9px 0 0 0;
		text-align: center;
		width: 86px;
	}
	
	#nav-main li a:hover {
		color: #fff;
	}
	
	#nav-main li a:active {
		background: url('../img/buttons-sprite.png') -87px 0px;
	}
	
/*** 3.2 Portfolio *********************************/

h2 {
	margin: 1em 0 0 0;														/* 16px / 16px */
	padding: .5em 0;														/* 8px / 16px */
}

/*** 3.2.1 Description *****************************/

#description {
	background-color: #e8e8e8;
	color: #111;
	margin: 0 0 .125em 0;
	/*padding: 1em;*/
}

	#description h4 {
		height: .8em;
		/*margin: 0 0 .5em 0;*/
		padding: .5em;
	}
	
	#description h4 a {
		float: right;
		height: 24px;
		overflow: hidden;
		width: 24px;
	}
	
	#description h4 a:hover img {
		position: relative;
			left: -24px;
	}
	
	#description p {
		padding: 0 1em 1em 1em;
	}

/*** 3.2.2 Image-Container ****************************/

#image-container {
	margin: 0 0 2.5em 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}
	
	#image-container ul {
		overflow: auto;
		/* wird durch JavaScript ersetzt */
		width: 400%;
	}
	
	#image-container ul li {
		float: left;
		/* wird durch JavaScript ersetzt */
		width: 25%;
	}
	
	#image-container ul li img {
		display: block;
		width: 100%;
	}

	#image-paging {
		background-color: #e8e8e8;
		color: #111;
		/*overflow: auto;
		text-align: center;*/
		text-align: center;
	}
	
		#image-paging div {
			/*margin: 0 auto;
			width: 10em;*/
			padding: 1em 0;
		}
		
		#image-paging div span a {
			display: inline-block;
			height: 1em;
			padding: 0 1em;
		}
		
		/*#image-paging div {
			margin: 0 auto;
			height: 2.9em;
			width: 10em;
		}
		
		#image-paging span {
			display: block;
			float: left;
			height: .9em;
		}*/
		
		/*#current-page,
		#next a,
		#prev a {
			padding: 1em;
		}
		
		#next a {
			float: right;
		}
		
		#prev a {
			float: left;
		}*/
		
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

	.video-container iframe,  
	.video-container object,  
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
		
/*** 3.2.3 Portfolio Navigation & Items ************/

#portfolio {
	overflow: hidden;
}

#portfolio-container {
	clear: left;
	display: block;
}

	/* Allgemein */	
	#portfolio-container li,
	#portfolio-container li dl dt,
	#portfolio-container li dl dd {
		margin: 0 0 .125em 0;												/* 2px / 16px */
	}
	
	#portfolio-container li ol li {
		float: none;
		margin: 0;															/* obige Styles für ol aufheben */
		width: 100%;
	}

	/* Arbeiten */
	
	#portfolio-container li dl {
		color: #111;
	}
	
	#portfolio-container li dl dt {
		background-color: #e8e8e8;
		/*overflow: auto;*/
	}
	
	#portfolio-container li dl dt h4 {
		height: .8em;
		padding: .5em;
	}
	
	#portfolio-container li dl dt h4 a {
		display: block;
		float: right;
		height: 24px;
		overflow: hidden;
		width: 24px;
	}
	
	#portfolio-container li dl dt h4 a:hover img {
		margin: 0 0 0 -24px;
	}
	
	#portfolio-container li dl dt p {
		padding: 0 1em 1em 1em;
	}
	
	#portfolio-container li dl dd a {
		display: block;
	}
	
	#portfolio-container li dl dd a img {
		display: block;
		width: 100%;
	}
	
	/* Navigation */

	.portfolio-nav {
		position: relative;
	}
	
		.portfolio-nav a {
			color: #111;
			display: block;
		}
		
		.portfolio-nav a:hover {
			color: #fff;
		}
		
		.portfolio-nav a.active {
			color: #fff;
		}
		
		.portfolio-nav a.active:hover {
			color: #fff;
		}
		
		.portfolio-nav a h3 {
			padding: .5em;													/* 16px / 32px */
			position: absolute;
				top: 0;
		}
		
		.portfolio-nav a ol {
			padding: 1em;													/* 16px / 16px */
			position: absolute;
				bottom: 0;
		}
		
		.portfolio-nav a img {
			display: block;
			width: 100%;
		}
		
		.portfolio-nav a span {
			display: block;
			font-size: 2.5em;												/* 40px / 16px */
			margin: -.2em 0 0 0;
			position: absolute;
				right: .5em;
				top: 50%;
			width: .5em;
		}
		
/*** 3.3 About *************************************/

#about {
	overflow: auto;
	position: relative;
}
	
	#second-col img {
		display: none;
		margin: 0 auto;
	}

	#about h3,
	#about ul {
		background-color: #111;
		color: #e8e8e8;
	}
	
	#about h3 {
		height: .8em;
		padding: .5em;
	}
	
	#about h3 a {
		background-color: #111;
		color: #e8e8e8;
		display: block;
	}
	
	#about h3 a:hover {
		position: relative;
			left: .5em;
	}
	
	#about ul {
		margin: 0 0 .125em 0;
		padding: 0 1em 1em 1em;
	}

/*** 3.4 Contact ***********************************/

#contact h3 {
	background-color: #111;
	color: #e8e8e8;
	height: .8em;
	padding: .5em;
}

#hcard-Lukas-Mayerhofer div,
#hcard-Lukas-Mayerhofer span {
	background-color: #111;
	color: #e8e8e8;
	display: block;
	margin: 0 0 .125em 0;
	padding: 0 1em 1em 1em;
}

	#hcard-Lukas-Mayerhofer .adr div,
	#hcard-Lukas-Mayerhofer .adr span {
		padding: 0;
	}
	
	#hcard-Lukas-Mayerhofer .adr span {
		display: inline;
	}
	
	#hcard-Lukas-Mayerhofer a {
		color: #e8e8e8;
		display: block;
		width: 100%;
	}
	
	#hcard-Lukas-Mayerhofer a:hover {
		position: relative;
			left: .5em;
	}
	
/*** 4. Media Queries ******************************/

@media screen and (min-width: 768px) {										/* 746px => 2 Spalten */
	#wrapper {
		overflow: auto;
		width: 97.13541667%;												/* 746px / 768px */
	}
	
	h2 {
		clear: left;
	}
	
	#image-container {
		width: 99.7319034947%;												/* 744px / 746px */
	}
	
	#portfolio-container {
		/*margin: 0 0 0 -.2680965147%;										/* 2px / 746px */
		/*overflow: auto;*/
	}
	
		#portfolio-container li,
		#about,
		#contact {
			float: left;
			margin: 0 0 .125em .2680965147%;								/* 2px / 16px, 2px / 746px */
			width: 49.73190349%;											/* 371px / 746px */
		}
}

@media screen and (min-width: 1002px) {										/* 976px => 4 Spalten */
	#wrapper {
		width: 97.40518962%;												/* 976px / 1002px */	
		width: 61em;														/* 976px / 16px */								
	}
	
	#image-container {
		width: 99.79508197%;												/* 974px / 976px */													
	}
	
		#images,
		#description {
			margin: 0 0 0 .2049180328%;										/* 2px / 976px */
			width: 49.79508197%;											/* 486px / 976px */
		}
	
		#images {
			float: left;
			overflow: hidden;
		}
		
		#description {
			float: right;
		}
	
	#portfolio-container li {
		float: left;
		margin: 0 0 .125em .2049180328%;
		width: 24.79508197%;
	}
	
	#about,
	#contact {
		float: left;
		margin: 0 0 .125em .2049180328%;									/* 2px / 16px, 2px / 746px */
		width: 49.7950819728%;												/* 371px / 746px */
	}
}