@charset 'utf-8';
@import url(reset.css);
@import url(lightbox.css);

/* ----------------------------------------------------- Page layout */

strong { font-weight: bold; }

body#start { background: #fff url(./../img/start_bg.jpg) repeat-x bottom left; height: 100%; }

#start a { display: block; margin: auto; text-indent: -9999px; }
#start h1 a { background: url(./../img/start_h1.gif) 50% 0px no-repeat; width: 100%; height: 45px; position: absolute; bottom: 380px; left: 0; }
#start h2 a { background: url(./../img/start_h2.gif) 50% 0px no-repeat; width: 100%; height: 16px; position: absolute; bottom: 364px; left: 0; }

body { background: #fff; font-family: 'Helvetica Condensed' 'Helvetica Neue' Helvetica, Arial, verdana, sans-serif; font-size: 62.5%; color: #1a171b; }

a { color: #1a171b; text-decoration: none; }
a:hover { color: #a4c400; }

#header, #main, #footer, #bottomnav { width: 78.5em; margin: 0 auto; clear: both; max-width: 975px; }

#header { height: 140px; background: url(./../img/header.gif) right top no-repeat; }
#header a { display: block; text-indent: -999px; }
#header h1 a { height: 78px; width: 369px; background: url(./../img/logo_h1.gif) no-repeat; }
#header h2 a { height: 19px; width: 369px; background: url(./../img/logo_h2.gif) no-repeat; }

#page { background: #e2e2e2; }

#main { background: url(./../img/main.gif) 15em 2.5em no-repeat; }

#nav { width: 15em; padding: 2.5em 0; float: left; }
#nav ul {  }
#nav ul li { margin-bottom: 20px; border-right: 0.8em solid #e2e2e2; }
#nav ul li:hover, #nav ul li.aktiv { border-color: #1a171b; }
#nav ul li a { text-transform: lowercase; font-size: 1.4em; color: #90989d; display: block; padding: 0.2em 1.5em 0.2em 0; text-indent: -9999px; background-repeat: no-repeat; height: 1em; }
#nav ul li.aktiv a { color: #86be5c; background-position: 0px -102px }
#nav ul li#agentur a { background-image: url(./../img/nav_agentur.gif); }
#nav ul li#agentur a:hover { background-position: 0px -102px; }
#nav ul li#kunden a { background-image: url(./../img/nav_kunden.gif); }
#nav ul li#kunden a:hover { background-position: 0px -102px; }
#nav ul li#referenzen a { background-image: url(./../img/nav_referenzen.gif); }
#nav ul li#referenzen a:hover { background-position: 0px -102px; }
#nav ul li#beispiele a { background-image: url(./../img/nav_beispiele.gif); }
#nav ul li#beispiele a:hover { background-position: 0px -102px; }
#nav ul li#kontakt a { background-image: url(./../img/nav_kontakt.gif); }
#nav ul li#kontakt a:hover { background-position: 0px -102px; }
#nav ul li#impressum a { background-image: url(./../img/nav_impressum.gif); }
#nav ul li#impressum a:hover { background-position: 0px -102px; }

#content { margin: 0 0 0 18em; }
#content_c { padding: 2.5em 0; line-height: 1.6em; position: relative; }
#content_r { padding: 2.5em 0; line-height: 1.6em; position: relative; }
#content h3 { color: #86be5c; font-size: 1.2em; }
#content p { font-size: 1.2em; }
#content ul { font-size: 1.2em; }
.green { color: #86be5c; padding: 0 0.1em; }
.grey { color: #6a6b6d; }
#content .refs { height: 22.3em; }
#content .refs p { margin-top: 1.5em; }
#content .refs ul { position: absolute; bottom: 0; left: 0; }
#content .refs ul li { float: left; }
#content .refs ul li a { display: block; width: 9px; height: 9px; background: #000; margin-right: 4px; font-size: 9px; }
#content .refs ul li a:hover, #content .refs ul li.aktiv a { background: #86be5c; }

#footer { padding: 0 0 2em 0; }
#footer img { margin-left: 17.5em; }
#footer p { margin: 2em 0 0 15em; font-size: 1.2em; color: #90989D; line-height: 1.45em; }
#footer a { color: #8f989d; }
#footer a:hover, #footer a.aktiv { color: #86be5c; }
#footer h3 { background: url(./../img/auswahl.gif) 0 1.5em no-repeat; height: 19px; text-indent: -9999px; padding: 1em 0 2em 0; font-size: 1em; margin-left: 18em; }

.right { float: right; margin: 0 0 0 1em; height: 298px; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: block; }