/* ----------------------------------- */
/* ---------->>> CSS-HACKS <<<----------- */
/* ----------------------------------- */
/*

* html for IE6
*:first-child+html for IE7

*/
/* -----------------------------------*/

/* ----------------------------------- */
/* ---------->>> RESET <<<----------- */
/* ----------------------------------- */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
/* http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration:none;}
del {text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse;border-spacing:0;}
/* own additions */
img {border:0;}
input {font-size:12px;}

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

body {font-size:70.00%;font-family:arial, sans-serif;margin:0;padding:0;}

h1, h2, h3, h4, h5, h6 {}
a {color:#fff;text-decoration:none;}
a:link {}
a:visited {}
a:active {}
a:hover {color: #fff;}

ul, ol, dl {line-height:1.5em;margin:0 0 1em 0em;}
li {margin-left:0em;line-height:1.5em;list-style-type:none;}
dt {font-weight:bold;}
dd {margin:0 0 1em 2em;}
cite, blockquote {font-style:italic;}
blockquote {margin:0 0 1em 1.5em;}
strong, b {font-weight:bold;}
em, i {font-style:italic;}
pre, code {font-family:monospace;font-size:1.1em;}
acronym, abbr {letter-spacing:.07em;border-bottom:.1em dashed #ffcd00;cursor:help;}

/* ----------------------------------- */
/* ---------->>> HELPER <<<----------- */
/* ----------------------------------- */

/* http://code.google.com/p/blueprintcss/ */
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}
.clear {clear:both;}

/* http://sonspring.com/journal/clearing-floats */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0;}

/* IE (PC) only :hover behaviour helper */
/* @see http://www.xs4all.nl/~peterned/ */
* html body {behavior:url("htc/csshover2.htc");}

/* TwinHelix png-fix */
/* http://www.twinhelix.com/css/iepngfix/ */
* html .png {behavior:url("htc/iepngfix.htc");}

/* Standards Compliant method to add Quicktime movies to pages */
/* http://realdev1.realise.com/rossa/rendertest/quicktime.html */
* html object.mov {display: none;}
* html object.mov/**/ {display: inline;}
* html object.mov {display/**/: none;}

div.spacer {font-size:0.08em;background:transparent;clear:both;width: 0;height: 0;}
.invisible {position:absolute;left:-5000px;}


/* -----------------------------------*/
/* ---------->>> LAYOUT <<<-----------*/
/* -----------------------------------*/

body {
	background-color: #DED7BA;
}
.hvltstd-33_10 {
	font-family: hvltstd-33;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 1px;
}
.hvltstd-33_10s {
	font-family: hvltstd-33;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 1px;
}
.hvltstd-33_12 {
	font-family: hvltstd-33;
	font-size: 12px;
	font-weight: 100;
}
.hvltstd-33_12s {
	font-family: hvltstd-33;
	font-size: 12px;
	font-weight: 900;
}
.hvltstd-33_14 {
	font-family: hvltstd-33;
	font-size: 14px;
	font-weight: 100;
}
.hvltstd-33_14s {
	font-family: hvltstd-33;
	font-size: 14px;
	font-weight: 900;
}
.hvltstd-33_16 {
	font-family: hvltstd-63;
	font-size: 16px;
	font-weight: 100;
}
.hvltstd-63_16s {
	font-family: hvltstd-63;
	font-size: 16px;
	font-weight: 900;
}

h1 {
	position: relative;
	top: 0;
}
h1 a {
	display: block;
	background: #1f5c8d url(../images/pnav.png) no-repeat 40px 0;
	width: 302px;
	height: 60px;
	padding: 0 0 0 40px;
	text-indent: -5000px;
}
div#viewport {
	width: 998px;
	height: 622px;
	overflow: hidden;
}
div.space {
	width: 3840px;
	height: 3460px;
	background: url(../images/bg.png) repeat-x 0 0;
}
div#header {
	position: fixed;
	z-index: 850;
	width: 1032px;
}
div.stage {
	width: 3840px;
	height: 650px;
	overflow: hidden;
	float: left;
	position: relative;
}
div.cont {
	width: 1160px;
	height: 500px;
	float: left;
	padding: 108px 0 0 120px;
}
ul.pnav {
	position: absolute;
	z-index: 800;
	top:0;
	left: 344px;
}
ul.pnav li {
	display: block;
	width: 130px;
	height: 60px;
	float: left;
	margin: 0 2px 0 0;
}
ul.pnav li a {
	display: block;
	width: 130px;
	height: 60px;
	text-indent: -5000px;
}
ul.pnav li a.pnav-bild {
	background: url(../images/pnav.png) no-repeat 0 -60px;
}
ul.pnav li a.pnav-ton {
	background: url(../images/pnav.png) no-repeat 0 -120px;
}
ul.pnav li a.pnav-event {
	background: url(../images/pnav.png) no-repeat 0 -180px;
}
ul.pnav li a.pnav-kontakt {
	background: url(../images/pnav.png) no-repeat 0 -240px;
}
ul.snav {
	position: fixed;
	top: 73px;
	display: none;
}
ul.snav li {
	float: left;
	margin: 0 20px 0 0;
	color: #fff;
	font:  1.1em helvetica, arial, sans-serif;
	letter-spacing: 0.1em;
}
ul.snav li a {
	color: #fff;
}
ul.snav li a.active {
	color: #fff;
	font-weight: 900;
}
ul.snav li a:hover {
	color: #fff;
}


