/* CSS Document */

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*
 * General Classes
 */
.wrapper {
	float:left;
	width:100%;
}

#contentMain ul, #contentMain ol, body.mceContentBody ul, body.mceContentBody ol{
	margin:0 0 20px 0;
}

#contentMain ul {
	list-style-type: disc;
}

#contentMain ol {
	list-style-type: decimal;
}

#contentMain li, body.mceContentBody li, body.mceContentBody li{
	margin: 0 0 0 13px;
}

.small{
	font-size:10px;
	line-height:normal;
}

.hide{
	display: none;
}

hr{
	height:1px;
	background-color:#FFFFFF;
	color:#000000;
	border:none;
}

.right{
	text-align:right;
}

.top{
	vertical-align:top;
}

.floatRight{
	float:right;
}

.floatLeft{
	float:left;
}

.clear{
	clear:both;
}

.nowrap{
	white-space:nowrap;
}

/*
 * HTML
 */
html {
	font-size:100.01%;
	height:100%;
	overflow:-moz-scrollbars-vertical;
	overflow-y:scroll; 
}

/*
 * Body
 */
body {
	height:100%;
	font-size: 11px;
	font-family: Helvetica, Arial, sans-serif;
	color: #FFFFFF;
	background: #000000;	
}

#body_portfolio{
	overflow-x:hidden
}

/*
 * Links
 */
a, a:hover, a:visited, a:active, a:focus, a:link { 
	color: #FFFFFF; 
	text-decoration: none; 
}

/*
 * Header
 */
#header {
	width: 100%;
	height: 156px;
	background: url( ../img/header-background.png );
}

#header-wrapper {
	position: absolute;
	left: -435px;
	margin-left: 50%;
	width: 870px;
}

#logo-trigger { 
	position: absolute; 
	top: 35px; 
	left: -6px; 
}

#logo-wordpress { 
	position: absolute; 
	top: 35px; 
	right: 100px; 
}

#logo-twitter { 
	position: absolute; 
	top: 35px; 
	right: 50px; 
}

#logo-facebook { 
	position: absolute; 
	top: 35px; 
	right: 0; 
}

/*
 * Navigation
 */
#navigation { 
	position: absolute; 
	top: 135px; 
}

#navigation li {
	display: inline;
	margin-right: 60px;
}

#navigation a.active{
	color:#ff5a00;
}



/*
 * Subnavigation
 */
#subNav{
	margin-top: 30px;
	float:left;
}

#subNav li{
	margin-bottom: 15px;
}

#subNav li a { 
	display: block; 
	padding: 3px 0 2px 15px; 
	width: 233px; 
	background-color:#4d4d4d; 
}

#body_portfolio #subNav li a {
	background-color:transparent;
	background-image:url('../img/pixel-white-alpha-1.png');	
}

#subNav li a:hover, #subNav li a.active, #body_portfolio #subNav li a:hover, #body_portfolio #subNav li a.active {
	background:0;
	background-color:#ff5a00; 
}

#subNav li.paging, #body_portfolio #subNav li.paging { 
	display: block; 
	width:1px;
	padding: 2px 20px 2px 15px; 
	background-color:#808080;
	white-space:nowrap;
}

#subNav li.paging a, #body_portfolio #subNav li.paging a { 
	display: inline; 
	background: none; 
	padding: 0; 
}

/*
 * Content
 */
#content {
	width: 100%;
	max-height: 100%;
	background-color: #000000;
}

#content-wrapper {
	position: absolute;
	left: -490px;
	margin-left: 50%;
	width: 980px;
}

a.pdf { 
	display: block; 
	width: 28px; 
	height: 13px; 
	background: url( ../img/icon-pdf.png ) no-repeat; 
}

#options { 
	margin-top: 15px; 
}

#description{ 
	margin-top: 30px; 
	width:690px;
	color:#999999;
}

.FF5A00, a.FF5A00 { 
	color: #FF5A00; 
}

#content-wrapper p, body.mceContentBody{
	line-height:17px;
	padding-bottom:17px;
	letter-spacing: 1px;
}

/*
 * Home
 */
#body_home {
	background: url( ../img/home-background.png );
}

#body_home #content-wrapper {
	min-height:800px;
	background: url( ../img/home-aufhellung.png );	
	background-repeat:no-repeat;
	background-position:68px -65px;
}

