/* 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.. */

/* --------------- 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;
    }

.hero_slide .hero_text_box {
    position:absolute;
    top:0px;
    left:0px;
    padding:20px 20px 20px 20px;
    width:400px;
    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;
    }

.hero_slide .hero_bg_image {
    position:absolute;
    left:0px;
    top:0px;
    }
 
 /* --------------- 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) --------------- */ 

#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;
    /*background-image: url('../images/section_bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;*/
    overflow:auto;
    width:710px;
    }

#feature_wrapper .section:first-child,
#extra_info_wrapper .section:first-child {
    background-image:none;   
    border-top: 0px solid #ddd; 
    }
    
#feature_wrapper .section h3,
#extra_info_wrapper .section h3 {
    font-weight:bold;
    }
    
#feature_wrapper .section h5,
#extra_info_wrapper .section h5 {
    font-weight:bold;
    margin-top:1.8em;  
    }
#feature_wrapper .section h3:first-child,
#feature_wrapper .section h5:first-child,
#extra_info_wrapper .section h3:first-child,
#extra_info_wrapper .section h5:first-child {
    margin:0px;   
    }
    
    
#feature_wrapper .section p,
#extra_info_wrapper .section p {
    margin-bottom:1em;
    }    
    
#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 h5,
#extra_info_wrapper .third_width h5,
#feature_wrapper .SeriesItem h5 {
    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 and fridges) ------------ */

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

.header_bar {
    height:45px;
    line-height:45px;
    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); 
    }

.header_bar .title,
.header_bar h3.title{
    height:45px;
    line-height:45px;
    font-family: 'Open Sans' , sans-serif;
    font-size: 16px;
    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;
    }   
    
#prod_slides{
    position:relative;
    overflow:auto;
    padding-left:45px;
    padding-right:45px;
    }
   
#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;
    }
   
#prod_slides a.prodlink_thumbview.mod6 {
    width:88px;
    }
    
#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;
    }
    
a.prodlink_thumbview img {
    width:90px;
    height:auto;
    margin-bottom:5px;
    }

            
a.prodlink_thumbview span {
    display:block;
    }
     
a.prodlink_thumbview span.name {
    color:black;
    font-size: 14px;
    font-weight:bold;
    }
      
a.prodlink_thumbview:hover span.name {
    color:red;
    }
    
    
/* ------------  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,
#prodteaser_wrapper.height_120 a.prodlink_thumbview {
    height:120px;
    }
    
/* --- Height 150 --- */
#prodteaser_wrapper.height_150 a.next,
#prodteaser_wrapper.height_150 a.prev,
#prodteaser_wrapper.height_150 a.prodlink_thumbview {
    height:150px;
    }
/* --- Height 170 --- */
#prodteaser_wrapper.height_170 a.next,
#prodteaser_wrapper.height_170 a.prev,
#prodteaser_wrapper.height_170 a.prodlink_thumbview {
    height:170px;
    }