/* --------------- SINGLE POST: HIDE SIDE NAV ON DESKTOP --------------- */
/* inspiration/default.aspx renders the side nav on every page so the mobile sidebar
   (section-header-v2.js) can copy its category tree. Single posts (html.me-insp-post)
   stay full width on tablet/desktop: hide the nav, its toggle button, and the content
   offset (v2 margin class + v0 inline SubSectionNavStyle). .mob = mobile layout (v0 + v2). */
@media (min-width: 768px) {
    html.me-insp-post:not(.mob) #m_sub_section_nav,
    html.me-insp-post:not(.mob) #m_sub_section_title,
    html.me-insp-post:not(.mob) #m_section_header .bc-browse-btn {
        display: none !important;
    }
    html.me-insp-post:not(.mob) #m_content {
        margin-left: 0 !important;
    }
    /* Undo override.css "#m_content.me-sv2-has-sidenav #hero_wrapper { width: 100% }" - posts
       now carry that class (side nav rendered for mobile), which stacked untyped posts'
       hero above the text (e.g. Ventilation). 580px = original inspiration.css hero width,
       same as the designer/showcase/freshideas max-width cap. */
    html.me-insp-post:not(.mob) #m_content.me-sv2-has-sidenav #hero_wrapper {
        width: 580px;
    }
    /* v2: with no side nav, let the post fill the full .pagewidth so it lines up with the
       section sub-nav (was capped at 970px wrapper / 960px boxes). #m_main in the box
       selectors outranks override-old.css "#m_main .designer #header_wrapper". */
    html.me-sv-2.me-insp-post:not(.mob) #m_content_wrapper {
        max-width: none;
    }
    html.me-sv-2.me-insp-post:not(.mob) #m_main #header_wrapper,
    html.me-sv-2.me-insp-post:not(.mob) #m_main #description_wrapper {
        width: auto;
    }
}


/* Full-bleed body images: article copy uses <div class="row" style="margin: -25px -25px 0 -25px"><img ...></div>
   to run an image edge to edge under the header. The img had no width, so it showed at its
   natural 960px and fell short once posts went full .pagewidth - stretch it to the row. */
#m_main #description_wrapper .row[style*="margin: -25px"] > img {
    width: 100%;
    height: auto;
    display: block;
}


/* --------------- TABLET / MOBILE (<=991px) FIXES --------------- */
@media (max-width: 991px) {
    /* Hero: jq-bdt.js loadSlider() tags the single hero image .wide/.tall from its size at
       DOM-ready, before it has loaded (0/0) - so it is always .tall (height:100%) inside the
       fixed 400px slide, and the sides get cropped on narrow screens. Scale to full width. */
    #m_main #hero_wrapper #slides-inspire .slide {
        width: auto;
        height: auto;
    }
    #m_main #hero_wrapper #slides-inspire .slide img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Article links: give untyped categories (e.g. Ventilation, Hot Water) the same
       auto-height 2-col grid override.css gives designer/showcase/freshideas, instead of
       the fixed 200x200 desktop box that cuts the title off. */
    #m_main div.list_item:not(.main_cat) {
        display: inline-block;
        vertical-align: top;
        float: none;
        width: calc(50% - 12px);
        height: auto;
        min-height: 260px;
        padding: 8px;
        box-sizing: border-box;
        margin: 0 10px 29px 0;
    }
    #m_main div.list_item:not(.main_cat) .inner {
        display: none;
    }
    #m_main div.list_item:not(.main_cat) .inner_img {
        display: block;
        position: relative;
        height: 165px;
        width: 100%;
        background-size: cover;
        box-sizing: border-box;
    }
    /* full title on all types (override.css caps designer/showcase/freshideas at 52px) */
    #m_main div.list_item .name {
        max-height: none;
    }
}

/* Phone (<=767px): main category tiles (Ideas & Advice home) go full width -
   desktop size is a fixed 334x300 tile with a 300x263 image. Keeps the 300:263 shape. */
@media (max-width: 767px) {
    #m_main div.list_item.main_cat {
        float: none;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0 0 30px 0;
    }
    #m_main div.list_item.main_cat .inner {
        display: none;
    }
    #m_main div.list_item.main_cat .inner_img {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 300 / 263;
        padding: 0;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
    }
}


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


