/*******************************************
 * Styling for the auto-generated lists
 *******************************************/

/* This is one complete area of all products of one categroy */
#content div.auto_list {
   margin: 6px 0px 0px 0px;  /* The vertical distance between two following lists ... */
   z-index: 1;
}
/* The lists are numbered ascending but need descending z-index, for the hidden info-boxes to be shown in front !!! */
/* Styling the first list (it's always there) */
#content #auto_list_1 {
   /*margin-top: 20px;*/   /* different distance for the first list to header blocks ? */
   z-index: 15;
}
/* Styling the following lists. They onlx appear, if there are products in category ... */
#content #auto_list_2 {
   z-index: 14;
}
#content #auto_list_3 {
   z-index: 13;
}
#content #auto_list_4 {
   z-index: 12;
}
#content #auto_list_5 {
   z-index: 11;
}
#content #auto_list_6 {
   z-index: 10;
}
/* Auto-generated styleclasses from extension "css-styled-content", used inside the auto-generated lists: */
/* This one covers the complete list: */
#content div.auto_list, div.auto_list div.csc-default {
   position: relative;
   top: 0px;
   left: 0px;
   width: 960px;
   background-color: #ffffff;
   border: 0px none;
   z-index: 2;
}
/* This one contains the title of the category, i.e. "Indoor Access Points" */
#content div.auto_list div.csc-header {
   float: left;
   width: 184px;
   height: 124px;
   padding: 0px 0px 20px 6px;
   z-index: 1;
}
#content div.filter_control{
   float: left;
   height:124px;
   width: 184px;
   padding: 0 0 0 6px;
   position:absolute;
   top:124px;
}

ul.filter{
list-style-type: none;
display:block;
z-index:300 !important;
padding-left:5px !important;
background-color:#FFFFFF;
}
/* Changed to constant width... 
ul.filter li{
   display:inline;
}
*/
#content #filter_container ul.filter li {
   display:inline;
   float: left;
   width: 140px;
}
#content #filter_container ul.filter li input {
   cursor: pointer;
}
#content #filter_container ul {
   height: 36px;
}
#content #auto_list_1 {
   clear: both;
}
/* End of change */

#filter_control{
   bottom:20px;
}


div.filter_container{
   background-color:#FFFFFF;
   padding:5px;
   display:none;
   min-height: 20px;
}
div.compare{
   padding-left: 190px;
}
div.compare a{
   margin-right: 15px;
}

/* it's wrapped by a <h1>-tag ... */
#content div.auto_list div.csc-header h1 {
   margin-left: 10px;
   margin-top: 72px;
}
/* This one covers the real list (the products) */
/* No fooling around with left borders ...
#content div.auto_list div.csc-menu, div.auto_list div.csc-menu-4 {
   float: left;
   width: 766px;
   overflow: visible;
   white-space: nowrap;
   margin: 0px;
   padding: 0px 0px 4px 0px;
   z-index: 3;
}
*/
#content div.auto_list div.csc-menu, div.auto_list div.csc-menu-4 {
   float: left;
   width: 761px;
   overflow: visible;
   white-space: nowrap;
   margin: 0px;
   padding: 0px 0px 4px 4px;
   border-left:1px solid #eeeeee;
   z-index: 3;
}
#content div.auto_list ul.carousel {
   width: 766px;
   margin: 0px 0px 2px 0px;
   padding: 0px;
   clear:both;
}
#content div.auto_list ul.carousel a {
   white-space: normal;
   font-family:Arial;
}
/* This one contains one single product in the list */
#content div.auto_list ul.carousel li {
   margin: 4px 0px 0px 0px !important;
   padding: 0px 0px 0px 0px !important;
   width: 180px;
   height: 120px;
   float: left;
   display: inline;
}

#content div.auto_list div.csc-frame-textlink {
   width: 180px;
   height: 120px;
   margin: 0px;
   padding: 0px;
   z-index: 3;
}

/* This one contains the data of one product and appends a margin to its right */
#content div.auto_list div.csc-menu-4 div.csc-frame{
   width: 180px;
   height: 120px;
   margin: 0px 20px 0px 0px;  /* <-- distance between two products */
   padding: 0px;
   text-align: center;
   background-color: #ffffff;
   overflow-y: visible;
   z-index: 3;
}

.filter_container ul.filter{
    padding-left:185px !important;
}

