/**
 scriptmerger: ../  /workspace/klangerfinder/fileadmin/
*/
@CHARSET "UTF-8";

* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
	height: 100%;	
}
body {
	font-size: 12px;
	font-family: 'Andale Mono', 'Droid Sans Mono', monospace; 
	color:black;
}

.js #content {
	visibility: hidden;
}

ul, li {
	margin:  0;
	padding: 0;
	list-style: none;
}
h1 {
	margin: 0 0 42px 0;
	padding: 0;
	font-size:18px;
	font-weight:normal;
	word-spacing:-1px;
	color:#7f7f7f;
	text-transform: uppercase;
}
h2 {
	margin: 21px 0 5px 0;
	padding: 0;
	font-size:14px;
	font-weight: normal;
	text-transform: uppercase;
}
h3 {
	margin: 0 0 3px;
	padding: 0;
	font-size:13px;
	letter-spacing: 1px;
}
h4 {
	margin: 0 0 3px;
	padding: 0;
	font-size:13px;
}
p {
	padding: 0;
	margin: 13px 0;	
}

p, #awards table td {
	line-height: 17px;
}

a {
	text-decoration: none;
	outline: none;
	color:black;
}

.slash {
	margin: 42px 0 21px 0;
	padding: 0;
	color:#7f7f7f;
}

img {
	border:none;
}

a:hover {
}
a.active {
}

.content a {
}


.clear {
	clear: both;	
}

table td {
	vertical-align: top;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
hr {
	margin:0;
	padding: 0;
}


#logo {
	position: relative;
	margin-top:21px;
	margin-bottom: 28px;
}


#lang-nav {
	position: absolute;
	top:50px;
	left:940px;
}


#container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow:hidden;
	min-width: 900px;
	min-height: 900px;
}



#navi {
	position:relative;
	margin-bottom: 42px;
}

#navi ul.mainNavi {
	width: 232px;
}

#navi ul li {
	background-color: black;
	display:inline;
	float:left;
}

#navi ul li a {
	display:block;
	padding: 2px 42px 2px 22px;
}

#navi ul.mainNavi li {
	margin-bottom: 1px;
	position: relative;
}


#navi ul.mainNavi li.active > a, #navi ul.mainNavi li:hover > a {
	background-color: white;
	color: black;
}

#navi ul.mainNavi li.activeWithSub > a, #navi ul.mainNavi li.activeWithSub:hover > a {
	background-color: black;
	color: white;
}

#navi ul.mainNavi li a {
	color:white;
	text-transform: uppercase;
}

#navi ul.subNavi {
	width:900px;
	position: absolute;
	left:100%;
	top:0;
} 

#navi ul.subNavi li {
	display:inline;
	float: left;
	margin-left: 1px;
}





#content {
	margin-top:42px;
	margin-left: 42px;
	position: relative;
}


h1.page {
	font-size:23px;
	line-height: 27px;
}




#footer {
	position: relative;
	margin-left:42px;
	margin-bottom: 42px;
	margin-top: 42px;
}
#metaNavi ul li {
	display: inline;
	margin-right: 25px;
	text-transform: uppercase;
}

#metaNavi ul li, #metaNavi ul li a {
	color:#7F7F7F;
}
#metaNavi ul li a:hover {
	text-decoration: underline;
}



.teaserGallery {
	position: absolute;	
}

#projectTeaser {
	width: 1002px;
	height: 272px;
	margin-left: -42px;
	position: relative;
	text-transform:uppercase;
}

#projectTeaser ul.projects {
	z-index: 10;	
}

#mask {
	width: 1002px;
	height: 272px;
	text-align: right;
	z-index: 100;
	position: absolute;
}
#mask li.line {
	width: 1002px;
	height: 1px;
	background-color: white;
	clear: both;
}
#mask li.block {
	height: 20px;
	background-color: white;
	float:right;
}

#projectTeaser {
	cursor: pointer;
}
#projectTeaser ul.projectImages {
	position: absolute;
	top:0;
	left:0;
}

#projectTeaser ul.projectInfo {
	position: absolute;
	top:0;
	left:0;
}
#projectTeaser ul.projectImages {
	background-color: black;
	width:1002px;
	height:272px;	
	overflow: hidden;
}
#projectTeaser ul.projectImages li.item .image {
	position: absolute;
	top:0;
	left:0;
}
#projectTeaser ul.projectImages li.item, #projectTeaser ul.projectInfo li.item  {
	position: absolute;
	top:0;
	left:0;
}
#projectTeaser ul.projectInfo {
	position: absolute;
	width:1002px;
	height:272px;	
	overflow: hidden;
}
#projectTeaser ul.projectInfo li.item .title {
	position: absolute;
	top:189px;
	height:34px;
	padding-left:42px;
	padding-right:21px;
	padding-top:7px;
	display:inline;
	font-size: 22px;
	background-color: red;
	z-index: 1000;
	white-space: nowrap;
}