#showreel {
	position: absolute;
	top: 70px;
	left: -312px;
	margin-left: 50%;
	width: 624px;
	border: 1px solid #313131;
}

/*
 * Kontakt
 */
#body_kontakt #subNav li span { 
	display: block; 
	padding-left: 15px; 
	line-height: 1.8;
}

#body_kontakt #subNav{
	color:#999999;
}

#body_kontakt #subNav li span a{
	margin:0;
	padding:0;
	color:#999999;
	background:0;
}

#planImage{
	width:700px; 
	height:300px;
	position: relative;
	overflow:hidden; 
	border:1px solid #575757;
}

#plan-img-wrapper{
	position: absolute;
	width: 1100px;
	height: 1538px;
	left: -200px;
	top: -619px;
}

#plan-img-wrapper img{
	position: absolute;
	width: 900px;
	height: 919px;
	left: 200px;
	top: 150px;
	cursor:move;
}

/*
 * Agentur
 */
#agentur-kunden-wrapper { 
	width: 696px; padding-top: 
	30px; border: 
	1px solid #414141; 
}
#agentur-kunden-wrapper ul { 
	width: 200px; 
	margin-left: 20px; 
}
#agentur-kunden-wrapper ul li { 
	margin-bottom: 21px; 
	letter-spacing:1px; 
	color: #999999; 
}
#agentur-kunden-wrapper ul li a { 
	color: #999999; 
}

/*
 * Leistungen
 */
.menu { 
	margin: 30px 0 0 53px; 
}
.leistungs-header { 
	display: block; 
	width: 600px; 
	height: 100px;  
	margin-left:2px;
}

.menu p {
	margin: 0 0 30px 0; 
	color:#999999;
	font-size: 11px;
}
.acitem{
	margin:-30px 0 50px 0;
}

#konzept { background: url( ../img/konzept-inactive.png ) no-repeat; }
#kreation { background: url( ../img/kreation-inactive.png ) no-repeat; }
#kommunikation { background: url( ../img/kommunikation-inactive.png ) no-repeat; }

#konzept.active { background: url( ../img/konzept-active.png ) no-repeat; }
#kreation.active { background: url( ../img/kreation-active.png ) no-repeat; }
#kommunikation.active { background: url( ../img/kommunikation-active.png ) no-repeat; }

/*
 * Portfolio
 */
#background-image {
	position: absolute;
	top: 156px;
	left: 0;
	width: 100%;
}

#raster {
	position: absolute;
	top: 156px;
	left: 0;
	width: 100%;
}

/*
 * Portfolio Detail
 */
div.scrollable { 
	position: relative; 
	overflow: hidden; 
	width: 696px; 
	height: 345px;
	margin-bottom: 15px;
}

#body_agentur_ueber-uns div.scrollable { 
	height: 300px;
}  

div.scrollable div.items { 
	width:20000em; 
	position:absolute;
} 

div.scrollable div.items div { 
	float:left;
	width:696px; 
	height:345px;
	position:relative;
}

#body_portfolio_detail #options, #body_agentur_ueber-uns #options { 
	height: 10px; 
}

#body_portfolio_detail #options a, #body_agentur_ueber-uns #options a {
	float: left;
	width: 24px; 
	height: 13px;
	margin-right: 12px;
	background: url( ../img/portfolio-detail-gallery-navigation-inactive.png ) no-repeat;
}

#body_portfolio_detail #options a.active, #body_agentur_ueber-uns #options a.active {
	background: url( ../img/portfolio-detail-gallery-navigation-active.png ) no-repeat;
}

#body_portfolio_detail #options a.last{
	margin-right: 48px;
}

#body_portfolio_detail #options a.autoplay, #body_portfolio_detail #options a.autoplay.active, #body_agentur_ueber-uns #options a.autoplay, #body_agentur_ueber-uns #options a.autoplay.active{
	width: 18px; height: 18px;
	margin-right: 18px;
	margin-top: -2px;
	background:0;
}

#body_portfolio_detail #options a.www {
	display: inline-block;
	width: 32px; height: 13px;
	background: url( ../img/icon-www.png );
}
#body_portfolio_detail #options a.pdf { 
	display: block; 
	width: 28px; 
	height: 13px; 
	background: url( ../img/icon-pdf.png ) no-repeat; 
}