/* This file controls the CSS that is common to the main page for each product range 
For example the 'Classic GE Series' main page and the 'HyperCore Range' main page etc.. */

/*-------- common range [MENZ 2020-05-21] --------*/

/* --------------- HERO BANNER --------------- */ 

#hero_wrapper {
	border: 1px solid #ddd;
	height:250px;
    width: 760px;
    overflow:hidden;
    margin-bottom:10px; 
    box-shadow: 0 0 4px #eee;
}

.hero_slide {
    border: 10px solid white;
    height:228px;  /* -2px for parent border */ 
    width: 738px;  /* -2px for parent border */ 
    overflow:hidden;
    position:relative;
}

img.hero_bg_image {
    height: 228px;
    width: 738px;
    position:absolute;
    left:0px;
    top:0px;
}

.hero_slide .hero_text_box {
    position:absolute;
    top:0px;
    left:0px;
    padding:20px 20px 20px 20px;
    height:208px; /* -20px for padding */
    background-color:rgba(0, 0, 0, 0);
}
    
.hero_slide .hero_quick_description {
    font-size:16px;
    line-height:1.5em;
    color:#666;
    width:400px;
    margin-top: 0;
}

body.me-site-hero-wider .hero_slide .hero_quick_description {
    max-width: 465px;
    width: auto;
}

/* --------------- Alternative Text Colour (White) ---------------
This is signaled by image name 'heroalt_' which then generates a class */
.hero_text_box.alt .hero_quick_description,
.hero_text_box.alt .hero_header {
    color: white;
}

/* --------------- CATEGORY HEADER --------------- */ 

#category_wrapper, 
#category_wrapper_image {
    border: 1px solid #ddd;
    min-height: 50px;
    padding: 20px 20px 10px 20px;
    width: 720px;
    overflow: hidden;
    background: #eee; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#eeeeee'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#eeeeee));
    background: -webkit-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -moz-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -ms-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: -o-linear-gradient(top,  #f1f1f1,  #eeeeee);
    background: linear-gradient(top,  #f1f1f1,  #eeeeee);
    box-shadow: 0 0 4px #eee;
}


#category_wrapper .category_header {}
#category_wrapper_image .category_header {
    margin-top:0px !important;
}

#category_wrapper .category_quick_description, 
#category_wrapper_image .category_quick_description {
    font-size:16px;
    line-height:1.5em;
}

#category_wrapper_image .category_quick_description {
    
}
    
    
#category_wrapper_image div.category_image {
    float: right;
    position: relative; 
    width: 225px;
    height: 125px;
    
}

#category_wrapper_image div.category_image span {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    
    height: 100%;
    width: 100%;
    
}


/* --------------- DESCRIPTION WRAPPER (Main content) --------------- */
.feature_wrapper,
#description_wrapper {
    border: 1px solid #ddd;
    box-shadow: 0 0 4px #eee;
    width: 760px;
}
    
    

/* --------------- GROUP FEATURE, INFO ------------------ */

#feature_wrapper, 
#extra_info_wrapper {
	border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    min-height: 50px;
    width: 760px;
    overflow: hidden;
    box-shadow: 0 0 4px #eee;
    padding: 0px;
}
    

#feature_wrapper .section,
#extra_info_wrapper .section{
    position: relative;
    min-height: 50px;
    margin: 0px;
    padding: 25px;
    border-top: 1px solid #ddd;
    overflow:auto;
}

#feature_wrapper .section:first-child,
#extra_info_wrapper .section:first-child {
    background-image:none;   
    border-top: none; 
}
    #feature_wrapper .section.border-top,
    #extra_info_wrapper .section.border-top {
        border-top: 1px solid #ddd;
    }
#feature_wrapper .section h2,
#extra_info_wrapper .section h2 {
    font-weight:bold;
}
    
#feature_wrapper .section h3,
#extra_info_wrapper .section h3 {
    font-weight:bold;
    margin-top: 2rem;  
}
#feature_wrapper .section h2:first-child,
#feature_wrapper .section h3:first-child,
#extra_info_wrapper .section h2:first-child,
#extra_info_wrapper .section h3:first-child {
    margin-top: 0;   
}
    
    
#feature_wrapper .section p,
#extra_info_wrapper .section p {
    margin-bottom:1em;
}
    #feature_wrapper .section.no-border-top,
    #extra_info_wrapper .section.no-border-top,
    .section.no-border-top {
        border-top: none;
    }

    
