/* Reset */

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,em,font,img,small,strong,ol,ul,li,fieldset,form,table,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline }
:focus { outline: 0 }
html,body { height: 100%; width: 100%; }
ol,ul { list-style: none inside none }
button { outline: none }
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: "" "" }

/* Basics */

body { font: 12px Arial, Helvetica, sans-serif; color: #c4c4c4; background-color: #000; }
small { color: #848484 }
ul li { line-height: 18px; color: #848484 }
hr{ border: 0px; border-top: solid 1px #b4b4b4; border-bottom: transparent }
em { font-style: italic }
.bold, strong { font-weight: bold }
.underline{ text-decoration: underline }
small{ font-size: 10px }
.normal-size{ font-size: 100% !important }
.bold { font-weight: bold }

.center { text-align: center }
.left { text-align: left }
.right { text-align: right }
.justify { text-align: justify }

.floatLeft { float: left }
.floatRight { float: right }
.floatNone { float: none }
.clear { clear: both }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }

.relative { position: relative }
.absolute { position: absolute }

.no-padding-bottom { padding-bottom: 0 }

.cursor { cursor: pointer }

a { text-decoration: none; color: #ffd600 }
a:hover { text-decoration: underline }

h1 { font-size: 28px; color: #fff; margin-bottom: 3px; letter-spacing: 1px }
h2 { font-size: 18px; color: #fff;  font-weight: bold; margin-bottom: 8px; letter-spacing: 1px }
h3 { font-size: 15px; color: #fff; margin-bottom: 3px; letter-spacing: 1px }
h4 { font-size: 13px; color: #ffd600; font-weight: normal; line-height: 18px; margin-bottom: 18px; letter-spacing: 1px }

p { line-height: 18px; color: #fff; margin-bottom: 18px }

/* Colors */

.white { color: #fff }
.red { color: red }
.green { color: green }
.yellow { color: #FFD600 }

/* Margins and Paddings */

.m0auto { margin: 0 auto }
.m4r { margin-right: 4px }
.m12r { margin-right: 12px }
.m13r { margin-right: 13px }
.m23r { margin-right: 23px }
.m20b { margin-bottom: 20px }
.m35b { margin-bottom: 35px }
.m50b { margin-bottom: 50px }
.m20l { margin-left: 20px }
.m20r { margin-right: 20px }
.m20t { margin-top: 20px }
.m40t { margin-top: 40px }

.pb8 { padding-bottom: 8px }
.pb20 { padding-bottom: 20px }

.img-pb20 img{ padding-bottom: 20px }

/* Width, Heights and Min-Heights */

.h145 { height: 145px }
.h340 { height: 340px }
.h350 { height: 350px }
.h392 { height: 392px }
.h393 { height: 393px }
.h395 { height: 395px }
.h400 { height: 400px }
.h419 { height: 419px }
.h420 { height: 420px }
.h450 { height: 450px }
.h451 { height: 451px }
.h554 { height: 554px }
.h556 { height: 556px }
.h560 { height: 560px }
.h565 { height: 565px }
.h580 { height: 580px }
.h600 { height: 600px }
.h602 { height: 602px }
.h620 { height: 620px }
.h700 { height: 700px }

.w208 { width: 208px }
.w320 { width: 320px }

.no-margin { margin: 0 !important }
.mh550 { min-height: 550px; height: auto !important; height: 550px }

.lineheight-normal { line-height: 15px }

/* Backgrounds */
#background { width: 100%; position: fixed; top: 0; left: 0; z-index: -70; }

body.home { background: url(/img/backgrounds/home.jpg) no-repeat fixed center center #000; }
body.agb, body.wallpaper { background: url(/img/backgrounds/home.jpg) no-repeat center center fixed #000 }
body.team { background: url(/img/backgrounds/team.jpg) no-repeat center center #000 }
body.leistungen { background: url(/img/backgrounds/leistungen.jpg) no-repeat top center #000 }
body.referenzen { background: url(/img/backgrounds/showcase.jpg) no-repeat center center fixed #000 }
body.kontakt { background: url(/img/backgrounds/kontakt.jpg) no-repeat top center #000 }
body.jobs { background: url(/img/backgrounds/jobs.jpg) no-repeat top center #000 }

/* Navigation */
#header { position: relative; height: 128px; background: url(/img/navigation/background-big.png) no-repeat bottom center }

h1#logo { height: 80px; width: 127px; margin: 0 auto; background: url(/img/logo.png); text-indent: -8675px; overflow: hidden }

ul#navi-fade { width: 749px; list-style-type: none; position: absolute; bottom: 0; height: 48px; left: 50%; margin-left: -374px; overflow: hidden }
ul#navi-fade li { float: left }
ul#navi-fade li a { display: block; height: 34px; padding: 14px 0 0 0; width: 107px; font-size: 16px; font-weight: 16px; color: #ffffff; text-align: center; text-decoration: none }
ul#navi-fade li a.active, ul#navi-fade li a:hover { color: #ffd600; background: url(/img/navigation/item-background.png) }

/* Template */

#language-switcher { position: absolute; right: 0; top: 6px; width: 75px; height: 12px; background: url(/img/bg-language-switcher.png); text-align: center; padding: 0 0 4px 0; font-size: 0 }
#language-switcher a { font-size: 10px; color: #84827e; margin-right: 3px }

div#content { margin-top: 60px; padding-bottom: 60px; }

#wrapper-all { position: relative; min-height: 100%; height: auto !important; height: 100%; }

.wrapper { position: relative; width: 970px; margin: 0 auto }
.wrapper-small { position: relative; width: 940px; margin: 0 auto }

.box { background: url(/img/box-background.png); padding: 20px; margin-bottom: 20px }
.box-full { width: 930px; background: url(/img/box-background.png); padding: 20px }
.box-half { float: left; width: 320px;  }
.box-one-third { position: relative; float: left; width: 190px; padding: 20px; margin-right: 31px; background: url(/img/box-background.png) }
.box-two-third { position: relative; float: left; width: 664px; padding: 20px; background: url(/img/box-background.png); overflow: hidden }

.box-light { background: url(/img/light-box-background.png) }
.box-light p { padding-top: 8px; padding-bottom: 6px; text-align: center }

/* Inputs, Textareas and Selects */

.wrapper input.text, .wrapper textarea { padding: 3px; font: 12px Arial, Helvetica, sans-serif; color: #aaa; background-color: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #444 }
.wrapper input.text:focus, .wrapper textarea:focus { color: #fff; background: #444; border: 1px solid white }
.wrapper input.text { width: 300px; height: 17px }
.wrapper textarea { width: 300px; height: 79px; overflow: auto }

/* 404 Seite */

.error-404 { width: 497px; height: 387px; margin: 0 auto; background: url(/img/team-background.png) no-repeat top center; position: relative }
.error-404 .text { position: absolute; width: 600px; top: 250px; left: -51px; padding: 20px; background: url(/img/box-background.png); text-align: center }

/* Home */

div#slogan{ background: url(/img/box-background.png); padding: 20px; width: 430px; position: absolute; right: 0; top: 40px; text-align: center }
div#slogan h1 { position: relative; height: 82px; letter-spacing: 1px; margin-bottom: 15px }
div#slogan p { margin-bottom: 25px }
div#slogan span.yellow { font-size: 32px }
div#slogan .big-button { margin-bottom: 20px }

div#space-shuttle { background: url(/img/space-shuttle.png); width: 134px; height: 110px; position: absolute; top: 250px; left: 300px }
div.ballon { position: absolute; display: none; overflow: hidden }
div.ballon p { font-style: italic; margin-bottom: 10px }
div.ballon span { color: #FFD600; font-size: 11px }
div.ballon-1 { background: url(/img/ballon-1.png); width: 173px; height: 133px; position: absolute; top: 100px; left: 175px; padding: 20px 15px 0 50px }
div.ballon-2 { background: url(/img/ballon-3.png); width: 173px; height: 102px; position: absolute; top: 243px; left: 10px; padding: 20px 45px 0 50px }
div.ballon-3 { background: url(/img/ballon-2.png); width: 173px; height: 98px; position: absolute; top: 370px; left: 170px; padding: 55px 15px 0 50px }

/* Referenzen */

.projekt-slider-prev, .nav-prev { position: absolute; z-index: 10; top: 50%; left: -5px; margin-top: -15px; width: 49px; height: 50px; background: transparent url(/img/slider/prev.png) no-repeat; cursor: pointer }
.projekt-slider-next, .nav-next { position: absolute; z-index: 10; top: 50%; right: -5px; margin-top: -15px; width: 49px; height: 50px; background: transparent url(/img/slider/next.png) no-repeat; cursor: pointer }

.projekt-slider { position: relative; overflow: hidden; width: 664px; height: 450px }
.projekt-slider .projekt-slider-items { width: 20000em; position: absolute }
.projekt-slider-items div { float: left; height: 450px; width: 664px }

div.referenzen div { position: relative; float: left; width: 475px; height: 168px; background: url(/img/box-background.png) repeat scroll 0 0 transparent; margin-right: 20px; margin-bottom: 20px }
div.referenzen div.last { margin-right: 0 !important }
div.referenzen a:hover { text-decoration: none }
div.referenzen img { width: 455px; height: 148px; position: absolute; top: 10px; left: 10px }
div.referenzen .text { position: absolute; bottom: 10px; left: 10px; width: 455px; height: 45px; color: #fff; font-weight: bold; font-size: 17px; background: url(/img/box-background.png); overflow: hidden; display: none }
div.referenzen .text h3 { position: absolute; top: 5px; left: 15px }
div.referenzen .text h4 { position: absolute; top: 22px; left: 15px }

/* Kunden */
.kunden img { margin: 0 10px 10px 0 }
.partner img { margin: 0 7px 7px 0 }

/* Team */

.box-team { width: 668px; padding-top: 164px; margin-top: -15px }
.team-1 { background: url(/img/teams/team-1.png) no-repeat top center }
.team-2 { background: url(/img/teams/team-2.png) no-repeat top center }
.team-3 { background: url(/img/teams/team-3.png) no-repeat top center }

.employee { float: left; width: 312px; padding-right: 20px; padding-bottom: 20px; position: relative }
.employee div.description { width: 221px; position: absolute; left: 100px; top: 0 }
.employee div.description h3 { position: absolute; top: 0 }
.employee div.description h4 { position: absolute; top: 23px }
.employee div.description p { position: absolute; top: 46px }

/* Kontakt */

img#loader { position: absolute; bottom: 27px; right: 195px }
span.oder { color: #FFD600; margin: -5px 30px 0 30px; font-size: 30px; float: left }

/* Buttons */

ul.buttons{ position: absolute; left: 20px; bottom: 0 }

.button { display:block; height: 30px; width: 157px; margin-bottom: 20px; background: url(/img/buttons/sprite-buttons.png) no-repeat; overflow: hidden; cursor: pointer }
.button span { display: block; height: 30px; width: 157px; background: url(/img/buttons/sprite-buttons.png) no-repeat; opacity: 0; filter:alpha(opacity=0); overflow: hidden; cursor: pointer }
.button span a { display: block; width: 157px; height: 30px; cursor: pointer; text-indent: -8348px; overflow: hidden }

.button-management-active { background-position: 0 -60px }
.button-management span, .button-management-active span { background-position: 0 -30px }

.button-entwicklung { background-position: -157px 0 }
.button-entwicklung-active { background-position: -157px -60px }
.button-entwicklung span, .button-entwicklung-active span { background-position: -157px -30px }

.button-design { background-position: -314px 0 }
.button-design-active { background-position: -314px -60px }
.button-design span, .button-design-active span { background-position: -314px -30px }

.button-mission { background-position: -471px 0 }
.button-mission-active { background-position: -471px -60px }
.button-mission span, .button-mission-active span { background-position: -471px -30px }

.button-service { background-position: -628px 0 }
.button-service-active { background-position: -628px -60px }
.button-service span, .button-service-active span { background-position: -628px -30px }

.button-kunden { background-position: -785px 0 }
.button-kunden-active { background-position: -785px -60px }
.button-kunden span, .button-kunden-active span { background-position: -785px -30px }

.button-partner { background-position: -942px 0 }
.button-partner-active { background-position: -942px -60px }
.button-partner span, .button-partner-active span { background-position: -942px -30px }

.button-technologien { background-position: -1099px 0 }
.button-technologien-active { background-position: -1099px -60px }
.button-technologien span, .button-technologien-active span { background-position: -1099px -30px }

.button-senden { background-position: -1256px 0; position: absolute; right: 20px; bottom: 0 }
.button-senden-active { background-position: -1256px -60px }
.button-senden span, .button-senden-active span { background-position: -1256px -30px }

.button-fragebogen { background-position: -1413px -60px; position: absolute; right: 20px; top: 35px }
.button-fragebogen-active { background-position: -1413px -60px }
.button-fragebogen span, .button-fragebogen-active span { background-position: -1413px -30px }

.big-button { display: block; width: 240px; height: 55px; background-image: url(/img/buttons/sprite-buttons.png); overflow: hidden; cursor: pointer }
.big-button span { display: block; width: 240px; height: 55px; background-image: url(/img/buttons/sprite-buttons.png); opacity: 0; filter:alpha(opacity=0); overflow: hidden }
.big-button span a { display: block; width: 240px; height: 55px; cursor: pointer; text-indent: -8348px; overflow: hidden }

.button-ueberzeugen-sie-sich-selbst { background-position: 0px -90px }
.button-ueberzeugen-sie-sich-selbst span { background-position: 0px -200px }

.button-starten-sie-voll-durch { background-position: -240px -90px }
.button-starten-sie-voll-durch span { background-position: -240px -200px }

a.download-button-questionary { display: block; width: 159px; height: 39px; margin-bottom: 7px; background: transparent url(/img/buttons/download-button-questionary.png) no-repeat; text-indent: -8675px; overflow: hidden }

/* Leistungen */
ul.leistungen { display: block; height: 66px; margin: -4px 0 10px -4px; width: 684px; overflow: hidden }
ul.leistungen li { float: left }
ul.leistungen li a { display: block; font-size: 18px; height: 44px; padding-top: 22px; width: 159px; background: url(/img/leistungen-sprite.png); text-decoration: none; text-align: center }
ul.leistungen li.first a { background-position: 0 0; color: #FFD600 }
ul.leistungen li.first a:hover { background-position: 159px 0; color: #000 }
ul.leistungen li.first a:active, ul.leistungen li.first a.current { background-position: 318px 0; color: #000 }
ul.leistungen li.normal a { background-position: 0 -66px; margin-left: -28px; color: #FFD600 }
ul.leistungen li.normal a:hover { background-position: 159px -66px; color: #000 }
ul.leistungen li.normal a:active, ul.leistungen li.normal a.current { background-position: 318px -66px; color: #000 }
ul.leistungen li.last a{ background-position: 0 -66px; margin-left: -28px; color: #FFD600 }
ul.leistungen li.last a:hover { background-position: 159px -66px; color: #000 }
ul.leistungen li.last a:active, ul.leistungen li.last a.current  { background-position: 318px -66px; color: #000 }

div.leistungen-service { position:relative; overflow:hidden; clear:both; height: 380px }
div.leistungen-service div.item { float: left; display: block; width: 664px }
div.leistungen-service .items { width: 20000em; position: absolute; clear: both; margin: 0; padding: 0 }
div.leistungen-service div.item img { padding-bottom: 20px }

/* Blog */
.blog-left { position: relative; float: left; width: 230px; margin-right: 31px; }
.blog-right { position: relative; float: left; width: 644px; padding: 20px; background: url(/img/box-background.png); overflow: hidden}

.blog-right h1 a { color: #fff; }
.blog-right h1 a:hover { text-decoration: none; }
.blog-right ul { list-style: disc inside; margin-bottom: 18px }
.blog-right ul li { color: #fff; }

.blog-right .alignleft { float: left; margin-right: 15px }
.blog-right .alignright { float: right; margin-left: 15px }

ol#commentlist img { float: left; margin: 0 6px 0 0 }

/* Footer */
#footer { position: fixed; bottom: 0; height: 26px; width: 100%; }
#footer div { position: relative; width: 550px; height: 26px; margin: 0 auto; background: url(/img/bg-footer-long.png) no-repeat; }
#footer div p { margin-bottom: 0 !important; position: absolute; left: 45px; }
#footer div p { top: 3px; }
* #footer div p { top: 4px; }
#footer a, #footer span, #footer strong { color: #fff; font-size: 11px; float: left; }
#footer a { cursor: pointer }
#footer img.one { float: left; margin: 4px 5px 0 5px }
#footer img.two { float: left; margin: 2px 5px 0 5px }