/*********************************************************************
CATALooK.netStore - http://www.catalook.de  http://www.dnnsoft.com                   
Copyright (c) 2003-2011 CATALooK Software Susanne Koehler                                                                                                      
support@dnnsoft.com                                                                                                                                            
**********************************************************************/

/* =================================
    CSS STYLES FOR CATALooK.netStore 
    v6.3.0, 02/2011
   =================================
*/

/* view mode selector */
.catip-view-mode-selector {
    margin-right: 20px;
}

.catip-btn-gallery, .catip-btn-list {
    float: left;
    margin-right: 3px;
    width: 26px;
    height: 26px;
    background-position: center 6px;
    background-color: none;
    background-repeat: no-repeat;
    position: relative;
}

    .catip-btn-list.active, .catip-btn-list:hover, .catip-btn-gallery.active, .catip-btn-gallery:hover {
        background-position: 6px -80px;
    }

.catip-btn-list {
    background-color: transparent;
    background-image: url("images/view-mode-list-sprite.png");
}

.catip-btn-gallery {
    background-color: transparent;
    background-image: url("images/view-mode-gallery-sprite.png");
}


/* style of item titles */
.CATIPSubHead {
    font-family: Trebuchet MS, Verdana, Tahoma, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #595757;
}

/* Style of the inner module chapter main title row */
.CATIPHeader {
    font-family: Trebuchet MS, Verdana, Tahoma, Arial, Helvetica;
    padding: 10px 0;
}

    .CATIPHeader span {
        color: #595757;
        display: inline;
        font-family: Trebuchet MS, Verdana, Tahoma, Arial, Helvetica;
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
    }

.OptionBody {
    font-weight: normal;
    font-size: 12px;
    color: #595757;
    font-family: Trebuchet MS, Verdana, Tahoma, Arial, Helvetica;
}

#ProductOptionsLeftCell {
    padding: 3px;
    width: 200px;
    float: left;
    text-align: left;
}

#ProductOptionsRightCell {
    text-align: left;
    float: left;
}

.CATProductName, a.CATProductName:link, a.CATProductName:active, a.CATProductName:visited, a.CATProductName:hover {
    color: #2ED5FF !important;
    font-family: Arial, Trebuchet MS, Verdana, Tahoma, Helvetica !important;
    font-size: 22px !important;
    font-weight: bold !important;
}

.CATListProductName, .CATListProductName a {
    color: #2ED5FF !important;
    font-family: Arial, Trebuchet MS, Verdana, Tahoma, Helvetica !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.CATConfigProductName, .CATConfigProductName a {
    color: #555555 !important;
    font-family: Trebuchet MS, Verdana, Tahoma, Arial, Helvetica !important;
    font-size: 10px !important;
    font-weight: bold !important;
}

/* Gallery View Mode Item */
.iPanePL0Item {
    /* min-height: 320px; */
    position: relative;
    margin: 0 0 6px 6px;
    padding: 8px 9px !important;
    text-align: center;
    border: 1px solid #c9c9c9;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

    .iPanePL0Item:hover {
        border: 1px solid rgba(2,139,255,0.5);
        -webkit-box-shadow: 0px 0px 3px 0px rgba(2, 139, 255, 0.4);
        box-shadow: 0px 0px 3px 0px rgba(2, 139, 255, 0.4);
    }

    .iPanePL0Item .CATButtonRow {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin-left: -9px;
        padding: 0 50px 8px;
    }

/* Mini Dashboard Item */
.iPaneMDItem {
    min-height: 200px;
    position: relative;
    margin: 0 0 4px 4px;
    padding: 8px 9px !important;
    text-align: center;
    border: 1px solid #c9c9c9;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

    .iPaneMDItem:hover {
        border: 1px solid rgba(2,139,255,0.5);
        -webkit-box-shadow: 0px 0px 3px 0px rgba(2, 139, 255, 0.4);
        box-shadow: 0px 0px 3px 0px rgba(2, 139, 255, 0.4);
    }


/* Main Image and POSel Image */
.trProductImage {
    min-height: 280px;
    min-width: 240px;
    position: relative;
    margin: 0 0 6px 4px;
    padding: 8px 8px !important;
    text-align: center;
    border: 1px solid #c9c9c9;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.MultiPageScrollArea {
    height: 140px; /* do not use max-height here because of IE8 bug */
    width: 310px;
    overflow: scroll;
    border-top: #707596 2px solid;
}

.RadMultiPageItemDetails {
    font-weight: bold !important;
    width: 100%;
    margin: 10px 0 50px 0;
    padding: 5px 0 0 0;
}

.TitleColumn {
    width: 100px;
    float: left;
    text-align: right;
    vertical-align: middle;
    padding: 0 10px 0 0;
    font-family: 'Century Gothic', Verdana, Arial, Helvetica, sans-serif, Avant Garde;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

.HorizontalRule {
    border-top: #c9c9c9 1px solid;
    border-bottom: transparent;
    line-height: 1px;
    margin: 4px 0 4px 0;
}

.HorizontalSpacer {
    margin-top: 8px;
}

/* =====================================
    css table free skin related css tags
   =====================================*/

#tblgridProductProperties, #tbllistProductProperties, #tbldetailProductProperties, #tbldetailProductPrice {
    display: table;
    border-collapse: collapse;
}

#tbllistProductProperties {
    /* float: right; */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.CATTableRow {
    display: table-row;
}

.CATTableLeftCell, .CATTableRightCell {
    display: table-cell;
    padding: 3px;
}

.CATTableLeftCell {
    text-align: left;
}

#tblgridProductProperties .CATTableLeftCell {
    width: 80px;
    vertical-align: middle;
}

.CATTableRightCell {
    text-align: left;
}

#tblgridProductProperties .CATTableRightCell {
    vertical-align: top;
}

.CATInlineItemLeft /* use different tags for real inline items and columns */ {
    float: left;
    padding: 4px 0 4px 2px; /* different padding to justify text, icons, textboxes, drop down list etc.  	/* vertical-align: middle; */
    overflow: visible;
}

.CATInlineIconLeft {
    float: left;
    padding: 2px 0 2px 1px;
	max-width:110px;
}

.CATInlineItemRight /* use different tags for real inline items and columns in detail, list and grid view */ {
    float: right;
    padding: 4px 0 4px 2px;
}

.CATInlineIconRight {
    float: right;
    padding: 2px 0 2px 1px;
}


/* There are several CSS properties and property values that lead to the fact that an item is regarded as a separate block formatting context.
Including float itself and overflow with a different value than visible #pnlOptions becomes the own block formatting context and clear it works locally.
To make #CATrowOptionsTitle an own context include #lblOptionsTitle and all other controls inside of #CATrowOptionsTitle into an own div container, add an id to the last item
e.g. #CATOptionsTitle and change the line below to: #CATOptionsTitle:after { content:"clear"; clear:left; display:block; height:0; overflow:hidden; font-size:0; } */
#CATrowOptionsTitle:after {
    content: "clear";
    clear: left;
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
}

