/* ------------------------------------------------- 
Project: brandbuero.de
Description: brandbuero Media GmbH
Version: 1.0
Author: Moritz Limanski
Author URI: http://www.portnull.de
CMS: ExpressionEngine
---------------------------------------------------- */
* {padding: 0; margin: 0;}


/* BUILD
---------------------------------------------------- */
body {
	font: 10px Helvetica, Arial, Verdana, sans-serif;
	color: #333;
	background-color: #eee;
	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:#f33;text-decoration: none;}
a img {border: 0;}


/* -- Headlines */
h1, h2, h3 {font-family: "Yanone Kaffeesatz", Helvetica, Arial, Verdana, sans-serif;}

h1 {
	display: block;
	font-size: 8em;
	line-height: 1em;
	font-style: italic;
	color: #ec1b23;
	padding: 0 25px;
	margin: 40px 0;
	text-shadow: 4px 3px 0 #fff;
	letter-spacing: 1px;
	-webkit-transform: rotate(-1.5deg);
	-moz-transform: rotate(-1.5deg);}
h1 span {
	display: block;
	font-size: .80em;
	color: #111;}

h2 {
	font-size: 2.289em;
	line-height: 1em;
	margin: 0 0 20px 0;}
h2 span {color: #777;}	

h3 {
	font-size: 1.5em;
	line-height: 1.3em;
	font-weight: normal;
	margin: 0 0 10px 0;}

.article h2 a, h3 a {color: #333;}
.article h2 a:hover, h3 a:hover {color: #ec1b23 !important;}


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


/* -- Tags */
p.leading, blockquote p, blockquote:before,
.pageSliderContent p:first-child {
	font-family: "Yanone Kaffeesatz", Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.5em;
	line-height: 1.3em;}

p {margin: 15px 0;}
p.leading,
.pageSliderContent p:first-child {
	margin: 0 0 20px;}


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;}

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

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

u {
	padding: 1px 4px;
	text-decoration: none;
	background: #fffcab;}
p.leading u {
	padding: 0;
	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;}
.clear {clear: both;}
.hidden {
	border: 0;
	visibility: hidden;}


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

a.btn, input.btn, .pagination a, .pagination strong {
	color: #111;
	border: 1px solid #ddd;}
a.btn.link span {padding-left:14px;background: url("/newgfx/ico-rarr.png") 0 0 no-repeat;}
.pagination a.btn.link span {background: url("/newgfx/ico-rarr.png") 0 11px no-repeat;}
a.btn.back span {padding-left:14px; background: url("/newgfx/ico-larr.png") 0 11px no-repeat;}
.pagination strong {background: #f1f1f1;} /* current page */

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

.btn.active {
	color: #fff;
	text-shadow: 0 1px 0 #333;
	border: 1px solid #cf001c;
	background-color: #cf001c;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#82cace), to(#5ebbc1));
	background: -moz-linear-gradient(top, #82cace, #5ebbc1);}
	
.info a.btn {
	color: inherit;
	border-color: inherit !important;}
.isNews a.btn {border-color: #777;}
.isNews a.btn:hover {color: #fff;}	
	

/* CONTENT
---------------------------------------------------- */	
.isContent {
	position: relative;
	padding: 34px 0 0;
	background: #fff;
	-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;
	z-index: 100;}
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;}		
.row {
	clear: both;
	padding: 20px 30px 30px;
	border-top: 3px double #ddd;}
.row.noborder {
	padding: 0 30px 30px;
	border: 0;}


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


.article {
	font-size: 1.4em;
	line-height: 1.5em;
	padding-left: 30px;
	width: 480px;}
.article ul {
	margin: 10px 0 10px 15px;
	list-style-type: square;}
.article ol {
	margin: 10px 0 10px 15px;
	list-style-type: decimal;}

	
.meta {
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.5em;
	width: 480px;
	padding: 5px 0;
	margin: 0 0 30px 30px;}
	
.meta span {padding: 10px 10px 10px 28px;}
.metaTime {background: url("/newgfx/ico-time.png") 0 3px no-repeat;}	
.metaDate {background: url("/newgfx/ico-date.png") 0 3px no-repeat;}
.metaPrint {padding: 4px 0;background: url("/newgfx/ico-print.png") 0 1px no-repeat;}
.metaPrint span {padding-left: 30px;}

ul.attachments li {list-style-type: none;}
ul.attachments span {
	padding: 0; padding-left:14px; background: url("/newgfx/ico-download.png") 0 1px no-repeat;}


.pagination {margin: 0 0 10px 28px;}
.pagination a {font-size: 1.2em !important;}
.pagination span {padding: 10px 10px 10px 28px;}
.pagination strong {font-weight: normal;font-size: 1.2em !important;}


.isPageFooter {
	font-size: 1.2em;
	line-height: 1.5em;
	margin: 0 0 30px 0;
	width: 500px;}
.isPageFooter .info {
	float: left;
	padding: 0;
	margin: 0 0 0 30px;}
.isPageFooter .infoHeader {
	padding: 0;}


/* --isCounter */
.isCounter {float: right;}
.isCounter small {display: block;}
#thecounter {
	font-family: "Yanone Kaffeesatz", Helvetica, Arial, Verdana, sans-serif;
	position: relative;
	font-size: 2em;
	line-height: .9em;
	color: #fff;}
#thecounter em {
	float: left;
	display: block;
	text-align: center;
	font-style: normal;
	width: 20px;
	padding: 4px 0 8px;
	margin: 0 2px 0 0;
	background: #333;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
#thecounter em.last {margin: 0;}	
.flip {
	position: absolute;
	top:0;
	width: 14px;
	height: 20px;
	background: url("/newgfx/gfx-counter.png") bottom center no-repeat;
	z-index: 100;}


/* --isSlider */
.isSlider {background: #d6eaeb;}
	
ul#theslider {
	margin: 0 0 0 30px;}
ul#theslider li {
	float: left;
	margin: 0 40px 0 0;
	list-style: none;}
ul#theslider li img {
	padding: 5px;
	background: #fff;
	-moz-box-shadow: 0 1px 2px #999; -webkit-box-shadow: 0 1px 2px #999; box-shadow: 0 1px 2px #999;}

.bxslider_container {
	width: 300px !important;}
.bx_pager {
	text-align: center;
	padding:18px 0 10px;}
.bx_pager a {
	color: #d6eaeb;
	outline: none;
	padding: 7px 5px 5px 5px;
	height: 0 !important; overflow: hidden;
	background: url("/newgfx/ico-slider-0.png") 0 0 no-repeat;}	
.bx_pager a.active {background: url("/newgfx/ico-slider-1.png") 0 0 no-repeat;}

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

/* -- isSlideshow */
.isSlideshow {
	clear: both;
	border-top: 1px solid #ddd;}


/* -- pageSlider */
#pageSlider {
	font-size: 1.4em;
	line-height: 1.5em;
	margin: 0 30px;}
.pageSliderContent {
	width: 840px;}
.pageSliderContent h2 {
	font-weight: normal;}
.pageSliderContent h2 strong {
	font-weight: bold;}	
.pageSliderContent .text {
	width: 480px;
	overflow: hidden;}
.pageSliderContent img.right{
	margin: 0 0 14px 14px;}
	
	
#sliderPagination {
	text-align: center;
	margin: 5px 0 15px;}
#sliderPagination a {
	color: #fff;
	outline: none;
	padding: 7px 5px 5px 5px;
	height: 0 !important; overflow: hidden;
	background: url("/newgfx/ico-slider-0.png") 0 0 no-repeat;}
#sliderPagination a.activeSlide {background: url("/newgfx/ico-slider-1.png") 0 0 no-repeat;}


#sliderNavigation {
	z-index: 9999;
	position: relative;}
#sliderNavigation a {
	display: block;
	text-indent: -9999em;
	height: 32px;
	width: 32px;}	
	
#sliderNavigation a#prev {
	margin-left: -18px;
	background: url(/newgfx/slider-prev.png) 0 0 no-repeat;}
#sliderNavigation a#next {
	margin-right: -18px;
	background: url(/newgfx/slider-next.png) 0 0 no-repeat;}



/* --isContact */
.isContact {
	font-size: 1.4em;
	line-height: 1.5em;
	width: 340px;
	padding: 30px;
	margin-bottom: 30px;
	border: 1px solid #111;
	border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
	background: #2f2f2f;}
.isContact.left {margin-left:30px;}
.isContact.right {margin-right:30px;}
.isContact h2 {
	color: #fff;
	margin: 0 0 10px;}	

.isAddress {
	color: #fff;
	text-shadow: 0 1px 0 #000;}
address p {margin: 10px 0 0;}
.hfon {
	padding-left: 20px;
	color: #ec1b23;
	background: url("/newgfx/ico-fon.png") 0 0 no-repeat;}


#map {
	position: absolute;
	top:0;
	left: 0;
	height: 400px;
	width: 100%;
	z-index: 0;}
#mapButtons {}

.gmnoprint {
	display: none;
	font-size: 1.2em;
	text-align: left;
	color: #333;
	padding-bottom:10px;}
.gmnoprint h3 {
	font-size: 1.2em;}


/* --Items */
.item {
	float: left;
	font-size: 1.4em;
	line-height: 1.5em;
	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: #fff;}

.item h3 {margin: 3px 0 5px 0; text-shadow: 1px 1px 1px rgba(255,255,255,.9);}
.item h3 a {color: #333;}

/* -- Aside Items */
.isAside {}
.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 {
	position: relative;
	margin: 0 30px 30px;
	border-bottom: 1px dotted #ddd;}

.isPortfolio .item {
	min-height: 160px;
	border-top: 1px dotted #ddd;}
.isPortfolio .item h3 {visibility: hidden;}
.isPortfolio .item span.label {display: none; margin: 0;}
.isPortfolio .item.current span.label {display: block;}
.isPortfolio .item.current h3 {visibility: visible; color: #ec1b23;} 

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


.item.skewLeft {
	border-left: 1px dotted #ddd;}
.item.current.skewLeft{}

.item.skewCenter {
	border-left: 1px dotted #ddd;
	border-right: 1px dotted #ddd;}
.item.current.skewCenter {}
	
.item.skewRight {
	border-right: 1px dotted #ddd;}
.item.current.skewRight {}


/* SIDEBAR
---------------------------------------------------- */	
.isSidebar {
	float: right;
	font-size: 1.2em;
	line-height: 1.5em;
	width: 315px;
	margin-right: 30px;}

.info {
	padding: 18px 0 0;
	margin: 0 0 30px 0;}
.info.noborder {padding: 0;}	
	
.infoHeader {
	font-size: 1.1em;
	padding: 0 30px;}
.infoContent {
	padding: 0 28px;}	
.infoFooter {
	padding: 15px 28px 18px;
	margin: 10px 0 0 0;
	border-top-width: 1px;
	border-top-style: dotted;}

/* --isText */
.isText {background: #d6eaeb;}
	
	
/* --isNews */
.isNews {
	background: #222;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
	background: -moz-linear-gradient(top, #222, #111);}
.isNews .infoFooter {color: #979797; border-color: #333;}


.isNews ul {
	padding: 0 23px;
	text-shadow: 0 1px 0 #111;
	color: #f1f1f1;}
.isNews ul li {
	margin: 2px 0;
	list-style-type: none;}
.isNews ul a {
	display:block;
	color: #f1f1f1;
	padding: 3px 7px 4px;
	border-bottom: 1px solid #111;}
.isNews ul 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;}
.isNews ul 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;
	background: #d6eaeb;
	border: 1px solid #ddd;
	background: #fff;}
.isTwitter .infoFooter {border-color: #ddd;}

img.avatar {
	float: right;
	margin: 0 -5px 0 0;}
img#bird {
	position: absolute;
	right: 20px;
	bottom: -5px;}
.tweet {padding: 5px 30px;}	


/* --isPictures */
.isPictures {
	padding: 0;
	margin: 0;}
.isPictures img {
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
	-moz-box-shadow: 0 1px 0 #eee; -webkit-box-shadow: 0 1px 0 #eee; box-shadow: 0 1px 0 #eee;}
	
.isPictures a {-webkit-transition: all 0.5s ease-in;}
.isPictures a:hover {z-index: 999 !important;}

.isPictures a.picOne {
	position: relative;
	top:0;
	z-index: 20;}
.isPictures a.picTwo {
	position: relative;
	top: -50px;
	right: -75px;
	z-index: 10;}
.isPictures a.picThree {
	position: relative;
	top: -100px;
	z-index: 0;}



/* 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;}



/* TASK NAVIGATION
---------------------------------------------------- */
#task {position: relative;z-index: 9999;}
#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, Arial, Verdana, 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 #666; -webkit-box-shadow: 0 1px 1px #666; -moz-box-shadow: 0 1px 1px #666;}
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: #222; 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.current {color: #fff;}

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


/* Themes
---------------------------------------------------- */
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;}
body.dark .btn {
	color: #fff;
	border: 1px solid #444;
	background: #777;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#777), to(#555));
	background: -moz-linear-gradient(0% 100% 90deg,#555, #555, #777 100%);}
body.dark .btn:hover {
	border: 1px solid #cf001c;
	background-color: #ec1b23;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ec1b23), to(#cf001c));
	background: -moz-linear-gradient(top, #ec1b23, #cf001c);}
body.dark ul.navFooter li a:hover {color: #f1f1f1;}


/* Theme-images */
body#agentur, body#ueber-uns, body#about {background-image: url("/newgfx/body-agentur-ueberuns.jpg");}
body#leistungen {background-image: url("/newgfx/body-leistungen.jpg");}
body#social-media {background-image: url("/newgfx/body-social.jpg");}
body#performance-marketing {background-image: url("/newgfx/body-performance.jpg");}
body#whitepaper {background-image: url("/newgfx/body-leistungen.jpg");}
body#referenzen {background-image: url("/newgfx/body-referenzen.jpg");}
body#news {background-image: url("/newgfx/body-news.jpg");}
body#jobs {background-image: url("/newgfx/body-jobs.jpg");}
body#id404 {background-image: url("/newgfx/body-404.jpg");}


/* EXCEPTIONS */
body#social-media .row {border: 1px solid #ddd;}
body.dark #footer a:hover {color: #f1f1f1;}
body#leistungen .isAside h3 a {color: #ec1b23;}


body#agentur h1 span, body#referenzen h1 span, body#news h1 span,
body#ueber-uns h1 span, body#about h1 span {color: #fff;text-shadow: 4px 3px 0 #111;}


/* FORMS
---------------------------------------------------- */
label {
	display: block;}
input {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;}
input.text {
	width: 330px;
	padding: 5px;
	border: 2px solid #000;
	background: #f2f2f2;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
input.text:focus, textarea:focus {border-color: #f5f187; background: #f5f187;}	
input#submit {
	float: right;
	cursor: pointer;}	
	
textarea {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	height: 94px;
	width: 330px;
	padding: 5px;
	border: 2px solid #000;
	background: #f2f2f2;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}


/* EXTRA
---------------------------------------------------- */
/* clear floats */
.xclear:after,
#task:after,
#navMain:after,
.isContent:after,
.row:after,
.info:after,
.isPage:after,
.isPageFooter:after,
.isPictures:after,
.isAside:after,
.isPortfolio:after,
.pageSliderContent:after,
.isContact:after,
.isFooter:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;}
/* find clear floats for IE in ie.css */