/* -------------------------------------------------- */
/*    GLOBAL STUFF                                    */
/* -------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}


html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family: Arial;
	font-size: 62.5%;  /* 1em = 10px , 1.4em = 14px */
	color: #FFF;
}


a {
	text-decoration: none;
	color: #EE007B;
}
/*
a:hover, #c16 .news-catmenu a:hover {
	color: #00f6ff;
}
*/

#c16 .news-catmenu a:hover{
	color: #00f6ff !important;
}

a.mail:hover{
	text-decoration: underline;
}

.newslink a:hover, #c28 a:hover, #c71 a:hover{
	text-decoration: underline;
}

.noclick {
	cursor: default;
}

body.transition {
	cursor: wait;
}

/*
#c74{
	width: 250px !important;
}
*/

/* -------------------------------------------------- */
/*    POSITIONING                                     */
/* -------------------------------------------------- */

#all {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div.box {
	position: absolute;
	width: 891px;
	left: 50%;
	margin-left: -445px;
}

/* ### WebPage ### */

#page {

	z-index: 100;

	top: 50%;
	margin-top: -317px;
	height: 633px;


	background: url(cont_bg.png) top left transparent;
}

#page .row {
	clear: both:
}

#head {

}
#logo {

}
#metanav {

}
#langnav {

}
#mainnav {

}

#main {

}
#flexcroll {
	position: absolute;
	top: 220px;
	left: 84px;
	height: 360px;
	width: 735px;
	overflow: auto;
}

#cont {
	width: 728px;
}

#bottomrow {
	position: absolute;
	top: 593px;
	left: 84px;
	height: 40px;
}

#headbar {
	display: none;
	cursor: pointer;
	width: 735px;
	padding-top: 5px;
}



#allteam {
	overflow: hidden;
	width: 735px;
}


/* ### Portfolio ### */

#portfolio {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
}

#bgimages div {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.slideshow a{
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
}

.slideshow img, .project img{
	position: absolute;
	display: none;
}


#bgimages .grid {
	background: #FFF;
	line-height: 0px;
}


#bgimages .gridbg {
	background: #FFF;
	
	overflow: hidden;

	width: 100%;
	height: auto;
}


span.dynGcont {
	display: block;
	margin: -1%;
	position: relative;
}

.grid a{
	display: block;
	width: 31.3%;
	padding: 1%;
	float: left;
}

.grid img {
	display: block;
	width: 100%;
	height: auto;
}

.grid a h4 {
	position:absolute;
	display: block;
	font-size: 1.2em;
	font-weight: normal;
	width: 31.3%;
}

.grid a h4 span {
	position:absolute;
	top: -25px;
	color: #FFF;
	background: #000;
	width: 95%;
	padding-left: 5%;
	padding-top: 5px;
	height: 20px;
	margin: 0px;
	line-height: 1em;
	display: none;
}
.grid a:hover h4 span {
	display: block;
}
#description {
	bottom: 0px;
	margin-bottom: -200px;
	height: 200px;
	
	background: url(desc_bg.png) top left;
}


.pnav {
	position: absolute;
	top: 50%;
	background: #F0C;
	height: 100px;
	margin-top: -50px;
	width: 50px;

	cursor: pointer;
	background: url(prev.gif) center no-repeat #EE007B;
}

#prevbutt {
	left: -50px;
}
#nextbutt {
	right: -50px;
	background-image: url(next.gif);
}

.pnav a {
	display: block;
	color: transparent;
	height: 100px;
	width: 50px;

	background: url(prev.gif) center no-repeat #EE007B;
}

#nextbutt a {
	background-image: url(next.gif);
}

.project #nextbutt a {
	background-image: url(grid.gif);
}


.metainfo, #nfo {
	display: none;
}

.left {
	float:left;
	width: 485px;
}

.largeTxt p{
	font-size: 1.5em;
}

.right {
	float: right;
	padding-top: 5em;
}

#cont .right .nav li {
	font-weight: bold;
}


.twothirds {
	width: 485px;
}


/* ### AppStates ###*/


#all.overview .slideshow img{
	position: relative;
}
#all.project .slideshow img{
	cursor: default;
}


/* ---- FleXcroll design---- */

/* .scrollgeneric is required for proper scrollbar display,
not for user customization, and is mandatory*/
.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
.vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar)
this represents the whole background of the scrolltrack */
	width: 13px;
	background: url(scrollbar_bg.gif) repeat-y center transparent;
	cursor: pointer;
}

