img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} *:focus-visible, input[type=submit]:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; box-shadow: -4px -4px 8px #fff; outline-offset: 1px; border-radius: 3px; transition: all .3s linear .01s; } body, #uppernav ul, nav ul, section ul, section ol, aside ul { margin: 0; padding: 0; } body { font-family: Arial,Helvetica,sans-serif; background-color: #223a66; color: #050608; font-size: 15px; text-align: center; min-width: 320px; line-height: 1.4 } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } .container { background-color: #fff; } .wrap { position: relative; display: block; max-width: 1020px; margin: 0 auto; } img, iframe, video { max-width: 100%; height: auto } iframe { aspect-ratio: 16 / 9 auto; width: 100% } a img, iframe { border: none; } a { text-decoration: none; color: #d39c41; } a:hover, #uppernav li a:hover { color: #f4c255; } hr { border: none; border-bottom: 2px solid #eee; } .imgLeft { float: left; margin: 5px 3% 10px 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 10px 3%; } .clear { clear: both; } .center { text-align: center; } .hide { display: none; } #uppernav li, nav li, aside, section, .triCol, form div, footer ul { display: inline-block; vertical-align: top; } .top { padding-bottom: 10px; background-image: url(/images-design/header-bg.jpg); background-repeat: repeat-x; } .top a { display: block } .top .fa { display: block; width: 19px; height: 11px; padding: 2px 0; margin: 0 auto } #uppernav { background-color: #223a68; padding: 5px 0; } #uppernav li { font-size: 11px; font-weight: bold; text-transform: uppercase; border-left: 1px solid #fff; } #uppernav a { color: #fff; padding: 0 5px 0 10px; display: block } #uppernav li:first-of-type { border: none; } header { font-size: 30px; font-family: 'Patua One',tahoma,sans-serif; font-weight: normal; color: #fff; letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0,0,0,.5); } header img.logo { margin-top: 13px; box-shadow: 0 0 10px rgba(0,0,0,.4); border-radius: 100px; } header img { margin-left: auto; margin-right: auto } header p { margin: 0; text-align: center; color: #fff } header span { font-size: 24px; display: block; color: #d39c41; margin-left: 10px; } header .grid { grid-template-columns: 1fr 1fr; align-items: center } #uppernav, .banner h1, .banner p, .banner span { text-align: right; } nav, nav a, .banner a, .banner h1, .btn, .btn:hover, footer, footer a { color: #fff; } nav, section h1 { text-transform: uppercase; } nav { font-size: 13px; font-weight: bold; text-align: center } nav li a { padding: 5px; margin: 5px; display: block; } nav li:last-child a { padding-right: 0; } aside { width: 26%; margin: 30px 0 40px 1%; padding: 0 0 20px 2%; border-left: 2px solid #eee; } aside .btn { display: block; font-size: 18px; text-align: center; padding: 14px 0; margin-bottom: 30px; border-radius: 3px; } aside li { margin: 0 0 5px 20px; } aside li, section ul li, section ol li { margin: 0 0 5px 20px; } aside li, section ul li { list-style: square; } section { width: 68%; margin: 30px 0 40px; } section h1 { font-size: 24px; margin-top: 10px; } section h2 { font-size: 20px; } section h3 { font-size: 18px; } section h1, section h2, aside h2, section h3, aside h3 { font-weight: normal; color: #223a66; } section .big { font-size: 120% } .banner { position: relative; height: 450px; } .cycle-slideshow { height: 100%; width: 100%; overflow: hidden; top: 0; position: absolute; } .cycle-slideshow > div { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .slide5 { background-image: url(/images-design/banner5.jpg); } .slide6 { background-image: url(/images-design/banner6.jpg); } .slide7 { background-image: url(/images-design/banner7.jpg); } .slide8 { background-image: url(/images-design/banner8.jpg); } .slide9 { background-image: url(/images-design/banner9.jpg); } .slide10 { background-image: url(/images-design/banner10.jpg); } .banner img { min-width: 1024px; min-height: 450px; z-index: 1; position: absolute; width: 100%; } .banner > .wrap { z-index: 9999; } .banner #banner-content { color: #fff; text-shadow: 2px 2px 3px #000; text-align: right; } #banner-content p { text-align: right; display: inline-block; } .banner h1 { display: inline-block; width: 100%; max-width: 700px; font-size: 32px; margin: 0; padding: 150px 0 15px; border-bottom: 5px solid #f4c255; text-transform: unset; } .banner h1 span { display: block; } .banner p { max-width: 700px; font-size: 18px; } .btn:hover, form input[type=submit]:hover { background-color: #f4c255; } .table { display: table; width: 100%; } .table > div { vertical-align: top } .table.half > div { width: calc(50% - 12px) } .table.half > div:first-of-type { padding-right: 10px } .table.half > div:last-of-type { padding-left: 10px } .triCol { width: 32%; } .grid { display: grid; grid-gap: 10px } .grid.mid { align-items: center } .grid.quad { grid-template-columns: repeat(4,1fr) } .grid.third { grid-template-columns: repeat(3,1fr) } .grid.half { grid-template-columns: repeat(2,1fr) } .btn { background-color: #d39c41; border-radius: 2px; border: 1px solid #d39c41; font-size: 16px; display: inline-block; padding: 10px 40px; margin: 10px 0; } .btn i { margin-right: 5px; } .btn:hover { cursor: pointer; border: 1px solid #f4c255; } .grid.home { padding-bottom: 10px; } .grid.home > div:nth-of-type(2) { border-left: 2px solid #eee; padding-left: 20px; } .projects { padding: 5px 0 15px; } .sub { padding: 5px 0; } .sub .triCol { display: table-cell; padding: 0 10px; border-width: 2px; border-color: #eee; border-style: none none none solid; } .sub .triCol:first-child { border-left: none; padding-left: 0; } .sub li { list-style: none; margin: 0 0 10px 0; } .sub i { font-size: 8px; margin-right: 5px; color: #f4c255; vertical-align: middle; } .nolist li, .presidents li { list-style: none; margin-left: 0; } #app-content { margin-top: 20px } .application-button { margin: 5px; padding: 15px 40px; background-color: #d39c41; color: white; } .button-container { padding-top: 25px; padding-bottom: 25px; } .button-container p { text-align: center; color: red; } form { margin: 20px 0 0; text-align: left } form input, form textarea, form select { font-family: sans-serif; font-size: 14px; background-color: #f3f3f3; border: 1px solid #f3f3f3; border-radius: 2px; padding: 10px; display: block; width: 100%; margin: 10px 0 } form .grid input, form .grid select { margin: 0 } form select { padding: 9px 10px } form input, form textarea { box-sizing: border-box } form select, form input[type=submit] { width: 100% } form textarea { height: 75px; padding: 5px 10px } form input[type=radio], form input[type=checkbox] { display: inline-block; width: auto; margin: 5px } form input[type=submit] { background-color: #d39c41; color: #fff; border: 1px solid #d39c41; border-radius: 2px; } form input[type=submit]:hover { cursor: pointer; border: 1px solid #f4c255; } form label span { display: block; text-align: left } #quick textarea, #member-request textarea { height: 140px; } #contact textarea { height: 122px; } #application .grid { grid-gap: 0 10px } #application p { margin: 15px 0 5px } footer .wrap { padding: 20px 1%; } footer .grid { grid-template-columns: 1fr 520px } footer h2 { font-weight: normal; } footer .history { font-size: 16px; } footer li { list-style: none; margin-bottom: 5px; } footer ul.social { padding: 0; text-align: center } .social li { display: inline-block; margin: 8px } .mark img { margin: 0 0 0 auto; display: block } .project { border: 2px solid #eee; padding: 10px; margin: 10px 0; overflow: auto; } #members-nav { text-align: left; } #members-nav li { display: inline-block; margin: 0 3px; padding: 5px; } #members-nav li:first-child { margin-left: 0; padding-left: 0; } #members-nav a { color: #223a66; } .error, .hide, .admin, #members-nav li.admin { display: none; } .event, #add-event, #profile, #calendar-event, #btnLogin { text-align: left; } .report-table { display: none; width: 100%; text-align: center; border-collapse: collapse; } .report-table td { padding: 3px; margin: 0; } .report-table tr:nth-child(even) td { background: #e9e9e9; } .event { border-bottom: 1px dotted rgba(0,0,0,.4); padding: 10px 0; } .event h2 { margin-bottom: 0; padding-bottom: 0; } #progress { height: 10px; width: 100px; display: block; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: #223a66; height: 100%; filter: alpha(opacity=25); opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .top > .wrap, #banner-content, section { padding-left: 1%; padding-right: 1%; } .nowrap, a[href^=tel] { white-space: nowrap; } .presidents li { margin: 0 } .project-images img { width: 47%; } .project-images img:nth-of-type(odd) { margin-right: 2%; } .project-images img:nth-of-type(even) { margin-left: 2%; } .event-availability span.save { color: #329b19; } .event-availability span.error { color: #ff0000; } .becon span { display: none; } .becon li { list-style-type: none; } .alert { font-weight: bold; color: #ff0000; } .grid.food-truck-event { grid-template-columns: 150px 1fr; grid-gap: 0 } .food-truck-event h3, .food-truck-event p { margin-top: 0 } .highlight { background-color: yellow } #usersContainer { display: grid; grid-template-columns: 1fr 1fr 1fr; } .admin a { font-weight: bold; text-decoration: underline; } #usersContainer label { display: block; text-align: left; padding: 10px 0; } .tblSection { padding: 20px 0; width: 100%; } .tblSection label:nth-of-type(1) { display: inline-block; width: 30%; } .tblSection label:nth-of-type(1) select { margin-left: 10px; } .tblSection label:nth-of-type(2) { display: inline-block; width: 70%; text-align: right; } .tblSection nav.paging ul { text-align: center; } .tblSection .paging label { display: inline; width: auto; text-align: center; } .tblSection label:nth-of-type(2) input { width: 80%; margin-left: 10px; } .tblSection label input, .tblSection label select, .tblSection label button { padding: 10px; } .tblSection table { margin-top: 20px; border-collapse: collapse; } .tblSection td { padding: 10px; } .tblSection td p { margin: 0; } .tblSection th { font-size: 80%; } .tblSection table tbody tr:nth-child(odd) { background-color: #efefef; } .tblSection a { text-decoration: underline; } .tblSection table { width: 100%; } .tblSection label:first-of-type, .paging { display: none; } #users > section > table > thead > tr > th { font-size: 1.2em; } #users > section > table > thead > tr > th:hover { cursor: pointer; } #users table a { font-weight: bold; } #spnSaved { color: #246314; } #eventsContainer { text-align: left; } .warn { padding: 15px 40px; background-color: red; color: #fff; border: none; font-weight: bold; } .deleteEvent div button { margin: 10px } .success { color: green; font-size: 24px; text-align: left !important; } @media(max-width:999px) { header { font-size: 28px; } footer .history { display: inline-block; } footer ul { padding: 0 16px; } footer li { margin: 8px 0; } footer li a { display: block; } nav { margin: 12px 0; text-align: center; } #uppernav a { margin: 8px } } @media(max-width:768px) { .banner { height: 432px; } .slide5 { background-image: url(/images-design/banner5_768.jpg); } .slide6 { background-image: url(/images-design/banner6_768.jpg); } .slide7 { background-image: url(/images-design/banner7_768.jpg); } .slide8 { background-image: url(/images-design/banner8_768.jpg); } .slide9 { background-image: url(/images-design/banner9_768.jpg); } .slide10 { background-image: url(/images-design/banner10_768.jpg); } } @media(max-width:767px) { footer .grid, .grid.half.officers { grid-template-columns: 1fr } footer .mobilefooter { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 0 10px } footer .mobilefooter ul { padding: 0; margin: 0 } } @media(max-width:700px) { .sub .triCol:first-child { display: block; width: auto; border-style: none none solid; } .sub .triCol:nth-child(2) { border-left: none; } header, nav { text-align: center; margin: 0; } header p { margin-top: 30px; } nav { margin-top: 12px; } #lowernav { margin-top: 0; } nav ul:first-child li { border: none; } #uppernav a, nav a { margin: 8px; padding: 5px; } section, aside { display: block; width: auto; border: none; margin: 0; padding-top: 30px; } aside { margin-left: 0; padding-left: 2%; padding-right: 2%; } header { font-size: 26px; } .top { background-position: 0 30px } } @media(max-width:600px) { .banner h1 { padding-top: 100px; } .banner h1 span { display: inline; } .grid.third { grid-template-columns: 1fr } .grid.third.presidents { grid-template-columns: 1fr 1fr } .top > .wrap, #banner-content, section, footer .wrap { padding-left: 2%; padding-right: 2%; } .top { background: none } #uppernav li, nav li { width: 49%; } #uppernav li { border: none; } .top li { text-align: center } } @media(max-width:500px) { .sub .triCol { display: block; border-left: none; width: auto; margin: 12px 0; padding: 1px 0; } .sub .triCol:nth-child(2) { border-style: none none solid; } footer .history { width: auto; } .project-images img { width: auto; margin: 12px 2%; } header img.logo { margin-top: 0 } header p { font-size: 30px; margin: 20px 0; } footer li, footer h2, footer h3, footer p { text-align: center } .grid.food-truck-event, footer .mobilefooter, .subfoot.grid.half, .grid.home, .grid.half { grid-template-columns: 1fr } .grid.home > div:nth-of-type(2) { border-top: 2px solid #eee; border-left: none; padding-left: 0; } .mark img { margin: 0 auto } } @media(max-width:400px) { header p { font-size: 24px; } .banner h1 { font-size: 26px; } .mark, .copy, .copy p { display: block; width: auto; text-align: center; } .copy { margin-top: 40px; } footer ul { display: block; padding-left: 40px; margin: 12px 0; } footer li { margin: 4px 0; padding-left: 40px; } footer li:first-of-type { padding-left: 0; } .presidents { grid-gap: 10px 5px } .presidents li { font-size: 13px; } footer ul.social { margin-left: -80px } }