#feature_wrapper .third_width,
#extra_info_wrapper .third_width {
    float:left;
    width:225px;
    position:relative;
    margin:10px 10px 10px 0;
    /*border: 1px solid #ddd;*/
}
    
#feature_wrapper .half_width,
#extra_info_wrapper .half_width {
    float:left;
    width:320px;
    position:relative;
    margin:10px 10px 10px 0;
    /*border: 1px solid #ddd;*/
}

 
#feature_wrapper .SeriesItem {
    float:left;
    width:160px;
    position:relative;
    margin:10px 10px 10px 0;
} 
 
#feature_wrapper .SeriesItem.half_width {
    width:320px;
} 
#feature_wrapper .SeriesItem.full_width {
    width:100%;
} 
    
   
#feature_wrapper .SeriesItem .capacity {
    display: block;
    font-size:13px;
    margin:0px;
}
#feature_wrapper .SeriesItem .capacity span.cooling {
    color: #306eff;
}
#feature_wrapper .SeriesItem .capacity span.heating {
    color: #ff0000;
}
    
#feature_wrapper .SeriesItem .key {
    display: block;
    font-size:12px;
    line-height: 1.4em;
    margin:0px;
    color: #333333;
}
#feature_wrapper .SeriesItem .cool {
    color: #306eff;
}
#feature_wrapper .SeriesItem .heat {
    color: #ff0000;
}
    
    
    
#feature_wrapper .third_width h3,
#extra_info_wrapper .third_width h3,
#feature_wrapper .SeriesItem h3 {
    font-size:13px;
    margin:0px;
    font-weight:bold;
}

#feature_wrapper .third_width p,
#extra_info_wrapper .third_width p,
#feature_wrapper .SeriesItem p  {
    font-size:11px;
    margin-top:0.5em;
}

  
#feature_wrapper .half_width span.name,
#extra_info_wrapper .half_width span.name 
{
    display: block;
    font-size:13px;
    margin:0px;
} 
  





/* --------------- PRODUCT LISTING (used on pages such as acessories) --------------- */ 

#product_listing_wrapper {
    width: 720px;
	border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	padding: 20px 20px 10px 20px;
    box-shadow: 0 0 4px #eee;
}

/* ------------  PRODUCT LISTINGS (used for multisplit indoors tab) ------------ */

#product_links {
    overflow:auto;
    width:100%; 
    border-bottom: 1px solid #DDD;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position:relative;
}


/* ------------  PRODUCT LISTINGS (SLIDER - used in group.aspx - heatpumps, fridges, homepage) ------------ */

#prodteaser_wrapper {
    overflow:auto;
    width:100%; 
    border: 1px solid #DDD;
    box-shadow: 0 0 4px #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position:relative;
    background-color: #fff;
}

