@import url("//fonts.googleapis.com/css?family=Oswald:300,400,700");

body {
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #000;
}

    .img-responsive {
        display: inline-block !important;
    }

    .white-text {
        color: #fff !important;
    }

/** header styles **/

.header {
    -o-box-shadow: 0 0 5px 5px #333;
    -moz-box-shadow: 0 0 5px 5px #333;
    -webkit-box-shadow: 0 0 5px 5px #333;
    box-shadow: 0 0 5px 5px #333;
    /*position: relative;*/
    position: fixed;
    width: 100%;
    z-index: 999;
}

    .header-top .container,
    .header-bottom .container {
        position: relative;
    }

    .header-top {
        background: #000;
        text-align: right;
    }

        .header-top ul {
            margin: 0;
            padding: 0;
        }

        .header-top li {
            display: inline-block;
            text-transform: uppercase;
            font-size: 12px;
            font-family: "Oswald", sans-serif;
        }

        .header-top a {
            color: #fff;
            text-decoration: none;
            padding: 15px;
            display: inline-block;
        }

        .header-top a:hover {
            color: #0091d9;
        }

        .header-top .search-txt {
            border: 0;
            width: 160px;
            padding-left: 5px;
            padding-right: 5px;
            font-family: arial !important;
        }

        .header-top .search-btn {
            background: url("../img/search-btn-icon.jpg") no-repeat top left;
            width: 20px;
            height: 20px;
            border: 0;
            top: 7px;
            position: relative;
        }

        .logo-top {
            position: absolute;
            top: 15px;
            left: 35px;
            color: #ec1c24;
            font-size: 14px;
            line-height: 14px;
            text-transform: uppercase;
            font-family: "Oswald", sans-serif;
        }

    .header-bottom {
        background: #fff;
        text-align: right;
    }

        .header-bottom ul {
            margin: 0;
            padding: 0;
        }

        .header-bottom li {
            display: inline-block;
            text-transform: uppercase;
            font-size: 14px;
            font-family: "Oswald", sans-serif;
        }

        .header-bottom a {
            color: #666;
            text-decoration: none;
            padding: 40px 20px 20px 20px;
            display: inline-block;
        }

        .header-bottom a.active,
        .header-bottom a:hover {
            color: #fff;
            background: #0091d9;
        }

        .sub-nav {
            display: none;
        }

        .logo-bot {
            position: absolute;
            top: 13px;
            left: 35px;
        }

        .logo-bot a {
            padding: 0;
            margin: 0;
            background: transparent !important;
        }

/** front styles **/

/** body/content styles **/