div.ticker {
	color: #fff;
	line-height: 120%;
	height: 36px;
}
div.ticker p {
	font-weight: 300;
	letter-spacing: 1px;
}
div.ticker span.date {
	color: #acc3d5;	
}

div#spotlight {
	position:relative;
	width: 750px;
	height: 400px;
	background: #003366;
}

ul.tnav {
	margin: 0 0 18px 0;
	display: block;
	clear: both;
	font: bold 1.2em/1.4em helvetica, arial, sans-serif;
	letter-spacing: 0.08em;
}
ul.tnav li {
	float: left;
	margin: 0 10px 0 0;
}
ul.tnav li a {
	color: #acc3d5;
}
#stage-bild ul.tnav li a {
	color: #abc3d3;
}
#stage-ton ul.tnav li a {
	color: #b8ced7;
}
#stage-event ul.tnav li a {
	color: #cfdadb;
}
#stage-bild ul.tnav li.active a,
#stage-ton ul.tnav li.active a,
#stage-event ul.tnav li.active a {
	color: #fff;
}
ul.tnav li a:hover {
	color: #fff;
}

div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 750px; 
    height: 400px; 
}
div.scrollable div.items { 
    width:20000em; 
    position:absolute; 
}
div.subcont {
	width: 750px;
	height: 400px;
	float: left;
	line-height: 140%;
	color: #fff;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
}
div.subcont div.left {
	width: 360px;
	margin: 0 30px 0 0;
	float: left;
}
div.subcont div.right {
	margin: -18px 0 0 0; /* this must be a cufon error?! */
	width: 360px;
	float: left;
}

div.teamcont {
	width: 760px;
}
div.teamcont a {
	display: block;
	width: 175px;
	height: 116px;
	float: left;
	margin: 0 15px 15px 0;
}
.markus {
	background: url(../media/img/team/team-sprite.jpg) no-repeat 0 0;
}
.raphael {
	background: url(../media/img/team/team-sprite.jpg) no-repeat -350px 0;
}
.cornelius {
	background: url(../media/img/team/team-sprite.jpg) no-repeat -175px 0;
}
.ulrich {
	background: url(../media/img/team/team-sprite.jpg) no-repeat -525px 0;
}
.achill {
	background: url(../media/img/team/team-sprite.jpg) no-repeat -700px 0;
}
div#stage-contact div#cont5-1 div.teamtext {
	width: 750px;
	color: #1f5c8d;
	font-size: 12px;
	line-height: 18px;
}

div#stage-contact div#cont5-1 ul.tnav {
	width: 300px;
	margin-left: 400px;
}



/* referenzen */
div.refcont {
	width: 760px;
}
div.refcont a {
	width: 80px;
	height: 54px;
	display: block;
	float: left;
	margin: 0 15px 15px 0;
}
a.last {
	margin: 0;
}
a.bild {
	/*background: url(../images/refthumb.png) no-repeat 0 0;*/
	background-color: #5887aa;
}
a.ton {
	/*background: url(../images/refthumb.png) no-repeat -80px 0;*/
	background-color: #739db1;
}
a.event {
	/*background: url(../images/refthumb.png) no-repeat -160px 0;*/
	background-color: #9eb5b7;
}



div#reftitle {
	color: #fff;
	line-height: 120%;
	height: 36px;
}
div#reftitle p {
	font-weight: 300;
	letter-spacing: 1px;
}
div#reftitle span.date {
	color: #acc3d5;	
}
div.desc {
	display: none;
}


.ref-container {
	width: 960px;
	height: 430px;
	overflow: hidden;
}

.ref-container div.image {
	width: 560px;
	height: 400px;
	float: left;
	overflow: hidden;
}
.ref-container div.text {
	width: 380px;
	height: 380px;
	float: right;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
	color: #fff;
	overflow: auto;
	padding: 10px;

}
.ref-container div.text h2 {
	font: bold 1.2em/1.4em helvetica, arial, sans-serif;
	color: #fff;
	margin: 0 0 1em 0;
}