/* Abstand zwischen Checkbox und Beschriftung */
.filter_container label{
   padding-left:5px;
   padding-right:15px;
}

/* The product image */
div.auto_list div.csc-menu-4 div.csc-menu-imagelink {
   width: 100px;
   height: 88px;
   margin: 0px auto 0px auto;    /* centered, with small distance from the top */
   overflow: hidden;
   z-index: 1;
}
/* The name of the product, linked to the detail page. Also contains the hidden info-box */
#content div.auto_list div.csc-menu-4 div.csc-menu-textlink {
   position: relative;
   width: 180px;
   height: 30px;
   margin-top: 0px;
   padding: 0px;
   z-index: 4;
}
/* The link to the detail page */
div.auto_list div.csc-menu-textlink  a {
   margin-left: 16px;
   padding: 0px;
   text-align: left !important;
   z-index: 1;
}

/*******************************************
 * Some general settings for the links in product lists
 *******************************************/
div.auto_list div.csc-menu-4 div.csc-frame a, div.auto_list div.csc-menu-4 div.csc-menu-frame a:visited {
   font-size: 10px;
   font-weight: normal;
   color: #666666;
   text-decoration: none;

}
div.auto_list div.csc-menu-4 div.csc-frame a:hover {
   height: 32px;
   color: #3b80c2;
   text-decoration: dotted;
}

#content ul li, #content div.auto_list ul li {
   background: none !important;
   margin-top: 0px !important;
   margin-bottom: 0px !important;
   margin-left: 0px !important;
   margin-right: 0px !important;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
   padding-left: 0px !important;
   padding-right: 0px !important;
}

/*******************************************
 * The "opener" and "closer" for the hidden info
 *******************************************/
#content div.auto_list div.csc-menu-textlink div.csc-menu-infoswitch {
   position: absolute;
   left:0px;
   bottom:0px;
   width: 12px;
   height: 12px;
   cursor: pointer;
   z-index: 1;
}
#content div.auto_list div.csc-menu-textlink div.open {
   /* While implementation not finished:
   display: block;
   */
   display: none;
}
#content div.auto_list div.csc-menu-textlink div.close {
   display: none;
}
#content div.auto_list div.csc-menu-4 img {
   cursor: pointer;
}
/*******************************************
 * The box with the hidden info
 *******************************************/
div.auto_list div.csc-menu-infoframe {
   position: absolute;
   display: none;
   margin-top: -20px;
   width: 177px;
   min-height: 100px;
   background-color: #f8f8f8;
   color: #000000;
   border-width: 1px 2px 2px 1px;
   border-style: solid;
   border-color: #3b80c2;
   text-align: left;
   z-index: 100 !important;
}
div.auto_list div.csc-menu-closeheader {
   width:100%;
   height: 14px;
   margin: 0;
   padding: 0;
   background-color: #3b80c2;
}
div.auto_list div.closer {
   float: right;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff !important;
   background-color:#f00000;
   width:12px;
   height:12px !important;
   margin: 0 !important;
   padding: 0px 0px 2px 2px;
   border-style: none !important;
   cursor: pointer;
}
div.auto_list div.csc-menu-infotext {
   width: 173px;
   height: 100%;
   background-color: #f8f8f8;
   color: #000000;
   margin: 0;
   padding: 1px 2px 1px 2px;
   text-align: left;
   white-space: normal;
   overflow: hidden;
   cursor: default;
}

#content div.auto_list div.csc-menu-infotext li {
   background: url(/images/layout/li_pfeil.gif) scroll no-repeat 0 0 transparent !important;
   /*width: 165px;*/
   display: block;
   float: none;
   width: auto;
   height: auto;
   padding-left: 18px !important;
   padding-bottom: 4px !important;
}

/* Additional regular TYPO3-content on page: */
#content div.auto_text, div.auto_text div.csc-default {
    background-color: #FFFFFF;
    border: 0 none;
    left: 0;
    position: relative;
    top: 0;
    z-index: 1;
}
#content div.auto_text {
   width: 944px;
   margin: 6px 0 0;
   padding: 8px;
   z-index: 0;
}
#auto_text ul li {
   background: url("/fileadmin/images/layout/li_pfeil.gif") no-repeat scroll 0 0 transparent !important;
   float: none;
   margin-bottom: 0.6em !important;
   padding-left: 12px !important;
   text-align: left;
}

/* Put the footer into the back, so the hidden info-boxes can overlay it ... */
#footer {
   z-index: 1;
}