@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700|Open+Sans:400,700&display=swap');

/*
  font-family: 'Merriweather', serif;
  font-family: 'Open Sans', sans-serif;
*/

body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; }
h1, h2, h3 { font-family: 'Merriweather', serif; }
.clear { clear: both; }

a { color: #C00000; text-decoration: none; }
a:hover { color: #720000; text-decoration: underline; transition: 0.6s; }

/* Header */
#alert { background: #000; color: #FFF; padding: 10px 20px; font-weight: 700; width: calc(100% - 40px); text-align: center; }
#alert.secondary { border-top: 1px solid #666; }
#alert a { color: #FFF; }

#header { width: 100%; z-index: 10; }
#header.sticky { position: fixed; top: 0; }
.containerFull { width: 100%; }
.containerFull.quickLinks { background: #C00; }
.containerFull.headerContent { background: #E6E6E6; }
.container { width: 1800px; max-width: 100%; margin: 0 auto; }
.containerSmall { width: 1440px; max-width: 100%; margin: 0 auto; }
.containerForm { width: 1080px; max-width: 100%; margin: 0 auto; }
.container.homeLinks { background: #F6F6F6; }
.topContent.sticky { margin-top: 100px; }
p.backLink { background: rgba(0,0,0,.4); display: inline-block; padding: 0 10px; border-radius: 10px; margin-bottom: 0; color: #F6F6F6; }
p.backLink a { color: #FFF; }

#quickLinks { font-size: 12px; text-transform: uppercase; font-weight: 700; line-height: 26px; color: #FFF; }
#quickLinks a { color: #FFF; display: block; text-decoration: none; padding: 0 15px; float: left; }
#quickLinks a:hover { background: #333; }
.weather { float: right; padding: 0 15px; }
.weather i { margin-right: 10px; }
.social { float: right; }
.social i, #quickLinks i { line-height: 26px !important; }

#logo { float: left; padding: 0 15px; }
#logo img.logo { height: 64px; margin: 5px 0; width: auto; float: left; }
#logo img.tagline { height: 30px; margin: 22px 0 17px 10px; float: left; }
#navigation { float: right; font-size: 16px; line-height: 74px; font-family: 'Open Sans', sans-serif; padding: 0; overflow: hidden; }
#navigation a { float: left; text-transform: uppercase; font-weight: 700; padding: 0 15px; text-decoration: none; }
.dropdown { overflow: hidden; float: left; }
.dropdown .dropbtn { font-size: 16px; border:none; outline: none; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }
.dropdownContent { display: none; position: absolute; margin-top: 74px; background-color: #E6E6E6; min-width: 150px; z-index: 1; }
.dropdownContent a { float: none !important; color: black; display: block; text-align: left; line-height: 30px !important; width: calc(100% - 30px); font-weight: 400 !important; text-transform: none !important; font-size: 14px; cursor: pointer !important; }
.dropdown:hover .dropdownContent { display: block; }
#navigation a:hover { background: #DDD; }

.menuIcon { display: none; }

/* Rotator */
#rotator { background-size: cover; background-position: top center; background-image: url(/images/general/riverside_aerial_photo_39224.jpg); padding: 250px 0 50px; color: #FFF; text-shadow: 0 0 10px rgba(0,0,0,.9); text-align: center; border-bottom: 5px solid #C00; }
#rotator h1 { font-size: 60px; line-height: 80px; margin: 30px 0 0; }
#rotator h3 { font-size: 30px; line-height: 40px; margin: 10px 0 30px; }

/* Home Links */
#homeNewsEvents { width: 1440px; margin: 0 auto; max-width: 100%; font-size: 14px; line-height: 20px; }
#homeLinks { width: 1440px; margin: 0 auto; max-width: 100%; font-size: 14px; line-height: 20px; font-weight: 700; }
.homeLink { width: calc(20% - 20px); text-align: center; padding: 40px 10px; float: left; background: #F6F6F6; }
.homeLink:hover { background: #EEE; }
.homeLink a i { display: block; margin-bottom: 5px; }
.homeLink a { text-decoration: none; display: block; }
.homeIcon { text-align: center; line-height: 60px; vertical-align: middle; font-size: 40px; display: block; margin: 0 auto; }

/* Content */
#pageHeader { width: calc(100% - 140px); padding: 210px 70px 70px; text-align: center; border-bottom: 5px solid #C00; }
#pageHeader.noHeaderPhoto { padding-top: 70px; padding-bottom: 70px; }
#pageHeader h1 { color: #FFF; text-shadow: 0 0 10px rgba(0,0,0,.9); font-size: 40px; line-height: 60px; margin: 30px 0 0; }
#pageHeader.noHeaderPhoto h1 { margin: 0; }
#pageContent .intro { width: calc(100% - 40px); padding: 20px; font-size: 22px; font-weight: 400; line-height: 32px; border-bottom: 1px dotted #CCC; text-align: center; color: #666; }
#pageContent .content { width: calc(100% - 40px); padding: 20px; }
#pageContent .content.contentLeft { width: calc(100% - 400px); float: left; }
#pageContent .contentRight { float: right; width: 310px; padding: 10px 20px; background: #CCC; margin: 10px 10px 10px 0; }
#pageContent .content.meetings h3 { width: calc(100% - 20px); font-family: 'Open Sans', sans-serif; background: #DDD; border-bottom: 1px solid #000; padding: 10px; margin: 1.5em 0 0; }
#pageContent img { max-width: 100%; height: auto !important; }

/* Modules - Council */
#directory { width: 1080px; max-width: 100%; margin: 0 auto; }
.councilMember { width: calc((100% / 3) - 42px); float: left; margin: 20px; border: 1px solid #C00; height: 290px; }
.councilMember.staff { height: 320px; }
.councilMember b { padding: 10px; background: #C00; color: #FFF; text-align: center; display: block; line-height: 20px; }
.councilMember p { margin: 0; padding: 10px; text-align: center; }
.councilMember i.fa-portrait { font-size: 80px; color: #CCC; display: block; line-height: 100px; text-align: center; margin: 20px auto 0; }

/* Modules - Council Meetings */
.councilMeeting { text-decoration: none; padding: 5px 10px; border-bottom: 1px solid #BBB; display: block; width: calc(100% - 20px); }
.councilMeeting:hover { background: #F6F6F6; }
.councilMeeting a i { margin-left: 5px; text-decoration: none; }

.councilDate, .councilDetail { float: left; }
.councilDate { width: calc(100% - 360px); }
.meetingNotes { font-size: 13px; color: #666; line-height: 16px; display: block; margin: 0 0 5px; }
.councilDetail { width: 120px; text-align: center; }

/* Modules - FAQ */
.faqLabel { float: left; width: 40px; font-size: 24px; color: #DA3732; font-family: 'Merriweather', monospace; text-align: center; padding-top: 15px; }
.faqText { float: left; width: calc(100% - 40px); }
.faqTextQ { font-weight: 700; }
.faqQA { border-bottom: 1px solid #DDD; padding-bottom: 1em; margin-bottom: 1em; }
.faqLast { border-bottom: none; }
.faqSection input[type="text"] { border: 2px solid #EEE; width: calc(100% - 14px); padding: 5px; font-size: 18px; font-family: 'Open Sans', sans-serif; margin: 1.5em 0; border-radius: 5px; }
.faqSection h2.faqFirst { margin-top: .5em; }
.listHidden { display: none !important; }

/* Modules - Business Directory */
.directoryFilter { text-align: center; margin: 0 0 10px; }
.directoryFilter a { cursor: pointer; display: inline-block; background: #C00; color: #FFF; padding: 4px 10px; margin: 4px; }
.directoryItem { width: calc((100% / 3) - 40px); float:left; padding: 10px; background: #F6F6F6; margin: 10px; }
.directoryItem h4 { font-size: 16px; color: #C00; margin: 0 0 5px; }
.directoryItem h4 a { text-decoration: underline; }
.directoryItem h4 a i { text-decoration: none; margin-left: 5px; }
.directoryIcons { font-size: 18px; padding: 10px 0 0; text-align: center; border-top: 1px dotted #DDD; margin: 10px 0 0; line-height: 20px !important; height: 20px; overflow: hidden; }
.directoryCategories { font-size: 13px; margin: 5px 0 0; }
.filterDiv { display: none; }
.show { display: block; }

/* Modules - Map */
#fullMap.mapPage, #fullMap.mapPage iframe { height: 600px; }
#fullMap, #fullMap iframe { width: 100%; border: 0; }

/* Modules - Form */
form#rfpContact { }
#rfpContact ol { margin: 0; padding: 0; list-style: none; }
#rfpContact li { width: 100%; clear: both; display: block; padding: 7px 0; }
#rfpContact label { float: left; width: 100%; padding: 0 0 5px; }
#rfpContact i { color: #C00; font-style: normal; font-weight: 700; }
#rfpContact input[type="submit"] { font-family: Oswald, sans-serif; text-transform: uppercase; color: #AAA; border: 4px solid #AAA; display: block; padding: 5px 20px; text-decoration: none; text-align: center; background: #FFF; font-size: 30px; margin: 30px auto; cursor: pointer; }
#rfpContact input[type="submit"]:hover { background: #AAA; color: #FFF; }
#rfpContact input[type="text"] { width: calc(100% - 12px); font-family: Muli, sans-serif; font-size: 16px; padding: 4px; border: #EBEBEB solid 2px; background: #FFF; }
#rfpContact input[type="file"] { display: block; width: 300px; margin: 50px auto 0; font-size: 18px; font-family: Muli, sans-serif; }
#rfpContact select { width: calc(100% - 12px); border: 1px solid #666; margin: 10px 0; padding: 3px; font-size: 16px; font-family: Muli, sans-serif; }
#rfpContact textarea { width: calc(100% - 12px); border: #EBEBEB solid 2px; background: #FFF; margin: 5px 0; padding: 4px; font-size: 16px; font-family: Muli, sans-serif; height: 120px; }

/* Modules - News */
.content.newsSection { padding-top: 0 !important; }
.newsItem { padding: 20px 0; border-bottom: 1px solid #DDD; }
.newsItem img, img.newsRight { float: right; max-width: 300px; margin-left: 10px; }
.newsItem h3 { margin: 0; }
.newsItem h3 a { text-decoration: underline; }
.newsItem p.newsDate { margin-top: 0; }
.newsItem.first { padding-top: 0; }
.newsItem.last { padding-bottom: 0; border-bottom: 0; }
.newsPhoto img { width: 100%; max-width: 600px; display: block; margin: 0 auto; height: auto; }
.newsVideoContainer { width: 100%; max-width: 800px; display: block; margin: 30px auto 20px; }
.newsVideo { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.newsVideo iframe, .newsVideo object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Modules - Home News and Events */
#homeNews, #homeEvents { width: calc(50% - 20px); margin: 10px; float: left; }
#homeNews .newsItem img { max-width: 200px; }
h3.homeModuleHeader { text-align: center; margin-bottom: 2em; }
.homeButton a { margin: 1em auto; display: block; width: 105px; background: #C00; color: #FFF; text-decoration: none; text-align: center; font-size: 16px; font-weight: 700; padding: 5px 0; border-radius: 10px; }
.homeButton.events a { width: 145px; }
.calendarItem { padding: 20px 0; border-bottom: 1px solid #DDD; }
.calendarItem.first { padding-top: 0px; }
.calendarItem.last { padding-bottom: 0; border-bottom: 0; }
.calendarItem h3 { margin: 0; }
.calendarItem h3 a { text-decoration: underline; }
.calendarDate { float: left; width: 60px; background: #C00; font-weight: 700; text-align: center; color: #FFF; padding: 10px 0 12px; }
.calendarDate .calendarMonth { text-transform: uppercase; }
.calendarDate .calendarDay { font-size: 40px; line-height: 45px; letter-spacing:-1px; }
.calendarInfo { float: right; width: calc(100% - 70px); line-height: 22px; }
.calendarInfo h3 { margin-bottom: 2px; }

/* Footer */
#footer { width: 100%; background: #E6E6E6; font-size: 14px; line-height: 22px; }

#footerContact { width: 1880px; max-width: 100%; padding: 40px 0; margin: 0 auto; }

#footerContact img { display: block; margin: 0 auto 20px; width: 238px; height: auto; }
.footer3x { width: calc(100% / 3); float: left; text-align: center; }
.footer3x a i { font-size: 22px; line-height: 28px; margin: 0 10px 15px; }
.footer3x img { margin: 9px auto !important; max-width: 100%; }
.footer3x.mapContact { line-height: 88px; }

#footerCredits { width: calc(100% - 40px); padding: 10px 20px; margin: 0 auto; font-size: 12px; line-height: 30px; background: #333; color: #FFF; }
.footerLeft { width: 50%; float: left; }
.footerRight { width: 50%; float: right; text-align: right; }
.footerRight a img { height: 30px !important; float: right; margin-left: 10px; }

@media only screen and (max-width: 1200px) {
  #homeNews { width: calc(60% - 20px); }
  #homeEvents { width: calc(40% - 20px); }
}

@media only screen and (max-width: 1080px) {
  #directory { width: 720px; }
  .councilMember { width: calc((100% / 2) - 42px); }
  .directoryItem { width: calc((100% / 2) - 40px); }
  .newsItem img, img.newsRight { float: right; max-width: 200px; margin-left: 10px; }
}

@media only screen and (max-width: 950px) {
  #logo img.tagline { display: none; }
}

@media only screen and (max-width: 850px) {
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
  .topnav a.menuIcon { float: right; display: block; }
  .topnav.responsive { position: relative; margin-top: -74px; width: 100%; }
  .topnav.responsive a.menuIcon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
  .topnav.responsive .dropdown { float: none; width: 100%; line-height: 40px !important; }
  a.dropdownMenuItem { line-height: 40px; }
  .topnav.responsive .dropdownFirst { margin-top: 76px; }
  .topnav.responsive .dropdownContent { position: relative; margin-top: 40px; }
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }

  #rotator { padding: 120px 0 50px; }
  #rotator h1 { font-size: 40px; line-height: 55px; }
  #rotator h3 { font-size: 24px; line-height: 32px; }

  #homeNews { width: calc(100% - 20px); float: none; }
  #homeEvents { width: calc(100% - 20px); float: none; padding-top: 20px; margin-top: 30px; border-top: 1px dotted #CCC; padding: 10px; }
  h3.homeModuleHeader { margin-top: 20px; }
}

@media only screen and (max-width: 800px) {
  .homeLink { width: calc(50% - 20px); }
  .qlText { display: none; }

  /* Content */
  #pageContent .content.contentLeft { width: calc(100% - 40px); float: none; }
  #pageContent .contentRight { float: none; width: calc(100% - 40px); padding: 20px; background: #CCC; margin: 0; }

  /* Footer */
  #footerContact { padding: 40px 0 20px; }
  .footer3x img { margin: 0 auto !important; }
  .footer3x { width: 100%; margin: 0 0 20px; }
  .footer3x.mapContact { line-height: inherit; }
}

@media only screen and (max-width: 720px) {
  #directory { width: 360px; }
  .councilMember { width: calc(100% - 42px); float: none; margin: 20px; height: auto; }
  .directoryItem { width: calc(100% - 40px); float: none; }

  /* Icons */
#microIcons { width: 85%; margin: 2em auto -10px; }
.mIcon { width: 140px; float: left; text-align: center; font-size: 16px; font-weight: 700; padding: 5px; border-radius: 25px; background: #EEE; margin: 0 calc((50% - 150px) / 2) 10px; }
}

@media screen and (max-width: 600px) {
  #quickLinks a { padding: 0 10px; }
  #pageHeader { padding: 40px 20px; width: calc(100% - 40px); }
  #pageHeader h1 { font-size: 30px; line-height: 40px; margin: 0; }
  #pageContent .intro { font-size: 18px; line-height: 28px; }

  .councilDate { width: 100%; padding: 5px 0 0; }
  .councilDetail { width: calc(100% / 3); padding: 5px 0; }

  .newsItem img { float: none; max-width: 100%; margin: 0 auto 20px; display: block; }
}

@media screen and (max-width: 450px) {
  #logo img { height: 54px; margin: 10px 0; }
}