| 1 | :root {
|
|---|
| 2 | --content-height: 88vh;
|
|---|
| 3 | --header-height: 12vh;
|
|---|
| 4 | --primary-colour: #FCC100;
|
|---|
| 5 | --secondary-colour: #12264A;
|
|---|
| 6 | --menu-hover: #E4E4E4;
|
|---|
| 7 | }
|
|---|
| 8 |
|
|---|
| 9 | * {box-sizing: border-box}
|
|---|
| 10 |
|
|---|
| 11 | a {color: #003FC5; text-decoration: none; transition: 0.3s}
|
|---|
| 12 | blockquote {border-left: 10px solid var(--primary-colour); font-style: italic; padding-left: 20px}
|
|---|
| 13 | body {background: #FFF; color: #555; font-family: Roboto; font-size: 18px; margin: 0; padding: 0; width: 100%}
|
|---|
| 14 | /* h1, h2, h3, h4 {font-family: Roboto Slab} */ /* **** GS3 */
|
|---|
| 15 | h1 {color: var(--primary-colour); font-size: 42px; margin: 30px 0}
|
|---|
| 16 | h2 {color: var(--primary-colour); font-size: 34px; margin: 40px 0 10px}
|
|---|
| 17 | h2.center-rule {display: flex; align-items: center; border-bottom: 2px solid #BBB; color: #999; font-size: 40px; font-weight: 300; justify-content: center; margin: 80px auto 50px; text-align: center; text-transform: uppercase}
|
|---|
| 18 | h3 {color: var(--primary-colour); font-size: 28px; margin-bottom: 0}
|
|---|
| 19 | hr {color: #EEE}
|
|---|
| 20 | p {line-height: 175%} /* GS3, changed from 150% to 175% on require of ThomFong */
|
|---|
| 21 | span.blockquote-source {display: block; font-style: normal; font-size: 16px; font-weight: bold; text-align: right}
|
|---|
| 22 | span.intro {color: var(--secondary-colour); font-size: 22px; font-weight: bold}
|
|---|
| 23 | strong {font-weight: bold}
|
|---|
| 24 |
|
|---|
| 25 | #block-h360-sikyon-content li a:hover, p a:hover {border-bottom: 2px solid #003FC5; transition: 0.1s}
|
|---|
| 26 | #block-h360-sikyon-content li {line-height: 150%; margin: 10px 0}
|
|---|
| 27 | #block-h360-sikyon-content ul {list-style-type: square}
|
|---|
| 28 | #block-h360-sikyon-content .theme-button a {border-style: solid; border-width: 2px; text-decoration: none}
|
|---|
| 29 | #block-h360-sikyon-content .theme-button a:hover {color: #FFF}
|
|---|
| 30 | #block-h360-sikyon-content .theme-button svg {display: none}
|
|---|
| 31 |
|
|---|
| 32 | svg.ext, svg.mailto {padding: 0.2em 0.2em 0 0.1em; height: 23px; width: 23px}
|
|---|
| 33 |
|
|---|
| 34 | /* DRUPAL STYLES */
|
|---|
| 35 | #block-h360-sikyon-local-tasks {border-color: #E4E4E4; border-style: solid; border-width: 2px 0; margin-bottom: 30px; width: 100%}
|
|---|
| 36 | #block-h360-sikyon-local-tasks > ul {list-style-type: none; margin: 0; padding: 0}
|
|---|
| 37 | #block-h360-sikyon-local-tasks > ul li {display: inline-block}
|
|---|
| 38 | #block-h360-sikyon-local-tasks > ul li a {display: block; color: #666; padding: 10px 20px}
|
|---|
| 39 | #block-h360-sikyon-local-tasks > ul li a:hover {background: #E6E6E6}
|
|---|
| 40 |
|
|---|
| 41 | .eu-cookie-compliance-banner {padding: 10px 0}
|
|---|
| 42 | .eu-cookie-compliance-banner .popup-content {display: flex; align-items: center; justify-content: space-between}
|
|---|
| 43 | .eu-cookie-compliance-banner #popup-buttons {float: none; margin: 0}
|
|---|
| 44 | .eu-cookie-compliance-banner #popup-buttons button {border: 0; border-radius: 0; box-shadow: 0 0; font-size: 16px; font-weight: normal; margin: 5px 0; padding: 10px; text-shadow: 0 0}
|
|---|
| 45 | .eu-cookie-compliance-banner #popup-buttons button.agree-button {background: #FFF; border: 2px solid #FFF; color: #555}
|
|---|
| 46 | .eu-cookie-compliance-banner #popup-buttons button.decline-button {background: none; border: 2px solid #FFF; color: #FFF; font-family: inherit}
|
|---|
| 47 | .eu-cookie-compliance-banner #popup-buttons button:hover {background: var(--primary-colour); color: #FFF}
|
|---|
| 48 | .eu-cookie-compliance-banner #popup-text {float: none; margin: 0}
|
|---|
| 49 | .eu-cookie-compliance-banner h2 {font-family: adelle-sans, arial !important}
|
|---|
| 50 |
|
|---|
| 51 | div[data-drupal-messages] {background: #E2FDE5; border: 2px solid #9AC69E; border-radius: 10px; color: #587C5B; margin-bottom: 20px; padding: 10px 20px}
|
|---|
| 52 |
|
|---|
| 53 | nav.pager {display: flex; border-top: 1px dashed #DDD; justify-content: center; margin-top: 20px; padding-top: 5px; width: 100%}
|
|---|
| 54 | nav.pager li {display: block; float: left}
|
|---|
| 55 | nav.pager li[role="presentation"] {cursor: not-allowed}
|
|---|
| 56 | nav.pager li a, nav.pager li[role="presentation"] {display: block; border: 1px solid #E4E4E4; margin-left: -1px !important; padding: 10px 15px}
|
|---|
| 57 | nav.pager li.is-active a {background: var(--primary-colour); border-color: var(--primary-colour); color: #FFF}
|
|---|
| 58 | nav.pager li:hover:not(.is-active) a {background: #F4F4F4}
|
|---|
| 59 | nav.pager ul {list-style-type: none; padding: 0}
|
|---|
| 60 |
|
|---|
| 61 | /* GENERAL STYLES */
|
|---|
| 62 | .theme-button a, .theme-button.js {display: block; float: left; border: 2px solid var(--primary-colour); color: var(--primary-colour); cursor: pointer; padding: 10px 20px; user-select: none}
|
|---|
| 63 | .theme-button a:active, .theme-button a:hover {background: var(--primary-colour); color: #FFF}
|
|---|
| 64 | .theme-button.full-width a {text-align: center; width: 100%}
|
|---|
| 65 | .theme-button.in-text {display: flex}
|
|---|
| 66 | .theme-button.margins {display: flex; margin: 20px 0}
|
|---|
| 67 | .theme-button.twitter a {background-image: url("/sites/all/images/icon-twitter.svg"); background-repeat: no-repeat; background-position: 10px center; background-size: 25px 25px; border-color: #1DA1F2; color: #1DA1F2; padding-left: 45px}
|
|---|
| 68 | .theme-button.twitter a:hover {background: #1DA1F2; color: #FFF}
|
|---|
| 69 | .theme-button.white a {border-color: #FFF; color: #FFF}
|
|---|
| 70 | .theme-button.white a:hover {background: #FFF; color: var(--primary-colour) !important}
|
|---|
| 71 |
|
|---|
| 72 | .theme-table table {border-collapse: separate; border-spacing: 5px}
|
|---|
| 73 | .theme-table table td {padding: 10px}
|
|---|
| 74 |
|
|---|
| 75 | .view-content .admin-links {position: absolute; right: 5px; top: 5px; display: flex; border: 1px solid #DDD; font-size: 14px; z-index: 1}
|
|---|
| 76 | .view-content .admin-links a {background: #FFF; color: var(--secondary-colour-sea) !important; padding: 5px 10px}
|
|---|
| 77 | .view-content .admin-links a:hover {background: #AAA; color: #FFF !important}
|
|---|
| 78 |
|
|---|
| 79 | .views-element-container .admin-buttons {display: flex; flex-wrap: wrap; background: #DDD; justify-content: flex-start; margin-bottom: 30px; padding: 10px 20px; width: 100%}
|
|---|
| 80 | .views-element-container .admin-buttons .admin-button a {display: flex; background: var(--secondary-colour); border-radius: 30px; color: #FFF; margin-right: 20px; padding: 10px 30px; transition: 0.3s}
|
|---|
| 81 | .views-element-container .admin-buttons .admin-button a:hover {background: var(--primary-colour)}
|
|---|
| 82 |
|
|---|
| 83 | .views-exposed-form {background: #F4F4F4; margin-bottom: 20px; padding: 20px}
|
|---|
| 84 | .views-exposed-form .form-checkboxes.form--inline .form-item {margin-right: 20px}
|
|---|
| 85 | .views-exposed-form .fieldset-legend, .views-exposed-form label {display: block; color: var(--secondary-colour)}
|
|---|
| 86 |
|
|---|
| 87 | /* HEADER STYLES */
|
|---|
| 88 | #header-content {position: relative;
|
|---|
| 89 | background: #FFF;
|
|---|
| 90 | /* Thin down the thick border-bottom line for GS3 embedding */
|
|---|
| 91 | /* border-bottom: 10px solid var(--secondary-colour); */
|
|---|
| 92 | border-bottom: 10px solid var(--secondary-colour); /* had made it 2px to fit in with The-Willow design, but main site is 10px */
|
|---|
| 93 | z-index: 3}
|
|---|
| 94 | #header {position: relative}
|
|---|
| 95 | #header .centered {position: relative; display: flex; justify-content: space-between}
|
|---|
| 96 | #banner {position: relative; z-index: 1}
|
|---|
| 97 | #banner video {height: auto; width: 100%}
|
|---|
| 98 | #banner .banner-title {position: absolute; bottom: 0; left: 0; border-bottom: 5px solid #E77A0B; width: 100%; z-index: 100}
|
|---|
| 99 | #banner .banner-title h1 {display: block; float: right; background: var(--primary-colour); color: #FFF; margin: 0; padding: 20px}
|
|---|
| 100 | .banner img {height: auto; width: 100%}
|
|---|
| 101 | .flexslider {border: 0; margin: 0}
|
|---|
| 102 | .flexslider .overlay {background: #5D918A; color: #FFF; padding: 20px}
|
|---|
| 103 | .flexslider .overlay .theme-button a {background: rgba(255,255,255,0.3)}
|
|---|
| 104 | .flexslider .overlay .theme-button {margin-top: 15px}
|
|---|
| 105 | .flexslider .overlay .theme-button a:hover {background: rgba(255,255,255,1); color: var(--primary-colour)}
|
|---|
| 106 | .flexslider .overlay h2 {color: #FFF; font-size: 40px; line-height: 100%; margin-top: 0}
|
|---|
| 107 | .flexslider .overlay-content {float: right; color: #FFF; font-size: 55px; font-weight: 500; line-height: 130%; padding: 0 15px 50px 0; text-align: right; text-shadow: 0 0 5px #000, 0 0 20px #000; text-transform: uppercase; width: 35%}
|
|---|
| 108 | .flexslider .overlay-logo {display: flex; align-items: center; flex-basis: 30%; padding: 10px 20px}
|
|---|
| 109 | .flexslider .overlay-logo a {width: 100%}
|
|---|
| 110 | .flexslider .overlay-logo.uoy {padding: 10px 40px}
|
|---|
| 111 | .flex-direction-nav a {overflow: inherit !important}
|
|---|
| 112 | .flex-direction-nav a::before {color: #FFF !important; text-shadow: 0 0 10px rgba(0, 0, 0, 1) !important}
|
|---|
| 113 |
|
|---|
| 114 | .banner > .view-content {z-index: 5}
|
|---|
| 115 | .banner > .views-element-container {z-index: 10}
|
|---|
| 116 | .homepage-content {position: relative; background: var(--primary-colour); z-index: 5}
|
|---|
| 117 | .homepage-content:before {position: absolute; content: ''; background: var(--primary-colour); width: 100%; height: 100%; top: 0; left: 0; transform: skewY(-2deg); transform-origin: 0 0; z-index: -1}
|
|---|
| 118 | .homepage-content h2 {color: #FFF; font-size: 60px; font-weight: bold; margin-top: -30px}
|
|---|
| 119 | .homepage-content p {font-family: Oswald; font-size: 30px; margin: 0}
|
|---|
| 120 | .homepage-content .banner-content {float: right; color: #FFF; padding: 0 20px 20px 0; text-align: right; width: 700px}
|
|---|
| 121 | .homepage-content .centered {justify-content: flex-end !important}
|
|---|
| 122 | .homepage-content .view-content {position: relative; background: url(extra-css-images/sl-logo-graphic-dark.svg) no-repeat var(--primary-colour); background-position: right top; background-size: 120% 300%; margin-top: -10px; z-index: 5}
|
|---|
| 123 |
|
|---|
| 124 | #header-background {background: #FFF; width: 100%}
|
|---|
| 125 | #logo-background {position: absolute; background: #FFF; border: 10px solid var(--secondary-colour); width: 320px; height: 215px; z-index: 4}
|
|---|
| 126 | #logo-background-wrap {position: absolute; top: 0; left: 0; width: 100%; z-index: 2}
|
|---|
| 127 | #block-h360-sikyon-branding {position: absolute; left: 10px; top: 12px; background: #FFF; padding: 0 20px; width: 300px}
|
|---|
| 128 | #block-subpage-logo img {display: block; width: 100%}
|
|---|
| 129 |
|
|---|
| 130 | /* CONTENT STYLES */
|
|---|
| 131 | #main-container #content > div {display: flex; flex-direction: column; padding: 30px 20px; min-height: 500px; width: 100%}
|
|---|
| 132 |
|
|---|
| 133 | /* Contact form */
|
|---|
| 134 | .contact-form {float: left; background: #F4F4F4; padding: 20px; width: 100%}
|
|---|
| 135 | .contact-form label:not([class^="option"]) {float: left; background: #DDD; margin-right: 10px; padding: 6px 10px; width: 180px}
|
|---|
| 136 | .contact-form #edit-actions .button {background: var(--primary-colour); border: 0; border-radius: 30px; color: #FFF; cursor: pointer; font-size: 18px; margin-top: 20px; padding: 10px 30px}
|
|---|
| 137 | .contact-form .form-item {float: left; margin: 5px 0; width: 100%}
|
|---|
| 138 | .contact-form .form-email, .contact-form .form-text, .contact-form .text-full {font-size: 18px; padding: 8px 10px 7px}
|
|---|
| 139 | .contact-form .captcha, .contact-form #edit-actions {float: left; width: 100%}
|
|---|
| 140 |
|
|---|
| 141 | /* Discover */
|
|---|
| 142 | .authors .view-container {display: flex; flex-wrap: wrap}
|
|---|
| 143 | .authors.article .author {display: flex; background: #F4F4F4; padding: 20px; width: 100%}
|
|---|
| 144 | .authors.article .author-bio {display: none}
|
|---|
| 145 | .authors.article .author-details {padding-left: 20px}
|
|---|
| 146 | .authors.article .author-name {color: var(--secondary-colour); font-size: 28px}
|
|---|
| 147 | .authors.article .author-role {color: #888; font-size: 24px}
|
|---|
| 148 | .authors.article .theme-button {margin-top: 10px}
|
|---|
| 149 | .discover .feed-item {background: #F4F4F4}
|
|---|
| 150 |
|
|---|
| 151 | #block-discover-authors-article {border-top: 1px solid #DDD; margin-top: 30px; padding-top: 30px}
|
|---|
| 152 | #block-discover-authors-article h2 {margin-top: 0}
|
|---|
| 153 |
|
|---|
| 154 | /* Events - feed */
|
|---|
| 155 | .events .event {position: relative; background: var(--secondary-colour); flex-direction: column; padding: 20px}
|
|---|
| 156 | .events .event h3 {margin-top: 10px}
|
|---|
| 157 | .events .event-category {color: #FFF; font-family: Oswald; font-size: 26px; padding-bottom: 5px}
|
|---|
| 158 | .events .event-date-loc {border-color: #FFF; border-style: solid; border-width: 1px 0; margin: 8px 0; padding: 8px 0}
|
|---|
| 159 | .events .event-details {color: #FFF}
|
|---|
| 160 | .events .event-image img {height: auto; width: 100%}
|
|---|
| 161 |
|
|---|
| 162 | [id^="views-exposed-form-"] fieldset {display: block; border: 0; font-size: 20px; margin: 5px 0; padding: 0}
|
|---|
| 163 | [id^="views-exposed-form-"] fieldset legend, .form-item-keywords label {display: block; float: left; background: #DDD; padding: 10px; width: 23%}
|
|---|
| 164 | [id^="views-exposed-form-"] fieldset .fieldset-wrapper {display: flex; float: left; margin-left: 2%; width: 75%}
|
|---|
| 165 | [id^="views-exposed-form-"] fieldset .fieldset-wrapper input:not([type="checkbox"]):not([type="radio"]) {margin: 0 20px 0 0; width: 180px}
|
|---|
| 166 | [id^="views-exposed-form-"] input[type="text"] {border-color: #DDD; border-style: solid; font-size: 20px; padding: 8px 10px}
|
|---|
| 167 | [id^="views-exposed-form-"] label[for^="edit-date-"] {display: none}
|
|---|
| 168 | [id^="views-exposed-form-"] > .form-item:not(.form-wrapper) {display: flex; margin: 5px 0}
|
|---|
| 169 | [id^="views-exposed-form-"] > .form-item input:not([name="status"]) {display: flex; float: left; margin-left: 2%}
|
|---|
| 170 | [id^="views-exposed-form-"] > .form-item label:not([for^="edit-category"]) {background: #DDD; font-size: 20px; padding: 10px; flex-basis: 23%}
|
|---|
| 171 | [id^="views-exposed-form-"] .form-checkboxes {display: flex; flex-wrap: wrap; width: 100%}
|
|---|
| 172 | [id^="views-exposed-form-"] .form-checkboxes > .form-item {display: flex; padding: 10px 10px 10px 0; width: 33.333%}
|
|---|
| 173 | [id^="views-exposed-form-"] .form-checkbox {padding: 3px}
|
|---|
| 174 | [id^="views-exposed-form-"] .form-checkbox:checked {background: #FF0000}
|
|---|
| 175 | [id^="views-exposed-form-"] .form-checkbox:checked + label {background: var(--primary-colour); color: #FFF}
|
|---|
| 176 | [id^="views-exposed-form-"] .form-checkboxes > .form-item {font-size: 16px}
|
|---|
| 177 | [id^="views-exposed-form-"] [id^="edit-actions"] {display: flex; border-top: 1px solid #DDD; margin-top: 10px; padding-top: 10px}
|
|---|
| 178 | [id^="views-exposed-form-"] [id^="edit-actions"] input {display: flex; background: none; border: 2px solid var(--primary-colour); color: var(--primary-colour); cursor: pointer; font-size: 20px; margin-right: 20px; padding: 10px 20px; transition: 0.3s}
|
|---|
| 179 | [id^="views-exposed-form-"] #edit-submit-events:hover {background: var(--primary-colour); color: #FFF}
|
|---|
| 180 |
|
|---|
| 181 | /* Events - page */
|
|---|
| 182 | .date-divider {display: inline-block; background: var(--primary-colour); margin: 0 10px; height: 20px; width: 5px}
|
|---|
| 183 | #event-details {display: flex; align-items: center; border-color: #DDD; border-style: solid; border-width: 2px 0; font-size: 20px; margin: 15px 0; padding: 10px 0}
|
|---|
| 184 | #event-image img {height: auto; width: 100%}
|
|---|
| 185 | #event-subtitle {color: var(--secondary-colour); font-size: 28px}
|
|---|
| 186 |
|
|---|
| 187 | /* Feeds */
|
|---|
| 188 | .feed-container.dividers .feed-item:not(:last-child) {border-bottom: 1px dashed #CCC; padding-bottom: 30px}
|
|---|
| 189 | .feed-container .feed-details .theme-button {margin-top: 10px}
|
|---|
| 190 | .feed-item {position: relative; display: flex; flex-direction: column; margin-bottom: 30px; padding: 20px}
|
|---|
| 191 | .feed-item.dividers {border-bottom: 1px dashed #DDD; padding-bottom: 30px}
|
|---|
| 192 | .feed-item h3 {margin: 5px 0}
|
|---|
| 193 | .feed-item img {height: auto; width: 100%}
|
|---|
| 194 | .feed-item p {margin: 0}
|
|---|
| 195 | .feed-item .feed-author {display: flex; flex-wrap: wrap; color: var(--secondary-colour); font-size: 20px; margin-bottom: 5px}
|
|---|
| 196 | .feed-item .feed-author .author:last-child:before {content: " and "}
|
|---|
| 197 | .feed-item .feed-author .author:first-child {padding: 0 5px}
|
|---|
| 198 | .feed-item .feed-author .author:first-child:before {content: ""}
|
|---|
| 199 | .feed-item .feed-body {line-height: 150%}
|
|---|
| 200 | .feed-item .feed-date {color: #888}
|
|---|
| 201 | .feed-item .feed-subtitle {color: #888; font-size: 20px; margin-bottom: 5px}
|
|---|
| 202 |
|
|---|
| 203 | /* Homepage */
|
|---|
| 204 | .path-frontpage #block-h360-sikyon-content {display: none}
|
|---|
| 205 |
|
|---|
| 206 | /* Images */
|
|---|
| 207 | #block-h360-sikyon-content [class*="align-"] {margin: 30px 0}
|
|---|
| 208 | #block-h360-sikyon-content [class*="align-"] img {display: flex}
|
|---|
| 209 | #block-h360-sikyon-content figcaption {background: #F4F4F4; padding: 5px 10px; font-size: 16px; margin-top: 3px}
|
|---|
| 210 |
|
|---|
| 211 | /* News */
|
|---|
| 212 | .page-node-type-news h1 {margin-bottom: 10px}
|
|---|
| 213 | #news-date {border-bottom: 2px solid #DDD; color: #888; font-size: 24px; padding-bottom: 10px}
|
|---|
| 214 | #news-image {float: right; margin: 1em 0 1em 30px}
|
|---|
| 215 | #social-media-icons {display: flex; justify-content: space-around}
|
|---|
| 216 | #social-media-icons img {height: 50px; width: 50px}
|
|---|
| 217 | #twitter-feed {width: 100%}
|
|---|
| 218 |
|
|---|
| 219 | /* Partners */
|
|---|
| 220 | #partner-logos {display: flex; border-top: 2px solid #EEE; flex-wrap: wrap; justify-content: space-between; width: 100%}
|
|---|
| 221 | .partner-logo {display: flex; align-items: center; justify-content: center; margin: 20px 0; width: 28%}
|
|---|
| 222 | .partner-logo img {height: auto; width: auto; max-height: 200px; max-width: 100%}
|
|---|
| 223 |
|
|---|
| 224 | /* Publications */
|
|---|
| 225 | .publications {border-top: 1px solid #DDD; margin-top: 30px; padding-top: 50px}
|
|---|
| 226 | .publications .feed-title {color: var(--primary-colour); font-size: 28px}
|
|---|
| 227 | .publication-download {display: flex; margin-top: 20px}
|
|---|
| 228 |
|
|---|
| 229 | #publication-authors {border-color: #DDD; border-style: solid; border-width: 2px 0; font-size: 22px; padding: 10px 0}
|
|---|
| 230 | #publication-date {color: #888; font-size: 22px; margin-bottom: 15px}
|
|---|
| 231 | #publication-pretitle {color: #888; font-size: 22px}
|
|---|
| 232 |
|
|---|
| 233 | /* Social media */
|
|---|
| 234 | .social-icons {display: flex}
|
|---|
| 235 | .social-icons a {display: flex; margin: 0 10px}
|
|---|
| 236 | .social-icons a img {height: auto; width: 100%}
|
|---|
| 237 |
|
|---|
| 238 | /* Team */
|
|---|
| 239 | .team h3 {flex-basis: 100%; font-size: 34px; text-transform: uppercase}
|
|---|
| 240 | .team .view-content {display: flex; align-items: stretch; flex-wrap: wrap}
|
|---|
| 241 | .team .member {position: relative; display: flex; flex-direction: column; background: #F4F4F4}
|
|---|
| 242 | .team .member h2 {margin: 0}
|
|---|
| 243 | .team .member img {height: auto; width: 100%}
|
|---|
| 244 | .team .member p {margin: 0 0 10px 0}
|
|---|
| 245 | .team .member .team-bio {display: none}
|
|---|
| 246 | .team .member .team-details {padding: 10px}
|
|---|
| 247 | .team .member .team-role {font-family: oswald; font-size: 22px}
|
|---|
| 248 | .team .member .theme-button {margin-top: 10px}
|
|---|
| 249 |
|
|---|
| 250 | /* Venues */
|
|---|
| 251 | .venues .view-content {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 252 | .venues .venue {position: relative; background: var(--primary-colour); margin: 30px 0}
|
|---|
| 253 | .venues .venue h2 {color: #FFF; margin-top: 0}
|
|---|
| 254 | .venues .venue img {display: block; height: auto; width: 100%}
|
|---|
| 255 | .venues .venue-details {display: flex; color: #FFF; flex-direction: column; padding: 20px 20px 190px 20px}
|
|---|
| 256 | .venues .venue-details p {margin: 0 0 10px}
|
|---|
| 257 | .venues .venue-map {position: absolute; bottom: 10px; left: 0; height: 150px; width: 100%}
|
|---|
| 258 |
|
|---|
| 259 |
|
|---|
| 260 | /* RIGHT REGION */
|
|---|
| 261 | #block-addtoany {background: #FAFAFA; border: 2px solid #E4E4E4; margin-top: 30px; padding: 20px}
|
|---|
| 262 | #block-addtoany p {margin: 0}
|
|---|
| 263 |
|
|---|
| 264 | #right nav {background: #F4F4F4; padding: 20px}
|
|---|
| 265 | #right nav h2 {margin-bottom: 20px}
|
|---|
| 266 | #right nav > ul, #right nav > ul ul {list-style-type: none; margin: 0; padding: 0}
|
|---|
| 267 | #right nav > ul a {display: block; color: #444; font-size: 20px; padding: 10px}
|
|---|
| 268 | #right nav > ul a:hover {background: #E4E4E4}
|
|---|
| 269 | #right nav > ul a.is-active {background: var(--primary-colour); color: #FFF}
|
|---|
| 270 | #right nav > ul ul a {font-size: 16px; padding-left: 30px}
|
|---|
| 271 |
|
|---|
| 272 |
|
|---|
| 273 | /* TRAIL MANAGEMENT */
|
|---|
| 274 | .trail-admin .trail {margin-top: 50px}
|
|---|
| 275 | .trail-admin .trail-details {display: flex; align-items: center; background: var(--primary-colour); padding: 5px}
|
|---|
| 276 | .trail-admin .trail-details h2 {color: #FFF; margin: 0 0 0 30px}
|
|---|
| 277 | .trail-admin .trail-details img {display: block}
|
|---|
| 278 | .trail-admin .trail-details .trail-buttons {display: flex; gap: 20px; margin: 0 30px 0 auto}
|
|---|
| 279 |
|
|---|
| 280 | .trail-admin table {border-collapse: collapse; font-size: 16px; width: 100%}
|
|---|
| 281 | .trail-admin td {padding: 8px 10px}
|
|---|
| 282 | .trail-admin td:first-child {width: 50%}
|
|---|
| 283 | .trail-admin tr:not(:last-child) {border-bottom: 1px solid #DDD}
|
|---|
| 284 |
|
|---|
| 285 |
|
|---|
| 286 | /* FOOTER STYLES */
|
|---|
| 287 | #footer-content {position: relative; margin-top: 50px; padding: 40px 15px}
|
|---|
| 288 | #footer-content .centered {position: relative; display: flex}
|
|---|
| 289 | #footer-content nav > ul a {display: block; color: #888; padding: 5px 15px}
|
|---|
| 290 | #footer-content nav > ul > li:not(:last-child) {border-bottom: 1px solid #DDD; margin-right: 20px}
|
|---|
| 291 | #footer-content nav > ul a:hover {background: #E6E6E6}
|
|---|
| 292 | #footer-content nav > ul {list-style-type: none; margin: 0; padding: 0}
|
|---|
| 293 | #block-footer-mainnav, #block-footer-menu {float: left}
|
|---|
| 294 |
|
|---|
| 295 | #post-footer-content > .centered {color: #AAA; padding: 8px 15px}
|
|---|
| 296 | #post-footer-content > .centered > div:not([class]) {display: flex; justify-content: space-between}
|
|---|
| 297 | #block-copyright-footer {font-size: 16px}
|
|---|
| 298 | #block-h360-details > div:not([class]) {display: flex; align-items: center; font-size: 16px; text-transform: uppercase}
|
|---|
| 299 | #block-h360-details a {line-height: 100%}
|
|---|
| 300 | #block-h360-details img {display: block; margin: -2px 0 0 6px; height: 20px; width: auto}
|
|---|
| 301 |
|
|---|
| 302 | /* TEASERS */
|
|---|
| 303 | #block-teasers-fullwidth {margin: 50px 0 30px}
|
|---|
| 304 | #block-teasers-fullwidth .centered {z-index: 2}
|
|---|
| 305 | #block-teasers-fullwidth .teaser .teaser-details:before {background: #e9b303}
|
|---|
| 306 | #block-teasers-fullwidth .teaser-details {color: #FFF; padding: 0 50% 0 15px}
|
|---|
| 307 | #block-teasers-fullwidth .teaser-details a {color: #FFCC33}
|
|---|
| 308 | #block-teasers-fullwidth .teaser-details h2 {color: #FFF; margin: 0 0 20px}
|
|---|
| 309 | #block-teasers-fullwidth .teaser-details li {margin: 10px 0}
|
|---|
| 310 | #block-teasers-fullwidth .teaser-image img {display: block; height: auto; width: 100%}
|
|---|
| 311 | #block-teasers-fullwidth .theme-button a {border-color: #FFF; color: #FFF; margin-top: 10px}
|
|---|
| 312 | #block-teasers-fullwidth .theme-button a:hover {background: #FFF; color: var(--primary-colour)}
|
|---|
| 313 |
|
|---|
| 314 | #block-teasers-standard {margin: 30px 0}
|
|---|
| 315 | #block-teasers-standard .teasers .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 316 | #block-teasers-standard .teasers .teaser {position: relative; flex-basis: 31.33%; margin: 20px 0}
|
|---|
| 317 | #block-teasers-standard .teasers .teaser:hover img {transform: scale(1.1)}
|
|---|
| 318 | #block-teasers-standard .teasers .teaser h3 {border-bottom: 3px solid var(--primary-colour); font-size: 34px; margin: 10px 0; padding-bottom: 5px}
|
|---|
| 319 | #block-teasers-standard .teasers .teaser img {display: block; height: auto; transition: 0.5s; width: 100%}
|
|---|
| 320 | #block-teasers-standard .teasers .teaser-image {overflow: hidden}
|
|---|
| 321 |
|
|---|
| 322 | .subpage #block-teasers-standard .teasers .teaser {flex-basis: 48%}
|
|---|
| 323 |
|
|---|
| 324 | /* TRAILS */
|
|---|
| 325 | #block-trails-admin {margin-bottom: 40px}
|
|---|
| 326 | .trailpoint-table td {padding: 10px}
|
|---|
| 327 | .map-marker .marker-text {white-space: nowrap}
|
|---|
| 328 |
|
|---|
| 329 | #mm-0 {height: 100%}
|
|---|
| 330 | .page-node-type-trail, .page-node-type-trail #content-container, .page-node-type-trail #content-container > div, .page-node-type-trail .dialog-off-canvas-main-canvas, .page-node-type-trail #main-container .centered {height: 100%}
|
|---|
| 331 |
|
|---|
| 332 | .trails .view-content {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-around; width: 100%}
|
|---|
| 333 | .trails .trail {position: relative; display: flex; flex-direction: column; background: #F4F4F4; margin: 20px 0}
|
|---|
| 334 | .trails .trail h2 {margin-top: 0}
|
|---|
| 335 | .trails .trail img {display: block; height: auto; width: 100%}
|
|---|
| 336 | .trails .trail .theme-button a {display: flex; justify-content: center; width: 100%}
|
|---|
| 337 | .trails .trail-body {padding: 20px}
|
|---|
| 338 | .trails .trail-button a {display: block; background: var(--primary-colour); color: #FFF; font-size: 26px; padding: 20px; text-align: center; text-transform: uppercase}
|
|---|
| 339 |
|
|---|
| 340 | .trailpoints .view-content {display: flex; flex-wrap: wrap; justify-content: flex-start}
|
|---|
| 341 | .trailpoints .trailpoint {display: flex}
|
|---|
| 342 | .trailpoints .trailpoint [id^="trailpoint-"] {background: #F4F4F4; cursor: pointer}
|
|---|
| 343 | .trailpoints .trailpoint a {width: 85%}
|
|---|
| 344 | .trailpoints .trailpoint img {display: block; height: auto; width: 100%}
|
|---|
| 345 | .trailpoints .trailpoint .result-counter {display: flex; background: var(--primary-colour); align-items: center; color: #FFF; font-size: 30px; justify-content: center; width: 15%}
|
|---|
| 346 | .trailpoints .trailpoint .trailpoint-title {color: var(--primary-colour); font-size: 20px; padding: 5px 10px}
|
|---|
| 347 | .trailpoints .trailpoint-image {display: flex; align-items: stretch}
|
|---|
| 348 |
|
|---|
| 349 | #infoPanelContainer {position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; z-index: 3005}
|
|---|
| 350 | #infoPanelContainer h2 {margin: 0}
|
|---|
| 351 | #infoPanelContainer h3 {color: var(--primary-colour); font-size: 26px; margin: 30px 0 -10px}
|
|---|
| 352 | #infoPanelContainer #infoPanel {display: flex; flex-direction: column; background: #FFF; box-shadow: 0 0 10px 2px #000; overflow: hidden; text-align: left; width: 100%; max-width: 500px}
|
|---|
| 353 | #infoPanelContainer #infoPanel-body {padding: 10px 20px}
|
|---|
| 354 | #infoPanelContainer #infoPanel-buttons {display: flex; background: #FFF; border-bottom: 2px solid var(--primary-colour); flex-basis: 10%}
|
|---|
| 355 | #infoPanelContainer .infoPanel-button {display: flex; align-items: center; cursor: pointer; flex-grow: 1; justify-content: center; transition: 0.8s}
|
|---|
| 356 | #infoPanelContainer .infoPanel-button.active {background: var(--primary-colour); color: #FFF}
|
|---|
| 357 | #infoPanelContainer #infoPanel-close {display: flex; align-items: center; background: var(--primary-colour); color: #FFF; cursor: pointer; flex-basis: 10%; font-size: 24px; justify-content: center; padding: 20px; text-align: center; text-transform: uppercase}
|
|---|
| 358 | #infoPanelContainer #infopanel-images {position: relative; width: 100%}
|
|---|
| 359 | #infoPanelContainer #infopanel-images .infopanel-image {position: absolute; left: 0; top: 0}
|
|---|
| 360 | #infoPanelContainer #infopanel-images img {display: block; pointer-events: none; height: auto; width: 100%}
|
|---|
| 361 | #infoPanelContainer #infopanel-images h2 {position: absolute; bottom: 0; left: 0; display: block; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); color: #FFF; font-size: 32px; line-height: 120%; margin: 0; padding: 20px 20px 10px; text-transform: uppercase; width: 100%}
|
|---|
| 362 | #infoPanelContainer #infopanel-listen {display: flex; align-items: center; cursor: pointer; font-size: 26px; margin-bottom: 30px}
|
|---|
| 363 | #infoPanelContainer #infopanel-listen img {margin-right: 10px; height: auto; width: 60px}
|
|---|
| 364 | #infoPanelContainer #infoPanel-readmore {padding: 20px}
|
|---|
| 365 | #infoPanelContainer #infoPanel-readmore [class^="align-"] {float: none; margin: 0; width: 100%}
|
|---|
| 366 | #infoPanelContainer #infoPanel-readmore [class^="align-"] img {height: auto; width: 100%}
|
|---|
| 367 | #infoPanelContainer #infoPanel-video iframe {height: 300px; width: 100%}
|
|---|
| 368 | #infoPanelContainer #infoPanel-video .video-desc {padding: 20px}
|
|---|
| 369 | #infoPanelContainer #infoPanel-scrollpane {position: relative; background: #FFF; height: 80%; overflow-y: scroll}
|
|---|
| 370 |
|
|---|
| 371 | #infoPanelContainer .linked-items {border-top: 1px solid #E4E4E4; margin-top: 30px; padding-top: 30px}
|
|---|
| 372 | #infoPanelContainer .linked-items h2 {margin: 0 0 20px 0}
|
|---|
| 373 | #infoPanelContainer .linked-items img {display: block; height: auto; width: 100%}
|
|---|
| 374 | #infoPanelContainer .linked-items .theme-button {display: flex}
|
|---|
| 375 |
|
|---|
| 376 | #infoPanelContainer .video-container {position: relative; padding-bottom: 56.25%; height: 0}
|
|---|
| 377 | #infoPanelContainer .video-container iframe {position: absolute; top: 0; left: 0; height: 100%; width: 100%}
|
|---|
| 378 |
|
|---|
| 379 | /* USER LOGIN FORM */
|
|---|
| 380 | #user-login-form .form-item {margin-bottom: 15px}
|
|---|
| 381 | #user-login-form .form-item .description {font-size: 14px; margin-top: 5px}
|
|---|
| 382 | #user-login-form .form-item input {font-size: 22px; padding: 5px 10px; max-width: 100%}
|
|---|
| 383 |
|
|---|
| 384 |
|
|---|
| 385 | /* ULTRA-NARROW */
|
|---|
| 386 | /* ------------ */
|
|---|
| 387 | @media only screen and (max-width: 399px) {
|
|---|
| 388 | .feed-item {flex-direction: column}
|
|---|
| 389 |
|
|---|
| 390 | #block-footer-logos {margin-top: 20px}
|
|---|
| 391 | }
|
|---|
| 392 |
|
|---|
| 393 |
|
|---|
| 394 | /* NARROW */
|
|---|
| 395 | /* ------ */
|
|---|
| 396 | @media only screen and (max-width: 599px) {
|
|---|
| 397 | h2.center-rule {margin: 50px auto}
|
|---|
| 398 |
|
|---|
| 399 | #block-banners-homepage {display: none}
|
|---|
| 400 | .flexslider {position: relative}
|
|---|
| 401 |
|
|---|
| 402 | /* Contact */
|
|---|
| 403 | .contact-form .form-item input, .contact-form .form-item textarea {width: 100%}
|
|---|
| 404 |
|
|---|
| 405 | /* Events */
|
|---|
| 406 | .events .event {margin: 30px 0}
|
|---|
| 407 | .events .event .theme-button {display: flex}
|
|---|
| 408 |
|
|---|
| 409 | /* Feeds */
|
|---|
| 410 | .feed-item {margin: 30px 0}
|
|---|
| 411 | .team .feed-item {flex-direction: column}
|
|---|
| 412 | .team .feed-item .feed-image {float: right; margin: 5px 0 10px 10px}
|
|---|
| 413 |
|
|---|
| 414 | /* Footer */
|
|---|
| 415 | #footer-container nav {display: none}
|
|---|
| 416 | #footer-content .centered > div {display: flex; flex-wrap: wrap}
|
|---|
| 417 | #post-footer-content .centered > div {flex-direction: column; gap: 10px}
|
|---|
| 418 |
|
|---|
| 419 | /* Header */
|
|---|
| 420 | #block-banners-homepage-video {display: none}
|
|---|
| 421 | .flexslider .centered {flex-direction: column}
|
|---|
| 422 | .banner-content {padding: 10px 20px 0 20px}
|
|---|
| 423 | .homepage-content h2 {margin-top: 10px; font-size: 12vw}
|
|---|
| 424 | .homepage-content p {font-size: 26px}
|
|---|
| 425 |
|
|---|
| 426 | /* Images */
|
|---|
| 427 | .align-left, .align-right {float: none; margin: 0; text-align: center; width: 100%}
|
|---|
| 428 | .align-left img, .align-right img {margin: auto}
|
|---|
| 429 |
|
|---|
| 430 | /* Team */
|
|---|
| 431 | .team .member {flex-basis: 100%; margin: 20px 0}
|
|---|
| 432 | .team .member img {margin: auto; height: auto; width: 300px}
|
|---|
| 433 |
|
|---|
| 434 | /* Teasers */
|
|---|
| 435 | #block-teasers-fullwidth .teaser {flex-direction: column}
|
|---|
| 436 | #block-teasers-fullwidth .teaser-details {padding: 20px}
|
|---|
| 437 | #block-teasers-standard .teasers .view-content {flex-direction: column}
|
|---|
| 438 | }
|
|---|
| 439 |
|
|---|
| 440 | /* NARROW - MEDIUM */
|
|---|
| 441 | /* --------------- */
|
|---|
| 442 | @media only screen and (max-width: 999px) {
|
|---|
| 443 | #block-breadcrumbs {display: none}
|
|---|
| 444 | #block-main-menu {display: none}
|
|---|
| 445 | #block-news-feed footer {border-top: 1px solid #DDD; margin-top: 30px; padding-top: 30px}
|
|---|
| 446 | #twitter-feed {display: none}
|
|---|
| 447 |
|
|---|
| 448 | /* Events */
|
|---|
| 449 | [id^="views-exposed-form-"] fieldset {width: 100%}
|
|---|
| 450 | [id^="views-exposed-form-"] fieldset legend, [id^="views-exposed-form-"] .form-item-keywords > label {width: 100%}
|
|---|
| 451 | [id^="views-exposed-form-"] .form-checkboxes {display: block}
|
|---|
| 452 | [id^="views-exposed-form-"] .form-checkboxes .form-item {width: 100%}
|
|---|
| 453 | [id^="views-exposed-form-"] .form-item-keywords > input {width: 73%}
|
|---|
| 454 | #edit-date-wrapper > .fieldset-wrapper {display: flex; justify-content: space-between; margin: 0; width: 100%}
|
|---|
| 455 | #edit-date-wrapper > .fieldset-wrapper > .form-item {flex-basis: 45%; margin: 5px 0}
|
|---|
| 456 | #edit-date-wrapper > .fieldset-wrapper > .form-item input {width: 100%}
|
|---|
| 457 |
|
|---|
| 458 | #event-details {flex-direction: column; align-items: flex-start}
|
|---|
| 459 | #event-details .date-divider {margin: 10px 0; height: 3px; width: 80px}
|
|---|
| 460 |
|
|---|
| 461 | /* Footer */
|
|---|
| 462 | #footer-content .centered {justify-content: center}
|
|---|
| 463 | #footer-content .centered > div {display: flex; flex-wrap: wrap; justify-content: space-around}
|
|---|
| 464 |
|
|---|
| 465 | /* Header */
|
|---|
| 466 | #header-content .centered > div:first-child {max-width: 70%}
|
|---|
| 467 | #header-content .centered > div:nth-child(2) {max-width: 30%}
|
|---|
| 468 | #block-banners-subpage {display: none}
|
|---|
| 469 | #block-subpage-logo {margin: 10px}
|
|---|
| 470 | #block-banners-subpage-desktop, #logo-background-wrap {display: none}
|
|---|
| 471 | .flexslider .centered .overlay {order: -1}
|
|---|
| 472 | .path-frontpage #block-h360-sikyon-branding {display: none}
|
|---|
| 473 |
|
|---|
| 474 | .social-icons {justify-content: center; padding-top: 30px}
|
|---|
| 475 | .social-icons a {width: 60px}
|
|---|
| 476 |
|
|---|
| 477 | /* Menu */
|
|---|
| 478 | #block-menu-icon {display: flex; align-items: center; padding: 15px; height: 100%}
|
|---|
| 479 | #block-menu-icon .icon, #block-menu-icon a:after, #block-menu-icon a:before {background: var(--primary-colour)}
|
|---|
| 480 | #block-menu-icon .label {display: none; color: var(--primary-colour)}
|
|---|
| 481 | .responsive-menu-toggle-icon:before, .responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon span.icon {left: 5px; height: 5px; width: 30px}
|
|---|
| 482 | .responsive-menu-toggle-icon:after {top: 5px}
|
|---|
| 483 | .responsive-menu-toggle-icon:before {top: 23px}
|
|---|
| 484 | .menu-item--_6730d2b-fc42-4e26-81b2-abb424a79556 {border-top: 5px solid #000}
|
|---|
| 485 |
|
|---|
| 486 | /* Partners */
|
|---|
| 487 | #partner-logos {margin-top: 30px}
|
|---|
| 488 |
|
|---|
| 489 | /* Right */
|
|---|
| 490 | #block-intros-block {display: none}
|
|---|
| 491 |
|
|---|
| 492 | /* Teasers */
|
|---|
| 493 | #block-teasers-fullwidth .teaser {background: var(--primary-colour)}
|
|---|
| 494 | #block-teasers-fullwidth .teaser-details {padding: 20px}
|
|---|
| 495 | #block-teasers-fullwidth .theme-button {display: flex}
|
|---|
| 496 |
|
|---|
| 497 | /* Trails */
|
|---|
| 498 | .page-node-type-trail .dialog-off-canvas-main-canvas {display: flex; flex-direction: column; height: 100vh}
|
|---|
| 499 | .page-node-type-trail header {position: fixed; background: #FFF; height: var(--header-height); width: 100%; z-index: 2}
|
|---|
| 500 | .page-node-type-trail #footer-container {display: none}
|
|---|
| 501 | .page-node-type-trail #main-container {padding-top: var(--header-height); height: 100%}
|
|---|
| 502 | .page-node-type-trail #main-container #content, .page-node-type-trail #main-container #content > div {padding: 0; height: 100%}
|
|---|
| 503 | .page-node-type-trail .trail-content {height: 100%}
|
|---|
| 504 | .page-node-type-trail #block-h360-sikyon-content {display: flex; flex-direction: column; height: 100%}
|
|---|
| 505 |
|
|---|
| 506 | .page-node-type-trail #infoPanel {height: 100%}
|
|---|
| 507 | }
|
|---|
| 508 |
|
|---|
| 509 | /* MEMIUM - EXTRA-WIDE */
|
|---|
| 510 | /* ------------------- */
|
|---|
| 511 | @media only screen and (min-width: 600px) {
|
|---|
| 512 | /* Header */
|
|---|
| 513 | #block-banners-homepage-mobile, #block-banners-subpage-mobile {display: none}
|
|---|
| 514 | #block-subpage-logo {padding: 10px 20px; width: 350px}
|
|---|
| 515 |
|
|---|
| 516 | /* Discover */
|
|---|
| 517 | .feed-container.discover .feed-item {flex-basis: 48%}
|
|---|
| 518 |
|
|---|
| 519 | /* Events */
|
|---|
| 520 | .events.homepage .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 521 | .events.homepage .event {flex-basis: 48%}
|
|---|
| 522 | .events .theme-button {margin-top: 15px}
|
|---|
| 523 |
|
|---|
| 524 | /* Feeds */
|
|---|
| 525 | .feed-container .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 526 | .feed-item {display: flex; flex-direction: column}
|
|---|
| 527 |
|
|---|
| 528 | /* Footer */
|
|---|
| 529 | #block-footer-social-icons {position: absolute; right: 20px; bottom: 0}
|
|---|
| 530 |
|
|---|
| 531 | /* Team */
|
|---|
| 532 | .team .member {flex-basis: 31.3%; margin: 2% 1%}
|
|---|
| 533 |
|
|---|
| 534 | /* Venues */
|
|---|
| 535 | .venues .view-content {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 536 | .venues .venue {position: relative; flex-basis: 48%}
|
|---|
| 537 | }
|
|---|
| 538 |
|
|---|
| 539 | /* MEDIUM */
|
|---|
| 540 | /* ------ */
|
|---|
| 541 | @media only screen and (min-width: 600px) and (max-width: 999px) {
|
|---|
| 542 | h2.center-rule {font-size: 34px; margin: 50px auto 60px}
|
|---|
| 543 |
|
|---|
| 544 | [class*="col-"] {width: 100%}
|
|---|
| 545 |
|
|---|
| 546 | /* Content */
|
|---|
| 547 | .venues .venue {flex-basis: 48%}
|
|---|
| 548 |
|
|---|
| 549 | /* Header */
|
|---|
| 550 | #banner .centered {flex-wrap: wrap; justify-content: space-around}
|
|---|
| 551 | .flexslider .overlay-container {position: relative}
|
|---|
| 552 | .flexslider .overlay-logo {flex-basis: 40%}
|
|---|
| 553 | .flexslider .overlay {position: relative; background: var(--primary-colour); flex-basis: 100%; padding: 40px 40px 20px; width: 100%}
|
|---|
| 554 | .flexslider .overlay h2 {font-size: 8vw; text-shadow: none}
|
|---|
| 555 | .flexslider .overlay p {font-size: 3vw; text-shadow: none}
|
|---|
| 556 |
|
|---|
| 557 | /* Teasers */
|
|---|
| 558 | .frontpage .teasers .view-content {flex-direction: column}
|
|---|
| 559 | #block-teasers-standard .teasers .teaser h2 {margin: 0}
|
|---|
| 560 | .frontpage .teasers .teaser {display: flex; flex-direction: row; gap: 20px}
|
|---|
| 561 | .frontpage .teasers .teaser-details {flex-basis: 70%}
|
|---|
| 562 | .frontpage .teasers .teaser-image {flex-basis: 30%}
|
|---|
| 563 |
|
|---|
| 564 | #block-teasers-fullwidth .teaser .centered {flex-basis: 70%}
|
|---|
| 565 | }
|
|---|
| 566 |
|
|---|
| 567 | /* MEDIUM - WIDE */
|
|---|
| 568 | /* ------------- */
|
|---|
| 569 | @media only screen and (min-width: 600px) and (max-width: 1299px) {
|
|---|
| 570 | /* Images */
|
|---|
| 571 | #block-h360-sikyon-content .align-left {margin: 10px 20px 20px 0}
|
|---|
| 572 | #block-h360-sikyon-content .align-right {margin: 10px 0 20px 20px}
|
|---|
| 573 | }
|
|---|
| 574 |
|
|---|
| 575 | /* WIDE */
|
|---|
| 576 | /* ---- */
|
|---|
| 577 | @media only screen and (min-width: 1000px) and (max-width: 1299px) {
|
|---|
| 578 |
|
|---|
| 579 | }
|
|---|
| 580 |
|
|---|
| 581 | /* WIDE - EXTRA WIDE */
|
|---|
| 582 | /* ------------------- */
|
|---|
| 583 | @media only screen and (min-width: 1000px) {
|
|---|
| 584 | /* For GS3 embedding, comment out the following so GS3 banner sits logically below Streetlife banner */
|
|---|
| 585 | /* [class*="col-"] {float: left} */
|
|---|
| 586 | .col-0 {display: none}
|
|---|
| 587 | .col-1 {width: 8.33%}
|
|---|
| 588 | .col-2 {width: 16.66%}
|
|---|
| 589 | .col-3 {width: 25%}
|
|---|
| 590 | .col-4 {width: 33.33%}
|
|---|
| 591 | .col-5 {width: 41.66%}
|
|---|
| 592 | .col-6 {width: 50%}
|
|---|
| 593 | .col-7 {width: 58.33%}
|
|---|
| 594 | .col-8 {width: 66.66%}
|
|---|
| 595 | .col-9 {width: 75%; padding-right: 60px !important}
|
|---|
| 596 | .col-10 {width: 83.33%}
|
|---|
| 597 | .col-11 {width: 91.66%}
|
|---|
| 598 | .col-12 {width: 100%}
|
|---|
| 599 |
|
|---|
| 600 | /* Breadcrumb */
|
|---|
| 601 | #block-breadcrumbs {background: #F4F4F4}
|
|---|
| 602 | #block-breadcrumbs nav {font-size: 16px; margin: auto; padding: 5px 20px}
|
|---|
| 603 | #block-breadcrumbs nav a {color: #d4a713}
|
|---|
| 604 | #block-breadcrumbs nav a:hover {text-decoration: underline}
|
|---|
| 605 | #block-breadcrumbs nav li {float: left; padding: 0 10px}
|
|---|
| 606 | #block-breadcrumbs nav li:not(:first-child):before {content: "> "; padding: 0 15px 0 0}
|
|---|
| 607 | #block-breadcrumbs nav ol {display: flex; list-style-type: none; margin: 0; padding: 0}
|
|---|
| 608 |
|
|---|
| 609 | /* Content */
|
|---|
| 610 | #block-intros-block {background: #F4F4F4; padding: 50px 15px 15px}
|
|---|
| 611 | [about="/discover"], [about="/events"], [about="/events/archive"] {display: none}
|
|---|
| 612 |
|
|---|
| 613 | /* Discover */
|
|---|
| 614 | #block-discover-authors-article {border: 0}
|
|---|
| 615 | .authors.article .author {display: block}
|
|---|
| 616 | .authors .author .author-bio {display: block !important}
|
|---|
| 617 | .authors .author .author-details {padding: 0}
|
|---|
| 618 | .authors .author .author-image {float: right}
|
|---|
| 619 | .authors .author .theme-button {display: none}
|
|---|
| 620 |
|
|---|
| 621 | /* Events */
|
|---|
| 622 | .events.feed .view-content {display: flex; flex-wrap: wrap; justify-content: space-between}
|
|---|
| 623 | .events.feed .event {flex-basis: 48%; margin: 20px 0}
|
|---|
| 624 | .events.homepage .event {flex-basis: 31.333%}
|
|---|
| 625 | .events.homepage footer {display: flex; justify-content: center; padding: 30px}
|
|---|
| 626 | .events.homepage footer .theme-button {display: flex; width: 50%}
|
|---|
| 627 | .events footer .theme-button a {display: flex; font-size: 22px; justify-content: center; width: 100%}
|
|---|
| 628 |
|
|---|
| 629 | /* Footer */
|
|---|
| 630 | #footer-content {background: url(extra-css-images/sl-logo-graphic-grey.svg) no-repeat #F4F4F4; background-position: left center; background-size: 150% 250%; margin-top: 50px; padding: 40px 15px}
|
|---|
| 631 | #footer-content .centered > div {font-size: 16px; padding: 0 15px}
|
|---|
| 632 |
|
|---|
| 633 | /* Header */
|
|---|
| 634 | .flexslider .overlay {border: 2px solid #FFF; flex-basis: 40%; margin: -140px auto 0; font-size: 20px}
|
|---|
| 635 |
|
|---|
| 636 | #block-main-menu {margin: 30px 0}
|
|---|
| 637 | #block-main-menu nav {display: flex}
|
|---|
| 638 | .subpage #block-main-menu nav {position: absolute; right: 20px}
|
|---|
| 639 | #block-main-menu #horizontal-menu {display: flex; align-items: stretch; justify-content: flex-end}
|
|---|
| 640 | #block-main-menu #horizontal-menu a {display: flex; align-items: center; background: none; box-sizing: content-box; color: #444; text-transform: uppercase}
|
|---|
| 641 | #block-main-menu #horizontal-menu > li > a {padding: 5px 20px; height: 30px}
|
|---|
| 642 | #block-main-menu #horizontal-menu > li.menu-item--active-trail > a {border-bottom: 5px solid var(--primary-colour); color: var(--secondary-colour); font-weight: bold}
|
|---|
| 643 | #block-main-menu #horizontal-menu > li > a:not([class*="is-active"]):hover {border-bottom: 5px solid var(--menu-hover)}
|
|---|
| 644 | #block-main-menu #horizontal-menu > li > a.is-active {border-bottom: 5px solid var(--primary-colour); color: var(--secondary-colour); font-weight: bold}
|
|---|
| 645 | #block-main-menu #horizontal-menu .sub-nav {background: var(--secondary-colour); border-top: 5px solid var(--menu-hover); top: 40px}
|
|---|
| 646 | #block-main-menu #horizontal-menu .sub-nav a {color: #FFF; padding: 10px 20px; text-transform: none}
|
|---|
| 647 | #block-main-menu #horizontal-menu .sub-nav a:hover {background: var(--menu-hover); color: var(--secondary-colour)}
|
|---|
| 648 | #block-menu-icon {display: none}
|
|---|
| 649 |
|
|---|
| 650 | .frontpage .banner .social-icons {position: absolute; bottom: 20px; left: 10px}
|
|---|
| 651 | .frontpage .banner footer {position: relative; z-index: 100}
|
|---|
| 652 | .frontpage #block-subpage-logo {display: none}
|
|---|
| 653 | .social-icons a {width: 40px}
|
|---|
| 654 |
|
|---|
| 655 | /* Images */
|
|---|
| 656 | #block-h360-sikyon-content .align-left {margin: 10px 2% 10px 0; text-align: center; width: 48%}
|
|---|
| 657 | #block-h360-sikyon-content .align-right {margin: 10px 0 10px 2%; text-align: center; width: 48%}
|
|---|
| 658 | #block-h360-sikyon-content .align-left img, #block-h360-sikyon-content figure.align-right img {margin: auto}
|
|---|
| 659 | figure figcaption {background: #F4F4F4; color: #666; font-size: 16px; padding: 3px 10px; text-align: center}
|
|---|
| 660 | figure img[width="450"] {width: 100% !important}
|
|---|
| 661 | article [data-entity-type="media"] img {height: auto; max-width: 100%}
|
|---|
| 662 | .align-center img {height: auto; width: 100%}
|
|---|
| 663 | figure.align-left + figure.align-right {margin-bottom: 30px !important}
|
|---|
| 664 | figure.align-left + figure.align-right + p {clear: both}
|
|---|
| 665 | figure.align-left img, figure.align-right img {max-height: 500px; max-width: 100%}
|
|---|
| 666 | figure img[width="450"] {width: 100% !important}
|
|---|
| 667 |
|
|---|
| 668 | /* News */
|
|---|
| 669 | #block-twitter-follow {display: none}
|
|---|
| 670 | .news footer {float: right; color: #888; font-size: 40px; width: 47%}
|
|---|
| 671 | .news footer #social-media-icons {border-bottom: 1px solid #DDD; padding-bottom: 10px}
|
|---|
| 672 | .news footer > div {width: 100%}
|
|---|
| 673 | .news footer #twitter-feed {overflow-y: scroll; max-height: 650px}
|
|---|
| 674 | .news .view-content {float: left; width: 47%}
|
|---|
| 675 |
|
|---|
| 676 | /* Partners */
|
|---|
| 677 | #partner-logos {padding: 20px 180px 0}
|
|---|
| 678 |
|
|---|
| 679 | /* Teasers */
|
|---|
| 680 | #block-teasers-fullwidth .teaser {position: relative; left: 50%; right: 50%; margin: 0 -50vw 0; overflow: hidden; padding: 50px 30px; width: 100vw}
|
|---|
| 681 | #block-teasers-fullwidth .teaser-details:before {position: absolute; content:''; width: 65%; height: 100%; top: 0; left: 0; transform: skewX(-20deg); transform-origin:0 0; z-index: -1}
|
|---|
| 682 | #block-teasers-fullwidth .teaser-details h2 {color: #FFF; font-size: 50px}
|
|---|
| 683 | #block-teasers-fullwidth .teaser-image {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50%; z-index: -2}
|
|---|
| 684 |
|
|---|
| 685 | /* Trails */
|
|---|
| 686 | .page-node-type-trail #block-h360-sikyon-content {position: relative; display: flex; flex-direction: column; height: 690px}
|
|---|
| 687 | .page-node-type-trail #content {width: 100%}
|
|---|
| 688 | .page-node-type-trail #right {display: none}
|
|---|
| 689 | .page-node-type-trail #trail-header {border: 0}
|
|---|
| 690 | .page-node-type-trail #trail-intro-content {display: flex}
|
|---|
| 691 | .page-node-type-trail #trail-intro-content .intro-image img {height: 100%; width: auto}
|
|---|
| 692 |
|
|---|
| 693 | .trails .trail {flex-basis: 47%}
|
|---|
| 694 |
|
|---|
| 695 | #infoPanelContainer #infoPanel {height: 650px}
|
|---|
| 696 | }
|
|---|
| 697 |
|
|---|
| 698 |
|
|---|
| 699 | /* EXTRA-WIDE */
|
|---|
| 700 | /* ---------- */
|
|---|
| 701 | @media only screen and (min-width: 1300px) {
|
|---|
| 702 | h2.center-rule {width: 60%}
|
|---|
| 703 |
|
|---|
| 704 | .centered {margin: auto; width: 1300px}
|
|---|
| 705 |
|
|---|
| 706 | .flexslider .overlay {left: 30px; bottom: 1em; max-width: 600px}
|
|---|
| 707 |
|
|---|
| 708 | #block-teasers-standard .teasers .teaser-details {margin: 0 30px}
|
|---|
| 709 |
|
|---|
| 710 | /* Breadcrumbs */
|
|---|
| 711 | #block-breadcrumbs nav {width: 1300px}
|
|---|
| 712 |
|
|---|
| 713 | /* Header */
|
|---|
| 714 | .frontpage .banner footer > div {position: relative; margin: auto; width: 1300px}
|
|---|
| 715 | }
|
|---|