/* event / news */
div.newscont {
	width: 780px;
}
div.newscont a {
	position: relative;
	width: 80px;
	height: 54px;
	display: block;
	float: left;
	margin: 0 15px 15px 0;
	background: url(../media/news/img/news-sprite.png) no-repeat 0 0;
}
div.newscont a span {
	display:inline-block;
	width: 80px;
	text-indent: -5000px;
	background: url(../images/date-sprite.png) no-repeat 0 0;
}
/* include dates.css */





/* team-overlay */
div#team-viewport {
	width: 960px;
	height: 480px;
	overflow: hidden;
}
div#stage-team {
	width: 1920px;
	height: 480px;
}
div#stage-team div.cont {
	width: 960px;
	height: 480px;
	float: left;
	padding:0;
}


.team-container {
	width: 960px;
	height: 480px;
	overflow: hidden;
	position: relative;
}
div#team-viewport,
div#team-viewport div.text h2,
.team-container div.text p a {
	color: #1f5c8d;
}

.team-container div.image {
	width: 560px;
	height: 400px;
	float: left;
	overflow: hidden;
}
.team-container div.text {
	width: 350px;
	height: 480px;
	float: right;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
	overflow: auto;
	padding: 0 25px;
}
.team-container div.text p {
	margin: 0 0 5px 0;
}
.team-container div.text p a {
	font-weight: bold;
}
.team-container div.text h2 {
	font: bold 1.2em/1.4em helvetica, arial, sans-serif;
	margin: 0 0 1em 0;
}
.team-container div.vita {
	margin: 20px 0 0 0;
}
div#team-viewport a.contactform {
	display: block;
	width: 45px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 20px;
	text-indent: -5000px;
	background: url(../images/overlaynav-sprite.png) no-repeat -45px 0;
}
div#team-viewport a.vita {
	display: block;
	width: 45px;
	height: 30px;
	position: absolute;
	bottom: 0;
	left: 20px;
	text-indent: -5000px;
	background: url(../images/overlaynav-sprite.png) no-repeat 0 0;
}
.team-container form {
	width: 350px;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
	padding: 25px 25px 0 25px;
	float: left;
}
div#team-viewport label {
	float: left;
	width: 110px;
	font-weight: bold;
	padding: 1em 0;
}

div#team-viewport input, div#team-viewport textarea {
	width: 228px;
	margin-bottom: 5px;
}

div#team-viewport textarea {
	width: 228px;
	height: 150px;
}

div#team-viewport input.submit {
	margin-left: 120px;
	margin-top: 5px;
	width: 150px;
}

div#team-viewport br {
	clear: left;
}





div.studiocont {
	width: 760px;
}
div.studiocont div.col {
	width: 365px;
	float: left;
	margin: 0 15px 0 0;
}
div.studiocont a.overlay {
	display: block;
	width: 365px;
	height: 247px;
}
.studio-lichtenstein {
	background: url(../media/img/studios/studio-sprite.jpg) no-repeat 0 0;
}
.studio-sigmaringen {
	background: url(../media/img/studios/studio-sprite.jpg) no-repeat -365px 0;
}
/* studio-overlay */
div#studio-viewport {
	width: 960px;
	height: 430px;
	overflow: hidden;
}
div#stage-studio {
	width: 1920px;
	height: 430px;
}
div#stage-studio div.cont {
	width: 960px;
	height: 430px;
	float: left;
	padding:0;
}
.studio-container {
	width: 960px;
	height: 430px;
	overflow: hidden;
	position: relative;
}
.studio-container div.image {
	width: 560px;
	height: 400px;
	float: left;
	overflow: hidden;
}
.studio-container div#map-li,
.studio-container div#map-sig, {
	width: 560px;
	height: 400px;
	float: left;
}
.studio-container div.text {
	width: 360px;
	height: 380px;
	float: left;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
	color: #1f5c8d;
	overflow: auto;
	padding: 10px 20px
}
.studio-container div.text h2 {
	font: bold 1.2em/1.4em helvetica, arial, sans-serif;
	color: #1f5c8d;
	margin: 0 0 1em 0;
}
div#studio-viewport a.studio {
	display: block;
	width: 45px;
	height: 30px;
	position: absolute;
	z-index: 9999;
	bottom: 20px;
	left: 20px;
	text-indent: -5000px;
	background: url(../images/overlaynav-sprite.png) no-repeat 0 0;
}
div#studio-viewport a.anfahrt {
	display: block;
	width: 45px;
	height: 30px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	text-indent: -5000px;
	background: url(../images/overlaynav-sprite.png) no-repeat -45px 0;
}
div#studio-viewport .lichtenstein a.anfahrt {
	background-position: -45px -120px;
}
div#studio-viewport .lichtenstein a.studio {
	background-position: 0 -120px;
}
div#studio-viewport .sigmaringen a.anfahrt {
	background-position: -45px -120px;
}
div#studio-viewport .sigmaringen a.studio {
	background-position: 0 -120px;
}