.body {
}

    .front {
    }

        .front-top {
            background: #0091d9;
            /*padding: 75px 0 75px 0;*/
            padding: 200px 0 75px 0;
            color: #fff;
        }

        .front-top .container {
            background: url("../img/home-back.png") no-repeat center;
        }

            .front-top .logo-front a,
            .front-top .logo-front a:hover {
                border: 0;
                background: transparent;
                margin: 0 0 45px 15px;
            }
            
            .logo-front {
                padding-bottom: 24px;
            }

            .front-top h1 {
                font-family: "Oswald", sans-serif;
                font-size: 33px;
                text-transform: uppercase;
                margin: 0 0 15px 0;
            }

            .front-top h2 {
                font-family: "Oswald", sans-serif;
                font-size: 33px;
                text-transform: uppercase;
                margin: 0 0 15px 0;
            }

            .front-top p {
                font-size: 22px;
            }

            /* Home page Research Roundup */
            div.small p {
                font-size: 12px !important;
            }

            .front-top .small {
                font-size: 12px;
                line-height: 16px !important;
                margin-top: 5px;
            }

            .front-top ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            .front-top li {
                font-family: "Oswald", sans-serif;
                font-size: 18px;
                text-transform: uppercase;
                margin: 0 0 15px 0;
            }

            .front-top a {
                color:  #d9edfc;
                text-decoration: none;
                border-bottom: 2px solid #d9edfc;
                display: block;
                background: url("../img/more-arrow-icon.png") no-repeat right center;
            }

            .front-top a:hover {
                border-bottom: 2px solid #0091d9;
            }

            .front-top .search-txt {
                border: 0;
                width: 200px;
                margin-right: 10px;
                color: #000;
                padding-left: 5px;
                padding-right: 5px;
            }

            .front-top .search-btn {
                background: url("../img/more-arrow-icon.png") no-repeat right center;
                width: 14px;
                height: 14px;
                border: 0;
                position: relative;
                top: 4px;
            }

        .front-bottom {
            padding: 75px 0 75px 0;
            text-align: center;
            background: url("../img/blue-arrow.png") no-repeat center -1px;
        }

            .front-bottom h3 {
                font-family: "Oswald", sans-serif;
                font-size: 24px;
                line-height: 34px;
                margin: 0 0 15px 0;
                color: #818386;
            }

            .front-bottom p {
                font-size: 12px;
                line-height: 22px;
                color: #818386;
            }

            .front-bottom .more-lnk {
                background: #0091d9 !important;
            }

    .content {
        /*padding: 75px 0 75px 0;*/
        padding: 200px 0 75px 0;
    }

        .content h1 {
            font-family: "Oswald", sans-serif;
            font-size: 33px;
            line-height: 43px;
            margin: 0 0 15px 0;
            color: #0091d9;
        }

        .content h2 {
            font-family: "Oswald", sans-serif;
            font-size: 21px;
            line-height: 31px;
            margin: 0 0 15px 0;
            color: #0091d9;
        }

        .content p.large {
            font-size: 24px;
            line-height: 34px;
            margin: 0 0 15px 0;
        }

        .content p {
            font-size: 16px;
            line-height: 26px;
        }

        .content ul {
            font-size: 16px;
            margin: 0 0 15px 0;
            padding: 0 0 0 15px;
        }

        .content li {
            line-height: 26px;
        }

        .content a {
            color: #ec1c24;
            text-decoration: none;
        }

        .content a:hover {
            text-decoration: underline;
        }

    .sidebar {
        /*padding: 75px 0 75px 0;*/
        padding: 200px 0 75px 0;
    }

        .sidebar h2 {
            font-family: "Oswald", sans-serif;
            font-style: 16px;
            line-height: 28px;
            color: #666;
            margin: 10px 0 15px 0;
            text-align: left;
        }

        .sidebar h3 {
            font-family: "Oswald", sans-serif;
            font-style: 16px;
            line-height: 28px;
            font-weight: 300;
            text-transform: uppercase;
            text-align: left;
            margin: 20px 0 15px 0;
        }

            .sidebar h3 a {
                padding: 15px;
                color: #fff;
                background: #666 url("../img/white-arrow-2.png") no-repeat 95% 50%;                
                display: block;
            }

        .sidebar ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .sidebar li {
            font-size: 14px;
            line-height: 24px;
            border-bottom: 2px solid #0091d9;
            margin-bottom: 5px;
            padding-bottom: 5px;
            text-align: left;
        }

        .sidebar img {
            margin-bottom: 15px;
        }

        .side-nav {
            background: #e5f4fb;
            padding: 15px;
            margin-top: 35px;
            text-align: left;
        }

        .side-nav a {
            color: #000;
            display: block;
            padding-right: 40px;
            background: url("../img/blue-arrow-2.png") no-repeat 95% 50%;    
        }

        .numbers {
            padding: 0px 5px;
        }

        .commissioning-nav {
            text-align: right;
            list-style-type: none;
            font-weight: 700;
        }

        .commissioning-nav li {
            font-size: 14px;
            line-height: 24px;
            border-bottom: 0px;
            margin-bottom: 5px;
            padding-bottom: 5px;
        }

        .commissioning-nav a {
            font-size: 14px;
            color: #337ab7;
            font-family: 'Arial Black', 'Avant Garde';
        }

/** footer styles **/

