/* design & development by portnull.de
---------------------------------------------------- */
* {padding: 0; margin: 0;}


/* #BUILD
---------------------------------------------------- */
body {
	font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
	background-color: #eee;
	background-image: url("/newgfx/body-bg.png");
	background-position: top center;
	background-repeat: no-repeat;}
.wrapper {
	width: 900px;
	margin: 0 auto;
	background: none;}


/* #TYPO
---------------------------------------------------- */
/* -- Links */
a:link, a:visited, a:active {
	color: #ec1b23;
	text-decoration: none;}
a:hover {
	color: #ec511b;
	text-decoration: none;}
a img {border: 0;}


/* -- Headlines */
h1, h2, h3 {font-family: "Yanone Kaffeesatz", "Helvetica Neue", Helvetica, Arial, Sans-Serif;}

h1 {
	font-size: 8em;
	line-height: 1em;
	font-style: italic;
	color: #ec1b23;}
h1 em {
	display: block;
	font-size: .80em;
	color: #111;
	font-style: italic;}

#claim {
	padding: 10px 25px;
	margin: 15px 0 40px;
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);}
#claim h1 {
	text-shadow: 4px 3px 0 #fff;
	letter-spacing: 1px;}
/* #claim h1 span {background: url("/newgfx/bg-headline-white.png") 0 40px repeat-x;} */
	
	
h2 {font-size: 2.289em;}

h3 {
	font-size: 1.6em;
	line-height: 1.3em;
	font-weight: normal;
	margin: 0 0 10px 0;}
