/*----------------------------------------------------------------------------
    Title: L A Y O U T  
   Author: MARIO GRUSCHETZKI // MEDIENDESIGN
     Date: 18-06-2008
  Project: puder-consotio.de
----------------------------------------------------------------------------*/

html {
  overflow: scroll;
  height: 100%;
  margin-bottom: -24px!important;
}

body {
  margin: 0 auto; 
  height: 100%;
}

body, #page , div#container, ul#nav-access, div#content, 
div#content-main,div.article, div.article-content, li.article, 
div#work, body.agentur div#content-main ul li,
#slidelist,ul#slideshow-home, p.nav-slideshow {
  position: relative;
}

div#branding-info, div#nav-main ul, div#nav-portfolio-categories ul, div.slideshow, ul#slideshow-home li, li.article .slideshow-preview, #image-zoom {
  position: absolute;
}

ul#nav-access, p.nav-slideshow a ,span.prev_disabled, span.next_disabled, span.prev, span.next, span.zoom_show, #image-zoom,
div#nav-portfolio-categories ul li a, div#nav-works ul li a, ul#nav-customer li a{
  display: block;
}

div#container, ul#nav-access, div#content, #slidelist,
p.nav-slideshow {
  overflow: hidden;
}

/* 
  ---------
   MARGINS
  ---------
*/
p, ul, h2, h3, h4, h5, h6 { margin-bottom:18px;}

div#content-main p, div#content-main h2, div#content-main h3, 
div#content-main h4,div#content-main h5, div#content-main ul
{
  margin-right: 60px;
  margin-left: 20px;
}
div ul li ul {
 margin: 0!important;
}
body.agentur div#content-main ul  {
  margin-top: 18px;
  margin-right: 0px;
  margin-left: 0px;
}
div#branding-info p {
  margin: 0px 20px !important;
}
p.read-more, body.portfolio p.operations, div.contact ul.adr  {
  margin-top: -18px!important;
}
h3.article-title {
  margin-top: 32px;
}
#content-main > h2 {
  margin-top: 0.1em;
}
body.kontakt div.contact{
  margin-bottom:36px;
}
/* INDIVIDUALS */
#page {
  margin: 0 auto;
  width: 93em;
  background-color: #fff;
  min-height: 100%;
}
div#container{
  margin-top: 0px;
}
div#branding-info {
  height: 2.1em;
  padding-bottom: 0px;
  width: 93em;
  margin: 0 auto;
  bottom: 1.8em;
  margin-bottom: -4px;
  background: #fff;
}
div#branding-info p {
  padding: 0!important;
  border-top: 1px solid #e1e1e1;
}
div#content-main {
  width: 44em;
  float: right;
  min-height: 100%;
  padding-top: 1.4em;
  padding-bottom: 5.1em;
  margin-right: 28em;
  background:#ccc;
}
.hidden {
  display: none;
}
div#branding {
  height: 11.6em; 
}
div#branding h1 {
  height: 100%;
  width: 9.15em;
}
div#branding h1 a{
  height: 100%;
}
div#nav-portfolio-categories ul {
  position: absolute;
  top: 131px;
  margin-top: 0px;
  left: 50px;
  overflow: hidden;
  width: 15em;
}
ul#nav-customer li a, ul#nav-customer li, div#nav-works ul li a {
  background: #fff url(../images/Navigation-Bullet-Arrow-Active.png) no-repeat left center;
}
ul#nav-customer li a:hover, div#nav-works ul li a:hover, div#nav-works ul li, div#nav-works ul li.active a{
  background: #fff url(../images/Navigation-Bullet-Arrow.png) no-repeat left center;
}
ul#nav-access {
  position: absolute;
  top:0;
  left: -9999px;
  text-align: left!important;
  text-indent: -9999px!important;
  height: 1px!important;
  padding: 0;
  margin: 0;
}

div.slideshow {
  width: 280px;
  top: 0px;
  right:-280px;
}
ul#slidelist {
  margin: 0!important;
}
ul#slidelist img {
  border: 1px solid #f0f0f0;
}
ul#slidelist li p.supplementary-entry {
  margin: 0!important;
  padding: 0!important;
}
ul#slidelist li p.slide-description {
  margin:6px 0!important;
  padding:0!important;
}
p.nav-slideshow {
  margin: 14px 0 9px 109px;
}
p.nav-slideshow a {
  float:left;
  height: 18px;
  width: 25px;
  margin-right: 12px;
  text-indent: -9999px!important;
}
ul#slideshow_preview {
  visibility: hidden;
}
div#nav-main ul {
  top: 90px;
  left: 65em;
  height: 20px;
}
ul.work-list-customer li {
  display: inline;
}
div.work-description {
  margin-top: 2.3em;
  min-height: 195px;
}
body.agentur ul li p.with-figure{
  position:relative;
  min-height: 195px;
}

