/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/
div.scrollable {
  /* required settings */
  position: relative;
  overflow: hidden;         
  width: 510px;
  height: 278px;    
  margin-bottom: 1px;
  /* custom decorations */
  padding: 0;
  /*border: 1px outset #ccc;*/
  /*background-color: #efefef;*/
  border-top: 7px solid #dcdcdc;
  background-color: #fff;
}
/* 
  root element for scrollable items. Must be absolutely positioned
  and it should have a super large width to accomodate scrollable items.
  it's enough that you set width and height for the root element and
  not for this element.
*/
/* active item */
div.scrollable div.items div.active {
  /*border: 1px inset #ccc;        
  background-color: #fff;*/
}
#detail {
  display: none;
  margin-top: -14px;
  margin-bottom: 1px;
  /* required settings */
  width: 556px;
  height: 278px;    
  /* custom decorations */
  padding: 0;
  /*border: 1px outset #ccc;*/
  /*background-color: #efefef;*/
  border-top: 7px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  background-color: #fff;
}
* html #detail {
  width: 552px;
  height: 276px;
}
#detail .inset {
  width: 554px;
  height: 277px;
  background-color: #f2f2f2;
  border: 1px solid #fff;
}
* html #detail .inset {
  width: 550px;
  height: 275px;
}
#detail .insetct {
  width: 290px;
  overflow: hidden;
  background-color: #f2f2f2;
  margin: 5px 5px 5px 15px;
  float: right;
}
#detail .dynct {
  height: 256px;
}
#detail .dynct p {
  margin: 0;
  margin-bottom: 0;
}
#detail .insetct a.closebtn {
  float: right;
  font-size: 12px;
  display: block;
  text-decoration: none;
  font-size: 11px;
  color: #3b7a0f;  
}
#detail .insetct h1 {
  margin-top: 14px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: normal;
}
* html #detail .insetct h1 {
  margin-top: 6px;
  margin-bottom: 10px;
}
#detail .insetct a.more {
  text-decoration: none;
  font-size: 12px;
  background: transparent url(/de/img/arrow_green.gif) no-repeat 0em .35em;
  padding-left: 10px;
  color: #3b7a0f;
}
#detail .inset img.visual {
  float: left;
}
#detail .inset img.close {
  vertical-align: middle;
}
div.scrollable div#thumbs {    
  /* this cannot be too large */
  width: 20000em;    
  position: absolute;
  clear: both;        
  /* decoration */
  margin-left: -6px;
}
div.scrollable div#thumbs a.more {
  position: absolute;
  top: 244px;
  text-decoration: none;
  font-size: 12px;
  background: transparent url(/de/img/arrow_green.gif) no-repeat 0em .35em;
  padding-left: 10px;
  color: #3b7a0f;
}
div.scrollable div#thumbs p.counter {
  position: absolute;
  top: 262px;
  width: 146px;
}
div.scrollable div#thumbs p.counter span {
  float: right;
  font-size: 11px;
  color: #999;
}
/* single item */ 
#thumbs div {
  margin-top: 1px;
  float: left;
}
#thumbs img.sep {
  float: left;
  width: 1px;
  height: 277px;  
  background-color: #dcdcdc;
}
#thumbs div.ct {
  width: 165px;
  height: 279px;
  color: #000;
  cursor: default;
  background-color: white;
  margin-left: 3px;
  margin-right: 3px;
}
#thumbs div.ct h1,
#thumbs div.ct p {
  padding-left: 12px;
  padding-right: 5px;
}
#thumbs div.ct h1 {
  font-size: 15px;
  font-weight: normal;
  margin: 4px 0 5px 0;
}
/* style when mouse is over the item */ 
#thumbs div.hover {
  background-color: #f2f2f2;
}  
/* style when element is active (clicked) */ 
#thumbs div.active {
  background-color: #f2f2f2;
  cursor: default;
}

ul.toolTabNav {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.toolTabNav li.toolTab {
  float: left;
  display: block;
  height: 23px;
  margin: 0 1px 0 0;
  background: url(/de/img/content/tab_grey_bg.gif) no-repeat right top;
  font-size: 12px;
}
ul.toolTabNav li.toolTab.active {
  background: url(/de/img/content/tab_green_bg.gif) no-repeat right top;
}
ul.toolTabNav li.toolTab a {
  font-weight: bold;
  padding: 0;
  color: #fff;
  display: block;
  width: auto;    
  cursor: pointer;
  text-decoration: none;
}
ul.toolTabNav li.toolTab a.nop {
  cursor: text;
}
ul.toolTabNav li.toolTab a span {
  margin: 0 2px 0 -7.5px;
  padding: 4px 16px 0 16px;
  display: block;
  *display: inline-block;
  white-space: nowrap;
  color: #000;
  font-weight: normal;
  background: url(/de/img/content/tab_grey_left.gif) no-repeat left top;
}
ul.toolTabNav li.toolTab a span.active {
  color: #fff;
  font-weight: bold;
  background: url(/de/img/content/tab_green_left.gif) no-repeat left top;
}


/* this makes it possible to add next button beside scrollable */
div.scrollable {
  float: left;    
}
/* prev, next, prevPage and nextPage buttons */
a.prev, a.prevPage, a.next, a.nextPage {
  display: block;
  width: 23px;
  height: 279px;
  background: url(/de/img/content/left.png) no-repeat;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 1px;
  border-top: 7px solid #dcdcdc;
}
a.prev, a.prevPage {
  border-left: 1px solid #dcdcdc;
}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
  background-position: 0px -279px;        
}
/* disabled navigational button */
a.disabled {
  /*visibility: hidden !important;*/
}
/* next button uses another background image */
a.next, a.nextPage {
  background-image: url(/de/img/content/right.png);
  clear: right;    
  width: 23px;  
  border-right: 1px solid #dcdcdc;
}

/*********** navigator ***********/

/* position and dimensions of the navigator */
div.navi {
  margin-top: -34px;
  margin-left: 228px;
  width: 200px;
  height: 20px;
}

/* items inside navigator */
div.navi a {
  width: 8px;
  height: 8px;
  float: left;
  margin: 3px;
  background:url(/de/img/content/navigator.png) 0 0 no-repeat;
  display: block;
  font-size: 1px;
}
/* mouseover state */
div.navi a:hover {
  background-position: 0 -8px;
}
/* active state (current page state) */
div.navi a.active {
  background-position: 0 -16px;     
}