/* RESET BEGIN */
/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, figure, footer, header, 
hgroup, nav, section { display:block; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* RESET END */




/* TWEAKS BEGIN */
/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
          Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages */

body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

/* www.aestheticallyloyal.com/public/optimize-legibility/ */ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a { outline: none; }


/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #FFED00; color:#333; text-shadow: none; }
::selection { background:#FFED00; color:#333; text-shadow: none; }
section.projects article.open *::-moz-selection, 
#projectInfo *::-moz-selection,
#contactText *::-moz-selection						{ background: #000; color:#FFED00; text-shadow: none; }
section.projects article.open *::selection,
#projectInfo *::selection,
#contactText *::selection 							{ background:#000; color:#FFED00; text-shadow: none; }

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FFED00; } 

/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* TWEAKS END */





/* HELPERS BEGIN */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none !important; visibility:hidden !important; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }

/* HELPERS END */








/* PRIMARY STYLES BEGIN */

@font-face {
	font-family: 'NB45RMSRegular';
	src: url('/c/fonts/nb45rms_-webfont.eot');
	src: local('☺'), url('/c/fonts/nb45rms_-webfont.woff') format('woff'), url('/c/fonts/nb45rms_-webfont.ttf') format('truetype'), url('/c/fonts/nb45rms_-webfont.svg#webfontMMRTkQzg') format('svg');
	font-weight: normal;
	font-style: normal;
}


html { 
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 11px;
	line-height: 14px;
}

h1, h2, h3, nav ul, .nb45 {
	font-family: "NB45RMSRegular", monospace;
	font-size: 16px;
	line-height: 17px;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: underline;
}

.width-columns-1 { width: 144px; }
.width-columns-2 { width: 288px; }
.width-columns-3 { width: 432px; }
.width-columns-4 { width: 576px; }
.width-columns-5 { width: 720px; }
.width-columns-6 { width: 864px; }
.width-columns-7 { width: 1008px; }



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////    CONTAINERS    ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#allContainer {
	position: relative;
	min-width: 1167px; /* 144 * 8 + 15 = 8 columns always visible */ 
	/*min-height: 510px;*/
	width: 100%;
	height: 100%;
}
.smallWnd #allContainer { min-width: 879px; /* 144 * 6 + 15 = 6 columns always visible */ }

#content {
	position: relative;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-position: 15px 0;
	background-image: url(../layout/__column__.png);
	overflow: auto;
	z-index: 1000;
}



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////    BACKGROUND    ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#background {
	position: absolute;
	z-index: -1000;
	width: 100%;
	height: 100%;
	z-index: 1;
}

	#background .visual {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		overflow: hidden;
		z-index: 10;
	}
	#background .cycle {}
		#background .cycle-image {
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
		}

		#background .bg-element {
			position: absolute; display: block;
		}

	#background .grid {
		position: absolute;
		left: 0; top: 0;
		width: 100%;
		height: 100%;
		background-image: url(../layout/__grid__.png);
		background-repeat: repeat;
		z-index: 100;
	}





/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////    MENU    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