#m_content .inspiration-header-wrapper {
    background: black;
    color: white;
}

.article h2, .article h3 {
    margin-top: 1em;
}

.inspiration-header-wrapper h1 {
    color: white;
}

.article ul {
    list-style: disc;
}

#hero_wrapper {
    /*border-left: 1px solid #ddd;*/
    margin-left: 10px;
    height: 400px;
    width: 580px;
    overflow: hidden;
    box-shadow: 0 0 4px #eee;
    float: right
}
    
/* ----- OUTER CONTAINER ----- */	
#hero_wrapper div#slides {
	position: relative;
	width:580px;
	border: 0px; 
    overflow:hidden; /* only for IE7 and below */
}
  
/* ----- SLIDES CONTAINER ----- */		
#hero_wrapper div.slides_container {
	height:400px;
    width: 580px;
    background:#eee;
    overflow:hidden;
    /*background-color:Black;*/
}

#hero_wrapper div.slide {
    position:relative;
    height:400px;
    width: 580px;
	overflow:hidden;
	}
    

img.hero_bg_image {
    height:400px;
    width: 580px;
}


#header_logo{
    position:absolute;
    right: 20px;
    top: -20px;
    z-index: 10;
}


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

#header_wrapper {
    border: 1px solid #ddd;
    min-height: 115px;
    padding: 0px;
    width: 960px;
    overflow: hidden;
    position:relative;
    background: #eee; /* Fallback*/
    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;
}
   

#header_wrapper div.inner {
    padding: 20px 25px 10px 25px;
}
    
#header_wrapper .name {
    margin-bottom: 5px;
}

#header_wrapper .position {
    margin: 0;
    font-style: italic;
    font-size: 14px; 
    color: #333;
}
    
#header_wrapper .logo {
    position: relative;
    margin: 20px 0 0 0;
    width: 325px;
    height: 100px;
}
    
#header_wrapper .profile_photo {
    position: relative;
    margin: 5px 0 10px 0;
    width: 100px;
    height: 100px;
}
    
#header_wrapper div.logo img {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
    
#header_wrapper .company {
    margin: 10px 0 0 0;
max-width: 700px;
}
    
#header_wrapper .web {
    margin: 5px 0 0 0;
}
    


/* --------------- DESCRIPTION WRAPPER (Main content) --------------- */ 

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

    #description_wrapper .section {
        position: relative;
        min-height: 1px;
        margin: 0px;
        padding: 25px;
        overflow: auto;
        width: auto;
    }

    #comment_wrapper .section {
        position: relative;
        min-height: 1px;
        margin: 0px;
        padding: 25px;
        overflow: auto;
        width: 910px;
    }
#comment_wrapper .section {
    padding-bottom: 0px;
    overflow:hidden;
}
    
#description_wrapper .section h2 {
    font-weight:bold;
}
    
#comment_wrapper .section h2 {
    font-size: 14px;
    font-style: italic;
    margin-top:1.8em;  
    margin-bottom: 15px;
}
    
#description_wrapper .section h3,
#comment_wrapper .section h3 {
    font-weight:bold;
    margin-top:1em;  
}
    
#description_wrapper .section h2:first-child,
#description_wrapper .section h3:first-child,
#comment_wrapper .section h2:first-child,
#comment_wrapper .section h3:first-child {
    margin-top:0px;   
}
    
    
#description_wrapper .section p,
#comment_wrapper .section p {
    margin-bottom:1em;
}    


/*style overrides*/
html.me-site-blog #description_wrapper .section,
html.me-site-blog-black #description_wrapper .section {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html.me-site-blog #header_wrapper {
    border-bottom: none;
    background: black;
    color: white;
}

    html.me-site-blog #header_wrapper h1 {
        color: white;
    }

    html.me-site-blog #header_wrapper .inner {
        padding: 70px 25px 10px 25px;
    }


#description_wrapper .nav {
    position: relative;
    min-height: 50px;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}
    
