/* Theme Name: Hallmark Theme URI: http://indiciadesign.com Description: Theme for the Hallmark Art Collection Version: 1.0 Author: Indicia Design Author URI: http://indiciadesign.com */ /* =========================== CONTENTS: 01 Sensible defaults 02 Site Styles =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Imports ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; @import "css/base.css"; @import "css/skeleton.css"; /* ---------------------------------------------------------------------------------------------------------- 02 Site Styles ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .bg-title { position: absolute; z-index: -99; } /* HEADER */ header { background: #f6f6f6; width: 190px; padding: 0 1.5%; position: fixed;top: 0; left: 0; margin-bottom: -9999px; padding-bottom: 9999px; text-align: left; border-right: 1px #EEE solid; z-index:999; } h1.site-title { color: #222; font-size: 34px; text-align: left; margin: 100px 0 20px 0; line-height: .9em; letter-spacing: -2px; font-weight: 600; } h1.site-title a { color: #222; } h1.site-title a:hover { text-decoration: none } .mobile-header { display: none } nav.fixed-right-nav { background: #f6f6f6; width: 205px; position: fixed; top: 0; right: 0; margin-bottom: -9999px; padding-bottom: 9999px; border-left: 1px #EEE solid; border-right: 8px #e95239 solid; z-index:999; } .icon-nav { margin: 175px 0 0 0; padding: 0 0 0 15px; font-size: 14px; font-weight: bold } .icon-nav > li { list-style: none; display: block; height: 45px; margin-bottom: 10px; } .icon-nav > li a { color: #e95239; display: block; width: 100%; height: 100%; padding: 10px 0 0 45px; outline: 0} .icon-nav > li:hover a { color: #e95239; transition: color .3s; } .icon-nav > li.nav-explore { background: url('images/explore-icon-active.png') no-repeat left top; } .icon-nav > li.nav-explore:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/explore-icon-black.png') no-repeat left top; } .icon-nav > li.nav-about { background: url('images/about-icon-black.png') no-repeat left top; } .icon-nav > li.nav-about:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/about-icon-active.png') no-repeat left top; } .icon-nav > li.nav-media { background: url('images/media-icon-black.png') no-repeat left top; } .icon-nav > li.nav-media:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/media-icon-active.png') no-repeat left top; } .icon-nav > li.nav-news { background: url('images/news-icon-black.png') no-repeat left top; } .icon-nav > li.nav-news:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/news-icon-active.png') no-repeat left top; } .icon-nav > li.nav-creativthink { background: url('images/creativthinking-icon-black.png') no-repeat left top; } .icon-nav > li.nav-creativthink:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/creativthinking-icon-active.png') no-repeat left top; } .search { position: relative; } .search input { text-indent: 0px;} .search .fa-search { position: absolute; top: 7px; right: 8px; font-size: 15px; } .secondary-column { margin: 0 auto; width: 100%; } .secondary-column ul { padding: 0; font-size: 13px; font-weight: 600; margin-bottom: 10%; } .secondary-column ul li { list-style: none; margin-bottom: 0; line-height: 14px; padding-bottom: 10px } .secondary-column ul li a:link, .secondary-column ul li a:visited { color: #333;} .secondary-column ul li a:hover { color: #f05441; transition: color .2s; } /* HOME */ p.welcome { font-weight: 600; color: #f05441; font-size: 2.25em; } .home-intro { font-weight: 400; color: #888; font-size: 130%; line-height: 1.3em; margin-top: 20px; } #masoncontainer .item { max-width: 740px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 66%; max-width: 740px; } #masoncontainer .item.tall { height: auto; width: 33%; max-width: 360px; } #masoncontainer .item.med { height: auto; width: 33%; max-width: 360px; } #masoncontainer .item.smll { height: auto; width: 33%; max-width: 360px; } #masoncontainer .item.wide { height: auto; width: 65%; max-width: 740px; } .galleryitem { height: auto; margin-bottom: 20px; position: relative; } .galleryitem img { width: 100%; } .galleryitem:hover .img-title { opacity: 1; } .img-title { position: absolute; bottom: 0; margin: 0; min-height: 2em; padding: 5px 0 5px 10px; width: 100%; text-align: left; opacity: 0; background-color: rgba(255,255,255,.8); transition: all 0.5s ease; overflow: hidden; font-size: 11px; } .img-title h6, .img-title p { display: inline-block; } .img-title h6 { color: #e95239; margin: 0 5px 0 0; line-height: 13px; } .img-title p { font-size: 12px; margin-bottom: 0; line-height: 13px; } /* SEC PAGES */ .pagebg { background-position: top left; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hdr-spacing, .main-column { padding-top: 175px; } .red { color: #e95239; } .blue { color: #4bb5c1; } div.page-intro p { font-weight: 700; color: #787878; font-size: 135%; line-height: 1.2em; margin-top: 20px; } p.page-intro { font-weight: 700; color: #787878; font-size: 135%; line-height: 1.2em; margin-top: 40px; } .main-column p { font-size: 15px; line-height: 22px; } .sidebar-images-col img { margin-bottom: 20px; } .wp-caption { width: 100%; } p.wp-caption-text { font-size: 12px; color: #666; padding: 5px 0; margin-bottom: 15px; line-height: 14px; } .slb_data_content { margin-top: 5px !important; } #slb_viewer_wrap .slb_theme_slb_default .slb_data_title { color: #666; font-size: 14px !important;} .artwork-side { padding: 25px; background: #EEE; margin-bottom: 50px; } .artwork-side .bx-wrapper { position: relative; margin: 0 auto 25px; padding: 0; *zoom: 1; } .artwork-side .bx-wrapper .bx-pager, .artwork-side .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } .artwork-side .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #999; padding-top: 20px; } .artwork-side .bx-wrapper .bx-pager .bx-pager-item, .artwork-side .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .artwork-side .bx-wrapper .bx-pager.bx-default-pager a { background: #999; text-indent: -9999px; display: block; width: 8px; height: 8px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .artwork-side .bx-wrapper .bx-pager.bx-default-pager a:hover, .artwork-side .bx-wrapper .bx-pager.bx-default-pager a.active { background: #e95239; } .artwork-side .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } .artwork-side .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } .artwork-side .bx-wrapper .bx-prev:hover { background-position: 0 0; } .artwork-side .bx-wrapper .bx-next:hover { background-position: -43px 0; } .artwork-side .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px;text-indent: -9999px; z-index: 9999; } .artwork-side .bx-wrapper .bx-controls-direction a.disabled { display: none; } .bx-caption { font-style: italic; font-size: 14px; margin: 5px 0 15px 0; padding-top: 15px; border-top: 1px #DDD solid; color: #666; } .page-content img { max-width: 100%; height: auto; } .main-column blockquote, .page-content blockquote { background: url('images/quote-bg.png') no-repeat left top; margin-bottom: 10px; } .main-column blockquote p, .page-content blockquote p { color: #e95239; font-weight: 300; font-style: italic; font-size: 24px; line-height: 26px; margin-left: 30px; } /* EXPLORE THE ART */ .hdr-page-link { text-align: justify; font-weight: 700; margin-bottom: 5px; } .hdr-page-link h5, .hdr-page-link p { text-align: left; display: inline; vertical-align: top; margin-right: 0;} .hdr-page-link p { float: right; margin-bottom: 0; text-transform: uppercase; font-size: 14px; } ul.artist-list { display: block; height: 20px; margin-bottom: 10px } ul.artist-list li { float: left; display: inline-block; font-weight: 700; padding: 0 10px; border-right: 1px #CCC solid; margin-bottom: 0} ul.artist-list li:last-child { border-right: 0; padding-right: 0 } ul.artist-list li a, ul.artistlist li a:visited { color: #666; outline: 0} ul.artist-list li a:hover { color: #e95239; } ul.artist-list li.active a { color: #e95239; } .artist-panel-container { padding: 15px 0; margin-bottom: 25px; } .letter-list { font-size: 16px; -webkit-columns: 4 200px; -moz-columns: 4 200px; columns: 4 200px; } .letter-list p { margin-bottom: 0 } ul.decade-timeline { display: block; height: 20px; margin-bottom: 30px } ul.decade-timeline li { float: left; display: inline-block; font-weight: 700; padding: 0 10px; border-right: 1px #CCC solid; margin-bottom: 0} ul.decade-timeline li:last-child { border-right: 0; padding-right: 0 } ul.decade-timeline li a, ul.decade-timeline li a:visited { color: #666; outline: 0} ul.decade-timeline li a:hover { color: #e95239; } .top_arrow_box { font-size: 14px; font-weight: 700; background: #FFF; padding: 3px 0 0 0; text-align: left} /* ABOUT THE COLLECTION */ ul.about-links li { opacity: 1; border-bottom: 1px #DDD solid; padding-bottom: 15px; height: 100%; display: block; margin-bottom: 0; } ul.about-links li a, ul.stories-links li a:visited { color: #e95239 } ul.about-links li h2 { font-size: 52px; font-weight: 700; letter-spacing: -2px; color: #e95239; margin-bottom: 0; line-height: 38px; margin-top: 16px; } ul.about-links li p { color: #666; font-size: 12px; font-weight: 600; color: #999; margin:0px 0 0 3px; line-height: 18px;} ul.about-links li:first-child { border-top: 1px #DDD solid } ul.about-links li:hover { opacity: .8; } /* LOCATIONS */ div.cspm_infobox_content_container.cspm_type1 { width: 350px !important; height: 100% !important; } div.cspm_infobox_content_container.cspm_type1 div.cspm_infobox_content { width: 220px !important; } div.cspm_infobox_content_container.cspm_type1 div.cspm_infobox_content div.title, div.cspm_infobox_content_container.cspm_type1 div.cspm_infobox_content div.description { overflow: visible; height: auto !important; line-height: 16px;} div.cspm_infobox_content_container.cspm_type1 div.cspm_infobox_content div.description { } .locations h3 { margin-bottom: 10px; } .corp-locations img, .loans-locations img { max-width: 22%; height: auto } .corp-locations h5 { margin-bottom: 0px; line-height: 14px; text-transform: none } .loans-locations h5 { color: #e95239; margin-bottom: 0px; line-height: 14px; text-transform: none } .corp-locations p, .loans-locations p { line-height: 16px; } .corp-locations img, .loans-locations img { margin-bottom: 20px; } .popover-content h5 { line-height: 14px; text-transform: none } .popover-content img { margin-bottom: 14px; } .popover-content p { font-size: 11px; line-height: 16px; } /* NEWS */ .news-row img { margin-top: 5px; margin-bottom: 10px } .news-row h3 { margin-top: 0; margin-bottom: 15px;} /* ARTWORK PROFILE */ .mfp-fade.mfp-bg { opacity: 0.001; /* Chrome opacity transition bug */ -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 1; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .artist-video { display: none; position: absolute; z-index: 999; background: #EEE; margin-top: 100px; padding: 15px 0 5px 0; width: 96.5%; height: 640px; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } \ .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .artwork-full { margin-top: 160px; padding: 15px 0 5px 0; width: 100%; } .artwork-slider { padding: 0 !important; } p.viewdetail { font-size: 12px; margin-top: 10px; text-align: left; } p.viewdetail img { margin-right: 5px; } .disabled { display: none; } .indv-artwork-details { margin-bottom: 25px; } .indv-artwork-details > h3 { margin-bottom: 0px; margin-top: 0; } .indv-artwork-details > p span { font-size: 18px; font-style: italic } .indv-artwork-details > p { font-size: 14px; line-height: 18px; margin-bottom: 0; } .artist-copyright p { font-size: 13px; color: #888; margin-top: 10%; margin-bottom: 0; line-height: 14px; } div.detail-artist-copyright { color: #888; margin-top: 0; margin-bottom: 0; line-height: 14px; } div.detail-artist-copyright > p { font-size: 13px !important} .slide-artist-copyright { font-size: 12px; color: #888; margin: 1em 0; margin-bottom: 0; line-height: 14px; } .artwork-tabs { margin-bottom: 50px; } .sec-icon-nav { margin: 15px 0 25px 0; padding: 0; font-size: 11px; } .sec-icon-nav > li { list-style: none; display: block; height: 44px; padding: 0 0 0 0; margin-bottom: 10px; } .sec-icon-nav > li a { color: #444; font-weight: 700; display: block; width: 100%; height: 100%; padding: 15px 0 0 50px; outline: 0;} .sec-icon-nav > li:hover a { color: #e95239; transition: color .3s; } a.videolink { display: block; width: 100%; height: auto; color: #444;font-weight: 700; } a.videolink div { width: 95%; height: 100%; padding: 16% 0 16% 5%; background-size: cover; background-repeat: no-repeat; } a.videolink p { text-align: right; color: #444; margin-bottom: 0; font-size: 12px; } a.videolink:hover, a.videolink:hover p { color: #e95239 } a.videolink:hover .fa-play { border: 2px solid #e95239; } .fa-play { border: 2px solid #444; border-radius: 50%; display:block; width:40px; height:40px; line-height:40px !important; text-align: center } .sec-icon-nav > li.sec-artdescrp { background: url('images/sec-description-icon.png') no-repeat left top; } .sec-icon-nav > li.sec-artdescrp:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/sec-description-icon-active.png') no-repeat left top; } .sec-icon-nav > li.sec-artstmnt { background: url('images/sec-comment-icon.png') no-repeat left top; } .sec-icon-nav > li.sec-artstmnt:hover {transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/sec-comment-icon-active.png') no-repeat left top; } .sec-icon-nav > li.sec-otherwrks { background: url('images/sec-plus-icon.png') no-repeat left top; } .sec-icon-nav > li.sec-otherwrks:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/sec-plus-icon-active.png') no-repeat left top; } .sec-icon-nav > li.sec-relatedwrks { background: url('images/sec-related-icon.png') no-repeat left top; } .sec-icon-nav > li.sec-relatedwrks:hover { transition: background .3s; -webkit-transition: background .3s; -moz-transition: background .3s; -o-transition: background .3s; background: url('images/sec-related-icon-active.png') no-repeat left top; } p.relwork-tags { margin-top: -5px; font-size: 12px; font-weight: 700; line-height: 14px } #gallery-1 .gallery-item, #gallery-2 .gallery-item { margin-top: 0 !important; text-align: left !important; width: 27% !important; } #gallery-1 img, #gallery-2 img { border: none !important; } .related-gallery { margin-bottom: 5px !important; } /* SEARCH RESULTS */ .search-rslts { margin-bottom: 0px; } /* CREATIVELY THINKING */ ul#menu-creatively-thinking li { border-right: 5px #c7bf42 solid; padding: 3px 0; } ul#menu-creatively-thinking li:first-child { border-right-color: #cf8f45 } ul#menu-creatively-thinking li:last-child { border-right-color: #8fb965} ul.creative-think { } ul.creative-think li { display: block; width: 100%; max-width: 740px; height: 100%; max-height: 100px; font-size: 60px; font-weight: 700; letter-spacing: -3px; margin-bottom: 15px; line-height: 56px;} ul.creative-think li a, ul.creative-think li a:visited { color: #FFF; opacity: .8; display: block; width: 100%; max-width: 740px; height: 60px; padding: 20px;} ul.creative-think li a:hover { opacity: 1 } ul.stories-links { margin-bottom: 50px; } ul.stories-links li { opacity: 1; border-bottom: 1px #DDD solid; padding-bottom: 0px; height: 100%; display: block; margin-bottom: 0; } ul.stories-links li a, ul.stories-links li a:visited { color: #e95239 } ul.stories-links li h2 { font-size: 52px; font-weight: 700; letter-spacing: -2px; color: #e95239; margin-bottom: 0; line-height: 38px; margin-top:6%; } ul.stories-links li h2 span { font-size: 36px; font-weight: 300; color: #666; } ul.stories-links li img { padding: 20px 0 0 0; } ul.stories-links li p { color: #666; font-weight: 600; color: #999; margin:5px 0 15px 3px; line-height: 18px;} ul.stories-links li:first-child { border-top: 1px #DDD solid } ul.stories-links li:hover { opacity: .8; } /* STORIES */ h1.story-title { color: #e95239; font-size: 10rem; position: relative; z-index: 1; line-height: .7em; letter-spacing: -.4rem; } .story-sub { font-size: 2.5rem; font-weight: 300; color: #666; letter-spacing: -2px; position: relative; z-index: 1; margin-bottom: 40px; } .story-page-intro > p { font-weight: 700; color: #787878; font-size: 135% !important; line-height: 1.2em !important; margin: 20px 0; letter-spacing: -1px} div.story-copy p { font-size: 16px; line-height: 22px; } .artwork-side h3 { color: #999; font-size: 18px; margin-bottom: 15px; } .artwork-side h2 { font-weight: 300; font-style: italic; font-size: 21px; line-height: 24px; } .artwork-side h5 { margin-bottom: 15px; } .wp-sidecaption-text { margin: 20px 0 0 0; } .wp-sidecaption-text p { font-size: 14px !important ; line-height: 16px !important; margin-bottom: 5px; } .wp-sidecaption-text p strong { font-size: 12px; } .bottom_aligner { display: inline-block; height: 100%; vertical-align: bottom; width: 0px; } .story-copy blockquote { background: url('images/quote-bg.png') no-repeat left top; margin-bottom: 10px; } .story-copy blockquote p { color: #e95239; font-weight: 300; font-style: italic; font-size: 24px; line-height: 26px; margin-left: 30px; } .story-thmbs { padding: 0 0 0 20px } .story-thmbs p { margin: 15px 0 50px 0; color: #999; } .story-thmbs .img-title p { margin: 0 10px 0 0; color: #333; } .grey-fullwidth { padding: 50px; } .grey-fullwidth h3 { margin-bottom: 40px; font-size: 200%; line-height: 1em } .mfp-title p.wp-caption-text { letter-spacing: 0; font-weight: normal } .sidebar { border-left: 1px #ddd solid; box-sizing: border-box; } /* STORY - Dali at Hallmark */ div.daliartquote p { color: #333; font-weight: 300; font-style: italic; font-size: 18px !important; line-height: 22px !important; margin-left: 0px; } /* STORY - Hallmark Art Awards */ .book-thumb { margin: 20px 0; padding-top: 20px; border-top: 1px #C9C9C9 solid; } .book-thumb img { max-width: 30%; float: left; margin-right: 25px; } #haa-pager { text-align: justify; margin: 50px 0 0 0; font-size: 4.9em; font-weight: 900; letter-spacing: -5px; } #haa-pager a { margin-right: 0; color: #CCC } #haa-pager a:hover { color: #e95239; } /* NEW PERSPECTIVES */ h1.np-story-title { color: #e95239; font-size: 5rem; position: relative; z-index: 1; line-height: .9em; letter-spacing: -.3rem; } h2.np-story-subtitle { color: #e95239; font-size: 2.75rem; position: relative; z-index: 1; line-height: 1em; letter-spacing: -.1rem; margin-bottom: .5em } .npauthor-bio p { color: #999; } .npauthor-bio p strong { color: #999 } /* MEDIA */ ul.vidgall-links { margin: 0; padding: 0 } ul.vidgall-links li { opacity: 1; border-bottom: 1px #DDD solid; padding-bottom: 0px; height: 100%; display: block; margin-bottom: 0; padding: 20px 0 0 0 } ul.vidgall-links li h2 { font-size: 62px; font-weight: 700; letter-spacing: -2px; color: #e95239; margin-bottom: 0; line-height: 36px; margin: 6% 0; } ul.vidgall-links li h2 span { font-size: 36px; font-weight: 300; color: #666; } ul.vidgall-links li .vidgall-thumb { width: 100%; height: 100%; padding: 10% 0 10% 0; background-size: cover; background-repeat: no-repeat; background-position: center center; } ul.vidgall-links li .vidgall-thumb .fa-play { color: #e95239; border: 2px solid #e95239; margin-left: 5% } ul.vidgall-links li:first-child { border-top: 1px #DDD solid } ul.vidgall-links li:hover { opacity: .8; } .mfp-title { position:absolute; padding: 2% 0; color: #C9C9C9 !important; font-size: 36px; font-weight: 700; letter-spacing: -2px; } .wistia-fancybox #fancybox-overlay { background: #fff !important; opacity: 1 !important; } .wistia-fancybox .fancybox-title-float-wrap { left: 0; margin-bottom: -60px !important } .wistia-fancybox .fancybox-title-float-wrap .child { color: #C9C9C9 !important; font-size: 36px; font-weight: 700; letter-spacing: -2px; background: none !important; text-shadow: none !important; padding-left: 0 !important; margin-right: 100% !important } .white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 680px; margin: 20px auto; } .white-popup .vjs-default-skin .vjs-play-progress, .white-popup .vjs-default-skin .vjs-volume-level { background: #e95239 !important; } .white-popup .wp-video, .white-popup video.wp-video-shortcode, .white-popup .mejs-overlay.load { width: 100% !important; height: 100% !important; } .white-popup .mejs-container { width: 100% !important; height: 383px !important; } .white-popup .mejs-container-fullscreen { height: 100% !important; } .white-popup .mejs-controls { visibility: hidden; display: block } .wp-video, video.wp-video-shortcode { width: 100% !important; height: 100% !important; } .wp-video, .artwork-side .wp-video-shortcode { max-width: 100% !important; } .wp-video, video.wp-video-shortcode { max-width: 100% !important; } video.wp-video-shortcode { position: relative; } .mejs-mediaelement { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mejs-overlay-play { top: 0; right: 0; bottom: 0; left: 0; width: auto !important; height: auto !important; } .mejs-controls .mejs-time-rail .mejs-time-current { background: #e95239 !important; } /* WHEN WRITERS MEET ART */ .writers-prev { border-bottom: 1px #DDD solid; } .writers-prev img { width: 20%; height: auto; margin: 0 10px 10px 0 ; float: left; display: inline-block } .writers-prev p { margin-bottom: 10px; } .writers-prev a { height: 100%; display: block; padding: 10px 10px 10px 10px; color: #333} .writers-prev:hover, .writers-prev a:hover { background: #f0f0f0; } .artwrk-info-wrap { border-bottom: 1px #DDD solid; margin-bottom: 10px; padding-bottom: 15px; } .artwrk-info-wrap img { width: 75%; height: auto; margin-bottom: 5px; } .artwrk-info-wrap p { margin-top: 15px; margin-bottom: 0; margin-right: 0; } div.wma-artist-copyright p { font-size: 12px; color: #888; margin: 0 0 10px 0px !important; line-height: 14px; } .learn-more { margin-top: 0; margin-bottom: 1%; line-height: 1.2; font-size: 75%; } .seasons-wrap .bx-wrapper { position: relative; margin: 0 auto 25px; padding: 0; *zoom: 1; } .seasons-wrap .bx-wrapper .bx-pager, .seasons-wrap .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } .seasons-wrap .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #999; padding-top: 20px; } .seasons-wrap .bx-wrapper .bx-pager .bx-pager-item, .seasons-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .seasons-wrap .bx-wrapper .bx-pager.bx-default-pager a { background: #999; text-indent: -9999px; display: block; width: 8px; height: 8px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .seasons-wrap .bx-wrapper .bx-pager.bx-default-pager a:hover, .seasons-wrap .bx-wrapper .bx-pager.bx-default-pager a.active { background: #e95239; } /* FOOTER */ .footer, .push { height: 70px; /* .push must be the same height as .footer */} .footer { border-top: 1px solid #eee; padding-top: 15px; margin-top: 0px; background: #FFF; } .footer p { font-size: 10px; color: #888; margin-bottom: 15px; line-height: 14px; } .footer p a { margin-left: 2em; } @media only screen and (min-width: 1441px) and (max-width: 1600px) { #masoncontainer .item { max-width: 620px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 66%; max-width: 620px; } #masoncontainer .item.tall { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.med { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.smll { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.wide { height: auto; width: 65%; max-width: 620px; } } @media only screen and (min-width: 1301px) and (max-width: 1440px) { h1 { font-size: 8em; line-height: .82em; margin-top: -25px; } #masoncontainer .item { max-width: 620px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 66%; max-width: 620px; } #masoncontainer .item.tall { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.med { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.smll { height: auto; width: 33%; max-width: 300px; } #masoncontainer .item.wide { height: auto; width: 65%; max-width: 620px; } #haa-pager { font-size: 3.95em; } } @media only screen and (min-width: 960px) and (max-width: 1300px) { #masoncontainer .item { max-width: 620px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 64%; max-width: 620px; } #masoncontainer .item.tall { height: auto; width: 30.6%; max-width: 300px; } #masoncontainer .item.med { height: auto; width: 30.6%; max-width: 300px; } #masoncontainer .item.smll { height: auto; width: 30.6%; max-width: 300px; } #masoncontainer .item.wide { height: auto; width: 64%; max-width: 620px; } #haa-pager { font-size: 3.8em; } #gallery-1 .gallery-item, #gallery-2 .gallery-item { width: 33% !important; } } @media only screen and (max-width: 1220px) { .mobile-header { display: block; background: #f6f6f6; width: 100%; height: 40px; padding: 0 1em; position: fixed;top: 0; left: 0; text-align: left; border-bottom: 1px #CCC solid; z-index:999; } .mobile-header h3 { float: left; color: #444; letter-spacing: -1px; } .shifter-navigation { border-right: none; border-left: none; } .search-form { margin-top: 100px; } ul.mobile-nav { font-size: 14px; font-weight: bold; } ul.mobile-nav li a, ul.mobile-nav li a:visited { color: #FFF; line-height: 20px;} ul.mobile-nav li a:hover { color: #444; } header, nav { display: none } .footer { margin-top: 70px; } #masoncontainer .item { max-width: 492px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 66%; max-width: 492px; } #masoncontainer .item.tall { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.med { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.smll { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.wide { height: auto; width: 65%; max-width: 492px; } #gallery-1 .gallery-item, #gallery-2 .gallery-item { width: 33% !important; } #haa-pager { font-size: 3.8em; } } @media only screen and (min-width: 768px) and (max-width: 959px) { #masoncontainer .item { max-width: 492px; width: 100%; float: left; display: inline-block; margin: 0 10px 0 10px; } #masoncontainer .item.big { height: auto; width: 66%; max-width: 492px; } #masoncontainer .item.tall { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.med { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.smll { height: auto; width: 33%; max-width: 236px; } #masoncontainer .item.wide { height: auto; width: 65%; max-width: 492px; } .corp-locations p, .loans-locations p { font-size: 14px } } @media only screen and (max-width: 767px) { .wrapper { margin: 4px auto -1px} .push { height: 0; } .hdr-spacing, .main-column { padding-top: 75px; } #masoncontainer .item { width: 100%; max-width: 100%; float: left; display: inline-block; margin: 0px ; } #masoncontainer .item.big { height: auto; width: 100%; max-width: 100%; } #masoncontainer .item.tall { height: auto; width: 100%; max-width: 100%; } #masoncontainer .item.med { height: auto; width: 100%; max-width: 100%; } #masoncontainer .item.smll { height: auto; width: 100%; max-width: 100%; } #masoncontainer .item.wide { height: auto; width: 100%; max-width: 100%; } .galleryitem { margin-bottom: 10px; } .sidebar { border-left: 0;} .story-thmbs { padding: 0; } .book-thumb { display: none } .grey-fullwidth { padding: 25px } #haa-pager { font-size: 3em; text-align: center} .corp-locations p, .loans-locations p { font-size: 14px } } @media only screen and (max-width: 568px) { #haa-pager { font-size: 3em; line-height: 1 } } @media only screen and (max-width: 420px) { ul.artist-list li, ul.decade-timeline li { font-size: 13px; padding: 0 5px; margin-bottom: 5px; } ul.artist-list li:first-child, ul.decade-timeline li:first-child { padding-left: 0; } #gallery-1 .gallery-item, #gallery-2 .gallery-item { width: 30% !important; margin-right: 3%} } @media only screen and (max-width: 390px) { .hdr-page-link p { float: left } }