/* USED BY THE .NET OEC TO SKIN IT */
/* This css style sheet can be customized to override the default styles of the OEC.
    @media queries can be included to target specific viewport sizes
*/

/* DEFAULT TEXT ATTRIBUTES */
/* The default text attributes can be customized:
- font-family
- font-size
- line-height
- weight, color, etc.
    */

@import url(//fonts.googleapis.com/css?family=Spinnaker:regular|);

html {
}
body {
}

/* THE HEADER AND NAVIGATION BAR */
/* The elements that can be styled include:
- banner background color, and/or background image; 
- height of the banner
- logo image
- text attributes (color, size, etc) of the navigation links
 */
.navbar-fixed-top {
    background-color: #0077c7;
    max-height: 100px;
    border-bottom: none;
    box-shadow: none;
}
.nav > li > a {
    color: #ffffff;
    font-family: "Spinnaker", Arial, sans-serif;
    text-transform: uppercase;
    padding: 15px 10px;
    font-weight: normal;
}
.navbar-collapse {
    background-color: #0077c7;
}
.navbar-brand {
    max-height: 100px;
    /*background: url(CityOfDayton-logo.png) left top no-repeat;
    background-size: 100% auto;
	padding-left: 7em !important;
	height: 100%;
	min-height: 75px;
    width: 165px;*/
}
.ContentWrapper {
    margin-top: 6em; /* MUST ACCOUNT FOR THE NAVBAR-BRAND HEIGHT */
    background: transparent url(/DaytonOhio/_skin/CityofDayton-logo.png) no-repeat 1em top;
    padding-top: 90px;
}
#ClassspecNotify.ContentWrapper, #ClassspecUnsubscribe.ContentWrapper {
    background-image: none !important;
    margin-top: 0;
    padding-top: 0;
}
/* HTML BLOCK LEVEL ELEMENTS THAT CAN BE STYLED */
h1 {
    color: #0033A0;
}
h2 {
    color: #0033A0;
}
h3 {
    color: #0033A0;
}
h4 {
    color: #0033A0;
}
h5 {}
h6 {}
p {}
pre {}
blockquote {}
ul {}
ol {}


#JobsListing h2, .PanelCard.QuickLinks h2, #ListingPanelSpecial h2, .ListingPanel h2 {
    background-color: #0033A0 !important;
    font-family: "Spinnaker", Arial, sans-serif;
    text-transform: uppercase;
    font-weight: normal !important;
}
#QuickLinksSection, .ListingPanel, #ListingPanelSpecial {
    background-color: transparent !important;
}
    .ListingPanel .CardTitle {
        background-color: #0077c7;
    }
    .JobListing tr.ColumnHeader, .JobListingSpecial tr.ColumnHeader, .ListingPanel .JobListing tr.ColumnHeader th {
        background-color: #0077c7;
    }

.JobListing .IconNew, .IconNew {
    background-image: url(../graphics/newIcon.png);
    background-repeat: no-repeat;
    background-position: 50% -1em;
    padding-top: 1.1em;
}
@media only screen and (max-width: 650px) {

    .navbar-collapse {
        background-color: #00A3E0;
    }

    .ContentWrapper {
        background: transparent url(/DaytonOhio/_skin/CityofDayton-logo.png) no-repeat center 0.5em;
    }
}

/*
TABLES
Tables can have these attributes applied:
- borders
- column/row TH elements colors
- cell padding
- font attributes
- alternating row color
*/


/* FOOTER */
/* The footer can be customized for:
 background color
- padding
- alignment
- font attributes
*/
#footer {
    padding-top: 0px;
    color: #fff;
    margin: 0 auto !important;
    width: auto;
    padding-bottom: 1em;
    font-family: 'Spinnaker', Arial, sans-serif;
    background-color: #414042;
}
#OECFooter {
    text-align: left;
    padding: .5em;
    color: #fff;
    max-width: auto;
    margin: 0 auto;
    background: #414042 url(/DaytonOhio/_skin/images/footer-seal.png) left center no-repeat;
    margin: 1em;
    min-height: 220px;
    padding-top: 2em;
    box-shadow: none;
}
    #OECFooter .notes span {
        display: inline-block;
        border-right: 1px solid #fff;
        padding: 0em 0.5em 0em 0em;
        margin-right: 0.5em
    }

        #OECFooter .notes span:first-child {
            padding-left: 0em;
        }

#OECFooter .notes span:last-child {
    border-right: none;
}

    #OECFooter .footer p {
        text-align: left;
    }
#footer p {
    margin-left: 200px;
}
#footer .social-icons {
    float: right;
    margin-top: 2em;
}

@media only screen and (max-width: 648px) {
    #OECFooter .footer  p {
        margin-left: 0px;
        text-align: center;
    }

    #footer .social-icons {
        float: none;
    }
    #OECFooter .notes span {
        display: block;
        border-right: none;
    }
    #OECFooter {
        background-image:none;
    }
    .social-icons-wrapper{
        text-align: center;
    }
    #footer .social-icons {
        width: 80%;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 1em;
    }


}