#description_wrapper .nav span.date {
    float: left;
    font-size: 11px;
    font-style: italic;
    padding: 15px 0px 0px 25px;
}
#description_wrapper .nav a {
    float: right;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    background: #eee; 
    padding: 15px 25px;
}
#description_wrapper .nav a:first-child {
    margin-right: 0px;
}
#description_wrapper .nav a:hover {
    background: #fff; 
}
#description_wrapper .nav a:visited {
}


#comment_wrapper .header {
    position: relative;
    min-height: 20px;
    margin: 0px;
    padding: 10px 25px;
    overflow:auto;
    width:910px;
    border-bottom: 1px solid #ddd;
    background: #6d84b4; 
}
#comment_wrapper.hassidenav .header,
#comment_wrapper.hassidenav .section {
    width: 708px;
}   
#comment_wrapper .header h3 {
    float: left;
    display: block;
    margin: 0px;
    padding: 12px 0 0 10px;
    line-height: 0em;
    font-weight: bold;
    color: #fff;
}

#comment_wrapper .header a {
    color: #bfccec;
}
#comment_wrapper .header a:hover {
    color: #fff;
}
#comment_wrapper .header a:visited {
    color: #bfccec;
}

#comment_wrapper .header .facebook_logo {
	float: left;
    display: inline-block;
    height: 25px;
    width: 25px;
}
#comment_wrapper .header .facebook_logo a {
    float: left;
    display: block;
    height: 25px;
    width: 25px;
    background-position: 0px 0px;
    background-image: url('/images/icon_facebook_25.png');
    background-repeat: no-repeat;
    text-indent: -9999px; /* to hide text */
}
#comment_wrapper .facebook_logo a:hover {
    opacity:0.5;
    filter:alpha(opacity=50);
}
    
    
#description_wrapper .third_width {
    float:left;
    width:225px;
    position:relative;
    margin:10px 10px 10px 0;
    /*border: 1px solid #ddd;*/
}

#description_wrapper .third_width h3 {
    font-size:13px;
    margin:0px;
    font-weight:bold;
}

#description_wrapper .third_width p {
    font-size:11px;
    margin-top:0.5em;
}


   
.sectionall {
    position: relative;
    min-height: 50px;
    margin: 10px 0px;
    padding: 0px;
    /*max-width: 960px;
    background-image: url('/images/section_bg_full.jpg');
    background-position: center top;
    background-repeat: no-repeat;*/
    overflow:auto;
}
.sectionall h3 {
    font-style: italic;
    margin:20px 0px;
}


/* ------ Horizontal Rule ------ */
div.horizontal_rule {
    height: 1px;
    width: 100%;
    float:left;
    margin: 0;
    background: #e9e9e9; /* Fallback for non supported browsers */
    background: -moz-linear-gradient(left, #eeeeee 0%, #e9e9e9 30%, #e9e9e9 70%, #eeeeee 100%);
    background: -webkit-linear-gradient(left, #eeeeee 0%, #e9e9e9 30%, #e9e9e9 70%, #eeeeee 100%);
    overflow: hidden; /* fixes ie6 lameness */
}


/* ------ In other page ------ */
#wrapper_other_page {
    margin: 20px 0;
}

#logo_other_page{
    position:absolute;
    right: 10px;
    top: 2px;
    z-index: 10;
}
    
/* ------ List Item ------ */

    
div.list_item {
    float:left;
    background-color:White; 
    /*border:1px solid #ddd; */
    width: 200px;
    height: 200px;
    margin: 0 30px 30px 0;
    padding: 8px;
}

.freshideas div.list_item {
    margin: 0 24px 30px 0;
}
    
#wrapper_other_page div.list_item  {
    margin: 0 9px 10px 0;
}

div.list_item .inner {
    display: block;
    overflow: hidden;
    padding:5px; 
    height: 165px;
    width: 190px;
    color: #666 !important;
    text-decoration:none !important;
    text-indent: -9999px;
    background-repeat: no-repeat;
    z-index: 10;
}

div.list_item .inner:hover,
div.list_item .inner_hover {
    text-indent: -0px;
    background-position: -9999px;
}
        
div.list_item .inner_img {
    display: block;
    position:absolute;
    background-color:#ddd;
    padding:5px; 
    height: 165px;
    width: 190px;
    background-repeat: no-repeat;
    z-index: 8;
    
    opacity: 1;
    transition: opacity .25s   ease-in;
    -moz-transition: opacity .25s ease-in;
    -webkit-transition: opacity .25s ease-in;
}
div.list_item .inner_img:hover {
    opacity: 0.15;
    filter: alpha(opacity=15);
}