#projectTeaser ul.projectInfo {
	width: 1002px;	
}
#projectTeaser ul.projectInfo li.item .date {
	position: absolute;
	padding-left:42px;
	padding-right:21px;
	background-color: red;
	top:231px;
	height:18px;
	padding-top:3px;
	left:0;
}
#projectTeaser ul.projectInfo li.item .more {
	position: absolute;
	padding-left:42px;
	padding-right:21px;
	background-color: red;
	top:252px;
	height:17px;
	padding-top:3px;
	left:0;
	z-index: 100;
	white-space: nowrap;
}








#latestNews {
	margin-top: 42px;	
	width: 1002px;
	height: 82px;
	margin-left: -42px;
	color:black;
	position: relative;
}

#latestNews .background {
	position: absolute;
	z-index: 10;
}
#latestNews .background  {
	width: 1002px;
	z-index: 100;
	position: absolute;
}
#latestNews .background li  {
	background-color:black;
}
#latestNews .background  li.line {
	width: 1002px;
	height: 1px;
	background-color:white;
}
#latestNews .background  li.block {
	height: 20px;
}
#latestNewsInfo {
	text-transform:uppercase;
	z-index: 100;
	position: absolute;
	top:0;
}
#latestNews .title, #latestNews .date, #latestNews .more {
	position: absolute;
	padding: 3px 21px 0 42px; 
	background-color: white;
	height:18px;
	left:0;
	z-index: 100;
	white-space: nowrap;
}
#latestNews .title {
	top:42px;
}
#latestNews .date {
	top:21px;
}
#latestNews .more {
	top:63px;
}



#projectList {
	position:relative;
	margin-left: -21px;
	width: 1002px;
	text-transform: uppercase;
}

#projectList ul.projects {
	overflow: hidden;
}
#projectList ul.projects > li {
	position: relative;
	height: 82px;
	float:left;
	margin-right: 10px;
	overflow: hidden;
	background-color: black;
}





#projectList ul.media  {
	position:absolute;
	top:0;
	z-index:10;
	margin: 0;
	padding: 0;
	height: 82px;
	width: 1002px;
	overflow: hidden;
}

#projectList ul.media li {
	float:left;
	display:inline;
	margin: 0;
	padding: 0;	
}

#content #projectList ul.mask  {
	position: absolute;
	top:0;
	z-index: 100;
	height: 82px;
	margin: 0;
}

#content #projectList ul.mask li {
	height: 1px;
	margin-top: 20px;
	background-color: white;
	position: relative;
	margin-bottom: 0;
}




#projectList .title, #projectList .date, #projectList .more {
	position: absolute;
	padding-left:42px;
	padding-right:21px;
	background-color: white;
	padding-top:3px;
	height:17px;
	left:0;
	z-index: 100;
	white-space: nowrap;
}
#projectList .title {
	top:21px;
}
#projectList .date {
	top:42px;
}
#projectList .more {
	top:63px;
}




#projectList ul.projects > li.jingle {
	background-color: white;
	background-image: url("../img/jingle.bg.png");
	background-repeat:no-repeat;
	height: 21px;
	overflow: hidden;
}
#projectList li.jingle .title {
	top:0;
}




#projectList ul.projects > li.spacer {
	background-color: white;
	height: 42px;
	width: 1002px;
}








#projectDetail {
	margin-left: -42px;
}

#projectDetail div.gallery ul.images li {
	float: left;
	height: 333px;
}
#projectDetail div.gallery {
	position: relative;
	overflow: hidden;
}
#projectDetail div.gallery ul.images {
	position: relative;
	margin: 0;
	background-color:black;
}

#projectDetail div.titleAndControls div {
	float:left;
	height: 31px;
	margin-right: 1px;
}

#projectDetail div.titleAndControls div.title,#projectDetail div.titleAndControls div.prev,#projectDetail div.titleAndControls div.next {
	padding: 8px 21px 0 21px;
	height: 34px;
}

#projectDetail div.titleAndControls  {
	font-size: 24px;
}
#projectDetail div.titleAndControls div.controls  {
	cursor: pointer;
}

