/*
 *  Custom css definitions
 *
 *  Note:  PURGE CACHE after every change!!!
 */

/*
 *  Main style modifications
 */
/*  FAQ  */
.cms-page-view .std .faqs h3 { border-top: 1px solid; border-color: #dddddd; margin-bottom: 0.5em; margin-top: 0.5em; } 
.cms-page-view .std .faqs h3::before { content: "Q: "; color:#3399cc; font-weight: bold; }
.product-view h3 { font-weight: bold; }

/*  Local <span> font custom syles  */
.boldred  { font-weight: bold; color: red; }
.boldblue { font-weight: bold; color: #39c; }
.blue { color: #39c; }

/*  Default style corrections
 */

/*  New products listing  */
/*  Removing bullet and margin from "New Products" widget list on front page */
.widget-new-products ul { list-style: none; margin-left: 0; }
.widget-new-products ul li { margin-left: 0; }

/*  Remove spacing gap at the bottom  */
.widget-new-products .products-grid .product-info {
  margin-bottom: 15px;
  min-height: 85px;
}


/*  Replace italic Georgia with something normal
*/
.cart-table .product-cart-sku,
.block-progress dd { font-family: "Helvetica Neue", Verdana, Arial, sans-serif; font-style: normal; }
.cart-table .product-cart-sku .label { font-weight: normal; }
.block-progress dd address { font-weight: bold; font-style: normal; }


/*  Horizontal lines
 */
.hline_grey { width:100%; height:1px; background: #dddddd }

/*  Leading bullet/square/box 
*/
.cms-page-view .prebull::before,
.prebull::before {
    content: "■ ";
}

/*
 *  Blue list / numbering
 */
/*  List number style  */
.cms-page-view .blulist ol li,
.blulist ol li { color:#3399cc; font-size:18px; font-weight: bold; list-style:decimal outside none; margin-left:40px; margin-right: 50px; } 
.cms-page-view .blulist ol li p,
.blulist ol li p { font-style:normal; font-weight: 300; font-size:15px; }

/*
 *  Category view
 */
.catalog-category-view .col-main p { color: #444444; }
.catalog-category-view h1,    /* Apply same blue font color as in .cms-page-view  */
.catalog-category-view h2, 
.collateral-tabs dd h2.prebull, 
.catalog-category-view h3 { color: #3399cc; }

.collateral-tabs dd h2.prebull { display:inline; }

/* bullet style  */ 
.catalog-category-view .blubull ul,
.catalog-product-view .blubull ul,
.pflbl-content .blubull ul { list-style: none; padding: 0; margin: 0 0 0 1em; color: #444444; /* max-width: 200px;*/ }
.catalog-product-view .blubull ul { margin: 1em 0 0 0; }
.catalog-category-view .blubull li,
.catalog-product-view .blubull li,
.pflbl-content .blubull li { padding: 0 0 0.3em 1.2em; text-indent: -1em; }
.catalog-product-view .blubull li { margin: 0; }
.catalog-category-view .blubull li:before,
.catalog-product-view .blubull li:before,
.pflbl-content .blubull li:before { content: "•"; color:#3399cc; margin-right: 0.7em; }

/* nested 2nd level bullets  */
.catalog-category-view .blubull ul > li > ul,
.catalog-product-view  .blubull ul > li > ul { margin: 0 0 0 1em; }
.catalog-category-view .blubull ul > li > ul > li:before,
.catalog-product-view  .blubull ul > li > ul > li:before { color:#666666; }

/* 
 *  Boxes
 */
/* Info frame box (default: green and thin) */
.cms-page-view .std .infoframe { border: 2px solid; border-color: #3399cc; display: inline-block; min-width: 400px; width: 80%; }  /* default: blue */
.cms-page-view .std .infoframe p { color: #3399cc; font-size: 16px; margin: 0.5em; text-align: center; }
.cms-page-view .std .infoframe .strong { font-size: 22px; font-weight: bold; }
/* style updates for "alert"  */
.cms-page-view .std .alert { border: 5px solid; border-color: #ff9900; }  /* orange */
.cms-page-view .std .alert p { color: #ff9900; margin: 1em; }  /* orange */
.cms-index-index .buttonframe { border: 1px solid; border-color: #999999; display: inline-block; padding: 5px }
.cms-index-index .buttonframe p { font-size: 24px; font-weight: 600; color: #3399cc; display: inline; margin: 15px; }


/* Basic, general grey frame
 * (Exmaple: around images)
 */
div.greyframe { display: inline-block; padding: 6px; margin: 0 0 6px; border: 1px solid #DDD; }


/*  Shaded boxes
 */
.cms-page-view .std .lightshadebox { background-color: #ccddee; padding: 15px; }
.cms-page-view .std .lightshadebox p { color: #777777; font-size: 16px; margin: 0.5em; }
/*.cms-page-view .std .lightshadebox p { font-size: 18px; margin: 0.5em; } */
/*.cms-page-view .std .lightshadebox p { color: #0077bb; font-size: 18px; margin: 0.5em; } */
.cms-page-view .std .lightshadebox .strong { color: #3399cc; font-size: 22px; font-weight: bold; }
.cms-page-view .std .lightshadebox .bold { color: #3399cc; font-size: 36px; font-weight: bold; margin-bottom: 1em; }

/*  
 *  Syntax memo
 */
.for_memo_only {
  margin: 8px 7px 0px 5px;   /* top, right, bottom, and left values */
  margin: 0 auto;            /* for centring  */
}

/*  
 *  Social media footer images
 */
/* .footer-container .footer .social { padding: 10px 15px 0 0; display: inline-block; } */
.footer-container .footer .social { width:23%; max-width: 40px; padding: 0 15px 0 0; display: inline-block; }

/*
.footer-container .footer .block-subtitle {
  position: relative;
  padding: 10px 0 0;
  margin-bottom: 5px;
  border: 0;
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  color: #3399cc;
  text-transform: uppercase;
  font-weight: 600;
}
*/

/*  Footer Amazon, Yahoo shop link banner
 */
.footer_img_banner { overflow: hidden; width: 100%; text-align: center;}
.footer_img_banner img {   
  display: inline-block; 
  width: 160px; 
  vertical-align: middle; 
  margin-left: 40px;
  margin-bottom: 12px;
}
.footer_img_banner p { font-size: 12px; text-transform: uppercase; color: #3399cc; margin-bottom: 12px; margin-left: 40px; }


/*  One-page checkout */
/*  Move "PLace order" button to the right, "Edit Your Cart" to the left  */
#review-buttons-container .btn-checkout{ float: right; }
#review-buttons-container .f-left {float: left; }

/*  Product view data-table
 *  (due to using complex CSS with static-blocks-everywhere)
*/
.product-view .std .data-table p { margin: 0 0 0.2em; }
.product-view .std .data-table th { white-space: normal; }

/*  Correct Magebees Featured Products display
*/
.featuredProducts ul li { margin-left: 0; }

/*  Customer reviews
*/
/* Heading style  */
#customer-reviews dl {
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 10px;
}
/* review main text style */
#customer-reviews dl dd {
/*  font-family: Georgia, Times, "Times New Roman", serif;  */
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  font-size: 16px;
  margin: 10px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #cccccc;
}
/*  username and date  
    Note:  'dd' became 'dt' because review-meta were moved into the header (dt)  */
#customer-reviews dl dt .review-meta {
  color: #3399cc;
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}
#customer-reviews h2 {
  color: #3399cc;
  font-size: 16px;
  text-transform: uppercase;
}

/*
 *  Blog styles customizations
 */
.skip-blog .icon, .skip-news .icon, .skip-guide .icon {
  background-image: url(../images/icon_sprite.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
.skip-blog .icon, .skip-news .icon, .skip-guide .icon {
    background-image: url(../images/icon_sprite@2x.png);
    background-size: 100px 1000px;
  }
}

.skip-blog .icon, .skip-news .icon, .skip-guide .icon {
  display: inline-block;
  background-position: 0px -197px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.skip-news .icon {
  background-position: 0px -227px;
}
.skip-guide .icon {
  background-position: 0px -257px;
}


@media only screen and (min-width: 500px) {
  .skip-blog .icon, .skip-news .icon {
    margin-right: 3px;
  }
}

.skip-blog:not(.skip-active):hover .icon {
  background-position: -50px -197px;  /*  46  */
}
.skip-news:not(.skip-active):hover .icon {
  background-position: -50px -227px; 
}
.skip-guide:not(.skip-active):hover .icon {
  background-position: -50px -257px; 
}

.skip-blog, .skip-news, .skip-guide {
  position: relative;
  float: left;
  width: 12%;  /*  orig: 20% - same as style_truncd.css:3299
                                see style_truncd.css:3426 &   */
  height: 44px;
  background: #FFFFFF;
  color: #636363;
  line-height: 42px;
  text-align: center;
}
@media only screen and (min-width: 771px) {
  .skip-blog, .skip-news, .skip-guide {
    float: none;
    width: auto;
    vertical-align: top;
    display: inline-block;
    padding: 0 10px;
    text-transform: uppercase;
  }

  /*
   *   Thumbnail images of MAIN menu (category navigation)
   *   (using a sprite image)
   */
  .nav-primary li[class^="nav-category-"].level0 {   /*  attribute selector: all 'nav-category-' classes  */
    background: url(../images/menu_sprite.png) center 0px no-repeat;
    height: 40px;
  /*  padding-top: 35px;  /* moving the text to bottom  */
    padding-top: 5px;     /* with transparent text */
    margin: 0 auto 3px auto;
  }
  /*
  .nav-primary a.level0,
  .nav-primary li.level0.menu-active > a {
    color: rgba(99,99,99,0.1);
  }
  */
  .nav-primary li.level0.nav-category-node-4 {  /* BGS */
    background-position: center -120px; }  /* offset inside the sprite image  */
  .nav-primary li.level0.nav-category-node-4 > a {
    padding: 0 10px;
    color: rgba(99,99,99,0.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-node-23 {    /* Hazet */
    background-position: center -200px;  }
  .nav-primary li.level0.nav-category-node-23 > a {
    color: rgba(99,99,99,0.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-node-24 {    /* Bahco */
    background-position: center -240px;  }
  .nav-primary li.level0.nav-category-node-24 > a {
    color: rgba(99,99,99,0.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-node-26 {    /* Stahlwille */
    background-position: center -80px;  }
  .nav-primary li.level0.nav-category-node-26 > a {
    color: rgba(99,99,99,0.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-node-27 {    /* Knipex */
    background-position: center -160px;  }
  .nav-primary li.level0.nav-category-node-27 > a {
    color: rgba(99,99,99,0.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-node-28 {    /* Special tools */
    background: none;  }
  .nav-primary li.level0.nav-category-node-28 > a {
    font-weight: bold;
    padding: 0 10px;
    color: #3091c2;     } /* transparent font */

  .nav-primary li.level0.nav-category-node-29 {    /* Outlet */
    background-position: center -280px;  }
  .nav-primary li.level0.nav-category-node-29 > a {
    font-weight: bold;
    color: rgba(200,50,0,1.0);  } /* transparent font */

  .nav-primary li.level0.nav-category-home  {  /* HOME */
    background-position: center -40px;   }
  .nav-primary li.level0.nav-category-home  > a {
    color: rgba(99,99,99,0.0);  } /* transparent font */
}


/* ============================================ *
 * Nav - Skip Link
 * Skip top menu labels on small screens
 * (copied from original styles_trunkd.css)
 * ATTENTION: order of rules (lines) is important!!
 * ============================================ */
.skip-link .label,
.skip-news .label,
.skip-guide .label,
.skip-blog .label {
  display: none;
}
/*  Switches visibility back on only for the "menu" label
*   otherwise the Skip-link rule applies    */
.skip-nav .label {
  display: inline;
}

/*  Screen width > 500px:  show labels 
*/
@media only screen and (min-width: 770px) {
  .skip-link .label,
  .skip-news .label,
  .skip-guide .label,
  .skip-blog .label {
    display: inline;   /* balance with styles_truncd.css:   */
  }
/*  .skip-link {  */
/*    width: 13%;  /* compare: styles_truncd.css:3  (min-width: 500px)
                             and      "       :3299  (default)   */
/*  } */
/*  .skip-nav {    /* compare: styles_truncd.css:3447  (min-width: 500px) 
                             and      "       :3425  (default)   */
/*    width: 22%;
 *  }  */

}  /*  end @media ... min-width: 770px  */

/*  Top-menu width, see:   styles_truncd.css
*                               500px
*     .skip-link:  line  3299,  3325
*     .skip-nav:   line  3426,  3447
*/

/* Aron, 2018-10-21: Make wrapper to fully cover height of images  */
.blog-cat-view .postWrapper {
  display: inline-block;
  width: 100%;
}

.blog-cat-view .postDetails, .blog-post-view .postDetails, .postWrapper .postDetails,
.blog-cat-view h4.poster, .blog-post-view h4.poster {
  font-size: 11px;
}

/* Aron, 2018-10-21: Better element spacing for blog listing   */
.blog-cat-view .postContent img {
  margin: 0 20px 10px 0;
  max-width: 40%;   /* Avoid images getting too large on small screens */
}

.block-blog h5 {
/*  font-size: 16px; */
}
.block-blog .menu-recent h5 {
  margin-top: 25px;
}
.block-blog .menu-categories ul li a {
  font-size: 16px;
}
.block-blog .menu-recent ul li a {
  font-size: 12px;
}
.block-title {
  border-top: 0;
}
.block-title h1 {
  font-size: 36px;
}

/*
 *   Compact data table with horizontal lines
 */
.horiz_lines_table { 
  width: 100%; 
  border-top: 2px solid #3399cc; 
  border-bottom: 2px solid #3399cc;
}
.horiz_lines_table td,
.horiz_lines_table th {
  border-bottom: 1px solid #888888;
  vertical-align: top;
  padding: 0.3em 0.3em 0.3em;
}
.horiz_lines_table th {
  background: #eeeeee;
/*  text-transform: uppercase;  */
  font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}


/*  Neutral grey table with white borders
 */
.neutral_grey_table {
  border: 0;
  border-collapse: collapse;
  background-color: #eee;
  margin: 20px auto 20px;
}
.neutral_grey_table th,
.neutral_grey_table td {
  padding: 10px;
  border: 3px solid white;
}
.neutral_grey_table th {
  background-color: #ddd;
  font-weight: bold;
}
.neutral_grey_table.compact th,
.neutral_grey_table.compact td {
  padding: 5px;
  border: 0;
}


/*
 *   DIV-table 
 */
/* div.divtable { display: table; width: 70%; min-width: 600px; padding: 0; margin: 0; border: 0; color: #444444; } */
div.divtable { display: table; max-width: 800px; min-width: 500px; padding: 0; margin: 0; border: 0; color: #444444; }
div.divtr { display: table-row; padding: 0; border: 0; }
div.divtd { display: table-cell; padding: 6px; padding-left: 20px; border: 0; border-top: 1px solid #CCC; }
div.divtable p { margin: 2px; margin-bottom: 8px; }  
div.divtable h2 { display: block; }  /* must override "display:none" from styles_truncd.css:5355 .collateral-tabs dd h2none */
div.divtable h3 { margin-top: 4px; }  
/* div.divtable img { vertical-align: text-top; margin-top: 10px;}  */
div.divimgframe img { vertical-align: text-top; margin-top: 10px;}
div.divimgframe { display: inline-block; padding: 6px; margin: 0 0 6px; border: 1px solid #DDD; 
	text-align: left;
	vertical-align: text-top;  <!-- For the vertical alignment in neighbouring columns-->
}
div.divimgframe_steps { display: block; padding: 6px; margin: 0 0 6px; border: 0 solid #DDD; 
	text-align: left;
	vertical-align: text-top;
	background-image: url("../../../../../media/wysiwyg/graphics/triangle_down_yellow_o.svg");
	background-size: 50px 12px;
	background-repeat: no-repeat;
	background-position: center bottom; 
	padding-bottom: 15px;
}
div.divimgframe_steps img { vertical-align: text-top; margin-top: 2px;}

/*  Frame with a yellow downward arrow 
 *  for step-by-step illustrations
 *  Improved and simplified "divimgframe_steps"
 */
div#steps_arrow_down { display: block; padding: 6px; margin: 0 0 6px;
        background-image: url("../../../../../media/wysiwyg/graphics/triangle_down_yellow_o.svg");
        background-size: 50px 12px;
        background-repeat: no-repeat;
        background-position: center bottom;
        padding-bottom: 15px;
}

/*
 *  Responsive table cells 
 *  wrapping calles on top of each other on small screens
 */
.divtab_respv {
  display: table;
  vertical-align: top;
}
.divtab_respv div {
  display: table-cell;
  padding: 10px;
  vertical-align: top;
}
.divtab_respv img { margin: 10px;  }
.divtab_respv p { margin-bottom: 0.5em; }
.divtab_respv ul { margin: 0; }

@media screen and (max-width: 500px) {
  .divtab_respv {
    display: block;
  }
  .divtab_respv div {
    display: block;
    padding: 10px;
  }
  .divtab_respv img {
    width: 100%;
    margin: 3px;
  }
}

/*
*  Flowbox - div-boxes inside the div-container are flowing to fill the width
*  (see also:  .divbox_container )
*/
.flowbox {
   overflow: hidden;  /* Very important, otherwise container has zero height  */
   /* border: 1px dashed orange;  /* debugging */
   margin: 15px auto 15px;  /* centering  */
}
.flowbox div {
   display: inline-block;   /* so be able to set the width  */
}
.flowbox.greybackbord div {      /* applied to class="flowbox grey" */
   border: 1px solid #EEE;
   background-color: #EEE;
}
.flowbox.smallcenter div {
   font-size: 11px;
   font-weight: bold;
   text-align: center;
}


/*   Add Qty Increment Buttons In Magento style
 */
/*  Product page view  */
.product-view .add-to-cart .qty-wrapper, .product-view .add-to-cart .qty-wrapper label {
  margin-right: 37px;
}
.qty-wrapper .add,
.qty-wrapper .sub {
  color: #3399cc;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.product-view .add-to-cart .qty-wrapper .add {
  margin-top:  -2px;
  margin-left: 116px;
}
.product-view .add-to-cart .qty-wrapper .sub {
  margin-top:  -4px;
  margin-left: 38px;
}
/*  Grouped product page  */
.grouped-items-table .qty-wrapper, .grouped-items-table .qty-label {
  margin-left: 30px; 
}
.product-view .grouped-items-table-wrapper .qty-wrapper .add {
  margin-top:  -37px;
  margin-left:  50px;
}
.product-view .grouped-items-table-wrapper .qty-wrapper .sub {
  margin-top:  -38px;
  margin-left: -23px;
}

/*  SKU number of product view page  */
.product-shop .sku {
  font-size: 12px;
  color:  #bbb;
}

/*
 *   Configrable product swatch layout modifs  
 */
.configurable-swatch-list .not-available .swatch-label {   /*  orig. on line 7543 disabled  */
  color: #ccc;
  background: #fff;
}
.configurable-swatch-list .selected span {
  font-weight: bold;
  color: #11b400;
  /* color: #5577aa; */
}

/*
 *   Short front news banner
 */
.shortnews {
  display:table;
  border:1px solid #ccc;
  vertical-align:top;
}
.shortnews div {
  display:table-cell;
  padding:10px;
  vertical-align:top;
}

.shortnews div {
  display:table-cell;
  padding:10px;
}
.shortnews .image {
/*  background-color: gray; */
  margin-right:20px;
/*  width:160px;  */
/*  border-right:2px solid red;   */
}
.shortnews .image img,
.shortnews .wideimage img {
  width: 220px;
}
.shortnews .message {
  background-color: white;
}
.shortnews .message p {
  margin-bottom: 0.5em;
}
.shortnews .message h2 {
  margin-top: 0;
}
.shortnews .message .actions {
  float:right;
  padding:0;
}

@media screen and (max-width: 500px) {
  .shortnews {
    display:inline-block;
  }
  .shortnews .image img {
    width: 270px;
    max-width: 90%;
  }
  .shortnews .wideimage img {
    width: 100%;
  }
  .shortnews div {
    display:inline-block;
    padding:10px;
  }
  .shortnews .image {
    border:0;
    margin:0;
    width:inherit;
  }
}

/* Make product description in responsive 
 * mobile/smartphone view OPEN/SHOWING by default 
 */
@media (max-width: 770px)
{
  .product-collateral > dl > dd {
    display: block !important;
  }
}

/*  Show product w/ image in CMS and Blog pages
 *  Ref:  http://mercytapscott.com/display-dynamic-product-information-in-magento-cms-pages/
 *  Used in:
 *     /var/www/magento/app/design/frontend/gizzet/default/template/
 *      catalog/product/dynamic_product_image.phtml
 */
.featured-product-box {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  margin: 0 0 auto;  /* align left */
  padding: 5px;
}

/*
 *  Pixlogic Flexible Blog customizations
 */
.pflbl-sec h2 {
  margin-top: 30px;
}
/*  Hide Blog Meta-description in the page contents!!
*/
.pflbl-category-description {
  display: none;
}