.vscrollerbar {
	background: #00f6ff;
	width: 13px;
	background: url(scrollbar_fg.gif) repeat-y center transparent;
	cursor: move;
}

/* -------------------------------------------------- */
/*    NAVIGATION                                      */
/* -------------------------------------------------- */

ul.nav {
	list-style:none;
}
ul.nav li{
	float: left;
}
ul.nav, ul.nav a, #c16 .news-catmenu a,#c100 .news-catmenu a, #c17 .news-catmenu a{
	color: #81828d;
}

.right ul.nav li{
	clear: both;
	float: right;
}



/* ---- Mainnav -----*/


#mainnav {
	width: 732px;

	position: absolute;
	top: 118px;
	left: 84px;
	font-family: FoundryMonolineRegular, Arial, sans-serif;
}

#mainnav ul{
	overflow: hidden;
}

#mainnav li {
	padding-top: 9px;
	height: 49px;
	width: 241px;
	background: #34353b;
	border-top: 2px solid #34353b;
	margin-right: 3px;
	text-transform: uppercase;
	overflow: hidden;
}

#mainnav li:hover,  #mainnav li.act, #c16 .news-catmenu a:hover,#c100 .news-catmenu a:hover, #c17 .news-catmenu a:hover {
	border-top-color: #00f6ff;
}
#mainnav li a {
	display: block;
	float: left;
	padding: 0px 25px 0px 14px;
	font-size: 1.4em;
	font-weight: bold;

	color: #FFFFFF;
}

.nav a:hover, .nav a.act, #mainnav li li a:hover, #mainnav li li a.act, #curtitle a{
	color: #00f6ff;
}



#mainnav ul ul {
	background: transparent;
	/* float: left;
	width: auto; */
}

#mainnav li li, #mainnav li.act li{
	float: none;
	clear: left;
	padding: 0px;
	height: auto;
	text-transform: none;
	border-top: 0px none;
}
#mainnav li li a {
	color: #81828d;
	display: inline;
	padding: 0px;
	font-size: 1.2em;

	font-family: Arial, sans-serif;
}

#metanav, #langnav {
	position: absolute;
	top: 30px;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bold;
}

#metanav {
	left: 582px;
}

#langnav {
	left: 767px;
}

#langnav .act, #langnav li, #langnav a:hover, #curtitle {
	color: #00f6ff;
}

#backlink {
	float: left;
	font-size: 1.2em;
	background: url(top.gif) 0 3px no-repeat;
	padding-left: 20px;
	text-transform: uppercase;
}
#curtitle {
	float: right;
	text-transform: uppercase;
	font-size: 1.6em;
	font-weight: bold;
	font-family: FoundryMonolineRegular, Arial, sans-serif;
}

#curtitle a {
		cursor: default;
}

.catlinks a, p.arrow a, #teamnav a {
	color: #AAA;
	background: url(link.gif) 0 4px no-repeat;
	padding-left: 18px;
	font-weight: bold;
}

.catlinks a:hover, p.arrow a:hover, #teamnav a:hover {
	color: #FFF;
}


#teamnav a.act, #teamnav a:hover {
	color: #fff;
}

#teamnav {
	width: 244px;
	float: left;
}

#teamnav ul.nav li {
	float: none;
	padding: 0px;
	margin-left: 0px;
}




/* -------------------------------------------------- */
/*    CONTENT DESIGN                                  */
/* -------------------------------------------------- */






h1 {
	font-size: 2.8em;
	font-weight: normal;
	text-transform: uppercase;
	padding-bottom: 25px;

	font-family: FoundryMonolineRegular, Arial, sans-serif;
}


#c22 h1, #c23 h1 {
	padding-bottom: 5px; /* ausnahme für kundenliste */
}

p, h2, h3, .catlinks, dl{
	font-size: 1.2em;
	font-weight: normal;
}

dl {
	padding-top: 1em;
}
dl a {
	padding-right: .5em;
}

p.gogrid {
	margin-top: 2.5em;
}

#cont li{
	font-size: 1.2em;
	margin-left: 1em;
}

#cont li li {
	font-size: 1em;
}


/* ---- case Studies ---- */

.news-catmenu ul {
	list-style: none;
	
}
#cont .news-catmenu li {
	margin-left: 0px;
}

.news-catmenu li div {
	display: none;
}
.news-catmenu li li div { 
	display: block;
	padding-right: 3px;
}

#c16,#c100, #c17 {
	margin-top: 2.5em;
	width: 733px;
}

#c16 .news-catmenu ul, #c100 .news-catmenu ul, #c17 .news-catmenu ul {
	overflow: hidden;
}

