/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, footer, header, hgroup,
menu, nav, output, ruby, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figure, footer,
header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* end of reset */

/* "Clearfix" hack by Nicolas Gallagher */
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.group:after {
    clear: both;
}
/* end of "Clearfix" hack */

body {
  font: 12px Verdana, Arial, Helvetica, sans-serif;
  background-color: #565656;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  margin-left: -480px;
  margin-top: -337px;
  padding: 24px;
  background-color: #FFFFFF;
}

.header, .container, .nav, .footer {
  width: 960px;
}

.header {
  margin-bottom: 16px;
}

.header img {
  float: left;
}

.header ul {
  padding-top: 20px;
  float: right;
}

.header li {
  margin-right: 16px;
  padding-left: 16px;
  float: left;
  border-left: 1px solid #9C9D9F;
}

.header li:first-child {
  border-left: none;
}

.header li a {
  font-size: 14px;
  text-decoration: none;
  color: #9C9D9F;
}

.nav {
  margin-top: 24px;
  margin-bottom: 24px;
}

.nav ul {
  margin-left: 16px;
}

.nav li {
  float: left;
  list-style-type: none;
  padding-left: 104px;
}

.nav li:first-child {
  padding-left: 0;
}

.nav li a {
  height: 23px;
  padding: 20px 0 0 56px;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: #9C9D9F;
  display: block;
  float: left;
}

.nav li a[href*="leistungen"] {
  background: url(../img/nav_1.gif) no-repeat;
}

.nav li a[href*="referenzen"] {
  background: url(../img/nav_2.gif) no-repeat;
}

.nav li a[href*="partner"] {
  background: url(../img/nav_3.gif) no-repeat;
}

.nav li a[href*="designmuehle"] {
  background: url(../img/nav_4.gif) no-repeat;
}

.footer {
  background-color: #959595;
}

.footer span {
	width: 935px;
	display: inline-block;
  font-size: 11px;
  color: #FFFFFF;
  text-align: center;
}

.footer img {
	vertical-align: middle;
	border-left: 1px solid #FFF;
}

div#home, div#impressum, div#datenschutz {
  background-color: #F29400;
}

div#kontakt {
  background-color: #8F235D;
}

div#leistungen {
  background-color: #B3351C;
}

div#referenzen1 {
  background-color: #A5003A;
}

div#referenzen2 {
  background-color: #641A4B;
}

div#partner {
  background-color: #DE3619;
}

div#designmuehler1 {
  background-color: #8B0F4B;
}

div#designmuehler2 {
  background-color: #940A45;
}

.left {
  width: 280px;
  height: 448px;
  float: left;
}

div#referenzen2 .left {
  width: 320px;
}

.left h2, .col1 h2 {
  margin: 32px 0 0 16px;
  font-size: 16px;
  color: #FFFFFF;
}

.left p {
  margin: 24px 16px 0;
  line-height: 18px;
  color: #FFFFFF;
}

.left p.legal {
  margin-top: 16px;
  line-height: 14px;
}

.left a {
  color: #FFFFFF;
  text-decoration: none;
}

.main {
  width: 680px;
  height: 448px;
  float: right;
}

.arrow-left, .arrow-right {
	text-indent: -9999px;	
}

.arrow-left:hover, .arrow-right:hover, .arrow-left:focus, .arrow-right:focus {
	outline: none;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid #FFFFFF;
  display: block;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #FFFFFF;
  display: block;
}

div#referenzen2 .main {
  width: 576px;
  margin-right: 48px;
  border-left:  8px solid #FFFFFF;
  border-right: 8px solid #FFFFFF;
}

div#referenzen2 .main img {
  padding: 148px 61px 4px 12px;
  display: block;
  float: left;
}

div#referenzen1 .main a {
  position: relative;
  top: -240px;
  left: 648px;
}

div#referenzen2 .main a {
  position: relative;
  top: -237px;
  left: 600px;
}

div#designmuehler1 .main a, div#designmuehler2 .main a {
  position: relative;
  top: -240px;
  left: 648px;
}

div.referenz_detail .left, div.referenz_detail .main, div.referenz_detail .previous, div.referenz_detail .next {
	float: left;
}

div.referenz_detail .left {
	width: 216px;
	background-repeat:no-repeat;
	background-position: 16px 144px; 
}

div.referenz_detail .main {
	width: 664px;
	background-color: #FFF;
}

div.referenz_detail .previous {
	width: 16px;
	margin: 210px 16px 0 0;
}

div.referenz_detail .next {
	width: 32px;
	margin: 210px 0 0 16px;
}

div#illustration {
  background-color: #E35918;
}

div#illustration .left {
  background-image: url(../referenzen/img/illustration.png);
}

div#corporate_design {
  background-color: #DE3619;
}

div#corporate_design .left {
  background-image: url(../referenzen/img/corporate_design.png);
}

div#webentwicklung {
  background-color: #D91219;
}

div#webentwicklung .left {
  background-image: url(../referenzen/img/webentwicklung.png);
}

div#printprodukte {
  background-color: #C5002D;
}

div#printprodukte .left {
  background-image: url(../referenzen/img/printprodukte.png);
}

div#messe-ausstellungsgestaltung {
  background-color: #A5003A;
}

div#messe-ausstellungsgestaltung .left {
  background-image: url(../referenzen/img/messe-ausstellungsgestaltung.png);
}

div#fotografie {
  background-color: #8B0F4B;
}

div#fotografie .left {
  background-image: url(../referenzen/img/fotografie.png);
}

div#datenschutz {
  height: 448px;
  position: relative;
  overflow: hidden;
}

div#datenschutz h1, div#datenschutz h2, div#datenschutz h3 {
  color: #FFFFFF;
}

div#datenschutz h1 {
  margin: 4px 16px 0 16px;
  font-size: 18px;
}

div#datenschutz h2 {
  margin: 10px 16px 0 16px;
  font-size: 16px;
}

div#datenschutz h3 {
  margin: 4px 16px 0 16px;
  font-size: 14px;
}

div#datenschutz p, div#datenschutz ul {
  margin: 4px 16px;
  padding-right: 240px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 15px;
}

div#datenschutz ul {
  padding-left: 20px;
  list-style-type: disc;
}

div#datenschutz p a {
  color: #FFFFFF;
}