.footer {
}

    .footer-logo a img {
        margin-top: 42px;
        display: inline-block !important;
    }
    
    .footer-top {
        color: #fff;
        padding: 75px 0 75px 0;
        background: #0091d9 url("../img/white-arrow.png") no-repeat center -1px;
    }

        .footer-top img {
            padding: 30px 30px 0 0;
        }

        .footer-top h2 {
            font-family: "Oswald", sans-serif;
            font-size: 33px;
            line-height: 43px;
            color: #fff;
            position: relative;
            margin: 0 15px 30px 15px;
            color: #d9edfc;
        }

            .footer-top h2 span {
                position: absolute;
                top: 5px;
                right: 0;
                font-size: 18px;
                
            }

            .footer-top h2 span a {
                background: url("../img/more-arrow-icon.png") no-repeat right center;
                padding-right: 20px;
                text-decoration: none;
                color: #d9edfc;
            }

        .footer-top h3 {
            font-family: "Oswald", sans-serif;
            font-size: 18px;
            line-height: 28px;
            color: #000;
            margin: 0 0 5px 0;
        }

        .footer-top h4 {
            font-family: "Oswald", sans-serif;
            font-size: 24px;
            line-height: 34px;
            margin: 0 0 15px 0;
            color: #000;
        }

        .footer-top p {
            font-size: 12px;
        }

        .footer-top ul {
            font-size: 12px;
            margin: 0 0 5px 10px;
            padding: 0;
        }

        .footer-top li {
            line-height: 24px;
        }

        .footer-top a {
            color: #fff;
            text-decoration: none;
        }

        .footer-top a:hover {
            text-decoration: underline;
        }

    .footer-bottom {
        background: #000;
        color: #fff;
        padding: 75px 0 75px 0;
    }

        .footer-bottom h5 {
            font-family: "Oswald", sans-serif;
            font-size: 28px;
            margin: 0 0 15px 0;
            text-transform: uppercase;
            color: #818386;
        }

        .footer-bottom p {
            font-size: 16px;
            line-height: 26px;
            margin: 0 0 15px 0;
        }

        .footer-bottom .contact-cont p {
            line-height: 19px;
            font-size: 12.5px;
        }

        .footer-bottom .contact-cont small {
            font-size: 12.5px;
            margin-left: -20px;
        }

        .footer-bottom a {
            color: #ec1c24;
            text-decoration: none;
        }

        .footer-bottom a:hover {
            text-decoration: underline;
        }

        .cu-small {
            margin-top: 70px;             
        }

        .copyright {
            color: #fff;
            font-size: 12px !important;
            padding-top: 25px;
        }

        .more-lnk {
            text-transform: uppercase;
            color: #fff;
            background: #000;
            font-size: 11px;
            line-height: 11px;
            margin-top: 5px;
            padding: 5px 10px 5px 10px;
            display: inline-block;
        }

        /* DNB: added for home page mid-section buttons */
        .more-lnk:hover {
            color: #fff;
        }

/** Infographics **/

#tooltip-content {
    display: none;
}

.qtip-icon  {
    border-color: transparent !important;    
    color: #fff !important;
       
}
.ui-icon {
    opacity: 1.2 !important; 
}

.ui-icon-close {
    color: transparent !important;
    margin-top: 8px !important;
    margin-right: 15px !important;
    border-color: transparent !important;
}

.CustomClass {}

.bg-transparent {
    border: none;
    background-color: transparent;
    box-shadow: unset;
}

.bg-blue {
    background-color: #248fce; 
    color: white;   
}
.bg-orange {
    background-color: #f47e21; 
    color: white;   
}
.bg-green { 
    background-color: #3f8a41; 
    color: white;
}
.bg-yellow {
    background-color: #ffedb3; 
    color: black;
}
.bg-teal {
    background-color: #9edadf; 
    color: black;
}
.bg-darkteal {
    background-color: #00aa9d; 
    color: black;
}
.bg-red {
    background-color: #eb2227; 
    color: black;
	
}	
.bg-transred {
    background-color: #dd3f44; 
    color: white;	
}

.bg-light-blue {
    background-color: #ceebed;
    color: black;
}

.bg-blue-circle {
    background-color: #a8dbe0;
    border-radius: 125px;
    width: 250px;
    height: 250px;
    margin: 10px;
    text-align: center !important;
}

.qtip { max-width: 320px !important; }
.story .qtip-tip { right: -22px !important; opacity: .85; } 

.bg-blue-circle-large {
    background-color: #a8dbe0;
    border-radius: 50%;
    width: 320px;
    height: 320px;    
    text-align: center !important;    
}

.economic-instability {left: 20% !important;} 
.unhealthy-food{left: 40% !important;}
.transportation{left: 60% !important;}
.quality-education{left: 78% !important; }
.public-safety{left: 65% !important; top: 80% !important;}
.inadequate-parks{left: 60% !important; top: 90% !important;}
.substandard-housing {left: 20% !important;}
.story{left: 37% !important; top: 550px !important; padding: 5px 15px; } 


.CustomClass .qtip-content {
    font-family: Helvetica;
    font-weight: medium;
    font-size: 12px;
    line-height: 1.1em;
    margin-top: -20px;
}
.CustomClass h1 {
    font-family: Helvetica;
    font-weight: medium;
    font-size: 16px;
    font-weight: bold;
}
#share-wrap{  
    /* background: url("../img/tweet-icon.jpg") no-repeat top right; */
    float: right;
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 2px;
}
#twitter-share {color: #fff; opacity: 0 !important;} 



/** responsive/media styles **/