/* =SPOTLIGHT SLIDER
--------------------------------------------------------------------------------*/

#spotlight-slider {
  /* You MUST specify the width and height */
  width: 750px;
  height: 400px;
  position: relative;	
  overflow: hidden;
	float: left;
}
#spotlight-slider #spotlight-mask-gallery {overflow:hidden;}
#spotlight-slider #spotlight-gallery {
  /* Clear the list style */
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 0;
  /* width = total items multiply with #mask gallery width */
  width: 750px;
  overflow: hidden;
}
#spotlight-slider #spotlight-gallery li {
  /* float left, so that the items are arrangged horizontally */
  float: left;
}
#spotlight #slider #gallery li {
  cursor: pointer;
}

ul#spotlight-picnav {
  position: absolute;
  z-index: 501;
  right: 0;
  bottom: -25px;
	display: block;
}
ul#spotlight-picnav li {
  float: left;
  background: url(../images/picnav.png) no-repeat -10px 0;
  margin: 4px 5px 0 0;
}
ul#spotlight-picnav li a {
  display: block;
  width: 10px;
  height: 10px;
  background: url(../images/picnav.png) no-repeat -10px 0;
  text-indent: -5000px;
}
ul#spotlight-picnav li.selected a {
  background: url(../images/picnav.png) no-repeat 0 0;
}

/* =EVENTNEWSTICKER
--------------------------------------------------------------------------------*/
div.eventnewsticker {
	font-size: 12px;
	color: #1e5c8d;
	line-height: 120%;
	width: 300px;
	height: 30px;
	background-color: #9eb5b7;
	padding: 10px 10px 10px 40px;
	margin: 25px 0 0 0;
	position:absolute;
	left:-300px;
	opacity:0;
}
div.eventnewsticker p {
	font-weight: 300;
	letter-spacing: 1px;
}
div.eventnewsticker span.date,
div.eventnewsticker p a {
	color: #1e5c8d;	
}

/* =SLIDER
--------------------------------------------------------------------------------*/

#slider {
  /* You MUST specify the width and height */
  width: 560px;
  height: 400px;
  position: relative;	
  overflow: hidden;
	float: left;
}
#mask-gallery {overflow:hidden;}
#gallery {
  /* Clear the list style */
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 0;
  /* width = total items multiply with #mask gallery width */
  width: 560px;
  overflow: hidden;
}
#gallery li {
  /* float left, so that the items are arrangged horizontally */
  float: left;
}
#gallery li {
  cursor: pointer;
}

ul#picnav {
  position: absolute;
  z-index: 501;
  right: 404px;
  bottom: 25px;
	display: none;
}
ul#picnav li {
  float: left;
  background: url(../images/picnav.png) no-repeat -10px 0;
  margin: 4px 5px 0 0;
}
ul#picnav li a {
  display: block;
  width: 10px;
  height: 10px;
  background: url(../images/picnav.png) no-repeat -10px 0;
  text-indent: -5000px;
}
ul#picnav li.selected a {
  background: url(../images/picnav.png) no-repeat 0 0;
}


div#mapcont {
	width: 550px;
	height: 400px;
	position:relative;
}





/* IMPRESSUM */
a#impressum {
	width: 15px; 
	height: 15px; 
	display: block;
	text-indent: -5000px;
	position: absolute; 
	right: 35px; 
	top: 607px; 
	z-index: 9999; 
	background: url(../images/impressum.png) no-repeat 0 0;
}

.impressum-container {
	width: 960px;
	height: 430px;
	overflow: hidden;
	position: relative;
}
.impressum-container div.visdp,
.impressum-container div.disclaimer {
	width: 360px;
	height: 380px;
	float: left;
	font: 1.2em/1.4em helvetica, arial, sans-serif;
	color: #1f5c8d;
	overflow: auto;
	padding: 10px 20px
}
.impressum-container div.visdp p a,
.impressum-container div.disclaimer p a {
	color: #1F5C8D;
	font-weight: bold;
}
.impressum-container div.umsetzung {
	margin:20px 0 0 0;
}
.impressum-container div.visdp h2,
.impressum-container div.disclaimer h2 {
	font: bold 1.2em/1.4em helvetica, arial, sans-serif;
	color: #1f5c8d;
	margin: 0 0 1em 0;
}