/* Screen cascading style sheet for YECS website */ /* **** HTML STYLES **** */ /* --------------------- */ body { color: #444; font-family: 'Roboto', Arial; font-size: 18px; margin: 0; padding: 0; width: 100%; } a {color: #0E74CA; font-weight: normal; text-decoration: none} a:hover {color: #B30000; text-decoration: none} blockquote {margin-left: 30px} .error {color: #FF0000; font-weight: bold} h1 {color: #8121AD; font-size: 36px; font-weight: normal; margin: 0 0 10px 0} h2 {color: #8121AD; font-size: 30px; font-weight: normal; margin: 30px 0 10px 0} h3 {color: #8121AD; font-size: 20px; font-weight: normal; margin: 20px 0 10px 0} p {line-height: 150%} ul {list-style-type: square} .affix {top: 0} .logged-in .affix {top: 62px} /* **** LAYOUT STYLES **** */ /* ----------------------- */ * {box-sizing: border-box} .col-0 {display: none} .col-1 {width: 8.33%} .col-2 {width: 16.66%} .col-3 {width: 25%} .col-4 {width: 33.33%} .col-5 {width: 41.66%} .col-6 {width: 50%} .col-7 {width: 58.33%} .col-8 {width: 66.66%} .col-9 {width: 75%} .col-10 {width: 83.33%} .col-11 {width: 91.66%} .col-12 {width: 100%} [class*="col-"] {float: left} .centered {position: relative; margin: 0 auto; text-align: left; width: 100%; max-width: 1200px} #content {float: left; padding: 40px 20px 20px; min-height: 400px} #content-container-back {float: left; background: #FFF} #footer {background: #F3F1EF; color: #B2B2B2} #right {padding: 40px 0 40px 20px} /* CONTENT STYLES */ article {position: relative} article a {text-decoration: underline} article li {margin-bottom: 12px; line-height: 150%} article p {line-height: 160%} /* ARTICLE STYLES */ #block-views-articles-additional-articles {border-top: 1px solid #E4E4E4; margin-top: 30px} #block-views-articles-additional-articles h2 {font-size: 22px} #block-views-articles-additional-articles .view-header {border-bottom: 1px dashed #E4E4E4; margin-bottom: 15px; padding-bottom: 10px; text-align: center} #block-views-articles-additional-articles .view-header img {margin: 0 auto} #block-views-articles-additional-articles .views-row {border-bottom: 1px dashed #E4E4E4; margin-bottom: 15px; padding-bottom: 10px} #block-views-articles-additional-articles .views-row .views-field-field-images {margin-bottom: 5px} #block-views-articles-additional-articles .views-row-last {border: 0} #block-views-articles-details .posthole-button {margin-bottom: 20px; width: 100%} #block-views-articles-details table {border-collapse: separate; border-spacing: 4px; font-size: 14px} #block-views-articles-details table td {padding: 5px} #block-views-articles-details table .header {background: #F4F4F4; text-align: right} .node-post-hole-article li {margin-bottom: 12px; line-height: 150%} #block-system-main li, #block-system-main p {word-wrap: break-word} .node-post-hole-article .author-header {border-color: #E4E4E4; border-style: solid; border-width: 2px 0; color: #808080; margin-bottom: 10px; padding: 5px 0} .node-post-hole-article .author-header .author-names {font-size: 22px; margin-bottom: 10px} .ph-article-table {float: left; border: 0; border-collapse: separate; border-spacing: 2px; margin: 20px 0; width: 100%} .ph-article-table td, .ph-article-table th {border: 0; padding: 5px} .ph-article-table tfoot td {border-top: 1px solid #444; margin-top: 10px} .ph-article-table .header-1 {background: #CCC; color: #000; font-size: 18px} .ph-article-table .header-2 {background: #EEE; font-size: 18px} /* ISSUE STYLES */ #block-views-issues-details .views-field-field-issue-pdf a {float: left; background: #E4E4E4; color: #8121AD; font-size: 20px; margin-top: 10px; padding: 10px; text-align: center; width: 100%} #block-views-issues-details .views-field-field-issue-pdf a:hover {background: #8121AD; color: #FFF} .node-type-post-hole-issue .view-articles {margin-top: 20px} .node-type-post-hole-issue .view-articles .views-row {float: left; border-bottom: 1px dashed #E4E4E4; clear: both; margin-bottom: 20px; padding-bottom: 20px; width: 100%} .node-type-post-hole-issue .view-articles .views-row-last {border: 0} .node-type-post-hole-issue .view-articles .views-field-title a {font-size: 24px} /* BANNER */ #banner {position: relative; overflow: hidden; max-height: 400px; width: 100%} #banner #block-block-1 {float: left; background: #F4F4F4; color: #FFF; padding: 20px; width: 22%} #banner #block-block-1 h1 {color: #8121AD; font-size: 32px; margin: 0} #banner #block-block-1 h2 {color: #888; font-size: 26px; margin: 5px 0} #banner #block-block-1 p a {display: block; background: #8121AD; border-radius: 20px; color: #FFF; font-size: 18px; padding: 5px; text-align: center} #banner #block-block-1 p a:hover {background: #BEA323} #banner #block-views-banners-block {float: left; width: 56%} #banner #block-views-issues-cover-image {float: left; width: 22%} #banner .region-banner {float: left; padding-top: 25px; width: 100%} #banner .view-content img {float: left; height: auto; width: 100%} #banner .view-content .cifa-button {clear: both} #banner .view-content .overlay-back {position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: rgba(0,0,0,0.4); width: 100%} #banner .view-content .overlay-front {position: absolute; bottom: 10px; left: 0; color: #FFF; font-size: 30px; overflow: hidden; padding: 20px; width: 100%} #banner .view-content .overlay-front > div {font-weight: bold; vertical-align: middle} #banner .view-content .overlay-front .author {color: #DDD; font-size: 24px} #banner .views-field-field-banner-title {margin: 0 auto; width: 1200px} #banner .views-field-field-banner-title .title {float: right; background: #731472; color: #FFF; font-size: 36px; margin-top: -65px; padding: 10px 20px} #banner .views-slideshow-pager-fields {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 20} #banner .views-slideshow-pager-fields > div {float: left; background: #FFF; border-radius: 10px; margin: 0 5px; height: 20px; width: 20px} #banner .views-slideshow-pager-fields > div.active {background: #FFCC33} /* BLOG */ #block-views-blog-block-1 {background: #F4F4F4; margin-top: 30px; padding: 20px} #block-views-blog-block-1 h2 {border: 0; margin: 0; padding: 0} #block-views-blog-block-1 .bio {display: block; margin-top: 4px} #block-views-blog-block-1 .ph-blog-author-details {overflow: hidden} #block-views-blog-block-1 .ph-blog-author-details .affiliation {color: #999; font-size: 20px} #block-views-blog-block-1 .ph-blog-author-details .name {color: #8121AD; font-size: 22px} .view-blog .ph-blog-details {border-color: #E4E4E4; border-style: solid; border-width: 1px 0; color: #999; margin: 5px 0; padding: 5px 0} .view-blog .ph-blog-edit {float: right; font-size: 14px} .view-blog .ph-blog-title a {color: #8121AD; font-size: 24px} .view-blog .views-field-nothing {overflow: hidden} .view-blog .views-row {float: left; margin: 10px 0; width: 100%} /* BREADCRUMBS */ #breadcrumb {background: #F4F4F4} #block-easy-breadcrumb-easy-breadcrumb {float: left; margin: 5px 20px} #block-easy-breadcrumb-easy-breadcrumb .easy-breadcrumb {font-size: 16px} /* BUTTONS */ a.posthole-button, .posthole-button a {display: block; float: left; background: #E4E4E4; border-radius: 30px; color: #8121AD; font-size: 20px; padding: 10px 20px; text-align: center; transition: 0.3s} a.posthole-button:hover, .posthole-button a:hover {background: #8121AD; color: #FFF} /* FEEDS */ .ph-feed {margin-top: 20px} .ph-feed-contact {margin-top: 5px} .ph-feed-content {overflow: hidden} .ph-feed-content h3 {font-size: 18px; margin: 15px 0 0} .ph-feed-edit {float: right; font-size: 14px} .ph-feed-image {float: left; border: 2px solid #DDD; margin: 5px 10px 0 0; padding: 2px} .ph-feed-subtitle {color: #999; font-size: 22px} .ph-feed-row {float: left; border-bottom: 1px dashed #E4E4E4; margin-bottom: 20px; padding-bottom: 20px; width: 100%} .ph-feed-row.views-row-last {border: 0} .ph-feed-title {color: #8121AD; font-size: 28px} /* FOOTER */ .region-footer {float: left; padding: 20px; width: 100%} #footer .block-menu-block, #footer .block-menu {float: left; margin-right: 20px; width: 140px} #footer .block-menu-block .nav a, #footer .block-menu .nav a {display: block; border-bottom: 1px solid #908A84; color: #908A84; font-size: 12px; padding: 8px 5px} #footer .block-menu-block .nav a:hover, #footer .block-menu .nav a:hover {background: #908A84; color: #FFF} /* HEADER / PRE-HEADER */ #header {border-bottom: 5px solid #C0C0C0} #header #logo {padding-top: 10px; height: 120px !important; width: auto} #block-block-6 {position: absolute; top: 5px; right: 20px} #mainheader .centered {position: relative; padding: 0 15px} #preheader {background: #8121AD} #preheader .region-preheader {padding: 0 10px} #preheader #block-block-3 {float: right; padding: 7px 10px} #preheader #block-block-3 img {margin-left: 10px; width: 25px} #preheader #block-superfish-2 {float: left} #preheader #block-superfish-2 .menu li a {display: block; color: #FFF; padding: 12px 10px} #preheader #block-superfish-2 .menu li a:hover {background: #560D55} /* HOMEPAGE */ .front article {display: none} .front #block-views-banners-block {float: left; width: 70%} #block-views-articles-block {float: left; width: 70%} #block-views-articles-block .view-articles .view-content {float: left; margin-left: -2%} #block-views-articles-block .view-articles .view-footer {float: left; border-top: 1px solid #E4E4E4; margin-top: 10px; padding-top: 10px; width: 100%} #block-views-articles-block .views-row {float: left; margin: 10px 0; padding-left: 2%; width: 33.3%} #block-views-articles-block .views-row:nth-child(3n+1) {clear: both} #block-views-articles-block .views-row .views-field-field-images {border-color: #E4E4E4; border-style: solid; border-width: 3px 0; margin: 5px 0} #block-views-updates-block {float: left; width: 47%} .view-updates .view-footer {float: left; border-top: 1px #E4E4E4 dashed; padding-top: 10px; width: 100%} .view-updates .views-row {float: left; margin: 10px 0; width: 100%} #homepage_add1 {background-color: #6A2C69; background-image: url("/sites/cifa.heritech.net/themes/htec_bootstrap/images/membership-back.jpg")} #homepage_add2 .region-homepage-add2 {float: left; border-top: 1px dashed #E4E4E4; margin-top: 20px; padding: 20px 20px 40px} #block-block-4 {float: right; width: 350px} #block-block-4 p {text-align: right} /* IMAGES */ figure, .node-blog [class*="image-"], .node-post-hole-article .image {background: #F4F4F4; border: 2px solid #EEE; margin-bottom: 10px; margin-top: 10px; padding: 10px; text-align: left} .image-left, .image-right, .image.left, .image.right {max-width: 370px} .node-post-hole-article .image p {text-align: center} .node-post-hole-article .image .enlarge {color: #808080; font-size: 14px; text-align: center} div.image + div.image + p, figure + figure + p {clear: both} .image-captioned img {cursor: pointer} .image-center {display: inline-block; margin: 10px auto; text-align: center; width: 100%} .image-center figure {display: inline-block; margin: 0 auto} figure > figcaption, .image .caption {color: #5E217A; font-size: 14px; padding: 10px 0 0; text-align: left; width: 100%} .node-page img {height: auto; max-width: 100%} /* INTERVIEWS */ #block-views-interviews-more-interviews h2 {margin: 0} .field-name-field-youtube-link {margin: 30px 0} .interview-banner {border-bottom: 2px solid #E4E4E4; color: #888; font-size: 20px; margin-bottom: 10px; padding-bottom: 10px} .interview-interviewer {border-bottom: 2px solid #E4E4E4; color: #888; font-size: 16px; margin-bottom: 20px; padding-bottom: 10px} .view-interviews .views-row {float: left; border-top: 1px dashed #E4E4E4; margin-top: 20px; padding-top: 20px; width: 100%} .view-interviews .views-row .interview-created {color: #888} .view-interviews .views-row .interview-links {float: right; font-size: 14px; margin-top: 10px} .view-interviews .views-row .interview-links a:first-child {border-right: 1px solid #888; padding-right: 5px} .view-interviews.view-display-id-list .interview-body {overflow: hidden} .view-interviews.view-display-id-list .interview-image {float: left; margin-right: 20px} .view-interviews.view-display-id-list .interview-title a {color: #8121AD; font-size: 24px} .view-interviews.view-display-id-more_interviews .interview-created {font-size: 16px; margin-top: 5px} .view-interviews.view-display-id-more_interviews .interview-title {color: #8121AD; font-size: 20px} .view-interviews.view-display-id-more_interviews .posthole-button {margin-top: 10px; width: 100%} .view-interviews.view-display-id-more_interviews {float: left; margin: 0; width: 100%} #block-views-interviews-homepage {float: left; margin-top: 30px; width: 100%} #block-views-interviews-homepage .view-content {display: flex} #block-views-interviews-homepage .view-footer {float: left; border-top: 1px dashed #E4E4E4; margin-top: 10px; padding-top: 10px} #block-views-interviews-homepage .views-row {position: relative; border: 0; flex-grow: 1; padding: 0 25px; max-width: 33.3%} #block-views-interviews-homepage .views-row .posthole-button {margin-top: 10px} /* ISSUES */ .ph-issues-feed .view-contents {margin-left: -2%} .ph-issues-feed .view-footer {float: left; border-top: 1px solid #E4E4E4; margin-top: 10px; padding-top: 10px; width: 100%} .ph-issues-feed .views-row {position: relative; float: left; padding-left: 2%; margin: 10px 0; width: 33.3%} .ph-issues-feed .views-row:nth-child(3n+1) {clear: both} .ph-issues-feed .views-row .pdf-icon {height: auto; width: 20px} .ph-issues-feed .views-row .views-field-edit-node {position: absolute; bottom: 0; right: 0; font-size: 14px} .ph-issues-feed .views-row .views-field-field-image {float: left; margin-right: 10px} .ph-issues-feed .views-row .views-field-nothing {border-top: 1px solid #E4E4E4; font-size: 14px; overflow: hidden; margin-top: 5px; padding-top: 5px} .ph-issues-feed .views-row .views-field-title a {color: #8121AD} /* RIGHT */ .region-right .block-menu {background: #F4F4F4; padding: 20px} .region-right .block-menu h2 {margin: 0 0 10px} .region-right .block-menu .nav a {color: #731472; font-size: 20px; padding: 10px 5px} .region-right .block-menu .nav a:hover {background: #EDE2ED} .region-right .block-menu .nav :not(:last-child) {border-bottom: 1px solid #731472} .region-right .block-menu .active-trail a, .region-right .block-menu .active-trail a:hover {background: #731472; color: #FFF; border-left: 5px solid #d5c115; padding-left: 10px} /* TEAM */ #block-block-5 {float: right; background: #E4E4E4; margin: 10px 0 20px; padding: 10px; width: 100%} .page-about-team-reorder .view-team .view-header {border-bottom: 1px solid #E4E4E4; padding-bottom: 20px; margin: 10px 0 20px} .draggable a.tabledrag-handle {height: 1em} /* @MEDIA SCREEN SIZE STYLES */ /* ========================= */ /* ----- SCREENS UP TO 600PX ----- */ /* =============================== */ @media only screen and (max-width: 600px) { [class*="col-"] {width: 100%} #content {padding: 20px} /* GENERAL */ a.mobile-button, div.mobile-button a {display: block; background: #44AC33; color: #FFF; margin-top: 5px; padding: 10px} #block-system-main .field-name-body img {width: 100%} /* ARTICLES */ #block-views-articles-additional-articles .views-field-views-conditional {float: right; margin: 0 0 5px 10px; height: auto; width: 40%} #block-views-articles-block-2 .view-articles .views-field-views-conditional img {margin: 0 auto 10px} #block-views-articles-details {margin-bottom: 20px} /* BLOG */ #block-views-blog-block-1 img {text-align: center} .view-blog .views-field-field-images img {border: 2px solid #8121AD; margin: 10px auto; padding: 2px} .view-blog .views-row {border-bottom: 1px dashed #CCC; margin-bottom: 20px; padding-bottom: 30px} .view-blog .views-row-last {border: 0} /* FEEDS */ .ph-feed-content {clear: both} /* HEADER */ #block-block-1, #logo {padding: 0 20px} #block-block-1 *:not(h2) {display: none} #block-block-1 h2 {color: #999; font-size: 30px; margin-top: 10px} #header {border: 0} /* HOMEPAGE */ #block-block-3 {font-size: 14px} #block-views-articles-block-3 .views-row {float: left; margin: 15px 0; width: 100%} #block-views-articles-block-3 .views-row .views-field-title a {font-size: 20px} #block-views-issues-cover-image .view-content img {margin: 0 auto} #block-views-issues-cover-image .view-header h2 {margin-top: 0} #block-views-previews-block .views-row {margin: 20px 0} /* ISSUES */ #block-views-issues-details {margin-bottom: 20px} #block-views-issues-details .views-field-field-image img {margin: 0 auto} .view-issues .views-field-nothing {display: none} /* MENUS */ #block-superfish-1 {float: left; background: #8121AD; padding: 10px 20px; width: 100%} #block-superfish-1 a {color: #FFF} #block-superfish-1 #superfish-1-accordion li {font-size: 20px; margin: 10px 0 10px 30px} #block-superfish-1 .sf-accordion-toggle {font-size: 22px} /* SOCIAL MEDIA */ #block-multiblock-1 {float: right; clear: both; margin: 10px 0} /* UPDATES */ .not-front #block-views-updates-block-1 {border-top: 1px dashed #E4E4E4; padding-top: 30px} } /* ----- SCREENS UP TO 1024PX ----- */ /* =============================== */ @media only screen and (max-width: 1024px) { } /* ----- SCREENS ABOVE 1024PX ----- */ /* ================================ */ @media only screen and (min-width: 1024px) { /* BLOG */ #block-views-blog-block-1 img {float: left; margin-right: 15px} .view-blog .views-field-field-images {float: left; margin-right: 20px} /* HEADER */ #block-block-1 img {margin-left: 20px} /* HOMEPAGE */ #block-block-2 {float: right; padding-left: 2%; width: 30%} #block-views-issues-block-1 {float: left; padding-right: 2%; width: 70%} #block-views-issues-cover-image .view-header {display: none} /* IMAGES */ .image-left, .image.left {float: left; margin-right: 20px} .image-right, .image.right {float: right; margin-left: 20px} /* ISSUES */ .node-type-post-hole-issue .view-articles .views-field-views-conditional {float: left; margin-right: 20px; width: 300px} /* MENUS */ #block-superfish-1 {position: absolute; bottom: 0; right: 20px} #block-superfish-1 #superfish-1 > li > a {color: #8121AD; padding: 10px 12px; text-transform: uppercase} #block-superfish-1 #superfish-1 li a:hover {background: #FCF6FC} #block-superfish-1 #superfish-1 li > ul li a {color: #731472; font-size: 14px; line-height: 1.3; padding: 8px 10px} #block-superfish-1 #superfish-1 li > ul li a:hover {background: #F0E5F0} #block-superfish-1 .sf-megamenu {background: #FCF6FC; border-radius: 0; padding: 0 !important; top: 41px; width: 100% !important} #block-superfish-1 .sf-megamenu .sf-megamenu-wrapper {width: 100% !important} #block-superfish-1 .sf-megamenu .sf-megamenu-wrapper > ol {width: 100% !important} #block-superfish-1 .sf-megamenu div.sf-megamenu-column {width: 100% !important} #block-superfish-1 .sf-megamenu li.sf-megamenu-column {float: left; padding: 15px; min-width: 25%; width: 25%} #block-superfish-1 .sf-megamenu li:nth-child(4n+1) {clear: both} #block-superfish-1 .sf-megamenu ol {min-width: 25%; width: 100% !important} #block-superfish-1 .sf-megamenu .nolink {display: block; border-bottom: 1px solid #CCC; color: #333; padding-bottom: 5px} #block-superfish-1 .sfHover {background: #FCF6FC} #block-superfish-1 .sf-menu > li {position: static} #superfish-2 > li > ul {background: #9D679E; border-radius: 0; padding: 0 !important} #menu-479-1 {width: 75% !important} #menu-479-1 > .sf-megamenu-column {width: 100% !important} #menu-479-1 ol {column-count: 3; column-fill: auto; max-height: 250px; width: 100% !important} /* SOCIAL MEDIA */ .twitter-button {margin-top: 10px} .twitter-feed {overflow-y: scroll; height: 500px} }