nav {
	position: relative;
	padding: 11px 0 0 15px;
	height: 45px;
	width: 1152px; /* 8 * 144 */
	
	background: transparent url(../layout/menu-background.png) repeat-x 15px 15px;
}
.smallWnd nav { width: 864px; /* 6 * 144 */ }
	nav ul {
		list-style: none;
		/*border-left: 1px solid #fff;*/
	}
		nav li {
			display: block;
			float: left;
			height: 25px;
			width: 144px;
			overflow: hidden;
			
			line-height: 14px;
		}
		nav .collapsed { width: 24px; }
			nav .collapsed a { width: 24px; }
				nav .collapsed a span { width: 23px; height: 14px; padding: 0; }
					nav .collapsed a span em { display: none; }
		.smallWnd nav .maybe-collapsed { width: 24px; /* makes first-page non-collapsible menu collapse on small windows */ }
		nav .with-submenu { /*border-right: none;*/ }
			nav a {
				display: block;
				width: 144px;
				height: 25px;
				text-decoration: none !important;
			}
				nav a>span {
					display: block;
					float: left;
					margin: 4px 0 7px;
					padding-left: 27px;
					padding-top: 1px;
					width: 116px;
					height: 13px;
					color: #000;
					border: 1px solid #fff;
					/*border-left: none;*/
					/*border-right: none;*/
					text-decoration: none;
					background-color: #fff;
					background-repeat: no-repeat;
					background-position: 0 0;
					background-image: url(../layout/menu-item.png);
					cursor: pointer;
				}
				.windows nav a>span { padding-top: 0; height: 14px; }
					nav a>span>em { font-style: normal !important; display: block; cursor: pointer; }
					.windows nav a>span>em { margin-top: -1px; }
				nav a:hover>span { background-image: url(../layout/menu-item-hover.png); }
				nav .selected a>span { background-image: url(../layout/menu-item-selected.png); }	
				nav .first a>span {/* border-left: 1px solid #fff; */}
		
		nav .with-submenu { width: auto; }
			nav .with-submenu>a { float: left; }
		nav ul ul {
			float: left;
			top : 44px;
			/*border-left: none;*/
		}
			nav ul ul li {
				border-top: none;
				border-bottom: none;
				/*background-color: #fff;*/
			}
				
				nav ul ul li a span { background-image: url(../layout/submenu-item.png) !important; }
				nav ul ul li a:hover span { background-image: url(../layout/submenu-item-hover.png) !important; }
				nav ul ul li.selected a span { background-image: url(../layout/submenu-item-selected.png) !important; }
		
		/*.smallWnd*/ nav ul ul {
			position:absolute;
			left: 15px;
			top: 44px;
			width: 100%;
			/*border-left: 1px solid #fff;*/
			background: transparent url(../layout/menu-background.png) repeat-x 0 4px
		}
			.smallWnd nav ul ul li {
				/*border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;*/
			}

	#languages {
		float: right;
		border-left: none;
		/*border-right: 1px solid #fff;*/
	}
		#languages li {
			width: 48px;
			border-right: none;
			/*border-left: 1px solid #fff;*/
		}
			#languages a {
				width: 20px;
			}


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////    section:  TEXT COLUMNS  &  CONTACT  &  MAIN PAGE   ///////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

section.textColumns, section.contact {
	margin-top: 65px;
	margin-left: 15px;
	max-width: 1153px;
}
.smallWnd section.textColumns, .smallWnd section.contact {
	max-width: 865px;
}
	section.textColumns article, section.contact article  {
		float: left;
		width: 276px;	/*= 2*144 - padding*2 - border*2 */
		height: 365px;
		padding: 5px 6px 5px 5px;
		border: 1px solid #fff;
		border-right: none;
		background: #DADADA;
		text-align: left;
	}
		section.textColumns article h2, section.contact article h2 {
			margin: 1px 0 5px;
		}

	#contactText {
		background-color: #FFED00;
	}
	#impressumText {
		position: relative;
		float: right;
		margin-right: 1px;
	} 	
		#impressumDesign {
			position: absolute;
			bottom: 4px;
		}

	#contactFormContainer {
		background-color: #000;
		width: 143px;
		height: 375px;
		padding: 0;
		overflow: hidden;
	}
		#contactFormContainer .status {
			padding: 5px 6px 5px 5px;
			color: #fff;
		}
	
		#contactForm input, #contactForm textarea, #contactForm a.submit  {
			border: none;
			border-bottom: 1px solid #fff;
			padding: 1px 0 0;
			
			background-color: #000;
			background-repeat: no-repeat;
			color: #fff;

			line-height: 13px;
			outline: none;
		}
		.windows #contactForm input, .windows #contactForm textarea, .windows #contactForm a.submit { padding-top: 0; }
		
		#contactForm input.blur, #contactForm textarea.blur {}
		#contactForm .error { background-color: #FFED00; color: #000;}
		
		#contactForm input  {
			height: 14px;
			padding-left: 10px;
			width: 133px;
			background-image: url(../layout/input.png);
		}
		.windows #contactForm input { height: 15px; }
		.ie #contactForm input { height: 14px !important; }
		
		#contactForm textarea {
			display: block;
			padding: 5px 6px 5px 5px;
			margin: 0;
			width: 132px;
			height: 298px;
			line-height: 14px;
			resize: none;
		}
		.mozilla #contactForm textarea { height: 302px; /* mozilla on mac */ }
		.windows #contactForm textarea  { height: 307px; /* all on PC except IE */ }
		.ie #contactForm textarea { height: 307px; /* IE on PC */ }
		
		
		#contactForm a.submit  {
			display: block;
			height: 14px;
			
			padding-left: 27px;
			padding-top: 2px;
			width: 143px;
			background-image: url(../layout/submit.png);
			background-color: #fff;
			color: #000;
			border: none;
			outline: none;
			text-decoration: none;
		}
		#contactForm a.submit:hover { background-color: #FFED00; }
		
	.mainPageBox {
		position: absolute;
		bottom: 15px;
		width: 288px;	/*= 2*144 */
		height: 189px;
		text-align: left;
		-webkit-hyphens: auto;
		   -moz-hyphens: auto;
		    -ms-hyphens: auto;
		     -o-hyphens: auto;
		        hyphens: auto;
	}
		.mainPageBoxInside {
			height: 88px;
			padding: 5px 6px 5px 5px;
			border: 1px solid #fff;
			border-right: none;
			background: #DADADA;
		}
		.mainPageBoxInside:hover {
			background: #FFF;
			cursor: pointer;
		}
	#infoBox { left: 159px; /* 1 * 144 + 15 */ }
	#shoutBox { left: 447px; /* 3 * 144 + 15 */ }

	#award-logos {
		position: absolute;
		left: 1167px;
		bottom: 15px;
		width: 1px;
	}
	.smallWnd #award-logos {
		left: 879px;
	}
		#award-logos ul {
			list-style: none;
			margin: 0; padding: 9px 0;
			height: 28px;
			background: url("../layout/logos-bakc.png");
		}

		#award-logos ul.width-columns-1 { margin-left: -144px; }
		#award-logos ul.width-columns-2 { margin-left: -288px; }
		#award-logos ul.width-columns-3 { margin-left: -432px; }
		#award-logos ul.width-columns-4 { margin-left: -576px; }
		#award-logos ul.width-columns-5 { margin-left: -720px; }

			#award-logos li { width: 71px; float: left; }
				#award-logos a { display: block; width: 100%; }
				#award-logos img { display: block; margin: 0 auto 0; }
	/*.smallWnd #shoutBox {
		left: 447px; /* 3 * 144 + 15
	}*/


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////    section:  PROJECTS    ////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