#c16 .news-catmenu li li span, #c100 .news-catmenu li li span, #c17 .news-catmenu li li span { 
	display: block;
	width: 109px;
	padding: 5px;
	height: 30px;
	background: #3A3B42;
}

#cont #c16 .news-catmenu li,#cont #c100 .news-catmenu li, #cont #c17 .news-catmenu li {
	float: left;
}




/* ----- FOOTER -----  */

#footer {
	color: #81828d;
}




/* ----- NEWS ----- */

.news-single {
	overflow: hidden;
}

.news-single-leftbox, .news-single-rightbox {
	float: left;
}
.news-single-leftbox {
	width: 340px;
	padding-right: 28px;
}
.news-single-rightbox{
	width: 350px;
}
.bx-wrapper .bx-viewport {
    background: transparent;
    border: 0px none;
    box-shadow: none;
    left: 0;
}
.bx-wrapper .bx-controls-direction a {
	width: 16px;
	background: no-repeat center #EE007B;
}
.bx-wrapper a.bx-prev {
	left: 0;
	background-image: url('prev.gif');
}
.bx-wrapper a.bx-next {
	right: 0;
	background-image: url('next.gif');
}
.bx-wrapper .bx-controls-direction a:hover {
	background-position: center;
}

div.news-latest-item {
	overflow: hidden;
	padding-bottom: 2em;
}
div.nimg {
	float: left;
	padding-right: 2.5em;
}

div.ntxt {
	float: left;
	width: 246px;
}

div.ntxt h2 {
	font-weight: bold;
}

.ndate {
	color: #999;
}

/* news special auf home site */
#c13, #c24{
	height: 1px;
	overflow: visible;
}

/* ---- Kundenliste ---- */

#c22, #c23  {
	width: 485px;
}

#c22 a, #c23 a {
	color: #FFF;
	background: url(link.gif) right 3px no-repeat;
	padding-right: 18px;
}

.char {
	border-bottom: 1px solid #666;
	padding: 2em 0 0.5em 0;
	margin-bottom: .5em;
}



/* ---- Projektdesc -----*/

#description h1 {
	font-size: 1.6em;
	font-weight: bold;
	padding-bottom: 3px;
}
#description .imgnav {
	height: 40px;
	padding-left: 80px;
}
#description .desc {
	float: left;
	padding-right: 20px;
	width: 550px;
	padding-left: 80px;
}

#description .desc p {
	margin-bottom: 5px;
}


#description .catlinks {
	float: left;
	height: 160px;
	border-left: 1px solid #666;
	padding-left: 15px;
}


.imgnav div {
	width: 13px;
	height: 7px;
	margin: 17px 6px 0px 0px;
	background: #666;
	float: left;
}

.imgnav div.act {
	background: #00f6ff;
}

/* ----- NO JS - PROJEKTE -----*/


.rpid5 #page {
	top: 0px;
	margin-top: 0px;
	height: 80px;

	width: 950px;
	margin-left: -475px;

	background-position: left -20px;	
}

.rpid5 #mainnav {
    left: 200px;
    top: 10px;
}

.rpid5 #main {
	display: none;
}


/* ----- TEAM CONTENT ----- */

#teamcont {
	float: left;
	width: 485px;
	background: #23252B;
	margin-top: -30px;
}

div.csc-textpic-intext-left div.csc-textpic-imagewrap, div.csc-textpic-intext-left-nowrap div.csc-textpic-imagewrap {
	margin-right: 20px !important;
}

div.csc-textpic-intext-left-nowrap div.csc-textpic-imagewrap img, div.csc-textpic div.csc-textpic-single-image img {
	margin-bottom: 0px !important;
}

/* -------- workflow ---------*/

h2.workflow{
	font-size: 14px;
	font-weight: bold;
	color: #00f6ff;
	margin: 0;
	padding: 0px 0px 2px 0px;
}

/* -------- location ---------*/

#c48 .csc-textpic, #c96 .csc-textpic{
	position: relative;
}

#c48 .csc-textpic-text, #c96 .csc-textpic-text {
	width: 333px;
	float: left;
}

#c48 .csc-textpic-imagewrap, #c96 .csc-textpic-imagewrap {
	float: right;
	position: relative;
	overflow: hidden;
	height: 298px;
	margin-top: -30px;
}

#location_next_button{
	position: absolute;
	right: 0px;
	top: 105px;
	background-image: url(arrow_next.gif);
	background-repeat: no-repeat;
	width: 21px;
	height: 30px;
	z-index: 999;
	cursor: pointer;
}