/* Theme Name: Printing Museum Theme URI: http://underscores.me/ Author: Spindletop Design - JH Author URI: http://spindletopdesign.com/ Description: Hi. I'm a starter theme called Printing Museum, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. Version: 2.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: Printing Museum Tags: This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Printing Museum is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Infinite scroll 12.0 Media 12.1 Captions 12.2 Galleries --------------------------------------------------------------*/ .emergency { color: #1A1A1A; font-size: 12px; text-align: center; background: #f32e4f; padding-top: 5px; padding-bottom: 5px; } @media screen and (min-width: 330px) { .emergency { color: #FFFFFF; } } @media screen and (min-width: 850px) { .emergency { font-size: 13px; text-align: left; } } @media screen and (min-width: 1040px) { .emergency { font-size: 14px; } } .emergency .container { width: 940px; } .emergency p { max-width: 475px; display: inline-block; margin: 5px 15px 4px 0px; } @media screen and (min-width: 1040px) { .emergency p { max-width: 520px; } } .emergency .btn, .emergency .btn:visited { font-size: 12px; text-decoration: none; display: inline-block; border: 1px solid #bc243d; background: #bc243d; white-space: nowrap; vertical-align: top; margin: 6px 0px 5px 0px; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } @media screen and (min-width: 330px) { .emergency .btn, .emergency .btn:visited { font-size: 13px; } } @media screen and (min-width: 450px) { .emergency .btn, .emergency .btn:visited { font-size: 14px; } } @media screen and (min-width: 850px) { .emergency .btn, .emergency .btn:visited { font-size: 15px; } } @media screen and (min-width: 1040px) { .emergency .btn, .emergency .btn:visited { font-size: 16px; } } .emergency .btn:hover, .emergency .btn:focus { background: #86192b; } .home-box.hours .hours, .museum-hours .hours { color: #f32e4f; } .home-box.hours a.btn, .home-box.hours a.btn:visited, .museum-hours a.btn, .museum-hours a.btn:visited { display: inline-block; color: #1A1A1A; background: #f32e4f; text-decoration: none; border: none; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } @media screen and (min-width: 330px) { .home-box.hours a.btn, .home-box.hours a.btn:visited, .museum-hours a.btn, .museum-hours a.btn:visited { color: #FFFFFF; } } .home-box.hours a.btn:hover, .home-box.hours a.btn:focus, .museum-hours a.btn:hover, .museum-hours a.btn:focus { background: #bc243d; border: none; } /*-------------------------------------------------------------- 1.0 Reset --------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a img { border: 0; } /* clearfix */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /* For IE 6/7 only */ .cf { *zoom: 1; } /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #1A1A1A; font-family: "Libre Franklin", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: 700; text-transform: uppercase; } p { margin-bottom: 1.25em; } b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; font-style: normal; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #8B8D90; border: 0; height: 1px; margin-bottom: 1.25em; } ul, ol { margin: 0 0 1.5em 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.25em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } .wp-pagenavi { margin: 20px 0 0 0; } .wp-pagenavi a, .wp-pagenavi span { border: none; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 17px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } button, a.btn, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #00A6E7; background: #00A6E7; color: #FFFFFF !important; font-weight: 700; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ font-size: 12px; text-transform: uppercase; font-size: 1.2rem; text-decoration: none; line-height: 1; padding: 10px 15px; box-shadow: none; display: inline-block; vertical-align: top; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ } button:hover, a.btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #8B8D90; border: 1px solid #8B8D90; color: #FFFFFF !important; } button:focus, a.btn:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, a.btn:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background: #666666; color: #FFFFFF !important; } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } /* Search Form */ .search-form { position: relative; max-width: 162px; } .search-form input[type="search"] { color: #666666; font-size: 11px; line-height: 1; padding: 2px 25px 3px 10px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 10px; border-radius: 10px; } .search-form .search-submit { border: none; background: transparent; box-shadow: none; text-shadow: none; color: #1A1A1A; display: block; position: absolute; top: 7px; right: 10px; width: 13px; height: 12px; padding: 0; margin: 0; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: -150px 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .search-form .search-submit { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .search-form .search-submit:hover, .search-form .search-submit:focus { background: none; color: black; box-shadow: none; text-shadow: none; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: -150px -50px; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .search-form .search-submit:hover, .search-form .search-submit:focus { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .search-form ::-webkit-input-placeholder { color: #666666; line-height: 1.45; } .search-form :-moz-placeholder { color: #666666; line-height: 1.45; } .search-form ::-moz-placeholder { color: #666666; line-height: 1.45; } .search-form :-ms-input-placeholder { color: #666666; line-height: 1.45; } div.wpcf7 { font-size: 15px; color: #1A1A1A; max-width: 580px; margin-top: 75px; } div.wpcf7 h3 { color: #00A6E7; margin-bottom: 25px; } div.wpcf7 strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.025em; line-height: 1.5; } div.wpcf7 .required { color: #e80000; position: relative; top: -2px; } div.wpcf7 input { color: #666; box-shadow: none; border: 1px solid #C0C0C0; max-width: 100%; padding: 3px; } div.wpcf7 input[type="submit"] { color: #FFFFFF; padding: 8px 25px; } div.wpcf7 input[type="text"] { width: 100%; } div.wpcf7 input[name="date-requested"] { width: 100%; max-width: 140px; } div.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item, div.wpcf7 .wpcf7-form-control.wpcf7-radio .wpcf7-list-item { display: block; font-size: 15px; margin-left: 0; margin-bottom: 5px; } div.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item input, div.wpcf7 .wpcf7-form-control.wpcf7-radio .wpcf7-list-item input { margin-top: 3px; margin-right: 3px; vertical-align: top; } div.wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item input { margin-top: 5px; } div.wpcf7 .left, div.wpcf7 .right { width: 100%; } @media screen and (min-width: 450px) { div.wpcf7 .left, div.wpcf7 .right { width: 45%; float: left; } } @media screen and (min-width: 450px) { div.wpcf7 .right { margin-left: 10%; } } @media screen and (min-width: 450px) { div.wpcf7 .left.small { width: 40%; } div.wpcf7 .left.small + .right { width: 55%; margin-left: 5%; } } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ a, a:visited { color: inherit; font-weight: 700; text-decoration: underline; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -ms-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } a:hover, a:focus, a:active { color: #00A6E7; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ /* Main Nav */ .main-navigation { display: none; } @media screen and (min-width: 850px) { .main-navigation { display: block; } } .lt-ie9 .main-navigation { display: block; } .main-navigation a:link { text-decoration: none; } .main-navigation > ul, .main-navigation > ul li, .main-navigation > ul ul { list-style: none; margin: 0; padding: 0; } .main-navigation > ul { position: relative; z-index: 597; width: 100%; display: table; zoom: 1; } .main-navigation > ul:before { content: ''; display: block; } .main-navigation > ul:after { content: ''; display: table; clear: both; } .main-navigation > ul > li { min-height: 1px; line-height: 1.3em; vertical-align: middle; padding: 0; margin: 0; display: table-cell; } .main-navigation > ul > li > a, .main-navigation > ul > li > a:link, .main-navigation > ul > li > a:visited { color: #1A1A1A; font-size: 19px; font-weight: 700; text-transform: uppercase; padding: 25px 0 23px 0; /* 23px 0 30px 0 */ width: 100%; display: block; text-align: center; } @media screen and (min-width: 900px) { .main-navigation > ul > li > a, .main-navigation > ul > li > a:link, .main-navigation > ul > li > a:visited { font-size: 19px; } } @media screen and (min-width: 1040px) { .main-navigation > ul > li > a, .main-navigation > ul > li > a:link, .main-navigation > ul > li > a:visited { font-size: 19px; } } .main-navigation > ul > li.current_page_item > a, .main-navigation > ul > li.current-menu-ancestor > a, .main-navigation > ul > li > a:hover, .main-navigation > ul > li:hover > a { color: #00A6E7; } /* Dropdown Menu */ .main-navigation > ul li.hover, .main-navigation > ul li:hover { z-index: 599; cursor: default; } .main-navigation > ul > li.menu-item-has-children:hover > a:after, .main-navigation > ul > li.menu-item-has-children:focus > a:after { content: ''; display: block; width: 20px; height: 12px; margin-bottom: -12px; margin-left: -10px; position: relative; left: 50%; top: 11px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 12px solid #1A1A1A; } .main-navigation > ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } .main-navigation > ul ul li { float: none; } .main-navigation > ul li:hover > ul { visibility: visible; } .main-navigation li li a { color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .main-navigation li li.current_page_item a, .main-navigation li li a:hover { color: #666666; } .main-navigation ul ul { margin: 0; padding: 0 10px; float: none; background: #1A1A1A; border-top: none; right: 0; left: 0; } .main-navigation ul > li > ul > li { margin: 0; position: relative; padding: 10px 15px; float: left; } /* Login Nav */ .login-navigation { background: #1A1A1A; color: #FFFFFF; position: absolute; top: 7px; right: 0; text-align: center; z-index: 9999; } .login-navigation:after { content: ""; display: table; clear: both; } @media screen and (min-width: 350px) { .login-navigation { top: 10px; } } @media screen and (min-width: 850px) { .login-navigation { width: auto; float: right; right: 25px; top: 0; } } .login-navigation ul { margin: 0; padding: 0 5px; list-style: none; line-height: 0; font-size: 0; } .login-navigation ul li { float: none; display: block; display: inline-block; margin: 0 3px; line-height: 1; } @media screen and (max-width: 330px) { .login-navigation ul li.become-member { display: none; } } @media screen and (min-width: 850px) { .login-navigation ul li { float: left; display: block; } } .login-navigation ul li a { color: #FFFFFF; font-size: 10px; line-height: 1; letter-spacing: 0.03em; padding: 10px 5px; font-weight: 700; text-transform: uppercase; text-decoration: none; display: block; } @media screen and (min-width: 550px) { .login-navigation ul li a { font-size: 11px; padding: 10px; } } .login-navigation ul li a:hover, .login-navigation ul li a:focus { color: #00A6E7; } .login-navigation ul li.cart { vertical-align: top; } @media screen and (max-width: 450px) { .login-navigation ul li.cart a { padding: 7px 10px 7px 10px; line-height: 16px; -webkit-transition: none 0.4s ease; -moz-transition: none 0.4s ease; -ms-transition: none 0.4s ease; -o-transition: none 0.4s ease; transition: none 0.4s ease; } .login-navigation ul li.cart a:hover, .login-navigation ul li.cart a:focus { color: #00A6E7; } .login-navigation ul li.cart a:hover span, .login-navigation ul li.cart a:focus span { background-position: -50px -150px; } .login-navigation ul li.cart span { vertical-align: top; width: 17px; height: 13px; display: inline-block; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: -50px -100px; text-indent: 100%; white-space: nowrap; overflow: hidden; } } @media only screen and (max-width: 450px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 450px) and (min-device-pixel-ratio: 2) { .login-navigation ul li.cart span { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .lt-ie9 .login-navigation { width: auto; float: right; right: 25px; top: 0; } .lt-ie9 .login-navigation ul li { float: left; display: block; } /* Utility Nav */ .secondary-navigation { background: #fff; margin: 40px 0 0 0; padding: 2px 5px; display: none; width: 100%; } @media screen and (min-width: 850px) { .secondary-navigation { display: block; } } .secondary-navigation ul { list-style: none; margin: 0; padding: 0; float: left; } .secondary-navigation ul li { font-size: 13px; display: block; float: left; } .secondary-navigation ul li a { font-weight: 400; text-decoration: none; padding: 10px; line-height: 1; letter-spacing: 0.05em; display: block; } .secondary-navigation ul li.current-menu-item a { font-weight: 700; } .secondary-navigation .search-form { float: left; margin: 3px 8px 0 15px; } .lt-ie9 .secondary-navigation { display: block; } /* Sub Nav */ .subnav.container { margin-top: 10px; margin-bottom: 35px; } .subnav.container ul { list-style: none; margin: 0; padding: 2px 5px; font-size: 0; background: #f2f2f2; text-align: center; } .subnav.container ul:after { content: ""; display: table; clear: both; } @media screen and (min-width: 850px) { .subnav.container ul { text-align: left; } } .subnav.container ul li { display: inline-block; } @media screen and (min-width: 850px) { .subnav.container ul li { float: left; display: block; } } .subnav.container ul li + li:before { content: "|"; display: block; } .subnav.container a { color: #666666; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; display: block; padding: 5px 10px; } .subnav.container a:hover, .subnav.container a:focus { color: #00A6E7; } .subnav.container li.current_page_item a { color: #1A1A1A; } .subnav.container li.current_page_item a:hover, .subnav.container li.current_page_item a:focus { color: #00A6E7; } /* Mobile Nav */ .toggleMenu { display: none; padding: 16px 15px; color: #FFFFFF; background: #1A1A1A; text-decoration: none; margin-left: 0; line-height: 1.2; vertical-align: top; font-size: 10px; } @media screen and (min-width: 350px) { .toggleMenu { font-size: 16px; } } .toggleMenu:hover, .toggleMenu:focus { color: #FFFFFF; background: #666666; } .toggleMenu:active { color: #FFFFFF; background: #8B8D90; } .toggleMenu .icon-bar { display: block; width: 14px; height: 2px; background-color: #FFFFFF; } @media screen and (min-width: 350px) { .toggleMenu .icon-bar { width: 18px; height: 3px; } } .toggleMenu .icon-bar + .icon-bar { margin-top: 3px; } @media screen and (min-width: 350px) { .toggleMenu .icon-bar + .icon-bar { margin-top: 4px; } } .toggleMenu div { float: left; } .toggleMenu .hamburger { color: #FFFFFF; text-transform: uppercase; display: block; margin-left: 5px; float: left; } .mobile-navigation { text-align: left; background: #1A1A1A; margin: 0 -15px; } @media screen and (min-width: 850px) { .mobile-navigation { display: none; } } .lt-ie9 .mobile-navigation { display: none; } .mobile-navigation .nav { text-align: left; list-style: none; *zoom: 1; background: #666666; margin: 0; } .mobile-navigation .nav:before, .mobile-navigation .nav:after { content: " "; display: table; } .mobile-navigation .nav:after { clear: both; } .mobile-navigation .nav ul { list-style: none; width: 9em; margin-left: 0; } .mobile-navigation .nav a { padding: 10px 15px; color: #fff; text-decoration: none; } .mobile-navigation .nav a:hover, .mobile-navigation .nav a:focus { color: #00A6E7; } .mobile-navigation .nav li { position: relative; } .mobile-navigation .nav > li { float: left; border-top: 1px solid #8B8D90; } .mobile-navigation .nav > li#menu-item-291 { display: none; } .mobile-navigation .nav > li > a { display: block; } .mobile-navigation .nav li ul { position: absolute; left: -9999px; } .mobile-navigation .nav > li.hover > ul { left: 0; } .mobile-navigation .nav li li.hover ul { left: 100%; top: 0; } .mobile-navigation .nav li li a { display: block; background: #8B8D90; position: relative; z-index: 100; border-top: 1px solid #666666; } .mobile-navigation .nav li li li a { background: #249578; z-index: 200; border-top: 1px solid #1d7a62; } .active { display: block; } .mobile-navigation .nav > li { float: none; } .mobile-navigation .nav > li > .parent { background-position: 95% 50%; } .mobile-navigation .nav > li > .parent { background-image: none; } .mobile-navigation .nav li .more { float: right; text-align: center; border-left: 1px solid #8B8D90; padding: 8px 15px; margin: 2px 5px 2px 0px; cursor: pointer; z-index: 200; position: relative; color: #FFFFFF; font-weight: 700; font-size: 22px; line-height: 1; height: 40px; width: 40px; } .mobile-navigation .nav ul { display: block; width: 100%; } .mobile-navigation .nav > li.hover > ul, .nav li li.hover ul { position: static; } /* Footer */ .footer-menu { float: left; } .footer-menu a { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; color: #FFFFFF; padding: 6px 5px; display: inline-block; } @media screen and (min-width: 675px) { .footer-menu a { font-size: 15px; padding: 10px 15px; } } .footer-menu a:hover, .footer-menu a:focus { color: #00A6E7; } .footer-menu ul { margin: 0; padding: 0; list-style: none; } .footer-menu ul li { display: block; display: inline-block; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { content: ""; display: table; clear: both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.25em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /* 9.1 Sidebar Hours & Text Box --------------------------------------------------------------*/ .text-box-sidebar, .museum-hours { font-size: 17px; background: #FFFFFF; margin: 0 0 15px 0; } @media screen and (min-width: 450px) { .text-box-sidebar, .museum-hours { width: 48%; margin: 1%; float: left; } } @media screen and (min-width: 750px) { .text-box-sidebar, .museum-hours { width: 30.33333333%; margin: 1.5%; } } @media screen and (min-width: 900px) { .text-box-sidebar, .museum-hours { width: 100%; margin: 0 0 15px 0; } } .text-box-sidebar .widget-title, .museum-hours .widget-title { font-size: 14px; } .text-box-sidebar .hours, .museum-hours .hours { font-weight: 700; } .text-box-sidebar .admission, .museum-hours .admission { font-size: 14px; } .text-box-sidebar .closed-message, .text-box-sidebar .discounts, .museum-hours .closed-message, .museum-hours .discounts { font-size: 14px; color: #8B8D90; padding-right: 25px; margin-bottom: 10px; } .text-box-sidebar .discounts, .museum-hours .discounts { font-size: 12px; font-style: italic; } .text-box-sidebar a, .museum-hours a { font-size: 14px; line-height: 1; } .text-box-sidebar { margin-bottom: 25px; } .widget + .museum-hours { margin-top: 10px; } .lt-ie9 .text-box-sidebar, .lt-ie9 .museum-hours { width: 100%; margin: 0; } /* 9.2 Sidebar Link --------------------------------------------------------------*/ .link-box { text-decoration: none; position: relative; display: block; } @media screen and (min-width: 450px) { .link-box { width: 48%; margin: 1%; float: left; } } @media screen and (min-width: 750px) { .link-box { width: 31.33333333%; margin: 1%; } } @media screen and (min-width: 900px) { .link-box { width: 100%; margin: 0 0 15px 0; } } .link-box .widget-title { color: #fff; font-size: 14px; text-decoration: none; padding: 8px 15px 6px 15px; margin: 0; background: #00A6E7; background: rgba(0, 171, 238, 0.8); width: 100%; position: absolute; top: 0; left: 0; } @media screen and (min-width: 450px) { .link-box .widget-title { font-size: 12px; } } @media screen and (min-width: 750px) { .link-box .widget-title { font-size: 14px; } } .link-box .hours { font-weight: 700; } .link-box .closed-message { font-size: 14px; color: #8B8D90; padding-right: 25px; } .link-box:hover .widget-title, .link-box:focus .widget-title { background: #00A6E7; } .lt-ie9 .link-box { width: 100%; margin: 0 0 15px 0; } /* 9.3 Google Map --------------------------------------------------------------*/ #gmap { height: 175px; } @media screen and (min-width: 450px) { #gmap { height: 200px; } } @media screen and (min-width: 550px) { #gmap { height: 225px; } } @media screen and (min-width: 750px) { #gmap { height: 250px; } } @media screen and (min-width: 850px) { #gmap { height: 300px; } } @media screen and (min-width: 900px) { #gmap { height: 350px; } } @media screen and (min-width: 1040px) { #gmap { height: 400px; } } #gmap img { max-width: none; } .map-wrapper { margin-bottom: 1.5em; } /* 9.4 Twitter --------------------------------------------------------------*/ .home-box.twitter { padding: 60px 10px 5px 10px; font-size: 14px; font-weight: 700; background: #FFFFFF; } @media screen and (min-width: 750px) { .home-box.twitter { font-size: 12px; padding-top: 45px; } } @media screen and (min-width: 850px) { .home-box.twitter { font-size: 13px; padding-top: 55px; } } @media screen and (min-width: 900px) { .home-box.twitter { font-size: 14px; padding-top: 60px; } } .home-box.twitter .meta { color: #8B8D90; margin-bottom: 3px; } .home-box.twitter .meta a { text-decoration: none; } .home-box.twitter p { font-size: 14px; line-height: 1.5; } @media screen and (min-width: 750px) { .home-box.twitter p { font-size: 12px; line-height: 1.25; } } @media screen and (min-width: 850px) { .home-box.twitter p { font-size: 13px; line-height: 1.35; } } @media screen and (min-width: 900px) { .home-box.twitter p { font-size: 14px; line-height: 1.4; } } @media screen and (min-width: 1040px) { .home-box.twitter p { line-height: 1.5; } } .home-box.twitter .more-link { color: #8B8D90; font-size: 13px; text-transform: uppercase; line-height: 1; font-weight: 400; letter-spacing: 0.025em; text-decoration: none; border: 1px solid #8B8D90; padding: 5px 10px 4px 10px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media screen and (min-width: 750px) { .home-box.twitter .more-link { font-size: 10px; } } @media screen and (min-width: 850px) { .home-box.twitter .more-link { font-size: 11px; } } @media screen and (min-width: 900px) { .home-box.twitter .more-link { font-size: 13px; } } .home-box.twitter .more-link:hover, .home-box.twitter .more-link:focus { color: #FFFFFF; background: #00A6E7; border-color: #00A6E7; } /* 9.5 Homepage Slider --------------------------------------------------------------*/ .slider { margin: 0 auto 15px auto; } @media screen and (min-width: 750px) { .slider { margin: 15px auto 0 auto; } } @media screen and (min-width: 850px) { .slider { margin-top: 0; } } .flexslider { float: left; margin: 0 -15px; background: #fff; position: relative; z-index: 5; min-height: 304px; position: relative; } @media screen and (min-width: 750px) { .flexslider { width: 74.5%; margin: 0 auto; } } .flexslider ul { list-style: none; margin: 0; padding: 0; } .flexslider li { width: 100%; float: left; margin-right: -100%; position: relative; display: block; } .flexslider img { display: block; width: 100%; height: auto; margin: 0 auto; margin-bottom: -85px; } @media screen and (min-width: 550px) { .flexslider img { margin-bottom: 0; } } .flexslider .caption { z-index: 10; position: relative; bottom: 0; left: 0; width: 100%; } @media screen and (min-width: 550px) { .flexslider .caption { position: absolute; bottom: 20px; left: 40px; width: 285px; } } @media screen and (min-width: 750px) { .flexslider .caption { left: 20px; } } .flexslider .caption .category { color: #fff; font-size: 11px; letter-spacing: 0.125em; font-weight: 700; text-transform: uppercase; background: #000; background: rgba(0, 0, 0, 0.8); padding: 10px 15px; display: block; width: 100%; } .flexslider .caption .textbox { color: #1A1A1A; background: #fff; padding: 15px; margin-bottom: 15px; width: 100%; } .flexslider .caption .textbox .title { font-size: 20px; line-height: 1.16; text-transform: none; margin-bottom: 5px; } @media screen and (min-width: 550px) { .flexslider .caption .textbox .title { font-size: 16px; background: rgba(255, 255, 255, 0.9); } } @media screen and (min-width: 850px) { .flexslider .caption .textbox .title { font-size: 20px; } } .flexslider .caption .textbox .subtitle { color: #8B8D90; text-transform: uppercase; font-size: 15px; letter-spacing: 0.025em; display: block; margin-bottom: 15px; } @media screen and (min-width: 550px) { .flexslider .caption .textbox .subtitle { font-size: 14px; margin-bottom: 10px; } } @media screen and (min-width: 850px) { .flexslider .caption .textbox .subtitle { font-size: 15px; margin-bottom: 15px; } } .flexslider .caption .textbox p { font-size: 14px; line-height: 1.37; margin-bottom: 10px; } @media screen and (min-width: 550px) { .flexslider .caption .textbox p { font-size: 13px; line-height: 1.3; } } @media screen and (min-width: 850px) { .flexslider .caption .textbox p { font-size: 14px; line-height: 1.37; } } .flexslider .caption .more-link { color: #fff; text-decoration: none; background: #00A6E7; background: rgba(0, 166, 232, 0.8); padding: 5px 10px; margin-left: 15px; } @media screen and (min-width: 750px) { .flexslider .caption .more-link { margin-left: 0; } } .lt-ie9 .flexslider { width: 74.5%; margin: 0 auto; } .lt-ie9 .flexslider img { margin-bottom: 0; } .lt-ie9 .flexslider .caption { position: absolute; bottom: 20px; width: 285px; left: 20px; } .lt-ie9 .flexslider .caption .textbox .title { background: rgba(255, 255, 255, 0.9); } .lt-ie9 .flexslider .caption .more-link { margin-left: 0; } .lt-ie10 .flexslider img { margin-bottom: 0px; } .lt-ie10 .flexslider li { margin-right: 0; } #slide-controls { float: left; width: 100%; margin-left: 0; list-style: none; position: relative; text-align: center; margin: 25px auto 15px auto; display: none; } @media screen and (min-width: 550px) { #slide-controls { display: block; } } @media screen and (min-width: 750px) { #slide-controls { width: 23.75%; margin: 0 0 0 1.75%; text-align: left; } } #slide-controls li { padding: 0; margin: 0 8px; display: block; display: inline-block; position: relative; z-index: 20; background: #1A1A1A; width: 15px; height: 15px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 15px; border-radius: 15px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } @media screen and (min-width: 750px) { #slide-controls li { width: auto; height: auto; margin: 0 0 3% 0; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 0px; border-radius: 0px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } #slide-controls li img { display: none; } @media screen and (min-width: 750px) { #slide-controls li img { display: block; } } #slide-controls li .caption { color: #fff; font-size: 14px; line-height: 1.25; position: absolute; top: 0; left: 0; padding: 10px 20px; z-index: 30; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; display: none; } @media screen and (min-width: 750px) { #slide-controls li .caption { display: block; } } @media screen and (min-width: 850px) { #slide-controls li .caption { font-size: 16px; line-height: 1.35; } } #slide-controls li .caption .category { color: #8B8D90; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125em; margin-bottom: 2px; } #slide-controls li .caption .title { text-transform: none; } #slide-controls li:before { content: ''; position: absolute; top: 50%; left: -13px; display: none; width: 13px; height: 24px; margin-top: -12px; border-bottom: 12px solid transparent; border-top: 12px solid transparent; border-right: 13px solid #1A1A1A; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media screen and (min-width: 750px) { #slide-controls li:before { display: block; } } #slide-controls li:hover .caption, #slide-controls li:focus .caption { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } #slide-controls li:hover img, #slide-controls li:focus img { opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); } #slide-controls li.flex-active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } #slide-controls li.flex-active .caption { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } #slide-controls li.flex-active img { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } #slide-controls li.flex-active:before { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } #slide-controls li:hover, #slide-controls a:hover { cursor: pointer; text-decoration: underline; } .lt-ie9 #slide-controls { display: block; width: 23.75%; margin: 0 0 0 1.75%; text-align: left; } .lt-ie9 #slide-controls li { width: auto; height: auto; margin: 0 0 3% 0; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 0px; border-radius: 0px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .lt-ie9 #slide-controls li img { display: block; } .lt-ie9 #slide-controls li .caption { display: none; font-size: 16px; line-height: 1.35; } .lt-ie9 #slide-controls li.flex-active .caption, .lt-ie9 #slide-controls li:hover .caption, .lt-ie9 #slide-controls li:focus .caption { display: block; } .lt-ie9 #slide-controls li:before { display: none; } .flex-direction-nav { position: absolute; z-index: 9999; width: 100%; left: 0; top: 23%; } @media screen and (min-width: 550px) { .flex-direction-nav { top: 50%; } } @media screen and (min-width: 750px) { .flex-direction-nav { display: none; } } .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next { width: 20px; height: 32px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; float: right; border-bottom: 16px solid transparent; border-top: 16px solid transparent; position: relative; top: -16px; } .flex-direction-nav .flex-next { border-left: 18px solid #FFFFFF; float: right; right: 10px; } .flex-direction-nav .flex-next:hover { border-left: 18px solid #00A6E7; } .flex-direction-nav .flex-prev { float: left; border-right: 18px solid #FFFFFF; left: 10px; } .flex-direction-nav .flex-prev:hover { border-right: 18px solid #00A6E7; } .lt-ie9 .flex-direction-nav { display: none; } /* 9.6 Exhibition Slider --------------------------------------------------------------*/ .exhibition-slider { margin-bottom: 15px; } .exhibition-slider .flexslider { background: none; } .exhibition-slider .flexslider img { margin-bottom: 0; } .exhibition-slider .flexslider .caption { position: relative; width: auto; bottom: 0; left: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin: 10px auto; padding: 0 15px; } @media screen and (min-width: 750px) { .exhibition-slider .flexslider .caption { padding: 0; } } .exhibition-slider #slide-controls { display: block; margin-top: 10px; } @media screen and (min-width: 750px) { .exhibition-slider #slide-controls { margin-top: 0; } } @media screen and (min-width: 750px) { .exhibition-slider #slide-controls li { background: none; } } .exhibition-slider #slide-controls li img { display: none; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); } @media screen and (min-width: 750px) { .exhibition-slider #slide-controls li img { display: block; } } .exhibition-slider #slide-controls li.flex-active:before { display: none; content: none; } .exhibition-slider #slide-controls li.flex-active img { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .exhibition-slider .flex-direction-nav { top: 45%; } .lt-ie9 .exhibition-slider .flexslider .caption { padding: 0; } .lt-ie9 .exhibition-slider #slide-controls { margin-top: 0; } .lt-ie9 .exhibition-slider #slide-controls li { background: none; } .lt-ie9 .exhibition-slider #slide-controls li img { display: block; } /* 9.7 Staff and BoD lists --------------------------------------------------------------*/ .staff-name, .staff-title, .staff-email, .staff-phone, .board-name, .board-title, .board-company { display: block; line-height: 1.25; } @media screen and (min-width: 750px) { .staff-name, .staff-title, .staff-email, .staff-phone, .board-name, .board-title, .board-company { display: inline; } } .board-sep, .staff-sep { display: none; } @media screen and (min-width: 750px) { .board-sep, .staff-sep { display: inline; } } .board-company { color: #8B8D90; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ .container { width: 1040px; max-width: 100%; padding: 0 15px; margin: 0 auto; } .container:after { content: ""; display: table; clear: both; } @media screen and (min-width: 1040px) { .container { padding: 0 25px; } } .lt-ie9 .container { width: 980px; padding: 0 25px; } #primary { clear: both; min-height: 1px; } @media screen and (min-width: 900px) { #primary { width: 74.5%; float: left; clear: none; margin-right: 1.75%; } } .lt-ie9 #primary { width: 74.5%; float: left; clear: none; margin-right: 1.75%; } body.page-template-page-support-php #primary, body.home #primary { width: 100%; margin-right: auto; } #secondary { border-top: 3px solid #f2f2f2; padding-top: 15px; clear: both; } @media screen and (min-width: 450px) { #secondary { padding-top: 5px; } } @media screen and (min-width: 900px) { #secondary { clear: none; border-top: none; padding-top: 0px; width: 23.75%; float: left; } } .lt-ie9 #secondary { padding-top: 5px; clear: none; border-top: none; padding-top: 0px; width: 23.75%; float: left; } /* 10.1 Header --------------------------------------------------------------*/ #masthead { position: relative; } .site-branding { background: url("img/header-background.png"); } .site-branding .site-title { max-width: 280px; margin: 30px auto; } @media screen and (min-width: 850px) { .site-branding .site-title { float: left; max-width: 350px; margin: 25px auto 30px auto; } } @media screen and (min-width: 850px) { .site-branding .container { position: relative; } } .site-branding .right-area { position: relative; float: right; width: 100%; } @media screen and (min-width: 850px) { .site-branding .right-area { width: 550px; } } .site-branding .right-area .header-message { font-size: 11px; font-weight: 400; background: #FFFFFF; padding: 15px 15px 0 15px; margin: 0 auto 15px auto; } @media screen and (min-width: 850px) { .site-branding .right-area .header-message { font-size: 13px; margin: 15px auto 15px auto; } } .lt-ie9 .site-branding .site-title { float: left; max-width: 350px; margin: 25px auto 30px auto; } .lt-ie9 .site-branding .container { position: relative; } /* 10.2 Footer --------------------------------------------------------------*/ @media screen and (min-width: 900px) { .site-footer { padding-bottom: 80px; } } .lt-ie9 .site-footer { padding-bottom: 80px; } .site-info { color: #8B8D90; font-size: 12px; letter-spacing: 0.015em; padding: 15px 0; margin-top: 10px; border-top: 1px solid #8B8D90; text-align: center; } @media screen and (min-width: 900px) { .site-info { letter-spacing: 0em; margin-top: 25px; padding: 10px 0; } } @media screen and (min-width: 1040px) { .site-info { font-size: 13px; letter-spacing: 0.015em; } } .site-info .copy + .sep { display: block; } @media screen and (min-width: 750px) { .site-info .copy + .sep { display: inline; } } .site-info address { display: inline; } .site-info .tel + .sep { display: block; } @media screen and (min-width: 900px) { .site-info .tel + .sep { display: inline; } } .site-info .sep { font-size: 0px; height: 1px; padding-left: 3px; padding-right: 3px; position: relative; display: block; overflow: hidden; } @media screen and (min-width: 450px) { .site-info .sep { display: inline; font-size: 8px; top: -2px; } } .site-info a { font-weight: 400; color: #8B8D90; text-decoration: none; } .site-info a:hover, .site-info a:focus { color: #00A6E7; text-decoration: underline; } .lt-ie9 .site-info { font-size: 14px; margin-top: 25px; padding: 10px 0; } .lt-ie9 .site-info .copy + .sep { display: inline; } .lt-ie9 .site-info .tel + .sep { display: inline; } .lt-ie9 .site-info .sep { display: inline; font-size: 8px; top: -2px; } .footer-bar { background: #1A1A1A; color: #FFFFFF; padding: 20px 0; bottom: 0; left: 0; width: 100%; z-index: 9999; position: relative; } .footer-bar:after { content: ""; display: table; clear: both; } @media screen and (min-width: 900px) { .footer-bar { position: fixed; } } @media (orientation: portrait) { .footer-bar { position: relative; } } .footer-bar .container { width: 260px; } @media screen and (min-width: 675px) { .footer-bar .container { width: 1040px; } } .footer-bar .logo { width: 110px; float: left; } @media screen and (min-width: 675px) { .footer-bar .logo { width: 225px; margin: 4px auto; } } .footer-bar .logo img { display: none; } @media screen and (min-width: 675px) { .footer-bar .logo img { display: block; } } .footer-bar .logo img.white { display: block; } @media screen and (min-width: 675px) { .footer-bar .logo img.white { display: none; } } .footer-bar .footer-menu { float: none; margin-top: 5px; text-align: left; padding-left: 125px; } @media screen and (min-width: 675px) { .footer-bar .footer-menu { padding-top: 0; padding-left: 0; margin-top: 0; float: right; } } .footer-bar .footer-menu li.sep { display: block; height: 1px; width: 100%; margin: 5px auto; } @media screen and (min-width: 675px) { .footer-bar .footer-menu li.sep { display: none; } } .footer-bar .footer-menu li.subscribe { display: block; margin-left: 2px; } @media screen and (min-width: 675px) { .footer-bar .footer-menu li.subscribe { display: inline-block; margin-left: 0; } } .footer-bar .footer-menu li.facebook { margin-left: 0px; } @media screen and (min-width: 675px) { .footer-bar .footer-menu li.facebook { margin-left: 0; } } .footer-bar .footer-menu li.facebook a, .footer-bar .footer-menu li.twitter a, .footer-bar .footer-menu li.instagram a { vertical-align: top; display: block; display: inline-block; margin: 0 5px; padding: 0; } .footer-bar .footer-menu li.facebook a { width: 16px; height: 24px; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: 3px 0; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .footer-bar .footer-menu li.facebook a { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .footer-bar .footer-menu li.facebook a:hover, .footer-bar .footer-menu li.facebook a:focus { background-position: 3px -50px; } .footer-bar .footer-menu li.twitter a { width: 24px; height: 24px; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: -50px 0; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .footer-bar .footer-menu li.twitter a { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .footer-bar .footer-menu li.twitter a:hover, .footer-bar .footer-menu li.twitter a:focus { background-position: -50px -50px; } .footer-bar .footer-menu li.instagram a { width: 20px; height: 24px; background-image: url("img/printing-museum-sprite.png"); background-repeat: no-repeat; background-position: -99px 1px; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .footer-bar .footer-menu li.instagram a { background-image: url("img/printing-museum-sprite2x.png"); background-size: 200px 200px; } } .footer-bar .footer-menu li.instagram a:hover, .footer-bar .footer-menu li.instagram a:focus { background-position: -99px -49px; } .lt-ie9 .footer-bar { position: fixed; } .lt-ie9 .footer-bar .logo { float: left; margin: 0 auto; } .lt-ie9 .footer-bar .footer-menu { float: right; text-align: left; } .lt-ie9 .footer-bar .footer-menu li.sep { display: none; } /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 15px; } @media screen and (min-width: 900px) { .hentry { margin: 0 0 1.5em; } } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-links { clear: both; margin: 0 0 1.5em; } .home-box { width: 100%; display: block; float: left; margin: 10px 0; position: relative; overflow: hidden; background: #1A1A1A; } .home-box:after { content: ""; display: table; clear: both; } @media screen and (min-width: 450px) { .home-box { width: 48%; margin: 10px 1%; } } @media screen and (min-width: 750px) { .home-box { width: 32%; margin: 10px 1%; } } @media screen and (min-width: 750px) { .home-box.box-1, .home-box.box-4, .home-box.box-7 { margin-left: 0; } } @media screen and (min-width: 750px) { .home-box.box-3, .home-box.box-6, .home-box.box-9 { margin-right: 0; } } .home-box a:hover .title, .home-box a:focus .title { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); background: #00A6E7; } .home-box .title { color: #fff; font-size: 20px; line-height: 1.15; letter-spacing: 0.065em; text-transform: uppercase; padding: 12px 20px 10px 20px; background: #000; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; opacity: 0.85; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } @media screen and (min-width: 450px) { .home-box .title { font-size: 14px; } } @media screen and (min-width: 750px) { .home-box .title { font-size: 16px; letter-spacing: 0.05em; } } @media screen and (min-width: 900px) { .home-box .title { font-size: 18px; letter-spacing: 0.065em; } } @media screen and (min-width: 1040px) { .home-box .title { font-size: 20px; } } .home-box img { z-index: 1; position: relative; vertical-align: top; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .home-box.hours { color: #00A6E7; padding: 65px 20px 0px 20px; background: #FFFFFF; } @media screen and (min-width: 450px) { .home-box.hours { padding: 45px 15px 0px 15px; } } @media screen and (min-width: 550px) { .home-box.hours { padding: 60px 20px 0px 20px; } } @media screen and (min-width: 900px) { .home-box.hours { padding-top: 65px; } } .home-box.hours .hours { font-size: 22px; line-height: 1.5; text-transform: none; letter-spacing: 0.02em; margin-bottom: 7px; } @media screen and (min-width: 450px) { .home-box.hours .hours { font-size: 16px; line-height: 1.15; } } @media screen and (min-width: 550px) { .home-box.hours .hours { font-size: 18px; } } @media screen and (min-width: 900px) { .home-box.hours .hours { font-size: 20px; } } @media screen and (min-width: 1040px) { .home-box.hours .hours { font-size: 22px; line-height: 1.5; } } .home-box.hours hr { height: 2px; background: #d3d4d5; width: 90%; float: left; margin-top: 8px; margin-bottom: 15px; } @media screen and (min-width: 450px) { .home-box.hours hr { height: 1px; margin-top: 5px; margin-bottom: 8px; } } @media screen and (min-width: 850px) { .home-box.hours hr { height: 2px; margin-top: 8px; margin-bottom: 15px; } } .home-box.hours p { font-size: 19px; line-height: 1; text-transform: uppercase; letter-spacing: 0.025em; font-weight: 400; margin-bottom: 4px; } @media screen and (min-width: 450px) { .home-box.hours p { font-size: 12px; } } @media screen and (min-width: 550px) { .home-box.hours p { font-size: 14px; } } @media screen and (min-width: 900px) { .home-box.hours p { font-size: 18px; } } @media screen and (min-width: 1040px) { .home-box.hours p { font-size: 19px; } } .home-box.hours .discount { line-height: 1.1; color: #666666; font-size: 12px; margin-bottom: 0; } @media screen and (min-width: 450px) { .home-box.hours .discount { font-size: 10px; } } a.home-box:hover .title, a.home-box:focus .title { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); background: #00A6E7; } a.home-box:hover img, a.home-box:focus img { -webkit-transform: scale(1.15); /* Safari and Chrome */ -moz-transform: scale(1.15); /* Firefox */ -ms-transform: scale(1.15); /* IE 9 */ -o-transform: scale(1.15); /* Opera */ transform: scale(1.15); opacity: 0.95; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); } .lt-ie9 .home-box { width: 32%; margin: 10px 1%; } .lt-ie9 .home-box.box-1, .lt-ie9 .home-box.box-4, .lt-ie9 .home-box.box-7 { margin-left: 0; } .lt-ie9 .home-box.box-3, .lt-ie9 .home-box.box-6, .lt-ie9 .home-box.box-9 { margin-right: 0; } .lt-ie9 .home-box.hours hr { height: 2px; margin-top: 8px; margin-bottom: 15px; } .lt-ie9 .home-box.hours .discount { font-size: 10px; } .page-header { margin: 40px auto 30px auto; } .page-header .entry-title { color: #00A6E7; font-size: 20px; line-height: 1.15; text-transform: none; padding: 10px 0 10px 0; border-bottom: 1px solid #00A6E7; border-top: 1px solid #00A6E7; } .woocommerce ul.products.membership li.product, .woocommerce-page ul.products.membership li.product { width: 100%; min-height: 175px; margin: 0 auto 50px auto; position: relative; } .woocommerce ul.products.membership li.product:after, .woocommerce-page ul.products.membership li.product:after { content: ""; display: table; clear: both; } @media screen and (min-width: 550px) { .woocommerce ul.products.membership li.product img, .woocommerce-page ul.products.membership li.product img { position: absolute; top: 3px; left: 0; } } .woocommerce ul.products.membership li.product .text, .woocommerce-page ul.products.membership li.product .text { font-size: 15px; } @media screen and (min-width: 550px) { .woocommerce ul.products.membership li.product .text, .woocommerce-page ul.products.membership li.product .text { margin-left: 255px; } } .woocommerce ul.products.membership li.product .text h3, .woocommerce ul.products.membership li.product .text h5, .woocommerce-page ul.products.membership li.product .text h3, .woocommerce-page ul.products.membership li.product .text h5 { padding: 0; margin: 0 auto 3px auto; font-size: 15px; line-height: 1.15; } .woocommerce ul.products.membership li.product .text h5, .woocommerce-page ul.products.membership li.product .text h5 { text-transform: none; margin-bottom: 20px; } .woocommerce ul.products.membership li.product .text p, .woocommerce-page ul.products.membership li.product .text p { margin-bottom: 0.25em; } .corporatemembership { border-top: 1px solid #e0e0e0; padding: 40px 0 15px 0; } .nonprofitmembershio { border-top: 1px solid #e0e0e0; padding: 40px 0 15px 0; } .woocommerce ul.products.contribute li.product, .woocommerce-page ul.products.contribute li.product { width: 100%; min-height: 175px; margin: 0 auto 50px auto; position: relative; } .woocommerce ul.products.contribute li.product:after, .woocommerce-page ul.products.contribute li.product:after { content: ""; display: table; clear: both; } .woocommerce ul.products.contribute li.product img, .woocommerce-page ul.products.contribute li.product img { margin-bottom: 25px; } @media screen and (min-width: 550px) { .woocommerce ul.products.contribute li.product img, .woocommerce-page ul.products.contribute li.product img { position: absolute; top: 3px; left: 0; } } .woocommerce ul.products.contribute li.product .text, .woocommerce-page ul.products.contribute li.product .text { font-size: 15px; } @media screen and (min-width: 550px) { .woocommerce ul.products.contribute li.product .text, .woocommerce-page ul.products.contribute li.product .text { margin-left: 255px; } } .woocommerce ul.products.contribute li.product .text h3, .woocommerce ul.products.contribute li.product .text h5, .woocommerce-page ul.products.contribute li.product .text h3, .woocommerce-page ul.products.contribute li.product .text h5 { padding: 0; margin: 0 auto 3px auto; font-size: 15px; line-height: 1.15; } .woocommerce ul.products.contribute li.product .text h5, .woocommerce-page ul.products.contribute li.product .text h5 { text-transform: none; margin-bottom: 20px; } .woocommerce ul.products.contribute li.product .text p, .woocommerce-page ul.products.contribute li.product .text p { margin-bottom: 0.75em; } .page-id-80 .content-area blockquote { font-style: normal; font-weight: 300; color: #00A6E7; font-size: 25px; line-height: 1.12; margin: 0; } body.single-exhibition #primary { width: 100%; margin-right: 0; float: none; } @media screen and (min-width: 900px) { body.single-exhibition #primary .entry-content { width: 74.5%; float: left; margin-right: 1.75%; } } body.single-exhibition #primary .entry-title { font-size: 22px; text-transform: none; } body.single-exhibition #primary .dates { font-size: 17px; font-weight: 700; color: #8B8D90; } .lt-ie9 body.single-exhibition #primary .entry-content { width: 74.5%; float: left; margin-right: 1.75%; } .exhibition-sort { margin: 30px 0 35px 0; padding: 0; list-style: none; } .exhibition-sort label { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 3px; } .exhibition-sort select { width: 100%; } .exhibition-sort li { float: left; } .exhibition-sort li.byname { width: 65%; margin-right: 3%; } .exhibition-sort li.bydate { width: 32%; } .exhibition.multi { margin-bottom: 15px; } @media screen and (min-width: 550px) { .exhibition.multi { width: 49%; float: left; margin-bottom: 2%; } } @media screen and (min-width: 550px) { .exhibition.multi.even { margin-left: 2%; } } .exhibition.multi a { text-decoration: none; display: block; } .exhibition.multi a:hover, .exhibition.multi a:focus { color: #1A1A1A; } .exhibition.multi a:hover .entry-title, .exhibition.multi a:focus .entry-title { color: #1A1A1A; } .exhibition.multi img { margin-bottom: -45px; } @media screen and (min-width: 550px) { .exhibition.multi img { margin-bottom: -35px; } } .exhibition.multi .exhibition-header { background: #00A6E7; padding: 15px 25px 10px 25px; position: relative; bottom: 0; left: 0; width: 100%; z-index: 100; min-height: 125px; } @media screen and (min-width: 550px) { .exhibition.multi .exhibition-header { padding: 15px 15px 10px 15px; } } @media screen and (min-width: 750px) { .exhibition.multi .exhibition-header { padding: 15px 25px 10px 25px; } } .exhibition.multi .exhibition-header.no-image { bottom: 0; } .exhibition.multi .exhibition-header .entry-title { color: #FFFFFF; font-size: 16px; line-height: 1.35em; margin-bottom: 3px; text-transform: uppercase; text-decoration: none; } @media screen and (min-width: 550px) { .exhibition.multi .exhibition-header .entry-title { font-size: 14px; } } @media screen and (min-width: 750px) { .exhibition.multi .exhibition-header .entry-title { font-size: 16px; } } @media screen and (min-width: 900px) { .exhibition.multi .exhibition-header .entry-title { font-size: 15px; } } @media screen and (min-width: 1040px) { .exhibition.multi .exhibition-header .entry-title { font-size: 16px; } } .exhibition.multi .exhibition-header .dates { color: #1A1A1A; font-size: 14px; text-decoration: none; margin-bottom: 0; } @media screen and (min-width: 550px) { .exhibition.multi .exhibition-header .dates { font-size: 12px; } } @media screen and (min-width: 750px) { .exhibition.multi .exhibition-header .dates { font-size: 14px; } } @media screen and (min-width: 900px) { .exhibition.multi .exhibition-header .dates { font-size: 13px; } } @media screen and (min-width: 1040px) { .exhibition.multi .exhibition-header .dates { font-size: 14px; } } .exhibition.list { margin: 0; padding: 0; list-style: none; } .exhibition.list li { margin-bottom: 25px; } .exhibition.list a { text-decoration: none; display: block; } .exhibition.list a:after { content: ""; display: table; clear: both; } .exhibition.list a .entry-title { clear: none; text-transform: none; line-height: 1; margin-bottom: 5px; } .exhibition.list a .dates { font-size: 14px; text-transform: none; color: #8B8D90; } .exhibition.list a:hover img, .exhibition.list a:focus img { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); } .exhibition.list img { margin-bottom: 15px; } @media screen and (min-width: 450px) { .exhibition.list img { width: 150px; float: left; margin-right: 25px; margin-bottom: 0; } } .exhibition.support .exhibition-header { min-height: 95px; } .lt-ie9 .exhibition.multi { width: 49%; float: left; margin-bottom: 2%; } .lt-ie9 .exhibition.multi.even { margin-left: 2%; } .lt-ie9 .exhibition.multi img { margin-bottom: -35px; } .lt-ie9 .exhibition.list img { width: 150px; float: left; margin-right: 25px; margin-bottom: 0; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button, .woocommerce .quantity .plus, .woocommerce .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce #content .quantity .minus, .woocommerce-page .quantity .plus, .woocommerce-page .quantity .minus, .woocommerce-page #content .quantity .plus, .woocommerce-page #content .quantity .minus { color: #666666; text-shadow: none; border: 1px solid #d2d2d2; background: #e4e4e4; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 0; border-radius: 0; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } .woocommerce a.button:hover, .woocommerce a.button:focus, .woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, .woocommerce #content input.button:hover, .woocommerce #content input.button:focus, .woocommerce-page a.button:hover, .woocommerce-page a.button:focus, .woocommerce-page button.button:hover, .woocommerce-page button.button:focus, .woocommerce-page input.button:hover, .woocommerce-page input.button:focus, .woocommerce-page #respond input#submit:hover, .woocommerce-page #respond input#submit:focus, .woocommerce-page #content input.button:hover, .woocommerce-page #content input.button:focus, .woocommerce .quantity .plus:hover, .woocommerce .quantity .plus:focus, .woocommerce .quantity .minus:hover, .woocommerce .quantity .minus:focus, .woocommerce #content .quantity .plus:hover, .woocommerce #content .quantity .plus:focus, .woocommerce #content .quantity .minus:hover, .woocommerce #content .quantity .minus:focus, .woocommerce-page .quantity .plus:hover, .woocommerce-page .quantity .plus:focus, .woocommerce-page .quantity .minus:hover, .woocommerce-page .quantity .minus:focus, .woocommerce-page #content .quantity .plus:hover, .woocommerce-page #content .quantity .plus:focus, .woocommerce-page #content .quantity .minus:hover, .woocommerce-page #content .quantity .minus:focus { text-shadow: none; background: #d2d2d2; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button { padding: 8px 10px; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt { background: #00a6e7; background: -webkit-gradient(linear, left top, left bottom, from(#00A6E7), to(#00A6E7)); background: -webkit-linear-gradient(#00A6E7, #00A6E7); background: -moz-linear-gradient(center top, #00A6E7 0%, #00A6E7 100%); background: #00A6E7; border: 1px solid #048fc6; padding: 8px 10px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 0; border-radius: 0; color: #FFFFFF; text-shadow: none; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -ms-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } .woocommerce a.button.alt:hover, .woocommerce a.button.alt:focus, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:focus, .woocommerce input.button.alt:hover, .woocommerce input.button.alt:focus, .woocommerce #respond input#submit.alt:hover, .woocommerce #respond input#submit.alt:focus, .woocommerce #content input.button.alt:hover, .woocommerce #content input.button.alt:focus, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button.alt:focus, .woocommerce-page button.button.alt:hover, .woocommerce-page button.button.alt:focus, .woocommerce-page input.button.alt:hover, .woocommerce-page input.button.alt:focus, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page #respond input#submit.alt:focus, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #content input.button.alt:focus { background: #048fc6; color: #FFFFFF; text-shadow: none; } .woocommerce .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce-page #content .quantity input.qty { background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 0; border-radius: 0; } .woocommerce div.product form.cart div.quantity, .woocommerce #content div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity, .woocommerce-page #content div.product form.cart div.quantity { margin-right: 15px; } .zoom { opacity: 0.55; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; filter: alpha(opacity=55); -webkit-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease; -ms-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } .zoom:hover, .zoom:focus { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); } .zoom.active { opacity: 9.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=950)"; filter: alpha(opacity=950); } .woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a { margin-bottom: 3.8%; } .woocommerce-checkout #payment div.payment_box:after { top: -1px !important; } /* START Make the cart table responsive */ /* http://css-tricks.com/responsive-data-tables/ */ @media screen and (max-width: 550px) { /* Force table to not be like tables anymore */ .woocommerce-page table.shop_table, .woocommerce-page table.shop_table thead, .woocommerce-page table.shop_table tbody, .woocommerce-page table.shop_table tfoot, .woocommerce-page table.shop_table th, .woocommerce-page table.shop_table td, .woocommerce-page table.shop_table tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .woocommerce-page table.shop_table thead tr { position: absolute; top: -9999px; left: -9999px; } .woocommerce table.shop_table tfoot tr, .woocommerce-page table.shop_table tr { position: relative; } .woocommerce-page table.shop_table tr.cart_item { margin-bottom: 10px; border: 2px solid #e2dcdc; } .woocommerce-page table.shop_table tr.cart_item td + td { border-top: 1px solid #dad6d6; } .woocommerce-page table.shop_table td { /* Behave like a "row" */ border: none; position: relative; padding-left: 30% !important; } .woocommerce-page table.shop_table { border: none; } .woocommerce-page table.shop_table td.product-spacer { border-color: #FFF; height: 10px; } .woocommerce-page table.shop_table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0; left: 0; height: 100%; width: 28%; padding: 8px 5px 0 10px; white-space: nowrap; color: #666666; background: #f2f2f2; font-size: 14px; font-weight: 700; } /* Label the data */ .woocommerce-page table.shop_table td.product-remove:before { content: "Remove:"; } .woocommerce-page table.shop_table td.product-name:before { content: "Product:"; } .woocommerce-page table.shop_table td.product-price:before { content: "Price:"; } .woocommerce-page table.shop_table td.product-quantity:before { content: "Quantity:"; } .woocommerce-page table.shop_table td.product-subtotal:before { content: "Subtotal:"; } .woocommerce-page table.shop_table td.product-total:before { content: "Total:"; } .woocommerce .quantity, .woocommerce #content .quantity, .woocommerce-page .quantity, .woocommerce-page #content .quantity { margin: 0; } .woocommerce-page table.cart td.actions, .woocommerce-page #content table.cart td.actions { text-align: left; border: 0; padding-left: 6px !important; } .woocommerce-page table.cart td.actions .button.alt, .woocommerce-page #content table.cart td.actions .button.alt { float: left; margin-top: 10px; } .woocommerce-page table.cart td.actions div, .woocommerce-page #content table.cart td.actions div, .woocommerce-page table.cart td.actions input, .woocommerce-page #content table.cart td.actions input { margin-bottom: 10px; } /* TOTALS */ .woocommerce-page .cart-collaterals .cart_totals { float: left; width: 100%; text-align: left; } .woocommerce-page .cart-collaterals .cart_totals th, .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { border: 0 !important; } .woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce table.shop_table tfoot { margin-bottom: 10px; margin-top: 20px; border: 2px solid #8B8D90; } .woocommerce-cart .cart-collaterals .cart_totals table tr + tr, .woocommerce table.shop_table tfoot tr + tr { border-top: 1px solid #8B8D90; } .woocommerce-cart .cart-collaterals .cart_totals table tr { position: relative; display: block; } .woocommerce-cart .cart-collaterals .cart_totals table th, .woocommerce table.shop_table tfoot th { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0; left: 0; height: 100%; width: 28%; padding: 8px 5px 0 10px; white-space: nowrap; color: #1A1A1A; background: #e2dcdc; font-size: 14px; font-weight: 700; display: block; } .woocommerce-cart .cart-collaterals .cart_totals table td, .woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td, .woocommerce-page .cart-collaterals .cart_totals table tr.shipping td, .woocommerce-page .cart-collaterals .cart_totals table tr.total td { border: none; position: relative; padding-left: 30% !important; padding-right: 10px; text-align: right; display: block; } .woocommerce-page table.shop_table tr.cart-subtotal td, .woocommerce-page table.shop_table tr.shipping td, .woocommerce-page table.shop_table tr.total td, .woocommerce-page table.shop_table.order_details tfoot th, .woocommerce-page table.shop_table.order_details tfoot td { border: none; position: relative; padding-left: 30% !important; } .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th { border: none; } .woocommerce-page table.shop_table tbody { padding-top: 10px; } .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2, .woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { float: none; width: 100%; } .woocommerce .order_details ul, .woocommerce-page .order_details ul, .woocommerce .order_details, .woocommerce-page .order_details { padding: 0; } .woocommerce .order_details li, .woocommerce-page .order_details li { clear: left; margin-bottom: 10px; border: 0; } /* make buttons full width, text wide anyway, improves effectiveness */ #content table.cart td.actions .button, .woocommerce #content table.cart td.actions .input-text, .woocommerce #content table.cart td.actions input, .woocommerce table.cart td.actions .button, .woocommerce table.cart td.actions .input-text, .woocommerce table.cart td.actions input, .woocommerce-page #content table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions input, .woocommerce-page table.cart td.actions .button, .woocommerce-page table.cart td.actions .input-text, .woocommerce-page table.cart td.actions input, .woocommerce-page table.shop_table tr.cart-subtotal, .woocommerce-page table.shop_table tr.order-total, .woocommerce-page table.shop_table tfoot { width: 100%; } /* keep coupon at 50% */ #content table.cart td.actions .coupon .button, .woocommerce #content table.cart td.actions .coupon .input-text, .woocommerce #content table.cart td.actions .coupon input, .woocommerce table.cart td.actions .coupon .button, .woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon input, .woocommerce-page #content table.cart td.actions .coupon .button, .woocommerce-page #content table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon input, .woocommerce-page table.cart td.actions .coupon .button, .woocommerce-page table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon input { width: 48%; } /* clean up how coupon inputs display */ #content table.cart td.actions .coupon, .woocommerce table.cart td.actions .coupon, .woocommerce-page #content table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { margin-top: 1.5em; } #content table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon .input-text { margin-bottom: 1em; } /* remove cross sells, they interfere with flow between cart and cart totals + shipping calculator */ .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { display: none; } } @media screen and (max-width: 450px) { .woocommerce-checkout #payment ul.payment_methods li img { margin-top: 0; } .woocommerce-checkout #payment .payment_method_paypal .about_paypal { float: none; display: block; line-height: 35px; } #content table.cart td.actions .coupon .button, .woocommerce #content table.cart td.actions .coupon .input-text, .woocommerce #content table.cart td.actions .coupon input, .woocommerce table.cart td.actions .coupon .button, .woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .coupon input, .woocommerce-page #content table.cart td.actions .coupon .button, .woocommerce-page #content table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon input, .woocommerce-page table.cart td.actions .coupon .button, .woocommerce-page table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon input { width: 100%; } } .tribe-events-list .vevent.hentry { padding: 0; border: none; position: relative; margin-bottom: 22px; } @media screen and (min-width: 650px) { .tribe-events-list .vevent.hentry { width: 49%; float: left; } .tribe-events-list .vevent.hentry.even { margin-left: 2%; } } .tribe-events-list .vevent.hentry .tribe-events-event-meta { margin-bottom: 0; } .tribe-events-list .vevent.hentry .tribe-events-event-meta.vcard { background: none; padding: 0; border: none; } .tribe-events-list .tribe-events-event-image { float: none; width: 100%; margin: 0 auto; } .tribe-events-list .tribe-events-event-image + .event-header { position: absolute; } .tribe-events-list .event-header { background: #ffffff; padding: 25px 15px 20px 15px; position: relative; bottom: 0; left: 0; width: 100%; z-index: 100; min-height: 125px; } @media screen and (min-width: 750px) { .tribe-events-list .event-header { padding: 25px 25px 20px 25px; } } .tribe-events-list .event-header .entry-title { color: #00A6E7; font-size: 17px; line-height: 1.15em; margin-bottom: 3px; text-transform: uppercase; text-decoration: none; } @media screen and (min-width: 750px) { .tribe-events-list .event-header .entry-title { font-size: 20px; } } .tribe-events-list .event-header .time-details { color: #1A1A1A; font-size: 14px; text-decoration: none; margin: 0; padding: 0; } @media screen and (min-width: 750px) { .tribe-events-list .event-header .time-details { font-size: 17px; } } .lt-ie9 .tribe-events-list .vevent.hentry { width: 49%; float: left; } .lt-ie9 .tribe-events-list .vevent.hentry.even { margin-left: 2%; } .lt-ie9 .tribe-events-list .event-header { padding: 25px 25px 20px 25px; } .lt-ie9 .tribe-events-list .event-header .entry-title { font-size: 20px; } .lt-ie9 .tribe-events-list .event-header .time-details { font-size: 17px; } #tribe-events-pg-template { padding: 0 !important; } .single-tribe_events .tribe-events-event-image { max-width: 485px; text-align: left; } .single-tribe_events .tribe-events-venue-map img { max-width: none; } #tribe-bar-views .tribe-bar-views-list { z-index: 9999; } .multi-class { font-size: 15px; padding: 35px 0; border-bottom: 2px solid #f2f2f2; } .multi-class:after { content: ""; display: table; clear: both; } .multi-class .tribe-events-event-image { margin-bottom: 15px; } @media screen and (min-width: 550px) { .multi-class .tribe-events-event-image { float: left; max-width: 240px; } .multi-class .tribe-events-event-image + .text { margin-left: 265px; } } .multi-class .text { margin-bottom: 0px; min-height: 0px; } .multi-class .class-title { margin-bottom: 15px; display: block; float: left; clear: none; } .multi-class a { text-decoration: none; display: block; margin-right: 115px; } .multi-class .btn { color: #FFFFFF; text-decoration: none; padding: 6px 15px; max-width: 105px; float: right; margin-right: 0; margin-bottom: 15px; clear: none; } .multi-class p { font-weight: 400; float: left; } .multi-class .instructor { clear: both; } .multi-class .instructor p { font-weight: 700; margin-bottom: 0; } .multi-class .instructor span { font-weight: 400; } .multi-class .instructor a { font-weight: 400; text-decoration: underline; display: inline; } .multi-class .post-meta { background: #f2f2f2; padding: 10px 15px; font-size: 13px; margin-top: 0px;} .multi-class .post-meta:after { content: ""; display: table; clear: both; } @media screen and (min-width: 750px) { .multi-class .post-meta { padding: 14px 5px 16px 5px; font-size: 15px; } } .multi-class .post-meta ul { padding: 0; margin: 0; list-style: none; line-height: 1; font-weight: 700; } .multi-class .post-meta ul li { margin: 8px 0; } @media screen and (min-width: 750px) { .multi-class .post-meta ul li { float: left; padding: 0 10px; border-right: 2px solid black; } } .multi-class .post-meta ul li:last-of-type { border-right: none; } .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); z-index: 8888; display: none; top: 0; left: 0; } .single-tribe_events .subnav .menu-item-38, .single-tribe_events .subnav .menu-item-102, .single-tribe_events .subnav .menu-item-428, .single-tribe_events .subnav .menu-item-160 + li { display: none; } @media screen and (min-width: 750px) { .tribe-events-event-meta .tribe-events-meta-group.tribe-events-meta-group-organizer { width: 66.6666666%; } } .tribe-events-event-meta .tribe-events-meta-group.tribe-events-meta-group-organizer dd { font-weight: 700; } .single-tribe_events .tribe-events-venue-map > div { height: 175px !important; } @media screen and (min-width: 450px) { .single-tribe_events .tribe-events-venue-map > div { height: 200px !important; } } @media screen and (min-width: 550px) { .single-tribe_events .tribe-events-venue-map > div { height: 225px !important; } } @media screen and (min-width: 750px) { .single-tribe_events .tribe-events-venue-map > div { height: 250px !important; } } @media screen and (min-width: 850px) { .single-tribe_events .tribe-events-venue-map > div { height: 275px !important; } } @media screen and (min-width: 900px) { .single-tribe_events .tribe-events-venue-map > div { height: 300px !important; } } @media screen and (min-width: 1040px) { .single-tribe_events .tribe-events-venue-map > div { height: 350px !important; } } .reveal-modal { visibility: hidden; top: 0; left: 0; margin: 30px 25px; background: #fff; position: absolute; z-index: 9999; padding: 30px; border: 5px solid #00A6E7; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } @media screen and (min-width: 750px) { .reveal-modal { top: 100px; left: 50%; margin: 0; margin-left: -300px; width: 550px; } } .reveal-modal img { margin-bottom: 15px; } .reveal-modal h5 { font-size: 14px; line-height: 1.05; color: #1A1A1A; text-transform: none; margin-bottom: 5px; } .reveal-modal h4 { font-size: 23px; line-height: 1.05; color: #00A6E7; text-transform: none; margin-bottom: 5px; } .reveal-modal p { font-size: 15px; font-weight: 400 !important; margin-bottom: 0 !important; } .lt-ie9 .reveal-modal { top: 100px; left: 50%; margin: 0; margin-left: -300px; width: 550px; } .reveal-modal.small { width: 200px; margin-left: -140px; } .reveal-modal.medium { width: 400px; margin-left: -240px; } .reveal-modal.large { width: 600px; margin-left: -340px; } .reveal-modal.xlarge { width: 800px; margin-left: -440px; } .reveal-modal .close-reveal-modal { font-size: 30px; line-height: .5; position: absolute; top: 10px; right: 8px; text-decoration: none !important; color: #BABABA; font-weight: 700 !important; font-weight: bold; cursor: pointer; margin-right: 0; } .instructors .instructor { padding-bottom: 20px; } .instructors .instructor p { margin-bottom: 0; } .instructors .instructor P + p { margin-top: 15px; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- 11.0 Infinite scroll --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- 12.1 Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- 12.2 Galleries --------------------------------------------------------------*/