/* Accordion
*********************************/

.ka-panel,
.ka-handler-lookalike-button {
  margin-bottom: 8px;
  position: relative;
}

.ka-content {
  padding:0.1px 0;
}

/*
.ka-content > div{padding:30px 0 0 0; }
*/

.ka-content > p{
  margin:15px 0;
}

.ka-handler{
  position: relative;
  cursor: pointer;
  color: #666666;
  display: block;
  padding: 5px 0;
}

.csc-frame-rulerAfter .ka-handler{
  padding: 0 0 0 0;
}

.ka-panel .csc-frame-rulerAfter{
  margin: 10px 0 0 0;
  padding-bottom: 0;
}

/*.ka-panel .csc-textpic-intext-left-nowrap {
  margin-left: 20px;
}*/

/* anker als sprungmarke bei hash in url oben ausrichten */
.ka-panel a.anchor {
  position: absolute;
  top: 0;
}
.ka-handler-lookalike-button,
.csc-default .ka-handler {
  padding: 5px 10px;
  background-image: linear-gradient(bottom, #ddd 0%, #eee 100%);
  background-image: -o-linear-gradient(bottom, #ddd 0%, #eee 100%);
  background-image: -moz-linear-gradient(bottom, #ddd 0%, #eee 100%);
  background-image: -webkit-linear-gradient(bottom, #ddd 0%, #eee 100%);
  background-image: -ms-linear-gradient(bottom, #ddd 0%, #eee 100%);
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#eeeeee'); /* IE6 & IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#eeeeee')"; /* IE8 */
  border-radius: 4px 4px 4px 4px;
  color: #666666;
}

.ka-handler span{
  background: url("../img/elaflex_icon_arrows_small.png") no-repeat scroll right 0 transparent;
  display: block;
  height: 10px;
  position: absolute;
  left: 10px;
  top: 10px;
  width: 10px;
  /*margin-top:1.2em;*/
}
.ka-handler:hover span {background-position: right -74px;}

.ka-handler-lookalike-button h1:after,
.ka-handler-lookalike-button h2:after,
.ka-handler-lookalike-button h3:after {
  background: url("../img/elaflex_icon_arrows_small.png") no-repeat scroll right 0 transparent;
  display: block;
  content: " ";
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
}
.ka-handler-lookalike-button:hover h1:after,
.ka-handler-lookalike-button:hover h2:after,
.ka-handler-lookalike-button:hover h3:after { background-position: right -74px;}

.ka-handler-lookalike-button {
  padding:0;
}




.csc-default .ka-handler span {margin-top:0;}

.csc-frame-rulerAfter > .ka-handler span{
  left: 0;
  top: 12px;
}

.open .ka-handler span { background-position: right -86px; }
.open .ka-handler:hover span { background-position: right -10px; }
.ka-handler h1 {
  margin: 0 0 0 20px;
  font-size: 14px;
}
/*.open .ka-handler h1 a { color: #0A00BC; }*/

.ka-handler-lookalike-button h1,
.ka-handler-lookalike-button h2,
.ka-handler-lookalike-button h3 {
  margin:0;
}  
.ka-handler-lookalike-button h1 a,
.ka-handler-lookalike-button h2 a,
.ka-handler-lookalike-button h3 a {
  display:block;
  margin:0;
  font-size: 14px;
  padding:0 0 0 30px;
}
/*
.ka-handler-lookalike-button h1:before,
.ka-handler-lookalike-button h2:before,
.ka-handler-lookalike-button h3:before {
  content:"";
}
*/

.ka-handler h3 {
  margin: 0 0 0 30px;
}
/* Führt z. B. hier zu Layout-Problemen:
http://www.elaflex.de/kontakt/elaflex-hamburg/ 
Wofür wurde der Abstand nach oben benötigt?
.main-content .ka-handler h3 {margin-top:1.2em;}*/

.ka-handler h3.certificates-header { padding-bottom: 10px;}
  
.ka-handler h3 .icons { margin: 0 10px 0 -34px; }
.ka-handler h1:hover,
.ka-handler h3:hover { color: #0A00BC; }

.csc-frame-rulerAfter .ka-handler h3{
  margin: 0 0 0 54px;
  line-height: 36px;
}

/* hide content initially */
.js .ka-panel.close .certificates {
  display: none;
}
/* after load of accordion set display back to normal */
.ka-panel.close .ka-content .certificates {
  display: inherit;
}
.ka-panel.open { margin-bottom:1.2em;}

/* Katalog Index */
#catalogIndex { padding:0;}
#catalogIndex .ka-handler {
  padding:11px 15px;
  margin:0;
}
#catalogIndex.ka-panel.open .ka-handler h1 a { color: #0a00bc; }
#catalogIndex.ka-panel .ka-handler:hover h1 a { color: #fff; }
#catalogIndex.ka-panel .ka-handler span {
  left:15px;
  top:15px;  
  margin-top:0;
}
#catalogIndex.ka-panel.open .ka-handler span { background-position: right -10px; }
#catalogIndex.ka-panel.open .ka-handler:hover span { background-position: right -38px; }
#catalogIndex.ka-panel .ka-handler:hover span { background-position: right -100px; }

#catalogIndex.ka-panel .ka-handler:hover {
  background: #0a00bc;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#catalogIndex.ka-panel.close .ka-handler:hover {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;  
}
#catalogIndex .ka-content .pure-g-r { padding-bottom:0.5em;}


/*
----------------------------------------------------------------------------------------

Grid Element Akkordion

----------------------------------------------------------------------------------------
*/

.geAccordionWrapper {}
.geAccordionWrapper .csc-textpic-center-outer { margin-bottom:0;}
.geAccordionContent {
  padding:0 10px;
  position:relative;
}
.geAccordionContent div.csc-textpic figure > img {width: 100%;}
.geAccordionContent .cycle-slide { width: 100%; }
.geAccordionContent .sliderControlsWrapper {}
.geAccordionContent .pageIndicator { 
  padding:1em 10px;
  display: inline-block; 
}

.geAccordionContent .sliderControls {
  cursor: pointer;
  color: #0a00bc;
  padding:1em 10px;
  display: inline-block;
}
.geAccordionContent .sliderControlsWrapper {
  text-align:center;
}
.geAccordionContent div.csc-textpic figure  {width:100%;}
.geAccordionContent .csc-textpic-image img { margin-bottom: 0;}


/*
----------------------------------------------------------------------------------------

KA Handler Link (Kontakt Elaflex Hamburg)

----------------------------------------------------------------------------------------
*/

.ka-handler-link-hover .csc-textpicHeader h2,
.ka-handler-link-hover .ka-handler h3 a,
.ka-handler-link-content .ka-handler-link-hover > div:last-of-type {
  color:#0a00bc;
  cursor: pointer;
}

.ka-handler-link-hover .ka-handler span {
  background-position: right -74px;
}
.ka-handler-link-hover .ka-panel.open .ka-handler span {
  background-position: right -10px;
}