.header_bar {
    min-height: 45px;
    line-height: 45px;
    height: auto;
    overflow: visible;
    border-top: 1px solid white;
    border-bottom: 1px solid #cfcfcf;
    padding-left: 10px;
    background: #eee; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dddddd');
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#ddd)); 
    background: -webkit-linear-gradient(top,  #f1f1f1,  #ddd); 
    background: -moz-linear-gradient(top,  #f1f1f1,  #ddd); 
    background: -ms-linear-gradient(top,  #f1f1f1,  #ddd); 
    background: -o-linear-gradient(top,  #f1f1f1,  #ddd); 
    background: linear-gradient(top,  #f1f1f1,  #ddd); 
}
#product_listing_wrapper .header_bar {
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
}


.header_bar .title,
.header_bar h2.title {
    min-height: 45px;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 45px;
    text-shadow: 1px 1px 1px white;
    color: #555;
    margin: 0px 0px 0px 0px !important;
    float: left;
}
 
.header_bar .display_count {
    float:right;
    height:45px;
    line-height:45px;
    font-size: 11px;
    color: #999;
    padding-right:15px;
}

.header_bar .bar_button,
.header_bar .bar_button:visited {
    display:block;
    position:absolute;
    right:10px;
    top:0px;
}   


#prodteaser_wrapper p {
    margin: 12px;
}

#prod_slides,
.prod_slides {
    position: relative;
    overflow: hidden;
    padding-left: 45px;
    padding-right: 45px;
    font-size: 1.1rem;
    line-height: 1.4em;
}
   
#prod_slides div.slide,
.prod_slides div.slide  {
    overflow:auto;
}


a.prodlink_thumbview {
    display:block;
    float:left;
    border: 2px solid white;
    background-color:White;
    padding:0px 5px 0px 5px;
    text-align:center;
    color: #999;
    font-size: 11px;
    margin: 10px 0px 0px 8px;
    position:relative;
    width:102px;
}
.compare a.prodlink_thumbview {
    border: 0;
    float: inherit;
    padding: 0.5rem;
    margin: 0;
    position: relative;
    width: auto;
}
.hover-no a.prodlink_thumbview,
.multiroom a.prodlink_thumbview {
    padding: 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
    position: relative;
    width: auto;
    max-width: 100px;
    border: 1px solid #ddd;
    background: #fefefe;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    background: -webkit-linear-gradient(top, #fff, #f1f1f1);
    background: -moz-linear-gradient(top, #fff, #f1f1f1);
    background: -ms-linear-gradient(top, #fff, #f1f1f1);
    background: -o-linear-gradient(top, #fff, #f1f1f1);
    background: linear-gradient(top, #fff, #f1f1f1);
    box-shadow: inset 0 0 3px #eee;
}
.full-width a.prodlink_thumbview {
    width: auto;
    max-width: 100%;
}
a.prodlink_thumbview
#prod_slides a.prodlink_thumbview.mod6,
.prod_slides a.prodlink_thumbview.mod6 {
    width:88px;
}
    
#prod_slides a.prodlink_thumbview,
.prod_slides a.prodlink_thumbview  {
    width:110px;
}
    
#product_links a.prodlink_thumbview {
    width:100px;
    margin: 10px 8px 0px 0px;
}


a.prodlink_thumbview:hover {
    text-decoration:none;
    border: 2px solid #eee;
    color:red;
}
.compare a.prodlink_thumbview:hover {
    border: 0;
}
.hover-no a.prodlink_thumbview:hover,
.multiroom a.prodlink_thumbview:hover {
    border: 1px solid #ddd;
    background: #fefefe;
    color: #999;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    background: -webkit-linear-gradient(top, #fff, #f1f1f1);
    background: -moz-linear-gradient(top, #fff, #f1f1f1);
    background: -ms-linear-gradient(top, #fff, #f1f1f1);
    background: -o-linear-gradient(top, #fff, #f1f1f1);
    background: linear-gradient(top, #fff, #f1f1f1);
    box-shadow: inset 0 0 3px #eee;
}

.compare .price {
    font-weight: bold;
}


a.prodlink_thumbview img {
    width: 90px;
    height: auto;
    min-height: 50px;
    margin-bottom: 5px;
}

            
a.prodlink_thumbview span {
    display:block;
}
     
a.prodlink_thumbview span.name {
    color: #000;
    font-size: 14px;
    font-weight: bold;
}
a.prodlink_thumbview span.capacityclass {
    color: #666;
    border: 1px solid;
    border-color: #ccc;
    background: #f1f1f1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1)); 
    background: -webkit-linear-gradient(top,  #ffffff,  #f1f1f1); 
    background: -moz-linear-gradient(top,  #ffffff,  #f1f1f1); 
    background: -ms-linear-gradient(top,  #ffffff,  #f1f1f1); 
    background: -o-linear-gradient(top,  #ffffff,  #f1f1f1); 
    background: linear-gradient(top,  #ffffff,  #f1f1f1); 
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 4px;
}
      
a.prodlink_thumbview:hover span.name {
    color:red;
}
.hover-no a.prodlink_thumbview:hover span.name,
.multiroom a.prodlink_thumbview:hover span.name {
    color: #000;
}
.hover-no a.prodlink_thumbview:hover span.capacityclass,
.multiroom a.prodlink_thumbview:hover span.capacityclass {
    color: #666;
}
/* ------------  Prev & Next Buttons ------------ */
#prodteaser_wrapper a.next,
#prodteaser_wrapper a.prev {
    display: block;
    width: 30px;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    text-indent: -9999px;
    background-position: center center;
    background-color: #ddd;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 1;
    filter: alpha(opacity=100);
}
   
#prodteaser_wrapper a.prev {
    background-image: url('/images/product/link/prodlist_leftarrow.png');
    left: 10px;
}
    
#prodteaser_wrapper a.next {
    background-image: url('/images/product/link/prodlist_rightarrow.png');
    right: 10px;
}
    
#prodteaser_wrapper a.next:hover,
#prodteaser_wrapper a.prev:hover {
    background-color: red;
}
        
#prodteaser_wrapper a.next:focus,
#prodteaser_wrapper a.prev:focus {
    outline:none;
}
    
/* --- Height 120 --- */
#prodteaser_wrapper.height_120 a.next,
#prodteaser_wrapper.height_120 a.prev {
    height:124px;
}
#prodteaser_wrapper.height_120 a.prodlink_thumbview {
    height:120px;
}
    
/* --- Height 150 --- */
#prodteaser_wrapper.height_150 a.next,
#prodteaser_wrapper.height_150 a.prev {
    height:154px;
}
#prodteaser_wrapper.height_150 a.prodlink_thumbview {
    height:150px;
}
/* --- Height 170 --- */
#prodteaser_wrapper.height_170 a.next,
#prodteaser_wrapper.height_170 a.prev {
    height:174px;
}
#prodteaser_wrapper.height_170 a.prodlink_thumbview {
    height:170px;
}




/* MOBILE SITE */
.mob .gallery-wrapper,
.mob #hero_wrapper,
.mob #description_wrapper,
.mob #prodteaser_wrapper  {
	max-width: 760px;
	margin-left: auto;
    margin-right: auto;
}

.mob #prodteaser_wrapper.height_120 a.prodlink_thumbview,
.mob #prodteaser_wrapper.height_150 a.prodlink_thumbview,
.mob #prodteaser_wrapper.height_170 a.prodlink_thumbview {
	height: auto;
}
.mob #prod_slides,
.mob .prod_slides {
	overflow: visible;
	padding: 0;
	
}
.mob #prod_slides div.slide,
.mob .prod_slides div.slide {
	overflow: visible;
}
@media screen and (max-width: 960px) {
    .mob .buywherepanes .header_bar .title,
    .mob .buywherepanes .header_bar h2.title {
        line-height: 1.5em;
	    margin: 8px 0 5px 0 !important;
	    float: none;
    }

    .mob #hero_wrapper {
	    width: auto;
	    height: auto;
	    border: none;
	    box-shadow: none;
    }
    .mob .hero_slide {
	    width: auto;
	    height: auto;
	    border: none;
	    overflow: visible;
    }
    .mob .hero_slide .hero_text_box {
	    width: auto;
	    max-width: 100%;
	    height: auto;
	    position: relative;
	    padding: 10px 10px 0 10px;
    }
    .mob .hero_slide .hero_quick_description {
	    width: auto;
	    max-width: 100%;
    }
    .mob img.hero_bg_image {
	    width: auto;
	    height: auto;
	    position: relative;
    }
    .mob .hero_text_box.alt .hero_header {
	    color: #000;
    }
    .mob .hero_text_box.alt .hero_quick_description {
	    color: #666;
    }


    .mob #prodteaser_wrapper {
    }
    .mob .header_bar {
    }
    
    
    .mob #prodteaser_wrapper a.prev,
    .mob #prodteaser_wrapper a.next  {
	    display: none;
    }


    .mob #description_wrapper,
    .mob #feature_wrapper, 
    .mob #extra_info_wrapper {
	    width: auto;
    }
    .mob #feature_wrapper .section, 
    .mob #extra_info_wrapper .section {
        width: auto;
	    height: auto;
	    padding: 10px;
	    overflow: hidden;
    }

    .mob .tab_wrapper.features .section_product_feature {
	    width: auto;
    }
    .mob div.product_feature {
	    margin: 35px 5px 10px 5px;
    }
    .mob div.product_feature_left_img {
	    float: none;
	    margin: 0 0 15px 0;
    }
    .mob div.product_feature_left {
	    margin: 0;
    }

    .mob #category_wrapper, 
    .mob #category_wrapper_image,
    .mob #product_listing_wrapper {
	    width: auto;
	    height: auto;
	    padding: 10px;
    }
    .mob #category_wrapper_image div.category_image {
	    float: none;
    }

        .mob #product_listing_wrapper .header_bar {
            margin-top: -10px;
            margin-left: -10px;
            margin-right: -10px;
        }

}