/*
 *	/----------------------------------------------------------------/
 *		New styles for Water saving tips.
 *		I've created a new stylesheet to avoid overwriting of styles.
 *	/--------------------------------------------------------------- /
 */

    /*
 * FONT STYLES
 */




    /*
 *	RANDOM STYLES
 */

.title-section,
.search-filter-wrap {
    border-bottom: 1px solid #e6e6e6;
}

.title-section {
    padding-bottom: 2em;
    margin-bottom: 2em;
}

    .title-section .back-button,
    .title-section .forward-button {
        margin-bottom: 0;
    }





/*
*	FILTER BOX - Search filters
*/
.filter-box {
    background: #f5f5f5;
    border: 1px solid #ebebeb;
    padding: 1em;
    position: relative;
    z-index: 20;
}

    .filter-box .input.text {
        margin-bottom: 0;
    }

    .filter-box .input.select {
        margin-bottom: 2px;
    }

.filter-separator-text {
    margin-top: 20px;
    font-size: 1.5em;
    text-align: center;
}

.filter-box-label {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 0 0 .4em 0;
    font-size: 1em;
}

.filter-box-title {
    margin: 1.2em 0 .8em;
    font-size: 1.2em;
}

.filter-box-padding-left {
    padding-left: 2em;
}

.filter-box-no-left-pad {
    padding-left: 0;
}




/*
*	INLINE BLOCK COLUMNS - Used in .filter-box
*/
.ib-col {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

    .ib-col + .ib-col {
        margin-left: -3px;
    }

.ib-col-align-bottom .ib-col {
    vertical-align: bottom;
}

.ib-col-wrap-12 {
    white-space: nowrap;
}

    .ib-col-wrap-12 .ib-col-span-1 {
        width: 8.333%;
    }

    .ib-col-wrap-12 .ib-col-span-2 {
        width: 16.666%;
    }

    .ib-col-wrap-12 .ib-col-span-3 {
        width: 25%;
    }

    .ib-col-wrap-12 .ib-col-span-4 {
        width: 33.333%;
    }

    .ib-col-wrap-12 .ib-col-span-5 {
        width: 41.666%;
    }

    .ib-col-wrap-12 .ib-col-span-6 {
        width: 50%;
    }

    .ib-col-wrap-12 .ib-col-span-7 {
        width: 58.333%;
    }

    .ib-col-wrap-12 .ib-col-span-8 {
        width: 66.666%;
    }

    .ib-col-wrap-12 .ib-col-span-9 {
        width: 75%;
    }

    .ib-col-wrap-12 .ib-col-span-10 {
        width: 83.333%;
    }

    .ib-col-wrap-12 .ib-col-span-11 {
        width: 91.666%;
    }




/*
*	HEADING CLASSES - These use the style for the actual <hx> elements
*/

.heading-1 {
    font-size: 4em;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0 0 0.67em 0;
    color: #0072AA;
}

.heading-2 {
    font-size: 2.4em;
    font-weight: 400;
    color: #0072AA;
}

.heading-3 {
    font-size: 2.0em;
    font-weight: 300;
    color: #0072AA;
}




/*
* NEW LIST STYLE - LISTS WITH WATERDROP
*/

.list-1,
.content .list-1 {
    list-style: none;
    margin: 1em 0;
    padding: 0;
    font-size: 1em;
}

    .list-1 li {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .list-1 p {
        margin: 0.5em 0;
    }

    .list-1 .list-icon {
        float: left;
        display: block;
        height: 25px;
        width: 18px;
        background: url('/img/graphics/list-icon-1.png') no-repeat center transparent;
        margin: 4px 0 0 15px;
    }

    .list-1 .list-title {
        color: #174390;
        font-size: 1.333em;
        margin: 0;
    }

        .list-1 .list-title a {
            color: #174390;
        }

        .list-1 .list-title,
        .list-1 .list-title a {
            font-family: Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
        }

    .list-1 .list-body {
        margin: 1em 0 1em 50px;
        *margin-top: 0;
    }

.water-saving-tips .yellow-button {
    margin-top: 20px;
}

@media /*! YUI fix */ (max-width: 767px) {
    .filter-separator-text {
        margin: 0;
        font-size: 1.2em;
    }

    .water-saving-tips .yellow-button {
        margin-top: 0px;
    }

    .water-saving-tips .yellow-button,
    .yellow-button.keyword,
    .view-all.button-div .yellow-button {
        width: 100%;
    }

    .view-all.button-div .yellow-button {
        margin-bottom: 20px;
    }

    .list-1 .list-icon {
        margin: 0px;
    }

    .list-1 .list-body {
        margin: 1em 0 1em 30px;
    }
}