iBet uBet web content aggregator. Adding the entire web to your favor.
iBet uBet web content aggregator. Adding the entire web to your favor.



Link to original content: http://www.torontopubliclibrary.ca/css/new-ui-design.css
body, * { text-rendering: optimizeLegibility; } input[type="text"], input[type="tel"], input[type="search"], input[type="password"], input[type="textbox"], input[type="button"], input[type="email"], textarea.field { border: 1px solid #666564; font-size: 16px; } [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus { border: 1px solid rgb(102, 160, 221); box-shadow: 0 0 5px rgb(134, 192, 253); outline-width: 5px; outline-offset: -2px; outline-style: auto; outline-color: -webkit-focus-ring-color; } .row { max-width: 61rem; } .inline-list { margin: 0 auto 1.0625rem auto; margin-left: -1.375rem; margin-right: 0; padding: 0; list-style: none; overflow: hidden; display: inline } .inline-list > li { list-style: none; float: left; margin-left: 1.375rem; display: block; } .inline-list > li > * { display: block; } .branch-message-outer { background-color: #FFF9E3; border-top: 1px solid #FFC51F; max-width: 100%; width: 100vw; /*! left: calc(-50vw + 113%); */ position: relative; margin-bottom: 20px; padding: 0.25rem 1rem; } /*********** Base Treatments ****************/ /* Note: The selector below is a "begins with" selector. It'll target only elements that have class names that begin with 'grid_12'. Using this as a means of targeting .main column content and simultaneously avoiding inadvertently targeting banner element. */ /* .main > .columns is the body style for the desktop version of new responsive design the page has no sidebar so cannot use "grid_12" selector */ [class^="grid_12"], .main > .columns { background-color: #FFF; color: #3d3935; font-size: 19px; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; line-height: 1; /* 19px */ } @media screen and (max-width: 1001px) { .main{ display: flex; flex-direction: column; margin-right: 20px; overflow-x: scroll; width: auto; } .main .grid_4.alpha { margin-top: 1em; order: 3; } .main .grid_12 { margin-left: 0; } } @media screen and (min-width: 750px) and (max-width: 1001px) { .main { -webkit-justify-content: center; -webkit-align-items: center; justify-content: center; align-content: center; } } /* desktop style that reverts the rules in foundation.css */ .desktop { font-size: 10px; cursor: auto; display: inline; } .desktop li { font-family: Arial, Helvetica, sans-serif; font-weight: normal; } .desktop *, .desktop *:before, .desktop *.after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } h2, h3, h4, .h2, .h3 { color: inherit; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; } h1, .h1 { font-size: 40px; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; line-height: 1.4; /*56px;*/ } h2, .h2 { font-size: 30px; font-weight: 600; margin: 35px 0 10px 0; } h3, .h3 { font-size: 20px; font-family: inherit; line-height: 1.3; letter-spacing: 0px; margin: 40px 0 20px 0; } h4 { font-size: 19px; margin: 20px 0 2px 0; } h3 a { font-weight: bold; } h3.align-bottom { padding-bottom: 5px; } p { margin-top: 0; margin-bottom: 15px; } p:last-child { margin-bottom: 0; } a { font-weight: 600; color: #005FC0; } a:hover { color: #002A95; text-decoration: underline; } p a, p a:visited, li a, li a:visited, dl a, dl a:visited { font-weight: 600; text-decoration: none; } p a:hover, li a:hover, dl a:hover { font-weight: 600; text-decoration: underline; } .banner b { margin-top: 8px; } .chevron-forward { background: url('/images/chevron.jpg') no-repeat right; padding-right: 30px; } .chevron-down { background: url('/images/chevron-down.png') no-repeat right; padding-right: 30px; } /*********** Table Treatments *****************/ table { border: 1px solid #dfdedd; border-collapse: collapse; border-spacing: 0; margin: 20px 0; width: 100%; } caption { background-color: #e1ebf2; border-radius: 4px 4px 0 0; color: inherit; font-size: 18px; font-weight: bold; padding: 10px 5px 10px 12px; } table th, table td { font-size: 16px; } table th { /*color: #82807f;*/ font-weight: 400; text-transform: uppercase; } .no-background th:first-child, .no-background td:first-child { padding-left: 0; } .no-background, .no-background th, .no-background td { background: none; } .no-border th, .no-border td { border: none; } /*********** Button Treatment *****************/ .button { font-size: 19px; vertical-align: middle !important; } .button-theme-blue, .button-theme-blue:visited { background-color: #005FC0; border: 3px solid #005FC0; line-height: 1em; } .button-theme-blue:hover { background-color: #1077b7; border: 3px solid #1077b7; } .button-theme-blue:active { background-color: #005FC0; border: 3px solid #5ba61b; } .button-theme-blue:focus { border-color: #005FC0; color: #fff; /*outline-style: none;*/ } /* .cancel, .confirm, */ .submit-light-blue { background: #0696ed; border: 1px solid #0696ed; padding: 5px 10px; margin-right: 20px; } /* .cancel:hover, .confirm:hover, */ .submit-light-blue:hover { background: #0696ed; } /* .cancel:active, .confirm:active, */ .submit-light-blue:active { background: #0696ed; } /*********** Caption Treatment ****************/ figure, .figure { margin: 0; padding: 0; } .fig-video { margin: 40px 0; } figcaption, .caption { background-color: #fff; color: #666564; display: block; font-size: 14px; /* 1em; */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.5em; margin-bottom: 1.2em; padding: 8px 0 0 0; margin-bottom: 15px; /*20px*/ } figcaption a, .caption a { color: #666564; font-weight: 400; } figcaption a:hover, .caption a:hover, figcaption a:active, .caption a:active { cursor: hand; cursor: pointer; text-decoration: underline; } .video-caption { background: url('/images/caption-video-icon.jpg') no-repeat 5px center; padding-left: 40px; } a:link .caption, a:visited .caption, a:hover .caption, a:active .caption { font-weight: 400; } a:hover .caption { text-decoration: underline; } /*********** Article - module ****************/ /* An article element suitable for displaying a record image and info. .vertical-orientation - image on top info below (default is horizontal) Cheatsheet #?? */ .article { clear: left; border-style: solid; border-width: 0 0 1px; color: #3d3935; overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; } .article-group .article { color: inherit; } .article a { /*height: 100%;*/ } .article a:link, .article a:visited { /*background-color: #eef8fe; display: block; overflow: hidden; */ } .article a:hover { /*background-color: #e1f3fd; text-decoration: none; */ } .article a:active { /* background-color: #d2ecfc; */ } .article time { color: #3d3935; display: block; font-weight: 400; line-height: 1.2em; } .article h3 { background: transparent; border: none; font-weight: 600; padding: 0; margin: 0 0 5px 0; } .article-header { /* height: 125px; overflow: hidden; position: relative; */ } .article-header time { /* background-color: #0696ed; bottom: 0px; color: #fff; font-size: 14px; padding: 5px; position: absolute; font-weight: 600; font-size: 12px; padding: 6px; width: 44px; line-height: 1.2em; */ } .article-body { /* font-size: 12px; padding: 8px; */ } .location { /* color: #005FC0; display: block; font-weight: 400; padding: 0px; margin: 0 !important; */ } .article td { padding-bottom: 0; padding-top: 12px; } .article tr td:first-child { padding-left: 0; } td.tight-coupling { padding-top: 4px; } /*********** Set - module ****************/ /* A parent container of n items. Items are related to each other and are classes of some type ie. Program, human-book, database, TRL exhibit etc. set-item: - Should have a heading - last

has .overflow-hidden? Cheatsheet #?? */ .set { margin-bottom: 20px; overflow: hidden; } .set-item { margin: 40px 0px 0px 0; overflow: hidden; } .set-item:first-child { margin-top: 20px; } .set-item img { float: left; margin-right: 20px; } .set-item .slug { display: inline-block; } /*********** Set border rules ****************/ .children-border-bottom .set-item { border-color: inherit; border-style: solid; border-width: 0 0 1px 0; padding-bottom: 40px; } /*********** Section Treatments ****************/ /* May want to consider combining these classes somehow with .article */ /* Section group really needed? How's about just having section and manipulating it with subclasses as needed.*/ .section-group { } .section-group .section { border-style: solid; border-width: 0 0 1px 0; color: inherit; } .section-group .chevron { background: url("/images/chevron.jpg") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 20px; padding-bottom: 2px; } /*********** Border Treatments ****************/ /* Borders work in conjunction with grids. That is to say, borders will work most effectively when combined with a container that has a grid class assigned to it. */ .border, .border-top, .border-right, .border-bottom, .border-left { border-style: solid; border-color: #ececed; } .border { border-width: 1px 1px 1px 1px; } .border-top { border-width: 1px 0px 0px 0px; } .border-right { border-width: 0px 1px 0px 0px; } .border-bottom { border-width: 0px 0px 1px 0px; padding-bottom: 40px; /* Applied on module not state? */ } .border-left { border-width: 0px 0px 0px 1px; } /** Border colours **/ .border-light-grey { border-color: #ececed; } .border-color-c9c9c9 { border-color: #c9c9c9; } .border-color-9e9c9a{ border-color: #9e9c9a; } .border-color-969492 { border-color: #969492; } /** Border styles **/ .border-dashed { border-style: dashed; } /*********** Ordered/Unordered lists ****************/ ul, ol { margin: 0 0 20px 1em; padding: 0; } .horizontal-list.list-items-push-bottom li { margin-bottom: 10px; } .list-items-align-bottom li { margin-bottom: 0; padding-bottom: 0; } /*********** Definition lists ****************/ dl { margin: 20px 0; } dt { color: #3d3935; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; font-size: 1em; font-weight: 700; line-height: 1.2em; margin: 40px 0 10px 0; } dd { line-height: 1.4em; } .widget h3 { border: medium none; color: #3d3935; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; margin: 40px 0 20px; padding: 0; } /*********************** Microbrowser search widget style ******************/ .microbrowser { background-color: #f6f9fe; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; padding: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .microbrowser h3 { color: #3d3935; font-weight: normal; font-family: inherit; font-size: 19px; padding-top: 0; padding-bottom: 10px; } .custom-select { /*display: block; position: relative; vertical-align: middle;*/ } .custom-select select { background-color: #fff; box-shadow: none; color: #666564; display: block; font-size: 19px; font-family: inherit; line-height: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #c5daeb; padding: 0 0 0 4px; /* 0 0 0 2px; */ width: 370px; border: 2px solid #dfdfdf; border-right: 0; color: #3d3935; height: 45px; padding: 3px 0 5px 10px; width: 400px; } .custom-select select:hover { cursor: hand; cursor: pointer; } .custom-select select:focus { /*outline: none; border: 1px solid #005FC0; box-shadow: none;*/ } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } .custom-select + .button, .microbrowser .button { /*border: 3px solid #005FC0; font-size: inherit; margin-left: -4px; margin-top: 10px; margin-bottom: 10px; min-height: 43px; width: 100px;*/ } .microbrowser .button, .search-within .button{ border-width: 1px; border-style: solid; } .svg-dropdown-arrow { pointer-events: none; position: absolute; right: 0px; top: 1px; height: 100%; width: 27px; top: 2px; width: 35px; } :-moz-any(.svg-dropdown-arrow) { background: none repeat scroll 0 0 #FFFFFF; /*right: 1px;*/ top: 1px; height: 33px; /* 35px */ width: 27px; height: 41px; /*right: 0px;*/ top: 2px; width: 35px; } .microbrowser p { font-size: initial; } .microbrowser a, .microbrowser a:hover { font-size: 16px; font-weight: 600; margin-top: 0; } .widget h3 { border: medium none; color: #3d3935; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial; margin: 40px 0 20px; padding: 0; } .search-within{ background-color: #f6f9fe; padding: 10px; } .search-within input[type="text"]{ background-color: #fff; box-shadow: none; color: #666564; display: block; font-size: 19px; font-family: inherit; line-height: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #c5daeb; padding: 0 0 0 4px; /* 0 0 0 2px; */ width: 70% !important; border: 2px solid #dfdfdf; color: #3d3935; height: 45px; padding: 0.42em 0 0.42em 0.52em; } .search-within input[type="text"]:focus, .search-within select:focus{ outline: none; border: 2px solid #005FC0; box-shadow: none; } .search-within .button{ font-size: inherit; margin-left: -4px; margin-top: 10px; margin-bottom: 10px; min-height: 43px; padding: 0 8px; width: 80px; } /*********************** Promo Card - module ******************/ /* A promo card is a module used to bring attention to bib records, events & programs. Attributes: .title - title of record Cheatsheet #?? */ .promo-card { border: 1px solid #ececed; display: table-cell; font-size: 16px; font-weight: 400; margin: 0; width: inherit; } .promo-card p { padding: 0px 30px; margin-bottom: 30px; } .promo-card img { margin-top: 20px; } .promo-card .title { font-size: 16px; margin: 0; padding: 0 20px 0px; } .promo-card:hover { background-color: #f4f4f5; } .display-table .promo-card { color: inherit; cursor: hand; cursor: pointer; float: none; text-decoration: none; } .slug { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .slug-padded { padding: 5px 7px; } .slug-overlay { position: relative; } .slug-overlay .slug, .slug-overlaid { font-size: 16px; left: -10px; position: absolute; top: 100px; } /*********************** Standard Card - module ******************/ /* A possible replacement for the promo-card module above. Attributes: .title - title of tile */ .card { overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.26); color: #272727; } .card-title { margin-bottom: 15px; } .card-content p{ margin-bottom: 10px; } .card-action { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.26); } /* Tooltips */ /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ .tooltipster-default { border-radius: 0px; border: 1px solid #005FC0; background: #fff; color: #333; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); } /* Use this next selector to style things like font-size and line-height: */ .tooltipster-default .tooltipster-content { padding: 12px; overflow: hidden; } .tooltipster-content p { font-size: 14px; } /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { /* border-color: ... !important; */ margin-bottom: -2px !important; } .tooltipster-arrow-bottom .tooltipster-arrow-border { margin-top: -2px !important; } /* If you're using the icon option, use this next selector to style them */ .tooltipster-icon { cursor: help; margin-left: 4px; } /* This is the base styling required to make all Tooltipsters work */ .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; /*pointer-events: none;*/ width: auto; overflow: visible; } .tooltipster-base .tooltipster-content { overflow: hidden; } /* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; } .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px; } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px; } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; } .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; } .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; } .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; } .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; } .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; } .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; } /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .tooltipster-fade-show { opacity: 1; } .tooltipster-grow { -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; } .tooltipster-grow-show { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; } .tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); } .tooltipster-fall { top: 0; -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-fall-show { } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; } .tooltipster-slide { left: -40px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-slide.tooltipster-slide-show { } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; } /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ .tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .tip-title { clear: both; color: #333333; display: block; font-weight: 600; margin-bottom: 10px; } .tooltip-close { height: 40px; margin-right: -10px; margin-top: -12px; width: 40px; } /* submit button style */ .button-curved { border-radius: 0.3em; box-sizing: border-box; border: 3px solid #005FC0; background-color: #005FC0; color: #fff; font-size: 1.25rem; padding: 15px 5px 15px 5px; margin: 0px 0px 10px 0px; width: 100%; } .button-curved:hover { border-radius: 0.3em; background-color: #1077b7; border: 3px solid #1077b7; text-decoration: none; } .button-curved:active { border-radius: 0.3em; background-color: #005FC0; border: 3px solid #5ba61b; } .button { padding: 0.5em 1em; /* override Foundation's defaults */ min-height: 0px; /*override tpl old styles */ } /*** List of modifiers (or state classes) ***/ .hero-image { display: block; margin-bottom: 20px; } .rounded { border-radius: 0.3em; } .indent { margin-left: 2em; } /*** Grid like gutters ***/ .gutter-left { display: block; margin-left: 20px; } .gutter-right { display: block; margin-right: 20px; } /*** Text ***/ .text-underline { text-decoration: underline; } .text-semi-bold, strong { font-weight: 600; } .text-normal { font-weight: 400; } a.text-normal:link, a.text-normal:visited, a.text-normal:hover, a.text-normal:active { font-weight: 400; } .text-size-small { font-size: 12px; letter-spacing: initial; } /*** Colour ***/ .bg-blue-magenta { background-color: #6c28e3; } .bg-black { background-color: #000; } .bg-grey{ background-color: #ebebeb; } .theme-black { color: #000; } /*** Element model ***/ .display-inline-block { display: inline-block; } .display-block{ display: block; } .display-table { border-collapse: separate; border-spacing: 20px; display: table; margin: -20px 0px 0px -20px; } .display-row { display: table-row; } /*** Position types & coordinates ***/ .position-relative{ position: relative; } .position-absolute{ position: absolute; } .l-n5{ left: -5px; } .l-n10{ left: -10px; } .l-n15{ left: -15px; } .l-n20{ left: -20px; } .t-50{ top: 50px; } .t-100{ top: 100px; } /*** Spacing ***/ .mt-60 { margin-top: 60px; } .mb-0 { margin-bottom: 0px; } .mb-20 { margin-bottom: 20px; } .mt-20{ margin-top: 20px; } .ma-20{ margin: 20px; } .pt-10{ padding-top: 10px; } .pt-20 { padding-top: 20px; } .pb-5 { padding-bottom:5px; } .pb-10 { padding-bottom:10px; } .pb-20{ padding-bottom: 20px; } .pa-10 { padding: 10px; } .pa-20{ padding: 20px; } .new-responsive-search .search.button { padding: 0 1em; } .new-responsive-search .search-bar .pagination, .new-responsive-search .search-bar .pagination .current { float: none; } .new-responsive-search .pagination { font-size: inherit; } .new-responsive-search .pagination-centered { text-align: center; margin: 1em 0; } .new-responsive-search .pagination .current { background: #005FC0; color: #fff; padding: 0.1875rem 0.625rem; } .new-responsive-search .pagination li { font-size: 1.4em; display: inline-block; } .new-responsive-search .pagination a { padding: 0.1875rem 0.625rem; border: none; background: none; } .new-responsive-search .pagination a:hover { background: #efefef; } .button { font-size: 1em; } .new-responsive-search #search-bar-sort { margin: 0 0 4px; } .new-responsive-search #search-bar-sort .dropit-submenu { margin-left: 42px; } .new-responsive-search .search-bar h3.item-count { margin-bottom: 1em; display: inline-block; max-width: 18em; } .new-responsive-search .search-bar h3.item-count #search-term-label{ font-size:1.5em; } .new-responsive-search .show-filters { margin: 5px 5px 5px 10px; vertical-align: middle; } .new-responsive-search .search-title h3.item-count { /* margin-top: 3px; */ font-size:1em; } .new-responsive-search .spotlight-body img { margin-bottom: 0.5em; } .refinement-container-selected li { list-style: none; } .refinement-container-selected .sort-selected a { font-weight: 700; } .label.secondary { background: #767676; /* Accessibility correction for Foundation's default style. */ } .new-responsive-search .spotlight-body img { max-width: 33%; } .responsive-footer ul, .responsive-footer ol { font-size: 16px; } #search.new-responsive-search .filters-sidebar { border-right: 1px solid #999; padding-top: 1.6em; margin-bottom: 2em; } .add-clear-span a { font-size: 1.2rem; font-family: sans-serif; } #search.new-responsive-search #search-terms::-ms-clear { display: none; } .new-responsive-search .row .row.search-heading { margin-top: 2em; margin-bottom: 1em; } #search.new-responsive-search .image-container { text-align: left; } #search.new-responsive-search .image-container img { max-height: 11em; max-width: 100%; border: 1px solid #D6D6D6; } div#search.new-responsive-search .search-results-column { padding: 0.5em 1.5em; border-left: 1px solid #999; margin-bottom: 2em; margin-left: -1px; } div#search.new-responsive-search.new-titles-list .search-results-column { border-color:#fff; } .search-results-column .hold.button { padding: 8px 16px; } .search-results-column .gridContainerElement .hold.button { margin-bottom: 10px; } .search-results-column .access-online { padding: 9px 10px; font-size: 14px; } .search-results-column .gridContainerElement .access-online { margin-bottom: 10px; } .new-titles-list-widget > h3 { margin-top:0; font-size: 1.5em; color: #0a0a0a; border-bottom: 1px solid #999; } .new-titles-list-widget li { line-height: 1.2em; padding-bottom:0.6em; font-weight:600; } .new-responsive-search .search-box-links { overflow: inherit; padding: 0; } .new-responsive-search .search-share a { font-size: 0.8em; } .new-responsive-search #search-terms { width: 100%; height: 44px; font-size: 1.37em; border: 1px solid #666564; } .new-responsive-search .search-box-links { line-height: 1em; font-size: 0.8em; margin-top: 1.3em; } .new-responsive-search #filters .advSearchLink { float: right; } .new-responsive-search .search-share .sprite { margin: 0 0 0.5em; } .new-responsive-search .search-checkboxes input { -webkit-appearance: checkbox; -webkit-border-radius: 5px; } .new-responsive-search .search-checkboxes label { display: inline-block; width: 84%; font-size: 0.8em; padding-top: 2px; vertical-align: top; line-height: 1.3em; margin-left: 0 !important; } .new-responsive-search .recsPerPage label { display: inline-block; } .new-responsive-search .recsPerPage select { width: 70%; } .new-responsive-search #recsPerPageSubmit { height: 21px; margin-top: -5px; } .new-responsive-search .dropit a .sort-selected { font-size: inherit; height: inherit; width: 177px; } .new-responsive-search .dropit-submenu { top: 35px; right: 0; width: 178px; } .new-responsive-search .dropit-submenu a:link, .new-responsive-search .dropit-submenu a:visited, .new-responsive-search .dropit-submenu a:hover, .new-responsive-search .dropit-submenu a:active { font-size: inherit; } .new-responsive-search .refinement-container, .new-responsive-search .refinement-container-selected { padding-bottom: 3px; margin: 0 0 1em; font-size: 0.8em; position: relative; border: none; } .new-responsive-search .refinement-container h3, .new-responsive-search .refinement-title, .refinement-container-selected h3, .new-responsive-search .refinement-container-selected .refinement-title { border: none; border-bottom: 1px solid #ccc; color: #666564; font-size: 1em; line-height: 16pt; margin: 0 0 4px; padding-bottom: 0; padding-top: 0; text-decoration: none; font-weight: normal; border-top-width: 0px; background: none; } .new-responsive-search .last .record-result { border-bottom: 1px solid #efefef; } .new-responsive-search .refinement-container-selected h3, .new-responsive-search .refinement-container-selected .refinement-title { border-bottom: 1px solid #666; font-weight: bold; color: #333; } .new-responsive-search .image-container img { max-width: 90%; max-height: 100%; object-fit: scale-down; object-position: 0 0; } .new-responsive-search .image-container-branch img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; } .new-responsive-search .search-bar h3.search-bar-label { padding: 7px 5px 0 1em; } @media screen and (min-width: 40em) { .new-responsive-search .sort { margin-right: 1em; } } @media screen and (max-width: 39.9375em){ .new-responsive-search .sort { margin-right: 0em; } } /* .new-responsive-search .sort { margin-right: 1em; } */ .new-responsive-search li.columns { list-style: none; } .new-responsive-search .refinement-clear a:link, .new-responsive-search .refinement-clear a:visited { color: inherit; } #search.new-responsive-search #search-bar-top { width: inherit; float: inherit; margin-left: inherit; margin-right: inherit; } .new-responsive-search #search-bar-top #sort-view-container { display: inherit; float: inherit; width: inherit; } .new-responsive-search #search-context-crumb { width: 100%; margin-bottom: 0; } .new-responsive-search #search-context-crumb label { width: 90%; margin:0; } .new-responsive-search .search-bar h3 { margin: 0; } .new-responsive-search .sprite a.grid-view { background-position: 0px -425px } .new-responsive-search .sprite a.list-view { background-position: 0px -475px } .new-responsive-search #search-bar-bottom, .new-responsive-search #grid-search-bar-bottom { width: 100%; margin: 0; padding: 0; border-top: none; } .new-responsive-search .pagination-next a::after, .new-responsive-search .pagination-next.disabled::after { margin-left: 0.2rem; } .new-responsive-search .pagination-previous a::before, .new-responsive-search .pagination-previous.disabled::before { margin-right: 0.5rem; } .new-responsive-search form#searchBarForm { display: inline; margin: 0; } .new-responsive-search .thumb, .new-responsive-search .digitalArchiveIMG { height: 158px; width: 100%; } .new-responsive-search .thumb{ /* height: auto; text-align: center; */ } .new-responsive-search .details{ /*text-align: center;*/ } .new-responsive-search .details h3{ /*font-size: 1.2em;*/ } .new-responsive-search .spotlight-body .clear-left { clear: none; } .new-responsive-search .spotlight-body:link, .new-responsive-search .spotlight-body:visited, .new-responsive-search .spotlight-body:hover, .new-responsive-search .spotlight-body:active { padding: 5px 0; min-height: inherit; color: #000; } .new-responsive-search .mode-portrait { border: 0; border-top: 3px solid #001c71; padding: 0; margin: 0; background: #f7f7f7; color: #000; } .new-responsive-search .mode-landscape img { left: 0; top: 0; max-height: 100%; } .events-list{ padding: 0; } .events-list .merch-record-horizontal .date{ margin: 0; } .events-list .merch-record-horizontal + p{ padding-top: 10px; } #upcoming-programming .events-list .merch-record-horizontal .title{ font-size: 20px; line-height: 1.3; margin-top: -5px; margin-bottom: 0; padding-top: 0; } #upcoming-programming .events-list .merch-record-horizontal a:first-child .title, #upcoming-programming .events-list .merch-record-horizontal a:first-child:visited .title{ color: #005FC0; text-decoration: none; } #upcoming-programming .events-list .merch-record-horizontal a:first-child:hover .title{ color: #002A95; text-decoration: underline; } #upcoming-programming .events-list .image-container{ width: auto; } #upcoming-programming .events-list .image-container img { object-fit: cover; max-width: 150px; width: 150px; } #upcoming-programming .SC-images .image-container img { object-fit: cover; max-width: 100px; width: 100px; } @media screen and (min-width: 0em) and (max-width: 39.9375em) { .filters-showing .hide-on-show-filters { display: none; } .filters-showing #filters.show-for-medium { display:block !important; } .new-responsive-search .pagination-previous a::before, .new-responsive-search .pagination-previous.disabled::before, .new-responsive-search .pagination-next a::after, .new-responsive-search .pagination-next.disabled::after { margin: 0; } .new-responsive-search .pagination li.pagination-next { font-size: 1em; } .new-responsive-search .search.button, .new-responsive-search .search:hover, .new-responsive-search .search.button:hover, .new-responsive-search .search.button:focus { padding: 0; width: 45px; background-image: url("/images/TPLMobileIcons3.svg"); background-repeat: no-repeat; background-position: 0 -88px; text-indent: -10000px; } .new-responsive-search .pagination li { font-size: 1.1em; } .new-responsive-search .pagination a, .new-responsive-search .pagination .current { padding-left: 0.3em; padding-right: 0.3em; } .new-responsive-search .pagination .ellipsis::after { padding-left: 0.1em; padding-right: 0.1em; } .new-responsive-search .search-results-column { padding: 0 0.6em; border-left: none; margin: 0; } .new-responsive-search .search-title h3.item-count { margin: 3px 0 0.8em 0.1em; font-size: 1em; font-weight: bold; } .new-responsive-search .spotlight-body img { max-width: 20%; } .new-responsive-search .spotlight-content .title, .new-responsive-search .spotlight-content .details { font-size: 0.8em; line-height: 1.1em; } .new-responsive-search .record-result .counts-column { font-size: 0.8em; margin: 3px 0 0 0; } .new-responsive-search .record-result .title { font-size: 1.2em; } .new-responsive-search .record-result .title a { margin: 0; } .new-responsive-search .spotlight.widget { margin: 0; } .button { /*font-size: 0.8em;*/ padding: 0.5em 0.7em; } .record-result .counts .holds, .record-result .counts .copies { color: #333; } .new-responsive-search .row .row.search-heading { margin-top: 1em; margin-bottom: 0.7em; } .new-responsive-search .refinement a { padding: 0.6em 0 0.3em; display: inline-block; } .new-responsive-search #filters h2 { font-size: 1em; margin: 15px 0 10px 0; } #search.new-responsive-search .filters-sidebar { padding-top: 0.2em; margin: 0; } div#search.new-responsive-search .search-results-column { padding: 0 0.8em; } } /* */ .tip { border: 2px solid #e11c23; border-radius: 6px; margin-top: 1rem; width: 100%; } .tip--multiple { margin-bottom: 1rem; } .tip-title { /*background: rgba(0, 0, 0, 0) url("/content/ready-for-reading/images/ready-for-reading.jpg") no-repeat scroll 0 0;*/ display: inline-block; left: 0px; margin-bottom: 0px; margin-top: 0px; top: 0; vertical-align: middle; width: 100%; } .tip--multiple .tip-title.title-center { padding-left: 0; text-align: center; } .tip--multiple .tip-title { background-color: #e11c23; border-top-left-radius: 4px; border-top-right-radius: 4px; padding-bottom: 0px; padding-left: 1rem; padding-top: 16px; height: 38px; } .tip-title { color: #fff; font-size: 27px; font-weight: bold; font-family: sofia-pro-soft,Helvetica,Arial,sans-serif; line-height: 20px; margin-bottom: 0; margin-top: 0; padding-left: 10px; } #tip-title-text { margin-left: -93px; } .tip-title { position: relative; } h4 { font-size: 1.25rem; } .tip-content { margin: 0.4rem 1rem; padding: 20px; } /* ibby page - NC */ .inline-list-nav { display: inline-block; vertical-align: middle; list-style: outside none none; margin-left: 0px; } .inline-list-nav a { display: inline-block; } .inline-list-nav > li { display: block; float: left; margin: 0px 5px 0px 0px; } .inline-list-nav > li:after { content: "|"; position: relative; line-height: normal; display: inline-block; list-style: outside none none; padding-left: 5px; } .inline-list-nav > li:last-child:after { display: none; } .ibby-list { display: inline; list-style: outside none none; overflow: hidden; padding: 0; vertical-align: middle; } .ibby-list li { display: block; float: left; list-style: outside none none; margin: 0px 9px 6px 0px; padding: 2px 8px; } .ibby-list li a { font-weight: 600; } .ibby-button { font-size: .8em; border-radius: 0px; border: 2px solid #005FC0; background: #fff; color: #333; } .ibby-search-content { font-size: 0.75em; margin: 10px 10px 20px 0px; } .ibby-search-content-header { font-size: 0.75em; margin: 0px 10px 15px 0px; } .search-within-ibby { background-color: #f6f9fe; padding: 16px 16px 5px 16px; } .search-within-ibby input[type="text"] { -moz-appearance: none; background-color: #fff; border: 2px solid #dfdfdf; border-radius: 0; box-shadow: none; box-sizing: border-box; color: #3d3935; display: block; font-family: inherit; font-size: 16px; height: 45px; line-height: normal; padding: 0.42em 0 0.42em 0.52em; width: 69% !important; float: left; } .search-within-ibby .button { font-size: inherit; margin-bottom: 10px; margin-left: -4px; margin-top: 10px; min-height: 43px; padding: 0 8px; width: 80px; border-style: solid; border-width: 1px; } .search-within-ibby .ibby-list { display: inline; list-style: outside none none; overflow: hidden; padding: 0; vertical-align: middle; width: 340px; float: left; font-size: 0.75em; list-style-type: none; margin: 0 0 0; padding: 0 1em 0em 0; } .search-within-ibby .ibby-list li { font-size: 1em; display: block; float: left; list-style: outside none none; margin: 0px 6px 11px 0px; padding: 2px 7px; } .round-message-all { /*, #spotlight-promotion .widget-content */ background-color: #fdfdd4; padding: 0.875rem 1.5rem 0.875rem 0.875rem; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border: 1px solid #f8a961; margin-bottom: 0.75em; } .round-message-all h3{ color: #525252; font-weight: 600; } /* upaknee newsletter form */ .grid_12 .em_UpakneeFormFields .em_inputField_submit input[type="submit"] { background: #005FC0; border: 1px solid #005FC0; border-radius: 4px; width: 127px; color: #fff; padding: 7px; cursor: pointer; height: 54px; margin-bottom: 10px; font-size: 19px; font-weight: bold; font-family: inherit; transition-duration: 0.3s; transition-property: color, background-color; } .grid_12 .em_UpakneeFormFields .em_inputField_submit input[type="submit"]:hover { background: #002A95 !important; border: 1px solid #002A95 !important; } .grid_12 .em_UpakneeFormFields .em_inputField_label { color: #0A0A0A; font-size: 1rem; display: block; line-height: 1.8; } .grid_12 .em_UpakneeFormFields .em_inputField_label .required { font-size: 1rem; color: #C80909; font-weight: normal !important; display: inline-block !important; line-height: 1.8; } .grid_12 .em_UpakneeFormFields input[type="email"], .grid_12 .em_UpakneeFormFields input[type="text"] { width: 85%; padding: 15px 6px; border: solid 1px #5c5552; background-color: white; margin-top: 10px; margin-bottom: 10px; font-size: 16px; height: 35px; } .grid_12 .em_UpakneeFormFields sup { color: red; font-size: 17px; } .responsive-column .em_UpakneeFormFields .em_inputField_submit input[type="submit"] { background: #005FC0 !important; border: 1px solid #005FC0 !important; border-radius: 4px; width: 127px; color: #fff; padding: 7px; cursor: pointer; height: 54px; margin-bottom: 10px; font-size: 19px; font-weight: bold; font-family: inherit; transition-duration: 0.3s; transition-property: color, background-color; } .responsive-column .em_UpakneeFormFields .em_inputField_submit input[type="submit"]:hover { background: #002A95 !important; border: 1px solid #002A95 !important; } .responsive-column .em_UpakneeFormFields .em_inputField_label { color: #0A0A0A; font-size: 1rem; font-weight: normal !important; display: block; line-height: 1.8; } .responsive-column .em_UpakneeFormFields .em_inputField_label .required { font-size: 1rem; color: #C80909; font-weight: normal !important; display: inline-block !important; line-height: 1.8; } .responsive-column .em_UpakneeFormFields input[type="email"], .responsive-column .em_UpakneeFormFields input[type="text"] { width: 85%; padding: 15px 6px; border: solid 1px #5c5552; background-color: white; margin-top: 0.12em; margin-bottom: 10px; font-size: 16px; height: 35px; } .searchpage-search-box-container { margin: 0 auto; width: 100%; max-width: none; padding: 0; background-color: #F8F8F8; } .searchpage-search-box-container-inner { padding: 1.5rem 1rem; max-width: 1200px; margin: 0 auto; }