#projectDetail div.date {
	margin-top:1px;
	height: 17px;
	padding: 4px 5px 0 5px;
	width: 40px;
}
#projectDetail div.dateAndCategories {
	position: relative;
}
#projectDetail div.dateAndCategories div {
	margin-right: 1px;
}
#projectDetail div.dateAndCategories ul.categories {
	position: absolute;
	left:88px;
	top:0;
}
#projectDetail div.dateAndCategories ul.categories {
	height: 17px;
	padding-top: 4px;
	padding-left: 10px;
}
#projectDetail div.dateAndCategories ul.categories li  {
	float:left;
	margin: 0;
	padding: 0;
	margin-right: 12px;
}
#projectDetail div.titleAndControls div.title, #projectDetail div.date  {
	padding-left: 42px;
}
#projectDetail div.dateAndCategories, #projectDetail div.titleAndControls {
	text-transform: uppercase;
}
#projectDetail .description {
	margin-top:1px;
	background-color: black;
	color:white;
	padding: 21px 42px 21px 42px;
	width: 538px;
	float: left;
}

#projectDetail a {
	color:white;
}
#projectDetail ul.categories a {
	color:black;	
}



#projectDetail .description hr {
	width: 520px;
	margin: 21px 0 21px 0;
}



#projectDetail div.link, #projectDetail div.share {
	float:left;
	margin-top:1px;
	background-color: black;
	color:white;
	padding: 5px 21px 5px 42px;
	margin-right: 10px;
	text-transform: uppercase;
}

#projectDetail div.share img {
	vertical-align: middle;
	margin-bottom: 1px;
}


#projectDetail ul.sounds {
	float: left;
}

#projectDetail div.links {
	float:left;
}

#projectDetail div.awards {
	margin-top: 18px;
}

span.arrow {
	font-size:20px;
	line-height:2px;
	margin-right: 5px;
}




ul.sounds {
	width:340px;
	margin: 0;
	padding: 0;
	margin-left: 1px;
	margin-top: 1px;
	overflow: hidden;
}
ul.sounds li {
	margin: 0;
	padding: 0;
}
ul.sounds > li {
	height: 21px;
	clear:both;
	width: 600px;
}
ul.sounds .jp-gui, ul.sounds .background, ul.sounds div.titleAndDuration   {
	float:left;
}
ul.sounds div.titleAndDuration   {
	padding:3px 15px 0 15px;
	height: 17px;
	margin-right: 1px;
	text-transform: uppercase;
}
ul.sounds ul.jp-controls {
	height: 20px;
	margin-right: 1px;
}







#content div.csc-textpic div.gallery {
	position: relative;	
	margin-bottom: 42px;
}
div.gallery ul.controls {
	position: relative;
	background-color: white;
}
div.gallery ul.controls li {
	float: left;
	padding: 8px 15px 0 15px;
	height: 33px;
	font-size: 24px;
	background-color: black;
	color:white; 
	margin:0;
	border-right:1px solid white;	
	cursor: pointer;
}
div.gallery ul.controls li.prev {
	border-left:1px solid white;	
}
div.gallery ul.controls li.active, div.gallery ul.controls li:hover {
	background-color: white;
	color:black;
}

div.gallery ul.galleryItems {
	display:block;
	border-top:1px solid white;
	clear:both;
	text-align: left;
	margin-top:1px;
}

div.gallery ul.galleryItems li img {
	cursor: pointer;
}



#content ul.mask {
	width:100%;
	margin-left:-42px;
	margin-right:42px;
	position: relative;
	margin-top: 42px;
	margin-bottom: 42px;
}
#content ul.mask li {
	position: absolute;
	height: 20px;
	margin-bottom: 1px;
}
#content ul.mask li.dotted {
	background-image: url("../img/mask.dotted.png");
}
#content ul.mask li.black {
	background-color: black;
}
#content ul.mask li.gray {
	background-color: #e5e5e5;
}


#content div.textContent {
	width: 562px;
}




ul.team {
	margin-left: -42px;
	width: 1200px;
	text-transform: uppercase;
}

ul.team a, #teamDetail ul.info li a {
	color:white;
}

ul.team > li {
	float:left;
	width: 562px;
	height: 180px;
	position: relative;
}

ul.team > li img {
	position: absolute;
	left: 42px;
}

ul.team li ul li, #teamDetail ul.info li {
	float:left;
	clear:both;
	height: 17px;
	color:white;
	background-color: black;
	margin-bottom:1px;
	padding: 3px 42px 0 42px;
	white-space:nowrap;
}
ul.team li ul li {
	padding-left: 185px;
}



#teamDetail {
	position: relative;	
}
#teamDetail ul.info {
	position: relative;	
	margin-left: -42px;
	text-transform: uppercase;
}
#teamDetail ul.info li {
	padding-left: 500px;
}
#teamDetail img {
	position: absolute;
	left: 0;
}
#teamDetail div.content {
	margin-left: 458px;
	width: 500px;
	margin-top: 200px;
}




#career {
	width: 700px;
}