@media (min-width: 320px) and (max-width: 800px) {

.header {
    -o-box-shadow: 0 0 5px 5px #333;
    -moz-box-shadow: 0 0 5px 5px #333;
    -webkit-box-shadow: 0 0 5px 5px #333;
    box-shadow: 0 0 5px 5px #333;
    position: relative;
    z-index: 999;
}

    .header-top ul {
        padding-bottom: 15px;
    }

    .header-top li {
        text-align: left;
        display: block;
    }

    .header-top a {
        padding: 15px 2px 15px 0;
    }

    .header-bottom li {
        display: block;
        text-align: left;
    }

    .header-bottom a {
        display: block;
        padding: 15px;
    }

    .logo-bot {
        position: relative;
        text-align: left;
        left: -15px;
        top: 0;
    }

    .sidebar {
        padding-bottom: 30px;
    }

    .content {
        padding-top: 0;
    }

    .align-center {
        text-align: center;
        margin-bottom: 15px;
    }

    .copyright {
        text-align: center;
    }

    .cu-small, .footer-logo a img {
        margin-top: 15px;
        margin-bottom: 25px;
    }
    
    .search-txt {
        width: 93% !important;
    }

    .search-btn {
        top: 0;
    }
}

@media print {
    .header, .footer-top, .footer-bottom, .soc-cont, .col-lg-1, .sidebar {
        display: none;
    }
    .body { margin: 10px; }
    .container { width: 600px; }    
    .content { width: 575px; }
    .content { font-size: 12pt; }
}

.hide {
    display: none !important;
}

/* sub nav */

.primary-nav-wrap .main-nav ul li {
    border: 1px solid #666;
}

.primary-nav-wrap ul.main-nav li ul {
    display:none;
    position: absolute; 
    top:100%;
    left:auto;  
    background:#fff;
    padding:0;   
    width: 350px;
}

.primary-nav-wrap ul.main-nav ul li
{
    width:350px;   
    text-align: left !important;
}

.primary-nav-wrap ul.main-nav ul  li a
{
    line-height:120%;
    padding: 10px 0 10px 10px;
    background-color: #fff !important;
    color: #666 !important;
}

.primary-nav-wrap ul.main-nav ul  li a:hover
{
    text-decoration: underline !important;
}

.primary-nav-wrap ul.main-nav ul ul
{
    top:0;
    left:100%;
    margin-top: 0;
}

.primary-nav-wrap ul.main-nav li:hover > ul
{
    display:block
}

.red a:hover, .red-active {
    background-color: #ec1c34 !important;
    color: #fff !important;
}
.blue a:hover, .blue-active {
    background-color: #0091d9 !important;
    color: #fff !important;
}
.green a:hover, .green-active {
    background-color: #408a2d !important;
    color: #fff !important;
}
.orange a:hover, .orange-active {
    background-color: #f57d17 !important;
    color: #fff !important;
}

.sub-nav li {
    background-color: #fff !important;
}

.form-label-text {
    text-transform: uppercase;     
}

#email-form  input { 
    width: 200px; 
    margin-left: -6px;
}

.ccm-search-block-form h3 {
    display: none;
}

.soc-cont p {
    display: inline-block;
}

div.content td {
    padding: 5px;
}

.MailingListSubscribe .mailing-list-msg,
.formidable .formidable_message {   
    border: 2px solid #0091d9 !important;
    background: #dddbdb !important;    
    padding: 15px;
    border-radius: 0;
    display: none; /* error message div was displaying by default */
}
.submission p {
    font-size: 14px ;
    line-height: 18px;
}
.formidable .buttons {
    margin-left: 0; 
    padding-bottom: 20px;
}
#submit {
    border: 1px solid black !important;
    width: 73px;
    border-radius: 0 !important;
    padding: 0px 12px !important; 
    /*background: #ddd;*/
    background: #b5b2b2;
}
.formidable input[type=text], 
.formidable input[type=url], 
.formidable input[type=tel], 
.formidable input[type=number], 
.formidable input[type=email], 
.formidable textarea, .formidable select, 
.formidable input[type=password] {
    font-size: 14px !important;
    width: 200px !important;
    border-radius: 0;
    padding: 4px;
    /*margin-left: 12px;*/ /* remove the left margin from input fields */
    border: 1px solid #ccc !important;
}
.ccm-page .checkbox {    
    margin-top: 0 !important;
}
.ccm-page .checkbox input[type=checkbox], 
.checkbox-inline input[type=checkbox] {
    margin-left: 2px !important;
    position: relative;
}
.ccm-page .checkbox label {
    padding-left: 0!important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: auto !important;
    text-align: left;
}
.formidable label {
    font-size: 14px !important;
    width: auto !important;
    text-align: left;
}

.formidable .element {
    margin-bottom: 6px !important;
}

hr {
    border-top: 1px solid #d2d2d2;
}