/*-------------------------------+
 | Site: Village of River Forest |
 | Part: Master styles           |
 +-------------------------------*/

/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css?family=Lora:400,400i,700,700i|Montserrat:300,300i,400,400i,700,700i);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(/styles/reset.css);
@import url(/styles/forms.css?r=1);
@import url(/styles/we-master.css);


/* Fonts
======================================================================*/
#around, .card-type, h1, h2 { font-family: Lora, Georgia, "Times New Roman", Times, serif; }
body, input, #search-results *, select, textarea { font-family: Montserrat, Arial, sans-serif; }


/* Basics
======================================================================*/
a { color: #0068ab; text-decoration: none; }
a:hover { text-decoration: underline; }
body { background: #083754; color: #333; font-weight: 300; line-height: 1.66; }
cite, em { font-style: italic; }
dl, ol, p, table, ul { margin-bottom: 1em; }
dt { font-weight: normal; margin-top: 1em; }
dt:first-child { margin: 0; }
h1 { font-size: 2.33rem; line-height: 1.2; margin-bottom: 0.476em; }
h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h2 { font-size: 1.77rem; line-height: 1.2; margin-bottom: 0.312em; }
h3 { font-size: 1.33rem; line-height: 1.2; }
h4 { font-size: 1.2rem; line-height: 1.2; }
h5 { font-size: 1.1rem; }
h6 { font-size: 0.9rem; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 4rem 0; }
html { font-size: 18px; }
img { max-width: 100%; }
ol { list-style: decimal; margin-left: 2em; }
td { padding: 0; }
table { border-collapse: collapse; width: 100%; }
table p { margin: 0; }
ul { list-style: disc; margin-left: 1.5em; }


/* Core layout
======================================================================*/
.clear { clear: both; }
.content-primary { float: left; width: 65.83%; }
.content-secondary { float: right; width: 31.66%; }
#main { background: #fff; display: block; }


/* Content
======================================================================*/
/* Action */
.action {
    -webkit-appearance: none;
    background: #0068ab;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.125rem;
    padding: 0.5em 1em;
}

.action:hover { opacity: 0.7; text-decoration: none; }
.action a { color: #fff; text-decoration: none; }
.action:hover a { text-decoration: none; }

/* Agendas and minutes */
.agenda { list-style: none; margin-left: 0; }
.agenda .date { width: 15%; }
.agenda li { align-items: flex-start; border-bottom: 1px solid #ddd; display: flex; margin: 0; padding: 1em 0; }
.agenda .summary { width: 70%; }
.agenda .summary h3 { font-size: 1em; font-weight: normal; margin: 0; }
.agenda p { margin: 0; }

/* Announcement */
.announce { background: #fcb713; padding: 0.5em 25px; text-align: center; }
.announce a { color: #083754; }

/* Article body */
.article a { font-weight: normal; text-decoration: underline; }
.article a:hover, .article .action, .article .action a { text-decoration: none; }
.article hr { margin: 2rem 0; }

/* Calendar */
    /* Mini */
    .calendar-mini .date { margin-left: -85px; width: 75px; }
    .calendar-mini li { border: 0; margin-bottom: 1em; padding: 0 0 0 85px; }
    
    /* Monthly */
    .month a { font-weight: bold; }
    .month .fc-day { padding: 0.3em 0; }
    .month .fc-day a { display: block; }
    .month .fc-day-header { border-width: 0 0 1px; }
    .month .fc-grid .fc-day-content { display: none; }
    .month .fc-grid > table { margin-bottom: 0; }
    .month .month-nav { float: right; }
    .month .month-nav a { margin-left: 0.5em; }
    .month td, .month th { font-weight: 300; padding: 0.3em 0 0 0; text-align: center; width: 14.28%; }
    .month td.fc-state-highlight { background: none; border: 1px solid #b2b2b2; }
    .month tr.fc-state-highlight { background: #f2f2f2; }
    .month tr.fc-state-highlight .fc-other-month { background: #f8f8f8; }
    .calendar-grid .fc-grid .fc-day-number { float: none; }


/* Callouts */
[class *= "call"] { line-height: 1.3; margin-bottom: 15px; max-width: 100%; }
[class *= "call"] img { display: block; margin-bottom: 5px; }
[class *= "call"] img.icon { display: inline; }
[class *= "call"] p { margin-bottom: 0.5em; }
.call-c, .pull-c { clear: both; display: block; margin: 1em auto; }
.call-c img { margin: 0 auto; }
.call-l, .pull-l, .pull-small-l { clear: left; float: left; margin: 0 30px 10px 0; }
.call-r, .pull-r, .pull-small-r { clear: right; float: right; margin: 0 0 10px 30px; }
dt img.call-l { margin-top: 0; }
.credit { font-size: 11px; letter-spacing: 0.01em; margin: 0.5em 0; text-align: right; }
.credit a { color: #7f8183; }
.pull, .pull-l, .pull-r { color: #4d4d4d; font-size: 24px; font-weight: bold; line-height: 1.3; }
.pull-l, .pull-r { width: 42.15%; }
[class *= "pull-small"] { border: 1px solid #ccc; border-width: 2px 0; font-size: 16px; line-height: 1.6; width: 42.15%; padding: 1em 0; }
[class *= "pull"] blockquote cite { color: #666; display: block; font-size: 16px; font-weight: normal; text-align: right; }
[class *= "pull"] .mute { font-weight: normal; }
[class *= "pull"] p { margin-bottom: 0.5em; }

    /* In tables */
    td [class *= "call"] { float: none; margin: 0; width: 100% !important; }

/* Cards */
.cards { display: grid; grid-column-gap: 30px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-row-gap: 30px; list-style: none; margin: 2em 0; overflow: hidden; }
.cards a { background: #fff; border: 1px solid #ddd; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; transition: all 0.2s ease-in-out; width: 100%; }
.cards a:hover { background: #0068ab; border-color: #0068ab; color: #fff; text-decoration: none; transform: scale(1.05); }
.cards a:hover .card-type, .cards a:hover .mute { color: rgba(255, 255, 255, 0.5); }
.cards .card-content { align-items: flex-start; display: block; flex: 1 1 auto; padding: 1.5em; }
.cards .card-thumb { display: block; flex: 1 1 0%; min-height: 157px; }
.cards .card-thumb img { display: block; flex: 1 1 auto; width: 100%; }
.cards .card-title { display: block; line-height: 1.3; margin-bottom: 0.2em; }
.cards .card-type { color: #777; display: block; font-style: italic; }
.cards li { display: grid; float: left; margin: 0 2% 20px 0; width: 23%; }
.cards li:nth-child(4n+1) { clear: left; }
.cards .mute { display: block; line-height: 1.7; }

    /* Icon cards */
    .cards-icons { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; text-align: center; }
    .cards-icons li { min-height: 220px; width: 18%; }
    .cards-icons li:nth-child(4n+1) { clear: none; }
    .cards-icons li:nth-child(5n+1) { clear: left; }
    .cards-icons .card-content { padding-top: 0; }
    .cards-icons .card-thumb { padding: 20px; }
    .cards-icons .card-thumb img { margin: 0 auto; width: auto; }
    .cards-icons a:hover .card-thumb img { filter: brightness(0) invert(100%); }
    
    /* Mini cards */
    .cards-mini { grid-template-columns: 1fr 1fr 1fr; }
    .cards-mini a { align-items: center; flex-direction: row; }
    .cards-mini .card-content { padding: 0.5em 1em; }
    .cards-mini .card-thumb { flex: 0 0 36%; min-height: 0; }

@supports (display: grid) {
    .cards .card-thumb { flex-basis: auto; min-height: 0; }
    .cards-mini .card-thumb { flex-basis: 36%; }
    .cards li, .cards-icons li { float: none; height: auto; margin: 0; min-height: 0; width: auto; }
}

/* Contact */
.contact { border-bottom: 1px solid #ddd; list-style: none; margin: 0 0 1.5em; padding-bottom: 1em; }
.contact li { display: flex; justify-content: space-between; margin-bottom: 0.5em; }
.contact-content { flex: 1 1 auto; padding-top: 0.6em; }
.contact-icon { color: #083754; flex: 0 0 1.7em; font-size: 1.7rem; padding-right: 0.2em; text-align: center; }

/* Covers */
.cover {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    display: block;
    left: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.cover:hover { text-decoration: none; }

.cover .overlay {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
    padding: 40vh 20px 30px;
}

.cover .overlay a { color: #fff; }
.cover .overlay p { margin: 0; }
.cover .we-section-content { color: #fff; flex: 1 1 auto; }
.cover-home .overlay { padding-top: 40vh; }

/* Filters */
.filter-nav { margin-bottom: 1em; }
.filter-trigger { margin-right: 1em; }

/* Flat lists */
.flat { list-style: none; margin-left: 0; }

/* Footer */
#footer { padding: 1.5rem 40px 3rem; }
#footer, #footer a { color: #fff; }
#footer h6 { color: #fcb713; margin-bottom: 1em; }
#footer .we-section-content { display: flex; flex-wrap: wrap; justify-content: space-between; }
#footer-primary { width: 48.75%; }
#footer-secondary { width: 23.125%; }
#footer-secondary ul { list-style: none; margin: 0; }
#footer-tertiary { width: 23.125%; }

    /* Around River Forest */
    #around { border-top: 1px solid #ddd; text-align: center; }
    #around a { color: #000; display: inline-block; transition: all 0.2s ease-in-out; }
    #around a:hover { text-decoration: none; transform: scale(1.1); }
    #around acronym { border: 0; text-decoration: none; }
    #around img { display: block; margin: 0 auto 10px; max-height: 110px; }
    #around li { width: 18%; }
    #around ul { display: flex; font-size: 1.1rem; line-height: 1.4; justify-content: space-between; list-style: none; margin: 2em 0 0; }
    
    /* Copyright */
    #copyright { border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.7rem; margin-top: 2rem; padding-top: 1.5rem; text-align: center; width: 100%; }
    #copyright, #copyright a { color: rgba(255, 255, 255, 0.3); }
    #copyright p { display: inline; margin-right: 1em; }
    #copyright li { display: inline; margin-right: 1em; }
    #copyright ul { display: inline; list-style: none; margin: 0; }
    
    /* Footer navigation */
    #nav-footer { width: 100%; }
    #nav-footer a { color: #fff; display: inline-block; padding: 0.3em 0.7em; }
    #nav-footer a:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
    #nav-footer li { display: inline; }
    #nav-footer ul { border-bottom: 1px solid rgba(255, 255, 255, 0.3); list-style: none; margin: 0 0 2em; padding-bottom: 1em; text-align: center; }
    
    /* Social */
    #footer-social { list-style: none; margin-left: 0; }
    #footer-social a:hover { opacity: 0.7; text-decoration: none; }
    #footer-social .fa { font-size: 2rem; }
    #footer-social li { margin-bottom: 1em; }
    
    /* vCard */
    .vcard .hours { list-style: none; margin: 0; }
    .vcard .hours li { display: inline; margin-right: 1em; }
    .vcard .org { display: block; max-width: 500px; width: 82.47%; }
    .vcard .org img { width: 100%; }
    .vcard .org .logo-print { display: none; }
    .vcard .tel { display: block; }
    .vcard-content { display: block; padding-left: 13.5%; }

/* Events */
.events { border-top: 1px solid #ddd; list-style: none; margin-left: 0; }
.events .date { flex: 0 0 120px; padding-right: 20px; text-align: center; }
.events .date .date-day { color: #d4622a; font-size: 1.66rem; font-weight: bold; line-height: 1; }
.events .date .date-month, .events .date .date-weekday { display: block; line-height: 1.2; }
.events .date .date-weekday { margin-bottom: 0.2em; }
.events h3 { font-size: 1rem; font-weight: normal; }
.events > li { align-items: center; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; padding: 10px 0; }
.events p { margin: 0; }
.events .summary { flex: 1 1 auto; }

/* Header */
#header { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 25px 25px 5px; }
#header a { color: #fff; }
#header-primary { width: 25.7%; }
#header-secondary { text-align: right; }

    /* Logo */
    #logo { max-width: 360px; }
    #logo img { display: block; }
    #logo .logo-print { display: none; }

    /* Utility nav */
    #nav-utility { font-size: 0.77rem; margin-bottom: 1em; }
    #nav-utility li { display: inline; margin-left: 1em; }
    #nav-utility ul { list-style: none; margin: 0; }

/* Hide */
.hidden { visibility: hidden; display: none; }
/* Intro */
.intro { font-size: 1.3rem; }

/* Muted text */
.mute { color: #777; font-size: 0.77rem; }

/* Navigation */
    /* Menu */
    #menu {
        background: #0068ab;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
        font-size: 16px;
        overflow: scroll;
        position: absolute;
        right: -400px;
        top: 0;
        width: 250px;
        z-index: 1000;
    }
    
    #menu a { border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #fff; display: block; padding: 0.8em 1.1em; }
    #menu li { margin: 0; }
    #menu li:last-child { border: 0; }
    #menu li.current { background: #fff; }
    #menu li.current a { color: #000; }
    #menu li.current > a { font-weight: bold; }
    #menu ul { list-style: none; margin: 0; }
    #menu > ul { border-bottom: 4px solid rgba(255, 255, 255, 0.5); }
    
        /* Menu toggles */
        #menu-nav { list-style: none; margin: 0; text-transform: uppercase; white-space: nowrap; }
        #menu-nav a { display: inline-block; padding: 0.5em 1em; }
        #menu-nav a:hover { text-decoration: none; }
        #menu-nav li { display: inline-block; text-align: center; }
    
        /* Search */
        #menu-search { border-bottom: 1px solid rgba(0, 0, 0, 0.1); clear: both; float: none; padding: 0.8em 1.1em; text-align: left; }
        #menu-search .btn { padding: 0.45em 0; width: 23%; }
        #menu-search .txt { width: 84%; }
        #menu-search #search { float: none; }
    
    /* Primary */
    #nav-primary { padding-top: 10px; width: 100%; }
    #nav-primary a { display: inline-block; padding: 0.5em 0.8em; }
    #nav-primary a:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
    #nav-primary .current a { border-bottom: 2px solid #fcb713; color: #fcb713; }
    #nav-primary li { display: inline-block; }
    #nav-primary ul { list-style: none; margin: 0; }
    
    /* Secondary */
    .nav-secondary .current > a { color: #000; font-weight: bold; }
    .nav-secondary li { margin-bottom: 1em; }
    .nav-secondary ul { list-style: none; margin-left: 0; }
    .nav-secondary ul ul { list-style: disc; margin: 0.25em 0 0 1.5em; }
    .nav-secondary ul ul li { margin-bottom: 0.25em; }
    
        /* Landing pages */
        #nav-secondary-landing { background: #0068ab; padding: 0.7em 25px; }
        #nav-secondary-landing a { color: #fff; }
        #nav-secondary-landing li { display: inline; margin-right: 1em; }
        #nav-secondary-landing ul { list-style: none; margin: 0; }

/* News */
.news { list-style: none; margin-left: 0; }
.news h3 { font-size: 1rem; font-weight: normal; }
.news > li { align-items: center; display: flex; justify-content: space-between; margin-bottom: 0.7em; }
.news .summary { flex: 1 1 auto; }
.news .thumb { flex: 0 0 120px; padding-right: 20px; }

/* Pay & apply header */
.pay-header { align-items: center; display: flex; }
.pay-header h1 { flex: 1 1 auto; padding-left: 0.5em; }
.pay-header .thumb { flex: 0 0 100px; }

/* Popups (qTip) */
.qtip { background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); font-size: 16px; line-height: 1.4; max-width: 400px; }
.qtip h2 { font-size: 1em; }
.qtip p { margin: 0; }
.qtip-content { max-height: 200px; overflow-x: hidden; overflow-y: auto; padding: 20px; }
.qtip-titlebar { border-bottom: 1px solid #ddd; padding: 10px 20px; }

    /* Account */
    .filter-popup .qtip-content { padding: 0; }
    .filter-popup a { display: block; padding: 0.5em 1em; }
    .filter-popup a:hover { background: #f0f0f0; text-decoration: none; }
    .filter-popup li { margin: 0; }
    .filter-popup ul { list-style: none; margin: 0; }

/* Property search */
#property { align-items: center; clear: both; display: flex; justify-content: space-between; padding-top: 3em; }
#property-icon { flex: 0 0 8%; margin-right: 20px; }
#property-intro { flex: 1 1 37.1875%; }
#property-search { flex: 1 1 48.75%; }

/* Search results */
#search-results .gs-result .gs-title, #search-results .gs-result .gs-title * { color: #0068ab; }
#search-results .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl { color: #777; }

#search-results .gsc-control-cse,
#search-results .gsc-thumbnail-inside,
#search-results .gsc-url-top,
#search-results .gsc-webResult .gsc-result {
    padding: 0;
}

#search-results .gsc-adBlock, #search-results .gsc-orderby, #search-results .gcsc-branding { display: none; }
#search-results .gsc-result .gs-title { height: auto; }
#search-results .gsc-result .gs-title, #search-results .gsc-result .gs-title * { font-size: 20px; overflow: visible; text-decoration: none; }
#search-results .gsc-result .gs-title:hover { text-decoration: underline; }
#search-results .gsc-result-info { padding: 0; }
#search-results .gsc-results .gsc-cursor-box { font-size: 20px; margin: 0; text-align: center; }
#search-results .gsc-results .gsc-cursor-box .gsc-cursor-page { margin: 0; padding: 0 0.5em; }

/* Sharing */
.share { margin: 2em 0; }
.share .addthis_toolbox { display: flex; }
.share .addthis_toolbox a { background: #f7f4ec; margin: 0 0.5px; display: block; flex: 1 1 auto; padding: 0.7em 0.5em; text-align: center; }
.share .addthis_toolbox a:hover { background: #d7c6a1; color: #fff; text-decoration: none; }
.share .fa { color: #000; display: block; font-size: 2.5rem; opacity: 0.5; }

/* Skip */
#skip { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); left: -9999px; padding: 0.5em 1.5em; position: absolute; top: 0; }
#skip:focus { left: 0; }

/* Tables */
.data td, .data th { border: 1px solid #ddd; padding: 0.3em 1em; }

/* Updates */
#updates h2 { margin-bottom: 1em; }
#updates p { margin: 0; }


/* Widths
======================================================================*/
@media screen and (max-width: 1160px) {
    #header { padding-bottom: 25px; }
    #nav-primary, #nav-secondary-landing, #nav-utility { display: none; }
}

@media screen and (max-width: 940px) {
    /* Basics */
    body { font-weight: normal; }
    h1 { font-size: 1.6rem; }
    html { font-size: 16px; }
    
    /* Layout */
    .content-primary, .content-secondary { float: none; width: auto; }
    
    /* Content */
        /* Action buttons */
        .action { display: block; text-align: center; width: 100%; }
        
        /* Agendas and minutes */
        .agenda .date, .agenda .summary { width: 100%; }
        .agenda li { display: block; }
        
        /* Cards */
        .cards { display: block; font-size: 1.2rem; text-align: left; }
        .cards a { align-items: center; flex-direction: row; }
        .cards li, .cards-icons li { display: block; float: none; margin: 0 0 15px; min-height: 0; width: auto; }
        .cards .card-content { padding: 15px; }
        .cards .card-thumb { flex: 0 0 120px; min-height: 0; padding: 15px; }
        .cards-icons .card-thumb { flex: 0 0 70px; padding: 15px; }
        
        /* Footer */
        #footer-primary { border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin: 0 0 2em; padding-bottom: 1em; width: 100%; }
        #footer-secondary, #footer-tertiary { width: 48%; }
        
            /* Around River Forest */
            #around a { display: inline-block; }
            #around img { max-height: 50px; }
            #around li { display: inline-block; margin: 0 10px 20px; width: 150px; }
            #around ul { display: block; }
        
        /* Header */
        #header { padding: 10px 20px; }
        #header-primary { width: 170px; }
        
        /* Pay & apply header */
        .pay-header .thumb { flex-basis: 50px; }
        
        /* Property search */
        #property { flex-wrap: wrap; }
        #property-search { flex-basis: 100%; margin-top: 1em; }
}

@media screen and (max-width: 600px) {
    /* Cards */
    .cards-mini { display: block; }
    .cards-mini .card-thumb { flex-basis: 100px; }
    .cards-mini li { margin-bottom: 1em; }
    
    /* Property search */
    #property-icon { flex-basis: 80px; }
}

/* homepage hero overlay */	
.banner-content {
  max-width:1200px;
  padding:1.25em 1.5em 1.5em 1.5em;
  background: rgba(0,0,0,.5);
}
.banner-content h1 {
  margin-bottom:.25em;
}
.banner-content p:not(:last-child) {
  margin-bottom:1em;
}