/* Site Developed by Terry Barth Design www.terrybarthdesign.com */ /* Site Developed by Terry Barth Design www.terrybarthdesign.com */ /* Site Developed by Terry Barth Design www.terrybarthdesign.com */ @media all{ /* CSS Document */ @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-size: 12px; font: inherit normal 100% inherit; color: #444; font-family: 'Montserrat', sans-serif; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0;} caption, th, td { text-align: left; font-weight: normal; } sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } */ *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} body {font-size: 12px; font-family: Arial, Helvetica, sans-serif; margin:0; width:100%; color:#444444; } p, a, li {line-height: 1.5em; } a {color:#0000ee; text-decoration:underline; } a:hover { text-decoration:none;} section, header,footer,nav { display:block;} img {border:0; vertical-align:top; max-width:100%; } h1, h2, h3, h4 {line-height: 1.1em; } #page1 h1, #page19 h1 {font-size: 48px; margin:0 0 0.5em; color:#657d3e; text-transform: uppercase;} h1, h2 {font-size: 30px; margin:0 0 .5em; color:#657d3e;} h3 {font-size: 16px; margin:0 0 0.5em; color:rgba(157, 103, 96); letter-spacing: 1px; text-transform: uppercase;} h4 {font-size: 16px; margin:0 0 0.5em; color: #444; letter-spacing: 1px; text-transform: uppercase;} h1 a, h2 a, h3 a {font-size: 1em; text-decoration: none; color: #444;} p a {font-size: 1em; text-decoration: none;} ol, ul {padding:0; margin:0; list-style:none; } ul li {list-style-type: disc; } ol li {list-style-type: decimal; } li {padding:0 0 0.5em 1.5em; margin-left: 1em;} p {margin:0 0 1em;} #page15 a.underline {font-size: 1em; text-decoration: underline;} hr {color:#444; background-color:#444; height:1px; border:none; clear: both;} td {border: 1px solid #aaa;} strong {font-size: 1em;} .more {float: right; display: inline-block;} .imageright {float: right; margin: 15px 0 5px 10px;} .imageleft {float: left; margin: 15px 10px 5px 0;} .readmore {text-align: right; text-decoration: underline;} .image50 {width: 50%;} .image33 {width: 33%;} .imageshadow { -moz-box-shadow: 3px 3px 5px #aaa; -webkit-box-shadow: 3px 3px 5px #aaa; box-shadow: 3px 3px 5px #aaa;} .justifyright {text-align: right;} .justifyleft {text-align: left;} .alignLeft {float:left; margin-right:1em; } .alignRight {float:right; margin-left:1em; } .no-scale {width: auto;} .box-main:after, .center:after {content:""; clear:both; display:block; } .columns {width:100% } .columns:after {content:""; display:block; clear:both; } .columns > div {float:left; vertical-align:top; } .columns > div:first-child, .columns > article:first-child {margin-left:0;} .twoThird {width:64%; margin:1%; } .one-forth {width: 24.5%; float: left; padding-right: 30px;} .three-forth {width:74.5%; float: right;} .docnotfound li {list-style-type: none;} li.last {float: none;} .button.mobile-only, .mobile-only {display: none;} /*** main styles ***/ .pagewidth {width:100%; padding: 0;} .center {max-width:1200px; width: 100%; margin:0 auto; padding: 0 4%;} section {padding: 20px 0;} section:nth-of-type(even) {background-color: #efefef;} #page1 header {padding-bottom: 35%;} #page1 header .center {background-color: rgb(255, 255, 255, .85); max-width: 100%; padding: 0; } #page1 #logo {float: left; max-width: 400px; width: 35%; padding: 0; margin: 0 0 0 15%;} #page1 #header-address {float: right; clear: right; margin: 80px 40px 0 0; display: inline-block;} #header-address {display: none;} #searchform {width: 300px; float: right; margin: 20px 30px 0 0;} header {width:100%; padding: 0; background-image: url(../images/home-pcpg-2025-header2.webp); /* Replace with your own search icon image */ background-repeat: no-repeat; background-position: bottom; background-size: cover; } /*header .center > img {position: absolute; bottom: 0; z-index: -1000; max-height: 830px;} */ #page1 header {background-position: center top; padding-top: 40px;position: relative;} header .center {max-width: 100%; padding: 0; } #logo img { width: 100%;} #logo {float: left; max-width: 400px; width: 30%; padding: 0; margin: 0 0 0 10%;} #page1 header .center #logo { background-color: transparent;} header .center #logo { max-width: 100%; padding: 30px 40px; background-color: rgb(255, 255, 255, .85);} #searchform {width: 300px; float: right; margin: 30px 30px 0 0;} #searchform input {padding: 10px 10px 7px 35px ;} fieldset {position: relative; display: inline-block; width: 100%;} fieldset input[type="text"] {border: 0; background-color: #fff; padding-left: 45px; width: 300px; } fieldset .search-icon {position: absolute; top: 18px; left: 5px; transform: translateY(-50%); width: 30px; height: 30px; background-image: url(../images/search-icon.png); /* Replace with your own search icon image */ background-repeat: no-repeat; background-position: center; background-size: 20px; cursor: pointer;} /* button */ a.button strong { width: 190px; background-color: rgba(157, 103, 96); color: #fff; font-size: 1em; border: #444 1px solid; margin: 3px; display: inline-block; text-transform: uppercase; font-weight: normal; text-align: center; padding: 8px 0;} a.button {float: right; background-color: #fff; margin-top: -5px; font-size: 1em; border: #444 1px solid; display: inline-block; } #schedule .button {margin: 0;} #schedule .button.mobile-only {margin-top: 1em;} #friends a.button {float: none;} footer .right .button {margin-bottom: 1em;} #welcome, #page19 #friends {background-image: url(../images/home-pcpg-heart-bkgd.jpg); background-size: 350px; background-repeat: no-repeat; background-position: top; } #welcome .center {padding: 0 14.5%;} #welcome p {font-size: 2.25em; line-height: 1.25;} #homework {display: none;} #page1 #homework {position: absolute; right: 2.5%; bottom: 30%; width: 12%; opacity: .85; display: inline-block;} #award {display: none;} #page1 #award {position: absolute; bottom: 0; left: 0; margin-top: -100px; width: 100%; display: inline-block;} #award p {background-color: rgba(157, 103, 96, 0.85); width: 100%; padding: 10px 4%; color: #fff; font-size: 2em; margin: 0; line-height: 1.15em; } #hours {margin: 0; padding:0;} #hours .center {/* background-color: #9d6760; */ background-color: rgba(157, 103, 96, 0.85); max-width: 100%;} #hours .center p {color: #fff;padding: 10px 0; margin: 0; font-size: 1.65em;} #hours .center p strong {font-size: .85em; color: #fff; line-height: 1.5; letter-spacing: 2px;} #page1 section {padding-bottom: 0;} #mission {padding: 0;} #mission .right p {margin: 0;} #special .left div {padding-left: 4%;} #mission .left {padding-top: 2em;} #mission .left {padding-right: 4.5%;} #mission .right {padding-left: 0;} #mission .equal-height, #visitor-map .equal-height {display: flex; flex-wrap: wrap; /* Allows columns to wrap to the next line on smaller screens */} #mission .equal-height .half, #visitor-map .equal-height .half {flex: 1; /* Allows columns to grow and shrink proportionally */} #visitor-map {background-color: #F5FAE6; padding: 0;} #visitor-map .left {text-align: center; padding-top: 7%} #visitor-map .left a {font-size: 16px; text-transform: uppercase; } #visitor-map .right {background-image: url(../images/visit-pcpg-2025-visitor-map.jpg); background-repeat: no-repeat; background-size: cover; min-height: 375px; } #visitor-map .right p {margin: 0;} #visitor-map .right img {width: 100%; height: auto;} #map .box {position: relative; padding-bottom: 35%; /* This is the aspect ratio */ height: 0; overflow: hidden;} #map iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} #tour {background-color: #F5FAE6; padding: 2em 0 4em 0;} #tour .center { width: 80%; margin: auto;} #tour h2 {margin-bottom: 1em;} #mission .right {background-image: url(../images/mission-800.webp); background-repeat: no-repeat; background-size: cover;} #mission .left div {padding-right: 4%;} #special img, #history img {width: 48%; margin: 0 3% 25px 0; height: auto;} .steps {float: right; width: 48%; margin: 10px 0 25px 3%; height: auto;} #special img {float: left;} #installations img #installations-2 img {padding: 10px 10px 30px; float: none;} #special-event {width: 50%; margin: 8px 2% 25px 0; height: auto; float: left;} #restoration {width: 31%; margin: 8px 2% 25px 0; height: auto; float: left;} #unity {width: 24%; margin: 8px 0 25px 2%; height: auto; float: right;} #page19 .content2, #page19 .content3, #page16 .content2, #page16 .content3 {display: none;} #page19 #friends, #page19 .center {padding-bottom: 0; margin-bottom: 0;} #events .program-date {color: #9d6760; text-transform: uppercase; font-size: 16px;} .program-date img {width: 30px; margin-top: -3px;} #schedule, #contribute {background-color: #F5FAE6; padding: 1.5em;} #schedule p {margin: 0; color: #657d3e; font-size: 2em;} #schedule p a {font-size: 18px;} #field-trip {color: #657d3e; padding: 1em 0; margin: 0; display: inline-block; float: left;} #contribute .donate, #schedule .donate {float: right; margin: 1em 0;} #friends .center {margin-bottom: 2em;} #friends.row1 .one-forth, #friends.row1 .three-forth {margin-top: 2em;} #friends .one-forth b {display: block;} #page12 #friends {padding-bottom: 0;} #page12 #friends .center {margin-bottom: 0;} #page12 #desktop-only, #page12 #mobile-only {padding-top: 0;} #peacegarden {float: right; width: 50%; margin: 0 0 10px 40px;} #invest {font-size: 2em; width: 60%; margin: auto; margin-bottom: 4em;} #page6 #volunteer {padding: 1em 30%} .simplesearch-results span {font-size: 1em; color: #657d3e;} #page9 .sisea-result a {text-decoration: underline;} .extract {margin-left: 40px;} .extract img {display: none;} .extract h1, .extract h2, .extract h3 {font-size: 1.5em;} .g-recaptcha {display: none;} footer {background-color: #657d3e;} footer p {color: #fff;} footer .left a {color: #9dcc00; font-size: 1.25em; font-weight: bold;} footer .middle {padding-left: 13%;} .donate {background-color: #9d6760; color: #fff; border: 2px solid #fff; display: inline-block; padding: 2px 50px;} .donate a {font-size: 1em; color: #fff; text-transform: uppercase;} footer .middle a {color: #9dcc00; font-size: .75em;} footer .middle ul li {list-style: none; display: block; padding: 0; margin-left: 0; font-size: 1.5em; line-height: 1.75em; } footer .middle ul li a {color: #fff; font-size: 1em;} footer .middle ul li a:hover {color: #9dcc00;} footer .right {text-align: center;} footer .right p {width: 185px; text-align: center; margin: 0 auto 1em; line-height: 1.25em;} #copyright {text-align: center; display: block;} /************** CSS Accordion **************/ /*** Accordion ***/ #directions-parking {padding-bottom: 0;} #faqs .center, #directions .center + .center, #directions .center {padding-left: 1.5%;} #directions {padding-top: 0;} #homework-copy {padding-bottom: 0;} #faqs .accordionheading, #directions .accordionheading {padding: 10px 0 10px 3%; margin-top: 0px; border-top:10px solid #fff;} #faqs .accordioncontent, #directions .accordioncontent {padding: 10px 3% 0 5%; } #free-public {padding-left: 3%; font-size: 1.5em; padding-top: 1em;} .accordioncontent p {font-size: 1em; line-height: 1.25em; padding: 0 0 5px; margin: 0;} .accordionheading p {padding: 0; margin: 0;} .accordionheading {width: 100%; background-color: #F5FAE6; } .accordioncontent {padding: 0 40px; background-color: #F5FAE6; } .accordionheading .title {cursor: pointer; } .accordioncontent {padding-left: 15px; } #faqs {padding-top: 0;} #faqs .accordionheading .title {text-align: left;} #faqs .accordioncontent {text-align: left; } #gift-shop a {float: right; margin-left: 40px;} #gift-shop a {display: inline-block;} #products {text-align: center;} #products > div { width: 30%; margin: 10px 5px; display: inline-block; } .closed .down-triangle {display: none;} .closed .right-triangle {display: inline-block;} .open .down-triangle {display: inline-block;} .open .right-triangle {display: none;} .down-triangle::after, .right-triangle::after {content: " "; display: inline-block; border: solid 1px #000; width: 10px; height: 10px; color: #fff; border-bottom: 0; border-left: 0;} .right-triangle {transform: rotate(45deg); display: inline-block; float: left; margin: 0px 5px 0 -5px;} .down-triangle {transform: rotate(135deg); display: inline-block; float: left; margin: -3px 5px 0 0;} /************** Variable Layout Style **************/ .full-width, .full-width .box {width:100%;} .full-width img {width:100%;} .row {width:100%; } .content-rows:after, .row:after {content:""; display:block; clear:both; } .content-row {padding: 2em 0;} /* .content-row:nth-of-type(odd) {background-color: #ddd;} */ .content-row .one-col {width: 100%;} .content-row .box {float: left;} .content-row p, .content-row .box p {font-size: 1.5em;} .content-row .box div {width:100%; padding: 0 0;} .oneForth {width:23.5%; } .content-row .box.oneForth {margin: 0 1%;} .content-row .box.oneForth:nth-of-type(1) {margin-left: 0;} .content-row .box.oneForth:nth-of-type(4) {margin-right: 0;} .oneThird {width:32%; margin:0; } .content-row .box.oneThird {margin: 0;} .center .columns .oneThird:nth-of-type(2), .content-row .box.oneThird:nth-of-type(2) {margin: 0 2%;} .half {width: 48%; margin: 0; float: left;} .half:nth-of-type(1) {padding-right: 1%;} .half:nth-of-type(2) {padding-left: 1%;} .content-row .box a {text-decoration: none;} .content-row .box {position: relative;} /* .multi-layout-button {margin: 1em auto; display: inline-block; min-width: 175px; font-size: 1.75em; padding: .5em 1em; border: 3px solid #888; text-align: center; color: #888; float: none; } .multi-layout-button {position: absolute; left: 49%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .multi-layout-button:hover {border-color: #aaa; } .link-padding {padding-bottom: 100px; } .full-width {min-height: 125--px; position: relative;} */ /* .center {background-color: #d5d5d5;} * .oneThird:nth-of-type(1) div {padding-left: 0;} .oneThird:nth-of-type(3) div {padding-right: 0;} .content-row .box img {margin: 0 0 1em;} /*** Video ***/ .video-wrapper {/* width: 33%; */ max-width: 100%; /* clear: both; */} .video-container {position: relative; padding-bottom: 61.15%; padding-top: 0px; height: 0; overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important;} /*** forms ***/ form, fieldset {border:0; padding:0; margin:0; } form, #form_container, form div {display: block; width: 100%; padding:0; margin:0; border:0; } ::placeholder {text-transform: uppercase;} input:focus, textarea:focus, select:focus {outline: none; } input, select, textarea, label {background: #fff; font-size :18px; line-heigh: 1.5em; color:#444; resize:none; float: left; display: block; border: 0;} input, select, textarea {background-color: #fff; padding:5px 10px; margin-bottom: 1em; } textarea {overflow:auto; height:10.812em; } input, .checkbox label {background-color: #efefef;} ::-webkit-input-placeholder { color: #444; } :-moz-placeholder {color: #444; } span.error, .content-row .box p.error {color: #E41124; padding: 0; margin: .5em 0; font-size: 1em;} #workemail {position: absolute; left: -10000px;} .radio label, .checkboxes label {float: left; margin-bottom: .5em;} #radio-container, #checkbox-container {float: left; clear: none; } .radio-button, .checkbox {width: 150px; float: left; display: inline-block; clear: none;} .checkbox span {margin-top: 3px; display: inline-block;} #form_container .form-buttons {width: 150px; float: right;} .form-buttons input {background-color: #657d3e; color: #fff; margin-left: 0; width: 150px; margin-top: 0; font-size: 18px; text-transform: uppercase; } .form-buttons input:hover {color: #000;} input[type=submit]:hover {cursor: pointer; background-color: #9dcc00; color: #000;} /*** Comment this out for location fields to be on separate rows ***/ #form_container .two {width: 49%; margin-right: 2%; float: left;} #form_container .two + .two {margin: 0;} form label, form div label { float: left; text-align: right; padding-right: 5px;} form div input, form div select, form #radio-container, form #checkbox-container, form div textarea {width: 100%; float: left; margin-bottom: .5em;} #form_container form .checkboxes { width: 60%; } form #checkbox-container {column-count: 2; clear: left;} #form_container .other input {width: 60%;} #address {margin-bottom: 1em;} form .other label {line-height: 35px;} form .other label, form .other input {float: left;} form .other input {margin-left: 10px;} #address-group input {width: 100%;} #address-group .city {clear: none; float: left; margin-right: 2%; width: 49%; min-width: 230px;} #address-group .state {clear: none; float: left; margin-right: 2%; width: 10%; min-width: 230px;} #address-group .zip {clear: none; float: right; margin-right: 0; width: 15%; min-width: 139px; text-align: right;} #orderTable { width:100%; border-collapse:collapse; } #orderTable th {font-weight: bold; } #orderTable tr td + td, #orderTable tr td + td + td, #orderTable tr td + td + td +td {width: 15%;} #orderTable tr td + td input {float: right;} #orderTable th, #orderTable td { border:1px solid #444; padding:6px; } #orderTable .right { text-align:right; } #orderTable table { width: 100%; border-collapse: collapse; } #orderTable th:first-of-type {text-align: left;} #orderTable th {text-align: right;} #orderTable th, #orderTable td { border: 1px solid #000; padding: 6px; font-size: 18px; } #orderTable input[type=number] { width: 50px; padding: 5px 0; } #orderTable .right { text-align: right; } #orderTable .disabled-row { opacity: 1; } #orderTable .size-boxes label { margin-right: 10px; } #orderTable input[type="checkbox" i] , #orderTable input:disabled {color: #444; border-color: #444;} #orderTable .qty {margin-bottom: 0; text-align: right;} #orderTable .size-boxes .checkbox {float: left; width: auto; margin-right: 10px;} /*** Custom Checkbox ***/ .form input[type="radio"], .form input[type="checkbox"] {width: 30px; display: inline-block; border: 0; padding: 0; clear: left; } #form_container .radio-container label, #form_container .checkbox-container label {display: inline; margin: 5px 10px 0 0;} #form_container .checkbox {margin-bottom: 0;} #form_container .radio-button input, #form_container .checkbox input {display: none;} #form_container .radio-button input + label, #form_container .checkbox input + label {padding: 5px; width: 24px; min-width: 0; border-radius: 0px; display: inline-block; position: relative; border: 0px solid #aaa; margin-right: 8px;} #form_container .radio-container .radio + label, #form_container .checkbox-container .checkbox + label {width: 24px!important;} /* style checkboxes */ #form_container .checkbox span {line-height: 20px; font-size: 18px;} #form_container .checkbox input + label {padding: 10px; } #form_container .checkbox input:checked + label:after {content: '\2714'; font-size: 16px; position: absolute; top: 3px; left: 5px; color: #aaa;} /* style radio buttons */ #form_container .radio-button span {line-height: 20px;} #form_container .radio-button input + label {padding: 10px; border-radius: 50%; width: 20px;} #form_container .radio-button input:checked + label:after {content: '\2B24'; font-size: 18px; position: absolute; top: 2px; left: 2px; color: #aaa;} /*** Shadow Radius ***/ /* -webkit-box-shadow:0 0 6px #666; -moz-box-shadow:0 0 5px #666; box-shadow:0 0 5px #666; */ /*-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; */ /* background: #aaa url(../../assets/sitegraphics/file.png) repeat-x scroll 0px 0px; */ /************** Pagination Style **************/ .pageNav ul {padding: 0; margin: 0;} .pageNav li {list-style-type: none; display: inline-block; border: 1px solid #aaa; margin: 0 1em 0 0; padding: 0; } .pageNav li a {text-decoration: none; padding: 5px 10px; margin: 0; display: inline-block} .pageNav li a.active, .pageNav li a:hover {background-color: #bbb; color:#fff;} /************** Drop Down Menu Style **************/ .dropdownmenu {padding-left: 0px; clear: both; background-color: #657d3e;} .dropdownmenu ul {padding:0; position: relative; z-index: 500; background-color: #657d3e; width: 100%; } .dropdownmenu ul li { padding: 0; margin: 0; width: 13%; text-align: center;} .dropdownmenu ul li#item17 {width: 22%; } .dropdownmenu ul li.last {float:left; margin-right:0; border-right: 0;} .dropdownmenu ul li a {color:#fff; height:3em; line-height:3em; border-right: 1px solid #fff; text-transform: uppercase; font-size: 1.25em; letter-spacing: 0px;} .dropdownmenu ul li a { padding: 0 0px;} .dropdownmenu ul li ul { color:#fff; } .dropdownmenu ul li:hover a, .dropdownmenu ul li a:hover {background-color:#9dcc00;} .dropdownmenu ul li.active {background-color: #9dcc00;} .dropdownmenu ul li:hover ul, .dropdownmenu ul li a:hover ul { top:45px; left:0; } .dropdownmenu ul li:hover ul li {width: 100%;} .dropdownmenu ul li:hover ul li a {background-color:#657d3e; text-align: center;} .dropdownmenu ul li ul li:hover a {width: 100%; background-color: #9dcc00;} .dropdownmenu > ul li.last {width: 13.15%; margin-right: -3px;} #item20 {display: none;} /* vertical align menu * .dropdownmenu ul li {width: 15%; display: table; } .dropdownmenu ul li a {line-height: 1em; display: table-cell; vertical-align: middle; text-align: center;} /* 2nd level .dropdownmenu ul li:hover ul li a, .dropdownmenu ul li a:hover ul li a {color: #fff; line-height:1.2em; padding:5px 20px; width:165px } .dropdownmenu ul li:hover ul li a:hover, .dropdownmenu ul li a:hover ul li a:hover {color:#000; } /* 3rd level */ .dropdownmenu ul li:hover ul li:hover ul, .dropdownmenu ul li a:hover ul li a:hover ul { left:210px; width:100px; } /************** Slick Nav Menu Style **************/ .slicknav_menu {background: #657d3e; padding:5px;} .slicknav_nav { color:#fff; margin:0; padding:0; font-size:0.875em;} .slicknav_nav .slicknav_arrow {color: #fff;} .slicknav_menu .slicknav_menutxt {font-size: 1.5em;} .slicknav_menu .slicknav_btn {background-color: #657d3e; margin: 5px 5px 6px; text-decoration:none;} .slicknav_menu {display:none; font-size:16px;} .slicknav_menu ul {margin-left: 0;} .slicknav_menu li {margin-bottom: 0; padding: 0;} .slicknav_menu li.last {float: none; } .slicknav_menu .slicknav_menutxt { color: #FFF; font-weight: bold;} .slicknav_menu .slicknav_icon-bar {background-color: #fff; } .slicknav_nav .slicknav_item:hover {background: #9dcc00; color:#fff;} .slicknav_nav a:hover{background:#9dcc00; color:#fff;} /************** Pagination Style **************/ .pageNav ul {padding: 0; margin: 0;} .pageNav li {list-style-type: none; display: inline-block; border: 1px solid #aaa; margin: 0 1em 0 0; padding: 0; } .pageNav li a {text-decoration: none; padding: 5px 10px; margin: 0; display: inline-block} .pageNav li a.active, .pageNav li a:hover {background-color: #bbb; color:#fff;} /*** vertical align content ***/ .vertical-align { width: 150px; height: 150px; background-color: #aaa; padding: 0px 10px; display: table; } p.vertical-align-inner {display: table-cell; vertical-align: middle; text-align: center; font-size: 13px; } /*** Accordion *** .accordionheading h2 {cursor: pointer;} .accordioncontent {padding-left: 15px; } .closed .down-triangle {display: none;} .closed .right-triangle {display: inline-block;} .open .down-triangle {display: inline-block;} .open .right-triangle {display: none;} .right-triangle {width: 0px; float: left; margin: 8px 4px 0 0; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent #000 transparent } .down-triangle {width: 0px; float: left; margin: 8px 4px 0 0; height: 0px; border-style: solid; border-width: 7px 5px 0 5px; border-color: #000 transparent transparent } /* http://apps.eky.hk/css-triangle-generator/ */ /*** boxes ***/ .boxes > div {border:1px solid #505a68; position:relative; padding:10px; margin:0 0 30px; height:1%; } .boxes > div:after {content:""; display:block; clear:both; } .boxes h3 {font-size:1.714em; line-height:2.583em; text-align:center; margin:-10px -10px 10px -10px; border-top:0px solid #909eb2; border-bottom:0px solid #545b65; background:#666;} .boxes h3 a {display:block; text-decoration:none; color: #fff; } .boxes .content {width:83%; overflow:hidden; margin:0 auto; } .boxes .readMore {position:absolute; top:100%; margin:-2.143em 0 0; width:100%; text-align:center; } /*** Footer ***/ footer {width:100%; overflow:hidden; padding:24px 0; color:#fff; line-height:16px; } footer a {color:#000; } footer .social {float: right;} footer .social a {text-decoration: none;} #copyright {padding: 0;} /******* make standard embedded google maps responsive ********/ #google-map {position: relative; padding-bottom: 56%; /* This is the aspect ratio */ height: 0; overflow: hidden;} #google-map iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} /**** For responsive custom google map with API **** #map_container {position: relative; width: 80%; margin: 100px 0 0;} #map {height: 0; overflow: hidden; position: relative; width: 80%; margin: auto; padding-bottom: 42.25%; padding-top: 30px; } #map #content img {max-width: 40px;} #map #content h1 {font-size: 1.5em;} /*** clearing ***/ .stretch, .clear { clear: both; height: 1px; margin: 0; padding: 0; font-size: 15px; line-height: 1px; } .clearfix:after { clear: both; height: 0; display: block; visibility: hidden; content: "."; } .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end clearing */ #page12 #desktop-only {display: block;} #page12 #mobile-only {display: none;} } /* End Media Query */ @media all and (max-width: 1110px){ } @media all and (max-width: 960px){ .dropdownmenu ul li {width: 12.75%; } .dropdownmenu ul li#item17 {width: 23%; } } @media all and (max-width: 900px){ .dropdownmenu ul #item17 a {line-height: 1.1; padding-top: .5em;} .dropdownmenu ul #item17 {line-height: 1.1; } } @media all and (max-width: 780px){ form label, form input, form textarea, form select, form .checkbox, form #zip, form #state {/* text-align: left!important; width: 100%!important; margin-right: 0;*/} .form input[type="checkbox"] {width: 35px!important;} .form-buttons input {margin-left: 0;} } @media all and (max-width: 680px){ #searchform {width: 200px; margin-right: 10px;} #searchform:not(#page1 #searchform) {margin-top: 10px;} #logo:not(#page1 #logo) {padding: 0; margin-left: 4%; width: 35%;} #page1 #logo {margin: 20px 0 0 10px;} #page1 #header-address {margin: 30px 40px 20px 0;} #history {margin-bottom: 0; padding-bottom:0;} #peacegarden {width: 100%; } #friends.row1 .one-forth, #friends.row1 .three-forth {float: none; width: 100%;} #friends.row1 .three-forth {margin: 0 0 2em;} #friends.row1 .one-forth p {margin-bottom: 0;} #mission .equal-height, #visitor-map .equal-height {display: block;} .right {margin-top: 1em;} #footer .left {text-align: center;} #footer .left img {width: 50%;} #footer .middle {padding: 0; margin: 0 0 1em 0;} #footer .middle ul {text-align: center;} } @media all and (max-width: 600px){ .columns > div {float:none; margin:0; width:100%; } .js #menu, .dropdownmenu {display:none;} .js .slicknav_menu {display:block;} #page12 #desktop-only {display: none;} #page12 #mobile-only {display: block;} .content-row .box {width: 100%!important; float: none;} #item20 {display: block;} .mobile-only {display: inline-block; float: none;} .desktop-only {display: none;} .button.mobile-only {display: inline-block; float: none;} .button.desktop-only {display: none;} #gift-shop .button.mobile-only {display: block;} #gift-shop .button.desktop-only {display: none;} #schedule p, #gift-shop p {text-align: center; display: block;} #gift-shop p a {float: none; margin-left: 0;} #products > div {width: 100%; margin: auto;} #orderTable {width: 95%;margin: 0 2.5%;} } @media all and (max-width: 576px){ .accordionheading[headerindex="6h"] .right-triangle {margin-top: -28px; margin-left: -20px; } .accordionheading[headerindex="6h"] .title {padding-left: 15px;} } @media all and (max-width: 320px){ } @media all and (min-device-width: 768px) and (max-device-width: 1024px){ }