ul.content {
	margin: 5px 0 21px 0;
}
ul.content li {
	margin-left:0px;
	margin-top:5px;
}

/*ul.content li:before { content:"<span class='arrow'>→</span>"; }*/


.services {
	width: 750px;
}
.services div.content, .services div.more {
	background-color: white;
	position: relative;
	z-index: 100;
	margin: 0;
	padding: 10px 42px 10px 0;
	margin-top: 14px;
}
 .services div.more {
	margin-top: 13px;
	margin-bottom: 20px;
	padding-top: 19px; 
}
.services > ul > li {
	position: relative;
	z-index: 10;
	margin-bottom: 42px;
}
#content .services ul.mask {
	z-index: 10;
	position: absolute;
	left:42px;
	margin-top:0;
}

.services ul > li h2, .services ul > li div.index {
	background-color: white;
	z-index: 100;
	position: relative;
}
.services ul > li div.index {
	position: absolute;
	top:0;
	padding: 3px 10px 0 3px;
	height: 17px;
}

.services ul > li h2 {
	position: absolute;
	top:21px;
	margin:0;
	padding: 8px 10px 2px 3px;
	height: 30px;
	font-size: 23px;
	z-index: 1000;
}








#newsList {
	position: relative;
}
#newsList > ul > li {
	position: relative;
	z-index: 10;
	margin-bottom: 42px;
}
#newsList div.content {
	position: relative;
	margin: 0;
	padding: 21px 42px 10px 0;
	margin-top: 0;
	width: 800px;
	min-height: 150px;
}
#newsList h2.title, #newsList div.date {
	background-color: white;
	z-index: 100;
	position: relative;
}
#newsList div.date {
	position: absolute;
	top:0;
	padding: 3px 10px 0 3px;
	height: 17px;
	z-index: 100;
}
#newsList div.share {
	position: absolute;
	top:0;
	left:100px;
	padding: 3px 10px 0 3px;
	height: 17px;
	z-index: 100;
	color:white;
	text-transform: uppercase;
}
#newsList div.share img {
	vertical-align: middle;
}
#newsList h2.title {
	width:500px;
	top:21px;
	margin:0;
	padding: 10px 10px 10px 3px;
	font-size: 23px;
	z-index: 1000;
}
#newsList ul.mask {
	z-index: 10;
	position: absolute;
	left:42px;
	margin-top:0;
}
#newsList img.news {
	z-index: 10;
	position: absolute;
	left:580px;
	top:21px;
	z-index: 100px;
}





#awards div.headlineContainer {
	height: 63px;
	position: relative;
}
#awards div.headlineContainer ul.mask {
	z-index: 10;
	position: absolute;
	top:0;
	left:42px;
	margin-top:0;
}
#awards div.headlineContainer h2.date {
	position: absolute;
	top:21px;
	padding: 8px 10px 0 3px;
	height: 42px;
	font-size:24px;
	z-index: 100;
	background-color: white;
	margin: 0;
}

#awards table {
	margin: 10px 0 42px 0;
	padding: 0;
	width: 700px;
}
#awards table tr td {
	padding-bottom: 42px;
}





#imprint {
	width: 780px;
}









#moodcubeTeaser {
	margin-top:45px;
	margin-bottom:135px;
	position: relative;
	/*position: absolute;
	top:314px;
	left:650px;
	*/
}
#moodcubeTeaser img {
	position: absolute;
	z-index: 200;
	top:-30px;
	left:-25px;
}
#moodcubeTeaser div.info {
	text-transform:uppercase;
	z-index: 100;
	position: absolute;
	left: 60px;
	top:0;
}
#moodcubeTeaser .title, #moodcubeTeaser .subtitle, #moodcubeTeaser .more {
	position: absolute;
	padding: 3px 21px 0 42px; 
	background-color: white;
	height:18px;
	left:0;
	z-index: 100;
	white-space: nowrap;
}
#moodcubeTeaser .title, #moodcubeTeaser .subtitle {
	background-color: transparent;
	color:white;
}
#moodcubeTeaser .title {
	top:0px;
}
#moodcubeTeaser .subtitle {
	top:21px;
}
#moodcubeTeaser .more {
	left:0;
	top:42px;
}
#moodcubeTeaser .background {
	position: absolute;
	z-index: 10;
	left:85px;
}
#moodcubeTeaser .background  {
	width: 1002px;
	z-index: 100;
	position: absolute;
}
#moodcubeTeaser .background li  {
	background-color:black;
}
#moodcubeTeaser .background  li.line {
	width: 1002px;
	height: 1px;
	background-color:white;
}
#moodcubeTeaser .background  li.block {
	height: 20px;
}





.controls div.prev, .controls div.next, .controls li {
   -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}




.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}