#CATrowOptionsTitle {
    /* display: none; */
}

/* layout control width
.trdesc {
    max-width: 340px;
}

.DescriptionHTML {
    max-width: 340px;
}
 */
.pnlEmailToAFriend {
    margin: 4px;
}

.pnlOptions {
    margin: 4px;
}

.MDView {
    margin: 4px;
}

.DTButtons {
    margin: 4px;
}

.DTAddToCart {
    margin: 4px;
}

.rowSocialShare {
    margin-top: 6px; /*width: 340px;*/
}

.CAT_content_width {
    /*	padding-top: 15px; 	min-height: 350px; */
}

#DTViewLeftColumn {
   /* float: left; width: 250px;*/
}


#DTViewRightColumn {
   /* float: left; width: 350px;
    margin: 0 0 0 5px;*/
}



/* Black Frame (Media Gallery + additional images + product list items + main image) */
.CAT_top_left_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/top_left_corner_black.png) no-repeat top left;
}

.CAT_top_right_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/top_right_corner_black.png) no-repeat top right;
}

.CAT_top_bg_black {
    padding: 0;
    margin: 0 4px 0 4px;
    background: #FFF url(images/top_bg_black.png) repeat-x top;
    height: 4px;
}

.CAT_center_bg {
    padding: 0;
    margin: 0;
    clear: both;
}

.CAT_left_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/left_bg_black.png) repeat-y top left;
}

.CAT_right_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/right_bg_black.png) repeat-y top right;
}

.CAT_bottom_left_corner_black {
    padding: 0;
    margin: 0 0 0 0;
    background: url(images/bottom_left_corner_black.png) no-repeat top left;
}

.CAT_bottom_right_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/bottom_right_corner_black.png) no-repeat top right;
    padding: 0 4px 0 4px;
}

.CAT_bottom_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/bottom_bg_black.png) repeat-x top left;
    height: 4px;
}

.CAT_content_pad_black {
    padding: 0 4px 0 4px;
    margin: 0 0 0 0; /*	background: #FFF; */
}

.CAT_content_width {
    /*	padding-top: 15px; 	min-height: 350px; */
}


/* Black Frame (tabbing menu) */
.TabStrip .CAT_content {
    /*  height: 470px; */
}

/* IE added */
.TabStrip {
    width: 100%;
    /*min-width: 440px;*/
}

.TabStrip .CATRowHighLight {
    border-bottom: 0px !important;
}

.TabStrip .CATSubHead {
    font-size: 12px;
    font-weight: bold;
    color: #939393;
    text-transform: none;
}

.TabStrip .CAT_top_left_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/top_left_corner_black.png) no-repeat bottom left;
    height: 27px;
}

.TabStrip .CAT_top_right_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/top_right_corner_black.png) no-repeat bottom right;
    height: 27px;
}

.TabStrip .CAT_top_bg_black {
    padding: 0;
    margin: 0 4px 0 4px;
    background: #FFF url(images/top_bg_black.png) repeat-x bottom;
    height: 27px;
    vertical-align: top;
}

.TabStrip .CAT_left_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/left_bg_black.png) repeat-y top left;
}

.TabStrip .CAT_right_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/right_bg_black.png) repeat-y top right;
}

.TabStrip .CAT_bottom_left_corner_black {
    padding: 0;
    margin: 0 0 0 0;
    background: url(images/bottom_left_corner_black.png) no-repeat top left;
}

.TabStrip .CAT_bottom_right_corner_black {
    padding: 0;
    margin: 0;
    background: url(images/bottom_right_corner_black.png) no-repeat top right;
    padding: 0 4px 0 4px;
}

.TabStrip .CAT_bottom_bg_black {
    padding: 0;
    margin: 0;
    background: url(images/bottom_bg_black.png) repeat-x top left;
    height: 4px;
}

.TabStrip .CAT_content_pad_black {
    padding: 0px 20px 0px 20px;
    margin: 0 0 0 0; /*	background: #FFF; */
}



/* Outlines active image in additional images and gallery (mediamenu) control */
.catip_thumbactive {
    border: 4px solid #99ffff !important;
}

/* fill space */
.catip_thumbinactive {
    border: 4px solid transparent !important;
}