div.list_item .inner .title {
    display: block;
    margin: 5px 5px 0 5px;
    color: #111 !important;
    font-size: 15px;
    line-height: 1.5em;
    text-decoration:none;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: clip; 
}

div.list_item .inner:has(.description) .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: clip;
}

div.list_item .inner .description {
    display: block;
    margin: 5px 5px 0 5px;
    color: #333 !important;
    font-size: 12px;
    line-height: 1.5em;
    text-decoration:none;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: clip;
}

div.list_item .inner .title + .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: clip;
}
  
div.list_item .date {
    margin: 8px 0 0 0;
    float: right;
    color: #999 !important;
    font-size: 11px;
    line-height: 1.5em;
    text-decoration:none;
}

div.list_item .name {
    display: block;
    margin: 5px 0 0 0;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
} 
div.list_item a .name {
    color: #000000 !important;
    text-decoration:none;
}
div.list_item a:hover .name  {
    color: #666 !important;
    text-decoration:none;
}
div.list_item a:hover {
    text-decoration:none;
}
div.list_item a:hover .name {  
    color: red !important;
    text-decoration:underline;
}

    

div.list_item.main_cat {
    width: 334px;
    height: 300px;
}
div.list_item.main_cat .inner {
    height: 265px;
    width: 290px;
}
div.list_item.main_cat .inner_img {
    width: 300px;
    height: 263px;
    background-color:#fff;
    background-size: 100%;
   
}
div.list_item.main_cat .name {
    font-size: 16px;
    font-weight:bold;
} 
    


div.column_1 {
    float: left;
    width: 225px; /* width of left column */
}

div.column_2 {
    float: left;
    width: 510px;
}
    
div.column_all {
    padding-right: 15px;
}
div.column_all.logo {
    padding-right: 220px;
}



/* ------ Thumbnail Image ------ */

a.thumbnail {
    display: block;
    position: relative; 
    width: 200px;
    height: 120px;
    margin-top: 10px;
    
    -moz-border-radius: 5px;
    border-radius: 5px; /* Box-shadow */
    
    border: 1px solid #ddd;
    
    box-shadow: inset 0 0  3px #eee;  
}

a.thumbnail.square {
    width: 190px;
    height: 190px;
}

a.thumbnail:hover {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ddd; 
}

       
a.thumbnail span {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    
    border: 1px solid white;
    height: 100%;
    width: 100%;
    
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.desktop-flex {
    display: flex;
}



/* MOBILE SITE */
@media screen and (max-width: 960px) {

    .desktop-flex {
        display: block;
    }

    html.me-site-blog #description_wrapper .section, html.me-site-blog-black #description_wrapper .section {
        padding: 0 1rem;
    }

    .mob .sectionall {
        width: auto;
    }

.mob #header_logo {
	display: none;
}
.mob div.column_all.logo {
    padding-right: 0px;
}

.mob #header_wrapper {
	width: auto;
	height: auto;
}
.mob #header_wrapper div.inner {
    padding: 10px;
}
.mob #header_wrapper .logo {
	width: auto;
}

.mob #hero_wrapper {
	width: auto;
	height: auto;
	max-width: 580px;
	border-left: none;
	margin-left: auto;
	margin-right: auto;
    overflow: auto;
    box-shadow: none;
    float: none;
}



.mob #description_wrapper, 
.mob #comment_wrapper {
	width: auto;
	clear: both;
}
.mob #description_wrapper .section, 
.mob #comment_wrapper .section {
	width: auto;
	padding: 20px 10px;
}

.mob #description_wrapper .nav {
	min-height: 30px;
}
.mob #description_wrapper .nav a {
	padding: 15px 10px;
}
.mob #description_wrapper .nav span.date {
	padding: 17px 0px 0px 8px;
}

.mob #comment_wrapper .header {
	width: auto;
	padding: 10px;
}
.mob #comment_wrapper .header h3 {
	float: none;
	margin-left: 40px;
	line-height: 1em;
	padding: 0px;
	
}

}