/****************************
 Body
****************************/
    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }
    
    .container {
        width: 100%;
    }
    
    div.clear { clear: both; }
	
	
	/* clear google remarketing conversion code */
	iframe[name="google_conversion_frame"] { display: none; }
    
    /* used by javascript to track breakpoints */
    .breakpoint-1 { display: none; }
    @media (max-width: 1140px) {
        .breakpoint-1 { display: block; }
    }
    
    @media (max-width: 1140px) {
        html, body { border-top: 0px none; }
        .container { min-width: 300px; }
    }
    


/****************************
 Header
****************************/
	.header {
        width: 100%;
		margin: 0;
        background-color: #fff;
        border-top: 5px solid #818181;
	}
	.header-inner {
        width: 1100px;
		margin: 0 auto;
	}
    
    /* utility */
    .header-utility {}
    .header-utility a {
        display: block;
        float: right;
        margin-left: 1px;
        padding: 5px 20px 5px 40px;
        color: #fff;
        font-size: 14px;
        font-weight: normal;
        text-transform: uppercase;
        font-family: 'Function Pro Medium', sans-serif;
        background-color: #ccc;
        background-position: 15px 7px;
        background-repeat: no-repeat;
    }
    .header-utility a:hover {
        text-decoration: none;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    a.utility-pledge {
        padding: 5px 15px 5px 15px;
        font-size: 16px;
        font-family: 'Function Pro Bold', sans-serif;
        background-color: #fff;
        background-position: left bottom;
        background-repeat: repeat-x;
        background-image: url('/images/bg-utility-pledge.png');
    }
    a.utility-contact {
        background-image: url('/images/bg-utility-contact.png');
    }
    a.utility-schedules {
        background-image: url('/images/bg-utility-schedules.png');
    }
    a.utility-listen {
        background-image: url('/images/bg-utility-listen.png');
    }
    
    
    .header-middle {
        margin-bottom: 30px;
    }
    
    /* logo */
    .header-logo {
        float: left;
        width: 190px;
        height: 80px;
    }
    .header-logo img {
        max-width: 100%;
        max-height: 100%;
    }
    
    /* join now */
    a.header-join-now {
        float: left;
        display: block;
        margin-left: 30px;
        padding: 20px 15px 10px 30px;
        color: #818181;
        font-size: 20px;
        line-height: 24px;
        font-weight: normal;
        font-family: 'Function Pro Bold', sans-serif;
        border-left: 1px solid #e9e9e9;
    } 
    a.header-join-now:hover {
        color: #4e8abe;
        text-decoration: none;
    }
    
    /* weather */
    .header-weather {
        float: right;
        margin-top: 20px;
    }
    .header-weather-icon {
        float: left;
        width: 50px;
        height: 50px;
    }
    .header-weather-degrees {
        margin-left: 60px;
        color: #4e8abe;
        font-size: 30px;
        line-height: 30px;  
        font-weight: normal;
        font-family: 'Function Pro Bold', sans-serif;
    }
    .header-weather-description {
        width: 110px;
        height: 25px;
        margin-left: 60px;
        color: #818181;
        font-size: 12px;
        font-weight: normal;
        text-transform: uppercase;
        font-family: 'Function Pro Medium', sans-serif;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    /* search */
    .header-search {
        position: relative;
        float: right;
        width: 300px;
        margin-top: 20px;
        margin-left: 40px;
    }
    .header-search input[type="text"] {
        width: 100%;
        padding: 12px;
        padding-right: 60px;
        font-size: 16px;
        border: 1px solid #ccc;
    }
    .header-search input[type="submit"] {
        position: absolute;
        top: 1px;
        right: 1px;
        width: 50px;
        margin-left: -50px;
        text-indent: -9999px;
        padding: 12px;
        font-size: 16px;
        border: 0px none;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        background-image: url('/images/search-button.png');
    }
    .header-search input[type="submit"]:hover {
        background-color: #eee;
    }
    
    
    @media (max-width: 1140px) {
        .header-inner { width: 96%; }
        .header-weather { display: none; }
    }

    @media (max-width: 850px) {
        .header-inner { width: 100%; }
        
        /* utility navigation */
        .header-utility {
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }
        a.utility-contact { display: none; }
        a.utility-schedules { display: none; }
        a.utility-listen {
            padding: 5px 10px 5px 0;
            color: #818181;
            font-size: 13px;
            background-image: none;
            background-color: #fff;
        }
        a.utility-pledge {
            padding: 5px 10px;
            font-size: 13px;
            background-image: none;
            background-color: #e1722f;
        }        
        .header-middle { margin-bottom: 10px; }
        
        /* logo */
        .header-logo {
            width: 70px;
            height: 30px;
            margin: 0 auto;
            padding-top: 10px;
        }
        
        /* join now */
        a.header-join-now  { display: none; }
        
        /* search */
        .header-search { display: none; }
        .js .main-navigation .header-search {
            display: block;
            float: none;
            width: auto;
            margin: 0;
            padding: 10px;
        }
        .js .main-navigation .header-search input[type="submit"] {
            top: 11px;
            right: 11px;
        }
    }



/****************************
 Main Navigation
****************************/
	.main-navigation {
        margin-bottom: 10px;
        font-weight: normal;
        text-transform: uppercase;
        font-family: 'Function Pro Demi', sans-serif;
    }
	.main-navigation ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		list-style-image: none;
	}
	.main-navigation li {
        position: relative;
		float: left;
		padding: 0px;
        margin-right: 20px;
	}
	.main-navigation li a {
		display: block;
		padding: 10px 15px;
        margin-left: -15px;
        color: #818181;
        font-size: 16px;
        line-height: 16px;
	}
    .main-navigation li a:hover,
    .main-navigation li a.active {
        color: #4e8abe;
		text-decoration: none;
	}
    
    /* run-time arrow */
	.main-navigation li a.active:after {
		content: " ";
		display: block;
		float: left;
		width: 0;
		height: 0;
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: -22px;
        border-top: 15px solid transparent;
		border-bottom: 15px solid #4e8abe;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
	}
    .main-navigation.heap1 li a.active:after { border-bottom: 15px solid #d9531e; }
    .main-navigation.heap2 li a.active:after { border-bottom: 15px solid #f5aa01; }
    .main-navigation.heap3 li a.active:after { border-bottom: 15px solid #afbd20; }
    .main-navigation.heap4 li a.active:after { border-bottom: 15px solid #e17340; }
    
    
    @media (max-width: 1140px) {
        .main-navigation ul { text-align: center; }
        .main-navigation li {
            float: none;
            display: inline-block;
            margin: 0 10px;
        }
        .main-navigation li a.active:after { display: none; }
    }



/****************************
 Middle
****************************/
	.middle {
		width: 100%;
        padding-bottom: 40px;
        background-color: #fff;
	}
	
	.content-upper {
		width: 1100px;
		margin: 0 auto;
	}
	.content-middle {
		width: 1100px;
		margin: 0 auto;
	}
	.content-lower {
		width: 1100px;
		margin: 0 auto;
	}
	
	
	/* content middle */
	.content {
		float: left;
		width: 1100px;
	}
	.layout2 .content {
		width: 750px;
	}
	
	.rightside {
		float: right;
		width: 320px;
	}
	.layout1 .rightside {
		display: none;
	}
	
	
	/* restrict ckeditor embedded image size */
	.page-content img {
        max-width: 1100px;
    }
	.layout2 .page-content img {
        max-width: 750px;
    }
	.block-content img {
        max-width: 320px;
    }
    
    
    @media (max-width: 1140px) {
        .content-upper { width: 96%; }
        .content-middle { width: 96%; }
        .content-lower { width: 96%; }
        
        /* content middle */
        .content { width: 100%; }
        .layout2 .content { width: 68.181818%; }
        .rightside { width: 29.090909%; }
        
        /* restrict ckeditor embedded image size */
        .page-content img { max-width: 100% !important; }
        .layout2 .page-content img { max-width: 100% !important; }
        .block-content img { max-width: 100% !important; }
        
        /* restrict ckeditor embedded table size */
        .page-content table { width:  100% !important; }
    }

    @media (max-width: 900px) {
        /* content middle */
        .content-middle { width: 100%; }
        .content {
            float: none;
            width: 96%;
            margin: 0 auto;
        }
        .layout2 .content {
            width: 96%;
        }
        
        .rightside {
            float: none;
            width: 96%;
            margin: 0 auto;
        }
        .rightside .block {
            float: left;
            width: 46%;
            margin-left: 2%;
            margin-right: 2%;
        }
        .rightside .block:nth-child(2n + 1) {
            clear: left;
        }
    }
    
    @media (max-width: 900px) {
        .rightside-blocks {
            margin-top: 40px;
            padding-top: 40px;
            border-top: 5px solid #e9e9e9;
        }
    }
    
    @media (max-width: 580px) {
        .content-upper { width: 92%; }
        .content-lower { width: 92%; }
        .content { width: 92%; }
        .layout2 .content { width: 92%; }
        .rightside { width: 92%; }
        
        .rightside .block {
            float: none;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }
    }



/****************************
 Footer
****************************/
    .footer {
        width: 100%;
        background-color: #414141;
    }
	.footer-inner {
        width: 1100px;
		margin: 0 auto;
		padding: 20px 0;
	}
    
    /* navigation */
    .footer-navigation {
        margin-bottom: 20px;
        color: #999;
        font-size: 12px;
        font-weight: normal;
        font-family: 'Function Pro Medium', sans-serif;
    }
    .footer-navigation a {
        color: #999;
        text-transform: uppercase;
    }
    .footer-navigation a:hover {
        color: #fff;
    }
    .footer-navigation-1 {
        width: 48%;
        float: left;
    }
    .footer-navigation-2 {
        width: 48%;
        float: right;
        text-align: right;
    }
    
    .footer-navigation ul {
        list-style: none;
        padding: 0;
    }
    .footer-navigation-1 li {
        float: left;
        line-height: 1;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid #999;
    }
    .footer-navigation-1 li:first-child {
        margin-left: 0;
        padding-left: 0;
        border-left: 0px none;
    }
    .footer-navigation-2 li {
        float: right;
        line-height: 1;
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px solid #999;
    }
    .footer-navigation-2 li:first-child {
        margin-right: 0;
        padding-right: 0;
        border-right: 0px none;
    }
    
    /* footer text */
    .footer-text {
        float: left;
        clear: left;
        width: 50%;
        color: #999;
        font-size: 12px;
    }
    .footer-text a {
        color: #999;
    }
    .footer-text-social {
        margin-bottom: 10px;
    }
    .footer-text-social img {
        margin: 5px 2px;
    }
    
    /* footer credit */
    .footer-credit {
        float: right;
        width: 45%;
        color: #999;
        font-size: 12px;
    }
    .footer-credit a {
        color: #999;
    }
    .footer-credit-logos {
        float: right;
    }
    .footer-credit-link {
        float: right;
        width: 80px;
        margin-left: 20px;
        text-align: center;
    }
    
    
    @media (max-width: 1140px) {
        .footer-inner { width: 96%; }
    }
    
    @media (max-width: 740px) {
        .footer-navigation {
            margin-bottom: 10px;
        }
        .footer-navigation-1 li,
        .footer-navigation-2 li {
            float: none;
            margin: 0;
            padding: 0;
            font-size: 16px;
            line-height: 2;
            border: 0px none;
        }
        .footer-navigation-2 li {
            text-align: right;
        }
        
        .footer-text,
        .footer-credit {
            float: none;
            width: 100%;
        }
        .footer-text {
            margin-bottom: 20px;
            font-size: 14px;
        }
        .footer-text-social {
            float: none;
            margin: 0 10px 10px 0;
        }
        .footer-credit-logos {
            float: left;
        }
    }
    
    @media (max-width: 580px) {
        .footer-inner {
            padding-bottom: 80px;
        }
    }
    



/****************************
 Side Navigation
****************************/
    .side-navigation {
        margin-bottom: 40px;
        font-size: 16px;
        font-family: 'Function Pro Demi', sans-serif;
    }
    .side-navigation ul {
        padding: 0px;
		margin: 0px;
        list-style: none;
		list-style-image: none;
    }
	.side-navigation li {
        padding: 1px 0;
    }
    .side-navigation li.tier1 {
        padding-left: 0;
    }
	.side-navigation li a {
		display: block;
		padding: 10px 15px;
		color: #fff;
		text-transform: uppercase;
		background-color: #818181;
	}
	.side-navigation li a:hover {
		background-color: #999;
		text-decoration: none;
	}
	.side-navigation li a.active {
		text-decoration: none;
		background-color: #4e8abe;
	}
	
	.side-navigation ul.tier2 {
		border: 1px solid #e9e9e9;
		border-top: 0px none;
	}
	.side-navigation li.tier2 a {
		display: block;
		padding: 5px 15px;
		color: #818286;
		text-transform: uppercase;
		background-color: #fff;
	}
    .side-navigation li.tier2 a:hover,
	.side-navigation li.tier2 a.active {
		color: #4e8abe;
	}
    .side-navigation .tier2 ul { margin-left: 20px; }
	
	/* run-time arrow */
	.side-navigation li.tier2 a.active:before {
		content: " "; 
		display: block; 
		float: left;
		width: 0; 
		height: 0;
		margin: 5px 0 0 -15px;
		border-top: 5px solid transparent;       
		border-bottom: 5px solid transparent;
		border-left: 5px solid #e9e9e9;
	}
    .side-navigation .tier3 li a.active:before { display: none; }
    
    
    @media (max-width: 900px) {
        .side-navigation { display: none; }
        .js .side-navigation-mobile-toggle { display: block; }
        .no-js .side-navigation-mobile { display: block; }
    }



/****************************
 Page Heading
****************************/
    .page-heading {
        width: 1100px;
        margin: 0 auto;
        margin-bottom: 20px;
        background-color: #4e8abe;
    }
    .page-heading-inner {
        position: relative;
        padding: 10px;
        color: #fff;
    }
    .page-heading-inner a {
        color: #fff;
    }
    .heap1 .page-heading-inner {
        background-color: #4e8abe;
    }
    .heap1 .page-heading-inner { background-color: #d9531e; }
    .heap2 .page-heading-inner { background-color: #f5aa01; }
    .heap3 .page-heading-inner { background-color: #afbd20; }
    .heap4 .page-heading-inner { background-color: #e17340; }
    .page-heading h1 {
        margin: 0px;
        font-size: 20px;
        line-height: 20px;
        text-transform: uppercase;
    }
    
    .side-navigation-mobile-toggle {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: right;
        background-image: url('/images/bg-mobile-side-nav-arrow.png');
    }
    .side-navigation-mobile-toggle:hover {
        background-color: rgba(255,255,255,0.5);
    }
    
    
    @media (max-width: 1140px) {
        .page-heading { width: 100%; }
    }



/****************************
 Mobile Side Navigation
****************************/
    .side-navigation-mobile-container {
        display: none;
    }
    .side-navigation-mobile {
        display: none;
        font-size: 16px;
        font-family: 'Function Pro Demi', sans-serif;
    }
    .side-navigation-mobile ul {
        padding: 0px;
		margin: 0px;
        list-style: none;
		list-style-image: none;
    }
	.side-navigation-mobile li {
        padding: 0;
        border-top: 1px solid #fff;
    }
    .side-navigation-mobile li a {
		display: block;
		padding: 10px 15px;
		color: #fff;
		text-transform: uppercase;
	}
    .side-navigation-mobile li a:hover {
        text-decoration: none;
        background-color: #6b99c0;
    }
    .side-navigation-mobile li a.active { background-color: #7a9fbe; }
    
    .side-navigation-mobile li.tier1 a { padding-left: 25px; }
    .side-navigation-mobile li.tier2 a { padding-left: 45px; }
    .side-navigation-mobile li.tier3 a { padding-left: 65px; }
    .side-navigation-mobile li.tier4 a { padding-left: 85px; }
    
    .side-navigation-mobile ul.tier2 {
        font-size: 14px;
        background-color: #7a9fbe;
	}
    .side-navigation-mobile ul.tier2 li {
        padding: 0;
        border-top: 1px solid #e9e9e9;
    }
    
    /* run-time arrow */
	.side-navigation-mobile li a.active:before {
		content: " "; 
		display: block; 
		float: left;
		width: 0; 
		height: 0;
		margin: 5px 0 0 -15px;
		border-top: 5px solid transparent;       
		border-bottom: 5px solid transparent;
		border-left: 5px solid #e9e9e9;
	}
    
    
    @media (max-width: 900px) {
        .side-navigation-mobile-container { display: block; }
    }



/****************************
 Scroll to Top
****************************/
    .scroll-to-top {
        display: none;
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        z-index: 1000;
    }
    .scroll-to-top a {
        display: block;
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
           -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
                box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
        background-color: #4e8abe;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('/images/scroll-to-top.png');
    }
    
    @media (max-width: 580px) {
        .scroll-to-top { display: block; }
    }



/****************************
 Off-Canvas Column
****************************/
    .off-canvas-button {
        display: none;
        float: left;
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-right: 10px;
        padding-top: 5px;
        background-color: #818181;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('/images/main-navigation.png');
    }
    .off-canvas-column {
        display: none;
        position: absolute;
        top: 0;
        left: -70%;
        z-index: 1001;
        width: 70%;
    }
    .off-canvas-column-background {
        display: none;
        position: fixed;
        top: 0;
        left: -70%;
        z-index: 1000;
        width: 70%;
        height: 130%;
        background-color: #fff;
    }
    
    /* search */
    .off-canvas-column-search { padding: 10px; }
    .off-canvas-column-search .header-search {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
    }
    
    /* utility navigation */
    .off-canvas-column-utility a {
		display: block;
		padding: 15px 10px;
        margin-left: 0;
        color: #818181;
        font-size: 14px;
        line-height: 14px;
        text-transform: uppercase;
        text-align: right;
        font-family: 'Function Pro Medium', sans-serif;
    }
    
    /* main navigation */
    .off-canvas-column-navigation ul {
        padding: 0;
        list-style: none;
        border-top: 1px solid #ccc;
    }
    .off-canvas-column-navigation li {
		float: none;
        margin-right: 0;
	}
    .off-canvas-column-navigation li a {
		display: block;
		padding: 20px 10px;
        margin-left: 0;
        color: #818181;
        font-size: 14px;
        line-height: 14px;
        font-weight: normal;
        text-transform: uppercase;
        font-family: 'Function Pro Bold', sans-serif;
        border-bottom: 1px solid #ccc;
	}
    .off-canvas-column-navigation li a.active {
        color: #fff;
        background-color: #818181;
    }
    .off-canvas-column-navigation li a:hover {
        color: #fff;
        text-decoration: none;
        background-color: #ccc;
    }
    
    
    @media (max-width: 850px) {
        /* hide main navigation */
        .js .main-navigation li { display:none; }
        
        /* ready page elements */
        .js .container {
            position: relative;
            top: 0;
            left: 0%;
        }
        .js .off-canvas-button { display: block; }
        .js .off-canvas-column { display: block; }
        .js .off-canvas-column-background { display: block; }
        
        /* show off-canvas column */
        html.show-off-canvas {
            overflow-x: hidden;
            background-color: #414141;
        }
        .show-off-canvas body { overflow-x: hidden; }
        .show-off-canvas .container { left: 70%; }
        .show-off-canvas .off-canvas-column { left: 0%; }
        .show-off-canvas .off-canvas-column-background {
            -webkit-box-shadow: 0 0 10px #414141;
               -moz-box-shadow: 0 0 10px #414141;
                    box-shadow: 0 0 10px #414141;
            left: 0%;
        }
    }