ul#slideshow-home {
  position: relative;
  overflow: hidden;
  margin:-15px 0 0 0!important;
  width: 440px;
  height: 280px;
}
/* fallback if js is not active */
ul#slideshow-home li:first-child {
  z-index:9999;
}
ul#slideshow-home li.slide {
  position: absolute;
  top:0;
  left:0;
}
ul#slideshow-home dd {
  color: #888;
  font-size: 11px;
  background-color: #fff;
}
/* slideshow-home first loading */
#loading {
  z-index: 9999;
  position: absolute;
  top:250px;
  right: 0px;
  width:16px;
  height:16px;
  background: #fff url(../images/spinner.gif) no-repeat center;
}
/* => end SLIDESHOW-HOME */

ul.table-of-contents li,
ul.table-of-contents p,
ul.table-of-contents h3,
ul.table-of-contents h4,
ul.table-of-contents h5 {
  margin-left:0!important;
  margin-right:0!important;
}
ul.rubric {
  margin-bottom: 50px!important;
}
ul.rubric h3.rubric-title{
  font-size: 25px!important;
  margin-top: 31px!important;
}
.table-of-contents li ul{
  margin-top:22px!important;
}
li.article {
  width:45em;
  padding-top: 12px;
  margin-bottom: 23px!important;
  border-top: 1px solid #e9e9e9;
}
li.article h4, li.article h5, li.article p {
  width:360px;
}
li.article .slideshow-preview {
  top:16px;
  width: 120px;
  right: 0em;
}
#location {
  display:none;
}
/*---------------------------------------*/
div.slideshow ul.slides{
  position: relative;
  overflow: hidden;
  height: 212px;
  margin:0!important;
  padding:0!important;
  background-color:#fff;
}
div.slideshow ul.slides.with-description{
  height: 215px;
  margin-bottom: -9px;
}
div.slideshow li.slide {
  position: absolute;
  overflow: hidden;
  height: 190px;
  width: 280px;
  top:0px;
  left:0px;
  margin:0!important;
  padding:0!important;
}
li.slide img {
  border: 1px solid #f0f0f0;
}

ul#slideshow-home li.slide img {
  border: none;
}
div.slideshow li.slide.website  {
  height: 215px;
}

div.slideshow li.slide p.description {
  z-index: 9999!important;
  margin: 0!important;
  padding:0!important;
  background: transparent;
}
div.slideshow li.slide p.description a{
  display:block;
}
div.slideshow li.slide p.view {
  margin:0!important;
}

div.slideshow ul.nav-slideshow {
  position: relative;
  overflow: hidden;
  height: 18px;
  width: 85px;
  margin: 5px auto!important;
  padding:0!important;
}
div.slideshow ul.nav-slideshow li {
  position:relative;
  float:left;
  height: 18px;
  width: 25px;
}
div.slideshow ul.nav-slideshow li a{
  display: block;
}
div.slideshow ul.nav-slideshow li.next_slide{
  text-indent: -9999px;
  background: url(../images/button-slideshow-nav-next.png) no-repeat;
}
div.slideshow ul.nav-slideshow li.next_slide.disable{
  background: url(../images/button-slideshow-nav-next-disable.png) no-repeat;
}
div.slideshow ul.nav-slideshow li.prev_slide{
  margin-right:5px;
  text-indent: -9999px;
  background: url(../images/button-slideshow-nav-prev.png) no-repeat;
}
div.slideshow ul.nav-slideshow li.prev_slide.disable{
  background: url(../images/button-slideshow-nav-prev-disable.png) no-repeat;
}
div.slideshow ul.nav-slideshow li.zoom{
  margin-right: 5px;
  text-indent: -9999px;
  background: url(../images/button-slideshow-zoom.png) no-repeat;
}
div.slideshow ul.nav-slideshow li.zoom.disable{
  background: url(../images/button-slideshow-zoom-disable.png) no-repeat;
}
.next_slide,.prev_slide,.zoom {
  cursor: pointer;
}
.disable {
  cursor: default;
}