/** * Responsive Styles * * @package Stare * @since Stare 0.1.0 */ /* Media Queries for Laptop -------------------------------------------------------------- */ @media screen and (max-width:1440px){ } /* Media Queries for iPad -------------------------------------------------------------- */ @media screen and (max-width:975px){ /* Structure */ #wrapper { width: 100%; } #wrapper #header, #wrapper #access .menu-header-container, #wrapper #main, #wrapper #primary, #wrapper #colophon { width: auto !important; } #wrapper #container { width: 100% !important; display: block; clear: both; } #wrapper #content { width: auto !important; display: block; clear: both; } #wrapper #container .page-title { left: inherit; right: 95px; } /* Nav/Page Menus */ #wrapper #access { padding: 0; margin: 0 auto; width: 100% !important; float: none; } #wrapper #access .menu-header-container {} #wrapper #access #menu-high-art-main-menu { text-align: center; } #wrapper #access #menu-high-art-main-menu li { display: inline-block; vertical-align: top; float: none; text-align: left; } #wrapper #access .select-menu-container { padding: 10px 25px; } /* Entry Content */ #content .entry-content, #content .entry-summary { width: auto; } #content .entry-content p, #content .entry-summary p, #content .entry-content h1, #content .entry-content h2, #content .entry-content h3, #content .entry-content h4, #content .entry-content h5, #content .entry-content h6, #content .entry-content div, #content .entry-content pre, #content .entry-content address, #content .entry-content blockquote, #content .entry-content dl { margin-left: 0; margin-right: 0; width: inherit; } /* Home */ .home #content .hentry { margin-left: 95px; margin-right: 95px; } .home #content .hentry .entry-title { margin-left: 0; float: left; width: inherit; margin-right: 205px; } .home #content .hentry .entry-meta { margin-right: 0; float: right; width: 190px; margin-left: -190px; } .home #content .hentry .entry-utility { margin-left: 0; } .home #content .hentry .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; } .home #wrapper #main { padding-top: 77px; } .home #exhibit-gallery-wrap, .home #exhibit-gallery, .home #exhibit-gallery .entry-title { width: 100%; } .home #exhibit-gallery .entry-title a { width: auto; } .home #exhibit-gallery-wrap .flex-direction-nav { display: block; top: -66px; left: 50%; margin-left: -63px; } /* Single Posts */ .single #content .hentry { padding: 0 95px; } .single #content .entry-title { margin-left: 0; float: left; width: inherit; margin-right: 205px; margin-bottom: 11px; } .single #content .entry-meta { margin-right: 0; float: right; width: 190px; margin-left: -190px; } .single #content .entry-utility { margin-left: 0; } .single #content .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; } /* Pages */ .page #content .page.hentry { padding-left: 95px; padding-right: 95px; padding-bottom: 44px; } .page #content .page .entry-title { margin-left: 0; float: left; width: inherit; margin-right: 205px; margin-bottom: 11px; } .page #content .page .entry-meta { margin-right: 0; float: right; width: 190px; margin-left: -190px; } .page #content .page .entry-utility { margin-left: 0; } .page #content .page .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; } /* Archives */ .archive #content .hentry { padding-left: 95px; padding-right: 95px; padding-bottom: 44px; } .archive #content .entry-title { margin-left: 0; float: left; width: inherit; margin-right: 205px; } .archive #content .entry-meta { margin-right: 0; float: right; width: 190px; margin-left: -190px; } .archive #content .entry-utility { margin-left: 0; } .archive #content .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; } /* Single Exhibits */ .single-ha_exhibit .masonry #content { width: auto; } .single-ha_exhibit .masonry #content .hentry { width: auto; } .single-ha_exhibit .masonry #gallery-container { width: 100%; } .single-ha_exhibit .masonry #content .entry-title { width: auto; margin-right: 0; } .single-ha_exhibit .masonry #content .entry-content { width: auto; float: none; clear: both; margin-right: 0; } .single-ha_exhibit .masonry #content .entry-meta { text-align: right; padding-top: 0; width: auto; } .single-ha_exhibit .masonry #content .entry-utility { float: none; width: 100%; margin-left: 0; clear: both; } /* Single Events */ .single #content .type-ha_events .entry-title, .single #content .type-ha_events .entry-meta { width: 100%; margin-right: 0; margin-left: 0; } .single #content .type-ha_events .entry-content { width: 100%; margin-left: 0; } .single #content .type-ha_events .entry-image { margin: 0; } /* Full Archive Page Template */ .page-template-ha-full-archive-page-php #wrapper #content { width: 100%; margin-left: 0; } .page-template-ha-full-archive-page-php #content .hentry { padding-left: 0; padding-right: 0; } /* Events Archive Page Template */ .page-template-ha-events-archive-page-php #wrapper #content, .single-ha_events #events { width: 100%; margin-left: 0; } .home #events, .home #events #events-container, .page-template-ha-events-archive-page-php #content #events-container, .single-ha_events #events #events-container { text-align: center; width: 100%; } .home #events #events-container li.hentry, .page-template-ha-events-archive-page-php #content #events-container li.hentry, .single-ha_events #events #events-container li.hentry { padding-left: 0; padding-right: 0; margin-left: 13px; margin-right: 12px; text-align: left; display: inline-block; float: none; vertical-align: top; } /* Blog Archive Page Template */ .page-template-ha-blog-archive-page-php #content { margin-top: -1px; } .page-template-ha-blog-archive-page-php #content .hentry { padding-left: 0; padding-right: 0; padding-bottom: 44px; margin-left: 95px; margin-right: 95px; } .page-template-ha-blog-archive-page-php #content .entry-title { float: left; } .page-template-ha-blog-archive-page-php #content .entry-meta { float: right; margin-left: -70px; } .page-template-ha-blog-archive-page-php #content .entry-utility { margin-left: 0; } .page-template-ha-blog-archive-page-php #content .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; margin-bottom: 11px; } /* Exhibits Archive Page Template */ .page-template-ha-exhibits-archive-page-php #wrapper #container { width: 100% !important; display: block; } .page-template-ha-exhibits-archive-page-php #wrapper #content { width: 100%; display: block; } .page-template-ha-exhibits-archive-page-php #content .hentry { width: 100%; display: block; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* Full Width Page Template */ .page-template-ha-full-width-page-php #content .hentry .entry-content { padding-right: 0; } /* Navigation */ #wrapper #nav-below { width: 100%; } #nav-below .nav-previous a { padding-left: 95px; } #nav-below .nav-next a { padding-right: 95px; } /* Comments */ #comments { margin-right: 95px; margin-left: 95px; } #comments .commentlist { margin-left: 0; margin-bottom: 88px; } #comments .commentlist li.comment { width: 100%; min-height: inherit; } #comments .commentlist li.comment div[id^="comment-"] { padding-bottom: 22px; } #comments .commentlist .comment .comment-meta, #comments .commentlist .comment .comment-body { width: 100%; float: none; } #comments .commentlist .comment .comment-body { margin-bottom: 0; } #comments .commentlist .comment .reply { padding-bottom: 0; } #comments .commentlist .comment .comment-meta { width: 100%; display: table; margin-bottom: 11px; } #comments .commentlist .comment .comment-meta cite { width: auto; float: none; } #comments .commentlist .comment .comment-utility { float: left; margin-left: 25px; } #comments .commentlist .children .comment { margin-left: 95px; } #comments .commentlist .children .depth-2 { width: auto; float: none; } #comments .commentlist .children li.comment div[id^="comment-"] { padding-bottom: 0; } #comments .navigation { margin-left: 0; } #comments #commentform { margin-left: 0; } /* Sidebars */ #wrapper #primary { float: none; display: table; clear: both; margin-left: 0; } #wrapper #primary .widget-container { width: 30%; margin: 0 1.5%; float: left; } #wrapper #primary .xoxo { margin: 0 95px; } /* Footer */ #wrapper #colophon #site-info { width: 100%; } /** * Resize images to fit the main content area. * - Applies only to images uploaded via WordPress by targeting size-* classes. * - Other images will be left alone. Use "size-auto"class to apply to other images. */ #content p img.size-large, #content p img.size-full { margin-left: 0; } .page-template-ha-exhibits-archive-page-php #wrapper #content .entry-content img, img.size-auto, #content p img.size-large, #content p img.size-full, img.size-full, img.size-large, img.size-medium, p img, div img, figure img, .attachment img, .widget-area img { width: inherit; max-width: 100%; height: auto; } .home #exhibit-gallery .exhibit-slide iframe[src] { width: inherit !important; max-width: 100% !important; height: 300px !important; } } /* Archive with 3 columns -------------------------------------------------------------- */ /* @media screen and (max-width:980px){ #wrapper { .stare-archives #content { .post { width: 33% !important; } } } } */ /* Archive with 2 columns -------------------------------------------------------------- */ @media screen and (max-width:695px){ #wrapper { } /* Header */ #wrapper #masthead #site-title { left: 50%; margin-left: -82px; } /* Nav/Page Menus */ #wrapper #access { position: relative; display: block; margin-top: 88px; border-top: 1px solid #666666; } #wrapper #access .menu-header-container { display: none; } #wrapper #access .select-menu-container { padding: 11px 25px; } #wrapper #access .select-menu-container select.select-menu { display: block; width: 100%; } #wrapper #access ul .menu-parent-item > a:after { content: ""; display: none; } #wrapper #access ul ul .menu-parent-item > a:after { content: ""; display: none; } /* Containers */ #wrapper #main { padding-top: 33px; } #wrapper #container .page-title { display: none; } #content .entry-title { width: 100%; } /* Home */ .home #wrapper #main {padding-top: 60px; } .home #content .hentry { margin-left: 25px; margin-right: 25px; } .home #exhibit-gallery-wrap .flex-direction-nav { height: 60px; width: 100%; padding: 0; display: block; position: absolute; top: -60px; left: 0; margin: 0; -moz-border-radius: inherit; -webkit-border-radius: inherit; -khtml-border-radius: inherit; border-radius: inherit; box-shadow: inherit; -moz-box-shadow: inherit; -webkit-box-shadow: inherit; } .home #exhibit-gallery-wrap .flex-direction-nav li { display: inline-block; text-align: center; font-size: 18px; width: 50%; } .home #exhibit-gallery-wrap .flex-direction-nav li a { padding: 20px 0; display: block; text-align: center; } .home #exhibit-gallery-wrap .flex-direction-nav li:first-child:after { content: ""; padding: 0;} .home #exhibit-gallery-wrap .flex-direction-nav a { line-height: 20px; display: inline-block; margin: 0; } .home #exhibit-gallery-wrap .flex-direction-nav #counter { display: none; } .home #content .hentry .entry-title { margin-right: 0; margin-bottom: 0; } .home #content .hentry .entry-title a { padding-bottom: 11px; } .home #content .hentry .entry-meta { margin: 0 0 22px; width: 100%; } .home #content .hentry .entry-utility .entry-utility-type { margin-bottom: 11px; } .home #events #events-container li.hentry { width: auto; height: inherit; padding-bottom: 0; margin-left: 25px; margin-right: 25px; } .home #events #events-container li.hentry .entry-title { width: 100%; font-size: 22px; } .home #events #events-container .entry-image { left: 50%; margin-left: -83px; } /* Single Posts */ .single #content .hentry { padding: 0 25px; } .single #content .entry-title { width: 100%; margin-right: 0; margin-left: 0; float: left; } .single #content .entry-meta { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 22px; float: right; } .single #content .entry-utility { margin-left: 0; } .single #content .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; margin-bottom: 11px; } /* Single Pages */ .page #content .page.hentry { padding-left: 25px; padding-right: 25px; } .page #content .page .entry-title { margin-left: 0; float: left; width: 100%; margin-right: 0; } .page #content .page .entry-meta { margin-right: 0; float: right; width: 100%; margin-left: 0; margin-bottom: 22px; } .page #content .page .entry-utility { margin-left: 0; } .page #content .page .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; margin-bottom: 11px; } /* Archives */ .archive #content .hentry { padding-left: 25px; padding-right: 25px; } .archive #content .entry-title { margin-left: 0; float: left; width: 100%; margin-right: 0; } .archive #content .entry-title a { padding-bottom: 0; } .archive #content .entry-meta { margin-right: 0; float: right; width: 100%; margin-left: 0; margin-bottom: 22px; } .archive #content .entry-utility { margin-left: 0; } .archive #content .entry-utility .entry-utility-type { margin-left: 0; margin-right: 25px; margin-bottom: 11px; } /* Single Exhibit */ .single-ha_exhibit .masonry #content .entry-meta { text-align: left; float: right; } /* Blog Archive Page Template */ .page-template-ha-blog-archive-page-php #content .hentry { padding-left: 0; padding-right: 0; padding-bottom: 44px; margin-left: 25px; margin-right: 25px; } .page-template-ha-blog-archive-page-php #content .entry-title { margin-bottom: 0; } .page-template-ha-blog-archive-page-php #content .entry-title a { padding-bottom: 0; } .page-template-ha-blog-archive-page-php #content .entry-meta { float: left; width: 100%; margin-left: 0; } /* Events Archive Page Template */ .page-template-ha-events-archive-page-php #content #events-container li.hentry { width: auto; height: inherit; padding-bottom: 0; margin-left: 25px; margin-right: 25px; } /* Navigation */ #nav-below .nav-previous a { padding-left: 25px; } #nav-below .nav-next a { padding-right: 25px; } /* Comments */ #comments { margin-right: 25px; margin-left: 25px; } #comments .commentlist .children .comment { margin-left: 25px; } /* Sidebar */ #wrapper #primary .xoxo { margin: 0 25px; } #wrapper #primary .widget-container { width: 100%; margin: 0; } /* Footer */ #wrapper #colophon { padding-left: 25px; padding-right: 25px; } }