h3 a {color: #333;}
h3 a:hover {color: #ec511b;}

h4 {font-weight: normal;}
h4 a:visited {color: #777;}
h4 a:hover {color: #ec511b;}


/* -- Tags */
p.leading, blockquote p, blockquote:before {
	font-family: "Yanone Kaffeesatz", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-size: 1.6em;
	line-height: 1.3em;}

p {margin: 15px 0;}
p.leading {margin: 20px 0;}


blockquote {
	padding: 15px 0 0;
	quotes: "\201C" "\201D";}
blockquote p {
	font-style: italic;
	color: #333;
	margin: 0 0 0 30px;}	
	
blockquote:before {
	float: left;
	content: open-quote;
	font-size: 6em;
	line-height: .5em;
	font-weight: bold;
	color: #ec1b23;}


q {}
strong {font-weight: bold;}
em {font-style: italic;}
abbr {}
code {}


address {
	font-style: normal;
	font-weight: normal;}

u {
	padding: 1px 4px;
	text-decoration: none;
	background: #d6eaeb;}
p.leading u {
	color: #ec1b23;
	border: none;
	background: none;}	
	
	
hr {
	clear: both;
	border: 0;
	margin: 0 30px 15px;
	border-top: 3px double #dddcd7; 
	background: none;}	


/* -- Classes */
.left {float: left;}
.right {float: right;}
.hidden {
	border: 0;
	visibility: hidden;}


/* -- #Buttons / #Labels */
a.btn, span.label {
	font-size: 10px;
	line-height: 10px;
	padding: 4px 5px;
	text-transform: uppercase;
	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
span.label {font-size: 10px; padding: 3px 4px; border: 0 !important;}

a.btn {
	color: #111;
	border: 1px solid #ddd;}
body.dark a.btn {color: #fff; border: 1px solid #555; background: #777;}	
	
a.btn:hover, span.label {
	color: #fff;
	text-shadow: 0 1px 0 #333;
	border: 1px solid #ec1b23;
	background-color: #ec1b23;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ec1b23), to(#cf001c));
	background: -moz-linear-gradient(top, #ec1b23, #cf001c);}
body.dark a.btn:hover {color: #fff; border: 1px solid #ec1b23; background: #ec1b23;}


.btn.active {
	color: #fff;
	text-shadow: 0 1px 0 #333;
	border: 1px solid #82cace;
	background-color: #82cace;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#82cace), to(#5ebbc1));
	background: -moz-linear-gradient(top, #82cace, #5ebbc1);}
li.download .btn span {
	padding-left: 18px;
	background: url("/newgfx/ico-small-save.png") -2px -1px no-repeat;}


/* #TASK #NAVIGATION
---------------------------------------------------- */
#task .wrapper {
	padding: 5px 0;
	background: #fff;
	-moz-box-shadow: 0 1px 2px #c2c2c2; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2;
	-webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;}
	
#logo {
	float: left;
	margin: 0 0 0 30px;}

ul#navMain {
	float: right;
	font: 2em "Yanone Kaffeesatz", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	margin: 0 20px 0 0;}
ul#navMain li {
	float: left;
	margin: 0 0 0 5px;
	list-style-type: none;}
ul#navMain li a {
	display: block;
	color: #777;
	padding: 2px 10px;}
ul#navMain li a:hover {color: #111;}
ul#navMain li a.current {color: #ec1b23;}


li.navSub ul, li.navSub:hover a.navSubParent {
	background: #222;
	box-shadow: 0 1px 1px #ccc; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc;}
li.navSub a.navSubParent {padding: 2px 9px; border: 1px solid #fff;}
li.navSub a.navSubParent:hover {color: #fff;}
li.navSub:hover a.navSubParent {
	color: #fff !important;
	text-shadow: 0 1px 0 #111;
	border: 1px solid #333;
	border-radius: 3px 3px 0 0; -webkit-border-radius: 3px; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0;}

li.navSub {position: relative;}
li.navSub ul {
	display: none;
	position: absolute; top: 29px; left: 0;
	font-size: 18px;
	word-break: none;
	border-radius: 0 3px 3px 3px; -webkit-border-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius: 0 3px 3px 3px; -o-border-radius: 0 3px 3px 3px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
	background: -moz-linear-gradient(top, #222, #111);
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;}


ul#navMain li.navSub ul li {
	float: none;
	white-space: nowrap;
	margin: 0;}
ul#navMain li.navSub ul li a {
	display: block;
	color: #999;
	padding: 8px 10px;
	text-shadow: 0 1px 0 #333;
	border-bottom: 1px solid #121212;}
ul#navMain li.navSub ul li:first-child a {
	border-radius: 0 3px 0 0;  -webkit-border-top-right-radius: 3px; -moz-border-radius: 0 3px 0 0; -o-border-radius: 0 3px 0 0;}
ul#navMain li.navSub ul li:last-child a {
	border-radius: 0 0 3px 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px;}

ul#navMain li.navSub ul li a:hover { /* subnavigation hover */
	color: #fff;
	border-bottom: 1px solid #000;
	background: #ec1b23;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ec1b23), to(#cf001c));
	background: -moz-linear-gradient(top, #ec1b23, #cf001c);}
ul#navMain li.navSub li a {color: #fff;}
ul#navMain li.navSub a:hover {color: #f33;}

li.navSub:hover ul, li.navSub ul:hover {
	display: block;
	z-index:9999;}


/* #GENERICS
---------------------------------------------------- */	
.isContent {
	padding: 34px 0 0;
	background: #fff /* url("/newgfx/border.png") top center no-repeat */;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	-moz-box-shadow: 0 1px 2px #c2c2c2; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2;}
body.dark .isContent {
	background: #333;
	-moz-box-shadow: 0 1px 2px #111; -webkit-box-shadow: 0 1px 2px #111; box-shadow: 0 1px 2px #111;}	


.isSidebar {
	float: right;
	font-size: 1.4em;
	line-height: 1.6em;
	width: 315px;
	margin: 0 30px 30px 0;}


.info {
	padding: 15px;
	margin-bottom: 15px;
	border: 1px solid #ddd;
	border-top: 3px double #ddd;}
	
.row {
	clear: both;
	padding: 20px 30px 30px;
	border-top: 3px double #ddd;}
	


/* --isPage */
.isPage, .isIndex {
	float: left;
	padding: 0 0 15px 0;
	width: 480px;}
.isIndex {padding-bottom: 25px;}


.article {
	font-size: 1.4em;
	line-height: 1.6em;
	padding-left: 30px;}
.article ul {
	margin: 0 0 0 15px;
	list-style-type: square;}

	
.meta {
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 5px 0;
	margin: 0 0 30px 30px;}
.metaTime {
	padding: 10px 10px 10px 32px;
	background: url("/newgfx/ico-time.png") 0 3px no-repeat;}	


ul.attachments {
	text-align: center;}
ul.attachments li {
	float: left;
	margin: 5px 0;
	list-style-type: none;}
ul.attachments li.download { /* Attached Files */
	margin: 0 5px 0 0;}	
	
ul.attachments li img { /* Attached Pictures */
	padding: 5px;
	border: 1px solid #dddcd7;}


.isSlider.row {
	font-size: 1.4em;
	line-height: 1.6em;
	padding: 20px 30px;
	border-top: 1px solid #ddd;
	background: #d6eaeb url("/newgfx/grad-slider.jpg") top left repeat-x;}
	
.bx_wrap {
	width: 840px !important;
	overflow: hidden;}	
ul#theslider {}
ul#theslider li {
	float: left;
	margin: 0 30px 0 0;
	list-style: none;}
ul#theslider li img {
	padding: 2px;
	background: #fff;
	-moz-box-shadow: 0 1px 2px #999; -webkit-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999;}

span.caption {
	display: block;
	font-size: 12px;
	padding: 4px;
	visibility: hidden;}
ul#theslider li:hover span.caption {visibility: visible;}



/* --isComments */
.isComments {
	clear: both;
	font-size: 1.4em;
	line-height: 1.6em;
	padding: 30px;
	background: #fffeec;}



/* --isContact */
.isContact {
	font-size: 1.4em;
	line-height: 1.6em;
	padding: 20px 30px;
	width: 340px;
	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
	background: #2f2f2f;
	box-shadow:inset 0 2px 2px #111; -webkit-box-shadow:inset 0 2px 2px #111;-moz-box-shadow:inset 0 2px 2px #111;}
.isContact.left {
	margin: 0 0 0 30px;}
.isContact.right {
	margin: 0 30px 0 0;}

.map {
	width: 340px;
	height: 340px;
	margin: 15px 0;}

.isAddress {color: #fff;}

	
/* --isAside */
.isAside {}


/* --isNews */
ul.isNews {
	text-shadow: 0 1px 0 #111;
	padding: 25px 23px;
	margin-bottom: 30px;
	color: #f1f1f1;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
	background: -moz-linear-gradient(top, #222, #111);
	box-shadow: 0 1px 2px #eee; -webkit-box-shadow: 0 1px 2px #eee;-moz-box-shadow: 0 1px 2px #eee;}
ul.isNews li {list-style-type: none;}
ul.isNews li a {
	display:block;
	color: #777;
	padding: 3px 7px 4px;
	margin-bottom:1px;}
ul.isNews li a:hover {
	color: #fff;
	margin-bottom:0;
	border-bottom: 1px solid #000;
	background: #ec1b23;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ec1b23), to(#cf001c));
	background: -moz-linear-gradient(top, #ec1b23, #cf001c);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
ul.isNews h3 {padding: 0 7px;}


ul.isNews img {
	float: left;
	margin: 1px 6px 0 0;}
span.date {
	float: right;
	color: #777;
	font-size: 11px;}
a:hover span.date {color: #f1f1f1;}


/* --isTwitter */
.isTwitter {
	position: relative;
	padding: 23px 28px;
	background: #d6eaeb;
	border: 1px solid #ddd;
	background: #fff;}

img.avatar {
	float: right;
	margin: 0 -5px 0 0;}
img#bird {
	position: absolute;
	right: 20px;
	bottom: -30px;}
.tweet {
	font-size: 12px;
	line-height: 18px;
	padding: 5px 0;}


/* --isPortfolio */
.isPortfolio {
	position: relative;
	margin: 0 30px 30px;
	border-bottom: 1px dotted #dddcd7;}


/* --Items */
.item {
	float: left;
	font-size: 1.4em;
	line-height: 1.6em;
	width: 218px;
	padding: 20px 30px;
	background: #fff;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;}
.item.current {
	color: #fff;
	background: #232020;
/*
	-webkit-transform: scale(1.05); -moz-transform:  scale(1.05);
	-moz-box-shadow: 0 1px 2px #c2c2c2; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2;
	z-index: 100;
*/
}

/*
.item.current h3, .item.current div, .item.current img, .item.current span {
	-webkit-transform: scale(.95); -moz-transform:  scale(.95);}
*/


.item h3 {margin: 3px 0 5px 0;}
.item h3 a {color: #333;}
.item.current h3, .item.current h3 a {color: #fff;}




/* Aside Items */
.isAside .item {
	padding: 0;
	width: 258px;
	margin: 0 20px 0 0;}
.isAside p {margin: 0 0 5px 0;}
.isAside img {float: left; margin: 0 10px 10px 0;}




/* Portfolio Items */
.isPortfolio .item {
	min-height: 208px;
	border-top: 1px dotted #ddd;}
.isPortfolio .item span.label {display: none; margin: 0 5px 0 0;}
.isPortfolio .item.current {border-top:1px solid #232020;}
.isPortfolio .item.current span.label {display: inline-block;}


.clientlogo {
	height: 121px;
	margin: 10px 0 5px;
	border: 1px solid #f1f1f1;
	background: #fff;}
.clientlogo img {padding: 10px;}


.item.skewLeft {
	border-left: 1px dotted #ddd;}
.item.current.skewLeft{
	border-left: 1px solid #232020;
/*
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
*/
}

.item.skewCenter {
	border-left: 1px dotted #ddd;
	border-right: 1px dotted #ddd;}
.item.current.skewCenter {
	border-left: 1px solid #232020;
	border-right: 1px solid #232020;
/*
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
*/
}
	
.item.skewRight {
	border-right: 1px dotted #ddd;}
.item.current.skewRight {
	border-right: 1px solid #232020;
/*
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
*/
}




/* -- SLIDESHOW */
.slideshow {}


/* #FOOTER
---------------------------------------------------- */
#footer {}
.isFooter {
	font-size: 1.2em;
	line-height: 1.5em;}
	
ul.navFooter {
	padding: 0 20px;
	margin: 20px 0 0 0;}
ul.navFooter li {
	float: left;
	list-style-type: none;}

ul.navFooter li a {
	padding: 0 10px;
	color: #777;}
ul.navFooter li a:hover {color: #111;}


/* #THEMES
---------------------------------------------------- */
body.light {}




body.dark {
	color: #f1f1f1;
	background-color: #2b2b2b;
	background-image: url("/newgfx/body-bg.png");}
body.dark h2, body.dark p.leading {text-shadow: 0 1px 0 #111;}



/* #AGENTUR
---------------------------------------------------- */
body#agentur {}


/* #LEISTUNGEN
---------------------------------------------------- */
body#leistungen {}
body#performance-marketing {}


/* #REFERENZEN
---------------------------------------------------- */
body#referenzen {}
body#referenzen .isContent {}


/* #NEWS
---------------------------------------------------- */
body#news {background-image: url("/newgfx/body-alarm.jpg");}


/* #JOBS
---------------------------------------------------- */
body#jobs {}


/* #KONTAKT
---------------------------------------------------- */
body#kontakt .isContent {padding-bottom: 30px;}

		
/* #EXTRA
---------------------------------------------------- */
/* clear floats */
.xclear:after,
#task:after,
#navMain:after,
.isContent:after,
.row:after,
.isPage:after,
.isAside:after,
.isPortfolio:after,
.isContact:after,
.isFooter:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;}
/* clear floats for stoopid IE 7 */
*:first-child+html .xclear,
*:first-child+html #task,
*:first-child+html #navMain,
*:first-child+html .isContent,
*:first-child+html .row,
*:first-child+html .isPage,
*:first-child+html .isAside,
*:first-child+html .isPortfolio,
*:first-child+html .isContact,
*:first-child+html .isFooter {
	min-height: 1px;}
/* clear floats for stoopider IE 6 */
* html .xclear,
* html #task,
* html #navMain,
* html .isContent,
* html .row,
* html .isPage,
* html .isAside,
* html .isPortfolio,
* html .isContact,
* html .isFooter {
	height: 1%;}