section.projects, section.project {
	position: relative;
	margin-top: 65px;
	margin-left: 15px;
	max-width: 1153px;
}
.smallWnd section.projects, .smallWnd section.project {
	max-width: 865px;
}
	section.projects article {
		float: left;
		width: 143px;
		height: 93px;
		border: 1px solid #fff;
		border-right: none;
		background: #DADADA;
		margin-top: -1px;
	}
	section.projects article:hover { background: #fff; }
	section.projects article.nohover { background: #DADADA; }
	
	section.projects article.reflowed {
		position: absolute;
	}
	section.projects article.open, section.projects article.open:hover {
		height: 187px;
		background: #FFED00;
	}
	
	section.projects article.open.with-image { height: 281px; }
	section.projects article.open.long-desc { height: 281px; }
	section.projects article.open.long-desc.with-image { height: 375px; }
		section.projects h3 {
			width: 132px;
			height: 83px;
			padding: 5px 6px 5px 5px;
		}
		section.projects .open h3 { height: auto; }
			section.projects h3 a {
				display: block;
				width: 132px;
				height: 83px;
				text-decoration: none;
				color: #000 !important;
			}
			section.projects .open h3 a { height: auto; }
		
		section.projects .projectInfoTable { padding: 5px 6px 5px 5px; }
		section.projects .projectInfoTable { display: none; }
		section.projects .open .projectInfoTable { display: block; }
		section.projects .with-image .projectInfoTable { bottom: 94px; }
		
		.projectListThumbnail {
			display: none;
			position: absolute;
			bottom: 0;
			width: 143px;
			height: 93px;
			-moz-opacity: 0.7;
			opacity: 0.7;
		}
			.projectListThumbnail img { 
				width: 143px;
				height: 93px;
			}
		.open .projectListThumbnail { display: block; cursor: pointer; }

		.projectSeeMore {
			display: none;
			position: absolute;
			bottom: 0;
			height: 93px;
			width: 143px;
			text-decoration: none !important;
		}
			.projectSeeMore span {
				display: block;
				height: 15px;
				width: 133px;
				margin-top: 78px;
				padding: 0 5px;
				background-color: #FFED00;
				background-repeat: no-repeat;
				color: #000;
			}
			.projectSeeMore:hover span {
				background-color: #fff;
				color: #000;
			}
		.open .projectSeeMore { display: block; }

	section.projects article.masked, section.projects article.masked:hover,
	section.projects article.masking, section.projects article.masking:hover {
		background-color: transparent;
		border: none;
		padding: 1px 0 1px 1px;
	}
	section.projects article.masked {
		background-repeat: no-repeat;
		background-position: top left;
		background-image: url('../layout/project-masked-1.png');
	}
	section.projects article.open.masked {
		background-image: url('../layout/project-masked-2.png');
	}
	section.projects article.open.with-image.masked, 
	section.projects article.open.long-desc.masked {
		background-image: url('../layout/project-masked-3.png');
	}
	section.projects article.open.with-image.long-desc.masked {
		background-image: url('../layout/project-masked-4.png');
	}
		section.projects article .animation {
			position: absolute;
		}
		
		section.projects article.masked .inside,
		section.projects article.masking .inside {
			display: none;
		}

		section.projects article .unfilter { display: none; }
		section.projects article.masked .unfilter {
			position: absolute;
			display: block;
			left: 50%; top: 50%;
			width: 40px;
			height: 30px;
			margin: -15px 0 0 -20px;
			cursor: pointer;
		}
		section.projects article.with-image.masked .unfilter,
		section.projects article.long-desc.masked .unfilter { height: 210px; margin-top: -105px; }
		section.projects article.with-image.long-desc.masked .unfilter { height: 310px; margin-top: -155px; }


	
	section.projects article.text  {
		float: left;
		width: 276px;	/*= 2*144 - padding*2 - border*2 */
		height: 365px;
		padding: 5px 6px 5px 5px;
		border: 1px solid #fff;
		border-right: none;
		background: #DADADA;
		text-align: left;
	}
		section.projects article.text h2 {
			margin: 1px 0 5px;
		}
	
	#projectInfo {
		position: absolute;
		bottom: 15px;
		left: 15px;
		width: 289px;
		height: 187px;
		background: #FFED00;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.projectInfoPlus1 { height: 290px !important; }
	.projectInfoPlus2 { height: 383px !important; }
	.projectInfo1C { width: 144px !important; }


		#projectInfo .column {
			position: relative;
			float: left;
			width: 132px;
			height: 177px;
			padding: 5px 6px 5px 5px;
			border-left: 1px solid #fff;
		}
		.projectInfoPlus1 .column { height: 280px !important; }
		.projectInfoPlus2 .column { height: 373px !important; }
			#projectInfo h1 a { text-decoration: none; }
			#projectInfo .projectInfoTable { padding-bottom: 5px; }
			
			#projectSlideshowPause, #projectSlideshowPlay {
				display: block;
				text-decoration: none;
				text-transform: uppercase;
			}
			#projectMediaNav {
				list-style: none;
				margin: 0;
			}
				#projectMediaNav li { display: inline; }
				#projectMediaNav li.selected a { text-decoration: underline; }
				
			#projectNextPrev {
				position: absolute;
				bottom: 0;
				width: 132px;
				padding-bottom: 5px;
			}
				a.projectInfoNav {
					display: block;
					text-align: right;
				}
				a.projectInfoNav span {
					display: block;
					float: left;
					text-align: left;
				}
				a.projectInfoNav:hover {
					text-decoration: none;
				}
					a.projectInfoNav:hover span {
						text-decoration: underline;
					}

				#projectNextPrev p {
					margin-top: 17px;
				}

				/*#projectNextPrev .bg-pager :before { content: "/"; }
				#projectNextPrev .bg-pager :first-child:before { content: ""; }*/
				#projectNextPrev .bg-pager .activeSlide a { text-decoration: underline }

	
	.projectInfoTable {
		position: absolute;
		bottom: 0;
		overflow: hidden;
		font-size: 10px;
		line-height: 12px;
	}
		.projectInfoTable .label {
			clear: left;
			float: left;
			width: 30%;
		}
		.projectInfoTable .text {
			float: left;
			width: 60%;
		}






/* PRIMARY STYLES END */




























/* print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
	* { background: transparent !important; color: #444 !important; text-shadow: none; }

	a, a:visited { color: #444 !important; text-decoration: underline; }

	a:after { content: " (" attr(href) ")"; } 

	abbr:after { content: " (" attr(title) ")"; }

	.ir a:after { content: ""; }  /* Don't show links for images */

	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

	img { page-break-inside: avoid; }

	@page { margin: 0.5cm; }

	p, h2, h3 { orphans: 3; widows: 3; }

	h2, h3{ page-break-after: avoid; }
}



/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


	/* Prevent iOS, WinMobile from adjusting font size */
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}